Monorepo consolidation: workspace, shared types, transport plans, docker/swam assets

control/ui/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

control/ui/src/App.tsx

@@ -0,0 +1,8 @@
+import { RouterProvider } from 'react-router-dom'
+import { createBrowserAppRouter } from './app/router'
+
+const router = createBrowserAppRouter()
+
+export default function App() {
+  return <RouterProvider router={router} />
+}

control/ui/src/api/client.ts

@@ -0,0 +1,122 @@
+type RequestIds = {
+  requestId: string
+  correlationId?: string
+  traceparent?: string
+}
+
+const LAST_IDS_STORAGE_KEY = 'control:last_request_ids'
+
+export class ApiError extends Error {
+  status: number
+  requestId: string
+  correlationId?: string
+  traceparent?: string
+
+  constructor(args: {
+    status: number
+    message: string
+    requestId: string
+    correlationId?: string
+    traceparent?: string
+  }) {
+    super(args.message)
+    this.name = 'ApiError'
+    this.status = args.status
+    this.requestId = args.requestId
+    this.correlationId = args.correlationId
+    this.traceparent = args.traceparent
+  }
+}
+
+const state: {
+  last?: RequestIds
+} = {}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function loadLastIds(): RequestIds | undefined {
+  try {
+    const raw = localStorage.getItem(LAST_IDS_STORAGE_KEY)
+    if (!raw) return undefined
+    const parsed = JSON.parse(raw) as unknown
+    if (isRecord(parsed) && typeof parsed.requestId === 'string') {
+      const correlationId =
+        typeof parsed.correlationId === 'string' ? parsed.correlationId : undefined
+      const traceparent =
+        typeof parsed.traceparent === 'string' ? parsed.traceparent : undefined
+      return { requestId: parsed.requestId, correlationId, traceparent }
+    }
+  } catch {
+    return undefined
+  }
+  return undefined
+}
+
+function persistLastIds(ids: RequestIds) {
+  try {
+    localStorage.setItem(LAST_IDS_STORAGE_KEY, JSON.stringify(ids))
+  } catch {
+    return
+  }
+}
+
+function newRequestId(): string {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return crypto.randomUUID()
+  }
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+export function getLastRequestIds(): RequestIds | undefined {
+  return state.last ?? loadLastIds()
+}
+
+type ApiRequestInit = RequestInit & {
+  correlationId?: string
+  traceparent?: string
+  useLastCorrelationId?: boolean
+  useLastTraceparent?: boolean
+}
+
+export async function apiFetch(
+  input: RequestInfo | URL,
+  init?: ApiRequestInit,
+) {
+  const requestId = newRequestId()
+
+  const headers = new Headers(init?.headers)
+  headers.set('x-request-id', requestId)
+  const last = getLastRequestIds()
+  const correlationId =
+    init?.correlationId ?? (init?.useLastCorrelationId ? last?.correlationId : undefined)
+  const traceparent =
+    init?.traceparent ?? (init?.useLastTraceparent ? last?.traceparent : undefined)
+
+  if (correlationId) headers.set('x-correlation-id', correlationId)
+  if (traceparent) headers.set('traceparent', traceparent)
+
+  const res = await fetch(input, { ...init, headers })
+  const resCorrelationId = res.headers.get('x-correlation-id') ?? correlationId ?? undefined
+  const resTraceparent = res.headers.get('traceparent') ?? traceparent ?? undefined
+  const ids = { requestId, correlationId: resCorrelationId, traceparent: resTraceparent }
+  state.last = ids
+  persistLastIds(ids)
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    const err = new ApiError({
+      status: res.status,
+      requestId,
+      correlationId: resCorrelationId,
+      traceparent: resTraceparent,
+      message: `API error ${res.status}${text ? `: ${text}` : ''} (request_id=${requestId}${
+        resCorrelationId ? ` correlation_id=${resCorrelationId}` : ''
+      })`,
+    })
+    throw err
+  }
+
+  return res
+}

control/ui/src/api/control.ts

@@ -0,0 +1,179 @@
+import { apiFetch } from './client'
+import { getAccessToken } from '../auth/token'
+
+function baseUrl() {
+  const v = import.meta.env.VITE_CONTROL_API_URL as string | undefined
+  return (v ?? 'http://127.0.0.1:8080').replace(/\/$/, '')
+}
+
+async function apiJson<T>(path: string): Promise<T> {
+  const controller = new AbortController()
+  const t = window.setTimeout(() => controller.abort(), 2000)
+
+  const token = getAccessToken()
+  const headers: HeadersInit = token ? { Authorization: `Bearer ${token}` } : {}
+
+  try {
+    const res = await apiFetch(`${baseUrl()}${path}`, {
+      headers,
+      signal: controller.signal,
+      useLastCorrelationId: true,
+      useLastTraceparent: true,
+    })
+    return (await res.json()) as T
+  } finally {
+    window.clearTimeout(t)
+  }
+}
+
+async function apiPostJson<T>(path: string, body: unknown, idempotencyKey?: string): Promise<T> {
+  const controller = new AbortController()
+  const t = window.setTimeout(() => controller.abort(), 2000)
+
+  const token = getAccessToken()
+  const headers: HeadersInit = {
+    'content-type': 'application/json',
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    ...(idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : {}),
+  }
+
+  try {
+    const res = await apiFetch(`${baseUrl()}${path}`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(body),
+      signal: controller.signal,
+      useLastCorrelationId: true,
+      useLastTraceparent: true,
+    })
+    return (await res.json()) as T
+  } finally {
+    window.clearTimeout(t)
+  }
+}
+
+export type FleetSnapshot = {
+  services: Array<{
+    name: string
+    base_url: string
+    health_ok: boolean
+    ready_ok: boolean
+    metrics_ok: boolean
+  }>
+}
+
+export type PlacementResponse = {
+  kind: 'aggregate' | 'projection' | 'runner'
+  revision: string
+  placements: Array<{ tenant_id: string; targets: string[] }>
+}
+
+export type TenantsResponse = {
+  tenants: Array<{
+    tenant_id: string
+    aggregate_targets: string[]
+    projection_targets: string[]
+    runner_targets: string[]
+  }>
+}
+
+export type Job = {
+  job_id: string
+  status: 'pending' | 'running' | 'succeeded' | 'failed' | 'cancelled'
+  steps: Array<{ name: string; status: Job['status']; attempts: number; error?: string | null }>
+  error?: string | null
+  created_at_ms: number
+  started_at_ms?: number | null
+  finished_at_ms?: number | null
+}
+
+export type AuditEvent = {
+  ts_ms: number
+  principal_sub: string
+  action: string
+  tenant_id?: string | null
+  reason: string
+  job_id?: string | null
+}
+
+export function getFleetSnapshot(): Promise<FleetSnapshot> {
+  return apiJson('/admin/v1/fleet/snapshot')
+}
+
+export function getPlacement(kind: 'aggregate' | 'projection' | 'runner'): Promise<PlacementResponse> {
+  return apiJson(`/admin/v1/placement/${kind}`)
+}
+
+export function getTenants(): Promise<TenantsResponse> {
+  return apiJson('/admin/v1/tenants')
+}
+
+export function getJob(jobId: string): Promise<Job> {
+  return apiJson(`/admin/v1/jobs/${jobId}`)
+}
+
+export function cancelJob(jobId: string): Promise<void> {
+  return apiPostJson(`/admin/v1/jobs/${jobId}/cancel`, {}, undefined).then(() => undefined)
+}
+
+export function startTenantDrainJob(args: {
+  tenantId: string
+  reason: string
+  idempotencyKey: string
+}): Promise<{ job_id: string }> {
+  return apiPostJson(
+    '/admin/v1/jobs/tenant/drain',
+    { tenant_id: args.tenantId, reason: args.reason },
+    args.idempotencyKey,
+  )
+}
+
+export function startTenantMigrateJob(args: {
+  tenantId: string
+  runnerTarget: string
+  reason: string
+  idempotencyKey: string
+}): Promise<{ job_id: string }> {
+  return apiPostJson(
+    '/admin/v1/jobs/tenant/migrate',
+    { tenant_id: args.tenantId, runner_target: args.runnerTarget, reason: args.reason },
+    args.idempotencyKey,
+  )
+}
+
+export function planTenantMigrate(args: { tenantId: string; runnerTarget: string; reason: string }): Promise<{ steps: string[] }> {
+  return apiPostJson('/admin/v1/plan/tenant/migrate', {
+    tenant_id: args.tenantId,
+    runner_target: args.runnerTarget,
+    reason: args.reason,
+  })
+}
+
+export function listAudit(): Promise<{ events: AuditEvent[] }> {
+  return apiJson('/admin/v1/audit')
+}
+
+export type SwarmService = {
+  name: string
+  image?: string | null
+  mode?: string | null
+  replicas?: string | null
+  updated_at?: string | null
+}
+
+export type SwarmTask = {
+  id: string
+  service: string
+  node?: string | null
+  desired_state?: string | null
+  current_state?: string | null
+  error?: string | null
+}
+
+export function getSwarmServices(): Promise<{ services: SwarmService[] }> {
+  return apiJson('/admin/v1/swarm/services')
+}
+
+export function getSwarmTasks(serviceName: string): Promise<{ service: string; tasks: SwarmTask[] }> {
+  return apiJson(`/admin/v1/swarm/services/${encodeURIComponent(serviceName)}/tasks`)
+}

control/ui/src/app/layout.tsx

@@ -0,0 +1,183 @@
+import { useMemo, useState } from 'react'
+import { Link, Outlet, useLocation } from 'react-router-dom'
+import { getLastRequestIds } from '../api/client'
+import { Button, Code, TextInput } from '../components/primitives'
+
+type NavItem = {
+  label: string
+  to: string
+}
+
+const navItems: NavItem[] = [
+  { label: 'Overview', to: '/' },
+  { label: 'Tenants', to: '/tenants' },
+  { label: 'Users', to: '/users' },
+  { label: 'Sessions', to: '/sessions' },
+  { label: 'Roles & Permissions', to: '/roles-permissions' },
+  { label: 'Config', to: '/config' },
+  { label: 'Definitions', to: '/definitions' },
+  { label: 'Scale & Placement', to: '/scale-placement' },
+  { label: 'Deployments', to: '/deployments' },
+  { label: 'Observability', to: '/observability' },
+  { label: 'Audit Log', to: '/audit-log' },
+  { label: 'Settings', to: '/settings' },
+]
+
+function normalizePath(pathname: string) {
+  if (pathname === '') return '/'
+  if (pathname === '/') return '/'
+  return pathname.endsWith('/') ? pathname.slice(0, -1) : pathname
+}
+
+export function Layout() {
+  const location = useLocation()
+  const active = normalizePath(location.pathname)
+  const [query, setQuery] = useState('')
+  const lastIds = getLastRequestIds()
+
+  const grafana = useMemo(() => {
+    const base = (import.meta.env.VITE_GRAFANA_URL as string | undefined) ?? ''
+    const loki = (import.meta.env.VITE_GRAFANA_LOKI_DATASOURCE as string | undefined) ?? 'Loki'
+    const tempo = (import.meta.env.VITE_GRAFANA_TEMPO_DATASOURCE as string | undefined) ?? 'Tempo'
+    return { base, loki, tempo }
+  }, [])
+
+  function openGrafanaLogs(id: string) {
+    if (!grafana.base) return
+    const left = encodeURIComponent(
+      JSON.stringify({
+        datasource: grafana.loki,
+        queries: [{ refId: 'A', expr: `{correlation_id="${id}"}` }],
+      }),
+    )
+    window.open(`${grafana.base.replace(/\/$/, '')}/explore?left=${left}`, '_blank', 'noreferrer')
+  }
+
+  function openGrafanaTrace(id: string) {
+    if (!grafana.base) return
+    const left = encodeURIComponent(
+      JSON.stringify({
+        datasource: grafana.tempo,
+        queries: [{ refId: 'A', queryType: 'traceId', traceId: id }],
+      }),
+    )
+    window.open(`${grafana.base.replace(/\/$/, '')}/explore?left=${left}`, '_blank', 'noreferrer')
+  }
+
+  async function copy(text: string) {
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch {
+      return
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh', fontFamily: 'system-ui, sans-serif' }}>
+      <aside
+        style={{
+          width: 260,
+          borderRight: '1px solid #eee',
+          padding: 16,
+          background: '#fafafa',
+        }}
+      >
+        <div style={{ fontWeight: 700, marginBottom: 16 }}>Cloudlysis Control</div>
+        <nav style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {navItems.map((item) => {
+            const isActive = active === normalizePath(item.to)
+            return (
+              <Link
+                key={item.to}
+                to={item.to}
+                style={{
+                  textDecoration: 'none',
+                  color: '#111',
+                  padding: '6px 10px',
+                  borderRadius: 8,
+                  background: isActive ? '#eaeaea' : 'transparent',
+                }}
+              >
+                {item.label}
+              </Link>
+            )
+          })}
+        </nav>
+      </aside>
+
+      <div style={{ flex: 1 }}>
+        <header
+          style={{
+            borderBottom: '1px solid #eee',
+            padding: 16,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10,
+          }}
+        >
+          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+            <div style={{ width: 420, maxWidth: '100%' }}>
+              <TextInput
+                ariaLabel="Global search"
+                placeholder="Search request/correlation/trace id"
+                value={query}
+                onChange={setQuery}
+                onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  const id = query.trim()
+                  if (!id) return
+                  openGrafanaLogs(id)
+                }
+              }}
+              />
+            </div>
+            <Button
+              onClick={() => {
+                const id = query.trim()
+                if (!id) return
+                openGrafanaLogs(id)
+              }}
+              disabled={!grafana.base}
+            >
+              Logs
+            </Button>
+            <Button
+              onClick={() => {
+                const id = query.trim()
+                if (!id) return
+                openGrafanaTrace(id)
+              }}
+              disabled={!grafana.base}
+            >
+              Trace
+            </Button>
+          </div>
+
+          {lastIds ? (
+            <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
+              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <span style={{ fontSize: 12, color: '#666' }}>request_id</span>
+                <Code>{lastIds.requestId}</Code>
+                <Button onClick={() => copy(lastIds.requestId)}>Copy</Button>
+              </div>
+              {lastIds.correlationId ? (
+                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                  <span style={{ fontSize: 12, color: '#666' }}>correlation_id</span>
+                  <Code>{lastIds.correlationId}</Code>
+                  <Button onClick={() => copy(lastIds.correlationId ?? '')}>Copy</Button>
+                  <Button
+                    onClick={() => openGrafanaLogs(lastIds.correlationId ?? '')}
+                    disabled={!grafana.base}
+                  >
+                    Investigate
+                  </Button>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </header>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

control/ui/src/app/router.test.tsx

@@ -0,0 +1,37 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { RouterProvider } from 'react-router-dom'
+import { afterEach, describe, expect, it } from 'vitest'
+import { createMemoryAppRouter } from './router'
+
+afterEach(() => {
+  cleanup()
+})
+
+const paths = [
+  '/',
+  '/tenants',
+  '/users',
+  '/sessions',
+  '/roles-permissions',
+  '/config',
+  '/definitions',
+  '/scale-placement',
+  '/deployments',
+  '/observability',
+  '/audit-log',
+  '/settings',
+]
+
+describe('routing', () => {
+  it.each(paths)('renders %s without runtime errors', async (path: string) => {
+    const router = createMemoryAppRouter([path])
+    render(<RouterProvider router={router} />)
+    expect(await screen.findByRole('heading', { level: 1 })).toBeInTheDocument()
+  })
+
+  it('renders not found for unknown routes', async () => {
+    const router = createMemoryAppRouter(['/does-not-exist'])
+    render(<RouterProvider router={router} />)
+    expect(await screen.findByText('Not Found')).toBeInTheDocument()
+  })
+})

control/ui/src/app/router.tsx

@@ -0,0 +1,51 @@
+import { createBrowserRouter, createMemoryRouter, type RouteObject } from 'react-router-dom'
+import { Layout } from './layout'
+import {
+  AuditLogPage,
+  ConfigPage,
+  DefinitionsPage,
+  DeploymentDetailPage,
+  DeploymentsPage,
+  JobPage,
+  NotFoundPage,
+  ObservabilityPage,
+  OverviewPage,
+  RolesPermissionsPage,
+  ScalePlacementPage,
+  SessionsPage,
+  SettingsPage,
+  TenantsPage,
+  UsersPage,
+} from '../pages'
+
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { index: true, element: <OverviewPage /> },
+      { path: 'tenants', element: <TenantsPage /> },
+      { path: 'users', element: <UsersPage /> },
+      { path: 'sessions', element: <SessionsPage /> },
+      { path: 'roles-permissions', element: <RolesPermissionsPage /> },
+      { path: 'config', element: <ConfigPage /> },
+      { path: 'definitions', element: <DefinitionsPage /> },
+      { path: 'scale-placement', element: <ScalePlacementPage /> },
+      { path: 'deployments', element: <DeploymentsPage /> },
+      { path: 'deployments/:serviceName', element: <DeploymentDetailPage /> },
+      { path: 'observability', element: <ObservabilityPage /> },
+      { path: 'audit-log', element: <AuditLogPage /> },
+      { path: 'jobs/:jobId', element: <JobPage /> },
+      { path: 'settings', element: <SettingsPage /> },
+      { path: '*', element: <NotFoundPage /> },
+    ],
+  },
+]
+
+export function createBrowserAppRouter() {
+  return createBrowserRouter(routes)
+}
+
+export function createMemoryAppRouter(initialEntries: string[]) {
+  return createMemoryRouter(routes, { initialEntries })
+}

control/ui/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

control/ui/src/auth/token.ts

@@ -0,0 +1,23 @@
+const TOKEN_KEY = 'control:access_token'
+
+export function getAccessToken(): string | undefined {
+  try {
+    const v = localStorage.getItem(TOKEN_KEY)
+    return v && v.trim() ? v : undefined
+  } catch {
+    return undefined
+  }
+}
+
+export function setAccessToken(token: string) {
+  try {
+    const v = token.trim()
+    if (!v) {
+      localStorage.removeItem(TOKEN_KEY)
+      return
+    }
+    localStorage.setItem(TOKEN_KEY, v)
+  } catch {
+    return
+  }
+}

control/ui/src/components/primitives.tsx

@@ -0,0 +1,148 @@
+import type { KeyboardEvent, ReactNode } from 'react'
+
+const colors = {
+  border: '#ddd',
+  borderSubtle: '#eee',
+  text: '#111',
+  muted: '#666',
+  danger: '#b00020',
+  bg: '#fff',
+  bgSubtle: '#fafafa',
+  bgActive: '#eaeaea',
+}
+
+export function Button(props: {
+  children: ReactNode
+  onClick?: () => void
+  disabled?: boolean
+  variant?: 'default' | 'danger'
+  type?: 'button' | 'submit'
+}) {
+  const variant = props.variant ?? 'default'
+  const borderColor = variant === 'danger' ? colors.danger : colors.border
+  const textColor = variant === 'danger' ? colors.danger : colors.text
+
+  return (
+    <button
+      type={props.type ?? 'button'}
+      onClick={props.onClick}
+      disabled={props.disabled}
+      style={{
+        padding: '8px 10px',
+        borderRadius: 8,
+        border: `1px solid ${borderColor}`,
+        background: colors.bg,
+        color: textColor,
+        cursor: props.disabled ? 'not-allowed' : 'pointer',
+        opacity: props.disabled ? 0.6 : 1,
+      }}
+    >
+      {props.children}
+    </button>
+  )
+}
+
+export function TextInput(props: {
+  id?: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  ariaLabel?: string
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void
+}) {
+  return (
+    <input
+      id={props.id}
+      aria-label={props.ariaLabel}
+      value={props.value}
+      onChange={(e) => props.onChange(e.target.value)}
+      placeholder={props.placeholder}
+      onKeyDown={props.onKeyDown}
+      style={{
+        padding: '8px 10px',
+        borderRadius: 8,
+        border: `1px solid ${colors.border}`,
+        width: '100%',
+      }}
+    />
+  )
+}
+
+export function Code(props: { children: ReactNode }) {
+  return <code style={{ fontSize: 12 }}>{props.children}</code>
+}
+
+export function ErrorText(props: { children: ReactNode }) {
+  return <div style={{ color: colors.danger }}>{props.children}</div>
+}
+
+export function MutedText(props: { children: ReactNode }) {
+  return <div style={{ fontSize: 12, color: colors.muted }}>{props.children}</div>
+}
+
+export function Table(props: { columns: ReactNode[]; rows: ReactNode[][] }) {
+  return (
+    <div style={{ overflowX: 'auto' }}>
+      <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+        <thead>
+          <tr>
+            {props.columns.map((c, idx) => (
+              <th
+                key={idx}
+                style={{ textAlign: 'left', padding: 8, borderBottom: `1px solid ${colors.borderSubtle}` }}
+              >
+                {c}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {props.rows.map((r, ridx) => (
+            <tr key={ridx}>
+              {r.map((cell, cidx) => (
+                <td key={cidx} style={{ padding: 8, borderBottom: `1px solid ${colors.bgActive}` }}>
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function Modal(props: {
+  title: string
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  footer?: ReactNode
+}) {
+  if (!props.open) return null
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0,0,0,0.35)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) props.onClose()
+      }}
+    >
+      <div style={{ background: colors.bg, borderRadius: 12, padding: 16, width: 520, maxWidth: '100%' }}>
+        <div style={{ fontWeight: 700, marginBottom: 8 }}>{props.title}</div>
+        <div>{props.children}</div>
+        {props.footer ? <div style={{ marginTop: 16 }}>{props.footer}</div> : null}
+      </div>
+    </div>
+  )
+}

control/ui/src/index.css

@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

control/ui/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

control/ui/src/pages.tsx

@@ -0,0 +1,527 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import {
+  getFleetSnapshot,
+  getPlacement,
+  getTenants,
+  getJob,
+  cancelJob,
+  listAudit,
+  getSwarmServices,
+  getSwarmTasks,
+  startTenantDrainJob,
+  startTenantMigrateJob,
+  type FleetSnapshot,
+  type PlacementResponse,
+  type TenantsResponse,
+  type Job,
+  type AuditEvent,
+  type SwarmService,
+  type SwarmTask,
+} from './api/control'
+import { getAccessToken, setAccessToken } from './auth/token'
+import { Button, Code, ErrorText, Modal, MutedText, Table, TextInput } from './components/primitives'
+
+function PageShell(props: { title: string; children?: ReactNode }) {
+  return (
+    <main style={{ padding: 24 }}>
+      <h1 style={{ margin: 0, fontSize: 22 }}>{props.title}</h1>
+      {props.children ? <div style={{ marginTop: 16 }}>{props.children}</div> : null}
+    </main>
+  )
+}
+
+export function OverviewPage() {
+  const [data, setData] = useState<FleetSnapshot | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    let cancelled = false
+    getFleetSnapshot()
+      .then((d) => {
+        if (cancelled) return
+        setError(undefined)
+        setData(d)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : 'failed to load')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return (
+    <PageShell title="Overview">
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {!data ? <div>Loading…</div> : null}
+      {data ? (
+        <Table
+          columns={['Service', 'Base URL', 'Health', 'Ready', 'Metrics']}
+          rows={data.services.map((s) => [
+            s.name,
+            <Code key="url">{s.base_url}</Code>,
+            s.health_ok ? 'ok' : 'fail',
+            s.ready_ok ? 'ok' : 'fail',
+            s.metrics_ok ? 'ok' : 'fail',
+          ])}
+        />
+      ) : null}
+    </PageShell>
+  )
+}
+
+export function TenantsPage() {
+  const [data, setData] = useState<TenantsResponse | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const navigate = useNavigate()
+  const [action, setAction] = useState<
+    | { kind: 'drain'; tenantId: string }
+    | { kind: 'migrate'; tenantId: string }
+    | undefined
+  >(undefined)
+  const [reason, setReason] = useState('')
+  const [runnerTarget, setRunnerTarget] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    getTenants()
+      .then((d) => {
+        if (cancelled) return
+        setError(undefined)
+        setData(d)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : 'failed to load')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const canSubmit = reason.trim().length > 0 && (!action || action.kind !== 'migrate' || runnerTarget.trim().length > 0)
+
+  function newIdempotencyKey() {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) return crypto.randomUUID()
+    return `${Date.now()}-${Math.random().toString(16).slice(2)}`
+  }
+
+  return (
+    <PageShell title="Tenants">
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {!data ? <div>Loading…</div> : null}
+      {data ? (
+        <Table
+          columns={['Tenant', 'Aggregate', 'Projection', 'Runner', 'Actions']}
+          rows={data.tenants.map((t) => [
+            <Code key="tenant">{t.tenant_id}</Code>,
+            <Code key="agg">{t.aggregate_targets.join(', ')}</Code>,
+            <Code key="proj">{t.projection_targets.join(', ')}</Code>,
+            <Code key="run">{t.runner_targets.join(', ')}</Code>,
+            <div key="actions" style={{ display: 'flex', gap: 8 }}>
+              <Button
+                onClick={() => {
+                  setReason('')
+                  setRunnerTarget('')
+                  setAction({ kind: 'drain', tenantId: t.tenant_id })
+                }}
+              >
+                Drain
+              </Button>
+              <Button
+                onClick={() => {
+                  setReason('')
+                  setRunnerTarget('')
+                  setAction({ kind: 'migrate', tenantId: t.tenant_id })
+                }}
+              >
+                Migrate
+              </Button>
+            </div>,
+          ])}
+        />
+      ) : null}
+
+      <Modal
+        open={!!action}
+        title={action?.kind === 'drain' ? 'Confirm drain' : 'Confirm migrate'}
+        onClose={() => setAction(undefined)}
+        footer={
+          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
+            <Button onClick={() => setAction(undefined)} disabled={submitting}>
+              Cancel
+            </Button>
+            <Button
+              disabled={submitting || !canSubmit}
+              onClick={async () => {
+                if (!action) return
+                setSubmitting(true)
+                try {
+                  const key = newIdempotencyKey()
+                  const job =
+                    action.kind === 'drain'
+                      ? await startTenantDrainJob({ tenantId: action.tenantId, reason, idempotencyKey: key })
+                      : await startTenantMigrateJob({
+                          tenantId: action.tenantId,
+                          runnerTarget,
+                          reason,
+                          idempotencyKey: key,
+                        })
+                  setAction(undefined)
+                  navigate(`/jobs/${job.job_id}`)
+                } finally {
+                  setSubmitting(false)
+                }
+              }}
+            >
+              Start job
+            </Button>
+          </div>
+        }
+      >
+        {action ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <MutedText>
+              Tenant: <Code>{action.tenantId}</Code>
+            </MutedText>
+            {action.kind === 'migrate' ? (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <label htmlFor="runnerTarget" style={{ fontSize: 12, color: '#666' }}>
+                  Runner target
+                </label>
+                <TextInput
+                  id="runnerTarget"
+                  value={runnerTarget}
+                  onChange={setRunnerTarget}
+                  placeholder="e.g. node-2"
+                />
+              </div>
+            ) : null}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <label htmlFor="reason" style={{ fontSize: 12, color: '#666' }}>
+                Reason (required)
+              </label>
+              <TextInput id="reason" value={reason} onChange={setReason} placeholder="why are you doing this?" />
+            </div>
+          </div>
+        ) : null}
+      </Modal>
+    </PageShell>
+  )
+}
+
+export function UsersPage() {
+  return <PageShell title="Users" />
+}
+
+export function SessionsPage() {
+  return <PageShell title="Sessions" />
+}
+
+export function RolesPermissionsPage() {
+  return <PageShell title="Roles & Permissions" />
+}
+
+export function ConfigPage() {
+  return <PageShell title="Config" />
+}
+
+export function DefinitionsPage() {
+  return <PageShell title="Definitions" />
+}
+
+export function ScalePlacementPage() {
+  const [aggregate, setAggregate] = useState<PlacementResponse | undefined>(undefined)
+  const [projection, setProjection] = useState<PlacementResponse | undefined>(undefined)
+  const [runner, setRunner] = useState<PlacementResponse | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    let cancelled = false
+    Promise.all([getPlacement('aggregate'), getPlacement('projection'), getPlacement('runner')])
+      .then(([a, p, r]) => {
+        if (cancelled) return
+        setError(undefined)
+        setAggregate(a)
+        setProjection(p)
+        setRunner(r)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : 'failed to load')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const blocks = [
+    { title: 'Aggregate', data: aggregate },
+    { title: 'Projection', data: projection },
+    { title: 'Runner', data: runner },
+  ] as const
+
+  return (
+    <PageShell title="Scale & Placement">
+      {error ? <div style={{ color: '#b00020' }}>{error}</div> : null}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {blocks.map((b) => (
+          <section key={b.title} style={{ border: '1px solid #eee', borderRadius: 12, padding: 12 }}>
+            <div style={{ fontWeight: 700, marginBottom: 8 }}>{b.title}</div>
+            {!b.data ? (
+              <div>Loading…</div>
+            ) : (
+              <pre style={{ margin: 0, fontSize: 12, overflowX: 'auto' }}>
+                {JSON.stringify(b.data, null, 2)}
+              </pre>
+            )}
+          </section>
+        ))}
+      </div>
+    </PageShell>
+  )
+}
+
+export function DeploymentsPage() {
+  const [data, setData] = useState<SwarmService[] | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    let cancelled = false
+    getSwarmServices()
+      .then((d) => {
+        if (cancelled) return
+        setError(undefined)
+        setData(d.services)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : 'failed to load')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return (
+    <PageShell title="Deployments">
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {!data ? <div>Loading…</div> : null}
+      {data ? (
+        <Table
+          columns={['Service', 'Image', 'Mode', 'Replicas']}
+          rows={data.map((s) => [
+            <Button key="svc" onClick={() => navigate(`/deployments/${encodeURIComponent(s.name)}`)}>
+              {s.name}
+            </Button>,
+            <Code key="img">{s.image ?? ''}</Code>,
+            s.mode ?? '',
+            s.replicas ?? '',
+          ])}
+        />
+      ) : null}
+    </PageShell>
+  )
+}
+
+export function ObservabilityPage() {
+  return <PageShell title="Observability" />
+}
+
+export function AuditLogPage() {
+  const [data, setData] = useState<AuditEvent[] | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    let cancelled = false
+    listAudit()
+      .then((d) => {
+        if (cancelled) return
+        setError(undefined)
+        setData(d.events)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : 'failed to load')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return (
+    <PageShell title="Audit Log">
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {!data ? <div>Loading…</div> : null}
+      {data ? (
+        <Table
+          columns={['ts', 'principal', 'action', 'tenant', 'reason', 'job']}
+          rows={data.map((e, idx) => [
+            <Code key={`ts-${idx}`}>{e.ts_ms}</Code>,
+            e.principal_sub,
+            e.action,
+            <Code key={`tenant-${idx}`}>{e.tenant_id ?? ''}</Code>,
+            e.reason,
+            e.job_id ? <Code key={`job-${idx}`}>{e.job_id}</Code> : '',
+          ])}
+        />
+      ) : null}
+    </PageShell>
+  )
+}
+
+export function SettingsPage() {
+  const [token, setToken] = useState(() => getAccessToken() ?? '')
+  return (
+    <PageShell title="Settings">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 720 }}>
+        <label htmlFor="token" style={{ fontSize: 12, color: '#666' }}>
+          Access token (Bearer)
+        </label>
+        <TextInput
+          id="token"
+          value={token}
+          onChange={(v) => {
+            setToken(v)
+            setAccessToken(v)
+          }}
+          placeholder="paste token here"
+        />
+      </div>
+    </PageShell>
+  )
+}
+
+export function NotFoundPage() {
+  return <PageShell title="Not Found" />
+}
+
+export function JobPage() {
+  const params = useParams()
+  const jobId = params.jobId
+  const [job, setJob] = useState<Job | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  const canCancel = job?.status === 'pending' || job?.status === 'running'
+
+  useEffect(() => {
+    if (!jobId) return
+    let cancelled = false
+
+    const load = () => {
+      getJob(jobId)
+        .then((j) => {
+          if (cancelled) return
+          setError(undefined)
+          setJob(j)
+        })
+        .catch((e: unknown) => {
+          if (cancelled) return
+          setError(e instanceof Error ? e.message : 'failed to load')
+        })
+    }
+
+    load()
+    const t = window.setInterval(load, 1000)
+    return () => {
+      cancelled = true
+      window.clearInterval(t)
+    }
+  }, [jobId])
+
+  const steps = useMemo(() => job?.steps ?? [], [job?.steps])
+
+  return (
+    <PageShell title="Job">
+      {jobId ? (
+        <MutedText>
+          job_id: <Code>{jobId}</Code>
+        </MutedText>
+      ) : null}
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {!job ? <div>Loading…</div> : null}
+      {job ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <div>
+            Status: <Code>{job.status}</Code>
+          </div>
+          {job.error ? <ErrorText><Code>{job.error}</Code></ErrorText> : null}
+          <div style={{ display: 'flex', gap: 10 }}>
+            <Button
+              disabled={!canCancel}
+              onClick={async () => {
+                if (!jobId) return
+                await cancelJob(jobId)
+              }}
+            >
+              Cancel job
+            </Button>
+          </div>
+
+          <Table
+            columns={['Step', 'Status', 'Attempts', 'Error']}
+            rows={steps.map((s) => [
+              s.name,
+              <Code key={`${s.name}-st`}>{s.status}</Code>,
+              s.attempts,
+              s.error ? <Code key={`${s.name}-err`}>{s.error}</Code> : '',
+            ])}
+          />
+        </div>
+      ) : null}
+    </PageShell>
+  )
+}
+
+export function DeploymentDetailPage() {
+  const params = useParams()
+  const name = params.serviceName
+  const [data, setData] = useState<SwarmTask[] | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    if (!name) return
+    let cancelled = false
+    getSwarmTasks(name)
+      .then((d) => {
+        if (cancelled) return
+        setError(undefined)
+        setData(d.tasks)
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return
+        setError(e instanceof Error ? e.message : 'failed to load')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [name])
+
+  return (
+    <PageShell title="Deployment">
+      {name ? (
+        <MutedText>
+          service: <Code>{name}</Code>
+        </MutedText>
+      ) : null}
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {!data ? <div>Loading…</div> : null}
+      {data ? (
+        <Table
+          columns={['Task', 'Node', 'Desired', 'Current', 'Error']}
+          rows={data.map((t) => [
+            <Code key={t.id}>{t.id}</Code>,
+            t.node ?? '',
+            t.desired_state ?? '',
+            t.current_state ?? '',
+            t.error ? <Code key={`${t.id}-e`}>{t.error}</Code> : '',
+          ])}
+        />
+      ) : null}
+    </PageShell>
+  )
+}

control/ui/src/test/setup.ts

@@ -0,0 +1,127 @@
+import '@testing-library/jest-dom/vitest'
+import { vi } from 'vitest'
+
+vi.stubGlobal(
+  'fetch',
+  vi.fn(async (input: RequestInfo | URL) => {
+    const url = typeof input === 'string' ? input : input.toString()
+
+    if (url.includes('/admin/v1/fleet/snapshot')) {
+      return new Response(
+        JSON.stringify({
+          services: [
+            {
+              name: 'control-api',
+              base_url: 'http://127.0.0.1:8080',
+              health_ok: true,
+              ready_ok: true,
+              metrics_ok: true,
+            },
+          ],
+        }),
+        { status: 200, headers: { 'content-type': 'application/json' } },
+      )
+    }
+
+    if (url.includes('/admin/v1/placement/')) {
+      const kind = url.split('/admin/v1/placement/')[1]?.split('?')[0] ?? 'aggregate'
+      return new Response(
+        JSON.stringify({
+          kind,
+          revision: 'dev',
+          placements: [],
+        }),
+        { status: 200, headers: { 'content-type': 'application/json' } },
+      )
+    }
+
+    if (url.includes('/admin/v1/tenants')) {
+      return new Response(
+        JSON.stringify({
+          tenants: [
+            {
+              tenant_id: '00000000-0000-0000-0000-000000000000',
+              aggregate_targets: [],
+              projection_targets: [],
+              runner_targets: [],
+            },
+          ],
+        }),
+        { status: 200, headers: { 'content-type': 'application/json' } },
+      )
+    }
+
+    if (url.includes('/admin/v1/audit')) {
+      return new Response(
+        JSON.stringify({
+          events: [],
+        }),
+        { status: 200, headers: { 'content-type': 'application/json' } },
+      )
+    }
+
+    if (url.includes('/admin/v1/jobs/') && url.includes('/cancel')) {
+      return new Response('', { status: 200 })
+    }
+
+    if (url.includes('/admin/v1/jobs/tenant/')) {
+      return new Response(JSON.stringify({ job_id: 'job-1' }), {
+        status: 200,
+        headers: { 'content-type': 'application/json' },
+      })
+    }
+
+    if (url.includes('/admin/v1/jobs/')) {
+      return new Response(
+        JSON.stringify({
+          job_id: 'job-1',
+          status: 'succeeded',
+          steps: [{ name: 'echo', status: 'succeeded', attempts: 1, error: null }],
+          error: null,
+          created_at_ms: 0,
+          started_at_ms: 0,
+          finished_at_ms: 0,
+        }),
+        { status: 200, headers: { 'content-type': 'application/json' } },
+      )
+    }
+
+    if (url.includes('/admin/v1/swarm/services') && url.includes('/tasks')) {
+      return new Response(
+        JSON.stringify({
+          service: 'gateway',
+          tasks: [
+            {
+              id: 'task-1',
+              service: 'gateway',
+              node: 'node-1',
+              desired_state: 'running',
+              current_state: 'running',
+              error: null,
+            },
+          ],
+        }),
+        { status: 200, headers: { 'content-type': 'application/json' } },
+      )
+    }
+
+    if (url.includes('/admin/v1/swarm/services')) {
+      return new Response(
+        JSON.stringify({
+          services: [
+            {
+              name: 'gateway',
+              image: 'cloudlysis/gateway:dev',
+              mode: 'replicated',
+              replicas: '1/1',
+              updated_at: null,
+            },
+          ],
+        }),
+        { status: 200, headers: { 'content-type': 'application/json' } },
+      )
+    }
+
+    return new Response('not found', { status: 404 })
+  }),
+)