@principal-ai/subsystems-react 0.24.26 → 0.25.0

package/dist/subsystem/paths.js

@@ -5,7 +5,7 @@
  * by its `purl` (`pkg:github/<owner>/<name>[#<path>]`) — never to the machine.
  * When a graph spans several repos the sidebar tree needs synthetic
  * `<owner>/<name>/` prefixes to keep same-named paths apart; hosts resolve
- * each file against `repoRoots[purlRepo] ?? repoRoot`.
+ * each file against its own purl's checkout (via the Alexandria registry).
  */
 /** Normalize a purl to its repo key: fragment and surrounding whitespace stripped. */
 export function purlRepoKey(purl) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/subsystems-react",
-  "version": "0.24.26",
+  "version": "0.25.0",
   "description": "React UI for Subsystem Models — graph, Pierre code views, and session-event feeds",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/stories/Subsystem/ComponentGraph/ModuleBadges.stories.tsx

@@ -0,0 +1,183 @@
+import '@xyflow/react/dist/style.css';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactFlowProvider, type NodeProps } from '@xyflow/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { SubsystemComponentGraph } from '../../../subsystem/SubsystemComponentGraph';
+import { SubsystemGroupNode } from '../../../subsystem/nodes';
+import type {
+  SubsystemComponent,
+  SubsystemGraphNode,
+  SubsystemProcessRegion,
+} from '../../../subsystem/model';
+import { graphSpecFromEdges } from './fixtures';
+
+const meta = {
+  title: 'Subsystem/ComponentGraph/ModuleBadges',
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <ReactFlowProvider>
+          <Story />
+        </ReactFlowProvider>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PURL = 'pkg:github/principal-ai/subsystem-modeling';
+const DEEP_NODES = 'packages/subsystems-react/src/subsystem/nodes.tsx';
+const DEEP_VIEWS = 'packages/subsystems-studio/src/mainview/views/AnalysisView.tsx';
+
+/**
+ * Components sharing a deep `module` path — long enough that the collapsed
+ * badge must flip to `first/…/last`; clicking grows the badge, not the frame.
+ */
+const deepComponents: SubsystemComponent[] = [
+  {
+    id: 'node-comp',
+    name: 'SubsystemComponentNode',
+    construct: 'function',
+    symbol: 'SubsystemComponentNode',
+    file: DEEP_NODES,
+    module: DEEP_NODES,
+    purl: PURL,
+    purpose: 'Leaf component renderer',
+  },
+  {
+    id: 'group-comp',
+    name: 'SubsystemGroupNode',
+    construct: 'function',
+    symbol: 'SubsystemGroupNode',
+    file: DEEP_NODES,
+    module: DEEP_NODES,
+    purl: PURL,
+    purpose: 'Boundary frame renderer',
+  },
+  {
+    id: 'edge-comp',
+    name: 'SubsystemEdge',
+    construct: 'function',
+    symbol: 'SubsystemEdge',
+    file: DEEP_NODES,
+    module: DEEP_NODES,
+    purl: PURL,
+    purpose: 'Edge renderer',
+  },
+  {
+    id: 'analysis',
+    name: 'AnalysisView',
+    construct: 'function',
+    symbol: 'AnalysisView',
+    file: DEEP_VIEWS,
+    module: DEEP_VIEWS,
+    purl: PURL,
+    purpose: 'Renders an analysis',
+  },
+  {
+    id: 'layers',
+    name: 'LayersProvider',
+    construct: 'function',
+    symbol: 'LayersProvider',
+    file: DEEP_VIEWS,
+    module: DEEP_VIEWS,
+    purl: PURL,
+    purpose: 'Provides the layer UI',
+  },
+  {
+    id: 'use-drawings',
+    name: 'useDrawingsHost',
+    construct: 'function',
+    symbol: 'useDrawingsHost',
+    file: DEEP_VIEWS,
+    module: DEEP_VIEWS,
+    purl: PURL,
+    purpose: 'Subscribes to drawing updates',
+    framework: 'react',
+    stereotype: 'hook',
+  },
+];
+
+const deepEdges = graphSpecFromEdges([
+  ['node-comp', 'group-comp', 'imports'],
+  ['edge-comp', 'group-comp', 'imports'],
+  ['analysis', 'layers', 'imports'],
+  ['use-drawings', 'analysis', 'imports'],
+  ['analysis', 'node-comp', 'imports'],
+]);
+
+/** Collapsed module badges show `first/…/last`. Click one to expand the full
+ *  path (just the badge grows — the module frame stays put). */
+export const DeepModulePaths: Story = {
+  render: () => (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <SubsystemComponentGraph
+        title="Deep module paths"
+        description={
+          'Module badges never spill past their frame while collapsed. A path that would overflow collapses to `first/…/last`; ' +
+          'click the badge to expand the full path (the badge widens past the frame edge — the frame itself stays put), click again to collapse it back.'
+        }
+        components={deepComponents}
+        relations={deepEdges.relations}
+        walkthroughs={deepEdges.walkthroughs}
+      />
+    </div>
+  ),
+};
+
+const HARNESS_FRAME_WIDTH = 360;
+
+const harnessRegion: SubsystemProcessRegion = {
+  kind: 'module',
+  key: DEEP_NODES,
+  label: DEEP_NODES,
+  memberAliases: ['node-comp', 'group-comp', 'edge-comp'],
+};
+
+/** Fixed frame; the badge is the only thing that grows on click. */
+function ModuleBadgeHarness() {
+  const nodeProps = {
+    id: `module:${harnessRegion.key}`,
+    data: { region: harnessRegion },
+    width: HARNESS_FRAME_WIDTH,
+    height: 180,
+    selected: false,
+  } as unknown as NodeProps<SubsystemGraphNode>;
+  return (
+    <div
+      style={{
+        padding: 56,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        height: '100vh',
+        boxSizing: 'border-box',
+        fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+      }}
+    >
+      <div style={{ fontSize: 13, color: '#8a90a0' }}>
+        The module frame stays at{' '}
+        <span style={{ fontFamily: 'monospace', color: '#d5d9e2' }}>
+          {HARNESS_FRAME_WIDTH}px
+        </span>
+        . Hover a badge and it widens to reveal more of the path text (no
+        stretch, no distortion) to show it's clickable. Click to expand the
+        full path past the frame's edge, click again to collapse back to{' '}
+        <code>first/…/last</code>.
+      </div>
+      <div style={{ position: 'relative', width: HARNESS_FRAME_WIDTH, minWidth: 0 }}>
+        <SubsystemGroupNode {...nodeProps} />
+      </div>
+    </div>
+  );
+}
+
+/** Isolated demo: only the badge grows — the module frame never moves. */
+export const BadgeOnly: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => <ModuleBadgeHarness />,
+};

package/src/stories/Subsystem/ComponentGraph/fixtures.ts

@@ -13,10 +13,10 @@ import type { GraphifyComponentDetail } from '../../../graphify';
 // Build a subsystem graph from a compact spec - helpers
 // ---------------------------------------------------------------------------
 export function components(
-  spec: Array<[id: string, name: string, construct: SubsystemComponent['construct'], file: string, purl: string, purpose?: string, symbol?: string, declaration?: GraphifyComponentDetail]>,
+  spec: Array<[alias: string, name: string, construct: SubsystemComponent['construct'], file: string, purl: string, purpose?: string, symbol?: string, declaration?: GraphifyComponentDetail]>,
 ): SubsystemComponent[] {
-  return spec.map(([id, name, construct, file, purl, purpose, symbol, declaration]) => ({
-    id,
+  return spec.map(([alias, name, construct, file, purl, purpose, symbol, declaration]) => ({
+    alias,
     name,
     construct,
     file,
@@ -135,7 +135,7 @@ export const readerDetail: GraphifyComponentDetail = {
 // ---------------------------------------------------------------------------
 export const investigateOnlyComponents: SubsystemComponent[] = [
   {
-    id: 'v1',
+    alias: 'v1',
     name: 'V1EventBridgeProcessor',
     construct: 'class',
     file: 'src/event-processing/V1EventBridge.ts',
@@ -144,7 +144,7 @@ export const investigateOnlyComponents: SubsystemComponent[] = [
     symbol: 'V1EventBridgeProcessor',
   },
   {
-    id: 'v2',
+    alias: 'v2',
     name: 'V2EventBridgeProcessor',
     construct: 'class',
     file: 'src/event-processing/V2EventBridge.ts',
@@ -153,7 +153,7 @@ export const investigateOnlyComponents: SubsystemComponent[] = [
     symbol: 'V2EventBridgeProcessor',
   },
   {
-    id: 'input',
+    alias: 'input',
     name: 'RepoNormalizedUniversalAgentSessionEvent',
     construct: 'interface',
     file: 'types/RepoNormalizedUniversalAgentSessionEvent.ts',
@@ -162,7 +162,7 @@ export const investigateOnlyComponents: SubsystemComponent[] = [
     symbol: 'RepoNormalizedUniversalAgentSessionEvent',
   },
   {
-    id: 'acc',
+    alias: 'acc',
     name: 'accumulateToAgentSessionEvents',
     construct: 'function',
     file: 'src/accumulateToAgentSessionEvents.ts',
@@ -171,7 +171,7 @@ export const investigateOnlyComponents: SubsystemComponent[] = [
     symbol: 'accumulateToAgentSessionEvents',
   },
   {
-    id: 'out',
+    alias: 'out',
     name: 'AgentSessionEvent',
     construct: 'interface',
     file: 'types/AgentSessionEvent.ts',

package/src/subsystem/ComponentDeclaration.tsx

@@ -116,7 +116,7 @@ export interface ComponentDeclarationProps {
   /** Max width of the declaration panel (CSS value). Defaults to none. */
   maxWidth?: string | number;
   /** When set, shows a Verify control that calls back with the component id. */
-  onVerify?: (componentId: string) => void;
+  onVerify?: (componentAlias: string) => void;
   /** Live verification status for the selected component. */
   verification?: ComponentVerificationState | null;
   /** Start with the file path row visible (catalog / source-first views). */
@@ -411,7 +411,7 @@ export function ComponentDeclaration({
           disabled={verifyBusy}
           onClick={(e) => {
             e.stopPropagation();
-            onVerify(component.id);
+            onVerify(component.alias);
           }}
           style={{
             display: 'flex',

package/src/subsystem/ConstructsCatalog.tsx

@@ -11,7 +11,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 import { useTheme } from '@principal-ade/industry-theme';
 import { IndustryMarkdownSlide } from 'themed-markdown';
-import { ChevronDown, ChevronRight, ChevronUp, FileText, Folder } from 'lucide-react';
+import { ChevronDown, ChevronRight, FileText, Folder } from 'lucide-react';
 import {
   constructBadgeColor,
   constructBadgeLabel,
@@ -29,7 +29,7 @@ import { resolvePierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
 
 export interface ConstructsCatalogProps {
   components: SubsystemComponent[];
-  onSelect?: (componentId: string) => void;
+  onSelect?: (componentAlias: string) => void;
   title?: string;
   hideSidebar?: boolean;
   description?: string;
@@ -39,7 +39,7 @@ export interface ConstructsCatalogProps {
   renderFileViewer?: (file: string, opts?: SubsystemOpenFileOptions) => ReactNode;
   renderFileView?: (component: SubsystemComponent) => ReactNode;
   onFileSelect?: (file: string) => void;
-  onVerifyComponent?: (componentId: string) => void;
+  onVerifyComponent?: (componentAlias: string) => void;
   componentVerification?: ComponentVerificationState | null;
 }
 
@@ -111,7 +111,7 @@ function resolveRelated(
   const clean = ref.replace(/\(\)$/, '');
   return components.find(
     (c) =>
-      c.id === clean ||
+      c.alias === clean ||
       c.name === clean ||
       c.symbol === clean ||
       c.symbol?.replace(/\(\)$/, '') === clean,
@@ -170,11 +170,11 @@ export function ConstructsCatalog({
       .map((x) => x.c);
   }, [components]);
 
-  const [visibleIds, setVisibleIds] = useState<string[]>(() =>
-    orderedComponents[0] ? [orderedComponents[0].id] : [],
+  const [visibleAliases, setVisibleAliases] = useState<string[]>(() =>
+    orderedComponents[0] ? [orderedComponents[0].alias] : [],
   );
-  const [focusedId, setFocusedId] = useState<string | null>(
-    () => orderedComponents[0]?.id ?? null,
+  const [focusedAlias, setFocusedAlias] = useState<string | null>(
+    () => orderedComponents[0]?.alias ?? null,
   );
   const [descriptionVisible, setDescriptionVisible] = useState(false);
   const [descToggleHover, setDescToggleHover] = useState(false);
@@ -186,12 +186,12 @@ export function ConstructsCatalog({
   const [drawer, setDrawer] = useState<{ file: string; startLine?: number } | null>(
     null,
   );
-  const focusedRef = useRef<string | null>(focusedId);
-  focusedRef.current = focusedId;
+  const focusedAliasRef = useRef<string | null>(focusedAlias);
+  focusedAliasRef.current = focusedAlias;
 
-  const visibleSet = useMemo(() => new Set(visibleIds), [visibleIds]);
+  const visibleSet = useMemo(() => new Set(visibleAliases), [visibleAliases]);
   const visibleComponents = useMemo(
-    () => orderedComponents.filter((c) => visibleSet.has(c.id)),
+    () => orderedComponents.filter((c) => visibleSet.has(c.alias)),
     [orderedComponents, visibleSet],
   );
 
@@ -213,7 +213,7 @@ export function ConstructsCatalog({
     }> = [];
     const index = new Map<string, number>();
     for (const c of visibleComponents) {
-      const key = c.purl || c.id;
+      const key = c.purl || c.alias;
       let at = index.get(key);
       if (at == null) {
         at = groups.length;
@@ -227,17 +227,17 @@ export function ConstructsCatalog({
   }, [visibleComponents]);
 
   useEffect(() => {
-    if (!focusedId) return;
-    document.getElementById(`construct-${focusedId}`)?.scrollIntoView({ block: 'nearest' });
-  }, [focusedId]);
+    if (!focusedAlias) return;
+    document.getElementById(`construct-${focusedAlias}`)?.scrollIntoView({ block: 'nearest' });
+  }, [focusedAlias]);
 
   useEffect(() => {
-    const last = visibleIds[visibleIds.length - 1];
+    const last = visibleAliases[visibleAliases.length - 1];
     if (!last) return;
     document
       .getElementById(`construct-signature-${last}`)
       ?.scrollIntoView({ block: 'nearest' });
-  }, [visibleIds]);
+  }, [visibleAliases]);
 
   // Keep the declaration whose file is open in view, so the source and its
   // signature stay legible together.
@@ -249,47 +249,47 @@ export function ConstructsCatalog({
       ) ?? orderedComponents.find((c) => c.file === drawer.file);
     if (!match) return;
     document
-      .getElementById(`construct-signature-${match.id}`)
+      .getElementById(`construct-signature-${match.alias}`)
       ?.scrollIntoView({ block: 'nearest' });
   }, [orderedComponents, drawer]);
 
-  // Drop ids that left the model; if nothing remains, show the first construct.
+  // Drop aliases that left the model; if nothing remains, show the first construct.
   useEffect(() => {
-    const ids = new Set(orderedComponents.map((c) => c.id));
-    setVisibleIds((prev) => {
-      const next = prev.filter((id) => ids.has(id));
+    const aliases = new Set(orderedComponents.map((c) => c.alias));
+    setVisibleAliases((prev) => {
+      const next = prev.filter((alias) => aliases.has(alias));
       if (next.length > 0 || orderedComponents.length === 0) return next;
-      return [orderedComponents[0]!.id];
+      return [orderedComponents[0]!.alias];
     });
-    setFocusedId((prev) => {
-      if (prev && ids.has(prev)) return prev;
-      return orderedComponents[0]?.id ?? null;
+    setFocusedAlias((prev) => {
+      if (prev && aliases.has(prev)) return prev;
+      return orderedComponents[0]?.alias ?? null;
     });
   }, [orderedComponents]);
 
   const toggle = useCallback(
-    (id: string) => {
-      setFocusedId(id);
-      setVisibleIds((prev) =>
-        prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    (alias: string) => {
+      setFocusedAlias(alias);
+      setVisibleAliases((prev) =>
+        prev.includes(alias) ? prev.filter((x) => x !== alias) : [...prev, alias],
       );
-      onSelect?.(id);
+      onSelect?.(alias);
     },
     [onSelect],
   );
 
   const show = useCallback(
-    (id: string) => {
-      setFocusedId(id);
-      setVisibleIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
-      onSelect?.(id);
+    (alias: string) => {
+      setFocusedAlias(alias);
+      setVisibleAliases((prev) => (prev.includes(alias) ? prev : [...prev, alias]));
+      onSelect?.(alias);
     },
     [onSelect],
   );
 
   const focusAt = useCallback(
-    (id: string) => {
-      setFocusedId(id);
+    (alias: string) => {
+      setFocusedAlias(alias);
     },
     [],
   );
@@ -307,17 +307,17 @@ export function ConstructsCatalog({
    *  all when they're already shown — mirroring a construct row toggle. */
   const toggleFile = useCallback(
     (comps: SubsystemComponent[]) => {
-      const ids = comps.map((c) => c.id);
-      setVisibleIds((prev) => {
+      const aliases = comps.map((c) => c.alias);
+      setVisibleAliases((prev) => {
         const set = new Set(prev);
-        const allVisible = ids.every((id) => set.has(id));
-        ids.forEach((id) => (allVisible ? set.delete(id) : set.add(id)));
-        return orderedComponents.filter((c) => set.has(c.id)).map((c) => c.id);
+        const allVisible = aliases.every((alias) => set.has(alias));
+        aliases.forEach((alias) => (allVisible ? set.delete(alias) : set.add(alias)));
+        return orderedComponents.filter((c) => set.has(c.alias)).map((c) => c.alias);
       });
       const first = comps[0];
       if (first) {
-        setFocusedId(first.id);
-        onSelect?.(first.id);
+        setFocusedAlias(first.alias);
+        onSelect?.(first.alias);
       }
     },
     [orderedComponents, onSelect],
@@ -380,8 +380,8 @@ export function ConstructsCatalog({
             </li>
           );
         }
-        const ids = child.components.map((c) => c.id);
-        const allVisible = ids.length > 0 && ids.every((id) => visibleSet.has(id));
+        const aliases = child.components.map((c) => c.alias);
+        const allVisible = aliases.length > 0 && aliases.every((alias) => visibleSet.has(alias));
         const hovered = hoveredRow === child.path;
         const color = componentColor(child.components[0]!, pierreTheme);
         return (
@@ -438,7 +438,7 @@ export function ConstructsCatalog({
                   color: allVisible ? color : muted,
                 }}
               >
-                {ids.length}
+                {aliases.length}
               </span>
             </button>
           </li>
@@ -473,7 +473,7 @@ export function ConstructsCatalog({
     (ref: string) => {
       const comp = resolveRelated(components, ref);
       if (!comp) return;
-      show(comp.id);
+      show(comp.alias);
     },
     [components, show],
   );
@@ -505,13 +505,13 @@ export function ConstructsCatalog({
       if (orderedComponents.length === 0) return;
       const idx = Math.max(
         0,
-        orderedComponents.findIndex((c) => c.id === focusedRef.current),
+        orderedComponents.findIndex((c) => c.alias === focusedAliasRef.current),
       );
       const next =
         orderedComponents[
           (idx + delta + orderedComponents.length) % orderedComponents.length
         ]!;
-      focusAt(next.id);
+      focusAt(next.alias);
     },
     [orderedComponents, focusAt],
   );
@@ -537,15 +537,15 @@ export function ConstructsCatalog({
         moveFocus(-1);
       } else if (e.key === 'Home') {
         e.preventDefault();
-        if (orderedComponents[0]) focusAt(orderedComponents[0].id);
+        if (orderedComponents[0]) focusAt(orderedComponents[0].alias);
       } else if (e.key === 'End') {
         e.preventDefault();
         const last = orderedComponents[orderedComponents.length - 1];
-        if (last) focusAt(last.id);
+        if (last) focusAt(last.alias);
       } else if (e.key === ' ' || e.key === 'Enter') {
-        if (focusedRef.current) {
+        if (focusedAliasRef.current) {
           e.preventDefault();
-          toggle(focusedRef.current);
+          toggle(focusedAliasRef.current);
         }
       } else if (e.key === 'Escape' && drawer) {
         setDrawer(null);
@@ -646,16 +646,12 @@ export function ConstructsCatalog({
                         padding: 0,
                         border: 'none',
                         borderRadius: 4,
-                        background: descToggleHover ? theme.colors.border : 'transparent',
-                        color: descToggleHover ? theme.colors.text : muted,
+                        background: descriptionVisible || descToggleHover ? theme.colors.border : 'transparent',
+                        color: descriptionVisible || descToggleHover ? theme.colors.text : muted,
                         cursor: 'pointer',
                       }}
                     >
-                      {descriptionVisible ? (
-                        <ChevronUp size={14} />
-                      ) : (
-                        <ChevronDown size={14} />
-                      )}
+                      <FileText size={14} />
                     </button>
                   )}
                 </div>
@@ -728,7 +724,7 @@ export function ConstructsCatalog({
           role="listbox"
           aria-label="Constructs"
           aria-multiselectable="true"
-          aria-activedescendant={focusedId ? `construct-${focusedId}` : undefined}
+          aria-activedescendant={focusedAlias ? `construct-${focusedAlias}` : undefined}
           style={{
             listStyle: 'none',
             margin: 0,
@@ -739,8 +735,8 @@ export function ConstructsCatalog({
           }}
         >
           {orderedComponents.map((c) => {
-            const visible = visibleSet.has(c.id);
-            const focused = c.id === focusedId;
+            const visible = visibleSet.has(c.alias);
+            const focused = c.alias === focusedAlias;
             const color = componentColor(c, pierreTheme);
             const badgeColor = constructBadgeColor(c) ?? color;
             const badgeLabel = constructBadgeLabel(c);
@@ -757,19 +753,19 @@ export function ConstructsCatalog({
               !!c.file &&
               c.file === drawer.file &&
               c.declarationRef?.startLine === drawer.startLine;
-            const hovered = hoveredRow === c.id;
+            const hovered = hoveredRow === c.alias;
             return (
-              <li key={c.id} role="presentation">
+              <li key={c.alias} role="presentation">
                 <button
                   type="button"
-                  id={`construct-${c.id}`}
+                  id={`construct-${c.alias}`}
                   role="option"
                   aria-selected={visible}
-                  data-testid={`construct-row-${c.id}`}
-                  onClick={() => toggle(c.id)}
-                  onMouseEnter={() => setHoveredRow(c.id)}
+                  data-testid={`construct-row-${c.alias}`}
+                  onClick={() => toggle(c.alias)}
+                  onMouseEnter={() => setHoveredRow(c.alias)}
                   onMouseLeave={() =>
-                    setHoveredRow((h) => (h === c.id ? null : h))
+                    setHoveredRow((h) => (h === c.alias ? null : h))
                   }
                   style={{
                     display: 'flex',
@@ -938,8 +934,8 @@ export function ConstructsCatalog({
                     c.declarationRef?.startLine === drawer.startLine;
                   return (
                     <div
-                      key={c.id}
-                      id={`construct-signature-${c.id}`}
+                      key={c.alias}
+                      id={`construct-signature-${c.alias}`}
                       style={{
                         border: `1px solid ${lineOpen ? accentColor : theme.colors.border}`,
                         boxShadow: lineOpen ? `0 0 0 1px ${accentColor}` : undefined,
@@ -959,7 +955,7 @@ export function ConstructsCatalog({
                         showRepoIdentity={false}
                         fileBadgeChrome={!!fileViewer}
                         verification={
-                          componentVerification && focusedId === c.id
+                          componentVerification && focusedAlias === c.alias
                             ? componentVerification
                             : undefined
                         }