@workflow/web-shared 4.1.0-beta.52 → 4.1.0-beta.53

package/src/components/index.ts

@@ -21,4 +21,5 @@ export type {
 } from './sidebar/entity-detail-panel';
 export { type StreamChunk, StreamViewer } from './stream-viewer';
 export type { Span, SpanEvent } from './trace-viewer/types';
+export { DataInspector, type DataInspectorProps } from './ui/data-inspector';
 export { WorkflowTraceViewer } from './workflow-trace-view';

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

@@ -24,6 +24,7 @@ interface RunTraceViewProps {
     payload: unknown,
     hook?: Hook
   ) => Promise<void>;
+  onCancelRun?: (runId: string) => Promise<void>;
   onStreamClick?: (streamId: string) => void;
   onSpanSelect?: (info: SpanSelectionInfo) => void;
 }
@@ -40,6 +41,7 @@ export function RunTraceView({
   spanDetailError,
   onWakeUpSleep,
   onResolveHook,
+  onCancelRun,
   onStreamClick,
   onSpanSelect,
 }: RunTraceViewProps) {
@@ -67,6 +69,7 @@ export function RunTraceView({
         spanDetailError={spanDetailError}
         onWakeUpSleep={onWakeUpSleep}
         onResolveHook={onResolveHook}
+        onCancelRun={onCancelRun}
         onStreamClick={onStreamClick}
         onSpanSelect={onSpanSelect}
       />

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

@@ -4,10 +4,9 @@ import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
 import type { ReactNode } from 'react';
-import { createContext, useContext, useMemo, useState } from 'react';
-import { ObjectInspector } from 'react-inspector';
-import { useDarkMode } from '../../hooks/use-dark-mode';
+import { useMemo, useState } from 'react';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
+import { DataInspector, StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
 import { ConversationView } from './conversation-view';
 import { DetailCard } from './detail-card';
@@ -112,265 +111,16 @@ function ConversationWithTabs({
 }
 
 /**
- * Context for stream click handler
+ * Render a value with the shared DataInspector (ObjectInspector with
+ * custom theming, nodeRenderer for StreamRef/ClassInstanceRef, etc.)
  */
-const StreamClickContext = createContext<
-  ((streamId: string) => void) | undefined
->(undefined);
-
-/**
- * Marker for stream reference objects that can be rendered as links
- * This is duplicated from @workflow/core/observability to avoid pulling in
- * Node.js dependencies into the client bundle.
- */
-const STREAM_REF_TYPE = '__workflow_stream_ref__';
-
-/**
- * A stream reference object that contains the stream ID and can be
- * detected in the UI to render as a clickable link
- */
-interface StreamRef {
-  __type: typeof STREAM_REF_TYPE;
-  streamId: string;
-}
-
-/**
- * Check if a value is a StreamRef object
- *
- */
-const isStreamRef = (value: unknown): value is StreamRef => {
-  // TODO: This is duplicated from @workflow/core/observability, but can't be pulled
-  // in client-side code because it's a Node.js dependency.
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    '__type' in value &&
-    value.__type === STREAM_REF_TYPE &&
-    'streamId' in value &&
-    typeof value.streamId === 'string'
-  );
-};
-
-/**
- * Marker for custom class instance references.
- * This is duplicated from @workflow/core/observability to avoid pulling in
- * Node.js dependencies into the client bundle.
- */
-const CLASS_INSTANCE_REF_TYPE = '__workflow_class_instance_ref__';
-
-/**
- * A class instance reference object that contains the class name and serialized data.
- * Used in o11y when a custom class instance is encountered but the class is not
- * registered for deserialization.
- */
-interface ClassInstanceRef {
-  __type: typeof CLASS_INSTANCE_REF_TYPE;
-  className: string;
-  classId: string;
-  data: unknown;
-}
-
-/**
- * Check if a value is a ClassInstanceRef object
- */
-const isClassInstanceRef = (value: unknown): value is ClassInstanceRef => {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    '__type' in value &&
-    value.__type === CLASS_INSTANCE_REF_TYPE &&
-    'className' in value &&
-    typeof value.className === 'string'
-  );
-};
-
-import ColorHash from 'color-hash';
-
-/**
- * Color hash instance configured for nice saturation and lightness.
- * Returns HSL values which we can transform for different use cases.
- */
-const colorHash = new ColorHash({
-  saturation: [0.5, 0.6, 0.7],
-  lightness: [0.4, 0.5, 0.6],
-});
-
-/**
- * Convert HSL to CSS hsl() string
- */
-const hslToString = (h: number, s: number, l: number): string => {
-  return `hsl(${h}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
-};
-
-/**
- * Get consistent colors for a class ID using color-hash and HSL transformations.
- * Adjusts colors based on light/dark mode for optimal appearance.
- */
-const getClassColors = (
-  classId: string,
-  isDark: boolean
-): { header: string; body: string; text: string } => {
-  const [h, s, l] = colorHash.hsl(classId);
-
-  if (isDark) {
-    // Dark mode: vibrant header, dark body, light text
-    return {
-      header: hslToString(h, s, Math.min(l + 0.1, 0.6)), // Slightly brighter header
-      body: hslToString(h, s * 0.8, 0.15), // Very dark, slightly desaturated body
-      text: hslToString(h, s * 0.6, 0.8), // Light, slightly desaturated text
-    };
-  } else {
-    // Light mode: vibrant header, light body, dark text
-    return {
-      header: hslToString(h, s, l), // Use base color for header
-      body: hslToString(h, s * 0.4, 0.95), // Very light, desaturated body
-      text: hslToString(h, s * 0.8, 0.25), // Dark, saturated text
-    };
-  }
-};
-
-/**
- * Renders a ClassInstanceRef as a styled card showing the class name and serialized data.
- * The header color is determined by hashing the classId for visual distinction.
- * Reacts to theme changes for proper dark/light mode support.
- */
-const ClassInstanceRefDisplay = ({
-  classInstanceRef,
-}: {
-  classInstanceRef: ClassInstanceRef;
-}) => {
-  const isDark = useDarkMode();
-  const colors = getClassColors(classInstanceRef.classId, isDark);
-
-  return (
-    <div
-      className="inline-flex flex-col rounded text-[11px] font-mono my-1"
-      style={{
-        backgroundColor: colors.body,
-        border: `1px solid ${colors.header}`,
-      }}
-    >
-      <div
-        className="flex items-center gap-1.5 px-2 py-1 rounded-t"
-        style={{
-          backgroundColor: colors.header,
-          color: '#FFFFFF',
-        }}
-        title={`Custom class: ${classInstanceRef.classId}`}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="12"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <title>Class instance</title>
-          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-          <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-          <line x1="12" y1="22.08" x2="12" y2="12" />
-        </svg>
-        <span className="font-semibold">{classInstanceRef.className}</span>
-      </div>
-      <pre
-        className="px-2 py-1.5 overflow-x-auto whitespace-pre-wrap"
-        style={{ color: colors.text }}
-      >
-        {JSON.stringify(classInstanceRef.data, null, 2)}
-      </pre>
-    </div>
-  );
-};
-
-/**
- * Renders a StreamRef as a styled link/badge
- */
-const StreamRefDisplay = ({ streamRef }: { streamRef: StreamRef }) => {
-  const onStreamClick = useContext(StreamClickContext);
-
-  const handleClick = () => {
-    if (onStreamClick) {
-      onStreamClick(streamRef.streamId);
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer hover:opacity-80 transition-opacity"
-      style={{
-        backgroundColor: 'var(--ds-blue-200)',
-        color: 'var(--ds-blue-900)',
-        border: '1px solid var(--ds-blue-400)',
-      }}
-      title={`Click to view stream: ${streamRef.streamId}`}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="10"
-        height="10"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <title>Stream icon</title>
-        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
-        <circle cx="12" cy="12" r="3" />
-      </svg>
-      {streamRef.streamId.length > 40
-        ? `${streamRef.streamId.slice(0, 20)}...${streamRef.streamId.slice(
-            -15
-          )}`
-        : streamRef.streamId}
-    </button>
-  );
-};
-
-/**
- * Renders a value using react-inspector's ObjectInspector for proper
- * display of Map, Set, URLSearchParams, Date, Error, RegExp, typed
- * arrays, and other non-plain-object types.
- *
- * StreamRef and ClassInstanceRef objects are rendered inline as
- * custom components (clickable stream links and class cards).
- */
-const JsonBlock = (value: unknown) => {
-  return <DataInspector data={value} />;
-};
-
-import { inspectorThemeDark, inspectorThemeLight } from '../ui/inspector-theme';
-
-function DataInspector({ data }: { data: unknown }) {
-  const isDark = useDarkMode();
-
-  // Render top-level StreamRef/ClassInstanceRef as full custom components
-  if (isStreamRef(data)) {
-    return <StreamRefDisplay streamRef={data} />;
-  }
-  if (isClassInstanceRef(data)) {
-    return <ClassInstanceRefDisplay classInstanceRef={data} />;
-  }
-
+function JsonBlock(value: unknown) {
   return (
     <div
       className="overflow-x-auto rounded-md border p-3"
       style={{ borderColor: 'var(--ds-gray-300)' }}
     >
-      <ObjectInspector
-        data={data}
-        // @ts-expect-error react-inspector accepts theme objects at runtime despite
-        // types declaring string only — see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
-        theme={isDark ? inspectorThemeDark : inspectorThemeLight}
-        expandLevel={2}
-      />
+      <DataInspector data={value} />
     </div>
   );
 }
@@ -380,6 +130,7 @@ type AttributeKey =
   | keyof WorkflowRun
   | keyof Hook
   | keyof Event
+  | 'moduleSpecifier'
   | 'eventData'
   | 'resumeAt'
   | 'expiredAt'
@@ -387,6 +138,7 @@ type AttributeKey =
 
 const attributeOrder: AttributeKey[] = [
   'workflowName',
+  'moduleSpecifier',
   'stepName',
   'status',
   'stepId',
@@ -438,6 +190,19 @@ const getAttributeDisplayName = (attribute: string): string => {
   return attributeDisplayNames[attribute as AttributeKey] ?? attribute;
 };
 
+const getModuleSpecifierFromName = (value: unknown): string => {
+  const raw = String(value);
+  const parsedStep = parseStepName(raw);
+  if (parsedStep) {
+    return parsedStep.moduleSpecifier;
+  }
+  const parsedWorkflow = parseWorkflowName(raw);
+  if (parsedWorkflow) {
+    return parsedWorkflow.moduleSpecifier;
+  }
+  return raw;
+};
+
 export const localMillisecondTime = (value: unknown): string => {
   let date: Date;
   if (value instanceof Date) {
@@ -473,6 +238,7 @@ const attributeToDisplayFn: Record<
   // Names that need pretty-printing
   workflowName: (value: unknown) =>
     parseWorkflowName(String(value))?.shortName ?? '?',
+  moduleSpecifier: (value: unknown) => getModuleSpecifierFromName(value),
   stepName: (value: unknown) => parseStepName(String(value))?.shortName ?? '?',
   // IDs
   runId: (value: unknown) => String(value),
@@ -726,12 +492,14 @@ export const AttributeBlock = ({
 
 export const AttributePanel = ({
   data,
+  moduleSpecifier,
   isLoading,
   error,
   expiredAt,
   onStreamClick,
 }: {
   data: Record<string, unknown>;
+  moduleSpecifier?: string;
   isLoading?: boolean;
   error?: Error;
   expiredAt?: string | Date;
@@ -747,8 +515,15 @@ export const AttributePanel = ({
     if (execCtx?.workflowCoreVersion) {
       result.workflowCoreVersion = execCtx.workflowCoreVersion;
     }
+    if (moduleSpecifier) {
+      result.moduleSpecifier = moduleSpecifier;
+    } else if (typeof data.stepName === 'string') {
+      result.moduleSpecifier = data.stepName;
+    } else if (typeof data.workflowName === 'string') {
+      result.moduleSpecifier = data.workflowName;
+    }
     return result;
-  }, [data]);
+  }, [data, moduleSpecifier]);
   const hasExpired = expiredAt != null && new Date(expiredAt) < new Date();
   const basicAttributes = Object.keys(displayData)
     .filter((key) => !resolvableAttributes.includes(key))
@@ -768,6 +543,31 @@ export const AttributePanel = ({
     return displayValue !== null;
   });
 
+  // Keep `moduleSpecifier` immediately after `workflowName` or `stepName`.
+  const orderedBasicAttributes = useMemo(() => {
+    const attributes = [...visibleBasicAttributes];
+    const moduleSpecifierIndex = attributes.indexOf('moduleSpecifier');
+    if (moduleSpecifierIndex === -1) {
+      return attributes;
+    }
+
+    attributes.splice(moduleSpecifierIndex, 1);
+    const workflowNameIndex = attributes.indexOf('workflowName');
+    if (workflowNameIndex !== -1) {
+      attributes.splice(workflowNameIndex + 1, 0, 'moduleSpecifier');
+      return attributes;
+    }
+
+    const stepNameIndex = attributes.indexOf('stepName');
+    if (stepNameIndex !== -1) {
+      attributes.splice(stepNameIndex + 1, 0, 'moduleSpecifier');
+      return attributes;
+    }
+
+    attributes.unshift('moduleSpecifier');
+    return attributes;
+  }, [visibleBasicAttributes]);
+
   // Memoize context object to avoid object reconstruction on render
   const displayContext = useMemo(
     () => ({
@@ -788,7 +588,7 @@ export const AttributePanel = ({
               backgroundColor: 'var(--ds-gray-100)',
             }}
           >
-            {visibleBasicAttributes.map((attribute) => (
+            {orderedBasicAttributes.map((attribute) => (
               <div
                 key={attribute}
                 className="flex items-center justify-between px-3 py-1.5"

package/src/components/sidebar/conversation-view.tsx

@@ -1,5 +1,6 @@
 import type { ModelMessage } from 'ai';
 import { Streamdown } from 'streamdown';
+import { DataInspector } from '../ui/data-inspector';
 
 interface ConversationViewProps {
   messages: ModelMessage[];
@@ -108,24 +109,27 @@ function ContentPart({ part, role }: { part: ParsedPart; role: string }) {
           <span style={{ color: 'var(--ds-purple-900)' }}>{part.toolName}</span>
         </div>
         {part.input != null && (
-          <pre
-            className="mt-1.5 text-[10px] overflow-x-auto p-1.5 rounded"
-            style={{
-              backgroundColor: 'var(--ds-gray-100)',
-              color: 'var(--ds-gray-800)',
-            }}
+          <div
+            className="mt-1.5 overflow-x-auto p-1.5 rounded"
+            style={{ backgroundColor: 'var(--ds-gray-100)' }}
           >
-            {typeof part.input === 'string'
-              ? part.input
-              : JSON.stringify(part.input, null, 2)}
-          </pre>
+            {typeof part.input === 'string' ? (
+              <pre
+                className="text-[10px]"
+                style={{ color: 'var(--ds-gray-800)' }}
+              >
+                {part.input}
+              </pre>
+            ) : (
+              <DataInspector data={part.input} />
+            )}
+          </div>
         )}
       </div>
     );
   }
 
   if (part.type === 'tool-result') {
-    const outputText = formatOutput(part.output);
     return (
       <div
         className="rounded border px-2 py-1.5"
@@ -140,16 +144,22 @@ function ContentPart({ part, role }: { part: ParsedPart; role: string }) {
             {part.toolName} result
           </span>
         </div>
-        {outputText && (
-          <pre
-            className="mt-1.5 text-[10px] overflow-x-auto max-h-[80px] p-1.5 rounded"
-            style={{
-              backgroundColor: 'var(--ds-gray-100)',
-              color: 'var(--ds-gray-800)',
-            }}
+        {part.output != null && (
+          <div
+            className="mt-1.5 overflow-x-auto max-h-[200px] overflow-y-auto p-1.5 rounded"
+            style={{ backgroundColor: 'var(--ds-gray-100)' }}
           >
-            {outputText}
-          </pre>
+            {typeof part.output === 'string' ? (
+              <pre
+                className="text-[10px]"
+                style={{ color: 'var(--ds-gray-800)' }}
+              >
+                {part.output}
+              </pre>
+            ) : (
+              <DataInspector data={part.output} expandLevel={1} />
+            )}
+          </div>
         )}
       </div>
     );
@@ -226,10 +236,3 @@ function parseContent(content: unknown): ParsedPart[] {
 
   return [];
 }
-
-function formatOutput(output: unknown): string | null {
-  if (output == null) return null;
-  const text =
-    typeof output === 'string' ? output : JSON.stringify(output, null, 2);
-  return text.length > 500 ? `${text.slice(0, 500)}...` : text;
-}