@workflow/web-shared 5.0.0-beta.12 → 5.0.0-beta.13

package/dist/components/ui/error-stack-block.js

@@ -3,13 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle } from 'lucide-react';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
 /**
- * Check whether `value` looks like a structured error object with a `stack`
- * field that we can render as pre-formatted text.
+ * Check whether `value` looks like a structured error object we can render
+ * with the error block. Some persisted workflow errors only include a
+ * `message`, while runtime errors usually also include `stack`.
  */
-export function isStructuredErrorWithStack(value) {
+export function isStructuredError(value) {
     return (value != null &&
         typeof value === 'object' &&
-        'stack' in value &&
+        (typeof value.message === 'string' ||
+            typeof value.stack === 'string'));
+}
+/**
+ * Narrower guard kept for callers that specifically need a stack trace.
+ */
+export function isStructuredErrorWithStack(value) {
+    return (isStructuredError(value) &&
         typeof value.stack === 'string');
 }
 /**
@@ -26,18 +34,21 @@ function deriveTitle(message) {
     return firstLine.trim();
 }
 /**
- * Renders an error with a `stack` field as a visually distinct error block.
- * Shows the error message with an alert icon at the top, separated from
- * the stack trace below.
+ * Renders a structured error as a visually distinct error block. Shows the
+ * error message with an alert icon at the top, separated from the stack trace
+ * or full message below.
  */
-export function ErrorStackBlock({ value, }) {
-    const stack = value.stack;
+export function ErrorStackBlock({ value }) {
+    const stack = typeof value.stack === 'string' ? value.stack : undefined;
     const message = typeof value.message === 'string' ? value.message : undefined;
-    // V8's `Error.stack` already starts with `Name: message`, so when the
-    // body shows the stack it includes the full multi-line message anyway.
-    // The header just needs the first line.
-    const title = message ? deriveTitle(message) : undefined;
-    const copyText = message ? `${message}\n\n${stack}` : stack;
+    const body = stack ?? message ?? '';
+    // V8's `Error.stack` already starts with `Name: message`; message-only
+    // errors use the message as the body so long single-line failures remain
+    // readable even when the header truncates.
+    const title = message ? deriveTitle(message) : deriveTitle(body);
+    const copyText = message && stack && !stack.includes(message)
+        ? `${message}\n\n${stack}`
+        : body;
     return (_jsxs("div", { className: "relative overflow-hidden rounded-md border", style: {
             borderColor: 'var(--ds-red-400)',
             background: 'var(--ds-red-100)',
@@ -45,13 +56,13 @@ export function ErrorStackBlock({ value, }) {
                     color: 'var(--ds-red-900)',
                     borderBottom: '1px solid var(--ds-red-400)',
                 }, children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("p", { className: "text-xs font-semibold m-0 truncate", 
-                        // The full multi-line message is in the stack body below; the
-                        // header just shows the first line, single-line, with overflow
+                        // The full message or stack is in the body below; the header just
+                        // shows the first line, single-line, with overflow
                         // ellipsised so a long title doesn't push the copy button or
                         // wrap into the framed hint/docs lines.
-                        title: message, children: title })] })), _jsx("pre", { className: "px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0", style: {
+                        title: message, children: title })] })), body && (_jsx("pre", { className: "px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0", style: {
                     color: 'var(--ds-red-900)',
                     background: 'var(--ds-red-200)',
-                }, children: stack })] }));
+                }, children: body }))] }));
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXJyb3Itc3RhY2stYmxvY2suanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy91aS9lcnJvci1zdGFjay1ibG9jay50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsWUFBWSxDQUFDOztBQUViLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDM0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBRXhFOzs7R0FHRztBQUNILE1BQU0sVUFBVSwwQkFBMEIsQ0FDeEMsS0FBYztJQUVkLE9BQU8sQ0FDTCxLQUFLLElBQUksSUFBSTtRQUNiLE9BQU8sS0FBSyxLQUFLLFFBQVE7UUFDekIsT0FBTyxJQUFJLEtBQUs7UUFDaEIsT0FBUSxLQUFpQyxDQUFDLEtBQUssS0FBSyxRQUFRLENBQzdELENBQUM7QUFDSixDQUFDO0FBRUQ7Ozs7Ozs7O0dBUUc7QUFDSCxTQUFTLFdBQVcsQ0FBQyxPQUFlO0lBQ2xDLE1BQU0sU0FBUyxHQUNiLE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxJQUFJLE9BQU8sQ0FBQztJQUN4RSxPQUFPLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztBQUMxQixDQUFDO0FBRUQ7Ozs7R0FJRztBQUNILE1BQU0sVUFBVSxlQUFlLENBQUMsRUFDOUIsS0FBSyxHQUdOO0lBQ0MsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQztJQUMxQixNQUFNLE9BQU8sR0FBRyxPQUFPLEtBQUssQ0FBQyxPQUFPLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7SUFDOUUsc0VBQXNFO0lBQ3RFLHVFQUF1RTtJQUN2RSx3Q0FBd0M7SUFDeEMsTUFBTSxLQUFLLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQztJQUN6RCxNQUFNLFFBQVEsR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLEdBQUcsT0FBTyxPQUFPLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFFNUQsT0FBTyxDQUNMLGVBQ0UsU0FBUyxFQUFDLDRDQUE0QyxFQUN0RCxLQUFLLEVBQUU7WUFDTCxXQUFXLEVBQUUsbUJBQW1CO1lBQ2hDLFVBQVUsRUFBRSxtQkFBbUI7U0FDaEMsYUFFRCxLQUFDLFVBQVUsSUFDVCxRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUMsWUFBWSxFQUN0QixTQUFTLEVBQUMsbU5BQW1OLEdBQzdOLEVBRUQsS0FBSyxJQUFJLENBQ1IsZUFDRSxTQUFTLEVBQUMsMkNBQTJDLEVBQ3JELEtBQUssRUFBRTtvQkFDTCxLQUFLLEVBQUUsbUJBQW1CO29CQUMxQixZQUFZLEVBQUUsNkJBQTZCO2lCQUM1QyxhQUVELEtBQUMsV0FBVyxJQUFDLFNBQVMsRUFBQyxrQkFBa0IsR0FBRyxFQUM1QyxZQUNFLFNBQVMsRUFBQyxvQ0FBb0M7d0JBQzlDLDhEQUE4RDt3QkFDOUQsK0RBQStEO3dCQUMvRCw2REFBNkQ7d0JBQzdELHdDQUF3Qzt3QkFDeEMsS0FBSyxFQUFFLE9BQU8sWUFFYixLQUFLLEdBQ0osSUFDQSxDQUNQLEVBQ0QsY0FDRSxTQUFTLEVBQUMsaUZBQWlGLEVBQzNGLEtBQUssRUFBRTtvQkFDTCxLQUFLLEVBQUUsbUJBQW1CO29CQUMxQixVQUFVLEVBQUUsbUJBQW1CO2lCQUNoQyxZQUVBLEtBQUssR0FDRixJQUNGLENBQ1AsQ0FBQztBQUNKLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCc7XG5cbmltcG9ydCB7IEFsZXJ0Q2lyY2xlIH0gZnJvbSAnbHVjaWRlLXJlYWN0JztcbmltcG9ydCB7IENvcHlCdXR0b24gfSBmcm9tICcuLi9uZXctdHJhY2Utdmlld2VyL2NvbXBvbmVudHMvY29weS1idXR0b24nO1xuXG4vKipcbiAqIENoZWNrIHdoZXRoZXIgYHZhbHVlYCBsb29rcyBsaWtlIGEgc3RydWN0dXJlZCBlcnJvciBvYmplY3Qgd2l0aCBhIGBzdGFja2BcbiAqIGZpZWxkIHRoYXQgd2UgY2FuIHJlbmRlciBhcyBwcmUtZm9ybWF0dGVkIHRleHQuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBpc1N0cnVjdHVyZWRFcnJvcldpdGhTdGFjayhcbiAgdmFsdWU6IHVua25vd25cbik6IHZhbHVlIGlzIFJlY29yZDxzdHJpbmcsIHVua25vd24+ICYgeyBzdGFjazogc3RyaW5nIH0ge1xuICByZXR1cm4gKFxuICAgIHZhbHVlICE9IG51bGwgJiZcbiAgICB0eXBlb2YgdmFsdWUgPT09ICdvYmplY3QnICYmXG4gICAgJ3N0YWNrJyBpbiB2YWx1ZSAmJlxuICAgIHR5cGVvZiAodmFsdWUgYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pLnN0YWNrID09PSAnc3RyaW5nJ1xuICApO1xufVxuXG4vKipcbiAqIFB1bGwgYSBzaG9ydCwgc2luZ2xlLWxpbmUgdGl0bGUgb3V0IG9mIGFuIGVycm9yIG1lc3NhZ2UuXG4gKlxuICogV29ya2Zsb3cncyBzdHJ1Y3R1cmVkIGVycm9yIG1lc3NhZ2VzIGFyZSBtdWx0aS1saW5lIOKAlCB0aGUgZmlyc3QgbGluZSBpc1xuICogdGhlIGhlYWRsaW5lIChgRmFpbGVkIHRvIHNlcmlhbGl6ZSBzdGVwIHJldHVybiB2YWx1ZWApIGFuZCB0aGUgcmVzdCBhcmVcbiAqIGDilbDilrYgaGludDpgIC8gYOKVsOKWtiBkb2NzOmAgZnJhbWVkIGRldGFpbHMuIFRoZSBmdWxsIG1lc3NhZ2UgYmVsb25ncyBpbiB0aGVcbiAqIGJvZHkgb2YgdGhlIGVycm9yIGJsb2NrOyB0aGUgdGl0bGUgc2hvdWxkIGp1c3QgYmUgdGhlIGhlYWRsaW5lIHNvIHRoZVxuICogY2FyZCBzdGF5cyBzY2FubmFibGUuXG4gKi9cbmZ1bmN0aW9uIGRlcml2ZVRpdGxlKG1lc3NhZ2U6IHN0cmluZyk6IHN0cmluZyB7XG4gIGNvbnN0IGZpcnN0TGluZSA9XG4gICAgbWVzc2FnZS5zcGxpdCgnXFxuJykuZmluZCgobGluZSkgPT4gbGluZS50cmltKCkubGVuZ3RoID4gMCkgPz8gbWVzc2FnZTtcbiAgcmV0dXJuIGZpcnN0TGluZS50cmltKCk7XG59XG5cbi8qKlxuICogUmVuZGVycyBhbiBlcnJvciB3aXRoIGEgYHN0YWNrYCBmaWVsZCBhcyBhIHZpc3VhbGx5IGRpc3RpbmN0IGVycm9yIGJsb2NrLlxuICogU2hvd3MgdGhlIGVycm9yIG1lc3NhZ2Ugd2l0aCBhbiBhbGVydCBpY29uIGF0IHRoZSB0b3AsIHNlcGFyYXRlZCBmcm9tXG4gKiB0aGUgc3RhY2sgdHJhY2UgYmVsb3cuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBFcnJvclN0YWNrQmxvY2soe1xuICB2YWx1ZSxcbn06IHtcbiAgdmFsdWU6IFJlY29yZDxzdHJpbmcsIHVua25vd24+ICYgeyBzdGFjazogc3RyaW5nIH07XG59KSB7XG4gIGNvbnN0IHN0YWNrID0gdmFsdWUuc3RhY2s7XG4gIGNvbnN0IG1lc3NhZ2UgPSB0eXBlb2YgdmFsdWUubWVzc2FnZSA9PT0gJ3N0cmluZycgPyB2YWx1ZS5tZXNzYWdlIDogdW5kZWZpbmVkO1xuICAvLyBWOCdzIGBFcnJvci5zdGFja2AgYWxyZWFkeSBzdGFydHMgd2l0aCBgTmFtZTogbWVzc2FnZWAsIHNvIHdoZW4gdGhlXG4gIC8vIGJvZHkgc2hvd3MgdGhlIHN0YWNrIGl0IGluY2x1ZGVzIHRoZSBmdWxsIG11bHRpLWxpbmUgbWVzc2FnZSBhbnl3YXkuXG4gIC8vIFRoZSBoZWFkZXIganVzdCBuZWVkcyB0aGUgZmlyc3QgbGluZS5cbiAgY29uc3QgdGl0bGUgPSBtZXNzYWdlID8gZGVyaXZlVGl0bGUobWVzc2FnZSkgOiB1bmRlZmluZWQ7XG4gIGNvbnN0IGNvcHlUZXh0ID0gbWVzc2FnZSA/IGAke21lc3NhZ2V9XFxuXFxuJHtzdGFja31gIDogc3RhY2s7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjbGFzc05hbWU9XCJyZWxhdGl2ZSBvdmVyZmxvdy1oaWRkZW4gcm91bmRlZC1tZCBib3JkZXJcIlxuICAgICAgc3R5bGU9e3tcbiAgICAgICAgYm9yZGVyQ29sb3I6ICd2YXIoLS1kcy1yZWQtNDAwKScsXG4gICAgICAgIGJhY2tncm91bmQ6ICd2YXIoLS1kcy1yZWQtMTAwKScsXG4gICAgICB9fVxuICAgID5cbiAgICAgIDxDb3B5QnV0dG9uXG4gICAgICAgIGNvcHlUZXh0PXtjb3B5VGV4dH1cbiAgICAgICAgYXJpYUxhYmVsPVwiQ29weSBlcnJvclwiXG4gICAgICAgIGNsYXNzTmFtZT1cImFic29sdXRlIHJpZ2h0LTIgdG9wLTIgZmxleCBoLTYgdy02IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciByb3VuZGVkLW1kIGJvcmRlciBib3JkZXItcmVkLTQwMCBiZy1yZWQtMTAwIHAtMCB0ZXh0LXJlZC05MDAgdHJhbnNpdGlvbi10cmFuc2Zvcm0gdHJhbnNpdGlvbi1jb2xvcnMgZHVyYXRpb24tMTAwIGhvdmVyOmJnLXJlZC0yMDAgYWN0aXZlOnNjYWxlLTk1XCJcbiAgICAgIC8+XG5cbiAgICAgIHt0aXRsZSAmJiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzc05hbWU9XCJmbGV4IGl0ZW1zLWNlbnRlciBnYXAtMiBweC0zIHB5LTIuNSBwci0xMFwiXG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIGNvbG9yOiAndmFyKC0tZHMtcmVkLTkwMCknLFxuICAgICAgICAgICAgYm9yZGVyQm90dG9tOiAnMXB4IHNvbGlkIHZhcigtLWRzLXJlZC00MDApJyxcbiAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAgPEFsZXJ0Q2lyY2xlIGNsYXNzTmFtZT1cImgtNCB3LTQgc2hyaW5rLTBcIiAvPlxuICAgICAgICAgIDxwXG4gICAgICAgICAgICBjbGFzc05hbWU9XCJ0ZXh0LXhzIGZvbnQtc2VtaWJvbGQgbS0wIHRydW5jYXRlXCJcbiAgICAgICAgICAgIC8vIFRoZSBmdWxsIG11bHRpLWxpbmUgbWVzc2FnZSBpcyBpbiB0aGUgc3RhY2sgYm9keSBiZWxvdzsgdGhlXG4gICAgICAgICAgICAvLyBoZWFkZXIganVzdCBzaG93cyB0aGUgZmlyc3QgbGluZSwgc2luZ2xlLWxpbmUsIHdpdGggb3ZlcmZsb3dcbiAgICAgICAgICAgIC8vIGVsbGlwc2lzZWQgc28gYSBsb25nIHRpdGxlIGRvZXNuJ3QgcHVzaCB0aGUgY29weSBidXR0b24gb3JcbiAgICAgICAgICAgIC8vIHdyYXAgaW50byB0aGUgZnJhbWVkIGhpbnQvZG9jcyBsaW5lcy5cbiAgICAgICAgICAgIHRpdGxlPXttZXNzYWdlfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgICA8L3A+XG4gICAgICAgIDwvZGl2PlxuICAgICAgKX1cbiAgICAgIDxwcmVcbiAgICAgICAgY2xhc3NOYW1lPVwicHgtMyBweS0yLjUgdGV4dC14cyBmb250LW1vbm8gd2hpdGVzcGFjZS1wcmUtd3JhcCBicmVhay13b3JkcyBvdmVyZmxvdy1hdXRvIG0tMFwiXG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgY29sb3I6ICd2YXIoLS1kcy1yZWQtOTAwKScsXG4gICAgICAgICAgYmFja2dyb3VuZDogJ3ZhcigtLWRzLXJlZC0yMDApJyxcbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAge3N0YWNrfVxuICAgICAgPC9wcmU+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXJyb3Itc3RhY2stYmxvY2suanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy91aS9lcnJvci1zdGFjay1ibG9jay50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsWUFBWSxDQUFDOztBQUViLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDM0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBT3hFOzs7O0dBSUc7QUFDSCxNQUFNLFVBQVUsaUJBQWlCLENBQy9CLEtBQWM7SUFFZCxPQUFPLENBQ0wsS0FBSyxJQUFJLElBQUk7UUFDYixPQUFPLEtBQUssS0FBSyxRQUFRO1FBQ3pCLENBQUMsT0FBUSxLQUFpQyxDQUFDLE9BQU8sS0FBSyxRQUFRO1lBQzdELE9BQVEsS0FBaUMsQ0FBQyxLQUFLLEtBQUssUUFBUSxDQUFDLENBQ2hFLENBQUM7QUFDSixDQUFDO0FBRUQ7O0dBRUc7QUFDSCxNQUFNLFVBQVUsMEJBQTBCLENBQ3hDLEtBQWM7SUFFZCxPQUFPLENBQ0wsaUJBQWlCLENBQUMsS0FBSyxDQUFDO1FBQ3hCLE9BQVEsS0FBK0IsQ0FBQyxLQUFLLEtBQUssUUFBUSxDQUMzRCxDQUFDO0FBQ0osQ0FBQztBQUVEOzs7Ozs7OztHQVFHO0FBQ0gsU0FBUyxXQUFXLENBQUMsT0FBZTtJQUNsQyxNQUFNLFNBQVMsR0FDYixPQUFPLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsSUFBSSxPQUFPLENBQUM7SUFDeEUsT0FBTyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7QUFDMUIsQ0FBQztBQUVEOzs7O0dBSUc7QUFDSCxNQUFNLFVBQVUsZUFBZSxDQUFDLEVBQUUsS0FBSyxFQUFvQztJQUN6RSxNQUFNLEtBQUssR0FBRyxPQUFPLEtBQUssQ0FBQyxLQUFLLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7SUFDeEUsTUFBTSxPQUFPLEdBQUcsT0FBTyxLQUFLLENBQUMsT0FBTyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO0lBQzlFLE1BQU0sSUFBSSxHQUFHLEtBQUssSUFBSSxPQUFPLElBQUksRUFBRSxDQUFDO0lBQ3BDLHVFQUF1RTtJQUN2RSx5RUFBeUU7SUFDekUsMkNBQTJDO0lBQzNDLE1BQU0sS0FBSyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDakUsTUFBTSxRQUFRLEdBQ1osT0FBTyxJQUFJLEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDO1FBQzFDLENBQUMsQ0FBQyxHQUFHLE9BQU8sT0FBTyxLQUFLLEVBQUU7UUFDMUIsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUVYLE9BQU8sQ0FDTCxlQUNFLFNBQVMsRUFBQyw0Q0FBNEMsRUFDdEQsS0FBSyxFQUFFO1lBQ0wsV0FBVyxFQUFFLG1CQUFtQjtZQUNoQyxVQUFVLEVBQUUsbUJBQW1CO1NBQ2hDLGFBRUQsS0FBQyxVQUFVLElBQ1QsUUFBUSxFQUFFLFFBQVEsRUFDbEIsU0FBUyxFQUFDLFlBQVksRUFDdEIsU0FBUyxFQUFDLG1OQUFtTixHQUM3TixFQUVELEtBQUssSUFBSSxDQUNSLGVBQ0UsU0FBUyxFQUFDLDJDQUEyQyxFQUNyRCxLQUFLLEVBQUU7b0JBQ0wsS0FBSyxFQUFFLG1CQUFtQjtvQkFDMUIsWUFBWSxFQUFFLDZCQUE2QjtpQkFDNUMsYUFFRCxLQUFDLFdBQVcsSUFBQyxTQUFTLEVBQUMsa0JBQWtCLEdBQUcsRUFDNUMsWUFDRSxTQUFTLEVBQUMsb0NBQW9DO3dCQUM5QyxrRUFBa0U7d0JBQ2xFLG1EQUFtRDt3QkFDbkQsNkRBQTZEO3dCQUM3RCx3Q0FBd0M7d0JBQ3hDLEtBQUssRUFBRSxPQUFPLFlBRWIsS0FBSyxHQUNKLElBQ0EsQ0FDUCxFQUNBLElBQUksSUFBSSxDQUNQLGNBQ0UsU0FBUyxFQUFDLGlGQUFpRixFQUMzRixLQUFLLEVBQUU7b0JBQ0wsS0FBSyxFQUFFLG1CQUFtQjtvQkFDMUIsVUFBVSxFQUFFLG1CQUFtQjtpQkFDaEMsWUFFQSxJQUFJLEdBQ0QsQ0FDUCxJQUNHLENBQ1AsQ0FBQztBQUNKLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCc7XG5cbmltcG9ydCB7IEFsZXJ0Q2lyY2xlIH0gZnJvbSAnbHVjaWRlLXJlYWN0JztcbmltcG9ydCB7IENvcHlCdXR0b24gfSBmcm9tICcuLi9uZXctdHJhY2Utdmlld2VyL2NvbXBvbmVudHMvY29weS1idXR0b24nO1xuXG5leHBvcnQgdHlwZSBTdHJ1Y3R1cmVkRXJyb3JSZWNvcmQgPSBSZWNvcmQ8c3RyaW5nLCB1bmtub3duPiAmIHtcbiAgbWVzc2FnZT86IHN0cmluZztcbiAgc3RhY2s/OiBzdHJpbmc7XG59O1xuXG4vKipcbiAqIENoZWNrIHdoZXRoZXIgYHZhbHVlYCBsb29rcyBsaWtlIGEgc3RydWN0dXJlZCBlcnJvciBvYmplY3Qgd2UgY2FuIHJlbmRlclxuICogd2l0aCB0aGUgZXJyb3IgYmxvY2suIFNvbWUgcGVyc2lzdGVkIHdvcmtmbG93IGVycm9ycyBvbmx5IGluY2x1ZGUgYVxuICogYG1lc3NhZ2VgLCB3aGlsZSBydW50aW1lIGVycm9ycyB1c3VhbGx5IGFsc28gaW5jbHVkZSBgc3RhY2tgLlxuICovXG5leHBvcnQgZnVuY3Rpb24gaXNTdHJ1Y3R1cmVkRXJyb3IoXG4gIHZhbHVlOiB1bmtub3duXG4pOiB2YWx1ZSBpcyBTdHJ1Y3R1cmVkRXJyb3JSZWNvcmQge1xuICByZXR1cm4gKFxuICAgIHZhbHVlICE9IG51bGwgJiZcbiAgICB0eXBlb2YgdmFsdWUgPT09ICdvYmplY3QnICYmXG4gICAgKHR5cGVvZiAodmFsdWUgYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pLm1lc3NhZ2UgPT09ICdzdHJpbmcnIHx8XG4gICAgICB0eXBlb2YgKHZhbHVlIGFzIFJlY29yZDxzdHJpbmcsIHVua25vd24+KS5zdGFjayA9PT0gJ3N0cmluZycpXG4gICk7XG59XG5cbi8qKlxuICogTmFycm93ZXIgZ3VhcmQga2VwdCBmb3IgY2FsbGVycyB0aGF0IHNwZWNpZmljYWxseSBuZWVkIGEgc3RhY2sgdHJhY2UuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBpc1N0cnVjdHVyZWRFcnJvcldpdGhTdGFjayhcbiAgdmFsdWU6IHVua25vd25cbik6IHZhbHVlIGlzIFN0cnVjdHVyZWRFcnJvclJlY29yZCAmIHsgc3RhY2s6IHN0cmluZyB9IHtcbiAgcmV0dXJuIChcbiAgICBpc1N0cnVjdHVyZWRFcnJvcih2YWx1ZSkgJiZcbiAgICB0eXBlb2YgKHZhbHVlIGFzIFN0cnVjdHVyZWRFcnJvclJlY29yZCkuc3RhY2sgPT09ICdzdHJpbmcnXG4gICk7XG59XG5cbi8qKlxuICogUHVsbCBhIHNob3J0LCBzaW5nbGUtbGluZSB0aXRsZSBvdXQgb2YgYW4gZXJyb3IgbWVzc2FnZS5cbiAqXG4gKiBXb3JrZmxvdydzIHN0cnVjdHVyZWQgZXJyb3IgbWVzc2FnZXMgYXJlIG11bHRpLWxpbmUg4oCUIHRoZSBmaXJzdCBsaW5lIGlzXG4gKiB0aGUgaGVhZGxpbmUgKGBGYWlsZWQgdG8gc2VyaWFsaXplIHN0ZXAgcmV0dXJuIHZhbHVlYCkgYW5kIHRoZSByZXN0IGFyZVxuICogYOKVsOKWtiBoaW50OmAgLyBg4pWw4pa2IGRvY3M6YCBmcmFtZWQgZGV0YWlscy4gVGhlIGZ1bGwgbWVzc2FnZSBiZWxvbmdzIGluIHRoZVxuICogYm9keSBvZiB0aGUgZXJyb3IgYmxvY2s7IHRoZSB0aXRsZSBzaG91bGQganVzdCBiZSB0aGUgaGVhZGxpbmUgc28gdGhlXG4gKiBjYXJkIHN0YXlzIHNjYW5uYWJsZS5cbiAqL1xuZnVuY3Rpb24gZGVyaXZlVGl0bGUobWVzc2FnZTogc3RyaW5nKTogc3RyaW5nIHtcbiAgY29uc3QgZmlyc3RMaW5lID1cbiAgICBtZXNzYWdlLnNwbGl0KCdcXG4nKS5maW5kKChsaW5lKSA9PiBsaW5lLnRyaW0oKS5sZW5ndGggPiAwKSA/PyBtZXNzYWdlO1xuICByZXR1cm4gZmlyc3RMaW5lLnRyaW0oKTtcbn1cblxuLyoqXG4gKiBSZW5kZXJzIGEgc3RydWN0dXJlZCBlcnJvciBhcyBhIHZpc3VhbGx5IGRpc3RpbmN0IGVycm9yIGJsb2NrLiBTaG93cyB0aGVcbiAqIGVycm9yIG1lc3NhZ2Ugd2l0aCBhbiBhbGVydCBpY29uIGF0IHRoZSB0b3AsIHNlcGFyYXRlZCBmcm9tIHRoZSBzdGFjayB0cmFjZVxuICogb3IgZnVsbCBtZXNzYWdlIGJlbG93LlxuICovXG5leHBvcnQgZnVuY3Rpb24gRXJyb3JTdGFja0Jsb2NrKHsgdmFsdWUgfTogeyB2YWx1ZTogU3RydWN0dXJlZEVycm9yUmVjb3JkIH0pIHtcbiAgY29uc3Qgc3RhY2sgPSB0eXBlb2YgdmFsdWUuc3RhY2sgPT09ICdzdHJpbmcnID8gdmFsdWUuc3RhY2sgOiB1bmRlZmluZWQ7XG4gIGNvbnN0IG1lc3NhZ2UgPSB0eXBlb2YgdmFsdWUubWVzc2FnZSA9PT0gJ3N0cmluZycgPyB2YWx1ZS5tZXNzYWdlIDogdW5kZWZpbmVkO1xuICBjb25zdCBib2R5ID0gc3RhY2sgPz8gbWVzc2FnZSA/PyAnJztcbiAgLy8gVjgncyBgRXJyb3Iuc3RhY2tgIGFscmVhZHkgc3RhcnRzIHdpdGggYE5hbWU6IG1lc3NhZ2VgOyBtZXNzYWdlLW9ubHlcbiAgLy8gZXJyb3JzIHVzZSB0aGUgbWVzc2FnZSBhcyB0aGUgYm9keSBzbyBsb25nIHNpbmdsZS1saW5lIGZhaWx1cmVzIHJlbWFpblxuICAvLyByZWFkYWJsZSBldmVuIHdoZW4gdGhlIGhlYWRlciB0cnVuY2F0ZXMuXG4gIGNvbnN0IHRpdGxlID0gbWVzc2FnZSA/IGRlcml2ZVRpdGxlKG1lc3NhZ2UpIDogZGVyaXZlVGl0bGUoYm9keSk7XG4gIGNvbnN0IGNvcHlUZXh0ID1cbiAgICBtZXNzYWdlICYmIHN0YWNrICYmICFzdGFjay5pbmNsdWRlcyhtZXNzYWdlKVxuICAgICAgPyBgJHttZXNzYWdlfVxcblxcbiR7c3RhY2t9YFxuICAgICAgOiBib2R5O1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPVwicmVsYXRpdmUgb3ZlcmZsb3ctaGlkZGVuIHJvdW5kZWQtbWQgYm9yZGVyXCJcbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIGJvcmRlckNvbG9yOiAndmFyKC0tZHMtcmVkLTQwMCknLFxuICAgICAgICBiYWNrZ3JvdW5kOiAndmFyKC0tZHMtcmVkLTEwMCknLFxuICAgICAgfX1cbiAgICA+XG4gICAgICA8Q29weUJ1dHRvblxuICAgICAgICBjb3B5VGV4dD17Y29weVRleHR9XG4gICAgICAgIGFyaWFMYWJlbD1cIkNvcHkgZXJyb3JcIlxuICAgICAgICBjbGFzc05hbWU9XCJhYnNvbHV0ZSByaWdodC0yIHRvcC0yIGZsZXggaC02IHctNiBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgcm91bmRlZC1tZCBib3JkZXIgYm9yZGVyLXJlZC00MDAgYmctcmVkLTEwMCBwLTAgdGV4dC1yZWQtOTAwIHRyYW5zaXRpb24tdHJhbnNmb3JtIHRyYW5zaXRpb24tY29sb3JzIGR1cmF0aW9uLTEwMCBob3ZlcjpiZy1yZWQtMjAwIGFjdGl2ZTpzY2FsZS05NVwiXG4gICAgICAvPlxuXG4gICAgICB7dGl0bGUgJiYgKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPVwiZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTIgcHgtMyBweS0yLjUgcHItMTBcIlxuICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICBjb2xvcjogJ3ZhcigtLWRzLXJlZC05MDApJyxcbiAgICAgICAgICAgIGJvcmRlckJvdHRvbTogJzFweCBzb2xpZCB2YXIoLS1kcy1yZWQtNDAwKScsXG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxBbGVydENpcmNsZSBjbGFzc05hbWU9XCJoLTQgdy00IHNocmluay0wXCIgLz5cbiAgICAgICAgICA8cFxuICAgICAgICAgICAgY2xhc3NOYW1lPVwidGV4dC14cyBmb250LXNlbWlib2xkIG0tMCB0cnVuY2F0ZVwiXG4gICAgICAgICAgICAvLyBUaGUgZnVsbCBtZXNzYWdlIG9yIHN0YWNrIGlzIGluIHRoZSBib2R5IGJlbG93OyB0aGUgaGVhZGVyIGp1c3RcbiAgICAgICAgICAgIC8vIHNob3dzIHRoZSBmaXJzdCBsaW5lLCBzaW5nbGUtbGluZSwgd2l0aCBvdmVyZmxvd1xuICAgICAgICAgICAgLy8gZWxsaXBzaXNlZCBzbyBhIGxvbmcgdGl0bGUgZG9lc24ndCBwdXNoIHRoZSBjb3B5IGJ1dHRvbiBvclxuICAgICAgICAgICAgLy8gd3JhcCBpbnRvIHRoZSBmcmFtZWQgaGludC9kb2NzIGxpbmVzLlxuICAgICAgICAgICAgdGl0bGU9e21lc3NhZ2V9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvcD5cbiAgICAgICAgPC9kaXY+XG4gICAgICApfVxuICAgICAge2JvZHkgJiYgKFxuICAgICAgICA8cHJlXG4gICAgICAgICAgY2xhc3NOYW1lPVwicHgtMyBweS0yLjUgdGV4dC14cyBmb250LW1vbm8gd2hpdGVzcGFjZS1wcmUtd3JhcCBicmVhay13b3JkcyBvdmVyZmxvdy1hdXRvIG0tMFwiXG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIGNvbG9yOiAndmFyKC0tZHMtcmVkLTkwMCknLFxuICAgICAgICAgICAgYmFja2dyb3VuZDogJ3ZhcigtLWRzLXJlZC0yMDApJyxcbiAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAge2JvZHl9XG4gICAgICAgIDwvcHJlPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workflow/web-shared",
   "description": "Shared components for Workflow Observability UI",
-  "version": "5.0.0-beta.12",
+  "version": "5.0.0-beta.13",
   "private": false,
   "files": [
     "dist",
@@ -53,7 +53,7 @@
     "streamdown": "2.3.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "@workflow/core": "5.0.0-beta.12",
+    "@workflow/core": "5.0.0-beta.13",
     "@workflow/utils": "5.0.0-beta.3",
     "@workflow/world": "5.0.0-beta.7"
   },

package/src/components/event-list-view.tsx

@@ -10,20 +10,21 @@ import type {
 } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
-import { isEncryptedMarker } from '../lib/hydration';
 import {
-  parseExactWorkflowSearchId,
-  looksLikeWorkflowIdSearchInput,
   type ExactIdSearchResult,
   type ExactWorkflowSearchIdKind,
+  looksLikeWorkflowIdSearchInput,
+  parseExactWorkflowSearchId,
 } from '../lib/exact-event-search-id';
-import { DecryptButton } from './ui/decrypt-button';
-import { formatDuration } from '../lib/utils';
+import { isEncryptedMarker } from '../lib/hydration';
 import { useToast } from '../lib/toast';
+import { formatDuration } from '../lib/utils';
 import { DataInspector, DecryptClickContext } from './ui/data-inspector';
+import { DecryptButton } from './ui/decrypt-button';
 import {
   ErrorStackBlock,
-  isStructuredErrorWithStack,
+  isStructuredError,
+  type StructuredErrorRecord,
 } from './ui/error-stack-block';
 import { LoadMoreButton } from './ui/load-more-button';
 import { MenuDropdown } from './ui/menu-dropdown';
@@ -519,20 +520,20 @@ function deepParseJson(value: unknown): unknown {
 }
 
 /**
- * Extracts a structured error with a stack trace from event data, if present.
+ * Extracts a structured error from event data, if present.
  * Returns the error object to render with ErrorStackBlock, or null if not applicable.
  */
 function extractStructuredError(
   data: unknown,
   eventType?: string
-): (Record<string, unknown> & { stack: string }) | null {
+): StructuredErrorRecord | null {
   if (!eventType || !ERROR_EVENT_TYPES.has(eventType)) return null;
   if (data == null || typeof data !== 'object') return null;
   const record = data as Record<string, unknown>;
   // Check the nested `error` field first (the StructuredError)
-  if (isStructuredErrorWithStack(record.error)) return record.error;
-  // Some error formats put the stack at the top level of eventData
-  if (isStructuredErrorWithStack(record)) return record;
+  if (isStructuredError(record.error)) return record.error;
+  // Some error formats put the message/stack at the top level of eventData.
+  if (isStructuredError(record)) return record;
   return null;
 }
 

package/src/components/new-trace-viewer/components/event-list.tsx

@@ -1,7 +1,7 @@
 import { Circle } from 'lucide-react';
 import { useRef } from 'react';
 import { cn } from '../../../lib/utils';
-import type { Span } from '../../trace-viewer/types';
+import type { Span } from '../types';
 import { formatDuration } from '../../trace-viewer/util/timing';
 import {
   SleepIcon,
@@ -53,8 +53,9 @@ const EventRow = ({
   onSelectSpan: (spanId: string) => void;
 }) => {
   const durationMs = getSpanDurationMs(span);
-  const isErrored =
-    (span.attributes.data as Record<string, unknown>).status === 'failed';
+  const workflowStatus = (span.attributes.data as Record<string, unknown>)
+    ?.status as string | undefined;
+  const isErrored = span.status.code === 2 || workflowStatus === 'failed';
   const { icon: Icon, className: tagClassName } = getEventStyle(
     span.resource,
     isErrored

package/src/components/new-trace-viewer/components/timeline.tsx

@@ -4,7 +4,7 @@ import { ArrowLeft, ArrowRight } from 'lucide-react';
 import type { CSSProperties, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
-import type { Span } from '../../trace-viewer/types';
+import type { Span } from '../types';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
 import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
 import type { Segment, SegmentStatus, TimeMarker } from '../utils';
@@ -234,7 +234,7 @@ function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
 
         return (
           <div
-            key={`${seg.status}-${i}`}
+            key={i}
             className={cn(
               'absolute h-full rounded-[0.25rem]',
               SEGMENT_CLASSES[seg.status]
@@ -421,7 +421,7 @@ export function TimelineHeader({
       <div className="relative h-full flex-1">
         {markers.map((m) => (
           <span
-            key={`${m.position}-${m.label}`}
+            key={String(m.value)}
             className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
             style={{ left: `${m.position * 100}%` }}
           >
@@ -506,7 +506,7 @@ export function Timeline({
           // Skip the "0s" origin marker since the left edge already implies it.
           Math.abs(marker.value) > 0.000001 ? (
             <div
-              key={`${marker.position}-${marker.label}`}
+              key={String(marker.value)}
               className="absolute top-0 bottom-0 w-px bg-gray-alpha-300"
               style={{ left: `${marker.position * 100}%` }}
             />

package/src/components/new-trace-viewer/context.tsx

@@ -9,7 +9,7 @@ import {
   useMemo,
   useState,
 } from 'react';
-import type { Span } from '../trace-viewer/types';
+import type { Span } from './types';
 
 interface ActiveSpanContextValue {
   activeSpanId: string | null;

package/src/components/new-trace-viewer/icons.tsx

@@ -3,7 +3,7 @@ const WorkflowIcon = () => {
     <svg
       data-testid="geist-icon"
       height="16"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
       style={{ color: 'currentColor' }}
       viewBox="0 0 16 16"
       width="16"
@@ -21,7 +21,7 @@ const WebhookIcon = () => {
     <svg
       data-testid="geist-icon"
       height="16"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
       viewBox="0 0 16 16"
       width="16"
       style={{ color: 'currentColor' }}

package/src/components/new-trace-viewer/search.ts

@@ -1,4 +1,4 @@
-import type { Span } from '../trace-viewer/types';
+import type { Span } from './types';
 
 const ATTR_FILTER_REGEX = /(?:^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
 

package/src/components/new-trace-viewer/trace-viewer.tsx

@@ -26,8 +26,8 @@ import {
   EntityDetailPanel,
   type SelectedSpanInfo,
 } from '../sidebar/entity-detail-panel';
-import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
-import type { Trace } from '../trace-viewer/types';
+import { useSidebarData } from '../sidebar/sidebar-data-context';
+import type { TraceWithMeta } from './types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 import { IconButton } from '../ui/icon-button';
 import { Spinner } from '../ui/spinner';
@@ -46,12 +46,11 @@ import {
   TooltipTrigger,
 } from '../ui/tooltip';
 import { ActiveSpanProvider, useActiveSpan } from './context';
-import { DetailPanel } from './detail-panel';
 import { searchSpans } from './search';
 import { computeRootBounds, computeTimeMarkers } from './utils';
 
 interface NewTraceViewerProps {
-  trace: Trace;
+  trace: TraceWithMeta;
   onLoadMore?: () => void | Promise<void>;
   hasMore?: boolean;
   isLoadingMore?: boolean;
@@ -141,10 +140,10 @@ function useAnimatedViewport(initial: Viewport) {
 
 function useSelectedSpanInfo(): SelectedSpanInfo | null {
   const { activeSpan } = useActiveSpan();
-  const sidebar = useSidebarDataOptional();
+  const sidebar = useSidebarData();
 
   return useMemo(() => {
-    if (!activeSpan || !sidebar) return null;
+    if (!activeSpan) return null;
 
     const correlationId = activeSpan.spanId;
     const rawEvents = correlationId
@@ -193,7 +192,7 @@ function NewTraceViewerContent({
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
     useActiveSpan();
 
-  const sidebar = useSidebarDataOptional();
+  const sidebar = useSidebarData();
   const selectedSpan = useSelectedSpanInfo();
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -674,7 +673,7 @@ function NewTraceViewerContent({
       </div>
 
       {/* Detail panel */}
-      {activeSpan && sidebar ? (
+      {activeSpan ? (
         <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto">
           {/* Panel header */}
           <div className="flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3">
@@ -750,12 +749,6 @@ function NewTraceViewerContent({
             </ErrorBoundary>
           </div>
         </aside>
-      ) : activeSpan ? (
-        <DetailPanel
-          span={activeSpan}
-          rootStart={root.startTime}
-          onClose={clearActiveSpan}
-        />
       ) : null}
     </div>
   );

package/src/components/new-trace-viewer/types.ts

@@ -0,0 +1,2 @@
+export type { Span, SpanEvent, Trace } from '../trace-viewer/types';
+export type { TraceWithMeta } from '../../lib/trace-builder';

package/src/components/new-trace-viewer/utils.ts

@@ -1,4 +1,4 @@
-import type { Span, SpanEvent } from '../trace-viewer/types';
+import type { Span, SpanEvent } from './types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 
 // ---------------------------------------------------------------------------

package/src/components/sidebar/attribute-panel.tsx

@@ -8,20 +8,17 @@ import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
+import { CopyButton } from '../new-trace-viewer/components/copy-button';
+import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
 import {
   DecryptClickContext,
   RunClickContext,
   StreamClickContext,
 } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
-import {
-  ErrorStackBlock,
-  isStructuredErrorWithStack,
-} from '../ui/error-stack-block';
+import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
 import { TimestampTooltip } from '../ui/timestamp-tooltip';
-import { CopyButton } from '../new-trace-viewer/components/copy-button';
-import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
 import { ConversationView } from './conversation-view';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -548,9 +545,9 @@ const attributeToDisplayFn: Record<
     if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     if (!hasDisplayContent(value)) return null;
 
-    // If the error object has a `stack` field, render it as readable
-    // pre-formatted text. Otherwise fall back to the raw JSON viewer.
-    if (isStructuredErrorWithStack(value)) {
+    // Structured workflow errors may be persisted as either `{ message }` or
+    // `{ message, stack }`. Render both with the dedicated error block.
+    if (isStructuredError(value)) {
       return (
         <DetailCard summary="Error" defaultOpen>
           <ErrorStackBlock value={value} />

package/src/components/sidebar/events-list.tsx

@@ -4,10 +4,7 @@ import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
 import { ErrorCard } from '../ui/error-card';
-import {
-  ErrorStackBlock,
-  isStructuredErrorWithStack,
-} from '../ui/error-stack-block';
+import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -196,8 +193,8 @@ function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
 }
 
 /**
- * Renders event data, using ErrorStackBlock for error events that contain
- * a structured error with a stack trace, and CopyableDataBlock otherwise.
+ * Renders event data, using ErrorStackBlock for error events that contain a
+ * structured error, and CopyableDataBlock otherwise.
  */
 function EventDataBlock({
   eventType,
@@ -239,12 +236,12 @@ function EventDataBlock({
     const record = data as Record<string, unknown>;
 
     // Check the nested `error` field first (the StructuredError)
-    if (isStructuredErrorWithStack(record.error)) {
+    if (isStructuredError(record.error)) {
       return <ErrorStackBlock value={record.error} />;
     }
 
-    // Some error formats put the stack at the top level of eventData
-    if (isStructuredErrorWithStack(record)) {
+    // Some error formats put the message/stack at the top level of eventData.
+    if (isStructuredError(record)) {
       return <ErrorStackBlock value={record} />;
     }
   }

package/src/components/trace-viewer-new.tsx

@@ -8,7 +8,6 @@ import {
   type SidebarDataContextValue,
   SidebarDataProvider,
 } from './sidebar/sidebar-data-context';
-import type { Trace } from './trace-viewer/types';
 
 const NewTraceViewer = ({
   run,
@@ -27,14 +26,13 @@ const NewTraceViewer = ({
   isLoadingMore?: boolean;
   loading?: boolean;
 }) => {
-  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
+  const trace: TraceWithMeta | undefined = useMemo(() => {
     if (!run?.runId) {
       return undefined;
     }
     return buildTrace(run, events, new Date());
     // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep
   }, [run, events]);
-  const trace = traceWithMeta;
 
   if (!trace || (loading && events.length === 0)) {
     return <TraceViewerSkeleton />;
@@ -44,7 +42,7 @@ const NewTraceViewer = ({
     <SidebarDataProvider value={sidebarData}>
       <div className="relative w-full h-full flex">
         <NewTraceViewerComponent
-          trace={trace as Trace}
+          trace={trace}
           onLoadMore={onLoadMore}
           hasMore={hasMore}
           isLoadingMore={isLoadingMore}

package/src/components/ui/error-stack-block.tsx

@@ -3,18 +3,36 @@
 import { AlertCircle } from 'lucide-react';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
 
+export type StructuredErrorRecord = Record<string, unknown> & {
+  message?: string;
+  stack?: string;
+};
+
 /**
- * Check whether `value` looks like a structured error object with a `stack`
- * field that we can render as pre-formatted text.
+ * Check whether `value` looks like a structured error object we can render
+ * with the error block. Some persisted workflow errors only include a
+ * `message`, while runtime errors usually also include `stack`.
  */
-export function isStructuredErrorWithStack(
+export function isStructuredError(
   value: unknown
-): value is Record<string, unknown> & { stack: string } {
+): value is StructuredErrorRecord {
   return (
     value != null &&
     typeof value === 'object' &&
-    'stack' in value &&
-    typeof (value as Record<string, unknown>).stack === 'string'
+    (typeof (value as Record<string, unknown>).message === 'string' ||
+      typeof (value as Record<string, unknown>).stack === 'string')
+  );
+}
+
+/**
+ * Narrower guard kept for callers that specifically need a stack trace.
+ */
+export function isStructuredErrorWithStack(
+  value: unknown
+): value is StructuredErrorRecord & { stack: string } {
+  return (
+    isStructuredError(value) &&
+    typeof (value as StructuredErrorRecord).stack === 'string'
   );
 }
 
@@ -34,22 +52,22 @@ function deriveTitle(message: string): string {
 }
 
 /**
- * Renders an error with a `stack` field as a visually distinct error block.
- * Shows the error message with an alert icon at the top, separated from
- * the stack trace below.
+ * Renders a structured error as a visually distinct error block. Shows the
+ * error message with an alert icon at the top, separated from the stack trace
+ * or full message below.
  */
-export function ErrorStackBlock({
-  value,
-}: {
-  value: Record<string, unknown> & { stack: string };
-}) {
-  const stack = value.stack;
+export function ErrorStackBlock({ value }: { value: StructuredErrorRecord }) {
+  const stack = typeof value.stack === 'string' ? value.stack : undefined;
   const message = typeof value.message === 'string' ? value.message : undefined;
-  // V8's `Error.stack` already starts with `Name: message`, so when the
-  // body shows the stack it includes the full multi-line message anyway.
-  // The header just needs the first line.
-  const title = message ? deriveTitle(message) : undefined;
-  const copyText = message ? `${message}\n\n${stack}` : stack;
+  const body = stack ?? message ?? '';
+  // V8's `Error.stack` already starts with `Name: message`; message-only
+  // errors use the message as the body so long single-line failures remain
+  // readable even when the header truncates.
+  const title = message ? deriveTitle(message) : deriveTitle(body);
+  const copyText =
+    message && stack && !stack.includes(message)
+      ? `${message}\n\n${stack}`
+      : body;
 
   return (
     <div
@@ -76,8 +94,8 @@ export function ErrorStackBlock({
           <AlertCircle className="h-4 w-4 shrink-0" />
           <p
             className="text-xs font-semibold m-0 truncate"
-            // The full multi-line message is in the stack body below; the
-            // header just shows the first line, single-line, with overflow
+            // The full message or stack is in the body below; the header just
+            // shows the first line, single-line, with overflow
             // ellipsised so a long title doesn't push the copy button or
             // wrap into the framed hint/docs lines.
             title={message}
@@ -86,15 +104,17 @@ export function ErrorStackBlock({
           </p>
         </div>
       )}
-      <pre
-        className="px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
-        style={{
-          color: 'var(--ds-red-900)',
-          background: 'var(--ds-red-200)',
-        }}
-      >
-        {stack}
-      </pre>
+      {body && (
+        <pre
+          className="px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
+          style={{
+            color: 'var(--ds-red-900)',
+            background: 'var(--ds-red-200)',
+          }}
+        >
+          {body}
+        </pre>
+      )}
     </div>
   );
 }

package/dist/components/new-trace-viewer/detail-panel.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Span } from '../trace-viewer/types';
-interface DetailPanelProps {
-    span: Span;
-    rootStart: number;
-    onClose: () => void;
-}
-export declare function DetailPanel({ span, rootStart, onClose, }: DetailPanelProps): ReactNode;
-export {};
-//# sourceMappingURL=detail-panel.d.ts.map

package/dist/components/new-trace-viewer/detail-panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/detail-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAKlD,UAAU,gBAAgB;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,GAAG,SAAS,CAmC9B"}

package/dist/components/new-trace-viewer/detail-panel.js

@@ -1,13 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from 'lucide-react';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
-import { IconButton } from '../ui/icon-button';
-import { getSpanDurationMs } from './utils';
-export function DetailPanel({ span, rootStart, onClose, }) {
-    const startMs = getHighResInMs(span.startTime);
-    const durationMs = getSpanDurationMs(span);
-    const offsetMs = startMs - rootStart;
-    return (_jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [_jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [_jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), _jsx(IconButton, { "aria-label": "Close span details", onClick: onClose, children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [_jsx("dt", { className: "text-gray-900", children: "Resource" }), _jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), _jsx("dt", { className: "text-gray-900", children: "Duration" }), _jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), _jsx("dt", { className: "text-gray-900", children: "Offset" }), _jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), _jsx("dt", { className: "text-gray-900", children: "Status" }), _jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? 'Error' : 'OK' })] }) })] }));
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV0YWlsLXBhbmVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3LXRyYWNlLXZpZXdlci9kZXRhaWwtcGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFlBQVksQ0FBQzs7QUFFYixPQUFPLEVBQUUsQ0FBQyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBR2pDLE9BQU8sRUFBRSxjQUFjLEVBQUUsY0FBYyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDN0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFNBQVMsQ0FBQztBQVE1QyxNQUFNLFVBQVUsV0FBVyxDQUFDLEVBQzFCLElBQUksRUFDSixTQUFTLEVBQ1QsT0FBTyxHQUNVO0lBQ2pCLE1BQU0sT0FBTyxHQUFHLGNBQWMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDL0MsTUFBTSxVQUFVLEdBQUcsaUJBQWlCLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDM0MsTUFBTSxRQUFRLEdBQUcsT0FBTyxHQUFHLFNBQVMsQ0FBQztJQUVyQyxPQUFPLENBQ0wsaUJBQU8sU0FBUyxFQUFDLGlFQUFpRSxhQUNoRixlQUFLLFNBQVMsRUFBQyx1RUFBdUUsYUFDcEYsZUFBTSxTQUFTLEVBQUMsNkNBQTZDLFlBQzFELElBQUksQ0FBQyxJQUFJLEdBQ0wsRUFDUCxLQUFDLFVBQVUsa0JBQVksb0JBQW9CLEVBQUMsT0FBTyxFQUFFLE9BQU8sWUFDMUQsS0FBQyxDQUFDLElBQUMsU0FBUyxFQUFDLFNBQVMsR0FBRyxHQUNkLElBQ1QsRUFDTixjQUFLLFNBQVMsRUFBQywrQkFBK0IsWUFDNUMsY0FBSSxTQUFTLEVBQUMscURBQXFELGFBQ2pFLGFBQUksU0FBUyxFQUFDLGVBQWUseUJBQWMsRUFDM0MsYUFBSSxTQUFTLEVBQUMsMEJBQTBCLFlBQUUsSUFBSSxDQUFDLFFBQVEsR0FBTSxFQUM3RCxhQUFJLFNBQVMsRUFBQyxlQUFlLHlCQUFjLEVBQzNDLGFBQUksU0FBUyxFQUFDLHVDQUF1QyxZQUNsRCxjQUFjLENBQUMsVUFBVSxDQUFDLEdBQ3hCLEVBQ0wsYUFBSSxTQUFTLEVBQUMsZUFBZSx1QkFBWSxFQUN6QyxjQUFJLFNBQVMsRUFBQyx1Q0FBdUMsa0JBQ2pELGNBQWMsQ0FBQyxRQUFRLENBQUMsSUFDdkIsRUFDTCxhQUFJLFNBQVMsRUFBQyxlQUFlLHVCQUFZLEVBQ3pDLGFBQUksU0FBUyxFQUFDLDBCQUEwQixZQUNyQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxHQUNyQyxJQUNGLEdBQ0QsSUFDQSxDQUNULENBQUM7QUFDSixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xuXG5pbXBvcnQgeyBYIH0gZnJvbSAnbHVjaWRlLXJlYWN0JztcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUgeyBTcGFuIH0gZnJvbSAnLi4vdHJhY2Utdmlld2VyL3R5cGVzJztcbmltcG9ydCB7IGZvcm1hdER1cmF0aW9uLCBnZXRIaWdoUmVzSW5NcyB9IGZyb20gJy4uL3RyYWNlLXZpZXdlci91dGlsL3RpbWluZyc7XG5pbXBvcnQgeyBJY29uQnV0dG9uIH0gZnJvbSAnLi4vdWkvaWNvbi1idXR0b24nO1xuaW1wb3J0IHsgZ2V0U3BhbkR1cmF0aW9uTXMgfSBmcm9tICcuL3V0aWxzJztcblxuaW50ZXJmYWNlIERldGFpbFBhbmVsUHJvcHMge1xuICBzcGFuOiBTcGFuO1xuICByb290U3RhcnQ6IG51bWJlcjtcbiAgb25DbG9zZTogKCkgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIERldGFpbFBhbmVsKHtcbiAgc3BhbixcbiAgcm9vdFN0YXJ0LFxuICBvbkNsb3NlLFxufTogRGV0YWlsUGFuZWxQcm9wcyk6IFJlYWN0Tm9kZSB7XG4gIGNvbnN0IHN0YXJ0TXMgPSBnZXRIaWdoUmVzSW5NcyhzcGFuLnN0YXJ0VGltZSk7XG4gIGNvbnN0IGR1cmF0aW9uTXMgPSBnZXRTcGFuRHVyYXRpb25NcyhzcGFuKTtcbiAgY29uc3Qgb2Zmc2V0TXMgPSBzdGFydE1zIC0gcm9vdFN0YXJ0O1xuXG4gIHJldHVybiAoXG4gICAgPGFzaWRlIGNsYXNzTmFtZT1cImdyaWQgaC1mdWxsIG1heC1oLWZ1bGwgZ3JpZC1yb3dzLVsyLjVyZW1fMWZyXSBiZy1iYWNrZ3JvdW5kLTIwMFwiPlxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWJldHdlZW4gcHgtMyBib3JkZXItYiBib3JkZXItZ3JheS1hbHBoYS00MDBcIj5cbiAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwidGV4dC1zbSBmb250LW1lZGl1bSB0ZXh0LWdyYXktMTAwMCB0cnVuY2F0ZVwiPlxuICAgICAgICAgIHtzcGFuLm5hbWV9XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPEljb25CdXR0b24gYXJpYS1sYWJlbD1cIkNsb3NlIHNwYW4gZGV0YWlsc1wiIG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgIDxYIGNsYXNzTmFtZT1cInctNCBoLTRcIiAvPlxuICAgICAgICA8L0ljb25CdXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwib3ZlcmZsb3cteS1hdXRvIHAtMyBzcGFjZS15LTNcIj5cbiAgICAgICAgPGRsIGNsYXNzTmFtZT1cImdyaWQgZ3JpZC1jb2xzLVthdXRvXzFmcl0gZ2FwLXgtMyBnYXAteS0xLjUgdGV4dC1zbVwiPlxuICAgICAgICAgIDxkdCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktOTAwXCI+UmVzb3VyY2U8L2R0PlxuICAgICAgICAgIDxkZCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktMTAwMCBmb250LW1vbm9cIj57c3Bhbi5yZXNvdXJjZX08L2RkPlxuICAgICAgICAgIDxkdCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktOTAwXCI+RHVyYXRpb248L2R0PlxuICAgICAgICAgIDxkZCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktMTAwMCB0YWJ1bGFyLW51bXMgZm9udC1tb25vXCI+XG4gICAgICAgICAgICB7Zm9ybWF0RHVyYXRpb24oZHVyYXRpb25Ncyl9XG4gICAgICAgICAgPC9kZD5cbiAgICAgICAgICA8ZHQgY2xhc3NOYW1lPVwidGV4dC1ncmF5LTkwMFwiPk9mZnNldDwvZHQ+XG4gICAgICAgICAgPGRkIGNsYXNzTmFtZT1cInRleHQtZ3JheS0xMDAwIHRhYnVsYXItbnVtcyBmb250LW1vbm9cIj5cbiAgICAgICAgICAgICt7Zm9ybWF0RHVyYXRpb24ob2Zmc2V0TXMpfVxuICAgICAgICAgIDwvZGQ+XG4gICAgICAgICAgPGR0IGNsYXNzTmFtZT1cInRleHQtZ3JheS05MDBcIj5TdGF0dXM8L2R0PlxuICAgICAgICAgIDxkZCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktMTAwMCBmb250LW1vbm9cIj5cbiAgICAgICAgICAgIHtzcGFuLnN0YXR1cy5jb2RlID09PSAyID8gJ0Vycm9yJyA6ICdPSyd9XG4gICAgICAgICAgPC9kZD5cbiAgICAgICAgPC9kbD5cbiAgICAgIDwvZGl2PlxuICAgIDwvYXNpZGU+XG4gICk7XG59XG4iXX0=

package/dist/components/new-trace-viewer/util/constants.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=constants.d.ts.map

package/dist/components/new-trace-viewer/util/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/util/constants.ts"],"names":[],"mappings":""}