claudeup 3.13.0 → 3.15.0

package/src/ui/registry.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+
+export interface RowRenderProps<T> {
+  item: T;
+  isSelected: boolean;
+  width?: number;
+}
+
+export interface DetailRenderProps<T> {
+  item: T;
+}
+
+export interface Hint {
+  key: string;
+  label: string;
+  tone?: "default" | "primary" | "danger";
+}
+
+export interface ItemRenderer<T> {
+  renderRow: (props: RowRenderProps<T>) => React.ReactNode;
+  renderDetail: (props: DetailRenderProps<T>) => React.ReactNode;
+  getActionHints?: (item: T) => Hint[];
+}
+
+export type RendererRegistry<TItem extends { kind: string }> = {
+  [K in TItem["kind"]]: ItemRenderer<Extract<TItem, { kind: K }>>;
+};

package/src/ui/renderers/skillRenderers.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { SelectableRow, ListCategoryRow, ScopeSquares, ScopeDetail, ActionHints, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function formatStars(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}`;
+}
+// ─── 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 skillRenderer = {
+    renderRow: ({ item, isSelected }) => {
+        const { skill } = item;
+        const hasUser = skill.installedScope === "user";
+        const hasProject = skill.installedScope === "project";
+        const starsStr = formatStars(skill.stars);
+        return (_jsxs(SelectableRow, { selected: isSelected, indent: 1, children: [_jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected }), _jsx("span", { children: " " }), _jsx("span", { fg: isSelected ? "white" : skill.installed ? "white" : "gray", children: skill.name }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null] }));
+    },
+    renderDetail: ({ item }) => {
+        const { skill } = item;
+        const fm = skill.frontmatter;
+        const description = fm?.description || skill.description || "Loading...";
+        const starsStr = formatStars(skill.stars);
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: skill.name }), starsStr ? _jsxs("span", { fg: "yellow", 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 })] })] }), skill.installed && skill.installedScope && (_jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx(ScopeDetail, { scopes: {
+                                user: skill.installedScope === "user",
+                                project: skill.installedScope === "project",
+                            }, paths: {
+                                user: "~/.claude/skills/",
+                                project: ".claude/skills/",
+                            } })] })), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsxs("text", { bg: "yellow", fg: "black", children: [" ", "UPDATE AVAILABLE", " "] }) })), _jsx(ActionHints, { hints: skill.installed
+                        ? [
+                            { key: "d", label: "Uninstall", tone: "danger" },
+                            { key: "u/p", label: "Reinstall in user/project scope" },
+                            { key: "o", label: "Open in browser" },
+                        ]
+                        : [
+                            { key: "u", label: "Install in user scope", tone: "primary" },
+                            { key: "p", label: "Install in project scope", tone: "primary" },
+                            { key: "o", label: "Open in browser" },
+                        ] })] }));
+    },
+};
+// ─── Registry ─────────────────────────────────────────────────────────────────
+export const skillRenderers = {
+    category: categoryRenderer,
+    skill: skillRenderer,
+};
+/**
+ * Dispatch rendering by item kind.
+ */
+export function renderSkillRow(item, _index, isSelected) {
+    if (item.kind === "category") {
+        return skillRenderers.category.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 });
+    }
+    return skillRenderers.skill.renderDetail({ item });
+}

package/src/ui/renderers/skillRenderers.tsx

@@ -0,0 +1,209 @@
+import React from "react";
+import type { ItemRenderer } from "../registry.js";
+import type { SkillBrowserItem, SkillCategoryItem, SkillSkillItem } from "../adapters/skillsAdapter.js";
+import {
+  SelectableRow,
+  ListCategoryRow,
+  ScopeSquares,
+  ScopeDetail,
+  ActionHints,
+  MetaText,
+  KeyValueLine,
+  DetailSection,
+} from "../components/primitives/index.js";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatStars(stars?: number): string {
+  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}`;
+}
+
+// ─── Category renderer ────────────────────────────────────────────────────────
+
+const categoryRenderer: ItemRenderer<SkillCategoryItem> = {
+  renderRow: ({ item, isSelected }) => {
+    const label = `${item.star ?? ""}${item.title}`;
+    return (
+      <ListCategoryRow
+        selected={isSelected}
+        title={label}
+        count={item.count}
+        badge={item.badge}
+        tone={item.tone}
+      />
+    );
+  },
+
+  renderDetail: ({ item }) => {
+    const isRec = item.categoryKey === "recommended";
+    return (
+      <box flexDirection="column">
+        <text fg={isRec ? "green" : "cyan"}>
+          <strong>
+            {item.star ?? ""}
+            {item.title}
+          </strong>
+        </text>
+        <box marginTop={1}>
+          <text fg="gray">
+            {isRec
+              ? "Curated skills recommended for most projects"
+              : "Popular skills sorted by stars"}
+          </text>
+        </box>
+      </box>
+    );
+  },
+};
+
+// ─── Skill renderer ───────────────────────────────────────────────────────────
+
+const skillRenderer: ItemRenderer<SkillSkillItem> = {
+  renderRow: ({ item, isSelected }) => {
+    const { skill } = item;
+    const hasUser = skill.installedScope === "user";
+    const hasProject = skill.installedScope === "project";
+    const starsStr = formatStars(skill.stars);
+
+    return (
+      <SelectableRow selected={isSelected} indent={1}>
+        <ScopeSquares user={hasUser} project={hasProject} selected={isSelected} />
+        <span> </span>
+        <span fg={isSelected ? "white" : skill.installed ? "white" : "gray"}>
+          {skill.name}
+        </span>
+        {skill.hasUpdate ? <MetaText text=" ⬆" tone="warning" /> : null}
+        {starsStr ? <MetaText text={`  ${starsStr}`} tone="warning" /> : null}
+      </SelectableRow>
+    );
+  },
+
+  renderDetail: ({ item }) => {
+    const { skill } = item;
+    const fm = skill.frontmatter;
+    const description = fm?.description || skill.description || "Loading...";
+    const starsStr = formatStars(skill.stars);
+
+    return (
+      <box flexDirection="column">
+        <text fg="cyan">
+          <strong>{skill.name}</strong>
+          {starsStr ? <span fg="yellow">  {starsStr}</span> : null}
+        </text>
+
+        <box marginTop={1}>
+          <text fg="white">{description}</text>
+        </box>
+
+        {fm?.category ? (
+          <KeyValueLine
+            label="Category"
+            value={<span fg="cyan">{fm.category}</span>}
+          />
+        ) : null}
+        {fm?.author ? (
+          <KeyValueLine label="Author" value={<span>{fm.author}</span>} />
+        ) : null}
+        {fm?.version ? (
+          <KeyValueLine label="Version" value={<span>{fm.version}</span>} />
+        ) : null}
+        {fm?.tags && fm.tags.length > 0 ? (
+          <KeyValueLine
+            label="Tags"
+            value={<span>{(fm.tags as string[]).join(", ")}</span>}
+          />
+        ) : null}
+
+        <DetailSection>
+          <text>
+            <span fg="gray">Source    </span>
+            <span fg="#5c9aff">{skill.source.repo}</span>
+          </text>
+          <text>
+            <span fg="gray">{"          "}</span>
+            <span fg="gray">{skill.repoPath}</span>
+          </text>
+        </DetailSection>
+
+        {skill.installed && skill.installedScope && (
+          <DetailSection>
+            <text>{"─".repeat(24)}</text>
+            <ScopeDetail
+              scopes={{
+                user: skill.installedScope === "user",
+                project: skill.installedScope === "project",
+              }}
+              paths={{
+                user: "~/.claude/skills/",
+                project: ".claude/skills/",
+              }}
+            />
+          </DetailSection>
+        )}
+
+        {skill.hasUpdate && (
+          <box marginTop={1}>
+            <text bg="yellow" fg="black">
+              {" "}
+              UPDATE AVAILABLE{" "}
+            </text>
+          </box>
+        )}
+
+        <ActionHints
+          hints={
+            skill.installed
+              ? [
+                  { key: "d", label: "Uninstall", tone: "danger" },
+                  { key: "u/p", label: "Reinstall in user/project scope" },
+                  { key: "o", label: "Open in browser" },
+                ]
+              : [
+                  { key: "u", label: "Install in user scope", tone: "primary" },
+                  { key: "p", label: "Install in project scope", tone: "primary" },
+                  { key: "o", label: "Open in browser" },
+                ]
+          }
+        />
+      </box>
+    );
+  },
+};
+
+// ─── Registry ─────────────────────────────────────────────────────────────────
+
+export const skillRenderers: {
+  category: ItemRenderer<SkillCategoryItem>;
+  skill: ItemRenderer<SkillSkillItem>;
+} = {
+  category: categoryRenderer,
+  skill: skillRenderer,
+};
+
+/**
+ * Dispatch rendering by item kind.
+ */
+export function renderSkillRow(
+  item: SkillBrowserItem,
+  _index: number,
+  isSelected: boolean,
+): React.ReactNode {
+  if (item.kind === "category") {
+    return skillRenderers.category.renderRow({ item, isSelected });
+  }
+  return skillRenderers.skill.renderRow({ item, isSelected });
+}
+
+export function renderSkillDetail(
+  item: SkillBrowserItem | undefined,
+): React.ReactNode {
+  if (!item) return <text fg="gray">Select a skill to see details</text>;
+  if (item.kind === "category") {
+    return skillRenderers.category.renderDetail({ item });
+  }
+  return skillRenderers.skill.renderDetail({ item });
+}

package/src/ui/screens/PluginsScreen.js

@@ -901,8 +901,7 @@ export function PluginsScreen() {
             const matches = item._matches;
             const segments = matches ? highlightMatches(plugin.name, matches) : null;
             if (isSelected) {
-                const scopeStr = `[${hasUser ? "u" : "."}${hasProject ? "p" : "."}${hasLocal ? "l" : "."}]`;
-                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", scopeStr, " ", plugin.name, versionStr, " "] }));
+                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", _jsx("span", { children: hasUser ? "■" : "□" }), _jsx("span", { children: hasProject ? "■" : "□" }), _jsx("span", { children: hasLocal ? "■" : "□" }), " ", plugin.name, versionStr, " "] }));
             }
             const displayName = segments
                 ? segments.map((seg) => seg.text).join("")
@@ -910,9 +909,9 @@ export function PluginsScreen() {
             if (plugin.isOrphaned) {
                 const ver = plugin.installedVersion && plugin.installedVersion !== "0.0.0"
                     ? ` v${plugin.installedVersion}` : "";
-                return (_jsxs("text", { children: [_jsx("span", { fg: "red", children: " [x..] " }), _jsx("span", { fg: "gray", children: displayName }), ver && _jsx("span", { fg: "yellow", children: ver }), _jsx("span", { fg: "red", children: " deprecated" })] }));
+                return (_jsxs("text", { children: [_jsx("span", { fg: "red", children: " \u25A0\u25A0\u25A0 " }), _jsx("span", { fg: "gray", children: displayName }), ver && _jsx("span", { fg: "yellow", children: ver }), _jsx("span", { fg: "red", children: " deprecated" })] }));
             }
-            return (_jsxs("text", { children: [_jsx("span", { fg: "#555555", children: " [" }), _jsx("span", { fg: hasUser ? "cyan" : "#555555", children: hasUser ? "u" : "." }), _jsx("span", { fg: hasProject ? "green" : "#555555", children: hasProject ? "p" : "." }), _jsx("span", { fg: hasLocal ? "yellow" : "#555555", children: hasLocal ? "l" : "." }), _jsx("span", { fg: "#555555", children: "]" }), _jsx("span", { children: " " }), _jsx("span", { fg: hasAnyScope ? "white" : "gray", children: displayName }), _jsx("span", { fg: plugin.hasUpdate ? "yellow" : "gray", children: versionStr })] }));
+            return (_jsxs("text", { children: [_jsx("span", { children: " " }), _jsx("span", { fg: hasUser ? "cyan" : "#333333", children: "\u25A0" }), _jsx("span", { fg: hasProject ? "green" : "#333333", children: "\u25A0" }), _jsx("span", { fg: hasLocal ? "yellow" : "#333333", children: "\u25A0" }), _jsx("span", { children: " " }), _jsx("span", { fg: hasAnyScope ? "white" : "gray", children: displayName }), _jsx("span", { fg: plugin.hasUpdate ? "yellow" : "gray", children: versionStr })] }));
         }
         return _jsx("text", { fg: "gray", children: item.label });
     };

package/src/ui/screens/PluginsScreen.tsx

@@ -1162,10 +1162,13 @@ export function PluginsScreen() {
 			const segments = matches ? highlightMatches(plugin.name, matches) : null;
 
 			if (isSelected) {
-				const scopeStr = `[${hasUser ? "u" : "."}${hasProject ? "p" : "."}${hasLocal ? "l" : "."}]`;
 				return (
 					<text bg="magenta" fg="white">
-						{" "}{scopeStr} {plugin.name}{versionStr}{" "}
+						{" "}
+						<span>{hasUser ? "■" : "□"}</span>
+						<span>{hasProject ? "■" : "□"}</span>
+						<span>{hasLocal ? "■" : "□"}</span>
+						{" "}{plugin.name}{versionStr}{" "}
 					</text>
 				);
 			}
@@ -1179,7 +1182,7 @@ export function PluginsScreen() {
 					? ` v${plugin.installedVersion}` : "";
 				return (
 					<text>
-						<span fg="red"> [x..] </span>
+						<span fg="red"> ■■■ </span>
 						<span fg="gray">{displayName}</span>
 						{ver && <span fg="yellow">{ver}</span>}
 						<span fg="red"> deprecated</span>
@@ -1189,11 +1192,10 @@ export function PluginsScreen() {
 
 			return (
 				<text>
-					<span fg="#555555"> [</span>
-					<span fg={hasUser ? "cyan" : "#555555"}>{hasUser ? "u" : "."}</span>
-					<span fg={hasProject ? "green" : "#555555"}>{hasProject ? "p" : "."}</span>
-					<span fg={hasLocal ? "yellow" : "#555555"}>{hasLocal ? "l" : "."}</span>
-					<span fg="#555555">]</span>
+					<span> </span>
+					<span fg={hasUser ? "cyan" : "#333333"}>■</span>
+					<span fg={hasProject ? "green" : "#333333"}>■</span>
+					<span fg={hasLocal ? "yellow" : "#333333"}>■</span>
 					<span> </span>
 					<span fg={hasAnyScope ? "white" : "gray"}>{displayName}</span>
 					<span fg={plugin.hasUpdate ? "yellow" : "gray"}>{versionStr}</span>