#259 Add progressive artifact reveal to catwalk demo replay

packages/factory/src/__test-helpers__/mock-visualization-components.tsx

@@ -6,14 +6,6 @@ interface VisualizationProps {
   status: CanonicalRunStatus;
 }
 
-export function MockGameCanvas({ status }: VisualizationProps): React.JSX.Element {
-  return <div data-testid="game-canvas" data-run-id={status.runId} />;
-}
-
-export function MockFlowDiagram({ status }: VisualizationProps): React.JSX.Element {
-  return <div data-testid="flow-diagram" data-run-id={status.runId} />;
-}
-
 export function MockCatwalkCanvas({ status }: VisualizationProps): React.JSX.Element {
   return <div data-testid="catwalk-canvas" data-run-id={status.runId} />;
 }

packages/factory/src/client/App.css

@@ -38,45 +38,6 @@ body {
   min-width: 0;
 }
 
-.canvas-container {
-  width: 100%;
-}
-
-.canvas-container[data-view='factory'],
-.canvas-container[data-view='catwalk'] {
-  aspect-ratio: 2 / 1;
-  min-width: 800px;
-}
-
-.canvas-container[data-view='flow'] {
-  flex: 1;
-  min-height: 600px;
-}
-
-.viz-toggle {
-  display: flex;
-  gap: 4px;
-  padding: 8px 16px 8px 8.33%;
-  border-bottom: 1px solid #333333;
-}
-
-.viz-toggle button {
-  background: transparent;
-  border: 1px solid #555555;
-  color: #aaaaaa;
-  font-family: 'Courier New', monospace;
-  font-size: 11px;
-  padding: 4px 12px;
-  cursor: pointer;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.viz-toggle button.active {
-  border-color: #ffffff;
-  color: #ffffff;
-}
-
 .fetch-error {
   color: #ff5555;
   font-family: 'Courier New', monospace;

packages/factory/src/client/App.tsx

@@ -2,12 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { ProjectIndex } from '../shared/types/api.js';
 import { fetchProjects } from './api/client.js';
+import { CatwalkCanvas } from './components/CatwalkCanvas.js';
 import { DemoControlPanel } from './components/DemoControlPanel.js';
 import { DemoStatusLight } from './components/DemoStatusLight.js';
 import { RunList } from './components/RunList.js';
 import { RunSelector } from './components/RunSelector.js';
 import { StatusBar } from './components/StatusBar.js';
-import { VisualizationSwitcher } from './components/VisualizationSwitcher.js';
 import { flattenProjectIndex } from './helpers/flatten-project-index.js';
 import { toRunKey } from './helpers/run-key.js';
 import { useDemoMode } from './hooks/useDemoMode.js';
@@ -68,14 +68,6 @@ export function App(): React.JSX.Element {
 
   const demo = useDemoMode();
   const [showDemoPanel, setShowDemoPanel] = useState(false);
-  const [normalized, setNormalized] = useState(true);
-
-  // Reset normalization to match the new controller's initial state when recording changes
-  useEffect(() => {
-    if (demo.activeRecording) {
-      setNormalized(true);
-    }
-  }, [demo.activeRecording]);
 
   // Determine the active data source: demo data takes precedence when available
   const activeStatus = demo.isActive && demo.data !== null ? demo.data : runStatus;
@@ -172,12 +164,6 @@ export function App(): React.JSX.Element {
     );
   }
 
-  function handleToggleNormalized(): void {
-    const next = !normalized;
-    setNormalized(next);
-    demo.controls.setNormalized(next);
-  }
-
   function handleStopDemo(): void {
     demo.stopDemo();
     setShowDemoPanel(false);
@@ -193,12 +179,10 @@ export function App(): React.JSX.Element {
           playbackState={demo.playbackState}
           speed={demo.speed}
           cursor={demo.cursor}
-          eventCount={demo.eventCount}
-          normalized={normalized}
+          snapshotCount={demo.snapshotCount}
           controls={demo.controls}
           onSelectRecording={demo.loadRecording}
           onStop={handleStopDemo}
-          onToggleNormalized={handleToggleNormalized}
         />
       )}
     </>
@@ -230,7 +214,7 @@ export function App(): React.JSX.Element {
         {activeStatus && <StatusBar status={activeStatus} demoSlot={demoSlot} />}
         {isLoading && <p>Loading...</p>}
         {error && <p>Error: {error.message}</p>}
-        {activeStatus && <VisualizationSwitcher status={activeStatus} />}
+        {activeStatus && <CatwalkCanvas status={activeStatus} />}
       </main>
     </div>
   );

packages/factory/src/client/__tests__/App.test.tsx

@@ -10,7 +10,6 @@ const {
   mockUseRunStatus,
   mockRunSelector,
   mockStatusBar,
-  mockGameCanvas,
   mockCatwalkCanvas,
   mockFetchProjects,
   mockFlattenProjectIndex,
@@ -22,7 +21,6 @@ const {
     mockUseRunStatus: vi.fn(),
     mockRunSelector: vi.fn(),
     mockStatusBar: vi.fn(),
-    mockGameCanvas: vi.fn(),
     mockCatwalkCanvas: vi.fn(),
     mockFetchProjects: vi.fn<() => Promise<ProjectIndex>>(),
     mockFlattenProjectIndex: vi.fn<(index: ProjectIndex | null) => FlatRunInfo[]>(),
@@ -44,10 +42,6 @@ vi.mock('../components/StatusBar.js', () => ({
   StatusBar: mockStatusBar,
 }));
 
-vi.mock('../components/GameCanvas.js', () => ({
-  GameCanvas: mockGameCanvas,
-}));
-
 vi.mock('../components/CatwalkCanvas.js', () => ({
   CatwalkCanvas: mockCatwalkCanvas,
 }));
@@ -127,9 +121,6 @@ describe('App', () => {
     mockStatusBar.mockImplementation(({ status }: { status: CanonicalRunStatus }) => (
       <div data-testid="status-bar">{status.runId}</div>
     ));
-    mockGameCanvas.mockImplementation(({ status }: { status: CanonicalRunStatus }) => (
-      <div data-testid="game-canvas">{status.runId}</div>
-    ));
     mockCatwalkCanvas.mockImplementation(({ status }: { status: CanonicalRunStatus }) => (
       <div data-testid="catwalk-canvas">{status.runId}</div>
     ));
@@ -144,7 +135,7 @@ describe('App', () => {
 
     expect(view.getByText('Loading...')).toBeInTheDocument();
     expect(view.queryByTestId('status-bar')).not.toBeInTheDocument();
-    expect(view.queryByTestId('game-canvas')).not.toBeInTheDocument();
+    expect(view.queryByTestId('catwalk-canvas')).not.toBeInTheDocument();
   });
 
   it('displays error state when useRunStatus returns error', () => {

packages/factory/src/client/components/CatwalkCanvas.tsx

@@ -6,7 +6,7 @@ import { useContainerResize } from '../hooks/useContainerResize.js';
 import { ENGINE_HEIGHT, ENGINE_WIDTH } from '../visualizations/catwalk/constants/dimensions.js';
 import { CatwalkScene } from '../visualizations/catwalk/scene/CatwalkScene.js';
 
-import './GameCanvas.css';
+import './canvas.css';
 
 interface CatwalkCanvasProps {
   status: CanonicalRunStatus;

packages/factory/src/client/components/DemoControlPanel.css

@@ -55,13 +55,3 @@
 .demo-position {
   color: #888888;
 }
-
-.demo-normalize-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.demo-normalize-row label {
-  cursor: pointer;
-}

packages/factory/src/client/components/DemoControlPanel.tsx

@@ -11,12 +11,10 @@ interface DemoControlPanelProps {
   playbackState: PlaybackState;
   speed: number;
   cursor: number;
-  eventCount: number;
-  normalized: boolean;
+  snapshotCount: number;
   controls: PlaybackControls;
   onSelectRecording: (recording: DemoRecording) => void;
   onStop: () => void;
-  onToggleNormalized: () => void;
 }
 
 export function DemoControlPanel({
@@ -25,12 +23,10 @@ export function DemoControlPanel({
   playbackState,
   speed,
   cursor,
-  eventCount,
-  normalized,
+  snapshotCount,
   controls,
   onSelectRecording,
   onStop,
-  onToggleNormalized,
 }: DemoControlPanelProps): React.JSX.Element {
   function handleRecordingChange(e: React.ChangeEvent<HTMLSelectElement>): void {
     const selected = recordings.find((r) => r.name === e.target.value);
@@ -74,7 +70,7 @@ export function DemoControlPanel({
       </div>
 
       <span className="demo-position">
-        {displayPosition} / {eventCount}
+        {displayPosition} / {snapshotCount}
       </span>
 
       <div className="demo-speed-row">
@@ -89,12 +85,6 @@ export function DemoControlPanel({
           1x
         </button>
       </div>
-
-      <div className="demo-normalize-row">
-        <label>
-          <input type="checkbox" checked={normalized} onChange={onToggleNormalized} /> Normalize gaps
-        </label>
-      </div>
     </div>
   );
 }