heartbeads 0.4.0

package/app/api/v1/ready/route.ts

@@ -0,0 +1,229 @@
+/**
+ * GET /api/v1/ready — Actionable issues for AI agents.
+ *
+ * Returns issues that are ready to work on: open or in_progress
+ * with no unresolved blockers. Sorted by priority (critical first).
+ * No auth required.
+ *
+ * Query params:
+ *   ?unclaimed=true      Only unclaimed issues
+ *   ?type=bug,feature    Filter by issue type (comma-separated)
+ *   ?assignee=handle     Filter by assignee
+ *   ?prefix=beads-map    Filter by repo prefix
+ *   ?limit=20            Max issues returned (default: all)
+ */
+
+import { loadBeadsData } from "@/lib/parse-beads";
+import { discoverBeadsDir } from "@/lib/discover";
+import { fetchBeadsComments, getClaimedNodes } from "@/lib/comments";
+import type { BeadsComment, ClaimInfo } from "@/lib/comments";
+import type { GraphNode } from "@/lib/types";
+import { jsonResponse, errorResponse, OPTIONS } from "@/lib/api-helpers";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+export const dynamic = "force-dynamic";
+export { OPTIONS };
+
+let heartbeadsVersion = "0.0.0";
+try {
+  const pkg = JSON.parse(
+    readFileSync(join(process.cwd(), "package.json"), "utf-8")
+  );
+  heartbeadsVersion = pkg.version || heartbeadsVersion;
+} catch {
+  // ignore
+}
+
+function serializeComment(c: BeadsComment): Record<string, unknown> {
+  return {
+    author: {
+      handle: c.handle,
+      did: c.did,
+      ...(c.displayName ? { displayName: c.displayName } : {}),
+    },
+    text: c.text,
+    createdAt: c.createdAt,
+    likes: c.likes.length,
+    replies: c.replies.map(serializeComment),
+  };
+}
+
+export async function GET(request: Request) {
+  try {
+    const discovery = discoverBeadsDir();
+    const url = new URL(request.url);
+    const params = url.searchParams;
+
+    // Parse query params
+    const unclaimedOnly = params.get("unclaimed") === "true";
+    const typeFilter = params.get("type")?.split(",").filter(Boolean);
+    const assigneeFilter = params.get("assignee") || null;
+    const prefixFilter = params.get("prefix") || null;
+    const limitParam = params.get("limit");
+    const limit = limitParam ? Math.max(parseInt(limitParam) || 0, 1) : null;
+
+    // Load beads data + comments in parallel
+    const [beadsData, commentsResult] = await Promise.all([
+      Promise.resolve(loadBeadsData(discovery.beadsDir)),
+      fetchBeadsComments().catch((err) => {
+        console.error("[api/v1/ready] Failed to fetch comments:", err);
+        return null;
+      }),
+    ]);
+
+    const claims = commentsResult
+      ? getClaimedNodes(commentsResult.allComments)
+      : new Map<string, ClaimInfo>();
+
+    // Build status map for blocker resolution
+    const nodeMap = new Map<string, GraphNode>(
+      beadsData.graphData.nodes.map((n) => [n.id, n])
+    );
+
+    // Filter to "ready" issues:
+    // - status is open or in_progress
+    // - all blockers have status "closed"
+    let readyIssues = beadsData.graphData.nodes.filter((node) => {
+      if (node.status !== "open" && node.status !== "in_progress") {
+        return false;
+      }
+
+      // Check all blockers are closed
+      // blockerIds = IDs of issues that BLOCK this one (i.e. this depends on them)
+      // Actually in the GraphNode, blockerIds are "IDs of issues this blocks"
+      // and dependentIds are "IDs of issues blocking this"
+      // Let me verify: from types.ts comments:
+      //   blockerCount: number;    // issues this blocks
+      //   dependentCount: number;  // issues that depend on this
+      //   blockerIds: string[];    // IDs of issues this blocks
+      //   dependentIds: string[];  // IDs of issues blocking this
+      //
+      // Wait, the naming is confusing. Let me check parse-beads for the actual logic.
+      // In the graph: source = depends_on_id (blocker), target = issue_id (blocked)
+      // So for issue X:
+      //   blockerIds = nodes that X blocks (X is upstream of them)
+      //   dependentIds = nodes that block X (X depends on them, they are upstream)
+      //
+      // For "ready", we need: all of X's UPSTREAM blockers (dependentIds) are closed
+      for (const depId of node.dependentIds) {
+        const depNode = nodeMap.get(depId);
+        if (depNode && depNode.status !== "closed") {
+          return false; // Has an unresolved blocker
+        }
+      }
+
+      return true;
+    });
+
+    // Apply filters
+    if (typeFilter) {
+      readyIssues = readyIssues.filter((n) =>
+        typeFilter.includes(n.issueType)
+      );
+    }
+    if (assigneeFilter) {
+      readyIssues = readyIssues.filter(
+        (n) => n.assignee === assigneeFilter
+      );
+    }
+    if (prefixFilter) {
+      readyIssues = readyIssues.filter((n) => n.prefix === prefixFilter);
+    }
+    if (unclaimedOnly) {
+      readyIssues = readyIssues.filter((n) => !claims.has(n.id));
+    }
+
+    // Sort by priority ascending (0=critical first), then created_at ascending (oldest first)
+    readyIssues.sort((a, b) => {
+      if (a.priority !== b.priority) return a.priority - b.priority;
+      return (
+        new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      );
+    });
+
+    // Apply limit
+    if (limit) {
+      readyIssues = readyIssues.slice(0, limit);
+    }
+
+    // Enrich issues
+    const enrichedIssues = readyIssues.map((node) => {
+      const nodeComments =
+        commentsResult?.commentsByNode.get(node.id) || [];
+      const claim = claims.get(node.id) || null;
+
+      return {
+        id: node.id,
+        title: node.title,
+        description: node.description || null,
+        status: node.status,
+        priority: node.priority,
+        issue_type: node.issueType,
+        owner: node.owner || null,
+        assignee: node.assignee || null,
+        labels: [] as string[],
+        created_at: node.createdAt,
+        updated_at: node.updatedAt,
+        prefix: node.prefix,
+        blockers: node.dependentIds,   // issues that block this one (upstream)
+        dependents: node.blockerIds,   // issues this one blocks (downstream)
+        comments: nodeComments.map(serializeComment),
+        claimed_by: claim
+          ? {
+              handle: claim.handle,
+              did: claim.did,
+              ...(claim.displayName
+                ? { displayName: claim.displayName }
+                : {}),
+              claimed_at: claim.claimedAt,
+            }
+          : null,
+      };
+    });
+
+    // Build summary stats
+    const byPriority: Record<string, number> = {};
+    const byType: Record<string, number> = {};
+    let unclaimed = 0;
+    for (const issue of readyIssues) {
+      const p = String(issue.priority);
+      byPriority[p] = (byPriority[p] || 0) + 1;
+      byType[issue.issueType] = (byType[issue.issueType] || 0) + 1;
+      if (!claims.has(issue.id)) unclaimed++;
+    }
+
+    const warnings: string[] = [];
+    if (!commentsResult) {
+      warnings.push("Failed to fetch comments from indexer");
+    }
+
+    return jsonResponse({
+      issues: enrichedIssues,
+      stats: {
+        total_ready: enrichedIssues.length,
+        unclaimed,
+        by_priority: byPriority,
+        by_type: byType,
+      },
+      _meta: {
+        generated_at: new Date().toISOString(),
+        api_version: "v1" as const,
+        heartbeads_version: heartbeadsVersion,
+        ...(warnings.length ? { warnings } : {}),
+      },
+    });
+  } catch (error: unknown) {
+    const message =
+      error instanceof Error ? error.message : "Unknown error";
+    if (message.includes("No .beads/ directory found")) {
+      return errorResponse(
+        "No .beads directory found",
+        404,
+        "Run bd init in your project first, or set BEADS_DIR."
+      );
+    }
+    console.error("[api/v1/ready] Error:", error);
+    return errorResponse("Internal server error", 500);
+  }
+}

package/app/globals.css

@@ -0,0 +1,230 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ============================================================================
+   Beads Map - Custom Styles
+   Design: Clean, minimal graph visualization
+   ============================================================================ */
+
+@layer base {
+  html,
+  body {
+    @apply h-full overflow-hidden;
+  }
+
+  body {
+    @apply bg-white text-zinc-800 antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@layer components {
+  /* Card with subtle hover lift */
+  .card-lift {
+    @apply transition-all duration-200 ease-out;
+  }
+  .card-lift:hover {
+    @apply shadow-md -translate-y-0.5;
+  }
+
+  /* Status badge base */
+  .status-badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  /* Scrollbar styling */
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+  }
+  .custom-scrollbar::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-zinc-200 rounded-full;
+  }
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply bg-zinc-300;
+  }
+}
+
+@layer utilities {
+  /* Fade in animation */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-out forwards;
+  }
+
+  /* Pulse subtle */
+  @keyframes pulseSoft {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
+  }
+  .animate-pulse-soft {
+    animation: pulseSoft 2s ease-in-out infinite;
+  }
+
+  /* Bead tooltip fade-in */
+  @keyframes beadTooltipFade {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Mobile slide-in drawer from right */
+  @keyframes slideInRight {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  .animate-slide-in-right {
+    animation: slideInRight 0.25s ease-out;
+  }
+
+  /* Mobile bottom action sheet slide-up */
+  @keyframes slideUpSheet {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+  .animate-slide-up-sheet {
+    animation: slideUpSheet 0.2s ease-out;
+  }
+}
+
+/* Markdown prose inside description box */
+.description-markdown h1,
+.description-markdown h2,
+.description-markdown h3,
+.description-markdown h4 {
+  @apply font-semibold text-zinc-700 mt-2 mb-1;
+}
+.description-markdown h1 { font-size: 0.85rem; }
+.description-markdown h2 { font-size: 0.8rem; }
+.description-markdown h3 { font-size: 0.75rem; }
+.description-markdown h4 { font-size: 0.7rem; }
+
+.description-markdown p {
+  @apply mb-1.5;
+}
+.description-markdown p:last-child {
+  @apply mb-0;
+}
+
+.description-markdown ul,
+.description-markdown ol {
+  @apply pl-4 mb-1.5 space-y-0.5;
+}
+.description-markdown ul { @apply list-disc; }
+.description-markdown ol { @apply list-decimal; }
+
+.description-markdown code {
+  @apply bg-zinc-200/60 text-zinc-700 px-1 py-0.5 rounded text-[10px] font-mono;
+}
+.description-markdown pre {
+  @apply bg-zinc-200/60 rounded-md p-2 mb-1.5 overflow-x-auto;
+}
+.description-markdown pre code {
+  @apply bg-transparent p-0 text-[10px];
+}
+
+.description-markdown a {
+  @apply text-emerald-600 underline underline-offset-2 hover:text-emerald-700;
+}
+
+.description-markdown blockquote {
+  @apply border-l-2 border-zinc-300 pl-2 text-zinc-500 italic my-1.5;
+}
+
+.description-markdown table {
+  @apply w-full text-[10px] border-collapse mb-1.5;
+}
+.description-markdown th {
+  @apply text-left font-semibold text-zinc-600 border-b border-zinc-200 pb-0.5 pr-2;
+}
+.description-markdown td {
+  @apply border-b border-zinc-100 py-0.5 pr-2;
+}
+
+.description-markdown hr {
+  @apply border-zinc-200 my-2;
+}
+
+.description-markdown strong {
+  @apply font-semibold text-zinc-700;
+}
+
+.description-markdown img {
+  @apply max-w-full rounded;
+}
+
+/* Timeline slider custom styling */
+.timeline-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+.timeline-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  background: #e4e4e7; /* zinc-200 */
+  border-radius: 2px;
+}
+.timeline-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  background: #10b981; /* emerald-500 */
+  border-radius: 50%;
+  margin-top: -4px;
+  cursor: pointer;
+  transition: transform 0.1s ease;
+}
+.timeline-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+.timeline-slider::-moz-range-track {
+  height: 4px;
+  background: #e4e4e7;
+  border-radius: 2px;
+  border: none;
+}
+.timeline-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: #10b981;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+}
+
+/* Force-graph container overrides */
+.force-graph-container canvas {
+  @apply rounded-lg;
+  touch-action: none; /* Prevent browser gestures from conflicting with graph pan/zoom */
+}

package/app/layout.tsx

@@ -0,0 +1,51 @@
+import type { Metadata, Viewport } from "next";
+import { AuthProvider } from "@/lib/auth";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  metadataBase: new URL(process.env.PUBLIC_URL || "http://localhost:3000"),
+  title: "Heartbeads",
+  description:
+    "Interactive dependency graph viewer for beads issues — see your project's heartbeat",
+  openGraph: {
+    title: "Heartbeads",
+    description: "Interactive dependency graph viewer for beads issues — see your project's heartbeat",
+    type: "website",
+    siteName: "Heartbeads",
+    images: [
+      {
+        url: "/image.png",
+        width: 1200,
+        height: 630,
+        alt: "Heartbeads — interactive dependency graph viewer",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Heartbeads",
+    description: "Interactive dependency graph viewer for beads issues — see your project's heartbeat",
+    images: ["/image.png"],
+  },
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <AuthProvider>{children}</AuthProvider>
+      </body>
+    </html>
+  );
+}

package/app/login/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { BeadsLogo } from "@/components/BeadsLogo";
+
+/**
+ * Password login page for dashboard access control.
+ *
+ * Shown when heartbeads is started with --password flag.
+ * Matches the design language of the 404 page and loading screen:
+ * ECG flatline + animated heartbeat logo, clean centered form.
+ *
+ * This is NOT the ATProto/Bluesky sign-in (that's in the navbar).
+ * This gate controls who can view the dashboard and API.
+ */
+export default function LoginPage() {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [from, setFrom] = useState("/");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Read ?from= query param for post-login redirect (avoid useSearchParams / Suspense)
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const fromParam = params.get("from");
+    if (fromParam) setFrom(fromParam);
+
+    // Auto-focus the password input
+    inputRef.current?.focus();
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!password.trim()) return;
+
+    setError("");
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/auth", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ password: password.trim() }),
+      });
+
+      if (res.ok) {
+        window.location.href = from;
+      } else {
+        const data = await res.json();
+        setError(data.error || "Invalid password");
+      }
+    } catch {
+      setError("Connection error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="h-screen flex flex-col items-center justify-center bg-white text-zinc-800 px-6 select-none">
+      {/* ECG flatline + animated heartbeat logo */}
+      <div className="relative w-full max-w-xs mb-6">
+        <svg
+          viewBox="0 0 320 40"
+          fill="none"
+          className="w-full text-zinc-200"
+          aria-hidden="true"
+        >
+          <line
+            x1="0"
+            y1="20"
+            x2="320"
+            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>
+
+      {/* Title */}
+      <h1
+        className="text-lg font-semibold text-zinc-900 mb-1 animate-fade-in"
+      >
+        heartbeads
+      </h1>
+      <p
+        className="text-sm text-zinc-400 mb-6 animate-fade-in"
+        style={{ animationDelay: "0.05s" }}
+      >
+        This dashboard is password-protected.
+      </p>
+
+      {/* Login form */}
+      <form
+        onSubmit={handleSubmit}
+        className="w-full max-w-xs animate-fade-in"
+        style={{ animationDelay: "0.1s" }}
+      >
+        <input
+          ref={inputRef}
+          type="password"
+          value={password}
+          onChange={(e) => {
+            setPassword(e.target.value);
+            if (error) setError("");
+          }}
+          placeholder="Enter password"
+          className="w-full rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-2.5 text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/30 focus:border-emerald-500 transition-colors"
+          autoComplete="current-password"
+          disabled={loading}
+        />
+
+        {/* Error message */}
+        {error && (
+          <p className="mt-2 text-xs text-red-500 animate-fade-in">
+            {error}
+          </p>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading || !password.trim()}
+          className="mt-3 w-full inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-full bg-emerald-500 text-white text-sm font-medium shadow-sm hover:bg-emerald-600 hover:shadow-md transition-all duration-200 ease-out disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-emerald-500 disabled:hover:shadow-sm"
+        >
+          {loading ? (
+            <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+          ) : (
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+              />
+            </svg>
+          )}
+          {loading ? "Unlocking..." : "Unlock"}
+        </button>
+      </form>
+
+      {/* Footer */}
+      <p
+        className="mt-10 text-[11px] text-zinc-300 animate-fade-in"
+        style={{ animationDelay: "0.15s" }}
+      >
+        password protection enabled
+      </p>
+    </div>
+  );
+}