claudeup 3.16.0 → 4.0.0

package/src/ui/renderers/pluginRenderers.tsx

@@ -0,0 +1,362 @@
+import React from "react";
+import type {
+  PluginBrowserItem,
+  PluginCategoryItem,
+  PluginPluginItem,
+} from "../adapters/pluginsAdapter.js";
+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: PluginCategoryItem, isSelected: boolean): React.ReactNode {
+  const mp = item.marketplace;
+
+  if (isSelected) {
+    const arrow = item.isExpanded ? "▼" : "▶";
+    const count = item.pluginCount > 0 ? ` (${item.pluginCount})` : "";
+    return (
+      <SelectableRow selected={true}>
+        <strong>
+          {" "}
+          {arrow} {mp.displayName}
+          {count}{" "}
+        </strong>
+      </SelectableRow>
+    );
+  }
+
+  // Map tone to a statusColor for CategoryHeader (legacy component)
+  const statusColorMap: Record<PluginCategoryItem["tone"], string> = {
+    yellow: "yellow",
+    gray: "gray",
+    green: "green",
+    red: "red",
+    purple: theme.colors.accent,
+    teal: "cyan",
+  };
+
+  return (
+    <CategoryHeader
+      title={mp.displayName}
+      expanded={item.isExpanded}
+      count={item.pluginCount}
+      status={item.badge}
+      statusColor={statusColorMap[item.tone]}
+    />
+  );
+}
+
+function categoryDetail(
+  item: PluginCategoryItem,
+  collapsedMarketplaces: Set<string>,
+): React.ReactNode {
+  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 (
+    <box flexDirection="column">
+      <text fg={theme.colors.info}>
+        <strong>
+          {mp.displayName}
+          {item.badge ? ` ${item.badge}` : ""}
+        </strong>
+      </text>
+      <text fg={theme.colors.muted}>{mp.description || "No description"}</text>
+      <text fg={isEnabled ? theme.colors.success : theme.colors.muted}>
+        {isEnabled ? "● Added" : "○ Not added"}
+      </text>
+      <text fg={theme.colors.link}>github.com/{mp.source.repo}</text>
+      <text>Plugins: {item.pluginCount}</text>
+      <ActionHints
+        hints={[
+          { key: "Enter", label: actionHint, tone: isEnabled ? "primary" : "default" },
+        ]}
+      />
+      {isEnabled ? (
+        <box>
+          <text fg={theme.colors.muted}>← → to expand/collapse</text>
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+// ─── Plugin renderers ─────────────────────────────────────────────────────────
+
+function pluginRow(item: PluginPluginItem, isSelected: boolean): React.ReactNode {
+  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 (
+      <text bg={theme.selection.bg} fg={theme.selection.fg}>
+        {" "}
+        <ScopeSquares user={hasUser} project={hasProject} local={hasLocal} selected={true} />
+        {" "}{plugin.name}{versionStr}{" "}
+      </text>
+    );
+  }
+
+  // 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 (
+      <text>
+        <span fg={theme.colors.danger}> ■■■ </span>
+        <span fg={theme.colors.muted}>{displayName}</span>
+        {ver ? <span fg={theme.colors.warning}>{ver}</span> : null}
+        <span fg={theme.colors.danger}> deprecated</span>
+      </text>
+    );
+  }
+
+  return (
+    <text>
+      <span> </span>
+      <ScopeSquares user={hasUser} project={hasProject} local={hasLocal} />
+      <span> </span>
+      <span fg={hasAnyScope ? theme.colors.text : theme.colors.muted}>{displayName}</span>
+      <MetaText text={versionStr} tone={plugin.hasUpdate ? "warning" : "muted"} />
+    </text>
+  );
+}
+
+function pluginDetail(item: PluginPluginItem): React.ReactNode {
+  const { plugin } = item;
+  const isInstalled =
+    plugin.userScope?.enabled ||
+    plugin.projectScope?.enabled ||
+    plugin.localScope?.enabled;
+
+  // Orphaned/deprecated plugin
+  if (plugin.isOrphaned) {
+    return (
+      <box flexDirection="column">
+        <box justifyContent="center">
+          <text bg={theme.colors.warning} fg="black">
+            <strong> {plugin.name} — DEPRECATED </strong>
+          </text>
+        </box>
+        <box marginTop={1}>
+          <text fg={theme.colors.warning}>
+            This plugin is no longer in the marketplace.
+          </text>
+        </box>
+        <box marginTop={1}>
+          <text fg={theme.colors.muted}>
+            It was removed from the marketplace but still referenced in your settings. Press d to
+            uninstall and clean up.
+          </text>
+        </box>
+        {isInstalled ? (
+          <ActionHints
+            hints={[{ key: "d", label: "Uninstall (recommended)", tone: "danger" }]}
+          />
+        ) : null}
+      </box>
+    );
+  }
+
+  // Build component counts
+  const components: string[] = [];
+  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 (
+    <box flexDirection="column">
+      {/* Plugin name header */}
+      <box justifyContent="center">
+        <text bg={theme.selection.bg} fg={theme.selection.fg}>
+          <strong>
+            {" "}
+            {plugin.name}
+            {plugin.hasUpdate ? " ⬆" : ""}{" "}
+          </strong>
+        </text>
+      </box>
+
+      {/* Status line */}
+      <box marginTop={1}>
+        <text fg={isInstalled ? theme.colors.success : theme.colors.muted}>
+          {isInstalled ? "● Installed" : "○ Not installed"}
+        </text>
+      </box>
+
+      {/* Description */}
+      <box marginTop={1} marginBottom={1}>
+        <text fg={theme.colors.text}>{plugin.description}</text>
+      </box>
+
+      {/* Metadata */}
+      {showVersion ? (
+        <KeyValueLine
+          label="Version"
+          value={
+            <span>
+              <span fg={theme.colors.link}>v{plugin.version}</span>
+              {showInstalledVersion && plugin.installedVersion !== plugin.version ? (
+                <span> (v{plugin.installedVersion} installed)</span>
+              ) : null}
+            </span>
+          }
+        />
+      ) : null}
+      {plugin.category ? (
+        <KeyValueLine
+          label="Category"
+          value={<span fg={theme.colors.accent}>{plugin.category}</span>}
+        />
+      ) : null}
+      {plugin.author ? (
+        <KeyValueLine label="Author" value={<span>{plugin.author.name}</span>} />
+      ) : null}
+      {components.length > 0 ? (
+        <KeyValueLine
+          label="Contains"
+          value={<span fg={theme.colors.warning}>{components.join(" · ")}</span>}
+        />
+      ) : null}
+
+      {/* Scope Status */}
+      <DetailSection>
+        <text>{"─".repeat(24)}</text>
+        <text>
+          <strong>Scopes:</strong>
+        </text>
+        <box marginTop={1} flexDirection="column">
+          <text>
+            <span bg={theme.scopes.user} fg="black">
+              {" "}
+              u{" "}
+            </span>
+            <span fg={plugin.userScope?.enabled ? theme.scopes.user : theme.colors.muted}>
+              {plugin.userScope?.enabled ? " ● " : " ○ "}
+            </span>
+            <span fg={theme.scopes.user}>User</span>
+            <span> global</span>
+            {plugin.userScope?.version ? (
+              <span fg={theme.scopes.user}> v{plugin.userScope.version}</span>
+            ) : null}
+          </text>
+          <text>
+            <span bg={theme.scopes.project} fg="black">
+              {" "}
+              p{" "}
+            </span>
+            <span fg={plugin.projectScope?.enabled ? theme.scopes.project : theme.colors.muted}>
+              {plugin.projectScope?.enabled ? " ● " : " ○ "}
+            </span>
+            <span fg={theme.scopes.project}>Project</span>
+            <span> team</span>
+            {plugin.projectScope?.version ? (
+              <span fg={theme.scopes.project}> v{plugin.projectScope.version}</span>
+            ) : null}
+          </text>
+          <text>
+            <span bg={theme.scopes.local} fg="black">
+              {" "}
+              l{" "}
+            </span>
+            <span fg={plugin.localScope?.enabled ? theme.scopes.local : theme.colors.muted}>
+              {plugin.localScope?.enabled ? " ● " : " ○ "}
+            </span>
+            <span fg={theme.scopes.local}>Local</span>
+            <span> private</span>
+            {plugin.localScope?.version ? (
+              <span fg={theme.scopes.local}> v{plugin.localScope.version}</span>
+            ) : null}
+          </text>
+        </box>
+      </DetailSection>
+
+      {/* Update action */}
+      {isInstalled && plugin.hasUpdate ? (
+        <ActionHints
+          hints={[{ key: "U", label: `Update to v${plugin.version}`, tone: "primary" }]}
+        />
+      ) : null}
+    </box>
+  );
+}
+
+// ─── Public dispatch functions ────────────────────────────────────────────────
+
+/**
+ * Render a plugin browser list row by item kind.
+ */
+export function renderPluginRow(
+  item: PluginBrowserItem,
+  _index: number,
+  isSelected: boolean,
+): React.ReactNode {
+  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: PluginBrowserItem | undefined,
+  collapsedMarketplaces: Set<string>,
+): React.ReactNode {
+  if (!item) return <text fg={theme.colors.muted}>Select an item</text>;
+  if (item.kind === "category") {
+    return categoryDetail(item, collapsedMarketplaces);
+  }
+  return pluginDetail(item);
+}

package/src/ui/renderers/profileRenderers.js

@@ -0,0 +1,172 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { theme } from "../theme.js";
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+function truncate(s, maxLen) {
+    if (s.length <= maxLen)
+        return s;
+    return s.slice(0, maxLen - 1) + "\u2026";
+}
+export function humanizeValue(_key, value) {
+    if (typeof value === "boolean")
+        return value ? "on" : "off";
+    if (typeof value !== "string")
+        return String(value);
+    if (value === "claude-sonnet-4-6")
+        return "Sonnet";
+    if (value === "claude-opus-4-6")
+        return "Opus";
+    if (value === "claude-haiku-4-6")
+        return "Haiku";
+    if (value.startsWith("claude-sonnet"))
+        return "Sonnet";
+    if (value.startsWith("claude-opus"))
+        return "Opus";
+    if (value.startsWith("claude-haiku"))
+        return "Haiku";
+    return value;
+}
+export function humanizeKey(key) {
+    const labels = {
+        effortLevel: "Effort",
+        model: "Model",
+        outputStyle: "Output",
+        alwaysThinkingEnabled: "Thinking",
+    };
+    return labels[key] ?? key;
+}
+export function stripSuffix(pluginName) {
+    return pluginName
+        .replace(/@magus$/, "")
+        .replace(/@claude-plugins-official$/, "");
+}
+export function wrapNames(names, lineMax = 40) {
+    const lines = [];
+    let current = "";
+    for (const name of names) {
+        const add = current ? `, ${name}` : name;
+        if (current && current.length + add.length > lineMax) {
+            lines.push(current);
+            current = name;
+        }
+        else {
+            current += current ? `, ${name}` : name;
+        }
+    }
+    if (current)
+        lines.push(current);
+    return lines;
+}
+export function formatDate(iso) {
+    try {
+        const d = new Date(iso);
+        return d.toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+        });
+    }
+    catch {
+        return iso;
+    }
+}
+// ─── Header renderer ───────────────────────────────────────────────────────────
+const headerRenderer = {
+    renderRow: ({ item }) => (_jsx("text", { bg: item.color, fg: "white", children: _jsxs("strong", { children: [" ", item.label, " (", item.count, ")", " "] }) })),
+    renderDetail: () => (_jsx("text", { fg: theme.colors.muted, children: "Select a profile to see details" })),
+};
+// ─── Predefined renderer ───────────────────────────────────────────────────────
+const DIVIDER = "────────────────────────";
+const predefinedRenderer = {
+    renderRow: ({ item, isSelected }) => {
+        const { profile } = item;
+        const pluginCount = profile.magusPlugins.length + profile.anthropicPlugins.length;
+        const skillCount = profile.skills.length;
+        const label = truncate(`${profile.name} — ${pluginCount} plugins · ${skillCount} skill${skillCount !== 1 ? "s" : ""}`, 45);
+        if (isSelected) {
+            return (_jsxs("text", { bg: "blue", fg: "white", children: [" ", label, " "] }));
+        }
+        return (_jsxs("text", { children: [_jsx("span", { fg: theme.colors.muted, children: "- " }), _jsx("span", { fg: theme.colors.text, children: label })] }));
+    },
+    renderDetail: ({ item }) => {
+        const { profile } = item;
+        const magusNames = profile.magusPlugins;
+        const anthropicNames = profile.anthropicPlugins;
+        const magusLines = wrapNames(magusNames);
+        const anthropicLines = wrapNames(anthropicNames);
+        const skillLines = wrapNames(profile.skills);
+        const settingEntries = Object.entries(profile.settings).filter(([k]) => k !== "env");
+        const envMap = profile.settings["env"] ?? {};
+        const tasksOn = envMap["CLAUDE_CODE_ENABLE_TASKS"] === "true";
+        const teamsOn = envMap["CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS"] === "true";
+        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: theme.colors.text, children: _jsx("strong", { children: profile.name }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.muted, children: profile.description }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.dim, children: DIVIDER }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: theme.colors.muted, children: ["Magus plugins (", magusNames.length, "):"] }), magusLines.map((line, i) => (_jsxs("text", { fg: theme.colors.info, children: ["  ", line] }, i)))] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: theme.colors.muted, children: ["Anthropic plugins (", anthropicNames.length, "):"] }), anthropicLines.map((line, i) => (_jsxs("text", { fg: theme.colors.warning, children: ["  ", line] }, i)))] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: theme.colors.muted, children: ["Skills (", profile.skills.length, "):"] }), skillLines.map((line, i) => (_jsxs("text", { fg: theme.colors.text, children: ["  ", line] }, i)))] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.dim, children: DIVIDER }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsx("text", { fg: theme.colors.muted, children: "Settings:" }), settingEntries.map(([k, v]) => (_jsxs("text", { children: [_jsxs("span", { fg: theme.colors.muted, children: ["  ", humanizeKey(k).padEnd(14)] }), _jsx("span", { fg: theme.colors.text, children: humanizeValue(k, v) })] }, k))), tasksOn && (_jsxs("text", { children: [_jsxs("span", { fg: theme.colors.muted, children: ["  ", "Tasks".padEnd(14)] }), _jsx("span", { fg: theme.colors.text, children: "on" })] })), teamsOn && (_jsxs("text", { children: [_jsxs("span", { fg: theme.colors.muted, children: ["  ", "Agent Teams".padEnd(14)] }), _jsx("span", { fg: theme.colors.text, children: "on" })] }))] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.dim, children: DIVIDER }) }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: "blue", fg: "white", children: [" ", "Enter/a", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Apply to project" })] })] }));
+    },
+};
+// ─── Saved renderer ────────────────────────────────────────────────────────────
+const savedRenderer = {
+    renderRow: ({ item, isSelected }) => {
+        const { entry } = item;
+        const pluginCount = Object.keys(entry.plugins).length;
+        const dateStr = formatDate(entry.updatedAt);
+        const label = truncate(`${entry.name} — ${pluginCount} plugin${pluginCount !== 1 ? "s" : ""} · ${dateStr}`, 45);
+        if (isSelected) {
+            return (_jsxs("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: [" ", label, " "] }));
+        }
+        const scopeColor = entry.scope === "user" ? theme.scopes.user : theme.scopes.project;
+        const scopeLabel = entry.scope === "user" ? "[user]" : "[proj]";
+        return (_jsxs("text", { children: [_jsxs("span", { fg: scopeColor, children: [scopeLabel, " "] }), _jsx("span", { fg: theme.colors.text, children: label })] }));
+    },
+    renderDetail: ({ item }) => {
+        const { entry: selectedProfile } = item;
+        const plugins = Object.keys(selectedProfile.plugins);
+        const cleanPlugins = plugins.map(stripSuffix);
+        const scopeColor = selectedProfile.scope === "user" ? theme.scopes.user : theme.scopes.project;
+        const scopeLabel = selectedProfile.scope === "user"
+            ? "User (~/.claude/profiles.json)"
+            : "Project (.claude/profiles.json — committed to git)";
+        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: theme.colors.info, children: _jsx("strong", { children: selectedProfile.name }) }), _jsxs("box", { marginTop: 1, children: [_jsx("text", { fg: theme.colors.muted, children: "Scope: " }), _jsx("text", { fg: scopeColor, children: scopeLabel })] }), _jsx("box", { marginTop: 1, children: _jsxs("text", { fg: theme.colors.muted, children: ["Created: ", formatDate(selectedProfile.createdAt), " \u00B7 Updated:", " ", formatDate(selectedProfile.updatedAt)] }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: theme.colors.muted, children: ["Plugins (", plugins.length, plugins.length === 0 ? " — applying will disable all plugins" : "", "):"] }), cleanPlugins.length === 0 ? (_jsx("text", { fg: theme.colors.warning, children: " (none)" })) : (wrapNames(cleanPlugins).map((line, i) => (_jsxs("text", { fg: theme.colors.text, children: ["  ", line] }, i))))] }), _jsxs("box", { marginTop: 2, flexDirection: "column", children: [_jsxs("box", { children: [_jsxs("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: [" ", "Enter/a", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Apply profile" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: theme.colors.dim, fg: "white", children: [" ", "r", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Rename" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: theme.colors.danger, fg: "white", children: [" ", "d", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Delete" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: "blue", fg: "white", children: [" ", "c", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Copy JSON to clipboard" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: theme.colors.success, fg: "white", children: [" ", "i", " "] }), _jsx("text", { fg: theme.colors.muted, children: " Import from clipboard" })] })] })] }));
+    },
+};
+// ─── Dispatch helpers ──────────────────────────────────────────────────────────
+export function renderProfileRow(item, _index, isSelected) {
+    if (item.kind === "header") {
+        return headerRenderer.renderRow({ item, isSelected });
+    }
+    if (item.kind === "predefined") {
+        return predefinedRenderer.renderRow({ item, isSelected });
+    }
+    return savedRenderer.renderRow({ item, isSelected });
+}
+export function renderProfileDetail(item, loading, error) {
+    if (loading)
+        return _jsx("text", { fg: theme.colors.muted, children: "Loading profiles..." });
+    if (error)
+        return _jsxs("text", { fg: theme.colors.danger, children: ["Error: ", error] });
+    if (!item || item.kind === "header")
+        return _jsx("text", { fg: theme.colors.muted, children: "Select a profile to see details" });
+    if (item.kind === "predefined") {
+        return predefinedRenderer.renderDetail({ item });
+    }
+    return savedRenderer.renderDetail({ item });
+}
+export function buildProfileListItems(profileList, PREDEFINED_PROFILES) {
+    const items = [];
+    items.push({
+        kind: "header",
+        label: "Presets",
+        color: "#4527a0",
+        count: PREDEFINED_PROFILES.length,
+    });
+    for (const p of PREDEFINED_PROFILES) {
+        items.push({ kind: "predefined", profile: p });
+    }
+    items.push({
+        kind: "header",
+        label: "Your Profiles",
+        color: "#00695c",
+        count: profileList.length,
+    });
+    for (const e of profileList) {
+        items.push({ kind: "saved", entry: e });
+    }
+    return items;
+}