jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/TipCard.tsx

@@ -1,8 +1,8 @@
-'use client';
-
 import { useState, useEffect } from 'react';
-import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
-import ReactMarkdown from 'react-markdown';
+import { m, AnimatePresence, useReducedMotion } from 'framer-motion';
+import { lazy, Suspense } from 'react';
+
+const LazyMarkdown = lazy(() => import('./LazyMarkdown'));
 
 const STORAGE_KEY = 'jettypod-dismissed-tips';
 
@@ -27,8 +27,7 @@ function dismissTip(tipId: string): void {
   }
 }
 
-// Multi-layer shadow matching kanban card system
-const CARD_SHADOW = '0 1px 2px rgba(0,0,0,0.02)';
+import { shadow } from '@/lib/shadows';
 
 interface TipCardProps {
   tipId: string;
@@ -56,7 +55,7 @@ export function TipCard({ tipId, icon, title, body, onDismiss }: TipCardProps) {
   return (
     <AnimatePresence>
       {!dismissed && (
-        <motion.div
+        <m.div
           data-testid={`tip-card-${tipId}`}
           initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 8 }}
           animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
@@ -67,14 +66,14 @@ export function TipCard({ tipId, icon, title, body, onDismiss }: TipCardProps) {
           transition={{ duration: prefersReducedMotion ? 0.15 : 0.35, ease: [0.22, 1, 0.36, 1] }}
           style={{
             background: 'linear-gradient(135deg, #f0fdfa 0%, #f0fdfb 100%)',
-            border: '1px solid #ccfbf1',
+            border: '2px solid #ccfbf1',
             borderRadius: 12,
             padding: 14,
-            boxShadow: CARD_SHADOW,
+            boxShadow: shadow.sm,
           }}
         >
           {/* Header: icon + label/title */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
             <div
               style={{
                 width: 34,
@@ -122,34 +121,34 @@ export function TipCard({ tipId, icon, title, body, onDismiss }: TipCardProps) {
               fontSize: 13,
               lineHeight: 1.55,
               color: '#52525b',
-              marginLeft: 44,
+              marginLeft: 50,
             }}
           >
             {typeof body === 'string' ? (
-              <ReactMarkdown
+              <LazyMarkdown
                 components={{
                   p: ({ children }) => <p style={{ margin: '0 0 8px 0' }}>{children}</p>,
                   strong: ({ children }) => <strong style={{ fontWeight: 600, color: '#3f3f46' }}>{children}</strong>,
                 }}
               >
                 {body.replace(/\n/g, '  \n')}
-              </ReactMarkdown>
+              </LazyMarkdown>
             ) : body}
           </div>
 
           {/* Footer: Got it button */}
-          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10 }}>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
             <button
               onClick={handleDismiss}
               data-testid={`tip-dismiss-${tipId}`}
               style={{
                 background: 'transparent',
-                border: '1px solid #99f6e4',
+                border: '2px solid #99f6e4',
                 fontSize: 12,
                 fontWeight: 600,
                 color: '#0d9488',
                 cursor: 'pointer',
-                padding: '5px 14px',
+                padding: '6px 16px',
                 borderRadius: 8,
                 transition: 'background 0.15s, border-color 0.15s',
               }}
@@ -165,7 +164,7 @@ export function TipCard({ tipId, icon, title, body, onDismiss }: TipCardProps) {
               Got it
             </button>
           </div>
-        </motion.div>
+        </m.div>
       )}
     </AnimatePresence>
   );

package/apps/dashboard/components/Toast.tsx

@@ -1,7 +1,6 @@
-'use client';
 
 import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, m } from 'framer-motion';
 
 interface Toast {
   id: string;
@@ -52,16 +51,16 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
 function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
   return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2" data-testid="toast-container">
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-3" data-testid="toast-container">
       <AnimatePresence mode="popLayout">
         {toasts.map(toast => (
-          <motion.div
+          <m.div
             key={toast.id}
             initial={{ opacity: 0, y: 20, scale: 0.95 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: -10, scale: 0.95 }}
             transition={{ duration: 0.2 }}
-            className={`px-4 py-2 rounded-lg shadow-lg text-sm font-medium cursor-pointer ${
+            className={`px-5 py-3 rounded-lg shadow-lg text-base font-medium cursor-pointer ${
               toast.type === 'success'
                 ? 'bg-green-600 text-white'
                 : toast.type === 'error'
@@ -72,7 +71,7 @@ function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id
             data-testid="toast"
           >
             {toast.message}
-          </motion.div>
+          </m.div>
         ))}
       </AnimatePresence>
     </div>

package/apps/dashboard/components/TypeIcon.tsx

@@ -0,0 +1,55 @@
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { TYPE_ICONS } from '@/lib/constants';
+import { shadow } from '@/lib/shadows';
+
+const TYPE_ICON_SRCS: Record<string, { src: string; label: string }> = {
+  bug: { src: '/bug-icon.png', label: 'Bug' },
+  chore: { src: '/wrench-icon.png', label: 'Chore' },
+  epic: { src: '/buoy-icon.png', label: 'Epic' },
+  feature: { src: '/star-icon.png', label: 'Feature' },
+};
+
+export function TypeIcon({ type, className }: { type: string; className?: string }) {
+  const svg = TYPE_ICON_SRCS[type];
+  const [tooltip, setTooltip] = useState<{ x: number; y: number } | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+    setPortalRoot(document.getElementById('tooltip-root'));
+  }, []);
+
+  const showTooltip = useCallback(() => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      setTooltip({ x: rect.left + rect.width / 2, y: rect.bottom + 4 });
+    }
+  }, []);
+
+  const hideTooltip = useCallback(() => setTooltip(null), []);
+
+  if (svg) {
+    return (
+      <span ref={ref} className="inline-flex" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
+        <img src={svg.src} alt="" className={`object-contain ${className || "w-6 h-6"}`} />
+        {mounted && tooltip && portalRoot && createPortal(
+          <span
+            className="pointer-events-none fixed"
+            style={{ left: tooltip.x, top: tooltip.y, transform: 'translateX(-50%)' }}
+          >
+            <span className="block rounded-lg bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs px-2 py-1 whitespace-nowrap" style={{ boxShadow: shadow.sm }}>
+              {svg.label}
+            </span>
+          </span>,
+          portalRoot
+        )}
+      </span>
+    );
+  }
+  return <>{TYPE_ICONS[type] || '📄'}</>;
+}

package/apps/dashboard/components/ViewModeToolbar.tsx

@@ -0,0 +1,104 @@
+
+import { useCallback } from 'react';
+
+type ViewMode = 'summary' | 'detail' | 'raw';
+
+const READOUT_FILTERS = [
+  { id: 'init', label: 'Init', types: ['system'] },
+  { id: 'streaming', label: 'Streaming', types: ['content_block_start', 'content_block_delta', 'content_block_stop', 'message_start', 'message_delta', 'message_stop'] },
+  { id: 'messages', label: 'Messages', types: ['assistant'] },
+  { id: 'tools', label: 'Tools', types: ['user'] },
+  { id: 'completion', label: 'Completion', types: ['result', 'done'] },
+  { id: 'errors', label: 'Errors', types: ['error'] },
+] as const;
+
+type ReadoutFilterId = typeof READOUT_FILTERS[number]['id'];
+
+interface ViewModeToolbarProps {
+  viewMode: ViewMode;
+  onViewModeChange: (mode: ViewMode) => void;
+  hasIntermediates: boolean;
+  allExpanded: boolean;
+  onToggleExpandAll: () => void;
+  activeFilters: Set<ReadoutFilterId>;
+  onToggleFilter: (id: ReadoutFilterId) => void;
+}
+
+const MODE_LABELS: { mode: ViewMode; label: string }[] = [
+  { mode: 'summary', label: 'Summary' },
+  { mode: 'detail', label: 'Detail' },
+  { mode: 'raw', label: 'Raw' },
+];
+
+export function ViewModeToolbar({
+  viewMode,
+  onViewModeChange,
+  hasIntermediates,
+  allExpanded,
+  onToggleExpandAll,
+  activeFilters,
+  onToggleFilter,
+}: ViewModeToolbarProps) {
+  return (
+    <div className="px-5 py-2 border-b border-zinc-100 flex-shrink-0" data-testid="view-mode-toolbar">
+      <div className="flex items-center justify-between">
+        {/* Left: mode toggle */}
+        <div className="flex items-center gap-1" data-testid="mode-toggle">
+          {MODE_LABELS.map(({ mode, label }, i) => (
+            <span key={mode} className="flex items-center">
+              {i > 0 && <span className="text-zinc-300 mx-1 text-xs select-none">|</span>}
+              <button
+                onClick={() => onViewModeChange(mode)}
+                className={`text-xs cursor-pointer transition-colors duration-200 ease-out ${
+                  viewMode === mode
+                    ? 'text-zinc-900 font-semibold underline underline-offset-4 decoration-zinc-900'
+                    : 'text-zinc-400 hover:text-zinc-600'
+                }`}
+                data-testid={`mode-${mode}`}
+                aria-pressed={viewMode === mode}
+              >
+                {label}
+              </button>
+            </span>
+          ))}
+        </div>
+
+        {/* Right: contextual action (non-raw modes) */}
+        {viewMode === 'detail' && hasIntermediates && (
+          <button
+            onClick={onToggleExpandAll}
+            className="text-xs text-zinc-400 hover:text-zinc-600 cursor-pointer transition-colors duration-200 ease-out"
+            data-testid="expand-collapse-all"
+          >
+            {allExpanded ? 'Collapse all' : 'Expand all'}
+          </button>
+        )}
+      </div>
+
+      {/* Raw filter chips: own row, centered */}
+      {viewMode === 'raw' && (
+        <div className="flex justify-center mt-2" data-testid="readout-filter-chips">
+          <div className="flex gap-1.5 flex-wrap justify-center">
+            {READOUT_FILTERS.map(f => (
+              <button
+                key={f.id}
+                onClick={() => onToggleFilter(f.id)}
+                className={`text-xs px-2 py-0.5 rounded-full cursor-pointer transition-colors duration-200 ease-out ${
+                  activeFilters.has(f.id)
+                    ? 'bg-purple-100 text-purple-700'
+                    : 'bg-zinc-100 text-zinc-400'
+                }`}
+                data-testid={`readout-filter-${f.id}`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type { ViewMode, ReadoutFilterId, ViewModeToolbarProps };
+export { READOUT_FILTERS };

package/apps/dashboard/components/WaveCompletionAnimation.tsx

@@ -1,8 +1,7 @@
-'use client';
 
 import { useState, useEffect, useRef, ReactNode } from 'react';
 
-type AnimationPhase = 'idle' | 'content-fade' | 'video-playing' | 'card-fade' | 'complete';
+type AnimationPhase = 'idle' | 'video-playing' | 'collapsing' | 'complete';
 
 interface WaveCompletionAnimationProps {
   isPlaying: boolean;
@@ -13,16 +12,15 @@ interface WaveCompletionAnimationProps {
 export function WaveCompletionAnimation({ isPlaying, onComplete, children }: WaveCompletionAnimationProps) {
   const [phase, setPhase] = useState<AnimationPhase>('idle');
   const videoRef = useRef<HTMLVideoElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const hasStartedRef = useRef(false);
   const timeoutRefs = useRef<NodeJS.Timeout[]>([]);
 
-  // Clear all pending timeouts
   const clearAllTimeouts = () => {
     timeoutRefs.current.forEach(clearTimeout);
     timeoutRefs.current = [];
   };
 
-  // Handle video load errors - skip animation and complete immediately
   const handleVideoError = () => {
     if (hasStartedRef.current) {
       clearAllTimeouts();
@@ -35,56 +33,39 @@ export function WaveCompletionAnimation({ isPlaying, onComplete, children }: Wav
     if (isPlaying && !hasStartedRef.current) {
       hasStartedRef.current = true;
 
-      // Check for reduced motion preference
-      const prefersReducedMotion = typeof window !== 'undefined' &&
-        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
       if (prefersReducedMotion) {
-        // Skip animation entirely - complete immediately
         setPhase('complete');
         onComplete();
         return;
       }
 
-      // Phase 1: Content fades out (0.5s)
-      setPhase('content-fade');
+      // Phase 1: Content disappears instantly, video starts playing
+      setPhase('video-playing');
 
-      // Phase 2: Video starts playing
       const video = videoRef.current;
       if (video) {
         video.currentTime = 0;
-        video.play().catch(() => {
-          // Video play failed - skip animation
-          handleVideoError();
-        });
+        video.play().catch(() => handleVideoError());
       }
 
+      // Phase 2: After 1.5s of video, collapse the card (opacity + height)
       const t1 = setTimeout(() => {
-        setPhase('video-playing');
-      }, 500);
+        setPhase('collapsing');
+      }, 1500);
       timeoutRefs.current.push(t1);
 
-      // Phase 3: After 5 seconds, card fades out (video keeps playing)
+      // Phase 3: After collapse transition (0.5s), fire onComplete
       const t2 = setTimeout(() => {
-        setPhase('card-fade');
-      }, 5000);
-      timeoutRefs.current.push(t2);
-
-      // Phase 4: After fade completes (1.5s), call onComplete
-      const t3 = setTimeout(() => {
-        if (video) {
-          video.pause();
-        }
+        if (video) video.pause();
         setPhase('complete');
         onComplete();
-      }, 6500); // 5000 + 1500
-      timeoutRefs.current.push(t3);
+      }, 2000);
+      timeoutRefs.current.push(t2);
     }
   }, [isPlaying, onComplete]);
 
-  // Reset when isPlaying becomes false — but only if not already complete.
-  // If the animation finished naturally (phase === 'complete'), skip the reset
-  // to avoid snapping opacity back to 1 before the CSS transition visually ends.
   useEffect(() => {
     if (!isPlaying && phase !== 'complete') {
       clearAllTimeouts();
@@ -93,49 +74,55 @@ export function WaveCompletionAnimation({ isPlaying, onComplete, children }: Wav
     }
   }, [isPlaying, phase]);
 
-  // Cleanup on unmount
   useEffect(() => {
     return () => clearAllTimeouts();
   }, []);
 
-  const contentOpacity = phase === 'idle' ? 1 : 0;
-  const videoOpacity = phase === 'idle' ? 0 : 1;
-  const cardOpacity = phase === 'card-fade' || phase === 'complete' ? 0 : 1;
+  const isIdle = phase === 'idle';
+  const isCollapsing = phase === 'collapsing' || phase === 'complete';
 
   return (
     <div
-      className="relative overflow-hidden rounded-xl border"
+      ref={containerRef}
       style={{
-        opacity: cardOpacity,
-        transition: 'opacity 1.5s ease-out',
+        overflow: 'hidden',
+        opacity: isCollapsing ? 0 : 1,
+        transform: isCollapsing ? 'scaleY(0)' : 'scaleY(1)',
+        transformOrigin: 'top',
+        transition: isCollapsing
+          ? 'opacity 0.4s ease-out, transform 0.5s ease-out'
+          : undefined,
       }}
     >
-      {/* Wave video - positioned behind content */}
-      <video
-        ref={videoRef}
-        className="absolute inset-0 w-full h-full object-cover rounded-xl"
-        style={{
-          opacity: videoOpacity,
-          transition: 'opacity 0.5s ease',
-          zIndex: 1,
-        }}
-        muted
-        playsInline
-        src="/assets/wave-completion.mp4"
-        onError={handleVideoError}
-      />
-
-      {/* Card content - positioned above video */}
-      <div
-        style={{
-          opacity: contentOpacity,
-          transition: 'opacity 0.5s ease',
-          position: 'relative',
-          zIndex: 2,
-          background: 'inherit',
-        }}
-      >
-        {children}
+      <div className="relative overflow-hidden rounded-xl">
+        {/* Wave video - positioned behind content */}
+        <video
+          ref={videoRef}
+          className="absolute inset-0 w-full h-full object-cover rounded-xl"
+          style={{
+            opacity: isIdle ? 0 : 1,
+            transition: 'opacity 0.5s ease-in',
+            zIndex: 1,
+          }}
+          muted
+          playsInline
+          preload="none"
+          src="/assets/wave-completion.mp4"
+          onError={handleVideoError}
+        />
+
+        {/* Card content - positioned above video */}
+        <div
+          style={{
+            opacity: isIdle ? 1 : 0,
+            transition: 'opacity 0.5s ease-out',
+            position: 'relative',
+            zIndex: 2,
+            background: 'inherit',
+          }}
+        >
+          {children}
+        </div>
       </div>
     </div>
   );

package/apps/dashboard/components/WelcomeScreen.tsx

@@ -1,7 +1,5 @@
-'use client';
-
-import Image from 'next/image';
-import type { RecentProject } from '@/lib/db-bridge';
+import { Button } from '@/components/ui/Button';
+import type { RecentProject } from '@/lib/tauri-bridge';
 
 interface WelcomeScreenProps {
   recentProjects?: RecentProject[];
@@ -17,16 +15,15 @@ export function WelcomeScreen({
   onSelectRecentProject,
 }: WelcomeScreenProps) {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 p-8">
-      <div className="max-w-md w-full space-y-8">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 px-8 py-6 overflow-y-auto">
+      <div className="max-w-md w-full space-y-6">
         {/* Logo */}
         <div className="flex flex-col items-center space-y-4">
-          <Image
+          <img
             src="/jettypod_wordmark.png"
             alt="JettyPod"
             width={160}
             height={40}
-            priority
           />
           <p className="text-zinc-500 dark:text-zinc-400 text-center">
             Select a project to get started
@@ -34,46 +31,33 @@ export function WelcomeScreen({
         </div>
 
         {/* Project Buttons */}
-        <div className="pt-4 space-y-3">
-          <button
+        <div className="pt-4 space-y-4">
+          <Button
             onClick={onNewProject}
-            className="w-full py-3 px-6 rounded-xl font-medium 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)
-              `,
-            }}
+            size="lg"
+            fullWidth
             data-testid="new-project-button"
           >
             New Project
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={onOpenProject}
-            className="w-full py-3 px-6 rounded-xl font-medium transition-colors text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 border border-zinc-200 dark:border-zinc-700"
-            style={{ cursor: 'pointer' }}
+            variant="secondary"
+            size="lg"
+            fullWidth
             data-testid="open-project-button"
           >
             Open Project
-          </button>
+          </Button>
         </div>
 
         {/* Recent Projects Section */}
-        <div className="pt-8 space-y-4" data-testid="recent-projects-section">
+        <div className="pt-6 space-y-3" data-testid="recent-projects-section">
           <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
             Recent Projects
           </h2>
           {recentProjects.length === 0 ? (
-            <div className="border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 text-zinc-500 dark:text-zinc-400 text-sm text-center">
+            <div className="rounded-lg p-4 text-zinc-500 dark:text-zinc-400 text-base text-center">
               No recent projects
             </div>
           ) : (
@@ -82,13 +66,13 @@ export function WelcomeScreen({
                 <button
                   key={project.path}
                   onClick={() => onSelectRecentProject?.(project)}
-                  className="w-full text-left p-4 border border-zinc-200 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
+                  className="w-full text-left p-4 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors duration-200 ease-out cursor-pointer"
                   data-testid={`recent-project-${project.name}`}
                 >
                   <div className="font-medium text-zinc-900 dark:text-zinc-100">
                     {project.name}
                   </div>
-                  <div className="text-sm text-zinc-500 dark:text-zinc-400 truncate">
+                  <div className="text-base text-zinc-500 dark:text-zinc-400 truncate">
                     {project.path}
                   </div>
                 </button>

package/apps/dashboard/components/WorkItemHeader.tsx

@@ -1,19 +1,18 @@
-'use client';
 
 import { CopyableId } from './CopyableId';
+import { TypeIcon } from './TypeIcon';
 
 interface WorkItemHeaderProps {
   id: number;
   title: string;
   type: string;
-  typeIcon: string;
   typeLabel: string;
 }
 
-export function WorkItemHeader({ id, title, type, typeIcon, typeLabel }: WorkItemHeaderProps) {
+export function WorkItemHeader({ id, title, type, typeLabel }: WorkItemHeaderProps) {
   return (
-    <div className="flex items-center gap-2 text-sm text-zinc-500 mb-1">
-      <span>{typeIcon} {typeLabel}</span>
+    <div className="flex items-center gap-3 text-base text-zinc-500 mb-1.5">
+      <span className="flex items-center gap-1"><TypeIcon type={type} /> {typeLabel}</span>
       <span>•</span>
       <CopyableId id={id} title={title} type={type} />
     </div>