@design.estate/dees-catalog 3.93.0 → 3.94.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/00theme.ts

@@ -425,6 +425,11 @@ const l = themeDefaults.colors.light;
 const d = themeDefaults.colors.dark;
 const shadowsLight = themeDefaults.shadows;
 const shadowsDark = themeDefaults.shadowsDark ?? themeDefaults.shadows;
+
+/** Flips the y offsets of a box-shadow list so bars can cast upward
+ * (e.g. a docked composer shadowing the content above it). */
+const mirrorShadow = (shadow: string): string =>
+  shadow.replace(/(^|,)(\s*\S+\s+)(-?\d+(?:\.\d+)?)px/g, (match, sep, x, y) => `${sep}${x}${-Number(y)}px`);
 const matL = themeDefaults.materials.light;
 const matD = themeDefaults.materials.dark;
 
@@ -639,6 +644,8 @@ export const themeDefaultStyles: CSSResult = css`
     --dees-shadow-md: ${cssManager.bdTheme(shadowsLight.md, shadowsDark.md)};
     --dees-shadow-lg: ${cssManager.bdTheme(shadowsLight.lg, shadowsDark.lg)};
     --dees-shadow-xl: ${cssManager.bdTheme(shadowsLight.xl, shadowsDark.xl)};
+    /* upward-casting bar shadow (mirrored sm) for bottom-docked chrome */
+    --dees-shadow-up-sm: ${cssManager.bdTheme(mirrorShadow(shadowsLight.sm), mirrorShadow(shadowsDark.sm))};
 
     /* ========================================
      * Materials / Vibrancy (theme-aware bg + opaque fallback; theme-agnostic filter)