@meshxdata/fops 0.0.1

package/src/ui/confirm.js

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { render, Box, Text, useInput } from "ink";
+
+const h = React.createElement;
+
+/**
+ * Select prompt component (arrow-key list picker like Claude Code)
+ */
+export function SelectPrompt({ message, options, onResult }) {
+  const [cursor, setCursor] = useState(0);
+  const [done, setDone] = useState(false);
+
+  useInput((ch, key) => {
+    if (done) return;
+
+    if (key.upArrow) {
+      setCursor((c) => (c <= 0 ? options.length - 1 : c - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setCursor((c) => (c >= options.length - 1 ? 0 : c + 1));
+      return;
+    }
+
+    if (key.return) {
+      setDone(true);
+      onResult(options[cursor]);
+      return;
+    }
+
+    if (key.escape || (key.ctrl && ch === "c")) {
+      setDone(true);
+      onResult(null);
+      return;
+    }
+  });
+
+  if (done) {
+    return h(Box, null,
+      h(Text, { color: "green" }, "? "),
+      h(Text, null, message + " "),
+      h(Text, { color: "cyan" }, options[cursor]?.label || "")
+    );
+  }
+
+  return h(Box, { flexDirection: "column" },
+    h(Box, null,
+      h(Text, { color: "green" }, "? "),
+      h(Text, { bold: true }, message)
+    ),
+    ...options.map((opt, i) =>
+      h(Box, { key: i },
+        h(Text, { color: i === cursor ? "cyan" : "gray" },
+          `  ${i === cursor ? "❯" : " "} ${opt.label}`
+        )
+      )
+    )
+  );
+}
+
+/**
+ * Show a select option picker.
+ * options: Array of { label, value } or strings
+ * Returns selected option's value, or null on escape.
+ */
+export async function selectOption(message, options) {
+  const normalized = options.map((o) =>
+    typeof o === "string" ? { label: o, value: o } : o
+  );
+
+  return new Promise((resolve) => {
+    let resolved = false;
+    const onResult = (selected) => {
+      if (resolved) return;
+      resolved = true;
+      clear();
+      unmount();
+      setTimeout(() => resolve(selected ? selected.value : null), 50);
+    };
+    const { unmount, clear } = render(
+      h(SelectPrompt, { message, options: normalized, onResult })
+    );
+  });
+}
+
+/**
+ * Show a confirm prompt (Yes/No picker).
+ * Returns true/false.
+ */
+export async function confirm(message, defaultValue = false) {
+  const options = defaultValue
+    ? [{ label: "Yes", value: true }, { label: "No", value: false }]
+    : [{ label: "No", value: false }, { label: "Yes", value: true }];
+
+  const result = await selectOption(message, options);
+  return result === null ? defaultValue : result;
+}

package/src/ui/index.js

@@ -0,0 +1,5 @@
+export { BANNER, QUOTES, renderBanner, getRandomQuote } from "./banner.js";
+export { ThinkingSpinner, renderSpinner, renderThinking, VERBS } from "./spinner.js";
+export { ResponseBox, renderResponse, StreamingResponse, renderStreaming } from "./streaming.js";
+export { InputBox, StandaloneInput, promptInput, clearInputHistory } from "./input.js";
+export { SelectPrompt, selectOption, confirm } from "./confirm.js";

package/src/ui/input.js

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from "react";
+import { render, Box, Text, useInput, useApp } from "ink";
+
+const h = React.createElement;
+
+/**
+ * Input box with history support
+ */
+export function InputBox({ onSubmit, onExit, history = [], placeholder = "Type a message..." }) {
+  const [input, setInput] = useState("");
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [cursorVisible, setCursorVisible] = useState(true);
+  const { exit } = useApp();
+
+  // Blinking cursor effect
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCursorVisible(v => !v);
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  useInput((ch, key) => {
+    if (key.return) {
+      if (input.trim()) {
+        onSubmit(input.trim());
+        setInput("");
+        setHistoryIndex(-1);
+      }
+      return;
+    }
+
+    if (key.escape || (key.ctrl && ch === "c")) {
+      if (onExit) onExit();
+      exit();
+      return;
+    }
+
+    if (key.upArrow) {
+      if (history.length > 0 && historyIndex < history.length - 1) {
+        const newIndex = historyIndex + 1;
+        setHistoryIndex(newIndex);
+        setInput(history[history.length - 1 - newIndex] || "");
+      }
+      return;
+    }
+
+    if (key.downArrow) {
+      if (historyIndex > 0) {
+        const newIndex = historyIndex - 1;
+        setHistoryIndex(newIndex);
+        setInput(history[history.length - 1 - newIndex] || "");
+      } else if (historyIndex === 0) {
+        setHistoryIndex(-1);
+        setInput("");
+      }
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setInput(input.slice(0, -1));
+      setHistoryIndex(-1);
+      return;
+    }
+
+    if (ch && !key.ctrl && !key.meta) {
+      setInput(input + ch);
+      setHistoryIndex(-1);
+    }
+  });
+
+  const cursor = cursorVisible ? "▋" : " ";
+  const displayText = input || "";
+
+  return h(Box, {
+    flexDirection: "column",
+    borderStyle: "round",
+    borderColor: "cyan",
+    paddingX: 1,
+    marginTop: 1,
+  },
+    h(Box, null,
+      h(Text, { color: "cyan", bold: true }, "❯ "),
+      h(Text, null, displayText),
+      h(Text, { color: "cyan" }, cursor)
+    ),
+    !input && h(Text, { dimColor: true }, placeholder)
+  );
+}
+
+// State for standalone input
+let inputState = { resolve: null, history: [] };
+
+export function StandaloneInput({ placeholder, onResult }) {
+  const [input, setInput] = useState("");
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [cursorVisible, setCursorVisible] = useState(true);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => setCursorVisible(v => !v), 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  useInput((ch, key) => {
+    if (done) return;
+
+    if (key.return && input.trim()) {
+      inputState.history.push(input.trim());
+      setDone(true);
+      onResult(input.trim());
+      return;
+    }
+
+    if (key.escape || (key.ctrl && ch === "c")) {
+      setDone(true);
+      onResult(null);
+      return;
+    }
+
+    if (key.upArrow && inputState.history.length > 0) {
+      if (historyIndex < inputState.history.length - 1) {
+        const idx = historyIndex + 1;
+        setHistoryIndex(idx);
+        setInput(inputState.history[inputState.history.length - 1 - idx] || "");
+      }
+      return;
+    }
+
+    if (key.downArrow) {
+      if (historyIndex > 0) {
+        const idx = historyIndex - 1;
+        setHistoryIndex(idx);
+        setInput(inputState.history[inputState.history.length - 1 - idx] || "");
+      } else if (historyIndex === 0) {
+        setHistoryIndex(-1);
+        setInput("");
+      }
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setInput(i => i.slice(0, -1));
+      setHistoryIndex(-1);
+      return;
+    }
+
+    if (ch && !key.ctrl && !key.meta) {
+      setInput(i => i + ch);
+      setHistoryIndex(-1);
+    }
+  });
+
+  return h(Box, {
+    flexDirection: "column",
+    borderStyle: "round",
+    borderColor: "cyan",
+    paddingX: 1,
+  },
+    h(Box, null,
+      h(Text, { color: "cyan", bold: true }, "❯ "),
+      h(Text, null, input),
+      h(Text, { color: "cyan" }, cursorVisible ? "▋" : " ")
+    ),
+    !input && placeholder && h(Text, { dimColor: true }, placeholder)
+  );
+}
+
+/**
+ * Prompt for input with history support
+ * Returns the input string or null if cancelled
+ */
+export async function promptInput(placeholder = "Type a message... (↑↓ history, esc to exit)") {
+  return new Promise((resolve) => {
+    let resolved = false;
+    let userInput = null;
+    const onResult = (result) => {
+      if (resolved) return;
+      resolved = true;
+      userInput = result;
+      clear();
+      unmount();
+      // Echo what user typed and reset terminal
+      process.stdout.write("\x1b[0m\n");
+      if (result) {
+        console.log("\x1b[36m❯\x1b[0m " + result + "\n");
+      }
+      setTimeout(() => resolve(result), 50);
+    };
+    const { unmount, clear } = render(h(StandaloneInput, { placeholder, onResult }));
+  });
+}
+
+/**
+ * Clear input history
+ */
+export function clearInputHistory() {
+  inputState.history = [];
+}

package/src/ui/spinner.js

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from "react";
+import { render, Box, Text } from "ink";
+import chalk from "chalk";
+
+const h = React.createElement;
+
+const SPARKLE_FRAMES = ["✻", "✼", "✻", "✦"];
+const SPARKLE_INTERVAL = 120;
+const INTENT_LINE = chalk.cyan("⏺") + chalk.gray(" Thinking...");
+
+// Claude-style verbs for the spinner
+export const VERBS = [
+  "Hacking the mainframe",
+  "Decrypting signals",
+  "Tracing packets",
+  "Scanning ports",
+  "Parsing logs",
+  "Interrogating containers",
+  "Brute-forcing a solution",
+  "Reverse engineering",
+  "Infiltrating the stack",
+  "Compiling intel",
+  "Sniffing traffic",
+  "Cracking the cipher",
+  "Exfiltrating data",
+  "Pivoting laterally",
+  "Enumerating services",
+];
+
+function getRandomVerb() {
+  return VERBS[Math.floor(Math.random() * VERBS.length)];
+}
+
+/**
+ * Spinner component with rotating verbs
+ */
+export function ThinkingSpinner({ message }) {
+  const [verb, setVerb] = useState(getRandomVerb());
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setVerb(getRandomVerb());
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % SPARKLE_FRAMES.length);
+    }, SPARKLE_INTERVAL);
+    return () => clearInterval(interval);
+  }, []);
+
+  return h(Box, { flexDirection: "column" },
+    h(Box, null,
+      h(Text, { color: "cyan" }, "⏺"),
+      h(Text, { color: "gray" }, " Thinking...")
+    ),
+    h(Box, null,
+      h(Text, { color: "magenta" }, SPARKLE_FRAMES[frame]),
+      h(Text, { color: "gray" }, ` ${message || `${verb}…`} `),
+      h(Text, { dimColor: true }, "(esc to interrupt)")
+    )
+  );
+}
+
+/**
+ * Render the thinking spinner
+ * Returns a function to update/stop it
+ */
+export function renderSpinner(message) {
+  const { rerender, unmount, clear } = render(
+    h(ThinkingSpinner, { message })
+  );
+
+  return {
+    update: (newMessage) => {
+      rerender(h(ThinkingSpinner, { message: newMessage }));
+    },
+    stop: () => {
+      clear();
+      unmount();
+      // Re-print intent line as static text so it persists after Ink clears
+      console.log(INTENT_LINE);
+    },
+  };
+}
+
+/**
+ * Thinking display component - shows what the agent is doing
+ */
+function ThinkingDisplay({ status, detail, content }) {
+  const [verb, setVerb] = useState(getRandomVerb());
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setVerb(getRandomVerb()), 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % SPARKLE_FRAMES.length);
+    }, SPARKLE_INTERVAL);
+    return () => clearInterval(interval);
+  }, []);
+
+  return h(Box, { flexDirection: "column" },
+    // Status line with spinner
+    h(Box, null,
+      h(Text, { color: "magenta" }, SPARKLE_FRAMES[frame]),
+      h(Text, { color: "yellow" }, ` ${status || verb}... `),
+      detail && h(Text, { dimColor: true }, detail)
+    ),
+    // Content preview (truncated)
+    content && h(Box, { marginTop: 1, marginLeft: 2 },
+      h(Text, { dimColor: true },
+        content.length > 100 ? content.slice(0, 100) + "..." : content
+      )
+    )
+  );
+}
+
+// State for thinking display
+let thinkingState = { status: "", detail: "", content: "", rerender: null };
+
+/**
+ * Render thinking display
+ * Returns controls to update status and content
+ */
+export function renderThinking() {
+  thinkingState = { status: "", detail: "", content: "" };
+
+  const update = () => {
+    if (thinkingState.rerender) {
+      thinkingState.rerender(h(ThinkingDisplay, {
+        status: thinkingState.status,
+        detail: thinkingState.detail,
+        content: thinkingState.content,
+      }));
+    }
+  };
+
+  const { rerender, unmount, clear } = render(
+    h(ThinkingDisplay, { status: "", detail: "", content: "" })
+  );
+  thinkingState.rerender = rerender;
+
+  return {
+    setStatus: (status, detail = "") => {
+      thinkingState.status = status;
+      thinkingState.detail = detail;
+      update();
+    },
+    setContent: (content) => {
+      thinkingState.content = content;
+      update();
+    },
+    appendContent: (text) => {
+      thinkingState.content += text;
+      update();
+    },
+    stop: () => {
+      clear();
+      unmount();
+      thinkingState.rerender = null;
+    },
+  };
+}

package/src/ui/spinner.test.js

@@ -0,0 +1,29 @@
+import { describe, it, expect } from "vitest";
+import { VERBS } from "./spinner.js";
+
+describe("ui/spinner", () => {
+  describe("VERBS", () => {
+    it("is a non-empty array of strings", () => {
+      expect(Array.isArray(VERBS)).toBe(true);
+      expect(VERBS.length).toBeGreaterThan(5);
+      for (const v of VERBS) {
+        expect(typeof v).toBe("string");
+        expect(v.length).toBeGreaterThan(0);
+      }
+    });
+
+    it("has no duplicates", () => {
+      const unique = new Set(VERBS);
+      expect(unique.size).toBe(VERBS.length);
+    });
+
+    it("contains hacker-themed verbs", () => {
+      const hasHacker = VERBS.some((v) =>
+        v.toLowerCase().includes("hack") ||
+        v.toLowerCase().includes("decrypt") ||
+        v.toLowerCase().includes("crack")
+      );
+      expect(hasHacker).toBe(true);
+    });
+  });
+});

package/src/ui/streaming.js

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from "react";
+import { render, Box, Text } from "ink";
+import { ThinkingSpinner } from "./spinner.js";
+
+const h = React.createElement;
+
+/**
+ * Response box component
+ */
+export function ResponseBox({ content, title = "Claude" }) {
+  return h(Box, {
+    flexDirection: "column",
+    borderStyle: "round",
+    borderColor: "gray",
+    paddingX: 1,
+    marginY: 1,
+  },
+    h(Box, { marginBottom: 1 },
+      h(Text, { bold: true, color: "cyan" }, title)
+    ),
+    h(Text, null, content)
+  );
+}
+
+/**
+ * Render a response in a box
+ */
+export function renderResponse(content, title) {
+  const { unmount, clear } = render(
+    h(ResponseBox, { content, title })
+  );
+
+  return {
+    stop: () => {
+      clear();
+      unmount();
+    },
+  };
+}
+
+// Global state for streaming (workaround for lack of refs in functional approach)
+let streamingState = { content: "", thinking: true, rerender: null };
+
+/**
+ * Streaming response component
+ */
+export function StreamingResponse({ title = "Claude" }) {
+  const [content, setContent] = useState(streamingState.content);
+  const [thinking, setThinking] = useState(streamingState.thinking);
+
+  useEffect(() => {
+    streamingState.setContent = setContent;
+    streamingState.setThinking = setThinking;
+  }, []);
+
+  if (thinking) {
+    return h(ThinkingSpinner, null);
+  }
+
+  if (!content) {
+    return null;
+  }
+
+  return h(Box, {
+    flexDirection: "column",
+    borderStyle: "round",
+    borderColor: "gray",
+    paddingX: 1,
+    marginTop: 1,
+  },
+    h(Box, { marginBottom: 1 },
+      h(Text, { bold: true, color: "cyan" }, title)
+    ),
+    h(Text, null, content)
+  );
+}
+
+/**
+ * Render streaming response
+ * Returns controls to append text and finish
+ */
+export function renderStreaming(title = "Claude") {
+  // Reset state
+  streamingState = { content: "", thinking: true, setContent: null, setThinking: null };
+
+  const { unmount, clear } = render(h(StreamingResponse, { title }));
+
+  return {
+    append: (text) => {
+      streamingState.content += text;
+      if (streamingState.setContent) {
+        streamingState.setContent(streamingState.content);
+      }
+    },
+    setThinking: (val) => {
+      streamingState.thinking = val;
+      if (streamingState.setThinking) {
+        streamingState.setThinking(val);
+      }
+    },
+    stop: () => {
+      clear();
+      unmount();
+    },
+  };
+}