@design.estate/dees-catalog 3.92.0 → 3.94.0

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

@@ -57,6 +57,15 @@ export class DeesHarnessComposer extends DeesElement {
   @property()
   accessor placeholder: string = 'Message the agent — drop or paste files to attach…';
 
+  /**
+   * Docked composers sit flush against their container edge-to-edge (a
+   * top border instead of the floating card chrome) — used by
+   * dees-harness-chat so the bar meets the transcript and the tasks panel
+   * without a gap.
+   */
+  @property({ type: Boolean, reflect: true })
+  accessor docked: boolean = false;
+
   @property({ type: Boolean })
   accessor disabled: boolean = false;
 
@@ -94,6 +103,16 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ attribute: false })
   accessor effortOptions: string[] = [];
 
+  /**
+   * Agent mode switcher (e.g. Planning / Building). Renders a segmented
+   * control when modeOptions is set; emits harness-mode-change.
+   */
+  @property()
+  accessor mode: string = '';
+
+  @property({ attribute: false })
+  accessor modeOptions: string[] = [];
+
   @property({ type: Boolean })
   accessor showModelControls: boolean = true;
 
@@ -121,6 +140,19 @@ export class DeesHarnessComposer extends DeesElement {
         box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
       }
 
+      :host([docked]) .composer {
+        border: 0;
+        border-top: 1px solid var(--dees-color-border-subtle);
+        border-radius: 0;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
+        box-shadow: var(--dees-shadow-up-sm);
+      }
+
+      :host([docked]) .composer.dragOver {
+        border-top-color: var(--dees-color-accent-primary);
+        box-shadow: inset 0 3px 0 0 var(--dees-color-focus-ring);
+      }
+
       .fileInput {
         display: none;
       }
@@ -214,6 +246,44 @@ export class DeesHarnessComposer extends DeesElement {
         gap: var(--dees-spacing-sm);
       }
 
+      /* segmented mode switcher (Planning / Building) */
+      .modeSwitch {
+        display: inline-flex;
+        flex: 0 0 auto;
+        padding: 2px;
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-fill-secondary);
+      }
+
+      .modeSwitch button {
+        height: calc(var(--dees-control-height-sm) - 4px);
+        padding: 0 10px;
+        border: 0;
+        border-radius: calc(var(--dees-radius-md) - 2px);
+        corner-shape: var(--dees-corner-shape);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 500;
+        transition:
+          background var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .modeSwitch button.active {
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
+        box-shadow: var(--dees-shadow-xs);
+      }
+
+      .modeSwitch button:disabled {
+        cursor: default;
+        opacity: 0.55;
+      }
+
       .modelControls {
         display: flex;
         gap: var(--dees-spacing-xs);
@@ -289,6 +359,26 @@ export class DeesHarnessComposer extends DeesElement {
           >
             <dees-icon icon="lucide:Paperclip" iconSize="14"></dees-icon>
           </dees-button>
+          ${this.modeOptions.length
+            ? html`
+                <div class="modeSwitch" role="radiogroup" aria-label="Agent mode">
+                  ${this.modeOptions.map((option) => html`
+                    <button
+                      type="button"
+                      role="radio"
+                      aria-checked=${option === this.mode ? 'true' : 'false'}
+                      class=${option === this.mode ? 'active' : ''}
+                      ?disabled=${this.disabled}
+                      @click=${() => {
+                        if (this.mode === option) return;
+                        this.mode = option;
+                        this.emit('harness-mode-change', { mode: option });
+                      }}
+                    >${option}</button>
+                  `)}
+                </div>
+              `
+            : ''}
           ${this.showModelControls && (this.modelOptions.length || this.effortOptions.length)
             ? html`
                 <div class="modelControls">
@@ -391,6 +481,15 @@ export class DeesHarnessComposer extends DeesElement {
     if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
       event.preventDefault();
       this.send();
+      return;
+    }
+    // Shift+Tab cycles the agent mode without leaving the prompt
+    if (event.key === 'Tab' && event.shiftKey && this.modeOptions.length) {
+      event.preventDefault();
+      const currentIndex = this.modeOptions.indexOf(this.mode);
+      const nextMode = this.modeOptions[(currentIndex + 1) % this.modeOptions.length];
+      this.mode = nextMode;
+      this.emit('harness-mode-change', { mode: nextMode });
     }
   };
 

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

@@ -11,10 +11,12 @@ import {
   directives,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessMessage, IHarnessStatus, THarnessStreamDelta } from '../interfaces.js';
+import type { IHarnessMessage, IHarnessPermissionRequest, IHarnessQuestionRequest, 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 '../dees-harness-permission-card/dees-harness-permission-card.js';
+import '../dees-harness-question-card/dees-harness-question-card.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
 const { repeat } = directives;
@@ -27,6 +29,11 @@ declare global {
 
 const pinThresholdPx = 48;
 
+type TTimelineItem =
+  | { kind: 'message'; time: number; key: string; message: IHarnessMessage }
+  | { kind: 'permission'; time: number; key: string; request: IHarnessPermissionRequest }
+  | { kind: 'question'; time: number; key: string; question: IHarnessQuestionRequest };
+
 /**
  * Scrollable, streaming-safe message log. Messages render through a keyed
  * repeat (stable DOM per message id); `applyDelta()` routes incremental
@@ -45,6 +52,18 @@ export class DeesHarnessMessageList extends DeesElement {
   @property({ attribute: false })
   accessor status: IHarnessStatus = { type: 'idle' };
 
+  /** permission requests interleave chronologically with the messages;
+   * answered ones stay visible showing their outcome */
+  @property({ attribute: false })
+  accessor permissions: IHarnessPermissionRequest[] = [];
+
+  @property({ type: Boolean })
+  accessor permissionsBusy: boolean = false;
+
+  /** agent questions interleave like permissions; answered ones persist */
+  @property({ attribute: false })
+  accessor questions: IHarnessQuestionRequest[] = [];
+
   @property({ type: Boolean })
   accessor autoFollow: boolean = true;
 
@@ -89,6 +108,14 @@ export class DeesHarnessMessageList extends DeesElement {
         box-sizing: border-box;
       }
 
+      /* observed by the follow ResizeObserver; fills the viewport so the
+         empty state can center */
+      .scrollContent {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
       .stack {
         display: block;
       }
@@ -104,10 +131,10 @@ export class DeesHarnessMessageList extends DeesElement {
       }
 
       .empty {
+        flex: 1;
         display: grid;
         place-content: center;
         gap: var(--dees-spacing-xs);
-        height: 100%;
         min-height: 120px;
         text-align: center;
       }
@@ -149,29 +176,80 @@ export class DeesHarnessMessageList extends DeesElement {
     `,
   ];
 
+  /** messages and permissions merged chronologically (stable ids as keys) */
+  private get timelineItems(): TTimelineItem[] {
+    const items: TTimelineItem[] = this.messages.map((message) => ({
+      kind: 'message' as const,
+      time: message.createdAt || 0,
+      key: message.id,
+      message,
+    }));
+    for (const request of this.permissions) {
+      items.push({
+        kind: 'permission' as const,
+        // pending requests pin to the end (action required); answered ones
+        // freeze at their response time in the flow
+        time: request.response
+          ? (request.respondedAt ?? request.createdAt ?? 0)
+          : Number.MAX_SAFE_INTEGER,
+        key: `perm:${request.id}`,
+        request,
+      });
+    }
+    for (const question of this.questions) {
+      items.push({
+        kind: 'question' as const,
+        time: question.response
+          ? (question.respondedAt ?? question.createdAt ?? 0)
+          : Number.MAX_SAFE_INTEGER,
+        key: `question:${question.id}`,
+        question,
+      });
+    }
+    return items.sort((left, right) => left.time - right.time);
+  }
+
   public render(): TemplateResult {
+    const items = this.timelineItems;
     return html`
-      <div class="scroll" @scroll=${this.handleScroll}>
-        ${this.messages.length
+      <div
+        class="scroll"
+        @scroll=${this.handleScroll}
+        @wheel=${this.handleUserScrollIntent}
+        @touchmove=${this.handleUserScrollIntent}
+      >
+        <div class="scrollContent">
+        ${items.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>
-                  `,
+                  items,
+                  (item) => item.key,
+                  (item) => item.kind === 'message'
+                    ? html`
+                        <dees-harness-message
+                          data-message-id=${item.message.id}
+                          .message=${item.message}
+                          .showRole=${this.showRoles}
+                          .showTimestamp=${this.showTimestamps}
+                          .toolRegistry=${this.toolRegistry}
+                          .suppressEntry=${!this.entryAnimationsEnabled}
+                        ></dees-harness-message>
+                      `
+                    : item.kind === 'permission'
+                      ? html`
+                          <dees-harness-permission-card
+                            .request=${item.request}
+                            .busy=${this.permissionsBusy}
+                          ></dees-harness-permission-card>
+                        `
+                      : html`
+                          <dees-harness-question-card
+                            .request=${item.question}
+                            .busy=${this.permissionsBusy}
+                          ></dees-harness-question-card>
+                        `,
                 )}
-                <div class="statusRow">
-                  <dees-harness-status .status=${this.status}></dees-harness-status>
-                </div>
               </div>
             `
           : html`
@@ -182,6 +260,10 @@ export class DeesHarnessMessageList extends DeesElement {
                 </slot>
               </div>
             `}
+        <div class="statusRow">
+          <dees-harness-status .status=${this.status}></dees-harness-status>
+        </div>
+        </div>
       </div>
       ${this.showJumpChip
         ? html`
@@ -269,33 +351,53 @@ export class DeesHarnessMessageList extends DeesElement {
     return container.scrollHeight - container.scrollTop - container.clientHeight < pinThresholdPx;
   }
 
-  private followFrame = 0;
-  private settleTimeout: ReturnType<typeof setTimeout> | null = null;
+  private followUntilTs = 0;
+  private lastFollowScrollTop = -1;
+  private contentResizeObserver: ResizeObserver | null = null;
 
+  /**
+   * One-motion follow: while pinned, content changes open a short follow
+   * window (entry animation duration plus margin) and a ResizeObserver on
+   * the scroll content re-pins the bottom on every layout change — after
+   * layout but before paint, so a growing box and the scroll move together
+   * in the same frame. Wheel/touch toward the top, or any external upward
+   * scroll (deviation guard), ends the window so it never fights the user.
+   */
   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);
+      this.followUntilTs = performance.now() + 320;
+      this.lastFollowScrollTop = -1;
+      this.pinIfFollowing();
     } else {
       this.showJumpChip = true;
     }
   }
 
+  private pinIfFollowing = (): void => {
+    if (performance.now() >= this.followUntilTs) return;
+    const container = this.scrollContainer;
+    if (!container) return;
+    // position moved up since our last pin → someone else scrolled; stop
+    // before forcing so following never fights the user
+    if (this.lastFollowScrollTop >= 0 && container.scrollTop < this.lastFollowScrollTop - 1) {
+      this.stopFollowing();
+      return;
+    }
+    container.scrollTop = container.scrollHeight;
+    this.lastFollowScrollTop = container.scrollTop;
+  };
+
+  private stopFollowing(): void {
+    this.followUntilTs = 0;
+    this.lastFollowScrollTop = -1;
+  }
+
+  private handleUserScrollIntent = (event: Event): void => {
+    if (event.type === 'wheel' && (event as WheelEvent).deltaY >= 0) return;
+    this.stopFollowing();
+  };
+
   public scrollToBottom(force = false): void {
     const container = this.scrollContainer;
     if (!container) return;
@@ -313,13 +415,18 @@ export class DeesHarnessMessageList extends DeesElement {
 
   public updated(changedProperties: Map<string, any>): void {
     super.updated(changedProperties);
-    if (changedProperties.has('messages') || changedProperties.has('status')) {
+    if (changedProperties.has('messages') || changedProperties.has('status') || changedProperties.has('permissions') || changedProperties.has('questions')) {
       this.followAfterContentChange();
     }
   }
 
   public firstUpdated(changedProperties: Map<string, any>): void {
     super.firstUpdated(changedProperties);
+    const content = this.shadowRoot?.querySelector('.scrollContent');
+    if (content) {
+      this.contentResizeObserver = new ResizeObserver(this.pinIfFollowing);
+      this.contentResizeObserver.observe(content);
+    }
     // let the initial batch paint without entry animations, then enable them
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -329,14 +436,9 @@ export class DeesHarnessMessageList extends DeesElement {
   }
 
   public async disconnectedCallback(): Promise<void> {
-    if (this.followFrame) {
-      cancelAnimationFrame(this.followFrame);
-      this.followFrame = 0;
-    }
-    if (this.settleTimeout) {
-      clearTimeout(this.settleTimeout);
-      this.settleTimeout = null;
-    }
+    this.stopFollowing();
+    this.contentResizeObserver?.disconnect();
+    this.contentResizeObserver = null;
     await super.disconnectedCallback();
   }
 }

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

@@ -48,9 +48,14 @@ export class DeesHarnessPermissionCard extends DeesElement {
   @state()
   accessor remember: boolean = false;
 
+  /** local optimistic answer; request.response (host echo) takes precedence */
   @state()
   accessor answered: THarnessPermissionResponse | undefined = undefined;
 
+  public get effectiveResponse(): THarnessPermissionResponse | undefined {
+    return this.request.response ?? this.answered;
+  }
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -157,7 +162,7 @@ export class DeesHarnessPermissionCard extends DeesElement {
 
   public render(): TemplateResult {
     const request = this.request;
-    const disabled = this.busy || this.answered !== undefined;
+    const disabled = this.busy || this.effectiveResponse !== undefined;
     const metadataEntries = Object.entries(request.metadata ?? {});
     return html`
       <div class="card">
@@ -177,8 +182,8 @@ export class DeesHarnessPermissionCard extends DeesElement {
             `
           : ''}
         <div class="actions">
-          ${this.answered
-            ? html`<span class="answeredNote">Answered: ${this.answered}${this.remember ? ' (remembered)' : ''}</span>`
+          ${this.effectiveResponse
+            ? html`<span class="answeredNote">Answered: ${this.effectiveResponse}${this.remember ? ' (remembered)' : ''}</span>`
             : html`
                 <dees-button type="accent" size="sm" ?disabled=${disabled} @clicked=${() => this.respond('once')}>
                   Allow Once
@@ -207,7 +212,7 @@ export class DeesHarnessPermissionCard extends DeesElement {
   }
 
   private respond(response: THarnessPermissionResponse): void {
-    if (this.busy || this.answered !== undefined) return;
+    if (this.busy || this.effectiveResponse !== undefined) return;
     this.answered = response;
     this.dispatchEvent(
       new CustomEvent('harness-permission-response', {

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

@@ -0,0 +1,70 @@
+import { html } from '@design.estate/dees-element';
+
+const logResponse = (event: CustomEvent) => {
+  console.log('harness-question-response', event.detail);
+};
+
+export const demoFunc = () => html`
+  <style>
+    .questionDemo {
+      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="questionDemo" @harness-question-response=${logResponse}>
+    <dees-harness-question-card
+      .request=${{
+        id: 'q1',
+        question: 'Which database should the new service use?',
+        createdAt: Date.now(),
+        options: [
+          { label: 'PostgreSQL', description: 'Relational, already in the stack' },
+          { label: 'MongoDB', description: 'Document store, flexible schema' },
+          { label: 'SQLite', description: 'Embedded, zero ops' },
+        ],
+      }}
+    ></dees-harness-question-card>
+    <dees-harness-question-card
+      .request=${{
+        id: 'q2',
+        question: 'Which environments should the rollout include?',
+        multiSelect: true,
+        allowCustom: false,
+        options: [
+          { label: 'staging' },
+          { label: 'production-eu' },
+          { label: 'production-us' },
+        ],
+      }}
+    ></dees-harness-question-card>
+    <dees-harness-question-card
+      .request=${{
+        id: 'q3',
+        question: 'Anything else I should know before migrating?',
+        options: [],
+      }}
+    ></dees-harness-question-card>
+    <dees-harness-question-card
+      busy
+      .request=${{
+        id: 'q-busy',
+        question: 'Waiting for the runtime — which region?',
+        options: [{ label: 'eu-central' }, { label: 'us-east' }],
+      }}
+    ></dees-harness-question-card>
+    <dees-harness-question-card
+      .request=${{
+        id: 'q4',
+        question: 'Which framework for the admin UI?',
+        options: [{ label: 'Lit' }, { label: 'React' }],
+        response: ['Lit'],
+        respondedAt: Date.now() - 60_000,
+      }}
+    ></dees-harness-question-card>
+  </div>
+`;