@design.estate/dees-catalog 3.92.0 → 3.94.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.92.0",
+  "version": "3.94.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

package/readme.md

@@ -64,7 +64,7 @@ For developers working on this library, please refer to the [UI Components Playb
 | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
 | **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
 | **Workspace / IDE** | [`DeesWorkspace`](#deesworkspace), [`DeesWorkspaceMonaco`](#deesworkspacemonaco), [`DeesWorkspaceDiffEditor`](#deesworkspacediffeditor), [`DeesWorkspaceFiletree`](#deesworkspacefiletree), [`DeesWorkspaceTerminal`](#deesworkspaceterminal), [`DeesWorkspaceTerminalPreview`](#deesworkspaceterminalpreview), [`DeesWorkspaceMarkdown`](#deesworkspacemarkdown), [`DeesWorkspaceMarkdownoutlet`](#deesworkspacemarkdownoutlet), [`DeesWorkspaceBottombar`](#deesworkspacebottombar) |
-| **Agentic Chat** | [`DeesHarnessChat`](#deesharnesschat), [`DeesHarnessMessageList`](#deesharnessmessagelist), [`DeesHarnessMessage`](#deesharnessmessage), [`DeesHarnessReasoning`](#deesharnessreasoning), [`DeesHarnessToolCard`](#deesharnesstoolcard), [`DeesHarnessContentBlocks`](#deesharnesscontentblocks), [`DeesHarnessPermissionCard`](#deesharnesspermissioncard), [`DeesHarnessComposer`](#deesharnesscomposer), [`DeesHarnessStatus`](#deesharnessstatus), [`DeesHarnessTodos`](#deesharnesstodos), [`DeesHarnessUsage`](#deesharnessusage), [`DeesHarnessSessionList`](#deesharnesssessionlist) |
+| **Agentic Chat** | [`DeesHarnessChat`](#deesharnesschat), [`DeesHarnessMessageList`](#deesharnessmessagelist), [`DeesHarnessMessage`](#deesharnessmessage), [`DeesHarnessReasoning`](#deesharnessreasoning), [`DeesHarnessToolCard`](#deesharnesstoolcard), [`DeesHarnessContentBlocks`](#deesharnesscontentblocks), [`DeesHarnessPermissionCard`](#deesharnesspermissioncard), [`DeesHarnessQuestionCard`](#deesharnessquestioncard), [`DeesHarnessComposer`](#deesharnesscomposer), [`DeesHarnessStatus`](#deesharnessstatus), [`DeesHarnessTodos`](#deesharnesstodos), [`DeesHarnessUsage`](#deesharnessusage), [`DeesHarnessSessionList`](#deesharnesssessionlist) |
 | **Theming** | [`DeesTheme`](#deestheme), [`DeesUpdater`](#deesupdater) |
 | **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
 | **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
@@ -1699,7 +1699,7 @@ The `00group-harness` family renders what an agent harness produces — streamin
 
 #### `DeesHarnessChat`
 
-The assembled chat: optional toolbar (heading, usage chip, history/new-session buttons), streaming message list, pinned permission queue, status line, and composer.
+The assembled chat: optional toolbar (heading, usage chip, history/new-session buttons), streaming message list with inline permission cards, transcript status line, and docked composer.
 
 ```typescript
 const chat = document.querySelector('dees-harness-chat');
@@ -1721,11 +1721,13 @@ chat.applyDelta({ type: 'text', messageId: 'm1', delta: 'chunk' });
 chat.applyDelta({ type: 'message-end', messageId: 'm1', usage: { totalTokens: 1200 } });
 ```
 
-Key props: `messages`, `permissions`, `status`, `usage`, `heading`, `subheading`, `showToolbar`, `busy`, `queuedCount`, `disabled`, `model`/`modelOptions`, `reasoningEffort`/`effortOptions`, `toolRegistry`. Methods: `applyDelta()`, `focusComposer()`, `clearComposer()`, `scrollToBottom()`. Events (also from children, all composed): `harness-send`, `harness-steer`, `harness-abort`, `harness-input`, `harness-attachments-change`, `harness-attachment-error`, `harness-model-change`, `harness-permission-response`, `harness-new-session`, `harness-open-sessions`.
+Key props: `messages`, `permissions`, `questions`, `status`, `usage`, `todos`/`showTodosPanel`, `heading`, `subheading`, `showToolbar`, `busy`, `queuedCount`, `disabled`, `model`/`modelOptions`, `reasoningEffort`/`effortOptions`, `mode`/`modeOptions`, `toolRegistry`. The status line renders inside the transcript column (it never pushes between the Tasks panel and the composer), and both the toolbar and the docked composer cast a subtle shadow over the scrolling messages.
+
+A **Tasks side panel** (OpenCode-style) shows the current todo list next to the transcript: set `.todos` explicitly, or leave it empty and the chat derives it from the newest todo tool call in `messages`. The panel hides itself in narrow containers (< 520px) where the transcript's todo cards carry the same information; `showTodosPanel={false}` disables it entirely. Methods: `applyDelta()`, `focusComposer()`, `clearComposer()`, `scrollToBottom()`. Events (also from children, all composed): `harness-send`, `harness-steer`, `harness-abort`, `harness-input`, `harness-attachments-change`, `harness-attachment-error`, `harness-model-change`, `harness-mode-change`, `harness-permission-response`, `harness-question-response`, `harness-new-session`, `harness-open-sessions`.
 
 #### `DeesHarnessMessageList`
 
-Scrollable streaming-safe log. Keyed repeat by `message.id` keeps DOM identity stable; `applyDelta()` routes updates to the affected message element only. Auto-follows the bottom while pinned; otherwise raises a "Jump to latest" chip instead of yanking the scroll. Props: `messages`, `status`, `autoFollow`, `showRoles`, `showTimestamps`, `emptyTitle`/`emptyText` (+ `slot="empty"`).
+Scrollable streaming-safe log. Keyed repeat keeps DOM identity stable; `applyDelta()` routes updates to the affected message element only. Auto-follows the bottom while pinned; otherwise raises a "Jump to latest" chip instead of yanking the scroll. Permission requests and agent questions render inline in the flow, and while pinned the list follows content growth frame-by-frame (ResizeObserver), so a new box growing into place and the scroll move as one motion. Props: `messages`, `permissions`/`permissionsBusy`, `questions`, `status`, `autoFollow`, `showRoles`, `showTimestamps`, `emptyTitle`/`emptyText` (+ `slot="empty"`).
 
 #### `DeesHarnessMessage`
 
@@ -1762,12 +1764,20 @@ Renders MCP `CallToolResult` content structurally: text, base64 images, audio wi
 
 Permission prompt: title, type badge (shell/delete → error tone, write/browser → warning), metadata key/values, Allow Once / Always Allow / Reject, and a "remember" checkbox (`always` implies remember). Emits `harness-permission-response`; disables itself once answered or while `busy`.
 
+Inside the chat, permission cards render **inline with the messages**: pending requests pin to the end of the transcript (action required), and answered ones freeze at their response time in the flow. Set `response`/`respondedAt` on the request after handling it and keep it in the array — the card stays in the transcript showing what was granted or rejected.
+
+#### `DeesHarnessQuestionCard`
+
+A question the agent asks mid-run: option buttons with descriptions (single-select answers on click; `multiSelect` collects then confirms) plus an optional free-text answer (`allowCustom`, default on — Enter or "Send Answer" submits, combining selections with the text). Emits `harness-question-response` with `{ requestId, answers, request }`. Questions flow through `dees-harness-chat`'s `questions` property and render inline like permissions: pending ones pin to the end of the transcript, and answered ones persist showing the chosen answers once the host sets `response`/`respondedAt`.
+
 #### `DeesHarnessComposer`
 
 Prompt input: autogrow textarea, attachment picker/paste/drag-drop with per-file (10 MB) and total (30 MB) limits and MIME allowlist, optional model + reasoning-effort dropdowns, Cmd/Ctrl+Enter to send. Controlled component — the host owns `value` and `attachments`.
 
 While `busy`, Stop renders as an additional button and Send stays available so hosts can queue messages. With an empty prompt and `queuedCount > 0`, the primary action becomes **Steer now** (`harness-steer` event) to force the agent to continue with the queued messages immediately.
 
+Set `modeOptions` (e.g. `['Planning', 'Building']`) to render a segmented **mode switcher**; the active `mode` changes on click — or **Shift+Tab** inside the prompt cycles it — and emits `harness-mode-change`. Inside `dees-harness-chat` the composer renders `docked` — flush edge-to-edge with a top border and an upward shadow (`--dees-shadow-up-sm`) so it meets the transcript and the Tasks panel like the toolbar does; standalone composers keep the floating-card chrome.
+
 #### `DeesHarnessTodos`
 
 Agent task list for `IHarnessTodoItem[]` — completed items dim with a check and strikethrough, the in-progress item leads with a pulsing accent marker, and an optional heading shows `completed/total` progress. Used automatically as the todo tool-card body (`harnessParseTodos` normalizes tool input shapes) and standalone for a "current tasks" sidebar panel fed from the latest `todowrite` call.

package/readme.playbook.md

@@ -439,7 +439,7 @@ Components that render continuously arriving data (agent chat, logs) follow the
 - **Props are the source of truth; deltas are the fast path.** The host owns the array (e.g. `.messages`). Incremental updates go through `applyDelta()`, which mutates the same object instance held in the array and calls `requestUpdate()` on the one affected child element. A later wholesale re-assignment of the array is therefore idempotent — no divergence between streamed and re-set state.
 - **Keyed `repeat` for identity.** List children render via `directives.repeat` keyed by a stable id so streaming never recreates sibling DOM (which would drop scroll position, expansion state, and selection).
 - **Cheap while streaming, rich when done.** While `streaming` is set, text renders as pre-wrap with a cursor; expensive work (markdown parse) is throttled (≥150 ms, token-guarded like the codebox highlight pattern) and syntax highlighting waits for the final parse.
-- **Scroll follow with user override.** Auto-scroll only when the user is already pinned to the bottom (`scrollHeight - scrollTop - clientHeight < threshold`); otherwise show a "jump to latest" chip. Schedule follow-scrolls through a single pending `requestAnimationFrame`, cancelled in `disconnectedCallback`.
+- **Scroll follow with user override.** Auto-scroll only when the user is already pinned to the bottom (`scrollHeight - scrollTop - clientHeight < threshold`); otherwise show a "jump to latest" chip. While pinned, a content change opens a short follow window and a `ResizeObserver` on the scroll content re-pins the bottom on every layout change (post-layout, pre-paint), so a growing box and the scroll move as one motion; an external upward scroll ends the window before the next pin so following never fights the user. Disconnect the observer in `disconnectedCallback`.
 - **Interaction state lives on the child.** Expand/collapse (reasoning, tool cards) is element-local state seeded from data (`expanded ?? isStreaming`), so parent re-renders can't reset what the user opened.
 
 ## Performance Optimization

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.92.0',
+  version: '3.94.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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

@@ -1,7 +1,7 @@
 import { html } from '@design.estate/dees-element';
 import type { DeesHarnessChat } from './dees-harness-chat.js';
 import type { IHarnessMessage, IHarnessPermissionRequest } from '../interfaces.js';
-import { harnessDemoConversation, makeStreamingSimulator } from '../harness.demodata.js';
+import { harnessDemoConversation } from '../harness.demodata.js';
 
 const toolShowcase = (): IHarnessMessage[] => {
   const now = Date.now();
@@ -84,30 +84,160 @@ let stopStream: (() => void) | undefined;
 const chatOf = (event: MouseEvent): DeesHarnessChat | null =>
   (event.target as HTMLElement).closest('.chatDemo')?.querySelector('dees-harness-chat') ?? null;
 
+/**
+ * Streams a realistic turn: reasoning, a todo write, a test run, a file
+ * edit rendered as a diff, then the streamed summary text.
+ */
 const simulate = (event: MouseEvent) => {
   const chat = chatOf(event);
   if (!chat) return;
   stopStream?.();
-  const message: IHarnessMessage = {
-    id: `stream-${Date.now()}`,
-    role: 'assistant',
-    text: '',
-    createdAt: Date.now(),
-    streaming: true,
+  const runId = Date.now();
+  const cancels: Array<() => void> = [];
+  const at = (ms: number, action: () => void) => {
+    const timeout = setTimeout(action, ms);
+    cancels.push(() => clearTimeout(timeout));
   };
-  chat.messages = [...chat.messages, message];
-  chat.status = { type: 'busy', message: 'Responding…' };
-  stopStream = makeStreamingSimulator(
-    {
-      applyDelta: (delta) => {
-        chat.applyDelta(delta);
-        if (delta.type === 'message-end') {
-          chat.status = { type: 'idle' };
-        }
+  stopStream = () => {
+    for (const cancel of cancels) cancel();
+    chat.status = { type: 'idle' };
+  };
+  const pushMessage = (message: IHarnessMessage) => {
+    chat.messages = [...chat.messages, message];
+  };
+  const updateTool = (messageId: string, tool: Partial<IHarnessMessage['toolCall']> & { id: string }) => {
+    chat.applyDelta({ type: 'tool-update', messageId, tool: tool as never });
+  };
+
+  chat.status = { type: 'busy', message: 'Planning…' };
+
+  // 1) reasoning streams first
+  const reasoningMessage: IHarnessMessage = {
+    id: `sim-${runId}-reasoning`, role: 'assistant', text: '', createdAt: Date.now(), streaming: true,
+  };
+  pushMessage(reasoningMessage);
+  chat.applyDelta({ type: 'reasoning-start', messageId: reasoningMessage.id, partId: 'r1', startedAt: Date.now() });
+  const reasoningText = 'The cache key includes the locale list, so every rollout re-crawls. Plan: track the fix as todos, run the tests, then pin the key to the route manifest.';
+  reasoningText.split(' ').forEach((word, index) => {
+    at(80 + index * 45, () => chat.applyDelta({ type: 'reasoning', messageId: reasoningMessage.id, partId: 'r1', delta: word + ' ' }));
+  });
+  const reasoningDoneAt = 80 + reasoningText.split(' ').length * 45 + 150;
+  at(reasoningDoneAt, () => {
+    chat.applyDelta({ type: 'reasoning-end', messageId: reasoningMessage.id, partId: 'r1', endedAt: Date.now() });
+    chat.applyDelta({ type: 'message-end', messageId: reasoningMessage.id });
+  });
+
+  // 2) todo write
+  const todoId = `sim-${runId}-todos`;
+  at(reasoningDoneAt + 300, () => {
+    chat.status = { type: 'busy', message: 'Updating task list…' };
+    pushMessage({
+      id: todoId, role: 'tool', text: '', createdAt: Date.now(),
+      toolCall: {
+        id: `${todoId}-call`, name: 'todowrite', status: 'running',
+        input: { todos: [
+          { content: 'Pin sitemap cache key to route manifest hash', status: 'in_progress' },
+          { content: 'Run the sitemap test suite', status: 'pending' },
+          { content: 'Apply the cache-key patch', status: 'pending' },
+          { content: 'Verify staging timings', status: 'pending' },
+        ] },
+        startedAt: Date.now(),
       },
+    });
+  });
+  at(reasoningDoneAt + 1000, () => updateTool(todoId, { id: `${todoId}-call`, status: 'completed', finishedAt: Date.now() }));
+
+  // 3) test run
+  const testId = `sim-${runId}-test`;
+  at(reasoningDoneAt + 1400, () => {
+    chat.status = { type: 'busy', message: 'Running tests…' };
+    pushMessage({
+      id: testId, role: 'tool', text: '', createdAt: Date.now(),
+      toolCall: {
+        id: `${testId}-call`, name: 'run_command', status: 'running',
+        input: { command: 'pnpm test --filter sitemap', cwd: '/srv/app' },
+        startedAt: Date.now(),
+      },
+    });
+  });
+  at(reasoningDoneAt + 3200, () => updateTool(testId, {
+    id: `${testId}-call`, status: 'completed',
+    output: { exitCode: 0, stdout: '14 tests passed\n0 failed' },
+    finishedAt: Date.now(),
+  }));
+
+  // 4) file edit rendered as a diff
+  const editId = `sim-${runId}-edit`;
+  at(reasoningDoneAt + 3600, () => {
+    chat.status = { type: 'busy', message: 'Applying the patch…' };
+    pushMessage({
+      id: editId, role: 'tool', text: '', createdAt: Date.now(),
+      toolCall: {
+        id: `${editId}-call`, name: 'write_file', status: 'running',
+        input: {
+          path: '/srv/app/src/jobs/sitemap.job.ts',
+          oldContent: 'const cacheKey = hash(locales);\nconst ttl = 3600;',
+          content: 'const cacheKey = hash(routeManifest);\nconst ttl = 3600;',
+        },
+        startedAt: Date.now(),
+      },
+    });
+  });
+  at(reasoningDoneAt + 4600, () => updateTool(editId, { id: `${editId}-call`, status: 'completed', finishedAt: Date.now() }));
+
+  // 5) updated todos, then the streamed summary
+  const todoDoneId = `sim-${runId}-todos-2`;
+  at(reasoningDoneAt + 5000, () => {
+    pushMessage({
+      id: todoDoneId, role: 'tool', text: '', createdAt: Date.now(),
+      toolCall: {
+        id: `${todoDoneId}-call`, name: 'todowrite', status: 'completed',
+        input: { todos: [
+          { content: 'Pin sitemap cache key to route manifest hash', status: 'completed' },
+          { content: 'Run the sitemap test suite', status: 'completed' },
+          { content: 'Apply the cache-key patch', status: 'completed' },
+          { content: 'Verify staging timings', status: 'in_progress' },
+        ] },
+        startedAt: Date.now(), finishedAt: Date.now(),
+      },
+    });
+  });
+  const summaryId = `sim-${runId}-summary`;
+  at(reasoningDoneAt + 5400, () => {
+    chat.status = { type: 'busy', message: 'Responding…' };
+    pushMessage({ id: summaryId, role: 'assistant', text: '', createdAt: Date.now(), streaming: true });
+    const summary = 'Patched `sitemap.job.ts` to key the cache on the **route manifest hash** — tests pass (14/14). Staging verification is the last open task.';
+    let offset = 0;
+    const interval = setInterval(() => {
+      const chunk = summary.slice(offset, offset + 6);
+      offset += 6;
+      if (!chunk) {
+        clearInterval(interval);
+        chat.applyDelta({ type: 'message-end', messageId: summaryId, usage: { inputTokens: 2100, outputTokens: 260, totalTokens: 2360 } });
+        chat.status = { type: 'idle' };
+        return;
+      }
+      chat.applyDelta({ type: 'text', messageId: summaryId, delta: chunk });
+    }, 40);
+    cancels.push(() => clearInterval(interval));
+  });
+};
+
+const askQuestion = (event: MouseEvent) => {
+  const chat = chatOf(event);
+  if (!chat) return;
+  chat.questions = [
+    ...chat.questions,
+    {
+      id: `question-${Date.now()}`,
+      question: 'Which cache-key strategy should I roll out?',
+      createdAt: Date.now(),
+      options: [
+        { label: 'Route manifest hash', description: 'Deterministic, invalidates on route changes' },
+        { label: 'Content hash', description: 'Fine-grained, more churn' },
+      ],
     },
-    message.id,
-  );
+  ];
 };
 
 const askPermission = (event: MouseEvent) => {
@@ -161,9 +291,23 @@ export const demoFunc = () => html`
       console.log('harness-permission-response', event.detail);
       const chat = (event.target as HTMLElement).closest('.chatDemo')?.querySelector('dees-harness-chat');
       if (chat) {
-        setTimeout(() => {
-          chat.permissions = chat.permissions.filter((request) => request.id !== event.detail.requestId);
-        }, 600);
+        // answered cards stay in the transcript showing the outcome
+        chat.permissions = chat.permissions.map((request) =>
+          request.id === event.detail.requestId
+            ? { ...request, response: event.detail.response, respondedAt: Date.now() }
+            : request,
+        );
+      }
+    }}
+    @harness-question-response=${(event: CustomEvent) => {
+      console.log('harness-question-response', event.detail);
+      const chat = (event.target as HTMLElement).closest('.chatDemo')?.querySelector('dees-harness-chat');
+      if (chat) {
+        chat.questions = chat.questions.map((request) =>
+          request.id === event.detail.requestId
+            ? { ...request, response: event.detail.answers, respondedAt: Date.now() }
+            : request,
+        );
       }
     }}
     @harness-new-session=${() => console.log('harness-new-session')}
@@ -176,6 +320,7 @@ export const demoFunc = () => html`
     <div class="controls">
       <dees-button type="accent" @clicked=${simulate}>Simulate streaming</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>
       <dees-button type="ghost" @clicked=${resetChat}>Reset</dees-button>
     </div>
@@ -184,6 +329,8 @@ export const demoFunc = () => html`
       subheading="acme-app · main · connected"
       model="gpt-5.5"
       reasoningEffort="high"
+      mode="Building"
+      .modeOptions=${['Planning', 'Building']}
       .modelOptions=${['gpt-5.5', 'gpt-5', 'o4-mini']}
       .effortOptions=${['xhigh', 'high', 'medium', 'low']}
       .usage=${{ inputTokens: 18_400, outputTokens: 3_100, totalTokens: 21_500 }}

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

@@ -13,15 +13,17 @@ import type {
   IHarnessAttachment,
   IHarnessMessage,
   IHarnessPermissionRequest,
+  IHarnessQuestionRequest,
   IHarnessStatus,
+  IHarnessTodoItem,
   IHarnessUsage,
   THarnessStreamDelta,
 } from '../interfaces.js';
+import { harnessParseTodos } from '../harness.helpers.js';
 import { DeesHarnessToolRegistry } from '../toolregistry.js';
 import { DeesHarnessMessageList } from '../dees-harness-message-list/dees-harness-message-list.js';
 import { DeesHarnessComposer } from '../dees-harness-composer/dees-harness-composer.js';
-import '../dees-harness-permission-card/dees-harness-permission-card.js';
-import '../dees-harness-status/dees-harness-status.js';
+import '../dees-harness-todos/dees-harness-todos.js';
 import '../dees-harness-usage/dees-harness-usage.js';
 import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
@@ -32,9 +34,6 @@ declare global {
   }
 }
 
-// stable idle binding for the embedded list — a fresh object literal per
-// render would re-trigger its follow logic on every chat render
-const idleStatus: IHarnessStatus = { type: 'idle' };
 
 /**
  * The assembled agent chat: optional toolbar, streaming message list,
@@ -55,12 +54,27 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor permissions: IHarnessPermissionRequest[] = [];
 
+  /** agent questions render inline like permissions; answered ones persist */
+  @property({ attribute: false })
+  accessor questions: IHarnessQuestionRequest[] = [];
+
   @property({ attribute: false })
   accessor status: IHarnessStatus = { type: 'idle' };
 
   @property({ attribute: false })
   accessor usage: IHarnessUsage = {};
 
+  /**
+   * Current task list for the side panel. When empty, the panel derives it
+   * from the newest todo tool call in `messages` (registry kind 'todo'), so
+   * hosts that stream todowrite calls get the sidebar for free.
+   */
+  @property({ attribute: false })
+  accessor todos: IHarnessTodoItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showTodosPanel: boolean = true;
+
   @property()
   accessor heading: string = '';
 
@@ -101,6 +115,13 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor effortOptions: string[] = [];
 
+  /** agent mode switcher (e.g. Planning / Building); empty hides it */
+  @property()
+  accessor mode: string = '';
+
+  @property({ attribute: false })
+  accessor modeOptions: string[] = [];
+
   @property({ attribute: false })
   accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
 
@@ -116,6 +137,32 @@ export class DeesHarnessChat extends DeesElement {
         font-family: var(--dees-font-family);
         color: var(--dees-color-text-primary);
         background: var(--dees-color-bg-primary);
+        container-type: inline-size;
+      }
+
+      .chatBody {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+      }
+
+      .todosPanel {
+        flex: 0 0 232px;
+        min-width: 0;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border-left: 1px solid var(--dees-color-border-subtle);
+        background: var(--dees-color-bg-secondary);
+      }
+
+      /* narrow hosts (e.g. a sidebar chat) drop the panel; todo tool cards
+         in the transcript still carry the same information */
+      @container (max-width: 520px) {
+        .todosPanel {
+          display: none;
+        }
       }
 
       .toolbar {
@@ -126,6 +173,10 @@ export class DeesHarnessChat extends DeesElement {
         padding: var(--dees-spacing-sm) var(--dees-spacing-md);
         border-bottom: 1px solid var(--dees-color-border-subtle);
         background: var(--dees-color-bg-secondary);
+        /* chrome floats above the scrolling transcript */
+        position: relative;
+        z-index: 1;
+        box-shadow: var(--dees-shadow-sm);
       }
 
       .headingBlock {
@@ -158,37 +209,18 @@ export class DeesHarnessChat extends DeesElement {
         flex: 0 0 auto;
       }
 
-      dees-harness-message-list {
+      .chatBody dees-harness-message-list {
         flex: 1;
         min-height: 0;
       }
 
-      .permissionQueue {
-        flex: 0 0 auto;
-        display: block;
-        padding: 0 var(--dees-spacing-md);
-        max-height: 40%;
-        overflow-y: auto;
-      }
-
-      .permissionQueue > * + * {
-        margin-top: var(--dees-spacing-xs);
-      }
-
-      /* always mounted so the status leave transition can play; the status
-         element renders empty when idle, collapsing the row to zero height */
-      .statusRow {
-        flex: 0 0 auto;
-        padding: 0 var(--dees-spacing-md);
-      }
-
-      .statusRow dees-harness-status {
-        margin: 0;
-      }
-
+      /* the composer docks edge-to-edge like the toolbar, so the tasks
+         panel's border meets its top border cleanly; z-order keeps its
+         upward shadow above the transcript */
       .composerRow {
         flex: 0 0 auto;
-        padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
+        position: relative;
+        z-index: 1;
       }
     `,
   ];
@@ -214,6 +246,19 @@ export class DeesHarnessChat extends DeesElement {
     this.listElement?.scrollToBottom(force);
   }
 
+  public get effectiveTodos(): IHarnessTodoItem[] {
+    if (this.todos.length) return this.todos;
+    // the newest todo call is the current state — an empty write clears
+    // the panel instead of falling back to an older list
+    for (let index = this.messages.length - 1; index >= 0; index--) {
+      const call = this.messages[index]?.toolCall;
+      if (!call) continue;
+      if (this.toolRegistry.resolve(call).kind !== 'todo') continue;
+      return harnessParseTodos(call.input);
+    }
+    return [];
+  }
+
   private get listElement(): DeesHarnessMessageList | undefined {
     const element = this.shadowRoot?.querySelector('dees-harness-message-list');
     return element instanceof DeesHarnessMessageList ? element : undefined;
@@ -229,28 +274,27 @@ export class DeesHarnessChat extends DeesElement {
   public render(): TemplateResult {
     return html`
       ${this.showToolbar ? this.renderToolbar() : ''}
-      <dees-harness-message-list
-        .messages=${this.messages}
-        .status=${idleStatus}
-        .showRoles=${this.showRoles}
-        .toolRegistry=${this.toolRegistry}
-      ></dees-harness-message-list>
-      ${this.permissions.length
-        ? html`
-            <div class="permissionQueue">
-              ${this.permissions.map(
-                (request) => html`
-                  <dees-harness-permission-card .request=${request} .busy=${this.disabled}></dees-harness-permission-card>
-                `,
-              )}
-            </div>
-          `
-        : ''}
-      <div class="statusRow">
-        <dees-harness-status .status=${this.status}></dees-harness-status>
+      <div class="chatBody">
+        <dees-harness-message-list
+          .messages=${this.messages}
+          .permissions=${this.permissions}
+          .permissionsBusy=${this.disabled}
+          .questions=${this.questions}
+          .status=${this.status}
+          .showRoles=${this.showRoles}
+          .toolRegistry=${this.toolRegistry}
+        ></dees-harness-message-list>
+        ${this.showTodosPanel && this.effectiveTodos.length
+          ? html`
+              <aside class="todosPanel">
+                <dees-harness-todos heading="Tasks" .todos=${this.effectiveTodos}></dees-harness-todos>
+              </aside>
+            `
+          : ''}
       </div>
       <div class="composerRow">
         <dees-harness-composer
+          docked
           .value=${this.composerValue}
           .attachments=${this.attachments}
           .disabled=${this.disabled}
@@ -260,6 +304,8 @@ export class DeesHarnessChat extends DeesElement {
           .modelOptions=${this.modelOptions}
           .reasoningEffort=${this.reasoningEffort}
           .effortOptions=${this.effortOptions}
+          .mode=${this.mode}
+          .modeOptions=${this.modeOptions}
           @harness-input=${(event: CustomEvent<{ value: string }>) => {
             this.composerValue = event.detail?.value ?? '';
           }}
@@ -270,6 +316,9 @@ export class DeesHarnessChat extends DeesElement {
             if (event.detail?.model) this.model = event.detail.model;
             if (event.detail?.reasoningEffort) this.reasoningEffort = event.detail.reasoningEffort;
           }}
+          @harness-mode-change=${(event: CustomEvent<{ mode?: string }>) => {
+            if (event.detail?.mode) this.mode = event.detail.mode;
+          }}
         ></dees-harness-composer>
       </div>
     `;

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

@@ -30,11 +30,14 @@ export const demoFunc = () => html`
     @harness-attachments-change=${logEvent}
     @harness-attachment-error=${logEvent}
     @harness-model-change=${logEvent}
+    @harness-mode-change=${logEvent}
   >
-    <div class="label">default with model controls (events log to console)</div>
+    <div class="label">default with mode switcher + model controls (events log to console)</div>
     <dees-harness-composer
       model="gpt-5.5"
       reasoningEffort="high"
+      mode="Planning"
+      .modeOptions=${['Planning', 'Building']}
       .modelOptions=${['gpt-5.5', 'gpt-5', 'o4-mini']}
       .effortOptions=${['xhigh', 'high', 'medium', 'low']}
     ></dees-harness-composer>