@pellux/goodvibes-tui 0.18.12 → 0.18.17

package/src/panels/scrollable-list-panel.ts

@@ -0,0 +1,407 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
+import { BasePanel } from './base-panel.ts';
+import type { PanelCategory } from './types.ts';
+import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
+import {
+  buildEmptyState,
+  buildPanelWorkspace,
+  DEFAULT_PANEL_PALETTE,
+  resolveScrollablePanelSection,
+  type PanelPalette,
+} from './polish.ts';
+import {
+  isPanelSearchBackspace,
+  isPanelSearchCancel,
+  isPanelSearchPrintable,
+} from './search-focus.ts';
+
+// ---------------------------------------------------------------------------
+// ScrollableListPanel<T>
+// ---------------------------------------------------------------------------
+
+/**
+ * Base class for all list-based panels that require scroll/cursor navigation.
+ *
+ * Subclasses implement:
+ *   - `getItems()` — the ordered list of items to display
+ *   - `renderItem(item, index, selected, width)` — one `Line` per item
+ *
+ * Optionally override:
+ *   - `getEmptyStateMessage()` / `getEmptyStateActions()` — empty-state copy
+ *   - `onSelect(item)` — called when the user presses Enter
+ *   - `onAction(item, action)` — for secondary key bindings
+ *   - `getPalette()` — colour palette (defaults to `DEFAULT_PANEL_PALETTE`)
+ *   - `getPageSize()` — rows per page-up/page-down (default 10)
+ *
+ * `renderList()` produces the full `Line[]` output that a trivial panel's
+ * `render()` can return directly:
+ *
+ * ```ts
+ * render(width: number, height: number): Line[] {
+ *   return this.renderList(width, height, { header: this.buildHeader(width) });
+ * }
+ * ```
+ */
+export abstract class ScrollableListPanel<T> extends BasePanel {
+  protected selectedIndex = 0;
+  /** Tracks the first visible row index; kept in sync with resolveScrollablePanelSection. */
+  protected scrollStart = 0;
+
+  constructor(
+    id: string,
+    name: string,
+    icon: string,
+    category: PanelCategory,
+    componentHealthMonitor?: ComponentHealthMonitor,
+  ) {
+    super(id, name, icon, category, componentHealthMonitor);
+  }
+
+  // -------------------------------------------------------------------------
+  // Abstract — subclasses must implement
+  // -------------------------------------------------------------------------
+
+  /** Return the full ordered list of items to display. */
+  protected abstract getItems(): readonly T[];
+
+  /** Render a single item as one terminal `Line`. */
+  protected abstract renderItem(
+    item: T,
+    index: number,
+    selected: boolean,
+    width: number,
+  ): Line;
+
+  // -------------------------------------------------------------------------
+  // Optional overrides
+  // -------------------------------------------------------------------------
+
+  /** Short label shown in the empty-state title. */
+  protected getEmptyStateMessage(): string {
+    return 'No items';
+  }
+
+  /** Suggested actions shown in the empty state. */
+  protected getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [];
+  }
+
+  /** Called when the user presses Enter on the selected item. */
+  protected onSelect(_item: T): void {}
+
+  /** Called for secondary key bindings (e.g. 'd' for delete). */
+  protected onAction(_item: T, _action: string): void {}
+
+  /** Colour palette used by `renderList()`. */
+  protected getPalette(): PanelPalette {
+    return DEFAULT_PANEL_PALETTE;
+  }
+
+  /**
+   * Rows to jump on pageup / pagedown.
+   * Override in `render()` to pass the actual visible row count:
+   *
+   * ```ts
+   * this._pageSize = Math.max(1, visibleRows - 2);
+   * ```
+   */
+  protected getPageSize(): number {
+    return 10;
+  }
+
+  // -------------------------------------------------------------------------
+  // Navigation — consistent across ALL panels
+  // -------------------------------------------------------------------------
+
+  handleInput(key: string): boolean {
+    const items = this.getItems();
+    const total = items.length;
+
+    switch (key) {
+      case 'up':
+      case 'k':
+        if (total === 0) return false;
+        this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+        this.needsRender = true;
+        return true;
+
+      case 'down':
+      case 'j':
+        if (total === 0) return false;
+        this.selectedIndex = Math.min(total - 1, this.selectedIndex + 1);
+        this.needsRender = true;
+        return true;
+
+      case 'pageup':
+        if (total === 0) return false;
+        this.selectedIndex = Math.max(0, this.selectedIndex - this.getPageSize());
+        this.needsRender = true;
+        return true;
+
+      case 'pagedown':
+        if (total === 0) return false;
+        this.selectedIndex = Math.min(total - 1, this.selectedIndex + this.getPageSize());
+        this.needsRender = true;
+        return true;
+
+      case 'home':
+      case 'g':
+        if (total === 0) return false;
+        this.selectedIndex = 0;
+        this.needsRender = true;
+        return true;
+
+      case 'end':
+      case 'G':
+        if (total === 0) return false;
+        this.selectedIndex = total - 1;
+        this.needsRender = true;
+        return true;
+
+      case 'return':
+      case 'enter': {
+        if (total === 0) return false;
+        const item = items[this.selectedIndex];
+        if (item !== undefined) this.onSelect(item);
+        return true;
+      }
+
+      default:
+        return false;
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Scroll state helpers
+  // -------------------------------------------------------------------------
+
+  /**
+   * Clamp `selectedIndex` to the current item count.
+   * Must be called after any data refresh that may shrink the list.
+   */
+  protected clampSelection(): void {
+    const total = this.getItems().length;
+    if (total === 0) {
+      this.selectedIndex = 0;
+    } else {
+      this.selectedIndex = Math.min(this.selectedIndex, total - 1);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Render helper — the main convenience entry point
+  // -------------------------------------------------------------------------
+
+  /**
+   * Render the full panel including optional header/footer and an empty state.
+   *
+   * Uses `resolveScrollablePanelSection` + `buildPanelWorkspace` internally,
+   * keeping `scrollStart` in sync after each call.
+   *
+   * @param width  Panel width in columns.
+   * @param height Panel height in rows.
+   * @param options.header  Lines prepended as the first workspace section.
+   * @param options.footer  Lines appended as the last workspace section.
+   * @param options.emptyMessage  Override for the empty-state title text.
+   * @param options.title  Workspace title (defaults to `this.name`).
+   */
+  protected renderList(
+    width: number,
+    height: number,
+    options: {
+      readonly header?: readonly Line[];
+      readonly footer?: readonly Line[];
+      readonly emptyMessage?: string;
+      readonly title?: string;
+    } = {},
+  ): Line[] {
+    this.needsRender = false;
+    const palette = this.getPalette();
+    const items = this.getItems();
+    const title = options.title ?? this.name;
+
+    // Build all item lines (pre-render for resolveScrollablePanelSection)
+    const scrollableLines: Line[] = items.map((item, index) =>
+      this.renderItem(item, index, index === this.selectedIndex, width),
+    );
+
+    // Empty state
+    if (scrollableLines.length === 0) {
+      const emptyLines = buildEmptyState(
+        width,
+        options.emptyMessage ?? this.getEmptyStateMessage(),
+        '',
+        this.getEmptyStateActions(),
+        palette,
+      );
+      const lines = buildPanelWorkspace(width, height, {
+        title,
+        sections: [
+          ...(options.header ? [{ lines: options.header as Line[] }] : []),
+          { lines: emptyLines },
+          ...(options.footer ? [{ lines: options.footer as Line[] }] : []),
+        ],
+        palette,
+      });
+      while (lines.length < height) lines.push(createEmptyLine(width));
+      return lines.slice(0, height);
+    }
+
+    // Resolve scrollable section (updates scrollStart)
+    const beforeSections = options.header ? [{ lines: options.header as Line[] }] : [];
+    const afterSections = options.footer ? [{ lines: options.footer as Line[] }] : [];
+
+    const resolved = resolveScrollablePanelSection(width, height, {
+      palette,
+      beforeSections,
+      afterSections,
+      section: {
+        scrollableLines,
+        selectedIndex: this.selectedIndex,
+        scrollOffset: this.scrollStart,
+        guardRows: 1,
+        appendWindowSummary: scrollableLines.length > 5 ? { dimColor: palette.dim } : undefined,
+      },
+    });
+    this.scrollStart = resolved.scrollOffset;
+
+    const sections = [
+      ...beforeSections,
+      resolved.section,
+      ...afterSections,
+    ];
+
+    const lines = buildPanelWorkspace(width, height, {
+      title,
+      sections,
+      palette,
+    });
+    while (lines.length < height) lines.push(createEmptyLine(width));
+    return lines.slice(0, height);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// SearchableListPanel<T>
+// ---------------------------------------------------------------------------
+
+/**
+ * Extends `ScrollableListPanel<T>` with inline search/filter support.
+ *
+ * Subclasses implement:
+ *   - `getAllItems()` — the full (unfiltered) item list
+ *   - `matchesSearch(item, query)` — case-insensitive filter predicate
+ *
+ * `getItems()` is implemented here and returns filtered results. Do NOT
+ * override `getItems()` in subclasses — override `getAllItems()` instead.
+ *
+ * Search state:
+ *   - Printable characters append to `searchQuery`.
+ *   - Backspace/Delete removes the last character.
+ *   - Escape clears the query.
+ *   - Navigation keys (up/down/etc.) are forwarded to the parent.
+ *
+ * Render the search input line by calling `buildSearchInput(width)` from
+ * your panel's header builder.
+ */
+export abstract class SearchableListPanel<T> extends ScrollableListPanel<T> {
+  protected searchQuery = '';
+
+  private _filteredItems: readonly T[] = [];
+  private _filterDirty = true;
+
+  // -------------------------------------------------------------------------
+  // Abstract — subclasses must implement
+  // -------------------------------------------------------------------------
+
+  /** Return the full unfiltered item list. */
+  protected abstract getAllItems(): readonly T[];
+
+  /** Return true if `item` matches the search `query`. */
+  protected abstract matchesSearch(item: T, query: string): boolean;
+
+  // -------------------------------------------------------------------------
+  // getItems — returns filtered list (do NOT override in subclasses)
+  // -------------------------------------------------------------------------
+
+  protected getItems(): readonly T[] {
+    if (this._filterDirty) {
+      const all = this.getAllItems();
+      this._filteredItems = this.searchQuery
+        ? all.filter((item) => this.matchesSearch(item, this.searchQuery))
+        : all;
+      this._filterDirty = false;
+      // Clamp after filter to keep selection in bounds
+      this.clampSelection();
+    }
+    return this._filteredItems;
+  }
+
+  /**
+   * Mark the filter cache as stale.
+   * Call this whenever `getAllItems()` returns new data.
+   */
+  protected invalidateFilter(): void {
+    this._filterDirty = true;
+    this.needsRender = true;
+  }
+
+  // -------------------------------------------------------------------------
+  // Input — search first, navigation second
+  // -------------------------------------------------------------------------
+
+  handleInput(key: string): boolean {
+    // Backspace: trim query
+    if (isPanelSearchBackspace(key)) {
+      if (this.searchQuery.length > 0) {
+        this.searchQuery = this.searchQuery.slice(0, -1);
+        this._filterDirty = true;
+        this.needsRender = true;
+        return true;
+      }
+      return false;
+    }
+
+    // Escape: clear query
+    if (isPanelSearchCancel(key)) {
+      if (this.searchQuery.length > 0) {
+        this.searchQuery = '';
+        this._filterDirty = true;
+        this.needsRender = true;
+        return true;
+      }
+      return false;
+    }
+
+    // Printable characters: append to query
+    if (isPanelSearchPrintable(key)) {
+      this.searchQuery += key;
+      this._filterDirty = true;
+      this.needsRender = true;
+      return true;
+    }
+
+    // Navigation and Enter: delegate to parent
+    return super.handleInput(key);
+  }
+
+  /**
+   * Build the search input `Line` suitable for use in a panel header.
+   *
+   * Import `buildSearchInputLine` from `./polish.ts` and call it with
+   * `this.searchQuery`. Convenience wrapper:
+   *
+   * ```ts
+   * import { buildSearchInputLine } from './polish.ts';
+   *
+   * private buildHeader(width: number): Line[] {
+   *   return [buildSearchInputLine(width, 'Filter', this.searchQuery, this.getPalette(), {})];
+   * }
+   * ```
+   *
+   * This method is intentionally left as a documentation reference rather
+   * than a concrete implementation to avoid coupling the base class to a
+   * specific label or search-input layout.
+   */
+}

package/src/panels/security-panel.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { TokenAuditResult } from '@pellux/goodvibes-sdk/platform/security/token-audit';
 import type { UiReadModel, UiSecuritySnapshot } from '../runtime/ui-read-models.ts';

package/src/panels/services-panel.ts

@@ -1,11 +1,11 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import {
   type ServiceConfig,
   type ServiceInspection,
   type ServiceConnectionTestResult,
-} from '../config/service-registry.ts';
+} from '@pellux/goodvibes-sdk/platform/config/service-registry';
 import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,

package/src/panels/session-browser-panel.ts

@@ -2,7 +2,7 @@
 // SessionBrowserPanel — browse, search, and resume old sessions.
 // ---------------------------------------------------------------------------
 
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { SessionInfo } from '@pellux/goodvibes-sdk/platform/sessions/manager';
 import { logger } from '@pellux/goodvibes-sdk/platform/utils/logger';
@@ -17,7 +17,7 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils/error-display';
 import {
   getPanelSearchFocusTransition,

package/src/panels/settings-sync-panel.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import {
   buildDetailBlock,

package/src/panels/skills-panel.ts

@@ -1,10 +1,10 @@
 import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { getDisplayWidth, truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
+import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
-import type { PanelHealthMonitor } from '@pellux/goodvibes-sdk/platform/runtime/perf/panel-health-monitor';
+import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
 import type { ShellPathService } from '@pellux/goodvibes-sdk/platform/runtime/shell-paths';
 import {
   buildEmptyState,
@@ -55,7 +55,7 @@ export interface SkillRecord {
 
 export interface SkillsPanelOptions {
   shellPaths: Pick<ShellPathService, 'workingDirectory' | 'homeDirectory'>;
-  panelHealthMonitor?: PanelHealthMonitor;
+  componentHealthMonitor?: ComponentHealthMonitor;
 }
 
 function parseFrontmatter(content: string): Record<string, string> {
@@ -243,7 +243,7 @@ export class SkillsPanel extends BasePanel {
   private cacheDirty = true;
 
   public constructor(options: SkillsPanelOptions) {
-    super('skills', 'Skills', 'K', 'monitoring', options.panelHealthMonitor);
+    super('skills', 'Skills', 'K', 'monitoring', options.componentHealthMonitor);
     this.shellPaths = options.shellPaths;
   }
 

package/src/panels/subscription-panel.ts

@@ -1,8 +1,8 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { ProviderSubscription, PendingSubscriptionLogin } from '@pellux/goodvibes-sdk/platform/config/subscriptions';
-import { listBuiltinSubscriptionProviders } from '../config/subscription-providers.ts';
+import { listBuiltinSubscriptionProviders } from '@pellux/goodvibes-sdk/platform/config/subscription-providers';
 import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildDetailBlock,

package/src/panels/symbol-outline-panel.ts

@@ -1,6 +1,6 @@
 import { BasePanel } from './base-panel.ts';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { createEmptyLine } from '../types/grid.ts';
+import type { Line } from '../types/grid.ts';
 import {
   buildEmptyState,
   buildPanelLine,
@@ -9,7 +9,7 @@ import {
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
-import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
 
 // ── Symbol types ────────────────────────────────────────────────────────────
 

package/src/panels/system-messages-panel.ts

@@ -4,8 +4,8 @@
  */
 
 import { BasePanel } from './base-panel.ts';
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import type { PanelHealthMonitor } from '@pellux/goodvibes-sdk/platform/runtime/perf/panel-health-monitor';
+import type { Line } from '../types/grid.ts';
+import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
 import {
   buildBodyText,
   buildEmptyState,
@@ -54,8 +54,8 @@ export class SystemMessagesPanel extends BasePanel {
   private _scrollOffset = 0;
   private readonly configManager: ConfigManager;
 
-  constructor(configManager: ConfigManager, panelHealthMonitor?: PanelHealthMonitor) {
-    super('system-messages', 'System Messages', 'J', 'monitoring', panelHealthMonitor);
+  constructor(configManager: ConfigManager, componentHealthMonitor?: ComponentHealthMonitor) {
+    super('system-messages', 'System Messages', 'J', 'monitoring', componentHealthMonitor);
     this.configManager = configManager;
   }
 

package/src/panels/tasks-panel.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { RuntimeTask, TaskLifecycleState } from '@pellux/goodvibes-sdk/platform/runtime/store/domains/tasks';
 import type { ManagedWorktreeMeta } from '@pellux/goodvibes-sdk/platform/runtime/worktree/registry';

package/src/panels/thinking-panel.ts

@@ -2,10 +2,10 @@
 // ThinkingPanel — streams model reasoning tokens in real-time.
 // ---------------------------------------------------------------------------
 
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { TurnEvent } from '@pellux/goodvibes-sdk/platform/runtime/events/index';
-import type { UiEventFeed } from '@pellux/goodvibes-sdk/platform/runtime/ui-events';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
 import {
   buildEmptyState,
   buildPanelLine,
@@ -15,7 +15,7 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 
 const C = {
   headerBg:    '#1a1a2e',

package/src/panels/token-budget-panel.ts

@@ -1,6 +1,6 @@
 import type { ConfigManager } from '@pellux/goodvibes-sdk/platform/config/manager';
 import { BasePanel } from './base-panel.ts';
-import { createEmptyLine, createStyledCell, type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
 import type { Orchestrator } from '../core/orchestrator';
 import { evaluateSessionMaintenance } from '@pellux/goodvibes-sdk/platform/runtime/session-maintenance';
 import type { UiReadModel, UiSessionSnapshot } from '../runtime/ui-read-models.ts';

package/src/panels/tool-inspector-panel.ts

@@ -2,10 +2,10 @@
 // ToolInspectorPanel — chronological list of tool calls with args/results.
 // ---------------------------------------------------------------------------
 
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { ToolEvent, TurnEvent } from '@pellux/goodvibes-sdk/platform/runtime/events/index';
-import type { UiEventFeed } from '@pellux/goodvibes-sdk/platform/runtime/ui-events';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
 import {
   buildEmptyState,
   buildPanelLine,
@@ -15,7 +15,7 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 
 const C = {
   headerBg:    '#1a1a2e',

package/src/panels/types.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import type { PanelResourceContract, PanelHealthState } from '@pellux/goodvibes-sdk/platform/runtime/perf/panel-contracts';
+import type { Line } from '../types/grid.ts';
+import type { ComponentResourceContract, ComponentHealthState } from '../runtime/perf/panel-contracts.ts';
 
 export type PanelCategory = 'development' | 'agent' | 'monitoring' | 'session' | 'ai';
 
@@ -23,10 +23,10 @@ export interface Panel {
   needsRender: boolean;
 
   // Resource contract (optional — panels may declare resource requirements)
-  resourceContract?: Readonly<PanelResourceContract>;
+  resourceContract?: Readonly<ComponentResourceContract>;
 
-  // Health state (optional — set by PanelHealthMonitor when panel is registered)
-  healthState?: Readonly<PanelHealthState>;
+  // Health state (optional — set by ComponentHealthMonitor when panel is registered)
+  healthState?: Readonly<ComponentHealthState>;
 
   // Input (optional)
   handleInput?(key: string): boolean;

package/src/panels/watchers-panel.ts

@@ -1,8 +1,8 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { UiReadModel, UiWatchersSnapshot } from '../runtime/ui-read-models.ts';
-import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,

package/src/panels/welcome-panel.ts

@@ -1,4 +1,4 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import { buildGuidanceLine, buildPanelLine, buildPanelWorkspace, DEFAULT_PANEL_PALETTE } from './polish.ts';