From 454a99edc22e273e7f88a08cea8b3444f01c546c Mon Sep 17 00:00:00 2001 From: Matheus Galvao Date: Mon, 24 Nov 2025 21:14:15 -0300 Subject: [PATCH 1/5] fix(web): update CSS to use design system tokens - Replace hardcoded colors with semantic tokens for dark mode support - Replace hardcoded spacing values with UI spacing tokens - Replace hardcoded border radius with UI radius tokens - Add proper modal component styles using design tokens - Remove inline styles from index.html modal footer Ensures full compliance with CodeSignal Design System (AGENTS.md) --- apps/web/index.html | 2 +- apps/web/src/workflow-editor.css | 175 +++++++++++++++++++++---------- 2 files changed, 121 insertions(+), 56 deletions(-) diff --git a/apps/web/index.html b/apps/web/index.html index f55e1b5..17cf8a2 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -102,7 +102,7 @@

Confirm Action

Are you sure you want to continue?

-
+
diff --git a/apps/web/src/workflow-editor.css b/apps/web/src/workflow-editor.css index 029d4e6..08cdc70 100644 --- a/apps/web/src/workflow-editor.css +++ b/apps/web/src/workflow-editor.css @@ -20,20 +20,20 @@ body { .node-palette { display: flex; flex-direction: column; - gap: 0.5rem; + gap: var(--UI-Spacing-spacing-s); } /* Header tweaks */ .header { display: flex; align-items: center; - gap: 1rem; + gap: var(--UI-Spacing-spacing-ms); } .header-left { display: flex; align-items: center; - gap: 1rem; + gap: var(--UI-Spacing-spacing-ms); } .header-help { @@ -50,11 +50,11 @@ body { .sidebar-right { border-left: 1px solid var(--Colors-Stroke-Default); - padding: 0.5rem; + padding: var(--UI-Spacing-spacing-s); background: var(--Colors-Backgrounds-Main-Default); display: flex; flex-direction: column; - gap: 0.75rem; + gap: var(--UI-Spacing-spacing-mxs); overflow-y: auto; width: var(--right-sidebar-width); min-width: var(--right-sidebar-width); @@ -62,12 +62,12 @@ body { .palette-floating { position: absolute; - top: 1rem; - left: 1rem; + top: var(--UI-Spacing-spacing-ms); + left: var(--UI-Spacing-spacing-ms); background: var(--Colors-Backgrounds-Main-Top); border-radius: var(--UI-Radius-radius-s); - box-shadow: var(--Colors-Shadow-Card); - padding: 1rem; + box-shadow: 0 3px 2px 0 var(--Colors-Shadow-Card); + padding: var(--UI-Spacing-spacing-ms); width: 220px; z-index: 5; backdrop-filter: blur(6px); @@ -75,7 +75,7 @@ body { } .palette-floating h3 { - margin: 0 0 0.5rem 0; + margin: 0 0 var(--UI-Spacing-spacing-s) 0; font-size: var(--Fonts-Body-Default-md); } @@ -108,17 +108,17 @@ body { /* Palette Items */ .draggable-node { - padding: 0.75rem; + padding: var(--UI-Spacing-spacing-mxs); background: var(--Colors-Backgrounds-Main-Top); border: 1px solid var(--Colors-Input-Border-Default); border-radius: var(--UI-Radius-radius-xs); - margin-bottom: 0.5rem; + margin-bottom: var(--UI-Spacing-spacing-s); cursor: grab; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; - gap: 0.5rem; + gap: var(--UI-Spacing-spacing-s); } .draggable-node:hover { @@ -130,7 +130,7 @@ body { #canvas-container { position: relative; overflow: hidden; - background-image: radial-gradient(var(--Colors-Input-Border-Default) 1px, transparent 1px); + background-image: radial-gradient(var(--Colors-Stroke-Default) 1px, transparent 1px); background-size: 20px 20px; background-color: var(--Colors-Backgrounds-Main-Light); cursor: grab; @@ -164,11 +164,11 @@ body { .canvas-controls { position: absolute; - top: 1rem; - right: 1rem; + top: var(--UI-Spacing-spacing-ms); + right: var(--UI-Spacing-spacing-ms); z-index: 5; display: flex; - gap: 0.35rem; + gap: var(--UI-Spacing-spacing-xs); } .canvas-clear { @@ -177,7 +177,7 @@ body { left: var(--UI-Spacing-spacing-ms); z-index: 6; border-radius: var(--UI-Radius-radius-xs); - box-shadow: var(--Colors-Shadow-Soft); + box-shadow: 0 5px 0 -2px var(--Colors-Shadow-Soft); } .canvas-clear:hover { @@ -187,12 +187,12 @@ body { .canvas-controls button { width: 48px; height: 44px; - border-radius: 20px; + border-radius: var(--UI-Radius-radius-mxl); border: none; font-size: var(--Fonts-Body-Default-xl); color: var(--Colors-Text-Body-Strong); - background: rgba(255,255,255,0.95); - box-shadow: 0 6px 14px rgba(15, 23, 42, 0.15); + background: var(--Colors-Backgrounds-Main-Top); + box-shadow: 0 3px 2px 0 var(--Colors-Shadow-Card); display: flex; align-items: center; justify-content: center; @@ -200,7 +200,7 @@ body { } .canvas-controls button:hover { - background: var(--Colors-Backgrounds-Main-Top); + background: var(--Colors-Backgrounds-Main-Medium); } .canvas-controls button span { @@ -301,7 +301,7 @@ path.connection-line.active { } .node-header .icon { - margin-right: 0.35rem; + margin-right: var(--UI-Spacing-spacing-xs); vertical-align: middle; } @@ -311,7 +311,7 @@ path.connection-line.active { .node-controls { display: flex; - gap: 0.5rem; + gap: var(--UI-Spacing-spacing-s); } .icon-btn { @@ -337,8 +337,8 @@ path.connection-line.active { .icon-btn .icon { margin: 0; - width: var(--Icon-Size-Medium); - height: var(--Icon-Size-Medium); + width: 24px; + height: 24px; } .icon-btn.collapse { @@ -468,17 +468,17 @@ path.connection-line.active { /* Right Sidebar - Chat Panel */ .chat-panel { - height: calc(100vh - var(--header-height) - 1rem); + height: calc(100vh - var(--header-height) - var(--UI-Spacing-spacing-ms)); display: flex; flex-direction: column; - padding: 0.75rem; + padding: var(--UI-Spacing-spacing-mxs); } .chat-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 1rem; + margin-bottom: var(--UI-Spacing-spacing-ms); } .chat-header h2 { @@ -496,16 +496,16 @@ path.connection-line.active { background: var(--Colors-Backgrounds-Main-Light); border: 1px solid var(--Colors-Stroke-Default); border-radius: var(--UI-Radius-radius-s); - padding: 1rem; + padding: var(--UI-Spacing-spacing-ms); overflow-y: auto; display: flex; flex-direction: column; - gap: 0.75rem; + gap: var(--UI-Spacing-spacing-mxs); } .chat-message { border-radius: var(--UI-Radius-radius-xs); - padding: 0.75rem 1rem; + padding: var(--UI-Spacing-spacing-mxs) var(--UI-Spacing-spacing-ms); line-height: 1.4; font-size: var(--Fonts-Body-Default-xs); } @@ -513,7 +513,7 @@ path.connection-line.active { .chat-message.user { align-self: flex-end; background: var(--Colors-Primary-Medium); - color: #fff; + color: var(--Colors-Text-Body-White); } .chat-message.agent { @@ -529,7 +529,7 @@ path.connection-line.active { .chat-spinner-row { display: flex; align-items: center; - gap: 0.4rem; + gap: var(--UI-Spacing-spacing-xxs); } .chat-spinner-text { @@ -539,7 +539,7 @@ path.connection-line.active { .chat-spinner { display: inline-flex; - gap: 0.2rem; + gap: var(--UI-Spacing-spacing-min); } .chat-spinner span { @@ -574,7 +574,7 @@ path.connection-line.active { .chat-message .chat-message-label { font-weight: 600; - margin-bottom: 0.25rem; + margin-bottom: var(--UI-Spacing-spacing-xxs); display: block; font-size: var(--Fonts-Body-Default-xxs); text-transform: uppercase; @@ -591,7 +591,7 @@ path.connection-line.active { .chat-message.error { border: 1px solid var(--Colors-Alert-Error-Default); - background: rgba(220, 38, 38, 0.1); + background: var(--Colors-Alert-Error-Lighter); color: var(--Colors-Alert-Error-Default); } @@ -604,19 +604,19 @@ path.connection-line.active { .approval-text { font-weight: 600; - margin-bottom: 0.5rem; + margin-bottom: var(--UI-Spacing-spacing-s); } .approval-actions { display: flex; justify-content: flex-end; - gap: 0.5rem; - margin-top: 0.5rem; + gap: var(--UI-Spacing-spacing-s); + margin-top: var(--UI-Spacing-spacing-s); } .approval-actions button { min-width: 60px; - padding: 0.4rem 0.75rem; + padding: var(--UI-Spacing-spacing-xxs) var(--UI-Spacing-spacing-mxs); font-size: var(--Fonts-Body-Default-xs); } @@ -624,29 +624,29 @@ path.connection-line.active { align-self: center; max-width: 400px; border-radius: var(--UI-Radius-radius-s); - padding: 0.75rem 1rem; + padding: var(--UI-Spacing-spacing-mxs) var(--UI-Spacing-spacing-ms); font-size: var(--Fonts-Body-Default-xs); display: flex; align-items: center; - gap: 0.5rem; + gap: var(--UI-Spacing-spacing-s); } .chat-message.approval-result.approved { - background: rgba(22, 163, 74, 0.1); - border: 1px solid rgba(22, 163, 74, 0.3); - color: #16a34a; + background: var(--Colors-Alert-Success-Lighter); + border: 1px solid var(--Colors-Alert-Success-Medium); + color: var(--Colors-Alert-Success-Medium-Dark); } .chat-message.approval-result.rejected { - background: rgba(220, 38, 38, 0.1); - border: 1px solid rgba(220, 38, 38, 0.3); + background: var(--Colors-Alert-Error-Lighter); + border: 1px solid var(--Colors-Alert-Error-Medium); color: var(--Colors-Alert-Error-Default); } .approval-result-content { display: flex; align-items: center; - gap: 0.5rem; + gap: var(--UI-Spacing-spacing-s); flex-wrap: wrap; } @@ -665,8 +665,8 @@ path.connection-line.active { .approval-result-note { width: 100%; - margin-top: 0.5rem; - padding-top: 0.5rem; + margin-top: var(--UI-Spacing-spacing-s); + padding-top: var(--UI-Spacing-spacing-s); border-top: 1px solid currentColor; opacity: 0.7; font-size: var(--Fonts-Body-Default-xs); @@ -676,14 +676,14 @@ path.connection-line.active { } .chat-input { - margin-top: 1rem; + margin-top: var(--UI-Spacing-spacing-ms); display: flex; flex-direction: column; } .chat-input label { font-weight: 600; - margin-bottom: 0.5rem; + margin-bottom: var(--UI-Spacing-spacing-s); } .chat-input textarea { @@ -691,7 +691,7 @@ path.connection-line.active { min-height: 100px; border: 1px solid var(--Colors-Input-Border-Default); border-radius: var(--UI-Radius-radius-xs); - padding: 0.75rem; + padding: var(--UI-Spacing-spacing-mxs); font-size: var(--Fonts-Body-Default-xs); resize: vertical; background: var(--Colors-Backgrounds-Main-Default); @@ -702,7 +702,7 @@ path.connection-line.active { width: 100%; border: 1px solid var(--Colors-Input-Border-Default); border-radius: var(--UI-Radius-radius-xs); - padding: 0.6rem 0.8rem; + padding: var(--UI-Spacing-spacing-xs) var(--UI-Spacing-spacing-s); font-size: var(--Fonts-Body-Default-xs); background: var(--Colors-Backgrounds-Main-Default); color: var(--Colors-Text-Body-Strong); @@ -736,3 +736,68 @@ path.connection-line.active { justify-content: flex-end; gap: var(--UI-Spacing-spacing-s); } + +/* Modal Base Styles */ +.modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; +} + +.modal-backdrop { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--Colors-Base-Neutral-Alphas-1400-50); + backdrop-filter: blur(2px); +} + +.modal-content { + position: relative; + background: var(--Colors-Backgrounds-Main-Top); + border-radius: var(--UI-Radius-radius-m); + box-shadow: 0 12px 38px 0 var(--Colors-Shadow-Float, rgba(22, 44, 96, 0.12)); + max-height: 90vh; + overflow-y: auto; +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--UI-Spacing-spacing-ms); + border-bottom: 1px solid var(--Colors-Stroke-Default); +} + +.modal-header h2 { + margin: 0; + font-size: var(--Fonts-Headlines-xsm); +} + +.modal-close { + background: none; + border: none; + font-size: var(--Fonts-Body-Default-xxl); + cursor: pointer; + color: var(--Colors-Text-Body-Medium); + padding: var(--UI-Spacing-spacing-xxs); + line-height: 1; +} + +.modal-close:hover { + color: var(--Colors-Text-Body-Strong); +} + +.modal-body { + padding: var(--UI-Spacing-spacing-ms); + max-height: 60vh; + overflow-y: auto; +} From 22964374885f52dac5c940e6c24bfc016ea998f0 Mon Sep 17 00:00:00 2001 From: Matheus Galvao Date: Mon, 24 Nov 2025 21:18:17 -0300 Subject: [PATCH 2/5] feat(web): streamline UI - remove header, dynamic run button - Remove top header panel for cleaner interface - Move Help button to chat header (where status was) - Dynamic run button states: - 'Run Workflow' (idle) - 'Running...' (disabled while running) - 'Resume' (when workflow is paused) - Show Completed/Failed status as chat messages instead of status text - Update layout to use full viewport height --- apps/web/index.html | 9 +--- apps/web/src/app/workflow-editor.ts | 82 ++++++++++++++++++++--------- apps/web/src/workflow-editor.css | 51 +++++++++--------- 3 files changed, 82 insertions(+), 60 deletions(-) diff --git a/apps/web/index.html b/apps/web/index.html index 17cf8a2..b7959c1 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -27,13 +27,6 @@ -
-
-

Agent Builder

-
- -
-
@@ -73,7 +66,7 @@

Nodes

Run Console

-
Idle
+
diff --git a/apps/web/src/app/workflow-editor.ts b/apps/web/src/app/workflow-editor.ts index c651bad..d1ace21 100644 --- a/apps/web/src/app/workflow-editor.ts +++ b/apps/web/src/app/workflow-editor.ts @@ -38,8 +38,8 @@ export class WorkflowEditor { this.connectionsLayer = document.getElementById('connections-layer'); this.chatMessages = document.getElementById('chat-messages'); this.initialPrompt = document.getElementById('initial-prompt'); - this.chatStatusEl = document.getElementById('chat-status'); this.runButton = document.getElementById('btn-run'); + this.workflowState = 'idle'; // 'idle' | 'running' | 'paused' this.rightPanel = document.getElementById('right-panel'); this.rightResizer = document.getElementById('right-resizer'); this.pendingAgentMessage = null; @@ -62,8 +62,7 @@ export class WorkflowEditor { this.initWebSocket(); this.applyViewport(); - this.setStatus('Idle'); - this.setRunState(false); + this.updateRunButton(); this.addDefaultStartNode(); this.upgradeLegacyNodes(true); @@ -119,19 +118,40 @@ export class WorkflowEditor { return node.data.collapsed ? COLLAPSED_NODE_WIDTH : EXPANDED_NODE_WIDTH; } - setStatus(text) { - if (this.chatStatusEl) { - this.chatStatusEl.innerText = text; - } + setWorkflowState(state) { + this.workflowState = state; + this.updateRunButton(); } - setRunState(isRunning) { - this.isRunning = isRunning; - if (this.runButton) { - this.runButton.disabled = isRunning; + updateRunButton() { + if (!this.runButton) return; + + switch (this.workflowState) { + case 'running': + this.runButton.textContent = 'Running...'; + this.runButton.disabled = true; + break; + case 'paused': + this.runButton.textContent = 'Resume'; + this.runButton.disabled = false; + break; + case 'idle': + default: + this.runButton.textContent = 'Run Workflow'; + this.runButton.disabled = false; + break; } } + appendStatusMessage(text, type = '') { + if (!this.chatMessages) return; + const message = document.createElement('div'); + message.className = `chat-message status ${type}`; + message.textContent = text; + this.chatMessages.appendChild(message); + this.chatMessages.scrollTop = this.chatMessages.scrollHeight; + } + logManualUserMessage(text) { this.appendChatMessage(text, 'user'); if (!this.runHistory) this.runHistory = []; @@ -322,10 +342,11 @@ export class WorkflowEditor { this.render(); this.addDefaultStartNode(); this.currentPrompt = ''; + this.currentRunId = null; if (this.chatMessages) { this.chatMessages.innerHTML = '
Canvas cleared. Start building your next workflow.
'; } - this.setStatus('Idle'); + this.setWorkflowState('idle'); }); if (this.approveBtn) { @@ -1169,16 +1190,20 @@ export class WorkflowEditor { } async runWorkflow() { + // If paused, resume instead + if (this.workflowState === 'paused' && this.currentRunId) { + this.submitApprovalDecision('approve'); + return; + } + this.upgradeLegacyNodes(); const startNode = this.nodes.find(n => n.type === 'start'); if (!startNode) { alert('Add a Start node and connect your workflow before running.'); - this.setStatus('Missing start node'); return; } - this.setStatus('Running'); - this.setRunState(true); + this.setWorkflowState('running'); this.currentPrompt = this.initialPrompt.value || ''; this.startChatSession(this.currentPrompt); @@ -1197,9 +1222,9 @@ export class WorkflowEditor { } catch (e) { this.appendChatMessage('Error: ' + e.message, 'error'); - this.setStatus('Failed'); + this.appendStatusMessage('Failed', 'failed'); this.hideAgentSpinner(); - this.setRunState(false); + this.setWorkflowState('idle'); } } @@ -1212,18 +1237,24 @@ export class WorkflowEditor { this.currentRunId = result.runId; const pausedNodeId = result.currentNodeId || this.extractWaitingNodeId(result.logs); this.showApprovalMessage(pausedNodeId); - this.setStatus('Waiting for approval'); + this.setWorkflowState('paused'); } else if (result.status === 'completed') { this.clearApprovalMessage(); - this.setStatus('Completed'); + this.appendStatusMessage('Completed', 'completed'); this.hideAgentSpinner(); - this.setRunState(false); - } else { + this.setWorkflowState('idle'); + this.currentRunId = null; + } else if (result.status === 'failed') { + this.clearApprovalMessage(); + this.appendStatusMessage('Failed', 'failed'); + this.hideAgentSpinner(); + this.setWorkflowState('idle'); + this.currentRunId = null; + } else { this.clearApprovalMessage(); - this.setStatus(result.status || 'Idle'); if (result.status !== 'paused') { this.hideAgentSpinner(); - this.setRunState(false); + this.setWorkflowState('idle'); } } } @@ -1233,7 +1264,7 @@ export class WorkflowEditor { this.setApprovalButtonsDisabled(true); const note = ''; this.replaceApprovalWithResult(decision, note); - this.setStatus('Running'); + this.setWorkflowState('running'); this.showAgentSpinner(); try { @@ -1241,8 +1272,9 @@ export class WorkflowEditor { this.handleRunResult(result); } catch (e) { this.appendChatMessage(e.message, 'error'); + this.appendStatusMessage('Failed', 'failed'); this.hideAgentSpinner(); - this.setRunState(false); + this.setWorkflowState('idle'); } } } diff --git a/apps/web/src/workflow-editor.css b/apps/web/src/workflow-editor.css index 08cdc70..eefd870 100644 --- a/apps/web/src/workflow-editor.css +++ b/apps/web/src/workflow-editor.css @@ -1,6 +1,5 @@ :root { --node-width: 240px; - --header-height: 72px; --sidebar-width: 260px; --right-sidebar-width: 320px; } @@ -23,28 +22,12 @@ body { gap: var(--UI-Spacing-spacing-s); } -/* Header tweaks */ -.header { - display: flex; - align-items: center; - gap: var(--UI-Spacing-spacing-ms); -} - -.header-left { - display: flex; - align-items: center; - gap: var(--UI-Spacing-spacing-ms); -} - -.header-help { - margin-left: auto; -} -/* Main Layout Override for 3-column structure */ +/* Main Layout Override for 2-column structure */ .main-layout { display: grid; grid-template-columns: 1fr 6px var(--right-sidebar-width); - height: calc(100vh - var(--header-height)); + height: 100vh; overflow: hidden; } @@ -468,7 +451,7 @@ path.connection-line.active { /* Right Sidebar - Chat Panel */ .chat-panel { - height: calc(100vh - var(--header-height) - var(--UI-Spacing-spacing-ms)); + height: calc(100vh - var(--UI-Spacing-spacing-ms)); display: flex; flex-direction: column; padding: var(--UI-Spacing-spacing-mxs); @@ -484,13 +467,6 @@ path.connection-line.active { .chat-header h2 { margin: 0; } - -.chat-status { - font-size: var(--Fonts-Body-Default-xs); - font-weight: 600; - color: var(--Colors-Text-Body-Medium); - text-transform: uppercase; -} .chat-messages { flex: 1; background: var(--Colors-Backgrounds-Main-Light); @@ -589,6 +565,27 @@ path.connection-line.active { font-size: var(--Fonts-Body-Default-xxs); } +.chat-message.status { + align-self: center; + background: var(--Colors-Backgrounds-Main-Medium); + color: var(--Colors-Text-Body-Strong); + font-size: var(--Fonts-Body-Default-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + padding: var(--UI-Spacing-spacing-s) var(--UI-Spacing-spacing-ms); +} + +.chat-message.status.completed { + background: var(--Colors-Alert-Success-Lighter); + color: var(--Colors-Alert-Success-Medium-Dark); +} + +.chat-message.status.failed { + background: var(--Colors-Alert-Error-Lighter); + color: var(--Colors-Alert-Error-Default); +} + .chat-message.error { border: 1px solid var(--Colors-Alert-Error-Default); background: var(--Colors-Alert-Error-Lighter); From 2ae7b71ced15ae09a1e37b60c44ace42dd821012 Mon Sep 17 00:00:00 2001 From: Matheus Galvao Date: Mon, 24 Nov 2025 21:25:45 -0300 Subject: [PATCH 3/5] feat(web): streamline UI - remove header, dynamic run button - Remove top header panel for cleaner interface - Move Help button to chat header (replaces status indicator) - Dynamic run button states: - 'Run Workflow' (enabled) when idle - 'Running...' (disabled) while running - 'Paused' (disabled) when awaiting user action - Show Completed/Failed status as styled chat messages - Update layout to use full viewport height - Fix input/textarea overflow with box-sizing: border-box - Add proper modal width constraints (600px max) --- apps/web/src/app/workflow-editor.ts | 11 ++++------- apps/web/src/workflow-editor.css | 5 +++++ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/apps/web/src/app/workflow-editor.ts b/apps/web/src/app/workflow-editor.ts index d1ace21..a5bc714 100644 --- a/apps/web/src/app/workflow-editor.ts +++ b/apps/web/src/app/workflow-editor.ts @@ -132,8 +132,8 @@ export class WorkflowEditor { this.runButton.disabled = true; break; case 'paused': - this.runButton.textContent = 'Resume'; - this.runButton.disabled = false; + this.runButton.textContent = 'Paused'; + this.runButton.disabled = true; break; case 'idle': default: @@ -1190,11 +1190,8 @@ export class WorkflowEditor { } async runWorkflow() { - // If paused, resume instead - if (this.workflowState === 'paused' && this.currentRunId) { - this.submitApprovalDecision('approve'); - return; - } + // Don't start new workflow if already running or paused + if (this.workflowState !== 'idle') return; this.upgradeLegacyNodes(); const startNode = this.nodes.find(n => n.type === 'start'); diff --git a/apps/web/src/workflow-editor.css b/apps/web/src/workflow-editor.css index eefd870..9cf4498 100644 --- a/apps/web/src/workflow-editor.css +++ b/apps/web/src/workflow-editor.css @@ -41,6 +41,7 @@ body { overflow-y: auto; width: var(--right-sidebar-width); min-width: var(--right-sidebar-width); + box-sizing: border-box; } .palette-floating { @@ -693,6 +694,7 @@ path.connection-line.active { resize: vertical; background: var(--Colors-Backgrounds-Main-Default); color: var(--Colors-Text-Body-Strong); + box-sizing: border-box; } .chat-input input[type="text"] { @@ -703,6 +705,7 @@ path.connection-line.active { font-size: var(--Fonts-Body-Default-xs); background: var(--Colors-Backgrounds-Main-Default); color: var(--Colors-Text-Body-Strong); + box-sizing: border-box; } .run-button { @@ -762,6 +765,8 @@ path.connection-line.active { background: var(--Colors-Backgrounds-Main-Top); border-radius: var(--UI-Radius-radius-m); box-shadow: 0 12px 38px 0 var(--Colors-Shadow-Float, rgba(22, 44, 96, 0.12)); + max-width: 600px; + width: min(600px, calc(100% - 2rem)); max-height: 90vh; overflow-y: auto; } From 2265c6b81bc143f538007e38e28824c9bd2dfd48 Mon Sep 17 00:00:00 2001 From: Matheus Galvao Date: Mon, 24 Nov 2025 21:29:08 -0300 Subject: [PATCH 4/5] fix(web): UI polish - checkbox styling, centered start node - Add design system styled checkbox for tools list - Center start node on canvas for any screen size - Custom checkbox with primary colors, checkmark, hover/focus states --- apps/web/src/app/workflow-editor.ts | 20 +++++++--- apps/web/src/workflow-editor.css | 57 +++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 6 deletions(-) diff --git a/apps/web/src/app/workflow-editor.ts b/apps/web/src/app/workflow-editor.ts index a5bc714..39f5e64 100644 --- a/apps/web/src/app/workflow-editor.ts +++ b/apps/web/src/app/workflow-editor.ts @@ -491,12 +491,17 @@ export class WorkflowEditor { } getDefaultStartPosition() { - const container = this.canvasStage || this.canvas; - const fallback = { x: 160, y: 160 }; + const container = this.canvas; + const fallback = { x: 200, y: 200 }; if (!container) return fallback; const rect = container.getBoundingClientRect(); - const x = rect.width ? Math.max(60, rect.width * 0.2) : fallback.x; - const y = rect.height ? Math.max(60, rect.height * 0.3) : fallback.y; + if (!rect.width || !rect.height) return fallback; + + // Center the node accounting for node width (240px) and approximate height (60px) + const nodeWidth = COLLAPSED_NODE_WIDTH; + const nodeHeight = 60; + const x = (rect.width / 2) - (nodeWidth / 2); + const y = (rect.height / 2) - (nodeHeight / 2); return { x, y }; } @@ -796,16 +801,19 @@ export class WorkflowEditor { toolItems.forEach(tool => { const row = document.createElement('label'); - row.className = 'row'; + row.className = 'tool-item'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; + checkbox.className = 'tool-checkbox'; checkbox.checked = node.data.tools?.[tool.key] || false; checkbox.addEventListener('change', (e) => { if (!node.data.tools) node.data.tools = {}; node.data.tools[tool.key] = e.target.checked; }); row.appendChild(checkbox); - row.appendChild(document.createTextNode(` ${tool.label}`)); + const labelText = document.createElement('span'); + labelText.textContent = tool.label; + row.appendChild(labelText); toolsList.appendChild(row); }); diff --git a/apps/web/src/workflow-editor.css b/apps/web/src/workflow-editor.css index 9cf4498..1bf321b 100644 --- a/apps/web/src/workflow-editor.css +++ b/apps/web/src/workflow-editor.css @@ -448,6 +448,63 @@ path.connection-line.active { max-height: 100px; overflow-y: auto; background: var(--Colors-Backgrounds-Main-Top); + display: flex; + flex-direction: column; + gap: var(--UI-Spacing-spacing-s); +} + +.tool-list .tool-item { + display: flex; + align-items: center; + gap: var(--UI-Spacing-spacing-s); + cursor: pointer; + font-size: var(--Fonts-Body-Default-sm); + color: var(--Colors-Text-Body-Default); +} + +.tool-list .tool-item:hover { + color: var(--Colors-Text-Body-Strong); +} + +/* Custom checkbox styling */ +.tool-list .tool-checkbox { + appearance: none; + -webkit-appearance: none; + width: 18px; + height: 18px; + border: 2px solid var(--Colors-Stroke-Strong); + border-radius: var(--UI-Radius-radius-xxs); + background: var(--Colors-Backgrounds-Main-Top); + cursor: pointer; + position: relative; + flex-shrink: 0; + transition: all 0.15s ease; +} + +.tool-list .tool-checkbox:hover { + border-color: var(--Colors-Primary-Medium); +} + +.tool-list .tool-checkbox:checked { + background: var(--Colors-Primary-Default); + border-color: var(--Colors-Primary-Default); +} + +.tool-list .tool-checkbox:checked::after { + content: ''; + position: absolute; + left: 5px; + top: 2px; + width: 4px; + height: 8px; + border: solid var(--Colors-Text-Body-White); + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.tool-list .tool-checkbox:focus { + outline: none; + box-shadow: 0 0 0 3px var(--Colors-Primary-Lightest); } /* Right Sidebar - Chat Panel */ From befd143c1315721305a219010830fe56c12dc7e3 Mon Sep 17 00:00:00 2001 From: Matheus Galvao Date: Mon, 24 Nov 2025 21:32:27 -0300 Subject: [PATCH 5/5] feat(web): dynamic node widths based on content - Nodes now have dynamic width (120px min, 280px max collapsed) - Start/End nodes are narrower, complex nodes expand as needed - Expanded nodes remain fixed at 420px for form editing - Node header text truncates with ellipsis to prevent overflow - Control buttons protected from shrinking - Connection positions calculated from actual DOM width --- apps/web/src/app/workflow-editor.ts | 22 ++++++++++++++++----- apps/web/src/workflow-editor.css | 30 +++++++++++++++++++++++------ 2 files changed, 41 insertions(+), 11 deletions(-) diff --git a/apps/web/src/app/workflow-editor.ts b/apps/web/src/app/workflow-editor.ts index 39f5e64..39032b4 100644 --- a/apps/web/src/app/workflow-editor.ts +++ b/apps/web/src/app/workflow-editor.ts @@ -4,8 +4,8 @@ import type { WorkflowGraph } from '@agentic/types'; import { runWorkflow, resumeWorkflow } from '../services/api'; -const COLLAPSED_NODE_WIDTH = 240; const EXPANDED_NODE_WIDTH = 420; +const DEFAULT_NODE_WIDTH = 150; // Fallback if DOM not ready const MODEL_OPTIONS = ['gpt-5', 'gpt-5-mini', 'gpt-5.1']; const MODEL_EFFORTS = { 'gpt-5': ['low', 'medium', 'high'], @@ -114,8 +114,20 @@ export class WorkflowEditor { } getNodeWidth(node) { - if (!node || !node.data) return COLLAPSED_NODE_WIDTH; - return node.data.collapsed ? COLLAPSED_NODE_WIDTH : EXPANDED_NODE_WIDTH; + if (!node) return DEFAULT_NODE_WIDTH; + + // If expanded, use fixed expanded width + if (node.data && !node.data.collapsed) { + return EXPANDED_NODE_WIDTH; + } + + // Try to get actual width from DOM + const el = document.getElementById(node.id); + if (el) { + return el.offsetWidth || DEFAULT_NODE_WIDTH; + } + + return DEFAULT_NODE_WIDTH; } setWorkflowState(state) { @@ -497,8 +509,8 @@ export class WorkflowEditor { const rect = container.getBoundingClientRect(); if (!rect.width || !rect.height) return fallback; - // Center the node accounting for node width (240px) and approximate height (60px) - const nodeWidth = COLLAPSED_NODE_WIDTH; + // Center the node accounting for approximate start node width and height + const nodeWidth = 120; // Start node is narrow const nodeHeight = 60; const x = (rect.width / 2) - (nodeWidth / 2); const y = (rect.height / 2) - (nodeHeight / 2); diff --git a/apps/web/src/workflow-editor.css b/apps/web/src/workflow-editor.css index 1bf321b..fb82443 100644 --- a/apps/web/src/workflow-editor.css +++ b/apps/web/src/workflow-editor.css @@ -1,5 +1,7 @@ :root { - --node-width: 240px; + --node-width-min: 120px; + --node-width-max: 280px; + --node-width-expanded: 420px; --sidebar-width: 260px; --right-sidebar-width: 320px; } @@ -246,9 +248,11 @@ path.connection-line.active { /* Nodes on Canvas */ .node { position: absolute; - width: var(--node-width); + width: auto; + min-width: var(--node-width-min); + max-width: var(--node-width-max); z-index: 2; - transition: box-shadow 0.2s, width 0.2s; + transition: box-shadow 0.2s, width 0.2s, min-width 0.2s, max-width 0.2s; flex-direction: column; justify-content: flex-start; align-items: stretch; @@ -268,7 +272,9 @@ path.connection-line.active { /* Expanded Mode (In-Node Editing) */ .node.expanded { - width: 420px; /* Wider for editing */ + width: var(--node-width-expanded); + min-width: var(--node-width-expanded); + max-width: var(--node-width-expanded); z-index: 100; } @@ -282,11 +288,21 @@ path.connection-line.active { display: flex; justify-content: space-between; align-items: center; + gap: var(--UI-Spacing-spacing-s); +} + +.node-header > span:first-child { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .node-header .icon { margin-right: var(--UI-Spacing-spacing-xs); vertical-align: middle; + flex-shrink: 0; } .node-header:active { @@ -296,6 +312,7 @@ path.connection-line.active { .node-controls { display: flex; gap: var(--UI-Spacing-spacing-s); + flex-shrink: 0; } .icon-btn { @@ -344,12 +361,13 @@ path.connection-line.active { } .node-preview { - padding: var(--UI-Spacing-spacing-ms); - font-size: var(--Fonts-Body-Default-sm); + padding: var(--UI-Spacing-spacing-mxs) var(--UI-Spacing-spacing-ms); + font-size: var(--Fonts-Body-Default-xs); color: var(--Colors-Text-Body-Medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + max-width: calc(var(--node-width-max) - var(--UI-Spacing-spacing-ms) * 2); } .node.expanded .node-preview {