Fix/trachyte doctor panel modal

CHANGELOG.md

@@ -39,5 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Vault creation no longer lands inside the app's working tree (`apps/desktop/src-tauri/…`), which caused `tauri dev` rebuilds to restart the window and wipe the open vault/note state
 - External-change reloader no longer unsubscribes itself under React StrictMode (idempotent `start()` / `dispose()` lifecycle)
+- Doctor panel layout: "Rebuild index" button and its result no longer render inside the header row (was breaking the `flex` header layout)
+- Doctor panel modal a11y: focus trap (Tab wraps close ⇄ rebuild), `Escape` to close, auto-focus on open, accessible name via `aria-labelledby`
+- `Home.tsx`: index rebuild no longer uses the `indexer!` non-null assertion
 
 ### Removed

apps/desktop/src/features/doctor/DoctorPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from "react";
 import type { DoctorReport } from "@trachyte/core";
 import { runDoctor } from "../../ipc/doctor";
 
@@ -14,6 +14,8 @@ export default function DoctorPanel({ path, onClose, onRebuild }: DoctorPanelPro
   const [loading, setLoading] = useState(true);
   const [rebuilding, setRebuilding] = useState(false);
   const [rebuildResult, setRebuildResult] = useState<string | null>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const rebuildRef = useRef<HTMLButtonElement>(null);
 
   async function handleRebuild() {
     setRebuilding(true);
@@ -28,6 +30,20 @@ export default function DoctorPanel({ path, onClose, onRebuild }: DoctorPanelPro
     }
   }
 
+  function handleCloseKeyDown(e: ReactKeyboardEvent<HTMLButtonElement>) {
+    if (e.shiftKey && e.key === "Tab") {
+      e.preventDefault();
+      rebuildRef.current?.focus();
+    }
+  }
+
+  function handleRebuildKeyDown(e: ReactKeyboardEvent<HTMLButtonElement>) {
+    if (e.key === "Tab" && !e.shiftKey) {
+      e.preventDefault();
+      closeRef.current?.focus();
+    }
+  }
+
   useEffect(() => {
     let cancelled = false;
     void runDoctor(path)
@@ -45,36 +61,60 @@ export default function DoctorPanel({ path, onClose, onRebuild }: DoctorPanelPro
     };
   }, [path]);
 
+  useEffect(() => {
+    closeRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
       role="dialog"
       aria-modal="true"
+      aria-labelledby="doctor-title"
     >
       <div className="w-96 rounded-lg border border-gray-700 bg-gray-900 p-5 text-white shadow-xl">
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold">Trachyte Doctor</h2>
-          <button className="text-gray-400 hover:text-white" onClick={onClose} aria-label="Close">
-            ✕
-          </button>
+          <h2 id="doctor-title" className="text-lg font-semibold">
+            Trachyte Doctor
+          </h2>
           <button
-            className="mt-4 rounded bg-blue-600 px-3 py-2 text-sm font-medium hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
-            onClick={() => void handleRebuild()}
-            disabled={rebuilding}
+            ref={closeRef}
+            className="text-gray-400 hover:text-white"
+            onClick={onClose}
+            onKeyDown={handleCloseKeyDown}
+            aria-label="Close"
           >
-            {rebuilding ? "Rebuilding…" : "Rebuild index"}
+            ✕
           </button>
-          {rebuildResult !== null && (
-            <p
-              className={`mt-2 text-sm ${
-                rebuildResult.startsWith("Rebuild failed") ? "text-red-400" : "text-green-300"
-              }`}
-            >
-              {rebuildResult}
-            </p>
-          )}
         </div>
 
+        <button
+          ref={rebuildRef}
+          className="mb-4 w-full rounded bg-blue-600 px-3 py-2 text-sm font-medium hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+          onClick={() => void handleRebuild()}
+          onKeyDown={handleRebuildKeyDown}
+          disabled={rebuilding}
+        >
+          {rebuilding ? "Rebuilding…" : "Rebuild index"}
+        </button>
+        {rebuildResult !== null && (
+          <p
+            className={`mb-4 text-sm ${
+              rebuildResult.startsWith("Rebuild failed") ? "text-red-400" : "text-green-300"
+            }`}
+          >
+            {rebuildResult}
+          </p>
+        )}
+
         {loading && <p className="text-sm text-gray-400">Checking vault health…</p>}
 
         {!loading && error !== null && <p className="text-sm text-red-400">Error: {error}</p>}

apps/desktop/src/routes/Home.tsx

@@ -187,7 +187,9 @@ export default function Home() {
           key={openedVault}
           path={openedVault}
           onClose={() => setDoctorOpen(false)}
-          onRebuild={() => indexer!.rebuild()}
+          onRebuild={async () => {
+            if (indexer !== null) await indexer.rebuild();
+          }}
         />
       )}
       {paletteOpen && openedVault !== null && (