@design.estate/dees-catalog 3.93.0 → 3.94.0

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>
+`;