@lkangd/cc-env 1.2.1 → 1.3.1

package/dist/commands/run.js

@@ -1,38 +1,42 @@
-import { CliError } from '../core/errors.js';
 import { formatRunEnvBlock } from '../core/format.js';
-const requiredInitKeys = [
-    'ANTHROPIC_AUTH_TOKEN',
-    'ANTHROPIC_BASE_URL',
-    'ANTHROPIC_DEFAULT_HAIKU_MODEL',
-    'ANTHROPIC_DEFAULT_OPUS_MODEL',
-    'ANTHROPIC_DEFAULT_SONNET_MODEL',
-    'ANTHROPIC_REASONING_MODEL',
-];
-export function createRunCommand({ claudeSettingsEnvService, presetService, projectEnvService, projectStateService, findClaude, renderPresetSelect, spawnCommand, stdout = process.stdout, }) {
-    return async function run({ args = [], dryRun = false, yes = false, json = false, cwd, }) {
-        // Step 0: Check settings files for init-managed keys
+import { requiredClaudeKeys } from '../core/claude-required-keys.js';
+const detectTriggerKeys = ['ANTHROPIC_AUTH_TOKEN', 'ANTHROPIC_BASE_URL'];
+function getDetectedEnv(sources) {
+    return sources.reduce((acc, source) => ({ ...acc, ...source.env }), {});
+}
+export function createRunCommand({ claudeSettingsEnvService, presetService, projectEnvService, projectStateService, findClaude, renderPresetSelect, spawnCommand, stdout = process.stdout }) {
+    return async function run({ args = [], dryRun = false, yes = false, json = false, skipDetect = false, cwd }) {
         const sources = await claudeSettingsEnvService.read();
-        const mergedSettingsEnv = sources.reduce((acc, s) => ({ ...acc, ...s.env }), {});
-        const staleKeys = requiredInitKeys.filter((k) => k in mergedSettingsEnv);
-        if (staleKeys.length > 0) {
-            throw new CliError(`Found init-managed keys in Claude settings:\n\n  ${staleKeys.join(', \n  ')}. \n\n  Run "cc-env init" first.`);
+        const detectedEnv = getDetectedEnv(sources);
+        const requiredKeys = requiredClaudeKeys.filter((key) => key in detectedEnv);
+        const hasDetectTrigger = detectTriggerKeys.some((key) => key in detectedEnv);
+        if (!skipDetect && hasDetectTrigger) {
+            return {
+                status: 'needs-preset',
+                detectedEnv,
+                requiredKeys,
+            };
         }
         // Step 1: Collect all presets (project + global)
         const names = await presetService.listNames();
-        const globalPresets = await Promise.all(names.map((name) => presetService.read(name).then((p) => ({ name, env: p.env, source: 'global' }))));
+        const globalPresets = await Promise.all(names.map(name => presetService.read(name).then(p => ({ name, env: p.env, source: 'global' }))));
         const { env: projectEnv, name: projectName } = await projectEnvService.readWithMeta();
         const projectPreset = Object.keys(projectEnv).length > 0
             ? [{ name: projectName ?? 'project', env: projectEnv, source: 'project' }]
             : [];
         const presets = [...projectPreset, ...globalPresets];
         if (presets.length === 0) {
-            throw new CliError('No presets found. Create one with "cc-env preset create".');
+            return {
+                status: 'needs-preset',
+                detectedEnv,
+                requiredKeys,
+            };
         }
         // Step 2: Determine default selection
         const savedRef = await projectStateService.getLastPreset(cwd);
         let defaultIndex = 0;
         if (savedRef) {
-            const idx = presets.findIndex((p) => p.name === savedRef.presetName && p.source === savedRef.source);
+            const idx = presets.findIndex(p => p.name === savedRef.presetName && p.source === savedRef.source);
             if (idx >= 0)
                 defaultIndex = idx;
         }
@@ -52,7 +56,7 @@ export function createRunCommand({ claudeSettingsEnvService, presetService, proj
         // Step 4: Save selection
         await projectStateService.saveLastPreset(cwd, {
             presetName: selected.name,
-            source: selected.source,
+            source: selected.source
         });
         // Step 5: Resolve claude command
         let command;
@@ -72,7 +76,7 @@ export function createRunCommand({ claudeSettingsEnvService, presetService, proj
                 command: [command, ...claudeArgs],
                 env: selected.env
             }, null, 2) + '\n');
-            return;
+            return { status: 'executed' };
         }
         const presetKeys = new Set(Object.keys(selected.env));
         const envBlock = formatRunEnvBlock(selected.env, presetKeys);
@@ -80,9 +84,10 @@ export function createRunCommand({ claudeSettingsEnvService, presetService, proj
         if (dryRun) {
             const preview = [command, ...claudeArgs].join(' ');
             stdout.write(`Would run: ${preview}\n`);
-            return;
+            return { status: 'executed' };
         }
         // Step 7: Spawn
         await spawnCommand(command, claudeArgs, { ...process.env, ...selected.env });
+        return { status: 'executed' };
     };
 }

package/dist/core/claude-required-keys.js

@@ -0,0 +1,8 @@
+export const requiredClaudeKeys = [
+    'ANTHROPIC_AUTH_TOKEN',
+    'ANTHROPIC_BASE_URL',
+    'ANTHROPIC_DEFAULT_HAIKU_MODEL',
+    'ANTHROPIC_DEFAULT_OPUS_MODEL',
+    'ANTHROPIC_DEFAULT_SONNET_MODEL',
+    'ANTHROPIC_REASONING_MODEL',
+];

package/dist/core/cli-name.js

@@ -0,0 +1,8 @@
+import { basename } from 'node:path';
+const ALIASES = new Set(['cc-env', 'ccenv']);
+export function getCliName() {
+    const name = basename(process.argv[1] ?? '');
+    if (ALIASES.has(name))
+        return name;
+    return 'cc-env';
+}

package/dist/core/schema.js

@@ -32,7 +32,17 @@ const restoreHistorySchema = z.object({
     targetType: z.enum(['settings', 'preset']),
     targetName: z.string(),
 });
+const presetCreateHistorySchema = z.object({
+    timestamp: z.string().datetime({ offset: true }),
+    action: z.literal('preset-create'),
+    projectPath: z.string(),
+    presetName: z.string(),
+    destination: z.enum(['global', 'project']),
+    migratedKeys: z.array(envKeySchema),
+    sources: z.array(sourceEntrySchema),
+});
 export const historySchema = z.discriminatedUnion('action', [
     initHistorySchema,
     restoreHistorySchema,
+    presetCreateHistorySchema,
 ]);

package/dist/flows/preset-create-flow.js

@@ -1,14 +1,62 @@
-export function createPresetCreateFlowState() {
+export function createPresetCreateFlowState(input) {
+    const detectedEnv = input?.detectedEnv ?? {};
+    const requiredKeys = input?.requiredKeys ?? [];
+    const detectedKeys = Object.keys(detectedEnv).sort();
+    const selectedKeys = requiredKeys.filter((key) => key in detectedEnv);
+    if (selectedKeys.length > 0) {
+        return {
+            step: 'detectedPrompt',
+            env: detectedEnv,
+            allKeys: detectedKeys,
+            selectedKeys,
+            requiredKeys: selectedKeys,
+            presetName: '',
+        };
+    }
     return {
         step: 'source',
         env: {},
         allKeys: [],
         selectedKeys: [],
+        requiredKeys: [],
         presetName: '',
     };
 }
 export function advancePresetCreateFlow(state, action) {
     switch (state.step) {
+        case 'detectedPrompt':
+            if (action.type === 'accept-detected-prompt') {
+                return {
+                    ...state,
+                    step: 'detected',
+                };
+            }
+            if (action.type === 'reject-detected-prompt') {
+                const { source: _source, ...rest } = state;
+                return {
+                    ...rest,
+                    step: 'source',
+                };
+            }
+            return state;
+        case 'detected':
+            if (action.type === 'toggle-detected-key') {
+                if (state.requiredKeys.includes(action.key) || !state.allKeys.includes(action.key)) {
+                    return state;
+                }
+                const selectedKeys = state.selectedKeys.includes(action.key)
+                    ? state.selectedKeys.filter((key) => key !== action.key)
+                    : [...state.selectedKeys, action.key].sort();
+                return { ...state, selectedKeys };
+            }
+            if (action.type === 'confirm-detected-keys') {
+                return {
+                    ...state,
+                    step: 'name',
+                    source: 'detected',
+                };
+            }
+            return state;
         case 'source':
             if (action.type !== 'select-source')
                 return state;

package/dist/flows/restore-flow.js

@@ -1,7 +1,26 @@
-export function createRestoreFlowState(records) {
+export function createRestoreFlowState(records, cwd) {
+    const currentProjectRecords = records
+        .filter((record) => 'projectPath' in record && record.projectPath === cwd)
+        .sort((left, right) => right.timestamp.localeCompare(left.timestamp));
+    const otherHistoryRecords = records
+        .filter((record) => !('projectPath' in record) || record.projectPath !== cwd)
+        .sort((left, right) => right.timestamp.localeCompare(left.timestamp));
+    const orderedRecords = [...currentProjectRecords, ...otherHistoryRecords];
+    const groups = [];
+    if (currentProjectRecords.length > 0) {
+        groups.push({ title: 'Current project', start: 0, end: currentProjectRecords.length });
+    }
+    if (otherHistoryRecords.length > 0) {
+        groups.push({
+            title: 'Other history',
+            start: currentProjectRecords.length,
+            end: orderedRecords.length,
+        });
+    }
     return {
         step: 'record',
-        records,
+        records: orderedRecords,
+        groups,
     };
 }
 export function advanceRestoreFlow(state, action) {
@@ -14,7 +33,7 @@ export function advanceRestoreFlow(state, action) {
             if (!selectedRecord) {
                 return state;
             }
-            if (selectedRecord.action === 'init') {
+            if (selectedRecord.action === 'init' || selectedRecord.action === 'preset-create') {
                 return {
                     ...state,
                     step: 'confirm',
@@ -41,19 +60,18 @@ export function advanceRestoreFlow(state, action) {
                     targetType: 'settings',
                 };
             }
-            const targetName = action.targetName;
             return {
                 ...state,
                 step: 'confirm',
                 targetType: 'preset',
-                targetName,
+                targetName: action.targetName,
             };
-        case 'confirm':
+        case 'confirm': {
             if (action.type !== 'confirm' || !state.selectedTimestamp) {
                 return state;
             }
             const selectedRecord = state.records.find((record) => record.timestamp === state.selectedTimestamp);
-            if (selectedRecord?.action === 'init') {
+            if (selectedRecord?.action === 'init' || selectedRecord?.action === 'preset-create') {
                 return {
                     ...state,
                     step: 'done',
@@ -69,6 +87,7 @@ export function advanceRestoreFlow(state, action) {
                 ...state,
                 step: 'done',
             };
+        }
         case 'done':
             return state;
     }

package/dist/ink/components/text-input.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function TextInputDisplay({ value, cursorPos }) {
+    const before = value.slice(0, cursorPos);
+    const after = value.slice(cursorPos);
+    return (_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ['>', " "] }), _jsx(Text, { color: "cyan", children: before }), _jsx(Text, { dimColor: true, children: "\u2588" }), _jsx(Text, { color: "cyan", children: after })] }));
+}

package/dist/ink/hooks/use-text-input.js

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+export function handleKey(state, input, key, setState) {
+    const { value, cursorPos } = state;
+    if (key.leftArrow) {
+        if (cursorPos > 0)
+            setState(value, cursorPos - 1);
+        return true;
+    }
+    if (key.rightArrow) {
+        if (cursorPos < value.length)
+            setState(value, cursorPos + 1);
+        return true;
+    }
+    if (key.home) {
+        setState(value, 0);
+        return true;
+    }
+    if (key.end) {
+        setState(value, value.length);
+        return true;
+    }
+    if (key.ctrl && input === 'a') {
+        setState(value, 0);
+        return true;
+    }
+    if (key.ctrl && input === 'e') {
+        setState(value, value.length);
+        return true;
+    }
+    if (key.ctrl && input === 'u') {
+        setState(value.slice(cursorPos), 0);
+        return true;
+    }
+    if (key.ctrl && input === 'k') {
+        setState(value.slice(0, cursorPos), cursorPos);
+        return true;
+    }
+    if ((key.ctrl && (key.backspace || key.delete)) || (key.meta && (key.backspace || key.delete))) {
+        if (cursorPos > 0) {
+            setState(value.slice(cursorPos), 0);
+        }
+        return true;
+    }
+    if (key.backspace || key.delete) {
+        if (cursorPos > 0) {
+            setState(value.slice(0, cursorPos - 1) + value.slice(cursorPos), cursorPos - 1);
+        }
+        return true;
+    }
+    if (input && !key.ctrl && !key.meta) {
+        setState(value.slice(0, cursorPos) + input + value.slice(cursorPos), cursorPos + 1);
+        return true;
+    }
+    return false;
+}
+export function useTextInput() {
+    const [value, setValue] = useState('');
+    const [cursorPos, setCursorPos] = useState(0);
+    const setState = (newValue, newCursor) => {
+        setValue(newValue);
+        setCursorPos(newCursor);
+    };
+    const onKey = (input, key) => {
+        return handleKey({ value, cursorPos }, input, key, setState);
+    };
+    const reset = (newValue = '') => {
+        setValue(newValue);
+        setCursorPos(newValue.length);
+    };
+    return { value, cursorPos, handleKey: onKey, setValue, reset };
+}

package/dist/ink/preset-create-app.js

@@ -1,8 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
+import { useTextInput } from './hooks/use-text-input.js';
+import { TextInputDisplay } from './components/text-input.js';
 import { advancePresetCreateFlow, createPresetCreateFlowState, } from '../flows/preset-create-flow.js';
 import { EnvSummary } from './summary.js';
+function DetectedPromptStep({ cursor }) {
+    const options = ['Generate from detected config', 'Choose another source'];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Detected existing configuration" }), _jsx(Text, { dimColor: true, children: "Use the currently detected settings to generate a preset?" }), _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 enter confirm \u00B7 q cancel" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: options.map((label, i) => (_jsxs(Box, { children: [_jsx(Text, { children: i === cursor ? '❯ ' : '  ' }), _jsx(Text, { ...(i === cursor ? { color: 'cyan' } : {}), children: label })] }, label))) })] }));
+}
+function DetectedKeysStep({ keys, selectedKeys, requiredKeys, cursor, }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Select detected env keys to migrate" }), _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 space toggle optional keys \u00B7 enter confirm" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: keys.map((key, i) => {
+                    const isSelected = selectedKeys.includes(key);
+                    const isRequired = requiredKeys.includes(key);
+                    return (_jsxs(Box, { children: [_jsx(Text, { children: i === cursor ? '❯ ' : '  ' }), _jsx(Text, { color: isSelected ? 'green' : '', children: isSelected ? '[x]' : '[ ]' }), _jsx(Text, { children: isRequired ? ' ! ' : '   ' }), _jsxs(Text, { children: [" ", key] })] }, key));
+                }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "! required key \u00B7 q cancel" }) })] }));
+}
 function SourceStep({ cursor }) {
     const options = [
         { label: 'File import', value: 'file' },
@@ -10,8 +23,8 @@ function SourceStep({ cursor }) {
     ];
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Select env source" }), _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 enter confirm" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: options.map((opt, i) => (_jsxs(Box, { children: [_jsx(Text, { children: i === cursor ? '❯ ' : '  ' }), _jsx(Text, { ...(i === cursor ? { color: 'cyan' } : {}), children: opt.label })] }, opt.value))) })] }));
 }
-function FilePathStep({ value, error }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Enter file path (.yaml/.yml/.json)" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ['>', " "] }), _jsx(Text, { color: "cyan", children: value }), _jsx(Text, { dimColor: true, children: "\u2588" })] }), error ? _jsx(Text, { color: "red", children: error }) : null] }));
+function FilePathStep({ value, cursorPos, error }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Enter file path (.yaml/.yml/.json)" }), _jsx(Box, { marginTop: 1, children: _jsx(TextInputDisplay, { value: value, cursorPos: cursorPos }) }), error ? _jsx(Text, { color: "red", children: error }) : null] }));
 }
 function KeysStep({ keys, selectedKeys, cursor, }) {
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Select env keys to import" }), _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 space toggle \u00B7 enter confirm" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: keys.map((key, i) => {
@@ -19,11 +32,11 @@ function KeysStep({ keys, selectedKeys, cursor, }) {
                     return (_jsxs(Box, { children: [_jsx(Text, { children: i === cursor ? '❯ ' : '  ' }), _jsx(Text, { color: isSelected ? 'green' : '', children: isSelected ? '[x]' : '[ ]' }), _jsxs(Text, { children: [" ", key] })] }, key));
                 }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: [selectedKeys.length, " of ", keys.length, " selected"] }) })] }));
 }
-function ManualInputStep({ entries, value, error, }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Enter KEY=VALUE pairs (press q when done)" }), entries.length > 0 ? (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: entries.map(([key, val]) => (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "\u2022 " }), _jsx(Text, { color: "magenta", children: key }), _jsx(Text, { dimColor: true, children: "=" }), _jsx(Text, { children: val })] }, key))) })) : null, _jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ['>', " "] }), _jsx(Text, { color: "cyan", children: value }), _jsx(Text, { dimColor: true, children: "\u2588" })] }), error ? _jsx(Text, { color: "red", children: error }) : null] }));
+function ManualInputStep({ entries, value, cursorPos, error, }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Enter KEY=VALUE pairs (press q when done)" }), entries.length > 0 ? (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: entries.map(([key, val]) => (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "\u2022 " }), _jsx(Text, { color: "magenta", children: key }), _jsx(Text, { dimColor: true, children: "=" }), _jsx(Text, { children: val })] }, key))) })) : null, _jsx(TextInputDisplay, { value: value, cursorPos: cursorPos }), error ? _jsx(Text, { color: "red", children: error }) : null] }));
 }
-function NameStep({ value }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Enter preset name" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ['>', " "] }), _jsx(Text, { color: "cyan", children: value }), _jsx(Text, { dimColor: true, children: "\u2588" })] })] }));
+function NameStep({ value, cursorPos }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Enter preset name" }), _jsx(Box, { marginTop: 1, children: _jsx(TextInputDisplay, { value: value, cursorPos: cursorPos }) })] }));
 }
 function DestinationStep({ cursor }) {
     const options = [
@@ -32,10 +45,12 @@ function DestinationStep({ cursor }) {
     ];
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Select save destination" }), _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 enter confirm" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: options.map((opt, i) => (_jsxs(Box, { children: [_jsx(Text, { children: i === cursor ? '❯ ' : '  ' }), _jsx(Text, { ...(i === cursor ? { color: 'cyan' } : {}), children: opt.label })] }, opt.value))) })] }));
 }
-export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectEnvPath, }) {
+export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectEnvPath, detectedEnv, requiredKeys, }) {
     const { exit } = useApp();
-    const [state, setState] = useState(createPresetCreateFlowState);
-    const [textInput, setTextInput] = useState('');
+    const [state, setState] = useState(() => createPresetCreateFlowState(detectedEnv
+        ? (requiredKeys ? { detectedEnv, requiredKeys } : { detectedEnv })
+        : undefined));
+    const textInput = useTextInput();
     const [listCursor, setListCursor] = useState(0);
     const [allKeys, setAllKeys] = useState([]);
     const [fileEnv, setFileEnv] = useState({});
@@ -44,6 +59,58 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
             exit();
             return;
         }
+        if (state.step === 'detectedPrompt') {
+            if (input === 'q') {
+                exit();
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setListCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setListCursor((c) => Math.min(1, c + 1));
+                return;
+            }
+            if (key.return) {
+                setState((s) => advancePresetCreateFlow(s, listCursor === 0
+                    ? { type: 'accept-detected-prompt' }
+                    : { type: 'reject-detected-prompt' }));
+                setListCursor(0);
+                textInput.reset();
+                return;
+            }
+        }
+        if (state.step === 'detected') {
+            if (input === 'q') {
+                exit();
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setListCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setListCursor((c) => Math.min(state.allKeys.length - 1, c + 1));
+                return;
+            }
+            if (input === ' ') {
+                const targetKey = state.allKeys[listCursor];
+                if (targetKey) {
+                    setState((s) => advancePresetCreateFlow(s, {
+                        type: 'toggle-detected-key',
+                        key: targetKey,
+                    }));
+                }
+                return;
+            }
+            if (key.return) {
+                setState((s) => advancePresetCreateFlow(s, { type: 'confirm-detected-keys' }));
+                setListCursor(0);
+                textInput.reset();
+                return;
+            }
+        }
         if (state.step === 'source') {
             if (input === 'q') {
                 exit();
@@ -61,7 +128,7 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
                 const source = listCursor === 0 ? 'file' : 'manual';
                 setState((s) => advancePresetCreateFlow(s, { type: 'select-source', source }));
                 setListCursor(0);
-                setTextInput('');
+                textInput.reset();
                 return;
             }
         }
@@ -70,14 +137,10 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
                 exit();
                 return;
             }
-            if (key.backspace || key.delete) {
-                setTextInput((v) => v.slice(0, -1));
-                return;
-            }
             if (key.return) {
                 void (async () => {
                     try {
-                        const result = await readFile(textInput);
+                        const result = await readFile(textInput.value);
                         if (result.allKeys.length === 0) {
                             setState((s) => advancePresetCreateFlow(s, {
                                 type: 'set-error',
@@ -89,7 +152,7 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
                         setFileEnv(result.env);
                         setState((s) => advancePresetCreateFlow(s, {
                             type: 'set-file-path',
-                            filePath: textInput,
+                            filePath: textInput.value,
                         }));
                         setListCursor(0);
                     }
@@ -103,10 +166,8 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
                 })();
                 return;
             }
-            if (input && !key.ctrl && !key.meta) {
-                setTextInput((v) => v + input);
+            if (textInput.handleKey(input, key))
                 return;
-            }
         }
         if (state.step === 'keys') {
             if (input === 'q') {
@@ -141,12 +202,12 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
                     keys: state.selectedKeys,
                     env: selectedEnv,
                 }));
-                setTextInput('');
+                textInput.reset();
                 return;
             }
         }
         if (state.step === 'manualInput') {
-            if (input === 'q' && textInput === '') {
+            if (input === 'q' && textInput.value === '') {
                 if (state.selectedKeys.length === 0) {
                     setState((s) => advancePresetCreateFlow(s, {
                         type: 'set-error',
@@ -155,15 +216,11 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
                     return;
                 }
                 setState((s) => advancePresetCreateFlow(s, { type: 'finish-manual-input' }));
-                setTextInput('');
-                return;
-            }
-            if (key.backspace || key.delete) {
-                setTextInput((v) => v.slice(0, -1));
+                textInput.reset();
                 return;
             }
             if (key.return) {
-                const separatorIndex = textInput.indexOf('=');
+                const separatorIndex = textInput.value.indexOf('=');
                 if (separatorIndex <= 0) {
                     setState((s) => advancePresetCreateFlow(s, {
                         type: 'set-error',
@@ -171,8 +228,8 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
                     }));
                     return;
                 }
-                const k = textInput.slice(0, separatorIndex);
-                const v = textInput.slice(separatorIndex + 1);
+                const k = textInput.value.slice(0, separatorIndex);
+                const v = textInput.value.slice(separatorIndex + 1);
                 if (!/^[A-Z0-9_]+$/.test(k)) {
                     setState((s) => advancePresetCreateFlow(s, {
                         type: 'set-error',
@@ -185,35 +242,27 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
                     key: k,
                     value: v,
                 }));
-                setTextInput('');
+                textInput.reset();
                 return;
             }
-            if (input && !key.ctrl && !key.meta) {
-                setTextInput((v) => v + input);
+            if (textInput.handleKey(input, key))
                 return;
-            }
         }
         if (state.step === 'name') {
             if (input === 'q') {
                 exit();
                 return;
             }
-            if (key.backspace || key.delete) {
-                setTextInput((v) => v.slice(0, -1));
-                return;
-            }
-            if (key.return && textInput.trim().length > 0) {
+            if (key.return && textInput.value.trim().length > 0) {
                 setState((s) => advancePresetCreateFlow(s, {
                     type: 'set-name',
-                    name: textInput.trim(),
+                    name: textInput.value.trim(),
                 }));
                 setListCursor(0);
                 return;
             }
-            if (input && !key.ctrl && !key.meta) {
-                setTextInput((v) => v + input);
+            if (textInput.handleKey(input, key))
                 return;
-            }
         }
         if (state.step === 'destination') {
             if (input === 'q') {
@@ -261,7 +310,7 @@ export function PresetCreateApp({ onSubmit, readFile, globalPresetPath, projectE
     if (state.step === 'done') {
         return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { color: "green", children: "Done" }) }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [state.step === 'source' && _jsx(SourceStep, { cursor: listCursor }), state.step === 'filePath' && (_jsx(FilePathStep, { value: textInput, ...(state.error ? { error: state.error } : {}) })), state.step === 'keys' && (_jsx(KeysStep, { keys: allKeys, selectedKeys: state.selectedKeys, cursor: listCursor })), state.step === 'manualInput' && (_jsx(ManualInputStep, { entries: state.selectedKeys.map((k) => [k, state.env[k] ?? '']), value: textInput, ...(state.error ? { error: state.error } : {}) })), state.step === 'name' && _jsx(NameStep, { value: textInput }), state.step === 'destination' && _jsx(DestinationStep, { cursor: listCursor }), state.step === 'confirm' && state.destination ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(EnvSummary, { title: `Preset: ${state.presetName}`, entries: Object.entries(state.env)
+    return (_jsxs(Box, { flexDirection: "column", children: [state.step === 'detectedPrompt' && _jsx(DetectedPromptStep, { cursor: listCursor }), state.step === 'detected' && (_jsx(DetectedKeysStep, { keys: state.allKeys, selectedKeys: state.selectedKeys, requiredKeys: state.requiredKeys, cursor: listCursor })), state.step === 'source' && _jsx(SourceStep, { cursor: listCursor }), state.step === 'filePath' && (_jsx(FilePathStep, { value: textInput.value, cursorPos: textInput.cursorPos, ...(state.error ? { error: state.error } : {}) })), state.step === 'keys' && (_jsx(KeysStep, { keys: allKeys, selectedKeys: state.selectedKeys, cursor: listCursor })), state.step === 'manualInput' && (_jsx(ManualInputStep, { entries: state.selectedKeys.map((k) => [k, state.env[k] ?? '']), value: textInput.value, cursorPos: textInput.cursorPos, ...(state.error ? { error: state.error } : {}) })), state.step === 'name' && _jsx(NameStep, { value: textInput.value, cursorPos: textInput.cursorPos }), state.step === 'destination' && _jsx(DestinationStep, { cursor: listCursor }), state.step === 'confirm' && state.destination ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(EnvSummary, { title: `Preset: ${state.presetName}`, entries: Object.entries(state.env)
                             .filter(([k]) => state.selectedKeys.includes(k))
                             .sort(([a], [b]) => a.localeCompare(b)), mask: true, ...(state.filePath ? { fromFiles: [state.filePath] } : {}), toFiles: [
                             state.destination === 'global'