@workflow/web-shared 4.0.1-beta.43 → 4.0.1-beta.45

package/dist/error-boundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../src/error-boundary.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;CAC3D;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAChD,kBAAkB,EAClB,kBAAkB,CACnB;gBACa,KAAK,EAAE,kBAAkB;IAQrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAOjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAK1D,WAAW,aAKT;IAEF,MAAM;CA4CP"}
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../src/error-boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;CAC3D;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAChD,kBAAkB,EAClB,kBAAkB,CACnB;gBACa,KAAK,EAAE,kBAAkB;IAQrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAOjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAK1D,WAAW,aAKT;IAEF,MAAM;CAsBP"}

package/dist/error-boundary.js

@@ -1,9 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle } from 'lucide-react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Alert, AlertDescription, AlertTitle } from './components/ui/alert';
-import { Card, CardContent, CardHeader, CardTitle } from './components/ui/card';
+import { ErrorCard } from './components/ui/error-card';
 /**
  * Error boundary component that catches errors in child components
  * and displays them without breaking the entire application.
@@ -42,8 +40,10 @@ export class ErrorBoundary extends React.Component {
                 return this.props.fallback(this.state.error, this.handleReset);
             }
             // Default error UI
-            return (_jsxs(Card, { className: "border-destructive/50 bg-destructive/5", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-destructive", children: [_jsx(AlertCircle, { className: "h-5 w-5" }), this.props.title || 'Error'] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: this.props.description ||
-                                            'An unexpected error occurred in this section.' })] }), _jsxs("div", { className: "bg-muted p-3 rounded-md text-sm font-mono text-muted-foreground overflow-auto max-h-48", children: [_jsx("div", { className: "text-xs font-semibold mb-2", children: "Error details:" }), _jsx("div", { className: "whitespace-pre-wrap break-words text-xs", children: this.state.error.message }), this.state.error.stack && (_jsx("div", { className: "mt-2 opacity-60 text-xs", children: this.state.error.stack }))] })] })] }));
+            const errorDetails = this.state.error.stack
+                ? `${this.state.error.message}\n\n${this.state.error.stack}`
+                : this.state.error.message;
+            return (_jsx(ErrorCard, { title: this.props.title || 'An error occurred', details: errorDetails }));
         }
         return this.props.children;
     }

package/dist/error-boundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-boundary.js","sourceRoot":"","sources":["../src/error-boundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAiBhF;;;;;;GAMG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAGxC;IACC,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACX,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,IAAI;SACZ,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO;YACL,QAAQ,EAAE,IAAI;YACd,KAAK;SACN,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAA0B;QACxD,0BAA0B;QAC1B,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;IAC/D,CAAC;IAED,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,QAAQ,CAAC;YACZ,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,IAAI;SACZ,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YAC5C,kCAAkC;YAClC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACjE,CAAC;YAED,mBAAmB;YACnB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,wCAAwC,aACtD,KAAC,UAAU,cACT,MAAC,SAAS,IAAC,SAAS,EAAC,0CAA0C,aAC7D,KAAC,WAAW,IAAC,SAAS,EAAC,SAAS,GAAG,EAClC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO,IAClB,GACD,EACb,MAAC,WAAW,IAAC,SAAS,EAAC,WAAW,aAChC,MAAC,KAAK,IAAC,OAAO,EAAC,aAAa,aAC1B,KAAC,WAAW,IAAC,SAAS,EAAC,SAAS,GAAG,EACnC,KAAC,UAAU,uCAAkC,EAC7C,KAAC,gBAAgB,cACd,IAAI,CAAC,KAAK,CAAC,WAAW;4CACrB,+CAA+C,GAChC,IACb,EAER,eAAK,SAAS,EAAC,wFAAwF,aACrG,cAAK,SAAS,EAAC,4BAA4B,+BAAqB,EAChE,cAAK,SAAS,EAAC,yCAAyC,YACrD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GACrB,EACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,CACzB,cAAK,SAAS,EAAC,yBAAyB,YACrC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GACnB,CACP,IACG,IACM,IACT,CACR,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF"}
+{"version":3,"file":"error-boundary.js","sourceRoot":"","sources":["../src/error-boundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAevD;;;;;;GAMG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAGxC;IACC,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACX,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,IAAI;SACZ,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO;YACL,QAAQ,EAAE,IAAI;YACd,KAAK;SACN,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAA0B;QACxD,0BAA0B;QAC1B,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;IAC/D,CAAC;IAED,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,QAAQ,CAAC;YACZ,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,IAAI;SACZ,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YAC5C,kCAAkC;YAClC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACjE,CAAC;YAED,mBAAmB;YACnB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK;gBACzC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE;gBAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;YAE7B,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,mBAAmB,EAC9C,OAAO,EAAE,YAAY,GACrB,CACH,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF"}

package/dist/event-list-view.d.ts

@@ -0,0 +1,13 @@
+import type { Event } from '@workflow/world';
+import type { EnvMap } from './api/workflow-server-actions';
+interface EventsListProps {
+    events: Event[] | null;
+    env: EnvMap;
+}
+/**
+ * Displays a list of all events for a workflow run as colored cards in a pseudo-table.
+ * Events are sorted by createdAt (oldest first).
+ */
+export declare function EventListView({ events, env }: EventsListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=event-list-view.d.ts.map

package/dist/event-list-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-list-view.d.ts","sourceRoot":"","sources":["../src/event-list-view.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AA6C5D,UAAU,eAAe;IACvB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AA8TD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,eAAe,2CA2D7D"}

package/dist/event-list-view.js

@@ -0,0 +1,182 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, Loader2 } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
+import { fetchEventsByCorrelationId } from './api/workflow-server-actions';
+import { getEventColor } from './workflow-traces/event-colors';
+/**
+ * Format a date to a human-readable local time string with milliseconds
+ */
+function formatEventTime(date) {
+    return (date.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    }) +
+        '.' +
+        date.getMilliseconds().toString().padStart(3, '0'));
+}
+/**
+ * Format a date to full local datetime string with milliseconds
+ */
+function formatEventDateTime(date) {
+    return date.toLocaleString(undefined, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        fractionalSecondDigits: 3,
+    });
+}
+/**
+ * Format event type to a more readable label
+ */
+function formatEventType(eventType) {
+    return eventType
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+/**
+ * Single event row component with expandable details
+ */
+function EventRow({ event, env }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadedEventData, setLoadedEventData] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+    const colors = getEventColor(event.eventType);
+    const createdAt = new Date(event.createdAt);
+    // Check if event already has eventData (from initial fetch)
+    const hasExistingEventData = 'eventData' in event && event.eventData != null;
+    // Load full event details when expanding
+    const loadEventDetails = useCallback(async () => {
+        // Skip if we already have data or no correlationId
+        if (loadedEventData !== null ||
+            hasExistingEventData ||
+            !event.correlationId) {
+            return;
+        }
+        setIsLoading(true);
+        setLoadError(null);
+        try {
+            const result = await fetchEventsByCorrelationId(env, event.correlationId, {
+                sortOrder: 'asc',
+                limit: 100,
+                withData: true,
+            });
+            if (!result.success) {
+                setLoadError(result.error?.message || 'Failed to load event details');
+                return;
+            }
+            // Find our specific event in the results
+            const fullEvent = result.data.data.find((e) => e.eventId === event.eventId);
+            if (fullEvent && 'eventData' in fullEvent) {
+                setLoadedEventData(fullEvent.eventData);
+            }
+        }
+        catch (err) {
+            setLoadError(err instanceof Error ? err.message : 'Failed to load event details');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [
+        env,
+        event.correlationId,
+        event.eventId,
+        loadedEventData,
+        hasExistingEventData,
+    ]);
+    // Handle expand/collapse
+    const handleToggle = useCallback(() => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        // Load details when expanding for the first time
+        if (newExpanded && loadedEventData === null && !hasExistingEventData) {
+            loadEventDetails();
+        }
+    }, [isExpanded, loadedEventData, hasExistingEventData, loadEventDetails]);
+    // Get the event data to display (either from initial fetch, loaded data, or null)
+    const eventData = hasExistingEventData
+        ? event.eventData
+        : loadedEventData;
+    return (_jsxs("div", { className: "rounded-lg border overflow-hidden transition-all", style: {
+            backgroundColor: 'var(--ds-background-100)',
+            borderColor: colors.border,
+            borderLeftWidth: '1px',
+            borderLeftColor: colors.color,
+        }, children: [_jsxs("button", { type: "button", onClick: handleToggle, className: "w-full text-left grid gap-3 items-center px-0 py-2 text-xs hover:brightness-[0.98] transition-all cursor-pointer", style: {
+                    gridTemplateColumns: '24px 100px minmax(120px, auto) 1fr 1fr',
+                }, children: [_jsx("div", { className: "flex justify-center", children: _jsx(ChevronRight, { className: "h-3.5 w-3.5 transition-transform", style: {
+                                color: colors.secondary,
+                                transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                            } }) }), _jsx("div", { className: "font-mono tabular-nums", style: { color: colors.secondary }, children: formatEventTime(createdAt) }), _jsx("div", { className: "font-medium", style: { color: colors.text }, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "w-2 h-2 rounded-full flex-shrink-0", style: { backgroundColor: colors.color } }), formatEventType(event.eventType)] }) }), _jsx("div", { className: "font-mono text-[11px] overflow-hidden text-ellipsis whitespace-nowrap", style: { color: colors.secondary }, title: event.correlationId || '-', children: event.correlationId || '-' }), _jsx("div", { className: "font-mono text-[11px] pr-3 overflow-hidden text-ellipsis whitespace-nowrap", style: { color: colors.secondary }, title: event.eventId, children: event.eventId })] }), isExpanded && (_jsxs("div", { className: "border-t px-4 py-3", style: {
+                    borderColor: colors.border,
+                    backgroundColor: 'var(--ds-background-100)',
+                }, children: [_jsxs("div", { className: "flex flex-col divide-y rounded-md border overflow-hidden", style: {
+                            borderColor: 'var(--ds-gray-300)',
+                            backgroundColor: 'var(--ds-gray-100)',
+                        }, children: [_jsx(AttributeRow, { label: "Event ID", value: event.eventId, mono: true }), _jsx(AttributeRow, { label: "Event Type", value: event.eventType }), _jsx(AttributeRow, { label: "Correlation ID", value: event.correlationId || '-', mono: true }), _jsx(AttributeRow, { label: "Run ID", value: event.runId, mono: true }), _jsx(AttributeRow, { label: "Created At", value: formatEventDateTime(createdAt) })] }), _jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "text-xs font-medium mb-1.5", style: { color: 'var(--ds-gray-700)' }, children: "Event Data" }), isLoading && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border p-3", style: {
+                                    borderColor: 'var(--ds-gray-300)',
+                                    backgroundColor: 'var(--ds-gray-100)',
+                                }, children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", style: { color: 'var(--ds-gray-700)' } }), _jsx("span", { className: "text-xs", style: { color: 'var(--ds-gray-700)' }, children: "Loading event details..." })] })), loadError && !isLoading && (_jsx("div", { className: "rounded-md border p-3 text-xs", style: {
+                                    borderColor: 'var(--ds-red-400)',
+                                    backgroundColor: 'var(--ds-red-100)',
+                                    color: 'var(--ds-red-900)',
+                                }, children: loadError })), !isLoading && !loadError && eventData != null && (_jsx("pre", { className: "text-[11px] overflow-x-auto rounded-md border p-3", style: {
+                                    borderColor: 'var(--ds-gray-300)',
+                                    backgroundColor: 'var(--ds-gray-100)',
+                                    color: 'var(--ds-gray-1000)',
+                                }, children: _jsx("code", { children: JSON.stringify(eventData, null, 2) }) })), !isLoading &&
+                                !loadError &&
+                                eventData == null &&
+                                !event.correlationId && (_jsx("div", { className: "rounded-md border p-3 text-xs", style: {
+                                    borderColor: 'var(--ds-gray-300)',
+                                    backgroundColor: 'var(--ds-gray-100)',
+                                    color: 'var(--ds-gray-700)',
+                                }, children: "No event data available" })), !isLoading &&
+                                !loadError &&
+                                eventData == null &&
+                                event.correlationId &&
+                                !hasExistingEventData &&
+                                loadedEventData === null && (_jsx("div", { className: "rounded-md border p-3 text-xs", style: {
+                                    borderColor: 'var(--ds-gray-300)',
+                                    backgroundColor: 'var(--ds-gray-100)',
+                                    color: 'var(--ds-gray-700)',
+                                }, children: "No event data for this event type" }))] })] }))] }));
+}
+/**
+ * Helper component for attribute rows in the expanded details
+ */
+function AttributeRow({ label, value, mono = false, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between px-2.5 py-1.5", style: { borderColor: 'var(--ds-gray-300)' }, children: [_jsx("span", { className: "text-[11px] font-medium", style: { color: 'var(--ds-gray-700)' }, children: label }), _jsx("span", { className: `text-[11px] ${mono ? 'font-mono' : ''} text-right max-w-[70%] break-all`, style: { color: 'var(--ds-gray-1000)' }, children: value })] }));
+}
+/**
+ * Displays a list of all events for a workflow run as colored cards in a pseudo-table.
+ * Events are sorted by createdAt (oldest first).
+ */
+export function EventListView({ events, env }) {
+    // Sort events by createdAt (oldest first)
+    const sortedEvents = useMemo(() => {
+        if (!events || events.length === 0)
+            return [];
+        return [...events].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+    }, [events]);
+    if (!events || events.length === 0) {
+        return (_jsx("div", { className: "flex items-center justify-center h-full text-sm", style: { color: 'var(--ds-gray-700)' }, children: "No events found" }));
+    }
+    return (_jsxs("div", { className: "h-full overflow-auto m-2", children: [_jsxs("div", { className: "grid gap-3 pb-2 mb-2 border-b text-xs font-medium sticky top-0 z-10", style: {
+                    gridTemplateColumns: '24px 100px minmax(120px, auto) 1fr 1fr',
+                    borderColor: 'var(--ds-gray-300)',
+                    backgroundColor: 'var(--ds-background-100)',
+                    color: 'var(--ds-gray-700)',
+                }, children: [_jsx("div", {}), _jsx("div", { children: "Time" }), _jsx("div", { children: "Event Type" }), _jsx("div", { children: "Correlation ID" }), _jsx("div", { children: "Event ID" })] }), _jsx("div", { className: "flex flex-col gap-2", children: sortedEvents.map((event) => (_jsx(EventRow, { event: event, env: env }, event.eventId))) }), _jsxs("div", { className: "mt-4 pt-3 border-t text-xs", style: {
+                    borderColor: 'var(--ds-gray-300)',
+                    color: 'var(--ds-gray-700)',
+                }, children: [sortedEvents.length, " event", sortedEvents.length !== 1 ? 's' : '', " total"] })] }));
+}
+//# sourceMappingURL=event-list-view.js.map

package/dist/event-list-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-list-view.js","sourceRoot":"","sources":["../src/event-list-view.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/use-dark-mode.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook that detects if dark mode is active and reacts to theme changes.
+ * Observes the 'dark' class on the document element, which is how
+ * next-themes and similar libraries apply the theme.
+ *
+ * @returns `true` if dark mode is active, `false` otherwise
+ */
+export declare const useDarkMode: () => boolean;
+//# sourceMappingURL=use-dark-mode.d.ts.map

package/dist/hooks/use-dark-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dark-mode.d.ts","sourceRoot":"","sources":["../../src/hooks/use-dark-mode.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,QAAO,OAsB9B,CAAC"}

package/dist/hooks/use-dark-mode.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+/**
+ * Hook that detects if dark mode is active and reacts to theme changes.
+ * Observes the 'dark' class on the document element, which is how
+ * next-themes and similar libraries apply the theme.
+ *
+ * @returns `true` if dark mode is active, `false` otherwise
+ */
+export const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(() => {
+        if (typeof document === 'undefined')
+            return false;
+        return document.documentElement.classList.contains('dark');
+    });
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const observer = new MutationObserver(() => {
+            setIsDark(document.documentElement.classList.contains('dark'));
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+//# sourceMappingURL=use-dark-mode.js.map

package/dist/hooks/use-dark-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dark-mode.js","sourceRoot":"","sources":["../../src/hooks/use-dark-mode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAY,EAAE;IACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACxC,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE,OAAO,KAAK,CAAC;QAClD,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE,OAAO;QAE5C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACzC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACzC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO,CAAC;SAC3B,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 export { parseStepName, parseWorkflowName, } from '@workflow/core/parse-name';
 export type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 export * from './api/workflow-api-client';
-export type { EnvMap, PublicServerConfig } from './api/workflow-server-actions';
+export type { EnvMap, HealthCheckResultWithLatency, PublicServerConfig, } from './api/workflow-server-actions';
+export { runHealthCheck } from './api/workflow-server-actions';
+export type { HealthCheckEndpoint, HealthCheckResult, } from '@workflow/core/runtime';
 export { ErrorBoundary } from './error-boundary';
+export { EventListView } from './event-list-view';
 export type { HookActionCallbacks, HookActionsDropdownItemProps, HookResolveModalProps, UseHookActionsOptions, UseHookActionsReturn, } from './hook-actions';
 export { HookResolveModalWrapper, ResolveHookDropdownItem, ResolveHookModal, useHookActions, } from './hook-actions';
 export type { EventAnalysis } from './lib/event-analysis';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtE,cAAc,2BAA2B,CAAC;AAC1C,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EACL,aAAa,EACb,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,cAAc,GACf,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtE,cAAc,2BAA2B,CAAC;AAC1C,YAAY,EACV,MAAM,EACN,4BAA4B,EAC5B,kBAAkB,GACnB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,YAAY,EACV,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EACL,aAAa,EACb,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,cAAc,GACf,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -1,6 +1,8 @@
 export { parseStepName, parseWorkflowName, } from '@workflow/core/parse-name';
 export * from './api/workflow-api-client';
+export { runHealthCheck } from './api/workflow-server-actions';
 export { ErrorBoundary } from './error-boundary';
+export { EventListView } from './event-list-view';
 export { HookResolveModalWrapper, ResolveHookDropdownItem, ResolveHookModal, useHookActions, } from './hook-actions';
 export { analyzeEvents, hasPendingHooksFromEvents, hasPendingStepsFromEvents, isTerminalStatus, shouldShowReenqueueButton, } from './lib/event-analysis';
 export { extractConversation, formatDuration, identifyStreamSteps, isDoStreamStep, } from './lib/utils';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAGnC,cAAc,2BAA2B,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,aAAa,EACb,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,cAAc,GACf,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAGnC,cAAc,2BAA2B,CAAC;AAM1C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAK/D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQlD,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,aAAa,EACb,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,cAAc,GACf,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/sidebar/attribute-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attribute-panel.d.ts","sourceRoot":"","sources":["../../src/sidebar/attribute-panel.tsx"],"names":[],"mappings":"AAoUA,eAAO,MAAM,oBAAoB,GAAI,OAAO,OAAO,KAAG,MAsBrD,CAAC;AAEF,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkMD,eAAO,MAAM,cAAc,GAAI,mDAM5B;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,mDAkDA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uDAM5B;IACD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,4CA2FA,CAAC"}
+{"version":3,"file":"attribute-panel.d.ts","sourceRoot":"","sources":["../../src/sidebar/attribute-panel.tsx"],"names":[],"mappings":"AA0gBA,eAAO,MAAM,oBAAoB,GAAI,OAAO,OAAO,KAAG,MAsBrD,CAAC;AAEF,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkMD,eAAO,MAAM,cAAc,GAAI,mDAM5B;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,mDAkDA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uDAM5B;IACD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,4CAyFA,CAAC"}

package/dist/sidebar/attribute-panel.js

@@ -1,34 +1,43 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { parseStepName, parseWorkflowName } from '@workflow/core/parse-name';
-import { AlertCircle } from 'lucide-react';
-import { createContext, useContext, useMemo, useState, } from 'react';
-import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
+import { createContext, useContext, useMemo, useState } from 'react';
+import { ErrorCard } from '../components/ui/error-card';
+import { useDarkMode } from '../hooks/use-dark-mode';
 import { extractConversation, isDoStreamStep } from '../lib/utils';
 import { ConversationView } from './conversation-view';
 import { DetailCard } from './detail-card';
+/**
+ * Tab button for conversation/JSON toggle
+ */
+function TabButton({ active, onClick, children, }) {
+    return (_jsx("button", { type: "button", onClick: onClick, className: "px-3 py-1.5 text-[11px] font-medium transition-colors -mb-px", style: {
+            // Explicit styles to prevent app-level button overrides when web-shared
+            // is embedded in a self-hosted app.
+            backgroundColor: 'transparent',
+            borderTop: 'none',
+            borderLeft: 'none',
+            borderRight: 'none',
+            borderBottom: `2px solid ${active ? 'var(--ds-blue-600)' : 'transparent'}`,
+            borderRadius: 0,
+            outline: 'none',
+            boxShadow: 'none',
+            cursor: 'pointer',
+            color: active ? 'var(--ds-gray-1000)' : 'var(--ds-gray-600)',
+        }, children: children }));
+}
 /**
  * Tabbed view for conversation and raw JSON
  */
 function ConversationWithTabs({ conversation, args, }) {
     const [activeTab, setActiveTab] = useState('conversation');
-    return (_jsx(DetailCard, { summary: `Input (${conversation.length} messages)`, children: _jsxs("div", { className: "rounded-md border", style: { borderColor: 'var(--ds-gray-300)' }, children: [_jsxs("div", { className: "flex gap-1 border-b", style: { borderColor: 'var(--ds-gray-300)' }, children: [_jsx("button", { type: "button", onClick: () => setActiveTab('conversation'), className: "px-3 py-1.5 text-[11px] font-medium transition-colors", style: {
-                                color: activeTab === 'conversation'
-                                    ? 'var(--ds-gray-1000)'
-                                    : 'var(--ds-gray-600)',
-                                borderBottom: activeTab === 'conversation'
-                                    ? '2px solid var(--ds-blue-600)'
-                                    : '2px solid transparent',
-                                marginBottom: '-1px',
-                            }, children: "Conversation" }), _jsx("button", { type: "button", onClick: () => setActiveTab('json'), className: "px-3 py-1.5 text-[11px] font-medium transition-colors", style: {
-                                color: activeTab === 'json'
-                                    ? 'var(--ds-gray-1000)'
-                                    : 'var(--ds-gray-600)',
-                                borderBottom: activeTab === 'json'
-                                    ? '2px solid var(--ds-blue-600)'
-                                    : '2px solid transparent',
-                                marginBottom: '-1px',
-                            }, children: "Raw JSON" })] }), activeTab === 'conversation' ? (_jsx(ConversationView, { messages: conversation })) : (_jsx("div", { className: "p-3 max-h-[400px] overflow-y-auto", children: Array.isArray(args)
+    return (_jsx(DetailCard, { summary: `Input (${conversation.length} messages)`, children: _jsxs("div", { className: "rounded-md border", style: {
+                borderColor: 'var(--ds-gray-300)',
+                backgroundColor: 'transparent',
+            }, children: [_jsxs("div", { className: "flex gap-1 border-b", style: {
+                        borderColor: 'var(--ds-gray-300)',
+                        backgroundColor: 'transparent',
+                    }, children: [_jsx(TabButton, { active: activeTab === 'conversation', onClick: () => setActiveTab('conversation'), children: "Conversation" }), _jsx(TabButton, { active: activeTab === 'json', onClick: () => setActiveTab('json'), children: "Raw JSON" })] }), activeTab === 'conversation' ? (_jsx(ConversationView, { messages: conversation })) : (_jsx("div", { className: "p-3", children: Array.isArray(args)
                         ? args.map((v, i) => (_jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)))
                         : JsonBlock(args) }))] }) }));
 }
@@ -56,6 +65,77 @@ const isStreamRef = (value) => {
         '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__';
+/**
+ * Check if a value is a ClassInstanceRef object
+ */
+const isClassInstanceRef = (value) => {
+    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, s, l) => {
+    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, isDark) => {
+    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, }) => {
+    const isDark = useDarkMode();
+    const colors = getClassColors(classInstanceRef.classId, isDark);
+    return (_jsxs("div", { className: "inline-flex flex-col rounded text-[11px] font-mono my-1", style: {
+            backgroundColor: colors.body,
+            border: `1px solid ${colors.header}`,
+        }, children: [_jsxs("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}`, children: [_jsxs("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", children: [_jsx("title", { children: "Class instance" }), _jsx("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" }), _jsx("polyline", { points: "3.27 6.96 12 12.01 20.73 6.96" }), _jsx("line", { x1: "12", y1: "22.08", x2: "12", y2: "12" })] }), _jsx("span", { className: "font-semibold", children: classInstanceRef.className })] }), _jsx("pre", { className: "px-2 py-1.5 overflow-x-auto whitespace-pre-wrap", style: { color: colors.text }, children: JSON.stringify(classInstanceRef.data, null, 2) })] }));
+};
 /**
  * Renders a StreamRef as a styled link/badge
  */
@@ -75,11 +155,13 @@ const StreamRefDisplay = ({ streamRef }) => {
                 : streamRef.streamId] }));
 };
 /**
- * Recursively transforms a value for JSON display, replacing StreamRef objects
- * with placeholder strings that can be identified and replaced with React elements
+ * Recursively transforms a value for JSON display, replacing StreamRef and
+ * ClassInstanceRef objects with placeholder strings that can be identified
+ * and replaced with React elements.
  */
 const transformValueForDisplay = (value) => {
     const streamRefs = new Map();
+    const classInstanceRefs = new Map();
     let counter = 0;
     const transform = (v) => {
         if (isStreamRef(v)) {
@@ -87,6 +169,11 @@ const transformValueForDisplay = (value) => {
             streamRefs.set(placeholder, v);
             return placeholder;
         }
+        if (isClassInstanceRef(v)) {
+            const placeholder = `__CLASS_INSTANCE_REF_${counter++}__`;
+            classInstanceRefs.set(placeholder, v);
+            return placeholder;
+        }
         if (Array.isArray(v)) {
             return v.map(transform);
         }
@@ -103,37 +190,58 @@ const transformValueForDisplay = (value) => {
     return {
         json: JSON.stringify(transformed, null, 2),
         streamRefs,
+        classInstanceRefs,
     };
 };
 const JsonBlock = (value) => {
-    const { json, streamRefs } = transformValueForDisplay(value);
-    // If no stream refs, just render plain JSON
-    if (streamRefs.size === 0) {
+    const { json, streamRefs, classInstanceRefs } = transformValueForDisplay(value);
+    // If no special refs, just render plain JSON
+    if (streamRefs.size === 0 && classInstanceRefs.size === 0) {
         return (_jsx("pre", { className: "text-[11px] overflow-x-auto rounded-md border p-3", style: {
                 borderColor: 'var(--ds-gray-300)',
                 backgroundColor: 'var(--ds-gray-100)',
                 color: 'var(--ds-gray-1000)',
             }, children: _jsx("code", { children: json }) }));
     }
-    // Split the JSON by stream ref placeholders and render with React elements
-    const parts = [];
-    let remaining = json;
+    // Build a combined map of all placeholders to their React elements
+    const placeholderComponents = new Map();
     let keyIndex = 0;
     for (const [placeholder, streamRef] of streamRefs) {
-        const index = remaining.indexOf(`"${placeholder}"`);
-        if (index !== -1) {
-            // Add text before the placeholder
-            if (index > 0) {
-                parts.push(remaining.slice(0, index));
+        placeholderComponents.set(placeholder, _jsx(StreamRefDisplay, { streamRef: streamRef }, keyIndex++));
+    }
+    for (const [placeholder, classInstanceRef] of classInstanceRefs) {
+        placeholderComponents.set(placeholder, _jsx(ClassInstanceRefDisplay, { classInstanceRef: classInstanceRef }, keyIndex++));
+    }
+    // Split the JSON by all placeholders and render with React elements
+    const parts = [];
+    let remaining = json;
+    // Process placeholders in order of their appearance in the string
+    while (remaining.length > 0) {
+        let earliestIndex = -1;
+        let earliestPlaceholder = '';
+        let earliestComponent = null;
+        // Find the earliest placeholder in the remaining string
+        for (const [placeholder, component] of placeholderComponents) {
+            const index = remaining.indexOf(`"${placeholder}"`);
+            if (index !== -1 && (earliestIndex === -1 || index < earliestIndex)) {
+                earliestIndex = index;
+                earliestPlaceholder = placeholder;
+                earliestComponent = component;
             }
-            // Add the StreamRef component
-            parts.push(_jsx(StreamRefDisplay, { streamRef: streamRef }, keyIndex++));
-            remaining = remaining.slice(index + placeholder.length + 2); // +2 for quotes
         }
-    }
-    // Add any remaining text
-    if (remaining) {
-        parts.push(remaining);
+        if (earliestIndex === -1) {
+            // No more placeholders found, add the rest
+            parts.push(remaining);
+            break;
+        }
+        // Add text before the placeholder
+        if (earliestIndex > 0) {
+            parts.push(remaining.slice(0, earliestIndex));
+        }
+        // Add the component
+        parts.push(earliestComponent);
+        // Move past the placeholder
+        remaining = remaining.slice(earliestIndex + earliestPlaceholder.length + 2); // +2 for quotes
     }
     return (_jsx("pre", { className: "text-[11px] overflow-x-auto rounded-md border p-3", style: {
             borderColor: 'var(--ds-gray-300)',
@@ -337,6 +445,6 @@ export const AttributePanel = ({ data, isLoading, error, expiredAt, onStreamClic
                         backgroundColor: 'var(--ds-gray-100)',
                     }, children: visibleBasicAttributes.map((attribute) => (_jsxs("div", { className: "flex items-center justify-between px-3 py-1.5", style: {
                             borderColor: 'var(--ds-gray-300)',
-                        }, children: [_jsx("span", { className: "text-[11px] font-medium", style: { color: 'var(--ds-gray-700)' }, children: attribute }), _jsx("span", { className: "text-[11px] font-mono", style: { color: 'var(--ds-gray-1000)' }, children: attributeToDisplayFn[attribute]?.(displayData[attribute]) })] }, attribute))) })), error ? (_jsxs(Alert, { variant: "destructive", className: "my-4", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx(AlertTitle, { children: "Failed to load resource details" }), _jsx(AlertDescription, { className: "text-sm", children: error.message })] })) : hasExpired ? (_jsx(ExpiredDataMessage, {})) : (resolvedAttributes.map((attribute) => (_jsx(AttributeBlock, { isLoading: isLoading, attribute: attribute, value: displayData[attribute], context: displayContext }, attribute))))] }) }));
+                        }, children: [_jsx("span", { className: "text-[11px] font-medium", style: { color: 'var(--ds-gray-700)' }, children: attribute }), _jsx("span", { className: "text-[11px] font-mono", style: { color: 'var(--ds-gray-1000)' }, children: attributeToDisplayFn[attribute]?.(displayData[attribute]) })] }, attribute))) })), error ? (_jsx(ErrorCard, { title: "Failed to load resource details", details: error.message, className: "my-4" })) : hasExpired ? (_jsx(ExpiredDataMessage, {})) : (resolvedAttributes.map((attribute) => (_jsx(AttributeBlock, { isLoading: isLoading, attribute: attribute, value: displayData[attribute], context: displayContext }, attribute))))] }) }));
 };
 //# sourceMappingURL=attribute-panel.js.map