error highlighting and message improvements

frontend/src/App.jsx

@@ -1300,7 +1300,7 @@ function Flow() {
         case 'execution_start':
           setNodes((ns) => ns.map((n) => ({
             ...n,
-            data: { ...n.data, processingTimeMs: null },
+            data: { ...n.data, processingTimeMs: null, error: null },
           })));
           setExecutingNodeId(null);
           setStatus({ text: 'Running workflow…', level: 'info' });
@@ -1315,7 +1315,12 @@ function Flow() {
           break;
         case 'execution_error':
           setExecutingNodeId(null);
-          setStatus({ text: 'Error: ' + msg.data.message, level: 'error' });
+          if (msg.data.node_id) {
+            updateNodeData(msg.data.node_id, { error: msg.data.message });
+          }
+          if (!msg.data.node_id) {
+            setStatus({ text: 'Error: ' + msg.data.message, level: 'error' });
+          }
           console.error('[tono] execution error', msg.data);
           break;
         case 'preview':

frontend/src/CustomNode.jsx

@@ -1182,7 +1182,7 @@ function CustomNode({ id, data }) {
   return (
     <>
       {ctx?.executingNodeId === id && <div className="node-executing-glow" aria-hidden="true" />}
-    <div className="custom-node">
+    <div className={`custom-node${data.error ? ' node-error' : ''}`}>
       {/* Title */}
       <div className="node-title drag-handle" style={{ background: catColor }}>
         <div className="node-title-left">
@@ -1289,6 +1289,11 @@ function CustomNode({ id, data }) {
           <div className="node-warning">{data.warning}</div>
         )}
 
+        {/* Error notification */}
+        {data.error && (
+          <div className="node-error-message">{data.error}</div>
+        )}
+
         {scalarDisplay && !standaloneWidgets.some((w) => w.opts?.text_input) && (
           <div className="node-value-display">
             <div className="node-value-box">

frontend/src/styles.css

@@ -797,6 +797,21 @@ html, body, #root {
   border-bottom: 1px solid var(--warning-border);
 }
 
+.custom-node.node-error {
+  outline: 2px solid #ef4444;
+  outline-offset: -1px;
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
+}
+
+.node-error-message {
+  padding: 3px 10px;
+  font-size: 10px;
+  color: #fca5a5;
+  background: rgba(239, 68, 68, 0.12);
+  border-top: 1px solid rgba(239, 68, 68, 0.3);
+  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
+}
+
 .node-value-display {
   padding: 8px 10px 4px;
 }