@design.estate/dees-catalog 3.93.0 → 3.94.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.93.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,13 +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`, `todos`/`showTodosPanel`, `heading`, `subheading`, `showToolbar`, `busy`, `queuedCount`, `disabled`, `model`/`modelOptions`, `reasoningEffort`/`effortOptions`, `toolRegistry`.
+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-permission-response`, `harness-new-session`, `harness-open-sessions`.
+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`
 
@@ -1764,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.93.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

@@ -223,6 +223,23 @@ const simulate = (event: MouseEvent) => {
   });
 };
 
+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' },
+      ],
+    },
+  ];
+};
+
 const askPermission = (event: MouseEvent) => {
   const chat = chatOf(event);
   if (!chat) return;
@@ -274,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')}
@@ -289,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>
@@ -297,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,6 +13,7 @@ import type {
   IHarnessAttachment,
   IHarnessMessage,
   IHarnessPermissionRequest,
+  IHarnessQuestionRequest,
   IHarnessStatus,
   IHarnessTodoItem,
   IHarnessUsage,
@@ -22,8 +23,6 @@ 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';
@@ -35,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,
@@ -58,6 +54,10 @@ 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' };
 
@@ -115,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;
 
@@ -166,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 {
@@ -203,32 +214,13 @@ export class DeesHarnessChat extends DeesElement {
         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;
       }
     `,
   ];
@@ -285,7 +277,10 @@ export class DeesHarnessChat extends DeesElement {
       <div class="chatBody">
         <dees-harness-message-list
           .messages=${this.messages}
-          .status=${idleStatus}
+          .permissions=${this.permissions}
+          .permissionsBusy=${this.disabled}
+          .questions=${this.questions}
+          .status=${this.status}
           .showRoles=${this.showRoles}
           .toolRegistry=${this.toolRegistry}
         ></dees-harness-message-list>
@@ -297,22 +292,9 @@ export class DeesHarnessChat extends DeesElement {
             `
           : ''}
       </div>
-      ${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>
       <div class="composerRow">
         <dees-harness-composer
+          docked
           .value=${this.composerValue}
           .attachments=${this.attachments}
           .disabled=${this.disabled}
@@ -322,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 ?? '';
           }}
@@ -332,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>

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

@@ -57,6 +57,15 @@ export class DeesHarnessComposer extends DeesElement {
   @property()
   accessor placeholder: string = 'Message the agent — drop or paste files to attach…';
 
+  /**
+   * Docked composers sit flush against their container edge-to-edge (a
+   * top border instead of the floating card chrome) — used by
+   * dees-harness-chat so the bar meets the transcript and the tasks panel
+   * without a gap.
+   */
+  @property({ type: Boolean, reflect: true })
+  accessor docked: boolean = false;
+
   @property({ type: Boolean })
   accessor disabled: boolean = false;
 
@@ -94,6 +103,16 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ attribute: false })
   accessor effortOptions: string[] = [];
 
+  /**
+   * Agent mode switcher (e.g. Planning / Building). Renders a segmented
+   * control when modeOptions is set; emits harness-mode-change.
+   */
+  @property()
+  accessor mode: string = '';
+
+  @property({ attribute: false })
+  accessor modeOptions: string[] = [];
+
   @property({ type: Boolean })
   accessor showModelControls: boolean = true;
 
@@ -121,6 +140,19 @@ export class DeesHarnessComposer extends DeesElement {
         box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
       }
 
+      :host([docked]) .composer {
+        border: 0;
+        border-top: 1px solid var(--dees-color-border-subtle);
+        border-radius: 0;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
+        box-shadow: var(--dees-shadow-up-sm);
+      }
+
+      :host([docked]) .composer.dragOver {
+        border-top-color: var(--dees-color-accent-primary);
+        box-shadow: inset 0 3px 0 0 var(--dees-color-focus-ring);
+      }
+
       .fileInput {
         display: none;
       }
@@ -214,6 +246,44 @@ export class DeesHarnessComposer extends DeesElement {
         gap: var(--dees-spacing-sm);
       }
 
+      /* segmented mode switcher (Planning / Building) */
+      .modeSwitch {
+        display: inline-flex;
+        flex: 0 0 auto;
+        padding: 2px;
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-fill-secondary);
+      }
+
+      .modeSwitch button {
+        height: calc(var(--dees-control-height-sm) - 4px);
+        padding: 0 10px;
+        border: 0;
+        border-radius: calc(var(--dees-radius-md) - 2px);
+        corner-shape: var(--dees-corner-shape);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 500;
+        transition:
+          background var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .modeSwitch button.active {
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
+        box-shadow: var(--dees-shadow-xs);
+      }
+
+      .modeSwitch button:disabled {
+        cursor: default;
+        opacity: 0.55;
+      }
+
       .modelControls {
         display: flex;
         gap: var(--dees-spacing-xs);
@@ -289,6 +359,26 @@ export class DeesHarnessComposer extends DeesElement {
           >
             <dees-icon icon="lucide:Paperclip" iconSize="14"></dees-icon>
           </dees-button>
+          ${this.modeOptions.length
+            ? html`
+                <div class="modeSwitch" role="radiogroup" aria-label="Agent mode">
+                  ${this.modeOptions.map((option) => html`
+                    <button
+                      type="button"
+                      role="radio"
+                      aria-checked=${option === this.mode ? 'true' : 'false'}
+                      class=${option === this.mode ? 'active' : ''}
+                      ?disabled=${this.disabled}
+                      @click=${() => {
+                        if (this.mode === option) return;
+                        this.mode = option;
+                        this.emit('harness-mode-change', { mode: option });
+                      }}
+                    >${option}</button>
+                  `)}
+                </div>
+              `
+            : ''}
           ${this.showModelControls && (this.modelOptions.length || this.effortOptions.length)
             ? html`
                 <div class="modelControls">
@@ -391,6 +481,15 @@ export class DeesHarnessComposer extends DeesElement {
     if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
       event.preventDefault();
       this.send();
+      return;
+    }
+    // Shift+Tab cycles the agent mode without leaving the prompt
+    if (event.key === 'Tab' && event.shiftKey && this.modeOptions.length) {
+      event.preventDefault();
+      const currentIndex = this.modeOptions.indexOf(this.mode);
+      const nextMode = this.modeOptions[(currentIndex + 1) % this.modeOptions.length];
+      this.mode = nextMode;
+      this.emit('harness-mode-change', { mode: nextMode });
     }
   };