jettypod 4.4.118 → 4.4.121

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

@@ -1,18 +1,17 @@
-'use client';
-
 import { ConnectClaudeScreen } from '@/components/ConnectClaudeScreen';
+import { isTauri, claudeCode } from '@/lib/tauri-bridge';
 
 export default function ConnectClaudePage() {
   const handleConnect = async () => {
-    if (!window.electronAPI?.isElectron) {
+    if (!isTauri()) {
       return { success: false, error: 'Only available in the desktop app.' };
     }
-    return await window.electronAPI.claudeCode.login();
+    return await claudeCode.login();
   };
 
   const handleCheckAuth = async () => {
-    if (!window.electronAPI?.isElectron) return false;
-    return await window.electronAPI.claudeCode.isAuthenticated();
+    if (!isTauri()) return false;
+    return await claudeCode.isAuthenticated();
   };
 
   return (

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

@@ -1,41 +1,65 @@
-import { getDecision } from '@/lib/db';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { dataBridge } from '@/lib/data-bridge';
+import type { DecisionData } from '@/lib/data-bridge';
 
-interface PageProps {
-  params: Promise<{ id: string }>;
-}
+export default function DecisionPage() {
+  const { id } = useParams<{ id: string }>();
+  const [decision, setDecision] = useState<DecisionData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
 
-export default async function DecisionPage({ params }: PageProps) {
-  const { id } = await params;
-  const decisionId = parseInt(id, 10);
+  useEffect(() => {
+    async function loadData() {
+      const decisionId = parseInt(id || '', 10);
+      if (isNaN(decisionId)) {
+        setNotFound(true);
+        setLoading(false);
+        return;
+      }
 
-  if (isNaN(decisionId)) {
-    notFound();
-  }
+      try {
+        const data = await dataBridge.getDecision(decisionId);
+        if (!data) {
+          setNotFound(true);
+        } else {
+          setDecision(data);
+        }
+      } catch {
+        setNotFound(true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [id]);
 
-  const decision = getDecision(decisionId);
+  if (loading) return null;
 
-  if (!decision) {
-    notFound();
+  if (notFound || !decision) {
+    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">Decision not found.</p>
+          <Link to="/" viewTransition className="text-[#5a7d7f] hover:underline">← Back to Dashboard</Link>
+        </div>
+      </div>
+    );
   }
 
   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-4 py-4">
-          <Link href="/" className="text-blue-600 dark:text-blue-400 hover:underline text-sm">
-            ← Back to Dashboard
-          </Link>
+        <div className="max-w-4xl mx-auto px-6 py-6">
+          <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 to parent work item */}
         {decision.work_item_id && (
-          <div className="mb-4 text-sm text-zinc-500">
-            <Link href={`/work/${decision.work_item_id}`} className="hover:underline">
+          <div className="mb-6 text-base text-zinc-500">
+            <Link to={`/work/${decision.work_item_id}`} viewTransition className="hover:underline">
               #{decision.work_item_id} {decision.work_item_title}
             </Link>
             <span className="mx-2">→</span>
@@ -43,65 +67,46 @@ export default async function DecisionPage({ params }: PageProps) {
           </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-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
-            <div className="flex items-start justify-between gap-4">
+          <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>
-                <div className="flex items-center gap-2 text-sm text-zinc-500 mb-1">
+                <div className="flex items-center gap-3 text-base text-zinc-500 mb-1.5">
                   <span>📋 Decision</span>
                   <span>•</span>
                   <span className="font-mono">#{decision.id}</span>
                 </div>
-                <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
-                  {decision.aspect}
-                </h1>
+                <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">{decision.aspect}</h1>
               </div>
             </div>
           </div>
 
-          {/* Decision content */}
-          <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
-            <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-2">
-              Decision
-            </h2>
-            <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap text-lg">
-              {decision.decision}
-            </p>
+          <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">Decision</h2>
+            <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap text-lg">{decision.decision}</p>
           </div>
 
-          {/* Rationale */}
           {decision.rationale && (
-            <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
-              <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-2">
-                Rationale
-              </h2>
-              <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap">
-                {decision.rationale}
-              </p>
+            <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">Rationale</h2>
+              <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap">{decision.rationale}</p>
             </div>
           )}
 
-          {/* Metadata */}
-          <div className="px-6 py-4">
-            <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-3">
-              Details
-            </h2>
-            <dl className="grid grid-cols-2 gap-4 text-sm">
+          <div className="px-8 py-6">
+            <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">
               <div>
                 <dt className="text-zinc-500">Related Work Item</dt>
                 <dd className="text-zinc-900 dark:text-zinc-100">
-                  <Link href={`/work/${decision.work_item_id}`} className="hover:underline text-blue-600 dark:text-blue-400">
+                  <Link to={`/work/${decision.work_item_id}`} viewTransition className="hover:underline text-[#5a7d7f] dark:text-[#a3bfc0]">
                     #{decision.work_item_id} {decision.work_item_title}
                   </Link>
                 </dd>
               </div>
               <div>
                 <dt className="text-zinc-500">Created</dt>
-                <dd className="text-zinc-900 dark:text-zinc-100">
-                  {new Date(decision.created_at).toLocaleDateString()}
-                </dd>
+                <dd className="text-zinc-900 dark:text-zinc-100">{new Date(decision.created_at).toLocaleDateString()}</dd>
               </div>
             </dl>
           </div>

package/apps/dashboard/app/demo/gates/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useState, useEffect, useCallback } from 'react';
 import { GateCard } from '@/components/GateCard';
 import { GateChoiceCard } from '@/components/GateChoiceCard';
@@ -124,18 +122,18 @@ export default function GateDemoPage() {
   const [activeTab, setActiveTab] = useState<DemoTab>('workflow');
 
   return (
-    <div className="min-h-screen bg-zinc-100 dark:bg-zinc-900 p-8">
+    <div className="flex-1 overflow-y-auto bg-zinc-100 dark:bg-zinc-900 p-10">
       <div className="max-w-5xl mx-auto">
         {/* Header */}
-        <div className="mb-6">
-          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-1">Gate Protocol Demo</h1>
-          <p className="text-zinc-500 dark:text-zinc-400 text-sm">
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-1.5">Gate Protocol Demo</h1>
+          <p className="text-zinc-500 dark:text-zinc-400 text-base">
             Prototype narrated UI components for workflow status and user input.
           </p>
         </div>
 
         {/* Tab nav */}
-        <div className="flex gap-1 mb-6 bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 p-1 w-fit"
+        <div className="flex gap-1.5 mb-8 bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 p-1.5 w-fit"
           style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.03)' }}
         >
           {([
@@ -146,7 +144,7 @@ export default function GateDemoPage() {
             <button
               key={id}
               onClick={() => setActiveTab(id)}
-              className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-colors ${
+              className={`px-5 py-2 text-base font-medium rounded-lg transition-colors ${
                 activeTab === id
                   ? 'bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900'
                   : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
@@ -250,11 +248,11 @@ function WorkflowDemo() {
   return (
     <>
       {/* Controls */}
-      <div className="flex items-center gap-3 mb-6">
+      <div className="flex items-center gap-4 mb-8">
         <button
           onClick={play}
           disabled={isPlaying}
-          className="px-4 py-2 bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 disabled:opacity-50 text-white dark:text-zinc-900 text-sm font-medium rounded-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0"
+          className="px-5 py-3 bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 disabled:opacity-50 text-white dark:text-zinc-900 text-base font-medium rounded-xl transition-[color,background-color,opacity] duration-200"
           style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)' }}
         >
           {isDone ? 'Replay' : isPaused ? 'Waiting for input...' : isPlaying ? 'Playing...' : 'Play Workflow'}
@@ -262,20 +260,20 @@ function WorkflowDemo() {
         {(isPlaying || isDone) && (
           <button
             onClick={reset}
-            className="px-4 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-sm font-medium rounded-xl transition-colors"
+            className="px-5 py-3 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-base font-medium rounded-xl transition-colors"
           >
             Reset
           </button>
         )}
         <div className="flex-1" />
-        <div className="flex bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 p-1 overflow-hidden"
+        <div className="flex bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 p-1.5 overflow-hidden"
           style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.03)' }}
         >
           {(['narrated', 'direct', 'split'] as ViewMode[]).map(mode => (
             <button
               key={mode}
               onClick={() => setViewMode(mode)}
-              className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
+              className={`px-4 py-2 text-base font-medium rounded-lg transition-colors ${
                 viewMode === mode
                   ? 'bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900'
                   : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
@@ -290,13 +288,13 @@ function WorkflowDemo() {
       {/* Progress */}
       {(isPlaying || isDone) && (
         <div className="mb-6">
-          <div className="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400 mb-1.5">
+          <div className="flex items-center justify-between text-base text-zinc-500 dark:text-zinc-400 mb-2">
             <span>{gateCount} of {WORKFLOW_GATES.length} gates</span>
             <span>{visibleCount} of {totalSteps} events</span>
           </div>
           <div className="h-1 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
             <div
-              className="h-full bg-zinc-900 dark:bg-zinc-100 rounded-full transition-all duration-500"
+              className="h-full bg-zinc-900 dark:bg-zinc-100 rounded-full transition-[width] duration-500"
               style={{ width: `${(visibleCount / totalSteps) * 100}%` }}
             />
           </div>
@@ -305,7 +303,7 @@ function WorkflowDemo() {
 
       {/* Content */}
       {viewMode === 'split' ? (
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-2 gap-6">
           <Panel title="Summary View" subtitle="What the user sees" highlight>
             <NarratedView gates={visibleGates} isPlaying={isPlaying} answeredQuestions={answeredQuestions} onAnswerQuestion={handleAnswerQuestion} />
           </Panel>
@@ -324,26 +322,26 @@ function WorkflowDemo() {
       )}
 
       {!isPlaying && !isPaused && !isDone && (
-        <div className="mt-6 bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 p-4"
+        <div className="mt-6 bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700 p-6"
           style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.03)' }}
         >
-          <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-3">How it works</h3>
-          <div className="grid grid-cols-4 gap-4 text-xs text-zinc-500 dark:text-zinc-400">
+          <h3 className="text-base font-semibold text-zinc-700 dark:text-zinc-300 mb-4">How it works</h3>
+          <div className="grid grid-cols-4 gap-6 text-base text-zinc-500 dark:text-zinc-400">
             <div>
               <span className="font-medium text-zinc-700 dark:text-zinc-300">1. User sends request</span>
-              <p className="mt-1">"Add form validation to the signup page"</p>
+              <p className="mt-1.5">"Add form validation to the signup page"</p>
             </div>
             <div>
               <span className="font-medium text-zinc-700 dark:text-zinc-300">2. Question gates pause</span>
-              <p className="mt-1">When Claude needs input, an interactive choice card appears</p>
+              <p className="mt-1.5">When Claude needs input, an interactive choice card appears</p>
             </div>
             <div>
               <span className="font-medium text-zinc-700 dark:text-zinc-300">3. Claude works (hidden)</span>
-              <p className="mt-1">Reads files, makes edits, runs commands — behind the scenes</p>
+              <p className="mt-1.5">Reads files, makes edits, runs commands — behind the scenes</p>
             </div>
             <div>
               <span className="font-medium text-zinc-700 dark:text-zinc-300">4. Gates signal progress</span>
-              <p className="mt-1">Clean status cards appear at key workflow milestones</p>
+              <p className="mt-1.5">Clean status cards appear at key workflow milestones</p>
             </div>
           </div>
         </div>
@@ -376,10 +374,10 @@ function CardsShowcase() {
 
   return (
     <div>
-      <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">
+      <p className="text-base text-zinc-500 dark:text-zinc-400 mb-4">
         All gate card types shown with sample data, including the interactive question gate. Each card matches the kanban card design system.
       </p>
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-2 gap-4">
         {allGateTypes.map((gate, i) => (
           <GateCard
             key={i}
@@ -411,8 +409,8 @@ function ChoicesShowcase() {
     <div className="space-y-8">
       {/* Approach selection */}
       <div>
-        <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1">UX Approach Selection</h3>
-        <p className="text-xs text-zinc-500 dark:text-zinc-400 mb-3">
+        <h3 className="text-base font-semibold text-zinc-700 dark:text-zinc-300 mb-1">UX Approach Selection</h3>
+        <p className="text-base text-zinc-500 dark:text-zinc-400 mb-3">
           Shown during feature-planning when Claude proposes multiple approaches.
         </p>
         <div className="max-w-lg">
@@ -427,8 +425,8 @@ function ChoicesShowcase() {
 
       {/* Confirmation */}
       <div>
-        <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1">Plan Confirmation</h3>
-        <p className="text-xs text-zinc-500 dark:text-zinc-400 mb-3">
+        <h3 className="text-base font-semibold text-zinc-700 dark:text-zinc-300 mb-1">Plan Confirmation</h3>
+        <p className="text-base text-zinc-500 dark:text-zinc-400 mb-3">
           Shown when Claude needs a go/no-go decision before starting implementation.
         </p>
         <div className="max-w-lg">
@@ -443,8 +441,8 @@ function ChoicesShowcase() {
 
       {/* Disabled state (after selection) */}
       <div>
-        <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1">After Selection (Locked)</h3>
-        <p className="text-xs text-zinc-500 dark:text-zinc-400 mb-3">
+        <h3 className="text-base font-semibold text-zinc-700 dark:text-zinc-300 mb-1">After Selection (Locked)</h3>
+        <p className="text-base text-zinc-500 dark:text-zinc-400 mb-3">
           How the card looks after the user has made their choice and the workflow continues.
         </p>
         <div className="max-w-lg">
@@ -476,21 +474,21 @@ function Panel({ title, subtitle, highlight, children }: {
     <div
       className={`bg-white dark:bg-zinc-800 rounded-xl border overflow-hidden ${
         highlight
-          ? 'border-blue-200 dark:border-blue-800'
+          ? 'border-[#819D9F]/30 dark:border-[#819D9F]/30'
           : 'border-zinc-200 dark:border-zinc-700'
       }`}
       style={{ boxShadow: PANEL_SHADOW }}
     >
       <div className={`px-4 py-3 border-b ${
         highlight
-          ? 'border-blue-100 dark:border-blue-900 bg-blue-50/50 dark:bg-blue-900/10'
+          ? 'border-[#819D9F]/20 dark:border-[#819D9F]/20 bg-[#e8f0f0]/50 dark:bg-[#819D9F]/10'
           : 'border-zinc-100 dark:border-zinc-700'
       }`}>
-        <h2 className={`text-sm font-semibold ${
-          highlight ? 'text-blue-900 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300'
+        <h2 className={`text-base font-semibold ${
+          highlight ? 'text-zinc-900 dark:text-[#a3bfc0]' : 'text-zinc-700 dark:text-zinc-300'
         }`}>{title}</h2>
-        <p className={`text-xs ${
-          highlight ? 'text-blue-500 dark:text-blue-400' : 'text-zinc-400 dark:text-zinc-500'
+        <p className={`text-base ${
+          highlight ? 'text-[#819D9F] dark:text-[#a3bfc0]' : 'text-zinc-400 dark:text-zinc-500'
         }`}>{subtitle}</p>
       </div>
       <div className="p-4 min-h-[400px] max-h-[600px] overflow-y-auto">
@@ -503,13 +501,13 @@ function Panel({ title, subtitle, highlight, children }: {
 function UserBubble({ text }: { text: string }) {
   return (
     <div
-      className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-3 ml-8"
+      className="bg-[#e8f0f0] dark:bg-[#819D9F]/20 border border-[#819D9F]/30 dark:border-[#819D9F]/30 rounded-xl p-3 ml-8"
       style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.03)' }}
     >
       <div className="flex items-center gap-2 mb-1">
-        <span className="text-xs font-medium text-blue-600 dark:text-blue-400">You</span>
+        <span className="text-base font-medium text-[#5a7d7f] dark:text-[#a3bfc0]">You</span>
       </div>
-      <p className="text-sm text-blue-900 dark:text-blue-100">{text}</p>
+      <p className="text-base text-zinc-900 dark:text-zinc-100">{text}</p>
     </div>
   );
 }
@@ -522,7 +520,7 @@ function NarratedView({ gates, isPlaying, answeredQuestions, onAnswerQuestion }:
 }) {
   if (gates.length === 0 && !isPlaying) {
     return (
-      <div className="flex items-center justify-center h-full text-zinc-400 dark:text-zinc-500 text-sm">
+      <div className="flex items-center justify-center h-full text-zinc-400 dark:text-zinc-500 text-base">
         Press "Play Workflow" to start
       </div>
     );
@@ -558,7 +556,7 @@ function DirectView({ messages, gates, isPlaying, answeredQuestions, onAnswerQue
 }) {
   if (messages.length === 0 && !isPlaying) {
     return (
-      <div className="flex items-center justify-center h-full text-zinc-400 dark:text-zinc-500 text-sm">
+      <div className="flex items-center justify-center h-full text-zinc-400 dark:text-zinc-500 text-base">
         Press "Play Workflow" to start
       </div>
     );
@@ -603,7 +601,7 @@ function DirectView({ messages, gates, isPlaying, answeredQuestions, onAnswerQue
         if (msg.type === 'assistant') {
           return (
             <div key={i} className="bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-3" style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.02)' }}>
-              <p className="text-sm text-zinc-700 dark:text-zinc-300">{msg.content}</p>
+              <p className="text-base text-zinc-700 dark:text-zinc-300">{msg.content}</p>
             </div>
           );
         }
@@ -645,8 +643,8 @@ function DirectView({ messages, gates, isPlaying, answeredQuestions, onAnswerQue
 
 function WorkingIndicator() {
   return (
-    <div className="flex items-center gap-2 text-xs text-zinc-400 dark:text-zinc-500 py-2 pl-1">
-      <span className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse" />
+    <div className="flex items-center gap-2 text-base text-zinc-400 dark:text-zinc-500 py-2 pl-1">
+      <span className="w-1.5 h-1.5 bg-[#819D9F] rounded-full animate-pulse" />
       Working...
     </div>
   );