jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/LazyCard.tsx

@@ -0,0 +1,62 @@
+import { useRef, useState, useEffect, memo } from 'react';
+
+/**
+ * Finds the nearest scrollable ancestor for IntersectionObserver root.
+ */
+function getScrollParent(el: HTMLElement): HTMLElement | null {
+  let parent = el.parentElement;
+  while (parent) {
+    const { overflowY } = getComputedStyle(parent);
+    if (overflowY === 'auto' || overflowY === 'scroll') return parent;
+    parent = parent.parentElement;
+  }
+  return null;
+}
+
+interface LazyCardProps {
+  children: React.ReactNode;
+  /** Estimated card height used before first measurement */
+  estimatedHeight?: number;
+}
+
+/**
+ * Renders children only when visible in the scroll container.
+ * Offscreen cards are replaced with a height-matched placeholder,
+ * dramatically reducing DOM node count for large lists.
+ */
+export const LazyCard = memo(function LazyCard({
+  children,
+  estimatedHeight = 82,
+}: LazyCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const measuredHeight = useRef(estimatedHeight);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const root = getScrollParent(el);
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+        } else {
+          // Capture height before replacing children with placeholder
+          const h = el.offsetHeight;
+          if (h > 0) measuredHeight.current = h;
+          setVisible(false);
+        }
+      },
+      { root, rootMargin: '300px 0px' }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref} style={visible ? undefined : { height: measuredHeight.current }}>
+      {visible ? children : null}
+    </div>
+  );
+});

package/apps/dashboard/components/LazyMarkdown.tsx

@@ -0,0 +1,11 @@
+
+import ReactMarkdown, { type Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export default function LazyMarkdown({ children, components }: { children: string; components?: Components }) {
+  return (
+    <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+      {children}
+    </ReactMarkdown>
+  );
+}

package/apps/dashboard/components/MainNav.tsx

@@ -1,130 +1,95 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useClaudeSession } from '../contexts/ClaudeSessionContext';
-import { useConnectionStatus } from '../contexts/ConnectionStatusContext';
+import { useCallback } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import { ProjectSwitcher } from './ProjectSwitcher';
+import { prefetch } from '@/lib/data-bridge';
 
 interface MainNavProps {
   projectName: string;
 }
 
 export function MainNav({ projectName }: MainNavProps) {
-  const pathname = usePathname();
-  const { openSessionPanel } = useClaudeSession();
-  const { status: connectionStatus } = useConnectionStatus();
-
+  const { pathname } = useLocation();
   const isBacklogActive = pathname === '/';
   const isTestsActive = pathname === '/tests';
   const isPrototypesActive = pathname === '/prototypes';
   const isSettingsActive = pathname === '/settings';
 
+  // Prefetch page data on hover — by the time the click fires and the component
+  // mounts, data is already cached and ready.
+  const prefetchBacklog = useCallback(() => { prefetch.backlog(); }, []);
+  const prefetchTests = useCallback(() => { prefetch.tests(); }, []);
+  const prefetchPrototypes = useCallback(() => { prefetch.prototypes(); }, []);
+  const prefetchSettings = useCallback(() => { prefetch.settings(); }, []);
+
   return (
     <header className="sticky top-0 z-10 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 flex-shrink-0">
-      <div className="max-w-6xl mx-auto px-4 py-4">
+      <div className="px-5 py-5">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Image
-              src="/jettypod_wordmark.png"
+          <div className="flex items-center gap-4">
+            <img
+              src="/jettypod_logo.png"
               alt="JettyPod"
-              width={100}
-              height={24}
-              priority
+              width={36}
+              height={36}
+              className="rounded-full"
             />
             <ProjectSwitcher projectName={projectName} />
             {isBacklogActive ? (
-              <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              <span className="px-3 py-1.5 text-base text-zinc-900 dark:text-zinc-100 font-medium">
                 Backlog
               </span>
             ) : (
               <Link
-                href="/"
-                className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                to="/"
+                viewTransition
+                onMouseEnter={prefetchBacklog}
+                className="px-3 py-1.5 text-base text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-200 ease-out"
               >
                 Backlog
               </Link>
             )}
             {isTestsActive ? (
-              <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              <span className="px-3 py-1.5 text-base text-zinc-900 dark:text-zinc-100 font-medium">
                 Tests
               </span>
             ) : (
               <Link
-                href="/tests"
-                className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                to="/tests"
+                viewTransition
+                onMouseEnter={prefetchTests}
+                className="px-3 py-1.5 text-base text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-200 ease-out"
               >
                 Tests
               </Link>
             )}
             {isPrototypesActive ? (
-              <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              <span className="px-3 py-1.5 text-base text-zinc-900 dark:text-zinc-100 font-medium">
                 Prototypes
               </span>
             ) : (
               <Link
-                href="/prototypes"
-                className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                to="/prototypes"
+                viewTransition
+                onMouseEnter={prefetchPrototypes}
+                className="px-3 py-1.5 text-base text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-200 ease-out"
               >
                 Prototypes
               </Link>
             )}
             {isSettingsActive ? (
-              <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              <span className="px-3 py-1.5 text-base text-zinc-900 dark:text-zinc-100 font-medium">
                 Settings
               </span>
             ) : (
               <Link
-                href="/settings"
-                className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                to="/settings"
+                viewTransition
+                onMouseEnter={prefetchSettings}
+                className="px-3 py-1.5 text-base text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-200 ease-out"
               >
                 Settings
               </Link>
             )}
-            {/* Connection Status Indicator */}
-            <div className="flex items-center gap-2" data-testid="connection-status">
-              <span
-                className={`w-2 h-2 rounded-full ${
-                  connectionStatus === 'connected'
-                    ? 'bg-green-500'
-                    : connectionStatus === 'reconnecting'
-                    ? 'bg-yellow-500 animate-pulse'
-                    : 'bg-red-500'
-                }`}
-              />
-              <span className="text-xs text-zinc-500 dark:text-zinc-400">
-                {connectionStatus === 'connected'
-                  ? 'Live updates active'
-                  : connectionStatus === 'reconnecting'
-                  ? 'Reconnecting...'
-                  : 'Disconnected'}
-              </span>
-            </div>
-          </div>
-          <div className="flex items-center">
-            <button
-              onClick={openSessionPanel}
-              className="px-4 py-2 text-xs font-medium rounded-xl transition-all duration-200 hover:-translate-y-1 hover:scale-[1.01] active:translate-y-0 active:scale-100"
-              style={{
-                cursor: 'pointer',
-                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)
-                `,
-              }}
-              data-testid="nav-claude-sessions-button"
-            >
-              Claude Sessions
-            </button>
           </div>
         </div>
       </div>