claudeup 3.14.0 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeup",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "description": "TUI tool for managing Claude Code plugins, MCPs, and configuration",
   "type": "module",
   "main": "src/main.tsx",

package/src/ui/adapters/skillsAdapter.js

@@ -0,0 +1,105 @@
+/**
+ * Builds the flat list of items for the SkillsScreen list panel.
+ * Extracted from SkillsScreen so it can be tested independently.
+ */
+export function buildSkillBrowserItems({ recommended, popular, installed, searchResults, query, isSearchLoading, }) {
+    const lowerQuery = query.toLowerCase();
+    const items = [];
+    // ── INSTALLED: always shown at top (if any) ──
+    const installedFiltered = lowerQuery
+        ? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
+        : installed;
+    if (installedFiltered.length > 0) {
+        items.push({
+            id: "cat:installed",
+            kind: "category",
+            label: `Installed (${installedFiltered.length})`,
+            title: "Installed",
+            categoryKey: "installed",
+            count: installedFiltered.length,
+            tone: "purple",
+            star: "● ",
+        });
+        for (const skill of installedFiltered) {
+            items.push({
+                id: `skill:${skill.id}`,
+                kind: "skill",
+                label: skill.name,
+                skill,
+            });
+        }
+    }
+    // ── RECOMMENDED: always shown, filtered when searching ──
+    const filteredRec = lowerQuery
+        ? recommended.filter((s) => s.name.toLowerCase().includes(lowerQuery) ||
+            (s.description || "").toLowerCase().includes(lowerQuery))
+        : recommended;
+    items.push({
+        id: "cat:recommended",
+        kind: "category",
+        label: "Recommended",
+        title: "Recommended",
+        categoryKey: "recommended",
+        count: filteredRec.length,
+        tone: "green",
+        star: "★ ",
+    });
+    for (const skill of filteredRec) {
+        items.push({
+            id: `skill:${skill.id}`,
+            kind: "skill",
+            label: skill.name,
+            skill,
+        });
+    }
+    // ── SEARCH MODE ──
+    if (query.length >= 2) {
+        if (!isSearchLoading && searchResults.length > 0) {
+            const recNames = new Set(recommended.map((s) => s.name));
+            const deduped = searchResults
+                .filter((s) => !recNames.has(s.name))
+                .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
+            if (deduped.length > 0) {
+                items.push({
+                    id: "cat:search",
+                    kind: "category",
+                    label: `Search (${deduped.length})`,
+                    title: "Search",
+                    categoryKey: "popular",
+                    count: deduped.length,
+                    tone: "teal",
+                });
+                for (const skill of deduped) {
+                    items.push({
+                        id: `skill:${skill.id}`,
+                        kind: "skill",
+                        label: skill.name,
+                        skill,
+                    });
+                }
+            }
+        }
+        return items;
+    }
+    // ── POPULAR (default, no search query) ──
+    if (popular.length > 0) {
+        items.push({
+            id: "cat:popular",
+            kind: "category",
+            label: "Popular",
+            title: "Popular",
+            categoryKey: "popular",
+            count: popular.length,
+            tone: "teal",
+        });
+        for (const skill of popular) {
+            items.push({
+                id: `skill:${skill.id}`,
+                kind: "skill",
+                label: skill.name,
+                skill,
+            });
+        }
+    }
+    return items;
+}

package/src/ui/adapters/skillsAdapter.ts

@@ -0,0 +1,159 @@
+import type { SkillInfo } from "../../types/index.js";
+
+// ─── Item types ───────────────────────────────────────────────────────────────
+
+export interface SkillCategoryItem {
+  id: string;
+  kind: "category";
+  label: string;
+  title: string;
+  categoryKey: string;
+  count?: number;
+  tone: "purple" | "green" | "teal" | "yellow" | "gray" | "red";
+  badge?: string;
+  star?: string;
+}
+
+export interface SkillSkillItem {
+  id: string;
+  kind: "skill";
+  label: string;
+  skill: SkillInfo;
+}
+
+export type SkillBrowserItem = SkillCategoryItem | SkillSkillItem;
+
+// ─── Adapter ─────────────────────────────────────────────────────────────────
+
+export interface BuildSkillBrowserItemsArgs {
+  recommended: SkillInfo[];
+  popular: SkillInfo[];
+  installed: SkillInfo[];
+  searchResults: SkillInfo[];
+  query: string;
+  isSearchLoading: boolean;
+}
+
+/**
+ * Builds the flat list of items for the SkillsScreen list panel.
+ * Extracted from SkillsScreen so it can be tested independently.
+ */
+export function buildSkillBrowserItems({
+  recommended,
+  popular,
+  installed,
+  searchResults,
+  query,
+  isSearchLoading,
+}: BuildSkillBrowserItemsArgs): SkillBrowserItem[] {
+  const lowerQuery = query.toLowerCase();
+  const items: SkillBrowserItem[] = [];
+
+  // ── INSTALLED: always shown at top (if any) ──
+  const installedFiltered = lowerQuery
+    ? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
+    : installed;
+
+  if (installedFiltered.length > 0) {
+    items.push({
+      id: "cat:installed",
+      kind: "category",
+      label: `Installed (${installedFiltered.length})`,
+      title: "Installed",
+      categoryKey: "installed",
+      count: installedFiltered.length,
+      tone: "purple",
+      star: "● ",
+    });
+    for (const skill of installedFiltered) {
+      items.push({
+        id: `skill:${skill.id}`,
+        kind: "skill",
+        label: skill.name,
+        skill,
+      });
+    }
+  }
+
+  // ── RECOMMENDED: always shown, filtered when searching ──
+  const filteredRec = lowerQuery
+    ? recommended.filter(
+        (s) =>
+          s.name.toLowerCase().includes(lowerQuery) ||
+          (s.description || "").toLowerCase().includes(lowerQuery),
+      )
+    : recommended;
+
+  items.push({
+    id: "cat:recommended",
+    kind: "category",
+    label: "Recommended",
+    title: "Recommended",
+    categoryKey: "recommended",
+    count: filteredRec.length,
+    tone: "green",
+    star: "★ ",
+  });
+  for (const skill of filteredRec) {
+    items.push({
+      id: `skill:${skill.id}`,
+      kind: "skill",
+      label: skill.name,
+      skill,
+    });
+  }
+
+  // ── SEARCH MODE ──
+  if (query.length >= 2) {
+    if (!isSearchLoading && searchResults.length > 0) {
+      const recNames = new Set(recommended.map((s) => s.name));
+      const deduped = searchResults
+        .filter((s) => !recNames.has(s.name))
+        .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
+
+      if (deduped.length > 0) {
+        items.push({
+          id: "cat:search",
+          kind: "category",
+          label: `Search (${deduped.length})`,
+          title: "Search",
+          categoryKey: "popular",
+          count: deduped.length,
+          tone: "teal",
+        });
+        for (const skill of deduped) {
+          items.push({
+            id: `skill:${skill.id}`,
+            kind: "skill",
+            label: skill.name,
+            skill,
+          });
+        }
+      }
+    }
+    return items;
+  }
+
+  // ── POPULAR (default, no search query) ──
+  if (popular.length > 0) {
+    items.push({
+      id: "cat:popular",
+      kind: "category",
+      label: "Popular",
+      title: "Popular",
+      categoryKey: "popular",
+      count: popular.length,
+      tone: "teal",
+    });
+    for (const skill of popular) {
+      items.push({
+        id: `skill:${skill.id}`,
+        kind: "skill",
+        label: skill.name,
+        skill,
+      });
+    }
+  }
+
+  return items;
+}

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

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { theme } from "../../theme.js";
+/**
+ * Keyboard shortcut badges for detail panels.
+ * Renders: [bg] key [/bg] label
+ */
+export function ActionHints({ hints }) {
+    return (_jsx("box", { flexDirection: "column", marginTop: 1, children: hints.map((hint) => (_jsxs("box", { children: [_jsxs("text", { bg: hint.tone === "danger"
+                        ? theme.hints.dangerBg
+                        : hint.tone === "primary"
+                            ? theme.hints.primaryBg
+                            : theme.hints.defaultBg, fg: "black", children: [" ", hint.key, " "] }), _jsxs("text", { fg: "gray", children: [" ", hint.label] })] }, `${hint.key}:${hint.label}`))) }));
+}

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+export interface Hint {
+  key: string;
+  label: string;
+  tone?: "default" | "primary" | "danger";
+}
+
+interface ActionHintsProps {
+  hints: Hint[];
+}
+
+/**
+ * Keyboard shortcut badges for detail panels.
+ * Renders: [bg] key [/bg] label
+ */
+export function ActionHints({ hints }: ActionHintsProps) {
+  return (
+    <box flexDirection="column" marginTop={1}>
+      {hints.map((hint) => (
+        <box key={`${hint.key}:${hint.label}`}>
+          <text
+            bg={
+              hint.tone === "danger"
+                ? theme.hints.dangerBg
+                : hint.tone === "primary"
+                  ? theme.hints.primaryBg
+                  : theme.hints.defaultBg
+            }
+            fg="black"
+          >
+            {" "}
+            {hint.key}{" "}
+          </text>
+          <text fg="gray"> {hint.label}</text>
+        </box>
+      ))}
+    </box>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * A labeled section in a detail panel with optional title header.
+ */
+export function DetailSection({ title, children }) {
+    return (_jsxs("box", { flexDirection: "column", marginTop: 1, children: [title ? (_jsx("text", { fg: "cyan", children: _jsx("strong", { children: title }) })) : null, children] }));
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface DetailSectionProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * A labeled section in a detail panel with optional title header.
+ */
+export function DetailSection({ title, children }: DetailSectionProps) {
+  return (
+    <box flexDirection="column" marginTop={1}>
+      {title ? (
+        <text fg="cyan">
+          <strong>{title}</strong>
+        </text>
+      ) : null}
+      {children}
+    </box>
+  );
+}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * Aligned label-value pair for detail panels.
+ * Label is padded to 10 chars for consistent alignment.
+ */
+export function KeyValueLine({ label, value }) {
+    return (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: label.padEnd(10) }), value] }));
+}

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 {};