@design.estate/dees-catalog 3.91.0 → 3.92.0

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

@@ -0,0 +1,498 @@
+import { demoFunc } from './dees-harness-message.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+  unsafeHTML,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import { syntaxPaletteStyles, syntaxScopeStyles } from '../../00syntax.js';
+import type { HLJSApi } from 'highlight.js';
+import type { IHarnessAttachment, IHarnessMessage, IHarnessUsage } from '../interfaces.js';
+import { DeesHarnessToolRegistry } from '../toolregistry.js';
+import { HarnessMarkdown, markdownStyles } from '../harness.markdown.js';
+import { harnessFormatBytes, harnessFormatRelativeTime } from '../harness.helpers.js';
+import { DeesServiceLibLoader } from '../../../services/index.js';
+import '../dees-harness-reasoning/dees-harness-reasoning.js';
+import '../dees-harness-tool-card/dees-harness-tool-card.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-message': DeesHarnessMessage;
+  }
+}
+
+const markdownParseThrottleMs = 150;
+
+/**
+ * One conversation message. The `message` property object is the source of
+ * truth; the streaming fast path (`appendTextDelta` etc.) mutates that same
+ * object and re-renders only this element, so a later wholesale property
+ * re-assignment by the host is idempotent.
+ */
+@customElement('dees-harness-message')
+export class DeesHarnessMessage extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor message: IHarnessMessage = { id: '', role: 'assistant', text: '', createdAt: 0 };
+
+  @property({ type: Boolean })
+  accessor showRole: boolean = true;
+
+  @property({ type: Boolean })
+  accessor showTimestamp: boolean = false;
+
+  /** parse markdown during streaming (throttled); plain text otherwise */
+  @property({ type: Boolean })
+  accessor markdownWhileStreaming: boolean = true;
+
+  @property({ attribute: false })
+  accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
+
+  /**
+   * When true at first render, the entry animation is skipped permanently
+   * for this element (initial-batch rendering). Captured once in
+   * firstUpdated — later property changes must not restart the animation.
+   */
+  @property({ attribute: false })
+  accessor suppressEntry: boolean = false;
+
+  @state()
+  accessor renderedMarkdownHtml: string = '';
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    markdownStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--dees-font-family);
+        /* entry: new boxes make space for themselves while fading in.
+           A keyframes animation (not a transition) so the parent tree's
+           universal theme-transition rule cannot override it in the shadow
+           cascade; interpolate-size lets height animate from 0 to auto
+           (Chromium 129+), elsewhere the height snaps and opacity still
+           fades. */
+        interpolate-size: allow-keywords;
+        overflow: clip;
+        animation: harness-entry var(--dees-transition-default) var(--dees-ease-out);
+      }
+
+      @keyframes harness-entry {
+        from {
+          height: 0;
+          margin-top: 0;
+          opacity: 0;
+        }
+      }
+
+      :host(.no-entry) {
+        animation: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          animation: none;
+        }
+      }
+
+      .message {
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border: 1px solid var(--dees-color-border-subtle);
+        border-left: 2px solid var(--dees-color-border-strong);
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-secondary);
+      }
+
+      .message.role-user {
+        border-left-color: var(--dees-color-accent-primary);
+      }
+
+      .message.role-system {
+        border-left-color: var(--dees-color-accent-warning);
+      }
+
+      .message.has-error {
+        border-left-color: var(--dees-color-accent-error);
+      }
+
+      .roleRow {
+        display: flex;
+        align-items: baseline;
+        gap: var(--dees-spacing-sm);
+        margin-bottom: var(--dees-spacing-xs);
+      }
+
+      .roleLabel {
+        color: var(--dees-color-text-secondary);
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+      }
+
+      .timestamp {
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+      }
+
+      .plainText {
+        color: var(--dees-color-text-primary);
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        font-size: var(--dees-font-control-size, 13px);
+        line-height: 1.55;
+      }
+
+      .cursor {
+        display: inline-block;
+        width: 7px;
+        height: 1.05em;
+        margin-left: 1px;
+        vertical-align: text-bottom;
+        border-radius: 1px;
+        background: var(--dees-color-accent-primary);
+        animation: harness-cursor-blink 1s steps(2, start) infinite;
+      }
+
+      @keyframes harness-cursor-blink {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.15; }
+      }
+
+      .reasoningStack {
+        display: grid;
+        gap: var(--dees-spacing-xs);
+        margin-bottom: var(--dees-spacing-sm);
+      }
+
+      .attachments {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: var(--dees-spacing-sm);
+        margin-bottom: var(--dees-spacing-sm);
+      }
+
+      .attachmentCard {
+        min-width: 0;
+        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);
+      }
+
+      .attachmentThumb {
+        width: 44px;
+        height: 44px;
+        flex: 0 0 44px;
+        object-fit: cover;
+        border-radius: var(--dees-radius-sm);
+        background: var(--dees-color-bg-primary);
+      }
+
+      .attachmentIcon {
+        width: 44px;
+        height: 44px;
+        flex: 0 0 44px;
+        display: grid;
+        place-items: center;
+        border-radius: var(--dees-radius-sm);
+        background: var(--dees-color-fill-secondary);
+        color: var(--dees-color-accent-primary);
+      }
+
+      .attachmentInfo {
+        min-width: 0;
+      }
+
+      .attachmentName {
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .attachmentMeta {
+        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;
+      }
+
+      .footerRow {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-md);
+        margin-top: var(--dees-spacing-sm);
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+      }
+
+      .errorText {
+        margin-top: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border-radius: var(--dees-radius-md);
+        background: var(--dees-color-badge-error-bg);
+        color: var(--dees-color-badge-error-fg);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+      }
+
+    `,
+    /* Shared system syntax palette + highlight.js scope mapping */
+    syntaxPaletteStyles,
+    syntaxScopeStyles,
+  ];
+
+  private markdownParseToken = 0;
+  private lastParsedText = '';
+  private markdownThrottleTimeout: ReturnType<typeof setTimeout> | null = null;
+  private highlightJs: HLJSApi | null = null;
+
+  public get markdownActive(): boolean {
+    return this.message.markdown ?? this.message.role === 'assistant';
+  }
+
+  // ------------------------------------------------------ streaming fast path
+
+  /** Appends a text delta, mutating the shared message object. */
+  public appendTextDelta(delta: string): void {
+    this.message.text += delta;
+    this.message.streaming = true;
+    this.requestUpdate();
+  }
+
+  /** Appends to (or creates) a reasoning part by id. */
+  public appendReasoningDelta(partId: string, delta: string, startedAt?: number): void {
+    this.message.reasoning ??= [];
+    let part = this.message.reasoning.find((candidate) => candidate.id === partId);
+    if (!part) {
+      part = { id: partId, text: '', startedAt: startedAt ?? Date.now() };
+      this.message.reasoning.push(part);
+    }
+    part.text += delta;
+    this.requestUpdate();
+    // reasoning parts render as child elements holding the same part object
+    for (const reasoningElement of this.shadowRoot?.querySelectorAll('dees-harness-reasoning') ?? []) {
+      reasoningElement.requestUpdate();
+    }
+  }
+
+  /** Marks a reasoning part as ended. */
+  public endReasoning(partId: string, endedAt?: number): void {
+    const part = this.message.reasoning?.find((candidate) => candidate.id === partId);
+    if (part && !part.endedAt) {
+      part.endedAt = endedAt ?? Date.now();
+      this.requestUpdate();
+      for (const reasoningElement of this.shadowRoot?.querySelectorAll('dees-harness-reasoning') ?? []) {
+        reasoningElement.requestUpdate();
+      }
+    }
+  }
+
+  /** Ends the stream: final markdown parse, usage/error attach. */
+  public endStream(usage?: IHarnessUsage, error?: string): void {
+    this.message.streaming = false;
+    if (usage) this.message.usage = usage;
+    if (error) this.message.error = error;
+    this.message.updatedAt = Date.now();
+    this.requestUpdate();
+  }
+
+  // ------------------------------------------------------------------ render
+
+  public render(): TemplateResult {
+    const message = this.message;
+    // a pure tool message renders the bare tool card — the card carries its
+    // own complete chrome, so the message wrapper would double the framing
+    if (
+      message.role === 'tool'
+      && message.toolCall
+      && !message.text
+      && !message.error
+      && !message.reasoning?.length
+      && !message.attachments?.length
+    ) {
+      return html`
+        <dees-harness-tool-card .call=${message.toolCall} .toolRegistry=${this.toolRegistry}></dees-harness-tool-card>
+      `;
+    }
+    const roleClass = `role-${message.role}`;
+    return html`
+      <div class="message ${roleClass} ${message.error ? 'has-error' : ''}">
+        ${this.showRole || this.showTimestamp
+          ? html`
+              <div class="roleRow">
+                ${this.showRole ? html`<span class="roleLabel">${message.role}</span>` : ''}
+                ${this.showTimestamp && message.createdAt
+                  ? html`<span class="timestamp">${harnessFormatRelativeTime(message.createdAt)}</span>`
+                  : ''}
+              </div>
+            `
+          : ''}
+        ${message.reasoning?.length
+          ? html`
+              <div class="reasoningStack">
+                ${message.reasoning.map(
+                  (part) => html`<dees-harness-reasoning .reasoningPart=${part}></dees-harness-reasoning>`,
+                )}
+              </div>
+            `
+          : ''}
+        ${message.attachments?.length ? this.renderAttachments(message.attachments) : ''}
+        ${message.toolCall
+          ? html`<dees-harness-tool-card .call=${message.toolCall} .toolRegistry=${this.toolRegistry}></dees-harness-tool-card>`
+          : ''}
+        ${this.renderText()}
+        ${message.error ? html`<div class="errorText">${message.error}</div>` : ''}
+        ${message.usage?.totalTokens
+          ? html`
+              <div class="footerRow">
+                <span>${message.usage.inputTokens ?? 0} in · ${message.usage.outputTokens ?? 0} out · ${message.usage.totalTokens} total tokens</span>
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
+  private renderText(): TemplateResult {
+    const message = this.message;
+    if (!message.text) {
+      return message.streaming ? html`<div class="plainText"><span class="cursor"></span></div>` : html``;
+    }
+    const markdownReady = this.markdownActive
+      && this.renderedMarkdownHtml
+      && (!message.streaming || this.markdownWhileStreaming)
+      && this.lastParsedText.length > 0;
+    if (markdownReady) {
+      return html`
+        <div class="markdown-body">${unsafeHTML(this.renderedMarkdownHtml)}</div>
+        ${message.streaming ? html`<span class="cursor"></span>` : ''}
+      `;
+    }
+    return html`
+      <div class="plainText">${message.text}${message.streaming ? html`<span class="cursor"></span>` : ''}</div>
+    `;
+  }
+
+  private renderAttachments(attachments: IHarnessAttachment[]): TemplateResult {
+    return html`
+      <div class="attachments">
+        ${attachments.map((attachment) => {
+          const imageUrl = attachment.kind === 'image' && attachment.dataBase64
+            ? `data:${attachment.mediaType};base64,${attachment.dataBase64}`
+            : '';
+          return html`
+            <div class="attachmentCard">
+              ${imageUrl
+                ? html`<img class="attachmentThumb" src=${imageUrl} alt=${attachment.name} />`
+                : html`<div class="attachmentIcon"><dees-icon icon="lucide:FileText" iconSize="18"></dees-icon></div>`}
+              <div class="attachmentInfo">
+                <div class="attachmentName" title=${attachment.name}>${attachment.name}</div>
+                <div class="attachmentMeta">
+                  ${attachment.mediaType || 'file'} · ${harnessFormatBytes(attachment.size)}${attachment.truncated ? ' · truncated' : ''}
+                </div>
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  // ---------------------------------------------------------------- markdown
+
+  public firstUpdated(changedProperties: Map<string, any>): void {
+    super.firstUpdated(changedProperties);
+    if (this.suppressEntry) {
+      this.classList.add('no-entry');
+    }
+  }
+
+  public async updated(changedProperties: Map<string, any>): Promise<void> {
+    super.updated(changedProperties);
+    if (!this.markdownActive || !this.message.text) return;
+    if (this.message.text === this.lastParsedText) return;
+    if (this.message.streaming) {
+      if (!this.markdownWhileStreaming) return;
+      this.scheduleThrottledParse();
+      return;
+    }
+    await this.parseMarkdown();
+  }
+
+  private scheduleThrottledParse(): void {
+    if (this.markdownThrottleTimeout) return;
+    this.markdownThrottleTimeout = setTimeout(() => {
+      this.markdownThrottleTimeout = null;
+      void this.parseMarkdown();
+    }, markdownParseThrottleMs);
+  }
+
+  private async parseMarkdown(): Promise<void> {
+    const token = ++this.markdownParseToken;
+    const textAtRequest = this.message.text;
+    const htmlResult = await HarnessMarkdown.getInstance().renderToHtml(textAtRequest);
+    if (token !== this.markdownParseToken) return;
+    this.lastParsedText = textAtRequest;
+    this.renderedMarkdownHtml = htmlResult;
+    if (!this.message.streaming) {
+      await this.updateComplete;
+      await this.highlightCodeFences(token);
+    }
+  }
+
+  /** Lazy hljs pass over rendered fences; runs only after the final parse. */
+  private async highlightCodeFences(token: number): Promise<void> {
+    const codeElements = Array.from(
+      this.shadowRoot?.querySelectorAll<HTMLElement>('.markdown-body pre code') ?? [],
+    ).filter((codeElement) => !codeElement.dataset.highlighted);
+    if (!codeElements.length) return;
+    if (!this.highlightJs) {
+      this.highlightJs = await DeesServiceLibLoader.getInstance().loadHighlightJs();
+    }
+    if (token !== this.markdownParseToken) return;
+    for (const codeElement of codeElements) {
+      const languageMatch = /language-([\w-]+)/.exec(codeElement.className);
+      try {
+        const highlighted = languageMatch
+          ? this.highlightJs.highlight(codeElement.textContent ?? '', {
+              language: languageMatch[1],
+              ignoreIllegals: true,
+            }).value
+          : this.highlightJs.highlightAuto(codeElement.textContent ?? '').value;
+        codeElement.innerHTML = highlighted;
+        codeElement.dataset.highlighted = 'true';
+      } catch {
+        codeElement.dataset.highlighted = 'skip';
+      }
+    }
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    if (this.markdownThrottleTimeout) {
+      clearTimeout(this.markdownThrottleTimeout);
+      this.markdownThrottleTimeout = null;
+    }
+    await super.disconnectedCallback();
+  }
+}

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

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

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

@@ -0,0 +1,105 @@
+import { html } from '@design.estate/dees-element';
+import type { DeesHarnessMessageList } from './dees-harness-message-list.js';
+import type { IHarnessMessage } from '../interfaces.js';
+
+const seedMessages = (): IHarnessMessage[] => [
+  {
+    id: 'm1',
+    role: 'user',
+    text: 'Summarize the last deploy and tell me if anything regressed.',
+    createdAt: Date.now() - 300_000,
+  },
+  {
+    id: 'm2',
+    role: 'assistant',
+    text: 'The deploy finished in **4m12s**. One warning: the `sitemap` job took 3× longer than baseline.\n\n- build: ok\n- tests: 212 passed\n- sitemap: slow (see below)',
+    createdAt: Date.now() - 280_000,
+    reasoning: [
+      {
+        id: 'r1',
+        text: 'Check the deploy log timings first, then compare against the previous run.',
+        startedAt: Date.now() - 290_000,
+        endedAt: Date.now() - 287_000,
+      },
+    ],
+  },
+  {
+    id: 'm3',
+    role: 'user',
+    text: 'Dig into the sitemap job please.',
+    createdAt: Date.now() - 200_000,
+  },
+];
+
+let streamStop: (() => void) | undefined;
+
+const simulateStream = (event: MouseEvent) => {
+  streamStop?.();
+  const container = (event.target as HTMLElement).closest('.listDemo');
+  const list = container?.querySelector<DeesHarnessMessageList>('dees-harness-message-list');
+  if (!list) return;
+  const streamingMessage: IHarnessMessage = {
+    id: `stream-${Date.now()}`,
+    role: 'assistant',
+    text: '',
+    createdAt: Date.now(),
+    streaming: true,
+  };
+  list.messages = [...list.messages, streamingMessage];
+  const source = 'The sitemap job re-crawled every route because the cache key changed with the locale rollout. Pinning the cache key to the route manifest hash brings it back to baseline. I can prepare that patch.';
+  let offset = 0;
+  const interval = setInterval(() => {
+    const chunk = source.slice(offset, offset + 5);
+    offset += 5;
+    if (!chunk) {
+      clearInterval(interval);
+      list.applyDelta({ type: 'message-end', messageId: streamingMessage.id, usage: { inputTokens: 900, outputTokens: 120, totalTokens: 1020 } });
+      return;
+    }
+    list.applyDelta({ type: 'text', messageId: streamingMessage.id, delta: chunk });
+  }, 40);
+  streamStop = () => clearInterval(interval);
+};
+
+export const demoFunc = () => html`
+  <style>
+    .listDemo {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      gap: 12px;
+      height: 520px;
+      max-width: 720px;
+      margin: 40px auto;
+      padding: 16px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-primary);
+      border: 1px solid var(--dees-color-border-subtle);
+    }
+    .listDemo dees-harness-message-list {
+      height: 100%;
+    }
+  </style>
+  <div class="listDemo">
+    <div>
+      <dees-button @clicked=${simulateStream}>Stream a new reply</dees-button>
+    </div>
+    <dees-harness-message-list .messages=${seedMessages()}></dees-harness-message-list>
+  </div>
+  <style>
+    .emptyDemo {
+      height: 200px;
+      max-width: 720px;
+      margin: 0 auto 40px;
+      border-radius: var(--dees-radius-xl);
+      border: 1px solid var(--dees-color-border-subtle);
+      background: var(--dees-color-bg-primary);
+    }
+    .emptyDemo dees-harness-message-list { height: 100%; }
+  </style>
+  <div class="emptyDemo">
+    <dees-harness-message-list
+      emptyTitle="Nothing here yet"
+      emptyText="Send the agent a prompt to get started."
+    ></dees-harness-message-list>
+  </div>
+`;