schub 0.1.2 → 0.1.4

package/src/tui/components/RoadmapView.tsx

@@ -0,0 +1,369 @@
+import { Box, Text, useInput } from "ink";
+import React from "react";
+import { addRoadmapItem, listRoadmapItems, proposeRoadmapItem, type RoadmapItem } from "../../features/roadmap";
+import { findSchubRoot } from "../../features/tasks";
+
+const DEFAULT_REFRESH_INTERVAL_MS = 1000;
+
+type RoadmapViewProps = {
+  refreshIntervalMs?: number;
+  startDir?: string;
+};
+
+type Command = {
+  id: "add" | "propose";
+  label: string;
+};
+
+const COMMANDS: Command[] = [
+  { id: "add", label: "Add story" },
+  { id: "propose", label: "Create proposal" },
+];
+
+const compareText = (left: string, right: string) => left.localeCompare(right, undefined, { sensitivity: "base" });
+
+const sortRoadmapItems = (items: RoadmapItem[]) =>
+  [...items].sort((left, right) => {
+    const titleCompare = compareText(left.story, right.story);
+    if (titleCompare !== 0) {
+      return titleCompare;
+    }
+    return left.index - right.index;
+  });
+
+const loadRoadmapState = (schubDir: string) => {
+  try {
+    return { items: sortRoadmapItems(listRoadmapItems(schubDir)), error: null };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return { items: [] as RoadmapItem[], error: message };
+  }
+};
+
+const formatRef = (ref: string | null) => (ref ? ref : "--");
+
+const normalizeTypedValue = (input: string, keyName?: string, keySequence?: string) => {
+  if (input) {
+    return input;
+  }
+  if (keySequence && keySequence.length === 1 && keySequence !== "\r" && keySequence !== "\n") {
+    return keySequence;
+  }
+  if (!keyName) {
+    return "";
+  }
+  if (keyName.length === 1) {
+    return keyName;
+  }
+  if (keyName === "space") {
+    return " ";
+  }
+  if (keyName === "period") {
+    return ".";
+  }
+  if (keyName === "dot") {
+    return ".";
+  }
+  return "";
+};
+
+export default function RoadmapView({ refreshIntervalMs = DEFAULT_REFRESH_INTERVAL_MS, startDir }: RoadmapViewProps) {
+  const resolvedStartDir = startDir ?? process.env.SCHUB_CWD ?? process.cwd();
+  const schubDir = findSchubRoot(resolvedStartDir);
+  const initialStateRef = React.useRef<{ items: RoadmapItem[]; error: string | null } | null>(null);
+  if (!initialStateRef.current) {
+    initialStateRef.current = schubDir ? loadRoadmapState(schubDir) : { items: [], error: null };
+  }
+  const [items, setItems] = React.useState<RoadmapItem[]>(initialStateRef.current.items);
+  const [selection, setSelection] = React.useState(0);
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(initialStateRef.current.error);
+  const [inputActive, setInputActive] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const [paletteOpen, setPaletteOpen] = React.useState(false);
+  const [paletteSelection, setPaletteSelection] = React.useState(0);
+  const itemsRef = React.useRef(items);
+  const selectionRef = React.useRef(selection);
+  const paletteOpenRef = React.useRef(paletteOpen);
+  const inputActiveRef = React.useRef(inputActive);
+  const inputValueRef = React.useRef(inputValue);
+
+  React.useEffect(() => {
+    if (!schubDir) {
+      return;
+    }
+
+    const refresh = () => {
+      const { items: loaded, error } = loadRoadmapState(schubDir);
+      setItems(loaded);
+      setErrorMessage(error);
+    };
+
+    refresh();
+    const interval = setInterval(() => {
+      refresh();
+    }, refreshIntervalMs);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [refreshIntervalMs, schubDir]);
+
+  React.useEffect(() => {
+    if (items.length === 0) {
+      setSelection(0);
+      return;
+    }
+    setSelection((current) => Math.min(current, items.length - 1));
+  }, [items.length]);
+
+  React.useEffect(() => {
+    itemsRef.current = items;
+    selectionRef.current = selection;
+    paletteOpenRef.current = paletteOpen;
+    inputActiveRef.current = inputActive;
+    inputValueRef.current = inputValue;
+  }, [items, selection, paletteOpen, inputActive, inputValue]);
+
+  const openPalette = () => {
+    setPaletteOpen(true);
+    setPaletteSelection(0);
+    setInputActive(false);
+    inputValueRef.current = "";
+    setInputValue("");
+  };
+
+  const closePalette = () => {
+    setPaletteOpen(false);
+    setPaletteSelection(0);
+  };
+
+  const startInput = () => {
+    inputActiveRef.current = true;
+    setInputActive(true);
+    inputValueRef.current = "";
+    setInputValue("");
+  };
+
+  const handleAdd = () => {
+    if (!schubDir) {
+      return;
+    }
+    const trimmed = inputValueRef.current.trim();
+    if (!trimmed) {
+      setInputActive(false);
+      inputValueRef.current = "";
+      setInputValue("");
+      return;
+    }
+    try {
+      addRoadmapItem(schubDir, trimmed);
+      setInputActive(false);
+      inputValueRef.current = "";
+      setInputValue("");
+      const { items: loaded, error } = loadRoadmapState(schubDir);
+      setItems(loaded);
+      setErrorMessage(error);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setErrorMessage(message);
+    }
+  };
+
+  const handlePropose = () => {
+    if (!schubDir) {
+      return;
+    }
+    const selected = itemsRef.current[selectionRef.current];
+    if (!selected) {
+      setErrorMessage("Select a roadmap item first.");
+      return;
+    }
+    try {
+      proposeRoadmapItem(schubDir, selected.index);
+      const { items: loaded, error } = loadRoadmapState(schubDir);
+      setItems(loaded);
+      setErrorMessage(error);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setErrorMessage(message);
+    }
+  };
+
+  useInput((input, key) => {
+    const lowerInput = input.toLowerCase();
+    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 isEnter =
+      key.return ||
+      (key as { enter?: boolean }).enter ||
+      keyName === "return" ||
+      keyName === "enter" ||
+      keySequence === "\r" ||
+      keySequence === "\n" ||
+      input === "\r" ||
+      input === "\n";
+    const isCtrlP =
+      keySequence === "\u0010" ||
+      input === "\u0010" ||
+      (key.ctrl && (lowerInput === "p" || keyName === "p")) ||
+      (!input && keyName === "p");
+    const typedValue = normalizeTypedValue(input, keyName, keySequence);
+
+    const paletteOpenCurrent = paletteOpenRef.current;
+    const inputActiveCurrent = inputActiveRef.current;
+    const itemsCurrent = itemsRef.current;
+    const selectionCurrent = selectionRef.current;
+
+    if (paletteOpenCurrent) {
+      if (isEscape || lowerInput === "q") {
+        closePalette();
+        return;
+      }
+      if (key.upArrow || key.leftArrow) {
+        setPaletteSelection((current) => Math.max(0, current - 1));
+        return;
+      }
+      if (key.downArrow || key.rightArrow) {
+        setPaletteSelection((current) => Math.min(COMMANDS.length - 1, current + 1));
+        return;
+      }
+      if (isEnter) {
+        const command = COMMANDS[paletteSelection];
+        closePalette();
+        if (command?.id === "add") {
+          startInput();
+        } else if (command?.id === "propose") {
+          handlePropose();
+        }
+      }
+      return;
+    }
+
+    if (inputActiveCurrent) {
+      if (isEscape) {
+        setInputActive(false);
+        inputValueRef.current = "";
+        setInputValue("");
+        return;
+      }
+      if (isEnter) {
+        handleAdd();
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setInputValue((current) => {
+          const nextValue = current.slice(0, -1);
+          inputValueRef.current = nextValue;
+          return nextValue;
+        });
+        return;
+      }
+      if (typedValue && !key.ctrl) {
+        setInputValue((current) => {
+          const nextValue = current + typedValue;
+          inputValueRef.current = nextValue;
+          return nextValue;
+        });
+      }
+      return;
+    }
+
+    if (isCtrlP) {
+      openPalette();
+      return;
+    }
+
+    if (typedValue && !key.ctrl) {
+      inputActiveRef.current = true;
+      setInputActive(true);
+      inputValueRef.current = typedValue;
+      setInputValue(typedValue);
+      return;
+    }
+
+    if (key.upArrow) {
+      const nextSelection = Math.max(0, selectionCurrent - 1);
+      selectionRef.current = nextSelection;
+      setSelection(nextSelection);
+      return;
+    }
+    if (key.downArrow) {
+      const nextSelection = Math.min(itemsCurrent.length - 1, selectionCurrent + 1);
+      selectionRef.current = nextSelection;
+      setSelection(nextSelection);
+    }
+  });
+
+  if (!schubDir) {
+    return (
+      <Box flexDirection="column">
+        <Text bold>Roadmap</Text>
+        <Text color="red">No .schub directory found.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold color="white">
+          Roadmap
+        </Text>
+      </Box>
+      {errorMessage ? (
+        <Box marginBottom={1}>
+          <Text color="red">{errorMessage}</Text>
+        </Box>
+      ) : null}
+      {items.length === 0 ? (
+        <Box marginLeft={1}>
+          <Text color="gray">No roadmap items found.</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {items.map((item, index) => {
+            const selected = index === selection;
+            return (
+              <Box key={`${item.index}-${item.story}`} marginLeft={1}>
+                <Text color={selected ? "blue" : "gray"}>{selected ? "›" : " "}</Text>
+                <Box marginLeft={1}>
+                  <Text color="white" bold={selected}>
+                    {item.index}
+                  </Text>
+                  <Text color="gray"> [{formatRef(item.proposalRef)}]</Text>
+                  <Text color="gray"> {item.story}</Text>
+                </Box>
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+      {inputActive ? (
+        <Box marginTop={1} marginLeft={1}>
+          <Text color="white">Add story:</Text>
+          <Text color="gray"> {inputValue || " "}</Text>
+        </Box>
+      ) : null}
+      {paletteOpen ? (
+        <Box borderStyle="round" borderColor="gray" flexDirection="column" marginTop={1} paddingX={1}>
+          <Text bold color="white">
+            Command Palette
+          </Text>
+          <Box flexDirection="column" marginTop={1}>
+            {COMMANDS.map((command, index) => {
+              const selected = index === paletteSelection;
+              return (
+                <Box key={command.id}>
+                  <Text color={selected ? "blue" : "gray"}>{selected ? "›" : " "}</Text>
+                  <Text color="white"> {command.label}</Text>
+                </Box>
+              );
+            })}
+          </Box>
+          <Text color="gray">enter to run · esc to cancel</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}