@design.estate/dees-catalog 3.90.1 → 3.92.0

package/ts_web/elements/00group-harness/dees-harness-content-blocks/dees-harness-content-blocks.ts

@@ -0,0 +1,172 @@
+import { demoFunc } from './dees-harness-content-blocks.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { THarnessContentBlock } from '../interfaces.js';
+import { harnessFormatBytes } from '../harness.helpers.js';
+import { harnessMonoStyles } from '../harness.styles.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-content-blocks': DeesHarnessContentBlocks;
+  }
+}
+
+/**
+ * Structural renderer for MCP CallToolResult content blocks: text, image,
+ * audio, embedded resources, and resource links keep their nature instead of
+ * being flattened to strings.
+ */
+@customElement('dees-harness-content-blocks')
+export class DeesHarnessContentBlocks extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor blocks: THarnessContentBlock[] = [];
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    harnessMonoStyles,
+    css`
+      :host {
+        display: grid;
+        gap: var(--dees-spacing-sm);
+        font-family: var(--dees-font-family);
+      }
+
+      .textBlock {
+        color: var(--dees-color-text-primary);
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        font-size: var(--dees-font-control-size-sm, 12px);
+        line-height: 1.5;
+      }
+
+      img {
+        display: block;
+        max-width: 100%;
+        max-height: 420px;
+        border-radius: var(--dees-radius-md);
+        border: 1px solid var(--dees-color-border-subtle);
+      }
+
+      audio {
+        width: 100%;
+      }
+
+      .resourceLink {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
+        text-decoration: none;
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      .resourceLink:hover {
+        background: var(--dees-color-hover);
+      }
+
+      .resourceLink dees-icon {
+        color: var(--dees-color-accent-primary);
+      }
+
+      .resourceInfo {
+        min-width: 0;
+      }
+
+      .resourceName {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 500;
+      }
+
+      .resourceMeta {
+        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;
+      }
+
+      .resourceUri {
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-family: var(--dees-font-family-mono);
+        overflow-wrap: anywhere;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`${this.blocks.map((block) => this.renderBlock(block))}`;
+  }
+
+  private renderBlock(block: THarnessContentBlock): TemplateResult {
+    switch (block.type) {
+      case 'text':
+        return html`<div class="textBlock">${block.text}</div>`;
+      case 'image':
+        return html`<img src=${`data:${block.mimeType};base64,${block.data}`} alt="tool result image" />`;
+      case 'audio':
+        return html`<audio controls src=${`data:${block.mimeType};base64,${block.data}`}></audio>`;
+      case 'resource': {
+        const resource = block.resource;
+        if (resource.text !== undefined) {
+          return html`
+            <div>
+              <div class="resourceUri">${resource.uri}</div>
+              <pre class="harness-mono">${resource.text}</pre>
+            </div>
+          `;
+        }
+        return html`
+          <a
+            class="resourceLink"
+            href=${`data:${resource.mimeType ?? 'application/octet-stream'};base64,${resource.blob ?? ''}`}
+            download
+          >
+            <dees-icon icon="lucide:FileDown" iconSize="16"></dees-icon>
+            <div class="resourceInfo">
+              <div class="resourceName">${resource.uri}</div>
+              <div class="resourceMeta">${resource.mimeType ?? 'binary resource'}</div>
+            </div>
+          </a>
+        `;
+      }
+      case 'resource_link':
+        return html`
+          <a class="resourceLink" href=${block.uri} target="_blank" rel="noopener noreferrer">
+            <dees-icon icon="lucide:Link" iconSize="16"></dees-icon>
+            <div class="resourceInfo">
+              <div class="resourceName">${block.title || block.name}</div>
+              <div class="resourceMeta">
+                ${[block.description, block.mimeType, block.size !== undefined ? harnessFormatBytes(block.size) : '']
+                  .filter(Boolean)
+                  .join(' · ') || block.uri}
+              </div>
+            </div>
+          </a>
+        `;
+      default:
+        return html``;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,129 @@
+import { html } from '@design.estate/dees-element';
+import type { DeesHarnessMessage } from './dees-harness-message.js';
+
+const markdownSample = [
+  '## Findings',
+  '',
+  'The failing test compares against a **stale fixture**. Two options:',
+  '',
+  '1. Regenerate the fixture from the current schema',
+  '2. Pin the schema version in the test setup',
+  '',
+  '| Option | Effort | Risk |',
+  '| --- | --- | --- |',
+  '| Regenerate | low | drifts again |',
+  '| Pin version | medium | stays honest |',
+  '',
+  '```typescript',
+  'const fixture = await loadFixture({ schemaVersion: 3 });',
+  'expect(result).toEqual(fixture);',
+  '```',
+  '',
+  'I recommend pinning — see [the docs](https://example.com/docs).',
+].join('\n');
+
+const streamSource = 'Let me look at the build output. The bundler resolved the entry, but the **css tokens** were emitted twice — once from the theme and once from the component. Deduplicating the emission fixes the double-border artifact you saw.';
+
+const startStreamingDemo = (event: MouseEvent) => {
+  const container = (event.target as HTMLElement).closest('.messageDemo');
+  const target = container?.querySelector<DeesHarnessMessage>('#streamingMessage');
+  if (!target) return;
+  target.message = {
+    id: 'streaming-demo',
+    role: 'assistant',
+    text: '',
+    createdAt: Date.now(),
+    streaming: true,
+  };
+  target.requestUpdate();
+  let offset = 0;
+  const interval = setInterval(() => {
+    const chunk = streamSource.slice(offset, offset + 6);
+    offset += 6;
+    if (!chunk) {
+      clearInterval(interval);
+      target.endStream({ inputTokens: 412, outputTokens: 96, totalTokens: 508 });
+      return;
+    }
+    target.appendTextDelta(chunk);
+  }, 40);
+};
+
+export const demoFunc = () => html`
+  <style>
+    .messageDemo {
+      display: grid;
+      gap: 16px;
+      max-width: 720px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-primary);
+    }
+  </style>
+  <div class="messageDemo">
+    <dees-harness-message
+      .message=${{
+        id: 'u1',
+        role: 'user' as const,
+        text: 'Why does the badge render with a double border in dark mode?',
+        createdAt: Date.now() - 90_000,
+        attachments: [
+          {
+            id: 'a1',
+            name: 'screenshot.png',
+            mediaType: 'image/png',
+            size: 48_213,
+            kind: 'image' as const,
+          },
+          {
+            id: 'a2',
+            name: 'build.log',
+            mediaType: 'text/plain',
+            size: 5_120,
+            kind: 'text' as const,
+            truncated: true,
+          },
+        ],
+      }}
+      showTimestamp
+    ></dees-harness-message>
+    <dees-harness-message
+      .message=${{
+        id: 'a1',
+        role: 'assistant' as const,
+        text: markdownSample,
+        createdAt: Date.now() - 60_000,
+        reasoning: [
+          {
+            id: 'r1',
+            text: 'Compare fixture timestamps against the schema migration dates first.',
+            startedAt: Date.now() - 64_000,
+            endedAt: Date.now() - 61_500,
+          },
+        ],
+        usage: { inputTokens: 1200, outputTokens: 340, totalTokens: 1540 },
+      }}
+    ></dees-harness-message>
+    <dees-harness-message
+      .message=${{
+        id: 'e1',
+        role: 'assistant' as const,
+        text: '',
+        createdAt: Date.now() - 30_000,
+        error: 'The model endpoint returned 429 — retry in 20s.',
+      }}
+    ></dees-harness-message>
+    <dees-button @clicked=${startStreamingDemo}>Simulate streaming</dees-button>
+    <dees-harness-message
+      id="streamingMessage"
+      .message=${{
+        id: 'streaming-demo',
+        role: 'assistant' as const,
+        text: 'Press “Simulate streaming” above.',
+        createdAt: Date.now(),
+        markdown: false,
+      }}
+    ></dees-harness-message>
+  </div>
+`;