jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/MainNav.tsx

@@ -1,36 +1,36 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useSessionActions } from '../contexts/ClaudeSessionContext';
+import { useCallback } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import { ProjectSwitcher } from './ProjectSwitcher';
-import { Button } from '@/components/ui/Button';
+import { prefetch } from '@/lib/data-bridge';
 
 interface MainNavProps {
   projectName: string;
 }
 
 export function MainNav({ projectName }: MainNavProps) {
-  const pathname = usePathname();
-  const { openSessionPanel } = useSessionActions();
-
+  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="px-5 py-5">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <Image
+            <img
               src="/jettypod_logo.png"
               alt="JettyPod"
               width={36}
               height={36}
-              priority
               className="rounded-full"
             />
             <ProjectSwitcher projectName={projectName} />
@@ -40,7 +40,9 @@ export function MainNav({ projectName }: MainNavProps) {
               </span>
             ) : (
               <Link
-                href="/"
+                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
@@ -52,7 +54,9 @@ export function MainNav({ projectName }: MainNavProps) {
               </span>
             ) : (
               <Link
-                href="/tests"
+                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
@@ -64,7 +68,9 @@ export function MainNav({ projectName }: MainNavProps) {
               </span>
             ) : (
               <Link
-                href="/prototypes"
+                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
@@ -76,22 +82,15 @@ export function MainNav({ projectName }: MainNavProps) {
               </span>
             ) : (
               <Link
-                href="/settings"
+                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>
             )}
           </div>
-          <div className="flex items-center">
-            <Button
-              onClick={openSessionPanel}
-              size="sm"
-              data-testid="nav-claude-sessions-button"
-            >
-              Claude Sessions
-            </Button>
-          </div>
         </div>
       </div>
     </header>

package/apps/dashboard/components/MessageBlock.tsx

@@ -1,11 +1,10 @@
-'use client';
-
 import { useState, memo } from 'react';
-import dynamic from 'next/dynamic';
+import { lazy, Suspense } from 'react';
 import type { ClaudeMessage, StreamStatus } from '../lib/session-stream-manager';
 import { Button } from '@/components/ui/Button';
+import { claudeCode } from '@/lib/tauri-bridge';
 
-const LazyMarkdown = dynamic(() => import('./LazyMarkdown'), { ssr: false });
+const LazyMarkdown = lazy(() => import('./LazyMarkdown'));
 
 // Tool name → human-friendly verb mapping for activity indicator
 export const TOOL_VERBS: Record<string, string> = {
@@ -168,8 +167,10 @@ const NOISE_PATTERNS = [
     '[/GATE]',
 ];
 
-// Filter for system noise - returns true if content should be HIDDEN
-// Focus on truly internal/system content, NOT Claude's explanatory messages
+// Filter for system noise - returns true if content should be HIDDEN.
+// Used for standalone messages (assistant text, unpaired tool_results).
+// NOT used inside MergedToolBlock — merged blocks show raw tool output
+// (file reads, grep results, etc.) which would otherwise be filtered here.
 export function isSystemNoise(content: string | undefined): boolean {
   if (!content) return true;
 
@@ -240,16 +241,11 @@ function UpdateClaudeButton() {
   const [updateResult, setUpdateResult] = useState<{ success: boolean; error?: string } | null>(null);
 
   const handleUpdate = async () => {
-    if (!window.electronAPI?.claudeCode?.update) {
-      setUpdateResult({ success: false, error: 'Update is only available in the desktop app.' });
-      return;
-    }
-
     setIsUpdating(true);
     setUpdateResult(null);
 
     try {
-      const result = await window.electronAPI.claudeCode.update();
+      const result = await claudeCode.update();
       setUpdateResult(result);
       if (result.success) {
         // Reload after successful update
@@ -325,6 +321,8 @@ export const MessageBlock = memo(function MessageBlock({ message }: { message: C
   }
 
   if (message.type === 'tool_use') {
+    // In detail mode, tool_use is rendered via MergedToolBlock from ClaudePanel.
+    // This fallback renders in summary/raw modes or when not paired.
     const firstParamValue = message.tool_input ? Object.values(message.tool_input)[0] : null;
     const displayValue = typeof firstParamValue === 'string'
       ? (firstParamValue.length > 50 ? firstParamValue.slice(0, 50) + '...' : firstParamValue)
@@ -332,17 +330,19 @@ export const MessageBlock = memo(function MessageBlock({ message }: { message: C
 
     return (
       <div className="flex items-center gap-3 py-1.5" data-testid="tool-call">
-        <span className="bg-purple-100 text-purple-700 px-3 py-1 rounded text-xs">{message.tool_name}</span>
-        {displayValue && <span className="text-xs text-purple-500 truncate">{displayValue}</span>}
+        <span className="bg-zinc-200 text-zinc-700 px-3 py-1 rounded text-xs">{message.tool_name}</span>
+        {displayValue && <span className="text-xs text-zinc-500 truncate">{displayValue}</span>}
       </div>
     );
   }
 
-  // Show tool_result messages in collapsible format
+  // Standalone tool_result fallback (unpaired results not consumed by MergedToolBlock).
+  // Noise filtering applies here — line-numbered file reads, grep output, etc. get hidden
+  // because there's no tool_use header to give them context. In detail mode, these are
+  // paired into MergedToolBlock which shows them with the tool name for context.
   if (message.type === 'tool_result') {
     const result = message.result || '';
 
-    // Apply same noise filtering as assistant/text messages
     if (isSystemNoise(result)) {
       return null;
     }
@@ -389,3 +389,80 @@ export const MessageBlock = memo(function MessageBlock({ message }: { message: C
 
   return null;
 });
+
+// Number of lines to show in collapsed tool block preview
+const PREVIEW_LINES = 4;
+
+// Merged tool block: combines tool_use + tool_result into a single expandable block.
+// Claude Code-style: bold tool name, param in parens, 4-line preview, click to expand.
+// Intentionally does NOT apply isSystemNoise — tool output (file content, grep results)
+// is legitimate content here because it's shown with the tool name header for context.
+export const MergedToolBlock = memo(function MergedToolBlock({
+  toolMessage,
+  resultMessage,
+}: {
+  toolMessage: ClaudeMessage;
+  resultMessage?: ClaudeMessage;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  const toolName = toolMessage.tool_name || 'Tool';
+  const firstParamValue = toolMessage.tool_input ? Object.values(toolMessage.tool_input)[0] : null;
+  const displayValue = typeof firstParamValue === 'string'
+    ? (firstParamValue.length > 60 ? firstParamValue.slice(0, 60) + '...' : firstParamValue)
+    : null;
+
+  const rawResult = resultMessage?.result || '';
+  const result = deduplicateToolOutput(unescapeContent(rawResult));
+  const lines = result.split('\n');
+  const hasMoreLines = lines.length > PREVIEW_LINES;
+  const previewLines = lines.slice(0, PREVIEW_LINES).join('\n');
+  const remaining = lines.length - PREVIEW_LINES;
+
+  return (
+    <div className="bg-zinc-100 rounded-xl text-sm" data-testid="merged-tool-block">
+      <div
+        className="flex items-center gap-2.5 px-3.5 py-2.5 cursor-pointer select-none transition-[background-color] duration-200 ease-out hover:bg-zinc-200 rounded-t-xl"
+        onClick={() => setExpanded(prev => !prev)}
+        data-testid="tool-block-header"
+      >
+        <svg
+          className={`w-3 h-3 text-zinc-400 flex-shrink-0 transition-transform duration-200 ease-out ${expanded ? 'rotate-90' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+        <span className="font-semibold text-zinc-900 text-sm">{toolName}</span>
+        {displayValue && (
+          <span className="text-zinc-500 text-sm truncate flex-1 min-w-0">({displayValue})</span>
+        )}
+      </div>
+      {result && (
+        <>
+          {expanded ? (
+            <div className="px-3.5 pb-3 pt-0 pl-9">
+              <pre className="text-zinc-600 text-xs font-mono whitespace-pre-wrap break-words overflow-x-auto max-h-[400px] overflow-y-auto leading-relaxed">
+                {result}
+              </pre>
+            </div>
+          ) : hasMoreLines ? (
+            <div className="px-3.5 pb-3 pt-0 pl-9">
+              <pre className="text-zinc-500 text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">
+                {previewLines}
+              </pre>
+              <span className="text-zinc-400 text-xs italic">... {remaining} more line{remaining !== 1 ? 's' : ''}</span>
+            </div>
+          ) : (
+            <div className="px-3.5 pb-3 pt-0 pl-9">
+              <pre className="text-zinc-500 text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">
+                {result}
+              </pre>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});

package/apps/dashboard/components/ModeStartCard.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { m, useReducedMotion } from 'framer-motion';
 import { useState, useRef } from 'react';

package/apps/dashboard/components/OnboardingWelcome.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState, useCallback } from 'react';
 import { m, AnimatePresence, useReducedMotion } from 'framer-motion';

package/apps/dashboard/components/PlaceholderCard.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { m } from 'framer-motion';
 

package/apps/dashboard/components/ProjectSwitcher.tsx

@@ -1,8 +1,8 @@
-'use client';
 
 import { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import type { RecentProject } from '@/lib/db-bridge';
+import { isTauri, project } from '@/lib/tauri-bridge';
+import type { RecentProject } from '@/lib/tauri-bridge';
 
 interface ProjectSwitcherProps {
   projectName: string;
@@ -13,21 +13,21 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
   const [recentProjects, setRecentProjects] = useState<RecentProject[]>([]);
   const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number } | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [isElectron, setIsElectron] = useState(false);
+  const [isTauriApp, setIsTauriApp] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Detect Electron after mount to avoid hydration mismatch
+  // Detect Tauri after mount to avoid hydration mismatch
   useEffect(() => {
-    setIsElectron(!!window.electronAPI?.isElectron);
+    setIsTauriApp(isTauri());
   }, []);
 
   // Load recent projects when dropdown opens
   useEffect(() => {
-    if (isOpen && isElectron) {
-      window.electronAPI!.project.getRecent().then(setRecentProjects);
+    if (isOpen && isTauriApp) {
+      project.getRecent().then(setRecentProjects);
     }
-  }, [isOpen, isElectron]);
+  }, [isOpen, isTauriApp]);
 
   // Calculate dropdown position when opening
   useEffect(() => {
@@ -57,18 +57,18 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     }
   }, [isOpen]);
 
-  const handleProjectClick = async (project: RecentProject) => {
+  const handleProjectClick = async (p: RecentProject) => {
     setError(null);
     setIsOpen(false);
     try {
-      const result = await window.electronAPI!.project.openRecent(project.path);
+      const result = await project.openRecent(p.path);
       if (result.success) {
         window.location.reload();
       } else {
-        setError(`Failed to switch to "${project.name}". The project may no longer exist.`);
+        setError(`Failed to switch to "${p.name}". The project may no longer exist.`);
       }
     } catch {
-      setError(`Failed to switch to "${project.name}". The project may no longer exist.`);
+      setError(`Failed to switch to "${p.name}". The project may no longer exist.`);
     }
   };
 
@@ -76,7 +76,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     setError(null);
     setIsOpen(false);
     try {
-      const result = await window.electronAPI!.project.newProject();
+      const result = await project.newProject();
       if (result.success) {
         window.location.reload();
       }
@@ -89,7 +89,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     setError(null);
     setIsOpen(false);
     try {
-      const result = await window.electronAPI!.project.openDialog();
+      const result = await project.openDialog();
       if (result.success) {
         window.location.reload();
       }
@@ -99,8 +99,8 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     }
   };
 
-  // Non-Electron: render static pill (no switching possible)
-  if (!isElectron) {
+  // Non-Tauri: render static pill (no switching possible)
+  if (!isTauriApp) {
     return (
       <span className="px-5 py-1.5 text-base bg-zinc-100 text-zinc-600 rounded-full border-2 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700">
         {projectName}
@@ -130,14 +130,14 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
       {recentProjects
         .filter(p => p.name !== projectName)
         .slice(0, 4)
-        .map((project) => (
+        .map((p) => (
           <button
-            key={project.path}
-            onClick={() => handleProjectClick(project)}
+            key={p.path}
+            onClick={() => handleProjectClick(p)}
             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"
           >
             <span className="w-1.5 h-1.5 flex-shrink-0" />
-            <span className="truncate">{project.name}</span>
+            <span className="truncate">{p.name}</span>
           </button>
         ))}
 

package/apps/dashboard/components/PrototypeTimeline.tsx

@@ -1,7 +1,8 @@
-'use client';
 
 import { useState, useEffect } from 'react';
-import type { PrototypeDashboardData, Prototype } from '@/lib/prototypes';
+import type { PrototypeDashboardData, Prototype } from '@/lib/db';
+import { shell } from '@/lib/tauri-bridge';
+import { invoke } from '@/lib/tauri';
 
 interface PrototypeCardProps {
   prototype: Prototype;
@@ -89,15 +90,6 @@ function MonthGroup({ month, prototypes, selectedId, onSelect, compact }: MonthG
   );
 }
 
-// Convert absolute file path to API URL
-// e.g., /Users/.../prototypes/feature-123/file.html -> /api/prototypes/feature-123/file.html
-function filePathToApiUrl(filePath: string): string {
-  const prototypesIndex = filePath.indexOf('/prototypes/');
-  if (prototypesIndex === -1) return filePath;
-  const relativePath = filePath.slice(prototypesIndex + '/prototypes/'.length);
-  return `/api/prototypes/${relativePath}`;
-}
-
 interface PreviewPanelProps {
   prototype: Prototype;
   onClose: () => void;
@@ -107,20 +99,31 @@ function PreviewPanel({ prototype, onClose }: PreviewPanelProps) {
   // Find first previewable file (HTML preferred)
   const getDefaultFile = () => prototype.files.find(f => f.type === 'html') || prototype.files[0];
   const [selectedFile, setSelectedFile] = useState(getDefaultFile);
+  const [fileContent, setFileContent] = useState<string | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   // Reset selected file when prototype changes
   useEffect(() => {
     setSelectedFile(getDefaultFile());
   }, [prototype.id]);
 
+  // Load file content via Tauri IPC
+  useEffect(() => {
+    if (!selectedFile) return;
+    setFileContent(null);
+    setLoadError(null);
+    invoke<string>('read_prototype_file', { path: selectedFile.path })
+      .then(setFileContent)
+      .catch((err) => setLoadError(String(err)));
+  }, [selectedFile?.path]);
+
   // Check if file is previewable in iframe
   const previewableTypes = ['html', 'htm', 'txt', 'md', 'json', 'js', 'ts', 'css'];
   const isPreviewable = selectedFile && previewableTypes.includes(selectedFile.type);
-  const previewUrl = selectedFile ? filePathToApiUrl(selectedFile.path) : null;
 
   const handleOpen = () => {
-    if (window.electronAPI?.shell?.openPath && selectedFile) {
-      window.electronAPI.shell.openPath(selectedFile.path);
+    if (selectedFile) {
+      shell.openPath(selectedFile.path);
     }
   };
 
@@ -173,19 +176,37 @@ function PreviewPanel({ prototype, onClose }: PreviewPanelProps) {
 
       {/* Preview content - 75% zoom using transform scale */}
       <div className="flex-1 overflow-hidden">
-        {previewUrl && isPreviewable ? (
+        {loadError ? (
+          <div className="flex items-center justify-center h-full text-red-500">
+            <div className="text-center">
+              <p className="mb-3">Failed to load preview</p>
+              <p className="text-base">{loadError}</p>
+            </div>
+          </div>
+        ) : fileContent && isPreviewable ? (
           <div className="w-full h-full overflow-hidden">
-            <iframe
-              key={previewUrl}
-              src={previewUrl}
-              className="border-0 bg-white origin-top-left"
-              style={{
-                width: '133.33%',
-                height: '133.33%',
-                transform: 'scale(0.75)',
-              }}
-              title={`Preview: ${selectedFile?.name}`}
-            />
+            {selectedFile && ['html', 'htm'].includes(selectedFile.type) ? (
+              <iframe
+                key={selectedFile.path}
+                srcDoc={fileContent}
+                className="border-0 bg-white origin-top-left"
+                style={{
+                  width: '133.33%',
+                  height: '133.33%',
+                  transform: 'scale(0.75)',
+                }}
+                sandbox="allow-scripts allow-same-origin"
+                title={`Preview: ${selectedFile.name}`}
+              />
+            ) : (
+              <pre className="p-6 text-sm font-mono text-zinc-700 overflow-auto h-full whitespace-pre-wrap">
+                {fileContent}
+              </pre>
+            )}
+          </div>
+        ) : fileContent === null && !loadError ? (
+          <div className="flex items-center justify-center h-full text-zinc-400">
+            Loading...
           </div>
         ) : (
           <div className="flex items-center justify-center h-full text-zinc-500">