@butlerw/vellum 0.1.0

package/src/tui/components/StatusBar/ModelIndicator.tsx

@@ -0,0 +1,157 @@
+/**
+ * ModelIndicator Component (T035)
+ *
+ * Displays the current AI provider icon and model name in the status bar.
+ * Uses provider-specific icons for visual identification.
+ *
+ * @module tui/components/StatusBar/ModelIndicator
+ */
+
+import { Box, Text } from "ink";
+import { useMemo } from "react";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the ModelIndicator component.
+ */
+export interface ModelIndicatorProps {
+  /** AI provider name (e.g., 'anthropic', 'openai', 'google') */
+  readonly provider?: string;
+  /** Model name (e.g., 'claude-3-opus', 'gpt-4') */
+  readonly model: string;
+  /** Compact mode: show only model name without provider (default: false) */
+  readonly compact?: boolean;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * Provider icons mapping.
+ * Uses Unicode symbols for terminal compatibility.
+ */
+const PROVIDER_ICONS: Record<string, string> = {
+  anthropic: "◈", // Diamond with dot
+  openai: "◉", // Circle with fill
+  google: "◎", // Circle with ring
+  azure: "◇", // Diamond outline
+  bedrock: "▣", // Square with fill
+  mistral: "◆", // Filled diamond
+  ollama: "○", // Circle outline
+  default: "●", // Filled circle
+};
+
+/**
+ * Provider display names mapping.
+ */
+const PROVIDER_NAMES: Record<string, string> = {
+  anthropic: "Anthropic",
+  openai: "OpenAI",
+  google: "Google",
+  azure: "Azure",
+  bedrock: "Bedrock",
+  mistral: "Mistral",
+  ollama: "Ollama",
+};
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Gets the icon for a provider.
+ * Falls back to default icon for unknown providers.
+ */
+function getProviderIcon(provider: string): string {
+  const normalizedProvider = provider.toLowerCase();
+  return PROVIDER_ICONS[normalizedProvider] ?? "●";
+}
+
+/**
+ * Gets the display name for a provider.
+ * Falls back to capitalized provider name for unknown providers.
+ */
+function getProviderName(provider: string): string {
+  const normalizedProvider = provider.toLowerCase();
+  return PROVIDER_NAMES[normalizedProvider] ?? provider.charAt(0).toUpperCase() + provider.slice(1);
+}
+
+/**
+ * Truncates model name if too long.
+ * Preserves the version suffix if present.
+ */
+function formatModelName(model: string, maxLength = 25): string {
+  if (model.length <= maxLength) {
+    return model;
+  }
+
+  // Try to preserve version suffix
+  const parts = model.split("-");
+  if (parts.length > 1) {
+    const suffix = parts[parts.length - 1] ?? "";
+    const truncated = model.slice(0, maxLength - suffix.length - 4);
+    return `${truncated}...${suffix}`;
+  }
+
+  return `${model.slice(0, maxLength - 3)}...`;
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * ModelIndicator displays the current AI provider and model.
+ *
+ * Features:
+ * - Provider-specific icon
+ * - Provider name (optional)
+ * - Model name (truncated if too long)
+ * - Compact mode for unified footer layout
+ * - Themed styling
+ *
+ * @example
+ * ```tsx
+ * // Full display with provider
+ * <ModelIndicator provider="anthropic" model="claude-3-opus" />
+ *
+ * // Compact mode (model only)
+ * <ModelIndicator model="claude-sonnet-4" compact />
+ * ```
+ */
+export function ModelIndicator({
+  provider,
+  model,
+  compact = false,
+}: ModelIndicatorProps): React.JSX.Element {
+  const { theme } = useTheme();
+
+  const icon = useMemo(() => (provider ? getProviderIcon(provider) : "●"), [provider]);
+  const providerName = useMemo(() => (provider ? getProviderName(provider) : ""), [provider]);
+  const displayModel = useMemo(() => formatModelName(model, compact ? 20 : 25), [model, compact]);
+
+  // Compact mode: model name only
+  if (compact) {
+    return (
+      <Box>
+        <Text color={theme.semantic.text.primary}>{displayModel}</Text>
+      </Box>
+    );
+  }
+
+  // Full mode: icon + provider + model
+  return (
+    <Box>
+      <Text color={theme.colors.primary}>{icon}</Text>
+      <Text color={theme.semantic.text.muted}> </Text>
+      <Text color={theme.semantic.text.secondary}>{providerName}</Text>
+      <Text color={theme.semantic.text.muted}>/</Text>
+      <Text color={theme.semantic.text.primary}>{displayModel}</Text>
+    </Box>
+  );
+}

package/src/tui/components/StatusBar/PersistenceStatusIndicator.tsx

@@ -0,0 +1,210 @@
+/**
+ * PersistenceStatusIndicator Component
+ *
+ * Status indicator for session persistence state.
+ * Displays save status, unsaved message count, and timing info.
+ *
+ * @module tui/components/StatusBar/PersistenceStatusIndicator
+ */
+
+import { getIcons } from "@vellum/shared";
+import { Box, Text } from "ink";
+import type React from "react";
+import { useMemo } from "react";
+import type { PersistenceStatus } from "../../hooks/usePersistence.js";
+import { useTUITranslation } from "../../i18n/index.js";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the PersistenceStatusIndicator component
+ */
+export interface PersistenceStatusIndicatorProps {
+  /** Current persistence status */
+  readonly status: PersistenceStatus;
+  /** Number of unsaved messages */
+  readonly unsavedCount?: number;
+  /** Timestamp of last successful save */
+  readonly lastSavedAt?: Date | null;
+  /** Whether to use compact display mode */
+  readonly compact?: boolean;
+  /** Whether the indicator is visible */
+  readonly visible?: boolean;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * Get icon for a persistence status using the theme icon system.
+ */
+function getStatusIcon(status: PersistenceStatus): string {
+  const icons = getIcons();
+  switch (status) {
+    case "idle":
+      return icons.check; // All good, nothing to save
+    case "saving":
+      return icons.running; // In progress
+    case "saved":
+      return icons.success; // Just saved successfully
+    case "error":
+      return icons.error; // Save failed
+  }
+}
+
+/**
+ * Icon suffix for unsaved state
+ */
+const UNSAVED_SUFFIX = "•";
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Format relative time from a date.
+ *
+ * @param date - Date to format
+ * @returns Human-readable relative time string
+ */
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+
+  if (diffSecs < 10) {
+    return "just now";
+  }
+  if (diffSecs < 60) {
+    return `${diffSecs}s ago`;
+  }
+  if (diffMins < 60) {
+    return `${diffMins}min ago`;
+  }
+  if (diffHours < 24) {
+    return `${diffHours}h ago`;
+  }
+  return date.toLocaleDateString();
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * PersistenceStatusIndicator displays the current session save state.
+ *
+ * Status Icons (using theme icons):
+ * - ✔/✦  (green)  - Saved, no unsaved changes
+ * - ✔•   (yellow) - Unsaved changes present
+ * - ⟳    (blue)   - Save in progress
+ * - ✘    (red)    - Save failed
+ *
+ * Display Modes:
+ * - Normal: "✔ saved 2min ago" or "✔• unsaved: 3"
+ * - Compact: "✔" or "✔•3"
+ *
+ * @example
+ * ```tsx
+ * <PersistenceStatusIndicator
+ *   status="idle"
+ *   unsavedCount={3}
+ *   lastSavedAt={new Date()}
+ * />
+ * ```
+ */
+export function PersistenceStatusIndicator({
+  status,
+  unsavedCount = 0,
+  lastSavedAt = null,
+  compact = false,
+  visible = true,
+}: PersistenceStatusIndicatorProps): React.JSX.Element | null {
+  const { theme } = useTheme();
+  const { t } = useTUITranslation();
+
+  // Determine effective status based on unsaved count
+  const effectiveStatus = useMemo((): PersistenceStatus => {
+    if (status === "saving" || status === "error") {
+      return status;
+    }
+    if (unsavedCount > 0) {
+      return "idle";
+    }
+    return "saved";
+  }, [status, unsavedCount]);
+
+  // Get icon based on status
+  const icon = useMemo((): string => {
+    const baseIcon = getStatusIcon(effectiveStatus);
+    if (effectiveStatus === "idle" && unsavedCount > 0) {
+      return `${getStatusIcon("idle")}${UNSAVED_SUFFIX}`;
+    }
+    return baseIcon;
+  }, [effectiveStatus, unsavedCount]);
+
+  // Determine color based on status
+  const color = useMemo((): string => {
+    switch (effectiveStatus) {
+      case "saved":
+        return theme.colors.success;
+      case "saving":
+        return theme.colors.info;
+      case "error":
+        return theme.colors.error;
+      case "idle":
+        return unsavedCount > 0 ? theme.colors.warning : theme.semantic.text.muted;
+    }
+  }, [effectiveStatus, unsavedCount, theme]);
+
+  // Build display text
+  const displayText = useMemo((): string => {
+    if (compact) {
+      // Compact mode: just icon and count if unsaved
+      if (unsavedCount > 0 && effectiveStatus !== "saving") {
+        return `${icon}${unsavedCount}`;
+      }
+      return icon;
+    }
+
+    // Full mode
+    switch (effectiveStatus) {
+      case "saving":
+        return `${icon} ${t("persistence.saving")}`;
+      case "saved":
+        if (lastSavedAt) {
+          return `${icon} ${t("persistence.saved")} ${formatRelativeTime(lastSavedAt)}`;
+        }
+        return `${icon} ${t("persistence.saved")}`;
+      case "error":
+        return `${icon} ${t("persistence.saveError")}`;
+      case "idle":
+        if (unsavedCount > 0) {
+          return `${icon} ${t("persistence.unsaved")}: ${unsavedCount}`;
+        }
+        return `${icon} ${t("persistence.saved")}`;
+    }
+  }, [compact, effectiveStatus, unsavedCount, lastSavedAt, icon, t]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <Text color={color}>{displayText}</Text>
+    </Box>
+  );
+}
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export default PersistenceStatusIndicator;

package/src/tui/components/StatusBar/ResilienceIndicator.tsx

@@ -0,0 +1,106 @@
+/**
+ * Resilience Indicator Component
+ *
+ * Displays rate limiting and retry status in the TUI.
+ *
+ * @module tui/components/StatusBar/ResilienceIndicator
+ */
+
+import { Box, Text } from "ink";
+import type React from "react";
+
+import { type ResilienceStatus, useResilienceOptional } from "../../context/ResilienceContext.js";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for ResilienceIndicator
+ */
+export interface ResilienceIndicatorProps {
+  /** Override status (for testing/storybook) */
+  readonly status?: ResilienceStatus;
+  /** Show compact version */
+  readonly compact?: boolean;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * Resilience indicator showing rate limit and retry status.
+ *
+ * @example
+ * ```tsx
+ * // In StatusBar
+ * <ResilienceIndicator />
+ *
+ * // Compact version
+ * <ResilienceIndicator compact />
+ * ```
+ */
+export function ResilienceIndicator({
+  status: overrideStatus,
+  compact = false,
+}: ResilienceIndicatorProps): React.JSX.Element | null {
+  const { theme } = useTheme();
+  const context = useResilienceOptional();
+
+  // Use override status or context status
+  const status = overrideStatus ?? context?.status;
+
+  // Don't render if no status or idle
+  if (!status || status.type === "idle") {
+    return null;
+  }
+
+  // Select icon and color based on status type
+  const icon = status.type === "rate-limit" ? "⏳" : "🔄";
+  const color = status.type === "rate-limit" ? theme.colors.warning : theme.colors.info;
+
+  if (compact) {
+    // Compact: just icon and wait time
+    const waitText = status.waitSeconds ? `${status.waitSeconds}s` : "";
+    return (
+      <Box>
+        <Text color={color}>
+          {icon} {waitText}
+        </Text>
+      </Box>
+    );
+  }
+
+  // Full: icon and message
+  return (
+    <Box>
+      <Text color={color}>
+        {icon} {status.message}
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * Resilience status bar segment for integration into StatusBar.
+ *
+ * Returns null if no active resilience event, making it safe to
+ * include in layouts unconditionally.
+ */
+export function ResilienceStatusSegment(): React.JSX.Element | null {
+  const context = useResilienceOptional();
+
+  // Don't render anything if context not available or feedback disabled
+  if (!context || !context.feedbackEnabled) {
+    return null;
+  }
+
+  // Don't render if idle
+  if (context.status.type === "idle") {
+    return null;
+  }
+
+  return <ResilienceIndicator />;
+}

package/src/tui/components/StatusBar/SandboxIndicator.tsx

@@ -0,0 +1,167 @@
+/**
+ * SandboxIndicator Component
+ *
+ * Displays the current sandbox policy with an icon and label.
+ * Sandbox policies control file system access boundaries.
+ *
+ * Trust Mode (approval) and Sandbox (file boundaries) are SEPARATE concepts:
+ * - Trust Mode: When to ask user (ask/auto/full-auto)
+ * - Sandbox: Where agent can access (workspace/cwd/system)
+ *
+ * @module tui/components/StatusBar/SandboxIndicator
+ */
+
+import type { SandboxPolicy } from "@vellum/core";
+import { Box, Text } from "ink";
+import { useMemo } from "react";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the SandboxIndicator component.
+ */
+export interface SandboxIndicatorProps {
+  /** Current sandbox policy */
+  readonly policy: SandboxPolicy;
+  /** Whether to show compact label (default: true) */
+  readonly compact?: boolean;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * Sandbox policy display configuration.
+ *
+ * Maps technical policy names to user-friendly display:
+ * - workspace-read: Read-only within workspace
+ * - workspace-write: Read/write within workspace
+ * - cwd-read: Read-only in current directory
+ * - cwd-write: Read/write in current directory
+ * - full-access: Full system-wide access (dangerous)
+ */
+interface SandboxDisplayConfig {
+  readonly icon: string;
+  readonly label: string;
+  readonly compactLabel: string;
+  readonly description: string;
+  readonly severity: "safe" | "caution" | "danger";
+}
+
+const SANDBOX_DISPLAY: Record<SandboxPolicy, SandboxDisplayConfig> = {
+  "workspace-read": {
+    icon: "[r]",
+    label: "workspace (read)",
+    compactLabel: "ws",
+    description: "Read-only access within workspace",
+    severity: "safe",
+  },
+  "workspace-write": {
+    icon: "[w]",
+    label: "workspace",
+    compactLabel: "ws",
+    description: "Read/write access within workspace",
+    severity: "caution",
+  },
+  "cwd-read": {
+    icon: "[r]",
+    label: "cwd (read)",
+    compactLabel: "cwd",
+    description: "Read-only access in current directory",
+    severity: "safe",
+  },
+  "cwd-write": {
+    icon: "[w]",
+    label: "cwd",
+    compactLabel: "cwd",
+    description: "Read/write access in current directory",
+    severity: "caution",
+  },
+  "full-access": {
+    icon: "[*]",
+    label: "system",
+    compactLabel: "sys",
+    description: "Full system-wide access",
+    severity: "danger",
+  },
+};
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Gets the semantic color for a sandbox policy severity.
+ * - safe: success (green) - limited access
+ * - caution: warning (yellow) - workspace/cwd write access
+ * - danger: error (red) - full system access
+ */
+function getSandboxColor(
+  severity: SandboxDisplayConfig["severity"],
+  theme: ReturnType<typeof useTheme>["theme"]
+): string {
+  switch (severity) {
+    case "safe":
+      return theme.colors.success;
+    case "caution":
+      return theme.colors.warning;
+    case "danger":
+      return theme.colors.error;
+    default:
+      return theme.semantic.text.secondary;
+  }
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * SandboxIndicator displays the current sandbox policy with visual cues.
+ *
+ * Features:
+ * - Policy-specific icon
+ * - Color-coded by access level severity
+ * - Compact or full label display
+ *
+ * Sandbox Policies:
+ * - workspace-read: [r] Read-only within workspace (safe)
+ * - workspace-write: [w] Read/write within workspace (caution)
+ * - cwd-read: [r] Read-only in current directory (safe)
+ * - cwd-write: [w] Read/write in current directory (caution)
+ * - full-access: [*] Full system access (danger)
+ *
+ * @example
+ * ```tsx
+ * // Compact mode (default)
+ * <SandboxIndicator policy="workspace-write" />
+ * // Output: [w] ws
+ *
+ * // Full mode
+ * <SandboxIndicator policy="workspace-write" compact={false} />
+ * // Output: [w] workspace
+ * ```
+ */
+export function SandboxIndicator({
+  policy,
+  compact = true,
+}: SandboxIndicatorProps): React.JSX.Element {
+  const { theme } = useTheme();
+
+  const config = useMemo(() => SANDBOX_DISPLAY[policy], [policy]);
+  const color = useMemo(() => getSandboxColor(config.severity, theme), [config.severity, theme]);
+
+  const displayLabel = compact ? config.compactLabel : config.label;
+
+  return (
+    <Box flexDirection="row">
+      <Text color={color}>
+        {config.icon} {displayLabel}
+      </Text>
+    </Box>
+  );
+}