prdforge-cli 0.1.1 → 0.2.0

package/src/ui/LeftPane.js

@@ -0,0 +1,215 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { theme } from "./theme.js";
+
+const TOTAL_STAGES = 8;
+
+function StageDots({ completedStages, stale }) {
+  const count = completedStages || 0;
+  return React.createElement(
+    Box,
+    { gap: 0 },
+    ...Array.from({ length: TOTAL_STAGES }, (_, i) => {
+      if (stale && i === count - 1)
+        return React.createElement(Text, { key: i, color: theme.warning }, "⚠");
+      if (i < count)
+        return React.createElement(Text, { key: i, color: theme.success }, "✓");
+      return React.createElement(Text, { key: i, color: theme.dim }, "●");
+    })
+  );
+}
+
+/**
+ * Left pane: scrollable, searchable project list.
+ *
+ * @param {{
+ *   projects: object[],
+ *   isFocused: boolean,
+ *   height: number,
+ *   onOpenPreview: (project) => void,
+ *   onEnterRepl:   (project) => void,
+ *   onNewProject:  () => void,
+ *   onDelete:      (project) => void,
+ *   onExport:      (project) => void,
+ * }} props
+ */
+export function LeftPane({
+  projects = [],
+  isFocused,
+  height = 20,
+  onOpenPreview,
+  onEnterRepl,
+  onNewProject,
+  onDelete,
+  onExport,
+}) {
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [searching, setSearching]     = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+
+  const filtered = searchQuery.trim()
+    ? projects.filter((p) =>
+        (p.name ?? "").toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : projects;
+
+  // Clamp selectedIdx when filtered list changes
+  useEffect(() => {
+    setSelectedIdx((i) => Math.min(i, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+
+  // Chrome: search bar (1) + header (1) + footer hint (1)
+  const CHROME = 3;
+  const visibleRows = Math.max(1, height - CHROME);
+
+  // Keep selected item centered in visible window
+  const offset = Math.min(
+    Math.max(0, selectedIdx - Math.floor(visibleRows / 2)),
+    Math.max(0, filtered.length - visibleRows)
+  );
+  const visible = filtered.slice(offset, offset + visibleRows);
+  const remaining = Math.max(0, filtered.length - offset - visibleRows);
+
+  useInput(
+    (input, key) => {
+      if (deleteConfirm) {
+        if (input === "y") {
+          setDeleteConfirm(false);
+          if (filtered[selectedIdx]) onDelete?.(filtered[selectedIdx]);
+        } else {
+          setDeleteConfirm(false);
+        }
+        return;
+      }
+
+      if (searching) {
+        if (key.escape) { setSearching(false); setSearchQuery(""); }
+        return; // TextInput handles chars
+      }
+
+      if (key.upArrow || input === "k") {
+        setSelectedIdx((i) => Math.max(0, i - 1));
+      }
+      if (key.downArrow || input === "j") {
+        setSelectedIdx((i) => Math.min(Math.max(0, filtered.length - 1), i + 1));
+      }
+      if (input === "/") {
+        setSearching(true);
+        setSearchQuery("");
+      }
+      if (key.return && filtered[selectedIdx]) {
+        onOpenPreview?.(filtered[selectedIdx]);
+      }
+      if (input === "e" && filtered[selectedIdx]) {
+        onEnterRepl?.(filtered[selectedIdx]);
+      }
+      if (input === "n") {
+        onNewProject?.();
+      }
+      if (input === "x" && filtered[selectedIdx]) {
+        onExport?.(filtered[selectedIdx]);
+      }
+      if (input === "d" && filtered[selectedIdx]) {
+        setDeleteConfirm(true);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const header = React.createElement(
+    Box,
+    { marginBottom: 0 },
+    React.createElement(Text, { color: theme.dim, bold: true }, " Projects"),
+    React.createElement(Text, { color: theme.dim }, ` (${projects.length})`)
+  );
+
+  const searchBar = searching
+    ? React.createElement(
+        Box,
+        { marginY: 0, paddingX: 1 },
+        React.createElement(Text, { color: theme.primary }, "/ "),
+        React.createElement(TextInput, {
+          value: searchQuery,
+          onChange: setSearchQuery,
+          placeholder: "search…",
+          focus: true,
+        })
+      )
+    : React.createElement(
+        Box,
+        { marginY: 0, paddingX: 1 },
+        React.createElement(Text, { color: theme.dim }, "/ search")
+      );
+
+  const rows = visible.map((p, visIdx) => {
+    const absIdx = offset + visIdx;
+    const isSelected = absIdx === selectedIdx;
+    const nameStr = (p.name || "(untitled)").padEnd(18).slice(0, 18);
+
+    return React.createElement(
+      Box,
+      { key: p.id, flexDirection: "column" },
+      React.createElement(
+        Box,
+        null,
+        React.createElement(
+          Text,
+          { color: isSelected ? theme.primary : theme.dim, bold: isSelected },
+          isSelected ? "❯ " : "  "
+        ),
+        React.createElement(
+          Text,
+          { color: isSelected ? theme.white : theme.dim, bold: isSelected },
+          nameStr + " "
+        ),
+        React.createElement(StageDots, {
+          completedStages: p.completed_stages,
+          stale: p.has_stale_stages,
+        })
+      ),
+      isSelected && deleteConfirm
+        ? React.createElement(
+            Box,
+            { paddingLeft: 2 },
+            React.createElement(Text, { color: theme.error }, "Delete? "),
+            React.createElement(Text, { color: theme.dim }, "[y/N]")
+          )
+        : null
+    );
+  });
+
+  const scrollHint =
+    remaining > 0
+      ? React.createElement(
+          Box,
+          { paddingLeft: 2 },
+          React.createElement(Text, { color: theme.dim }, `↓ ${remaining} more`)
+        )
+      : null;
+
+  const footer = React.createElement(
+    Box,
+    { marginTop: 0, paddingX: 1 },
+    React.createElement(
+      Text,
+      { color: theme.dim },
+      isFocused
+        ? "e repl  /search  n new  x export  d delete"
+        : "Tab: focus"
+    )
+  );
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column", flexGrow: 0, borderStyle: "single", borderColor: isFocused ? theme.primary : theme.dim },
+    header,
+    searchBar,
+    ...rows,
+    scrollHint,
+    footer
+  );
+}

package/src/ui/PrdCreation.js

@@ -31,7 +31,7 @@ export function PrdCreation({ projectName, stages }) {
       React.createElement(
         Box,
         { key: i, marginLeft: 2, marginBottom: 0 },
-        React.createElement(StageIndicator, { label: stage.label, status: stage.status })
+        React.createElement(StageIndicator, { label: stage.label, status: stage.status, preview: stage.preview })
       )
     )
   );

package/src/ui/PreviewPanel.js

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { theme } from "./theme.js";
+
+/**
+ * Right pane: scrollable PRD section content for the selected project.
+ *
+ * @param {{
+ *   project: object | null,
+ *   isFocused: boolean,
+ *   height: number,
+ *   onEnterRepl: () => void,
+ * }} props
+ */
+export function PreviewPanel({ project, isFocused, height = 20, onEnterRepl }) {
+  const [lines, setLines]     = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError]     = useState(null);
+  const [offset, setOffset]   = useState(0);
+
+  useEffect(() => {
+    if (!project) { setLines([]); return; }
+    setLoading(true);
+    setError(null);
+    setOffset(0);
+
+    import("../api/client.js").then(({ prd }) =>
+      prd.getSections(project.id)
+    ).then((sections) => {
+      const all = [];
+      if (Array.isArray(sections)) {
+        for (const sec of sections) {
+          if (sec.section_type) {
+            all.push(`## ${sec.section_type}`);
+            all.push("");
+          }
+          if (sec.content) {
+            all.push(...sec.content.split("\n"));
+            all.push("");
+          }
+        }
+      }
+      setLines(all.length ? all : ["(no content yet)"]);
+    }).catch((e) => {
+      setError(e.message ?? "Failed to load PRD");
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [project?.id]);
+
+  const CHROME = 3; // header + footer
+  const visibleRows = Math.max(1, height - CHROME);
+  const maxOffset = Math.max(0, lines.length - visibleRows);
+  const visible = lines.slice(offset, offset + visibleRows);
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow || input === "k") {
+        setOffset((o) => Math.max(0, o - 1));
+      }
+      if (key.downArrow || input === "j") {
+        setOffset((o) => Math.min(maxOffset, o + 1));
+      }
+      if (input === "e" && project) {
+        onEnterRepl?.();
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const header = React.createElement(
+    Box,
+    { paddingX: 1 },
+    React.createElement(
+      Text,
+      { bold: true, color: theme.primary },
+      project ? project.name ?? "(untitled)" : "Select a project"
+    ),
+    project
+      ? React.createElement(Text, { color: theme.dim }, "  PRD Preview")
+      : null
+  );
+
+  let content;
+  if (loading) {
+    content = React.createElement(
+      Box,
+      { paddingX: 1, flexGrow: 1 },
+      React.createElement(Text, { color: theme.dim }, "Loading…")
+    );
+  } else if (error) {
+    content = React.createElement(
+      Box,
+      { paddingX: 1, flexGrow: 1 },
+      React.createElement(Text, { color: theme.error }, error)
+    );
+  } else if (!project) {
+    content = React.createElement(
+      Box,
+      { paddingX: 1, flexGrow: 1 },
+      React.createElement(Text, { color: theme.dim }, "↑↓ navigate   Enter select   e open REPL")
+    );
+  } else {
+    const rows = visible.map((line, i) =>
+      React.createElement(
+        Box,
+        { key: i, paddingX: 1 },
+        React.createElement(
+          Text,
+          {
+            color: line.startsWith("##")
+              ? theme.primary
+              : line.startsWith("#")
+              ? theme.white
+              : theme.dim,
+            bold: line.startsWith("#"),
+          },
+          line || " "
+        )
+      )
+    );
+    content = React.createElement(Box, { flexDirection: "column", flexGrow: 1 }, ...rows);
+  }
+
+  const scrollInfo = lines.length > visibleRows
+    ? `${offset + 1}-${Math.min(offset + visibleRows, lines.length)}/${lines.length} lines`
+    : "";
+
+  const footer = React.createElement(
+    Box,
+    { paddingX: 1 },
+    React.createElement(
+      Text,
+      { color: theme.dim },
+      isFocused
+        ? `↑↓ scroll   e edit in REPL   Tab: left pane${scrollInfo ? "   " + scrollInfo : ""}`
+        : "Tab: focus"
+    )
+  );
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderColor: isFocused ? theme.accent : theme.dim },
+    header,
+    content,
+    footer
+  );
+}