Auto-detect workflow leaves as outputs; better OpenRouter error diagnostics

- executeWorkflow now collects all leaf nodes (no outgoing edges with non-empty
  output) into lastRunResults instead of relying on a dedicated Output node.
- Toolbar shows a Dialog popover with the last run's outputs (thumbnails + text);
  auto-opens after a run, reopen via "Last run (N)" button.
- v1 /api/v1/workflows/{id}/execute returns leaves as outputs instead of
  filtering by type === "output".
- Output node removed from the sidebar's new-node menu (type still registered
  so old workflows continue to load).
- Selecting a node thickens any edge touching it (accent stroke) and enlarges
  the output handle of nodes feeding into the selection.
- Refine outputs N tiles as separate imageUrls instead of stitching; added a
  Tile Resolution dropdown (default 1K) to keep chained inputs under
  OpenRouter's 30MB per-request limit.
- Server reads OpenRouter responses as text and JSON.parse with fallback so
  upstream gateway errors surface as readable messages instead of bare
  "SyntaxError: Unexpected end of JSON input".

Author: pallaoro

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

@@ -43,9 +43,11 @@ export function RefineNode({ id, data }: Props) {
         {data.status === "error" && (
           <div className="text-[11px] p-1.5 rounded bg-red-50 text-red-500 break-words">{data.error || "Refine failed"}</div>
         )}
-        {data.status === "success" && data.imageUrls && data.imageUrls.length > 0 && (
-          <div className="text-[11px] p-1.5 rounded bg-emerald-50 text-emerald-600">
-            ✓ {data.imageUrls.length} tile{data.imageUrls.length === 1 ? "" : "s"} ready
+        {data.imageUrls && data.imageUrls.length > 0 && (
+          <div className="nodrag mt-1 grid gap-0.5" style={{ gridTemplateColumns: `repeat(${grid.cols}, minmax(0, 1fr))` }}>
+            {data.imageUrls.map((url, idx) => (
+              <img key={idx} className="block w-full aspect-square object-cover rounded border border-border-dim" src={url} alt={`Tile ${idx + 1}`} />
+            ))}
           </div>
         )}
       </div>

src/client/components/sidebar.tsx

@@ -7,7 +7,6 @@ const NODE_TYPES = [
   { type: "imageInput", icon: "\uD83D\uDCF7", label: "Image Input", desc: "Reference image URL" },
   { type: "analyze", icon: "\uD83D\uDD0E", label: "Analyze", desc: "Vision \u2192 text/JSON" },
   { type: "refine", icon: "\u2737", label: "Refine", desc: "Tile-based image refinement" },
-  { type: "output", icon: "\uD83C\uDFA8", label: "Output", desc: "Display results" },
 ];
 
 export function Sidebar() {

src/client/components/toolbar.tsx

@@ -1,12 +1,23 @@
+import { useEffect, useRef, useState } from "react";
 import { useWorkflow } from "../context";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
 interface Props {
   workflowView: "canvas" | "outputs";
   onWorkflowViewChange: (v: "canvas" | "outputs") => void;
 }
 
 export function Toolbar({ workflowView, onWorkflowViewChange }: Props) {
-  const { activeWorkflow, saveWorkflow, executeWorkflow, executing } = useWorkflow();
+  const { activeWorkflow, saveWorkflow, executeWorkflow, executing, lastRunResults } = useWorkflow();
+  const [showResults, setShowResults] = useState(false);
+  // Auto-open the popover when a run finishes with results.
+  const wasExecutingRef = useRef(executing);
+  useEffect(() => {
+    if (wasExecutingRef.current && !executing && lastRunResults.length > 0) {
+      setShowResults(true);
+    }
+    wasExecutingRef.current = executing;
+  }, [executing, lastRunResults.length]);
 
   const tabClass = (active: boolean) =>
     `px-3 py-1.5 text-xs font-semibold cursor-pointer transition-all ${
@@ -43,7 +54,47 @@ export function Toolbar({ workflowView, onWorkflowViewChange }: Props) {
         >
           {executing ? (<><span className="spinner !border-white/30 !border-t-white" /> Running...</>) : "▶ Execute"}
         </button>
+        {lastRunResults.length > 0 && (
+          <button
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold border border-border-dim cursor-pointer bg-white text-gray-700 hover:bg-surface-card"
+            onClick={() => setShowResults(true)}
+            title="Reopen the most recent run's results"
+          >
+            Last run ({lastRunResults.length})
+          </button>
+        )}
       </div>
+
+      <Dialog open={showResults} onOpenChange={setShowResults}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Last run · {lastRunResults.length} output{lastRunResults.length === 1 ? "" : "s"}</DialogTitle>
+          </DialogHeader>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-2">
+            {lastRunResults.map((r) => (
+              <div key={r.nodeId} className="border border-border-dim rounded-lg p-3 bg-surface-card">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-semibold text-gray-700">{r.label}</span>
+                  <span className="text-[10px] text-gray-400 uppercase tracking-wide">{r.type}</span>
+                </div>
+                {r.imageUrl && (
+                  <img className="block w-full rounded border border-border-dim mb-2" src={r.imageUrl} alt={r.label} />
+                )}
+                {r.imageUrls && r.imageUrls.length > 0 && (
+                  <div className="grid grid-cols-2 gap-1 mb-2">
+                    {r.imageUrls.map((u, i) => (
+                      <img key={i} className="block w-full aspect-square object-cover rounded border border-border-dim" src={u} alt={`${r.label} ${i + 1}`} />
+                    ))}
+                  </div>
+                )}
+                {r.text && (
+                  <pre className="text-[11px] p-2 rounded bg-white border border-border-dim text-gray-700 max-h-[200px] overflow-y-auto whitespace-pre-wrap break-words">{r.text}</pre>
+                )}
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

src/client/context.tsx

@@ -2,6 +2,15 @@ import { createContext, useContext } from "react";
 import type { Workflow, ModelOption, Generation } from "./types";
 import type { Node, Edge, Viewport } from "@xyflow/react";
 
+export interface LeafResult {
+  nodeId: string;
+  label: string;
+  type: string;
+  imageUrl?: string;
+  imageUrls?: string[];
+  text?: string;
+}
+
 export interface WorkflowContextValue {
   // Workflow list
   workflows: Workflow[];
@@ -27,6 +36,10 @@ export interface WorkflowContextValue {
   runNode: (nodeId: string) => Promise<void>;
   executing: boolean;
 
+  /** Outputs from the most recent execution — one entry per leaf node (no outgoing edges). */
+  lastRunResults: LeafResult[];
+  setLastRunResults: (r: LeafResult[]) => void;
+
   // Models
   models: ModelOption[];
 

src/client/hooks/use-workflow.ts

@@ -9,7 +9,7 @@ import {
 } from "@xyflow/react";
 import { api } from "../api";
 import type { Workflow, ModelOption, Generation } from "../types";
-import type { WorkflowContextValue } from "../context";
+import type { WorkflowContextValue, LeafResult } from "../context";
 
 let nodeIdCounter = 0;
 function nextNodeId() {
@@ -75,6 +75,7 @@ export function useWorkflowState(): WorkflowContextValue {
   const [edges, setEdges, onEdgesChangeBase] = useEdgesState<Edge>([]);
   const [models, setModels] = useState<ModelOption[]>([]);
   const [generations, setGenerations] = useState<Generation[]>([]);
+  const [lastRunResults, setLastRunResults] = useState<LeafResult[]>([]);
   const [executing, setExecuting] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -590,6 +591,26 @@ export function useWorkflowState(): WorkflowContextValue {
         await Promise.allSettled(level.map((nid) => executeNode(nid, nodeMap, edges, outputs)));
       }
 
+      // Leaves = nodes with no outgoing edges. Treat them as the workflow's
+      // "outputs" — Output node becomes optional.
+      const hasOutgoing = new Set(edges.map((e) => e.source));
+      const leaves: LeafResult[] = [];
+      for (const n of nodes) {
+        if (hasOutgoing.has(n.id)) continue;
+        const out = outputs.get(n.id);
+        if (!out) continue;
+        if (!out.imageUrl && !out.text && !(out.imageUrls && out.imageUrls.length)) continue;
+        leaves.push({
+          nodeId: n.id,
+          label: ((n.data as Record<string, unknown>).label as string) || n.id,
+          type: n.type || "",
+          imageUrl: out.imageUrl,
+          imageUrls: out.imageUrls,
+          text: out.text,
+        });
+      }
+      setLastRunResults(leaves);
+
       await saveWorkflow();
 
       if (activeIdRef.current) {
@@ -671,6 +692,8 @@ export function useWorkflowState(): WorkflowContextValue {
     executeWorkflow,
     runNode,
     executing,
+    lastRunResults,
+    setLastRunResults,
     models,
     generations,
     isAgent,

src/server/index.ts

@@ -276,14 +276,25 @@ app.openapi(generateImage, async (c) => {
       return c.json({ error: `OpenRouter error: ${err}` }, 500);
     }
 
-    const data = (await response.json()) as {
+    // Read as text so we can surface the actual response when it isn't valid
+    // JSON (CF gateway timeout, partial body, etc.) — `response.json()` would
+    // throw a bare SyntaxError here that's useless for debugging.
+    const rawText = await response.text();
+    let data: {
       choices?: Array<{
         message?: {
           content?: string;
           images?: Array<{ image_url: { url: string } }>;
         };
       }>;
     };
+    try {
+      data = JSON.parse(rawText);
+    } catch {
+      return c.json({
+        error: `OpenRouter returned non-JSON (status ${response.status}, ${rawText.length} bytes): ${rawText.slice(0, 400)}`,
+      }, 500);
+    }
 
     const message = data.choices?.[0]?.message;
 
@@ -460,7 +471,13 @@ async function runAnalyze(
     const err = await response.text();
     throw new Error(`OpenRouter error: ${err}`);
   }
-  const data = (await response.json()) as { choices?: Array<{ message?: { content?: string } }> };
+  const rawText = await response.text();
+  let data: { choices?: Array<{ message?: { content?: string } }> };
+  try {
+    data = JSON.parse(rawText);
+  } catch {
+    throw new Error(`OpenRouter returned non-JSON (status ${response.status}, ${rawText.length} bytes): ${rawText.slice(0, 400)}`);
+  }
   let text = data.choices?.[0]?.message?.content?.trim() || "";
   if (outputFormat === "json") {
     // Strip code fences if the model added them despite our instruction.
@@ -908,11 +925,14 @@ publicApp.openapi(executeWorkflow, async (c) => {
     await Promise.allSettled(level.map((nid) => limiter.run(() => executeNode(nid))));
   }
 
-  // Return output nodes as the primary result
-  const outputNodes = results.filter((r) => r.type === "output");
+  // Treat any node with no outgoing edges as a workflow output (leaf). This
+  // makes the dedicated Output node optional — wiring up to a leaf is the
+  // implicit "this is what I want back" signal.
+  const hasOutgoing = new Set(edges.map((e) => e.source));
+  const leafResults = results.filter((r) => !hasOutgoing.has(r.node_id));
   return c.json({
     workflow_id: wf.id,
-    outputs: outputNodes.map((r) => r.output),
+    outputs: leafResults.map((r) => ({ node_id: r.node_id, label: r.label, type: r.type, ...r.output })),
     all_nodes: results,
   }, 200);
 });