jettypod 4.4.115 → 4.4.118

package/apps/dashboard/components/KanbanBoard.tsx

@@ -3,7 +3,7 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { useDroppable } from '@dnd-kit/core';
 import type { WorkItem, InFlightItem, KanbanGroup } from '@/lib/db';
 import type { UndoAction } from '@/lib/undoStack';
@@ -57,15 +57,17 @@ interface KanbanCardProps {
   onTitleSave?: (id: number, newTitle: string) => Promise<void>;
   onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
   onReject?: (id: number, reason: string) => Promise<void>;
-  onTriggerClaude?: (id: number, title: string, type: string) => void;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
   hasActiveSession?: boolean;
   onOpenSession?: (id: string) => void;
+  usageAllowed?: boolean;
   // Animation state lifted to board level
   isCompletingAnimation?: boolean;
   onAnimationComplete?: () => void;
+  isHighlighted?: boolean;
 }
 
-function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange, onReject, onTriggerClaude, hasActiveSession, onOpenSession, isCompletingAnimation = false, onAnimationComplete }: KanbanCardProps) {
+function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange, onReject, onTriggerClaude, hasActiveSession, onOpenSession, usageAllowed = true, isCompletingAnimation = false, onAnimationComplete, isHighlighted = false }: KanbanCardProps) {
   const [expanded, setExpanded] = useState(false);
   const [showRejectInput, setShowRejectInput] = useState(false);
   const [rejectReason, setRejectReason] = useState('');
@@ -83,17 +85,16 @@ function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onT
     if (onStatusChange) {
       await onStatusChange(item.id, 'in_progress');
       if (onTriggerClaude) {
-        onTriggerClaude(item.id, item.title, item.type);
+        onTriggerClaude(item.id, item.title, item.type, !!item.conversational, item.description);
       }
     }
   };
 
   const canStart = item.status === 'backlog' || item.status === 'cancelled';
 
-  // A top-level item is reviewable when it's in-flight (in_progress) or in the done column
-  // Non-top-level items (chores/bugs with parents) are not reviewable
-  const isTopLevel = !item.parent_id;
-  const isReviewable = isTopLevel && (item.status === 'in_progress' || item.status === 'done');
+  // An item is reviewable when it has ready_for_review flag set
+  // This applies to kanban-visible items: features, standalone chores/bugs, and items under epics
+  const isReviewable = !!item.ready_for_review;
 
   const handleAccept = async (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -188,7 +189,7 @@ function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onT
 
   const cardStyles = getCardStyles();
 
-  return (
+  const cardContent = (
     <WaveCompletionAnimation isPlaying={isCompletingAnimation} onComplete={onAnimationComplete || (() => {})}>
       <div
         className={`rounded-xl border transition-all duration-200 hover:-translate-y-0.5 ${cardStyles.className}`}
@@ -264,17 +265,6 @@ function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onT
                 </svg>
               </button>
             )}
-            {/* Start button - shown for backlog/cancelled items */}
-            {canStart && onStatusChange && (
-              <button
-                onClick={handleStart}
-                className="px-2 py-0.5 text-xs rounded border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-700 text-zinc-600 dark:text-zinc-400 transition-colors"
-                aria-label="Start work"
-                data-testid={`start-button-${item.id}`}
-              >
-                start
-              </button>
-            )}
             {/* Session indicator - clickable icon to reopen session */}
             {hasActiveSession && (
               <button
@@ -287,16 +277,53 @@ function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onT
                 <SessionIndicatorIcon className="w-4 h-4" />
               </button>
             )}
+            {/* Start button - shown for backlog/cancelled items */}
+            {canStart && onStatusChange && (
+              isHighlighted ? (
+                <motion.button
+                  onClick={handleStart}
+                  className="px-2 py-0.5 text-xs rounded border border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400"
+                  animate={{
+                    backgroundColor: [
+                      'rgba(59, 130, 246, 0)',
+                      'rgba(59, 130, 246, 0.15)',
+                      'rgba(59, 130, 246, 0)',
+                    ],
+                  }}
+                  transition={{
+                    duration: 2,
+                    repeat: Infinity,
+                    ease: 'easeInOut',
+                  }}
+                  aria-label="Start work"
+                  data-testid={`start-button-${item.id}`}
+                >
+                  start
+                </motion.button>
+              ) : (
+                <button
+                  onClick={handleStart}
+                  className="px-2 py-0.5 text-xs rounded border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-700 text-zinc-600 dark:text-zinc-400 transition-colors"
+                  aria-label="Start work"
+                  data-testid={`start-button-${item.id}`}
+                >
+                  start
+                </button>
+              )
+            )}
             {onStatusChange && (
               <CardMenu
                 itemId={item.id}
                 itemTitle={item.title}
                 itemType={item.type}
+                itemDescription={item.description}
+                conversational={!!item.conversational}
                 currentStatus={item.status}
                 onStatusChange={handleStatusChange}
                 onTriggerClaude={onTriggerClaude}
                 hasActiveSession={hasActiveSession}
                 onOpenSession={onOpenSession}
+                usageAllowed={usageAllowed}
               />
             )}
           </div>
@@ -452,6 +479,30 @@ function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onT
       </div>
     </WaveCompletionAnimation>
   );
+
+  if (isHighlighted) {
+    return (
+      <motion.div
+        animate={{
+          boxShadow: [
+            '0 0 0 0px rgba(129, 157, 159, 0)',
+            '0 0 0 3px rgba(129, 157, 159, 0.4)',
+            '0 0 0 0px rgba(129, 157, 159, 0)',
+          ],
+        }}
+        transition={{
+          duration: 2,
+          repeat: Infinity,
+          ease: 'easeInOut',
+        }}
+        className="rounded-xl"
+      >
+        {cardContent}
+      </motion.div>
+    );
+  }
+
+  return cardContent;
 }
 
 // Safe bounds for display_order to prevent overflow
@@ -470,18 +521,30 @@ interface EpicGroupProps {
   onReject?: (id: number, reason: string) => Promise<void>;
   onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
   onOrderChange?: (id: number, newOrder: number) => Promise<void>;
-  onTriggerClaude?: (id: number, title: string, type: string) => void;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
   activeSessions?: Map<string, Session>;
   onOpenSession?: (id: string) => void;
   onError?: (message: string) => void;
+  usageAllowed?: boolean;
   // Animation state lifted to board level
   animatingItemId?: number | null;
   onAnimationComplete?: () => void;
+  isBlank?: boolean;
 }
 
-function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable = true, onTitleSave, onStatusChange, onReject, onEpicAssign, onOrderChange, onTriggerClaude, activeSessions, onOpenSession, onError, animatingItemId, onAnimationComplete }: EpicGroupProps) {
+function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable = true, onTitleSave, onStatusChange, onReject, onEpicAssign, onOrderChange, onTriggerClaude, activeSessions, onOpenSession, onError, usageAllowed = true, animatingItemId, onAnimationComplete, isBlank }: EpicGroupProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const { isDragging, draggedItem, activeEpicZone, activeDropZone, dragPosition, draggedCardHeight, registerEpicDropZone, unregisterEpicDropZone, getCardPositions } = useDragContext();
+  const { isDragging, draggedItem, activeEpicZone, activeDropZone, registerEpicDropZone, unregisterEpicDropZone, getCardPositions } = useDragContext();
+
+  // Local pointer tracking - only this component needs pointer Y for insertion preview.
+  // Using local state avoids re-rendering every context consumer at 60fps.
+  const [pointerY, setPointerY] = useState(0);
+  useEffect(() => {
+    if (!isDragging) return;
+    const onPointerMove = (e: PointerEvent) => { setPointerY(e.clientY); };
+    window.addEventListener('pointermove', onPointerMove);
+    return () => window.removeEventListener('pointermove', onPointerMove);
+  }, [isDragging]);
 
   // Use @dnd-kit's useDroppable for epic zone collision detection
   const zoneId = epicId !== null ? `epic-${epicId}` : undefined;
@@ -517,26 +580,26 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
       return;
     }
 
-    // Get current item IDs from ref
-    const itemIds = new Set(itemsRef.current.map(item => item.id));
+    const currentItems = itemsRef.current.filter(item => item.id !== itemId);
+    if (currentItems.length === 0) {
+      return;
+    }
 
-    // Use cached card positions from registry, filtered to this epic's items
+    // Read fresh positions from DOM (not stale cache)
     const allPositions = getCardPositions();
+    const itemIds = new Set(currentItems.map(item => item.id));
     const cardPositions = allPositions
-      .filter(pos => itemIds.has(pos.id) && pos.id !== itemId)
+      .filter(pos => itemIds.has(pos.id))
       .map(pos => ({
         id: pos.id,
         midY: (pos.rect.top + pos.rect.bottom) / 2,
-      }));
+      }))
+      .sort((a, b) => a.midY - b.midY);
 
-    // Skip reorder if this is the only item in the epic (no other cards to reorder against)
     if (cardPositions.length === 0) {
       return;
     }
 
-    // Sort by Y position
-    cardPositions.sort((a, b) => a.midY - b.midY);
-
     // Find insertion index based on pointer Y
     let insertIndex = cardPositions.length;
     for (let i = 0; i < cardPositions.length; i++) {
@@ -546,15 +609,31 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
       }
     }
 
-    // Calculate new display_order with bounds checking
-    let newOrder = insertIndex * DISPLAY_ORDER_INCREMENT;
-    // Clamp to safe bounds to prevent overflow
+    // Map visual positions to items for display_order midpoint calculation
+    const itemMap = new Map(currentItems.map(item => [item.id, item]));
+    const visualOrder = cardPositions.map(pos => itemMap.get(pos.id)!).filter(Boolean);
+
+    // Calculate proper midpoint display_order between surrounding items
+    let newOrder: number;
+    if (visualOrder.length === 0) {
+      newOrder = DISPLAY_ORDER_INCREMENT;
+    } else if (insertIndex === 0) {
+      const firstOrder = visualOrder[0].display_order ?? visualOrder[0].id;
+      newOrder = firstOrder - DISPLAY_ORDER_INCREMENT;
+    } else if (insertIndex >= visualOrder.length) {
+      const lastOrder = visualOrder[visualOrder.length - 1].display_order ?? visualOrder[visualOrder.length - 1].id;
+      newOrder = lastOrder + DISPLAY_ORDER_INCREMENT;
+    } else {
+      const before = visualOrder[insertIndex - 1].display_order ?? visualOrder[insertIndex - 1].id;
+      const after = visualOrder[insertIndex].display_order ?? visualOrder[insertIndex].id;
+      newOrder = Math.floor((before + after) / 2);
+    }
+
     newOrder = Math.max(MIN_DISPLAY_ORDER, Math.min(MAX_DISPLAY_ORDER, newOrder));
 
     try {
       await onOrderChangeRef.current(itemId, newOrder);
     } catch (error) {
-      // Notify user via callback instead of alert() - items remain in original order
       const errorMessage = error instanceof Error ? error.message : 'Failed to reorder item. Please try again.';
       onErrorRef.current?.(errorMessage);
     }
@@ -620,7 +699,7 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
     // Find which card the pointer is after
     insertAfterItemId = null; // Default to beginning
     for (const pos of groupPositions) {
-      if (dragPosition.y > pos.midY) {
+      if (pointerY > pos.midY) {
         insertAfterItemId = pos.id;
       } else {
         break;
@@ -692,7 +771,7 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
         {/* Placeholder at the beginning (insertAfterItemId === null) */}
         <AnimatePresence>
           {insertAfterItemId === null && (
-            <PlaceholderCard key="placeholder-start" height={draggedCardHeight} />
+            <PlaceholderCard key="placeholder-start" />
           )}
         </AnimatePresence>
         {items.map((item) => (
@@ -706,14 +785,16 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
                 onTriggerClaude={onTriggerClaude}
                 hasActiveSession={activeSessions?.has(String(item.id))}
                 onOpenSession={onOpenSession}
+                usageAllowed={usageAllowed}
                 isCompletingAnimation={animatingItemId === item.id}
                 onAnimationComplete={onAnimationComplete}
+                isHighlighted={isBlank && item.status === 'backlog' && item.title === 'Align on the user journey'}
               />
             </DraggableCard>
             {/* Placeholder after this card */}
             <AnimatePresence>
               {insertAfterItemId === item.id && (
-                <PlaceholderCard key={`placeholder-${item.id}`} height={draggedCardHeight} />
+                <PlaceholderCard key={`placeholder-${item.id}`} />
               )}
             </AnimatePresence>
           </div>
@@ -728,9 +809,10 @@ interface KanbanColumnProps {
   children: React.ReactNode;
   count: number;
   onAdd?: () => void;
+  addDisabled?: boolean;
 }
 
-function KanbanColumn({ title, children, count, onAdd }: KanbanColumnProps) {
+function KanbanColumn({ title, children, count, onAdd, addDisabled }: KanbanColumnProps) {
   const testId = title.toLowerCase().replace(/\s+/g, '-') + '-column';
   return (
     <div className="flex-1 min-w-[300px] max-w-[400px] flex flex-col min-h-0" data-testid={testId}>
@@ -752,9 +834,15 @@ function KanbanColumn({ title, children, count, onAdd }: KanbanColumnProps) {
             {onAdd && (
               <button
                 onClick={onAdd}
-                className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors"
+                disabled={addDisabled}
+                className={`p-1 rounded transition-colors ${
+                  addDisabled
+                    ? 'text-zinc-300 dark:text-zinc-700 cursor-not-allowed'
+                    : 'hover:bg-zinc-200 dark:hover:bg-zinc-800 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300'
+                }`}
                 aria-label={`Add to ${title.toLowerCase()}`}
                 data-testid={`${testId}-add-button`}
+                title={addDisabled ? 'Weekly usage limit reached' : undefined}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -766,7 +854,7 @@ function KanbanColumn({ title, children, count, onAdd }: KanbanColumnProps) {
             </span>
           </div>
         </div>
-        <div className="overflow-y-auto flex-1 min-h-0">
+        <div className="overflow-y-auto flex-1 min-h-0 px-1 -mx-1">
           {children}
         </div>
       </div>
@@ -795,25 +883,30 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
   const handleBacklogReorder = useCallback(async (itemId: number, pointerY: number) => {
     if (!onOrderChangeRef.current) return;
 
-    // Get current backlog item IDs from ref
-    const backlogItemIds = new Set<number>();
+    // Collect all backlog items (excluding dragged item) with their data
+    const backlogItems: WorkItem[] = [];
     for (const group of backlogRef.current.values()) {
       for (const item of group.items) {
-        backlogItemIds.add(item.id);
+        if (item.id !== itemId) {
+          backlogItems.push(item);
+        }
       }
     }
 
-    // Use cached card positions from registry, filtered to backlog items
+    if (backlogItems.length === 0) return;
+
+    // Read fresh positions from DOM (not stale cache)
     const allPositions = getCardPositions();
+    const backlogItemIds = new Set(backlogItems.map(item => item.id));
     const cardPositions = allPositions
-      .filter(pos => backlogItemIds.has(pos.id) && pos.id !== itemId)
+      .filter(pos => backlogItemIds.has(pos.id))
       .map(pos => ({
         id: pos.id,
         midY: (pos.rect.top + pos.rect.bottom) / 2,
-      }));
+      }))
+      .sort((a, b) => a.midY - b.midY);
 
-    // Sort by Y position
-    cardPositions.sort((a, b) => a.midY - b.midY);
+    if (cardPositions.length === 0) return;
 
     // Find insertion index based on pointer Y
     let insertIndex = cardPositions.length;
@@ -824,9 +917,26 @@ function BacklogDropZoneWrapper({ backlog, onStatusChange, onOrderChange, childr
       }
     }
 
-    // Calculate new display_order with bounds checking
-    let newOrder = insertIndex * DISPLAY_ORDER_INCREMENT;
-    // Clamp to safe bounds to prevent overflow
+    // Map visual positions to items for display_order midpoint calculation
+    const itemMap = new Map(backlogItems.map(item => [item.id, item]));
+    const visualOrder = cardPositions.map(pos => itemMap.get(pos.id)!).filter(Boolean);
+
+    // Calculate proper midpoint display_order between surrounding items
+    let newOrder: number;
+    if (visualOrder.length === 0) {
+      newOrder = DISPLAY_ORDER_INCREMENT;
+    } else if (insertIndex === 0) {
+      const firstOrder = visualOrder[0].display_order ?? visualOrder[0].id;
+      newOrder = firstOrder - DISPLAY_ORDER_INCREMENT;
+    } else if (insertIndex >= visualOrder.length) {
+      const lastOrder = visualOrder[visualOrder.length - 1].display_order ?? visualOrder[visualOrder.length - 1].id;
+      newOrder = lastOrder + DISPLAY_ORDER_INCREMENT;
+    } else {
+      const before = visualOrder[insertIndex - 1].display_order ?? visualOrder[insertIndex - 1].id;
+      const after = visualOrder[insertIndex].display_order ?? visualOrder[insertIndex].id;
+      newOrder = Math.floor((before + after) / 2);
+    }
+
     newOrder = Math.max(MIN_DISPLAY_ORDER, Math.min(MAX_DISPLAY_ORDER, newOrder));
 
     await onOrderChangeRef.current(itemId, newOrder);
@@ -859,7 +969,7 @@ interface KanbanBoardProps {
   onReject?: (id: number, reason: string) => Promise<void>;
   onOrderChange?: (id: number, newOrder: number) => Promise<void>;
   onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
-  onTriggerClaude?: (id: number, title: string, type: string) => void;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
   // Multi-session support
   onOpenSession?: (id: string) => void;
   activeSessions?: Map<string, Session>;
@@ -872,12 +982,15 @@ interface KanbanBoardProps {
   onError?: (message: string) => void;
   // Add to backlog
   onAddToBacklog?: () => void;
+  // Usage limits
+  usageAllowed?: boolean;
   // External animation trigger (e.g., from CLI/DB completions detected via WebSocket)
   externalAnimatingItemId?: number | null;
   onExternalAnimationComplete?: () => void;
+  isBlank?: boolean;
 }
 
-export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onReject, onOrderChange, onEpicAssign, onTriggerClaude, onOpenSession, activeSessions, onUndo, onRedo, canUndo, canRedo, onError, onAddToBacklog, externalAnimatingItemId, onExternalAnimationComplete }: KanbanBoardProps) {
+export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onReject, onOrderChange, onEpicAssign, onTriggerClaude, onOpenSession, activeSessions, onUndo, onRedo, canUndo, canRedo, onError, onAddToBacklog, usageAllowed = true, externalAnimatingItemId, onExternalAnimationComplete, isBlank }: KanbanBoardProps) {
   const backlogCount = inFlight.length + Array.from(backlog.values()).reduce((sum, g) => sum + g.items.length, 0);
   const doneCount = Array.from(done.values()).reduce((sum, g) => sum + g.items.length, 0);
 
@@ -1002,7 +1115,7 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
     <DragProvider renderDragOverlay={renderDragOverlay} onRemoveFromEpic={onEpicAssign} onError={onError}>
     <div className="flex gap-4 overflow-x-auto h-full" data-testid="kanban-board">
       {/* Backlog Column */}
-      <KanbanColumn title="Backlog" count={backlogCount} onAdd={onAddToBacklog}>
+      <KanbanColumn title="Backlog" count={backlogCount} onAdd={onAddToBacklog} addDisabled={!usageAllowed}>
         {/* In Flight Section - Drop Zone */}
         <DropZone
           targetStatus="in_progress"
@@ -1033,6 +1146,7 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
                       onTriggerClaude={onTriggerClaude}
                       hasActiveSession={activeSessions?.has(String(item.id))}
                       onOpenSession={onOpenSession}
+                      usageAllowed={usageAllowed}
                       isCompletingAnimation={animatingItemId === item.id}
                       onAnimationComplete={handleAnimationComplete}
                     />
@@ -1077,8 +1191,10 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
                 activeSessions={activeSessions}
                 onOpenSession={onOpenSession}
                 onError={onError}
+                usageAllowed={usageAllowed}
                 animatingItemId={animatingItemId}
                 onAnimationComplete={handleAnimationComplete}
+                isBlank={isBlank}
               />
             ))}
 
@@ -1118,6 +1234,7 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
               activeSessions={activeSessions}
               onOpenSession={onOpenSession}
               onError={onError}
+              usageAllowed={usageAllowed}
             />
           ))}
 

package/apps/dashboard/components/PlaceholderCard.tsx

@@ -2,29 +2,19 @@
 
 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);
-
+export function PlaceholderCard() {
   return (
     <motion.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, rgb(99, 102, 241), 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);
@@ -111,8 +124,12 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
       </div>
 
       {/* Other recent projects */}
+      {recentProjects.filter(p => p.name !== projectName).length > 0 && (
+        <div className="px-3 pt-2 pb-1 text-xs 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}
@@ -127,6 +144,17 @@ export function ProjectSwitcher({ projectName }: ProjectSwitcherProps) {
       {/* Divider */}
       <div className="border-t border-zinc-200 dark:border-zinc-700 my-1" />
 
+      {/* New Project action */}
+      <button
+        onClick={handleNewProject}
+        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"
+      >
+        <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}

package/apps/dashboard/components/RealTimeKanbanWrapper.tsx

@@ -6,6 +6,8 @@ import { useToast } from './Toast';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
 import { useClaudeSession } from '../contexts/ClaudeSessionContext';
 import { useConnectionStatus } from '../contexts/ConnectionStatusContext';
+import { useUsage } from '../contexts/UsageContext';
+import { UpgradeBanner } from './UpgradeBanner';
 import type { InFlightItem, KanbanGroup, WorkItem } from '@/lib/db';
 import { UndoStack, type UndoAction } from '@/lib/undoStack';
 import { getRegistry } from '@/lib/stream-manager-registry';
@@ -22,6 +24,8 @@ interface RealTimeKanbanWrapperProps {
     backlog: [string, KanbanGroup][];
     done: [string, KanbanGroup][];
   };
+  isBlank?: boolean;
+  projectPath?: string;
 }
 
 // Helper to find item by ID in the kanban data
@@ -47,8 +51,9 @@ function findItemById(data: KanbanData, id: number): { item: InFlightItem; statu
 
 // Component uses context providers from AppShell (ToastProvider, ClaudeSessionProvider)
 // DO NOT wrap with duplicate providers - it creates isolated context state
-export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProps) {
+export function RealTimeKanbanWrapper({ initialData, isBlank, projectPath }: RealTimeKanbanWrapperProps) {
   const { showToast } = useToast();
+  const { allowed: usageAllowed } = useUsage();
   const [data, setData] = useState<KanbanData>(() => ({
     inFlight: initialData.inFlight,
     backlog: new Map(initialData.backlog),
@@ -67,8 +72,28 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
     openSession,
     switchSession,
     createAddToBacklogSession,
+    createWelcomeSession,
   } = useClaudeSession();
 
+  // Auto-open welcome session for blank projects (once per project lifetime)
+  const welcomeTriggeredRef = useRef(false);
+  useEffect(() => {
+    if (isBlank && !welcomeTriggeredRef.current) {
+      try {
+        const welcomeKey = `jettypod-welcome-shown-${projectPath || 'default'}`;
+        if (localStorage.getItem(welcomeKey)) return;
+        welcomeTriggeredRef.current = true;
+        localStorage.setItem(welcomeKey, 'true');
+      } catch {
+        // localStorage unavailable (private browsing, full storage) — proceed anyway
+        welcomeTriggeredRef.current = true;
+      }
+      createWelcomeSession().catch((err) => {
+        console.error('[RealTimeKanbanWrapper] Welcome session failed:', err);
+      });
+    }
+  }, [isBlank, createWelcomeSession]);
+
   // Undo/redo stack - created once per component instance
   const [undoStack] = useState(() => new UndoStack());
   const [undoRedoVersion, setUndoRedoVersion] = useState(0); // Force re-render on stack changes
@@ -449,9 +474,9 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
   }, []);
 
   // Claude panel handlers - multi-session support
-  const handleTriggerClaude = useCallback((id: number, title: string, type: string) => {
+  const handleTriggerClaude = useCallback((id: number, title: string, type: string, conversational?: boolean, description?: string | null) => {
     // Use context's openSession - handles existing session check, creation, and streaming
-    openSession(String(id), title, type);
+    openSession(String(id), title, type, conversational, description);
   }, [openSession]);
 
   // Open an existing session (for card icon click)
@@ -484,6 +509,10 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
 
   return (
     <div className="h-full flex flex-col">
+      {/* Usage Limit Banner */}
+      <div className="px-4 pt-2">
+        <UpgradeBanner />
+      </div>
       {/* Status Error Display */}
       {statusError && (
         <div
@@ -519,8 +548,10 @@ export function RealTimeKanbanWrapper({ initialData }: RealTimeKanbanWrapperProp
           canRedo={canRedo}
           onError={handleDragError}
           onAddToBacklog={handleAddToBacklog}
+          usageAllowed={usageAllowed}
           externalAnimatingItemId={externalAnimatingItemId}
           onExternalAnimationComplete={handleExternalAnimationComplete}
+          isBlank={isBlank}
         />
       </div>
       {/* ClaudePanel is rendered by AppShell - DO NOT duplicate here */}