woopcode 0.1.0

package/tui/src/components/ApprovalFooter.tsx

@@ -0,0 +1,29 @@
+import { Box, Text } from "ink";
+
+export function ApprovalFooter() {
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="yellow"
+      paddingX={1}
+      marginTop={1}
+      flexDirection="row"
+      gap={2}
+    >
+      <Text color="green" bold>
+        [A]
+      </Text>
+      <Text dimColor>Apply</Text>
+
+      <Text color="red" bold>
+        [R]
+      </Text>
+      <Text dimColor>Reject</Text>
+
+      <Text color="gray" bold>
+        [Esc]
+      </Text>
+      <Text dimColor>Cancel</Text>
+    </Box>
+  );
+}

package/tui/src/components/AsciiLogo.tsx

@@ -0,0 +1,78 @@
+import { Box, Text } from "ink";
+import { useLogoAnimation } from "../hooks/useLogoAnimation";
+
+const REVEAL_DURATION_MS = 500;
+const WORD_SPACING = "    ";
+
+export interface AsciiLogoProps {
+  word: string;
+  revealDuration?: number;
+}
+
+export function AsciiLogo({
+  word,
+  revealDuration = REVEAL_DURATION_MS,
+}: AsciiLogoProps) {
+  const logoLines = createLogoLines(word);
+  const fullLogo = logoLines.map(({ woop, code }) => `${woop}${code}`).join("\n");
+  const { progress } = useLogoAnimation({
+    text: fullLogo,
+    duration: revealDuration,
+    mode: "typewriter",
+  });
+  let remainingCharacters = Math.floor(progress * fullLogo.length);
+
+  return (
+    <Box flexDirection="column">
+      {logoLines.map(({ woop, code }, index) => {
+        const visibleWoop = takeVisible(woop, remainingCharacters);
+        remainingCharacters -= woop.length;
+        const visibleCode = takeVisible(code, remainingCharacters);
+        remainingCharacters -= code.length;
+        if (index < logoLines.length - 1) remainingCharacters -= 1;
+
+        return (
+          <Box key={index}>
+            <Text bold color="cyan">{visibleWoop}</Text>
+            <Text bold dimColor>{visibleCode}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+function createLogoLines(word: string): Array<{ woop: string; code: string }> {
+  if (word.toUpperCase() !== "WOOPCODE") {
+    throw new Error("AsciiLogo currently supports the WOOPCODE wordmark only.");
+  }
+
+  return ANSI_SHADOW_WOOP.map((woop, index) => ({
+    woop,
+    code: `${WORD_SPACING}${ANSI_SHADOW_CODE[index] ?? ""}`,
+  }));
+}
+
+function takeVisible(value: string, remainingCharacters: number) {
+  return value.slice(0, Math.max(0, remainingCharacters));
+}
+
+// Generated with FIGlet's ANSI Shadow font, then kept as text so the TUI has
+// no font runtime or package dependency.
+const ANSI_SHADOW_WOOP = [
+  "██╗    ██╗ ██████╗  ██████╗ ██████╗ ",
+  "██║    ██║██╔═══██╗██╔═══██╗██╔══██╗",
+  "██║ █╗ ██║██║   ██║██║   ██║██████╔╝",
+  "██║███╗██║██║   ██║██║   ██║██╔═══╝ ",
+  "╚███╔███╔╝╚██████╔╝╚██████╔╝██║     ",
+  " ╚══╝╚══╝  ╚═════╝  ╚═════╝ ╚═╝     ",
+] as const;
+
+const ANSI_SHADOW_CODE = [
+  " ██████╗ ██████╗ ██████╗ ███████╗",
+  "██╔════╝██╔═══██╗██╔══██╗██╔════╝",
+  "██║     ██║   ██║██║  ██║█████╗  ",
+  "██║     ██║   ██║██║  ██║██╔══╝  ",
+  "╚██████╗╚██████╔╝██████╔╝███████╗",
+  " ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝",
+] as const;

package/tui/src/components/BootScreen.tsx

@@ -0,0 +1,76 @@
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { useBootAnimation, STEPS } from "../hooks/useBootAnimation";
+import { LogoReveal } from "./LogoReveal";
+
+interface BootScreenProps {
+  onComplete: () => void;
+}
+
+export function BootScreen({ onComplete }: BootScreenProps) {
+  const { logoText, loadingStep, doneSteps, phase } = useBootAnimation(onComplete);
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      {/* Logo with premium animated reveal */}
+      <Box marginBottom={1}>
+        {phase === "logo" ? (
+          <LogoReveal
+            text="Woopcode"
+            duration={400}
+            mode="highlight"
+            onComplete={() => {}}
+          />
+        ) : (
+          <Text bold color="cyan">
+            Woopcode
+          </Text>
+        )}
+      </Box>
+
+      {/* Steps — only visible once logo is done */}
+      {phase !== "logo" && (
+        <Box flexDirection="column" marginBottom={1}>
+          {STEPS.map((label, i) => (
+            <StepRow
+              key={label}
+              label={label}
+              done={doneSteps.has(i)}
+              loading={loadingStep === i}
+            />
+          ))}
+        </Box>
+      )}
+
+      {/* Launching line */}
+      {(phase === "launching" || phase === "done") && (
+        <Box marginTop={1}>
+          <Text dimColor>Launching Woopcode…</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+interface StepRowProps {
+  label: string;
+  done: boolean;
+  loading: boolean;
+}
+
+function StepRow({ label, done, loading }: StepRowProps) {
+  return (
+    <Box gap={1}>
+      <StepIcon done={done} loading={loading} />
+      <Text dimColor={!done && !loading} color={done ? "green" : loading ? "cyan" : undefined}>
+        {label}
+      </Text>
+    </Box>
+  );
+}
+
+function StepIcon({ done, loading }: { done: boolean; loading: boolean }) {
+  if (done)    return <Text color="green">✓</Text>;
+  if (loading) return <Text color="cyan"><Spinner type="dots" /></Text>;
+  return       <Text dimColor>○</Text>;
+}

package/tui/src/components/CapabilityRow.tsx

@@ -0,0 +1,17 @@
+import { Box, Text } from "ink";
+
+export interface CapabilityRowProps {
+  capabilities: readonly string[];
+}
+
+export function CapabilityRow({ capabilities }: CapabilityRowProps) {
+  return (
+    <Box flexWrap="wrap" justifyContent="center">
+      {capabilities.map((capability, index) => (
+        <Box key={capability} marginRight={index === capabilities.length - 1 ? 0 : 2}>
+          <Text color="cyan" dimColor>#{capability}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}

package/tui/src/components/CodeBlock.tsx

@@ -0,0 +1,70 @@
+import { Box, Text } from "ink";
+import { highlight } from "cli-highlight";
+import chalk from "chalk";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+}
+
+function stripAnsi(str: string): string {
+  return str.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
+export function CodeBlock({ code, language }: CodeBlockProps) {
+  let highlighted: string;
+  try {
+    highlighted = highlight(code.trimEnd(), {
+      language: language || undefined,
+      ignoreIllegals: true,
+    });
+  } catch {
+    highlighted = code.trimEnd();
+  }
+
+  const lines = highlighted.split("\n");
+  const dim = chalk.dim;
+
+  const termWidth = Math.max((process.stdout.columns || 80) - 6, 30);
+  const maxContent = lines.reduce(
+    (max, l) => Math.max(max, stripAnsi(l).length),
+    0,
+  );
+  // box = │(1) + left pad(2) + content + right pad(1) + │(1) = content + 5
+  const boxWidth = Math.min(Math.max(maxContent + 6, 30), termWidth);
+  const inner = boxWidth - 5;
+
+  // ╭─ language ────────╮
+  const label = language ? `─ ${language} ` : "─";
+  const topFill = Math.max(0, boxWidth - label.length - 2);
+  const top = dim(`╭${label}${"─".repeat(topFill)}╮`);
+
+  // ╰────────────────────╯
+  const bottom = dim(`╰${"─".repeat(boxWidth - 2)}╯`);
+
+  // empty padding row
+  const empty = dim("│") + " ".repeat(boxWidth - 2) + dim("│");
+
+  // code rows — truncate long lines at inner width so the box never breaks
+  const rows = lines.map((line) => {
+    const vis = stripAnsi(line).length;
+    if (vis > inner) {
+      // Trim the raw string until its visible length fits, then add …
+      // We strip ANSI from the trimmed portion and use the highlighted version
+      // only when it fits — safest approach for ANSI-heavy strings.
+      const truncated = stripAnsi(line).slice(0, inner - 1) + "…";
+      const pad = inner - truncated.length;
+      return dim("│") + "  " + truncated + " ".repeat(Math.max(0, pad)) + " " + dim("│");
+    }
+    const pad = inner - vis;
+    return dim("│") + "  " + line + " ".repeat(pad) + " " + dim("│");
+  });
+
+  const output = [top, empty, ...rows, empty, bottom].join("\n");
+
+  return (
+    <Box marginY={1}>
+      <Text>{output}</Text>
+    </Box>
+  );
+}

package/tui/src/components/DiffPreview.tsx

@@ -0,0 +1,46 @@
+import { Box, Text, useInput } from "ink";
+import type { PendingEdit } from "../types";
+import { DiffViewer } from "./DiffViewer";
+import { ApprovalFooter } from "./ApprovalFooter";
+import { store } from "../store/ui-store";
+
+interface DiffPreviewProps {
+  pendingEdit: PendingEdit;
+}
+
+export function DiffPreview({ pendingEdit }: DiffPreviewProps) {
+  useInput((input, key) => {
+    if (key.escape) {
+      store.clearPendingEdit();
+      return;
+    }
+
+    const lowerInput = input.toLowerCase();
+
+    if (lowerInput === "a") {
+      store.approvePendingEdit();
+    } else if (lowerInput === "r") {
+      store.rejectPendingEdit();
+    }
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box
+        borderStyle="round"
+        borderColor="blue"
+        flexDirection="column"
+        paddingX={1}
+      >
+        <Text bold color="blue">
+          File Change Preview
+        </Text>
+        <Text dimColor>{pendingEdit.filePath}</Text>
+
+        <DiffViewer diff={pendingEdit.diff} />
+      </Box>
+
+      <ApprovalFooter />
+    </Box>
+  );
+}

package/tui/src/components/DiffViewer.tsx

@@ -0,0 +1,36 @@
+import { Box, Text } from "ink";
+
+interface DiffViewerProps {
+  diff: string;
+}
+
+export function DiffViewer({ diff }: DiffViewerProps) {
+  // Parse unified diff and render with colors
+  const lines = diff.split("\n");
+
+  return (
+    <Box flexDirection="column" marginTop={1} marginBottom={1}>
+      {lines.map((line, idx) => {
+        // Skip the first two lines (file headers)
+        if (idx < 2) return null;
+
+        let color: "green" | "red" | "cyan" | "dim" = "dim";
+        let content = line;
+
+        if (line.startsWith("@@")) {
+          color = "cyan";
+        } else if (line.startsWith("+")) {
+          color = "green";
+        } else if (line.startsWith("-")) {
+          color = "red";
+        }
+
+        return (
+          <Text key={idx} color={color}>
+            {content}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}

package/tui/src/components/HomeFooter.tsx

@@ -0,0 +1,11 @@
+import { Text } from "ink";
+
+export interface HomeFooterProps {
+  repository: string;
+  branch: string;
+  provider: string;
+}
+
+export function HomeFooter({ repository, branch, provider }: HomeFooterProps) {
+  return <Text dimColor>{repository} · {branch} · {provider}</Text>;
+}

package/tui/src/components/HomeScreen.tsx

@@ -0,0 +1,71 @@
+import { Box, Text, useStdout } from "ink";
+import type { ReactNode } from "react";
+import { AsciiLogo } from "./AsciiLogo";
+import { CapabilityRow } from "./CapabilityRow";
+import { HomeFooter } from "./HomeFooter";
+import { PromptCard } from "./PromptCard";
+
+export interface HomeScreenData {
+  logoWord: string;
+  subtitle: string;
+  promptExamples: readonly string[];
+  capabilities: readonly string[];
+  repository: string;
+  branch: string;
+  providerName: string;
+  provider: string;
+}
+
+export interface HomeScreenProps extends HomeScreenData {
+  renderPrompt: (placeholder: string) => ReactNode;
+}
+
+const LAYOUT = {
+  contentSidePadding: 4,
+  preferredPromptWidth: 68,
+  minimumPromptWidth: 28,
+} as const;
+
+/** The focused, pre-conversation experience for an agent workspace. */
+export function HomeScreen({
+  logoWord,
+  subtitle,
+  promptExamples,
+  capabilities,
+  repository,
+  branch,
+  provider,
+  renderPrompt,
+}: HomeScreenProps) {
+  const { stdout } = useStdout();
+  const terminalWidth = stdout.columns ?? LAYOUT.preferredPromptWidth;
+  const promptWidth = Math.min(
+    LAYOUT.preferredPromptWidth,
+    Math.max(LAYOUT.minimumPromptWidth, terminalWidth - LAYOUT.contentSidePadding),
+  );
+
+  return (
+    <Box flexDirection="column" flexGrow={1} justifyContent="center">
+      <Box flexDirection="column" alignItems="center">
+        <AsciiLogo word={logoWord} />
+        <Box marginTop={1} marginBottom={3}>
+          <Text dimColor>{subtitle}</Text>
+        </Box>
+      </Box>
+
+      <Box justifyContent="center" width="100%" marginTop={3}>
+        <PromptCard width={promptWidth} examples={promptExamples}>
+          {renderPrompt}
+        </PromptCard>
+      </Box>
+
+      <Box justifyContent="center" width="100%" marginTop={1}>
+        <CapabilityRow capabilities={capabilities} />
+      </Box>
+
+      <Box justifyContent="center" width="100%" marginTop={3}>
+        <HomeFooter repository={repository} branch={branch} provider={provider} />
+      </Box>
+    </Box>
+  );
+}

package/tui/src/components/InlineCode.tsx

@@ -0,0 +1,13 @@
+import { Text } from "ink";
+
+interface InlineCodeProps {
+  text: string;
+}
+
+export function InlineCode({ text }: InlineCodeProps) {
+  return (
+    <Text color="#d4d4d4" backgroundColor="#2d2d2d">
+      {` ${text} `}
+    </Text>
+  );
+}

package/tui/src/components/LogoReveal.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { useLogoAnimation } from "../hooks/useLogoAnimation";
+import type { AnimationMode } from "../hooks/useLogoAnimation";
+
+export interface LogoRevealProps {
+  /** The text to animate */
+  text: string;
+  /** Animation duration in milliseconds (default: 600) */
+  duration?: number;
+  /** Animation style (default: "highlight") */
+  mode?: AnimationMode;
+  /** Color for highlighted characters (default: "cyan") */
+  highlightColor?: string;
+  /** Whether to show bold text (default: true) */
+  bold?: boolean;
+  /** Callback when animation completes */
+  onComplete?: () => void;
+}
+
+/**
+ * Premium animated logo reveal component for terminal UIs.
+ * 
+ * Supports three animation modes:
+ * - "highlight" (default): Smooth left-to-right highlight sweep
+ * - "typewriter": Classic character-by-character reveal
+ * - "scan": Terminal boot-style scan line reveal
+ */
+export function LogoReveal({
+  text,
+  duration = 600,
+  mode = "highlight",
+  highlightColor = "cyan",
+  bold = true,
+  onComplete,
+}: LogoRevealProps) {
+  const { visibleText, highlightPosition, isComplete } = useLogoAnimation({
+    text,
+    duration,
+    mode,
+    onComplete,
+  });
+
+  // Render based on animation mode
+  switch (mode) {
+    case "typewriter":
+      return (
+        <Box>
+          <Text bold={bold} color={highlightColor}>
+            {visibleText}
+          </Text>
+          {!isComplete && <Text dimColor>_</Text>}
+        </Box>
+      );
+
+    case "highlight":
+      return (
+        <Box>
+          {renderHighlightSweep(text, highlightPosition, highlightColor, bold, isComplete)}
+        </Box>
+      );
+
+    case "scan":
+      return (
+        <Box>
+          {renderScanReveal(text, highlightPosition, highlightColor, bold, isComplete)}
+        </Box>
+      );
+
+    default:
+      return (
+        <Box>
+          <Text bold={bold} color={highlightColor}>
+            {text}
+          </Text>
+        </Box>
+      );
+  }
+}
+
+/**
+ * Render highlight sweep animation
+ * Full text visible, highlight sweeps left-to-right
+ */
+function renderHighlightSweep(
+  text: string,
+  position: number,
+  color: string,
+  bold: boolean,
+  isComplete: boolean
+): React.ReactNode {
+  if (isComplete) {
+    // Final state: fully highlighted
+    return (
+      <Text bold={bold} color={color}>
+        {text}
+      </Text>
+    );
+  }
+
+  // Calculate which characters are behind the sweep
+  const sweepIndex = Math.floor(position * text.length);
+
+  return (
+    <>
+      {/* Highlighted portion (characters behind sweep) */}
+      <Text bold={bold} color={color}>
+        {text.slice(0, sweepIndex)}
+      </Text>
+      {/* Dim portion (characters ahead of sweep) */}
+      <Text bold={bold} dimColor>
+        {text.slice(sweepIndex)}
+      </Text>
+    </>
+  );
+}
+
+/**
+ * Render scan reveal animation
+ * Characters begin dim, scan line reveals them
+ */
+function renderScanReveal(
+  text: string,
+  position: number,
+  color: string,
+  bold: boolean,
+  isComplete: boolean
+): React.ReactNode {
+  if (isComplete) {
+    // Final state: fully revealed
+    return (
+      <Text bold={bold} color={color}>
+        {text}
+      </Text>
+    );
+  }
+
+  const scanIndex = Math.floor(position * text.length);
+
+  return (
+    <>
+      {/* Revealed portion */}
+      <Text bold={bold} color={color}>
+        {text.slice(0, scanIndex)}
+      </Text>
+      {/* Scan line character (if not at end) */}
+      {scanIndex < text.length && (
+        <Text bold={bold} color={color} backgroundColor="gray">
+          {text[scanIndex]}
+        </Text>
+      )}
+      {/* Unrevealed portion */}
+      <Text bold={bold} dimColor>
+        {text.slice(scanIndex + 1)}
+      </Text>
+    </>
+  );
+}