jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/AppShell.tsx

@@ -1,95 +1,106 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
+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 { JettyLoader } from './JettyLoader';
-import { LazyMotion, domAnimation, m, AnimatePresence } from 'framer-motion';
+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', '/signup', '/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', '/signup', '/subscribe', '/install-claude', '/connect-claude', '/welcome', '/design-system'];
+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 [minLoadingDone, setMinLoadingDone] = useState(false);
+  const isPublicPath = PUBLIC_PATHS.includes(pathname);
   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)
+  // 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) {
-            const hasLoggedIn = await window.electronAPI.auth.hasLoggedInBefore?.();
-            router.push(hasLoggedIn ? '/login' : '/signup');
+            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 } = useSessionState();
-  const { setClaudePanelOpen } = useSessionActions();
+  const { setClaudePanelOpen, openSessionPanel } = useSessionActions();
 
-  const showLoading = !authChecked || !minLoadingDone;
+  // 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 (
-    <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} />}
+    <div className="h-screen flex flex-col overflow-hidden">
+      {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'
@@ -97,7 +108,7 @@ function AppShellContent({ projectName, children }: AppShellProps) {
             : '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]' : ''}`}>
+      <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 && (
@@ -106,13 +117,11 @@ function AppShellContent({ projectName, children }: AppShellProps) {
           onClose={() => setClaudePanelOpen(false)}
         />
       )}
-    </m.div>
-      )}
-    </AnimatePresence>
+    </div>
   );
 }
 
-export function AppShell({ projectName, children }: AppShellProps) {
+export function AppShell({ projectName = 'JettyPod', children }: AppShellProps) {
   return (
     <LazyMotion features={domAnimation} strict>
       <ConnectionStatusProvider>

package/apps/dashboard/components/CardMenu.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';