Skip to content

Hide internal node IDs and stabilize editor/runtime result references #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

Hide internal node IDs and stabilize editor/runtime result references #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f5e3d9e
feat: upgrade visual workflow editor
Copilot Jun 27, 2026
8be255d
fix: polish editor workflow builder
Copilot Jun 27, 2026
595bfd5
fix: improve editor references and hide node ids
Copilot Jun 27, 2026
6717815
fix: address validation follow-up comments
Copilot Jun 27, 2026
d1d9348
fix: resolve remaining validation comments
Copilot Jun 27, 2026
f9b0c3f
fix: polish validation cleanup
Copilot Jun 27, 2026
fbcf08c
fix: address final review feedback
Copilot Jun 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 139 additions & 11 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,17 +116,24 @@ button, select, input {
/* Mobile: sidebar becomes bottom sheet */
@media (max-width: 768px) {
.jf-layout {
flex-direction: column;
min-height: 0;
}

.jf-layout__sidebar {
width: 100%;
max-height: 40vh;
border-left: none;
position: absolute;
left: 0.75rem;
right: 0.75rem;
bottom: 0.75rem;
width: auto;
max-height: min(68vh, 560px);
max-height: min(68dvh, 560px);
border: 1px solid var(--border);
border-top: 1px solid var(--border);
flex-direction: row;
flex-wrap: wrap;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
flex-direction: column;
overflow-y: auto;
z-index: 20;
}
}

Expand Down Expand Up @@ -229,6 +236,15 @@ button, select, input {
}

@media (max-width: 480px) {
.jf-toolbar {
align-items: flex-start;
}
.jf-toolbar__actions {
width: 100%;
overflow-x: auto;
padding-bottom: 0.15rem;
flex-wrap: nowrap;
}
.jf-toolbar__btn-label {
display: none;
}
Expand Down Expand Up @@ -302,6 +318,12 @@ button, select, input {
overflow: hidden;
}

@media (max-width: 768px) {
.jf-node {
width: min(180px, calc(100vw - 2rem));
}
}

.jf-node:active {
cursor: grabbing;
}
Expand Down Expand Up @@ -413,12 +435,11 @@ button, select, input {

@media (max-width: 768px) {
.jf-palette {
border-bottom: none;
border-right: 1px solid var(--border);
min-width: 50%;
border-right: none;
min-width: 100%;
}
.jf-palette__items {
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

Expand Down Expand Up @@ -470,7 +491,7 @@ button, select, input {

@media (max-width: 768px) {
.jf-panel {
min-width: 50%;
min-width: 100%;
}
}

Expand Down Expand Up @@ -513,6 +534,14 @@ button, select, input {
padding: 0.75rem 1rem;
}

.jf-panel__hint {
padding: 0.75rem;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 0.8rem;
}

.jf-panel__state {
display: inline-flex;
padding: 0.1rem 0.45rem;
Expand All @@ -538,6 +567,10 @@ button, select, input {
margin-top: 0.3rem;
}

.jf-field--fill {
flex: 1;
}

.jf-field__label {
font-size: 0.75rem;
font-weight: 500;
Expand All @@ -556,6 +589,17 @@ button, select, input {
width: 100%;
}

.jf-field__input--compact {
min-width: 0;
max-width: 160px;
}

.jf-field__textarea {
min-height: 86px;
resize: vertical;
white-space: pre-wrap;
}

.jf-field__input:focus {
outline: none;
border-color: var(--accent);
Expand Down Expand Up @@ -597,6 +641,74 @@ button, select, input {
background: rgba(2, 6, 20, 0.4);
}

.jf-fork,
.jf-fork-branch {
padding: 0.75rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: rgba(2, 6, 20, 0.35);
}

.jf-fork-branch {
margin-top: 0.5rem;
}

.jf-stack {
display: flex;
flex-direction: column;
gap: 0.65rem;
}

.jf-card__header,
.jf-section__header,
.jf-inline-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}

.jf-card__header,
.jf-section__header {
justify-content: space-between;
margin-bottom: 0.5rem;
}

.jf-inline-controls {
flex-wrap: wrap;
justify-content: flex-end;
}

.jf-reference-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}

.jf-reference-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.6rem;
border-radius: var(--radius-full);
border: 1px solid rgba(59, 130, 246, 0.28);
background: rgba(59, 130, 246, 0.08);
color: #bfdbfe;
cursor: pointer;
font-size: 0.72rem;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.jf-reference-chip:hover {
border-color: var(--accent);
background: rgba(59, 130, 246, 0.16);
transform: translateY(-1px);
}

.jf-reference-chip--active {
background: rgba(59, 130, 246, 0.22);
color: white;
}

.jf-expr__type {
display: inline-flex;
padding: 0.15rem 0.5rem;
Expand Down Expand Up @@ -628,10 +740,20 @@ button, select, input {
transition: all 0.2s;
}

.jf-btn--ghost {
background: transparent;
}

.jf-btn:hover {
transform: translateY(-1px);
}

.jf-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}

.jf-btn--danger {
border-color: rgba(239, 68, 68, 0.3);
color: var(--danger);
Expand Down Expand Up @@ -706,6 +828,12 @@ button, select, input {
border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
.jf-results {
min-width: 100%;
}
}

.jf-results__count {
display: inline-flex;
align-items: center;
Expand Down
11 changes: 10 additions & 1 deletion ui/canvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ let panOffsetStart: Position = { x: 0, y: 0 };
let dragNodeId: string | null = null;
let dragStart: Position = { x: 0, y: 0 };
let dragNodeStart: Position = { x: 0, y: 0 };
let dragPointerId: number | null = null;

export function initCanvas(container: HTMLDivElement) {
containerEl = container;
Expand Down Expand Up @@ -90,6 +91,10 @@ function bindPanEvents(container: HTMLDivElement) {
}
if (dragNodeId) {
dragNodeId = null;
if (dragPointerId !== null) {
container.releasePointerCapture(dragPointerId);
}
dragPointerId = null;
}
});

Expand All @@ -102,12 +107,16 @@ function bindPanEvents(container: HTMLDivElement) {
}, { passive: false });
}

export function startNodeDrag(nodeId: string, clientX: number, clientY: number) {
export function startNodeDrag(nodeId: string, clientX: number, clientY: number, pointerId?: number) {
const node = getState().nodes.find((n) => n.id === nodeId);
if (!node) return;
dragNodeId = nodeId;
dragStart = { x: clientX, y: clientY };
dragNodeStart = { ...node.position };
if (containerEl && pointerId != null) {
dragPointerId = pointerId;
containerEl.setPointerCapture(pointerId);
}
setState({ selectedNodeId: nodeId });
}

Expand Down
42 changes: 35 additions & 7 deletions ui/connections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,35 @@

import { NodeData, NodeExecutionState } from "./types";

const NODE_WIDTH = 200;
const MOBILE_BREAKPOINT = 768;
const MOBILE_NODE_MARGIN = 32;
const MOBILE_NODE_MAX_WIDTH = 180;
const DESKTOP_NODE_WIDTH = 200;

let cachedNodeWidth = typeof window !== "undefined" ? calculateNodeWidth(window.innerWidth) : DESKTOP_NODE_WIDTH;
let resizeFrame = 0;

if (typeof window !== "undefined") {
window.addEventListener("resize", () => {
if (resizeFrame) {
cancelAnimationFrame(resizeFrame);
}
resizeFrame = requestAnimationFrame(() => {
cachedNodeWidth = calculateNodeWidth(window.innerWidth);
resizeFrame = 0;
});
});
}

const getNodeWidth = () => cachedNodeWidth;
const NODE_HEIGHT = 80;

function calculateNodeWidth(windowWidth: number): number {
return windowWidth <= MOBILE_BREAKPOINT
? Math.min(MOBILE_NODE_MAX_WIDTH, windowWidth - MOBILE_NODE_MARGIN)
: DESKTOP_NODE_WIDTH;
}

export function renderConnections(
svg: SVGSVGElement,
nodes: NodeData[],
Expand All @@ -14,26 +40,27 @@ export function renderConnections(
svg.innerHTML = "";

const nodeMap = new Map(nodes.map((n) => [n.id, n]));
const nodeWidth = getNodeWidth();

for (const node of nodes) {
// Parent → child connections
for (const parentId of node.parentBlocks) {
if (parentId === "workflow") continue;
const parent = nodeMap.get(parentId);
if (!parent) continue;
drawConnection(svg, parent, node, "parent", executionStates);
drawConnection(svg, parent, node, "parent", executionStates, nodeWidth);
}

// Fork connections
for (const fork of node.forks) {
for (const branch of fork.branches) {
for (const targetId of branch.resultTrueBlocks) {
const target = nodeMap.get(targetId);
if (target) drawConnection(svg, node, target, "true", executionStates);
if (target) drawConnection(svg, node, target, "true", executionStates, nodeWidth);
}
for (const targetId of branch.resultFalseBlocks) {
const target = nodeMap.get(targetId);
if (target) drawConnection(svg, node, target, "false", executionStates);
if (target) drawConnection(svg, node, target, "false", executionStates, nodeWidth);
}
}
}
Expand All @@ -45,11 +72,12 @@ function drawConnection(
from: NodeData,
to: NodeData,
type: "parent" | "true" | "false",
executionStates: Record<string, NodeExecutionState>
executionStates: Record<string, NodeExecutionState>,
nodeWidth: number
) {
const fromX = from.position.x + NODE_WIDTH / 2;
const fromX = from.position.x + nodeWidth / 2;
const fromY = from.position.y + NODE_HEIGHT;
const toX = to.position.x + NODE_WIDTH / 2;
const toX = to.position.x + nodeWidth / 2;
const toY = to.position.y;

// Bezier curve
Expand Down
Loading
Loading