claudeup 3.16.0 → 4.0.0

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>
+  );
+}

package/src/ui/renderers/pluginRenderers.js

@@ -0,0 +1,124 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { CategoryHeader } from "../components/CategoryHeader.js";
+import { SelectableRow, ScopeSquares, ActionHints, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
+import { theme } from "../theme.js";
+import { highlightMatches } from "../../utils/fuzzy-search.js";
+// ─── Category renderers ───────────────────────────────────────────────────────
+function categoryRow(item, isSelected) {
+    const mp = item.marketplace;
+    if (isSelected) {
+        const arrow = item.isExpanded ? "▼" : "▶";
+        const count = item.pluginCount > 0 ? ` (${item.pluginCount})` : "";
+        return (_jsx(SelectableRow, { selected: true, children: _jsxs("strong", { children: [" ", arrow, " ", mp.displayName, count, " "] }) }));
+    }
+    // Map tone to a statusColor for CategoryHeader (legacy component)
+    const statusColorMap = {
+        yellow: "yellow",
+        gray: "gray",
+        green: "green",
+        red: "red",
+        purple: theme.colors.accent,
+        teal: "cyan",
+    };
+    return (_jsx(CategoryHeader, { title: mp.displayName, expanded: item.isExpanded, count: item.pluginCount, status: item.badge, statusColor: statusColorMap[item.tone] }));
+}
+function categoryDetail(item, collapsedMarketplaces) {
+    const mp = item.marketplace;
+    const isEnabled = item.marketplaceEnabled;
+    const isCollapsed = collapsedMarketplaces.has(mp.name);
+    const hasPlugins = item.pluginCount > 0;
+    let actionHint = "Add";
+    if (isEnabled) {
+        if (isCollapsed) {
+            actionHint = "Expand";
+        }
+        else if (hasPlugins) {
+            actionHint = "Collapse";
+        }
+        else {
+            actionHint = "Remove";
+        }
+    }
+    return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: theme.colors.info, children: _jsxs("strong", { children: [mp.displayName, item.badge ? ` ${item.badge}` : ""] }) }), _jsx("text", { fg: theme.colors.muted, children: mp.description || "No description" }), _jsx("text", { fg: isEnabled ? theme.colors.success : theme.colors.muted, children: isEnabled ? "● Added" : "○ Not added" }), _jsxs("text", { fg: theme.colors.link, children: ["github.com/", mp.source.repo] }), _jsxs("text", { children: ["Plugins: ", item.pluginCount] }), _jsx(ActionHints, { hints: [
+                    { key: "Enter", label: actionHint, tone: isEnabled ? "primary" : "default" },
+                ] }), isEnabled ? (_jsx("box", { children: _jsx("text", { fg: theme.colors.muted, children: "\u2190 \u2192 to expand/collapse" }) })) : null] }));
+}
+// ─── Plugin renderers ─────────────────────────────────────────────────────────
+function pluginRow(item, isSelected) {
+    const { plugin } = item;
+    const hasUser = !!plugin.userScope?.enabled;
+    const hasProject = !!plugin.projectScope?.enabled;
+    const hasLocal = !!plugin.localScope?.enabled;
+    const hasAnyScope = hasUser || hasProject || hasLocal;
+    // Build version string
+    let versionStr = "";
+    if (plugin.isOrphaned) {
+        versionStr = " deprecated";
+    }
+    else if (plugin.installedVersion && plugin.installedVersion !== "0.0.0") {
+        versionStr = ` v${plugin.installedVersion}`;
+        if (plugin.hasUpdate && plugin.version) {
+            versionStr += ` → v${plugin.version}`;
+        }
+    }
+    if (isSelected) {
+        return (_jsxs("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: [" ", _jsx(ScopeSquares, { user: hasUser, project: hasProject, local: hasLocal, selected: true }), " ", plugin.name, versionStr, " "] }));
+    }
+    // Fuzzy highlight
+    const segments = item.matches ? highlightMatches(plugin.name, item.matches) : null;
+    const displayName = segments ? segments.map((seg) => seg.text).join("") : plugin.name;
+    if (plugin.isOrphaned) {
+        const ver = plugin.installedVersion && plugin.installedVersion !== "0.0.0"
+            ? ` v${plugin.installedVersion}`
+            : "";
+        return (_jsxs("text", { children: [_jsx("span", { fg: theme.colors.danger, children: " \u25A0\u25A0\u25A0 " }), _jsx("span", { fg: theme.colors.muted, children: displayName }), ver ? _jsx("span", { fg: theme.colors.warning, children: ver }) : null, _jsx("span", { fg: theme.colors.danger, children: " deprecated" })] }));
+    }
+    return (_jsxs("text", { children: [_jsx("span", { children: " " }), _jsx(ScopeSquares, { user: hasUser, project: hasProject, local: hasLocal }), _jsx("span", { children: " " }), _jsx("span", { fg: hasAnyScope ? theme.colors.text : theme.colors.muted, children: displayName }), _jsx(MetaText, { text: versionStr, tone: plugin.hasUpdate ? "warning" : "muted" })] }));
+}
+function pluginDetail(item) {
+    const { plugin } = item;
+    const isInstalled = plugin.userScope?.enabled ||
+        plugin.projectScope?.enabled ||
+        plugin.localScope?.enabled;
+    // Orphaned/deprecated plugin
+    if (plugin.isOrphaned) {
+        return (_jsxs("box", { flexDirection: "column", children: [_jsx("box", { justifyContent: "center", children: _jsx("text", { bg: theme.colors.warning, fg: "black", children: _jsxs("strong", { children: [" ", plugin.name, " \u2014 DEPRECATED "] }) }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.warning, children: "This plugin is no longer in the marketplace." }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.muted, children: "It was removed from the marketplace but still referenced in your settings. Press d to uninstall and clean up." }) }), isInstalled ? (_jsx(ActionHints, { hints: [{ key: "d", label: "Uninstall (recommended)", tone: "danger" }] })) : null] }));
+    }
+    // Build component counts
+    const components = [];
+    if (plugin.agents?.length)
+        components.push(`${plugin.agents.length} agents`);
+    if (plugin.commands?.length)
+        components.push(`${plugin.commands.length} commands`);
+    if (plugin.skills?.length)
+        components.push(`${plugin.skills.length} skills`);
+    if (plugin.mcpServers?.length)
+        components.push(`${plugin.mcpServers.length} MCP`);
+    if (plugin.lspServers && Object.keys(plugin.lspServers).length) {
+        components.push(`${Object.keys(plugin.lspServers).length} LSP`);
+    }
+    const showVersion = plugin.version && plugin.version !== "0.0.0";
+    const showInstalledVersion = plugin.installedVersion && plugin.installedVersion !== "0.0.0";
+    return (_jsxs("box", { flexDirection: "column", children: [_jsx("box", { justifyContent: "center", children: _jsx("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: _jsxs("strong", { children: [" ", plugin.name, plugin.hasUpdate ? " ⬆" : "", " "] }) }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: isInstalled ? theme.colors.success : theme.colors.muted, children: isInstalled ? "● Installed" : "○ Not installed" }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { fg: theme.colors.text, children: plugin.description }) }), showVersion ? (_jsx(KeyValueLine, { label: "Version", value: _jsxs("span", { children: [_jsxs("span", { fg: theme.colors.link, children: ["v", plugin.version] }), showInstalledVersion && plugin.installedVersion !== plugin.version ? (_jsxs("span", { children: [" (v", plugin.installedVersion, " installed)"] })) : null] }) })) : null, plugin.category ? (_jsx(KeyValueLine, { label: "Category", value: _jsx("span", { fg: theme.colors.accent, children: plugin.category }) })) : null, plugin.author ? (_jsx(KeyValueLine, { label: "Author", value: _jsx("span", { children: plugin.author.name }) })) : null, components.length > 0 ? (_jsx(KeyValueLine, { label: "Contains", value: _jsx("span", { fg: theme.colors.warning, children: components.join(" · ") }) })) : null, _jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsxs("span", { bg: theme.scopes.user, fg: "black", children: [" ", "u", " "] }), _jsx("span", { fg: plugin.userScope?.enabled ? theme.scopes.user : theme.colors.muted, children: plugin.userScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: theme.scopes.user, children: "User" }), _jsx("span", { children: " global" }), plugin.userScope?.version ? (_jsxs("span", { fg: theme.scopes.user, children: [" v", plugin.userScope.version] })) : null] }), _jsxs("text", { children: [_jsxs("span", { bg: theme.scopes.project, fg: "black", children: [" ", "p", " "] }), _jsx("span", { fg: plugin.projectScope?.enabled ? theme.scopes.project : theme.colors.muted, children: plugin.projectScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: theme.scopes.project, children: "Project" }), _jsx("span", { children: " team" }), plugin.projectScope?.version ? (_jsxs("span", { fg: theme.scopes.project, children: [" v", plugin.projectScope.version] })) : null] }), _jsxs("text", { children: [_jsxs("span", { bg: theme.scopes.local, fg: "black", children: [" ", "l", " "] }), _jsx("span", { fg: plugin.localScope?.enabled ? theme.scopes.local : theme.colors.muted, children: plugin.localScope?.enabled ? " ● " : " ○ " }), _jsx("span", { fg: theme.scopes.local, children: "Local" }), _jsx("span", { children: " private" }), plugin.localScope?.version ? (_jsxs("span", { fg: theme.scopes.local, children: [" v", plugin.localScope.version] })) : null] })] })] }), isInstalled && plugin.hasUpdate ? (_jsx(ActionHints, { hints: [{ key: "U", label: `Update to v${plugin.version}`, tone: "primary" }] })) : null] }));
+}
+// ─── Public dispatch functions ────────────────────────────────────────────────
+/**
+ * Render a plugin browser list row by item kind.
+ */
+export function renderPluginRow(item, _index, isSelected) {
+    if (item.kind === "category") {
+        return categoryRow(item, isSelected);
+    }
+    return pluginRow(item, isSelected);
+}
+/**
+ * Render the detail panel for a plugin browser item.
+ */
+export function renderPluginDetail(item, collapsedMarketplaces) {
+    if (!item)
+        return _jsx("text", { fg: theme.colors.muted, children: "Select an item" });
+    if (item.kind === "category") {
+        return categoryDetail(item, collapsedMarketplaces);
+    }
+    return pluginDetail(item);
+}