Merge remote-tracking branch 'upstream/v0.14.0rc' into feature/unified-sidebar

apps/ui/src/components/ui/markdown.tsx

@@ -1,13 +1,97 @@
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { Components } from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
+import remarkGfm from 'remark-gfm';
 import { cn } from '@/lib/utils';
+import { Square, CheckSquare } from 'lucide-react';
 
 interface MarkdownProps {
   children: string;
   className?: string;
 }
 
+/**
+ * Renders a tasks code block as a proper task list with checkboxes
+ */
+function TasksBlock({ content }: { content: string }) {
+  const lines = content.split('\n');
+
+  return (
+    <div className="my-4 space-y-1">
+      {lines.map((line, idx) => {
+        const trimmed = line.trim();
+
+        // Check for phase/section headers (## Phase 1: ...)
+        const headerMatch = trimmed.match(/^##\s+(.+)$/);
+        if (headerMatch) {
+          return (
+            <div key={idx} className="text-foreground font-semibold mt-4 mb-2 text-sm">
+              {headerMatch[1]}
+            </div>
+          );
+        }
+
+        // Check for task items (- [ ] or - [x])
+        const taskMatch = trimmed.match(/^-\s*\[([ xX])\]\s*(.+)$/);
+        if (taskMatch) {
+          const isChecked = taskMatch[1].toLowerCase() === 'x';
+          const taskText = taskMatch[2];
+
+          return (
+            <div key={idx} className="flex items-start gap-2 py-1">
+              {isChecked ? (
+                <CheckSquare className="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0" />
+              ) : (
+                <Square className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+              )}
+              <span
+                className={cn(
+                  'text-sm',
+                  isChecked ? 'text-muted-foreground line-through' : 'text-foreground-secondary'
+                )}
+              >
+                {taskText}
+              </span>
+            </div>
+          );
+        }
+
+        // Empty lines
+        if (!trimmed) {
+          return <div key={idx} className="h-2" />;
+        }
+
+        // Other content (render as-is)
+        return (
+          <div key={idx} className="text-sm text-foreground-secondary">
+            {trimmed}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Custom components for ReactMarkdown
+ */
+const markdownComponents: Components = {
+  // Handle code blocks - special case for 'tasks' language
+  code({ className, children }) {
+    const match = /language-(\w+)/.exec(className || '');
+    const language = match ? match[1] : '';
+    const content = String(children).replace(/\n$/, '');
+
+    // Special handling for tasks code blocks
+    if (language === 'tasks') {
+      return <TasksBlock content={content} />;
+    }
+
+    // Regular code (inline or block)
+    return <code className={className}>{children}</code>;
+  },
+};
+
 /**
  * Reusable Markdown component for rendering markdown content
  * Theme-aware styling that adapts to all predefined themes
@@ -42,10 +126,20 @@ export function Markdown({ children, className }: MarkdownProps) {
         '[&_hr]:border-border [&_hr]:my-4',
         // Images
         '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-2 [&_img]:border [&_img]:border-border',
+        // Tables
+        '[&_table]:w-full [&_table]:border-collapse [&_table]:my-4',
+        '[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:text-foreground [&_th]:font-semibold',
+        '[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:text-foreground-secondary',
         className
       )}
     >
-      <ReactMarkdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>{children}</ReactMarkdown>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+        components={markdownComponents}
+      >
+        {children}
+      </ReactMarkdown>
     </div>
   );
 }

apps/ui/src/components/ui/provider-icon.tsx

@@ -395,6 +395,7 @@ export const PROVIDER_ICON_COMPONENTS: Record<
   cursor: CursorIcon,
   codex: OpenAIIcon,
   opencode: OpenCodeIcon,
+  gemini: GeminiIcon,
 };
 
 /**

apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx

@@ -136,8 +136,9 @@ export const KanbanCard = memo(function KanbanCard({
   });
 
   // Make the card a drop target for creating dependency links
-  // Only backlog cards can be link targets (to avoid complexity with running features)
-  const isDroppable = !isOverlay && feature.status === 'backlog' && !isSelectionMode;
+  // All non-completed cards can be link targets to allow flexible dependency creation
+  // (completed features are excluded as they're already done)
+  const isDroppable = !isOverlay && feature.status !== 'completed' && !isSelectionMode;
   const { setNodeRef: setDroppableRef, isOver } = useDroppable({
     id: `card-drop-${feature.id}`,
     disabled: !isDroppable,

apps/ui/src/components/views/board-view/dialogs/dependency-link-dialog.tsx

@@ -12,6 +12,8 @@ import { Button } from '@/components/ui/button';
 import { ArrowDown, ArrowUp, Link2, X } from 'lucide-react';
 import type { Feature } from '@/store/app-store';
 import { cn } from '@/lib/utils';
+import { StatusBadge } from '../components';
+import type { FeatureStatusWithPipeline } from '@automaker/types';
 
 export type DependencyLinkType = 'parent' | 'child';
 
@@ -57,7 +59,10 @@ export function DependencyLinkDialog({
         <div className="py-4 space-y-4">
           {/* Dragged feature */}
           <div className="p-3 rounded-lg border bg-muted/30">
-            <div className="text-xs text-muted-foreground mb-1">Dragged Feature</div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs text-muted-foreground">Dragged Feature</span>
+              <StatusBadge status={draggedFeature.status as FeatureStatusWithPipeline} size="sm" />
+            </div>
             <div className="text-sm font-medium line-clamp-3 break-words">
               {draggedFeature.description}
             </div>
@@ -71,7 +76,10 @@ export function DependencyLinkDialog({
 
           {/* Target feature */}
           <div className="p-3 rounded-lg border bg-muted/30">
-            <div className="text-xs text-muted-foreground mb-1">Target Feature</div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs text-muted-foreground">Target Feature</span>
+              <StatusBadge status={targetFeature.status as FeatureStatusWithPipeline} size="sm" />
+            </div>
             <div className="text-sm font-medium line-clamp-3 break-words">
               {targetFeature.description}
             </div>

apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
-import { Markdown } from '@/components/ui/markdown';
+import { PlanContentViewer } from './plan-content-viewer';
 import { Label } from '@/components/ui/label';
 import { Feature } from '@/store/app-store';
 import { Check, RefreshCw, Edit2, Eye } from 'lucide-react';
@@ -42,6 +42,10 @@ export function PlanApprovalDialog({
   const [editedPlan, setEditedPlan] = useState(planContent);
   const [showRejectFeedback, setShowRejectFeedback] = useState(false);
   const [rejectFeedback, setRejectFeedback] = useState('');
+  const [showFullDescription, setShowFullDescription] = useState(false);
+
+  const DESCRIPTION_LIMIT = 250;
+  const TITLE_LIMIT = 50;
 
   // Reset state when dialog opens or plan content changes
   useEffect(() => {
@@ -50,6 +54,7 @@ export function PlanApprovalDialog({
       setIsEditMode(false);
       setShowRejectFeedback(false);
       setRejectFeedback('');
+      setShowFullDescription(false);
     }
   }, [open, planContent]);
 
@@ -82,15 +87,31 @@ export function PlanApprovalDialog({
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="max-w-4xl" data-testid="plan-approval-dialog">
         <DialogHeader>
-          <DialogTitle>{viewOnly ? 'View Plan' : 'Review Plan'}</DialogTitle>
+          <DialogTitle>
+            {viewOnly ? 'View Plan' : 'Review Plan'}
+            {feature?.title && feature.title.length <= TITLE_LIMIT && (
+              <span className="font-normal text-muted-foreground"> - {feature.title}</span>
+            )}
+          </DialogTitle>
           <DialogDescription>
             {viewOnly
               ? 'View the generated plan for this feature.'
               : 'Review the generated plan before implementation begins.'}
             {feature && (
               <span className="block mt-2 text-primary">
-                Feature: {feature.description.slice(0, 150)}
-                {feature.description.length > 150 ? '...' : ''}
+                Feature:{' '}
+                {showFullDescription || feature.description.length <= DESCRIPTION_LIMIT
+                  ? feature.description
+                  : `${feature.description.slice(0, DESCRIPTION_LIMIT)}...`}
+                {feature.description.length > DESCRIPTION_LIMIT && (
+                  <button
+                    type="button"
+                    onClick={() => setShowFullDescription(!showFullDescription)}
+                    className="ml-1 text-muted-foreground hover:text-foreground underline text-sm"
+                  >
+                    {showFullDescription ? 'show less' : 'show more'}
+                  </button>
+                )}
               </span>
             )}
           </DialogDescription>
@@ -135,9 +156,7 @@ export function PlanApprovalDialog({
                 disabled={isLoading}
               />
             ) : (
-              <div className="p-4 overflow-auto">
-                <Markdown>{editedPlan || 'No plan content available.'}</Markdown>
-              </div>
+              <PlanContentViewer content={editedPlan || ''} className="p-4" />
             )}
           </div>
 

apps/ui/src/components/views/board-view/dialogs/plan-content-viewer.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, Wrench } from 'lucide-react';
+import { Markdown } from '@/components/ui/markdown';
+import { cn } from '@/lib/utils';
+
+interface ToolCall {
+  tool: string;
+  input: string;
+}
+
+interface ParsedPlanContent {
+  toolCalls: ToolCall[];
+  planMarkdown: string;
+}
+
+/**
+ * Parses plan content to separate tool calls from the actual plan/specification markdown.
+ * Tool calls appear at the beginning (exploration phase), followed by the plan markdown.
+ */
+function parsePlanContent(content: string): ParsedPlanContent {
+  const lines = content.split('\n');
+  const toolCalls: ToolCall[] = [];
+  let planStartIndex = -1;
+
+  let currentTool: string | null = null;
+  let currentInput: string[] = [];
+  let inJsonBlock = false;
+  let braceDepth = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    // Check if this line starts the actual plan/spec (markdown heading)
+    // Plans typically start with # or ## headings
+    if (
+      !inJsonBlock &&
+      (trimmed.match(/^#{1,3}\s+\S/) || // Markdown headings (including emoji like ## ✅ Plan)
+        trimmed.startsWith('---') || // Horizontal rule often used as separator
+        trimmed.match(/^\*\*\S/)) // Bold text starting a section
+    ) {
+      // Flush any active tool call before starting the plan
+      if (currentTool && currentInput.length > 0) {
+        toolCalls.push({
+          tool: currentTool,
+          input: currentInput.join('\n').trim(),
+        });
+        currentTool = null;
+        currentInput = [];
+      }
+      planStartIndex = i;
+      break;
+    }
+
+    // Detect tool call start (supports tool names with dots/hyphens like web.run, file-read)
+    const toolMatch = trimmed.match(/^(?:🔧\s*)?Tool:\s*([^\s]+)/i);
+    if (toolMatch && !inJsonBlock) {
+      // Save previous tool call if exists
+      if (currentTool && currentInput.length > 0) {
+        toolCalls.push({
+          tool: currentTool,
+          input: currentInput.join('\n').trim(),
+        });
+      }
+      currentTool = toolMatch[1];
+      currentInput = [];
+      continue;
+    }
+
+    // Detect Input: line
+    if (trimmed.startsWith('Input:') && currentTool) {
+      const inputContent = trimmed.replace(/^Input:\s*/, '');
+      if (inputContent) {
+        currentInput.push(inputContent);
+        // Check if JSON starts
+        if (inputContent.includes('{')) {
+          braceDepth =
+            (inputContent.match(/\{/g) || []).length - (inputContent.match(/\}/g) || []).length;
+          inJsonBlock = braceDepth > 0;
+        }
+      }
+      continue;
+    }
+
+    // If we're collecting input for a tool
+    if (currentTool) {
+      if (inJsonBlock) {
+        currentInput.push(line);
+        braceDepth += (trimmed.match(/\{/g) || []).length - (trimmed.match(/\}/g) || []).length;
+        if (braceDepth <= 0) {
+          inJsonBlock = false;
+          // Save tool call
+          toolCalls.push({
+            tool: currentTool,
+            input: currentInput.join('\n').trim(),
+          });
+          currentTool = null;
+          currentInput = [];
+        }
+      } else if (trimmed.startsWith('{')) {
+        // JSON block starting
+        currentInput.push(line);
+        braceDepth = (trimmed.match(/\{/g) || []).length - (trimmed.match(/\}/g) || []).length;
+        inJsonBlock = braceDepth > 0;
+        if (!inJsonBlock) {
+          // Single-line JSON
+          toolCalls.push({
+            tool: currentTool,
+            input: currentInput.join('\n').trim(),
+          });
+          currentTool = null;
+          currentInput = [];
+        }
+      } else if (trimmed === '') {
+        // Empty line might end the tool call section
+        if (currentInput.length > 0) {
+          toolCalls.push({
+            tool: currentTool,
+            input: currentInput.join('\n').trim(),
+          });
+          currentTool = null;
+          currentInput = [];
+        }
+      }
+    }
+  }
+
+  // Save any remaining tool call
+  if (currentTool && currentInput.length > 0) {
+    toolCalls.push({
+      tool: currentTool,
+      input: currentInput.join('\n').trim(),
+    });
+  }
+
+  // Extract plan markdown
+  let planMarkdown = '';
+  if (planStartIndex >= 0) {
+    planMarkdown = lines.slice(planStartIndex).join('\n').trim();
+  } else if (toolCalls.length === 0) {
+    // No tool calls found, treat entire content as markdown
+    planMarkdown = content.trim();
+  }
+
+  return { toolCalls, planMarkdown };
+}
+
+interface PlanContentViewerProps {
+  content: string;
+  className?: string;
+}
+
+export function PlanContentViewer({ content, className }: PlanContentViewerProps) {
+  const [showToolCalls, setShowToolCalls] = useState(false);
+
+  const { toolCalls, planMarkdown } = useMemo(() => parsePlanContent(content), [content]);
+
+  if (!content || !content.trim()) {
+    return (
+      <div className={cn('text-muted-foreground text-center py-8', className)}>
+        No plan content available.
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Tool Calls Section - Collapsed by default */}
+      {toolCalls.length > 0 && (
+        <div className="border border-border rounded-lg overflow-hidden">
+          <button
+            onClick={() => setShowToolCalls(!showToolCalls)}
+            className="w-full px-4 py-2 flex items-center gap-2 bg-muted/30 hover:bg-muted/50 transition-colors text-left"
+          >
+            {showToolCalls ? (
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="w-4 h-4 text-muted-foreground" />
+            )}
+            <Wrench className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">
+              Exploration ({toolCalls.length} tool call{toolCalls.length !== 1 ? 's' : ''})
+            </span>
+          </button>
+
+          {showToolCalls && (
+            <div className="p-3 space-y-2 bg-muted/10 max-h-[300px] overflow-y-auto">
+              {toolCalls.map((tc, idx) => (
+                <div key={idx} className="text-xs font-mono">
+                  <div className="text-cyan-400 mb-1">Tool: {tc.tool}</div>
+                  <pre className="bg-muted/50 rounded p-2 overflow-x-auto text-foreground-secondary whitespace-pre-wrap">
+                    {tc.input}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Plan/Specification Content - Main focus */}
+      {planMarkdown ? (
+        <div className="min-h-[200px]">
+          <Markdown>{planMarkdown}</Markdown>
+        </div>
+      ) : toolCalls.length > 0 ? (
+        <div className="text-muted-foreground text-center py-8 border border-dashed border-border rounded-lg">
+          <p className="text-sm">No specification content found.</p>
+          <p className="text-xs mt-1">The plan appears to only contain exploration tool calls.</p>
+        </div>
+      ) : null}
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/hooks/use-board-actions.ts

@@ -123,9 +123,34 @@ export function useBoardActions({
     }) => {
       const workMode = featureData.workMode || 'current';
 
+      // For auto worktree mode, we need a title for the branch name.
+      // If no title provided, generate one from the description first.
+      let titleForBranch = featureData.title;
+      let titleWasGenerated = false;
+
+      if (workMode === 'auto' && !featureData.title.trim() && featureData.description.trim()) {
+        // Generate title first so we can use it for the branch name
+        const api = getElectronAPI();
+        if (api?.features?.generateTitle) {
+          try {
+            const result = await api.features.generateTitle(featureData.description);
+            if (result.success && result.title) {
+              titleForBranch = result.title;
+              titleWasGenerated = true;
+            }
+          } catch (error) {
+            logger.error('Error generating title for branch name:', error);
+          }
+        }
+        // If title generation failed, fall back to first part of description
+        if (!titleForBranch.trim()) {
+          titleForBranch = featureData.description.substring(0, 60);
+        }
+      }
+
       // Determine final branch name based on work mode:
       // - 'current': Use current worktree's branch (or undefined if on main)
-      // - 'auto': Auto-generate branch name based on current branch
+      // - 'auto': Auto-generate branch name based on feature title
       // - 'custom': Use the provided branch name
       let finalBranchName: string | undefined;
 
@@ -134,13 +159,16 @@ export function useBoardActions({
         // This ensures features created on a non-main worktree are associated with that worktree
         finalBranchName = currentWorktreeBranch || undefined;
       } else if (workMode === 'auto') {
-        // Auto-generate a branch name based on primary branch (main/master) and timestamp
-        // Always use primary branch to avoid nested feature/feature/... paths
-        const baseBranch =
-          (currentProject?.path ? getPrimaryWorktreeBranch(currentProject.path) : null) || 'main';
-        const timestamp = Date.now();
+        // Auto-generate a branch name based on feature title and timestamp
+        // Create a slug from the title: lowercase, replace non-alphanumeric with hyphens
+        const titleSlug =
+          titleForBranch
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric sequences with hyphens
+            .substring(0, 50) // Limit length first
+            .replace(/^-|-$/g, '') || 'untitled'; // Then remove leading/trailing hyphens, with fallback
         const randomSuffix = Math.random().toString(36).substring(2, 6);
-        finalBranchName = `feature/${baseBranch}-${timestamp}-${randomSuffix}`;
+        finalBranchName = `feature/${titleSlug}-${randomSuffix}`;
       } else {
         // Custom mode - use provided branch name
         finalBranchName = featureData.branchName || undefined;
@@ -183,12 +211,13 @@ export function useBoardActions({
         }
       }
 
-      // Check if we need to generate a title
-      const needsTitleGeneration = !featureData.title.trim() && featureData.description.trim();
+      // Check if we need to generate a title (only if we didn't already generate it for the branch name)
+      const needsTitleGeneration =
+        !titleWasGenerated && !featureData.title.trim() && featureData.description.trim();
 
       const newFeatureData = {
         ...featureData,
-        title: featureData.title,
+        title: titleWasGenerated ? titleForBranch : featureData.title,
         titleGenerating: needsTitleGeneration,
         status: 'backlog' as const,
         branchName: finalBranchName,
@@ -255,7 +284,6 @@ export function useBoardActions({
       projectPath,
       onWorktreeCreated,
       onWorktreeAutoSelect,
-      getPrimaryWorktreeBranch,
       features,
       currentWorktreeBranch,
     ]
@@ -287,6 +315,31 @@ export function useBoardActions({
     ) => {
       const workMode = updates.workMode || 'current';
 
+      // For auto worktree mode, we need a title for the branch name.
+      // If no title provided, generate one from the description first.
+      let titleForBranch = updates.title;
+      let titleWasGenerated = false;
+
+      if (workMode === 'auto' && !updates.title.trim() && updates.description.trim()) {
+        // Generate title first so we can use it for the branch name
+        const api = getElectronAPI();
+        if (api?.features?.generateTitle) {
+          try {
+            const result = await api.features.generateTitle(updates.description);
+            if (result.success && result.title) {
+              titleForBranch = result.title;
+              titleWasGenerated = true;
+            }
+          } catch (error) {
+            logger.error('Error generating title for branch name:', error);
+          }
+        }
+        // If title generation failed, fall back to first part of description
+        if (!titleForBranch.trim()) {
+          titleForBranch = updates.description.substring(0, 60);
+        }
+      }
+
       // Determine final branch name based on work mode
       let finalBranchName: string | undefined;
 
@@ -295,13 +348,21 @@ export function useBoardActions({
         // This ensures features updated on a non-main worktree are associated with that worktree
         finalBranchName = currentWorktreeBranch || undefined;
       } else if (workMode === 'auto') {
-        // Auto-generate a branch name based on primary branch (main/master) and timestamp
-        // Always use primary branch to avoid nested feature/feature/... paths
-        const baseBranch =
-          (currentProject?.path ? getPrimaryWorktreeBranch(currentProject.path) : null) || 'main';
-        const timestamp = Date.now();
-        const randomSuffix = Math.random().toString(36).substring(2, 6);
-        finalBranchName = `feature/${baseBranch}-${timestamp}-${randomSuffix}`;
+        // Preserve existing branch name if one exists (avoid orphaning worktrees on edit)
+        if (updates.branchName?.trim()) {
+          finalBranchName = updates.branchName;
+        } else {
+          // Auto-generate a branch name based on feature title
+          // Create a slug from the title: lowercase, replace non-alphanumeric with hyphens
+          const titleSlug =
+            titleForBranch
+              .toLowerCase()
+              .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric sequences with hyphens
+              .substring(0, 50) // Limit length first
+              .replace(/^-|-$/g, '') || 'untitled'; // Then remove leading/trailing hyphens, with fallback
+          const randomSuffix = Math.random().toString(36).substring(2, 6);
+          finalBranchName = `feature/${titleSlug}-${randomSuffix}`;
+        }
       } else {
         finalBranchName = updates.branchName || undefined;
       }
@@ -343,7 +404,7 @@ export function useBoardActions({
 
       const finalUpdates = {
         ...restUpdates,
-        title: updates.title,
+        title: titleWasGenerated ? titleForBranch : updates.title,
         branchName: finalBranchName,
       };
 
@@ -406,7 +467,6 @@ export function useBoardActions({
       setEditingFeature,
       currentProject,
       onWorktreeCreated,
-      getPrimaryWorktreeBranch,
       features,
       currentWorktreeBranch,
     ]

apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts

@@ -88,10 +88,10 @@ export function useBoardDragDrop({
           const targetFeature = features.find((f) => f.id === targetFeatureId);
           if (!targetFeature) return;
 
-          // Only allow linking backlog features (both must be in backlog)
-          if (draggedFeature.status !== 'backlog' || targetFeature.status !== 'backlog') {
+          // Don't allow linking completed features (they're already done)
+          if (draggedFeature.status === 'completed' || targetFeature.status === 'completed') {
             toast.error('Cannot link features', {
-              description: 'Both features must be in the backlog to create a dependency link.',
+              description: 'Completed features cannot be linked.',
             });
             return;
           }

apps/ui/src/components/views/board-view/shared/model-constants.ts

@@ -4,9 +4,16 @@ import {
   CURSOR_MODEL_MAP,
   CODEX_MODEL_MAP,
   OPENCODE_MODELS as OPENCODE_MODEL_CONFIGS,
+  GEMINI_MODEL_MAP,
 } from '@automaker/types';
 import { Brain, Zap, Scale, Cpu, Rocket, Sparkles } from 'lucide-react';
-import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  OpenCodeIcon,
+  GeminiIcon,
+} from '@/components/ui/provider-icon';
 
 export type ModelOption = {
   id: string; // All model IDs use canonical prefixed format (e.g., "claude-sonnet", "cursor-auto")
@@ -118,13 +125,29 @@ export const OPENCODE_MODELS: ModelOption[] = OPENCODE_MODEL_CONFIGS.map((config
 }));
 
 /**
- * All available models (Claude + Cursor + Codex + OpenCode)
+ * Gemini models derived from GEMINI_MODEL_MAP
+ * Model IDs already have 'gemini-' prefix (like Cursor models)
+ */
+export const GEMINI_MODELS: ModelOption[] = Object.entries(GEMINI_MODEL_MAP).map(
+  ([id, config]) => ({
+    id, // IDs already have gemini- prefix (e.g., 'gemini-2.5-flash')
+    label: config.label,
+    description: config.description,
+    badge: config.supportsThinking ? 'Thinking' : 'Speed',
+    provider: 'gemini' as ModelProvider,
+    hasThinking: config.supportsThinking,
+  })
+);
+
+/**
+ * All available models (Claude + Cursor + Codex + OpenCode + Gemini)
  */
 export const ALL_MODELS: ModelOption[] = [
   ...CLAUDE_MODELS,
   ...CURSOR_MODELS,
   ...CODEX_MODELS,
   ...OPENCODE_MODELS,
+  ...GEMINI_MODELS,
 ];
 
 export const THINKING_LEVELS: ThinkingLevel[] = ['none', 'low', 'medium', 'high', 'ultrathink'];
@@ -171,4 +194,5 @@ export const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: str
   Cursor: CursorIcon,
   Codex: OpenAIIcon,
   OpenCode: OpenCodeIcon,
+  Gemini: GeminiIcon,
 };

apps/ui/src/components/views/project-settings-view/commands-section.tsx

@@ -0,0 +1,316 @@
+import { useState, useEffect, useCallback, type KeyboardEvent } from 'react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Terminal, Save, RotateCcw, Info, X, Play, FlaskConical } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { useProjectSettings } from '@/hooks/queries';
+import { useUpdateProjectSettings } from '@/hooks/mutations';
+import type { Project } from '@/lib/electron';
+
+/** Preset dev server commands for quick selection */
+const DEV_SERVER_PRESETS = [
+  { label: 'npm run dev', command: 'npm run dev' },
+  { label: 'yarn dev', command: 'yarn dev' },
+  { label: 'pnpm dev', command: 'pnpm dev' },
+  { label: 'bun dev', command: 'bun dev' },
+  { label: 'npm start', command: 'npm start' },
+  { label: 'cargo watch', command: 'cargo watch -x run' },
+  { label: 'go run', command: 'go run .' },
+] as const;
+
+/** Preset test commands for quick selection */
+const TEST_PRESETS = [
+  { label: 'npm test', command: 'npm test' },
+  { label: 'yarn test', command: 'yarn test' },
+  { label: 'pnpm test', command: 'pnpm test' },
+  { label: 'bun test', command: 'bun test' },
+  { label: 'pytest', command: 'pytest' },
+  { label: 'cargo test', command: 'cargo test' },
+  { label: 'go test', command: 'go test ./...' },
+] as const;
+
+interface CommandsSectionProps {
+  project: Project;
+}
+
+export function CommandsSection({ project }: CommandsSectionProps) {
+  // Fetch project settings using TanStack Query
+  const { data: projectSettings, isLoading, isError } = useProjectSettings(project.path);
+
+  // Mutation hook for updating project settings
+  const updateSettingsMutation = useUpdateProjectSettings(project.path);
+
+  // Local state for the input fields
+  const [devCommand, setDevCommand] = useState('');
+  const [originalDevCommand, setOriginalDevCommand] = useState('');
+  const [testCommand, setTestCommand] = useState('');
+  const [originalTestCommand, setOriginalTestCommand] = useState('');
+
+  // Sync local state when project settings load or project changes
+  useEffect(() => {
+    // Reset local state when project changes to avoid showing stale values
+    setDevCommand('');
+    setOriginalDevCommand('');
+    setTestCommand('');
+    setOriginalTestCommand('');
+  }, [project.path]);
+
+  useEffect(() => {
+    if (projectSettings) {
+      const dev = projectSettings.devCommand || '';
+      const test = projectSettings.testCommand || '';
+      setDevCommand(dev);
+      setOriginalDevCommand(dev);
+      setTestCommand(test);
+      setOriginalTestCommand(test);
+    }
+  }, [projectSettings]);
+
+  // Check if there are unsaved changes
+  const hasDevChanges = devCommand !== originalDevCommand;
+  const hasTestChanges = testCommand !== originalTestCommand;
+  const hasChanges = hasDevChanges || hasTestChanges;
+  const isSaving = updateSettingsMutation.isPending;
+
+  // Save all commands
+  const handleSave = useCallback(() => {
+    const normalizedDevCommand = devCommand.trim();
+    const normalizedTestCommand = testCommand.trim();
+
+    updateSettingsMutation.mutate(
+      {
+        devCommand: normalizedDevCommand || null,
+        testCommand: normalizedTestCommand || null,
+      },
+      {
+        onSuccess: () => {
+          setDevCommand(normalizedDevCommand);
+          setOriginalDevCommand(normalizedDevCommand);
+          setTestCommand(normalizedTestCommand);
+          setOriginalTestCommand(normalizedTestCommand);
+        },
+      }
+    );
+  }, [devCommand, testCommand, updateSettingsMutation]);
+
+  // Reset to original values
+  const handleReset = useCallback(() => {
+    setDevCommand(originalDevCommand);
+    setTestCommand(originalTestCommand);
+  }, [originalDevCommand, originalTestCommand]);
+
+  // Use a preset command
+  const handleUseDevPreset = useCallback((command: string) => {
+    setDevCommand(command);
+  }, []);
+
+  const handleUseTestPreset = useCallback((command: string) => {
+    setTestCommand(command);
+  }, []);
+
+  // Clear commands
+  const handleClearDev = useCallback(() => {
+    setDevCommand('');
+  }, []);
+
+  const handleClearTest = useCallback(() => {
+    setTestCommand('');
+  }, []);
+
+  // Handle keyboard shortcuts (Enter to save)
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && hasChanges && !isSaving) {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [hasChanges, isSaving, handleSave]
+  );
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Terminal className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Project Commands</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure custom commands for development and testing.
+        </p>
+      </div>
+
+      <div className="p-6 space-y-8">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Spinner size="md" />
+          </div>
+        ) : isError ? (
+          <div className="flex items-center justify-center py-8 text-sm text-destructive">
+            Failed to load project settings. Please try again.
+          </div>
+        ) : (
+          <>
+            {/* Dev Server Command Section */}
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <Play className="w-4 h-4 text-brand-500" />
+                <h3 className="text-base font-medium text-foreground">Dev Server</h3>
+                {hasDevChanges && (
+                  <span className="text-xs text-amber-500 font-medium">(unsaved)</span>
+                )}
+              </div>
+
+              <div className="space-y-3 pl-6">
+                <div className="relative">
+                  <Input
+                    id="dev-command"
+                    value={devCommand}
+                    onChange={(e) => setDevCommand(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="e.g., npm run dev, yarn dev, cargo watch"
+                    className="font-mono text-sm pr-8"
+                    data-testid="dev-command-input"
+                  />
+                  {devCommand && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleClearDev}
+                      className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                      aria-label="Clear dev command"
+                    >
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground/80">
+                  Leave empty to auto-detect based on your package manager.
+                </p>
+
+                {/* Dev Presets */}
+                <div className="flex flex-wrap gap-1.5">
+                  {DEV_SERVER_PRESETS.map((preset) => (
+                    <Button
+                      key={preset.command}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleUseDevPreset(preset.command)}
+                      className="text-xs font-mono h-7 px-2"
+                    >
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Divider */}
+            <div className="border-t border-border/30" />
+
+            {/* Test Command Section */}
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <FlaskConical className="w-4 h-4 text-brand-500" />
+                <h3 className="text-base font-medium text-foreground">Test Runner</h3>
+                {hasTestChanges && (
+                  <span className="text-xs text-amber-500 font-medium">(unsaved)</span>
+                )}
+              </div>
+
+              <div className="space-y-3 pl-6">
+                <div className="relative">
+                  <Input
+                    id="test-command"
+                    value={testCommand}
+                    onChange={(e) => setTestCommand(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="e.g., npm test, pytest, cargo test"
+                    className="font-mono text-sm pr-8"
+                    data-testid="test-command-input"
+                  />
+                  {testCommand && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleClearTest}
+                      className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                      aria-label="Clear test command"
+                    >
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground/80">
+                  Leave empty to auto-detect based on your project structure.
+                </p>
+
+                {/* Test Presets */}
+                <div className="flex flex-wrap gap-1.5">
+                  {TEST_PRESETS.map((preset) => (
+                    <Button
+                      key={preset.command}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleUseTestPreset(preset.command)}
+                      className="text-xs font-mono h-7 px-2"
+                    >
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Auto-detection Info */}
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-accent/20 border border-border/30">
+              <Info className="w-4 h-4 text-brand-500 mt-0.5 shrink-0" />
+              <div className="text-xs text-muted-foreground">
+                <p className="font-medium text-foreground mb-1">Auto-detection</p>
+                <p>
+                  When no custom command is set, the system automatically detects your package
+                  manager and test framework based on project files (package.json, Cargo.toml,
+                  go.mod, etc.).
+                </p>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex items-center justify-end gap-2 pt-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleReset}
+                disabled={!hasChanges || isSaving}
+                className="gap-1.5"
+              >
+                <RotateCcw className="w-3.5 h-3.5" />
+                Reset
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSave}
+                disabled={!hasChanges || isSaving}
+                className="gap-1.5"
+              >
+                {isSaving ? <Spinner size="xs" /> : <Save className="w-3.5 h-3.5" />}
+                Save
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/project-settings-view/config/navigation.ts

@@ -6,7 +6,7 @@ import {
   AlertTriangle,
   Workflow,
   Database,
-  FlaskConical,
+  Terminal,
 } from 'lucide-react';
 import type { ProjectSettingsViewId } from '../hooks/use-project-settings-view';
 
@@ -19,7 +19,7 @@ export interface ProjectNavigationItem {
 export const PROJECT_SETTINGS_NAV_ITEMS: ProjectNavigationItem[] = [
   { id: 'identity', label: 'Identity', icon: User },
   { id: 'worktrees', label: 'Worktrees', icon: GitBranch },
-  { id: 'testing', label: 'Testing', icon: FlaskConical },
+  { id: 'commands', label: 'Commands', icon: Terminal },
   { id: 'theme', label: 'Theme', icon: Palette },
   { id: 'claude', label: 'Models', icon: Workflow },
   { id: 'data', label: 'Data', icon: Database },

apps/ui/src/components/views/project-settings-view/hooks/use-project-settings-view.ts

@@ -4,7 +4,7 @@ export type ProjectSettingsViewId =
   | 'identity'
   | 'theme'
   | 'worktrees'
-  | 'testing'
+  | 'commands'
   | 'claude'
   | 'data'
   | 'danger';

apps/ui/src/components/views/project-settings-view/index.ts

@@ -2,6 +2,6 @@ export { ProjectSettingsView } from './project-settings-view';
 export { ProjectIdentitySection } from './project-identity-section';
 export { ProjectThemeSection } from './project-theme-section';
 export { WorktreePreferencesSection } from './worktree-preferences-section';
-export { TestingSection } from './testing-section';
+export { CommandsSection } from './commands-section';
 export { useProjectSettingsView, type ProjectSettingsViewId } from './hooks';
 export { ProjectSettingsNavigation } from './components/project-settings-navigation';

apps/ui/src/components/views/project-settings-view/project-settings-view.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { ProjectIdentitySection } from './project-identity-section';
 import { ProjectThemeSection } from './project-theme-section';
 import { WorktreePreferencesSection } from './worktree-preferences-section';
-import { TestingSection } from './testing-section';
+import { CommandsSection } from './commands-section';
 import { ProjectModelsSection } from './project-models-section';
 import { DataManagementSection } from './data-management-section';
 import { DangerZoneSection } from '../settings-view/danger-zone/danger-zone-section';
@@ -87,8 +87,8 @@ export function ProjectSettingsView() {
         return <ProjectThemeSection project={currentProject} />;
       case 'worktrees':
         return <WorktreePreferencesSection project={currentProject} />;
-      case 'testing':
-        return <TestingSection project={currentProject} />;
+      case 'commands':
+        return <CommandsSection project={currentProject} />;
       case 'claude':
         return <ProjectModelsSection project={currentProject} />;
       case 'data':

apps/ui/src/components/views/project-settings-view/testing-section.tsx

@@ -1,223 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { FlaskConical, Save, RotateCcw, Info } from 'lucide-react';
-import { Spinner } from '@/components/ui/spinner';
-import { cn } from '@/lib/utils';
-import { getHttpApiClient } from '@/lib/http-api-client';
-import { toast } from 'sonner';
-import type { Project } from '@/lib/electron';
-
-interface TestingSectionProps {
-  project: Project;
-}
-
-export function TestingSection({ project }: TestingSectionProps) {
-  const [testCommand, setTestCommand] = useState('');
-  const [originalTestCommand, setOriginalTestCommand] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-
-  // Check if there are unsaved changes
-  const hasChanges = testCommand !== originalTestCommand;
-
-  // Load project settings when project changes
-  useEffect(() => {
-    let isCancelled = false;
-    const currentPath = project.path;
-
-    const loadProjectSettings = async () => {
-      setIsLoading(true);
-      try {
-        const httpClient = getHttpApiClient();
-        const response = await httpClient.settings.getProject(currentPath);
-
-        // Avoid updating state if component unmounted or project changed
-        if (isCancelled) return;
-
-        if (response.success && response.settings) {
-          const command = response.settings.testCommand || '';
-          setTestCommand(command);
-          setOriginalTestCommand(command);
-        }
-      } catch (error) {
-        if (!isCancelled) {
-          console.error('Failed to load project settings:', error);
-        }
-      } finally {
-        if (!isCancelled) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    loadProjectSettings();
-
-    return () => {
-      isCancelled = true;
-    };
-  }, [project.path]);
-
-  // Save test command
-  const handleSave = useCallback(async () => {
-    setIsSaving(true);
-    try {
-      const httpClient = getHttpApiClient();
-      const normalizedCommand = testCommand.trim();
-      const response = await httpClient.settings.updateProject(project.path, {
-        testCommand: normalizedCommand || undefined,
-      });
-
-      if (response.success) {
-        setTestCommand(normalizedCommand);
-        setOriginalTestCommand(normalizedCommand);
-        toast.success('Test command saved');
-      } else {
-        toast.error('Failed to save test command', {
-          description: response.error,
-        });
-      }
-    } catch (error) {
-      console.error('Failed to save test command:', error);
-      toast.error('Failed to save test command');
-    } finally {
-      setIsSaving(false);
-    }
-  }, [project.path, testCommand]);
-
-  // Reset to original value
-  const handleReset = useCallback(() => {
-    setTestCommand(originalTestCommand);
-  }, [originalTestCommand]);
-
-  // Use a preset command
-  const handleUsePreset = useCallback((command: string) => {
-    setTestCommand(command);
-  }, []);
-
-  return (
-    <div
-      className={cn(
-        'rounded-2xl overflow-hidden',
-        'border border-border/50',
-        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
-        'shadow-sm shadow-black/5'
-      )}
-    >
-      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
-        <div className="flex items-center gap-3 mb-2">
-          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-            <FlaskConical className="w-5 h-5 text-brand-500" />
-          </div>
-          <h2 className="text-lg font-semibold text-foreground tracking-tight">
-            Testing Configuration
-          </h2>
-        </div>
-        <p className="text-sm text-muted-foreground/80 ml-12">
-          Configure how tests are run for this project.
-        </p>
-      </div>
-
-      <div className="p-6 space-y-6">
-        {isLoading ? (
-          <div className="flex items-center justify-center py-8">
-            <Spinner size="md" />
-          </div>
-        ) : (
-          <>
-            {/* Test Command Input */}
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="test-command" className="text-foreground font-medium">
-                  Test Command
-                </Label>
-                {hasChanges && (
-                  <span className="text-xs text-amber-500 font-medium">(unsaved changes)</span>
-                )}
-              </div>
-              <Input
-                id="test-command"
-                value={testCommand}
-                onChange={(e) => setTestCommand(e.target.value)}
-                placeholder="e.g., npm test, yarn test, pytest, go test ./..."
-                className="font-mono text-sm"
-                data-testid="test-command-input"
-              />
-              <p className="text-xs text-muted-foreground/80 leading-relaxed">
-                The command to run tests for this project. If not specified, the test runner will
-                auto-detect based on your project structure (package.json, Cargo.toml, go.mod,
-                etc.).
-              </p>
-            </div>
-
-            {/* Auto-detection Info */}
-            <div className="flex items-start gap-3 p-3 rounded-lg bg-accent/20 border border-border/30">
-              <Info className="w-4 h-4 text-brand-500 mt-0.5 shrink-0" />
-              <div className="text-xs text-muted-foreground">
-                <p className="font-medium text-foreground mb-1">Auto-detection</p>
-                <p>
-                  When no custom command is set, the test runner automatically detects and uses the
-                  appropriate test framework based on your project files (Vitest, Jest, Pytest,
-                  Cargo, Go Test, etc.).
-                </p>
-              </div>
-            </div>
-
-            {/* Quick Presets */}
-            <div className="space-y-3">
-              <Label className="text-foreground font-medium">Quick Presets</Label>
-              <div className="flex flex-wrap gap-2">
-                {[
-                  { label: 'npm test', command: 'npm test' },
-                  { label: 'yarn test', command: 'yarn test' },
-                  { label: 'pnpm test', command: 'pnpm test' },
-                  { label: 'bun test', command: 'bun test' },
-                  { label: 'pytest', command: 'pytest' },
-                  { label: 'cargo test', command: 'cargo test' },
-                  { label: 'go test', command: 'go test ./...' },
-                ].map((preset) => (
-                  <Button
-                    key={preset.command}
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleUsePreset(preset.command)}
-                    className="text-xs font-mono"
-                  >
-                    {preset.label}
-                  </Button>
-                ))}
-              </div>
-              <p className="text-xs text-muted-foreground/80">
-                Click a preset to use it as your test command.
-              </p>
-            </div>
-
-            {/* Action Buttons */}
-            <div className="flex items-center justify-end gap-2 pt-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleReset}
-                disabled={!hasChanges || isSaving}
-                className="gap-1.5"
-              >
-                <RotateCcw className="w-3.5 h-3.5" />
-                Reset
-              </Button>
-              <Button
-                size="sm"
-                onClick={handleSave}
-                disabled={!hasChanges || isSaving}
-                className="gap-1.5"
-              >
-                {isSaving ? <Spinner size="xs" /> : <Save className="w-3.5 h-3.5" />}
-                Save
-              </Button>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

apps/ui/src/components/views/settings-view.tsx

@@ -23,6 +23,7 @@ import {
   CursorSettingsTab,
   CodexSettingsTab,
   OpencodeSettingsTab,
+  GeminiSettingsTab,
 } from './settings-view/providers';
 import { MCPServersSection } from './settings-view/mcp-servers';
 import { PromptCustomizationSection } from './settings-view/prompts';
@@ -123,6 +124,8 @@ export function SettingsView() {
         return <CodexSettingsTab />;
       case 'opencode-provider':
         return <OpencodeSettingsTab />;
+      case 'gemini-provider':
+        return <GeminiSettingsTab />;
       case 'providers':
       case 'claude': // Backwards compatibility - redirect to claude-provider
         return <ClaudeSettingsTab />;

apps/ui/src/components/views/settings-view/cli-status/gemini-cli-status.tsx

@@ -0,0 +1,250 @@
+import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { CheckCircle2, AlertCircle, RefreshCw, Key } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+import { GeminiIcon } from '@/components/ui/provider-icon';
+
+export type GeminiAuthMethod =
+  | 'api_key' // API key authentication
+  | 'google_login' // Google OAuth authentication
+  | 'vertex_ai' // Vertex AI authentication
+  | 'none';
+
+export interface GeminiAuthStatus {
+  authenticated: boolean;
+  method: GeminiAuthMethod;
+  hasApiKey?: boolean;
+  hasEnvApiKey?: boolean;
+  hasCredentialsFile?: boolean;
+  error?: string;
+}
+
+function getAuthMethodLabel(method: GeminiAuthMethod): string {
+  switch (method) {
+    case 'api_key':
+      return 'API Key';
+    case 'google_login':
+      return 'Google OAuth';
+    case 'vertex_ai':
+      return 'Vertex AI';
+    default:
+      return method || 'Unknown';
+  }
+}
+
+interface GeminiCliStatusProps {
+  status: CliStatus | null;
+  authStatus?: GeminiAuthStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+export function GeminiCliStatusSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <SkeletonPulse className="w-9 h-9 rounded-xl" />
+            <SkeletonPulse className="h-6 w-36" />
+          </div>
+          <SkeletonPulse className="w-9 h-9 rounded-lg" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-80" />
+        </div>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Installation status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-40" />
+            <SkeletonPulse className="h-3 w-32" />
+            <SkeletonPulse className="h-3 w-48" />
+          </div>
+        </div>
+        {/* Auth status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-28" />
+            <SkeletonPulse className="h-3 w-36" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function GeminiCliStatus({
+  status,
+  authStatus,
+  isChecking,
+  onRefresh,
+}: GeminiCliStatusProps) {
+  if (!status) return <GeminiCliStatusSkeleton />;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 flex items-center justify-center border border-blue-500/20">
+              <GeminiIcon className="w-5 h-5 text-blue-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">Gemini CLI</h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-gemini-cli"
+            title="Refresh Gemini CLI detection"
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Gemini CLI provides access to Google&apos;s Gemini AI models with thinking capabilities.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.success && status.status === 'installed' ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">Gemini CLI Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.method && (
+                    <p>
+                      Method: <span className="font-mono">{status.method}</span>
+                    </p>
+                  )}
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                  {status.path && (
+                    <p className="truncate" title={status.path}>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Authentication Status */}
+            {authStatus?.authenticated ? (
+              <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">Authenticated</p>
+                  <div className="text-xs text-emerald-400/70 mt-1.5">
+                    {authStatus.method !== 'none' && (
+                      <p>
+                        Method:{' '}
+                        <span className="font-mono">{getAuthMethodLabel(authStatus.method)}</span>
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/20">
+                <div className="w-10 h-10 rounded-xl bg-red-500/15 flex items-center justify-center border border-red-500/20 shrink-0 mt-0.5">
+                  <AlertCircle className="w-5 h-5 text-red-500" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-red-400">Authentication Failed</p>
+                  {authStatus?.error && (
+                    <p className="text-xs text-red-400/70 mt-1">{authStatus.error}</p>
+                  )}
+                  <p className="text-xs text-red-400/70 mt-2">
+                    Run <code className="font-mono bg-red-500/10 px-1 rounded">gemini</code>{' '}
+                    interactively in your terminal to log in with Google, or set the{' '}
+                    <code className="font-mono bg-red-500/10 px-1 rounded">GEMINI_API_KEY</code>{' '}
+                    environment variable.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground/70 ml-1">{status.recommendation}</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">Gemini CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation || 'Install Gemini CLI to use Google Gemini models.'}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">Installation Commands:</p>
+                <div className="space-y-2">
+                  {status.installCommands.npm && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        npm
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        macOS/Linux
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/settings-view/components/settings-navigation.tsx

@@ -17,6 +17,7 @@ const NAV_ID_TO_PROVIDER: Record<string, ModelProvider> = {
   'cursor-provider': 'cursor',
   'codex-provider': 'codex',
   'opencode-provider': 'opencode',
+  'gemini-provider': 'gemini',
 };
 
 interface SettingsNavigationProps {

apps/ui/src/components/views/settings-view/config/navigation.ts

@@ -17,7 +17,13 @@ import {
   Code2,
   Webhook,
 } from 'lucide-react';
-import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  OpenCodeIcon,
+  GeminiIcon,
+} from '@/components/ui/provider-icon';
 import type { SettingsViewId } from '../hooks/use-settings-view';
 
 export interface NavigationItem {
@@ -51,6 +57,7 @@ export const GLOBAL_NAV_GROUPS: NavigationGroup[] = [
           { id: 'cursor-provider', label: 'Cursor', icon: CursorIcon },
           { id: 'codex-provider', label: 'Codex', icon: OpenAIIcon },
           { id: 'opencode-provider', label: 'OpenCode', icon: OpenCodeIcon },
+          { id: 'gemini-provider', label: 'Gemini', icon: GeminiIcon },
         ],
       },
       { id: 'mcp-servers', label: 'MCP Servers', icon: Plug },

apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts

@@ -8,6 +8,7 @@ export type SettingsViewId =
   | 'cursor-provider'
   | 'codex-provider'
   | 'opencode-provider'
+  | 'gemini-provider'
   | 'mcp-servers'
   | 'prompts'
   | 'model-defaults'

apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx

@@ -7,6 +7,7 @@ import type {
   CursorModelId,
   CodexModelId,
   OpencodeModelId,
+  GeminiModelId,
   GroupedModel,
   PhaseModelEntry,
   ClaudeCompatibleProvider,
@@ -25,6 +26,7 @@ import {
   CLAUDE_MODELS,
   CURSOR_MODELS,
   OPENCODE_MODELS,
+  GEMINI_MODELS,
   THINKING_LEVELS,
   THINKING_LEVEL_LABELS,
   REASONING_EFFORT_LEVELS,
@@ -39,6 +41,7 @@ import {
   OpenRouterIcon,
   GlmIcon,
   MiniMaxIcon,
+  GeminiIcon,
   getProviderIconForModel,
 } from '@/components/ui/provider-icon';
 import { Button } from '@/components/ui/button';
@@ -168,6 +171,7 @@ export function PhaseModelSelector({
   const expandedProviderTriggerRef = useRef<HTMLDivElement>(null);
   const {
     enabledCursorModels,
+    enabledGeminiModels,
     favoriteModels,
     toggleFavoriteModel,
     codexModels,
@@ -322,6 +326,11 @@ export function PhaseModelSelector({
     return enabledCursorModels.includes(model.id as CursorModelId);
   });
 
+  // Filter Gemini models to only show enabled ones
+  const availableGeminiModels = GEMINI_MODELS.filter((model) => {
+    return enabledGeminiModels.includes(model.id as GeminiModelId);
+  });
+
   // Helper to find current selected model details
   const currentModel = useMemo(() => {
     const claudeModel = CLAUDE_MODELS.find((m) => m.id === selectedModel);
@@ -359,6 +368,16 @@ export function PhaseModelSelector({
     const codexModel = transformedCodexModels.find((m) => m.id === selectedModel);
     if (codexModel) return { ...codexModel, icon: OpenAIIcon };
 
+    // Check Gemini models
+    // Note: Gemini CLI doesn't support thinking level configuration
+    const geminiModel = availableGeminiModels.find((m) => m.id === selectedModel);
+    if (geminiModel) {
+      return {
+        ...geminiModel,
+        icon: GeminiIcon,
+      };
+    }
+
     // Check OpenCode models (static) - use dynamic icon resolution for provider-specific icons
     const opencodeModel = OPENCODE_MODELS.find((m) => m.id === selectedModel);
     if (opencodeModel) return { ...opencodeModel, icon: getProviderIconForModel(opencodeModel.id) };
@@ -459,6 +478,7 @@ export function PhaseModelSelector({
     selectedProviderId,
     selectedThinkingLevel,
     availableCursorModels,
+    availableGeminiModels,
     transformedCodexModels,
     dynamicOpencodeModels,
     enabledProviders,
@@ -524,17 +544,20 @@ export function PhaseModelSelector({
 
   // Check if providers are disabled (needed for rendering conditions)
   const isCursorDisabled = disabledProviders.includes('cursor');
+  const isGeminiDisabled = disabledProviders.includes('gemini');
 
   // Group models (filtering out disabled providers)
-  const { favorites, claude, cursor, codex, opencode } = useMemo(() => {
+  const { favorites, claude, cursor, codex, gemini, opencode } = useMemo(() => {
     const favs: typeof CLAUDE_MODELS = [];
     const cModels: typeof CLAUDE_MODELS = [];
     const curModels: typeof CURSOR_MODELS = [];
     const codModels: typeof transformedCodexModels = [];
+    const gemModels: typeof GEMINI_MODELS = [];
     const ocModels: ModelOption[] = [];
 
     const isClaudeDisabled = disabledProviders.includes('claude');
     const isCodexDisabled = disabledProviders.includes('codex');
+    const isGeminiDisabledInner = disabledProviders.includes('gemini');
     const isOpencodeDisabled = disabledProviders.includes('opencode');
 
     // Process Claude Models (skip if provider is disabled)
@@ -570,6 +593,17 @@ export function PhaseModelSelector({
       });
     }
 
+    // Process Gemini Models (skip if provider is disabled)
+    if (!isGeminiDisabledInner) {
+      availableGeminiModels.forEach((model) => {
+        if (favoriteModels.includes(model.id)) {
+          favs.push(model);
+        } else {
+          gemModels.push(model);
+        }
+      });
+    }
+
     // Process OpenCode Models (skip if provider is disabled)
     if (!isOpencodeDisabled) {
       allOpencodeModels.forEach((model) => {
@@ -586,11 +620,13 @@ export function PhaseModelSelector({
       claude: cModels,
       cursor: curModels,
       codex: codModels,
+      gemini: gemModels,
       opencode: ocModels,
     };
   }, [
     favoriteModels,
     availableCursorModels,
+    availableGeminiModels,
     transformedCodexModels,
     allOpencodeModels,
     disabledProviders,
@@ -1027,6 +1063,60 @@ export function PhaseModelSelector({
     );
   };
 
+  // Render Gemini model item - simple selector without thinking level
+  // Note: Gemini CLI doesn't support a --thinking-level flag, thinking is model-internal
+  const renderGeminiModelItem = (model: (typeof GEMINI_MODELS)[0]) => {
+    const isSelected = selectedModel === model.id;
+    const isFavorite = favoriteModels.includes(model.id);
+
+    return (
+      <CommandItem
+        key={model.id}
+        value={model.label}
+        onSelect={() => {
+          onChange({ model: model.id as GeminiModelId });
+          setOpen(false);
+        }}
+        className="group flex items-center justify-between py-2"
+      >
+        <div className="flex items-center gap-3 overflow-hidden">
+          <GeminiIcon
+            className={cn(
+              'h-4 w-4 shrink-0',
+              isSelected ? 'text-primary' : 'text-muted-foreground'
+            )}
+          />
+          <div className="flex flex-col truncate">
+            <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+              {model.label}
+            </span>
+            <span className="truncate text-xs text-muted-foreground">{model.description}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 ml-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+              isFavorite
+                ? 'text-yellow-500 opacity-100'
+                : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleFavoriteModel(model.id);
+            }}
+          >
+            <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+          </Button>
+          {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+        </div>
+      </CommandItem>
+    );
+  };
+
   // Render ClaudeCompatibleProvider model item with thinking level support
   const renderProviderModelItem = (
     provider: ClaudeCompatibleProvider,
@@ -1839,6 +1929,10 @@ export function PhaseModelSelector({
                     if (model.provider === 'codex') {
                       return renderCodexModelItem(model as (typeof transformedCodexModels)[0]);
                     }
+                    // Gemini model
+                    if (model.provider === 'gemini') {
+                      return renderGeminiModelItem(model as (typeof GEMINI_MODELS)[0]);
+                    }
                     // OpenCode model
                     if (model.provider === 'opencode') {
                       return renderOpencodeModelItem(model);
@@ -1917,6 +2011,12 @@ export function PhaseModelSelector({
             </CommandGroup>
           )}
 
+          {!isGeminiDisabled && gemini.length > 0 && (
+            <CommandGroup heading="Gemini Models">
+              {gemini.map((model) => renderGeminiModelItem(model))}
+            </CommandGroup>
+          )}
+
           {opencodeSections.length > 0 && (
             <CommandGroup heading={OPENCODE_CLI_GROUP_LABEL}>
               {opencodeSections.map((section, sectionIndex) => (

apps/ui/src/components/views/settings-view/providers/gemini-model-configuration.tsx

@@ -0,0 +1,146 @@
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import type { GeminiModelId } from '@automaker/types';
+import { GeminiIcon } from '@/components/ui/provider-icon';
+import { GEMINI_MODEL_MAP } from '@automaker/types';
+
+interface GeminiModelConfigurationProps {
+  enabledGeminiModels: GeminiModelId[];
+  geminiDefaultModel: GeminiModelId;
+  isSaving: boolean;
+  onDefaultModelChange: (model: GeminiModelId) => void;
+  onModelToggle: (model: GeminiModelId, enabled: boolean) => void;
+}
+
+interface GeminiModelInfo {
+  id: GeminiModelId;
+  label: string;
+  description: string;
+  supportsThinking: boolean;
+}
+
+// Build model info from the GEMINI_MODEL_MAP
+const GEMINI_MODEL_INFO: Record<GeminiModelId, GeminiModelInfo> = Object.fromEntries(
+  Object.entries(GEMINI_MODEL_MAP).map(([id, config]) => [
+    id as GeminiModelId,
+    {
+      id: id as GeminiModelId,
+      label: config.label,
+      description: config.description,
+      supportsThinking: config.supportsThinking,
+    },
+  ])
+) as Record<GeminiModelId, GeminiModelInfo>;
+
+export function GeminiModelConfiguration({
+  enabledGeminiModels,
+  geminiDefaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+}: GeminiModelConfigurationProps) {
+  const availableModels = Object.values(GEMINI_MODEL_INFO);
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 flex items-center justify-center border border-blue-500/20">
+            <GeminiIcon className="w-5 h-5 text-blue-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Model Configuration
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure which Gemini models are available in the feature modal
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        <div className="space-y-2">
+          <Label>Default Model</Label>
+          <Select
+            value={geminiDefaultModel}
+            onValueChange={(v) => onDefaultModelChange(v as GeminiModelId)}
+            disabled={isSaving}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {availableModels.map((model) => (
+                <SelectItem key={model.id} value={model.id}>
+                  <div className="flex items-center gap-2">
+                    <span>{model.label}</span>
+                    {model.supportsThinking && (
+                      <Badge variant="outline" className="text-xs">
+                        Thinking
+                      </Badge>
+                    )}
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-3">
+          <Label>Available Models</Label>
+          <div className="grid gap-3">
+            {availableModels.map((model) => {
+              const isEnabled = enabledGeminiModels.includes(model.id);
+              const isDefault = model.id === geminiDefaultModel;
+
+              return (
+                <div
+                  key={model.id}
+                  className="flex items-center justify-between p-3 rounded-xl border border-border/50 bg-card/50 hover:bg-accent/30 transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    <Checkbox
+                      checked={isEnabled}
+                      onCheckedChange={(checked) => onModelToggle(model.id, !!checked)}
+                      disabled={isSaving || isDefault}
+                    />
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium">{model.label}</span>
+                        {model.supportsThinking && (
+                          <Badge variant="outline" className="text-xs">
+                            Thinking
+                          </Badge>
+                        )}
+                        {isDefault && (
+                          <Badge variant="secondary" className="text-xs">
+                            Default
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-xs text-muted-foreground">{model.description}</p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/settings-view/providers/gemini-settings-tab.tsx

@@ -0,0 +1,130 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import { GeminiCliStatus, GeminiCliStatusSkeleton } from '../cli-status/gemini-cli-status';
+import { GeminiModelConfiguration } from './gemini-model-configuration';
+import { ProviderToggle } from './provider-toggle';
+import { useGeminiCliStatus } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import type { CliStatus as SharedCliStatus } from '../shared/types';
+import type { GeminiAuthStatus } from '../cli-status/gemini-cli-status';
+import type { GeminiModelId } from '@automaker/types';
+
+export function GeminiSettingsTab() {
+  const queryClient = useQueryClient();
+  const { enabledGeminiModels, geminiDefaultModel, setGeminiDefaultModel, toggleGeminiModel } =
+    useAppStore();
+
+  const [isSaving, setIsSaving] = useState(false);
+
+  // React Query hooks for data fetching
+  const {
+    data: cliStatusData,
+    isLoading: isCheckingGeminiCli,
+    refetch: refetchCliStatus,
+  } = useGeminiCliStatus();
+
+  const isCliInstalled = cliStatusData?.installed ?? false;
+
+  // Transform CLI status to the expected format
+  const cliStatus = useMemo((): SharedCliStatus | null => {
+    if (!cliStatusData) return null;
+    return {
+      success: cliStatusData.success ?? false,
+      status: cliStatusData.installed ? 'installed' : 'not_installed',
+      method: cliStatusData.auth?.method,
+      version: cliStatusData.version,
+      path: cliStatusData.path,
+      recommendation: cliStatusData.recommendation,
+      // Server sends installCommand (singular), transform to expected format
+      installCommands: cliStatusData.installCommand
+        ? { npm: cliStatusData.installCommand }
+        : cliStatusData.installCommands,
+    };
+  }, [cliStatusData]);
+
+  // Transform auth status to the expected format
+  const authStatus = useMemo((): GeminiAuthStatus | null => {
+    if (!cliStatusData?.auth) return null;
+    return {
+      authenticated: cliStatusData.auth.authenticated,
+      method: (cliStatusData.auth.method as GeminiAuthStatus['method']) || 'none',
+      hasApiKey: cliStatusData.auth.hasApiKey,
+      hasEnvApiKey: cliStatusData.auth.hasEnvApiKey,
+      error: cliStatusData.auth.error,
+    };
+  }, [cliStatusData]);
+
+  // Refresh all gemini-related queries
+  const handleRefreshGeminiCli = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: queryKeys.cli.gemini() });
+    await refetchCliStatus();
+    toast.success('Gemini CLI refreshed');
+  }, [queryClient, refetchCliStatus]);
+
+  const handleDefaultModelChange = useCallback(
+    (model: GeminiModelId) => {
+      setIsSaving(true);
+      try {
+        setGeminiDefaultModel(model);
+        toast.success('Default model updated');
+      } catch {
+        toast.error('Failed to update default model');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [setGeminiDefaultModel]
+  );
+
+  const handleModelToggle = useCallback(
+    (model: GeminiModelId, enabled: boolean) => {
+      setIsSaving(true);
+      try {
+        toggleGeminiModel(model, enabled);
+      } catch {
+        toast.error('Failed to update models');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [toggleGeminiModel]
+  );
+
+  // Show skeleton only while checking CLI status initially
+  if (!cliStatus && isCheckingGeminiCli) {
+    return (
+      <div className="space-y-6">
+        <GeminiCliStatusSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Provider Visibility Toggle */}
+      <ProviderToggle provider="gemini" providerLabel="Gemini" />
+
+      <GeminiCliStatus
+        status={cliStatus}
+        authStatus={authStatus}
+        isChecking={isCheckingGeminiCli}
+        onRefresh={handleRefreshGeminiCli}
+      />
+
+      {/* Model Configuration - Only show when CLI is installed */}
+      {isCliInstalled && (
+        <GeminiModelConfiguration
+          enabledGeminiModels={enabledGeminiModels}
+          geminiDefaultModel={geminiDefaultModel}
+          isSaving={isSaving}
+          onDefaultModelChange={handleDefaultModelChange}
+          onModelToggle={handleModelToggle}
+        />
+      )}
+    </div>
+  );
+}
+
+export default GeminiSettingsTab;

apps/ui/src/components/views/settings-view/providers/index.ts

@@ -3,3 +3,4 @@ export { ClaudeSettingsTab } from './claude-settings-tab';
 export { CursorSettingsTab } from './cursor-settings-tab';
 export { CodexSettingsTab } from './codex-settings-tab';
 export { OpencodeSettingsTab } from './opencode-settings-tab';
+export { GeminiSettingsTab } from './gemini-settings-tab';

apps/ui/src/components/views/settings-view/providers/provider-tabs.tsx

@@ -1,20 +1,26 @@
 import React from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';
-import { Cpu } from 'lucide-react';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  GeminiIcon,
+  OpenCodeIcon,
+} from '@/components/ui/provider-icon';
 import { CursorSettingsTab } from './cursor-settings-tab';
 import { ClaudeSettingsTab } from './claude-settings-tab';
 import { CodexSettingsTab } from './codex-settings-tab';
 import { OpencodeSettingsTab } from './opencode-settings-tab';
+import { GeminiSettingsTab } from './gemini-settings-tab';
 
 interface ProviderTabsProps {
-  defaultTab?: 'claude' | 'cursor' | 'codex' | 'opencode';
+  defaultTab?: 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini';
 }
 
 export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
   return (
     <Tabs defaultValue={defaultTab} className="w-full">
-      <TabsList className="grid w-full grid-cols-4 mb-6">
+      <TabsList className="grid w-full grid-cols-5 mb-6">
         <TabsTrigger value="claude" className="flex items-center gap-2">
           <AnthropicIcon className="w-4 h-4" />
           Claude
@@ -28,9 +34,13 @@ export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
           Codex
         </TabsTrigger>
         <TabsTrigger value="opencode" className="flex items-center gap-2">
-          <Cpu className="w-4 h-4" />
+          <OpenCodeIcon className="w-4 h-4" />
           OpenCode
         </TabsTrigger>
+        <TabsTrigger value="gemini" className="flex items-center gap-2">
+          <GeminiIcon className="w-4 h-4" />
+          Gemini
+        </TabsTrigger>
       </TabsList>
 
       <TabsContent value="claude">
@@ -48,6 +58,10 @@ export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
       <TabsContent value="opencode">
         <OpencodeSettingsTab />
       </TabsContent>
+
+      <TabsContent value="gemini">
+        <GeminiSettingsTab />
+      </TabsContent>
     </Tabs>
   );
 }

apps/ui/src/components/views/setup-view/steps/providers-setup-step.tsx

@@ -31,7 +31,13 @@ import {
 import { Spinner } from '@/components/ui/spinner';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
-import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  OpenCodeIcon,
+  GeminiIcon,
+} from '@/components/ui/provider-icon';
 import { TerminalOutput } from '../components';
 import { useCliInstallation, useTokenSave } from '../hooks';
 
@@ -40,7 +46,7 @@ interface ProvidersSetupStepProps {
   onBack: () => void;
 }
 
-type ProviderTab = 'claude' | 'cursor' | 'codex' | 'opencode';
+type ProviderTab = 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini';
 
 // ============================================================================
 // Claude Content
@@ -1209,6 +1215,318 @@ function OpencodeContent() {
   );
 }
 
+// ============================================================================
+// Gemini Content
+// ============================================================================
+function GeminiContent() {
+  const { geminiCliStatus, setGeminiCliStatus } = useSetupStore();
+  const { setApiKeys, apiKeys } = useAppStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [apiKey, setApiKey] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getGeminiStatus) return;
+      const result = await api.setup.getGeminiStatus();
+      if (result.success) {
+        setGeminiCliStatus({
+          installed: result.installed ?? false,
+          version: result.version,
+          path: result.path,
+          auth: result.auth,
+          installCommand: result.installCommand,
+          loginCommand: result.loginCommand,
+        });
+        if (result.auth?.authenticated) {
+          toast.success('Gemini CLI is ready!');
+        }
+      }
+    } catch {
+      // Ignore
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setGeminiCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    return () => {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleSaveApiKey = async () => {
+    if (!apiKey.trim()) return;
+    setIsSaving(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.saveApiKey) {
+        toast.error('Save API not available');
+        return;
+      }
+      const result = await api.setup.saveApiKey('google', apiKey);
+      if (result.success) {
+        setApiKeys({ ...apiKeys, google: apiKey });
+        setGeminiCliStatus({
+          ...geminiCliStatus,
+          installed: geminiCliStatus?.installed ?? false,
+          auth: { authenticated: true, method: 'api_key' },
+        });
+        toast.success('API key saved successfully!');
+      }
+    } catch {
+      toast.error('Failed to save API key');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+    try {
+      const loginCommand = geminiCliStatus?.loginCommand || 'gemini auth login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      let attempts = 0;
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getGeminiStatus) return;
+          const result = await api.setup.getGeminiStatus();
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setGeminiCliStatus({
+              ...geminiCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            });
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to Gemini!');
+          }
+        } catch {
+          // Ignore
+        }
+        if (attempts >= 60) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch {
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = geminiCliStatus?.installed && geminiCliStatus?.auth?.authenticated;
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <GeminiIcon className="w-5 h-5" />
+            Gemini CLI Status
+          </CardTitle>
+          <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <CardDescription>
+          {geminiCliStatus?.installed
+            ? geminiCliStatus.auth?.authenticated
+              ? `Authenticated${geminiCliStatus.version ? ` (v${geminiCliStatus.version})` : ''}`
+              : 'Installed but not authenticated'
+            : 'Not installed on your system'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isReady && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {geminiCliStatus?.version && `Version: ${geminiCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <p className="font-medium text-foreground">Authenticated</p>
+            </div>
+          </div>
+        )}
+
+        {!geminiCliStatus?.installed && !isChecking && (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Gemini CLI not found</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Install the Gemini CLI to use Google Gemini models.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <p className="font-medium text-foreground text-sm">Install Gemini CLI:</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                  {geminiCliStatus?.installCommand || 'npm install -g @google/gemini-cli'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() =>
+                    copyCommand(
+                      geminiCliStatus?.installCommand || 'npm install -g @google/gemini-cli'
+                    )
+                  }
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {geminiCliStatus?.installed && !geminiCliStatus?.auth?.authenticated && !isChecking && (
+          <div className="space-y-4">
+            {/* Show CLI installed toast */}
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {geminiCliStatus?.version && `Version: ${geminiCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Gemini CLI not authenticated</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Run the login command or provide a Google API key below.
+                </p>
+              </div>
+            </div>
+
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="cli" className="border-border">
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <Terminal className="w-5 h-5 text-muted-foreground" />
+                    <span className="font-medium">Google OAuth Login</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="pt-4 space-y-4">
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                      {geminiCliStatus?.loginCommand || 'gemini auth login'}
+                    </code>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() =>
+                        copyCommand(geminiCliStatus?.loginCommand || 'gemini auth login')
+                      }
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <Button
+                    onClick={handleLogin}
+                    disabled={isLoggingIn}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                  >
+                    {isLoggingIn ? (
+                      <>
+                        <Spinner size="sm" className="mr-2" />
+                        Waiting for login...
+                      </>
+                    ) : (
+                      'Copy Command & Wait for Login'
+                    )}
+                  </Button>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="api-key" className="border-border">
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <Key className="w-5 h-5 text-muted-foreground" />
+                    <span className="font-medium">Google API Key</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="pt-4 space-y-4">
+                  <div className="space-y-2">
+                    <Input
+                      type="password"
+                      placeholder="AIza..."
+                      value={apiKey}
+                      onChange={(e) => setApiKey(e.target.value)}
+                      className="bg-input border-border text-foreground"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      <a
+                        href="https://aistudio.google.com/apikey"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-brand-500 hover:underline"
+                      >
+                        Get an API key from Google AI Studio
+                        <ExternalLink className="w-3 h-3 inline ml-1" />
+                      </a>
+                    </p>
+                  </div>
+                  <Button
+                    onClick={handleSaveApiKey}
+                    disabled={isSaving || !apiKey.trim()}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                  >
+                    {isSaving ? <Spinner size="sm" /> : 'Save API Key'}
+                  </Button>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+        )}
+
+        {isChecking && (
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <Spinner size="md" />
+            <p className="font-medium text-foreground">Checking Gemini CLI status...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
 // ============================================================================
 // Main Component
 // ============================================================================
@@ -1225,11 +1543,13 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
     codexCliStatus,
     codexAuthStatus,
     opencodeCliStatus,
+    geminiCliStatus,
     setClaudeCliStatus,
     setCursorCliStatus,
     setCodexCliStatus,
     setCodexAuthStatus,
     setOpencodeCliStatus,
+    setGeminiCliStatus,
   } = useSetupStore();
 
   // Check all providers on mount
@@ -1319,8 +1639,28 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
       }
     };
 
+    // Check Gemini
+    const checkGemini = async () => {
+      try {
+        if (!api.setup?.getGeminiStatus) return;
+        const result = await api.setup.getGeminiStatus();
+        if (result.success) {
+          setGeminiCliStatus({
+            installed: result.installed ?? false,
+            version: result.version,
+            path: result.path,
+            auth: result.auth,
+            installCommand: result.installCommand,
+            loginCommand: result.loginCommand,
+          });
+        }
+      } catch {
+        // Ignore errors
+      }
+    };
+
     // Run all checks in parallel
-    await Promise.all([checkClaude(), checkCursor(), checkCodex(), checkOpencode()]);
+    await Promise.all([checkClaude(), checkCursor(), checkCodex(), checkOpencode(), checkGemini()]);
     setIsInitialChecking(false);
   }, [
     setClaudeCliStatus,
@@ -1328,6 +1668,7 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
     setCodexCliStatus,
     setCodexAuthStatus,
     setOpencodeCliStatus,
+    setGeminiCliStatus,
   ]);
 
   useEffect(() => {
@@ -1354,11 +1695,15 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
   const isOpencodeInstalled = opencodeCliStatus?.installed === true;
   const isOpencodeAuthenticated = opencodeCliStatus?.auth?.authenticated === true;
 
+  const isGeminiInstalled = geminiCliStatus?.installed === true;
+  const isGeminiAuthenticated = geminiCliStatus?.auth?.authenticated === true;
+
   const hasAtLeastOneProvider =
     isClaudeAuthenticated ||
     isCursorAuthenticated ||
     isCodexAuthenticated ||
-    isOpencodeAuthenticated;
+    isOpencodeAuthenticated ||
+    isGeminiAuthenticated;
 
   type ProviderStatus = 'not_installed' | 'installed_not_auth' | 'authenticated' | 'verifying';
 
@@ -1402,6 +1747,13 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
       status: getProviderStatus(isOpencodeInstalled, isOpencodeAuthenticated),
       color: 'text-green-500',
     },
+    {
+      id: 'gemini' as const,
+      label: 'Gemini',
+      icon: GeminiIcon,
+      status: getProviderStatus(isGeminiInstalled, isGeminiAuthenticated),
+      color: 'text-blue-500',
+    },
   ];
 
   const renderStatusIcon = (status: ProviderStatus) => {
@@ -1438,7 +1790,7 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
       )}
 
       <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as ProviderTab)}>
-        <TabsList className="grid w-full grid-cols-4 h-auto p-1">
+        <TabsList className="grid w-full grid-cols-5 h-auto p-1">
           {providers.map((provider) => {
             const Icon = provider.icon;
             return (
@@ -1484,6 +1836,9 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
           <TabsContent value="opencode" className="mt-0">
             <OpencodeContent />
           </TabsContent>
+          <TabsContent value="gemini" className="mt-0">
+            <GeminiContent />
+          </TabsContent>
         </div>
       </Tabs>