dashboard-v2/src/App.js

@@ -1,10 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Route, Switch, Link, useLocation } from 'wouter';
+import { Route, Switch, Link, Router, useLocation } from 'wouter';
 import { CommandCenter } from './pages/CommandCenter';
 import { NodeDetail } from './pages/NodeDetail';
 import { StorageBrowser } from './pages/StorageBrowser';
 import { RefTrackingPage } from './pages/RefTrackingPage';
+// Base path — matches the deploy mount. When served locally at
+// :7700/v2/ the base is /v2; via Tailscale it's /clawstor.
+// Detected from the browser's current pathname so a single SPA
+// build works both places without env-var wiring.
+const BASE = (() => {
+    if (typeof window === 'undefined')
+        return '';
+    const p = window.location.pathname;
+    if (p === '/clawstor' || p.startsWith('/clawstor/'))
+        return '/clawstor';
+    if (p === '/v2' || p.startsWith('/v2/'))
+        return '/v2';
+    return '';
+})();
 export default function App() {
+    return (_jsx(Router, { base: BASE, children: _jsx(Shell, {}) }));
+}
+function Shell() {
     const [loc] = useLocation();
     const tab = (path, label) => {
         const active = loc === path || (path !== '/' && loc.startsWith(path));

dashboard-v2/src/App.tsx

@@ -1,10 +1,30 @@
-import { Route, Switch, Link, useLocation } from 'wouter';
+import { Route, Switch, Link, Router, useLocation } from 'wouter';
 import { CommandCenter } from './pages/CommandCenter';
 import { NodeDetail } from './pages/NodeDetail';
 import { StorageBrowser } from './pages/StorageBrowser';
 import { RefTrackingPage } from './pages/RefTrackingPage';
 
+// Base path — matches the deploy mount. When served locally at
+// :7700/v2/ the base is /v2; via Tailscale it's /clawstor.
+// Detected from the browser's current pathname so a single SPA
+// build works both places without env-var wiring.
+const BASE = (() => {
+  if (typeof window === 'undefined') return '';
+  const p = window.location.pathname;
+  if (p === '/clawstor' || p.startsWith('/clawstor/')) return '/clawstor';
+  if (p === '/v2' || p.startsWith('/v2/')) return '/v2';
+  return '';
+})();
+
 export default function App() {
+  return (
+    <Router base={BASE}>
+      <Shell />
+    </Router>
+  );
+}
+
+function Shell() {
   const [loc] = useLocation();
   const tab = (path: string, label: string) => {
     const active = loc === path || (path !== '/' && loc.startsWith(path));