@design.estate/dees-catalog 3.92.0 → 3.93.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.92.0",
+  "version": "3.93.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

@@ -1721,7 +1721,9 @@ 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`, `status`, `usage`, `todos`/`showTodosPanel`, `heading`, `subheading`, `showToolbar`, `busy`, `queuedCount`, `disabled`, `model`/`modelOptions`, `reasoningEffort`/`effortOptions`, `toolRegistry`.
+
+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`.
 
 #### `DeesHarnessMessageList`
 

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.93.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,143 @@ 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(),
       },
-    },
-    message.id,
-  );
+    });
+  });
+  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 askPermission = (event: MouseEvent) => {

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

@@ -14,14 +14,17 @@ import type {
   IHarnessMessage,
   IHarnessPermissionRequest,
   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';
@@ -61,6 +64,17 @@ export class DeesHarnessChat extends DeesElement {
   @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 = '';
 
@@ -116,6 +130,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 {
@@ -158,7 +198,7 @@ export class DeesHarnessChat extends DeesElement {
         flex: 0 0 auto;
       }
 
-      dees-harness-message-list {
+      .chatBody dees-harness-message-list {
         flex: 1;
         min-height: 0;
       }
@@ -214,6 +254,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,12 +282,21 @@ 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>
+      <div class="chatBody">
+        <dees-harness-message-list
+          .messages=${this.messages}
+          .status=${idleStatus}
+          .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>
       ${this.permissions.length
         ? html`
             <div class="permissionQueue">