claudeup 3.14.0 → 3.16.0

package/src/ui/components/primitives/KeyValueLine.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface KeyValueLineProps {
+  label: string;
+  value: React.ReactNode;
+}
+
+/**
+ * Aligned label-value pair for detail panels.
+ * Label is padded to 10 chars for consistent alignment.
+ */
+export function KeyValueLine({ label, value }: KeyValueLineProps) {
+  return (
+    <text>
+      <span fg="gray">{label.padEnd(10)}</span>
+      {value}
+    </text>
+  );
+}

package/src/ui/components/primitives/ListCategoryRow.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { theme } from "../../theme.js";
+import { SelectableRow } from "./SelectableRow.js";
+export function ListCategoryRow({ title, expanded = false, count, badge, tone = "gray", selected, }) {
+    const colors = theme.category[tone];
+    const label = `${expanded ? "▼" : "▶"} ${title}${count !== undefined ? ` (${count})` : ""}`;
+    return (_jsxs(SelectableRow, { selected: selected, children: [!selected && (_jsx("span", { bg: colors.bg, fg: colors.fg, children: _jsxs("strong", { children: [" ", label, " "] }) })), selected && _jsxs("strong", { children: [" ", label, " "] }), !selected && badge ? (_jsxs("span", { fg: colors.badgeFg, children: [" ", badge] })) : null] }));
+}

package/src/ui/components/primitives/ListCategoryRow.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { theme } from "../../theme.js";
+import { SelectableRow } from "./SelectableRow.js";
+
+interface ListCategoryRowProps {
+  title: string;
+  expanded?: boolean;
+  count?: number;
+  badge?: string;
+  tone?: keyof typeof theme.category;
+  selected: boolean;
+}
+
+export function ListCategoryRow({
+  title,
+  expanded = false,
+  count,
+  badge,
+  tone = "gray",
+  selected,
+}: ListCategoryRowProps) {
+  const colors = theme.category[tone];
+  const label = `${expanded ? "▼" : "▶"} ${title}${count !== undefined ? ` (${count})` : ""}`;
+
+  return (
+    <SelectableRow selected={selected}>
+      {!selected && (
+        <span bg={colors.bg} fg={colors.fg}>
+          <strong> {label} </strong>
+        </span>
+      )}
+      {selected && <strong> {label} </strong>}
+      {!selected && badge ? (
+        <span fg={colors.badgeFg}> {badge}</span>
+      ) : null}
+    </SelectableRow>
+  );
+}

package/src/ui/components/primitives/MetaText.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { theme } from "../../theme.js";
+/**
+ * Subdued text for versions, stars, status indicators.
+ */
+export function MetaText({ text, tone = "muted" }) {
+    return _jsx("span", { fg: theme.meta[tone], children: text });
+}

package/src/ui/components/primitives/MetaText.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+interface MetaTextProps {
+  text: string;
+  tone?: "muted" | "warning" | "success" | "danger";
+}
+
+/**
+ * Subdued text for versions, stars, status indicators.
+ */
+export function MetaText({ text, tone = "muted" }: MetaTextProps) {
+  return <span fg={theme.meta[tone]}>{text}</span>;
+}

package/src/ui/components/primitives/ScopeDetail.js

@@ -0,0 +1,32 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { theme } from "../../theme.js";
+/**
+ * The u/p/l badges used in detail panels.
+ * Renders each scope as: [bg=color] key [/bg] ● or ○ Label path
+ */
+export function ScopeDetail({ scopes, paths }) {
+    const items = [
+        {
+            key: "u",
+            label: "User",
+            color: theme.scopes.user,
+            active: scopes.user,
+            path: paths?.user,
+        },
+        {
+            key: "p",
+            label: "Project",
+            color: theme.scopes.project,
+            active: scopes.project,
+            path: paths?.project,
+        },
+        {
+            key: "l",
+            label: "Local",
+            color: theme.scopes.local,
+            active: scopes.local,
+            path: paths?.local,
+        },
+    ].filter((i) => i.path !== undefined || i.active !== undefined);
+    return (_jsx("box", { flexDirection: "column", children: items.map((item) => (_jsxs("text", { children: [_jsxs("span", { bg: item.color, fg: "black", children: [" ", item.key, " "] }), _jsx("span", { fg: item.active ? item.color : "gray", children: item.active ? " ● " : " ○ " }), _jsx("span", { fg: item.color, children: item.label }), item.path && _jsxs("span", { fg: "gray", children: [" ", item.path] })] }, item.key))) }));
+}

package/src/ui/components/primitives/ScopeDetail.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+interface ScopeDetailScope {
+  user?: boolean;
+  project?: boolean;
+  local?: boolean;
+}
+
+interface ScopeDetailPaths {
+  user?: string;
+  project?: string;
+  local?: string;
+}
+
+interface ScopeDetailProps {
+  scopes: ScopeDetailScope;
+  paths?: ScopeDetailPaths;
+}
+
+/**
+ * The u/p/l badges used in detail panels.
+ * Renders each scope as: [bg=color] key [/bg] ● or ○ Label path
+ */
+export function ScopeDetail({ scopes, paths }: ScopeDetailProps) {
+  const items = [
+    {
+      key: "u",
+      label: "User",
+      color: theme.scopes.user,
+      active: scopes.user,
+      path: paths?.user,
+    },
+    {
+      key: "p",
+      label: "Project",
+      color: theme.scopes.project,
+      active: scopes.project,
+      path: paths?.project,
+    },
+    {
+      key: "l",
+      label: "Local",
+      color: theme.scopes.local,
+      active: scopes.local,
+      path: paths?.local,
+    },
+  ].filter((i) => i.path !== undefined || i.active !== undefined);
+
+  return (
+    <box flexDirection="column">
+      {items.map((item) => (
+        <text key={item.key}>
+          <span bg={item.color} fg="black">
+            {" "}
+            {item.key}{" "}
+          </span>
+          <span fg={item.active ? item.color : "gray"}>
+            {item.active ? " ● " : " ○ "}
+          </span>
+          <span fg={item.color}>{item.label}</span>
+          {item.path && <span fg="gray"> {item.path}</span>}
+        </text>
+      ))}
+    </box>
+  );
+}

package/src/ui/components/primitives/ScopeSquares.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { theme } from "../../theme.js";
+/**
+ * Colored filled/empty squares for scope display in list items.
+ * ■ = installed in that scope, □ = not installed.
+ */
+export function ScopeSquares({ user, project, local, selected = false, }) {
+    const inactive = selected ? "white" : theme.colors.dim;
+    // Returns fragments of <span> — safe to embed inside a <text> parent
+    return (_jsxs(_Fragment, { children: [_jsx("span", { fg: user ? theme.scopes.user : inactive, children: "\u25A0" }), _jsx("span", { fg: project ? theme.scopes.project : inactive, children: "\u25A0" }), local !== undefined && (_jsx("span", { fg: local ? theme.scopes.local : inactive, children: "\u25A0" }))] }));
+}

package/src/ui/components/primitives/ScopeSquares.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+interface ScopeSquaresProps {
+  user: boolean;
+  project: boolean;
+  local?: boolean;
+  selected?: boolean;
+}
+
+/**
+ * Colored filled/empty squares for scope display in list items.
+ * ■ = installed in that scope, □ = not installed.
+ */
+export function ScopeSquares({
+  user,
+  project,
+  local,
+  selected = false,
+}: ScopeSquaresProps) {
+  const inactive = selected ? "white" : theme.colors.dim;
+
+  // Returns fragments of <span> — safe to embed inside a <text> parent
+  return (
+    <>
+      <span fg={user ? theme.scopes.user : inactive}>■</span>
+      <span fg={project ? theme.scopes.project : inactive}>■</span>
+      {local !== undefined && (
+        <span fg={local ? theme.scopes.local : inactive}>■</span>
+      )}
+    </>
+  );
+}

package/src/ui/components/primitives/SelectableRow.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { theme } from "../../theme.js";
+export function SelectableRow({ selected, indent = 0, children, }) {
+    return (_jsxs("text", { bg: selected ? theme.selection.bg : undefined, fg: selected ? theme.selection.fg : undefined, children: [" ".repeat(indent), children] }));
+}

package/src/ui/components/primitives/SelectableRow.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+interface SelectableRowProps {
+  selected: boolean;
+  indent?: number;
+  children: React.ReactNode;
+}
+
+export function SelectableRow({
+  selected,
+  indent = 0,
+  children,
+}: SelectableRowProps) {
+  return (
+    <text
+      bg={selected ? theme.selection.bg : undefined}
+      fg={selected ? theme.selection.fg : undefined}
+    >
+      {" ".repeat(indent)}
+      {children}
+    </text>
+  );
+}

package/src/ui/components/primitives/index.js

@@ -0,0 +1,8 @@
+export { SelectableRow } from "./SelectableRow.js";
+export { ListCategoryRow } from "./ListCategoryRow.js";
+export { ScopeSquares } from "./ScopeSquares.js";
+export { ScopeDetail } from "./ScopeDetail.js";
+export { ActionHints } from "./ActionHints.js";
+export { MetaText } from "./MetaText.js";
+export { KeyValueLine } from "./KeyValueLine.js";
+export { DetailSection } from "./DetailSection.js";

package/src/ui/components/primitives/index.ts

@@ -0,0 +1,9 @@
+export { SelectableRow } from "./SelectableRow.js";
+export { ListCategoryRow } from "./ListCategoryRow.js";
+export { ScopeSquares } from "./ScopeSquares.js";
+export { ScopeDetail } from "./ScopeDetail.js";
+export { ActionHints } from "./ActionHints.js";
+export type { Hint } from "./ActionHints.js";
+export { MetaText } from "./MetaText.js";
+export { KeyValueLine } from "./KeyValueLine.js";
+export { DetailSection } from "./DetailSection.js";

package/src/ui/registry.js

@@ -0,0 +1 @@
+export {};

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,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { SelectableRow, ListCategoryRow, ScopeSquares, 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 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 starsStr = formatStars(skill.stars);
+        const displayName = truncateName(skill.name);
+        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: displayName }), 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 })] })] }), _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" })] }) })] }));
+    },
+};
+// ─── 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,220 @@
+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 MAX_SKILL_NAME_LEN = 35;
+
+function truncateName(name: string): string {
+  return name.length > MAX_SKILL_NAME_LEN
+    ? name.slice(0, MAX_SKILL_NAME_LEN - 1) + "\u2026"
+    : name;
+}
+
+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);
+    const displayName = truncateName(skill.name);
+
+    return (
+      <SelectableRow selected={isSelected} indent={1}>
+        <ScopeSquares user={hasUser} project={hasProject} selected={isSelected} />
+        <span> </span>
+        <span fg={isSelected ? "white" : skill.installed ? "white" : "gray"}>
+          {displayName}
+        </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>
+
+        <DetailSection>
+          <text>{"─".repeat(24)}</text>
+          <text><strong>Scopes:</strong></text>
+          <box marginTop={1} flexDirection="column">
+            <text>
+              <span bg="cyan" fg="black"> u </span>
+              <span fg={skill.installedScope === "user" ? "cyan" : "gray"}>
+                {skill.installedScope === "user" ? " ● " : " ○ "}
+              </span>
+              <span fg="cyan">User</span>
+              <span fg="gray"> ~/.claude/skills/</span>
+            </text>
+            <text>
+              <span bg="green" fg="black"> p </span>
+              <span fg={skill.installedScope === "project" ? "green" : "gray"}>
+                {skill.installedScope === "project" ? " ● " : " ○ "}
+              </span>
+              <span fg="green">Project</span>
+              <span fg="gray"> .claude/skills/</span>
+            </text>
+          </box>
+        </DetailSection>
+
+        {skill.hasUpdate && (
+          <box marginTop={1}>
+            <text bg="yellow" fg="black"> UPDATE AVAILABLE </text>
+          </box>
+        )}
+
+        <box marginTop={1}>
+          <text fg="gray">
+            {skill.installed
+              ? "Press u/p to toggle scope"
+              : "Press u/p to install"}
+          </text>
+        </box>
+        <box>
+          <text>
+            <span bg="#555555" fg="white"> o </span>
+            <span fg="gray"> Open in browser</span>
+          </text>
+        </box>
+      </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 });
+}