@design.estate/dees-catalog 3.91.0 → 3.92.0

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

@@ -0,0 +1,195 @@
+import { demoFunc } from './dees-harness-reasoning.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessReasoningPart } from '../interfaces.js';
+import { harnessFormatDuration } from '../harness.helpers.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-reasoning': DeesHarnessReasoning;
+  }
+}
+
+/**
+ * Reasoning ("thinking") disclosure for one reasoning part. Auto-opens while
+ * the part is streaming (no endedAt) unless the user has interacted; the
+ * user's expand/collapse choice wins afterwards and survives re-renders
+ * because it lives on this element, not in the parent's template.
+ */
+@customElement('dees-harness-reasoning')
+export class DeesHarnessReasoning extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor reasoningPart: IHarnessReasoningPart = { id: '', text: '' };
+
+  @state()
+  accessor expanded: boolean | undefined = undefined;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--dees-font-family);
+      }
+
+      .reasoning {
+        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);
+        overflow: hidden;
+        animation: harness-reasoning-enter var(--dees-transition-default) var(--dees-ease-out);
+      }
+
+      @keyframes harness-reasoning-enter {
+        from {
+          opacity: 0;
+          transform: translateY(-3px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* Expand/collapse animates through the 0fr→1fr grid trick so the body
+         stays in the DOM and both directions transition smoothly. */
+      .bodyWrap {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows var(--dees-transition-default) var(--dees-ease-standard);
+      }
+
+      .bodyWrap.open {
+        grid-template-rows: 1fr;
+      }
+
+      .bodyWrap > .bodyClip {
+        overflow: hidden;
+        min-height: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .reasoning {
+          animation: none;
+        }
+        .bodyWrap,
+        .chevron {
+          transition: none;
+        }
+      }
+
+      .summary {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-xs) var(--dees-spacing-md);
+        border: 0;
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 600;
+        text-align: left;
+      }
+
+      .summary:hover {
+        color: var(--dees-color-text-primary);
+      }
+
+      .chevron {
+        display: grid;
+        place-items: center;
+        transition: transform var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .chevron.open {
+        transform: rotate(90deg);
+      }
+
+      .duration {
+        margin-left: auto;
+        color: var(--dees-color-text-muted);
+        font-weight: 400;
+      }
+
+      .thinkingDots::after {
+        content: '';
+        display: inline-block;
+        width: 1.2em;
+        text-align: left;
+        animation: harness-reasoning-dots 1.2s steps(4, end) infinite;
+      }
+
+      @keyframes harness-reasoning-dots {
+        0% { content: ''; }
+        25% { content: '.'; }
+        50% { content: '..'; }
+        75%, 100% { content: '...'; }
+      }
+
+      .body {
+        margin: 0;
+        padding: 0 var(--dees-spacing-md) var(--dees-spacing-sm);
+        color: var(--dees-color-text-secondary);
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        font-size: var(--dees-font-caption1-size, 11px);
+        line-height: 1.5;
+      }
+    `,
+  ];
+
+  public get isStreaming(): boolean {
+    return Boolean(this.reasoningPart.startedAt) && !this.reasoningPart.endedAt;
+  }
+
+  public get isOpen(): boolean {
+    return this.expanded ?? this.isStreaming;
+  }
+
+  public render(): TemplateResult {
+    const duration = harnessFormatDuration(this.reasoningPart.startedAt, this.reasoningPart.endedAt);
+    return html`
+      <div class="reasoning">
+        <button
+          class="summary"
+          type="button"
+          aria-expanded=${this.isOpen ? 'true' : 'false'}
+          @click=${() => {
+            this.expanded = !this.isOpen;
+          }}
+        >
+          <span class="chevron ${this.isOpen ? 'open' : ''}">
+            <dees-icon icon="lucide:ChevronRight" iconSize="12"></dees-icon>
+          </span>
+          <span class=${this.isStreaming ? 'thinkingDots' : ''}>
+            ${this.isStreaming ? 'Thinking' : 'Thought'}
+          </span>
+          ${duration ? html`<span class="duration">${duration}</span>` : ''}
+        </button>
+        <div class="bodyWrap ${this.isOpen ? 'open' : ''}" aria-hidden=${this.isOpen ? 'false' : 'true'}>
+          <div class="bodyClip">
+            <pre class="body">${this.reasoningPart.text || (this.isStreaming ? 'Waiting for reasoning…' : 'No reasoning emitted.')}</pre>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

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

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

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

@@ -0,0 +1,59 @@
+import { html } from '@design.estate/dees-element';
+import type { IHarnessSessionMeta } from '../interfaces.js';
+
+const demoSessions: IHarnessSessionMeta[] = Array.from({ length: 24 }, (_, index) => ({
+  id: `session-${index}`,
+  title: [
+    'Fix sitemap cache key',
+    'Investigate 429s from model endpoint',
+    'Refactor workbench layout',
+    'Add diff support to codebox',
+    'Release 3.91.0',
+    'Migrate agent chat to harness group',
+  ][index % 6],
+  createdAt: Date.now() - (index + 2) * 3_600_000,
+  updatedAt: Date.now() - (index + 1) * 3_500_000,
+  messageCount: 4 + (index % 9),
+  preview: 'Latest: the regression test asserts the cache key stays stable across…',
+}));
+
+const openModal = async () => {
+  const { DeesModal } = await import('../../00group-overlay/dees-modal/dees-modal.js');
+  const content = document.createElement('dees-harness-session-list');
+  content.sessions = demoSessions;
+  content.style.height = '420px';
+  content.addEventListener('harness-session-open', (event) => {
+    console.log('open session', (event as CustomEvent).detail.session);
+  });
+  DeesModal.createAndShow({
+    heading: 'Conversations',
+    content: html`${content}`,
+    menuOptions: [],
+  });
+};
+
+export const demoFunc = () => html`
+  <style>
+    .sessionDemo {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      gap: 12px;
+      height: 480px;
+      max-width: 420px;
+      margin: 40px auto;
+      padding: 16px;
+      border-radius: var(--dees-radius-xl);
+      border: 1px solid var(--dees-color-border-subtle);
+      background: var(--dees-color-bg-secondary);
+    }
+    .sessionDemo dees-harness-session-list { min-height: 0; }
+  </style>
+  <div class="sessionDemo">
+    <dees-button @clicked=${openModal}>Open in a DeesModal</dees-button>
+    <dees-harness-session-list
+      .sessions=${demoSessions}
+      selectedSessionId="session-2"
+      @harness-session-select=${(event: CustomEvent) => console.log('select', event.detail.session)}
+    ></dees-harness-session-list>
+  </div>
+`;

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

@@ -0,0 +1,222 @@
+import { demoFunc } from './dees-harness-session-list.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessSessionMeta } from '../interfaces.js';
+import { harnessFormatRelativeTime } from '../harness.helpers.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-session-list': DeesHarnessSessionList;
+  }
+}
+
+/**
+ * Searchable conversation list, embeddable in a sidebar or a DeesModal.
+ * Emits `harness-session-select` on click and `harness-session-open` on
+ * double-click or Enter.
+ */
+@customElement('dees-harness-session-list')
+export class DeesHarnessSessionList extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor sessions: IHarnessSessionMeta[] = [];
+
+  @property()
+  accessor selectedSessionId: string = '';
+
+  @property({ type: Boolean })
+  accessor loading: boolean = false;
+
+  @property()
+  accessor emptyText: string = 'No conversations yet.';
+
+  @state()
+  accessor search: string = '';
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        font-family: var(--dees-font-family);
+      }
+
+      .searchRow {
+        flex: 0 0 auto;
+        padding: var(--dees-spacing-sm);
+      }
+
+      .searchRow input {
+        width: 100%;
+        height: var(--dees-control-height-sm);
+        padding: 0 var(--dees-spacing-md);
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
+        font-family: inherit;
+        font-size: var(--dees-font-control-size, 13px);
+        outline: none;
+        box-sizing: border-box;
+      }
+
+      .searchRow input:focus {
+        border-color: var(--dees-color-accent-primary);
+        box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
+      }
+
+      .list {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+        padding: 0 var(--dees-spacing-xs) var(--dees-spacing-xs);
+        display: grid;
+        gap: 2px;
+        align-content: start;
+      }
+
+      .item {
+        width: 100%;
+        display: block;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border: 0;
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: transparent;
+        color: var(--dees-color-text-primary);
+        cursor: pointer;
+        font-family: inherit;
+        text-align: left;
+        transition: background var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .item:hover {
+        background: var(--dees-color-hover);
+      }
+
+      .item.selected {
+        background: var(--dees-color-active);
+        box-shadow: inset 2px 0 0 var(--dees-color-accent-primary);
+      }
+
+      .itemTitle {
+        display: flex;
+        align-items: baseline;
+        gap: var(--dees-spacing-sm);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 500;
+      }
+
+      .itemTitle .titleText {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .itemTime {
+        margin-left: auto;
+        flex: 0 0 auto;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+      }
+
+      .itemPreview {
+        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;
+      }
+
+      .emptyNote {
+        padding: var(--dees-spacing-lg);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        text-align: center;
+      }
+    `,
+  ];
+
+  private get filteredSessions(): IHarnessSessionMeta[] {
+    const query = this.search.trim().toLowerCase();
+    const sorted = [...this.sessions].sort(
+      (left, right) => (right.updatedAt ?? right.createdAt ?? 0) - (left.updatedAt ?? left.createdAt ?? 0),
+    );
+    if (!query) return sorted;
+    return sorted.filter((session) =>
+      [session.title, session.preview, session.id].filter(Boolean).join(' ').toLowerCase().includes(query),
+    );
+  }
+
+  public focusSearch(): void {
+    this.shadowRoot?.querySelector<HTMLInputElement>('.searchRow input')?.focus();
+  }
+
+  public render(): TemplateResult {
+    const sessions = this.filteredSessions;
+    return html`
+      <div class="searchRow">
+        <input
+          placeholder="Search conversations"
+          .value=${this.search}
+          @input=${(event: Event) => {
+            this.search = (event.currentTarget as HTMLInputElement).value;
+          }}
+        />
+      </div>
+      <div class="list">
+        ${this.loading
+          ? html`<div class="emptyNote">Loading conversations…</div>`
+          : sessions.length
+            ? sessions.map((session) => this.renderItem(session))
+            : html`<div class="emptyNote">${this.sessions.length ? 'No conversations match this search.' : this.emptyText}</div>`}
+      </div>
+    `;
+  }
+
+  private renderItem(session: IHarnessSessionMeta): TemplateResult {
+    return html`
+      <button
+        class="item ${session.id === this.selectedSessionId ? 'selected' : ''}"
+        type="button"
+        @click=${() => this.emit('harness-session-select', session)}
+        @dblclick=${() => this.emit('harness-session-open', session)}
+        @keydown=${(event: KeyboardEvent) => {
+          if (event.key === 'Enter') this.emit('harness-session-open', session);
+        }}
+      >
+        <span class="itemTitle">
+          <span class="titleText">${session.title || session.id}</span>
+          <span class="itemTime">${harnessFormatRelativeTime(session.updatedAt ?? session.createdAt)}</span>
+        </span>
+        ${session.preview
+          ? html`<span class="itemPreview">${session.preview}${session.messageCount ? ` · ${session.messageCount} messages` : ''}</span>`
+          : ''}
+      </button>
+    `;
+  }
+
+  private emit(name: string, session: IHarnessSessionMeta): void {
+    this.dispatchEvent(new CustomEvent(name, { detail: { session }, bubbles: true, composed: true }));
+  }
+}

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

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

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

@@ -0,0 +1,35 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .statusDemo {
+      display: grid;
+      gap: 16px;
+      max-width: 520px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-secondary);
+    }
+    .statusDemo .label {
+      color: var(--dees-color-text-muted);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+  </style>
+  <div class="statusDemo">
+    <div class="label">busy (default message)</div>
+    <dees-harness-status .status=${{ type: 'busy' as const }}></dees-harness-status>
+    <div class="label">busy with detail</div>
+    <dees-harness-status
+      .status=${{ type: 'busy' as const, message: 'Running tests — 3 of 12 files' }}
+    ></dees-harness-status>
+    <div class="label">error</div>
+    <dees-harness-status
+      .status=${{ type: 'error' as const, message: 'The model endpoint returned 429.' }}
+    ></dees-harness-status>
+    <div class="label">idle with showIdle</div>
+    <dees-harness-status .status=${{ type: 'idle' as const }} showIdle></dees-harness-status>
+  </div>
+`;

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

@@ -0,0 +1,187 @@
+import { demoFunc } from './dees-harness-status.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessStatus } from '../interfaces.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-status': DeesHarnessStatus;
+  }
+}
+
+/** matches --dees-transition-default (0.2s) — the CSS leave transition and the
+ * DOM removal below must stay paired */
+const leaveDurationMs = 200;
+
+/**
+ * Live status line for an agent run: idle (renders nothing unless
+ * showIdle), busy with animated dots, or error. Enter and leave are
+ * animated — on a transition to idle the previous status keeps rendering
+ * with a leave transition before the element empties, so consumers can
+ * bind `.status` directly without orchestrating exit animations.
+ * aria-live so screen readers announce transitions.
+ */
+@customElement('dees-harness-status')
+export class DeesHarnessStatus extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor status: IHarnessStatus = { type: 'idle' };
+
+  @property({ type: Boolean })
+  accessor showIdle: boolean = false;
+
+  @state()
+  accessor leaving: boolean = false;
+
+  private lastVisibleStatus: IHarnessStatus | null = null;
+  private leaveTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--dees-font-family);
+      }
+
+      .status {
+        display: flex;
+        align-items: center;
+        margin: var(--dees-spacing-xs) 0;
+        gap: var(--dees-spacing-sm);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        line-height: 1.4;
+        white-space: pre-wrap;
+        animation: harness-status-enter var(--dees-transition-default) var(--dees-ease-out);
+        transition:
+          opacity var(--dees-transition-default) var(--dees-ease-in),
+          transform var(--dees-transition-default) var(--dees-ease-in);
+      }
+
+      .status.leaving {
+        opacity: 0;
+        transform: translateY(2px);
+      }
+
+      @keyframes harness-status-enter {
+        from {
+          opacity: 0;
+          transform: translateY(-2px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .status.error {
+        color: var(--dees-color-text-error);
+      }
+
+      .dots {
+        display: inline-flex;
+        gap: 3px;
+      }
+
+      .dots span {
+        width: 4px;
+        height: 4px;
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-color-accent-primary);
+        animation: harness-status-pulse 1.2s ease-in-out infinite;
+      }
+
+      .dots span:nth-child(2) {
+        animation-delay: 0.15s;
+      }
+
+      .dots span:nth-child(3) {
+        animation-delay: 0.3s;
+      }
+
+      @keyframes harness-status-pulse {
+        0%, 80%, 100% {
+          opacity: 0.25;
+          transform: scale(0.8);
+        }
+        40% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .status {
+          animation: none;
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  public willUpdate(changedProperties: Map<string, any>): void {
+    super.willUpdate(changedProperties);
+    if (!changedProperties.has('status')) return;
+    if (this.status.type !== 'idle') {
+      this.lastVisibleStatus = this.status;
+      this.leaving = false;
+      this.clearLeaveTimeout();
+    } else if (this.lastVisibleStatus && !this.showIdle) {
+      // keep the previous status rendered while it fades out
+      this.leaving = true;
+      this.clearLeaveTimeout();
+      this.leaveTimeout = setTimeout(() => {
+        this.leaveTimeout = null;
+        this.lastVisibleStatus = null;
+        this.leaving = false;
+      }, leaveDurationMs);
+    }
+  }
+
+  public render(): TemplateResult {
+    if (this.status.type === 'idle' && !this.showIdle && !this.leaving) {
+      return html``;
+    }
+    const shown = this.leaving ? this.lastVisibleStatus! : this.status;
+    return html`
+      <div class="status ${shown.type} ${this.leaving ? 'leaving' : ''}" aria-live="polite" role="status">
+        ${shown.type === 'busy'
+          ? html`<span class="dots"><span></span><span></span><span></span></span>`
+          : ''}
+        <span>${this.statusText(shown)}</span>
+      </div>
+    `;
+  }
+
+  private statusText(status: IHarnessStatus): string {
+    if (status.message) return status.message;
+    if (status.type === 'busy') return 'Working…';
+    if (status.type === 'error') return 'Something went wrong.';
+    return 'Idle';
+  }
+
+  private clearLeaveTimeout(): void {
+    if (this.leaveTimeout) {
+      clearTimeout(this.leaveTimeout);
+      this.leaveTimeout = null;
+    }
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    this.clearLeaveTimeout();
+    await super.disconnectedCallback();
+  }
+}

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

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