jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/EpicGroup.tsx

@@ -0,0 +1,359 @@
+import { useCallback, useRef, useEffect, useState, memo } from 'react';
+import { Link } from 'react-router-dom';
+import { useDroppable } from '@dnd-kit/core';
+import type { WorkItem, InFlightItem } from '@/lib/db';
+import { KanbanCard } from './KanbanCard';
+import { useDragContext } from './DragContext';
+import { DraggableCard } from './DraggableCard';
+import { TypeIcon } from './TypeIcon';
+
+// Safe bounds for display_order to prevent overflow
+export const MIN_DISPLAY_ORDER = 0;
+export const MAX_DISPLAY_ORDER = Number.MAX_SAFE_INTEGER - 1000;
+export const DISPLAY_ORDER_INCREMENT = 10;
+
+export interface EpicGroupProps {
+  epicId: number | null;
+  epicTitle: string | null;
+  items: WorkItem[];
+  isInFlight?: boolean;
+  inFlightItems?: InFlightItem[];
+  isDraggable?: boolean;
+  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>;
+  onRestart?: (id: number) => void;
+  onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
+  onOrderChange?: (id: number, newOrder: number) => Promise<void>;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
+  activeSessionIds?: Set<string>;
+  onOpenSession?: (id: string) => void;
+  onCloseSession?: (id: string) => void;
+  onError?: (message: string) => void;
+  usageAllowed?: boolean;
+  // Animation state lifted to board level
+  animatingItemId?: number | null;
+  onAnimationComplete?: () => void;
+}
+
+export const EpicGroup = memo(function EpicGroup({ epicId, epicTitle, items, isInFlight = false, inFlightItems, isDraggable = true, onTitleSave, onStatusChange, onReject, onRestart, onEpicAssign, onOrderChange, onTriggerClaude, activeSessionIds, onOpenSession, onCloseSession, onError, usageAllowed = true, animatingItemId, onAnimationComplete }: EpicGroupProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { isDragging, draggedItem, activeEpicZone, activeDropZone, registerEpicDropZone, unregisterEpicDropZone, getCardPositions, pointerPositionRef } = useDragContext();
+
+  // Use @dnd-kit's useDroppable for epic zone collision detection
+  const zoneId = epicId !== null ? `epic-${epicId}` : undefined;
+  const { setNodeRef } = useDroppable({
+    id: zoneId || 'ungrouped',
+    disabled: epicId === null, // Don't use droppable for ungrouped section
+    data: { epicId },
+  });
+
+  // Combine refs
+  const setRefs = useCallback((node: HTMLDivElement | null) => {
+    if (epicId !== null) {
+      setNodeRef(node);
+    }
+    (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+  }, [epicId, setNodeRef]);
+
+  // Use ref for items to avoid re-registering drop zone when items change
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+
+  // Use ref for callbacks to keep drop zone registration stable
+  const onOrderChangeRef = useRef(onOrderChange);
+  onOrderChangeRef.current = onOrderChange;
+
+  // Use ref for error handler to keep reorder handler stable
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+
+  // Stable reorder handler that reads from refs
+  const handleEpicReorder = useCallback(async (itemId: number, pointerY: number) => {
+    if (!onOrderChangeRef.current) {
+      return;
+    }
+
+    const currentItems = itemsRef.current.filter(item => item.id !== itemId);
+    if (currentItems.length === 0) {
+      return;
+    }
+
+    // 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))
+      .map(pos => ({
+        id: pos.id,
+        midY: (pos.rect.top + pos.rect.bottom) / 2,
+      }))
+      .sort((a, b) => a.midY - b.midY);
+
+    if (cardPositions.length === 0) {
+      return;
+    }
+
+    // Find insertion index based on pointer Y
+    let insertIndex = cardPositions.length;
+    for (let i = 0; i < cardPositions.length; i++) {
+      if (pointerY < cardPositions[i].midY) {
+        insertIndex = i;
+        break;
+      }
+    }
+
+    // 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.
+    // Fallback uses id * INCREMENT to match the sort comparator and give proper gaps.
+    let newOrder: number;
+    if (visualOrder.length === 0) {
+      newOrder = DISPLAY_ORDER_INCREMENT;
+    } else if (insertIndex === 0) {
+      const firstOrder = visualOrder[0].display_order ?? visualOrder[0].id * DISPLAY_ORDER_INCREMENT;
+      newOrder = firstOrder - DISPLAY_ORDER_INCREMENT;
+    } else if (insertIndex >= visualOrder.length) {
+      const lastOrder = visualOrder[visualOrder.length - 1].display_order ?? visualOrder[visualOrder.length - 1].id * DISPLAY_ORDER_INCREMENT;
+      newOrder = lastOrder + DISPLAY_ORDER_INCREMENT;
+    } else {
+      const before = visualOrder[insertIndex - 1].display_order ?? visualOrder[insertIndex - 1].id * DISPLAY_ORDER_INCREMENT;
+      const after = visualOrder[insertIndex].display_order ?? visualOrder[insertIndex].id * DISPLAY_ORDER_INCREMENT;
+      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) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to reorder item. Please try again.';
+      onErrorRef.current?.(errorMessage);
+    }
+  }, [getCardPositions]);
+
+  // Register as epic drop zone - stable registration that doesn't change with items
+  useEffect(() => {
+    if (!containerRef.current || !onEpicAssign || epicId === null) return;
+
+    const zoneId = `epic-${epicId}`;
+    registerEpicDropZone(zoneId, {
+      epicId,
+      element: containerRef.current,
+      onEpicAssign,
+      onReorder: handleEpicReorder,
+    });
+
+    return () => {
+      unregisterEpicDropZone(zoneId);
+    };
+  }, [epicId, onEpicAssign, handleEpicReorder, registerEpicDropZone, unregisterEpicDropZone]);
+
+  // Check if this epic zone is the active drop target
+  const isActiveTarget = activeEpicZone === `epic-${epicId}`;
+
+  // Check if the dragged item is from a different epic or same epic
+  const draggedItemEpicId = draggedItem ? (draggedItem.parent_id || draggedItem.epic_id) : null;
+  const isDifferentEpic = isDragging && draggedItem && draggedItemEpicId !== epicId;
+  const isSameEpic = isDragging && draggedItem && draggedItemEpicId === epicId;
+
+  // Show highlight when dragging an item from different epic over this group (indigo)
+  const showHighlight = isActiveTarget && isDifferentEpic;
+  // Show reorder highlight when dragging within same epic (purple)
+  const showReorderHighlight = isActiveTarget && isSameEpic;
+
+  // For ungrouped section (epicId === null)
+  const isUngroupedSection = epicId === null;
+  // Check if cursor is over this ungrouped section (not over any epic zone, but over backlog drop zone)
+  const isOverUngroupedSection = isUngroupedSection && !activeEpicZone && activeDropZone;
+
+  // Render the ungrouped zone when dragging from an epic (provides drop target), but only highlight when cursor is over it
+  const shouldRenderUngroupedZone = isUngroupedSection && isDragging && draggedItemEpicId !== null;
+  const showRemoveFromEpicZone = isOverUngroupedSection && isDragging && draggedItemEpicId !== null;
+
+  // Show reorder for ungrouped section when dragging an ungrouped card and cursor is over it
+  const showUngroupedReorder = isOverUngroupedSection && isDragging && draggedItemEpicId === null;
+
+  // Insertion preview — tracks pointer position via rAF loop so the line
+  // moves continuously even when DragContext change guards suppress re-renders.
+  const showPreview = (showReorderHighlight || showRemoveFromEpicZone || showHighlight || showUngroupedReorder) && draggedItem;
+  const [insertAfterItemId, setInsertAfterItemId] = useState<number | null | undefined>(undefined);
+
+  useEffect(() => {
+    if (!showPreview || !draggedItem) {
+      setInsertAfterItemId(undefined);
+      return;
+    }
+
+    // Build item ID set once — items array is stable during a drag
+    const itemIds = new Set(items.map(item => item.id));
+    const dragId = draggedItem.id;
+
+    let rafId: number;
+    let lastTickTime = 0;
+    // Reusable array to avoid allocations per frame
+    const groupPositions: Array<{ id: number; midY: number }> = [];
+
+    const tick = () => {
+      const now = performance.now();
+      // Throttle to ~100ms — fast enough for smooth preview, avoids layout
+      // thrashing on slower hardware (Intel Macs).
+      if (now - lastTickTime < 100) {
+        rafId = requestAnimationFrame(tick);
+        return;
+      }
+      lastTickTime = now;
+
+      const allPositions = getCardPositions();
+      groupPositions.length = 0;
+      for (const pos of allPositions) {
+        if (itemIds.has(pos.id) && pos.id !== dragId) {
+          groupPositions.push({ id: pos.id, midY: (pos.rect.top + pos.rect.bottom) / 2 });
+        }
+      }
+      groupPositions.sort((a, b) => a.midY - b.midY);
+
+      const currentPointerY = pointerPositionRef.current.y;
+      let newInsert: number | null = null;
+      for (const pos of groupPositions) {
+        if (currentPointerY > pos.midY) {
+          newInsert = pos.id;
+        } else {
+          break;
+        }
+      }
+
+      setInsertAfterItemId(prev => prev === newInsert ? prev : newInsert);
+      rafId = requestAnimationFrame(tick);
+    };
+
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, [showPreview, draggedItem, items, getCardPositions, pointerPositionRef]);
+
+  if (items.length === 0 && !showHighlight && !showReorderHighlight && !shouldRenderUngroupedZone) return null;
+
+  // Standalone done items (single item, no epic) use tighter spacing
+  const isStandaloneItem = !epicTitle && items.length === 1;
+
+  return (
+    <div
+      ref={setRefs}
+      className={`${isStandaloneItem ? 'mb-2' : 'mb-6 p-3 -mx-3'} rounded-lg transition-[color,background-color] duration-200 ease-out ${
+        showHighlight
+          ? 'ring-2 ring-[#819D9F] bg-[#E8EEEF]/50 dark:bg-[#819D9F]/20'
+          : showReorderHighlight
+          ? 'ring-2 ring-[#E3D985] bg-[#F9F7E8]/50 dark:bg-[#E3D985]/20'
+          : showRemoveFromEpicZone
+          ? 'ring-2 ring-[#E57A44] bg-[#FCEEE6]/50 dark:bg-[#E57A44]/20'
+          : ''
+      }`}
+      data-epic-id={epicId}
+    >
+      {epicTitle && (
+        <div className="flex items-center gap-3 mb-3">
+          <Link
+            to={`/work/${epicId}`}
+            viewTransition
+            className="group/epic flex items-center gap-1.5 text-base font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
+          >
+            <TypeIcon type="epic" />
+            <span className="group-hover/epic:underline">{epicTitle}</span>
+          </Link>
+          {isInFlight && (
+            <span
+              className="relative group/inflight text-xs px-2 py-1 rounded bg-[#e8f0f0] text-[#5a7d7f] dark:bg-[#819D9F]/20 dark:text-[#a3bfc0] cursor-default"
+            >
+              in flight
+              {inFlightItems && inFlightItems.length > 0 && (
+                <span className="pointer-events-none absolute left-1/2 -translate-x-1/2 top-full mt-2 z-50 hidden group-hover/inflight:block w-max max-w-xs">
+                  <span className="block rounded-lg bg-zinc-800 dark:bg-zinc-700 text-zinc-100 text-xs px-3 py-2 shadow-lg">
+                    {inFlightItems.map(item => (
+                      <span key={item.id} className="flex items-center gap-1 py-0.5 truncate">
+                        <TypeIcon type={item.type} /> {item.title}
+                      </span>
+                    ))}
+                  </span>
+                </span>
+              )}
+            </span>
+          )}
+          {showHighlight && (
+            <span className="text-xs px-2 py-1 rounded bg-[#E8EEEF] text-[#4A6365] dark:bg-[#819D9F]/20 dark:text-[#819D9F]">
+              drop to assign
+            </span>
+          )}
+          {showReorderHighlight && (
+            <span className="text-xs px-2 py-1 rounded bg-[#F9F7E8] text-[#8B7D2F] dark:bg-[#E3D985]/20 dark:text-[#E3D985]">
+              reorder
+            </span>
+          )}
+        </div>
+      )}
+      {/* Ungrouped section header - shown when dragging from epic */}
+      {isUngroupedSection && showRemoveFromEpicZone && items.length === 0 && (
+        <div className="flex items-center gap-3 py-4">
+          <span className="text-base font-medium text-[#E57A44] dark:text-[#E57A44]">
+            Drop here to remove from epic
+          </span>
+        </div>
+      )}
+      {isUngroupedSection && items.length > 0 && isDraggable && showRemoveFromEpicZone && (
+        <div className="flex items-center gap-3 mb-3">
+          <span className="text-xs px-2 py-1 rounded bg-[#FCEEE6] text-[#9E4A1E] dark:bg-[#E57A44]/20 dark:text-[#E57A44]">
+            drop to remove from epic
+          </span>
+        </div>
+      )}
+      <div className="space-y-3">
+        {items.map((item, index) => (
+          <div key={item.id}>
+            {/* CSS insertion indicator — replaces AnimatePresence+PlaceholderCard for less overhead */}
+            {index === 0 && insertAfterItemId === null && (
+              <div
+                data-testid="drag-placeholder"
+                style={{
+                  height: 3,
+                  borderRadius: 2,
+                  background: 'linear-gradient(90deg, transparent, #819D9F, transparent)',
+                  margin: '2px 8px 8px',
+                }}
+              />
+            )}
+            <DraggableCard item={item} disabled={!isDraggable}>
+              <KanbanCard
+                item={item}
+                onTitleSave={onTitleSave}
+                onStatusChange={onStatusChange}
+                onReject={onReject}
+                onRestart={onRestart}
+                onTriggerClaude={onTriggerClaude}
+                hasActiveSession={activeSessionIds?.has(String(item.id))}
+                onOpenSession={onOpenSession}
+                onCloseSession={onCloseSession}
+                usageAllowed={usageAllowed}
+                isCompletingAnimation={animatingItemId === item.id}
+                onAnimationComplete={onAnimationComplete}
+                isHighlighted={false}
+              />
+            </DraggableCard>
+            {/* CSS insertion indicator after this card */}
+            {insertAfterItemId === item.id && (
+              <div
+                data-testid="drag-placeholder"
+                style={{
+                  height: 3,
+                  borderRadius: 2,
+                  background: 'linear-gradient(90deg, transparent, #819D9F, transparent)',
+                  margin: '8px 8px 2px',
+                }}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/apps/dashboard/components/GateCard.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState } from 'react';
 import type { ClaudeMessage } from '../lib/session-stream-manager';
@@ -6,6 +5,7 @@ import { GateChoiceCard } from './GateChoiceCard';
 import type { ChoiceOption } from './GateChoiceCard';
 import { ModeStartCard, isModeStartGate } from './ModeStartCard';
 import { TipCard } from './TipCard';
+import { TypeIcon } from './TypeIcon';
 
 // Gate display configuration matching JettyPod design system
 const GATE_CONFIG: Record<string, {
@@ -90,11 +90,11 @@ const GATE_CONFIG: Record<string, {
     label: 'Saving Changes',
     bg: 'bg-white',
     darkBg: 'dark:bg-zinc-800',
-    border: 'border-blue-200',
-    darkBorder: 'dark:border-blue-800',
+    border: 'border-[#819D9F]/30',
+    darkBorder: 'dark:border-[#819D9F]/30',
     text: 'text-zinc-700',
     darkText: 'dark:text-zinc-300',
-    fileMono: 'text-blue-600',
+    fileMono: 'text-[#5a7d7f]',
   },
   'complete': {
     emoji: '✨',
@@ -118,6 +118,17 @@ const GATE_CONFIG: Record<string, {
     darkText: 'dark:text-zinc-300',
     fileMono: 'text-indigo-600',
   },
+  'work-item-card': {
+    emoji: '📋',
+    label: 'Added to Backlog',
+    bg: 'bg-white',
+    darkBg: 'dark:bg-zinc-800',
+    border: 'border-emerald-200',
+    darkBorder: 'dark:border-emerald-800',
+    text: 'text-zinc-700',
+    darkText: 'dark:text-zinc-300',
+    fileMono: 'text-emerald-600',
+  },
   'tip': {
     emoji: '💡',
     label: 'Tip',
@@ -129,6 +140,17 @@ const GATE_CONFIG: Record<string, {
     darkText: 'dark:text-zinc-300',
     fileMono: 'text-teal-600',
   },
+  'rejection': {
+    emoji: '❌',
+    label: 'Work Rejected',
+    bg: 'bg-red-50',
+    darkBg: 'dark:bg-red-900/20',
+    border: 'border-red-200',
+    darkBorder: 'dark:border-red-800',
+    text: 'text-zinc-700',
+    darkText: 'dark:text-zinc-300',
+    fileMono: 'text-red-600',
+  },
 };
 
 const DEFAULT_CONFIG = {
@@ -143,9 +165,7 @@ const DEFAULT_CONFIG = {
   fileMono: 'text-zinc-500',
 };
 
-// Multi-layer shadow matching kanban card elevation
-const CARD_SHADOW = '0 1px 2px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.03), 0 4px 8px rgba(0,0,0,0.02)';
-const CARD_SHADOW_ACTIVE = '0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.03)';
+import { shadow } from '@/lib/shadows';
 
 /**
  * Render a human-friendly description based on gate type and data
@@ -163,7 +183,8 @@ function getGateDescription(gateType: string, data: Record<string, unknown>): st
       };
       return routeLabels[route || ''] || `Routing to ${route || 'workflow'}`;
     }
-    case 'work-created': {
+    case 'work-created':
+    case 'work-item-card': {
       const title = data.title as string | undefined;
       const id = data.id as number | undefined;
       return title ? `#${id || '?'} ${title}` : 'Work item created';
@@ -195,6 +216,10 @@ function getGateDescription(gateType: string, data: Record<string, unknown>): st
       const question = data.question as string | undefined;
       return question || 'A decision is needed';
     }
+    case 'rejection': {
+      const reason = data.reason as string | undefined;
+      return reason || 'Work was rejected';
+    }
     default:
       return (data.message as string) || gateType;
   }
@@ -205,9 +230,10 @@ interface GateCardProps {
   isLatest?: boolean;
   onAnswerQuestion?: (optionId: string, optionLabel: string) => void;
   answeredQuestionId?: string | null;
+  onStartWorkItem?: (id: number, title: string, type: string) => void;
 }
 
-export function GateCard({ message, isLatest = false, onAnswerQuestion, answeredQuestionId }: GateCardProps) {
+export function GateCard({ message, isLatest = false, onAnswerQuestion, answeredQuestionId, onStartWorkItem }: GateCardProps) {
   const gateType = message.gateType || 'unknown';
   const gateData = message.gateData || {};
   const config = GATE_CONFIG[gateType] || DEFAULT_CONFIG;
@@ -228,6 +254,42 @@ export function GateCard({ message, isLatest = false, onAnswerQuestion, answered
     return <TipCard tipId={tipId} icon={icon} title={title} body={body} />;
   }
 
+  // Work item card gates render as mini kanban cards with Start button
+  if (gateType === 'work-item-card') {
+    const itemId = gateData.id as number;
+    const itemTitle = gateData.title as string;
+    const itemType = (gateData.type as string) || 'feature';
+    return (
+      <div
+        className="bg-white dark:bg-zinc-800 border-2 border-emerald-200 dark:border-emerald-800 rounded-xl p-4 transition-shadow duration-200 ease-out"
+        style={{ boxShadow: shadow.sm }}
+        data-testid="gate-work-item-card"
+      >
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-3 min-w-0">
+            <span className="text-base flex-shrink-0"><TypeIcon type={itemType} /></span>
+            <div className="min-w-0">
+              <span className="text-xs font-medium text-zinc-400 dark:text-zinc-500">
+                #{itemId} · {itemType}
+              </span>
+              <p className="text-sm font-semibold text-zinc-800 dark:text-zinc-200 truncate">
+                {itemTitle}
+              </p>
+            </div>
+          </div>
+          {onStartWorkItem && (
+            <button
+              onClick={() => onStartWorkItem(itemId, itemTitle, itemType)}
+              className="flex-shrink-0 px-3 py-1.5 text-xs font-medium rounded-lg bg-[#819D9F] hover:bg-[#6b8587] text-white transition-colors duration-150"
+            >
+              Start
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   // Question gates render as interactive choice cards
   if (gateType === 'question') {
     const question = (gateData.question as string) || 'A decision is needed';
@@ -259,24 +321,24 @@ export function GateCard({ message, isLatest = false, onAnswerQuestion, answered
     <div
       className={`
         ${config.bg} ${config.darkBg}
-        border ${config.border} ${config.darkBorder}
-        rounded-xl p-3 transition-all duration-200
-        ${isLatest ? 'ring-2 ring-blue-400/50 ring-offset-1' : ''}
+        border-2 ${config.border} ${config.darkBorder}
+        rounded-xl p-4 transition-shadow duration-200 ease-out
+        ${isLatest ? 'ring-2 ring-[#819D9F]/50 ring-offset-1' : ''}
       `}
-      style={{ boxShadow: isLatest ? CARD_SHADOW_ACTIVE : CARD_SHADOW }}
+      style={{ boxShadow: isLatest ? shadow.md : shadow.sm }}
       data-testid={`gate-card-${gateType}`}
     >
-      <div className="flex items-start gap-3">
+      <div className="flex items-start gap-4">
         <span className="text-base flex-shrink-0 mt-0.5">{config.emoji}</span>
         <div className="flex-1 min-w-0">
-          <span className={`text-xs font-semibold ${config.text} ${config.darkText}`}>
+          <span className={`text-base font-semibold ${config.text} ${config.darkText}`}>
             {config.label}
           </span>
-          <p className={`text-sm mt-0.5 ${config.text} ${config.darkText}`}>
+          <p className={`text-base mt-1 ${config.text} ${config.darkText}`}>
             {description}
           </p>
           {hasFiles && (
-            <div className="mt-2 space-y-0.5">
+            <div className="mt-3 space-y-1">
               {(gateData.files as string[]).map((file, i) => (
                 <div key={i} className={`text-xs font-mono truncate ${config.fileMono}`}>
                   {file}

package/apps/dashboard/components/GateChoiceCard.tsx

@@ -1,10 +1,7 @@
-'use client';
 
 import { useState } from 'react';
 
-// Multi-layer shadow matching kanban card system
-const CARD_SHADOW = '0 1px 2px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.03), 0 4px 8px rgba(0,0,0,0.02)';
-const CARD_SHADOW_HOVER = '0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.03), 0 12px 24px rgba(129,157,159,0.08)';
+import { shadow } from '@/lib/shadows';
 
 export interface ChoiceOption {
   id: string;
@@ -32,22 +29,22 @@ export function GateChoiceCard({
 
   return (
     <div
-      className="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-3 transition-all duration-200"
-      style={{ boxShadow: CARD_SHADOW }}
+      className="bg-white dark:bg-zinc-800 rounded-xl p-4 transition-shadow duration-200 ease-out"
+      style={{ boxShadow: shadow.sm }}
       data-testid="gate-choice-card"
     >
-      <div className="flex items-start gap-3">
+      <div className="flex items-start gap-4">
         <span className="text-base flex-shrink-0 mt-0.5">💬</span>
         <div className="flex-1 min-w-0">
-          <span className="text-xs font-semibold text-zinc-700 dark:text-zinc-300">
+          <span className="text-base font-semibold text-zinc-700 dark:text-zinc-300">
             Input Needed
           </span>
-          <p className="text-sm mt-0.5 text-zinc-700 dark:text-zinc-300">
+          <p className="text-base mt-1 text-zinc-700 dark:text-zinc-300">
             {question}
           </p>
 
           {/* Option cards */}
-          <div className="mt-3 space-y-2">
+          <div className="mt-4 space-y-3">
             {options.map((option) => {
               const isSelected = selectedId === option.id;
               const isHovered = hoveredId === option.id;
@@ -60,35 +57,35 @@ export function GateChoiceCard({
                   onMouseLeave={() => setHoveredId(null)}
                   disabled={disabled && !isSelected}
                   className={`
-                    w-full text-left rounded-xl border p-3 transition-all duration-200
+                    w-full text-left rounded-xl border-2 p-4 transition-[color,background-color,border-color] duration-200 ease-out
                     ${isSelected
-                      ? 'border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/20 ring-2 ring-blue-400/30'
+                      ? 'border-[#819D9F] dark:border-[#819D9F] bg-[#e8f0f0] dark:bg-[#819D9F]/20 ring-2 ring-[#819D9F]/30'
                       : 'border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-600'
                     }
                     ${disabled && !isSelected ? 'opacity-50 cursor-default' : 'cursor-pointer'}
                     ${!disabled && !isSelected ? 'hover:-translate-y-0.5' : ''}
                   `}
                   style={{
-                    boxShadow: isSelected ? CARD_SHADOW_HOVER : isHovered && !disabled ? CARD_SHADOW_HOVER : CARD_SHADOW,
+                    boxShadow: isSelected ? shadow.lg : isHovered && !disabled ? shadow.lg : shadow.sm,
                   }}
                   data-testid={`choice-option-${option.id}`}
                 >
-                  <div className="flex items-start gap-3">
+                  <div className="flex items-start gap-4">
                     {option.emoji && (
                       <span className="text-base flex-shrink-0">{option.emoji}</span>
                     )}
                     <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className={`text-sm font-medium ${isSelected ? 'text-blue-700 dark:text-blue-300' : 'text-zinc-900 dark:text-zinc-100'}`}>
+                      <div className="flex items-center gap-3">
+                        <span className={`text-base font-medium ${isSelected ? 'text-[#5a7d7f] dark:text-[#a3bfc0]' : 'text-zinc-900 dark:text-zinc-100'}`}>
                           {option.label}
                         </span>
                         {isSelected && (
-                          <svg className="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <svg className="w-4 h-4 text-[#819D9F] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                           </svg>
                         )}
                       </div>
-                      <p className={`text-xs mt-0.5 ${isSelected ? 'text-blue-600/70 dark:text-blue-400/70' : 'text-zinc-500 dark:text-zinc-400'}`}>
+                      <p className={`text-base mt-1 ${isSelected ? 'text-[#5a7d7f]/70 dark:text-[#a3bfc0]/70' : 'text-zinc-500 dark:text-zinc-400'}`}>
                         {option.description}
                       </p>
                     </div>