CODY-20: Show all new runs in a clickable list

packages/factory/src/client/App.css

@@ -44,3 +44,12 @@ body {
   justify-content: center;
   padding: 16px;
 }
+
+.fetch-error {
+  color: #ff5555;
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  padding: 6px 8px;
+  border: 1px solid #aa0000;
+  background-color: #1a0000;
+}

packages/factory/src/client/App.tsx

@@ -1,26 +1,84 @@
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
+import type { ProjectIndex } from '../shared/types/api.js';
+import { fetchProjects } from './api/client.js';
 import { GameCanvas } from './components/GameCanvas.js';
+import { RunList } from './components/RunList.js';
 import { RunSelector } from './components/RunSelector.js';
 import { StatusBar } from './components/StatusBar.js';
+import { flattenProjectIndex } from './helpers/flatten-project-index.js';
+import { toRunKey } from './helpers/run-key.js';
+import { useDismissedRuns } from './hooks/useDismissedRuns.js';
 import { useRunStatus } from './hooks/useRunStatus.js';
 
 import './App.css';
 
 export function App(): React.JSX.Element {
+  const [index, setIndex] = useState<ProjectIndex | null>(null);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+
+  /**
+   * Currently selected project slug. Used together with `selectedRun` to look up the full run
+   * context. The `selectedRunKey` derivation assumes that `runId` values are unique within a
+   * project (across all its tickets). This invariant is guaranteed by the directory-based data
+   * source: each run directory name is a unique timestamp-based identifier scoped to its project.
+   */
   const [selectedProject, setSelectedProject] = useState<string | null>(null);
+
+  /** Currently selected run ID within `selectedProject`. See `selectedProject` for uniqueness assumption. */
   const [selectedRun, setSelectedRun] = useState<string | null>(null);
   const { data: runStatus, isLoading, error } = useRunStatus(selectedProject, selectedRun);
 
+  const { dismissed, dismiss, dismissAll } = useDismissedRuns();
+
+  useEffect(() => {
+    fetchProjects()
+      .then(setIndex)
+      .catch((error_: unknown) => {
+        console.error('Failed to fetch projects:', error_);
+        setFetchError(error_ instanceof Error ? error_.message : 'Failed to load projects');
+      });
+  }, []);
+
+  const allRuns = useMemo(() => flattenProjectIndex(index), [index]);
+
+  const visibleRuns = useMemo(
+    () => allRuns.filter((run) => !dismissed.has(toRunKey(run.projectSlug, run.ticketId, run.runId))),
+    [allRuns, dismissed],
+  );
+
+  const selectedRunKey = useMemo(() => {
+    if (!selectedProject || !selectedRun) return null;
+    const match = allRuns.find((r) => r.projectSlug === selectedProject && r.runId === selectedRun);
+    return match ? toRunKey(match.projectSlug, match.ticketId, match.runId) : null;
+  }, [selectedProject, selectedRun, allRuns]);
+
+  /**
+   * Selects a run by project slug and run ID. The ticket is not tracked because `runId` is
+   * assumed to be unique within a project -- the `selectedRunKey` derivation resolves the
+   * ticket by finding the matching run in the already-flattened `allRuns` array.
+   */
+  function handleSelectRun(projectSlug: string, runId: string): void {
+    setSelectedProject(projectSlug);
+    setSelectedRun(runId);
+  }
+
+  function handleDismissAll(): void {
+    dismissAll(visibleRuns.map((r) => toRunKey(r.projectSlug, r.ticketId, r.runId)));
+  }
+
   return (
     <div className="app">
       <aside className="sidebar">
         <h1>Artifactory</h1>
-        <RunSelector
-          onSelectRun={(projectSlug, runId) => {
-            setSelectedProject(projectSlug);
-            setSelectedRun(runId);
-          }}
+        {fetchError && <div className="fetch-error">{fetchError}</div>}
+        <RunSelector index={index} onSelectRun={handleSelectRun} />
+        <RunList
+          runs={visibleRuns}
+          selectedRunKey={selectedRunKey}
+          onSelectRun={handleSelectRun}
+          onDismissRun={dismiss}
+          onDismissAll={handleDismissAll}
         />
       </aside>
       <main className="main">