From c9fec91740436e38bfd05f135990dda917ef72d3 Mon Sep 17 00:00:00 2001
From: Pedro Figueiredo <pedro.figueiredo@databricks.com>
Date: Thu, 29 Oct 2026 11:31:37 +0000
Subject: [PATCH 1/2] feat(template): add a not-found page for unknown routes

The template's router has no catch-all route, so any path outside the
plugin pages renders React Router's built-in "Unexpected Application
Error! 404 Not Found" page, which in development also asks for an
ErrorBoundary. A catch-all route inside the layout now renders a "Page
not found" page that keeps the header and nav and links back home.

Signed-off-by: Pedro Figueiredo <pedro.figueiredo@databricks.com>
---
 template/client/src/App.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/template/client/src/App.tsx b/template/client/src/App.tsx
index 18d4dda95..686ad19c8 100644
--- a/template/client/src/App.tsx
+++ b/template/client/src/App.tsx
@@ -1,4 +1,4 @@
-import { createBrowserRouter, RouterProvider, NavLink, Outlet } from 'react-router';
+import { createBrowserRouter, RouterProvider, Link, NavLink, Outlet, useLocation } from 'react-router';
 import { useState } from 'react';
 import {
   Button,
@@ -169,6 +169,7 @@ const router = createBrowserRouter([
 {{- if .plugins.jobs}}
       { path: '/jobs', element: <JobsPage /> },
 {{- end}}
+      { path: '*', element: <NotFoundPage /> },
     ],
   },
 ]);
@@ -222,3 +223,23 @@ function HomePage() {
     </div>
   );
 }
+
+function NotFoundPage() {
+  const { pathname } = useLocation();
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6 mt-8 text-center">
+      <div>
+        <p className="text-sm font-medium text-muted-foreground mb-2">404</p>
+        <h2 className="text-3xl font-bold mb-2 text-foreground">Page not found</h2>
+        <p className="text-lg text-muted-foreground">
+          There is no page at{' '}
+          <code className="bg-muted px-1.5 py-0.5 rounded text-base font-mono break-all">{pathname}</code>
+        </p>
+      </div>
+      <Button asChild>
+        <Link to="/">Back to home</Link>
+      </Button>
+    </div>
+  );
+}

From 0632eef044e743404ec7422cc92a5a64bf8e872f Mon Sep 17 00:00:00 2001
From: Pedro Figueiredo <pedro.figueiredo@databricks.com>
Date: Thu, 29 Oct 2026 11:42:42 +0000
Subject: [PATCH 2/2] feat(template): build the not-found page from the
 appkit-ui Empty state

Signed-off-by: Pedro Figueiredo <pedro.figueiredo@databricks.com>
---
 template/client/src/App.tsx | 37 +++++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/template/client/src/App.tsx b/template/client/src/App.tsx
index 686ad19c8..7dad5a351 100644
--- a/template/client/src/App.tsx
+++ b/template/client/src/App.tsx
@@ -6,13 +6,19 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   useIsMobile,
 } from '@databricks/appkit-ui/react';
-import { Menu } from 'lucide-react';
+import { FileQuestionMark, Menu } from 'lucide-react';
 {{- if .plugins.agents}}
 import { AgentChat } from './pages/agents/AgentChat';
 {{- end}}
@@ -228,18 +234,21 @@ function NotFoundPage() {
   const { pathname } = useLocation();
 
   return (
-    <div className="max-w-2xl mx-auto space-y-6 mt-8 text-center">
-      <div>
-        <p className="text-sm font-medium text-muted-foreground mb-2">404</p>
-        <h2 className="text-3xl font-bold mb-2 text-foreground">Page not found</h2>
-        <p className="text-lg text-muted-foreground">
-          There is no page at{' '}
-          <code className="bg-muted px-1.5 py-0.5 rounded text-base font-mono break-all">{pathname}</code>
-        </p>
-      </div>
-      <Button asChild>
-        <Link to="/">Back to home</Link>
-      </Button>
-    </div>
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FileQuestionMark />
+        </EmptyMedia>
+        <EmptyTitle>Page not found</EmptyTitle>
+        <EmptyDescription>
+          There is no page at <code className="break-all">{pathname}</code>
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button asChild>
+          <Link to="/">Back to home</Link>
+        </Button>
+      </EmptyContent>
+    </Empty>
   );
 }