jettypod 4.4.118 → 4.4.121

package/apps/dashboard/app/globals.css

@@ -1,3 +1,20 @@
+/* Font declarations */
+@font-face {
+  font-family: 'Satoshi';
+  src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('/fonts/Satoshi-VariableItalic.woff2') format('woff2');
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+}
+
 @import "tailwindcss";
 @import "tw-animate-css";
 
@@ -6,7 +23,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-satoshi);
   --font-mono: var(--font-geist-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
@@ -45,7 +62,9 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
+  --font-satoshi: 'Satoshi', system-ui, sans-serif;
+  --font-geist-mono: 'Geist Mono Variable', 'Geist Mono', monospace;
+  --background: oklch(0.98 0.002 80);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
@@ -113,10 +132,67 @@
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
   }
   body {
     @apply bg-background text-foreground;
+    font-family: var(--font-satoshi);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+html {
+  font-size: 16px;
+}
+
+/* Kanban card hover — instant shadow swap, no transition (WebKit-friendly) */
+.kanban-card {
+  contain: content;
+  content-visibility: auto;
+}
+.kanban-card:hover {
+  box-shadow: var(--hover-shadow) !important;
+  transform: translateY(-2px);
+}
+
+/* Highlight pulse — CSS-only, no framer-motion runtime cost */
+@keyframes highlight-pulse {
+  0%, 100% { outline: 3px solid rgba(129, 157, 159, 0); outline-offset: 0; }
+  50% { outline: 3px solid rgba(129, 157, 159, 0.4); outline-offset: 0; }
+}
+
+/* View Transitions API — fast cross-fade for route changes */
+::view-transition-old(root) {
+  animation: vt-fade-out 120ms ease-out;
+}
+::view-transition-new(root) {
+  animation: vt-fade-in 200ms ease-out;
+}
+@keyframes vt-fade-out {
+  to { opacity: 0; }
+}
+@keyframes vt-fade-in {
+  from { opacity: 0; }
+}
+
+/* Skeleton loading pulse */
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.25; }
+}
+
+/* Respect reduced motion globally — disables all animations/transitions */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
   }
 }

package/apps/dashboard/app/install-claude/page.tsx

@@ -1,7 +1,6 @@
-'use client';
-
 import { useState } from 'react';
 import { InstallClaudeScreen } from '@/components/InstallClaudeScreen';
+import { isTauri, claudeCode } from '@/lib/tauri-bridge';
 
 export default function InstallClaudePage() {
   const [isInstalling, setIsInstalling] = useState(false);
@@ -12,15 +11,14 @@ export default function InstallClaudePage() {
     setError(null);
     setIsInstalling(true);
 
-    // Check if we're in Electron
-    if (!window.electronAPI?.isElectron) {
+    if (!isTauri()) {
       setError('Installation is only available in the desktop app.');
       setIsInstalling(false);
       return;
     }
 
     try {
-      const result = await window.electronAPI.claudeCode.install();
+      const result = await claudeCode.install();
 
       if (!result.success) {
         setError(result.error || 'Installation failed');
@@ -44,7 +42,7 @@ export default function InstallClaudePage() {
   return (
     <>
       {error && (
-        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50">
+        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-xl text-base z-50">
           {error}
         </div>
       )}

package/apps/dashboard/app/login/page.tsx

@@ -1,25 +1,11 @@
-'use client';
-
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { isTauri, auth } from '@/lib/tauri-bridge';
 
 const API_BASE = 'https://jettypod-update-server.spangbaryn2.workers.dev';
 
-const buttonGradientStyle = {
-  background: 'linear-gradient(145deg, #ffffff 0%, #faf9f7 10%, #f0f4f4 35%, #c8d9da 55%, #819D9F 90%)',
-  color: '#3d4d4e',
-  boxShadow: `
-    0 1px 1px rgba(0, 0, 0, 0.02),
-    0 2px 4px rgba(0, 0, 0, 0.03),
-    0 6px 12px rgba(0, 0, 0, 0.05),
-    0 12px 24px rgba(0, 0, 0, 0.06),
-    0 20px 40px rgba(129, 157, 159, 0.2),
-    0 32px 64px rgba(129, 157, 159, 0.18),
-    inset 0 2px 4px rgba(255, 255, 255, 1),
-    inset 0 -2px 4px rgba(129, 157, 159, 0.05)
-  `,
-};
-
 export default function LoginPage() {
   const [email, setEmail] = useState('');
   const [otpCode, setOtpCode] = useState('');
@@ -29,10 +15,28 @@ export default function LoginPage() {
   const [error, setError] = useState<string | null>(null);
 
   // Poll for auth completion after Google sign-in.
-  // The deep link handler in main.js saves the token — this polling detects it
-  // and navigates to the dashboard even if mainWindow.loadURL doesn't fire.
+  // The deep link handler saves the token — this polling detects it
+  // and navigates to the dashboard.
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
+  // Redirect already-authenticated users to dashboard
+  useEffect(() => {
+    async function checkIfAlreadyAuthenticated() {
+      if (isTauri()) {
+        try {
+          const status = await auth.getStatus();
+          if (status.authenticated) {
+            const path = await auth.getPostLoginPath() || '/';
+            window.location.href = path;
+          }
+        } catch {
+          // Ignore — stay on login page
+        }
+      }
+    }
+    checkIfAlreadyAuthenticated();
+  }, []);
+
   useEffect(() => {
     return () => {
       if (pollRef.current) clearInterval(pollRef.current);
@@ -40,16 +44,17 @@ export default function LoginPage() {
   }, []);
 
   const handleGoogleSignIn = () => {
-    if (!window.electronAPI?.isElectron) return;
-    window.electronAPI.auth.loginWithGoogle();
+    if (!isTauri()) return;
+    auth.loginWithGoogle();
 
     // Start polling for auth status (token saved by deep link handler)
     pollRef.current = setInterval(async () => {
       try {
-        const status = await window.electronAPI!.auth.getStatus();
+        const status = await auth.getStatus();
         if (status.authenticated) {
           if (pollRef.current) clearInterval(pollRef.current);
-          window.location.href = '/';
+          const path = await auth.getPostLoginPath() || '/';
+          window.location.href = path;
         }
       } catch {
         // Ignore — keep polling
@@ -116,12 +121,13 @@ export default function LoginPage() {
 
       const data = await res.json() as { token: string; user: { id: string; email: string; plan: string } };
 
-      // Save auth state via Electron IPC
-      if (window.electronAPI?.isElectron) {
-        await window.electronAPI.auth.saveToken(data.token, data.user);
+      // Save auth state via Tauri IPC
+      if (isTauri()) {
+        await auth.saveToken(data.token, data.user);
       }
 
-      window.location.href = '/';
+      const path = await auth.getPostLoginPath() || '/';
+      window.location.href = path;
     } catch {
       setError('Failed to verify code. Check your connection.');
       setIsVerifying(false);
@@ -130,15 +136,14 @@ export default function LoginPage() {
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 p-8">
-      <div className="max-w-md w-full space-y-8">
+      <div className="max-w-md w-full space-y-10">
         {/* Logo */}
-        <div className="flex flex-col items-center space-y-4">
-          <Image
+        <div className="flex flex-col items-center space-y-6">
+          <img
             src="/jettypod_wordmark.png"
             alt="JettyPod"
             width={160}
             height={40}
-            priority
           />
           <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
             Sign in to JettyPod
@@ -150,54 +155,55 @@ export default function LoginPage() {
 
         {/* Error */}
         {error && (
-          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
+          <div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-5 py-4 rounded-xl text-base">
             {error}
           </div>
         )}
 
         {/* Google Sign-In */}
         <div className="pt-4">
-          <button
+          <Button
             onClick={handleGoogleSignIn}
-            className="w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 hover:-translate-y-1 hover:scale-[1.01] active:translate-y-0 active:scale-100"
-            style={{ cursor: 'pointer', ...buttonGradientStyle }}
+            size="lg"
+            fullWidth
           >
             Sign in with Google
-          </button>
+          </Button>
         </div>
 
         {/* Divider */}
         <div className="flex items-center gap-4">
           <div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-700" />
-          <span className="text-xs text-zinc-400 dark:text-zinc-500">or</span>
+          <span className="text-base text-zinc-400 dark:text-zinc-500">or</span>
           <div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-700" />
         </div>
 
         {/* Email OTP */}
         {!otpSent ? (
-          <form onSubmit={handleSendOTP} className="space-y-4">
-            <input
+          <form onSubmit={handleSendOTP} className="space-y-6">
+            <Input
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="Enter your email"
               disabled={isSending}
-              className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:focus:ring-zinc-500 disabled:opacity-50"
             />
-            <button
+            <Button
               type="submit"
+              variant="secondary"
+              size="lg"
+              fullWidth
               disabled={isSending || !email.trim()}
-              className="w-full py-3 px-6 rounded-xl font-medium border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors disabled:opacity-50 disabled:pointer-events-none"
             >
               {isSending ? 'Sending code...' : 'Sign in with email'}
-            </button>
+            </Button>
           </form>
         ) : (
-          <form onSubmit={handleVerifyOTP} className="space-y-4">
-            <p className="text-sm text-zinc-500 dark:text-zinc-400">
+          <form onSubmit={handleVerifyOTP} className="space-y-6">
+            <p className="text-base text-zinc-500 dark:text-zinc-400">
               We sent a 6-digit code to <span className="font-medium text-zinc-700 dark:text-zinc-300">{email}</span>
             </p>
-            <input
+            <Input
               type="text"
               value={otpCode}
               onChange={(e) => setOtpCode(e.target.value)}
@@ -205,24 +211,36 @@ export default function LoginPage() {
               maxLength={6}
               autoFocus
               disabled={isVerifying}
-              className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:focus:ring-zinc-500 disabled:opacity-50 text-center text-xl tracking-widest font-mono"
+              className="text-center text-xl tracking-widest font-mono"
             />
-            <button
+            <Button
               type="submit"
+              variant="secondary"
+              size="lg"
+              fullWidth
               disabled={isVerifying || !otpCode.trim()}
-              className="w-full py-3 px-6 rounded-xl font-medium border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors disabled:opacity-50 disabled:pointer-events-none"
             >
               {isVerifying ? 'Verifying...' : 'Verify code'}
-            </button>
-            <button
+            </Button>
+            <Button
               type="button"
+              variant="ghost"
+              size="sm"
+              fullWidth
               onClick={() => { setOtpSent(false); setOtpCode(''); setError(null); }}
-              className="w-full text-sm text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors"
             >
               Use a different email
-            </button>
+            </Button>
           </form>
         )}
+
+        {/* Switch to signup */}
+        <p className="text-center text-base text-zinc-500 dark:text-zinc-400">
+          Don&apos;t have an account?{' '}
+          <Link to="/signup" className="font-medium hover:underline" style={{ color: '#819D9F' }}>
+            Create one
+          </Link>
+        </p>
       </div>
     </div>
   );

package/apps/dashboard/app/page.tsx

@@ -1,61 +1,114 @@
-import { redirect } from 'next/navigation';
-import { getKanbanData, hasProject, isBlankProject, getProjectRoot } from '@/lib/db';
+import { useState, useEffect } from 'react';
+import { useNavigate, useLocation, Outlet } from 'react-router-dom';
 import { RealTimeKanbanWrapper } from '@/components/RealTimeKanbanWrapper';
-
-// Force dynamic rendering - database is only available at runtime
-export const dynamic = 'force-dynamic';
+import { dataBridge, prefetch } from '@/lib/data-bridge';
+import type { KanbanData } from '@/lib/data-bridge';
 
 export default function Home() {
-  // Check if a project is selected - if not, redirect to welcome
-  if (!hasProject()) {
-    redirect('/welcome');
-  }
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const isChildRoute = pathname !== '/';
+  const [data, setData] = useState<KanbanData | null>(null);
+  const [projectPath, setProjectPath] = useState('');
+  const [isBlank, setIsBlank] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
 
-  try {
-    const data = getKanbanData();
-    const projectRoot = getProjectRoot();
-    const isBlank = projectRoot ? isBlankProject(projectRoot) : false;
+  useEffect(() => {
+    async function loadData() {
+      try {
+        // getProjectRoot() is cached after first call — no redundant IPC
+        const root = await dataBridge.getProjectRoot();
+        if (!root) {
+          navigate('/welcome', { replace: true });
+          return;
+        }
 
-    // Serialize Map data for client component
-    const serializedData = {
-      inFlight: data.inFlight,
-      backlog: Array.from(data.backlog.entries()),
-      done: Array.from(data.done.entries()),
-    };
+        const kanbanData = await prefetch.backlog();
 
-    return (
-      <div className="h-full flex flex-col min-h-0 overflow-hidden max-w-6xl w-full mx-auto px-4 py-4">
-        <RealTimeKanbanWrapper initialData={serializedData} isBlank={isBlank} projectPath={projectRoot || ''} />
-      </div>
-    );
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : String(error);
-    const errorStack = error instanceof Error ? error.stack : undefined;
+        setData(kanbanData);
+        setProjectPath(root || '');
+        // isBlank detection: fresh project with only the seeded "Project Planning" epic
+        const onlyGroup = kanbanData.backlog.size === 1
+          ? [...kanbanData.backlog.values()][0]
+          : null;
+        const hasOnlyOnboarding = kanbanData.inFlight.length === 0
+          && kanbanData.done.size === 0
+          && onlyGroup?.epicTitle === 'Project Planning';
+        setIsBlank(hasOnlyOnboarding);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [navigate]);
 
-    // Log to server console (visible in Electron logs)
-    console.error('[Home Page Error]', errorMessage);
-    console.error('[Home Page Stack]', errorStack);
-    console.error('[JETTYPOD_PROJECT_PATH]', process.env.JETTYPOD_PROJECT_PATH);
+  // Serialize Map data for RealTimeKanbanWrapper (it expects this format)
+  const serializedData = data ? {
+    inFlight: data.inFlight,
+    backlog: Array.from(data.backlog.entries()),
+    done: Array.from(data.done.entries()),
+  } : null;
 
-    // Return error UI so user can see what's wrong
-    return (
-      <div className="flex-1 flex items-center justify-center p-8">
-        <div className="max-w-2xl w-full bg-red-50 border border-red-200 rounded-lg p-6">
-          <h1 className="text-xl font-bold text-red-800 mb-4">Failed to load project</h1>
-          <div className="bg-white border border-red-100 rounded p-4 mb-4">
-            <p className="font-mono text-sm text-red-700 whitespace-pre-wrap">{errorMessage}</p>
+  // Kanban board content based on loading/error/data state
+  const kanbanContent = loading ? (
+    <div className="max-w-7xl w-full mx-auto px-4 py-4">
+      <div className="flex gap-4" style={{ height: 'calc(var(--main-h, 100vh) - 2rem)' }}>
+        {/* Backlog column skeleton */}
+        <div className="flex-1 max-w-[600px] flex flex-col min-h-0">
+          <div className="bg-zinc-100 dark:bg-zinc-900 rounded-xl p-4 flex-1 min-h-0">
+            <div className="flex items-center justify-between mb-4">
+              <div className="h-6 w-24 bg-zinc-200 dark:bg-zinc-800 rounded" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+              <div className="h-6 w-10 bg-zinc-200 dark:bg-zinc-800 rounded-full" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+            </div>
+            <div className="space-y-3">
+              {[1, 2, 3, 4, 5].map(i => (
+                <div key={i} className="h-20 bg-zinc-200 dark:bg-zinc-800 rounded-xl" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+              ))}
+            </div>
           </div>
-          <div className="text-sm text-gray-600 space-y-1">
-            <p><strong>Project path:</strong> {process.env.JETTYPOD_PROJECT_PATH || '(not set)'}</p>
+        </div>
+        {/* Done column skeleton */}
+        <div className="flex-1 max-w-[600px] flex flex-col min-h-0">
+          <div className="bg-zinc-100 dark:bg-zinc-900 rounded-xl p-4 flex-1 min-h-0">
+            <div className="flex items-center justify-between mb-4">
+              <div className="h-6 w-16 bg-zinc-200 dark:bg-zinc-800 rounded" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+              <div className="h-6 w-10 bg-zinc-200 dark:bg-zinc-800 rounded-full" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+            </div>
+            <div className="space-y-3">
+              {[1, 2, 3].map(i => (
+                <div key={i} className="h-16 bg-zinc-200 dark:bg-zinc-800 rounded-xl" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+              ))}
+            </div>
           </div>
-          {errorStack && (
-            <details className="mt-4">
-              <summary className="text-sm text-gray-500 cursor-pointer">Stack trace</summary>
-              <pre className="mt-2 text-xs text-gray-500 overflow-auto p-2 bg-gray-50 rounded">{errorStack}</pre>
-            </details>
-          )}
         </div>
       </div>
-    );
-  }
+    </div>
+  ) : error ? (
+    <div className="flex-1 flex items-center justify-center p-8">
+      <div className="max-w-2xl w-full bg-red-50 border-2 border-red-200 rounded-lg p-8">
+        <h1 className="text-xl font-bold text-red-800 mb-4">Failed to load project</h1>
+        <div className="bg-white border-2 border-red-100 rounded p-6 mb-6">
+          <p className="font-mono text-base text-red-700 whitespace-pre-wrap">{error}</p>
+        </div>
+      </div>
+    </div>
+  ) : serializedData ? (
+    <div className="max-w-7xl w-full mx-auto px-4 py-4">
+      <RealTimeKanbanWrapper initialData={serializedData} isBlank={isBlank} projectPath={projectPath} />
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {/* Kanban board — always mounted, hidden when viewing a child route */}
+      <div style={isChildRoute ? { display: 'none' } : undefined}>
+        {kanbanContent}
+      </div>
+      {/* Child route content (work detail, proof dashboard, decision) */}
+      <Outlet />
+    </>
+  );
 }

package/apps/dashboard/app/settings/page.tsx

@@ -1,27 +1,75 @@
-import { getEnvVars, discoverEnvFiles, getSelectedEnvFile, getMainBranch } from '@/lib/db';
+import { useState, useEffect } from 'react';
 import { AccountSection } from '@/components/settings/AccountSection';
 import { EnvVarsSection } from '@/components/settings/EnvVarsSection';
 import { GeneralSection } from '@/components/settings/GeneralSection';
+import { AiContextSection } from '@/components/settings/AiContextSection';
+import { ProjectStackSection } from '@/components/settings/ProjectStackSection';
 import { SettingsLayout } from '@/components/settings/SettingsLayout';
-
-export const dynamic = 'force-dynamic';
+import { dataBridge, prefetch } from '@/lib/data-bridge';
+import type { ContextDocument } from '@/lib/data-bridge';
+import type { EnvironmentConfig } from '@/lib/environment-config';
 
 export default function SettingsPage() {
-  const envFiles = discoverEnvFiles();
-  const selectedFile = getSelectedEnvFile() || (envFiles.includes('.env') ? '.env' : envFiles[0] || null);
-  const envVars = selectedFile ? getEnvVars(selectedFile) : [];
-  const mainBranch = getMainBranch();
+  const [envFiles, setEnvFiles] = useState<string[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [envVars, setEnvVars] = useState<Array<{ key: string; value: string }>>([]);
+  const [mainBranch, setMainBranch] = useState('main');
+  const [claudeModel, setClaudeModel] = useState<string | null>(null);
+  const [designSystemDir, setDesignSystemDir] = useState<string | null>(null);
+  const [contextDocuments, setContextDocuments] = useState<ContextDocument[]>([]);
+  const [environmentConfig, setEnvironmentConfig] = useState<EnvironmentConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const { files, selected, branch, claudeModel: model, designSystemDir: dsDir, contextDocuments: ctxDocs, environmentConfig: envConfig } = await prefetch.settings();
+        setEnvFiles(files);
+        const activeFile = selected || (files.includes('.env') ? '.env' : files[0] || null);
+        setSelectedFile(activeFile);
+        if (activeFile) {
+          const vars = await dataBridge.getEnvVars(activeFile);
+          setEnvVars(vars);
+        }
+        setMainBranch(branch);
+        setClaudeModel(model);
+        setDesignSystemDir(dsDir);
+        setContextDocuments(ctxDocs);
+        setEnvironmentConfig(envConfig);
+      } catch (err) {
+        console.error('Failed to load settings:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadSettings();
+  }, []);
+
+  if (loading) return (
+    <div className="flex-1 overflow-auto max-w-7xl w-full mx-auto px-4 py-4">
+      <div className="h-8 w-40 bg-zinc-200 dark:bg-zinc-800 rounded mb-8" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+      <div className="flex gap-4 mb-6">
+        {[1, 2, 3, 4, 5].map(i => (
+          <div key={i} className="h-9 w-32 bg-zinc-200 dark:bg-zinc-800 rounded-lg" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+        ))}
+      </div>
+      <div className="space-y-4">
+        <div className="h-12 bg-zinc-200 dark:bg-zinc-800 rounded-lg" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+        <div className="h-12 bg-zinc-200 dark:bg-zinc-800 rounded-lg" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+      </div>
+    </div>
+  );
 
   return (
-    <div className="flex-1 overflow-auto max-w-6xl w-full mx-auto px-4 py-4">
-      <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 mb-6">
-        Settings
-      </h1>
+    <div className="flex-1 overflow-auto max-w-7xl w-full mx-auto px-4 py-4">
+      <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 mb-8">Settings</h1>
       <SettingsLayout
         tabs={[
           { id: 'account', label: 'Account', content: <AccountSection /> },
-          { id: 'general', label: 'General', content: <GeneralSection initialMainBranch={mainBranch} /> },
-          { id: 'env-vars', label: 'Environment Variables', content: <EnvVarsSection initialEnvVars={envVars} envFiles={envFiles} selectedFile={selectedFile} /> },
+          { id: 'general', label: 'General', content: <GeneralSection initialMainBranch={{ branch: mainBranch, source: 'detected' }} initialClaudeModel={claudeModel} /> },
+          { id: 'env-vars', label: 'Environment Variables', content: <EnvVarsSection initialEnvVars={envVars.map(v => ({ name: v.key, value: v.value }))} envFiles={envFiles} selectedFile={selectedFile} /> },
+          { id: 'ai-context', label: 'AI Context', content: <AiContextSection initialDesignSystemDir={designSystemDir} initialContextDocuments={contextDocuments} /> },
+          { id: 'project-stack', label: 'Your Project Stack', content: <ProjectStackSection initialConfig={environmentConfig} /> },
         ]}
       />
     </div>