claudeup 3.7.1 → 3.8.0

package/src/ui/screens/ProfilesScreen.js

@@ -0,0 +1,255 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useEffect, useCallback } from "react";
+import { useApp, useModal } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import { ScreenLayout } from "../components/layout/index.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import { listProfiles, applyProfile, renameProfile, deleteProfile, exportProfileToJson, importProfileFromJson, } from "../../services/profiles.js";
+import { writeClipboard, readClipboard, ClipboardUnavailableError, } from "../../utils/clipboard.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 {
+            const entries = await listProfiles(state.projectPath);
+            dispatch({ type: "PROFILES_DATA_SUCCESS", profiles: entries });
+        }
+        catch (error) {
+            dispatch({
+                type: "PROFILES_DATA_ERROR",
+                error: error instanceof Error ? error : new Error(String(error)),
+            });
+        }
+    }, [dispatch, state.projectPath]);
+    useEffect(() => {
+        fetchData();
+    }, [fetchData, state.dataRefreshVersion]);
+    const profileList = profilesState.profiles.status === "success"
+        ? profilesState.profiles.data
+        : [];
+    const selectedProfile = profileList[profilesState.selectedIndex];
+    // Keyboard handling
+    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 });
+        }
+        else if (event.name === "down" || event.name === "j") {
+            const newIndex = Math.min(Math.max(0, profileList.length - 1), profilesState.selectedIndex + 1);
+            dispatch({ type: "PROFILES_SELECT", index: newIndex });
+        }
+        else if (event.name === "enter" || event.name === "a") {
+            handleApply();
+        }
+        else if (event.name === "r") {
+            handleRename();
+        }
+        else if (event.name === "d") {
+            handleDelete();
+        }
+        else if (event.name === "c") {
+            handleCopy();
+        }
+        else if (event.name === "i") {
+            handleImport();
+        }
+    });
+    const handleApply = async () => {
+        if (!selectedProfile)
+            return;
+        const scopeChoice = await modal.select("Apply Profile", `Apply "${selectedProfile.name}" to which scope?`, [
+            { label: "User — ~/.claude/settings.json (global)", value: "user" },
+            {
+                label: "Project — .claude/settings.json (this project)",
+                value: "project",
+            },
+        ]);
+        if (scopeChoice === null)
+            return;
+        const targetScope = scopeChoice;
+        const scopeLabel = targetScope === "user"
+            ? "~/.claude/settings.json"
+            : ".claude/settings.json";
+        const pluginCount = Object.keys(selectedProfile.plugins).length;
+        const emptyWarning = pluginCount === 0
+            ? "\n\nWARNING: This profile has no plugins — applying will disable all plugins."
+            : "";
+        const confirmed = await modal.confirm("Confirm Apply", `This will REPLACE all enabledPlugins in ${scopeLabel}.${emptyWarning}\n\nContinue?`);
+        if (!confirmed)
+            return;
+        modal.loading(`Applying "${selectedProfile.name}"...`);
+        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");
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message("Error", `Failed to apply profile: ${error}`, "error");
+        }
+    };
+    const handleRename = async () => {
+        if (!selectedProfile)
+            return;
+        const newName = await modal.input("Rename Profile", "New name:", selectedProfile.name);
+        if (newName === null || !newName.trim())
+            return;
+        modal.loading("Renaming...");
+        try {
+            await renameProfile(selectedProfile.id, newName.trim(), selectedProfile.scope, state.projectPath);
+            modal.hideModal();
+            await fetchData();
+            await modal.message("Renamed", `Profile renamed to "${newName.trim()}".`, "success");
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message("Error", `Failed to rename: ${error}`, "error");
+        }
+    };
+    const handleDelete = async () => {
+        if (!selectedProfile)
+            return;
+        const confirmed = await modal.confirm(`Delete "${selectedProfile.name}"?`, "This will permanently remove the profile.");
+        if (!confirmed)
+            return;
+        modal.loading("Deleting...");
+        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, profileList.length - 2));
+            dispatch({ type: "PROFILES_SELECT", index: newIndex });
+            await fetchData();
+            await modal.message("Deleted", "Profile deleted.", "success");
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message("Error", `Failed to delete: ${error}`, "error");
+        }
+    };
+    const handleCopy = async () => {
+        if (!selectedProfile)
+            return;
+        modal.loading("Exporting...");
+        try {
+            const json = await exportProfileToJson(selectedProfile.id, selectedProfile.scope, state.projectPath);
+            modal.hideModal();
+            try {
+                await writeClipboard(json);
+                await modal.message("Copied", `Profile JSON copied to clipboard.\nShare it with teammates to import.`, "success");
+            }
+            catch (err) {
+                if (err instanceof ClipboardUnavailableError) {
+                    // Fallback: show JSON in modal for manual copy
+                    await modal.message("Profile JSON (copy manually)", json, "info");
+                }
+                else {
+                    throw err;
+                }
+            }
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message("Error", `Failed to export: ${error}`, "error");
+        }
+    };
+    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 {
+                await modal.message("Error", `Clipboard error: ${err}`, "error");
+                return;
+            }
+        }
+        if (json === null || !json.trim())
+            return;
+        const scopeChoice = await modal.select("Import Profile", "Save imported profile to which scope?", [
+            { label: "User — ~/.claude/profiles.json (global)", value: "user" },
+            {
+                label: "Project — .claude/profiles.json (this project)",
+                value: "project",
+            },
+        ]);
+        if (scopeChoice === null)
+            return;
+        const targetScope = scopeChoice;
+        modal.loading("Importing...");
+        try {
+            const id = await importProfileFromJson(json, targetScope, state.projectPath);
+            modal.hideModal();
+            await fetchData();
+            await modal.message("Imported", `Profile imported successfully (id: ${id}).`, "success");
+        }
+        catch (error) {
+            modal.hideModal();
+            await modal.message("Error", `Failed to import: ${error}`, "error");
+        }
+    };
+    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 = (entry, _idx, isSelected) => {
+        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 (profileList.length === 0) {
+            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "gray", children: "No profiles yet." }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "green", children: "Press 's' in the Plugins screen to save the current selection as a profile." }) })] }));
+        }
+        if (!selectedProfile) {
+            return _jsx("text", { fg: "gray", children: "Select a profile to see details" });
+        }
+        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" })] })] })] }));
+    };
+    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: [_jsx("span", { fg: "gray", children: "Profiles: " }), _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: [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: profileList.length === 0 &&
+            profilesState.profiles.status !== "loading" ? (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "gray", children: "No profiles yet." }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "green", children: "Go to Plugins (1) and press 's' to save a profile." }) })] })) : (_jsx(ScrollableList, { items: profileList, selectedIndex: profilesState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
+}
+export default ProfilesScreen;