beads-map 0.1.0

package/bin/beads-map.mjs

@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+// bin/beads-map.mjs
+// CLI entry point for beads-map — 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, "..");
+
+// Parse CLI args
+const args = process.argv.slice(2);
+let port = 3000;
+let beadsDir = process.env.BEADS_DIR || null;
+let dev = false;
+
+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] === "--dev") dev = true;
+  if (args[i] === "--help" || args[i] === "-h") {
+    printHelp();
+    process.exit(0);
+  }
+}
+
+function printHelp() {
+  console.log(`
+beads-map - Interactive dependency graph viewer for beads (bd) issues
+
+USAGE
+  beads-map [options]
+
+OPTIONS
+  --port <number>       Port to serve on (default: 3000)
+  --beads-dir <path>    Explicit .beads/ directory path
+  --dev                 Run in development mode (hot reload)
+  --help, -h            Show this help message
+
+EXAMPLES
+  beads-map                                          # Auto-discover .beads/ from cwd
+  beads-map --port 4000                              # Serve on port 4000
+  beads-map --beads-dir ~/projects/my-app/.beads     # Explicit path
+  BEADS_DIR=../.beads beads-map                      # Via environment variable
+
+DISCOVERY
+  beads-map 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);
+
+// 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(`beads-map 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}`);
+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);
+});
+
+// Forward signals
+process.on("SIGINT", () => next.kill("SIGINT"));
+process.on("SIGTERM", () => next.kill("SIGTERM"));

package/components/AllCommentsPanel.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { useState } from "react";
+import type { BeadsComment } from "@/hooks/useBeadsComments";
+import { HeartIcon } from "@/components/HeartIcon";
+import { formatRelativeTime } from "@/lib/utils";
+
+interface AllCommentsPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  allComments: BeadsComment[];
+  onNodeNavigate: (nodeId: string) => void;
+  isAuthenticated?: boolean;
+  currentDid?: string;
+  onLikeComment?: (comment: BeadsComment) => Promise<void>;
+  onDeleteComment?: (comment: BeadsComment) => Promise<void>;
+}
+
+export default function AllCommentsPanel({
+  isOpen,
+  onClose,
+  allComments,
+  onNodeNavigate,
+  isAuthenticated,
+  currentDid,
+  onLikeComment,
+  onDeleteComment,
+}: AllCommentsPanelProps) {
+  return (
+    <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 ${
+        isOpen ? "translate-x-0" : "translate-x-full"
+      }`}
+    >
+      {/* Header */}
+      <div className="shrink-0 px-5 py-3 border-b border-zinc-100 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
+            All Comments
+          </h2>
+          {allComments.length > 0 && (
+            <span className="px-1.5 py-0.5 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-medium">
+              {allComments.length}
+            </span>
+          )}
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors"
+        >
+          <svg
+            className="w-4 h-4"
+            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>
+
+      {/* Comment list */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar px-5 py-3">
+        {allComments.length > 0 ? (
+          <div className="space-y-0">
+            {/* Only show root comments (without replyTo) — replies are nested */}
+            {allComments.filter(c => !c.replyTo).map((comment) => (
+              <AllCommentCard
+                key={comment.uri}
+                comment={comment}
+                currentDid={currentDid}
+                isAuthenticated={isAuthenticated}
+                onNodeNavigate={onNodeNavigate}
+                onLike={onLikeComment}
+                onDelete={onDeleteComment}
+                depth={0}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <svg
+              className="w-8 h-8 text-zinc-200 mb-3"
+              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>
+            <p className="text-xs text-zinc-400">No comments yet</p>
+            <p className="text-[10px] text-zinc-300 mt-1">
+              Right-click a node to leave a comment
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="shrink-0 px-5 py-2.5 border-t border-zinc-100 bg-zinc-50/50">
+        <div className="text-[10px] text-zinc-400">
+          {allComments.length} comment{allComments.length !== 1 ? "s" : ""} across all issues
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+
+
+// ============================================================================
+// AllCommentCard — individual comment in the all-comments feed
+// ============================================================================
+
+function AllCommentCard({
+  comment,
+  currentDid,
+  isAuthenticated,
+  onNodeNavigate,
+  onLike,
+  onDelete,
+  depth,
+}: {
+  comment: BeadsComment;
+  currentDid?: string;
+  isAuthenticated?: boolean;
+  onNodeNavigate: (nodeId: string) => void;
+  onLike?: (comment: BeadsComment) => Promise<void>;
+  onDelete?: (comment: BeadsComment) => Promise<void>;
+  depth: number;
+}) {
+  const [liking, setLiking] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const isOwn = currentDid && currentDid === comment.did;
+  const hasLiked = currentDid
+    ? comment.likes.some((l) => l.did === currentDid)
+    : false;
+
+  const handleLike = async () => {
+    if (!onLike || liking) return;
+    setLiking(true);
+    try {
+      await onLike(comment);
+    } catch (err) {
+      console.error("Failed to toggle like:", err);
+    } finally {
+      setLiking(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!onDelete || deleting) return;
+    setDeleting(true);
+    try {
+      await onDelete(comment);
+    } catch (err) {
+      console.error("Failed to delete comment:", err);
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div className={`${depth > 0 ? "ml-4 pl-3 border-l border-zinc-100" : ""}`}>
+      <div className={`py-3 ${depth === 0 ? "border-b border-zinc-50" : ""}`}>
+        {/* Node target pill — only show for root comments */}
+        {depth === 0 && (
+          <button
+            onClick={() => onNodeNavigate(comment.nodeId)}
+            className="inline-flex items-center px-1.5 py-0.5 mb-1.5 rounded text-[10px] font-mono bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition-colors"
+          >
+            {comment.nodeId}
+          </button>
+        )}
+
+        {/* Author + time */}
+        <div className="flex items-center gap-1.5 mb-1">
+          <div className="shrink-0 w-4 h-4 rounded-full bg-zinc-100 overflow-hidden">
+            {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-[8px] font-medium text-zinc-400">
+                {(comment.handle || comment.did).charAt(0).toUpperCase()}
+              </div>
+            )}
+          </div>
+          <span className="text-xs font-medium text-zinc-600 truncate">
+            {comment.displayName ||
+              comment.handle ||
+              comment.did.slice(0, 16) + "..."}
+          </span>
+          <span className="text-[10px] text-zinc-300 shrink-0">
+            {formatRelativeTime(comment.createdAt)}
+          </span>
+        </div>
+
+        {/* Comment text */}
+        <p className="text-xs text-zinc-500 leading-relaxed whitespace-pre-wrap break-words">
+          {comment.text}
+        </p>
+
+        {/* Actions */}
+        <div className="flex items-center gap-2 mt-1 text-[10px]">
+          {/* Like */}
+          <button
+            onClick={handleLike}
+            disabled={!isAuthenticated || liking}
+            className={`flex items-center gap-0.5 transition-colors ${
+              hasLiked
+                ? "text-rose-500"
+                : "text-zinc-300 hover:text-rose-500"
+            } disabled:opacity-50`}
+          >
+            <HeartIcon className="w-3 h-3" filled={hasLiked} />
+            {comment.likes.length > 0 && <span>{comment.likes.length}</span>}
+          </button>
+
+          {/* Delete — own only */}
+          {isOwn && onDelete && (
+            <button
+              onClick={handleDelete}
+              disabled={deleting}
+              className="ml-auto text-zinc-300 hover:text-red-400 disabled:opacity-50 transition-colors"
+            >
+              {deleting ? "..." : "delete"}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Nested replies */}
+      {comment.replies.length > 0 && (
+        <div>
+          {comment.replies.map((reply) => (
+            <AllCommentCard
+              key={reply.uri}
+              comment={reply}
+              currentDid={currentDid}
+              isAuthenticated={isAuthenticated}
+              onNodeNavigate={onNodeNavigate}
+              onLike={onLike}
+              onDelete={onDelete}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+

package/components/AuthButton.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useAuth } from "@/lib/auth";
+
+export function AuthButton() {
+  const { isAuthenticated, isLoading, session, login, logout } = useAuth();
+  const [showModal, setShowModal] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [handle, setHandle] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState("");
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!showDropdown) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showDropdown]);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!handle.trim()) return;
+
+    setIsSubmitting(true);
+    setError("");
+
+    try {
+      await login(handle.trim());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    setShowDropdown(false);
+    await logout();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="w-4 h-4 rounded-full border-2 border-zinc-200 border-t-zinc-400 animate-spin" />
+    );
+  }
+
+  if (isAuthenticated && session) {
+    return (
+      <div className="relative" ref={dropdownRef}>
+        <button
+          onClick={() => setShowDropdown((prev) => !prev)}
+          className="flex items-center gap-1.5 hover:opacity-80 transition-opacity cursor-pointer"
+        >
+          {session.avatar ? (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img
+              src={session.avatar}
+              alt={session.handle}
+              width={20}
+              height={20}
+              className="rounded-full"
+            />
+          ) : (
+            <div className="w-5 h-5 rounded-full bg-emerald-100 flex items-center justify-center text-[10px] text-emerald-700 font-medium">
+              {(session.displayName || session.handle).charAt(0).toUpperCase()}
+            </div>
+          )}
+          <span className="text-xs text-zinc-600 max-w-[100px] truncate">
+            {session.displayName || session.handle}
+          </span>
+        </button>
+
+        {showDropdown && (
+          <div className="absolute right-0 top-full mt-2 w-40 bg-white rounded-lg shadow-lg border border-zinc-200 py-1 z-50">
+            <div className="px-3 py-1.5 text-xs text-zinc-400 truncate">
+              @{session.handle}
+            </div>
+            <div className="h-px bg-zinc-100 my-1" />
+            <button
+              onClick={handleLogout}
+              className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-zinc-600 hover:bg-zinc-50 transition-colors cursor-pointer"
+            >
+              <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="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15"
+                />
+              </svg>
+              Sign out
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setShowModal(true)}
+        className="text-xs text-zinc-400 hover:text-zinc-600 transition-colors cursor-pointer whitespace-nowrap"
+      >
+        Sign in
+      </button>
+
+      {showModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]"
+          onClick={() => setShowModal(false)}
+        >
+          {/* Backdrop */}
+          <div className="absolute inset-0 bg-black/20 backdrop-blur-sm" />
+
+          {/* Modal */}
+          <div
+            className="relative w-full max-w-sm mx-4 bg-white rounded-xl shadow-lg border border-zinc-200 p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="text-lg font-semibold text-zinc-900 mb-1">
+              Sign in with ATProto
+            </h2>
+            <p className="text-sm text-zinc-400 mb-5">
+              Enter your Bluesky handle to connect.
+            </p>
+
+            <form onSubmit={handleLogin}>
+              <label
+                htmlFor="auth-handle"
+                className="block text-sm text-zinc-600 mb-1.5"
+              >
+                Handle
+              </label>
+              <input
+                id="auth-handle"
+                type="text"
+                value={handle}
+                onChange={(e) => setHandle(e.target.value)}
+                placeholder="alice.bsky.social"
+                disabled={isSubmitting}
+                autoFocus
+                className="w-full px-3 py-2 text-sm bg-white border border-zinc-200 rounded-lg
+                           placeholder:text-zinc-300
+                           focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-400
+                           disabled:opacity-50 disabled:cursor-not-allowed"
+              />
+              <p className="text-xs text-zinc-300 mt-1.5">
+                Just a username? We&apos;ll add .bsky.social for you.
+              </p>
+
+              {error && <p className="text-sm text-red-500 mt-2">{error}</p>}
+
+              <div className="flex gap-2 mt-5">
+                <button
+                  type="button"
+                  onClick={() => setShowModal(false)}
+                  disabled={isSubmitting}
+                  className="flex-1 px-3 py-2 text-sm text-zinc-600 bg-zinc-50 rounded-lg
+                             hover:bg-zinc-100 transition-colors
+                             disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting || !handle.trim()}
+                  className="flex-1 px-3 py-2 text-sm text-white bg-emerald-600 rounded-lg
+                             hover:bg-emerald-700 transition-colors
+                             disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {isSubmitting ? "Connecting..." : "Connect"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}