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

2026-03-30 11:40:42 +03:00
parent 7e7041cf8b
commit 1298d9a3df
246 changed files with 55434 additions and 0 deletions
--- a/control/ui/.gitignore
+++ b/control/ui/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/control/ui/README.md
+++ b/control/ui/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/control/ui/eslint.config.js
+++ b/control/ui/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/control/ui/index.html
+++ b/control/ui/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ui</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/control/ui/nginx.conf
+++ b/control/ui/nginx.conf
@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}
--- a/control/ui/package-lock.json
+++ b/control/ui/package-lock.json
--- a/control/ui/package.json
+++ b/control/ui/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "typecheck": "tsc -b --pretty false",
+    "test": "vitest run",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.9.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "jsdom": "^27.0.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1",
+    "vitest": "^3.2.4"
+  }
+}
--- a/control/ui/public/favicon.svg
+++ b/control/ui/public/favicon.svg
--- a/control/ui/public/icons.svg
+++ b/control/ui/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/control/ui/src/App.css
+++ b/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);
+  }
+}
--- a/control/ui/src/App.tsx
+++ b/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} />
+}
--- a/control/ui/src/api/client.ts
+++ b/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
+}
--- a/control/ui/src/api/control.ts
+++ b/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`)
+}
--- a/control/ui/src/app/layout.tsx
+++ b/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>
+  )
+}
--- a/control/ui/src/app/router.test.tsx
+++ b/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()
+  })
+})
--- a/control/ui/src/app/router.tsx
+++ b/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 })
+}
--- a/control/ui/src/assets/hero.png
+++ b/control/ui/src/assets/hero.png
--- a/control/ui/src/assets/react.svg
+++ b/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>
--- a/control/ui/src/assets/vite.svg
+++ b/control/ui/src/assets/vite.svg
--- a/control/ui/src/auth/token.ts
+++ b/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
+  }
+}
--- a/control/ui/src/components/primitives.tsx
+++ b/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>
+  )
+}
--- a/control/ui/src/index.css
+++ b/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);
+}
--- a/control/ui/src/main.tsx
+++ b/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>,
+)
--- a/control/ui/src/pages.tsx
+++ b/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>
+  )
+}
--- a/control/ui/src/test/setup.ts
+++ b/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 })
+  }),
+)
--- a/control/ui/tsconfig.app.json
+++ b/control/ui/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/control/ui/tsconfig.json
+++ b/control/ui/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/control/ui/tsconfig.node.json
+++ b/control/ui/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/control/ui/vite.config.ts
+++ b/control/ui/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
--- a/control/ui/vitest.config.ts
+++ b/control/ui/vitest.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    testTimeout: 5000,
+    hookTimeout: 5000,
+  },
+})
				`@@ -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>