fix(dashboard): production polish — mobile nav, shared nav config, virtualized logs

dashboard/src/components/layout/mobile-menu.tsx

@@ -1,21 +1,6 @@
 import { Link, useLocation } from "@tanstack/react-router";
-import {
-  Activity,
-  BarChart3,
-  Box,
-  CircuitBoard,
-  Cog,
-  ExternalLink as ExternalLinkIcon,
-  LayoutDashboard,
-  ListTree,
-  type LucideIcon,
-  Menu,
-  ScrollText,
-  Server,
-  Settings2,
-  Skull,
-} from "lucide-react";
-import { useEffect, useState } from "react";
+import { ExternalLink as ExternalLinkIcon, Menu } from "lucide-react";
+import { useState } from "react";
 import {
   Button,
   Sheet,
@@ -26,55 +11,15 @@ import {
 } from "@/components/ui";
 import { useBranding, useExternalLinks } from "@/features/settings";
 import { cn } from "@/lib/cn";
-
-interface NavItem {
-  to: string;
-  label: string;
-  icon: LucideIcon;
-}
-
-const NAV: Array<{ title: string; items: NavItem[] }> = [
-  {
-    title: "Monitoring",
-    items: [
-      { to: "/", label: "Overview", icon: LayoutDashboard },
-      { to: "/jobs", label: "Jobs", icon: ListTree },
-      { to: "/metrics", label: "Metrics", icon: BarChart3 },
-      { to: "/logs", label: "Logs", icon: ScrollText },
-    ],
-  },
-  {
-    title: "Infrastructure",
-    items: [
-      { to: "/queues", label: "Queues", icon: Box },
-      { to: "/workers", label: "Workers", icon: Server },
-      { to: "/resources", label: "Resources", icon: Activity },
-    ],
-  },
-  {
-    title: "Reliability",
-    items: [
-      { to: "/dead-letters", label: "Dead letters", icon: Skull },
-      { to: "/circuit-breakers", label: "Circuit breakers", icon: CircuitBoard },
-      { to: "/system", label: "System", icon: Settings2 },
-    ],
-  },
-  {
-    title: "Configuration",
-    items: [{ to: "/settings", label: "Settings", icon: Cog }],
-  },
-];
+import { NAV } from "./nav-config";
 
 export function MobileMenu() {
   const { pathname } = useLocation();
   const { title } = useBranding();
   const externalLinks = useExternalLinks();
   const [open, setOpen] = useState(false);
 
-  // Close on navigation
-  useEffect(() => {
-    setOpen(false);
-  }, []);
+  const close = () => setOpen(false);
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -100,6 +45,7 @@ export function MobileMenu() {
                     <li key={to}>
                       <Link
                         to={to}
+                        onClick={close}
                         className={cn(
                           "flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors",
                           active
@@ -128,6 +74,7 @@ export function MobileMenu() {
                       href={link.url}
                       target="_blank"
                       rel="noreferrer noopener"
+                      onClick={close}
                       className="flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm text-[var(--fg-muted)] transition-colors hover:bg-[var(--surface-2)] hover:text-[var(--fg)]"
                     >
                       <ExternalLinkIcon className="size-4" aria-hidden />

dashboard/src/components/layout/nav-config.ts

@@ -0,0 +1,66 @@
+import {
+  Activity,
+  BarChart3,
+  Box,
+  CircuitBoard,
+  Cog,
+  LayoutDashboard,
+  ListTree,
+  type LucideIcon,
+  ScrollText,
+  Server,
+  Settings2,
+  Skull,
+  Webhook as WebhookIcon,
+} from "lucide-react";
+
+export interface NavItem {
+  to: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+export interface NavGroup {
+  title: string;
+  items: NavItem[];
+}
+
+/**
+ * Single source of truth for the primary navigation. Consumed by both the
+ * desktop {@link Sidebar} and the {@link MobileMenu} so the two never drift.
+ */
+export const NAV: NavGroup[] = [
+  {
+    title: "Monitoring",
+    items: [
+      { to: "/", label: "Overview", icon: LayoutDashboard },
+      { to: "/jobs", label: "Jobs", icon: ListTree },
+      { to: "/metrics", label: "Metrics", icon: BarChart3 },
+      { to: "/logs", label: "Logs", icon: ScrollText },
+    ],
+  },
+  {
+    title: "Infrastructure",
+    items: [
+      { to: "/queues", label: "Queues", icon: Box },
+      { to: "/workers", label: "Workers", icon: Server },
+      { to: "/resources", label: "Resources", icon: Activity },
+    ],
+  },
+  {
+    title: "Reliability",
+    items: [
+      { to: "/dead-letters", label: "Dead letters", icon: Skull },
+      { to: "/circuit-breakers", label: "Circuit breakers", icon: CircuitBoard },
+      { to: "/system", label: "System", icon: Settings2 },
+    ],
+  },
+  {
+    title: "Configuration",
+    items: [
+      { to: "/tasks", label: "Tasks", icon: ListTree },
+      { to: "/webhooks", label: "Webhooks", icon: WebhookIcon },
+      { to: "/settings", label: "Settings", icon: Cog },
+    ],
+  },
+];

dashboard/src/components/layout/route-error-boundary.tsx

@@ -1,24 +1,18 @@
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
-import { AlertTriangle } from "lucide-react";
 import type { ReactNode } from "react";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
-import { Button } from "@/components/ui";
+import { ErrorState } from "@/components/ui";
 
 function RouteErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   return (
     <div className="grid min-h-[50vh] place-items-center">
-      <div className="max-w-md text-center">
-        <div className="mx-auto mb-4 grid size-12 place-items-center rounded-full bg-danger-dim text-danger">
-          <AlertTriangle className="size-5" aria-hidden />
-        </div>
-        <h1 className="text-lg font-semibold">Something went wrong</h1>
-        <p className="mt-2 break-words text-sm text-[var(--fg-muted)]">
-          {error instanceof Error ? error.message : String(error)}
-        </p>
-        <Button variant="secondary" className="mt-5" onClick={resetErrorBoundary}>
-          Try again
-        </Button>
-      </div>
+      <ErrorState
+        title="Something went wrong"
+        description={error instanceof Error ? error.message : String(error)}
+        onRetry={resetErrorBoundary}
+        retryLabel="Try again"
+        className="max-w-md"
+      />
     </div>
   );
 }

dashboard/src/components/layout/sidebar.tsx

@@ -1,70 +1,8 @@
 import { Link, useLocation } from "@tanstack/react-router";
-import {
-  Activity,
-  AlertOctagon,
-  BarChart3,
-  Box,
-  CircuitBoard,
-  Cog,
-  ExternalLink as ExternalLinkIcon,
-  LayoutDashboard,
-  ListTree,
-  type LucideIcon,
-  ScrollText,
-  Server,
-  Settings2,
-  Skull,
-  Webhook as WebhookIcon,
-} from "lucide-react";
+import { AlertOctagon, ExternalLink as ExternalLinkIcon } from "lucide-react";
 import { useBranding, useExternalLinks } from "@/features/settings";
 import { cn } from "@/lib/cn";
-
-interface NavItem {
-  to: string;
-  label: string;
-  icon: LucideIcon;
-}
-
-interface NavGroup {
-  title: string;
-  items: NavItem[];
-}
-
-const NAV: NavGroup[] = [
-  {
-    title: "Monitoring",
-    items: [
-      { to: "/", label: "Overview", icon: LayoutDashboard },
-      { to: "/jobs", label: "Jobs", icon: ListTree },
-      { to: "/metrics", label: "Metrics", icon: BarChart3 },
-      { to: "/logs", label: "Logs", icon: ScrollText },
-    ],
-  },
-  {
-    title: "Infrastructure",
-    items: [
-      { to: "/queues", label: "Queues", icon: Box },
-      { to: "/workers", label: "Workers", icon: Server },
-      { to: "/resources", label: "Resources", icon: Activity },
-    ],
-  },
-  {
-    title: "Reliability",
-    items: [
-      { to: "/dead-letters", label: "Dead letters", icon: Skull },
-      { to: "/circuit-breakers", label: "Circuit breakers", icon: CircuitBoard },
-      { to: "/system", label: "System", icon: Settings2 },
-    ],
-  },
-  {
-    title: "Configuration",
-    items: [
-      { to: "/tasks", label: "Tasks", icon: ListTree },
-      { to: "/webhooks", label: "Webhooks", icon: WebhookIcon },
-      { to: "/settings", label: "Settings", icon: Cog },
-    ],
-  },
-];
+import { NAV } from "./nav-config";
 
 export function Sidebar() {
   const { pathname } = useLocation();

dashboard/src/features/jobs/components/job-logs-tab.tsx

@@ -1,4 +1,6 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { ScrollText } from "lucide-react";
+import { useRef } from "react";
 import { EmptyState, ErrorState, Skeleton } from "@/components/ui";
 import type { TaskLog } from "@/lib/api-types";
 import { cn } from "@/lib/cn";
@@ -12,7 +14,22 @@ interface JobLogsTabProps {
   onRetry: () => void;
 }
 
+const ROW_ESTIMATE = 33;
+
 export function JobLogsTab({ logs, loading, error, onRetry }: JobLogsTabProps) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const count = logs?.length ?? 0;
+
+  // Rows wrap to arbitrary heights (full, un-truncated messages), so we measure
+  // each rendered row instead of trusting a fixed estimate. Only the visible
+  // slice mounts, keeping a job's hundreds of log lines smooth to scroll.
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_ESTIMATE,
+    overscan: 10,
+  });
+
   if (error) {
     return <ErrorState title="Couldn't load logs" description={error.message} onRetry={onRetry} />;
   }
@@ -26,24 +43,43 @@ export function JobLogsTab({ logs, loading, error, onRetry }: JobLogsTabProps) {
   }
 
   return (
-    <div className="rounded-lg bg-[var(--surface)] ring-1 ring-inset ring-[var(--border)]">
-      <ul className="divide-y divide-[var(--border)] font-mono text-[11px]">
-        {logs.map((log, i) => {
+    <div
+      ref={parentRef}
+      className="max-h-[560px] overflow-auto rounded-lg bg-[var(--surface)] ring-1 ring-inset ring-[var(--border)]"
+    >
+      <div
+        style={{ height: virtualizer.getTotalSize(), width: "100%", position: "relative" }}
+        className="font-mono text-[11px]"
+      >
+        {virtualizer.getVirtualItems().map((item) => {
+          const log = logs[item.index];
+          if (!log) return null;
           const levelClass = logLevelClass(log.level);
-          const key = `${log.logged_at}-${log.level}-${i}`;
           return (
-            <li key={key} className="flex gap-3 px-4 py-2 hover:bg-[var(--surface-2)]/60">
+            <div
+              key={`${log.logged_at}-${log.level}-${item.index}`}
+              ref={virtualizer.measureElement}
+              data-index={item.index}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${item.start}px)`,
+              }}
+              className="flex gap-3 border-b border-[var(--border)] px-4 py-2 hover:bg-[var(--surface-2)]/60"
+            >
               <span className="shrink-0 text-[var(--fg-subtle)]">
                 {formatAbsolute(log.logged_at)}
               </span>
               <span className={cn("shrink-0 uppercase", levelClass)}>{log.level}</span>
               <span className="flex-1 whitespace-pre-wrap break-words text-[var(--fg)]">
                 {log.message}
               </span>
-            </li>
+            </div>
           );
         })}
-      </ul>
+      </div>
     </div>
   );
 }

dashboard/src/features/resources/components/resources-table.tsx

@@ -1,7 +1,7 @@
 import type { ColumnDef } from "@tanstack/react-table";
 import { Activity } from "lucide-react";
 import { useMemo } from "react";
-import { Badge, DataTable, EmptyState, ErrorState, Skeleton } from "@/components/ui";
+import { Badge, DataTable, EmptyState, ErrorState, TableSkeleton } from "@/components/ui";
 import type { ResourceStatus } from "@/lib/api-types";
 import { resourceTone } from "@/lib/status";
 import { formatDuration } from "@/lib/time";
@@ -107,7 +107,9 @@ export function ResourcesTable({ resources, loading, error, onRetry }: Resources
   }
 
   if (loading && !resources) {
-    return <Skeleton className="h-48 w-full" />;
+    return (
+      <TableSkeleton rows={4} columns={["w-32", "w-16", "w-16", "w-16", "w-16", "w-40", "w-24"]} />
+    );
   }
 
   if (!resources || resources.length === 0) {