Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start, stop and pause flows, and show what their nodes print

Browse Source 
Flows can now be taken off the engine and put back. Stopped state lives in a
runtime.json beside the flow, not in the flow document: the canvas autosaves
that document, so a stopped flow would otherwise start itself again on the
next edit. A stopped flow gets no subscriptions, schedules or webhooks, its
nodes are skipped by the scheduler, and running it answers 409. Pausing holds
a flow's nodes while its values keep arriving, so the canvas still shows what
is coming in.

Node code is user code and print is how it says things, so stdout is teed
through a contextvar sink active only during a node execution — one event per
execution, capped, so a chatty node cannot outrun the stream. A node that
fails sends its traceback the same way, trimmed to the author's own frames.
The dock gains a logs panel and a pause control; the dashboard replaces its
placeholder with what is running, stopped or failing; the edge inspector can
send the last message again.

Single-stepping is deferred and noted: the scheduler keeps no progress between
calls, so a step button would re-run the same node rather than advance.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Melvin Strobl
2026-08-15 23:35:08 +02:00
co-authored by Claude Fable 5
parent 606ab3c423
commit 7344eac262
29 changed files with 1410 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Flow/EdgeInspector.tsx
+33 -1
View File
@@ -1,10 +1,13 @@
import { ArrowRight, Trash2 } from "lucide-react"
import { useMutation } from "@tanstack/react-query"
import { ArrowRight, RotateCcw, Trash2 } from "lucide-react"
import { motion } from "motion/react"
import { useEffect, useRef, useState } from "react"
import { FlowsService } from "@/client"
import { Button } from "@/components/ui/button"
import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover"
import { ScrollArea } from "@/components/ui/scroll-area"
import useCustomToast from "@/hooks/useCustomToast"
import { cn } from "@/lib/utils"
import { displayName } from "./deriveEdges"
import { useLiveValue } from "./liveStore"
@@ -77,6 +80,8 @@ export type InspectedEdge = {
/** Node titles, so the popover names the two ends in the user's own words. */
from: string
to: string
/** The producing node's id, which is what replaying the message goes through. */
sourceId: string
x: number
y: number
}
@@ -96,6 +101,19 @@ export function EdgeInspector({
onUnbind: (message: string) => void
}) {
const live = useLiveValue(edge?.message)
const { showErrorToast } = useCustomToast()
// Publishing the value again from the node that produced it runs everything
// downstream exactly as the original did.
const replay = useMutation({
mutationFn: (value: unknown) =>
FlowsService.triggerNode({
name: flow,
nodeId: edge?.sourceId ?? "",
requestBody: { values: { [edge?.message ?? ""]: value } },
}),
onError: () => showErrorToast("The message could not be sent again."),
})
if (!edge) return null
const scalar = live === undefined ? null : formatScalar(live.value)
@@ -115,6 +133,20 @@ export function EdgeInspector({
<Marquee text={edge.from} className="flex-1 font-medium" />
<ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
<Marquee text={edge.to} className="flex-1 text-right font-medium" />
{live === undefined ? null : (
<Button
variant="ghost"
size="icon-sm"
className="-my-1 shrink-0 text-muted-foreground"
onClick={() => replay.mutate(live.value)}
disabled={replay.isPending}
aria-label="Send this message again"
title="Send this message again"
data-testid="replay-message"
>
<RotateCcw />
</Button>
)}
<Button
variant="ghost"
size="icon-sm"
frontend/src/components/Flow/FlowDock.tsx
+64 -15
View File
@@ -3,7 +3,9 @@ import {
AlertCircle,
Loader2,
Maximize2,
Pause,
Play,
PlayCircle,
Plus,
ZoomIn,
ZoomOut,
@@ -24,6 +26,8 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip"
import { slideUp, transitions } from "@/lib/motion"
import { cn } from "@/lib/utils"
import { LogsPanel } from "./LogsPanel"
/**
* What "fit" means on this canvas: the view a flow opens with, and the one the
@@ -38,16 +42,24 @@ export const FIT_VIEW = { padding: 0.25, maxZoom: 1.2 }
* affordance on this view; everything else stays quiet.
*/
export function FlowDock({
flow,
issues,
running,
enabled,
paused,
onAddNode,
onRun,
onTogglePause,
onFocusNode,
}: {
flow: string
issues: ValidationIssue[]
running: boolean
enabled: boolean
paused: boolean
onAddNode: () => void
onRun: () => void
onTogglePause: () => void
onFocusNode: (nodeId: string) => void
}) {
const { zoomIn, zoomOut, fitView } = useReactFlow()
@@ -152,21 +164,58 @@ export function FlowDock({
<Separator orientation="vertical" className="mx-0.5 !h-5" />
<Button
variant="brand"
size="sm"
className="h-11 gap-1.5 md:h-8"
onClick={onRun}
disabled={running}
data-testid="run-flow"
>
{running ? (
<Loader2 className="size-4 animate-spin" />
) : (
<Play className="size-4" />
)}
Run
</Button>
<LogsPanel flow={flow} />
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className={cn(
"size-11 text-muted-foreground md:size-8",
paused && "text-primary",
)}
onClick={onTogglePause}
disabled={!enabled}
aria-label={paused ? "Resume flow" : "Pause flow"}
data-testid={paused ? "resume-flow" : "pause-flow"}
>
{paused ? <PlayCircle /> : <Pause />}
</Button>
</TooltipTrigger>
<TooltipContent>
{!enabled
? "This flow is stopped"
: paused
? "Let the flow carry on"
: "Hold the nodes; values still arrive"}
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<span>
<Button
variant="brand"
size="sm"
className="h-11 gap-1.5 md:h-8"
onClick={onRun}
disabled={running || !enabled}
data-testid="run-flow"
>
{running ? (
<Loader2 className="size-4 animate-spin" />
) : (
<Play className="size-4" />
)}
Run
</Button>
</span>
</TooltipTrigger>
<TooltipContent>
{enabled ? "Run every node once" : "Start the flow to run it"}
</TooltipContent>
</Tooltip>
</motion.div>
)
}
frontend/src/components/Flow/FlowEditor.tsx
+31 -1
View File
@@ -49,7 +49,7 @@ import { FlowTabs } from "./FlowTabs"
import { LiveEdge } from "./LiveEdge"
import { NodePanel } from "./NodePanel"
import "./flow.css"
import { liveStore } from "./liveStore"
import { liveStore, useFlowPaused } from "./liveStore"
import {
flowKeys,
flowQueryOptions,
@@ -230,6 +230,7 @@ function FlowEditorInner({
const [editorExpanded, setEditorExpanded] = useState(false)
const issues = detail.issues ?? []
const paused = useFlowPaused(flowName)
// Keep the latest document in a ref so autosave never captures a stale copy.
const latest = useRef<FlowDef_Input>(detail.definition)
@@ -389,6 +390,27 @@ function FlowEditorInner({
showErrorToast("The flow could not run. Check the node errors."),
})
const enableMutation = useMutation({
mutationFn: (next: boolean) =>
next
? FlowsService.startFlow({ name: flowName })
: FlowsService.stopFlow({ name: flowName }),
onSuccess: (detail) => {
queryClient.setQueryData(flowKeys.detail(flowName), detail)
queryClient.invalidateQueries({ queryKey: flowKeys.all, exact: true })
},
onError: () => showErrorToast("The flow could not be started or stopped."),
})
const pauseMutation = useMutation({
mutationFn: (next: boolean) =>
next
? FlowsService.pauseFlow({ name: flowName })
: FlowsService.resumeFlow({ name: flowName }),
// The engine answers with a flow_paused event, which is what the dock reads.
onError: () => showErrorToast("The flow could not be paused."),
})
const renameMutation = useMutation({
mutationFn: (newName: string) =>
FlowsService.renameFlow({
@@ -659,6 +681,7 @@ function FlowEditorInner({
message: (edge.data as { message: string }).message,
from: label(edge.source),
to: label(edge.target),
sourceId: edge.source,
x: event.clientX,
y: event.clientY,
})
@@ -710,14 +733,18 @@ function FlowEditorInner({
{panelOpen ? null : (
<FlowDock
key="flow-dock"
flow={flowName}
issues={issues}
running={runMutation.isPending}
enabled={detail.enabled ?? true}
paused={paused}
onAddNode={() => setPaletteOpen(true)}
onRun={async () => {
// Running executes what is stored, so the queued edit goes first.
await flush()
runMutation.mutate()
}}
onTogglePause={() => pauseMutation.mutate(!paused)}
onFocusNode={focusNode}
/>
)}
@@ -752,6 +779,9 @@ function FlowEditorInner({
renameMutation.mutate(newName)
}}
onDelete={() => deleteMutation.mutate()}
enabled={detail.enabled ?? true}
toggling={enableMutation.isPending}
onToggleEnabled={(next) => enableMutation.mutate(next)}
hasDraft={detail.has_draft ?? false}
discarding={discard.isPending}
onDiscardDraft={() => {
frontend/src/components/Flow/FlowPanel.tsx
+25
View File
@@ -11,6 +11,7 @@ import {
DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { PANEL_SECTION, SidePanel } from "./SidePanel"
const NAME_PATTERN = /^[a-z][a-z0-9_]*$/
@@ -32,6 +33,9 @@ export function FlowPanel({
hasDraft,
discarding,
onDiscardDraft,
enabled,
toggling,
onToggleEnabled,
onClose,
}: {
open: boolean
@@ -44,6 +48,9 @@ export function FlowPanel({
hasDraft: boolean
discarding: boolean
onDiscardDraft: () => void
enabled: boolean
toggling: boolean
onToggleEnabled: (next: boolean) => void
onClose: () => void
}) {
const [name, setName] = useState(definition.name)
@@ -85,6 +92,24 @@ export function FlowPanel({
}
>
<div className="grid gap-5 p-4">
<div className="grid gap-2">
<span className={PANEL_SECTION}>Running</span>
<div className="flex items-center justify-between gap-3">
<p className="text-sm text-muted-foreground">
{enabled
? "The engine runs this flow: subscriptions, schedules and webhooks are live."
: "Stopped. Nothing of this flow is subscribed, scheduled or reachable."}
</p>
<Switch
checked={enabled}
disabled={toggling}
onCheckedChange={onToggleEnabled}
aria-label="Run this flow"
data-testid="flow-enabled"
/>
</div>
</div>
<div className="grid gap-2">
<span className={PANEL_SECTION}>Name</span>
<div className="flex items-center gap-1.5">
frontend/src/components/Flow/LogsPanel.tsx
+120
View File
@@ -0,0 +1,120 @@
import { Terminal } from "lucide-react"
import { useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
import { cn } from "@/lib/utils"
import { liveStore, useLiveLogs } from "./liveStore"
function shortTime(ts: number): string {
return new Date(ts * 1000).toLocaleTimeString(undefined, {
hour12: false,
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
})
}
/** Drop the flow prefix: every line in here belongs to the open flow. */
function nodeLabel(nodeId: string, flow: string): string {
return nodeId.startsWith(`${flow}.`) ? nodeId.slice(flow.length + 1) : nodeId
}
/**
* What the nodes of this flow printed, and the tracebacks of the ones that
* failed — the detail the one-line error bubble on a node has no room for.
*/
export function LogsPanel({ flow }: { flow: string }) {
const lines = useLiveLogs().filter((line) => line.flow === flow)
const bottom = useRef<HTMLLIElement | null>(null)
// Follow the tail, which is where a running flow puts what just happened.
// biome-ignore lint/correctness/useExhaustiveDependencies: a new line is what scrolls.
useEffect(() => {
bottom.current?.scrollIntoView({ block: "end" })
}, [lines.length])
return (
<Popover>
<Tooltip>
<TooltipTrigger asChild>
<PopoverTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
aria-label="Logs"
data-testid="flow-logs"
>
<Terminal />
</Button>
</PopoverTrigger>
</TooltipTrigger>
<TooltipContent>What this flow printed</TooltipContent>
</Tooltip>
<PopoverContent align="center" className="w-[28rem] p-0">
<div className="flex items-center justify-between border-b border-border px-3 py-2">
<p className="text-xs font-medium uppercase tracking-[0.5px] text-muted-foreground">
Logs
</p>
<Button
variant="ghost"
size="sm"
className="h-6 px-2 text-xs text-muted-foreground"
onClick={() => liveStore.clearLogs()}
disabled={lines.length === 0}
>
Clear
</Button>
</div>
{lines.length === 0 ? (
<p className="px-3 py-6 text-center text-sm text-muted-foreground">
Nothing yet. Anything a node prints shows up here.
</p>
) : (
<ScrollArea className="h-72">
<ul className="grid gap-1.5 p-3 font-mono text-xs">
{lines.map((line, index) => (
<li
// Lines are append-only and repeat freely, so position is the
// only stable identity they have.
key={`${line.ts}-${line.node}-${index}`}
className="grid grid-cols-[auto_1fr] gap-2"
>
<span className="text-muted-foreground">
{shortTime(line.ts)}{" "}
<span className="text-foreground/70">
{nodeLabel(line.node, flow)}
</span>
</span>
<span
className={cn(
"whitespace-pre-wrap break-words",
line.level === "error" && "text-destructive",
)}
>
{line.text.replace(/\n+$/, "")}
{line.truncated ? "\n… truncated" : ""}
</span>
</li>
))}
<li ref={bottom} aria-hidden />
</ul>
</ScrollArea>
)}
</PopoverContent>
</Popover>
)
}
frontend/src/components/Flow/liveStore.ts
+60
View File
@@ -13,14 +13,28 @@ export type LiveStatus = {
status: "active" | "error" | "running" | "success"
error?: string | null
}
/** One node execution's output, as the log panel shows it. */
export type LogLine = {
flow: string
node: string
text: string
level: "info" | "error"
truncated?: boolean
ts: number
}
type Listener = () => void
/** Enough to see what a flow has been doing, not a log store. */
const LOG_LIMIT = 500
const values = new Map<string, LiveValue>()
const statuses = new Map<string, LiveStatus>()
// How many times a node has emitted. The number itself means nothing; a change
// is what restarts the pulse.
const emits = new Map<string, number>()
let logLines: LogLine[] = []
const paused = new Set<string>()
const listeners = new Map<string, Set<Listener>>()
let connected = false
@@ -79,6 +93,33 @@ export const liveStore = {
emits.set(nodeId, (emits.get(nodeId) ?? 0) + 1)
notify(`emit:${nodeId}`)
},
appendLog(line: LogLine) {
// A new array each time, so the hook's snapshot comparison sees the change.
logLines = [...logLines, line].slice(-LOG_LIMIT)
notify("logs")
},
setLogs(lines: LogLine[]) {
logLines = lines.slice(-LOG_LIMIT)
notify("logs")
},
clearLogs() {
logLines = []
notify("logs")
},
setPaused(flow: string, isPaused: boolean) {
if (isPaused) paused.add(flow)
else paused.delete(flow)
notify(`paused:${flow}`)
},
setPausedFlows(flows: string[]) {
const next = new Set(flows)
for (const flow of new Set([...paused, ...next])) {
if (paused.has(flow) === next.has(flow)) continue
if (next.has(flow)) paused.add(flow)
else paused.delete(flow)
notify(`paused:${flow}`)
}
},
setConnected(next: boolean) {
if (connected === next) return
connected = next
@@ -94,6 +135,10 @@ export const liveStore = {
statuses.clear()
for (const key of emits.keys()) notify(`emit:${key}`)
emits.clear()
logLines = []
notify("logs")
for (const flow of paused) notify(`paused:${flow}`)
paused.clear()
},
}
@@ -119,6 +164,21 @@ export function useNodeEmits(nodeId: string): number {
)
}
/** Every captured line, newest last. Filtered by the panel that shows it. */
export function useLiveLogs(): LogLine[] {
return useSyncExternalStore(
(listener) => subscribeKey("logs", listener),
() => logLines,
)
}
export function useFlowPaused(flow: string): boolean {
return useSyncExternalStore(
(listener) => subscribeKey(`paused:${flow}`, listener),
() => paused.has(flow),
)
}
export function useLiveConnection(): boolean {
return useSyncExternalStore(
(listener) => {
frontend/src/components/Flow/useFlowSocket.ts
+17 -3
View File
@@ -2,7 +2,7 @@ import { useQueryClient } from "@tanstack/react-query"
import { useEffect, useRef } from "react"
import { OpenAPI } from "@/client"
import { liveStore } from "./liveStore"
import { type LogLine, liveStore } from "./liveStore"
import { flowKeys } from "./queries"
const RECONNECT_MIN = 1000
@@ -13,14 +13,19 @@ type FlowEvent =
type: "snapshot"
values: Record<string, { value: unknown; ts: number | null }>
nodes: { id: string; status: string; error?: string | null }[]
paused?: string[]
logs?: LogLine[]
}
| { type: "message_value"; name: string; value: unknown; ts: number }
| { type: "node_executed"; node: string; outputs: number }
| { type: "node_error"; node: string; error: string }
| { type: "node_status"; node: string; status: string; error?: string | null }
| ({ type: "node_log" } & LogLine)
| { type: "flow_paused"; flow: string; paused: boolean }
| {
type: "pipeline_rebuilt"
nodes: { id: string; status: string; error?: string | null }[]
paused?: string[]
}
function socketUrl(): string {
@@ -65,6 +70,8 @@ export function useFlowSocket(onAuthFailure?: () => void): void {
case "snapshot":
liveStore.setValues(message.values)
liveStore.setStatuses(message.nodes)
liveStore.setPausedFlows(message.paused ?? [])
liveStore.setLogs(message.logs ?? [])
break
case "message_value":
liveStore.setValue(message.name, {
@@ -88,10 +95,17 @@ export function useFlowSocket(onAuthFailure?: () => void): void {
error: message.error,
})
break
case "node_log":
liveStore.appendLog(message)
break
case "flow_paused":
liveStore.setPaused(message.flow, message.paused)
break
case "pipeline_rebuilt":
liveStore.setStatuses(message.nodes)
// Someone published, here or in another tab: the draft markers on
// the flow chips are stale until the list is fetched again.
liveStore.setPausedFlows(message.paused ?? [])
// Someone published or started a flow, here or in another tab: the
// markers on the flow chips are stale until the list is refetched.
queryClient.invalidateQueries({ queryKey: flowKeys.all })
break
}