From 78872de89703566ed7ede51f10dc7a13d2086415 Mon Sep 17 00:00:00 2001
From: Achmad <anakinskywalk1@gmail.com>
Date: Wed, 24 Jun 2026 03:59:13 +0000
Subject: [PATCH] =?UTF-8?q?Slice=202:=20dashboard=20=E2=80=94=20nav,=20san?=
 =?UTF-8?q?dboxes/templates/environments/history=20pages,=20basePath?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New /dashboard layout with a top nav (Quick Deploy / Sandboxes /
  Templates / Environments / History) and a Logout button that
  invalidates the session.
- Quick Deploy: stage list switches per repo (Go vs PHP, so the
  composer-install stage is shown for the gateway), env-var textarea,
  host-port input.
- Sandboxes: list, create, clone-from-template, delete.
- Sandbox detail: live <key>_url map from the gateway's config.php,
  per-route toggle (OCP / sandbox override with a URL input),
  microservice deploys with per-service host port and env, branch
  picker.
- Templates / Environments: list + create + delete.
- History: filterable deployment list with state badges.
- Sandbox detail page is a server component with generateStaticParams
  that delegates to a client component; required for the static export.
- API client: prefix all /api and /ws URLs with NEXT_PUBLIC_BASE_PATH
  (set in next.config.js) so the dashboard works under a non-root
  basePath.
- next.config.js: basePath and assetPrefix set to /sandbox/credit-card
  so asset URLs and internal Link hrefs resolve under the sub-path.
  NEXT_PUBLIC_BASE_PATH env is exposed to the browser bundle for the
  fetch() prefix.
---
 .../src/app/dashboard/environments/page.tsx   |  93 ++++
 dashboard/src/app/dashboard/history/page.tsx  |  79 ++++
 dashboard/src/app/dashboard/layout.tsx        |  10 +
 dashboard/src/app/dashboard/page.tsx          |   6 +-
 .../app/dashboard/sandboxes/[id]/client.tsx   | 438 ++++++++++++++++++
 .../src/app/dashboard/sandboxes/[id]/page.tsx |  14 +
 .../src/app/dashboard/sandboxes/page.tsx      | 175 +++++++
 .../src/app/dashboard/templates/page.tsx      |  86 ++++
 dashboard/src/components/dashboard-nav.tsx    |  63 +++
 dashboard/src/components/dashboard.tsx        |  82 +++-
 dashboard/src/components/login-form.tsx       |   3 +-
 dashboard/src/lib/api.ts                      | 263 ++++++++++-
 dashboard/src/lib/use-deployment-ws.ts        |   5 +-
 13 files changed, 1270 insertions(+), 47 deletions(-)
 create mode 100644 dashboard/src/app/dashboard/environments/page.tsx
 create mode 100644 dashboard/src/app/dashboard/history/page.tsx
 create mode 100644 dashboard/src/app/dashboard/layout.tsx
 create mode 100644 dashboard/src/app/dashboard/sandboxes/[id]/client.tsx
 create mode 100644 dashboard/src/app/dashboard/sandboxes/[id]/page.tsx
 create mode 100644 dashboard/src/app/dashboard/sandboxes/page.tsx
 create mode 100644 dashboard/src/app/dashboard/templates/page.tsx
 create mode 100644 dashboard/src/components/dashboard-nav.tsx

diff --git a/dashboard/src/app/dashboard/environments/page.tsx b/dashboard/src/app/dashboard/environments/page.tsx
new file mode 100644
index 0000000..16ab3aa
--- /dev/null
+++ b/dashboard/src/app/dashboard/environments/page.tsx
@@ -0,0 +1,93 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { listEnvironments, createEnvironment, deleteEnvironment, type Environment } from '@/lib/api'
+
+export default function EnvironmentsPage() {
+  const [envs, setEnvs] = useState<Environment[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [name, setName] = useState('')
+  const [body, setBody] = useState('KEY=value')
+  const [busy, setBusy] = useState(false)
+
+  async function refresh() {
+    try { setEnvs(await listEnvironments()) } catch (e) { setError(String(e)) }
+  }
+  useEffect(() => { refresh() }, [])
+
+  async function create() {
+    if (!name) return
+    const values: Record<string, string> = {}
+    for (const line of body.split('\n')) {
+      const t = line.trim()
+      if (!t || !t.includes('=')) continue
+      const i = t.indexOf('=')
+      values[t.slice(0, i).trim()] = t.slice(i + 1).trim()
+    }
+    setBusy(true); setError(null)
+    try {
+      await createEnvironment(name, values)
+      setName('')
+      await refresh()
+    } catch (e) { setError(String(e)) } finally { setBusy(false) }
+  }
+
+  async function del(id: string) {
+    if (!confirm('Delete this environment?')) return
+    setBusy(true)
+    try { await deleteEnvironment(id); await refresh() } catch (e) { setError(String(e)) } finally { setBusy(false) }
+  }
+
+  return (
+    <div className="container py-8 space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Environments</h1>
+        <p className="text-sm text-muted-foreground">Named sets of env vars. Attach to a sandbox, a service, or the gateway.</p>
+      </div>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+      <Card>
+        <CardHeader>
+          <CardTitle>New environment</CardTitle>
+          <CardDescription>KEY=value per line.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="space-y-1.5">
+            <Label>Name</Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="dev-creds" />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Values</Label>
+            <textarea
+              className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono shadow-sm"
+              value={body}
+              onChange={(e) => setBody(e.target.value)}
+            />
+          </div>
+          <Button onClick={create} disabled={!name || busy}>Create</Button>
+        </CardContent>
+      </Card>
+      <div className="space-y-2">
+        {envs.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No environments yet.</p>
+        ) : (
+          envs.map((e) => (
+            <Card key={e.id}>
+              <CardContent className="flex items-start justify-between p-4 gap-4">
+                <div>
+                  <div className="font-medium">{e.name}</div>
+                  <pre className="text-xs text-muted-foreground font-mono mt-1 whitespace-pre-wrap">
+                    {Object.entries(e.values).map(([k, v]) => `${k}=${v}`).join('\n')}
+                  </pre>
+                </div>
+                <Button variant="outline" size="sm" onClick={() => del(e.id)} disabled={busy}>Delete</Button>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/dashboard/history/page.tsx b/dashboard/src/app/dashboard/history/page.tsx
new file mode 100644
index 0000000..c605eea
--- /dev/null
+++ b/dashboard/src/app/dashboard/history/page.tsx
@@ -0,0 +1,79 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { listDeployments, listSandboxes, type Deployment, type Sandbox } from '@/lib/api'
+
+export default function HistoryPage() {
+  const [deps, setDeps] = useState<Deployment[]>([])
+  const [sbs, setSbs] = useState<Sandbox[]>([])
+  const [filter, setFilter] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    listSandboxes().then(setSbs).catch((e) => setError(String(e)))
+    refresh('')
+  }, [])
+  function refresh(sandboxID: string) {
+    listDeployments(sandboxID || undefined)
+      .then(setDeps)
+      .catch((e) => setError(String(e)))
+  }
+
+  function shortState(d: Deployment) {
+    return d.state
+  }
+
+  return (
+    <div className="container py-8 space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-semibold tracking-tight">History</h1>
+        <div className="flex items-center gap-2 text-sm">
+          <label>Sandbox</label>
+          <select
+            className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+            value={filter}
+            onChange={(e) => { setFilter(e.target.value); refresh(e.target.value) }}
+          >
+            <option value="">All</option>
+            {sbs.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+          </select>
+        </div>
+      </div>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+      <div className="space-y-2">
+        {deps.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No deployments yet.</p>
+        ) : (
+          deps.map((d) => (
+            <Card key={d.id}>
+              <CardContent className="flex items-center justify-between p-3">
+                <div>
+                  <div className="font-mono text-xs text-muted-foreground">{d.id}</div>
+                  <div className="text-sm">
+                    <span className="font-medium">{d.repository}</span> · <span className="font-mono">{d.branch}</span>
+                    {d.sandboxId && <span className="text-muted-foreground"> · {sbs.find((x) => x.id === d.sandboxId)?.name ?? d.sandboxId}</span>}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  {d.hostPort ? <Badge variant="outline">:{d.hostPort}</Badge> : null}
+                  <Badge variant={stateVariant(shortState(d))}>{shortState(d)}</Badge>
+                  <span>{new Date(d.startedAt).toLocaleString()}</span>
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+function stateVariant(s: string) {
+  switch (s) {
+    case 'RUNNING': return 'success'
+    case 'FAILED': return 'destructive'
+    case 'STOPPED': return 'warning'
+    default: return 'secondary'
+  }
+}
diff --git a/dashboard/src/app/dashboard/layout.tsx b/dashboard/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..1d49ab8
--- /dev/null
+++ b/dashboard/src/app/dashboard/layout.tsx
@@ -0,0 +1,10 @@
+import { DashboardNav } from '@/components/dashboard-nav'
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-zinc-50">
+      <DashboardNav />
+      <main>{children}</main>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/dashboard/page.tsx b/dashboard/src/app/dashboard/page.tsx
index 028a858..1019ac2 100644
--- a/dashboard/src/app/dashboard/page.tsx
+++ b/dashboard/src/app/dashboard/page.tsx
@@ -1,9 +1,5 @@
 import { Dashboard } from '@/components/dashboard'
 
 export default function DashboardPage() {
-  return (
-    <main className="min-h-screen bg-muted/30">
-      <Dashboard />
-    </main>
-  )
+  return <Dashboard />
 }
diff --git a/dashboard/src/app/dashboard/sandboxes/[id]/client.tsx b/dashboard/src/app/dashboard/sandboxes/[id]/client.tsx
new file mode 100644
index 0000000..2eb7297
--- /dev/null
+++ b/dashboard/src/app/dashboard/sandboxes/[id]/client.tsx
@@ -0,0 +1,438 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  getSandbox, updateSandbox, deploySandboxService, deleteSandbox,
+  listBranches, listRoutes, pushRoutes, listEnvironments,
+  type Sandbox, type SandboxService, type Environment, type LiveRoute,
+} from '@/lib/api'
+
+export default function SandboxDetailClient() {
+  const params = useParams<{ id: string }>()
+  const id = params.id
+  const router = useRouter()
+  const [sb, setSb] = useState<Sandbox | null>(null)
+  const [envs, setEnvs] = useState<Environment[]>([])
+  const [routes, setRoutes] = useState<LiveRoute[]>([])
+  const [routeBranch, setRouteBranch] = useState<string>('')
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [creds, setCreds] = useState({ username: '', password: '' })
+  const [newSvc, setNewSvc] = useState<{ repo: string; branch: string; hostPort: string; useOcp: boolean; envId: string }>({
+    repo: '', branch: '', hostPort: '', useOcp: false, envId: '',
+  })
+  const [repoOptions, setRepoOptions] = useState<{ name: string; node: string }[]>([])
+
+  async function refresh() {
+    try {
+      const s = await getSandbox(id)
+      setSb(s)
+    } catch (e) {
+      setError(String(e))
+    }
+  }
+  async function refreshRoutes() {
+    try {
+      const r = await listRoutes()
+      const list: LiveRoute[] = []
+      const overrides = r.overrides[id] ?? {}
+      for (const [key, url] of Object.entries(r.routes)) {
+        const ov = overrides[key]
+        list.push({
+          key,
+          url,
+          ocpDefault: r.defaults[key] ?? null,
+          overridden: !!ov,
+          sandboxId: ov ? id : undefined,
+          overrideValue: ov ? ov.value : undefined,
+          targetOcp: ov ? ov.targetOcp : undefined,
+        })
+      }
+      list.sort((a, b) => a.key.localeCompare(b.key))
+      setRoutes(list)
+      setRouteBranch(r.branch)
+    } catch (e) {
+      setError(String(e))
+    }
+  }
+  useEffect(() => {
+    refresh()
+    refreshRoutes()
+    listEnvironments().then(setEnvs).catch(() => {})
+    const base = (process.env.NEXT_PUBLIC_BASE_PATH ?? '').replace(/\/$/, '')
+    fetch(`${base}/api/repos`, { credentials: 'include' })
+      .then((r) => r.json())
+      .then((arr: { name: string; node: string }[]) => setRepoOptions(arr))
+      .catch(() => {})
+  }, [id])
+
+  if (!sb) {
+    return <div className="container py-8">{error ? <p className="text-sm text-destructive">{error}</p> : <p className="text-sm text-muted-foreground">Loading…</p>}</div>
+  }
+
+  function updateService(idx: number, patch: Partial<SandboxService>) {
+    setSb((cur) => {
+      if (!cur) return cur
+      const services = cur.services.slice()
+      services[idx] = { ...services[idx], ...patch }
+      return { ...cur, services }
+    })
+  }
+
+  function addService() {
+    if (!newSvc.repo) return
+    setSb((cur) => {
+      if (!cur) return cur
+      return {
+        ...cur,
+        services: [
+          ...cur.services,
+          {
+            id: `${cur.id}-${newSvc.repo}`,
+            sandboxId: cur.id,
+            repo: newSvc.repo,
+            branch: newSvc.branch,
+            hostPort: newSvc.hostPort ? Number(newSvc.hostPort) : 0,
+            useOcp: newSvc.useOcp,
+            envId: newSvc.envId || undefined,
+          },
+        ],
+      }
+    })
+    setNewSvc({ repo: '', branch: '', hostPort: '', useOcp: false, envId: '' })
+  }
+
+  function removeService(idx: number) {
+    setSb((cur) => {
+      if (!cur) return cur
+      const services = cur.services.slice()
+      services.splice(idx, 1)
+      return { ...cur, services }
+    })
+  }
+
+  async function save() {
+    if (!sb) return
+    setBusy(true); setError(null)
+    try {
+      await updateSandbox(id, sb)
+      await refresh()
+    } catch (e) { setError(String(e)) } finally { setBusy(false) }
+  }
+
+  async function del() {
+    if (!confirm('Delete this sandbox? Route overrides will be dropped.')) return
+    setBusy(true)
+    try {
+      await deleteSandbox(id)
+      router.push('/dashboard/sandboxes')
+    } catch (e) { setError(String(e)) } finally { setBusy(false) }
+  }
+
+  async function deployService(svc: SandboxService) {
+    if (!creds.username || !creds.password) {
+      setError('enter Bitbucket credentials first')
+      return
+    }
+    if (!svc.branch) {
+      setError('set the branch first')
+      return
+    }
+    setBusy(true); setError(null)
+    try {
+      await deploySandboxService(id, svc.repo, {
+        branch: svc.branch,
+        username: creds.username,
+        password: creds.password,
+        envId: svc.envId,
+      })
+      setTimeout(refreshRoutes, 1500)
+    } catch (e) { setError(String(e)) } finally { setBusy(false) }
+  }
+
+  return (
+    <div className="container py-8 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">{sb.name}</h1>
+          <p className="text-sm text-muted-foreground">
+            Gateway: branch <span className="font-mono">{sb.gatewayBranch || '—'}</span> on port <span className="font-mono">{sb.gatewayHostPort || '—'}</span>
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={save} disabled={busy}>Save</Button>
+          <Button variant="outline" onClick={del} disabled={busy}>Delete</Button>
+        </div>
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Gateway</CardTitle>
+          <CardDescription>The API gateway branch this sandbox runs. Switching it triggers a re-deploy + route re-apply.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-3 md:grid-cols-3">
+          <div className="space-y-1.5">
+            <Label>Branch</Label>
+            <Input value={sb.gatewayBranch ?? ''} onChange={(e) => setSb({ ...sb, gatewayBranch: e.target.value })} placeholder="develop" />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Host port</Label>
+            <Input value={sb.gatewayHostPort ?? 0} onChange={(e) => setSb({ ...sb, gatewayHostPort: Number(e.target.value) || 0 })} placeholder="8080" />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Env</Label>
+            <select
+              className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
+              value={sb.gatewayEnvId ?? ''}
+              onChange={(e) => setSb({ ...sb, gatewayEnvId: e.target.value || undefined })}
+            >
+              <option value="">— none —</option>
+              {envs.map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
+            </select>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Routes (live from gateway config.php)</CardTitle>
+              <CardDescription>
+                {routeBranch ? <>Branch: <span className="font-mono">{routeBranch}</span></> : 'No deploy yet.'}
+                {' · '}
+                <button className="underline" onClick={refreshRoutes}>Refresh</button>
+              </CardDescription>
+            </div>
+            <Badge variant="secondary">{routes.length} services</Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {routes.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No <code>{'<service>_url'}</code> lines in the current config.php. Deploy the gateway first.
+            </p>
+          ) : (
+            <RouteTable
+              routes={routes}
+              onChange={async (key, value, targetOcp) => {
+                setBusy(true); setError(null)
+                try {
+                  const existing = routes
+                    .filter((r) => r.overridden && r.sandboxId === id && r.key !== key)
+                    .map((r) => ({ key: r.key, value: r.url, targetOcp: false }))
+                  const newOv = { key, value, targetOcp }
+                  await pushRoutes(id, [...existing, newOv])
+                  await refreshRoutes()
+                } catch (e) { setError(String(e)) } finally { setBusy(false) }
+              }}
+              busy={busy}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Microservices</CardTitle>
+          <CardDescription>Pick a branch, choose a host port, deploy. Use "use OCP" to leave the gateway's default URL in place.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {sb.services.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No services yet. Add one below.</p>
+          ) : (
+            sb.services.map((svc, idx) => (
+              <div key={svc.id} className="rounded-md border p-3 space-y-2">
+                <div className="flex items-center justify-between">
+                  <div className="font-mono text-sm">{svc.repo}</div>
+                  <div className="flex items-center gap-2">
+                    <label className="text-xs flex items-center gap-1">
+                      <input
+                        type="checkbox"
+                        checked={svc.useOcp}
+                        onChange={(e) => updateService(idx, { useOcp: e.target.checked })}
+                      />
+                      use OCP
+                    </label>
+                    <Button size="sm" variant="outline" onClick={() => removeService(idx)}>Remove</Button>
+                    <Button size="sm" onClick={() => deployService(svc)} disabled={busy || svc.useOcp}>Deploy</Button>
+                  </div>
+                </div>
+                <div className="grid gap-2 md:grid-cols-4">
+                  <div className="space-y-1.5">
+                    <Label>Branch</Label>
+                    <Input value={svc.branch ?? ''} onChange={(e) => updateService(idx, { branch: e.target.value })} placeholder="feature/login-error" />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>Host port</Label>
+                    <Input type="number" value={svc.hostPort ?? 0} onChange={(e) => updateService(idx, { hostPort: Number(e.target.value) || 0 })} placeholder="9001" />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>Env</Label>
+                    <select
+                      className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
+                      value={svc.envId ?? ''}
+                      onChange={(e) => updateService(idx, { envId: e.target.value || undefined })}
+                    >
+                      <option value="">— none —</option>
+                      {envs.map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
+                    </select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>Branches (cached)</Label>
+                    <BranchPicker
+                      repo={svc.repo}
+                      value={svc.branch ?? ''}
+                      onChange={(b) => updateService(idx, { branch: b })}
+                    />
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+
+          <div className="rounded-md border border-dashed p-3 space-y-2">
+            <div className="text-sm font-medium">Add a service</div>
+            <div className="grid gap-2 md:grid-cols-5">
+              <div className="space-y-1.5">
+                <Label>Repo</Label>
+                <select
+                  className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
+                  value={newSvc.repo}
+                  onChange={(e) => setNewSvc({ ...newSvc, repo: e.target.value })}
+                >
+                  <option value="">— pick —</option>
+                  {repoOptions.map((r) => <option key={r.name} value={r.name}>{r.name} ({r.node})</option>)}
+                </select>
+              </div>
+              <div className="space-y-1.5 md:col-span-2">
+                <Label>Branch</Label>
+                <Input value={newSvc.branch} onChange={(e) => setNewSvc({ ...newSvc, branch: e.target.value })} placeholder="main" />
+              </div>
+              <div className="space-y-1.5">
+                <Label>Host port</Label>
+                <Input type="number" value={newSvc.hostPort} onChange={(e) => setNewSvc({ ...newSvc, hostPort: e.target.value })} placeholder="9001" />
+              </div>
+              <div className="space-y-1.5">
+                <Label>Env</Label>
+                <select
+                  className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
+                  value={newSvc.envId}
+                  onChange={(e) => setNewSvc({ ...newSvc, envId: e.target.value })}
+                >
+                  <option value="">— none —</option>
+                  {envs.map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
+                </select>
+              </div>
+            </div>
+            <Button size="sm" onClick={addService} disabled={!newSvc.repo || busy}>Add</Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Bitbucket credentials</CardTitle>
+          <CardDescription>Used by every deploy from this page. Held in component state only.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-2 md:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label>Username</Label>
+            <Input value={creds.username} onChange={(e) => setCreds({ ...creds, username: e.target.value })} autoComplete="username" />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Password</Label>
+            <Input type="password" value={creds.password} onChange={(e) => setCreds({ ...creds, password: e.target.value })} autoComplete="current-password" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function BranchPicker({ repo, value, onChange }: { repo: string; value: string; onChange: (b: string) => void }) {
+  const [branches, setBranches] = useState<string[]>([])
+  useEffect(() => {
+    if (!repo) { setBranches([]); return }
+    listBranches(repo).then(setBranches).catch(() => setBranches([]))
+  }, [repo])
+  if (branches.length === 0) return <Input value={value} onChange={(e) => onChange(e.target.value)} placeholder="(type a branch)" />
+  return (
+    <select
+      className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      <option value="">— pick —</option>
+      {branches.map((b) => <option key={b} value={b}>{b}</option>)}
+    </select>
+  )
+}
+
+function RouteTable({
+  routes, onChange, busy,
+}: {
+  routes: LiveRoute[]
+  onChange: (key: string, value: string, targetOcp: boolean) => void
+  busy: boolean
+}) {
+  const [editing, setEditing] = useState<Record<string, string>>({})
+  return (
+    <table className="w-full text-sm">
+      <thead className="text-left text-xs text-muted-foreground">
+        <tr>
+          <th className="py-2 pr-3">Service</th>
+          <th className="py-2 pr-3">Current URL</th>
+          <th className="py-2 pr-3">OCP default</th>
+          <th className="py-2 pr-3">Status</th>
+          <th className="py-2 pr-3">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        {routes.map((r) => (
+          <tr key={r.key} className="border-t">
+            <td className="py-2 pr-3 font-mono">{r.key}</td>
+            <td className="py-2 pr-3 font-mono text-xs">{r.url}</td>
+            <td className="py-2 pr-3 font-mono text-xs text-muted-foreground">{r.ocpDefault ?? '—'}</td>
+            <td className="py-2 pr-3">
+              {r.overridden ? <Badge variant="warning">sandbox</Badge> : <Badge variant="secondary">OCP</Badge>}
+            </td>
+            <td className="py-2 pr-3">
+              {r.overridden ? (
+                <Button size="sm" variant="outline" disabled={busy} onClick={() => onChange(r.key, r.ocpDefault ?? '', true)}>
+                  Restore OCP
+                </Button>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <Input
+                    className="h-8 w-56 font-mono text-xs"
+                    placeholder={`http://172.18.136.92:9001`}
+                    value={editing[r.key] ?? ''}
+                    onChange={(e) => setEditing((cur) => ({ ...cur, [r.key]: e.target.value }))}
+                  />
+                  <Button
+                    size="sm"
+                    disabled={busy || !editing[r.key]}
+                    onClick={() => {
+                      onChange(r.key, editing[r.key], false)
+                      setEditing((cur) => ({ ...cur, [r.key]: '' }))
+                    }}
+                  >
+                    Take over
+                  </Button>
+                </div>
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/dashboard/src/app/dashboard/sandboxes/[id]/page.tsx b/dashboard/src/app/dashboard/sandboxes/[id]/page.tsx
new file mode 100644
index 0000000..d01b38a
--- /dev/null
+++ b/dashboard/src/app/dashboard/sandboxes/[id]/page.tsx
@@ -0,0 +1,14 @@
+// Server component shell. Static export requires generateStaticParams
+// to be defined in a server context. We emit a single placeholder
+// id so the route is statically exported; the actual id is read at
+// runtime by the client component.
+
+export function generateStaticParams() {
+  return [{ id: '_' }]
+}
+
+import SandboxDetailClient from './client'
+
+export default function Page() {
+  return <SandboxDetailClient />
+}
diff --git a/dashboard/src/app/dashboard/sandboxes/page.tsx b/dashboard/src/app/dashboard/sandboxes/page.tsx
new file mode 100644
index 0000000..a4d94e9
--- /dev/null
+++ b/dashboard/src/app/dashboard/sandboxes/page.tsx
@@ -0,0 +1,175 @@
+'use client'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { listSandboxes, listTemplates, listEnvironments, createSandbox, cloneSandbox, deleteSandbox, type Sandbox, type Environment } from '@/lib/api'
+
+export default function SandboxesPage() {
+  const [sbs, setSbs] = useState<Sandbox[]>([])
+  const [templates, setTemplates] = useState<{ id: string; name: string }[]>([])
+  const [envs, setEnvs] = useState<Environment[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  const [newName, setNewName] = useState('')
+  const [newBranch, setNewBranch] = useState('')
+  const [newPort, setNewPort] = useState('')
+  const [cloneTemplateId, setCloneTemplateId] = useState('')
+  const [cloneName, setCloneName] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  async function refresh() {
+    try {
+      const [s, t, e] = await Promise.all([listSandboxes(), listTemplates(), listEnvironments()])
+      setSbs(s)
+      setTemplates(t.map((x) => ({ id: x.id, name: x.name })))
+      setEnvs(e)
+    } catch (err) {
+      setError(String(err))
+    }
+  }
+  useEffect(() => { refresh() }, [])
+
+  async function create() {
+    if (!newName) return
+    setBusy(true)
+    setError(null)
+    try {
+      await createSandbox({
+        name: newName,
+        gatewayBranch: newBranch || undefined,
+        gatewayHostPort: newPort ? Number(newPort) : 0,
+      })
+      setNewName(''); setNewBranch(''); setNewPort('')
+      await refresh()
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function clone() {
+    if (!cloneTemplateId || !cloneName) return
+    setBusy(true)
+    setError(null)
+    try {
+      await cloneSandbox(cloneTemplateId, cloneName)
+      setCloneName('')
+      await refresh()
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function del(id: string) {
+    if (!confirm('Delete this sandbox? Route overrides are dropped but no containers are stopped.')) return
+    setBusy(true)
+    try {
+      await deleteSandbox(id)
+      await refresh()
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="container py-8 space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Sandboxes</h1>
+        <p className="text-sm text-muted-foreground">
+          A sandbox groups one gateway branch with a set of microservice overrides. Each route can be pointed at the local stand-in or back at OCP.
+        </p>
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>New sandbox</CardTitle>
+            <CardDescription>Pick a gateway branch. Add services after creating.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="space-y-1.5">
+              <Label>Name</Label>
+              <Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="QA-login-error" />
+            </div>
+            <div className="space-y-1.5">
+              <Label>Gateway branch</Label>
+              <Input value={newBranch} onChange={(e) => setNewBranch(e.target.value)} placeholder="develop" />
+            </div>
+            <div className="space-y-1.5">
+              <Label>Gateway host port</Label>
+              <Input value={newPort} onChange={(e) => setNewPort(e.target.value)} placeholder="8080" />
+              <p className="text-xs text-muted-foreground">Port on the gateway VM that the mobile app points at. One live at a time.</p>
+            </div>
+            <Button onClick={create} disabled={!newName || busy} className="w-full">Create</Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Clone from template</CardTitle>
+            <CardDescription>Materialize a sandbox from a saved template.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="space-y-1.5">
+              <Label>Template</Label>
+              <Select value={cloneTemplateId} onValueChange={setCloneTemplateId}>
+                <SelectTrigger><SelectValue placeholder="Pick a template" /></SelectTrigger>
+                <SelectContent>
+                  {templates.map((t) => (
+                    <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label>New sandbox name</Label>
+              <Input value={cloneName} onChange={(e) => setCloneName(e.target.value)} placeholder="QA-login-error" />
+            </div>
+            <Button onClick={clone} disabled={!cloneTemplateId || !cloneName || busy} className="w-full">Clone</Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="space-y-2">
+        {sbs.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No sandboxes yet.</p>
+        ) : (
+          sbs.map((s) => (
+            <Card key={s.id}>
+              <CardContent className="flex items-center justify-between p-4">
+                <div>
+                  <Link href={`/dashboard/sandboxes/${s.id}`} className="font-medium hover:underline">
+                    {s.name}
+                  </Link>
+                  <p className="text-xs text-muted-foreground">
+                    Gateway branch: <span className="font-mono">{s.gatewayBranch || '—'}</span>
+                    {' · '}
+                    Gateway port: <span className="font-mono">{s.gatewayHostPort || '—'}</span>
+                    {' · '}
+                    Services: <span className="font-mono">{s.services.length}</span>
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button asChild variant="outline" size="sm"><Link href={`/dashboard/sandboxes/${s.id}`}>Open</Link></Button>
+                  <Button onClick={() => del(s.id)} variant="outline" size="sm" disabled={busy}>Delete</Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/app/dashboard/templates/page.tsx b/dashboard/src/app/dashboard/templates/page.tsx
new file mode 100644
index 0000000..1cf478a
--- /dev/null
+++ b/dashboard/src/app/dashboard/templates/page.tsx
@@ -0,0 +1,86 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { listTemplates, createTemplate, deleteTemplate, type Template } from '@/lib/api'
+
+export default function TemplatesPage() {
+  const [ts, setTs] = useState<Template[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [name, setName] = useState('')
+  const [branch, setBranch] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  async function refresh() {
+    try { setTs(await listTemplates()) } catch (e) { setError(String(e)) }
+  }
+  useEffect(() => { refresh() }, [])
+
+  async function create() {
+    if (!name) return
+    setBusy(true); setError(null)
+    try {
+      await createTemplate({ name, gatewayBranch: branch, services: [] })
+      setName(''); setBranch('')
+      await refresh()
+    } catch (e) { setError(String(e)) } finally { setBusy(false) }
+  }
+
+  async function del(id: string) {
+    if (!confirm('Delete this template?')) return
+    setBusy(true)
+    try { await deleteTemplate(id); await refresh() } catch (e) { setError(String(e)) } finally { setBusy(false) }
+  }
+
+  return (
+    <div className="container py-8 space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Templates</h1>
+        <p className="text-sm text-muted-foreground">
+          A template is a saved set of (gateway branch, services). Clone it into a sandbox from the Sandboxes page.
+        </p>
+      </div>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+      <Card>
+        <CardHeader>
+          <CardTitle>New template</CardTitle>
+          <CardDescription>Add services after creating.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-3 md:grid-cols-3">
+          <div className="space-y-1.5">
+            <Label>Name</Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="ACCOUNT-TESTING" />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Gateway branch</Label>
+            <Input value={branch} onChange={(e) => setBranch(e.target.value)} placeholder="develop" />
+          </div>
+          <div className="flex items-end">
+            <Button onClick={create} disabled={!name || busy} className="w-full">Create</Button>
+          </div>
+        </CardContent>
+      </Card>
+      <div className="space-y-2">
+        {ts.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No templates yet.</p>
+        ) : (
+          ts.map((t) => (
+            <Card key={t.id}>
+              <CardContent className="flex items-center justify-between p-4">
+                <div>
+                  <div className="font-medium">{t.name}</div>
+                  <p className="text-xs text-muted-foreground">
+                    Gateway: <span className="font-mono">{t.gatewayBranch || '—'}</span> · Services: <span className="font-mono">{t.services.length}</span>
+                  </p>
+                </div>
+                <Button variant="outline" size="sm" onClick={() => del(t.id)} disabled={busy}>Delete</Button>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/dashboard/src/components/dashboard-nav.tsx b/dashboard/src/components/dashboard-nav.tsx
new file mode 100644
index 0000000..6c17d6a
--- /dev/null
+++ b/dashboard/src/components/dashboard-nav.tsx
@@ -0,0 +1,63 @@
+'use client'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+
+const NAV = [
+  { href: '/dashboard', label: 'Quick Deploy' },
+  { href: '/dashboard/sandboxes', label: 'Sandboxes' },
+  { href: '/dashboard/templates', label: 'Templates' },
+  { href: '/dashboard/environments', label: 'Environments' },
+  { href: '/dashboard/history', label: 'History' },
+]
+
+export function DashboardNav() {
+  const pathname = usePathname()
+  const router = useRouter()
+  const [busy, setBusy] = useState(false)
+
+  async function logout() {
+    setBusy(true)
+    try {
+      const base = (process.env.NEXT_PUBLIC_BASE_PATH ?? '').replace(/\/$/, '')
+      await fetch(`${base}/api/logout`, { method: 'POST', credentials: 'include' })
+    } finally {
+      router.push('/')
+    }
+  }
+
+  return (
+    <header className="border-b">
+      <div className="container flex h-14 items-center justify-between gap-6">
+        <div className="flex items-center gap-6">
+          <Link href="/dashboard" className="font-semibold tracking-tight">SDP</Link>
+          <nav className="flex gap-1 text-sm">
+            {NAV.map((n) => {
+              const active = n.href === '/dashboard'
+                ? pathname === '/dashboard'
+                : pathname?.startsWith(n.href)
+              return (
+                <Link
+                  key={n.href}
+                  href={n.href}
+                  className={
+                    'rounded-md px-3 py-1.5 transition-colors ' +
+                    (active
+                      ? 'bg-zinc-900 text-zinc-50'
+                      : 'text-zinc-700 hover:bg-zinc-100')
+                  }
+                >
+                  {n.label}
+                </Link>
+              )
+            })}
+          </nav>
+        </div>
+        <Button variant="outline" size="sm" onClick={logout} disabled={busy}>
+          {busy ? 'Logging out…' : 'Logout'}
+        </Button>
+      </div>
+    </header>
+  )
+}
diff --git a/dashboard/src/components/dashboard.tsx b/dashboard/src/components/dashboard.tsx
index c5b6e36..4ddecd2 100644
--- a/dashboard/src/components/dashboard.tsx
+++ b/dashboard/src/components/dashboard.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
@@ -9,7 +9,8 @@ import { Input } from '@/components/ui/input'
 import { listRepos, listBranches, startDeploy, type Repo } from '@/lib/api'
 import { useDeploymentWS } from '@/lib/use-deployment-ws'
 
-const STAGES = ['git fetch', 'git checkout', 'git pull', 'go build', 'start container']
+const GO_STAGES = ['git fetch', 'git checkout', 'git pull', 'go build', 'start container']
+const PHP_STAGES = ['git fetch', 'git checkout', 'git pull', 'composer install', 'start container']
 
 export function Dashboard() {
   const [repos, setRepos] = useState<Repo[]>([])
@@ -18,6 +19,8 @@ export function Dashboard() {
   const [branch, setBranch] = useState<string>('')
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
+  const [hostPort, setHostPort] = useState<string>('')
+  const [envLines, setEnvLines] = useState<string>('KEY=value')
   const [deploymentId, setDeploymentId] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [deploying, setDeploying] = useState(false)
@@ -39,11 +42,30 @@ export function Dashboard() {
     }).catch(() => setBranches([]))
   }, [repo])
 
+  const stages = useMemo(() => {
+    const r = repos.find((x) => x.name === repo)
+    return r?.name === 'api-gateway' ? PHP_STAGES : GO_STAGES
+  }, [repo, repos])
+
   async function deploy() {
     setError(null)
     setDeploying(true)
     try {
-      const { id } = await startDeploy({ repository: repo, branch, username, password })
+      const env: Record<string, string> = {}
+      for (const line of envLines.split('\n')) {
+        const t = line.trim()
+        if (!t || !t.includes('=')) continue
+        const i = t.indexOf('=')
+        env[t.slice(0, i).trim()] = t.slice(i + 1).trim()
+      }
+      const { id } = await startDeploy({
+        repository: repo,
+        branch,
+        username,
+        password,
+        env: Object.keys(env).length ? env : undefined,
+        hostPort: hostPort ? Number(hostPort) : undefined,
+      })
       setDeploymentId(id)
     } catch (e) {
       setError(String(e))
@@ -53,30 +75,30 @@ export function Dashboard() {
   }
 
   const stageDone: Record<string, 'pending' | 'ok' | 'failed' | 'in_progress'> = {}
-  for (const s of STAGES) stageDone[s] = 'pending'
+  for (const s of stages) stageDone[s] = 'pending'
   let lastDone: string | null = null
   for (const e of events) {
-    if (e.kind === 'progress' && e.stage && STAGES.includes(e.stage)) {
+    if (e.kind === 'progress' && e.stage && stages.includes(e.stage)) {
       if (e.state === 'FAILED') stageDone[e.stage] = 'failed'
       else stageDone[e.stage] = 'ok'
       lastDone = e.stage
     }
   }
   if (lastDone) {
-    const idx = STAGES.indexOf(lastDone)
-    if (idx >= 0 && idx + 1 < STAGES.length && stageDone[STAGES[idx + 1]] === 'pending') {
-      stageDone[STAGES[idx + 1]] = 'in_progress'
+    const idx = stages.indexOf(lastDone)
+    if (idx >= 0 && idx + 1 < stages.length && stageDone[stages[idx + 1]] === 'pending') {
+      stageDone[stages[idx + 1]] = 'in_progress'
     }
   }
 
   return (
     <div className="container py-8">
-      <header className="mb-6 flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Sandbox Deployments</h1>
-          <p className="text-sm text-muted-foreground">Isolated feature-branch deployments for Backend and QA.</p>
-        </div>
-      </header>
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold tracking-tight">Quick Deploy</h1>
+        <p className="text-sm text-muted-foreground">
+          Deploy a single service. For sandboxes with route overrides, use the Sandboxes tab.
+        </p>
+      </div>
 
       <div className="grid gap-6 lg:grid-cols-[360px_1fr]">
         <Card>
@@ -91,7 +113,7 @@ export function Dashboard() {
                 <SelectTrigger><SelectValue placeholder="Pick a repo" /></SelectTrigger>
                 <SelectContent>
                   {repos.map((r) => (
-                    <SelectItem key={r.name} value={r.name}>{r.name}</SelectItem>
+                    <SelectItem key={r.name} value={r.name}>{r.name} <span className="text-muted-foreground">· {r.node}</span></SelectItem>
                   ))}
                 </SelectContent>
               </Select>
@@ -107,6 +129,20 @@ export function Dashboard() {
                 </SelectContent>
               </Select>
             </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="hp">Host port (optional)</Label>
+              <Input id="hp" value={hostPort} onChange={(e) => setHostPort(e.target.value)} placeholder="9001" />
+              <p className="text-xs text-muted-foreground">Maps the container's exposed port to this host port. Leave blank to skip port publishing.</p>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="env">Env vars (KEY=value per line)</Label>
+              <textarea
+                id="env"
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono shadow-sm"
+                value={envLines}
+                onChange={(e) => setEnvLines(e.target.value)}
+              />
+            </div>
             <div className="space-y-1.5">
               <Label htmlFor="u">Bitbucket username</Label>
               <Input id="u" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" />
@@ -123,7 +159,7 @@ export function Dashboard() {
         </Card>
 
         <div className="space-y-6">
-          {deploymentId && (
+          {deploymentId ? (
             <Card>
               <CardHeader>
                 <div className="flex items-center justify-between">
@@ -138,7 +174,7 @@ export function Dashboard() {
               </CardHeader>
               <CardContent className="space-y-4">
                 <ol className="space-y-1.5 text-sm">
-                  {STAGES.map((s) => {
+                  {stages.map((s) => {
                     const v = stageDone[s]
                     return (
                       <li key={s} className="flex items-center gap-3">
@@ -158,6 +194,17 @@ export function Dashboard() {
                 <LogView events={events} />
               </CardContent>
             </Card>
+          ) : (
+            <Card>
+              <CardHeader>
+                <CardTitle>How this works</CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground space-y-2">
+                <p>The agent on the chosen VM does <code className="rounded bg-zinc-100 px-1">git fetch → checkout → pull</code>, builds the service, and starts the container.</p>
+                <p>For PHP gateways we skip the build — the apache container serves the bind-mounted repo on the host port you specify.</p>
+                <p>Credentials are used once for the git operation, then discarded.</p>
+              </CardContent>
+            </Card>
           )}
         </div>
       </div>
@@ -166,7 +213,6 @@ export function Dashboard() {
 }
 
 function LogView({ events }: { events: { kind: string; line?: string; stage?: string; backfill?: boolean }[] }) {
-  // ponytail: render the last 500 lines. Auto-scroll on new log.
   return (
     <pre className="h-72 overflow-auto rounded-md border bg-zinc-950 p-3 text-xs text-zinc-100 font-mono">
       {events
diff --git a/dashboard/src/components/login-form.tsx b/dashboard/src/components/login-form.tsx
index b3ae35b..cc29805 100644
--- a/dashboard/src/components/login-form.tsx
+++ b/dashboard/src/components/login-form.tsx
@@ -18,7 +18,8 @@ export function LoginForm() {
     setLoading(true)
     setError(null)
     try {
-      const r = await fetch('/api/login', {
+      const base = (process.env.NEXT_PUBLIC_BASE_PATH ?? '').replace(/\/$/, '')
+      const r = await fetch(`${base}/api/login`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         credentials: 'include',
diff --git a/dashboard/src/lib/api.ts b/dashboard/src/lib/api.ts
index 2e2619a..762e89b 100644
--- a/dashboard/src/lib/api.ts
+++ b/dashboard/src/lib/api.ts
@@ -1,35 +1,254 @@
-// lib/api.ts — shared types and fetch helpers
-export type Repo = { name: string; node: string; path: string }
+// lib/api.ts — shared types and fetch helpers for the SDP dashboard.
 
-export async function listRepos(): Promise<Repo[]> {
-  const r = await fetch('/api/repos', { credentials: 'include' })
-  if (!r.ok) throw new Error('failed to list repos')
+// Slice-2: the dashboard is served under a Next.js basePath
+// (default /sandbox/credit-card, see next.config.js). All
+// fetch() URLs must be prefixed with it so /api/ and /ws/ resolve
+// against the dashboard's mounted path, not the host root.
+// NEXT_PUBLIC_BASE_PATH is set in next.config.js (build-time env) so
+// the value is baked into the static bundle.
+const BASE = (process.env.NEXT_PUBLIC_BASE_PATH ?? '').replace(/\/$/, '')
+
+function p(path: string): string {
+  if (!BASE) return path
+  if (path.startsWith('http://') || path.startsWith('https://')) return path
+  return BASE + path
+}
+
+export type Repo = { name: string; node: string; path: string; defaultBranch?: string }
+
+export type Deployment = {
+  id: string
+  sandboxId?: string
+  repository: string
+  branch: string
+  user: string
+  state: string
+  containerId?: string
+  hostPort?: number
+  startedAt: number
+  completedAt?: number
+}
+
+export type Environment = {
+  id: string
+  name: string
+  values: Record<string, string>
+  createdAt: number
+  updatedAt: number
+}
+
+export type SandboxService = {
+  id: string
+  sandboxId: string
+  repo: string
+  branch?: string
+  envId?: string
+  hostPort: number
+  useOcp: boolean
+}
+
+export type Sandbox = {
+  id: string
+  name: string
+  gatewayBranch?: string
+  gatewayEnvId?: string
+  gatewayHostPort?: number
+  createdAt: number
+  updatedAt: number
+  services: SandboxService[]
+}
+
+export type TemplateService = SandboxService
+
+export type Template = {
+  id: string
+  name: string
+  gatewayBranch?: string
+  createdAt: number
+  updatedAt: number
+  services: TemplateService[]
+}
+
+export type Route = {
+  id: string
+  sandboxId: string
+  key: string
+  value: string
+  targetOcp: boolean
+}
+
+// RoutePush is the body for POST /api/routes/push — the agent fills
+// in id and sandboxId from the request context.
+export type RoutePush = {
+  key: string
+  value: string
+  targetOcp: boolean
+}
+
+async function jget<T>(url: string): Promise<T> {
+  const r = await fetch(url, { credentials: 'include' })
+  if (!r.ok) {
+    const t = await r.text()
+    throw new Error(t || `${url} failed (${r.status})`)
+  }
   return r.json()
 }
 
-export async function listBranches(repo: string): Promise<string[]> {
-  const r = await fetch(`/api/repos/branches?repo=${encodeURIComponent(repo)}`, { credentials: 'include' })
-  if (!r.ok) throw new Error('failed to list branches')
+async function jsend<T>(url: string, method: string, body?: unknown): Promise<T> {
+  const r = await fetch(url, {
+    method,
+    headers: { 'content-type': 'application/json' },
+    credentials: 'include',
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  })
+  if (!r.ok) {
+    const t = await r.text()
+    throw new Error(t || `${url} failed (${r.status})`)
+  }
+  if (r.status === 204) return undefined as T
   return r.json()
 }
 
-export type DeployResponse = { id: string }
+// --- repos / agents ---
 
-export async function startDeploy(payload: {
+export function listRepos() {
+  return jget<Repo[]>(p('/api/repos'))
+}
+
+export function listBranches(repo: string) {
+  return jget<string[]>(p(`/api/repos/branches?repo=${encodeURIComponent(repo)}`))
+}
+
+export function listAgents() {
+  return jget<{ node: string }[]>(p('/api/agents'))
+}
+
+// --- deployments ---
+
+export function startDeploy(payload: {
   repository: string
   branch: string
   username: string
   password: string
-}): Promise<DeployResponse> {
-  const r = await fetch('/api/deployments', {
-    method: 'POST',
-    headers: { 'content-type': 'application/json' },
-    credentials: 'include',
-    body: JSON.stringify(payload),
-  })
-  if (!r.ok) {
-    const text = await r.text()
-    throw new Error(text || 'deploy failed')
-  }
-  return r.json()
+  env?: Record<string, string>
+  sandboxId?: string
+  hostPort?: number
+}) {
+  return jsend<{ id: string }>(p('/api/deployments/new'), 'POST', payload)
+}
+
+export function stopDeployment(id: string, node: string) {
+  return jsend<{ ok: boolean }>(p('/api/deployments/stop'), 'POST', { id, node })
+}
+
+export function listDeployments(sandboxID?: string) {
+  const q = sandboxID ? `?sandbox=${encodeURIComponent(sandboxID)}` : ''
+  return jget<Deployment[]>(p(`/api/deployments${q}`))
+}
+
+// --- environments ---
+
+export function listEnvironments() {
+  return jget<Environment[]>(p('/api/environments'))
+}
+
+export function createEnvironment(name: string, values: Record<string, string>) {
+  return jsend<Environment>(p('/api/environments'), 'POST', { name, values })
+}
+
+export function updateEnvironment(id: string, body: Partial<{ name: string; values: Record<string, string> }>) {
+  return jsend<Environment>(p(`/api/environments/${id}`), 'PUT', body)
+}
+
+export function deleteEnvironment(id: string) {
+  return jsend<{ ok: boolean }>(p(`/api/environments/${id}`), 'DELETE')
+}
+
+// --- sandboxes ---
+
+export function listSandboxes() {
+  return jget<Sandbox[]>(p('/api/sandboxes'))
+}
+
+export function getSandbox(id: string) {
+  return jget<Sandbox>(p(`/api/sandboxes/${id}`))
+}
+
+export function createSandbox(body: Partial<Sandbox>) {
+  return jsend<Sandbox>(p('/api/sandboxes'), 'POST', body)
+}
+
+export function updateSandbox(id: string, body: Partial<Sandbox>) {
+  return jsend<Sandbox>(p(`/api/sandboxes/${id}`), 'PUT', body)
+}
+
+export function deleteSandbox(id: string) {
+  return jsend<{ ok: boolean }>(p(`/api/sandboxes/${id}`), 'DELETE')
+}
+
+export function cloneSandbox(templateID: string, name: string) {
+  return jsend<Sandbox>(p('/api/sandboxes/clone'), 'POST', { templateId: templateID, name })
+}
+
+export function deploySandboxService(sandboxID: string, repo: string, body: {
+  branch: string
+  username: string
+  password: string
+  env?: Record<string, string>
+  envId?: string
+}) {
+  return jsend<{ id: string }>(p(`/api/sandboxes/${sandboxID}/deploy/${repo}`), 'POST', body)
+}
+
+// --- templates ---
+
+export function listTemplates() {
+  return jget<Template[]>(p('/api/templates'))
+}
+
+export function getTemplate(id: string) {
+  return jget<Template>(p(`/api/templates/${id}`))
+}
+
+export function createTemplate(body: Partial<Template>) {
+  return jsend<Template>(p('/api/templates'), 'POST', body)
+}
+
+export function updateTemplate(id: string, body: Partial<Template>) {
+  return jsend<Template>(p(`/api/templates/${id}`), 'PUT', body)
+}
+
+export function deleteTemplate(id: string) {
+  return jsend<{ ok: boolean }>(p(`/api/templates/${id}`), 'DELETE')
+}
+
+// --- routes ---
+
+// LiveRoute is the live <key>_url line from the gateway's config.php,
+// plus the dashboard's view of whether it's currently OCP or
+// overridden.
+export type LiveRoute = {
+  key: string                 // e.g. "haven"
+  url: string                 // current value in the file
+  ocpDefault: string | null   // snapshot value for the current branch
+  overridden: boolean         // true if some sandbox has an active override
+  sandboxId?: string          // which sandbox owns the override
+  overrideValue?: string      // the override's value (when overridden)
+  targetOcp?: boolean         // true if the override is "restore to OCP"
+}
+
+export type LiveRoutesResponse = {
+  branch: string
+  routes: Record<string, string>      // live map from agent
+  defaults: Record<string, string>    // per-branch OCP snapshot
+  overrides: Record<string, Record<string, { key: string; value: string; targetOcp: boolean }>>
+  configPath: string
+}
+
+export function listRoutes() {
+  return jget<LiveRoutesResponse>(p('/api/routes'))
+}
+
+export function pushRoutes(sandboxID: string, routes: RoutePush[]) {
+  return jsend<{ ok: boolean }>(p('/api/routes/push'), 'POST', { sandboxId: sandboxID, routes })
 }
diff --git a/dashboard/src/lib/use-deployment-ws.ts b/dashboard/src/lib/use-deployment-ws.ts
index 537aed8..d41d4ea 100644
--- a/dashboard/src/lib/use-deployment-ws.ts
+++ b/dashboard/src/lib/use-deployment-ws.ts
@@ -24,7 +24,10 @@ export function useDeploymentWS(deploymentId: string | null) {
     setState('QUEUED')
 
     const proto = window.location.protocol === 'https:' ? 'wss' : 'ws'
-    const url = `${proto}://${window.location.host}/ws/deployments/${deploymentId}`
+    // Slice-2: the WS endpoint is mounted at the dashboard's
+    // basePath. NEXT_PUBLIC_BASE_PATH is baked in at build time.
+    const base = (process.env.NEXT_PUBLIC_BASE_PATH ?? '').replace(/\/$/, '')
+    const url = `${proto}://${window.location.host}${base}/ws/deployments/${deploymentId}`
     const ws = new WebSocket(url)
     wsRef.current = ws