> 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/sessions/phase17-session01-visual-system-shell-status-pill/tasks.md). # Task Checklist **Session ID**: `phase17-session01-visual-system-shell-status-pill` **Total Tasks**: 19 **Estimated Duration**: 3-4 hours **Created**: 2026-06-02 *** ## Legend * `[x]` = Completed * `[ ]` = Pending * `[P]` = Parallelizable (can run with other \[P] tasks) * `[SNNMM]` = Session reference (NN=phase number, MM=session number) * `TNNN` = Task ID *** ## Progress Summary | Category | Total | Done | Remaining | | -------------- | ------ | ------ | --------- | | Setup | 3 | 3 | 0 | | Foundation | 5 | 5 | 0 | | Implementation | 7 | 7 | 0 | | Testing | 4 | 4 | 0 | | **Total** | **19** | **19** | **0** | *** ## Setup (3 tasks) Initial configuration and environment preparation. * [x] T001 \[S1701] Verify Phase 16 prerequisites, banner asset presence, and V23 source anchors for the shell and status pill (`.spec_system/PRD/phase_17/session_01_visual_system_shell_status_pill.md`) * [x] T002 \[S1701] Record current AI OS Hermes shell, status-card, and top-bar status pill inventory before edits (`.spec_system/specs/phase17-session01-visual-system-shell-status-pill/implementation-notes.md`) * [x] T003 \[S1701] Confirm target file ownership and stale artifact status for the colocated status pill migration (`.spec_system/specs/phase17-session01-visual-system-shell-status-pill/implementation-notes.md`) *** ## Foundation (5 tasks) Core structures and base implementations. * [x] T004 \[S1701] Extend Hermes visual tokens, typography helper exports, and state-safe shell primitives (`src/components/hermes/hermes-page-primitives.tsx`) * [x] T005 \[S1701] \[P] Add scoped cinematic Hermes route CSS with theme variables, display/mono typography hooks, 0px border treatment, banner/card treatment, and reduced-motion guards (`src/styles.css`) * [x] T006 \[S1701] \[P] Create the colocated Hermes status pill with schema-validated status parsing, abortable polling, exhaustive status handling, and explicit offline/error render-null behavior (`src/components/hermes/hermes-status-pill.tsx`) * [x] T007 \[S1701] Replace the legacy top-level status pill implementation with a compatibility export from the colocated Hermes component (`src/components/hermes-status-pill.tsx`) * [x] T008 \[S1701] Define the upgraded status-card shell and chip treatment for Version, Model, Memory, and Activity summaries with bounded fallback values (`src/components/hermes/hermes-status-bar.tsx`) *** ## Implementation (7 tasks) Main feature implementation. * [x] T009 \[S1701] Rework the Hermes read-only page into the cinematic shell with the existing banner asset, responsive crop constraints, and no tab IA changes (`src/components/hermes/hermes-read-only-page.tsx`) * [x] T010 \[S1701] Add or adapt the demo banner, demo CTA, and loading support states with platform-appropriate accessibility labels, focus management, and input support (`src/components/hermes/hermes-read-only-page.tsx`) * [x] T011 \[S1701] Wire status, model, memory, and session data into the upgraded status-card row with explicit loading, empty, error, and offline states (`src/components/hermes/hermes-status-bar.tsx`) * [x] T012 \[S1701] Preserve setup-required and endpoint-error copy while applying v2.3 visual treatment without exposing private bridge paths beyond existing sanitized labels (`src/components/hermes/hermes-status-bar.tsx`) * [x] T013 \[S1701] Mount the colocated Hermes status pill in the app top bar with stable overflow, focus, and route-link behavior (`src/routes/__root.tsx`) * [x] T014 \[S1701] Adjust Hermes tabs, footer, spacing, and section wrappers to fit the cinematic shell without nested-card layout issues (`src/components/hermes/hermes-read-only-page.tsx`) * [x] T015 \[S1701] Constrain Hermes asset imports to the existing banner and WebP/logo assets and document any bundle or media-policy observations (`.spec_system/specs/phase17-session01-visual-system-shell-status-pill/implementation-notes.md`) *** ## Testing (4 tasks) Verification and quality assurance. * [x] T016 \[S1701] \[P] Extend Hermes section tests for cinematic shell rendering, demo/live support states, and upgraded status-card labels (`src/components/hermes/__tests__/hermes-sections.test.tsx`) * [x] T017 \[S1701] \[P] Write status pill tests for ready, setup-required, missing, offline, endpoint-error, and malformed payload behavior (`src/components/hermes/__tests__/hermes-status-pill.test.tsx`) * [x] T018 \[S1701] \[P] Update root route or top-bar tests if needed for the colocated status pill import and mount point (`src/routes/__tests__/root-component.test.tsx`) * [x] T019 \[S1701] Run focused Vitest coverage, `bun run typecheck`, and ASCII/LF validation, recording command results (`.spec_system/specs/phase17-session01-visual-system-shell-status-pill/implementation-notes.md`) *** ## Completion Checklist Before marking session complete: * [x] All tasks marked `[x]` * [x] All tests passing * [x] All files ASCII-encoded * [x] implementation-notes.md updated * [x] Ready for the validate workflow step *** ## Next Steps Run the validate workflow step to verify session completeness. --- # 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/sessions/phase17-session01-visual-system-shell-status-pill/tasks.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.