> For the complete documentation index, see [llms.txt](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_25/session_08_claude_code_parity_responsive_e2e.md). # Session 08: Claude Code Parity Responsive E2E **Session ID**: `phase25-session08-claude-code-parity-responsive-e2e` **Status**: Not Started **Estimated Tasks**: \~12-25 **Estimated Duration**: 2-4 hours *** ## Objective Prove that the upgraded Mission Control surface works at feature parity for Hermes and Claude Code, and that copied prompts and drawers are responsive. *** ## Scope ### In Scope (MVP) * Sweep the Hermes and Claude Code presentations for copy, layout, and contract parity. * Verify authoring, preview/commit, per-goal copy, drawer, rail, and archive behavior in both routes. * Add Playwright or route/e2e coverage for copied prompt wrapping, mobile drawer behavior, and no horizontal overflow. * Validate the assembled target layout: header, empty-state actions, optimized preview, active mission, and archive list. ### Out of Scope * New Mission Control features. * New bridge capabilities. * Rebranding AI OS around Claude Code. *** ## Prerequisites * [ ] Sessions 03 through 07 completed. * [ ] Claude Code route from Phase 23 available. *** ## Deliverables 1. Parity adjustments for Hermes and Claude Code presentation copy. 2. Browser/e2e coverage for overflow-safe prompt and drawer behavior. 3. Route coverage for both local-agent presentations. *** ## Success Criteria * [ ] Hermes and Claude Code Mission Control routes are at feature parity. * [ ] Long copied prompts and briefings wrap without horizontal overflow. * [ ] Mobile drawer behavior is usable and tested. * [ ] Both routes preserve the same read/write contract boundaries. *** ## Folded Comparison Detail This section preserves the shared Phase 25 reference context and the complete S25-08 session detail from the folded Phase 25 comparison record. This stub is self-contained so the old ongoing-project document can be deleted without losing source anchors, implementation scope, build steps, or exit criteria. ### Source Project Reference Links #### AI OS * [Hermes route](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/routes/agents.hermes.tsx) * [Hermes page shell](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/components/hermes/hermes-read-only-page.tsx) * [Mission Control UI](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/components/hermes/hermes-mission-control.tsx) * [Claude Code mission page](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/components/hermes/claude-code-mission-page.tsx) * [Hermes read hook](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/hooks/use-hermes.ts) * [Hermes admin hook](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/hooks/use-hermes-admin.ts) * [Hermes read contracts](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/lib/hermes-types.ts) * [Hermes admin contracts](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/lib/hermes-admin-types.ts) * [Hermes read bridge](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/scripts/lib/hermes-dev-bridge.ts) * [Hermes admin bridge](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/scripts/lib/hermes-admin-bridge.ts) * [Hermes demo fixtures](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/lib/hermes-demo-data.ts) #### Claude OS v2.3 Reference * [Reference Hermes route](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/src/routes/agents.hermes.tsx) * [Reference Mission Control component](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/src/components/hermes-mission-control.tsx) * [Reference Vite middleware/endpoints](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/vite.config.ts) * [Reference Documents Gallery](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/src/components/hermes-documents-gallery.tsx) * [Reference Mnemosyne component](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/src/components/hermes-mnemosyne.tsx) * [Reference README](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/README.md) * [Reference CHANGELOG](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.3/CHANGELOG.md) ### Reference Source Map Every session below carries a **Reference (v2.3)** line pointing at the exact reference code to mirror. Citations are relative to the reference root `v2.3/` = `/home/aiwithapex/projects/claudeos/claude-os-v2.3/`. Line numbers are the 2026-06-08 inspection snapshot - treat them as anchors and re-confirm before editing. The two reference files that matter for this plan: * `v2.3/src/components/hermes-mission-control.tsx` - the entire Mission Control UI, planning prompt, per-card copy, briefing renderer, and goal rail. Key anchors: `Actor`/`Status`/`MiniGoal`/`Mission` types (265-286); endpoint contract comments (243-249); `LONG_PROMPT_BODY` (313-509); `buildLongPrompt` (511-523); `MissionControlAgent` (532); `refetch` GET (547-555); exact-decimal progress geometry (561-569); tick/clear fetches (610, 633); `EmptyPanel` + `copy()` + Copy-prompt button (783-944); `MissionBody` (945-1034); `estimateToPips` (1035-1073); `buildCopyText` incl. `/goal` safety net (1074-1128); `formatHumanBrief` + `HUMAN_BRIEF_LABELS` (1130-1196); `BriefingDrawer` (1209-1577); `MissionGoalRail` incl. progress bar + milestone ticks (1583-1987). * `v2.3/vite.config.ts` - the local mission endpoints: GET `/__hermes_missions` (778-799), `optimize` (799-943), `create` (944-1050), `tick` (1051-1099), `clear` (1100-1124); `MISSIONS_FILE` (751). Where a session has no reference, the capability has no v2.3 equivalent and is marked **Reference (v2.3): none - AI OS-new**; the AI OS contracts/bridges named in that session are the substrate to build on. ### Phase Outcome (binary) `/agents/hermes` (and the Claude Code mission route) fully restore the v2.3 Mission Control orchestration loop - planning prompt, discovery-driven decomposition, multi-goal authoring, optimized preview -> commit, per-goal `/goal` and human-briefing copy, and archive management - on top of the AI OS typed-contract, admin-gated, tested architecture, with documentation and end-to-end validation. YES/NO at the end of the last session. ### Cross-Cutting Guardrails (every session must hold these) These are the AI OS strengths the plan must preserve while adding v2.3 affordances. No session may regress them: 1. Admin-gate is never weakened. All writes keep requiring loopback + valid per-run `X-Claude-OS-Token` + `HERMES_DASHBOARD_ADMIN=1` + non-demo + hook-mediated path. 2. Typed contracts stay authoritative. New fields/endpoints get read/admin parsers that reject malformed payloads; no ad hoc JSON. 3. State machine stays explicit. idle / loading / success / empty / error / offline / token-failure / demo / admin-disabled / admin-ready all keep rendering and stay tested. 4. Errors stay bounded and redacted through the existing display helpers. 5. Reads use query invalidation, not polling or fetch bypasses. 6. Demo/live parity holds; demo mode never triggers a real write. 7. Both agent presentations (`hermes`, `claude-code`) stay at parity at the contract layer; differences remain presentation copy only. 8. Every new affordance ships with unit/component coverage in the same session; responsive/e2e coverage lands by S25-08. ### S25-08 - Claude Code Parity, Copied-Prompt E2E & Responsive Hardening **Resolves:** Finding #9, Priority 2.6, AI OS Strengths (no-overflow), Suggested Target UX (full assembly), `claude-code-mission-page.tsx` parity. **Reference (v2.3):** the parity model to mirror is `v2.3/src/components/hermes-mission-control.tsx:515-532` - `buildLongPrompt(agent)` and the `MissionControlAgent`/`agent`-prop mechanism that swaps only presentation copy ("Paste to Hermes" / "Paste to Claude Code" / neutral) while the mission body stays agent-agnostic. The overflow/wrapping behavior to match for copied prompts is the `BriefingDrawer` long-`/goal`-prompt scroll handling (`:1276-1320`) and the `mission-rail` scroll CSS (`:1981-1987`). Note: v2.3 ships **no tests**, so the e2e/responsive coverage itself is AI OS-new. **Objective.** Guarantee every new affordance works identically for the `claude-code` presentation and that copied prompts/briefings are responsive and overflow-safe. **Scope (in).** * Verify/extend `claude-code` presentation and `claude-code-mission-page.tsx` so authoring, preview/commit, per-goal copy, drawer, rail, and archive all render with correct agent copy and identical contracts. * Route/e2e coverage for copied prompts: no horizontal overflow, long-text wrapping, and mobile drawer behavior across both agents. * Assemble and verify the full Suggested Target UX layout (header -> empty/3 actions -> optimized preview -> active mission -> archive). **Scope (out).** New features; this session hardens existing ones. **Build steps.** 1. Sweep both agent presentations for parity and fix copy/contract drift. 2. Add Playwright/e2e specs for overflow, wrapping, and mobile drawer. 3. Validate the assembled layout end to end in both routes. **Exit criteria.** * `hermes` and `claude-code` routes are at feature parity. * `tests/e2e/hermes-agent.spec.ts` (and a Claude Code counterpart) assert no overflow, correct wrapping, and working mobile drawer, and pass. *** --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_25/session_08_claude_code_parity_responsive_e2e.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.