@@ -73,7 +66,7 @@
Nodes
Run Console
-Idle
+
@@ -102,7 +95,7 @@
-
Confirm Action
Are you sure you want to continue?
+
diff --git a/apps/web/src/app/workflow-editor.ts b/apps/web/src/app/workflow-editor.ts
index c651bad..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'],
@@ -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);
@@ -115,23 +114,56 @@ 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;
}
- 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 = 'Paused';
+ this.runButton.disabled = true;
+ 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 +354,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) {
@@ -470,12 +503,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 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);
return { x, y };
}
@@ -775,16 +813,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);
});
@@ -1169,16 +1210,17 @@ export class WorkflowEditor {
}
async runWorkflow() {
+ // 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');
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 +1239,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 +1254,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 +1281,7 @@ export class WorkflowEditor {
this.setApprovalButtonsDisabled(true);
const note = '';
this.replaceApprovalWithResult(decision, note);
- this.setStatus('Running');
+ this.setWorkflowState('running');
this.showAgentSpinner();
try {
@@ -1241,8 +1289,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 029d4e6..fb82443 100644
--- a/apps/web/src/workflow-editor.css
+++ b/apps/web/src/workflow-editor.css
@@ -1,6 +1,7 @@
:root {
- --node-width: 240px;
- --header-height: 72px;
+ --node-width-min: 120px;
+ --node-width-max: 280px;
+ --node-width-expanded: 420px;
--sidebar-width: 260px;
--right-sidebar-width: 320px;
}
@@ -20,54 +21,39 @@ 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;
-}
-.header-left {
- display: flex;
- align-items: center;
- gap: 1rem;
-}
-
-.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;
}
.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);
+ box-sizing: border-box;
}
.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 +61,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 +94,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 +116,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 +150,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 +163,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 +173,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 +186,7 @@ body {
}
.canvas-controls button:hover {
- background: var(--Colors-Backgrounds-Main-Top);
+ background: var(--Colors-Backgrounds-Main-Medium);
}
.canvas-controls button span {
@@ -262,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;
@@ -284,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;
}
@@ -298,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: 0.35rem;
+ margin-right: var(--UI-Spacing-spacing-xs);
vertical-align: middle;
+ flex-shrink: 0;
}
.node-header:active {
@@ -311,7 +311,8 @@ path.connection-line.active {
.node-controls {
display: flex;
- gap: 0.5rem;
+ gap: var(--UI-Spacing-spacing-s);
+ flex-shrink: 0;
}
.icon-btn {
@@ -337,8 +338,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 {
@@ -360,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 {
@@ -464,48 +466,98 @@ 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 */
.chat-panel {
- height: calc(100vh - var(--header-height) - 1rem);
+ height: calc(100vh - 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 {
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);
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 +565,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 +581,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 +591,7 @@ path.connection-line.active {
.chat-spinner {
display: inline-flex;
- gap: 0.2rem;
+ gap: var(--UI-Spacing-spacing-min);
}
.chat-spinner span {
@@ -574,7 +626,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;
@@ -589,9 +641,30 @@ 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: rgba(220, 38, 38, 0.1);
+ background: var(--Colors-Alert-Error-Lighter);
color: var(--Colors-Alert-Error-Default);
}
@@ -604,19 +677,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 +697,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 +738,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 +749,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,21 +764,23 @@ 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);
color: var(--Colors-Text-Body-Strong);
+ box-sizing: border-box;
}
.chat-input input[type="text"] {
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);
+ box-sizing: border-box;
}
.run-button {
@@ -736,3 +811,70 @@ 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-width: 600px;
+ width: min(600px, calc(100% - 2rem));
+ 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;
+}