@workflow/web-shared 4.0.1-beta.5

package/dist/run-trace-view.jsx

@@ -0,0 +1,25 @@
+'use client';
+import { AlertCircle } from 'lucide-react';
+import { useWorkflowTraceViewerData } from './api/workflow-api-client';
+import { WorkflowTraceViewer } from './workflow-trace-view';
+export function RunTraceView({ env, runId }) {
+    // Fetch all run data with live updates
+    const { run: runData, steps: allSteps, hooks: allHooks, events: allEvents, loading, error, } = useWorkflowTraceViewerData(env, runId, { live: true });
+    const run = runData ?? {};
+    if (error && !runData) {
+        return (<div className="m-4">
+        <AlertCircle className="h-4 w-4"/>
+        <p>Error loading workflow run</p>
+        <p>{error.message}</p>
+      </div>);
+    }
+    return (<div className="space-y-6">
+      <div className="relative">
+        {loading && (<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-white"></div>
+          </div>)}
+        <WorkflowTraceViewer error={error} steps={allSteps} events={allEvents} hooks={allHooks} env={env} run={run} isLoading={loading}/>
+      </div>
+    </div>);
+}
+//# sourceMappingURL=run-trace-view.jsx.map

package/dist/run-trace-view.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"run-trace-view.jsx","sourceRoot":"","sources":["../src/run-trace-view.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAGb,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAO5D,MAAM,UAAU,YAAY,CAAC,EAAE,GAAG,EAAE,KAAK,EAAqB;IAC5D,uCAAuC;IACvC,MAAM,EACJ,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,SAAS,EACjB,OAAO,EACP,KAAK,GACN,GAAG,0BAA0B,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3D,MAAM,GAAG,GAAG,OAAO,IAAK,EAAkB,CAAC;IAE3C,IAAI,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;QACtB,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAClB;QAAA,CAAC,WAAW,CAAC,SAAS,CAAC,SAAS,EAChC;QAAA,CAAC,CAAC,CAAC,0BAA0B,EAAE,CAAC,CAChC;QAAA,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CACvB;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,WAAW,CACxB;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,UAAU,CACvB;QAAA,CAAC,OAAO,IAAI,CACV,CAAC,GAAG,CAAC,SAAS,CAAC,+DAA+D,CAC5E;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6DAA6D,CAAC,EAAE,GAAG,CACpF;UAAA,EAAE,GAAG,CAAC,CACP,CACD;QAAA,CAAC,mBAAmB,CAClB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,MAAM,CAAC,CAAC,SAAS,CAAC,CAClB,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,SAAS,CAAC,CAAC,OAAO,CAAC,EAEvB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,11 @@
+export declare const AttributeBlock: ({ attribute, value, isLoading, }: {
+    attribute: string;
+    value: unknown;
+    isLoading?: boolean;
+}) => import("react").JSX.Element | null;
+export declare const AttributePanel: ({ data, isLoading, error, }: {
+    data: Record<string, unknown>;
+    isLoading?: boolean;
+    error?: Error;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=attribute-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-panel.d.ts","sourceRoot":"","sources":["../../src/sidebar/attribute-panel.tsx"],"names":[],"mappings":"AA8IA,eAAO,MAAM,cAAc,GAAI,kCAI5B;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,uCA4BA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6BAI5B;IACD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,gCAsCA,CAAC"}

package/dist/sidebar/attribute-panel.jsx

@@ -0,0 +1,153 @@
+'use client';
+import { parseStepName, parseWorkflowName } from '@workflow/core/parse-name';
+import { AlertCircle } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
+import { DetailCard } from './detail-card';
+const JsonBlock = (value) => {
+    return (<pre className="text-copy-12 overflow-x-auto rounded-md border p-4" style={{
+            borderColor: 'var(--ds-gray-300)',
+            backgroundColor: 'var(--ds-gray-100)',
+            color: 'var(--ds-gray-1000)',
+        }}>
+      <code>{JSON.stringify(value, null, 2)}</code>
+    </pre>);
+};
+const attributeOrder = [
+    'workflowName',
+    'stepName',
+    'status',
+    'stepId',
+    'hookId',
+    'eventId',
+    'runId',
+    'attempt',
+    'token',
+    'correlationId',
+    'eventType',
+    'deploymentId',
+    'ownerId',
+    'projectId',
+    'environment',
+    'executionContext',
+    'createdAt',
+    'startedAt',
+    'updatedAt',
+    'completedAt',
+    'retryAfter',
+    'error',
+    'errorCode',
+    'metadata',
+    'eventData',
+    'input',
+    'output',
+    'resumeAt',
+];
+const sortByAttributeOrder = (a, b) => {
+    const aIndex = attributeOrder.indexOf(a) || 0;
+    const bIndex = attributeOrder.indexOf(b) || 0;
+    return aIndex - bIndex;
+};
+const attributeToDisplayFn = {
+    // Names that need pretty-printing
+    workflowName: (value) => parseWorkflowName(String(value))?.shortName ?? '?',
+    stepName: (value) => parseStepName(String(value))?.shortName ?? '?',
+    // IDs
+    runId: (value) => String(value),
+    stepId: (value) => String(value),
+    hookId: (value) => String(value),
+    eventId: (value) => String(value),
+    // Run/step details
+    status: (value) => String(value),
+    attempt: (value) => String(value),
+    // Hook details
+    token: (value) => String(value),
+    // Event details
+    eventType: (value) => String(value),
+    correlationId: (value) => String(value),
+    // Project details
+    deploymentId: (value) => String(value),
+    // Tenancy (we don't show these)
+    ownerId: (_value) => null,
+    projectId: (_value) => null,
+    environment: (_value) => null,
+    executionContext: (_value) => null,
+    // Dates
+    // TODO: relative time with tooltips for ISO times
+    createdAt: (value) => new Date(String(value)).toLocaleString(),
+    startedAt: (value) => new Date(String(value)).toLocaleString(),
+    updatedAt: (value) => new Date(String(value)).toLocaleString(),
+    completedAt: (value) => new Date(String(value)).toLocaleString(),
+    retryAfter: (value) => new Date(String(value)).toLocaleString(),
+    resumeAt: (value) => new Date(String(value)).toLocaleString(),
+    // Resolved attributes, won't actually use this function
+    metadata: JsonBlock,
+    input: (value) => {
+        const argCount = Array.isArray(value) ? value.length : 0;
+        return (<DetailCard summary={`Input (${argCount} arguments)`}>
+        {Array.isArray(value)
+                ? value.map((v, i) => (<div className="mt-2" key={i}>
+                {JsonBlock(v)}
+              </div>))
+                : JsonBlock(value)}
+      </DetailCard>);
+    },
+    output: (value) => {
+        return <DetailCard summary="Output">{JsonBlock(value)}</DetailCard>;
+    },
+    error: (value) => {
+        return <DetailCard summary="Error">{JsonBlock(value)}</DetailCard>;
+    },
+    errorCode: JsonBlock,
+    eventData: (value) => {
+        return <DetailCard summary="Event Data">{JsonBlock(value)}</DetailCard>;
+    },
+};
+const resolvableAttributes = [
+    'input',
+    'output',
+    'error',
+    'errorCode',
+    'metadata',
+    'eventData',
+];
+export const AttributeBlock = ({ attribute, value, isLoading, }) => {
+    const displayFn = attributeToDisplayFn[attribute];
+    if (!displayFn) {
+        return null;
+    }
+    const displayValue = displayFn(value);
+    if (!displayValue) {
+        return null;
+    }
+    return (<div className="relative">
+      {typeof isLoading === 'boolean' && isLoading && (<div className="absolute top-9 right-4">
+          <div className="animate-spin rounded-full h-4 w-4 border-b-2" style={{ borderColor: 'var(--ds-gray-900)' }}/>
+        </div>)}
+      <div key={attribute} className="flex flex-col gap-0 my-2">
+        <span className="font-medium" style={{ color: 'var(--ds-gray-500)' }}>
+          {attribute}
+        </span>
+        <span style={{ color: 'var(--ds-gray-1000)' }}>{displayValue}</span>
+      </div>
+    </div>);
+};
+export const AttributePanel = ({ data, isLoading, error, }) => {
+    const displayData = data;
+    const basicAttributes = Object.keys(displayData)
+        .filter((key) => !resolvableAttributes.includes(key))
+        .sort(sortByAttributeOrder);
+    const resolvedAttributes = Object.keys(displayData)
+        .filter((key) => resolvableAttributes.includes(key))
+        .sort(sortByAttributeOrder);
+    return (<div>
+      {basicAttributes.map((attribute) => (<AttributeBlock key={attribute} attribute={attribute} value={displayData[attribute]}/>))}
+      {error ? (<Alert variant="destructive" className="my-4">
+          <AlertCircle className="h-4 w-4"/>
+          <AlertTitle>Failed to load resource details</AlertTitle>
+          <AlertDescription className="text-sm">
+            {error.message}
+          </AlertDescription>
+        </Alert>) : (resolvedAttributes.map((attribute) => (<AttributeBlock isLoading={isLoading} key={attribute} attribute={attribute} value={displayData[attribute]}/>)))}
+    </div>);
+};
+//# sourceMappingURL=attribute-panel.jsx.map

package/dist/sidebar/attribute-panel.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-panel.jsx","sourceRoot":"","sources":["../../src/sidebar/attribute-panel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE7E,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,SAAS,GAAG,CAAC,KAAc,EAAE,EAAE;IACnC,OAAO,CACL,CAAC,GAAG,CACF,SAAS,CAAC,oDAAoD,CAC9D,KAAK,CAAC,CAAC;YACL,WAAW,EAAE,oBAAoB;YACjC,eAAe,EAAE,oBAAoB;YACrC,KAAK,EAAE,qBAAqB;SAC7B,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAC9C;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,cAAc,GAAmB;IACrC,cAAc;IACd,UAAU;IACV,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,OAAO;IACP,SAAS;IACT,OAAO;IACP,eAAe;IACf,WAAW;IACX,cAAc;IACd,SAAS;IACT,WAAW;IACX,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,WAAW;IACX,WAAW;IACX,aAAa;IACb,YAAY;IACZ,OAAO;IACP,WAAW;IACX,UAAU;IACV,WAAW;IACX,OAAO;IACP,QAAQ;IACR,UAAU;CACX,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,CAAS,EAAE,CAAS,EAAU,EAAE;IAC5D,MAAM,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,CAAiB,CAAC,IAAI,CAAC,CAAC;IAC9D,MAAM,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,CAAiB,CAAC,IAAI,CAAC,CAAC;IAC9D,OAAO,MAAM,GAAG,MAAM,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAGtB;IACF,kCAAkC;IAClC,YAAY,EAAE,CAAC,KAAc,EAAE,EAAE,CAC/B,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,IAAI,GAAG;IACpD,QAAQ,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,IAAI,GAAG;IAC5E,MAAM;IACN,KAAK,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IACxC,MAAM,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IACzC,MAAM,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IACzC,OAAO,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IAC1C,mBAAmB;IACnB,MAAM,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IACzC,OAAO,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IAC1C,eAAe;IACf,KAAK,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IACxC,gBAAgB;IAChB,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IAC5C,aAAa,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IAChD,kBAAkB;IAClB,YAAY,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IAC/C,gCAAgC;IAChC,OAAO,EAAE,CAAC,MAAe,EAAE,EAAE,CAAC,IAAI;IAClC,SAAS,EAAE,CAAC,MAAe,EAAE,EAAE,CAAC,IAAI;IACpC,WAAW,EAAE,CAAC,MAAe,EAAE,EAAE,CAAC,IAAI;IACtC,gBAAgB,EAAE,CAAC,MAAe,EAAE,EAAE,CAAC,IAAI;IAC3C,QAAQ;IACR,kDAAkD;IAClD,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE;IACvE,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE;IACvE,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE;IACvE,WAAW,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE;IACzE,UAAU,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE;IACxE,QAAQ,EAAE,CAAC,KAAc,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE;IACtE,wDAAwD;IACxD,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,CAAC,KAAc,EAAE,EAAE;QACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACzD,OAAO,CACL,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,QAAQ,aAAa,CAAC,CACnD;QAAA,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;gBACnB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClB,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3B;gBAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACf;cAAA,EAAE,GAAG,CAAC,CACP,CAAC;gBACJ,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CACtB;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;IACJ,CAAC;IACD,MAAM,EAAE,CAAC,KAAc,EAAE,EAAE;QACzB,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IACtE,CAAC;IACD,KAAK,EAAE,CAAC,KAAc,EAAE,EAAE;QACxB,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IACrE,CAAC;IACD,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,CAAC,KAAc,EAAE,EAAE;QAC5B,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IAC1E,CAAC;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG;IAC3B,OAAO;IACP,QAAQ;IACR,OAAO;IACP,WAAW;IACX,UAAU;IACV,WAAW;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,SAAS,GAKV,EAAE,EAAE;IACH,MAAM,SAAS,GACb,oBAAoB,CAAC,SAA8C,CAAC,CAAC;IACvE,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,YAAY,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,UAAU,CACvB;MAAA,CAAC,OAAO,SAAS,KAAK,SAAS,IAAI,SAAS,IAAI,CAC9C,CAAC,GAAG,CAAC,SAAS,CAAC,wBAAwB,CACrC;UAAA,CAAC,GAAG,CACF,SAAS,CAAC,8CAA8C,CACxD,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,oBAAoB,EAAE,CAAC,EAEjD;QAAA,EAAE,GAAG,CAAC,CACP,CACD;MAAA,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,0BAA0B,CACvD;QAAA,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC,CACnE;UAAA,CAAC,SAAS,CACZ;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,CACrE;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,KAAK,GAKN,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,IAAI,CAAC;IACzB,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;SAC7C,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,oBAAoB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACpD,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC9B,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;SAChD,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAoB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACnD,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAE9B,OAAO,CACL,CAAC,GAAG,CACF;MAAA,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAClC,CAAC,cAAc,CACb,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,KAAK,CAAC,CAAC,WAAW,CAAC,SAAqC,CAAC,CAAC,EAC1D,CACH,CAAC,CACF;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAC3C;UAAA,CAAC,WAAW,CAAC,SAAS,CAAC,SAAS,EAChC;UAAA,CAAC,UAAU,CAAC,+BAA+B,EAAE,UAAU,CACvD;UAAA,CAAC,gBAAgB,CAAC,SAAS,CAAC,SAAS,CACnC;YAAA,CAAC,KAAK,CAAC,OAAO,CAChB;UAAA,EAAE,gBAAgB,CACpB;QAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,CACF,kBAAkB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACpC,CAAC,cAAc,CACb,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,KAAK,CAAC,CAAC,WAAW,CAAC,SAAqC,CAAC,CAAC,EAC1D,CACH,CAAC,CACH,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/sidebar/detail-card.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export declare function DetailCard({ summary, children, }: {
+    summary: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=detail-card.d.ts.map

package/dist/sidebar/detail-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-card.d.ts","sourceRoot":"","sources":["../../src/sidebar/detail-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAgBA"}

package/dist/sidebar/detail-card.jsx

@@ -0,0 +1,13 @@
+export function DetailCard({ summary, children, }) {
+    return (<details className="group">
+      <summary className="cursor-pointer rounded-md border px-3 py-2 text-copy-14 hover:brightness-95" style={{
+            borderColor: 'var(--ds-gray-300)',
+            backgroundColor: 'var(--ds-gray-100)',
+            color: 'var(--ds-gray-900)',
+        }}>
+        {summary}
+      </summary>
+      <div className="p-2">{children}</div>
+    </details>);
+}
+//# sourceMappingURL=detail-card.jsx.map

package/dist/sidebar/detail-card.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-card.jsx","sourceRoot":"","sources":["../../src/sidebar/detail-card.tsx"],"names":[],"mappings":"AAEA,MAAM,UAAU,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,GAIT;IACC,OAAO,CACL,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CACxB;MAAA,CAAC,OAAO,CACN,SAAS,CAAC,6EAA6E,CACvF,KAAK,CAAC,CAAC;YACL,WAAW,EAAE,oBAAoB;YACjC,eAAe,EAAE,oBAAoB;YACrC,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAEF;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,OAAO,CACT;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CACtC;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC"}

package/dist/sidebar/events-list.d.ts

@@ -0,0 +1,8 @@
+import { type EnvMap } from '../api/workflow-server-actions';
+import type { SpanEvent } from '../trace-viewer/types';
+export declare function EventsList({ correlationId, env, events, }: {
+    correlationId: string;
+    env: EnvMap;
+    events: SpanEvent[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=events-list.d.ts.map

package/dist/sidebar/events-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events-list.d.ts","sourceRoot":"","sources":["../../src/sidebar/events-list.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,MAAM,EAEZ,MAAM,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKvD,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,GAAG,EACH,MAAM,GACP,EAAE;IACD,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB,+BAkGA"}

package/dist/sidebar/events-list.jsx

@@ -0,0 +1,67 @@
+'use client';
+import { AlertCircle } from 'lucide-react';
+import { useCallback } from 'react';
+import useSWR from 'swr';
+import { fetchEventsByCorrelationId, } from '../api/workflow-server-actions';
+import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
+import { convertEventsToSpanEvents } from '../workflow-traces/trace-span-construction';
+import { AttributeBlock } from './attribute-panel';
+import { DetailCard } from './detail-card';
+export function EventsList({ correlationId, env, events, }) {
+    const fetchEvents = useCallback(() => {
+        return fetchEventsByCorrelationId(env, correlationId, {
+            sortOrder: 'asc',
+            limit: 100,
+            withData: true,
+        }).then((evts) => {
+            if (!evts.success) {
+                throw new Error(evts.error?.message || 'Failed to fetch events');
+            }
+            return convertEventsToSpanEvents(evts.data.data || [], false);
+        });
+    }, [env, correlationId]);
+    const { data, error: eventError, isLoading: eventsLoading, } = useSWR(['workflow', 'events', correlationId], fetchEvents, {
+        fallbackData: events,
+        revalidateOnFocus: false,
+    });
+    const displayData = (data?.length ? data : events) || [];
+    return (<div className="mt-2" style={{ color: 'var(--ds-gray-1000)' }}>
+      <h3 className="text-heading-16 font-medium mt-4 mb-2" style={{ color: 'var(--ds-gray-1000)' }}>
+        Events ({eventsLoading ? '...' : displayData.length})
+      </h3>
+      {/* Events section */}
+      {eventError ? (<Alert variant="destructive" className="my-4">
+          <AlertCircle className="h-4 w-4"/>
+          <AlertTitle>Failed to load event data</AlertTitle>
+          <AlertDescription className="text-sm">
+            {eventError.message}
+          </AlertDescription>
+        </Alert>) : null}
+      {eventsLoading ? <div>Loading events...</div> : null}
+      {!eventsLoading && !eventError && displayData.length === 0 && (<div className="text-sm">No events found</div>)}
+      {displayData.length > 0 && !eventError ? (<div className="flex flex-col gap-2">
+          {displayData.map((event, index) => (<DetailCard key={`${event.name}-${index}`} summary={<>
+                  <span className="font-medium" style={{ color: 'var(--ds-gray-1000)' }}>
+                    {event.name}
+                  </span>{' '}
+                  -{' '}
+                  <span style={{ color: 'var(--ds-gray-700)' }}>
+                    {new Date(event.timestamp[0] * 1000 + event.timestamp[1] / 1e6).toLocaleString()}
+                  </span>
+                </>}>
+              <div className="mt-2 px-4">
+                {Object.entries(event.attributes)
+                    .filter(([key]) => key !== 'eventData')
+                    .map(([key, value]) => (<AttributeBlock key={key} attribute={key} value={value}/>))}
+                <div className="relative">
+                  {eventError && <div>Error loading event data</div>}
+                  {!eventError &&
+                    !eventsLoading &&
+                    event.attributes.eventData && (<AttributeBlock isLoading={eventsLoading} attribute="eventData" value={event.attributes.eventData}/>)}
+                </div>
+              </div>
+            </DetailCard>))}
+        </div>) : null}
+    </div>);
+}
+//# sourceMappingURL=events-list.jsx.map

package/dist/sidebar/events-list.jsx.map

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

package/dist/sidebar/workflow-detail-panel.d.ts

@@ -0,0 +1,8 @@
+import type { EnvMap } from '../api/workflow-server-actions';
+/**
+ * Custom panel component for workflow traces that displays entity details
+ */
+export declare function WorkflowDetailPanel({ env, }: {
+    env: EnvMap;
+}): React.JSX.Element | null;
+//# sourceMappingURL=workflow-detail-panel.d.ts.map

package/dist/sidebar/workflow-detail-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-detail-panel.d.ts","sourceRoot":"","sources":["../../src/sidebar/workflow-detail-panel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAK7D;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,GACJ,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA2E3B"}

package/dist/sidebar/workflow-detail-panel.jsx

@@ -0,0 +1,59 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useMemo } from 'react';
+import { toast } from 'sonner';
+import { useWorkflowResourceData } from '../api/workflow-api-client';
+import { EventsList } from '../sidebar/events-list';
+import { useTraceViewer } from '../trace-viewer';
+import { AttributePanel } from './attribute-panel';
+/**
+ * Custom panel component for workflow traces that displays entity details
+ */
+export function WorkflowDetailPanel({ env, }) {
+    const { state } = useTraceViewer();
+    const { selected } = state;
+    const data = selected?.span.attributes?.data;
+    // Determine resource ID and runId (needed for steps)
+    const { resource, resourceId, runId } = useMemo(() => {
+        const resource = selected?.span.attributes?.resource;
+        if (resource === 'step') {
+            const step = data;
+            return { resource: 'step', resourceId: step.stepId, runId: step.runId };
+        }
+        else if (resource === 'run') {
+            const run = data;
+            return { resource: 'run', resourceId: run.runId, runId: undefined };
+        }
+        else if (resource === 'hook') {
+            const hook = data;
+            return { resource: 'hook', resourceId: hook.hookId, runId: undefined };
+        }
+        else if (resource === 'sleep') {
+            return {
+                resource: 'sleep',
+                resourceId: selected?.span?.spanId,
+                runId: undefined,
+            };
+        }
+        return { resource: undefined, resourceId: undefined, runId: undefined };
+    }, [selected, data]);
+    // Fetch full resource data with events
+    const { data: fetchedData, error, loading, } = useWorkflowResourceData(env, resource, resourceId ?? '', { runId });
+    useEffect(() => {
+        if (error && selected && resource) {
+            toast.error(`Failed to load ${resource} details`, {
+                description: error.message,
+            });
+        }
+    }, [error, resource, selected]);
+    if (!selected || !resource || !resourceId) {
+        return null;
+    }
+    const displayData = fetchedData || data;
+    return (<div className={clsx('flex flex-col px-2')}>
+      {/* Content display */}
+      <AttributePanel data={displayData} isLoading={loading} error={error ?? undefined}/>
+      {resource !== 'run' && (<EventsList correlationId={resourceId} env={env} events={selected.span.events}/>)}
+    </div>);
+}
+//# sourceMappingURL=workflow-detail-panel.jsx.map

package/dist/sidebar/workflow-detail-panel.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-detail-panel.jsx","sourceRoot":"","sources":["../../src/sidebar/workflow-detail-panel.tsx"],"names":[],"mappings":"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"}

package/dist/trace-viewer/components/map.d.ts

@@ -0,0 +1,8 @@
+import { type MutableRefObject } from 'react';
+import type { VisibleSpan } from '../types';
+export declare const MiniMap: import("react").NamedExoticComponent<{
+    timelineRef: MutableRefObject<HTMLDivElement | null>;
+    rows: VisibleSpan[][];
+    scale: number;
+}>;
+//# sourceMappingURL=map.d.ts.map

package/dist/trace-viewer/components/map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map.d.ts","sourceRoot":"","sources":["../../../src/trace-viewer/components/map.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,gBAAgB,EAMtB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AA4B5C,eAAO,MAAM,OAAO;iBAKL,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC;UAC9C,WAAW,EAAE,EAAE;WACd,MAAM;EAoLb,CAAC"}

package/dist/trace-viewer/components/map.jsx

@@ -0,0 +1,164 @@
+import { memo, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { useTraceViewer } from '../context';
+import styles from '../trace-viewer.module.css';
+import { MAP_HEIGHT, TIMELINE_PADDING } from '../util/constants';
+import { useImmediateStyle } from '../util/use-immediate-style';
+const getDpi = () => {
+    if ('devicePixelRatio' in globalThis) {
+        return globalThis.devicePixelRatio || 1;
+    }
+    return 1;
+};
+const useDpi = () => {
+    const [dpi, setDpi] = useState(1);
+    useLayoutEffect(() => {
+        const onChange = () => setDpi(getDpi());
+        const media = matchMedia(`(resolution: ${dpi}dppx)`);
+        media.addEventListener('change', onChange);
+        onChange();
+        return () => {
+            media.removeEventListener('change', onChange);
+        };
+    }, [dpi]);
+    return dpi;
+};
+const padding = TIMELINE_PADDING;
+export const MiniMap = memo(function MiniMap({ timelineRef, rows, scale, }) {
+    const { state: { root, baseScale, timelineWidth, width: fullWidth, scrollbarWidth }, } = useTraceViewer();
+    const mapWidth = fullWidth + TIMELINE_PADDING * 2;
+    const dpi = useDpi();
+    const containerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const thumbRatio = (fullWidth / (fullWidth - scrollbarWidth)) *
+        Math.min(fullWidth / timelineWidth, baseScale / scale);
+    const thumbWidth = Math.min(fullWidth, (timelineWidth - scrollbarWidth) * thumbRatio);
+    useEffect(() => {
+        let isHeld = false;
+        let clientX = 0;
+        let rect;
+        const isValidEventTarget = (target) => {
+            return Boolean(containerRef.current?.contains(target));
+        };
+        let nextFrame = 0;
+        const onFrame = () => {
+            if (!isHeld || !rect)
+                return;
+            const $timeline = timelineRef.current;
+            if (!$timeline)
+                return;
+            const x = clientX - thumbWidth * 0.5 - rect.left;
+            $timeline.scrollLeft = x / thumbRatio;
+        };
+        const onPointerMove = (event) => {
+            ({ clientX } = event);
+            cancelAnimationFrame(nextFrame);
+            nextFrame = requestAnimationFrame(onFrame);
+        };
+        const onPointerDown = (event) => {
+            if (!isValidEventTarget(event.target))
+                return;
+            isHeld = true;
+            rect = containerRef.current?.getBoundingClientRect();
+            onPointerMove(event);
+        };
+        const onPointerUp = () => {
+            isHeld = false;
+            rect = undefined;
+        };
+        const onTouchStart = (event) => {
+            if (!isValidEventTarget(event.target))
+                return;
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        const onTouchMove = (event) => {
+            if (!isHeld)
+                return;
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        window.addEventListener('pointerdown', onPointerDown);
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('blur', onPointerUp);
+        window.addEventListener('touchstart', onTouchStart, { passive: false });
+        window.addEventListener('touchmove', onTouchMove, { passive: false });
+        return () => {
+            window.removeEventListener('pointerdown', onPointerDown);
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('blur', onPointerUp);
+            window.removeEventListener('touchstart', onTouchStart);
+            window.removeEventListener('touchmove', onTouchMove);
+            cancelAnimationFrame(nextFrame);
+        };
+    }, [timelineRef, thumbRatio, thumbWidth]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext('2d');
+        if (!canvas || !ctx)
+            return;
+        const render = () => {
+            ctx.resetTransform();
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.scale(dpi, dpi);
+            const gap = 1;
+            const height = 3;
+            const ratio = (mapWidth - padding * 2) / root.duration;
+            // TODO: fill spans based on depth
+            ctx.fillStyle = '#ccc';
+            ctx.beginPath();
+            for (const row of rows) {
+                for (const span of row) {
+                    const y = padding - gap + (gap + height) * span.row;
+                    if (y >= MAP_HEIGHT - height - padding)
+                        break;
+                    const x = padding + (span.startTime - root.startTime) * ratio;
+                    const width = span.duration * ratio;
+                    ctx.roundRect(x, y, width, height, height);
+                }
+            }
+            ctx.fill();
+        };
+        const nextFrame = requestAnimationFrame(render);
+        return () => cancelAnimationFrame(nextFrame);
+    }, [dpi, root, mapWidth, rows]);
+    const thumbRef = useRef(null);
+    const { style: thumbStyle, setStyle: setThumbStyle } = useImmediateStyle(thumbRef);
+    useLayoutEffect(() => {
+        const $timeline = timelineRef.current;
+        if (!$timeline)
+            return;
+        let nextFrame = 0;
+        const onFrame = () => {
+            setThumbStyle('transform', `translateX(${padding + $timeline.scrollLeft * thumbRatio}px)`);
+        };
+        onFrame();
+        const onScroll = () => {
+            cancelAnimationFrame(nextFrame);
+            nextFrame = requestAnimationFrame(onFrame);
+        };
+        $timeline.addEventListener('scroll', onScroll);
+        return () => {
+            cancelAnimationFrame(nextFrame);
+            $timeline.removeEventListener('scroll', onScroll);
+        };
+    }, [timelineRef, thumbRatio, setThumbStyle]);
+    return (<div className={styles.mapContainer} ref={containerRef} style={{
+            width: thumbWidth > 0 ? mapWidth : '100%',
+            height: MAP_HEIGHT,
+        }}>
+      <canvas className={styles.mapCanvas} height={MAP_HEIGHT * dpi} ref={canvasRef} style={{ width: mapWidth, height: MAP_HEIGHT }} width={mapWidth * dpi}/>
+      <div className={styles.mapThumb} ref={thumbRef} style={{
+            transform: thumbStyle.transform,
+            width: thumbWidth > 0
+                ? thumbWidth
+                : `calc(100% - ${TIMELINE_PADDING * 2}px)`,
+            top: 2,
+            height: MAP_HEIGHT - 4,
+        }}/>
+    </div>);
+});
+//# sourceMappingURL=map.jsx.map

package/dist/trace-viewer/components/map.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"map.jsx","sourceRoot":"","sources":["../../../src/trace-viewer/components/map.tsx"],"names":[],"mappings":"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"}

package/dist/trace-viewer/components/markers.d.ts

@@ -0,0 +1,22 @@
+import type { Dispatch, MutableRefObject, ReactNode } from 'react';
+import { type TraceViewerAction } from '../context';
+import type { MemoCache, RootNode, ScrollSnapshot, VisibleSpan, VisibleSpanEvent } from '../types';
+export declare function Markers({ scale }: {
+    scale: number;
+}): ReactNode;
+export declare function EventMarkers({ events, root, scale, }: {
+    events: VisibleSpanEvent[];
+    root: RootNode;
+    scale: number;
+}): ReactNode;
+export declare function CursorMarker({ memoCacheRef, timelineRef, root, spans, events, scale, dispatch, scrollSnapshotRef, }: {
+    memoCacheRef: MutableRefObject<MemoCache>;
+    timelineRef: MutableRefObject<HTMLDivElement | null>;
+    root: RootNode;
+    spans: VisibleSpan[];
+    events: VisibleSpanEvent[];
+    scale: number;
+    dispatch: Dispatch<TraceViewerAction>;
+    scrollSnapshotRef: MutableRefObject<ScrollSnapshot | undefined>;
+}): ReactNode;
+//# sourceMappingURL=markers.d.ts.map

package/dist/trace-viewer/components/markers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markers.d.ts","sourceRoot":"","sources":["../../../src/trace-viewer/components/markers.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,iBAAiB,EAAkB,MAAM,YAAY,CAAC;AAEpE,OAAO,KAAK,EACV,SAAS,EACT,QAAQ,EACR,cAAc,EACd,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAalB,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAwD/D;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,IAAI,EACJ,KAAK,GACN,EAAE;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,SAAS,CAiCZ;AASD,wBAAgB,YAAY,CAAC,EAC3B,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EACL,QAAQ,EACR,iBAAiB,GAClB,EAAE;IACD,YAAY,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC1C,WAAW,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACtC,iBAAiB,EAAE,gBAAgB,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CACjE,GAAG,SAAS,CAsZZ"}