skill-flow 1.0.3 → 1.0.5

package/dist/tui/config-app.js

@@ -3,12 +3,17 @@ import { useEffect, useRef, useState } from "react";
 import { Box, Text, useApp, useInput, useStdout } from "ink";
 import { TARGET_LABELS, TARGET_ORDER } from "../utils/constants.js";
 import { buildProjectedSkillName, formatGroupLabel, parseGitHubRepo, resolveProjectedSkillNames, } from "../utils/naming.js";
-import { countActions } from "../utils/format.js";
 import { getParentSelectionState, toggleChild, toggleParent, } from "./selection-state.js";
 const EMPTY_DRAFT = {
     enabledTargets: [],
     selectedLeafIds: [],
 };
+const EMPTY_CONFIG_GROUP = {
+    id: "__empty__",
+    title: "",
+    kind: "source",
+    summaries: [],
+};
 const EMPTY_PREVIEW = {
     actions: [],
     blockedCount: 0,
@@ -17,6 +22,8 @@ const EMPTY_PREVIEW = {
     requestId: 0,
 };
 const PANE_CHROME_ROWS = 5;
+const UPDATED_FEEDBACK_MS = 1_200;
+const CLAWHUB_GROUP_ID = "__clawhub_skills__";
 export function normalizeDraft(draft) {
     return {
         enabledTargets: [...draft.enabledTargets].sort(),
@@ -28,120 +35,291 @@ export function draftsEqual(left, right) {
     const nextRight = normalizeDraft(right);
     return JSON.stringify(nextLeft) === JSON.stringify(nextRight);
 }
-export function getSaveDisplayPhase(savePhase, isDirty) {
-    if (savePhase === "saving") {
-        return "saving";
-    }
-    if (savePhase === "failed") {
-        return "failed";
-    }
-    if (isDirty) {
-        return "dirty";
+export function buildDraftsFromSummaries(summaries) {
+    return Object.fromEntries(summaries.map((summary) => {
+        const enabledTargets = Object.entries(summary.bindings.targets)
+            .filter(([, value]) => value?.enabled)
+            .map(([target]) => target);
+        const selectedLeafIds = [
+            ...new Set(enabledTargets.flatMap((target) => summary.bindings.targets[target]?.leafIds ?? [])),
+        ];
+        return [summary.source.id, normalizeDraft({ enabledTargets, selectedLeafIds })];
+    }));
+}
+export function buildConfigGroups(summaries) {
+    const clawhubSummaries = summaries.filter((summary) => summary.source.kind === "clawhub");
+    const groups = [];
+    let clawhubGroupInserted = false;
+    for (const summary of summaries) {
+        if (summary.source.kind === "clawhub") {
+            if (!clawhubGroupInserted && clawhubSummaries.length > 0) {
+                groups.push({
+                    id: CLAWHUB_GROUP_ID,
+                    title: "ClawHub Skills",
+                    kind: "clawhub",
+                    summaries: clawhubSummaries,
+                });
+                clawhubGroupInserted = true;
+            }
+            continue;
+        }
+        groups.push({
+            id: summary.source.id,
+            title: formatGroupLabel(summary.source),
+            kind: "source",
+            summaries: [summary],
+        });
     }
-    if (savePhase === "saved") {
-        return "saved";
+    if (!clawhubGroupInserted && clawhubSummaries.length > 0) {
+        groups.push({
+            id: CLAWHUB_GROUP_ID,
+            title: "ClawHub Skills",
+            kind: "clawhub",
+            summaries: clawhubSummaries,
+        });
     }
-    return "clean";
+    return groups;
+}
+export function buildConfigGroupSkillRows(group) {
+    return group.summaries.flatMap((summary) => summary.leafs.map((leaf) => ({
+        summary,
+        leaf,
+    })));
 }
 export function getPaneViewportCount(paneHeight, reservedRows = 0) {
     return Math.max(1, paneHeight - PANE_CHROME_ROWS - reservedRows);
 }
 export function getPaneWidths(terminalColumns) {
-    const defaultWidths = [34, 52, 42];
-    const minWidths = [22, 30, 22];
-    const gapColumns = 2;
-    const available = Math.max(74, terminalColumns - gapColumns);
-    const defaultTotal = defaultWidths.reduce((sum, width) => sum + width, 0);
-    if (available >= defaultTotal) {
-        return defaultWidths;
-    }
-    const minTotal = minWidths.reduce((sum, width) => sum + width, 0);
-    if (available <= minTotal) {
-        const left = Math.max(18, Math.floor((available * 22) / minTotal));
-        const middle = Math.max(24, Math.floor((available * 30) / minTotal));
-        const right = Math.max(18, available - left - middle);
-        return [left, middle, right];
-    }
-    const extra = available - minTotal;
-    const flexTotal = defaultTotal - minTotal;
-    const left = minWidths[0] + Math.floor((extra * (defaultWidths[0] - minWidths[0])) / flexTotal);
-    const middle = minWidths[1] + Math.floor((extra * (defaultWidths[1] - minWidths[1])) / flexTotal);
-    const right = available - left - middle;
-    return [left, middle, right];
+    const available = Math.max(56, terminalColumns - 1);
+    const left = Math.max(20, Math.min(30, Math.floor(available * 0.28)));
+    return [left, Math.max(32, available - left)];
 }
 export function getActionChangeCount(actions) {
     return actions.filter((action) => action.kind !== "noop").length;
 }
-export function buildSaveLabel(phase, changeCount) {
-    if (phase === "saving") {
-        return "Save · SAVING...";
+export function getGroupSelectedLeafCount({ drafts, group, }) {
+    return group.summaries.reduce((count, summary) => count + (drafts[summary.source.id]?.selectedLeafIds.length ?? 0), 0);
+}
+export function getStatusDisplay({ deleteState, isSelectedDelete, saveState, updateState, }) {
+    if (isSelectedDelete && deleteState.phase === "deleting") {
+        return { kind: "deleting", label: "Deleting", color: "yellow" };
+    }
+    if (updateState.phase === "updating") {
+        return { kind: "updating", label: "Updating", color: "cyan" };
     }
-    if (phase === "saved") {
-        return changeCount > 0 ? `Save · SAVED · ${changeCount} changes` : "Save · SAVED";
+    if (updateState.phase === "failed") {
+        return { kind: "update-failed", label: "Update Failed", color: "red" };
     }
-    if (phase === "failed") {
-        return "Save · FAILED";
+    if (saveState.phase === "saving") {
+        return { kind: "saving", label: "Saving", color: "cyan" };
     }
-    if (phase === "dirty") {
-        return changeCount > 0 ? `Save · DIRTY · ${changeCount} changes` : "Save · DIRTY";
+    if (saveState.phase === "failed") {
+        return { kind: "failed", label: "Failed", color: "red" };
     }
-    return "Save";
+    if (updateState.phase === "updated") {
+        return { kind: "updated", label: "Updated", color: "green" };
+    }
+    if (saveState.phase === "saved") {
+        return { kind: "saved", label: "Saved", color: "green" };
+    }
+    return { kind: "clean", label: "Clean", color: "gray" };
 }
-export function buildCommandBar({ changeCount, focus, saveFocused, savePhase, }) {
-    const backHint = focus === "groups" ? "Esc/q exit" : "Esc/q back";
-    if (focus === "groups") {
-        return `Enter inspect skills  Tab switch pane  Up/Down move  ${backHint}`;
+export function buildTopBar({ width, isDirty, changeCount, showDelete, statusLabel, }) {
+    const parts = [
+        "Skill Flow",
+        "[u] Update",
+        `Dirty: ${isDirty ? "Yes" : "No"}`,
+    ];
+    if (showDelete) {
+        parts.push("[d] Delete");
     }
-    if (focus === "skills") {
-        return `Space toggle skill  Enter inspect agents  Tab switch pane  Up/Down move  ${backHint}`;
+    if (width >= 100) {
+        parts.push(`Changes: ${changeCount}`);
     }
-    if (saveFocused) {
-        if (savePhase === "saving") {
-            return `Enter wait for save  Tab switch pane  Up/Down move  ${backHint}`;
-        }
-        if (changeCount > 0) {
-            return `Enter save ${changeCount} changes  Tab switch pane  Up/Down move  ${backHint}`;
+    parts.push(`Status: ${statusLabel}`);
+    return parts.join("   ");
+}
+export function prioritizeAlerts(alerts) {
+    const seen = new Set();
+    const priority = {
+        error: 0,
+        blocked: 1,
+        warning: 2,
+    };
+    return alerts
+        .filter((alert) => {
+        const key = `${alert.level}:${alert.message}`;
+        if (seen.has(key)) {
+            return false;
         }
-        return `Enter save current state  Tab switch pane  Up/Down move  ${backHint}`;
+        seen.add(key);
+        return true;
+    })
+        .sort((left, right) => priority[left.level] - priority[right.level])
+        .slice(0, 2);
+}
+export function getInitialDetailFocus({ hasAgents, hasSkills, }) {
+    if (hasAgents) {
+        return "detail.agents";
+    }
+    if (hasSkills) {
+        return "detail.skills";
     }
-    return `Space toggle agent  Enter move to save  Tab switch pane  Up/Down move  ${backHint}`;
+    return "detail.actions";
 }
-export function buildContextBar({ blockedCount, changeCount, previewError, previewLoading, savePhase, saveMessage, selectedLeafName, selectedLeafWarnings, skippedLeafs, sourceLabel, }) {
-    const parts = [sourceLabel];
-    if (selectedLeafName) {
-        parts.push(`skill ${selectedLeafName}`);
+export function moveDetailFocus({ actionCursor, actionCount, agentCount, agentCursor, direction, focus, skillCount, skillCursor, }) {
+    if (focus === "detail.agents") {
+        if (direction === -1) {
+            if (agentCount > 0 && agentCursor > 0) {
+                return { focus, agentCursor: agentCursor - 1, skillCursor, actionCursor };
+            }
+            return { focus, agentCursor, skillCursor, actionCursor };
+        }
+        if (agentCount > 0 && agentCursor < agentCount - 1) {
+            return { focus, agentCursor: agentCursor + 1, skillCursor, actionCursor };
+        }
+        if (skillCount > 0) {
+            return { focus: "detail.skills", agentCursor, skillCursor: 0, actionCursor };
+        }
+        return {
+            focus: "detail.actions",
+            agentCursor,
+            skillCursor,
+            actionCursor: Math.min(actionCursor, Math.max(0, actionCount - 1)),
+        };
     }
-    if (savePhase === "saving") {
-        parts.push("saving changes...");
-        return parts.join(" · ");
+    if (focus === "detail.skills") {
+        if (direction === -1) {
+            if (skillCount > 0 && skillCursor > 0) {
+                return { focus, agentCursor, skillCursor: skillCursor - 1, actionCursor };
+            }
+            if (agentCount > 0) {
+                return {
+                    focus: "detail.agents",
+                    agentCursor: Math.max(0, agentCount - 1),
+                    skillCursor,
+                    actionCursor,
+                };
+            }
+            return { focus, agentCursor, skillCursor, actionCursor };
+        }
+        if (skillCount > 0 && skillCursor < skillCount - 1) {
+            return { focus, agentCursor, skillCursor: skillCursor + 1, actionCursor };
+        }
+        return {
+            focus: "detail.actions",
+            agentCursor,
+            skillCursor,
+            actionCursor: Math.min(actionCursor, Math.max(0, actionCount - 1)),
+        };
     }
-    if (savePhase === "failed") {
-        parts.push(saveMessage ?? "save failed");
-        return parts.join(" · ");
+    if (direction === 1) {
+        if (actionCursor < actionCount - 1) {
+            return { focus, agentCursor, skillCursor, actionCursor: actionCursor + 1 };
+        }
+        return { focus, agentCursor, skillCursor, actionCursor };
     }
-    if (savePhase === "saved") {
-        parts.push(saveMessage ?? "saved");
-        return parts.join(" · ");
+    if (actionCursor > 0) {
+        return { focus, agentCursor, skillCursor, actionCursor: actionCursor - 1 };
     }
-    if (previewLoading) {
-        parts.push("planning changes...");
-        return parts.join(" · ");
+    if (skillCount > 0) {
+        return {
+            focus: "detail.skills",
+            agentCursor,
+            skillCursor: Math.max(0, skillCount - 1),
+            actionCursor,
+        };
     }
-    if (previewError) {
-        parts.push(`preview failed: ${previewError}`);
-        return parts.join(" · ");
+    if (agentCount > 0) {
+        return {
+            focus: "detail.agents",
+            agentCursor: Math.max(0, agentCount - 1),
+            skillCursor,
+            actionCursor,
+        };
     }
-    if (selectedLeafWarnings.length > 0) {
-        parts.push(`warning: ${selectedLeafWarnings[0]}`);
-        return parts.join(" · ");
+    return { focus, agentCursor, skillCursor, actionCursor };
+}
+export function getNextSelectionIndexAfterDelete(currentIndex, nextCount) {
+    if (nextCount <= 0) {
+        return -1;
     }
-    if (skippedLeafs > 0) {
-        parts.push(`skipped ${skippedLeafs} invalid or duplicate skills`);
-        return parts.join(" · ");
+    return Math.min(currentIndex, nextCount - 1);
+}
+export function captureFocusSnapshot({ actionCursor, agentCursor, availableTargets, focus, groupId, selectedGroupIndex, selectedSummary, skillCursor, }) {
+    return {
+        focus,
+        groupIndex: selectedGroupIndex,
+        groupId,
+        sourceId: selectedSummary?.source.id,
+        agentTarget: agentCursor > 0 ? availableTargets[agentCursor - 1] : undefined,
+        skillId: selectedSummary && skillCursor > 0
+            ? selectedSummary.leafs[skillCursor - 1]?.id
+            : undefined,
+        action: actionCursor === 1 ? "delete" : "update",
+    };
+}
+export function reconcileFocusAfterReload({ availableTargets, nextGroups, snapshot, }) {
+    const selectedGroupIndex = nextGroups.findIndex((group) => group.id === snapshot.groupId);
+    const fallbackGroupIndex = Math.min(snapshot.groupIndex, Math.max(0, nextGroups.length - 1));
+    const resolvedGroupIndex = nextGroups.length === 0
+        ? -1
+        : selectedGroupIndex >= 0 && nextGroups[selectedGroupIndex]
+            ? selectedGroupIndex
+            : fallbackGroupIndex;
+    const group = resolvedGroupIndex >= 0 ? nextGroups[resolvedGroupIndex] : undefined;
+    const skillRows = group ? buildConfigGroupSkillRows(group) : [];
+    const hasAgents = availableTargets.length > 0;
+    const hasSkills = skillRows.length > 0;
+    let focus = snapshot.focus;
+    let agentCursor = 0;
+    let skillCursor = 0;
+    let actionCursor = snapshot.action === "delete" && group?.kind !== "clawhub" ? 1 : 0;
+    if (focus === "detail.agents") {
+        if (hasAgents) {
+            const nextAgentIndex = snapshot.agentTarget
+                ? availableTargets.indexOf(snapshot.agentTarget)
+                : -1;
+            agentCursor = nextAgentIndex >= 0 ? nextAgentIndex + 1 : 0;
+        }
+        else {
+            focus = getInitialDetailFocus({ hasAgents, hasSkills });
+        }
+    }
+    if (focus === "detail.skills") {
+        if (hasSkills) {
+            const nextSkillIndex = snapshot.sourceId && snapshot.skillId
+                ? skillRows.findIndex((row) => row.summary.source.id === snapshot.sourceId && row.leaf.id === snapshot.skillId)
+                : -1;
+            skillCursor = nextSkillIndex >= 0 ? nextSkillIndex + 1 : 0;
+        }
+        else {
+            focus = getInitialDetailFocus({ hasAgents, hasSkills });
+        }
+    }
+    if (focus === "detail.actions") {
+        focus = "detail.actions";
+    }
+    return {
+        actionCursor,
+        agentCursor,
+        focus: resolvedGroupIndex >= 0 ? focus : "groups",
+        groupCursor: resolvedGroupIndex,
+        selectedGroupIndex: resolvedGroupIndex,
+        skillCursor,
+    };
+}
+export function getRequestedAction({ actionCursor, canDelete, focus, input, keyReturn, }) {
+    if (input === "u") {
+        return "update";
+    }
+    if (input === "d" && canDelete) {
+        return "delete";
+    }
+    if (focus === "detail.actions" && keyReturn) {
+        return actionCursor === 1 && canDelete ? "delete" : "update";
     }
-    parts.push(`changes ${changeCount}`);
-    parts.push(`blocked ${blockedCount}`);
-    return parts.join(" · ");
+    return undefined;
 }
 export function buildProjectionWarningMap({ drafts, summaries, sourceId, }) {
     const currentDraft = drafts[sourceId] ?? EMPTY_DRAFT;
@@ -251,70 +429,143 @@ function buildProjectionNameMap({ drafts, summaries, sourceId, }) {
         })),
     ]);
 }
-export function ConfigApp({ app, availableTargets, summaries, initialDrafts, }) {
+export function buildScrollableRows(items, cursorIndex, visibleCount, keyPrefix = "scroll", reserveHintSlots = false) {
+    const safeVisibleCount = Math.max(1, visibleCount);
+    const needsHints = items.length > safeVisibleCount;
+    const hasHintSlots = needsHints || (reserveHintSlots && safeVisibleCount >= 3);
+    const adjustedVisibleCount = hasHintSlots ? Math.max(1, safeVisibleCount - 2) : safeVisibleCount;
+    const windowed = getWindowedRows(items, cursorIndex, adjustedVisibleCount);
+    const hasUp = windowed.start > 0;
+    const hasDown = windowed.end < items.length;
+    const rows = [];
+    if (hasHintSlots) {
+        rows.push({
+            key: `__scroll_up__:${keyPrefix}`,
+            text: hasUp ? "↑ more" : "",
+            active: false,
+            color: "gray",
+        });
+    }
+    rows.push(...windowed.rows);
+    if (hasHintSlots) {
+        rows.push({
+            key: `__scroll_down__:${keyPrefix}`,
+            text: hasDown ? "↓ more" : "",
+            active: false,
+            color: "gray",
+        });
+    }
+    return {
+        rows,
+        start: windowed.start,
+        end: windowed.end,
+    };
+}
+export function ConfigApp({ app, availableTargets, summaries, initialDrafts, bootStatus, }) {
     const { exit } = useApp();
     const { stdout } = useStdout();
     const previewRequestIds = useRef({});
-    const [selectedGroupIndex, setSelectedGroupIndex] = useState(summaries.length > 0 ? 0 : -1);
-    const [groupCursor, setGroupCursor] = useState(summaries.length > 0 ? 0 : -1);
+    const saveRequestIds = useRef({});
+    const updateRequestIds = useRef({});
+    const updatedTimers = useRef({});
+    const [summaryList, setSummaryList] = useState(summaries);
+    const groupViews = buildConfigGroups(summaryList);
+    const [selectedGroupIndex, setSelectedGroupIndex] = useState(groupViews.length > 0 ? 0 : -1);
+    const [groupCursor, setGroupCursor] = useState(groupViews.length > 0 ? 0 : -1);
     const [focus, setFocus] = useState("groups");
     const [skillCursor, setSkillCursor] = useState(0);
     const [targetCursor, setTargetCursor] = useState(0);
+    const [actionCursor, setActionCursor] = useState(0);
     const [drafts, setDrafts] = useState(initialDrafts);
     const [savedDrafts, setSavedDrafts] = useState(initialDrafts);
     const [previewBySourceId, setPreviewBySourceId] = useState({});
     const [saveStateBySourceId, setSaveStateBySourceId] = useState({});
-    const selectedSummary = summaries[selectedGroupIndex];
-    const selectedSourceId = selectedSummary?.source.id ?? "";
+    const [updateStateBySourceId, setUpdateStateBySourceId] = useState({});
+    const [deleteState, setDeleteState] = useState({
+        phase: "idle",
+        sourceId: undefined,
+        message: undefined,
+    });
+    const selectedGroup = groupViews[selectedGroupIndex] ?? EMPTY_CONFIG_GROUP;
+    const selectedSkillRows = buildConfigGroupSkillRows(selectedGroup);
+    const selectedSkillRow = skillCursor > 0 ? selectedSkillRows[skillCursor - 1] : undefined;
+    const activeSummary = selectedSkillRow?.summary ?? selectedGroup.summaries[0];
+    const selectedSourceId = activeSummary?.source.id ?? "";
     const selectedDraft = drafts[selectedSourceId] ?? EMPTY_DRAFT;
     const savedDraft = savedDrafts[selectedSourceId] ?? EMPTY_DRAFT;
     const isDirty = !draftsEqual(selectedDraft, savedDraft);
-    const leafIds = selectedSummary?.leafs.map((leaf) => leaf.id) ?? [];
-    const treeState = {
-        allLeafIds: leafIds,
-        selectedLeafIds: selectedDraft.selectedLeafIds,
-    };
-    const parentSelectionState = getParentSelectionState(treeState);
+    const leafIds = activeSummary?.leafs.map((leaf) => leaf.id) ?? [];
+    const groupSelectedLeafCount = getGroupSelectedLeafCount({
+        drafts,
+        group: selectedGroup,
+    });
     const visibleTargets = availableTargets;
-    const targetSelectableCount = visibleTargets.length > 0 ? visibleTargets.length + 1 : 0;
-    const targetSaveCursor = targetSelectableCount;
+    const agentInteractiveCount = visibleTargets.length > 0 ? visibleTargets.length + 1 : 0;
+    const skillInteractiveCount = selectedSkillRows.length > 0 ? selectedSkillRows.length + 1 : 0;
+    const treeState = selectedGroup.kind === "clawhub"
+        ? {
+            allLeafIds: selectedSkillRows.map((row) => row.leaf.id),
+            selectedLeafIds: selectedGroup.summaries.flatMap((summary) => drafts[summary.source.id]?.selectedLeafIds ?? []),
+        }
+        : {
+            allLeafIds: leafIds,
+            selectedLeafIds: selectedDraft.selectedLeafIds,
+        };
+    const parentSelectionState = getParentSelectionState(treeState);
     const visibleEnabledTargets = visibleTargets.filter((target) => selectedDraft.enabledTargets.includes(target));
     const allTargetsSelected = visibleTargets.length > 0 && visibleEnabledTargets.length === visibleTargets.length;
     const projectionWarningsByLeafId = buildProjectionWarningMap({
         drafts,
-        summaries,
+        summaries: summaryList,
         sourceId: selectedSourceId,
     });
     const projectedNamesByLeafId = buildProjectionNameMap({
         drafts,
-        summaries,
+        summaries: summaryList,
         sourceId: selectedSourceId,
     });
-    const selectedLeaf = selectedSummary && skillCursor > 0
-        ? selectedSummary.leafs[skillCursor - 1]
-        : undefined;
-    const selectedLeafWarnings = selectedLeaf
-        ? [
-            ...selectedLeaf.metadataWarnings,
-            ...(projectionWarningsByLeafId[selectedLeaf.id] ?? []),
-        ]
-        : [];
+    const failedBootBySourceId = new Map(bootStatus.failedSources.map((item) => [item.sourceId, item.message]));
     const previewState = previewBySourceId[selectedSourceId] ?? EMPTY_PREVIEW;
-    const actionCounts = countActions(previewState.actions);
     const changeCount = getActionChangeCount(previewState.actions);
     const saveState = saveStateBySourceId[selectedSourceId] ?? {
         phase: "idle",
         message: undefined,
     };
-    const savePhase = getSaveDisplayPhase(saveState.phase, isDirty);
-    const skippedLeafs = selectedSummary?.lock?.invalidLeafs.length ?? 0;
+    const updateState = updateStateBySourceId[selectedSourceId] ?? {
+        phase: "idle",
+        message: undefined,
+    };
+    const isSelectedDelete = deleteState.sourceId === selectedSourceId;
+    const canDelete = selectedGroup.kind === "clawhub" ? focus === "detail.skills" && skillCursor > 0 : true;
+    const showDeleteAction = selectedGroup.kind !== "clawhub";
+    const actionCount = showDeleteAction ? 2 : 1;
+    const statusDisplay = getStatusDisplay({
+        deleteState,
+        isSelectedDelete,
+        saveState,
+        updateState,
+    });
+    const canEditSelected = activeSummary !== undefined &&
+        updateState.phase !== "updating" &&
+        deleteState.phase !== "deleting";
+    const canRunActions = activeSummary !== undefined &&
+        saveState.phase !== "saving" &&
+        updateState.phase !== "updating" &&
+        deleteState.phase !== "deleting";
     useEffect(() => {
-        if (!selectedSummary) {
+        return () => {
+            for (const timer of Object.values(updatedTimers.current)) {
+                if (timer) {
+                    clearTimeout(timer);
+                }
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (!activeSummary) {
             return;
         }
-        // draft -> preview request id -> latest preview wins
-        // save  -> explicit phase      -> dirty/saving/saved/failed
-        const sourceId = selectedSummary.source.id;
+        const sourceId = activeSummary.source.id;
         const requestId = (previewRequestIds.current[sourceId] ?? 0) + 1;
         previewRequestIds.current[sourceId] = requestId;
         setPreviewBySourceId((current) => ({
@@ -363,12 +614,74 @@ export function ConfigApp({ app, availableTargets, summaries, initialDrafts, })
         return () => {
             disposed = true;
         };
-    }, [app, selectedDraft, selectedSummary]);
+    }, [app, activeSummary, selectedDraft]);
+    useEffect(() => {
+        if (!activeSummary || draftsEqual(selectedDraft, savedDraft)) {
+            return;
+        }
+        if (saveState.phase === "saving" || saveState.phase === "failed") {
+            return;
+        }
+        const sourceId = activeSummary.source.id;
+        const requestId = (saveRequestIds.current[sourceId] ?? 0) + 1;
+        saveRequestIds.current[sourceId] = requestId;
+        const draftToSave = normalizeDraft(selectedDraft);
+        setSaveStateBySourceId((current) => ({
+            ...current,
+            [sourceId]: {
+                phase: "saving",
+                message: "saving changes...",
+            },
+        }));
+        void app.applyDraft(sourceId, draftToSave).then((result) => {
+            setSaveStateBySourceId((current) => {
+                if ((saveRequestIds.current[sourceId] ?? 0) !== requestId) {
+                    return current;
+                }
+                if (!result.ok) {
+                    return {
+                        ...current,
+                        [sourceId]: {
+                            phase: "failed",
+                            message: firstErrorMessage(result),
+                        },
+                    };
+                }
+                const appliedDraft = normalizeDraft(result.data.draft);
+                setDrafts((draftsCurrent) => ({
+                    ...draftsCurrent,
+                    [sourceId]: appliedDraft,
+                }));
+                setSavedDrafts((savedCurrent) => ({
+                    ...savedCurrent,
+                    [sourceId]: appliedDraft,
+                }));
+                setPreviewBySourceId((previewCurrent) => ({
+                    ...previewCurrent,
+                    [sourceId]: {
+                        actions: result.data.actions,
+                        blockedCount: result.data.actions.filter((action) => action.kind === "blocked")
+                            .length,
+                        errorMessage: undefined,
+                        loading: false,
+                        requestId: previewRequestIds.current[sourceId] ?? 0,
+                    },
+                }));
+                return {
+                    ...current,
+                    [sourceId]: {
+                        phase: "saved",
+                        message: "saved",
+                    },
+                };
+            });
+        });
+    }, [app, saveState.phase, savedDraft, selectedDraft, activeSummary]);
     const updateSelectedDraft = (updater) => {
-        if (!selectedSummary) {
+        if (!activeSummary || !canEditSelected) {
             return;
         }
-        const sourceId = selectedSummary.source.id;
+        const sourceId = activeSummary.source.id;
         setDrafts((current) => {
             const currentDraft = current[sourceId] ?? EMPTY_DRAFT;
             const nextDraft = normalizeDraft(updater(currentDraft));
@@ -394,76 +707,173 @@ export function ConfigApp({ app, availableTargets, summaries, initialDrafts, })
             };
         });
     };
-    const handleSave = () => {
-        if (!selectedSummary || savePhase === "saving") {
+    const handleUpdate = () => {
+        if (!activeSummary || !selectedGroup || !canRunActions) {
             return;
         }
-        const sourceId = selectedSummary.source.id;
-        const nextRequestId = (previewRequestIds.current[sourceId] ?? 0) + 1;
-        previewRequestIds.current[sourceId] = nextRequestId;
-        setSaveStateBySourceId((current) => ({
-            ...current,
-            [sourceId]: {
-                phase: "saving",
-                message: "saving changes...",
-            },
-        }));
-        setPreviewBySourceId((current) => ({
+        const sourceId = activeSummary.source.id;
+        const sourceIds = selectedGroup.kind === "clawhub"
+            ? selectedGroup.summaries.map((summary) => summary.source.id)
+            : [sourceId];
+        const requestId = (updateRequestIds.current[sourceId] ?? 0) + 1;
+        updateRequestIds.current[sourceId] = requestId;
+        for (const id of sourceIds) {
+            previewRequestIds.current[id] = (previewRequestIds.current[id] ?? 0) + 1;
+            saveRequestIds.current[id] = (saveRequestIds.current[id] ?? 0) + 1;
+        }
+        if (updatedTimers.current[sourceId]) {
+            clearTimeout(updatedTimers.current[sourceId]);
+            updatedTimers.current[sourceId] = undefined;
+        }
+        const snapshot = captureFocusSnapshot({
+            actionCursor,
+            agentCursor: targetCursor,
+            availableTargets,
+            focus,
+            groupId: selectedGroup.id,
+            selectedGroupIndex,
+            selectedSummary: activeSummary,
+            skillCursor,
+        });
+        setUpdateStateBySourceId((current) => ({
             ...current,
             [sourceId]: {
-                ...(current[sourceId] ?? EMPTY_PREVIEW),
-                errorMessage: undefined,
-                loading: false,
-                requestId: nextRequestId,
+                phase: "updating",
+                message: `updating ${selectedGroup.title}...`,
             },
         }));
-        const draftToSave = normalizeDraft(selectedDraft);
-        void app.applyDraft(sourceId, draftToSave).then((result) => {
+        void app.updateSources(sourceIds).then(async (result) => {
+            if ((updateRequestIds.current[sourceId] ?? 0) !== requestId) {
+                return;
+            }
             if (!result.ok) {
-                const message = firstErrorMessage(result);
-                setSaveStateBySourceId((current) => ({
+                setUpdateStateBySourceId((current) => ({
                     ...current,
                     [sourceId]: {
                         phase: "failed",
-                        message,
+                        message: firstErrorMessage(result),
                     },
                 }));
                 return;
             }
-            const appliedDraft = normalizeDraft(result.data.draft);
-            const appliedChangeCount = getActionChangeCount(result.data.actions);
-            setDrafts((current) => ({
-                ...current,
-                [sourceId]: appliedDraft,
-            }));
-            setSavedDrafts((current) => ({
-                ...current,
-                [sourceId]: appliedDraft,
-            }));
+            const configResult = await app.getConfigData();
+            if ((updateRequestIds.current[sourceId] ?? 0) !== requestId) {
+                return;
+            }
+            if (!configResult.ok) {
+                setUpdateStateBySourceId((current) => ({
+                    ...current,
+                    [sourceId]: {
+                        phase: "failed",
+                        message: firstErrorMessage(configResult),
+                    },
+                }));
+                return;
+            }
+            const nextSummaries = configResult.data.summaries;
+            const nextDrafts = buildDraftsFromSummaries(nextSummaries);
+            const nextIds = new Set(nextSummaries.map((summary) => summary.source.id));
+            const nextGroups = buildConfigGroups(nextSummaries);
+            const nextFocusState = reconcileFocusAfterReload({
+                availableTargets,
+                nextGroups,
+                snapshot,
+            });
+            setSummaryList(nextSummaries);
+            setDrafts(nextDrafts);
+            setSavedDrafts(nextDrafts);
+            setPreviewBySourceId((current) => pruneSourceMap(current, nextIds));
             setSaveStateBySourceId((current) => ({
-                ...current,
+                ...pruneSourceMap(current, nextIds),
                 [sourceId]: {
                     phase: "saved",
-                    message: appliedChangeCount > 0
-                        ? `saved ${appliedChangeCount} changes`
-                        : "saved with no changes",
+                    message: "saved",
                 },
             }));
-            setPreviewBySourceId((current) => ({
-                ...current,
+            setSelectedGroupIndex(nextFocusState.selectedGroupIndex);
+            setGroupCursor(nextFocusState.groupCursor);
+            setFocus(nextFocusState.focus);
+            setTargetCursor(nextFocusState.agentCursor);
+            setSkillCursor(nextFocusState.skillCursor);
+            setActionCursor(nextFocusState.actionCursor);
+            setUpdateStateBySourceId((current) => ({
+                ...pruneSourceMap(current, nextIds),
                 [sourceId]: {
-                    actions: result.data.actions,
-                    blockedCount: result.data.actions.filter((action) => action.kind === "blocked")
-                        .length,
-                    errorMessage: undefined,
-                    loading: false,
-                    requestId: nextRequestId,
+                    phase: "updated",
+                    message: "updated",
                 },
             }));
+            updatedTimers.current[sourceId] = setTimeout(() => {
+                if ((updateRequestIds.current[sourceId] ?? 0) !== requestId) {
+                    return;
+                }
+                setUpdateStateBySourceId((current) => {
+                    const state = current[sourceId];
+                    if (!state || state.phase !== "updated") {
+                        return current;
+                    }
+                    return {
+                        ...current,
+                        [sourceId]: {
+                            phase: "idle",
+                            message: undefined,
+                        },
+                    };
+                });
+                updatedTimers.current[sourceId] = undefined;
+            }, UPDATED_FEEDBACK_MS);
+        });
+    };
+    const handleDelete = () => {
+        if (!activeSummary || !canRunActions) {
+            return;
+        }
+        const sourceId = activeSummary.source.id;
+        previewRequestIds.current[sourceId] = (previewRequestIds.current[sourceId] ?? 0) + 1;
+        saveRequestIds.current[sourceId] = (saveRequestIds.current[sourceId] ?? 0) + 1;
+        updateRequestIds.current[sourceId] = (updateRequestIds.current[sourceId] ?? 0) + 1;
+        if (updatedTimers.current[sourceId]) {
+            clearTimeout(updatedTimers.current[sourceId]);
+            updatedTimers.current[sourceId] = undefined;
+        }
+        setDeleteState({
+            phase: "deleting",
+            sourceId,
+            message: `deleting ${formatGroupLabel(activeSummary.source)}...`,
+        });
+        void app.uninstall([sourceId]).then((result) => {
+            if (!result.ok) {
+                setDeleteState({
+                    phase: "failed",
+                    sourceId,
+                    message: firstErrorMessage(result),
+                });
+                return;
+            }
+            const nextSummaries = summaryList.filter((summary) => summary.source.id !== sourceId);
+            const nextGroups = buildConfigGroups(nextSummaries);
+            const nextSelectedGroupIndex = getNextSelectionIndexAfterDelete(selectedGroupIndex, nextGroups.length);
+            setSummaryList(nextSummaries);
+            setDrafts((current) => removeSourceFromMap(current, sourceId));
+            setSavedDrafts((current) => removeSourceFromMap(current, sourceId));
+            setPreviewBySourceId((current) => removeSourceFromMap(current, sourceId));
+            setSaveStateBySourceId((current) => removeSourceFromMap(current, sourceId));
+            setUpdateStateBySourceId((current) => removeSourceFromMap(current, sourceId));
+            setDeleteState({
+                phase: "idle",
+                sourceId: undefined,
+                message: undefined,
+            });
+            setSelectedGroupIndex(nextSelectedGroupIndex);
+            setGroupCursor(nextSelectedGroupIndex);
+            setFocus("groups");
+            setTargetCursor(0);
+            setSkillCursor(0);
+            setActionCursor(0);
         });
     };
     useInput((input, key) => {
-        if (!selectedSummary) {
+        if (!activeSummary) {
             if (input === "q" || key.escape || (input === "c" && key.ctrl)) {
                 exit();
             }
@@ -473,12 +883,23 @@ export function ConfigApp({ app, availableTargets, summaries, initialDrafts, })
             exit();
             return;
         }
+        const requestedAction = getRequestedAction({
+            actionCursor,
+            canDelete,
+            focus,
+            input,
+            keyReturn: Boolean(key.return),
+        });
+        if (requestedAction === "update") {
+            handleUpdate();
+            return;
+        }
+        if (requestedAction === "delete") {
+            handleDelete();
+            return;
+        }
         if (input === "q" || key.escape) {
-            if (focus === "targets") {
-                setFocus("skills");
-                return;
-            }
-            if (focus === "skills") {
+            if (focus !== "groups") {
                 setFocus("groups");
                 return;
             }
@@ -486,73 +907,65 @@ export function ConfigApp({ app, availableTargets, summaries, initialDrafts, })
             return;
         }
         if (key.tab) {
-            const cycle = ["groups", "skills", "targets"];
-            const currentIndex = cycle.indexOf(focus);
-            setFocus(cycle[(currentIndex + 1) % cycle.length] ?? "groups");
+            if (focus === "groups") {
+                setFocus(getInitialDetailFocus({
+                    hasAgents: agentInteractiveCount > 0,
+                    hasSkills: skillInteractiveCount > 0,
+                }));
+                return;
+            }
+            setFocus("groups");
             return;
         }
-        if (focus === "groups") {
-            if (key.downArrow) {
-                setGroupCursor((current) => {
-                    const next = Math.min(current + 1, Math.max(0, summaries.length - 1));
-                    setSelectedGroupIndex(next);
-                    setSkillCursor(0);
-                    setTargetCursor(0);
-                    return next;
-                });
-            }
-            if (key.upArrow) {
-                setGroupCursor((current) => {
-                    const next = Math.max(current - 1, 0);
-                    setSelectedGroupIndex(next);
-                    setSkillCursor(0);
-                    setTargetCursor(0);
-                    return next;
-                });
-            }
-            if (key.return) {
-                setFocus("skills");
-            }
+        if (key.rightArrow && focus === "groups") {
+            setFocus(getInitialDetailFocus({
+                hasAgents: agentInteractiveCount > 0,
+                hasSkills: skillInteractiveCount > 0,
+            }));
             return;
         }
-        if (focus === "skills") {
+        if (key.leftArrow && focus !== "groups") {
+            setFocus("groups");
+            return;
+        }
+        if (focus === "groups") {
             if (key.downArrow) {
-                setSkillCursor((current) => Math.min(current + 1, leafIds.length));
+                const next = Math.min(groupCursor + 1, Math.max(0, groupViews.length - 1));
+                setGroupCursor(next);
+                setSelectedGroupIndex(next);
+                setTargetCursor(0);
+                setSkillCursor(0);
+                setActionCursor(0);
             }
             if (key.upArrow) {
-                setSkillCursor((current) => Math.max(current - 1, 0));
-            }
-            if (input === " ") {
-                updateSelectedDraft((currentDraft) => {
-                    const baseState = {
-                        allLeafIds: leafIds,
-                        selectedLeafIds: currentDraft.selectedLeafIds,
-                    };
-                    const nextState = skillCursor === 0
-                        ? toggleParent(baseState)
-                        : toggleChild(baseState, leafIds[skillCursor - 1]);
-                    return {
-                        ...currentDraft,
-                        selectedLeafIds: nextState.selectedLeafIds,
-                    };
-                });
-            }
-            if (key.return) {
-                setFocus("targets");
+                const next = Math.max(groupCursor - 1, 0);
+                setGroupCursor(next);
+                setSelectedGroupIndex(next);
+                setTargetCursor(0);
+                setSkillCursor(0);
+                setActionCursor(0);
             }
             return;
         }
-        if (key.downArrow) {
-            setTargetCursor((current) => Math.min(current + 1, targetSaveCursor));
-        }
-        if (key.upArrow) {
-            setTargetCursor((current) => Math.max(current - 1, 0));
+        if (key.downArrow || key.upArrow) {
+            const next = moveDetailFocus({
+                actionCursor,
+                actionCount,
+                agentCount: agentInteractiveCount,
+                agentCursor: targetCursor,
+                direction: key.downArrow ? 1 : -1,
+                focus: focus,
+                skillCount: skillInteractiveCount,
+                skillCursor,
+            });
+            setFocus(next.focus);
+            setTargetCursor(next.agentCursor);
+            setSkillCursor(next.skillCursor);
+            setActionCursor(next.actionCursor);
+            return;
         }
-        if (input === " ") {
+        if (focus === "detail.agents" && input === " " && agentInteractiveCount > 0) {
             updateSelectedDraft((currentDraft) => {
-                if (visibleTargets.length === 0 || targetCursor === targetSaveCursor) {
-                    return currentDraft;
-                }
                 if (targetCursor === 0) {
                     const enabledTargets = new Set(currentDraft.enabledTargets);
                     const nextSelectAll = !visibleTargets.every((target) => enabledTargets.has(target));
@@ -570,6 +983,9 @@ export function ConfigApp({ app, availableTargets, summaries, initialDrafts, })
                     };
                 }
                 const target = visibleTargets[targetCursor - 1];
+                if (!target) {
+                    return currentDraft;
+                }
                 const enabledTargets = new Set(currentDraft.enabledTargets);
                 if (enabledTargets.has(target)) {
                     enabledTargets.delete(target);
@@ -582,38 +998,85 @@ export function ConfigApp({ app, availableTargets, summaries, initialDrafts, })
                     enabledTargets: TARGET_ORDER.filter((item) => enabledTargets.has(item)),
                 };
             });
+            return;
         }
-        if (key.return) {
-            if (targetCursor === targetSaveCursor) {
-                handleSave();
-                return;
-            }
-            setTargetCursor(targetSaveCursor);
+        if (focus === "detail.skills" && input === " " && skillInteractiveCount > 0) {
+            updateSelectedDraft((currentDraft) => {
+                if (selectedGroup.kind === "clawhub") {
+                    if (skillCursor === 0) {
+                        return currentDraft;
+                    }
+                    const row = selectedSkillRows[skillCursor - 1];
+                    if (!row) {
+                        return currentDraft;
+                    }
+                    if (row.summary.source.id !== selectedSourceId) {
+                        return currentDraft;
+                    }
+                    const baseState = {
+                        allLeafIds: row.summary.leafs.map((leaf) => leaf.id),
+                        selectedLeafIds: currentDraft.selectedLeafIds,
+                    };
+                    const nextState = toggleChild(baseState, row.leaf.id);
+                    return {
+                        ...currentDraft,
+                        selectedLeafIds: nextState.selectedLeafIds,
+                    };
+                }
+                const baseState = {
+                    allLeafIds: leafIds,
+                    selectedLeafIds: currentDraft.selectedLeafIds,
+                };
+                const nextState = skillCursor === 0
+                    ? toggleParent(baseState)
+                    : toggleChild(baseState, leafIds[skillCursor - 1]);
+                return {
+                    ...currentDraft,
+                    selectedLeafIds: nextState.selectedLeafIds,
+                };
+            });
         }
     });
-    if (summaries.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "No skills groups yet" }), _jsx(Text, { children: "Add a Git source to discover a grouped set of related skills." }), _jsx(Text, { dimColor: true, children: "Press q or esc to exit." })] }));
+    if (groupViews.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "No skills groups yet" }), _jsx(Text, { children: "Run skill-flow add <source> to install your first group." }), _jsx(Text, { dimColor: true, children: deleteState.message ?? "Press q or esc to exit." })] }));
     }
-    const activeSummary = selectedSummary;
+    const renderSummary = activeSummary;
     const terminalRows = stdout.rows ?? 24;
     const terminalColumns = stdout.columns ?? 120;
-    const paneHeight = Math.max(12, terminalRows - 4);
-    const [groupsWidth, skillsWidth, targetsWidth] = getPaneWidths(terminalColumns);
+    const paneHeight = Math.max(12, terminalRows - 3);
+    const [groupsWidth, detailWidth] = getPaneWidths(terminalColumns);
     const bodyRowCount = getPaneViewportCount(paneHeight);
-    const targetListRowCount = Math.max(1, bodyRowCount - 1);
-    const targetItems = visibleTargets.length > 0
+    const groupRows = buildScrollableRows(groupViews.map((group, index) => {
+        const isCursor = groupCursor === index;
+        const isSelected = selectedGroupIndex === index;
+        return {
+            key: group.id,
+            text: `${group.title}${group.kind === "clawhub"
+                ? group.summaries.some((summary) => failedBootBySourceId.has(summary.source.id))
+                    ? " !"
+                    : ""
+                : failedBootBySourceId.has(group.summaries[0]?.source.id ?? "")
+                    ? " !"
+                    : ""}`,
+            active: focus === "groups" && isCursor,
+            activeColor: "cyan",
+            bold: isSelected,
+            color: isSelected ? "white" : "gray",
+        };
+    }), Math.max(0, groupCursor), bodyRowCount, "groups");
+    const agentRows = visibleTargets.length > 0
         ? [
             {
                 key: "__all_targets__",
-                text: `${selectionMarker(allTargetsSelected ? "full" : visibleEnabledTargets.length > 0 ? "partial" : "empty")} all agents`,
-                active: focus === "targets" && targetCursor === 0,
+                text: `${selectionMarker(allTargetsSelected ? "full" : visibleEnabledTargets.length > 0 ? "partial" : "empty")} All Agents`,
+                active: focus === "detail.agents" && targetCursor === 0,
                 bold: true,
                 color: undefined,
             },
             ...visibleTargets.map((target, index) => ({
                 key: target,
                 text: `${selectionMarker(selectedDraft.enabledTargets.includes(target) ? "full" : "empty")} ${TARGET_LABELS[target]}`,
-                active: focus === "targets" && targetCursor === index + 1,
+                active: focus === "detail.agents" && targetCursor === index + 1,
                 color: "gray",
             })),
         ]
@@ -622,109 +1085,399 @@ export function ConfigApp({ app, availableTargets, summaries, initialDrafts, })
                 key: "__no_targets__",
                 text: "No detected agent targets",
                 active: false,
-                bold: false,
                 color: "gray",
             },
         ];
-    const groupRows = getWindowedRows(summaries.map((summary, index) => ({
-        key: summary.source.id,
-        text: `${formatGroupLabel(summary.source)}  ${formatGroupSaveState(getSaveDisplayPhase((saveStateBySourceId[summary.source.id]?.phase ?? "idle"), !draftsEqual(drafts[summary.source.id] ?? EMPTY_DRAFT, savedDrafts[summary.source.id] ?? EMPTY_DRAFT)))}`,
-        active: focus === "groups" && groupCursor === index,
-        color: getGroupStateColor(getSaveDisplayPhase((saveStateBySourceId[summary.source.id]?.phase ?? "idle"), !draftsEqual(drafts[summary.source.id] ?? EMPTY_DRAFT, savedDrafts[summary.source.id] ?? EMPTY_DRAFT))),
-    })), Math.max(0, groupCursor), bodyRowCount);
-    const skillRows = getWindowedRows([
+    const skillRows = selectedSkillRows.length > 0
+        ? [
+            {
+                key: "__all__",
+                text: `${selectionMarker(parentSelectionState)} All Skills`,
+                active: focus === "detail.skills" && skillCursor === 0,
+                bold: true,
+                color: undefined,
+            },
+            ...selectedSkillRows.map((row, index) => {
+                const rowDraft = drafts[row.summary.source.id] ?? EMPTY_DRAFT;
+                const rowSelected = rowDraft.selectedLeafIds.includes(row.leaf.id);
+                const warnings = [
+                    ...row.leaf.metadataWarnings,
+                    ...(row.summary.source.id === selectedSourceId
+                        ? (projectionWarningsByLeafId[row.leaf.id] ?? [])
+                        : []),
+                ];
+                const inlineWarning = warnings[0] ? ` (${warnings[0]})` : "";
+                const projectedLabel = row.summary.source.id === selectedSourceId && rowSelected
+                    ? (projectedNamesByLeafId.get(row.leaf.id) ?? row.leaf.linkName)
+                    : row.leaf.linkName;
+                const label = selectedGroup.kind === "clawhub"
+                    ? `${projectedLabel} · ${formatGroupLabel(row.summary.source)}`
+                    : projectedLabel;
+                return {
+                    key: row.leaf.id,
+                    text: `${selectionMarker(rowSelected ? "full" : "empty")} ${label}${inlineWarning}`,
+                    active: focus === "detail.skills" && skillCursor === index + 1,
+                    color: warnings.length > 0 ? "yellow" : "gray",
+                };
+            }),
+        ]
+        : [
+            {
+                key: "__no_skills__",
+                text: "No skills in this group",
+                active: false,
+                color: "gray",
+            },
+        ];
+    const selectedGroupBootMessages = selectedGroup
+        ? selectedGroup.kind === "clawhub"
+            ? selectedGroup.summaries
+                .map((summary) => failedBootBySourceId.get(summary.source.id))
+                .filter((message) => Boolean(message))
+            : [failedBootBySourceId.get(selectedSourceId)].filter((message) => Boolean(message))
+        : [];
+    const alerts = prioritizeAlerts(buildAlerts({
+        deleteState,
+        failedBootMessages: selectedGroupBootMessages,
+        isSelectedDelete,
+        previewState,
+        projectionWarningsByLeafId,
+        saveState,
+        selectedDraft,
+        selectedSummary: renderSummary,
+        updateState,
+    }));
+    const previewLabel = buildPreviewLabel({
+        blockedCount: previewState.blockedCount,
+        changeCount,
+        errorMessage: previewState.errorMessage,
+        loading: previewState.loading,
+    });
+    const bootLabel = selectedGroupBootMessages.length > 0 ? "PARTIAL" : "OK";
+    const metadataRows = buildDetailMetadataRows({
+        alerts,
+        detailWidth,
+        group: selectedGroup,
+        summary: renderSummary,
+    });
+    const actionRows = buildActionRows({
+        actionCursor,
+        canRunActions,
+        deleteState,
+        focus,
+        isSelectedDelete,
+        showDeleteAction,
+        updateState,
+    });
+    const fixedRows = metadataRows.length +
+        4 +
+        actionRows.length;
+    const sectionBudget = Math.max(2, bodyRowCount - fixedRows);
+    const hasAgentSection = visibleTargets.length > 0;
+    const hasSkillSection = selectedSkillRows.length > 0;
+    const agentBudget = hasAgentSection && hasSkillSection
+        ? Math.min(Math.max(1, sectionBudget - 1), Math.max(4, Math.floor(sectionBudget * 0.4)))
+        : sectionBudget;
+    const skillBudget = hasAgentSection && hasSkillSection ? Math.max(1, sectionBudget - agentBudget) : sectionBudget;
+    const visibleAgentRows = buildScrollableRows(agentRows, Math.min(targetCursor, Math.max(0, agentRows.length - 1)), Math.max(1, agentBudget), "agents", true);
+    const visibleSkillRows = buildScrollableRows(skillRows, Math.min(skillCursor, Math.max(0, skillRows.length - 1)), Math.max(1, skillBudget), "skills", true);
+    const filledSkillRows = [...visibleSkillRows.rows];
+    const skillPaddingCount = Math.max(0, skillBudget - filledSkillRows.length);
+    for (let index = 0; index < skillPaddingCount; index += 1) {
+        filledSkillRows.push({
+            key: `__skills_fill__:${index}`,
+            text: "",
+            active: false,
+            color: undefined,
+        });
+    }
+    const detailRows = [
+        ...metadataRows,
         {
-            key: "__all__",
-            text: `${selectionMarker(parentSelectionState)} all skills`,
-            active: focus === "skills" && skillCursor === 0,
+            key: "__agents_gap__",
+            text: "",
+            active: false,
+            color: undefined,
+        },
+        {
+            key: "__agents_header__",
+            text: `Apply to Agents (${visibleEnabledTargets.length}/${visibleTargets.length})`,
+            active: false,
             bold: true,
             color: undefined,
         },
-        ...activeSummary.leafs.map((leaf, index) => ({
-            key: leaf.id,
-            text: `${selectionMarker(selectedDraft.selectedLeafIds.includes(leaf.id) ? "full" : "empty")} ${selectedDraft.selectedLeafIds.includes(leaf.id)
-                ? (projectedNamesByLeafId.get(leaf.id) ?? leaf.linkName)
-                : leaf.linkName}`,
-            active: focus === "skills" && skillCursor === index + 1,
-            color: leaf.metadataWarnings.length > 0 || (projectionWarningsByLeafId[leaf.id]?.length ?? 0) > 0
-                ? "yellow"
-                : "gray",
-        })),
-    ], skillCursor, bodyRowCount);
-    const targetRows = getWindowedRows(targetItems, Math.min(targetCursor, Math.max(0, targetItems.length - 1)), targetListRowCount);
-    const saveRow = buildSaveRow(focus === "targets" && targetCursor === targetSaveCursor, savePhase, changeCount);
-    const contextBar = buildContextBar({
-        blockedCount: previewState.blockedCount,
-        changeCount,
-        previewError: previewState.errorMessage,
-        previewLoading: previewState.loading,
-        savePhase,
-        saveMessage: saveState.message,
-        selectedLeafName: selectedLeaf?.linkName,
-        selectedLeafWarnings,
-        skippedLeafs,
-        sourceLabel: formatGroupLabel(activeSummary.source),
+        ...visibleAgentRows.rows,
+        {
+            key: "__skills_gap__",
+            text: "",
+            active: false,
+            color: undefined,
+        },
+        {
+            key: "__skills_header__",
+            text: `Included Skills (${selectedGroup.kind === "clawhub" ? groupSelectedLeafCount : selectedDraft.selectedLeafIds.length}/${selectedSkillRows.length})`,
+            active: false,
+            bold: true,
+            color: undefined,
+        },
+        ...filledSkillRows,
+    ];
+    return (_jsxs(Box, { flexDirection: "column", height: terminalRows, children: [_jsx(Text, { color: statusDisplay.color, wrap: "truncate-end", children: buildTopBar({
+                    width: terminalColumns,
+                    isDirty,
+                    changeCount,
+                    showDelete: canDelete,
+                    statusLabel: statusDisplay.label,
+                }) }), _jsxs(Box, { children: [_jsx(Pane, { active: focus === "groups", footer: `${groupViews.length} groups`, gapAfter: true, height: paneHeight, title: "Skills Groups", width: groupsWidth, children: renderPaneRows(groupRows.rows, bodyRowCount, groupsWidth) }), _jsx(Pane, { active: focus !== "groups", footer: buildCommandBar(focus), height: paneHeight, title: "Group Detail", width: detailWidth, children: renderPaneRows(detailRows, bodyRowCount, detailWidth, actionRows) })] }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: buildFooterHints(focus, canDelete) })] }));
+}
+export function ConfigBootstrapApp({ app }) {
+    const { exit } = useApp();
+    const { stdout } = useStdout();
+    const [state, setState] = useState({
+        phase: "loading",
+        logs: ["Booting config..."],
     });
-    const commandBar = buildCommandBar({
-        changeCount,
-        focus,
-        saveFocused: focus === "targets" && targetCursor === targetSaveCursor,
-        savePhase,
+    useEffect(() => {
+        let cancelled = false;
+        void app.configCoordinator.bootstrapWorkspaceState((event) => {
+            if (cancelled) {
+                return;
+            }
+            setState((current) => {
+                const nextLogs = [...current.logs, event.message].slice(-6);
+                return {
+                    ...current,
+                    logs: nextLogs,
+                };
+            });
+        }).then((result) => {
+            if (cancelled) {
+                return;
+            }
+            if (!result.ok) {
+                setState((current) => ({
+                    phase: "error",
+                    logs: current.logs,
+                    message: firstErrorMessage(result),
+                }));
+                return;
+            }
+            setState((current) => ({
+                phase: "ready",
+                logs: current.logs,
+                availableTargets: result.data.availableTargets,
+                summaries: result.data.summaries,
+                initialDrafts: result.data.initialDrafts,
+                audit: result.data.audit,
+                bootStatus: result.data.bootStatus,
+            }));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [app]);
+    useInput((input, key) => {
+        if (state.phase === "ready") {
+            return;
+        }
+        if (input === "q" || key.escape || (input === "c" && key.ctrl)) {
+            exit();
+        }
     });
-    return (_jsxs(Box, { flexDirection: "column", height: terminalRows, children: [_jsxs(Box, { children: [_jsx(Pane, { active: focus === "groups", footer: buildPaneFooter(groupRows.start, groupRows.end, summaries.length, `group ${selectedGroupIndex + 1}/${summaries.length}`), gapAfter: true, height: paneHeight, title: "WORKFLOW GROUPS", width: groupsWidth, children: renderPaneRows(groupRows.rows, bodyRowCount, groupsWidth) }), _jsx(Pane, { active: focus === "skills", footer: buildPaneFooter(skillRows.start, skillRows.end, activeSummary.leafs.length + 1, `${selectedDraft.selectedLeafIds.length}/${leafIds.length} selected`), gapAfter: true, height: paneHeight, title: "GROUP DETAIL", width: skillsWidth, children: renderPaneRows(skillRows.rows, bodyRowCount, skillsWidth) }), _jsx(Pane, { active: focus === "targets", footer: buildPaneFooter(targetRows.start, targetRows.end, targetItems.length, visibleTargets.length > 0
-                            ? `${visibleEnabledTargets.length}/${visibleTargets.length} targets`
-                            : "no detected targets"), height: paneHeight, title: "AGENT PROJECTION", width: targetsWidth, children: renderPaneRows(targetRows.rows, bodyRowCount, targetsWidth, [saveRow]) })] }), _jsx(Text, { dimColor: true, wrap: "truncate-middle", children: contextBar }), _jsx(Text, { dimColor: true, wrap: "truncate-middle", children: commandBar })] }));
+    if (state.phase === "ready") {
+        return (_jsx(ConfigApp, { app: app, availableTargets: state.availableTargets, summaries: state.summaries, initialDrafts: state.initialDrafts, bootStatus: state.bootStatus }));
+    }
+    const rows = stdout.rows ?? 24;
+    const bootLogs = state.logs.slice(-4);
+    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Skill Flow Config" }), _jsx(Text, { color: "gray", children: state.phase === "loading"
+                            ? "Checking groups, skills, targets, and current paths..."
+                            : "Bootstrap failed" }), state.phase === "error" ? _jsx(Text, { color: "red", children: state.message }) : null] }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "BOOT LOG" }), bootLogs.map((log) => (_jsx(Text, { color: "gray", children: log }, log))), _jsx(Text, { color: "gray", children: "Press q or Esc to exit." })] })] }));
 }
-function buildSaveRow(active, phase, changeCount) {
-    return {
-        key: "__save__",
-        text: buildSaveLabel(phase, changeCount),
-        active,
-        bold: true,
-        color: getSaveColor(phase),
-    };
+function buildSaveStatusLabel(saveState) {
+    if (saveState.phase === "saving") {
+        return "Saving";
+    }
+    if (saveState.phase === "saved") {
+        return "Saved";
+    }
+    if (saveState.phase === "failed") {
+        return "Failed";
+    }
+    return "Clean";
 }
-function getSaveColor(phase) {
-    if (phase === "failed") {
-        return "red";
+function buildPreviewLabel({ blockedCount, changeCount, errorMessage, loading, }) {
+    if (loading) {
+        return "planning...";
     }
-    if (phase === "dirty") {
-        return "yellow";
+    if (errorMessage) {
+        return "failed";
+    }
+    if (blockedCount > 0 && changeCount > 0) {
+        return `${changeCount} changes, ${blockedCount} blocked`;
     }
-    if (phase === "saving") {
-        return "cyan";
+    if (blockedCount > 0) {
+        return `${blockedCount} blocked`;
     }
-    return "green";
+    return `${changeCount} changes`;
 }
-function getGroupStateColor(phase) {
-    if (phase === "failed") {
-        return "red";
+function buildAlerts({ deleteState, failedBootMessages, isSelectedDelete, previewState, projectionWarningsByLeafId, saveState, selectedDraft, selectedSummary, updateState, }) {
+    const alerts = [];
+    if (updateState.phase === "failed" && updateState.message) {
+        alerts.push({ level: "error", message: `Update failed: ${updateState.message}` });
+    }
+    if (isSelectedDelete && deleteState.phase === "failed" && deleteState.message) {
+        alerts.push({ level: "error", message: `Delete failed: ${deleteState.message}` });
+    }
+    if (saveState.phase === "failed" && saveState.message) {
+        alerts.push({ level: "error", message: `Save failed: ${saveState.message}` });
+    }
+    if (previewState.errorMessage) {
+        alerts.push({ level: "error", message: `Preview failed: ${previewState.errorMessage}` });
     }
-    if (phase === "dirty") {
-        return "yellow";
+    for (const failedBootMessage of failedBootMessages) {
+        alerts.push({ level: "error", message: `Boot issue: ${failedBootMessage}` });
     }
-    if (phase === "saving") {
-        return "cyan";
+    for (const action of previewState.actions) {
+        if (action.kind === "blocked" && action.reason) {
+            alerts.push({ level: "blocked", message: action.reason });
+        }
+    }
+    for (const leaf of selectedSummary.leafs) {
+        if (!selectedDraft.selectedLeafIds.includes(leaf.id)) {
+            continue;
+        }
+        for (const warning of leaf.metadataWarnings) {
+            alerts.push({ level: "warning", message: warning });
+        }
+        for (const warning of projectionWarningsByLeafId[leaf.id] ?? []) {
+            alerts.push({ level: "warning", message: warning });
+        }
+    }
+    if ((selectedSummary.lock?.invalidLeafs.length ?? 0) > 0) {
+        alerts.push({
+            level: "warning",
+            message: `${selectedSummary.lock?.invalidLeafs.length ?? 0} invalid skill entries skipped`,
+        });
+    }
+    return alerts;
+}
+export function buildDetailMetadataRows({ alerts, detailWidth, group, summary, }) {
+    const sourceSummary = group.kind === "clawhub"
+        ? `Sources: ${group.summaries.length} clawhub source${group.summaries.length === 1 ? "" : "s"}`
+        : `Source: ${summary.source.locator}`;
+    const rows = [
+        {
+            key: "__title__",
+            text: group.title,
+            active: false,
+            bold: true,
+            color: undefined,
+        },
+        {
+            key: "__source__",
+            text: fitPaneLine(sourceSummary, getPaneInnerWidth(detailWidth) - 2),
+            active: false,
+            color: "gray",
+        },
+    ];
+    if (group.kind === "clawhub") {
+        rows.push({
+            key: "__focused_source__",
+            text: fitPaneLine(`Focused Source: ${formatGroupLabel(summary.source)}`, getPaneInnerWidth(detailWidth) - 2),
+            active: false,
+            color: "gray",
+        });
+    }
+    if (alerts.length > 0) {
+        rows.push({
+            key: "__alerts__",
+            text: "Alerts",
+            active: false,
+            bold: true,
+            color: undefined,
+        });
+        alerts.forEach((alert, index) => {
+            rows.push({
+                key: `__alert__:${index}`,
+                text: `! ${alert.message}`,
+                active: false,
+                color: alert.level === "error"
+                    ? "red"
+                    : alert.level === "blocked"
+                        ? "yellow"
+                        : "gray",
+            });
+        });
     }
-    if (phase === "saved") {
-        return "green";
+    return rows;
+}
+export function buildActionRows({ actionCursor, canRunActions, deleteState, focus, isSelectedDelete, showDeleteAction, updateState, }) {
+    const updateText = updateState.phase === "updating"
+        ? "Update · UPDATING..."
+        : updateState.phase === "failed"
+            ? "Update · FAILED"
+            : "Update";
+    const rows = [
+        {
+            key: "__actions_separator__",
+            text: "────────────────────────",
+            active: false,
+            color: "gray",
+        },
+        {
+            key: "__action_update__",
+            text: `[${updateText}]`,
+            active: focus === "detail.actions" && actionCursor === 0,
+            color: canRunActions || updateState.phase !== "idle" ? undefined : "gray",
+            bold: true,
+        },
+    ];
+    if (showDeleteAction) {
+        const deleteText = isSelectedDelete && deleteState.phase === "deleting"
+            ? "Delete · DELETING..."
+            : isSelectedDelete && deleteState.phase === "failed"
+                ? "Delete · FAILED"
+                : "Delete";
+        rows.push({
+            key: "__action_delete__",
+            text: `[${deleteText}]`,
+            active: focus === "detail.actions" && actionCursor === 1,
+            color: isSelectedDelete && deleteState.phase === "failed"
+                ? "red"
+                : canRunActions || (isSelectedDelete && deleteState.phase !== "idle")
+                    ? "red"
+                    : "gray",
+            bold: true,
+        });
     }
-    return "green";
+    return rows;
 }
-function buildPaneFooter(start, end, total, summary) {
-    const overflow = formatOverflow(start, end, total);
-    return `${overflow} · ${summary}`;
+function buildCommandBar(focus) {
+    if (focus === "groups") {
+        return "[Tab/→] Edit";
+    }
+    if (focus === "detail.actions") {
+        return "[Enter] Action";
+    }
+    return "[Space] Toggle";
 }
-function formatOverflow(start, end, total) {
-    const above = start;
-    const below = Math.max(0, total - end);
-    if (above === 0 && below === 0) {
-        return "top / bottom";
+function buildFooterHints(focus, canDelete) {
+    if (focus === "groups") {
+        return canDelete
+            ? "[↑↓] Move   [Tab/→] Switch pane   [u] Update   [d] Delete   [q] Exit"
+            : "[↑↓] Move   [Tab/→] Switch pane   [u] Update   [q] Exit";
     }
-    return `${above > 0 ? `${above} above` : "top"} / ${below > 0 ? `${below} below` : "bottom"}`;
+    if (focus === "detail.actions") {
+        return canDelete
+            ? "[↑↓] Move   [Enter] Action   [Tab/←/Esc] Back   [u] Update   [d] Delete"
+            : "[↑↓] Move   [Enter] Action   [Tab/←/Esc] Back   [u] Update";
+    }
+    return canDelete
+        ? "[↑↓] Move   [Space] Toggle   [Tab/←/Esc] Back   [u] Update   [d] Delete"
+        : "[↑↓] Move   [Space] Toggle   [Tab/←/Esc] Back   [u] Update";
 }
 function RowText({ row, width }) {
-    const color = row.active ? "cyan" : row.color;
+    const color = row.active ? row.activeColor ?? "cyan" : row.color;
     const prefix = row.active ? "> " : "  ";
     const contentWidth = Math.max(1, getPaneInnerWidth(width) - prefix.length);
     const content = fitPaneLine(row.text, contentWidth);
@@ -768,21 +1521,6 @@ function selectionMarker(state) {
 function getExactDuplicateKey(linkName, name, description) {
     return `${linkName}\n${name}\n${description}`;
 }
-function formatGroupSaveState(phase) {
-    if (phase === "dirty") {
-        return "DIRTY";
-    }
-    if (phase === "saving") {
-        return "SAVING";
-    }
-    if (phase === "saved") {
-        return "SAVED";
-    }
-    if (phase === "failed") {
-        return "FAILED";
-    }
-    return "SAVED";
-}
 function getWindowedRows(items, cursorIndex, visibleCount) {
     const safeVisibleCount = Math.max(1, visibleCount);
     const maxStart = Math.max(0, items.length - safeVisibleCount);
@@ -794,6 +1532,14 @@ function getWindowedRows(items, cursorIndex, visibleCount) {
         end,
     };
 }
+function pruneSourceMap(sourceMap, allowedIds) {
+    return Object.fromEntries(Object.entries(sourceMap).filter(([sourceId]) => allowedIds.has(sourceId)));
+}
+function removeSourceFromMap(sourceMap, sourceId) {
+    const next = { ...sourceMap };
+    delete next[sourceId];
+    return next;
+}
 function firstErrorMessage(result) {
     return result.errors[0]?.message ?? "operation failed";
 }