Add the flow editor: canvas, node panel and live values
The browser half of M3. Flows open on a full-bleed canvas with their chrome floating over it: flow tabs top, dock bottom, node settings in a panel on the right that leaves the graph visible and running behind it. - Connections are derived, not stored. A node declares the messages it reads and publishes; every matching pair draws an edge, so two producers of one message converge on their consumer. Dragging output to input is shorthand for pointing that input at the producer's message, and asks before it replaces an existing one. - Values land on the edges as they flow, over a websocket that feeds a store outside React, so a value arriving re-renders its own chip and nothing else. Clicking an edge shows the last payload and when it arrived. - Node source is edited in Monaco, loaded only when a panel opens and themed from the design tokens. - Edits autosave; identical documents are skipped server-side, so a quiet canvas writes nothing. - Validation from the API shows on the node it belongs to and is summarised in the dock, where each entry pans to its node. - Works on a phone: touch-connect, 44px dock targets, and the node panel becomes a full-screen sheet. Two new tokens (--status-success, --font-mono) are mirrored in the website repo and recorded in DESIGN-GUIDELINES.md. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016WzrvW7rjQbynnhF6pxh6i
This commit is contained in:
co-authored by
Claude Fable 5
parent
06a4506767
commit
8c82549cf6
@@ -200,7 +200,8 @@ class FlowController:
|
||||
nodes: list[Node] = []
|
||||
loaded: dict[str, LoadedNode] = {}
|
||||
initial_values: dict[str, Any] = {}
|
||||
known_inputs: set[str] = set()
|
||||
# Declared flow inputs, mapped to whether they start with a value.
|
||||
flow_inputs: dict[str, bool] = {}
|
||||
|
||||
for flow in self.store.read_all():
|
||||
for node_def in flow.nodes:
|
||||
@@ -212,7 +213,7 @@ class FlowController:
|
||||
name = qualify(flow.name, flow_input.spec.name)
|
||||
if not name:
|
||||
continue
|
||||
known_inputs.add(name)
|
||||
flow_inputs[name] = flow_input.initial is not None
|
||||
if flow_input.initial is not None:
|
||||
initial_values[name] = flow_input.initial
|
||||
|
||||
@@ -224,7 +225,7 @@ class FlowController:
|
||||
max_workers=self.max_workers,
|
||||
initial_values=initial_values,
|
||||
)
|
||||
self.issues = self.pipeline.validate(known_inputs)
|
||||
self.issues = self.pipeline.validate(flow_inputs)
|
||||
self.issues += [
|
||||
ValidationIssue(
|
||||
code="node_error",
|
||||
|
||||
@@ -167,13 +167,15 @@ class Pipeline:
|
||||
# Validation
|
||||
# -------------------------------------------------------------------------
|
||||
|
||||
def validate(self, known_inputs: set[str] | None = None) -> list[ValidationIssue]:
|
||||
def validate(
|
||||
self, flow_inputs: dict[str, bool] | None = None
|
||||
) -> list[ValidationIssue]:
|
||||
"""Report everything that would keep this graph from running.
|
||||
|
||||
:param known_inputs: Message names supplied from outside the graph
|
||||
(flow inputs with an initial value).
|
||||
:param flow_inputs: Messages declared as inputs of a flow rather than
|
||||
computed by it, mapped to whether they carry an initial value.
|
||||
"""
|
||||
known = known_inputs or set()
|
||||
declared = flow_inputs or {}
|
||||
issues: list[ValidationIssue] = []
|
||||
|
||||
ordered = set(self._topological_sort())
|
||||
@@ -193,21 +195,39 @@ class Pipeline:
|
||||
|
||||
for node in self._nodes:
|
||||
for msg_name, spec in node.requires.items():
|
||||
if msg_name in self.produces or msg_name in known:
|
||||
if msg_name in self.produces:
|
||||
continue
|
||||
issues.append(
|
||||
ValidationIssue(
|
||||
code="unconnected_input",
|
||||
message=(
|
||||
f"'{node.local_id}' waits for '{msg_name}', "
|
||||
"which nothing provides."
|
||||
),
|
||||
flow=node.flow,
|
||||
node=node.id,
|
||||
port=spec.port,
|
||||
message_name=msg_name,
|
||||
|
||||
if msg_name not in declared:
|
||||
issues.append(
|
||||
ValidationIssue(
|
||||
code="unconnected_input",
|
||||
message=(
|
||||
f"'{node.local_id}' waits for '{msg_name}', "
|
||||
"which nothing provides."
|
||||
),
|
||||
flow=node.flow,
|
||||
node=node.id,
|
||||
port=spec.port,
|
||||
message_name=msg_name,
|
||||
)
|
||||
)
|
||||
elif not declared[msg_name]:
|
||||
# Declared as a flow input, but nothing ever sets it, so
|
||||
# the node waits forever.
|
||||
issues.append(
|
||||
ValidationIssue(
|
||||
code="missing_initial_value",
|
||||
message=(
|
||||
f"'{msg_name}' has no starting value, so "
|
||||
f"'{node.local_id}' never runs."
|
||||
),
|
||||
flow=node.flow,
|
||||
node=node.id,
|
||||
port=spec.port,
|
||||
message_name=msg_name,
|
||||
)
|
||||
)
|
||||
)
|
||||
return issues
|
||||
|
||||
# -------------------------------------------------------------------------
|
||||
|
||||
@@ -118,10 +118,18 @@ def test_declared_flow_inputs_are_not_dangling():
|
||||
node = make_node(
|
||||
"n", "f", lambda setpoint, params: None, requires=[spec("setpoint")]
|
||||
)
|
||||
issues = Pipeline(nodes=[node]).validate(known_inputs={"f.setpoint"})
|
||||
issues = Pipeline(nodes=[node]).validate({"f.setpoint": True})
|
||||
assert issues == []
|
||||
|
||||
|
||||
def test_a_flow_input_without_a_starting_value_is_reported():
|
||||
node = make_node(
|
||||
"n", "f", lambda setpoint, params: None, requires=[spec("setpoint")]
|
||||
)
|
||||
issues = Pipeline(nodes=[node]).validate({"f.setpoint": False})
|
||||
assert [issue.code for issue in issues] == ["missing_initial_value"]
|
||||
|
||||
|
||||
def test_a_failing_node_does_not_stop_its_siblings():
|
||||
ran = []
|
||||
|
||||
|
||||
Reference in New Issue
Block a user