# Mahana Mastermind — Component Inventory

A complete list of every component in [`itonsberg/mahana-mastermind-chat`](https://github.com/itonsberg/mahana-mastermind-chat) at commit time of this document, plus planned components that exist in skills but not yet in code.

**How to use this file**
- Status column: `shipped` = code exists and renders today; `broken` = known issue; `planned` = concept described in `skills/`, not yet built.
- Level column: atomic hierarchy — **atom** (zero/few deps), **molecule** (composes atoms), **organism** (composes molecules, owns behavior), **shell** (top-level orchestrator).
- Each row below is a candidate for a `preview/components/<name>.html` playground + `specs/<name>.md` spec. When both exist, add ✅ to the Playground / Spec columns.
- Outstanding work from `mastermind-v2/HANDOFF.md` buckets is tagged `[B1]`, `[B2]`, `[B3]`, `[B4]`, `[B5]`.

---

## Legend

| Mark | Meaning |
|---|---|
| 🟢 shipped | Component exists, renders in the prototype |
| 🟡 planned | Described in `skills/` or HANDOFF, not yet built |
| 🔴 broken | Works partially or has a known issue from HANDOFF |
| ⭐ | Foundational — priority candidate for first-wave playgrounds |

---

## 1. Atoms (primitives)

The small tokens-of-UI. Zero or near-zero internal dependencies. Reused everywhere.

| Component | File · line | Purpose | Status | Playground | Spec |
|---|---|---|---|---|---|
| ⭐ `ModelChip` | `models.jsx:97` | 28–44px vendor-branded avatar with logo mask. Used in composer, chat, inspector, everywhere. | 🟢 | — | — |
| `ModelMark` | `models.jsx:36` | The raw vendor logo as CSS mask — the mechanism `ModelChip` uses. | 🟢 | — | — |
| `ModelGlyph` | `models.jsx:60` | Model icon on a plain circle (simpler than `ModelChip`). | 🟢 | — | — |
| ⭐ `MorphingAvatar` | `models.jsx:121` | The animated orb that morphs between minds (used by LandingOrb). | 🟢 | — | — |
| ⭐ `AppIcon` / `SquircleIcon` | `app-icons.jsx:30` | 44px Mahana-app tile (Mail, Tasks, Ideas, Vault…). | 🟢 | — | — |
| `WarmingAvatar` | `draft-composer.jsx:44` | Mini 16–22px brain pip with `idle/warming/ready` states. | 🟢 [B2] | — | — |
| `ContributorOrb` | `chat.jsx:202` | Tiny stacked-orb cluster showing who contributed to a turn. | 🟢 | — | — |
| `AvatarVariant` | `chat.jsx:241` | Selector that swaps between `morph / orb / stacked` avatar styles. | 🟢 | — | — |
| `VoiceWeave` | `chat.jsx:269` | The under-synthesis attribution strip (weave lines per voice). | 🟢 | — | — |
| `PullChip` | `response-ui.jsx:177` | Small pulled-quote citation chip shown in trace steps. | 🟢 | — | — |
| `CouncilLigature` | `response-ui.jsx:359` | The agreement / dissent tie between council debate lines. | 🟢 | — | — |
| `TypingIndicator` | `composer.jsx:14` | 7-phase animated "thinking" line while mastermind replies. | 🟢 | — | — |
| `ActionsRow` | `response-ui.jsx:415` | Copy · Regen · Branch · Pin · Share · Speak row under each turn. | 🟢 | — | — |
| `TrafficLights` | `app.jsx:154` | macOS window-chrome dots. | 🟢 | — | — |
| `ProjectChip` | `responsive.jsx:538` | Project pill for the header strip. | 🟢 | — | — |
| `TabIcon` | `mobile.jsx:34` | Mobile bottom-nav icon set (chat/apps/threads/me). | 🟢 | — | — |
| `IOSStatusBar` | `mobile.jsx:74` | Fake iOS status bar (time, signal, wifi, battery). | 🟢 | — | — |
| `HomeIndicator` | `mobile.jsx:117` | iOS home-gesture bar at the bottom of the screen. | 🟢 | — | — |
| `TopBarButton` | `mobile.jsx:391` | Mobile top-bar action button. | 🟢 | — | — |
| `CallButton` | `responsive.jsx:482` | Round action button inside the voice-call stage. | 🟢 | — | — |
| Inline icons | `responsive.jsx:500+` | `IconMic`, `IconHand`, `IconPlus`, `IconX` — call-stage glyphs. | 🟢 | — | — |
| Line icons (`RIcon`) | `response-ui.jsx:16` | Trace-step icon map (think / search / fetch / code / file / handoff). | 🟢 | — | — |
| 🟡 ⭐ `BrainChip` | — | Role-vocabulary equivalent of `ModelChip` (Librarian / Codesmith / …). | 🟡 [B4] | — | — |
| 🟡 `BrainGlyph` family | — | The seven brain glyphs (book, brackets, anchor, radar, compass, eye, Mahana mark). Design as a family. | 🟡 [B4] | — | — |
| 🟡 `KappaGauge` | — | Small numeric badge with filled arc showing `κ achieved / min`. | 🟡 [B3] | — | — |

---

## 2. Molecules (composed behaviors)

Components that stitch a few atoms together and own a small interaction.

| Component | File · line | Purpose | Status | Playground | Spec |
|---|---|---|---|---|---|
| ⭐ `LandingOrb` | `landing-orb.jsx:10` | The morphing mastermind avatar — thinking / landing / landed states. | 🟢 | — | — |
| `LandingOrbDemo` | `landing-orb.jsx:147` | Scripted auto-demo variant for the landing page / splash. | 🟢 | — | — |
| ⭐ `ThinkingTrace` | `response-ui.jsx:50` | Collapsible per-step reasoning log with per-brain color gutter. | 🟢 [B1] | — | — |
| `TraceStep` | `response-ui.jsx:133` | One step inside the trace — title, detail, tool card. | 🟢 [B1] | — | — |
| ⭐ `AttributedSynthesis` | `response-ui.jsx:218` | The prose body of a turn — paragraph segments with per-brain attribution. | 🟢 | — | — |
| `AttributedParagraph` | `response-ui.jsx:241` | One segment-attributed paragraph inside synthesis. | 🟢 | — | — |
| `CouncilTurn` | `response-ui.jsx:382` | One debate line inside a council-mode reply. | 🟢 | — | — |
| `VerdictBar` | `chat.jsx:483` | One-line call + reason + confidence meter footer. | 🟢 | — | — |
| `ArtifactCard` | `chat.jsx:447` | Small artifact preview card used inline in turns. | 🟢 [B1] | — | — |
| `SuggestionStrip` | `draft-composer.jsx:83` | The draft-composer's suggestion chips row. | 🟢 | — | — |
| `BlockCard` | `draft-composer.jsx:130` | One block inside the draft canvas (heading / bullet / todo / code / callout). | 🟢 [B2] | — | — |
| `SlashMenu` | `draft-composer.jsx:190` | The `/` block picker — dropdown today, stacked-cards planned. | 🟢 [B2] | — | — |
| `ModelConductor` | `composer.jsx:63` | Team selector with per-mind weight dials. | 🟢 | — | — |
| `HeavyTurnPreviewCard` | `mobile.jsx:618` | Mobile teaser for the heavy-turn artifact. | 🟢 | — | — |
| `BottomNav` | `mobile.jsx:136` | Mobile pill nav at the bottom. | 🟢 | — | — |
| `BottomSheet` | `mobile.jsx:268` | Draggable bottom sheet — heavy-turn, inspector, app-focus. | 🟢 | — | — |
| `TabStack` | `mobile.jsx:187` | Mobile swipe-between-screens container. | 🟢 | — | — |
| `MobileTopBar` | `mobile.jsx:365` | Mobile chat/app top bar. | 🟢 | — | — |
| `HeaderProjectsStrip` | `responsive.jsx:516` | Horizontal strip of project chips in the thread header. | 🟢 | — | — |
| `AppRailProjectsBox` | `responsive.jsx:579` | Right-rail projects container. | 🟢 | — | — |
| `RailDrawer` | `responsive.jsx:644` | Left/right edge drawer for collapsed rails. | 🟢 | — | — |
| `VoiceGradientBg` | `responsive.jsx:230` | Full-bleed painterly gradient backdrop for voice-call stage. | 🟢 | — | — |
| `SectionHeader` | `inspector.jsx:48` | Inspector panel section header (icon + title + count). | 🟢 | — | — |
| `HTScrapeCard` | `heavy-turn.jsx:368` | Heavy-turn web-scrape tool-run card. | 🟢 | — | — |
| `HTCodeInterpCard` | `heavy-turn.jsx:428` | Heavy-turn code-interpreter tool-run card. | 🟢 | — | — |
| `HTCodeBlock` | `heavy-turn.jsx:556` | Syntax-highlighted code block with language tag + copy button. | 🟢 | — | — |
| `HTArtifactTray` | `heavy-turn.jsx:597` | The collapsible multi-file tray under a heavy turn. | 🟢 [B1] | — | — |
| `TweakRow` | `app.jsx:291` | One row inside the Tweaks panel — label + options. | 🟢 | — | — |
| `CollapsedSidebar` | `responsive.jsx:147` | 56px icon-only sidebar for mid-width. | 🟢 | — | — |
| `CollapsedInspector` | `responsive.jsx:38` | Collapsed right-rail (icon-only). | 🟢 | — | — |
| `ArtifactFillStage` | `responsive.jsx:285` | Full-browser expansion of an artifact. | 🟢 [B1] | — | — |
| `LAEntryRow` | `ledger-admin.jsx:164` | A single row in the Ledger Admin artifact. | 🟢 | — | — |
| `LANewEntryDrawer` | `ledger-admin.jsx:289` | New-entry side drawer in Ledger Admin. | 🟢 | — | — |
| `LAStat` | `ledger-admin.jsx:639` | Stat card inside Ledger Admin. | 🟢 | — | — |
| `LASpark` | `ledger-admin.jsx:110` | Tiny sparkline inside LAStat. | 🟢 | — | — |
| `LAAccountPill` | `ledger-admin.jsx:139` | Account chip inside Ledger Admin rows. | 🟢 | — | — |
| 🟡 ⭐ `NeuropacketCard` | — | The κ-gated packet card (header / headline / knowledge / handoff / provenance). | 🟡 [B3] | — | — |
| 🟡 `PacketTimeline` | — | Flat timeline of neuropackets ordered by `t_ms`, brain-color gutter. | 🟡 [B3] | — | — |

---

## 3. Organisms (full features)

Composes molecules and owns meaningful state / behavior.

| Component | File · line | Purpose | Status | Playground | Spec |
|---|---|---|---|---|---|
| ⭐ `Composer` | `composer.jsx:155` | Post-send chat input — pill, apps row, typing indicator. | 🟢 | — | — |
| ⭐ `DraftComposer` | `draft-composer.jsx:246` | Pre-send Notion-style canvas with slash menu + mini-brains. | 🟢 [B2] | — | — |
| ⭐ `MastermindMessage` | `chat.jsx:301` | The standard mastermind turn — avatar, trace, synthesis, verdict, actions. | 🟢 | — | — |
| `UserMessage` | `chat.jsx:523` | The user message bubble. | 🟢 | — | — |
| ⭐ `HeavyMastermindMessage` | `heavy-turn.jsx:838` | Long-form turn with trace + narrative + code bundle + live preview. | 🟢 [B1] | — | — |
| `HTArtifactPreview` | `heavy-turn.jsx:734` | The live preview frame mounted inside a heavy turn. | 🟢 [B1] | — | — |
| ⭐ `LedgerAdmin` | `ledger-admin.jsx:423` | The live interactive artifact — mini Ledger app. | 🟢 | — | — |
| `CouncilDebate` | `response-ui.jsx:340` | Council-mode rendering — multi-voice transcript with ligatures. | 🟢 | — | — |
| ⭐ `MastermindInspector` | `inspector.jsx:332` | Right rail — minds / knowledge / memory / tools / related / cost. | 🟢 | — | — |
| `MindsSection` | `inspector.jsx:73` | Inspector "who's contributing" panel. | 🟢 | — | — |
| `KnowledgeSection` | `inspector.jsx:125` | Inspector knowledge sources panel. | 🟢 | — | — |
| `ToolsSection` | `inspector.jsx:161` | Inspector tools used panel. | 🟢 | — | — |
| `MemorySection` | `inspector.jsx:226` | Inspector memory panel. | 🟢 | — | — |
| `RelatedSection` | `inspector.jsx:259` | Inspector related threads panel. | 🟢 | — | — |
| `CostSection` | `inspector.jsx:293` | Inspector cost breakdown. | 🟢 | — | — |
| `AppRail` | `app-icons.jsx:76` | The vertical app dock (Mail, Tasks, Ideas, …). | 🟢 | — | — |
| `UnifierPanel` | `app-icons.jsx:102` | The panel that opens when you click an app icon. | 🟢 | — | — |
| `MailUnifier`, `TasksUnifier`, etc. | `app-icons.jsx:179+` | Per-app content inside the Unifier panel (8 variants). | 🟢 | — | — |
| ⭐ `VoiceCallStage` | `responsive.jsx:370` | Fullscreen painterly voice-call mode. | 🟢 [B1] | — | — |
| ⭐ `NewChatStage` | `app.jsx:315` | Empty-state landing before the first message. | 🟢 | — | — |
| `Sidebar` | `app.jsx:4` | Desktop sidebar — brand, new chat, convos, pinned apps, user. | 🟢 | — | — |
| `ThreadHeader` | `app.jsx:167` | Desktop thread title bar. | 🟢 | — | — |
| `TweaksPanel` | `app.jsx:238` | The Tweaks control panel. | 🟢 | — | — |
| `MobileChatScreen` | `mobile.jsx:409` | Mobile chat view. | 🟢 | — | — |
| `MobileLanding` | `mobile.jsx:503` | Mobile empty-state landing. | 🟢 | — | — |
| `MobileAppsScreen` | `mobile.jsx:687` | Mobile Apps tab. | 🟢 | — | — |
| `MobileThreadsScreen` | `mobile.jsx:753` | Mobile Threads tab. | 🟢 | — | — |
| `MobileMeScreen` | `mobile.jsx:835` | Mobile Me / profile tab. | 🟢 | — | — |
| `MobileInspectorAdapter` | `mobile.jsx:1112` | Mobile rendering of the inspector as a bottom sheet. | 🟢 | — | — |

---

## 4. Shells (top-level orchestrators)

The root components. Each decides which tree to mount.

| Component | File · line | Purpose | Status |
|---|---|---|---|
| `MastermindApp` | `app.jsx:379` | Desktop shell — sidebar + thread + composer + right rail. Owns tweaks + breakpoint switch. | 🟢 |
| `MobileApp` | `mobile.jsx:971` | Mobile shell — iOS chrome + tab stack + bottom sheets. | 🟢 |

---

## 5. Data & catalogs (not components)

Exported data shapes consumed by components. Living in JSX files alongside the UI for now; documented here so we know what each component assumes.

| Catalog | File | What it defines |
|---|---|---|
| `MODELS` + `MODELS_BY_ID` | `models.jsx:4` | 10 vendor models (Claude, GPT, DeepSeek, Gemini, Grok, Kimi, Flux, …) with id, name, org, icon, color, persona. |
| `MAHANA_APPS` + `APPS_BY_ID` | `app-icons.jsx:10` | 11 Mahana apps (Mail, Tasks, Ideas, Vault, Documents, Designer, Panels, Accountant, Website, AIApps, Apps). |
| `MAHANA_GRADIENT[]` / `MAHANA_GRADIENT_CSS` | `models.jsx:18` | Canonical 5-stop gradient. **Now matches `design.mahana.ai/tokens.css` v0.2.0.** |
| `SEED_TRANSCRIPT` | `chat.jsx:16` | Seed conversation for the prototype. |
| `INSPECTOR_DATA` | `inspector.jsx:9` | Seed inspector content. |
| `HEAVY_TRACE`, `HEAVY_TOOLS`, `HEAVY_FILES`, `HEAVY_FILE_SOURCES` | `heavy-turn.jsx:32+` | The long-form "settlement state machine" turn. |
| `DRAFT_SUGGESTERS`, `BLOCK_TYPES` | `draft-composer.jsx:13+` | Draft-composer brains + slash-menu vocabulary. |
| `TYPING_PHRASES`, `MODES` | `composer.jsx:3+` | Composer typing animation + mode labels. |
| `MOBILE_TABS`, `MOBILE_THREADS` | `mobile.jsx:27+` | Mobile tab definitions + seed threads. |
| `LA_ACCOUNTS`, `LA_ENTRIES`, `LA_SPARK` | `ledger-admin.jsx:18+` | Ledger Admin seed data. |

---

## 6. Outstanding work (from HANDOFF.md)

Tagged to the components they touch. Reference these when prioritizing playgrounds.

### Bucket 1 — Layout & polish `[B1]`
- **Artifact container** — center above composer, +10% horizontal padding, add Fill button. Touches `HeavyMastermindMessage`, `HTArtifactTray`, `ArtifactFillStage`.
- **Reasoning-step spacing** — gap between model circle + name, fix nested padding, drop stroke on logo. Touches `ThinkingTrace`, `TraceStep`.
- **Colorize in-chat block icons** — 5 SVGs need fill (apps-and-sites, components-parts, tasks-and-plans, design-system, files-and-assets). Touches `BlockCard`.
- **6px gap between main containers** — applies to shell divisions in `MastermindApp`.
- **Voice-call left rail** — collapse chat rail when call active. Touches `VoiceCallStage`, `CollapsedSidebar`.

### Bucket 2 — Composer `[B2]`
- **Slash menu as stacked block-cards above input** — `SlashMenu`.
- **Mini-brains under caret** — `WarmingAvatar`, `DraftComposer`.
- **Post-send Assembly-rail takeover** — `DraftComposer` → `AppRail` transition. One continuous surface that reflows.
- **Mode row content** — repurpose with 6+1 brain info. Touches `Composer`.

### Bucket 3 — Neuropacket protocol `[B3]`
- **Define JSON protocol** — see `skills/neuropacket.md`.
- **`NeuropacketCard` visual** — header / summary / knowledge / handoff / κ-gate blocks.
- **`PacketTimeline`** — packets flowing between minds as a timeline.
- **`KappaGauge`** atom.

### Bucket 4 — Brain vocabulary `[B4]`
- **6+1 Brain vocabulary everywhere** — Librarian / Codesmith / Grounding / Fleet Cmd / Strategist / Eyes / NeuroBrain.
- **`BrainChip` + `BrainGlyph` family** to replace `ModelChip` in user-facing surfaces.
- **κ (kappa) gate indicator** in the reasoning trace.

### Bucket 5 — Code-grounded `[B5]`
- **Accessibility** — ~100 interactive/image elements, only 6 `aria-label`/`alt` total. Audit all components.
- **Mock-data centralization** — move `app.jsx` inline `convos` into `mock-data.jsx`.
- **Loading / error UI** — no skeletons or error states anywhere. Add shared `<Skeleton>` and `<ErrorInline>` atoms.

---

## 7. First-wave playgrounds (my proposal)

Start with the ⭐ components in dependency order. Each playground shows the component in isolation at every variant/state, consumes tokens from `design.mahana.ai/tokens.css`, and pairs with a spec.

**Wave 1 — foundational atoms** (unlock everything else)
1. `ModelChip` — every composer, chat, inspector surface uses it
2. `MorphingAvatar` — mechanism behind the LandingOrb and ContributorOrb
3. `AppIcon` / `SquircleIcon` — the app rail and Mahana brand surface

**Wave 2 — the turn anatomy** (the product's core story)
4. `LandingOrb`
5. `ThinkingTrace` + `TraceStep` (fix B1 spacing issues)
6. `AttributedSynthesis`
7. `VerdictBar`
8. `ActionsRow`

**Wave 3 — the composer** (the only other thing the user touches constantly)
9. `Composer`
10. `DraftComposer` + `SlashMenu` (do B2 stacked-cards here)
11. `WarmingAvatar` (B2 caret mini-brains)

**Wave 4 — the new stuff** (design net-new)
12. `BrainChip` + `BrainGlyph` family (B4)
13. `KappaGauge` (B3 atom)
14. `NeuropacketCard` (B3 molecule)
15. `PacketTimeline` (B3 organism)

---

## 8. What doesn't need a playground

Things too specific or too shell-level to benefit from isolation:

- `MastermindApp`, `MobileApp` — shells, not components.
- All `LA*` components — Ledger Admin is the "live artifact," designed as a whole mini-app, not a reusable pattern. The whole thing is already a kind of playground.
- Individual `*Unifier` panels — too content-specific. Design the `UnifierPanel` shell once, put the content inside.
- `IOSStatusBar`, `HomeIndicator`, `TrafficLights` — chrome props, essentially one-off decorations.