Small detail panel cleanup

.changeset/eleven-lilies-film.md

@@ -0,0 +1,5 @@
+---
+"@workflow/web-shared": patch
+---
+
+Detail panel cleanup: module copy button, step id spacing, line for trace state

packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx

@@ -2,7 +2,15 @@
 
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import type { CSSProperties, ReactNode } from 'react';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { cn } from '../../../lib/utils';
 import {
   formatDuration,
@@ -266,13 +274,23 @@ function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
           const leadInLabel = formatDurationPrecise(seg.fullDurationMs);
           const showLeadInLabel =
             seg.pixelWidth >= Math.max(40, leadInLabel.length * 6 + 12);
+          const isFullWidthQueued = segments.length === 1;
           return (
-            <LeadInConnector
-              key={i}
-              leftPct={seg.leftPct}
-              widthPct={seg.widthPct}
-              label={showLeadInLabel ? leadInLabel : null}
-            />
+            <Fragment key={i}>
+              <LeadInConnector
+                leftPct={seg.leftPct}
+                widthPct={seg.widthPct}
+                label={showLeadInLabel ? leadInLabel : null}
+              />
+              {isFullWidthQueued ? (
+                <div
+                  className="absolute top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500"
+                  style={{
+                    left: `calc(${seg.leftPct + seg.widthPct}% - 1.5px)`,
+                  }}
+                />
+              ) : null}
+            </Fragment>
           );
         }
 

packages/web-shared/src/components/new-trace-viewer/utils.ts

@@ -243,7 +243,7 @@ function computeStepSegmentsFromSpan(
   ]);
 
   if (marks.length === 0) {
-    segments.push({ startFraction: 0, endFraction: 1, status: 'running' });
+    segments.push({ startFraction: 0, endFraction: 1, status: 'queued' });
     return segments;
   }
 

packages/web-shared/src/components/sidebar/attribute-panel.tsx

@@ -7,7 +7,6 @@ import { format } from 'date-fns';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
-import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
 import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
@@ -616,6 +615,7 @@ const copyableBasicAttributes = new Set<AttributeKey>([
   'hookId',
   'eventId',
   'deploymentId',
+  'moduleSpecifier',
 ]);
 
 export const AttributeBlock = ({
@@ -733,7 +733,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 };
@@ -819,17 +818,6 @@ 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
     ? {
@@ -850,16 +838,9 @@ export const AttributePanel = ({
                   const displayValue = attributeToDisplayFn[
                     attribute as keyof typeof attributeToDisplayFn
                   ]?.(displayData[attribute as keyof typeof displayData]);
-                  const isModuleSpecifier = attribute === 'moduleSpecifier';
                   const isCopyableBasicAttribute =
                     copyableBasicAttributes.has(attribute as AttributeKey) &&
                     typeof displayValue === 'string';
-                  const moduleSpecifierValue =
-                    typeof displayValue === 'string'
-                      ? displayValue
-                      : String(
-                          displayValue ?? displayData.moduleSpecifier ?? ''
-                        );
 
                   return (
                     <div
@@ -869,34 +850,15 @@ export const AttributePanel = ({
                       <span className="text-label-14 text-gray-900">
                         {getAttributeDisplayName(attribute)}
                       </span>
-                      {isModuleSpecifier ? (
-                        <button
-                          type="button"
-                          className="min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono"
-                          style={{
-                            color: 'var(--ds-gray-1000)',
-                            background: 'transparent',
-                            border: 'none',
-                            padding: 0,
-                          }}
-                          title={moduleSpecifierValue}
-                          onClick={() =>
-                            handleCopyModuleSpecifier(moduleSpecifierValue)
-                          }
-                        >
-                          {moduleSpecifierValue}
-                        </button>
-                      ) : isCopyableBasicAttribute ? (
+                      {isCopyableBasicAttribute ? (
                         <div
-                          className="flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-right text-[13px] font-mono"
-                          style={{
-                            color: 'var(--ds-gray-1000)',
-                          }}
+                          className="flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-[13px] font-mono text-gray-1000"
                           title={displayValue}
                         >
                           <MiddleTruncate
                             value={displayValue}
-                            className="flex-1"
+                            className="text-right"
+                            style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
                           />
                           <CopyButton
                             copyText={displayValue}