feat(agentex-ui): account picker via same-origin BFF proxy (#350)

## Summary

First of a **2-PR stack** bringing account scoping + OIDC login to
agentex-ui. This base PR routes the SDK through a same-origin BFF and
adds an account switcher. Chart + deploy side lives in
scaleapi/sgp#3961.

- Routes the agentex SDK through a same-origin **BFF** (`/api/agentex`)
instead of calling the API directly from the browser — the upstream URL
and credentials never reach client JS.
- Shared `applyBffCredentials` forwards `x-selected-account-id`, drops
any client-sent `Authorization`, and strips the account-scoped `_jwt`
cookie so SGP honors the **selected** account rather than the one you
linked in with (identity stays via `_identityJwt`). The proxy also
strips `Location` on upstream 3xx so internal redirect targets don't
leak.
- Account selection is driven by the `account_id` query param (no
cookie), injected on every SDK request via a synchronous ref. Switching
accounts resets the open task + selected agent to the account's home
grid, and `resetQueries` drops the previous account's cached data so it
never briefly renders the old agents.
- `/api/user-info` fetches the caller's accounts; the picker bootstraps
to the first when the param is missing/stale, shows a disabled/empty
loading state (not a skeleton), renders single-account as static
context, and lives in the sidebar footer (collapsed → icon-only).
- Env-gated on the platform API being configured (`SGP_API_URL` /
`NEXT_PUBLIC_SGP_APP_URL`); no-op otherwise.

**Env:** `NEXT_PUBLIC_AGENTEX_API_BASE_URL` → server-only
`AGENTEX_API_URL`.

In this PR the BFF runs in default (cookie) mode — no auth dependency.
The token-hiding Bearer path arrives in the stacked PR.

## Stack

1. **This PR** — account picker + same-origin BFF proxy → `main`
2. #351 — OIDC login with server-side access token → stacked on this
branch
3. scaleapi/sgp#3961 — Helm chart + system-manager pack (deploy side)

## Test plan

- [x] `npm run typecheck` / `npm run lint` — clean
- [x] Runtime: switching accounts re-scopes agents/tasks (and SGP calls
via the `_jwt` strip); single / multi / no-account render; loading
state; no stale-account flash

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: erichwoo-scale

agentex-ui/DOCKER.md

@@ -91,13 +91,13 @@ The application runs with the following default environment variables:
 - `PORT=3000`
 - `HOSTNAME=0.0.0.0`
 
-To configure public runtime variables, pass them when running the container:
+To configure runtime variables, pass them when running the container:
 
 ```bash
 # Explicit env flags
 docker run --rm -p 3000:3000 \
-  -e NEXT_PUBLIC_AGENTEX_API_BASE_URL=http://localhost:5003 \
-  -e NEXT_PUBLIC_SGP_APP_URL=https://egp.dashboard.scale.com \
+  -e AGENTEX_API_URL=http://localhost:5003 \
+  -e NEXT_PUBLIC_SGP_APP_URL=https://app.example.com \
   agentex-ui:latest
 
 # Or via an env file

agentex-ui/README.md

@@ -96,8 +96,8 @@ cp example.env.development .env.development
 Edit `.env.development` with your configuration:
 
 ```bash
-# Backend API endpoint
-NEXT_PUBLIC_AGENTEX_API_BASE_URL=http://localhost:5003
+# Backend API endpoint — server-only upstream for the /api/agentex BFF proxy
+AGENTEX_API_URL=http://localhost:5003
 ```
 
 ### 3. Install Dependencies

agentex-ui/app/api/_lib/bff.ts

@@ -0,0 +1,42 @@
+/** Server-only platform API base for the BFF routes. Prefers SGP_API_URL, else the app URL. */
+export const SGP_BASE_URL =
+  process.env.SGP_API_URL ??
+  (process.env.NEXT_PUBLIC_SGP_APP_URL
+    ? `${process.env.NEXT_PUBLIC_SGP_APP_URL}/api`
+    : undefined);
+
+/** Return the Cookie header with the named cookie removed (null if nothing remains). */
+function stripCookie(header: string | null, name: string): string | null {
+  if (!header) return null;
+  const kept = header
+    .split(';')
+    .map(c => c.trim())
+    .filter(c => {
+      const eq = c.indexOf('=');
+      return (eq === -1 ? c : c.slice(0, eq)) !== name;
+    });
+  return kept.length ? kept.join('; ') : null;
+}
+
+/**
+ * Attach credentials to an upstream request's `headers` in place, so none reach client JS:
+ * forward `x-selected-account-id` (the upstream authorizes the account), drop any
+ * client-sent `authorization`, and forward cookies for the upstream's own auth — minus the
+ * account-scoped `_jwt` (access-profile) cookie. Cookie-auth backends prioritize `_jwt` over
+ * `x-selected-account-id`, so leaving it would pin the account to the one the user linked in
+ * with and ignore the selected account; identity still comes from `_identityJwt`.
+ */
+export async function applyBffCredentials(
+  req: Request,
+  headers: Headers
+): Promise<void> {
+  const accountId = req.headers.get('x-selected-account-id');
+  if (accountId) headers.set('x-selected-account-id', accountId);
+  else headers.delete('x-selected-account-id');
+
+  headers.delete('authorization');
+
+  const cookie = stripCookie(req.headers.get('cookie'), '_jwt');
+  if (cookie) headers.set('cookie', cookie);
+  else headers.delete('cookie');
+}

agentex-ui/app/api/agentex/[...path]/route.ts

@@ -0,0 +1,67 @@
+import { applyBffCredentials } from '@/app/api/_lib/bff';
+
+/**
+ * Same-origin BFF proxy for the Agentex API, so the upstream URL and credentials never
+ * reach client JS. applyBffCredentials attaches credentials server-side.
+ */
+export const dynamic = 'force-dynamic';
+
+const UPSTREAM = (
+  process.env.AGENTEX_API_URL ?? 'http://localhost:5003'
+).replace(/\/$/, '');
+
+// Hop-by-hop headers to drop. Credential headers (cookie/authorization) are handled by
+// applyBffCredentials, not here.
+const STRIP_REQ = ['host', 'connection', 'content-length'];
+const STRIP_RES = [
+  'content-encoding',
+  'content-length',
+  'transfer-encoding',
+  'connection',
+];
+
+async function proxy(
+  req: Request,
+  ctx: { params: Promise<{ path?: string[] }> }
+): Promise<Response> {
+  const { path = [] } = await ctx.params;
+  const search = new URL(req.url).search;
+  const target = `${UPSTREAM}/${path.join('/')}${search}`;
+
+  const headers = new Headers(req.headers);
+  for (const h of STRIP_REQ) headers.delete(h);
+  await applyBffCredentials(req, headers);
+
+  const method = req.method.toUpperCase();
+  const hasBody = method !== 'GET' && method !== 'HEAD';
+  const upstream = await fetch(target, {
+    method,
+    headers,
+    body: hasBody ? req.body : undefined,
+    redirect: 'manual',
+    // @ts-expect-error `duplex` is required to stream a request body (undici)
+    duplex: 'half',
+  });
+
+  // Pass the upstream body through unbuffered so SSE / streaming responses work.
+  const resHeaders = new Headers(upstream.headers);
+  for (const h of STRIP_RES) resHeaders.delete(h);
+  // Don't leak an upstream (internal) redirect target to the browser.
+  if (upstream.status >= 300 && upstream.status < 400) {
+    resHeaders.delete('location');
+  }
+  return new Response(upstream.body, {
+    status: upstream.status,
+    headers: resHeaders,
+  });
+}
+
+export {
+  proxy as DELETE,
+  proxy as GET,
+  proxy as HEAD,
+  proxy as OPTIONS,
+  proxy as PATCH,
+  proxy as POST,
+  proxy as PUT,
+};

agentex-ui/app/api/feedback/route.ts

@@ -1,5 +1,7 @@
 import { NextResponse } from 'next/server';
 
+import { applyBffCredentials, SGP_BASE_URL } from '@/app/api/_lib/bff';
+
 type FeedbackRequestBody = {
   traceId: string;
   messageId: string;
@@ -13,33 +15,10 @@ type FeedbackRequestBody = {
   agentAcpType?: string;
 };
 
-const SGP_BASE_URL =
-  process.env.NEXT_PUBLIC_SGP_API_URL ??
-  (process.env.NEXT_PUBLIC_SGP_APP_URL
-    ? `${process.env.NEXT_PUBLIC_SGP_APP_URL}/api`
-    : undefined);
-
-function getSGPHeaders(request: Request): Record<string, string> {
-  const headers: Record<string, string> = {
-    'Content-Type': 'application/json',
-  };
-  const forwarded = [
-    'cookie',
-    'authorization',
-    'x-api-key',
-    'x-selected-account-id',
-  ];
-  for (const key of forwarded) {
-    const value = request.headers.get(key);
-    if (value) headers[key] = value;
-  }
-  return headers;
-}
-
 async function sgpPost<T>(
   path: string,
   body: unknown,
-  headers: Record<string, string>
+  headers: Headers
 ): Promise<T> {
   const res = await fetch(`${SGP_BASE_URL}${path}`, {
     method: 'POST',
@@ -57,8 +36,7 @@ export async function POST(request: Request) {
   if (!SGP_BASE_URL) {
     return NextResponse.json(
       {
-        error:
-          'SGP feedback is not configured. Set NEXT_PUBLIC_SGP_API_URL or NEXT_PUBLIC_SGP_APP_URL.',
+        error: 'SGP feedback is not configured. Set SGP_API_URL.',
       },
       { status: 503 }
     );
@@ -100,7 +78,9 @@ export async function POST(request: Request) {
     );
   }
 
-  const sgpHeaders = getSGPHeaders(request);
+  // Credentials attached server-side (see applyBffCredentials).
+  const sgpHeaders = new Headers({ 'Content-Type': 'application/json' });
+  await applyBffCredentials(request, sgpHeaders);
   const now = new Date().toISOString();
 
   try {

agentex-ui/app/api/user-info/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server';
+
+import { applyBffCredentials, SGP_BASE_URL } from '@/app/api/_lib/bff';
+
+/**
+ * Scoped BFF proxy for the caller's accounts (access_profiles), used to bootstrap/switch
+ * the selected account. Only this path is exposed — not a catch-all — so the browser can't
+ * reach arbitrary platform endpoints with the server-attached credentials.
+ */
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: Request): Promise<Response> {
+  if (!SGP_BASE_URL) {
+    return NextResponse.json(
+      { error: 'SGP is not configured. Set SGP_API_URL.' },
+      { status: 503 }
+    );
+  }
+
+  const headers = new Headers({ accept: 'application/json' });
+  await applyBffCredentials(request, headers);
+  const upstream = await fetch(`${SGP_BASE_URL}/user-info`, { headers });
+  return new Response(upstream.body, {
+    status: upstream.status,
+    headers: { 'content-type': 'application/json' },
+  });
+}

agentex-ui/app/page.tsx

@@ -7,23 +7,13 @@ export default async function RootPage() {
   await connection();
 
   const sgpAppURL = process.env.NEXT_PUBLIC_SGP_APP_URL ?? '';
-  const agentexAPIBaseURL =
-    process.env.NEXT_PUBLIC_AGENTEX_API_BASE_URL ?? 'http://localhost:5003';
-
-  if (!agentexAPIBaseURL) {
-    return (
-      <div role="alert">
-        <p>Missing some configs</p>
-        <pre>{JSON.stringify({ sgpAppURL, agentexAPIBaseURL }, null, 2)}</pre>
-      </div>
-    );
-  }
+  // The account picker needs the platform API (accounts come from /api/user-info).
+  const accountsEnabled = !!(
+    process.env.SGP_API_URL ?? process.env.NEXT_PUBLIC_SGP_APP_URL
+  );
 
   return (
-    <AgentexProvider
-      sgpAppURL={sgpAppURL}
-      agentexAPIBaseURL={agentexAPIBaseURL}
-    >
+    <AgentexProvider accountsEnabled={accountsEnabled} sgpAppURL={sgpAppURL}>
       <AgentexUIRoot />
     </AgentexProvider>
   );