From 350c6dec3488026a390c8e66c5130a8d33de61c4 Mon Sep 17 00:00:00 2001
From: Arul Sharma <31745423+arul28@users.noreply.github.com>
Date: Fri, 6 Mar 2026 11:26:22 -0500
Subject: [PATCH] feat: add Test tab to sidebar with Coming Soon screen

- Add Flask icon + /test entry to TabNav.tsx mainItems
- Create TestPage.tsx with centered Coming Soon message
- Add lazy import and /test route in App.tsx
- Add /test tint mapping in AppShell.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/desktop/src/renderer/components/app/App.tsx     |  4 ++++
 .../desktop/src/renderer/components/app/AppShell.tsx |  1 +
 apps/desktop/src/renderer/components/app/TabNav.tsx  |  2 ++
 .../src/renderer/components/test/TestPage.tsx        | 12 ++++++++++++
 4 files changed, 19 insertions(+)
 create mode 100644 apps/desktop/src/renderer/components/test/TestPage.tsx

diff --git a/apps/desktop/src/renderer/components/app/App.tsx b/apps/desktop/src/renderer/components/app/App.tsx
index 3f2f75180d..067332385a 100644
--- a/apps/desktop/src/renderer/components/app/App.tsx
+++ b/apps/desktop/src/renderer/components/app/App.tsx
@@ -47,6 +47,9 @@ const MissionsPage = React.lazy(() =>
 const CtoPage = React.lazy(() =>
   import("../cto/CtoPage").then((m) => ({ default: m.CtoPage }))
 );
+const TestPage = React.lazy(() =>
+  import("../test/TestPage").then((m) => ({ default: m.TestPage }))
+);
 
 import { useAppStore } from "../../state/appStore";
 
@@ -183,6 +186,7 @@ export function App() {
             <Route path="/automations" element={guardedLazy(<AutomationsPage />)} />
             <Route path="/missions" element={guardedLazy(<MissionsPage />)} />
             <Route path="/cto" element={guardedLazy(<CtoPage />)} />
+            <Route path="/test" element={guardedLazy(<TestPage />)} />
             <Route path="/settings" element={guardedLazy(<SettingsPage />)} />
             <Route path="*" element={<Navigate to="/project" replace />} />
           </Route>
diff --git a/apps/desktop/src/renderer/components/app/AppShell.tsx b/apps/desktop/src/renderer/components/app/AppShell.tsx
index fa60b4c8a7..2aa5890e50 100644
--- a/apps/desktop/src/renderer/components/app/AppShell.tsx
+++ b/apps/desktop/src/renderer/components/app/AppShell.tsx
@@ -355,6 +355,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       "/automations": "tab-tint-automations",
       "/missions": "tab-tint-missions",
       "/settings": "tab-tint-settings",
+      "/test": "tab-tint-missions",
     };
     return tintMap[location.pathname] ?? "";
   }, [location.pathname]);
diff --git a/apps/desktop/src/renderer/components/app/TabNav.tsx b/apps/desktop/src/renderer/components/app/TabNav.tsx
index 5013baf658..9f34556d82 100644
--- a/apps/desktop/src/renderer/components/app/TabNav.tsx
+++ b/apps/desktop/src/renderer/components/app/TabNav.tsx
@@ -13,6 +13,7 @@ import {
   Strategy,
   Brain,
   GearSix,
+  Flask,
 } from "@phosphor-icons/react";
 import { cn } from "../ui/cn";
 import { useAppStore } from "../../state/appStore";
@@ -30,6 +31,7 @@ const mainItems = [
   { to: "/automations", label: "Automations", icon: Robot },
   { to: "/missions", label: "Missions", icon: Strategy },
   { to: "/cto", label: "CTO", icon: Brain },
+  { to: "/test", label: "Test", icon: Flask },
 ] as const;
 
 const settingsItem = { to: "/settings", label: "Settings", icon: GearSix } as const;
diff --git a/apps/desktop/src/renderer/components/test/TestPage.tsx b/apps/desktop/src/renderer/components/test/TestPage.tsx
new file mode 100644
index 0000000000..3a14a8a915
--- /dev/null
+++ b/apps/desktop/src/renderer/components/test/TestPage.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export function TestPage() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="text-center">
+        <div className="text-2xl font-semibold text-fg">Coming Soon</div>
+        <div className="mt-2 text-sm text-muted-fg">This feature is under construction.</div>
+      </div>
+    </div>
+  );
+}