@design.estate/dees-catalog 6.1.0 → 6.2.0

package/ts_web/elements/00group-harness/dees-harness-overflow-text.ts

@@ -0,0 +1,236 @@
+import { demoFunc } from './dees-harness-overflow-text.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-overflow-text': DeesHarnessOverflowText;
+  }
+}
+
+@customElement('dees-harness-overflow-text')
+export class DeesHarnessOverflowText extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ type: Number })
+  accessor fadeWidthPx: number = 40;
+
+  @property({ type: Number })
+  accessor introDelayMs: number = 2000;
+
+  @state()
+  accessor overflowing: boolean = false;
+
+  @state()
+  accessor travelPx: number = 0;
+
+  private readonly createdAt = performance.now();
+  private resizeObserver: ResizeObserver | null = null;
+  private visibilityObserver: IntersectionObserver | null = null;
+  private measureFrame: number | null = null;
+  private introTimeout: ReturnType<typeof setTimeout> | null = null;
+  private introAnimation: Animation | null = null;
+  private introHandled = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        min-width: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      .viewport {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .viewport.overflowing {
+        -webkit-mask-image: linear-gradient(
+          to right,
+          black 0,
+          black calc(100% - var(--harness-overflow-fade-width)),
+          transparent 100%
+        );
+        mask-image: linear-gradient(
+          to right,
+          black 0,
+          black calc(100% - var(--harness-overflow-fade-width)),
+          transparent 100%
+        );
+      }
+
+      .text {
+        display: inline-block;
+        min-width: max-content;
+        transform: translateX(0);
+      }
+
+      .viewport.overflowing:hover .text {
+        animation: harness-overflow-reveal var(--harness-overflow-duration) var(--dees-ease-standard);
+      }
+
+      @keyframes harness-overflow-reveal {
+        0%, 10%, 100% { transform: translateX(0); }
+        72%, 88% { transform: translateX(calc(0px - var(--harness-overflow-travel))); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .viewport.overflowing:hover .text {
+          animation: none;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const durationSeconds = Math.min(7, Math.max(3.2, this.travelPx / 80 + 2.4));
+    return html`
+      <span
+        class=${`viewport ${this.overflowing ? 'overflowing' : ''}`}
+        style=${`
+          --harness-overflow-fade-width: ${this.fadeWidthPx}px;
+          --harness-overflow-travel: ${this.travelPx}px;
+          --harness-overflow-duration: ${durationSeconds}s;
+        `}
+      >
+        <span class="text"><slot @slotchange=${this.scheduleMeasure}></slot></span>
+      </span>
+    `;
+  }
+
+  public firstUpdated(changedProperties: Map<PropertyKey, unknown>): void {
+    super.firstUpdated(changedProperties);
+    if (!this.isConnected) return;
+    this.connectResizeObserver();
+    this.scheduleMeasure();
+    this.scheduleIntro();
+  }
+
+  public updated(changedProperties: Map<PropertyKey, unknown>): void {
+    super.updated(changedProperties);
+    if (!this.isConnected) return;
+    if (changedProperties.has('fadeWidthPx')) this.scheduleMeasure();
+    if (changedProperties.has('introDelayMs') && !this.introHandled) this.scheduleIntro();
+  }
+
+  public async connectedCallback(): Promise<void> {
+    const connected = super.connectedCallback();
+    if (this.hasUpdated) {
+      this.connectResizeObserver();
+      this.scheduleMeasure();
+      this.scheduleIntro();
+    }
+    await connected;
+  }
+
+  private connectResizeObserver(): void {
+    if (!this.isConnected || this.resizeObserver) return;
+    const viewport = this.shadowRoot?.querySelector('.viewport');
+    const text = this.shadowRoot?.querySelector('.text');
+    if (!viewport || !text) return;
+    this.resizeObserver = new ResizeObserver(this.scheduleMeasure);
+    this.resizeObserver.observe(viewport);
+    this.resizeObserver.observe(text);
+    this.visibilityObserver = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      this.scheduleMeasure();
+      requestAnimationFrame(() => this.tryRunIntro());
+    });
+    this.visibilityObserver.observe(this);
+  }
+
+  private readonly scheduleMeasure = (): void => {
+    if (!this.isConnected || this.measureFrame !== null) return;
+    this.measureFrame = requestAnimationFrame(() => {
+      this.measureFrame = null;
+      if (!this.isConnected) return;
+      const viewport = this.shadowRoot?.querySelector<HTMLElement>('.viewport');
+      const text = this.shadowRoot?.querySelector<HTMLElement>('.text');
+      if (!viewport || !text) return;
+      this.measureOverflow(viewport, text);
+      if (
+        !this.introHandled
+        && performance.now() - this.createdAt >= this.introDelayMs
+      ) {
+        requestAnimationFrame(() => this.tryRunIntro());
+      }
+    });
+  };
+
+  private scheduleIntro(): void {
+    if (!this.isConnected || this.introHandled) return;
+    if (this.introTimeout) clearTimeout(this.introTimeout);
+    const remainingMs = Math.max(0, this.introDelayMs - (performance.now() - this.createdAt));
+    this.introTimeout = setTimeout(() => {
+      this.introTimeout = null;
+      this.scheduleMeasure();
+      requestAnimationFrame(() => this.tryRunIntro());
+    }, remainingMs);
+  }
+
+  private tryRunIntro(): void {
+    if (!this.isConnected || this.introHandled) return;
+    const viewport = this.shadowRoot?.querySelector<HTMLElement>('.viewport');
+    const text = this.shadowRoot?.querySelector<HTMLElement>('.text');
+    if (!viewport || !text || viewport.clientWidth <= 0) return;
+    this.measureOverflow(viewport, text);
+    this.introHandled = true;
+    if (!this.overflowing || this.travelPx <= 0) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const duration = Math.min(7000, Math.max(3200, this.travelPx / 80 * 1000 + 2400));
+    this.introAnimation = text.animate([
+      { transform: 'translateX(0)', offset: 0 },
+      { transform: 'translateX(0)', offset: 0.1 },
+      { transform: `translateX(-${this.travelPx}px)`, offset: 0.72 },
+      { transform: `translateX(-${this.travelPx}px)`, offset: 0.88 },
+      { transform: 'translateX(0)', offset: 1 },
+    ], {
+      duration,
+      easing: 'cubic-bezier(0.2, 0, 0, 1)',
+    });
+    this.introAnimation.onfinish = () => {
+      this.introAnimation = null;
+    };
+    this.introAnimation.oncancel = () => {
+      this.introAnimation = null;
+    };
+  }
+
+  private measureOverflow(viewportArg: HTMLElement, textArg: HTMLElement): void {
+    const overflowPx = Math.max(0, textArg.scrollWidth - viewportArg.clientWidth);
+    this.overflowing = overflowPx > 0.5;
+    this.travelPx = this.overflowing ? overflowPx + this.fadeWidthPx : 0;
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    if (this.measureFrame !== null) cancelAnimationFrame(this.measureFrame);
+    if (this.introTimeout) clearTimeout(this.introTimeout);
+    this.measureFrame = null;
+    this.introTimeout = null;
+    this.introAnimation?.cancel();
+    this.introAnimation = null;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.visibilityObserver?.disconnect();
+    this.visibilityObserver = null;
+    await super.disconnectedCallback();
+  }
+}

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

@@ -751,8 +751,6 @@ export class DeesHarnessSessionList extends DeesElement {
       this.finishPointerDrag(false);
     }
     if (!changedProperties.has('sessions')) return;
-    const previousSessions = changedProperties.get('sessions') as IHarnessSessionMeta[] | undefined;
-    const previousById = new Map((previousSessions ?? []).map((session) => [session.id, session]));
     const knownIds = new Set(this.sessions.map((session) => session.id));
     if (this.pointerDragGesture && !knownIds.has(this.pointerDragGesture.sessionId)) {
       this.finishPointerDrag(false);
@@ -760,12 +758,6 @@ export class DeesHarnessSessionList extends DeesElement {
     const nextExpanded = new Set(
       [...this.expandedSessionIds].filter((sessionId) => knownIds.has(sessionId)),
     );
-    for (const session of this.sessions) {
-      const previous = previousById.get(session.id);
-      if (previous && previous.working !== true && session.working === true) {
-        nextExpanded.add(session.id);
-      }
-    }
     if (
       nextExpanded.size !== this.expandedSessionIds.size
       || [...nextExpanded].some((sessionId) => !this.expandedSessionIds.has(sessionId))

package/ts_web/elements/00group-harness/dees-harness-session-sidebar/dees-harness-session-sidebar.ts

@@ -13,20 +13,33 @@ import {
 import { themeDefaultStyles } from '../../00theme.js';
 import type {
   IHarnessIntelligenceExchange,
+  IHarnessMessage,
   IHarnessScratchpad,
   IHarnessScratchpadSaveDetail,
   IHarnessSessionIntelligenceAskDetail,
   IHarnessSessionMetrics,
   IHarnessTodoItem,
+  IHarnessToolCall,
+  THarnessToolStatus,
 } from '../interfaces.js';
+import { harnessEffectiveToolStatus, harnessFormatRelativeTime } from '../harness.helpers.js';
+import { DeesHarnessToolRegistry } from '../toolregistry.js';
 import '../dees-harness-todos/dees-harness-todos.js';
+import '../dees-harness-overflow-text.js';
 import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
 const { repeat } = directives;
 
 const formatTokenCount = (valueArg: number): string => valueArg.toLocaleString('en-US');
-type TSessionSidebarSection = 'tasks' | 'metrics' | 'scratchpad' | 'intelligence';
+type TSessionSidebarSection = 'tasks' | 'activity' | 'metrics' | 'scratchpad' | 'intelligence';
+
+interface IToolActivityEntry {
+  key: string;
+  call: IHarnessToolCall;
+  createdAt?: number;
+  status: THarnessToolStatus;
+}
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -49,6 +62,13 @@ export class DeesHarnessSessionSidebar extends DeesElement {
   @property({ type: Boolean })
   accessor showTasks: boolean = true;
 
+  /** Top-level tool messages from the host's currently retained transcript window. */
+  @property({ attribute: false })
+  accessor toolMessages: IHarnessMessage[] = [];
+
+  @property({ attribute: false })
+  accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
+
   @property({ attribute: false })
   accessor metrics: IHarnessSessionMetrics = {};
 
@@ -313,6 +333,103 @@ export class DeesHarnessSessionSidebar extends DeesElement {
         min-width: 0;
       }
 
+      .activityList,
+      .activityGroup {
+        display: grid;
+        gap: var(--dees-spacing-sm);
+      }
+
+      .activityGroup + .activityGroup {
+        margin-top: var(--dees-spacing-md);
+      }
+
+      .activityGroupTitle {
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        font-weight: 650;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+      }
+
+      .activityItem {
+        display: grid;
+        grid-template-columns: 22px minmax(0, 1fr);
+        gap: var(--dees-spacing-sm);
+        align-items: start;
+        min-width: 0;
+        padding: var(--dees-spacing-xs) 0;
+      }
+
+      .activityIcon {
+        display: grid;
+        place-items: center;
+        width: 22px;
+        height: 22px;
+        border-radius: var(--dees-radius-md);
+        background: var(--dees-color-fill-secondary);
+        color: var(--dees-color-text-secondary);
+      }
+
+      .activityItem.status-running .activityIcon,
+      .activityItem.status-pending .activityIcon {
+        color: var(--dees-color-accent-primary);
+      }
+
+      .activityItem.status-error .activityIcon {
+        color: var(--dees-color-accent-error);
+      }
+
+      .activityCopy {
+        min-width: 0;
+      }
+
+      .activityTitleRow,
+      .activityMeta {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        min-width: 0;
+      }
+
+      .activityTitle {
+        min-width: 0;
+        flex: 1;
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 600;
+      }
+
+      .activityStatus {
+        flex: 0 0 auto;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        text-transform: capitalize;
+      }
+
+      .activityItem.status-running .activityStatus,
+      .activityItem.status-pending .activityStatus {
+        color: var(--dees-color-accent-primary);
+      }
+
+      .activityItem.status-error .activityStatus {
+        color: var(--dees-color-text-error);
+      }
+
+      .activitySubtitle {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        margin-top: 1px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption2-size, 10px);
+      }
+
+      .activityMeta {
+        margin-top: 2px;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+      }
+
       .metricList {
         display: grid;
         gap: 6px;
@@ -505,6 +622,7 @@ export class DeesHarnessSessionSidebar extends DeesElement {
     return html`
       <div class="sidebar">
         ${this.showTasks ? this.renderTasks() : ''}
+        ${this.toolActivityEntries.length ? this.renderToolActivity() : ''}
         ${this.hasMetrics ? this.renderMetrics() : ''}
         ${this.scratchpad ? this.renderScratchpad() : ''}
         ${this.intelligenceEnabled ? this.renderIntelligence() : ''}
@@ -516,9 +634,22 @@ export class DeesHarnessSessionSidebar extends DeesElement {
     return Object.values(this.metrics).some((value) => value !== undefined);
   }
 
+  private get toolActivityEntries(): IToolActivityEntry[] {
+    return this.toolMessages
+      .filter((message): message is IHarnessMessage & { toolCall: IHarnessToolCall } => Boolean(message.toolCall))
+      .map((message) => ({
+        key: JSON.stringify([message.id, message.toolCall.id]),
+        call: message.toolCall,
+        createdAt: message.createdAt ?? message.toolCall.startedAt,
+        status: harnessEffectiveToolStatus(message.toolCall),
+      }))
+      .sort((left, right) => (right.createdAt ?? 0) - (left.createdAt ?? 0));
+  }
+
   private get availableSections(): TSessionSidebarSection[] {
     return [
       ...(this.showTasks ? ['tasks' as const] : []),
+      ...(this.toolActivityEntries.length ? ['activity' as const] : []),
       ...(this.hasMetrics ? ['metrics' as const] : []),
       ...(this.scratchpad ? ['scratchpad' as const] : []),
       ...(this.intelligenceEnabled ? ['intelligence' as const] : []),
@@ -527,6 +658,7 @@ export class DeesHarnessSessionSidebar extends DeesElement {
 
   private get defaultExpandedSection(): TSessionSidebarSection | undefined {
     if (this.showTasks && this.todos.length > 0) return 'tasks';
+    if (this.toolActivityEntries.length) return 'activity';
     if (this.hasMetrics) return 'metrics';
     if (this.scratchpad) return 'scratchpad';
     if (this.intelligenceEnabled) return 'intelligence';
@@ -580,6 +712,66 @@ export class DeesHarnessSessionSidebar extends DeesElement {
     );
   }
 
+  private renderToolActivity(): TemplateResult {
+    const entries = this.toolActivityEntries;
+    const active = entries.filter((entry) => entry.status === 'pending' || entry.status === 'running');
+    const history = entries.filter((entry) => entry.status === 'completed' || entry.status === 'error');
+    const summary = active.length
+      ? `${active.length} active · ${history.length} past`
+      : `${history.length} past`;
+    return this.renderSection(
+      'activity',
+      'Tools & Subagents',
+      'lucide:Wrench',
+      html`
+        <div class="activityList">
+          ${active.length ? this.renderActivityGroup('Active', active) : ''}
+          ${history.length ? this.renderActivityGroup('History', history) : ''}
+        </div>
+      `,
+      summary,
+    );
+  }
+
+  private renderActivityGroup(labelArg: string, entriesArg: IToolActivityEntry[]): TemplateResult {
+    return html`
+      <section class="activityGroup" aria-label=${labelArg}>
+        <div class="activityGroupTitle">${labelArg}</div>
+        ${repeat(
+          entriesArg,
+          (entry) => entry.key,
+          (entry) => this.renderActivityEntry(entry),
+        )}
+      </section>
+    `;
+  }
+
+  private renderActivityEntry(entryArg: IToolActivityEntry): TemplateResult {
+    const descriptor = this.toolRegistry.resolve(entryArg.call);
+    const label = typeof descriptor.label === 'function'
+      ? descriptor.label(entryArg.call)
+      : descriptor.label;
+    const subtitle = descriptor.subtitle?.(entryArg.call) ?? '';
+    const relativeTime = harnessFormatRelativeTime(entryArg.createdAt);
+    return html`
+      <article class=${`activityItem status-${entryArg.status}`} data-tool-call-id=${entryArg.call.id}>
+        <span class="activityIcon">
+          <dees-icon icon=${descriptor.icon} iconSize="13"></dees-icon>
+        </span>
+        <span class="activityCopy">
+          <span class="activityTitleRow">
+            <dees-harness-overflow-text class="activityTitle" title=${label}>${label}</dees-harness-overflow-text>
+            <span class="activityStatus">${entryArg.status}</span>
+          </span>
+          ${subtitle
+            ? html`<dees-harness-overflow-text class="activitySubtitle" title=${subtitle}>${subtitle}</dees-harness-overflow-text>`
+            : ''}
+          ${relativeTime ? html`<span class="activityMeta">${relativeTime}</span>` : ''}
+        </span>
+      </article>
+    `;
+  }
+
   private renderMetrics(): TemplateResult {
     const metrics = this.metrics;
     const percentage = this.contextPercentage;