@akiojin/gwt 2.2.0 → 2.4.0

package/dist/cli/ui/components/App.js

@@ -1,30 +1,32 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useApp } from 'ink';
-import { ErrorBoundary } from './common/ErrorBoundary.js';
-import { BranchListScreen } from './screens/BranchListScreen.js';
-import { WorktreeManagerScreen } from './screens/WorktreeManagerScreen.js';
-import { BranchCreatorScreen } from './screens/BranchCreatorScreen.js';
-import { BranchActionSelectorScreen } from '../screens/BranchActionSelectorScreen.js';
-import { AIToolSelectorScreen } from './screens/AIToolSelectorScreen.js';
-import { SessionSelectorScreen } from './screens/SessionSelectorScreen.js';
-import { ExecutionModeSelectorScreen } from './screens/ExecutionModeSelectorScreen.js';
-import { useGitData } from '../hooks/useGitData.js';
-import { useScreenState } from '../hooks/useScreenState.js';
-import { formatBranchItems } from '../utils/branchFormatter.js';
-import { calculateStatistics } from '../utils/statisticsCalculator.js';
-import { getRepositoryRoot, deleteBranch } from '../../../git.js';
-import { createWorktree, generateWorktreePath, getMergedPRWorktrees, isProtectedBranchName, removeWorktree, switchToProtectedBranch, } from '../../../worktree.js';
-import { getPackageVersion } from '../../../utils.js';
-import { resolveBaseBranchLabel, resolveBaseBranchRef, } from '../utils/baseBranch.js';
-const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧'];
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useApp } from "ink";
+import { ErrorBoundary } from "./common/ErrorBoundary.js";
+import { BranchListScreen } from "./screens/BranchListScreen.js";
+import { WorktreeManagerScreen } from "./screens/WorktreeManagerScreen.js";
+import { BranchCreatorScreen } from "./screens/BranchCreatorScreen.js";
+import { BranchActionSelectorScreen } from "../screens/BranchActionSelectorScreen.js";
+import { AIToolSelectorScreen } from "./screens/AIToolSelectorScreen.js";
+import { SessionSelectorScreen } from "./screens/SessionSelectorScreen.js";
+import { ExecutionModeSelectorScreen } from "./screens/ExecutionModeSelectorScreen.js";
+import { ModelSelectorScreen, } from "./screens/ModelSelectorScreen.js";
+import { useGitData } from "../hooks/useGitData.js";
+import { useScreenState } from "../hooks/useScreenState.js";
+import { formatBranchItems } from "../utils/branchFormatter.js";
+import { calculateStatistics } from "../utils/statisticsCalculator.js";
+import { getRepositoryRoot, deleteBranch } from "../../../git.js";
+import { createWorktree, generateWorktreePath, getMergedPRWorktrees, isProtectedBranchName, removeWorktree, switchToProtectedBranch, } from "../../../worktree.js";
+import { getPackageVersion } from "../../../utils.js";
+import { resolveBaseBranchLabel, resolveBaseBranchRef, } from "../utils/baseBranch.js";
+import { getDefaultInferenceForModel, getDefaultModelOption, } from "../utils/modelOptions.js";
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧"];
 const COMPLETION_HOLD_DURATION_MS = 3000;
-const PROTECTED_BRANCH_WARNING = 'Root branches operate directly in the repository root. Create a new branch if you need a dedicated worktree.';
+const PROTECTED_BRANCH_WARNING = "Root branches operate directly in the repository root. Create a new branch if you need a dedicated worktree.";
 const getSpinnerFrame = (index) => {
     const frame = SPINNER_FRAMES[index];
-    if (typeof frame === 'string') {
+    if (typeof frame === "string") {
         return frame;
     }
-    return SPINNER_FRAMES[0] ?? '⠋';
+    return SPINNER_FRAMES[0] ?? "⠋";
 };
 /**
  * App - Top-level component for Ink.js UI
@@ -44,6 +46,8 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
     const [selectedBranch, setSelectedBranch] = useState(null);
     const [creationSourceBranch, setCreationSourceBranch] = useState(null);
     const [selectedTool, setSelectedTool] = useState(null);
+    const [selectedModel, setSelectedModel] = useState(null);
+    const [lastModelByTool, setLastModelByTool] = useState({});
     // PR cleanup feedback
     const [cleanupIndicators, setCleanupIndicators] = useState({});
     const [cleanupProcessingBranch, setCleanupProcessingBranch] = useState(null);
@@ -66,7 +70,8 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
             return undefined;
         }
         const interval = setInterval(() => {
-            spinnerFrameIndexRef.current = (spinnerFrameIndexRef.current + 1) % SPINNER_FRAMES.length;
+            spinnerFrameIndexRef.current =
+                (spinnerFrameIndexRef.current + 1) % SPINNER_FRAMES.length;
             setSpinnerFrameIndex(spinnerFrameIndexRef.current);
         }, 120);
         return () => {
@@ -83,17 +88,17 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         if (cleanupProcessingBranch) {
             setCleanupIndicators((prev) => {
                 const current = prev[cleanupProcessingBranch];
-                if (current && current.icon === frame && current.color === 'cyan') {
+                if (current && current.icon === frame && current.color === "cyan") {
                     return prev;
                 }
                 const next = {
                     ...prev,
-                    [cleanupProcessingBranch]: { icon: frame, color: 'cyan' },
+                    [cleanupProcessingBranch]: { icon: frame, color: "cyan" },
                 };
                 return next;
             });
         }
-        setCleanupFooterMessage({ text: `Processing... ${frame}`, color: 'cyan' });
+        setCleanupFooterMessage({ text: `Processing... ${frame}`, color: "cyan" });
     }, [cleanupInputLocked, cleanupProcessingBranch, spinnerFrameIndex]);
     useEffect(() => {
         if (!hiddenBranches.length) {
@@ -113,9 +118,11 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
     }, []);
     const visibleBranches = useMemo(() => branches.filter((branch) => !hiddenBranches.includes(branch.name)), [branches, hiddenBranches]);
     // Helper function to create content-based hash for branches
-    const branchHash = useMemo(() => visibleBranches.map((b) => `${b.name}-${b.type}-${b.isCurrent}`).join(','), [visibleBranches]);
+    const branchHash = useMemo(() => visibleBranches
+        .map((b) => `${b.name}-${b.type}-${b.isCurrent}`)
+        .join(","), [visibleBranches]);
     // Helper function to create content-based hash for worktrees
-    const worktreeHash = useMemo(() => worktrees.map((w) => `${w.branch}-${w.path}`).join(','), [worktrees]);
+    const worktreeHash = useMemo(() => worktrees.map((w) => `${w.branch}-${w.path}`).join(","), [worktrees]);
     // Format branches to BranchItems (memoized for performance with content-based dependencies)
     const branchItems = useMemo(() => {
         // Build worktreeMap for sorting
@@ -139,46 +146,48 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         isAccessible: wt.isAccessible ?? true,
     })), [worktrees]);
     const resolveBaseBranch = useCallback(() => {
-        const localMain = branches.find((branch) => branch.type === 'local' && (branch.name === 'main' || branch.name === 'master'));
+        const localMain = branches.find((branch) => branch.type === "local" &&
+            (branch.name === "main" || branch.name === "master"));
         if (localMain) {
             return localMain.name;
         }
-        const develop = branches.find((branch) => branch.type === 'local' && (branch.name === 'develop' || branch.name === 'dev'));
+        const develop = branches.find((branch) => branch.type === "local" &&
+            (branch.name === "develop" || branch.name === "dev"));
         if (develop) {
             return develop.name;
         }
-        return 'main';
+        return "main";
     }, [branches]);
     const baseBranchLabel = useMemo(() => resolveBaseBranchLabel(creationSourceBranch, selectedBranch, resolveBaseBranch), [creationSourceBranch, resolveBaseBranch, selectedBranch]);
     // Handle branch selection
     const toLocalBranchName = useCallback((remoteName) => {
-        const segments = remoteName.split('/');
+        const segments = remoteName.split("/");
         if (segments.length <= 1) {
             return remoteName;
         }
-        return segments.slice(1).join('/');
+        return segments.slice(1).join("/");
     }, []);
     const inferBranchCategory = useCallback((branchName) => {
         const matched = branches.find((branch) => branch.name === branchName);
         if (matched) {
             return matched.branchType;
         }
-        if (branchName === 'main' || branchName === 'master') {
-            return 'main';
+        if (branchName === "main" || branchName === "master") {
+            return "main";
         }
-        if (branchName === 'develop' || branchName === 'dev') {
-            return 'develop';
+        if (branchName === "develop" || branchName === "dev") {
+            return "develop";
         }
-        if (branchName.startsWith('feature/')) {
-            return 'feature';
+        if (branchName.startsWith("feature/")) {
+            return "feature";
         }
-        if (branchName.startsWith('hotfix/')) {
-            return 'hotfix';
+        if (branchName.startsWith("hotfix/")) {
+            return "hotfix";
         }
-        if (branchName.startsWith('release/')) {
-            return 'release';
+        if (branchName.startsWith("release/")) {
+            return "release";
         }
-        return 'other';
+        return "other";
     }, [branches]);
     const isProtectedSelection = useCallback((branch) => {
         if (!branch) {
@@ -186,9 +195,11 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         }
         return (isProtectedBranchName(branch.name) ||
             isProtectedBranchName(branch.displayName) ||
-            (branch.remoteBranch ? isProtectedBranchName(branch.remoteBranch) : false) ||
-            branch.branchCategory === 'main' ||
-            branch.branchCategory === 'develop');
+            (branch.remoteBranch
+                ? isProtectedBranchName(branch.remoteBranch)
+                : false) ||
+            branch.branchCategory === "main" ||
+            branch.branchCategory === "develop");
     }, [isProtectedBranchName]);
     const protectedBranchInfo = useMemo(() => {
         if (!selectedBranch) {
@@ -204,35 +215,43 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         };
     }, [selectedBranch, isProtectedSelection]);
     const handleSelect = useCallback((item) => {
-        const selection = item.type === 'remote'
+        const selection = item.type === "remote"
             ? {
                 name: toLocalBranchName(item.name),
                 displayName: item.name,
-                branchType: 'remote',
+                branchType: "remote",
                 branchCategory: item.branchType,
                 remoteBranch: item.name,
             }
             : {
                 name: item.name,
                 displayName: item.name,
-                branchType: 'local',
+                branchType: "local",
                 branchCategory: item.branchType,
             };
         const protectedSelected = isProtectedSelection(selection);
         setSelectedBranch(selection);
         setSelectedTool(null);
+        setSelectedModel(null);
         setCreationSourceBranch(null);
         if (protectedSelected) {
             setCleanupFooterMessage({
                 text: PROTECTED_BRANCH_WARNING,
-                color: 'yellow',
+                color: "yellow",
             });
         }
         else {
             setCleanupFooterMessage(null);
         }
-        navigateTo('branch-action-selector');
-    }, [isProtectedSelection, navigateTo, setCleanupFooterMessage, setCreationSourceBranch, setSelectedTool, toLocalBranchName]);
+        navigateTo("branch-action-selector");
+    }, [
+        isProtectedSelection,
+        navigateTo,
+        setCleanupFooterMessage,
+        setCreationSourceBranch,
+        setSelectedTool,
+        toLocalBranchName,
+    ]);
     // Handle navigation
     const handleNavigate = useCallback((screen) => {
         navigateTo(screen);
@@ -241,14 +260,20 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         setSelectedBranch({
             name: worktree.branch,
             displayName: worktree.branch,
-            branchType: 'local',
+            branchType: "local",
             branchCategory: inferBranchCategory(worktree.branch),
         });
         setSelectedTool(null);
+        setSelectedModel(null);
         setCreationSourceBranch(null);
         setCleanupFooterMessage(null);
-        navigateTo('ai-tool-selector');
-    }, [inferBranchCategory, navigateTo, setCleanupFooterMessage, setCreationSourceBranch]);
+        navigateTo("ai-tool-selector");
+    }, [
+        inferBranchCategory,
+        navigateTo,
+        setCleanupFooterMessage,
+        setCreationSourceBranch,
+    ]);
     // Handle branch action selection
     const handleProtectedBranchSwitch = useCallback(async () => {
         if (!selectedBranch) {
@@ -257,12 +282,12 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         try {
             setCleanupFooterMessage({
                 text: `Preparing root branch '${selectedBranch.displayName ?? selectedBranch.name}'...`,
-                color: 'cyan',
+                color: "cyan",
             });
             const repoRoot = await getRepositoryRoot();
             const remoteRef = selectedBranch.remoteBranch ??
-                (selectedBranch.branchType === 'remote'
-                    ? selectedBranch.displayName ?? selectedBranch.name
+                (selectedBranch.branchType === "remote"
+                    ? (selectedBranch.displayName ?? selectedBranch.name)
                     : null);
             const result = await switchToProtectedBranch({
                 branchName: selectedBranch.name,
@@ -270,43 +295,43 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
                 remoteRef: remoteRef ?? null,
             });
             let successMessage = `'${selectedBranch.displayName ?? selectedBranch.name}' will use the repository root.`;
-            if (result === 'remote') {
+            if (result === "remote") {
                 successMessage = `Created a local tracking branch for '${selectedBranch.displayName ?? selectedBranch.name}' and switched to the protected branch.`;
             }
-            else if (result === 'local') {
+            else if (result === "local") {
                 successMessage = `Checked out '${selectedBranch.displayName ?? selectedBranch.name}' in the repository root.`;
             }
             setCleanupFooterMessage({
                 text: successMessage,
-                color: 'green',
+                color: "green",
             });
             refresh();
-            navigateTo('ai-tool-selector');
+            navigateTo("ai-tool-selector");
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             setCleanupFooterMessage({
                 text: `Failed to switch root branch: ${message}`,
-                color: 'red',
+                color: "red",
             });
-            console.error('Failed to switch protected branch:', error);
+            console.error("Failed to switch protected branch:", error);
         }
-    }, [
-        navigateTo,
-        refresh,
-        selectedBranch,
-        setCleanupFooterMessage,
-    ]);
+    }, [navigateTo, refresh, selectedBranch, setCleanupFooterMessage]);
     const handleUseExistingBranch = useCallback(() => {
         if (selectedBranch && isProtectedSelection(selectedBranch)) {
             void handleProtectedBranchSwitch();
             return;
         }
-        navigateTo('ai-tool-selector');
-    }, [handleProtectedBranchSwitch, isProtectedSelection, navigateTo, selectedBranch]);
+        navigateTo("ai-tool-selector");
+    }, [
+        handleProtectedBranchSwitch,
+        isProtectedSelection,
+        navigateTo,
+        selectedBranch,
+    ]);
     const handleCreateNewBranch = useCallback(() => {
         setCreationSourceBranch(selectedBranch);
-        navigateTo('branch-creator');
+        navigateTo("branch-creator");
     }, [navigateTo, selectedBranch]);
     // Handle quit
     const handleQuit = useCallback(() => {
@@ -332,16 +357,17 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
             setSelectedBranch({
                 name: branchName,
                 displayName: branchName,
-                branchType: 'local',
+                branchType: "local",
                 branchCategory: inferBranchCategory(branchName),
             });
             setSelectedTool(null);
+            setSelectedModel(null);
             setCleanupFooterMessage(null);
-            navigateTo('ai-tool-selector');
+            navigateTo("ai-tool-selector");
         }
         catch (error) {
             // On error, go back to branch list
-            console.error('Failed to create branch:', error);
+            console.error("Failed to create branch:", error);
             goBack();
             refresh();
         }
@@ -382,7 +408,10 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         setCleanupInputLocked(true);
         setCleanupIndicators({});
         const initialFrame = getSpinnerFrame(0);
-        setCleanupFooterMessage({ text: `Processing... ${initialFrame}`, color: 'cyan' });
+        setCleanupFooterMessage({
+            text: `Processing... ${initialFrame}`,
+            color: "cyan",
+        });
         setCleanupProcessingBranch(null);
         spinnerFrameIndexRef.current = 0;
         setSpinnerFrameIndex(0);
@@ -393,7 +422,7 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             setCleanupIndicators({});
-            setCleanupFooterMessage({ text: `❌ ${message}`, color: 'red' });
+            setCleanupFooterMessage({ text: `❌ ${message}`, color: "red" });
             setCleanupInputLocked(false);
             completionTimerRef.current = setTimeout(() => {
                 setCleanupFooterMessage(null);
@@ -403,7 +432,10 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         }
         if (targets.length === 0) {
             setCleanupIndicators({});
-            setCleanupFooterMessage({ text: '✅ Nothing to clean up.', color: 'green' });
+            setCleanupFooterMessage({
+                text: "✅ Nothing to clean up.",
+                color: "green",
+            });
             setCleanupInputLocked(false);
             completionTimerRef.current = setTimeout(() => {
                 setCleanupFooterMessage(null);
@@ -414,8 +446,8 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         // Reset hidden branches that may already be gone
         setHiddenBranches((prev) => prev.filter((name) => targets.find((t) => t.branch === name) === undefined));
         const initialIndicators = targets.reduce((acc, target, index) => {
-            const icon = index === 0 ? getSpinnerFrame(0) : '⏳';
-            const color = index === 0 ? 'cyan' : 'yellow';
+            const icon = index === 0 ? getSpinnerFrame(0) : "⏳";
+            const color = index === 0 ? "cyan" : "yellow";
             acc[target.branch] = { icon, color };
             return acc;
         }, {});
@@ -424,7 +456,10 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
         setCleanupProcessingBranch(firstTarget ? firstTarget.branch : null);
         spinnerFrameIndexRef.current = 0;
         setSpinnerFrameIndex(0);
-        setCleanupFooterMessage({ text: `Processing... ${getSpinnerFrame(0)}`, color: 'cyan' });
+        setCleanupFooterMessage({
+            text: `Processing... ${getSpinnerFrame(0)}`,
+            color: "cyan",
+        });
         for (let index = 0; index < targets.length; index += 1) {
             const currentTarget = targets[index];
             if (!currentTarget) {
@@ -436,59 +471,79 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
             setSpinnerFrameIndex(0);
             setCleanupIndicators((prev) => {
                 const updated = { ...prev };
-                updated[target.branch] = { icon: getSpinnerFrame(0), color: 'cyan' };
+                updated[target.branch] = { icon: getSpinnerFrame(0), color: "cyan" };
                 for (const pending of targets.slice(index + 1)) {
                     const current = updated[pending.branch];
-                    if (!current || current.icon !== '⏳') {
-                        updated[pending.branch] = { icon: '⏳', color: 'yellow' };
+                    if (!current || current.icon !== "⏳") {
+                        updated[pending.branch] = { icon: "⏳", color: "yellow" };
                     }
                 }
                 return updated;
             });
             const shouldSkip = target.hasUncommittedChanges ||
                 target.hasUnpushedCommits ||
-                (target.cleanupType === 'worktree-and-branch' && (!target.worktreePath || target.isAccessible === false));
+                (target.cleanupType === "worktree-and-branch" &&
+                    (!target.worktreePath || target.isAccessible === false));
             if (shouldSkip) {
                 setCleanupIndicators((prev) => ({
                     ...prev,
-                    [target.branch]: { icon: '⏭️', color: 'yellow' },
+                    [target.branch]: { icon: "⏭️", color: "yellow" },
                 }));
                 setCleanupProcessingBranch(null);
                 continue;
             }
             try {
-                if (target.cleanupType === 'worktree-and-branch' && target.worktreePath) {
+                if (target.cleanupType === "worktree-and-branch" &&
+                    target.worktreePath) {
                     await removeWorktree(target.worktreePath, true);
                 }
                 await deleteBranch(target.branch, true);
                 succeededBranches.push(target.branch);
                 setCleanupIndicators((prev) => ({
                     ...prev,
-                    [target.branch]: { icon: '✅', color: 'green' },
+                    [target.branch]: { icon: "✅", color: "green" },
                 }));
             }
             catch {
-                const icon = '❌';
+                const icon = "❌";
                 setCleanupIndicators((prev) => ({
                     ...prev,
-                    [target.branch]: { icon, color: 'red' },
+                    [target.branch]: { icon, color: "red" },
                 }));
             }
             setCleanupProcessingBranch(null);
         }
         setCleanupProcessingBranch(null);
         setCleanupInputLocked(false);
-        setCleanupFooterMessage({ text: 'Cleanup completed. Finalizing...', color: 'green' });
-        const holdDuration = typeof process !== 'undefined' && process.env?.NODE_ENV === 'test'
+        setCleanupFooterMessage({
+            text: "Cleanup completed. Finalizing...",
+            color: "green",
+        });
+        const holdDuration = typeof process !== "undefined" && process.env?.NODE_ENV === "test"
             ? 0
             : COMPLETION_HOLD_DURATION_MS;
         completionTimerRef.current = setTimeout(resetAfterWait, holdDuration);
-    }, [cleanupInputLocked, deleteBranch, getMergedPRWorktrees, refresh, removeWorktree]);
+    }, [
+        cleanupInputLocked,
+        deleteBranch,
+        getMergedPRWorktrees,
+        refresh,
+        removeWorktree,
+    ]);
     // Handle AI tool selection
     const handleToolSelect = useCallback((tool) => {
         setSelectedTool(tool);
-        navigateTo('execution-mode-selector');
-    }, [navigateTo]);
+        setSelectedModel(lastModelByTool[tool] ?? null);
+        navigateTo("model-selector");
+    }, [lastModelByTool, navigateTo]);
+    const handleModelSelect = useCallback((selection) => {
+        setSelectedModel(selection);
+        setLastModelByTool((prev) => ({
+            ...prev,
+            ...(selectedTool ? { [selectedTool]: selection } : {}),
+        }));
+        navigateTo("execution-mode-selector");
+    }, [navigateTo, selectedTool]);
     // Handle session selection
     const handleSessionSelect = useCallback((_session) => {
         // TODO: Load selected session and navigate to next screen
@@ -499,6 +554,10 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
     const handleModeSelect = useCallback((result) => {
         // All selections complete - exit with result
         if (selectedBranch && selectedTool) {
+            const defaultModel = getDefaultModelOption(selectedTool);
+            const resolvedModel = selectedModel?.model ?? defaultModel?.id ?? null;
+            const resolvedInference = selectedModel?.inferenceLevel ??
+                getDefaultInferenceForModel(defaultModel ?? undefined);
             const payload = {
                 branch: selectedBranch.name,
                 displayName: selectedBranch.displayName,
@@ -506,6 +565,10 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
                 tool: selectedTool,
                 mode: result.mode,
                 skipPermissions: result.skipPermissions,
+                ...(resolvedModel !== undefined ? { model: resolvedModel } : {}),
+                ...(resolvedInference !== undefined
+                    ? { inferenceLevel: resolvedInference }
+                    : {}),
                 ...(selectedBranch.remoteBranch
                     ? { remoteBranch: selectedBranch.remoteBranch }
                     : {}),
@@ -513,24 +576,32 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
             onExit(payload);
             exit();
         }
-    }, [selectedBranch, selectedTool, onExit, exit]);
+    }, [
+        selectedBranch,
+        selectedTool,
+        selectedModel,
+        onExit,
+        exit,
+        getDefaultModelOption,
+        getDefaultInferenceForModel,
+    ]);
     // Render screen based on currentScreen
     const renderScreen = () => {
         switch (currentScreen) {
-            case 'branch-list':
+            case "branch-list":
                 return (React.createElement(BranchListScreen, { branches: branchItems, stats: stats, onSelect: handleSelect, onNavigate: handleNavigate, onQuit: handleQuit, onCleanupCommand: handleCleanupCommand, onRefresh: refresh, loading: loading, error: error, lastUpdated: lastUpdated, loadingIndicatorDelay: loadingIndicatorDelay, cleanupUI: {
                         indicators: cleanupIndicators,
                         footerMessage: cleanupFooterMessage,
                         inputLocked: cleanupInputLocked,
                     }, version: version, workingDirectory: workingDirectory }));
-            case 'worktree-manager':
+            case "worktree-manager":
                 return (React.createElement(WorktreeManagerScreen, { worktrees: worktreeItems, onBack: goBack, onSelect: handleWorktreeSelect, version: version }));
-            case 'branch-creator':
+            case "branch-creator":
                 return (React.createElement(BranchCreatorScreen, { onBack: goBack, onCreate: handleCreate, baseBranch: baseBranchLabel, version: version }));
-            case 'branch-action-selector': {
+            case "branch-action-selector": {
                 const isProtected = Boolean(protectedBranchInfo);
                 const baseProps = {
-                    selectedBranch: selectedBranch?.displayName ?? '',
+                    selectedBranch: selectedBranch?.displayName ?? "",
                     onUseExisting: handleUseExistingBranch,
                     onCreateNew: handleCreateNewBranch,
                     onBack: goBack,
@@ -541,12 +612,18 @@ export function App({ onExit, loadingIndicatorDelay = 300 }) {
                 }
                 return React.createElement(BranchActionSelectorScreen, { ...baseProps });
             }
-            case 'ai-tool-selector':
-                return React.createElement(AIToolSelectorScreen, { onBack: goBack, onSelect: handleToolSelect, version: version });
-            case 'session-selector':
+            case "ai-tool-selector":
+                return (React.createElement(AIToolSelectorScreen, { onBack: goBack, onSelect: handleToolSelect, version: version }));
+            case "model-selector":
+                if (!selectedTool) {
+                    goBack();
+                    return null;
+                }
+                return (React.createElement(ModelSelectorScreen, { tool: selectedTool, onBack: goBack, onSelect: handleModelSelect, version: version, initialSelection: selectedModel }));
+            case "session-selector":
                 // TODO: Implement session data fetching
                 return (React.createElement(SessionSelectorScreen, { sessions: [], onBack: goBack, onSelect: handleSessionSelect, version: version }));
-            case 'execution-mode-selector':
+            case "execution-mode-selector":
                 return (React.createElement(ExecutionModeSelectorScreen, { onBack: goBack, onSelect: handleModeSelect, version: version }));
             default:
                 return (React.createElement(BranchListScreen, { branches: branchItems, stats: stats, onSelect: handleSelect, onNavigate: handleNavigate, onQuit: handleQuit, onRefresh: refresh, loading: loading, error: error, lastUpdated: lastUpdated, loadingIndicatorDelay: loadingIndicatorDelay, version: version, workingDirectory: workingDirectory }));