heartbeads 0.4.0

package/components/BeadsLogo.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+/**
+ * Animated heartbeat (ECG) logo for heartbeads.
+ * A minimalistic, elegant heartbeat trace line that continuously animates
+ * with a drawing/pulse effect — representing the living pulse of a project.
+ */
+export function BeadsLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      className={className}
+      aria-hidden="true"
+    >
+      {/* Heartbeat ECG trace — the signature PQRST waveform */}
+      <polyline
+        points="1,16 6,16 8,16 9.5,14 11,18 12.5,6 14,26 15.5,10 17,16 19,16 20.5,14.5 21.5,17.5 22.5,16 31,16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        opacity="0.9"
+      >
+        {/* Dash animation: line draws itself, then fades and redraws */}
+        <animate
+          attributeName="stroke-dasharray"
+          values="0 60;60 0"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="opacity"
+          values="0.4;0.95;0.95;0.4"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </polyline>
+
+      {/* Trailing glow — a second faded copy offset in time */}
+      <polyline
+        points="1,16 6,16 8,16 9.5,14 11,18 12.5,6 14,26 15.5,10 17,16 19,16 20.5,14.5 21.5,17.5 22.5,16 31,16"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        opacity="0.15"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          values="0 60;60 0"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="opacity"
+          values="0;0.2;0.2;0"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </polyline>
+
+      {/* Pulse dot — travels along the trace */}
+      <circle cx="0" cy="16" r="1.5" fill="currentColor" opacity="0">
+        <animate
+          attributeName="cx"
+          values="1;6;8;9.5;11;12.5;14;15.5;17;19;20.5;21.5;22.5;31"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="cy"
+          values="16;16;16;14;18;6;26;10;16;16;14.5;17.5;16;16"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="opacity"
+          values="0;0.8;1;1;1;1;1;1;0.8;0.6;0.6;0.6;0.4;0"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="r"
+          values="1;1.5;2;2.5;2;2.5;2;1.5;1.5;1;1;1;1;0.5"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </svg>
+  );
+}

package/components/CommentTooltip.tsx

@@ -0,0 +1,338 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import type { GraphNode } from "@/lib/types";
+import { PREFIX_COLORS } from "@/lib/types";
+import type { BeadsComment } from "@/hooks/useBeadsComments";
+import { useIsMobile } from "@/hooks/useIsMobile";
+
+interface CommentTooltipProps {
+  node: GraphNode;
+  x: number;
+  y: number;
+  onClose: () => void;
+  onSubmit: (text: string) => Promise<void>;
+  isAuthenticated: boolean;
+  existingComments?: BeadsComment[];
+}
+
+export function CommentTooltip({
+  node,
+  x,
+  y,
+  onClose,
+  onSubmit,
+  isAuthenticated,
+  existingComments,
+}: CommentTooltipProps) {
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [visible, setVisible] = useState(false);
+  const isMobile = useIsMobile();
+
+  // Position the tooltip after first render (measure dimensions)
+  useEffect(() => {
+    if (!tooltipRef.current) return;
+    const tt = tooltipRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    let nx = x + 14;
+    let ny = y - tt.height - 14;
+
+    // Clamp right
+    if (nx + tt.width > vw - 16) nx = vw - tt.width - 16;
+    // Clamp left
+    if (nx < 16) nx = 16;
+    // If overflows top, flip below cursor
+    if (ny < 16) ny = y + 28;
+    // Clamp bottom
+    if (ny + tt.height > vh - 16) ny = vh - tt.height - 16;
+
+    setPos({ x: nx, y: ny });
+    setVisible(true);
+  }, [x, y]);
+
+  // Auto-focus textarea on mount
+  useEffect(() => {
+    if (isAuthenticated) {
+      // Small delay to let position settle
+      const timer = setTimeout(() => textareaRef.current?.focus(), 100);
+      return () => clearTimeout(timer);
+    }
+  }, [isAuthenticated]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (
+        tooltipRef.current &&
+        !tooltipRef.current.contains(e.target as Node)
+      ) {
+        onClose();
+      }
+    };
+    // Use a small delay so the right-click that opened the tooltip doesn't
+    // immediately close it
+    const timer = setTimeout(() => {
+      window.addEventListener("mousedown", handleMouseDown);
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [onClose]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!text.trim() || sending) return;
+    setSending(true);
+    try {
+      await onSubmit(text.trim());
+      setText("");
+    } catch (err) {
+      console.error("Failed to post comment:", err);
+    } finally {
+      setSending(false);
+    }
+  }, [text, sending, onSubmit]);
+
+  // Handle Ctrl+Enter to submit
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+
+  const prefixColor = PREFIX_COLORS[node.prefix] || "#a1a1aa";
+  const commentCount = existingComments?.length || 0;
+
+  // Shared form content used in both mobile and desktop layouts
+  const formContent = (
+    <>
+      {/* Node info */}
+      <div className="mb-3">
+        <span className="text-xs font-mono text-emerald-600">
+          {node.id}
+        </span>
+        <h3 className="text-sm font-semibold text-zinc-800 leading-tight mt-0.5">
+          {node.title}
+        </h3>
+      </div>
+
+      {/* Existing comments preview */}
+      {commentCount > 0 && existingComments && (
+        <div className="mb-3 pb-3 border-b border-zinc-100">
+          <div className="flex items-center gap-1.5 mb-2">
+            <svg
+              className="w-3.5 h-3.5 text-blue-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
+              />
+            </svg>
+            <span className="text-[10px] font-medium text-zinc-500 uppercase tracking-wider">
+              {commentCount} comment{commentCount !== 1 ? "s" : ""}
+            </span>
+          </div>
+          {/* Show most recent 2 comments */}
+          <div className="space-y-2">
+            {existingComments.slice(0, 2).map((comment) => (
+              <div key={comment.uri} className="flex gap-1.5">
+                <div className="shrink-0 w-4 h-4 rounded-full bg-zinc-100 overflow-hidden mt-0.5">
+                  {comment.avatar ? (
+                    <img
+                      src={comment.avatar}
+                      alt=""
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center text-[7px] font-medium text-zinc-400">
+                      {(comment.handle || comment.did)
+                        .charAt(0)
+                        .toUpperCase()}
+                    </div>
+                  )}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <a
+                    href={`https://www.impactindexer.org/data?did=${comment.did}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[10px] font-medium text-zinc-500 hover:text-emerald-600 transition-colors"
+                  >
+                    {comment.displayName || comment.handle}
+                  </a>
+                  <p className="text-[11px] text-zinc-500 line-clamp-2 leading-tight">
+                    {comment.text}
+                  </p>
+                </div>
+              </div>
+            ))}
+            {commentCount > 2 && (
+              <p className="text-[10px] text-zinc-400 italic">
+                +{commentCount - 2} more — see detail panel
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Compose area */}
+      {isAuthenticated ? (
+        <div>
+          <textarea
+            ref={textareaRef}
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Leave a comment..."
+            rows={3}
+            className="w-full px-2.5 py-2 text-xs border border-zinc-200 rounded-md bg-zinc-50 text-zinc-700 placeholder-zinc-400 resize-none focus:outline-none focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500"
+          />
+          <div className="flex items-center justify-between mt-2">
+            <span className="text-[10px] text-zinc-300">
+              {typeof navigator !== "undefined" &&
+              navigator.platform?.includes("Mac")
+                ? "\u2318"
+                : "Ctrl"}
+              +Enter to send
+            </span>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={onClose}
+                className="px-2.5 py-1 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSubmit}
+                disabled={!text.trim() || sending}
+                className="px-3 py-1 text-[11px] font-medium text-white bg-emerald-500 rounded-md hover:bg-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {sending ? (
+                  <span className="flex items-center gap-1">
+                    <svg
+                      className="w-3 h-3 animate-spin"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                      />
+                    </svg>
+                    Sending
+                  </span>
+                ) : (
+                  "Send"
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="text-center py-3">
+          <svg
+            className="w-5 h-5 text-zinc-300 mx-auto mb-1.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+            />
+          </svg>
+          <p className="text-xs text-zinc-400">Sign in to comment</p>
+        </div>
+      )}
+    </>
+  );
+
+  // Mobile: bottom sheet layout
+  if (isMobile) {
+    return (
+      <>
+        <div className="fixed inset-0 z-[99] bg-black/20" onClick={onClose} />
+        <div className="fixed inset-x-0 bottom-0 z-[100] bg-white rounded-t-2xl shadow-2xl animate-slide-up-sheet">
+          <div className="w-10 h-1 bg-zinc-300 rounded-full mx-auto mt-3 mb-1" />
+          <div className="px-4 pb-6 pt-2">
+            {formContent}
+          </div>
+          <div className="h-[env(safe-area-inset-bottom)]" />
+        </div>
+      </>
+    );
+  }
+
+  // Desktop: floating tooltip
+  return (
+    <div
+      ref={tooltipRef}
+      style={{
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: 320,
+        zIndex: 100,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : "translateY(4px)",
+        transition: "opacity 0.2s ease, transform 0.2s ease",
+      }}
+      className="bg-white border border-zinc-200 rounded-lg overflow-hidden"
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      <style>{`
+        .comment-tooltip-shadow {
+          box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08);
+        }
+      `}</style>
+      <div className="comment-tooltip-shadow p-[18px_20px]">
+        {/* Colored accent bar */}
+        <div
+          className="rounded-sm mb-2.5"
+          style={{
+            width: 24,
+            height: 2,
+            background: prefixColor,
+            opacity: 0.6,
+          }}
+        />
+        {formContent}
+      </div>
+    </div>
+  );
+}

package/components/ContextMenu.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import type { GraphNode } from "@/lib/types";
+
+interface ContextMenuProps {
+  node: GraphNode;
+  x: number;
+  y: number;
+  onShowDescription: () => void;
+  onAddComment: () => void;
+  onClaimTask?: () => void;
+  onUnclaimTask?: () => void;
+  onCollapseEpic?: () => void;
+  onUncollapseEpic?: () => void;
+  onFocusEpic?: () => void;
+  onExitFocusEpic?: () => void;
+  onClose: () => void;
+}
+
+export function ContextMenu({
+  node,
+  x,
+  y,
+  onShowDescription,
+  onAddComment,
+  onClaimTask,
+  onUnclaimTask,
+  onCollapseEpic,
+  onUncollapseEpic,
+  onFocusEpic,
+  onExitFocusEpic,
+  onClose,
+}: ContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [visible, setVisible] = useState(false);
+
+  // Position + clamp to viewport
+  useEffect(() => {
+    if (!menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let nx = x + 4;
+    let ny = y + 4;
+    if (nx + rect.width > vw - 16) nx = vw - rect.width - 16;
+    if (nx < 16) nx = 16;
+    if (ny + rect.height > vh - 16) ny = vh - rect.height - 16;
+    if (ny < 16) ny = 16;
+    setPos({ x: nx, y: ny });
+    setVisible(true);
+  }, [x, y]);
+
+  // Escape key
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // Click outside (with delay so triggering right-click doesn't immediately close)
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const timer = setTimeout(
+      () => window.addEventListener("mousedown", handler),
+      50
+    );
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("mousedown", handler);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      ref={menuRef}
+      style={{
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        zIndex: 100,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : "translateY(2px)",
+        transition: "opacity 0.15s ease, transform 0.15s ease",
+      }}
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      <div
+        className="bg-white border border-zinc-200 rounded-lg overflow-hidden"
+        style={{
+          minWidth: 180,
+          boxShadow:
+            "0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06)",
+        }}
+      >
+        {node.description && (
+          <button
+            onClick={onShowDescription}
+            className="w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors border-b border-zinc-100"
+          >
+            <svg
+              className="w-3.5 h-3.5 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+              />
+            </svg>
+            Show description
+          </button>
+        )}
+        <button
+          onClick={onAddComment}
+          className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onClaimTask || onUnclaimTask || onCollapseEpic || onUncollapseEpic || onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
+        >
+          <svg
+            className="w-3.5 h-3.5 text-zinc-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
+            />
+          </svg>
+          Add comment
+        </button>
+        {onClaimTask && (
+          <button
+            onClick={onClaimTask}
+            className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onCollapseEpic || onUncollapseEpic || onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
+          >
+            <svg
+              className="w-3.5 h-3.5 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+              />
+            </svg>
+            Claim task
+          </button>
+        )}
+        {onUnclaimTask && (
+          <button
+            onClick={onUnclaimTask}
+            className={`w-full px-3 py-2.5 text-xs text-red-500 hover:bg-red-50 flex items-center gap-2 transition-colors${onCollapseEpic || onUncollapseEpic || onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
+          >
+            <svg
+              className="w-3.5 h-3.5 text-red-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M22 10.5h-6m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
+              />
+            </svg>
+            Unclaim task
+          </button>
+        )}
+        {onCollapseEpic && (
+          <button
+            onClick={onCollapseEpic}
+            className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
+          >
+            <svg
+              className="w-3.5 h-3.5 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"
+              />
+            </svg>
+            Collapse epic
+          </button>
+        )}
+        {onUncollapseEpic && (
+          <button
+            onClick={onUncollapseEpic}
+            className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
+          >
+            <svg
+              className="w-3.5 h-3.5 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+              />
+            </svg>
+            Uncollapse epic
+          </button>
+        )}
+        {onFocusEpic && (
+          <button
+            onClick={onFocusEpic}
+            className="w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors"
+          >
+            <svg
+              className="w-3.5 h-3.5 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5M16.5 20.25H18A2.25 2.25 0 0020.25 18v-1.5M7.5 20.25H6A2.25 2.25 0 013.75 18v-1.5"
+              />
+            </svg>
+            Focus on epic
+          </button>
+        )}
+        {onExitFocusEpic && (
+          <button
+            onClick={onExitFocusEpic}
+            className="w-full px-3 py-2.5 text-xs text-emerald-600 hover:bg-emerald-50 flex items-center gap-2 transition-colors"
+          >
+            <svg
+              className="w-3.5 h-3.5 text-emerald-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+              />
+            </svg>
+            Show full graph
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}