@lidtop/loadout 0.3.0 → 0.3.1

package/README.md

@@ -13,7 +13,11 @@ npm install -g @lidtop/loadout
 loadout
 ```
 
-Pick your kits, select **Continue**, and confirm. Run `loadout` again to change your selection.
+Pick your kits, select **Review changes**, and confirm. Inside a provider, choose **Back to providers** to keep browsing with your selections preserved. Run `loadout` again to change your selection.
+
+The destination selector above the tabs shows **Repository** in cyan (this repository only) and **Global** in magenta (your user configuration across repositories). Active controls and selection markers follow the destination's color. Press **Tab** to switch destinations instantly, or **Shift+Tab** to cycle backward. **←/→** switches between the Kits, Browse, and Installed sections. Each destination keeps its own selections, provider, search, and cursor position, ready to browse as soon as you switch. A **\*** marks destinations with unapplied selections; **Review changes** includes the session's changes across both. Descriptions appear beneath every provider and kit, with dependency or update notes when needed.
+
+Press **Esc** at a setup question or review prompt to return to the picker with your selections and position preserved. Press **Esc twice quickly** or **Ctrl+C** to cancel setup.
 
 Conflicting project instructions are skipped with a warning; the kit’s skills still install.
 

package/dist/cli.js

@@ -134,7 +134,9 @@ async function generate(catalog, state, opts) {
 }
 async function setup() {
     const { targets, initial } = interactiveTargets();
-    const configured = await interactive(targets, initial);
+    await interactive(targets, initial, { review: reviewSelections });
+}
+async function reviewSelections(configured) {
     const offline = program.opts().offline;
     const plans = [];
     for (const { target, state } of configured) {
@@ -165,7 +167,10 @@ async function setup() {
     }
     if (!plans.some(hasChanges))
         return;
-    if (await confirmApply()) {
+    const scopes = configured
+        .filter((_, index) => hasChanges(plans[index]))
+        .map(({ target }) => target.label);
+    if (await confirmApply(undefined, scopes)) {
         applyAll(plans);
         console.log('\nYour loadout is ready.');
         for (const result of plans) {

package/dist/interactive.d.ts

@@ -2,9 +2,14 @@ import { checkbox, confirm, select } from '@inquirer/prompts';
 import { type Catalog, type State } from './schema.js';
 import { type TargetSelection } from './picker.js';
 import { type Target } from './targets.js';
-export declare function interactive(targets: Target[], initial?: number): Promise<TargetSelection[]>;
+type PromptContext = NonNullable<Parameters<typeof confirm>[1]>;
+export declare function interactive(targets: Target[], initial?: number, options?: {
+    context?: PromptContext;
+    review?: (selections: TargetSelection[], context?: PromptContext) => Promise<void>;
+}): Promise<TargetSelection[]>;
 export declare function configureSelection(target: Target, state: State, context?: Parameters<typeof confirm>[1]): Promise<State>;
-export declare function confirmApply(): Promise<boolean>;
+export declare function confirmApply(context?: PromptContext, scopes?: string[]): Promise<boolean>;
 export declare function selectUpdates(catalog: Catalog, state: State, offline?: boolean, context?: Parameters<typeof checkbox>[1]): Promise<string[]>;
 export declare function confirmRetry(id: string, error: Error, context?: Parameters<typeof select>[1]): Promise<boolean>;
 export declare function confirmAdoption(paths: string[], context?: Parameters<typeof confirm>[1]): Promise<boolean>;
+export {};

package/dist/interactive.js

@@ -1,21 +1,57 @@
 import { checkbox, confirm, select } from '@inquirer/prompts';
 import { configure } from './resolve.js';
 import { validAnswer } from './schema.js';
-import { targetPicker } from './picker.js';
+import { targetPicker, } from './picker.js';
 import { availableUpdates, updateDescription } from './updates.js';
-export async function interactive(targets, initial = 0) {
-    if (!process.stdin.isTTY || !process.stdout.isTTY)
+import { prepareInput } from './terminal.js';
+class BackToPicker extends Error {
+}
+async function backPrompt(prompt, context = {}) {
+    const input = context.input ?? process.stdin;
+    prepareInput(input);
+    const controller = new AbortController();
+    const back = (_text, key) => {
+        if (key.name === 'escape')
+            controller.abort(new BackToPicker());
+    };
+    input.on('keypress', back);
+    try {
+        return await prompt({
+            ...context,
+            signal: context.signal
+                ? AbortSignal.any([context.signal, controller.signal])
+                : controller.signal,
+        });
+    }
+    catch (error) {
+        if (error instanceof Error && error.cause instanceof BackToPicker)
+            throw error.cause;
+        throw error;
+    }
+    finally {
+        input.off('keypress', back);
+    }
+}
+export async function interactive(targets, initial = 0, options = {}) {
+    if (!options.context && (!process.stdin.isTTY || !process.stdout.isTTY))
         throw new Error('Interactive setup needs a terminal. Use loadout enable <kit>, then loadout apply.');
-    const chosen = await targetPicker({
-        targets,
-        initial,
-    });
-    const configured = [];
-    for (const { target, state } of chosen) {
-        const value = await configureSelection(target, state);
-        configured.push({ target, state: value });
+    const session = {};
+    for (;;) {
+        const chosen = await targetPicker({ targets, initial, session }, options.context);
+        try {
+            const configured = [];
+            for (const { target, state } of chosen) {
+                const value = await configureSelection(target, state, options.context);
+                configured.push({ target, state: value });
+            }
+            await options.review?.(configured, options.context);
+            return configured;
+        }
+        catch (error) {
+            if (!(error instanceof BackToPicker))
+                throw error;
+        }
     }
-    return configured;
 }
 export async function configureSelection(target, state, context) {
     const change = new Map();
@@ -23,10 +59,10 @@ export async function configureSelection(target, state, context) {
         if (!change.has(kit)) {
             const hasSaved = Object.entries(target.catalog.kits.get(kit).questions).some(([name, q]) => validAnswer(q, state.answers[kit]?.[name]));
             change.set(kit, hasSaved
-                ? await confirm({
+                ? await backPrompt((context) => confirm({
                     message: `${target.label} · ${kit} · Change selection?`,
                     default: false,
-                }, context)
+                }, context), context)
                 : true);
         }
         const saved = state.answers[kit]?.[key];
@@ -34,16 +70,21 @@ export async function configureSelection(target, state, context) {
             return saved;
         const message = `${target.label} · ${kit} · ${question.message}`;
         if (question.type === 'boolean')
-            return confirm({ message, default: typeof value === 'boolean' ? value : false }, context);
-        return select({
+            return backPrompt((context) => confirm({ message, default: typeof value === 'boolean' ? value : false }, context), context);
+        return backPrompt((context) => select({
             message,
             choices: question.choices.map((v) => ({ name: v, value: v })),
             default: typeof value === 'string' ? value : undefined,
-        }, context);
+        }, context), context);
     });
 }
-export async function confirmApply() {
-    return confirm({ message: 'Apply changes?', default: true });
+export async function confirmApply(context, scopes = []) {
+    return backPrompt((context) => confirm({
+        message: scopes.length
+            ? `Apply changes to ${scopes.join(' and ')}?`
+            : 'Apply changes?',
+        default: true,
+    }, context), context);
 }
 export async function selectUpdates(catalog, state, offline = false, context) {
     const updates = availableUpdates(catalog, state.selected);
@@ -53,7 +94,7 @@ export async function selectUpdates(catalog, state, offline = false, context) {
         console.log(`${updates.length} catalog update(s) available. Run loadout online to review them; keeping saved versions.`);
         return [];
     }
-    return checkbox({
+    return backPrompt((context) => checkbox({
         message: 'Catalog updates available · choose kits to update (Enter skips)',
         choices: updates.map((kit) => ({
             name: kit.id,
@@ -61,20 +102,20 @@ export async function selectUpdates(catalog, state, offline = false, context) {
             description: updateDescription(kit),
         })),
         required: false,
-    }, context);
+    }, context), context);
 }
 export async function confirmRetry(id, error, context) {
-    return select({
+    return backPrompt((context) => select({
         message: `${id}: ${error.message}`,
         choices: [
             { name: 'Retry download', value: true },
             { name: 'Cancel', value: false },
         ],
-    }, context);
+    }, context), context);
 }
 export async function confirmAdoption(paths, context) {
-    return confirm({
+    return backPrompt((context) => confirm({
         message: `Keep existing content and let Loadout manage ${paths.join(', ')}? Originals will be restored when disabled.`,
         default: true,
-    }, context);
+    }, context), context);
 }

package/dist/picker.d.ts

@@ -6,11 +6,32 @@ export type PickerConfig = {
     columns?: number;
     rows?: number;
 };
+declare const repositorySections: readonly ['Kits', 'Browse', 'Installed'];
+type Section = (typeof repositorySections)[number];
 export type TargetPickerConfig = {
     targets: Target[];
     initial?: number;
     columns?: number;
     rows?: number;
+    session?: PickerSession;
+};
+type PickerView = {
+    section: Section;
+    provider: string | undefined;
+    providerList: {
+        query: string;
+        active: number;
+    };
+    query: string;
+    active: number;
+};
+export type PickerSession = {
+    snapshot?: PickerView & {
+        targetIndex: number;
+        visited: number[];
+        selections: string[][];
+        views: PickerView[];
+    };
 };
 export type TargetSelection = {
     target: Target;
@@ -21,6 +42,7 @@ declare const renderPicker: import("@inquirer/type").Prompt<TargetSelection[], {
     initial?: number;
     columns?: number;
     rows?: number;
+    session?: PickerSession;
 } & TargetPickerConfig>;
 export declare function targetPicker(config: TargetPickerConfig, context?: Parameters<typeof renderPicker>[1]): Promise<TargetSelection[]>;
 export declare function kitPicker(config: PickerConfig, context?: Parameters<typeof targetPicker>[1]): Promise<string[]>;

package/dist/picker.js

@@ -1,14 +1,15 @@
 import { createPrompt, useEffect, useKeypress, useState, isEnterKey, isSpaceKey, } from '@inquirer/core';
 import { stripVTControlCharacters, styleText } from 'node:util';
 import stringWidth from 'string-width';
+import path from 'node:path';
 import { resolveKits, reasons } from './resolve.js';
 import { kitSource } from './schema.js';
 import { availableUpdates, hasUpdate } from './updates.js';
 import { prepareInput } from './terminal.js';
 import { providerDescriptions } from './curated.js';
-const accent = (value) => styleText('cyan', value);
 const muted = (value) => styleText('dim', value);
 const bold = (value) => styleText('bold', value);
+const scopeColor = (target, value) => styleText(target.global ? 'magenta' : 'cyan', value);
 const clean = (value) => stripVTControlCharacters(value).replace(/[\x00-\x1f\x7f]/g, ' ');
 function fit(value, width) {
     const text = clean(value);
@@ -22,7 +23,7 @@ function fit(value, width) {
     }
     return width > 0 ? `${result}…` : '';
 }
-function wordmark(width, rows) {
+function wordmark(width, rows, accent) {
     if (width < 43 || rows < 20)
         return ['', `  ${accent(bold('LOADOUT'))}`, ''];
     return [
@@ -44,20 +45,33 @@ const providerPrefixes = {
     'mattpocock/skills': 'matt-pocock-',
     'anthropics/skills': 'anthropic-',
 };
+const initialView = (target) => ({
+    section: target.global ||
+        ![...(target.catalog?.kits.values() ?? [])].some((kit) => !providerFor(kit))
+        ? 'Browse'
+        : 'Kits',
+    provider: undefined,
+    providerList: { query: '', active: 0 },
+    query: '',
+    active: 0,
+});
 const emptyState = () => ({
     schemaVersion: 1,
     selected: [],
     answers: {},
 });
 const renderPicker = createPrompt((config, done) => {
-    const [targets, setTargets] = useState(config.targets);
-    const [targetIndex, setTargetIndex] = useState(config.initial ?? 0);
-    const [visited, setVisited] = useState([config.initial ?? 0]);
-    const [selections, setSelections] = useState(config.targets.map((target) => (target.state?.selected ?? []).filter((id) => target.catalog?.kits.has(id) &&
-        target.catalog.kits.get(id)?.ready !== false)));
-    const [pendingSwitch, setPendingSwitch] = useState(undefined);
+    const snapshot = config.session?.snapshot;
+    const targets = config.targets;
+    const [views, setViews] = useState(snapshot?.views ?? targets.map(initialView));
+    const [targetIndex, setTargetIndex] = useState(snapshot?.targetIndex ?? config.initial ?? 0);
+    const [visited, setVisited] = useState(snapshot?.visited ?? [config.initial ?? 0]);
+    const [selections, setSelections] = useState(snapshot?.selections ??
+        config.targets.map((target) => (target.state?.selected ?? []).filter((id) => target.catalog?.kits.has(id) &&
+            target.catalog.kits.get(id)?.ready !== false)));
     const [notice, setNotice] = useState('');
     const target = targets[targetIndex];
+    const accent = (value) => scopeColor(target, value);
     const sections = target.global
         ? ['Browse', 'Installed']
         : repositorySections;
@@ -66,17 +80,18 @@ const renderPicker = createPrompt((config, done) => {
         kits: new Map(),
     };
     const selected = selections[targetIndex];
-    const hasSelectionChanges = JSON.stringify([...selected].sort()) !==
-        JSON.stringify([...(target.state?.selected ?? [])].sort());
+    const pendingTargets = targets.filter((item, index) => JSON.stringify([...selections[index]].sort()) !==
+        JSON.stringify([...(item.state?.selected ?? [])].sort()));
     const setSelected = (value) => setSelections(selections.map((ids, index) => (index === targetIndex ? value : ids)));
-    const [section, setSection] = useState(target.global ||
-        ![...catalog.kits.values()].some((kit) => !providerFor(kit))
-        ? 'Browse'
-        : 'Kits');
-    const [scopeFocused, setScopeFocused] = useState(false);
-    const [provider, setProvider] = useState(undefined);
-    const [query, setQuery] = useState('');
-    const [active, setActive] = useState(0);
+    const [section, setSection] = useState(snapshot?.section ?? views[targetIndex].section);
+    const [provider, setProvider] = useState(snapshot?.provider);
+    const [providerList, setProviderList] = useState(snapshot?.providerList ?? { query: '', active: 0 });
+    const [query, setQuery] = useState(snapshot?.query ?? '');
+    const [active, setActive] = useState(snapshot?.active ?? 0);
+    useEffect((rl) => {
+        if (snapshot?.query)
+            rl.write(snapshot.query);
+    }, []);
     const [finished, setFinished] = useState(false);
     const [size, setSize] = useState({
         columns: process.stdout.columns || 80,
@@ -176,10 +191,16 @@ const renderPicker = createPrompt((config, done) => {
             .sort((a, b) => Number(a.ready === false) - Number(b.ready === false))
             .map((kit) => ({ id: kit.id, description: kit.description, kit }));
     }
+    if (provider)
+        entries.push({
+            id: '@back',
+            action: 'back',
+            description: 'Keeps your selections',
+        });
     entries.push({
-        id: '@continue',
-        action: 'continue',
-        description: 'Review selections and apply',
+        id: '@review',
+        action: 'review',
+        description: '',
     });
     const cursor = Math.min(active, Math.max(0, entries.length - 1));
     const focused = entries[cursor];
@@ -193,72 +214,77 @@ const renderPicker = createPrompt((config, done) => {
             rl.clearLine(0);
             rl.write(query);
         };
-        const switchTarget = (index) => {
-            setScopeFocused(false);
-            setTargetIndex(index);
-            setSection(targets[index].global ||
-                ![...targets[index].catalog.kits.values()].some((kit) => !providerFor(kit))
-                ? 'Browse'
-                : 'Kits');
-            setVisited([...new Set([...visited, index])]);
+        const backToProviders = () => {
             setProvider(undefined);
-            setNotice('');
-            reset();
+            setQuery(providerList.query);
+            setActive(providerList.active);
+            rl.clearLine(0);
+            rl.write(providerList.query);
         };
-        if (pendingSwitch !== undefined) {
-            if (key.name === 'y') {
-                switchTarget(pendingSwitch);
-                setPendingSwitch(undefined);
-            }
-            else if (key.name === 'n' ||
-                key.name === 'escape' ||
-                isEnterKey(key)) {
-                setPendingSwitch(undefined);
+        const switchTarget = (index) => {
+            if (index === targetIndex) {
                 restoreInput();
+                return;
             }
-            return;
-        }
-        if (scopeFocused && (isEnterKey(key) || isSpaceKey(key))) {
-            setScopeFocused(false);
-            const next = (targetIndex + 1) % targets.length;
-            const other = targets[next];
-            if (other.error)
-                setNotice(other.error);
-            else if (!other.catalog)
-                setNotice('Cannot load this location.');
-            else if (hasSelectionChanges) {
-                setPendingSwitch(next);
+            const next = targets[index];
+            if (next.error || !next.catalog) {
+                setNotice(next.error ?? 'Cannot load this location.');
+                restoreInput();
+                return;
             }
-            else
-                switchTarget(next);
+            setViews(views.map((view, index) => index === targetIndex
+                ? { section, provider, providerList, query, active: cursor }
+                : view));
+            const view = views[index];
+            setTargetIndex(index);
+            setSection(view.section);
+            setProvider(view.provider);
+            setProviderList(view.providerList);
+            setQuery(view.query);
+            setActive(view.active);
+            setVisited([...new Set([...visited, index])]);
+            setNotice('');
             rl.clearLine(0);
+            rl.write(view.query);
+        };
+        if (key.name === 'tab') {
+            switchTarget((targetIndex + (key.shift ? -1 : 1) + targets.length) %
+                targets.length);
             return;
         }
-        if (['tab', 'left', 'right'].includes(key.name)) {
-            const index = scopeFocused
-                ? sections.length
-                : sections.indexOf(section);
-            const count = sections.length + (targets.length > 1 ? 1 : 0);
-            const backwards = key.name === 'left' || (key.name === 'tab' && key.shift);
+        if (['left', 'right'].includes(key.name)) {
+            const index = sections.indexOf(section);
+            const count = sections.length;
+            const backwards = key.name === 'left';
             const next = (index + (backwards ? -1 : 1) + count) % count;
-            setScopeFocused(next === sections.length);
-            if (next !== sections.length) {
-                setSection(sections[next]);
-                setProvider(undefined);
-                reset();
-            }
-            else
-                restoreInput();
+            setSection(sections[next]);
+            setProvider(undefined);
+            reset();
         }
         else if (key.name === 'up' || key.name === 'down') {
-            setScopeFocused(false);
             if (entries.length)
                 setActive((cursor + (key.name === 'up' ? -1 : 1) + entries.length) %
                     entries.length);
             restoreInput();
         }
         else if (isEnterKey(key) || isSpaceKey(key)) {
-            if (focused?.action === 'continue') {
+            if (focused?.action === 'back') {
+                backToProviders();
+                return;
+            }
+            else if (focused?.action === 'review') {
+                if (config.session)
+                    config.session.snapshot = {
+                        targetIndex,
+                        visited,
+                        selections,
+                        views,
+                        section,
+                        provider,
+                        providerList,
+                        query,
+                        active: cursor,
+                    };
                 setFinished(true);
                 done(targets.flatMap((item, index) => {
                     if (!item.catalog || !visited.includes(index))
@@ -273,6 +299,7 @@ const renderPicker = createPrompt((config, done) => {
                 }));
             }
             else if (browsingProviders && focused) {
+                setProviderList({ query, active: cursor });
                 setProvider(focused.id);
                 setActive(0);
             }
@@ -286,124 +313,115 @@ const renderPicker = createPrompt((config, done) => {
             rl.write(query);
         }
         else if (key.name === 'escape') {
-            if (scopeFocused) {
-                setScopeFocused(false);
-                restoreInput();
-            }
-            else {
-                if (!query && provider)
-                    setProvider(undefined);
+            if (!query && provider)
+                backToProviders();
+            else
                 reset();
-            }
         }
         else if (!['left', 'right', 'home', 'end'].includes(key.name)) {
-            setScopeFocused(false);
             setQuery(clean(rl.line));
             setActive(0);
         }
     });
-    const header = wordmark(width, height);
-    const other = targets.length > 1
-        ? targets[(targetIndex + 1) % targets.length]
-        : undefined;
-    const switchLabel = other
-        ? `[ Go to ${other.label}${other.error ? ' !' : ''} ]`
-        : '';
-    const scopeLabel = width >= 60 ? `${target.label} · ${target.root}` : target.label;
-    const scopeText = fit(scopeLabel, width - switchLabel.length - 4);
-    const scopeLines = targets.length > 1 || target.global
-        ? [
-            `  ${bold(scopeText)}${' '.repeat(Math.max(2, width - stringWidth(scopeText) - switchLabel.length - 2))}${scopeFocused ? accent(bold(switchLabel)) : muted(switchLabel)}`,
-            ...(width < 60 ? [`  ${muted(fit(target.root, width - 2))}`] : []),
-        ]
-        : [];
-    const selectionWarning = hasSelectionChanges
-        ? [
-            `  ${fit(`Unapplied changes in ${target.label}.`, width - 2)}`,
-            '  Selections stay in this session.',
-        ]
-        : [];
-    if (pendingSwitch !== undefined)
-        return [
-            ...header,
-            ...scopeLines,
-            '',
-            `  ${bold(fit(`Switch to ${targets[pendingSwitch].label}?`, width - 2))}`,
-            ...selectionWarning,
-            '',
-            `  ${accent('[Enter/Esc]')} Stay   ${accent('[y]')} Switch`,
-            '\u001b[?25l',
-        ].join('\n');
+    const scopeLabels = targets.map((item, index) => `[${index === targetIndex ? '●' : '○'} ${clean(item.label)}${pendingTargets.includes(item) ? '*' : ''}${item.error || !item.catalog ? ' !' : ''}]`);
+    const baseWidth = scopeLabels.reduce((sum, label) => sum + stringWidth(label), 0) +
+        (targets.length - 1) * 2;
+    const repositoryIndex = targets.findIndex((item) => !item.global);
+    const nameWidth = width - 4 - baseWidth - 3;
+    if (repositoryIndex >= 0 && nameWidth >= 3) {
+        const repository = targets[repositoryIndex];
+        const name = fit(path.basename(repository.root) || repository.root, nameWidth);
+        scopeLabels[repositoryIndex] = scopeLabels[repositoryIndex].replace(clean(repository.label), () => `${clean(repository.label)} · ${name}`);
+    }
+    const segments = targets.map((item, index) => {
+        const label = scopeLabels[index];
+        const colored = scopeColor(item, label);
+        return index === targetIndex
+            ? bold(colored)
+            : pendingTargets.includes(item)
+                ? colored
+                : muted(colored);
+    });
+    const selectorWidth = segments.reduce((sum, item) => sum + stringWidth(item), 0) +
+        (segments.length - 1) * 2;
+    const scopeLines = selectorWidth <= width - 4
+        ? [`    ${segments.join('  ')}`]
+        : segments.map((item) => `    ${item}`);
     if (finished)
         return [
-            ...header,
+            ...wordmark(width, height, accent),
             `  ${accent('✓')} ${selected.length} selected${requiredCount ? muted(` · ${requiredCount} required`) : ''}\n`,
         ].join('\n');
     const updates = availableUpdates(catalog).length;
     const counts = `${selected.length} selected${requiredCount ? ` · ${requiredCount} required` : ''}`;
+    const tabLabel = (name) => name === 'Browse' && provider ? `Browse › ${clean(provider)}` : name;
+    const inlineProvider = !!provider && sections.map(tabLabel).join('    ').length + 2 <= width - 2;
     const tabs = width >= 34
-        ? `  ${sections.map((name) => (name === section && !scopeFocused ? accent(bold(`[${name}]`)) : muted(name))).join('    ')}`
-        : `  ${scopeFocused ? muted(section) : accent(bold(`[${section}]`))} ${muted('←→/tab')}`;
+        ? `  ${sections
+            .map((name) => {
+            const label = inlineProvider ? tabLabel(name) : name;
+            return name === section
+                ? accent(bold(`[${label}]`))
+                : muted(label);
+        })
+            .join('    ')}`
+        : `  ${accent(bold(`[${section}]`))}`;
     const filter = `  ${accent('/')} ${query ? `${fit(query, width - 6)}${accent('▏')}` : muted(browsingProviders ? 'Search providers or kits' : 'Search kits')}`;
-    const rule = `  ${muted('─'.repeat(width - 2))}`;
-    const detailed = height >= 20;
-    const hints = scopeFocused
-        ? [
-            `space/enter ${other?.error || !other?.catalog ? 'details' : 'switch'}`,
-            '←→/tab move',
-            'esc back',
-        ]
-        : [
-            '↑↓ move',
-            `space/enter ${focused?.action ? 'select' : browsingProviders ? 'open' : 'toggle'}`,
-            '←→/tab switch',
-            `esc ${provider ? 'back' : 'clear'}`,
-        ];
-    const helpLines = [];
-    const separator = width >= 100 ? '    ' : ' · ';
+    const escapeHint = query ? 'Esc clear' : provider ? 'Esc back' : '';
+    const hints = [
+        ...(width >= 60 ? ['↑↓ move'] : []),
+        focused?.action
+            ? 'Enter select'
+            : browsingProviders
+                ? 'Space open'
+                : 'Space toggle',
+        targets.length > 1 ? 'Tab switch scope' : '←→ tabs',
+        escapeHint,
+    ].filter(Boolean);
+    let helpText = '';
     for (const hint of hints) {
-        const previous = helpLines.at(-1);
-        const combined = previous ? `${previous}${separator}${hint}` : hint;
-        if (previous && stringWidth(combined) <= width - 2)
-            helpLines[helpLines.length - 1] = combined;
-        else
-            helpLines.push(fit(hint, width - 2));
-    }
-    const help = helpLines.map((line) => `  ${muted(line)}`);
-    if (scopeFocused && other) {
-        const action = other.error || !other.catalog
-            ? `${other.label} is unavailable`
-            : `Switch to ${other.label}`;
-        return [
-            ...header,
-            ...scopeLines,
-            '',
-            tabs,
-            rule,
-            `  ${bold(fit(action, width - 2))}`,
-            ...(other.error ? [`  ${fit(other.error, width - 2)}`] : []),
-            `  ${muted(fit(other.root, width - 2))}`,
-            rule,
-            ...help,
-            '\u001b[?25l',
-        ].join('\n');
+        const combined = helpText ? `${helpText} · ${hint}` : hint;
+        if (stringWidth(combined) <= width - 2)
+            helpText = combined;
     }
+    const help = [`  ${muted(helpText)}`];
     const beforeList = [
-        ...header,
         ...scopeLines,
-        ...(scopeLines.length && detailed ? [''] : []),
         tabs,
-        ...(provider ? [`  ${muted(fit(provider, width - 2))}`] : []),
-        ...(detailed ? [''] : []),
-        rule,
+        ...(provider && !inlineProvider
+            ? [`  ${muted(fit(provider, width - 2))}`]
+            : []),
         filter,
-        ...(detailed ? [''] : []),
     ];
     const summary = fit(`${counts}${updates ? ` · ${updates} updates` : ''}`, width - 6);
-    const bottomRule = `  ${muted(`${'─'.repeat(Math.max(1, width - stringWidth(summary) - 6))}  ${summary} ─`)}`;
-    // Border, detail, spacing, keyboard help, and cursor-control line.
-    const footerHeight = 5 + help.length;
-    const pageSize = Math.max(1, Math.min(8, Math.floor((height - beforeList.length - footerHeight) / (detailed ? 2 : 1))));
+    const actions = entries.filter((row) => row.action);
+    const kit = focused?.kit;
+    const why = kit ? reasons(catalog, selected, kit.id) : [];
+    const detail = notice ||
+        (kit?.ready === false
+            ? 'Edit this kit, then set ready: true in kit.yaml'
+            : kit && willUninstall(kit.id)
+                ? 'Uninstall on apply. Select again to keep.'
+                : why.length
+                    ? `Required by ${why.map(displayName).join(', ')}${selected.includes(kit.id) ? ' · also selected' : ' · space to keep explicitly'}`
+                    : kit?.requires.length
+                        ? `Requires ${kit.requires.map(displayName).join(', ')}`
+                        : kit && hasUpdate(kit)
+                            ? `Catalog update · ${kit.pinned.ref.slice(0, 8)} → ${kit.external.ref.slice(0, 8)}`
+                            : '');
+    // Keep the contextual row allocated so focus changes never move the footer.
+    const footerHeight = 3 + actions.length + help.length;
+    // Prefer useful list rows over decorative branding on short terminals.
+    const header = wordmark(width, height, accent);
+    const headerBudget = height - beforeList.length - footerHeight - (height >= 20 ? 8 : 4);
+    if (header.length <= headerBudget)
+        beforeList.unshift(...header);
+    else if (headerBudget >= 1)
+        beforeList.unshift(`  ${accent(bold('LOADOUT'))}`);
+    const spacing = height - beforeList.length - footerHeight >= 8 ? 1 : 0;
+    if (spacing)
+        beforeList.push('');
+    const pageSize = Math.max(1, Math.min(8, Math.floor((height - beforeList.length - footerHeight) / 2)));
     const listEntries = entries.filter((row) => !row.action);
     const listCursor = Math.min(cursor, Math.max(0, listEntries.length - 1));
     const start = Math.max(0, Math.min(listCursor - Math.floor(pageSize / 2), listEntries.length - pageSize));
@@ -436,28 +454,24 @@ const renderPicker = createPrompt((config, done) => {
                     ? 'Will uninstall'
                     : hasUpdate(row.kit)
                         ? 'update'
-                        : explicit
-                            ? 'selected'
-                            : required
-                                ? 'required'
-                                : row.kit.pinned
-                                    ? 'saved'
-                                    : '';
+                        : required
+                            ? 'required'
+                            : row.kit.pinned && !explicit
+                                ? 'saved'
+                                : '';
         const marker = !row.kit
             ? accent('▸')
             : explicit
                 ? accent('●')
                 : required
                     ? styleText('yellow', '◆')
-                    : muted('○');
+                    : muted(accent('○'));
         const badge = required || willUninstall(row.id) || (row.kit && hasUpdate(row.kit))
             ? styleText('yellow', label)
             : muted(label);
         const name = fit(displayName(row.id), width - label.length - 9);
         const gap = ' '.repeat(Math.max(2, width - stringWidth(name) - label.length - 6));
-        lines.push(`  ${focus ? accent('›') : ' '} ${marker} ${row.kit?.ready === false ? muted(name) : focus ? bold(name) : name}${gap}${badge}`);
-        if (detailed)
-            lines.push(`      ${muted(fit(row.kit && section === 'Installed' ? `${kitSource(row.kit)} · ${row.description}` : row.description, width - 6))}`);
+        lines.push(`  ${focus ? accent('›') : ' '} ${marker} ${row.kit?.ready === false ? muted(name) : focus ? bold(name) : name}${gap}${badge}`, `      ${muted(fit(row.kit && section === 'Installed' ? `${kitSource(row.kit)} · ${row.description}` : row.description, width - 6))}`);
     }
     if (!page.length) {
         const empty = !catalog.kits.size
@@ -465,48 +479,38 @@ const renderPicker = createPrompt((config, done) => {
             : query
                 ? 'No matching kits. Esc to clear.'
                 : section === 'Kits'
-                    ? 'No repository kits. Tab to browse.'
+                    ? 'No repository kits. ←→ to browse.'
                     : section === 'Installed'
-                        ? 'No kits installed. Tab to browse.'
+                        ? 'No kits installed. ←→ to browse.'
                         : 'No external providers configured.';
         lines.push(`  ${muted(fit(empty, width - 2))}`);
     }
-    const kit = focused?.kit;
-    const why = kit ? reasons(catalog, selected, kit.id) : [];
-    const detail = focused?.action
-        ? focused.description
-        : browsingProviders
-            ? [
-                focused?.selectedCount ? `${focused.selectedCount} selected` : '',
-                focused?.downloadedCount
-                    ? `${focused.downloadedCount} downloaded`
-                    : '',
-            ]
-                .filter(Boolean)
-                .join(' · ') || 'Choose a provider to explore its kits'
-            : kit?.ready === false
-                ? 'Edit this kit, then set ready: true in kit.yaml'
-                : kit && willUninstall(kit.id)
-                    ? 'Uninstall on apply. Select again to keep.'
-                    : kit && hasUpdate(kit)
-                        ? `Catalog update · ${kit.pinned.ref.slice(0, 8)} → ${kit.external.ref.slice(0, 8)}`
-                        : why.length
-                            ? `Required by ${why.map(displayName).join(', ')}${selected.includes(kit.id) ? ' · also selected' : ' · space to keep explicitly'}`
-                            : kit?.requires.length
-                                ? `Requires ${kit.requires.map(displayName).join(', ')}`
-                                : kit?.external
-                                    ? `Includes ${(kit.pinned ?? kit.external).skills.map((p) => p.split('/').at(-1)).join(', ')}`
-                                    : '';
     const pagination = listEntries.length > page.length
         ? `${start + 1}–${start + page.length} of ${listEntries.length}`
         : '';
+    const status = fit([summary, pagination].filter(Boolean).join(' · '), width - 6);
+    const bottomRule = `  ${muted('─'.repeat(Math.max(1, width - stringWidth(status) - 6)))}  ${scopeColor(target, status)} ${muted('─')}`;
     return [
         ...beforeList,
         ...lines,
+        `  ${muted(fit(detail, width - 2))}`,
         bottomRule,
-        `  ${focused?.action ? accent('›') : ' '} ${focused?.action ? accent(bold('[ Continue ]')) : '[ Continue ]'}`,
-        `  ${muted(fit(notice || [pagination, detail].filter(Boolean).join(' · '), width - 2))}`,
-        '',
+        ...actions.map((row) => {
+            const label = row.action === 'back'
+                ? width >= 25
+                    ? 'Back to providers'
+                    : 'Back'
+                : width >= 22
+                    ? 'Review changes'
+                    : 'Review';
+            const button = fit(`[ ${label} ]`, width - 4);
+            const focus = row.id === focused?.id;
+            const helperWidth = width - stringWidth(button) - 6;
+            const helper = row.description && helperWidth > 0
+                ? `  ${muted(fit(row.description, helperWidth))}`
+                : '';
+            return `  ${focus ? accent('›') : ' '} ${focus ? accent(bold(button)) : button}${helper}`;
+        }),
         ...help,
         '\u001b[?25l',
     ].join('\n');

package/kits/dont-commit/instructions.md

@@ -0,0 +1 @@
+Do not commit changes or perform Git operations. Leave Git to the user.

package/kits/dont-commit/kit.yaml

@@ -0,0 +1,6 @@
+schemaVersion: 1
+id: dont-commit
+description: Leave commits and Git operations to the user
+outputs:
+  - type: instructions
+    source: instructions.md

package/kits/write-kit/skills/loadout-write-kit/SKILL.md

@@ -5,6 +5,8 @@ description: Create or edit private or shared Loadout kits.
 
 Use `.loadout-personal/kits/` for private kits, `.loadout/kits/` for shared kits, or `~/.loadout/kits/` for kits you can enable in any repository. Adapt this example; drop unused questions, outputs, and files.
 
+State each requirement once as a direct instruction, including its exceptions. Preserve its exact trigger and scope. Omit introductions, summaries, explanations of familiar concepts, and lists of actions a rule already covers. Do not add unrequested rules or steps.
+
 `.loadout-personal/kits/review/kit.yaml`:
 
 ```yaml
@@ -52,4 +54,4 @@ loadout enable review --answer review.diagrams=true --answer review.detail=detai
 loadout disable review
 ```
 
-Drop `--dry-run --diff` to apply, or select via `loadout` → Browse → Personal → Continue.
+Drop `--dry-run --diff` to apply, or select via `loadout` → Browse → Personal → Review changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lidtop/loadout",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Choose and manage agent instruction and skill kits for repositories and your home directory.",
   "type": "module",
   "bin": {