claudeup 4.18.0 → 4.22.0

package/src/ui/renderers/pluginRenderers.js

@@ -1,124 +0,0 @@
-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 — only show if plugin is installed in at least one scope
-    let versionStr = "";
-    if (plugin.isOrphaned) {
-        versionStr = " deprecated";
-    }
-    else if (hasAnyScope && 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." }) }), _jsx(ActionHints, { hints: [{ key: "d", label: isInstalled ? "Remove from all scopes" : "Clean up stale reference", tone: "danger" }] })] }));
-    }
-    // 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 = isInstalled && 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, isInstalled && 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);
-}

package/src/ui/renderers/profileRenderers.js

@@ -1,177 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } 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",
-        includeGitInstructions: "Git Instructions",
-        respectGitignore: "Gitignore",
-        enableAllProjectMcpServers: "Auto MCP",
-        autoUpdatesChannel: "Updates",
-        language: "Language",
-        cleanupPeriodDays: "Cleanup",
-    };
-    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 countStr = `${pluginCount}p ${skillCount}s`;
-        if (isSelected) {
-            return (_jsxs("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: ["  ", profile.name, "  ", countStr, " "] }));
-        }
-        return (_jsxs("text", { children: [_jsxs("span", { fg: "white", children: ["  ", profile.name] }), _jsxs("span", { fg: theme.colors.dim, children: ["  ", countStr] })] }));
-    },
-    renderDetail: ({ item }) => {
-        const { profile } = item;
-        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("box", { children: _jsx("text", { bg: theme.colors.accent, fg: "white", children: _jsxs("strong", { children: [" ", profile.name, " "] }) }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.muted, children: profile.description }) }), _jsx("box", { children: _jsx("text", { fg: theme.colors.muted, children: `\nMagus (${profile.magusPlugins.length})` }) }), _jsx("box", { children: _jsx("text", { fg: "#00bfa5", children: profile.magusPlugins.map((p) => `  ■ ${p}`).join("\n") }) }), _jsx("box", { children: _jsx("text", { fg: theme.colors.muted, children: `\nAnthropic (${profile.anthropicPlugins.length})` }) }), _jsx("box", { children: _jsx("text", { fg: "#b39ddb", children: profile.anthropicPlugins.map((p) => `  ■ ${p}`).join("\n") }) }), profile.skills.length > 0 && (_jsxs(_Fragment, { children: [_jsx("box", { children: _jsx("text", { fg: theme.colors.muted, children: `\nSkills (${profile.skills.length})` }) }), _jsx("box", { children: _jsx("text", { fg: "#ffd54f", children: profile.skills.map((s) => `  ■ ${s}`).join("\n") }) })] })), _jsx("box", { children: _jsx("text", { fg: theme.colors.dim, children: `\n${DIVIDER}` }) }), _jsx("box", { children: _jsx("text", { fg: theme.colors.muted, children: [
-                            ...settingEntries.map(([k, v]) => `  ${humanizeKey(k).padEnd(18)}${humanizeValue(k, v)}`),
-                            ...(tasksOn ? [`  ${"Tasks".padEnd(18)}on`] : []),
-                            ...(teamsOn ? [`  ${"Agent Teams".padEnd(18)}on`] : []),
-                        ].join("\n") }) }), _jsx("box", { children: _jsx("text", { fg: theme.colors.dim, children: `\n${DIVIDER}` }) }), _jsx("box", { children: _jsx("text", { fg: theme.colors.info, children: "  Enter/a to apply" }) })] }));
-    },
-};
-// ─── 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;
-}

package/src/ui/renderers/settingsRenderers.js

@@ -1,73 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { CATEGORY_LABELS, CATEGORY_BG, CATEGORY_COLOR, CATEGORY_DESCRIPTIONS, formatValue, } from "../adapters/settingsAdapter.js";
-import { MetaText } from "../components/primitives/index.js";
-import { theme } from "../theme.js";
-// ─── Category renderer ─────────────────────────────────────────────────────────
-const categoryRenderer = {
-    renderRow: ({ item, isSelected }) => {
-        const star = item.category === "recommended" ? "★ " : "";
-        const label = `${star}${CATEGORY_LABELS[item.category]}`;
-        const bg = isSelected ? theme.selection.bg : CATEGORY_BG[item.category];
-        return (_jsx("box", { width: "100%", children: _jsx("text", { bg: bg, fg: "white", children: _jsxs("strong", { children: [" ", label, " "] }) }) }));
-    },
-    renderDetail: ({ item }) => {
-        const cat = item.category;
-        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: CATEGORY_COLOR[cat], children: _jsx("strong", { children: CATEGORY_LABELS[cat] }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.muted, children: CATEGORY_DESCRIPTIONS[cat] }) })] }));
-    },
-};
-// ─── Setting renderer ──────────────────────────────────────────────────────────
-const settingRenderer = {
-    renderRow: ({ item, isSelected }) => {
-        const { setting } = item;
-        const indicator = item.isDefault ? "○" : "●";
-        const displayValue = formatValue(setting, item.effectiveValue);
-        if (isSelected) {
-            return (_jsxs("text", { bg: theme.selection.bg, fg: theme.selection.fg, children: [" ", indicator, " ", setting.name.padEnd(28), displayValue, " "] }));
-        }
-        const indicatorColor = item.isDefault ? theme.colors.muted : theme.colors.info;
-        const valueColor = item.isDefault ? theme.colors.muted : theme.colors.success;
-        return (_jsxs("text", { children: [_jsxs("span", { fg: indicatorColor, children: [" ", indicator, " "] }), _jsx("span", { children: setting.name.padEnd(28) }), _jsx("span", { fg: valueColor, children: displayValue })] }));
-    },
-    renderDetail: ({ item }) => {
-        const { setting } = item;
-        const scoped = item.scopedValues;
-        const storageDesc = setting.storage.type === "attribution"
-            ? "settings.json: attribution"
-            : setting.storage.type === "attribution-text"
-                ? "settings.json: attribution"
-                : setting.storage.type === "env"
-                    ? `env: ${setting.storage.key}`
-                    : `settings.json: ${setting.storage.key}`;
-        const userValue = formatValue(setting, scoped.user);
-        const projectValue = formatValue(setting, scoped.project);
-        const userIsSet = scoped.user !== undefined && scoped.user !== "";
-        const projectIsSet = scoped.project !== undefined && scoped.project !== "";
-        const actionLabel = setting.type === "boolean"
-            ? "toggle"
-            : setting.type === "select"
-                ? "choose"
-                : "edit";
-        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: theme.colors.info, children: _jsx("strong", { children: setting.name }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: theme.colors.text, children: setting.description }) }), _jsx("box", { marginTop: 1, children: _jsxs("text", { children: [_jsx("span", { fg: theme.colors.muted, children: "Stored " }), _jsx("span", { fg: theme.colors.link, children: storageDesc })] }) }), setting.defaultValue !== undefined && (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: theme.colors.muted, children: "Default " }), _jsx("span", { children: setting.defaultValue })] }) })), _jsxs("box", { flexDirection: "column", marginTop: 1, children: [_jsx("text", { children: "────────────────────────" }), _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: userIsSet ? theme.scopes.user : theme.colors.muted, children: userIsSet ? " ● " : " ○ " }), _jsx("span", { fg: theme.scopes.user, children: "User" }), _jsx("span", { children: " global" }), _jsxs("span", { fg: userIsSet ? theme.scopes.user : theme.colors.muted, children: [" ", userValue] })] }), _jsxs("text", { children: [_jsxs("span", { bg: theme.scopes.project, fg: "black", children: [" ", "p", " "] }), _jsx("span", { fg: projectIsSet ? theme.scopes.project : theme.colors.muted, children: projectIsSet ? " ● " : " ○ " }), _jsx("span", { fg: theme.scopes.project, children: "Project" }), _jsx("span", { children: " team" }), _jsxs("span", { fg: projectIsSet ? theme.scopes.project : theme.colors.muted, children: [" ", projectValue] })] })] })] }), _jsx("box", { marginTop: 1, children: _jsxs("text", { fg: theme.colors.muted, children: ["Press u/p to ", actionLabel, " in scope"] }) })] }));
-    },
-};
-// ─── Dispatch helpers ──────────────────────────────────────────────────────────
-export const settingsRenderers = {
-    category: categoryRenderer,
-    setting: settingRenderer,
-};
-export function renderSettingRow(item, _index, isSelected) {
-    if (item.kind === "category") {
-        return settingsRenderers.category.renderRow({ item, isSelected });
-    }
-    return settingsRenderers.setting.renderRow({ item, isSelected });
-}
-export function renderSettingDetail(item) {
-    if (!item)
-        return _jsx("text", { fg: theme.colors.muted, children: "Select a setting to see details" });
-    if (item.kind === "category") {
-        return settingsRenderers.category.renderDetail({ item });
-    }
-    return settingsRenderers.setting.renderDetail({ item });
-}
-// Suppress unused import warning — MetaText may be used in future extensions
-void MetaText;

package/src/ui/renderers/skillRenderers.js

@@ -1,138 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { STAR_RELIABILITY_INFO } from "../../data/skill-repos.js";
-import { SelectableRow, ListCategoryRow, ScopeSquares, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-function formatStarsNum(stars) {
-    if (!stars)
-        return "";
-    if (stars >= 1000000)
-        return `${(stars / 1000000).toFixed(1)}M`;
-    if (stars >= 10000)
-        return `${Math.round(stars / 1000)}K`;
-    if (stars >= 1000)
-        return `${(stars / 1000).toFixed(1)}K`;
-    return `${stars}`;
-}
-/** Star icon and color based on reliability classification */
-function starIcon(reliability) {
-    if (reliability === "mega-repo")
-        return "☆";
-    if (reliability === "skill-dump")
-        return "☆";
-    return "★";
-}
-function starColor(reliability) {
-    if (reliability === "mega-repo")
-        return "gray";
-    if (reliability === "skill-dump")
-        return "#888800";
-    return "yellow";
-}
-function formatStars(stars, reliability) {
-    if (!stars)
-        return "";
-    return `${starIcon(reliability)} ${formatStarsNum(stars)}`;
-}
-// ─── Category renderer ────────────────────────────────────────────────────────
-const categoryRenderer = {
-    renderRow: ({ item, isSelected }) => {
-        const label = `${item.star ?? ""}${item.title}`;
-        return (_jsx(ListCategoryRow, { selected: isSelected, title: label, count: item.count, badge: item.badge, tone: item.tone }));
-    },
-    renderDetail: ({ item }) => {
-        const isRec = item.categoryKey === "recommended";
-        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: isRec ? "green" : "cyan", children: _jsxs("strong", { children: [item.star ?? "", item.title] }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: isRec
-                            ? "Curated skills recommended for most projects"
-                            : "Popular skills sorted by stars" }) })] }));
-    },
-};
-// ─── Skill renderer ───────────────────────────────────────────────────────────
-const MAX_SKILL_NAME_LEN = 35;
-function truncateName(name) {
-    return name.length > MAX_SKILL_NAME_LEN
-        ? name.slice(0, MAX_SKILL_NAME_LEN - 1) + "\u2026"
-        : name;
-}
-const skillRenderer = {
-    renderRow: ({ item, isSelected }) => {
-        const { skill } = item;
-        const hasUser = skill.installedScope === "user";
-        const hasProject = skill.installedScope === "project";
-        const reliability = skill.starReliability;
-        const starsStr = formatStars(skill.stars, reliability);
-        const sColor = starColor(reliability);
-        const displayName = truncateName(skill.name);
-        const indentLevel = item.indent ?? 1;
-        return (_jsxs(SelectableRow, { selected: isSelected, indent: indentLevel, children: [_jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected }), _jsx("span", { children: " " }), _jsx("span", { fg: isSelected ? "white" : skill.installed ? "white" : "gray", children: displayName }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx("span", { fg: sColor, children: `  ${starsStr}` }) : null] }));
-    },
-    renderDetail: ({ item }) => {
-        const { skill } = item;
-        const fm = skill.frontmatter;
-        const description = fm?.description || skill.description || "Loading...";
-        const reliability = skill.starReliability;
-        const starsStr = formatStars(skill.stars, reliability);
-        const sColor = starColor(reliability);
-        const reliabilityInfo = reliability ? STAR_RELIABILITY_INFO[reliability] : null;
-        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: skill.name }), starsStr ? _jsxs("span", { fg: sColor, children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: description }) }), fm?.category ? (_jsx(KeyValueLine, { label: "Category", value: _jsx("span", { fg: "cyan", children: fm.category }) })) : null, fm?.author ? (_jsx(KeyValueLine, { label: "Author", value: _jsx("span", { children: fm.author }) })) : null, fm?.version ? (_jsx(KeyValueLine, { label: "Version", value: _jsx("span", { children: fm.version }) })) : null, fm?.tags && fm.tags.length > 0 ? (_jsx(KeyValueLine, { label: "Tags", value: _jsx("span", { children: fm.tags.join(", ") }) })) : null, _jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: skill.repoPath })] })] }), reliabilityInfo && reliability !== "dedicated" && (_jsx("box", { marginTop: 1, children: _jsxs("text", { children: [_jsxs("span", { fg: sColor, children: [starIcon(reliability), " "] }), _jsx("span", { fg: sColor, children: _jsx("strong", { children: reliabilityInfo.label }) }), _jsxs("span", { fg: "gray", children: [" \u2014 ", reliabilityInfo.description] })] }) })), _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: [_jsx("span", { bg: "cyan", fg: "black", children: " u " }), _jsx("span", { fg: skill.installedScope === "user" ? "cyan" : "gray", children: skill.installedScope === "user" ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { fg: "gray", children: " ~/.claude/skills/" })] }), _jsxs("text", { children: [_jsx("span", { bg: "green", fg: "black", children: " p " }), _jsx("span", { fg: skill.installedScope === "project" ? "green" : "gray", children: skill.installedScope === "project" ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { fg: "gray", children: " .claude/skills/" })] })] })] }), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsx("text", { bg: "yellow", fg: "black", children: " UPDATE AVAILABLE " }) })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: skill.installed
-                            ? "Press u/p to toggle scope"
-                            : "Press u/p to install" }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { bg: "#555555", fg: "white", children: " o " }), _jsx("span", { fg: "gray", children: " Open in browser" })] }) })] }));
-    },
-};
-// ─── Skill Set renderer ──────────────────────────────────────────────────────
-const MAX_SET_NAME_LEN = 28;
-const skillSetRenderer = {
-    renderRow: ({ item, isSelected }) => {
-        const { skillSet, expanded } = item;
-        const arrow = expanded ? "\u25BC" : "\u25B6";
-        const displayName = skillSet.name.length > MAX_SET_NAME_LEN
-            ? skillSet.name.slice(0, MAX_SET_NAME_LEN - 1) + "\u2026"
-            : skillSet.name;
-        // Count installed child skills
-        const installedCount = skillSet.loaded
-            ? skillSet.skills.filter((s) => s.installed).length
-            : 0;
-        const totalCount = skillSet.loaded ? skillSet.skills.length : "...";
-        const countStr = `(${installedCount}/${totalCount})`;
-        // Any child installed at user or project scope?
-        const hasUser = skillSet.loaded && skillSet.skills.some((s) => s.installedScope === "user");
-        const hasProject = skillSet.loaded && skillSet.skills.some((s) => s.installedScope === "project");
-        const starsStr = formatStars(skillSet.stars);
-        return (_jsxs(SelectableRow, { selected: isSelected, indent: 1, children: [_jsxs("span", { fg: isSelected ? "white" : "gray", children: [arrow, " "] }), _jsxs("span", { fg: isSelected ? "white" : "yellow", children: [skillSet.icon, " "] }), _jsx("span", { fg: isSelected ? "white" : "cyan", children: _jsx("strong", { children: displayName }) }), _jsxs("span", { fg: "gray", children: ["  ", countStr] }), starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null, _jsx("span", { children: "  " }), _jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected })] }));
-    },
-    renderDetail: ({ item }) => {
-        const { skillSet, expanded } = item;
-        const starsStr = formatStars(skillSet.stars);
-        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsxs("strong", { children: [skillSet.icon, " ", skillSet.name] }), starsStr ? _jsxs("span", { fg: "yellow", children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: skillSet.description }) }), _jsx(DetailSection, { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skillSet.repo })] }) }), skillSet.loading && (_jsx("box", { marginTop: 1, children: _jsx("text", { fg: "yellow", children: "Loading skills..." }) })), skillSet.error && (_jsx("box", { marginTop: 1, children: _jsxs("text", { fg: "red", children: ["Error: ", skillSet.error] }) })), skillSet.loaded && skillSet.skills.length > 0 && (_jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("strong", { children: "Skills in this set:" }), _jsxs("span", { fg: "gray", children: [" ", "(", skillSet.skills.filter((s) => s.installed).length, "/", skillSet.skills.length, " installed)"] })] }), _jsx("box", { marginTop: 1, flexDirection: "column", children: skillSet.skills.map((s) => (_jsxs("text", { children: [_jsx("span", { fg: s.installedScope === "user" ? "cyan" : "gray", children: s.installedScope === "user" ? "\u25A0" : "\u25A1" }), _jsx("span", { fg: s.installedScope === "project" ? "green" : "gray", children: s.installedScope === "project" ? "\u25A0" : "\u25A1" }), _jsxs("span", { fg: s.installed ? "white" : "gray", children: [" ", s.name] })] }, s.id))) })] })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: expanded
-                            ? "Press Enter to collapse \u2022 u/p to install all"
-                            : "Press Enter to expand \u2022 u/p to install all" }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { bg: "#555555", fg: "white", children: " o " }), _jsx("span", { fg: "gray", children: " Open in browser" })] }) })] }));
-    },
-};
-// ─── Registry ─────────────────────────────────────────────────────────────────
-export const skillRenderers = {
-    category: categoryRenderer,
-    skill: skillRenderer,
-    skillset: skillSetRenderer,
-};
-/**
- * Dispatch rendering by item kind.
- */
-export function renderSkillRow(item, _index, isSelected) {
-    if (item.kind === "category") {
-        return skillRenderers.category.renderRow({ item, isSelected });
-    }
-    if (item.kind === "skillset") {
-        return skillRenderers.skillset.renderRow({ item, isSelected });
-    }
-    return skillRenderers.skill.renderRow({ item, isSelected });
-}
-export function renderSkillDetail(item) {
-    if (!item)
-        return _jsx("text", { fg: "gray", children: "Select a skill to see details" });
-    if (item.kind === "category") {
-        return skillRenderers.category.renderDetail({ item });
-    }
-    if (item.kind === "skillset") {
-        return skillRenderers.skillset.renderDetail({ item });
-    }
-    return skillRenderers.skill.renderDetail({ item });
-}