@principal-ai/subsystems-react 0.51.0 → 0.51.1

package/src/subsystem/FileDrawer.tsx

@@ -117,21 +117,46 @@ export function FileDrawer({
             userSelect: "none",
           }}
         >
+          {showProgress && progress != null && (
+            <div
+              role="img"
+              aria-label={`Step ${progress.index + 1} of ${progress.total}`}
+              style={{
+                display: "flex",
+                gap: 2,
+                flexShrink: 0,
+              }}
+            >
+              {Array.from({ length: progress.total }, (_, i) => (
+                <span
+                  key={i}
+                  style={{
+                    flex: 1,
+                    height: 2,
+                    borderRadius: 1,
+                    background:
+                      i <= progress.index
+                        ? theme.colors.primary
+                        : theme.colors.border,
+                  }}
+                />
+              ))}
+            </div>
+          )}
           <div
             style={{
               display: "flex",
               alignItems: "center",
               gap: 8,
-              padding: "6px 10px",
-              // With segments present they form the header's bottom edge, so
-              // only draw the hairline when there is nothing to stand in for it.
-              borderBottom: showProgress
-                ? "none"
-                : `1px solid ${theme.colors.border}`,
+              // Top runs deeper than the bottom so the title/label sits
+              // optically centered inside the sticky top edge.
+              padding: "10px 10px 8px",
+              // The header row is the last chrome row now, so its hairline is
+              // the boundary with the code below.
+              borderBottom: `1px solid ${theme.colors.border}`,
             }}
           >
             <span
-              title={title ?? undefined}
               style={{
                 flex: 1,
                 minWidth: 0,
@@ -197,33 +222,6 @@ export function FileDrawer({
               <X size={14} />
             </button>
           </div>
-          {showProgress && progress != null && (
-            <div
-              role="img"
-              aria-label={`Step ${progress.index + 1} of ${progress.total}`}
-              style={{
-                display: "flex",
-                gap: 2,
-                flexShrink: 0,
-                padding: "0 10px 6px",
-              }}
-            >
-              {Array.from({ length: progress.total }, (_, i) => (
-                <span
-                  key={i}
-                  style={{
-                    flex: 1,
-                    height: 2,
-                    borderRadius: 1,
-                    background:
-                      i <= progress.index
-                        ? theme.colors.primary
-                        : theme.colors.border,
-                  }}
-                />
-              ))}
-            </div>
-          )}
         </div>
         <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
           {children}

package/src/subsystem/IssueList.tsx

@@ -233,7 +233,7 @@ export function humanizeIssueKind(kind: string): string {
 const KIND_LABEL: Record<string, string> = {
   missing_file: 'Construct declaration file missing',
   symbol_ambiguous: 'Multiple construct symbol matches',
-  symbol_unmatched: 'Construct symbol unconfirmed',
+  symbol_unmatched: 'Construct symbol missing',
   stale_declaration: 'Construct declaration drift',
   construct_mismatch: 'Construct type mismatch',
   construct_unconfirmed: 'Construct type unconfirmed',

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -869,16 +869,24 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
   // the selected step until it does.
   const [visibleStepIndex, setVisibleStepIndex] = useState<number | null>(null);
   const drawerStepIndex = drawerTarget?.kind === 'trail' ? drawerTarget.stepIndex : null;
+  // Reset when the drawer switches trail (or closes) — synchronously, so the bar
+  // never paints the previous trail's position. A step change *within* the same
+  // trail is deliberately not reset: the code view scrolls to the new step and
+  // the viewport tracker carries the fill across that scroll. Resetting on step
+  // change flashed — the post-paint effect snapped the fill to the target, then
+  // Pierre's smooth scroll re-reported the old viewport, bouncing target → old →
+  // target.
+  const activeTrailId = focusedTrail?.id ?? null;
+  const [visibleTrailId, setVisibleTrailId] = useState(activeTrailId);
+  if (activeTrailId !== visibleTrailId) {
+    setVisibleTrailId(activeTrailId);
+    setVisibleStepIndex(null);
+  }
   const drawerProgress = useMemo(() => {
     if (drawerStepIndex == null || !focusedTrail) return null;
     return { index: visibleStepIndex ?? drawerStepIndex, total: focusedTrail.steps.length };
   }, [drawerStepIndex, focusedTrail, visibleStepIndex]);
 
-  // A new trail or step invalidates whatever the last scroll reported.
-  useEffect(() => {
-    setVisibleStepIndex(null);
-  }, [focusedTrail?.id, drawerStepIndex]);
-
   // Refresh selected component when the components list updates (e.g. verify
   // writes back declarationRef).
   useEffect(() => {