feat: Add GitHub Copilot SDK provider integration (#661)

* feat: add GitHub Copilot SDK provider integration Adds comprehensive GitHub Copilot SDK provider support including: - CopilotProvider class with CLI detection and OAuth authentication check - Copilot models definition with GPT-4o, Claude, and o1/o3 series models - Settings UI integration with provider tab, model configuration, and navigation - Onboarding flow integration with Copilot setup step - Model selector integration for all phase-specific model dropdowns - Persistence of enabled models and default model settings via API sync - Server route for Copilot CLI status endpoint https://claude.ai/code/session_01D26w7ZyEzP4H6Dor3ttk9d * chore: update package-lock.json https://claude.ai/code/session_01D26w7ZyEzP4H6Dor3ttk9d * refactor: rename Copilot SDK to Copilot CLI and use GitHub icon - Update all references from "GitHub Copilot SDK" to "GitHub Copilot CLI" - Change install command from @github/copilot-sdk to @github/copilot - Update CopilotIcon to use official GitHub Octocat logo - Update error codes and comments throughout codebase Co-Authored-By: Claude <noreply@anthropic.com> * fix: update Copilot model definitions and add dynamic model discovery - Update COPILOT_MODEL_MAP with correct models from CLI (claude-sonnet-4.5, claude-haiku-4.5, claude-opus-4.5, claude-sonnet-4, gpt-5.x series, gpt-4.1, gemini-3-pro-preview) - Change default Copilot model to copilot-claude-sonnet-4.5 - Add model caching methods to CopilotProvider (hasCachedModels, clearModelCache, refreshModels) - Add API routes for dynamic model discovery: - GET /api/setup/copilot/models - POST /api/setup/copilot/models/refresh - POST /api/setup/copilot/cache/clear Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * refactor: use @github/copilot-sdk instead of direct CLI calls - Install @github/copilot-sdk package for proper SDK integration - Rewrite CopilotProvider to use SDK's CopilotClient API - Use client.createSession() for session management - Handle SDK events (assistant.message, tool.execution_*, session.idle) - Auto-approve permissions for autonomous agent operation - Remove incorrect CLI flags (--mode, --output-format) - Update default model to claude-sonnet-4.5 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: add Copilot and Gemini model support to model resolver - Import isCopilotModel and isGeminiModel from types - Add explicit checks for copilot- and gemini- prefixed models - Pass through Copilot/Gemini models unchanged to their providers - Update resolver documentation to list all supported providers Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: pass working directory to Copilot SDK and reduce event noise - Create CopilotClient per execution with correct cwd from options.cwd - This ensures the CLI operates in the correct project directory, not the server's current directory - Skip assistant.message_delta events (they create excessive noise) - Only yield the final assistant.message event which has complete content - Clean up client on completion and error paths Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: simplify Copilot SDK execution with sendAndWait - Use sendAndWait() instead of manual event polling for more reliable execution - Disable streaming (streaming: false) to simplify response handling - Increase timeout to 10 minutes for agentic operations - Still capture tool execution events for UI display - Add more debug logging for troubleshooting - This should fix the "invalid_request_body" error on subsequent calls Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: allow Copilot model IDs with claude-, gemini-, gpt- prefixes Copilot's bare model IDs legitimately contain prefixes like claude-, gemini-, gpt- because those are the actual model names from the Copilot CLI (e.g., claude-sonnet-4.5, gemini-3-pro-preview, gpt-5.1). The generic validateBareModelId function was incorrectly rejecting these valid model IDs. Now we only check that the copilot- prefix has been stripped by the ProviderFactory. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * feat: enable real-time streaming of tool events for Copilot - Switch back to streaming mode (streaming: true) for real-time events - Use async queue pattern to bridge SDK callbacks to async generator - Events are now yielded as they happen, not batched at the end - Tool calls (Read, Write, Edit, Bash, TodoWrite, etc.) show in real-time - Better progress visibility during agentic operations Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * feat: expand Copilot tool name and input normalization Tool name mapping additions: - view → Read (Copilot's file viewing tool) - create_file → Write - replace, patch → Edit - run_shell_command, terminal → Bash - search_file_content → Grep - list_directory → Ls - google_web_search → WebSearch - report_intent → ReportIntent (Copilot-specific planning) - think, plan → Think, Plan Input normalization improvements: - Read/Write/Edit: Map file, filename, filePath → file_path - Bash: Map cmd, script → command - Grep: Map query, search, regex → pattern Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: convert git+ssh to git+https in package-lock.json The @electron/node-gyp dependency was resolved with a git+ssh URL which fails in CI environments without SSH keys. Convert to HTTPS. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: address code review feedback for Copilot SDK provider - Add guard for non-text prompts (vision not yet supported) - Clear runtime model cache on fetch failure - Fix race condition in async queue error handling - Import CopilotAuthStatus from shared types - Fix comment mismatch for default model constant - Add auth-copilot and deauth-copilot routes - Extract shared tool normalization utilities - Create base model configuration UI component - Add comprehensive unit tests for CopilotProvider - Replace magic strings with constants - Add debug logging for cleanup errors * fix: address CodeRabbit review nitpicks - Fix test mocks to include --version check for CLI detection - Add aria-label for accessibility on refresh button - Ensure default model checkbox always appears checked/enabled * fix: address CodeRabbit review feedback - Fix test mocks by creating fresh provider instances after mock setup - Extract COPILOT_DISCONNECTED_MARKER_FILE constant to common.ts - Add AUTONOMOUS MODE comment explaining auto-approval of permissions - Improve tool-normalization with union types and null guards - Handle 'canceled' (American spelling) status in todo normalization * refactor: extract copilot connection logic to service and fix test mocks - Create copilot-connection-service.ts with connect/disconnect logic - Update auth-copilot and deauth-copilot routes to use service - Fix test mocks for CLI detection: - Mock fs.existsSync for CLI path validation - Mock which/where command for CLI path detection --------- Co-authored-by: Claude <noreply@anthropic.com>
2026-02-01 08:13:37 +00:00 · 2026-01-23 14:48:33 +01:00
parent 51a75ae589
commit 0b92349890
43 changed files with 3588 additions and 145 deletions
--- a/apps/ui/src/components/ui/provider-icon.tsx
+++ b/apps/ui/src/components/ui/provider-icon.tsx
@@ -19,6 +19,7 @@ const PROVIDER_ICON_KEYS = {
  minimax: 'minimax',
  glm: 'glm',
  bigpickle: 'bigpickle',
+  copilot: 'copilot',
 } as const;

 type ProviderIconKey = keyof typeof PROVIDER_ICON_KEYS;
@@ -113,6 +114,12 @@ const PROVIDER_ICON_DEFINITIONS: Record<ProviderIconKey, ProviderIconDefinition>
    path: 'M8 4c-2.21 0-4 1.79-4 4v8c0 2.21 1.79 4 4 4h8c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4H8zm0 2h8c1.103 0 2 .897 2 2v8c0 1.103-.897 2-2 2H8c-1.103 0-2-.897-2-2V8c0-1.103.897-2 2-2zm2 3a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2zm-4 4a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2z',
    fill: '#4ADE80',
  },
+  copilot: {
+    viewBox: '0 0 98 96',
+    // Official GitHub Octocat logo mark
+    path: 'M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z',
+    fill: '#ffffff',
+  },
 };

 export interface ProviderIconProps extends Omit<SVGProps<SVGSVGElement>, 'viewBox'> {
@@ -198,6 +205,10 @@ export function GeminiIcon({ title, className, ...props }: GeminiIconProps) {
  );
 }

+export function CopilotIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.copilot} {...props} />;
+}
+
 export function GrokIcon(props: Omit<ProviderIconProps, 'provider'>) {
  return <ProviderIcon provider={PROVIDER_ICON_KEYS.grok} {...props} />;
 }
@@ -424,6 +435,7 @@ export const PROVIDER_ICON_COMPONENTS: Record<
  codex: OpenAIIcon,
  opencode: OpenCodeIcon,
  gemini: GeminiIcon,
+  copilot: CopilotIcon,
 };

 /**
@@ -574,6 +586,10 @@ function getUnderlyingModelIcon(model?: AgentModel | string): ProviderIconKey {
  if (modelStr.includes('grok')) {
    return 'grok';
  }
+  // GitHub Copilot models
+  if (modelStr.includes('copilot')) {
+    return 'copilot';
+  }
  // Cursor models - canonical format includes 'cursor-' prefix
  // Also support legacy IDs for backward compatibility
  if (
@@ -591,6 +607,7 @@ function getUnderlyingModelIcon(model?: AgentModel | string): ProviderIconKey {
  if (provider === 'codex') return 'openai';
  if (provider === 'cursor') return 'cursor';
  if (provider === 'opencode') return 'opencode';
+  if (provider === 'copilot') return 'copilot';
  return 'anthropic';
 }

@@ -615,6 +632,7 @@ export function getProviderIconForModel(
    minimax: MiniMaxIcon,
    glm: GlmIcon,
    bigpickle: BigPickleIcon,
+    copilot: CopilotIcon,
  };

  return iconMap[iconKey] || AnthropicIcon;
--- a/apps/ui/src/components/views/board-view/shared/model-constants.ts
+++ b/apps/ui/src/components/views/board-view/shared/model-constants.ts
@@ -5,6 +5,7 @@ import {
  CODEX_MODEL_MAP,
  OPENCODE_MODELS as OPENCODE_MODEL_CONFIGS,
  GEMINI_MODEL_MAP,
+  COPILOT_MODEL_MAP,
 } from '@automaker/types';
 import { Brain, Zap, Scale, Cpu, Rocket, Sparkles } from 'lucide-react';
 import {
@@ -13,6 +14,7 @@ import {
  OpenAIIcon,
  OpenCodeIcon,
  GeminiIcon,
+  CopilotIcon,
 } from '@/components/ui/provider-icon';

 export type ModelOption = {
@@ -140,7 +142,22 @@ export const GEMINI_MODELS: ModelOption[] = Object.entries(GEMINI_MODEL_MAP).map
 );

 /**
- * All available models (Claude + Cursor + Codex + OpenCode + Gemini)
+ * Copilot models derived from COPILOT_MODEL_MAP
+ * Model IDs already have 'copilot-' prefix
+ */
+export const COPILOT_MODELS: ModelOption[] = Object.entries(COPILOT_MODEL_MAP).map(
+  ([id, config]) => ({
+    id, // IDs already have copilot- prefix (e.g., 'copilot-gpt-4o')
+    label: config.label,
+    description: config.description,
+    badge: config.supportsVision ? 'Vision' : 'Standard',
+    provider: 'copilot' as ModelProvider,
+    hasThinking: false,
+  })
+);
+
+/**
+ * All available models (Claude + Cursor + Codex + OpenCode + Gemini + Copilot)
 */
 export const ALL_MODELS: ModelOption[] = [
  ...CLAUDE_MODELS,
@@ -148,6 +165,7 @@ export const ALL_MODELS: ModelOption[] = [
  ...CODEX_MODELS,
  ...OPENCODE_MODELS,
  ...GEMINI_MODELS,
+  ...COPILOT_MODELS,
 ];

 export const THINKING_LEVELS: ThinkingLevel[] = ['none', 'low', 'medium', 'high', 'ultrathink'];
@@ -195,4 +213,5 @@ export const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: str
  Codex: OpenAIIcon,
  OpenCode: OpenCodeIcon,
  Gemini: GeminiIcon,
+  Copilot: CopilotIcon,
 };
--- a/apps/ui/src/components/views/settings-view.tsx
+++ b/apps/ui/src/components/views/settings-view.tsx
@@ -24,6 +24,7 @@ import {
  CodexSettingsTab,
  OpencodeSettingsTab,
  GeminiSettingsTab,
+  CopilotSettingsTab,
 } from './settings-view/providers';
 import { MCPServersSection } from './settings-view/mcp-servers';
 import { PromptCustomizationSection } from './settings-view/prompts';
@@ -126,6 +127,8 @@ export function SettingsView() {
        return <OpencodeSettingsTab />;
      case 'gemini-provider':
        return <GeminiSettingsTab />;
+      case 'copilot-provider':
+        return <CopilotSettingsTab />;
      case 'providers':
      case 'claude': // Backwards compatibility - redirect to claude-provider
        return <ClaudeSettingsTab />;
--- a/apps/ui/src/components/views/settings-view/cli-status/copilot-cli-status.tsx
+++ b/apps/ui/src/components/views/settings-view/cli-status/copilot-cli-status.tsx
@@ -0,0 +1,234 @@
+import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { CheckCircle2, AlertCircle, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+import { CopilotIcon } from '@/components/ui/provider-icon';
+import type { CopilotAuthStatus } from '@automaker/types';
+
+// Re-export for backwards compatibility
+export type { CopilotAuthStatus };
+
+function getAuthMethodLabel(method: CopilotAuthStatus['method']): string {
+  switch (method) {
+    case 'oauth':
+      return 'GitHub OAuth';
+    case 'cli':
+      return 'Copilot CLI';
+    default:
+      return method || 'Unknown';
+  }
+}
+
+interface CopilotCliStatusProps {
+  status: CliStatus | null;
+  authStatus?: CopilotAuthStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+export function CopilotCliStatusSkeleton() {
+  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 CopilotCliStatus({
+  status,
+  authStatus,
+  isChecking,
+  onRefresh,
+}: CopilotCliStatusProps) {
+  if (!status) return <CopilotCliStatusSkeleton />;
+
+  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-violet-500/20 to-violet-600/10 flex items-center justify-center border border-violet-500/20">
+              <CopilotIcon className="w-5 h-5 text-violet-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              GitHub Copilot CLI
+            </h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-copilot-cli"
+            title="Refresh Copilot CLI detection"
+            aria-label="Refresh Copilot 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">
+          GitHub Copilot CLI provides access to GPT and Claude models via your Copilot subscription.
+        </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">Copilot 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>
+                    )}
+                    {authStatus.login && (
+                      <p>
+                        User: <span className="font-mono">{authStatus.login}</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 Required</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">gh auth login</code>{' '}
+                    in your terminal to authenticate with GitHub.
+                  </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">Copilot CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation ||
+                    'Install GitHub Copilot CLI to use models via your Copilot subscription.'}
+                </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>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx
+++ b/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx
@@ -18,6 +18,7 @@ const NAV_ID_TO_PROVIDER: Record<string, ModelProvider> = {
  'codex-provider': 'codex',
  'opencode-provider': 'opencode',
  'gemini-provider': 'gemini',
+  'copilot-provider': 'copilot',
 };

 interface SettingsNavigationProps {
--- a/apps/ui/src/components/views/settings-view/config/navigation.ts
+++ b/apps/ui/src/components/views/settings-view/config/navigation.ts
@@ -23,6 +23,7 @@ import {
  OpenAIIcon,
  OpenCodeIcon,
  GeminiIcon,
+  CopilotIcon,
 } from '@/components/ui/provider-icon';
 import type { SettingsViewId } from '../hooks/use-settings-view';

@@ -58,6 +59,7 @@ export const GLOBAL_NAV_GROUPS: NavigationGroup[] = [
          { id: 'codex-provider', label: 'Codex', icon: OpenAIIcon },
          { id: 'opencode-provider', label: 'OpenCode', icon: OpenCodeIcon },
          { id: 'gemini-provider', label: 'Gemini', icon: GeminiIcon },
+          { id: 'copilot-provider', label: 'Copilot', icon: CopilotIcon },
        ],
      },
      { id: 'mcp-servers', label: 'MCP Servers', icon: Plug },
--- a/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts
+++ b/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts
@@ -9,6 +9,7 @@ export type SettingsViewId =
  | 'codex-provider'
  | 'opencode-provider'
  | 'gemini-provider'
+  | 'copilot-provider'
  | 'mcp-servers'
  | 'prompts'
  | 'model-defaults'
--- a/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
+++ b/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
@@ -8,6 +8,7 @@ import type {
  CodexModelId,
  OpencodeModelId,
  GeminiModelId,
+  CopilotModelId,
  GroupedModel,
  PhaseModelEntry,
  ClaudeCompatibleProvider,
@@ -27,6 +28,7 @@ import {
  CURSOR_MODELS,
  OPENCODE_MODELS,
  GEMINI_MODELS,
+  COPILOT_MODELS,
  THINKING_LEVELS,
  THINKING_LEVEL_LABELS,
  REASONING_EFFORT_LEVELS,
@@ -42,6 +44,7 @@ import {
  GlmIcon,
  MiniMaxIcon,
  GeminiIcon,
+  CopilotIcon,
  getProviderIconForModel,
 } from '@/components/ui/provider-icon';
 import { Button } from '@/components/ui/button';
@@ -172,6 +175,7 @@ export function PhaseModelSelector({
  const {
    enabledCursorModels,
    enabledGeminiModels,
+    enabledCopilotModels,
    favoriteModels,
    toggleFavoriteModel,
    codexModels,
@@ -331,6 +335,11 @@ export function PhaseModelSelector({
    return enabledGeminiModels.includes(model.id as GeminiModelId);
  });

+  // Filter Copilot models to only show enabled ones
+  const availableCopilotModels = COPILOT_MODELS.filter((model) => {
+    return enabledCopilotModels.includes(model.id as CopilotModelId);
+  });
+
  // Helper to find current selected model details
  const currentModel = useMemo(() => {
    const claudeModel = CLAUDE_MODELS.find((m) => m.id === selectedModel);
@@ -378,6 +387,15 @@ export function PhaseModelSelector({
      };
    }

+    // Check Copilot models
+    const copilotModel = availableCopilotModels.find((m) => m.id === selectedModel);
+    if (copilotModel) {
+      return {
+        ...copilotModel,
+        icon: CopilotIcon,
+      };
+    }
+
    // 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) };
@@ -479,6 +497,7 @@ export function PhaseModelSelector({
    selectedThinkingLevel,
    availableCursorModels,
    availableGeminiModels,
+    availableCopilotModels,
    transformedCodexModels,
    dynamicOpencodeModels,
    enabledProviders,
@@ -545,19 +564,22 @@ export function PhaseModelSelector({
  // Check if providers are disabled (needed for rendering conditions)
  const isCursorDisabled = disabledProviders.includes('cursor');
  const isGeminiDisabled = disabledProviders.includes('gemini');
+  const isCopilotDisabled = disabledProviders.includes('copilot');

  // Group models (filtering out disabled providers)
-  const { favorites, claude, cursor, codex, gemini, opencode } = useMemo(() => {
+  const { favorites, claude, cursor, codex, gemini, copilot, 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 copModels: typeof COPILOT_MODELS = [];
    const ocModels: ModelOption[] = [];

    const isClaudeDisabled = disabledProviders.includes('claude');
    const isCodexDisabled = disabledProviders.includes('codex');
    const isGeminiDisabledInner = disabledProviders.includes('gemini');
+    const isCopilotDisabledInner = disabledProviders.includes('copilot');
    const isOpencodeDisabled = disabledProviders.includes('opencode');

    // Process Claude Models (skip if provider is disabled)
@@ -604,6 +626,17 @@ export function PhaseModelSelector({
      });
    }

+    // Process Copilot Models (skip if provider is disabled)
+    if (!isCopilotDisabledInner) {
+      availableCopilotModels.forEach((model) => {
+        if (favoriteModels.includes(model.id)) {
+          favs.push(model);
+        } else {
+          copModels.push(model);
+        }
+      });
+    }
+
    // Process OpenCode Models (skip if provider is disabled)
    if (!isOpencodeDisabled) {
      allOpencodeModels.forEach((model) => {
@@ -621,12 +654,14 @@ export function PhaseModelSelector({
      cursor: curModels,
      codex: codModels,
      gemini: gemModels,
+      copilot: copModels,
      opencode: ocModels,
    };
  }, [
    favoriteModels,
    availableCursorModels,
    availableGeminiModels,
+    availableCopilotModels,
    transformedCodexModels,
    allOpencodeModels,
    disabledProviders,
@@ -1117,6 +1152,59 @@ export function PhaseModelSelector({
    );
  };

+  // Render Copilot model item - simple selector without thinking level
+  const renderCopilotModelItem = (model: (typeof COPILOT_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 CopilotModelId });
+          setOpen(false);
+        }}
+        className="group flex items-center justify-between py-2"
+      >
+        <div className="flex items-center gap-3 overflow-hidden">
+          <CopilotIcon
+            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,
@@ -1933,6 +2021,10 @@ export function PhaseModelSelector({
                    if (model.provider === 'gemini') {
                      return renderGeminiModelItem(model as (typeof GEMINI_MODELS)[0]);
                    }
+                    // Copilot model
+                    if (model.provider === 'copilot') {
+                      return renderCopilotModelItem(model as (typeof COPILOT_MODELS)[0]);
+                    }
                    // OpenCode model
                    if (model.provider === 'opencode') {
                      return renderOpencodeModelItem(model);
@@ -2017,6 +2109,12 @@ export function PhaseModelSelector({
            </CommandGroup>
          )}

+          {!isCopilotDisabled && copilot.length > 0 && (
+            <CommandGroup heading="Copilot Models">
+              {copilot.map((model) => renderCopilotModelItem(model))}
+            </CommandGroup>
+          )}
+
          {opencodeSections.length > 0 && (
            <CommandGroup heading={OPENCODE_CLI_GROUP_LABEL}>
              {opencodeSections.map((section, sectionIndex) => (
--- a/apps/ui/src/components/views/settings-view/providers/copilot-model-configuration.tsx
+++ b/apps/ui/src/components/views/settings-view/providers/copilot-model-configuration.tsx
@@ -0,0 +1,53 @@
+import type { CopilotModelId } from '@automaker/types';
+import { CopilotIcon } from '@/components/ui/provider-icon';
+import { COPILOT_MODEL_MAP } from '@automaker/types';
+import { BaseModelConfiguration, type BaseModelInfo } from './shared/base-model-configuration';
+
+interface CopilotModelConfigurationProps {
+  enabledCopilotModels: CopilotModelId[];
+  copilotDefaultModel: CopilotModelId;
+  isSaving: boolean;
+  onDefaultModelChange: (model: CopilotModelId) => void;
+  onModelToggle: (model: CopilotModelId, enabled: boolean) => void;
+}
+
+interface CopilotModelInfo extends BaseModelInfo<CopilotModelId> {
+  supportsVision: boolean;
+}
+
+// Build model info from the COPILOT_MODEL_MAP
+const COPILOT_MODELS: CopilotModelInfo[] = Object.entries(COPILOT_MODEL_MAP).map(
+  ([id, config]) => ({
+    id: id as CopilotModelId,
+    label: config.label,
+    description: config.description,
+    supportsVision: config.supportsVision,
+  })
+);
+
+export function CopilotModelConfiguration({
+  enabledCopilotModels,
+  copilotDefaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+}: CopilotModelConfigurationProps) {
+  return (
+    <BaseModelConfiguration<CopilotModelId>
+      providerName="Copilot"
+      icon={<CopilotIcon className="w-5 h-5 text-violet-500" />}
+      iconGradient="from-violet-500/20 to-violet-600/10"
+      iconBorder="border-violet-500/20"
+      models={COPILOT_MODELS}
+      enabledModels={enabledCopilotModels}
+      defaultModel={copilotDefaultModel}
+      isSaving={isSaving}
+      onDefaultModelChange={onDefaultModelChange}
+      onModelToggle={onModelToggle}
+      getFeatureBadge={(model) => {
+        const copilotModel = model as CopilotModelInfo;
+        return copilotModel.supportsVision ? { show: true, label: 'Vision' } : null;
+      }}
+    />
+  );
+}
--- a/apps/ui/src/components/views/settings-view/providers/copilot-settings-tab.tsx
+++ b/apps/ui/src/components/views/settings-view/providers/copilot-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 { CopilotCliStatus, CopilotCliStatusSkeleton } from '../cli-status/copilot-cli-status';
+import { CopilotModelConfiguration } from './copilot-model-configuration';
+import { ProviderToggle } from './provider-toggle';
+import { useCopilotCliStatus } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import type { CliStatus as SharedCliStatus } from '../shared/types';
+import type { CopilotAuthStatus } from '../cli-status/copilot-cli-status';
+import type { CopilotModelId } from '@automaker/types';
+
+export function CopilotSettingsTab() {
+  const queryClient = useQueryClient();
+  const { enabledCopilotModels, copilotDefaultModel, setCopilotDefaultModel, toggleCopilotModel } =
+    useAppStore();
+
+  const [isSaving, setIsSaving] = useState(false);
+
+  // React Query hooks for data fetching
+  const {
+    data: cliStatusData,
+    isLoading: isCheckingCopilotCli,
+    refetch: refetchCliStatus,
+  } = useCopilotCliStatus();
+
+  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((): CopilotAuthStatus | null => {
+    if (!cliStatusData?.auth) return null;
+    return {
+      authenticated: cliStatusData.auth.authenticated,
+      method: (cliStatusData.auth.method as CopilotAuthStatus['method']) || 'none',
+      login: cliStatusData.auth.login,
+      host: cliStatusData.auth.host,
+      error: cliStatusData.auth.error,
+    };
+  }, [cliStatusData]);
+
+  // Refresh all copilot-related queries
+  const handleRefreshCopilotCli = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: queryKeys.cli.copilot() });
+    await refetchCliStatus();
+    toast.success('Copilot CLI refreshed');
+  }, [queryClient, refetchCliStatus]);
+
+  const handleDefaultModelChange = useCallback(
+    (model: CopilotModelId) => {
+      setIsSaving(true);
+      try {
+        setCopilotDefaultModel(model);
+        toast.success('Default model updated');
+      } catch {
+        toast.error('Failed to update default model');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [setCopilotDefaultModel]
+  );
+
+  const handleModelToggle = useCallback(
+    (model: CopilotModelId, enabled: boolean) => {
+      setIsSaving(true);
+      try {
+        toggleCopilotModel(model, enabled);
+      } catch {
+        toast.error('Failed to update models');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [toggleCopilotModel]
+  );
+
+  // Show skeleton only while checking CLI status initially
+  if (!cliStatus && isCheckingCopilotCli) {
+    return (
+      <div className="space-y-6">
+        <CopilotCliStatusSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Provider Visibility Toggle */}
+      <ProviderToggle provider="copilot" providerLabel="GitHub Copilot" />
+
+      <CopilotCliStatus
+        status={cliStatus}
+        authStatus={authStatus}
+        isChecking={isCheckingCopilotCli}
+        onRefresh={handleRefreshCopilotCli}
+      />
+
+      {/* Model Configuration - Only show when CLI is installed */}
+      {isCliInstalled && (
+        <CopilotModelConfiguration
+          enabledCopilotModels={enabledCopilotModels}
+          copilotDefaultModel={copilotDefaultModel}
+          isSaving={isSaving}
+          onDefaultModelChange={handleDefaultModelChange}
+          onModelToggle={handleModelToggle}
+        />
+      )}
+    </div>
+  );
+}
+
+export default CopilotSettingsTab;
--- a/apps/ui/src/components/views/settings-view/providers/gemini-model-configuration.tsx
+++ b/apps/ui/src/components/views/settings-view/providers/gemini-model-configuration.tsx
@@ -1,17 +1,7 @@
-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';
+import { BaseModelConfiguration, type BaseModelInfo } from './shared/base-model-configuration';

 interface GeminiModelConfigurationProps {
  enabledGeminiModels: GeminiModelId[];
@@ -21,25 +11,17 @@ interface GeminiModelConfigurationProps {
  onModelToggle: (model: GeminiModelId, enabled: boolean) => void;
 }

-interface GeminiModelInfo {
-  id: GeminiModelId;
-  label: string;
-  description: string;
+interface GeminiModelInfo extends BaseModelInfo<GeminiModelId> {
  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>;
+const GEMINI_MODELS: GeminiModelInfo[] = Object.entries(GEMINI_MODEL_MAP).map(([id, config]) => ({
+  id: id as GeminiModelId,
+  label: config.label,
+  description: config.description,
+  supportsThinking: config.supportsThinking,
+}));

 export function GeminiModelConfiguration({
  enabledGeminiModels,
@@ -48,99 +30,22 @@ export function GeminiModelConfiguration({
  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>
+    <BaseModelConfiguration<GeminiModelId>
+      providerName="Gemini"
+      icon={<GeminiIcon className="w-5 h-5 text-blue-500" />}
+      iconGradient="from-blue-500/20 to-blue-600/10"
+      iconBorder="border-blue-500/20"
+      models={GEMINI_MODELS}
+      enabledModels={enabledGeminiModels}
+      defaultModel={geminiDefaultModel}
+      isSaving={isSaving}
+      onDefaultModelChange={onDefaultModelChange}
+      onModelToggle={onModelToggle}
+      getFeatureBadge={(model) => {
+        const geminiModel = model as GeminiModelInfo;
+        return geminiModel.supportsThinking ? { show: true, label: 'Thinking' } : null;
+      }}
+    />
  );
 }
--- a/apps/ui/src/components/views/settings-view/providers/index.ts
+++ b/apps/ui/src/components/views/settings-view/providers/index.ts
@@ -4,3 +4,4 @@ export { CursorSettingsTab } from './cursor-settings-tab';
 export { CodexSettingsTab } from './codex-settings-tab';
 export { OpencodeSettingsTab } from './opencode-settings-tab';
 export { GeminiSettingsTab } from './gemini-settings-tab';
+export { CopilotSettingsTab } from './copilot-settings-tab';
--- a/apps/ui/src/components/views/settings-view/providers/provider-tabs.tsx
+++ b/apps/ui/src/components/views/settings-view/providers/provider-tabs.tsx
@@ -6,21 +6,23 @@ import {
  OpenAIIcon,
  GeminiIcon,
  OpenCodeIcon,
+  CopilotIcon,
 } 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';
+import { CopilotSettingsTab } from './copilot-settings-tab';

 interface ProviderTabsProps {
-  defaultTab?: 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini';
+  defaultTab?: 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini' | 'copilot';
 }

 export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
  return (
    <Tabs defaultValue={defaultTab} className="w-full">
-      <TabsList className="grid w-full grid-cols-5 mb-6">
+      <TabsList className="grid w-full grid-cols-6 mb-6">
        <TabsTrigger value="claude" className="flex items-center gap-2">
          <AnthropicIcon className="w-4 h-4" />
          Claude
@@ -41,6 +43,10 @@ export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
          <GeminiIcon className="w-4 h-4" />
          Gemini
        </TabsTrigger>
+        <TabsTrigger value="copilot" className="flex items-center gap-2">
+          <CopilotIcon className="w-4 h-4" />
+          Copilot
+        </TabsTrigger>
      </TabsList>

      <TabsContent value="claude">
@@ -62,6 +68,10 @@ export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
      <TabsContent value="gemini">
        <GeminiSettingsTab />
      </TabsContent>
+
+      <TabsContent value="copilot">
+        <CopilotSettingsTab />
+      </TabsContent>
    </Tabs>
  );
 }
--- a/apps/ui/src/components/views/settings-view/providers/shared/base-model-configuration.tsx
+++ b/apps/ui/src/components/views/settings-view/providers/shared/base-model-configuration.tsx
@@ -0,0 +1,183 @@
+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 { ReactNode } from 'react';
+
+/**
+ * Generic model info structure for model configuration components
+ */
+export interface BaseModelInfo<T extends string> {
+  id: T;
+  label: string;
+  description: string;
+}
+
+/**
+ * Badge configuration for feature indicators
+ */
+export interface FeatureBadge {
+  show: boolean;
+  label: string;
+}
+
+/**
+ * Props for the base model configuration component
+ */
+export interface BaseModelConfigurationProps<T extends string> {
+  /** Provider name for display (e.g., "Gemini", "Copilot") */
+  providerName: string;
+  /** Icon component to display in header */
+  icon: ReactNode;
+  /** Icon container gradient classes (e.g., "from-blue-500/20 to-blue-600/10") */
+  iconGradient: string;
+  /** Icon border color class (e.g., "border-blue-500/20") */
+  iconBorder: string;
+  /** List of available models */
+  models: BaseModelInfo<T>[];
+  /** Currently enabled model IDs */
+  enabledModels: T[];
+  /** Currently selected default model */
+  defaultModel: T;
+  /** Whether saving is in progress */
+  isSaving: boolean;
+  /** Callback when default model changes */
+  onDefaultModelChange: (model: T) => void;
+  /** Callback when a model is toggled */
+  onModelToggle: (model: T, enabled: boolean) => void;
+  /** Function to determine if a model should show a feature badge */
+  getFeatureBadge?: (model: BaseModelInfo<T>) => FeatureBadge | null;
+}
+
+/**
+ * Base component for provider model configuration
+ *
+ * Provides a consistent UI for configuring which models are available
+ * and which is the default. Individual provider components can customize
+ * by providing their own icon, colors, and feature badges.
+ */
+export function BaseModelConfiguration<T extends string>({
+  providerName,
+  icon,
+  iconGradient,
+  iconBorder,
+  models,
+  enabledModels,
+  defaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+  getFeatureBadge,
+}: BaseModelConfigurationProps<T>) {
+  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={cn(
+              'w-9 h-9 rounded-xl flex items-center justify-center border',
+              `bg-gradient-to-br ${iconGradient}`,
+              iconBorder
+            )}
+          >
+            {icon}
+          </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 {providerName} 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={defaultModel}
+            onValueChange={(v) => onDefaultModelChange(v as T)}
+            disabled={isSaving}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {models.map((model) => {
+                const badge = getFeatureBadge?.(model);
+                return (
+                  <SelectItem key={model.id} value={model.id}>
+                    <div className="flex items-center gap-2">
+                      <span>{model.label}</span>
+                      {badge?.show && (
+                        <Badge variant="outline" className="text-xs">
+                          {badge.label}
+                        </Badge>
+                      )}
+                    </div>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-3">
+          <Label>Available Models</Label>
+          <div className="grid gap-3">
+            {models.map((model) => {
+              const isDefault = model.id === defaultModel;
+              // Default model is always considered enabled
+              const isEnabled = isDefault || enabledModels.includes(model.id);
+              const badge = getFeatureBadge?.(model);
+
+              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>
+                        {badge?.show && (
+                          <Badge variant="outline" className="text-xs">
+                            {badge.label}
+                          </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>
+  );
+}
--- a/apps/ui/src/components/views/setup-view/steps/providers-setup-step.tsx
+++ b/apps/ui/src/components/views/setup-view/steps/providers-setup-step.tsx
@@ -37,6 +37,7 @@ import {
  OpenAIIcon,
  OpenCodeIcon,
  GeminiIcon,
+  CopilotIcon,
 } from '@/components/ui/provider-icon';
 import { TerminalOutput } from '../components';
 import { useCliInstallation, useTokenSave } from '../hooks';
@@ -46,7 +47,7 @@ interface ProvidersSetupStepProps {
  onBack: () => void;
 }

-type ProviderTab = 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini';
+type ProviderTab = 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini' | 'copilot';

 // ============================================================================
 // Claude Content
@@ -1527,6 +1528,245 @@ function GeminiContent() {
  );
 }

+// ============================================================================
+// Copilot Content
+// ============================================================================
+function CopilotContent() {
+  const { copilotCliStatus, setCopilotCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = 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?.getCopilotStatus) return;
+      const result = await api.setup.getCopilotStatus();
+      if (result.success) {
+        setCopilotCliStatus({
+          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('Copilot CLI is ready!');
+        }
+      }
+    } catch {
+      // Ignore
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setCopilotCliStatus]);
+
+  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 handleLogin = async () => {
+    setIsLoggingIn(true);
+    try {
+      const loginCommand = copilotCliStatus?.loginCommand || 'gh 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?.getCopilotStatus) return;
+          const result = await api.setup.getCopilotStatus();
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setCopilotCliStatus({
+              ...copilotCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            });
+            setIsLoggingIn(false);
+            toast.success('Successfully authenticated with GitHub!');
+          }
+        } 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 = copilotCliStatus?.installed && copilotCliStatus?.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">
+            <CopilotIcon className="w-5 h-5" />
+            GitHub Copilot 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>
+          {copilotCliStatus?.installed
+            ? copilotCliStatus.auth?.authenticated
+              ? `Authenticated${copilotCliStatus.version ? ` (v${copilotCliStatus.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">SDK Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {copilotCliStatus?.version && `Version: ${copilotCliStatus.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" />
+              <div>
+                <p className="font-medium text-foreground">Authenticated</p>
+                {copilotCliStatus?.auth?.login && (
+                  <p className="text-sm text-muted-foreground">
+                    Logged in as {copilotCliStatus.auth.login}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {!copilotCliStatus?.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">Copilot CLI not found</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Install the GitHub Copilot CLI to use Copilot 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 Copilot 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">
+                  {copilotCliStatus?.installCommand || 'npm install -g @github/copilot'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() =>
+                    copyCommand(
+                      copilotCliStatus?.installCommand || 'npm install -g @github/copilot'
+                    )
+                  }
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {copilotCliStatus?.installed && !copilotCliStatus?.auth?.authenticated && !isChecking && (
+          <div className="space-y-4">
+            {/* Show SDK 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">SDK Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {copilotCliStatus?.version && `Version: ${copilotCliStatus.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">GitHub not authenticated</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Run the GitHub CLI login command to authenticate.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                  {copilotCliStatus?.loginCommand || 'gh auth login'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => copyCommand(copilotCliStatus?.loginCommand || 'gh 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>
+            </div>
+          </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 Copilot CLI status...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
 // ============================================================================
 // Main Component
 // ============================================================================
@@ -1544,12 +1784,14 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
    codexAuthStatus,
    opencodeCliStatus,
    geminiCliStatus,
+    copilotCliStatus,
    setClaudeCliStatus,
    setCursorCliStatus,
    setCodexCliStatus,
    setCodexAuthStatus,
    setOpencodeCliStatus,
    setGeminiCliStatus,
+    setCopilotCliStatus,
  } = useSetupStore();

  // Check all providers on mount
@@ -1659,8 +1901,35 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
      }
    };

+    // Check Copilot
+    const checkCopilot = async () => {
+      try {
+        if (!api.setup?.getCopilotStatus) return;
+        const result = await api.setup.getCopilotStatus();
+        if (result.success) {
+          setCopilotCliStatus({
+            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(), checkGemini()]);
+    await Promise.all([
+      checkClaude(),
+      checkCursor(),
+      checkCodex(),
+      checkOpencode(),
+      checkGemini(),
+      checkCopilot(),
+    ]);
    setIsInitialChecking(false);
  }, [
    setClaudeCliStatus,
@@ -1669,6 +1938,7 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
    setCodexAuthStatus,
    setOpencodeCliStatus,
    setGeminiCliStatus,
+    setCopilotCliStatus,
  ]);

  useEffect(() => {
@@ -1698,12 +1968,16 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
  const isGeminiInstalled = geminiCliStatus?.installed === true;
  const isGeminiAuthenticated = geminiCliStatus?.auth?.authenticated === true;

+  const isCopilotInstalled = copilotCliStatus?.installed === true;
+  const isCopilotAuthenticated = copilotCliStatus?.auth?.authenticated === true;
+
  const hasAtLeastOneProvider =
    isClaudeAuthenticated ||
    isCursorAuthenticated ||
    isCodexAuthenticated ||
    isOpencodeAuthenticated ||
-    isGeminiAuthenticated;
+    isGeminiAuthenticated ||
+    isCopilotAuthenticated;

  type ProviderStatus = 'not_installed' | 'installed_not_auth' | 'authenticated' | 'verifying';

@@ -1754,6 +2028,13 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
      status: getProviderStatus(isGeminiInstalled, isGeminiAuthenticated),
      color: 'text-blue-500',
    },
+    {
+      id: 'copilot' as const,
+      label: 'Copilot',
+      icon: CopilotIcon,
+      status: getProviderStatus(isCopilotInstalled, isCopilotAuthenticated),
+      color: 'text-violet-500',
+    },
  ];

  const renderStatusIcon = (status: ProviderStatus) => {
@@ -1790,7 +2071,7 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
      )}

      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as ProviderTab)}>
-        <TabsList className="grid w-full grid-cols-5 h-auto p-1">
+        <TabsList className="grid w-full grid-cols-6 h-auto p-1">
          {providers.map((provider) => {
            const Icon = provider.icon;
            return (
@@ -1839,6 +2120,9 @@ export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps)
          <TabsContent value="gemini" className="mt-0">
            <GeminiContent />
          </TabsContent>
+          <TabsContent value="copilot" className="mt-0">
+            <CopilotContent />
+          </TabsContent>
        </div>
      </Tabs>

--- a/apps/ui/src/hooks/queries/index.ts
+++ b/apps/ui/src/hooks/queries/index.ts
@@ -64,6 +64,7 @@ export {
  useCodexCliStatus,
  useOpencodeCliStatus,
  useGeminiCliStatus,
+  useCopilotCliStatus,
  useGitHubCliStatus,
  useApiKeysStatus,
  usePlatformInfo,
--- a/apps/ui/src/hooks/queries/use-cli-status.ts
+++ b/apps/ui/src/hooks/queries/use-cli-status.ts
@@ -109,6 +109,26 @@ export function useGeminiCliStatus() {
  });
 }

+/**
+ * Fetch Copilot SDK status
+ *
+ * @returns Query result with Copilot SDK status
+ */
+export function useCopilotCliStatus() {
+  return useQuery({
+    queryKey: queryKeys.cli.copilot(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      const result = await api.setup.getCopilotStatus();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch Copilot status');
+      }
+      return result;
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+  });
+}
+
 /**
 * Fetch GitHub CLI status
 *
--- a/apps/ui/src/hooks/use-settings-sync.ts
+++ b/apps/ui/src/hooks/use-settings-sync.ts
@@ -22,11 +22,13 @@ import { waitForMigrationComplete, resetMigrationState } from './use-settings-mi
 import {
  DEFAULT_OPENCODE_MODEL,
  DEFAULT_GEMINI_MODEL,
+  DEFAULT_COPILOT_MODEL,
  DEFAULT_MAX_CONCURRENCY,
  getAllOpencodeModelIds,
  getAllCursorModelIds,
  getAllCodexModelIds,
  getAllGeminiModelIds,
+  getAllCopilotModelIds,
  migrateCursorModelIds,
  migrateOpencodeModelIds,
  migratePhaseModelEntry,
@@ -35,6 +37,7 @@ import {
  type OpencodeModelId,
  type CodexModelId,
  type GeminiModelId,
+  type CopilotModelId,
 } from '@automaker/types';

 const logger = createLogger('SettingsSync');
@@ -75,6 +78,8 @@ const SETTINGS_FIELDS_TO_SYNC = [
  'codexDefaultModel',
  'enabledGeminiModels',
  'geminiDefaultModel',
+  'enabledCopilotModels',
+  'copilotDefaultModel',
  'enabledDynamicModelIds',
  'disabledProviders',
  'autoLoadClaudeMd',
@@ -607,6 +612,21 @@ export async function refreshSettingsFromServer(): Promise<boolean> {
      sanitizedEnabledGeminiModels.push(sanitizedGeminiDefaultModel);
    }

+    // Sanitize Copilot models
+    const validCopilotModelIds = new Set(getAllCopilotModelIds());
+    const sanitizedEnabledCopilotModels = (serverSettings.enabledCopilotModels ?? []).filter(
+      (id): id is CopilotModelId => validCopilotModelIds.has(id as CopilotModelId)
+    );
+    const sanitizedCopilotDefaultModel = validCopilotModelIds.has(
+      serverSettings.copilotDefaultModel as CopilotModelId
+    )
+      ? (serverSettings.copilotDefaultModel as CopilotModelId)
+      : DEFAULT_COPILOT_MODEL;
+
+    if (!sanitizedEnabledCopilotModels.includes(sanitizedCopilotDefaultModel)) {
+      sanitizedEnabledCopilotModels.push(sanitizedCopilotDefaultModel);
+    }
+
    const persistedDynamicModelIds =
      serverSettings.enabledDynamicModelIds ?? currentAppState.enabledDynamicModelIds;
    const sanitizedDynamicModelIds = persistedDynamicModelIds.filter(
@@ -703,6 +723,8 @@ export async function refreshSettingsFromServer(): Promise<boolean> {
      codexDefaultModel: sanitizedCodexDefaultModel,
      enabledGeminiModels: sanitizedEnabledGeminiModels,
      geminiDefaultModel: sanitizedGeminiDefaultModel,
+      enabledCopilotModels: sanitizedEnabledCopilotModels,
+      copilotDefaultModel: sanitizedCopilotDefaultModel,
      enabledDynamicModelIds: sanitizedDynamicModelIds,
      disabledProviders: serverSettings.disabledProviders ?? [],
      autoLoadClaudeMd: serverSettings.autoLoadClaudeMd ?? false,
--- a/apps/ui/src/lib/http-api-client.ts
+++ b/apps/ui/src/lib/http-api-client.ts
@@ -1697,6 +1697,27 @@ export class HttpApiClient implements ElectronAPI {
      error?: string;
    }> => this.post('/api/setup/deauth-gemini'),

+    // Copilot SDK methods
+    getCopilotStatus: (): Promise<{
+      success: boolean;
+      status?: string;
+      installed?: boolean;
+      method?: string;
+      version?: string;
+      path?: string;
+      recommendation?: string;
+      auth?: {
+        authenticated: boolean;
+        method: string;
+        login?: string;
+        host?: string;
+        error?: string;
+      };
+      loginCommand?: string;
+      installCommand?: string;
+      error?: string;
+    }> => this.get('/api/setup/copilot-status'),
+
    onInstallProgress: (callback: (progress: unknown) => void) => {
      return this.subscribeToEvent('agent:stream', callback);
    },
--- a/apps/ui/src/lib/query-keys.ts
+++ b/apps/ui/src/lib/query-keys.ts
@@ -178,6 +178,8 @@ export const queryKeys = {
    opencode: () => ['cli', 'opencode'] as const,
    /** Gemini CLI status */
    gemini: () => ['cli', 'gemini'] as const,
+    /** Copilot SDK status */
+    copilot: () => ['cli', 'copilot'] as const,
    /** GitHub CLI status */
    github: () => ['cli', 'github'] as const,
    /** API keys status */
--- a/apps/ui/src/store/app-store.ts
+++ b/apps/ui/src/store/app-store.ts
@@ -22,6 +22,7 @@ import type {
  CodexModelId,
  OpencodeModelId,
  GeminiModelId,
+  CopilotModelId,
  PhaseModelConfig,
  PhaseModelKey,
  PhaseModelEntry,
@@ -41,9 +42,11 @@ import {
  getAllCodexModelIds,
  getAllOpencodeModelIds,
  getAllGeminiModelIds,
+  getAllCopilotModelIds,
  DEFAULT_PHASE_MODELS,
  DEFAULT_OPENCODE_MODEL,
  DEFAULT_GEMINI_MODEL,
+  DEFAULT_COPILOT_MODEL,
  DEFAULT_MAX_CONCURRENCY,
  DEFAULT_GLOBAL_SETTINGS,
 } from '@automaker/types';
@@ -736,6 +739,10 @@ export interface AppState {
  enabledGeminiModels: GeminiModelId[]; // Which Gemini models are available in feature modal
  geminiDefaultModel: GeminiModelId; // Default Gemini model selection

+  // Copilot SDK Settings (global)
+  enabledCopilotModels: CopilotModelId[]; // Which Copilot models are available in feature modal
+  copilotDefaultModel: CopilotModelId; // Default Copilot model selection
+
  // Provider Visibility Settings
  disabledProviders: ModelProvider[]; // Providers that are disabled and hidden from dropdowns

@@ -1230,6 +1237,11 @@ export interface AppActions {
  setGeminiDefaultModel: (model: GeminiModelId) => void;
  toggleGeminiModel: (model: GeminiModelId, enabled: boolean) => void;

+  // Copilot SDK Settings actions
+  setEnabledCopilotModels: (models: CopilotModelId[]) => void;
+  setCopilotDefaultModel: (model: CopilotModelId) => void;
+  toggleCopilotModel: (model: CopilotModelId, enabled: boolean) => void;
+
  // Provider Visibility Settings actions
  setDisabledProviders: (providers: ModelProvider[]) => void;
  toggleProviderDisabled: (provider: ModelProvider, disabled: boolean) => void;
@@ -1517,6 +1529,8 @@ const initialState: AppState = {
  opencodeModelsLastFailedAt: null,
  enabledGeminiModels: getAllGeminiModelIds(), // All Gemini models enabled by default
  geminiDefaultModel: DEFAULT_GEMINI_MODEL, // Default to Gemini 2.5 Flash
+  enabledCopilotModels: getAllCopilotModelIds(), // All Copilot models enabled by default
+  copilotDefaultModel: DEFAULT_COPILOT_MODEL, // Default to Claude Sonnet 4.5
  disabledProviders: [], // No providers disabled by default
  autoLoadClaudeMd: false, // Default to disabled (user must opt-in)
  skipSandboxWarning: false, // Default to disabled (show sandbox warning dialog)
@@ -2759,6 +2773,16 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
        : state.enabledGeminiModels.filter((m) => m !== model),
    })),

+  // Copilot SDK Settings actions
+  setEnabledCopilotModels: (models) => set({ enabledCopilotModels: models }),
+  setCopilotDefaultModel: (model) => set({ copilotDefaultModel: model }),
+  toggleCopilotModel: (model, enabled) =>
+    set((state) => ({
+      enabledCopilotModels: enabled
+        ? [...state.enabledCopilotModels, model]
+        : state.enabledCopilotModels.filter((m) => m !== model),
+    })),
+
  // Provider Visibility Settings actions
  setDisabledProviders: (providers) => set({ disabledProviders: providers }),
  toggleProviderDisabled: (provider, disabled) =>
--- a/apps/ui/src/store/setup-store.ts
+++ b/apps/ui/src/store/setup-store.ts
@@ -79,6 +79,22 @@ export interface GeminiCliStatus {
  error?: string;
 }

+// Copilot SDK Status
+export interface CopilotCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+    login?: string;
+    host?: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+  error?: string;
+}
+
 // Codex Auth Method
 export type CodexAuthMethod =
  | 'api_key_env' // OPENAI_API_KEY environment variable
@@ -137,6 +153,7 @@ export type SetupStep =
  | 'codex'
  | 'opencode'
  | 'gemini'
+  | 'copilot'
  | 'github'
  | 'complete';

@@ -169,6 +186,9 @@ export interface SetupState {
  // Gemini CLI state
  geminiCliStatus: GeminiCliStatus | null;

+  // Copilot SDK state
+  copilotCliStatus: CopilotCliStatus | null;
+
  // Setup preferences
  skipClaudeSetup: boolean;
 }
@@ -206,6 +226,9 @@ export interface SetupActions {
  // Gemini CLI
  setGeminiCliStatus: (status: GeminiCliStatus | null) => void;

+  // Copilot SDK
+  setCopilotCliStatus: (status: CopilotCliStatus | null) => void;
+
  // Preferences
  setSkipClaudeSetup: (skip: boolean) => void;
 }
@@ -241,6 +264,8 @@ const initialState: SetupState = {

  geminiCliStatus: null,

+  copilotCliStatus: null,
+
  skipClaudeSetup: shouldSkipSetup,
 };

@@ -316,6 +341,9 @@ export const useSetupStore = create<SetupState & SetupActions>()((set, get) => (
  // Gemini CLI
  setGeminiCliStatus: (status) => set({ geminiCliStatus: status }),

+  // Copilot SDK
+  setCopilotCliStatus: (status) => set({ copilotCliStatus: status }),
+
  // Preferences
  setSkipClaudeSetup: (skip) => set({ skipClaudeSetup: skip }),
 }));