@butlerw/vellum 0.1.0

package/src/tui/components/TrustPrompt.tsx

@@ -0,0 +1,279 @@
+/**
+ * TrustPrompt TUI Component (T060)
+ *
+ * Displays a trust confirmation prompt for new directories or monorepos.
+ * Uses keyboard navigation (Y/N/A/S) for quick interaction.
+ *
+ * @module tui/components/TrustPrompt
+ */
+
+import * as path from "node:path";
+import type { TrustPromptInfo, TrustScope } from "@vellum/core";
+import { Box, Text, useInput } from "ink";
+import type React from "react";
+import { useCallback, useState } from "react";
+import { useTUITranslation } from "../i18n/index.js";
+import { useTheme } from "../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * User's trust decision
+ */
+export type TrustDecision = "yes" | "no" | "always" | "skip";
+
+/**
+ * Props for TrustPrompt component
+ */
+export interface TrustPromptProps {
+  /** Trust prompt information from TrustManager */
+  promptInfo: TrustPromptInfo;
+  /** Callback when user makes a decision */
+  onDecision: (decision: TrustDecision, scope?: TrustScope) => void;
+  /** Optional: base path for relative display */
+  basePath?: string;
+}
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Format path for display (show relative if possible)
+ */
+function formatPath(targetPath: string, basePath?: string): string {
+  if (!basePath) return targetPath;
+
+  try {
+    const relative = path.relative(basePath, targetPath);
+    // Only use relative if it's actually shorter and doesn't go up too many levels
+    if (relative && !relative.startsWith("..\\..\\..") && !relative.startsWith("../../..")) {
+      return relative || ".";
+    }
+  } catch {
+    // Ignore errors
+  }
+
+  return targetPath;
+}
+
+/**
+ * Get monorepo type display name
+ */
+function getMonorepoTypeName(type: string): string {
+  const names: Record<string, string> = {
+    npm: "npm workspaces",
+    pnpm: "pnpm workspaces",
+    yarn: "Yarn workspaces",
+    turbo: "Turborepo",
+    lerna: "Lerna",
+  };
+  return names[type] ?? type;
+}
+
+// =============================================================================
+// Sub-components
+// =============================================================================
+
+/**
+ * Option button component
+ */
+function OptionButton({
+  label,
+  shortcut,
+  color,
+  isSelected,
+}: {
+  label: string;
+  shortcut: string;
+  color: string;
+  isSelected?: boolean;
+}): React.ReactElement {
+  const { theme } = useTheme();
+
+  return (
+    <Box marginRight={2}>
+      <Text color={isSelected ? theme.colors.primary : color} bold={isSelected}>
+        [{shortcut}] {label}
+      </Text>
+    </Box>
+  );
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * TrustPrompt - Interactive trust confirmation dialog
+ *
+ * Shows detected information and allows user to make trust decision
+ * using keyboard shortcuts.
+ *
+ * @example
+ * ```tsx
+ * <TrustPrompt
+ *   promptInfo={promptInfo}
+ *   onDecision={(decision) => handleDecision(decision)}
+ * />
+ * ```
+ */
+export function TrustPrompt({
+  promptInfo,
+  onDecision,
+  basePath,
+}: TrustPromptProps): React.ReactElement {
+  const { theme } = useTheme();
+  const { t } = useTUITranslation();
+  const [selectedOption, setSelectedOption] = useState<TrustDecision | null>(null);
+
+  // Handle keyboard input
+  useInput(
+    useCallback(
+      (input: string, key) => {
+        // Ignore if already selected
+        if (selectedOption) return;
+
+        const lowerInput = input.toLowerCase();
+
+        switch (lowerInput) {
+          case "y":
+            setSelectedOption("yes");
+            onDecision("yes", "session");
+            break;
+          case "n":
+            setSelectedOption("no");
+            onDecision("no");
+            break;
+          case "a":
+            setSelectedOption("always");
+            onDecision("always", "always");
+            break;
+          case "s":
+            setSelectedOption("skip");
+            onDecision("skip");
+            break;
+          default:
+            // Enter defaults to "yes"
+            if (key.return) {
+              setSelectedOption("yes");
+              onDecision("yes", "session");
+            }
+            break;
+        }
+      },
+      [selectedOption, onDecision]
+    )
+  );
+
+  const isMonorepo = promptInfo.reason === "monorepo";
+  const rootDisplay = formatPath(promptInfo.rootPath, basePath);
+  const currentDisplay = formatPath(promptInfo.currentPath, basePath);
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={theme.colors.warning}
+      paddingX={2}
+      paddingY={1}
+    >
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text bold color={theme.colors.warning}>
+          🔒 {isMonorepo ? t("trust.detected_monorepo") : t("trust.new_project")}
+        </Text>
+      </Box>
+
+      {/* Info Section */}
+      <Box flexDirection="column" marginBottom={1}>
+        {isMonorepo && promptInfo.monorepoInfo && (
+          <Box>
+            <Text color={theme.colors.muted}>
+              {t("trust.monorepo_type")}: {getMonorepoTypeName(promptInfo.monorepoInfo.type)}
+            </Text>
+          </Box>
+        )}
+
+        <Box>
+          <Text color={theme.colors.info}>
+            {t("trust.root_directory")}: <Text bold>{rootDisplay}</Text>
+          </Text>
+        </Box>
+
+        {isMonorepo && promptInfo.currentPath !== promptInfo.rootPath && (
+          <Box>
+            <Text color={theme.colors.muted}>
+              {t("trust.current_directory")}: {currentDisplay}
+            </Text>
+          </Box>
+        )}
+
+        {isMonorepo && promptInfo.monorepoInfo && promptInfo.monorepoInfo.workspaces.length > 0 && (
+          <Box marginTop={1}>
+            <Text color={theme.colors.muted}>
+              {t("trust.workspaces")}: {promptInfo.monorepoInfo.workspaces.slice(0, 3).join(", ")}
+              {promptInfo.monorepoInfo.workspaces.length > 3
+                ? ` (+${promptInfo.monorepoInfo.workspaces.length - 3} more)`
+                : ""}
+            </Text>
+          </Box>
+        )}
+      </Box>
+
+      {/* Question */}
+      <Box marginBottom={1}>
+        <Text>{t("trust.prompt_trust")}</Text>
+      </Box>
+
+      {/* Options */}
+      <Box>
+        <OptionButton
+          label={t("trust.option_yes")}
+          shortcut="Y"
+          color={theme.colors.success}
+          isSelected={selectedOption === "yes"}
+        />
+        <OptionButton
+          label={t("trust.option_no")}
+          shortcut="N"
+          color={theme.colors.error}
+          isSelected={selectedOption === "no"}
+        />
+        <OptionButton
+          label={t("trust.option_always")}
+          shortcut="A"
+          color={theme.colors.info}
+          isSelected={selectedOption === "always"}
+        />
+        <OptionButton
+          label={t("trust.option_skip")}
+          shortcut="S"
+          color={theme.colors.muted}
+          isSelected={selectedOption === "skip"}
+        />
+      </Box>
+
+      {/* Result indicator */}
+      {selectedOption && (
+        <Box marginTop={1}>
+          {selectedOption === "yes" || selectedOption === "always" ? (
+            <Text color={theme.colors.success}>✓ {t("trust.added")}</Text>
+          ) : selectedOption === "no" ? (
+            <Text color={theme.colors.error}>✗ {t("trust.denied")}</Text>
+          ) : (
+            <Text color={theme.colors.muted}>⊘ {t("trust.skipped")}</Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export default TrustPrompt;

package/src/tui/components/UpdateBanner.tsx

@@ -0,0 +1,166 @@
+/**
+ * UpdateBanner Component (Phase 39)
+ *
+ * React Ink component for displaying update availability notifications.
+ * Shows a dismissible banner when a new version is available.
+ *
+ * @module tui/components/UpdateBanner
+ */
+
+import { Box, Text, useInput } from "ink";
+import type React from "react";
+import { useState } from "react";
+import { useTUITranslation } from "../i18n/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the UpdateBanner component
+ */
+export interface UpdateBannerProps {
+  /** Current installed version */
+  readonly currentVersion: string;
+  /** Latest available version */
+  readonly latestVersion: string;
+  /** Release notes URL (optional) */
+  readonly releaseNotesUrl?: string;
+  /** Whether the banner can be dismissed */
+  readonly dismissible?: boolean;
+  /** Callback when banner is dismissed */
+  readonly onDismiss?: () => void;
+  /** Whether to show in compact mode */
+  readonly compact?: boolean;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * UpdateBanner displays a notification when a new version is available.
+ *
+ * @example
+ * ```tsx
+ * <UpdateBanner
+ *   currentVersion="0.1.0"
+ *   latestVersion="0.2.0"
+ *   releaseNotesUrl="https://github.com/..."
+ *   dismissible
+ * />
+ * ```
+ */
+export const UpdateBanner: React.FC<UpdateBannerProps> = ({
+  currentVersion,
+  latestVersion,
+  releaseNotesUrl,
+  dismissible = true,
+  onDismiss,
+  compact = false,
+}) => {
+  const { t } = useTUITranslation();
+  const [dismissed, setDismissed] = useState(false);
+
+  // Handle dismiss key press
+  useInput(
+    (input, key) => {
+      if (dismissible && (input === "d" || input === "D" || key.escape)) {
+        setDismissed(true);
+        onDismiss?.();
+      }
+    },
+    { isActive: dismissible && !dismissed }
+  );
+
+  // Don't render if dismissed
+  if (dismissed) {
+    return null;
+  }
+
+  // Compact mode - single line
+  if (compact) {
+    return (
+      <Box>
+        <Text color="yellow">
+          ⬆ v{latestVersion} available
+          {dismissible && <Text color="gray"> {t("update.dismissHint")}</Text>}
+        </Text>
+      </Box>
+    );
+  }
+
+  // Full mode - bordered box
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1} marginY={1}>
+      <Box>
+        <Text color="yellow" bold>
+          ⬆ {t("update.available")}
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text>
+          <Text color="gray">{t("update.current")}</Text>
+          <Text>v{currentVersion}</Text>
+          <Text color="gray"> → </Text>
+          <Text color="green" bold>
+            v{latestVersion}
+          </Text>
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="cyan">{t("update.upgradeHint")}</Text>
+      </Box>
+
+      {releaseNotesUrl && (
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>
+            Release notes: {releaseNotesUrl}
+          </Text>
+        </Box>
+      )}
+
+      {dismissible && (
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>
+            {t("update.dismissInstructions")}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+// =============================================================================
+// Inline Banner Variant
+// =============================================================================
+
+/**
+ * Props for the UpdateBannerInline component
+ */
+export interface UpdateBannerInlineProps {
+  /** Latest available version */
+  readonly latestVersion: string;
+}
+
+/**
+ * Inline update banner for use in status bars or headers.
+ * Non-dismissible, minimal styling.
+ *
+ * @example
+ * ```tsx
+ * <UpdateBannerInline latestVersion="0.2.0" />
+ * ```
+ */
+export const UpdateBannerInline: React.FC<UpdateBannerInlineProps> = ({ latestVersion }) => {
+  return (
+    <Box>
+      <Text backgroundColor="yellow" color="black">
+        {" "}
+        ⬆ v{latestVersion}{" "}
+      </Text>
+    </Box>
+  );
+};

package/src/tui/components/VimModeIndicator.tsx

@@ -0,0 +1,112 @@
+/**
+ * VimModeIndicator Component (T041)
+ *
+ * TUI component for displaying the current Vim editing mode.
+ * Shows mode name with visual styling (e.g., "-- NORMAL --").
+ *
+ * @module tui/components/VimModeIndicator
+ */
+
+import { Box, Text } from "ink";
+import type React from "react";
+import type { VimMode } from "../hooks/useVim.js";
+import { useTheme } from "../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the VimModeIndicator component.
+ */
+export interface VimModeIndicatorProps {
+  /** Whether vim mode is enabled */
+  readonly enabled: boolean;
+  /** Current Vim mode */
+  readonly mode: VimMode;
+  /** Whether to show in compact mode (mode name only, no dashes) */
+  readonly compact?: boolean;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * Mode colors mapped to theme semantic colors.
+ * - NORMAL: blue (info) - command mode
+ * - INSERT: green (success) - editing
+ * - VISUAL: yellow (warning) - selection
+ * - COMMAND: purple (primary) - command line
+ */
+const MODE_COLOR_KEYS: Record<VimMode, "info" | "success" | "warning" | "primary"> = {
+  NORMAL: "info",
+  INSERT: "success",
+  VISUAL: "warning",
+  COMMAND: "primary",
+} as const;
+
+// =============================================================================
+// VimModeIndicator Component
+// =============================================================================
+
+/**
+ * VimModeIndicator - Displays the current Vim editing mode.
+ *
+ * Features:
+ * - Traditional Vim-style mode display (-- MODE --)
+ * - Color-coded by mode type
+ * - Compact mode option for space-constrained layouts
+ * - Only renders when vim mode is enabled
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <VimModeIndicator enabled={true} mode="NORMAL" />
+ *
+ * // Compact mode
+ * <VimModeIndicator enabled={true} mode="INSERT" compact />
+ * ```
+ */
+export function VimModeIndicator({
+  enabled,
+  mode,
+  compact = false,
+}: VimModeIndicatorProps): React.ReactElement | null {
+  const { theme } = useTheme();
+
+  // Don't render if vim mode is disabled
+  if (!enabled) {
+    return null;
+  }
+
+  // Get color from theme
+  const colorKey = MODE_COLOR_KEYS[mode];
+  const color = theme.colors[colorKey];
+
+  // Compact mode: mode name only
+  if (compact) {
+    return (
+      <Box>
+        <Text color={color} bold>
+          {mode}
+        </Text>
+      </Box>
+    );
+  }
+
+  // Full mode: traditional Vim-style (-- MODE --)
+  return (
+    <Box>
+      <Text color={color} bold>
+        -- {mode} --
+      </Text>
+    </Box>
+  );
+}
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export type { VimMode };