From ca634f10383e2ab31ba7cbc37171b65a943b0395 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Tue, 7 Jul 2026 19:41:39 -0700 Subject: [PATCH 01/11] docs: add cockpit chat token redesign spec --- ...7-08-cockpit-chat-token-redesign-design.md | 171 ++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 docs/superpowers/specs/2026-07-08-cockpit-chat-token-redesign-design.md diff --git a/docs/superpowers/specs/2026-07-08-cockpit-chat-token-redesign-design.md b/docs/superpowers/specs/2026-07-08-cockpit-chat-token-redesign-design.md new file mode 100644 index 000000000..13589194b --- /dev/null +++ b/docs/superpowers/specs/2026-07-08-cockpit-chat-token-redesign-design.md @@ -0,0 +1,171 @@ +# Cockpit Chat Token Redesign + +## Goal + +Redesign the bespoke UI in the affected `deep-agents`, `chat`, and `ag-ui` +cockpit Angular examples so it does not depend on Tailwind utilities that are +not compiled in embedded example builds. + +The examples should use Angular component-scoped `styles:` blocks and a public +chat styling control surface named `--tplane-chat-*`. The shared example theme +bridge maps those public chat tokens to the underlying `--ds-*` design tokens. + +## Context + +The embedded cockpit example builds import Tailwind through +`@threadplane/example-layouts/theme.css`. Tailwind v4 source detection does not +scan each consuming example app's `src/**` templates from that import path, so +app-level Tailwind utilities such as `p-4`, `rounded-lg`, and `font-semibold` +produce no usable styling rules for bespoke example markup. + +Most examples still look styled when they render only library components such +as ``, ``, or ``, because those +library components ship encapsulated styles. The broken surface is bespoke UI +owned by the example app: sidebars, status rows, small cards, projected approval +body content, and inline render/tool view components. + +The existing theme bridge in `libs/example-layouts/src/theme.css` already maps a +small set of `--tplane-chat-*` variables to `--ds-*`, but it is incomplete. Some +examples reference undefined variables such as `--tplane-chat-primary`, +`--tplane-chat-on-primary`, and semantic status variables. + +## Design Direction + +Use `--tplane-chat-*` as the public chat/example styling API and `--ds-*` as the +implementation layer. Bespoke cockpit examples should consume the chat-facing +tokens, not raw `--ds-*`, unless there is no meaningful chat token for a value. + +This keeps chat theming focused: users can customize chat UI through a chat +namespace without overriding global design-system tokens that may also affect +docs, cockpit chrome, render demos, or marketing pages. + +## Token Bridge + +Extend the bridge in `libs/example-layouts/src/theme.css` using the existing +chat library vocabulary from `libs/chat/src/lib/styles/chat-tokens.ts`. Do not +introduce a parallel naming scheme that would require migrating library +internals. + +The bridge should define at least these public chat variables for cockpit +examples: + +| Public token | Default source | +| --- | --- | +| `--tplane-chat-bg` | `--ds-canvas` | +| `--tplane-chat-surface` | `--ds-surface` | +| `--tplane-chat-surface-alt` | `--ds-surface-tinted` | +| `--tplane-chat-input-bg` | `--ds-surface` | +| `--tplane-chat-text` | `--ds-text-primary` | +| `--tplane-chat-text-muted` | `--ds-text-muted` | +| `--tplane-chat-muted` | `--ds-text-muted` | +| `--tplane-chat-separator` | `--ds-border` | +| `--tplane-chat-primary` | `--ds-chat-purple` for chat examples | +| `--tplane-chat-accent` | Alias to `--tplane-chat-primary` for existing examples | +| `--tplane-chat-on-primary` | `--ds-text-inverted` or a contrast-safe fixed value | +| `--tplane-chat-font-family` | `--ds-font-sans` | +| `--tplane-chat-font-mono` | `--ds-font-mono` | +| `--tplane-chat-font-size` | Existing chat default, unless a `--ds-*` size token exists | +| `--tplane-chat-font-size-sm` | Existing chat default | +| `--tplane-chat-font-size-xs` | Existing chat default | +| `--tplane-chat-radius-card` | `--ds-radius-md` | +| `--tplane-chat-radius-button` | `--ds-radius-sm` | +| `--tplane-chat-radius-bubble` | Existing chat default or `--ds-radius-lg` | +| `--tplane-chat-radius-input` | Existing chat default or `--ds-radius-lg` | +| `--tplane-chat-radius-launcher` | `--ds-radius-full` | +| `--tplane-chat-shadow-sm` | `--ds-shadow-sm` | +| `--tplane-chat-shadow-md` | `--ds-shadow-md` | +| `--tplane-chat-shadow-lg` | `--ds-shadow-lg` | +| `--tplane-chat-success` | Fixed semantic green | +| `--tplane-chat-warning-bg` | Fixed or `color-mix()` semantic warning surface | +| `--tplane-chat-warning-text` | Fixed semantic warning text | +| `--tplane-chat-error-bg` | Fixed or `color-mix()` semantic error surface | +| `--tplane-chat-error-border` | Fixed semantic error border | +| `--tplane-chat-error-text` | Fixed semantic error text | +| `--tplane-chat-destructive` | Fixed destructive action color | + +Semantic status defaults can be fixed colors or `color-mix()` expressions in +the bridge because there are no `--ds-success`, `--ds-warning`, or `--ds-error` +tokens today. If an example needs a one-off state that does not map to this +public surface, define a local component variable that references the closest +chat token rather than adding a new public token casually. + +## Example Styling Pattern + +Each affected bespoke component should replace Tailwind utility classes and +inline style attributes with ordinary scoped class names: + +- Sidebar shell classes such as `.panel`, `.cap`, `.empty`, `.row`, `.badge`, + `.btn`, `.code`, and `.kv`. +- View/tool card classes such as `.wc`, `.cb`, `.file-card`, `.exec-card`, + `.checklist`, and `.result-pill`. +- Real CSS selectors for interaction states such as `:hover`, `:focus-visible`, + `[data-status="complete"]`, and modifier classes. + +Example markup may keep `class="flex-1 min-w-0"` on `` or other library +host elements as a harmless no-op exception, but bespoke elements should not +carry Tailwind utility classes. + +## Scope + +The implementation should audit and restyle only the bespoke UI in these +capability areas: + +- `cockpit/deep-agents`: `skills`, `sandboxes`, `filesystem`, `planning`, + `subagents`, and `memory`. +- `cockpit/chat`: `input`, `messages`, `theming`, `threads`, `interrupts`, + `timeline`, `tool-calls`, `subagents`, and `generative-ui` render-view + cards. +- `cockpit/ag-ui`: `interrupts`, `tool-views`, `client-tools`, and + `json-render` view cards. + +Pure library-composed examples such as simple `` wrappers should be left +alone except for no-op `sidebarWidth="w-*"` fixes when present. + +## Behavior Preservation + +The redesign is styling-only. Preserve: + +- Agent injection, providers, store wiring, thread callbacks, and submit/resume + handlers. +- Schema-anchored inputs such as `ViewProps` in client tool + cards. +- Welcome suggestion labels, prompt text, and other strings asserted by e2e + fixtures. +- Tool/view registry keys and component selectors. +- Existing rendered library components and their internal chrome. + +## Theming Example + +`cockpit/chat/theming` should continue to demonstrate chat theming, but it +should demonstrate the public `--tplane-chat-*` API rather than deprecated or +undefined variables. Its theme presets should set chat-facing variables. Its +visible token list and any manual/e2e expectations should be updated to match +the supported public control surface. + +## Verification + +For each affected project: + +- Grep the changed bespoke component files for Tailwind utility classes, + visual inline styles, `--ds-*` direct usage, and undefined old chat + variables. Data-bound custom properties used for layout, such as + `[style.--container-cols]`, are allowed when they are structural rather than + theme styling. +- Build with `npx nx build --configuration=production`. +- After each capability, run a grouped `npx nx run-many -t build + --configuration=production -p `. +- Confirm built output includes the new scoped classes and `--tplane-chat-*` + references for changed bespoke components. + +If new colocated `*.spec.ts` files are added under an example app's `src/`, +add the defensive `tsconfig.app.json` excludes for `src/**/*.spec.ts` and +`src/**/*.test.ts`. + +## Non-Goals + +- Do not fix Tailwind source detection or move the Tailwind import. +- Do not redesign `@threadplane/chat` library internals as part of this pass. +- Do not change backend agents, fixtures, e2e flow semantics, or runtime data + contracts. +- Do not replace the design-token system; the bridge remains backed by + `--ds-*`. From 227b24b3b94c735ab56ffd5d7f923c12f2e3b057 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Tue, 7 Jul 2026 22:13:44 -0700 Subject: [PATCH 02/11] docs: add cockpit chat token redesign plan --- .../2026-07-08-cockpit-chat-token-redesign.md | 721 ++++++++++++++++++ 1 file changed, 721 insertions(+) create mode 100644 docs/superpowers/plans/2026-07-08-cockpit-chat-token-redesign.md diff --git a/docs/superpowers/plans/2026-07-08-cockpit-chat-token-redesign.md b/docs/superpowers/plans/2026-07-08-cockpit-chat-token-redesign.md new file mode 100644 index 000000000..7beae554e --- /dev/null +++ b/docs/superpowers/plans/2026-07-08-cockpit-chat-token-redesign.md @@ -0,0 +1,721 @@ +# Cockpit Chat Token Redesign Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Restyle affected bespoke cockpit example UI so it uses component-scoped CSS and the public `--tplane-chat-*` token API instead of compiled-away Tailwind utilities, inline theme styles, undefined legacy chat variables, or raw `--ds-*` tokens. + +**Architecture:** Add a complete `--tplane-chat-*` bridge in `libs/example-layouts/src/theme.css`, backed by `--ds-*` design tokens where possible and existing chat token names where the library already has a public vocabulary. Then update only bespoke example app markup and component styles; leave `@threadplane/chat`, `@threadplane/ag-ui`, `@threadplane/render`, and example-layout chrome behavior intact. + +**Tech Stack:** Angular standalone components, Nx, Vitest for `example-layouts`, encapsulated Angular `styles:`, `@threadplane/chat`, `@threadplane/example-layouts`, `@threadplane/render`, `@threadplane/langgraph`, `@threadplane/ag-ui`. + +--- + +## Spec + +Design spec: `docs/superpowers/specs/2026-07-08-cockpit-chat-token-redesign-design.md` + +Spec review status: Approved. + +## File Structure + +Shared token bridge: + +- Modify `libs/example-layouts/src/theme.css`: expand the `:root` `--tplane-chat-*` namespace bridge. +- Create `libs/example-layouts/src/lib/theme-bridge.spec.ts`: string-level regression test that `theme.css` exposes the public chat tokens needed by cockpit examples and maps core tokens to `--ds-*`. + +Deep Agents examples: + +- Modify `cockpit/deep-agents/skills/angular/src/app/skills.component.ts` +- Modify `cockpit/deep-agents/skills/angular/src/app/views/calculator-result.component.ts` +- Modify `cockpit/deep-agents/skills/angular/src/app/views/word-count-result.component.ts` +- Modify `cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts` +- Modify `cockpit/deep-agents/filesystem/angular/src/app/views/file-preview.component.ts` +- Modify `cockpit/deep-agents/planning/angular/src/app/planning.component.ts` +- Modify `cockpit/deep-agents/planning/angular/src/app/views/checkbox-row.component.ts` +- Modify `cockpit/deep-agents/planning/angular/src/app/views/plan-checklist.component.ts` +- Modify `cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts` +- Modify `cockpit/deep-agents/sandboxes/angular/src/app/views/code-execution.component.ts` +- Modify `cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts` +- Modify `cockpit/deep-agents/memory/angular/src/app/memory.component.ts` +- Modify each changed Deep Agents app `tsconfig.app.json` only if a colocated spec is added under `src/`; no spec is expected for these apps. + +Chat examples: + +- Modify `cockpit/chat/input/angular/src/app/input.component.ts` +- Modify `cockpit/chat/messages/angular/src/app/messages.component.ts` +- Modify `cockpit/chat/theming/angular/src/app/theming.component.ts` +- Modify `cockpit/chat/threads/angular/src/app/threads.component.ts` +- Modify `cockpit/chat/interrupts/angular/src/app/interrupts.component.ts` +- Modify `cockpit/chat/timeline/angular/src/app/timeline.component.ts` +- Modify `cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts` +- Modify `cockpit/chat/subagents/angular/src/app/subagents.component.ts` +- Modify `cockpit/chat/generative-ui/angular/src/app/views/bar-chart.component.ts` +- Modify `cockpit/chat/generative-ui/angular/src/app/views/line-chart.component.ts` +- Modify `cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.ts` +- Modify `cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.ts` +- Modify `cockpit/chat/generative-ui/angular/src/app/views/skeleton.css` if skeleton colors need token remapping. +- Leave `cockpit/chat/a2ui/angular/src/app/a2ui.component.ts` and `cockpit/chat/debug/angular/src/app/debug.component.ts` alone unless a verification grep shows non-library bespoke styling that must change. + +AG-UI examples: + +- Modify `cockpit/ag-ui/interrupts/angular/src/app/interrupts.component.ts` +- Modify `cockpit/ag-ui/tool-views/angular/src/app/weather-card.component.ts` +- Modify `cockpit/ag-ui/client-tools/angular/src/app/weather-card.component.ts` +- Modify `cockpit/ag-ui/client-tools/angular/src/app/confirm-booking.component.ts` +- Modify `cockpit/ag-ui/json-render/angular/src/app/views/bar-chart.component.ts` +- Modify `cockpit/ag-ui/json-render/angular/src/app/views/line-chart.component.ts` +- Modify `cockpit/ag-ui/json-render/angular/src/app/views/stat-card.component.ts` +- Modify `cockpit/ag-ui/json-render/angular/src/app/views/data-grid.component.ts` +- Modify `cockpit/ag-ui/json-render/angular/src/app/views/skeleton.css` if skeleton colors need token remapping. +- Leave `cockpit/ag-ui/streaming`, `cockpit/ag-ui/subagents`, and `cockpit/ag-ui/a2ui` alone unless audit proves bespoke styling beyond library host classes. + +Generated/context memory: + +- Modify `/Users/blove/.claude/projects/-Users-blove-repos-angular-agent-framework/memory/project_cockpit_examples_tailwind_never_compiles.md` after implementation to update `STILL TODO`. + +## Shared Rules For All Workers + +- You are not alone in the codebase. Do not revert edits made by others. Work only in your assigned files. +- Preserve behavior exactly: handlers, signals, inputs, provider wiring, registry keys, selectors, welcome suggestions, and e2e-asserted strings. +- Do not touch library internals under `libs/chat`, `libs/ag-ui`, or `libs/render` except the shared example theme bridge and its test. +- Do not use Tailwind utility classes on bespoke elements. +- Do not use visual inline styles for theme styling. Allowed exception: structural dynamic custom properties such as `[style.--container-cols]`. +- Bespoke examples should consume `--tplane-chat-*`, not raw `--ds-*`. +- Keep `class="flex-1 min-w-0"` on `` host elements if present; it is a harmless library-host no-op exception. +- Use existing chat token names: `--tplane-chat-radius-card`, `--tplane-chat-radius-button`, `--tplane-chat-warning-bg`, `--tplane-chat-error-border`, etc. +- Use component-local variables only for narrow one-off derived values, and define them from `--tplane-chat-*`. + +## Common CSS Kit + +Use this vocabulary and adapt names only when local components already have a better established prefix: + +```css +:host { + --ex-read: #60a5fa; + --ex-write: var(--tplane-chat-warning-text); +} + +.panel { + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 1rem; + background: var(--tplane-chat-bg); + color: var(--tplane-chat-text); +} + +.cap { + margin: 0; + font-size: var(--tplane-chat-font-size-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--tplane-chat-text-muted); +} + +.empty { + margin: 0; + font-size: var(--tplane-chat-font-size-sm); + font-style: italic; + color: var(--tplane-chat-text-muted); +} + +.card, +.row { + border: 1px solid var(--tplane-chat-separator); + border-radius: var(--tplane-chat-radius-card); + background: var(--tplane-chat-surface-alt); +} + +.badge { + display: inline-flex; + align-items: center; + width: fit-content; + border-radius: var(--tplane-chat-radius-launcher); + padding: 0.125rem 0.5rem; + background: var(--tplane-chat-primary); + color: var(--tplane-chat-on-primary); + font-size: var(--tplane-chat-font-size-xs); + font-weight: 700; +} + +.code { + margin: 0; + padding: 0.5rem; + overflow-x: auto; + white-space: pre-wrap; + overflow-wrap: anywhere; + border-radius: var(--tplane-chat-radius-card); + background: var(--tplane-chat-surface); + color: var(--tplane-chat-text); + font: var(--tplane-chat-font-size-xs) / 1.5 var(--tplane-chat-font-mono); +} + +.btn { + border: 1px solid var(--tplane-chat-separator); + border-radius: var(--tplane-chat-radius-button); + background: var(--tplane-chat-surface-alt); + color: var(--tplane-chat-text); + cursor: pointer; +} + +.btn:hover { + background: color-mix(in srgb, var(--tplane-chat-text) 8%, var(--tplane-chat-surface-alt)); +} + +.btn:focus-visible { + outline: 2px solid var(--tplane-chat-primary); + outline-offset: 2px; +} +``` + +## Grep Gates + +Use these commands after each task, narrowed to the files changed in that task. + +No Tailwind utilities on bespoke files: + +```bash +grep -REn 'class="[^"]*(px-[0-9]|py-[0-9]|p-[0-9]|rounded-|bg-(green|amber|red|blue|indigo|slate|gray|zinc|emerald|purple|sky|teal|orange)-|gap-[0-9]|w-[0-9]|h-[0-9]|border-\[|animate-|space-[xy]-|text-\[|tracking-|font-(semibold|medium|bold))' +``` + +Expected: no output, except `class="flex-1 min-w-0"` on library host components. + +No direct design-token use in bespoke example components: + +```bash +grep -REn -- '--ds-' +``` + +Expected: no output. + +No undefined old chat variable names in changed files: + +```bash +grep -REn -- '--tplane-chat-(surface-dim|primary-surface|primary-border|radius-sm|radius-md|radius-lg|radius-xl|radius-full|warning-surface|error-surface|success-surface)' +``` + +Expected: no output. + +Visual inline style audit: + +```bash +grep -REn 'style="|\[style\.' +``` + +Expected: no output for visual styling. Explicitly reviewed structural dynamic +bindings such as `[style.--container-cols]` are allowed, but `[style.background]`, +`[style.color]`, `[style.opacity]`, and similar theme styling bindings must be +converted to scoped CSS classes. + +## Task 1: Theme Bridge + +**Files:** +- Modify: `libs/example-layouts/src/theme.css` +- Create: `libs/example-layouts/src/lib/theme-bridge.spec.ts` + +- [ ] **Step 1: Write failing bridge coverage** + +Create `libs/example-layouts/src/lib/theme-bridge.spec.ts`: + +```ts +import { readFileSync } from 'node:fs'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { describe, expect, it } from 'vitest'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const themeCss = readFileSync( + resolve(__dirname, '../theme.css'), + 'utf8', +); + +describe('example-layouts theme chat token bridge', () => { + it('maps public chat surface and text tokens to design tokens', () => { + expect(themeCss).toContain('--tplane-chat-bg: var(--ds-canvas);'); + expect(themeCss).toContain('--tplane-chat-surface: var(--ds-surface);'); + expect(themeCss).toContain('--tplane-chat-surface-alt: var(--ds-surface-tinted);'); + expect(themeCss).toContain('--tplane-chat-text: var(--ds-text-primary);'); + expect(themeCss).toContain('--tplane-chat-text-muted: var(--ds-text-muted);'); + expect(themeCss).toContain('--tplane-chat-separator: var(--ds-border);'); + }); + + it('defines the chat public control surface used by cockpit examples', () => { + for (const token of [ + '--tplane-chat-input-bg', + '--tplane-chat-primary', + '--tplane-chat-accent', + '--tplane-chat-on-primary', + '--tplane-chat-font-mono', + '--tplane-chat-font-size', + '--tplane-chat-font-size-sm', + '--tplane-chat-font-size-xs', + '--tplane-chat-radius-card', + '--tplane-chat-radius-button', + '--tplane-chat-radius-bubble', + '--tplane-chat-radius-input', + '--tplane-chat-radius-launcher', + '--tplane-chat-shadow-sm', + '--tplane-chat-shadow-md', + '--tplane-chat-shadow-lg', + '--tplane-chat-success', + '--tplane-chat-warning-bg', + '--tplane-chat-warning-text', + '--tplane-chat-error-bg', + '--tplane-chat-error-border', + '--tplane-chat-error-text', + '--tplane-chat-destructive', + ]) { + expect(themeCss).toContain(`${token}:`); + } + }); +}); +``` + +- [ ] **Step 2: Run the failing test** + +Run: + +```bash +npx nx test example-layouts --testFile=theme-bridge.spec.ts +``` + +Expected: FAIL because most of the listed `--tplane-chat-*` bridge tokens are not in `theme.css`. + +- [ ] **Step 3: Expand the bridge** + +In `libs/example-layouts/src/theme.css`, keep `@import "tailwindcss";` and `@custom-variant` unchanged. Replace the current small `:root` bridge body with a complete bridge using existing chat token names. The exact colors can be adjusted for contrast, but the names should match this shape: + +```css +:root { + --tplane-chat-bg: var(--ds-canvas); + --tplane-chat-surface: var(--ds-surface); + --tplane-chat-surface-alt: var(--ds-surface-tinted); + --tplane-chat-input-bg: var(--ds-surface); + --tplane-chat-text: var(--ds-text-primary); + --tplane-chat-text-muted: var(--ds-text-muted); + --tplane-chat-muted: var(--ds-text-muted); + --tplane-chat-separator: var(--ds-border); + + --tplane-chat-primary: var(--ds-chat-purple); + --tplane-chat-accent: var(--tplane-chat-primary); + --tplane-chat-on-primary: var(--ds-text-inverted); + --tplane-chat-destructive: #dc2626; + + --tplane-chat-error-bg: color-mix(in srgb, #ef4444 14%, transparent); + --tplane-chat-error-border: #dc2626; + --tplane-chat-error-text: #f87171; + --tplane-chat-warning-bg: color-mix(in srgb, #f59e0b 14%, transparent); + --tplane-chat-warning-text: #d97706; + --tplane-chat-success: #22a05a; + + --tplane-chat-font-family: var(--ds-font-sans); + --tplane-chat-font-mono: var(--ds-font-mono); + --tplane-chat-font-size: 1rem; + --tplane-chat-font-size-sm: 0.875rem; + --tplane-chat-font-size-xs: 0.75rem; + --tplane-chat-line-height: 1.5; + --tplane-chat-line-height-tight: 1.25; + + --tplane-chat-radius-card: var(--ds-radius-md); + --tplane-chat-radius-button: var(--ds-radius-sm); + --tplane-chat-radius-bubble: var(--ds-radius-lg); + --tplane-chat-radius-input: var(--ds-radius-lg); + --tplane-chat-radius-launcher: var(--ds-radius-full); + + --tplane-chat-shadow-sm: var(--ds-shadow-sm); + --tplane-chat-shadow-md: var(--ds-shadow-md); + --tplane-chat-shadow-lg: var(--ds-shadow-lg); +} +``` + +- [ ] **Step 4: Run the bridge test** + +Run: + +```bash +npx nx test example-layouts --testFile=theme-bridge.spec.ts +``` + +Expected: PASS. + +- [ ] **Step 5: Build the theme package** + +Run: + +```bash +npx nx build example-layouts +``` + +Expected: PASS. + +Main-agent commit after review: + +```bash +git add libs/example-layouts/src/theme.css libs/example-layouts/src/lib/theme-bridge.spec.ts +git commit -m "feat(example-layouts): expose chat token bridge" +``` + +## Task 2: Deep Agents Bespoke UI + +**Files:** +- Modify all Deep Agents files listed in the File Structure section. + +- [ ] **Step 1: Audit e2e asserted text** + +Run: + +```bash +rg -n "Skill Invocations|No skills invoked yet|File Operations|No file operations yet|Plan|No plan yet|Execution Output|No code executed yet|Delegations|No delegations yet|Learned Facts|No facts learned yet" cockpit/deep-agents/*/angular/e2e +``` + +Expected: note any asserted strings and keep them byte-identical. + +- [ ] **Step 2: Restyle sidebar shells** + +For `skills`, `filesystem`, `planning`, `sandboxes`, `subagents`, and `memory` component templates: + +- Change `sidebarWidth="w-72"` to `sidebarWidth="18rem"` and `sidebarWidth="w-80"` to `sidebarWidth="20rem"`. +- Replace `
` with `