woopcode 0.1.0

package/tui/src/components/Markdown.tsx

@@ -0,0 +1,280 @@
+import { Box, Text } from "ink";
+import type { Token, Tokens } from "marked";
+import { CodeBlock } from "./CodeBlock";
+import { InlineCode } from "./InlineCode";
+import type { ReactNode } from "react";
+
+interface MarkdownProps {
+  tokens: Token[];
+}
+
+export function Markdown({ tokens }: MarkdownProps) {
+  return (
+    <Box flexDirection="column">
+      {tokens.map((token, i) => (
+        <MarkdownBlock key={i} token={token} />
+      ))}
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Block-level rendering
+// ---------------------------------------------------------------------------
+
+function MarkdownBlock({ token }: { token: Token }): ReactNode {
+  switch (token.type) {
+    case "heading": {
+      const t = token as Tokens.Heading;
+      const prefix = "#".repeat(t.depth) + " ";
+      const color =
+        t.depth === 1
+          ? "#5fafff"
+          : t.depth === 2
+            ? "#87afff"
+            : "#afafaf";
+      return (
+        <Box marginTop={1} marginBottom={1}>
+          <Text bold color={color}>
+            {prefix}
+            {renderInline(t.tokens)}
+          </Text>
+        </Box>
+      );
+    }
+
+    case "paragraph": {
+      const t = token as Tokens.Paragraph;
+      return (
+        <Box marginBottom={1}>
+          <Text>{renderInline(t.tokens)}</Text>
+        </Box>
+      );
+    }
+
+    case "code": {
+      const t = token as Tokens.Code;
+      return <CodeBlock code={t.text} language={t.lang || undefined} />;
+    }
+
+    case "blockquote": {
+      const t = token as Tokens.Blockquote;
+      return (
+        <Box
+          marginBottom={1}
+          borderStyle="bold"
+          borderLeft={true}
+          borderTop={false}
+          borderBottom={false}
+          borderRight={false}
+          borderColor="#666666"
+          paddingLeft={1}
+        >
+          <Box flexDirection="column">
+            {t.tokens.map((inner, i) => (
+              <MarkdownBlock key={i} token={inner} />
+            ))}
+          </Box>
+        </Box>
+      );
+    }
+
+    case "list": {
+      const t = token as Tokens.List;
+      return (
+        <Box flexDirection="column" marginBottom={1}>
+          {t.items.map((item, i) => {
+            const prefix = t.ordered
+              ? `${(typeof t.start === "number" ? t.start : 1) + i}. `
+              : "• ";
+            return <ListItem key={i} item={item} prefix={prefix} />;
+          })}
+        </Box>
+      );
+    }
+
+    case "table": {
+      const t = token as Tokens.Table;
+      const termWidth = (process.stdout.columns || 80) - 4;
+
+      // Extract visible plain text from a cell's inline tokens (for string-based layouts)
+      const cellPlain = (tokens: Token[]): string =>
+        tokens
+          .map((tk) => {
+            if ("tokens" in tk && Array.isArray(tk.tokens)) return cellPlain(tk.tokens as Token[]);
+            if ("text" in tk) return (tk as { text: string }).text;
+            return tk.raw ?? "";
+          })
+          .join("");
+
+      const colWidths = t.header.map((h, ci) => {
+        const hLen = cellPlain(h.tokens).length;
+        const maxCell = t.rows.reduce(
+          (max, row) => Math.max(max, cellPlain(row[ci]?.tokens ?? []).length),
+          0,
+        );
+        return Math.max(hLen, maxCell, 3);
+      });
+
+      const pad = (str: string, width: number) =>
+        str + " ".repeat(Math.max(0, width - str.length));
+
+      const totalWidth = colWidths.reduce((sum, w) => sum + w + 3, 0) + 1;
+
+      if (totalWidth <= termWidth) {
+        // ── Horizontal table — string-based, plain text in cells ───────────
+        const top = "╭" + colWidths.map((w) => "─".repeat(w + 2)).join("┬") + "╮";
+        const mid = "├" + colWidths.map((w) => "─".repeat(w + 2)).join("┼") + "┤";
+        const bot = "╰" + colWidths.map((w) => "─".repeat(w + 2)).join("┴") + "╯";
+        const headerRow =
+          "│" +
+          t.header.map((h, i) => ` ${pad(cellPlain(h.tokens), colWidths[i]!)} `).join("│") +
+          "│";
+        const dataRows = t.rows.map(
+          (row) =>
+            "│" +
+            row.map((cell, i) => ` ${pad(cellPlain(cell.tokens), colWidths[i]!)} `).join("│") +
+            "│",
+        );
+        return (
+          <Box marginBottom={1}>
+            <Text>{[top, headerRow, mid, ...dataRows, bot].join("\n")}</Text>
+          </Box>
+        );
+      } else {
+        // ── Vertical fallback — use renderInline so formatting renders ─────
+        const labelWidth = Math.max(...t.header.map((h) => cellPlain(h.tokens).length));
+        const divider = "─".repeat(Math.min(termWidth, 40));
+        return (
+          <Box flexDirection="column" marginBottom={1}>
+            <Text dimColor>{divider}</Text>
+            {t.rows.map((row, ri) => (
+              <Box key={ri} flexDirection="column">
+                <Box flexDirection="column" marginY={1}>
+                  {t.header.map((h, ci) => (
+                    <Box key={ci}>
+                      <Text dimColor>{`  ${pad(cellPlain(h.tokens), labelWidth)}  `}</Text>
+                      <Text>{renderInline(row[ci]?.tokens ?? [])}</Text>
+                    </Box>
+                  ))}
+                </Box>
+                <Text dimColor>{divider}</Text>
+              </Box>
+            ))}
+          </Box>
+        );
+      }
+    }
+
+
+
+    case "hr": {
+      const hrWidth = Math.min((process.stdout.columns || 80) - 6, 60);
+      return (
+        <Box marginY={1}>
+          <Text dimColor>{"─".repeat(hrWidth)}</Text>
+        </Box>
+      );
+    }
+
+    case "space":
+      return null;
+
+    default:
+      // Unknown block types — show raw text if non-empty
+      if (token.raw?.trim()) {
+        return <Text>{token.raw}</Text>;
+      }
+      return null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// List items
+// ---------------------------------------------------------------------------
+
+function ListItem({
+  item,
+  prefix,
+}: {
+  item: Tokens.ListItem;
+  prefix: string;
+}) {
+  return (
+    <Box>
+      <Text dimColor>{prefix}</Text>
+      <Box flexDirection="column" flexShrink={1}>
+        {item.tokens.map((inner, j) => {
+          // In tight lists, unwrap paragraphs to avoid extra spacing
+          if (inner.type === "paragraph") {
+            const p = inner as Tokens.Paragraph;
+            return <Text key={j}>{renderInline(p.tokens)}</Text>;
+          }
+          // Tight list items use a bare "text" token instead of paragraph
+          if (inner.type === "text") {
+            const txt = inner as Tokens.Text;
+            if (txt.tokens && txt.tokens.length > 0) {
+              return <Text key={j}>{renderInline(txt.tokens)}</Text>;
+            }
+            return <Text key={j}>{txt.text}</Text>;
+          }
+          // Nested lists, code blocks, etc.
+          return <MarkdownBlock key={j} token={inner} />;
+        })}
+      </Box>
+    </Box>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline rendering
+// ---------------------------------------------------------------------------
+
+function renderInline(tokens: Token[]): ReactNode[] {
+  return tokens.map((token, i) => {
+    switch (token.type) {
+      case "text": {
+        const t = token as Tokens.Text;
+        if (t.tokens && t.tokens.length > 0) {
+          return <Text key={i}>{renderInline(t.tokens)}</Text>;
+        }
+        return t.text;
+      }
+
+      case "strong": {
+        const t = token as Tokens.Strong;
+        return (
+          <Text key={i} bold>
+            {renderInline(t.tokens)}
+          </Text>
+        );
+      }
+
+      case "em": {
+        const t = token as Tokens.Em;
+        return (
+          <Text key={i} italic>
+            {renderInline(t.tokens)}
+          </Text>
+        );
+      }
+
+      case "codespan": {
+        const t = token as Tokens.Codespan;
+        return <InlineCode key={i} text={t.text} />;
+      }
+
+      case "link": {
+        const t = token as Tokens.Link;
+        // Render link text only, as requested
+        return <Text key={i}>{renderInline(t.tokens)}</Text>;
+      }
+
+      case "br":
+        return "\n";
+
+      default:
+        return token.raw;
+    }
+  });
+}

package/tui/src/components/MessageRenderer.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from "react";
+import { Box } from "ink";
+import { lexer, type Token } from "marked";
+import { Markdown } from "./Markdown";
+import { StreamingCursor } from "./StreamingCursor";
+
+interface MessageRendererProps {
+  content: string;
+  streaming?: boolean;
+}
+
+/**
+ * Closes any unclosed code fence so marked.lexer() doesn't break
+ * while a message is still streaming.
+ *
+ * This is the only "healing" we do — marked handles incomplete
+ * bold, italic, lists, etc. gracefully on its own.
+ */
+function healMarkdown(text: string): string {
+  if (!text) return text;
+
+  const lines = text.split("\n");
+  let inFence = false;
+  let fenceChar = "";
+  let fenceLen = 0;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    if (!inFence) {
+      const match = trimmed.match(/^(`{3,}|~{3,})/);
+      if (match) {
+        inFence = true;
+        fenceChar = match[1]![0]!;
+        fenceLen = match[1]!.length;
+      }
+    } else {
+      // Closing fence: same char, at least same length, nothing else on the line
+      const closes = new RegExp(
+        `^${fenceChar}{${fenceLen},}\\s*$`,
+      ).test(trimmed);
+      if (closes) {
+        inFence = false;
+      }
+    }
+  }
+
+  // If we ended inside an open fence, close it
+  if (inFence) {
+    return text + "\n" + fenceChar.repeat(fenceLen);
+  }
+
+  return text;
+}
+
+export function MessageRenderer({ content, streaming }: MessageRendererProps) {
+  const tokens = useMemo((): Token[] => {
+    if (!content?.trim()) return [];
+
+    try {
+      const healed = healMarkdown(content);
+      return lexer(healed);
+    } catch {
+      // If marked fails for any reason, fall back to plain text
+      return [
+        {
+          type: "paragraph",
+          raw: content,
+          text: content,
+          tokens: [{ type: "text", raw: content, text: content }],
+        },
+      ] as Token[];
+    }
+  }, [content]);
+
+  if (tokens.length === 0) return null;
+
+  return (
+    <Box flexDirection="column">
+      <Markdown tokens={tokens} />
+      {streaming && <StreamingCursor />}
+    </Box>
+  );
+}

package/tui/src/components/PromptCard.tsx

@@ -0,0 +1,52 @@
+import { Box } from "ink";
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+
+const PLACEHOLDER_ROTATION_MS = 3500;
+const TYPEWRITER_FRAME_MS = 24;
+
+export interface PromptCardProps {
+  width: number;
+  examples: readonly string[];
+  children: (placeholder: string) => ReactNode;
+}
+
+export function PromptCard({ width, examples, children }: PromptCardProps) {
+  const placeholder = useRotatingPlaceholder(examples);
+
+  return (
+    <Box borderStyle="round" borderColor="gray" paddingX={1} width={width}>
+      {children(placeholder)}
+    </Box>
+  );
+}
+
+function useRotatingPlaceholder(examples: readonly string[]) {
+  const [index, setIndex] = useState(0);
+  const [visibleLength, setVisibleLength] = useState(0);
+  const example = examples[index] ?? "";
+
+  useEffect(() => {
+    if (examples.length < 2) return;
+
+    const interval = setInterval(() => {
+      setVisibleLength(0);
+      setIndex((current) => (current + 1) % examples.length);
+    }, PLACEHOLDER_ROTATION_MS);
+
+    return () => clearInterval(interval);
+  }, [examples]);
+
+  useEffect(() => {
+    if (visibleLength >= example.length) return;
+
+    const timer = setTimeout(
+      () => setVisibleLength((length) => length + 1),
+      TYPEWRITER_FRAME_MS,
+    );
+
+    return () => clearTimeout(timer);
+  }, [example, visibleLength]);
+
+  return example.slice(0, visibleLength);
+}

package/tui/src/components/StreamingCursor.tsx

@@ -0,0 +1,13 @@
+import { useState, useEffect } from "react";
+import { Text } from "ink";
+
+export function StreamingCursor() {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const id = setInterval(() => setVisible((v) => !v), 500);
+    return () => clearInterval(id);
+  }, []);
+
+  return <Text dimColor>{visible ? "▌" : " "}</Text>;
+}

package/tui/src/components/ThinkingIndicator.tsx

@@ -0,0 +1,14 @@
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+
+export function ThinkingIndicator() {
+  return (
+    <Box gap={1}>
+      <Text color="cyan">
+        <Spinner type="dots" />
+      </Text>
+
+      <Text color="gray">Thinking...</Text>
+    </Box>
+  );
+}

package/tui/src/components/ToolStatus.tsx

@@ -0,0 +1,26 @@
+import { Text } from "ink";
+import Spinner from "ink-spinner";
+
+interface ToolStatusProps {
+  status: "running" | "completed" | "failed";
+}
+
+export function ToolStatus({ status }: ToolStatusProps) {
+  if (status === "running") {
+    return (
+      <Text color="cyan">
+        <Spinner type="dots" /> Running
+      </Text>
+    );
+  }
+
+  if (status === "completed") {
+    return <Text color="green">✓ Completed</Text>;
+  }
+
+  if (status === "failed") {
+    return <Text color="red">✗ Failed</Text>;
+  }
+
+  return null;
+}

package/tui/src/header.tsx

@@ -0,0 +1,25 @@
+import { Box, Text } from "ink";
+
+interface HeaderProps {
+  branch: string;
+  provider: string;
+}
+
+export function Header({ branch, provider }: HeaderProps) {
+  return (
+    <Box justifyContent="space-between" width="100%">
+      <Box>
+        <Text bold color="cyan">
+          Woopcode
+        </Text>
+        <Text dimColor> / coding agent</Text>
+      </Box>
+
+      <Box>
+        <Text dimColor>{branch}</Text>
+        <Text dimColor> · </Text>
+        <Text color="cyan">{provider}</Text>
+      </Box>
+    </Box>
+  );
+}

package/tui/src/hooks/useBootAnimation.ts

@@ -0,0 +1,67 @@
+import { useState, useEffect } from "react";
+
+export type BootPhase = "logo" | "steps" | "launching" | "done";
+
+export interface BootAnimationState {
+  logoText: string;
+  loadingStep: number; // index of the currently-spinning step (-1 = none)
+  doneSteps: Set<number>;
+  phase: BootPhase;
+}
+
+const LOGO = "Woopcode";
+const STEPS = ["Runtime", "Provider", "Tool Registry", "Repository Context"];
+
+const LOGO_DURATION_MS = 600; // duration of LogoReveal animation
+const STEP_HOLD_MS = 180;     // how long spinner stays on a step before it completes
+const STEP_GAP_MS  = 220;     // gap between steps starting (must be > STEP_HOLD_MS)
+const LAUNCH_MS    = 350;     // "Launching..." shown for this long before onComplete
+
+export function useBootAnimation(onComplete: () => void): BootAnimationState {
+  const [logoText, setLogoText]     = useState("");
+  const [loadingStep, setLoadingStep] = useState(-1);
+  const [doneSteps, setDoneSteps]   = useState<Set<number>>(new Set());
+  const [phase, setPhase]           = useState<BootPhase>("logo");
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = [];
+    const t = (ms: number, fn: () => void) => {
+      const id = setTimeout(fn, ms);
+      timers.push(id);
+      return id;
+    };
+
+    // ── Logo reveal ───────────────────────────────────────────────────────
+    // LogoReveal component handles the animation, we just wait for it
+    const afterLogo = LOGO_DURATION_MS;
+
+    // ── Steps ─────────────────────────────────────────────────────────────
+    t(afterLogo, () => setPhase("steps"));
+
+    STEPS.forEach((_, i) => {
+      const stepStart = afterLogo + i * STEP_GAP_MS;
+      t(stepStart,              () => setLoadingStep(i));
+      t(stepStart + STEP_HOLD_MS, () => {
+        setDoneSteps((prev) => new Set(prev).add(i));
+        setLoadingStep(-1);
+      });
+    });
+
+    const afterSteps = afterLogo + STEPS.length * STEP_GAP_MS + STEP_HOLD_MS;
+
+    // ── Launching ─────────────────────────────────────────────────────────
+    t(afterSteps, () => setPhase("launching"));
+    t(afterSteps + LAUNCH_MS, () => {
+      setPhase("done");
+      onComplete();
+    });
+
+    return () => timers.forEach(clearTimeout);
+    // onComplete is stable (comes from useState setter reference in agent.tsx)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return { logoText, loadingStep, doneSteps, phase };
+}
+
+export { STEPS };

package/tui/src/hooks/useLogoAnimation.ts

@@ -0,0 +1,114 @@
+import { useState, useEffect, useRef } from "react";
+
+export type AnimationMode = "highlight" | "typewriter" | "scan";
+
+export interface LogoAnimationState {
+  /** The text that should be visible (for typewriter mode) */
+  visibleText: string;
+  /** Current position of the highlight/scan (0-1, normalized) */
+  highlightPosition: number;
+  /** Overall animation progress (0-1) */
+  progress: number;
+  /** Whether animation has completed */
+  isComplete: boolean;
+}
+
+interface UseLogoAnimationOptions {
+  text: string;
+  duration: number;
+  mode: AnimationMode;
+  onComplete?: () => void;
+}
+
+/**
+ * Custom animation hook for logo reveal effects.
+ * Uses interval-based timing for smooth animations in the terminal.
+ */
+export function useLogoAnimation({
+  text,
+  duration,
+  mode,
+  onComplete,
+}: UseLogoAnimationOptions): LogoAnimationState {
+  const [state, setState] = useState<LogoAnimationState>({
+    visibleText: mode === "typewriter" ? "" : text,
+    highlightPosition: 0,
+    progress: 0,
+    isComplete: false,
+  });
+
+  const startTimeRef = useRef<number>(Date.now());
+  const onCompleteCalledRef = useRef(false);
+
+  useEffect(() => {
+    startTimeRef.current = Date.now();
+    
+    // Use 16ms interval for ~60fps
+    const intervalId = setInterval(() => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Calculate state based on animation mode
+      const newState = calculateAnimationState(text, progress, mode);
+
+      setState(newState);
+
+      // Call onComplete exactly once when animation finishes
+      if (progress >= 1) {
+        if (!onCompleteCalledRef.current) {
+          onCompleteCalledRef.current = true;
+          onComplete?.();
+        }
+        clearInterval(intervalId);
+      }
+    }, 16);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [text, duration, mode, onComplete]);
+
+  return state;
+}
+
+/**
+ * Calculate animation state based on progress and mode
+ */
+function calculateAnimationState(
+  text: string,
+  progress: number,
+  mode: AnimationMode
+): LogoAnimationState {
+  const isComplete = progress >= 1;
+
+  switch (mode) {
+    case "typewriter": {
+      const numChars = Math.floor(progress * text.length);
+      return {
+        visibleText: text.slice(0, numChars + (isComplete ? text.length : 0)),
+        highlightPosition: progress,
+        progress,
+        isComplete,
+      };
+    }
+
+    case "scan":
+    case "highlight": {
+      // For highlight and scan, full text is visible, only position changes
+      return {
+        visibleText: text,
+        highlightPosition: progress,
+        progress,
+        isComplete,
+      };
+    }
+
+    default:
+      return {
+        visibleText: text,
+        highlightPosition: progress,
+        progress,
+        isComplete,
+      };
+  }
+}

package/tui/src/index.ts

@@ -0,0 +1,5 @@
+export { App } from "./app";
+export { store } from "./store/ui-store";
+export { LogoReveal } from "./components/LogoReveal";
+export type { LogoRevealProps } from "./components/LogoReveal";
+export type { AnimationMode } from "./hooks/useLogoAnimation";