From 1318b7ca3bfa7f6611bf61b3bdb5108279f4d3a8 Mon Sep 17 00:00:00 2001
From: Jason Woltje <jason@diversecanvas.com>
Date: Fri, 27 Feb 2026 04:38:30 -0600
Subject: [PATCH] feat(web): add dedicated /terminal page route

Creates /terminal page with full-screen terminal panel. Updates sidebar
link from #terminal anchor to proper /terminal route.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/app/(authenticated)/terminal/page.tsx | 63 +++++++++++++++++++
 apps/web/src/components/layout/AppSidebar.tsx |  2 +-
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/app/(authenticated)/terminal/page.tsx

diff --git a/apps/web/src/app/(authenticated)/terminal/page.tsx b/apps/web/src/app/(authenticated)/terminal/page.tsx
new file mode 100644
index 0000000..915b9a3
--- /dev/null
+++ b/apps/web/src/app/(authenticated)/terminal/page.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+/**
+ * Terminal page — dedicated full-screen terminal route at /terminal.
+ *
+ * Renders the TerminalPanel component filling the available content area.
+ * The panel is always open on this page; there is no close action since
+ * the user navigates away using the sidebar instead.
+ */
+
+import { useState, useEffect } from "react";
+import type { ReactElement } from "react";
+import { TerminalPanel } from "@/components/terminal";
+import { getAccessToken } from "@/lib/auth-client";
+
+export default function TerminalPage(): ReactElement {
+  const [token, setToken] = useState<string>("");
+
+  // Resolve the access token once on mount. The WebSocket connection inside
+  // TerminalPanel uses this token for authentication.
+  useEffect((): void => {
+    getAccessToken()
+      .then((t) => {
+        setToken(t ?? "");
+      })
+      .catch((err: unknown) => {
+        console.error("[TerminalPage] Failed to retrieve access token:", err);
+      });
+  }, []);
+
+  return (
+    <>
+      {/* Override TerminalPanel inline height so it fills the page */}
+      <style>{`
+        .terminal-page-panel {
+          height: 100% !important;
+          border-top: none !important;
+          flex: 1 !important;
+        }
+      `}</style>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          overflow: "hidden",
+        }}
+        aria-label="Terminal"
+      >
+        <TerminalPanel
+          open={true}
+          onClose={(): void => {
+            /* No-op: on the dedicated terminal page the panel is always open.
+               Users navigate away using the sidebar rather than closing the panel. */
+          }}
+          token={token}
+          className="terminal-page-panel"
+        />
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/src/components/layout/AppSidebar.tsx b/apps/web/src/components/layout/AppSidebar.tsx
index 67ea1ec..8be56ff 100644
--- a/apps/web/src/components/layout/AppSidebar.tsx
+++ b/apps/web/src/components/layout/AppSidebar.tsx
@@ -254,7 +254,7 @@ const NAV_GROUPS: NavGroup[] = [
         badge: { label: "live", pulse: true },
       },
       {
-        href: "#terminal",
+        href: "/terminal",
         label: "Terminal",
         icon: <IconTerminal />,
       },