@design.estate/dees-catalog 9.0.0 → 9.1.0

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

@@ -97,7 +97,7 @@ type TSectionRenderEntry =
  * Searchable conversation list, embeddable in a sidebar or a DeesModal.
  * Emits `harness-session-select` on click, `harness-session-open` on
  * double-click or Enter, and `harness-session-context` with viewport
- * pointer coordinates on right-click (the browser menu is suppressed).
+ * coordinates on right-click, Actions, or ContextMenu/Shift+F10.
  *
  * With `enableGrouping`, sessions render under user-defined `groups` and can
  * be dragged between groups and reordered. The component never mutates its
@@ -214,32 +214,37 @@ export class DeesHarnessSessionList extends DeesElement {
         min-height: 0;
         font-family: var(--dees-font-family);
         --session-normal: var(--dees-color-text-muted);
-        --session-working: var(--dees-color-accent-primary);
-        --session-finished: var(--dees-color-accent-success);
-        --session-attention: #bf5af2;
-        --session-error: var(--dees-color-accent-error);
-      }
-
-      :host([gobright]) {
-        --session-attention: #af52de;
+        --session-working: var(--dees-color-link);
+        --session-finished: var(--dees-color-text-success);
+        --session-attention: var(--dees-color-text-warning);
+        --session-error: var(--dees-color-text-error);
       }
 
       .searchRow {
-        position: relative;
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
         flex: 0 0 auto;
         padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
       }
 
+      .searchField {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+      }
+
       .searchIcon {
         position: absolute;
         top: 50%;
-        left: calc(var(--dees-spacing-md) + 10px);
+        left: 10px;
         color: var(--dees-color-text-muted);
-        transform: translateY(-62%);
+        transform: translateY(-50%);
         pointer-events: none;
       }
 
       .searchRow input {
+        display: block;
         width: 100%;
         height: var(--dees-control-height-lg);
         padding: 0 var(--dees-spacing-md) 0 34px;
@@ -277,6 +282,11 @@ export class DeesHarnessSessionList extends DeesElement {
         min-height: 0;
       }
 
+      /* Drag scrolling owns the viewport while drop placeholders move. */
+      .list.dragActive {
+        overflow-anchor: none;
+      }
+
       .scrollShadow {
         position: absolute;
         z-index: 1;
@@ -296,20 +306,22 @@ export class DeesHarnessSessionList extends DeesElement {
         top: 0;
         background: linear-gradient(
           to bottom,
-          color-mix(in srgb, var(--dees-material-thin-bg-opaque) 74%, transparent),
-          transparent
+          var(--dees-color-scroll-edge-shadow),
+          color-mix(in srgb, var(--dees-color-scroll-edge-shadow) 35%, transparent) 6px,
+          transparent 100%
         );
-        box-shadow: var(--dees-shadow-sm);
       }
 
       .scrollShadow.bottom {
         bottom: 0;
+        /* Paint inward from the boundary; an outer box shadow would cast
+           from the top of this band and appear to float above the footer. */
         background: linear-gradient(
           to top,
-          color-mix(in srgb, var(--dees-material-thin-bg-opaque) 74%, transparent),
-          transparent
+          var(--dees-color-scroll-edge-shadow),
+          color-mix(in srgb, var(--dees-color-scroll-edge-shadow) 35%, transparent) 6px,
+          transparent 100%
         );
-        box-shadow: var(--dees-shadow-up-sm);
       }
 
       .section {
@@ -335,19 +347,11 @@ export class DeesHarnessSessionList extends DeesElement {
         box-sizing: border-box;
       }
 
-      .item:hover {
-        --card-inner-background: var(--dees-color-hover);
-      }
-
       .item.selected {
         --card-inner-background: var(--dees-color-nav-selected);
         --card-inner-border: color-mix(in srgb, var(--dees-color-accent-primary) 35%, transparent);
       }
 
-      .item.selected:hover {
-        --card-inner-background: var(--dees-color-nav-selected);
-      }
-
       .itemInner {
         position: relative;
         isolation: isolate;
@@ -381,8 +385,7 @@ export class DeesHarnessSessionList extends DeesElement {
         --card-accent: var(--session-working);
       }
 
-      .item.state-working .itemHeader .stateDot,
-      .item.state-attention .itemHeader .stateDot {
+      .item.active .itemHeader .stateDot {
         animation: harness-activity-pulse 1.6s ease-in-out infinite;
       }
 
@@ -390,6 +393,10 @@ export class DeesHarnessSessionList extends DeesElement {
         --card-accent: var(--session-finished);
       }
 
+      .item.state-finished .itemStatus {
+        color: var(--dees-color-text-secondary);
+      }
+
       .item.state-attention {
         --card-accent: var(--session-attention);
       }
@@ -398,6 +405,11 @@ export class DeesHarnessSessionList extends DeesElement {
         --card-accent: var(--session-error);
       }
 
+      .item.state-attention .itemInner,
+      .item.state-error .itemInner {
+        box-shadow: inset 3px 0 var(--card-accent);
+      }
+
       .item.resourceDropTarget {
         outline: 2px solid var(--dees-color-accent-primary);
         outline-offset: 2px;
@@ -406,12 +418,12 @@ export class DeesHarnessSessionList extends DeesElement {
 
       .itemHeader {
         display: grid;
-        grid-template-columns: minmax(0, 1fr) 30px;
+        grid-template-columns: minmax(0, 1fr) 30px 30px;
         min-height: 44px;
       }
 
       .itemHeader.draggable {
-        grid-template-columns: 24px minmax(0, 1fr) 30px;
+        grid-template-columns: 24px minmax(0, 1fr) 30px 30px;
       }
 
       .dragHandle {
@@ -437,6 +449,7 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       .itemPrimary,
+      .sessionActions,
       .expandToggle {
         appearance: none;
         border: 0;
@@ -450,12 +463,13 @@ export class DeesHarnessSessionList extends DeesElement {
         min-width: 0;
         align-items: center;
         gap: var(--dees-spacing-sm);
-        padding: var(--dees-spacing-sm) var(--dees-spacing-xs) var(--dees-spacing-sm) var(--dees-spacing-md);
+        padding: 6px var(--dees-spacing-xs) 6px var(--dees-spacing-md);
         text-align: left;
         cursor: pointer;
       }
 
       .itemPrimary:focus-visible,
+      .sessionActions:focus-visible,
       .expandToggle:focus-visible {
         outline: 2px solid var(--dees-color-accent-primary);
         outline-offset: -3px;
@@ -463,18 +477,50 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       .stateDot {
-        width: 8px;
-        height: 8px;
+        display: grid;
+        place-items: center;
+        width: 16px;
+        height: 16px;
         flex: 0 0 auto;
-        border-radius: 50%;
-        background: var(--card-accent);
+        color: var(--card-accent);
       }
 
       .itemCopy {
+        display: grid;
+        gap: 2px;
         min-width: 0;
         flex: 1;
       }
 
+      .itemStatus {
+        color: var(--card-accent);
+        font-size: var(--dees-font-caption2-size, 11px);
+        font-weight: 560;
+        line-height: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .itemIdentity {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        gap: 5px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption2-size, 10px);
+        line-height: 14px;
+      }
+
+      .harnessName {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .itemIdentity dees-icon { flex: 0 0 auto; }
+
       .itemTitle {
         display: flex;
         min-width: 0;
@@ -497,11 +543,12 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       .itemTime {
-        margin-top: 2px;
+        flex: 0 0 auto;
         color: var(--dees-color-text-muted);
         font-size: var(--dees-font-caption2-size, 10px);
       }
 
+      .sessionActions,
       .expandToggle {
         display: grid;
         place-items: center;
@@ -514,11 +561,6 @@ export class DeesHarnessSessionList extends DeesElement {
         cursor: pointer;
       }
 
-      .expandToggle:hover {
-        background: color-mix(in srgb, var(--card-accent) 11%, transparent);
-        color: var(--dees-color-text-primary);
-      }
-
       .expandToggle dees-icon {
         transition: transform var(--dees-transition-fast) var(--dees-ease-standard);
       }
@@ -536,15 +578,6 @@ export class DeesHarnessSessionList extends DeesElement {
         color: var(--dees-color-text-secondary);
       }
 
-      .stateLine {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        color: var(--card-accent);
-        font-size: var(--dees-font-caption1-size, 11px);
-        font-weight: 650;
-      }
-
       .itemPreview {
         color: var(--dees-color-text-secondary);
         font-size: var(--dees-font-caption1-size, 11px);
@@ -720,11 +753,6 @@ export class DeesHarnessSessionList extends DeesElement {
         cursor: pointer;
       }
 
-      .resourceActions:hover {
-        background: var(--dees-color-hover);
-        color: var(--dees-color-text-primary);
-      }
-
       .resourceDragHandle:focus-visible,
       .resourcePrimary:focus-visible,
       .resourceActions:focus-visible {
@@ -791,10 +819,6 @@ export class DeesHarnessSessionList extends DeesElement {
         text-align: left;
       }
 
-      .groupHeader:hover {
-        background: var(--dees-color-hover);
-      }
-
       .groupHeader .chevron {
         transition: transform var(--dees-transition-fast) var(--dees-ease-standard);
       }
@@ -816,42 +840,77 @@ export class DeesHarnessSessionList extends DeesElement {
         outline-offset: -1px;
       }
 
-      .dropLine {
-        display: none;
+      .groupAttention {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-left: auto;
+        color: var(--dees-color-text-warning);
+        font-size: var(--dees-font-caption2-size, 10px);
       }
 
-      .newGroupRow {
-        flex: 0 0 auto;
-        padding: 0 var(--dees-spacing-md) var(--dees-spacing-md);
+      .groupAttention + .groupCount { margin-left: 10px; }
+
+      .dropLine {
+        display: none;
       }
 
       .newGroupButton {
-        display: flex;
-        align-items: center;
-        gap: var(--dees-spacing-xs);
-        width: 100%;
-        min-height: 34px;
-        justify-content: center;
-        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
-        border: 1px dashed var(--dees-color-border-default);
-        border-radius: 11px;
-        background: color-mix(in srgb, var(--dees-color-bg-primary) 55%, transparent);
+        appearance: none;
+        display: grid;
+        place-items: center;
+        flex: 0 0 auto;
+        width: var(--dees-control-height-lg);
+        height: var(--dees-control-height-lg);
+        padding: 0;
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-control-bg);
         color: var(--dees-color-text-secondary);
         cursor: pointer;
         font-family: inherit;
-        font-size: var(--dees-font-control-size-sm, 12px);
       }
 
-      .newGroupButton:hover {
-        border-color: var(--dees-color-accent-primary);
-        color: var(--dees-color-text-primary);
+      .newGroupButton:focus-visible {
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: 2px;
+      }
+
+      @media (hover: hover) {
+        .item:hover {
+          --card-inner-background: var(--dees-color-hover);
+        }
+
+        .item.selected:hover {
+          --card-inner-background: var(--dees-color-nav-selected);
+        }
+
+        .sessionActions:hover,
+        .expandToggle:hover {
+          background: color-mix(in srgb, var(--card-accent) 11%, transparent);
+          color: var(--dees-color-text-primary);
+        }
+
+        .resourceActions:hover {
+          background: var(--dees-color-hover);
+          color: var(--dees-color-text-primary);
+        }
+
+        .groupHeader:hover {
+          background: var(--dees-color-hover);
+        }
+
+        .newGroupButton:hover {
+          background: var(--dees-color-hover);
+          color: var(--dees-color-text-primary);
+        }
       }
 
       @media (prefers-reduced-motion: reduce) {
         .item,
         .itemInner,
-        .item.state-attention .itemHeader .stateDot,
-        .item.state-working .itemHeader .stateDot,
+        .item.active .itemHeader .stateDot,
         .scrollShadow,
         .expandToggle dees-icon {
           animation: none;
@@ -861,6 +920,16 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       @media (pointer: coarse) {
+        .searchRow input { height: 44px; }
+        .newGroupButton { width: 44px; height: 44px; }
+        .itemHeader { grid-template-columns: minmax(0, 1fr) 44px 47px; }
+        .itemHeader.draggable { grid-template-columns: 44px minmax(0, 1fr) 44px 47px; }
+        .dragHandle,
+        .sessionActions,
+        .expandToggle { min-width: 44px; min-height: 44px; }
+        .sessionActions { margin: 0; }
+        .expandToggle { margin: 0 3px 0 0; }
+
         .resourceRow {
           grid-template-columns: 44px minmax(0, 1fr) 44px;
         }
@@ -931,7 +1000,8 @@ export class DeesHarnessSessionList extends DeesElement {
   }
 
   private sessionMatchesSearch(sessionArg: IHarnessSessionMeta, queryArg: string): boolean {
-    return [sessionArg.title, sessionArg.preview, sessionArg.id]
+    return [sessionArg.title, sessionArg.preview, sessionArg.id, sessionArg.harness?.id,
+      sessionArg.harness?.name, this.sessionStatusLabel(sessionArg), this.sessionStateLabel(sessionArg.state ?? 'normal')]
       .filter(Boolean)
       .join(' ')
       .toLowerCase()
@@ -1144,24 +1214,42 @@ export class DeesHarnessSessionList extends DeesElement {
     const groupingActive = this.enableGrouping && !this.search.trim();
     return html`
       <div class="searchRow">
-        <dees-icon class="searchIcon" icon="lucide:Search" iconSize="13"></dees-icon>
-        <input
-          placeholder=${this.acceptedResources.length
-            ? 'Search conversations and resources'
-            : 'Search conversations'}
-          aria-label=${this.acceptedResources.length
-            ? 'Search conversations and resources'
-            : 'Search conversations'}
-          .value=${this.search}
-          @input=${(event: Event) => {
-            this.search = (event.currentTarget as HTMLInputElement).value;
-          }}
-        />
+        <div class="searchField">
+          <dees-icon class="searchIcon" icon="lucide:Search" iconSize="13"></dees-icon>
+          <input
+            placeholder=${this.acceptedResources.length
+              ? 'Search conversations and resources'
+              : 'Search conversations'}
+            aria-label=${this.acceptedResources.length
+              ? 'Search conversations and resources'
+              : 'Search conversations'}
+            .value=${this.search}
+            @input=${(event: Event) => {
+              this.search = (event.currentTarget as HTMLInputElement).value;
+            }}
+          />
+        </div>
+        ${this.enableGrouping ? html`
+          <button
+            class="newGroupButton"
+            type="button"
+            aria-label="New group"
+            title="New group"
+            @click=${() => {
+              this.dispatchEvent(new CustomEvent('harness-group-create-request', {
+                bubbles: true,
+                composed: true,
+              }));
+            }}
+          >
+            <dees-icon icon="lucide:FolderPlus" iconSize="14" aria-hidden="true"></dees-icon>
+          </button>
+        ` : ''}
       </div>
       <div class="listFrame">
         <div class="scrollShadow top ${this.topScrollShadowVisible ? 'visible' : ''}"></div>
         <div
-          class="list"
+          class="list ${this.draggingSessionId || this.draggingResourceId ? 'dragActive' : ''}"
           @scroll=${this.syncScrollShadowState}
         >
           <div class="listContent">
@@ -1175,27 +1263,6 @@ export class DeesHarnessSessionList extends DeesElement {
         <div class="scrollShadow bottom ${this.bottomScrollShadowVisible ? 'visible' : ''}"></div>
       </div>
       <div class="visuallyHidden" aria-live="polite">${this.moveAnnouncement}</div>
-      ${groupingActive
-        ? html`
-            <div class="newGroupRow">
-              <button
-                class="newGroupButton"
-                type="button"
-                @click=${() => {
-                  this.dispatchEvent(
-                    new CustomEvent('harness-group-create-request', {
-                      bubbles: true,
-                      composed: true,
-                    }),
-                  );
-                }}
-              >
-                <dees-icon icon="lucide:FolderPlus" iconSize="13"></dees-icon>
-                New group
-              </button>
-            </div>
-          `
-        : ''}
     `;
   }
 
@@ -1238,6 +1305,7 @@ export class DeesHarnessSessionList extends DeesElement {
           .map((id) => byId.get(id))
           .filter((session): session is IHarnessSessionMeta => session !== undefined);
         const collapsed = this.collapsedGroupIds.has(group.id);
+        const attentionCount = members.filter((session) => session.state === 'attention' || session.state === 'error').length;
         const isHeaderDrop =
           this.dropSlot?.groupId === group.id
           && this.dropSlot.index === this.sortableSessions(members).length
@@ -1265,6 +1333,9 @@ export class DeesHarnessSessionList extends DeesElement {
           >
             <dees-icon class="chevron" icon="lucide:ChevronDown" iconSize="12"></dees-icon>
             <span>${group.name}</span>
+            ${attentionCount ? html`<span class="groupAttention" aria-label=${`${attentionCount} need attention`}>
+              <dees-icon aria-hidden="true" icon="lucide:CircleAlert" iconSize="11"></dees-icon>${attentionCount}
+            </span>` : ''}
             <span class="groupCount">${members.length}</span>
           </button>
           ${collapsed
@@ -1370,13 +1441,15 @@ export class DeesHarnessSessionList extends DeesElement {
     );
     const expanded = this.expandedSessionIds.has(session.id);
     const state = session.state ?? 'normal';
+    const statusLabel = this.sessionStatusLabel(session);
+    const active = (state === 'normal' || state === 'working') && (session.working ?? state === 'working');
     const detailsId = `session-details-${session.id}`;
     const dropIndex = index < 0 ? 0 : index;
     const resources = this.resourcesForSession(session);
     const isResourceDropTarget = this.resourceDropTargetSessionId === session.id;
     return html`
       <article
-        class="item state-${state} ${expanded ? 'expanded' : ''} ${
+        class="item state-${state} ${active ? 'active' : ''} ${expanded ? 'expanded' : ''} ${
           session.id === this.selectedSessionId ? 'selected' : ''
         } ${
           this.draggingSessionId === session.id ? 'dragging' : ''
@@ -1388,12 +1461,14 @@ export class DeesHarnessSessionList extends DeesElement {
         data-drop-index=${dropIndex}
         data-drop-kind=${index < 0 ? 'slot' : 'card'}
         @dblclick=${(event: MouseEvent) => {
-          if (this.eventTargetsExpandToggle(event) || this.eventTargetsDragHandle(event)) return;
+          if (this.eventTargetsExpandToggle(event) || this.eventTargetsDragHandle(event)
+            || this.eventTargetsSessionActions(event)) return;
           this.emit('harness-session-open', session);
         }}
         @contextmenu=${(event: MouseEvent) => {
           if (this.eventTargetsExpandToggle(event)) return;
           event.preventDefault();
+          event.stopPropagation();
           const detail: IHarnessSessionContextDetail = {
             session,
             clientX: event.clientX,
@@ -1433,15 +1508,19 @@ export class DeesHarnessSessionList extends DeesElement {
             <button
               class="itemPrimary"
               type="button"
+              aria-keyshortcuts="ContextMenu Shift+F10"
               aria-current=${session.id === this.selectedSessionId ? 'true' : 'false'}
               @click=${() => this.emit('harness-session-select', session)}
               @keydown=${(event: KeyboardEvent) => {
+                if (this.handleSessionContextKey(event)) return;
                 if (event.key !== 'Enter') return;
                 event.preventDefault();
                 this.emit('harness-session-open', session);
               }}
             >
-              <span class="stateDot"></span>
+              <span class="stateDot" aria-hidden="true">
+                <dees-icon icon=${this.sessionStateIcon(state)} iconSize="14"></dees-icon>
+              </span>
               <span class="itemCopy">
                 <span class="itemTitle">
                   ${session.icon
@@ -1449,10 +1528,29 @@ export class DeesHarnessSessionList extends DeesElement {
                     : ''}
                   <span class="titleText">${session.title || session.id}</span>
                 </span>
-                <span class="itemTime">${harnessFormatRelativeTime(session.updatedAt ?? session.createdAt)}</span>
-                <span class="visuallyHidden">Status: ${this.sessionStateLabel(state)}</span>
+                <span class="itemStatus" title=${statusLabel}>${statusLabel}</span>
+                <span class="itemIdentity">
+                  ${session.harness ? html`
+                    ${session.harness.icon ? html`<dees-icon aria-hidden="true" icon=${session.harness.icon} iconSize="11"></dees-icon>` : ''}
+                    <span class="harnessName" title=${session.harness.name}>${session.harness.name}</span>
+                    <span aria-hidden="true">·</span>
+                  ` : ''}
+                  <span class="itemTime">${harnessFormatRelativeTime(session.updatedAt ?? session.createdAt)}</span>
+                </span>
               </span>
             </button>
+            <button
+              class="sessionActions"
+              type="button"
+              title="Actions"
+              aria-label=${`Actions for ${session.title || session.id}`}
+              aria-haspopup="menu"
+              aria-keyshortcuts="ContextMenu Shift+F10"
+              @click=${this.invokeSessionContext}
+              @keydown=${this.handleSessionContextKey}
+            >
+              <dees-icon icon="lucide:Ellipsis" iconSize="15"></dees-icon>
+            </button>
             <button
               class="expandToggle"
               type="button"
@@ -1484,10 +1582,6 @@ export class DeesHarnessSessionList extends DeesElement {
           ${expanded
             ? html`
                 <div class="itemDetails" id=${detailsId}>
-                  <div class="stateLine">
-                    <span class="stateDot"></span>
-                    <span>${this.sessionStateLabel(state)}</span>
-                  </div>
                   ${session.preview ? html`<div class="itemPreview">${session.preview}</div>` : ''}
                   <div class="itemMeta">
                     ${session.messageCount ? `${session.messageCount} messages · ` : ''}${session.id}
@@ -1623,6 +1717,30 @@ export class DeesHarnessSessionList extends DeesElement {
     `;
   }
 
+  private invokeSessionContext(event: MouseEvent | KeyboardEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    const control = event.currentTarget as HTMLElement;
+    const rect = control.getBoundingClientRect();
+    // Use the existing context-menu path, including its composed dialog owner.
+    control.dispatchEvent(new MouseEvent('contextmenu', {
+      bubbles: true, composed: true, cancelable: true,
+      clientX: rect.left + rect.width / 2, clientY: rect.bottom,
+    }));
+  }
+
+  private handleSessionContextKey(event: KeyboardEvent): boolean {
+    if (event.key !== 'ContextMenu' && !(event.key === 'F10' && event.shiftKey)) return false;
+    this.invokeSessionContext(event);
+    return true;
+  }
+
+  private eventTargetsSessionActions(event: Event): boolean {
+    return event.composedPath().some(
+      (target) => target instanceof HTMLElement && target.classList.contains('sessionActions'),
+    );
+  }
+
   private eventTargetsExpandToggle(event: Event): boolean {
     return event.composedPath().some(
       (target) => target instanceof HTMLElement && target.classList.contains('expandToggle'),
@@ -1654,6 +1772,20 @@ export class DeesHarnessSessionList extends DeesElement {
     }
   }
 
+  private sessionStatusLabel(session: IHarnessSessionMeta): string {
+    return session.statusLabel?.trim() || this.sessionStateLabel(session.state ?? 'normal');
+  }
+
+  private sessionStateIcon(state: NonNullable<IHarnessSessionMeta['state']>): string {
+    switch (state) {
+      case 'working': return 'lucide:CircleDashed';
+      case 'finished': return 'lucide:CircleCheck';
+      case 'attention': return 'lucide:MessageCircleQuestion';
+      case 'error': return 'lucide:CircleX';
+      default: return 'lucide:Circle';
+    }
+  }
+
   private toggleSessionExpanded(sessionIdArg: string): void {
     const next = new Set(this.expandedSessionIds);
     if (next.has(sessionIdArg)) next.delete(sessionIdArg);

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

@@ -1262,7 +1262,7 @@ export class DeesHarnessToolCard extends DeesElement {
         <dees-dataview-codebox
           .progLang=${options?.language ?? 'plaintext'}
           .filename=${options?.filename ?? ''}
-          .diffView=${this.diffViewOverride ?? options?.view ?? 'inline'}
+          .diffView=${this.diffViewOverride ?? options?.view ?? 'auto'}
           .unifiedDiff=${options?.unifiedDiff ?? ''}
           .showDiffLineNumbers=${options?.showLineNumbers ?? true}
           .codeBefore=${before}