@meowlynxsea/koi 0.1.0

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

@@ -0,0 +1,435 @@
+/**
+ * Connect Provider Modal
+ *
+ * Multi-step flow: provider selection → existing config view / auth input →
+ * verification (animated) → result.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { createTextAttributes } from "@opentui/core";
+import type { TextareaRenderable, MouseEvent } from "@opentui/core";
+import {
+  getAllProviders,
+  configureProvider,
+  removeProvider,
+  isProviderConfigured,
+  getProviderConfig,
+  validateProviderCredential,
+  type ProviderConfig,
+} from "../../config/settings.js";
+import { getOAuthProvider } from "@mariozechner/pi-ai/oauth";
+
+interface ConnectModalProps {
+  isActive: boolean;
+  onClose: () => void;
+}
+
+type Step = "provider" | "existing" | "auth" | "verify" | "result";
+
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+function maskCredential(cred: string): string {
+  if (cred.length <= 8) return "•".repeat(cred.length);
+  return cred.slice(0, 4) + "•".repeat(cred.length - 8) + cred.slice(-4);
+}
+
+export function ConnectModal({ isActive, onClose }: ConnectModalProps) {
+  const { height } = useTerminalDimensions();
+  const [step, setStep] = useState<Step>("provider");
+  const [providers] = useState(() => getAllProviders());
+  const [selectedProviderIndex, setSelectedProviderIndex] = useState(0);
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+  const [authInput, setAuthInput] = useState("");
+  const [verifyResult, setVerifyResult] = useState<{ success: boolean; message: string } | null>(null);
+  const [spinnerFrame, setSpinnerFrame] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const inputRef = useRef<TextareaRenderable>(null);
+
+  const listHeight = Math.min(10, Math.floor(height * 0.35));
+
+  // Reset when opened
+  useEffect(() => {
+    if (isActive) {
+      setStep("provider");
+      setSelectedProviderIndex(0);
+      setSelectedProvider(null);
+      setAuthInput("");
+      setVerifyResult(null);
+      setSpinnerFrame(0);
+      setScrollOffset(0);
+    }
+  }, [isActive]);
+
+  // Focus input on auth step
+  useEffect(() => {
+    if (isActive && step === "auth") {
+      setTimeout(() => {
+        const ta = inputRef.current;
+        if (ta) {
+          ta.editBuffer.replaceText("");
+          ta.focus();
+        }
+      }, 10);
+    }
+  }, [isActive, step]);
+
+  // Spinner animation during verify
+  useEffect(() => {
+    if (!isActive || step !== "verify") return;
+    const interval = setInterval(() => {
+      setSpinnerFrame((f) => (f + 1) % SPINNER.length);
+    }, 80);
+    return () => clearInterval(interval);
+  }, [isActive, step]);
+
+  // Real verification
+  useEffect(() => {
+    if (!isActive || step !== "verify") return;
+
+    let cancelled = false;
+
+    void (async () => {
+      try {
+        const result = await validateProviderCredential(
+          selectedProvider!,
+          authInput.trim()
+        );
+        if (cancelled) return;
+
+        const config: ProviderConfig = {
+          provider: selectedProvider!,
+          authMethod: getOAuthProvider(selectedProvider!) ? "oauth" : "apikey",
+          credential: authInput.trim(),
+        };
+
+        setVerifyResult({
+          success: result.valid,
+          message: result.valid
+            ? `Connected to ${selectedProvider}!`
+            : `Failed to connect to ${selectedProvider}: ${result.error}`,
+        });
+
+        if (result.valid && selectedProvider) {
+          configureProvider(config);
+        }
+      } catch (err: unknown) {
+        if (cancelled) return;
+        setVerifyResult({
+          success: false,
+          message: `Failed to connect to ${selectedProvider}: ${err instanceof Error ? err.message : String(err)}`,
+        });
+      } finally {
+        if (!cancelled) {
+          setStep("result");
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isActive, step, authInput, selectedProvider]);
+
+  // Auto-scroll provider list
+  useEffect(() => {
+    if (selectedProviderIndex < scrollOffset) {
+      setScrollOffset(selectedProviderIndex);
+    } else if (selectedProviderIndex >= scrollOffset + listHeight) {
+      setScrollOffset(selectedProviderIndex - listHeight + 1);
+    }
+  }, [selectedProviderIndex, listHeight, scrollOffset]);
+
+  const handleSelectProvider = (provider: string) => {
+    setSelectedProvider(provider);
+    if (isProviderConfigured(provider)) {
+      setStep("existing");
+    } else {
+      setStep("auth");
+    }
+  };
+
+  const handleClearConfig = () => {
+    if (selectedProvider) {
+      removeProvider(selectedProvider);
+    }
+    setStep("provider");
+    setSelectedProvider(null);
+  };
+
+  const handleOverwrite = () => {
+    setStep("auth");
+    setAuthInput("");
+  };
+
+  useKeyboard((key) => {
+    if (!isActive) return;
+    if (key.name === "escape") {
+      if (step === "provider" || step === "result") {
+        onClose();
+      } else if (step === "existing") {
+        setStep("provider");
+        setSelectedProvider(null);
+      } else {
+        setStep("provider");
+        setSelectedProvider(null);
+        setAuthInput("");
+      }
+      return;
+    }
+    if (step === "provider") {
+      if (key.name === "up") {
+        setSelectedProviderIndex((prev) => Math.max(0, prev - 1));
+        return;
+      }
+      if (key.name === "down") {
+        setSelectedProviderIndex((prev) => Math.max(0, Math.min(providers.length - 1, prev + 1)));
+        return;
+      }
+      if (key.name === "return") {
+        const provider = providers[selectedProviderIndex];
+        if (provider) {
+          handleSelectProvider(provider);
+        }
+        return;
+      }
+    }
+    if (step === "existing") {
+      if (key.name === "o" || key.name === "O") {
+        handleOverwrite();
+        return;
+      }
+      if (key.name === "c" || key.name === "C") {
+        handleClearConfig();
+        return;
+      }
+      if (key.name === "return" || key.name === "l" || key.name === "L") {
+        setStep("provider");
+        setSelectedProvider(null);
+        return;
+      }
+    }
+    if (step === "auth") {
+      if (key.name === "return") {
+        if (authInput.trim()) {
+          setStep("verify");
+        }
+        return;
+      }
+    }
+    if (step === "result") {
+      if (key.name === "return") {
+        onClose();
+        return;
+      }
+    }
+  });
+
+  const handleAuthChange = () => {
+    const text = inputRef.current?.editBuffer.getText() ?? "";
+    setAuthInput(text);
+  };
+
+  const isOAuthProvider = (p?: string | null) => (p ? !!getOAuthProvider(p) : false);
+
+  const existingConfig = selectedProvider ? getProviderConfig(selectedProvider) : undefined;
+
+  if (!isActive) return null;
+
+  const visibleProviders = providers.slice(scrollOffset, scrollOffset + listHeight);
+
+  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}
+      >
+        {step === "provider" && (
+          <>
+            <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+              Select Provider
+            </text>
+            <box height={listHeight} flexDirection="column" overflow="hidden" marginTop={1}>
+              {visibleProviders.map((p, i) => {
+                const actualIndex = scrollOffset + i;
+                const configured = isProviderConfigured(p);
+                return (
+                  <box
+                    key={p}
+                    height={1}
+                    backgroundColor={actualIndex === selectedProviderIndex ? "#44475a" : undefined}
+                    paddingLeft={1}
+                    flexDirection="row"
+                    onMouseUp={(e: MouseEvent) => {
+                      e.stopPropagation();
+                      handleSelectProvider(p);
+                    }}
+                  >
+                    <text fg={actualIndex === selectedProviderIndex ? "#ff79c6" : "#f8f8f2"}>
+                      {configured ? "● " : "  "}
+                      {p}
+                    </text>
+                    {configured && (
+                      <text fg="#00ff99" marginLeft={1}>
+                        configured
+                      </text>
+                    )}
+                  </box>
+                );
+              })}
+            </box>
+            <box marginTop={1}>
+              <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+                ↑↓ Navigate  Enter Select  Esc Cancel
+              </text>
+            </box>
+          </>
+        )}
+
+        {step === "existing" && existingConfig && (
+          <>
+            <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+              {selectedProvider} — Already Configured
+            </text>
+            <box marginTop={1}>
+              <text fg="#6c6c7c">
+                Auth method: {existingConfig.authMethod.toUpperCase()}
+              </text>
+            </box>
+            <box marginTop={1}>
+              <text fg="#f8f8f2">
+                {existingConfig.authMethod === "apikey"
+                  ? `API Key: ${maskCredential(existingConfig.credential)}`
+                  : `OAuth token: ${maskCredential(existingConfig.credential)}`}
+              </text>
+            </box>
+            <box marginTop={1} flexDirection="row" gap={2}>
+              <box
+                paddingX={2}
+                backgroundColor="#2dd4bf"
+                onMouseUp={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  handleOverwrite();
+                }}
+              >
+                <text attributes={createTextAttributes({ bold: true })} fg="white">
+                  Overwrite (O)
+                </text>
+              </box>
+              <box
+                paddingX={2}
+                backgroundColor="#f43f5e"
+                onMouseUp={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  handleClearConfig();
+                }}
+              >
+                <text attributes={createTextAttributes({ bold: true })} fg="white">
+                  Clear (C)
+                </text>
+              </box>
+              <box
+                paddingX={2}
+                backgroundColor="#6272a4"
+                onMouseUp={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  setStep("provider");
+                  setSelectedProvider(null);
+                }}
+              >
+                <text attributes={createTextAttributes({ bold: true })} fg="white">
+                  Leave (L)
+                </text>
+              </box>
+            </box>
+            <box marginTop={1}>
+              <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+                O Overwrite  C Clear  L Leave  Esc Back
+              </text>
+            </box>
+          </>
+        )}
+
+        {step === "auth" && (
+          <>
+            <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+              Authenticate: {selectedProvider}
+            </text>
+            <box marginTop={1}>
+              <text fg="#6c6c7c">
+                {isOAuthProvider(selectedProvider)
+                  ? "This provider requires OAuth. Authenticate in your browser and paste the token."
+                  : "Enter your API key or credentials for this provider."}
+              </text>
+            </box>
+            <box marginTop={1} height={1} backgroundColor="#16213e" paddingX={1}>
+              <textarea
+                ref={inputRef}
+                initialValue=""
+                focused={isActive}
+                showCursor
+                height={1}
+                wrapMode="none"
+                textColor="#f8f8f2"
+                backgroundColor="#16213e"
+                onContentChange={handleAuthChange}
+              />
+            </box>
+            <box marginTop={1}>
+              <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+                Enter Confirm  Esc Back
+              </text>
+            </box>
+          </>
+        )}
+
+        {step === "verify" && (
+          <>
+            <text attributes={createTextAttributes({ bold: true })} fg="#ff79c6">
+              Verifying
+            </text>
+            <box marginTop={1} flexDirection="row" alignItems="center">
+              <text fg="#00f5ff">{SPINNER[spinnerFrame]}</text>
+              <text fg="#f8f8f2" marginLeft={1}>
+                Connecting to {selectedProvider}...
+              </text>
+            </box>
+          </>
+        )}
+
+        {step === "result" && verifyResult && (
+          <>
+            <text
+              attributes={createTextAttributes({ bold: true })}
+              fg={verifyResult.success ? "#00ff99" : "#fb7185"}
+            >
+              {verifyResult.success ? "Success" : "Failed"}
+            </text>
+            <box marginTop={1}>
+              <text fg="#f8f8f2">{verifyResult.message}</text>
+            </box>
+            <box marginTop={1}>
+              <text fg="#6c6c7c" attributes={createTextAttributes({ dim: true })}>
+                Enter/Esc Close
+              </text>
+            </box>
+          </>
+        )}
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,167 @@
+/**
+ * Connecting Modal
+ *
+ * Modal dialog showing MCP connection progress with spinner animation.
+ * Cannot be closed manually - auto-dismisses when all connections complete.
+ */
+
+import { useState, useEffect } from "react";
+import { createTextAttributes, type SpinnerVariant } from "@opentui/core";
+import type { McpConnectionProgress } from "../../services/mcp/index.js";
+
+interface ConnectingModalProps {
+  isActive: boolean;
+  progress: McpConnectionProgress | null;
+}
+
+// Spinner frames for loading animation
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+function Spinner({ variant = "dots" }: { variant?: SpinnerVariant }) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    if (!variant || variant === "dots") {
+      const interval = setInterval(() => {
+        setFrame((f) => (f + 1) % SPINNER_FRAMES.length);
+      }, 80);
+      return () => clearInterval(interval);
+    }
+  }, [variant]);
+
+  // For line spinner
+  if (variant === "line") {
+    return <text fg="#60a5fa">{">".repeat((frame % 4) + 1)}</text>;
+  }
+
+  return <text fg="#60a5fa">{SPINNER_FRAMES[frame]}</text>;
+}
+
+function StatusIcon({ status }: { status: "connecting" | "connected" | "failed" | "disabled" }) {
+  switch (status) {
+    case "connecting":
+      return <text fg="#fbbf24">◐</text>;
+    case "connected":
+      return <text fg="#34d399">✓</text>;
+    case "failed":
+      return <text fg="#f87171">✗</text>;
+    case "disabled":
+      return <text fg="#9ca3af">○</text>;
+  }
+}
+
+function ProgressBar({ completed, total }: { completed: number; total: number }) {
+  const width = 30;
+  const filled = Math.round((completed / total) * width);
+  const empty = width - filled;
+  
+  // Use a single text with styled spans instead of nested text components
+  return (
+    <text>
+      <span fg="#22c55e">[</span>
+      <span fg="#22c55e">{"=".repeat(filled)}</span>
+      <span fg="#4b5563">{"·".repeat(empty)}</span>
+      <span fg="#22c55e">]</span>
+    </text>
+  );
+}
+
+export function ConnectingModal({ isActive, progress }: ConnectingModalProps) {
+  // Don't render if not active or progress is null
+  if (!isActive) return null;
+
+  const defaultProgress: McpConnectionProgress = progress ?? {
+    total: 0,
+    completed: 0,
+    currentServer: "Initializing...",
+    status: "connecting",
+  };
+
+  const { total, completed, currentServer, status, error } = defaultProgress;
+  const isComplete = completed >= total && total > 0;
+
+  // Format percentage
+  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      backgroundColor="#00000090"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        borderStyle="rounded"
+        borderColor={isComplete ? (status === "failed" ? "#f87171" : "#34d399") : "#60a5fa"}
+        backgroundColor="#1a1a2e"
+        paddingX={3}
+        paddingY={2}
+        flexDirection="column"
+        minWidth={50}
+        maxWidth={60}
+      >
+        {/* Header */}
+        <box flexDirection="row" alignItems="center" justifyContent="center" marginBottom={1}>
+          <Spinner variant="dots" />
+          <text marginLeft={1} attributes={createTextAttributes({ bold: true })} fg="#60a5fa">
+            Connecting MCP Servers
+          </text>
+        </box>
+
+        {/* Progress info */}
+        <box flexDirection="column" alignItems="center" marginBottom={1}>
+          <text fg="#9ca3af">
+            {completed} / {total} servers
+          </text>
+          <ProgressBar completed={completed} total={total} />
+          <text fg="#60a5fa" attributes={createTextAttributes({ bold: true })}>
+            {percentage}%
+          </text>
+        </box>
+
+        {/* Current server being processed */}
+        <box flexDirection="row" alignItems="center" marginBottom={1}>
+          <StatusIcon status={status} />
+          <text marginLeft={1} fg="#e5e7eb">
+            {currentServer}
+          </text>
+        </box>
+
+        {/* Error message if any */}
+        {error && (
+          <box flexDirection="column" marginTop={1}>
+            <text fg="#f87171" attributes={createTextAttributes({ bold: true })}>
+              Error:
+            </text>
+            <text fg="#fca5a5" marginLeft={1}>
+              {error}
+            </text>
+          </box>
+        )}
+
+        {/* Status message */}
+        <box flexDirection="row" justifyContent="center" marginTop={1}>
+          {isComplete ? (
+            status === "failed" ? (
+              <text fg="#fbbf24">
+                Connection failed. Check settings with /mcp
+              </text>
+            ) : (
+              <text fg="#34d399">
+                All servers connected!
+              </text>
+            )
+          ) : (
+            <text fg="#9ca3af">
+              Please wait...
+            </text>
+          )}
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/edit-pending-modal.tsx

@@ -0,0 +1,103 @@
+/**
+ * Edit Pending Modal
+ *
+ * Modal for editing a queued/sheer message before it is delivered.
+ * Contains an InputBox for multi-line editing.
+ */
+
+import { useRef, useEffect } from "react";
+import { useKeyboard } from "@opentui/react";
+import { createTextAttributes, type TextareaRenderable } from "@opentui/core";
+import { InputBox } from "./input-box.js";
+
+interface EditPendingModalProps {
+  isActive: boolean;
+  initialText: string;
+  type: "sheer" | "queued";
+  onConfirm: (text: string) => void;
+  onCancel: () => void;
+  width?: number;
+}
+
+export function EditPendingModal({
+  isActive,
+  initialText,
+  type,
+  onConfirm,
+  onCancel,
+  width = 70,
+}: EditPendingModalProps) {
+  const textareaRef = useRef<TextareaRenderable | null>(null);
+
+  useEffect(() => {
+    if (isActive && textareaRef.current) {
+      textareaRef.current.editBuffer.setText(initialText);
+    }
+  }, [isActive, initialText]);
+
+  useKeyboard((key) => {
+    if (!isActive) return;
+    if (key.name === "escape") {
+      onCancel();
+    }
+  });
+
+  if (!isActive) return null;
+
+  const label = type === "sheer" ? "Edit Sheer" : "Edit Queued";
+
+  const handleConfirm = () => {
+    const text = textareaRef.current?.editBuffer.getText() ?? "";
+    if (text.trim()) {
+      onConfirm(text.trim());
+    }
+  };
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      backgroundColor="#00000080"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        flexDirection="column"
+        alignSelf="center"
+        borderStyle="rounded"
+        borderColor="#4a4a5a"
+        backgroundColor="#1a1a2e"
+        paddingX={2}
+        paddingY={1}
+        width={width}
+      >
+        <text alignSelf="center" attributes={createTextAttributes({ bold: true })} fg="#fbbf24">
+          {label}
+        </text>
+        <box marginTop={1} marginBottom={1}>
+          <InputBox
+            onSubmit={handleConfirm}
+            focused={true}
+            disabled={false}
+            width={width - 4}
+          />
+        </box>
+        <box alignSelf="center" flexDirection="row" gap={2}>
+          <box
+            paddingX={2}
+            backgroundColor="#2dd4bf"
+            onMouseUp={handleConfirm}
+          >
+            <text fg="white" attributes={createTextAttributes({ bold: true })}>Confirm</text>
+          </box>
+          <box paddingX={2} backgroundColor="#f43f5e" onMouseUp={onCancel}>
+            <text fg="white" attributes={createTextAttributes({ bold: true })}>Cancel</text>
+          </box>
+        </box>
+      </box>
+    </box>
+  );
+}