schub 0.1.2 → 0.1.4

package/src/tui/App.tsx

@@ -0,0 +1,343 @@
+import { readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { basename, dirname, resolve } from "node:path";
+import { Box, Text, useInput, useStdout } from "ink";
+import React from "react";
+import packageJson from "../../package.json";
+import { findSchubRoot, listTasksForChange, TASK_STATUSES, type TaskInfo, trimTaskTitle } from "../features/tasks";
+import { copyToClipboard as copyToClipboardDefault } from "./clipboard";
+import PlanView from "./components/PlanView";
+import PreviewPage from "./components/PreviewPage";
+import ProposalDetailView from "./components/ProposalDetailView";
+import RoadmapView from "./components/RoadmapView";
+import StatusView from "./components/StatusView";
+
+type Mode = "status" | "plan" | "roadmap";
+
+type TabDefinition = {
+  id: Mode;
+  label: string;
+};
+
+type Shortcut = {
+  keyLabel: string;
+  label: string;
+};
+
+type PreviewState = {
+  fileName: string;
+  markdown: string;
+};
+
+type ProposalDetailState = {
+  changeId: string;
+  selection: number;
+};
+
+const tabs: TabDefinition[] = [
+  { id: "status", label: "Status" },
+  { id: "plan", label: "Plan" },
+  { id: "roadmap", label: "Roadmap" },
+];
+
+type AppProps = {
+  copyToClipboard?: (value: string) => void;
+  onImplement?: (taskId: string, repoRoot: string) => void;
+  startDir?: string;
+};
+
+const COPY_BANNER_TEXT = "Copied to clipboard !";
+const COPY_BANNER_TIMEOUT_MS = 1500;
+const OPEN_SHORTCUT: Shortcut = { keyLabel: "o", label: "preview" };
+const COPY_SHORTCUT: Shortcut = { keyLabel: "c", label: "copy id" };
+
+const compareText = (left: string, right: string) => left.localeCompare(right, undefined, { sensitivity: "base" });
+
+const sortDetailTasks = (tasks: TaskInfo[]) =>
+  [...tasks].sort((left, right) => {
+    const leftTitle = trimTaskTitle(left.title) || left.id;
+    const rightTitle = trimTaskTitle(right.title) || right.id;
+    const titleCompare = compareText(leftTitle, rightTitle);
+    if (titleCompare !== 0) {
+      return titleCompare;
+    }
+    return compareText(left.id, right.id);
+  });
+
+const buildDetailTasks = (tasks: TaskInfo[]) =>
+  TASK_STATUSES.flatMap((status) => sortDetailTasks(tasks.filter((task) => task.status === status)));
+
+export default function App({ copyToClipboard = copyToClipboardDefault, onImplement, startDir }: AppProps) {
+  const [mode, setMode] = React.useState<Mode>("status");
+  const { stdout } = useStdout();
+  const [dimensions, setDimensions] = React.useState(() => ({
+    columns: stdout.columns,
+    rows: stdout.rows,
+  }));
+  const [copyBanner, setCopyBanner] = React.useState<string | null>(null);
+  const [statusShortcuts, setStatusShortcuts] = React.useState<Shortcut[]>([]);
+  const [statusView, setStatusView] = React.useState<"main" | "show-all" | "show-all-tasks">("main");
+  const [preview, setPreview] = React.useState<PreviewState | null>(null);
+  const [proposalDetail, setProposalDetail] = React.useState<ProposalDetailState | null>(null);
+  const versionLabel = `${packageJson.version}`;
+  const homeDir = homedir();
+  const resolvedStartDir = startDir ?? process.env.SCHUB_CWD ?? process.cwd();
+  const schubDir = findSchubRoot(resolvedStartDir);
+  const displaySchubDir = (() => {
+    const targetDir = schubDir ?? resolvedStartDir;
+    if (targetDir === homeDir) {
+      return "~";
+    }
+    if (targetDir.startsWith(`${homeDir}/`)) {
+      return `~${targetDir.slice(homeDir.length)}`;
+    }
+    return targetDir;
+  })();
+  const repoRoot = schubDir ? dirname(schubDir) : "";
+  const isPreviewActive = Boolean(preview);
+  const isDetailActive = Boolean(proposalDetail);
+  const detailSelection = proposalDetail?.selection ?? 0;
+  const detailTasks =
+    proposalDetail && schubDir ? buildDetailTasks(listTasksForChange(schubDir, proposalDetail.changeId)) : [];
+  const selectedDetailTask = detailTasks[detailSelection] ?? null;
+  const detailShortcuts = isDetailActive && detailTasks.length > 0 ? [OPEN_SHORTCUT, COPY_SHORTCUT] : [];
+
+  React.useEffect(() => {
+    if (!copyBanner) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setCopyBanner(null);
+    }, COPY_BANNER_TIMEOUT_MS);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [copyBanner]);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setDimensions({ columns: stdout.columns, rows: stdout.rows });
+    };
+
+    stdout.on("resize", handleResize);
+
+    return () => {
+      stdout.off("resize", handleResize);
+    };
+  }, [stdout]);
+
+  const showTabs = !(mode === "status" && (statusView !== "main" || isPreviewActive || isDetailActive));
+  const showHeader = showTabs || Boolean(copyBanner);
+  const previewHeight = Math.max(10, dimensions.rows || 0);
+
+  useInput(
+    (_input, key) => {
+      if (key.tab) {
+        setMode((current) => {
+          const currentIndex = tabs.findIndex((tab) => tab.id === current);
+          const nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % tabs.length;
+          return tabs[nextIndex]?.id ?? "status";
+        });
+      }
+    },
+    { isActive: showTabs },
+  );
+
+  React.useEffect(() => {
+    if (mode !== "status") {
+      setStatusShortcuts([]);
+    }
+  }, [mode]);
+
+  const handleCopyId = (value: string) => {
+    copyToClipboard(value);
+    setCopyBanner(COPY_BANNER_TEXT);
+  };
+
+  const handleOpenPreview = (repoRoot: string, relativePath: string) => {
+    const targetPath = resolve(repoRoot, relativePath);
+    const markdown = readFileSync(targetPath, "utf8");
+    setPreview({ fileName: basename(relativePath), markdown });
+  };
+
+  const handleClosePreview = () => {
+    setPreview(null);
+  };
+
+  const handleOpenDetail = (changeId: string) => {
+    setProposalDetail({ changeId, selection: 0 });
+  };
+
+  const handleCloseDetail = () => {
+    setProposalDetail(null);
+  };
+
+  useInput(
+    (input, key) => {
+      const keyName = (key as { name?: string }).name;
+      const keySequence = (key as { sequence?: string }).sequence;
+      const isEscape = key.escape || keyName === "escape" || keySequence === "\u001B" || input === "\u001B";
+      const isDownArrow = key.downArrow || Boolean(keySequence?.includes("[B")) || input.includes("[B");
+      const isUpArrow = key.upArrow || Boolean(keySequence?.includes("[A")) || input.includes("[A");
+
+      if (isEscape) {
+        handleCloseDetail();
+        return;
+      }
+
+      if (detailTasks.length === 0) {
+        return;
+      }
+
+      if (isDownArrow) {
+        setProposalDetail((current) => {
+          if (!current) {
+            return current;
+          }
+          const nextSelection = Math.min(current.selection + 1, detailTasks.length - 1);
+          if (nextSelection === current.selection) {
+            return current;
+          }
+          return { ...current, selection: nextSelection };
+        });
+        return;
+      }
+
+      if (isUpArrow) {
+        setProposalDetail((current) => {
+          if (!current) {
+            return current;
+          }
+          const nextSelection = Math.max(0, current.selection - 1);
+          if (nextSelection === current.selection) {
+            return current;
+          }
+          return { ...current, selection: nextSelection };
+        });
+        return;
+      }
+
+      if (!selectedDetailTask) {
+        return;
+      }
+
+      if (input === "o") {
+        handleOpenPreview(repoRoot, selectedDetailTask.path);
+        return;
+      }
+
+      if (input === "c") {
+        handleCopyId(selectedDetailTask.id);
+      }
+    },
+    { isActive: isDetailActive && !isPreviewActive },
+  );
+
+  const shortcuts = mode === "status" && !isPreviewActive ? (isDetailActive ? detailShortcuts : statusShortcuts) : [];
+  const isStatusListActive = !isPreviewActive && !isDetailActive;
+  const isDetailVisible = isDetailActive && !isPreviewActive;
+
+  return (
+    <Box backgroundColor="black" flexDirection="column" width={dimensions.columns} height={dimensions.rows}>
+      {showHeader ? (
+        <Box flexDirection="column" paddingX={2} paddingY={1} flexShrink={0}>
+          <Box flexDirection="row" justifyContent={showTabs ? "space-between" : "flex-end"} alignItems="center">
+            {showTabs ? (
+              <Box flexDirection="row">
+                {tabs.map((tab) => {
+                  const isSelected = mode === tab.id;
+                  return (
+                    <Box
+                      key={tab.id}
+                      marginRight={4}
+                      borderStyle="bold"
+                      borderLeft={isSelected}
+                      borderTop={false}
+                      borderRight={false}
+                      borderBottom={false}
+                      borderLeftColor={"blueBright"}
+                      flexDirection="row"
+                      alignItems="center"
+                      paddingLeft={1}
+                    >
+                      <Text color={isSelected ? "white" : "gray"} bold={isSelected}>
+                        {tab.label}
+                      </Text>
+                    </Box>
+                  );
+                })}
+              </Box>
+            ) : null}
+            {copyBanner ? (
+              <Box backgroundColor="green" paddingX={1}>
+                <Text color="black">{copyBanner}</Text>
+              </Box>
+            ) : null}
+          </Box>
+        </Box>
+      ) : null}
+      <Box flexDirection="column" paddingX={2} paddingY={1} flexGrow={1} flexShrink={1}>
+        {mode === "status" ? (
+          <>
+            <Box display={isStatusListActive ? "flex" : "none"} flexDirection="column">
+              <StatusView
+                startDir={resolvedStartDir}
+                isActive={isStatusListActive}
+                onCopyId={handleCopyId}
+                onImplement={onImplement}
+                onOpen={handleOpenPreview}
+                onOpenDetail={handleOpenDetail}
+                onShortcutsChange={setStatusShortcuts}
+                onViewChange={setStatusView}
+              />
+            </Box>
+            {isDetailVisible && proposalDetail ? (
+              <ProposalDetailView
+                changeId={proposalDetail.changeId}
+                selection={detailSelection}
+                startDir={resolvedStartDir}
+              />
+            ) : null}
+            {isPreviewActive && preview ? (
+              <PreviewPage
+                fileName={preview.fileName}
+                markdown={preview.markdown}
+                height={previewHeight}
+                onClose={handleClosePreview}
+              />
+            ) : null}
+          </>
+        ) : mode === "plan" ? (
+          <PlanView startDir={resolvedStartDir} />
+        ) : (
+          <RoadmapView startDir={resolvedStartDir} />
+        )}
+      </Box>
+      <Box flexDirection="column" paddingX={2} paddingBottom={1} flexShrink={0}>
+        <Box justifyContent="space-between">
+          <Box flexDirection="row">
+            {shortcuts.map((shortcut) => (
+              <Box key={shortcut.keyLabel} marginRight={2}>
+                <Text color="gray">[</Text>
+                <Text color="white">{shortcut.keyLabel}</Text>
+                <Text color="gray"> {shortcut.label}]</Text>
+              </Box>
+            ))}
+          </Box>
+          {showTabs ? (
+            <Box>
+              <Text>tab</Text>
+              <Text color="gray"> switch mode</Text>
+            </Box>
+          ) : null}
+        </Box>
+        <Box justifyContent="space-between" marginTop={1}>
+          <Text color="gray">{displaySchubDir}</Text>
+          <Text color="gray">{versionLabel}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/PlanView.test.tsx

@@ -0,0 +1,101 @@
+import { afterEach, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, renameSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { render as inkRender } from "ink-testing-library";
+import PlanView from "./PlanView";
+
+const ansiPattern = new RegExp(`${String.fromCharCode(27)}[[0-9;]*m`, "g");
+const stripAnsi = (value: string) => value.replace(ansiPattern, "");
+
+const renders: Array<() => void> = [];
+const render = (...args: Parameters<typeof inkRender>) => {
+  const rendered = inkRender(...args);
+  renders.push(rendered.unmount);
+  return rendered;
+};
+
+afterEach(() => {
+  for (const unmount of renders) {
+    unmount();
+  }
+  renders.length = 0;
+});
+
+const extractSection = (output: string, start: string, end?: string): string => {
+  const startIndex = output.indexOf(start);
+  if (startIndex === -1) {
+    return "";
+  }
+
+  const afterStart = output.slice(startIndex + start.length);
+  if (!end) {
+    return afterStart;
+  }
+  const endIndex = afterStart.indexOf(end);
+  if (endIndex === -1) {
+    return afterStart;
+  }
+
+  return afterStart.slice(0, endIndex);
+};
+
+test("plan view shows dependency plan without ready section", () => {
+  const originalCwd = process.cwd();
+  const base = mkdtempSync(join(tmpdir(), "schub-plan-view-"));
+  const tasksDir = join(base, ".schub", "tasks", "backlog");
+  mkdirSync(tasksDir, { recursive: true });
+  writeFileSync(join(tasksDir, "T0001_ready-task.md"), "# Task: T0001 Ready Task\n", "utf8");
+
+  try {
+    process.chdir(base);
+    const { lastFrame } = render(<PlanView />);
+    const output = stripAnsi(lastFrame() ?? "");
+
+    expect(output).toContain("Dependency Plan");
+    expect(output).toContain("T0001");
+    expect(output).not.toContain("Ready to Implement");
+  } finally {
+    process.chdir(originalCwd);
+  }
+});
+
+test("plan view refreshes dependency graph when tasks change", async () => {
+  const originalCwd = process.cwd();
+  const base = mkdtempSync(join(tmpdir(), "schub-plan-refresh-"));
+  const tasksDir = join(base, ".schub", "tasks", "backlog");
+  const doneDir = join(base, ".schub", "tasks", "done");
+  const refreshIntervalMs = 50;
+  let unmount: (() => void) | undefined;
+
+  mkdirSync(tasksDir, { recursive: true });
+  mkdirSync(doneDir, { recursive: true });
+
+  try {
+    process.chdir(base);
+    writeFileSync(
+      join(tasksDir, "T0002_waiting-task.md"),
+      "---\ndepends_on:\n  - T0003\n---\n# Task: T0002 Waiting Task\n",
+      "utf8",
+    );
+    writeFileSync(join(tasksDir, "T0003_dependency.md"), "# Task: T0003 Dependency\n", "utf8");
+    const rendered = render(<PlanView refreshIntervalMs={refreshIntervalMs} />);
+    unmount = rendered.unmount;
+    const initial = stripAnsi(rendered.lastFrame() ?? "");
+    const initialGraph = extractSection(initial, "Dependency Plan");
+    expect(initialGraph).toContain("T0002");
+    expect(initialGraph).toContain("T0003");
+
+    renameSync(join(tasksDir, "T0003_dependency.md"), join(doneDir, "T0003_dependency.md"));
+    await new Promise((resolve) => setTimeout(resolve, refreshIntervalMs * 2));
+
+    const refreshed = stripAnsi(rendered.lastFrame() ?? "");
+    const refreshedGraph = extractSection(refreshed, "Dependency Plan");
+    expect(refreshedGraph).toContain("T0002");
+    expect(refreshedGraph).not.toContain("T0003");
+    expect(refreshed).not.toContain("Ready to Implement");
+  } finally {
+    unmount?.();
+    process.chdir(originalCwd);
+  }
+});

package/src/tui/components/PlanView.tsx

@@ -0,0 +1,89 @@
+import { Box, Text } from "ink";
+import React from "react";
+import {
+  buildTaskGraph,
+  findSchubRoot,
+  loadTaskDependencies,
+  renderTaskGraphLines,
+  type TaskStatus,
+} from "../../features/tasks";
+
+const PLAN_TASK_STATUSES: readonly TaskStatus[] = ["backlog", "ready", "wip", "blocked"];
+
+type PlanViewProps = {
+  refreshIntervalMs?: number;
+  startDir?: string;
+};
+
+const DEFAULT_REFRESH_INTERVAL_MS = 1000;
+
+const buildPlanData = (schubDir: string | null) => {
+  if (!schubDir) {
+    return { visibleTasks: [], graphLines: [] };
+  }
+
+  const allTasks = loadTaskDependencies(schubDir);
+  const visibleTasks = allTasks.filter((task) => PLAN_TASK_STATUSES.includes(task.status));
+
+  if (visibleTasks.length === 0) {
+    return { visibleTasks, graphLines: [] };
+  }
+
+  const graph = buildTaskGraph(visibleTasks);
+  const graphLines = renderTaskGraphLines(graph);
+  return { visibleTasks, graphLines };
+};
+
+export default function PlanView({ refreshIntervalMs = DEFAULT_REFRESH_INTERVAL_MS, startDir }: PlanViewProps) {
+  const resolvedStartDir = startDir ?? process.env.SCHUB_CWD ?? process.cwd();
+  const schubDir = findSchubRoot(resolvedStartDir);
+  const [, setRefreshTick] = React.useState(0);
+  const planData = buildPlanData(schubDir);
+
+  React.useEffect(() => {
+    if (!schubDir) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setRefreshTick((current) => current + 1);
+    }, refreshIntervalMs);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [refreshIntervalMs, schubDir]);
+
+  if (!schubDir) {
+    return (
+      <Box flexDirection="column">
+        <Text color="red">No .schub directory found.</Text>
+      </Box>
+    );
+  }
+
+  if (planData.visibleTasks.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text color="gray">No tasks found in .schub</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="column">
+        <Box marginBottom={1}>
+          <Text bold color="white">
+            Dependency Plan
+          </Text>
+        </Box>
+        {planData.graphLines.map((line, index) => (
+          <Text key={`${line.text}-${index}`} color={"grey"}>
+            {line.text}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/PreviewPage.test.tsx

@@ -0,0 +1,69 @@
+import { afterEach, expect, test } from "bun:test";
+import { render as inkRender } from "ink-testing-library";
+import PreviewPage from "./PreviewPage";
+
+const ansiPattern = new RegExp(`${String.fromCharCode(27)}[[0-9;]*m`, "g");
+const stripAnsi = (value: string) => value.replace(ansiPattern, "");
+
+const renders: Array<() => void> = [];
+const render = (...args: Parameters<typeof inkRender>) => {
+  const rendered = inkRender(...args);
+  renders.push(rendered.unmount);
+  return rendered;
+};
+
+afterEach(() => {
+  for (const unmount of renders) {
+    unmount();
+  }
+  renders.length = 0;
+});
+
+const nextFrame = () => new Promise((resolve) => setTimeout(resolve, 0));
+const settleFrames = async () => {
+  await nextFrame();
+  await nextFrame();
+};
+
+test("preview renders header and markdown output", () => {
+  const markdown = "# Title\nHello **World**\n```\nconst value = 1\n```";
+  const { lastFrame } = render(<PreviewPage fileName="proposal.md" markdown={markdown} height={10} />);
+  const output = stripAnsi(lastFrame() ?? "");
+
+  expect(output).toContain("proposal.md");
+  expect(output).toContain("esc to return");
+  expect(output).toContain("Title");
+  expect(output).toContain("Hello World");
+  expect(output).toContain("const value = 1");
+});
+
+test("preview scrolls up and down within bounds", async () => {
+  const markdown = ["Line 1", "Line 2", "Line 3", "Line 4"].join("\n");
+  const rendered = render(<PreviewPage fileName="notes.md" markdown={markdown} height={4} />);
+
+  const initial = stripAnsi(rendered.lastFrame() ?? "");
+  expect(initial).toContain("Line 1");
+  expect(initial).toContain("Line 2");
+  expect(initial).not.toContain("Line 3");
+
+  rendered.stdin.write("\u001B[B");
+  await settleFrames();
+  const scrolled = stripAnsi(rendered.lastFrame() ?? "");
+  expect(scrolled).toContain("Line 2");
+  expect(scrolled).toContain("Line 3");
+  expect(scrolled).not.toContain("Line 1");
+
+  rendered.stdin.write("\u001B[B");
+  rendered.stdin.write("\u001B[B");
+  await settleFrames();
+  const bottom = stripAnsi(rendered.lastFrame() ?? "");
+  expect(bottom).toContain("Line 3");
+  expect(bottom).toContain("Line 4");
+  expect(bottom).not.toContain("Line 2");
+
+  rendered.stdin.write("\u001B[A");
+  await settleFrames();
+  const backUp = stripAnsi(rendered.lastFrame() ?? "");
+  expect(backUp).toContain("Line 2");
+  expect(backUp).toContain("Line 3");
+});

package/src/tui/components/PreviewPage.tsx

@@ -0,0 +1,87 @@
+import { Box, Text, useInput, useStdout } from "ink";
+import React from "react";
+import { renderMarkdownLines } from "./markdown-renderer";
+
+type PreviewPageProps = {
+  fileName: string;
+  markdown: string;
+  height?: number;
+  onClose?: () => void;
+};
+
+const HEADER_HEIGHT = 2;
+
+export default function PreviewPage({ fileName, markdown, height, onClose }: PreviewPageProps) {
+  const { stdout } = useStdout();
+  const lines = renderMarkdownLines(markdown);
+  const availableHeight = height ?? stdout.rows ?? 0;
+  const visibleLineCount = Math.max(0, availableHeight - HEADER_HEIGHT);
+  const maxOffset = visibleLineCount > 0 ? Math.max(0, lines.length - visibleLineCount) : 0;
+  const [scrollOffset, setScrollOffset] = React.useState(0);
+
+  const clampOffset = (value: number) => Math.min(maxOffset, Math.max(0, value));
+
+  React.useEffect(() => {
+    setScrollOffset((current) => Math.min(maxOffset, Math.max(0, current)));
+  }, [maxOffset]);
+
+  useInput((input, key) => {
+    const keyName = (key as { name?: string }).name;
+    const keySequence = (key as { sequence?: string }).sequence;
+    const isEscape = key.escape || keyName === "escape" || keySequence === "\u001B" || input === "\u001B";
+    const isDownArrow = key.downArrow || Boolean(keySequence?.includes("[B")) || input.includes("[B");
+    const isUpArrow = key.upArrow || Boolean(keySequence?.includes("[A")) || input.includes("[A");
+
+    if (isEscape) {
+      onClose?.();
+      return;
+    }
+
+    if (isDownArrow) {
+      setScrollOffset((current) => clampOffset(current + 1));
+      return;
+    }
+
+    if (isUpArrow) {
+      setScrollOffset((current) => clampOffset(current - 1));
+    }
+  });
+
+  const visibleLines = lines.slice(scrollOffset, scrollOffset + visibleLineCount);
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1} flexDirection="row">
+        <Text bold color="white">
+          {fileName}
+        </Text>
+        <Text color="gray"> · esc to return</Text>
+      </Box>
+      <Box flexDirection="column">
+        {visibleLines.map((line, lineIndex) => {
+          const lineKey = `${scrollOffset}-${lineIndex}`;
+          const hasContent = line.segments.some((segment) => segment.text.length > 0);
+
+          if (!hasContent) {
+            return <Text key={lineKey}> </Text>;
+          }
+
+          return (
+            <Text key={lineKey} wrap="wrap">
+              {line.segments.map((segment, segmentIndex) => (
+                <Text
+                  key={`${lineKey}-${segmentIndex}`}
+                  color={segment.color}
+                  backgroundColor={segment.backgroundColor}
+                  bold={segment.bold}
+                >
+                  {segment.text}
+                </Text>
+              ))}
+            </Text>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}