Resizable prompt node + public OpenAPI spec for v1 routes

prompt-node:
  - Add @xyflow/react NodeResizer (visible when selected) so users can
    drag the node within 220–600 wide / 120–600 tall.
  - Track the typed `/` position in domToText coordinates via a new
    caretDomTextOffset helper. The previous saveCaretPos counted ZWS
    chars and pill labels, which diverged from domToText whenever the
    text contained pills or BR-driven newlines, breaking the slash menu
    when the prompt also held other `/` characters (e.g. JSON paths).
  - insertReference, the menuFilter computation, and the Backspace
    handler all use the new offset, so the typed slash is unambiguous.

server: split the API surface so the public spec can never include
internal routes by accident. A new publicApp (OpenAPIHono) holds the
two v1 endpoints (list workflows, execute workflow) as createRoute +
publicApp.openapi(...) registrations with full Zod request/response
schemas. publicApp is mounted at root via app.route("/", publicApp)
and its routes carry their /api/v1/... path explicitly, so paths in
the spec match real URLs without a `servers` indirection (some agent
renderers strip `servers`). The doc is served at /api/v1/openapi.json
and mirrored at /openapi.json from the main app via
publicApp.getOpenAPIDocument(...) so dashboards using the conventional
root path also find it. The old internal app.doc(...) is removed —
internal routes have nowhere to leak into a public spec.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: pallaoro

src/client/components/nodes/prompt-node.tsx

@@ -1,13 +1,13 @@
 import { useState, useRef, useCallback, useEffect, useMemo, type KeyboardEvent } from "react";
-import { Handle, Position } from "@xyflow/react";
+import { Handle, Position, NodeResizer } from "@xyflow/react";
 import type { Node } from "@xyflow/react";
 import { useWorkflow } from "../../context";
 import { api } from "../../api";
 import { NodeHeader } from "./node-header";
 import { NodeToolbar } from "./node-toolbar";
 import type { PromptNodeData } from "../../types";
 
-interface Props { id: string; data: PromptNodeData; }
+interface Props { id: string; data: PromptNodeData; selected?: boolean; }
 
 const ZWS = "\u200B";
 
@@ -72,6 +72,61 @@ function saveCaretPos(el: HTMLElement): number {
   return range.toString().length;
 }
 
+/** Offset of the caret in the same coordinate system as domToText(). */
+function caretDomTextOffset(el: HTMLElement): number {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return 0;
+  const range = sel.getRangeAt(0);
+  const target = range.startContainer;
+  const targetOffset = range.startOffset;
+
+  let count = 0;
+  let done = false;
+
+  function visit(node: globalThis.Node, isRoot = false) {
+    if (done) return;
+    if (node === target) {
+      if (node.nodeType === globalThis.Node.TEXT_NODE) {
+        count += (node.textContent || "").slice(0, targetOffset).replace(/​/g, "").length;
+      } else {
+        const kids = Array.from(node.childNodes);
+        for (let i = 0; i < targetOffset && i < kids.length; i++) {
+          visit(kids[i]);
+          if (done) return;
+        }
+      }
+      done = true;
+      return;
+    }
+    if (node.nodeType === globalThis.Node.TEXT_NODE) {
+      count += (node.textContent || "").replace(/​/g, "").length;
+      return;
+    }
+    if (node instanceof HTMLElement) {
+      if (node.classList.contains("prompt-pill")) {
+        const nodeId = node.getAttribute("data-node-id") || "";
+        count += `{{${nodeId}}}`.length;
+        return;
+      }
+      if (node.tagName === "BR") {
+        count += 1;
+        return;
+      }
+      if (node.tagName === "DIV" && !isRoot) {
+        // domToText prepends \n for nested DIVs when prior content lacks one
+        if (count > 0) count += 1;
+      }
+      for (const child of node.childNodes) {
+        visit(child);
+        if (done) return;
+      }
+    }
+  }
+
+  visit(el, true);
+  return count;
+}
+
 function restoreCaretPos(el: HTMLElement, offset: number) {
   const sel = window.getSelection();
   if (!sel) return;
@@ -115,7 +170,7 @@ function restoreCaretPos(el: HTMLElement, offset: number) {
   sel.addRange(range);
 }
 
-export function PromptNode({ id, data }: Props) {
+export function PromptNode({ id, data, selected }: Props) {
   const { updateNodeData, deleteNode, nodes } = useWorkflow();
   const [showMenu, setShowMenu] = useState(false);
   const [menuFilter, setMenuFilter] = useState("");
@@ -222,12 +277,13 @@ export function PromptNode({ id, data }: Props) {
     if (!el) return;
 
     const text = domToText(el);
-    const search = "/" + menuFilter;
-    const slashIdx = text.lastIndexOf(search);
-    if (slashIdx === -1) return;
+    const slashPos = slashPosRef.current;
+    if (slashPos === null) return;
+    const slashIdx = slashPos - 1;
+    if (slashIdx < 0 || text[slashIdx] !== "/") return;
 
     const before = text.slice(0, slashIdx);
-    const after = text.slice(slashIdx + search.length);
+    const after = text.slice(slashPos + menuFilter.length);
     const ref = `{{${nodeId}}}`;
     const newText = before + ref + after;
 
@@ -253,8 +309,8 @@ export function PromptNode({ id, data }: Props) {
     updateNodeData(id, { text });
 
     if (showMenu && slashPosRef.current !== null) {
-      const caretPos = saveCaretPos(el);
-      const typed = text.slice(slashPosRef.current, caretPos);
+      const caretPos = caretDomTextOffset(el);
+      const typed = text.slice(slashPosRef.current, Math.max(caretPos, slashPosRef.current));
       if (typed.length > 30 || (typed.includes(" ") && typed.length > 15)) {
         setShowMenu(false);
         slashPosRef.current = null;
@@ -270,7 +326,7 @@ export function PromptNode({ id, data }: Props) {
     if (!showMenu && e.key === "/" && promptNodes.length > 0) {
       const el = editorRef.current;
       if (!el) return;
-      slashPosRef.current = saveCaretPos(el) + 1;
+      slashPosRef.current = caretDomTextOffset(el) + 1;
       setShowMenu(true);
       setMenuFilter("");
       return;
@@ -295,7 +351,7 @@ export function PromptNode({ id, data }: Props) {
       } else if (e.key === "Backspace") {
         const el = editorRef.current;
         if (el && slashPosRef.current !== null) {
-          const caretPos = saveCaretPos(el);
+          const caretPos = caretDomTextOffset(el);
           if (caretPos <= slashPosRef.current - 1) {
             setShowMenu(false);
             slashPosRef.current = null;
@@ -306,15 +362,24 @@ export function PromptNode({ id, data }: Props) {
   }, [showMenu, filtered, menuIndex, promptNodes.length, insertReference]);
 
   return (
-    <div className="flow-node relative">
+    <div className="flow-node relative flex flex-col" style={{ width: "100%", height: "100%", maxWidth: "none" }}>
+      <NodeResizer
+        isVisible={selected}
+        minWidth={220}
+        minHeight={120}
+        maxWidth={600}
+        maxHeight={600}
+        lineClassName="!border-accent"
+        handleClassName="!bg-accent !border-white"
+      />
       <NodeToolbar id={id} isInput={data.isInput} onToggleInput={(v) => updateNodeData(id, { isInput: v })} />
       <NodeHeader id={id} label={data.label} icon="&#9998;" bgClass="bg-violet-50" textClass="text-violet-600" />
       <div className="p-2.5 flex flex-col gap-1.5 relative">
         <div
           ref={editorRef}
           contentEditable
           className="prompt-editor nodrag nowheel w-full bg-surface-card border border-border-dim rounded text-gray-800 text-xs p-1.5 outline-none transition-colors focus:border-accent"
-          style={{ minHeight: "64px", whiteSpace: "pre-wrap", wordBreak: "break-word" }}
+          style={{ minHeight: "64px", maxHeight: "240px", overflowY: "auto", whiteSpace: "pre-wrap", wordBreak: "break-word" }}
           onInput={onInput}
           onKeyDown={onKeyDown}
           onBlur={() => { setTimeout(() => setShowMenu(false), 200); flushAutoName(); }}

src/server/index.ts

@@ -5,6 +5,10 @@ import { initUploads, putUpload, getUpload, readUploadAsBase64DataUrl } from "./
 type Env = { Bindings: { DB: D1Database; UPLOADS: R2Bucket; OPENROUTER_API_KEY: string } };
 
 const app = new OpenAPIHono<Env>();
+// Public sub-app — every route here MUST be registered with publicApp.openapi(...)
+// so it shows up in /api/v1/openapi.json. Internal routes stay on `app` and are
+// excluded from the public spec by virtue of living in a different app instance.
+const publicApp = new OpenAPIHono<Env>();
 
 app.onError((err, c) => {
   console.error(err);
@@ -452,9 +456,44 @@ app.post("/api/suggest-name", async (c) => {
   }
 });
 
-// ── Public workflow list (with input schema) ─────────────────────────
+// ── Public API (v1) ──────────────────────────────────────────────────
 
-app.get("/api/v1/workflows", async (c) => {
+const PublicInputSchema = z.object({
+  node_id: z.string(),
+  type: z.enum(["text", "image_url"]),
+  label: z.string(),
+});
+
+const PublicWorkflowSchema = z.object({
+  id: z.number(),
+  name: z.string(),
+  inputs: z.array(PublicInputSchema),
+  created_at: z.string(),
+  updated_at: z.string(),
+});
+
+const ExecuteResultSchema = z.object({
+  workflow_id: z.number(),
+  outputs: z.array(z.record(z.unknown())),
+  all_nodes: z.array(z.object({
+    node_id: z.string(),
+    type: z.string(),
+    label: z.string(),
+    output: z.record(z.unknown()),
+  })),
+});
+
+const listPublicWorkflows = createRoute({
+  method: "get",
+  path: "/api/v1/workflows",
+  tags: ["workflows"],
+  summary: "List workflows with their input schema",
+  responses: {
+    200: { content: { "application/json": { schema: z.array(PublicWorkflowSchema) } }, description: "OK" },
+  },
+});
+
+publicApp.openapi(listPublicWorkflows, async (c) => {
   const rows = await query<{ id: number; name: string; nodes: string; created_at: string; updated_at: string }>(
     "SELECT id, name, nodes, created_at, updated_at FROM workflows ORDER BY updated_at DESC",
   );
@@ -474,10 +513,34 @@ app.get("/api/v1/workflows", async (c) => {
   return c.json(workflows, 200);
 });
 
-// ── Execute workflow ──────────────────────────────────────────────────
+const executeWorkflow = createRoute({
+  method: "post",
+  path: "/api/v1/workflows/{id}/execute",
+  tags: ["workflows"],
+  summary: "Run a workflow with the given input overrides",
+  request: {
+    params: z.object({ id: z.string() }),
+    body: {
+      content: {
+        "application/json": {
+          schema: z.object({
+            inputs: z.record(z.string()).optional().openapi({
+              description: "Map of input node_id → value (text or image URL).",
+            }),
+          }),
+        },
+      },
+    },
+  },
+  responses: {
+    200: { content: { "application/json": { schema: ExecuteResultSchema } }, description: "OK" },
+    404: { content: { "application/json": { schema: ErrorSchema } }, description: "Workflow not found" },
+    500: { content: { "application/json": { schema: ErrorSchema } }, description: "Server error" },
+  },
+});
 
-app.post("/api/v1/workflows/:id/execute", async (c) => {
-  const { id } = c.req.param();
+publicApp.openapi(executeWorkflow, async (c) => {
+  const { id } = c.req.valid("param");
   const apiKey = c.env.OPENROUTER_API_KEY;
   if (!apiKey) return c.json({ error: "OPENROUTER_API_KEY not set" }, 500);
 
@@ -486,7 +549,7 @@ app.post("/api/v1/workflows/:id/execute", async (c) => {
   );
   if (!wf) return c.json({ error: "Workflow not found" }, 404);
 
-  const body = await c.req.json<{ inputs?: Record<string, string> }>().catch(() => ({ inputs: {} }));
+  const body = c.req.valid("json");
   const inputOverrides = body.inputs || {};
 
   const nodes = JSON.parse(wf.nodes) as Array<{ id: string; type: string; data: Record<string, unknown> }>;
@@ -666,8 +729,22 @@ app.post("/api/v1/workflows/:id/execute", async (c) => {
   }, 200);
 });
 
-// ── OpenAPI doc ──────────────────────────────────────────────────────
+// ── OpenAPI doc + mount public sub-app ───────────────────────────────
+
+const publicSpec = {
+  openapi: "3.0.0" as const,
+  info: { title: "Flow Studio API", version: "1.0.0" },
+};
+
+publicApp.doc("/openapi.json", publicSpec);
+
+// Mirror the public spec at root /openapi.json so dashboards using the
+// conventional path find it. Internal routes are still excluded because the
+// document is generated from publicApp, not app.
+app.get("/openapi.json", (c) => c.json(publicApp.getOpenAPIDocument(publicSpec)));
 
-app.doc("/openapi.json", { openapi: "3.0.0", info: { title: "Flow Studio API", version: "3.0.0" } });
+// Mount at root: publicApp's routes already carry their full /api/v1/... path,
+// so paths in the spec match real URLs (no `servers` indirection needed).
+app.route("/", publicApp);
 
 export default app;