Crawler-Factory

Sessions/Session-3-ReactUIRefactor.md

Session 3 — React UI Refactor + Wizard

Date: 2026-05-03 Duration: ~3 hours Model: Sonnet 4.6

What was accomplished

Shipped

Full Algolia design language applied to the React UI — CSS token system (src/index.css) with 60+ design tokens matching Algolia's dashboard visual language
CrawlerListView — tabbed list (Crawlers/Domains/External Data/Settings), search + filter toolbar, run-state pills, source badges, row action menu with state transitions
WorkspaceShell — workspace chrome (top bar with crawler name breadcrumb + RunControlCluster), left nav (SETUP/STATUS/CONFIGURATION sections), full set of placeholder pages
FactoryWizard — 4-step full-screen wizard (Discover → Review → Configure → Done) with animated discovery progress, category review, configurator with 3-tab panel, done screen
GitHub repo created: github.com/arijitchowdhury80/Crawler_Factory (private, main branch, 3 commits)

Decisions locked

D16: Factory is a container — sub-crawlers NOT in main list, only inside factory workspace → 2026-05-03-FactoryEntityModel
D17: Wizard lives as "Setup" page inside WorkspaceShell, not a full-screen overlay → 2026-05-03-WizardInWorkspace
D18: Factory creation flow: Add → factory entity → workspace opens → Setup page runs wizard → 2026-05-03-WizardInWorkspace

These decisions were prompted by reviewing 5 real Algolia crawler dashboard screenshots, revealing: 1. Algolia's "Add new crawler" is a 1-step modal, not a wizard 2. Per-crawler workspace has its own left nav (SETUP/STATUS/CONFIGURATION sections) 3. The outer product chrome (Data sources) stays persistent; only the inner workspace changes

Issues identified (deferred to S4)

UI-001: CrawlerListView shows individual factory sub-crawlers — should show one factory container row
UI-002: FactoryWizard uses position:fixed;inset:0 — violates two-chrome rule, should be inline workspace page

Files changed

src/AdminFactory.tsx — top-level shell with list/workspace/wizard modes
src/components/admin/factory/CrawlerListView.tsx — full list component
src/components/admin/factory/WorkspaceShell.tsx — workspace shell + RunControlCluster
src/components/admin/factory/FactoryWizard.tsx — 4-step wizard
src/index.css — Algolia design token system (60+ tokens)
src/components/admin/factory/list-types.ts — RunState + MockCrawler types