jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/KanbanCard.tsx

@@ -0,0 +1,740 @@
+
+import { useState, useRef, useCallback, memo } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import type { WorkItem } from '@/lib/db';
+import { prefetch } from '@/lib/data-bridge';
+import { EditableTitle } from './EditableTitle';
+import { CardMenu } from './CardMenu';
+import { CopyableId } from './CopyableId';
+import { WaveCompletionAnimation } from './WaveCompletionAnimation';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { MODE_LABELS } from '@/lib/constants';
+import { TypeIcon } from './TypeIcon';
+import { shadow } from '@/lib/shadows';
+
+function formatRejectionTime(isoString: string): string {
+  try {
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays === 1) return 'yesterday';
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  } catch {
+    return '';
+  }
+}
+
+function getModeLabel(item: WorkItem): string {
+  if (!item.mode) return '';
+  const base = MODE_LABELS[item.mode]?.label || item.mode;
+  if (item.current_step && item.total_steps) {
+    return `${base} ${item.current_step}/${item.total_steps}`;
+  }
+  return base;
+}
+
+// Session indicator icon - shows when item has an active Claude session
+function SessionIndicatorIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+    </svg>
+  );
+}
+
+interface RejectionHistoryEntry {
+  round: number;
+  reason: string;
+  at: string;
+}
+
+function RejectionTimeline({ item, allChores, allBugs, isDone }: { item: WorkItem; allChores: WorkItem[]; allBugs: WorkItem[]; isDone: boolean }) {
+  let history: RejectionHistoryEntry[] = [];
+  try {
+    history = item.rejection_history ? JSON.parse(item.rejection_history) : [];
+  } catch {
+    // Corrupt JSON — degrade gracefully, show segments without reasons
+  }
+  const allChildren = [...allChores, ...allBugs];
+
+  // Build timeline segments
+  const segments: Array<{ label: string; round: number | null; reason: string | null; isLatest: boolean; children: WorkItem[] }> = [];
+
+  // Original segment (children with null rejection_round)
+  const originalChildren = allChildren.filter(c => c.rejection_round == null);
+  if (originalChildren.length > 0) {
+    segments.push({ label: 'Original', round: null, reason: null, isLatest: false, children: originalChildren });
+  }
+
+  // Rejection round segments
+  for (let r = 1; r <= (item.rejection_count || 0); r++) {
+    const roundChildren = allChildren.filter(c => c.rejection_round === r);
+    const entry = history.find(h => h.round === r);
+    segments.push({
+      label: `Rejection #${r}`,
+      round: r,
+      reason: entry?.reason || null,
+      isLatest: r === item.rejection_count,
+      children: roundChildren,
+    });
+  }
+
+  return (
+    <div className="relative pl-[18px]">
+      {segments.map((seg, idx) => {
+        const isLast = idx === segments.length - 1;
+        return (
+          <div key={seg.label} className="relative" style={{ paddingBottom: isLast ? 0 : 4 }}>
+            {/* Vertical connector line */}
+            {!isLast && (
+              <div
+                className="absolute border-l-2 border-zinc-200 dark:border-zinc-700"
+                style={{ left: -12, top: 14, bottom: -4 }}
+              />
+            )}
+            {/* Node marker + label */}
+            <div className="relative flex items-center gap-2 py-1">
+              <div
+                className="absolute rounded-full"
+                style={{
+                  left: -16, top: '50%', transform: 'translateY(-50%)',
+                  width: 10, height: 10,
+                  background: seg.round === null ? '#819D9F' : '#ef4444',
+                  border: '2px solid var(--card, #27272a)',
+                  zIndex: 1,
+                  ...(seg.isLatest ? { boxShadow: '0 0 0 3px rgba(239, 68, 68, 0.2)' } : {}),
+                }}
+              />
+              <span className={`text-[11px] font-semibold uppercase tracking-wide ${
+                seg.round === null ? 'text-[#819D9F]' : 'text-red-400 dark:text-red-400'
+              }`}>{seg.label}</span>
+              {seg.reason && (
+                <span className="text-[11px] italic text-zinc-500 dark:text-zinc-500 truncate max-w-[180px]">
+                  {seg.reason}
+                </span>
+              )}
+            </div>
+            {/* Children under this segment */}
+            <div className="py-0.5">
+              {seg.children.map((child) => {
+                const isComplete = child.status === 'done';
+                const isBug = child.type === 'bug';
+                return (
+                  <Link
+                    key={child.id}
+                    to={`/work/${child.id}`}
+                    viewTransition
+                    className={`block py-1.5 px-2.5 text-base rounded transition-colors duration-200 ease-out ${
+                      isComplete
+                        ? 'bg-zinc-100 dark:bg-zinc-800/50'
+                        : 'hover:bg-zinc-100 dark:hover:bg-zinc-700'
+                    }`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <span className={`font-mono text-xs ${isComplete ? 'text-zinc-500' : 'text-zinc-400'}`}>#{child.id}</span>
+                      {isBug && <TypeIcon type="bug" />}
+                      {!isDone && !isBug && child.mode && MODE_LABELS[child.mode] && (
+                        <span className={`px-1 py-0.5 rounded text-[10px] ${MODE_LABELS[child.mode].color}`}>
+                          {getModeLabel(child)}
+                        </span>
+                      )}
+                      <span className={`truncate ${
+                        isComplete ? 'text-zinc-500' : 'text-zinc-700 dark:text-zinc-300'
+                      }`}>
+                        {child.title || <span className="text-zinc-400 italic">(Untitled)</span>}
+                      </span>
+                    </div>
+                  </Link>
+                );
+              })}
+              {seg.children.length === 0 && (
+                <span className="text-xs text-zinc-500 italic pl-2.5">No items</span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export interface KanbanCardProps {
+  item: WorkItem;
+  epicTitle?: string | null;
+  showEpic?: boolean;
+  isInFlight?: 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>;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
+  hasActiveSession?: boolean;
+  onOpenSession?: (id: string) => void;
+  onCloseSession?: (id: string) => void;
+  onRestart?: (id: number) => void;
+  usageAllowed?: boolean;
+  // Animation state lifted to board level
+  isCompletingAnimation?: boolean;
+  onAnimationComplete?: () => void;
+  isHighlighted?: boolean;
+}
+
+export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange, onReject, onTriggerClaude, hasActiveSession, onOpenSession, onCloseSession, onRestart, usageAllowed = true, isCompletingAnimation = false, onAnimationComplete, isHighlighted = false }: KanbanCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [showRejectInput, setShowRejectInput] = useState(false);
+  const [rejectReason, setRejectReason] = useState('');
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [rejectionExpanded, setRejectionExpanded] = useState(false);
+  const navigate = useNavigate();
+
+  const handleOpenSession = (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent card navigation
+    if (onOpenSession) {
+      onOpenSession(String(item.id));
+    }
+  };
+
+  const handleStart = async (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent card navigation
+    if (onStatusChange) {
+      await onStatusChange(item.id, 'in_progress');
+      if (onTriggerClaude) {
+        onTriggerClaude(item.id, item.title, item.type, !!item.conversational, item.description);
+      }
+    }
+  };
+
+  const handleRestart = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onRestart) {
+      onRestart(item.id);
+    }
+  };
+
+  const canStart = item.status === 'backlog' || item.status === 'cancelled';
+
+  // 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();
+    if (onStatusChange) {
+      await onStatusChange(item.id, 'done');
+    }
+    if (onCloseSession) {
+      onCloseSession(String(item.id));
+    }
+  };
+
+  const handleRejectClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowRejectInput(true);
+  };
+
+  const handleRejectConfirm = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onReject && rejectReason.trim()) {
+      await onReject(item.id, rejectReason.trim());
+      setShowRejectInput(false);
+      setRejectReason('');
+    }
+  };
+
+  const handleRejectCancel = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowRejectInput(false);
+    setRejectReason('');
+  };
+
+  // Calculate chores for expandable section
+  const allChores = item.chores || [];
+  const incompleteChores = allChores.filter(c => c.status !== 'done');
+  const hasChores = allChores.length > 0;
+  const hasIncompleteChores = incompleteChores.length > 0;
+
+  // Calculate bugs for expandable section
+  const allBugs = item.bugs || [];
+  const incompleteBugs = allBugs.filter(b => b.status !== 'done');
+  const hasBugs = allBugs.length > 0;
+
+  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCardClick = () => {
+    navigate(`/work/${item.id}`);
+  };
+
+  const handleMouseEnter = useCallback(() => {
+    hoverTimer.current = setTimeout(() => {
+      prefetch.workItem(item.id);
+    }, 100);
+  }, [item.id]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (hoverTimer.current) {
+      clearTimeout(hoverTimer.current);
+      hoverTimer.current = null;
+    }
+  }, []);
+
+  const handleTitleSave = async (id: number, newTitle: string) => {
+    if (onTitleSave) {
+      await onTitleSave(id, newTitle);
+    }
+  };
+
+  // Status changes are now handled by the board-level wrapper that triggers animation
+  const handleStatusChange = async (id: number, newStatus: string) => {
+    if (onStatusChange) {
+      await onStatusChange(id, newStatus);
+    }
+  };
+
+  const isDone = item.status === 'done';
+
+  const cardStyles = {
+    className: 'bg-white dark:bg-zinc-800',
+    boxShadow: shadow.sm,
+    hoverBoxShadow: shadow.lg,
+  };
+
+  const cardContent = (
+    <WaveCompletionAnimation isPlaying={isCompletingAnimation} onComplete={onAnimationComplete || (() => {})}>
+      <div
+        className={`kanban-card rounded-xl overflow-hidden transition-[background-color,opacity] duration-200 ease-out ${cardStyles.className}`}
+        style={{ boxShadow: cardStyles.boxShadow, '--hover-shadow': cardStyles.hoverBoxShadow } as React.CSSProperties}
+        data-testid={`kanban-card-${item.id}`}>
+        <div
+          onClick={handleCardClick}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          className={`block ${isDone ? 'pt-4 px-4 pb-3' : 'p-4'} cursor-pointer`}
+        >
+        <div className="flex items-start gap-3">
+          <span className="text-base flex-shrink-0"><TypeIcon type={item.type} /></span>
+          <div className="flex-1 min-w-0">
+            {isDone ? (
+              /* Compact layout for done cards: ID and title inline, no mode badge */
+              <div className="flex items-start gap-3">
+                <CopyableId id={item.id} title={item.title} type={item.type} />
+                {hasActiveSession && (
+                  <button
+                    onClick={handleOpenSession}
+                    className="p-1 rounded hover:bg-zinc-100 dark:hover:bg-zinc-700 text-[#819D9F] transition-colors duration-200 ease-out"
+                    aria-label="Open active session"
+                    data-testid={`session-indicator-${item.id}`}
+                    title="Open session"
+                  >
+                    <SessionIndicatorIcon className="w-4 h-4" />
+                  </button>
+                )}
+                <span className="text-base font-medium leading-snug text-zinc-900 dark:text-zinc-100">
+                  {item.title || <span className="text-zinc-400 italic">(Untitled)</span>}
+                </span>
+              </div>
+            ) : (
+              /* Standard layout: ID + mode badge on line 1, title below */
+              <>
+                <div className="flex items-start justify-between mb-1.5">
+                  <div className="flex items-center gap-3 flex-wrap">
+                    <CopyableId id={item.id} title={item.title} type={item.type} />
+                    {hasActiveSession && (
+                      <button
+                        onClick={handleOpenSession}
+                        className="p-1 rounded hover:bg-zinc-100 dark:hover:bg-zinc-700 text-[#819D9F] transition-colors duration-200 ease-out"
+                        aria-label="Open active session"
+                        data-testid={`session-indicator-${item.id}`}
+                        title="Open session"
+                      >
+                        <SessionIndicatorIcon className="w-4 h-4" />
+                      </button>
+                    )}
+                    {item.mode && MODE_LABELS[item.mode] && (
+                      <span className={`text-xs px-2 py-1 rounded ${MODE_LABELS[item.mode].color}`}>
+                        {getModeLabel(item)}
+                      </span>
+                    )}
+                  </div>
+                  {isReviewable ? (
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                      {item.type === 'feature' && (
+                        <Button
+                          onClick={(e: React.MouseEvent) => {
+                            e.stopPropagation();
+                            navigate(`/work/${item.id}/proof`);
+                          }}
+                          variant="secondary"
+                          size="xs"
+                          aria-label="Launch QA proof dashboard"
+                          data-testid={`qa-button-${item.id}`}
+                        >
+                          QA
+                        </Button>
+                      )}
+                      {item.status !== 'done' && onStatusChange && (
+                        <Button
+                          onClick={handleAccept}
+                          variant="secondary"
+                          size="xs"
+                          aria-label="Accept work item"
+                          data-testid={`accept-button-${item.id}`}
+                        >
+                          Accept
+                        </Button>
+                      )}
+                      {onReject && (
+                        <Button
+                          onClick={handleRejectClick}
+                          variant="secondary"
+                          size="xs"
+                          aria-label="Reject work item"
+                          data-testid={`reject-button-${item.id}`}
+                        >
+                          Reject
+                        </Button>
+                      )}
+                    </div>
+                  ) : item.rejection_reason && !isDone ? (
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                      {!hasActiveSession && onRestart && (
+                        <Button
+                          onClick={handleRestart}
+                          variant="secondary"
+                          size="xs"
+                          aria-label="Restart work on rejected item"
+                          data-testid={`restart-button-${item.id}`}
+                        >
+                          restart
+                        </Button>
+                      )}
+                    </div>
+                  ) : null}
+                  {canStart && onStatusChange && (
+                    <Button
+                      onClick={handleStart}
+                      variant="secondary"
+                      size="xs"
+                      aria-label="Start work"
+                      data-testid={`start-button-${item.id}`}
+                    >
+                      Start
+                    </Button>
+                  )}
+                </div>
+                <EditableTitle
+                  title={item.title}
+                  itemId={item.id}
+                  onSave={handleTitleSave}
+                  clickToEdit={false}
+                  isEditing={isEditingTitle}
+                  onEditingChange={setIsEditingTitle}
+                />
+              </>
+            )}
+            {showEpic && epicTitle && (() => {
+              const epicId = item.parent_id || item.epic_id;
+              return epicId ? (
+                <Link to={`/work/${epicId}`}
+                  viewTransition
+                  onClick={(e) => e.stopPropagation()}
+                  className="group/epic text-sm text-zinc-400 dark:text-zinc-500 mt-2 flex items-center gap-1.5 hover:text-zinc-600 dark:hover:text-zinc-300"
+                >
+                  <TypeIcon type="epic" className="w-5 h-5 inline" />
+                  <span className="group-hover/epic:underline">{epicTitle}</span>
+                </Link>
+              ) : (
+                <p className="text-sm text-zinc-400 dark:text-zinc-500 mt-2 flex items-center gap-1.5">
+                  <TypeIcon type="epic" className="w-5 h-5 inline" />
+                  <span>{epicTitle}</span>
+                </p>
+              );
+            })()}
+          </div>
+          <div className="flex items-center gap-1.5">
+            {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}
+                onEditName={() => setIsEditingTitle(true)}
+                onUnaccept={item.status === 'done' && onReject ? () => setShowRejectInput(true) : undefined}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Rejection reason input */}
+      {showRejectInput && (
+        <div className="px-4 pb-4 border-t border-zinc-200 dark:border-zinc-700" onClick={(e) => e.stopPropagation()}>
+          <div className="mt-3">
+            <Input
+              type="text"
+              value={rejectReason}
+              onChange={(e) => setRejectReason(e.target.value)}
+              onKeyDown={(e) => {
+                e.stopPropagation();
+                if (e.key === 'Enter' && rejectReason.trim()) {
+                  handleRejectConfirm(e as unknown as React.MouseEvent);
+                }
+                if (e.key === 'Escape') {
+                  handleRejectCancel(e as unknown as React.MouseEvent);
+                }
+              }}
+              placeholder="Rejection reason..."
+              size="sm"
+              error
+              autoFocus
+              data-testid={`reject-reason-input-${item.id}`}
+            />
+            <div className="flex items-center gap-1.5 mt-2">
+              <Button
+                onClick={handleRejectConfirm}
+                disabled={!rejectReason.trim()}
+                variant="destructive"
+                size="sm"
+                data-testid={`reject-confirm-${item.id}`}
+              >
+                Reject
+              </Button>
+              <Button
+                onClick={handleRejectCancel}
+                variant="ghost"
+                size="sm"
+                data-testid={`reject-cancel-${item.id}`}
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* Rejection banner — hidden for done cards */}
+      {item.rejection_reason && !isDone && (() => {
+        let history: RejectionHistoryEntry[] = [];
+        try {
+          history = item.rejection_history ? JSON.parse(item.rejection_history) : [];
+        } catch { /* degrade gracefully */ }
+        const currentRound = item.rejection_count || 1;
+        const hasMultipleRounds = history.length > 1;
+
+        return (
+          <div>
+            <div
+              onClick={(e) => {
+                e.stopPropagation();
+                if (hasMultipleRounds) setRejectionExpanded(!rejectionExpanded);
+              }}
+              className={`bg-red-50 dark:bg-red-950/40 ${hasMultipleRounds ? 'cursor-pointer' : ''}`}
+              style={{ padding: '10px 16px' }}
+              data-testid={`rejection-banner-${item.id}`}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+                <span className="text-red-700 dark:text-red-400" style={{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em' }}>
+                  Rejected
+                </span>
+                <span className="bg-red-100 dark:bg-red-900/40 text-red-600 dark:text-red-400" style={{ fontSize: '11px', padding: '1px 8px', borderRadius: '12px', fontWeight: 600 }}>
+                  Round {currentRound}
+                </span>
+                {hasMultipleRounds && (
+                  <span className="text-red-600 dark:text-red-400" style={{ fontSize: '11px', opacity: 0.5, marginLeft: 'auto' }}>
+                    {rejectionExpanded ? '▲' : '▼'}
+                  </span>
+                )}
+              </div>
+              <div className="text-red-700/75 dark:text-red-400/75" style={{ fontSize: '14px', lineHeight: 1.4 }}>
+                {item.rejection_reason}
+              </div>
+            </div>
+            {/* Expanded stacked history */}
+            {rejectionExpanded && hasMultipleRounds && (
+              <div
+                onClick={(e) => e.stopPropagation()}
+                className="bg-red-50 dark:bg-red-950/40"
+                style={{ padding: '12px 16px' }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '10px' }}>
+                  <span className="text-red-700 dark:text-red-400" style={{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em' }}>
+                    Rejections
+                  </span>
+                  <span className="bg-red-100 dark:bg-red-900/40 text-red-600 dark:text-red-400" style={{ fontSize: '11px', padding: '1px 8px', borderRadius: '12px', fontWeight: 600 }}>
+                    {history.length}
+                  </span>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  {history.map((entry) => {
+                    const isLatest = entry.round === currentRound;
+                    return (
+                      <div key={entry.round} style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
+                        <span
+                          className={isLatest
+                            ? 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-400'
+                            : 'bg-red-100/60 dark:bg-red-900/20 text-red-600/60 dark:text-red-400/50'
+                          }
+                          style={{
+                            fontSize: '11px',
+                            fontWeight: 600,
+                            padding: '2px 8px',
+                            borderRadius: '8px',
+                            flexShrink: 0,
+                            marginTop: '1px',
+                          }}
+                        >
+                          R{entry.round}
+                        </span>
+                        <div>
+                          <div className="text-red-700/75 dark:text-red-400/75" style={{ fontSize: '14px', lineHeight: 1.4 }}>
+                            {entry.reason}
+                          </div>
+                          {entry.at && (
+                            <div className="text-red-600/40 dark:text-red-400/30" style={{ fontSize: '11px', marginTop: '2px' }}>
+                              {formatRejectionTime(entry.at)}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })()}
+      {/* Show expandable section for features with chores or bugs */}
+      {(hasChores || hasBugs) && (
+        <div className={"border-t border-zinc-200 dark:border-zinc-700"}>
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className={`w-full px-4 py-2 flex items-start gap-2 text-base transition-colors duration-200 ease-out ${
+              isDone
+                ? 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-700/50'
+                : 'text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700/50'
+            }`}
+          >
+            <span className="mt-0.5">{expanded ? '▼' : '▶'}</span>
+            <div className="flex flex-col gap-1">
+              {hasChores && (
+                <div className="flex items-center gap-2">
+                  <TypeIcon type="chore" />
+                  <span>
+                    {isDone
+                      ? `${allChores.length === 0 ? 'no' : allChores.length} chore${allChores.length !== 1 ? 's' : ''}`
+                      : `${incompleteChores.length === 0 ? 'no' : incompleteChores.length}${item.mode ? ` ${item.mode} mode` : ''} chore${incompleteChores.length !== 1 ? 's' : ''} left`}
+                  </span>
+                </div>
+              )}
+              {hasBugs && (
+                <div className="flex items-center gap-2">
+                  <TypeIcon type="bug" />
+                  <span>
+                    {isDone
+                      ? `${allBugs.length === 0 ? 'no' : allBugs.length} bug${allBugs.length !== 1 ? 's' : ''}`
+                      : `${incompleteBugs.length === 0 ? 'no' : incompleteBugs.length} bug${incompleteBugs.length !== 1 ? 's' : ''} left`}
+                  </span>
+                </div>
+              )}
+            </div>
+          </button>
+          {expanded && (
+            <div className="px-4 pb-3 space-y-1.5">
+              {item.rejection_count > 0 ? (
+                <RejectionTimeline item={item} allChores={allChores} allBugs={allBugs} isDone={isDone} />
+              ) : (
+                <>
+                  {allChores.map((chore) => {
+                    const isComplete = chore.status === 'done';
+                    return (
+                      <Link
+                        key={chore.id}
+                        to={`/work/${chore.id}`}
+                        viewTransition
+                        className={`block py-1.5 px-3 text-base rounded transition-colors duration-200 ease-out ${
+                          isComplete
+                            ? 'bg-zinc-100 dark:bg-zinc-800/50'
+                            : 'hover:bg-zinc-100 dark:hover:bg-zinc-700'
+                        }`}
+                      >
+                        <div className="flex items-center gap-3">
+                          <span className={`font-mono ${isComplete ? 'text-zinc-500' : 'text-zinc-400'}`}>#{chore.id}</span>
+                          {!isDone && chore.mode && MODE_LABELS[chore.mode] && (
+                            <span className={`px-1 py-0.5 rounded text-[10px] ${MODE_LABELS[chore.mode].color}`}>
+                              {getModeLabel(chore)}
+                            </span>
+                          )}
+                          <span className={`truncate ${
+                            isComplete
+                              ? 'text-zinc-500'
+                              : 'text-zinc-700 dark:text-zinc-300'
+                          }`}>
+                            {chore.title || <span className="text-zinc-400 italic">(Untitled)</span>}
+                          </span>
+                        </div>
+                      </Link>
+                    );
+                  })}
+                  {allBugs.map((bug) => {
+                    const isComplete = bug.status === 'done';
+                    return (
+                      <Link
+                        key={bug.id}
+                        to={`/work/${bug.id}`}
+                        viewTransition
+                        className={`block py-1.5 px-3 text-base rounded transition-colors duration-200 ease-out ${
+                          isComplete
+                            ? 'bg-zinc-100 dark:bg-zinc-800/50'
+                            : 'hover:bg-zinc-100 dark:hover:bg-zinc-700'
+                        }`}
+                      >
+                        <div className="flex items-center gap-3">
+                          <span className={`font-mono ${isComplete ? 'text-zinc-500' : 'text-zinc-400'}`}>#{bug.id}</span>
+                          <TypeIcon type="bug" />
+                          <span className={`truncate ${
+                            isComplete
+                              ? 'text-zinc-500'
+                              : 'text-zinc-700 dark:text-zinc-300'
+                          }`}>
+                            {bug.title || <span className="text-zinc-400 italic">(Untitled)</span>}
+                          </span>
+                        </div>
+                      </Link>
+                    );
+                  })}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      </div>
+    </WaveCompletionAnimation>
+  );
+
+  if (isHighlighted) {
+    return (
+      <div
+        className="rounded-xl"
+        style={{ animation: 'highlight-pulse 2s ease-in-out infinite' }}
+      >
+        {cardContent}
+      </div>
+    );
+  }
+
+  return cardContent;
+});