04. Frontend Deep Dive

What it is

visualize/ — “Grug Reasoning” SPA for exploring experiment artifacts. No training or inference in the browser.

Item	Value
Stack	React 19, Vite, TypeScript, Tailwind 4, shadcn, Chart.js
Package manager	pnpm
Deploy	GitHub Actions → GitHub Pages on visualize/** changes

Capabilities

• Tabs: Overview, Trace Explorer, Analytics, Evaluation, Style Guide (App.tsx)
• Load local folder (webkitdirectory) or HF iterations (iteration-1, iteration-2-unregularized, iteration-2-regularized) or demo data (useWorkspace.ts)
• Client-side parse of JSONL/JSON only (loader utilities)

Ops

cd visualize && pnpm install && pnpm dev

CI workflow: .github/workflows/deploy-visualizer.yml (Node 22).

Interview Q&A

Q: Why a separate frontend?
A: Trace JSONL and metrics are hard to reason about in raw files; a static explorer makes iteration comparisons shareable without a backend.