heartbeads 0.4.0

package/app/page.tsx

@@ -0,0 +1,2041 @@
+"use client";
+
+import { useEffect, useState, useCallback, useMemo, useRef } from "react";
+import type { BeadsApiResponse, GraphNode, GraphLink, ColorMode } from "@/lib/types";
+import { getCatppuccinPrefixColor } from "@/lib/types";
+import { diffBeadsData, linkKey } from "@/lib/diff-beads";
+import type { BeadsDiff } from "@/lib/diff-beads";
+import BeadsGraph from "@/components/BeadsGraph";
+import type { BeadsGraphHandle } from "@/components/BeadsGraph";
+import NodeDetail from "@/components/NodeDetail";
+
+import { AuthButton } from "@/components/AuthButton";
+import { BeadsLogo } from "@/components/BeadsLogo";
+import { CommentTooltip } from "@/components/CommentTooltip";
+import { ContextMenu } from "@/components/ContextMenu";
+import { DescriptionModal } from "@/components/DescriptionModal";
+import { BeadTooltip } from "@/components/BeadTooltip";
+import AllCommentsPanel from "@/components/AllCommentsPanel";
+import { ActivityOverlay } from "@/components/ActivityOverlay";
+import { ActivityPanel } from "@/components/ActivityPanel";
+import { HelpPanel } from "@/components/HelpPanel";
+import { SettingsModal } from "@/components/SettingsModal";
+import { TutorialOverlay, TUTORIAL_STEPS } from "@/components/TutorialOverlay";
+import { MobileActionSheet } from "@/components/MobileActionSheet";
+import { useBeadsComments } from "@/hooks/useBeadsComments";
+import type { BeadsComment } from "@/hooks/useBeadsComments";
+import { useIsMobile } from "@/hooks/useIsMobile";
+import { useAuth } from "@/lib/auth";
+import {
+  buildHistoricalFeed,
+  diffToActivityEvents,
+  mergeFeedEvents,
+} from "@/lib/activity";
+import type { ActivityEvent } from "@/lib/activity";
+import { buildTimelineEvents, filterDataAtTime } from "@/lib/timeline";
+import type { TimelineRange } from "@/lib/timeline";
+import TimelineBar from "@/components/TimelineBar";
+import { formatRelativeTime } from "@/lib/utils";
+
+// Check if a node has been claimed (has a comment that is just "@handle")
+function isNodeClaimed(comments?: BeadsComment[]): boolean {
+  if (!comments) return false;
+  return comments.some(
+    (c) => c.text.startsWith("@") && c.text.trim().indexOf(" ") === -1
+  );
+}
+
+// Find position of a neighbor node (for placing new nodes near connections)
+function findNeighborPosition(
+  nodeId: string,
+  links: GraphLink[],
+  nodeMap: Map<string, GraphNode>
+): { x: number; y: number } | null {
+  for (const link of links) {
+    const src =
+      typeof link.source === "object"
+        ? (link.source as { id: string }).id
+        : link.source;
+    const tgt =
+      typeof link.target === "object"
+        ? (link.target as { id: string }).id
+        : link.target;
+    if (src === nodeId && nodeMap.has(tgt)) {
+      const n = nodeMap.get(tgt)!;
+      if (n.x != null && n.y != null)
+        return { x: n.x as number, y: n.y as number };
+    }
+    if (tgt === nodeId && nodeMap.has(src)) {
+      const n = nodeMap.get(src)!;
+      if (n.x != null && n.y != null)
+        return { x: n.x as number, y: n.y as number };
+    }
+  }
+  return null;
+}
+
+// Merge old (with simulation positions) and new (from server) beads data,
+// stamping animation metadata for spawn/exit/change transitions.
+function mergeBeadsData(
+  oldData: BeadsApiResponse,
+  newData: BeadsApiResponse,
+  diff: BeadsDiff
+): BeadsApiResponse {
+  const now = Date.now();
+
+  // Build position map from old nodes (preserves x/y/fx/fy from simulation)
+  const oldNodeMap = new Map(oldData.graphData.nodes.map((n) => [n.id, n]));
+  const oldLinkKeySet = new Set(oldData.graphData.links.map(linkKey));
+
+  // Merge nodes: carry over positions, stamp animation metadata
+  const mergedNodes: GraphNode[] = newData.graphData.nodes.map((node) => {
+    const oldNode = oldNodeMap.get(node.id);
+
+    if (!oldNode) {
+      // NEW NODE — stamp spawn time, place near a connected neighbor
+      const neighbor = findNeighborPosition(
+        node.id,
+        newData.graphData.links,
+        oldNodeMap
+      );
+      return {
+        ...node,
+        _spawnTime: now,
+        x: neighbor ? neighbor.x + (Math.random() - 0.5) * 40 : undefined,
+        y: neighbor ? neighbor.y + (Math.random() - 0.5) * 40 : undefined,
+      } as GraphNode;
+    }
+
+    // EXISTING NODE — preserve position, check for changes
+    const merged: GraphNode = {
+      ...node,
+      x: oldNode.x,
+      y: oldNode.y,
+      fx: oldNode.fx,
+      fy: oldNode.fy,
+    };
+
+    // Stamp change metadata if status changed
+    if (diff.changedNodes.has(node.id)) {
+      const changes = diff.changedNodes.get(node.id)!;
+      const statusChange = changes.find((c) => c.field === "status");
+      if (statusChange) {
+        merged._changedAt = now;
+        merged._prevStatus = statusChange.from;
+      }
+    }
+
+    return merged;
+  });
+
+  // Handle removed nodes: keep them briefly for exit animation
+  for (const removedId of diff.removedNodeIds) {
+    const oldNode = oldNodeMap.get(removedId);
+    if (oldNode) {
+      mergedNodes.push({
+        ...oldNode,
+        _removeTime: now,
+      } as GraphNode);
+    }
+  }
+
+  // Merge links: stamp spawn time on new links
+  const mergedLinks = newData.graphData.links.map((link) => {
+    const key = linkKey(link);
+    if (!oldLinkKeySet.has(key)) {
+      return { ...link, _spawnTime: now };
+    }
+    return link;
+  });
+
+  // Handle removed links: keep briefly for exit animation
+  for (const removedKey of diff.removedLinkKeys) {
+    const oldLink = oldData.graphData.links.find(
+      (l) => linkKey(l) === removedKey
+    );
+    if (oldLink) {
+      mergedLinks.push({
+        source:
+          typeof oldLink.source === "object"
+            ? (oldLink.source as { id: string }).id
+            : oldLink.source,
+        target:
+          typeof oldLink.target === "object"
+            ? (oldLink.target as { id: string }).id
+            : oldLink.target,
+        type: oldLink.type,
+        _removeTime: now,
+      });
+    }
+  }
+
+  return {
+    ...newData,
+    graphData: {
+      nodes: mergedNodes as GraphNode[],
+      links: mergedLinks as GraphLink[],
+    },
+  };
+}
+
+// Status badge colors for search results
+const STATUS_DOT_COLORS: Record<string, string> = {
+  open: "bg-emerald-500",
+  in_progress: "bg-amber-500",
+  blocked: "bg-red-500",
+  deferred: "bg-violet-500",
+  closed: "bg-zinc-400",
+};
+
+export default function Home() {
+  const [data, setData] = useState<BeadsApiResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
+  const [hoveredNode, setHoveredNode] = useState<GraphNode | null>(null);
+  const [collapsedEpicIds, setCollapsedEpicIds] = useState<Set<string>>(new Set());
+  const [focusedEpicId, setFocusedEpicId] = useState<string | null>(null);
+  const [colorMode, setColorMode] = useState<ColorMode>("status");
+  const [projectName, setProjectName] = useState("Beads");
+  const [repoCount, setRepoCount] = useState(0);
+  const [repoUrls, setRepoUrls] = useState<Record<string, string>>({});
+
+  // Auth state
+  const { isAuthenticated, session } = useAuth();
+
+  // Comments from ATProto indexer
+  const { commentsByNode, commentedNodeIds, allComments, refetch: refetchComments } =
+    useBeadsComments();
+
+  // Optimistic claims — immediately show avatar after user claims, before indexer picks it up
+  // rkey is undefined for optimistic (not yet indexed), set once comment is fetched
+  const [optimisticClaims, setOptimisticClaims] = useState<
+    Map<string, { avatar?: string; handle: string; claimedAt: string; did?: string; rkey?: string }>
+  >(new Map());
+
+  // Optimistic unclaims — suppress nodes where user just unclaimed (until refetch clears them)
+  const [optimisticUnclaims, setOptimisticUnclaims] = useState<Set<string>>(new Set());
+
+  // Compute claimed node avatars from comments + optimistic claims
+  // A claim comment has text "@handle" (starts with @, no spaces)
+  const claimedNodeAvatars = useMemo(() => {
+    const map = new Map<string, { avatar?: string; handle: string; claimedAt: string; did?: string; rkey?: string }>();
+    // First: add from comments (has rkey for deletion)
+    if (allComments) {
+      for (const comment of allComments) {
+        if (map.has(comment.nodeId)) continue;
+        if (optimisticUnclaims.has(comment.nodeId)) continue; // suppressed by unclaim
+        const text = comment.text.trim();
+        if (text.startsWith("@") && text.indexOf(" ") === -1) {
+          map.set(comment.nodeId, {
+            avatar: comment.avatar,
+            handle: comment.handle,
+            claimedAt: comment.createdAt,
+            did: comment.did,
+            rkey: comment.rkey,
+          });
+        }
+      }
+    }
+    // Then: add optimistic claims (only if not already from comments and not unclaimed)
+    for (const [nodeId, info] of optimisticClaims) {
+      if (!map.has(nodeId) && !optimisticUnclaims.has(nodeId)) {
+        map.set(nodeId, info);
+      }
+    }
+    return map;
+  }, [allComments, optimisticClaims, optimisticUnclaims]);
+
+  // All Comments panel state
+  const [allCommentsPanelOpen, setAllCommentsPanelOpen] = useState(false);
+
+  // Activity feed state
+  const [activityFeed, setActivityFeed] = useState<ActivityEvent[]>([]);
+  const [activityPanelOpen, setActivityPanelOpen] = useState(false);
+  const [activityOverlayCollapsed, setActivityOverlayCollapsed] = useState(false);
+  const [helpPanelOpen, setHelpPanelOpen] = useState(false);
+  const [tutorialStep, setTutorialStep] = useState<number | null>(null);
+
+  // Mobile responsiveness
+  const isMobile = useIsMobile();
+  const isMobileRef = useRef(false);
+  useEffect(() => { isMobileRef.current = isMobile; }, [isMobile]);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [mobileActionSheet, setMobileActionSheet] = useState<{ node: GraphNode } | null>(null);
+
+  // On mobile, collapse the activity overlay by default (show just the pill button)
+  useEffect(() => {
+    if (isMobile) {
+      setActivityOverlayCollapsed(true);
+    }
+  }, [isMobile]);
+
+  // Set of node IDs in the local graph — used to filter global comments/activity
+  // to only events relevant to beads in this repo
+  const localNodeIds = useMemo(() => {
+    if (!data) return new Set<string>();
+    return new Set(data.graphData.nodes.map((n) => n.id));
+  }, [data]);
+
+  // Rebuild historical feed when data or comments change
+  // Filter comments to only those targeting nodes in our graph, since the
+  // Hypergoat indexer returns comments globally across all repos using beads
+  useEffect(() => {
+    if (!data) return;
+    const localComments = allComments
+      ? allComments.filter((c) => localNodeIds.has(c.nodeId))
+      : null;
+    const historical = buildHistoricalFeed(
+      data.graphData.nodes,
+      data.graphData.links,
+      localComments
+    );
+    setActivityFeed((prev) => mergeFeedEvents(prev, historical));
+  }, [data, allComments, localNodeIds]);
+
+  // Context menu state for right-click (phase 1: shows ContextMenu)
+  const [contextMenu, setContextMenu] = useState<{
+    node: GraphNode;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Comment tooltip state (phase 2a: opened from context menu "Add comment")
+  const [commentTooltipState, setCommentTooltipState] = useState<{
+    node: GraphNode;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Description modal state (phase 2b: opened from context menu "Show description")
+  const [descriptionModalNode, setDescriptionModalNode] =
+    useState<GraphNode | null>(null);
+
+  // Settings modal state
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+
+  // Avatar hover tooltip state
+  const [avatarTooltip, setAvatarTooltip] = useState<{
+    handle: string;
+    avatar?: string;
+    claimedAt: string;
+    did?: string;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Node hover tooltip state
+  const [nodeTooltip, setNodeTooltip] = useState<{
+    node: GraphNode;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Search state
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchHighlightIndex, setSearchHighlightIndex] = useState(0);
+
+  // Timeline replay state
+  const [timelineActive, setTimelineActive] = useState(false);
+  const [timelineStep, setTimelineStep] = useState(0);
+  const [timelinePlaying, setTimelinePlaying] = useState(false);
+  const [timelineSpeed, setTimelineSpeed] = useState(1);
+  const [timelineData, setTimelineData] = useState<BeadsApiResponse | null>(null);
+
+  // Auto-fit: when true, graph auto-zooms to fit after data updates and layout changes
+  const [autoFit, setAutoFit] = useState(true);
+  // Pulse: highlight most recently active node with a ripple animation
+  const [showPulse, setShowPulse] = useState(true);
+
+  const graphRef = useRef<BeadsGraphHandle>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const prevDataRef = useRef<BeadsApiResponse | null>(null);
+
+  // Live-streaming beads data via SSE
+  useEffect(() => {
+    let eventSource: EventSource | null = null;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let fallbackTimer: ReturnType<typeof setTimeout> | null = null;
+    let mounted = true;
+
+    function connect() {
+      eventSource = new EventSource("/api/beads/stream");
+
+      eventSource.onmessage = (event) => {
+        if (!mounted) return;
+        try {
+          const parsed = JSON.parse(event.data);
+          if (parsed.error) {
+            setError(parsed.error as string);
+            setLoading(false);
+            return;
+          }
+
+          const newData = parsed as BeadsApiResponse;
+          const oldData = prevDataRef.current;
+          const diff = diffBeadsData(oldData, newData);
+
+          if (!oldData) {
+            // Initial load — no animations, just set data
+            prevDataRef.current = newData;
+            setData(newData);
+            setLoading(false);
+            return;
+          }
+
+          if (!diff.hasChanges) return; // No-op if nothing changed
+
+          // Append real-time activity events from the diff
+          const diffEvents = diffToActivityEvents(diff, newData.graphData.nodes);
+          if (diffEvents.length > 0) {
+            setActivityFeed((prev) => mergeFeedEvents(prev, diffEvents));
+          }
+
+          // Merge: stamp animation metadata and preserve positions
+          const mergedData = mergeBeadsData(oldData, newData, diff);
+          prevDataRef.current = mergedData;
+          setData(mergedData);
+        } catch (err) {
+          console.error("Failed to parse SSE message:", err);
+        }
+      };
+
+      eventSource.onerror = () => {
+        // EventSource auto-reconnects, but handle permanent failure
+        if (eventSource?.readyState === EventSource.CLOSED) {
+          reconnectTimer = setTimeout(connect, 5000);
+        }
+      };
+
+      // If still loading after 5s, fall back to one-shot fetch
+      fallbackTimer = setTimeout(() => {
+        if (!mounted) return;
+        if (!prevDataRef.current) {
+          fetch("/api/beads")
+            .then((res) => res.json())
+            .then((fallbackData) => {
+              if (mounted && !prevDataRef.current) {
+                prevDataRef.current = fallbackData;
+                setData(fallbackData);
+                setLoading(false);
+              }
+            })
+            .catch(() => {});
+        }
+      }, 5000);
+    }
+
+    connect();
+
+    return () => {
+      mounted = false;
+      eventSource?.close();
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      if (fallbackTimer) clearTimeout(fallbackTimer);
+    };
+  }, []);
+
+  // Fetch project config for dynamic name
+  useEffect(() => {
+    fetch("/api/config")
+      .then((res) => res.json())
+      .then((config) => {
+        if (config.name) setProjectName(config.name);
+        if (config.repoCount) setRepoCount(config.repoCount);
+        if (config.repoUrls) setRepoUrls(config.repoUrls);
+      })
+      .catch(() => {
+        // Fallback to defaults
+      });
+  }, []);
+
+  // Clean up expired exit animations (nodes/links with _removeTime older than 600ms)
+  useEffect(() => {
+    if (!data) return;
+    const timer = setTimeout(() => {
+      const now = Date.now();
+      const EXPIRE_MS = 600;
+      const nodes = data.graphData.nodes.filter(
+        (n) => !n._removeTime || now - n._removeTime < EXPIRE_MS
+      );
+      const links = data.graphData.links.filter(
+        (l) => !l._removeTime || now - l._removeTime < EXPIRE_MS
+      );
+      if (
+        nodes.length !== data.graphData.nodes.length ||
+        links.length !== data.graphData.links.length
+      ) {
+        setData((prev) =>
+          prev
+            ? {
+                ...prev,
+                graphData: { nodes, links },
+              }
+            : prev
+        );
+      }
+    }, 700); // slightly after animation duration
+    return () => clearTimeout(timer);
+  }, [data]);
+
+  // --- Timeline replay logic ---
+
+  // Compute timeline event range from full data
+  const timelineRange = useMemo<TimelineRange | null>(() => {
+    if (!data) return null;
+    return buildTimelineEvents(data.graphData.nodes, data.graphData.links);
+  }, [data]);
+
+  // Toggle timeline mode on/off
+  const handleTimelineToggle = useCallback(() => {
+    setTimelineActive((prev) => {
+      const next = !prev;
+      if (next) {
+        setTimelineStep(-1);
+        setTimelinePlaying(false);
+        setTimelineData(null);
+      } else {
+        setTimelinePlaying(false);
+        setTimelineData(null);
+      }
+      return next;
+    });
+  }, []);
+
+  // Event-step playback: advance one step every 5s/speed
+  useEffect(() => {
+    if (!timelinePlaying || !timelineActive || !timelineRange) return;
+    const intervalMs = 2000 / timelineSpeed;
+    const interval = setInterval(() => {
+      setTimelineStep((prev) => {
+        const next = prev + 1;
+        if (next >= timelineRange.events.length) {
+          setTimelinePlaying(false);
+          return prev;
+        }
+        return next;
+      });
+    }, intervalMs);
+    return () => clearInterval(interval);
+  }, [timelinePlaying, timelineActive, timelineSpeed, timelineRange]);
+
+  // Compute timelineData via diff/merge pipeline when step changes
+  useEffect(() => {
+    if (!timelineActive || !data || !timelineRange) return;
+
+    // Preamble step: empty canvas
+    if (timelineStep === -1) {
+      setTimelineData((prev) => {
+        const empty: BeadsApiResponse = {
+          ...data,
+          graphData: { nodes: [], links: [] },
+        };
+        if (!prev) return empty;
+        const diff = diffBeadsData(prev, empty);
+        if (!diff.hasChanges) return prev;
+        return mergeBeadsData(prev, empty, diff);
+      });
+      return;
+    }
+
+    if (timelineRange.events.length === 0) return;
+    const event = timelineRange.events[timelineStep];
+    if (!event) return;
+
+    const filtered = filterDataAtTime(
+      data.graphData.nodes,
+      data.graphData.links,
+      event.time
+    );
+    const newSnapshot: BeadsApiResponse = {
+      ...data,
+      graphData: { nodes: filtered.nodes, links: filtered.links },
+    };
+
+    setTimelineData((prev) => {
+      if (!prev) return newSnapshot; // first frame — no merge needed
+      const diff = diffBeadsData(prev, newSnapshot);
+      if (!diff.hasChanges) return prev;
+      return mergeBeadsData(prev, newSnapshot, diff);
+    });
+  }, [timelineActive, data, timelineRange, timelineStep]);
+
+  // --- End timeline replay logic ---
+
+  const handleNodeClick = useCallback((node: GraphNode) => {
+    setSelectedNode((prev) => (prev?.id === node.id ? null : node));
+    setAllCommentsPanelOpen(false);
+    setActivityPanelOpen(false);
+    setHelpPanelOpen(false);
+    setTutorialStep(null);
+    setMobileMenuOpen(false);
+    setMobileActionSheet(null);
+  }, []);
+
+  const handleNodeHover = useCallback((node: GraphNode | null, x: number, y: number) => {
+    setHoveredNode(node);
+    if (!isMobileRef.current) {
+      setNodeTooltip(node ? { node, x, y } : null);
+    }
+  }, []);
+
+  const handleToggleEpicCollapse = useCallback((epicId: string) => {
+    setCollapsedEpicIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(epicId)) next.delete(epicId);
+      else next.add(epicId);
+      return next;
+    });
+  }, []);
+
+  // Compute all epic IDs that have children (for collapse-all)
+  const allParentEpicIds = useMemo(() => {
+    if (!data) return new Set<string>();
+    const { nodes, links } = data.graphData;
+    const parentIds = new Set<string>();
+    // From parent-child links
+    for (const link of links) {
+      if (link.type === "parent-child") {
+        const src = typeof link.source === "object" ? (link.source as any).id : link.source;
+        parentIds.add(src);
+      }
+    }
+    // From hierarchical IDs
+    const nodeIds = new Set(nodes.map((n) => n.id));
+    for (const node of nodes) {
+      if (node.id.includes(".")) {
+        const parentId = node.id.split(".")[0];
+        if (nodeIds.has(parentId)) parentIds.add(parentId);
+      }
+    }
+    return parentIds;
+  }, [data]);
+
+  const handleCollapseAll = useCallback(() => {
+    setCollapsedEpicIds(new Set(allParentEpicIds));
+  }, [allParentEpicIds]);
+
+  const handleExpandAll = useCallback(() => {
+    setCollapsedEpicIds(new Set());
+  }, []);
+
+  const handleFocusEpic = useCallback((epicId: string) => {
+    setFocusedEpicId(epicId);
+  }, []);
+
+  const handleExitFocusedEpic = useCallback(() => {
+    setFocusedEpicId(null);
+  }, []);
+
+  // --- Tutorial callbacks ---
+  const handleStartTutorial = useCallback(() => {
+    setHelpPanelOpen(true);
+    setSelectedNode(null);
+    setAllCommentsPanelOpen(false);
+    setActivityPanelOpen(false);
+    setTutorialStep(0);
+  }, []);
+
+  const handleNextTutorialStep = useCallback(() => {
+    setTutorialStep((prev) => {
+      if (prev === null) return null;
+      if (prev >= TUTORIAL_STEPS.length - 1) return prev;
+      return prev + 1;
+    });
+  }, []);
+
+  const handlePrevTutorialStep = useCallback(() => {
+    setTutorialStep((prev) => {
+      if (prev === null || prev <= 0) return prev;
+      return prev - 1;
+    });
+  }, []);
+
+  const handleEndTutorial = useCallback(() => {
+    setTutorialStep(null);
+  }, []);
+
+  const handleBackgroundClick = useCallback(() => {
+    setSelectedNode(null);
+    setContextMenu(null);
+    setCommentTooltipState(null);
+    setMobileActionSheet(null);
+  }, []);
+
+  const handleNodeRightClick = useCallback(
+    (node: GraphNode, event: MouseEvent) => {
+      if (isMobileRef.current) return; // No right-click menu on mobile
+      // Dismiss any open comment tooltip and hover tooltip
+      setCommentTooltipState(null);
+      setNodeTooltip(null);
+      if (!node.description && !isAuthenticated && node.issueType !== "epic") {
+        // No description and not logged in → only action is comment → skip menu
+        setCommentTooltipState({
+          node,
+          x: event.clientX,
+          y: event.clientY,
+        });
+      } else {
+        setContextMenu({ node, x: event.clientX, y: event.clientY });
+      }
+    },
+    [isAuthenticated]
+  );
+
+  const handleNodeDoubleTap = useCallback(
+    (node: GraphNode) => {
+      // On mobile double-tap: show bottom action sheet
+      setCommentTooltipState(null);
+      setNodeTooltip(null);
+      setMobileActionSheet({ node });
+    },
+    []
+  );
+
+  const handlePostComment = useCallback(
+    async (nodeId: string, text: string) => {
+      const response = await fetch("/api/records", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          collection: "org.impactindexer.review.comment",
+          record: {
+            $type: "org.impactindexer.review.comment",
+            subject: {
+              uri: `beads:${nodeId}`,
+              type: "record",
+            },
+            text,
+            createdAt: new Date().toISOString(),
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        const errData = await response.json();
+        throw new Error(errData.error || "Failed to post comment");
+      }
+
+      // Refetch comments to update the UI
+      await refetchComments();
+    },
+    [refetchComments]
+  );
+
+  const handleClaimTask = useCallback(
+    async (nodeId: string) => {
+      if (!session?.handle) return;
+      // Resolve avatar: use session avatar, or fetch from Bluesky public API
+      let avatar = session.avatar;
+      if (!avatar && session.did) {
+        try {
+          const res = await fetch(
+            `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(session.did)}`
+          );
+          if (res.ok) {
+            const profile = await res.json();
+            avatar = profile.avatar;
+          }
+        } catch {
+          // ignore — fallback letter will show
+        }
+      }
+      // Optimistically show avatar immediately
+      setOptimisticClaims((prev) => {
+        const next = new Map(prev);
+        next.set(nodeId, {
+          avatar,
+          claimedAt: new Date().toISOString(),
+          handle: session.handle,
+        });
+        return next;
+      });
+      await handlePostComment(nodeId, `@${session.handle}`);
+      // Delayed refetch — indexer may need a few seconds to pick up the new comment
+      setTimeout(() => refetchComments(), 3000);
+    },
+    [session?.handle, session?.did, session?.avatar, handlePostComment, refetchComments]
+  );
+
+  const handleDeleteComment = useCallback(
+    async (comment: { rkey: string }) => {
+      const response = await fetch(
+        `/api/records?collection=${encodeURIComponent("org.impactindexer.review.comment")}&rkey=${encodeURIComponent(comment.rkey)}`,
+        { method: "DELETE" }
+      );
+      if (!response.ok) {
+        const errData = await response.json();
+        throw new Error(errData.error || "Failed to delete comment");
+      }
+      await refetchComments();
+    },
+    [refetchComments]
+  );
+
+  const handleUnclaimTask = useCallback(
+    async (nodeId: string) => {
+      const claim = claimedNodeAvatars.get(nodeId);
+      if (!claim) return;
+
+      // Optimistically suppress the claim immediately
+      setOptimisticUnclaims((prev) => new Set(prev).add(nodeId));
+      setOptimisticClaims((prev) => {
+        const next = new Map(prev);
+        next.delete(nodeId);
+        return next;
+      });
+
+      // Delete the comment if we have the rkey
+      if (claim.rkey) {
+        await handleDeleteComment({ rkey: claim.rkey });
+        // Refetch clears the comment from allComments, so remove from unclaims set
+        setOptimisticUnclaims((prev) => {
+          const next = new Set(prev);
+          next.delete(nodeId);
+          return next;
+        });
+      } else {
+        // Optimistic claim not yet indexed — refetch after a delay, then clear unclaim
+        setTimeout(async () => {
+          await refetchComments();
+          setOptimisticUnclaims((prev) => {
+            const next = new Set(prev);
+            next.delete(nodeId);
+            return next;
+          });
+        }, 3000);
+      }
+    },
+    [claimedNodeAvatars, handleDeleteComment, refetchComments]
+  );
+
+  const handleLikeComment = useCallback(
+    async (comment: BeadsComment) => {
+      // Check if already liked by current user
+      const existingLike = comment.likes.find(
+        (l) => l.did === session?.did
+      );
+
+      if (existingLike) {
+        // Unlike: DELETE the like record
+        const response = await fetch(
+          `/api/records?collection=${encodeURIComponent("org.impactindexer.review.like")}&rkey=${encodeURIComponent(existingLike.rkey)}`,
+          { method: "DELETE" }
+        );
+        if (!response.ok) {
+          const errData = await response.json();
+          throw new Error(errData.error || "Failed to unlike");
+        }
+      } else {
+        // Like: POST a new like record
+        const response = await fetch("/api/records", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            collection: "org.impactindexer.review.like",
+            record: {
+              subject: { uri: comment.uri, type: "record" },
+              createdAt: new Date().toISOString(),
+            },
+          }),
+        });
+        if (!response.ok) {
+          const errData = await response.json();
+          throw new Error(errData.error || "Failed to like");
+        }
+      }
+
+      await refetchComments();
+    },
+    [session?.did, refetchComments]
+  );
+
+  const handleReplyComment = useCallback(
+    async (parentComment: BeadsComment, text: string) => {
+      const response = await fetch("/api/records", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          collection: "org.impactindexer.review.comment",
+          record: {
+            subject: {
+              uri: `beads:${parentComment.nodeId}`,
+              type: "record",
+            },
+            text,
+            replyTo: parentComment.uri,
+            createdAt: new Date().toISOString(),
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        const errData = await response.json();
+        throw new Error(errData.error || "Failed to post reply");
+      }
+
+      await refetchComments();
+    },
+    [refetchComments]
+  );
+
+  const handleNodeNavigate = useCallback(
+    (nodeId: string) => {
+      if (!data) return;
+      const node = data.graphData.nodes.find((n) => n.id === nodeId);
+      if (node) {
+        setSelectedNode(node);
+      }
+    },
+    [data]
+  );
+
+  // Build a map of nodeId -> commenter handles string for search
+  const commenterHandlesByNode = useMemo(() => {
+    const map = new Map<string, string>();
+    if (!allComments) return map;
+    const handlesMap = new Map<string, Set<string>>();
+    for (const comment of allComments) {
+      if (!handlesMap.has(comment.nodeId)) {
+        handlesMap.set(comment.nodeId, new Set());
+      }
+      handlesMap.get(comment.nodeId)!.add(comment.handle);
+      if (comment.displayName) {
+        handlesMap.get(comment.nodeId)!.add(comment.displayName);
+      }
+    }
+    for (const [nodeId, handles] of handlesMap) {
+      map.set(nodeId, Array.from(handles).join(" "));
+    }
+    return map;
+  }, [allComments]);
+
+  // Search results - fuzzy match on id, title, people, and commenter handles
+  const searchResults = useMemo(() => {
+    if (!data || !searchQuery.trim()) return [];
+    const term = searchQuery.toLowerCase();
+    return data.graphData.nodes
+      .filter((n) => {
+        const commenters = commenterHandlesByNode.get(n.id) || "";
+        const searchable = `${n.id} ${n.title} ${n.prefix} ${n.owner || ""} ${n.assignee || ""} ${n.createdBy || ""} ${commenters}`.toLowerCase();
+        return searchable.includes(term);
+      })
+      .slice(0, 8);
+  }, [searchQuery, data, commenterHandlesByNode]);
+
+  // Reset highlight index when query changes
+  useEffect(() => {
+    setSearchHighlightIndex(0);
+  }, [searchQuery]);
+
+  // Focus node via graph ref, then close search
+  const focusNode = useCallback(
+    (node: GraphNode) => {
+      graphRef.current?.focusNode(node);
+      setSearchOpen(false);
+      setSearchQuery("");
+      setSearchHighlightIndex(0);
+    },
+    []
+  );
+
+  // Keyboard shortcut: Ctrl/Cmd+F to open search, Escape to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "f") {
+        e.preventDefault();
+        setSearchOpen(true);
+        setTimeout(() => searchInputRef.current?.focus(), 50);
+      }
+      if (e.key === "Escape" && searchOpen) {
+        setSearchOpen(false);
+        setSearchQuery("");
+        setSearchHighlightIndex(0);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [searchOpen]);
+
+  // Handle search result selection via keyboard
+  const handleSearchKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSearchHighlightIndex((prev) =>
+          Math.min(prev + 1, searchResults.length - 1)
+        );
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSearchHighlightIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter" && searchResults.length > 0) {
+        e.preventDefault();
+        focusNode(searchResults[searchHighlightIndex]);
+      }
+    },
+    [searchResults, searchHighlightIndex, focusNode]
+  );
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="h-screen flex flex-col items-center justify-center bg-white text-zinc-800 px-6 select-none">
+        {/* Animated ECG trace with heartbeat logo */}
+        <div className="relative w-full max-w-sm mb-8">
+          <svg
+            viewBox="0 0 400 40"
+            fill="none"
+            className="w-full text-zinc-200"
+            aria-hidden="true"
+          >
+            <line
+              x1="0"
+              y1="20"
+              x2="400"
+              y2="20"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeDasharray="4 6"
+              opacity="0.6"
+            />
+          </svg>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="bg-white px-4">
+              <BeadsLogo className="w-10 h-10 text-emerald-500" />
+            </div>
+          </div>
+        </div>
+
+        <p className="text-sm text-zinc-500 font-light animate-fade-in">
+          Warming up the heartbeat...
+        </p>
+        <p
+          className="text-xs text-zinc-400 mt-1.5 animate-fade-in"
+          style={{ animationDelay: "0.1s" }}
+        >
+          Discovering issues and mapping dependencies
+        </p>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-white">
+        <div className="max-w-sm text-center">
+          <div className="w-14 h-14 mx-auto mb-4 bg-red-50 rounded-full flex items-center justify-center">
+            <svg
+              className="w-7 h-7 text-red-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+          <h2 className="text-lg font-semibold text-zinc-900 mb-1">
+            Unable to load data
+          </h2>
+          <p className="text-sm text-zinc-500 mb-4">{error}</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white text-sm rounded-lg hover:bg-emerald-700 transition-colors"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <div className="h-screen flex flex-col overflow-hidden bg-white">
+      {/* Header */}
+      <header className="sticky top-0 z-50 shrink-0 bg-white/95 backdrop-blur-sm border-b border-zinc-200/80">
+        <div className="px-3 sm:px-6 h-14 flex items-center">
+          {/* Left: Logo */}
+          <div className="flex items-center gap-3 shrink-0 group">
+            <BeadsLogo className="w-8 h-8 text-emerald-500 transition-transform group-hover:scale-105" />
+            <div className="flex items-baseline gap-2">
+              <h1 className="text-[15px] font-semibold text-zinc-900 tracking-tight">
+                {projectName}
+              </h1>
+              <span className="font-normal text-zinc-400 text-[15px] hidden sm:inline">
+                Heartbeads
+              </span>
+              {repoCount > 1 && (
+                <span className="text-[10px] text-zinc-400 bg-zinc-100 rounded-full px-1.5 py-0.5 font-medium hidden sm:inline">
+                  {repoCount} repos
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Center: Search */}
+          <div className="flex-1 flex justify-center px-2 sm:px-4">
+            <div className="relative w-full max-w-md" data-tutorial="search">
+              {searchOpen ? (
+                <div className="flex flex-col">
+                  <div className="flex items-center bg-white rounded-full border border-zinc-200 shadow-sm overflow-hidden">
+                    <div className="pl-3 pr-1 text-zinc-400">
+                      <svg
+                        className="w-3.5 h-3.5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        strokeWidth={2}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                        />
+                      </svg>
+                    </div>
+                    <input
+                      ref={searchInputRef}
+                      type="text"
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      onKeyDown={handleSearchKeyDown}
+                      placeholder="Search issues..."
+                      className="flex-1 px-2 py-1.5 text-xs text-zinc-800 bg-transparent outline-none placeholder:text-zinc-400"
+                      autoFocus
+                    />
+                    <button
+                      onClick={() => {
+                        setSearchOpen(false);
+                        setSearchQuery("");
+                        setSearchHighlightIndex(0);
+                      }}
+                      className="px-2 py-1.5 text-zinc-400 hover:text-zinc-600"
+                    >
+                      <svg
+                        className="w-3.5 h-3.5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        strokeWidth={2}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M6 18L18 6M6 6l12 12"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+
+                  {/* Search results dropdown */}
+                  {searchQuery.trim() && (
+                    <div className="absolute top-full left-0 right-0 mt-2 bg-white rounded-xl border border-zinc-100 shadow-xl overflow-hidden max-h-72 overflow-y-auto z-50">
+                      {searchResults.length === 0 ? (
+                        <div className="px-3 py-3 text-xs text-zinc-400 text-center">
+                          No matching issues
+                        </div>
+                      ) : (
+                        searchResults.map((node, i) => (
+                          <button
+                            key={node.id}
+                            onClick={() => focusNode(node)}
+                            onMouseEnter={() => setSearchHighlightIndex(i)}
+                            className={`w-full text-left px-3 py-2 text-xs transition-colors flex items-start gap-2.5 ${
+                              i === searchHighlightIndex
+                                ? "bg-emerald-50"
+                                : "hover:bg-zinc-50"
+                            }`}
+                          >
+                            <div className="shrink-0 mt-1">
+                              <div
+                                className={`w-2 h-2 rounded-full ${
+                                  STATUS_DOT_COLORS[node.status] || "bg-zinc-400"
+                                }`}
+                              />
+                            </div>
+                            <div className="min-w-0 flex-1">
+                              <div className="flex items-center gap-1.5">
+                                <span className="font-medium text-zinc-600 shrink-0">
+                                  {node.id}
+                                </span>
+                                {node.priority <= 1 && (
+                                  <span className="text-[10px]">
+                                    {node.priority === 0
+                                      ? "\uD83D\uDD25\uD83D\uDD25"
+                                      : "\uD83D\uDD25"}
+                                  </span>
+                                )}
+                              </div>
+                              <div className="text-zinc-400 truncate mt-0.5">
+                                {node.title}
+                              </div>
+                            </div>
+                            <span className="shrink-0 text-[10px] text-zinc-400 bg-zinc-100 rounded px-1 py-0.5 mt-0.5">
+                              {node.prefix}
+                            </span>
+                          </button>
+                        ))
+                      )}
+                      {searchResults.length > 0 && (
+                        <div className="px-3 py-1.5 text-[10px] text-zinc-400 border-t border-zinc-100 bg-zinc-50/50 flex items-center justify-between">
+                          <span>
+                            {searchResults.length} result
+                            {searchResults.length !== 1 ? "s" : ""}
+                          </span>
+                          <span>
+                            <kbd className="px-1 py-0.5 bg-white rounded border border-zinc-200 text-[9px] font-mono">
+                              Enter
+                            </kbd>{" "}
+                            to focus
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <button
+                  onClick={() => {
+                    setSearchOpen(true);
+                    setTimeout(() => searchInputRef.current?.focus(), 50);
+                  }}
+                  className="w-full flex items-center gap-2 px-3.5 py-1.5 text-sm text-zinc-400 rounded-full bg-zinc-50/80 border border-zinc-200/60 hover:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100/50 transition-all"
+                  title="Search issues (Ctrl+F)"
+                >
+                  <svg
+                    className="w-3.5 h-3.5 shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    />
+                  </svg>
+                  <span className="flex-1 text-left">Search issues...</span>
+                  <kbd className="hidden sm:inline-block px-1 py-0.5 bg-zinc-100 rounded border border-zinc-200 text-[9px] font-mono text-zinc-400">
+                    {typeof navigator !== "undefined" &&
+                    navigator.platform?.includes("Mac")
+                      ? "\u2318"
+                      : "Ctrl"}
+                    F
+                  </kbd>
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Mobile hamburger button */}
+          <button
+            onClick={() => setMobileMenuOpen(true)}
+            className="md:hidden p-2 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 rounded-full transition-colors shrink-0"
+            aria-label="Open menu"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+          </button>
+
+          {/* Right: Nav items (desktop) */}
+          <div className="hidden md:flex items-center gap-1 shrink-0" data-tutorial="nav-pills">
+            {/* Replay pill */}
+            <button
+              onClick={handleTimelineToggle}
+              data-tutorial="nav-replay"
+              className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full transition-colors ${
+                timelineActive
+                  ? "text-emerald-700 bg-emerald-50"
+                  : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+              }`}
+            >
+              <svg
+                className="w-3.5 h-3.5"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+              >
+                <circle cx="8" cy="8" r="6" />
+                <polyline points="8,4 8,8 11,10" />
+              </svg>
+              <span className="hidden sm:inline">Replay</span>
+            </button>
+            {/* Comments pill */}
+            <button
+              onClick={() => {
+                setAllCommentsPanelOpen((prev) => !prev);
+                if (!allCommentsPanelOpen) {
+                  setSelectedNode(null);
+                  setActivityPanelOpen(false);
+                  setHelpPanelOpen(false);
+                  setTutorialStep(null);
+                }
+              }}
+              data-tutorial="nav-comments"
+              className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full transition-colors ${
+                allCommentsPanelOpen
+                  ? "text-emerald-700 bg-emerald-50"
+                  : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+              }`}
+            >
+              <svg
+                className="w-3.5 h-3.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+                />
+              </svg>
+              <span className="hidden sm:inline">Comments</span>
+            </button>
+            {/* Activity pill */}
+            <button
+              onClick={() => {
+                setActivityPanelOpen((prev) => !prev);
+                if (!activityPanelOpen) {
+                  setSelectedNode(null);
+                  setAllCommentsPanelOpen(false);
+                  setHelpPanelOpen(false);
+                  setTutorialStep(null);
+                }
+              }}
+              data-tutorial="nav-activity"
+              className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full transition-colors ${
+                activityPanelOpen
+                  ? "text-emerald-700 bg-emerald-50"
+                  : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+              }`}
+            >
+              <svg
+                className="w-3.5 h-3.5"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+              >
+                <circle cx="8" cy="8" r="6" />
+                <polyline points="8,4 8,8 11,10" />
+              </svg>
+              <span className="hidden sm:inline">Activity</span>
+            </button>
+            {/* Learn pill */}
+            <button
+              onClick={() => {
+                setHelpPanelOpen((prev) => !prev);
+                if (!helpPanelOpen) {
+                  setSelectedNode(null);
+                  setAllCommentsPanelOpen(false);
+                  setActivityPanelOpen(false);
+                }
+              }}
+              data-tutorial="nav-learn"
+              className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full transition-colors ${
+                helpPanelOpen
+                  ? "text-emerald-700 bg-emerald-50"
+                  : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+              }`}
+            >
+              <svg
+                className="w-3.5 h-3.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
+                />
+              </svg>
+              <span className="hidden sm:inline">Learn</span>
+            </button>
+            <div className="w-px h-5 bg-zinc-200 mx-2" />
+            <button
+              onClick={() => setSettingsModalOpen(true)}
+              className="p-2 text-zinc-400 hover:text-zinc-600 hover:bg-zinc-50 rounded-full transition-colors"
+              title="Settings"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </button>
+            <AuthButton />
+          </div>
+        </div>
+      </header>
+
+      {/* Mobile nav drawer — slides in from right */}
+      {mobileMenuOpen && (
+        <div className="md:hidden fixed inset-0 z-[60]">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/30 backdrop-blur-[2px]"
+            onClick={() => setMobileMenuOpen(false)}
+          />
+          {/* Drawer */}
+          <div className="absolute top-0 right-0 h-full w-72 bg-white shadow-2xl flex flex-col animate-slide-in-right">
+            {/* Drawer header */}
+            <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-100">
+              <span className="text-sm font-semibold text-zinc-700">Menu</span>
+              <button
+                onClick={() => setMobileMenuOpen(false)}
+                className="p-1.5 text-zinc-400 hover:text-zinc-600 rounded-full hover:bg-zinc-100 transition-colors"
+              >
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            {/* Nav items */}
+            <nav className="flex-1 overflow-y-auto py-2">
+              {/* Replay */}
+              <button
+                onClick={() => {
+                  handleTimelineToggle();
+                  setMobileMenuOpen(false);
+                }}
+                className={`w-full flex items-center gap-3 px-5 py-3.5 text-sm font-medium transition-colors ${
+                  timelineActive ? "text-emerald-700 bg-emerald-50" : "text-zinc-600 hover:bg-zinc-50"
+                }`}
+              >
+                <svg className="w-4 h-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                  <circle cx="8" cy="8" r="6" />
+                  <polyline points="8,4 8,8 11,10" />
+                </svg>
+                Replay
+              </button>
+              {/* Comments */}
+              <button
+                onClick={() => {
+                  setAllCommentsPanelOpen((prev) => !prev);
+                  if (!allCommentsPanelOpen) {
+                    setSelectedNode(null);
+                    setActivityPanelOpen(false);
+                    setHelpPanelOpen(false);
+                    setTutorialStep(null);
+                  }
+                  setMobileMenuOpen(false);
+                }}
+                className={`w-full flex items-center gap-3 px-5 py-3.5 text-sm font-medium transition-colors ${
+                  allCommentsPanelOpen ? "text-emerald-700 bg-emerald-50" : "text-zinc-600 hover:bg-zinc-50"
+                }`}
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+                </svg>
+                Comments
+              </button>
+              {/* Activity */}
+              <button
+                onClick={() => {
+                  setActivityPanelOpen((prev) => !prev);
+                  if (!activityPanelOpen) {
+                    setSelectedNode(null);
+                    setAllCommentsPanelOpen(false);
+                    setHelpPanelOpen(false);
+                    setTutorialStep(null);
+                  }
+                  setMobileMenuOpen(false);
+                }}
+                className={`w-full flex items-center gap-3 px-5 py-3.5 text-sm font-medium transition-colors ${
+                  activityPanelOpen ? "text-emerald-700 bg-emerald-50" : "text-zinc-600 hover:bg-zinc-50"
+                }`}
+              >
+                <svg className="w-4 h-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                  <circle cx="8" cy="8" r="6" />
+                  <polyline points="8,4 8,8 11,10" />
+                </svg>
+                Activity
+              </button>
+              {/* Learn */}
+              <button
+                onClick={() => {
+                  setHelpPanelOpen((prev) => !prev);
+                  if (!helpPanelOpen) {
+                    setSelectedNode(null);
+                    setAllCommentsPanelOpen(false);
+                    setActivityPanelOpen(false);
+                  }
+                  setMobileMenuOpen(false);
+                }}
+                className={`w-full flex items-center gap-3 px-5 py-3.5 text-sm font-medium transition-colors ${
+                  helpPanelOpen ? "text-emerald-700 bg-emerald-50" : "text-zinc-600 hover:bg-zinc-50"
+                }`}
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
+                </svg>
+                Learn
+              </button>
+              {/* Divider */}
+              <div className="h-px bg-zinc-100 mx-4 my-2" />
+              {/* Settings */}
+              <button
+                onClick={() => {
+                  setSettingsModalOpen(true);
+                  setMobileMenuOpen(false);
+                }}
+                className="w-full flex items-center gap-3 px-5 py-3.5 text-sm font-medium text-zinc-600 hover:bg-zinc-50 transition-colors"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                Settings
+              </button>
+              {/* Auth */}
+              <div className="px-5 py-3.5">
+                <AuthButton />
+              </div>
+            </nav>
+          </div>
+        </div>
+      )}
+
+      {/* Main content */}
+      <div className="flex-1 flex overflow-hidden relative">
+        {/* Graph area — full width on mobile, flex-1 on desktop */}
+        <div className="flex-1 relative bg-zinc-50/50">
+          {/* Subtle grid pattern */}
+          <div
+            className="absolute inset-0 opacity-[0.03]"
+            style={{
+              backgroundImage:
+                "radial-gradient(circle, #000 1px, transparent 1px)",
+              backgroundSize: "24px 24px",
+            }}
+          />
+
+          <BeadsGraph
+            ref={graphRef}
+            nodes={timelineActive && timelineData ? timelineData.graphData.nodes : data.graphData.nodes}
+            links={timelineActive && timelineData ? timelineData.graphData.links : data.graphData.links}
+            selectedNode={selectedNode}
+            hoveredNode={hoveredNode}
+            onNodeClick={handleNodeClick}
+            onNodeHover={handleNodeHover}
+            onBackgroundClick={handleBackgroundClick}
+            onNodeRightClick={handleNodeRightClick}
+            commentedNodeIds={commentedNodeIds}
+            claimedNodeAvatars={claimedNodeAvatars}
+            onAvatarHover={setAvatarTooltip}
+            timelineActive={timelineActive}
+            stats={data.stats}
+            sidebarOpen={!!selectedNode || allCommentsPanelOpen || activityPanelOpen || helpPanelOpen}
+            collapsedEpicIds={collapsedEpicIds}
+            onCollapseAll={handleCollapseAll}
+            onExpandAll={handleExpandAll}
+            focusedEpicId={focusedEpicId}
+            onExitFocusedEpic={handleExitFocusedEpic}
+            colorMode={colorMode}
+            onColorModeChange={setColorMode}
+            autoFit={autoFit}
+            onAutoFitToggle={() => setAutoFit((v) => !v)}
+            pulseNodeId={activityFeed.length > 0 ? activityFeed[0].nodeId : null}
+            showPulse={showPulse}
+            onShowPulseToggle={() => setShowPulse((v) => !v)}
+            isMobile={isMobile}
+            onNodeDoubleTap={handleNodeDoubleTap}
+          />
+
+          {/* Timeline bar — replaces legend hint when active */}
+          {timelineActive && timelineRange && timelineRange.events.length > 0 && (
+            <div
+              className="absolute bottom-4 z-10 transition-[right] duration-300 ease-out"
+              style={{ right: selectedNode || allCommentsPanelOpen || activityPanelOpen ? "calc(360px + 1rem)" : "1rem" }}
+            >
+              <TimelineBar
+                totalSteps={timelineRange.events.length}
+                currentStep={Math.max(timelineStep, 0)}
+                currentTime={timelineStep >= 0 ? (timelineRange.events[timelineStep]?.time ?? timelineRange.minTime) : timelineRange.minTime}
+                isPlaying={timelinePlaying}
+                speed={timelineSpeed}
+                onStepChange={setTimelineStep}
+                onPlayPause={() => setTimelinePlaying((prev) => !prev)}
+                onSpeedChange={setTimelineSpeed}
+              />
+            </div>
+          )}
+
+          {/* Activity overlay — top-right of canvas */}
+          {!selectedNode && !allCommentsPanelOpen && !activityPanelOpen && !helpPanelOpen && !timelineActive && (
+            <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-10">
+              <ActivityOverlay
+                events={activityFeed}
+                collapsed={activityOverlayCollapsed}
+                compact={isMobile}
+                onToggleCollapse={() => setActivityOverlayCollapsed((prev) => !prev)}
+                onExpandPanel={() => {
+                  setActivityPanelOpen(true);
+                  setSelectedNode(null);
+                  setAllCommentsPanelOpen(false);
+                  setHelpPanelOpen(false);
+                }}
+                onNodeClick={(nodeId) => {
+                  const node = data?.graphData.nodes.find((n) => n.id === nodeId);
+                  if (node) focusNode(node);
+                }}
+              />
+            </div>
+          )}
+
+          {/* Right-click context menu */}
+          {contextMenu && (
+            <ContextMenu
+              node={contextMenu.node}
+              x={contextMenu.x}
+              y={contextMenu.y}
+              onShowDescription={() => {
+                setDescriptionModalNode(contextMenu.node);
+                setContextMenu(null);
+              }}
+              onAddComment={() => {
+                setCommentTooltipState({
+                  node: contextMenu.node,
+                  x: contextMenu.x,
+                  y: contextMenu.y,
+                });
+                setContextMenu(null);
+              }}
+              onClaimTask={
+                isAuthenticated &&
+                !claimedNodeAvatars.has(contextMenu.node.id)
+                  ? () => {
+                      handleClaimTask(contextMenu.node.id);
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
+              onUnclaimTask={(() => {
+                if (!isAuthenticated) return undefined;
+                const claim = claimedNodeAvatars.get(contextMenu.node.id);
+                if (!claim) return undefined;
+                // Show "Unclaim" if claim.did matches current user, or if no did (optimistic = mine)
+                const isMyClaim = claim.did === session?.did || !claim.did;
+                if (!isMyClaim) return undefined;
+                return () => {
+                  handleUnclaimTask(contextMenu.node.id);
+                  setContextMenu(null);
+                };
+              })()}
+              onCollapseEpic={
+                contextMenu.node.issueType === "epic" &&
+                !collapsedEpicIds.has(contextMenu.node.id)
+                  ? () => {
+                      handleToggleEpicCollapse(contextMenu.node.id);
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
+              onUncollapseEpic={
+                contextMenu.node.issueType === "epic" &&
+                collapsedEpicIds.has(contextMenu.node.id)
+                  ? () => {
+                      handleToggleEpicCollapse(contextMenu.node.id);
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
+              onFocusEpic={
+                contextMenu.node.issueType === "epic" && !focusedEpicId
+                  ? () => {
+                      handleFocusEpic(contextMenu.node.id);
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
+              onExitFocusEpic={
+                contextMenu.node.issueType === "epic" &&
+                focusedEpicId === contextMenu.node.id
+                  ? () => {
+                      handleExitFocusedEpic();
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
+              onClose={() => setContextMenu(null)}
+            />
+          )}
+
+          {/* Mobile action sheet (double-tap on mobile) */}
+          {mobileActionSheet && (
+            <MobileActionSheet
+              node={mobileActionSheet.node}
+              onShowDescription={
+                mobileActionSheet.node.description
+                  ? () => {
+                      setDescriptionModalNode(mobileActionSheet.node);
+                      setMobileActionSheet(null);
+                    }
+                  : undefined
+              }
+              onAddComment={() => {
+                setCommentTooltipState({
+                  node: mobileActionSheet.node,
+                  x: window.innerWidth / 2,
+                  y: window.innerHeight / 2,
+                });
+                setMobileActionSheet(null);
+              }}
+              onClaimTask={
+                isAuthenticated &&
+                !claimedNodeAvatars.has(mobileActionSheet.node.id)
+                  ? () => {
+                      handleClaimTask(mobileActionSheet.node.id);
+                      setMobileActionSheet(null);
+                    }
+                  : undefined
+              }
+              onUnclaimTask={(() => {
+                if (!isAuthenticated) return undefined;
+                const claim = claimedNodeAvatars.get(mobileActionSheet.node.id);
+                if (!claim) return undefined;
+                const isMyClaim = claim.did === session?.did || !claim.did;
+                if (!isMyClaim) return undefined;
+                return () => {
+                  handleUnclaimTask(mobileActionSheet.node.id);
+                  setMobileActionSheet(null);
+                };
+              })()}
+              onCollapseEpic={
+                mobileActionSheet.node.issueType === "epic" &&
+                !collapsedEpicIds.has(mobileActionSheet.node.id)
+                  ? () => {
+                      handleToggleEpicCollapse(mobileActionSheet.node.id);
+                      setMobileActionSheet(null);
+                    }
+                  : undefined
+              }
+              onUncollapseEpic={
+                mobileActionSheet.node.issueType === "epic" &&
+                collapsedEpicIds.has(mobileActionSheet.node.id)
+                  ? () => {
+                      handleToggleEpicCollapse(mobileActionSheet.node.id);
+                      setMobileActionSheet(null);
+                    }
+                  : undefined
+              }
+              onFocusEpic={
+                mobileActionSheet.node.issueType === "epic" && !focusedEpicId
+                  ? () => {
+                      handleFocusEpic(mobileActionSheet.node.id);
+                      setMobileActionSheet(null);
+                    }
+                  : undefined
+              }
+              onExitFocusEpic={
+                mobileActionSheet.node.issueType === "epic" &&
+                focusedEpicId === mobileActionSheet.node.id
+                  ? () => {
+                      handleExitFocusedEpic();
+                      setMobileActionSheet(null);
+                    }
+                  : undefined
+              }
+              onClose={() => setMobileActionSheet(null)}
+            />
+          )}
+
+          {/* Comment tooltip (opened from context menu "Add comment") */}
+          {commentTooltipState && (
+            <CommentTooltip
+              node={commentTooltipState.node}
+              x={commentTooltipState.x}
+              y={commentTooltipState.y}
+              onClose={() => setCommentTooltipState(null)}
+              onSubmit={async (text) => {
+                await handlePostComment(commentTooltipState.node.id, text);
+                setCommentTooltipState(null);
+              }}
+              isAuthenticated={isAuthenticated}
+              existingComments={commentsByNode.get(
+                commentTooltipState.node.id
+              )}
+            />
+          )}
+
+          {/* Description modal (opened from context menu "Show description") */}
+          {descriptionModalNode && (
+            <DescriptionModal
+              node={descriptionModalNode}
+              onClose={() => setDescriptionModalNode(null)}
+              repoUrl={repoUrls[descriptionModalNode.prefix]}
+              onOpenSettings={() => setSettingsModalOpen(true)}
+            />
+          )}
+
+          {/* Settings modal */}
+          <SettingsModal
+            isOpen={settingsModalOpen}
+            onClose={() => setSettingsModalOpen(false)}
+          />
+
+          {/* Node hover tooltip */}
+          {nodeTooltip && !avatarTooltip && !isMobile && (
+            <BeadTooltip
+              node={nodeTooltip.node}
+              x={nodeTooltip.x}
+              y={nodeTooltip.y}
+              prefixColor={getCatppuccinPrefixColor(nodeTooltip.node.prefix)}
+              allNodes={timelineActive && timelineData ? timelineData.graphData.nodes : data.graphData.nodes}
+            />
+          )}
+
+          {/* Avatar hover tooltip */}
+          {avatarTooltip && !isMobile && (
+            <div
+              style={{
+                position: "fixed",
+                left: avatarTooltip.x + 12,
+                top: avatarTooltip.y - 8,
+                zIndex: 90,
+                pointerEvents: "none",
+              }}
+            >
+              <div className="flex items-center gap-2 bg-white border border-zinc-200 rounded-lg shadow-lg px-2.5 py-2">
+                {avatarTooltip.avatar ? (
+                  /* eslint-disable-next-line @next/next/no-img-element */
+                  <img
+                    src={avatarTooltip.avatar}
+                    alt=""
+                    className="w-6 h-6 rounded-full shrink-0"
+                  />
+                ) : (
+                  <div className="w-6 h-6 rounded-full bg-zinc-200 flex items-center justify-center text-[10px] font-medium text-zinc-500 shrink-0">
+                    {avatarTooltip.handle.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div className="flex flex-col">
+                  <span className="text-xs text-zinc-700 whitespace-nowrap">
+                    {avatarTooltip.did ? (
+                      <a
+                        href={`https://www.impactindexer.org/data?did=${avatarTooltip.did}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="font-semibold text-zinc-800 hover:text-emerald-600 transition-colors"
+                        style={{ pointerEvents: "auto" }}
+                      >
+                        {avatarTooltip.handle}
+                      </a>
+                    ) : (
+                      <span className="font-semibold text-zinc-800">{avatarTooltip.handle}</span>
+                    )} claimed this task
+                  </span>
+                  <span className="text-[10px] text-zinc-400">
+                    {formatRelativeTime(avatarTooltip.claimedAt)}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+
+        </div>
+
+        {/* Desktop sidebar — slides in from right as an overlay when a node is selected */}
+        <aside
+          className={`hidden md:flex absolute top-0 right-0 h-full w-[360px] bg-white border-l border-zinc-200 flex-col shadow-xl z-30 transform transition-transform duration-300 ease-out ${
+            selectedNode ? "translate-x-0" : "translate-x-full"
+          }`}
+        >
+          {/* Sidebar header with close button */}
+          <div className="shrink-0 px-5 py-3 border-b border-zinc-100 flex items-center justify-between">
+            <h2 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
+              Node Detail
+            </h2>
+            <button
+              onClick={() => {
+                setSelectedNode(null);
+              }}
+              className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors rounded-full hover:bg-zinc-100"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+
+          {/* Sidebar content */}
+          <div className="flex-1 overflow-y-auto custom-scrollbar px-5 py-4 space-y-5">
+            {/* Selected node detail */}
+            <NodeDetail
+              node={selectedNode}
+              allNodes={data.graphData.nodes}
+              onNodeNavigate={handleNodeNavigate}
+              comments={
+                selectedNode
+                  ? commentsByNode.get(selectedNode.id)
+                  : undefined
+              }
+              onPostComment={
+                selectedNode
+                  ? (text: string) =>
+                      handlePostComment(selectedNode.id, text)
+                  : undefined
+              }
+              onDeleteComment={handleDeleteComment}
+              onLikeComment={handleLikeComment}
+              onReplyComment={handleReplyComment}
+              isAuthenticated={isAuthenticated}
+              currentDid={session?.did}
+              repoUrls={repoUrls}
+              onOpenSettings={() => setSettingsModalOpen(true)}
+            />
+
+          </div>
+        </aside>
+
+        {/* Mobile bottom drawer — slides up when a node is selected */}
+        <div
+          className={`md:hidden fixed inset-x-0 bottom-0 z-20 transform transition-transform duration-300 ease-out ${
+            selectedNode ? "translate-y-0" : "translate-y-full"
+          }`}
+        >
+          <div className="bg-white rounded-t-2xl border-t border-zinc-200 shadow-lg max-h-[60vh] flex flex-col">
+            {/* Drag handle + close */}
+            <div className="shrink-0 flex items-center justify-between px-4 pt-3 pb-2">
+              <div className="w-8 h-1 bg-zinc-300 rounded-full mx-auto" />
+              <button
+                onClick={() => setSelectedNode(null)}
+                className="absolute right-3 top-3 p-1 text-zinc-400 hover:text-zinc-600"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            {/* Drawer content */}
+            <div className="flex-1 overflow-y-auto custom-scrollbar px-4 pb-6 space-y-4">
+              <NodeDetail
+                node={selectedNode}
+                allNodes={data.graphData.nodes}
+                onNodeNavigate={handleNodeNavigate}
+                comments={
+                  selectedNode
+                    ? commentsByNode.get(selectedNode.id)
+                    : undefined
+                }
+                onPostComment={
+                  selectedNode
+                    ? (text: string) =>
+                        handlePostComment(selectedNode.id, text)
+                    : undefined
+                }
+                onDeleteComment={handleDeleteComment}
+                onLikeComment={handleLikeComment}
+                onReplyComment={handleReplyComment}
+                isAuthenticated={isAuthenticated}
+                currentDid={session?.did}
+                repoUrls={repoUrls}
+                onOpenSettings={() => setSettingsModalOpen(true)}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* All Comments panel */}
+        <AllCommentsPanel
+          isOpen={allCommentsPanelOpen}
+          onClose={() => setAllCommentsPanelOpen(false)}
+          allComments={allComments.filter((c) => localNodeIds.has(c.nodeId))}
+          onNodeNavigate={(nodeId) => {
+            handleNodeNavigate(nodeId);
+            setAllCommentsPanelOpen(false);
+          }}
+          isAuthenticated={isAuthenticated}
+          currentDid={session?.did}
+          onLikeComment={handleLikeComment}
+          onDeleteComment={handleDeleteComment}
+        />
+
+        {/* Activity panel */}
+        <ActivityPanel
+          events={activityFeed}
+          isOpen={activityPanelOpen}
+          onClose={() => setActivityPanelOpen(false)}
+          onNodeClick={(nodeId) => {
+            const node = data?.graphData.nodes.find((n) => n.id === nodeId);
+            if (node) {
+              focusNode(node);
+              setActivityPanelOpen(false);
+            }
+          }}
+        />
+
+        {/* Help panel */}
+        <HelpPanel
+          isOpen={helpPanelOpen}
+          onClose={() => {
+            setHelpPanelOpen(false);
+            setTutorialStep(null);
+          }}
+          tutorialStep={tutorialStep}
+          onStartTutorial={handleStartTutorial}
+          onNextStep={handleNextTutorialStep}
+          onPrevStep={handlePrevTutorialStep}
+          onEndTutorial={handleEndTutorial}
+        />
+      </div>
+
+      {/* Tutorial spotlight overlay */}
+      <TutorialOverlay
+        step={tutorialStep}
+        onNext={handleNextTutorialStep}
+        onPrev={handlePrevTutorialStep}
+        onEnd={handleEndTutorial}
+      />
+    </div>
+  );
+}