claudeup 3.17.0 → 4.0.1

package/src/ui/screens/ProfilesScreen.js

@@ -9,24 +9,12 @@ import { listProfiles, applyProfile, renameProfile, deleteProfile, exportProfile
 import { readSettings, writeSettings, } from "../../services/claude-settings.js";
 import { writeClipboard, readClipboard, ClipboardUnavailableError, } from "../../utils/clipboard.js";
 import { PREDEFINED_PROFILES, } from "../../data/predefined-profiles.js";
-function buildListItems(profileList) {
-    const predefined = PREDEFINED_PROFILES.map((p) => ({
-        kind: "predefined",
-        profile: p,
-    }));
-    const saved = profileList.map((e) => ({
-        kind: "saved",
-        entry: e,
-    }));
-    return [...predefined, ...saved];
-}
-// ─── Component ────────────────────────────────────────────────────────────────
+import { buildProfileListItems, renderProfileRow, renderProfileDetail, } from "../renderers/profileRenderers.js";
 export function ProfilesScreen() {
     const { state, dispatch } = useApp();
     const { profiles: profilesState } = state;
     const modal = useModal();
     const dimensions = useDimensions();
-    // Fetch data
     const fetchData = useCallback(async () => {
         dispatch({ type: "PROFILES_DATA_LOADING" });
         try {
@@ -46,25 +34,36 @@ export function ProfilesScreen() {
     const profileList = profilesState.profiles.status === "success"
         ? profilesState.profiles.data
         : [];
-    const allItems = buildListItems(profileList);
+    const allItems = buildProfileListItems(profileList, PREDEFINED_PROFILES);
     const selectedItem = allItems[profilesState.selectedIndex];
-    // Keyboard handling
+    const isNavigable = (item) => item.kind !== "header";
     useKeyboard((event) => {
         if (state.isSearching || state.modal)
             return;
         if (event.name === "up" || event.name === "k") {
-            const newIndex = Math.max(0, profilesState.selectedIndex - 1);
-            dispatch({ type: "PROFILES_SELECT", index: newIndex });
+            let newIndex = profilesState.selectedIndex - 1;
+            while (newIndex > 0 && !isNavigable(allItems[newIndex])) {
+                newIndex--;
+            }
+            if (newIndex >= 0 && isNavigable(allItems[newIndex])) {
+                dispatch({ type: "PROFILES_SELECT", index: newIndex });
+            }
         }
         else if (event.name === "down" || event.name === "j") {
-            const newIndex = Math.min(Math.max(0, allItems.length - 1), profilesState.selectedIndex + 1);
-            dispatch({ type: "PROFILES_SELECT", index: newIndex });
+            let newIndex = profilesState.selectedIndex + 1;
+            while (newIndex < allItems.length - 1 &&
+                !isNavigable(allItems[newIndex])) {
+                newIndex++;
+            }
+            if (newIndex < allItems.length && isNavigable(allItems[newIndex])) {
+                dispatch({ type: "PROFILES_SELECT", index: newIndex });
+            }
         }
         else if (event.name === "enter" || event.name === "a") {
             if (selectedItem?.kind === "predefined") {
                 void handleApplyPredefined(selectedItem.profile);
             }
-            else {
+            else if (selectedItem?.kind === "saved") {
                 void handleApply();
             }
         }
@@ -84,7 +83,7 @@ export function ProfilesScreen() {
             void handleImport();
         }
     });
-    // ─── Predefined profile apply ─────────────────────────────────────────────
+    // ─── Actions ──────────────────────────────────────────────────────────────
     const handleApplyPredefined = async (profile) => {
         const allPlugins = [
             ...profile.magusPlugins.map((p) => `${p}@magus`),
@@ -97,14 +96,12 @@ export function ProfilesScreen() {
         modal.loading(`Applying "${profile.name}"...`);
         try {
             const settings = await readSettings(state.projectPath);
-            // Merge plugins (additive only)
             settings.enabledPlugins = settings.enabledPlugins ?? {};
             for (const plugin of allPlugins) {
                 if (!settings.enabledPlugins[plugin]) {
                     settings.enabledPlugins[plugin] = true;
                 }
             }
-            // Merge top-level settings (additive — only set if not already set)
             for (const [key, value] of Object.entries(profile.settings)) {
                 if (key === "env") {
                     const envMap = value;
@@ -134,7 +131,6 @@ export function ProfilesScreen() {
             await modal.message("Error", `Failed to apply profile: ${error}`, "error");
         }
     };
-    // ─── Saved profile actions ────────────────────────────────────────────────
     const handleApply = async () => {
         if (selectedItem?.kind !== "saved")
             return;
@@ -163,7 +159,6 @@ export function ProfilesScreen() {
         try {
             await applyProfile(selectedProfile.id, selectedProfile.scope, targetScope, state.projectPath);
             modal.hideModal();
-            // Trigger PluginsScreen to refetch
             dispatch({ type: "DATA_REFRESH_COMPLETE" });
             await modal.message("Applied", `Profile "${selectedProfile.name}" applied to ${scopeLabel}.`, "success");
         }
@@ -202,7 +197,6 @@ export function ProfilesScreen() {
         try {
             await deleteProfile(selectedProfile.id, selectedProfile.scope, state.projectPath);
             modal.hideModal();
-            // Adjust selection if we deleted the last item
             const newIndex = Math.max(0, Math.min(profilesState.selectedIndex, allItems.length - 2));
             dispatch({ type: "PROFILES_SELECT", index: newIndex });
             await fetchData();
@@ -227,7 +221,6 @@ export function ProfilesScreen() {
             }
             catch (err) {
                 if (err instanceof ClipboardUnavailableError) {
-                    // Fallback: show JSON in modal for manual copy
                     await modal.message("Profile JSON (copy manually)", json, "info");
                 }
                 else {
@@ -242,13 +235,11 @@ export function ProfilesScreen() {
     };
     const handleImport = async () => {
         let json = null;
-        // Try to read from clipboard first
         try {
             json = await readClipboard();
         }
         catch (err) {
             if (err instanceof ClipboardUnavailableError) {
-                // Fallback: ask user to paste JSON manually
                 json = await modal.input("Import Profile", "Paste profile JSON:");
             }
             else {
@@ -280,77 +271,21 @@ export function ProfilesScreen() {
             await modal.message("Error", `Failed to import: ${error}`, "error");
         }
     };
-    // ─── Rendering helpers ────────────────────────────────────────────────────
-    const formatDate = (iso) => {
-        try {
-            const d = new Date(iso);
-            return d.toLocaleDateString("en-US", {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-            });
-        }
-        catch {
-            return iso;
-        }
-    };
-    const renderListItem = (item, _idx, isSelected) => {
-        if (item.kind === "predefined") {
-            const { profile } = item;
-            const pluginCount = profile.magusPlugins.length + profile.anthropicPlugins.length;
-            const skillCount = profile.skills.length;
-            if (isSelected) {
-                return (_jsxs("text", { bg: "blue", fg: "white", children: [" ", profile.icon, " ", profile.name, " \u2014 ", pluginCount, " plugins \u00B7 ", skillCount, " ", "skill", skillCount !== 1 ? "s" : "", " "] }));
-            }
-            return (_jsxs("text", { children: [_jsx("span", { fg: "blue", children: "[preset]" }), _jsx("span", { children: " " }), _jsxs("span", { fg: "white", children: [profile.icon, " ", profile.name] }), _jsxs("span", { fg: "gray", children: [" ", "\u2014 ", pluginCount, " plugins \u00B7 ", skillCount, " skill", skillCount !== 1 ? "s" : ""] })] }));
-        }
-        // Saved profile
-        const { entry } = item;
-        const pluginCount = Object.keys(entry.plugins).length;
-        const dateStr = formatDate(entry.updatedAt);
-        const scopeColor = entry.scope === "user" ? "cyan" : "green";
-        const scopeLabel = entry.scope === "user" ? "[user]" : "[proj]";
-        if (isSelected) {
-            return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", scopeLabel, " ", entry.name, " \u2014 ", pluginCount, " plugin", pluginCount !== 1 ? "s" : "", " \u00B7 ", dateStr, " "] }));
-        }
-        return (_jsxs("text", { children: [_jsx("span", { fg: scopeColor, children: scopeLabel }), _jsx("span", { children: " " }), _jsx("span", { fg: "white", children: entry.name }), _jsxs("span", { fg: "gray", children: [" ", "\u2014 ", pluginCount, " plugin", pluginCount !== 1 ? "s" : "", " \u00B7 ", dateStr] })] }));
-    };
-    const renderDetail = () => {
-        if (profilesState.profiles.status === "loading") {
-            return _jsx("text", { fg: "gray", children: "Loading profiles..." });
-        }
-        if (profilesState.profiles.status === "error") {
-            return (_jsxs("text", { fg: "red", children: ["Error: ", profilesState.profiles.error.message] }));
-        }
-        if (!selectedItem) {
-            return _jsx("text", { fg: "gray", children: "Select a profile to see details" });
-        }
-        if (selectedItem.kind === "predefined") {
-            return renderPredefinedDetail(selectedItem.profile);
-        }
-        return renderSavedDetail(selectedItem.entry);
-    };
-    const renderPredefinedDetail = (profile) => {
-        const allPlugins = [
-            ...profile.magusPlugins.map((p) => `${p}@magus`),
-            ...profile.anthropicPlugins.map((p) => `${p}@claude-plugins-official`),
-        ];
-        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "blue", children: _jsxs("strong", { children: [profile.icon, " ", profile.name] }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: profile.description }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Magus plugins (", profile.magusPlugins.length, "):"] }), profile.magusPlugins.map((p) => (_jsx("box", { children: _jsxs("text", { fg: "cyan", children: [" ", p, "@magus"] }) }, p)))] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Anthropic plugins (", profile.anthropicPlugins.length, "):"] }), profile.anthropicPlugins.map((p) => (_jsx("box", { children: _jsxs("text", { fg: "yellow", children: [" ", p, "@claude-plugins-official"] }) }, p)))] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Skills (", profile.skills.length, "):"] }), profile.skills.map((s) => (_jsx("box", { children: _jsxs("text", { fg: "white", children: [" ", s] }) }, s)))] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Settings (", Object.keys(profile.settings).length, "):"] }), Object.entries(profile.settings)
-                            .filter(([k]) => k !== "env")
-                            .map(([k, v]) => (_jsx("box", { children: _jsxs("text", { fg: "white", children: [" ", k, ": ", String(v)] }) }, k)))] }), _jsx("box", { marginTop: 2, flexDirection: "column", children: _jsxs("box", { children: [_jsxs("text", { bg: "blue", fg: "white", children: [" ", "Enter/a", " "] }), _jsxs("text", { fg: "gray", children: [" ", "Apply (merges ", allPlugins.length, " plugins into project settings)"] })] }) })] }));
-    };
-    const renderSavedDetail = (selectedProfile) => {
-        const plugins = Object.keys(selectedProfile.plugins);
-        const scopeColor = selectedProfile.scope === "user" ? "cyan" : "green";
-        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: "cyan", children: _jsx("strong", { children: selectedProfile.name }) }), _jsxs("box", { marginTop: 1, children: [_jsx("text", { fg: "gray", children: "Scope: " }), _jsx("text", { fg: scopeColor, children: scopeLabel })] }), _jsx("box", { marginTop: 1, children: _jsxs("text", { fg: "gray", children: ["Created: ", formatDate(selectedProfile.createdAt), " \u00B7 Updated:", " ", formatDate(selectedProfile.updatedAt)] }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { fg: "gray", children: ["Plugins (", plugins.length, plugins.length === 0 ? " — applying will disable all plugins" : "", "):"] }), plugins.length === 0 ? (_jsx("text", { fg: "yellow", children: " (none)" })) : (plugins.map((p) => (_jsx("box", { children: _jsxs("text", { fg: "white", children: [" ", p] }) }, p))))] }), _jsxs("box", { marginTop: 2, flexDirection: "column", children: [_jsxs("box", { children: [_jsxs("text", { bg: "magenta", fg: "white", children: [" ", "Enter/a", " "] }), _jsx("text", { fg: "gray", children: " Apply profile" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: "#333333", fg: "white", children: [" ", "r", " "] }), _jsx("text", { fg: "gray", children: " Rename" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: "red", fg: "white", children: [" ", "d", " "] }), _jsx("text", { fg: "gray", children: " Delete" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: "blue", fg: "white", children: [" ", "c", " "] }), _jsx("text", { fg: "gray", children: " Copy JSON to clipboard" })] }), _jsxs("box", { marginTop: 1, children: [_jsxs("text", { bg: "green", fg: "white", children: [" ", "i", " "] }), _jsx("text", { fg: "gray", children: " Import from clipboard" })] })] })] }));
-    };
+    // ─── Render ───────────────────────────────────────────────────────────────
     const profileCount = profileList.length;
     const userCount = profileList.filter((p) => p.scope === "user").length;
     const projCount = profileList.filter((p) => p.scope === "project").length;
     const statusContent = (_jsxs("text", { children: [_jsxs("span", { fg: "blue", children: [PREDEFINED_PROFILES.length, " presets"] }), _jsx("span", { fg: "gray", children: " + " }), _jsxs("span", { fg: "cyan", children: [userCount, " user"] }), _jsx("span", { fg: "gray", children: " + " }), _jsxs("span", { fg: "green", children: [projCount, " project"] }), _jsx("span", { fg: "gray", children: " = " }), _jsxs("span", { fg: "white", children: [PREDEFINED_PROFILES.length + profileCount, " total"] })] }));
-    return (_jsx(ScreenLayout, { title: "claudeup Plugin Profiles", currentScreen: "profiles", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter/a:apply \u2502 r:rename \u2502 d:delete \u2502 c:copy \u2502 i:import", listPanel: _jsx(ScrollableList, { items: allItems, selectedIndex: profilesState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderDetail() }));
+    const firstNavigableIndex = allItems.findIndex(isNavigable);
+    const effectiveIndex = profilesState.selectedIndex === 0 && selectedItem?.kind === "header"
+        ? firstNavigableIndex
+        : profilesState.selectedIndex;
+    const loadingStatus = profilesState.profiles.status === "loading"
+        ? true
+        : false;
+    const errorMessage = profilesState.profiles.status === "error"
+        ? profilesState.profiles.error.message
+        : undefined;
+    return (_jsx(ScreenLayout, { title: "claudeup Plugin Profiles", currentScreen: "profiles", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter/a:apply \u2502 r:rename \u2502 d:delete \u2502 c:copy \u2502 i:import", listPanel: _jsx(ScrollableList, { items: allItems, selectedIndex: effectiveIndex, renderItem: renderProfileRow, maxHeight: dimensions.listPanelHeight }), detailPanel: renderProfileDetail(allItems[effectiveIndex], loadingStatus, errorMessage) }));
 }
 export default ProfilesScreen;