jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/ReviewFooter.tsx

@@ -0,0 +1,139 @@
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { dataBridge } from '@/lib/data-bridge';
+
+interface ReviewFooterProps {
+  workItemId: string;
+  onAccepted: () => void;
+  onRejected: (reason: string) => void;
+  onAskQuestion: () => void;
+}
+
+export function ReviewFooter({ workItemId, onAccepted, onRejected, onAskQuestion }: ReviewFooterProps) {
+  const [showRejectInput, setShowRejectInput] = useState(false);
+  const [rejectReason, setRejectReason] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleAccept = async () => {
+    setErrorMessage(null);
+    setIsSubmitting(true);
+    try {
+      await dataBridge.updateStatus(parseInt(workItemId, 10), 'done');
+      onAccepted();
+    } catch {
+      setErrorMessage('Failed to accept. Please try again.');
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRejectClick = () => {
+    setShowRejectInput(true);
+  };
+
+  const handleRejectConfirm = async () => {
+    if (!rejectReason.trim()) return;
+    setErrorMessage(null);
+    setIsSubmitting(true);
+    try {
+      await dataBridge.updateStatus(parseInt(workItemId, 10), 'in_progress', rejectReason.trim());
+      const reason = rejectReason.trim();
+      setIsSubmitting(false);
+      setShowRejectInput(false);
+      setRejectReason('');
+      onRejected(reason);
+    } catch {
+      setErrorMessage('Failed to reject. Please try again.');
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRejectCancel = () => {
+    setShowRejectInput(false);
+    setRejectReason('');
+  };
+
+  return (
+    <div className="border-t border-zinc-200 px-5 py-5 flex-shrink-0" data-testid="review-footer">
+      <p className="text-base font-semibold text-zinc-900 mb-1.5">
+        This work is done. How does it look?
+      </p>
+      <p className="text-base text-zinc-500 mb-4">
+        Just a heads up. This chat will close after acceptance.
+      </p>
+
+      {errorMessage && (
+        <p className="text-sm text-red-600 mb-3" data-testid="review-error-message">{errorMessage}</p>
+      )}
+
+      {!showRejectInput ? (
+        <div className="flex items-center gap-2" data-testid="review-actions">
+          <Button
+            onClick={handleAccept}
+            loading={isSubmitting}
+            data-testid="review-accept-button"
+          >
+            Accept
+          </Button>
+          <Button
+            onClick={handleRejectClick}
+            variant="secondary"
+            data-testid="review-reject-button"
+          >
+            Reject
+          </Button>
+          <Button
+            onClick={onAskQuestion}
+            variant="ghost"
+            data-testid="review-ask-question-button"
+          >
+            Ask a question
+          </Button>
+        </div>
+      ) : (
+        <div data-testid="review-reject-input-area">
+          <Input
+            type="text"
+            value={rejectReason}
+            onChange={(e) => setRejectReason(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && rejectReason.trim()) {
+                handleRejectConfirm();
+              }
+              if (e.key === 'Escape') {
+                handleRejectCancel();
+              }
+            }}
+            placeholder="Rejection reason..."
+            size="sm"
+            error
+            autoFocus
+            data-testid="review-reject-reason-input"
+          />
+          <div className="flex items-center gap-1.5 mt-2">
+            <Button
+              onClick={handleRejectConfirm}
+              disabled={!rejectReason.trim()}
+              loading={isSubmitting}
+              variant="destructive"
+              size="sm"
+              data-testid="review-reject-confirm"
+            >
+              Reject
+            </Button>
+            <Button
+              onClick={handleRejectCancel}
+              variant="ghost"
+              size="sm"
+              data-testid="review-reject-cancel"
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/dashboard/components/SessionList.tsx

@@ -1,6 +1,6 @@
-'use client';
 
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
+import { Button } from '@/components/ui/Button';
 
 export interface SessionItem {
   id: string;
@@ -26,23 +26,23 @@ export function SessionList({
   return (
     <div className="flex-1 flex flex-col" data-testid="session-list">
       {/* Header */}
-      <div className="px-4 py-3 border-b border-zinc-800">
+      <div className="px-5 py-4 border-b border-zinc-800">
         <div className="flex items-center justify-between">
-          <h2 className="text-sm font-semibold text-white">Sessions</h2>
-          <button
+          <h2 className="text-base font-semibold text-white">Sessions</h2>
+          <Button
             onClick={onNewSession}
-            className="px-3 py-1.5 text-xs font-medium bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
+            size="sm"
             data-testid="new-session-button"
           >
             New Session
-          </button>
+          </Button>
         </div>
       </div>
 
       {/* Session List */}
       <div className="flex-1 overflow-y-auto">
         {sessions.length === 0 ? (
-          <div className="p-4 text-center text-zinc-500 text-sm" data-testid="empty-session-state">
+          <div className="p-6 text-center text-zinc-500 text-base" data-testid="empty-session-state">
             No sessions yet. Click New Session to start.
           </div>
         ) : (
@@ -50,39 +50,39 @@ export function SessionList({
             {sessions.map((session) => (
               <div
                 key={session.id}
-                className="flex items-center hover:bg-zinc-800/50 transition-colors"
+                className="flex items-center hover:bg-zinc-800/50 transition-colors duration-200 ease-out"
                 data-testid={`session-item-${session.id}`}
               >
-                <motion.button
+                <m.button
                   onClick={() => onSelectSession(session.id)}
-                  className="flex-1 px-4 py-3 text-left"
+                  className="flex-1 px-5 py-4 text-left"
                   whileHover={{ x: 4 }}
                 >
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-3">
                     <SessionIcon hasFeature={!!session.featureId} />
                     <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-white truncate">
+                      <p className="text-base font-medium text-white truncate">
                         {session.featureId ? session.featureTitle : session.title}
                       </p>
                       {session.featureId && (
-                        <span className="inline-flex items-center px-1.5 py-0.5 mt-1 text-xs font-medium bg-blue-900/50 text-blue-300 rounded">
+                        <span className="inline-flex items-center px-2 py-1 mt-1.5 text-xs font-medium bg-[#819D9F]/20 text-[#a3bfc0] rounded">
                           #{session.featureId}
                         </span>
                       )}
                       {!session.featureId && (
-                        <p className="text-xs text-zinc-500 mt-0.5">Unlinked session</p>
+                        <p className="text-base text-zinc-500 mt-1">Unlinked session</p>
                       )}
                     </div>
                     <ChevronIcon />
                   </div>
-                </motion.button>
+                </m.button>
                 {onCloseSession && (
                   <button
                     onClick={(e) => {
                       e.stopPropagation();
                       onCloseSession(session.id);
                     }}
-                    className="p-2 mr-2 rounded hover:bg-zinc-700 text-zinc-500 hover:text-zinc-300 transition-colors"
+                    className="p-2.5 mr-3 rounded hover:bg-zinc-700 text-zinc-500 hover:text-zinc-300 transition-colors duration-200 ease-out"
                     aria-label="Close session"
                     data-testid={`close-session-${session.id}`}
                   >
@@ -101,10 +101,10 @@ export function SessionList({
 function SessionIcon({ hasFeature }: { hasFeature: boolean }) {
   return (
     <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
-      hasFeature ? 'bg-blue-900/50' : 'bg-zinc-800'
+      hasFeature ? 'bg-[#819D9F]/20' : 'bg-zinc-800'
     }`}>
       <svg
-        className={`w-4 h-4 ${hasFeature ? 'text-blue-400' : 'text-zinc-400'}`}
+        className={`w-4 h-4 ${hasFeature ? 'text-[#819D9F]' : 'text-zinc-400'}`}
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"

package/apps/dashboard/components/SubscribeContent.tsx

@@ -1,25 +1,10 @@
-'use client';
 
 import { useState, useEffect, useRef } from 'react';
-
+import { Button } from '@/components/ui/Button';
+import { isTauri, auth, shell } 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)
-  `,
-};
-
 type PageState = 'idle' | 'checkout-opened' | 'polling' | 'upgraded';
 type PlanType = 'monthly' | 'lifetime';
 
@@ -35,14 +20,38 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
   const [userPlan, setUserPlan] = useState<string | null>(null);
   const [pollingPlan, setPollingPlan] = useState<PlanType | null>(null);
   const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
     async function loadAuth() {
-      if (!window.electronAPI?.isElectron) return;
-      const status = await window.electronAPI.auth.getStatus();
+      if (!isTauri()) return;
+      const status = await auth.getStatus();
       if (status.authenticated && status.user) {
         setUserEmail(status.user.email);
         setUserPlan(status.user.plan || 'free');
+
+        // Check server-side plan in case webhook updated it after local JWT was issued
+        const token = await auth.getToken();
+        if (token) {
+          try {
+            const res = await fetch(`${API_BASE}/auth/me`, {
+              headers: { 'Authorization': `Bearer ${token}` },
+            });
+            if (res.ok) {
+              const data = await res.json() as { user: { plan: string; email: string }; token?: string };
+              if (data.user.plan !== 'free') {
+                if (data.token) {
+                  await auth.saveToken(data.token, data.user);
+                }
+                setUserPlan(data.user.plan);
+                setPageState('upgraded');
+                return;
+              }
+            }
+          } catch {
+            // Fall through to show upgrade UI on network error
+          }
+        }
       }
     }
     loadAuth();
@@ -51,19 +60,22 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
   useEffect(() => {
     return () => {
       if (pollingRef.current) clearInterval(pollingRef.current);
+      abortRef.current?.abort();
     };
   }, []);
 
   const startPolling = () => {
     setPageState('polling');
+    abortRef.current = new AbortController();
 
     pollingRef.current = setInterval(async () => {
       try {
-        const token = await window.electronAPI!.auth.getToken();
+        const token = await auth.getToken();
         if (!token) return;
 
         const res = await fetch(`${API_BASE}/auth/me`, {
           headers: { 'Authorization': `Bearer ${token}` },
+          signal: abortRef.current?.signal,
         });
 
         if (!res.ok) return;
@@ -72,7 +84,7 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
 
         if (data.user.plan !== 'free') {
           if (data.token) {
-            await window.electronAPI!.auth.saveToken(data.token, data.user);
+            await auth.saveToken(data.token, data.user);
           }
           setUserPlan(data.user.plan);
           setPageState('upgraded');
@@ -85,13 +97,38 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
   };
 
   const handleCheckout = async (plan: 'monthly' | 'lifetime') => {
-    if (!window.electronAPI?.isElectron) return;
+    if (!isTauri()) return;
     setCheckoutPlan(plan);
     setError(null);
 
-    const result = await window.electronAPI.subscription.createCheckout(plan);
-    if (!result.success) {
-      setError(result.error || 'Failed to start checkout.');
+    try {
+      const token = await auth.getToken();
+      if (!token) {
+        setError('Not authenticated');
+        setCheckoutPlan(null);
+        return;
+      }
+      const res = await fetch(`${API_BASE}/billing/create-checkout`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plan }),
+      });
+      if (res.ok) {
+        const data = await res.json() as { url?: string };
+        if (data.url) {
+          await shell.openUrl(data.url);
+        } else {
+          setError('Failed to start checkout.');
+          setCheckoutPlan(null);
+          return;
+        }
+      } else {
+        setError('Failed to start checkout.');
+        setCheckoutPlan(null);
+        return;
+      }
+    } catch {
+      setError('Failed to start checkout.');
       setCheckoutPlan(null);
       return;
     }
@@ -111,20 +148,16 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
 
   if (pageState === 'upgraded') {
     return (
-      <div className="max-w-md w-full space-y-8 text-center">
+      <div className="max-w-md w-full space-y-10 text-center">
         <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
           You&apos;re all set!
         </h1>
         <p className="text-zinc-500 dark:text-zinc-400">
           Your plan has been upgraded to <span className="font-medium text-zinc-900 dark:text-zinc-100">{userPlan}</span>.
         </p>
-        <button
-          onClick={handleDone}
-          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={buttonGradientStyle}
-        >
+        <Button onClick={handleDone} size="lg" fullWidth>
           {onClose ? 'Done' : 'Go to Dashboard'}
-        </button>
+        </Button>
       </div>
     );
   }
@@ -132,8 +165,8 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
   const isPolling = pageState === 'polling';
 
   return (
-    <div className="max-w-md w-full space-y-8">
-      <div className="flex flex-col items-center space-y-4">
+    <div className="max-w-md w-full space-y-10">
+      <div className="flex flex-col items-center space-y-6">
         <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
           Unlock Unlimited Use
         </h1>
@@ -143,7 +176,7 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
       </div>
 
       {userEmail && (
-        <div className="bg-zinc-50 dark:bg-zinc-800 rounded-xl px-4 py-3 text-sm">
+        <div className="bg-zinc-50 dark:bg-zinc-800 rounded-xl px-5 py-4 text-base">
           <div className="flex justify-between items-center">
             <span className="text-zinc-500 dark:text-zinc-400">{userEmail}</span>
             <span className="text-zinc-400 dark:text-zinc-500 capitalize">{userPlan}</span>
@@ -152,39 +185,50 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
       )}
 
       {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>
       )}
 
-      <div className="pt-4 space-y-3">
-        <button
+      <div className="pt-6 space-y-4">
+        {!onClose && (
+          <Button
+            variant="ghost"
+            size="sm"
+            fullWidth
+            className="mb-2"
+            onClick={() => window.history.back()}
+          >
+            &larr; Go back
+          </Button>
+        )}
+        <Button
           onClick={() => handleCheckout('monthly')}
           disabled={checkoutPlan !== null || isPolling}
-          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 disabled:opacity-50 disabled:pointer-events-none"
-          style={{ cursor: (checkoutPlan || isPolling) ? 'default' : 'pointer', ...buttonGradientStyle }}
+          size="lg"
+          fullWidth
         >
           {pollingPlan === 'monthly' ? (
-            <span className="inline-flex items-center gap-2">
+            <span className="inline-flex items-center gap-3">
               <span className="animate-spin inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
               Upgrading...
             </span>
           ) : checkoutPlan === 'monthly' ? 'Opening checkout...' : 'Monthly'}
-        </button>
+        </Button>
 
-        <button
+        <Button
           onClick={() => handleCheckout('lifetime')}
           disabled={checkoutPlan !== null || isPolling}
-          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 disabled:opacity-50 disabled:pointer-events-none"
-          style={{ cursor: (checkoutPlan || isPolling) ? 'default' : 'pointer', ...buttonGradientStyle }}
+          size="lg"
+          fullWidth
         >
           {pollingPlan === 'lifetime' ? (
-            <span className="inline-flex items-center gap-2">
+            <span className="inline-flex items-center gap-3">
               <span className="animate-spin inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
               Upgrading...
             </span>
           ) : checkoutPlan === 'lifetime' ? 'Opening checkout...' : 'Lifetime Access'}
-        </button>
+        </Button>
       </div>
     </div>
   );

package/apps/dashboard/components/TestTree.tsx

@@ -1,7 +1,7 @@
-'use client';
 
 import { useState } from 'react';
-import type { TestDashboardData, TestEpic, TestFeature, TestScenario } from '@/lib/tests';
+import type { TestDashboardData, TestEpic, TestFeature, TestScenario } from '@/lib/db';
+import { TypeIcon } from './TypeIcon';
 
 const statusIcons: Record<string, string> = {
   pass: '✅',
@@ -27,7 +27,7 @@ function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
   return (
     <div className="select-none">
       <div
-        className={`flex items-center gap-2 py-1.5 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors ${hasError ? 'cursor-pointer' : ''}`}
+        className={`flex items-center gap-2 py-2 px-3 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out ${hasError ? 'cursor-pointer' : ''}`}
         style={{ paddingLeft: `${depth * 20 + 8}px` }}
         onClick={() => hasError && setExpanded(!expanded)}
       >
@@ -38,8 +38,8 @@ function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
         ) : (
           <span className="w-4" />
         )}
-        <span className="text-sm">{statusIcons[scenario.status]}</span>
-        <span className={`flex-1 text-sm ${statusColors[scenario.status]}`}>
+        <span className="text-base">{statusIcons[scenario.status]}</span>
+        <span className={`flex-1 text-base ${statusColors[scenario.status]}`}>
           {scenario.title}
         </span>
         <span className="text-xs text-zinc-400 font-mono">{scenario.duration}</span>
@@ -48,11 +48,11 @@ function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
       {/* Error details panel */}
       {expanded && hasError && (
         <div
-          className="mt-1 mb-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded text-sm"
+          className="mt-1.5 mb-3 p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800 rounded text-base"
           style={{ marginLeft: `${depth * 20 + 28}px` }}
         >
           {scenario.failedStep && (
-            <div className="mb-2">
+            <div className="mb-3">
               <span className="font-semibold text-red-700 dark:text-red-300">Failed step: </span>
               <span className="text-red-600 dark:text-red-400">{scenario.failedStep}</span>
             </div>
@@ -60,7 +60,7 @@ function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
           {scenario.error && (
             <div>
               <span className="font-semibold text-red-700 dark:text-red-300">Error: </span>
-              <pre className="mt-1 p-2 bg-red-100 dark:bg-red-900/40 rounded text-xs text-red-800 dark:text-red-200 overflow-x-auto whitespace-pre-wrap">
+              <pre className="mt-1.5 p-3 bg-red-100 dark:bg-red-900/40 rounded text-xs text-red-800 dark:text-red-200 overflow-x-auto whitespace-pre-wrap">
                 {scenario.error}
               </pre>
             </div>
@@ -87,7 +87,7 @@ function FeatureNode({ feature, depth }: FeatureNodeProps) {
   return (
     <div className="select-none">
       <div
-        className="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer"
+        className="flex items-center gap-2 py-2 px-3 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out cursor-pointer"
         style={{ paddingLeft: `${depth * 20 + 8}px` }}
         onClick={() => setExpanded(!expanded)}
       >
@@ -98,12 +98,12 @@ function FeatureNode({ feature, depth }: FeatureNodeProps) {
         ) : (
           <span className="w-4" />
         )}
-        <span className="text-sm">✨</span>
+        <span className="text-base"><TypeIcon type="feature" /></span>
         <span className={`flex-1 font-medium ${allPassing ? 'text-zinc-900 dark:text-zinc-100' : 'text-red-600 dark:text-red-400'}`}>
           {feature.title}
         </span>
         {/* Health badge */}
-        <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800">
+        <span className="text-xs px-2 py-1 rounded bg-zinc-100 dark:bg-zinc-800">
           <span className="text-green-600 dark:text-green-400">{passingCount}</span>
           <span className="text-zinc-400 mx-1">/</span>
           <span className={failingCount > 0 ? 'text-red-600 dark:text-red-400' : 'text-zinc-400'}>
@@ -135,7 +135,7 @@ function EpicNode({ epic }: EpicNodeProps) {
   return (
     <div className="select-none">
       <div
-        className="flex items-center gap-2 py-2 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer"
+        className="flex items-center gap-2 py-3 px-3 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out cursor-pointer"
         onClick={() => setExpanded(!expanded)}
       >
         {hasFeatures ? (
@@ -145,12 +145,12 @@ function EpicNode({ epic }: EpicNodeProps) {
         ) : (
           <span className="w-4" />
         )}
-        <span className="text-base">🎯</span>
+        <span className="text-base"><TypeIcon type="epic" /></span>
         <span className={`flex-1 font-semibold ${allPassing ? 'text-zinc-900 dark:text-zinc-100' : 'text-red-600 dark:text-red-400'}`}>
           {epic.title}
         </span>
         {/* Health badge */}
-        <span className="text-xs px-2 py-1 rounded bg-zinc-100 dark:bg-zinc-800 font-mono">
+        <span className="text-xs px-3 py-1.5 rounded bg-zinc-100 dark:bg-zinc-800 font-mono">
           <span className="text-green-600 dark:text-green-400">{epic.healthBadge.passing}</span>
           <span className="text-zinc-400 mx-1">/</span>
           <span className={epic.healthBadge.failing > 0 ? 'text-red-600 dark:text-red-400' : 'text-zinc-400'}>
@@ -184,7 +184,7 @@ export function TestTree({ data }: TestTreeProps) {
   }
 
   return (
-    <div className="font-mono text-sm space-y-2">
+    <div className="font-mono text-base space-y-2">
       {/* Epics */}
       {data.epics.map(epic => (
         <EpicNode key={epic.id} epic={epic} />
@@ -194,7 +194,7 @@ export function TestTree({ data }: TestTreeProps) {
       {data.standaloneFeatures.length > 0 && (
         <div className="mt-4">
           {data.epics.length > 0 && (
-            <div className="text-xs text-zinc-400 uppercase tracking-wider mb-2 px-2">
+            <div className="text-base text-zinc-400 uppercase tracking-wider mb-2 px-2">
               Standalone Features
             </div>
           )}