@tuongaz/seeflow 0.1.26 → 0.1.28

package/examples/ecommerce-platform/.seeflow/scripts/platform-health.html

@@ -0,0 +1,42 @@
+<div class="h-full w-full p-3 font-sans text-slate-200">
+  <div class="mb-2 flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      <span class="relative flex h-2 w-2">
+        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
+        <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
+      </span>
+      <span class="text-[10px] font-semibold tracking-widest text-emerald-400 uppercase">Platform Health</span>
+    </div>
+    <span class="text-[10px] text-slate-400">live · 5s</span>
+  </div>
+  <div class="grid grid-cols-2 gap-2">
+    <div class="rounded border border-emerald-500/30 bg-slate-900/40 p-2">
+      <div class="text-[10px] tracking-wide text-slate-400 uppercase">Orders / sec</div>
+      <div class="mt-1 flex items-baseline justify-between">
+        <span class="text-lg font-semibold text-slate-100">142</span>
+        <span class="rounded bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400">↑ 12%</span>
+      </div>
+    </div>
+    <div class="rounded border border-emerald-500/30 bg-slate-900/40 p-2">
+      <div class="text-[10px] tracking-wide text-slate-400 uppercase">Success rate</div>
+      <div class="mt-1 flex items-baseline justify-between">
+        <span class="text-lg font-semibold text-slate-100">99.4%</span>
+        <span class="rounded bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400">✓ ok</span>
+      </div>
+    </div>
+    <div class="rounded border border-amber-500/30 bg-slate-900/40 p-2">
+      <div class="text-[10px] tracking-wide text-slate-400 uppercase">p95 latency</div>
+      <div class="mt-1 flex items-baseline justify-between">
+        <span class="text-lg font-semibold text-slate-100">87 ms</span>
+        <span class="rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-medium text-amber-400">warn</span>
+      </div>
+    </div>
+    <div class="rounded border border-slate-500/30 bg-slate-900/40 p-2">
+      <div class="text-[10px] tracking-wide text-slate-400 uppercase">Active carts</div>
+      <div class="mt-1 flex items-baseline justify-between">
+        <span class="text-lg font-semibold text-slate-100">3,210</span>
+        <span class="rounded bg-slate-500/20 px-1.5 py-0.5 text-[10px] font-medium text-slate-300">live</span>
+      </div>
+    </div>
+  </div>
+</div>

package/examples/ecommerce-platform/.seeflow/style.json

@@ -0,0 +1,98 @@
+{
+  "nodes": {
+    "client": {
+      "position": {
+        "x": 80,
+        "y": 215.5
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "api-gateway": {
+      "position": {
+        "x": 320,
+        "y": 227
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "auth-service": {
+      "position": {
+        "x": 660,
+        "y": 50
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "product-service": {
+      "position": {
+        "x": 660,
+        "y": 218
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "cart-service": {
+      "position": {
+        "x": 660,
+        "y": 413
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "order-service": {
+      "position": {
+        "x": 1000,
+        "y": 413
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "payment-service": {
+      "position": {
+        "x": 1340,
+        "y": 349
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "notification-service": {
+      "position": {
+        "x": 1680,
+        "y": 339
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "postgresql": {
+      "position": {
+        "x": 1720,
+        "y": 507
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "platform-health": {
+      "position": {
+        "x": 1340,
+        "y": 50
+      },
+      "width": 380,
+      "height": 220,
+      "backgroundColor": "slate",
+      "borderColor": "green",
+      "borderSize": 1,
+      "cornerRadius": 8,
+      "autoSize": false
+    }
+  }
+}

package/examples/order-pipeline/.seeflow/architecture.json

@@ -0,0 +1,93 @@
+{
+  "version": 2,
+  "name": "Order Pipeline",
+  "nodes": [
+    {
+      "id": "post-orders",
+      "type": "playNode",
+      "data": {
+        "name": "POST /orders",
+        "kind": "service",
+        "stateSource": {
+          "kind": "request"
+        },
+        "description": "Creates order, kicks off the pipeline.",
+        "detail": "file://details/post-orders.md",
+        "playAction": {
+          "kind": "script",
+          "interpreter": "bun",
+          "args": [
+            "run"
+          ],
+          "scriptPath": "scripts/play.ts"
+        }
+      }
+    },
+    {
+      "id": "inventory-service",
+      "type": "stateNode",
+      "data": {
+        "name": "Inventory Service",
+        "kind": "worker",
+        "stateSource": {
+          "kind": "event"
+        },
+        "description": "Reserves stock.",
+        "detail": "file://details/inventory-service.md",
+        "icon": "a-arrow-down-icon"
+      }
+    },
+    {
+      "id": "payment-service",
+      "type": "stateNode",
+      "data": {
+        "name": "Payment Service",
+        "kind": "worker",
+        "stateSource": {
+          "kind": "event"
+        },
+        "description": "Charges card.",
+        "detail": "file://details/payment-service.md"
+      }
+    },
+    {
+      "id": "fulfillment-service",
+      "type": "stateNode",
+      "data": {
+        "name": "Fulfillment Service",
+        "kind": "worker",
+        "stateSource": {
+          "kind": "event"
+        },
+        "description": "Enqueues shipment.",
+        "detail": "file://details/fulfillment-service.md"
+      }
+    }
+  ],
+  "connectors": [
+    {
+      "id": "c1",
+      "source": "post-orders",
+      "target": "inventory-service",
+      "kind": "event",
+      "eventName": "order.created",
+      "label": "order.created"
+    },
+    {
+      "id": "c2",
+      "source": "inventory-service",
+      "target": "payment-service",
+      "kind": "event",
+      "eventName": "stock.reserved",
+      "label": "stock.reserved"
+    },
+    {
+      "id": "c3",
+      "source": "payment-service",
+      "target": "fulfillment-service",
+      "kind": "event",
+      "eventName": "payment.captured",
+      "label": "payment.captured"
+    }
+  ]
+}

package/examples/order-pipeline/.seeflow/details/fulfillment-service.md

@@ -0,0 +1,21 @@
+## Fulfillment Service
+
+Listens for `payment.captured` and enqueues a shipment job for the warehouse to pick, pack, and dispatch the order. Assigns a tracking ID and notifies the customer.
+
+### Triggered by
+- `payment.captured`
+
+### Logic
+1. Convert the stock reservation into a pick list
+2. Assign a carrier and service level
+3. Generate a shipment ID and tracking number
+4. Push the job to the warehouse queue
+5. Send dispatch confirmation to the customer
+
+### Payload
+```json
+{
+  "shipmentId": "shp_1234567890",
+  "orderId": "ord_1234567890"
+}
+```

package/examples/order-pipeline/.seeflow/details/inventory-service.md

@@ -0,0 +1,23 @@
+## Inventory Service
+
+Listens for `order.created` and attempts to reserve the requested stock in the warehouse. Checks available quantity, places a hold on the items, and records the warehouse location.
+
+### Triggered by
+- `order.created`
+
+### Logic
+1. Look up each SKU in the warehouse
+2. Verify sufficient quantity is available
+3. Place a reservation hold
+4. Record the fulfilling warehouse ID
+
+### Emits
+- `stock.reserved` → Payment Service
+
+### Payload
+```json
+{
+  "reserved": true,
+  "warehouseId": "wh_sydney"
+}
+```

package/examples/order-pipeline/.seeflow/details/payment-service.md

@@ -0,0 +1,23 @@
+## Payment Service
+
+Listens for `stock.reserved` and charges the customer's card on file. Integrates with the payment gateway to authorise and capture funds for the order total.
+
+### Triggered by
+- `stock.reserved`
+
+### Logic
+1. Retrieve customer's saved payment method
+2. Calculate order total (items + tax + shipping)
+3. Authorise charge with payment gateway
+4. Capture funds and record the charge ID
+
+### Emits
+- `payment.captured` → Fulfillment Service
+
+### Payload
+```json
+{
+  "chargeId": "ch_1234567890",
+  "amount": 4999
+}
+```

package/examples/order-pipeline/.seeflow/details/post-orders.md

@@ -0,0 +1,19 @@
+## POST /orders
+
+Entry point for the order pipeline. Accepts a customer ID and list of line items, creates an order record, and publishes the `order.created` event to kick off downstream processing.
+
+### Request
+```json
+{
+  "customerId": "cust_123",
+  "items": [{ "sku": "WIDGET-1", "qty": 2 }]
+}
+```
+
+### Response
+```json
+{ "orderId": "ord_1234567890" }
+```
+
+### Emits
+- `order.created` → Inventory Service

package/examples/order-pipeline/.seeflow/scripts/play.ts

@@ -1,4 +1,4 @@
-const demoId = process.env.SEEFLOW_DEMO_ID ?? '';
+const flowId = process.env.SEEFLOW_DEMO_ID ?? '';
 const runId = process.env.SEEFLOW_RUN_ID ?? '';
 const studioUrl = (process.env.SEEFLOW_STUDIO_URL ?? 'http://localhost:4321').replace(/\/+$/, '');
 
@@ -6,7 +6,7 @@ const res = await fetch(`${studioUrl}/demo/orders`, {
   method: 'POST',
   headers: {
     'content-type': 'application/json',
-    'x-seeflow-demo-id': demoId,
+    'x-seeflow-demo-id': flowId,
     'x-seeflow-run-id': runId,
   },
   body: JSON.stringify({ customerId: 'cust_123', items: [{ sku: 'WIDGET-1', qty: 2 }] }),

package/examples/order-pipeline/.seeflow/style.json

@@ -0,0 +1,42 @@
+{
+  "nodes": {
+    "post-orders": {
+      "position": {
+        "x": -181.96549037838943,
+        "y": 138.95644990042385
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "inventory-service": {
+      "position": {
+        "x": 66.21484197841792,
+        "y": -126.31035925520507
+      },
+      "width": 201,
+      "height": 118,
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    },
+    "payment-service": {
+      "position": {
+        "x": 469.1422114437386,
+        "y": 206.48855752663212
+      },
+      "borderSize": 1,
+      "fontSize": 15,
+      "borderColor": "green"
+    },
+    "fulfillment-service": {
+      "position": {
+        "x": 747.51321046746,
+        "y": -37.78865629343234
+      },
+      "fontSize": 15,
+      "borderColor": "green",
+      "borderSize": 1
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuongaz/seeflow",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Local studio that hosts file-defined demos as React Flow canvases wired to a running app via REST + SSE + Zod schema.",
   "keywords": [
     "seeflow",
@@ -38,7 +38,8 @@
     "start": "bun run src/cli.ts start",
     "test": "bun test",
     "build:web": "cd ../web && bun run build",
-    "prepublishOnly": "bun run build:web && cp ../../README.md ./README.md"
+    "vendor:tailwind-runtime": "cp ../../node_modules/@tailwindcss/browser/dist/index.global.js public/runtime/tailwind.js",
+    "prepublishOnly": "bun run vendor:tailwind-runtime && bun run build:web && cp ../../README.md ./README.md"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
@@ -48,6 +49,7 @@
     "zod-to-json-schema": "^3.25.2"
   },
   "devDependencies": {
+    "@tailwindcss/browser": "^4.3.0",
     "@types/bun": "^1.1.14",
     "@types/dagre": "^0.7.54",
     "typescript": "^5.6.3"