> 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_17/session_01_visual_system_shell_status_pill.md).

# Session 01: Visual System, Cinematic Shell And Global Status Pill

**Session ID**: `phase17-session01-visual-system-shell-status-pill` **Status**: Not Started **Estimated Tasks**: \~14-18 **Estimated Duration**: 2-4 hours

***

## Objective

Extend the aios Hermes visual vocabulary with v2.3's cinematic system and add the global Hermes status pill to the app top bar. Source-code anchors are `V23/src/routes/agents.hermes.tsx:615-621`, the V23 `HermesPage` banner block, V23 demo/status support components, and `V23/src/components/hermes-status-pill.tsx`.

***

## Scope

### In Scope (MVP)

* Extend `AIOS/src/components/hermes/hermes-page-primitives.tsx` (`HERMES_ACCENT` `:15`) with v2.3's visual vocabulary: theme consts at V23 `src/routes/agents.hermes.tsx:615-621` (`CREAM` / `BG` / `BG_GRADIENT`), Fraunces/Courier kickers, amber halo, the bar glyph, 0px borders, banner crop (`HermesPage` banner block V23 `:980+`).
* Preserve/port the shell support state anchors from the V23 route: `HermesDemoBanner` `:1080`, `HermesDemoCTA` `:1163`, `HermesLoading` `:1198`.
* Preserve/upgrade the status-card anchors from the V23 route: `HermesStatusBar` `:1584`, `StatusChip` `:2077`, `VersionCard` `:1630`, `ModelCard` `:1836`, `MemoryCard` `:1751`, `ActivityCard` `:1978`.
* Add the cinematic banner (`AIOS/src/assets/hermes-art/00-banner-wide.png`, already copied) to the hero.
* Port `V23/src/components/hermes-status-pill.tsx` (91 lines) -> new `AIOS/src/components/hermes/hermes-status-pill.tsx`. Read-only; polls `/__hermes_status`; renders the global top-bar dot + "Hermes" indicator; hides when Hermes is not installed.
* Mount the status pill in `AIOS/src/routes/__root.tsx` `AppTopBar` (`:167`, header `:194`).

### Out of Scope

* Chat, Pantheon, Memory, Mission, Documents, Mnemosyne, Connections surfaces (later sessions/phases).
* Any write behavior; the status pill is read-only.

***

## Prerequisites

* [ ] Phase 16 complete; `/__hermes_status` available (already done) and the banner asset present under `AIOS/src/assets/hermes-art/`.
* [ ] IA decision from Phase 16 Session 01 (tabs shell) recorded.

***

## Deliverables

1. Extended `hermes-page-primitives.tsx` carrying the v2.3 theme tokens and cinematic styling, plus the banner, demo/CTA/loading states, and status-card treatment in the hero/page shell.
2. New `hermes-status-pill.tsx` mounted in `__root.tsx` `AppTopBar`, read-only, polling `/__hermes_status`, hidden when not installed.

***

## Success Criteria

* [ ] The Hermes hero/page shell shows the cinematic banner, demo/CTA/loading states, status cards, and v2.3 type/halo/glyph treatment without violating asset or bundle budgets.
* [ ] The status pill appears in the top bar, links to `/agents/hermes`, polls `/__hermes_status`, and renders nothing when Hermes is not installed.
* [ ] Reduced-motion and responsive layouts verified; typecheck, lint, and tests 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_17/session_01_visual_system_shell_status_pill.md?ask=<question>&goal=<endgoal>
```

`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.