@butlerw/vellum 0.1.0

package/src/tui/components/Sidebar/SystemStatusPanel.tsx

@@ -0,0 +1,284 @@
+/**
+ * System Status Panel Component
+ *
+ * Displays system status information at the bottom of the sidebar:
+ * - MCP server connection status
+ * - Rate limit status (if available)
+ * - Update availability (if available)
+ * - Git snapshot count (if available)
+ *
+ * @module tui/components/Sidebar/SystemStatusPanel
+ */
+
+import { Box, Text } from "ink";
+import type React from "react";
+import { useApp } from "../../context/AppContext.js";
+import { useLspOptional } from "../../context/LspContext.js";
+import { useMcp } from "../../context/McpContext.js";
+import { useTheme } from "../../theme/index.js";
+import {
+  PersistenceStatusIndicator,
+  type PersistenceStatusIndicatorProps,
+} from "../StatusBar/PersistenceStatusIndicator.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the SystemStatusPanel component
+ */
+export interface SystemStatusPanelProps {
+  /** Compact mode for narrow sidebars */
+  readonly compact?: boolean;
+  /** Optional snapshot count from session */
+  readonly snapshotCount?: number;
+  /** Optional update version available */
+  readonly updateVersion?: string;
+  /** Optional rate limit percentage (0-100) */
+  readonly rateLimitPercent?: number;
+  /** Optional persistence status for memory indicator */
+  readonly persistence?: Pick<
+    PersistenceStatusIndicatorProps,
+    "status" | "unsavedCount" | "lastSavedAt"
+  >;
+}
+
+/** Status display tuple: [text, color] */
+type StatusDisplay = readonly [string, string];
+
+// =============================================================================
+// Status Item Component
+// =============================================================================
+
+interface StatusItemProps {
+  readonly label: string;
+  readonly value: string;
+  readonly color: string;
+  readonly labelColor: string;
+  readonly compact?: boolean;
+}
+
+function StatusItem({
+  label,
+  value,
+  color,
+  labelColor,
+  compact,
+}: StatusItemProps): React.JSX.Element {
+  if (compact) {
+    return (
+      <Text>
+        <Text color={labelColor}>{label.charAt(0)}</Text>
+        <Text color={color}>{value}</Text>
+      </Text>
+    );
+  }
+
+  return (
+    <Box>
+      <Text color={labelColor}>{label}: </Text>
+      <Text color={color}>{value}</Text>
+    </Box>
+  );
+}
+
+// =============================================================================
+// Status Computation Helpers
+// =============================================================================
+
+interface ThemeColors {
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+  primary: string;
+  accent: string;
+  muted: string;
+}
+
+/**
+ * Compute MCP connection status display
+ */
+function getMcpStatus(
+  mcpError: Error | null,
+  isInitializing: boolean,
+  isInitialized: boolean,
+  connectedCount: number,
+  totalCount: number,
+  colors: ThemeColors
+): StatusDisplay {
+  if (mcpError) return ["err", colors.error];
+  if (isInitializing) return ["...", colors.warning];
+  if (!isInitialized) return ["off", colors.muted];
+  if (connectedCount === 0 && totalCount === 0) return ["–", colors.muted];
+  if (connectedCount === totalCount) return [`${connectedCount} ✓`, colors.success];
+  return [`${connectedCount}/${totalCount}`, colors.warning];
+}
+
+/**
+ * Compute LSP server status display
+ */
+function getLspStatus(
+  lspError: Error | null,
+  isInitialized: boolean,
+  runningCount: number,
+  totalCount: number,
+  colors: ThemeColors
+): StatusDisplay {
+  if (lspError) return ["err", colors.error];
+  if (!isInitialized) return ["off", colors.muted];
+  if (totalCount === 0) return ["–", colors.muted];
+  if (runningCount === totalCount) return [`${runningCount} ✓`, colors.success];
+  return [`${runningCount}/${totalCount}`, colors.warning];
+}
+
+/**
+ * Compute rate limit status display
+ */
+function getRateStatus(rateLimitPercent: number | undefined, colors: ThemeColors): StatusDisplay {
+  if (rateLimitPercent === undefined) return ["–", colors.muted];
+  if (rateLimitPercent >= 90) return [`${rateLimitPercent}%`, colors.error];
+  if (rateLimitPercent >= 70) return [`${rateLimitPercent}%`, colors.warning];
+  return ["OK", colors.success];
+}
+
+/**
+ * Compute update status display
+ */
+function getUpdateStatus(
+  updateVersion: string | undefined,
+  compact: boolean,
+  colors: ThemeColors
+): StatusDisplay {
+  if (updateVersion) return [compact ? "!" : updateVersion, colors.info];
+  return ["✓", colors.success];
+}
+
+/**
+ * Compute snapshot status display
+ */
+function getSnapStatus(snapshotCount: number | undefined, colors: ThemeColors): StatusDisplay {
+  if (snapshotCount !== undefined) return [String(snapshotCount), colors.primary];
+  return ["–", colors.muted];
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * SystemStatusPanel displays system status in a compact panel.
+ *
+ * @example
+ * ```tsx
+ * <SystemStatusPanel compact={sidebarWidth < 24} />
+ * ```
+ */
+export function SystemStatusPanel({
+  compact = false,
+  snapshotCount,
+  updateVersion,
+  rateLimitPercent,
+  persistence,
+}: SystemStatusPanelProps): React.JSX.Element {
+  const { theme } = useTheme();
+  const { hub, isInitialized, isInitializing, error: mcpError } = useMcp();
+  const lsp = useLspOptional();
+  const { state } = useApp();
+
+  // Build colors object for status helpers
+  const colors: ThemeColors = {
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    error: theme.colors.error,
+    info: theme.colors.info,
+    primary: theme.colors.primary,
+    accent: theme.colors.accent,
+    muted: theme.semantic.text.muted,
+  };
+
+  // Get MCP server counts
+  const mcpServers = hub?.getServers() ?? [];
+  const connectedCount = mcpServers.filter((s) => s.statusInfo.status === "connected").length;
+  const totalCount = mcpServers.length;
+
+  // Compute all status displays
+  const [mcpStatus, mcpColor] = getMcpStatus(
+    mcpError,
+    isInitializing,
+    isInitialized,
+    connectedCount,
+    totalCount,
+    colors
+  );
+  const [lspStatus, lspColor] = getLspStatus(
+    lsp?.error ?? null,
+    lsp?.isInitialized ?? false,
+    lsp?.runningServers ?? 0,
+    lsp?.totalServers ?? 0,
+    colors
+  );
+  const [rateStatus, rateColor] = getRateStatus(rateLimitPercent, colors);
+  const [updateStatus, updateColor] = getUpdateStatus(updateVersion, compact, colors);
+  const [snapStatus, snapColor] = getSnapStatus(snapshotCount, colors);
+
+  const labelColor = theme.semantic.text.secondary;
+  const borderColor = theme.semantic.border.default;
+
+  if (compact) {
+    return (
+      <Box flexDirection="row" borderStyle="single" borderColor={borderColor} paddingX={0} gap={1}>
+        <StatusItem label="M" value={mcpStatus} color={mcpColor} labelColor={labelColor} compact />
+        <StatusItem label="L" value={lspStatus} color={lspColor} labelColor={labelColor} compact />
+        <StatusItem
+          label="R"
+          value={rateStatus}
+          color={rateColor}
+          labelColor={labelColor}
+          compact
+        />
+        <StatusItem
+          label="S"
+          value={snapStatus}
+          color={snapColor}
+          labelColor={labelColor}
+          compact
+        />
+        {persistence && (
+          <PersistenceStatusIndicator
+            status={persistence.status}
+            unsavedCount={persistence.unsavedCount}
+            lastSavedAt={persistence.lastSavedAt}
+            compact
+          />
+        )}
+        {state.vimMode && <Text color={colors.accent}>VIM</Text>}
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor={borderColor} paddingX={1}>
+      <Text color={theme.semantic.text.secondary} bold>
+        Status
+      </Text>
+      <StatusItem label="MCP" value={mcpStatus} color={mcpColor} labelColor={labelColor} />
+      <StatusItem label="LSP" value={lspStatus} color={lspColor} labelColor={labelColor} />
+      <StatusItem label="Rate" value={rateStatus} color={rateColor} labelColor={labelColor} />
+      <Box flexDirection="row" gap={1}>
+        <StatusItem label="Snap" value={snapStatus} color={snapColor} labelColor={labelColor} />
+        <StatusItem label="Upd" value={updateStatus} color={updateColor} labelColor={labelColor} />
+      </Box>
+      {/* Memory/Persistence status indicator (moved from footer) */}
+      {persistence && (
+        <PersistenceStatusIndicator
+          status={persistence.status}
+          unsavedCount={persistence.unsavedCount}
+          lastSavedAt={persistence.lastSavedAt}
+        />
+      )}
+      {state.vimMode && <Text color={colors.accent}>[VIM]</Text>}
+    </Box>
+  );
+}

package/src/tui/components/Sidebar/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Sidebar Components
+ *
+ * Components for the sidebar region of the TUI layout.
+ *
+ * @module tui/components/Sidebar
+ */
+
+export { SystemStatusPanel, type SystemStatusPanelProps } from "./SystemStatusPanel.js";

package/src/tui/components/Status/ModelStatusBar.tsx

@@ -0,0 +1,270 @@
+/**
+ * ModelStatusBar Component
+ *
+ * Compact status bar showing provider health with circuit breaker states.
+ * Uses ASCII-only indicators for terminal compatibility.
+ *
+ * Display format: `[*] claude | [.] gpt-4 | [x] gemini`
+ * - [*] = active provider
+ * - [.] = healthy (CLOSED circuit)
+ * - [x] = unhealthy (OPEN circuit)
+ * - [?] = half-open (testing recovery)
+ *
+ * @module tui/components/Status/ModelStatusBar
+ */
+
+import { Box, Text } from "ink";
+import { useMemo } from "react";
+import type { CircuitState, ProviderStatusEntry } from "../../hooks/useProviderStatus.js";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for ModelStatusBar component.
+ */
+export interface ModelStatusBarProps {
+  /** Array of provider status entries to display */
+  readonly providers: readonly ProviderStatusEntry[];
+  /** Maximum number of providers to show (0 = show all) */
+  readonly maxVisible?: number;
+  /** Show provider names instead of IDs */
+  readonly showNames?: boolean;
+  /** Compact mode - shorter provider identifiers */
+  readonly compact?: boolean;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/** Status indicators (ASCII only, no emoji) */
+const STATUS_INDICATORS: Record<CircuitState | "active", string> = {
+  active: "[*]", // Active provider
+  CLOSED: "[.]", // Healthy
+  OPEN: "[x]", // Unhealthy
+  HALF_OPEN: "[?]", // Testing recovery
+};
+
+/** Separator between provider entries */
+const SEPARATOR = " | ";
+
+/** Provider ID abbreviations for compact display */
+const PROVIDER_ABBREVIATIONS: Record<string, string> = {
+  anthropic: "claude",
+  openai: "gpt",
+  google: "gemini",
+  deepseek: "ds",
+  qwen: "qwen",
+  groq: "groq",
+  xai: "grok",
+  openrouter: "or",
+  ollama: "local",
+  lmstudio: "lms",
+  zhipu: "glm",
+  moonshot: "moon",
+  mistral: "mist",
+  yi: "yi",
+  baichuan: "bc",
+  copilot: "copilot",
+  minimax: "mm",
+};
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Get the status indicator for a provider entry.
+ */
+function getStatusIndicator(entry: ProviderStatusEntry): string {
+  if (entry.isActive) {
+    return STATUS_INDICATORS.active;
+  }
+  return STATUS_INDICATORS[entry.circuitState];
+}
+
+/**
+ * Get abbreviated provider name for compact display.
+ */
+function getProviderAbbreviation(id: string): string {
+  const lowerId = id.toLowerCase();
+  return PROVIDER_ABBREVIATIONS[lowerId] ?? id.slice(0, 4);
+}
+
+/**
+ * Get display label for a provider.
+ */
+function getProviderLabel(
+  entry: ProviderStatusEntry,
+  showNames: boolean,
+  compact: boolean
+): string {
+  if (showNames) {
+    return compact ? entry.name.slice(0, 8) : entry.name;
+  }
+  return compact ? getProviderAbbreviation(entry.id) : entry.id;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * ModelStatusBar displays provider health status in a compact format.
+ *
+ * @example
+ * ```tsx
+ * <ModelStatusBar
+ *   providers={[
+ *     { id: 'anthropic', name: 'Claude', circuitState: 'CLOSED', isActive: true, failureCount: 0, timeUntilReset: 0 },
+ *     { id: 'openai', name: 'GPT-4', circuitState: 'CLOSED', isActive: false, failureCount: 0, timeUntilReset: 0 },
+ *     { id: 'google', name: 'Gemini', circuitState: 'OPEN', isActive: false, failureCount: 3, timeUntilReset: 15000 },
+ *   ]}
+ * />
+ * // Renders: [*] claude | [.] gpt | [x] gemini
+ * ```
+ */
+export function ModelStatusBar({
+  providers,
+  maxVisible = 0,
+  showNames = false,
+  compact = true,
+}: ModelStatusBarProps): React.ReactElement | null {
+  const { theme } = useTheme();
+
+  // Filter and limit providers to display
+  const visibleProviders = useMemo(() => {
+    if (providers.length === 0) return [];
+
+    // Sort: active first, then by circuit state (CLOSED > HALF_OPEN > OPEN)
+    const sorted = [...providers].sort((a, b) => {
+      if (a.isActive !== b.isActive) return a.isActive ? -1 : 1;
+
+      const stateOrder: Record<CircuitState, number> = {
+        CLOSED: 0,
+        HALF_OPEN: 1,
+        OPEN: 2,
+      };
+      return stateOrder[a.circuitState] - stateOrder[b.circuitState];
+    });
+
+    return maxVisible > 0 ? sorted.slice(0, maxVisible) : sorted;
+  }, [providers, maxVisible]);
+
+  // Don't render if no providers
+  if (visibleProviders.length === 0) {
+    return null;
+  }
+
+  // Get color for circuit state
+  const getStateColor = (entry: ProviderStatusEntry): string => {
+    if (entry.isActive) {
+      return theme.brand.primary;
+    }
+    switch (entry.circuitState) {
+      case "CLOSED":
+        return theme.colors.success;
+      case "OPEN":
+        return theme.colors.error;
+      case "HALF_OPEN":
+        return theme.colors.warning;
+    }
+  };
+
+  // Overflow indicator if some providers are hidden
+  const hiddenCount = providers.length - visibleProviders.length;
+
+  return (
+    <Box flexDirection="row">
+      {visibleProviders.map((entry, index) => {
+        const indicator = getStatusIndicator(entry);
+        const label = getProviderLabel(entry, showNames, compact);
+        const color = getStateColor(entry);
+
+        return (
+          <Text key={entry.id}>
+            {index > 0 && <Text color={theme.semantic.border.muted}>{SEPARATOR}</Text>}
+            <Text color={color} bold={entry.isActive}>
+              {indicator}
+            </Text>
+            <Text color={color} dimColor={!entry.isActive}>
+              {" "}
+              {label}
+            </Text>
+          </Text>
+        );
+      })}
+      {hiddenCount > 0 && (
+        <Text color={theme.semantic.text.muted}>
+          {SEPARATOR}+{hiddenCount}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+// =============================================================================
+// Compact Variant
+// =============================================================================
+
+/**
+ * Props for ModelStatusBarCompact component.
+ */
+export interface ModelStatusBarCompactProps {
+  /** Array of provider status entries */
+  readonly providers: readonly ProviderStatusEntry[];
+}
+
+/**
+ * Ultra-compact variant showing only indicators without labels.
+ * Format: `[*][.][x]` - suitable for very narrow terminals.
+ *
+ * @example
+ * ```tsx
+ * <ModelStatusBarCompact providers={providers} />
+ * // Renders: [*][.][x]
+ * ```
+ */
+export function ModelStatusBarCompact({
+  providers,
+}: ModelStatusBarCompactProps): React.ReactElement | null {
+  const { theme } = useTheme();
+
+  if (providers.length === 0) {
+    return null;
+  }
+
+  // Sort: active first, then by ID
+  const sorted = [...providers].sort((a, b) => {
+    if (a.isActive !== b.isActive) return a.isActive ? -1 : 1;
+    return a.id.localeCompare(b.id);
+  });
+
+  return (
+    <Box flexDirection="row">
+      {sorted.map((entry) => {
+        const indicator = getStatusIndicator(entry);
+
+        let color: string;
+        if (entry.isActive) {
+          color = theme.brand.primary;
+        } else if (entry.circuitState === "CLOSED") {
+          color = theme.colors.success;
+        } else if (entry.circuitState === "OPEN") {
+          color = theme.colors.error;
+        } else {
+          color = theme.colors.warning;
+        }
+
+        return (
+          <Text key={entry.id} color={color} bold={entry.isActive}>
+            {indicator}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}

package/src/tui/components/Status/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Status Components
+ *
+ * Provider and model status display components.
+ */
+
+export {
+  ModelStatusBar,
+  ModelStatusBarCompact,
+  type ModelStatusBarCompactProps,
+  type ModelStatusBarProps,
+} from "./ModelStatusBar.js";