jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/AppShell.tsx

@@ -1,133 +1,140 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
-import { ClaudeSessionProvider, useClaudeSession } from '../contexts/ClaudeSessionContext';
-import { ConnectionStatusProvider } from '../contexts/ConnectionStatusContext';
+import { useEffect, useRef, useLayoutEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+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 { LazyMotion, domAnimation, m } from 'framer-motion';
+import { isTauri, auth } from '@/lib/tauri-bridge';
 import type { ReactNode } from 'react';
 
+// Module-level auth cache — auth status doesn't change within a session.
+// Prevents redundant IPC calls if AppShell ever remounts.
+let cachedAuthOk: boolean | null = null;
+
 // Pages that should not show the nav header (pre-project screens)
-const NO_NAV_PATHS = ['/login', '/subscribe', '/install-claude', '/connect-claude', '/welcome'];
+const NO_NAV_PATHS = ['/login', '/signup', '/subscribe', '/install-claude', '/connect-claude', '/welcome', '/prototypes/onboarding'];
 
 // Pages accessible without authentication
-const PUBLIC_PATHS = ['/login', '/subscribe', '/install-claude', '/connect-claude', '/welcome'];
+const PUBLIC_PATHS = ['/login', '/signup', '/subscribe', '/install-claude', '/connect-claude', '/welcome', '/design-system', '/prototypes/onboarding'];
 
 interface AppShellProps {
-  projectName: string;
+  projectName?: string;
   children: ReactNode;
 }
 
-function AppShellContent({ projectName, children }: AppShellProps) {
-  const pathname = usePathname();
-  const router = useRouter();
+function AppShellContent({ projectName = 'JettyPod', children }: AppShellProps) {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
   const showNav = !NO_NAV_PATHS.includes(pathname);
-  const [authChecked, setAuthChecked] = useState(false);
+  const isPublicPath = PUBLIC_PATHS.includes(pathname);
+  const { showDisconnected, status: connectionStatus } = useConnectionStatus();
 
-  // Auth enforcement gate: redirect unauthenticated users to /login
+  // Optimistic auth: render content immediately, check auth in the background.
+  // Redirects to login only if the async check fails — authenticated users
+  // (the common case) never see a loader or blank screen.
   useEffect(() => {
-    if (PUBLIC_PATHS.includes(pathname)) {
-      setAuthChecked(true);
-      return;
-    }
+    if (isPublicPath || cachedAuthOk) return;
 
     async function checkAuth() {
-      if (typeof window !== 'undefined' && window.electronAPI?.isElectron) {
+      if (isTauri()) {
         try {
-          const status = await window.electronAPI.auth.getStatus();
+          const status = await auth.getStatus();
           if (!status.authenticated) {
-            router.push('/login');
+            const hasLoggedIn = await auth.hasLoggedInBefore();
+            navigate(hasLoggedIn ? '/login' : '/signup', { replace: true });
             return;
           }
+          cachedAuthOk = true;
         } catch {
-          // Corrupted auth file, IPC error, etc. — treat as unauthenticated
-          router.push('/login');
-          return;
+          navigate('/login', { replace: true });
         }
       }
-      setAuthChecked(true);
     }
     checkAuth();
-  }, [pathname, router]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  const {
-    claudePanelOpen,
-    setClaudePanelOpen,
-    activeSessionId,
-    activeSession,
-    sessions,
-    standaloneSessions,
-    messages,
-    status,
-    error,
-    exitCode,
-    canRetry,
-    queuedMessage,
-    switchSession,
-    closeSession,
-    createNewSession,
-    sendMessage,
-    retry,
-    stop,
-    narratedMode,
-    toggleNarratedMode,
-  } = useClaudeSession();
+  const { claudePanelOpen } = useSessionState();
+  const { setClaudePanelOpen, openSessionPanel } = useSessionActions();
 
-  // Don't render anything until auth check completes (prevents content flash)
-  if (!authChecked) {
-    return <div className="h-screen" />;
-  }
+  // Single source of truth for available content height.
+  // Sets --main-h CSS custom property on <main> so any descendant can use it
+  // without nested ResizeObservers or fragile flex-1 chains (which break in WKWebView).
+  const mainRef = useRef<HTMLElement>(null);
+  useLayoutEffect(() => {
+    const el = mainRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      el.style.setProperty('--main-h', `${entry.contentRect.height}px`);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
 
   return (
     <div 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 && (
+        <div className="relative flex-shrink-0">
+          <MainNav projectName={projectName} />
+          <m.button
+            onClick={() => claudePanelOpen ? setClaudePanelOpen(false) : openSessionPanel()}
+            className="absolute px-3 py-1.5 text-sm font-medium text-white hover:brightness-105 active:scale-[0.98] cursor-pointer"
+            animate={{ right: claudePanelOpen ? 480 : 0 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+            style={{
+              zIndex: 51,
+              top: '50%',
+              transform: 'translateY(-50%)',
+              backgroundColor: '#819D9F',
+              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(129, 157, 159, 0.2)',
+              borderRadius: '12px 0 0 12px',
+              textAlign: 'center' as const,
+              lineHeight: 1.3,
+            }}
+            aria-label={claudePanelOpen ? 'Hide Claudes panel' : 'Show Claudes panel'}
+            data-testid="claudes-toggle-tab"
+          >
+            {claudePanelOpen ? <><span>Hide</span><br /><span>Claudes</span></> : <><span>Show</span><br /><span>Claudes</span></>}
+          </m.button>
+        </div>
+      )}
+      {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 ref={mainRef} className={`flex-1 flex flex-col min-h-0 overflow-hidden 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}
-          queuedMessage={queuedMessage}
           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>
   );
 }
 
-export function AppShell({ projectName, children }: AppShellProps) {
+export function AppShell({ projectName = 'JettyPod', children }: AppShellProps) {
   return (
-    <ConnectionStatusProvider>
-      <UsageProvider>
-        <ToastProvider>
-          <ClaudeSessionProvider>
-            <AppShellContent projectName={projectName}>
-              {children}
-            </AppShellContent>
-          </ClaudeSessionProvider>
-        </ToastProvider>
-      </UsageProvider>
-    </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

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
@@ -15,9 +14,11 @@ interface CardMenuProps {
   hasActiveSession?: boolean;
   onOpenSession?: (id: string) => void;
   usageAllowed?: boolean;
+  onEditName?: () => void;
+  onUnaccept?: () => void;
 }
 
-export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', itemDescription, conversational = false, currentStatus, onStatusChange, onTriggerClaude, hasActiveSession, onOpenSession, usageAllowed = true }: 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);
@@ -92,21 +93,43 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', itemDescr
     }
   };
 
+  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}
           disabled={!usageAllowed}
-          className={`w-full px-3 py-2 text-left text-sm flex items-center gap-2 ${
+          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'
@@ -114,24 +137,24 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', itemDescr
           data-testid="start-button"
           title={!usageAllowed ? 'Weekly usage limit reached' : undefined}
         >
-          <span className={usageAllowed ? 'text-blue-500' : 'text-zinc-400 dark:text-zinc-600'}>▶</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>
@@ -141,17 +164,27 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', itemDescr
       {(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>
@@ -166,7 +199,7 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', itemDescr
       <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"
       >
@@ -181,7 +214,7 @@ export function CardMenu({ itemId, itemTitle = '', itemType = 'chore', itemDescr
 
       {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}