jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/WaveCompletionAnimation.tsx

@@ -2,7 +2,7 @@
 
 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 +13,16 @@ 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[]>([]);
+  const measuredHeightRef = useRef<number | null>(null);
 
-  // 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,107 +35,106 @@ 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;
 
       if (prefersReducedMotion) {
-        // Skip animation entirely - complete immediately
         setPhase('complete');
         onComplete();
         return;
       }
 
-      // Phase 1: Content fades out (0.5s)
-      setPhase('content-fade');
+      // 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');
 
-      // 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();
       hasStartedRef.current = false;
       setPhase('idle');
+      measuredHeightRef.current = null;
+      if (containerRef.current) {
+        containerRef.current.style.maxHeight = '';
+      }
     }
   }, [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,
+        maxHeight: isCollapsing ? 0 : undefined,
+        transition: isCollapsing
+          ? 'opacity 0.4s ease-out, max-height 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="auto"
+          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,22 +1,25 @@
 'use client';
 
 import Image from 'next/image';
+import { Button } from '@/components/ui/Button';
 import type { RecentProject } from '@/lib/db-bridge';
 
 interface WelcomeScreenProps {
   recentProjects?: RecentProject[];
+  onNewProject?: () => void;
   onOpenProject?: () => void;
   onSelectRecentProject?: (project: RecentProject) => void;
 }
 
 export function WelcomeScreen({
   recentProjects = [],
+  onNewProject,
   onOpenProject,
   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
@@ -31,54 +34,49 @@ export function WelcomeScreen({
           </p>
         </div>
 
-        {/* Open Project Button */}
-        <div className="pt-4">
-          <button
+        {/* Project Buttons */}
+        <div className="pt-4 space-y-4">
+          <Button
+            onClick={onNewProject}
+            size="lg"
+            fullWidth
+            data-testid="new-project-button"
+          >
+            New Project
+          </Button>
+          <Button
             onClick={onOpenProject}
-            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)
-              `,
-            }}
+            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>
           ) : (
             <div className="space-y-2">
-              {recentProjects.map((project) => (
+              {recentProjects.slice(0, 4).map((project) => (
                 <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,19 @@
 '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>

package/apps/dashboard/components/WorkItemTree.tsx

@@ -4,27 +4,8 @@ import { useState } from 'react';
 import Link from 'next/link';
 import type { WorkItem } from '@/lib/db';
 import { CopyableId } from './CopyableId';
-
-const typeIcons: Record<string, string> = {
-  epic: '🎯',
-  feature: '✨',
-  chore: '🔧',
-  bug: '🐛',
-};
-
-const statusColors: Record<string, string> = {
-  backlog: 'text-zinc-500',
-  todo: 'text-zinc-500',
-  in_progress: 'text-blue-600 dark:text-blue-400',
-  done: 'text-green-600 dark:text-green-400',
-  cancelled: 'text-red-500',
-};
-
-const modeLabels: Record<string, { label: string; color: string }> = {
-  speed: { label: 'speed', color: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200' },
-  stable: { label: 'stable', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' },
-  production: { label: 'prod', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' },
-};
+import { STATUS_COLORS, MODE_LABELS } from '@/lib/constants';
+import { TypeIcon } from './TypeIcon';
 
 interface WorkItemNodeProps {
   item: WorkItem;
@@ -38,7 +19,7 @@ function WorkItemNode({ item, depth = 0 }: WorkItemNodeProps) {
   return (
     <div className="select-none">
       <div
-        className={`flex items-center gap-2 py-1.5 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group`}
+        className={`flex items-center gap-3 py-2 px-3 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out group`}
         style={{ paddingLeft: `${depth * 20 + 8}px` }}
       >
         {/* Expand/collapse toggle */}
@@ -54,7 +35,7 @@ function WorkItemNode({ item, depth = 0 }: WorkItemNodeProps) {
         )}
 
         {/* Type icon */}
-        <span className="text-sm">{typeIcons[item.type] || '📄'}</span>
+        <span className="text-base"><TypeIcon type={item.type} /></span>
 
         {/* ID with click-to-copy */}
         <CopyableId id={item.id} title={item.title} type={item.type} />
@@ -62,15 +43,15 @@ function WorkItemNode({ item, depth = 0 }: WorkItemNodeProps) {
         {/* Title */}
         <Link
           href={`/work/${item.id}`}
-          className={`flex-1 truncate hover:underline ${statusColors[item.status]}`}
+          className={`flex-1 truncate hover:underline ${STATUS_COLORS[item.status]}`}
         >
           {item.title}
         </Link>
 
         {/* Mode badge */}
-        {item.mode && modeLabels[item.mode] && (
-          <span className={`text-xs px-1.5 py-0.5 rounded ${modeLabels[item.mode].color}`}>
-            {modeLabels[item.mode].label}
+        {item.mode && MODE_LABELS[item.mode] && (
+          <span className={`text-xs px-2 py-1 rounded ${MODE_LABELS[item.mode].color}`}>
+            {MODE_LABELS[item.mode].label}
           </span>
         )}
 
@@ -108,7 +89,7 @@ export function WorkItemTree({ items }: WorkItemTreeProps) {
   }
 
   return (
-    <div className="font-mono text-sm">
+    <div className="font-mono text-base">
       {items.map((item) => (
         <WorkItemNode key={item.id} item={item} />
       ))}

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

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useUsage } from '@/contexts/UsageContext';
+import { SubscribeContent } from '@/components/SubscribeContent';
+import { Button } from '@/components/ui/Button';
+
+const planColors: Record<string, string> = {
+  free: 'bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300',
+  monthly: 'bg-[#e8f0f0] dark:bg-[#819D9F]/20 text-[#5a7d7f] dark:text-[#a3bfc0]',
+  lifetime: 'bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300',
+};
+
+export function AccountSection() {
+  const router = useRouter();
+  const { plan, used, limit, loading, refresh } = useUsage();
+  const [email, setEmail] = useState<string | null>(null);
+  const [portalError, setPortalError] = useState<string | null>(null);
+  const [portalLoading, setPortalLoading] = useState(false);
+  const [showUpgrade, setShowUpgrade] = useState(false);
+
+  useEffect(() => {
+    async function loadAuth() {
+      if (!window.electronAPI?.isElectron) return;
+      try {
+        const status = await window.electronAPI.auth.getStatus();
+        if (status.authenticated && status.user) {
+          setEmail(status.user.email);
+        }
+      } catch {
+        // Auth status unavailable - email stays null, shows "Not signed in"
+      }
+    }
+    loadAuth();
+  }, []);
+
+  const isFree = plan === 'free';
+  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');
+      }
+    } catch {
+      setPortalError('Unable to open billing portal');
+    } finally {
+      setPortalLoading(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    if (!window.electronAPI?.auth?.logout) return;
+    await window.electronAPI.auth.logout();
+    router.push('/login');
+  };
+
+  const handleUpgradeClose = () => {
+    setShowUpgrade(false);
+    refresh();
+  };
+
+  if (showUpgrade) {
+    return (
+      <section id="account" className="relative min-h-[500px]">
+        <Button
+          onClick={handleUpgradeClose}
+          variant="ghost"
+          size="icon"
+          className="absolute top-0 right-0 z-10"
+          aria-label="Close upgrade"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </Button>
+        <div className="flex flex-col items-center justify-center min-h-[500px] py-8">
+          <SubscribeContent onClose={handleUpgradeClose} />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section id="account">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-medium text-zinc-900 dark:text-zinc-100">
+          Account
+        </h2>
+      </div>
+
+      {/* Email & Plan */}
+      <div className="p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-xl space-y-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <label className="block text-base font-medium text-zinc-900 dark:text-zinc-100">
+              Email
+            </label>
+            <p className="text-base text-zinc-600 dark:text-zinc-400 mt-1">
+              {loading ? '...' : email || 'Not signed in'}
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className={`px-2 py-1 text-xs font-medium rounded-full ${planColors[plan] || planColors.free}`}>
+              {plan}
+            </span>
+          </div>
+        </div>
+
+        {/* Usage Bar (free users only) */}
+        {isFree && (
+          <div>
+            <div className="flex items-center justify-between text-base text-zinc-500 dark:text-zinc-400 mb-1.5">
+              <span>Weekly usage</span>
+              <span>{used} / {limit} work items</span>
+            </div>
+            <div className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-[width,background-color] duration-200 ease-out ${isAtCapacity ? 'bg-red-500' : 'bg-[#819D9F]'}`}
+                style={{ width: `${limit > 0 ? Math.min((used / limit) * 100, 100) : 0}%` }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Action Button */}
+        <div className="pt-2 border-t border-zinc-200 dark:border-zinc-700 flex items-center justify-between">
+          <div>
+            {isFree ? (
+              <Button
+                onClick={() => setShowUpgrade(true)}
+                variant="accent"
+                size="sm"
+              >
+                Upgrade
+              </Button>
+            ) : (
+              <>
+                <Button
+                  onClick={handleManageSubscription}
+                  disabled={portalLoading}
+                  variant="secondary"
+                  size="sm"
+                >
+                  {portalLoading ? 'Opening...' : 'Manage Subscription'}
+                </Button>
+                {portalError && (
+                  <p className="text-base text-red-500 mt-1">{portalError}</p>
+                )}
+              </>
+            )}
+          </div>
+          <Button
+            onClick={handleLogout}
+            variant="destructive"
+            size="sm"
+          >
+            Log Out
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}