fix(devtools): stable PendingLane key + real TypeScript typecheck in CI

.github/workflows/ci.yml

@@ -40,5 +40,8 @@ jobs:
       - name: Lint
         run: bun run lint
 
+      - name: Typecheck
+        run: bun run typecheck
+
       - name: Build
         run: bun run build

package.json

@@ -11,6 +11,7 @@
     "build:dev": "vite build --mode development",
     "generate:sitemap": "bun run scripts/generate-sitemap.ts",
     "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "test": "bun test",
     "format": "prettier --write ."

src/components/devtools/AppShell.tsx

@@ -27,7 +27,7 @@ function useTablistKeyboard(tab: Tab, onTabChange: (tab: Tab) => void) {
     const buttons = Array.from(
       navRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]') ?? [],
     );
-    const current = buttons.findIndex((b) => b.dataset.tab === tab);
+    const current = buttons.findIndex((b) => b.dataset["tab"] === tab);
     if (current === -1 || buttons.length === 0) return;
     e.preventDefault();
     let next: number;
@@ -37,7 +37,7 @@ function useTablistKeyboard(tab: Tab, onTabChange: (tab: Tab) => void) {
     else next = (current - 1 + buttons.length) % buttons.length;
     const target = buttons[next];
     target?.focus();
-    const id = target?.dataset.tab as Tab | undefined;
+    const id = target?.dataset["tab"] as Tab | undefined;
     if (id) onTabChange(id);
   };
 

src/components/devtools/LoopDiagram.tsx

@@ -153,7 +153,7 @@ function PendingLane({ items, idle }: { items: QueueItem[]; idle: boolean }) {
         <div className="flex flex-wrap items-center gap-1.5">
           {items.map((item) => (
             <span
-              key={item.key}
+              key={`p${item.id}`}
               className="inline-flex max-w-full items-center rounded-sm border border-api bg-api/10 px-2 py-1 text-[11px] text-api"
             >
               <span className="min-w-0 truncate">{item.label}</span>

src/components/devtools/PatternLibrary.tsx

@@ -20,8 +20,8 @@ export function PatternLibrary({
   onConsumeFocusedPattern,
 }: {
   onRun: (code: string) => void;
-  focusedPattern?: string;
-  onConsumeFocusedPattern?: () => void;
+  focusedPattern?: string | undefined;
+  onConsumeFocusedPattern?: (() => void) | undefined;
 }) {
   const total = INTERVIEW_PATTERNS.length;
 
@@ -75,7 +75,7 @@ function PatternRow({
   pattern: InterviewPattern;
   onRun: (code: string) => void;
   focused: boolean;
-  onConsumeFocus?: () => void;
+  onConsumeFocus?: (() => void) | undefined;
 }) {
   const [open, setOpen] = useState(false);
 

src/components/devtools/SourcesView.tsx

@@ -12,8 +12,8 @@ export function SourcesView({
 }: {
   activeEra: string;
   expandedConcept: string | null;
-  focusedPattern?: string;
-  onConsumeFocusedPattern?: () => void;
+  focusedPattern?: string | undefined;
+  onConsumeFocusedPattern?: (() => void) | undefined;
   onSelectEra: (eraId: string) => void;
   onToggleConcept: (conceptId: string | null) => void;
   onRun: (code: string) => void;

src/components/devtools/Timeline.tsx

@@ -34,7 +34,7 @@ export function Timeline({
     const buttons = Array.from(
       railRef.current?.querySelectorAll<HTMLButtonElement>('[data-era]') ?? [],
     );
-    const current = buttons.findIndex((b) => b.dataset.era === era.id);
+    const current = buttons.findIndex((b) => b.dataset["era"] === era.id);
     if (current === -1 || buttons.length === 0) return;
     e.preventDefault();
     let next: number;
@@ -43,7 +43,7 @@ export function Timeline({
     else if (e.key === "ArrowDown") next = (current + 1) % buttons.length;
     else next = (current - 1 + buttons.length) % buttons.length;
     const target = buttons[next];
-    const id = target?.dataset.era;
+    const id = target?.dataset["era"];
     if (!id) return;
     target.focus();
     onSelectEra(id);

src/routes/__root.tsx

@@ -25,6 +25,7 @@ function NotFoundComponent() {
         <div className="mt-6">
           <Link
             to="/"
+            search={{ tab: "timeline" }}
             className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
           >
             Go home

src/routes/index.tsx

@@ -10,9 +10,10 @@ import { SITE_ORIGIN, SITE_TITLE, SITE_DESCRIPTION, websiteJsonLd } from "@/lib/
 const Workbench = lazy(() => import("@/components/devtools/Workbench"));
 
 export const Route = createFileRoute("/")({
-  validateSearch: (search: Record<string, unknown>): { tab: Tab; focusPattern?: string } => ({
-    tab: search.tab === "loop" || search.tab === "console" ? search.tab : "timeline",
-    focusPattern: typeof search.focusPattern === "string" ? search.focusPattern : undefined,
+  validateSearch: (search: Record<string, unknown>): { tab: Tab; focusPattern?: string | undefined } => ({
+    tab: search["tab"] === "loop" || search["tab"] === "console" ? search["tab"] : "timeline",
+    focusPattern:
+      typeof search["focusPattern"] === "string" ? search["focusPattern"] : undefined,
   }),
   head: () => ({
     meta: [