@design.estate/dees-catalog 6.1.0 → 6.3.0

package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.demo.ts

@@ -79,11 +79,482 @@ const pendingPermission: IHarnessPermissionRequest = {
   metadata: { path: '/srv/app/src/jobs/sitemap.job.ts', bytes: 812 },
 };
 
+interface ISubagentScenario {
+  description: string;
+  model: string;
+  toolName: string;
+  toolInput: Record<string, unknown>;
+  toolOutput: unknown;
+  resultChunks: string[];
+  startDelay: number;
+  toolDuration: number;
+  chunkDelay: number;
+}
+
+const firstSubagentWave: ISubagentScenario[] = [
+  {
+    description: 'API contract',
+    model: 'openai/gpt-5.5',
+    toolName: 'read_file',
+    toolInput: { path: '/srv/app/ts_interfaces/harness.ts', startLine: 1, endLine: 220 },
+    toolOutput: 'IHarnessSessionProjection and event contracts loaded.',
+    resultChunks: [
+      'The projection boundary is already runtime-neutral. ',
+      'Child ownership can stay on the session service. ',
+      'Only bounded messages and status need to cross the API. ',
+      'Contract review complete.',
+    ],
+    startDelay: 0,
+    toolDuration: 1_300,
+    chunkDelay: 620,
+  },
+  {
+    description: 'Browser lifecycle',
+    model: 'anthropic/claude-sonnet-4',
+    toolName: 'browser',
+    toolInput: { action: 'snapshot', url: 'http://localhost:3002/harness' },
+    toolOutput: 'Captured active, reconnecting, and completed child-card states.',
+    resultChunks: [
+      'The nested transcript keeps its own scroll boundary. ',
+      'Reconnect restores the content observer without duplicating it. ',
+      'Completed cards return to chronology with DOM identity intact. ',
+      'Browser lifecycle checks pass.',
+    ],
+    startDelay: 240,
+    toolDuration: 1_750,
+    chunkDelay: 700,
+  },
+  {
+    description: 'Regression coverage',
+    model: 'openai/gpt-5.5',
+    toolName: 'run_command',
+    toolInput: { command: 'pnpm exec tstest test/test.harness-subagent-streams.chromium.ts --web', cwd: '/srv/app' },
+    toolOutput: { exitCode: 0, stdout: '11/11 focused Chromium tests passed' },
+    resultChunks: [
+      'Focused coverage exercises nested deltas and grid movement. ',
+      'The projection-only drill-in path resolves correctly. ',
+      'Native overscroll containment is present. ',
+      'Regression coverage is green.',
+    ],
+    startDelay: 480,
+    toolDuration: 2_200,
+    chunkDelay: 760,
+  },
+];
+
+const secondSubagentWave: ISubagentScenario[] = [
+  {
+    description: 'Authorization boundaries',
+    model: 'openai/gpt-5.5',
+    toolName: 'grep',
+    toolInput: { pattern: 'requireSessionAccess', path: '/srv/app/ts' },
+    toolOutput: '8 ownership checks found; all projection routes are guarded.',
+    resultChunks: ['Checked route guards. ', 'Verified parent and child ownership. ', 'No cross-tenant projection path found. ', 'Authorization review complete.'],
+    startDelay: 0,
+    toolDuration: 1_350,
+    chunkDelay: 620,
+  },
+  {
+    description: 'Storage adapters',
+    model: 'anthropic/claude-sonnet-4',
+    toolName: 'read_file',
+    toolInput: { path: '/srv/app/ts/classes.sessionstore.ts', startLine: 80, endLine: 260 },
+    toolOutput: 'Session lookup and bounded transcript paging reviewed.',
+    resultChunks: ['Read the paging path. ', 'Confirmed stable cursor ordering. ', 'Validated truncation metadata. ', 'Storage review complete.'],
+    startDelay: 140,
+    toolDuration: 1_700,
+    chunkDelay: 680,
+  },
+  {
+    description: 'RPC event mapping',
+    model: 'openai/gpt-5.5',
+    toolName: 'read_file',
+    toolInput: { path: '/srv/app/ts_interfaces/events.ts', startLine: 1, endLine: 180 },
+    toolOutput: 'Parent and nested stream event mapping is complete.',
+    resultChunks: ['Mapped child status events. ', 'Mapped tool and reasoning deltas. ', 'Confirmed snapshot recovery after gaps. ', 'RPC event mapping complete.'],
+    startDelay: 280,
+    toolDuration: 1_150,
+    chunkDelay: 740,
+  },
+  {
+    description: 'Mobile layout',
+    model: 'anthropic/claude-sonnet-4',
+    toolName: 'browser',
+    toolInput: { action: 'snapshot', url: 'http://localhost:3002/harness?viewport=phone' },
+    toolOutput: 'Single-column cards and session overlay captured at 390px.',
+    resultChunks: ['Reduced the transcript container. ', 'Confirmed one-column active cards. ', 'Opened the session overlay above the chat. ', 'Mobile layout is stable.'],
+    startDelay: 420,
+    toolDuration: 2_050,
+    chunkDelay: 610,
+  },
+  {
+    description: 'Reconnect behavior',
+    model: 'openai/gpt-5.5',
+    toolName: 'run_command',
+    toolInput: { command: 'pnpm test --filter reconnect', cwd: '/srv/app' },
+    toolOutput: { exitCode: 0, stdout: '6 reconnect scenarios passed' },
+    resultChunks: ['Interrupted the child feed. ', 'Replayed the authoritative snapshot. ', 'Resumed deltas without duplication. ', 'Reconnect behavior passes.'],
+    startDelay: 560,
+    toolDuration: 2_400,
+    chunkDelay: 720,
+  },
+  {
+    description: 'Permission flow',
+    model: 'anthropic/claude-sonnet-4',
+    toolName: 'grep',
+    toolInput: { pattern: 'harness-permission-response', path: '/srv/app/ts_web' },
+    toolOutput: 'Permission responses remain child-session scoped.',
+    resultChunks: ['Traced permission ownership. ', 'Confirmed answered cards persist. ', 'Verified nested requests never leak outward. ', 'Permission flow is correct.'],
+    startDelay: 700,
+    toolDuration: 1_500,
+    chunkDelay: 790,
+  },
+  {
+    description: 'Documentation audit',
+    model: 'openai/gpt-5.5',
+    toolName: 'read_file',
+    toolInput: { path: '/srv/app/readme.md', startLine: 1800, endLine: 1860 },
+    toolOutput: 'Subtask projection, drill-in, and truncation behavior documented.',
+    resultChunks: ['Compared docs with interfaces. ', 'Checked the projection example. ', 'Verified host responsibilities are explicit. ', 'Documentation audit complete.'],
+    startDelay: 840,
+    toolDuration: 1_900,
+    chunkDelay: 650,
+  },
+  {
+    description: 'Bundle impact',
+    model: 'anthropic/claude-sonnet-4',
+    toolName: 'run_command',
+    toolInput: { command: 'pnpm run build', cwd: '/srv/app' },
+    toolOutput: { exitCode: 0, stdout: 'TypeScript and browser bundle completed' },
+    resultChunks: ['Compiled the component graph. ', 'Checked the browser bundle. ', 'Found no runtime-specific dependency. ', 'Bundle verification passes.'],
+    startDelay: 980,
+    toolDuration: 2_600,
+    chunkDelay: 700,
+  },
+  {
+    description: 'Release checklist',
+    model: 'openai/gpt-5.5',
+    toolName: 'webfetch',
+    toolInput: { url: 'https://code.foss.global/design.estate/dees-catalog/raw/branch/main/changelog.md' },
+    toolOutput: 'Release notes include bounded live subagent streams.',
+    resultChunks: ['Reviewed the pending notes. ', 'Matched public API names. ', 'Confirmed verification results are recorded. ', 'Release checklist is ready.'],
+    startDelay: 1_120,
+    toolDuration: 2_150,
+    chunkDelay: 760,
+  },
+];
+
+const createSubagentWave = (
+  runId: number,
+  waveNumber: number,
+  scenarios: ISubagentScenario[],
+): IHarnessMessage[] => {
+  const now = Date.now();
+  return scenarios.map((scenario, index) => {
+    const childSessionId = `demo-${runId}-wave-${waveNumber}-child-${index + 1}`;
+    const childToolId = `${childSessionId}-tool`;
+    return {
+      id: `demo-${runId}-wave-${waveNumber}-subagent-${index + 1}`,
+      role: 'tool' as const,
+      text: '',
+      createdAt: now + index,
+      toolCall: {
+        id: `demo-${runId}-wave-${waveNumber}-call-${index + 1}`,
+        name: 'task',
+        status: 'running' as const,
+        input: { description: scenario.description },
+        childSessionId,
+        model: scenario.model,
+        subtask: {
+          sessionId: childSessionId,
+          previewState: 'ready' as const,
+          status: { type: 'busy' as const, message: `Investigating ${scenario.description.toLowerCase()}…` },
+          messages: [
+            {
+              id: `${childSessionId}-plan`,
+              role: 'assistant' as const,
+              text: `I’ll inspect ${scenario.description.toLowerCase()} and report the concrete result.`,
+              createdAt: now,
+              markdown: false,
+            },
+            {
+              id: childToolId,
+              role: 'tool' as const,
+              text: '',
+              createdAt: now + 1,
+              toolCall: {
+                id: `${childToolId}-call`,
+                name: scenario.toolName,
+                status: 'running' as const,
+                input: scenario.toolInput,
+                startedAt: now,
+              },
+            },
+            {
+              id: `${childSessionId}-result`,
+              role: 'assistant' as const,
+              text: '',
+              createdAt: now + 2,
+              markdown: false,
+              streaming: true,
+            },
+          ],
+        },
+        startedAt: now,
+      },
+    };
+  });
+};
+
 let stopStream: (() => void) | undefined;
 
 const chatOf = (event: MouseEvent): DeesHarnessChat | null =>
   (event.target as HTMLElement).closest('.chatDemo')?.querySelector('dees-harness-chat') ?? null;
 
+const simulateSubagents = (event: MouseEvent): void => {
+  const chat = chatOf(event);
+  if (!chat) return;
+  stopStream?.();
+  const runId = Date.now();
+  let stopped = false;
+  let currentWaveLabel = '';
+  const pendingDelays = new Map<ReturnType<typeof setTimeout>, (continueRun: boolean) => void>();
+  const activeSubagents = new Map<string, IHarnessMessage>();
+  const activeMainMessages = new Set<string>();
+  const activeMainTools = new Set<string>();
+
+  const wait = async (milliseconds: number): Promise<boolean> => new Promise((resolve) => {
+    if (stopped) {
+      resolve(false);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      pendingDelays.delete(timeout);
+      resolve(!stopped);
+    }, milliseconds);
+    pendingDelays.set(timeout, resolve);
+  });
+  const pushMessage = async (message: IHarnessMessage): Promise<boolean> => {
+    chat.messages = [...chat.messages, message];
+    await chat.updateComplete;
+    return !stopped;
+  };
+  const updateWaveStatus = (): void => {
+    if (stopped || !activeSubagents.size) return;
+    chat.status = {
+      type: 'busy',
+      message: `${currentWaveLabel}: ${activeSubagents.size} subagent${activeSubagents.size === 1 ? '' : 's'} still working…`,
+    };
+  };
+  const finishSubagent = (task: IHarnessMessage, status: 'completed' | 'error'): void => {
+    if (!activeSubagents.has(task.id)) return;
+    const call = task.toolCall;
+    const subtask = call?.subtask;
+    if (!call || subtask?.previewState !== 'ready') return;
+    const now = Date.now();
+    chat.applyDelta({
+      type: 'tool-update',
+      messageId: task.id,
+      tool: {
+        id: call.id,
+        status,
+        finishedAt: now,
+        ...(status === 'error' ? { errorText: 'Simulation stopped.' } : {}),
+        subtask: {
+          ...subtask,
+          status: status === 'completed' ? { type: 'idle' } : { type: 'error', message: 'Stopped' },
+          messages: subtask.messages.map((message) => {
+            if (message.toolCall?.status === 'pending' || message.toolCall?.status === 'running') {
+              return {
+                ...message,
+                toolCall: {
+                  ...message.toolCall,
+                  status: status === 'completed' ? 'completed' as const : 'error' as const,
+                  finishedAt: now,
+                  ...(status === 'error' ? { errorText: 'Simulation stopped.' } : {}),
+                },
+              };
+            }
+            if (!message.streaming) return message;
+            return {
+              ...message,
+              streaming: false,
+              ...(status === 'error' ? { error: 'Simulation stopped.' } : {}),
+            };
+          }),
+        },
+      },
+    });
+    activeSubagents.delete(task.id);
+    updateWaveStatus();
+  };
+  const runSubagent = async (task: IHarnessMessage, scenario: ISubagentScenario): Promise<void> => {
+    const subtask = task.toolCall?.subtask;
+    if (subtask?.previewState !== 'ready') return;
+    const childTool = subtask.messages.find((message) => message.toolCall);
+    const childResult = subtask.messages.find((message) => message.streaming);
+    if (!childTool?.toolCall || !childResult) return;
+    if (!await wait(scenario.startDelay)) return;
+    if (!await wait(scenario.toolDuration)) return;
+    chat.applyDelta({
+      type: 'tool-update',
+      parentMessageId: task.id,
+      messageId: childTool.id,
+      tool: {
+        id: childTool.toolCall.id,
+        status: 'completed',
+        output: scenario.toolOutput,
+        finishedAt: Date.now(),
+      },
+    });
+    for (const chunk of scenario.resultChunks) {
+      if (!await wait(scenario.chunkDelay)) return;
+      chat.applyDelta({
+        type: 'text',
+        parentMessageId: task.id,
+        messageId: childResult.id,
+        delta: chunk,
+      });
+    }
+    chat.applyDelta({
+      type: 'message-end',
+      parentMessageId: task.id,
+      messageId: childResult.id,
+    });
+    finishSubagent(task, 'completed');
+  };
+  const runWave = async (
+    waveNumber: number,
+    label: string,
+    scenarios: ISubagentScenario[],
+  ): Promise<boolean> => {
+    currentWaveLabel = label;
+    const tasks = createSubagentWave(runId, waveNumber, scenarios);
+    for (const task of tasks) activeSubagents.set(task.id, task);
+    chat.messages = [...chat.messages, ...tasks];
+    updateWaveStatus();
+    await chat.updateComplete;
+    await Promise.all(tasks.map((task, index) => runSubagent(task, scenarios[index])));
+    return !stopped;
+  };
+  const streamMainMessage = async (text: string): Promise<boolean> => {
+    const messageId = `demo-${runId}-main-${Date.now()}`;
+    const message: IHarnessMessage = {
+      id: messageId,
+      role: 'assistant',
+      text: '',
+      createdAt: Date.now(),
+      markdown: true,
+      streaming: true,
+      model: 'gpt-5.5',
+    };
+    activeMainMessages.add(messageId);
+    if (!await pushMessage(message)) return false;
+    for (let offset = 0; offset < text.length; offset += 18) {
+      if (!await wait(70)) return false;
+      chat.applyDelta({ type: 'text', messageId, delta: text.slice(offset, offset + 18) });
+    }
+    chat.applyDelta({ type: 'message-end', messageId });
+    activeMainMessages.delete(messageId);
+    return true;
+  };
+
+  const stop = (): void => {
+    if (stopped) return;
+    stopped = true;
+    for (const [timeout, resolve] of pendingDelays) {
+      clearTimeout(timeout);
+      resolve(false);
+    }
+    pendingDelays.clear();
+    for (const task of [...activeSubagents.values()]) finishSubagent(task, 'error');
+    for (const messageId of activeMainMessages) {
+      chat.applyDelta({ type: 'message-end', messageId, error: 'Simulation stopped.' });
+    }
+    activeMainMessages.clear();
+    for (const messageId of activeMainTools) {
+      const tool = chat.messages.find((message) => message.id === messageId)?.toolCall;
+      if (!tool) continue;
+      chat.applyDelta({
+        type: 'tool-update',
+        messageId,
+        tool: { id: tool.id, status: 'error', errorText: 'Simulation stopped.', finishedAt: Date.now() },
+      });
+    }
+    activeMainTools.clear();
+    chat.status = { type: 'idle' };
+    if (stopStream === stop) stopStream = undefined;
+  };
+  stopStream = stop;
+
+  const run = async (): Promise<void> => {
+    chat.messages = [...harnessDemoConversation().slice(-2)];
+    chat.permissions = [];
+    chat.questions = [];
+    if (!await runWave(1, 'First wave', firstSubagentWave)) return;
+
+    chat.status = { type: 'busy', message: 'Main thread is reconciling the first wave…' };
+    if (!await wait(520)) return;
+    if (!await streamMainMessage(
+      'The first three reviews agree on the bounded projection. I’m consolidating their findings before widening the verification pass.',
+    )) return;
+
+    const mainToolId = `demo-${runId}-main-checklist`;
+    activeMainTools.add(mainToolId);
+    if (!await pushMessage({
+      id: mainToolId,
+      role: 'tool',
+      text: '',
+      createdAt: Date.now(),
+      toolCall: {
+        id: `${mainToolId}-call`,
+        name: 'todowrite',
+        status: 'running',
+        input: {
+          todos: [
+            { content: 'Reconcile initial contract findings', status: 'completed' },
+            { content: 'Run nine parallel integration reviews', status: 'in_progress' },
+            { content: 'Summarize release readiness', status: 'pending' },
+          ],
+        },
+        startedAt: Date.now(),
+      },
+    })) return;
+    if (!await wait(1_100)) return;
+    chat.applyDelta({
+      type: 'tool-update',
+      messageId: mainToolId,
+      tool: { id: `${mainToolId}-call`, status: 'completed', finishedAt: Date.now() },
+    });
+    activeMainTools.delete(mainToolId);
+    if (!await streamMainMessage(
+      'The core path is sound. I’m launching nine focused subagents across authorization, storage, RPC, responsive UI, reconnects, permissions, docs, bundling, and release readiness.',
+    )) return;
+    if (!await wait(600)) return;
+
+    if (!await runWave(2, 'Integration wave', secondSubagentWave)) return;
+    chat.status = { type: 'busy', message: 'Main thread is assembling the final result…' };
+    if (!await wait(600)) return;
+    if (!await streamMainMessage([
+      'All **nine integration reviews** have completed at their own pace.',
+      '',
+      '- Authorization and permission boundaries remain session-scoped',
+      '- Storage paging and reconnect recovery preserve bounded projections',
+      '- Desktop and mobile layouts retain stable card ownership',
+      '- Documentation, bundle, and release checks are ready',
+      '',
+      'The staged subagent run is complete.',
+    ].join('\n'))) return;
+    chat.status = { type: 'idle' };
+    if (stopStream === stop) stopStream = undefined;
+  };
+
+  void run().catch((error) => {
+    console.error('Harness subagent demo simulation failed.', error);
+    stop();
+  });
+};
+
 /**
  * Streams a realistic turn through planning, inspection, a failing test,
  * the file edit, verification, and the final assistant summary.
@@ -440,19 +911,30 @@ export const demoFunc = () => html`
     .chatDemo {
       display: grid;
       grid-template-rows: auto minmax(0, 1fr);
-      gap: 12px;
-      height: 640px;
-      max-width: 860px;
-      margin: 40px auto;
+      min-height: 0;
+      height: 100%;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+      border: 1px solid var(--dees-color-border-subtle, rgb(128 128 128 / 28%));
+      border-radius: var(--dees-radius-xl, 14px);
+      background: var(--dees-color-bg-primary, inherit);
     }
     .chatDemo .controls {
+      position: relative;
+      z-index: 1;
       display: flex;
+      align-items: center;
       gap: 8px;
       flex-wrap: wrap;
+      padding: var(--dees-spacing-sm, 8px) var(--dees-spacing-md, 12px);
+      border-bottom: 1px solid var(--dees-color-border-subtle, rgb(128 128 128 / 28%));
+      background: var(--dees-color-bg-secondary, rgb(128 128 128 / 12%));
+      box-shadow: var(--dees-shadow-sm, 0 1px 3px rgb(0 0 0 / 16%));
     }
     .chatDemo dees-harness-chat {
-      border: 1px solid var(--dees-color-border-subtle);
-      border-radius: var(--dees-radius-xl);
+      min-width: 0;
+      min-height: 0;
       overflow: hidden;
     }
   </style>
@@ -491,8 +973,9 @@ export const demoFunc = () => html`
       console.log('harness-abort');
     }}
   >
-    <div class="controls">
+    <div class="controls" role="toolbar" aria-label="Demo controls">
       <dees-button type="accent" @clicked=${simulate}>Simulate streaming</dees-button>
+      <dees-button type="accent" @clicked=${simulateSubagents}>Simulate subagents</dees-button>
       <dees-button @clicked=${askPermission}>Ask permission</dees-button>
       <dees-button @clicked=${askQuestion}>Ask a question</dees-button>
       <dees-button @clicked=${toggleError}>Toggle error status</dees-button>

package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.ts

@@ -11,7 +11,9 @@ import {
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
 import type {
+  IHarnessAccountChangeDetail,
   IHarnessAttachment,
+  IHarnessComposerOption,
   IHarnessMessage,
   IHarnessPermissionRequest,
   IHarnessQuestionRequest,
@@ -148,6 +150,12 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  @property()
+  accessor account: string = '';
+
+  @property({ attribute: false })
+  accessor accountOptions: IHarnessComposerOption[] = [];
+
   @property()
   accessor model: string = '';
 
@@ -426,6 +434,7 @@ export class DeesHarnessChat extends DeesElement {
   /** Streams an incremental update into the message list. */
   public applyDelta(delta: THarnessStreamDelta): void {
     this.listElement?.applyDelta(delta);
+    if (!delta.parentMessageId && delta.type === 'tool-update') this.requestUpdate();
   }
 
   public async focusComposer(): Promise<void> {
@@ -481,10 +490,16 @@ export class DeesHarnessChat extends DeesElement {
     return [];
   }
 
+  /** Top-level tool messages still present in the host's retained transcript window. */
+  public get toolActivityMessages(): IHarnessMessage[] {
+    return this.messages.filter((message) => Boolean(message.toolCall));
+  }
+
   public get hasSessionSidebar(): boolean {
     if (!this.showSessionSidebar) return false;
     return (
       (this.showTodosPanel && this.effectiveTodos.length > 0)
+      || this.toolActivityMessages.length > 0
       || Object.values(this.sessionMetrics).some((value) => value !== undefined)
       || this.scratchpad !== undefined
       || this.sessionIntelligenceEnabled
@@ -610,6 +625,8 @@ export class DeesHarnessChat extends DeesElement {
                 <dees-harness-session-sidebar
                   .todos=${this.effectiveTodos}
                   .showTasks=${this.showTodosPanel}
+                  .toolMessages=${this.toolActivityMessages}
+                  .toolRegistry=${this.toolRegistry}
                   .metrics=${this.sessionMetrics}
                   .scratchpad=${this.scratchpad}
                   .scratchpadBusy=${this.scratchpadBusy}
@@ -632,6 +649,8 @@ export class DeesHarnessChat extends DeesElement {
           .disabled=${this.disabled}
           .busy=${this.busy || this.status.type === 'busy'}
           .queuedCount=${this.queuedCount}
+          .account=${this.account}
+          .accountOptions=${this.accountOptions}
           .model=${this.model}
           .modelOptions=${this.modelOptions}
           .reasoningEffort=${this.reasoningEffort}
@@ -644,6 +663,9 @@ export class DeesHarnessChat extends DeesElement {
           @harness-attachments-change=${(event: CustomEvent<{ attachments: IHarnessAttachment[] }>) => {
             this.attachments = event.detail?.attachments ?? [];
           }}
+          @harness-account-change=${(event: CustomEvent<IHarnessAccountChangeDetail>) => {
+            if (event.detail?.account) this.account = event.detail.account;
+          }}
           @harness-model-change=${(event: CustomEvent<{ model?: string; reasoningEffort?: string }>) => {
             if (event.detail?.model) this.model = event.detail.model;
             if (event.detail?.reasoningEffort) this.reasoningEffort = event.detail.reasoningEffort;

package/ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.demo.ts

@@ -29,15 +29,21 @@ export const demoFunc = () => html`
     @harness-input=${logEvent}
     @harness-attachments-change=${logEvent}
     @harness-attachment-error=${logEvent}
+    @harness-account-change=${logEvent}
     @harness-model-change=${logEvent}
     @harness-mode-change=${logEvent}
   >
     <div class="label">default with mode switcher + model controls (events log to console)</div>
     <dees-harness-composer
+      account="account-1"
       model="gpt-5.5"
       reasoningEffort="high"
       mode="Planning"
       .modeOptions=${['Planning', 'Building']}
+      .accountOptions=${[
+        { label: 'Personal · alex@example.com', value: 'account-1' },
+        { label: 'Team · alex@example.com', value: 'account-2' },
+      ]}
       .modelOptions=${['gpt-5.5', 'gpt-5', 'o4-mini']}
       .effortOptions=${['xhigh', 'high', 'medium', 'low']}
     ></dees-harness-composer>