heartbeads 0.4.0

package/components/GraphStats.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+interface GraphStatsProps {
+  stats: {
+    total: number;
+    open: number;
+    inProgress: number;
+    blocked: number;
+    closed: number;
+    actionable: number;
+    edges: number;
+    prefixes: string[];
+  };
+}
+
+export default function GraphStats({ stats }: GraphStatsProps) {
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      <StatCard
+        value={stats.total}
+        label="Nodes"
+        icon={
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <circle cx="12" cy="12" r="3" strokeWidth={2} />
+          </svg>
+        }
+      />
+      <StatCard
+        value={stats.edges}
+        label="Edges"
+        icon={
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeWidth={2}
+              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101"
+            />
+          </svg>
+        }
+      />
+      <StatCard
+        value={stats.actionable}
+        label="Actionable"
+        color="text-emerald-600"
+        icon={
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 10V3L4 14h7v7l9-11h-7z"
+            />
+          </svg>
+        }
+      />
+      <StatCard
+        value={stats.open}
+        label="Open"
+        color="text-emerald-500"
+        icon={
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+            />
+          </svg>
+        }
+      />
+    </div>
+  );
+}
+
+function StatCard({
+  value,
+  label,
+  color,
+  icon,
+}: {
+  value: number;
+  label: string;
+  color?: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div className="bg-zinc-50 rounded-lg px-3 py-2.5 border border-zinc-100">
+      <div className="flex items-center gap-1.5">
+        <span className="text-zinc-400">{icon}</span>
+        <span
+          className={`text-lg font-bold ${color || "text-zinc-700"}`}
+        >
+          {value}
+        </span>
+      </div>
+      <div className="text-[10px] text-zinc-400 uppercase tracking-wider mt-0.5">
+        {label}
+      </div>
+    </div>
+  );
+}

package/components/HeartIcon.tsx

@@ -0,0 +1,33 @@
+// HeartIcon — ported from Hyperscan ReviewSection
+// Shared by NodeDetail and AllCommentsPanel
+
+export function HeartIcon({
+  className = "w-3 h-3",
+  filled = false,
+}: {
+  className?: string;
+  filled?: boolean;
+}) {
+  if (filled) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+        <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+      />
+    </svg>
+  );
+}

package/components/HelpPanel.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import { TUTORIAL_STEPS } from "./TutorialOverlay";
+
+// Catppuccin Latte accents
+const CAT = {
+  red: "#d20f39",
+  teal: "#179299",
+  peach: "#fe640b",
+  blue: "#1e66f5",
+  green: "#40a02b",
+  mauve: "#8839ef",
+  sapphire: "#209fb5",
+  pink: "#ea76cb",
+  surface: "#dce0e8",
+};
+
+interface HelpPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  tutorialStep?: number | null;
+  onStartTutorial?: () => void;
+  onNextStep?: () => void;
+  onPrevStep?: () => void;
+  onEndTutorial?: () => void;
+}
+
+export function HelpPanel({
+  isOpen,
+  onClose,
+  tutorialStep = null,
+  onStartTutorial,
+  onNextStep,
+  onPrevStep,
+  onEndTutorial,
+}: HelpPanelProps) {
+  const isTutorialActive = tutorialStep !== null;
+  const headerText = isTutorialActive ? "Tutorial" : "Welcome to Heartbeads";
+
+  const content = isTutorialActive ? (
+    <TutorialContent
+      step={tutorialStep}
+      onNext={onNextStep!}
+      onPrev={onPrevStep!}
+      onEnd={onEndTutorial!}
+    />
+  ) : (
+    <HelpContent onStartTutorial={onStartTutorial} />
+  );
+
+  return (
+    <>
+      {/* Desktop: right sidebar — z-[60] during tutorial so it sits above the overlay */}
+      <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 transform transition-transform duration-300 ease-out ${
+          isOpen ? "translate-x-0" : "translate-x-full"
+        } ${isTutorialActive ? "z-[60]" : "z-30"}`}
+      >
+        <div className="flex items-center justify-between px-5 py-3 border-b border-zinc-100 shrink-0">
+          <h2 className="text-sm font-semibold text-zinc-900">
+            {headerText}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors"
+          >
+            <svg className="w-4 h-4" 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 className="flex-1 overflow-y-auto custom-scrollbar">
+          {content}
+        </div>
+      </aside>
+
+      {/* Mobile: bottom drawer */}
+      <div
+        className={`md:hidden fixed inset-x-0 bottom-0 transform transition-transform duration-300 ease-out ${
+          isOpen ? "translate-y-0" : "translate-y-full"
+        } ${isTutorialActive ? "z-[60]" : "z-20"}`}
+      >
+        <div className="bg-white rounded-t-2xl shadow-2xl border-t border-zinc-200 max-h-[70vh] flex flex-col">
+          <div className="flex items-center justify-between px-5 py-3 border-b border-zinc-100 shrink-0">
+            <h2 className="text-sm font-semibold text-zinc-900">
+              {headerText}
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-1 text-zinc-400 hover:text-zinc-600 transition-colors"
+            >
+              <svg className="w-4 h-4" 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 className="flex-1 overflow-y-auto custom-scrollbar">
+            {content}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tutorial step-by-step content                                      */
+/* ------------------------------------------------------------------ */
+
+function TutorialContent({
+  step,
+  onNext,
+  onPrev,
+  onEnd,
+}: {
+  step: number;
+  onNext: () => void;
+  onPrev: () => void;
+  onEnd: () => void;
+}) {
+  const currentStep = TUTORIAL_STEPS[step];
+  const totalSteps = TUTORIAL_STEPS.length;
+  const isFirst = step === 0;
+  const isLast = step === totalSteps - 1;
+
+  return (
+    <div className="px-5 py-4 flex flex-col min-h-[300px]">
+      {/* Step indicator */}
+      <div className="flex items-center justify-between mb-4">
+        <span className="text-xs font-medium" style={{ color: CAT.teal }}>
+          {step + 1} / {totalSteps}
+        </span>
+        <div className="flex gap-1">
+          {Array.from({ length: totalSteps }).map((_, i) => (
+            <div
+              key={i}
+              className="w-1.5 h-1.5 rounded-full transition-colors"
+              style={{
+                backgroundColor:
+                  i === step ? CAT.green : i < step ? CAT.teal : CAT.surface,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Step title */}
+      <h3 className="text-base font-semibold text-zinc-900 mb-2">
+        {currentStep.title}
+      </h3>
+
+      {/* Step description */}
+      <p className="text-[13px] text-zinc-600 leading-relaxed mb-6">
+        {currentStep.description}
+      </p>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Navigation */}
+      <div className="flex items-center gap-2 pt-4 border-t border-zinc-100">
+        {isFirst ? (
+          <button
+            onClick={onEnd}
+            className="px-4 py-2 text-sm font-medium text-zinc-400 hover:text-zinc-600 rounded-lg hover:bg-zinc-50 transition-colors"
+          >
+            Skip
+          </button>
+        ) : (
+          <button
+            onClick={onPrev}
+            className="px-4 py-2 text-sm font-medium rounded-lg hover:bg-zinc-50 transition-colors"
+            style={{ color: CAT.blue }}
+          >
+            {"Back"}
+          </button>
+        )}
+        <div className="flex-1" />
+        {isLast ? (
+          <button
+            onClick={onEnd}
+            className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-emerald-500 hover:bg-emerald-600 transition-colors"
+          >
+            {"Done"}
+          </button>
+        ) : (
+          <button
+            onClick={onNext}
+            className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-emerald-500 hover:bg-emerald-600 transition-colors"
+          >
+            {"Next"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Bullet with Catppuccin colored dot                                 */
+/* ------------------------------------------------------------------ */
+
+function Bullet({ color, children }: { color: string; children: React.ReactNode }) {
+  return (
+    <li className="flex gap-2.5 items-start">
+      <span
+        className="w-1.5 h-1.5 rounded-full mt-[6px] shrink-0"
+        style={{ backgroundColor: color }}
+      />
+      <span>{children}</span>
+    </li>
+  );
+}
+
+function SectionTitle({ children, color }: { children: React.ReactNode; color: string }) {
+  return (
+    <h3
+      className="text-[11px] font-semibold uppercase tracking-widest mb-2 mt-5 first:mt-0"
+      style={{ color }}
+    >
+      {children}
+    </h3>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Static help content                                                */
+/* ------------------------------------------------------------------ */
+
+function HelpContent({ onStartTutorial }: { onStartTutorial?: () => void }) {
+  return (
+    <div className="px-5 py-4 text-[13px] text-zinc-600 leading-relaxed">
+      {/* Start Tutorial */}
+      {onStartTutorial && (
+        <button
+          onClick={onStartTutorial}
+          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 mb-5 text-white text-sm font-medium rounded-lg bg-emerald-500 hover:bg-emerald-600 transition-colors"
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
+          </svg>
+          Take the guided tour
+        </button>
+      )}
+
+      <p className="text-zinc-900 font-medium mb-1">
+        Your command center for AI coding tasks.
+      </p>
+      <p className="mb-4 text-zinc-500">
+        Heartbeads shows everything your AI agents are working on as a
+        live, interactive graph &mdash; tasks, dependencies, who&apos;s doing what, and
+        what&apos;s blocking progress.
+      </p>
+
+      <SectionTitle color={CAT.red}>The graph</SectionTitle>
+      <p className="mb-2">
+        Each <strong>circle</strong> is a task. <strong>Flowing particles</strong>{" "}
+        stream between them to show dependency direction.
+      </p>
+      <ul className="space-y-1.5 mb-3">
+        <Bullet color={CAT.red}><strong>Bigger circles</strong> &mdash; more connected, more important</Bullet>
+        <Bullet color={CAT.red}><strong>Solid lines + particles</strong> &mdash; &ldquo;blocks&rdquo; (A must finish before B)</Bullet>
+        <Bullet color={CAT.red}><strong>Dashed lines</strong> &mdash; parent-child grouping</Bullet>
+        <Bullet color={CAT.red}><strong>Colored ring</strong> &mdash; which project it belongs to</Bullet>
+      </ul>
+
+      <SectionTitle color={CAT.blue}>Navigation</SectionTitle>
+      <ul className="space-y-1.5 mb-3">
+        <Bullet color={CAT.blue}><strong>Click</strong> a node to open its details</Bullet>
+        <Bullet color={CAT.blue}><strong>Hover</strong> for a quick summary</Bullet>
+        <Bullet color={CAT.blue}><strong>Right-click</strong> for actions &mdash; descriptions, comments, claims, collapse, or focus on an epic</Bullet>
+        <Bullet color={CAT.blue}><strong>Scroll</strong> to zoom, <strong>drag</strong> to pan</Bullet>
+        <Bullet color={CAT.blue}><strong>Cmd/Ctrl+F</strong> to search by name, ID, owner, or commenter</Bullet>
+      </ul>
+
+      <SectionTitle color={CAT.teal}>Layouts</SectionTitle>
+      <p className="mb-2">
+        Top-left buttons rearrange the graph:
+      </p>
+      <ul className="space-y-1.5 mb-3">
+        <Bullet color={CAT.teal}><strong>Force</strong> &mdash; organic, physics-based</Bullet>
+        <Bullet color={CAT.teal}><strong>DAG</strong> &mdash; clean top-down tree</Bullet>
+        <Bullet color={CAT.teal}><strong>Radial</strong> &mdash; rings from center outward</Bullet>
+        <Bullet color={CAT.teal}><strong>Cluster</strong> &mdash; grouped by project</Bullet>
+        <Bullet color={CAT.teal}><strong>Spread</strong> &mdash; spaced out for screenshots</Bullet>
+      </ul>
+
+      <SectionTitle color={CAT.peach}>Color modes</SectionTitle>
+      <p className="mb-2">
+        Bottom-right panel &mdash; paint nodes by:
+      </p>
+      <ul className="space-y-1.5 mb-3">
+        <Bullet color={CAT.peach}><strong>Status</strong> &mdash; open, in progress, blocked, closed</Bullet>
+        <Bullet color={CAT.peach}><strong>Priority</strong> &mdash; P0 critical to P4 backlog</Bullet>
+        <Bullet color={CAT.peach}><strong>Owner</strong> &mdash; who created it</Bullet>
+        <Bullet color={CAT.peach}><strong>Assignee</strong> &mdash; who&apos;s working on it</Bullet>
+        <Bullet color={CAT.peach}><strong>Prefix</strong> &mdash; which project</Bullet>
+      </ul>
+
+      <SectionTitle color={CAT.mauve}>More</SectionTitle>
+      <ul className="space-y-1.5 mb-3">
+        <Bullet color={CAT.mauve}><strong>Collapse/Expand</strong> &mdash; tidy up epics into single nodes</Bullet>
+        <Bullet color={CAT.mauve}><strong>Focus on epic</strong> &mdash; right-click an epic to isolate its subgraph (children + dependencies). Click the banner or right-click again to return</Bullet>
+        <Bullet color={CAT.mauve}><strong>Clusters</strong> &mdash; dashed circles grouping projects when zoomed out</Bullet>
+        <Bullet color={CAT.mauve}><strong>Replay</strong> &mdash; step through your project&apos;s history</Bullet>
+        <Bullet color={CAT.mauve}><strong>Comments</strong> &mdash; leave notes on tasks (sign in first)</Bullet>
+        <Bullet color={CAT.mauve}><strong>Activity feed</strong> &mdash; real-time feed filtered to only your local beads, not global</Bullet>
+        <Bullet color={CAT.mauve}><strong>Claim tasks</strong> &mdash; right-click to mark as yours</Bullet>
+        <Bullet color={CAT.mauve}><strong>Minimap</strong> &mdash; click to jump, drag edges to resize</Bullet>
+        <Bullet color={CAT.mauve}><strong>Auto-fit</strong> &mdash; top-left toggle to lock/unlock automatic camera reframing</Bullet>
+        <Bullet color={CAT.mauve}><strong>Pulse</strong> &mdash; the most recently active node pulses with emerald ripples. Toggle it on/off in view controls</Bullet>
+        <Bullet color={CAT.mauve}><strong>Copy</strong> &mdash; clipboard icon copies task with project info</Bullet>
+      </ul>
+
+      <div className="mt-5 pt-4 border-t border-zinc-100 text-xs text-zinc-400">
+        Built with{" "}
+        <a
+          href="https://github.com/GainForest/beads"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline underline-offset-2 transition-colors"
+          style={{ color: CAT.green }}
+        >
+          beads
+        </a>{" "}
+        &mdash; open-source issue tracking for AI-native development. Heartbeads is built for the GainForest agentic workflow and open-sourced at{" "}
+        <a
+          href="https://github.com/daviddao/heartbeads"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline underline-offset-2 transition-colors"
+          style={{ color: CAT.green }}
+        >
+          github.com/daviddao/heartbeads
+        </a>.
+      </div>
+    </div>
+  );
+}