beads-map 0.2.0 → 0.2.2

package/app/page.tsx

@@ -14,9 +14,17 @@ import { CommentTooltip } from "@/components/CommentTooltip";
 import { ContextMenu } from "@/components/ContextMenu";
 import { DescriptionModal } from "@/components/DescriptionModal";
 import AllCommentsPanel from "@/components/AllCommentsPanel";
+import { ActivityOverlay } from "@/components/ActivityOverlay";
+import { ActivityPanel } from "@/components/ActivityPanel";
 import { useBeadsComments } from "@/hooks/useBeadsComments";
 import type { BeadsComment } from "@/hooks/useBeadsComments";
 import { useAuth } from "@/lib/auth";
+import {
+  buildHistoricalFeed,
+  diffToActivityEvents,
+  mergeFeedEvents,
+} from "@/lib/activity";
+import type { ActivityEvent } from "@/lib/activity";
 import { buildTimelineEvents, filterDataAtTime } from "@/lib/timeline";
 import type { TimelineRange } from "@/lib/timeline";
 import TimelineBar from "@/components/TimelineBar";
@@ -231,6 +239,22 @@ export default function Home() {
   // All Comments panel state
   const [allCommentsPanelOpen, setAllCommentsPanelOpen] = useState(false);
 
+  // Activity feed state
+  const [activityFeed, setActivityFeed] = useState<ActivityEvent[]>([]);
+  const [activityPanelOpen, setActivityPanelOpen] = useState(false);
+  const [activityOverlayCollapsed, setActivityOverlayCollapsed] = useState(false);
+
+  // Rebuild historical feed when data or comments change
+  useEffect(() => {
+    if (!data) return;
+    const historical = buildHistoricalFeed(
+      data.graphData.nodes,
+      data.graphData.links,
+      allComments
+    );
+    setActivityFeed((prev) => mergeFeedEvents(prev, historical));
+  }, [data, allComments]);
+
   // Context menu state for right-click (phase 1: shows ContextMenu)
   const [contextMenu, setContextMenu] = useState<{
     node: GraphNode;
@@ -254,6 +278,7 @@ export default function Home() {
     handle: string;
     avatar?: string;
     claimedAt: string;
+    did?: string;
     x: number;
     y: number;
   } | null>(null);
@@ -308,6 +333,12 @@ export default function Home() {
 
           if (!diff.hasChanges) return; // No-op if nothing changed
 
+          // Append real-time activity events from the diff
+          const diffEvents = diffToActivityEvents(diff, newData.graphData.nodes);
+          if (diffEvents.length > 0) {
+            setActivityFeed((prev) => mergeFeedEvents(prev, diffEvents));
+          }
+
           // Merge: stamp animation metadata and preserve positions
           const mergedData = mergeBeadsData(oldData, newData, diff);
           prevDataRef.current = mergedData;
@@ -482,6 +513,7 @@ export default function Home() {
   const handleNodeClick = useCallback((node: GraphNode) => {
     setSelectedNode((prev) => (prev?.id === node.id ? null : node));
     setAllCommentsPanelOpen(false);
+    setActivityPanelOpen(false);
   }, []);
 
   const handleNodeHover = useCallback((node: GraphNode | null) => {
@@ -858,7 +890,7 @@ export default function Home() {
                 {projectName}
               </h1>
               <span className="font-normal text-zinc-400 text-[15px] hidden sm:inline">
-                Beads
+                heartbeads
               </span>
               {repoCount > 1 && (
                 <span className="text-[10px] text-zinc-400 bg-zinc-100 rounded-full px-1.5 py-0.5 font-medium hidden sm:inline">
@@ -1051,7 +1083,10 @@ export default function Home() {
             <button
               onClick={() => {
                 setAllCommentsPanelOpen((prev) => !prev);
-                if (!allCommentsPanelOpen) setSelectedNode(null);
+                if (!allCommentsPanelOpen) {
+                  setSelectedNode(null);
+                  setActivityPanelOpen(false);
+                }
               }}
               className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full transition-colors ${
                 allCommentsPanelOpen
@@ -1074,6 +1109,33 @@ export default function Home() {
               </svg>
               <span className="hidden sm:inline">Comments</span>
             </button>
+            {/* Activity pill */}
+            <button
+              onClick={() => {
+                setActivityPanelOpen((prev) => !prev);
+                if (!activityPanelOpen) {
+                  setSelectedNode(null);
+                  setAllCommentsPanelOpen(false);
+                }
+              }}
+              className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full transition-colors ${
+                activityPanelOpen
+                  ? "text-emerald-700 bg-emerald-50"
+                  : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+              }`}
+            >
+              <svg
+                className="w-3.5 h-3.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>
+              <span className="hidden sm:inline">Activity</span>
+            </button>
             <div className="w-px h-5 bg-zinc-200 mx-2" />
             <AuthButton />
           </div>
@@ -1109,11 +1171,15 @@ export default function Home() {
             onAvatarHover={setAvatarTooltip}
             timelineActive={timelineActive}
             stats={data.stats}
+            sidebarOpen={!!selectedNode || allCommentsPanelOpen || activityPanelOpen}
           />
 
           {/* Timeline bar — replaces legend hint when active */}
           {timelineActive && timelineRange && timelineRange.events.length > 0 && (
-            <div className="absolute bottom-4 right-4 z-10">
+            <div
+              className="absolute bottom-4 z-10 transition-[right] duration-300 ease-out"
+              style={{ right: selectedNode || allCommentsPanelOpen || activityPanelOpen ? "calc(360px + 1rem)" : "1rem" }}
+            >
               <TimelineBar
                 totalSteps={timelineRange.events.length}
                 currentStep={Math.max(timelineStep, 0)}
@@ -1127,6 +1193,26 @@ export default function Home() {
             </div>
           )}
 
+          {/* Activity overlay — top-right of canvas */}
+          {!selectedNode && !allCommentsPanelOpen && !activityPanelOpen && !timelineActive && (
+            <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-10">
+              <ActivityOverlay
+                events={activityFeed}
+                collapsed={activityOverlayCollapsed}
+                onToggleCollapse={() => setActivityOverlayCollapsed((prev) => !prev)}
+                onExpandPanel={() => {
+                  setActivityPanelOpen(true);
+                  setSelectedNode(null);
+                  setAllCommentsPanelOpen(false);
+                }}
+                onNodeClick={(nodeId) => {
+                  const node = data?.graphData.nodes.find((n) => n.id === nodeId);
+                  if (node) focusNode(node);
+                }}
+              />
+            </div>
+          )}
+
           {/* Right-click context menu */}
           {contextMenu && (
             <ContextMenu
@@ -1222,7 +1308,19 @@ export default function Home() {
                 )}
                 <div className="flex flex-col">
                   <span className="text-xs text-zinc-700 whitespace-nowrap">
-                    <span className="font-semibold text-zinc-800">{avatarTooltip.handle}</span> claimed this task
+                    {avatarTooltip.did ? (
+                      <a
+                        href={`https://www.impactindexer.org/data?did=${avatarTooltip.did}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="font-semibold text-zinc-800 hover:text-emerald-600 transition-colors"
+                        style={{ pointerEvents: "auto" }}
+                      >
+                        {avatarTooltip.handle}
+                      </a>
+                    ) : (
+                      <span className="font-semibold text-zinc-800">{avatarTooltip.handle}</span>
+                    )} claimed this task
                   </span>
                   <span className="text-[10px] text-zinc-400">
                     {formatRelativeTime(avatarTooltip.claimedAt)}
@@ -1249,14 +1347,14 @@ export default function Home() {
               onClick={() => {
                 setSelectedNode(null);
               }}
-              className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors"
+              className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors rounded-full hover:bg-zinc-100"
             >
               <svg
                 className="w-4 h-4"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
-                strokeWidth={2}
+                strokeWidth={1.5}
               >
                 <path
                   strokeLinecap="round"
@@ -1368,6 +1466,20 @@ export default function Home() {
           onLikeComment={handleLikeComment}
           onDeleteComment={handleDeleteComment}
         />
+
+        {/* Activity panel */}
+        <ActivityPanel
+          events={activityFeed}
+          isOpen={activityPanelOpen}
+          onClose={() => setActivityPanelOpen(false)}
+          onNodeClick={(nodeId) => {
+            const node = data?.graphData.nodes.find((n) => n.id === nodeId);
+            if (node) {
+              focusNode(node);
+              setActivityPanelOpen(false);
+            }
+          }}
+        />
       </div>
     </div>
   );

package/bin/beads-map.mjs

@@ -10,6 +10,38 @@ 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 beads-map` 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;

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} />;
+}