@principal-ai/principal-view-react 0.16.32 → 0.16.34

package/src/stories/SubsystemComponentGraph.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
   title: 'Subsystem/Component Graph',
   component: SubsystemComponentGraph,
   parameters: {
-    layout: 'padded',
+    layout: 'fullscreen',
   },
   tags: ['autodocs'],
   decorators: [
@@ -70,13 +70,14 @@ function TwoNodeDemo({ showEdgeLabels = true }: { showEdgeLabels?: boolean }) {
   const [selected, setSelected] = useState<string | null>(null);
   const [selectedEdge, setSelectedEdge] = useState<SubsystemComponentEdge | null>(null);
   return (
-    <div style={{ width: '100%', maxWidth: 640, height: 360, display: 'flex', flexDirection: 'column' }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={twoNodeComponents}
         edges={twoNodeEdges}
         onSelect={(id) => setSelected(id)}
         onEdgeSelect={(e) => setSelectedEdge(e)}
         showEdgeLabels={showEdgeLabels}
+        showFileBadges={false}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
         {selectedEdge
@@ -134,8 +135,8 @@ function PlaygroundDemo({ leftCount, rightCount, showEdgeLabels }: { leftCount:
   }
 
   return (
-    <div style={{ width: '100%', height: 400 }}>
-      <SubsystemComponentGraph components={comps} edges={edgeList} showEdgeLabels={showEdgeLabels} />
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <SubsystemComponentGraph components={comps} edges={edgeList} showEdgeLabels={showEdgeLabels} showFileBadges={false} />
     </div>
   );
 }
@@ -194,12 +195,13 @@ function V2ReaderDemo() {
   const [selected, setSelected] = useState<string | null>(null);
   const [selectedEdge, setSelectedEdge] = useState<SubsystemComponentEdge | null>(null);
   return (
-    <div style={{ width: '100%', maxWidth: 1280, height: 560, display: 'flex', flexDirection: 'column' }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={v2ReaderComponents}
         edges={v2ReaderEdges}
         onSelect={(id) => setSelected(id)}
         onEdgeSelect={(e) => setSelectedEdge(e)}
+        showFileBadges={false}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
         {selectedEdge
@@ -221,7 +223,7 @@ export const V2ReaderSubsystem: Story = {
 // ---------------------------------------------------------------------------
 export const Empty: Story = {
   render: () => (
-    <div style={{ width: '100%' }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph components={[]} edges={[]} />
     </div>
   ),
@@ -309,8 +311,8 @@ const investigateOnlyEdges = edges([
 
 export const InvestigateOnly: Story = {
   render: () => (
-    <div style={{ width: '100%', height: 400 }}>
-      <SubsystemComponentGraph components={investigateOnlyComponents} edges={investigateOnlyEdges} />
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <SubsystemComponentGraph components={investigateOnlyComponents} edges={investigateOnlyEdges} showFileBadges={false} />
     </div>
   ),
 };
@@ -318,11 +320,12 @@ export const InvestigateOnly: Story = {
 /** Same pipeline with a narrower `maxNodeWidth` (140) — long names wrap. */
 export const NarrowMaxWidth: Story = {
   render: () => (
-    <div style={{ width: '100%', height: 400 }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={investigateOnlyComponents}
         edges={investigateOnlyEdges}
         maxNodeWidth={140}
+        showFileBadges={false}
       />
     </div>
   ),
@@ -386,11 +389,12 @@ const namingConventionComponents: SubsystemComponent[] = [
  *  at their word boundaries (camelCase, snake_case, PascalCase, acronyms). */
 export const NamingConventions: Story = {
   render: () => (
-    <div style={{ width: '100%', height: 460 }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={namingConventionComponents}
         edges={[]}
         maxNodeWidth={180}
+        showFileBadges={false}
       />
     </div>
   ),
@@ -500,11 +504,12 @@ const detailKindComponents: SubsystemComponent[] = [
 function DetailKindsDemo() {
   const [selected, setSelected] = useState<string | null>(null);
   return (
-    <div style={{ width: '100%', maxWidth: 1280, height: 420, display: 'flex', flexDirection: 'column' }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={detailKindComponents}
         edges={[]}
         onSelect={(id) => setSelected(id)}
+        showFileBadges={false}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
         {selected ? `selected: ${selected}` : 'click a component to see its GraphifyComponentDetail'}
@@ -575,11 +580,12 @@ const resolvedComponents: SubsystemComponent[] = [
 function MinimalVsResolvedDemo({ resolved }: { resolved: boolean }) {
   const [selected, setSelected] = useState<string | null>(null);
   return (
-    <div style={{ width: '100%', maxWidth: 1280, height: 380, display: 'flex', flexDirection: 'column' }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={resolved ? resolvedComponents : minimalComponents}
         edges={sharedEdges}
         onSelect={(id) => setSelected(id)}
+        showFileBadges={false}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
         {resolved
@@ -651,11 +657,12 @@ const investigationEdges = edges([
 function InvestigationDemo() {
   const [selected, setSelected] = useState<string | null>(null);
   return (
-    <div style={{ width: '100%', maxWidth: 1280, height: 360, display: 'flex', flexDirection: 'column' }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={investigationComponents}
         edges={investigationEdges}
         onSelect={(id) => setSelected(id)}
+        showFileBadges={false}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
         read-only investigation snapshot (grok 019fd2a9) — components analyzed, not edited
@@ -742,11 +749,12 @@ const mermaidEdges = edges([
 function MermaidDemo() {
   const [selected, setSelected] = useState<string | null>(null);
   return (
-    <div style={{ width: '100%', maxWidth: 1280, height: 500, display: 'flex', flexDirection: 'column' }}>
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={mermaidComponents}
         edges={mermaidEdges}
         onSelect={(id) => setSelected(id)}
+        showFileBadges={false}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
         mermaid diagram rendering pipeline — lazy → render → zoom → modal

package/src/subsystem/GraphLayoutCover.tsx

@@ -0,0 +1,69 @@
+/**
+ * GraphLayoutCover — opaque overlay that hides a graph's startup sequence
+ * (initial measurement render, layout swap, camera settle animation).
+ *
+ * Must sit inside a `position: relative` ancestor sized to the canvas; it
+ * covers exactly that box. Renders covered from mount and fades out
+ * `holdMs` after `revealed` flips true, then stays transparent until the
+ * next `revealed → false` reset.
+ */
+
+import { useEffect, useState } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+
+export interface GraphLayoutCoverProps {
+  /** True once the final layout is ready and the camera has settled. */
+  revealed: boolean;
+  /** How long to stay fully opaque after `revealed`. @default 650 */
+  holdMs?: number;
+  /** Label shown while covered. @default 'Laying out graph…' */
+  label?: string;
+}
+
+export function GraphLayoutCover({
+  revealed,
+  holdMs = 650,
+  label = 'Laying out graph…',
+}: GraphLayoutCoverProps) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const [coverUp, setCoverUp] = useState(true);
+
+  useEffect(() => {
+    if (!revealed) {
+      setCoverUp(true);
+      return;
+    }
+    const t = setTimeout(() => setCoverUp(false), holdMs);
+    return () => clearTimeout(t);
+  }, [revealed, holdMs]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 15,
+        background: theme.colors.background,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: coverUp ? 1 : 0,
+        transition: 'opacity 200ms ease',
+        pointerEvents: 'none',
+      }}
+    >
+      {coverUp && (
+        <span
+          style={{
+            color: muted,
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+          }}
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -32,6 +32,7 @@ import {
   applyNodeChanges,
 } from '@xyflow/react';
 import { useTheme } from '@principal-ade/industry-theme';
+import { X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
 import {
   buildSubsystemGraph,
@@ -44,6 +45,8 @@ import {
 } from './model';
 import type { GraphifyComponentDetail } from '../graphify';
 import { SubsystemComponentNode, SubsystemEdge, SUBSYSTEM_CALLBACKS } from './nodes';
+import { SubsystemFileTree } from './SubsystemFileTree';
+import { GraphLayoutCover } from './GraphLayoutCover';
 
 const MECHANISM_DESCRIPTIONS: [SubsystemEdgeMechanism, string, boolean][] = [
   ['imports', 'import statement (code-level dependency)', true],
@@ -75,6 +78,9 @@ export interface SubsystemComponentGraphProps {
   maxNodeWidth?: number;
   /** Show edge labels (mechanism names) on the graph. @default true */
   showEdgeLabels?: boolean;
+  /** Show the click-to-open file chip under each component name.
+   *  @default true */
+  showFileBadges?: boolean;
   /** Subsystem title displayed in the sidebar. */
   title?: string;
   /** Markdown description rendered in the sidebar. */
@@ -86,11 +92,23 @@ export interface SubsystemComponentGraphProps {
   /** Rendered in the sidebar under the description (e.g. selection inspector). */
   sidebarAfterDescription?: ReactNode;
   /**
-   * Rendered inside the selected-component detail panel when the component
-   * has a `file`. Host-injected reader/renderer so this package stays free
-   * of fs and code-view dependencies.
+   * Host-injected reader/renderer for the bottom file drawer, keyed by
+   * repo-root-relative path. Opening happens on node click (component with a
+   * `file`) and sidebar file-tree click. Keeps this package free of fs and
+   * code-view dependencies.
+   */
+  renderFileViewer?: (file: string) => ReactNode;
+  /**
+   * Legacy component-keyed variant, kept for backward compatibility. When
+   * `renderFileViewer` is absent, drawer content resolves via the first
+   * component whose `file` matches the opened path.
    */
   renderFileView?: (component: SubsystemComponent) => ReactNode;
+  /**
+   * Called when a file in the sidebar file tree is clicked (repo-root-relative
+   * path). The tree is derived from the components' `file` values.
+   */
+  onFileSelect?: (file: string) => void;
 }
 
 const nodeTypes: NodeTypes = {
@@ -105,7 +123,7 @@ interface InnerProps extends SubsystemComponentGraphProps {
   measured: { w: number; h: number } | null;
 }
 
-function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, title, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView }: InnerProps) {
+function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showFileBadges, title, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView, renderFileViewer, onFileSelect }: InnerProps) {
   const { theme } = useTheme();
   const { fitView } = useReactFlow();
   const viewport = useViewport();
@@ -115,10 +133,17 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
   });
   const [layoutReady, setLayoutReady] = useState(false);
   const [selected, setSelected] = useState<SubsystemComponent | null>(null);
+  // File currently shown in the bottom drawer (repo-root-relative path).
+  const [openFile, setOpenFile] = useState<string | null>(null);
+  // Component the pointer is over (null on leave) → transient tree highlight.
+  const [hoveredComponentId, setHoveredComponentId] = useState<string | null>(null);
   // Ref mirror of `selected` so the SUBSYSTEM_CALLBACKS click handler (a
   // closure over the effect deps) can toggle without a stale value.
   const selectedRef = useRef<SubsystemComponent | null>(null);
   selectedRef.current = selected;
+  // Ref mirror of `openFile` for the tree-click toggle.
+  const openFileRef = useRef<string | null>(null);
+  openFileRef.current = openFile;
 
   // Pass 1: build with estimated widths so React Flow can measure the DOM.
   // The pane stays hidden until Pass 2 completes.
@@ -193,6 +218,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
       const comp = components.find((c) => c.id === id);
       if (comp) {
         // Clicking the already-selected node unselects it (toggle off).
+        // Selection is independent of the file drawer — nodes never open it.
         if (selectedRef.current?.id === comp.id) {
           setSelected(null);
           setSelectedEdgeId(null);
@@ -205,10 +231,12 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     };
     SUBSYSTEM_CALLBACKS.onEdgeSelect = selectEdge;
     SUBSYSTEM_CALLBACKS.maxNodeWidth = maxNodeWidth;
+    SUBSYSTEM_CALLBACKS.onHover = setHoveredComponentId;
     return () => {
       SUBSYSTEM_CALLBACKS.onSelect = undefined;
       SUBSYSTEM_CALLBACKS.onEdgeSelect = undefined;
       SUBSYSTEM_CALLBACKS.maxNodeWidth = undefined;
+      SUBSYSTEM_CALLBACKS.onHover = undefined;
     };
   }, [components, onSelect, maxNodeWidth, selectEdge]);
 
@@ -216,6 +244,24 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
   const xyflowNodesBase = nodes as Node[];
   const baseEdges = convertedEdges as Edge[];
 
+  // While a file is open in the drawer, tag each node with whether its
+  // component lives in that file — the node renderer spotlights matches and
+  // dims non-matches (mirrors the edge-dimming behavior on selection).
+  const dispNodes = useMemo(() => {
+    let ns = xyflowNodesBase.map((n) => ({
+      ...n,
+      data: { ...(n.data as object), showFileBadges },
+    }));
+    if (!openFile) return ns;
+    return ns.map((n) => {
+      const comp = (n.data as { component?: SubsystemComponent } | undefined)?.component;
+      return {
+        ...n,
+        data: { ...(n.data as object), fileMatch: comp?.file === openFile },
+      };
+    });
+  }, [xyflowNodesBase, openFile, showFileBadges]);
+
   const baseNodesKey = useMemo(() => nodes.map((n) => n.id).sort().join(','), [nodes]);
   const baseEdgesKey = useMemo(
     () => convertedEdges.map((e) => e.id).sort().join(','),
@@ -248,7 +294,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
           pendingMeasuredRef.current = true;
         }
       }
-      const result = applyNodeChanges(changes, xyflowNodesBase);
+      const result = applyNodeChanges(changes, dispNodes);
       // After applying changes, check if we should trigger pass 2.
       if (pendingMeasuredRef.current) {
         // Use microtask so the state update from applyNodeChanges commits first.
@@ -256,7 +302,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
       }
       return result;
     },
-    [xyflowNodesBase, triggerPass2],
+    [dispNodes, triggerPass2],
   );
   const onEdgesChange = useCallback(
     (_changes: EdgeChange[]) => dispEdges,
@@ -270,12 +316,36 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     return () => clearTimeout(t);
   }, [baseNodesKey, baseEdgesKey, fitView]);
 
+  // When the file drawer opens/closes the canvas resizes — reframe once the
+  // height transition settles: onto the matching (spotlit) nodes while a file
+  // is open, back to the whole graph when it closes.
+  const prevOpenFileRef = useRef<string | null>(null);
+  useEffect(() => {
+    const prev = prevOpenFileRef.current;
+    prevOpenFileRef.current = openFile;
+    if (!layoutReady || prev === openFile) return;
+    const t = setTimeout(() => {
+      if (openFile) {
+        const ids = xyflowNodesBase
+          .filter((n) => (n.data as { component?: SubsystemComponent } | undefined)?.component?.file === openFile)
+          .map((n) => ({ id: n.id }));
+        if (ids.length > 0) {
+          fitView({ nodes: ids, padding: 0.35, minZoom: 0.05, maxZoom: 2, duration: 250 });
+        }
+      } else {
+        fitView({ padding: 0.1, includeHiddenNodes: false, minZoom: 0.05, maxZoom: 2, duration: 250 });
+      }
+    }, 230);
+    return () => clearTimeout(t);
+  }, [openFile, layoutReady, xyflowNodesBase, fitView]);
+
   const onNodeClick: NodeMouseHandler = useCallback(
     (_e, node: Node) => {
       const comp = (node.data as { component?: SubsystemComponent } | undefined)?.component;
       setSelectedEdgeId(null);
       if (node.type === 'subsystem-component' && comp) {
         // Clicking the already-selected node unselects it (toggle off).
+        // Selection is independent of the file drawer — nodes never open it.
         if (selected?.id === comp.id) {
           setSelected(null);
           return;
@@ -300,6 +370,20 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     setSelectedEdgeId(null);
   }, []);
 
+  // Sidebar file-tree click → toggle in the bottom drawer (+ host hook only
+  // when opening, so hosts don't see close events).
+  const onTreeSelectFile = useCallback(
+    (file: string) => {
+      if (openFileRef.current === file) {
+        setOpenFile(null);
+        return;
+      }
+      setOpenFile(file);
+      onFileSelect?.(file);
+    },
+    [onFileSelect],
+  );
+
   // Edge label data for the overlay (rendered OUTSIDE ReactFlow so the pane
   // doesn't intercept pointer events). Uses ELK-computed label midpoints from
   // the actual edge path (not node-center approximations).
@@ -322,23 +406,60 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
 
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
 
+  // Unique source files across components → sidebar file tree.
+  const files = useMemo(
+    () => Array.from(new Set(components.map((c) => c.file).filter(Boolean))).sort(),
+    [components],
+  );
+
+  // The hovered node's file (null when not hovering / file-less component).
+  const hoveredFile = useMemo(() => {
+    if (!hoveredComponentId) return null;
+    return components.find((c) => c.id === hoveredComponentId)?.file ?? null;
+  }, [components, hoveredComponentId]);
+
+  // Drawer content renderer: prefer the path-keyed viewer; fall back to the
+  // legacy component-keyed one via a file → first-component lookup.
+  const fileViewer = useMemo(() => {
+    if (renderFileViewer) return renderFileViewer;
+    if (renderFileView) {
+      const byFile = new Map(
+        components.filter((c) => c.file).map((c) => [c.file, c] as const),
+      );
+      return (file: string) => {
+        const comp = byFile.get(file);
+        return comp ? renderFileView(comp) : null;
+      };
+    }
+    return undefined;
+  }, [renderFileViewer, renderFileView, components]);
+
   return (
-    <div style={{ visibility: layoutReady ? 'visible' : 'hidden', width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
-      {/* Sidebar with title and description */}
-      {(title || description || usedMechanisms.size > 0 || sidebarExtra || sidebarAfterDescription) && (
+    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
+      {/* Sidebar: scrollable title/description/legend on top, file tree pinned to the bottom half */}
+      {(title || description || usedMechanisms.size > 0 || sidebarExtra || sidebarAfterDescription || files.length > 0) && (
         <div
           style={{
-            width: 280,
-            minWidth: 280,
+            width: 340,
+            minWidth: 340,
             borderRight: `1px solid ${theme.colors.border}`,
             background: theme.colors.backgroundSecondary ?? theme.colors.background,
-            padding: '16px',
-            overflowY: 'auto',
             display: 'flex',
             flexDirection: 'column',
-            gap: 12,
+            overflow: 'hidden',
           }}
         >
+          <div
+            style={{
+              flex: 1,
+              minHeight: 0,
+              overflowY: 'auto',
+              padding: '16px',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 12,
+            }}
+          >
           {sidebarExtra}
           {title && (
             <h2
@@ -392,6 +513,15 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
               ))}
             </div>
           )}
+          </div>
+          {files.length > 0 && (
+            <SubsystemFileTree
+              files={files}
+              selectedFile={selected?.file ?? openFile}
+              hoveredFile={hoveredFile}
+              onSelectFile={onTreeSelectFile}
+            />
+          )}
         </div>
       )}
       
@@ -449,7 +579,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
       )}
       <ReactFlow
         key={`${baseNodesKey}-${baseEdgesKey}`}
-        nodes={xyflowNodesBase}
+        nodes={dispNodes}
         edges={dispEdges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
@@ -482,7 +612,12 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
         <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
         <Controls showZoom showFitView showInteractive />
       </ReactFlow>
-      {selected && <ComponentDetail component={selected} renderFileView={renderFileView} />}
+      {selected && <ComponentDetail component={selected} />}
+      <FileDrawer file={openFile} onClose={() => setOpenFile(null)}>
+        {fileViewer && openFile ? fileViewer(openFile) : null}
+      </FileDrawer>
+      {/* Startup cover — hides measurement, layout swap, and camera settle. */}
+      <GraphLayoutCover revealed={layoutReady} />
       {canvasOverlay}
       </div>
     </div>
@@ -490,8 +625,9 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
 }
 
 /** Detail panel for the selected component — the verifiable identity + sources
- *  moved off the canvas so nodes stay minimal. */
-function ComponentDetail({ component, renderFileView }: { component: SubsystemComponent; renderFileView?: (component: SubsystemComponent) => ReactNode }) {
+ *  moved off the canvas so nodes stay minimal. File content lives in the
+ *  bottom FileDrawer, not here. */
+function ComponentDetail({ component }: { component: SubsystemComponent }) {
   const { theme } = useTheme();
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const color = KIND_COLOR[component.kind] ?? '#888';
@@ -556,19 +692,101 @@ function ComponentDetail({ component, renderFileView }: { component: SubsystemCo
         </div>
       ))}
       {component.detail && <GraphifyDetailSections detail={component.detail} />}
-      {renderFileView && component.file && (
-        <div
+    </div>
+  );
+}
+
+/** Bottom panel that slides up from the bottom of the graph area to show a
+ *  file's contents — opened by node clicks and sidebar file-tree clicks
+ *  alike. Sits in normal flow (canvas shrinks while open, nothing covered)
+ *  and animates via height; stays mounted so open/close animates. */
+function FileDrawer({
+  file,
+  onClose,
+  children,
+}: {
+  file: string | null;
+  onClose: () => void;
+  children?: ReactNode;
+}) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const open = file !== null;
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        // Above the absolute edge-label overlay (zIndex 5), which spans the
+        // whole graph-area container including this panel's slice.
+        zIndex: 6,
+        flexShrink: 0,
+        height: open ? '45%' : 0,
+        minHeight: 0,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        background: theme.colors.background,
+        borderTop: open ? `1px solid ${theme.colors.border}` : 'none',
+        transition: 'height 200ms ease',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          padding: '6px 10px',
+          borderBottom: `1px solid ${theme.colors.border}`,
+          flexShrink: 0,
+        }}
+      >
+        <span
+          title={file ?? undefined}
           style={{
-            marginTop: 8,
-            maxHeight: 320,
-            overflow: 'auto',
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: 6,
+            flex: 1,
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+            color: muted,
           }}
         >
-          {renderFileView(component)}
-        </div>
-      )}
+          {file}
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close file"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 22,
+            height: 22,
+            padding: 0,
+            border: 'none',
+            borderRadius: 4,
+            background: 'transparent',
+            color: theme.colors.text,
+            cursor: 'pointer',
+          }}
+        >
+          <X size={14} />
+        </button>
+      </div>
+      <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>{children}</div>
     </div>
   );
 }