claudeup 3.17.0 → 4.0.0

package/src/ui/components/SearchInput.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler.js';
+import React from "react";
+import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
 
 interface SearchInputProps {
 	/** Current search value */
@@ -19,7 +19,7 @@ interface SearchInputProps {
 export function SearchInput({
 	value,
 	onChange,
-	placeholder = 'Search...',
+	placeholder = "Search...",
 	isActive,
 	onExit,
 	onSubmit,

package/src/ui/components/StyledText.js

@@ -26,7 +26,7 @@ export function StyledText({ children, bold = false, color, bgColor, dim = false
     }
     if (inverse) {
         // Inverse effect approximated with contrasting colors
-        content = _jsx("span", { fg: "black", bg: "white", children: content });
+        content = (_jsx("span", { fg: "black", bg: "white", children: content }));
     }
     // Apply colors (outer layer)
     const textProps = {};

package/src/ui/components/StyledText.tsx

@@ -56,7 +56,11 @@ export function StyledText({
 	}
 	if (inverse) {
 		// Inverse effect approximated with contrasting colors
-		content = <span fg="black" bg="white">{content}</span>;
+		content = (
+			<span fg="black" bg="white">
+				{content}
+			</span>
+		);
 	}
 
 	// Apply colors (outer layer)

package/src/ui/components/layout/ProgressBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-export function ProgressBar({ message, current, total, }) {
+export function ProgressBar({ message, current, total }) {
     const isDeterminate = current !== undefined && total !== undefined && total > 0;
     if (isDeterminate) {
         const barWidth = 20;

package/src/ui/components/layout/ProgressBar.tsx

@@ -9,11 +9,7 @@ interface ProgressBarProps {
 	total?: number;
 }
 
-export function ProgressBar({
-	message,
-	current,
-	total,
-}: ProgressBarProps) {
+export function ProgressBar({ message, current, total }: ProgressBarProps) {
 	const isDeterminate =
 		current !== undefined && total !== undefined && total > 0;
 

package/src/ui/components/modals/InputModal.tsx

@@ -52,12 +52,7 @@ export function InputModal({
 				<text>{label}</text>
 			</box>
 
-			<input
-				value={value}
-				onChange={setValue}
-				focused
-				width={54}
-			/>
+			<input value={value} onChange={setValue} focused width={54} />
 
 			<box marginTop={1}>
 				<text fg="#666666">Enter to confirm • Escape to cancel</text>

package/src/ui/components/modals/LoadingModal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useState, useEffect } from "react";
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-export function LoadingModal({ message, }) {
+export function LoadingModal({ message }) {
     const [frame, setFrame] = useState(0);
     useEffect(() => {
         const interval = setInterval(() => {

package/src/ui/components/modals/LoadingModal.tsx

@@ -7,9 +7,7 @@ interface LoadingModalProps {
 
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
-export function LoadingModal({
-	message,
-}: LoadingModalProps) {
+export function LoadingModal({ message }: LoadingModalProps) {
 	const [frame, setFrame] = useState(0);
 
 	useEffect(() => {

package/src/ui/hooks/index.js

@@ -1,3 +1,3 @@
-export { useAsyncData, useDebouncedAsyncData } from './useAsyncData.js';
-export { useKeyboardHandler } from './useKeyboardHandler.js';
-export { useKeyboard } from './useKeyboard.js';
+export { useAsyncData, useDebouncedAsyncData } from "./useAsyncData.js";
+export { useKeyboardHandler } from "./useKeyboardHandler.js";
+export { useKeyboard } from "./useKeyboard.js";

package/src/ui/hooks/index.ts

@@ -1,3 +1,3 @@
-export { useAsyncData, useDebouncedAsyncData } from './useAsyncData.js';
-export { useKeyboardHandler } from './useKeyboardHandler.js';
-export { useKeyboard } from './useKeyboard.js';
+export { useAsyncData, useDebouncedAsyncData } from "./useAsyncData.js";
+export { useKeyboardHandler } from "./useKeyboardHandler.js";
+export { useKeyboard } from "./useKeyboard.js";

package/src/ui/hooks/useKeyboard.ts

@@ -19,8 +19,6 @@ export interface KeyEvent {
  * - Arrow keys: "up", "down", "left", "right"
  * - Special: "enter", "escape", "tab", "backspace", "delete"
  */
-export function useKeyboard(
-	handler: (event: KeyEvent) => void,
-): void {
+export function useKeyboard(handler: (event: KeyEvent) => void): void {
 	useOpenTUIKeyboard(handler);
 }

package/src/ui/hooks/useKeyboardHandler.js

@@ -1,4 +1,4 @@
-import { useKeyboard as useOpenTUIKeyboard } from '@opentui/react';
+import { useKeyboard as useOpenTUIKeyboard } from "@opentui/react";
 /**
  * useKeyboardHandler hook
  * Provides Ink-like API for keyboard events
@@ -23,17 +23,17 @@ export function useKeyboardHandler(handler) {
             ctrl: event.ctrl || false,
             shift: event.shift || false,
             meta: event.meta || false,
-            return: event.name === 'enter' || event.name === 'return',
-            upArrow: event.name === 'up',
-            downArrow: event.name === 'down',
-            leftArrow: event.name === 'left',
-            rightArrow: event.name === 'right',
-            escape: event.name === 'escape',
-            tab: event.name === 'tab',
+            return: event.name === "enter" || event.name === "return",
+            upArrow: event.name === "up",
+            downArrow: event.name === "down",
+            leftArrow: event.name === "left",
+            rightArrow: event.name === "right",
+            escape: event.name === "escape",
+            tab: event.name === "tab",
         };
         // For printable characters, pass the character as input
         // For special keys, pass empty string
-        const input = event.name.length === 1 ? event.name : '';
+        const input = event.name.length === 1 ? event.name : "";
         handler(input, key);
     });
 }

package/src/ui/hooks/useKeyboardHandler.ts

@@ -1,4 +1,4 @@
-import { useKeyboard as useOpenTUIKeyboard } from '@opentui/react';
+import { useKeyboard as useOpenTUIKeyboard } from "@opentui/react";
 
 /**
  * Wrapper hook for OpenTUI's useKeyboard that provides an Ink-like API
@@ -45,18 +45,18 @@ export function useKeyboardHandler(handler: KeyHandler): void {
 			ctrl: event.ctrl || false,
 			shift: event.shift || false,
 			meta: event.meta || false,
-			return: event.name === 'enter' || event.name === 'return',
-			upArrow: event.name === 'up',
-			downArrow: event.name === 'down',
-			leftArrow: event.name === 'left',
-			rightArrow: event.name === 'right',
-			escape: event.name === 'escape',
-			tab: event.name === 'tab',
+			return: event.name === "enter" || event.name === "return",
+			upArrow: event.name === "up",
+			downArrow: event.name === "down",
+			leftArrow: event.name === "left",
+			rightArrow: event.name === "right",
+			escape: event.name === "escape",
+			tab: event.name === "tab",
 		};
 
 		// For printable characters, pass the character as input
 		// For special keys, pass empty string
-		const input = event.name.length === 1 ? event.name : '';
+		const input = event.name.length === 1 ? event.name : "";
 
 		handler(input, key);
 	});

package/src/ui/renderers/cliToolRenderers.js

@@ -0,0 +1,33 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { theme } from "../theme.js";
+// ─── Row renderer ──────────────────────────────────────────────────────────────
+export function renderCliToolRow(status, _index, isSelected) {
+    const { tool, installed, installedVersion, hasUpdate, checking } = status;
+    let icon;
+    let iconColor;
+    if (!installed) {
+        icon = "○";
+        iconColor = theme.colors.muted;
+    }
+    else if (hasUpdate) {
+        icon = "⬆";
+        iconColor = theme.colors.warning;
+    }
+    else {
+        icon = "●";
+        iconColor = theme.colors.success;
+    }
+    const versionText = installedVersion ? `v${installedVersion}` : "";
+    if (isSelected) {
+        return (_jsxs("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: [" ", icon, " ", tool.displayName, " ", versionText, checking ? "..." : "", " "] }));
+    }
+    return (_jsxs("text", { children: [_jsx("span", { fg: iconColor, children: icon }), _jsxs("span", { fg: theme.colors.text, children: [" ", tool.displayName] }), versionText ? _jsxs("span", { fg: theme.colors.success, children: [" ", versionText] }) : null, checking ? _jsx("span", { fg: theme.colors.muted, children: "..." }) : null] }));
+}
+// ─── Detail renderer ───────────────────────────────────────────────────────────
+export function renderCliToolDetail(status) {
+    if (!status) {
+        return (_jsx("box", { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsx("text", { fg: theme.colors.muted, children: "Select a tool to see details" }) }));
+    }
+    const { tool, installed, installedVersion, latestVersion, hasUpdate, checking } = status;
+    return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { marginBottom: 1, children: [_jsx("text", { fg: theme.colors.info, children: _jsxs("strong", { children: ["⚙ ", tool.displayName] }) }), hasUpdate ? _jsx("text", { fg: theme.colors.warning, children: " \u2B06" }) : null] }), _jsx("text", { fg: theme.colors.muted, children: tool.description }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "Status " }), !installed ? (_jsx("text", { fg: theme.colors.muted, children: "○ Not installed" })) : checking ? (_jsx("text", { fg: theme.colors.success, children: "● Checking..." })) : hasUpdate ? (_jsx("text", { fg: theme.colors.warning, children: "● Update available" })) : (_jsx("text", { fg: theme.colors.success, children: "● Up to date" }))] }), installedVersion ? (_jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "Installed " }), _jsxs("text", { fg: theme.colors.success, children: ["v", installedVersion] })] })) : null, latestVersion ? (_jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "Latest " }), _jsxs("text", { fg: theme.colors.text, children: ["v", latestVersion] })] })) : null, _jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "Website " }), _jsx("text", { fg: theme.colors.link, children: tool.website })] })] }), _jsx("box", { marginTop: 2, children: !installed ? (_jsxs("box", { children: [_jsxs("text", { bg: theme.colors.success, fg: "black", children: [" ", "Enter", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Install" })] })) : hasUpdate ? (_jsxs("box", { children: [_jsxs("text", { bg: theme.colors.warning, fg: "black", children: [" ", "Enter", " "] }), _jsxs("text", { fg: theme.colors.muted, children: [" Update to v", latestVersion] })] })) : (_jsxs("box", { children: [_jsxs("text", { bg: theme.colors.muted, fg: "white", children: [" ", "Enter", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Reinstall" })] })) })] }));
+}

package/src/ui/renderers/cliToolRenderers.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import type { CliTool } from "../../data/cli-tools.js";
+import { theme } from "../theme.js";
+
+// ─── Status type ───────────────────────────────────────────────────────────────
+
+export interface CliToolStatus {
+  tool: CliTool;
+  installed: boolean;
+  installedVersion?: string;
+  latestVersion?: string;
+  hasUpdate?: boolean;
+  checking: boolean;
+}
+
+// ─── Row renderer ──────────────────────────────────────────────────────────────
+
+export function renderCliToolRow(
+  status: CliToolStatus,
+  _index: number,
+  isSelected: boolean,
+): React.ReactNode {
+  const { tool, installed, installedVersion, hasUpdate, checking } = status;
+
+  let icon: string;
+  let iconColor: string;
+
+  if (!installed) {
+    icon = "○";
+    iconColor = theme.colors.muted;
+  } else if (hasUpdate) {
+    icon = "⬆";
+    iconColor = theme.colors.warning;
+  } else {
+    icon = "●";
+    iconColor = theme.colors.success;
+  }
+
+  const versionText = installedVersion ? `v${installedVersion}` : "";
+
+  if (isSelected) {
+    return (
+      <text bg={theme.selection.bg} fg={theme.selection.fg}>
+        {" "}
+        {icon} {tool.displayName} {versionText}
+        {checking ? "..." : ""}{" "}
+      </text>
+    );
+  }
+
+  return (
+    <text>
+      <span fg={iconColor}>{icon}</span>
+      <span fg={theme.colors.text}> {tool.displayName}</span>
+      {versionText ? <span fg={theme.colors.success}> {versionText}</span> : null}
+      {checking ? <span fg={theme.colors.muted}>{"..."}</span> : null}
+    </text>
+  );
+}
+
+// ─── Detail renderer ───────────────────────────────────────────────────────────
+
+export function renderCliToolDetail(
+  status: CliToolStatus | undefined,
+): React.ReactNode {
+  if (!status) {
+    return (
+      <box
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        flexGrow={1}
+      >
+        <text fg={theme.colors.muted}>Select a tool to see details</text>
+      </box>
+    );
+  }
+
+  const { tool, installed, installedVersion, latestVersion, hasUpdate, checking } =
+    status;
+
+  return (
+    <box flexDirection="column">
+      <box marginBottom={1}>
+        <text fg={theme.colors.info}>
+          <strong>{"⚙ "}{tool.displayName}</strong>
+        </text>
+        {hasUpdate ? <text fg={theme.colors.warning}> ⬆</text> : null}
+      </box>
+
+      <text fg={theme.colors.muted}>{tool.description}</text>
+
+      <box marginTop={1} flexDirection="column">
+        <box>
+          <text fg={theme.colors.muted}>{"Status "}</text>
+          {!installed ? (
+            <text fg={theme.colors.muted}>{"○ Not installed"}</text>
+          ) : checking ? (
+            <text fg={theme.colors.success}>{"● Checking..."}</text>
+          ) : hasUpdate ? (
+            <text fg={theme.colors.warning}>{"● Update available"}</text>
+          ) : (
+            <text fg={theme.colors.success}>{"● Up to date"}</text>
+          )}
+        </box>
+        {installedVersion ? (
+          <box>
+            <text fg={theme.colors.muted}>{"Installed "}</text>
+            <text fg={theme.colors.success}>v{installedVersion}</text>
+          </box>
+        ) : null}
+        {latestVersion ? (
+          <box>
+            <text fg={theme.colors.muted}>{"Latest "}</text>
+            <text fg={theme.colors.text}>v{latestVersion}</text>
+          </box>
+        ) : null}
+        <box>
+          <text fg={theme.colors.muted}>{"Website "}</text>
+          <text fg={theme.colors.link}>{tool.website}</text>
+        </box>
+      </box>
+
+      <box marginTop={2}>
+        {!installed ? (
+          <box>
+            <text bg={theme.colors.success} fg="black">
+              {" "}
+              Enter{" "}
+            </text>
+            <text fg={theme.colors.muted}> Install</text>
+          </box>
+        ) : hasUpdate ? (
+          <box>
+            <text bg={theme.colors.warning} fg="black">
+              {" "}
+              Enter{" "}
+            </text>
+            <text fg={theme.colors.muted}> Update to v{latestVersion}</text>
+          </box>
+        ) : (
+          <box>
+            <text bg={theme.colors.muted} fg="white">
+              {" "}
+              Enter{" "}
+            </text>
+            <text fg={theme.colors.muted}> Reinstall</text>
+          </box>
+        )}
+      </box>
+    </box>
+  );
+}

package/src/ui/renderers/mcpRenderers.js

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { theme } from "../theme.js";
+// ─── Row renderers ─────────────────────────────────────────────────────────────
+export function renderMcpRow(item, _index, isSelected) {
+    if (item.kind === "category") {
+        return (_jsx("text", { fg: theme.selection.bg, children: _jsxs("strong", { children: ["▸ ", item.label] }) }));
+    }
+    const { server, isInstalled } = item;
+    const icon = isInstalled ? "●" : "○";
+    const iconColor = isInstalled ? theme.colors.success : theme.colors.muted;
+    if (isSelected) {
+        return (_jsxs("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: [" ", icon, " ", server.name, " "] }));
+    }
+    return (_jsxs("text", { children: [_jsx("span", { fg: iconColor, children: icon }), _jsxs("span", { fg: theme.colors.text, children: [" ", server.name] }), server.requiresConfig ? (_jsx("span", { fg: theme.colors.warning, children: " \u2699" })) : null] }));
+}
+// ─── Detail renderer ───────────────────────────────────────────────────────────
+export function renderMcpDetail(item, loading) {
+    if (loading) {
+        return _jsx("text", { fg: theme.colors.muted, children: "Loading MCP servers..." });
+    }
+    if (!item || item.kind === "category") {
+        return (_jsx("box", { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsx("text", { fg: theme.colors.muted, children: "Select a server to see details" }) }));
+    }
+    const { server, isInstalled } = item;
+    return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { marginBottom: 1, children: [_jsx("text", { fg: theme.colors.info, children: _jsxs("strong", { children: ["⚡ ", server.name] }) }), server.requiresConfig ? (_jsx("text", { fg: theme.colors.warning, children: " \u2699" })) : null] }), _jsx("text", { fg: theme.colors.muted, children: server.description }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "Status " }), isInstalled ? (_jsx("text", { fg: theme.colors.success, children: "● Installed" })) : (_jsx("text", { fg: theme.colors.muted, children: "○ Not installed" }))] }), _jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "Type " }), _jsx("text", { fg: theme.colors.text, children: server.type === "http" ? "HTTP" : "Command" })] }), server.type === "http" ? (_jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "URL " }), _jsx("text", { fg: theme.colors.link, children: server.url })] })) : (_jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "Command " }), _jsx("text", { fg: theme.colors.info, children: server.command })] })), server.requiresConfig ? (_jsxs("box", { children: [_jsx("text", { fg: theme.colors.muted, children: "Config " }), _jsxs("text", { fg: theme.colors.warning, children: [server.configFields?.length ?? 0, " fields required"] })] })) : null] }), _jsx("box", { marginTop: 2, children: isInstalled ? (_jsxs("box", { children: [_jsxs("text", { bg: theme.colors.danger, fg: "white", children: [" ", "Enter", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Remove server" })] })) : (_jsxs("box", { children: [_jsxs("text", { bg: theme.colors.success, fg: "black", children: [" ", "Enter", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Install server" })] })) })] }));
+}

package/src/ui/renderers/mcpRenderers.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import type { McpServer } from "../../types/index.js";
+import { theme } from "../theme.js";
+
+// ─── List item types ───────────────────────────────────────────────────────────
+
+export type McpListItem =
+  | { kind: "category"; label: string }
+  | { kind: "server"; server: McpServer; isInstalled: boolean };
+
+// ─── Row renderers ─────────────────────────────────────────────────────────────
+
+export function renderMcpRow(
+  item: McpListItem,
+  _index: number,
+  isSelected: boolean,
+): React.ReactNode {
+  if (item.kind === "category") {
+    return (
+      <text fg={theme.selection.bg}>
+        <strong>{"▸ "}{item.label}</strong>
+      </text>
+    );
+  }
+
+  const { server, isInstalled } = item;
+  const icon = isInstalled ? "●" : "○";
+  const iconColor = isInstalled ? theme.colors.success : theme.colors.muted;
+
+  if (isSelected) {
+    return (
+      <text bg={theme.selection.bg} fg={theme.selection.fg}>
+        {" "}
+        {icon} {server.name}{" "}
+      </text>
+    );
+  }
+
+  return (
+    <text>
+      <span fg={iconColor}>{icon}</span>
+      <span fg={theme.colors.text}> {server.name}</span>
+      {server.requiresConfig ? (
+        <span fg={theme.colors.warning}> ⚙</span>
+      ) : null}
+    </text>
+  );
+}
+
+// ─── Detail renderer ───────────────────────────────────────────────────────────
+
+export function renderMcpDetail(
+  item: McpListItem | undefined,
+  loading: boolean,
+): React.ReactNode {
+  if (loading) {
+    return <text fg={theme.colors.muted}>Loading MCP servers...</text>;
+  }
+
+  if (!item || item.kind === "category") {
+    return (
+      <box
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        flexGrow={1}
+      >
+        <text fg={theme.colors.muted}>Select a server to see details</text>
+      </box>
+    );
+  }
+
+  const { server, isInstalled } = item;
+
+  return (
+    <box flexDirection="column">
+      <box marginBottom={1}>
+        <text fg={theme.colors.info}>
+          <strong>{"⚡ "}{server.name}</strong>
+        </text>
+        {server.requiresConfig ? (
+          <text fg={theme.colors.warning}> ⚙</text>
+        ) : null}
+      </box>
+
+      <text fg={theme.colors.muted}>{server.description}</text>
+
+      <box marginTop={1} flexDirection="column">
+        <box>
+          <text fg={theme.colors.muted}>{"Status "}</text>
+          {isInstalled ? (
+            <text fg={theme.colors.success}>{"● Installed"}</text>
+          ) : (
+            <text fg={theme.colors.muted}>{"○ Not installed"}</text>
+          )}
+        </box>
+        <box>
+          <text fg={theme.colors.muted}>{"Type "}</text>
+          <text fg={theme.colors.text}>
+            {server.type === "http" ? "HTTP" : "Command"}
+          </text>
+        </box>
+        {server.type === "http" ? (
+          <box>
+            <text fg={theme.colors.muted}>{"URL "}</text>
+            <text fg={theme.colors.link}>{server.url}</text>
+          </box>
+        ) : (
+          <box>
+            <text fg={theme.colors.muted}>{"Command "}</text>
+            <text fg={theme.colors.info}>{server.command}</text>
+          </box>
+        )}
+        {server.requiresConfig ? (
+          <box>
+            <text fg={theme.colors.muted}>{"Config "}</text>
+            <text fg={theme.colors.warning}>
+              {server.configFields?.length ?? 0} fields required
+            </text>
+          </box>
+        ) : null}
+      </box>
+
+      <box marginTop={2}>
+        {isInstalled ? (
+          <box>
+            <text bg={theme.colors.danger} fg="white">
+              {" "}
+              Enter{" "}
+            </text>
+            <text fg={theme.colors.muted}> Remove server</text>
+          </box>
+        ) : (
+          <box>
+            <text bg={theme.colors.success} fg="black">
+              {" "}
+              Enter{" "}
+            </text>
+            <text fg={theme.colors.muted}> Install server</text>
+          </box>
+        )}
+      </box>
+    </box>
+  );
+}