@butlerw/vellum 0.1.0

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

@@ -0,0 +1,246 @@
+/**
+ * TokenBreakdown Component (Token Counting Fix)
+ *
+ * Displays granular token breakdown with cumulative vs per-turn stats.
+ * Shows: input | output | cache | thinking tokens with turn/total distinction.
+ *
+ * @module tui/components/StatusBar/TokenBreakdown
+ */
+
+import { Box, Text } from "ink";
+import { useMemo } from "react";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Detailed token usage statistics
+ */
+export interface TokenStats {
+  /** Number of input tokens */
+  readonly inputTokens: number;
+  /** Number of output tokens */
+  readonly outputTokens: number;
+  /** Number of tokens used for thinking/reasoning (if applicable) */
+  readonly thinkingTokens?: number;
+  /** Number of tokens read from cache (if applicable) */
+  readonly cacheReadTokens?: number;
+  /** Number of tokens written to cache (if applicable) */
+  readonly cacheWriteTokens?: number;
+}
+
+/**
+ * Props for the TokenBreakdown component.
+ */
+export interface TokenBreakdownProps {
+  /** Current turn token usage */
+  readonly turn?: TokenStats;
+  /** Cumulative session token usage */
+  readonly total: TokenStats;
+  /** Whether to show compact format (default: false) */
+  readonly compact?: boolean;
+  /** Whether to show turn stats (default: true if turn provided) */
+  readonly showTurn?: boolean;
+}
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Formats a number with K/M suffix for compact display.
+ */
+function formatTokenCount(count: number): string {
+  if (count < 1000) {
+    return count.toString();
+  }
+  if (count < 1000000) {
+    const k = count / 1000;
+    return k >= 10 ? `${Math.round(k)}K` : `${k.toFixed(1)}K`;
+  }
+  const m = count / 1000000;
+  return m >= 10 ? `${Math.round(m)}M` : `${m.toFixed(1)}M`;
+}
+
+/**
+ * Formats a signed number (with + prefix for positive) for turn display.
+ */
+function formatTurnCount(count: number): string {
+  const formatted = formatTokenCount(count);
+  return count > 0 ? `+${formatted}` : formatted;
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * TokenBreakdown displays granular token usage with turn vs cumulative distinction.
+ *
+ * Compact format: `in: X | out: Y | cache: Z | think: W`
+ * Full format with turn: `Turn: +X in +Y out | Total: A in B out`
+ *
+ * @example
+ * ```tsx
+ * // Compact cumulative only
+ * <TokenBreakdown
+ *   total={{ inputTokens: 5000, outputTokens: 2000, cacheReadTokens: 500 }}
+ *   compact
+ * />
+ * // Output: in: 5K | out: 2K | cache: 500
+ *
+ * // With turn breakdown
+ * <TokenBreakdown
+ *   turn={{ inputTokens: 500, outputTokens: 200 }}
+ *   total={{ inputTokens: 5000, outputTokens: 2000 }}
+ * />
+ * // Output: Turn: +500 in +200 out | Total: 5K in 2K out
+ * ```
+ */
+export function TokenBreakdown({
+  turn,
+  total,
+  compact = false,
+  showTurn = true,
+}: TokenBreakdownProps): React.JSX.Element {
+  const { theme } = useTheme();
+
+  // Memoized formatted values for total
+  const formattedTotal = useMemo(
+    () => ({
+      input: formatTokenCount(total.inputTokens),
+      output: formatTokenCount(total.outputTokens),
+      thinking: total.thinkingTokens ? formatTokenCount(total.thinkingTokens) : null,
+      cache:
+        total.cacheReadTokens || total.cacheWriteTokens
+          ? formatTokenCount((total.cacheReadTokens ?? 0) + (total.cacheWriteTokens ?? 0))
+          : null,
+    }),
+    [total]
+  );
+
+  // Memoized formatted values for turn (if provided)
+  const formattedTurn = useMemo(() => {
+    if (!turn) return null;
+    return {
+      input: formatTurnCount(turn.inputTokens),
+      output: formatTurnCount(turn.outputTokens),
+      thinking: turn.thinkingTokens ? formatTurnCount(turn.thinkingTokens) : null,
+      cache:
+        turn.cacheReadTokens || turn.cacheWriteTokens
+          ? formatTurnCount((turn.cacheReadTokens ?? 0) + (turn.cacheWriteTokens ?? 0))
+          : null,
+    };
+  }, [turn]);
+
+  const hasTurn = showTurn && turn && formattedTurn;
+
+  // Compact format: `in: X | out: Y | cache: Z | think: W`
+  if (compact) {
+    const parts: React.ReactNode[] = [];
+
+    parts.push(
+      <Text key="in" color={theme.semantic.text.secondary}>
+        in: <Text color={theme.colors.info}>{formattedTotal.input}</Text>
+      </Text>
+    );
+
+    parts.push(
+      <Text key="out" color={theme.semantic.text.secondary}>
+        out: <Text color={theme.colors.success}>{formattedTotal.output}</Text>
+      </Text>
+    );
+
+    if (formattedTotal.cache) {
+      parts.push(
+        <Text key="cache" color={theme.semantic.text.secondary}>
+          cache: <Text color={theme.semantic.text.muted}>{formattedTotal.cache}</Text>
+        </Text>
+      );
+    }
+
+    if (formattedTotal.thinking) {
+      parts.push(
+        <Text key="think" color={theme.semantic.text.secondary}>
+          think: <Text color={theme.colors.warning}>{formattedTotal.thinking}</Text>
+        </Text>
+      );
+    }
+
+    return (
+      <Box>
+        {parts.map((part, index) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: Parts array is built locally with stable order, not reordered or filtered
+          <Text key={`wrapper-${index}`}>
+            {index > 0 && <Text color={theme.semantic.border.muted}> │ </Text>}
+            {part}
+          </Text>
+        ))}
+      </Box>
+    );
+  }
+
+  // Full format with turn distinction
+  if (hasTurn) {
+    return (
+      <Box>
+        {/* Turn stats */}
+        <Text color={theme.semantic.text.muted}>Turn: </Text>
+        <Text color={theme.colors.info}>{formattedTurn.input}</Text>
+        <Text color={theme.semantic.text.muted}> in </Text>
+        <Text color={theme.colors.success}>{formattedTurn.output}</Text>
+        <Text color={theme.semantic.text.muted}> out</Text>
+        {formattedTurn.thinking && (
+          <>
+            <Text color={theme.semantic.text.muted}> </Text>
+            <Text color={theme.colors.warning}>{formattedTurn.thinking}</Text>
+            <Text color={theme.semantic.text.muted}> think</Text>
+          </>
+        )}
+
+        {/* Separator */}
+        <Text color={theme.semantic.border.muted}> │ </Text>
+
+        {/* Total stats */}
+        <Text color={theme.semantic.text.muted}>Total: </Text>
+        <Text color={theme.semantic.text.secondary}>{formattedTotal.input}</Text>
+        <Text color={theme.semantic.text.muted}> in </Text>
+        <Text color={theme.semantic.text.secondary}>{formattedTotal.output}</Text>
+        <Text color={theme.semantic.text.muted}> out</Text>
+        {formattedTotal.thinking && (
+          <>
+            <Text color={theme.semantic.text.muted}> </Text>
+            <Text color={theme.semantic.text.secondary}>{formattedTotal.thinking}</Text>
+            <Text color={theme.semantic.text.muted}> think</Text>
+          </>
+        )}
+      </Box>
+    );
+  }
+
+  // Full format without turn (total only)
+  return (
+    <Box>
+      <Text color={theme.semantic.text.secondary}>{formattedTotal.input}</Text>
+      <Text color={theme.semantic.text.muted}> in </Text>
+      <Text color={theme.semantic.text.secondary}>{formattedTotal.output}</Text>
+      <Text color={theme.semantic.text.muted}> out</Text>
+      {formattedTotal.cache && (
+        <>
+          <Text color={theme.semantic.text.muted}> </Text>
+          <Text color={theme.semantic.text.muted}>{formattedTotal.cache}</Text>
+          <Text color={theme.semantic.text.muted}> cache</Text>
+        </>
+      )}
+      {formattedTotal.thinking && (
+        <>
+          <Text color={theme.semantic.text.muted}> </Text>
+          <Text color={theme.colors.warning}>{formattedTotal.thinking}</Text>
+          <Text color={theme.semantic.text.muted}> think</Text>
+        </>
+      )}
+    </Box>
+  );
+}

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

@@ -0,0 +1,135 @@
+/**
+ * TokenCounter Component (T036)
+ *
+ * Displays token usage as a percentage with color-coded warnings.
+ * Changes color based on usage thresholds: warning at 80%, error at 95%.
+ *
+ * @module tui/components/StatusBar/TokenCounter
+ */
+
+import { Box, Text } from "ink";
+import { useMemo } from "react";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the TokenCounter component.
+ */
+export interface TokenCounterProps {
+  /** Current token count */
+  readonly current: number;
+  /** Maximum token limit */
+  readonly max: number;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/** Warning threshold percentage (80%) */
+const WARNING_THRESHOLD = 80;
+
+/** Error threshold percentage (95%) */
+const ERROR_THRESHOLD = 95;
+
+/** Token counter icon */
+const TOKEN_ICON = "◊";
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Formats a number with K/M suffix for compact display.
+ */
+function formatTokenCount(count: number): string {
+  if (count < 1000) {
+    return count.toString();
+  }
+  if (count < 1000000) {
+    const k = count / 1000;
+    return k >= 10 ? `${Math.round(k)}K` : `${k.toFixed(1)}K`;
+  }
+  const m = count / 1000000;
+  return m >= 10 ? `${Math.round(m)}M` : `${m.toFixed(1)}M`;
+}
+
+/**
+ * Calculates the percentage of tokens used.
+ */
+function calculatePercentage(current: number, max: number): number {
+  if (max <= 0) return 0;
+  return Math.min(Math.round((current / max) * 100), 100);
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * TokenCounter displays token usage with color-coded warnings.
+ *
+ * Features:
+ * - Current/max token display
+ * - Percentage indicator
+ * - Color-coded thresholds:
+ *   - Normal (< 80%): secondary text color
+ *   - Warning (80-95%): warning color
+ *   - Error (> 95%): error color
+ *
+ * @example
+ * ```tsx
+ * // Normal usage
+ * <TokenCounter current={5000} max={100000} />
+ *
+ * // Warning state
+ * <TokenCounter current={85000} max={100000} />
+ *
+ * // Error state
+ * <TokenCounter current={98000} max={100000} />
+ * ```
+ */
+export function TokenCounter({ current, max }: TokenCounterProps): React.JSX.Element {
+  const { theme } = useTheme();
+
+  const percentage = useMemo(() => calculatePercentage(current, max), [current, max]);
+
+  const formattedCurrent = useMemo(() => formatTokenCount(current), [current]);
+  const formattedMax = useMemo(() => formatTokenCount(max), [max]);
+
+  // Determine color based on percentage thresholds
+  const color = useMemo(() => {
+    if (percentage >= ERROR_THRESHOLD) {
+      return theme.colors.error;
+    }
+    if (percentage >= WARNING_THRESHOLD) {
+      return theme.colors.warning;
+    }
+    return theme.semantic.text.secondary;
+  }, [percentage, theme.colors.error, theme.colors.warning, theme.semantic.text.secondary]);
+
+  const percentageColor = useMemo(() => {
+    if (percentage >= ERROR_THRESHOLD) {
+      return theme.colors.error;
+    }
+    if (percentage >= WARNING_THRESHOLD) {
+      return theme.colors.warning;
+    }
+    return theme.semantic.text.muted;
+  }, [percentage, theme.colors.error, theme.colors.warning, theme.semantic.text.muted]);
+
+  return (
+    <Box>
+      <Text color={theme.semantic.text.muted}>{TOKEN_ICON} </Text>
+      <Text color={color}>{formattedCurrent}</Text>
+      <Text color={theme.semantic.text.muted}>/</Text>
+      <Text color={theme.semantic.text.secondary}>{formattedMax}</Text>
+      <Text color={theme.semantic.text.muted}> (</Text>
+      <Text color={percentageColor}>{percentage}%</Text>
+      <Text color={theme.semantic.text.muted}>)</Text>
+    </Box>
+  );
+}

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

@@ -0,0 +1,130 @@
+/**
+ * TrustModeIndicator Component (T037)
+ *
+ * Displays the current trust mode with an icon and color.
+ * Trust modes control how much autonomy the AI has for tool execution.
+ *
+ * @module tui/components/StatusBar/TrustModeIndicator
+ */
+
+import { Box, Text } from "ink";
+import { useMemo } from "react";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Trust mode types.
+ * - ask: AI asks for approval before each action
+ * - auto: AI auto-approves safe actions, asks for dangerous ones
+ * - full: AI auto-approves all actions
+ */
+export type TrustMode = "ask" | "auto" | "full";
+
+/**
+ * Props for the TrustModeIndicator component.
+ */
+export interface TrustModeIndicatorProps {
+  /** Current trust mode */
+  readonly mode: TrustMode;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * Trust mode configuration mapping.
+ */
+interface TrustModeConfig {
+  readonly icon: string;
+  readonly label: string;
+  readonly description: string;
+}
+
+const TRUST_MODE_CONFIG: Record<TrustMode, TrustModeConfig> = {
+  ask: {
+    icon: "◎",
+    label: "Approval: Ask",
+    description: "Manual approval required",
+  },
+  auto: {
+    icon: "◉",
+    label: "Approval: Auto",
+    description: "Auto-approve safe actions",
+  },
+  full: {
+    icon: "●",
+    label: "Approval: Full",
+    description: "Auto-approve all actions",
+  },
+};
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Gets the color for a trust mode.
+ * - ask: warning (requires attention)
+ * - auto: info (semi-autonomous)
+ * - full: success (fully autonomous) but also indicates risk
+ */
+function getTrustModeColor(mode: TrustMode, theme: ReturnType<typeof useTheme>["theme"]): string {
+  switch (mode) {
+    case "ask":
+      return theme.colors.warning;
+    case "auto":
+      return theme.colors.info;
+    case "full":
+      return theme.colors.success;
+    default:
+      return theme.semantic.text.secondary;
+  }
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * TrustModeIndicator displays the current trust mode with visual cues.
+ *
+ * Features:
+ * - Mode-specific icon
+ * - Color-coded by trust level
+ * - Compact label display
+ *
+ * Trust Modes:
+ * - Ask (◎): Manual approval for all actions
+ * - Auto (◉): Auto-approve safe actions, ask for dangerous ones
+ * - Full (●): Auto-approve all actions (highest trust)
+ *
+ * @example
+ * ```tsx
+ * // Ask mode (most restrictive)
+ * <TrustModeIndicator mode="ask" />
+ *
+ * // Auto mode (balanced)
+ * <TrustModeIndicator mode="auto" />
+ *
+ * // Full mode (most permissive)
+ * <TrustModeIndicator mode="full" />
+ * ```
+ */
+export function TrustModeIndicator({ mode }: TrustModeIndicatorProps): React.JSX.Element {
+  const { theme } = useTheme();
+
+  const config = useMemo(() => TRUST_MODE_CONFIG[mode], [mode]);
+  const color = useMemo(() => getTrustModeColor(mode, theme), [mode, theme]);
+
+  return (
+    <Box>
+      <Text color={color}>{config.icon}</Text>
+      <Text color={theme.semantic.text.muted}> </Text>
+      <Text color={color}>{config.label}</Text>
+    </Box>
+  );
+}

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

@@ -0,0 +1,86 @@
+/**
+ * WorkspaceIndicator Component
+ *
+ * Displays the current workspace directory name with a folder icon.
+ * Uses gradient styling for visual emphasis while maintaining readability.
+ *
+ * @module tui/components/StatusBar/WorkspaceIndicator
+ */
+
+import { getIcons } from "@vellum/shared";
+import { Text } from "ink";
+import type React from "react";
+import { useMemo } from "react";
+import { useWorkspace } from "../../hooks/useWorkspace.js";
+import { useTheme } from "../../theme/index.js";
+import { truncateToDisplayWidth } from "../../utils/index.js";
+import { GradientText } from "../common/GradientText.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the WorkspaceIndicator component.
+ */
+export interface WorkspaceIndicatorProps {
+  /** Maximum width for the workspace name (truncates if exceeded) */
+  readonly maxWidth?: number;
+  /** Whether to use gradient styling (default: true) */
+  readonly useGradient?: boolean;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * WorkspaceIndicator displays the current workspace directory.
+ *
+ * Uses Nerd Font  icon or Unicode/ASCII fallback.
+ * Applies gradient styling for visual emphasis (configurable).
+ * Truncates long names with ellipsis if maxWidth is specified.
+ *
+ * @example
+ * ```tsx
+ * <WorkspaceIndicator maxWidth={20} />
+ * // Output:  vellum (with gradient)
+ *
+ * <WorkspaceIndicator useGradient={false} />
+ * // Output:  vellum (muted)
+ * ```
+ */
+export function WorkspaceIndicator({
+  maxWidth = 20,
+  useGradient = true,
+}: WorkspaceIndicatorProps): React.JSX.Element {
+  const { theme } = useTheme();
+  const { name } = useWorkspace();
+  const icons = getIcons();
+
+  const displayName = useMemo(() => {
+    // Truncate with ellipsis using string-width for CJK/Emoji handling
+    return truncateToDisplayWidth(name, maxWidth);
+  }, [name, maxWidth]);
+
+  // Workspace gradient: subtle gold tones
+  const workspaceGradient = useMemo(
+    () => [theme.brand.primary, theme.brand.secondary, theme.brand.mid] as const,
+    [theme.brand]
+  );
+
+  if (useGradient) {
+    return (
+      <Text>
+        <Text color={theme.brand.primary}>{icons.folder} </Text>
+        <GradientText text={displayName} colors={workspaceGradient} bold />
+      </Text>
+    );
+  }
+
+  return (
+    <Text color={theme.semantic.text.muted}>
+      {icons.folder} {displayName}
+    </Text>
+  );
+}