@design.estate/dees-catalog 4.12.0 → 6.0.0

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

@@ -1,6 +1,6 @@
 import { html } from '@design.estate/dees-element';
 import type { DeesHarnessChat } from './dees-harness-chat.js';
-import type { IHarnessMessage, IHarnessPermissionRequest } from '../interfaces.js';
+import type { IHarnessMessage, IHarnessPermissionRequest, IHarnessToolCall } from '../interfaces.js';
 import { harnessDemoConversation } from '../harness.demodata.js';
 
 const toolShowcase = (): IHarnessMessage[] => {
@@ -85,53 +85,167 @@ 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.
+ * Streams a realistic turn through planning, inspection, a failing test,
+ * the file edit, verification, and the final assistant summary.
  */
 const simulate = (event: MouseEvent) => {
   const chat = chatOf(event);
   if (!chat) return;
   stopStream?.();
   const runId = Date.now();
-  const cancels: Array<() => void> = [];
-  const at = (ms: number, action: () => void) => {
-    const timeout = setTimeout(action, ms);
-    cancels.push(() => clearTimeout(timeout));
-  };
-  stopStream = () => {
-    for (const cancel of cancels) cancel();
-    chat.status = { type: 'idle' };
+  let stopped = false;
+  const pendingDelays = new Map<ReturnType<typeof setTimeout>, (continueRun: boolean) => void>();
+  const activeMessages = new Set<string>();
+  const activeTools = new Set<string>();
+  const activeReasoning = new Map<string, 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 waitForMessageList = async (): Promise<void> => {
+    await chat.updateComplete;
+    const list = chat.shadowRoot?.querySelector('dees-harness-message-list') as (
+      HTMLElement & { updateComplete: Promise<unknown> }
+    ) | null;
+    if (list) await list.updateComplete;
   };
-  const pushMessage = (message: IHarnessMessage) => {
+  const pushMessage = async (message: IHarnessMessage): Promise<boolean> => {
     chat.messages = [...chat.messages, message];
+    if (message.streaming) activeMessages.add(message.id);
+    if (message.toolCall?.status === 'pending' || message.toolCall?.status === 'running') {
+      activeTools.add(message.id);
+    }
+    await waitForMessageList();
+    if (!stopped) return true;
+    if (message.streaming) {
+      message.streaming = false;
+      message.error ??= 'Simulation stopped.';
+    }
+    if (message.toolCall?.status === 'pending' || message.toolCall?.status === 'running') {
+      message.toolCall.status = 'error';
+      message.toolCall.errorText = 'Simulation stopped.';
+      message.toolCall.finishedAt = Date.now();
+    }
+    chat.messages = [...chat.messages];
+    return false;
   };
-  const updateTool = (messageId: string, tool: Partial<IHarnessMessage['toolCall']> & { id: string }) => {
-    chat.applyDelta({ type: 'tool-update', messageId, tool: tool as never });
+  const updateTool = (messageId: string, tool: Partial<IHarnessToolCall> & { id: string }) => {
+    chat.applyDelta({ type: 'tool-update', messageId, tool });
+    if (tool.status === 'completed' || tool.status === 'error') activeTools.delete(messageId);
+  };
+  const startReasoning = (messageId: string, partId: string): void => {
+    chat.applyDelta({ type: 'reasoning-start', messageId, partId, startedAt: Date.now() });
+    const parts = activeReasoning.get(messageId) ?? new Set<string>();
+    parts.add(partId);
+    activeReasoning.set(messageId, parts);
+  };
+  const endReasoning = (messageId: string, partId: string): void => {
+    chat.applyDelta({ type: 'reasoning-end', messageId, partId, endedAt: Date.now() });
+    const parts = activeReasoning.get(messageId);
+    parts?.delete(partId);
+    if (!parts?.size) activeReasoning.delete(messageId);
+  };
+  const finishMessage = (
+    messageId: string,
+    options: { usage?: IHarnessMessage['usage']; error?: string } = {},
+  ): void => {
+    chat.applyDelta({
+      type: 'message-end',
+      messageId,
+      usage: options.usage,
+      error: options.error,
+    });
+    activeMessages.delete(messageId);
+  };
+  const streamWords = async (
+    messageId: string,
+    partId: string,
+    text: string,
+  ): Promise<boolean> => {
+    for (const word of text.split(' ')) {
+      if (!await wait(38)) return false;
+      chat.applyDelta({ type: 'reasoning', messageId, partId, delta: `${word} ` });
+    }
+    return true;
+  };
+  const streamText = async (messageId: string, text: string): Promise<boolean> => {
+    for (let offset = 0; offset < text.length; offset += 8) {
+      if (!await wait(32)) return false;
+      chat.applyDelta({ type: 'text', messageId, delta: text.slice(offset, offset + 8) });
+    }
+    return true;
   };
 
-  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,
+  const stop = (): void => {
+    if (stopped) return;
+    stopped = true;
+    for (const [timeout, resolve] of pendingDelays) {
+      clearTimeout(timeout);
+      resolve(false);
+    }
+    pendingDelays.clear();
+    for (const [messageId, parts] of [...activeReasoning]) {
+      for (const partId of [...parts]) endReasoning(messageId, partId);
+    }
+    for (const messageId of [...activeMessages]) {
+      finishMessage(messageId, { error: 'Simulation stopped.' });
+    }
+    for (const messageId of [...activeTools]) {
+      const message = chat.messages.find((candidate) => candidate.id === messageId);
+      if (!message?.toolCall) continue;
+      updateTool(messageId, {
+        id: message.toolCall.id,
+        status: 'error',
+        errorText: 'Simulation stopped.',
+        finishedAt: Date.now(),
+      });
+    }
+    chat.status = { type: 'idle' };
+    if (stopStream === stop) stopStream = undefined;
   };
-  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 });
-  });
+  stopStream = stop;
+
+  const run = async (): Promise<void> => {
+    chat.status = { type: 'busy', message: 'Planning…' };
+    const reasoningId = `sim-${runId}-reasoning`;
+    if (!await pushMessage({
+      id: reasoningId,
+      role: 'assistant',
+      text: '',
+      createdAt: Date.now(),
+      streaming: true,
+      model: 'gpt-5.5',
+      effort: 'high',
+    })) return;
+    startReasoning(reasoningId, 'analysis');
+    if (!await streamWords(
+      reasoningId,
+      'analysis',
+      'The locale list participates in the cache key, so a rollout invalidates every route even when the manifest is unchanged.',
+    )) return;
+    endReasoning(reasoningId, 'analysis');
+    if (!await wait(160)) return;
+    startReasoning(reasoningId, 'plan');
+    if (!await streamWords(
+      reasoningId,
+      'plan',
+      'I will inspect the job, pin the key to the route manifest, run the focused regression test, and update the task list.',
+    )) return;
+    endReasoning(reasoningId, 'plan');
+    finishMessage(reasoningId);
 
-  // 2) todo write
-  const todoId = `sim-${runId}-todos`;
-  at(reasoningDoneAt + 300, () => {
+    if (!await wait(260)) return;
     chat.status = { type: 'busy', message: 'Updating task list…' };
-    pushMessage({
+    const todoId = `sim-${runId}-todos`;
+    if (!await pushMessage({
       id: todoId, role: 'tool', text: '', createdAt: Date.now(),
       toolCall: {
         id: `${todoId}-call`, name: 'todowrite', status: 'running',
@@ -143,34 +257,58 @@ const simulate = (event: MouseEvent) => {
         ] },
         startedAt: Date.now(),
       },
+    })) return;
+    if (!await wait(520)) return;
+    updateTool(todoId, { id: `${todoId}-call`, status: 'completed', finishedAt: Date.now() });
+
+    if (!await wait(240)) return;
+    chat.status = { type: 'busy', message: 'Inspecting the sitemap job…' };
+    const readId = `sim-${runId}-read`;
+    if (!await pushMessage({
+      id: readId, role: 'tool', text: '', createdAt: Date.now(),
+      toolCall: {
+        id: `${readId}-call`, name: 'read_file', status: 'running',
+        input: { path: '/srv/app/src/jobs/sitemap.job.ts', startLine: 1, endLine: 80 },
+        startedAt: Date.now(),
+      },
+    })) return;
+    if (!await wait(620)) return;
+    updateTool(readId, {
+      id: `${readId}-call`,
+      status: 'completed',
+      output: 'const cacheKey = hash(locales);\nconst ttl = 3600;\nawait cache.set(cacheKey, sitemap, ttl);',
+      finishedAt: 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({
+    if (!await wait(240)) return;
+    chat.status = { type: 'busy', message: 'Running the regression test…' };
+    const testId = `sim-${runId}-test`;
+    if (!await 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(),
       },
+    })) return;
+    if (!await wait(520)) return;
+    updateTool(testId, {
+      id: `${testId}-call`,
+      status: 'running',
+      output: { stdout: '13 tests passed\n1 test still running…' },
+    });
+    if (!await wait(620)) return;
+    updateTool(testId, {
+      id: `${testId}-call`, status: 'error', isError: true,
+      output: { exitCode: 1, stdout: '13 tests passed', stderr: 'cache key changed after locale reorder' },
+      errorText: 'Regression confirmed before applying the patch.',
+      finishedAt: 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, () => {
+    if (!await wait(260)) return;
     chat.status = { type: 'busy', message: 'Applying the patch…' };
-    pushMessage({
+    const editId = `sim-${runId}-edit`;
+    if (!await pushMessage({
       id: editId, role: 'tool', text: '', createdAt: Date.now(),
       toolCall: {
         id: `${editId}-call`, name: 'write_file', status: 'running',
@@ -181,14 +319,31 @@ const simulate = (event: MouseEvent) => {
         },
         startedAt: Date.now(),
       },
+    })) return;
+    if (!await wait(720)) return;
+    updateTool(editId, { id: `${editId}-call`, status: 'completed', finishedAt: Date.now() });
+
+    if (!await wait(240)) return;
+    chat.status = { type: 'busy', message: 'Verifying the patch…' };
+    const verifyId = `sim-${runId}-verify`;
+    if (!await pushMessage({
+      id: verifyId, role: 'tool', text: '', createdAt: Date.now(),
+      toolCall: {
+        id: `${verifyId}-call`, name: 'run_command', status: 'running',
+        input: { command: 'pnpm test --filter sitemap', cwd: '/srv/app' },
+        startedAt: Date.now(),
+      },
+    })) return;
+    if (!await wait(760)) return;
+    updateTool(verifyId, {
+      id: `${verifyId}-call`, status: 'completed',
+      output: { exitCode: 0, stdout: '14 tests passed\n0 failed' },
+      finishedAt: 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({
+    if (!await wait(220)) return;
+    const todoDoneId = `sim-${runId}-todos-2`;
+    if (!await pushMessage({
       id: todoDoneId, role: 'tool', text: '', createdAt: Date.now(),
       toolCall: {
         id: `${todoDoneId}-call`, name: 'todowrite', status: 'completed',
@@ -196,30 +351,47 @@ const simulate = (event: MouseEvent) => {
           { 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' },
+          { content: 'Verify staging timings', status: 'completed' },
         ] },
         startedAt: Date.now(), finishedAt: Date.now(),
       },
-    });
-  });
-  const summaryId = `sim-${runId}-summary`;
-  at(reasoningDoneAt + 5400, () => {
+    })) return;
+
+    if (!await wait(260)) return;
     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 summaryId = `sim-${runId}-summary`;
+    if (!await pushMessage({
+      id: summaryId,
+      role: 'assistant',
+      text: '',
+      createdAt: Date.now(),
+      streaming: true,
+      model: 'gpt-5.5',
+      effort: 'high',
+    })) return;
+    const summary = [
+      'Patched `sitemap.job.ts` so the cache is keyed by the **route manifest hash** instead of locale ordering.',
+      '',
+      '### Verification',
+      '',
+      '- Confirmed the regression before the edit',
+      '- Applied the one-line cache-key change',
+      '- Re-ran the focused suite: **14/14 tests passed**',
+      '- Completed the staging timing check',
+      '',
+      'Locale-only rollouts now reuse the existing sitemap cache.',
+    ].join('\n');
+    if (!await streamText(summaryId, summary)) return;
+    finishMessage(summaryId, {
+      usage: { inputTokens: 2480, outputTokens: 340, totalTokens: 2820 },
+    });
+    chat.status = { type: 'idle' };
+    if (stopStream === stop) stopStream = undefined;
+  };
+
+  void run().catch((error) => {
+    console.error('Harness chat demo simulation failed.', error);
+    stop();
   });
 };
 
@@ -310,8 +482,10 @@ export const demoFunc = () => html`
         );
       }
     }}
-    @harness-new-session=${() => console.log('harness-new-session')}
-    @harness-open-sessions=${() => console.log('harness-open-sessions')}
+    @harness-scratchpad-save=${(event: CustomEvent) => console.log('harness-scratchpad-save', event.detail)}
+    @harness-session-intelligence-ask=${(event: CustomEvent) => {
+      console.log('harness-session-intelligence-ask', event.detail);
+    }}
     @harness-abort=${() => {
       stopStream?.();
       console.log('harness-abort');
@@ -334,6 +508,30 @@ export const demoFunc = () => html`
       .modelOptions=${['gpt-5.5', 'gpt-5', 'o4-mini']}
       .effortOptions=${['xhigh', 'high', 'medium', 'low']}
       .usage=${{ inputTokens: 18_400, outputTokens: 3_100, totalTokens: 21_500 }}
+      .sessionMetrics=${{
+        lifetimeUsedTokens: 184_320,
+        compactionCount: 2,
+        tokensBeforeLatestCompaction: 112_840,
+        currentContextTokens: 47_200,
+        maxContextTokens: 128_000,
+      }}
+      .scratchpad=${{
+        id: 'deploy-assistant-demo',
+        text: '- Cache keys use the route manifest hash.\n- Release after staging verification.',
+        revision: 4,
+        updatedAt: Date.now() - 45_000,
+        updatedBy: 'intelligence',
+      }}
+      .sessionIntelligenceEnabled=${true}
+      .intelligenceExchanges=${[{
+        id: 'intelligence-demo',
+        question: 'What remains before release?',
+        answer: 'Staging verification is the only remaining task.',
+        status: 'completed',
+        model: 'gpt-5.6-luna',
+        createdAt: Date.now() - 30_000,
+        completedAt: Date.now() - 28_000,
+      }]}
       .messages=${[...harnessDemoConversation(), ...toolShowcase()]}
     ></dees-harness-chat>
   </div>