style(ui): format ui/src with prettier and check it in CI

.github/workflows/ui.yml

@@ -47,6 +47,11 @@ jobs:
       - name: ESLint
         run: bun run lint
 
+      - name: Prettier
+        # eslint-config-prettier turns ESLint's style rules off, so formatting is
+        # checked here or nowhere; 31 files had drifted before this step existed.
+        run: bun run format:check
+
       - name: TypeScript
         # Vite transpiles TypeScript without type-checking it, so `build` below
         # passes a type error. This is the only step that reads the types.

ui/src/App.module.css

@@ -15,7 +15,10 @@
 }
 
 :global(.react-flow__node[data-id]) {
-  transition: box-shadow 0.3s, transform 0.5s ease, opacity 0.7s ease-in-out;
+  transition:
+    box-shadow 0.3s,
+    transform 0.5s ease,
+    opacity 0.7s ease-in-out;
   cursor: pointer;
 }
 

ui/src/collapse.ts

@@ -1,9 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-function collectAllDescendants(
-  id: string,
-  parentChildren: Map<string, string[]>
-): string[] {
+function collectAllDescendants(id: string, parentChildren: Map<string, string[]>): string[] {
   const result: string[] = [];
   const direct = parentChildren.get(id) || [];
   for (const c of direct) {

ui/src/components/ControlPanel.tsx

@@ -42,7 +42,7 @@ export default function ControlPanel({
   searchQuery: string;
   setSearchQuery: (q: string) => void;
   searchInputRef?: RefObject<HTMLInputElement | null>;
-  colorMode: 'type' | 'health';
+  colorMode: "type" | "health";
   onToggleColorMode: () => void;
 }) {
   const { fitView } = useReactFlow();
@@ -88,15 +88,28 @@ export default function ControlPanel({
         <div className={panelStyles["compact-row"]}>
           {viewMode === "flow" ? (
             <>
-              <button className={sharedStyles.btn + " " + sharedStyles["btn-sm"]} onClick={onBack} aria-label="Back to full graph">
+              <button
+                className={sharedStyles.btn + " " + sharedStyles["btn-sm"]}
+                onClick={onBack}
+                aria-label="Back to full graph"
+              >
                 ← Back
               </button>
               {flowRootId && (
-                <button className={sharedStyles.btn + " " + sharedStyles["btn-sm"]} onClick={() => onBackToRoot?.()} aria-label="Back to root node">
+                <button
+                  className={sharedStyles.btn + " " + sharedStyles["btn-sm"]}
+                  onClick={() => onBackToRoot?.()}
+                  aria-label="Back to root node"
+                >
                   ↑ Root
                 </button>
               )}
-              <button className={sharedStyles.btn + " " + sharedStyles["btn-sm"]} onClick={handleFit} aria-label="Zoom to fit" title="Fit">
+              <button
+                className={sharedStyles.btn + " " + sharedStyles["btn-sm"]}
+                onClick={handleFit}
+                aria-label="Zoom to fit"
+                title="Fit"
+              >
                 ⊞ Fit
               </button>
             </>
@@ -120,21 +133,36 @@ export default function ControlPanel({
                 {showExternal ? "●Ext" : "○Ext"}
               </button>
               <button
-                className={`${sharedStyles.btn} ${sharedStyles["btn-sm"]} ${colorMode === 'health' ? sharedStyles.active : ""}`}
+                className={`${sharedStyles.btn} ${sharedStyles["btn-sm"]} ${colorMode === "health" ? sharedStyles.active : ""}`}
                 onClick={onToggleColorMode}
                 aria-label="Toggle heatmap coloring"
-                aria-pressed={colorMode === 'health'}
+                aria-pressed={colorMode === "health"}
                 title="Health heatmap (fan-out)"
               >
-                {colorMode === 'health' ? '🌡On' : '🌡Off'}
+                {colorMode === "health" ? "🌡On" : "🌡Off"}
               </button>
-              <button className={sharedStyles.btn + " " + sharedStyles["btn-sm"]} onClick={handleFit} aria-label="Zoom to fit" title="Fit">
+              <button
+                className={sharedStyles.btn + " " + sharedStyles["btn-sm"]}
+                onClick={handleFit}
+                aria-label="Zoom to fit"
+                title="Fit"
+              >
                 ⊞
               </button>
-              <button className={sharedStyles.btn + " " + sharedStyles["btn-sm"]} onClick={onExportPng} aria-label="Export as PNG" title="Export PNG">
+              <button
+                className={sharedStyles.btn + " " + sharedStyles["btn-sm"]}
+                onClick={onExportPng}
+                aria-label="Export as PNG"
+                title="Export PNG"
+              >
                 ⬇PNG
               </button>
-              <button className={sharedStyles.btn + " " + sharedStyles["btn-sm"]} onClick={onExportSvg} aria-label="Export as SVG" title="Export SVG">
+              <button
+                className={sharedStyles.btn + " " + sharedStyles["btn-sm"]}
+                onClick={onExportSvg}
+                aria-label="Export as SVG"
+                title="Export SVG"
+              >
                 ⬇SVG
               </button>
             </>

ui/src/components/FileContainerNode.test.tsx

@@ -14,7 +14,7 @@ function renderNode(props: any = {}) {
   return render(
     <ReactFlowProvider>
       <FileContainerNode {...defaultProps} />
-    </ReactFlowProvider>,
+    </ReactFlowProvider>
   );
 }
 

ui/src/components/FileContainerNode.tsx

@@ -14,8 +14,16 @@ function FileContainerNode({ data }: NodeProps) {
         <span className={styles.indicator}>{indicator}</span>
         <span className={styles.title}>{cleanLabel}</span>
       </div>
-      <Handle type="target" position={Position.Top} style={isExpanded ? { opacity: 0, pointerEvents: 'none' } : undefined} />
-      <Handle type="source" position={Position.Bottom} style={isExpanded ? { opacity: 0, pointerEvents: 'none' } : undefined} />
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={isExpanded ? { opacity: 0, pointerEvents: "none" } : undefined}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={isExpanded ? { opacity: 0, pointerEvents: "none" } : undefined}
+      />
     </div>
   );
 }