diff --git a/golden/go/web/frontend/generate_typescript_rpc_types/main.go b/golden/go/web/frontend/generate_typescript_rpc_types/main.go
index c95fc4c..9ff9629 100644
--- a/golden/go/web/frontend/generate_typescript_rpc_types/main.go
+++ b/golden/go/web/frontend/generate_typescript_rpc_types/main.go
@@ -70,6 +70,9 @@
 	// Response for the /json/v1/ignores RPC endpoint.
 	generator.Add(frontend.IgnoresResponse{})
 
+	// Response for the /json/v1/list RPC endpoint.
+	generator.Add(frontend.ListTestsResponse{})
+
 	generator.AddUnionWithName(expectations.AllLabel, "Label")
 	generator.AddUnionWithName(common.AllRefClosest, "RefClosest")
 }
diff --git a/golden/go/web/frontend/types.go b/golden/go/web/frontend/types.go
index 9ff1e18..2df0cf7 100644
--- a/golden/go/web/frontend/types.go
+++ b/golden/go/web/frontend/types.go
@@ -357,4 +357,10 @@
 	PositiveDigests  int            `json:"positive_digests"`
 	NegativeDigests  int            `json:"negative_digests"`
 	UntriagedDigests int            `json:"untriaged_digests"`
+	TotalDigests     int            `json:"total_digests"`
+}
+
+// ListTestsResponse is the response for /json/v1/list.
+type ListTestsResponse struct {
+	Tests []TestSummary `json:"tests"`
 }
diff --git a/golden/go/web/web.go b/golden/go/web/web.go
index bf71344..fb65325 100644
--- a/golden/go/web/web.go
+++ b/golden/go/web/web.go
@@ -1219,6 +1219,7 @@
 				PositiveDigests:  s.Pos,
 				NegativeDigests:  s.Neg,
 				UntriagedDigests: s.Untriaged,
+				TotalDigests:     s.Pos + s.Neg + s.Untriaged,
 			})
 		}
 	}
@@ -1226,9 +1227,10 @@
 	sort.Slice(tests, func(i, j int) bool {
 		return tests[i].Name < tests[j].Name
 	})
-	// Outputs: []frontend.TestSummary
-	//   Frontend will have option to hide tests with no digests.
-	sendJSONResponse(w, tests)
+
+	// Frontend will have option to hide tests with no digests.
+	response := frontend.ListTestsResponse{Tests: tests}
+	sendJSONResponse(w, response)
 }
 
 // TriageLogHandler returns the entries in the triagelog paginated
diff --git a/golden/go/web/web_test.go b/golden/go/web/web_test.go
index 93d4c06..8962700 100644
--- a/golden/go/web/web_test.go
+++ b/golden/go/web/web_test.go
@@ -2570,35 +2570,35 @@
 	}
 
 	test("all GM tests from all traces", "/json/list?corpus=gm&include_ignored_traces=true",
-		`[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":1},`+
-			`{"name":"test_two","positive_digests":2,"negative_digests":0,"untriaged_digests":2}]`)
+		`{"tests":[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":1,"total_digests":2},`+
+			`{"name":"test_two","positive_digests":2,"negative_digests":0,"untriaged_digests":2,"total_digests":4}]}`)
 
 	test("all GM tests at head from all traces", "/json/list?corpus=gm&at_head_only=true&include_ignored_traces=true",
-		`[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":0},`+
-			`{"name":"test_two","positive_digests":2,"negative_digests":0,"untriaged_digests":1}]`)
+		`{"tests":[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":0,"total_digests":1},`+
+			`{"name":"test_two","positive_digests":2,"negative_digests":0,"untriaged_digests":1,"total_digests":3}]}`)
 
 	test("all GM tests for device beta from all traces", "/json/list?corpus=gm&trace_values=device%3Dbeta&include_ignored_traces=true",
-		`[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":1},`+
-			`{"name":"test_two","positive_digests":1,"negative_digests":0,"untriaged_digests":0}]`)
+		`{"tests":[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":1,"total_digests":2},`+
+			`{"name":"test_two","positive_digests":1,"negative_digests":0,"untriaged_digests":0,"total_digests":1}]}`)
 
 	test("all GM tests for device delta at head from all traces", "/json/list?corpus=gm&trace_values=device%3Ddelta&at_head_only=true&include_ignored_traces=true",
-		`[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":0},`+
-			`{"name":"test_two","positive_digests":0,"negative_digests":0,"untriaged_digests":1}]`)
+		`{"tests":[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":0,"total_digests":1},`+
+			`{"name":"test_two","positive_digests":0,"negative_digests":0,"untriaged_digests":1,"total_digests":1}]}`)
 
 	// Reminder that device delta and test_two match ignore rules
 	test("all GM tests", "/json/list?corpus=gm",
-		`[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":1}]`)
+		`{"tests":[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":1,"total_digests":2}]}`)
 
 	test("all GM tests at head", "/json/list?corpus=gm&at_head_only=true",
-		`[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":0}]`)
+		`{"tests":[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":0,"total_digests":1}]}`)
 
 	test("all GM tests for device beta", "/json/list?corpus=gm&trace_values=device%3Dbeta",
-		`[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":1}]`)
+		`{"tests":[{"name":"test_one","positive_digests":1,"negative_digests":0,"untriaged_digests":1,"total_digests":2}]}`)
 
 	test("all GM tests for device delta at head", "/json/list?corpus=gm&trace_values=device%3Ddelta&at_head_only=true",
-		"[]")
+		`{"tests":[]}`)
 
-	test("non existent corpus", "/json/list?corpus=notthere", "[]")
+	test("non existent corpus", "/json/list?corpus=notthere", `{"tests":[]}`)
 }
 
 func TestListTestsHandler_InvalidQueries_BadRequestError(t *testing.T) {
diff --git a/golden/modules/list-page-sk/index.js b/golden/modules/list-page-sk/index.ts
similarity index 100%
rename from golden/modules/list-page-sk/index.js
rename to golden/modules/list-page-sk/index.ts
diff --git a/golden/modules/list-page-sk/list-page-sk-demo.js b/golden/modules/list-page-sk/list-page-sk-demo.ts
similarity index 78%
rename from golden/modules/list-page-sk/list-page-sk-demo.js
rename to golden/modules/list-page-sk/list-page-sk-demo.ts
index c390573..aaf2f68 100644
--- a/golden/modules/list-page-sk/list-page-sk-demo.js
+++ b/golden/modules/list-page-sk/list-page-sk-demo.ts
@@ -1,12 +1,12 @@
 import './index';
 import '../gold-scaffold-sk';
-import { $$ } from 'common-sk/modules/dom';
 import { delay } from '../demo_util';
 import { manyParams } from '../shared_demo_data';
 import { testOnlySetSettings } from '../settings';
 import { sampleByTestList } from './test_data';
 import { exampleStatusData } from '../last-commit-sk/demo_data';
 import fetchMock from 'fetch-mock';
+import { ListPageSk } from './list-page-sk';
 
 testOnlySetSettings({
   title: 'Testing Gold',
@@ -21,7 +21,6 @@
 // By adding these elements after all the fetches are mocked out, they should load ok.
 const newScaf = document.createElement('gold-scaffold-sk');
 newScaf.setAttribute('testing_offline', 'true');
-const body = $$('body');
-body.insertBefore(newScaf, body.childNodes[0]); // Make it the first element in body.
-const page = document.createElement('list-page-sk');
-newScaf.appendChild(page);
+// Make it the first element in body.
+document.body.insertBefore(newScaf, document.body.childNodes[0]);
+newScaf.appendChild(new ListPageSk());
diff --git a/golden/modules/list-page-sk/list-page-sk.js b/golden/modules/list-page-sk/list-page-sk.js
deleted file mode 100644
index 0d3f503..0000000
--- a/golden/modules/list-page-sk/list-page-sk.js
+++ /dev/null
@@ -1,283 +0,0 @@
-/**
- * @module module/list-page-sk
- * @description <h2><code>list-page-sk</code></h2>
- *
- * This page summarizes the outputs of various tests. It shows the amount of digests produced,
- * as well as a few options to configure what range of traces to enumerate.
- *
- * It is a top level element.
- */
-import { define } from 'elements-sk/define';
-import { html } from 'lit-html';
-import { $$ } from 'common-sk/modules/dom';
-import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';
-import { stateReflector } from 'common-sk/modules/stateReflector';
-import { ElementSk } from '../../../infra-sk/modules/ElementSk';
-import { sendBeginTask, sendEndTask, sendFetchError } from '../common';
-import { defaultCorpus } from '../settings';
-
-import '../corpus-selector-sk';
-import '../query-dialog-sk';
-import '../sort-toggle-sk';
-import 'elements-sk/checkbox-sk';
-import 'elements-sk/icon/group-work-icon-sk';
-import 'elements-sk/icon/tune-icon-sk';
-import { SearchCriteriaToHintableObject } from '../search-controls-sk';
-import { fromObject } from 'common-sk/modules/query';
-
-const template = (ele) => html`
-<div>
-  <corpus-selector-sk .corpora=${ele._corpora}
-      .selectedCorpus=${ele._currentCorpus} @corpus-selected=${ele._currentCorpusChanged}>
-  </corpus-selector-sk>
-
-  <div class=query_params>
-    <button class=show_query_dialog @click=${ele._showQueryDialog}>
-      <tune-icon-sk></tune-icon-sk>
-    </button>
-    <pre>${searchQuery(ele._currentCorpus, ele._currentQuery)}</pre>
-    <checkbox-sk label="Digests at Head Only" class=head_only
-             ?checked=${!ele._showAllDigests} @click=${ele._toggleAllDigests}></checkbox-sk>
-    <checkbox-sk label="Disregard Ignore Rules" class=ignore_rules
-             ?checked=${ele._disregardIgnoreRules} @click=${ele._toggleIgnoreRules}></checkbox-sk>
-  </div>
-</div>
-
-<!-- lit-html (or maybe html in general) doesn't like sort-toggle-sk to go inside the table.-->
-<sort-toggle-sk id=sort_table .data=${ele._byTestCounts} @sort-changed=${ele._render}>
-  <table>
-     <thead>
-         <tr>
-          <th data-key=name data-sort-toggle-sk=up>Test name</th>
-          <th data-key=positive_digests>Positive</th>
-          <th data-key=negative_digests>Negative</th>
-          <th data-key=untriaged_digests>Untriaged</th>
-          <th data-key=total_digests>Total</th>
-          <th>Cluster View</th>
-        </tr>
-    </thead>
-    <tbody>
-      <!-- repeat was tested here; map is about twice as fast as using the repeat directive
-           (which moves the existing elements). This is because reusing the existing templates
-           is pretty fast because there isn't a lot to change.-->
-      ${ele._byTestCounts.map((row) => testRow(row, ele))}
-    </tbody>
-  </table>
-</sort-toggle-sk>
-
-<query-dialog-sk @edit=${ele._currentQueryChanged}></query-dialog-sk>
-`;
-
-const testRow = (row, ele) => {
-  // Returns a HintableObject for building the GET parameters to the search page.
-  const makeSearchCriteria = (opts) => SearchCriteriaToHintableObject({
-    corpus: ele._currentCorpus,
-    leftHandTraceFilter: {'name': [row.name]},
-    includePositiveDigests: opts.positive,
-    includeNegativeDigests: opts.negative,
-    includeUntriagedDigests: opts.untriaged,
-    includeDigestsNotAtHead: ele._showAllDigests ? 'true' : 'false',
-    includeIgnoredDigests: ele._disregardIgnoreRules ? 'true' : 'false',
-  });
-
-  const searchPageHref = (opts) => {
-    const searchCriteria = makeSearchCriteria(opts);
-    const queryParameters = fromObject(searchCriteria);
-    return `/search?${queryParameters}`;
-  };
-
-  const clusterPageHref = () => {
-    const hintableObject = {
-      ...makeSearchCriteria({positive: true, negative: true, untriaged: true}),
-      left_filter: '',
-      grouping: row.name,
-    };
-    return `/cluster?${fromObject(hintableObject)}`;
-  }
-
-  return html`
-<tr>
-  <td>
-    <a href="${searchPageHref({positive: true, negative: true, untriaged: true})}"
-       target=_blank rel=noopener>
-      ${row.name}
-    </a>
-  </td>
-  <td class=center>
-    <a href="${searchPageHref({positive: true, negative: false, untriaged: false})}"
-       target=_blank rel=noopener>
-     ${row.positive_digests}
-    </a>
-  </td>
-  <td class=center>
-    <a href="${searchPageHref({positive: false, negative: true, untriaged: false})}"
-       target=_blank rel=noopener>
-     ${row.negative_digests}
-    </a>
-  </td>
-  <td class=center>
-    <a href="${searchPageHref({positive: false, negative: false, untriaged: true})}"
-       target=_blank rel=noopener>
-     ${row.untriaged_digests}
-    </a>
-  </td>
-  <td class=center>
-    <a href="${searchPageHref({positive: true, negative: true, untriaged: true})}"
-       target=_blank rel=noopener>
-      ${row.total_digests}
-    </a>
-  </td>
-  <td class=center>
-    <a href="${clusterPageHref()}" target=_blank rel=noopener>
-      <group-work-icon-sk></group-work-icon-sk>
-    </a>
-  </td>
-</tr>`;
-};
-
-const searchQuery = (corpus, query) => {
-  if (!query) {
-    return `source_type=${corpus}`;
-  }
-  return `source_type=${corpus}, \n${query.split('&').join(',\n')}`;
-};
-
-define('list-page-sk', class extends ElementSk {
-  constructor() {
-    super(template);
-
-    this._corpora = [];
-    this._paramset = {};
-
-    this._currentQuery = '';
-    this._currentCorpus = '';
-
-    this._showAllDigests = false;
-    this._disregardIgnoreRules = false;
-
-    this._stateChanged = stateReflector(
-      /* getState */() => ({
-        // provide empty values
-        all_digests: this._showAllDigests,
-        disregard_ignores: this._disregardIgnoreRules,
-        corpus: this._currentCorpus,
-        query: this._currentQuery,
-      }), /* setState */(newState) => {
-        if (!this._connected) {
-          return;
-        }
-        // default values if not specified.
-        this._showAllDigests = newState.all_digests || false;
-        this._disregardIgnoreRules = newState.disregard_ignores || false;
-        this._currentCorpus = newState.corpus || defaultCorpus();
-        this._currentQuery = newState.query || '';
-        this._fetch();
-        this._render();
-      },
-    );
-
-    this._byTestCounts = [];
-
-    // Allows us to abort fetches if we fetch again.
-    this._fetchController = null;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._render();
-  }
-
-  _currentCorpusChanged(e) {
-    e.stopPropagation();
-    this._currentCorpus = e.detail;
-    this._stateChanged();
-    this._render();
-    this._fetch();
-  }
-
-  _currentQueryChanged(e) {
-    e.stopPropagation();
-    this._currentQuery = e.detail;
-    this._stateChanged();
-    this._render();
-    this._fetch();
-  }
-
-  _fetch() {
-    if (this._fetchController) {
-      // Kill any outstanding requests
-      this._fetchController.abort();
-    }
-
-    // Make a fresh abort controller for each set of fetches.
-    // They cannot be re-used once aborted.
-    this._fetchController = new AbortController();
-    const extra = {
-      signal: this._fetchController.signal,
-    };
-
-    sendBeginTask(this);
-    sendBeginTask(this);
-
-    let url = `/json/v1/list?corpus=${encodeURIComponent(this._currentCorpus)}`;
-    if (!this._showAllDigests) {
-      url += '&at_head_only=true';
-    }
-    if (this._disregardIgnoreRules) {
-      url += '&include_ignored_traces=true';
-    }
-    if (this._currentQuery) {
-      url += `&trace_values=${encodeURIComponent(this._currentQuery)}`;
-    }
-    fetch(url, extra)
-      .then(jsonOrThrow)
-      .then((jsonList) => {
-        this._byTestCounts = jsonList;
-        this._byTestCounts.forEach((row) => {
-          row.total_digests = row.positive_digests + row.negative_digests + row.untriaged_digests;
-        });
-        this._render();
-        // By default, sort the data by name in ascending order (to match the direction set above).
-        $$('#sort_table', this).sort('name', 'up');
-        sendEndTask(this);
-      })
-      .catch((e) => sendFetchError(this, e, 'list'));
-
-    // TODO(kjlubick) when the search page gets a makeover to have just the params for the given
-    //   corpus show up, we should do the same here. First idea is to have a separate corpora
-    //   endpoint and then make paramset take a corpus.
-    fetch('/json/v1/paramset', extra)
-      .then(jsonOrThrow)
-      .then((paramset) => {
-        // We split the paramset into a list of corpora...
-        this._corpora = paramset.source_type || [];
-        // ...and the rest of the keys. This is to make it so the layout is
-        // consistent with other pages (e.g. the search page, the by blame page, etc).
-        delete paramset.source_type;
-        this._paramset = paramset;
-        this._render();
-        sendEndTask(this);
-      })
-      .catch((e) => sendFetchError(this, e, 'paramset'));
-  }
-
-  _showQueryDialog() {
-    $$('query-dialog-sk').open(this._paramset, this._currentQuery);
-  }
-
-  _toggleAllDigests(e) {
-    e.preventDefault();
-    this._showAllDigests = !this._showAllDigests;
-    this._stateChanged();
-    this._render();
-    this._fetch();
-  }
-
-  _toggleIgnoreRules(e) {
-    e.preventDefault();
-    this._disregardIgnoreRules = !this._disregardIgnoreRules;
-    this._stateChanged();
-    this._render();
-    this._fetch();
-  }
-});
diff --git a/golden/modules/list-page-sk/list-page-sk.ts b/golden/modules/list-page-sk/list-page-sk.ts
new file mode 100644
index 0000000..4c1a84f
--- /dev/null
+++ b/golden/modules/list-page-sk/list-page-sk.ts
@@ -0,0 +1,302 @@
+/**
+ * @module module/list-page-sk
+ * @description <h2><code>list-page-sk</code></h2>
+ *
+ * This page summarizes the outputs of various tests. It shows the amount of digests produced,
+ * as well as a few options to configure what range of traces to enumerate.
+ *
+ * It is a top level element.
+ */
+import { define } from 'elements-sk/define';
+import { html } from 'lit-html';
+import { $$ } from 'common-sk/modules/dom';
+import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';
+import { stateReflector } from 'common-sk/modules/stateReflector';
+import { ElementSk } from '../../../infra-sk/modules/ElementSk';
+import { sendBeginTask, sendEndTask, sendFetchError } from '../common';
+import { defaultCorpus } from '../settings';
+
+import '../corpus-selector-sk';
+import '../query-dialog-sk';
+import '../sort-toggle-sk';
+import 'elements-sk/checkbox-sk';
+import 'elements-sk/icon/group-work-icon-sk';
+import 'elements-sk/icon/tune-icon-sk';
+import { SearchCriteriaToHintableObject } from '../search-controls-sk';
+import { fromObject } from 'common-sk/modules/query';
+import { QueryDialogSk } from '../query-dialog-sk/query-dialog-sk';
+import { SortToggleSk } from '../sort-toggle-sk/sort-toggle-sk';
+import { SearchCriteriaHintableObject } from '../search-controls-sk/search-controls-sk';
+import { HintableObject } from 'common-sk/modules/hintable';
+import { ListTestsResponse, ParamSet, TestSummary } from '../rpc_types';
+
+const searchQuery = (corpus: string, query: string): string => {
+  if (!query) {
+    return `source_type=${corpus}`;
+  }
+  return `source_type=${corpus}, \n${query.split('&').join(',\n')}`;
+};
+
+export class ListPageSk extends ElementSk {
+  private static template = (ele: ListPageSk) => html`
+    <div>
+      <corpus-selector-sk .corpora=${ele.corpora}
+          .selectedCorpus=${ele.currentCorpus} @corpus-selected=${ele.currentCorpusChanged}>
+      </corpus-selector-sk>
+
+      <div class=query_params>
+        <button class=show_query_dialog @click=${ele.showQueryDialog}>
+          <tune-icon-sk></tune-icon-sk>
+        </button>
+        <pre>${searchQuery(ele.currentCorpus, ele.currentQuery)}</pre>
+        <checkbox-sk label="Digests at Head Only" class=head_only
+                 ?checked=${!ele.showAllDigests} @click=${ele.toggleAllDigests}></checkbox-sk>
+        <checkbox-sk label="Disregard Ignore Rules" class=ignore_rules
+                 ?checked=${ele.disregardIgnoreRules} @click=${ele.toggleIgnoreRules}></checkbox-sk>
+      </div>
+    </div>
+
+    <!-- lit-html (or maybe html in general) doesn't like sort-toggle-sk to go inside the table.-->
+    <sort-toggle-sk id=sort_table .data=${ele.byTestCounts} @sort-changed=${ele._render}>
+      <table>
+         <thead>
+             <tr>
+              <th data-key=name data-sort-toggle-sk=up>Test name</th>
+              <th data-key=positive_digests>Positive</th>
+              <th data-key=negative_digests>Negative</th>
+              <th data-key=untriaged_digests>Untriaged</th>
+              <th data-key=total_digests>Total</th>
+              <th>Cluster View</th>
+            </tr>
+        </thead>
+        <tbody>
+          <!-- repeat was tested here; map is about twice as fast as using the repeat directive
+               (which moves the existing elements). This is because reusing the existing templates
+               is pretty fast because there isn't a lot to change.-->
+          ${ele.byTestCounts.map((row) => ListPageSk.testRow(row, ele))}
+        </tbody>
+      </table>
+    </sort-toggle-sk>
+
+    <query-dialog-sk @edit=${ele.currentQueryChanged}></query-dialog-sk>
+  `;
+
+  private static testRow = (row: TestSummary, ele: ListPageSk) => {
+    interface MakeSearchCriteriaOpts {
+      positive: boolean;
+      negative: boolean;
+      untriaged: boolean;
+    }
+
+    // Returns a HintableObject for building the GET parameters to the search page.
+    const makeSearchCriteria = (opts: MakeSearchCriteriaOpts): SearchCriteriaHintableObject =>
+        SearchCriteriaToHintableObject({
+          corpus: ele.currentCorpus,
+          leftHandTraceFilter: {'name': [row.name]},
+          includePositiveDigests: opts.positive,
+          includeNegativeDigests: opts.negative,
+          includeUntriagedDigests: opts.untriaged,
+          includeDigestsNotAtHead: ele.showAllDigests,
+          includeIgnoredDigests: ele.disregardIgnoreRules,
+        });
+
+    const searchPageHref = (opts: MakeSearchCriteriaOpts) => {
+      const searchCriteria = makeSearchCriteria(opts);
+      const queryParameters = fromObject(searchCriteria as HintableObject);
+      return `/search?${queryParameters}`;
+    };
+
+    const clusterPageHref = () => {
+      const hintableObject: HintableObject = {
+        ...makeSearchCriteria({
+          positive: true,
+          negative: true,
+          untriaged: true
+        }),
+        left_filter: '',
+        grouping: row.name,
+      };
+      return `/cluster?${fromObject(hintableObject)}`;
+    }
+
+    return html`
+      <tr>
+        <td>
+          <a href="${searchPageHref({positive: true, negative: true, untriaged: true})}"
+             target=_blank rel=noopener>
+            ${row.name}
+          </a>
+        </td>
+        <td class=center>
+          <a href="${searchPageHref({positive: true, negative: false, untriaged: false})}"
+             target=_blank rel=noopener>
+           ${row.positive_digests}
+          </a>
+        </td>
+        <td class=center>
+          <a href="${searchPageHref({positive: false, negative: true, untriaged: false})}"
+             target=_blank rel=noopener>
+           ${row.negative_digests}
+          </a>
+        </td>
+        <td class=center>
+          <a href="${searchPageHref({positive: false, negative: false, untriaged: true})}"
+             target=_blank rel=noopener>
+           ${row.untriaged_digests}
+          </a>
+        </td>
+        <td class=center>
+          <a href="${searchPageHref({positive: true, negative: true, untriaged: true})}"
+             target=_blank rel=noopener>
+            ${row.total_digests}
+          </a>
+        </td>
+        <td class=center>
+          <a href="${clusterPageHref()}" target=_blank rel=noopener>
+            <group-work-icon-sk></group-work-icon-sk>
+          </a>
+        </td>
+      </tr>
+    `;
+  };
+
+  private corpora: string[] = [];
+  private paramset: ParamSet = {};
+
+  private currentQuery = '';
+  private currentCorpus = '';
+
+  private showAllDigests = false;
+  private disregardIgnoreRules = false;
+
+  private byTestCounts: TestSummary[] = [];
+
+  private readonly stateChanged: () => void;
+
+  // Allows us to abort fetches if we fetch again.
+  private fetchController?: AbortController;
+
+  constructor() {
+    super(ListPageSk.template);
+
+    this.stateChanged = stateReflector(
+        /* getState */() => ({
+          // provide empty values
+          all_digests: this.showAllDigests,
+          disregard_ignores: this.disregardIgnoreRules,
+          corpus: this.currentCorpus,
+          query: this.currentQuery,
+        }), /* setState */(newState) => {
+          if (!this._connected) {
+            return;
+          }
+          // default values if not specified.
+          this.showAllDigests = newState.all_digests as boolean || false;
+          this.disregardIgnoreRules = newState.disregard_ignores as boolean || false;
+          this.currentCorpus = newState.corpus as string || defaultCorpus();
+          this.currentQuery = newState.query as string || '';
+          this.fetch();
+          this._render();
+        },
+    );
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._render();
+  }
+
+  private currentCorpusChanged(e: CustomEvent<string>) {
+    e.stopPropagation();
+    this.currentCorpus = e.detail;
+    this.stateChanged();
+    this._render();
+    this.fetch();
+  }
+
+  private currentQueryChanged(e: CustomEvent<string>) {
+    e.stopPropagation();
+    this.currentQuery = e.detail;
+    this.stateChanged();
+    this._render();
+    this.fetch();
+  }
+
+  private fetch() {
+    if (this.fetchController) {
+      // Kill any outstanding requests
+      this.fetchController.abort();
+    }
+
+    // Make a fresh abort controller for each set of fetches.
+    // They cannot be re-used once aborted.
+    this.fetchController = new AbortController();
+    const extra = {
+      signal: this.fetchController.signal,
+    };
+
+    sendBeginTask(this);
+    sendBeginTask(this);
+
+    let url = `/json/v1/list?corpus=${encodeURIComponent(this.currentCorpus)}`;
+    if (!this.showAllDigests) {
+      url += '&at_head_only=true';
+    }
+    if (this.disregardIgnoreRules) {
+      url += '&include_ignored_traces=true';
+    }
+    if (this.currentQuery) {
+      url += `&trace_values=${encodeURIComponent(this.currentQuery)}`;
+    }
+    fetch(url, extra)
+        .then(jsonOrThrow)
+        .then((response: ListTestsResponse) => {
+          this.byTestCounts = response.tests || [];
+          this._render();
+          // By default, sort the data by name in ascending order (to match the direction set
+          // above).
+          $$<SortToggleSk<TestSummary>>('#sort_table', this)!.sort('name', 'up');
+          sendEndTask(this);
+        })
+        .catch((e) => sendFetchError(this, e, 'list'));
+
+    // TODO(kjlubick) when the search page gets a makeover to have just the params for the given
+    //   corpus show up, we should do the same here. First idea is to have a separate corpora
+    //   endpoint and then make paramset take a corpus.
+    fetch('/json/v1/paramset', extra)
+        .then(jsonOrThrow)
+        .then((paramset: ParamSet) => {
+          // We split the paramset into a list of corpora...
+          this.corpora = paramset.source_type || [];
+          // ...and the rest of the keys. This is to make it so the layout is
+          // consistent with other pages (e.g. the search page, the by blame page, etc).
+          delete paramset.source_type;
+          this.paramset = paramset;
+          this._render();
+          sendEndTask(this);
+        })
+        .catch((e) => sendFetchError(this, e, 'paramset'));
+  }
+
+  private showQueryDialog() {
+    $$<QueryDialogSk>('query-dialog-sk')!.open(this.paramset, this.currentQuery);
+  }
+
+  private toggleAllDigests(e: Event) {
+    e.preventDefault();
+    this.showAllDigests = !this.showAllDigests;
+    this.stateChanged();
+    this._render();
+    this.fetch();
+  }
+
+  private toggleIgnoreRules(e: Event) {
+    e.preventDefault();
+    this.disregardIgnoreRules = !this.disregardIgnoreRules;
+    this.stateChanged();
+    this._render();
+    this.fetch();
+  }
+}
+
+define('list-page-sk', ListPageSk);
diff --git a/golden/modules/list-page-sk/list-page-sk_test.js b/golden/modules/list-page-sk/list-page-sk_test.ts
similarity index 65%
rename from golden/modules/list-page-sk/list-page-sk_test.js
rename to golden/modules/list-page-sk/list-page-sk_test.ts
index 1cd503b..207f9a8 100644
--- a/golden/modules/list-page-sk/list-page-sk_test.js
+++ b/golden/modules/list-page-sk/list-page-sk_test.ts
@@ -10,11 +10,19 @@
 } from '../../../infra-sk/modules/test_util';
 import { sampleByTestList } from './test_data';
 import { testOnlySetSettings } from '../settings';
+import { ListPageSk } from './list-page-sk';
+import { expect } from 'chai';
+import { CorpusSelectorSk } from '../corpus-selector-sk/corpus-selector-sk';
+import { QueryDialogSk } from '../query-dialog-sk/query-dialog-sk';
+import { QueryDialogSkPO} from '../query-dialog-sk/query-dialog-sk_po';
+import { CorpusSelectorSkPO } from '../corpus-selector-sk/corpus-selector-sk_po';
 
 describe('list-page-sk', () => {
-  const newInstance = setUpElementUnderTest('list-page-sk');
+  const newInstance = setUpElementUnderTest<ListPageSk>('list-page-sk');
 
-  let listPageSk;
+  let listPageSk: ListPageSk;
+  let queryDialogSkPO: QueryDialogSkPO;
+  let corpusSelectorSkPO: CorpusSelectorSkPO;
 
   beforeEach(async () => {
     // Clear out any query params we might have to not mess with our current state.
@@ -38,6 +46,12 @@
     const event = eventPromise('end-task');
     listPageSk = newInstance();
     await event;
+
+    queryDialogSkPO =
+        new QueryDialogSkPO(listPageSk.querySelector<QueryDialogSk>('query-dialog-sk')!);
+    corpusSelectorSkPO =
+        new CorpusSelectorSkPO(
+            listPageSk.querySelector<CorpusSelectorSk<string>>('corpus-selector-sk')!);
   });
 
   afterEach(() => {
@@ -54,17 +68,24 @@
       expect(rows).to.have.length(2);
     });
 
-    it('should have 3 corpora loaded in, with the default selected', () => {
-      const corpusSelector = $$('corpus-selector-sk', listPageSk);
-      expect(corpusSelector.corpora).to.have.length(3);
-      expect(corpusSelector.selectedCorpus).to.equal('gm');
+    it('should have 3 corpora loaded in, with the default selected', async () => {
+      expect(await corpusSelectorSkPO.getCorpora()).to.have.length(3);
+      expect(await corpusSelectorSkPO.getSelectedCorpus()).to.equal('gm');
     });
 
     it('does not have source_type (corpus) in the params', () => {
-      expect(listPageSk._paramset.source_type).to.be.undefined;
+      // Field "paramset" is private, thus the cast to any. Is this test really necessary?
+      expect((listPageSk as any).paramset.source_type).to.be.undefined;
     });
 
-    const expectedSearchPageHref = (opts) => {
+    const expectedSearchPageHref =
+        (opts: {
+          positive: boolean,
+          negative: boolean,
+          untriaged: boolean,
+          showAllDigests: boolean,
+          disregardIgnoreRules: boolean
+        }): string => {
       return '/search?' + [
         'corpus=gm',
         `include_ignored=${opts.disregardIgnoreRules}`,
@@ -81,7 +102,8 @@
       ].join('&');
     };
 
-    const expectedClusterPageHref = (opts) => {
+    const expectedClusterPageHref =
+        (opts: {showAllDigests: boolean, disregardIgnoreRules: boolean}): string => {
       return '/cluster?' + [
         'corpus=gm',
         'grouping=this_is_another_test',
@@ -100,8 +122,8 @@
     };
 
     it('should have links for searching and the cluster view', () => {
-      const secondRow = $$('table tbody tr:nth-child(2)', listPageSk);
-      const links = $('a', secondRow);
+      const secondRow = $$<HTMLTableRowElement>('table tbody tr:nth-child(2)', listPageSk)!;
+      const links = $<HTMLAnchorElement>('a', secondRow)!;
       expect(links).to.have.length(6);
 
       // First link should be to the search results for all digests.
@@ -154,11 +176,14 @@
         expectedClusterPageHref({showAllDigests: false, disregardIgnoreRules: false}));
     });
 
-    it('updates the links based on toggle positions', () => {
-      listPageSk._showAllDigests = true;
-      listPageSk._disregardIgnoreRules = true;
-      listPageSk._render();
-      const secondRow = $$('table tbody tr:nth-child(2)', listPageSk);
+    it('updates the links based on toggle positions', async () => {
+      fetchMock.get('/json/v1/list?corpus=gm', sampleByTestList);
+      fetchMock.get('/json/v1/list?corpus=gm&include_ignored_traces=true', sampleByTestList);
+
+      await clickDigestsAtHeadOnlyCheckbox(listPageSk)
+      await clickDisregardIgnoreRulesCheckbox(listPageSk)
+
+      const secondRow = $$<HTMLTableRowElement>('table tbody tr:nth-child(2)', listPageSk)!;
       const links = $('a', secondRow);
       expect(links).to.have.length(6);
 
@@ -213,79 +238,84 @@
     });
 
     it('updates the sort order by clicking on sort-toggle-sk', async () => {
-      let firstRow = $$('table tbody tr:nth-child(1)', listPageSk);
-      expect($$('td', firstRow).innerText).to.equal('this_is_a_test');
+      let firstRow = $$<HTMLTableRowElement>('table tbody tr:nth-child(1)', listPageSk)!;
+      expect($$<HTMLTableDataCellElement>('td', firstRow)!.innerText).to.equal('this_is_a_test');
 
       // After first click, it will be sorting in descending order by number of negatives.
       clickOnNegativeHeader(listPageSk);
 
-      firstRow = $$('table tbody tr:nth-child(1)', listPageSk);
-      expect($$('td', firstRow).innerText).to.equal('this_is_another_test');
+      firstRow = $$<HTMLTableRowElement>('table tbody tr:nth-child(1)', listPageSk)!;
+      expect($$<HTMLTableDataCellElement>('td', firstRow)!.innerText)
+          .to.equal('this_is_another_test');
 
       // After second click, it will be sorting in ascending order by number of negatives.
       clickOnNegativeHeader(listPageSk);
 
-      firstRow = $$('table tbody tr:nth-child(1)', listPageSk);
-      expect($$('td', firstRow).innerText).to.equal('this_is_a_test');
+      firstRow = $$<HTMLTableRowElement>('table tbody tr:nth-child(1)', listPageSk)!;
+      expect($$<HTMLTableDataCellElement>('td', firstRow)!.innerText).to.equal('this_is_a_test');
     });
   }); // end describe('html layout')
 
   describe('RPC calls', () => {
     it('has a checkbox to toggle use of ignore rules', async () => {
-      fetchMock.get('/json/v1/list?corpus=gm&at_head_only=true&include_ignored_traces=true', sampleByTestList);
+      fetchMock.get(
+          '/json/v1/list?corpus=gm&at_head_only=true&include_ignored_traces=true',
+          sampleByTestList);
 
-      const checkbox = $$('checkbox-sk.ignore_rules input', listPageSk);
-      const event = eventPromise('end-task');
-      checkbox.click();
-      await event;
+      await clickDisregardIgnoreRulesCheckbox(listPageSk);
       expectQueryStringToEqual('?corpus=gm&disregard_ignores=true');
     });
 
     it('has a checkbox to toggle measuring at head', async () => {
       fetchMock.get('/json/v1/list?corpus=gm', sampleByTestList);
 
-      const checkbox = $$('checkbox-sk.head_only input', listPageSk);
-      const event = eventPromise('end-task');
-      checkbox.click();
-      await event;
+      await clickDigestsAtHeadOnlyCheckbox(listPageSk);
       expectQueryStringToEqual('?all_digests=true&corpus=gm');
     });
 
     it('changes the corpus based on an event from corpus-selector-sk', async () => {
-      fetchMock.get('/json/v1/list?corpus=corpus%20with%20spaces&at_head_only=true', sampleByTestList);
+      fetchMock.get(
+          '/json/v1/list?corpus=corpus%20with%20spaces&at_head_only=true', sampleByTestList);
 
-      const corpusSelector = $$('corpus-selector-sk', listPageSk);
       const event = eventPromise('end-task');
-      corpusSelector.dispatchEvent(
-        new CustomEvent('corpus-selected', {
-          detail: 'corpus with spaces',
-          bubbles: true,
-        }),
-      );
+      await corpusSelectorSkPO.clickCorpus('corpus with spaces');
       await event;
+
       expectQueryStringToEqual('?corpus=corpus%20with%20spaces');
     });
 
     it('changes the search params based on an event from query-dialog-sk', async () => {
       fetchMock.get(
-        '/json/v1/list?corpus=gm&at_head_only=true&trace_values=alpha_type%3DOpaque%26arch%3Darm64',
+        '/json/v1/list?' +
+          'corpus=gm&at_head_only=true&trace_values=alpha_type%3DOpaque%26arch%3Darm64',
         sampleByTestList,
       );
 
-      const queryDialog = $$('query-dialog-sk', listPageSk);
       const event = eventPromise('end-task');
-      queryDialog.dispatchEvent(
-        new CustomEvent('edit', {
-          detail: 'alpha_type=Opaque&arch=arm64',
-          bubbles: true,
-        }),
-      );
+      $$<HTMLButtonElement>('.show_query_dialog', listPageSk)!.click();
+      await queryDialogSkPO.setSelection({'alpha_type': ['Opaque'], 'arch': ['arm64']});
+      await queryDialogSkPO.clickShowMatchesBtn();
       await event;
+
       expectQueryStringToEqual('?corpus=gm&query=alpha_type%3DOpaque%26arch%3Darm64');
     });
   });
 });
 
-function clickOnNegativeHeader(ele) {
-  $$('table > thead > tr > th:nth-child(3)', ele).click();
+function clickOnNegativeHeader(ele: ListPageSk) {
+  $$<HTMLTableHeaderCellElement>('table > thead > tr > th:nth-child(3)', ele)!.click();
+}
+
+async function clickDigestsAtHeadOnlyCheckbox(listPageSk: ListPageSk) {
+  const checkbox = $$<HTMLInputElement>('checkbox-sk.head_only input', listPageSk)!;
+  const event = eventPromise('end-task');
+  checkbox.click();
+  await event;
+}
+
+async function clickDisregardIgnoreRulesCheckbox(listPageSk: ListPageSk) {
+  const checkbox = $$<HTMLInputElement>('checkbox-sk.ignore_rules input', listPageSk)!;
+  const event = eventPromise('end-task');
+  checkbox.click();
+  await event;
 }
diff --git a/golden/modules/list-page-sk/test_data.js b/golden/modules/list-page-sk/test_data.js
deleted file mode 100644
index 1f02426..0000000
--- a/golden/modules/list-page-sk/test_data.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const sampleByTestList = [{
-  name: 'this_is_a_test',
-  positive_digests: 19,
-  negative_digests: 24,
-  untriaged_digests: 103,
-}, {
-  name: 'this_is_another_test',
-  positive_digests: 79,
-  negative_digests: 48,
-  untriaged_digests: 3,
-}];
diff --git a/golden/modules/list-page-sk/test_data.ts b/golden/modules/list-page-sk/test_data.ts
new file mode 100644
index 0000000..f2c02e4
--- /dev/null
+++ b/golden/modules/list-page-sk/test_data.ts
@@ -0,0 +1,17 @@
+import {ListTestsResponse} from '../rpc_types';
+
+export const sampleByTestList: ListTestsResponse = {
+  tests: [{
+      name: 'this_is_a_test',
+      positive_digests: 19,
+      negative_digests: 24,
+      untriaged_digests: 103,
+      total_digests: 146,
+    }, {
+    name: 'this_is_another_test',
+    positive_digests: 79,
+    negative_digests: 48,
+    untriaged_digests: 3,
+    total_digests: 130,
+  }],
+};
diff --git a/golden/modules/rpc_types.ts b/golden/modules/rpc_types.ts
index 2ed23e0..7283b13 100644
--- a/golden/modules/rpc_types.ts
+++ b/golden/modules/rpc_types.ts
@@ -199,6 +199,18 @@
 	rules: IgnoreRule[] | null;
 }
 
+export interface TestSummary {
+	name: TestName;
+	positive_digests: number;
+	negative_digests: number;
+	untriaged_digests: number;
+	total_digests: number;
+}
+
+export interface ListTestsResponse {
+	tests: TestSummary[] | null;
+}
+
 export type ParamSet = { [key: string]: string[] };
 
 export type ParamSetResponse = { [key: string]: string[] | null };