jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/SubscribeContent.tsx

@@ -1,7 +1,7 @@
-'use client';
 
 import { useState, useEffect, useRef } from 'react';
 import { Button } from '@/components/ui/Button';
+import { isTauri, auth, shell } from '@/lib/tauri-bridge';
 
 const API_BASE = 'https://jettypod-update-server.spangbaryn2.workers.dev';
 
@@ -20,17 +20,18 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
   const [userPlan, setUserPlan] = useState<string | null>(null);
   const [pollingPlan, setPollingPlan] = useState<PlanType | null>(null);
   const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
     async function loadAuth() {
-      if (!window.electronAPI?.isElectron) return;
-      const status = await window.electronAPI.auth.getStatus();
+      if (!isTauri()) return;
+      const status = await auth.getStatus();
       if (status.authenticated && status.user) {
         setUserEmail(status.user.email);
         setUserPlan(status.user.plan || 'free');
 
         // Check server-side plan in case webhook updated it after local JWT was issued
-        const token = await window.electronAPI.auth.getToken();
+        const token = await auth.getToken();
         if (token) {
           try {
             const res = await fetch(`${API_BASE}/auth/me`, {
@@ -40,7 +41,7 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
               const data = await res.json() as { user: { plan: string; email: string }; token?: string };
               if (data.user.plan !== 'free') {
                 if (data.token) {
-                  await window.electronAPI.auth.saveToken(data.token, data.user);
+                  await auth.saveToken(data.token, data.user);
                 }
                 setUserPlan(data.user.plan);
                 setPageState('upgraded');
@@ -59,19 +60,22 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
   useEffect(() => {
     return () => {
       if (pollingRef.current) clearInterval(pollingRef.current);
+      abortRef.current?.abort();
     };
   }, []);
 
   const startPolling = () => {
     setPageState('polling');
+    abortRef.current = new AbortController();
 
     pollingRef.current = setInterval(async () => {
       try {
-        const token = await window.electronAPI!.auth.getToken();
+        const token = await auth.getToken();
         if (!token) return;
 
         const res = await fetch(`${API_BASE}/auth/me`, {
           headers: { 'Authorization': `Bearer ${token}` },
+          signal: abortRef.current?.signal,
         });
 
         if (!res.ok) return;
@@ -80,7 +84,7 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
 
         if (data.user.plan !== 'free') {
           if (data.token) {
-            await window.electronAPI!.auth.saveToken(data.token, data.user);
+            await auth.saveToken(data.token, data.user);
           }
           setUserPlan(data.user.plan);
           setPageState('upgraded');
@@ -93,13 +97,38 @@ export function SubscribeContent({ onClose }: SubscribeContentProps) {
   };
 
   const handleCheckout = async (plan: 'monthly' | 'lifetime') => {
-    if (!window.electronAPI?.isElectron) return;
+    if (!isTauri()) return;
     setCheckoutPlan(plan);
     setError(null);
 
-    const result = await window.electronAPI.subscription.createCheckout(plan);
-    if (!result.success) {
-      setError(result.error || 'Failed to start checkout.');
+    try {
+      const token = await auth.getToken();
+      if (!token) {
+        setError('Not authenticated');
+        setCheckoutPlan(null);
+        return;
+      }
+      const res = await fetch(`${API_BASE}/billing/create-checkout`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plan }),
+      });
+      if (res.ok) {
+        const data = await res.json() as { url?: string };
+        if (data.url) {
+          await shell.openUrl(data.url);
+        } else {
+          setError('Failed to start checkout.');
+          setCheckoutPlan(null);
+          return;
+        }
+      } else {
+        setError('Failed to start checkout.');
+        setCheckoutPlan(null);
+        return;
+      }
+    } catch {
+      setError('Failed to start checkout.');
       setCheckoutPlan(null);
       return;
     }

package/apps/dashboard/components/TestTree.tsx

@@ -1,7 +1,6 @@
-'use client';
 
 import { useState } from 'react';
-import type { TestDashboardData, TestEpic, TestFeature, TestScenario } from '@/lib/tests';
+import type { TestDashboardData, TestEpic, TestFeature, TestScenario } from '@/lib/db';
 import { TypeIcon } from './TypeIcon';
 
 const statusIcons: Record<string, string> = {

package/apps/dashboard/components/TipCard.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import { useState, useEffect } from 'react';
 import { m, AnimatePresence, useReducedMotion } from 'framer-motion';
-import dynamic from 'next/dynamic';
+import { lazy, Suspense } from 'react';
 
-const LazyMarkdown = dynamic(() => import('./LazyMarkdown'), { ssr: false });
+const LazyMarkdown = lazy(() => import('./LazyMarkdown'));
 
 const STORAGE_KEY = 'jettypod-dismissed-tips';
 

package/apps/dashboard/components/Toast.tsx

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

package/apps/dashboard/components/TypeIcon.tsx

@@ -1,19 +1,18 @@
-'use client';
 
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { TYPE_ICONS } from '@/lib/constants';
 import { shadow } from '@/lib/shadows';
 
-const SVG_ICONS: Record<string, { src: string; label: string }> = {
-  bug: { src: '/bug-icon.svg', label: 'Bug' },
-  chore: { src: '/wrench-icon.svg', label: 'Chore' },
-  epic: { src: '/buoy-icon.svg', label: 'Epic' },
-  feature: { src: '/star-icon.svg', label: 'Feature' },
+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 = SVG_ICONS[type];
+  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);
@@ -37,7 +36,7 @@ export function TypeIcon({ type, className }: { type: string; className?: string
   if (svg) {
     return (
       <span ref={ref} className="inline-flex" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
-        <img src={svg.src} alt="" className={className || "w-8 h-8"} />
+        <img src={svg.src} alt="" className={`object-contain ${className || "w-6 h-6"}`} />
         {mounted && tooltip && portalRoot && createPortal(
           <span
             className="pointer-events-none fixed"

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,4 +1,3 @@
-'use client';
 
 import { useState, useEffect, useRef, ReactNode } from 'react';
 
@@ -16,7 +15,6 @@ export function WaveCompletionAnimation({ isPlaying, onComplete, children }: Wav
   const containerRef = useRef<HTMLDivElement>(null);
   const hasStartedRef = useRef(false);
   const timeoutRefs = useRef<NodeJS.Timeout[]>([]);
-  const measuredHeightRef = useRef<number | null>(null);
 
   const clearAllTimeouts = () => {
     timeoutRefs.current.forEach(clearTimeout);
@@ -35,8 +33,7 @@ export function WaveCompletionAnimation({ isPlaying, onComplete, children }: Wav
     if (isPlaying && !hasStartedRef.current) {
       hasStartedRef.current = true;
 
-      const prefersReducedMotion = typeof window !== 'undefined' &&
-        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
       if (prefersReducedMotion) {
         setPhase('complete');
@@ -44,12 +41,6 @@ export function WaveCompletionAnimation({ isPlaying, onComplete, children }: Wav
         return;
       }
 
-      // Capture height before animation for smooth collapse later
-      if (containerRef.current) {
-        measuredHeightRef.current = containerRef.current.offsetHeight;
-        containerRef.current.style.maxHeight = `${measuredHeightRef.current}px`;
-      }
-
       // Phase 1: Content disappears instantly, video starts playing
       setPhase('video-playing');
 
@@ -80,10 +71,6 @@ export function WaveCompletionAnimation({ isPlaying, onComplete, children }: Wav
       clearAllTimeouts();
       hasStartedRef.current = false;
       setPhase('idle');
-      measuredHeightRef.current = null;
-      if (containerRef.current) {
-        containerRef.current.style.maxHeight = '';
-      }
     }
   }, [isPlaying, phase]);
 
@@ -100,9 +87,10 @@ export function WaveCompletionAnimation({ isPlaying, onComplete, children }: Wav
       style={{
         overflow: 'hidden',
         opacity: isCollapsing ? 0 : 1,
-        maxHeight: isCollapsing ? 0 : undefined,
+        transform: isCollapsing ? 'scaleY(0)' : 'scaleY(1)',
+        transformOrigin: 'top',
         transition: isCollapsing
-          ? 'opacity 0.4s ease-out, max-height 0.5s ease-out'
+          ? 'opacity 0.4s ease-out, transform 0.5s ease-out'
           : undefined,
       }}
     >
@@ -118,7 +106,7 @@ export function WaveCompletionAnimation({ isPlaying, onComplete, children }: Wav
           }}
           muted
           playsInline
-          preload="auto"
+          preload="none"
           src="/assets/wave-completion.mp4"
           onError={handleVideoError}
         />

package/apps/dashboard/components/WelcomeScreen.tsx

@@ -1,8 +1,5 @@
-'use client';
-
-import Image from 'next/image';
 import { Button } from '@/components/ui/Button';
-import type { RecentProject } from '@/lib/db-bridge';
+import type { RecentProject } from '@/lib/tauri-bridge';
 
 interface WelcomeScreenProps {
   recentProjects?: RecentProject[];
@@ -22,12 +19,11 @@ export function WelcomeScreen({
       <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

package/apps/dashboard/components/WorkItemHeader.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { CopyableId } from './CopyableId';
 import { TypeIcon } from './TypeIcon';

package/apps/dashboard/components/WorkItemTree.tsx

@@ -1,7 +1,5 @@
-'use client';
-
 import { useState } from 'react';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import type { WorkItem } from '@/lib/db';
 import { CopyableId } from './CopyableId';
 import { STATUS_COLORS, MODE_LABELS } from '@/lib/constants';
@@ -42,7 +40,7 @@ function WorkItemNode({ item, depth = 0 }: WorkItemNodeProps) {
 
         {/* Title */}
         <Link
-          href={`/work/${item.id}`}
+          to={`/work/${item.id}`}
           className={`flex-1 truncate hover:underline ${STATUS_COLORS[item.status]}`}
         >
           {item.title}

package/apps/dashboard/components/settings/AccountSection.tsx

@@ -1,10 +1,11 @@
-'use client';
-
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { useUsage } from '@/contexts/UsageContext';
 import { SubscribeContent } from '@/components/SubscribeContent';
 import { Button } from '@/components/ui/Button';
+import { isTauri, auth, shell } from '@/lib/tauri-bridge';
+
+const API_BASE = 'https://jettypod-update-server.spangbaryn2.workers.dev';
 
 const planColors: Record<string, string> = {
   free: 'bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300',
@@ -13,7 +14,7 @@ const planColors: Record<string, string> = {
 };
 
 export function AccountSection() {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { plan, used, limit, loading, refresh } = useUsage();
   const [email, setEmail] = useState<string | null>(null);
   const [portalError, setPortalError] = useState<string | null>(null);
@@ -22,9 +23,9 @@ export function AccountSection() {
 
   useEffect(() => {
     async function loadAuth() {
-      if (!window.electronAPI?.isElectron) return;
+      if (!isTauri()) return;
       try {
-        const status = await window.electronAPI.auth.getStatus();
+        const status = await auth.getStatus();
         if (status.authenticated && status.user) {
           setEmail(status.user.email);
         }
@@ -39,13 +40,27 @@ export function AccountSection() {
   const isAtCapacity = isFree && limit > 0 && used >= limit;
 
   const handleManageSubscription = async () => {
-    if (!window.electronAPI?.billing?.openCustomerPortal) return;
     setPortalError(null);
     setPortalLoading(true);
     try {
-      const result = await window.electronAPI.billing.openCustomerPortal();
-      if (result && !result.success) {
-        setPortalError(result.error || 'Unable to open billing portal');
+      const token = await auth.getToken();
+      if (!token) {
+        setPortalError('Not authenticated');
+        return;
+      }
+      const res = await fetch(`${API_BASE}/billing/customer-portal`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}` },
+      });
+      if (res.ok) {
+        const data = await res.json() as { url?: string };
+        if (data.url) {
+          await shell.openUrl(data.url);
+        } else {
+          setPortalError('Unable to open billing portal');
+        }
+      } else {
+        setPortalError('Unable to open billing portal');
       }
     } catch {
       setPortalError('Unable to open billing portal');
@@ -55,9 +70,8 @@ export function AccountSection() {
   };
 
   const handleLogout = async () => {
-    if (!window.electronAPI?.auth?.logout) return;
-    await window.electronAPI.auth.logout();
-    router.push('/login');
+    await auth.logout();
+    navigate('/login');
   };
 
   const handleUpgradeClose = () => {

package/apps/dashboard/components/settings/AiContextSection.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { invoke } from '@/lib/tauri';
+import { openDialog } from '@/lib/tauri';
+import { Button } from '@/components/ui/Button';
+import { ContextDocumentsSection } from './ContextDocumentsSection';
+import type { ContextDocument } from '@/lib/data-bridge';
+
+interface AiContextSectionProps {
+  initialDesignSystemDir: string | null;
+  initialContextDocuments: ContextDocument[];
+}
+
+export function AiContextSection({ initialDesignSystemDir, initialContextDocuments }: AiContextSectionProps) {
+  const [designSystemDir, setDesignSystemDir] = useState<string | null>(initialDesignSystemDir);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const showSuccess = (message: string) => {
+    setSuccessMessage(message);
+    setTimeout(() => setSuccessMessage(null), 3000);
+  };
+
+  const handleBrowse = async () => {
+    const selected = await openDialog({ directory: true, title: 'Select Design System Directory' });
+    if (selected && typeof selected === 'string') {
+      await invoke('db_set_design_system_dir', { dir: selected });
+      setDesignSystemDir(selected);
+      showSuccess('Design system directory set');
+    }
+  };
+
+  const handleClear = async () => {
+    await invoke('db_reset_design_system_dir');
+    setDesignSystemDir(null);
+    showSuccess('Design system directory cleared');
+  };
+
+  return (
+    <section id="ai-context">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-medium text-zinc-900 dark:text-zinc-100">
+          AI Context
+        </h2>
+      </div>
+
+      {successMessage && (
+        <div className="mb-4 px-6 py-3 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 rounded-lg text-base">
+          {successMessage}
+        </div>
+      )}
+
+      {/* Design System Directory Setting */}
+      <div className="p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
+        <div>
+          <label className="block text-base font-medium text-zinc-900 dark:text-zinc-100">
+            Design System Directory
+          </label>
+          <p className="text-base text-zinc-500 dark:text-zinc-400 mt-1">
+            Select a folder that includes your design system. Claude will use this when prototyping and building parts of your project.
+          </p>
+        </div>
+
+        <div className="mt-4">
+          {designSystemDir ? (
+            <div className="flex items-center gap-3">
+              <span className="font-mono text-sm text-zinc-900 dark:text-zinc-100 bg-zinc-200 dark:bg-zinc-700 px-3 py-2 rounded flex-1 truncate">
+                {designSystemDir}
+              </span>
+              <Button onClick={handleBrowse} variant="ghost" size="sm">
+                Change
+              </Button>
+              <Button onClick={handleClear} variant="ghost" size="sm">
+                Clear
+              </Button>
+            </div>
+          ) : (
+            <div className="flex items-center gap-3">
+              <Button onClick={handleBrowse} size="sm">
+                Browse...
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Context Documents */}
+      <ContextDocumentsSection initialDocuments={initialContextDocuments} />
+    </section>
+  );
+}