@workflow/web-shared 5.0.0-beta.28 → 5.0.0-beta.29

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

@@ -5,7 +5,7 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
 import { format } from 'date-fns';
 import type { KeyboardEvent, ReactNode } from 'react';
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import {
@@ -148,16 +148,24 @@ const conversationTabs = [
 function ConversationWithTabs({
   conversation,
   args,
+  defaultOpen,
+  onOpenChange,
 }: {
   conversation: ModelMessage[];
   args: unknown[];
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
   const [activeTab, setActiveTab] = useState<'conversation' | 'json'>(
     'conversation'
   );
 
   return (
-    <Collapsible label="Input">
+    <Collapsible
+      label="Input"
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
       <TabbedContainer
         tabs={conversationTabs}
         activeTab={activeTab}
@@ -382,6 +390,8 @@ const timestampWithTooltipOrNull = (value: unknown): ReactNode | null => {
 
 interface DisplayContext {
   stepName?: string;
+  sectionOpen?: boolean;
+  onSectionOpenChange?: (open: boolean) => void;
 }
 
 const attributeToDisplayFn: Record<
@@ -457,7 +467,11 @@ const attributeToDisplayFn: Record<
   input: (value: unknown, context?: DisplayContext) => {
     if (isEncryptedMarker(value)) {
       return (
-        <Collapsible label="Input">
+        <Collapsible
+          label="Input"
+          defaultOpen={context?.sectionOpen}
+          onOpenChange={context?.onSectionOpenChange}
+        >
           <EncryptedFieldBlock />
         </Collapsible>
       );
@@ -480,7 +494,12 @@ const attributeToDisplayFn: Record<
         if (conversation && conversation.length > 0) {
           return (
             <>
-              <ConversationWithTabs conversation={conversation} args={args} />
+              <ConversationWithTabs
+                conversation={conversation}
+                args={args}
+                defaultOpen={context?.sectionOpen}
+                onOpenChange={context?.onSectionOpenChange}
+              />
               {hasClosureVars && (
                 <Collapsible label="Closure Variables">
                   {JsonBlock(closureVars)}
@@ -503,7 +522,11 @@ const attributeToDisplayFn: Record<
 
       return (
         <>
-          <Collapsible label="Input">
+          <Collapsible
+            label="Input"
+            defaultOpen={context?.sectionOpen}
+            onOpenChange={context?.onSectionOpenChange}
+          >
             {Array.isArray(args)
               ? args.map((v, i) => (
                   <div className="mt-2 first:mt-0" key={i}>
@@ -529,7 +552,11 @@ const attributeToDisplayFn: Record<
       return <Collapsible label="Input (no data)" disabled />;
     }
     return (
-      <Collapsible label="Input">
+      <Collapsible
+        label="Input"
+        defaultOpen={context?.sectionOpen}
+        onOpenChange={context?.onSectionOpenChange}
+      >
         {Array.isArray(value)
           ? value.map((v, i) => (
               <div className="mt-2 first:mt-0" key={i}>
@@ -540,17 +567,29 @@ const attributeToDisplayFn: Record<
       </Collapsible>
     );
   },
-  output: (value: unknown) => {
+  output: (value: unknown, context?: DisplayContext) => {
     if (isEncryptedMarker(value)) {
       return (
-        <Collapsible label="Output">
+        <Collapsible
+          label="Output"
+          defaultOpen={context?.sectionOpen}
+          onOpenChange={context?.onSectionOpenChange}
+        >
           <EncryptedFieldBlock />
         </Collapsible>
       );
     }
     if (!hasDisplayContent(value)) return null;
     if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
-    return <Collapsible label="Output">{JsonBlock(value)}</Collapsible>;
+    return (
+      <Collapsible
+        label="Output"
+        defaultOpen={context?.sectionOpen}
+        onOpenChange={context?.onSectionOpenChange}
+      >
+        {JsonBlock(value)}
+      </Collapsible>
+    );
   },
   error: (value: unknown) => {
     if (isEncryptedMarker(value)) {
@@ -642,6 +681,12 @@ const copyableBasicAttributes = new Set<AttributeKey>([
   'moduleSpecifier',
 ]);
 
+const loadingSectionLabels: Partial<Record<AttributeKey, string>> = {
+  input: 'Input',
+  output: 'Output',
+  eventData: 'Event Data',
+};
+
 export const AttributeBlock = ({
   attribute,
   value,
@@ -656,20 +701,19 @@ export const AttributeBlock = ({
   context?: DisplayContext;
 }) => {
   const decryptCtx = useContext(DecryptClickContext);
-  const isExpandableLoadingTarget =
-    attribute === 'input' ||
-    attribute === 'output' ||
-    attribute === 'eventData';
-  if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
-    const label =
-      attribute === 'eventData'
-        ? 'Event Data'
-        : attribute === 'output'
-          ? 'Output'
-          : 'Input';
+  const sectionOpenRef = useRef(false);
+  const handleSectionOpenChange = useCallback((open: boolean) => {
+    sectionOpenRef.current = open;
+  }, []);
+  const label = loadingSectionLabels[attribute as AttributeKey];
+  if (isLoading && label && !hasDisplayContent(value)) {
     if (decryptCtx?.hasEncryptedData) {
       return (
-        <Collapsible label={label} defaultOpen={attribute === 'eventData'}>
+        <Collapsible
+          label={label}
+          defaultOpen={attribute === 'eventData' || sectionOpenRef.current}
+          onOpenChange={handleSectionOpenChange}
+        >
           <EncryptedFieldBlock />
         </Collapsible>
       );
@@ -682,7 +726,11 @@ export const AttributeBlock = ({
   if (!displayFn) {
     return null;
   }
-  const displayValue = displayFn(value, context);
+  const displayValue = displayFn(value, {
+    ...context,
+    sectionOpen: sectionOpenRef.current,
+    onSectionOpenChange: handleSectionOpenChange,
+  });
   if (!displayValue) {
     return null;
   }
@@ -732,6 +780,7 @@ export const AttributeBlock = ({
 export const AttributePanel = ({
   data,
   moduleSpecifier,
+  moduleSourceUrl,
   isLoading,
   error,
   expiredAt,
@@ -743,6 +792,7 @@ export const AttributePanel = ({
 }: {
   data: Record<string, unknown>;
   moduleSpecifier?: string;
+  moduleSourceUrl?: string;
   isLoading?: boolean;
   error?: Error;
   expiredAt?: string | Date;
@@ -877,6 +927,11 @@ export const AttributePanel = ({
                           copyText={
                             isCopyableBasicAttribute ? displayValue : undefined
                           }
+                          href={
+                            attribute === 'moduleSpecifier'
+                              ? moduleSourceUrl
+                              : undefined
+                          }
                         />
                       );
                     })}

package/src/components/sidebar/attributes-block.tsx

@@ -5,6 +5,7 @@ import {
   RESERVED_ATTRIBUTE_KEY_PREFIX,
 } from '@workflow/world';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { ArrowUpRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { cn } from '../../lib/cn';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
@@ -21,7 +22,7 @@ function isReservedAttributeKey(key: string): boolean {
 }
 
 const rowValueVariants = cva(
-  'max-w-[60%] truncate text-right text-copy-13 text-gray-1000',
+  'min-w-0 flex-1 truncate text-right text-copy-13 text-gray-1000',
   {
     variants: {
       variant: {
@@ -36,7 +37,7 @@ const rowValueVariants = cva(
 );
 
 const rowCopyValueVariants = cva(
-  'flex min-w-0 max-w-[60%] items-center justify-end gap-1 text-copy-13 text-gray-1000',
+  'flex min-w-0 flex-1 items-center justify-end gap-1 text-copy-13 text-gray-1000',
   {
     variants: {
       variant: {
@@ -54,6 +55,7 @@ type DetailKeyValueRowProps = {
   label: string;
   value?: ReactNode;
   copyText?: string;
+  href?: string;
   removed?: boolean;
 };
 
@@ -61,6 +63,7 @@ function DetailKeyValueRowBase({
   label,
   value,
   copyText,
+  href,
   removed = false,
   variant,
 }: DetailKeyValueRowProps & VariantProps<typeof rowValueVariants>) {
@@ -77,13 +80,32 @@ function DetailKeyValueRowBase({
         </span>
       ) : copyText ? (
         <div className={cn(rowCopyValueVariants({ variant }))} title={copyText}>
-          <MiddleTruncate
-            value={copyText}
-            className={cn(
-              rowValueVariants({ variant, className: 'text-right' })
-            )}
-            style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
-          />
+          {href ? (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              className={cn(
+                rowValueVariants({ variant }),
+                'flex min-w-0 items-center gap-0.5 hover:underline'
+              )}
+            >
+              <MiddleTruncate
+                value={copyText}
+                className="min-w-0 text-right"
+                style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
+              />
+              <ArrowUpRight aria-hidden className="h-3 w-3 shrink-0" />
+            </a>
+          ) : (
+            <MiddleTruncate
+              value={copyText}
+              className={cn(
+                rowValueVariants({ variant, className: 'text-right' })
+              )}
+              style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
+            />
+          )}
           <CopyButton
             copyText={copyText}
             ariaLabel={`Copy ${label}`}
@@ -92,7 +114,18 @@ function DetailKeyValueRowBase({
         </div>
       ) : (
         <span className={cn(rowValueVariants({ variant }))} title={stringValue}>
-          {value}
+          {href ? (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              className="hover:underline"
+            >
+              {value}
+            </a>
+          ) : (
+            value
+          )}
         </span>
       )}
     </div>

package/src/components/sidebar/entity-detail-panel.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
@@ -62,6 +63,7 @@ export function EntityDetailPanel({
   isDecrypting = false,
   selectedSpan,
   showSeparateEventOccurrenceTimestamps = false,
+  getModuleSourceUrl,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
@@ -95,6 +97,10 @@ export function EntityDetailPanel({
   selectedSpan: SelectedSpanInfo | null;
   /** Show occurredAt separately instead of folding it into the Created timestamp. */
   showSeparateEventOccurrenceTimestamps?: boolean;
+  getModuleSourceUrl?: (info: {
+    moduleSpecifier: string;
+    deploymentId: string;
+  }) => string | undefined;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
@@ -277,6 +283,21 @@ export function EntityDetailPanel({
     return undefined;
   }, [displayData, run.workflowName]);
 
+  const moduleSourceUrl = useMemo(() => {
+    if (!getModuleSourceUrl || !moduleSpecifier) return undefined;
+    const parsed =
+      parseStepName(moduleSpecifier) ?? parseWorkflowName(moduleSpecifier);
+    if (!parsed) return undefined;
+    const dataDeploymentId = displayData.deploymentId;
+    return getModuleSourceUrl({
+      moduleSpecifier: parsed.moduleSpecifier,
+      deploymentId:
+        typeof dataDeploymentId === 'string'
+          ? dataDeploymentId
+          : run.deploymentId,
+    });
+  }, [getModuleSourceUrl, moduleSpecifier, displayData, run.deploymentId]);
+
   if (!selectedSpan || !resource || !resourceId) {
     return null;
   }
@@ -360,6 +381,7 @@ export function EntityDetailPanel({
           <AttributePanel
             data={displayData}
             moduleSpecifier={moduleSpecifier}
+            moduleSourceUrl={moduleSourceUrl}
             expiredAt={run.expiredAt}
             isLoading={loading}
             error={error ?? undefined}

package/src/components/sidebar/sidebar-data-context.tsx

@@ -29,6 +29,10 @@ export interface SidebarDataContextValue {
   hasEncryptedData?: boolean;
   /** Show occurredAt separately instead of folding it into the Created timestamp. */
   showSeparateEventOccurrenceTimestamps?: boolean;
+  getModuleSourceUrl?: (info: {
+    moduleSpecifier: string;
+    deploymentId: string;
+  }) => string | undefined;
 }
 
 const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);