heartbeads 0.4.0

package/components/AuthButton.tsx

@@ -0,0 +1,202 @@
+"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-2 px-3 py-1.5 rounded-full hover:bg-zinc-50 transition-colors cursor-pointer"
+        >
+          {session.avatar ? (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img
+              src={session.avatar}
+              alt={session.handle}
+              width={24}
+              height={24}
+              className="rounded-full"
+            />
+          ) : (
+            <div className="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center text-[11px] text-emerald-700 font-medium">
+              {(session.displayName || session.handle).charAt(0).toUpperCase()}
+            </div>
+          )}
+          <span className="text-sm text-zinc-600 max-w-[100px] truncate">
+            {session.displayName || session.handle}
+          </span>
+        </button>
+
+        {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">
+            <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}
+            </a>
+            <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="px-4 py-1.5 text-sm font-medium text-zinc-600 rounded-full hover:text-zinc-900 hover:bg-zinc-50 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>
+      )}
+    </>
+  );
+}

package/components/BeadTooltip.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import { GraphNode, PRIORITY_LABELS, PRIORITY_COLORS, getPrefixLabel } from "@/lib/types";
+import { formatRelativeTime } from "@/lib/utils";
+
+interface BeadTooltipProps {
+  node: GraphNode;
+  x: number;
+  y: number;
+  prefixColor: string;
+  allNodes: GraphNode[];
+}
+
+const COLORS = {
+  bg: "#FFFFFF",
+  border: "#E5E7EB",
+  borderLight: "#F3F4F6",
+  shadow: "rgba(0,0,0,0.08)",
+  text: "#131316",
+  textMuted: "#737680",
+  textDim: "#7F818B",
+};
+
+export function BeadTooltip({ node, x, y, prefixColor, allNodes }: BeadTooltipProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const tt = ref.current.getBoundingClientRect();
+    const pad = 14;
+
+    // Prefer placing above and to the right of cursor
+    let nx = x + pad;
+    let ny = y - tt.height - pad;
+
+    // Clamp to viewport edges
+    if (nx + tt.width > window.innerWidth - 16) {
+      nx = x - tt.width - pad;
+    }
+    if (nx < 16) nx = 16;
+    if (ny < 16) {
+      ny = y + pad + 8;
+    }
+    if (ny + tt.height > window.innerHeight - 16) {
+      ny = window.innerHeight - tt.height - 16;
+    }
+
+    setPos({ x: nx, y: ny });
+  }, [x, y]);
+
+  // Resolve blocker IDs to short titles
+  const blockers = node.dependentIds
+    .map((id) => {
+      const blockerNode = allNodes.find((n) => n.id === id);
+      return blockerNode ? { id, title: blockerNode.title } : { id, title: id };
+    })
+    .filter(Boolean);
+
+  const priorityLabel = PRIORITY_LABELS[node.priority] || `P${node.priority}`;
+  const priorityColor = PRIORITY_COLORS[node.priority] || "#a1a1aa";
+
+  return (
+    <div
+      ref={ref}
+      className="bead-tooltip"
+      style={{
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: 280,
+        zIndex: 100,
+        pointerEvents: "none",
+        background: COLORS.bg,
+        border: `1px solid ${COLORS.border}`,
+        boxShadow: `0 8px 32px ${COLORS.shadow}, 0 2px 8px ${COLORS.shadow}`,
+        borderRadius: 8,
+        padding: "16px 18px",
+        animation: "beadTooltipFade 0.2s ease",
+      }}
+    >
+      {/* Accent bar */}
+      <div
+        style={{
+          width: 24,
+          height: 2,
+          background: prefixColor,
+          opacity: 0.5,
+          marginBottom: 8,
+          borderRadius: 1,
+        }}
+      />
+
+      {/* Prefix + ID */}
+      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
+        <span
+          style={{
+            fontSize: 10,
+            fontWeight: 600,
+            color: prefixColor,
+            letterSpacing: 0.5,
+            textTransform: "uppercase",
+          }}
+        >
+          {getPrefixLabel(node.prefix)}
+        </span>
+        <span
+          style={{
+            fontSize: 10,
+            fontFamily: "monospace",
+            color: COLORS.textDim,
+          }}
+        >
+          {node.id}
+        </span>
+      </div>
+
+      {/* Title */}
+      <div
+        style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: COLORS.text,
+          lineHeight: 1.25,
+          marginBottom: 12,
+          overflow: "hidden",
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+        }}
+      >
+        {node.title}
+      </div>
+
+      {/* Metadata rows */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        {/* Created */}
+        <div>
+          <div style={labelStyle}>Created</div>
+          <div style={valueStyle}>{formatRelativeTime(node.createdAt)}</div>
+        </div>
+
+        {/* Owner */}
+        {node.owner && (
+          <div>
+            <div style={labelStyle}>Owner</div>
+            <div style={valueStyle}>{node.owner}</div>
+          </div>
+        )}
+
+        {/* Assignee */}
+        {(node.assignee || node.createdBy) && (
+          <div>
+            {node.assignee && (
+              <>
+                <div style={labelStyle}>Assignee</div>
+                <div style={valueStyle}>{node.assignee}</div>
+              </>
+            )}
+            {node.createdBy && !node.assignee && (
+              <>
+                <div style={labelStyle}>Created by</div>
+                <div style={valueStyle}>{node.createdBy}</div>
+              </>
+            )}
+            {node.createdBy && node.assignee && node.createdBy !== node.assignee && (
+              <>
+                <div style={{ ...labelStyle, marginTop: 4 }}>Created by</div>
+                <div style={valueStyle}>{node.createdBy}</div>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Blocked by */}
+        <div>
+          <div style={labelStyle}>Blocked by</div>
+          {blockers.length === 0 ? (
+            <div style={{ ...valueStyle, color: "#10b981" }}>None</div>
+          ) : (
+            <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
+              {blockers.map((b) => (
+                <div key={b.id} style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
+                  <span
+                    style={{
+                      fontSize: 10,
+                      fontFamily: "monospace",
+                      color: COLORS.textDim,
+                      flexShrink: 0,
+                    }}
+                  >
+                    {b.id}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: 12,
+                      color: COLORS.textMuted,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {b.title}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Priority */}
+        <div style={{ borderTop: `1px solid ${COLORS.borderLight}`, paddingTop: 8 }}>
+          <div style={labelStyle}>Priority</div>
+          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+            <div
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                background: priorityColor,
+                flexShrink: 0,
+              }}
+            />
+            <span style={valueStyle}>{priorityLabel}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const labelStyle: React.CSSProperties = {
+  fontSize: 10,
+  fontWeight: 600,
+  letterSpacing: 1.5,
+  textTransform: "uppercase",
+  color: "#7F818B",
+  marginBottom: 3,
+};
+
+const valueStyle: React.CSSProperties = {
+  fontSize: 12,
+  color: "#737680",
+  lineHeight: 1.45,
+};