@design.estate/dees-catalog 3.90.1 → 3.92.0

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

@@ -0,0 +1,203 @@
+/**
+ * Normalized data contract for the harness (agentic chat) component group.
+ *
+ * Producers vary widely — smartagent callbacks, IDE runtime wire models,
+ * OpenCode-style part arrays, raw MCP results — so these interfaces define
+ * the ONE shape the components render. Consumers adapt their runtime's
+ * events into these types; everything here is plain data (no DOM, no
+ * framework types) so adapters can live anywhere.
+ */
+
+// ---------------------------------------------------------------- messages
+
+export type THarnessRole = 'user' | 'assistant' | 'system' | 'tool';
+
+export interface IHarnessReasoningPart {
+  id: string;
+  text: string;
+  /** epoch ms; adapters convert wire ISO strings */
+  startedAt?: number;
+  /** undefined while the model is still thinking */
+  endedAt?: number;
+}
+
+export interface IHarnessAttachment {
+  id: string;
+  name: string;
+  mediaType: string;
+  /** bytes */
+  size: number;
+  kind: 'image' | 'text' | 'binary';
+  /** base64 payload for images and binary previews */
+  dataBase64?: string;
+  /** inline payload for text attachments */
+  text?: string;
+  truncated?: boolean;
+}
+
+export interface IHarnessUsage {
+  inputTokens?: number;
+  outputTokens?: number;
+  totalTokens?: number;
+  cacheReadTokens?: number;
+  cacheWriteTokens?: number;
+}
+
+export interface IHarnessMessage {
+  /** stable id — used as the keyed-repeat key; never reuse across messages */
+  id: string;
+  role: THarnessRole;
+  text: string;
+  /** epoch ms */
+  createdAt: number;
+  updatedAt?: number;
+  /** gates the streaming cursor and markdown parse throttling */
+  streaming?: boolean;
+  /** defaults to role === 'assistant' when undefined */
+  markdown?: boolean;
+  reasoning?: IHarnessReasoningPart[];
+  attachments?: IHarnessAttachment[];
+  /** role 'tool' messages render as a tool card */
+  toolCall?: IHarnessToolCall;
+  usage?: IHarnessUsage;
+  error?: string;
+  /** consumer passthrough; never interpreted by the components */
+  meta?: Record<string, unknown>;
+}
+
+// -------------------------------------------------------------- tool calls
+
+export type THarnessToolStatus = 'pending' | 'running' | 'completed' | 'error';
+
+/**
+ * MCP-aligned content blocks (mirrors @modelcontextprotocol/sdk
+ * CallToolResult.content entries) so tool results keep their structure
+ * instead of being string-flattened.
+ */
+export type THarnessContentBlock =
+  | { type: 'text'; text: string }
+  | { type: 'image'; data: string; mimeType: string }
+  | { type: 'audio'; data: string; mimeType: string }
+  | { type: 'resource'; resource: { uri: string; mimeType?: string; text?: string; blob?: string } }
+  | {
+      type: 'resource_link';
+      uri: string;
+      name: string;
+      title?: string;
+      description?: string;
+      mimeType?: string;
+      size?: number;
+    };
+
+export interface IHarnessMcpAnnotations {
+  title?: string;
+  readOnlyHint?: boolean;
+  destructiveHint?: boolean;
+  idempotentHint?: boolean;
+  openWorldHint?: boolean;
+}
+
+export interface IHarnessMcpMeta {
+  serverName: string;
+  /** un-namespaced tool name (the part after `server__`) */
+  toolName: string;
+  annotations?: IHarnessMcpAnnotations;
+}
+
+/**
+ * Tool calls are deliberately generic-plus-kind rather than a closed
+ * discriminated union: the set of tools is open (arbitrary MCP servers,
+ * app-specific tools), so classification happens at render time through the
+ * tool registry. `kind` is an optional explicit override.
+ */
+export interface IHarnessToolCall {
+  id: string;
+  /** raw tool name as invoked, including `server__tool` MCP namespacing */
+  name: string;
+  kind?: string;
+  status: THarnessToolStatus;
+  input?: unknown;
+  output?: unknown;
+  /** MCP CallToolResult.content, rendered structurally when present */
+  contentBlocks?: THarnessContentBlock[];
+  /** MCP CallToolResult.structuredContent */
+  structuredContent?: unknown;
+  /** MCP CallToolResult.isError */
+  isError?: boolean;
+  errorText?: string;
+  mcp?: IHarnessMcpMeta;
+  /** epoch ms */
+  startedAt?: number;
+  finishedAt?: number;
+}
+
+// ------------------------------------------------------------- permissions
+
+export interface IHarnessPermissionRequest {
+  id: string;
+  sessionId?: string;
+  /** epoch ms */
+  createdAt?: number;
+  title: string;
+  /** open set; well-known values today: write | delete | shell | browser */
+  type: string;
+  metadata?: Record<string, unknown>;
+}
+
+export type THarnessPermissionResponse = 'once' | 'always' | 'reject';
+
+export interface IHarnessPermissionResponseDetail {
+  requestId: string;
+  response: THarnessPermissionResponse;
+  remember: boolean;
+  request: IHarnessPermissionRequest;
+}
+
+// ------------------------------------------------------- sessions & status
+
+export interface IHarnessSessionMeta {
+  id: string;
+  title: string;
+  createdAt?: number;
+  updatedAt?: number;
+  messageCount?: number;
+  preview?: string;
+}
+
+export type THarnessTodoStatus = 'pending' | 'in_progress' | 'completed';
+
+export interface IHarnessTodoItem {
+  id?: string;
+  content: string;
+  status: THarnessTodoStatus;
+}
+
+export interface IHarnessStatus {
+  type: 'idle' | 'busy' | 'error';
+  message?: string;
+}
+
+// ---------------------------------------------------------------- composer
+
+export interface IHarnessComposerSendDetail {
+  text: string;
+  attachments: IHarnessAttachment[];
+  model?: string;
+  reasoningEffort?: string;
+}
+
+// --------------------------------------------------------------- streaming
+
+/**
+ * Incremental updates for the `applyDelta()` fast path. Deltas mutate the
+ * message object already held in `.messages` (so a later full property
+ * re-assignment is idempotent) and re-render only the affected message
+ * element.
+ */
+export type THarnessStreamDelta =
+  | { type: 'text'; messageId: string; delta: string }
+  | { type: 'reasoning-start'; messageId: string; partId: string; startedAt?: number }
+  | { type: 'reasoning'; messageId: string; partId: string; delta: string }
+  | { type: 'reasoning-end'; messageId: string; partId: string; endedAt?: number }
+  | { type: 'tool-update'; messageId: string; tool: Partial<IHarnessToolCall> & { id: string } }
+  | { type: 'message-end'; messageId: string; usage?: IHarnessUsage; error?: string };

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

@@ -0,0 +1,264 @@
+import type { TemplateResult } from '@design.estate/dees-element';
+import type { IHarnessToolCall, THarnessContentBlock } from './interfaces.js';
+import { harnessIsRecord, harnessSummaryLine } from './harness.helpers.js';
+
+/**
+ * Render helpers handed to tool body renderers. Implemented by
+ * dees-harness-tool-card (which owns the templates); typed here so custom
+ * descriptors can be authored against a stable surface.
+ */
+export interface IHarnessToolRenderHelpers {
+  /** highlighted code block (dees-dataview-codebox) with optional filename */
+  codeBlock(code: string, language?: string, filename?: string): TemplateResult;
+  /** before/after diff (dees-dataview-codebox diff mode) */
+  diffBlock(before: string, after: string, options?: { language?: string; filename?: string; view?: 'inline' | 'split' }): TemplateResult;
+  /** plain monospace block with truncation + expand */
+  monoBlock(text: string, options?: { maxChars?: number; tone?: 'default' | 'error' }): TemplateResult;
+  /** two-column key/value summary */
+  keyValues(pairs: Array<[string, string]>): TemplateResult;
+  /** MCP content blocks (dees-harness-content-blocks) */
+  contentBlocks(blocks: THarnessContentBlock[]): TemplateResult;
+  /** constrained inline image from base64 */
+  image(dataBase64: string, mimeType: string, alt?: string): TemplateResult;
+}
+
+export interface IHarnessToolDescriptor {
+  /** stable kind id, e.g. 'terminal', 'file-read', 'mcp', 'unknown' */
+  kind: string;
+  /** exact raw-name matches (fast path); lowercased on registration */
+  names?: string[];
+  /** fallback matcher when no name matched */
+  match?: (call: IHarnessToolCall) => boolean;
+  label: string | ((call: IHarnessToolCall) => string);
+  /** lucide icon spec, e.g. 'lucide:Terminal' */
+  icon: string;
+  subtitle?: (call: IHarnessToolCall) => string;
+  /**
+   * Custom body renderer. Built-in kinds leave this unset — the tool card
+   * ships body templates for them — so descriptors stay DOM-free unless a
+   * consumer wants a bespoke body.
+   */
+  renderBody?: (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers) => TemplateResult;
+  defaultExpanded?: boolean | ((call: IHarnessToolCall) => boolean);
+  /** styles the card with a destructive accent regardless of status */
+  destructive?: boolean;
+}
+
+/** Splits smartagent's MCP namespacing convention `server__tool`. */
+export const parseMcpName = (
+  rawName: string,
+): { serverName: string; toolName: string } | undefined => {
+  const separatorIndex = rawName.indexOf('__');
+  if (separatorIndex <= 0 || separatorIndex >= rawName.length - 2) return undefined;
+  return {
+    serverName: rawName.slice(0, separatorIndex),
+    toolName: rawName.slice(separatorIndex + 2),
+  };
+};
+
+const inputField = (call: IHarnessToolCall, key: string): string => {
+  return harnessIsRecord(call.input) && typeof call.input[key] === 'string'
+    ? (call.input[key] as string)
+    : '';
+};
+
+const inputAny = (call: IHarnessToolCall, key: string): unknown => {
+  return harnessIsRecord(call.input) ? call.input[key] : undefined;
+};
+
+const filePathOf = (call: IHarnessToolCall): string =>
+  inputField(call, 'path') || inputField(call, 'filePath') || inputField(call, 'file');
+
+const defaultDescriptors: IHarnessToolDescriptor[] = [
+  {
+    kind: 'terminal',
+    names: ['run_command', 'bash', 'shell', 'exec'],
+    label: 'Shell',
+    icon: 'lucide:Terminal',
+    subtitle: (call) => {
+      const command = inputField(call, 'command');
+      const cwd = inputField(call, 'cwd') || inputField(call, 'workdir');
+      return command ? `${command}${cwd ? ` — in ${cwd}` : ''}` : harnessSummaryLine(call.input);
+    },
+    defaultExpanded: true,
+  },
+  {
+    kind: 'file-read',
+    names: ['read_file', 'read'],
+    label: 'Read',
+    icon: 'lucide:FileText',
+    subtitle: (call) => {
+      const path = filePathOf(call);
+      const startLine = inputAny(call, 'startLine');
+      const endLine = inputAny(call, 'endLine');
+      const range = startLine || endLine ? `:${startLine ?? ''}-${endLine ?? ''}` : '';
+      return path ? `${path}${range}` : harnessSummaryLine(call.input);
+    },
+  },
+  {
+    kind: 'file-write',
+    names: ['write_file', 'write', 'edit', 'edit_file', 'apply_patch', 'patch'],
+    label: 'Write',
+    icon: 'lucide:FilePen',
+    subtitle: (call) => filePathOf(call) || harnessSummaryLine(call.input),
+  },
+  {
+    kind: 'file-delete',
+    names: ['delete_file', 'delete', 'remove_file'],
+    label: 'Delete',
+    icon: 'lucide:Trash2',
+    subtitle: (call) => filePathOf(call) || harnessSummaryLine(call.input),
+    destructive: true,
+  },
+  {
+    kind: 'dir-list',
+    names: ['list_directory', 'list', 'ls'],
+    label: 'List',
+    icon: 'lucide:FolderOpen',
+    subtitle: (call) => {
+      const path = filePathOf(call) || '.';
+      return inputAny(call, 'recursive') ? `${path} (recursive)` : path;
+    },
+  },
+  {
+    kind: 'browser',
+    names: ['browser'],
+    label: 'Browser',
+    icon: 'lucide:Globe',
+    subtitle: (call) => {
+      const action = inputField(call, 'action') || 'snapshot';
+      const target = inputField(call, 'url') || inputField(call, 'selector');
+      return `${action}${target ? ` ${target}` : ''}`;
+    },
+  },
+  {
+    kind: 'http',
+    names: ['http_get', 'http_post', 'webfetch', 'fetch'],
+    label: (call) => (call.name === 'http_post' ? 'HTTP POST' : call.name === 'http_get' ? 'HTTP GET' : 'Fetch'),
+    icon: 'lucide:ArrowDownUp',
+    subtitle: (call) => inputField(call, 'url') || harnessSummaryLine(call.input),
+  },
+  {
+    kind: 'json',
+    names: ['json_validate', 'json_transform'],
+    label: (call) => (call.name === 'json_transform' ? 'JSON Transform' : 'JSON Validate'),
+    icon: 'lucide:Braces',
+    subtitle: (call) => {
+      const source = inputField(call, 'jsonString');
+      return source ? (source.length > 60 ? `${source.slice(0, 60)}…` : source) : harnessSummaryLine(call.input);
+    },
+  },
+  {
+    kind: 'search',
+    names: ['grep', 'glob', 'websearch', 'search'],
+    label: 'Search',
+    icon: 'lucide:Search',
+    subtitle: (call) =>
+      inputField(call, 'pattern') || inputField(call, 'query') || filePathOf(call) || harnessSummaryLine(call.input),
+  },
+  {
+    kind: 'subtask',
+    names: ['task', 'subagent'],
+    label: 'Subagent',
+    icon: 'lucide:Bot',
+    subtitle: (call) => inputField(call, 'description') || inputField(call, 'prompt') || harnessSummaryLine(call.input),
+  },
+  {
+    kind: 'todo',
+    names: ['todowrite', 'todo_write', 'todoread'],
+    label: 'Todos',
+    icon: 'lucide:ListTodo',
+    subtitle: (call) => {
+      const todos = inputAny(call, 'todos');
+      return Array.isArray(todos) ? `${todos.length} todos` : harnessSummaryLine(call.input);
+    },
+  },
+  {
+    kind: 'mcp',
+    label: (call) => call.mcp?.annotations?.title || call.mcp?.toolName || parseMcpName(call.name)?.toolName || call.name,
+    icon: 'lucide:Plug',
+    match: (call) => Boolean(call.mcp) || Boolean(parseMcpName(call.name)),
+    subtitle: (call) => harnessSummaryLine(call.input),
+  },
+  {
+    kind: 'unknown',
+    label: (call) => call.name || 'Tool',
+    icon: 'lucide:Wrench',
+    subtitle: (call) => harnessSummaryLine(call.input),
+  },
+];
+
+/**
+ * Maps raw tool calls to render descriptors. A pre-seeded singleton covers
+ * the built-in and MCP conventions; apps register custom tools once at boot
+ * (`DeesHarnessToolRegistry.default.register(...)`) or hand an isolated
+ * `fork()` to individual elements via their `.toolRegistry` property.
+ */
+export class DeesHarnessToolRegistry {
+  public static readonly default: DeesHarnessToolRegistry = new DeesHarnessToolRegistry(defaultDescriptors);
+
+  private descriptors: IHarnessToolDescriptor[] = [];
+  private byName = new Map<string, IHarnessToolDescriptor>();
+  private byKind = new Map<string, IHarnessToolDescriptor>();
+
+  constructor(seedDescriptors: IHarnessToolDescriptor[] = []) {
+    for (const descriptor of seedDescriptors) {
+      this.register(descriptor);
+    }
+  }
+
+  /** Registers (or replaces, by kind) a descriptor. Later wins on names. */
+  public register(descriptor: IHarnessToolDescriptor): this {
+    const existing = this.byKind.get(descriptor.kind);
+    if (existing) {
+      this.descriptors = this.descriptors.filter((candidate) => candidate !== existing);
+      for (const [name, mapped] of this.byName) {
+        if (mapped === existing) this.byName.delete(name);
+      }
+    }
+    this.byKind.set(descriptor.kind, descriptor);
+    this.descriptors.push(descriptor);
+    for (const name of descriptor.names ?? []) {
+      this.byName.set(name.toLowerCase(), descriptor);
+    }
+    return this;
+  }
+
+  public unregister(kind: string): this {
+    const existing = this.byKind.get(kind);
+    if (!existing) return this;
+    this.byKind.delete(kind);
+    this.descriptors = this.descriptors.filter((candidate) => candidate !== existing);
+    for (const [name, mapped] of this.byName) {
+      if (mapped === existing) this.byName.delete(name);
+    }
+    return this;
+  }
+
+  public descriptorForKind(kind: string): IHarnessToolDescriptor | undefined {
+    return this.byKind.get(kind);
+  }
+
+  /** Never returns undefined — falls back to the 'unknown' descriptor. */
+  public resolve(call: IHarnessToolCall): IHarnessToolDescriptor {
+    if (call.kind) {
+      const explicit = this.byKind.get(call.kind);
+      if (explicit) return explicit;
+    }
+    const named = this.byName.get(String(call.name || '').toLowerCase());
+    if (named) return named;
+    for (const descriptor of this.descriptors) {
+      if (descriptor.match?.(call)) return descriptor;
+    }
+    return this.byKind.get('unknown') ?? defaultDescriptors[defaultDescriptors.length - 1];
+  }
+
+  public resolveKind(name: string): string {
+    return this.resolve({ id: '', name, status: 'completed' }).kind;
+  }
+
+  /** Isolated copy for demos, tests, or per-pane toolsets. */
+  public fork(): DeesHarnessToolRegistry {
+    return new DeesHarnessToolRegistry(this.descriptors.map((descriptor) => ({ ...descriptor })));
+  }
+}

package/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -150,10 +150,13 @@ export class DeesInputCode extends DeesInputBase<string> {
         font-weight: 500;
         background: var(--dees-color-bg-primary);
         border: 1px solid var(--dees-color-border-default);
-        border-radius: 4px;
+        border-radius: var(--dees-radius-md);
         cursor: pointer;
         color: var(--dees-color-text-secondary);
-        transition: all 0.15s ease;
+        transition:
+              background-color var(--dees-transition-fast) var(--dees-ease-standard),
+              color var(--dees-transition-fast) var(--dees-ease-standard),
+              border-color var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .language-button:hover {
@@ -167,8 +170,8 @@ export class DeesInputCode extends DeesInputBase<string> {
         margin-top: 4px;
         background: var(--dees-color-bg-primary);
         border: 1px solid var(--dees-color-border-default);
-        border-radius: 6px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        border-radius: var(--dees-radius-lg);
+        box-shadow: var(--dees-shadow-lg);
         z-index: 100;
         max-height: 250px;
         overflow-y: auto;
@@ -180,7 +183,7 @@ export class DeesInputCode extends DeesInputBase<string> {
         font-size: 12px;
         cursor: pointer;
         color: var(--dees-color-text-secondary);
-        transition: background 0.15s ease;
+        transition: background-color var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .language-option:hover {
@@ -199,10 +202,13 @@ export class DeesInputCode extends DeesInputBase<string> {
         height: 32px;
         background: transparent;
         border: none;
-        border-radius: 4px;
+        border-radius: var(--dees-radius-md);
         cursor: pointer;
         color: var(--dees-color-text-muted);
-        transition: all 0.15s ease;
+        transition:
+              background-color var(--dees-transition-fast) var(--dees-ease-standard),
+              color var(--dees-transition-fast) var(--dees-ease-standard),
+              border-color var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .toolbar-button:hover {
@@ -216,7 +222,7 @@ export class DeesInputCode extends DeesInputBase<string> {
       }
 
       .toolbar-button.success {
-        color: hsl(142.1 76.2% 36.3%);
+        color: var(--dees-color-text-success);
       }
 
       .editor-wrapper {
@@ -582,10 +588,13 @@ export class DeesInputCode extends DeesInputBase<string> {
             font-weight: 500;
             background: var(--dees-color-bg-primary);
             border: 1px solid var(--dees-color-border-default);
-            border-radius: 4px;
+            border-radius: var(--dees-radius-md);
             cursor: pointer;
             color: var(--dees-color-text-primary);
-            transition: all 0.15s ease;
+            transition:
+              background-color var(--dees-transition-fast) var(--dees-ease-standard),
+              color var(--dees-transition-fast) var(--dees-ease-standard),
+              border-color var(--dees-transition-fast) var(--dees-ease-standard);
           }
           .modal-toolbar .language-button:hover {
             background: var(--dees-color-badge-default-bg);
@@ -595,10 +604,10 @@ export class DeesInputCode extends DeesInputBase<string> {
             top: 100%;
             left: 0;
             margin-top: 4px;
-            background: var(--dees-color-tooltip-fg);
+            background: var(--dees-color-bg-primary);
             border: 1px solid var(--dees-color-border-default);
-            border-radius: 6px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            border-radius: var(--dees-radius-lg);
+            box-shadow: var(--dees-shadow-lg);
             z-index: 100;
             max-height: 250px;
             overflow-y: auto;
@@ -610,7 +619,7 @@ export class DeesInputCode extends DeesInputBase<string> {
             font-size: 12px;
             cursor: pointer;
             color: var(--dees-color-text-primary);
-            transition: background 0.15s ease;
+            transition: background-color var(--dees-transition-fast) var(--dees-ease-standard);
           }
           .modal-toolbar .language-option:hover {
             background: var(--dees-color-badge-default-bg);
@@ -626,10 +635,13 @@ export class DeesInputCode extends DeesInputBase<string> {
             height: 32px;
             background: transparent;
             border: none;
-            border-radius: 4px;
+            border-radius: var(--dees-radius-md);
             cursor: pointer;
             color: var(--dees-color-text-muted);
-            transition: all 0.15s ease;
+            transition:
+              background-color var(--dees-transition-fast) var(--dees-ease-standard),
+              color var(--dees-transition-fast) var(--dees-ease-standard),
+              border-color var(--dees-transition-fast) var(--dees-ease-standard);
           }
           .modal-toolbar .toolbar-button:hover {
             background: var(--dees-color-border-default);
@@ -640,7 +652,7 @@ export class DeesInputCode extends DeesInputBase<string> {
             color: var(--dees-color-text-primary);
           }
           .modal-toolbar .toolbar-button.success {
-            color: hsl(142.1 76.2% 36.3%);
+            color: var(--dees-color-text-success);
           }
           .modal-toolbar .toolbar-divider {
             width: 1px;