frectonz · frectonz · Mar 28, 2026 · Mar 28, 2026 · Mar 28, 2026 · Mar 28, 2026
diff --git a/docs/src/app/api/search/route.ts b/docs/src/app/api/search/route.ts
@@ -0,0 +1,32 @@
+import { createSearchAPI } from "fumadocs-core/search/server";
+import { source } from "@/lib/source";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+const indexes = await Promise.all(
+  source.getPages().map(async (page) => {
+    const data =
+      "load" in page.data && typeof page.data.load === "function"
+        ? await page.data.load()
+        : page.data;
+
+    const structuredData = data.structuredData ?? {
+      headings: [],
+      contents: [],
+    };
+
+    return {
+      id: page.url,
+      title: data.title ?? "Untitled",
+      description: data.description ?? "",
+      url: page.url,
+      structuredData,
+    };
+  }),
+);
+
+export const { staticGET: GET } = createSearchAPI("advanced", {
+  language: "english",
+  indexes,
+});
diff --git a/docs/src/components/provider.tsx b/docs/src/components/provider.tsx
@@ -1,12 +1,13 @@
 "use client";
 import { RootProvider } from "fumadocs-ui/provider/next";
 import type { ReactNode } from "react";
+import SearchDialog from "@/components/search-dialog";
 
 export function Provider({ children }: { children: ReactNode }) {
   return (
     <RootProvider
       search={{
-        enabled: false,
+        SearchDialog,
       }}
       theme={{ defaultTheme: "system" }}
     >

diff --git a/docs/src/components/search-dialog.tsx b/docs/src/components/search-dialog.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { create } from "@orama/orama";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from "fumadocs-ui/components/dialog/search";
+
+function initOrama() {
+  return create({
+    schema: { _: "string" },
+    language: "english",
+  });
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const { search, setSearch, query } = useDocsSearch({
+    type: "static",
+    initOrama,
+  });
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList items={query.data !== "empty" ? query.data : null} />
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}
diff --git a/ui/index.html b/ui/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />

diff --git a/ui/public/logo.svg b/ui/public/logo.svg
diff --git a/ui/src/components/ErrorBanner.tsx b/ui/src/components/ErrorBanner.tsx
@@ -1,22 +1,53 @@
-import { AlertTriangle } from 'lucide-react';
+import { useState } from 'react';
+import { AlertTriangle, ChevronDown } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 export function ErrorBanner({
   message,
+  details,
   className,
 }: {
   message: string;
+  details?: string;
   className?: string;
 }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasDetails = !!details;
+
   return (
     <div
       className={cn(
-        'px-5 py-4 mb-8 border border-destructive rounded bg-destructive/10 flex items-center gap-3',
+        'px-5 py-4 mb-8 border border-destructive rounded bg-destructive/10',
         className,
       )}
     >
-      <AlertTriangle className="w-5 h-5 text-destructive shrink-0" />
-      <p className="text-destructive text-sm">{message}</p>
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="w-5 h-5 text-destructive shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-destructive text-sm">{message}</p>
+            {hasDetails && (
+              <button
+                type="button"
+                onClick={() => setExpanded(!expanded)}
+                className="shrink-0 p-1 rounded hover:bg-destructive/20 transition-colors"
+              >
+                <ChevronDown
+                  className={cn(
+                    'w-4 h-4 text-destructive transition-transform',
+                    expanded && 'rotate-180',
+                  )}
+                />
+              </button>
+            )}
+          </div>
+          {hasDetails && expanded && (
+            <pre className="mt-3 pt-3 border-t border-destructive/30 text-destructive/80 text-xs font-mono whitespace-pre-wrap break-all">
+              {details}
+            </pre>
+          )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/ui/src/lib/error-utils.ts b/ui/src/lib/error-utils.ts
@@ -0,0 +1,35 @@
+export interface ErrorDisplay {
+  message: string;
+  details?: string;
+}
+
+export function getErrorDisplay(error: unknown): ErrorDisplay {
+  if (error instanceof TypeError) {
+    const message = error.message.toLowerCase();
+    if (message.includes('fetch') || message.includes('network') || message.includes('failed to')) {
+      return {
+        message: 'Unable to connect to Penny server. Make sure it is running.',
+        details: error.message,
+      };
+    }
+  }
+
+  if (error instanceof Error) {
+    const message = error.message.toLowerCase();
+    if (message.includes('invalid_type') || message.includes('expected object')) {
+      return {
+        message: 'Unable to connect to Penny server. Make sure it is running.',
+        details: error.message,
+      };
+    }
+    if (message.includes('connection refused')) {
+      return {
+        message: 'Connection refused. Make sure Penny server is running.',
+        details: error.message,
+      };
+    }
+    return { message: error.message };
+  }
+
+  return { message: 'An unknown error occurred.' };
+}
diff --git a/ui/src/routeTree.gen.ts b/ui/src/routeTree.gen.ts
@@ -9,10 +9,16 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as SplatRouteImport } from './routes/$'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as RunRunIdRouteImport } from './routes/run.$runId'
 import { Route as AppHostRouteImport } from './routes/app.$host'
 
+const SplatRoute = SplatRouteImport.update({
+  id: '/$',
+  path: '/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -31,36 +37,47 @@ const AppHostRoute = AppHostRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/$': typeof SplatRoute
   '/app/$host': typeof AppHostRoute
   '/run/$runId': typeof RunRunIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/$': typeof SplatRoute
   '/app/$host': typeof AppHostRoute
   '/run/$runId': typeof RunRunIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/$': typeof SplatRoute
   '/app/$host': typeof AppHostRoute
   '/run/$runId': typeof RunRunIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/app/$host' | '/run/$runId'
+  fullPaths: '/' | '/$' | '/app/$host' | '/run/$runId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/app/$host' | '/run/$runId'
-  id: '__root__' | '/' | '/app/$host' | '/run/$runId'
+  to: '/' | '/$' | '/app/$host' | '/run/$runId'
+  id: '__root__' | '/' | '/$' | '/app/$host' | '/run/$runId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  SplatRoute: typeof SplatRoute
   AppHostRoute: typeof AppHostRoute
   RunRunIdRoute: typeof RunRunIdRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/$': {
+      id: '/$'
+      path: '/$'
+      fullPath: '/$'
+      preLoaderRoute: typeof SplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -87,6 +104,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  SplatRoute: SplatRoute,
   AppHostRoute: AppHostRoute,
   RunRunIdRoute: RunRunIdRoute,
 }

diff --git a/ui/src/routes/$.tsx b/ui/src/routes/$.tsx
@@ -0,0 +1,46 @@
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
+import { AlertCircle, Home } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { PageContainer } from '@/components/PageContainer';
+
+export const Route = createFileRoute('/$')({
+  component: NotFound,
+});
+
+function NotFound() {
+  const navigate = useNavigate();
+  const [countdown, setCountdown] = useState(10);
+
+  useEffect(() => {
+    if (countdown === 0) {
+      navigate({ to: '/' });
+      return;
+    }
+    const timer = setTimeout(() => setCountdown((c) => c - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [countdown, navigate]);
+
+  return (
+    <PageContainer>
+      <div className="flex min-h-[60vh] flex-col items-center justify-center text-center">
+        <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-destructive/10">
+          <AlertCircle className="h-10 w-10 text-destructive" />
+        </div>
+        <h1 className="mb-2 text-6xl font-bold text-foreground">404</h1>
+        <p className="mb-2 text-xl font-medium text-foreground">
+          Page not found
+        </p>
+        <p className="mb-8 text-muted-foreground">
+          Redirecting to dashboard in {countdown} seconds...
+        </p>
+        <Link
+          to="/"
+          className="inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent/90"
+        >
+          <Home className="h-4 w-4" />
+          Go to Dashboard
+        </Link>
+      </div>
+    </PageContainer>
+  );
+}
diff --git a/ui/src/routes/app.$host.tsx b/ui/src/routes/app.$host.tsx
@@ -24,6 +24,7 @@ import {
 } from '@/components/TimeRangeSelector';
 import { $fetch } from '@/lib/api';
 import { formatFailureRate, formatMs, formatRelativeTime } from '@/lib/format';
+import { getErrorDisplay } from '@/lib/error-utils';
 import { timeRangeSearchSchema } from '@/lib/searchSchemas';
 
 export const Route = createFileRoute('/app/$host')({
@@ -150,9 +151,7 @@ function AppDetailPage() {
 
       {/* Error State */}
       {error && (
-        <ErrorBanner
-          message={error.message || 'Failed to load application data'}
-        />
+        <ErrorBanner {...getErrorDisplay(error)} />
       )}
 
       {/* Loading State */}

diff --git a/ui/src/routes/index.tsx b/ui/src/routes/index.tsx
@@ -23,6 +23,7 @@ import {
 import { Skeleton } from '@/components/ui/skeleton';
 import { $fetch, type AppOverview } from '@/lib/api';
 import { formatFailureRate, formatMs, formatRelativeTime } from '@/lib/format';
+import { getErrorDisplay } from '@/lib/error-utils';
 import { timeRangeSearchSchema } from '@/lib/searchSchemas';
 
 export const Route = createFileRoute('/')({
@@ -247,7 +248,7 @@ function App() {
         <TimeRangeSelector value={timeRange} onChange={handleTimeRangeChange} />
       </div>
 
-      {error && <ErrorBanner message={`Error: ${error.message}`} />}
+      {error && <ErrorBanner {...getErrorDisplay(error)} />}
 
       {/* Stats Cards Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">