@meowlynxsea/koi 0.1.0

package/src/tui/components/mcp/MCPSettings.tsx

@@ -0,0 +1,386 @@
+/**
+ * MCP Settings Component
+ */
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { createTextAttributes, type TextareaRenderable } from "@opentui/core";
+import type { McpServerConfig } from "../../../services/mcp/types.js";
+import {
+  getAllMcpConfigs,
+  getMcpConfig,
+  setMcpConfig,
+  removeMcpConfig,
+  isMcpServerDisabled,
+  validateMcpConfig,
+  loadMcpConfigs,
+} from "../../../services/mcp/config.js";
+import { connectMcpServer, disconnectMcpServer, toggleMcpServer, getMcpConnections } from "../../../services/mcp/connection-manager.js";
+
+interface MCPSettingsProps {
+  isActive: boolean;
+  onClose: () => void;
+  onMcpChange?: () => void;
+}
+
+type View = "list" | "add" | "edit";
+type ServerType = "stdio" | "sse" | "http" | "ws";
+
+export function MCPSettings({ isActive, onClose, onMcpChange }: MCPSettingsProps) {
+  const { width } = useTerminalDimensions();
+  const [view, setView] = useState<View>("list");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [servers, setServers] = useState<string[]>([]);
+  const [message, setMessage] = useState<string | null>(null);
+
+  // Form state
+  const [editName, setEditName] = useState("");
+  const [editType, setEditType] = useState<ServerType>("stdio");
+  const [editCommand, setEditCommand] = useState("");
+  const [editArgs, setEditArgs] = useState("");
+  const [editUrl, setEditUrl] = useState("");
+  const [editHeaders, setEditHeaders] = useState("");
+
+  // Textarea refs
+  const nameRef = useRef<TextareaRenderable>(null);
+  const commandRef = useRef<TextareaRenderable>(null);
+  const argsRef = useRef<TextareaRenderable>(null);
+  const urlRef = useRef<TextareaRenderable>(null);
+  const headersRef = useRef<TextareaRenderable>(null);
+
+  const panelWidth = Math.min(75, Math.max(50, Math.floor(width * 0.8)));
+
+  const refreshServers = useCallback(() => {
+    loadMcpConfigs();
+    const configs = getAllMcpConfigs();
+    setServers(Array.from(configs.keys()));
+    setSelectedIndex(0);
+  }, []);
+
+  useEffect(() => {
+    if (isActive) {
+      refreshServers();
+      setView("list");
+      setMessage(null);
+    }
+  }, [isActive, refreshServers]);
+
+  const getServerStatus = (name: string) => {
+    const connection = getMcpConnections().get(name);
+    if (connection) return connection.status;
+    if (isMcpServerDisabled(name)) return "disabled";
+    return "disconnected";
+  };
+
+  const getServerType = (name: string) => {
+    const config = getMcpConfig(name);
+    return config?.type ?? "unknown";
+  };
+
+  const handleConnect = async (name: string) => {
+    setMessage(`Connecting to ${name}...`);
+    const result = await connectMcpServer(name);
+    setMessage(result.success ? `Connected to ${name}` : `Failed: ${result.error}`);
+    refreshServers();
+    onMcpChange?.();
+  };
+
+  const handleToggle = async (name: string) => {
+    const connection = getMcpConnections().get(name);
+    const status = connection?.status ?? "disconnected";
+
+    if (status === "connected" || status === "failed") {
+      await toggleMcpServer(name, false);
+      setMessage(`Disabled ${name}`);
+      refreshServers();
+      onMcpChange?.();
+    } else {
+      await toggleMcpServer(name, true);
+      setMessage(`Enabled ${name}`);
+      refreshServers();
+      onMcpChange?.();
+    }
+  };
+
+  const handleDelete = (name: string) => {
+    removeMcpConfig(name);
+    disconnectMcpServer(name).catch(() => {});
+    setMessage(`Removed ${name}`);
+    refreshServers();
+    onMcpChange?.();
+  };
+
+  const handleAddNew = () => {
+    setEditName("");
+    setEditType("stdio");
+    setEditCommand("");
+    setEditArgs("");
+    setEditUrl("");
+    setEditHeaders("");
+    setView("add");
+  };
+
+  const handleEdit = (name: string) => {
+    const config = getMcpConfig(name);
+    if (!config) {
+      setMessage(`Config not found for ${name}`);
+      return;
+    }
+
+    setEditName(name);
+    if (config.type === "stdio" && config.command) {
+      setEditType("stdio");
+      setEditCommand(config.command);
+      setEditArgs(config.args?.join(" ") ?? "");
+    } else {
+      setEditType((config.type ?? "sse") as ServerType);
+      setEditUrl(config.url ?? "");
+      setEditHeaders(Object.entries(config.headers ?? {}).map(([k, v]) => `${k}:${v}`).join("\n"));
+    }
+    setView("edit");
+  };
+
+  const handleSave = () => {
+    let config: McpServerConfig;
+
+    if (editType === "stdio") {
+      if (!editCommand.trim()) { setMessage("Command is required for stdio servers"); return; }
+      config = { type: "stdio", command: editCommand.trim(), args: editArgs.trim() ? editArgs.trim().split(/\s+/) : [] };
+    } else {
+      if (!editUrl.trim()) { setMessage("URL is required for remote servers"); return; }
+      const headers: Record<string, string> = {};
+      for (const line of editHeaders.split("\n")) {
+        const [key, ...valueParts] = line.split(":");
+        if (key && valueParts.length > 0) headers[key.trim()] = valueParts.join(":").trim();
+      }
+      config = { type: editType, url: editUrl.trim(), headers: Object.keys(headers).length > 0 ? headers : undefined };
+    }
+
+    const nameToUse = editName.trim() || (editType === "stdio" ? editCommand.trim() : editUrl.trim());
+    if (!nameToUse) { setMessage("Could not determine server name"); return; }
+
+    const validation = validateMcpConfig(nameToUse, config);
+    if (!validation.valid) { setMessage(validation.errors?.join(", ") ?? "Invalid config"); return; }
+
+    if (view === "add" && getMcpConfig(nameToUse)) { setMessage(`Server '${nameToUse}' already exists`); return; }
+
+    setMcpConfig(nameToUse, config, "user");
+    setMessage(`Saved ${nameToUse} - connecting...`);
+    setView("list");
+    refreshServers();
+
+    // Auto-connect after saving
+    void (async () => {
+      const result = await connectMcpServer(nameToUse);
+      setMessage(result.success ? `Connected to ${nameToUse}` : `Saved but failed to connect: ${result.error}`);
+      refreshServers();
+      onMcpChange?.();
+    })();
+  };
+
+  const handleBack = () => { setView("list"); setMessage(null); };
+
+  useKeyboard((key) => {
+    if (!isActive) return;
+
+    if (key.name === "escape") {
+      if (view !== "list") { handleBack(); } else { onClose(); }
+      return;
+    }
+
+    if (view === "list") {
+      if (key.name === "up") { setSelectedIndex(i => Math.max(0, i - 1)); return; }
+      if (key.name === "down") { setSelectedIndex(i => Math.min(servers.length - 1, i + 1)); return; }
+      if (key.name === "return") {
+        const selectedServer = servers[selectedIndex];
+        if (selectedServer) { handleEdit(selectedServer); }
+        else if (servers.length === 0) { handleAddNew(); }
+        return;
+      }
+      if (key.name === "n" || key.name === "N") { handleAddNew(); return; }
+    }
+
+    if (view === "edit" || view === "add") {
+      if (key.name === "return") { handleSave(); return; }
+    }
+  });
+
+  if (!isActive) return null;
+
+  const statusColors: Record<string, string> = {
+    connected: "#00ff99", failed: "#ff6b6b", disabled: "#fbbf24", disconnected: "#6c6c7c", pending: "#00d9ff",
+  };
+
+  const TYPE_BUTTON_ENABLED_BG = "#ff6b9d";
+  const TYPE_BUTTON_DISABLED_BG = "#4a4a5a";
+
+  // List View
+  if (view === "list") {
+    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}>
+          <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">MCP Servers</text>
+
+          <box flexDirection="column" flexGrow={1} overflow="hidden" marginTop={1}>
+            {servers.length === 0 ? (
+              <box height={1}><text fg="#6c6c7c">No MCP servers configured. Press N to add one.</text></box>
+            ) : servers.map((name, index) => {
+              const status = getServerStatus(name);
+              const type = getServerType(name);
+              const color = statusColors[status] ?? "#6c6c7c";
+              const isSelected = index === selectedIndex;
+
+              return (
+                <box
+                  key={name}
+                  height={1}
+                  backgroundColor={isSelected ? "#44475a" : undefined}
+                  paddingLeft={2}
+                  flexDirection="row"
+                >
+                  <text fg={color}>● </text>
+                  <text width={20} fg={isSelected ? "#ff79c6" : "#f8f8f2"}>{name}</text>
+                  <text width={8} fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>[{type}]</text>
+                  <text fg={color}>{status}</text>
+                  <box flexGrow={1} />
+                  {(status === "disconnected" || status === "failed") ? (
+                    <text fg="#2dd4bf" onMouseUp={() => void handleConnect(name)}>Connect</text>
+                  ) : null}
+                  <text fg="#fbbf24" marginLeft={1} onMouseUp={() => handleToggle(name)}>
+                    {status === "disabled" ? "Enable" : "Disable"}
+                  </text>
+                  <text fg="#f43f5e" marginLeft={1} onMouseUp={() => handleDelete(name)}>Remove</text>
+                </box>
+              );
+            })}
+          </box>
+
+          <box marginTop={1} flexDirection="row" justifyContent="space-between">
+            <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>[N] Add  [Enter] Edit  [Esc] Close</text>
+            {message ? <text fg="#fbbf24">{message}</text> : null}
+          </box>
+        </box>
+      </box>
+    );
+  }
+
+  // Edit/Add View
+  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}>
+        <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+          {view === "add" ? "Add MCP Server" : `Edit: ${editName}`}
+        </text>
+
+        <box flexDirection="column" flexGrow={1} marginTop={1} gap={1}>
+          {view === "add" && (
+            <box height={1} flexDirection="row" alignItems="center">
+              <text width={12} fg="#f8f8f2">Name:</text>
+              <textarea
+                ref={nameRef}
+                initialValue={editName}
+                height={1}
+                width={30}
+                onContentChange={() => {
+                  const text = nameRef.current?.editBuffer.getText() ?? "";
+                  setEditName(text);
+                }}
+              />
+            </box>
+          )}
+
+          <box height={1} flexDirection="row" alignItems="center">
+            <text width={12} fg="#f8f8f2">Type:</text>
+            <box flexDirection="row" gap={1}>
+              {(["stdio", "sse", "http", "ws"] as ServerType[]).map((t) => (
+                <box
+                  key={t}
+                  paddingLeft={1}
+                  paddingRight={1}
+                  backgroundColor={editType === t ? TYPE_BUTTON_ENABLED_BG : TYPE_BUTTON_DISABLED_BG}
+                  onMouseUp={() => setEditType(t)}
+                >
+                  <text fg={editType === t ? "#ffffff" : "#a0a0b0"} attributes={createTextAttributes({ bold: true })}>
+                    {t.toUpperCase()}
+                  </text>
+                </box>
+              ))}
+            </box>
+          </box>
+
+          {editType === "stdio" ? (
+            <>
+              <box height={1} flexDirection="row" alignItems="center">
+                <text width={12} fg="#f8f8f2">Command:</text>
+                <textarea
+                  ref={commandRef}
+                  initialValue={editCommand}
+                  height={1}
+                  width={40}
+                  onContentChange={() => {
+                    const text = commandRef.current?.editBuffer.getText() ?? "";
+                    setEditCommand(text);
+                  }}
+                />
+              </box>
+              <box height={1} flexDirection="row" alignItems="center">
+                <text width={12} fg="#f8f8f2">Args:</text>
+                <textarea
+                  ref={argsRef}
+                  initialValue={editArgs}
+                  height={1}
+                  width={40}
+                  onContentChange={() => {
+                    const text = argsRef.current?.editBuffer.getText() ?? "";
+                    setEditArgs(text);
+                  }}
+                />
+              </box>
+            </>
+          ) : (
+            <>
+              <box height={1} flexDirection="row" alignItems="center">
+                <text width={12} fg="#f8f8f2">URL:</text>
+                <textarea
+                  ref={urlRef}
+                  initialValue={editUrl}
+                  height={1}
+                  width={50}
+                  onContentChange={() => {
+                    const text = urlRef.current?.editBuffer.getText() ?? "";
+                    setEditUrl(text);
+                  }}
+                />
+              </box>
+              <box height={2} flexDirection="row" alignItems="flex-start">
+                <text width={12} fg="#f8f8f2">Headers:</text>
+                <textarea
+                  ref={headersRef}
+                  initialValue={editHeaders}
+                  height={2}
+                  width={50}
+                  onContentChange={() => {
+                    const text = headersRef.current?.editBuffer.getText() ?? "";
+                    setEditHeaders(text);
+                  }}
+                />
+              </box>
+            </>
+          )}
+        </box>
+
+        <box marginTop={1} flexDirection="row" justifyContent="space-between" alignItems="center">
+          <box flexDirection="row" gap={2}>
+            <box paddingX={2} backgroundColor="#2dd4bf" onMouseUp={handleSave}>
+              <text fg="white" attributes={createTextAttributes({ bold: true })}>[Save]</text>
+            </box>
+            <box paddingX={2} backgroundColor="#f43f5e" onMouseUp={handleBack}>
+              <text fg="white" attributes={createTextAttributes({ bold: true })}>[Cancel]</text>
+            </box>
+          </box>
+          {message ? <text fg="#fbbf24">{message}</text> : null}
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/mcp/index.ts

@@ -0,0 +1,7 @@
+/**
+ * MCP Components
+ *
+ * MCP-related UI components for Koi's TUI.
+ */
+
+export { MCPSettings } from "./MCPSettings.js";

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

@@ -0,0 +1,310 @@
+/**
+ * Model Selection Modal
+ *
+ * Shows configured providers as section headers with their models as
+ * selectable items. Uses Pi SDK model registry.
+ *
+ * Supports Primary / Auxiliary model selection via tab switcher
+ * in the top-right corner. Press Tab to toggle between modes.
+ */
+
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { createTextAttributes } from "@opentui/core";
+import type { MouseEvent } from "@opentui/core";
+import {
+  getConfiguredProviders,
+  getCurrentModel,
+  getAuxiliaryModel,
+  setCurrentModel,
+  setAuxiliaryModel,
+  getProviderModels,
+  type ModelRef,
+} from "../../config/settings.js";
+
+interface ModelModalProps {
+  isActive: boolean;
+  onClose: () => void;
+  onSelectPrimary?: (model: ModelRef) => void;
+  onSelectAuxiliary?: (model: ModelRef) => void;
+}
+
+interface FlatItem {
+  type: "header" | "model";
+  provider?: string;
+  modelId?: string;
+  modelName?: string;
+  modelIndex?: number;
+}
+
+export function ModelModal({
+  isActive,
+  onClose,
+  onSelectPrimary,
+  onSelectAuxiliary,
+}: ModelModalProps) {
+  const { height } = useTerminalDimensions();
+  const configuredProviders = getConfiguredProviders();
+  const [selectedModelIndex, setSelectedModelIndex] = useState(0);
+  const [activeTab, setActiveTab] = useState<"primary" | "auxiliary">("primary");
+  const scrollOffsetRef = useRef(0);
+
+  const listHeight = Math.min(12, Math.floor(height * 0.4));
+  const primaryModel = getCurrentModel();
+  const auxiliaryModel = getAuxiliaryModel();
+
+  // Reset when opened
+  useLayoutEffect(() => {
+    if (isActive) {
+      setSelectedModelIndex(0);
+      setActiveTab("primary");
+      scrollOffsetRef.current = 0;
+    }
+  }, [isActive]);
+
+  // Build flat list of providers + models
+  const { flatItems, modelCount } = useMemo(() => {
+    const items: FlatItem[] = [];
+    let mIdx = 0;
+    for (const provider of configuredProviders) {
+      items.push({ type: "header", provider });
+      const models = getProviderModels(provider);
+      for (const model of models) {
+        items.push({
+          type: "model",
+          provider,
+          modelId: model.id,
+          modelName: model.name || model.id,
+          modelIndex: mIdx,
+        });
+        mIdx++;
+      }
+    }
+    return { flatItems: items, modelCount: mIdx };
+  }, [configuredProviders]);
+
+  // Clamp selected index
+  useEffect(() => {
+    if (selectedModelIndex >= modelCount && modelCount > 0) {
+      setSelectedModelIndex(modelCount - 1);
+    }
+  }, [modelCount, selectedModelIndex]);
+
+  // Effective scroll offset
+  const effectiveScrollOffset = scrollOffsetRef.current;
+
+  useKeyboard((key) => {
+    if (!isActive) return;
+
+    if (key.name === "tab" || key.name === "TAB") {
+      setActiveTab((prev) => (prev === "primary" ? "auxiliary" : "primary"));
+      return;
+    }
+
+    if (key.name === "escape") {
+      onClose();
+      return;
+    }
+
+    // Navigation with direct scroll calculation
+    if (key.name === "up" || key.name === "down") {
+      const newIndex = key.name === "up"
+        ? Math.max(0, selectedModelIndex - 1)
+        : Math.min(modelCount - 1, selectedModelIndex + 1);
+
+      const newFlatIndex = flatItems.findIndex(
+        (i) => i.type === "model" && i.modelIndex === newIndex
+      );
+
+      let newScrollOffset = scrollOffsetRef.current;
+      if (newFlatIndex !== -1) {
+        if (newFlatIndex < scrollOffsetRef.current) {
+          newScrollOffset = newFlatIndex;
+        } else if (newFlatIndex > scrollOffsetRef.current + listHeight - 1) {
+          newScrollOffset = newFlatIndex - listHeight + 1;
+        }
+      }
+
+      scrollOffsetRef.current = newScrollOffset;
+      setSelectedModelIndex(newIndex);
+      return;
+    }
+    if (key.name === "return") {
+      const selectedItem = flatItems.find(
+        (i) => i.type === "model" && i.modelIndex === selectedModelIndex
+      );
+      if (selectedItem?.provider && selectedItem.modelId) {
+        const ref = {
+          provider: selectedItem.provider,
+          modelId: selectedItem.modelId,
+        };
+        if (activeTab === "primary") {
+          setCurrentModel(ref);
+          onSelectPrimary?.(ref);
+        } else {
+          setAuxiliaryModel(ref);
+          onSelectAuxiliary?.(ref);
+        }
+        onClose();
+      }
+      return;
+    }
+  });
+
+  if (!isActive) return null;
+
+  const visibleItems = flatItems.slice(effectiveScrollOffset, effectiveScrollOffset + listHeight);
+
+  const isCurrent = (provider?: string, modelId?: string) => {
+    const target = activeTab === "primary" ? primaryModel : auxiliaryModel;
+    return target?.provider === provider && target?.modelId === modelId;
+  };
+
+  const handleMouseSelect = (
+    e: MouseEvent,
+    provider?: string,
+    modelId?: string
+  ) => {
+    e.stopPropagation();
+    if (provider && modelId) {
+      const ref = { provider, modelId };
+      if (activeTab === "primary") {
+        setCurrentModel(ref);
+        onSelectPrimary?.(ref);
+      } else {
+        setAuxiliaryModel(ref);
+        onSelectAuxiliary?.(ref);
+      }
+      onClose();
+    }
+  };
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      backgroundColor="#00000080"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={60}
+        flexDirection="column"
+        borderStyle="rounded"
+        borderColor="#4a4a5a"
+        backgroundColor="#1a1a2e"
+        paddingX={2}
+        paddingY={1}
+      >
+        {/* Header row with tabs */}
+        <box flexDirection="row" justifyContent="space-between">
+          <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+            Select Model
+          </text>
+
+          <box flexDirection="row" gap={1}>
+            <box
+              paddingX={1}
+              backgroundColor={
+                activeTab === "primary" ? "#44475a" : undefined
+              }
+              onMouseUp={(e: MouseEvent) => {
+                e.stopPropagation();
+                setActiveTab("primary");
+              }}
+            >
+              <text
+                fg={activeTab === "primary" ? "#ff79c6" : "#6c6c7c"}
+                attributes={createTextAttributes({ bold: activeTab === "primary" })}
+              >
+                Primary
+              </text>
+            </box>
+            <box
+              paddingX={1}
+              backgroundColor={
+                activeTab === "auxiliary" ? "#44475a" : undefined
+              }
+              onMouseUp={(e: MouseEvent) => {
+                e.stopPropagation();
+                setActiveTab("auxiliary");
+              }}
+            >
+              <text
+                fg={activeTab === "auxiliary" ? "#ff79c6" : "#6c6c7c"}
+                attributes={createTextAttributes({ bold: activeTab === "auxiliary" })}
+              >
+                Auxiliary
+              </text>
+            </box>
+          </box>
+        </box>
+
+        <box
+          height={listHeight}
+          flexDirection="column"
+          overflow="hidden"
+          marginTop={1}
+        >
+          {configuredProviders.length === 0 && (
+            <box height={1}>
+              <text fg="#6c6c7c">
+                No providers configured. Use /connect to add one.
+              </text>
+            </box>
+          )}
+          {visibleItems.map((item, idx) => {
+            const flatIndex = effectiveScrollOffset + idx;
+            if (item.type === "header") {
+              return (
+                <box
+                  key={`h-${item.provider}-${flatIndex}`}
+                  height={1}
+                  marginTop={1}
+                >
+                  <text
+                    fg="#ff79c6"
+                    attributes={createTextAttributes({ bold: true })}
+                  >
+                    {item.provider}
+                  </text>
+                </box>
+              );
+            }
+            const isSelected = item.modelIndex === selectedModelIndex;
+            const current = isCurrent(item.provider, item.modelId);
+            return (
+              <box
+                key={`m-${item.modelId}-${flatIndex}`}
+                height={1}
+                backgroundColor={isSelected ? "#44475a" : undefined}
+                paddingLeft={2}
+                flexDirection="row"
+                onMouseUp={(e: MouseEvent) =>
+                  handleMouseSelect(e, item.provider, item.modelId)
+                }
+              >
+                <text fg={isSelected ? "#ff79c6" : "#f8f8f2"}>
+                  {current ? "● " : "  "}
+                  {item.modelName}
+                </text>
+              </box>
+            );
+          })}
+        </box>
+
+        <box marginTop={1} flexDirection="row" justifyContent="space-between">
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            ↑↓ Navigate  Enter Select  Esc Cancel
+          </text>
+          <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+            Tab Switch
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}