prdforge-cli 0.1.0 → 0.2.0

package/src/ui/REPLDashboard.js

@@ -0,0 +1,418 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Box, Text, useInput, useApp } from "ink";
+import TextInput from "ink-text-input";
+import { LeftPane } from "./LeftPane.js";
+import { RightPane } from "./RightPane.js";
+import { PrdCreation, buildStages, setStageStatus, markAllDone } from "./PrdCreation.js";
+import { theme } from "./theme.js";
+import { useTerminalSize } from "../hooks/useTerminalSize.js";
+import { useStream } from "../hooks/useStream.js";
+
+const FALLBACK_MODELS = [
+  { model_id: null, name: "Default", is_free_tier: true, credit_cost: 4 },
+  { model_id: "standard", name: "Standard", is_free_tier: true, credit_cost: 4 },
+  { model_id: "premium", name: "Premium", is_free_tier: false, credit_cost: 8 },
+];
+
+// ── Compose form (new project) ────────────────────────────────────────────────
+
+function ComposeForm({ onSubmit, onCancel, modelList, modelIdx, onTabModel }) {
+  const [step, setStep] = useState("name"); // "name" | "prompt"
+  const [projectName, setProjectName] = useState("");
+  const [promptText, setPromptText] = useState("");
+  const model = modelList[modelIdx];
+
+  useInput((input, key) => {
+    if (key.escape) { onCancel?.(); return; }
+    if (key.tab) { onTabModel?.(); return; }
+    if (key.return) {
+      if (step === "name" && projectName.trim()) {
+        setStep("prompt");
+      } else if (step === "prompt" && promptText.trim()) {
+        onSubmit?.({ name: projectName.trim(), prompt: promptText.trim(), modelId: model?.model_id ?? null });
+      }
+    }
+  });
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column", paddingX: 1, paddingY: 1 },
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, { bold: true, color: theme.primary }, "✦ New PRD"),
+      React.createElement(Text, { color: theme.dim }, "  Esc to cancel")
+    ),
+
+    // Step 1: project name
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, { color: step === "name" ? theme.white : theme.dim }, "Project name: "),
+      step === "name"
+        ? React.createElement(TextInput, {
+            value: projectName,
+            onChange: setProjectName,
+            placeholder: "e.g. TaskFlow",
+            focus: true,
+          })
+        : React.createElement(Text, { color: theme.success }, projectName)
+    ),
+
+    // Step 2: prompt
+    step !== "name"
+      ? React.createElement(
+          Box,
+          { marginBottom: 1 },
+          React.createElement(Text, { color: theme.white }, "Describe your product: "),
+          React.createElement(TextInput, {
+            value: promptText,
+            onChange: setPromptText,
+            placeholder: "A task management tool for remote teams…",
+            focus: step === "prompt",
+          })
+        )
+      : null,
+
+    // Model pill
+    React.createElement(
+      Box,
+      { marginTop: 1 },
+      React.createElement(Text, { color: theme.dim }, "Model: "),
+      React.createElement(Text, { color: theme.accent }, model?.name ?? "Default"),
+      React.createElement(Text, { color: theme.dim }, "  Tab to cycle")
+    )
+  );
+}
+
+// ── REPLDashboard ─────────────────────────────────────────────────────────────
+
+/**
+ * Root TUI component replacing the original Dashboard.
+ * Provides: two-pane layout, SSE streaming generation, REPL loop.
+ */
+export function REPLDashboard() {
+  const { exit } = useApp();
+  const { columns, rows } = useTerminalSize();
+  const isTwoPaneCapable = columns >= 80;
+
+  // ── Data state ──────────────────────────────────────────────────────────────
+  const [projects, setProjects]   = useState([]);
+  const [userInfo, setUserInfo]   = useState(null);
+  const [modelList, setModelList] = useState(FALLBACK_MODELS);
+  const [loading, setLoading]     = useState(true);
+  const [statusMsg, setStatusMsg] = useState(null);
+
+  // ── UI state ────────────────────────────────────────────────────────────────
+  const [panelMode, setPanelMode]       = useState("preview"); // "preview"|"repl"|"compose"|"creating"
+  const [activeProject, setActiveProject] = useState(null);
+  const [leftFocused, setLeftFocused]   = useState(true);
+  const [narrowPane, setNarrowPane]     = useState("left");  // "left"|"right" for < 80 col
+  const [modelIdx, setModelIdx]         = useState(0);
+
+  // ── Streaming state (REPL + creation) ───────────────────────────────────────
+  const { stages, setStages, messages, setMessages, isStreaming, error, startStream, abort } = useStream();
+
+  // Creation streaming state (separate from REPL)
+  const [creatingName, setCreatingName]   = useState(null);
+  const [creationStages, setCreationStages] = useState([]);
+
+  // ── Load data ───────────────────────────────────────────────────────────────
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    setStatusMsg(null);
+    try {
+      const { projects: api, user, models } = await import("../api/client.js");
+      const [projs, info, mods] = await Promise.all([
+        api.list(),
+        user.validate(),
+        models.list(),
+      ]);
+      setProjects(Array.isArray(projs) ? projs : []);
+      setUserInfo(info);
+      if (Array.isArray(mods) && mods.length > 0) setModelList(mods);
+    } catch (err) {
+      setStatusMsg(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { loadData(); }, []);
+
+  // ── Global keyboard ─────────────────────────────────────────────────────────
+
+  useInput((input, key) => {
+    if (loading || panelMode === "compose" || panelMode === "creating") return;
+
+    // q or Esc at top level exits
+    if ((input === "q" || key.escape) && !isStreaming && panelMode !== "repl") {
+      exit();
+      return;
+    }
+
+    // Tab: switch pane focus (two-pane) or toggle narrow pane
+    if (key.tab) {
+      if (isTwoPaneCapable) {
+        setLeftFocused((f) => !f);
+      } else {
+        setNarrowPane((p) => (p === "left" ? "right" : "left"));
+      }
+      return;
+    }
+  });
+
+  // ── Callbacks ───────────────────────────────────────────────────────────────
+
+  const handleOpenPreview = useCallback((project) => {
+    setActiveProject(project);
+    setPanelMode("preview");
+    if (isTwoPaneCapable) setLeftFocused(false);
+    else setNarrowPane("right");
+  }, [isTwoPaneCapable]);
+
+  const handleEnterRepl = useCallback((project) => {
+    setActiveProject(project);
+    setMessages([]);
+    setStages([]);
+    setPanelMode("repl");
+    if (isTwoPaneCapable) setLeftFocused(false);
+    else setNarrowPane("right");
+  }, [isTwoPaneCapable, setMessages, setStages]);
+
+  const handleExitRepl = useCallback(() => {
+    if (isStreaming) return;
+    setPanelMode("preview");
+    setLeftFocused(true);
+    if (!isTwoPaneCapable) setNarrowPane("left");
+  }, [isStreaming, isTwoPaneCapable]);
+
+  const handleNewProject = useCallback(() => {
+    setPanelMode("compose");
+    if (isTwoPaneCapable) setLeftFocused(false);
+    else setNarrowPane("right");
+  }, [isTwoPaneCapable]);
+
+  const handleComposeCancel = useCallback(() => {
+    setPanelMode("preview");
+    setLeftFocused(true);
+    if (!isTwoPaneCapable) setNarrowPane("left");
+  }, [isTwoPaneCapable]);
+
+  const handleComposeSubmit = useCallback(async ({ name, prompt, modelId }) => {
+    const { projects: api, isAuthError } = await import("../api/client.js");
+    setPanelMode("creating");
+    setCreatingName(name);
+    const initStages = buildStages(theme.stages);
+    setCreationStages(initStages);
+
+    try {
+      const project = await api.create(name, prompt);
+      await startStream(
+        {
+          action: "generate_from_prompt",
+          project_id: project.id,
+          prompt,
+          ...(modelId ? { model_id: modelId } : {}),
+        },
+        { initialStages: theme.stages }
+      );
+      await loadData();
+      setActiveProject(project);
+      setPanelMode("preview");
+      setLeftFocused(true);
+    } catch (e) {
+      setStatusMsg(e.message);
+      setPanelMode("preview");
+    }
+  }, [startStream, loadData]);
+
+  const handleReplSubmit = useCallback((text) => {
+    if (!activeProject || isStreaming) return;
+    setMessages((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), role: "user", text, status: "done" },
+    ]);
+    startStream({
+      action: "smart_update",
+      project_id: activeProject.id,
+      prompt: text,
+      ...(modelList[modelIdx]?.model_id ? { model_id: modelList[modelIdx].model_id } : {}),
+    });
+  }, [activeProject, isStreaming, setMessages, startStream, modelList, modelIdx]);
+
+  const handleDelete = useCallback(async (project) => {
+    try {
+      const { projects: api } = await import("../api/client.js");
+      await api.delete(project.id);
+      if (activeProject?.id === project.id) {
+        setActiveProject(null);
+        setPanelMode("preview");
+      }
+      await loadData();
+    } catch (e) {
+      setStatusMsg(e.message);
+    }
+  }, [activeProject, loadData]);
+
+  const handleExport = useCallback(async (project) => {
+    try {
+      const { exports_ } = await import("../api/client.js");
+      const result = await exports_.export(project.id, "markdown");
+      if (result?.content) {
+        const filename = `${(project.name ?? "prd").replace(/\s+/g, "-").toLowerCase()}.md`;
+        const { writeFileSync } = await import("fs");
+        writeFileSync(filename, result.content, "utf8");
+        setStatusMsg(`Exported to ${filename}`);
+      }
+    } catch (e) {
+      setStatusMsg(e.message);
+    }
+  }, []);
+
+  // ── Header ──────────────────────────────────────────────────────────────────
+
+  const header = React.createElement(
+    Box,
+    { justifyContent: "space-between", paddingX: 1, marginBottom: 0 },
+    React.createElement(
+      Box,
+      { gap: 1 },
+      React.createElement(Text, { bold: true, color: theme.primary }, "PRDForge"),
+      React.createElement(Text, { color: theme.dim }, "v0.1.1")
+    ),
+    React.createElement(
+      Box,
+      { gap: 1 },
+      statusMsg
+        ? React.createElement(Text, { color: theme.warning }, statusMsg.slice(0, 40))
+        : userInfo
+        ? React.createElement(
+            Text,
+            { color: theme.dim },
+            [
+              userInfo.email,
+              userInfo.credits_used_this_month != null
+                ? `${userInfo.credits_used_this_month} cr`
+                : null,
+              userInfo.subscription,
+            ]
+              .filter(Boolean)
+              .join(" · ")
+          )
+        : loading
+        ? React.createElement(Text, { color: theme.dim }, "Loading…")
+        : null
+    )
+  );
+
+  // ── Content area ─────────────────────────────────────────────────────────────
+
+  const contentHeight = rows - 2; // minus header + narrow footer
+
+  let content;
+
+  if (panelMode === "compose") {
+    content = React.createElement(ComposeForm, {
+      onSubmit: handleComposeSubmit,
+      onCancel: handleComposeCancel,
+      modelList,
+      modelIdx,
+      onTabModel: () => setModelIdx((i) => (i + 1) % modelList.length),
+    });
+  } else if (panelMode === "creating") {
+    content = React.createElement(PrdCreation, {
+      projectName: creatingName ?? "New Project",
+      stages: stages.length > 0
+        ? stages
+        : buildStages(theme.stages),
+    });
+  } else if (isTwoPaneCapable) {
+    content = React.createElement(
+      Box,
+      { flexDirection: "row", flexGrow: 1 },
+      React.createElement(LeftPane, {
+        projects,
+        isFocused: leftFocused,
+        height: contentHeight,
+        onOpenPreview: handleOpenPreview,
+        onEnterRepl: handleEnterRepl,
+        onNewProject: handleNewProject,
+        onDelete: handleDelete,
+        onExport: handleExport,
+      }),
+      React.createElement(RightPane, {
+        mode: panelMode,
+        project: activeProject,
+        isFocused: !leftFocused,
+        height: contentHeight,
+        onEnterRepl: () => activeProject && handleEnterRepl(activeProject),
+        messages,
+        stages,
+        isStreaming,
+        modelList,
+        modelIdx,
+        onTabModel: () => setModelIdx((i) => (i + 1) % modelList.length),
+        onSubmit: handleReplSubmit,
+        onAbort: abort,
+        onExitRepl: handleExitRepl,
+      })
+    );
+  } else {
+    // Narrow: show one pane at a time
+    content = narrowPane === "left"
+      ? React.createElement(LeftPane, {
+          projects,
+          isFocused: true,
+          height: contentHeight,
+          onOpenPreview: handleOpenPreview,
+          onEnterRepl: handleEnterRepl,
+          onNewProject: handleNewProject,
+          onDelete: handleDelete,
+          onExport: handleExport,
+        })
+      : React.createElement(RightPane, {
+          mode: panelMode,
+          project: activeProject,
+          isFocused: true,
+          height: contentHeight,
+          onEnterRepl: () => activeProject && handleEnterRepl(activeProject),
+          messages,
+          stages,
+          isStreaming,
+          modelList,
+          modelIdx,
+          onTabModel: () => setModelIdx((i) => (i + 1) % modelList.length),
+          onSubmit: handleReplSubmit,
+          onAbort: abort,
+          onExitRepl: handleExitRepl,
+        });
+  }
+
+  // ── Footer ───────────────────────────────────────────────────────────────────
+
+  const footerHints = panelMode === "repl"
+    ? "In REPL — Esc exit · Ctrl+C abort"
+    : panelMode === "compose"
+    ? "Enter confirm · Esc cancel"
+    : panelMode === "creating"
+    ? "Generating PRD…"
+    : isTwoPaneCapable
+    ? "Tab switch pane · q quit"
+    : `[${narrowPane.toUpperCase()}] Tab switch pane · q quit`;
+
+  const footer = React.createElement(
+    Box,
+    { paddingX: 1, borderStyle: "single", borderColor: theme.dim, borderBottom: false, borderLeft: false, borderRight: false },
+    React.createElement(Text, { color: theme.dim }, footerHints)
+  );
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column", paddingTop: 0 },
+    header,
+    content,
+    footer
+  );
+}

package/src/ui/ReplPanel.js

@@ -0,0 +1,227 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { StageIndicator } from "./StageIndicator.js";
+import { theme } from "./theme.js";
+
+/**
+ * Right pane in REPL mode: conversation history + streaming stages + input bar.
+ *
+ * @param {{
+ *   project: object | null,
+ *   messages: Array<{ id: string, role: "user"|"ai"|"status", text: string, status: string }>,
+ *   stages: Array<{ label: string, status: string, preview?: string }>,
+ *   isStreaming: boolean,
+ *   isFocused: boolean,
+ *   height: number,
+ *   modelList: object[],
+ *   modelIdx: number,
+ *   onTabModel: () => void,
+ *   onSubmit: (text: string) => void,
+ *   onAbort: () => void,
+ *   onExit: () => void,
+ * }} props
+ */
+export function ReplPanel({
+  project,
+  messages = [],
+  stages = [],
+  isStreaming,
+  isFocused,
+  height = 20,
+  modelList = [],
+  modelIdx = 0,
+  onTabModel,
+  onSubmit,
+  onAbort,
+  onExit,
+}) {
+  const [inputText, setInputText] = useState("");
+  const [msgOffset, setMsgOffset] = useState(0);
+
+  const activeModel = modelList[modelIdx];
+
+  // Stages area height: 0 when not streaming generation, else stage count + 1 header
+  const showStages = isStreaming && stages.length > 0 &&
+    stages.some((s) => s.status === "streaming" || s.status === "done");
+  const stageAreaH = showStages ? Math.min(stages.length + 1, 6) : 0;
+
+  const INPUT_H   = 3; // input bar
+  const HEADER_H  = 2; // project title + divider
+  const FOOTER_H  = 1; // hints
+  const visibleMsgRows = Math.max(1, height - INPUT_H - HEADER_H - FOOTER_H - stageAreaH);
+
+  // Auto-scroll to bottom when messages change
+  useEffect(() => {
+    const maxOffset = Math.max(0, messages.length - visibleMsgRows);
+    setMsgOffset(maxOffset);
+  }, [messages.length, visibleMsgRows]);
+
+  const visibleMsgs = messages.slice(msgOffset, msgOffset + visibleMsgRows);
+
+  useInput(
+    (input, key) => {
+      if (key.escape && !isStreaming) {
+        onExit?.();
+        return;
+      }
+      if (key.ctrl && input === "c") {
+        if (isStreaming) { onAbort?.(); }
+        else { onExit?.(); }
+        return;
+      }
+      if (key.tab) {
+        onTabModel?.();
+        return;
+      }
+      if (key.upArrow) {
+        setMsgOffset((o) => Math.max(0, o - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setMsgOffset((o) =>
+          Math.min(Math.max(0, messages.length - visibleMsgRows), o + 1)
+        );
+        return;
+      }
+      if (key.return && inputText.trim() && !isStreaming) {
+        onSubmit?.(inputText.trim());
+        setInputText("");
+        return;
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const header = React.createElement(
+    Box,
+    { paddingX: 1, marginBottom: 0 },
+    React.createElement(Text, { bold: true, color: theme.primary }, project?.name ?? "REPL"),
+    React.createElement(Text, { color: theme.dim }, "  iterating with AI")
+  );
+
+  const msgRows = visibleMsgs.map((msg, i) => {
+    const isUser   = msg.role === "user";
+    const isStatus = msg.role === "status";
+    const isError  = msg.status === "error";
+    const isCurrent = msg.status === "streaming";
+
+    const prefix = isUser   ? "> "
+                 : isStatus ? "  "
+                 : "  ";
+    const color  = isUser   ? theme.primary
+                 : isStatus ? theme.success
+                 : isError  ? theme.error
+                 : theme.dim;
+
+    return React.createElement(
+      Box,
+      { key: msg.id ?? i, paddingX: 1 },
+      React.createElement(
+        Text,
+        { color },
+        prefix + msg.text + (isCurrent ? "█" : "")
+      )
+    );
+  });
+
+  const messageHistory = React.createElement(
+    Box,
+    { flexDirection: "column", flexGrow: 1 },
+    messages.length === 0
+      ? React.createElement(
+          Box,
+          { paddingX: 1, flexGrow: 1 },
+          React.createElement(
+            Text,
+            { color: theme.dim },
+            "Type an update below to iterate on this PRD with AI."
+          )
+        )
+      : React.createElement(Box, { flexDirection: "column" }, ...msgRows)
+  );
+
+  // Stage progress (only during initial generation streaming)
+  const stageArea = showStages
+    ? React.createElement(
+        Box,
+        { flexDirection: "column", paddingX: 1, marginY: 0 },
+        React.createElement(
+          Box,
+          { marginBottom: 0 },
+          React.createElement(Text, { color: theme.dim, bold: true }, "Generating stages")
+        ),
+        ...stages.slice(0, 5).map((s, i) =>
+          React.createElement(
+            Box,
+            { key: i, paddingLeft: 1 },
+            React.createElement(StageIndicator, {
+              label: s.label,
+              status: s.status,
+              preview: s.preview,
+            })
+          )
+        )
+      )
+    : null;
+
+  const modelPill = activeModel
+    ? React.createElement(
+        Text,
+        { color: theme.dim },
+        ` [${activeModel.name}]`
+      )
+    : null;
+
+  const inputBar = React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: isStreaming ? theme.dim : theme.accent,
+      paddingX: 1,
+      marginX: 1,
+    },
+    React.createElement(
+      Box,
+      { gap: 1 },
+      React.createElement(Text, { color: theme.accent, bold: true }, ">"),
+      React.createElement(TextInput, {
+        value: inputText,
+        onChange: setInputText,
+        placeholder: isStreaming ? "streaming…" : "update PRD or describe a change…",
+        focus: isFocused && !isStreaming,
+      }),
+      modelPill
+    )
+  );
+
+  const footer = React.createElement(
+    Box,
+    { paddingX: 1 },
+    React.createElement(
+      Text,
+      { color: theme.dim },
+      isStreaming
+        ? "Ctrl+C abort stream"
+        : "Enter submit   Tab model   Esc exit REPL"
+    )
+  );
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      flexGrow: 1,
+      borderStyle: "single",
+      borderColor: isFocused ? theme.accent : theme.dim,
+    },
+    header,
+    messageHistory,
+    stageArea,
+    inputBar,
+    footer
+  );
+}

package/src/ui/RightPane.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { PreviewPanel } from "./PreviewPanel.js";
+import { ReplPanel } from "./ReplPanel.js";
+
+/**
+ * Right pane router — switches between Preview and REPL modes.
+ *
+ * @param {{
+ *   mode: "preview" | "repl",
+ *   project: object | null,
+ *   isFocused: boolean,
+ *   height: number,
+ *   // Preview props
+ *   onEnterRepl: () => void,
+ *   // REPL props
+ *   messages: object[],
+ *   stages: object[],
+ *   isStreaming: boolean,
+ *   modelList: object[],
+ *   modelIdx: number,
+ *   onTabModel: () => void,
+ *   onSubmit: (text: string) => void,
+ *   onAbort: () => void,
+ *   onExitRepl: () => void,
+ * }} props
+ */
+export function RightPane({
+  mode = "preview",
+  project,
+  isFocused,
+  height,
+  onEnterRepl,
+  messages,
+  stages,
+  isStreaming,
+  modelList,
+  modelIdx,
+  onTabModel,
+  onSubmit,
+  onAbort,
+  onExitRepl,
+}) {
+  if (mode === "repl") {
+    return React.createElement(ReplPanel, {
+      project,
+      messages,
+      stages,
+      isStreaming,
+      isFocused,
+      height,
+      modelList,
+      modelIdx,
+      onTabModel,
+      onSubmit,
+      onAbort,
+      onExit: onExitRepl,
+    });
+  }
+
+  return React.createElement(PreviewPanel, {
+    project,
+    isFocused,
+    height,
+    onEnterRepl,
+  });
+}