@design.estate/dees-catalog 3.91.0 → 3.92.0

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

@@ -0,0 +1,315 @@
+import { demoFunc } from './dees-harness-tool-card.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessToolCall, THarnessContentBlock } from '../interfaces.js';
+import {
+  DeesHarnessToolRegistry,
+  parseMcpName,
+  type IHarnessToolDescriptor,
+  type IHarnessToolRenderHelpers,
+} from '../toolregistry.js';
+import { builtinBodyRenderers } from './renderers.js';
+import { harnessCardStyles, harnessPillStyles, harnessMonoStyles } from '../harness.styles.js';
+import { harnessFormatDuration, harnessTruncate } from '../harness.helpers.js';
+import '../dees-harness-content-blocks/dees-harness-content-blocks.js';
+import '../../00group-dataview/dees-dataview-codebox/dees-dataview-codebox.js';
+import '../../00group-feedback/dees-badge/dees-badge.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-tool-card': DeesHarnessToolCard;
+  }
+}
+
+/**
+ * Tool-call card: shared chrome (icon, label, subtitle, status pill,
+ * duration, MCP badges) with a per-kind body. Bodies come from the built-in
+ * renderer map or a descriptor's custom renderBody; kind resolution goes
+ * through the tool registry.
+ */
+@customElement('dees-harness-tool-card')
+export class DeesHarnessToolCard extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor call: IHarnessToolCall = { id: '', name: '', status: 'pending' };
+
+  @property({ attribute: false })
+  accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
+
+  @state()
+  accessor expanded: boolean | undefined = undefined;
+
+  @state()
+  accessor outputExpanded: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    harnessCardStyles,
+    harnessPillStyles,
+    harnessMonoStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--dees-font-family);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        width: 100%;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-md);
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        font-family: inherit;
+        text-align: left;
+      }
+
+      .header:hover {
+        background: var(--dees-color-hover);
+      }
+
+      .toolIcon {
+        display: grid;
+        place-items: center;
+        width: 22px;
+        flex: 0 0 22px;
+        color: var(--dees-color-text-secondary);
+      }
+
+      .harness-card.status-running .toolIcon,
+      .harness-card.status-pending .toolIcon {
+        color: var(--dees-color-accent-primary);
+      }
+
+      .titleBlock {
+        min-width: 0;
+        flex: 1;
+      }
+
+      .titleRow {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+      }
+
+      .toolLabel {
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 600;
+        white-space: nowrap;
+      }
+
+      .badges {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+      }
+
+      .subtitle {
+        margin-top: 1px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .metaColumn {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        flex: 0 0 auto;
+      }
+
+      .duration {
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption1-size, 11px);
+        white-space: nowrap;
+      }
+
+      .body {
+        display: grid;
+        gap: var(--dees-spacing-sm);
+        padding: 0 var(--dees-spacing-md) var(--dees-spacing-md);
+      }
+
+      .kvGrid {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: 2px var(--dees-spacing-md);
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      .kvKey {
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+      }
+
+      .kvValue {
+        color: var(--dees-color-text-primary);
+        font-family: var(--dees-font-family-mono);
+        overflow-wrap: anywhere;
+      }
+
+      .bodyImage {
+        max-width: 100%;
+        max-height: 420px;
+        border-radius: var(--dees-radius-md);
+        border: 1px solid var(--dees-color-border-subtle);
+      }
+
+      dees-dataview-codebox {
+        font-family: var(--dees-font-family);
+      }
+    `,
+  ];
+
+  private get descriptor(): IHarnessToolDescriptor {
+    return this.toolRegistry.resolve(this.enrichedCall);
+  }
+
+  /** call with mcp meta derived from the name when the adapter didn't set it */
+  private get enrichedCall(): IHarnessToolCall {
+    if (this.call.mcp) return this.call;
+    const parsed = parseMcpName(this.call.name);
+    return parsed ? { ...this.call, mcp: { serverName: parsed.serverName, toolName: parsed.toolName } } : this.call;
+  }
+
+  public get isOpen(): boolean {
+    if (this.expanded !== undefined) return this.expanded;
+    const descriptor = this.descriptor;
+    if (this.call.status === 'error' || this.call.isError) return true;
+    if (typeof descriptor.defaultExpanded === 'function') return descriptor.defaultExpanded(this.enrichedCall);
+    return descriptor.defaultExpanded ?? false;
+  }
+
+  public render(): TemplateResult {
+    const call = this.enrichedCall;
+    const descriptor = this.descriptor;
+    const label = typeof descriptor.label === 'function' ? descriptor.label(call) : descriptor.label;
+    const subtitle = descriptor.subtitle?.(call) ?? '';
+    const statusTone = call.isError ? 'error' : call.status === 'completed' ? 'success' : call.status;
+    const duration = harnessFormatDuration(call.startedAt, call.finishedAt);
+    return html`
+      <div class="harness-card status-${call.isError ? 'error' : call.status} ${descriptor.destructive ? 'destructive' : ''}">
+        <button
+          class="header"
+          type="button"
+          aria-expanded=${this.isOpen ? 'true' : 'false'}
+          @click=${() => {
+            this.expanded = !this.isOpen;
+          }}
+        >
+          <span class="toolIcon"><dees-icon .icon=${descriptor.icon} iconSize="15"></dees-icon></span>
+          <span class="titleBlock">
+            <span class="titleRow">
+              <span class="toolLabel">${label}</span>
+              ${this.renderMcpBadges(call)}
+            </span>
+            ${subtitle ? html`<span class="subtitle" title=${subtitle}>${subtitle}</span>` : ''}
+          </span>
+          <span class="metaColumn">
+            ${duration ? html`<span class="duration">${duration}</span>` : ''}
+            <span class="harness-pill tone-${statusTone}">
+              ${call.isError ? 'error' : call.status}
+            </span>
+          </span>
+        </button>
+        ${this.isOpen ? html`<div class="body">${this.renderBody(call)}</div>` : ''}
+      </div>
+    `;
+  }
+
+  private renderMcpBadges(call: IHarnessToolCall): TemplateResult {
+    if (!call.mcp) return html``;
+    const annotations = call.mcp.annotations;
+    return html`
+      <span class="badges">
+        <dees-badge type="default" .text=${call.mcp.serverName} rounded></dees-badge>
+        ${annotations?.readOnlyHint ? html`<dees-badge type="success" text="read-only" rounded></dees-badge>` : ''}
+        ${annotations?.destructiveHint ? html`<dees-badge type="error" text="destructive" rounded></dees-badge>` : ''}
+        ${annotations?.openWorldHint ? html`<dees-badge type="warning" text="open-world" rounded></dees-badge>` : ''}
+        ${annotations?.idempotentHint ? html`<dees-badge type="default" text="idempotent" rounded></dees-badge>` : ''}
+      </span>
+    `;
+  }
+
+  private renderBody(call: IHarnessToolCall): TemplateResult {
+    const descriptor = this.descriptor;
+    const helpers = this.createHelpers();
+    if (descriptor.renderBody) return descriptor.renderBody(call, helpers);
+    const builtin = builtinBodyRenderers[descriptor.kind] ?? builtinBodyRenderers.unknown;
+    return builtin(call, helpers);
+  }
+
+  private createHelpers(): IHarnessToolRenderHelpers {
+    return {
+      codeBlock: (code, language, filename) => html`
+        <dees-dataview-codebox
+          .progLang=${language ?? 'plaintext'}
+          .filename=${filename ?? ''}
+          .codeToDisplay=${code}
+        ></dees-dataview-codebox>
+      `,
+      diffBlock: (before, after, options) => html`
+        <dees-dataview-codebox
+          .progLang=${options?.language ?? 'plaintext'}
+          .filename=${options?.filename ?? ''}
+          .diffView=${options?.view ?? 'inline'}
+          .codeBefore=${before}
+          .codeToDisplay=${after}
+        ></dees-dataview-codebox>
+      `,
+      monoBlock: (text, options) => {
+        const maxChars = options?.maxChars ?? 6000;
+        const { text: shown, truncated } = harnessTruncate(text, this.outputExpanded ? Number.MAX_SAFE_INTEGER : maxChars);
+        return html`
+          <pre class="harness-mono ${options?.tone === 'error' ? 'tone-error' : ''}">${shown}${truncated ? '…' : ''}</pre>
+          ${truncated
+            ? html`
+                <button
+                  class="harness-mono-expand"
+                  type="button"
+                  @click=${() => {
+                    this.outputExpanded = true;
+                  }}
+                >
+                  Show all
+                </button>
+              `
+            : ''}
+        `;
+      },
+      keyValues: (pairs) => html`
+        <div class="kvGrid">
+          ${pairs.map(([key, value]) => html`
+            <div class="kvKey">${key}</div>
+            <div class="kvValue">${value}</div>
+          `)}
+        </div>
+      `,
+      contentBlocks: (blocks: THarnessContentBlock[]) => html`
+        <dees-harness-content-blocks .blocks=${blocks}></dees-harness-content-blocks>
+      `,
+      image: (dataBase64, mimeType, alt) => html`
+        <img class="bodyImage" src=${`data:${mimeType};base64,${dataBase64}`} alt=${alt ?? 'tool output image'} />
+      `,
+    };
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './dees-harness-tool-card.js';
+export * from './renderers.js';

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

@@ -0,0 +1,205 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { IHarnessToolCall } from '../interfaces.js';
+import type { IHarnessToolRenderHelpers } from '../toolregistry.js';
+import {
+  harnessIsRecord,
+  harnessLanguageForPath,
+  harnessParseTodos,
+  harnessStringifyValue,
+  harnessSummarizeValue,
+} from '../harness.helpers.js';
+import '../dees-harness-todos/dees-harness-todos.js';
+
+/**
+ * Built-in tool-card bodies, one per registry kind. Kept as render functions
+ * (not elements): they share the card chrome and differ only in body markup.
+ * Custom tools override via IHarnessToolDescriptor.renderBody.
+ */
+
+const inputRecord = (call: IHarnessToolCall): Record<string, unknown> =>
+  harnessIsRecord(call.input) ? call.input : {};
+
+const outputText = (call: IHarnessToolCall): string => {
+  if (call.errorText) return call.errorText;
+  return harnessStringifyValue(call.output);
+};
+
+const filePathOf = (call: IHarnessToolCall): string => {
+  const input = inputRecord(call);
+  return String(input.path ?? input.filePath ?? input.file ?? '');
+};
+
+const renderTerminal = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const input = inputRecord(call);
+  const command = String(input.command ?? '');
+  const output = call.output;
+  let stdout = '';
+  let stderr = '';
+  let exitCode: number | undefined;
+  if (harnessIsRecord(output)) {
+    stdout = typeof output.stdout === 'string' ? output.stdout : harnessStringifyValue(output.stdout ?? '');
+    stderr = typeof output.stderr === 'string' ? output.stderr : '';
+    exitCode = typeof output.exitCode === 'number' ? output.exitCode : undefined;
+  } else {
+    stdout = harnessStringifyValue(output);
+  }
+  return html`
+    ${command ? helpers.monoBlock(`$ ${command}`) : ''}
+    ${stdout ? helpers.monoBlock(stdout) : ''}
+    ${stderr ? helpers.monoBlock(stderr, { tone: 'error' }) : ''}
+    ${call.errorText ? helpers.monoBlock(call.errorText, { tone: 'error' }) : ''}
+    ${exitCode !== undefined
+      ? helpers.keyValues([['exit code', String(exitCode)]])
+      : ''}
+  `;
+};
+
+const renderFileRead = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const path = filePathOf(call);
+  const content = outputText(call);
+  if (!content) return helpers.keyValues([['file', path || '—']]);
+  return helpers.codeBlock(content, harnessLanguageForPath(path), path.split('/').pop() || undefined);
+};
+
+const renderFileWrite = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const input = inputRecord(call);
+  const path = filePathOf(call);
+  const newContent = String(input.content ?? input.newContent ?? '');
+  const previousContent = String(input.oldContent ?? input.originalContent ?? input.before ?? '');
+  const filename = path.split('/').pop() || undefined;
+  const language = harnessLanguageForPath(path);
+  if (previousContent) {
+    return helpers.diffBlock(previousContent, newContent, { language, filename });
+  }
+  if (newContent) {
+    return helpers.codeBlock(newContent, language, filename);
+  }
+  return html`
+    ${helpers.keyValues([['file', path || '—']])}
+    ${outputText(call) ? helpers.monoBlock(outputText(call)) : ''}
+  `;
+};
+
+const renderFileDelete = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  return html`
+    ${helpers.keyValues([['file', filePathOf(call) || '—']])}
+    ${outputText(call) ? helpers.monoBlock(outputText(call), call.status === 'error' ? { tone: 'error' } : undefined) : ''}
+  `;
+};
+
+const renderDirList = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const output = call.output;
+  const entries = Array.isArray(output)
+    ? output.map((entry) => String(entry))
+    : outputText(call).split('\n').filter(Boolean);
+  return helpers.monoBlock(entries.join('\n'));
+};
+
+const renderBrowser = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const input = inputRecord(call);
+  const action = String(input.action ?? 'snapshot');
+  const pairs: Array<[string, string]> = [['action', action]];
+  if (input.url) pairs.push(['url', String(input.url)]);
+  if (input.selector) pairs.push(['selector', String(input.selector)]);
+  const output = call.output;
+  let screenshotBase64 = '';
+  if (harnessIsRecord(output)) {
+    screenshotBase64 = String(output.screenshotBase64 ?? output.screenshot ?? output.dataBase64 ?? '');
+  }
+  const script = String(input.script ?? '');
+  return html`
+    ${helpers.keyValues(pairs)}
+    ${script ? helpers.codeBlock(script, 'javascript') : ''}
+    ${screenshotBase64 ? helpers.image(screenshotBase64, 'image/png', 'browser screenshot') : ''}
+    ${!screenshotBase64 && outputText(call) ? helpers.monoBlock(outputText(call)) : ''}
+  `;
+};
+
+const renderHttp = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const input = inputRecord(call);
+  const pairs: Array<[string, string]> = [];
+  if (input.url) pairs.push(['url', String(input.url)]);
+  const body = input.body !== undefined ? harnessStringifyValue(input.body) : '';
+  const response = outputText(call);
+  return html`
+    ${pairs.length ? helpers.keyValues(pairs) : ''}
+    ${body ? helpers.codeBlock(body, 'json') : ''}
+    ${response ? helpers.codeBlock(response, 'json') : ''}
+  `;
+};
+
+const renderJson = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const input = inputRecord(call);
+  const source = String(input.jsonString ?? '');
+  return html`
+    ${source ? helpers.codeBlock(source, 'json') : ''}
+    ${outputText(call) ? helpers.monoBlock(outputText(call), call.isError || call.status === 'error' ? { tone: 'error' } : undefined) : ''}
+  `;
+};
+
+const renderSearch = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const summary = harnessSummarizeValue(call.input);
+  return html`
+    ${summary ? helpers.monoBlock(summary) : ''}
+    ${outputText(call) ? helpers.monoBlock(outputText(call)) : ''}
+  `;
+};
+
+const renderSubtask = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const input = inputRecord(call);
+  const prompt = String(input.prompt ?? input.description ?? '');
+  return html`
+    ${prompt ? helpers.monoBlock(prompt) : ''}
+    ${outputText(call) ? helpers.monoBlock(outputText(call)) : ''}
+  `;
+};
+
+const renderTodo = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const todos = harnessParseTodos(call.input);
+  if (!todos.length) return helpers.monoBlock(harnessSummarizeValue(call.input) || outputText(call));
+  return html`<dees-harness-todos compact .todos=${todos}></dees-harness-todos>`;
+};
+
+const renderMcp = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  return html`
+    ${call.contentBlocks?.length ? helpers.contentBlocks(call.contentBlocks) : ''}
+    ${call.structuredContent !== undefined
+      ? helpers.codeBlock(harnessStringifyValue(call.structuredContent), 'json')
+      : ''}
+    ${!call.contentBlocks?.length && call.structuredContent === undefined && outputText(call)
+      ? helpers.monoBlock(outputText(call), call.isError ? { tone: 'error' } : undefined)
+      : ''}
+    ${call.input !== undefined && harnessSummarizeValue(call.input)
+      ? helpers.monoBlock(harnessSummarizeValue(call.input))
+      : ''}
+  `;
+};
+
+const renderUnknown = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const inputSummary = harnessSummarizeValue(call.input);
+  const inputJson = !inputSummary && call.input !== undefined ? harnessStringifyValue(call.input) : '';
+  return html`
+    ${inputSummary ? helpers.monoBlock(inputSummary) : ''}
+    ${inputJson ? helpers.codeBlock(inputJson, 'json') : ''}
+    ${outputText(call) ? helpers.monoBlock(outputText(call), call.status === 'error' ? { tone: 'error' } : undefined) : ''}
+  `;
+};
+
+export const builtinBodyRenderers: Record<
+  string,
+  (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers) => TemplateResult
+> = {
+  'terminal': renderTerminal,
+  'file-read': renderFileRead,
+  'file-write': renderFileWrite,
+  'file-delete': renderFileDelete,
+  'dir-list': renderDirList,
+  'browser': renderBrowser,
+  'http': renderHttp,
+  'json': renderJson,
+  'search': renderSearch,
+  'subtask': renderSubtask,
+  'todo': renderTodo,
+  'mcp': renderMcp,
+  'unknown': renderUnknown,
+};

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

@@ -0,0 +1,25 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .usageDemo {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      max-width: 520px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-secondary);
+    }
+  </style>
+  <div class="usageDemo">
+    <dees-harness-usage
+      .usage=${{ inputTokens: 1840, outputTokens: 310, totalTokens: 2150, cacheReadTokens: 1200 }}
+    ></dees-harness-usage>
+    <dees-harness-usage
+      compact
+      .usage=${{ inputTokens: 152_000, outputTokens: 9_400, totalTokens: 161_400 }}
+    ></dees-harness-usage>
+  </div>
+`;

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

@@ -0,0 +1,96 @@
+import { demoFunc } from './dees-harness-usage.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessUsage } from '../interfaces.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-usage': DeesHarnessUsage;
+  }
+}
+
+const formatTokenCount = (count?: number): string => {
+  if (!count) return '0';
+  if (count < 1000) return String(count);
+  if (count < 1_000_000) return `${(count / 1000).toFixed(count < 10_000 ? 1 : 0)}k`;
+  return `${(count / 1_000_000).toFixed(1)}M`;
+};
+
+/**
+ * Token-usage chip. Compact mode shows only the total; the full mode shows
+ * in/out/total. Cache read/write detail lives in the tooltip.
+ */
+@customElement('dees-harness-usage')
+export class DeesHarnessUsage extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor usage: IHarnessUsage = {};
+
+  @property({ type: Boolean })
+  accessor compact: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+        font-family: var(--dees-font-family);
+      }
+
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        padding: 2px 10px;
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-color-fill-secondary);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        white-space: nowrap;
+        cursor: default;
+      }
+
+      .total {
+        color: var(--dees-color-text-primary);
+        font-weight: 600;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const usage = this.usage;
+    if (!usage.totalTokens && !usage.inputTokens && !usage.outputTokens) return html``;
+    const total = usage.totalTokens ?? (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0);
+    const tooltip = [
+      `input: ${usage.inputTokens ?? 0}`,
+      `output: ${usage.outputTokens ?? 0}`,
+      `total: ${total}`,
+      usage.cacheReadTokens ? `cache read: ${usage.cacheReadTokens}` : '',
+      usage.cacheWriteTokens ? `cache write: ${usage.cacheWriteTokens}` : '',
+    ].filter(Boolean).join('\n');
+    return html`
+      <span class="chip" title=${tooltip}>
+        ${this.compact
+          ? html`<span class="total">${formatTokenCount(total)}</span> tokens`
+          : html`
+              <span>${formatTokenCount(usage.inputTokens)} in</span>
+              <span>·</span>
+              <span>${formatTokenCount(usage.outputTokens)} out</span>
+              <span>·</span>
+              <span class="total">${formatTokenCount(total)}</span>
+            `}
+      </span>
+    `;
+  }
+}

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

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