@compilr-dev/cli 0.5.0 → 0.5.1

package/dist/ui/overlay/impl/permissions-overlay-v2.js

@@ -0,0 +1,820 @@
+/**
+ * Permissions Overlay V2
+ *
+ * Modal overlay for managing tool permissions.
+ * 3 tabs:
+ * - Rules: View/edit permission rules (add, edit, delete, wildcards)
+ * - Mode: Set global permission mode
+ * - Session: View/revoke session grants, toggle auto-accept
+ *
+ * Uses BaseOverlayV2 for the new Overlay interface.
+ */
+import { BaseOverlayV2, isEscape, isTab, isShiftTab, isEnter, isSpace, isCtrlC, isNavigateUp, isNavigateDown, isLeftArrow, isRightArrow, isVimLeft, isVimRight, isBackspace, getNumberKey, isPrintable, extractPrintable, truncate, } from '../../base/index.js';
+import { getSettings, setSetting, getPermissionRules, addPermissionRule, updatePermissionRule, deletePermissionRule, resetPermissionRules, permissionLevelToDisplay, permissionModeToDisplay, } from '../../../settings/index.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const TARGET_HEIGHT = 25;
+const PAGE_SIZE = 8;
+const PERMISSION_LEVELS = ['always', 'session', 'once', 'deny'];
+const PERMISSION_MODES = ['normal', 'plan', 'auto-accept'];
+const TABS = [
+    { id: 'rules', label: 'Rules' },
+    { id: 'mode', label: 'Mode' },
+    { id: 'session', label: 'Session' },
+];
+// =============================================================================
+// Permissions Overlay V2 Class
+// =============================================================================
+export class PermissionsOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'permissions-overlay-v2';
+    minHeight = TARGET_HEIGHT;
+    options;
+    constructor(options = {}) {
+        // Convert session grants Map to array
+        const grantsArray = [];
+        if (options.sessionGrants) {
+            for (const [toolName, grantedAt] of options.sessionGrants) {
+                grantsArray.push({ toolName, grantedAt });
+            }
+        }
+        // Sort by grant time (most recent first)
+        grantsArray.sort((a, b) => b.grantedAt.getTime() - a.grantedAt.getTime());
+        const settings = getSettings();
+        const currentModeIndex = PERMISSION_MODES.indexOf(settings.permissionMode);
+        super({
+            currentTab: 0,
+            // Rules tab
+            rules: getPermissionRules(),
+            rulesSelectedIndex: 0,
+            rulesScrollOffset: 0,
+            editMode: 'none',
+            editLevelIndex: 0,
+            addInput: '',
+            addLevel: 'once',
+            addDescription: '',
+            // Mode tab
+            modeSelectedIndex: currentModeIndex >= 0 ? currentModeIndex : 0,
+            pendingMode: null,
+            clearGrantsOnModeChange: true, // Default to clearing grants on mode change
+            // Session tab
+            sessionGrants: grantsArray,
+            sessionSelectedIndex: 0,
+            autoAcceptMode: options.autoAcceptMode ?? false,
+            settingsChanged: false,
+        });
+        this.options = options;
+    }
+    // ===========================================================================
+    // Rendering
+    // ===========================================================================
+    renderContent(context) {
+        const lines = [];
+        lines.push(...this.renderTabHeader(context));
+        switch (TABS[this.state.currentTab].id) {
+            case 'rules':
+                lines.push(...this.renderRulesTab(context));
+                break;
+            case 'mode':
+                lines.push(...this.renderModeTab(context));
+                break;
+            case 'session':
+                lines.push(...this.renderSessionTab(context));
+                break;
+        }
+        lines.push(...this.renderTabFooter(context));
+        // Pad to target height for consistent rendering
+        while (lines.length < TARGET_HEIGHT) {
+            lines.push('');
+        }
+        return lines;
+    }
+    renderTabHeader(context) {
+        const s = context.styles;
+        const lines = [];
+        const cols = context.width;
+        lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
+        // Tab row
+        let tabLine = ' Permissions: ';
+        for (let i = 0; i < TABS.length; i++) {
+            const tab = TABS[i];
+            if (i === this.state.currentTab) {
+                tabLine += s.selected(` ${tab.label} `) + ' ';
+            }
+            else {
+                tabLine += s.muted(` ${tab.label} `) + ' ';
+            }
+        }
+        tabLine += s.muted('(Tab · 1-3)');
+        lines.push(tabLine);
+        lines.push('');
+        return lines;
+    }
+    // ---------------------------------------------------------------------------
+    // Rules Tab
+    // ---------------------------------------------------------------------------
+    renderRulesTab(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const lines = [];
+        // Special modes
+        if (this.state.editMode === 'edit-level') {
+            return this.renderEditLevelMode(context);
+        }
+        if (this.state.editMode.startsWith('add-')) {
+            return this.renderAddWizard(context);
+        }
+        if (this.state.editMode === 'confirm-reset') {
+            return this.renderConfirmReset(context);
+        }
+        if (this.state.editMode === 'confirm-delete') {
+            return this.renderConfirmDelete(context);
+        }
+        // Header with count
+        const countBadge = s.muted(` [${String(this.state.rules.length)} rules]`);
+        lines.push(`  ${s.primaryBold('Permission Rules')}${countBadge}`);
+        lines.push('');
+        // Column headers
+        const toolW = 20;
+        const levelW = 10;
+        const headerLine = s.muted(`  ${'Tool'.padEnd(toolW)}${'Level'.padEnd(levelW)}Description`);
+        lines.push(headerLine);
+        lines.push(s.muted('  ' + '─'.repeat(Math.max(1, cols - 4))));
+        // Rules list with pagination
+        const visibleRules = this.state.rules.slice(this.state.rulesScrollOffset, this.state.rulesScrollOffset + PAGE_SIZE);
+        if (visibleRules.length === 0) {
+            lines.push(s.muted('    No permission rules configured.'));
+        }
+        else {
+            for (let i = 0; i < visibleRules.length; i++) {
+                const rule = visibleRules[i];
+                const absoluteIndex = this.state.rulesScrollOffset + i;
+                const isSelected = absoluteIndex === this.state.rulesSelectedIndex;
+                const prefix = isSelected ? s.primary('❯ ') : '  ';
+                const toolName = rule.toolName.padEnd(toolW);
+                const level = permissionLevelToDisplay(rule.level).padEnd(levelW);
+                const desc = rule.description ?? '';
+                const maxDescLen = cols - toolW - levelW - 6;
+                const truncDesc = truncate(desc, maxDescLen);
+                const defaultMarker = rule.isDefault ? s.muted(' (default)') : '';
+                const row = `${toolName}${level}${truncDesc}${defaultMarker}`;
+                if (isSelected) {
+                    lines.push(`${prefix}${s.primary(row)}`);
+                }
+                else {
+                    lines.push(`${prefix}${row}`);
+                }
+            }
+        }
+        // Pad to PAGE_SIZE for consistent height
+        for (let i = visibleRules.length; i < PAGE_SIZE; i++) {
+            lines.push('');
+        }
+        // Pagination indicator
+        const totalPages = Math.ceil(this.state.rules.length / PAGE_SIZE);
+        const currentPage = Math.floor(this.state.rulesScrollOffset / PAGE_SIZE) + 1;
+        if (totalPages > 1) {
+            lines.push('');
+            lines.push(s.muted(`  Page ${String(currentPage)}/${String(totalPages)} (←→ to navigate)`));
+        }
+        return lines;
+    }
+    renderEditLevelMode(context) {
+        const s = context.styles;
+        const lines = [];
+        const rule = this.state.rules[this.state.rulesSelectedIndex];
+        lines.push(`  ${s.primaryBold('Edit Rule')}: ${rule.toolName}`);
+        lines.push('');
+        lines.push(`  ${s.muted('Select permission level:')}`);
+        lines.push('');
+        for (let i = 0; i < PERMISSION_LEVELS.length; i++) {
+            const level = PERMISSION_LEVELS[i];
+            const isSelected = i === this.state.editLevelIndex;
+            const prefix = isSelected ? s.primary('❯ ') : '  ';
+            const label = permissionLevelToDisplay(level);
+            const desc = this.getLevelDescription(level);
+            if (isSelected) {
+                lines.push(`${prefix}${s.primary(label.padEnd(12))}${s.muted(desc)}`);
+            }
+            else {
+                lines.push(`${prefix}${label.padEnd(12)}${s.muted(desc)}`);
+            }
+        }
+        lines.push('');
+        lines.push(s.muted('  ↑↓/jk Navigate · Enter Confirm · Esc Cancel'));
+        return lines;
+    }
+    renderAddWizard(context) {
+        const s = context.styles;
+        const lines = [];
+        const step = this.state.editMode === 'add-step1' ? 1 :
+            this.state.editMode === 'add-step2' ? 2 : 3;
+        lines.push(`  ${s.primaryBold('Add Permission Rule')}`);
+        lines.push(s.muted(`  Step ${String(step)}/3`));
+        lines.push('');
+        if (step === 1) {
+            lines.push(`  ${s.secondary('Tool name or pattern:')}`);
+            lines.push('');
+            lines.push(`  > ${this.state.addInput}█`);
+            lines.push('');
+            lines.push(s.muted('  Examples: bash, git_*, *_file'));
+            lines.push(s.muted('  Use * as wildcard'));
+        }
+        else if (step === 2) {
+            lines.push(`  Tool: ${s.primary(this.state.addInput)}`);
+            lines.push('');
+            lines.push(`  ${s.secondary('Select permission level:')}`);
+            lines.push('');
+            for (let i = 0; i < PERMISSION_LEVELS.length; i++) {
+                const level = PERMISSION_LEVELS[i];
+                const isSelected = level === this.state.addLevel;
+                const prefix = isSelected ? s.primary('❯ ') : '  ';
+                const label = permissionLevelToDisplay(level);
+                if (isSelected) {
+                    lines.push(`${prefix}${s.primary(label)}`);
+                }
+                else {
+                    lines.push(`${prefix}${label}`);
+                }
+            }
+        }
+        else {
+            lines.push(`  Tool: ${s.primary(this.state.addInput)}`);
+            lines.push(`  Level: ${s.primary(permissionLevelToDisplay(this.state.addLevel))}`);
+            lines.push('');
+            lines.push(`  ${s.secondary('Description (optional):')}`);
+            lines.push('');
+            lines.push(`  > ${this.state.addDescription}█`);
+        }
+        lines.push('');
+        if (step === 1 || step === 3) {
+            lines.push(s.muted('  Enter Continue · Esc Cancel'));
+        }
+        else {
+            lines.push(s.muted('  ↑↓/jk Navigate · Enter Confirm · Esc Back'));
+        }
+        return lines;
+    }
+    renderConfirmReset(context) {
+        const s = context.styles;
+        const lines = [];
+        lines.push(`  ${s.warning('Reset to Defaults?')}`);
+        lines.push('');
+        lines.push('  This will remove all custom rules and restore defaults.');
+        lines.push('');
+        lines.push(`  ${s.primary('❯')} Press ${s.primaryBold('Enter')} to confirm`);
+        lines.push(`    Press ${s.muted('Esc')} to cancel`);
+        return lines;
+    }
+    renderConfirmDelete(context) {
+        const s = context.styles;
+        const lines = [];
+        const rule = this.state.rules[this.state.rulesSelectedIndex];
+        lines.push(`  ${s.warning('Delete Rule?')}`);
+        lines.push('');
+        lines.push(`  Tool: ${rule.toolName}`);
+        lines.push(`  Level: ${permissionLevelToDisplay(rule.level)}`);
+        lines.push('');
+        lines.push(`  ${s.primary('❯')} Press ${s.primaryBold('Enter')} to confirm`);
+        lines.push(`    Press ${s.muted('Esc')} to cancel`);
+        return lines;
+    }
+    getLevelDescription(level) {
+        switch (level) {
+            case 'always':
+                return 'Execute without prompting';
+            case 'session':
+                return 'Prompt once per session';
+            case 'once':
+                return 'Prompt every time';
+            case 'deny':
+                return 'Block execution';
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Mode Tab
+    // ---------------------------------------------------------------------------
+    renderModeTab(context) {
+        const s = context.styles;
+        const lines = [];
+        const settings = getSettings();
+        // Show confirmation dialog if mode change is pending
+        if (this.state.editMode === 'confirm-mode-change' && this.state.pendingMode) {
+            return this.renderModeChangeConfirm(context);
+        }
+        lines.push(`  ${s.primaryBold('Permission Mode')}`);
+        lines.push('');
+        lines.push(`  ${s.muted('Select the default permission behavior:')}`);
+        lines.push('');
+        for (let i = 0; i < PERMISSION_MODES.length; i++) {
+            const mode = PERMISSION_MODES[i];
+            const isSelected = i === this.state.modeSelectedIndex;
+            const isCurrent = settings.permissionMode === mode;
+            const prefix = isSelected ? s.primary('❯ ') : '  ';
+            const radio = isCurrent ? s.success('●') : s.muted('○');
+            const label = permissionModeToDisplay(mode);
+            const desc = this.getModeDescription(mode);
+            if (isSelected) {
+                lines.push(`${prefix}${radio} ${s.primary(label.padEnd(16))}${s.muted(desc)}`);
+            }
+            else {
+                lines.push(`${prefix}${radio} ${label.padEnd(16)}${s.muted(desc)}`);
+            }
+            // Warning for auto-accept
+            if (mode === 'auto-accept' && isSelected) {
+                lines.push(s.warning('       ⚠ This mode auto-approves ALL tool executions!'));
+            }
+        }
+        lines.push('');
+        lines.push(s.muted(`  Current: ${permissionModeToDisplay(settings.permissionMode)}`));
+        return lines;
+    }
+    getModeDescription(mode) {
+        switch (mode) {
+            case 'normal':
+                return 'Standard prompts per rules';
+            case 'plan':
+                return 'Stricter - prompt for all mods';
+            case 'auto-accept':
+                return 'Trust all (dangerous!)';
+        }
+    }
+    renderModeChangeConfirm(context) {
+        const s = context.styles;
+        const lines = [];
+        const newMode = this.state.pendingMode ?? 'normal';
+        const grantCount = this.state.sessionGrants.length;
+        lines.push(`  ${s.primaryBold('Change Permission Mode')}`);
+        lines.push('');
+        lines.push(`  You are switching to: ${s.primary(permissionModeToDisplay(newMode))}`);
+        lines.push('');
+        if (grantCount > 0) {
+            lines.push(`  ${s.warning(`You have ${String(grantCount)} session grant${grantCount > 1 ? 's' : ''} active.`)}`);
+            lines.push('');
+            // Checkbox for clearing grants
+            const checkbox = this.state.clearGrantsOnModeChange ? s.success('[✓]') : s.muted('[ ]');
+            lines.push(`  ${checkbox} Clear session grants (recommended)`);
+            lines.push('');
+            lines.push(s.muted('  Press Space to toggle, Enter to confirm, Esc to cancel'));
+        }
+        else {
+            lines.push(`  ${s.primary('❯')} Press ${s.primaryBold('Enter')} to confirm`);
+            lines.push(`    Press ${s.muted('Esc')} to cancel`);
+        }
+        return lines;
+    }
+    // ---------------------------------------------------------------------------
+    // Session Tab
+    // ---------------------------------------------------------------------------
+    renderSessionTab(context) {
+        const s = context.styles;
+        const lines = [];
+        const countBadge = s.muted(` [${String(this.state.sessionGrants.length)} grants]`);
+        lines.push(`  ${s.primaryBold('Session Grants')}${countBadge}`);
+        lines.push('');
+        if (this.state.sessionGrants.length === 0) {
+            lines.push(s.muted('  No permissions granted this session.'));
+            lines.push('');
+            lines.push(s.muted('  Grants are added when you select "Always allow"'));
+            lines.push(s.muted('  in permission prompts during tool execution.'));
+        }
+        else {
+            lines.push(s.muted('  Permissions granted this session:'));
+            lines.push('');
+            for (let i = 0; i < this.state.sessionGrants.length; i++) {
+                const grant = this.state.sessionGrants[i];
+                const isSelected = i === this.state.sessionSelectedIndex;
+                const prefix = isSelected ? s.primary('❯ ') : '  ';
+                const timeStr = this.formatTime(grant.grantedAt);
+                const row = `${grant.toolName.padEnd(20)}granted at ${timeStr}`;
+                if (isSelected) {
+                    lines.push(`${prefix}${s.primary(row)}`);
+                }
+                else {
+                    lines.push(`${prefix}${row}`);
+                }
+            }
+        }
+        // Pad for consistent height
+        const usedLines = this.state.sessionGrants.length > 0 ? this.state.sessionGrants.length + 3 : 5;
+        for (let i = usedLines; i < 10; i++) {
+            lines.push('');
+        }
+        // Auto-accept mode indicator
+        lines.push('');
+        const autoAcceptStatus = this.state.autoAcceptMode ? s.success('ON') : s.muted('OFF');
+        lines.push(`  Auto-accept mode: ${autoAcceptStatus}`);
+        return lines;
+    }
+    formatTime(date) {
+        const hours = String(date.getHours()).padStart(2, '0');
+        const mins = String(date.getMinutes()).padStart(2, '0');
+        return `${hours}:${mins}`;
+    }
+    // ---------------------------------------------------------------------------
+    // Footer
+    // ---------------------------------------------------------------------------
+    renderTabFooter(context) {
+        const s = context.styles;
+        const lines = [];
+        lines.push('');
+        const tabId = TABS[this.state.currentTab].id;
+        if (tabId === 'rules') {
+            if (this.state.editMode === 'none') {
+                lines.push(s.muted(' ↑↓/jk Navigate · ←→/hl Pages · Enter/e Edit · a Add · d Delete · r Reset'));
+            }
+        }
+        else if (tabId === 'mode') {
+            lines.push(s.muted(' ↑↓/jk Navigate · Enter/Space Select · q/Esc Close'));
+        }
+        else {
+            // session tab
+            if (this.state.sessionGrants.length > 0) {
+                lines.push(s.muted(' ↑↓/jk Navigate · r Revoke · c Clear all · a Toggle auto-accept · q/Esc Close'));
+            }
+            else {
+                lines.push(s.muted(' a Toggle auto-accept · q/Esc Close'));
+            }
+        }
+        return lines;
+    }
+    // ===========================================================================
+    // Key Handling
+    // ===========================================================================
+    handleKey(key) {
+        const data = key.raw;
+        const char = extractPrintable(data);
+        // q or Esc closes (unless in edit mode)
+        if (this.state.editMode === 'none') {
+            if (isEscape(data) || isCtrlC(data) || char === 'q') {
+                return this.close({ settingsChanged: this.state.settingsChanged });
+            }
+        }
+        // Tab switching (only when not in edit mode)
+        if (this.state.editMode === 'none') {
+            if (isTab(data)) {
+                this.state.currentTab = (this.state.currentTab + 1) % TABS.length;
+                return this.rerender();
+            }
+            if (isShiftTab(data)) {
+                this.state.currentTab = (this.state.currentTab - 1 + TABS.length) % TABS.length;
+                return this.rerender();
+            }
+            // Number keys 1-3 to directly select tabs
+            const tabNumKey = getNumberKey(data);
+            if (tabNumKey !== null && tabNumKey >= 1 && tabNumKey <= TABS.length) {
+                this.state.currentTab = tabNumKey - 1;
+                return this.rerender();
+            }
+        }
+        // Tab-specific key handling
+        const tabId = TABS[this.state.currentTab].id;
+        if (tabId === 'rules') {
+            return this.handleRulesTabKey(data, char);
+        }
+        if (tabId === 'mode') {
+            return this.handleModeTabKey(data, char);
+        }
+        // session tab
+        return this.handleSessionTabKey(data, char);
+    }
+    // ---------------------------------------------------------------------------
+    // Rules Tab Key Handling
+    // ---------------------------------------------------------------------------
+    handleRulesTabKey(data, char) {
+        // Handle edit mode
+        if (this.state.editMode === 'edit-level') {
+            return this.handleEditLevelKey(data, char);
+        }
+        if (this.state.editMode.startsWith('add-')) {
+            return this.handleAddWizardKey(data, char);
+        }
+        if (this.state.editMode === 'confirm-reset') {
+            return this.handleConfirmResetKey(data);
+        }
+        if (this.state.editMode === 'confirm-delete') {
+            return this.handleConfirmDeleteKey(data);
+        }
+        // Normal list mode
+        if (isNavigateUp(data) && this.state.rulesSelectedIndex > 0) {
+            this.state.rulesSelectedIndex--;
+            // Adjust scroll
+            if (this.state.rulesSelectedIndex < this.state.rulesScrollOffset) {
+                this.state.rulesScrollOffset = this.state.rulesSelectedIndex;
+            }
+            return this.rerender();
+        }
+        if (isNavigateDown(data) && this.state.rulesSelectedIndex < this.state.rules.length - 1) {
+            this.state.rulesSelectedIndex++;
+            // Adjust scroll
+            if (this.state.rulesSelectedIndex >= this.state.rulesScrollOffset + PAGE_SIZE) {
+                this.state.rulesScrollOffset = this.state.rulesSelectedIndex - PAGE_SIZE + 1;
+            }
+            return this.rerender();
+        }
+        // Pagination with left/right
+        const isLeft = isLeftArrow(data) || isVimLeft(data);
+        const isRight = isRightArrow(data) || isVimRight(data);
+        if (isLeft && this.state.rulesScrollOffset > 0) {
+            this.state.rulesScrollOffset = Math.max(0, this.state.rulesScrollOffset - PAGE_SIZE);
+            this.state.rulesSelectedIndex = this.state.rulesScrollOffset;
+            return this.rerender();
+        }
+        if (isRight) {
+            const maxOffset = Math.max(0, this.state.rules.length - PAGE_SIZE);
+            if (this.state.rulesScrollOffset < maxOffset) {
+                this.state.rulesScrollOffset = Math.min(maxOffset, this.state.rulesScrollOffset + PAGE_SIZE);
+                this.state.rulesSelectedIndex = this.state.rulesScrollOffset;
+                return this.rerender();
+            }
+        }
+        // Enter or 'e' - edit selected rule
+        if ((isEnter(data) || char === 'e') && this.state.rules.length > 0) {
+            const rule = this.state.rules[this.state.rulesSelectedIndex];
+            this.state.editMode = 'edit-level';
+            this.state.editLevelIndex = PERMISSION_LEVELS.indexOf(rule.level);
+            return this.rerender();
+        }
+        // 'a' - add new rule
+        if (char === 'a') {
+            this.state.editMode = 'add-step1';
+            this.state.addInput = '';
+            this.state.addLevel = 'once';
+            this.state.addDescription = '';
+            return this.rerender();
+        }
+        // 'd' - delete rule
+        if (char === 'd' && this.state.rules.length > 0) {
+            const rule = this.state.rules[this.state.rulesSelectedIndex];
+            if (rule.isDefault) {
+                // Can't delete default rules - could show message
+                return this.noAction();
+            }
+            this.state.editMode = 'confirm-delete';
+            return this.rerender();
+        }
+        // 'r' - reset to defaults
+        if (char === 'r') {
+            this.state.editMode = 'confirm-reset';
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    handleEditLevelKey(data, _char) {
+        if (isEscape(data)) {
+            this.state.editMode = 'none';
+            return this.rerender();
+        }
+        if (isNavigateUp(data) && this.state.editLevelIndex > 0) {
+            this.state.editLevelIndex--;
+            return this.rerender();
+        }
+        if (isNavigateDown(data) && this.state.editLevelIndex < PERMISSION_LEVELS.length - 1) {
+            this.state.editLevelIndex++;
+            return this.rerender();
+        }
+        if (isEnter(data)) {
+            const rule = this.state.rules[this.state.rulesSelectedIndex];
+            const newLevel = PERMISSION_LEVELS[this.state.editLevelIndex];
+            updatePermissionRule(rule.toolName, { level: newLevel });
+            this.state.rules = getPermissionRules();
+            this.state.editMode = 'none';
+            this.state.settingsChanged = true;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    handleAddWizardKey(data, char) {
+        const step = this.state.editMode === 'add-step1' ? 1 :
+            this.state.editMode === 'add-step2' ? 2 : 3;
+        if (isEscape(data)) {
+            if (step === 1) {
+                this.state.editMode = 'none';
+            }
+            else if (step === 2) {
+                this.state.editMode = 'add-step1';
+            }
+            else {
+                this.state.editMode = 'add-step2';
+            }
+            return this.rerender();
+        }
+        // Step 1: Tool name input
+        if (step === 1) {
+            if (isEnter(data)) {
+                const toolName = this.state.addInput.trim();
+                if (toolName.length > 0) {
+                    this.state.editMode = 'add-step2';
+                }
+                return this.rerender();
+            }
+            if (isBackspace(data)) {
+                this.state.addInput = this.state.addInput.slice(0, -1);
+                return this.rerender();
+            }
+            if (isPrintable(data) && char) {
+                this.state.addInput += char;
+                return this.rerender();
+            }
+        }
+        // Step 2: Level selection
+        if (step === 2) {
+            if (isNavigateUp(data)) {
+                const currentIdx = PERMISSION_LEVELS.indexOf(this.state.addLevel);
+                if (currentIdx > 0) {
+                    this.state.addLevel = PERMISSION_LEVELS[currentIdx - 1];
+                    return this.rerender();
+                }
+            }
+            if (isNavigateDown(data)) {
+                const currentIdx = PERMISSION_LEVELS.indexOf(this.state.addLevel);
+                if (currentIdx < PERMISSION_LEVELS.length - 1) {
+                    this.state.addLevel = PERMISSION_LEVELS[currentIdx + 1];
+                    return this.rerender();
+                }
+            }
+            if (isEnter(data)) {
+                this.state.editMode = 'add-step3';
+                this.state.addDescription = '';
+                return this.rerender();
+            }
+        }
+        // Step 3: Description input
+        if (step === 3) {
+            if (isEnter(data)) {
+                // Add the rule
+                addPermissionRule({
+                    toolName: this.state.addInput.trim(),
+                    level: this.state.addLevel,
+                    description: this.state.addDescription.trim() || undefined,
+                });
+                this.state.rules = getPermissionRules();
+                this.state.editMode = 'none';
+                this.state.settingsChanged = true;
+                return this.rerender();
+            }
+            if (isBackspace(data)) {
+                this.state.addDescription = this.state.addDescription.slice(0, -1);
+                return this.rerender();
+            }
+            if (isPrintable(data) && char) {
+                this.state.addDescription += char;
+                return this.rerender();
+            }
+        }
+        return this.noAction();
+    }
+    handleConfirmResetKey(data) {
+        if (isEscape(data)) {
+            this.state.editMode = 'none';
+            return this.rerender();
+        }
+        if (isEnter(data)) {
+            resetPermissionRules();
+            this.state.rules = getPermissionRules();
+            this.state.rulesSelectedIndex = 0;
+            this.state.rulesScrollOffset = 0;
+            this.state.editMode = 'none';
+            this.state.settingsChanged = true;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    handleConfirmDeleteKey(data) {
+        if (isEscape(data)) {
+            this.state.editMode = 'none';
+            return this.rerender();
+        }
+        if (isEnter(data)) {
+            const rule = this.state.rules[this.state.rulesSelectedIndex];
+            deletePermissionRule(rule.toolName);
+            this.state.rules = getPermissionRules();
+            // Adjust selection if needed
+            if (this.state.rulesSelectedIndex >= this.state.rules.length) {
+                this.state.rulesSelectedIndex = Math.max(0, this.state.rules.length - 1);
+            }
+            this.state.editMode = 'none';
+            this.state.settingsChanged = true;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    // ---------------------------------------------------------------------------
+    // Mode Tab Key Handling
+    // ---------------------------------------------------------------------------
+    handleModeTabKey(data, _char) {
+        // Handle mode change confirmation
+        if (this.state.editMode === 'confirm-mode-change') {
+            return this.handleModeChangeConfirmKey(data);
+        }
+        if (isNavigateUp(data) && this.state.modeSelectedIndex > 0) {
+            this.state.modeSelectedIndex--;
+            return this.rerender();
+        }
+        if (isNavigateDown(data) && this.state.modeSelectedIndex < PERMISSION_MODES.length - 1) {
+            this.state.modeSelectedIndex++;
+            return this.rerender();
+        }
+        if (isEnter(data) || isSpace(data)) {
+            const newMode = PERMISSION_MODES[this.state.modeSelectedIndex];
+            const currentMode = getSettings().permissionMode;
+            // If changing to different mode and there are session grants, show confirmation
+            if (newMode !== currentMode && this.state.sessionGrants.length > 0) {
+                this.state.pendingMode = newMode;
+                this.state.editMode = 'confirm-mode-change';
+                this.state.clearGrantsOnModeChange = true; // Default checked
+                return this.rerender();
+            }
+            // No grants or same mode - just apply
+            setSetting('permissionMode', newMode);
+            // Sync UI mode
+            if (this.options.onModeChange) {
+                this.options.onModeChange(newMode);
+            }
+            this.state.settingsChanged = true;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    handleModeChangeConfirmKey(data) {
+        if (isEscape(data)) {
+            this.state.editMode = 'none';
+            this.state.pendingMode = null;
+            return this.rerender();
+        }
+        // Space toggles the checkbox
+        if (isSpace(data)) {
+            this.state.clearGrantsOnModeChange = !this.state.clearGrantsOnModeChange;
+            return this.rerender();
+        }
+        // Enter confirms mode change
+        if (isEnter(data) && this.state.pendingMode) {
+            // Apply mode change
+            setSetting('permissionMode', this.state.pendingMode);
+            // Sync UI mode
+            if (this.options.onModeChange) {
+                this.options.onModeChange(this.state.pendingMode);
+            }
+            this.state.settingsChanged = true;
+            // Clear grants if checkbox is checked
+            if (this.state.clearGrantsOnModeChange && this.options.onClearGrants) {
+                this.options.onClearGrants();
+                this.state.sessionGrants = [];
+                this.state.sessionSelectedIndex = 0;
+            }
+            // Reset confirmation state
+            this.state.editMode = 'none';
+            this.state.pendingMode = null;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    // ---------------------------------------------------------------------------
+    // Session Tab Key Handling
+    // ---------------------------------------------------------------------------
+    handleSessionTabKey(data, char) {
+        // Navigation
+        if (this.state.sessionGrants.length > 0) {
+            if (isNavigateUp(data) && this.state.sessionSelectedIndex > 0) {
+                this.state.sessionSelectedIndex--;
+                return this.rerender();
+            }
+            if (isNavigateDown(data) && this.state.sessionSelectedIndex < this.state.sessionGrants.length - 1) {
+                this.state.sessionSelectedIndex++;
+                return this.rerender();
+            }
+            // 'r' - revoke selected grant
+            if (char === 'r') {
+                const grant = this.state.sessionGrants[this.state.sessionSelectedIndex];
+                if (this.options.onRevokeGrant) {
+                    this.options.onRevokeGrant(grant.toolName);
+                }
+                // Remove from local state
+                this.state.sessionGrants.splice(this.state.sessionSelectedIndex, 1);
+                if (this.state.sessionSelectedIndex >= this.state.sessionGrants.length) {
+                    this.state.sessionSelectedIndex = Math.max(0, this.state.sessionGrants.length - 1);
+                }
+                return this.rerender();
+            }
+            // 'c' - clear all grants
+            if (char === 'c') {
+                if (this.options.onClearGrants) {
+                    this.options.onClearGrants();
+                }
+                this.state.sessionGrants = [];
+                this.state.sessionSelectedIndex = 0;
+                return this.rerender();
+            }
+        }
+        // 'a' - toggle auto-accept mode
+        if (char === 'a') {
+            this.state.autoAcceptMode = !this.state.autoAcceptMode;
+            if (this.options.onToggleAutoAccept) {
+                this.options.onToggleAutoAccept(this.state.autoAcceptMode);
+            }
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+}