feat(editor): pin icon on canvas nodes with pinned data

frontend/src/editor/customNode.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { ReactFlowProvider } from "@xyflow/react";
+import { http, HttpResponse } from "msw";
+import { server } from "@/testing/msw";
+import { VcNode } from "./customNode";
+import type { NodeTypeDto } from "@/api/types";
+
+function renderNode(data: Record<string, unknown>) {
+  server.use(
+    http.get("/api/node-types", () =>
+      HttpResponse.json([
+        {
+          id: "http.response", displayName: "Web Response", category: "Terminal",
+          inputCount: 1, outputCount: 0, connectionProviderId: null,
+          configSchema: { type: "object" },
+        } satisfies NodeTypeDto,
+      ])),
+  );
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <ReactFlowProvider>
+        <VcNode
+          id="n1" type="vc" data={data} selected={false} zIndex={0}
+          isConnectable={true} positionAbsoluteX={0} positionAbsoluteY={0}
+          dragging={false} selectable={true} deletable={true} draggable={true}
+        />
+      </ReactFlowProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("VcNode pin icon", () => {
+  it("does NOT render the pin icon when pin fields are absent", () => {
+    renderNode({ typeId: "http.response", config: {} });
+    expect(screen.queryByTestId("pin-badge")).not.toBeInTheDocument();
+  });
+
+  it("renders the pin icon when pinnedInput is set", () => {
+    renderNode({ typeId: "http.response", config: {}, pinnedInput: { a: 1 } });
+    expect(screen.getByTestId("pin-badge")).toBeInTheDocument();
+  });
+
+  it("renders the pin icon when pinnedOutput is set", () => {
+    renderNode({ typeId: "http.response", config: {}, pinnedOutput: { b: 1 } });
+    expect(screen.getByTestId("pin-badge")).toBeInTheDocument();
+  });
+
+  it("does NOT render the pin icon when pin fields are explicitly null", () => {
+    renderNode({ typeId: "http.response", config: {}, pinnedInput: null, pinnedOutput: null });
+    expect(screen.queryByTestId("pin-badge")).not.toBeInTheDocument();
+  });
+});

frontend/src/editor/customNode.tsx

@@ -1,4 +1,5 @@
 import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { Pin } from "lucide-react";
 import type { VcNodeData } from "./graphAdapter";
 import { useNodeTypes } from "@/api/hooks";
 
@@ -11,6 +12,9 @@ export function VcNode(props: NodeProps) {
   const border = props.selected
     ? "border-indigo-400 ring-2 ring-indigo-400/60"
     : "border-slate-700";
+  const isPinned =
+    (data.pinnedInput !== undefined && data.pinnedInput !== null) ||
+    (data.pinnedOutput !== undefined && data.pinnedOutput !== null);
 
   return (
     <div className={`rounded border ${border} bg-slate-900 min-w-[160px] shadow`}>
@@ -18,8 +22,16 @@ export function VcNode(props: NodeProps) {
         <Handle key={`i${i}`} type="target" position={Position.Left}
                 id={`i-${i}`} style={{ top: 20 + i * 16, background: "#5b6cff" }} />
       ))}
-      <div className="px-3 py-2 border-b border-slate-800 text-xs text-slate-400 uppercase">
-        {nt?.category ?? "…"}
+      <div className="px-3 py-2 border-b border-slate-800 text-xs text-slate-400 uppercase flex items-center gap-1">
+        <span>{nt?.category ?? "…"}</span>
+        {isPinned && (
+          <Pin
+            data-testid="pin-badge"
+            size={10}
+            className="text-amber-400 ml-auto"
+            aria-label="This node has pinned data"
+          />
+        )}
       </div>
       <div className="px-3 py-2 text-sm text-slate-100">{data.name ?? nt?.displayName ?? data.typeId}</div>
       {Array.from({ length: outputs }, (_, i) => (