@meowlynxsea/koi 0.1.0

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

@@ -0,0 +1,131 @@
+/**
+ * Exit Confirmation Modal
+ *
+ * Displays a centered dialog asking the user to confirm application exit.
+ * Supports keyboard (Y/Enter/N/Esc) and native mouse click.
+ */
+
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { createTextAttributes } from "@opentui/core";
+import type { MouseEvent } from "@opentui/core";
+
+interface ExitModalProps {
+  isActive: boolean;
+  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={2}
+      backgroundColor={currentBg}
+      onMouseUp={handleMouseUp}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
+      <text fg={fgColor} attributes={createTextAttributes({ bold: true })}>
+        {label}
+      </text>
+    </box>
+  );
+}
+
+export function ExitModal({ isActive, onConfirm, onCancel }: ExitModalProps) {
+  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={3}
+        paddingY={1}
+        flexDirection="column"
+        alignItems="center"
+      >
+        <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+          Exit Koi?
+        </text>
+        <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+          Are you sure you want to exit?
+        </text>
+        <box marginTop={1} flexDirection="row" gap={2}>
+          <Button
+            label="Exit"
+            fgColor="white"
+            bgColor="#f43f5e"
+            hoverBgColor="#fb7185"
+            isActive={isActive}
+            onClick={onConfirm}
+          />
+          <Button
+            label="Stay"
+            fgColor="white"
+            bgColor="#2dd4bf"
+            hoverBgColor="#5eead4"
+            isActive={isActive}
+            onClick={onCancel}
+          />
+        </box>
+        <box marginTop={1}>
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            Y/Enter Confirm  N/Esc Cancel
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,377 @@
+/**
+ * Fork Modal — Conversation Branch View
+ *
+ * Displays only user and assistant messages from the session tree
+ * as an indented, navigable list. Users can select a user message
+ * to fork from that point in the conversation history.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { createTextAttributes } from "@opentui/core";
+import type { MouseEvent } from "@opentui/core";
+import type { AgentSession } from "@mariozechner/pi-coding-agent";
+import { isInternalNotification } from "../../agent/hooks.js";
+
+type SessionManagerType = AgentSession["sessionManager"];
+type SessionTreeNode = ReturnType<SessionManagerType["getTree"]>[number];
+
+interface ForkModalProps {
+  isActive: boolean;
+  onClose: () => void;
+  session: AgentSession | null;
+  onFork: (entryId: string) => void;
+}
+
+interface TreeRow {
+  node: SessionTreeNode;
+  depth: number;
+  index: number;
+  isUserMessage: boolean;
+  displayText: string;
+  isLast: boolean;
+  parentIsLast: boolean[];
+}
+
+interface MessageEntry {
+  type: "message";
+  message: {
+    role: string;
+    content: unknown;
+  };
+}
+
+/**
+ * Type Guards
+ *
+ * isMessageEntry narrows the generic SessionTreeNode entry to a message-shaped object.
+ * isVisibleNode filters the tree to only user/assistant messages (hides tool_results, compaction nodes, etc.).
+ */
+
+function isMessageEntry(entry: unknown): entry is MessageEntry {
+  return (
+    typeof entry === "object" &&
+    entry !== null &&
+    "type" in entry &&
+    (entry as Record<string, unknown>)["type"] === "message" &&
+    "message" in entry &&
+    typeof (entry as Record<string, unknown>)["message"] === "object" &&
+    (entry as Record<string, unknown>)["message"] !== null
+  );
+}
+
+function isVisibleNode(node: SessionTreeNode): boolean {
+  const entry = node.entry;
+  if (!isMessageEntry(entry)) return false;
+  if (entry.message.role !== "user") return false;
+  // Hide internal subagent notifications — they are not real user messages.
+  const text = extractUserText(entry.message.content);
+  return !isInternalNotification(text);
+}
+
+function isUserMessageEntry(entry: unknown): boolean {
+  return isMessageEntry(entry) && entry.message.role === "user";
+}
+
+/**
+ * Text Extraction
+ *
+ * Pi messages may be plain strings or arrays of {type, text} blocks.
+ * These helpers normalize both shapes into a single string for the tree view.
+ */
+
+function extractTextFromBlocks(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+
+  return content
+    .filter((block): block is { type: string; text?: string } =>
+      typeof block === "object" && block !== null && "type" in block
+    )
+    .filter((block) => block.type === "text")
+    .map((block) => block.text ?? "")
+    .join("");
+}
+
+function extractUserText(content: unknown): string {
+  return extractTextFromBlocks(content) || "(empty)";
+}
+
+function extractAssistantText(msg: { content: unknown }): string {
+  const text = extractTextFromBlocks(msg.content);
+  return text.slice(0, 50) || "(assistant)";
+}
+
+function formatEntry(node: SessionTreeNode): string {
+  const entry = node.entry;
+  if (!isMessageEntry(entry)) return "";
+
+  const msg = entry.message;
+  if (msg.role === "user") return extractUserText(msg.content);
+  if (msg.role === "assistant") return extractAssistantText(msg as { content: unknown });
+  return "";
+}
+
+/**
+ * Tree Flattening
+ *
+ * Converts the recursive SessionTreeNode structure into a flat list of TreeRows.
+ * Hidden nodes (tool results, compaction markers) are skipped but their children are promoted
+ * to the same depth so the conversation flow stays visually continuous.
+ */
+
+function flattenTree(
+  nodes: SessionTreeNode[],
+  depth = 0,
+  parentIsLast: boolean[] = [],
+  result: TreeRow[] = []
+): TreeRow[] {
+  const visibleNodes = nodes.filter(isVisibleNode);
+  let visibleIndex = 0;
+
+  for (const node of nodes) {
+    const isVisible = isVisibleNode(node);
+
+    if (isVisible) {
+      const isLast = visibleIndex === visibleNodes.length - 1;
+      result.push({
+        node,
+        depth,
+        index: result.length,
+        isUserMessage: isUserMessageEntry(node.entry),
+        displayText: formatEntry(node),
+        isLast,
+        parentIsLast: [...parentIsLast],
+      });
+
+      if (node.children.length > 0) {
+        flattenTree(node.children, depth + 1, [...parentIsLast, isLast], result);
+      }
+      visibleIndex++;
+    } else if (node.children.length > 0) {
+      // Hidden nodes pass children through at same depth
+      flattenTree(node.children, depth, [...parentIsLast], result);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Tree Prefix
+ *
+ * Builds the "│  └ " ASCII art prefix for each tree row based on depth and sibling position.
+ * Deep trees are truncated with "…" so the rightmost branch structure remains visible.
+ */
+
+function treePrefix(depth: number, parentIsLast: boolean[], isLast: boolean): string {
+  let prefix = "";
+  for (let i = 0; i < depth; i++) {
+    prefix += parentIsLast[i] ? " " : "│";
+  }
+  prefix += isLast ? "└ " : "├ ";
+  return prefix;
+}
+
+function getVisiblePrefix(row: TreeRow, contentWidth: number): string {
+  const prefix = treePrefix(row.depth, row.parentIsLast, row.isLast);
+  if (prefix.length <= contentWidth) return prefix;
+  return "…" + prefix.slice(-(contentWidth - 2));
+}
+
+/**
+ * Default Selection
+ *
+ * When the modal opens, auto-selects the last user message on the current active branch
+ * so the user can press Enter immediately without manual navigation.
+ */
+
+function findDefaultIndex(rows: TreeRow[], session: AgentSession): number {
+  const selectable = rows.filter((r) => r.isUserMessage);
+  if (selectable.length === 0) return 0;
+
+  try {
+    const branch = session.sessionManager.getBranch();
+    const lastUserEntry = [...branch]
+      .reverse()
+      .find((e) => isUserMessageEntry(e));
+
+    if (lastUserEntry) {
+      const idx = selectable.findIndex((r) => r.node.entry.id === lastUserEntry.id);
+      if (idx >= 0) return idx;
+    }
+  } catch {
+    // ignore
+  }
+
+  return selectable.length - 1;
+}
+
+/**
+ * ForkModal
+ *
+ * Interactive tree view of the conversation history.
+ * Only user messages are selectable (Enter / mouse click) because forking
+ * from an assistant node would cut off the user's original question.
+ */
+
+export function ForkModal({
+  isActive,
+  onClose,
+  session,
+  onFork,
+}: ForkModalProps) {
+  const { width, height } = useTerminalDimensions();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [rows, setRows] = useState<TreeRow[]>([]);
+
+  // Calculate panel dimensions
+  const panelWidth = Math.min(80, Math.max(52, Math.floor(width * 0.8)));
+  const listHeight = Math.min(16, Math.floor(height * 0.5));
+  const contentWidth = Math.max(1, panelWidth - 4);
+
+  // Recompute tree rows when modal opens
+  useEffect(() => {
+    if (!isActive || !session) {
+      setRows([]);
+      return;
+    }
+    try {
+      const tree = session.sessionManager.getTree();
+      const newRows = flattenTree(tree);
+      setRows(newRows);
+      setSelectedIndex(findDefaultIndex(newRows, session));
+    } catch {
+      setRows([]);
+      setSelectedIndex(0);
+    }
+  }, [isActive, session]);
+
+  const selectableRows = useMemo(() => rows.filter((r) => r.isUserMessage), [rows]);
+
+  const safeIndex = useMemo(() => {
+    if (selectableRows.length === 0) return -1;
+    return Math.max(0, Math.min(selectedIndex, selectableRows.length - 1));
+  }, [selectedIndex, selectableRows.length]);
+
+  const selectedRow = safeIndex >= 0 ? selectableRows[safeIndex] : null;
+
+  // Keep selected row near the 5th visible line
+  useEffect(() => {
+    if (!selectedRow) {
+      setScrollOffset(0);
+      return;
+    }
+    const flatIndex = selectedRow.index;
+    const maxOffset = Math.max(0, rows.length - listHeight);
+    setScrollOffset(Math.max(0, Math.min(flatIndex - 4, maxOffset)));
+  }, [selectedRow, listHeight, rows.length]);
+
+  useKeyboard((key) => {
+    if (!isActive) return;
+
+    if (key.name === "escape") {
+      onClose();
+      return;
+    }
+    if (key.name === "up") {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+      return;
+    }
+    if (key.name === "down") {
+      setSelectedIndex((prev) => Math.max(0, Math.min(selectableRows.length - 1, prev + 1)));
+      return;
+    }
+    if (key.name === "return") {
+      const row = selectableRows[safeIndex];
+      if (row) onFork(row.node.entry.id);
+      return;
+    }
+  });
+
+  if (!isActive) return null;
+
+  const visibleRows = rows.slice(scrollOffset, scrollOffset + listHeight);
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      backgroundColor="#00000080"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        alignSelf="center"
+        width={panelWidth}
+        flexDirection="column"
+        borderStyle="rounded"
+        borderColor="#4a4a5a"
+        backgroundColor="#1a1a2e"
+        paddingX={2}
+        paddingY={1}
+      >
+        {/* Header */}
+        <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+          Fork Session
+        </text>
+        <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })} marginTop={1}>
+          Select a user message to branch from:
+        </text>
+
+        {/* Tree list */}
+        <box height={listHeight} flexDirection="column" overflow="hidden" marginTop={1}>
+          {rows.length === 0 && (
+            <box height={1}>
+              <text fg="#6c6c7c">No messages available.</text>
+            </box>
+          )}
+          {visibleRows.map((row) => {
+            const isSelected = selectedRow?.index === row.index;
+            const prefix = getVisiblePrefix(row, contentWidth);
+            const availableWidth = Math.max(1, contentWidth - prefix.length);
+            const displayText =
+              row.displayText.length > availableWidth
+                ? row.displayText.slice(0, availableWidth - 1) + "…"
+                : row.displayText;
+
+            const fgColor = row.isUserMessage
+              ? isSelected ? "#ff79c6" : "#f8f8f2"
+              : "#6c6c7c";
+
+            return (
+              <box
+                key={`t-${row.node.entry.id}-${row.index}`}
+                height={1}
+                backgroundColor={isSelected ? "#44475a" : undefined}
+                flexDirection="row"
+                onMouseUp={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  if (row.isUserMessage) onFork(row.node.entry.id);
+                }}
+              >
+                <text fg={fgColor} attributes={createTextAttributes({ dim: !row.isUserMessage })}>
+                  {prefix}{displayText}
+                </text>
+              </box>
+            );
+          })}
+        </box>
+
+        {/* Footer hints */}
+        <box marginTop={1} flexDirection="row" justifyContent="space-between">
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            ↑↓ Navigate  Enter Fork
+          </text>
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            Esc Close
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/image-preview-modal.tsx

@@ -0,0 +1,141 @@
+/**
+ * Image Preview Modal
+ *
+ * Shows an image URL/path in a modal overlay with a coloured half-block
+ * preview generated via jimp (pure JS, no external binaries).
+ */
+
+import { useState, useEffect } from "react";
+import { useKeyboard } from "@opentui/react";
+import { createTextAttributes } from "@opentui/core";
+import { imageToHalfBlocks, type ImageRow } from "./image-utils.js";
+
+interface ImagePreviewModalProps {
+  isActive: boolean;
+  url: string;
+  onClose: () => void;
+  terminalWidth: number;
+  terminalHeight: number;
+}
+
+function ImagePreviewContent({ rows }: { rows: ImageRow[] }) {
+  return (
+    <box flexDirection="column">
+      {rows.map((row, y) => (
+        <text key={y}>
+          {row.map((cell, x) => (
+            <span key={x} fg={cell.fg} bg={cell.bg}>
+              {"▄"}
+            </span>
+          ))}
+        </text>
+      ))}
+    </box>
+  );
+}
+
+export function ImagePreviewModal({
+  isActive,
+  url,
+  onClose,
+  terminalWidth,
+  terminalHeight,
+}: ImagePreviewModalProps) {
+  const [rows, setRows] = useState<ImageRow[] | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useKeyboard((key) => {
+    if (!isActive) return;
+    if (key.name === "escape" || key.name === "q") {
+      onClose();
+    }
+  });
+
+  const modalW = Math.max(20, Math.floor(terminalWidth * 0.8));
+  const modalH = Math.max(10, Math.floor(terminalHeight * 0.8));
+  const imgMaxW = Math.max(10, modalW - 4);
+  const imgMaxH = Math.max(4, modalH - 4);
+
+  useEffect(() => {
+    if (!isActive) {
+      setRows(null);
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+
+    async function loadPreview() {
+      setLoading(true);
+      try {
+        const data = await imageToHalfBlocks(url, imgMaxW, imgMaxH);
+        if (!cancelled) setRows(data);
+      } catch {
+        if (!cancelled) setRows(null);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    void loadPreview();
+    return () => {
+      cancelled = true;
+    };
+  }, [isActive, url, imgMaxW, imgMaxH]);
+
+  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"
+        width={modalW}
+        height={modalH}
+      >
+        {/* Header row */}
+        <box flexDirection="row" justifyContent="space-between" alignItems="center">
+          <text fg="#8be9fd" attributes={createTextAttributes({ bold: true })}>
+            Image Preview
+          </text>
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            Esc/Q
+          </text>
+        </box>
+
+        {/* URL — single line, truncated if too long */}
+        <text fg="#6c6c7c" wrapMode="none" truncate={true}>
+          {url}
+        </text>
+
+        {/* Image area — centered both horizontally and vertically */}
+        <box flexDirection="column" flexGrow={1} alignItems="center" justifyContent="center">
+          {rows && <ImagePreviewContent rows={rows} />}
+          {!rows && !loading && (
+            <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+              Could not render image
+            </text>
+          )}
+          {loading && (
+            <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+              Loading...
+            </text>
+          )}
+        </box>
+      </box>
+    </box>
+  );
+}