@slats/claude-assets-sync 0.1.0 → 0.1.1

package/dist/components/list/ListCommand.mjs

@@ -1,147 +1,380 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import { useInput, Box, Text } from 'ink';
+import { useApp, useInput, Box, Text } from 'ink';
+import SelectInput from 'ink-select-input';
 import Spinner from 'ink-spinner';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { applyChangesAndSync, computeFileOperations } from '../../core/listOperations.mjs';
 import { scanPackageAssets } from '../../core/packageScanner.mjs';
 import { syncPackage } from '../../core/sync.mjs';
-import { readUnifiedSyncMeta, removeSkillUnitFromPackage, removePackageFromMeta, writeUnifiedSyncMeta } from '../../core/syncMeta.mjs';
+import { readUnifiedSyncMeta } from '../../core/syncMeta.mjs';
+import { updatePackageVersionAndSync } from '../../commands/update.mjs';
+import { readLocalPackageJson, readPackageJson } from '../../utils/package.mjs';
+import { Confirm } from '../shared/Confirm.mjs';
+import { MenuItem } from '../shared/MenuItem.mjs';
+import { StepRunner } from '../shared/StepRunner.mjs';
+import { Table } from '../shared/Table.mjs';
 import { TreeSelect } from '../tree/TreeSelect.mjs';
 
+function buildPackageDetail(prefix, info, syncedAt) {
+    let totalAssets = 0;
+    for (const files of Object.values(info.files)) {
+        totalAssets += Array.isArray(files) ? files.length : 0;
+    }
+    return {
+        prefix,
+        originalName: info.originalName,
+        version: info.version,
+        local: info.local ?? false,
+        syncedAt,
+        files: info.files,
+        totalAssets,
+    };
+}
+function formatSyncDate(dateStr) {
+    if (!dateStr)
+        return 'unknown';
+    try {
+        return new Date(dateStr).toLocaleString();
+    }
+    catch {
+        return dateStr;
+    }
+}
 const ListCommand = ({ cwd }) => {
-    const [state, setState] = useState('loading');
-    const [packageFiles, setPackageFiles] = useState({});
+    const { exit } = useApp();
+    const [phase, setPhase] = useState('loading');
     const [meta, setMeta] = useState(null);
-    const [lastRefresh, setLastRefresh] = useState(Date.now());
-    const [changesSummary, setChangesSummary] = useState(null);
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [selectedPackage, setSelectedPackage] = useState(null);
+    const [syncSteps, setSyncSteps] = useState([]);
+    const [packageFiles, setPackageFiles] = useState({});
+    const [editTrees, setEditTrees] = useState([]);
+    const [updateChecking, setUpdateChecking] = useState(false);
+    const [updateResult, setUpdateResult] = useState(null);
+    const [updateConfirmPending, setUpdateConfirmPending] = useState(false);
+    const [updateSyncSteps, setUpdateSyncSteps] = useState([]);
+    const [updateSyncing, setUpdateSyncing] = useState(false);
+    const [checkingRemote, setCheckingRemote] = useState(false);
+    const [remoteVersions, setRemoteVersions] = useState(null);
     const hasLoadedRef = useRef(false);
-    const buildTrees = () => {
+    useInput((_input, key) => {
+        if (!key.escape)
+            return;
+        switch (phase) {
+            case 'main-menu':
+                exit();
+                break;
+            case 'package-list':
+                setPhase('main-menu');
+                break;
+            case 'package-detail':
+                setSelectedPackage(null);
+                setPhase('package-list');
+                break;
+            case 'edit-assets':
+                setPhase('package-detail');
+                break;
+            case 'status-view':
+                setRemoteVersions(null);
+                setCheckingRemote(false);
+                setPhase('main-menu');
+                break;
+            case 'error':
+                exit();
+                break;
+        }
+    });
+    useEffect(() => {
+        if (phase !== 'done')
+            return;
+        const timer = setTimeout(() => exit(), 1500);
+        return () => clearTimeout(timer);
+    }, [phase, exit]);
+    const loadMeta = useCallback(() => {
+        try {
+            const loaded = readUnifiedSyncMeta(cwd);
+            setMeta(loaded);
+            return loaded;
+        }
+        catch (err) {
+            setErrorMessage(err instanceof Error ? err.message : 'Failed to load sync metadata');
+            setPhase('error');
+            return null;
+        }
+    }, [cwd]);
+    useEffect(() => {
+        if (!hasLoadedRef.current) {
+            hasLoadedRef.current = true;
+            const loaded = loadMeta();
+            if (loaded && Object.keys(loaded.packages).length > 0) {
+                setPhase('main-menu');
+            }
+            else if (loaded) {
+                setPhase('done');
+            }
+        }
+    }, [loadMeta]);
+    const reloadMeta = useCallback(() => {
+        const loaded = loadMeta();
+        if (loaded && selectedPackage) {
+            const pkgInfo = loaded.packages[selectedPackage.prefix];
+            if (pkgInfo) {
+                setSelectedPackage(buildPackageDetail(selectedPackage.prefix, pkgInfo, loaded.syncedAt));
+            }
+            else {
+                setSelectedPackage(null);
+            }
+        }
+        return loaded;
+    }, [loadMeta, selectedPackage]);
+    const handleMainMenuSelect = (item) => {
+        switch (item.value) {
+            case 'packages':
+                setPhase('package-list');
+                break;
+            case 'status':
+                setRemoteVersions(null);
+                setCheckingRemote(false);
+                setPhase('status-view');
+                break;
+            case 'exit':
+                exit();
+                break;
+        }
+    };
+    const handlePackageSelect = (item) => {
+        if (item.value === 'back') {
+            setPhase('main-menu');
+            return;
+        }
         if (!meta)
-            return [];
-        const trees = [];
-        for (const [prefix, packageInfo] of Object.entries(meta.packages)) {
-            const packageData = packageFiles[prefix];
-            if (!packageData)
-                continue;
-            const assetTypeTrees = packageData.available.map((assetTypeTree) => {
-                const clonedTree = { ...assetTypeTree };
-                if (clonedTree.children) {
-                    clonedTree.children = clonedTree.children.map((fileNode) => {
-                        const selected = packageData.selected.has(fileNode.path);
-                        return {
-                            ...fileNode,
-                            selected,
-                        };
-                    });
-                    const anySelected = clonedTree.children.some((f) => f.selected);
-                    clonedTree.selected = anySelected;
-                }
-                return clonedTree;
-            });
-            trees.push({
-                id: prefix,
-                label: `${packageInfo.originalName}@${packageInfo.version}`,
-                path: packageInfo.originalName,
-                type: 'directory',
-                children: assetTypeTrees,
-                selected: true,
-                expanded: true,
-            });
+            return;
+        const prefix = item.value;
+        const pkgInfo = meta.packages[prefix];
+        if (pkgInfo) {
+            setSelectedPackage(buildPackageDetail(prefix, pkgInfo, meta.syncedAt));
+            setPhase('package-detail');
+        }
+    };
+    const handleDetailActionSelect = (item) => {
+        switch (item.value) {
+            case 'sync':
+                setPhase('sync-action');
+                handleSyncAction();
+                break;
+            case 'update':
+                setUpdateResult(null);
+                setUpdateConfirmPending(false);
+                setUpdateSyncing(false);
+                setUpdateSyncSteps([]);
+                setPhase('update-action');
+                handleUpdateActionCheck();
+                break;
+            case 'edit-assets':
+                handleEditAssetsInit();
+                break;
+            case 'remove':
+                setPhase('remove-action');
+                break;
+            case 'back':
+                setSelectedPackage(null);
+                setPhase('package-list');
+                break;
+        }
+    };
+    const handleSyncAction = async () => {
+        if (!selectedPackage || !meta)
+            return;
+        const pkgInfo = meta.packages[selectedPackage.prefix];
+        if (!pkgInfo)
+            return;
+        setSyncSteps([
+            { name: `Syncing ${selectedPackage.originalName}`, status: 'running' },
+        ]);
+        try {
+            await syncPackage(selectedPackage.originalName, {
+                force: true,
+                dryRun: false,
+                local: pkgInfo.local ?? false,
+                ref: undefined,
+                flat: undefined,
+            }, cwd, pkgInfo.exclusions);
+            setSyncSteps([
+                { name: `Syncing ${selectedPackage.originalName}`, status: 'success' },
+            ]);
+        }
+        catch (err) {
+            setSyncSteps([
+                {
+                    name: `Syncing ${selectedPackage.originalName}`,
+                    status: 'failed',
+                    error: err instanceof Error ? err.message : String(err),
+                },
+            ]);
+        }
+        setTimeout(() => {
+            reloadMeta();
+            setPhase('package-detail');
+        }, 1000);
+    };
+    const handleUpdateActionCheck = async () => {
+        if (!selectedPackage || !meta)
+            return;
+        setUpdateChecking(true);
+        const pkgInfo = meta.packages[selectedPackage.prefix];
+        if (!pkgInfo)
+            return;
+        const isLocal = pkgInfo.local ?? false;
+        try {
+            const currentPkgInfo = isLocal
+                ? readLocalPackageJson(pkgInfo.originalName, cwd)
+                : readPackageJson(pkgInfo.originalName, cwd);
+            if (!currentPkgInfo) {
+                setUpdateResult({ versionChanged: false, notFound: true });
+                setUpdateChecking(false);
+                setTimeout(() => {
+                    reloadMeta();
+                    setPhase('package-detail');
+                }, 2000);
+                return;
+            }
+            const installedVersion = currentPkgInfo.version;
+            const syncedVersion = pkgInfo.version;
+            if (installedVersion === syncedVersion) {
+                setUpdateResult({
+                    versionChanged: false,
+                    oldVersion: syncedVersion,
+                    newVersion: installedVersion,
+                });
+                setUpdateChecking(false);
+                setTimeout(() => {
+                    reloadMeta();
+                    setPhase('package-detail');
+                }, 1500);
+            }
+            else {
+                setUpdateResult({
+                    versionChanged: true,
+                    oldVersion: syncedVersion,
+                    newVersion: installedVersion,
+                });
+                setUpdateChecking(false);
+                setUpdateConfirmPending(true);
+            }
+        }
+        catch {
+            setUpdateResult({ versionChanged: false, notFound: true });
+            setUpdateChecking(false);
+            setTimeout(() => {
+                reloadMeta();
+                setPhase('package-detail');
+            }, 2000);
         }
-        return trees;
     };
-    const loadSyncedFiles = useCallback(async (isRefresh = false) => {
-        const loadedMeta = readUnifiedSyncMeta(cwd);
-        if (!loadedMeta || Object.keys(loadedMeta.packages).length === 0) {
-            setState('done');
+    const handleUpdateConfirm = async (yes) => {
+        setUpdateConfirmPending(false);
+        if (!yes) {
+            reloadMeta();
+            setPhase('package-detail');
+            return;
+        }
+        if (!selectedPackage || !meta)
             return;
+        setUpdateSyncing(true);
+        setUpdateSyncSteps([
+            { name: 'Updating version and syncing files...', status: 'running' },
+        ]);
+        try {
+            await updatePackageVersionAndSync(selectedPackage.prefix, meta, { local: meta.packages[selectedPackage.prefix]?.local, sync: true }, cwd);
+            setUpdateSyncSteps([
+                { name: 'Version updated and files synced', status: 'success' },
+            ]);
         }
-        if (!isRefresh) {
-            setMeta(loadedMeta);
+        catch (err) {
+            setUpdateSyncSteps([
+                {
+                    name: 'Update version',
+                    status: 'failed',
+                    error: err instanceof Error ? err.message : String(err),
+                },
+            ]);
+        }
+        setTimeout(() => {
+            reloadMeta();
+            setPhase('package-detail');
+        }, 1000);
+    };
+    const handleRemoveConfirm = async (yes) => {
+        if (!yes) {
+            setPhase('package-detail');
+            return;
         }
-        const currentSelected = {};
-        setPackageFiles((prev) => {
-            for (const [prefix, data] of Object.entries(prev)) {
-                currentSelected[prefix] = data.selected;
+        if (!selectedPackage || !meta)
+            return;
+        const pkgInfo = meta.packages[selectedPackage.prefix];
+        if (!pkgInfo)
+            return;
+        try {
+            const filesToDelete = [];
+            const fileOperations = [];
+            for (const [assetType, files] of Object.entries(pkgInfo.files)) {
+                if (!Array.isArray(files))
+                    continue;
+                const units = files;
+                for (const unit of units) {
+                    fileOperations.push({
+                        type: 'remove',
+                        prefix: selectedPackage.prefix,
+                        assetType,
+                        skillName: unit.name,
+                    });
+                }
             }
-            return prev;
-        });
-        const fetchPromises = Object.entries(loadedMeta.packages).map(async ([prefix, packageInfo]) => {
-            try {
-                const isLocal = packageInfo.local ?? true;
-                let scannedTrees = await scanPackageAssets(packageInfo.originalName, {
-                    local: isLocal,
+            await applyChangesAndSync({ filesToDelete, fileOperations, packagesToSync: [] }, meta, cwd);
+            const reloaded = reloadMeta();
+            if (reloaded &&
+                Object.keys(reloaded.packages).length > 0) {
+                setSelectedPackage(null);
+                setPhase('package-list');
+            }
+            else {
+                setPhase('done');
+            }
+        }
+        catch (err) {
+            setErrorMessage(err instanceof Error ? err.message : 'Failed to remove package');
+            setPhase('error');
+        }
+    };
+    const handleEditAssetsInit = async () => {
+        if (!selectedPackage || !meta)
+            return;
+        setPhase('edit-assets');
+        const pkgInfo = meta.packages[selectedPackage.prefix];
+        if (!pkgInfo)
+            return;
+        const prefix = selectedPackage.prefix;
+        try {
+            const isLocal = pkgInfo.local ?? true;
+            let scannedTrees = await scanPackageAssets(pkgInfo.originalName, {
+                local: isLocal,
+                ref: undefined,
+            }).catch(() => null);
+            if (!scannedTrees && pkgInfo.local === undefined) {
+                scannedTrees = await scanPackageAssets(pkgInfo.originalName, {
+                    local: !isLocal,
                     ref: undefined,
                 }).catch(() => null);
-                if (!scannedTrees && packageInfo.local === undefined) {
-                    scannedTrees = await scanPackageAssets(packageInfo.originalName, {
-                        local: !isLocal,
-                        ref: undefined,
-                    }).catch(() => null);
-                }
-                if (scannedTrees) {
-                    return { prefix, available: scannedTrees, packageInfo };
-                }
-                else {
-                    throw new Error('Scan failed, using synced files only');
-                }
             }
-            catch {
-                const assetTypeTrees = [];
-                for (const [assetType, files] of Object.entries(packageInfo.files)) {
-                    const units = Array.isArray(files) ? files : [];
-                    if (units.length === 0)
-                        continue;
-                    const skillNodes = units.map((unit) => {
-                        const displayName = unit.transformed ?? unit.name;
-                        if (unit.isDirectory) {
-                            return {
-                                id: `${prefix}/${assetType}/${displayName}`,
-                                label: displayName,
-                                path: `${assetType}/${unit.name}`,
-                                type: 'skill-directory',
-                                viewOnly: true,
-                                selected: true,
-                                expanded: false,
-                                children: (unit.internalFiles || []).map((f) => ({
-                                    id: `${prefix}/${assetType}/${displayName}/${f}`,
-                                    label: f,
-                                    path: `${assetType}/${unit.name}/${f}`,
-                                    type: 'file',
-                                    selected: true,
-                                    expanded: false,
-                                    disabled: true,
-                                })),
-                            };
-                        }
-                        return {
-                            id: `${prefix}/${assetType}/${displayName}`,
-                            label: displayName,
-                            path: `${assetType}/${unit.name}`,
-                            type: 'file',
-                            selected: true,
-                            expanded: false,
-                        };
-                    });
-                    assetTypeTrees.push({
-                        id: `${prefix}/${assetType}`,
-                        label: assetType,
-                        path: assetType,
-                        type: 'directory',
-                        children: skillNodes,
-                        selected: true,
-                        expanded: true,
-                    });
-                }
-                return { prefix, available: assetTypeTrees, packageInfo };
+            let available;
+            if (scannedTrees) {
+                available = scannedTrees;
             }
-        });
-        const results = await Promise.all(fetchPromises);
-        const newPackageFiles = {};
-        for (const { prefix, available, packageInfo } of results) {
-            const excludedFiles = new Set(packageInfo.exclusions?.files || []);
-            const metaSelectedFiles = new Set(Object.entries(packageInfo.files).flatMap(([assetType, files]) => (Array.isArray(files) ? files : [])
+            else {
+                available = buildFallbackTrees(prefix, pkgInfo);
+            }
+            const excludedFiles = new Set(pkgInfo.exclusions?.files || []);
+            const metaSelectedFiles = new Set(Object.entries(pkgInfo.files).flatMap(([assetType, files]) => (Array.isArray(files) ? files : [])
                 .map((unit) => {
                 const filePath = `${assetType}/${unit.name}`;
                 if (excludedFiles.has(filePath) ||
@@ -151,286 +384,266 @@ const ListCommand = ({ cwd }) => {
                 return filePath;
             })
                 .filter((f) => f !== null)));
-            const selectedFiles = isRefresh && currentSelected[prefix]
-                ? currentSelected[prefix]
-                : metaSelectedFiles;
-            newPackageFiles[prefix] = {
-                available,
-                selected: selectedFiles,
+            const newPackageFiles = {
+                [prefix]: { available, selected: metaSelectedFiles },
             };
+            setPackageFiles(newPackageFiles);
+            const trees = buildEditTrees(prefix, pkgInfo, available, metaSelectedFiles);
+            setEditTrees(trees);
         }
-        setPackageFiles(newPackageFiles);
-        setState('selecting');
-    }, [cwd]);
-    useEffect(() => {
-        if (!hasLoadedRef.current) {
-            hasLoadedRef.current = true;
-            loadSyncedFiles().catch((error) => {
-                console.error('Failed to load synced files:', error);
-                setState('done');
-            });
+        catch {
+            setPhase('package-detail');
         }
-    }, [loadSyncedFiles]);
-    const handleRefresh = () => {
-        if (state !== 'selecting')
+    };
+    const handleEditAssetsSubmit = async (selectedTrees) => {
+        if (!meta || !selectedPackage)
             return;
-        const now = Date.now();
-        if (now - lastRefresh < 30000) {
+        const summary = computeFileOperations(meta, packageFiles, selectedTrees, cwd);
+        if (summary.filesToDelete.length === 0 &&
+            summary.packagesToSync.length === 0 &&
+            summary.fileOperations.length === 0) {
+            setPhase('package-detail');
             return;
         }
-        setLastRefresh(now);
-        setState('loading');
-        setTimeout(() => {
-            loadSyncedFiles(true).catch((error) => {
-                console.error('Failed to refresh:', error);
-                setState('selecting');
+        setPhase('sync-action');
+        setSyncSteps([{ name: 'Applying changes...', status: 'running' }]);
+        try {
+            await applyChangesAndSync(summary, meta, cwd, {
+                onSyncStart: () => {
+                    setSyncSteps([{ name: 'Syncing files...', status: 'running' }]);
+                },
             });
-        }, 100);
-    };
-    useInput((input) => {
-        if (state === 'confirming') {
-            if (input === 'y' || input === 'Y') {
-                handleConfirm();
-            }
-            else if (input === 'n' || input === 'N') {
-                handleCancelConfirm();
-            }
+            setSyncSteps([{ name: 'Changes applied', status: 'success' }]);
         }
-    });
-    const handleSubmit = async (selectedTrees) => {
-        if (!meta) {
-            setState('done');
-            process.exit(0);
-            return;
+        catch (err) {
+            setSyncSteps([
+                {
+                    name: 'Apply changes',
+                    status: 'failed',
+                    error: err instanceof Error ? err.message : String(err),
+                },
+            ]);
         }
-        const newPackageFiles = { ...packageFiles };
-        for (const packageTree of selectedTrees) {
-            const prefix = packageTree.id;
-            if (!newPackageFiles[prefix])
-                continue;
-            const selectedPaths = new Set();
-            if (packageTree.children) {
-                for (const assetTypeNode of packageTree.children) {
-                    if (assetTypeNode.children) {
-                        for (const fileNode of assetTypeNode.children) {
-                            if (fileNode.disabled)
-                                continue;
-                            if (fileNode.selected) {
-                                selectedPaths.add(fileNode.path);
-                            }
-                        }
-                    }
-                }
-            }
-            newPackageFiles[prefix] = {
-                ...newPackageFiles[prefix],
-                selected: selectedPaths,
-            };
+        setTimeout(() => {
+            reloadMeta();
+            setPhase('package-detail');
+        }, 1000);
+    };
+    const handleEditAssetsCancel = () => {
+        setPhase('package-detail');
+    };
+    const handleStatusMenuSelect = (item) => {
+        if (item.value === 'check-remote') {
+            handleCheckRemoteVersions();
         }
-        setPackageFiles(newPackageFiles);
-        const fileOperations = [];
-        const filesToDelete = [];
-        const packagesToSync = [];
-        for (const [prefix] of Object.entries(meta.packages)) {
-            const packageTree = selectedTrees.find((t) => t.id === prefix);
-            const packageInfo = meta.packages[prefix];
-            const packageData = newPackageFiles[prefix];
-            if (!packageTree || !packageTree.selected || !packageData) {
-                for (const [assetType, files] of Object.entries(packageInfo.files)) {
-                    if (!Array.isArray(files))
-                        continue;
-                    const units = files;
-                    for (const unit of units) {
-                        fileOperations.push({
-                            type: 'remove',
-                            prefix,
-                            assetType,
-                            skillName: unit.name,
-                        });
-                    }
-                    const firstUnit = units[0];
-                    if (firstUnit?.transformed) {
-                        for (const unit of units) {
-                            const targetPath = path.join(cwd, '.claude', assetType, unit.transformed);
-                            filesToDelete.push(targetPath);
-                        }
-                    }
-                    else {
-                        const dirPath = path.join(cwd, '.claude', assetType, packageInfo.originalName);
-                        filesToDelete.push(dirPath);
-                    }
-                }
-                continue;
-            }
-            let hasChanges = false;
-            const selectedByAssetType = {};
-            for (const filePath of packageData.selected) {
-                const [assetType, fileName] = filePath.split('/');
-                if (!selectedByAssetType[assetType]) {
-                    selectedByAssetType[assetType] = new Set();
-                }
-                selectedByAssetType[assetType].add(fileName);
-            }
-            for (const [assetType, originalFiles] of Object.entries(packageInfo.files)) {
-                const selectedFiles = selectedByAssetType[assetType];
-                const units = Array.isArray(originalFiles) ? originalFiles : [];
-                const firstUnit = units[0];
-                const isFlat = !!firstUnit?.transformed;
-                if (!selectedFiles || selectedFiles.size === 0) {
-                    hasChanges = true;
-                    for (const unit of units) {
-                        fileOperations.push({
-                            type: 'remove',
-                            prefix,
-                            assetType,
-                            skillName: unit.name,
-                        });
-                    }
-                    if (isFlat) {
-                        for (const unit of units) {
-                            const targetPath = path.join(cwd, '.claude', assetType, unit.transformed);
-                            filesToDelete.push(targetPath);
-                        }
-                    }
-                    else {
-                        const dirPath = path.join(cwd, '.claude', assetType, packageInfo.originalName);
-                        filesToDelete.push(dirPath);
-                    }
-                    continue;
-                }
-                const originalNames = new Set(units.map((u) => u.name));
-                for (const unit of units) {
-                    if (!selectedFiles.has(unit.name)) {
-                        hasChanges = true;
-                        fileOperations.push({
-                            type: 'remove',
-                            prefix,
-                            assetType,
-                            skillName: unit.name,
-                        });
-                        if (unit.transformed) {
-                            const targetPath = path.join(cwd, '.claude', assetType, unit.transformed);
-                            filesToDelete.push(targetPath);
-                        }
-                        else {
-                            const filePath = path.join(cwd, '.claude', assetType, packageInfo.originalName, unit.name);
-                            filesToDelete.push(filePath);
-                        }
-                    }
-                }
-                for (const skillName of selectedFiles) {
-                    if (!originalNames.has(skillName)) {
-                        hasChanges = true;
-                        fileOperations.push({
-                            type: 'add',
-                            prefix,
-                            assetType,
-                            skillName,
-                        });
-                    }
-                }
-            }
-            if (hasChanges) {
-                packagesToSync.push({
-                    prefix,
-                    name: packageInfo.originalName,
-                    local: packageInfo.local,
-                });
-            }
+        else if (item.value === 'back') {
+            setRemoteVersions(null);
+            setCheckingRemote(false);
+            setPhase('main-menu');
         }
-        setChangesSummary({ filesToDelete, fileOperations, packagesToSync });
-        setState('confirming');
     };
-    const handleConfirm = async () => {
-        if (!changesSummary || !meta)
+    const handleCheckRemoteVersions = async () => {
+        if (!meta)
             return;
-        setState('saving');
-        for (const filePath of changesSummary.filesToDelete) {
-            try {
-                const stat = fs.statSync(filePath);
-                if (stat.isDirectory()) {
-                    fs.rmSync(filePath, { recursive: true, force: true });
+        setCheckingRemote(true);
+        try {
+            const versions = {};
+            for (const [, pkgInfo] of Object.entries(meta.packages)) {
+                try {
+                    const res = await fetch(`https://registry.npmjs.org/${pkgInfo.originalName}/latest`);
+                    if (res.ok) {
+                        const data = (await res.json());
+                        versions[pkgInfo.originalName] = data.version;
+                    }
                 }
-                else {
-                    fs.unlinkSync(filePath);
+                catch {
                 }
             }
-            catch (error) {
-                if (error.code !== 'ENOENT') {
-                    console.error(`Failed to remove ${filePath}: ${error}`);
-                }
-            }
-        }
-        let updatedMeta = { ...meta };
-        const hasAddOperations = changesSummary.fileOperations.some((op) => op.type === 'add');
-        for (const op of changesSummary.fileOperations) {
-            if (op.type === 'remove') {
-                updatedMeta = removeSkillUnitFromPackage(updatedMeta, op.prefix, op.assetType, op.skillName);
-            }
+            setRemoteVersions(versions);
         }
-        for (const prefix of Object.keys(updatedMeta.packages)) {
-            const pkg = updatedMeta.packages[prefix];
-            if (!pkg.files || Object.keys(pkg.files).length === 0) {
-                updatedMeta = removePackageFromMeta(updatedMeta, prefix);
-            }
+        catch {
         }
-        writeUnifiedSyncMeta(cwd, updatedMeta);
-        if (hasAddOperations && changesSummary.packagesToSync.length > 0) {
-            setState('syncing');
-            for (const { prefix, name, local } of changesSummary.packagesToSync) {
-                try {
-                    const removedFiles = changesSummary.fileOperations
-                        .filter((op) => op.type === 'remove' && op.prefix === prefix)
-                        .map((op) => `${op.assetType}/${op.skillName}`);
-                    const exclusions = removedFiles.length > 0
-                        ? { directories: [], files: removedFiles }
-                        : undefined;
-                    await syncPackage(name, {
-                        force: true,
-                        dryRun: false,
-                        local: local ?? false,
-                        ref: undefined,
-                        flat: undefined,
-                    }, cwd, exclusions);
-                }
-                catch (error) {
-                    console.error(`Failed to sync ${name}: ${error}`);
-                }
-            }
+        finally {
+            setCheckingRemote(false);
         }
-        setState('done');
-        setTimeout(() => process.exit(0), 500);
-    };
-    const handleCancelConfirm = () => {
-        setChangesSummary(null);
-        setState('selecting');
-    };
-    const handleCancel = () => {
-        setState('done');
-        process.exit(0);
     };
-    if (state === 'loading') {
+    if (phase === 'loading') {
         return (jsx(Box, { children: jsxs(Text, { color: "cyan", children: [jsx(Spinner, { type: "dots" }), " Loading synced packages..."] }) }));
     }
-    if (state === 'confirming' && changesSummary) {
-        return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, children: "Changes to be applied:" }) }), changesSummary.filesToDelete.length > 0 && (jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [jsxs(Text, { color: "red", bold: true, children: ["Files to delete (", changesSummary.filesToDelete.length, "):"] }), changesSummary.filesToDelete.slice(0, 10).map((filePath) => (jsx(Box, { marginLeft: 2, children: jsxs(Text, { color: "red", children: ["- ", filePath.replace(cwd, '.')] }) }, filePath))), changesSummary.filesToDelete.length > 10 && (jsx(Box, { marginLeft: 2, children: jsxs(Text, { dimColor: true, children: ["... and ", changesSummary.filesToDelete.length - 10, " more"] }) }))] })), changesSummary.packagesToSync.length > 0 && (jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [jsxs(Text, { color: "green", bold: true, children: ["Packages to sync (", changesSummary.packagesToSync.length, "):"] }), changesSummary.packagesToSync.map(({ name }) => (jsx(Box, { marginLeft: 2, children: jsxs(Text, { color: "green", children: ["+ ", name] }) }, name)))] })), changesSummary.filesToDelete.length === 0 &&
-                    changesSummary.packagesToSync.length === 0 && (jsx(Box, { marginBottom: 1, children: jsx(Text, { dimColor: true, children: "No changes to apply" }) })), jsx(Box, { marginTop: 1, children: jsx(Text, { bold: true, children: "Apply changes and sync? (y/n): " }) })] }));
+    if (phase === 'error') {
+        return (jsxs(Box, { flexDirection: "column", children: [jsxs(Text, { color: "red", children: ["Error: ", errorMessage ?? 'Unknown error'] }), jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: ["Press ", jsx(Text, { bold: true, children: "ESC" }), " to exit"] }) })] }));
+    }
+    if (phase === 'done') {
+        if (!meta || Object.keys(meta.packages).length === 0) {
+            return (jsxs(Box, { flexDirection: "column", children: [jsx(Text, { color: "yellow", children: "No packages synced yet." }), jsx(Text, { dimColor: true, children: "Exiting..." })] }));
+        }
+        return null;
+    }
+    if (phase === 'main-menu' && meta) {
+        const packageCount = Object.keys(meta.packages).length;
+        const menuItems = [
+            { label: `Packages (${packageCount})`, value: 'packages' },
+            { label: 'Status', value: 'status' },
+            { label: 'Exit', value: 'exit' },
+        ];
+        return (jsxs(Box, { flexDirection: "column", children: [jsx(SelectInput, { items: menuItems, onSelect: handleMainMenuSelect, itemComponent: MenuItem }), jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: ["Press ", jsx(Text, { bold: true, children: "ESC" }), " to exit"] }) })] }));
+    }
+    if (phase === 'package-list' && meta) {
+        const items = Object.entries(meta.packages).map(([prefix, pkgInfo]) => {
+            let totalAssets = 0;
+            for (const files of Object.values(pkgInfo.files)) {
+                totalAssets += Array.isArray(files) ? files.length : 0;
+            }
+            const syncDate = formatSyncDate(meta.syncedAt);
+            return {
+                label: `${pkgInfo.originalName}@${pkgInfo.version}  \u2022  ${totalAssets} assets  \u2022  ${syncDate}`,
+                value: prefix,
+            };
+        });
+        items.push({ label: '\u2190 Back', value: 'back' });
+        return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, children: "Synced Packages" }) }), jsx(SelectInput, { items: items, onSelect: handlePackageSelect, itemComponent: MenuItem }), jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: ["Press ", jsx(Text, { bold: true, children: "ESC" }), " to go back"] }) })] }));
+    }
+    if (phase === 'package-detail' && selectedPackage && meta) {
+        const assetEntries = Object.entries(selectedPackage.files);
+        const actionItems = [
+            { label: 'Sync', value: 'sync' },
+            { label: 'Update Version', value: 'update' },
+            { label: 'Edit Assets', value: 'edit-assets' },
+            { label: 'Remove', value: 'remove' },
+            { label: '\u2190 Back', value: 'back' },
+        ];
+        return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsxs(Text, { bold: true, children: [selectedPackage.originalName, "@", selectedPackage.version] }) }), jsxs(Box, { flexDirection: "column", marginLeft: 2, marginBottom: 1, children: [jsxs(Text, { children: [jsx(Text, { dimColor: true, children: "Source: " }), jsx(Text, { children: selectedPackage.local ? 'local' : 'remote' })] }), jsxs(Text, { children: [jsx(Text, { dimColor: true, children: "Synced: " }), jsx(Text, { children: formatSyncDate(selectedPackage.syncedAt) })] }), jsxs(Text, { children: [jsx(Text, { dimColor: true, children: "Total:  " }), jsxs(Text, { children: [selectedPackage.totalAssets, " assets"] })] }), assetEntries.map(([assetType, files]) => {
+                            const count = Array.isArray(files) ? files.length : 0;
+                            return (jsxs(Text, { children: [jsxs(Text, { dimColor: true, children: ["  ", assetType, ": "] }), jsxs(Text, { children: [count, " files"] })] }, assetType));
+                        })] }), jsx(SelectInput, { items: actionItems, onSelect: handleDetailActionSelect, itemComponent: MenuItem }), jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: ["Press ", jsx(Text, { bold: true, children: "ESC" }), " to go back"] }) })] }));
+    }
+    if (phase === 'sync-action') {
+        return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, children: "Syncing Package" }) }), jsx(StepRunner, { steps: syncSteps, currentStep: 0, total: syncSteps.length })] }));
     }
-    if (state === 'saving') {
-        return (jsx(Box, { children: jsxs(Text, { color: "green", children: [jsx(Spinner, { type: "dots" }), " Saving changes..."] }) }));
+    if (phase === 'remove-action' && selectedPackage) {
+        return (jsx(Box, { flexDirection: "column", children: jsx(Confirm, { message: `Remove ${selectedPackage.originalName}? This will delete all synced files.`, onConfirm: handleRemoveConfirm, defaultYes: false }) }));
     }
-    if (state === 'syncing') {
-        return (jsx(Box, { children: jsxs(Text, { color: "cyan", children: [jsx(Spinner, { type: "dots" }), " Syncing packages..."] }) }));
+    if (phase === 'update-action') {
+        if (updateChecking) {
+            return (jsx(Box, { children: jsxs(Text, { color: "cyan", children: [jsx(Spinner, { type: "dots" }), " Checking installed version..."] }) }));
+        }
+        if (updateSyncing) {
+            return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, children: "Updating Package" }) }), jsx(StepRunner, { steps: updateSyncSteps, currentStep: 0, total: updateSyncSteps.length })] }));
+        }
+        if (updateConfirmPending && updateResult) {
+            return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsxs(Text, { children: [jsx(Text, { dimColor: true, children: "Current sync: " }), jsx(Text, { color: "yellow", children: updateResult.oldVersion }), jsx(Text, { dimColor: true, children: " \u2192 Installed: " }), jsx(Text, { color: "green", children: updateResult.newVersion })] }) }), jsx(Confirm, { message: "Update version and re-sync?", onConfirm: handleUpdateConfirm, defaultYes: true })] }));
+        }
+        if (updateResult && !updateResult.versionChanged) {
+            if (updateResult.notFound) {
+                return (jsx(Box, { children: jsx(Text, { color: "yellow", children: "Package not found in node_modules or workspace" }) }));
+            }
+            return (jsx(Box, { children: jsxs(Text, { color: "green", children: ["Already up to date (version ", updateResult.oldVersion, ")"] }) }));
+        }
+        return null;
     }
-    if (state === 'done' &&
-        (!meta || Object.keys(meta?.packages || {}).length === 0)) {
-        return (jsx(Box, { children: jsx(Text, { color: "yellow", children: "No packages synced yet." }) }));
+    if (phase === 'edit-assets') {
+        if (editTrees.length === 0) {
+            return (jsx(Box, { children: jsxs(Text, { color: "cyan", children: [jsx(Spinner, { type: "dots" }), " Loading available assets..."] }) }));
+        }
+        return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, children: "Edit Assets" }) }), jsx(Box, { marginBottom: 1, children: jsx(Text, { dimColor: true, children: "Space: toggle | Enter: save | Esc: cancel" }) }), jsx(TreeSelect, { trees: editTrees, onSubmit: handleEditAssetsSubmit, onCancel: handleEditAssetsCancel })] }));
     }
-    if (state === 'selecting') {
-        const trees = buildTrees();
-        return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, children: "Edit synced packages" }) }), jsx(Box, { marginBottom: 1, children: jsx(Text, { dimColor: true, children: "\u2191/\u2193: navigate \u2022 Space: toggle \u2022 \u2192/\u2190: expand/collapse \u2022 r: refresh (30s cooldown) \u2022 Enter: save \u2022 Esc: cancel" }) }), jsx(TreeSelect, { trees: trees, onSubmit: handleSubmit, onCancel: handleCancel, onRefresh: handleRefresh })] }));
+    if (phase === 'status-view' && meta) {
+        const packageEntries = Object.entries(meta.packages);
+        const statusRows = packageEntries.map(([, pkgInfo]) => {
+            let totalAssets = 0;
+            for (const files of Object.values(pkgInfo.files)) {
+                totalAssets += Array.isArray(files) ? files.length : 0;
+            }
+            const remoteVer = remoteVersions?.[pkgInfo.originalName] ?? '-';
+            return [
+                pkgInfo.originalName,
+                pkgInfo.version,
+                remoteVer,
+                String(totalAssets),
+                formatSyncDate(meta.syncedAt),
+            ];
+        });
+        const statusMenuItems = [
+            { label: 'Check Remote Versions', value: 'check-remote' },
+            { label: '\u2190 Back', value: 'back' },
+        ];
+        return (jsxs(Box, { flexDirection: "column", children: [jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, children: "Sync Status" }) }), jsx(Table, { headers: ['Package', 'Local', 'Remote', 'Assets', 'Synced'], rows: statusRows }), checkingRemote && (jsx(Box, { marginTop: 1, children: jsxs(Text, { color: "cyan", children: [jsx(Spinner, { type: "dots" }), " Checking remote versions..."] }) })), jsx(Box, { marginTop: 1, children: jsx(SelectInput, { items: statusMenuItems, onSelect: handleStatusMenuSelect, itemComponent: MenuItem }) }), jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: ["Press ", jsx(Text, { bold: true, children: "ESC" }), " to go back"] }) })] }));
     }
-    return (jsx(Box, { children: jsx(Text, { color: "green", children: "\u2713 Changes saved" }) }));
+    return null;
 };
+function buildFallbackTrees(prefix, packageInfo) {
+    const assetTypeTrees = [];
+    for (const [assetType, files] of Object.entries(packageInfo.files)) {
+        const units = Array.isArray(files) ? files : [];
+        if (units.length === 0)
+            continue;
+        const skillNodes = units.map((unit) => {
+            const displayName = unit.transformed ?? unit.name;
+            if (unit.isDirectory) {
+                return {
+                    id: `${prefix}/${assetType}/${displayName}`,
+                    label: displayName,
+                    path: `${assetType}/${unit.name}`,
+                    type: 'skill-directory',
+                    viewOnly: true,
+                    selected: true,
+                    expanded: false,
+                    children: (unit.internalFiles || []).map((f) => ({
+                        id: `${prefix}/${assetType}/${displayName}/${f}`,
+                        label: f,
+                        path: `${assetType}/${unit.name}/${f}`,
+                        type: 'file',
+                        selected: true,
+                        expanded: false,
+                        disabled: true,
+                    })),
+                };
+            }
+            return {
+                id: `${prefix}/${assetType}/${displayName}`,
+                label: displayName,
+                path: `${assetType}/${unit.name}`,
+                type: 'file',
+                selected: true,
+                expanded: false,
+            };
+        });
+        assetTypeTrees.push({
+            id: `${prefix}/${assetType}`,
+            label: assetType,
+            path: assetType,
+            type: 'directory',
+            children: skillNodes,
+            selected: true,
+            expanded: true,
+        });
+    }
+    return assetTypeTrees;
+}
+function buildEditTrees(prefix, packageInfo, available, selectedFiles) {
+    const assetTypeTrees = available.map((assetTypeTree) => {
+        const clonedTree = { ...assetTypeTree };
+        if (clonedTree.children) {
+            clonedTree.children = clonedTree.children.map((fileNode) => {
+                const selected = selectedFiles.has(fileNode.path);
+                return { ...fileNode, selected };
+            });
+            const anySelected = clonedTree.children.some((f) => f.selected);
+            clonedTree.selected = anySelected;
+        }
+        return clonedTree;
+    });
+    return [
+        {
+            id: prefix,
+            label: `${packageInfo.originalName}@${packageInfo.version}`,
+            path: packageInfo.originalName,
+            type: 'directory',
+            children: assetTypeTrees,
+            selected: true,
+            expanded: true,
+        },
+    ];
+}
 
 export { ListCommand };