From f736030f0114387aaabf527dc2de881cd63d2cff Mon Sep 17 00:00:00 2001
From: Jason Woltje <jason@diversecanvas.com>
Date: Sun, 22 Feb 2026 21:42:10 -0600
Subject: [PATCH] feat(web): add custom 404 pages for global and authenticated
 routes

Refs #466
---
 .../web/src/app/(authenticated)/not-found.tsx | 160 ++++++++++++++++
 apps/web/src/app/not-found.tsx                | 175 ++++++++++++++++++
 2 files changed, 335 insertions(+)
 create mode 100644 apps/web/src/app/(authenticated)/not-found.tsx
 create mode 100644 apps/web/src/app/not-found.tsx

diff --git a/apps/web/src/app/(authenticated)/not-found.tsx b/apps/web/src/app/(authenticated)/not-found.tsx
new file mode 100644
index 0000000..b4d41af
--- /dev/null
+++ b/apps/web/src/app/(authenticated)/not-found.tsx
@@ -0,0 +1,160 @@
+import type { ReactElement } from "react";
+import Link from "next/link";
+
+export default function AuthenticatedNotFound(): ReactElement {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "60vh",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: "24px",
+          padding: "48px 40px",
+          background: "var(--surface)",
+          border: "1px solid var(--border)",
+          borderRadius: "var(--r-xl)",
+          boxShadow: "var(--shadow-md)",
+          textAlign: "center",
+          maxWidth: "420px",
+          width: "100%",
+        }}
+      >
+        {/* Compass icon in blue-tinted icon well */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 56,
+            height: 56,
+            borderRadius: "var(--r-lg)",
+            background: "rgba(47, 128, 255, 0.1)",
+            color: "var(--ms-blue-400)",
+          }}
+        >
+          <svg
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <polygon
+              points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
+              fill="currentColor"
+              stroke="none"
+              opacity="0.3"
+            />
+            <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
+          </svg>
+        </div>
+
+        {/* 404 badge pill */}
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            padding: "4px 12px",
+            borderRadius: "9999px",
+            fontSize: "0.75rem",
+            fontWeight: 600,
+            fontFamily: "var(--mono)",
+            background: "rgba(47, 128, 255, 0.15)",
+            color: "var(--ms-blue-400)",
+          }}
+        >
+          404
+        </span>
+
+        {/* Heading + description */}
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 600,
+              color: "var(--text)",
+              margin: 0,
+              letterSpacing: "-0.01em",
+            }}
+          >
+            Page not found
+          </h2>
+          <p
+            style={{
+              fontSize: "0.875rem",
+              color: "var(--muted)",
+              margin: 0,
+              lineHeight: 1.6,
+            }}
+          >
+            This page doesn&apos;t exist or you may not have permission to view it.
+          </p>
+        </div>
+
+        {/* Action buttons */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            marginTop: "8px",
+          }}
+        >
+          {/* Primary: Dashboard */}
+          <Link
+            href="/"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "9px 20px",
+              background: "var(--ms-blue-500)",
+              color: "#ffffff",
+              borderRadius: "var(--r)",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              textDecoration: "none",
+              transition: "opacity 0.15s ease",
+            }}
+          >
+            Dashboard
+          </Link>
+
+          {/* Ghost: Settings */}
+          <Link
+            href="/settings"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "9px 20px",
+              background: "transparent",
+              color: "var(--text-2)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r)",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              textDecoration: "none",
+              transition: "all 0.15s ease",
+            }}
+          >
+            Settings
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
new file mode 100644
index 0000000..31930ba
--- /dev/null
+++ b/apps/web/src/app/not-found.tsx
@@ -0,0 +1,175 @@
+import type { Metadata } from "next";
+import type { ReactElement } from "react";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "404 — Page Not Found | Mosaic Stack",
+};
+
+export default function NotFound(): ReactElement {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "100vh",
+        background: "var(--bg)",
+        padding: "24px",
+        textAlign: "center",
+        gap: "32px",
+      }}
+    >
+      {/* Mosaic logo mark — inline spans replicating the 5-element logo */}
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          position: "relative",
+          flexShrink: 0,
+        }}
+        role="img"
+        aria-label="Mosaic logo"
+      >
+        {/* Top-left: blue */}
+        <span
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: 19,
+            height: 19,
+            borderRadius: 4,
+            background: "var(--ms-blue-500)",
+          }}
+        />
+        {/* Top-right: purple */}
+        <span
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: 19,
+            height: 19,
+            borderRadius: 4,
+            background: "var(--ms-purple-500)",
+          }}
+        />
+        {/* Bottom-right: teal */}
+        <span
+          style={{
+            position: "absolute",
+            bottom: 0,
+            right: 0,
+            width: 19,
+            height: 19,
+            borderRadius: 4,
+            background: "var(--ms-teal-500)",
+          }}
+        />
+        {/* Bottom-left: amber */}
+        <span
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            width: 19,
+            height: 19,
+            borderRadius: 4,
+            background: "var(--ms-amber-500)",
+          }}
+        />
+        {/* Center: pink circle */}
+        <span
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 15,
+            height: 15,
+            borderRadius: "50%",
+            background: "var(--ms-pink-500)",
+          }}
+        />
+      </div>
+
+      {/* 404 gradient text */}
+      <h1
+        style={{
+          fontFamily: "var(--mono)",
+          fontSize: "6rem",
+          fontWeight: 700,
+          lineHeight: 1,
+          margin: 0,
+          background: "linear-gradient(135deg, var(--ms-blue-400), var(--ms-purple-500))",
+          WebkitBackgroundClip: "text",
+          WebkitTextFillColor: "transparent",
+          backgroundClip: "text",
+        }}
+      >
+        404
+      </h1>
+
+      {/* Heading + description */}
+      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+        <h2
+          style={{
+            fontSize: "1.5rem",
+            fontWeight: 600,
+            color: "var(--text)",
+            margin: 0,
+            letterSpacing: "-0.025em",
+          }}
+        >
+          Page not found
+        </h2>
+        <p
+          style={{
+            fontSize: "0.9375rem",
+            color: "var(--muted)",
+            margin: 0,
+            maxWidth: "400px",
+            lineHeight: 1.6,
+          }}
+        >
+          The page you&apos;re looking for doesn&apos;t exist or has been moved.
+        </p>
+      </div>
+
+      {/* Dashboard link styled as button */}
+      <Link
+        href="/"
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "10px 24px",
+          background: "var(--ms-blue-500)",
+          color: "#ffffff",
+          borderRadius: "var(--r)",
+          fontSize: "0.875rem",
+          fontWeight: 500,
+          textDecoration: "none",
+          transition: "opacity 0.15s ease",
+        }}
+      >
+        Go to Dashboard
+      </Link>
+
+      {/* Subtle status footer */}
+      <p
+        style={{
+          fontFamily: "var(--mono)",
+          fontSize: "0.75rem",
+          color: "var(--muted)",
+          margin: 0,
+          opacity: 0.6,
+        }}
+      >
+        HTTP 404 — Not Found
+      </p>
+    </div>
+  );
+}
-- 
2.49.1