@design.estate/dees-catalog 6.8.1 → 6.9.0

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

@@ -6,6 +6,7 @@ import {
   customElement,
   type TemplateResult,
   property,
+  state,
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -13,6 +14,7 @@ import type {
   IHarnessAttachment,
   IHarnessComposerOption,
   IHarnessComposerSendDetail,
+  IHarnessComposerSuggestion,
 } from '../interfaces.js';
 import {
   harnessFileToBase64,
@@ -40,6 +42,8 @@ const toDropdownOptions = (values: string[]): TDropdownOption[] =>
 const toLabeledDropdownOptions = (values: IHarnessComposerOption[]): TDropdownOption[] =>
   values.map((value) => ({ option: value.label, key: value.value }));
 
+let nextSuggestionListId = 0;
+
 /**
  * Prompt composer: autogrow textarea, attachments (picker / paste /
  * drag-drop with per-file and total size limits), optional account, model,
@@ -47,7 +51,7 @@ const toLabeledDropdownOptions = (values: IHarnessComposerOption[]): TDropdownOp
  * additional button and Send stays available for queueing; an empty prompt
  * with queued messages offers "Steer now".
  *
- * Controlled component: `value` and `attachments` are owned by the host;
+ * Controlled component: `value`, `attachments`, and `suggestions` are owned by the host;
  * the composer emits `harness-input`, `harness-attachments-change`,
  * `harness-attachment-error`, `harness-account-change`, `harness-model-change`, `harness-send`,
  * `harness-steer`, and `harness-abort` (all bubbling + composed).
@@ -91,6 +95,21 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  @property({ attribute: false })
+  accessor suggestions: IHarnessComposerSuggestion[] = [];
+
+  @state()
+  private accessor activeSuggestionIndex: number = -1;
+
+  @state()
+  private accessor suggestionsDismissed: boolean = false;
+
+  @state()
+  private accessor promptFocused: boolean = false;
+
+  private composing: boolean = false;
+  private readonly suggestionListId = `dees-harness-composer-suggestions-${++nextSuggestionListId}`;
+
   @property({ type: Number })
   accessor maxAttachmentBytes: number = harnessMaxAttachmentBytes;
 
@@ -141,6 +160,69 @@ export class DeesHarnessComposer extends DeesElement {
         container-type: inline-size;
       }
 
+      .composerShell {
+        position: relative;
+        min-width: 0;
+      }
+
+      .suggestionList {
+        position: absolute;
+        z-index: 2;
+        inset-inline: 0;
+        bottom: calc(100% + var(--dees-spacing-xs));
+        box-sizing: border-box;
+        max-height: min(240px, 35dvh);
+        margin: 0;
+        padding: var(--dees-spacing-xs);
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        list-style: none;
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-xl);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-primary);
+        box-shadow: var(--dees-shadow-up-sm);
+      }
+
+      .suggestionOption {
+        display: grid;
+        align-content: center;
+        box-sizing: border-box;
+        min-width: 0;
+        min-height: 44px;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        color: var(--dees-color-text-primary);
+        cursor: pointer;
+        touch-action: manipulation;
+      }
+
+      .suggestionOption:hover,
+      .suggestionOption.active {
+        background: var(--dees-color-fill-secondary);
+      }
+
+      .suggestionLabel {
+        min-width: 0;
+        overflow: hidden;
+        font-size: var(--dees-font-control-size, 13px);
+        font-weight: 600;
+        line-height: 1.35;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .suggestionDescription {
+        min-width: 0;
+        margin-top: 2px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        line-height: 1.35;
+        overflow-wrap: anywhere;
+      }
+
       .composer {
         display: grid;
         gap: var(--dees-spacing-sm);
@@ -365,18 +447,31 @@ export class DeesHarnessComposer extends DeesElement {
 
   public clear(): void {
     this.value = '';
+    this.resetSuggestionInteraction();
     this.emitInput('');
     this.autogrow();
   }
 
+  public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has('suggestions')) this.resetSuggestionInteraction();
+  }
+
+  public updated(changedProperties: Map<PropertyKey, unknown>): void {
+    super.updated(changedProperties);
+    this.syncTextareaSuggestionAria();
+  }
+
   public render(): TemplateResult {
     return html`
-      <div
-        class="composer"
-        @dragover=${this.handleDragOver}
-        @dragleave=${this.handleDragLeave}
-        @drop=${this.handleDrop}
-      >
+      <div class="composerShell">
+        ${this.suggestionsVisible ? this.renderSuggestions() : ''}
+        <div
+          class="composer"
+          @dragover=${this.handleDragOver}
+          @dragleave=${this.handleDragLeave}
+          @drop=${this.handleDrop}
+        >
         <input
           class="fileInput"
           type="file"
@@ -392,11 +487,16 @@ export class DeesHarnessComposer extends DeesElement {
           : ''}
         <textarea
           .value=${this.value}
+          aria-label="Message"
           placeholder=${this.placeholder}
           ?disabled=${this.disabled}
           rows="1"
           @input=${this.handleTextInput}
           @keydown=${this.handleKeydown}
+          @focus=${this.handlePromptFocus}
+          @blur=${this.handlePromptBlur}
+          @compositionstart=${this.handleCompositionStart}
+          @compositionend=${this.handleCompositionEnd}
           @paste=${this.handlePaste}
         ></textarea>
         <div class="controlsRow">
@@ -507,11 +607,42 @@ export class DeesHarnessComposer extends DeesElement {
                   Send
                 </dees-button>
               `}
+          </div>
         </div>
       </div>
     `;
   }
 
+  private renderSuggestions(): TemplateResult {
+    return html`
+      <ul
+        id=${this.suggestionListId}
+        class="suggestionList"
+        role="listbox"
+        aria-label="Suggestions"
+        @pointerdown=${this.handleSuggestionPointerDown}
+      >
+        ${this.suggestions.map((suggestion, index) => html`
+          <li
+            id=${this.suggestionOptionId(index)}
+            class=${`suggestionOption ${index === this.activeSuggestionIndex ? 'active' : ''}`}
+            role="option"
+            aria-selected=${String(index === this.activeSuggestionIndex)}
+            @pointerenter=${() => {
+              this.activeSuggestionIndex = index;
+            }}
+            @click=${() => void this.selectSuggestion(index)}
+          >
+            <span class="suggestionLabel">${suggestion.label}</span>
+            ${suggestion.description
+              ? html`<span class="suggestionDescription">${suggestion.description}</span>`
+              : ''}
+          </li>
+        `)}
+      </ul>
+    `;
+  }
+
   private renderChip(attachment: IHarnessAttachment): TemplateResult {
     const imageUrl = attachment.kind === 'image' && attachment.dataBase64
       ? `data:${attachment.mediaType};base64,${attachment.dataBase64}`
@@ -541,16 +672,42 @@ export class DeesHarnessComposer extends DeesElement {
 
   private handleTextInput = (event: Event): void => {
     this.value = (event.currentTarget as HTMLTextAreaElement).value;
+    this.resetSuggestionInteraction();
     this.emitInput(this.value);
     this.autogrow();
   };
 
   private handleKeydown = (event: KeyboardEvent): void => {
+    if (event.isComposing || this.composing) return;
     if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
       event.preventDefault();
       this.send();
       return;
     }
+    if (this.suggestionsVisible) {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        this.suggestionsDismissed = true;
+        return;
+      }
+      if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+        if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          this.moveActiveSuggestion(1);
+          return;
+        }
+        if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          this.moveActiveSuggestion(-1);
+          return;
+        }
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          void this.selectSuggestion(this.activeSuggestionIndex);
+          return;
+        }
+      }
+    }
     // Shift+Tab cycles the agent mode without leaving the prompt
     if (event.key === 'Tab' && event.shiftKey && this.modeOptions.length) {
       event.preventDefault();
@@ -561,6 +718,111 @@ export class DeesHarnessComposer extends DeesElement {
     }
   };
 
+  private handleCompositionStart = (): void => {
+    this.composing = true;
+  };
+
+  private handleCompositionEnd = (): void => {
+    this.composing = false;
+  };
+
+  private handlePromptFocus = (): void => {
+    this.promptFocused = true;
+  };
+
+  private handlePromptBlur = (): void => {
+    this.promptFocused = false;
+  };
+
+  private handleSuggestionPointerDown = (event: PointerEvent): void => {
+    event.preventDefault();
+  };
+
+  private resetSuggestionInteraction(): void {
+    this.activeSuggestionIndex = this.suggestions.length ? 0 : -1;
+    this.suggestionsDismissed = false;
+  }
+
+  private get suggestionsVisible(): boolean {
+    return this.promptFocused
+      && !this.disabled
+      && !this.suggestionsDismissed
+      && this.suggestions.length > 0;
+  }
+
+  private suggestionOptionId(indexArg: number): string {
+    return `${this.suggestionListId}-option-${indexArg}`;
+  }
+
+  private syncTextareaSuggestionAria(): void {
+    const textarea = this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea');
+    if (!textarea) return;
+    const suggestionsAvailable = !this.disabled && this.suggestions.length > 0;
+    if (suggestionsAvailable) {
+      textarea.setAttribute('aria-autocomplete', 'list');
+      textarea.setAttribute('aria-haspopup', 'listbox');
+    } else {
+      textarea.removeAttribute('aria-autocomplete');
+      textarea.removeAttribute('aria-haspopup');
+    }
+    if (this.suggestionsVisible) {
+      textarea.setAttribute('aria-controls', this.suggestionListId);
+    } else {
+      textarea.removeAttribute('aria-controls');
+    }
+    if (
+      this.suggestionsVisible
+      && this.activeSuggestionIndex >= 0
+      && this.activeSuggestionIndex < this.suggestions.length
+    ) {
+      textarea.setAttribute(
+        'aria-activedescendant',
+        this.suggestionOptionId(this.activeSuggestionIndex),
+      );
+    } else {
+      textarea.removeAttribute('aria-activedescendant');
+    }
+  }
+
+  private moveActiveSuggestion(offsetArg: -1 | 1): void {
+    if (!this.suggestions.length) return;
+    this.activeSuggestionIndex = this.activeSuggestionIndex < 0
+      ? (offsetArg === 1 ? 0 : this.suggestions.length - 1)
+      : (this.activeSuggestionIndex + offsetArg + this.suggestions.length) % this.suggestions.length;
+    void this.scrollActiveSuggestionIntoView();
+  }
+
+  private async scrollActiveSuggestionIntoView(): Promise<void> {
+    await this.updateComplete;
+    const list = this.shadowRoot?.getElementById(this.suggestionListId);
+    const option = this.shadowRoot?.getElementById(
+      this.suggestionOptionId(this.activeSuggestionIndex),
+    );
+    if (!list || !option) return;
+    const optionTop = option.offsetTop;
+    const optionBottom = optionTop + option.offsetHeight;
+    if (optionTop < list.scrollTop) {
+      list.scrollTop = optionTop;
+    } else if (optionBottom > list.scrollTop + list.clientHeight) {
+      list.scrollTop = optionBottom - list.clientHeight;
+    }
+  }
+
+  private async selectSuggestion(indexArg: number): Promise<void> {
+    if (this.disabled) return;
+    const suggestion = this.suggestions[indexArg];
+    if (!suggestion) return;
+    this.value = suggestion.value;
+    this.suggestionsDismissed = true;
+    this.emitInput(this.value);
+    await this.updateComplete;
+    const textarea = this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea');
+    if (!textarea) return;
+    textarea.focus();
+    textarea.setSelectionRange(this.value.length, this.value.length);
+    this.autogrow();
+  }
+
   private autogrow(): void {
     const textarea = this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea');
     if (!textarea) return;

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

@@ -189,6 +189,10 @@ export class DeesHarnessMessageList extends DeesElement {
   private lastVirtualViewportWidth = 0;
   private pendingVirtualAnchor: { key: string; offset: number } | undefined;
   private pendingFullAnchor: { key: string; offset: number } | undefined;
+  private activeFullAnchor: { key: string; offset: number } | undefined;
+  private fullAnchorRestoreGeneration = 0;
+  private fullAnchorRestoreFrame: number | null = null;
+  private fullAnchorRestoreSecondFrame: number | null = null;
   private measurementAnchor: { key: string; offset: number } | undefined;
   private pendingVirtualRepin = false;
   private virtualizationEnabled = false;
@@ -534,17 +538,23 @@ export class DeesHarnessMessageList extends DeesElement {
     const container = this.scrollContainer;
     const preserveAnchor = this.userUnpinned || !this.autoFollow;
     const anchor = container && preserveAnchor
-      ? this.captureCurrentAnchor(container)
+      ? (this.activeFullAnchor ?? this.captureCurrentAnchor(container))
       : undefined;
+    const anchorContentBoundaryKey = anchor
+      ? this.lastContentKeyForTimelineItem(anchor.key)
+      : undefined;
+    this.cancelFullAnchorRestore();
     const nextItems = this.buildTimelineRenderItems();
     const retainedKeys = new Set(nextItems.map((item) => item.key));
-    const contentKeys = [
-      ...this.messages.map((message) => `message:${message.id}`),
-      ...this.permissions.map((request) => `permission:${request.id}`),
-      ...this.questions.map((request) => `question:${request.id}`),
-    ];
+    const contentKeys = nextItems.flatMap((item) => this.contentKeysForTimelineItem(item));
+    const anchorContentBoundaryIndex = anchorContentBoundaryKey
+      ? contentKeys.indexOf(anchorContentBoundaryKey)
+      : -1;
     this.currentNewContentKeys = new Set(
-      contentKeys.filter((key) => !this.knownContentKeys.has(key)),
+      contentKeys.filter((key, index) => (
+        !this.knownContentKeys.has(key)
+        && (anchorContentBoundaryIndex < 0 || index > anchorContentBoundaryIndex)
+      )),
     );
     this.knownContentKeys.clear();
     for (const key of contentKeys) this.knownContentKeys.add(key);
@@ -622,6 +632,18 @@ export class DeesHarnessMessageList extends DeesElement {
     }
   }
 
+  private contentKeysForTimelineItem(itemArg: TTimelineRenderItem): string[] {
+    return itemArg.kind === 'tool-group'
+      ? itemArg.messages.map((item) => item.key)
+      : [itemArg.key];
+  }
+
+  private lastContentKeyForTimelineItem(keyArg: string): string | undefined {
+    const item = this.timelineRenderItems.find((candidate) => candidate.key === keyArg);
+    if (!item) return undefined;
+    return item.kind === 'tool-group' ? item.messages.at(-1)?.key : item.key;
+  }
+
   private pruneViewState(
     stateArg: IHarnessTranscriptViewState,
     messageIdsArg: string[],
@@ -1049,12 +1071,21 @@ export class DeesHarnessMessageList extends DeesElement {
     if (event.composedPath().some(
       (candidate) => candidate instanceof DeesHarnessMessageList && candidate !== this,
     )) return;
-    if (event.type === 'wheel' && (event as WheelEvent).deltaY >= 0) return;
+    if (event.type === 'wheel') {
+      this.cancelFullAnchorRestore();
+      if ((event as WheelEvent).deltaY >= 0) return;
+    }
     if (
       event.type === 'keydown'
       && !['ArrowUp', 'PageUp', 'Home'].includes((event as KeyboardEvent).key)
-    ) return;
+    ) {
+      if (['ArrowDown', 'PageDown', 'End', ' '].includes((event as KeyboardEvent).key)) {
+        this.cancelFullAnchorRestore();
+      }
+      return;
+    }
     if (event.type === 'pointerdown' && event.target !== this.scrollContainer) return;
+    this.cancelFullAnchorRestore();
     this.userUnpinned = true;
     this.measurementAnchor = undefined;
   };
@@ -1063,6 +1094,7 @@ export class DeesHarnessMessageList extends DeesElement {
     const container = this.scrollContainer;
     if (!container) return;
     if (force) {
+      this.cancelFullAnchorRestore();
       this.userUnpinned = false;
       this.measurementAnchor = undefined;
     }
@@ -1225,7 +1257,7 @@ export class DeesHarnessMessageList extends DeesElement {
     } else {
       this.disconnectVirtualObservers();
       if (this.pendingFullAnchor) {
-        this.restoreFullAnchor(this.scrollContainer!, this.pendingFullAnchor);
+        this.scheduleFullAnchorRestore(this.scrollContainer!, this.pendingFullAnchor);
         this.pendingFullAnchor = undefined;
       }
     }
@@ -1408,6 +1440,46 @@ export class DeesHarnessMessageList extends DeesElement {
       + anchorArg.offset;
   }
 
+  private scheduleFullAnchorRestore(
+    containerArg: HTMLElement,
+    anchorArg: { key: string; offset: number },
+  ): void {
+    this.cancelFullAnchorRestore();
+    const generation = this.fullAnchorRestoreGeneration;
+    this.activeFullAnchor = anchorArg;
+    const restore = (): boolean => {
+      if (
+        generation !== this.fullAnchorRestoreGeneration
+        || !this.isConnected
+        || this.scrollContainer !== containerArg
+      ) return false;
+      this.restoreFullAnchor(containerArg, anchorArg);
+      return true;
+    };
+    restore();
+    queueMicrotask(() => {
+      if (!restore()) return;
+      this.fullAnchorRestoreFrame = requestAnimationFrame(() => {
+        this.fullAnchorRestoreFrame = null;
+        if (!restore()) return;
+        this.fullAnchorRestoreSecondFrame = requestAnimationFrame(() => {
+          this.fullAnchorRestoreSecondFrame = null;
+          if (!restore()) return;
+          this.activeFullAnchor = undefined;
+        });
+      });
+    });
+  }
+
+  private cancelFullAnchorRestore(): void {
+    this.fullAnchorRestoreGeneration += 1;
+    if (this.fullAnchorRestoreFrame !== null) cancelAnimationFrame(this.fullAnchorRestoreFrame);
+    if (this.fullAnchorRestoreSecondFrame !== null) cancelAnimationFrame(this.fullAnchorRestoreSecondFrame);
+    this.fullAnchorRestoreFrame = null;
+    this.fullAnchorRestoreSecondFrame = null;
+    this.activeFullAnchor = undefined;
+  }
+
   private virtualLocalScrollTop(containerArg: HTMLElement): number {
     const stack = this.shadowRoot?.querySelector<HTMLElement>('.virtualStack');
     return Math.max(0, containerArg.scrollTop - (stack?.offsetTop ?? 0));
@@ -1680,6 +1752,7 @@ export class DeesHarnessMessageList extends DeesElement {
 
   public async disconnectedCallback(): Promise<void> {
     this.disconnectSelectionChangeListener();
+    this.cancelFullAnchorRestore();
     if (this.followFrame !== null) cancelAnimationFrame(this.followFrame);
     if (this.followSecondFrame !== null) cancelAnimationFrame(this.followSecondFrame);
     if (this.entryFrame !== null) cancelAnimationFrame(this.entryFrame);

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

@@ -464,6 +464,12 @@ export interface IHarnessComposerOption {
   value: string;
 }
 
+export interface IHarnessComposerSuggestion {
+  label: string;
+  value: string;
+  description?: string;
+}
+
 export interface IHarnessAccountChangeDetail {
   account: string;
 }