@workflow/web-shared 5.0.0-beta.3 → 5.0.0-beta.31

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

@@ -3,28 +3,34 @@
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
-import { Lock } from 'lucide-react';
+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 { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '../ui/collapsible';
+import { ContextCardProvider } from '../ui/context-card';
 import {
   DecryptClickContext,
   RunClickContext,
   StreamClickContext,
 } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
-import {
-  ErrorStackBlock,
-  isStructuredErrorWithStack,
-} from '../ui/error-stack-block';
+import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
-import { Spinner } from '../ui/spinner';
 import { TimestampTooltip } from '../ui/timestamp-tooltip';
+import {
+  DetailMonoKeyValueRow,
+  RunAttributesCard,
+  RunMetadataCard,
+} from './attributes-block';
 import { ConversationView } from './conversation-view';
-import { CopyableDataBlock } from './copyable-data-block';
-import { DetailCard } from './detail-card';
+import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 
 /**
  * Tab button for conversation/JSON toggle
@@ -142,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 (
-    <DetailCard summary={`Input (${conversation.length} messages)`}>
+    <Collapsible
+      label="Input"
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
       <TabbedContainer
         tabs={conversationTabs}
         activeTab={activeTab}
@@ -172,7 +186,7 @@ function ConversationWithTabs({
           </div>
         )}
       </TabbedContainer>
-    </DetailCard>
+    </Collapsible>
   );
 }
 
@@ -180,51 +194,8 @@ function ConversationWithTabs({
  * Render a value with the shared DataInspector (ObjectInspector with
  * custom theming, nodeRenderer for StreamRef/ClassInstanceRef, etc.)
  */
-/**
- * Inline display for an encrypted field — no expand, just a flat label
- * with the lucide Lock icon matching the title bar Decrypt button.
- */
 function EncryptedFieldBlock() {
-  const ctx = useContext(DecryptClickContext);
-  if (ctx) {
-    return (
-      <button
-        type="button"
-        onClick={ctx.onDecrypt}
-        disabled={ctx.isDecrypting}
-        className="flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs cursor-pointer transition-colors"
-        style={{
-          borderColor: 'var(--ds-gray-400)',
-          backgroundColor: 'var(--ds-gray-100)',
-          color: 'var(--ds-gray-700)',
-          opacity: ctx.isDecrypting ? 0.6 : 1,
-        }}
-        title="Click to decrypt"
-      >
-        {ctx.isDecrypting ? (
-          <Spinner size={12} />
-        ) : (
-          <Lock className="h-3 w-3" />
-        )}
-        <span className="font-medium">
-          {ctx.isDecrypting ? 'Decrypting…' : 'Decrypt'}
-        </span>
-      </button>
-    );
-  }
-  return (
-    <div
-      className="flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs"
-      style={{
-        borderColor: 'var(--ds-gray-300)',
-        backgroundColor: 'var(--ds-gray-100)',
-        color: 'var(--ds-gray-700)',
-      }}
-    >
-      <Lock className="h-3 w-3" />
-      <span className="font-medium">Encrypted</span>
-    </div>
-  );
+  return <EncryptedDataBlock />;
 }
 
 /**
@@ -262,6 +233,7 @@ type AttributeKey =
   | keyof WorkflowRun
   | keyof Hook
   | keyof Event
+  | 'occurredAt'
   | 'moduleSpecifier'
   | 'eventData'
   | 'resumeAt'
@@ -269,7 +241,9 @@ type AttributeKey =
   | 'workflowCoreVersion'
   | 'receivedCount'
   | 'lastReceivedAt'
-  | 'disposedAt';
+  | 'disposedAt'
+  | 'isSystem'
+  | 'errorCode';
 
 const attributeOrder: AttributeKey[] = [
   'workflowName',
@@ -294,6 +268,7 @@ const attributeOrder: AttributeKey[] = [
   'projectId',
   'environment',
   'executionContext',
+  'occurredAt',
   'createdAt',
   'startedAt',
   'updatedAt',
@@ -305,6 +280,7 @@ const attributeOrder: AttributeKey[] = [
   'eventData',
   'input',
   'output',
+  'attributes',
   'resumeAt',
 ];
 
@@ -326,11 +302,14 @@ const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
   attempt: 'Attempts',
   eventId: 'Event ID',
   runId: 'Run ID',
+  token: 'Token',
   eventType: 'Event Type',
+  errorCode: 'Error Code',
   correlationId: 'Correlation ID',
   deploymentId: 'Deployment ID',
   specVersion: 'Spec Version',
   workflowCoreVersion: '@workflow/core version',
+  occurredAt: 'Occurred',
   createdAt: 'Created',
   startedAt: 'Started',
   updatedAt: 'Updated',
@@ -380,15 +359,7 @@ const parseDateValue = (value: unknown): Date | null => {
 };
 
 const formatLocalMillisecondTime = (date: Date): string =>
-  date.toLocaleString(undefined, {
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-    fractionalSecondDigits: 3,
-  });
+  format(date, 'MMM dd HH:mm:ss.SS OO').toUpperCase();
 
 export const localMillisecondTime = (value: unknown): string => {
   const date = parseDateValue(value);
@@ -396,7 +367,6 @@ export const localMillisecondTime = (value: unknown): string => {
     return '-';
   }
 
-  // e.g. 12/17/2025, 9:08:55.182 AM
   return formatLocalMillisecondTime(date);
 };
 
@@ -420,6 +390,8 @@ const timestampWithTooltipOrNull = (value: unknown): ReactNode | null => {
 
 interface DisplayContext {
   stepName?: string;
+  sectionOpen?: boolean;
+  onSectionOpenChange?: (open: boolean) => void;
 }
 
 const attributeToDisplayFn: Record<
@@ -432,7 +404,7 @@ const attributeToDisplayFn: Record<
   stepName: (_value: unknown) => null,
   // IDs
   runId: (_value: unknown) => null,
-  stepId: (_value: unknown) => null,
+  stepId: (value: unknown) => String(value),
   hookId: (value: unknown) => String(value),
   eventId: (value: unknown) => String(value),
   // Run/step details
@@ -441,6 +413,7 @@ const attributeToDisplayFn: Record<
   // Hook details
   token: (value: unknown) => String(value),
   isWebhook: (value: unknown) => String(value),
+  isSystem: (value: unknown) => String(value),
   receivedCount: (value: unknown) => String(value),
   lastReceivedAt: localMillisecondTimeOrNull,
   disposedAt: localMillisecondTimeOrNull,
@@ -456,7 +429,15 @@ const attributeToDisplayFn: Record<
   projectId: (_value: unknown) => null,
   environment: (_value: unknown) => null,
   executionContext: (_value: unknown) => null,
+  // Attributes — string-string metadata attached to the run.
+  // Rendered as key-value rows in its own collapsible section;
+  // if empty/missing, hidden by the hasDisplayContent gate.
+  attributes: (value: unknown) => {
+    if (!hasDisplayContent(value)) return null;
+    return <RunAttributesCard attributes={value as Record<string, string>} />;
+  },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
+  occurredAt: timestampWithTooltipOrNull,
   createdAt: timestampWithTooltipOrNull,
   startedAt: timestampWithTooltipOrNull,
   updatedAt: (_value: unknown) => null,
@@ -467,12 +448,34 @@ const attributeToDisplayFn: Record<
   // Resolved attributes, won't actually use this function
   metadata: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
-    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
-    if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
-    return JsonBlock(value);
+    if (isEncryptedMarker(value)) {
+      return (
+        <Collapsible label="Metadata">
+          <EncryptedDataBlock />
+        </Collapsible>
+      );
+    }
+    if (isExpiredMarker(value)) {
+      return (
+        <Collapsible label="Metadata">
+          <ExpiredFieldBlock />
+        </Collapsible>
+      );
+    }
+    return <RunMetadataCard metadata={value} />;
   },
   input: (value: unknown, context?: DisplayContext) => {
-    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
+    if (isEncryptedMarker(value)) {
+      return (
+        <Collapsible
+          label="Input"
+          defaultOpen={context?.sectionOpen}
+          onOpenChange={context?.onSectionOpenChange}
+        >
+          <EncryptedFieldBlock />
+        </Collapsible>
+      );
+    }
     if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     // Check if input has args + closure vars structure
     if (value && typeof value === 'object' && 'args' in value) {
@@ -481,8 +484,6 @@ const attributeToDisplayFn: Record<
         closureVars?: Record<string, unknown>;
         thisVal?: unknown;
       };
-      const argCount = Array.isArray(args) ? args.length : 0;
-      const argLabel = argCount === 1 ? 'argument' : 'arguments';
       const hasClosureVars = hasDisplayContent(closureVars);
       const hasThisVal = hasDisplayContent(thisVal);
       const hasArgs = hasDisplayContent(args);
@@ -493,16 +494,21 @@ 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 && (
-                <DetailCard summary="Closure Variables">
+                <Collapsible label="Closure Variables">
                   {JsonBlock(closureVars)}
-                </DetailCard>
+                </Collapsible>
               )}
               {hasThisVal && (
-                <DetailCard summary="This Value">
+                <Collapsible label="This Value">
                   {JsonBlock(thisVal)}
-                </DetailCard>
+                </Collapsible>
               )}
             </>
           );
@@ -511,21 +517,15 @@ const attributeToDisplayFn: Record<
 
       // Don't render an empty "Input (0 arguments)" card when no input exists.
       if (!hasArgs && !hasClosureVars && !hasThisVal) {
-        return (
-          <DetailCard
-            summary="Input (no data)"
-            disabled
-            summaryClassName="text-label-14 font-medium py-2"
-          />
-        );
+        return <Collapsible label="Input (no data)" disabled />;
       }
 
       return (
         <>
-          <DetailCard
-            summary={`Input (${argCount} ${argLabel})`}
-            summaryClassName="text-label-14 font-medium py-2"
-            contentClassName="mt-0"
+          <Collapsible
+            label="Input"
+            defaultOpen={context?.sectionOpen}
+            onOpenChange={context?.onSectionOpenChange}
           >
             {Array.isArray(args)
               ? args.map((v, i) => (
@@ -534,36 +534,28 @@ const attributeToDisplayFn: Record<
                   </div>
                 ))
               : JsonBlock(args)}
-          </DetailCard>
+          </Collapsible>
           {hasClosureVars && (
-            <DetailCard summary="Closure Variables">
+            <Collapsible label="Closure Variables">
               {JsonBlock(closureVars)}
-            </DetailCard>
+            </Collapsible>
           )}
           {hasThisVal && (
-            <DetailCard summary="this">{JsonBlock(thisVal)}</DetailCard>
+            <Collapsible label="Context">{JsonBlock(thisVal)}</Collapsible>
           )}
         </>
       );
     }
 
     // Fallback: treat as plain array or object
-    const argCount = Array.isArray(value) ? value.length : 0;
-    const argLabel = argCount === 1 ? 'argument' : 'arguments';
     if (!hasDisplayContent(value)) {
-      return (
-        <DetailCard
-          summary="Input (no data)"
-          disabled
-          summaryClassName="text-label-14 font-medium py-2"
-        />
-      );
+      return <Collapsible label="Input (no data)" disabled />;
     }
     return (
-      <DetailCard
-        summary={`Input (${argCount} ${argLabel})`}
-        summaryClassName="text-label-14 font-medium py-2"
-        contentClassName="mt-0"
+      <Collapsible
+        label="Input"
+        defaultOpen={context?.sectionOpen}
+        onOpenChange={context?.onSectionOpenChange}
       >
         {Array.isArray(value)
           ? value.map((v, i) => (
@@ -572,57 +564,79 @@ const attributeToDisplayFn: Record<
               </div>
             ))
           : JsonBlock(value)}
-      </DetailCard>
+      </Collapsible>
     );
   },
-  output: (value: unknown) => {
+  output: (value: unknown, context?: DisplayContext) => {
+    if (isEncryptedMarker(value)) {
+      return (
+        <Collapsible
+          label="Output"
+          defaultOpen={context?.sectionOpen}
+          onOpenChange={context?.onSectionOpenChange}
+        >
+          <EncryptedFieldBlock />
+        </Collapsible>
+      );
+    }
     if (!hasDisplayContent(value)) return null;
-    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
     if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     return (
-      <DetailCard
-        summary="Output"
-        summaryClassName="text-label-14 font-medium py-2"
-        contentClassName="mt-0"
+      <Collapsible
+        label="Output"
+        defaultOpen={context?.sectionOpen}
+        onOpenChange={context?.onSectionOpenChange}
       >
         {JsonBlock(value)}
-      </DetailCard>
+      </Collapsible>
     );
   },
   error: (value: unknown) => {
-    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
+    if (isEncryptedMarker(value)) {
+      return (
+        <Collapsible label="Error" defaultOpen>
+          <EncryptedFieldBlock />
+        </Collapsible>
+      );
+    }
     if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     if (!hasDisplayContent(value)) return null;
 
-    // If the error object has a `stack` field, render it as readable
-    // pre-formatted text. Otherwise fall back to the raw JSON viewer.
-    if (isStructuredErrorWithStack(value)) {
+    // Structured workflow errors may be persisted as either `{ message }` or
+    // `{ message, stack }`. Render both with the dedicated error block.
+    if (isStructuredError(value)) {
       return (
-        <DetailCard
-          summary="Error"
-          summaryClassName="text-label-14 font-medium py-2"
-          contentClassName="mt-0"
-        >
+        <Collapsible label="Error" defaultOpen>
           <ErrorStackBlock value={value} />
-        </DetailCard>
+        </Collapsible>
       );
     }
 
     return (
-      <DetailCard
-        summary="Error"
-        summaryClassName="text-label-14 font-medium py-2"
-        contentClassName="mt-0"
-      >
+      <Collapsible label="Error" defaultOpen>
         {JsonBlock(value)}
-      </DetailCard>
+      </Collapsible>
     );
   },
   eventData: (value: unknown) => {
-    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
+    if (isEncryptedMarker(value)) {
+      return (
+        <Collapsible label="Event Data" defaultOpen>
+          <EncryptedFieldBlock />
+        </Collapsible>
+      );
+    }
     if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     if (!hasDisplayContent(value)) return null;
-    return <DetailCard summary="Event Data">{JsonBlock(value)}</DetailCard>;
+    return (
+      <Collapsible label="Event Data" defaultOpen>
+        {JsonBlock(value)}
+      </Collapsible>
+    );
+  },
+  errorCode: (value: unknown) => {
+    if (typeof value !== 'string' || value.length === 0) return null;
+    return String(value);
   },
 };
 
@@ -631,9 +645,21 @@ const resolvableAttributes = [
   'output',
   'error',
   'metadata',
+  'attributes',
   'eventData',
 ];
 
+// Attributes whose displayFn renders its own section header via Collapsible,
+// so the outer AttributeBlock should not duplicate the label.
+const selfHeaderedAttributes = new Set([
+  'input',
+  'output',
+  'error',
+  'metadata',
+  'attributes',
+  'eventData',
+]);
+
 const ExpiredDataMessage = () => (
   <div
     className="text-copy-12 rounded-md border p-4 my-2"
@@ -647,6 +673,20 @@ const ExpiredDataMessage = () => (
   </div>
 );
 
+const copyableBasicAttributes = new Set<AttributeKey>([
+  'stepId',
+  'hookId',
+  'eventId',
+  'deploymentId',
+  'moduleSpecifier',
+]);
+
+const loadingSectionLabels: Partial<Record<AttributeKey, string>> = {
+  input: 'Input',
+  output: 'Output',
+  eventData: 'Event Data',
+};
+
 export const AttributeBlock = ({
   attribute,
   value,
@@ -660,19 +700,25 @@ export const AttributeBlock = ({
   inline?: boolean;
   context?: DisplayContext;
 }) => {
-  const isExpandableLoadingTarget =
-    attribute === 'input' || attribute === 'eventData';
-  if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
-    return (
-      <div
-        className={`my-2 flex flex-col ${attribute === 'input' ? 'gap-2 my-3.5' : 'gap-0'}`}
-      >
-        <span className="text-label-14 text-gray-1000 font-medium first-letter:uppercase">
-          {attribute}
-        </span>
-        <Skeleton className="h-9 w-full rounded-md" />
-      </div>
-    );
+  const decryptCtx = useContext(DecryptClickContext);
+  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' || sectionOpenRef.current}
+          onOpenChange={handleSectionOpenChange}
+        >
+          <EncryptedFieldBlock />
+        </Collapsible>
+      );
+    }
+    return <Collapsible label={label} />;
   }
 
   const displayFn =
@@ -680,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;
   }
@@ -701,6 +751,10 @@ export const AttributeBlock = ({
     );
   }
 
+  if (selfHeaderedAttributes.has(attribute)) {
+    return <>{displayValue}</>;
+  }
+
   return (
     <div className="relative">
       {typeof isLoading === 'boolean' && isLoading && (
@@ -711,10 +765,7 @@ export const AttributeBlock = ({
           />
         </div>
       )}
-      <div
-        key={attribute}
-        className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' || attribute === 'error' ? 'gap-2 my-3.5' : 'gap-0'}`}
-      >
+      <div key={attribute} className="my-2 flex flex-col gap-0">
         <span className="text-label-14 text-gray-1000 font-medium first-letter:uppercase">
           {attribute}
         </span>
@@ -729,6 +780,7 @@ export const AttributeBlock = ({
 export const AttributePanel = ({
   data,
   moduleSpecifier,
+  moduleSourceUrl,
   isLoading,
   error,
   expiredAt,
@@ -740,6 +792,7 @@ export const AttributePanel = ({
 }: {
   data: Record<string, unknown>;
   moduleSpecifier?: string;
+  moduleSourceUrl?: string;
   isLoading?: boolean;
   error?: Error;
   expiredAt?: string | Date;
@@ -754,7 +807,6 @@ export const AttributePanel = ({
   /** Resource type of the selected span — used to show targeted loading skeletons. */
   resource?: string;
 }) => {
-  const toast = useToast();
   // Extract workflowCoreVersion from executionContext for display
   const displayData = useMemo(() => {
     const result = { ...data };
@@ -784,16 +836,16 @@ export const AttributePanel = ({
 
     if (!isLoading) return present;
 
-    // During loading, ensure input appears so its skeleton renders
-    // in the correct position (above the events section).
-    const loadingDefaults = ['input'];
-    for (const key of loadingDefaults) {
+    if (resource === 'sleep') return present;
+
+    const loadingPlaceholders = ['input', 'output'];
+    for (const key of loadingPlaceholders) {
       if (!present.includes(key)) {
         present.push(key);
       }
     }
     return present.sort(sortByAttributeOrder);
-  }, [displayData, isLoading]);
+  }, [displayData, isLoading, resource]);
 
   // Filter out attributes that return null
   const visibleBasicAttributes = basicAttributes.filter((attribute) => {
@@ -838,113 +890,64 @@ export const AttributePanel = ({
     }),
     [displayData.stepName]
   );
-  const handleCopyModuleSpecifier = useCallback((value: string) => {
-    navigator.clipboard
-      .writeText(value)
-      .then(() => {
-        toast.success('moduleSpecifier copied');
-      })
-      .catch(() => {
-        toast.error('Failed to copy moduleSpecifier');
-      });
-  }, []);
+  const outerDecryptCtx = useContext(DecryptClickContext);
+  const decryptValue = onDecrypt
+    ? {
+        onDecrypt,
+        isDecrypting,
+        hasEncryptedData: outerDecryptCtx?.hasEncryptedData,
+      }
+    : outerDecryptCtx;
 
   return (
-    <RunClickContext.Provider value={onRunClick}>
-      <StreamClickContext.Provider value={onStreamClick}>
-        <DecryptClickContext.Provider
-          value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
-        >
-          <div>
-            {/* Basic attributes in a vertical layout with border */}
+    <ContextCardProvider>
+      <RunClickContext.Provider value={onRunClick}>
+        <StreamClickContext.Provider value={onStreamClick}>
+          <DecryptClickContext.Provider value={decryptValue}>
             {visibleBasicAttributes.length > 0 && (
-              <div
-                className="mb-3 flex flex-col overflow-hidden rounded-md border"
-                style={{
-                  borderColor: 'var(--ds-gray-300)',
-                }}
-              >
-                {orderedBasicAttributes.map((attribute, index) => {
-                  const displayValue = attributeToDisplayFn[
-                    attribute as keyof typeof attributeToDisplayFn
-                  ]?.(displayData[attribute as keyof typeof displayData]);
-                  const isModuleSpecifier = attribute === 'moduleSpecifier';
-                  const moduleSpecifierValue =
-                    typeof displayValue === 'string'
-                      ? displayValue
-                      : String(
-                          displayValue ?? displayData.moduleSpecifier ?? ''
-                        );
-                  const shouldCapitalizeLabel =
-                    attribute !== 'workflowCoreVersion';
-                  const showResumeAtSkeleton =
-                    isLoading && resource === 'sleep' && !displayData.resumeAt;
-                  const showDivider =
-                    index < orderedBasicAttributes.length - 1 ||
-                    showResumeAtSkeleton;
-
-                  return (
-                    <div key={attribute} className="py-1">
-                      <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
-                        <span
-                          className={
-                            shouldCapitalizeLabel
-                              ? 'text-[14px] first-letter:uppercase'
-                              : 'text-[14px]'
+              <CollapsibleRoot defaultOpen>
+                <CollapsibleTrigger>Metadata</CollapsibleTrigger>
+                <CollapsibleContent className="mt-0 mb-2">
+                  <div className="flex flex-col">
+                    {orderedBasicAttributes.map((attribute) => {
+                      const displayValue = attributeToDisplayFn[
+                        attribute as keyof typeof attributeToDisplayFn
+                      ]?.(displayData[attribute as keyof typeof displayData]);
+                      const isCopyableBasicAttribute =
+                        copyableBasicAttributes.has(
+                          attribute as AttributeKey
+                        ) && typeof displayValue === 'string';
+                      const label = getAttributeDisplayName(attribute);
+
+                      return (
+                        <DetailMonoKeyValueRow
+                          key={attribute}
+                          label={label}
+                          value={displayValue}
+                          copyText={
+                            isCopyableBasicAttribute ? displayValue : undefined
+                          }
+                          href={
+                            attribute === 'moduleSpecifier'
+                              ? moduleSourceUrl
+                              : undefined
                           }
-                          style={{ color: 'var(--ds-gray-700)' }}
-                        >
-                          {getAttributeDisplayName(attribute)}
-                        </span>
-                        {isModuleSpecifier ? (
-                          <button
-                            type="button"
-                            className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
-                            style={{
-                              color: 'var(--ds-gray-1000)',
-                              background: 'transparent',
-                              border: 'none',
-                              padding: 0,
-                            }}
-                            title={moduleSpecifierValue}
-                            onClick={() =>
-                              handleCopyModuleSpecifier(moduleSpecifierValue)
-                            }
-                          >
-                            {moduleSpecifierValue}
-                          </button>
-                        ) : (
-                          <span
-                            className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
-                            style={{ color: 'var(--ds-gray-1000)' }}
-                          >
-                            {displayValue}
-                          </span>
-                        )}
-                      </div>
-                      {showDivider ? (
-                        <div
-                          className="mx-2.5 border-b"
-                          style={{ borderColor: 'var(--ds-gray-300)' }}
                         />
-                      ) : null}
-                    </div>
-                  );
-                })}
-                {isLoading && resource === 'sleep' && !displayData.resumeAt && (
-                  <div className="py-1">
-                    <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
-                      <span
-                        className="text-[14px] first-letter:uppercase"
-                        style={{ color: 'var(--ds-gray-700)' }}
-                      >
-                        resumeAt
-                      </span>
-                      <Skeleton className="h-4 w-[55%]" />
-                    </div>
+                      );
+                    })}
+                    {isLoading &&
+                      resource === 'sleep' &&
+                      !displayData.resumeAt && (
+                        <div className="flex items-center justify-between gap-3 py-0.5">
+                          <span className="text-label-13 text-gray-900">
+                            Resume
+                          </span>
+                          <Skeleton className="h-4 w-[55%]" />
+                        </div>
+                      )}
                   </div>
-                )}
-              </div>
+                </CollapsibleContent>
+              </CollapsibleRoot>
             )}
             {error ? (
               <ErrorCard
@@ -954,22 +957,20 @@ export const AttributePanel = ({
               />
             ) : hasExpired ? (
               <ExpiredDataMessage />
-            ) : (
-              <>
-                {resolvedAttributes.map((attribute) => (
-                  <AttributeBlock
-                    isLoading={isLoading}
-                    key={attribute}
-                    attribute={attribute}
-                    value={displayData[attribute as keyof typeof displayData]}
-                    context={displayContext}
-                  />
-                ))}
-              </>
-            )}
-          </div>
-        </DecryptClickContext.Provider>
-      </StreamClickContext.Provider>
-    </RunClickContext.Provider>
+            ) : resolvedAttributes.length > 0 ? (
+              resolvedAttributes.map((attribute) => (
+                <AttributeBlock
+                  isLoading={isLoading}
+                  key={attribute}
+                  attribute={attribute}
+                  value={displayData[attribute as keyof typeof displayData]}
+                  context={displayContext}
+                />
+              ))
+            ) : null}
+          </DecryptClickContext.Provider>
+        </StreamClickContext.Provider>
+      </RunClickContext.Provider>
+    </ContextCardProvider>
   );
 };