jettypod 4.4.116 → 4.4.120

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

@@ -124,18 +124,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="min-h-screen 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 +146,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 +250,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-all duration-200 hover:-translate-y-0.5 active:translate-y-0"
           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 +262,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,7 +290,7 @@ 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>
@@ -305,7 +305,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 +324,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 +376,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 +411,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 +427,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 +443,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 +476,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 +503,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 +522,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 +558,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 +603,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 +645,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>
   );