@workflow/web-shared 4.1.0-beta.63 → 4.1.0-beta.64

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Copy } from 'lucide-react';
+import { AlertCircle, Copy } from 'lucide-react';
 import { toast } from 'sonner';
 
 /**
@@ -19,10 +19,9 @@ export function isStructuredErrorWithStack(
 }
 
 /**
- * Renders an error with a `stack` field as readable pre-formatted text,
- * styled to match the CopyableDataBlock component. The error message is
- * displayed at the top with a visual separator from the stack trace.
- * The entire block is copyable via a copy button.
+ * 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.
  */
 export function ErrorStackBlock({
   value,
@@ -35,15 +34,22 @@ export function ErrorStackBlock({
 
   return (
     <div
-      className="relative overflow-x-auto rounded-md border p-3 pt-9"
-      style={{ borderColor: 'var(--ds-gray-300)' }}
+      className="relative overflow-hidden rounded-md border"
+      style={{
+        borderColor: 'var(--ds-red-400)',
+        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 !bg-[var(--ds-background-100)] !text-[var(--ds-gray-800)] transition-transform transition-colors duration-100 hover:!bg-[var(--ds-gray-alpha-200)] active:!scale-95 active:!bg-[var(--ds-gray-alpha-300)]"
-        style={{ borderColor: 'var(--ds-gray-300)' }}
+        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)
@@ -59,19 +65,23 @@ export function ErrorStackBlock({
       </button>
 
       {message && (
-        <p
-          className="pb-2 mb-2 text-xs font-semibold font-mono"
+        <div
+          className="flex items-start gap-2 px-3 py-2.5 pr-10"
           style={{
             color: 'var(--ds-red-900)',
-            borderBottom: '1px solid var(--ds-gray-300)',
+            borderBottom: '1px solid var(--ds-red-400)',
           }}
         >
-          {message}
-        </p>
+          <AlertCircle className="h-4 w-4 shrink-0" style={{ marginTop: 1 }} />
+          <p className="text-xs font-semibold m-0 break-words">{message}</p>
+        </div>
       )}
       <pre
-        className="text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
-        style={{ color: 'var(--ds-gray-1000)' }}
+        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>

package/src/components/ui/menu-dropdown.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export interface MenuDropdownOption<T extends string = string> {
+  value: T;
+  label: string;
+}
+
+interface MenuDropdownProps<T extends string = string> {
+  options: MenuDropdownOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+}
+
+/**
+ * A dropdown menu that matches Geist's MenuButton (secondary) + Menu styling.
+ * Uses CSS classes with proper :hover specificity (no inline background).
+ */
+export function MenuDropdown<T extends string = string>({
+  options,
+  value,
+  onChange,
+}: MenuDropdownProps<T>) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const label =
+    options.find((o) => o.value === value)?.label ?? options[0]?.label ?? '';
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
+      <style>{`
+        .wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}
+        .wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}
+        .wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}
+        .wf-menu-item:hover{background:var(--ds-gray-alpha-100)}
+      `}</style>
+
+      <button
+        type="button"
+        className="wf-menu-btn"
+        onClick={() => setOpen(!open)}
+      >
+        <span>{label}</span>
+        <svg
+          width={16}
+          height={16}
+          viewBox="0 0 16 16"
+          fill="none"
+          style={{
+            marginLeft: 16,
+            marginRight: -4,
+            color: 'var(--ds-gray-900)',
+          }}
+        >
+          <path
+            d="M4.5 6L8 9.5L11.5 6"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          style={{
+            position: 'absolute',
+            right: 0,
+            top: '100%',
+            marginTop: 4,
+            minWidth: 140,
+            padding: 4,
+            borderRadius: 12,
+            background: 'var(--ds-background-100)',
+            boxShadow: 'var(--ds-shadow-menu, var(--ds-shadow-medium))',
+            zIndex: 2001,
+          }}
+          role="menu"
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              role="menuitem"
+              className="wf-menu-item"
+              style={{
+                fontWeight: option.value === value ? 500 : 400,
+              }}
+              onClick={() => {
+                onChange(option.value);
+                setOpen(false);
+              }}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/workflow-trace-view.tsx

@@ -706,12 +706,14 @@ function PanelResizeHandle({
 function TraceViewerFooter({
   hasMore,
   isLive,
+  isInitialLoading,
 }: {
   hasMore: boolean;
   isLive: boolean;
+  isInitialLoading: boolean;
 }): ReactNode {
   const style = { color: 'var(--ds-gray-900)' };
-  if (hasMore) {
+  if (hasMore || isInitialLoading) {
     return (
       <div
         className="flex items-center justify-center gap-2 py-3 text-xs"
@@ -997,9 +999,13 @@ export const WorkflowTraceViewer = ({
               isLive={isLive}
               trace={trace}
               knownDurationMs={traceWithMeta?.knownDurationMs}
-              hasMoreData={hasMoreSpans}
+              hasMoreData={hasMoreSpans || Boolean(isLoading)}
               footer={
-                <TraceViewerFooter hasMore={hasMoreSpans} isLive={isLive} />
+                <TraceViewerFooter
+                  hasMore={hasMoreSpans}
+                  isLive={isLive}
+                  isInitialLoading={Boolean(isLoading)}
+                />
               }
             />
           </TraceViewerWithContextMenu>