jettypod 4.4.115 → 4.4.118

package/apps/dashboard/components/RealTimeTestsWrapper.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
+import { useClaudeSession } from '../contexts/ClaudeSessionContext';
 import type { TestDashboardData, TestFeature } from '@/lib/tests';
 
 interface RealTimeTestsWrapperProps {
@@ -31,6 +32,10 @@ const statusColors = {
 
 const SELECTED_FEATURE_KEY = 'tests-selected-feature-id';
 
+function parseUtcDate(dateStr: string): Date {
+  return new Date(dateStr.endsWith('Z') ? dateStr : dateStr.replace(' ', 'T') + 'Z');
+}
+
 type StepStatus = 'pending' | 'running' | 'passed' | 'failed';
 
 export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps) {
@@ -49,6 +54,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
 
   const elapsedStartRef = useRef<Record<string, number>>({});
   const allFeaturesRef = useRef<TestFeature[]>([]);
+  const { createFixScenarioSession } = useClaudeSession();
 
   const refreshUndefinedSteps = useCallback(() => {
     fetch('/api/tests/undefined')
@@ -397,7 +403,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
           )}
           {data.summary.lastRun && (
             <div className="flex items-center gap-2 px-4 py-2 text-sm text-zinc-500">
-              Last run: {new Date(data.summary.lastRun).toLocaleString()}
+              Last run: {parseUtcDate(data.summary.lastRun).toLocaleString()}
             </div>
           )}
         </div>
@@ -573,7 +579,14 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                         {isRunning && elapsed !== undefined ? (
                           <span className="text-xs font-mono text-blue-500">{elapsed}s</span>
                         ) : (
-                          <span className="text-xs font-mono text-zinc-400">{scenario.duration}</span>
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs font-mono text-zinc-400">{scenario.duration}</span>
+                            {scenario.lastRun && (
+                              <span className="text-xs text-zinc-400" title={parseUtcDate(scenario.lastRun).toLocaleString()}>
+                                {parseUtcDate(scenario.lastRun).toLocaleString()}
+                              </span>
+                            )}
+                          </div>
                         )}
                         <button
                           onClick={(e) => {
@@ -671,6 +684,21 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                             {scenario.error}
                           </pre>
                         </div>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            createFixScenarioSession(
+                              selectedFeature.featureFile,
+                              scenario.title,
+                              scenario.error!,
+                              scenario.failedStep,
+                              scenario.steps
+                            );
+                          }}
+                          className="mt-3 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors text-violet-700 bg-violet-100 hover:bg-violet-200 border border-violet-200"
+                        >
+                          Fix with Claude
+                        </button>
                       </div>
                     )}
                   </div>

package/apps/dashboard/components/SubscribeContent.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+
+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';
+
+interface SubscribeContentProps {
+  onClose?: () => void;
+}
+
+export function SubscribeContent({ onClose }: SubscribeContentProps) {
+  const [error, setError] = useState<string | null>(null);
+  const [checkoutPlan, setCheckoutPlan] = useState<string | null>(null);
+  const [pageState, setPageState] = useState<PageState>('idle');
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+  const [userPlan, setUserPlan] = useState<string | null>(null);
+  const [pollingPlan, setPollingPlan] = useState<PlanType | null>(null);
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    async function loadAuth() {
+      if (!window.electronAPI?.isElectron) return;
+      const status = await window.electronAPI.auth.getStatus();
+      if (status.authenticated && status.user) {
+        setUserEmail(status.user.email);
+        setUserPlan(status.user.plan || 'free');
+      }
+    }
+    loadAuth();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (pollingRef.current) clearInterval(pollingRef.current);
+    };
+  }, []);
+
+  const startPolling = () => {
+    setPageState('polling');
+
+    pollingRef.current = setInterval(async () => {
+      try {
+        const token = await window.electronAPI!.auth.getToken();
+        if (!token) return;
+
+        const res = await fetch(`${API_BASE}/auth/me`, {
+          headers: { 'Authorization': `Bearer ${token}` },
+        });
+
+        if (!res.ok) return;
+
+        const data = await res.json() as { user: { plan: string; email: string }; token?: string };
+
+        if (data.user.plan !== 'free') {
+          if (data.token) {
+            await window.electronAPI!.auth.saveToken(data.token, data.user);
+          }
+          setUserPlan(data.user.plan);
+          setPageState('upgraded');
+          if (pollingRef.current) clearInterval(pollingRef.current);
+        }
+      } catch {
+        // Silently continue polling on network/parse errors
+      }
+    }, 3000);
+  };
+
+  const handleCheckout = async (plan: 'monthly' | 'lifetime') => {
+    if (!window.electronAPI?.isElectron) return;
+    setCheckoutPlan(plan);
+    setError(null);
+
+    const result = await window.electronAPI.subscription.createCheckout(plan);
+    if (!result.success) {
+      setError(result.error || 'Failed to start checkout.');
+      setCheckoutPlan(null);
+      return;
+    }
+
+    setCheckoutPlan(null);
+    setPollingPlan(plan);
+    startPolling();
+  };
+
+  const handleDone = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      window.location.href = '/';
+    }
+  };
+
+  if (pageState === 'upgraded') {
+    return (
+      <div className="max-w-md w-full space-y-8 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}
+        >
+          {onClose ? 'Done' : 'Go to Dashboard'}
+        </button>
+      </div>
+    );
+  }
+
+  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">
+        <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
+          Unlock Unlimited Use
+        </h1>
+        <p className="text-zinc-500 dark:text-zinc-400 text-center">
+          You&apos;re currently on the free plan.
+        </p>
+      </div>
+
+      {userEmail && (
+        <div className="bg-zinc-50 dark:bg-zinc-800 rounded-xl px-4 py-3 text-sm">
+          <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>
+          </div>
+        </div>
+      )}
+
+      {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">
+          {error}
+        </div>
+      )}
+
+      <div className="pt-4 space-y-3">
+        <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 }}
+        >
+          {pollingPlan === 'monthly' ? (
+            <span className="inline-flex items-center gap-2">
+              <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
+          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 }}
+        >
+          {pollingPlan === 'lifetime' ? (
+            <span className="inline-flex items-center gap-2">
+              <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>
+      </div>
+    </div>
+  );
+}

package/apps/dashboard/components/TipCard.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
+
+const STORAGE_KEY = 'jettypod-dismissed-tips';
+
+function getDismissedTips(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+  } catch {
+    return [];
+  }
+}
+
+function dismissTip(tipId: string): void {
+  try {
+    const dismissed = getDismissedTips();
+    if (!dismissed.includes(tipId)) {
+      dismissed.push(tipId);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(dismissed));
+    }
+  } catch {
+    // localStorage unavailable (private browsing, storage full, etc.)
+    // Dismiss still works for current session via React state
+  }
+}
+
+// Multi-layer shadow matching kanban card system
+const CARD_SHADOW = '0 1px 2px rgba(0,0,0,0.02)';
+
+interface TipCardProps {
+  tipId: string;
+  icon: string;
+  title: string;
+  body: string | React.ReactNode;
+  onDismiss?: (tipId: string) => void;
+}
+
+export function TipCard({ tipId, icon, title, body, onDismiss }: TipCardProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const [dismissed, setDismissed] = useState(() => getDismissedTips().includes(tipId));
+
+  // Sync with localStorage on mount (in case it changed between renders)
+  useEffect(() => {
+    setDismissed(getDismissedTips().includes(tipId));
+  }, [tipId]);
+
+  function handleDismiss() {
+    dismissTip(tipId);
+    setDismissed(true);
+    onDismiss?.(tipId);
+  }
+
+  return (
+    <AnimatePresence>
+      {!dismissed && (
+        <motion.div
+          data-testid={`tip-card-${tipId}`}
+          initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 8 }}
+          animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+          exit={prefersReducedMotion
+            ? { opacity: 0 }
+            : { opacity: 0, y: -8, scale: 0.97, transition: { duration: 0.25 } }
+          }
+          transition={{ duration: prefersReducedMotion ? 0.15 : 0.35, ease: [0.22, 1, 0.36, 1] }}
+          style={{
+            background: 'linear-gradient(135deg, #f0fdfa 0%, #f0fdfb 100%)',
+            border: '1px solid #ccfbf1',
+            borderRadius: 12,
+            padding: 14,
+            boxShadow: CARD_SHADOW,
+          }}
+        >
+          {/* Header: icon + label/title */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
+            <div
+              style={{
+                width: 34,
+                height: 34,
+                borderRadius: '50%',
+                background: 'rgba(20, 184, 166, 0.12)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 16,
+                flexShrink: 0,
+              }}
+            >
+              {icon}
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: 10,
+                  fontWeight: 700,
+                  textTransform: 'uppercase' as const,
+                  letterSpacing: '0.06em',
+                  color: '#0d9488',
+                  opacity: 0.7,
+                }}
+              >
+                Tip
+              </div>
+              <div
+                style={{
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: '#134e4a',
+                  marginTop: 1,
+                }}
+              >
+                {title}
+              </div>
+            </div>
+          </div>
+
+          {/* Body */}
+          <div
+            style={{
+              fontSize: 13,
+              lineHeight: 1.55,
+              color: '#52525b',
+              marginLeft: 44,
+            }}
+          >
+            {typeof body === 'string' ? (
+              <ReactMarkdown
+                components={{
+                  p: ({ children }) => <p style={{ margin: '0 0 8px 0' }}>{children}</p>,
+                  strong: ({ children }) => <strong style={{ fontWeight: 600, color: '#3f3f46' }}>{children}</strong>,
+                }}
+              >
+                {body.replace(/\n/g, '  \n')}
+              </ReactMarkdown>
+            ) : body}
+          </div>
+
+          {/* Footer: Got it button */}
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10 }}>
+            <button
+              onClick={handleDismiss}
+              data-testid={`tip-dismiss-${tipId}`}
+              style={{
+                background: 'transparent',
+                border: '1px solid #99f6e4',
+                fontSize: 12,
+                fontWeight: 600,
+                color: '#0d9488',
+                cursor: 'pointer',
+                padding: '5px 14px',
+                borderRadius: 8,
+                transition: 'background 0.15s, border-color 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'rgba(20, 184, 166, 0.08)';
+                e.currentTarget.style.borderColor = '#14b8a6';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'transparent';
+                e.currentTarget.style.borderColor = '#99f6e4';
+              }}
+            >
+              Got it
+            </button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export function isTipDismissed(tipId: string): boolean {
+  return getDismissedTips().includes(tipId);
+}

package/apps/dashboard/components/UpgradeBanner.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useUsage } from '../contexts/UsageContext';
+
+export function UpgradeBanner() {
+  const { allowed, used, limit, plan, loading } = useUsage();
+
+  if (loading || allowed || plan !== 'free') return null;
+
+  return (
+    <div
+      className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200 px-4 py-3 rounded-lg flex items-center justify-between flex-shrink-0"
+      data-testid="upgrade-banner"
+    >
+      <div className="flex items-center gap-2">
+        <span className="text-amber-600 dark:text-amber-400 text-lg">&#9888;</span>
+        <span className="text-sm font-medium">
+          Weekly limit reached ({used}/{limit} work items). Claude features are disabled until your usage resets.
+        </span>
+      </div>
+      <a
+        href="/subscribe"
+        className="px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white text-sm font-medium rounded-lg transition-colors whitespace-nowrap"
+      >
+        Upgrade
+      </a>
+    </div>
+  );
+}

package/apps/dashboard/components/WelcomeScreen.tsx

@@ -5,12 +5,14 @@ import type { RecentProject } from '@/lib/db-bridge';
 
 interface WelcomeScreenProps {
   recentProjects?: RecentProject[];
+  onNewProject?: () => void;
   onOpenProject?: () => void;
   onSelectRecentProject?: (project: RecentProject) => void;
 }
 
 export function WelcomeScreen({
   recentProjects = [],
+  onNewProject,
   onOpenProject,
   onSelectRecentProject,
 }: WelcomeScreenProps) {
@@ -31,10 +33,10 @@ export function WelcomeScreen({
           </p>
         </div>
 
-        {/* Open Project Button */}
-        <div className="pt-4">
+        {/* Project Buttons */}
+        <div className="pt-4 space-y-3">
           <button
-            onClick={onOpenProject}
+            onClick={onNewProject}
             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',
@@ -51,6 +53,14 @@ export function WelcomeScreen({
                 inset 0 -2px 4px rgba(129, 157, 159, 0.05)
               `,
             }}
+            data-testid="new-project-button"
+          >
+            New Project
+          </button>
+          <button
+            onClick={onOpenProject}
+            className="w-full py-3 px-6 rounded-xl font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 border border-zinc-200 dark:border-zinc-700"
+            style={{ cursor: 'pointer' }}
             data-testid="open-project-button"
           >
             Open Project
@@ -68,7 +78,7 @@ export function WelcomeScreen({
             </div>
           ) : (
             <div className="space-y-2">
-              {recentProjects.map((project) => (
+              {recentProjects.slice(0, 4).map((project) => (
                 <button
                   key={project.path}
                   onClick={() => onSelectRecentProject?.(project)}

package/apps/dashboard/components/settings/AccountSection.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useUsage } from '@/contexts/UsageContext';
+import { SubscribeContent } from '@/components/SubscribeContent';
+
+const planColors: Record<string, string> = {
+  free: 'bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300',
+  monthly: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
+  lifetime: 'bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300',
+};
+
+export function AccountSection() {
+  const router = useRouter();
+  const { plan, used, limit, loading, refresh } = useUsage();
+  const [email, setEmail] = useState<string | null>(null);
+  const [portalError, setPortalError] = useState<string | null>(null);
+  const [portalLoading, setPortalLoading] = useState(false);
+  const [showUpgrade, setShowUpgrade] = useState(false);
+
+  useEffect(() => {
+    async function loadAuth() {
+      if (!window.electronAPI?.isElectron) return;
+      try {
+        const status = await window.electronAPI.auth.getStatus();
+        if (status.authenticated && status.user) {
+          setEmail(status.user.email);
+        }
+      } catch {
+        // Auth status unavailable - email stays null, shows "Not signed in"
+      }
+    }
+    loadAuth();
+  }, []);
+
+  const isFree = plan === 'free';
+  const isAtCapacity = isFree && limit > 0 && used >= limit;
+
+  const handleManageSubscription = async () => {
+    if (!window.electronAPI?.billing?.openCustomerPortal) return;
+    setPortalError(null);
+    setPortalLoading(true);
+    try {
+      const result = await window.electronAPI.billing.openCustomerPortal();
+      if (result && !result.success) {
+        setPortalError(result.error || 'Unable to open billing portal');
+      }
+    } catch {
+      setPortalError('Unable to open billing portal');
+    } finally {
+      setPortalLoading(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    if (!window.electronAPI?.auth?.logout) return;
+    await window.electronAPI.auth.logout();
+    router.push('/login');
+  };
+
+  const handleUpgradeClose = () => {
+    setShowUpgrade(false);
+    refresh();
+  };
+
+  if (showUpgrade) {
+    return (
+      <section id="account" className="relative min-h-[500px]">
+        <button
+          onClick={handleUpgradeClose}
+          className="absolute top-0 right-0 p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors z-10"
+          aria-label="Close upgrade"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+        <div className="flex flex-col items-center justify-center min-h-[500px] py-8">
+          <SubscribeContent onClose={handleUpgradeClose} />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section id="account">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-medium text-zinc-900 dark:text-zinc-100">
+          Account
+        </h2>
+      </div>
+
+      {/* Email & Plan */}
+      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg space-y-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
+              Email
+            </label>
+            <p className="text-sm text-zinc-600 dark:text-zinc-400 mt-0.5">
+              {loading ? '...' : email || 'Not signed in'}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${planColors[plan] || planColors.free}`}>
+              {plan}
+            </span>
+          </div>
+        </div>
+
+        {/* Usage Bar (free users only) */}
+        {isFree && (
+          <div>
+            <div className="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400 mb-1">
+              <span>Weekly usage</span>
+              <span>{used} / {limit} work items</span>
+            </div>
+            <div className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all ${isAtCapacity ? 'bg-red-500' : 'bg-blue-500'}`}
+                style={{ width: `${limit > 0 ? Math.min((used / limit) * 100, 100) : 0}%` }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Action Button */}
+        <div className="pt-2 border-t border-zinc-200 dark:border-zinc-700 flex items-center justify-between">
+          <div>
+            {isFree ? (
+              <button
+                onClick={() => setShowUpgrade(true)}
+                className="px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
+              >
+                Upgrade
+              </button>
+            ) : (
+              <>
+                <button
+                  onClick={handleManageSubscription}
+                  disabled={portalLoading}
+                  className="px-3 py-1.5 text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 border border-zinc-300 dark:border-zinc-600 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {portalLoading ? 'Opening...' : 'Manage Subscription'}
+                </button>
+                {portalError && (
+                  <p className="text-xs text-red-500 mt-1">{portalError}</p>
+                )}
+              </>
+            )}
+          </div>
+          <button
+            onClick={handleLogout}
+            className="px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+          >
+            Log Out
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}