fix(dashboard/contract): derive shell endpoints from runtime config so non-default base paths work

Reported: hosting Forge on port 7901 with the dashboard mounted at a
non-default base produced 404s on /api/dashboard/v1 because the React shell
hardcoded both that path and the React Router basename to /dashboard.

Server: extension.go's makeShellSPAHandler now buffers index.html and
injects a small <script> just before </head> that exposes
window.__FORGE_DASHBOARD__ = { basePath, contractBase, shellBase }, derived
from e.config.BasePath. Shell:

- runtime/config.ts (new): reads the injected globals at module load and
  exports basePath / contractBase / shellBase. Falls back to /dashboard so
  Vite dev mode + unit tests + direct module imports still resolve.
- contract/client.ts, contract/sse.ts: default baseURL now comes from
  contractBase instead of the hardcoded literal.
- auth/principal.ts: /principal fetch is `${contractBase}/principal`.
- App.tsx: BrowserRouter basename comes from shellBase.

Test setup pins __FORGE_DASHBOARD__ to /api/dashboard/v1 so the existing
MSW handlers keep matching.

24 React tests + 37 Go packages green; pnpm lint and pnpm build clean.

Author: juicycleff

extensions/dashboard/contract/shell/src/App.tsx

@@ -12,6 +12,7 @@ import { useContractGraph } from "./contract/hooks";
 import { LoadingNode, ErrorNode } from "./runtime/fallbacks";
 import { usePrincipalStore } from "./auth/principal";
 import { useThemeStore } from "@/lib/theme";
+import { shellBase } from "./runtime/config";
 
 const DEFAULT_CONTRIBUTOR = "core-contract";
 
@@ -55,7 +56,7 @@ export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <IntentRegistryProvider value={registry}>
-        <BrowserRouter basename="/dashboard/contract/app">
+        <BrowserRouter basename={shellBase}>
           <Routes>
             <Route path="*" element={<PageRoute />} />
           </Routes>

extensions/dashboard/contract/shell/src/auth/principal.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { contractBase } from "../runtime/config";
 import type { Principal } from "../contract/types";
 
 interface PrincipalState {
@@ -14,7 +15,7 @@ export const usePrincipalStore = create<PrincipalState>((set) => ({
   error: null,
   async load(fetcher = fetch) {
     try {
-      const res = await fetcher("/api/dashboard/v1/principal", { credentials: "include" });
+      const res = await fetcher(`${contractBase}/principal`, { credentials: "include" });
       if (!res.ok) {
         set({ loaded: true, error: `HTTP ${res.status}`, principal: null });
         return;

extensions/dashboard/contract/shell/src/contract/client.ts

@@ -1,3 +1,4 @@
+import { contractBase } from "../runtime/config";
 import type {
   ContractError,
   EnvelopeResponse,
@@ -41,7 +42,7 @@ export class ContractClient {
   private csrfToken: string | null = null;
 
   constructor(opts: ClientOptions = {}) {
-    this.baseURL = opts.baseURL ?? "/api/dashboard/v1";
+    this.baseURL = opts.baseURL ?? contractBase;
     this.explicitFetcher = opts.fetcher;
   }
 

extensions/dashboard/contract/shell/src/contract/sse.ts

@@ -1,3 +1,4 @@
+import { contractBase } from "../runtime/config";
 import type { StreamEvent } from "./types";
 
 export interface SubscriptionMuxOptions {
@@ -24,7 +25,7 @@ export class SubscriptionMux {
   private active = new Map<string, PendingSub>();
 
   constructor(opts: SubscriptionMuxOptions = {}) {
-    this.baseURL = opts.baseURL ?? "/api/dashboard/v1";
+    this.baseURL = opts.baseURL ?? contractBase;
     this.explicitEventSource = opts.eventSource;
     this.explicitFetcher = opts.fetcher;
   }

extensions/dashboard/contract/shell/src/runtime/config.ts

@@ -0,0 +1,35 @@
+// Runtime configuration injected by the Go server before the bundle loads.
+//
+// The dashboard extension may be mounted at any base path (e.g. /dashboard,
+// /admin, /ops) — even rebased behind a reverse proxy. The Go SPA handler
+// inlines a <script> tag in index.html that sets window.__FORGE_DASHBOARD__
+// with the resolved paths. The shell reads it once at module load and uses
+// the values for the API client baseURL and the React Router basename.
+//
+// Falls back to /dashboard so unit tests, Vite dev mode, and direct module
+// imports keep working without server-side injection.
+
+interface InjectedConfig {
+  basePath?: string;
+  contractBase?: string;
+  shellBase?: string;
+}
+
+declare global {
+  interface Window {
+    __FORGE_DASHBOARD__?: InjectedConfig;
+  }
+}
+
+const FALLBACK_BASE = "/dashboard";
+
+function readInjected(): InjectedConfig {
+  if (typeof window === "undefined") return {};
+  return window.__FORGE_DASHBOARD__ ?? {};
+}
+
+const injected = readInjected();
+
+export const basePath: string = injected.basePath ?? FALLBACK_BASE;
+export const contractBase: string = injected.contractBase ?? `${FALLBACK_BASE}/api/dashboard/v1`;
+export const shellBase: string = injected.shellBase ?? `${FALLBACK_BASE}/contract/app`;

extensions/dashboard/contract/shell/test/setup.ts

@@ -2,6 +2,16 @@ import "@testing-library/jest-dom/vitest";
 import { afterEach } from "vitest";
 import { cleanup } from "@testing-library/react";
 
+// Pin the injected runtime config so tests target /api/dashboard/v1
+// (matching the existing MSW handlers) instead of inheriting the production
+// fallback /dashboard/api/dashboard/v1 from runtime/config.ts. Must run before
+// any module under test imports runtime/config; setupFiles guarantees that.
+(window as unknown as { __FORGE_DASHBOARD__: Record<string, string> }).__FORGE_DASHBOARD__ = {
+  basePath: "",
+  contractBase: "/api/dashboard/v1",
+  shellBase: "/dashboard/contract/app",
+};
+
 // jsdom polyfills required by Radix UI primitives.
 class ResizeObserverStub {
   observe() {}

extensions/dashboard/extension.go

@@ -1,10 +1,11 @@
 package dashboard
 
 import (
+	"bytes"
 	"context"
+	"encoding/json"
 	"errors"
 	"fmt"
-	"io"
 	"io/fs"
 	"net/http"
 	"net/url"
@@ -1730,17 +1731,40 @@ func (e *Extension) makeShellStaticHandler(shellFS fs.FS, stripPrefix string) ht
 
 // makeShellSPAHandler returns the SPA index.html for any path under
 // /{base}/contract/app/*. React Router handles the client-side routing.
+//
+// The handler injects a small bootstrap script just before </head> that
+// surfaces the configured BasePath to the shell. This lets the React shell
+// derive its API endpoint and Router basename at runtime instead of baking
+// /dashboard into the bundle — required when the dashboard is mounted at a
+// non-default base (e.g. /admin) or rebased behind a reverse proxy.
 func (e *Extension) makeShellSPAHandler(shellFS fs.FS) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		f, err := shellFS.Open("index.html")
+		raw, err := fs.ReadFile(shellFS, "index.html")
 		if err != nil {
 			http.Error(w, "shell index missing — has `pnpm build` been run inside extensions/dashboard/contract/shell?", http.StatusInternalServerError)
 			return
 		}
-		defer f.Close()
+		// Build the inline bootstrap. Marshal through JSON so the basePath is
+		// safely string-escaped even if it ever contains odd characters.
+		cfg := map[string]string{
+			"basePath":     e.config.BasePath,
+			"contractBase": e.config.BasePath + "/api/dashboard/v1",
+			"shellBase":    e.config.BasePath + "/contract/app",
+		}
+		cfgJSON, _ := json.Marshal(cfg)
+		bootstrap := []byte("<script>window.__FORGE_DASHBOARD__=" + string(cfgJSON) + ";</script>")
+
+		out := raw
+		if idx := bytes.Index(out, []byte("</head>")); idx >= 0 {
+			out = append(out[:idx:idx], append(bootstrap, out[idx:]...)...)
+		} else {
+			// No </head> (unlikely with Vite output) — prepend the bootstrap so
+			// it still runs before any module script.
+			out = append(bootstrap, out...)
+		}
 		w.Header().Set("Content-Type", "text/html; charset=utf-8")
 		w.Header().Set("Cache-Control", "no-cache")
-		_, _ = io.Copy(w, f)
+		_, _ = w.Write(out)
 	}
 }