@meowlynxsea/koi 0.1.0

package/src/tui/components/pending-area.tsx

@@ -0,0 +1,88 @@
+/**
+ * Pending Area Component
+ *
+ * Displays queued (followUp) and sheer (steer) messages above the input box.
+ * Each message has its own cancel (×) button on the right side.
+ */
+
+import stringWidth from "string-width";
+import { isInternalNotification } from "../../agent/hooks.js";
+
+interface PendingAreaProps {
+  steering: readonly string[];
+  followUp: readonly string[];
+  width?: number;
+  onRemove: (type: "sheer" | "queued", index: number) => void;
+  onEdit?: (type: "sheer" | "queued", index: number) => void;
+}
+
+function truncateText(text: string, maxWidth: number): string {
+  const w = stringWidth(text);
+  if (w <= maxWidth) return text;
+  let result = "";
+  let currentWidth = 0;
+  const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+  for (const seg of segmenter.segment(text)) {
+    const g = seg.segment;
+    const gw = stringWidth(g);
+    if (currentWidth + gw + 3 > maxWidth) {
+      return result + "...";
+    }
+    result += g;
+    currentWidth += gw;
+  }
+  return result;
+}
+
+export function PendingArea({ steering, followUp, width = 80, onRemove, onEdit }: PendingAreaProps) {
+  const contentWidth = Math.max(1, width - 2);
+
+  // Filter out internal subagent task notifications from the steer list.
+  // When a background agent completes while the main agent is busy, it sends
+  // a <task-notification> via steer(). We don't want to show these in the UI.
+  const filteredSteering = steering.filter((t) => !isInternalNotification(t));
+
+  const all: { type: "sheer" | "queued"; text: string; index: number }[] = [
+    ...filteredSteering.map((t, i) => ({ type: "sheer" as const, text: t, index: i })),
+    ...followUp.map((t, i) => ({ type: "queued" as const, text: t, index: i })),
+  ];
+
+  if (all.length === 0) return null;
+
+  const editWidth = onEdit ? stringWidth(" ✎") : 0;
+  const lines = all.map((item) => {
+    const prefix = item.type === "sheer" ? "[Sheer] " : "[Queued] ";
+    const tagWidth = stringWidth(prefix) + stringWidth(" ×") + editWidth;
+    return {
+      ...item,
+      displayText: prefix + truncateText(item.text, Math.max(1, contentWidth - tagWidth)),
+    };
+  });
+
+  return (
+    <box width={width} flexDirection="column" paddingX={1}>
+      {lines.map((line) => (
+        <box key={`${line.type}-${line.index}`} flexDirection="row" width={contentWidth}>
+          <text fg={line.type === "sheer" ? "#ff79c6" : "#8be9fd"}>
+            {line.displayText}
+          </text>
+          <box flexGrow={1} />
+          {onEdit && (
+            <text
+              fg="#fbbf24"
+              onMouseUp={() => onEdit(line.type, line.index)}
+            >
+              {" ✎"}
+            </text>
+          )}
+          <text
+            fg="#ff5555"
+            onMouseUp={() => onRemove(line.type, line.index)}
+          >
+            {" ×"}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}

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

@@ -0,0 +1,119 @@
+/**
+ * Rename Session Modal
+ *
+ * Prompts the user for a new session title.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { createTextAttributes } from "@opentui/core";
+import type { TextareaRenderable } from "@opentui/core";
+
+interface RenameModalProps {
+  isActive: boolean;
+  currentTitle: string;
+  onConfirm: (newTitle: string) => void;
+  onCancel: () => void;
+}
+
+export function RenameModal({ isActive, currentTitle, onConfirm, onCancel }: RenameModalProps) {
+  const inputRef = useRef<TextareaRenderable>(null);
+  const [value, setValue] = useState(currentTitle);
+
+  useEffect(() => {
+    if (isActive) {
+      setValue(currentTitle);
+      setTimeout(() => {
+        const ta = inputRef.current;
+        if (ta) {
+          ta.editBuffer.replaceText(currentTitle);
+          ta.focus();
+        }
+      }, 10);
+    }
+  }, [isActive, currentTitle]);
+
+  useKeyboard((key) => {
+    if (!isActive) return;
+    if (key.name === "escape") {
+      onCancel();
+      return;
+    }
+    if (key.name === "return") {
+      if (value.trim()) {
+        onConfirm(value.trim());
+      }
+      return;
+    }
+  });
+
+  const handleContentChange = () => {
+    const text = inputRef.current?.editBuffer.getText() ?? "";
+    setValue(text);
+  };
+
+  if (!isActive) return null;
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      backgroundColor="#00000080"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={50}
+        flexDirection="column"
+        borderStyle="rounded"
+        borderColor="#4a4a5a"
+        backgroundColor="#1a1a2e"
+        paddingX={2}
+        paddingY={1}
+      >
+        <text
+          attributes={createTextAttributes({ bold: true })}
+          fg="#ff79c6"
+        >
+          Rename Session
+        </text>
+        <box marginTop={1} height={1} backgroundColor="#16213e" paddingX={1}>
+          <textarea
+            ref={inputRef}
+            initialValue={currentTitle}
+            focused={isActive}
+            showCursor
+            height={1}
+            wrapMode="none"
+            textColor="#f8f8f2"
+            backgroundColor="#16213e"
+            onContentChange={handleContentChange}
+          />
+        </box>
+        <box marginTop={1} flexDirection="row" gap={2}>
+          <box
+            paddingX={2}
+            backgroundColor="#2dd4bf"
+            onMouseUp={() => value.trim() && onConfirm(value.trim())}
+          >
+            <text attributes={createTextAttributes({ bold: true })} fg="white">
+              Confirm
+            </text>
+          </box>
+          <box
+            paddingX={2}
+            backgroundColor="#f43f5e"
+            onMouseUp={onCancel}
+          >
+            <text attributes={createTextAttributes({ bold: true })} fg="white">
+              Cancel
+            </text>
+          </box>
+        </box>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,233 @@
+/**
+ * Session Selection Modal
+ *
+ * Secondary modal for browsing and switching between conversation sessions.
+ * Lists all persisted sessions with metadata.
+ */
+
+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 { SessionMeta } from "../../agent/session-store.js";
+
+interface SessionModalProps {
+  isActive: boolean;
+  onClose: () => void;
+  sessions: SessionMeta[];
+  currentSessionId: string | null;
+  onSelect: (sessionFile: string) => void;
+  onNewSession: () => void;
+  onDelete?: (sessionId: string) => void;
+  keyboardDisabled?: boolean;
+}
+
+function formatRelativeTime(date: Date): string {
+  // Handle invalid dates to prevent TextNodeRenderable errors
+  if (!(date instanceof Date) || isNaN(date.getTime())) {
+    return "unknown";
+  }
+
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+export function SessionModal({
+  isActive,
+  onClose,
+  sessions,
+  currentSessionId,
+  onSelect,
+  onNewSession,
+  onDelete,
+  keyboardDisabled,
+}: SessionModalProps) {
+  const { width, height } = useTerminalDimensions();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  const panelWidth = Math.min(70, Math.max(50, Math.floor(width * 0.7)));
+  const listHeight = Math.min(14, Math.floor(height * 0.5));
+
+  // Reset when opened
+  useEffect(() => {
+    if (isActive) {
+      setSelectedIndex(0);
+      setScrollOffset(0);
+    }
+  }, [isActive]);
+
+  // Ensure selected index is valid
+  const safeIndex = useMemo(() => {
+    if (sessions.length === 0) return -1;
+    return Math.max(0, Math.min(selectedIndex, sessions.length - 1));
+  }, [selectedIndex, sessions.length]);
+
+  // Keep selected index valid when sessions change
+  useEffect(() => {
+    if (sessions.length === 0) {
+      setSelectedIndex(0);
+    } else {
+      setSelectedIndex((prev) => Math.min(prev, sessions.length - 1));
+    }
+  }, [sessions.length]);
+
+  // Auto-scroll selected into view
+  useEffect(() => {
+    if (safeIndex === -1) return;
+    if (safeIndex < scrollOffset) {
+      setScrollOffset(safeIndex);
+    } else if (safeIndex >= scrollOffset + listHeight) {
+      setScrollOffset(safeIndex - listHeight + 1);
+    }
+  }, [safeIndex, listHeight, scrollOffset]);
+
+  useKeyboard((key) => {
+    if (!isActive || keyboardDisabled) 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(sessions.length - 1, prev + 1)));
+      return;
+    }
+    if (key.name === "n") {
+      onNewSession();
+      return;
+    }
+    if (key.name === "return") {
+      const s = sessions[safeIndex];
+      if (s) {
+        onSelect(s.filePath);
+      }
+      return;
+    }
+    if (key.name === "d") {
+      const s = sessions[safeIndex];
+      if (s && onDelete) {
+        onDelete(s.id);
+      }
+      return;
+    }
+  });
+
+  if (!isActive) return null;
+
+  const visibleSessions = sessions.slice(scrollOffset, scrollOffset + 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={2}
+        paddingY={1}
+      >
+        {/* Header */}
+        <box flexDirection="row" justifyContent="space-between">
+          <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+            Sessions
+          </text>
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            {`${sessions.length} total`}
+          </text>
+        </box>
+
+        {/* Session list */}
+        <box
+          height={listHeight}
+          flexDirection="column"
+          overflow="hidden"
+          marginTop={1}
+        >
+          {sessions.length === 0 && (
+            <box height={1}>
+              <text fg="#6c6c7c">No sessions found.</text>
+            </box>
+          )}
+          {visibleSessions.map((s, idx) => {
+            const flatIndex = scrollOffset + idx;
+            const isSelected = flatIndex === safeIndex;
+            const isCurrent = s.id === currentSessionId;
+
+            // Ensure safe string values for rendering
+            const safeTitle = String(s.title ?? "Untitled Session");
+            const safeMessageCount = typeof s.messageCount === "number" ? s.messageCount : 0;
+            const safeUpdatedAt =
+              s.updatedAt instanceof Date && !isNaN(s.updatedAt.getTime())
+                ? s.updatedAt
+                : new Date();
+
+            return (
+              <box
+                key={`s-${s.id}-${flatIndex}`}
+                height={1}
+                backgroundColor={isSelected ? "#44475a" : undefined}
+                flexDirection="row"
+                onMouseUp={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  onSelect(s.filePath);
+                }}
+              >
+                <text
+                  fg={isSelected ? "#ff79c6" : isCurrent ? "#00f5ff" : "#f8f8f2"}
+                  attributes={createTextAttributes({ bold: isCurrent })}
+                  width={Math.max(1, panelWidth - 24)}
+                  truncate={true}
+                >
+                  {isCurrent ? "● " : "  "}
+                  {safeTitle}
+                </text>
+                <box flexDirection="row" gap={1}>
+                  <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+                    {String(safeMessageCount)}msg
+                  </text>
+                  <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })} width={8}>
+                    {formatRelativeTime(safeUpdatedAt)}
+                  </text>
+                </box>
+              </box>
+            );
+          })}
+        </box>
+
+        {/* Footer hints */}
+        <box marginTop={1} flexDirection="row" justifyContent="space-between">
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            ↑↓ Navigate  Enter Switch  n New  d Delete
+          </text>
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            Esc Close
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}