@design.estate/dees-catalog 3.90.1 → 3.92.0

package/ts_web/elements/00group-harness/harness.demodata.ts

@@ -0,0 +1,113 @@
+/**
+ * Shared demo fixtures for the harness group. Pure data plus a small
+ * streaming simulator used by the demos to exercise the delta fast path.
+ * Tool-call and MCP fixtures grow with the tool-card components.
+ */
+import type { IHarnessMessage, THarnessStreamDelta } from './interfaces.js';
+
+export const harnessDemoMarkdown = [
+  '## Deploy summary',
+  '',
+  'The pipeline finished in **4m 12s** — one job regressed:',
+  '',
+  '| job | duration | baseline |',
+  '| --- | --- | --- |',
+  '| build | 61s | 58s |',
+  '| tests | 122s | 119s |',
+  '| sitemap | 41s | 13s |',
+  '',
+  '```typescript',
+  "const cacheKey = hash(routeManifest); // pin to manifest, not locale",
+  '```',
+  '',
+  'Recommendation: pin the sitemap cache key to the route manifest hash.',
+].join('\n');
+
+export const harnessDemoConversation = (): IHarnessMessage[] => [
+  {
+    id: 'demo-u1',
+    role: 'user',
+    text: 'Summarize the last deploy and flag anything that regressed.',
+    createdAt: Date.now() - 420_000,
+    attachments: [
+      { id: 'demo-att1', name: 'deploy.log', mediaType: 'text/plain', size: 18_432, kind: 'text', truncated: true },
+    ],
+  },
+  {
+    id: 'demo-a1',
+    role: 'assistant',
+    text: harnessDemoMarkdown,
+    createdAt: Date.now() - 400_000,
+    reasoning: [
+      {
+        id: 'demo-r1',
+        text: 'Compare job timings against the previous three runs; anything above 2× baseline is a regression worth naming.',
+        startedAt: Date.now() - 415_000,
+        endedAt: Date.now() - 411_000,
+      },
+    ],
+    usage: { inputTokens: 1840, outputTokens: 310, totalTokens: 2150 },
+  },
+  {
+    id: 'demo-u2',
+    role: 'user',
+    text: 'Prepare the cache-key patch please.',
+    createdAt: Date.now() - 300_000,
+  },
+];
+
+export interface IHarnessStreamSimulatorTarget {
+  applyDelta(delta: THarnessStreamDelta): void;
+}
+
+/**
+ * Streams a canned reply into a target (message list or chat) through the
+ * delta fast path. Returns a stop function. The caller adds the (initially
+ * empty, streaming) message to the target's `.messages` first.
+ */
+export const makeStreamingSimulator = (
+  target: IHarnessStreamSimulatorTarget,
+  messageId: string,
+  options: { intervalMs?: number; chunkSize?: number; text?: string; withReasoning?: boolean } = {},
+): (() => void) => {
+  const text = options.text
+    ?? 'Working on the patch: pinning the sitemap cache key to the route manifest hash. The change is three lines in `sitemap.job.ts`, plus a regression test that asserts the cache key stays stable across locale rollouts.';
+  const intervalMs = options.intervalMs ?? 40;
+  const chunkSize = options.chunkSize ?? 6;
+  let offset = 0;
+  let reasoningDone = !(options.withReasoning ?? true);
+  const reasoningText = 'The cache key currently includes the locale list, which changed with the rollout — that is why every route re-crawled.';
+  let reasoningOffset = 0;
+
+  if (!reasoningDone) {
+    target.applyDelta({ type: 'reasoning-start', messageId, partId: `${messageId}-r1`, startedAt: Date.now() });
+  }
+
+  const interval = setInterval(() => {
+    if (!reasoningDone) {
+      const chunk = reasoningText.slice(reasoningOffset, reasoningOffset + chunkSize * 2);
+      reasoningOffset += chunkSize * 2;
+      if (chunk) {
+        target.applyDelta({ type: 'reasoning', messageId, partId: `${messageId}-r1`, delta: chunk });
+        return;
+      }
+      target.applyDelta({ type: 'reasoning-end', messageId, partId: `${messageId}-r1`, endedAt: Date.now() });
+      reasoningDone = true;
+      return;
+    }
+    const chunk = text.slice(offset, offset + chunkSize);
+    offset += chunkSize;
+    if (!chunk) {
+      clearInterval(interval);
+      target.applyDelta({
+        type: 'message-end',
+        messageId,
+        usage: { inputTokens: 980, outputTokens: 140, totalTokens: 1120 },
+      });
+      return;
+    }
+    target.applyDelta({ type: 'text', messageId, delta: chunk });
+  }, intervalMs);
+
+  return () => clearInterval(interval);
+};

package/ts_web/elements/00group-harness/harness.helpers.ts

@@ -0,0 +1,227 @@
+/**
+ * Pure helpers shared across the harness group: formatting, language
+ * detection, attachment constraints, and defensive value summarization.
+ * No DOM access; safe to import from anywhere including tests.
+ */
+import type { IHarnessTodoItem } from './interfaces.js';
+
+export const harnessMaxAttachmentBytes = 10 * 1024 * 1024;
+export const harnessMaxTotalAttachmentBytes = 30 * 1024 * 1024;
+
+export const harnessSupportedImageTypes = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/gif',
+]);
+
+export const harnessSupportedTextTypes = new Set([
+  'application/csv',
+  'application/json',
+  'application/ld+json',
+  'application/xml',
+  'application/yaml',
+  'text/csv',
+  'text/html',
+  'text/javascript',
+  'text/markdown',
+  'text/plain',
+  'text/xml',
+  'text/yaml',
+]);
+
+const mediaTypeByExtension: Record<string, string> = {
+  css: 'text/css',
+  csv: 'text/csv',
+  html: 'text/html',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpeg',
+  js: 'text/javascript',
+  json: 'application/json',
+  jsonl: 'application/json',
+  log: 'text/plain',
+  md: 'text/markdown',
+  mjs: 'text/javascript',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  ts: 'text/plain',
+  tsx: 'text/plain',
+  txt: 'text/plain',
+  webp: 'image/webp',
+  xml: 'application/xml',
+  yaml: 'application/yaml',
+  yml: 'application/yaml',
+};
+
+const languageByExtension: Record<string, string> = {
+  c: 'c',
+  cjs: 'javascript',
+  cpp: 'cpp',
+  cs: 'csharp',
+  css: 'css',
+  go: 'go',
+  h: 'c',
+  html: 'html',
+  java: 'java',
+  js: 'javascript',
+  json: 'json',
+  jsx: 'javascript',
+  kt: 'kotlin',
+  md: 'markdown',
+  mjs: 'javascript',
+  php: 'php',
+  py: 'python',
+  rb: 'ruby',
+  rs: 'rust',
+  sh: 'bash',
+  sql: 'sql',
+  swift: 'swift',
+  toml: 'ini',
+  ts: 'typescript',
+  tsx: 'typescript',
+  xml: 'xml',
+  yaml: 'yaml',
+  yml: 'yaml',
+  zsh: 'bash',
+};
+
+export const harnessIsRecord = (value: unknown): value is Record<string, unknown> => {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+};
+
+export const harnessFormatBytes = (bytes: unknown): string => {
+  const value = typeof bytes === 'number' && Number.isFinite(bytes) ? bytes : 0;
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(value < 10 * 1024 ? 1 : 0)} KB`;
+  return `${(value / 1024 / 1024).toFixed(value < 10 * 1024 * 1024 ? 1 : 0)} MB`;
+};
+
+export const harnessFormatDuration = (startedAt?: number, finishedAt?: number): string => {
+  if (!startedAt || !finishedAt || finishedAt < startedAt) return '';
+  const ms = finishedAt - startedAt;
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(ms < 10_000 ? 1 : 0)}s`;
+  return `${Math.floor(ms / 60_000)}m ${Math.round((ms % 60_000) / 1000)}s`;
+};
+
+export const harnessFormatRelativeTime = (epochMs?: number): string => {
+  if (!epochMs) return '';
+  const deltaMs = Date.now() - epochMs;
+  if (deltaMs < 45_000) return 'just now';
+  const minutes = Math.round(deltaMs / 60_000);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(epochMs).toLocaleDateString();
+};
+
+export const harnessLanguageForPath = (filePath: unknown): string => {
+  const extension = String(filePath || '').split('.').pop()?.toLowerCase() || '';
+  return languageByExtension[extension] || 'plaintext';
+};
+
+export const harnessMediaTypeForFile = (file: File): string => {
+  if (file.type) return file.type;
+  const extension = file.name.split('.').pop()?.toLowerCase() || '';
+  return mediaTypeByExtension[extension] || 'application/octet-stream';
+};
+
+export const harnessIsSupportedAttachmentType = (mediaType: string): boolean => {
+  return (
+    harnessSupportedImageTypes.has(mediaType)
+    || mediaType.startsWith('text/')
+    || harnessSupportedTextTypes.has(mediaType)
+  );
+};
+
+export const harnessFileToBase64 = (file: File): Promise<string> =>
+  new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = typeof reader.result === 'string' ? reader.result : '';
+      const marker = ';base64,';
+      const markerIndex = result.indexOf(marker);
+      resolve(markerIndex === -1 ? result : result.slice(markerIndex + marker.length));
+    };
+    reader.onerror = () => reject(reader.error || new Error(`Could not read ${file.name || 'file'}.`));
+    reader.readAsDataURL(file);
+  });
+
+export const harnessTruncate = (text: string, maxChars = 6000): { text: string; truncated: boolean } => {
+  if (text.length <= maxChars) return { text, truncated: false };
+  return { text: text.slice(0, maxChars), truncated: true };
+};
+
+export const harnessStringifyValue = (value: unknown): string => {
+  if (value === undefined || value === null) return '';
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  try {
+    return JSON.stringify(value, undefined, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+/**
+ * Defensive one-glance summary of an arbitrary tool input/output object:
+ * well-known keys first, then remaining scalars. Ported from the git.zone
+ * IDE's agent formatting layer.
+ */
+/**
+ * Extracts todo items from a todo-tool input/output. Accepts { todos: [...] }
+ * or a bare array; items may carry content/subject/title and unknown statuses
+ * normalize to 'pending'.
+ */
+export const harnessParseTodos = (value: unknown): IHarnessTodoItem[] => {
+  const rawList = Array.isArray(value)
+    ? value
+    : harnessIsRecord(value) && Array.isArray(value.todos)
+      ? value.todos
+      : [];
+  const result: IHarnessTodoItem[] = [];
+  for (const entry of rawList) {
+    if (typeof entry === 'string') {
+      result.push({ content: entry, status: 'pending' });
+      continue;
+    }
+    if (!harnessIsRecord(entry)) continue;
+    const content = String(entry.content ?? entry.subject ?? entry.title ?? '').trim();
+    if (!content) continue;
+    const status = entry.status === 'completed' || entry.status === 'in_progress' ? entry.status : 'pending';
+    result.push({
+      id: entry.id !== undefined ? String(entry.id) : undefined,
+      content,
+      status,
+    });
+  }
+  return result;
+};
+
+export const harnessSummarizeValue = (value: unknown): string => {
+  if (!harnessIsRecord(value)) return harnessStringifyValue(value);
+  const lines: string[] = [];
+  const seenKeys = new Set<string>();
+  for (const key of ['description', 'command', 'workdir', 'cwd', 'filePath', 'path', 'pattern', 'query', 'url', 'action']) {
+    const item = value[key];
+    if (typeof item === 'string' && item) {
+      lines.push(`${key}: ${item}`);
+      seenKeys.add(key);
+    }
+  }
+  for (const [key, item] of Object.entries(value)) {
+    if (seenKeys.has(key) || item === undefined || item === null) continue;
+    if (typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean') {
+      const text = String(item);
+      lines.push(`${key}: ${text.length > 240 ? `${text.slice(0, 240)}…` : text}`);
+    }
+  }
+  return lines.join('\n');
+};
+
+/** First meaningful line of a summarized value; used for card subtitles. */
+export const harnessSummaryLine = (value: unknown): string => {
+  return harnessSummarizeValue(value).split('\n')[0] || '';
+};

package/ts_web/elements/00group-harness/harness.markdown.ts

@@ -0,0 +1,151 @@
+import { css, type CSSResult } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+/**
+ * Markdown service for harness messages. Uses smartmarkdown (already in the
+ * dependency graph via dees-domtools; GFM-capable, sanitized-by-default) so
+ * the group adds zero dependencies. Results are LRU-cached because streaming
+ * re-parses the same growing text repeatedly. Swap seam: if the parser ever
+ * changes, only this file does.
+ */
+export class HarnessMarkdown {
+  private static instance: HarnessMarkdown | undefined;
+
+  public static getInstance(): HarnessMarkdown {
+    HarnessMarkdown.instance ??= new HarnessMarkdown();
+    return HarnessMarkdown.instance;
+  }
+
+  private cache = new Map<string, string>();
+  private static readonly maxCacheEntries = 200;
+
+  public async renderToHtml(markdownText: string): Promise<string> {
+    const cached = this.cache.get(markdownText);
+    if (cached !== undefined) {
+      // refresh LRU position
+      this.cache.delete(markdownText);
+      this.cache.set(markdownText, cached);
+      return cached;
+    }
+    const html = await domtools.plugins.smartmarkdown.SmartMarkdown.easyMarkdownToHtml(markdownText);
+    const processed = this.postProcess(html);
+    this.cache.set(markdownText, processed);
+    if (this.cache.size > HarnessMarkdown.maxCacheEntries) {
+      const oldestKey = this.cache.keys().next().value;
+      if (oldestKey !== undefined) this.cache.delete(oldestKey);
+    }
+    return processed;
+  }
+
+  /** External links open in a new context and never leak the opener. */
+  private postProcess(html: string): string {
+    return html.replaceAll('<a href=', '<a target="_blank" rel="noopener noreferrer" href=');
+  }
+}
+
+/**
+ * Token-based typography for rendered markdown. Included by components that
+ * render HarnessMarkdown output inside a `.markdown-body` container. Code
+ * fence syntax colors reuse the codebox palette convention (dark defaults,
+ * `:host([gobright])` for light) — kept in the consuming component's styles
+ * where :host is available; this block covers structure and rhythm.
+ */
+export const markdownStyles: CSSResult = css`
+  .markdown-body {
+    color: var(--dees-color-text-primary);
+    font-size: var(--dees-font-control-size, 13px);
+    line-height: 1.55;
+    overflow-wrap: anywhere;
+  }
+  .markdown-body > :first-child {
+    margin-top: 0;
+  }
+  .markdown-body > :last-child {
+    margin-bottom: 0;
+  }
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4 {
+    margin: var(--dees-spacing-lg) 0 var(--dees-spacing-sm);
+    color: var(--dees-color-text-primary);
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  .markdown-body h1 { font-size: 1.35em; }
+  .markdown-body h2 { font-size: 1.2em; }
+  .markdown-body h3 { font-size: 1.05em; }
+  .markdown-body h4 { font-size: 1em; }
+  .markdown-body p {
+    margin: var(--dees-spacing-sm) 0;
+  }
+  .markdown-body ul,
+  .markdown-body ol {
+    margin: var(--dees-spacing-sm) 0;
+    padding-left: 1.4em;
+  }
+  .markdown-body li {
+    margin: 2px 0;
+  }
+  .markdown-body a {
+    color: var(--dees-color-link);
+    text-decoration: none;
+  }
+  .markdown-body a:hover {
+    color: var(--dees-color-link-hover);
+    text-decoration: underline;
+  }
+  .markdown-body blockquote {
+    margin: var(--dees-spacing-sm) 0;
+    padding: var(--dees-spacing-xs) var(--dees-spacing-md);
+    border-left: 3px solid var(--dees-color-border-strong);
+    color: var(--dees-color-text-secondary);
+  }
+  .markdown-body code {
+    padding: 1px 5px;
+    border-radius: var(--dees-radius-xs);
+    background: var(--dees-color-code-bg);
+    font-family: var(--dees-font-family-mono);
+    font-size: 0.92em;
+  }
+  .markdown-body pre {
+    margin: var(--dees-spacing-sm) 0;
+    padding: var(--dees-spacing-md);
+    border: 1px solid var(--dees-color-border-subtle);
+    border-radius: var(--dees-radius-md);
+    corner-shape: var(--dees-corner-shape);
+    background: var(--dees-color-code-block-bg);
+    overflow: auto;
+  }
+  .markdown-body pre code {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    font-size: var(--dees-font-control-size-sm, 12px);
+    line-height: 1.5;
+  }
+  .markdown-body table {
+    margin: var(--dees-spacing-sm) 0;
+    border-collapse: collapse;
+    font-size: 0.95em;
+  }
+  .markdown-body th,
+  .markdown-body td {
+    padding: 4px 10px;
+    border: 1px solid var(--dees-color-border-default);
+    text-align: left;
+  }
+  .markdown-body th {
+    background: var(--dees-color-bg-tertiary);
+    font-weight: 600;
+  }
+  .markdown-body img {
+    max-width: 100%;
+    border-radius: var(--dees-radius-md);
+  }
+  .markdown-body hr {
+    margin: var(--dees-spacing-md) 0;
+    border: 0;
+    border-top: 1px solid var(--dees-color-border-subtle);
+  }
+`;

package/ts_web/elements/00group-harness/harness.styles.ts

@@ -0,0 +1,96 @@
+import { css, type CSSResult } from '@design.estate/dees-element';
+
+/**
+ * Shared visual vocabulary for harness components: card chrome, status
+ * pills, and monospace output blocks. Tokens only — both themes flip
+ * automatically.
+ */
+export const harnessCardStyles: CSSResult = css`
+  .harness-card {
+    border: 1px solid var(--dees-color-border-subtle);
+    border-left: 2px solid var(--dees-color-border-default);
+    border-radius: var(--dees-radius-lg);
+    corner-shape: var(--dees-corner-shape);
+    background: var(--dees-color-bg-secondary);
+    overflow: hidden;
+  }
+  .harness-card.status-running,
+  .harness-card.status-pending {
+    border-left-color: var(--dees-color-accent-primary);
+  }
+  .harness-card.status-completed {
+    border-left-color: var(--dees-color-accent-success);
+  }
+  .harness-card.status-error {
+    border-left-color: var(--dees-color-accent-error);
+  }
+  .harness-card.destructive {
+    border-left-color: var(--dees-color-accent-error);
+  }
+`;
+
+export const harnessPillStyles: CSSResult = css`
+  .harness-pill {
+    flex: 0 0 auto;
+    padding: 2px 8px;
+    border-radius: var(--dees-radius-full);
+    background: var(--dees-color-badge-default-bg);
+    color: var(--dees-color-badge-default-fg);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .harness-pill.tone-running,
+  .harness-pill.tone-pending {
+    background: var(--dees-color-fill-secondary);
+    color: var(--dees-color-accent-primary);
+  }
+  .harness-pill.tone-success {
+    background: var(--dees-color-badge-success-bg);
+    color: var(--dees-color-badge-success-fg);
+  }
+  .harness-pill.tone-warning {
+    background: var(--dees-color-badge-warning-bg);
+    color: var(--dees-color-badge-warning-fg);
+  }
+  .harness-pill.tone-error {
+    background: var(--dees-color-badge-error-bg);
+    color: var(--dees-color-badge-error-fg);
+  }
+`;
+
+export const harnessMonoStyles: CSSResult = css`
+  .harness-mono {
+    margin: 0;
+    padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+    border: 1px solid var(--dees-color-border-subtle);
+    border-radius: var(--dees-radius-md);
+    corner-shape: var(--dees-corner-shape);
+    background: var(--dees-color-code-block-bg);
+    color: var(--dees-color-text-primary);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    overflow: auto;
+    font-family: var(--dees-font-family-mono);
+    font-size: var(--dees-font-control-size-sm, 12px);
+    line-height: 1.5;
+  }
+  .harness-mono.tone-error {
+    color: var(--dees-color-text-error);
+  }
+  .harness-mono-expand {
+    margin-top: var(--dees-spacing-xs);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--dees-color-link);
+    cursor: pointer;
+    font-size: var(--dees-font-control-size-sm, 12px);
+  }
+  .harness-mono-expand:hover {
+    color: var(--dees-color-link-hover);
+    text-decoration: underline;
+  }
+`;

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

@@ -0,0 +1,22 @@
+// Agentic Chat (harness) Components
+// Renders what an agent harness produces: messages, reasoning, tool calls,
+// MCP content, permissions — plus the composer and session chrome around it.
+export * from './interfaces.js';
+export * from './toolregistry.js';
+export * from './harness.helpers.js';
+export { HarnessMarkdown, markdownStyles } from './harness.markdown.js';
+export { harnessCardStyles, harnessPillStyles, harnessMonoStyles } from './harness.styles.js';
+export * from './harness.demodata.js';
+
+export * from './dees-harness-chat/index.js';
+export * from './dees-harness-composer/index.js';
+export * from './dees-harness-content-blocks/index.js';
+export * from './dees-harness-message/index.js';
+export * from './dees-harness-permission-card/index.js';
+export * from './dees-harness-message-list/index.js';
+export * from './dees-harness-reasoning/index.js';
+export * from './dees-harness-session-list/index.js';
+export * from './dees-harness-status/index.js';
+export * from './dees-harness-todos/index.js';
+export * from './dees-harness-tool-card/index.js';
+export * from './dees-harness-usage/index.js';