jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/OnboardingWelcome.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { m, AnimatePresence, useReducedMotion } from 'framer-motion';
+import type { WorkItem } from '@/lib/db';
+import { shadow } from '@/lib/shadows';
+import { Button } from '@/components/ui/Button';
+import { TypeIcon } from '@/components/TypeIcon';
+
+interface OnboardingWelcomeProps {
+  onboardingItems: WorkItem[];
+  onStartChore: (id: number, title: string) => void;
+}
+
+const REVEAL_EASE = [0.22, 1, 0.36, 1] as const;
+
+export function OnboardingWelcome({ onboardingItems, onStartChore }: OnboardingWelcomeProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const [phase, setPhase] = useState<'welcome' | 'transitioning' | 'revealed'>('welcome');
+
+  const handleLetsGo = useCallback(() => {
+    setPhase('transitioning');
+  }, []);
+
+  const handleExitComplete = useCallback(() => {
+    setPhase('revealed');
+  }, []);
+
+  const handleStartChore = useCallback((item: WorkItem) => {
+    onStartChore(item.id, item.title);
+  }, [onStartChore]);
+
+  const hasItems = onboardingItems.length > 0;
+  const isRevealed = phase === 'revealed';
+  const dur = prefersReducedMotion ? 0.05 : undefined;
+
+  return (
+    <div
+      className={`h-full flex justify-center overflow-hidden relative ${isRevealed ? 'items-start pt-16' : 'items-center pt-0'}`}
+      style={{ transition: prefersReducedMotion ? 'none' : 'padding-top 0.8s cubic-bezier(0.22, 1, 0.36, 1)' }}
+    >
+      <div className="flex items-start gap-12">
+        {/* Primary column — starts as single centered column, narrows to left column on reveal */}
+        <m.div
+          className="shrink-0 flex flex-col"
+          animate={{ width: isRevealed ? 340 : 480 }}
+          initial={false}
+          transition={{ duration: dur ?? 0.8, ease: REVEAL_EASE }}
+        >
+          {/* Greeting + intro — fade out on "Let's go" */}
+          <AnimatePresence onExitComplete={handleExitComplete}>
+            {phase === 'welcome' && (
+              <>
+                <m.div
+                  key="greeting"
+                  className="text-base leading-relaxed mb-4"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -5, transition: { duration: dur ?? 0.25 } }}
+                  transition={{ duration: dur ?? 0.4, delay: prefersReducedMotion ? 0 : 0.2 }}
+                >
+                  Ahoy. Welcome to your new project.
+                </m.div>
+
+                <m.div
+                  key="intro"
+                  className="text-base leading-relaxed mb-4"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -5, transition: { duration: dur ?? 0.25 } }}
+                  transition={{ duration: dur ?? 0.4, delay: prefersReducedMotion ? 0 : 0.6 }}
+                >
+                  Here&rsquo;s what we&rsquo;ll work through:
+                </m.div>
+              </>
+            )}
+          </AnimatePresence>
+
+          {/* Epic label — appears above cards on reveal */}
+          <AnimatePresence>
+            {isRevealed && (
+              <m.div
+                key="epic-label"
+                className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground mb-2.5 uppercase tracking-wide"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: dur ?? 0.3, delay: prefersReducedMotion ? 0 : 0.3 }}
+              >
+                <TypeIcon type="epic" className="w-4 h-4 inline" />
+                <span>Project Planning</span>
+              </m.div>
+            )}
+          </AnimatePresence>
+
+          {/* Cards — SAME DOM elements throughout, never unmount */}
+          {onboardingItems.map((item, i) => {
+            const isFirst = i === 0;
+            return (
+              <m.div
+                key={item.id}
+                className="bg-white dark:bg-zinc-900 border-2 border-zinc-200 dark:border-zinc-700 rounded-xl px-3.5 py-3 mb-2 flex items-center justify-between"
+                style={{
+                  boxShadow: isRevealed && isFirst
+                    ? `${shadow.sm}, 0 0 0 3px rgba(129,157,159,0.35)`
+                    : shadow.sm,
+                  animation: isRevealed && isFirst ? 'onboarding-pulse-glow 2s ease-in-out infinite' : undefined,
+                }}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{
+                  duration: dur ?? 0.4,
+                  delay: prefersReducedMotion ? 0 : 0.8 + i * 0.1,
+                }}
+              >
+                <div className="flex items-center gap-2.5">
+                  <TypeIcon type="chore" className="w-5 h-5 inline" />
+                  <span className="text-sm font-medium leading-snug">{item.title}</span>
+                </div>
+
+                {/* Start button — grows in after cards settle */}
+                {isRevealed && (
+                  <m.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: dur ?? 0.3, delay: prefersReducedMotion ? 0 : 0.5 }}
+                  >
+                    {isFirst ? (
+                      <button
+                        onClick={() => handleStartChore(item)}
+                        className="px-3 py-1 text-[11px] font-semibold rounded-sm border-2 border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-muted-foreground cursor-pointer whitespace-nowrap"
+                        style={{ animation: 'onboarding-pulse-bg 2s ease-in-out infinite' }}
+                      >
+                        start
+                      </button>
+                    ) : (
+                      <button
+                        disabled
+                        className="px-3 py-1 text-[11px] font-semibold rounded-sm border-2 border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-muted-foreground opacity-40 cursor-default whitespace-nowrap"
+                      >
+                        start
+                      </button>
+                    )}
+                  </m.div>
+                )}
+              </m.div>
+            );
+          })}
+
+          {/* Let's go button — fades out with greeting */}
+          <AnimatePresence>
+            {phase === 'welcome' && (
+              <m.div
+                key="button"
+                className="flex gap-2 mt-2"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0, transition: { duration: dur ?? 0.15 } }}
+                transition={{ duration: dur ?? 0.4, delay: prefersReducedMotion ? 0 : 1.0 + onboardingItems.length * 0.1 }}
+              >
+                <Button onClick={handleLetsGo} size="sm">
+                  Let&rsquo;s go
+                </Button>
+              </m.div>
+            )}
+          </AnimatePresence>
+        </m.div>
+
+        {/* Conversation column — expands in from right on reveal */}
+        {isRevealed && (
+          <m.div
+            className="shrink-0 overflow-hidden"
+            initial={{ width: 0 }}
+            animate={{ width: 480 }}
+            transition={{ duration: dur ?? 0.8, ease: REVEAL_EASE }}
+          >
+            <div className="w-[480px] flex flex-col gap-4">
+              <m.div
+                className="text-base leading-relaxed"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: dur ?? 0.5, delay: prefersReducedMotion ? 0 : 0.3 }}
+              >
+                Each card is a short conversation &mdash; we&rsquo;ll knock them out one at a time.
+              </m.div>
+
+              {hasItems && (
+                <m.div
+                  className="text-sm leading-normal px-3.5 py-2.5 bg-yellow-50 border-2 border-yellow-200 rounded-lg"
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: dur ?? 0.4, delay: prefersReducedMotion ? 0 : 0.6 }}
+                >
+                  👈 Click <strong>start</strong> on the first card to begin.
+                </m.div>
+              )}
+            </div>
+          </m.div>
+        )}
+      </div>
+
+      {/* Keyframe animations for the highlighted card */}
+      <style>{`
+        @keyframes onboarding-pulse-glow {
+          0%, 100% { box-shadow: ${shadow.sm}, 0 0 0 0px rgba(129,157,159,0); }
+          50% { box-shadow: ${shadow.sm}, 0 0 0 3px rgba(129,157,159,0.35); }
+        }
+        @keyframes onboarding-pulse-bg {
+          0%, 100% { background: #ffffff; }
+          50% { background: rgba(129,157,159,0.12); border-color: rgba(129,157,159,0.4); color: #3d4d4e; }
+        }
+      `}</style>
+    </div>
+  );
+}

package/apps/dashboard/components/PlaceholderCard.tsx

@@ -1,30 +1,20 @@
 'use client';
 
-import { motion } from 'framer-motion';
-
-interface PlaceholderCardProps {
-  height: number;
-  minHeight?: number;
-}
-
-const DEFAULT_MIN_HEIGHT = 40;
-
-export function PlaceholderCard({ height, minHeight = DEFAULT_MIN_HEIGHT }: PlaceholderCardProps) {
-  const effectiveHeight = Math.max(height, minHeight);
+import { m } from 'framer-motion';
 
+export function PlaceholderCard() {
   return (
-    <motion.div
+    <m.div
       data-testid="drag-placeholder"
-      initial={{ opacity: 0, height: 0 }}
-      animate={{ opacity: 0.6, height: effectiveHeight }}
-      exit={{ opacity: 0, height: 0 }}
-      transition={{ duration: 0.2, ease: 'easeOut' }}
+      initial={{ opacity: 0, scaleX: 0.3 }}
+      animate={{ opacity: 1, scaleX: 1 }}
+      exit={{ opacity: 0, scaleX: 0.3 }}
+      transition={{ duration: 0.15, ease: 'easeOut' }}
       style={{
-        borderRadius: 8,
-        border: '2px dashed rgba(100, 116, 139, 0.4)',
-        backgroundColor: 'rgba(100, 116, 139, 0.1)',
-        marginTop: 8,
-        marginBottom: 8,
+        height: 3,
+        borderRadius: 2,
+        background: 'linear-gradient(90deg, transparent, #819D9F, transparent)',
+        margin: '2px 8px',
       }}
     />
   );

package/apps/dashboard/components/ProjectSwitcher.tsx

@@ -72,6 +72,19 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
     }
   };
 
+  const handleNewProject = async () => {
+    setError(null);
+    setIsOpen(false);
+    try {
+      const result = await window.electronAPI!.project.newProject();
+      if (result.success) {
+        window.location.reload();
+      }
+    } catch {
+      setError('Failed to create new project.');
+    }
+  };
+
   const handleOpenProject = async () => {
     setError(null);
     setIsOpen(false);
@@ -89,7 +102,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
   // Non-Electron: render static pill (no switching possible)
   if (!isElectron) {
     return (
-      <span className="px-2.5 py-1 text-sm bg-zinc-100 text-zinc-600 rounded-full border border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700">
+      <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}
       </span>
     );
@@ -98,26 +111,30 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
   const dropdownContent = (
     <div
       ref={dropdownRef}
-      className="fixed z-50 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 py-1 min-w-[200px] max-w-[320px]"
+      className="fixed z-50 bg-white dark:bg-zinc-800 rounded-lg shadow-lg py-1.5 min-w-[200px] max-w-[320px]"
       style={{
         top: dropdownPosition?.top ?? 0,
         left: dropdownPosition?.left ?? 0,
       }}
     >
       {/* Current project */}
-      <div className="px-3 py-2 text-sm text-zinc-400 dark:text-zinc-500 flex items-center gap-2">
+      <div className="px-4 py-3 text-base text-zinc-400 dark:text-zinc-500 flex items-center gap-3">
         <span className="w-1.5 h-1.5 rounded-full bg-green-500 flex-shrink-0" />
         <span className="truncate">{projectName}</span>
       </div>
 
       {/* Other recent projects */}
+      {recentProjects.filter(p => p.name !== projectName).length > 0 && (
+        <div className="px-4 pt-3 pb-1.5 text-base font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider">Recent</div>
+      )}
       {recentProjects
         .filter(p => p.name !== projectName)
+        .slice(0, 4)
         .map((project) => (
           <button
             key={project.path}
             onClick={() => handleProjectClick(project)}
-            className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+            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>
@@ -125,12 +142,23 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
         ))}
 
       {/* Divider */}
-      <div className="border-t border-zinc-200 dark:border-zinc-700 my-1" />
+      <div className="border-t border-zinc-200 dark:border-zinc-700 my-1.5" />
+
+      {/* New Project action */}
+      <button
+        onClick={handleNewProject}
+        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"
+      >
+        <svg className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+        </svg>
+        <span>New Project...</span>
+      </button>
 
       {/* Open Project action */}
       <button
         onClick={handleOpenProject}
-        className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
+        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"
       >
         <svg className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
@@ -145,7 +173,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
       <button
         ref={buttonRef}
         onClick={() => { setError(null); setIsOpen(!isOpen); }}
-        className="px-2.5 py-1 text-sm bg-zinc-100 text-zinc-600 rounded-full border border-zinc-200 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700 dark:hover:bg-zinc-700 transition-colors cursor-pointer flex items-center gap-1"
+        className="px-5 py-1.5 text-base bg-zinc-100 text-zinc-600 rounded-full border-2 border-zinc-200 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700 dark:hover:bg-zinc-700 transition-colors duration-200 ease-out cursor-pointer flex items-center gap-1.5"
       >
         {projectName}
         <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -154,7 +182,7 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
       </button>
 
       {error && (
-        <div className="absolute top-full left-0 mt-1 px-2.5 py-1.5 text-xs text-red-700 bg-red-50 border border-red-200 rounded-lg dark:text-red-400 dark:bg-red-900/20 dark:border-red-800 whitespace-nowrap">
+        <div className="absolute top-full left-0 mt-1 px-3 py-2 text-xs text-red-700 bg-red-50 border-2 border-red-200 rounded-lg dark:text-red-400 dark:bg-red-900/20 dark:border-red-800 whitespace-nowrap">
           {error}
         </div>
       )}

package/apps/dashboard/components/PrototypeTimeline.tsx

@@ -19,30 +19,30 @@ function PrototypeCard({ prototype, isSelected, onSelect, compact }: PrototypeCa
   return (
     <div
       onClick={onSelect}
-      className={`flex bg-white border rounded-lg overflow-hidden cursor-pointer transition-colors ${
-        isSelected ? 'border-blue-500 bg-blue-50' : 'border-zinc-200 hover:border-zinc-400'
+      className={`flex bg-white rounded-lg overflow-hidden cursor-pointer transition-colors duration-200 ease-out ${
+        isSelected ? 'border-2 border-[#819D9F] bg-[#e8f0f0]' : ''
       }`}
     >
       {/* Date column */}
-      <div className="w-12 shrink-0 bg-zinc-100 flex flex-col items-center justify-center py-2 px-1 border-r border-zinc-200">
+      <div className="w-12 shrink-0 bg-zinc-100 flex flex-col items-center justify-center py-3 px-1.5 border-r border-zinc-200">
         <span className="text-base font-semibold text-zinc-900 leading-none">{day}</span>
         <span className="text-[10px] text-zinc-500 uppercase leading-none mt-0.5">{weekday}</span>
       </div>
 
       {/* Content */}
-      <div className="flex-1 py-2 px-3">
-        <div className="flex items-center gap-2">
-          <span className="font-medium text-sm text-zinc-900 truncate">{prototype.title}</span>
+      <div className="flex-1 py-3 px-4">
+        <div className="flex items-center gap-3">
+          <span className="font-medium text-base text-zinc-900 truncate">{prototype.title}</span>
           {prototype.files.length > 1 && (
-            <span className="text-[10px] px-1.5 py-0.5 bg-green-100 text-green-700 rounded-full whitespace-nowrap">
+            <span className="text-[10px] px-2 py-1 bg-green-100 text-green-700 rounded-full whitespace-nowrap">
               {prototype.files.length} opts
             </span>
           )}
         </div>
         {!compact && (
-          <div className="flex items-center gap-2 text-xs">
+          <div className="flex items-center gap-3 text-base">
             {prototype.feature ? (
-              <span className="text-blue-600">#{prototype.feature.id}</span>
+              <span className="text-[#5a7d7f]">#{prototype.feature.id}</span>
             ) : (
               <span className="text-zinc-500">Research</span>
             )}
@@ -66,7 +66,7 @@ function MonthGroup({ month, prototypes, selectedId, onSelect, compact }: MonthG
   return (
     <div className="mb-4">
       {/* Month header */}
-      <div className="flex items-center gap-2 mb-2">
+      <div className="flex items-center gap-3 mb-3">
         <span className="text-[10px] font-semibold text-zinc-500 uppercase tracking-wider">
           {month}
         </span>
@@ -74,7 +74,7 @@ function MonthGroup({ month, prototypes, selectedId, onSelect, compact }: MonthG
       </div>
 
       {/* Prototype cards */}
-      <div className="space-y-1.5">
+      <div className="space-y-2">
         {prototypes.map(prototype => (
           <PrototypeCard
             key={prototype.id}
@@ -125,23 +125,23 @@ function PreviewPanel({ prototype, onClose }: PreviewPanelProps) {
   };
 
   return (
-    <div className="flex flex-col h-full bg-white border border-zinc-200 rounded-lg overflow-hidden">
+    <div className="flex flex-col h-full bg-white rounded-lg overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b border-zinc-200">
+      <div className="flex items-center justify-between p-6 border-b border-zinc-200">
         <div>
           <h3 className="font-semibold text-zinc-900">{prototype.title}</h3>
-          <p className="text-sm text-zinc-500">{selectedFile?.name || prototype.description}</p>
+          <p className="text-base text-zinc-500">{selectedFile?.name || prototype.description}</p>
         </div>
         <div className="flex items-center gap-2">
           <button
             onClick={handleOpen}
-            className="px-3 py-1.5 text-xs bg-zinc-100 border border-zinc-300 rounded text-zinc-700 hover:border-blue-500 hover:text-blue-600 transition-colors"
+            className="px-4 py-2 text-base bg-zinc-100 border border-zinc-300 rounded text-zinc-700 hover:border-[#819D9F] hover:text-[#5a7d7f] transition-colors duration-200 ease-out"
           >
             Open
           </button>
           <button
             onClick={onClose}
-            className="p-2 text-zinc-400 hover:text-zinc-700 transition-colors"
+            className="p-2 text-zinc-400 hover:text-zinc-700 transition-colors duration-200 ease-out"
           >
             <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" />
@@ -152,16 +152,16 @@ function PreviewPanel({ prototype, onClose }: PreviewPanelProps) {
 
       {/* File selector */}
       {prototype.files.length > 1 && (
-        <div className="px-4 py-2 border-b border-zinc-200">
-          <div className="flex flex-wrap gap-2">
+        <div className="px-5 py-3 border-b border-zinc-200">
+          <div className="flex flex-wrap gap-3">
             {prototype.files.map(file => (
               <button
                 key={file.path}
                 onClick={() => setSelectedFile(file)}
-                className={`px-2 py-1 text-xs rounded transition-colors ${
+                className={`px-3 py-1.5 text-base rounded transition-colors duration-200 ease-out ${
                   selectedFile?.path === file.path
-                    ? 'bg-blue-600 text-white'
-                    : 'bg-zinc-100 border border-zinc-300 text-zinc-700 hover:border-blue-500'
+                    ? 'bg-[#819D9F] text-white'
+                    : 'bg-zinc-100 border border-zinc-300 text-zinc-700 hover:border-[#819D9F]'
                 }`}
               >
                 {file.name}
@@ -190,8 +190,8 @@ function PreviewPanel({ prototype, onClose }: PreviewPanelProps) {
         ) : (
           <div className="flex items-center justify-center h-full text-zinc-500">
             <div className="text-center">
-              <p className="mb-2">Cannot preview this file type</p>
-              <p className="text-sm">{selectedFile?.name}</p>
+              <p className="mb-3">Cannot preview this file type</p>
+              <p className="text-base">{selectedFile?.name}</p>
             </div>
           </div>
         )}
@@ -233,9 +233,9 @@ export function PrototypeTimeline({ data }: PrototypeTimelineProps) {
     : null;
 
   return (
-    <div className="flex gap-4">
+    <div className="flex gap-6">
       {/* Timeline list */}
-      <div className={`${selectedPrototype ? 'w-[320px] shrink-0' : 'w-full'} transition-all`}>
+      <div className={`${selectedPrototype ? 'w-[320px] shrink-0' : 'w-full'} transition-[width] duration-200 ease-out`}>
         {months.map(month => (
           <MonthGroup
             key={month}