@design.estate/dees-catalog 5.0.0 → 6.1.0

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

@@ -26,6 +26,7 @@ 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';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -90,13 +91,20 @@ export class DeesHarnessSessionSidebar extends DeesElement {
   @state()
   private accessor intelligenceQuestion: string = '';
 
+  @state()
+  private accessor expandedSection: TSessionSidebarSection | undefined = undefined;
+
+  private sectionStateInitialized = false;
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
         min-width: 0;
+        min-height: 0;
         height: 100%;
         font-family: var(--dees-font-family);
         color: var(--dees-color-text-primary);
@@ -105,32 +113,206 @@ export class DeesHarnessSessionSidebar extends DeesElement {
       .sidebar {
         display: flex;
         flex-direction: column;
-        min-height: 100%;
+        min-height: 0;
+        height: 100%;
+        overflow: hidden;
       }
 
       .section {
-        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        display: flex;
+        flex: 0 0 auto;
+        flex-direction: column;
+        min-height: 0;
+        overflow: hidden;
         border-bottom: 1px solid var(--dees-color-border-subtle);
       }
 
+      .section.expanded {
+        flex: 1 1 0;
+      }
+
       .section:last-child {
         border-bottom: 0;
       }
 
       .sectionHeading {
         display: flex;
+        flex: 0 0 auto;
         align-items: center;
         gap: var(--dees-spacing-xs);
-        margin-bottom: var(--dees-spacing-sm);
+        width: 100%;
+        min-height: 30px;
+        margin: 0;
+        padding: 6px var(--dees-spacing-md) 6px var(--dees-spacing-xs);
+        border: 0;
+        background: var(--dees-color-bg-secondary);
         color: var(--dees-color-text-primary);
+        font-family: inherit;
         font-size: var(--dees-font-control-size-sm, 12px);
         font-weight: 650;
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .sectionHeading:hover {
+        background: var(--dees-color-badge-default-bg);
+      }
+
+      .sectionHeading:focus-visible {
+        position: relative;
+        z-index: 1;
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: -2px;
       }
 
       .sectionHeading dees-icon {
+        flex: 0 0 auto;
         color: var(--dees-color-text-secondary);
       }
 
+      .sectionHeadingText {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .sectionSummary {
+        flex: 0 0 auto;
+        margin-left: auto;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        font-variant-numeric: tabular-nums;
+        font-weight: 500;
+      }
+
+      .sectionContent {
+        flex: 1;
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .sectionContent[hidden] {
+        display: none;
+      }
+
+      .sectionContent dees-harness-todos {
+        min-width: 0;
+      }
+
+      .scratchpadSection .sectionContent:not([hidden]) {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0;
+      }
+
+      .scratchpadSection textarea {
+        flex: 1;
+        min-height: 0;
+        resize: none;
+        overflow-y: auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border: 0;
+        border-radius: 0;
+        background: color-mix(in srgb, var(--dees-color-bg-secondary) 92%, black);
+        color: var(--dees-color-text-secondary);
+      }
+
+      .scratchpadSection textarea:focus-visible {
+        border-color: transparent;
+        background: color-mix(in srgb, var(--dees-color-bg-secondary) 92%, black);
+        box-shadow: none;
+      }
+
+      .scratchpadSection .conflict,
+      .scratchpadSection .error {
+        margin-right: var(--dees-spacing-md);
+        margin-left: var(--dees-spacing-md);
+      }
+
+      .scratchpadFooter {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-xs) var(--dees-spacing-md) var(--dees-spacing-sm);
+        border-top: 0;
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--dees-color-bg-secondary) 92%, black),
+          var(--dees-color-bg-secondary)
+        );
+      }
+
+      .scratchpadFooter .editorMeta {
+        margin-top: 0;
+      }
+
+      .intelligenceSection .sectionContent:not([hidden]) {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0;
+      }
+
+      .intelligenceHistory {
+        flex: 1;
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .intelligenceComposer {
+        flex: 0 0 auto;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
+        background: linear-gradient(
+          to bottom,
+          var(--dees-color-bg-primary),
+          var(--dees-color-bg-secondary)
+        );
+        box-shadow: var(--dees-shadow-up-sm);
+      }
+
+      .intelligenceComposer textarea {
+        min-height: 64px;
+        max-height: 160px;
+        resize: none;
+        padding: var(--dees-spacing-sm) 0;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        color: var(--dees-color-text-primary);
+        font-family: inherit;
+        font-size: var(--dees-font-control-size, 13px);
+      }
+
+      .intelligenceComposer textarea:focus-visible {
+        border-color: transparent;
+        box-shadow: none;
+        outline: 2px solid color-mix(in srgb, var(--dees-color-accent-primary) 55%, transparent);
+        outline-offset: 2px;
+      }
+
+      .intelligenceControls {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+      }
+
+      .intelligenceControls .hint {
+        flex: 1;
+        min-width: 0;
+      }
+
       .metricList {
         display: grid;
         gap: 6px;
@@ -281,6 +463,16 @@ export class DeesHarnessSessionSidebar extends DeesElement {
   ];
 
   protected willUpdate(changedPropertiesArg: Map<PropertyKey, unknown>): void {
+    const availableSections = this.availableSections;
+    if (!this.sectionStateInitialized && availableSections.length > 0) {
+      this.expandedSection = this.defaultExpandedSection;
+      this.sectionStateInitialized = true;
+    } else if (
+      this.expandedSection !== undefined
+      && !availableSections.includes(this.expandedSection)
+    ) {
+      this.expandedSection = this.defaultExpandedSection;
+    }
     if (!changedPropertiesArg.has('scratchpad')) return;
     const next = this.scratchpad;
     if (!next) {
@@ -324,14 +516,70 @@ export class DeesHarnessSessionSidebar extends DeesElement {
     return Object.values(this.metrics).some((value) => value !== undefined);
   }
 
-  private renderTasks(): TemplateResult {
+  private get availableSections(): TSessionSidebarSection[] {
+    return [
+      ...(this.showTasks ? ['tasks' as const] : []),
+      ...(this.hasMetrics ? ['metrics' as const] : []),
+      ...(this.scratchpad ? ['scratchpad' as const] : []),
+      ...(this.intelligenceEnabled ? ['intelligence' as const] : []),
+    ];
+  }
+
+  private get defaultExpandedSection(): TSessionSidebarSection | undefined {
+    if (this.showTasks && this.todos.length > 0) return 'tasks';
+    if (this.hasMetrics) return 'metrics';
+    if (this.scratchpad) return 'scratchpad';
+    if (this.intelligenceEnabled) return 'intelligence';
+    return this.showTasks ? 'tasks' : undefined;
+  }
+
+  private renderSection(
+    idArg: TSessionSidebarSection,
+    labelArg: string,
+    iconArg: string,
+    contentArg: TemplateResult,
+    summaryArg = '',
+  ): TemplateResult {
+    const expanded = this.expandedSection === idArg;
+    const contentId = `harness-session-section-${idArg}`;
     return html`
-      <section class="section tasksSection">
-        <dees-harness-todos heading="Tasks" .todos=${this.todos}></dees-harness-todos>
+      <section class=${`section ${idArg}Section ${expanded ? 'expanded' : ''}`}>
+        <button
+          class="sectionHeading"
+          type="button"
+          aria-expanded=${String(expanded)}
+          aria-controls=${contentId}
+          @click=${() => {
+            this.sectionStateInitialized = true;
+            this.expandedSection = expanded ? undefined : idArg;
+          }}
+        >
+          <dees-icon
+            icon=${expanded ? 'lucide:ChevronDown' : 'lucide:ChevronRight'}
+            iconSize="13"
+          ></dees-icon>
+          <dees-icon icon=${iconArg} iconSize="13"></dees-icon>
+          <span class="sectionHeadingText">${labelArg}</span>
+          ${summaryArg ? html`<span class="sectionSummary">${summaryArg}</span>` : ''}
+        </button>
+        <div id=${contentId} class="sectionContent" ?hidden=${!expanded}>
+          ${contentArg}
+        </div>
       </section>
     `;
   }
 
+  private renderTasks(): TemplateResult {
+    const completed = this.todos.filter((todo) => todo.status === 'completed').length;
+    return this.renderSection(
+      'tasks',
+      'Tasks',
+      'lucide:ListChecks',
+      html`<dees-harness-todos .todos=${this.todos} .showProgress=${false}></dees-harness-todos>`,
+      this.todos.length > 0 ? `${completed}/${this.todos.length}` : '',
+    );
+  }
+
   private renderMetrics(): TemplateResult {
     const metrics = this.metrics;
     const percentage = this.contextPercentage;
@@ -342,12 +590,11 @@ export class DeesHarnessSessionSidebar extends DeesElement {
       ['Context window', metrics.maxContextTokens],
       ['Current context', metrics.currentContextTokens],
     ];
-    return html`
-      <section class="section metricsSection">
-        <div class="sectionHeading">
-          <dees-icon icon="lucide:Gauge" iconSize="13"></dees-icon>
-          <span>Tokens</span>
-        </div>
+    return this.renderSection(
+      'metrics',
+      'Tokens',
+      'lucide:Gauge',
+      html`
         <div class="metricList">
           ${rows.map(([label, value]) => value === undefined ? '' : html`
             <div class="metricRow">
@@ -372,19 +619,17 @@ export class DeesHarnessSessionSidebar extends DeesElement {
             </div>
           `}
         </div>
-      </section>
-    `;
+      `,
+    );
   }
 
   private renderScratchpad(): TemplateResult {
     const scratchpad = this.scratchpad!;
-    const updatedBy = scratchpad.updatedBy === 'intelligence' ? 'Session Intelligence' : 'you';
-    return html`
-      <section class="section scratchpadSection">
-        <div class="sectionHeading">
-          <dees-icon icon="lucide:NotebookPen" iconSize="13"></dees-icon>
-          <span>Session Scratchpad</span>
-        </div>
+    return this.renderSection(
+      'scratchpad',
+      'Session Scratchpad',
+      'lucide:NotebookPen',
+      html`
         <textarea
           aria-label="Session scratchpad"
           maxlength="32768"
@@ -401,11 +646,6 @@ export class DeesHarnessSessionSidebar extends DeesElement {
             }
           }}
         ></textarea>
-        <div class="editorMeta">
-          Revision ${scratchpad.revision}${scratchpad.updatedAt
-            ? ` · updated by ${updatedBy} ${new Date(scratchpad.updatedAt).toLocaleString()}`
-            : ''}
-        </div>
         ${this.scratchpadStale ? html`
           <div class="conflict" role="status">
             A newer revision arrived. Keep this draft on the latest revision or discard it.
@@ -426,7 +666,8 @@ export class DeesHarnessSessionSidebar extends DeesElement {
           </div>
         ` : ''}
         ${this.scratchpadError ? html`<div class="error" role="alert">${this.scratchpadError}</div>` : ''}
-        <div class="actions">
+        <div class="scratchpadFooter">
+          <span class="editorMeta">rev. ${scratchpad.revision}</span>
           <dees-button
             size="sm"
             type="accent"
@@ -436,57 +677,61 @@ export class DeesHarnessSessionSidebar extends DeesElement {
             @clicked=${this.saveScratchpad}
           ></dees-button>
         </div>
-      </section>
-    `;
+      `,
+    );
   }
 
   private renderIntelligence(): TemplateResult {
-    return html`
-      <section class="section intelligenceSection">
-        <div class="sectionHeading">
-          <dees-icon icon="lucide:Sparkles" iconSize="13"></dees-icon>
-          <span>Session Intelligence</span>
+    return this.renderSection(
+      'intelligence',
+      'Session Intelligence',
+      'lucide:Sparkles',
+      html`
+        <div class="intelligenceHistory" role="log" aria-live="polite">
+          ${this.intelligenceExchanges.length ? html`
+            <div class="exchangeList">
+              ${repeat(
+                this.intelligenceExchanges,
+                (exchange) => exchange.id,
+                (exchange) => this.renderExchange(exchange),
+              )}
+            </div>
+          ` : html`<div class="empty">Ask about this session without interrupting its main work.</div>`}
         </div>
-        ${this.intelligenceExchanges.length ? html`
-          <div class="exchangeList" role="log" aria-live="polite">
-            ${repeat(
-              this.intelligenceExchanges,
-              (exchange) => exchange.id,
-              (exchange) => this.renderExchange(exchange),
-            )}
+        <div class="intelligenceComposer">
+          <textarea
+            class="intelligenceInput"
+            aria-label="Ask Session Intelligence"
+            placeholder="Ask a parallel question…"
+            maxlength="8192"
+            rows="2"
+            .value=${this.intelligenceQuestion}
+            ?disabled=${this.disabled || this.intelligenceBusy}
+            @input=${(event: InputEvent) => {
+              this.intelligenceQuestion = (event.currentTarget as HTMLTextAreaElement).value;
+            }}
+            @keydown=${(event: KeyboardEvent) => {
+              if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                this.askIntelligence();
+              }
+            }}
+          ></textarea>
+          <div class="intelligenceControls">
+            <span class="hint">Parallel session · Ctrl/⌘ + Enter</span>
+            <dees-button
+              size="sm"
+              type="accent"
+              text="Ask"
+              .status=${this.intelligenceBusy ? 'pending' : 'normal'}
+              ?disabled=${this.disabled || this.intelligenceBusy || !this.intelligenceQuestion.trim()}
+              @clicked=${this.askIntelligence}
+            ></dees-button>
           </div>
-        ` : html`<div class="empty">Ask about this session without interrupting its main work.</div>`}
-        <textarea
-          class="intelligenceInput"
-          aria-label="Ask Session Intelligence"
-          placeholder="Ask a parallel question…"
-          maxlength="8192"
-          .value=${this.intelligenceQuestion}
-          ?disabled=${this.disabled || this.intelligenceBusy}
-          @input=${(event: InputEvent) => {
-            this.intelligenceQuestion = (event.currentTarget as HTMLTextAreaElement).value;
-          }}
-          @keydown=${(event: KeyboardEvent) => {
-            if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
-              event.preventDefault();
-              this.askIntelligence();
-            }
-          }}
-        ></textarea>
-        <div class="hint">Runs separately from the main session. Ctrl/⌘ + Enter to ask.</div>
-        ${this.intelligenceError ? html`<div class="error" role="alert">${this.intelligenceError}</div>` : ''}
-        <div class="actions">
-          <dees-button
-            size="sm"
-            type="accent"
-            text="Ask"
-            .status=${this.intelligenceBusy ? 'pending' : 'normal'}
-            ?disabled=${this.disabled || this.intelligenceBusy || !this.intelligenceQuestion.trim()}
-            @clicked=${this.askIntelligence}
-          ></dees-button>
+          ${this.intelligenceError ? html`<div class="error" role="alert">${this.intelligenceError}</div>` : ''}
         </div>
-      </section>
-    `;
+      `,
+    );
   }
 
   private renderExchange(exchangeArg: IHarnessIntelligenceExchange): TemplateResult {

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

@@ -69,6 +69,9 @@ export class DeesHarnessToolCard extends DeesElement {
   @state()
   accessor returnFlash: boolean = false;
 
+  @state()
+  accessor outcomeScanTone: 'success' | 'error' | null = null;
+
   private bodyResizeObserver: ResizeObserver | null = null;
   private observedBodyInner: Element | null = null;
   private fullscreenPortal: HTMLElementTagNameMap['dees-harness-tool-fullscreen'] | null = null;
@@ -306,6 +309,10 @@ export class DeesHarnessToolCard extends DeesElement {
         font-size: var(--dees-font-caption1-size, 11px);
       }
 
+      .harness-terminal-exit.tone-success {
+        color: var(--dees-color-accent-success);
+      }
+
       .harness-subtask-open {
         justify-self: start;
         display: inline-flex;
@@ -332,6 +339,30 @@ export class DeesHarnessToolCard extends DeesElement {
         transform-origin: center;
       }
 
+      .harness-card.outcomeScan {
+        --harness-outcome-scan-color: var(--dees-color-accent-success);
+      }
+
+      .harness-card.outcomeScan-error {
+        --harness-outcome-scan-color: var(--dees-color-accent-error);
+      }
+
+      .harness-card.outcomeScan::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background: linear-gradient(
+          105deg,
+          transparent 40%,
+          color-mix(in srgb, var(--harness-outcome-scan-color) 3%, transparent) 45%,
+          color-mix(in srgb, var(--harness-outcome-scan-color) 14%, transparent) 50%,
+          color-mix(in srgb, var(--harness-outcome-scan-color) 3%, transparent) 55%,
+          transparent 60%
+        ) 100% 0 / 250% 100% no-repeat;
+        animation: harness-tool-outcome-scan 0.48s linear 0.08s both;
+      }
+
       @keyframes harness-card-return-flash {
         0%, 100% {
           transform: scale(1);
@@ -341,10 +372,20 @@ export class DeesHarnessToolCard extends DeesElement {
         }
       }
 
+      @keyframes harness-tool-outcome-scan {
+        from { background-position: 100% 0; }
+        to { background-position: 0 0; }
+      }
+
       @media (prefers-reduced-motion: reduce) {
         .harness-card.returnFlash {
           animation: none;
         }
+
+        .harness-card.outcomeScan::after {
+          animation: none;
+          opacity: 0;
+        }
       }
     `,
   ];
@@ -376,10 +417,12 @@ export class DeesHarnessToolCard extends DeesElement {
     const statusTone = call.isError ? 'error' : call.status === 'completed' ? 'success' : call.status;
     const duration = harnessFormatDuration(call.startedAt, call.finishedAt);
     return html`
-      <div class="harness-card status-${call.isError ? 'error' : call.status} ${descriptor.destructive ? 'destructive' : ''} ${this.returnFlash ? 'returnFlash' : ''}"
+      <div class="harness-card status-${call.isError ? 'error' : call.status} ${descriptor.destructive ? 'destructive' : ''} ${this.returnFlash ? 'returnFlash' : ''} ${this.outcomeScanTone ? `outcomeScan outcomeScan-${this.outcomeScanTone}` : ''}"
         @animationend=${(event: AnimationEvent) => {
           if (event.animationName === 'harness-card-return-flash') {
             this.endReturnFlash();
+          } else if (event.animationName === 'harness-tool-outcome-scan') {
+            this.endOutcomeScan();
           }
         }}
       >
@@ -444,6 +487,7 @@ export class DeesHarnessToolCard extends DeesElement {
   };
 
   private flashFallbackTimeout: ReturnType<typeof setTimeout> | null = null;
+  private outcomeScanFallbackTimeout: ReturnType<typeof setTimeout> | null = null;
 
   private readonly closeFullscreen = (): void => {
     const portal = this.fullscreenPortal;
@@ -480,8 +524,42 @@ export class DeesHarnessToolCard extends DeesElement {
     }));
   }
 
+  private startOutcomeScan(toneArg: 'success' | 'error'): void {
+    if (this.outcomeScanFallbackTimeout) clearTimeout(this.outcomeScanFallbackTimeout);
+    this.outcomeScanTone = toneArg;
+    this.outcomeScanFallbackTimeout = setTimeout(() => this.endOutcomeScan(), 750);
+  }
+
+  private endOutcomeScan(): void {
+    if (this.outcomeScanFallbackTimeout) {
+      clearTimeout(this.outcomeScanFallbackTimeout);
+      this.outcomeScanFallbackTimeout = null;
+    }
+    this.outcomeScanTone = null;
+  }
+
+  public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
+    super.willUpdate(changedProperties);
+    const previousCall = changedProperties.get('call') as IHarnessToolCall | undefined;
+    if (!previousCall || previousCall.id !== this.call.id) return;
+    const wasActive = previousCall.status === 'pending' || previousCall.status === 'running';
+    const outcomeTone = this.call.status === 'error' || this.call.isError
+      ? 'error'
+      : this.call.status === 'completed'
+        ? 'success'
+        : null;
+    if (wasActive && outcomeTone) {
+      this.startOutcomeScan(outcomeTone);
+    } else if (!outcomeTone && this.outcomeScanTone) {
+      this.endOutcomeScan();
+    }
+  }
+
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
+    if (changedProperties.has('call') && this.fullscreenPortal) {
+      this.fullscreenPortal.call = this.enrichedCall;
+    }
     if (this.uncapped) return;
     const bodyInner = this.shadowRoot?.querySelector('.bodyInner') ?? null;
     if (bodyInner === this.observedBodyInner) return;
@@ -505,6 +583,10 @@ export class DeesHarnessToolCard extends DeesElement {
       clearTimeout(this.flashFallbackTimeout);
       this.flashFallbackTimeout = null;
     }
+    if (this.outcomeScanFallbackTimeout) {
+      clearTimeout(this.outcomeScanFallbackTimeout);
+      this.outcomeScanFallbackTimeout = null;
+    }
     this.fullscreenPortal?.remove();
     this.fullscreenPortal = null;
     this.bodyResizeObserver?.disconnect();

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

@@ -105,14 +105,15 @@ const renderTerminal = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpe
   const output = call.output;
   let stdout = '';
   let stderr = '';
-  let exitCode: number | undefined;
+  let nestedExitCode: number | undefined;
   if (harnessIsRecord(output)) {
     stdout = typeof output.stdout === 'string' ? output.stdout : harnessStringifyValue(output.stdout ?? '');
     stderr = typeof output.stderr === 'string' ? output.stderr : '';
-    exitCode = typeof output.exitCode === 'number' ? output.exitCode : undefined;
+    nestedExitCode = typeof output.exitCode === 'number' ? output.exitCode : undefined;
   } else {
     stdout = harnessStringifyValue(output);
   }
+  const exitCode = typeof call.exitCode === 'number' ? call.exitCode : nestedExitCode;
   const running = call.status === 'pending' || call.status === 'running';
   return html`
     <div class="harness-terminal">
@@ -125,8 +126,8 @@ const renderTerminal = (call: IHarnessToolCall, helpers: IHarnessToolRenderHelpe
       ${running && !stdout && !stderr
         ? html`<div class="harness-terminal-running"><span class="cursor"></span> running…</div>`
         : ''}
-      ${exitCode !== undefined && exitCode !== 0
-        ? html`<div class="harness-terminal-exit">exit ${exitCode}</div>`
+      ${exitCode !== undefined
+        ? html`<div class="harness-terminal-exit ${exitCode === 0 ? 'tone-success' : ''}">exit code ${exitCode}</div>`
         : ''}
     </div>
   `;