@design.estate/dees-catalog 3.90.1 → 3.92.0

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

@@ -0,0 +1,342 @@
+import { demoFunc } from './dees-harness-message-list.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+  directives,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessMessage, IHarnessStatus, THarnessStreamDelta } from '../interfaces.js';
+import { DeesHarnessMessage } from '../dees-harness-message/dees-harness-message.js';
+import { DeesHarnessToolRegistry } from '../toolregistry.js';
+import '../dees-harness-status/dees-harness-status.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+const { repeat } = directives;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-message-list': DeesHarnessMessageList;
+  }
+}
+
+const pinThresholdPx = 48;
+
+/**
+ * Scrollable, streaming-safe message log. Messages render through a keyed
+ * repeat (stable DOM per message id); `applyDelta()` routes incremental
+ * updates to the affected message element only. Auto-follows the bottom
+ * while the user is pinned there; otherwise new content raises a
+ * "jump to latest" chip instead of yanking the scroll position.
+ */
+@customElement('dees-harness-message-list')
+export class DeesHarnessMessageList extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor messages: IHarnessMessage[] = [];
+
+  @property({ attribute: false })
+  accessor status: IHarnessStatus = { type: 'idle' };
+
+  @property({ type: Boolean })
+  accessor autoFollow: boolean = true;
+
+  @property({ attribute: false })
+  accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
+
+  @property({ type: Boolean })
+  accessor showRoles: boolean = true;
+
+  @property({ type: Boolean })
+  accessor showTimestamps: boolean = false;
+
+  @property()
+  accessor emptyTitle: string = 'No messages yet';
+
+  @property()
+  accessor emptyText: string = 'Start a conversation to see it here.';
+
+  @state()
+  accessor showJumpChip: boolean = false;
+
+  @state()
+  accessor entryAnimationsEnabled: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: relative;
+        display: block;
+        min-height: 0;
+        font-family: var(--dees-font-family);
+      }
+
+      .scroll {
+        height: 100%;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+        padding: var(--dees-spacing-md);
+        box-sizing: border-box;
+      }
+
+      .stack {
+        display: block;
+      }
+
+      /* spacing via sibling margins (not grid gap) so a new entry's margin
+         animates together with its height while it fades in */
+      .stack > * + * {
+        margin-top: var(--dees-spacing-sm);
+      }
+
+      .statusRow {
+        padding: 0 var(--dees-spacing-xs);
+      }
+
+      .empty {
+        display: grid;
+        place-content: center;
+        gap: var(--dees-spacing-xs);
+        height: 100%;
+        min-height: 120px;
+        text-align: center;
+      }
+
+      .emptyTitle {
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size, 13px);
+        font-weight: 600;
+      }
+
+      .emptyText {
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      .jumpChip {
+        position: absolute;
+        left: 50%;
+        bottom: var(--dees-spacing-md);
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        padding: 4px 12px;
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-material-thin-bg);
+        backdrop-filter: var(--dees-material-thin-filter);
+        color: var(--dees-color-text-primary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+        box-shadow: var(--dees-shadow-md);
+      }
+
+      .jumpChip:hover {
+        background: var(--dees-material-thick-bg);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="scroll" @scroll=${this.handleScroll}>
+        ${this.messages.length
+          ? html`
+              <div class="stack">
+                ${repeat(
+                  this.messages,
+                  (message) => message.id,
+                  (message) => html`
+                    <dees-harness-message
+                      data-message-id=${message.id}
+                      .message=${message}
+                      .showRole=${this.showRoles}
+                      .showTimestamp=${this.showTimestamps}
+                      .toolRegistry=${this.toolRegistry}
+                      .suppressEntry=${!this.entryAnimationsEnabled}
+                    ></dees-harness-message>
+                  `,
+                )}
+                <div class="statusRow">
+                  <dees-harness-status .status=${this.status}></dees-harness-status>
+                </div>
+              </div>
+            `
+          : html`
+              <div class="empty">
+                <slot name="empty">
+                  <div class="emptyTitle">${this.emptyTitle}</div>
+                  <div class="emptyText">${this.emptyText}</div>
+                </slot>
+              </div>
+            `}
+      </div>
+      ${this.showJumpChip
+        ? html`
+            <button class="jumpChip" type="button" @click=${() => this.scrollToBottom(true)}>
+              <dees-icon icon="lucide:ArrowDown" iconSize="12"></dees-icon>
+              Jump to latest
+            </button>
+          `
+        : ''}
+    `;
+  }
+
+  // ------------------------------------------------------------------ deltas
+
+  /**
+   * Routes an incremental update to the affected message. Mutates the
+   * message object held in `.messages` so a later full re-assignment stays
+   * idempotent; only the target element re-renders.
+   */
+  public applyDelta(delta: THarnessStreamDelta): void {
+    const message = this.messages.find((candidate) => candidate.id === delta.messageId);
+    if (!message) return;
+    const element = this.messageElement(delta.messageId);
+    switch (delta.type) {
+      case 'text':
+        if (element) element.appendTextDelta(delta.delta);
+        else {
+          message.text += delta.delta;
+          message.streaming = true;
+        }
+        break;
+      case 'reasoning-start':
+        if (element) element.appendReasoningDelta(delta.partId, '', delta.startedAt);
+        else {
+          message.reasoning ??= [];
+          message.reasoning.push({ id: delta.partId, text: '', startedAt: delta.startedAt ?? Date.now() });
+        }
+        break;
+      case 'reasoning':
+        if (element) element.appendReasoningDelta(delta.partId, delta.delta);
+        else {
+          message.reasoning ??= [];
+          const part = message.reasoning.find((candidate) => candidate.id === delta.partId);
+          if (part) part.text += delta.delta;
+          else message.reasoning.push({ id: delta.partId, text: delta.delta, startedAt: Date.now() });
+        }
+        break;
+      case 'reasoning-end':
+        if (element) element.endReasoning(delta.partId, delta.endedAt);
+        else {
+          const part = message.reasoning?.find((candidate) => candidate.id === delta.partId);
+          if (part) part.endedAt = delta.endedAt ?? Date.now();
+        }
+        break;
+      case 'tool-update':
+        message.toolCall = { ...(message.toolCall ?? { id: delta.tool.id, name: '', status: 'pending' }), ...delta.tool };
+        element?.requestUpdate();
+        break;
+      case 'message-end':
+        if (element) element.endStream(delta.usage, delta.error);
+        else {
+          message.streaming = false;
+          if (delta.usage) message.usage = delta.usage;
+          if (delta.error) message.error = delta.error;
+        }
+        break;
+    }
+    this.followAfterContentChange();
+  }
+
+  private messageElement(messageId: string): DeesHarnessMessage | undefined {
+    const element = this.shadowRoot?.querySelector(`dees-harness-message[data-message-id="${CSS.escape(messageId)}"]`);
+    return element instanceof DeesHarnessMessage ? element : undefined;
+  }
+
+  // ------------------------------------------------------------------ scroll
+
+  private get scrollContainer(): HTMLElement | null {
+    return this.shadowRoot?.querySelector('.scroll') ?? null;
+  }
+
+  public get isPinnedToBottom(): boolean {
+    const container = this.scrollContainer;
+    if (!container) return true;
+    return container.scrollHeight - container.scrollTop - container.clientHeight < pinThresholdPx;
+  }
+
+  private followFrame = 0;
+  private settleTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  private followAfterContentChange(): void {
+    if (!this.autoFollow) return;
+    if (this.isPinnedToBottom) {
+      if (!this.followFrame) {
+        this.followFrame = requestAnimationFrame(() => {
+          this.followFrame = 0;
+          this.scrollToBottom(true);
+        });
+      }
+      // entry animations grow content for ~200ms after insertion; follow
+      // through once they settle (unless the user scrolled far away)
+      if (this.settleTimeout) clearTimeout(this.settleTimeout);
+      this.settleTimeout = setTimeout(() => {
+        this.settleTimeout = null;
+        const container = this.scrollContainer;
+        if (!container) return;
+        const distance = container.scrollHeight - container.scrollTop - container.clientHeight;
+        if (distance < 400) this.scrollToBottom(true);
+      }, 250);
+    } else {
+      this.showJumpChip = true;
+    }
+  }
+
+  public scrollToBottom(force = false): void {
+    const container = this.scrollContainer;
+    if (!container) return;
+    if (force || this.isPinnedToBottom) {
+      container.scrollTop = container.scrollHeight;
+      this.showJumpChip = false;
+    }
+  }
+
+  private handleScroll = (): void => {
+    if (this.isPinnedToBottom && this.showJumpChip) {
+      this.showJumpChip = false;
+    }
+  };
+
+  public updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('messages') || changedProperties.has('status')) {
+      this.followAfterContentChange();
+    }
+  }
+
+  public firstUpdated(changedProperties: Map<string, any>): void {
+    super.firstUpdated(changedProperties);
+    // let the initial batch paint without entry animations, then enable them
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.entryAnimationsEnabled = true;
+      });
+    });
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    if (this.followFrame) {
+      cancelAnimationFrame(this.followFrame);
+      this.followFrame = 0;
+    }
+    if (this.settleTimeout) {
+      clearTimeout(this.settleTimeout);
+      this.settleTimeout = null;
+    }
+    await super.disconnectedCallback();
+  }
+}

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

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

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

@@ -0,0 +1,47 @@
+import { html } from '@design.estate/dees-element';
+
+const logResponse = (event: CustomEvent) => {
+  console.log('harness-permission-response', event.detail);
+};
+
+export const demoFunc = () => html`
+  <style>
+    .permissionDemo {
+      display: grid;
+      gap: 16px;
+      max-width: 640px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-primary);
+    }
+  </style>
+  <div class="permissionDemo" @harness-permission-response=${logResponse}>
+    <dees-harness-permission-card
+      .request=${{
+        id: 'p1',
+        title: 'Run shell command',
+        type: 'shell',
+        createdAt: Date.now(),
+        metadata: { command: 'rm -rf node_modules && pnpm install', cwd: '/srv/app' },
+      }}
+    ></dees-harness-permission-card>
+    <dees-harness-permission-card
+      .request=${{
+        id: 'p2',
+        title: 'Write file',
+        type: 'write',
+        metadata: { path: '/srv/app/src/config.ts', bytes: 812 },
+      }}
+    ></dees-harness-permission-card>
+    <dees-harness-permission-card
+      busy
+      .request=${{
+        id: 'p3',
+        title: 'Navigate browser',
+        type: 'browser',
+        metadata: { action: 'navigate', url: 'https://admin.example.com' },
+      }}
+    ></dees-harness-permission-card>
+  </div>
+`;

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

@@ -0,0 +1,225 @@
+import { demoFunc } from './dees-harness-permission-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 { IHarnessPermissionRequest, THarnessPermissionResponse } from '../interfaces.js';
+import { harnessStringifyValue } from '../harness.helpers.js';
+import '../../00group-button/dees-button/dees-button.js';
+import '../../00group-feedback/dees-badge/dees-badge.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-permission-card': DeesHarnessPermissionCard;
+  }
+}
+
+const badgeTypeForPermission = (permissionType: string): 'error' | 'warning' | 'default' => {
+  if (permissionType === 'delete' || permissionType === 'shell') return 'error';
+  if (permissionType === 'write' || permissionType === 'browser') return 'warning';
+  return 'default';
+};
+
+/**
+ * Permission prompt card: title, type badge, metadata key/values, and the
+ * once / always / reject choices with an optional remember checkbox. Emits
+ * `harness-permission-response` (bubbles, composed) and disables itself
+ * once answered or while `busy`.
+ */
+@customElement('dees-harness-permission-card')
+export class DeesHarnessPermissionCard extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor request: IHarnessPermissionRequest = { id: '', title: '', type: 'permission' };
+
+  @property({ type: Boolean })
+  accessor busy: boolean = false;
+
+  @state()
+  accessor remember: boolean = false;
+
+  @state()
+  accessor answered: THarnessPermissionResponse | undefined = undefined;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    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;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          animation: none;
+        }
+      }
+
+      .card {
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border: 1px solid var(--dees-color-border-default);
+        border-left: 2px solid var(--dees-color-accent-warning);
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-badge-warning-bg);
+      }
+
+      .titleRow {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        margin-bottom: var(--dees-spacing-xs);
+      }
+
+      .titleRow dees-icon {
+        color: var(--dees-color-accent-warning);
+      }
+
+      .title {
+        flex: 1;
+        min-width: 0;
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 600;
+      }
+
+      .metaGrid {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: 2px var(--dees-spacing-md);
+        margin: var(--dees-spacing-xs) 0 var(--dees-spacing-sm);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+
+      .metaKey {
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+      }
+
+      .metaValue {
+        color: var(--dees-color-text-primary);
+        font-family: var(--dees-font-family-mono);
+        overflow-wrap: anywhere;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        flex-wrap: wrap;
+      }
+
+      .rememberLabel {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        margin-left: auto;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .answeredNote {
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const request = this.request;
+    const disabled = this.busy || this.answered !== undefined;
+    const metadataEntries = Object.entries(request.metadata ?? {});
+    return html`
+      <div class="card">
+        <div class="titleRow">
+          <dees-icon icon="lucide:ShieldQuestionMark" iconSize="15"></dees-icon>
+          <span class="title">${request.title || 'Permission requested'}</span>
+          <dees-badge type=${badgeTypeForPermission(request.type)} .text=${request.type} rounded></dees-badge>
+        </div>
+        ${metadataEntries.length
+          ? html`
+              <div class="metaGrid">
+                ${metadataEntries.map(([key, value]) => html`
+                  <div class="metaKey">${key}</div>
+                  <div class="metaValue">${harnessStringifyValue(value)}</div>
+                `)}
+              </div>
+            `
+          : ''}
+        <div class="actions">
+          ${this.answered
+            ? html`<span class="answeredNote">Answered: ${this.answered}${this.remember ? ' (remembered)' : ''}</span>`
+            : html`
+                <dees-button type="accent" size="sm" ?disabled=${disabled} @clicked=${() => this.respond('once')}>
+                  Allow Once
+                </dees-button>
+                <dees-button size="sm" ?disabled=${disabled} @clicked=${() => this.respond('always')}>
+                  Always Allow
+                </dees-button>
+                <dees-button type="destructive" size="sm" ?disabled=${disabled} @clicked=${() => this.respond('reject')}>
+                  Reject
+                </dees-button>
+                <label class="rememberLabel">
+                  <input
+                    type="checkbox"
+                    .checked=${this.remember}
+                    ?disabled=${disabled}
+                    @change=${(event: Event) => {
+                      this.remember = (event.currentTarget as HTMLInputElement).checked;
+                    }}
+                  />
+                  remember for this session
+                </label>
+              `}
+        </div>
+      </div>
+    `;
+  }
+
+  private respond(response: THarnessPermissionResponse): void {
+    if (this.busy || this.answered !== undefined) return;
+    this.answered = response;
+    this.dispatchEvent(
+      new CustomEvent('harness-permission-response', {
+        detail: {
+          requestId: this.request.id,
+          response,
+          remember: this.remember || response === 'always',
+          request: this.request,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

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

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

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

@@ -0,0 +1,32 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .reasoningDemo {
+      display: grid;
+      gap: 16px;
+      max-width: 640px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-secondary);
+    }
+  </style>
+  <div class="reasoningDemo">
+    <dees-harness-reasoning
+      .reasoningPart=${{
+        id: 'r1',
+        text: 'The user wants a summary of the failing test. I should read the test output first, then check the assertion that failed and compare with the fixture data.',
+        startedAt: Date.now() - 4200,
+        endedAt: Date.now(),
+      }}
+    ></dees-harness-reasoning>
+    <dees-harness-reasoning
+      .reasoningPart=${{
+        id: 'r2',
+        text: 'Considering the tradeoffs between the two migration paths',
+        startedAt: Date.now() - 1500,
+      }}
+    ></dees-harness-reasoning>
+  </div>
+`;