jettypod 4.4.116 → 4.4.120

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

@@ -0,0 +1,11 @@
+'use client';
+
+import { SubscribeContent } from '@/components/SubscribeContent';
+
+export default function SubscribePage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 p-8">
+      <SubscribeContent />
+    </div>
+  );
+}

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

@@ -22,6 +22,28 @@ export default function WelcomePage() {
     loadRecentProjects();
   }, []);
 
+  const handleNewProject = async () => {
+    setError(null);
+
+    if (!window.electronAPI?.isElectron) {
+      setError('Project creation is only available in the desktop app.');
+      return;
+    }
+
+    const result = await window.electronAPI.project.newProject();
+
+    if (result.canceled) {
+      return;
+    }
+
+    if (!result.success) {
+      setError(result.error || 'Failed to create project');
+      return;
+    }
+
+    window.location.href = '/';
+  };
+
   const handleOpenProject = async () => {
     setError(null);
 
@@ -70,12 +92,13 @@ export default function WelcomePage() {
   return (
     <>
       {error && (
-        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50">
+        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 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-4 py-3 rounded-xl text-base z-50">
           {error}
         </div>
       )}
       <WelcomeScreen
         recentProjects={recentProjects}
+        onNewProject={handleNewProject}
         onOpenProject={handleOpenProject}
         onSelectRecentProject={handleSelectRecentProject}
       />

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

@@ -5,27 +5,9 @@ import { EditableDetailTitle } from '@/components/EditableDetailTitle';
 import { EditableDetailDescription } from '@/components/EditableDetailDescription';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
-
-const typeLabels: Record<string, { icon: string; label: string }> = {
-  epic: { icon: '🎯', label: 'Epic' },
-  feature: { icon: '✨', label: 'Feature' },
-  chore: { icon: '🔧', label: 'Chore' },
-  bug: { icon: '🐛', label: 'Bug' },
-};
-
-const statusLabels: Record<string, { label: string; color: string }> = {
-  backlog: { label: 'Backlog', color: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' },
-  todo: { label: 'Todo', color: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' },
-  in_progress: { label: 'In Progress', color: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' },
-  done: { label: 'Done', color: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' },
-  cancelled: { label: 'Cancelled', color: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300' },
-};
-
-const modeLabels: Record<string, { label: string; color: string }> = {
-  speed: { label: 'Speed Mode', color: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200' },
-  stable: { label: 'Stable Mode', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' },
-  production: { label: 'Production Mode', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' },
-};
+import { TYPE_LABELS, STATUS_LABELS, MODE_LABELS_FULL } from '@/lib/constants';
+import { TypeIcon } from '@/components/TypeIcon';
+import { DetailReviewActions } from '@/components/DetailReviewActions';
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -49,15 +31,15 @@ export default async function WorkItemPage({ params }: PageProps) {
   const decisions = getDecisionsForWorkItem(workItemId);
   const parentItem = item.parent_id ? getWorkItem(item.parent_id) : null;
 
-  const typeInfo = typeLabels[item.type] || { icon: '📄', label: 'Item' };
-  const statusInfo = statusLabels[item.status] || statusLabels.backlog;
+  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 */}
       <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">
+        <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>
         </div>
@@ -66,9 +48,9 @@ export default async function WorkItemPage({ params }: PageProps) {
       <main className="max-w-4xl mx-auto px-4 py-6">
         {/* Breadcrumb */}
         {parentItem && (
-          <div className="mb-4 text-sm text-zinc-500">
-            <Link href={`/work/${parentItem.id}`} className="hover:underline">
-              {typeLabels[parentItem.type]?.icon} #{parentItem.id} {parentItem.title}
+          <div className="mb-6 text-base text-zinc-500">
+            <Link href={`/work/${parentItem.id}`} 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>
@@ -77,45 +59,47 @@ export default async function WorkItemPage({ params }: PageProps) {
         {/* 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 className="flex-1 min-w-0">
                 <WorkItemHeader
                   id={item.id}
                   title={item.title}
                   type={item.type}
-                  typeIcon={typeInfo.icon}
                   typeLabel={typeInfo.label}
                 />
                 <EditableDetailTitle title={item.title} itemId={item.id} />
               </div>
               <div className="flex items-center gap-2">
-                {item.mode && modeLabels[item.mode] && (
-                  <span className={`text-sm px-2 py-1 rounded ${modeLabels[item.mode].color}`}>
-                    {modeLabels[item.mode].label}
+                {item.mode && MODE_LABELS_FULL[item.mode] && (
+                  <span className={`text-base px-3 py-1.5 rounded ${MODE_LABELS_FULL[item.mode].color}`}>
+                    {MODE_LABELS_FULL[item.mode].label}
                   </span>
                 )}
-                <span className={`text-sm px-2 py-1 rounded ${statusInfo.color}`}>
+                <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-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">
+          <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} />
           </div>
 
           {/* Metadata */}
-          <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-3">
+          <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>
-            <dl className="grid grid-cols-2 gap-4 text-sm">
+            <dl className="grid grid-cols-2 gap-6 text-base">
               {item.branch_name && (
                 <div>
                   <dt className="text-zinc-500">Branch</dt>
@@ -147,18 +131,18 @@ export default async function WorkItemPage({ params }: PageProps) {
 
           {/* Decisions */}
           {decisions.length > 0 && (
-            <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-3">
+            <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>
-              <div className="space-y-4">
+              <div className="space-y-6">
                 {decisions.map((decision) => (
-                  <div key={decision.id} className="bg-zinc-50 dark:bg-zinc-800 rounded-lg p-4">
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                  <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-xs text-zinc-500">
+                      <span className="text-base text-zinc-500">
                         {new Date(decision.created_at).toLocaleDateString()}
                       </span>
                     </div>
@@ -166,7 +150,7 @@ export default async function WorkItemPage({ params }: PageProps) {
                       {decision.decision}
                     </p>
                     {decision.rationale && (
-                      <p className="text-sm text-zinc-500 mt-1">
+                      <p className="text-base text-zinc-500 mt-1.5">
                         {decision.rationale}
                       </p>
                     )}
@@ -178,8 +162,8 @@ export default async function WorkItemPage({ params }: PageProps) {
 
           {/* Children */}
           {children.length > 0 && (
-            <div className="px-6 py-4">
-              <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-3">
+            <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: [] }))} />

package/apps/dashboard/components/AppShell.tsx

@@ -1,15 +1,22 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
-import { ClaudeSessionProvider, useClaudeSession } from '../contexts/ClaudeSessionContext';
-import { ConnectionStatusProvider } from '../contexts/ConnectionStatusContext';
+import { useState, useEffect } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { ClaudeSessionProvider, useSessionState, useSessionActions } from '../contexts/ClaudeSessionContext';
+import { ConnectionStatusProvider, useConnectionStatus } from '../contexts/ConnectionStatusContext';
+import { UsageProvider } from '../contexts/UsageContext';
 import { ToastProvider } from './Toast';
 import { MainNav } from './MainNav';
 import { ClaudePanel } from './ClaudePanel';
+import { JettyLoader } from './JettyLoader';
+import { LazyMotion, domAnimation, m, AnimatePresence } from 'framer-motion';
 import type { ReactNode } from 'react';
 
 // Pages that should not show the nav header (pre-project screens)
-const NO_NAV_PATHS = ['/install-claude', '/welcome'];
+const NO_NAV_PATHS = ['/login', '/signup', '/subscribe', '/install-claude', '/connect-claude', '/welcome'];
+
+// Pages accessible without authentication
+const PUBLIC_PATHS = ['/login', '/signup', '/subscribe', '/install-claude', '/connect-claude', '/welcome', '/design-system'];
 
 interface AppShellProps {
   projectName: string;
@@ -18,74 +25,107 @@ interface AppShellProps {
 
 function AppShellContent({ projectName, children }: AppShellProps) {
   const pathname = usePathname();
+  const router = useRouter();
   const showNav = !NO_NAV_PATHS.includes(pathname);
+  const [authChecked, setAuthChecked] = useState(false);
+  const [minLoadingDone, setMinLoadingDone] = useState(false);
+  const { showDisconnected, status: connectionStatus } = useConnectionStatus();
+
+  // Ensure the loading screen shows for at least 3 seconds
+  useEffect(() => {
+    const timer = setTimeout(() => setMinLoadingDone(true), 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Auth enforcement gate: redirect unauthenticated users to /signup (first-time) or /login (returning)
+  useEffect(() => {
+    if (PUBLIC_PATHS.includes(pathname)) {
+      setAuthChecked(true);
+      return;
+    }
+
+    async function checkAuth() {
+      if (typeof window !== 'undefined' && window.electronAPI?.isElectron) {
+        try {
+          const status = await window.electronAPI.auth.getStatus();
+          if (!status.authenticated) {
+            const hasLoggedIn = await window.electronAPI.auth.hasLoggedInBefore?.();
+            router.push(hasLoggedIn ? '/login' : '/signup');
+            return;
+          }
+        } catch {
+          // Corrupted auth file, IPC error, etc. — treat as unauthenticated
+          router.push('/login');
+          return;
+        }
+      }
+      setAuthChecked(true);
+    }
+    checkAuth();
+  }, [pathname, router]);
 
-  const {
-    claudePanelOpen,
-    setClaudePanelOpen,
-    activeSessionId,
-    activeSession,
-    sessions,
-    standaloneSessions,
-    messages,
-    status,
-    error,
-    exitCode,
-    canRetry,
-    switchSession,
-    closeSession,
-    createNewSession,
-    sendMessage,
-    retry,
-    stop,
-    narratedMode,
-    toggleNarratedMode,
-  } = useClaudeSession();
+  const { claudePanelOpen } = useSessionState();
+  const { setClaudePanelOpen } = useSessionActions();
+
+  const showLoading = !authChecked || !minLoadingDone;
 
   return (
-    <div className="h-screen flex flex-col overflow-hidden">
+    <AnimatePresence mode="wait">
+      {showLoading ? (
+        <m.div
+          key="loader"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          className="h-screen flex items-center justify-center bg-background"
+        >
+          <JettyLoader size={80} />
+        </m.div>
+      ) : (
+    <m.div
+      key="content"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+      className="h-screen flex flex-col overflow-hidden">
       {showNav && <MainNav projectName={projectName} />}
-      <main className={`flex-1 flex flex-col min-h-0 overflow-y-auto transition-[margin] duration-300 ${showNav && claudePanelOpen ? 'mr-[480px]' : ''}`}>
+      {showNav && showDisconnected && (
+        <div className="bg-amber-50 dark:bg-amber-950 border-b border-amber-200 dark:border-amber-800 px-4 py-2 text-center text-base text-amber-800 dark:text-amber-200" data-testid="disconnect-banner">
+          {connectionStatus === 'reconnecting'
+            ? 'Reconnecting to live updates...'
+            : 'Live updates disconnected. Changes may not appear automatically.'}
+        </div>
+      )}
+      <main className={`flex-1 flex flex-col min-h-0 overflow-y-auto transition-[margin] duration-200 ease-out ${showNav && claudePanelOpen ? 'mr-[480px]' : ''}`}>
         {children}
       </main>
       {showNav && (
         <ClaudePanel
           isOpen={claudePanelOpen}
-          workItemId={activeSessionId || 'sessions'}
-          workItemTitle={activeSession?.title || 'Claude Sessions'}
-          messages={messages}
-          status={status}
-          error={error}
-          exitCode={exitCode}
-          canRetry={canRetry}
           onClose={() => setClaudePanelOpen(false)}
-          onRetry={retry}
-          onSendMessage={sendMessage}
-          onStop={stop}
-          sessions={sessions}
-          activeSessionId={activeSessionId}
-          onSwitchSession={switchSession}
-          standaloneSessions={standaloneSessions}
-          onNewSession={createNewSession}
-          onCloseSession={closeSession}
-          narratedMode={narratedMode}
-          onToggleNarratedMode={toggleNarratedMode}
         />
       )}
-    </div>
+    </m.div>
+      )}
+    </AnimatePresence>
   );
 }
 
 export function AppShell({ projectName, children }: AppShellProps) {
   return (
-    <ConnectionStatusProvider>
-      <ToastProvider>
-        <ClaudeSessionProvider>
-          <AppShellContent projectName={projectName}>
-            {children}
-          </AppShellContent>
-        </ClaudeSessionProvider>
-      </ToastProvider>
-    </ConnectionStatusProvider>
+    <LazyMotion features={domAnimation} strict>
+      <ConnectionStatusProvider>
+        <UsageProvider>
+          <ToastProvider>
+            <ClaudeSessionProvider>
+              <AppShellContent projectName={projectName}>
+                {children}
+              </AppShellContent>
+            </ClaudeSessionProvider>
+          </ToastProvider>
+        </UsageProvider>
+      </ConnectionStatusProvider>
+    </LazyMotion>
   );
 }

package/apps/dashboard/components/CardMenu.tsx

@@ -7,14 +7,19 @@ interface CardMenuProps {
   itemId: number;
   itemTitle?: string;
   itemType?: string;
+  itemDescription?: string | null;
+  conversational?: boolean;
   currentStatus: string;
   onStatusChange: (id: number, newStatus: string) => Promise<void>;
-  onTriggerClaude?: (id: number, title: string, type: string) => void;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
   hasActiveSession?: boolean;
   onOpenSession?: (id: string) => void;
+  usageAllowed?: boolean;
+  onEditName?: () => void;
+  onUnaccept?: () => void;
 }
 
-export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentStatus, onStatusChange, onTriggerClaude, hasActiveSession, onOpenSession }: CardMenuProps) {
+export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', itemDescription, conversational = false, currentStatus, onStatusChange, onTriggerClaude, hasActiveSession, onOpenSession, usageAllowed = true, onEditName, onUnaccept }: CardMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number } | null>(null);
@@ -74,7 +79,7 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentSt
       await onStatusChange(itemId, 'in_progress');
       // Trigger Claude panel after status change succeeds
       if (onTriggerClaude) {
-        onTriggerClaude(itemId, itemTitle, itemType);
+        onTriggerClaude(itemId, itemTitle, itemType, conversational, itemDescription);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to update status');
@@ -89,40 +94,68 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentSt
     }
   };
 
+  const handleEditName = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(false);
+    onEditName?.();
+  };
+
+  const handleUnaccept = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(false);
+    onUnaccept?.();
+  };
+
   const dropdownContent = (
     <div
       ref={dropdownRef}
-      className="fixed z-50 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 py-1 min-w-[140px]"
+      className="fixed z-50 bg-white dark:bg-zinc-800 rounded-lg shadow-lg py-1.5 min-w-[140px]"
       style={{
         top: dropdownPosition?.top ?? 0,
         left: dropdownPosition?.left ?? 0,
       }}
       data-testid="status-dropdown"
     >
+      {onEditName && (
+        <button
+          onClick={handleEditName}
+          className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
+          data-testid="edit-name-button"
+        >
+          <span className="text-zinc-500">✏️</span>
+          Edit name
+        </button>
+      )}
       {(currentStatus === 'backlog' || currentStatus === 'cancelled') && (
         <button
           onClick={handleStart}
-          className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+          disabled={!usageAllowed}
+          className={`w-full px-4 py-3 text-left text-base flex items-center gap-3 ${
+            usageAllowed
+              ? 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700'
+              : 'text-zinc-400 dark:text-zinc-600 cursor-not-allowed'
+          }`}
           data-testid="start-button"
+          title={!usageAllowed ? 'Weekly usage limit reached' : undefined}
         >
-          <span className="text-blue-500">▶</span>
+          <span className={usageAllowed ? 'text-[#819D9F]' : 'text-zinc-400 dark:text-zinc-600'}>▶</span>
           Start
         </button>
       )}
       {hasActiveSession && (
         <button
           onClick={handleOpenSession}
-          className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+          className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
           data-testid="open-session-button"
         >
-          <span className="text-blue-500">💬</span>
+          <span className="text-[#819D9F]">💬</span>
           Open session
         </button>
       )}
       {currentStatus !== 'done' && (
         <button
           onClick={(e) => handleAction(e, 'done')}
-          className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+          className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
           data-testid="mark-done-button"
         >
           <span className="text-green-500">✓</span>
@@ -132,17 +165,27 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentSt
       {(currentStatus === 'in_progress' || currentStatus === 'done') && (
         <button
           onClick={(e) => handleAction(e, 'backlog')}
-          className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+          className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
           data-testid="unstart-button"
         >
           <span className="text-amber-500">↩</span>
           Unstart
         </button>
       )}
+      {currentStatus === 'done' && onUnaccept && (
+        <button
+          onClick={handleUnaccept}
+          className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
+          data-testid="unaccept-button"
+        >
+          <span className="text-red-500">↩</span>
+          Unaccept
+        </button>
+      )}
       {currentStatus !== 'cancelled' && (
         <button
           onClick={(e) => handleAction(e, 'cancelled')}
-          className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+          className="w-full px-4 py-3 text-left text-base text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-3"
           data-testid="cancel-button"
         >
           <span className="text-red-500">✕</span>
@@ -157,7 +200,7 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentSt
       <button
         ref={buttonRef}
         onClick={handleMenuClick}
-        className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
+        className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors duration-200 ease-out"
         aria-label="Card menu"
         data-testid="menu-button"
       >
@@ -172,7 +215,7 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', currentSt
 
       {error && (
         <div
-          className="absolute right-0 top-full mt-1 z-10 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs px-2 py-1 rounded border border-red-200 dark:border-red-800"
+          className="absolute right-0 top-full mt-1 z-10 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs px-3 py-1.5 rounded border-2 border-red-200 dark:border-red-800"
           data-testid="error-message"
         >
           {error}