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:
Melvin Strobl
co-authored by
Claude Fable 5
Claude Fable 5
parent
06a4506767
commit
8c82549cf6
@@ -57,6 +57,227 @@ export const Body_login_login_access_tokenSchema = {
|
||||
title: 'Body_login-login_access_token'
|
||||
} as const;
|
||||
|
||||
export const DTypeSchema = {
|
||||
type: 'string',
|
||||
enum: ['float', 'int', 'str', 'bool', 'json'],
|
||||
title: 'DType',
|
||||
description: `Serializable payload types.
|
||||
|
||||
Binary payloads (tensors, images) will arrive later as explicitly declared
|
||||
codec fields; until then everything on the wire is JSON.`
|
||||
} as const;
|
||||
|
||||
export const FlowDef_InputSchema = {
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
title: 'Name'
|
||||
},
|
||||
title: {
|
||||
type: 'string',
|
||||
title: 'Title',
|
||||
default: ''
|
||||
},
|
||||
nodes: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/NodeDef-Input'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Nodes'
|
||||
},
|
||||
inputs: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/FlowInput-Input'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Inputs'
|
||||
},
|
||||
version: {
|
||||
type: 'integer',
|
||||
title: 'Version',
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['name'],
|
||||
title: 'FlowDef',
|
||||
description: 'One atomic flow.'
|
||||
} as const;
|
||||
|
||||
export const FlowDef_OutputSchema = {
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
title: 'Name'
|
||||
},
|
||||
title: {
|
||||
type: 'string',
|
||||
title: 'Title',
|
||||
default: ''
|
||||
},
|
||||
nodes: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/NodeDef-Output'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Nodes'
|
||||
},
|
||||
inputs: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/FlowInput-Output'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Inputs'
|
||||
},
|
||||
version: {
|
||||
type: 'integer',
|
||||
title: 'Version',
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['name'],
|
||||
title: 'FlowDef',
|
||||
description: 'One atomic flow.'
|
||||
} as const;
|
||||
|
||||
export const FlowDetailSchema = {
|
||||
properties: {
|
||||
definition: {
|
||||
'$ref': '#/components/schemas/FlowDef-Output'
|
||||
},
|
||||
nodes: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/NodeStatusPublic'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Nodes',
|
||||
default: []
|
||||
},
|
||||
issues: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/ValidationIssue'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Issues',
|
||||
default: []
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['definition'],
|
||||
title: 'FlowDetail',
|
||||
description: 'A flow plus how it is currently doing.'
|
||||
} as const;
|
||||
|
||||
export const FlowInput_InputSchema = {
|
||||
properties: {
|
||||
spec: {
|
||||
'$ref': '#/components/schemas/MessageSpec'
|
||||
},
|
||||
initial: {
|
||||
anyOf: [
|
||||
{},
|
||||
{
|
||||
type: 'null'
|
||||
}
|
||||
],
|
||||
title: 'Initial'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['spec'],
|
||||
title: 'FlowInput',
|
||||
description: 'A message the flow starts with rather than computes.'
|
||||
} as const;
|
||||
|
||||
export const FlowInput_OutputSchema = {
|
||||
properties: {
|
||||
spec: {
|
||||
'$ref': '#/components/schemas/MessageSpec'
|
||||
},
|
||||
initial: {
|
||||
anyOf: [
|
||||
{},
|
||||
{
|
||||
type: 'null'
|
||||
}
|
||||
],
|
||||
title: 'Initial'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['spec'],
|
||||
title: 'FlowInput',
|
||||
description: 'A message the flow starts with rather than computes.'
|
||||
} as const;
|
||||
|
||||
export const FlowStatePublicSchema = {
|
||||
properties: {
|
||||
values: {
|
||||
additionalProperties: {
|
||||
'$ref': '#/components/schemas/MessageValue'
|
||||
},
|
||||
type: 'object',
|
||||
title: 'Values'
|
||||
},
|
||||
nodes: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/NodeStatusPublic'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Nodes'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
title: 'FlowStatePublic'
|
||||
} as const;
|
||||
|
||||
export const FlowSummarySchema = {
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
title: 'Name'
|
||||
},
|
||||
title: {
|
||||
type: 'string',
|
||||
title: 'Title',
|
||||
default: ''
|
||||
},
|
||||
node_count: {
|
||||
type: 'integer',
|
||||
title: 'Node Count',
|
||||
default: 0
|
||||
},
|
||||
error_count: {
|
||||
type: 'integer',
|
||||
title: 'Error Count',
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['name'],
|
||||
title: 'FlowSummary'
|
||||
} as const;
|
||||
|
||||
export const FlowsPublicSchema = {
|
||||
properties: {
|
||||
data: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/FlowSummary'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Data'
|
||||
},
|
||||
count: {
|
||||
type: 'integer',
|
||||
title: 'Count'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['data', 'count'],
|
||||
title: 'FlowsPublic'
|
||||
} as const;
|
||||
|
||||
export const HTTPValidationErrorSchema = {
|
||||
properties: {
|
||||
detail: {
|
||||
@@ -208,6 +429,56 @@ export const MessageSchema = {
|
||||
title: 'Message'
|
||||
} as const;
|
||||
|
||||
export const MessageSpecSchema = {
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
title: 'Name',
|
||||
default: ''
|
||||
},
|
||||
port: {
|
||||
type: 'string',
|
||||
title: 'Port',
|
||||
default: ''
|
||||
},
|
||||
dtype: {
|
||||
'$ref': '#/components/schemas/DType',
|
||||
default: 'float'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
title: 'MessageSpec',
|
||||
description: `A single port of a node, and the message it is bound to.
|
||||
|
||||
:param name: The message this port binds to. Bare names are qualified with
|
||||
the flow name at load time; empty means the port is unbound.
|
||||
:param port: The identifier the node function sees. Defaults to the last
|
||||
segment of \`\`name\`\`, so unqualified flows read naturally.
|
||||
:param dtype: Payload type, validated on every message that passes through.`
|
||||
} as const;
|
||||
|
||||
export const MessageValueSchema = {
|
||||
properties: {
|
||||
value: {
|
||||
title: 'Value'
|
||||
},
|
||||
ts: {
|
||||
anyOf: [
|
||||
{
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
type: 'null'
|
||||
}
|
||||
],
|
||||
title: 'Ts'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
title: 'MessageValue',
|
||||
description: 'The last payload seen on a message.'
|
||||
} as const;
|
||||
|
||||
export const NewPasswordSchema = {
|
||||
properties: {
|
||||
token: {
|
||||
@@ -226,6 +497,195 @@ export const NewPasswordSchema = {
|
||||
title: 'NewPassword'
|
||||
} as const;
|
||||
|
||||
export const NodeDef_InputSchema = {
|
||||
properties: {
|
||||
id: {
|
||||
type: 'string',
|
||||
title: 'Id'
|
||||
},
|
||||
type: {
|
||||
type: 'string',
|
||||
title: 'Type',
|
||||
default: 'python'
|
||||
},
|
||||
title: {
|
||||
type: 'string',
|
||||
title: 'Title',
|
||||
default: ''
|
||||
},
|
||||
position: {
|
||||
'$ref': '#/components/schemas/Position',
|
||||
default: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
params: {
|
||||
additionalProperties: true,
|
||||
type: 'object',
|
||||
title: 'Params'
|
||||
},
|
||||
requires: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/MessageSpec'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Requires'
|
||||
},
|
||||
provides: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/MessageSpec'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Provides'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['id'],
|
||||
title: 'NodeDef',
|
||||
description: 'A node as stored: identity, placement, configuration and ports.'
|
||||
} as const;
|
||||
|
||||
export const NodeDef_OutputSchema = {
|
||||
properties: {
|
||||
id: {
|
||||
type: 'string',
|
||||
title: 'Id'
|
||||
},
|
||||
type: {
|
||||
type: 'string',
|
||||
title: 'Type',
|
||||
default: 'python'
|
||||
},
|
||||
title: {
|
||||
type: 'string',
|
||||
title: 'Title',
|
||||
default: ''
|
||||
},
|
||||
position: {
|
||||
'$ref': '#/components/schemas/Position',
|
||||
default: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
params: {
|
||||
additionalProperties: true,
|
||||
type: 'object',
|
||||
title: 'Params'
|
||||
},
|
||||
requires: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/MessageSpec'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Requires'
|
||||
},
|
||||
provides: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/MessageSpec'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Provides'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['id'],
|
||||
title: 'NodeDef',
|
||||
description: 'A node as stored: identity, placement, configuration and ports.'
|
||||
} as const;
|
||||
|
||||
export const NodeSourceSchema = {
|
||||
properties: {
|
||||
code: {
|
||||
type: 'string',
|
||||
title: 'Code'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['code'],
|
||||
title: 'NodeSource',
|
||||
description: 'The Python source of a node.'
|
||||
} as const;
|
||||
|
||||
export const NodeStatusPublicSchema = {
|
||||
properties: {
|
||||
id: {
|
||||
type: 'string',
|
||||
title: 'Id'
|
||||
},
|
||||
status: {
|
||||
type: 'string',
|
||||
title: 'Status',
|
||||
default: 'active'
|
||||
},
|
||||
error: {
|
||||
anyOf: [
|
||||
{
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
type: 'null'
|
||||
}
|
||||
],
|
||||
title: 'Error'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['id'],
|
||||
title: 'NodeStatusPublic',
|
||||
description: 'Whether a node loaded, and why not.'
|
||||
} as const;
|
||||
|
||||
export const NodeTypeInfoSchema = {
|
||||
properties: {
|
||||
type: {
|
||||
type: 'string',
|
||||
title: 'Type'
|
||||
},
|
||||
title: {
|
||||
type: 'string',
|
||||
title: 'Title'
|
||||
},
|
||||
description: {
|
||||
type: 'string',
|
||||
title: 'Description'
|
||||
},
|
||||
params_schema: {
|
||||
additionalProperties: true,
|
||||
type: 'object',
|
||||
title: 'Params Schema'
|
||||
},
|
||||
has_source: {
|
||||
type: 'boolean',
|
||||
title: 'Has Source',
|
||||
default: false
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['type', 'title', 'description'],
|
||||
title: 'NodeTypeInfo',
|
||||
description: 'A node type the editor can offer, with its parameter schema.'
|
||||
} as const;
|
||||
|
||||
export const PositionSchema = {
|
||||
properties: {
|
||||
x: {
|
||||
type: 'number',
|
||||
title: 'X',
|
||||
default: 0
|
||||
},
|
||||
y: {
|
||||
type: 'number',
|
||||
title: 'Y',
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
title: 'Position',
|
||||
description: 'Where a node sits on the canvas.'
|
||||
} as const;
|
||||
|
||||
export const PrivateUserCreateSchema = {
|
||||
properties: {
|
||||
email: {
|
||||
@@ -251,6 +711,50 @@ export const PrivateUserCreateSchema = {
|
||||
title: 'PrivateUserCreate'
|
||||
} as const;
|
||||
|
||||
export const RunRequestSchema = {
|
||||
properties: {
|
||||
inputs: {
|
||||
additionalProperties: true,
|
||||
type: 'object',
|
||||
title: 'Inputs',
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
title: 'RunRequest'
|
||||
} as const;
|
||||
|
||||
export const SecretNamesSchema = {
|
||||
properties: {
|
||||
data: {
|
||||
items: {
|
||||
type: 'string'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Data'
|
||||
},
|
||||
count: {
|
||||
type: 'integer',
|
||||
title: 'Count'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['data', 'count'],
|
||||
title: 'SecretNames'
|
||||
} as const;
|
||||
|
||||
export const SecretValueSchema = {
|
||||
properties: {
|
||||
value: {
|
||||
type: 'string',
|
||||
title: 'Value'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['value'],
|
||||
title: 'SecretValue'
|
||||
} as const;
|
||||
|
||||
export const TokenSchema = {
|
||||
properties: {
|
||||
access_token: {
|
||||
@@ -268,6 +772,19 @@ export const TokenSchema = {
|
||||
title: 'Token'
|
||||
} as const;
|
||||
|
||||
export const TriggerRequestSchema = {
|
||||
properties: {
|
||||
values: {
|
||||
additionalProperties: true,
|
||||
type: 'object',
|
||||
title: 'Values',
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
title: 'TriggerRequest'
|
||||
} as const;
|
||||
|
||||
export const UpdatePasswordSchema = {
|
||||
properties: {
|
||||
current_password: {
|
||||
@@ -549,4 +1066,83 @@ export const ValidationErrorSchema = {
|
||||
type: 'object',
|
||||
required: ['loc', 'msg', 'type'],
|
||||
title: 'ValidationError'
|
||||
} as const;
|
||||
|
||||
export const ValidationIssueSchema = {
|
||||
properties: {
|
||||
code: {
|
||||
type: 'string',
|
||||
enum: ['cycle', 'unconnected_input', 'missing_initial_value', 'node_error'],
|
||||
title: 'Code'
|
||||
},
|
||||
message: {
|
||||
type: 'string',
|
||||
title: 'Message'
|
||||
},
|
||||
flow: {
|
||||
type: 'string',
|
||||
title: 'Flow',
|
||||
default: ''
|
||||
},
|
||||
nodes: {
|
||||
items: {
|
||||
type: 'string'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Nodes',
|
||||
default: []
|
||||
},
|
||||
node: {
|
||||
anyOf: [
|
||||
{
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
type: 'null'
|
||||
}
|
||||
],
|
||||
title: 'Node'
|
||||
},
|
||||
port: {
|
||||
anyOf: [
|
||||
{
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
type: 'null'
|
||||
}
|
||||
],
|
||||
title: 'Port'
|
||||
},
|
||||
message_name: {
|
||||
anyOf: [
|
||||
{
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
type: 'null'
|
||||
}
|
||||
],
|
||||
title: 'Message Name'
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
required: ['code', 'message'],
|
||||
title: 'ValidationIssue',
|
||||
description: 'A problem that keeps a flow from running correctly.'
|
||||
} as const;
|
||||
|
||||
export const ValidationResultSchema = {
|
||||
properties: {
|
||||
issues: {
|
||||
items: {
|
||||
'$ref': '#/components/schemas/ValidationIssue'
|
||||
},
|
||||
type: 'array',
|
||||
title: 'Issues',
|
||||
default: []
|
||||
}
|
||||
},
|
||||
type: 'object',
|
||||
title: 'ValidationResult'
|
||||
} as const;
|
||||
Reference in New Issue
Block a user