jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/KanbanCard.tsx

@@ -1,10 +1,8 @@
-'use client';
 
-import { useState, memo } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { m } from 'framer-motion';
+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';
@@ -15,6 +13,26 @@ 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;
@@ -33,6 +51,122 @@ function SessionIndicatorIcon({ className }: { className?: string }) {
   );
 }
 
+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;
@@ -58,7 +192,8 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
   const [showRejectInput, setShowRejectInput] = useState(false);
   const [rejectReason, setRejectReason] = useState('');
   const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const router = useRouter();
+  const [rejectionExpanded, setRejectionExpanded] = useState(false);
+  const navigate = useNavigate();
 
   const handleOpenSession = (e: React.MouseEvent) => {
     e.stopPropagation(); // Prevent card navigation
@@ -131,10 +266,25 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
   const incompleteBugs = allBugs.filter(b => b.status !== 'done');
   const hasBugs = allBugs.length > 0;
 
+  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const handleCardClick = () => {
-    router.push(`/work/${item.id}`);
+    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);
@@ -150,27 +300,23 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
 
   const isDone = item.status === 'done';
 
-  const getCardStyles = () => {
-    return {
-      className: 'bg-white dark:bg-zinc-800',
-      boxShadow: shadow.sm,
-      hoverBoxShadow: shadow.lg,
-    };
+  const cardStyles = {
+    className: 'bg-white dark:bg-zinc-800',
+    boxShadow: shadow.sm,
+    hoverBoxShadow: shadow.lg,
   };
 
-  const cardStyles = getCardStyles();
-
   const cardContent = (
     <WaveCompletionAnimation isPlaying={isCompletingAnimation} onComplete={onAnimationComplete || (() => {})}>
       <div
-        className={`rounded-xl overflow-hidden transition-[color,background-color,border-color,box-shadow,transform,translate,opacity] duration-200 ease-out hover:-translate-y-0.5 ${cardStyles.className}`}
-        style={{ boxShadow: cardStyles.boxShadow }}
-        onMouseEnter={(e) => { e.currentTarget.style.boxShadow = cardStyles.hoverBoxShadow; }}
-        onMouseLeave={(e) => { e.currentTarget.style.boxShadow = cardStyles.boxShadow; }}
+        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}
-          className="block p-4 cursor-pointer"
+          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>
@@ -190,7 +336,7 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
                     <SessionIndicatorIcon className="w-4 h-4" />
                   </button>
                 )}
-                <span className="text-base font-medium text-zinc-900 dark:text-zinc-100">
+                <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>
@@ -219,6 +365,20 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
                   </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}
@@ -244,12 +404,6 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
                     </div>
                   ) : item.rejection_reason && !isDone ? (
                     <div className="flex items-center gap-1.5 flex-shrink-0">
-                      <span
-                        className="text-xs px-2 py-1 rounded bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
-                        data-testid={`rejected-badge-${item.id}`}
-                      >
-                        Rejected
-                      </span>
                       {!hasActiveSession && onRestart && (
                         <Button
                           onClick={handleRestart}
@@ -288,8 +442,8 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
             {showEpic && epicTitle && (() => {
               const epicId = item.parent_id || item.epic_id;
               return epicId ? (
-                <Link
-                  href={`/work/${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"
                 >
@@ -370,15 +524,98 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
           </div>
         </div>
       )}
-      {/* Rejected indicator */}
-      {item.rejection_reason && (
-        <div className="px-4 pb-3 border-t border-red-200 dark:border-red-800">
-          <div className="mt-2 flex items-start gap-2 text-base text-red-600 dark:text-red-400">
-            <span className="flex-shrink-0">⚠️</span>
-            <span className="italic">{item.rejection_reason}</span>
+      {/* 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>
-        </div>
-      )}
+        );
+      })()}
       {/* Show expandable section for features with chores or bugs */}
       {(hasChores || hasBugs) && (
         <div className={"border-t border-zinc-200 dark:border-zinc-700"}>
@@ -416,62 +653,70 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
           </button>
           {expanded && (
             <div className="px-4 pb-3 space-y-1.5">
-              {allChores.map((chore) => {
-                const isComplete = chore.status === 'done';
-                return (
-                  <Link
-                    key={chore.id}
-                    href={`/work/${chore.id}`}
-                    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}
-                    href={`/work/${bug.id}`}
-                    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>
-                );
-              })}
+              {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>
@@ -482,23 +727,12 @@ export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic =
 
   if (isHighlighted) {
     return (
-      <m.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',
-        }}
+      <div
         className="rounded-xl"
+        style={{ animation: 'highlight-pulse 2s ease-in-out infinite' }}
       >
         {cardContent}
-      </m.div>
+      </div>
     );
   }
 

package/apps/dashboard/components/LazyCard.tsx

@@ -0,0 +1,62 @@
+import { useRef, useState, useEffect, memo } from 'react';
+
+/**
+ * Finds the nearest scrollable ancestor for IntersectionObserver root.
+ */
+function getScrollParent(el: HTMLElement): HTMLElement | null {
+  let parent = el.parentElement;
+  while (parent) {
+    const { overflowY } = getComputedStyle(parent);
+    if (overflowY === 'auto' || overflowY === 'scroll') return parent;
+    parent = parent.parentElement;
+  }
+  return null;
+}
+
+interface LazyCardProps {
+  children: React.ReactNode;
+  /** Estimated card height used before first measurement */
+  estimatedHeight?: number;
+}
+
+/**
+ * Renders children only when visible in the scroll container.
+ * Offscreen cards are replaced with a height-matched placeholder,
+ * dramatically reducing DOM node count for large lists.
+ */
+export const LazyCard = memo(function LazyCard({
+  children,
+  estimatedHeight = 82,
+}: LazyCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const measuredHeight = useRef(estimatedHeight);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const root = getScrollParent(el);
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+        } else {
+          // Capture height before replacing children with placeholder
+          const h = el.offsetHeight;
+          if (h > 0) measuredHeight.current = h;
+          setVisible(false);
+        }
+      },
+      { root, rootMargin: '300px 0px' }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref} style={visible ? undefined : { height: measuredHeight.current }}>
+      {visible ? children : null}
+    </div>
+  );
+});

package/apps/dashboard/components/LazyMarkdown.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';