beads-map 0.1.0

package/app/api/records/route.ts

@@ -0,0 +1,168 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAuthenticatedAgent } from "@/lib/agent";
+import { getSession } from "@/lib/session";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * POST /api/records — Create a new record
+ * Body: { collection, rkey?, record }
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const session = await getSession();
+    if (!session.did) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const agent = await getAuthenticatedAgent();
+    if (!agent) {
+      return NextResponse.json(
+        { error: "Failed to authenticate" },
+        { status: 401 }
+      );
+    }
+
+    const body = await request.json();
+    const { collection, rkey, record } = body;
+
+    if (!collection || typeof collection !== "string") {
+      return NextResponse.json(
+        { error: "Collection is required" },
+        { status: 400 }
+      );
+    }
+    if (!record || typeof record !== "object") {
+      return NextResponse.json(
+        { error: "Record is required" },
+        { status: 400 }
+      );
+    }
+
+    const res = await agent.com.atproto.repo.createRecord({
+      repo: session.did,
+      collection,
+      rkey: rkey || undefined,
+      record,
+    });
+
+    return NextResponse.json({
+      success: true,
+      uri: res.data.uri,
+      cid: res.data.cid,
+    });
+  } catch (error) {
+    console.error("Failed to create record:", error);
+    const message =
+      error instanceof Error ? error.message : "Failed to create record";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+/**
+ * PUT /api/records — Update an existing record
+ * Body: { collection, rkey, record }
+ */
+export async function PUT(request: NextRequest) {
+  try {
+    const session = await getSession();
+    if (!session.did) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const agent = await getAuthenticatedAgent();
+    if (!agent) {
+      return NextResponse.json(
+        { error: "Failed to authenticate" },
+        { status: 401 }
+      );
+    }
+
+    const body = await request.json();
+    const { collection, rkey, record } = body;
+
+    if (!collection || typeof collection !== "string") {
+      return NextResponse.json(
+        { error: "Collection is required" },
+        { status: 400 }
+      );
+    }
+    if (!rkey || typeof rkey !== "string") {
+      return NextResponse.json(
+        { error: "Record key is required" },
+        { status: 400 }
+      );
+    }
+    if (!record || typeof record !== "object") {
+      return NextResponse.json(
+        { error: "Record is required" },
+        { status: 400 }
+      );
+    }
+
+    await agent.com.atproto.repo.putRecord({
+      repo: session.did,
+      collection,
+      rkey,
+      record,
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Failed to update record:", error);
+    const message =
+      error instanceof Error ? error.message : "Failed to update record";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/records?collection=...&rkey=...
+ * Deletes a record from the authenticated user's repo.
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const session = await getSession();
+    if (!session.did) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const agent = await getAuthenticatedAgent();
+    if (!agent) {
+      return NextResponse.json(
+        { error: "Failed to authenticate" },
+        { status: 401 }
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const collection = searchParams.get("collection");
+    const rkey = searchParams.get("rkey");
+
+    if (!collection) {
+      return NextResponse.json(
+        { error: "Collection is required" },
+        { status: 400 }
+      );
+    }
+    if (!rkey) {
+      return NextResponse.json(
+        { error: "Record key is required" },
+        { status: 400 }
+      );
+    }
+
+    await agent.com.atproto.repo.deleteRecord({
+      repo: session.did,
+      collection,
+      rkey,
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Failed to delete record:", error);
+    const message =
+      error instanceof Error ? error.message : "Failed to delete record";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/app/api/status/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import { getSession } from "@/lib/session";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    const session = await getSession();
+
+    if (!session.did) {
+      return NextResponse.json({ authenticated: false });
+    }
+
+    return NextResponse.json({
+      authenticated: true,
+      did: session.did,
+      handle: session.handle,
+      displayName: session.displayName,
+      avatar: session.avatar,
+    });
+  } catch (error) {
+    console.error("Status check failed:", error);
+    return NextResponse.json({ authenticated: false });
+  }
+}

package/app/globals.css

@@ -0,0 +1,192 @@
+@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;
+  }
+}
+
+/* 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,30 @@
+import type { Metadata, Viewport } from "next";
+import { AuthProvider } from "@/lib/auth";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Beads Map",
+  description:
+    "Interactive dependency graph viewer for beads issues",
+};
+
+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>
+  );
+}