Graph Canvas

// Layout and graph helpers shared by the graph components. No React, no DOM:
// safe to call on the server, in tests, or in a worker.
import { graphlib, layout as dagreLayout } from "@dagrejs/dagre";
import type { RunStatus, StepStatus } from "../agent/agent-run";

/** Every status a graph node can show. Step statuses plus the run-level approval and cancel states. */
export type GraphStatus = StepStatus | Extract<RunStatus, "waiting-for-approval" | "cancelled">;

export const GRAPH_STATUSES: GraphStatus[] = ["queued", "running", "waiting-for-approval", "succeeded", "failed", "skipped", "cancelled"];

export const GRAPH_STATUS_LABELS: Record<GraphStatus, string> = {
  queued: "Queued",
  running: "Running",
  "waiting-for-approval": "Needs approval",
  succeeded: "Succeeded",
  failed: "Failed",
  skipped: "Skipped",
  cancelled: "Cancelled",
};

/** The minimum a node needs for layout: a stable id. */
export interface GraphNodeRef {
  id: string;
}

/** The minimum an edge needs: a stable id, both ends, and an explicit type. */
export interface GraphEdgeRef {
  id: string;
  source: string;
  target: string;
  type: string;
  /** Edges with a label get space reserved for it in the layout. */
  label?: string;
}

export type GraphDirection = "LR" | "TB";

export interface GraphLayoutOptions {
  /** Top to bottom (default), which fits narrow panels, or left to right. */
  direction?: GraphDirection;
  nodeWidth?: number;
  nodeHeight?: number;
  /** Space between nodes in the same rank. */
  nodeSep?: number;
  /** Space between ranks. */
  rankSep?: number;
  /** Space reserved for labelled edges. */
  labelWidth?: number;
  labelHeight?: number;
}

export interface Point {
  x: number;
  y: number;
}

export interface GraphLayout {
  /** The structure this layout was computed for. Equal keys mean equal layouts. */
  key: string;
  direction: GraphDirection;
  nodeWidth: number;
  nodeHeight: number;
  /** Top-left corner of each node. */
  positions: Record<string, Point>;
  /** Route of each edge from its source boundary to its target boundary, and the label center. */
  edges: Record<string, { points: Point[]; label: Point }>;
  width: number;
  height: number;
}

const DEFAULTS: Required<GraphLayoutOptions> = {
  direction: "TB",
  nodeWidth: 184,
  nodeHeight: 52,
  nodeSep: 24,
  rankSep: 44,
  labelWidth: 132,
  labelHeight: 26,
};

/** Drops edges whose ends are missing and self-loops, so the layout never invents nodes. */
export function layoutEdges<E extends GraphEdgeRef>(nodes: readonly GraphNodeRef[], edges: readonly E[]): E[] {
  const ids = new Set(nodes.map((node) => node.id));
  return edges.filter((edge) => edge.source !== edge.target && ids.has(edge.source) && ids.has(edge.target));
}

/**
 * Identifies the graph's structure: node ids, edge ends, and whether an edge has a label,
 * in input order. Statuses, text, and edge types are not part of it, so live status
 * updates keep the same key and therefore the same positions.
 */
export function structureKey(nodes: readonly GraphNodeRef[], edges: readonly GraphEdgeRef[], options: GraphLayoutOptions = {}): string {
  const o = { ...DEFAULTS, ...options };
  const edgePart = layoutEdges(nodes, edges).map((edge) => [edge.id, edge.source, edge.target, edge.label ? 1 : 0]);
  return JSON.stringify([o.direction, o.nodeWidth, o.nodeHeight, o.nodeSep, o.rankSep, o.labelWidth, o.labelHeight, nodes.map((node) => node.id), edgePart]);
}

/**
 * Lays the graph out in ranks with dagre. Deterministic: the same structure always
 * produces the same positions. Cycles (for example, a hand-off and its return) are allowed.
 */
export function layoutGraph(nodes: readonly GraphNodeRef[], edges: readonly GraphEdgeRef[], options: GraphLayoutOptions = {}): GraphLayout {
  const o = { ...DEFAULTS, ...options };
  const kept = layoutEdges(nodes, edges);
  const g = new graphlib.Graph({ multigraph: true });
  g.setGraph({ rankdir: o.direction, nodesep: o.nodeSep, ranksep: o.rankSep, edgesep: 16, marginx: 0, marginy: 0 });
  g.setDefaultEdgeLabel(() => ({}));
  for (const node of nodes) g.setNode(node.id, { width: o.nodeWidth, height: o.nodeHeight });
  for (const edge of kept) {
    g.setEdge(edge.source, edge.target, edge.label ? { width: o.labelWidth, height: o.labelHeight, labelpos: "c" } : {}, edge.id);
  }
  dagreLayout(g);

  const positions: Record<string, Point> = {};
  for (const node of nodes) {
    const placed = g.node(node.id) as { x: number; y: number } | undefined;
    positions[node.id] = placed ? { x: placed.x - o.nodeWidth / 2, y: placed.y - o.nodeHeight / 2 } : { x: 0, y: 0 };
  }
  const routes: GraphLayout["edges"] = {};
  for (const edge of kept) {
    const placed = g.edge({ v: edge.source, w: edge.target, name: edge.id }) as { points?: Point[]; x?: number; y?: number } | undefined;
    const points = (placed?.points ?? []).map((point) => ({ x: point.x, y: point.y }));
    const middle = points[Math.floor(points.length / 2)] ?? { x: 0, y: 0 };
    routes[edge.id] = { points, label: placed?.x != null && placed.y != null ? { x: placed.x, y: placed.y } : middle };
  }
  const size = g.graph() as { width?: number; height?: number };
  return {
    key: structureKey(nodes, edges, options),
    direction: o.direction,
    nodeWidth: o.nodeWidth,
    nodeHeight: o.nodeHeight,
    positions,
    edges: routes,
    width: size.width ?? 0,
    height: size.height ?? 0,
  };
}

export interface Adjacency<E extends GraphEdgeRef> {
  incoming: Map<string, E[]>;
  outgoing: Map<string, E[]>;
}

/** Incoming and outgoing edges per node id. */
export function adjacency<E extends GraphEdgeRef>(edges: readonly E[]): Adjacency<E> {
  const incoming = new Map<string, E[]>();
  const outgoing = new Map<string, E[]>();
  for (const edge of edges) {
    (incoming.get(edge.target) ?? incoming.set(edge.target, []).get(edge.target)!).push(edge);
    (outgoing.get(edge.source) ?? outgoing.set(edge.source, []).get(edge.source)!).push(edge);
  }
  return { incoming, outgoing };
}

function walk(start: string, next: (id: string) => readonly GraphEdgeRef[] | undefined, end: "source" | "target"): Set<string> {
  const seen = new Set<string>();
  const stack = [start];
  while (stack.length) {
    const id = stack.pop()!;
    for (const edge of next(id) ?? []) {
      const other = edge[end];
      if (other !== start && !seen.has(other)) {
        seen.add(other);
        stack.push(other);
      }
    }
  }
  return seen;
}

/** Every node the given node depends on, directly or transitively (not including itself). */
export function ancestorsOf(id: string, edges: readonly GraphEdgeRef[]): Set<string> {
  const { incoming } = adjacency(edges);
  return walk(id, (node) => incoming.get(node), "source");
}

/** Every node that depends on the given node, directly or transitively (not including itself). */
export function descendantsOf(id: string, edges: readonly GraphEdgeRef[]): Set<string> {
  const { outgoing } = adjacency(edges);
  return walk(id, (node) => outgoing.get(node), "target");
}

/** The node, its ancestors, and its descendants: what "focus on branch" shows. */
export function branchOf(id: string, edges: readonly GraphEdgeRef[]): Set<string> {
  return new Set([id, ...ancestorsOf(id, edges), ...descendantsOf(id, edges)]);
}

/** True when the edges form no cycle (Kahn's algorithm). */
export function isAcyclic(nodes: readonly GraphNodeRef[], edges: readonly GraphEdgeRef[]): boolean {
  const indegree = new Map(nodes.map((node) => [node.id, 0]));
  for (const edge of edges) indegree.set(edge.target, (indegree.get(edge.target) ?? 0) + 1);
  const { outgoing } = adjacency(edges);
  const ready = [...indegree].filter(([, count]) => count === 0).map(([id]) => id);
  let visited = 0;
  while (ready.length) {
    const id = ready.pop()!;
    visited += 1;
    for (const edge of outgoing.get(id) ?? []) {
      const count = (indegree.get(edge.target) ?? 0) - 1;
      indegree.set(edge.target, count);
      if (count === 0) ready.push(edge.target);
    }
  }
  return visited === indegree.size;
}

"use client";

import { type ComponentProps, type KeyboardEvent, type ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
import { StatusGlyph, StepStatusIcon } from "../agent/step-list";
import { GRAPH_STATUS_LABELS, type GraphStatus } from "./graph-layout";

export function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

/** Status text colors from the design system. Neutral states stay gray; color is reserved for meaning. */
export const GRAPH_STATUS_TEXT: Record<GraphStatus, string> = {
  queued: "text-zinc-500",
  running: "text-sky-600 dark:text-sky-400",
  "waiting-for-approval": "text-amber-600 dark:text-amber-400",
  succeeded: "text-emerald-600 dark:text-emerald-400",
  failed: "text-red-600 dark:text-red-400",
  skipped: "text-zinc-500",
  cancelled: "text-zinc-500",
};

/** Hairline and divider recipes shared by every graph surface. */
export const hairline = "border-zinc-950/10 dark:border-white/10";
export const divider = "border-zinc-950/[0.07] dark:border-white/[0.08]";

/** The small secondary button used in graph headers and the canvas toolbar. */
export const graphButtonClass = cx(
  "inline-flex h-7 items-center justify-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium whitespace-nowrap select-none",
  "border-zinc-950/12 bg-white text-zinc-700 hover:border-zinc-950/20 hover:bg-zinc-950/[0.03] hover:text-zinc-950",
  "dark:border-white/15 dark:bg-black dark:text-zinc-300 dark:hover:border-white/25 dark:hover:bg-white/[0.06] dark:hover:text-white",
  "transition-colors duration-150 ease-out motion-reduce:transition-none",
  "disabled:pointer-events-none disabled:opacity-45",
  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500",
);

/**
 * Status icon for graph nodes, from the shared stroke glyph set. Step statuses reuse
 * `StepStatusIcon`; waiting for approval shows the pause glyph and cancelled the slash, so no
 * state relies on color alone. Remount with `key={status}` to play the status-change entry.
 */
export function GraphStatusIcon({ status, className = "" }: { status: GraphStatus; className?: string }) {
  if (status === "waiting-for-approval") return <StatusGlyph kind="waiting" className={className} />;
  if (status === "cancelled") return <StatusGlyph kind="skipped" className={className} />;
  return <StepStatusIcon status={status} className={className} />;
}

/** Icon plus the status as text. */
export function GraphStatusLabel({ status, label, className }: { status: GraphStatus; label?: string; className?: string }) {
  return (
    <span className={cx("inline-flex items-center gap-1.5 text-xs font-medium text-zinc-950 dark:text-white", className)}>
      <GraphStatusIcon key={status} status={status} />
      {label ?? GRAPH_STATUS_LABELS[status]}
    </span>
  );
}

/** Controlled when `value` is defined (including `null`), otherwise keeps its own state. */
export function useControllableState<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void): [T, (next: T) => void] {
  const [own, setOwn] = useState(defaultValue);
  const controlled = value !== undefined;
  const current = controlled ? value : own;
  const set = useCallback(
    (next: T) => {
      if (!controlled) setOwn(next);
      onChange?.(next);
    },
    [controlled, onChange],
  );
  return [current, set];
}

export type GraphView = "graph" | "list";

const viewIcons: Record<GraphView, ReactNode> = {
  graph: (
    <>
      <rect x="2" y="2.5" width="5" height="3.5" rx="1" />
      <rect x="9" y="10" width="5" height="3.5" rx="1" />
      <path d="M4.5 6v2.5a1.5 1.5 0 0 0 1.5 1.5h3" />
    </>
  ),
  list: <path d="M2.5 4h11M2.5 8h11M2.5 12h7" />,
};

/** Switches between the graph and its list. Both show the same data and share selection. */
export function GraphViewSwitch({ view, onChange, className }: { view: GraphView; onChange: (view: GraphView) => void; className?: string }) {
  return (
    <div role="group" aria-label="View" className={cx("inline-flex rounded-lg border p-0.5", hairline, className)}>
      {(["graph", "list"] as const).map((value) => (
        <button
          key={value}
          type="button"
          aria-pressed={view === value}
          onClick={() => onChange(value)}
          className={cx(
            "inline-flex h-6 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-zinc-500 select-none",
            "transition-colors duration-150 ease-out motion-reduce:transition-none",
            "hover:text-zinc-950 aria-pressed:bg-zinc-950/[0.06] aria-pressed:text-zinc-950",
            "dark:hover:text-white dark:aria-pressed:bg-white/[0.09] dark:aria-pressed:text-white",
            "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-sky-500",
          )}
        >
          <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5">
            {viewIcons[value]}
          </svg>
          {value === "graph" ? "Graph" : "List"}
        </button>
      ))}
    </div>
  );
}

export interface GraphListboxProps<T> {
  items: readonly T[];
  getId: (item: T) => string;
  selectedId: string | null;
  onSelect: (id: string) => void;
  renderItem: (item: T, selected: boolean) => ReactNode;
  /** Accessible name of the list. */
  label: string;
  className?: string;
  /** Shown when there are no items. */
  empty?: ReactNode;
}

/**
 * A single-select listbox with one tab stop. Arrow keys, Home, and End move the selection
 * (selection follows focus); Enter and Space select the focused option. Scrolls the
 * selected option into view when the selection changes elsewhere, such as in the graph.
 * Selection changes are instant: this is high-frequency inspection UI.
 */
export function GraphListbox<T>({ items, getId, selectedId, onSelect, renderItem, label, className, empty }: GraphListboxProps<T>) {
  const prefix = useId();
  const refs = useRef(new Map<string, HTMLLIElement>());
  const index = selectedId == null ? -1 : items.findIndex((item) => getId(item) === selectedId);
  const tabStop = index >= 0 ? index : 0;

  useEffect(() => {
    if (selectedId == null) return;
    const element = refs.current.get(selectedId);
    if (element && typeof element.scrollIntoView === "function") element.scrollIntoView({ block: "nearest" });
  }, [selectedId]);

  const move = (to: number) => {
    const item = items[Math.max(0, Math.min(items.length - 1, to))];
    if (!item) return;
    const id = getId(item);
    onSelect(id);
    refs.current.get(id)?.focus();
  };

  const onKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {
    const keys: Record<string, () => void> = {
      ArrowDown: () => move(index < 0 ? 0 : index + 1),
      ArrowUp: () => move(index < 0 ? 0 : index - 1),
      Home: () => move(0),
      End: () => move(items.length - 1),
    };
    const action = keys[event.key];
    if (action) {
      event.preventDefault();
      action();
    }
  };

  if (!items.length) return <p className="px-4 py-6 text-sm text-zinc-500">{empty ?? "Nothing to show yet."}</p>;

  return (
    <ul role="listbox" aria-label={label} onKeyDown={onKeyDown} className={cx("grid grid-cols-[minmax(0,1fr)] content-start gap-px p-1.5", className)}>
      {items.map((item, i) => {
        const id = getId(item);
        const selected = id === selectedId;
        return (
          <li
            key={id}
            id={`${prefix}-${i}`}
            data-id={id}
            ref={(element) => {
              if (element) refs.current.set(id, element);
              else refs.current.delete(id);
            }}
            role="option"
            aria-selected={selected}
            tabIndex={i === tabStop ? 0 : -1}
            onClick={() => onSelect(id)}
            onKeyDown={(event) => {
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                onSelect(id);
              }
            }}
            className={cx(
              "min-w-0 cursor-pointer rounded-lg px-2.5 py-2 text-left",
              "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-sky-500",
              selected ? "bg-zinc-950/[0.06] dark:bg-white/[0.09]" : "hover:bg-zinc-950/[0.04] dark:hover:bg-white/[0.06]",
            )}
          >
            {renderItem(item, selected)}
          </li>
        );
      })}
    </ul>
  );
}

/** One list row: status glyph, a name, an optional trailing value, and a meta line. Shared by every list view. */
export function GraphListRow({
  status,
  icon,
  title,
  mono,
  muted,
  struck,
  trailing,
  meta,
  children,
}: {
  status?: GraphStatus;
  /** Replaces the status glyph, for example an avatar. */
  icon?: ReactNode;
  title: ReactNode;
  mono?: boolean;
  /** Secondary text color for steps that have not started. */
  muted?: boolean;
  /** Strike the title through, for skipped steps. */
  struck?: boolean;
  /** Right-aligned value such as a duration. */
  trailing?: ReactNode;
  meta?: ReactNode;
  children?: ReactNode;
}) {
  return (
    <div className="flex items-start gap-2.5">
      <span className="flex h-5 shrink-0 items-center">{icon ?? (status ? <GraphStatusIcon key={status} status={status} /> : null)}</span>
      <div className="min-w-0 flex-1">
        <div className="flex items-baseline gap-2">
          <p
            className={cx(
              "min-w-0 flex-1 truncate text-sm leading-5 font-medium",
              muted ? "text-zinc-600 dark:text-zinc-400" : "text-zinc-950 dark:text-white",
              mono && "font-mono text-[13px]",
              struck && "line-through decoration-zinc-950/30 dark:decoration-white/30",
            )}
          >
            {title}
          </p>
          {trailing != null ? <span className="shrink-0 font-mono text-[11px] text-zinc-500 tabular-nums">{trailing}</span> : null}
        </div>
        {meta ? <p className="mt-0.5 truncate text-xs text-zinc-500">{meta}</p> : null}
        {children}
      </div>
    </div>
  );
}

/** Code, JSON, and quoted values inside a panel. */
export function Well({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <pre
      className={cx(
        "max-h-44 overflow-auto rounded-lg border px-3 py-2.5 font-mono text-xs leading-relaxed whitespace-pre-wrap text-zinc-800",
        "border-zinc-950/[0.07] bg-zinc-950/[0.02] dark:border-white/[0.08] dark:bg-transparent dark:text-zinc-200",
        className,
      )}
    >
      {children}
    </pre>
  );
}

/** A labelled block in a details panel. Strings render in a well. */
export function DetailSection({ label, children, aside }: { label: string; children: ReactNode; aside?: ReactNode }) {
  return (
    <div className="min-w-0">
      <div className="mb-1.5 flex items-baseline justify-between gap-2">
        <p className="text-xs font-medium text-zinc-500">{label}</p>
        {aside ? <span className="font-mono text-[11px] text-zinc-500 tabular-nums">{aside}</span> : null}
      </div>
      {typeof children === "string" ? <Well>{children}</Well> : <div className="text-sm text-zinc-700 dark:text-zinc-300">{children}</div>}
    </div>
  );
}

/** Title and status line at the top of a details panel. */
export function DetailHeader({ title, mono, status, statusLabel, meta }: { title: ReactNode; mono?: boolean; status?: GraphStatus; statusLabel?: string; meta?: ReactNode[] }) {
  const parts = (meta ?? []).filter((part) => part != null && part !== false && part !== "");
  return (
    <div className="min-w-0">
      <h4 className={cx("text-sm font-semibold break-words text-zinc-950 dark:text-white", mono && "font-mono text-[13px]")}>{title}</h4>
      <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-zinc-500">
        {status ? <GraphStatusLabel status={status} label={statusLabel} /> : null}
        {parts.map((part, i) => (
          <span key={i} className="inline-flex items-center gap-2">
            {status || i > 0 ? <span aria-hidden="true" className="text-zinc-950/25 dark:text-white/25">·</span> : null}
            {part}
          </span>
        ))}
      </div>
    </div>
  );
}

/** Key-value facts such as kind, duration, and start time. */
export function DetailProperties({ items }: { items: { label: string; value: ReactNode; mono?: boolean }[] }) {
  return (
    <dl className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-xs">
      {items.map((item) => (
        <div key={item.label} className="contents">
          <dt className="text-zinc-500">{item.label}</dt>
          <dd className={cx("min-w-0 break-words text-zinc-950 dark:text-white", item.mono && "font-mono tabular-nums")}>{item.value}</dd>
        </div>
      ))}
    </dl>
  );
}

/** A failure message with the failure tint. */
export function ErrorNote({ children }: { children: ReactNode }) {
  return (
    <div className="flex items-start gap-2 rounded-lg border border-red-500/35 bg-red-500/[0.08] px-3 py-2 text-sm text-red-700 dark:text-red-300">
      <GraphStatusIcon status="failed" className="mt-0.5" />
      <p className="min-w-0 break-words">{children}</p>
    </div>
  );
}

/** The scrolling stack of sections in a details panel, separated by dividers. */
export function DetailStack({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cx("divide-y divide-zinc-950/[0.07] dark:divide-white/[0.08] [&>*]:px-4 [&>*]:py-3.5", className)}>{children}</div>;
}

/** A related node in a details panel. Selecting it moves the selection there. */
export function RelatedButton({ label, status, note, onClick, mono }: { label: string; status?: GraphStatus; note?: string; onClick: () => void; mono?: boolean }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cx(
        "group -mx-2 flex min-h-8 w-[calc(100%+1rem)] items-center gap-2 rounded-md px-2 py-1 text-left text-sm text-zinc-700 dark:text-zinc-300",
        "hover:bg-zinc-950/[0.04] hover:text-zinc-950 dark:hover:bg-white/[0.06] dark:hover:text-white",
        "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-sky-500",
      )}
    >
      {status ? <GraphStatusIcon status={status} /> : null}
      <span className={cx("min-w-0 flex-1 truncate", mono && "font-mono text-[13px]")}>{label}</span>
      {status ? <span className="sr-only">, {GRAPH_STATUS_LABELS[status]}</span> : null}
      {note ? <span className="shrink-0 text-xs text-zinc-500">{note}</span> : null}
      <svg
        aria-hidden="true"
        viewBox="0 0 16 16"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="size-3.5 shrink-0 text-zinc-950/25 group-hover:text-zinc-950/60 dark:text-white/25 dark:group-hover:text-white/60"
      >
        <path d="m6 4 4 4-4 4" />
      </svg>
    </button>
  );
}

/** Quiet text for an empty related list. */
export function DetailNote({ children }: { children: ReactNode }) {
  return <p className="text-xs text-zinc-500">{children}</p>;
}

export function formatDuration(ms: number): string {
  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(1)} s`;
}

const SUMMARY_ORDER: GraphStatus[] = ["running", "waiting-for-approval", "failed", "succeeded", "queued", "skipped", "cancelled"];

function countStatuses(statuses: readonly GraphStatus[]) {
  const counts = new Map<GraphStatus, number>();
  for (const status of statuses) counts.set(status, (counts.get(status) ?? 0) + 1);
  return SUMMARY_ORDER.filter((status) => counts.get(status)).map((status) => ({ status, count: counts.get(status)! }));
}

/** Counts per status, in a fixed order, for summaries like "3 succeeded · 1 failed". */
export function statusSummary(statuses: readonly GraphStatus[]): string {
  return countStatuses(statuses)
    .map(({ status, count }) => `${count} ${GRAPH_STATUS_LABELS[status].toLowerCase()}`)
    .join(" · ");
}

/** The status summary drawn as glyph, count, and word, for a header meta line. Reads as plain text. */
export function StatusCounts({ statuses, lead }: { statuses: readonly GraphStatus[]; lead?: ReactNode }) {
  const counts = countStatuses(statuses);
  return (
    <span className="inline-flex flex-wrap items-center gap-x-3 gap-y-1">
      {lead != null ? <span className="text-zinc-600 dark:text-zinc-400">{lead}</span> : null}
      {counts.map(({ status, count }) => (
        <span key={status} className="inline-flex items-center gap-1 [&>svg]:size-3.5">
          <GraphStatusIcon status={status} />
          <span className="font-mono text-zinc-700 tabular-nums dark:text-zinc-300">{count}</span>
          {GRAPH_STATUS_LABELS[status].toLowerCase()}
        </span>
      ))}
    </span>
  );
}

export interface GraphShellProps extends Omit<ComponentProps<"section">, "title"> {
  title: ReactNode;
  /** One line under the title, for example a status summary. */
  meta?: ReactNode;
  /** Buttons on the right of the header, such as the view switch. */
  controls?: ReactNode;
  /** Accessible name of the details panel. */
  detailsLabel: string;
  details: ReactNode;
  /** Height of the main area; the details panel scrolls within it on wide layouts. */
  height: number;
  footer?: ReactNode;
}

/** The container recipe: white in light mode, pure black with a hairline in dark mode. */
export const graphSurfaceClass = cx(
  "@container w-full overflow-hidden rounded-xl border bg-white text-left shadow-[0_1px_2px_rgb(0_0_0/0.04)]",
  "dark:bg-black dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06)]",
  hairline,
);

/** Header with title and meta. */
export function GraphHeader({ title, meta, controls }: { title: ReactNode; meta?: ReactNode; controls?: ReactNode }) {
  return (
    <header className={cx("flex flex-wrap items-center justify-between gap-x-4 gap-y-2.5 border-b px-4 py-3", divider)}>
      <div className="min-w-0 flex-[1_1_16rem]">
        <h3 className="text-sm font-semibold text-zinc-950 dark:text-white">{title}</h3>
        {meta ? <div className="mt-1 text-xs text-zinc-500">{meta}</div> : null}
      </div>
      {controls ? <div className="flex shrink-0 flex-wrap items-center gap-2">{controls}</div> : null}
    </header>
  );
}

/** Header, main area, and a details panel beside it (below it when the component is narrow). */
export function GraphShell({ title, meta, controls, detailsLabel, details, height, footer, className, children, ...props }: GraphShellProps) {
  return (
    <section className={cx(graphSurfaceClass, className)} {...props}>
      <GraphHeader title={title} meta={meta} controls={controls} />
      <div className="grid @2xl:grid-cols-[minmax(0,1fr)_18rem]">
        <div className="min-w-0">{children}</div>
        <aside
          aria-label={detailsLabel}
          style={{ ["--graph-height" as string]: `${height}px` }}
          className={cx("min-w-0 border-t @2xl:max-h-(--graph-height) @2xl:overflow-y-auto @2xl:border-t-0 @2xl:border-l", divider)}
        >
          {details}
        </aside>
      </div>
      {footer ? <footer className={cx("border-t px-4 py-2.5", divider)}>{footer}</footer> : null}
    </section>
  );
}

/** Explains edge styles in text, so edge types never rely on color or dash alone. */
export function EdgeLegend({ items }: { items: { label: string; dashed?: boolean }[] }) {
  return (
    <ul aria-label="Edge types" className="flex flex-wrap gap-x-5 gap-y-1 text-xs text-zinc-500">
      {items.map((item) => (
        <li key={item.label} className="flex items-center gap-2">
          <svg aria-hidden="true" viewBox="0 0 28 8" className="h-2 w-7 text-zinc-950/40 dark:text-white/40">
            <path d="M1 4h20" stroke="currentColor" strokeWidth="1.5" strokeDasharray={item.dashed ? "3.5 2.5" : undefined} />
            <path d="M27 4 20.5 0.75 22 4l-1.5 3.25Z" fill="currentColor" />
          </svg>
          {item.label}
        </li>
      ))}
    </ul>
  );
}

/** Placeholder for the details panel before anything is selected. */
export function EmptyDetails({ children, hint }: { children: ReactNode; hint?: ReactNode }) {
  return (
    <div className="flex flex-col gap-3 p-4">
      <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 text-zinc-950/30 dark:text-white/30">
        <rect x="2.5" y="3" width="6" height="4.5" rx="1.25" />
        <rect x="11.5" y="12.5" width="6" height="4.5" rx="1.25" />
        <path d="M5.5 7.5v3a2 2 0 0 0 2 2h4" />
      </svg>
      <p className="text-sm text-pretty text-zinc-600 dark:text-zinc-400">{children}</p>
      {hint ? <p className="text-xs text-pretty text-zinc-500">{hint}</p> : null}
    </div>
  );
}

/** Up to three names, then "+N more". */
export function nameList(names: readonly string[]): string {
  return names.length <= 3 ? names.join(", ") : `${names.slice(0, 3).join(", ")} +${names.length - 3} more`;
}

"use client";

import "@xyflow/react/dist/style.css";
import {
  Background,
  BackgroundVariant,
  BaseEdge,
  type Edge,
  EdgeLabelRenderer,
  type EdgeProps,
  type FitViewOptions,
  Handle,
  MiniMap,
  type Node,
  type NodeProps,
  Panel,
  type ReactFlowState,
  Position,
  ReactFlow,
  ReactFlowProvider,
  useReactFlow,
  useStore,
  useStoreApi,
} from "@xyflow/react";
import { createContext, memo, type ReactNode, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
import {
  GRAPH_STATUS_LABELS,
  type GraphDirection,
  type GraphEdgeRef,
  type GraphLayout,
  type GraphLayoutOptions,
  type GraphNodeRef,
  type GraphStatus,
  layoutGraph,
  type Point,
  structureKey,
} from "./graph-layout";
import { cx, GraphStatusIcon } from "./graph-ui";

/** How a node relates to the current selection. Shown with a text tag as well as color. */
export type GraphNodeTone = "default" | "upstream" | "downstream" | "muted";
export type GraphEdgeTone = "default" | "highlight" | "selected" | "muted";

/** A node as the canvas draws it. Plain data, so unchanged nodes are not re-rendered. */
export interface GraphCanvasNode {
  id: string;
  title: string;
  /** Secondary text after the status, for example the node kind. */
  subtitle?: string;
  /** Render the title in a monospace font, for tool names. */
  mono?: boolean;
  status?: GraphStatus;
  /** Replaces the default status text, for example "Pending" for a hand-off. */
  statusLabel?: string;
  /** Initials shown in a badge when the node has no status, for example an actor. */
  avatar?: string;
  /** Shape of the avatar badge: a circle (default) for people, a square for agents and systems. */
  avatarShape?: "circle" | "square";
  /** A short text tag at the start of the node's meta line, for example "Upstream". */
  tag?: string;
  tone?: GraphNodeTone;
  hidden?: boolean;
}

export interface GraphCanvasEdge {
  id: string;
  source: string;
  target: string;
  type: string;
  label?: string;
  /** Status icon shown in the label. */
  labelStatus?: GraphStatus;
  dashed?: boolean;
  tone?: GraphEdgeTone;
  /**
   * The edge carries work that is running now. Drawn in the running color; the dashes also
   * move when `animateEdges` is on and the user has not asked for reduced motion.
   */
  animated?: boolean;
  hidden?: boolean;
  /** Clicking the edge or its label calls `onEdgeClick`. */
  selectable?: boolean;
}

export interface GraphCanvasProps {
  nodes: readonly GraphCanvasNode[];
  edges: readonly GraphCanvasEdge[];
  /** From `useGraphLayout`. Positions come from here, never from statuses. */
  layout: GraphLayout;
  selectedNodeId?: string | null;
  selectedEdgeId?: string | null;
  onNodeClick?: (id: string) => void;
  onEdgeClick?: (id: string) => void;
  onPaneClick?: () => void;
  /** React Flow needs a sized container. Defaults to 420px. */
  height?: number | string;
  /** Accessible name of the canvas region. */
  label: string;
  /** Show the mini map. Defaults to on for graphs with more than 24 nodes. */
  minimap?: boolean;
  /**
   * Move the dashes on edges marked `animated`. Off by default: running edges are already
   * drawn in the running color, and a looping animation adds nothing a glance needs.
   * Always off with reduced motion.
   */
  animateEdges?: boolean;
  /** Show the dot grid behind the graph. Defaults to on. */
  grid?: boolean;
  className?: string;
  /** Extra controls rendered in the canvas, top left. */
  toolbar?: ReactNode;
}

const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";

function subscribeReducedMotion(callback: () => void) {
  const query = window.matchMedia(REDUCED_MOTION);
  query.addEventListener("change", callback);
  return () => query.removeEventListener("change", callback);
}

/** True when the user asked for reduced motion. False during server rendering. */
export function usePrefersReducedMotion(): boolean {
  return useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia(REDUCED_MOTION).matches,
    () => false,
  );
}

/**
 * Lays the graph out once per structure. Status, label, and type changes keep the same
 * layout object, so live updates never move nodes; adding or removing nodes or edges re-runs it.
 */
export function useGraphLayout(nodes: readonly GraphNodeRef[], edges: readonly GraphEdgeRef[], options: GraphLayoutOptions = {}): GraphLayout {
  const key = structureKey(nodes, edges, options);
  const latest = useRef({ nodes, edges, options });
  latest.current = { nodes, edges, options };
  // Keyed on the structure only: dagre is deterministic, so equal keys give equal layouts.
  return useMemo(() => layoutGraph(latest.current.nodes, latest.current.edges, latest.current.options), [key]);
}

type CardData = { node: GraphCanvasNode; selected: boolean; clickable: boolean; direction: GraphDirection; width: number; height: number };
type FlowNode = Node<CardData, "card">;
type RouteData = { edge: GraphCanvasEdge; points: Point[]; label: Point; selected: boolean };
type FlowEdge = Edge<RouteData, "route">;

const CanvasContext = createContext<{ onEdgeClick?: (id: string) => void }>({});

const hiddenHandle = { opacity: 0, pointerEvents: "none", width: 1, height: 1, minWidth: 0, minHeight: 0, border: 0 } as const;

// Status frames: a border tint plus a soft fill of the status hue, painted as a flat gradient
// layer over the opaque card color so the dot grid never shows through.
const statusFrame: Partial<Record<GraphStatus, string>> = {
  running: "border-sky-500/45 bg-linear-to-b from-sky-500/[0.07] to-sky-500/[0.07]",
  "waiting-for-approval": "border-amber-500/50 bg-linear-to-b from-amber-500/[0.09] to-amber-500/[0.09]",
  failed: "border-red-500/50 bg-linear-to-b from-red-500/[0.09] to-red-500/[0.09]",
};

const statusWord: Partial<Record<GraphStatus, string>> = {
  running: "text-sky-600 dark:text-sky-400",
  "waiting-for-approval": "text-amber-600 dark:text-amber-400",
  failed: "text-red-600 dark:text-red-400",
};

const idleStatuses = new Set<GraphStatus>(["queued", "skipped", "cancelled"]);

const NodeCard = memo(function NodeCard({ data }: NodeProps<FlowNode>) {
  const { node, selected, clickable, direction, width, height } = data;
  const muted = node.tone === "muted" && !selected;
  const idle = node.status ? idleStatuses.has(node.status) : false;
  const frame = muted ? "border-zinc-950/[0.07] dark:border-white/[0.08]" : (node.status && statusFrame[node.status]) || "border-zinc-950/12 dark:border-white/15";
  return (
    <div
      style={{ width, height }}
      className={cx(
        "relative flex items-center rounded-lg border bg-white px-3 text-left dark:bg-black",
        frame,
        selected
          ? "border-zinc-950! shadow-[0_0_0_3px_rgb(9_9_11/0.1)] dark:border-white! dark:shadow-[0_0_0_3px_rgb(255_255_255/0.2)]"
          : clickable && !muted && "hover:border-zinc-950/35 dark:hover:border-white/40",
      )}
    >
      <Handle type="target" position={direction === "LR" ? Position.Left : Position.Top} isConnectable={false} style={hiddenHandle} />
      <div className={cx("flex min-w-0 flex-1 items-center gap-2.5", muted && "opacity-35")}>
        {node.status ? (
          <GraphStatusIcon key={node.status} status={node.status} />
        ) : node.avatar ? (
          <span
            aria-hidden="true"
            className={cx(
              "grid size-7 shrink-0 place-items-center border border-zinc-950/15 text-[10px] font-semibold tracking-wide text-zinc-700 dark:border-white/20 dark:text-zinc-200",
              node.avatarShape === "square" ? "rounded-md" : "rounded-full",
            )}
          >
            {node.avatar}
          </span>
        ) : null}
        <div className="min-w-0 flex-1">
          <p
            className={cx(
              "truncate text-[13px] leading-[18px] font-medium",
              idle && !selected ? "text-zinc-600 dark:text-zinc-400" : "text-zinc-950 dark:text-white",
              node.mono && "font-mono text-[12.5px] tracking-tight",
              node.status === "skipped" && "line-through decoration-zinc-950/30 dark:decoration-white/30",
            )}
          >
            {node.title}
          </p>
          <p className="truncate text-[11px] leading-4 text-zinc-500">
            {node.tag ? (
              <span
                className={cx(
                  "mr-1.5 inline-block rounded-[4px] border px-1 align-[0.5px] text-[10px] leading-[13px] font-medium",
                  "border-zinc-950/20 text-zinc-800 dark:border-white/25 dark:text-zinc-100",
                )}
              >
                {node.tag}
              </span>
            ) : null}
            {node.status ? <span className={statusWord[node.status]}>{node.statusLabel ?? GRAPH_STATUS_LABELS[node.status]}</span> : null}
            {node.status && node.subtitle ? <span aria-hidden="true"> · </span> : null}
            {node.subtitle}
          </p>
        </div>
      </div>
      <Handle type="source" position={direction === "LR" ? Position.Right : Position.Bottom} isConnectable={false} style={hiddenHandle} />
    </div>
  );
});

type EdgeLook = GraphEdgeTone | "active";

// React Flow's stylesheet is not in a cascade layer, so edge colors are set through its CSS
// variables rather than stroke utilities, which it would override. Colors are opaque mixes
// for the card background, so crossings and arrowheads never double up.
const edgeTone: Record<EdgeLook, string> = {
  default: "[--xy-edge-stroke:#b9b9bf] dark:[--xy-edge-stroke:#4a4a4f] [--xy-edge-stroke-width:1.5]",
  highlight: "[--xy-edge-stroke:#52525b] dark:[--xy-edge-stroke:#c8c8cc] [--xy-edge-stroke-width:1.5]",
  selected: "[--xy-edge-stroke:#09090b] dark:[--xy-edge-stroke:#ffffff] [--xy-edge-stroke-width:2]",
  muted: "[--xy-edge-stroke:#ececee] dark:[--xy-edge-stroke:#1f1f22] [--xy-edge-stroke-width:1.5]",
  active: "[--xy-edge-stroke:#0284c7] dark:[--xy-edge-stroke:#38bdf8] [--xy-edge-stroke-width:1.5]",
};

const ARROW = 8;
const ARROW_HALF = 3.75;
const ARROW_NOTCH = 0.7;

/** A smooth path through dagre's route points, ending in the notch of a swept arrowhead. */
function routePath(points: Point[]): { path: string; arrow: string } {
  const last = points[points.length - 1]!;
  const before = points[points.length - 2]!;
  const length = Math.hypot(last.x - before.x, last.y - before.y) || 1;
  const ux = (last.x - before.x) / length;
  const uy = (last.y - before.y) / length;
  const end = { x: last.x - ux * ARROW * ARROW_NOTCH, y: last.y - uy * ARROW * ARROW_NOTCH };
  const route = [...points.slice(0, -1), end];
  let path = `M ${route[0]!.x} ${route[0]!.y}`;
  for (let i = 1; i < route.length - 1; i += 1) {
    const point = route[i]!;
    const next = route[i + 1]!;
    path += ` Q ${point.x} ${point.y} ${(point.x + next.x) / 2} ${(point.y + next.y) / 2}`;
  }
  path += ` L ${end.x} ${end.y}`;
  const base = { x: last.x - ux * ARROW, y: last.y - uy * ARROW };
  const arrow = `M ${last.x} ${last.y} L ${base.x - uy * ARROW_HALF} ${base.y + ux * ARROW_HALF} L ${end.x} ${end.y} L ${base.x + uy * ARROW_HALF} ${base.y - ux * ARROW_HALF} Z`;
  return { path, arrow };
}

function RouteEdge({ id, data, sourceX, sourceY, targetX, targetY }: EdgeProps<FlowEdge>) {
  const { onEdgeClick } = useContext(CanvasContext);
  if (!data) return null;
  const { edge, selected } = data;
  const points = data.points.length >= 2 ? data.points : [{ x: sourceX, y: sourceY }, { x: targetX, y: targetY }];
  const { path, arrow } = routePath(points);
  const muted = edge.tone === "muted" && !selected;
  const look: EdgeLook = selected ? "selected" : muted ? "muted" : edge.animated ? "active" : (edge.tone ?? "default");
  return (
    <>
      <g className={edgeTone[look]}>
        <BaseEdge id={id} path={path} interactionWidth={edge.selectable ? 18 : 0} style={edge.dashed ? { strokeDasharray: "5 4" } : undefined} />
        <path d={arrow} style={{ fill: "var(--xy-edge-stroke)", stroke: "none" }} />
      </g>
      {edge.label ? (
        <EdgeLabelRenderer>
          <div
            style={{ transform: `translate(-50%, -50%) translate(${data.label.x}px, ${data.label.y}px)` }}
            title={edge.label}
            onClick={edge.selectable ? () => onEdgeClick?.(id) : undefined}
            className={cx(
              "nodrag nopan pointer-events-auto absolute flex h-5 max-w-[9rem] items-center gap-1 rounded-md border bg-white px-1.5 text-[11px] leading-none whitespace-nowrap dark:bg-black",
              "[&>svg]:size-3.5",
              selected
                ? "z-10 border-zinc-950 text-zinc-950 shadow-[0_0_0_3px_rgb(9_9_11/0.1)] dark:border-white dark:text-white dark:shadow-[0_0_0_3px_rgb(255_255_255/0.2)]"
                : muted
                  ? "border-zinc-950/[0.07] text-zinc-400 dark:border-white/[0.08] dark:text-zinc-600 [&>svg]:opacity-40"
                  : "border-zinc-950/12 text-zinc-600 dark:border-white/15 dark:text-zinc-400",
              edge.selectable && !selected && "cursor-pointer hover:border-zinc-950/35 hover:text-zinc-950 dark:hover:border-white/40 dark:hover:text-white",
              edge.hidden && "hidden",
            )}
          >
            {edge.labelStatus ? <GraphStatusIcon key={edge.labelStatus} status={edge.labelStatus} /> : null}
            <span className="truncate">{edge.label}</span>
          </div>
        </EdgeLabelRenderer>
      ) : null}
    </>
  );
}

const nodeTypes = { card: NodeCard };
const edgeTypes = { route: RouteEdge };

// Mini map fills read CSS variables set on the canvas, so they follow the theme.
const minimapColor: Partial<Record<GraphStatus, string>> = {
  running: "#0ea5e9",
  "waiting-for-approval": "#f59e0b",
  failed: "#ef4444",
};

/**
 * The shared React Flow canvas: laid-out cards, routed edges, zoom, pan, fit-to-view,
 * and an optional mini map. Nodes are not draggable; positions come from the layout.
 * Keyboard users select through the list each graph component renders alongside it.
 */
export function GraphCanvas(props: GraphCanvasProps) {
  return (
    <ReactFlowProvider>
      <Canvas {...props} />
    </ReactFlowProvider>
  );
}

function Canvas({
  nodes,
  edges,
  layout,
  selectedNodeId = null,
  selectedEdgeId = null,
  onNodeClick,
  onEdgeClick,
  onPaneClick,
  height = 420,
  label,
  minimap,
  animateEdges = false,
  grid = true,
  className,
  toolbar,
}: GraphCanvasProps) {
  const reduced = usePrefersReducedMotion();
  // Only the viewport eases (fit, zoom, bringing a selection into view); selection itself is instant.
  const duration = reduced ? 0 : 240;
  const showMinimap = minimap ?? nodes.length > 24;
  const animate = !reduced && animateEdges;
  // Keep fitted graphs clear of the zoom controls (bottom left) and the mini map (top right).
  const padding = useMemo(() => ({ top: showMinimap ? "116px" : "28px", right: "28px", bottom: "64px", left: "28px" }) as const, [showMinimap]);
  const flow = useReactFlow<FlowNode, FlowEdge>();
  const store = useStoreApi<FlowNode, FlowEdge>();
  const { nodeWidth: width, nodeHeight: nodeHeight, direction } = layout;
  const clickable = Boolean(onNodeClick);

  // Reuse node and edge objects whose content did not change, so React Flow re-renders only what changed.
  const nodeCache = useRef(new Map<string, { signature: string; value: FlowNode }>());
  const flowNodes = useMemo(() => {
    const next = new Map<string, { signature: string; value: FlowNode }>();
    const result = nodes.map((node) => {
      const position = layout.positions[node.id] ?? { x: 0, y: 0 };
      const selected = node.id === selectedNodeId;
      const signature = JSON.stringify([node, position, selected, clickable, direction, width, nodeHeight]);
      const cached = nodeCache.current.get(node.id);
      const value: FlowNode =
        cached && cached.signature === signature
          ? cached.value
          : {
              id: node.id,
              type: "card",
              position,
              width,
              height: nodeHeight,
              hidden: node.hidden,
              zIndex: selected ? 1 : 0,
              className: clickable ? "cursor-pointer" : undefined,
              data: { node, selected, clickable, direction, width, height: nodeHeight },
            };
      next.set(node.id, { signature, value });
      return value;
    });
    nodeCache.current = next;
    return result;
  }, [nodes, layout, selectedNodeId, direction, width, nodeHeight, clickable]);

  const edgeCache = useRef(new Map<string, { signature: string; value: FlowEdge }>());
  const flowEdges = useMemo(() => {
    const next = new Map<string, { signature: string; value: FlowEdge }>();
    const result: FlowEdge[] = [];
    for (const edge of edges) {
      const route = layout.edges[edge.id];
      if (!route) continue;
      const selected = edge.id === selectedEdgeId;
      const animated = Boolean(edge.animated && animate);
      const signature = JSON.stringify([edge, route.points.length, route.label, selected, animated]);
      const cached = edgeCache.current.get(edge.id);
      const value: FlowEdge =
        cached && cached.signature === signature && cached.value.data?.points === route.points
          ? cached.value
          : {
              id: edge.id,
              source: edge.source,
              target: edge.target,
              type: "route",
              hidden: edge.hidden,
              animated,
              zIndex: selected ? 3 : edge.tone === "highlight" ? 2 : edge.animated ? 1 : 0,
              data: { edge, points: route.points, label: route.label, selected },
            };
      next.set(edge.id, { signature, value });
      result.push(value);
    }
    edgeCache.current = next;
    return result;
  }, [edges, layout, selectedEdgeId, animate]);

  // Refit when the visible structure changes (nodes added or removed, or a branch focused), not on status changes.
  const hiddenKey = nodes.filter((node) => node.hidden).map((node) => node.id).join(",");
  const fitKey = `${layout.key}|${hiddenKey}`;
  const lastFit = useRef(fitKey);
  useEffect(() => {
    if (lastFit.current === fitKey) return;
    lastFit.current = fitKey;
    const frame = requestAnimationFrame(() => void flow.fitView({ padding, maxZoom: 1, duration }));
    return () => cancelAnimationFrame(frame);
  }, [fitKey, flow, duration, padding]);

  // Bring a selection made elsewhere (the list, a details link) into view, keeping the zoom.
  const target = useMemo(() => {
    if (selectedNodeId && layout.positions[selectedNodeId]) {
      const position = layout.positions[selectedNodeId]!;
      return { x: position.x + width / 2, y: position.y + nodeHeight / 2, halfWidth: width / 2, halfHeight: nodeHeight / 2 };
    }
    if (selectedEdgeId && layout.edges[selectedEdgeId]) {
      const point = layout.edges[selectedEdgeId]!.label;
      return { x: point.x, y: point.y, halfWidth: 60, halfHeight: 14 };
    }
    return null;
  }, [selectedNodeId, selectedEdgeId, layout, width, nodeHeight]);
  useEffect(() => {
    if (!target) return;
    const { width: viewWidth, height: viewHeight, transform } = store.getState();
    if (!viewWidth || !viewHeight) return;
    const [tx, ty, zoom] = transform;
    const left = (target.x - target.halfWidth) * zoom + tx;
    const right = (target.x + target.halfWidth) * zoom + tx;
    const top = (target.y - target.halfHeight) * zoom + ty;
    const bottom = (target.y + target.halfHeight) * zoom + ty;
    const margin = 16;
    if (left < margin || top < margin || right > viewWidth - margin || bottom > viewHeight - margin) {
      void flow.setCenter(target.x, target.y, { zoom: Math.max(zoom, 0.6), duration });
    }
    // Only when the selection target changes; not on every viewport change.
  }, [target]); // eslint-disable-line react-hooks/exhaustive-deps

  const context = useMemo(() => ({ onEdgeClick }), [onEdgeClick]);

  return (
    <CanvasContext.Provider value={context}>
      <div
        role="group"
        aria-label={label}
        style={{ height }}
        className={cx(
          "relative w-full bg-zinc-950/[0.015] text-zinc-950 dark:bg-black dark:text-white",
          "[--xy-background-pattern-color:rgb(9_9_11/0.13)] dark:[--xy-background-pattern-color:rgb(255_255_255/0.11)]",
          "[--xy-minimap-background-color:#fff] dark:[--xy-minimap-background-color:#000]",
          "[--xy-minimap-mask-background-color:rgb(9_9_11/0.035)] dark:[--xy-minimap-mask-background-color:rgb(255_255_255/0.045)]",
          "[--xy-minimap-mask-stroke-color:rgb(9_9_11/0.35)] dark:[--xy-minimap-mask-stroke-color:rgb(255_255_255/0.45)]",
          "[--graph-minimap-node:#d4d4d8] dark:[--graph-minimap-node:#3f3f46] [--graph-minimap-selected:#09090b] dark:[--graph-minimap-selected:#ffffff]",
          className,
        )}
      >
        <ReactFlow<FlowNode, FlowEdge>
          nodes={flowNodes}
          edges={flowEdges}
          nodeTypes={nodeTypes}
          edgeTypes={edgeTypes}
          onNodeClick={onNodeClick ? (_, node) => onNodeClick(node.id) : undefined}
          onEdgeClick={onEdgeClick ? (_, edge) => (edge.data?.edge.selectable ? onEdgeClick(edge.id) : undefined) : undefined}
          onPaneClick={onPaneClick}
          nodesDraggable={false}
          nodesConnectable={false}
          nodesFocusable={false}
          edgesFocusable={false}
          elementsSelectable={false}
          disableKeyboardA11y
          fitView
          fitViewOptions={{ padding, maxZoom: 1 }}
          minZoom={0.05}
          maxZoom={2}
          // The attribution link is drawn below in the canvas style instead of React Flow's default badge.
          proOptions={{ hideAttribution: true }}
        >
          {grid ? <Background variant={BackgroundVariant.Dots} gap={16} size={1} /> : null}
          {toolbar ? (
            <Panel position="top-left" className="flex flex-wrap items-center gap-1.5">
              {toolbar}
            </Panel>
          ) : null}
          <Panel position="bottom-left">
            <CanvasControls duration={duration} padding={padding} />
          </Panel>
          <Panel position="bottom-right" className="m-2!">
            <a
              href="https://reactflow.dev"
              target="_blank"
              rel="noreferrer"
              className="rounded px-1 text-[10px] text-zinc-950/35 hover:text-zinc-950/60 focus-visible:outline-2 focus-visible:outline-sky-500 dark:text-white/30 dark:hover:text-white/60"
            >
              React Flow
            </a>
          </Panel>
          {showMinimap ? (
            <MiniMap<FlowNode>
              position="top-right"
              pannable
              zoomable
              ariaLabel="Mini map"
              nodeColor={(node) => (node.data.selected ? "var(--graph-minimap-selected)" : (node.data.node.status && minimapColor[node.data.node.status]) || "var(--graph-minimap-node)")}
              nodeStrokeWidth={0}
              nodeBorderRadius={4}
              style={{ width: 140, height: 92 }}
              className="overflow-hidden rounded-lg border border-zinc-950/10 dark:border-white/15"
            />
          ) : null}
        </ReactFlow>
      </div>
    </CanvasContext.Provider>
  );
}

const zoomSelector = (state: ReactFlowState) => Math.round(state.transform[2] * 100);

/** Zoom out, the zoom level (click to reset to 100%), zoom in, and fit to view, in one hairline group. */
function CanvasControls({ duration, padding }: { duration: number; padding: FitViewOptions["padding"] }) {
  const flow = useReactFlow();
  const zoom = useStore(zoomSelector);
  return (
    <div
      role="group"
      aria-label="Canvas controls"
      className="flex items-center gap-0.5 rounded-lg border border-zinc-950/10 bg-white p-0.5 shadow-[0_1px_2px_rgb(0_0_0/0.05)] dark:border-white/15 dark:bg-black dark:shadow-none"
    >
      <CanvasButton label="Zoom out" onClick={() => void flow.zoomOut({ duration })}>
        <path d="M3.5 8h9" />
      </CanvasButton>
      <button
        type="button"
        aria-label={`Zoom ${zoom}%. Reset to 100%`}
        title="Reset to 100%"
        onClick={() => void flow.zoomTo(1, { duration })}
        className={cx(
          "h-7 min-w-11 rounded-md px-1 font-mono text-[11px] text-zinc-600 tabular-nums dark:text-zinc-400",
          "transition-colors duration-150 ease-out hover:bg-zinc-950/[0.05] hover:text-zinc-950 motion-reduce:transition-none dark:hover:bg-white/[0.08] dark:hover:text-white",
          "focus-visible:outline-2 focus-visible:outline-sky-500",
        )}
      >
        {zoom}%
      </button>
      <CanvasButton label="Zoom in" onClick={() => void flow.zoomIn({ duration })}>
        <path d="M8 3.5v9M3.5 8h9" />
      </CanvasButton>
      <span aria-hidden="true" className="mx-0.5 h-4 w-px bg-zinc-950/10 dark:bg-white/15" />
      <CanvasButton label="Fit to view" onClick={() => void flow.fitView({ padding, maxZoom: 1, duration })}>
        <path d="M2.75 6V3.75a1 1 0 0 1 1-1H6M10 2.75h2.25a1 1 0 0 1 1 1V6M13.25 10v2.25a1 1 0 0 1-1 1H10M6 13.25H3.75a1 1 0 0 1-1-1V10" />
      </CanvasButton>
    </div>
  );
}

function CanvasButton({ label, onClick, children }: { label: string; onClick: () => void; children: ReactNode }) {
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      onClick={onClick}
      className={cx(
        "grid size-7 place-items-center rounded-md text-zinc-600 dark:text-zinc-400",
        "transition-colors duration-150 ease-out hover:bg-zinc-950/[0.05] hover:text-zinc-950 motion-reduce:transition-none dark:hover:bg-white/[0.08] dark:hover:text-white",
        "focus-visible:outline-2 focus-visible:outline-sky-500",
      )}
    >
      <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4">
        {children}
      </svg>
    </button>
  );
}