@principal-ai/subsystems-react 0.56.5 → 0.56.7

package/src/subsystem/TrailsPanel.tsx

@@ -28,6 +28,7 @@ import {
   type TrailComponentLabels,
 } from './trailStepDisplay';
 import { buildTrailStack } from './trailStack';
+import { TrailStepsNav } from './TrailStepsNav';
 
 /** Pause (ms) between steps when a trail autoplays. */
 export const TRAIL_PLAY_PAUSE_MS = 2500;
@@ -83,6 +84,7 @@ function TrailFlow({
   stepEmphasis,
   onRemoveStepEmphasis,
   componentByAlias,
+  hideHeader = false,
 }: {
   trail: SubsystemTrail;
   collapsed: boolean;
@@ -121,6 +123,8 @@ function TrailFlow({
   onRemoveStepEmphasis?: (tl: SubsystemTrail, stepIndex: number) => void;
   /** Alias → component, for turning hops into human display names. */
   componentByAlias?: TrailComponentLabels;
+  /** The shared drill-down navigation supplies the trail header. */
+  hideHeader?: boolean;
 }) {
   const { theme } = useTheme();
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
@@ -272,7 +276,7 @@ function TrailFlow({
 
   return (
     <div>
-      <div
+      {!hideHeader && <div
         onMouseEnter={() => {
           if (isHoverSuppressed?.()) return;
           setHeaderHover(true);
@@ -502,7 +506,7 @@ function TrailFlow({
             <GripVertical size={14} strokeWidth={2} />
           </span>
         )}
-      </div>
+      </div>}
       {!collapsed && (
         <div
           style={{ display: 'flex', flexDirection: 'column' }}
@@ -595,16 +599,38 @@ function TrailFlow({
                     style={{
                       flex: 1,
                       minWidth: 0,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 2,
                       overflowWrap: 'anywhere',
                       whiteSpace: 'normal',
-                      fontSize: theme.fontSizes[1],
-                      fontFamily: theme.fonts.monospace,
-                      color: record
-                        ? EMPHASIS_COLOR
-                        : theme.colors.text,
                     }}
                   >
-                    {display.primary}
+                    {step.annotation && (
+                      <span
+                        style={{
+                          minWidth: 0,
+                          overflowWrap: 'anywhere',
+                          fontSize: theme.fontSizes[1],
+                          fontFamily: theme.fonts.body,
+                          color: theme.colors.primary,
+                          lineHeight: 1.35,
+                        }}
+                      >
+                        {step.annotation}
+                      </span>
+                    )}
+                    <span
+                      style={{
+                        minWidth: 0,
+                        overflowWrap: 'anywhere',
+                        fontSize: theme.fontSizes[1],
+                        fontFamily: theme.fonts.monospace,
+                        color: record ? EMPHASIS_COLOR : theme.colors.text,
+                      }}
+                    >
+                      {display.primary}
+                    </span>
                   </span>
                 </button>
                 {record && (
@@ -758,6 +784,8 @@ export interface TrailsPanelProps {
   onRemoveStepEmphasis?: (tl: SubsystemTrail, stepIndex: number) => void;
   /** Alias → component, for turning hops into human display names. */
   componentByAlias?: TrailComponentLabels;
+  /** Slide from the trail list into its steps, without playback controls. */
+  drilldown?: boolean;
 }
 
 /**
@@ -784,12 +812,13 @@ export function TrailsPanel({
   stepEmphasis,
   onRemoveStepEmphasis,
   componentByAlias,
+  drilldown = false,
 }: TrailsPanelProps) {
   const { theme } = useTheme();
   // Reordering is offered only while every row is collapsed: the compact list
   // is what you drag, and expanded step lists would make drop targets tall and
   // the landing boundary ambiguous.
-  const allCollapsed = trails.every((w) => !expandedTrails.has(w.id));
+  const allCollapsed = drilldown || trails.every((w) => !expandedTrails.has(w.id));
   const reorderable = onReorder != null && allCollapsed;
   // Row being dragged, and the gap the pointer is over (boundaries 0..n
   // between rows). The boundary is where the dragged row will be inserted.
@@ -871,7 +900,7 @@ export function TrailsPanel({
   const accent = theme.colors.accent ?? theme.colors.primary ?? theme.colors.text;
   const isHoverSuppressed = useCallback(() => suppressHoverRef.current, []);
 
-  return (
+  const list = (
     <div
       style={{
         flex: 1,
@@ -936,7 +965,7 @@ export function TrailsPanel({
             )}
             <TrailFlow
               trail={tl}
-              collapsed={!expandedTrails.has(tl.id)}
+              collapsed={drilldown || !expandedTrails.has(tl.id)}
               active={
                 focusedTrailId === tl.id
                   ? { stepIndex: focusedStepIndex }
@@ -945,7 +974,7 @@ export function TrailsPanel({
                     : null
               }
               focusedStepIndex={focusedTrailId === tl.id ? focusedStepIndex : null}
-              onToggleCollapsed={onToggleCollapsed}
+              onToggleCollapsed={drilldown ? () => {} : onToggleCollapsed}
               onFocusFlow={onFocusFlow}
               onClearFocus={onClearFocus}
               onFocusStep={onFocusStep}
@@ -977,4 +1006,49 @@ export function TrailsPanel({
       })}
     </div>
   );
+
+  if (!drilldown) return list;
+
+  return (
+    <TrailStepsNav
+      trails={trails}
+      focusedTrailId={focusedTrailId}
+      focusedStepIndex={focusedStepIndex}
+      hoveredTrailStep={hoveredTrailStep}
+      onFocusFlow={onFocusFlow}
+      onClearFocus={onClearFocus}
+      onFocusStep={onFocusStep}
+      onHoverStep={onHoverStep}
+      onHoverFlow={onHoverFlow}
+      onLeaveStep={onLeaveStep}
+      componentByAlias={componentByAlias}
+      listContent={list}
+      renderSteps={(trail) => (
+        <TrailFlow
+          key={trail.id}
+          trail={trail}
+          collapsed={false}
+          hideHeader
+          active={
+            focusedTrailId === trail.id
+              ? { stepIndex: focusedStepIndex }
+              : hoveredTrailStep?.trailId === trail.id
+                ? { stepIndex: hoveredTrailStep.stepIndex }
+                : null
+          }
+          focusedStepIndex={focusedTrailId === trail.id ? focusedStepIndex : null}
+          onToggleCollapsed={onToggleCollapsed}
+          onFocusFlow={onFocusFlow}
+          onClearFocus={onClearFocus}
+          onFocusStep={onFocusStep}
+          onHoverStep={onHoverStep}
+          onHoverFlow={onHoverFlow}
+          onLeaveStep={onLeaveStep}
+          componentByAlias={componentByAlias}
+          stepEmphasis={stepEmphasis}
+          onRemoveStepEmphasis={onRemoveStepEmphasis}
+        />
+      )}
+    />
+  );
 }