toga-ai 1.0.628 → 1.0.629

package/knowledge/sessions/2026-08-20-talos-shared-component-apeterson.md

@@ -0,0 +1,72 @@
+---
+type: session
+slug: talos-shared-component
+title: Talos shared AI-assistant component (blox) + supply integration
+author: apeterson
+repos: [toga-blox, toga25-supply]
+framework: "2.0"
+client: shared
+status: active
+created: 2026-08-20
+updated: 2026-08-20
+---
+
+# Session: talos-shared-component
+**Date:** 2026-08-20
+**Project/Repo:** toga-blox + toga25-supply (2.0)
+**Task:** Build Talos (AI assistant: header launcher button + slide-out chat panel) as a shared, fully-themeable blox component (TRUE-80692) and wire it into toga25-supply for all clients (TRUE-80693), UI-shell-only with a stub onSend.
+
+---
+
+## What WORKED
+- New `src/components/Talos/` in toga-blox-npm: TalosLauncher, TalosPanel, TalosMessage, types.ts, theme.ts, helpers.tsx, stub.ts, Talos.module.css, index.ts — exported from `src/components/index.ts`. `npm run build` clean; files land in `dist/components/Talos/`. TS typecheck clean.
+- Pure-UI + injected adapter design: `TalosAdapter` = onSend(text)=>Promise<TalosResponse>, onOpenRecord(id), onAction(key), onDockWidthChange(px), onAttach(). No window.* globals. `createTalosStubAdapter()` ships for backend-free demos.
+- Controlled state: open/expanded/width owned by host via onOpenChange/onExpandedChange/onWidthChange.
+- Full CSS tokenization: every color/font-size/weight/line-height/radius/shadow/dimension is `var(--talos-*, default)`. Talos.module.css IS the default theme.
+- Theme override model: typed `TalosTheme` (theme.ts) + `talosThemeToVars()` applied as inline `--talos-*` on launcher/panel/scrim roots; unset keys fall through to defaults. Any --talos-* is also overridable via host CSS.
+- Supply wiring (AppLayout.tsx): owns talosOpen/Expanded/Width/DockWidth state, memoized stub adapter (onOpenRecord -> navigate `/sales-orders?sales-orders=<id>`; onAction "approvals" -> `/sales-orders`; onDockWidthChange -> reserve width). Launcher in Header via new presentational `talosLauncher` slot + `.headerActions` flex wrapper; TalosPanel at app root. Enabled for ALL clients. Owl asset copied to supply `src/assets/talos-owl.png`, passed as branding.avatarSrc (fixes button + welcome orb + message avatar). Plus Jakarta Sans loaded in supply `src/index.css`. Supply typecheck: 0 errors.
+- Header-overlap bug fixed: dock-width reservation moved to the OUTER app wrapper (marginRight) so the header shifts with content and the launcher/avatar stay visible.
+- Two ecc:react-reviewer passes applied (quality + fidelity-vs-prototype). See Decisions.
+- Committed + pushed both branches: toga-blox TRUE-80692 (commit 2c34dec1), toga25-supply TRUE-80693 (commit a346833). Upstreams set.
+- Captured to KB: 2 feature docs published to _main (2.0/apps/toga-blox/features/talos-assistant.md, 2.0/apps/toga25-supply/features/talos-integration.md).
+
+## What did NOT work — DO NOT RETRY THESE
+- Fetching the claude.ai `/design/p/...` design URL via WebFetch or the Chrome DevTools MCP browser: blocked by Cloudflare bot challenge (`cf-mitigated: challenge`) + a login/human-check that fails in an automation-controlled browser. Not an auth-cookie issue. Resolution: user downloaded the bundle locally (`~/Downloads/TOGa Supply (Pipeline)/demo/talos.jsx`). Do not re-attempt remote fetch of design URLs.
+- Reserving dock width only on `<main>`: leaves the header's right edge under the fixed docked panel, hiding the launcher + avatar (blox Header is normal-flow, NOT fixed). Must reserve on the outer wrapper instead.
+- Keeping `window.dispatchEvent(new Event("resize"))` on resize drag-end (from prototype): flagged CRITICAL as adapter-bypass; removed. Host gets width via onWidthChange/onDockWidthChange instead — do not re-add.
+
+## Not tried yet (candidates for next session)
+- Spacing-token pass: ~38 padding/gap/margin literals in Talos.module.css are still hardcoded, so density is NOT themeable. Add `--talos-space-*` tokens and/or a `density` preset prop ("comfortable"|"compact") — awaiting UX/UI input (handoff recap given to team).
+- Structural variants: launcher `variant` ("icon"|"pill") and/or optional panel-mode props (e.g. drop expanded mode for a small Desk side chat) — awaiting UX input.
+- Real `onSend` backend adapter (this ticket is UI-shell + stub only) — separate later ticket.
+- Publish toga-blox TRUE-80692 to npm (per `_sandbox-dev` dist-tag workflow) so consumers other than supply (which uses the local symlink) get Talos.
+- Wire a supply-specific `theme` object if supply should diverge from the default look (currently uses default).
+- Approvals action only routes to `/sales-orders`; deeper auto-apply of the approvals filter (local page state, not URL) is not wired.
+
+## Current file state
+| File | Status | Notes |
+|------|--------|-------|
+| toga-blox src/components/Talos/*.tsx,.ts,.css | Created | Full component; committed TRUE-80692; built to dist |
+| toga-blox src/components/index.ts | Modified | Added `export * from "./Talos"` |
+| toga25-supply src/layout/AppLayout/AppLayout.tsx | Modified | Talos state + stub adapter + launcher/panel mount + dock-width reservation + owl branding |
+| toga25-supply src/components/Header/Header.tsx | Modified | `talosLauncher` slot prop (committed earlier in 2ea8d3f) |
+| toga25-supply src/components/Header/Header.module.css | Modified | `.headerActions` flex wrapper |
+| toga25-supply src/index.css | Modified | Plus Jakarta Sans @import |
+| toga25-supply src/assets/talos-owl.png | Created | Owl asset from design bundle |
+
+## Decisions made
+- UI-shell only this ticket: build component + adapter, wire supply with stub onSend; real backend later. Rejected: wiring a live backend now (out of scope).
+- Injected props/context adapter (no window.* globals). Rejected: the prototype's window.__* bridge (implicit coupling, not reusable).
+- Fully tokenized styling; Talos.module.css is the DEFAULT theme; consumers override via typed `TalosTheme` prop and/or raw --talos-* CSS. Rejected: (a) hardcoded literals; (b) stripping all defaults so every consumer must ship a full theme (renders unstyled standalone).
+- Font loaded by the HOST (supply index.css), not a forced @import inside the shared CSS; component default family is "Plus Jakarta Sans". Rationale: avoids a network/CSP side effect in the shared lib while still giving prototype typography.
+- Review pass 1 (quality) fixes: removed hardcoded "JB" -> branding.userInitials + glyph; removed window resize dispatch; per-conversation busy guard; resize listeners in an effect (cleanup + rAF throttle + keyboard role="separator"); ESC handler via ref; diffed dock-width broadcast (avoids inline-adapter re-render loop); composer aria-label; SSR-safe portal; memoized TalosMessage + handlers.
+- Review pass 2 (fidelity): restored 11px card radius (own `--talos-radius-card` token); restored attach/paper-clip button wired to optional onAttach. Deliberately KEPT OUT: window resize dispatch and the brand "online" status row (dead CSS in the prototype too).
+
+## Blockers
+None. Both branches pushed; KB captured. Next work is UX-input-gated (density/variants) or a separate ticket (real backend, blox npm publish).
+
+## Exact next step
+> When UX/UI returns input on density: do the spacing-token pass in `toga-blox-npm/src/components/Talos/Talos.module.css` (tokenize the ~38 padding/gap/margin literals into `--talos-space-*`) and add a `density?: "comfortable" | "compact"` prop to TalosPanel that swaps a spacing preset; expose the new tokens in `TalosTheme` (theme.ts). Then `npm run build`. Separately, when ready for other consumers: publish toga-blox TRUE-80692 to npm via the `_sandbox-dev` dist-tag workflow.
+
+---
+_Saved by /session-save on 2026-08-20_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toga-ai",
-  "version": "1.0.628",
+  "version": "1.0.629",
   "description": "TOGA Technology Team Claude Knowledge System — shared AI coding harness with skills, knowledge base CLI, and project installer for Claude Code.",
   "keywords": [
     "claude",