@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41

package/src/components/ui/error-card.tsx

@@ -2,7 +2,7 @@
 
 import { AlertCircle, ChevronDown } from 'lucide-react';
 import { useState } from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 interface ErrorCardProps {
   /** Title shown in the header */
@@ -41,10 +41,10 @@ export function ErrorCard({
         >
           <div className="flex items-center gap-2">
             <AlertCircle className="h-4 w-4 shrink-0" />
-            <span className="font-medium text-sm">{title}</span>
+            <span className="font-medium text-label-14">{title}</span>
           </div>
           <div className="flex items-center gap-1.5 opacity-70">
-            <span className="text-xs">Click to show details</span>
+            <span className="text-label-12">Click to show details</span>
             <ChevronDown
               className={cn(
                 'h-4 w-4 transition-transform duration-200',
@@ -60,7 +60,7 @@ export function ErrorCard({
             style={{ borderTop: '1px solid var(--ds-red-400)' }}
           >
             <pre
-              className="mt-3 p-3 rounded-md text-xs font-mono whitespace-pre-wrap break-words overflow-auto"
+              className="mt-3 p-3 rounded-md text-label-12-mono whitespace-pre-wrap break-words overflow-auto"
               style={{
                 background: 'var(--ds-red-200)',
                 color: 'var(--ds-red-900)',

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

@@ -1,37 +1,73 @@
 'use client';
 
-import { AlertCircle, Copy } from 'lucide-react';
-import { useToast } from '../../lib/toast';
+import { AlertCircle } from 'lucide-react';
+import { CopyButton } from '../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'
   );
 }
 
 /**
- * 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.
+ * Pull a short, single-line title out of an error message.
+ *
+ * Workflow's structured error messages are multi-line — the first line is
+ * the headline (`Failed to serialize step return value`) and the rest are
+ * `╰▶ hint:` / `╰▶ docs:` framed details. The full message belongs in the
+ * body of the error block; the title should just be the headline so the
+ * card stays scannable.
  */
-export function ErrorStackBlock({
-  value,
-}: {
-  value: Record<string, unknown> & { stack: string };
-}) {
-  const toast = useToast();
-  const stack = value.stack;
+function deriveTitle(message: string): string {
+  const firstLine =
+    message.split('\n').find((line) => line.trim().length > 0) ?? message;
+  return firstLine.trim();
+}
+
+/**
+ * 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: StructuredErrorRecord }) {
+  const stack = typeof value.stack === 'string' ? value.stack : undefined;
   const message = typeof value.message === 'string' ? value.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
@@ -41,51 +77,44 @@ export function ErrorStackBlock({
         background: 'var(--ds-red-100)',
       }}
     >
-      <button
-        type="button"
-        aria-label="Copy error"
-        title="Copy"
-        className="!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border transition-transform transition-colors duration-100 hover:!bg-[var(--ds-red-200)] active:!scale-95"
-        style={{
-          borderColor: 'var(--ds-red-400)',
-          background: 'var(--ds-red-100)',
-          color: 'var(--ds-red-900)',
-        }}
-        onClick={() => {
-          navigator.clipboard
-            .writeText(copyText)
-            .then(() => {
-              toast.success('Copied to clipboard');
-            })
-            .catch(() => {
-              toast.error('Failed to copy');
-            });
-        }}
-      >
-        <Copy size={12} />
-      </button>
+      <CopyButton
+        copyText={copyText}
+        ariaLabel="Copy error"
+        className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-md border border-red-400 bg-red-100 p-0 text-red-900 transition-transform transition-colors duration-100 hover:bg-red-200 active:scale-95"
+      />
 
-      {message && (
+      {title && (
         <div
-          className="flex items-start gap-2 px-3 py-2.5 pr-10"
+          className="flex items-center gap-2 px-3 py-2.5 pr-10"
           style={{
             color: 'var(--ds-red-900)',
             borderBottom: '1px solid var(--ds-red-400)',
           }}
         >
-          <AlertCircle className="h-4 w-4 shrink-0" style={{ marginTop: 1 }} />
-          <p className="text-xs font-semibold m-0 break-words">{message}</p>
+          <AlertCircle className="h-4 w-4 shrink-0" />
+          <p
+            className="text-label-12 font-semibold m-0 truncate"
+            // 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}
+          >
+            {title}
+          </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-label-12-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/src/components/ui/icon-button.tsx

@@ -0,0 +1,53 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/cn';
+
+const iconButtonVariants = cva(
+  [
+    'm-0 inline-flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent p-0 align-baseline font-inherit no-underline [background:none] [-webkit-appearance:none] [-webkit-tap-highlight-color:transparent]',
+    'transition-colors duration-150 ease-in-out',
+    'enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-40',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] focus-visible:outline-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        tertiary:
+          'text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000',
+        muted:
+          'text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000',
+      },
+      size: {
+        tiny: 'h-6 w-6 rounded-[4px] [&_svg]:h-4 [&_svg]:w-4',
+        small: 'h-8 w-8 rounded-md [&_svg]:h-4 [&_svg]:w-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'tertiary',
+      size: 'tiny',
+    },
+  }
+);
+
+export type IconButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'type'
+> &
+  VariantProps<typeof iconButtonVariants> & {
+    'aria-label': string;
+    type?: 'button' | 'submit' | 'reset';
+  };
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ className, variant, size, type = 'button', ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(iconButtonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+);
+IconButton.displayName = 'IconButton';
+
+export { iconButtonVariants };

package/src/components/ui/kbd.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+
+const kbdVariants = cva(
+  'inline-flex items-center justify-center rounded px-1 text-center font-sans',
+  {
+    variants: {
+      variant: {
+        subtle: 'bg-background-100/20',
+        outline:
+          'border border-gray-alpha-400 bg-background-100 font-medium text-gray-900',
+      },
+      size: {
+        default: 'h-5 min-w-5 text-label-12 leading-none',
+        compact: 'h-4 min-h-4 min-w-4 text-[11px] leading-none',
+        search: 'h-5 min-h-5 min-w-5 text-label-13 leading-[1.7em]',
+      },
+    },
+    defaultVariants: {
+      variant: 'subtle',
+      size: 'default',
+    },
+  }
+);
+
+type KbdProps = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;
+
+export function Kbd({
+  children,
+  className,
+  variant,
+  size,
+  ...props
+}: KbdProps): ReactNode {
+  return (
+    <kbd className={cn(kbdVariants({ variant, size, className }))} {...props}>
+      {children}
+    </kbd>
+  );
+}
+
+export { kbdVariants };

package/src/components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 function Skeleton({
   className,