error msgs rework
3clyp50 committed
Jan 29, 2026 at 21:40 UTC
4f2a8c25ef2a0c631623a4c374336904bbc7d825
2 files changed
+13
-126
webui/css/messages.css
+9
-123
@@ -281,136 +281,22 @@
281
background-color: transparent;
282
}
283
284
-/* Collapsible Error Group */
285
-
286
-.message-error-group {
287
- background: transparent;
288
- border: none !important;
289
- padding: 0 !important;
290
-}
291
-
292
-.error-group {
293
- display: inline-flex;
294
- flex-direction: column;
295
- position: relative;
296
- z-index: 1;
297
- margin: var(--spacing-xs) 0;
298
- padding: var(--spacing-xs) 0;
299
- min-width: 200px;
300
- max-width: 100%;
301
- box-sizing: border-box;
302
- flex-shrink: 0;
303
-}
304
-
305
-/* Error Group Header */
306
-.error-group-header {
284
+/* Error messages styled like process groups */
285
+.message-error .msg-heading {
286
display: flex;
287
align-items: center;
309
- padding: 0;
310
- cursor: pointer;
311
- user-select: none;
312
- transition: opacity 0.15s ease;
313
- min-height: 22px;
288
gap: 6px;
315
- white-space: nowrap;
316
-}
317
-
318
-.error-group-header:hover {
319
- opacity: 0.85;
320
-}
321
-
322
-/* Expand/collapse triangle */
323
-.error-group-header .expand-icon {
324
- display: inline-block;
325
- width: 0;
326
- height: 0;
327
- border-style: solid;
328
- border-width: 4px 0 4px 6px;
329
- border-color: transparent transparent transparent #ef4444;
330
- opacity: 0.7;
331
- transition:
332
- transform 0.2s ease,
333
- opacity 0.15s ease;
334
- flex-shrink: 0;
335
- font-size: 0;
336
- margin-right: 2px;
337
-}
338
-
339
-.error-group-header:hover .expand-icon {
340
- opacity: 1;
341
-}
342
-
343
-.error-group.expanded .error-group-header .expand-icon {
344
- transform: rotate(90deg);
289
+ margin-bottom: var(--spacing-xs);
290
}
291
347
-/* Error title */
348
-.error-group-header .error-title {
349
- flex: 0 0 auto;
292
+.message-error .msg-heading h4 {
293
+ display: flex;
294
+ align-items: center;
295
font-size: var(--font-size-medium);
351
- font-weight: 600;
352
- color: var(--color-error-text);
353
-}
354
-
355
-/* Error subtitle (short description) */
356
-.error-group-header .error-subtitle {
357
- flex: 1 1 auto;
358
- font-size: 0.75rem;
359
- color: var(--color-text);
360
- opacity: 0.7;
361
- white-space: nowrap;
362
- overflow: hidden;
363
- text-overflow: ellipsis;
364
- margin-left: var(--spacing-xs);
365
- font-family: var(--font-family-code);
366
-}
367
-
368
-/* Error Group Content - Animated expand/collapse */
369
-.error-group-content {
370
- display: grid;
371
- grid-template-rows: 0fr;
372
- opacity: 0;
373
- margin-top: 0;
374
- padding-top: 0;
375
- transition:
376
- grid-template-rows 0.25s ease-out,
377
- opacity 0.2s ease-out,
378
- margin-top 0.25s ease-out,
379
- padding-top 0.25s ease-out;
380
- overflow: hidden;
381
-}
382
-
383
-.error-group-content > .error-content-inner {
384
- min-height: 0;
385
-}
386
-
387
-.error-group.expanded .error-group-content {
388
- grid-template-rows: 1fr;
389
- opacity: 1;
390
- margin-top: var(--spacing-xs);
391
- padding-top: var(--spacing-xs);
392
-}
393
-
394
-.error-content-inner {
395
- padding: var(--spacing-md);
396
- border-radius: 8px;
397
- /* border: 1px solid var(--color-error-text); */
398
- margin-left: var(--spacing-md);
399
-}
400
-
401
-/* Callstack styling */
402
-.error-callstack {
403
- margin: 0;
404
- white-space: pre-wrap;
405
- word-break: break-word;
406
- font-family: var(--font-family-code);
407
- font-size: 0.72rem;
408
- line-height: 1.5;
296
+ font-weight: 500;
297
color: var(--color-error-text);
410
- max-height: 30vh;
411
- overflow-y: auto;
412
- scrollbar-width: thin;
413
- scrollbar-color: var(--color-error-text) transparent;
298
+ opacity: 0.9;
299
+ margin-bottom: var(--spacing-sm);
300
}
301
302
/* Terminal styling moved to new terminal block above */
webui/js/messages.js
+4
-3
@@ -505,7 +505,7 @@ export function _drawMessage({
505
headingElement.appendChild(headingH4);
506
}
507
headingH4.innerHTML = convertIcons(escapeHTML(heading));
508
-
508
+ } else {
509
// Remove heading if it exists but heading is null
510
const existingHeading = messageDiv.querySelector(".msg-heading");
511
if (existingHeading) {
@@ -1304,6 +1304,8 @@ export function drawMessageError({
1304
...additional
1305
}) {
1306
const contentText = String(content ?? "");
1307
+ const errorText = kvps?.text || "Error";
1308
+ const errorHeading = errorText ? `Error - ${errorText}` : "Error";
1309
const actionButtons = [
1310
createActionButton("detail", "", () =>
1311
stepDetailStore.showStepDetail(
@@ -1317,12 +1319,11 @@ export function drawMessageError({
1319
1320
return drawStandaloneMessage({
1321
id,
1320
- heading,
1322
+ heading: errorHeading,
1323
content,
1324
position: "mid",
1325
containerClasses: ["ai-container", "center-container"],
1326
mainClass: "message-error",
1325
- kvps,
1327
actionButtons,
1328
});
1329
}