jettypod 4.4.120 → 4.4.121

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-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>
+      <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>

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

@@ -1,10 +1,8 @@
-'use client';
-
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
+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';
 
@@ -21,11 +19,11 @@ export default function SignupPage() {
   // Redirect already-authenticated users to dashboard
   useEffect(() => {
     async function checkIfAlreadyAuthenticated() {
-      if (window.electronAPI?.isElectron) {
+      if (isTauri()) {
         try {
-          const status = await window.electronAPI.auth.getStatus();
+          const status = await auth.getStatus();
           if (status.authenticated) {
-            const path = await window.electronAPI.auth.getPostLoginPath?.() || '/';
+            const path = await auth.getPostLoginPath() || '/';
             window.location.href = path;
           }
         } catch {
@@ -43,15 +41,15 @@ export default function SignupPage() {
   }, []);
 
   const handleGoogleSignUp = () => {
-    if (!window.electronAPI?.isElectron) return;
-    window.electronAPI.auth.loginWithGoogle();
+    if (!isTauri()) return;
+    auth.loginWithGoogle();
 
     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);
-          const path = await window.electronAPI!.auth.getPostLoginPath?.() || '/';
+          const path = await auth.getPostLoginPath() || '/';
           window.location.href = path;
         }
       } catch {
@@ -119,11 +117,11 @@ export default function SignupPage() {
 
       const data = await res.json() as { token: string; user: { id: string; email: string; plan: string } };
 
-      if (window.electronAPI?.isElectron) {
-        await window.electronAPI.auth.saveToken(data.token, data.user);
+      if (isTauri()) {
+        await auth.saveToken(data.token, data.user);
       }
 
-      const path = await window.electronAPI?.auth.getPostLoginPath?.() || '/';
+      const path = await auth.getPostLoginPath() || '/';
       window.location.href = path;
     } catch {
       setError('Failed to verify code. Check your connection.');
@@ -136,12 +134,11 @@ export default function SignupPage() {
       <div className="max-w-md w-full space-y-10">
         {/* Logo */}
         <div className="flex flex-col items-center space-y-6">
-          <Image
+          <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">
             Create your account
@@ -235,7 +232,7 @@ export default function SignupPage() {
         {/* Switch to login */}
         <p className="text-center text-base text-zinc-500 dark:text-zinc-400">
           Already have an account?{' '}
-          <Link href="/login" className="font-medium hover:underline" style={{ color: '#819D9F' }}>
+          <Link to="/login" className="font-medium hover:underline" style={{ color: '#819D9F' }}>
             Sign in
           </Link>
         </p>

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

@@ -1,5 +1,3 @@
-'use client';
-
 import { SubscribeContent } from '@/components/SubscribeContent';
 
 export default function SubscribePage() {

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

@@ -1,10 +1,43 @@
-import { getTestDashboardData } from '@/lib/tests';
+import { useState, useEffect } from 'react';
 import { RealTimeTestsWrapper } from '@/components/RealTimeTestsWrapper';
-
-export const dynamic = 'force-dynamic';
+import { prefetch } from '@/lib/data-bridge';
 
 export default function TestsPage() {
-  const initialData = getTestDashboardData();
+  const [initialData, setInitialData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const data = await prefetch.tests();
+        setInitialData(data);
+      } catch (err) {
+        console.error('Failed to load test data:', err);
+        setInitialData({ suites: [], summary: { total: 0, passing: 0, failing: 0, pending: 0 } });
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, []);
+
+  if (loading || !initialData) return (
+    <div className="flex-1 max-w-7xl w-full mx-auto px-4 py-4">
+      <div className="flex justify-between items-center mb-6">
+        <div className="h-8 w-32 bg-zinc-200 dark:bg-zinc-800 rounded" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+        <div className="flex gap-3">
+          {[1, 2, 3, 4].map(i => (
+            <div key={i} className="h-10 w-20 bg-zinc-200 dark:bg-zinc-800 rounded-lg" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+          ))}
+        </div>
+      </div>
+      <div className="space-y-3">
+        {[1, 2, 3, 4, 5].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>
+  );
 
   return <RealTimeTestsWrapper initialData={initialData} />;
 }

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

@@ -1,8 +1,7 @@
-'use client';
-
 import { useState, useEffect } from 'react';
 import { WelcomeScreen } from '@/components/WelcomeScreen';
-import type { RecentProject } from '@/lib/db-bridge';
+import { isTauri, project } from '@/lib/tauri-bridge';
+import type { RecentProject } from '@/lib/tauri-bridge';
 
 export default function WelcomePage() {
   const [error, setError] = useState<string | null>(null);
@@ -11,11 +10,11 @@ export default function WelcomePage() {
   // Load recent projects on mount
   useEffect(() => {
     async function loadRecentProjects() {
-      if (!window.electronAPI?.isElectron) {
+      if (!isTauri()) {
         return;
       }
 
-      const projects = await window.electronAPI.project.getRecent();
+      const projects = await project.getRecent();
       setRecentProjects(projects);
     }
 
@@ -25,12 +24,12 @@ export default function WelcomePage() {
   const handleNewProject = async () => {
     setError(null);
 
-    if (!window.electronAPI?.isElectron) {
+    if (!isTauri()) {
       setError('Project creation is only available in the desktop app.');
       return;
     }
 
-    const result = await window.electronAPI.project.newProject();
+    const result = await project.newProject();
 
     if (result.canceled) {
       return;
@@ -47,13 +46,12 @@ export default function WelcomePage() {
   const handleOpenProject = async () => {
     setError(null);
 
-    // Check if we're in Electron
-    if (!window.electronAPI?.isElectron) {
+    if (!isTauri()) {
       setError('Project selection is only available in the desktop app.');
       return;
     }
 
-    const result = await window.electronAPI.project.openDialog();
+    const result = await project.openDialog();
 
     if (result.canceled) {
       // User canceled - do nothing
@@ -69,19 +67,18 @@ export default function WelcomePage() {
     window.location.href = '/';
   };
 
-  const handleSelectRecentProject = async (project: RecentProject) => {
+  const handleSelectRecentProject = async (p: RecentProject) => {
     setError(null);
 
-    // Check if we're in Electron
-    if (!window.electronAPI?.isElectron) {
+    if (!isTauri()) {
       setError('Project selection is only available in the desktop app.');
       return;
     }
 
-    const result = await window.electronAPI.project.openRecent(project.path);
+    const result = await project.openRecent(p.path);
 
     if (!result.success) {
-      setError(result.error || 'Failed to open project');
+      setError('Failed to open project');
       return;
     }
 

package/apps/dashboard/app/work/[id]/page.tsx

@@ -1,74 +1,117 @@
-import { getWorkItem, getChildWorkItems, getDecisionsForWorkItem } from '@/lib/db';
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import { WorkItemTree } from '@/components/WorkItemTree';
 import { WorkItemHeader } from '@/components/WorkItemHeader';
 import { EditableDetailTitle } from '@/components/EditableDetailTitle';
 import { EditableDetailDescription } from '@/components/EditableDetailDescription';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
 import { TYPE_LABELS, STATUS_LABELS, MODE_LABELS_FULL } from '@/lib/constants';
 import { TypeIcon } from '@/components/TypeIcon';
 import { DetailReviewActions } from '@/components/DetailReviewActions';
+import { dataBridge, prefetch } from '@/lib/data-bridge';
+import type { WorkItemData, DecisionData } from '@/lib/data-bridge';
 
-interface PageProps {
-  params: Promise<{ id: string }>;
-}
+export default function WorkItemPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [item, setItem] = useState<WorkItemData | null>(null);
+  const [children, setChildren] = useState<WorkItemData[]>([]);
+  const [decisions, setDecisions] = useState<DecisionData[]>([]);
+  const [parentItem, setParentItem] = useState<WorkItemData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
 
-export default async function WorkItemPage({ params }: PageProps) {
-  const { id } = await params;
-  const workItemId = parseInt(id, 10);
+  useEffect(() => {
+    async function loadData() {
+      const workItemId = parseInt(id || '', 10);
+      if (isNaN(workItemId)) {
+        setNotFound(true);
+        setLoading(false);
+        return;
+      }
 
-  if (isNaN(workItemId)) {
-    notFound();
-  }
+      try {
+        // Uses prefetch cache — if the user hovered the kanban card, data is
+        // already loaded. Otherwise fetches fresh (same parallel IPC calls).
+        const { item: workItem, children: childItems, decisions: decisionItems } =
+          await prefetch.workItem(workItemId);
+
+        if (!workItem) {
+          setNotFound(true);
+          setLoading(false);
+          return;
+        }
+
+        // Parent fetch depends on the work item's parent_id, but we can
+        // overlap it with setState calls since React batches them.
+        const parent = workItem.parent_id
+          ? await dataBridge.getWorkItem(workItem.parent_id)
+          : null;
+
+        setItem(workItem);
+        setChildren(childItems);
+        setDecisions(decisionItems);
+        setParentItem(parent);
+      } catch (err) {
+        console.error('Failed to load work item:', err);
+        setNotFound(true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [id]);
 
-  const item = getWorkItem(workItemId);
+  const handleTitleChange = useCallback((newTitle: string) => {
+    setItem(prev => prev ? { ...prev, title: newTitle } : prev);
+  }, []);
 
-  if (!item) {
-    notFound();
+  const handleDescriptionChange = useCallback((newDescription: string) => {
+    setItem(prev => prev ? { ...prev, description: newDescription } : prev);
+  }, []);
+
+  if (loading) return null;
+
+  if (notFound) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">Not Found</h1>
+          <p className="text-zinc-500 mb-4">Work item not found.</p>
+          <Link to="/" viewTransition className="text-[#5a7d7f] hover:underline">← Back to Dashboard</Link>
+        </div>
+      </div>
+    );
   }
 
-  const children = getChildWorkItems(workItemId);
-  const decisions = getDecisionsForWorkItem(workItemId);
-  const parentItem = item.parent_id ? getWorkItem(item.parent_id) : null;
+  if (!item) return null;
 
   const typeInfo = TYPE_LABELS[item.type] || { icon: '📄', label: 'Item' };
   const statusInfo = STATUS_LABELS[item.status] || STATUS_LABELS.backlog;
 
   return (
-    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
-      {/* Header */}
+    <div className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
       <header className="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
         <div className="max-w-4xl mx-auto px-6 py-6">
-          <Link href="/" className="text-[#5a7d7f] dark:text-[#a3bfc0] hover:underline text-base">
-            ← Back to Dashboard
-          </Link>
+          <Link to="/" viewTransition className="text-[#5a7d7f] dark:text-[#a3bfc0] hover:underline text-base">← Back to Dashboard</Link>
         </div>
       </header>
 
       <main className="max-w-4xl mx-auto px-4 py-6">
-        {/* Breadcrumb */}
         {parentItem && (
           <div className="mb-6 text-base text-zinc-500">
-            <Link href={`/work/${parentItem.id}`} className="inline-flex items-center gap-1.5 hover:underline">
+            <Link to={`/work/${parentItem.id}`} viewTransition className="inline-flex items-center gap-1.5 hover:underline">
               <TypeIcon type={parentItem.type} className="w-6 h-6" /> #{parentItem.id} {parentItem.title}
             </Link>
             <span className="mx-2">→</span>
           </div>
         )}
 
-        {/* Main card */}
         <div className="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
-          {/* Header */}
           <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
             <div className="flex items-start justify-between gap-6">
               <div className="flex-1 min-w-0">
-                <WorkItemHeader
-                  id={item.id}
-                  title={item.title}
-                  type={item.type}
-                  typeLabel={typeInfo.label}
-                />
-                <EditableDetailTitle title={item.title} itemId={item.id} />
+                <WorkItemHeader id={item.id} title={item.title} type={item.type} typeLabel={typeInfo.label} />
+                <EditableDetailTitle title={item.title} itemId={item.id} onTitleChange={handleTitleChange} />
               </div>
               <div className="flex items-center gap-2">
                 {item.mode && MODE_LABELS_FULL[item.mode] && (
@@ -76,29 +119,19 @@ export default async function WorkItemPage({ params }: PageProps) {
                     {MODE_LABELS_FULL[item.mode].label}
                   </span>
                 )}
-                <span className={`text-base px-3 py-1.5 rounded ${statusInfo.color}`}>
-                  {statusInfo.label}
-                </span>
-                {!!item.ready_for_review && (
-                  <DetailReviewActions workItemId={item.id} />
-                )}
+                <span className={`text-base px-3 py-1.5 rounded ${statusInfo.color}`}>{statusInfo.label}</span>
+                {!!item.ready_for_review && <DetailReviewActions workItemId={item.id} />}
               </div>
             </div>
           </div>
 
-          {/* Description */}
           <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
-            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">
-              Description
-            </h2>
-            <EditableDetailDescription description={item.description} itemId={item.id} />
+            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">Description</h2>
+            <EditableDetailDescription description={item.description} itemId={item.id} onDescriptionChange={handleDescriptionChange} />
           </div>
 
-          {/* Metadata */}
           <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
-            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-4">
-              Details
-            </h2>
+            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-4">Details</h2>
             <dl className="grid grid-cols-2 gap-6 text-base">
               {item.branch_name && (
                 <div>
@@ -114,59 +147,41 @@ export default async function WorkItemPage({ params }: PageProps) {
               )}
               <div>
                 <dt className="text-zinc-500">Created</dt>
-                <dd className="text-zinc-900 dark:text-zinc-100">
-                  {new Date(item.created_at).toLocaleDateString()}
-                </dd>
+                <dd className="text-zinc-900 dark:text-zinc-100">{new Date(item.created_at).toLocaleDateString()}</dd>
               </div>
               {item.completed_at && (
                 <div>
                   <dt className="text-zinc-500">Completed</dt>
-                  <dd className="text-zinc-900 dark:text-zinc-100">
-                    {new Date(item.completed_at).toLocaleDateString()}
-                  </dd>
+                  <dd className="text-zinc-900 dark:text-zinc-100">{new Date(item.completed_at).toLocaleDateString()}</dd>
                 </div>
               )}
             </dl>
           </div>
 
-          {/* Decisions */}
           {decisions.length > 0 && (
             <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
-              <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">
-                Decisions
-              </h2>
+              <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">Decisions</h2>
               <div className="space-y-6">
                 {decisions.map((decision) => (
                   <div key={decision.id} className="bg-zinc-50 dark:bg-zinc-800 rounded-lg p-6">
                     <div className="flex items-center gap-3 mb-3">
-                      <span className="text-base font-medium text-zinc-900 dark:text-zinc-100">
-                        {decision.aspect}
-                      </span>
-                      <span className="text-base text-zinc-500">
-                        {new Date(decision.created_at).toLocaleDateString()}
-                      </span>
+                      <span className="text-base font-medium text-zinc-900 dark:text-zinc-100">{decision.aspect}</span>
+                      <span className="text-base text-zinc-500">{new Date(decision.created_at).toLocaleDateString()}</span>
                     </div>
-                    <p className="text-zinc-700 dark:text-zinc-300 font-medium">
-                      {decision.decision}
-                    </p>
-                    {decision.rationale && (
-                      <p className="text-base text-zinc-500 mt-1.5">
-                        {decision.rationale}
-                      </p>
-                    )}
+                    <p className="text-zinc-700 dark:text-zinc-300 font-medium">{decision.decision}</p>
+                    {decision.rationale && <p className="text-base text-zinc-500 mt-1.5">{decision.rationale}</p>}
                   </div>
                 ))}
               </div>
             </div>
           )}
 
-          {/* Children */}
           {children.length > 0 && (
             <div className="px-8 py-6">
               <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-4">
                 {item.type === 'epic' ? 'Features & Chores' : 'Child Items'} ({children.length})
               </h2>
-              <WorkItemTree items={children.map(c => ({ ...c, children: [] }))} />
+              <WorkItemTree items={children.map(c => ({ ...c, type: c.type, children: [], epic_id: c.parent_id, rejection_round: c.rejection_round ?? null, rejection_history: c.rejection_history ?? null }))} />
             </div>
           )}
         </div>