@design.estate/dees-catalog 6.9.0 → 6.10.0

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

@@ -40,6 +40,8 @@ declare global {
 }
 
 const pinThresholdPx = 48;
+const loadEarlierThresholdPx = 24;
+const scrollIntentSettlementMs = 250;
 const virtualizationThreshold = 40;
 const virtualOverscanPx = 800;
 const virtualGapPx = 8;
@@ -112,6 +114,16 @@ export class DeesHarnessMessageList extends DeesElement {
   @property({ type: Boolean })
   accessor autoFollow: boolean = true;
 
+  /** Stable host-owned identity for one transcript and its scroll context. */
+  @property()
+  accessor transcriptKey: string = '';
+
+  @property({ type: Boolean })
+  accessor hasEarlierMessages: boolean = false;
+
+  @property({ type: Boolean })
+  accessor loadingEarlier: boolean = false;
+
   @property({ type: Boolean })
   accessor hideScrollbar: boolean = false;
 
@@ -200,6 +212,16 @@ export class DeesHarnessMessageList extends DeesElement {
   private virtualizationDisablePending = false;
   private virtualizationActivationFrame: number | null = null;
   private selectionChangeListening = false;
+  private loadEarlierLatched = false;
+  private loadingEarlierObserved = false;
+  private earlierScrollIntent = false;
+  private scrollbarGestureActive = false;
+  private touchScrollY: number | undefined;
+  private scrollIntentTimer: ReturnType<typeof setTimeout> | undefined;
+  private programmaticScrollTop: number | undefined;
+  private programmaticScrollGeneration = 0;
+  private programmaticScrollFrame: number | null = null;
+  private programmaticScrollSecondFrame: number | null = null;
 
   public static styles = [
     themeDefaultStyles,
@@ -492,6 +514,20 @@ export class DeesHarnessMessageList extends DeesElement {
 
   public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
     super.willUpdate(changedProperties);
+    if (changedProperties.has('transcriptKey')) this.resetTranscriptContext();
+    if (changedProperties.has('hasEarlierMessages') && !this.hasEarlierMessages) {
+      this.loadEarlierLatched = false;
+      this.loadingEarlierObserved = false;
+      this.clearEarlierScrollIntent();
+    }
+    if (changedProperties.has('loadingEarlier')) {
+      const wasLoadingEarlier = changedProperties.get('loadingEarlier') === true;
+      if (this.loadingEarlier) this.loadingEarlierObserved = true;
+      else if (wasLoadingEarlier && this.loadingEarlierObserved) {
+        this.loadEarlierLatched = false;
+        this.loadingEarlierObserved = false;
+      }
+    }
     if (changedProperties.has('viewState') && this.viewState) {
       this.clearTranscriptViewState(this.localViewState);
     }
@@ -503,6 +539,7 @@ export class DeesHarnessMessageList extends DeesElement {
       || changedProperties.has('questions')
       || changedProperties.has('toolRegistry')
       || changedProperties.has('viewState')
+      || changedProperties.has('transcriptKey')
       || registryChanged
     ) {
       this.rebuildTimeline();
@@ -766,8 +803,12 @@ export class DeesHarnessMessageList extends DeesElement {
       <div
         class=${`scroll ${this.hideScrollbar ? 'hideScrollbar' : ''} ${this.scrollFadeTop ? 'fadeTop' : ''} ${this.scrollFadeBottom ? 'fadeBottom' : ''}`}
         @scroll=${this.handleScroll}
+        @scrollend=${this.handleScrollEnd}
         @wheel=${this.handleUserScrollIntent}
+        @touchstart=${this.handleTouchStart}
         @touchmove=${this.handleUserScrollIntent}
+        @touchend=${this.handleTouchEnd}
+        @touchcancel=${this.handleTouchCancel}
         @pointerdown=${this.handlePointerDown}
         @pointerup=${this.handlePointerUp}
         @pointercancel=${this.handlePointerCancel}
@@ -1042,8 +1083,7 @@ export class DeesHarnessMessageList extends DeesElement {
     if (!this.autoFollow || this.userUnpinned) return;
     const container = this.scrollContainer;
     if (!container) return;
-    container.scrollTop = container.scrollHeight;
-    this.lastObservedScrollTop = container.scrollTop;
+    this.setProgrammaticScrollTop(container, container.scrollHeight);
   };
 
   private followAfterContentChange(): void {
@@ -1068,26 +1108,213 @@ export class DeesHarnessMessageList extends DeesElement {
   }
 
   private handleUserScrollIntent = (event: Event): void => {
-    if (event.composedPath().some(
-      (candidate) => candidate instanceof DeesHarnessMessageList && candidate !== this,
-    )) return;
+    if (this.eventComesFromNestedMessageList(event)) return;
     if (event.type === 'wheel') {
       this.cancelFullAnchorRestore();
-      if ((event as WheelEvent).deltaY >= 0) return;
+      const deltaY = (event as WheelEvent).deltaY;
+      if (deltaY < 0) {
+        this.armEarlierScrollIntent();
+        this.requestEarlierIfAtTop();
+        this.markUserUnpinned();
+      } else if (deltaY > 0) {
+        this.clearEarlierScrollIntent();
+      }
+      return;
     }
-    if (
-      event.type === 'keydown'
-      && !['ArrowUp', 'PageUp', 'Home'].includes((event as KeyboardEvent).key)
-    ) {
-      if (['ArrowDown', 'PageDown', 'End', ' '].includes((event as KeyboardEvent).key)) {
+    if (event.type === 'keydown') {
+      if (this.keyboardEventOriginIsInteractive(event as KeyboardEvent)) return;
+      const key = (event as KeyboardEvent).key;
+      if (['ArrowUp', 'PageUp', 'Home'].includes(key)) {
+        this.cancelFullAnchorRestore();
+        this.armEarlierScrollIntent();
+        this.requestEarlierIfAtTop();
+        this.markUserUnpinned();
+      } else if (['ArrowDown', 'PageDown', 'End', ' '].includes(key)) {
+        this.clearEarlierScrollIntent();
         this.cancelFullAnchorRestore();
       }
       return;
     }
-    if (event.type === 'pointerdown' && event.target !== this.scrollContainer) return;
-    this.cancelFullAnchorRestore();
+    if (event.type === 'touchmove') {
+      const currentY = (event as TouchEvent).touches[0]?.clientY;
+      const previousY = this.touchScrollY;
+      this.touchScrollY = currentY;
+      if (currentY === undefined || previousY === undefined) return;
+      if (currentY > previousY + 0.5) {
+        this.armEarlierScrollIntent();
+        this.requestEarlierIfAtTop();
+      } else if (currentY < previousY - 0.5) {
+        this.clearEarlierScrollIntent();
+      } else {
+        return;
+      }
+      this.cancelFullAnchorRestore();
+      this.markUserUnpinned();
+      return;
+    }
+    if (event.type === 'pointerdown') {
+      if ((event as PointerEvent).button !== 0) return;
+      if (event.target !== this.scrollContainer) return;
+      this.scrollbarGestureActive = true;
+      this.cancelFullAnchorRestore();
+      this.markUserUnpinned();
+    }
+  };
+
+  private markUserUnpinned(): void {
     this.userUnpinned = true;
     this.measurementAnchor = undefined;
+  }
+
+  private eventComesFromNestedMessageList(eventArg: Event): boolean {
+    return eventArg.composedPath().some(
+      (candidate) => candidate instanceof DeesHarnessMessageList && candidate !== this,
+    );
+  }
+
+  private keyboardEventOriginIsInteractive(eventArg: KeyboardEvent): boolean {
+    return eventArg.composedPath().some((candidate) => (
+      candidate instanceof HTMLElement
+      && candidate !== this
+      && (
+        candidate.isContentEditable
+        || candidate.matches('input, textarea, select, button, [contenteditable]')
+      )
+    ));
+  }
+
+  private armEarlierScrollIntent(): void {
+    this.earlierScrollIntent = true;
+    this.scheduleScrollIntentSettlement();
+  }
+
+  private scheduleScrollIntentSettlement(): void {
+    if (this.scrollIntentTimer) clearTimeout(this.scrollIntentTimer);
+    this.scrollIntentTimer = setTimeout(() => {
+      this.scrollIntentTimer = undefined;
+      this.earlierScrollIntent = false;
+    }, scrollIntentSettlementMs);
+  }
+
+  private clearEarlierScrollIntent(): void {
+    if (this.scrollIntentTimer) clearTimeout(this.scrollIntentTimer);
+    this.scrollIntentTimer = undefined;
+    this.earlierScrollIntent = false;
+  }
+
+  private requestEarlierIfAtTop(): void {
+    const container = this.scrollContainer;
+    if (
+      !container
+      || container.scrollTop > loadEarlierThresholdPx
+      || !this.hasEarlierMessages
+      || this.loadingEarlier
+      || this.loadEarlierLatched
+    ) return;
+    this.loadEarlierLatched = true;
+    this.clearEarlierScrollIntent();
+    this.dispatchEvent(new CustomEvent('harness-load-earlier', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private resetLoadEarlierState(): void {
+    this.loadEarlierLatched = false;
+    this.loadingEarlierObserved = false;
+    this.scrollbarGestureActive = false;
+    this.touchScrollY = undefined;
+    this.clearEarlierScrollIntent();
+  }
+
+  private setProgrammaticScrollTop(containerArg: HTMLElement, topArg: number): void {
+    this.clearProgrammaticScrollMarker();
+    const generation = ++this.programmaticScrollGeneration;
+    containerArg.scrollTop = topArg;
+    this.programmaticScrollTop = containerArg.scrollTop;
+    this.lastObservedScrollTop = containerArg.scrollTop;
+    this.programmaticScrollFrame = requestAnimationFrame(() => {
+      this.programmaticScrollFrame = null;
+      if (generation !== this.programmaticScrollGeneration) return;
+      this.programmaticScrollSecondFrame = requestAnimationFrame(() => {
+        this.programmaticScrollSecondFrame = null;
+        if (generation === this.programmaticScrollGeneration) {
+          this.programmaticScrollTop = undefined;
+        }
+      });
+    });
+  }
+
+  private consumeProgrammaticScroll(topArg: number): boolean {
+    if (this.programmaticScrollTop === undefined) return false;
+    const matches = Math.abs(this.programmaticScrollTop - topArg) <= 1;
+    this.clearProgrammaticScrollMarker();
+    return matches;
+  }
+
+  private clearProgrammaticScrollMarker(): void {
+    this.programmaticScrollGeneration += 1;
+    if (this.programmaticScrollFrame !== null) cancelAnimationFrame(this.programmaticScrollFrame);
+    if (this.programmaticScrollSecondFrame !== null) cancelAnimationFrame(this.programmaticScrollSecondFrame);
+    this.programmaticScrollFrame = null;
+    this.programmaticScrollSecondFrame = null;
+    this.programmaticScrollTop = undefined;
+  }
+
+  private resetTranscriptContext(): void {
+    this.cancelFullAnchorRestore();
+    if (this.followFrame !== null) cancelAnimationFrame(this.followFrame);
+    if (this.followSecondFrame !== null) cancelAnimationFrame(this.followSecondFrame);
+    if (this.virtualMeasureFrame !== null) cancelAnimationFrame(this.virtualMeasureFrame);
+    if (this.virtualRangeFrame !== null) cancelAnimationFrame(this.virtualRangeFrame);
+    if (this.virtualizationActivationFrame !== null) cancelAnimationFrame(this.virtualizationActivationFrame);
+    this.followFrame = null;
+    this.followSecondFrame = null;
+    this.virtualMeasureFrame = null;
+    this.virtualRangeFrame = null;
+    this.virtualizationActivationFrame = null;
+    this.pendingVirtualAnchor = undefined;
+    this.pendingFullAnchor = undefined;
+    this.measurementAnchor = undefined;
+    this.pendingVirtualRepin = false;
+    this.virtualizationEnabled = false;
+    this.virtualizationEnablePending = false;
+    this.virtualizationDisablePending = false;
+    this.virtualStartIndex = 0;
+    this.virtualEndIndex = 0;
+    this.retainedVirtualKeys.clear();
+    this.explicitRetainedVirtualKey = undefined;
+    this.measuredVirtualHeights.clear();
+    this.virtualOffsets = [];
+    this.virtualTotalHeight = 0;
+    this.toolGroupIdByMessageId.clear();
+    this.nextToolGroupId = 1;
+    this.timelineRegistryRevision = -1;
+    this.knownContentKeys.clear();
+    this.currentNewContentKeys.clear();
+    this.clearTranscriptViewState(this.localViewState);
+    this.clearSelectionGesture();
+    this.disconnectSelectionChangeListener();
+    this.userUnpinned = false;
+    this.lastObservedScrollTop = 0;
+    this.showJumpChip = false;
+    this.resetLoadEarlierState();
+    this.clearProgrammaticScrollMarker();
+  }
+
+  private readonly handleTouchStart = (eventArg: TouchEvent): void => {
+    if (this.eventComesFromNestedMessageList(eventArg)) return;
+    this.touchScrollY = eventArg.touches[0]?.clientY;
+  };
+
+  private readonly handleTouchEnd = (): void => {
+    this.touchScrollY = undefined;
+    if (this.earlierScrollIntent) this.scheduleScrollIntentSettlement();
+  };
+
+  private readonly handleTouchCancel = (): void => {
+    this.touchScrollY = undefined;
+    this.clearEarlierScrollIntent();
   };
 
   public scrollToBottom(force = false): void {
@@ -1099,8 +1326,7 @@ export class DeesHarnessMessageList extends DeesElement {
       this.measurementAnchor = undefined;
     }
     if (force || this.isPinnedToBottom) {
-      container.scrollTop = container.scrollHeight;
-      this.lastObservedScrollTop = container.scrollTop;
+      this.setProgrammaticScrollTop(container, container.scrollHeight);
       this.showJumpChip = false;
     }
     this.syncScrollEdgeFades();
@@ -1110,6 +1336,20 @@ export class DeesHarnessMessageList extends DeesElement {
     const container = this.scrollContainer;
     if (!container) return;
     const top = container.scrollTop;
+    const previousTop = this.lastObservedScrollTop;
+    const programmatic = this.consumeProgrammaticScroll(top);
+    if (programmatic) {
+      this.clearEarlierScrollIntent();
+    } else {
+      if (this.scrollbarGestureActive && top < previousTop - 0.5) {
+        this.armEarlierScrollIntent();
+      } else if (top > previousTop + 0.5) {
+        this.clearEarlierScrollIntent();
+      } else if (this.earlierScrollIntent) {
+        this.scheduleScrollIntentSettlement();
+      }
+      if (this.earlierScrollIntent) this.requestEarlierIfAtTop();
+    }
     this.syncScrollEdgeFades();
     if (this.isPinnedToBottom) {
       // reaching the bottom — by any means — resumes following
@@ -1123,6 +1363,10 @@ export class DeesHarnessMessageList extends DeesElement {
     this.schedulePendingVirtualizationActivation();
   };
 
+  private readonly handleScrollEnd = (): void => {
+    this.clearEarlierScrollIntent();
+  };
+
   private schedulePendingVirtualizationActivation(): void {
     if (
       (!this.virtualizationEnablePending && !this.virtualizationDisablePending)
@@ -1187,6 +1431,7 @@ export class DeesHarnessMessageList extends DeesElement {
   };
 
   private readonly handlePointerUp = (eventArg: PointerEvent): void => {
+    this.scrollbarGestureActive = false;
     if (eventArg.button !== 0) return;
     const key = this.timelineKeyForEvent(eventArg);
     if (key) this.selectionGestureKeys.add(key);
@@ -1205,6 +1450,8 @@ export class DeesHarnessMessageList extends DeesElement {
   };
 
   private readonly handlePointerCancel = (): void => {
+    this.scrollbarGestureActive = false;
+    this.clearEarlierScrollIntent();
     this.clearSelectionGesture();
     this.handleProtectedStateChange();
   };
@@ -1228,6 +1475,13 @@ export class DeesHarnessMessageList extends DeesElement {
 
   public updated(changedProperties: Map<string, any>): void {
     super.updated(changedProperties);
+    if (changedProperties.has('transcriptKey')) {
+      const container = this.scrollContainer;
+      if (container) {
+        if (this.autoFollow) this.scrollToBottom(true);
+        else this.setProgrammaticScrollTop(container, 0);
+      }
+    }
     if (changedProperties.has('messages') || changedProperties.has('status') || changedProperties.has('permissions') || changedProperties.has('questions')) {
       this.followAfterContentChange();
     }
@@ -1424,7 +1678,10 @@ export class DeesHarnessMessageList extends DeesElement {
     const index = this.timelineIndexByKey.get(anchorArg.key);
     if (index === undefined) return;
     const stack = this.shadowRoot?.querySelector<HTMLElement>('.virtualStack');
-    containerArg.scrollTop = (stack?.offsetTop ?? 0) + (this.virtualOffsets[index] ?? 0) + anchorArg.offset;
+    this.setProgrammaticScrollTop(
+      containerArg,
+      (stack?.offsetTop ?? 0) + (this.virtualOffsets[index] ?? 0) + anchorArg.offset,
+    );
   }
 
   private restoreFullAnchor(
@@ -1435,9 +1692,13 @@ export class DeesHarnessMessageList extends DeesElement {
       `.stack > [data-timeline-key="${CSS.escape(anchorArg.key)}"]`,
     );
     if (!element) return;
-    containerArg.scrollTop += element.getBoundingClientRect().top
-      - containerArg.getBoundingClientRect().top
-      + anchorArg.offset;
+    this.setProgrammaticScrollTop(
+      containerArg,
+      containerArg.scrollTop
+        + element.getBoundingClientRect().top
+        - containerArg.getBoundingClientRect().top
+        + anchorArg.offset,
+    );
   }
 
   private scheduleFullAnchorRestore(
@@ -1774,6 +2035,8 @@ export class DeesHarnessMessageList extends DeesElement {
     this.explicitRetainedVirtualKey = undefined;
     this.retainedVirtualKeys.clear();
     this.clearSelectionGesture();
+    this.resetLoadEarlierState();
+    this.clearProgrammaticScrollMarker();
     this.entryAnimationsEnabled = true;
     this.disconnectContentResizeObserver();
     this.disconnectVirtualObservers();

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

@@ -334,6 +334,33 @@ const renderTodo = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers):
   return html`<dees-harness-todos compact .todos=${todos}></dees-harness-todos>`;
 };
 
+const projectTaskOutputItems = (output: unknown): unknown[] | undefined => {
+  if (!harnessIsRecord(output)) return undefined;
+  if (Array.isArray(output.tasks)) return output.tasks;
+  if (Object.prototype.hasOwnProperty.call(output, 'task')) return [output.task];
+  return harnessIsRecord(output.state) && Array.isArray(output.state.tasks)
+    ? output.state.tasks
+    : undefined;
+};
+
+const hasUnsupportedTodoStatus = (items: unknown[]): boolean => items.some((item) => {
+  if (!harnessIsRecord(item) || typeof item.status !== 'string') return false;
+  return item.status !== 'pending' && item.status !== 'in_progress' && item.status !== 'completed';
+});
+
+const renderProjectTask = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
+  const output = outputText(call);
+  const outputItems = projectTaskOutputItems(call.output);
+  if (outputItems !== undefined) {
+    const tasks = hasUnsupportedTodoStatus(outputItems) ? [] : harnessParseTodos(outputItems);
+    if (tasks.length) {
+      return html`<dees-harness-todos compact .todos=${tasks}></dees-harness-todos>`;
+    }
+    return helpers.monoBlock(output || harnessStringifyValue(outputItems));
+  }
+  return helpers.monoBlock(output || harnessSummarizeValue(call.input));
+};
+
 const renderMcp = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpers): TemplateResult => {
   return html`
     ${call.contentBlocks?.length ? helpers.contentBlocks(call.contentBlocks) : ''}
@@ -373,6 +400,7 @@ export const builtinBodyRenderers: Record<
   'json': renderJson,
   'search': renderSearch,
   'subtask': renderSubtask,
+  'project-task': renderProjectTask,
   'todo': renderTodo,
   'mcp': renderMcp,
   'unknown': renderUnknown,

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

@@ -222,7 +222,7 @@ export interface IHarnessToolCall {
   isError?: boolean;
   errorText?: string;
   mcp?: IHarnessMcpMeta;
-  /** Session spawned by this call (subagent/task tools); enables drill-in. */
+  /** Session spawned by this call (delegate/subagent tools); enables drill-in. */
   childSessionId?: string;
   /** Bounded live preview of the spawned session. Consumers own hydration. */
   subtask?: IHarnessSubtaskStream;

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

@@ -180,7 +180,7 @@ const defaultDescriptors: IHarnessToolDescriptor[] = [
   },
   {
     kind: 'subtask',
-    names: ['task', 'subagent'],
+    names: ['delegate', 'subagent'],
     label: 'Subagent',
     icon: 'lucide:Bot',
     // The child's model belongs in the collapsed header: a subagent often
@@ -202,6 +202,16 @@ const defaultDescriptors: IHarnessToolDescriptor[] = [
     subtitle: (call) => inputField(call, 'question') || inputField(call, 'prompt') || harnessSummaryLine(call.input),
     defaultExpanded: true,
   },
+  {
+    kind: 'project-task',
+    names: ['task'],
+    label: 'Project task',
+    icon: 'lucide:ListChecks',
+    subtitle: (call) => {
+      const action = inputField(call, 'action');
+      return action ? `Action: ${action}` : harnessSummaryLine(call.input);
+    },
+  },
   {
     kind: 'todo',
     names: ['todowrite', 'todo_write', 'todoread'],