@meowlynxsea/koi 0.1.0

package/src/tui/components/command-panel.tsx

@@ -0,0 +1,261 @@
+/**
+ * Command Panel Component
+ *
+ * A modal command palette with a single-line filter input and a scrollable
+ * list of sectioned commands. Opened with Ctrl+P or "/" in empty prompt.
+ * Closed with Ctrl+P, Esc, or clearing the input.
+ */
+
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { createTextAttributes, type KeyBinding } from "@opentui/core";
+import type { TextareaRenderable } from "@opentui/core";
+
+export interface CommandDef {
+  id: string;
+  label: string;
+  section: string;
+  action: () => void;
+}
+
+interface CommandPanelProps {
+  isActive: boolean;
+  onClose: () => void;
+  commands: CommandDef[];
+}
+
+interface ListItem {
+  type: "header" | "command";
+  section?: string;
+  cmd?: CommandDef;
+  cmdIndex?: number;
+}
+
+export function CommandPanel({ isActive, onClose, commands }: CommandPanelProps) {
+  const { width, height } = useTerminalDimensions();
+  const inputRef = useRef<TextareaRenderable>(null);
+  const [filterText, setFilterText] = useState("");
+  const [selectedCmdIndex, setSelectedCmdIndex] = useState(0);
+  const scrollOffsetRef = useRef(0);
+
+  const panelWidth = Math.min(70, Math.max(40, Math.floor(width * 0.7)));
+  const listHeight = Math.min(12, Math.floor(height * 0.4));
+
+  // Reset when opened
+  useLayoutEffect(() => {
+    if (isActive) {
+      setFilterText("");
+      setSelectedCmdIndex(0);
+      scrollOffsetRef.current = 0;
+      const ta = inputRef.current;
+      if (ta) {
+        ta.editBuffer.replaceText("");
+        ta.focus();
+      }
+    }
+  }, [isActive]);
+
+  // Build filtered flat list
+  const query = filterText;
+  const { flatItems, cmdCount } = useMemo(() => {
+    let filtered = commands;
+    if (query) {
+      const q = query.toLowerCase();
+      // Filter and sort by match priority: id > label > section
+      filtered = commands
+        .map((cmd) => {
+          const idMatch = cmd.id.toLowerCase().includes(q);
+          const labelMatch = cmd.label.toLowerCase().includes(q);
+          const sectionMatch = cmd.section.toLowerCase().includes(q);
+          // Priority: 0 = id match (highest), 1 = label match, 2 = section match, 3 = no match
+          const priority = !idMatch && !labelMatch && !sectionMatch ? 3
+            : idMatch ? 0
+            : labelMatch ? 1
+            : 2;
+          return { cmd, priority };
+        })
+        .filter((item) => item.priority < 3)
+        .sort((a, b) => a.priority - b.priority)
+        .map((item) => item.cmd);
+    }
+
+    const grouped = new Map<string, CommandDef[]>();
+    for (const cmd of filtered) {
+      if (!grouped.has(cmd.section)) grouped.set(cmd.section, []);
+      grouped.get(cmd.section)!.push(cmd);
+    }
+
+    const items: ListItem[] = [];
+    let cmdIdx = 0;
+    for (const [section, cmds] of grouped) {
+      items.push({ type: "header", section });
+      for (const cmd of cmds) {
+        items.push({ type: "command", cmd, cmdIndex: cmdIdx });
+        cmdIdx++;
+      }
+    }
+    return { flatItems: items, cmdCount: cmdIdx };
+  }, [commands, query]);
+
+  // Effective scroll offset (synced from ref)
+  const effectiveScrollOffset = scrollOffsetRef.current;
+
+  // Global keyboard for navigation and close shortcuts
+  useKeyboard((key) => {
+    if (!isActive) return;
+    if (key.ctrl && key.name === "p") {
+      key.preventDefault();
+      key.stopPropagation();
+      onClose();
+      return;
+    }
+    if (key.name === "escape") {
+      key.preventDefault();
+      key.stopPropagation();
+      onClose();
+      return;
+    }
+    
+    // Navigation with direct scroll calculation
+    if (key.name === "up" || key.name === "down") {
+      key.preventDefault();
+      key.stopPropagation();
+      
+      const newIndex = key.name === "up" 
+        ? Math.max(0, selectedCmdIndex - 1)
+        : Math.min(cmdCount - 1, selectedCmdIndex + 1);
+      
+      // Calculate scroll based on new index
+      const newFlatIndex = flatItems.findIndex(
+        (i) => i.type === "command" && i.cmdIndex === newIndex
+      );
+      
+      const currentScroll = scrollOffsetRef.current;
+      let newScrollOffset = currentScroll;
+      if (newFlatIndex !== -1) {
+        if (newFlatIndex < currentScroll) {
+          newScrollOffset = newFlatIndex;
+        } else if (newFlatIndex > currentScroll + listHeight - 1) {
+          newScrollOffset = newFlatIndex - listHeight + 1;
+        }
+      }
+      
+      console.log('[CommandPanel] Key press:', {
+        key: key.name,
+        newIndex,
+        newFlatIndex,
+        currentScroll,
+        listHeight,
+        newScrollOffset
+      });
+      
+      scrollOffsetRef.current = newScrollOffset;
+      setSelectedCmdIndex(newIndex);
+      return;
+    }
+  });
+
+  const handleContentChange = () => {
+    const text = inputRef.current?.editBuffer.getText() ?? "";
+    setFilterText(text);
+    setSelectedCmdIndex(0);
+    scrollOffsetRef.current = 0;
+  };
+
+  const handleSubmit = () => {
+    const selectedItem = flatItems.find(
+      (i) => i.type === "command" && i.cmdIndex === selectedCmdIndex
+    );
+    if (selectedItem?.cmd) {
+      onClose();
+      selectedItem.cmd.action();
+    }
+  };
+
+  const keyBindings = useMemo<KeyBinding[]>(
+    () => [{ name: "return", action: "submit" }],
+    []
+  );
+
+  if (!isActive) return null;
+
+  const visibleItems = flatItems.slice(effectiveScrollOffset, effectiveScrollOffset + listHeight);
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      backgroundColor="#00000080"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={panelWidth}
+        flexDirection="column"
+        borderStyle="rounded"
+        borderColor="#4a4a5a"
+        backgroundColor="#1a1a2e"
+        paddingX={1}
+        paddingY={1}
+      >
+        {/* Filter input */}
+        <textarea
+          ref={inputRef}
+          initialValue=""
+          focused={isActive}
+          showCursor
+          height={1}
+          wrapMode="none"
+          marginX={1}
+          textColor="#f8f8f2"
+          backgroundColor="#16213e"
+          onContentChange={handleContentChange}
+          onSubmit={handleSubmit}
+          keyBindings={keyBindings}
+        />
+
+        {/* Separator */}
+        <box height={1} marginTop={1}>
+          <text fg="#4a4a5a">
+            {"─".repeat(panelWidth - 2)}
+          </text>
+        </box>
+
+        {/* Command list */}
+        <box height={listHeight} flexDirection="column" overflow="hidden">
+          {visibleItems.map((item, idx) => {
+            const flatIndex = effectiveScrollOffset + idx;
+            if (item.type === "header") {
+              return (
+                <box key={`h-${item.section}-${flatIndex}`} height={1}>
+                  <text
+                    fg="#ff79c6"
+                    attributes={createTextAttributes({ bold: true })}
+                  >
+                    {item.section}
+                  </text>
+                </box>
+              );
+            }
+            const isSelected = item.cmdIndex === selectedCmdIndex;
+            return (
+              <box key={`c-${item.cmd!.id}-${flatIndex}`} height={1} backgroundColor={isSelected ? "#44475a" : undefined} paddingLeft={2}>
+                <text fg={isSelected ? "#ff79c6" : "#f8f8f2"}>
+                  {`${item.cmd!.id}  ${item.cmd!.label}`}
+                </text>
+              </box>
+            );
+          })}
+          {flatItems.length === 0 && (
+            <box height={1}>
+              <text fg="#6c6c7c">No commands found</text>
+            </box>
+          )}
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/confirm-modal.tsx

@@ -0,0 +1,135 @@
+/**
+ * Confirm Modal
+ *
+ * Generic confirmation dialog with customizable title, message, and buttons.
+ */
+
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { createTextAttributes } from "@opentui/core";
+import type { MouseEvent } from "@opentui/core";
+
+interface ConfirmModalProps {
+  isActive: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+function Button({
+  label,
+  fgColor,
+  bgColor,
+  hoverBgColor,
+  isActive,
+  onClick,
+}: {
+  label: string;
+  fgColor: string;
+  bgColor: string;
+  hoverBgColor: string;
+  isActive: boolean;
+  onClick: () => void;
+}) {
+  const [hover, setHover] = useState(false);
+  const currentBg = hover ? hoverBgColor : bgColor;
+
+  const handleMouseUp = (e: MouseEvent) => {
+    if (isActive) {
+      e.stopPropagation();
+      onClick();
+    }
+  };
+
+  const handleMouseOver = () => {
+    if (isActive) setHover(true);
+  };
+
+  const handleMouseOut = () => {
+    if (isActive) setHover(false);
+  };
+
+  return (
+    <box
+      paddingX={1}
+      backgroundColor={currentBg}
+      onMouseUp={handleMouseUp}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
+      <text fg={fgColor} attributes={createTextAttributes({ bold: true })}>
+        {label}
+      </text>
+    </box>
+  );
+}
+
+export function ConfirmModal({
+  isActive,
+  title,
+  message,
+  confirmLabel = "Yes",
+  cancelLabel = "No",
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) {
+  useKeyboard((key) => {
+    if (!isActive) return;
+    if (key.name === "y" || key.name === "return") {
+      onConfirm();
+    } else if (key.name === "n" || key.name === "escape") {
+      onCancel();
+    }
+  });
+
+  if (!isActive) return null;
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      backgroundColor="#00000080"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        borderStyle="rounded"
+        borderColor="#4a4a5a"
+        backgroundColor="#1a1a2e"
+        paddingX={2}
+        paddingY={1}
+        flexDirection="column"
+        alignItems="center"
+      >
+        <text attributes={createTextAttributes({ bold: true })} fg="#fb7185">
+          {title}
+        </text>
+        <text>{message}</text>
+        <box marginTop={1} flexDirection="row" gap={2}>
+          <Button
+            label={` ${confirmLabel} `}
+            fgColor="white"
+            bgColor="#f43f5e"
+            hoverBgColor="#fb7185"
+            isActive={isActive}
+            onClick={onConfirm}
+          />
+          <Button
+            label={` ${cancelLabel} `}
+            fgColor="white"
+            bgColor="#2dd4bf"
+            hoverBgColor="#5eead4"
+            isActive={isActive}
+            onClick={onCancel}
+          />
+        </box>
+      </box>
+    </box>
+  );
+}