@design.estate/dees-catalog 3.91.0 → 3.93.0

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

@@ -0,0 +1,363 @@
+import { demoFunc } from './dees-harness-chat.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type {
+  IHarnessAttachment,
+  IHarnessMessage,
+  IHarnessPermissionRequest,
+  IHarnessStatus,
+  IHarnessTodoItem,
+  IHarnessUsage,
+  THarnessStreamDelta,
+} from '../interfaces.js';
+import { harnessParseTodos } from '../harness.helpers.js';
+import { DeesHarnessToolRegistry } from '../toolregistry.js';
+import { DeesHarnessMessageList } from '../dees-harness-message-list/dees-harness-message-list.js';
+import { DeesHarnessComposer } from '../dees-harness-composer/dees-harness-composer.js';
+import '../dees-harness-permission-card/dees-harness-permission-card.js';
+import '../dees-harness-status/dees-harness-status.js';
+import '../dees-harness-todos/dees-harness-todos.js';
+import '../dees-harness-usage/dees-harness-usage.js';
+import '../../00group-button/dees-button/dees-button.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-chat': DeesHarnessChat;
+  }
+}
+
+// stable idle binding for the embedded list — a fresh object literal per
+// render would re-trigger its follow logic on every chat render
+const idleStatus: IHarnessStatus = { type: 'idle' };
+
+/**
+ * The assembled agent chat: optional toolbar, streaming message list,
+ * pinned permission queue, status line, and composer. Owns no business
+ * logic — consumers feed `.messages`/`.permissions`/`.status` (and stream
+ * through `applyDelta()`), and listen for the bubbling harness-* events
+ * from the children plus `harness-new-session` / `harness-open-sessions`
+ * from the toolbar.
+ */
+@customElement('dees-harness-chat')
+export class DeesHarnessChat extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor messages: IHarnessMessage[] = [];
+
+  @property({ attribute: false })
+  accessor permissions: IHarnessPermissionRequest[] = [];
+
+  @property({ attribute: false })
+  accessor status: IHarnessStatus = { type: 'idle' };
+
+  @property({ attribute: false })
+  accessor usage: IHarnessUsage = {};
+
+  /**
+   * Current task list for the side panel. When empty, the panel derives it
+   * from the newest todo tool call in `messages` (registry kind 'todo'), so
+   * hosts that stream todowrite calls get the sidebar for free.
+   */
+  @property({ attribute: false })
+  accessor todos: IHarnessTodoItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showTodosPanel: boolean = true;
+
+  @property()
+  accessor heading: string = '';
+
+  @property()
+  accessor subheading: string = '';
+
+  @property({ type: Boolean })
+  accessor showToolbar: boolean = true;
+
+  @property({ type: Boolean })
+  accessor showRoles: boolean = true;
+
+  @property({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @property({ type: Boolean })
+  accessor busy: boolean = false;
+
+  /** queued-message count while busy; enables the composer's "Steer now" */
+  @property({ type: Number })
+  accessor queuedCount: number = 0;
+
+  @property()
+  accessor composerValue: string = '';
+
+  @property({ attribute: false })
+  accessor attachments: IHarnessAttachment[] = [];
+
+  @property()
+  accessor model: string = '';
+
+  @property({ attribute: false })
+  accessor modelOptions: string[] = [];
+
+  @property()
+  accessor reasoningEffort: string = '';
+
+  @property({ attribute: false })
+  accessor effortOptions: string[] = [];
+
+  @property({ attribute: false })
+  accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        height: 100%;
+        font-family: var(--dees-font-family);
+        color: var(--dees-color-text-primary);
+        background: var(--dees-color-bg-primary);
+        container-type: inline-size;
+      }
+
+      .chatBody {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+      }
+
+      .todosPanel {
+        flex: 0 0 232px;
+        min-width: 0;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border-left: 1px solid var(--dees-color-border-subtle);
+        background: var(--dees-color-bg-secondary);
+      }
+
+      /* narrow hosts (e.g. a sidebar chat) drop the panel; todo tool cards
+         in the transcript still carry the same information */
+      @container (max-width: 520px) {
+        .todosPanel {
+          display: none;
+        }
+      }
+
+      .toolbar {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-md);
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        background: var(--dees-color-bg-secondary);
+      }
+
+      .headingBlock {
+        min-width: 0;
+        flex: 1;
+      }
+
+      .headingText {
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size, 13px);
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .subheadingText {
+        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;
+      }
+
+      .toolbarActions {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        flex: 0 0 auto;
+      }
+
+      .chatBody dees-harness-message-list {
+        flex: 1;
+        min-height: 0;
+      }
+
+      .permissionQueue {
+        flex: 0 0 auto;
+        display: block;
+        padding: 0 var(--dees-spacing-md);
+        max-height: 40%;
+        overflow-y: auto;
+      }
+
+      .permissionQueue > * + * {
+        margin-top: var(--dees-spacing-xs);
+      }
+
+      /* always mounted so the status leave transition can play; the status
+         element renders empty when idle, collapsing the row to zero height */
+      .statusRow {
+        flex: 0 0 auto;
+        padding: 0 var(--dees-spacing-md);
+      }
+
+      .statusRow dees-harness-status {
+        margin: 0;
+      }
+
+      .composerRow {
+        flex: 0 0 auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
+      }
+    `,
+  ];
+
+  // ---------------------------------------------------------------- methods
+
+  /** Streams an incremental update into the message list. */
+  public applyDelta(delta: THarnessStreamDelta): void {
+    this.listElement?.applyDelta(delta);
+  }
+
+  public async focusComposer(): Promise<void> {
+    await this.updateComplete;
+    await this.composerElement?.focusPrompt();
+  }
+
+  public clearComposer(): void {
+    this.composerValue = '';
+    this.composerElement?.clear();
+  }
+
+  public scrollToBottom(force = false): void {
+    this.listElement?.scrollToBottom(force);
+  }
+
+  public get effectiveTodos(): IHarnessTodoItem[] {
+    if (this.todos.length) return this.todos;
+    // the newest todo call is the current state — an empty write clears
+    // the panel instead of falling back to an older list
+    for (let index = this.messages.length - 1; index >= 0; index--) {
+      const call = this.messages[index]?.toolCall;
+      if (!call) continue;
+      if (this.toolRegistry.resolve(call).kind !== 'todo') continue;
+      return harnessParseTodos(call.input);
+    }
+    return [];
+  }
+
+  private get listElement(): DeesHarnessMessageList | undefined {
+    const element = this.shadowRoot?.querySelector('dees-harness-message-list');
+    return element instanceof DeesHarnessMessageList ? element : undefined;
+  }
+
+  private get composerElement(): DeesHarnessComposer | undefined {
+    const element = this.shadowRoot?.querySelector('dees-harness-composer');
+    return element instanceof DeesHarnessComposer ? element : undefined;
+  }
+
+  // ----------------------------------------------------------------- render
+
+  public render(): TemplateResult {
+    return html`
+      ${this.showToolbar ? this.renderToolbar() : ''}
+      <div class="chatBody">
+        <dees-harness-message-list
+          .messages=${this.messages}
+          .status=${idleStatus}
+          .showRoles=${this.showRoles}
+          .toolRegistry=${this.toolRegistry}
+        ></dees-harness-message-list>
+        ${this.showTodosPanel && this.effectiveTodos.length
+          ? html`
+              <aside class="todosPanel">
+                <dees-harness-todos heading="Tasks" .todos=${this.effectiveTodos}></dees-harness-todos>
+              </aside>
+            `
+          : ''}
+      </div>
+      ${this.permissions.length
+        ? html`
+            <div class="permissionQueue">
+              ${this.permissions.map(
+                (request) => html`
+                  <dees-harness-permission-card .request=${request} .busy=${this.disabled}></dees-harness-permission-card>
+                `,
+              )}
+            </div>
+          `
+        : ''}
+      <div class="statusRow">
+        <dees-harness-status .status=${this.status}></dees-harness-status>
+      </div>
+      <div class="composerRow">
+        <dees-harness-composer
+          .value=${this.composerValue}
+          .attachments=${this.attachments}
+          .disabled=${this.disabled}
+          .busy=${this.busy || this.status.type === 'busy'}
+          .queuedCount=${this.queuedCount}
+          .model=${this.model}
+          .modelOptions=${this.modelOptions}
+          .reasoningEffort=${this.reasoningEffort}
+          .effortOptions=${this.effortOptions}
+          @harness-input=${(event: CustomEvent<{ value: string }>) => {
+            this.composerValue = event.detail?.value ?? '';
+          }}
+          @harness-attachments-change=${(event: CustomEvent<{ attachments: IHarnessAttachment[] }>) => {
+            this.attachments = event.detail?.attachments ?? [];
+          }}
+          @harness-model-change=${(event: CustomEvent<{ model?: string; reasoningEffort?: string }>) => {
+            if (event.detail?.model) this.model = event.detail.model;
+            if (event.detail?.reasoningEffort) this.reasoningEffort = event.detail.reasoningEffort;
+          }}
+        ></dees-harness-composer>
+      </div>
+    `;
+  }
+
+  private renderToolbar(): TemplateResult {
+    return html`
+      <div class="toolbar">
+        <div class="headingBlock">
+          <div class="headingText">${this.heading || 'Agent'}</div>
+          ${this.subheading ? html`<div class="subheadingText">${this.subheading}</div>` : ''}
+        </div>
+        <div class="toolbarActions">
+          <dees-harness-usage compact .usage=${this.usage}></dees-harness-usage>
+          <dees-button size="sm" type="ghost" title="Conversations" @clicked=${() => this.emit('harness-open-sessions')}>
+            <dees-icon icon="lucide:History" iconSize="14"></dees-icon>
+          </dees-button>
+          <dees-button size="sm" type="ghost" title="New conversation" @clicked=${() => this.emit('harness-new-session')}>
+            <dees-icon icon="lucide:SquarePen" iconSize="14"></dees-icon>
+          </dees-button>
+        </div>
+      </div>
+    `;
+  }
+
+  private emit(name: string): void {
+    this.dispatchEvent(new CustomEvent(name, { detail: {}, bubbles: true, composed: true }));
+  }
+}

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

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

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

@@ -0,0 +1,56 @@
+import { html } from '@design.estate/dees-element';
+
+const logEvent = (event: CustomEvent) => {
+  console.log(event.type, event.detail);
+};
+
+export const demoFunc = () => html`
+  <style>
+    .composerDemo {
+      display: grid;
+      gap: 20px;
+      max-width: 680px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-primary);
+    }
+    .composerDemo .label {
+      color: var(--dees-color-text-muted);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+  </style>
+  <div
+    class="composerDemo"
+    @harness-send=${logEvent}
+    @harness-abort=${logEvent}
+    @harness-input=${logEvent}
+    @harness-attachments-change=${logEvent}
+    @harness-attachment-error=${logEvent}
+    @harness-model-change=${logEvent}
+  >
+    <div class="label">default with model controls (events log to console)</div>
+    <dees-harness-composer
+      model="gpt-5.5"
+      reasoningEffort="high"
+      .modelOptions=${['gpt-5.5', 'gpt-5', 'o4-mini']}
+      .effortOptions=${['xhigh', 'high', 'medium', 'low']}
+    ></dees-harness-composer>
+    <div class="label">busy with text (Stop + Send — sends queue while running)</div>
+    <dees-harness-composer busy value="Refactor the sitemap job…"></dees-harness-composer>
+    <div class="label">busy, empty prompt, 2 queued (Stop + Steer now)</div>
+    <dees-harness-composer busy queuedCount="2"></dees-harness-composer>
+    <div class="label">disabled</div>
+    <dees-harness-composer disabled placeholder="Connect to a project to chat."></dees-harness-composer>
+    <div class="label">with pre-filled attachments, no model controls</div>
+    <dees-harness-composer
+      .showModelControls=${false}
+      .attachments=${[
+        { id: 'a1', name: 'build.log', mediaType: 'text/plain', size: 5120, kind: 'text' as const },
+        { id: 'a2', name: 'screenshot.png', mediaType: 'image/png', size: 44_000, kind: 'image' as const },
+      ]}
+    ></dees-harness-composer>
+  </div>
+`;