woopcode 0.1.0

package/tui/src/prompt.tsx

@@ -0,0 +1,66 @@
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { useRef } from "react";
+import type { AgentController } from "../../commands/agentController";
+
+interface PromptProps {
+  controller: AgentController;
+  onExit: () => Promise<void>;
+  value: string;
+  placeholder?: string;
+  onValueChange: (value: string) => void;
+}
+
+export function Prompt({
+  controller,
+  onExit,
+  value,
+  placeholder,
+  onValueChange,
+}: PromptProps) {
+  const isExiting = useRef(false);
+
+  useInput((input, key) => {
+    if (!(key.ctrl && input.toLowerCase() === "c")) {
+      return;
+    }
+
+    if (controller.isBusy()) {
+      controller.cancel();
+      return;
+    }
+
+    if (!isExiting.current) {
+      isExiting.current = true;
+      void onExit();
+    }
+  });
+
+  async function handleSubmit(input: string) {
+    const prompt = input.trim();
+
+    if (!prompt || controller.isBusy()) {
+      return;
+    }
+    if (prompt === "/exit") {
+      await onExit();
+      return;
+    }
+
+    onValueChange("");
+    await controller.run(prompt);
+  }
+
+  return (
+    <Box>
+      <Text color="cyan">❯ </Text>
+      <TextInput
+        value={value}
+        placeholder={placeholder}
+        showCursor
+        onChange={onValueChange}
+        onSubmit={handleSubmit}
+      />
+    </Box>
+  );
+}

package/tui/src/statusBar.tsx

@@ -0,0 +1,83 @@
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { useUIStore } from "./store/useUIStore";
+
+// ─── Pure presentational component ───────────────────────────────────────────
+
+type StatusState = "ready" | "thinking" | "tool" | "error" | "cancelled";
+
+interface StatusBarProps {
+  status: StatusState;
+  message?: string;
+}
+
+export function StatusBar({ status, message }: StatusBarProps) {
+  return (
+    <Box gap={1}>
+      <StatusIcon status={status} />
+      <StatusLabel status={status} message={message} />
+    </Box>
+  );
+}
+
+function StatusIcon({ status }: { status: StatusState }) {
+  if (status === "thinking" || status === "tool") {
+    return (
+      <Text color="cyan">
+        <Spinner type="dots" />
+      </Text>
+    );
+  }
+  if (status === "ready") return <Text color="green">✓</Text>;
+  if (status === "error") return <Text color="red">✗</Text>;
+  // cancelled
+  return <Text dimColor>–</Text>;
+}
+
+function StatusLabel({
+  status,
+  message,
+}: {
+  status: StatusState;
+  message?: string;
+}) {
+  if (status === "ready") return <Text dimColor>Ready</Text>;
+  if (status === "error")
+    return <Text color="red">{message ?? "Error"}</Text>;
+  if (status === "cancelled")
+    return <Text dimColor>{message ?? "Cancelled"}</Text>;
+  // thinking or tool — animated, show message
+  return <Text color="cyan">{message}</Text>;
+}
+
+// ─── Connected wrapper (reads from store) ────────────────────────────────────
+
+export function ConnectedStatusBar() {
+  const { status } = useUIStore();
+  const { state, message } = parseStatus(status);
+  return <StatusBar status={state} message={message} />;
+}
+
+function parseStatus(raw: string): { state: StatusState; message?: string } {
+  const lower = raw.toLowerCase();
+
+  if (lower.includes("thinking")) {
+    return { state: "thinking", message: "Thinking…" };
+  }
+
+  if (lower.startsWith("running ")) {
+    // "Running read_file..." → message = "Running read_file"
+    return { state: "tool", message: raw.replace(/\.*$/, "") };
+  }
+
+  if (lower.startsWith("error")) {
+    const msg = raw.replace(/^error[:\s]*/i, "").trim();
+    return { state: "error", message: msg || "Something went wrong" };
+  }
+
+  if (lower.includes("cancelled")) {
+    return { state: "cancelled" };
+  }
+
+  return { state: "ready" };
+}

package/tui/src/store/ui-store.ts

@@ -0,0 +1,234 @@
+import type { Listener, PendingEdit, TimeLineItem, UIState } from "../types";
+import type { ToolCall } from "../../../config/types";
+
+export class UIStore {
+  private state: UIState = {
+    timeline: [],
+    status: "Ready",
+    isThinking: false,
+    pendingEdit: null,
+  };
+  private listeners: Set<Listener> = new Set();
+  private activeAssistantId: string | null = null;
+  private pendingEmit = false;
+  private editResolvers: Map<
+    string,
+    { resolve: (approved: boolean) => void; reject: (error: Error) => void }
+  > = new Map();
+
+  getState() {
+    return this.state;
+  }
+
+  subscribe(listener: Listener) {
+    this.listeners.add(listener);
+
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  private emit() {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  // Batches rapid successive emissions (e.g. streaming tokens) into a single
+  // render tick. Non-streaming callers use emit() directly so they stay instant.
+  private emitBatched() {
+    if (this.pendingEmit) return;
+    this.pendingEmit = true;
+    queueMicrotask(() => {
+      this.pendingEmit = false;
+      this.emit();
+    });
+  }
+
+  addUserMessage(content: string) {
+    this.state = {
+      ...this.state,
+      timeline: [
+        ...this.state.timeline,
+        {
+          id: crypto.randomUUID(),
+          type: "user",
+          content,
+        },
+      ],
+    };
+
+    this.emit();
+  }
+
+  startTool(tool: ToolCall) {
+    this.state = {
+      ...this.state,
+      timeline: [
+        ...this.state.timeline,
+        {
+          id: tool.id,
+          type: "tool",
+          name: tool.name,
+          arguments: tool.arguments,
+          status: "running",
+        },
+      ],
+    };
+
+    this.emit();
+  }
+
+  finishTool(id: string) {
+    const tool = this.state.timeline.find(
+      (item): item is Extract<TimeLineItem, { type: "tool" }> =>
+        item.type === "tool" && item.id === id,
+    );
+
+    if (!tool) return;
+
+    this.state = {
+      ...this.state,
+      timeline: this.state.timeline.map((item) =>
+        item.type === "tool" && item.id === id
+          ? {
+              ...item,
+              status: "completed",
+            }
+          : item,
+      ),
+    };
+
+    this.emit();
+  }
+
+  startAssistantMessage() {
+    const id = crypto.randomUUID();
+    this.activeAssistantId = id;
+
+    this.state = {
+      ...this.state,
+      timeline: [
+        ...this.state.timeline,
+        {
+          id,
+          type: "assistant",
+          content: "",
+          streaming: true,
+        },
+      ],
+    };
+
+    this.emit();
+  }
+
+  appendAssistantText(text: string) {
+    if (!this.activeAssistantId) {
+      this.startAssistantMessage();
+    }
+
+    // Mutate content in-place to avoid allocating a new array on every token.
+    // The state reference is still replaced so useSyncExternalStore detects the change.
+    const timeline = this.state.timeline;
+    const idx = timeline.findIndex(
+      (item) => item.type === "assistant" && item.id === this.activeAssistantId,
+    );
+    if (idx !== -1) {
+      const item = timeline[idx] as Extract<TimeLineItem, { type: "assistant" }>;
+      timeline[idx] = { ...item, content: item.content + text };
+    }
+    // Replace state reference so React sees a new snapshot
+    // Also clear isThinking — first token arrived
+    this.state = { ...this.state, timeline, isThinking: false };
+
+    this.emitBatched();
+  }
+
+  finishAssistantMessage() {
+    this.state = {
+      ...this.state,
+      timeline: this.state.timeline.map((item) =>
+        item.type === "assistant" && item.id === this.activeAssistantId
+          ? {
+              ...item,
+              streaming: false,
+            }
+          : item,
+      ),
+    };
+
+    this.activeAssistantId = null;
+
+    this.emit();
+  }
+
+  setStatus(status: string) {
+    const isThinking = status.toLowerCase().includes("thinking");
+    this.state = { ...this.state, status, isThinking };
+    this.emit();
+  }
+
+  // Pending Edit Management
+  setPendingEdit(edit: PendingEdit): Promise<boolean> {
+    this.state = {
+      ...this.state,
+      pendingEdit: edit,
+    };
+    this.emit();
+
+    return new Promise((resolve, reject) => {
+      this.editResolvers.set(edit.id, { resolve, reject });
+    });
+  }
+
+  approvePendingEdit() {
+    const edit = this.state.pendingEdit;
+    if (!edit) return;
+
+    const resolver = this.editResolvers.get(edit.id);
+    if (resolver) {
+      resolver.resolve(true);
+      this.editResolvers.delete(edit.id);
+    }
+
+    this.state = {
+      ...this.state,
+      pendingEdit: null,
+    };
+    this.emit();
+  }
+
+  rejectPendingEdit() {
+    const edit = this.state.pendingEdit;
+    if (!edit) return;
+
+    const resolver = this.editResolvers.get(edit.id);
+    if (resolver) {
+      resolver.resolve(false);
+      this.editResolvers.delete(edit.id);
+    }
+
+    this.state = {
+      ...this.state,
+      pendingEdit: null,
+    };
+    this.emit();
+  }
+
+  clearPendingEdit() {
+    const edit = this.state.pendingEdit;
+    if (!edit) return;
+
+    const resolver = this.editResolvers.get(edit.id);
+    if (resolver) {
+      resolver.reject(new Error("Edit cancelled"));
+      this.editResolvers.delete(edit.id);
+    }
+
+    this.state = {
+      ...this.state,
+      pendingEdit: null,
+    };
+    this.emit();
+  }
+}
+
+export const store = new UIStore();

package/tui/src/store/useUIStore.ts

@@ -0,0 +1,9 @@
+import { useSyncExternalStore } from "react";
+import { store } from "./ui-store";
+
+export function useUIStore() {
+  return useSyncExternalStore(
+    store.subscribe.bind(store),
+    store.getState.bind(store),
+  );
+}

package/tui/src/timeline.tsx

@@ -0,0 +1,96 @@
+import { Box, Text } from "ink";
+import type { TimeLineItem } from "./types";
+import { MessageRenderer } from "./components/MessageRenderer";
+import { ToolStatus } from "./components/ToolStatus";
+import { ThinkingIndicator } from "./components/ThinkingIndicator";
+
+interface TimelineProps {
+  items: TimeLineItem[];
+  isThinking: boolean;
+}
+
+export function Timeline({ items, isThinking }: TimelineProps) {
+  return (
+    <Box flexDirection="column">
+      {items.map((item) => (
+        <TimelineItem key={item.id} item={item} />
+      ))}
+      {isThinking && <ThinkingIndicator />}
+    </Box>
+  );
+}
+
+function TimelineItem({ item }: { item: TimeLineItem }) {
+  switch (item.type) {
+    case "user":
+      return (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold dimColor>
+            You
+          </Text>
+          <Text>{item.content}</Text>
+        </Box>
+      );
+
+    case "assistant":
+      return (
+        <Box flexDirection="column" marginBottom={1}>
+          <Box>
+            <Text bold color="cyan">
+              Woopcode
+            </Text>
+            {item.streaming && <Text dimColor> · thinking</Text>}
+          </Box>
+          <Box paddingLeft={1}>
+            <MessageRenderer content={item.content} streaming={item.streaming} />
+          </Box>
+        </Box>
+      );
+
+    case "tool": {
+      const label = toolLabel(item.name);
+      const target = formatToolArgument(item.arguments);
+
+      return (
+        <Box flexDirection="column" marginBottom={1} paddingLeft={1}>
+          <Box gap={1}>
+            <Text bold color="#888888">{label}</Text>
+            {target && <Text>{target}</Text>}
+          </Box>
+          <ToolStatus status={item.status} />
+        </Box>
+      );
+    }
+  }
+}
+
+function formatToolArgument(arguments_: Record<string, unknown>) {
+  const value =
+    arguments_.path ??
+    arguments_.query ??
+    arguments_.pattern ??
+    Object.values(arguments_)[0];
+
+  if (value === undefined) {
+    return null;
+  }
+
+  return typeof value === "string" ? value : JSON.stringify(value);
+}
+
+function toolLabel(name: string): string {
+  const map: Record<string, string> = {
+    read_file: "READ",
+    write_file: "WRITE",
+    edit_file: "EDIT",
+    create_file: "CREATE",
+    delete_file: "DELETE",
+    run_command: "RUN",
+    execute_command: "RUN",
+    search: "SEARCH",
+    grep: "SEARCH",
+    list_directory: "LIST",
+    list_files: "LIST",
+  };
+  return map[name] ?? name.toUpperCase().replace(/_/g, " ");
+}

package/tui/src/types.ts

@@ -0,0 +1,40 @@
+export type TimeLineItem =
+  | {
+      id: string;
+      type: "user";
+      content: string;
+    }
+  | {
+      id: string;
+      type: "assistant";
+      content: string;
+      streaming: boolean;
+    }
+  | {
+      id: string;
+      type: "tool";
+      name: string;
+      arguments: Record<string, unknown>;
+      status: "running" | "completed";
+    };
+
+export interface PendingEdit {
+  id: string;
+  filePath: string;
+  oldContent: string;
+  newContent: string;
+  diff: string;
+  toolCallId: string;
+}
+
+export interface UIState {
+  timeline: TimeLineItem[];
+  status: string;
+  isThinking: boolean;
+  pendingEdit: PendingEdit | null;
+}
+
+export interface TimelineProps {
+  items: TimeLineItem[];
+}
+export type Listener = () => void;