beads-map 0.2.0 → 0.2.2

package/components/ActivityOverlay.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import type { ActivityEvent } from "@/lib/activity";
+import { ActivityItem } from "./ActivityItem";
+
+interface Props {
+  events: ActivityEvent[];
+  collapsed: 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,
+  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="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, 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>
+  );
+}

package/components/ActivityPanel.tsx

@@ -0,0 +1,345 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import type { ActivityEvent, ActivityFilterCategory } from "@/lib/activity";
+import { getEventCategory } from "@/lib/activity";
+import { ActivityItem } from "./ActivityItem";
+
+interface Props {
+  events: ActivityEvent[];
+  isOpen: boolean;
+  onClose: () => void;
+  onNodeClick: (nodeId: string) => void;
+}
+
+const FILTER_CATEGORIES: {
+  key: ActivityFilterCategory;
+  label: string;
+  icon: string;
+}[] = [
+  { key: "issues", label: "Issues", icon: "circle" },
+  { key: "deps", label: "Deps", icon: "link" },
+  { key: "comments", label: "Comments", icon: "chat" },
+  { key: "claims", label: "Claims", icon: "user" },
+  { key: "likes", label: "Likes", icon: "heart" },
+];
+
+// ============================================================================
+// Time grouping helpers
+// ============================================================================
+
+function getTimeGroup(time: number): string {
+  const now = Date.now();
+  const diff = now - time;
+  const hours = diff / (1000 * 60 * 60);
+  const days = diff / (1000 * 60 * 60 * 24);
+
+  if (hours < 1) return "Just now";
+  if (hours < 24) return "Today";
+  if (days < 2) return "Yesterday";
+  if (days < 7) return "This week";
+  if (days < 30) return "This month";
+  return "Older";
+}
+
+function groupEventsByTime(events: ActivityEvent[]): { label: string; events: ActivityEvent[] }[] {
+  const groups: Map<string, ActivityEvent[]> = new Map();
+  const order: string[] = [];
+
+  for (const event of events) {
+    const label = getTimeGroup(event.time);
+    if (!groups.has(label)) {
+      groups.set(label, []);
+      order.push(label);
+    }
+    groups.get(label)!.push(event);
+  }
+
+  return order.map((label) => ({ label, events: groups.get(label)! }));
+}
+
+/**
+ * Full slide-in sidebar panel for the activity feed.
+ * Includes search bar, filter chips, and time-grouped events.
+ * Same pattern as AllCommentsPanel / NodeDetail.
+ */
+export function ActivityPanel({
+  events,
+  isOpen,
+  onClose,
+  onNodeClick,
+}: Props) {
+  const [search, setSearch] = useState("");
+  const [activeFilters, setActiveFilters] = useState<Set<ActivityFilterCategory>>(
+    new Set(FILTER_CATEGORIES.map((c) => c.key))
+  );
+
+  const toggleFilter = (category: ActivityFilterCategory) => {
+    setActiveFilters((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        // Don't allow deactivating all filters
+        if (next.size > 1) next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  const filteredEvents = useMemo(() => {
+    let filtered = events;
+
+    // Apply category filters
+    filtered = filtered.filter((e) =>
+      activeFilters.has(getEventCategory(e.type))
+    );
+
+    // Apply text search
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      filtered = filtered.filter(
+        (e) =>
+          e.nodeId.toLowerCase().includes(q) ||
+          (e.nodeTitle && e.nodeTitle.toLowerCase().includes(q)) ||
+          (e.actor?.handle && e.actor.handle.toLowerCase().includes(q)) ||
+          (e.detail && e.detail.toLowerCase().includes(q))
+      );
+    }
+
+    return filtered;
+  }, [events, activeFilters, search]);
+
+  const groupedEvents = useMemo(
+    () => groupEventsByTime(filteredEvents),
+    [filteredEvents]
+  );
+
+  const allActive = activeFilters.size === FILTER_CATEGORIES.length;
+
+  return (
+    <>
+      {/* Desktop sidebar */}
+      <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">
+              Activity
+            </h2>
+            {events.length > 0 && (
+              <span className="px-1.5 py-0.5 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-medium">
+                {events.length}
+              </span>
+            )}
+          </div>
+          <button
+            onClick={onClose}
+            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={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="px-4 pt-3 pb-2 shrink-0">
+          <div className="flex items-center bg-zinc-50/80 rounded-full border border-zinc-200/60 overflow-hidden">
+            <div className="pl-3 pr-1 text-zinc-400">
+              <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </div>
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search activity..."
+              className="flex-1 px-2 py-2 text-xs text-zinc-800 bg-transparent outline-none placeholder:text-zinc-400"
+            />
+            {search && (
+              <button
+                onClick={() => setSearch("")}
+                className="pr-3 text-zinc-400 hover:text-zinc-600"
+              >
+                <svg className="w-3 h-3" 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>
+        </div>
+
+        {/* Filter chips */}
+        <div className="flex flex-wrap gap-1.5 px-4 pb-3 shrink-0">
+          {FILTER_CATEGORIES.map((cat) => {
+            const isActive = activeFilters.has(cat.key);
+            return (
+              <button
+                key={cat.key}
+                onClick={() => toggleFilter(cat.key)}
+                className={`px-2.5 py-1 text-[11px] font-medium rounded-full border transition-all ${
+                  isActive
+                    ? "bg-emerald-50 text-emerald-700 border-emerald-200 shadow-sm"
+                    : "bg-white text-zinc-400 border-zinc-200 hover:text-zinc-600 hover:border-zinc-300"
+                }`}
+              >
+                {cat.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Event list with time groups */}
+        <div className="flex-1 overflow-y-auto custom-scrollbar border-t border-zinc-100">
+          {filteredEvents.length === 0 ? (
+            <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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <p className="text-xs text-zinc-400">
+                {search.trim()
+                  ? "No activity matching your search"
+                  : "No activity yet"}
+              </p>
+              {search.trim() && (
+                <button
+                  onClick={() => setSearch("")}
+                  className="text-[11px] text-emerald-600 hover:text-emerald-700 mt-1.5"
+                >
+                  Clear search
+                </button>
+              )}
+            </div>
+          ) : (
+            groupedEvents.map((group) => (
+              <div key={group.label}>
+                {/* Time group header */}
+                <div className="sticky top-0 z-[1] px-4 py-1.5 bg-zinc-50/95 backdrop-blur-sm border-b border-zinc-100/60">
+                  <span className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wider">
+                    {group.label}
+                  </span>
+                </div>
+                {/* Events in this group */}
+                <div className="divide-y divide-zinc-50">
+                  {group.events.map((event) => (
+                    <ActivityItem
+                      key={event.id}
+                      event={event}
+                      variant="full"
+                      onNodeClick={onNodeClick}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer stats */}
+        <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">
+            {filteredEvents.length} event{filteredEvents.length !== 1 ? "s" : ""}
+            {!allActive && ` (filtered)`}
+            {search.trim() && ` matching "${search.trim()}"`}
+          </div>
+        </div>
+      </aside>
+
+      {/* Mobile drawer */}
+      <div
+        className={`md:hidden fixed inset-x-0 bottom-0 z-20 transition-transform duration-300 ease-out ${
+          isOpen ? "translate-y-0" : "translate-y-full"
+        }`}
+      >
+        <div className="bg-white rounded-t-2xl shadow-xl border-t border-zinc-200 max-h-[60vh] flex flex-col">
+          {/* Drag handle */}
+          <div className="flex justify-center pt-3 pb-1">
+            <div className="w-8 h-1 bg-zinc-300 rounded-full" />
+          </div>
+
+          {/* Header */}
+          <div className="flex items-center justify-between px-5 py-2">
+            <div className="flex items-center gap-2">
+              <h2 className="text-sm font-semibold text-zinc-900">Activity</h2>
+              {events.length > 0 && (
+                <span className="px-1.5 py-0.5 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-medium">
+                  {events.length}
+                </span>
+              )}
+            </div>
+            <button
+              onClick={onClose}
+              className="p-1 text-zinc-400 hover:text-zinc-600"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Filter chips */}
+          <div className="flex flex-wrap gap-1.5 px-5 pb-3">
+            {FILTER_CATEGORIES.map((cat) => (
+              <button
+                key={cat.key}
+                onClick={() => toggleFilter(cat.key)}
+                className={`px-2.5 py-1 text-[11px] font-medium rounded-full border transition-colors ${
+                  activeFilters.has(cat.key)
+                    ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+                    : "bg-white text-zinc-400 border-zinc-200"
+                }`}
+              >
+                {cat.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Event list */}
+          <div className="flex-1 overflow-y-auto custom-scrollbar">
+            {filteredEvents.length === 0 ? (
+              <div className="py-8 text-center text-xs text-zinc-400">
+                No activity matching filters
+              </div>
+            ) : (
+              groupedEvents.map((group) => (
+                <div key={group.label}>
+                  <div className="sticky top-0 z-[1] px-5 py-1.5 bg-zinc-50/95 backdrop-blur-sm border-b border-zinc-100/60">
+                    <span className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wider">
+                      {group.label}
+                    </span>
+                  </div>
+                  <div className="divide-y divide-zinc-50">
+                    {group.events.map((event) => (
+                      <ActivityItem
+                        key={event.id}
+                        event={event}
+                        variant="full"
+                        onNodeClick={onNodeClick}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/components/AllCommentsPanel.tsx

@@ -46,14 +46,14 @@ export default function AllCommentsPanel({
         </div>
         <button
           onClick={onClose}
-          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"
@@ -197,11 +197,16 @@ function AllCommentCard({
               </div>
             )}
           </div>
-          <span className="text-xs font-medium text-zinc-600 truncate">
+          <a
+            href={`https://www.impactindexer.org/data?did=${comment.did}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs font-medium text-zinc-600 truncate hover:text-emerald-600 transition-colors"
+          >
             {comment.displayName ||
               comment.handle ||
               comment.did.slice(0, 16) + "..."}
-          </span>
+          </a>
           <span className="text-[10px] text-zinc-300 shrink-0">
             {formatRelativeTime(comment.createdAt)}
           </span>

package/components/AuthButton.tsx

@@ -83,9 +83,14 @@ export function AuthButton() {
 
         {showDropdown && (
           <div className="absolute right-0 top-full mt-2 w-44 bg-white rounded-xl shadow-xl border border-zinc-100 py-2 z-50">
-            <div className="px-3 py-1.5 text-xs text-zinc-400 truncate">
+            <a
+              href={session.did ? `https://www.impactindexer.org/data?did=${session.did}` : "#"}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block px-3 py-1.5 text-xs text-zinc-400 truncate hover:text-emerald-600 transition-colors"
+            >
               @{session.handle}
-            </div>
+            </a>
             <div className="h-px bg-zinc-100 my-1" />
             <button
               onClick={handleLogout}

package/components/BeadsGraph.tsx

@@ -35,10 +35,12 @@ interface BeadsGraphProps {
   onBackgroundClick: () => void;
   onNodeRightClick?: (node: GraphNode, event: MouseEvent) => void;
   commentedNodeIds?: Map<string, number>;
-  claimedNodeAvatars?: Map<string, { avatar?: string; handle: string; claimedAt: string }>;
-  onAvatarHover?: (info: { handle: string; avatar?: string; claimedAt: string; x: number; y: number } | null) => void;
+  claimedNodeAvatars?: Map<string, { avatar?: string; handle: string; claimedAt: string; did?: string }>;
+  onAvatarHover?: (info: { handle: string; avatar?: string; claimedAt: string; did?: string; x: number; y: number } | null) => void;
   timelineActive?: boolean;
   stats?: { total: number; edges: number; prefixes: string[] };
+  /** When a right sidebar (NodeDetail, Comments, Activity) is open, shift bottom-right legend inward */
+  sidebarOpen?: boolean;
 }
 
 // Node size calculation
@@ -205,6 +207,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   onAvatarHover,
   timelineActive,
   stats,
+  sidebarOpen,
 }, ref) {
   const graphRef = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -255,7 +258,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   const hoveredNodeRef = useRef<GraphNode | null>(hoveredNode);
   const connectedNodesRef = useRef<Set<string>>(new Set());
   const commentedNodeIdsRef = useRef<Map<string, number>>(commentedNodeIds || new Map());
-  const claimedNodeAvatarsRef = useRef<Map<string, { avatar?: string; handle: string; claimedAt: string }>>(
+  const claimedNodeAvatarsRef = useRef<Map<string, { avatar?: string; handle: string; claimedAt: string; did?: string }>>(
     claimedNodeAvatars || new Map()
   );
   // Callback ref for refreshing graph when avatar images finish loading
@@ -503,7 +506,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
         if (dx * dx + dy * dy <= avatarRadius * avatarRadius) {
           if (hoveredAvatarNodeRef.current !== node.id) {
             hoveredAvatarNodeRef.current = node.id;
-            cb({ handle: claim.handle, avatar: claim.avatar, claimedAt: claim.claimedAt, x: e.clientX, y: e.clientY });
+            cb({ handle: claim.handle, avatar: claim.avatar, claimedAt: claim.claimedAt, did: claim.did, x: e.clientX, y: e.clientY });
           }
           return;
         }
@@ -1699,7 +1702,10 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
 
       {/* Bottom-right info panel: stats + status colors + legend (hidden when timeline active) */}
       {!timelineActive && (
-        <div className="absolute bottom-4 right-4 z-10 bg-white/90 backdrop-blur-sm rounded-lg border border-zinc-200 shadow-sm px-3 py-2 text-xs text-zinc-400">
+        <div
+          className="absolute bottom-4 z-10 bg-white/90 backdrop-blur-sm rounded-lg border border-zinc-200 shadow-sm px-3 py-2 text-xs text-zinc-400 transition-[right] duration-300 ease-out"
+          style={{ right: sidebarOpen ? "calc(360px + 1rem)" : "1rem" }}
+        >
           {stats && (
             <div className="text-zinc-500 mb-1.5">
               <strong className="text-zinc-700">{stats.total}</strong> issues

package/components/CommentTooltip.tsx

@@ -206,9 +206,14 @@ export function CommentTooltip({
                     )}
                   </div>
                   <div className="flex-1 min-w-0">
-                    <span className="text-[10px] font-medium text-zinc-500">
+                    <a
+                      href={`https://www.impactindexer.org/data?did=${comment.did}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-[10px] font-medium text-zinc-500 hover:text-emerald-600 transition-colors"
+                    >
                       {comment.displayName || comment.handle}
-                    </span>
+                    </a>
                     <p className="text-[11px] text-zinc-500 line-clamp-2 leading-tight">
                       {comment.text}
                     </p>

package/components/NodeDetail.tsx

@@ -445,9 +445,14 @@ function InlineReplyForm({
     <div className="mt-2 ml-4 pl-3 border-l border-emerald-200 space-y-1.5">
       <div className="flex items-center gap-1.5 text-[10px] text-zinc-400">
         <span>Replying to</span>
-        <span className="font-medium text-zinc-600">
+        <a
+          href={`https://www.impactindexer.org/data?did=${replyingTo.did}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-medium text-zinc-600 hover:text-emerald-600 transition-colors"
+        >
           {replyingTo.displayName || replyingTo.handle}
-        </span>
+        </a>
       </div>
       <div className="flex gap-2">
         <input
@@ -614,11 +619,16 @@ function CommentItem({
               </div>
             )}
           </div>
-          <span className="text-xs font-medium text-zinc-600 truncate">
+          <a
+            href={`https://www.impactindexer.org/data?did=${comment.did}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs font-medium text-zinc-600 truncate hover:text-emerald-600 transition-colors"
+          >
             {comment.displayName ||
               comment.handle ||
               comment.did.slice(0, 16) + "..."}
-          </span>
+          </a>
           <span className="text-[10px] text-zinc-300 shrink-0">
             {formatRelativeTime(comment.createdAt)}
           </span>