@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/qr-panel.ts

@@ -2,20 +2,31 @@ import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import {
+  buildKeyboardHints,
   buildPanelLine,
+  buildPanelTitle,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
 } from './polish.ts';
+import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { renderQrMatrix, generateQrMatrix } from '../renderer/qr-renderer.ts';
 import { encodeConnectionPayload } from '@pellux/goodvibes-sdk/platform/pairing';
+import type { UserAuthManager } from '@pellux/goodvibes-sdk/platform/security';
+import type { UiControlPlaneSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  url: '#38bdf8',
+// Fixed-width placeholder — deliberately NOT derived from the real secret's
+// length, so masking doesn't leak how long the token/password is.
+const SECRET_MASK = '••••••••••••';
+
+// Domain accents only; base chrome (header/headerBg/label/info) comes from
+// DEFAULT_PANEL_PALETTE. qrFg/qrBg stay pure black/white — scanner contrast
+// requirements override theming.
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   token: '#a78bfa',
-  hint: '#64748b',
-  qrFg: '#000000',
-  qrBg: '#ffffff',
-} as const;
+  qrFg:  '#000000',
+  qrBg:  '#ffffff',
+} as const);
 
 /**
  * Connection info passed to the QR panel.
@@ -59,27 +70,82 @@ export class QrPanel extends BasePanel {
   private connectionInfo: QrPanelConnectionInfo;
   private readonly regenerateToken: RegenerateTokenFn | undefined;
   private readonly copyToClipboard: CopyToClipboardFn | undefined;
+  private readonly controlPlaneReadModel: UiReadModel<UiControlPlaneSnapshot> | undefined;
+  private readonly localUserAuthManager: Pick<UserAuthManager, 'inspect'> | undefined;
+  private readonly unsub: (() => void) | null;
   private lastStatus = '';
+  /** v toggles whether the token/password render in the clear. */
+  private revealed = false;
+  /** Set when r is pressed while a companion session is live — confirmed with y/Enter, cancelled with n/Esc. */
+  private confirmRegenerate: ConfirmState<null> | null = null;
 
   public constructor(
     connectionInfo: QrPanelConnectionInfo,
     regenerateToken?: RegenerateTokenFn,
     copyToClipboard?: CopyToClipboardFn,
+    controlPlaneReadModel?: UiReadModel<UiControlPlaneSnapshot>,
+    localUserAuthManager?: Pick<UserAuthManager, 'inspect'>,
   ) {
     super('qr-code', 'QR Code', 'Q', 'session');
     this.connectionInfo = connectionInfo;
     this.regenerateToken = regenerateToken;
     this.copyToClipboard = copyToClipboard;
+    this.controlPlaneReadModel = controlPlaneReadModel;
+    this.localUserAuthManager = localUserAuthManager;
+    this.unsub = controlPlaneReadModel ? controlPlaneReadModel.subscribe(() => this.markDirty()) : null;
+  }
+
+  public override onDestroy(): void {
+    this.unsub?.();
+  }
+
+  private hasLiveCompanionSession(): boolean {
+    return (this.localUserAuthManager?.inspect().sessionCount ?? 0) > 0;
+  }
+
+  private doRegenerate(): void {
+    if (!this.regenerateToken) return;
+    this.connectionInfo = this.regenerateToken();
+    this.lastStatus = 'Token regenerated.';
+    this.markDirty();
   }
 
   public handleInput(key: string): boolean {
+    if (this.confirmRegenerate) {
+      const result = handleConfirmInput(this.confirmRegenerate, key);
+      if (result === 'confirmed') {
+        this.confirmRegenerate = null;
+        this.doRegenerate();
+        return true;
+      }
+      if (result === 'cancelled') {
+        this.confirmRegenerate = null;
+        this.lastStatus = 'Regeneration cancelled.';
+        this.markDirty();
+        return true;
+      }
+      return true; // absorbed
+    }
     if (key === 'r') {
-      if (this.regenerateToken) {
-        this.connectionInfo = this.regenerateToken();
-        this.lastStatus = 'Token regenerated.';
-      } else {
+      if (!this.regenerateToken) {
         this.lastStatus = 'Regeneration not available.';
+        this.markDirty();
+        return true;
       }
+      if (this.hasLiveCompanionSession()) {
+        this.confirmRegenerate = {
+          subject: null,
+          label: 'pairing token — a companion session is live and will be disconnected',
+          verb: 'Regenerate',
+        };
+        this.markDirty();
+        return true;
+      }
+      this.doRegenerate();
+      return true;
+    }
+    if (key === 'v') {
+      this.revealed = !this.revealed;
       this.markDirty();
       return true;
     }
@@ -101,32 +167,57 @@ export class QrPanel extends BasePanel {
     const lines: Line[] = [];
 
     const { url, token, username, password } = this.connectionInfo;
+    const valueWidth = Math.max(0, width - 12);
+    const displayToken = this.revealed ? token : SECRET_MASK;
+    const displayPassword = password !== undefined ? (this.revealed ? password : SECRET_MASK) : undefined;
+
+    // ── Title + purpose: tell the operator exactly what this code is for ────
+    lines.push(buildPanelTitle(width, 'Companion Pairing', C));
+    lines.push(
+      buildPanelLine(width, [
+        [' Scan with the GoodVibes companion app to pair this session.', C.label],
+      ]),
+    );
 
     // ── Connection info header ─────────────────────────────────────────────
+    // Token and (if present) bootstrap password are masked by default — they
+    // are credentials, not display text — and only render in the clear while
+    // `revealed` is toggled on via v.
     lines.push(createEmptyLine(width));
     lines.push(
       buildPanelLine(width, [
         [' URL      ', C.label],
-        [url.slice(0, Math.max(0, width - 12)), C.url],
+        [truncateDisplay(url, valueWidth), C.info],
       ]),
     );
     lines.push(
       buildPanelLine(width, [
         [' Token    ', C.label],
-        [token, C.token],
+        [truncateDisplay(displayToken, valueWidth), C.token],
       ]),
     );
     lines.push(
       buildPanelLine(width, [
         [' Username ', C.label],
-        [username.slice(0, Math.max(0, width - 12)), C.value],
+        [truncateDisplay(username, valueWidth), C.value],
       ]),
     );
-    if (password !== undefined) {
+    if (displayPassword !== undefined) {
       lines.push(
         buildPanelLine(width, [
           [' Password ', C.label],
-          [password, C.value],
+          [truncateDisplay(displayPassword, valueWidth), C.value],
+        ]),
+      );
+    }
+
+    // ── Connected companions ──────────────────────────────────────────────
+    if (this.controlPlaneReadModel) {
+      const connected = this.controlPlaneReadModel.getSnapshot().activeClientIds.length;
+      lines.push(
+        buildPanelLine(width, [
+          [' Companions ', C.label],
+          [`connected: ${connected}`, connected > 0 ? C.good : C.dim],
         ]),
       );
     }
@@ -149,34 +240,41 @@ export class QrPanel extends BasePanel {
 
     lines.push(createEmptyLine(width));
 
-    // ── Status message (ephemeral) ─────────────────────────────────────────
-    if (this.lastStatus) {
-      lines.push(
+    // ── Footer: confirm overlay (regenerate while a companion is live) takes
+    // priority over the ephemeral status message ──────────────────────────
+    const footerLines: Line[] = [];
+    if (this.confirmRegenerate) {
+      footerLines.push(...renderConfirmLines(width, this.confirmRegenerate));
+    } else if (this.lastStatus) {
+      footerLines.push(
         buildPanelLine(width, [
-          [` ${this.lastStatus} `, C.hint],
+          [` ${this.lastStatus} `, C.label],
         ]),
       );
     }
 
-    // ── Hints ──────────────────────────────────────────────────────────────
-    const hintsLine = buildPanelLine(width, [
-      [' r ', C.hint],
-      ['regenerate  ', C.dim],
-      [' c ', C.hint],
-      ['copy token', C.dim],
-    ]);
-
-    // Push hints at the bottom if we have room, otherwise append after QR
-    const remaining = height - lines.length;
-    if (remaining > 2) {
-      // Fill with empty lines to push hints toward bottom
-      const fillCount = Math.max(0, remaining - 2);
-      for (let i = 0; i < fillCount; i++) {
-        lines.push(createEmptyLine(width));
-      }
+    // ── Hints ── only advertise actions that are actually wired ─────────────
+    const hints: Array<{ keys: string; label: string }> = [];
+    if (this.regenerateToken) hints.push({ keys: 'r', label: 'regenerate token' });
+    if (this.copyToClipboard) hints.push({ keys: 'c', label: 'copy token' });
+    hints.push({ keys: 'v', label: this.revealed ? 'hide token' : 'reveal token' });
+    const hintsLine = hints.length > 0
+      ? buildKeyboardHints(width, hints, C)
+      : buildPanelLine(width, [[' Pairing is read-only in this surface.', C.dim]]);
+    footerLines.push(hintsLine);
+
+    // Push the footer at the bottom if we have room, otherwise append it
+    // directly after the QR code.
+    const remaining = height - lines.length - footerLines.length;
+    if (remaining > 0) {
+      for (let i = 0; i < remaining; i++) lines.push(createEmptyLine(width));
     }
-    lines.push(hintsLine);
+    lines.push(...footerLines);
 
-    return lines;
+    // Clamp to the exact requested height — the QR matrix's row count is
+    // driven by payload size, not by `height`, so it can legitimately
+    // overflow a small pane; never hand back more (or fewer) lines than asked.
+    while (lines.length < height) lines.push(createEmptyLine(width));
+    return lines.slice(0, height);
   }
 }

package/src/panels/remote-panel.ts

@@ -1,11 +1,11 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
+import type { PanelIntegrationContext } from './types.ts';
 import type { UiReadModel, UiRemoteSnapshot } from '../runtime/ui-read-models.ts';
 import {
   buildDetailBlock,
   buildEmptyState,
-  buildGuidanceLine,
   buildPanelListRow,
   buildPanelLine,
   buildSummaryBlock,
@@ -17,28 +17,22 @@ import {
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import { getTrackedVisibleWindow } from '../renderer/surface-layout.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  header: '#94a3b8',
-  headerBg: '#1e293b',
-  dim: '#475569',
-  ok: '#22c55e',
-  warn: '#eab308',
-  error: '#ef4444',
-} as const;
+// Base chrome only — title band, state colors, and text tokens all come
+// straight from DEFAULT_PANEL_PALETTE (WO-002).
+const C = DEFAULT_PANEL_PALETTE;
 
 function stateColor(state: string): string {
   switch (state) {
     case 'connected':
     case 'syncing':
-      return C.ok;
+      return C.good;
     case 'degraded':
     case 'reconnecting':
     case 'authenticating':
     case 'initializing':
       return C.warn;
     case 'terminal_failure':
-      return C.error;
+      return C.bad;
     default:
       return C.dim;
   }
@@ -52,15 +46,39 @@ function truncate(text: string, width: number): string {
   return truncateDisplay(text, width);
 }
 
+// Splits a machine-generated slash-command string (e.g. `/remote show foo`)
+// into the { name, args } shape ctx.executeCommand expects — the same
+// leading-slash-stripping approach panel-integration-actions.ts uses for
+// ApprovalPanel's dispatched command.
+function parseCommand(command: string): { name: string; args: string[] } | null {
+  const parts = command.replace(/^\//, '').split(/\s+/).filter(Boolean);
+  const [name, ...args] = parts;
+  return name ? { name, args } : null;
+}
+
+// Mirrors RemoteSupervisor's own stateIsDegraded()/degradedConnections
+// definition (sdk/platform/runtime/remote/supervisor.js) so "degraded/stale"
+// means the same thing here as it does in the posture summary above.
+function isSupervisorEntryDegraded(entry: { transportState: string; heartbeat: { status: string } }): boolean {
+  const degradedTransport = entry.transportState === 'degraded'
+    || entry.transportState === 'reconnecting'
+    || entry.transportState === 'terminal_failure';
+  return degradedTransport || entry.heartbeat.status !== 'fresh';
+}
+
 export class RemotePanel extends BasePanel {
   private readonly readModel?: UiReadModel<UiRemoteSnapshot>;
   private readonly unsub: (() => void) | null;
   private selectedIndex = 0;
   private scrollOffset = 0;
   private browseMode: 'connections' | 'contracts' = 'connections';
+  // Set by handleInput (enter/r) and consumed on the very next
+  // handlePanelIntegrationAction dispatch of that same key, mirroring the
+  // token-budget-panel pattern — handleInput has no ctx.executeCommand.
+  private pendingCommand: { name: string; args: string[] } | null = null;
 
   public constructor(readModel?: UiReadModel<UiRemoteSnapshot>) {
-    super('remote', 'Remote', 'R', 'monitoring');
+    super('remote', 'Remote', '▰', 'providers');
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
@@ -70,6 +88,29 @@ export class RemotePanel extends BasePanel {
   }
 
   public handleInput(key: string): boolean {
+    // r = dispatch /remote recover for whatever is currently selected (or
+    // the runtime's first non-fresh session when nothing is selected).
+    if (this.readModel && key === 'r') {
+      const runnerId = this.getSelectedRunnerId();
+      const parsed = parseCommand(runnerId ? `/remote recover ${runnerId}` : '/remote recover');
+      if (parsed) {
+        this.pendingCommand = parsed;
+        return true;
+      }
+    }
+    // Enter on a degraded/stale supervisor selection dispatches its
+    // top recovery action (already machine-readable via .recovery[0].command)
+    // instead of requiring the operator to retype it.
+    if (this.readModel && (key === 'enter' || key === 'return')) {
+      const entry = this.getSelectedSupervisorEntry();
+      if (entry && isSupervisorEntryDegraded(entry) && entry.recovery.length > 0) {
+        const parsed = parseCommand(entry.recovery[0].command);
+        if (parsed) {
+          this.pendingCommand = parsed;
+          return true;
+        }
+      }
+    }
     const activeConnections = this.getActiveConnections();
     const contracts = this.readModel?.getSnapshot().contracts ?? [];
     const browseCount = this.browseMode === 'connections' && activeConnections.length > 0
@@ -109,6 +150,40 @@ export class RemotePanel extends BasePanel {
     return this.readModel?.getSnapshot().acp.activeConnections ?? [];
   }
 
+  // Runner id backing the currently browsed row, whichever browse mode is
+  // active — shared by the Enter/r dispatch logic and render()'s own
+  // selection lookups so they never drift apart.
+  private getSelectedRunnerId(): string | null {
+    const snapshot = this.readModel?.getSnapshot();
+    if (!snapshot) return null;
+    const activeConnections = this.getActiveConnections();
+    const contracts = snapshot.contracts;
+    const viewingConnections = this.browseMode === 'connections' && activeConnections.length > 0;
+    // selectedIndex indexes only the mode's active list (activeConnections when
+    // viewing connections, otherwise contracts); .at() keeps that read off any
+    // raw source array (no-raw-selectedindex-read rule).
+    if (viewingConnections) {
+      return activeConnections.at(this.selectedIndex)?.agentId ?? null;
+    }
+    return contracts.at(this.selectedIndex)?.runnerId ?? null;
+  }
+
+  private getSelectedSupervisorEntry() {
+    const snapshot = this.readModel?.getSnapshot();
+    if (!snapshot) return null;
+    const runnerId = this.getSelectedRunnerId();
+    if (!runnerId) return null;
+    return snapshot.supervisor.sessions.find((entry) => entry.runnerId === runnerId) ?? null;
+  }
+
+  public handlePanelIntegrationAction(_key: string, ctx: PanelIntegrationContext): boolean {
+    if (!this.pendingCommand) return false;
+    const { name, args } = this.pendingCommand;
+    this.pendingCommand = null;
+    void ctx.executeCommand?.(name, args);
+    return true;
+  }
+
   public render(width: number, height: number): Line[] {
     this.needsRender = false;
     const intro = 'Bridge, ACP, runner-contract, and artifact posture for self-hosted remote work.';
@@ -161,9 +236,9 @@ export class RemotePanel extends BasePanel {
         [' daemon ', C.label],
         [daemon.transportState.toUpperCase(), stateColor(daemon.transportState)],
         ['  running ', C.label],
-        [daemon.isRunning ? 'yes' : 'no', daemon.isRunning ? C.ok : C.dim],
+        [daemon.isRunning ? 'yes' : 'no', daemon.isRunning ? C.good : C.dim],
         ['  reconnects ', C.label],
-        [String(daemon.reconnectAttempts), daemon.reconnectAttempts > 0 ? C.warn : C.ok],
+        [String(daemon.reconnectAttempts), daemon.reconnectAttempts > 0 ? C.warn : C.good],
         ['  jobs ', C.label],
         [String(daemon.runningJobCount), daemon.runningJobCount > 0 ? C.info : C.dim],
       ]),
@@ -181,17 +256,17 @@ export class RemotePanel extends BasePanel {
         ['  pools ', C.label],
         [String(pools.length), pools.length > 0 ? C.info : C.dim],
         ['  review artifacts ', C.label],
-        [String(artifactCount), artifactCount > 0 ? C.ok : C.dim],
+        [String(artifactCount), artifactCount > 0 ? C.good : C.dim],
       ]),
       buildPanelLine(width, [
         [' supervisor ', C.label],
         [String(supervisor.sessions.length), C.info],
         ['  degraded ', C.label],
-        [String(supervisor.degradedConnections), supervisor.degradedConnections > 0 ? C.warn : C.ok],
+        [String(supervisor.degradedConnections), supervisor.degradedConnections > 0 ? C.warn : C.good],
         [' distributed peers ', C.label],
         [String(distributed.peers?.total ?? 0), C.info],
         ['  connected ', C.label],
-        [String(distributed.peers?.connected ?? 0), (distributed.peers?.connected ?? 0) > 0 ? C.ok : C.dim],
+        [String(distributed.peers?.connected ?? 0), (distributed.peers?.connected ?? 0) > 0 ? C.good : C.dim],
         ['  queued work ', C.label],
         [String(distributed.work?.queued ?? 0), (distributed.work?.queued ?? 0) > 0 ? C.info : C.dim],
       ]),
@@ -200,17 +275,18 @@ export class RemotePanel extends BasePanel {
     if (daemon.lastError) {
       postureLines.push(buildPanelLine(width, [
         [' daemon error ', C.label],
-        [daemon.lastError.slice(0, Math.max(0, width - 14)), C.error],
+        [truncateDisplay(daemon.lastError, Math.max(0, width - 14)), C.bad],
       ]));
     }
-    postureLines.push(
-      buildGuidanceLine(width, '/remote recover', 'resume remote state with runner, capability, and disconnect recovery hints', C),
-      buildGuidanceLine(width, '/remote capabilities', 'inspect transport support before routing remote work or reattaching a session', C),
-    );
-
+    const canBrowse = activeConnections.length > 0 || contracts.length > 0;
+    const canSwitch = contracts.length > 0 && activeConnections.length > 0;
+    const navHint = !canBrowse
+      ? `  focus=${this.browseMode}  idle - no connections or contracts to browse`
+      : canSwitch
+        ? `  focus=${this.browseMode}  Up/Down move  Tab switch connections/contracts  r=recover  Enter=recover selection`
+        : `  focus=${this.browseMode}  Up/Down move  r=recover  Enter=recover selection`;
     const footerLines = [
-      buildGuidanceLine(width, '/remote setup', 'review bridge, tunnel, env, and bootstrap flows for self-hosted remote work', C),
-      buildPanelLine(width, [[`  focus=${this.browseMode}  Up/Down move  Tab switch connections/contracts`, C.dim]]),
+      buildPanelLine(width, [[navHint, C.dim]]),
     ] as const;
 
     if (activeConnections.length === 0 && contracts.length === 0) {
@@ -245,8 +321,8 @@ export class RemotePanel extends BasePanel {
       Math.max(0, (viewingConnections ? activeConnections.length : contracts.length) - 1),
     );
     const browseCount = viewingConnections ? activeConnections.length : contracts.length;
-    const selected = viewingConnections ? activeConnections[this.selectedIndex] ?? null : null;
-    const selectedContract = !viewingConnections ? contracts[this.selectedIndex] ?? null : null;
+    const selected = viewingConnections ? activeConnections.at(this.selectedIndex) ?? null : null;
+    const selectedContract = !viewingConnections ? contracts.at(this.selectedIndex) ?? null : null;
     const detailRows: Line[] = [];
 
     if (selected) {
@@ -269,7 +345,7 @@ export class RemotePanel extends BasePanel {
       if (selected.lastError) {
         detailRows.push(buildPanelLine(width, [
           ['  Last error: ', C.label],
-          [selected.lastError.slice(0, Math.max(0, width - 13)), C.error],
+          [selected.lastError.slice(0, Math.max(0, width - 13)), C.bad],
         ]));
       }
 
@@ -312,13 +388,19 @@ export class RemotePanel extends BasePanel {
       if (supervisorEntry) {
         detailRows.push(buildPanelLine(width, [
           ['  Heartbeat: ', C.label],
-          [supervisorEntry.heartbeat.status, supervisorEntry.heartbeat.status === 'fresh' ? C.ok : supervisorEntry.heartbeat.status === 'stale' ? C.warn : C.error],
+          [supervisorEntry.heartbeat.status, supervisorEntry.heartbeat.status === 'fresh' ? C.good : supervisorEntry.heartbeat.status === 'stale' ? C.warn : C.bad],
           ['  Protocol: ', C.label],
           [supervisorEntry.negotiation.executionProtocol, C.value],
           ['  Review: ', C.label],
-          [supervisorEntry.negotiation.reviewMode, supervisorEntry.negotiation.reviewMode === 'wrfc' ? C.ok : C.dim],
+          [supervisorEntry.negotiation.reviewMode, supervisorEntry.negotiation.reviewMode === 'wrfc' ? C.good : C.dim],
         ]));
-        detailRows.push(buildPanelLine(width, [[`  ${supervisorEntry.heartbeat.detail}`.slice(0, width), C.dim]]));
+        detailRows.push(buildPanelLine(width, [[truncateDisplay(`  ${supervisorEntry.heartbeat.detail}`, width), C.dim]]));
+        if (isSupervisorEntryDegraded(supervisorEntry) && supervisorEntry.recovery.length > 0) {
+          detailRows.push(buildPanelLine(width, [
+            ['  Enter recovers: ', C.label],
+            [supervisorEntry.recovery[0].reason, C.warn],
+          ]));
+        }
       }
 
       const recentArtifact = snapshot.artifacts.find((artifact) => artifact.runnerId === selected.agentId);
@@ -370,19 +452,22 @@ export class RemotePanel extends BasePanel {
       if (supervisorEntry) {
         detailRows.push(buildPanelLine(width, [
           ['  Heartbeat: ', C.label],
-          [supervisorEntry.heartbeat.status, supervisorEntry.heartbeat.status === 'fresh' ? C.ok : supervisorEntry.heartbeat.status === 'stale' ? C.warn : C.error],
+          [supervisorEntry.heartbeat.status, supervisorEntry.heartbeat.status === 'fresh' ? C.good : supervisorEntry.heartbeat.status === 'stale' ? C.warn : C.bad],
           ['  Lane: ', C.label],
           [supervisorEntry.negotiation.communicationLane, C.info],
         ]));
-        for (const action of supervisorEntry.recovery.slice(0, 2)) {
-          detailRows.push(buildGuidanceLine(width, action.command, action.reason, C));
+        if (isSupervisorEntryDegraded(supervisorEntry) && supervisorEntry.recovery.length > 0) {
+          detailRows.push(buildPanelLine(width, [
+            ['  Enter recovers: ', C.label],
+            [supervisorEntry.recovery[0].reason, C.warn],
+          ]));
         }
       }
       const recentArtifact = snapshot.artifacts.find((artifact) => artifact.runnerId === selectedContract.runnerId);
       if (recentArtifact) {
         detailRows.push(buildPanelLine(width, [
           ['  Recent artifact: ', C.label],
-          [recentArtifact.id, C.ok],
+          [recentArtifact.id, C.good],
           ['  Status: ', C.label],
           [recentArtifact.task.status, stateColor(recentArtifact.evidence.transportState)],
         ]));
@@ -400,7 +485,7 @@ export class RemotePanel extends BasePanel {
             { text: ` ${connection.transportState.padEnd(18)}`, fg: stateColor(connection.transportState) },
             { text: ` msgs=${String(connection.messageCount).padEnd(6)}`, fg: C.info },
             { text: ` errs=${String(connection.errorCount).padEnd(4)}`, fg: connection.errorCount > 0 ? C.warn : C.dim },
-            { text: ` ${connection.label}`.slice(0, Math.max(0, width - 56)), fg: C.dim },
+            { text: truncateDisplay(` ${connection.label}`, Math.max(0, width - 56)), fg: C.dim },
           ], C, { selected: absolute === this.selectedIndex, selectedBg: C.headerBg });
         })
       : [
@@ -408,7 +493,7 @@ export class RemotePanel extends BasePanel {
             return buildPanelListRow(width, [
               { text: contract.runnerId.padEnd(18), fg: C.value },
               { text: ` ${contract.transport.state.padEnd(18)}`, fg: stateColor(contract.transport.state) },
-              { text: ` ${contract.template}`.slice(0, Math.max(0, width - 42)), fg: C.dim },
+              { text: truncateDisplay(` ${contract.template}`, Math.max(0, width - 42)), fg: C.dim },
             ], C, { selected: absolute === this.selectedIndex, selectedBg: C.headerBg });
           }),
           buildPanelLine(width, [[' No active connection is currently attached to these contracts.', C.dim]]),