@design.estate/dees-catalog 3.93.0 → 3.95.0

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

@@ -0,0 +1,319 @@
+import { demoFunc } from './dees-harness-question-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 { IHarnessQuestionRequest } from '../interfaces.js';
+import '../../00group-button/dees-button/dees-button.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-question-card': DeesHarnessQuestionCard;
+  }
+}
+
+/**
+ * A question the agent asks mid-run: option buttons (single-select answers
+ * immediately, multi-select collects then confirms) plus an optional
+ * free-text answer. Emits `harness-question-response` (bubbles, composed).
+ * Answered cards persist showing the chosen answer(s) — the host sets
+ * `response`/`respondedAt` on the request and keeps it in the array.
+ */
+@customElement('dees-harness-question-card')
+export class DeesHarnessQuestionCard extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor request: IHarnessQuestionRequest = { id: '', question: '' };
+
+  @property({ type: Boolean })
+  accessor busy: boolean = false;
+
+  /** local optimistic answer; request.response (host echo) takes precedence */
+  @state()
+  accessor answered: string[] | undefined = undefined;
+
+  @state()
+  accessor selected: ReadonlySet<string> = new Set<string>();
+
+  @state()
+  accessor customText: string = '';
+
+  public get effectiveResponse(): string[] | undefined {
+    return this.request.response ?? this.answered;
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--dees-font-family);
+        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-primary);
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-secondary);
+      }
+
+      .titleRow {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--dees-spacing-sm);
+        margin-bottom: var(--dees-spacing-sm);
+      }
+
+      .titleRow dees-icon {
+        flex: 0 0 auto;
+        margin-top: 1px;
+        color: var(--dees-color-accent-primary);
+      }
+
+      .questionText {
+        min-width: 0;
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size, 13px);
+        font-weight: 600;
+        line-height: 1.4;
+        overflow-wrap: anywhere;
+      }
+
+      .options {
+        display: block;
+      }
+
+      .options > * + * {
+        margin-top: var(--dees-spacing-xs);
+      }
+
+      .option {
+        width: 100%;
+        display: block;
+        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-primary);
+        color: var(--dees-color-text-primary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+        text-align: left;
+        transition:
+          border-color var(--dees-transition-fast) var(--dees-ease-standard),
+          background var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .option:hover:not(:disabled) {
+        border-color: var(--dees-color-accent-primary);
+      }
+
+      .option.selected {
+        border-color: var(--dees-color-accent-primary);
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 10%, var(--dees-color-bg-primary));
+      }
+
+      .option:disabled {
+        cursor: default;
+        opacity: 0.6;
+      }
+
+      .optionLabel {
+        font-weight: 500;
+      }
+
+      .optionDescription {
+        margin-top: 1px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+
+      .customRow {
+        display: flex;
+        gap: var(--dees-spacing-xs);
+        margin-top: var(--dees-spacing-sm);
+      }
+
+      .customRow input {
+        flex: 1;
+        min-width: 0;
+        height: var(--dees-control-height-sm);
+        padding: 0 var(--dees-spacing-sm);
+        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-sm, 12px);
+        outline: none;
+      }
+
+      .customRow input:focus {
+        border-color: var(--dees-color-accent-primary);
+        box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
+      }
+
+      .confirmRow {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: var(--dees-spacing-sm);
+      }
+
+      .answeredNote {
+        display: flex;
+        align-items: baseline;
+        gap: var(--dees-spacing-sm);
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      .answeredNote .answerText {
+        color: var(--dees-color-text-primary);
+        font-weight: 500;
+        overflow-wrap: anywhere;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const request = this.request;
+    const response = this.effectiveResponse;
+    const disabled = this.busy || response !== undefined;
+    return html`
+      <div class="card">
+        <div class="titleRow">
+          <dees-icon icon="lucide:MessageCircleQuestionMark" iconSize="15"></dees-icon>
+          <span class="questionText">${request.question}</span>
+        </div>
+        ${response
+          ? html`
+              <div class="answeredNote">
+                Answered:
+                <span class="answerText">${response.join(', ') || '—'}</span>
+              </div>
+            `
+          : html`
+              ${request.options?.length
+                ? html`
+                    <div class="options" role=${request.multiSelect ? 'group' : 'radiogroup'}>
+                      ${request.options.map((option) => html`
+                        <button
+                          class="option ${this.selected.has(option.label) ? 'selected' : ''}"
+                          type="button"
+                          ?disabled=${disabled}
+                          @click=${() => this.handleOptionClick(option.label)}
+                        >
+                          <div class="optionLabel">${option.label}</div>
+                          ${option.description
+                            ? html`<div class="optionDescription">${option.description}</div>`
+                            : ''}
+                        </button>
+                      `)}
+                    </div>
+                  `
+                : ''}
+              ${request.allowCustom !== false
+                ? html`
+                    <div class="customRow">
+                      <input
+                        placeholder="Answer in your own words…"
+                        .value=${this.customText}
+                        ?disabled=${disabled}
+                        @input=${(event: Event) => {
+                          this.customText = (event.currentTarget as HTMLInputElement).value;
+                        }}
+                        @keydown=${(event: KeyboardEvent) => {
+                          if (event.key === 'Enter' && this.customText.trim()) {
+                            this.respond([...this.selected, this.customText.trim()]);
+                          }
+                        }}
+                      />
+                      <dees-button
+                        size="sm"
+                        ?disabled=${disabled || (!this.customText.trim() && !this.selected.size)}
+                        @clicked=${() => {
+                          const answers = [...this.selected];
+                          if (this.customText.trim()) answers.push(this.customText.trim());
+                          this.respond(answers);
+                        }}
+                      >Send Answer</dees-button>
+                    </div>
+                  `
+                : ''}
+              ${request.multiSelect && request.allowCustom === false
+                ? html`
+                    <div class="confirmRow">
+                      <dees-button
+                        type="accent"
+                        size="sm"
+                        ?disabled=${disabled || !this.selected.size}
+                        @clicked=${() => this.respond([...this.selected])}
+                      >Confirm</dees-button>
+                    </div>
+                  `
+                : ''}
+            `}
+      </div>
+    `;
+  }
+
+  private handleOptionClick(label: string): void {
+    if (this.busy || this.effectiveResponse !== undefined) return;
+    if (this.request.multiSelect) {
+      const next = new Set(this.selected);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      this.selected = next;
+      return;
+    }
+    this.respond([label]);
+  }
+
+  private respond(answers: string[]): void {
+    if (this.busy || this.effectiveResponse !== undefined || !answers.length) return;
+    this.answered = answers;
+    this.dispatchEvent(
+      new CustomEvent('harness-question-response', {
+        detail: {
+          requestId: this.request.id,
+          answers,
+          request: this.request,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

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

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

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

@@ -13,6 +13,7 @@ export * from './dees-harness-composer/index.js';
 export * from './dees-harness-content-blocks/index.js';
 export * from './dees-harness-message/index.js';
 export * from './dees-harness-permission-card/index.js';
+export * from './dees-harness-question-card/index.js';
 export * from './dees-harness-message-list/index.js';
 export * from './dees-harness-reasoning/index.js';
 export * from './dees-harness-session-list/index.js';

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

@@ -142,10 +142,46 @@ export interface IHarnessPermissionRequest {
   /** open set; well-known values today: write | delete | shell | browser */
   type: string;
   metadata?: Record<string, unknown>;
+  /** set once answered — the card stays in the transcript showing the outcome */
+  response?: THarnessPermissionResponse;
+  /** epoch ms */
+  respondedAt?: number;
 }
 
 export type THarnessPermissionResponse = 'once' | 'always' | 'reject';
 
+export interface IHarnessQuestionOption {
+  label: string;
+  description?: string;
+}
+
+/**
+ * A question the agent asks the user mid-run. Renders inline in the
+ * transcript like permissions: pending questions pin to the end, answered
+ * ones persist showing the chosen answer(s).
+ */
+export interface IHarnessQuestionRequest {
+  id: string;
+  sessionId?: string;
+  /** epoch ms */
+  createdAt?: number;
+  question: string;
+  options?: IHarnessQuestionOption[];
+  multiSelect?: boolean;
+  /** allow a free-text answer alongside the options (default true) */
+  allowCustom?: boolean;
+  /** set once answered — the card stays in the transcript showing the answer */
+  response?: string[];
+  /** epoch ms */
+  respondedAt?: number;
+}
+
+export interface IHarnessQuestionResponseDetail {
+  requestId: string;
+  answers: string[];
+  request: IHarnessQuestionRequest;
+}
+
 export interface IHarnessPermissionResponseDetail {
   requestId: string;
   response: THarnessPermissionResponse;

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

@@ -163,6 +163,14 @@ const defaultDescriptors: IHarnessToolDescriptor[] = [
     icon: 'lucide:Bot',
     subtitle: (call) => inputField(call, 'description') || inputField(call, 'prompt') || harnessSummaryLine(call.input),
   },
+  {
+    kind: 'question',
+    names: ['askuserquestion', 'ask_user_question', 'ask_question', 'ask_user', 'question'],
+    label: 'Question',
+    icon: 'lucide:MessageCircleQuestionMark',
+    subtitle: (call) => inputField(call, 'question') || inputField(call, 'prompt') || harnessSummaryLine(call.input),
+    defaultExpanded: true,
+  },
   {
     kind: 'todo',
     names: ['todowrite', 'todo_write', 'todoread'],

package/ts_web/elements/00group-layout/dees-mosaic/dees-mosaic.demo.ts

@@ -0,0 +1,87 @@
+import { html } from '@design.estate/dees-element';
+import type { DeesMosaic } from './dees-mosaic.js';
+import type { IMosaicLayout } from './types.js';
+import { createMosaicLeaf, mosaicInsert } from './tree.js';
+
+const buildDefaultLayout = (): IMosaicLayout => {
+  let layout = mosaicInsert({ root: null }, null, 'right', createMosaicLeaf('editor', 'leaf-editor'));
+  layout = mosaicInsert(layout, 'leaf-editor', 'right', createMosaicLeaf('chat', 'leaf-chat'));
+  layout = mosaicInsert(layout, null, 'bottom', createMosaicLeaf('terminal', 'leaf-terminal'));
+  return layout;
+};
+
+const surfaceMeta = {
+  editor: { title: 'Editor', icon: 'lucide:Code' },
+  chat: { title: 'AI Chat', icon: 'lucide:BotMessageSquare' },
+  terminal: { title: 'Terminal', icon: 'lucide:SquareTerminal' },
+  browser: { title: 'Browser', icon: 'lucide:Globe' },
+};
+
+let tileCounter = 0;
+
+const addBrowserTile = (event: MouseEvent) => {
+  const mosaic = (event.target as HTMLElement).closest('.mosaicDemo')?.querySelector('dees-mosaic') as DeesMosaic | null;
+  if (!mosaic) return;
+  tileCounter += 1;
+  const leaf = createMosaicLeaf('browser', `leaf-browser-${tileCounter}`);
+  mosaic.layout = mosaicInsert(mosaic.layout, 'leaf-chat', 'bottom', leaf);
+};
+
+export const demoFunc = () => html`
+  <style>
+    .mosaicDemo {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      gap: 12px;
+      height: 640px;
+      max-width: 1000px;
+      margin: 40px auto;
+    }
+    .mosaicDemo .surfaceBody {
+      display: grid;
+      place-content: center;
+      gap: 6px;
+      height: 100%;
+      text-align: center;
+      color: var(--dees-color-text-secondary);
+      font-size: 12px;
+      background: var(--dees-color-bg-primary);
+    }
+    .mosaicDemo .surfaceBody strong {
+      color: var(--dees-color-text-primary);
+      font-size: 14px;
+    }
+    .mosaicDemo .emptyHint {
+      color: var(--dees-color-text-secondary);
+      font-size: 13px;
+    }
+  </style>
+  <div
+    class="mosaicDemo"
+    @mosaic-layout-change=${(event: CustomEvent) => {
+      const mosaic = (event.target as HTMLElement);
+      (mosaic as DeesMosaic).layout = event.detail.layout;
+      console.log('mosaic-layout-change', event.detail.reason, event.detail.layout);
+    }}
+    @mosaic-tile-close=${(event: CustomEvent) => console.log('mosaic-tile-close', event.detail)}
+    @mosaic-tile-focus=${(event: CustomEvent) => {
+      ((event.target as HTMLElement) as DeesMosaic).focusedLeafId = event.detail.leafId;
+    }}
+  >
+    <div>
+      <dees-button @clicked=${addBrowserTile}>Add browser tile below chat</dees-button>
+    </div>
+    <dees-mosaic
+      .layout=${buildDefaultLayout()}
+      .surfaces=${surfaceMeta}
+      focusedLeafId="leaf-editor"
+    >
+      <div slot="tile-leaf-editor" class="surfaceBody"><strong>Editor</strong><span>drag my tilebar; resize the shared edges</span></div>
+      <div slot="tile-leaf-chat" class="surfaceBody"><strong>AI Chat</strong><span>docked right</span></div>
+      <div slot="tile-leaf-terminal" class="surfaceBody"><strong>Terminal</strong><span>stacked from below</span></div>
+      <div slot="tile-leaf-browser-1" class="surfaceBody"><strong>Browser 1</strong></div>
+      <div slot="tile-leaf-browser-2" class="surfaceBody"><strong>Browser 2</strong></div>
+      <div slot="empty" class="emptyHint">Workspace is empty — add a tile.</div>
+    </dees-mosaic>
+  </div>
+`;