heartbeads 0.4.0

package/bin/heartbeads.mjs

@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+// bin/heartbeads.mjs
+// CLI entry point for heartbeads — starts a Next.js server serving the graph UI
+
+import { execSync, spawn } from "child_process";
+import { existsSync, readFileSync, statSync } from "fs";
+import { resolve, join, dirname, basename, parse as pathParse } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const viewerRoot = resolve(__dirname, "..");
+
+// Load .env.local and .env from the user's working directory.
+// Next.js only loads these from its own cwd (the package dir), not from where
+// the user invoked the CLI. This ensures PUBLIC_URL, ATPROTO_JWK_PRIVATE, etc.
+// are available when running `npx heartbeads` from a project directory.
+for (const envFile of [".env.local", ".env"]) {
+  const envPath = join(process.cwd(), envFile);
+  if (existsSync(envPath)) {
+    try {
+      const content = readFileSync(envPath, "utf-8");
+      for (const line of content.split("\n")) {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith("#")) continue;
+        const eqIdx = trimmed.indexOf("=");
+        if (eqIdx === -1) continue;
+        const key = trimmed.slice(0, eqIdx).trim();
+        let val = trimmed.slice(eqIdx + 1).trim();
+        // Strip surrounding quotes
+        if ((val.startsWith('"') && val.endsWith('"')) ||
+            (val.startsWith("'") && val.endsWith("'"))) {
+          val = val.slice(1, -1);
+        }
+        // Don't override existing env vars (explicit shell vars win)
+        if (!(key in process.env)) {
+          process.env[key] = val;
+        }
+      }
+    } catch {
+      // ignore read errors
+    }
+  }
+}
+
+// Parse CLI args
+const args = process.argv.slice(2);
+let port = 3000;
+let beadsDir = process.env.BEADS_DIR || null;
+let dev = false;
+let password = process.env.HEARTBEADS_PASSWORD || null;
+
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === "--port" && args[i + 1]) port = parseInt(args[++i]);
+  if (args[i] === "--beads-dir" && args[i + 1]) beadsDir = args[++i];
+  if (args[i] === "--password" && args[i + 1]) password = args[++i];
+  if (args[i] === "--dev") dev = true;
+  if (args[i] === "--help" || args[i] === "-h") {
+    printHelp();
+    process.exit(0);
+  }
+}
+
+function printHelp() {
+  console.log(`
+heartbeads - Interactive dependency graph viewer for beads (bd) issues
+
+USAGE
+  heartbeads [options]
+
+OPTIONS
+  --port <number>       Port to serve on (default: 3000)
+  --beads-dir <path>    Explicit .beads/ directory path
+  --password <string>   Require a password to access the dashboard and API
+  --dev                 Run in development mode (hot reload)
+  --help, -h            Show this help message
+
+EXAMPLES
+  heartbeads                                          # Auto-discover .beads/ from cwd
+  heartbeads --port 4000                              # Serve on port 4000
+  heartbeads --beads-dir ~/projects/my-app/.beads     # Explicit path
+  heartbeads --password secret                        # Password-protected mode
+  BEADS_DIR=../.beads heartbeads                      # Via environment variable
+  HEARTBEADS_PASSWORD=s3cret heartbeads               # Password via env var
+
+DISCOVERY
+  heartbeads walks up from the current directory looking for a .beads/ folder,
+  just like git finds .git/. Set BEADS_DIR to override.
+`);
+}
+
+// Set BEADS_DIR so the API route can find it
+if (beadsDir) process.env.BEADS_DIR = resolve(beadsDir);
+
+// Set HEARTBEADS_PASSWORD so middleware can read it
+if (password) process.env.HEARTBEADS_PASSWORD = password;
+
+// Discover .beads/ for the startup message
+function discover(startDir) {
+  const envDir = process.env.BEADS_DIR;
+  if (envDir) {
+    const resolved = resolve(envDir);
+    if (basename(resolved) === ".beads") return resolved;
+    if (existsSync(join(resolved, ".beads"))) return join(resolved, ".beads");
+    return resolved;
+  }
+
+  let current = resolve(startDir || process.cwd());
+  const { root } = pathParse(current);
+
+  while (true) {
+    const candidate = join(current, ".beads");
+    if (existsSync(candidate) && statSync(candidate).isDirectory()) {
+      return candidate;
+    }
+    if (current === root) return null;
+    current = dirname(current);
+  }
+}
+
+const discovered = discover(process.cwd());
+
+// Read package.json for version
+let version = "0.1.0";
+try {
+  const pkg = JSON.parse(
+    readFileSync(join(viewerRoot, "package.json"), "utf-8")
+  );
+  version = pkg.version || version;
+} catch {
+  // ignore
+}
+
+console.log(`heartbeads v${version}`);
+
+if (discovered) {
+  const repoRoot = dirname(discovered);
+  console.log(`Found beads in ${repoRoot}`);
+
+  // Count issues
+  const issuesPath = join(discovered, "issues.jsonl");
+  if (existsSync(issuesPath)) {
+    try {
+      const content = readFileSync(issuesPath, "utf-8");
+      const lines = content.split("\n").filter((l) => l.trim().length > 0);
+      const issueCount = lines.length;
+
+      // Count repos from config.yaml
+      let repoCount = 1;
+      const configPath = join(discovered, "config.yaml");
+      if (existsSync(configPath)) {
+        const configContent = readFileSync(configPath, "utf-8");
+        const additionalMatches = configContent.match(
+          /^\s+-\s+\.\.\//gm
+        );
+        if (additionalMatches) repoCount += additionalMatches.length;
+      }
+
+      console.log(
+        `Loading ${issueCount} issues across ${repoCount} project${repoCount !== 1 ? "s" : ""}`
+      );
+    } catch {
+      // ignore count errors
+    }
+  }
+
+  // Set BEADS_DIR if not already set
+  if (!process.env.BEADS_DIR) {
+    process.env.BEADS_DIR = discovered;
+  }
+} else {
+  console.log(
+    "Warning: No .beads/ directory found. Run bd init in your project first."
+  );
+}
+
+// Auto-build if no .next production build exists (unless --dev)
+const buildIdPath = join(viewerRoot, ".next", "BUILD_ID");
+if (!dev && !existsSync(buildIdPath)) {
+  console.log("No production build found, building...");
+  try {
+    execSync("npx next build", {
+      cwd: viewerRoot,
+      stdio: "inherit",
+      env: { ...process.env },
+    });
+    console.log();
+  } catch (err) {
+    console.error("Build failed. Try running with --dev instead.");
+    process.exit(1);
+  }
+}
+
+const mode = dev ? "dev" : "start";
+console.log(`Serving at http://localhost:${port}`);
+if (password) {
+  console.log(`Dashboard is password-protected`);
+  console.log(`API auth: curl -H "Authorization: Bearer <password>" ...`);
+}
+console.log();
+
+// Start Next.js
+const next = spawn("npx", ["next", mode, "-p", String(port)], {
+  cwd: viewerRoot,
+  stdio: "inherit",
+  env: { ...process.env },
+});
+
+next.on("error", (err) => {
+  console.error("Failed to start Next.js:", err.message);
+  process.exit(1);
+});
+
+next.on("close", (code) => {
+  process.exit(code || 0);
+});
+
+// Clean shutdown on signals — kill child and exit
+function shutdown() {
+  next.kill("SIGTERM");
+  // Force exit after 2s if child doesn't close
+  setTimeout(() => process.exit(0), 2000).unref();
+}
+
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);

package/components/ActivityItem.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+import type { ActivityEvent, ActivityEventType } from "@/lib/activity";
+import { formatRelativeTime } from "@/lib/utils";
+
+// ============================================================================
+// Event type icons (inline SVG for each category)
+// ============================================================================
+
+function EventIcon({ type, className }: { type: ActivityEventType; className?: string }) {
+  const cls = className || "w-3.5 h-3.5 shrink-0";
+
+  switch (type) {
+    case "node-created":
+      return (
+        <svg className={`${cls} text-emerald-500`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <circle cx="8" cy="8" r="6" />
+          <line x1="8" y1="5" x2="8" y2="11" />
+          <line x1="5" y1="8" x2="11" y2="8" />
+        </svg>
+      );
+    case "node-closed":
+      return (
+        <svg className={`${cls} text-zinc-400`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <circle cx="8" cy="8" r="6" />
+          <polyline points="5.5,8 7.5,10 10.5,6" />
+        </svg>
+      );
+    case "node-status-changed":
+      return (
+        <svg className={`${cls} text-amber-500`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <path d="M3 8h10M10 5l3 3-3 3" />
+        </svg>
+      );
+    case "node-priority-changed":
+      return (
+        <svg className={`${cls} text-amber-500`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <path d="M8 3v7M5 6l3-3 3 3M4 13h8" />
+        </svg>
+      );
+    case "node-title-changed":
+      return (
+        <svg className={`${cls} text-amber-500`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <path d="M3 4h10M3 8h6M3 12h8" />
+        </svg>
+      );
+    case "node-owner-changed":
+      return (
+        <svg className={`${cls} text-amber-500`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <circle cx="6" cy="6" r="2.5" />
+          <path d="M1.5 13c0-2 1.8-3.5 4.5-3.5M10 9l2 2 3-3" />
+        </svg>
+      );
+    case "link-added":
+      return (
+        <svg className={`${cls} text-blue-500`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <path d="M6.5 9.5l3-3M4 11a2.5 2.5 0 003.5 0l1-1M8.5 6a2.5 2.5 0 013.5 0l0 0" />
+        </svg>
+      );
+    case "link-removed":
+      return (
+        <svg className={`${cls} text-red-400`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <path d="M4 11a2.5 2.5 0 003.5 0l1-1M8.5 6a2.5 2.5 0 013.5 0l0 0" />
+          <line x1="3" y1="3" x2="13" y2="13" strokeWidth="1.5" />
+        </svg>
+      );
+    case "comment-added":
+    case "reply-added":
+      return (
+        <svg className={`${cls} text-blue-500`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <path d="M2 4.5a1.5 1.5 0 011.5-1.5h9A1.5 1.5 0 0114 4.5v5a1.5 1.5 0 01-1.5 1.5H5L2 14V4.5z" />
+        </svg>
+      );
+    case "task-claimed":
+      return (
+        <svg className={`${cls} text-emerald-500`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <circle cx="8" cy="5.5" r="2.5" />
+          <path d="M3 13.5c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5" />
+        </svg>
+      );
+    case "task-unclaimed":
+      return (
+        <svg className={`${cls} text-red-400`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <circle cx="8" cy="5.5" r="2.5" />
+          <path d="M3 13.5c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5" />
+          <line x1="11" y1="3" x2="13" y2="5" />
+        </svg>
+      );
+    case "like-added":
+      return (
+        <svg className={`${cls} text-rose-400`} viewBox="0 0 16 16" fill="currentColor">
+          <path d="M8 13.7l-.6-.5C4 10.2 2 8.3 2 6a3 3 0 016-1 3 3 0 016 1c0 2.3-2 4.2-5.4 7.2l-.6.5z" />
+        </svg>
+      );
+  }
+}
+
+// ============================================================================
+// Event type -> accent color for left border/indicator
+// ============================================================================
+
+function getEventAccentColor(type: ActivityEventType): string {
+  switch (type) {
+    case "node-created":
+    case "task-claimed":
+      return "bg-emerald-400";
+    case "node-closed":
+      return "bg-zinc-300";
+    case "node-status-changed":
+    case "node-priority-changed":
+    case "node-title-changed":
+    case "node-owner-changed":
+      return "bg-amber-400";
+    case "link-added":
+    case "comment-added":
+    case "reply-added":
+      return "bg-blue-400";
+    case "link-removed":
+    case "task-unclaimed":
+      return "bg-red-300";
+    case "like-added":
+      return "bg-rose-300";
+  }
+}
+
+// ============================================================================
+// Event description text
+// ============================================================================
+
+function describeEvent(event: ActivityEvent): string {
+  switch (event.type) {
+    case "node-created": {
+      const typeLabel = event.meta?.issueType || "task";
+      return `${typeLabel} created`;
+    }
+    case "node-closed":
+      return `closed${event.detail && event.detail !== "Closed" ? ` (${event.detail})` : ""}`;
+    case "node-status-changed":
+      return event.detail || "status changed";
+    case "node-priority-changed":
+      return `priority ${event.detail || "changed"}`;
+    case "node-title-changed":
+      return "title updated";
+    case "node-owner-changed":
+      return `owner ${event.detail || "changed"}`;
+    case "link-added":
+      return `dep added: ${event.meta?.target || ""}`;
+    case "link-removed":
+      return `dep removed: ${event.meta?.target || ""}`;
+    case "comment-added":
+      return event.detail || "commented";
+    case "reply-added":
+      return event.detail || "replied";
+    case "task-claimed":
+      return "claimed this task";
+    case "task-unclaimed":
+      return "unclaimed this task";
+    case "like-added":
+      return event.detail || "liked a comment";
+  }
+}
+
+// ============================================================================
+// Compact variant (single-line, for overlay) — with left accent bar
+// ============================================================================
+
+function CompactItem({
+  event,
+  onNodeClick,
+}: {
+  event: ActivityEvent;
+  onNodeClick?: (nodeId: string) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2 py-2 px-3 group hover:bg-zinc-50/60 transition-colors">
+      {/* Left accent dot */}
+      <div className={`w-1 h-1 rounded-full shrink-0 ${getEventAccentColor(event.type)}`} />
+
+      {/* Icon */}
+      <EventIcon type={event.type} className="w-3 h-3 shrink-0" />
+
+      {/* Content */}
+      <div className="flex-1 min-w-0 text-[11px] text-zinc-600 truncate">
+        {event.actor ? (
+          <>
+            {event.actor.did ? (
+              <a
+                href={`https://www.impactindexer.org/data?did=${event.actor.did}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium text-zinc-800 hover:text-emerald-600 transition-colors"
+              >
+                {event.actor.handle.split(".")[0]}
+              </a>
+            ) : (
+              <span className="font-medium text-zinc-800">
+                {event.actor.handle.split(".")[0]}
+              </span>
+            )}
+            {" "}
+          </>
+        ) : onNodeClick ? (
+          <>
+            <button
+              onClick={() => onNodeClick(event.nodeId)}
+              className="font-medium text-zinc-700 hover:text-emerald-600 transition-colors"
+            >
+              {event.nodeId}
+            </button>
+            {" "}
+          </>
+        ) : null}
+        <span className="text-zinc-500">{describeEvent(event)}</span>
+      </div>
+
+      {/* Timestamp */}
+      <span className="text-[10px] text-zinc-400 shrink-0 tabular-nums opacity-0 group-hover:opacity-100 transition-opacity">
+        {formatRelativeTime(new Date(event.time).toISOString())}
+      </span>
+    </div>
+  );
+}
+
+// ============================================================================
+// Full variant (rich, for panel) — with left accent bar and richer layout
+// ============================================================================
+
+function FullItem({
+  event,
+  onNodeClick,
+}: {
+  event: ActivityEvent;
+  onNodeClick?: (nodeId: string) => void;
+}) {
+  return (
+    <div className="flex gap-3 py-3 px-4 hover:bg-zinc-50/50 transition-colors group">
+      {/* Left accent bar */}
+      <div className={`w-0.5 self-stretch rounded-full shrink-0 ${getEventAccentColor(event.type)}`} />
+
+      {/* Avatar or icon */}
+      <div className="mt-0.5 shrink-0">
+        {event.actor?.avatar ? (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img
+            src={event.actor.avatar}
+            alt={event.actor.handle}
+            className="w-7 h-7 rounded-full ring-1 ring-zinc-100"
+          />
+        ) : event.actor ? (
+          <div className="w-7 h-7 rounded-full bg-zinc-100 flex items-center justify-center text-[11px] font-medium text-zinc-500">
+            {event.actor.handle.charAt(0).toUpperCase()}
+          </div>
+        ) : (
+          <div className="w-7 h-7 rounded-full bg-zinc-50 flex items-center justify-center">
+            <EventIcon type={event.type} className="w-3.5 h-3.5" />
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {/* Actor + action text */}
+        <div className="flex items-baseline gap-1.5 text-[12px] leading-snug">
+          {event.actor && (
+            event.actor.did ? (
+              <a
+                href={`https://www.impactindexer.org/data?did=${event.actor.did}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-semibold text-zinc-800 hover:text-emerald-600 transition-colors truncate max-w-[140px]"
+              >
+                {event.actor.handle.split(".")[0]}
+              </a>
+            ) : (
+              <span className="font-semibold text-zinc-800 truncate max-w-[140px]">
+                {event.actor.handle.split(".")[0]}
+              </span>
+            )
+          )}
+          <span className="text-zinc-500">{describeEvent(event)}</span>
+        </div>
+
+        {/* Node ID pill + title */}
+        <div className="flex items-center gap-1.5 mt-1">
+          {onNodeClick && (
+            <button
+              onClick={() => onNodeClick(event.nodeId)}
+              className="inline-flex items-center px-1.5 py-0.5 text-[10px] font-mono font-medium text-emerald-700 bg-emerald-50 rounded-md hover:bg-emerald-100 transition-colors"
+            >
+              {event.nodeId}
+            </button>
+          )}
+          {event.nodeTitle && (
+            <span className="text-[11px] text-zinc-400 truncate">
+              {event.nodeTitle}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Timestamp */}
+      <span className="text-[10px] text-zinc-400 shrink-0 tabular-nums mt-0.5">
+        {formatRelativeTime(new Date(event.time).toISOString())}
+      </span>
+    </div>
+  );
+}
+
+// ============================================================================
+// Exported component
+// ============================================================================
+
+export function ActivityItem({
+  event,
+  variant = "compact",
+  onNodeClick,
+}: {
+  event: ActivityEvent;
+  variant?: "compact" | "full";
+  onNodeClick?: (nodeId: string) => void;
+}) {
+  if (variant === "compact") {
+    return <CompactItem event={event} onNodeClick={onNodeClick} />;
+  }
+  return <FullItem event={event} onNodeClick={onNodeClick} />;
+}

package/components/ActivityOverlay.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import type { ActivityEvent } from "@/lib/activity";
+import { ActivityItem } from "./ActivityItem";
+
+interface Props {
+  events: ActivityEvent[];
+  collapsed: boolean;
+  compact?: boolean;
+  onToggleCollapse: () => void;
+  onExpandPanel: () => void;
+  onNodeClick: (nodeId: string) => void;
+}
+
+/**
+ * Compact always-visible activity card in the top-right of the graph canvas.
+ * Shows latest 5 events. Click "See all" to open the full ActivityPanel.
+ */
+export function ActivityOverlay({
+  events,
+  collapsed,
+  compact,
+  onToggleCollapse,
+  onExpandPanel,
+  onNodeClick,
+}: Props) {
+  // Count events in last 5 minutes for the collapsed badge
+  const recentCount = events.filter(
+    (e) => Date.now() - e.time < 5 * 60 * 1000
+  ).length;
+
+  if (collapsed) {
+    return (
+      <button
+        onClick={onToggleCollapse}
+        className="group flex items-center gap-2 px-3 py-2 bg-white/90 backdrop-blur-sm rounded-full border border-zinc-200/80 shadow-sm hover:bg-white hover:shadow-md transition-all"
+        title="Show activity feed"
+      >
+        <svg
+          className="w-3.5 h-3.5 text-zinc-400 group-hover:text-emerald-500 transition-colors"
+          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="text-xs text-zinc-500 group-hover:text-zinc-700 transition-colors">Activity</span>
+        {recentCount > 0 && (
+          <span className="text-[10px] font-medium text-white bg-emerald-500 rounded-full px-1.5 py-0.5 min-w-[18px] text-center leading-tight">
+            {recentCount}
+          </span>
+        )}
+      </button>
+    );
+  }
+
+  return (
+    <div className={`${compact ? "w-60" : "w-72"} bg-white/95 backdrop-blur-sm rounded-xl border border-zinc-200/80 shadow-lg overflow-hidden`}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-3.5 py-2.5 border-b border-zinc-100/80">
+        <div className="flex items-center gap-2">
+          <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+          <span className="text-[11px] font-semibold text-zinc-600">
+            Live Activity
+          </span>
+        </div>
+        <button
+          onClick={onToggleCollapse}
+          className="text-zinc-400 hover:text-zinc-600 transition-colors p-1 -mr-0.5 rounded-full hover:bg-zinc-100"
+          title="Collapse"
+        >
+          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Event list */}
+      <div className="py-0.5 max-h-[260px] overflow-y-auto custom-scrollbar">
+        {events.length === 0 ? (
+          <div className="py-6 text-center">
+            <svg className="w-5 h-5 text-zinc-200 mx-auto mb-1.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>
+            <p className="text-[11px] text-zinc-400">No activity yet</p>
+          </div>
+        ) : (
+          events.slice(0, compact ? 3 : 6).map((event, i) => (
+            <div
+              key={event.id}
+              className={i === 0 ? "bg-emerald-50/30" : ""}
+            >
+              <ActivityItem
+                event={event}
+                variant="compact"
+                onNodeClick={onNodeClick}
+              />
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Footer */}
+      {events.length > 0 && (
+        <div className="flex items-center justify-between px-3.5 py-2 border-t border-zinc-100/80 bg-zinc-50/30">
+          <span className="text-[10px] text-zinc-400">
+            {events.length} event{events.length !== 1 ? "s" : ""}
+          </span>
+          <button
+            onClick={onExpandPanel}
+            className="text-[11px] text-emerald-600 hover:text-emerald-700 transition-colors font-medium flex items-center gap-1"
+          >
+            See all
+            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}