forked from molecule-ai/molecule-core
hongmingwang
43844e0af0
Implements the Claude Design handoff (Molecules AI Mobile.html) as a viewport-gated React tree under canvas/src/components/mobile/. < 640px renders the new shell instead of the desktop ReactFlow canvas. Six screens, all bound to live store data: - Home (agent list + filter chips + spawn FAB) - Canvas (mini-graph with pinch-to-zoom + pan + reset) - Detail (status pills, tabs: Overview / Activity / Config / Memory; Activity hits /workspaces/:id/activity) - Chat (textarea composer, IME-safe Enter, sendInFlightRef guard; bootstraps from agentMessages so the prior thread shows on entry) - Comms (live A2A feed via /workspaces/:id/activity + ACTIVITY_LOGGED) - Spawn (bottom sheet; fetches /templates so users pick what's actually installed on their platform) Plus a Me tab for mobile theme/accent/density. Design system (palette.ts + primitives.tsx) ports tokens 1:1 from the handoff: cream + dark palettes, T1-T4 tier chips, status dots with halo, JetBrains Mono for IDs/timestamps. Inter + JetBrains Mono are self-hosted via next/font/google so CSP `font-src 'self'` is honoured. URL routing: routes sync to ?m=<route>&a=<id>; popstate restores route; deep links seed initial state. /?m=detail without ?a collapses to home. Accent override flows through React context (MobileAccentProvider) — not by mutating the static MOL_LIGHT/MOL_DARK singletons. SSR flash: isMobile is tri-state; loading spinner stays up until matchMedia resolves so mobile devices never paint the desktop tree. Desktop responsiveness fixes (separate but ride along): - Toolbar: full-width with overflow-x-auto on mobile, logo text + count hidden < sm, divider/border collapse to sm: only. - SidePanel: full-screen on mobile via matchMedia, resize handle hidden. - Canvas: MiniMap hidden < sm (was overlapping the New Workspace FAB). Tests (51 total, 33 new): - palette.test.ts (12) - normalizeStatus, tierCode, light/dark parity - components.test.ts (10) - toMobileAgent field mapping + classifyForFilter - MobileApp.test.tsx (12) - route stack, deep links, popstate, tab bar hidden on chat, spawn overlay - SidePanel.tabs.test.tsx (18) - regression-clean Verified: tsc --noEmit clean across mobile/, page.tsx, layout.tsx. Not yet verified: live phone browser (needs CP backend hydrated). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| e2e | ||
| public | ||
| src | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| components.json | ||
| Dockerfile | ||
| next.config.ts | ||
| package-lock.json | ||
| package.json | ||
| playwright.config.ts | ||
| playwright.staging.config.ts | ||
| postcss.config.js | ||
| tsconfig.json | ||
| vitest.config.ts | ||