@design.estate/dees-catalog 3.91.0 → 3.93.0

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

@@ -0,0 +1,43 @@
+import { html } from '@design.estate/dees-element';
+import type { IHarnessTodoItem } from '../interfaces.js';
+
+const demoTodos: IHarnessTodoItem[] = [
+  { id: 't1', content: 'Pin sitemap cache key to the route manifest hash', status: 'completed' },
+  { id: 't2', content: 'Add regression test for locale rollouts', status: 'completed' },
+  { id: 't3', content: 'Wire the deploy pipeline to the new cache key', status: 'in_progress' },
+  { id: 't4', content: 'Verify staging deploy timings against baseline', status: 'pending' },
+  { id: 't5', content: 'Roll out to production', status: 'pending' },
+];
+
+export const demoFunc = () => html`
+  <style>
+    .todosDemo {
+      display: grid;
+      grid-template-columns: 280px 1fr;
+      gap: 24px;
+      max-width: 760px;
+      margin: 40px auto;
+      align-items: start;
+    }
+    .todosDemo .sidebarPanel {
+      padding: 12px;
+      border: 1px solid var(--dees-color-border-subtle);
+      border-radius: var(--dees-radius-lg);
+      background: var(--dees-color-bg-secondary);
+    }
+    .todosDemo .empty-panel {
+      padding: 12px;
+      border: 1px solid var(--dees-color-border-subtle);
+      border-radius: var(--dees-radius-lg);
+      background: var(--dees-color-bg-secondary);
+    }
+  </style>
+  <div class="todosDemo">
+    <div class="sidebarPanel">
+      <dees-harness-todos heading="Current tasks" .todos=${demoTodos}></dees-harness-todos>
+    </div>
+    <div class="empty-panel">
+      <dees-harness-todos heading="Current tasks"></dees-harness-todos>
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,206 @@
+import { demoFunc } from './dees-harness-todos.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  cssManager,
+  directives,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessTodoItem } from '../interfaces.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+const { repeat } = directives;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-todos': DeesHarnessTodos;
+  }
+}
+
+/**
+ * Agent task list: renders IHarnessTodoItem[] as a checklist. Used both as
+ * the todo tool-card body and standalone (e.g. a "current tasks" sidebar
+ * panel fed from the latest todowrite call). Keyed rows animate status
+ * changes; completed items dim with a check, the in-progress item leads
+ * with an accent marker.
+ */
+@customElement('dees-harness-todos')
+export class DeesHarnessTodos extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor todos: IHarnessTodoItem[] = [];
+
+  @property()
+  accessor heading: string = '';
+
+  /** tighter paddings for tool-card bodies */
+  @property({ type: Boolean })
+  accessor compact: boolean = false;
+
+  @property({ type: Boolean })
+  accessor showProgress: boolean = true;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--dees-font-family);
+      }
+
+      .headingRow {
+        display: flex;
+        align-items: baseline;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-xs) var(--dees-spacing-xs) var(--dees-spacing-sm);
+      }
+
+      .headingText {
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 600;
+      }
+
+      .progressText {
+        margin-left: auto;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .list {
+        display: block;
+      }
+
+      .item {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--dees-spacing-sm);
+        padding: 3px var(--dees-spacing-xs);
+        border-radius: var(--dees-radius-sm);
+        corner-shape: var(--dees-corner-shape);
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        line-height: 1.45;
+        transition: opacity var(--dees-transition-default) var(--dees-ease-standard);
+      }
+
+      :host([compact]) .item {
+        padding: 2px 0;
+      }
+
+      .marker {
+        flex: 0 0 14px;
+        display: grid;
+        place-items: center;
+        width: 14px;
+        height: 14px;
+        margin-top: 2px;
+        border-radius: var(--dees-radius-full);
+      }
+
+      .item.pending .marker {
+        border: 1.5px solid var(--dees-color-border-strong);
+      }
+
+      .item.in_progress .marker {
+        border: 1.5px solid var(--dees-color-accent-primary);
+      }
+
+      .item.in_progress .marker::after {
+        content: '';
+        width: 6px;
+        height: 6px;
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-color-accent-primary);
+        animation: harness-todo-active 1.4s ease-in-out infinite;
+      }
+
+      @keyframes harness-todo-active {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.45; transform: scale(0.75); }
+      }
+
+      .item.completed .marker {
+        background: var(--dees-color-accent-success);
+        color: #fff;
+      }
+
+      .item.in_progress .content {
+        font-weight: 600;
+      }
+
+      .item.completed {
+        opacity: 0.62;
+      }
+
+      .item.completed .content {
+        text-decoration: line-through;
+        text-decoration-color: var(--dees-color-text-muted);
+      }
+
+      .content {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+
+      .empty {
+        padding: var(--dees-spacing-sm) var(--dees-spacing-xs);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .item.in_progress .marker::after {
+          animation: none;
+        }
+      }
+    `,
+  ];
+
+  public get completedCount(): number {
+    return this.todos.filter((todo) => todo.status === 'completed').length;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${this.heading
+        ? html`
+            <div class="headingRow">
+              <span class="headingText">${this.heading}</span>
+              ${this.showProgress && this.todos.length
+                ? html`<span class="progressText">${this.completedCount}/${this.todos.length}</span>`
+                : ''}
+            </div>
+          `
+        : ''}
+      ${this.todos.length
+        ? html`
+            <div class="list" role="list">
+              ${repeat(
+                this.todos,
+                (todo, index) => todo.id ?? `${index}-${todo.content}`,
+                (todo) => html`
+                  <div class="item ${todo.status}" role="listitem">
+                    <span class="marker">
+                      ${todo.status === 'completed'
+                        ? html`<dees-icon icon="lucide:Check" iconSize="10"></dees-icon>`
+                        : ''}
+                    </span>
+                    <span class="content">${todo.content}</span>
+                  </div>
+                `,
+              )}
+            </div>
+          `
+        : html`<div class="empty">No tasks yet.</div>`}
+    `;
+  }
+}

package/ts_web/elements/00group-harness/dees-harness-todos/index.ts

@@ -0,0 +1 @@
+export * from './dees-harness-todos.js';

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

@@ -0,0 +1,166 @@
+import { html } from '@design.estate/dees-element';
+import type { IHarnessToolCall } from '../interfaces.js';
+
+const now = Date.now();
+
+const demoCalls: IHarnessToolCall[] = [
+  {
+    id: 't1',
+    name: 'run_command',
+    status: 'completed',
+    input: { command: 'pnpm test --filter ui', cwd: '/srv/app' },
+    output: { exitCode: 0, stdout: '212 tests passed\n0 failed', stderr: '' },
+    startedAt: now - 9200,
+    finishedAt: now - 1200,
+  },
+  {
+    id: 't2',
+    name: 'run_command',
+    status: 'error',
+    input: { command: 'pnpm build' },
+    output: { exitCode: 1, stdout: '', stderr: 'error TS2304: Cannot find name `foo`.' },
+    startedAt: now - 5200,
+    finishedAt: now - 4100,
+  },
+  {
+    id: 't3',
+    name: 'read_file',
+    status: 'completed',
+    input: { path: '/srv/app/src/config.ts', startLine: 1, endLine: 6 },
+    output: "export const config = {\n  retries: 3,\n  verbose: false,\n};",
+    startedAt: now - 4000,
+    finishedAt: now - 3900,
+  },
+  {
+    id: 't4',
+    name: 'write_file',
+    status: 'completed',
+    input: {
+      path: '/srv/app/src/config.ts',
+      oldContent: 'export const config = {\n  retries: 3,\n  verbose: false,\n};',
+      content: 'export const config = {\n  retries: 5,\n  timeoutMs: 30_000,\n  verbose: false,\n};',
+    },
+    startedAt: now - 3800,
+    finishedAt: now - 3700,
+  },
+  {
+    id: 't5',
+    name: 'delete_file',
+    status: 'running',
+    input: { path: '/srv/app/tmp/cache.bin' },
+    startedAt: now - 800,
+  },
+  {
+    id: 't6',
+    name: 'list_directory',
+    status: 'completed',
+    input: { path: 'src', recursive: false },
+    output: ['index.ts', 'config.ts', 'jobs/', 'util/'],
+    startedAt: now - 3000,
+    finishedAt: now - 2950,
+  },
+  {
+    id: 't7',
+    name: 'browser',
+    status: 'completed',
+    input: { action: 'screenshot', url: 'https://example.com' },
+    output: {
+      screenshotBase64:
+        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
+    },
+    startedAt: now - 2500,
+    finishedAt: now - 2100,
+  },
+  {
+    id: 't8',
+    name: 'http_get',
+    status: 'completed',
+    input: { url: 'https://api.example.com/status' },
+    output: { status: 'ok', uptimeSeconds: 86_400 },
+    startedAt: now - 2000,
+    finishedAt: now - 1900,
+  },
+  {
+    id: 't9',
+    name: 'grep',
+    status: 'completed',
+    input: { pattern: 'TODO', path: 'src/' },
+    output: 'src/jobs/sitemap.ts:12: // TODO pin cache key\nsrc/util/log.ts:3: // TODO levels',
+    startedAt: now - 1500,
+    finishedAt: now - 1400,
+  },
+  {
+    id: 't10',
+    name: 'todowrite',
+    status: 'completed',
+    input: {
+      todos: [
+        { content: 'Pin sitemap cache key', status: 'completed' },
+        { content: 'Add regression test', status: 'in_progress' },
+        { content: 'Deploy to staging', status: 'pending' },
+      ],
+    },
+    startedAt: now - 1200,
+    finishedAt: now - 1100,
+  },
+  {
+    id: 't11',
+    name: 'kb__lookup_article',
+    status: 'completed',
+    mcp: {
+      serverName: 'kb',
+      toolName: 'lookup_article',
+      annotations: { title: 'Knowledge Lookup', readOnlyHint: true, openWorldHint: true },
+    },
+    input: { query: 'sitemap cache key' },
+    contentBlocks: [
+      { type: 'text', text: 'Found 1 article: “Deterministic sitemap builds”.' },
+      {
+        type: 'resource_link',
+        uri: 'https://kb.example.com/articles/812',
+        name: 'deterministic-sitemap-builds',
+        title: 'Deterministic sitemap builds',
+        mimeType: 'text/html',
+      },
+    ],
+    startedAt: now - 900,
+    finishedAt: now - 700,
+  },
+  {
+    id: 't12',
+    name: 'fleet__restart_service',
+    status: 'completed',
+    mcp: {
+      serverName: 'fleet',
+      toolName: 'restart_service',
+      annotations: { destructiveHint: true, idempotentHint: true },
+    },
+    input: { service: 'sitemap-worker' },
+    structuredContent: { restarted: true, tookMs: 3200 },
+    startedAt: now - 600,
+    finishedAt: now - 300,
+  },
+  {
+    id: 't13',
+    name: 'mystery_tool',
+    status: 'pending',
+    input: { anything: 'goes', level: 3 },
+  },
+];
+
+export const demoFunc = () => html`
+  <style>
+    .toolDemo {
+      display: grid;
+      gap: 12px;
+      max-width: 760px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-primary);
+    }
+  </style>
+  <div class="toolDemo">
+    ${demoCalls.map((call) => html`<dees-harness-tool-card .call=${call}></dees-harness-tool-card>`)}
+  </div>
+`;