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

Send a node's emit pulse round the rim instead of scaling it out

Browse Source 
The ring hung off the node itself, and `inset` on an absolute child
resolves against the padding box — so on the brain's thick status ring it
landed inside the outer edge and painted over the status the ring carries.
Both node shapes now hang it off a border-less wrapper, where the same
offsets clear the rim whatever border the node draws (measured: 4px on all
four sides, on a 1px card border and a 7px neuron ring alike).

The shape is a conic-gradient arc masked to the padding band, running one
lap in `--duration-pulse` and going out on the way past.

Note: BrainNode.tsx also carries an unrelated in-flight change from a
concurrent session (the `seen` ref gating the pulse on a real emit); the
two could not be separated in one file.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
stroblme
2026-08-20 11:51:21 +02:00
co-authored by Claude Opus 5
parent ace980b685
commit 558e1cdf18
4 changed files with 223 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Flow/BrainNode.tsx
+84 -66
View File
@@ -1,9 +1,9 @@
import { Handle, type NodeProps, Position } from "@xyflow/react"
import { memo, useEffect, useState } from "react"
import { memo, useEffect, useRef, useState } from "react"
import { duration } from "@/lib/motion"
import { cn } from "@/lib/utils"
import { useGroupEmits, useGroupError } from "./liveStore"
import { useGroupActive, useGroupEmits, useGroupError } from "./liveStore"
export type BrainNodeData = {
label: string
@@ -44,6 +44,9 @@ function BrainNodeComponent({ data }: NodeProps) {
const { label, kind, members, flows, size, issue, revealed } =
data as BrainNodeData
const emits = useGroupEmits(members)
// Whether it has published at all, which the snapshot answers for what
// happened before this page connected; `emits` only counts what we saw.
const active = useGroupActive(members)
const failed = useGroupError(members)
// Two faults, told apart the way the mark's two parts are: the ring is the
// wiring around the node, so a flow that cannot run as written colours the
@@ -52,82 +55,97 @@ function BrainNodeComponent({ data }: NodeProps) {
// Brightest right after a publish, then left to decay. Only the peak needs
// holding: the floor is the resting style, so letting go is the whole decay.
const [firing, setFiring] = useState(false)
// The count outlives this component: the store is module-level, and a
// snapshot restores what the engine counted before the page even loaded. So
// the number we mount with is history, and only a change on top of it is
// something that just happened.
const seen = useRef(emits)
useEffect(() => {
if (!emits) return
if (emits === seen.current) return
seen.current = emits
setFiring(true)
const timer = setTimeout(() => setFiring(false), duration.pulse * 1000)
return () => clearTimeout(timer)
}, [emits])
return (
<span
className={cn(
"brain-cell relative flex items-center justify-center rounded-full",
// Nothing seen yet this session is not the same as seen and gone quiet.
emits === 0 && "brain-idle",
firing && "brain-hot",
failed && "brain-fault",
issue ? "border-brand-secondary" : "border-foreground",
)}
// Border-box, so the outer rim stays at `size` and the edges keep landing
// on it however thick the ring gets. The gap between ring and disc is an
// inset shadow rather than padding: it paints over the fill without
// taking part in the layout, so the count stays centred in the disc.
style={{
width: size,
height: size,
borderWidth: Math.round(size * RING),
boxShadow: `inset 0 0 0 ${Math.round(size * GAP)}px var(--brain-gap)`,
}}
title={`${label} · ${kind} · ${members.join(", ")}${issue ? ` · ${issue}` : ""}`}
>
{/* Remounting on each emit is what restarts the animation. */}
{emits > 0 ? <span key={emits} className="node-pulse" /> : null}
{/* Both ends sit at the centre; the edge trims itself back to the rim. */}
<Handle
type="target"
position={Position.Left}
className="brain-handle"
isConnectable={false}
/>
<Handle
type="source"
position={Position.Right}
className="brain-handle"
isConnectable={false}
/>
<span className="px-1 text-center text-xs font-medium text-foreground">
{flows.length > 1 ? flows.length : null}
</span>
{/*
* A name under every circle is what makes the graph unreadable, so only
* the neuron under the pointer or the keyboard says what it is — except
* one with something wrong, since colour is never the only carrier of a
* status, and here it carries two of them. Two words rather than the
* reason itself: a cycle names every node in it, which is a sentence no
* label under a 32px circle can hold, so the phrase matches what Home
* says and the full text stays in the tooltip.
*
* The word is `--foreground` rather than the terracotta beside it:
* `--brand-secondary` measures 2.2:1 on `--card` in light, which is a
* fill colour, not a text colour.
*/}
// The pulse ring measures itself from here rather than from the neuron, so
// the thick status ring stays clear of it — see `.node-pulse` in flow.css.
<span className="relative flex rounded-full">
{/* Remounting on each emit is what restarts the animation, so this is
gated on the pulse rather than on the count: a neuron mounting with a
count already in the store would otherwise play it once for free. */}
{firing ? <span key={emits} className="node-pulse" /> : null}
<span
className={cn("brain-label", (problem || revealed) && "brain-label-on")}
className={cn(
"brain-cell relative flex items-center justify-center rounded-full",
// Nothing seen yet this session is not the same as seen and gone quiet.
!active && "brain-idle",
firing && "brain-hot",
failed && "brain-fault",
issue ? "border-brand-secondary" : "border-foreground",
)}
// Border-box, so the outer rim stays at `size` and the edges keep landing
// on it however thick the ring gets. The gap between ring and disc is an
// inset shadow rather than padding: it paints over the fill without
// taking part in the layout, so the count stays centred in the disc.
style={{
width: size,
height: size,
borderWidth: Math.round(size * RING),
boxShadow: `inset 0 0 0 ${Math.round(size * GAP)}px var(--brain-gap)`,
}}
title={`${label} · ${kind} · ${members.join(", ")}${issue ? ` · ${issue}` : ""}`}
>
<span className="max-w-[140px] truncate text-xs font-medium">
{label}
{/* Both ends sit at the centre; the edge trims itself back to the rim. */}
<Handle
type="target"
position={Position.Left}
className="brain-handle"
isConnectable={false}
/>
<Handle
type="source"
position={Position.Right}
className="brain-handle"
isConnectable={false}
/>
<span className="px-1 text-center text-xs font-medium text-foreground">
{flows.length > 1 ? flows.length : null}
</span>
{/* The label box is only as wide as the circle it hangs under, so two
words break onto two lines unless told not to. */}
{problem ? (
<span className="whitespace-nowrap text-xs font-medium text-foreground">
{[failed && "failed", issue && "cannot run"]
.filter(Boolean)
.join(" · ")}
{/*
* A name under every circle is what makes the graph unreadable, so only
* the neuron under the pointer or the keyboard says what it is — except
* one with something wrong, since colour is never the only carrier of a
* status, and here it carries two of them. Two words rather than the
* reason itself: a cycle names every node in it, which is a sentence no
* label under a 32px circle can hold, so the phrase matches what Home
* says and the full text stays in the tooltip.
*
* The word is `--foreground` rather than the terracotta beside it:
* `--brand-secondary` measures 2.2:1 on `--card` in light, which is a
* fill colour, not a text colour.
*/}
<span
className={cn(
"brain-label",
(problem || revealed) && "brain-label-on",
)}
>
<span className="max-w-[140px] truncate text-xs font-medium">
{label}
</span>
) : null}
{/* The label box is only as wide as the circle it hangs under, so two
words break onto two lines unless told not to. */}
{problem ? (
<span className="whitespace-nowrap text-xs font-medium text-foreground">
{[failed && "failed", issue && "cannot run"]
.filter(Boolean)
.join(" · ")}
</span>
) : null}
</span>
</span>
</span>
)
frontend/src/components/Flow/FlowNode.tsx
+92 -89
View File
@@ -138,103 +138,106 @@ function FlowNodeComponent({ data, selected }: NodeProps) {
const style = STATUS_STYLES[status as keyof typeof STATUS_STYLES]
return (
<div
className={cn(
"relative min-w-[168px] max-w-[220px] rounded-lg border border-border bg-card px-3 py-2.5 shadow-e1 transition-shadow",
selected && "border-primary shadow-e2",
)}
>
// The pulse ring measures itself from here rather than from the card, so
// a border can never land on top of it — see `.node-pulse` in flow.css.
<div className="relative rounded-lg">
{/* Remounting on each emit is what restarts the animation. */}
{emits > 0 ? <span key={emits} className="node-pulse" /> : null}
<div
className={cn(
"relative min-w-[168px] max-w-[220px] rounded-lg border border-border bg-card px-3 py-2.5 shadow-e1 transition-shadow",
selected && "border-primary shadow-e2",
)}
>
<PortHandles
specs={definition.requires ?? []}
type="target"
position={vertical ? Position.Top : Position.Left}
/>
<PortHandles
specs={definition.requires ?? []}
type="target"
position={vertical ? Position.Top : Position.Left}
/>
<div className="flex items-center gap-2.5">
<span className="flex size-7 shrink-0 items-center justify-center rounded-sm bg-primary/10 text-primary">
<Icon className="size-4" />
</span>
<span className="min-w-0 flex-1">
<span className="block truncate text-sm font-medium">
{definition.title || definition.id}
<div className="flex items-center gap-2.5">
<span className="flex size-7 shrink-0 items-center justify-center rounded-sm bg-primary/10 text-primary">
<Icon className="size-4" />
</span>
<span className="block truncate text-xs font-medium uppercase tracking-[0.5px] text-muted-foreground">
{typeLabel}
<span className="min-w-0 flex-1">
<span className="block truncate text-sm font-medium">
{definition.title || definition.id}
</span>
<span className="block truncate text-xs font-medium uppercase tracking-[0.5px] text-muted-foreground">
{typeLabel}
</span>
</span>
</span>
{status === "running" ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon-sm"
className="nodrag nopan -my-1 size-6 shrink-0 text-muted-foreground hover:text-destructive"
aria-label="Stop this node"
data-testid="node-cancel"
onClick={(event) => {
event.stopPropagation()
// Best effort by nature: it may well have finished between
// the render and the click, which is the outcome asked for.
FlowsService.cancelNode({
name: flow,
nodeId: definition.id,
}).catch(() => {})
}}
>
<Square />
</Button>
</TooltipTrigger>
<TooltipContent>Stop this node</TooltipContent>
</Tooltip>
) : null}
{status === "running" ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon-sm"
className="nodrag nopan -my-1 size-6 shrink-0 text-muted-foreground hover:text-destructive"
aria-label="Stop this node"
data-testid="node-cancel"
onClick={(event) => {
event.stopPropagation()
// Best effort by nature: it may well have finished between
// the render and the click, which is the outcome asked for.
FlowsService.cancelNode({
name: flow,
nodeId: definition.id,
}).catch(() => {})
}}
>
<Square />
</Button>
</TooltipTrigger>
<TooltipContent>Stop this node</TooltipContent>
</Tooltip>
) : null}
{status === "error" && onShowLogs ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon-sm"
// `nodrag` keeps xyflow from reading the press as a drag; the
// click itself is stopped so the node panel stays closed.
className="nodrag nopan -my-1 size-6 shrink-0 text-muted-foreground hover:text-destructive"
aria-label="Show what this node printed"
data-testid="node-traceback"
onClick={(event) => {
event.stopPropagation()
onShowLogs(definition.id)
}}
>
<Bug />
</Button>
</TooltipTrigger>
<TooltipContent>Show the traceback</TooltipContent>
</Tooltip>
) : null}
{status === "error" && onShowLogs ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon-sm"
// `nodrag` keeps xyflow from reading the press as a drag; the
// click itself is stopped so the node panel stays closed.
className="nodrag nopan -my-1 size-6 shrink-0 text-muted-foreground hover:text-destructive"
aria-label="Show what this node printed"
data-testid="node-traceback"
onClick={(event) => {
event.stopPropagation()
onShowLogs(definition.id)
}}
>
<Bug />
</Button>
</TooltipTrigger>
<TooltipContent>Show the traceback</TooltipContent>
</Tooltip>
) : null}
{style ? (
<Tooltip>
<TooltipTrigger asChild>
<span
role="img"
className={cn("size-2 shrink-0 rounded-full", style.dot)}
aria-label={style.label}
/>
</TooltipTrigger>
<TooltipContent className="max-h-60 max-w-xs overflow-y-auto whitespace-pre-line break-words">
{problem || style.label}
</TooltipContent>
</Tooltip>
) : null}
{style ? (
<Tooltip>
<TooltipTrigger asChild>
<span
role="img"
className={cn("size-2 shrink-0 rounded-full", style.dot)}
aria-label={style.label}
/>
</TooltipTrigger>
<TooltipContent className="max-h-60 max-w-xs overflow-y-auto whitespace-pre-line break-words">
{problem || style.label}
</TooltipContent>
</Tooltip>
) : null}
</div>
<PortHandles
specs={definition.provides ?? []}
type="source"
position={vertical ? Position.Bottom : Position.Right}
/>
</div>
<PortHandles
specs={definition.provides ?? []}
type="source"
position={vertical ? Position.Bottom : Position.Right}
/>
</div>
)
}
frontend/src/components/Flow/flow.css
+47 -7
View File
@@ -99,26 +99,66 @@
}
}
/* A node that just published something says so, once, and settles. */
/*
* A node that just published something says so, once, and settles: an arc runs
* one lap of the rim and goes out.
*
* The angle has to be registered to be animatable at all — an unregistered
* custom property is a token stream, and swapping one for another mid-gradient
* would step rather than sweep. Declared outside the guard below because it is
* a type, not motion.
*/
@property --node-pulse-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0turn;
}
@media (prefers-reduced-motion: no-preference) {
/*
* Hangs off the wrapper the node's border is *not* on: `inset` on an absolute
* child resolves against the padding box, so a ring measured from the node
* itself lands inside a thick border — the brain's status ring is one — and
* paints over it. Measured from the wrapper, the same offsets clear the rim
* whatever border the node draws. The wrapper carries the radius too, which
* is what lets one rule fit both a rounded card and a circle.
*
* The band is the padding: the content box is cut back out of the mask, which
* leaves a ring rather than the filled shape the gradient paints.
*/
.node-pulse {
position: absolute;
inset: -3px;
inset: -4px;
border-radius: inherit;
border: 2px solid var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
padding: 2px;
pointer-events: none;
animation: node-pulse var(--duration-pulse) var(--ease-emphasized) forwards;
background: conic-gradient(
from var(--node-pulse-angle),
transparent,
var(--primary) 90deg,
transparent 90deg
);
mask:
linear-gradient(#000 0 0) content-box exclude,
linear-gradient(#000 0 0);
animation: node-pulse var(--duration-pulse) linear forwards;
}
/*
* One lap at a constant rate, because the arc is travelling: an ease would
* read as braking into the finish. The element stays mounted until the next
* emit remounts it, so the lap has to put itself out on the way past.
*/
@keyframes node-pulse {
from {
--node-pulse-angle: 0turn;
}
75% {
opacity: 1;
transform: scale(1);
}
to {
--node-pulse-angle: 1turn;
opacity: 0;
transform: scale(1.09);
}
}
}