schub 0.1.2 → 0.1.4

package/src/tui/components/StatusView.tsx

@@ -0,0 +1,519 @@
+import { dirname } from "node:path";
+import { Box, Text, useInput } from "ink";
+import React from "react";
+import { findSchubRoot, updateTaskStatuses } from "../../features/tasks";
+import { launchOpencodeImplement } from "../../opencode";
+import {
+  autoMarkChangesDone,
+  buildShowAllGroups,
+  buildShowAllTaskGroups,
+  buildStatusData,
+  isTaskItem,
+} from "./status-view-data";
+import {
+  isShowAllRow,
+  type ShowAllRow,
+  StatusMainView,
+  StatusShowAllTasksView,
+  StatusShowAllView,
+} from "./status-view-render";
+
+type Shortcut = {
+  keyLabel: string;
+  label: string;
+};
+
+type StatusViewProps = {
+  refreshIntervalMs?: number;
+  startDir?: string;
+  isActive?: boolean;
+  onCopyId: (id: string) => void;
+  onOpen?: (repoRoot: string, relativePath: string) => void;
+  onOpenDetail?: (changeId: string) => void;
+  onImplement?: (taskId: string, repoRoot: string) => void;
+  onShortcutsChange?: (shortcuts: Shortcut[]) => void;
+  onViewChange?: (view: "main" | "show-all" | "show-all-tasks") => void;
+};
+
+const DEFAULT_REFRESH_INTERVAL_MS = 1000;
+const OPEN_SHORTCUT: Shortcut = { keyLabel: "o", label: "preview" };
+const COPY_SHORTCUT: Shortcut = { keyLabel: "c", label: "copy id" };
+const IMPLEMENT_SHORTCUT: Shortcut = { keyLabel: "i", label: "implement" };
+const STATUS_SHORTCUT: Shortcut = { keyLabel: "s", label: "status" };
+
+type StatusOption = {
+  label: string;
+  status: "backlog" | "ready" | "archived";
+};
+
+const BACKLOG_STATUS_OPTIONS: readonly StatusOption[] = [
+  { label: "Ready", status: "ready" },
+  { label: "Archive", status: "archived" },
+];
+
+const READY_STATUS_OPTIONS: readonly StatusOption[] = [
+  { label: "Backlog", status: "backlog" },
+  { label: "Archive", status: "archived" },
+];
+
+type StatusModalState = {
+  taskId: string;
+  selection: number;
+  options: readonly StatusOption[];
+};
+
+const SHOW_ALL_ROW: ShowAllRow = {
+  kind: "show-all",
+  id: "show-all-proposals",
+  title: "[Show all proposals]",
+};
+
+const SHOW_ALL_TASKS_ROW: ShowAllRow = {
+  kind: "show-all",
+  id: "show-all-tasks",
+  title: "[Show all tasks]",
+};
+
+const isShowAllTasksRow = (row: ShowAllRow) => row.id === SHOW_ALL_TASKS_ROW.id;
+
+export default function StatusView({
+  refreshIntervalMs = DEFAULT_REFRESH_INTERVAL_MS,
+  startDir,
+  isActive = true,
+  onCopyId,
+  onOpen,
+  onOpenDetail,
+  onImplement = launchOpencodeImplement,
+  onShortcutsChange,
+  onViewChange,
+}: StatusViewProps) {
+  const schubDir = findSchubRoot(startDir);
+  const [, setRefreshTick] = React.useState(0);
+  const {
+    pendingReview,
+    pendingImplementation,
+    pendingImplementationNoTasks,
+    drafts,
+    readyToImplement,
+    blocked,
+    wip,
+    ready,
+    backlog,
+    pendingImplementationCounts,
+  } = buildStatusData(schubDir);
+  const repoRoot = schubDir ? dirname(schubDir) : "";
+
+  const showAllGroups = buildShowAllGroups(schubDir);
+  const showAllItems = showAllGroups.flatMap((group) => group.items);
+  const showAllTaskGroups = buildShowAllTaskGroups(schubDir);
+  const showAllTaskItems = showAllTaskGroups.flatMap((group) => group.items);
+
+  const changeItems = [...pendingReview, ...pendingImplementation, ...pendingImplementationNoTasks, ...drafts];
+  const taskItems = [...readyToImplement, ...blocked, ...wip, ...ready, ...backlog];
+  const mainItems =
+    changeItems.length + taskItems.length > 0 ? [...changeItems, SHOW_ALL_ROW, ...taskItems, SHOW_ALL_TASKS_ROW] : [];
+  const mainSelectionFloor = changeItems.length === 0 && taskItems.length > 0 ? 1 : 0;
+
+  const [view, setView] = React.useState<"main" | "show-all" | "show-all-tasks">("main");
+  const [mainSelection, setMainSelection] = React.useState(() => mainSelectionFloor);
+  const [showAllSelection, setShowAllSelection] = React.useState(0);
+  const [showAllTasksSelection, setShowAllTasksSelection] = React.useState(0);
+  const [statusModal, setStatusModal] = React.useState<StatusModalState | null>(null);
+  const showAllShortcutRef = React.useRef(false);
+  const statusModalRef = React.useRef<StatusModalState | null>(null);
+
+  const updateView = (nextView: "main" | "show-all" | "show-all-tasks") => {
+    setView(nextView);
+    if (onViewChange) {
+      onViewChange(nextView);
+    }
+  };
+
+  const currentItems = view === "main" ? mainItems : view === "show-all" ? showAllItems : showAllTaskItems;
+  const selection = view === "main" ? mainSelection : view === "show-all" ? showAllSelection : showAllTasksSelection;
+  const setSelection =
+    view === "main" ? setMainSelection : view === "show-all" ? setShowAllSelection : setShowAllTasksSelection;
+  const totalItems = currentItems.length;
+
+  const selectedItem = totalItems > 0 ? currentItems[selection] : null;
+  const hasOpenableSelection = Boolean(selectedItem && !isShowAllRow(selectedItem));
+  const selectedTaskItem =
+    selectedItem && !isShowAllRow(selectedItem) && isTaskItem(selectedItem) ? selectedItem : null;
+  const canUpdateTaskStatus =
+    selectedTaskItem &&
+    (view === "main" || view === "show-all-tasks") &&
+    (selectedTaskItem.status === "backlog" || selectedTaskItem.status === "ready");
+  const selectedStatusTaskId = canUpdateTaskStatus ? selectedTaskItem.id : null;
+  const readyToImplementStart = changeItems.length + 1;
+  const readyToImplementEnd = readyToImplementStart + readyToImplement.length;
+  const readyToImplementIds = readyToImplement.map((task) => task.id);
+  const selectedReadyTaskId =
+    view === "main"
+      ? selection >= readyToImplementStart && selection < readyToImplementEnd
+        ? (readyToImplement[selection - readyToImplementStart]?.id ?? null)
+        : null
+      : view === "show-all-tasks" && selectedTaskItem && readyToImplementIds.includes(selectedTaskItem.id)
+        ? selectedTaskItem.id
+        : null;
+  const lastShortcutRef = React.useRef<string | null>(null);
+  const readyToImplementIdsRef = React.useRef(readyToImplementIds);
+  const readyToImplementRangeRef = React.useRef({ start: readyToImplementStart, end: readyToImplementEnd });
+  const currentItemsRef = React.useRef(currentItems);
+  const selectionRef = React.useRef(selection);
+  const viewRef = React.useRef(view);
+
+  React.useEffect(() => {
+    currentItemsRef.current = currentItems;
+    selectionRef.current = selection;
+    viewRef.current = view;
+    readyToImplementIdsRef.current = readyToImplement.map((task) => task.id);
+    readyToImplementRangeRef.current = { start: readyToImplementStart, end: readyToImplementEnd };
+  }, [currentItems, selection, view, readyToImplement, readyToImplementEnd, readyToImplementStart]);
+
+  React.useEffect(() => {
+    statusModalRef.current = statusModal;
+  }, [statusModal]);
+
+  React.useLayoutEffect(() => {
+    if (!onShortcutsChange) {
+      return;
+    }
+
+    const shortcuts: Shortcut[] = [];
+    if (hasOpenableSelection) {
+      shortcuts.push(OPEN_SHORTCUT, COPY_SHORTCUT);
+    }
+    if (selectedReadyTaskId) {
+      shortcuts.push(IMPLEMENT_SHORTCUT);
+    }
+    if (selectedStatusTaskId) {
+      shortcuts.push(STATUS_SHORTCUT);
+    }
+
+    const shortcutKey = shortcuts.map((shortcut) => shortcut.keyLabel).join("|") || "none";
+
+    if (lastShortcutRef.current === shortcutKey) {
+      return;
+    }
+
+    lastShortcutRef.current = shortcutKey;
+    onShortcutsChange(shortcuts);
+  }, [hasOpenableSelection, onShortcutsChange, selectedReadyTaskId, selectedStatusTaskId]);
+
+  React.useEffect(() => {
+    if (!schubDir) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      autoMarkChangesDone(schubDir);
+      setRefreshTick((current) => current + 1);
+    }, refreshIntervalMs);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [refreshIntervalMs, schubDir]);
+
+  React.useEffect(() => {
+    if (mainItems.length === 0) {
+      setMainSelection(0);
+      return;
+    }
+    setMainSelection((current) => {
+      const clamped = Math.min(current, mainItems.length - 1);
+      return clamped === 0 ? mainSelectionFloor : clamped;
+    });
+  }, [mainItems.length, mainSelectionFloor]);
+
+  React.useEffect(() => {
+    if (showAllItems.length === 0) {
+      setShowAllSelection(0);
+      return;
+    }
+    setShowAllSelection((current) => Math.min(current, showAllItems.length - 1));
+  }, [showAllItems.length]);
+
+  React.useEffect(() => {
+    if (showAllTaskItems.length === 0) {
+      setShowAllTasksSelection(0);
+      return;
+    }
+    setShowAllTasksSelection((current) => Math.min(current, showAllTaskItems.length - 1));
+  }, [showAllTaskItems.length]);
+
+  React.useEffect(() => {
+    if (view) {
+      showAllShortcutRef.current = false;
+    }
+  }, [view]);
+
+  useInput(
+    (input, key) => {
+      const lowerInput = input.toLowerCase();
+      const keyName = (key as { name?: string }).name;
+      const keySequence = (key as { sequence?: string }).sequence;
+      const keyEnter = (key as { enter?: boolean }).enter;
+      const isEscape = key.escape || keyName === "escape" || keySequence === "\u001B" || input === "\u001B";
+      const isCtrlX =
+        (key.ctrl && (lowerInput === "x" || keyName === "x" || keySequence === "\u0018")) || input === "\u0018";
+      const isEnter =
+        key.return ||
+        keyEnter ||
+        keyName === "return" ||
+        keyName === "enter" ||
+        keySequence === "\r" ||
+        keySequence === "\n" ||
+        input === "\r" ||
+        input === "\n";
+      const isDownArrow = key.downArrow || Boolean(keySequence?.includes("[B")) || input.includes("[B");
+      const isUpArrow = key.upArrow || Boolean(keySequence?.includes("[A")) || input.includes("[A");
+      const isLeftArrow = key.leftArrow || Boolean(keySequence?.includes("[D")) || input.includes("[D");
+      const isRightArrow = key.rightArrow || Boolean(keySequence?.includes("[C")) || input.includes("[C");
+
+      const activeStatusModal = statusModalRef.current;
+      if (activeStatusModal) {
+        if (isEscape || lowerInput === "q") {
+          statusModalRef.current = null;
+          setStatusModal(null);
+          return;
+        }
+
+        if (isUpArrow || isLeftArrow) {
+          setStatusModal((current) => {
+            if (!current) {
+              return current;
+            }
+            const nextSelection = Math.max(0, current.selection - 1);
+            if (nextSelection === current.selection) {
+              return current;
+            }
+            const nextModal = { ...current, selection: nextSelection };
+            statusModalRef.current = nextModal;
+            return nextModal;
+          });
+          return;
+        }
+
+        if (isDownArrow || isRightArrow) {
+          setStatusModal((current) => {
+            if (!current) {
+              return current;
+            }
+            const nextSelection = Math.min(current.options.length - 1, current.selection + 1);
+            if (nextSelection === current.selection) {
+              return current;
+            }
+            const nextModal = { ...current, selection: nextSelection };
+            statusModalRef.current = nextModal;
+            return nextModal;
+          });
+          return;
+        }
+
+        if (isEnter) {
+          if (schubDir) {
+            const option = activeStatusModal.options[activeStatusModal.selection];
+            if (option) {
+              updateTaskStatuses(schubDir, [activeStatusModal.taskId], option.status);
+              setRefreshTick((current) => current + 1);
+            }
+          }
+          statusModalRef.current = null;
+          setStatusModal(null);
+        }
+
+        return;
+      }
+
+      const activeItems = currentItemsRef.current;
+      const activeSelection = selectionRef.current;
+      const activeItem = activeItems[activeSelection] ?? null;
+      const activeTotalItems = activeItems.length;
+      const activeView = viewRef.current;
+
+      if (activeView !== "main" && (isEscape || lowerInput === "q")) {
+        updateView("main");
+        return;
+      }
+
+      if (activeView === "main" && lowerInput === "t") {
+        updateView("show-all-tasks");
+        return;
+      }
+
+      if (activeView === "main" && input.includes("\u0018") && lowerInput.includes("p")) {
+        showAllShortcutRef.current = false;
+        updateView("show-all");
+        return;
+      }
+
+      if (activeView === "main") {
+        if (isCtrlX) {
+          showAllShortcutRef.current = true;
+          return;
+        }
+
+        if (showAllShortcutRef.current) {
+          showAllShortcutRef.current = false;
+          if (lowerInput === "p") {
+            updateView("show-all");
+            return;
+          }
+        }
+
+        if (lowerInput === "p") {
+          updateView("show-all");
+          return;
+        }
+      }
+
+      if (activeTotalItems === 0) {
+        return;
+      }
+
+      if (isDownArrow) {
+        const nextSelection = Math.min(activeSelection + 1, activeTotalItems - 1);
+        selectionRef.current = nextSelection;
+        setSelection(nextSelection);
+      }
+
+      if (isUpArrow) {
+        const nextSelection = Math.max(activeSelection - 1, 0);
+        selectionRef.current = nextSelection;
+        setSelection(nextSelection);
+      }
+
+      if (isEnter && activeItem && !isShowAllRow(activeItem) && !isTaskItem(activeItem)) {
+        onOpenDetail?.(activeItem.id);
+        return;
+      }
+
+      if (activeView === "main" && isEnter && activeItem && isShowAllRow(activeItem)) {
+        updateView(isShowAllTasksRow(activeItem) ? "show-all-tasks" : "show-all");
+        return;
+      }
+
+      if (input === "o" && activeItem && !isShowAllRow(activeItem)) {
+        onOpen?.(repoRoot, activeItem.path);
+      }
+
+      if (input === "c" && activeItem && !isShowAllRow(activeItem)) {
+        onCopyId(activeItem.id);
+      }
+
+      if (
+        lowerInput === "s" &&
+        (activeView === "main" || activeView === "show-all-tasks") &&
+        activeItem &&
+        !isShowAllRow(activeItem) &&
+        isTaskItem(activeItem) &&
+        (activeItem.status === "backlog" || activeItem.status === "ready")
+      ) {
+        const options = activeItem.status === "backlog" ? BACKLOG_STATUS_OPTIONS : READY_STATUS_OPTIONS;
+        const nextModal = { taskId: activeItem.id, selection: 0, options };
+        statusModalRef.current = nextModal;
+        setStatusModal(nextModal);
+        return;
+      }
+
+      if (input === "i") {
+        if (activeView === "main") {
+          const { start, end } = readyToImplementRangeRef.current;
+          if (activeSelection >= start && activeSelection < end) {
+            const readyIndex = activeSelection - start;
+            const taskId = readyToImplementIdsRef.current[readyIndex];
+            if (taskId) {
+              onImplement(taskId, repoRoot);
+            }
+          }
+          return;
+        }
+
+        if (
+          activeView === "show-all-tasks" &&
+          activeItem &&
+          !isShowAllRow(activeItem) &&
+          isTaskItem(activeItem) &&
+          readyToImplementIdsRef.current.includes(activeItem.id)
+        ) {
+          onImplement(activeItem.id, repoRoot);
+        }
+      }
+    },
+    { isActive },
+  );
+
+  if (!schubDir) {
+    return (
+      <Box flexDirection="column">
+        <Text bold>Status</Text>
+        <Text color="red">No .schub directory found.</Text>
+      </Box>
+    );
+  }
+
+  if (view === "main" && mainItems.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text color="gray">No active changes or tasks found.</Text>
+      </Box>
+    );
+  }
+
+  if (view === "show-all") {
+    return <StatusShowAllView selection={selection} showAllGroups={showAllGroups} />;
+  }
+
+  const content =
+    view === "show-all-tasks" ? (
+      <StatusShowAllTasksView selection={selection} showAllTaskGroups={showAllTaskGroups} />
+    ) : (
+      <StatusMainView
+        selection={selection}
+        pendingReview={pendingReview}
+        pendingImplementation={pendingImplementation}
+        pendingImplementationNoTasks={pendingImplementationNoTasks}
+        drafts={drafts}
+        pendingImplementationCounts={pendingImplementationCounts}
+        readyToImplement={readyToImplement}
+        blocked={blocked}
+        wip={wip}
+        ready={ready}
+        backlog={backlog}
+        showAllRow={SHOW_ALL_ROW}
+        showAllTasksRow={SHOW_ALL_TASKS_ROW}
+      />
+    );
+
+  return (
+    <Box flexDirection="column">
+      {content}
+      {statusModal ? (
+        <Box backgroundColor="darkGray" flexDirection="column" paddingX={2} paddingY={1}>
+          <Box flexDirection="column" marginBottom={1}>
+            {statusModal.options.map((option, index) => {
+              const selected = index === statusModal.selection;
+              return (
+                <Box key={option.status}>
+                  <Text color={selected ? "blue" : "gray"}>{selected ? "›" : " "}</Text>
+                  <Text color="white"> {option.label}</Text>
+                </Box>
+              );
+            })}
+          </Box>
+          <Box alignItems="flex-end">
+            <Box marginRight={2}>
+              <Text color="white">enter</Text>
+              <Text color="gray"> confirm</Text>
+            </Box>
+            <Box>
+              <Text color="white">esc</Text>
+              <Text color="gray"> cancel</Text>
+            </Box>
+          </Box>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}

package/src/tui/components/markdown-renderer.test.ts

@@ -0,0 +1,46 @@
+import { expect, test } from "bun:test";
+import { renderMarkdownLines } from "./markdown-renderer";
+
+test("renderMarkdownLines styles headings", () => {
+  const lines = renderMarkdownLines("# Heading");
+
+  expect(lines).toEqual([
+    {
+      segments: [{ text: "Heading", color: "#FFA500", bold: true }],
+    },
+  ]);
+});
+
+test("renderMarkdownLines styles bold segments", () => {
+  const lines = renderMarkdownLines("Hello **World** and **Friends**");
+
+  expect(lines).toEqual([
+    {
+      segments: [{ text: "Hello " }, { text: "World", bold: true }, { text: " and " }, { text: "Friends", bold: true }],
+    },
+  ]);
+});
+
+test("renderMarkdownLines styles fenced code blocks", () => {
+  const markdown = "```ts\nconst value = **bold**\nconst total = 42\n```";
+  const lines = renderMarkdownLines(markdown);
+
+  expect(lines).toEqual([
+    {
+      segments: [{ text: "const value = **bold**", color: "green" }],
+    },
+    {
+      segments: [{ text: "const total = 42", color: "green" }],
+    },
+  ]);
+});
+
+test("renderMarkdownLines styles block quotes", () => {
+  const lines = renderMarkdownLines("> quoted line");
+
+  expect(lines).toEqual([
+    {
+      segments: [{ text: "quoted line", color: "white", backgroundColor: "#444444" }],
+    },
+  ]);
+});

package/src/tui/components/markdown-renderer.ts

@@ -0,0 +1,89 @@
+export type MarkdownSegment = {
+  text: string;
+  color?: string;
+  backgroundColor?: string;
+  bold?: boolean;
+};
+
+export type MarkdownLine = {
+  segments: MarkdownSegment[];
+};
+
+const headingPattern = /^#{1,6}\s*(.*)$/;
+const blockQuotePattern = /^>\s?(.*)$/;
+const codeFencePattern = /^\s*```/;
+const headingStyle = { color: "#FFA500", bold: true } as const;
+const blockQuoteStyle = { color: "white", backgroundColor: "#444444" } as const;
+const codeStyle = { color: "green" } as const;
+
+const parseBoldSegments = (line: string) => {
+  if (line.length === 0) {
+    return [{ text: "" }];
+  }
+
+  const segments: MarkdownSegment[] = [];
+  let cursor = 0;
+  let isBold = false;
+
+  while (cursor < line.length) {
+    const markerIndex = line.indexOf("**", cursor);
+
+    if (markerIndex === -1) {
+      const remainder = line.slice(cursor);
+      if (remainder.length > 0 || segments.length === 0) {
+        segments.push(isBold ? { text: remainder, bold: true } : { text: remainder });
+      }
+      break;
+    }
+
+    if (markerIndex > cursor) {
+      const text = line.slice(cursor, markerIndex);
+      segments.push(isBold ? { text, bold: true } : { text });
+    }
+
+    isBold = !isBold;
+    cursor = markerIndex + 2;
+  }
+
+  if (segments.length === 0) {
+    segments.push({ text: "" });
+  }
+
+  return segments;
+};
+
+export const renderMarkdownLines = (markdown: string) => {
+  const lines: MarkdownLine[] = [];
+  const rawLines = markdown.split(/\r?\n/);
+  let inCodeBlock = false;
+
+  for (const rawLine of rawLines) {
+    if (codeFencePattern.test(rawLine)) {
+      inCodeBlock = !inCodeBlock;
+      continue;
+    }
+
+    if (inCodeBlock) {
+      lines.push({ segments: [{ text: rawLine, ...codeStyle }] });
+      continue;
+    }
+
+    const blockQuoteMatch = rawLine.match(blockQuotePattern);
+    if (blockQuoteMatch) {
+      const quoteText = blockQuoteMatch[1];
+      lines.push({ segments: [{ text: quoteText, ...blockQuoteStyle }] });
+      continue;
+    }
+
+    const headingMatch = rawLine.match(headingPattern);
+    if (headingMatch) {
+      const headingText = headingMatch[1].trim();
+      lines.push({ segments: [{ text: headingText, ...headingStyle }] });
+      continue;
+    }
+
+    lines.push({ segments: parseBoldSegments(rawLine) });
+  }
+
+  return lines;
+};