projectinator 0.3.0 → 0.4.0

package/src/tui/Frame.tsx

@@ -1,142 +0,0 @@
-// The persistent app frame: content on top, a status bar pinned to the bottom
-// of the viewport on every screen — so the chrome stops jumping between phases.
-// (Phase 1 of the TUI redesign; header still lives inside each screen.)
-
-import React from "react";
-import { Box, Text } from "ink";
-import { C, useTermRows, useTermCols } from "./components.js";
-import { sessionCost } from "../session-cost.js";
-import { getPrefs } from "./config.js";
-
-function truncate(s: string, n: number): string {
-  return s.length > n ? s.slice(0, n - 1) + "…" : s;
-}
-
-/** A short, human label for the current phase — shown faintly in the status bar. */
-const PHASE_LABEL: Record<string, string> = {
-  setup: "Setup",
-  home: "Home",
-  assessing: "Reading your idea",
-  setCap: "Budget cap",
-  exportMenu: "Export",
-  filterEpic: "Filter",
-  rename: "Rename",
-  confirmDelete: "Delete",
-  saveTemplate: "Save template",
-  addAsset: "Add asset",
-  error: "Error",
-  projects: "Projects",
-  projectActions: "Project",
-  settings: "Settings",
-  bakeoff: "Bake-off",
-  idea: "New build",
-  change: "Change",
-  stack: "Stack",
-  intake: "Intake",
-  planMode: "Plan",
-  council: "Council",
-  approveEpics: "Epics",
-  planning: "Planning",
-  plan: "Plan",
-  board: "Plan board",
-  editBoard: "Edit board",
-  kanban: "Board",
-  building: "Building",
-  done: "Done",
-  preview: "Preview",
-  deployMenu: "Deploy",
-  deploying: "Deploying",
-  retro: "Retro",
-  burndown: "Burndown",
-  history: "History",
-};
-
-/** Slim top bar (OpenCode-style header): brand ▌ + project · phase on the left,
- *  a faint tagline on the right, with a subtle rule underneath. Full width. */
-export function TopBar({
-  projectName,
-  phase,
-}: {
-  projectName?: string;
-  phase?: string;
-}): React.ReactElement {
-  const cols = useTermCols();
-  const label = phase ? PHASE_LABEL[phase] ?? phase : undefined;
-  return (
-    <Box
-      width={cols}
-      borderStyle="single"
-      borderColor={C.borderSubtle}
-      borderBottom
-      borderTop={false}
-      borderLeft={false}
-      borderRight={false}
-      paddingX={1}
-      justifyContent="space-between"
-    >
-      <Box>
-        <Text color={C.accent} bold>▌ PROJECTINATOR</Text>
-        {projectName ? <Text color={C.textMuted}>{`   ${truncate(projectName, Math.max(12, Math.floor(cols * 0.4)))}`}</Text> : null}
-        {label ? <Text color={C.textSubtle}>{`   ·  ${label}`}</Text> : null}
-      </Box>
-      <Box><Text color={C.textSubtle}>your AI build team</Text></Box>
-    </Box>
-  );
-}
-
-/** Bottom status bar: a global shortcut hint on the left, session cost + budget
- *  cap on the right, with a subtle rule on top. Full width. */
-export function StatusBar(): React.ReactElement {
-  const cols = useTermCols();
-  const spent = sessionCost();
-  const cap = getPrefs().budgetCapUSD;
-  const overHalf = spent >= cap / 2;
-  return (
-    <Box
-      width={cols}
-      borderStyle="single"
-      borderColor={C.borderSubtle}
-      borderTop
-      borderBottom={false}
-      borderLeft={false}
-      borderRight={false}
-      paddingX={1}
-      justifyContent="space-between"
-    >
-      <Box>
-        <Text color={C.textSubtle}>q</Text>
-        <Text color={C.textSubtle}> quit</Text>
-      </Box>
-      <Box>
-        <Text color={C.textSubtle}>session </Text>
-        <Text color={overHalf ? C.warn : C.accent} bold>{`$${spent.toFixed(2)}`}</Text>
-        <Text color={C.textSubtle}>{`  ·  cap $${cap}`}</Text>
-      </Box>
-    </Box>
-  );
-}
-
-/** Wraps every screen in the persistent frame: slim top bar, the screen content
- *  (padded, growing to fill the viewport), and the status bar pinned at the
- *  bottom edge. Replaces the old per-screen boxed Header. */
-export function AppFrame({
-  children,
-  projectName,
-  phase,
-}: {
-  children: React.ReactNode;
-  projectName?: string;
-  phase?: string;
-}): React.ReactElement {
-  const rows = useTermRows();
-  return (
-    // Fixed height + overflow hidden so overly-tall content clips at the bottom
-    // instead of pushing the frame past the viewport (which would scroll the top
-    // bar off and unpin the status bar).
-    <Box flexDirection="column" height={rows} overflow="hidden">
-      <TopBar projectName={projectName} phase={phase} />
-      <Box flexGrow={1} flexDirection="column" paddingX={1} paddingTop={1} overflow="hidden">{children}</Box>
-      <StatusBar />
-    </Box>
-  );
-}

package/src/tui/Intake.tsx

@@ -1,111 +0,0 @@
-// Intake wizard — walks the PM's clarifying questions one at a time. Single-choice
-// questions use the menu; multi-choice use checkboxes. Every question offers
-// "Something else…" (free text) and can be skipped.
-
-import React, { useState } from "react";
-import { Box, Text } from "ink";
-import { MultiSelect } from "@inkjs/ui";
-import { C, Panel, Menu as SelectInput, KeyHint, TextField as TextInput } from "./components.js";
-import type { IntakeQuestion } from "../intake.js";
-
-const OTHER = "__other__";
-const SKIP = "__skip__";
-
-export interface Answer { question: string; answer: string }
-
-export function Intake({
-  questions,
-  onDone,
-  onCancel,
-}: {
-  questions: IntakeQuestion[];
-  onDone: (answers: Answer[]) => void;
-  onCancel: () => void;
-}): React.ReactElement {
-  const [i, setI] = useState(0);
-  const [answers, setAnswers] = useState<Answer[]>([]);
-  const [typingPrefix, setTypingPrefix] = useState<string | null>(null); // non-null = capturing free text
-  const [draft, setDraft] = useState("");
-
-  const q = questions[i]!;
-
-  const advance = (answer: string) => {
-    const next = [...answers, { question: q.question, answer }];
-    if (i + 1 < questions.length) {
-      setAnswers(next);
-      setI(i + 1);
-      setTypingPrefix(null);
-      setDraft("");
-    } else {
-      onDone(next);
-    }
-  };
-
-  const progress = `Question ${i + 1} of ${questions.length}`;
-
-  // free-text capture (from "Something else…")
-  if (typingPrefix !== null) {
-    return (
-      <Box flexDirection="column">
-        <Text color={C.dim}>{progress}</Text>
-        <Text bold wrap="truncate-end">{q.question}</Text>
-        <Box marginTop={1}>
-          <Text color={C.accent}>{"› "}</Text>
-          <TextInput
-            value={draft}
-            onChange={setDraft}
-            onSubmit={() => advance([typingPrefix, draft].filter((s) => s.trim()).join(", "))}
-          />
-        </Box>
-        <Box flexDirection="column" marginTop={1}>
-          <Text color={C.dim}>Type your answer.</Text>
-          <KeyHint hints={[{ keys: "Enter", label: "continue" }]} />
-        </Box>
-      </Box>
-    );
-  }
-
-  // multi-choice: checkboxes + then optional free text if "Something else…" picked
-  if (q.multi && q.options.length) {
-    return (
-      <Box flexDirection="column">
-        <Text color={C.textSubtle}>{progress}</Text>
-        <Panel title={q.question}>
-          <Text color={C.textMuted}>Pick any that apply.</Text>
-          <MultiSelect
-            options={[...q.options.map((o) => ({ label: o, value: o })), { label: "Something else…", value: OTHER }]}
-            onSubmit={(vals: string[]) => {
-              const picked = vals.filter((v) => v !== OTHER);
-              if (vals.includes(OTHER)) setTypingPrefix(picked.join(", "));
-              else advance(picked.join(", "));
-            }}
-          />
-          <Box marginTop={1}><KeyHint hints={[{ keys: "Space", label: "toggle" }, { keys: "Enter", label: "confirm" }]} /></Box>
-        </Panel>
-      </Box>
-    );
-  }
-
-  // single-choice (or free-text-only when no options)
-  const items = [
-    ...q.options.map((o) => ({ label: o, value: o })),
-    { label: "Something else…", value: OTHER },
-    { label: "Skip", value: SKIP },
-  ];
-  return (
-    <Box flexDirection="column">
-      <Text color={C.dim}>{progress}</Text>
-      <Panel title={q.question}>
-        <SelectInput
-          items={items}
-          onSelect={(it) => {
-            if (it.value === OTHER) setTypingPrefix("");
-            else if (it.value === SKIP) advance("");
-            else advance(it.value);
-          }}
-        />
-      </Panel>
-      <KeyHint hints={[{ keys: "Esc", label: "cancel & go back" }]} />
-    </Box>
-  );
-}

package/src/tui/Kanban.tsx

@@ -1,158 +0,0 @@
-// The Scrum board, as swimlanes. Rows = epics; columns = Backlog · Not Started ·
-// In Progress · Done. Used live (during a build) and as the default project view.
-
-import React from "react";
-import { Box, Text } from "ink";
-import Spinner from "ink-spinner";
-import { Badge } from "@inkjs/ui";
-import type { Capability } from "../types.js";
-import { C, ROLE_META } from "./components.js";
-
-export interface BoardTask {
-  id: string;
-  capability: Capability;
-  title: string;
-  epic?: string;
-  dependsOn?: string[];
-  status: "pending" | "running" | "done" | "failed" | "skipped";
-  cost?: number;
-  verdict?: "PASS" | "PASS*" | "FAIL";
-  /** The teammate (model) working this task, when known. */
-  assignee?: string;
-  /** Human annotation from the board editor. */
-  notes?: string;
-}
-
-type Col = "backlog" | "notStarted" | "inProgress" | "done";
-
-function columnOf(t: BoardTask, done: Set<string>): Col {
-  if (t.status === "done" || t.status === "skipped") return "done";
-  if (t.status === "running" || t.status === "failed") return "inProgress";
-  const ready = (t.dependsOn ?? []).every((d) => done.has(d));
-  return ready ? "notStarted" : "backlog";
-}
-
-const COLS: { key: Col; label: string; color: string }[] = [
-  { key: "backlog", label: "BACKLOG", color: C.dim },
-  { key: "notStarted", label: "NOT STARTED", color: "cyan" },
-  { key: "inProgress", label: "IN PROGRESS", color: C.accent },
-  { key: "done", label: "DONE", color: C.good },
-];
-
-/** Group tasks by epic, preserving first-seen order. */
-export function groupByEpic<T extends { epic?: string }>(tasks: T[]): { epic: string; tasks: T[] }[] {
-  const order: string[] = [];
-  const map = new Map<string, T[]>();
-  for (const t of tasks) {
-    const e = t.epic || "General";
-    if (!map.has(e)) {
-      map.set(e, []);
-      order.push(e);
-    }
-    map.get(e)!.push(t);
-  }
-  return order.map((epic) => ({ epic, tasks: map.get(epic)! }));
-}
-
-function Card({ t }: { t: BoardTask }): React.ReactElement {
-  const running = t.status === "running";
-  const failed = t.status === "failed";
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      <Box>
-        {running ? <Text color="cyan"><Spinner type="dots" /> </Text> : failed ? <Text color={C.bad}>✗ </Text> : null}
-        <Text>{ROLE_META[t.capability].emoji} </Text>
-        <Text color={C.dim}>{t.id} </Text>
-        <Text color={C.accent}>{t.capability}</Text>
-        {t.verdict ? <Text> <Badge color={t.verdict === "FAIL" ? "red" : t.verdict === "PASS*" ? "yellow" : "green"}>{t.verdict}</Badge></Text> : null}
-        {t.cost ? <Text color={C.dim}> ${t.cost.toFixed(2)}</Text> : null}
-      </Box>
-      <Text color={failed ? C.bad : C.text} wrap="truncate-end">{t.title}</Text>
-      {t.assignee ? <Text color={C.dim}>{t.assignee}</Text> : null}
-      {t.notes ? <Text color={C.dim} wrap="truncate-end">✎ {t.notes}</Text> : null}
-    </Box>
-  );
-}
-
-/** One-line card for the compact (live-build) board. */
-function MiniCard({ t }: { t: BoardTask }): React.ReactElement {
-  const running = t.status === "running";
-  return (
-    <Text wrap="truncate-end">
-      {running ? <Text color="cyan"><Spinner type="dots" /> </Text> : t.status === "failed" ? <Text color={C.bad}>✗ </Text> : <Text>{ROLE_META[t.capability].emoji} </Text>}
-      <Text color={C.dim}>{t.id} </Text>
-      <Text color={running ? "cyan" : C.text} wrap="truncate-end">{t.title}</Text>
-      {t.cost ? <Text color={C.dim}> ${t.cost.toFixed(2)}</Text> : null}
-    </Text>
-  );
-}
-
-/** Compact 4-column board (no epic swimlanes, one-line cards, per-column cap) —
- *  for the live build screen where height must fit the viewport. */
-export function Kanban({ tasks, compact, maxPerCol }: { tasks: BoardTask[]; compact?: boolean; maxPerCol?: number }): React.ReactElement {
-  const done = new Set(tasks.filter((t) => t.status === "done" || t.status === "skipped").map((t) => t.id));
-  const counts: Record<Col, number> = { backlog: 0, notStarted: 0, inProgress: 0, done: 0 };
-  for (const t of tasks) counts[columnOf(t, done)]++;
-
-  if (compact) {
-    const byCol: Record<Col, BoardTask[]> = { backlog: [], notStarted: [], inProgress: [], done: [] };
-    for (const t of tasks) byCol[columnOf(t, done)].push(t);
-    const cap = Math.max(2, maxPerCol ?? 6);
-    return (
-      <Box flexDirection="column">
-        <Box>
-          {COLS.map((col) => (
-            <Box key={col.key} flexBasis="25%" flexGrow={1} marginRight={1}>
-              <Text color={col.color} bold>{col.label} <Text color={C.dim}>{counts[col.key]}</Text></Text>
-            </Box>
-          ))}
-        </Box>
-        <Box marginTop={1}>
-          {COLS.map((col) => {
-            const list = byCol[col.key];
-            return (
-              <Box key={col.key} flexDirection="column" flexBasis="25%" flexGrow={1} marginRight={1}>
-                {list.length === 0 ? <Text color={C.dim}>·</Text> : null}
-                {list.slice(0, cap).map((t) => <MiniCard key={t.id} t={t} />)}
-                {list.length > cap ? <Text color={C.dim}>+{list.length - cap} more</Text> : null}
-              </Box>
-            );
-          })}
-        </Box>
-      </Box>
-    );
-  }
-
-  const lanes = groupByEpic(tasks);
-
-  return (
-    <Box flexDirection="column">
-      {/* column headers */}
-      <Box>
-        <Box width={12} />
-        {COLS.map((col) => (
-          <Box key={col.key} flexBasis="25%" flexGrow={1} marginRight={1}>
-            <Text color={col.color} bold>{col.label} <Text color={C.dim}>{counts[col.key]}</Text></Text>
-          </Box>
-        ))}
-      </Box>
-      {lanes.map((lane) => {
-        const byCol: Record<Col, BoardTask[]> = { backlog: [], notStarted: [], inProgress: [], done: [] };
-        for (const t of lane.tasks) byCol[columnOf(t, done)].push(t);
-        return (
-          <Box key={lane.epic} flexDirection="column" marginTop={1}>
-            <Text color={C.accent}>▊ {lane.epic}</Text>
-            <Box>
-              <Box width={12} />
-              {COLS.map((col) => (
-                <Box key={col.key} flexDirection="column" flexBasis="25%" flexGrow={1} marginRight={1}>
-                  {byCol[col.key].length === 0 ? <Text color={C.dim}>·</Text> : byCol[col.key].map((t) => <Card key={t.id} t={t} />)}
-                </Box>
-              ))}
-            </Box>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}