Merge pull request #2 from Praashh/enhance/ui

feat: implement custom syntax-highlighted code block component and ad…

Author: Praashh

app/api/upload/transloadit/route.ts

@@ -0,0 +1,36 @@
+import crypto from "node:crypto";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const authKey = process.env.TRANSLOADIT_KEY;
+  const authSecret = process.env.TRANSLOADIT_SECRET;
+
+  if (!authKey || !authSecret) {
+    return NextResponse.json(
+      { error: "Transloadit not configured" },
+      { status: 500 },
+    );
+  }
+
+  const rawParams = {
+    auth: {
+      key: authKey,
+      expires: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+    },
+    steps: {
+      ":original": {
+        robot: "/upload/handle",
+        result: true,
+      },
+    },
+  };
+
+  const paramsStr = JSON.stringify(rawParams);
+  const encoded = Buffer.from(paramsStr).toString("base64");
+  const signature = crypto
+    .createHmac("sha1", authSecret)
+    .update(encoded)
+    .digest("hex");
+
+  return NextResponse.json({ params: encoded, signature });
+}

app/app/flow/page.tsx

@@ -24,8 +24,8 @@ import {
   Redo2,
   Save,
   Search,
-  Upload,
   Undo2,
+  Upload,
 } from "lucide-react";
 import NodePropertiesPanel from "@/components/NodePropertiesPanel";
 import CropImageNode from "@/components/nodes/CropImageNode";
@@ -240,6 +240,7 @@ function CanvasEditorInner() {
     loadWorkflow,
     undo,
     redo,
+    setSelectedNodes,
   } = useCanvasStore();
   const {
     startRun,
@@ -359,15 +360,31 @@ function CanvasEditorInner() {
     }
   }, [workflowId]);
 
+  // Track selection for single/multi-select runs
+  const onSelectionChange = useCallback(
+    ({ nodes: selected }: { nodes: Node[] }) => {
+      setSelectedNodes(selected.map((n) => n.id));
+    },
+    [setSelectedNodes],
+  );
+
   // Run execution
   const runWorkflow = useCallback(async () => {
-    const nodeIds = useCanvasStore.getState().nodes.map((n) => n.id);
+    const state = useCanvasStore.getState();
+    const nodeIds =
+      state.selectedNodeIds.length > 0
+        ? state.selectedNodeIds
+        : state.nodes.map((n) => n.id);
 
     try {
       const res = await fetch(`/api/workflows/${workflowId}/run`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({}),
+        body: JSON.stringify(
+          nodeIds.length < useCanvasStore.getState().nodes.length
+            ? { selectedNodeIds: nodeIds }
+            : {},
+        ),
       });
       if (!res.ok) return;
 
@@ -616,6 +633,7 @@ function CanvasEditorInner() {
             isValidConnection={isValidConnection}
             deleteKeyCode="Delete"
             multiSelectionKeyCode="Shift"
+            onSelectionChange={onSelectionChange}
             fitView
             colorMode="light"
             className="bg-white text-gray-900"