From d956c52eef8a4cec3a2d048ea1cbf167bd1c8263 Mon Sep 17 00:00:00 2001
From: Ashish Huddar <ashish.hudar@gmail.com>
Date: Sun, 5 Apr 2026 20:41:37 +0530
Subject: [PATCH] feat(web): add session-specific not-found.tsx for 404
 handling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/app/sessions/[id]/not-found.test.tsx  | 42 +++++++++++++++++++
 .../web/src/app/sessions/[id]/not-found.tsx   | 31 ++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 packages/web/src/app/sessions/[id]/not-found.test.tsx
 create mode 100644 packages/web/src/app/sessions/[id]/not-found.tsx

diff --git a/packages/web/src/app/sessions/[id]/not-found.test.tsx b/packages/web/src/app/sessions/[id]/not-found.test.tsx
new file mode 100644
index 000000000..7edf1f315
--- /dev/null
+++ b/packages/web/src/app/sessions/[id]/not-found.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<React.AnchorHTMLAttributes<HTMLAnchorElement>>) => (
+    <a {...props}>{children}</a>
+  ),
+}));
+
+import SessionNotFound from "./not-found";
+
+describe("SessionNotFound", () => {
+  it("renders the session-not-found message", () => {
+    render(<SessionNotFound />);
+    expect(screen.getByText("Session not found")).toBeInTheDocument();
+  });
+
+  it("renders descriptive subtext", () => {
+    render(<SessionNotFound />);
+    expect(
+      screen.getByText(
+        "The session you\u2019re looking for doesn\u2019t exist or has been deleted.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders a link back to the dashboard", () => {
+    render(<SessionNotFound />);
+    const link = screen.getByText("← Back to dashboard");
+    expect(link).toBeInTheDocument();
+    expect(link.closest("a")).toHaveAttribute("href", "/");
+  });
+
+  it("renders the terminal icon", () => {
+    const { container } = render(<SessionNotFound />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+});
diff --git a/packages/web/src/app/sessions/[id]/not-found.tsx b/packages/web/src/app/sessions/[id]/not-found.tsx
new file mode 100644
index 000000000..7fd7481fb
--- /dev/null
+++ b/packages/web/src/app/sessions/[id]/not-found.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+export default function SessionNotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-[var(--color-bg-base)]">
+      <svg
+        className="h-8 w-8 text-[var(--color-border-strong)]"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        viewBox="0 0 24 24"
+      >
+        <rect x="2" y="4" width="20" height="16" rx="2" />
+        <path d="M6 9l4 3-4 3M13 15h5" />
+      </svg>
+      <p className="text-[13px] text-[var(--color-text-muted)]">
+        Session not found
+      </p>
+      <p className="text-[12px] text-[var(--color-text-tertiary)]">
+        The session you&rsquo;re looking for doesn&rsquo;t exist or has been
+        deleted.
+      </p>
+      <Link
+        href="/"
+        className="text-[12px] text-[var(--color-accent)] hover:underline"
+      >
+        ← Back to dashboard
+      </Link>
+    </div>
+  );
+}