@anchrd/intel 0.59.0

package/ui/src/node-graph/node-graph.tsx

@@ -0,0 +1,295 @@
+import type { RelationGraph, RelationNode } from "@contract/flow.ts";
+import { LocateFixed, Minus, Plus, User } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { I18n } from "@/i18n/i18n.types.ts";
+import { kindIcons } from "@/kind-icon.ts";
+import { ResolvedNamesProvider, useResolvedName } from "@/resolved-names/resolved-names.tsx";
+import { initials, useUserName } from "@/user-name/user-name.ts";
+import { GraphNotice } from "./graph-notice.tsx";
+import {
+  buildRadialLayout,
+  elbowPath,
+  type PositionedNode,
+  type PositionedUser,
+} from "./node-graph.ts";
+
+// Half the viewBox: big enough that the outermost user ring (radius 448) never touches the edge,
+// with room left over for the labels beside it.
+const HALF = 520;
+
+function radiusOf(node: PositionedNode): number {
+  if (!node.node.inScope) return 8;
+  return node.node.depth === 0 ? 26 : node.node.depth === 1 ? 12 : node.node.depth === 2 ? 9 : 7;
+}
+
+function iconSizeOf(node: PositionedNode): number {
+  return node.node.depth === 0 ? 16 : node.node.inScope ? 11 : 9;
+}
+
+/**
+ * One node's picture: circle, icon, and — past the centre — a label on whichever side has room.
+ *
+ * ⚠️ Focus and click are the SAME handler (#825, `packages/intel/ui/CLAUDE.md`'s reachability rule): a
+ * folder becomes the new centre exactly the way a click on it already does elsewhere in this
+ * application (`select` navigates, and the screen around this component re-asks the graph scoped to
+ * whatever is now selected) — nothing here decides that on its own.
+ */
+function NodeMark({
+  entry,
+  i18n,
+  select,
+}: {
+  entry: PositionedNode;
+  i18n: I18n;
+  select(node: RelationNode): void;
+}) {
+  const Icon = kindIcons[entry.node.kind];
+  const r = radiusOf(entry);
+  const size = iconSizeOf(entry);
+  const right = Math.cos(entry.angle) >= 0;
+  const labelX = entry.x + (right ? r + 8 : -(r + 8));
+  const bundled = entry.bundled > 0;
+  const muted = !entry.node.inScope;
+  return (
+    // An SVG <g> cannot become a real <button> — a foreignObject would work but drags in a whole
+    // HTML box model where this needs one that scales and hit-tests as part of the picture. role,
+    // tabIndex and the Enter/Space handler below are the WAI-ARIA-authored equivalent instead.
+    // biome-ignore lint/a11y/useSemanticElements: see above
+    <g
+      role="button"
+      tabIndex={0}
+      aria-label={entry.node.title}
+      onClick={() => select(entry.node)}
+      onKeyDown={(event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        select(entry.node);
+      }}
+      className="cursor-pointer outline-none [&:focus-visible>circle:first-of-type]:stroke-ring [&:focus-visible>circle:first-of-type]:stroke-[3px]"
+    >
+      <circle
+        cx={entry.x}
+        cy={entry.y}
+        r={r}
+        style={{
+          fill: "var(--card)",
+          stroke: muted ? "var(--muted-foreground)" : "var(--foreground)",
+          strokeWidth: 1.2,
+          strokeDasharray: bundled ? "3 2" : undefined,
+          opacity: muted ? 0.7 : 1,
+        }}
+      />
+      <g
+        transform={`translate(${entry.x - size / 2}, ${entry.y - size / 2})`}
+        style={{ opacity: muted ? 0.7 : 1 }}
+      >
+        <Icon
+          width={size}
+          height={size}
+          style={{ color: muted ? "var(--muted-foreground)" : "var(--foreground)" }}
+        />
+      </g>
+      {(entry.node.depth <= 2 || bundled || muted) && (
+        <text
+          x={labelX}
+          y={entry.y}
+          textAnchor={right ? "start" : "end"}
+          dominantBaseline="middle"
+          style={{
+            fontSize: entry.node.depth === 0 ? 13 : 11,
+            fontWeight: entry.node.depth <= 1 ? 600 : 400,
+            fill: muted ? "var(--muted-foreground)" : "var(--foreground)",
+          }}
+        >
+          {entry.node.title}
+          {bundled ? ` · ${i18n.t("node.graphBundled", { count: entry.bundled })}` : ""}
+        </text>
+      )}
+    </g>
+  );
+}
+
+function UserMark({ entry }: { entry: PositionedUser }) {
+  const own = useUserName(entry.id);
+  const resolved = useResolvedName(entry.id);
+  const name = own ?? resolved;
+  const right = Math.cos(entry.angle) >= 0;
+  const labelX = entry.x + (right ? 22 : -22);
+  return (
+    <g>
+      <circle
+        cx={entry.x}
+        cy={entry.y}
+        r={13}
+        style={{ fill: "var(--card)", stroke: "var(--foreground)", strokeWidth: 1.2 }}
+      />
+      <g transform={`translate(${entry.x - 6.5}, ${entry.y - 6.5})`}>
+        <User width={13} height={13} style={{ color: "var(--foreground)" }} />
+      </g>
+      <text
+        x={labelX}
+        y={entry.y}
+        textAnchor={right ? "start" : "end"}
+        dominantBaseline="middle"
+        style={{ fontSize: 12, fontWeight: 500, fill: "var(--foreground)" }}
+      >
+        {name ?? initials("")}
+      </text>
+    </g>
+  );
+}
+
+function ZoomControls({
+  scale,
+  setScale,
+  i18n,
+}: {
+  scale: number;
+  setScale(update: (value: number) => number): void;
+  i18n: I18n;
+}) {
+  const controls = [
+    {
+      label: i18n.t("node.graphZoomIn"),
+      action: () => setScale((value) => Math.min(3, value * 1.25)),
+      icon: Plus,
+    },
+    {
+      label: i18n.t("node.graphZoomOut"),
+      action: () => setScale((value) => Math.max(0.4, value / 1.25)),
+      icon: Minus,
+    },
+    { label: i18n.t("node.graphReset"), action: () => setScale(() => 1), icon: LocateFixed },
+  ];
+  return (
+    <div className="absolute bottom-4 right-4 flex overflow-hidden rounded-lg border bg-card shadow-lg">
+      {controls.map(({ label, action, icon: Icon }) => (
+        <button
+          key={label}
+          type="button"
+          aria-label={label}
+          onClick={action}
+          className="grid size-9 place-items-center border-r text-card-foreground outline-none last:border-r-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Icon aria-hidden="true" className="size-4" />
+        </button>
+      ))}
+      <span className="sr-only">{Math.round(scale * 100)}%</span>
+    </div>
+  );
+}
+
+/**
+ * The graph half of the editor ↔ graph switch (#19), a radial tree since #825: the folder or flow
+ * being looked at sits at the centre, its contents fan out ring by ring, and the outer ring is who
+ * may reach them.
+ *
+ * Clicking a node navigates to it — for a folder that also makes it the new centre, because the
+ * screen around this component re-asks the graph scoped to whatever is selected (`nodes.tsx`,
+ * `flows.tsx`). This component only ever draws what `flow_graph` already decided the viewer may see.
+ */
+export function RelationGraphView({
+  data,
+  i18n,
+  select,
+}: {
+  data: RelationGraph;
+  i18n: I18n;
+  select(node: RelationGraph["nodes"][number]): void;
+}) {
+  const layout = useMemo(() => buildRadialLayout(data), [data]);
+  const [scale, setScale] = useState(1);
+  const userIds = useMemo(() => data.users.map((user) => user.id), [data.users]);
+  return (
+    <section aria-label={i18n.t("view.graph")} className="flex min-h-0 flex-1 flex-col">
+      <GraphNotice data={data} i18n={i18n} />
+      <div className="relative min-h-0 flex-1 overflow-hidden bg-muted/20">
+        {data.nodes.length === 0 ? (
+          <div className="grid h-full place-items-center p-8 text-sm text-muted-foreground">
+            {i18n.t("view.graphEmpty")}
+          </div>
+        ) : (
+          <ResolvedNamesProvider ids={userIds}>
+            <svg
+              viewBox={`${-HALF} ${-HALF} ${HALF * 2} ${HALF * 2}`}
+              className="h-full w-full"
+              role="img"
+              aria-label={i18n.t("view.graph")}
+            >
+              <title>{i18n.t("view.graph")}</title>
+              <g style={{ transform: `scale(${scale})`, transformOrigin: "0 0" }}>
+                {/* The outer ring's own lines, first and faintest: who may share what, drawn only
+                    for a node the viewer holds `share` on (`flow_graph`, #825). */}
+                {data.access.map((edge) => {
+                  const user = layout.users.find((entry) => entry.id === edge.userId);
+                  const target = layout.byId.get(edge.nodeId);
+                  if (!user || !target) return null;
+                  return (
+                    <line
+                      key={`access:${edge.userId}:${edge.nodeId}`}
+                      x1={user.x}
+                      y1={user.y}
+                      x2={target.x}
+                      y2={target.y}
+                      style={{ stroke: "var(--foreground)", strokeWidth: 0.75, opacity: 0.15 }}
+                    />
+                  );
+                })}
+                {/* Membership: arc plus radial piece, on the parent's own radius, never a straight
+                    line from centre to centre (#825's one line the whole picture hangs on). */}
+                {layout.nodes.map((entry) =>
+                  entry.parent ? (
+                    <path
+                      key={`belongs:${entry.node.id}`}
+                      d={elbowPath(
+                        entry.parent.radius,
+                        entry.parent.angle,
+                        entry.radius,
+                        entry.angle,
+                      )}
+                      style={{
+                        fill: "none",
+                        stroke: "var(--border)",
+                        strokeWidth: 1.2,
+                        strokeLinecap: "round",
+                      }}
+                    />
+                  ) : null,
+                )}
+                {/* Reference: dashed, so "reads" and "calls" never read as the same kind of line as
+                    "belongs" (#825's two edge kinds). */}
+                {data.edges.map((edge) => {
+                  const source = layout.byId.get(edge.source);
+                  const target = layout.byId.get(edge.target);
+                  if (!source || !target) return null;
+                  return (
+                    <line
+                      key={edge.id}
+                      x1={source.x}
+                      y1={source.y}
+                      x2={target.x}
+                      y2={target.y}
+                      style={{
+                        stroke:
+                          edge.relation === "calls" ? "var(--primary)" : "var(--muted-foreground)",
+                        strokeWidth: edge.relation === "calls" ? 1.5 : 1,
+                        strokeDasharray: "5 4",
+                      }}
+                    />
+                  );
+                })}
+                {layout.nodes.map((entry) => (
+                  <NodeMark key={entry.node.id} entry={entry} i18n={i18n} select={select} />
+                ))}
+                {layout.users.map((entry) => (
+                  <UserMark key={entry.id} entry={entry} />
+                ))}
+              </g>
+            </svg>
+            <ZoomControls scale={scale} setScale={setScale} i18n={i18n} />
+          </ResolvedNamesProvider>
+        )}
+      </div>
+    </section>
+  );
+}