refactor: restructure project to monorepo with apps directory

apps/app/src/components/views/settings-view/api-keys/api-key-field.tsx

@@ -0,0 +1,117 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { AlertCircle, CheckCircle2, Eye, EyeOff, Loader2, Zap } from "lucide-react";
+import type { ProviderConfig } from "@/config/api-providers";
+
+interface ApiKeyFieldProps {
+  config: ProviderConfig;
+}
+
+export function ApiKeyField({ config }: ApiKeyFieldProps) {
+  const {
+    label,
+    inputId,
+    placeholder,
+    value,
+    setValue,
+    showValue,
+    setShowValue,
+    hasStoredKey,
+    inputTestId,
+    toggleTestId,
+    testButton,
+    result,
+    resultTestId,
+    resultMessageTestId,
+    descriptionPrefix,
+    descriptionLinkHref,
+    descriptionLinkText,
+    descriptionSuffix,
+  } = config;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Label htmlFor={inputId} className="text-foreground">
+          {label}
+        </Label>
+        {hasStoredKey && <CheckCircle2 className="w-4 h-4 text-brand-500" />}
+      </div>
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Input
+            id={inputId}
+            type={showValue ? "text" : "password"}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={placeholder}
+            className="pr-10 bg-input border-border text-foreground placeholder:text-muted-foreground"
+            data-testid={inputTestId}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground hover:bg-transparent"
+            onClick={() => setShowValue(!showValue)}
+            data-testid={toggleTestId}
+          >
+            {showValue ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+          </Button>
+        </div>
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={testButton.onClick}
+          disabled={testButton.disabled}
+          className="bg-secondary hover:bg-accent text-secondary-foreground border border-border"
+          data-testid={testButton.testId}
+        >
+          {testButton.loading ? (
+            <>
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              Testing...
+            </>
+          ) : (
+            <>
+              <Zap className="w-4 h-4 mr-2" />
+              Test
+            </>
+          )}
+        </Button>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {descriptionPrefix}{" "}
+        <a
+          href={descriptionLinkHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-brand-500 hover:text-brand-400 hover:underline"
+        >
+          {descriptionLinkText}
+        </a>
+        {descriptionSuffix}
+      </p>
+      {result && (
+        <div
+          className={`flex items-center gap-2 p-3 rounded-lg ${
+            result.success
+              ? "bg-green-500/10 border border-green-500/20 text-green-400"
+              : "bg-red-500/10 border border-red-500/20 text-red-400"
+          }`}
+          data-testid={resultTestId}
+        >
+          {result.success ? (
+            <CheckCircle2 className="w-4 h-4" />
+          ) : (
+            <AlertCircle className="w-4 h-4" />
+          )}
+          <span className="text-sm" data-testid={resultMessageTestId}>
+            {result.message}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx

@@ -0,0 +1,72 @@
+import { useAppStore } from "@/store/app-store";
+import { useSetupStore } from "@/store/setup-store";
+import { Button } from "@/components/ui/button";
+import { Key, CheckCircle2 } from "lucide-react";
+import { ApiKeyField } from "./api-key-field";
+import { buildProviderConfigs } from "@/config/api-providers";
+import { AuthenticationStatusDisplay } from "./authentication-status-display";
+import { SecurityNotice } from "./security-notice";
+import { useApiKeyManagement } from "./hooks/use-api-key-management";
+
+export function ApiKeysSection() {
+  const { apiKeys } = useAppStore();
+  const { claudeAuthStatus, codexAuthStatus } = useSetupStore();
+
+  const { providerConfigParams, apiKeyStatus, handleSave, saved } =
+    useApiKeyManagement();
+
+  const providerConfigs = buildProviderConfigs(providerConfigParams);
+
+  return (
+    <div
+      id="api-keys"
+      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+    >
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center gap-2 mb-2">
+          <Key className="w-5 h-5 text-brand-500" />
+          <h2 className="text-lg font-semibold text-foreground">API Keys</h2>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Configure your AI provider API keys. Keys are stored locally in your
+          browser.
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* API Key Fields */}
+        {providerConfigs.map((provider) => (
+          <ApiKeyField key={provider.key} config={provider} />
+        ))}
+
+        {/* Authentication Status Display */}
+        <AuthenticationStatusDisplay
+          claudeAuthStatus={claudeAuthStatus}
+          codexAuthStatus={codexAuthStatus}
+          apiKeyStatus={apiKeyStatus}
+          apiKeys={apiKeys}
+        />
+
+        {/* Security Notice */}
+        <SecurityNotice />
+
+        {/* Save Button */}
+        <div className="flex items-center gap-4 pt-2">
+          <Button
+            onClick={handleSave}
+            data-testid="save-settings"
+            className="min-w-[120px] bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
+          >
+            {saved ? (
+              <>
+                <CheckCircle2 className="w-4 h-4 mr-2" />
+                Saved!
+              </>
+            ) : (
+              "Save API Keys"
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/api-keys/authentication-status-display.tsx

@@ -0,0 +1,182 @@
+import { Label } from "@/components/ui/label";
+import {
+  CheckCircle2,
+  AlertCircle,
+  Info,
+  Terminal,
+  Atom,
+  Sparkles,
+} from "lucide-react";
+import type { ClaudeAuthStatus, CodexAuthStatus } from "@/store/setup-store";
+
+interface AuthenticationStatusDisplayProps {
+  claudeAuthStatus: ClaudeAuthStatus | null;
+  codexAuthStatus: CodexAuthStatus | null;
+  apiKeyStatus: {
+    hasAnthropicKey: boolean;
+    hasOpenAIKey: boolean;
+    hasGoogleKey: boolean;
+  } | null;
+  apiKeys: {
+    anthropic: string;
+    google: string;
+    openai: string;
+  };
+}
+
+export function AuthenticationStatusDisplay({
+  claudeAuthStatus,
+  codexAuthStatus,
+  apiKeyStatus,
+  apiKeys,
+}: AuthenticationStatusDisplayProps) {
+  return (
+    <div className="space-y-4 pt-4 border-t border-border">
+      <div className="flex items-center gap-2 mb-3">
+        <Info className="w-4 h-4 text-brand-500" />
+        <Label className="text-foreground font-semibold">
+          Current Authentication Configuration
+        </Label>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Claude Authentication Status */}
+        <div className="p-3 rounded-lg bg-card border border-border">
+          <div className="flex items-center gap-2 mb-1.5">
+            <Terminal className="w-4 h-4 text-brand-500" />
+            <span className="text-sm font-medium text-foreground">
+              Claude (Anthropic)
+            </span>
+          </div>
+          <div className="space-y-1.5 text-xs min-h-12">
+            {claudeAuthStatus?.authenticated ? (
+              <>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
+                  <span className="text-green-400 font-medium">Authenticated</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Info className="w-3 h-3 shrink-0" />
+                  <span>
+                    {claudeAuthStatus.method === "oauth_token_env"
+                      ? "Using CLAUDE_CODE_OAUTH_TOKEN"
+                      : claudeAuthStatus.method === "oauth_token"
+                      ? "Using stored OAuth token"
+                      : claudeAuthStatus.method === "api_key_env"
+                      ? "Using ANTHROPIC_API_KEY"
+                      : claudeAuthStatus.method === "api_key"
+                      ? "Using stored API key"
+                      : "Unknown method"}
+                  </span>
+                </div>
+              </>
+            ) : apiKeyStatus?.hasAnthropicKey ? (
+              <div className="flex items-center gap-2 text-blue-400">
+                <Info className="w-3 h-3 shrink-0" />
+                <span>Using environment variable (ANTHROPIC_API_KEY)</span>
+              </div>
+            ) : apiKeys.anthropic ? (
+              <div className="flex items-center gap-2 text-blue-400">
+                <Info className="w-3 h-3 shrink-0" />
+                <span>Using manual API key from settings</span>
+              </div>
+            ) : (
+              <div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
+                <AlertCircle className="w-3 h-3 shrink-0" />
+                <span className="text-xs">Not configured</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Codex/OpenAI Authentication Status */}
+        <div className="p-3 rounded-lg bg-card border border-border">
+          <div className="flex items-center gap-2 mb-1.5">
+            <Atom className="w-4 h-4 text-green-500" />
+            <span className="text-sm font-medium text-foreground">
+              Codex (OpenAI)
+            </span>
+          </div>
+          <div className="space-y-1.5 text-xs min-h-12">
+            {codexAuthStatus?.authenticated ? (
+              <>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
+                  <span className="text-green-400 font-medium">Authenticated</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Info className="w-3 h-3 shrink-0" />
+                  <span>
+                    {codexAuthStatus.method === "cli_verified" ||
+                    codexAuthStatus.method === "cli_tokens"
+                      ? "Using CLI login (OpenAI account)"
+                      : codexAuthStatus.method === "api_key"
+                      ? "Using stored API key"
+                      : codexAuthStatus.method === "env"
+                      ? "Using OPENAI_API_KEY"
+                      : "Unknown method"}
+                  </span>
+                </div>
+              </>
+            ) : apiKeyStatus?.hasOpenAIKey ? (
+              <div className="flex items-center gap-2 text-blue-400">
+                <Info className="w-3 h-3 shrink-0" />
+                <span>Using environment variable (OPENAI_API_KEY)</span>
+              </div>
+            ) : apiKeys.openai ? (
+              <div className="flex items-center gap-2 text-blue-400">
+                <Info className="w-3 h-3 shrink-0" />
+                <span>Using manual API key from settings</span>
+              </div>
+            ) : (
+              <div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
+                <AlertCircle className="w-3 h-3 shrink-0" />
+                <span className="text-xs">Not configured</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Google/Gemini Authentication Status */}
+        <div className="p-3 rounded-lg bg-card border border-border">
+          <div className="flex items-center gap-2 mb-1.5">
+            <Sparkles className="w-4 h-4 text-purple-500" />
+            <span className="text-sm font-medium text-foreground">
+              Gemini (Google)
+            </span>
+          </div>
+          <div className="space-y-1.5 text-xs min-h-12">
+            {apiKeyStatus?.hasGoogleKey ? (
+              <>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
+                  <span className="text-green-400 font-medium">Authenticated</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Info className="w-3 h-3 shrink-0" />
+                  <span>Using GOOGLE_API_KEY</span>
+                </div>
+              </>
+            ) : apiKeys.google ? (
+              <>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
+                  <span className="text-green-400 font-medium">Authenticated</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Info className="w-3 h-3 shrink-0" />
+                  <span>Using stored API key</span>
+                </div>
+              </>
+            ) : (
+              <div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
+                <AlertCircle className="w-3 h-3 shrink-0" />
+                <span className="text-xs">Not configured</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/api-keys/hooks/use-api-key-management.ts

@@ -0,0 +1,265 @@
+import { useState, useEffect } from "react";
+import { useAppStore } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import type { ProviderConfigParams } from "@/config/api-providers";
+
+interface TestResult {
+  success: boolean;
+  message: string;
+}
+
+interface ApiKeyStatus {
+  hasAnthropicKey: boolean;
+  hasOpenAIKey: boolean;
+  hasGoogleKey: boolean;
+}
+
+/**
+ * Custom hook for managing API key state and operations
+ * Handles input values, visibility toggles, connection testing, and saving
+ */
+export function useApiKeyManagement() {
+  const { apiKeys, setApiKeys } = useAppStore();
+
+  // API key values
+  const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropic);
+  const [googleKey, setGoogleKey] = useState(apiKeys.google);
+  const [openaiKey, setOpenaiKey] = useState(apiKeys.openai);
+
+  // Visibility toggles
+  const [showAnthropicKey, setShowAnthropicKey] = useState(false);
+  const [showGoogleKey, setShowGoogleKey] = useState(false);
+  const [showOpenaiKey, setShowOpenaiKey] = useState(false);
+
+  // Test connection states
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [testResult, setTestResult] = useState<TestResult | null>(null);
+  const [testingGeminiConnection, setTestingGeminiConnection] = useState(false);
+  const [geminiTestResult, setGeminiTestResult] = useState<TestResult | null>(
+    null
+  );
+  const [testingOpenaiConnection, setTestingOpenaiConnection] = useState(false);
+  const [openaiTestResult, setOpenaiTestResult] = useState<TestResult | null>(
+    null
+  );
+
+  // API key status from environment
+  const [apiKeyStatus, setApiKeyStatus] = useState<ApiKeyStatus | null>(null);
+
+  // Save state
+  const [saved, setSaved] = useState(false);
+
+  // Sync local state with store
+  useEffect(() => {
+    setAnthropicKey(apiKeys.anthropic);
+    setGoogleKey(apiKeys.google);
+    setOpenaiKey(apiKeys.openai);
+  }, [apiKeys]);
+
+  // Check API key status from environment on mount
+  useEffect(() => {
+    const checkApiKeyStatus = async () => {
+      const api = getElectronAPI();
+      if (api?.setup?.getApiKeys) {
+        try {
+          const status = await api.setup.getApiKeys();
+          if (status.success) {
+            setApiKeyStatus({
+              hasAnthropicKey: status.hasAnthropicKey,
+              hasOpenAIKey: status.hasOpenAIKey,
+              hasGoogleKey: status.hasGoogleKey,
+            });
+          }
+        } catch (error) {
+          console.error("Failed to check API key status:", error);
+        }
+      }
+    };
+    checkApiKeyStatus();
+  }, []);
+
+  // Test Anthropic/Claude connection
+  const handleTestAnthropicConnection = async () => {
+    setTestingConnection(true);
+    setTestResult(null);
+
+    try {
+      const response = await fetch("/api/claude/test", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ apiKey: anthropicKey }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        setTestResult({
+          success: true,
+          message: data.message || "Connection successful! Claude responded.",
+        });
+      } else {
+        setTestResult({
+          success: false,
+          message: data.error || "Failed to connect to Claude API.",
+        });
+      }
+    } catch {
+      setTestResult({
+        success: false,
+        message: "Network error. Please check your connection.",
+      });
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  // Test Google/Gemini connection
+  const handleTestGeminiConnection = async () => {
+    setTestingGeminiConnection(true);
+    setGeminiTestResult(null);
+
+    try {
+      const response = await fetch("/api/gemini/test", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ apiKey: googleKey }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        setGeminiTestResult({
+          success: true,
+          message: data.message || "Connection successful! Gemini responded.",
+        });
+      } else {
+        setGeminiTestResult({
+          success: false,
+          message: data.error || "Failed to connect to Gemini API.",
+        });
+      }
+    } catch {
+      setGeminiTestResult({
+        success: false,
+        message: "Network error. Please check your connection.",
+      });
+    } finally {
+      setTestingGeminiConnection(false);
+    }
+  };
+
+  // Test OpenAI connection
+  const handleTestOpenaiConnection = async () => {
+    setTestingOpenaiConnection(true);
+    setOpenaiTestResult(null);
+
+    try {
+      const api = getElectronAPI();
+      if (api?.testOpenAIConnection) {
+        const result = await api.testOpenAIConnection(openaiKey);
+        if (result.success) {
+          setOpenaiTestResult({
+            success: true,
+            message:
+              result.message || "Connection successful! OpenAI API responded.",
+          });
+        } else {
+          setOpenaiTestResult({
+            success: false,
+            message: result.error || "Failed to connect to OpenAI API.",
+          });
+        }
+      } else {
+        // Fallback to web API test
+        const response = await fetch("/api/openai/test", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ apiKey: openaiKey }),
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.success) {
+          setOpenaiTestResult({
+            success: true,
+            message:
+              data.message || "Connection successful! OpenAI API responded.",
+          });
+        } else {
+          setOpenaiTestResult({
+            success: false,
+            message: data.error || "Failed to connect to OpenAI API.",
+          });
+        }
+      }
+    } catch {
+      setOpenaiTestResult({
+        success: false,
+        message: "Network error. Please check your connection.",
+      });
+    } finally {
+      setTestingOpenaiConnection(false);
+    }
+  };
+
+  // Save API keys
+  const handleSave = () => {
+    setApiKeys({
+      anthropic: anthropicKey,
+      google: googleKey,
+      openai: openaiKey,
+    });
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  // Build provider config params for buildProviderConfigs
+  const providerConfigParams: ProviderConfigParams = {
+    apiKeys,
+    anthropic: {
+      value: anthropicKey,
+      setValue: setAnthropicKey,
+      show: showAnthropicKey,
+      setShow: setShowAnthropicKey,
+      testing: testingConnection,
+      onTest: handleTestAnthropicConnection,
+      result: testResult,
+    },
+    google: {
+      value: googleKey,
+      setValue: setGoogleKey,
+      show: showGoogleKey,
+      setShow: setShowGoogleKey,
+      testing: testingGeminiConnection,
+      onTest: handleTestGeminiConnection,
+      result: geminiTestResult,
+    },
+    openai: {
+      value: openaiKey,
+      setValue: setOpenaiKey,
+      show: showOpenaiKey,
+      setShow: setShowOpenaiKey,
+      testing: testingOpenaiConnection,
+      onTest: handleTestOpenaiConnection,
+      result: openaiTestResult,
+    },
+  };
+
+  return {
+    // Provider config params for buildProviderConfigs
+    providerConfigParams,
+
+    // API key status from environment
+    apiKeyStatus,
+
+    // Save handler and state
+    handleSave,
+    saved,
+  };
+}

apps/app/src/components/views/settings-view/api-keys/security-notice.tsx

@@ -0,0 +1,21 @@
+import { AlertCircle } from "lucide-react";
+
+interface SecurityNoticeProps {
+  title?: string;
+  message?: string;
+}
+
+export function SecurityNotice({
+  title = "Security Notice",
+  message = "API keys are stored in your browser's local storage. Never share your API keys or commit them to version control.",
+}: SecurityNoticeProps) {
+  return (
+    <div className="flex items-start gap-3 p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+      <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" />
+      <div className="text-sm">
+        <p className="font-medium text-yellow-500">{title}</p>
+        <p className="text-yellow-500/80 text-xs mt-1">{message}</p>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/appearance/appearance-section.tsx

@@ -0,0 +1,61 @@
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Palette } from "lucide-react";
+import { themeOptions } from "@/config/theme-options";
+import type { Theme, Project } from "../shared/types";
+
+interface AppearanceSectionProps {
+  effectiveTheme: Theme;
+  currentProject: Project | null;
+  onThemeChange: (theme: Theme) => void;
+}
+
+export function AppearanceSection({
+  effectiveTheme,
+  currentProject,
+  onThemeChange,
+}: AppearanceSectionProps) {
+  return (
+    <div
+      id="appearance"
+      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+    >
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center gap-2 mb-2">
+          <Palette className="w-5 h-5 text-brand-500" />
+          <h2 className="text-lg font-semibold text-foreground">Appearance</h2>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Customize the look and feel of your application.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        <div className="space-y-3">
+          <Label className="text-foreground">
+            Theme{" "}
+            {currentProject ? `(for ${currentProject.name})` : "(Global)"}
+          </Label>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {themeOptions.map(({ value, label, Icon, testId }) => {
+              const isActive = effectiveTheme === value;
+              return (
+                <Button
+                  key={value}
+                  variant={isActive ? "secondary" : "outline"}
+                  onClick={() => onThemeChange(value)}
+                  className={`flex items-center justify-center gap-2 px-3 py-3 h-auto ${
+                    isActive ? "border-brand-500 ring-1 ring-brand-500/50" : ""
+                  }`}
+                  data-testid={testId}
+                >
+                  <Icon className="w-4 h-4" />
+                  <span className="font-medium text-sm">{label}</span>
+                </Button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx

@@ -0,0 +1,148 @@
+import { Button } from "@/components/ui/button";
+import {
+  Terminal,
+  CheckCircle2,
+  AlertCircle,
+  RefreshCw,
+} from "lucide-react";
+import type { CliStatus } from "../shared/types";
+
+interface CliStatusProps {
+  status: CliStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+export function ClaudeCliStatus({
+  status,
+  isChecking,
+  onRefresh,
+}: CliStatusProps) {
+  if (!status) return null;
+
+  return (
+    <div
+      id="claude"
+      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+    >
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Terminal className="w-5 h-5 text-brand-500" />
+            <h2 className="text-lg font-semibold text-foreground">
+              Claude Code CLI
+            </h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-claude-cli"
+            title="Refresh Claude CLI detection"
+          >
+            <RefreshCw
+              className={`w-4 h-4 ${isChecking ? "animate-spin" : ""}`}
+            />
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Claude Code CLI provides better performance for long-running tasks,
+          especially with ultrathink.
+        </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-2 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500 shrink-0" />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-green-400">
+                  Claude Code CLI Installed
+                </p>
+                <div className="text-xs text-green-400/80 mt-1 space-y-1">
+                  {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>
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground">
+                {status.recommendation}
+              </p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+              <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-yellow-400">
+                  Claude Code CLI Not Detected
+                </p>
+                <p className="text-xs text-yellow-400/80 mt-1">
+                  {status.recommendation ||
+                    "Consider installing Claude Code CLI for optimal performance with ultrathink."}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-foreground-secondary">
+                  Installation Commands:
+                </p>
+                <div className="space-y-1">
+                  {status.installCommands.npm && (
+                    <div className="p-2 rounded bg-background border border-border-glass">
+                      <p className="text-xs text-muted-foreground mb-1">npm:</p>
+                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-2 rounded bg-background border border-border-glass">
+                      <p className="text-xs text-muted-foreground mb-1">
+                        macOS/Linux:
+                      </p>
+                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.windows && (
+                    <div className="p-2 rounded bg-background border border-border-glass">
+                      <p className="text-xs text-muted-foreground mb-1">
+                        Windows (PowerShell):
+                      </p>
+                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                        {status.installCommands.windows}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/cli-status/codex-cli-status.tsx

@@ -0,0 +1,169 @@
+import { Button } from "@/components/ui/button";
+import {
+  Terminal,
+  CheckCircle2,
+  AlertCircle,
+  RefreshCw,
+} from "lucide-react";
+import type { CliStatus } from "../shared/types";
+
+interface CliStatusProps {
+  status: CliStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+export function CodexCliStatus({
+  status,
+  isChecking,
+  onRefresh,
+}: CliStatusProps) {
+  if (!status) return null;
+
+  return (
+    <div
+      id="codex"
+      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+    >
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Terminal className="w-5 h-5 text-green-500" />
+            <h2 className="text-lg font-semibold text-foreground">
+              OpenAI Codex CLI
+            </h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-codex-cli"
+            title="Refresh Codex CLI detection"
+          >
+            <RefreshCw
+              className={`w-4 h-4 ${isChecking ? "animate-spin" : ""}`}
+            />
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Codex CLI enables GPT-5.1 Codex models for autonomous coding tasks.
+        </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-2 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500 shrink-0" />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-green-400">
+                  Codex CLI Installed
+                </p>
+                <div className="text-xs text-green-400/80 mt-1 space-y-1">
+                  {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>
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground">
+                {status.recommendation}
+              </p>
+            )}
+          </div>
+        ) : status.status === "api_key_only" ? (
+          <div className="space-y-3">
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
+              <AlertCircle className="w-5 h-5 text-blue-500 mt-0.5 shrink-0" />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-blue-400">
+                  API Key Detected - CLI Not Installed
+                </p>
+                <p className="text-xs text-blue-400/80 mt-1">
+                  {status.recommendation ||
+                    "OPENAI_API_KEY found but Codex CLI not installed. Install the CLI for full agentic capabilities."}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-foreground-secondary">
+                  Installation Commands:
+                </p>
+                <div className="space-y-1">
+                  {status.installCommands.npm && (
+                    <div className="p-2 rounded bg-background border border-border-glass">
+                      <p className="text-xs text-muted-foreground mb-1">npm:</p>
+                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+              <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-yellow-400">
+                  Codex CLI Not Detected
+                </p>
+                <p className="text-xs text-yellow-400/80 mt-1">
+                  {status.recommendation ||
+                    "Install OpenAI Codex CLI to use GPT-5.1 Codex models for autonomous coding."}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-2">
+                <p className="text-xs font-medium text-foreground-secondary">
+                  Installation Commands:
+                </p>
+                <div className="space-y-1">
+                  {status.installCommands.npm && (
+                    <div className="p-2 rounded bg-background border border-border-glass">
+                      <p className="text-xs text-muted-foreground mb-1">npm:</p>
+                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-2 rounded bg-background border border-border-glass">
+                      <p className="text-xs text-muted-foreground mb-1">
+                        macOS (Homebrew):
+                      </p>
+                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/components/delete-project-dialog.tsx

@@ -0,0 +1,83 @@
+import { Trash2, Folder } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import type { Project } from "@/lib/electron";
+
+interface DeleteProjectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project: Project | null;
+  onConfirm: (projectId: string) => void;
+}
+
+export function DeleteProjectDialog({
+  open,
+  onOpenChange,
+  project,
+  onConfirm,
+}: DeleteProjectDialogProps) {
+  const handleConfirm = () => {
+    if (project) {
+      onConfirm(project.id);
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Trash2 className="w-5 h-5 text-destructive" />
+            Delete Project
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Are you sure you want to move this project to Trash?
+          </DialogDescription>
+        </DialogHeader>
+
+        {project && (
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
+            <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+              <Folder className="w-5 h-5 text-brand-500" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-medium text-foreground truncate">
+                {project.name}
+              </p>
+              <p className="text-xs text-muted-foreground truncate">
+                {project.path}
+              </p>
+            </div>
+          </div>
+        )}
+
+        <p className="text-sm text-muted-foreground">
+          The folder will remain on disk until you permanently delete it from
+          Trash.
+        </p>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleConfirm}
+            data-testid="confirm-delete-project"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Move to Trash
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/settings-view/components/keyboard-map-dialog.tsx

@@ -0,0 +1,46 @@
+import { Keyboard } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { KeyboardMap, ShortcutReferencePanel } from "@/components/ui/keyboard-map";
+
+interface KeyboardMapDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function KeyboardMapDialog({ open, onOpenChange }: KeyboardMapDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard className="w-5 h-5 text-brand-500" />
+            Keyboard Shortcut Map
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Visual overview of all keyboard shortcuts. Keys in color are bound to
+            shortcuts. Click on any shortcut below to edit it.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto space-y-6 py-4 pl-3 pr-6 pb-6">
+          {/* Visual Keyboard Map */}
+          <KeyboardMap />
+
+          {/* Shortcut Reference - Editable */}
+          <div className="border-t border-border pt-4">
+            <h3 className="text-sm font-semibold text-foreground mb-4">
+              All Shortcuts Reference (Click to Edit)
+            </h3>
+            <ShortcutReferencePanel editable />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/app/src/components/views/settings-view/components/settings-header.tsx

@@ -0,0 +1,27 @@
+import { Settings } from "lucide-react";
+
+interface SettingsHeaderProps {
+  title?: string;
+  description?: string;
+}
+
+export function SettingsHeader({
+  title = "Settings",
+  description = "Configure your API keys and preferences",
+}: SettingsHeaderProps) {
+  return (
+    <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+      <div className="px-8 py-6">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
+            <Settings className="w-5 h-5 text-primary-foreground" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import type { Project } from "@/lib/electron";
+import type { NavigationItem } from "../config/navigation";
+
+interface SettingsNavigationProps {
+  navItems: NavigationItem[];
+  activeSection: string;
+  currentProject: Project | null;
+  onNavigate: (sectionId: string) => void;
+}
+
+export function SettingsNavigation({
+  navItems,
+  activeSection,
+  currentProject,
+  onNavigate,
+}: SettingsNavigationProps) {
+  return (
+    <nav className="hidden lg:block w-48 shrink-0 border-r border-border bg-card/50 backdrop-blur-sm">
+      <div className="sticky top-0 p-4 space-y-1">
+        {navItems
+          .filter((item) => item.id !== "danger" || currentProject)
+          .map((item) => {
+            const Icon = item.icon;
+            const isActive = activeSection === item.id;
+            return (
+              <button
+                key={item.id}
+                onClick={() => onNavigate(item.id)}
+                className={cn(
+                  "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all text-left",
+                  isActive
+                    ? "bg-brand-500/10 text-brand-500 border border-brand-500/20"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                )}
+              >
+                <Icon
+                  className={cn(
+                    "w-4 h-4 shrink-0",
+                    isActive ? "text-brand-500" : ""
+                  )}
+                />
+                <span className="truncate">{item.label}</span>
+              </button>
+            );
+          })}
+      </div>
+    </nav>
+  );
+}

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

@@ -0,0 +1,29 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Key,
+  Terminal,
+  Atom,
+  Palette,
+  LayoutGrid,
+  Settings2,
+  FlaskConical,
+  Trash2,
+} from "lucide-react";
+
+export interface NavigationItem {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+// Navigation items for the settings side panel
+export const NAV_ITEMS: NavigationItem[] = [
+  { id: "api-keys", label: "API Keys", icon: Key },
+  { id: "claude", label: "Claude", icon: Terminal },
+  { id: "codex", label: "Codex", icon: Atom },
+  { id: "appearance", label: "Appearance", icon: Palette },
+  { id: "kanban", label: "Kanban Display", icon: LayoutGrid },
+  { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
+  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
+  { id: "danger", label: "Danger Zone", icon: Trash2 },
+];

apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx

@@ -0,0 +1,57 @@
+import { Button } from "@/components/ui/button";
+import { Trash2, Folder } from "lucide-react";
+import type { Project } from "../shared/types";
+
+interface DangerZoneSectionProps {
+  project: Project | null;
+  onDeleteClick: () => void;
+}
+
+export function DangerZoneSection({
+  project,
+  onDeleteClick,
+}: DangerZoneSectionProps) {
+  if (!project) return null;
+
+  return (
+    <div
+      id="danger"
+      className="rounded-xl border border-destructive/30 bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+    >
+      <div className="p-6 border-b border-destructive/30">
+        <div className="flex items-center gap-2 mb-2">
+          <Trash2 className="w-5 h-5 text-destructive" />
+          <h2 className="text-lg font-semibold text-foreground">Danger Zone</h2>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Permanently remove this project from Automaker.
+        </p>
+      </div>
+      <div className="p-6">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+              <Folder className="w-5 h-5 text-brand-500" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-medium text-foreground truncate">
+                {project.name}
+              </p>
+              <p className="text-xs text-muted-foreground truncate">
+                {project.path}
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="destructive"
+            onClick={onDeleteClick}
+            data-testid="delete-project-button"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete Project
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx

@@ -0,0 +1,134 @@
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { FlaskConical, Settings2, TestTube, GitBranch } from "lucide-react";
+
+interface FeatureDefaultsSectionProps {
+  showProfilesOnly: boolean;
+  defaultSkipTests: boolean;
+  useWorktrees: boolean;
+  onShowProfilesOnlyChange: (value: boolean) => void;
+  onDefaultSkipTestsChange: (value: boolean) => void;
+  onUseWorktreesChange: (value: boolean) => void;
+}
+
+export function FeatureDefaultsSection({
+  showProfilesOnly,
+  defaultSkipTests,
+  useWorktrees,
+  onShowProfilesOnlyChange,
+  onDefaultSkipTestsChange,
+  onUseWorktreesChange,
+}: FeatureDefaultsSectionProps) {
+  return (
+    <div
+      id="defaults"
+      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+    >
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center gap-2 mb-2">
+          <FlaskConical className="w-5 h-5 text-brand-500" />
+          <h2 className="text-lg font-semibold text-foreground">
+            Feature Defaults
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Configure default settings for new features.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Profiles Only Setting */}
+        <div className="space-y-3">
+          <div className="flex items-start space-x-3">
+            <Checkbox
+              id="show-profiles-only"
+              checked={showProfilesOnly}
+              onCheckedChange={(checked) =>
+                onShowProfilesOnlyChange(checked === true)
+              }
+              className="mt-0.5"
+              data-testid="show-profiles-only-checkbox"
+            />
+            <div className="space-y-1">
+              <Label
+                htmlFor="show-profiles-only"
+                className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+              >
+                <Settings2 className="w-4 h-4 text-brand-500" />
+                Show profiles only by default
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                When enabled, the Add Feature dialog will show only AI profiles
+                and hide advanced model tweaking options (Claude SDK, thinking
+                levels, and OpenAI Codex CLI). This creates a cleaner, less
+                overwhelming UI. You can always disable this to access advanced
+                settings.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border" />
+
+        {/* Skip Tests Setting */}
+        <div className="space-y-3">
+          <div className="flex items-start space-x-3">
+            <Checkbox
+              id="default-skip-tests"
+              checked={defaultSkipTests}
+              onCheckedChange={(checked) =>
+                onDefaultSkipTestsChange(checked === true)
+              }
+              className="mt-0.5"
+              data-testid="default-skip-tests-checkbox"
+            />
+            <div className="space-y-1">
+              <Label
+                htmlFor="default-skip-tests"
+                className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+              >
+                <TestTube className="w-4 h-4 text-brand-500" />
+                Skip automated testing by default
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                When enabled, new features will default to manual verification
+                instead of TDD (test-driven development). You can still override
+                this for individual features.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Worktree Isolation Setting */}
+        <div className="space-y-3 pt-2 border-t border-border">
+          <div className="flex items-start space-x-3">
+            <Checkbox
+              id="use-worktrees"
+              checked={useWorktrees}
+              onCheckedChange={(checked) =>
+                onUseWorktreesChange(checked === true)
+              }
+              className="mt-0.5"
+              data-testid="use-worktrees-checkbox"
+            />
+            <div className="space-y-1">
+              <Label
+                htmlFor="use-worktrees"
+                className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+              >
+                <GitBranch className="w-4 h-4 text-brand-500" />
+                Enable Git Worktree Isolation (experimental)
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                Creates isolated git branches for each feature. When disabled,
+                agents work directly in the main project directory. This feature
+                is experimental and may require additional setup like branch
+                selection and merge configuration.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/hooks/use-cli-status.ts

@@ -0,0 +1,172 @@
+import { useState, useEffect, useCallback } from "react";
+import { useSetupStore } from "@/store/setup-store";
+import { getElectronAPI } from "@/lib/electron";
+
+interface CliStatusResult {
+  success: boolean;
+  status?: string;
+  method?: string;
+  version?: string;
+  path?: string;
+  recommendation?: string;
+  installCommands?: {
+    macos?: string;
+    windows?: string;
+    linux?: string;
+    npm?: string;
+  };
+  error?: string;
+}
+
+interface CodexCliStatusResult extends CliStatusResult {
+  hasApiKey?: boolean;
+}
+
+/**
+ * Custom hook for managing Claude and Codex CLI status
+ * Handles checking CLI installation, authentication, and refresh functionality
+ */
+export function useCliStatus() {
+  const { setClaudeAuthStatus, setCodexAuthStatus } = useSetupStore();
+
+  const [claudeCliStatus, setClaudeCliStatus] =
+    useState<CliStatusResult | null>(null);
+
+  const [codexCliStatus, setCodexCliStatus] =
+    useState<CodexCliStatusResult | null>(null);
+
+  const [isCheckingClaudeCli, setIsCheckingClaudeCli] = useState(false);
+  const [isCheckingCodexCli, setIsCheckingCodexCli] = useState(false);
+
+  // Check CLI status on mount
+  useEffect(() => {
+    const checkCliStatus = async () => {
+      const api = getElectronAPI();
+
+      // Check Claude CLI
+      if (api?.checkClaudeCli) {
+        try {
+          const status = await api.checkClaudeCli();
+          setClaudeCliStatus(status);
+        } catch (error) {
+          console.error("Failed to check Claude CLI status:", error);
+        }
+      }
+
+      // Check Codex CLI
+      if (api?.checkCodexCli) {
+        try {
+          const status = await api.checkCodexCli();
+          setCodexCliStatus(status);
+        } catch (error) {
+          console.error("Failed to check Codex CLI status:", error);
+        }
+      }
+
+      // Check Claude auth status (re-fetch on mount to ensure persistence)
+      if (api?.setup?.getClaudeStatus) {
+        try {
+          const result = await api.setup.getClaudeStatus();
+          if (result.success && result.auth) {
+            const auth = result.auth;
+            // Validate method is one of the expected values, default to "none"
+            const validMethods = ["oauth_token_env", "oauth_token", "api_key", "api_key_env", "none"] as const;
+            type AuthMethod = typeof validMethods[number];
+            const method: AuthMethod = validMethods.includes(auth.method as AuthMethod)
+              ? (auth.method as AuthMethod)
+              : "none";
+            const authStatus = {
+              authenticated: auth.authenticated,
+              method,
+              hasCredentialsFile: auth.hasCredentialsFile ?? false,
+              oauthTokenValid: auth.hasStoredOAuthToken || auth.hasEnvOAuthToken,
+              apiKeyValid: auth.hasStoredApiKey || auth.hasEnvApiKey,
+              hasEnvOAuthToken: auth.hasEnvOAuthToken,
+              hasEnvApiKey: auth.hasEnvApiKey,
+            };
+            setClaudeAuthStatus(authStatus);
+          }
+        } catch (error) {
+          console.error("Failed to check Claude auth status:", error);
+        }
+      }
+
+      // Check Codex auth status (re-fetch on mount to ensure persistence)
+      if (api?.setup?.getCodexStatus) {
+        try {
+          const result = await api.setup.getCodexStatus();
+          if (result.success && result.auth) {
+            const auth = result.auth;
+            // Determine method - prioritize cli_verified and cli_tokens over auth_file
+            const method =
+              auth.method === "cli_verified" || auth.method === "cli_tokens"
+                ? auth.method === "cli_verified"
+                  ? ("cli_verified" as const)
+                  : ("cli_tokens" as const)
+                : auth.method === "auth_file"
+                ? ("api_key" as const)
+                : auth.method === "env_var"
+                ? ("env" as const)
+                : ("none" as const);
+
+            const authStatus = {
+              authenticated: auth.authenticated,
+              method,
+              // Only set apiKeyValid for actual API key methods, not CLI login
+              apiKeyValid:
+                method === "cli_verified" || method === "cli_tokens"
+                  ? undefined
+                  : auth.hasAuthFile || auth.hasEnvKey,
+            };
+            setCodexAuthStatus(authStatus);
+          }
+        } catch (error) {
+          console.error("Failed to check Codex auth status:", error);
+        }
+      }
+    };
+
+    checkCliStatus();
+  }, [setClaudeAuthStatus, setCodexAuthStatus]);
+
+  // Refresh Claude CLI status
+  const handleRefreshClaudeCli = useCallback(async () => {
+    setIsCheckingClaudeCli(true);
+    try {
+      const api = getElectronAPI();
+      if (api?.checkClaudeCli) {
+        const status = await api.checkClaudeCli();
+        setClaudeCliStatus(status);
+      }
+    } catch (error) {
+      console.error("Failed to refresh Claude CLI status:", error);
+    } finally {
+      setIsCheckingClaudeCli(false);
+    }
+  }, []);
+
+  // Refresh Codex CLI status
+  const handleRefreshCodexCli = useCallback(async () => {
+    setIsCheckingCodexCli(true);
+    try {
+      const api = getElectronAPI();
+      if (api?.checkCodexCli) {
+        const status = await api.checkCodexCli();
+        setCodexCliStatus(status);
+      }
+    } catch (error) {
+      console.error("Failed to refresh Codex CLI status:", error);
+    } finally {
+      setIsCheckingCodexCli(false);
+    }
+  }, []);
+
+  return {
+    claudeCliStatus,
+    codexCliStatus,
+    isCheckingClaudeCli,
+    isCheckingCodexCli,
+    handleRefreshClaudeCli,
+    handleRefreshCodexCli,
+  };
+}

apps/app/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx

@@ -0,0 +1,59 @@
+import { Button } from "@/components/ui/button";
+import { Settings2, Keyboard } from "lucide-react";
+
+interface KeyboardShortcutsSectionProps {
+  onOpenKeyboardMap: () => void;
+}
+
+export function KeyboardShortcutsSection({
+  onOpenKeyboardMap,
+}: KeyboardShortcutsSectionProps) {
+  return (
+    <div
+      id="keyboard"
+      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+    >
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center gap-2 mb-2">
+          <Settings2 className="w-5 h-5 text-brand-500" />
+          <h2 className="text-lg font-semibold text-foreground">
+            Keyboard Shortcuts
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Customize keyboard shortcuts for navigation and actions using the
+          visual keyboard map.
+        </p>
+      </div>
+      <div className="p-6">
+        {/* Centered message directing to keyboard map */}
+        <div className="flex flex-col items-center justify-center py-16 text-center space-y-4">
+          <div className="relative">
+            <Keyboard className="w-16 h-16 text-brand-500/30" />
+            <div className="absolute inset-0 bg-brand-500/10 blur-xl rounded-full" />
+          </div>
+          <div className="space-y-2 max-w-md">
+            <h3 className="text-lg font-semibold text-foreground">
+              Use the Visual Keyboard Map
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              Click the &quot;View Keyboard Map&quot; button above to customize
+              your keyboard shortcuts. The visual interface shows all available
+              keys and lets you easily edit shortcuts with single-modifier
+              restrictions.
+            </p>
+          </div>
+          <Button
+            variant="default"
+            size="lg"
+            onClick={onOpenKeyboardMap}
+            className="gap-2 mt-4"
+          >
+            <Keyboard className="w-5 h-5" />
+            Open Keyboard Map
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/views/settings-view/shared/types.ts

@@ -0,0 +1,47 @@
+// Shared TypeScript types for settings view components
+
+export interface CliStatus {
+  success: boolean;
+  status?: string;
+  method?: string;
+  version?: string;
+  path?: string;
+  hasApiKey?: boolean;
+  recommendation?: string;
+  installCommands?: {
+    macos?: string;
+    windows?: string;
+    linux?: string;
+    npm?: string;
+  };
+  error?: string;
+}
+
+export type Theme =
+  | "dark"
+  | "light"
+  | "retro"
+  | "dracula"
+  | "nord"
+  | "monokai"
+  | "tokyonight"
+  | "solarized"
+  | "gruvbox"
+  | "catppuccin"
+  | "onedark"
+  | "synthwave";
+
+export type KanbanDetailLevel = "minimal" | "standard" | "detailed";
+
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+  theme?: Theme;
+}
+
+export interface ApiKeys {
+  anthropic: string;
+  google: string;
+  openai: string;
+}