prdforge-cli 0.1.0

package/src/commands/watch.js

@@ -0,0 +1,65 @@
+import { Command } from "commander";
+import { writeFileSync, mkdirSync } from "fs";
+import { join, dirname } from "path";
+import { projects, exports_, isAuthError } from "../api/client.js";
+import { config } from "../utils/config.js";
+import { success, error, info, dim } from "../utils/output.js";
+
+const DEFAULT_INTERVAL_SEC = 30;
+const DEFAULT_OUTPUT = "PRD.md";
+
+export function watchCommand() {
+  const cmd = new Command("watch")
+    .description("Watch a PRD project and re-export markdown when it changes (live sync during development)")
+    .argument("<projectId>", "Project ID to watch")
+    .option("-o, --output <path>", "Output file path (default: PRD.md)", DEFAULT_OUTPUT)
+    .option("-i, --interval <seconds>", "Poll interval in seconds", String(DEFAULT_INTERVAL_SEC))
+    .action(async (projectId, opts) => {
+      const intervalSec = Math.max(5, parseInt(opts.interval, 10) || DEFAULT_INTERVAL_SEC);
+      const outputPath = opts.output || DEFAULT_OUTPUT;
+
+      let lastUpdatedAt = null;
+      let firstRun = true;
+
+      const exportOnce = async () => {
+        try {
+          const project = await projects.get(projectId);
+          const updatedAt = project?.updated_at ?? null;
+          if (firstRun) {
+            firstRun = false;
+            lastUpdatedAt = updatedAt;
+          } else if (updatedAt === lastUpdatedAt) {
+            return;
+          }
+          lastUpdatedAt = updatedAt;
+
+          const result = await exports_.export(projectId, "markdown");
+          const content =
+            result.content ?? result.data ?? (typeof result === "string" ? result : JSON.stringify(result, null, 2));
+          const fullPath = join(process.cwd(), outputPath);
+          mkdirSync(dirname(fullPath), { recursive: true });
+          writeFileSync(fullPath, content, "utf8");
+          success(`Exported to ${fullPath}`);
+          dim(`  Updated at: ${updatedAt ? new Date(updatedAt).toISOString() : "—"}`);
+        } catch (err) {
+          error(err.message);
+          if (isAuthError(err)) process.exit(2);
+          // Don't exit on transient errors; next poll will retry
+        }
+      };
+
+      info(`Watching project ${projectId.slice(0, 8)}… (every ${intervalSec}s). Press Ctrl+C to stop.`);
+      await exportOnce();
+      const timer = setInterval(exportOnce, intervalSec * 1000);
+
+      const shutdown = () => {
+        clearInterval(timer);
+        info("Stopped watching.");
+        process.exit(0);
+      };
+      process.on("SIGINT", shutdown);
+      process.on("SIGTERM", shutdown);
+    });
+
+  return cmd;
+}

package/src/commands/whoami.js

@@ -0,0 +1,24 @@
+import { Command } from "commander";
+import { user, isAuthError } from "../api/client.js";
+import { getEmail, requireApiKey } from "../utils/config.js";
+import { header, dim, error } from "../utils/output.js";
+
+export function whoamiCommand() {
+  return new Command("whoami")
+    .description("Show current authenticated user and usage")
+    .action(async () => {
+      requireApiKey();
+      try {
+        const data = await user.validate();
+        const email = getEmail() || data.email || "(unknown)";
+        header("Current User");
+        dim(`  Email:         ${email}`);
+        dim(`  User ID:       ${data.user_id}`);
+        dim(`  Subscription:  ${data.subscription}`);
+        dim(`  Credits used:  ${data.credits_used_this_month} this month`);
+      } catch (err) {
+        error(err.message);
+        process.exit(isAuthError(err) ? 2 : 1);
+      }
+    });
+}

package/src/index.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { authCommand } from "./commands/auth.js";
+import { prdCommand } from "./commands/prd.js";
+import { exportCommand } from "./commands/export.js";
+import { generateCommand } from "./commands/generate.js";
+import { configCommand } from "./commands/config.js";
+import { watchCommand } from "./commands/watch.js";
+import { mcpCommand } from "./commands/mcp.js";
+import { bulkCommand } from "./commands/bulk.js";
+import { whoamiCommand } from "./commands/whoami.js";
+import { creditsCommand } from "./commands/credits.js";
+import { dashboardCommand } from "./commands/dashboard.js";
+
+const LOGO = `
+\x1b[1m\x1b[36m  PRDForge CLI\x1b[0m  \x1b[2mv0.1.0\x1b[0m
+  \x1b[90mThe planning layer for AI-first development\x1b[0m
+`;
+
+const program = new Command();
+
+program
+  .name("prdforge")
+  .description("PRDForge CLI — generate, manage, and export PRDs from your terminal or AI agents")
+  .version("0.1.0", "-v, --version")
+  .addHelpText("beforeAll", LOGO)
+  .hook("preAction", async () => {
+    // Load .env from cwd if present
+    try {
+      const { config: dotenv } = await import("dotenv");
+      dotenv();
+    } catch {}
+  });
+
+program.addCommand(authCommand());
+program.addCommand(whoamiCommand());
+program.addCommand(creditsCommand());
+program.addCommand(dashboardCommand());
+program.addCommand(generateCommand());
+program.addCommand(prdCommand());
+program.addCommand(exportCommand(), { isDefault: false });
+program.addCommand(watchCommand());
+program.addCommand(mcpCommand());
+program.addCommand(bulkCommand());
+program.addCommand(configCommand());
+
+// Friendly help for unknown commands
+program.on("command:*", (cmds) => {
+  console.error(`\x1b[31m✖\x1b[0m Unknown command: ${cmds[0]}`);
+  console.log("Run \x1b[36mprdforge --help\x1b[0m for a list of commands.");
+  process.exit(1);
+});
+
+// When run with no arguments: open dashboard if authenticated, else show help
+if (process.argv.length === 2) {
+  const { getApiKey } = await import("./utils/config.js");
+  if (getApiKey()) {
+    const { dashboardCommand } = await import("./commands/dashboard.js");
+    await dashboardCommand().parseAsync([], { from: "user" });
+  } else {
+    program.help();
+  }
+}
+
+program.parseAsync(process.argv);

package/src/ui/Dashboard.js

@@ -0,0 +1,263 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput, useApp } from "ink";
+import { PromptBox } from "./PromptBox.js";
+import { theme } from "./theme.js";
+
+const TOTAL_STAGES = 8;
+
+// ── Stage dots row ────────────────────────────────────────────────────────────
+
+function StageDots({ completedStages, stale }) {
+  const count = completedStages || 0;
+  const dots = theme.stages.map((_, 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 }, "●");
+  });
+
+  return React.createElement(
+    Box,
+    { gap: 1 },
+    ...dots,
+    React.createElement(Text, { color: theme.dim }, `  ${count}/${TOTAL_STAGES}`)
+  );
+}
+
+// ── Dashboard ─────────────────────────────────────────────────────────────────
+
+/**
+ * Interactive dashboard TUI with two modes:
+ *   "browse"  — arrow-key navigate projects, n to enter compose
+ *   "compose" — type a prompt, Tab to cycle model, Enter to create
+ *
+ * On create: exits TUI and calls onCreateNew({ name, prompt, modelId }).
+ * On Enter (browse): exits and prints the project workspace URL.
+ */
+export function Dashboard({ onCreateNew } = {}) {
+  const { exit } = useApp();
+
+  // Data
+  const [projectList, setProjectList] = useState([]);
+  const [userInfo, setUserInfo]       = useState(null);
+  const [modelList, setModelList]     = useState([]);
+
+  // UI state
+  const [mode, setMode]           = useState("browse"); // "browse" | "compose"
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [loading, setLoading]     = useState(true);
+  const [statusMsg, setStatusMsg] = useState(null);
+
+  // Compose state
+  const [promptText, setPromptText] = useState("");
+  const [modelIdx, setModelIdx]     = useState(0);
+
+  // ── Load data ──────────────────────────────────────────────────────────────
+
+  async function loadData() {
+    setLoading(true);
+    setStatusMsg(null);
+    try {
+      const { projects, user, models } = await import("../api/client.js");
+      const [projs, info, mods] = await Promise.all([
+        projects.list(),
+        user.validate(),
+        models.list(),
+      ]);
+      setProjectList(Array.isArray(projs) ? projs : []);
+      setUserInfo(info);
+      setModelList(Array.isArray(mods) && mods.length > 0 ? mods : [
+        { model_id: null, name: "Default", is_free_tier: true, credit_cost: 4 },
+      ]);
+    } catch (err) {
+      setStatusMsg(`Error: ${err.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { loadData(); }, []);
+
+  // ── Keyboard handling ──────────────────────────────────────────────────────
+
+  useInput((input, key) => {
+    if (loading) return;
+
+    if (mode === "compose") {
+      if (key.escape) {
+        setMode("browse");
+        return;
+      }
+      if (key.tab) {
+        setModelIdx((i) => (i + 1) % modelList.length);
+        return;
+      }
+      if (key.return && promptText.trim()) {
+        const chosen = modelList[modelIdx];
+        exit();
+        if (typeof onCreateNew === "function") {
+          onCreateNew({
+            prompt: promptText.trim(),
+            modelId: chosen?.model_id ?? null,
+          });
+        }
+        return;
+      }
+      // All other keystrokes go to TextInput via onChange
+      return;
+    }
+
+    // browse mode
+    if (input === "q" || key.escape) { exit(); return; }
+    if (key.upArrow || input === "k") {
+      setSelectedIdx((i) => Math.max(0, i - 1));
+    }
+    if (key.downArrow || input === "j") {
+      setSelectedIdx((i) => Math.min(Math.max(0, projectList.length - 1), i + 1));
+    }
+    if (key.return && projectList[selectedIdx]) {
+      const p = projectList[selectedIdx];
+      exit();
+      process.stdout.write(`\nhttps://prdforge.netlify.app/workspace/${p.id}\n\n`);
+    }
+    if (input === "n" || input === "c") {
+      setMode("compose");
+    }
+    if (input === "r") {
+      loadData();
+    }
+  });
+
+  // ── Header ─────────────────────────────────────────────────────────────────
+
+  const headerRow = React.createElement(
+    Box,
+    { justifyContent: "space-between", marginBottom: 1 },
+    React.createElement(
+      Box,
+      { gap: 1 },
+      React.createElement(Text, { bold: true, color: theme.primary }, "PRDForge")
+    ),
+    userInfo
+      ? React.createElement(
+          Text,
+          { color: theme.dim },
+          [
+            userInfo.email,
+            userInfo.credits_used_this_month != null
+              ? `${userInfo.credits_used_this_month} credits used`
+              : null,
+            userInfo.subscription,
+          ]
+            .filter(Boolean)
+            .join("  ·  ")
+        )
+      : null
+  );
+
+  // ── Prompt box ─────────────────────────────────────────────────────────────
+
+  const promptBox = React.createElement(PromptBox, {
+    focused:    mode === "compose",
+    value:      promptText,
+    onChange:   setPromptText,
+    models:     modelList,
+    modelIdx,
+    onTabModel: () => setModelIdx((i) => (i + 1) % modelList.length),
+    onSubmit:   ({ prompt, modelId }) => {
+      exit();
+      if (typeof onCreateNew === "function") onCreateNew({ prompt, modelId });
+    },
+    onFocus:  () => setMode("compose"),
+    onCancel: () => setMode("browse"),
+  });
+
+  // ── Project list ───────────────────────────────────────────────────────────
+
+  let projectSection;
+  if (loading) {
+    projectSection = React.createElement(
+      Box,
+      { marginY: 1 },
+      React.createElement(Text, { color: theme.dim }, "Loading…")
+    );
+  } else if (statusMsg) {
+    projectSection = React.createElement(
+      Box,
+      { marginY: 1 },
+      React.createElement(Text, { color: theme.error }, statusMsg)
+    );
+  } else if (projectList.length === 0) {
+    projectSection = React.createElement(
+      Box,
+      { marginY: 1 },
+      React.createElement(Text, { color: theme.dim }, "No projects yet. Press "),
+      React.createElement(Text, { color: theme.primary, bold: true }, "n"),
+      React.createElement(Text, { color: theme.dim }, " above to create one.")
+    );
+  } else {
+    const rows = projectList.map((p, i) => {
+      const isSelected = i === selectedIdx && mode === "browse";
+      const nameStr = (p.name || "(untitled)").padEnd(34).slice(0, 34);
+      return React.createElement(
+        Box,
+        { key: p.id },
+        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(Text, { color: theme.dim }, "  "),
+        React.createElement(StageDots, {
+          completedStages: p.completed_stages,
+          stale: p.has_stale_stages,
+        })
+      );
+    });
+
+    projectSection = React.createElement(
+      Box,
+      { flexDirection: "column" },
+      React.createElement(
+        Box,
+        { marginBottom: 1 },
+        React.createElement(Text, { color: theme.dim, bold: true }, "  Your Projects"),
+        React.createElement(
+          Text,
+          { color: theme.dim },
+          `  (${projectList.length})`
+        )
+      ),
+      ...rows
+    );
+  }
+
+  // ── Footer ─────────────────────────────────────────────────────────────────
+
+  const footerHints = mode === "compose"
+    ? "Tab: cycle model   Enter: create   Esc: cancel"
+    : "n compose   ↑↓ navigate   Enter open   r refresh   q quit";
+
+  const footer = React.createElement(
+    Box,
+    { marginTop: 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", paddingX: 1, paddingTop: 1 },
+    headerRow,
+    promptBox,
+    projectSection,
+    footer
+  );
+}

package/src/ui/PrdCreation.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { StageIndicator } from "./StageIndicator.js";
+import { theme } from "./theme.js";
+
+/**
+ * Animated PRD creation progress view.
+ *
+ * @param {{ projectName: string, stages: Array<{ label: string, status: string }> }} props
+ */
+export function PrdCreation({ projectName, stages }) {
+  return React.createElement(
+    Box,
+    { flexDirection: "column", paddingX: 1, paddingY: 0 },
+
+    // Header
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(
+        Text,
+        { bold: true, color: theme.primary },
+        "Creating PRD"
+      ),
+      React.createElement(Text, { color: theme.dim }, "  "),
+      React.createElement(Text, { color: theme.white }, projectName)
+    ),
+
+    // Stage rows
+    ...stages.map((stage, i) =>
+      React.createElement(
+        Box,
+        { key: i, marginLeft: 2, marginBottom: 0 },
+        React.createElement(StageIndicator, { label: stage.label, status: stage.status })
+      )
+    )
+  );
+}
+
+/**
+ * Build the initial stages array (all pending).
+ * @param {string[]} labels
+ * @returns {Array<{ label: string, status: string }>}
+ */
+export function buildStages(labels) {
+  return labels.map((label) => ({ label, status: "pending" }));
+}
+
+/**
+ * Returns a new stages array with the given index set to the given status.
+ * @param {Array<{ label: string, status: string }>} stages
+ * @param {number} index
+ * @param {string} status
+ */
+export function setStageStatus(stages, index, status) {
+  return stages.map((s, i) => (i === index ? { ...s, status } : s));
+}
+
+/**
+ * Mark all remaining pending/active stages as done.
+ */
+export function markAllDone(stages) {
+  return stages.map((s) =>
+    s.status === "pending" || s.status === "active" ? { ...s, status: "done" } : s
+  );
+}

package/src/ui/PromptBox.js

@@ -0,0 +1,129 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { theme } from "./theme.js";
+
+/**
+ * Styled prompt box matching the main app's overview "Start with AI" section.
+ *
+ * Props:
+ *   focused      boolean   — whether text input is active
+ *   value        string    — current prompt text
+ *   onChange     fn        — called with new string as user types
+ *   models       Array     — [{ model_id, name, credit_cost, is_free_tier }]
+ *   modelIdx     number    — index into models array
+ *   onTabModel   fn        — called when Tab pressed to cycle model
+ *   onSubmit     fn        — called with { prompt, modelId } when Enter pressed
+ *   onFocus      fn        — called when user presses key to focus the box
+ *   onCancel     fn        — called when Esc pressed while focused
+ */
+export function PromptBox({
+  focused,
+  value,
+  onChange,
+  models,
+  modelIdx,
+  onTabModel,
+  onSubmit,
+  onFocus,
+  onCancel,
+}) {
+  const currentModel = models?.[modelIdx] ?? { name: "Default", credit_cost: 4 };
+  const creditCost   = (currentModel.credit_cost ?? 4) * 4; // 4 calls for full generation
+  const modelLabel   = currentModel.name;
+
+  // ── Title bar ───────────────────────────────────────────────────
+  const titleBar = React.createElement(
+    Box,
+    { justifyContent: "space-between" },
+    React.createElement(
+      Text,
+      { color: focused ? theme.primary : theme.dim, bold: focused },
+      focused ? "✦ Start with AI" : "✦ Start with AI"
+    ),
+    React.createElement(
+      Text,
+      { color: theme.dim },
+      focused
+        ? `~${creditCost} credits`
+        : "n to compose"
+    )
+  );
+
+  // ── Input area ──────────────────────────────────────────────────
+  let inputArea;
+  if (focused) {
+    inputArea = React.createElement(
+      Box,
+      { marginTop: 1, marginBottom: 1 },
+      React.createElement(TextInput, {
+        value,
+        onChange,
+        placeholder: "Describe your product idea (e.g. 'A Kanban app for remote teams with Slack integration')",
+        focus: true,
+      })
+    );
+  } else {
+    inputArea = React.createElement(
+      Box,
+      { marginTop: 1, marginBottom: 1 },
+      React.createElement(
+        Text,
+        { color: theme.dim },
+        value.length > 0
+          ? value.length > 72
+            ? value.slice(0, 69) + "…"
+            : value
+          : "Describe your product idea…"
+      )
+    );
+  }
+
+  // ── Model selector row ──────────────────────────────────────────
+  const modelRow = React.createElement(
+    Box,
+    { justifyContent: "space-between" },
+    // Model pill
+    React.createElement(
+      Box,
+      { gap: 1 },
+      React.createElement(
+        Text,
+        { color: focused ? theme.primary : theme.dim },
+        "◉"
+      ),
+      React.createElement(
+        Text,
+        { color: focused ? theme.white : theme.dim, bold: focused },
+        modelLabel
+      ),
+      currentModel.is_free_tier === false
+        ? React.createElement(Text, { color: theme.warning }, " ★")
+        : null,
+    ),
+    // Key hints
+    React.createElement(
+      Text,
+      { color: theme.dim },
+      focused
+        ? "Tab: model   Enter: create   Esc: cancel"
+        : ""
+    )
+  );
+
+  const borderColor = focused ? theme.primary : theme.dim;
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor,
+      paddingX: 1,
+      marginBottom: 1,
+    },
+    titleBar,
+    inputArea,
+    modelRow
+  );
+}

package/src/ui/StageIndicator.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Text } from "ink";
+import Spinner from "ink-spinner";
+import { theme } from "./theme.js";
+
+/**
+ * Renders a single stage row with a status indicator.
+ *
+ * @param {{ label: string, status: "pending"|"active"|"done"|"stale" }} props
+ */
+export function StageIndicator({ label, status }) {
+  if (status === "active") {
+    return React.createElement(
+      Text,
+      null,
+      React.createElement(Spinner, { type: "dots" }),
+      " ",
+      React.createElement(Text, { color: theme.white }, label)
+    );
+  }
+
+  const dot   = status === "done"  ? "✓"
+              : status === "stale" ? "⚠"
+              : "●";
+  const color = status === "done"  ? theme.success
+              : status === "stale" ? theme.warning
+              : theme.dim;
+
+  return React.createElement(
+    Text,
+    null,
+    React.createElement(Text, { color }, dot),
+    " ",
+    React.createElement(
+      Text,
+      { color: status === "pending" ? theme.dim : theme.white },
+      label
+    )
+  );
+}

package/src/ui/theme.js

@@ -0,0 +1,21 @@
+export const theme = {
+  // Terminal ANSI-safe hex colors matching the main app's dark-blue palette
+  primary: "#5B8DEF",   // bright blue
+  success: "#22C55E",   // green checkmark / done
+  warning: "#F97316",   // orange stale
+  error:   "#EF4444",   // red
+  dim:     "#6B7280",   // grey inactive
+  white:   "#F1F5F9",   // near-white text
+
+  // The 8 completion stages (overview + versions not counted)
+  stages: [
+    "Product Details",
+    "PRD Sections",
+    "Modules",
+    "Architecture",
+    "Dependencies",
+    "Guardrails",
+    "Tasks",
+    "Export",
+  ],
+};