feat: initial open-source release of Pipely

OTA update server designed for high-concurrency, low-bandwidth deployments.
GORM-backed PostgreSQL, JWT auth, device management, artefact versioning,
deployment rollout with gated rate-limited downloads, and a React admin panel.

web/src/App.css

@@ -0,0 +1,126 @@
+/* Reset & base */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #f5f5f7;
+  color: #1a1a2e;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+/* Shared card style */
+.card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin-bottom: 16px;
+}
+
+/* Shared table style */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.data-table thead {
+  background: #f8f9fa;
+}
+
+.data-table th {
+  padding: 10px 12px;
+  text-align: left;
+  font-weight: 600;
+  color: #555;
+  border-bottom: 2px solid #e9ecef;
+}
+
+.data-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.data-table tbody tr:hover {
+  background: #f8f9ff;
+}
+
+.td-empty {
+  text-align: center;
+  color: #aaa;
+  padding: 30px 12px !important;
+}
+
+/* Shared pagination */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 0 0;
+  font-size: 13px;
+  color: #666;
+}
+
+.pagination button {
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.pagination button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Shared utility */
+.page-title {
+  margin: 0 0 24px;
+  font-size: 20px;
+  color: #1a1a2e;
+}
+
+.page-loading {
+  padding: 40px;
+  color: #888;
+  text-align: center;
+}
+
+.btn-primary {
+  padding: 10px 20px;
+  background: #e94560;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover {
+  background: #d63850;
+}
+
+.btn-primary:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.btn-sm {
+  width: auto;
+  padding: 8px 16px;
+}
+
+.msg-success { color: #27ae60; font-size: 13px; margin: 8px 0; }
+.msg-error { color: #c00; font-size: 13px; margin: 8px 0; }

web/src/App.tsx

@@ -0,0 +1,36 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"
+import Layout from "@/components/Layout"
+import Login from "@/pages/Login"
+import Dashboard from "@/pages/Dashboard"
+import Artefacts from "@/pages/Artefacts"
+import Deployments from "@/pages/Deployments"
+import Users from "@/pages/Users"
+import "@/App.css"
+
+function RequireAuth({ children }: { children: React.ReactNode }) {
+  const token = localStorage.getItem("token")
+  if (!token) return <Navigate to="/" replace />
+  return <>{children}</>
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Login />} />
+        <Route
+          element={
+            <RequireAuth>
+              <Layout />
+            </RequireAuth>
+          }>
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/artefacts" element={<Artefacts />} />
+          <Route path="/deployments" element={<Deployments />} />
+          <Route path="/users" element={<Users />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  )
+}

web/src/api/client.ts

@@ -0,0 +1,70 @@
+const API_BASE = '/api/v1';
+
+let token: string | null = localStorage.getItem('token');
+
+export function setToken(t: string | null) {
+  token = t;
+  if (t) {
+    localStorage.setItem('token', t);
+  } else {
+    localStorage.removeItem('token');
+  }
+}
+
+export function getToken(): string | null {
+  return token;
+}
+
+async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const headers: Record<string, string> = {
+    ...(options.headers as Record<string, string>),
+  };
+
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+
+  // Only set Content-Type for non-GET requests with body
+  if (!(options.body instanceof FormData)) {
+    headers['Content-Type'] = 'application/json';
+  } else {
+    delete headers['Content-Type']; // Let browser set multipart boundary
+  }
+
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers,
+  });
+
+  if (res.status === 401) {
+    setToken(null);
+    window.location.href = '/';
+    throw new Error('Unauthorised');
+  }
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(body.error || `Request failed: ${res.status}`);
+  }
+
+  return res.json();
+}
+
+export const api = {
+  get: <T>(path: string) => request<T>(path),
+
+  post: <T>(path: string, body?: unknown) =>
+    request<T>(path, {
+      method: 'POST',
+      body: body instanceof FormData ? body : JSON.stringify(body),
+    }),
+
+  put: <T>(path: string, body?: unknown) =>
+    request<T>(path, {
+      method: 'PUT',
+      body: JSON.stringify(body),
+    }),
+
+  delete: <T>(path: string) =>
+    request<T>(path, { method: 'DELETE' }),
+};

web/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>

web/src/components/Layout.css

@@ -0,0 +1,79 @@
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.sidebar {
+  width: 220px;
+  background: #1a1a2e;
+  color: #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.sidebar-brand {
+  padding: 20px 16px;
+  border-bottom: 1px solid #16213e;
+}
+
+.sidebar-brand h2 {
+  margin: 0;
+  font-size: 16px;
+  color: #e94560;
+  letter-spacing: 1px;
+}
+
+.sidebar nav {
+  flex: 1;
+  padding: 12px 0;
+}
+
+.nav-link {
+  display: block;
+  padding: 10px 20px;
+  color: #a0a0b8;
+  text-decoration: none;
+  font-size: 14px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.nav-link:hover {
+  background: #16213e;
+  color: #fff;
+}
+
+.nav-link.active {
+  background: #e94560;
+  color: #fff;
+}
+
+.sidebar-footer {
+  padding: 16px;
+  border-top: 1px solid #16213e;
+}
+
+.btn-logout {
+  width: 100%;
+  padding: 8px;
+  background: transparent;
+  border: 1px solid #e94560;
+  color: #e94560;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.btn-logout:hover {
+  background: #e94560;
+  color: #fff;
+}
+
+.content {
+  flex: 1;
+  padding: 24px 32px;
+  background: #f5f5f7;
+  overflow-y: auto;
+}

web/src/components/Layout.tsx

@@ -0,0 +1,42 @@
+import { NavLink, useNavigate, Outlet } from 'react-router-dom';
+import { setToken } from '../api/client';
+import './Layout.css';
+
+export default function Layout() {
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    setToken(null);
+    navigate('/');
+  }
+
+  return (
+    <div className="app-layout">
+      <aside className="sidebar">
+        <div className="sidebar-brand">
+          <h2>OTA Manager</h2>
+        </div>
+        <nav>
+          <NavLink to="/dashboard" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            Dashboard
+          </NavLink>
+          <NavLink to="/artefacts" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            Versions
+          </NavLink>
+          <NavLink to="/deployments" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            Deployments
+          </NavLink>
+          <NavLink to="/users" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            Admin Users
+          </NavLink>
+        </nav>
+        <div className="sidebar-footer">
+          <button className="btn-logout" onClick={handleLogout}>Logout</button>
+        </div>
+      </aside>
+      <main className="content">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

web/src/index.css

@@ -0,0 +1 @@
+/* index.css — global reset is handled in App.css */

web/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>
+)

web/src/pages/Artefacts.css

@@ -0,0 +1,50 @@
+.upload-section {
+  margin-bottom: 20px;
+}
+
+.upload-section h3 {
+  margin: 0 0 12px;
+  font-size: 15px;
+}
+
+.upload-form {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.upload-form input[type="text"] {
+  width: 180px;
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.upload-form input[type="file"] {
+  font-size: 13px;
+}
+
+.msg-success { color: #27ae60; font-size: 13px; margin: 8px 0 0; }
+.msg-error { color: #c00; font-size: 13px; margin: 8px 0 0; }
+
+.btn-sm {
+  width: auto;
+  padding: 8px 16px;
+}
+
+.badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 600;
+}
+.badge-delta { background: #fef3cd; color: #856404; }
+.badge-full { background: #d4edda; color: #155724; }
+
+.hash-cell {
+  font-family: monospace;
+  font-size: 12px;
+  color: #666;
+}

web/src/pages/Artefacts.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from "react"
+import { api } from "../api/client"
+import "./Artefacts.css"
+
+interface Artefact {
+  id: number
+  version: string
+  fileName: string
+  fileSize: number
+  sha256Hash: string
+  isDelta: boolean
+  deltaRef: string
+  createdAt: string
+}
+
+const PAGE_SIZE = 20
+
+export default function Artefacts() {
+  const [artefacts, setArtefacts] = useState<Artefact[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(true)
+  const [uploading, setUploading] = useState(false)
+  const [version, setVersion] = useState("")
+  const [file, setFile] = useState<File | null>(null)
+  const [uploadMsg, setUploadMsg] = useState("")
+
+  async function load() {
+    setLoading(true)
+    try {
+      const res = await api.get<{ data: Artefact[]; total: number }>(
+        `/artefacts?page=${page}&pageSize=${PAGE_SIZE}`
+      )
+      setArtefacts(res.data)
+      setTotal(res.total)
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [page])
+
+  async function handleUpload(e: React.FormEvent) {
+    e.preventDefault()
+    if (!file || !version) return
+
+    const form = new FormData()
+    form.append("version", version)
+    form.append("file", file)
+
+    setUploading(true)
+    setUploadMsg("")
+    try {
+      await api.post("/artefacts", form)
+      setVersion("")
+      setFile(null)
+      setUploadMsg("Version uploaded successfully.")
+      load()
+    } catch (err) {
+      setUploadMsg("Upload failed: " + (err instanceof Error ? err.message : "unknown error"))
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  const totalPages = Math.ceil(total / PAGE_SIZE)
+
+  return (
+    <div>
+      <h1 className="page-title">Versions</h1>
+
+      <div className="card upload-section">
+        <h3>Create New Version</h3>
+        <form className="upload-form" onSubmit={handleUpload}>
+          <input
+            type="text"
+            placeholder="Version (e.g. 1.2.0)"
+            value={version}
+            onChange={(e) => setVersion(e.target.value)}
+            required
+          />
+          <input
+            type="file"
+            accept=".jar,.patch,.zip"
+            onChange={(e) => setFile(e.target.files?.[0] || null)}
+            required
+          />
+          <button type="submit" className="btn-primary btn-sm" disabled={uploading}>
+            {uploading ? "Uploading..." : "Upload"}
+          </button>
+        </form>
+        {uploadMsg && (
+          <p className={uploadMsg.includes("failed") ? "msg-error" : "msg-success"}>{uploadMsg}</p>
+        )}
+      </div>
+
+      <div className="card">
+        <table className="data-table">
+          <thead>
+            <tr>
+              <th>Version</th>
+              <th>File</th>
+              <th>Size</th>
+              <th>Type</th>
+              <th>SHA256</th>
+              <th>Created</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={6} className="td-empty">
+                  Loading...
+                </td>
+              </tr>
+            ) : artefacts.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="td-empty">
+                  No versions yet. Upload the first one above.
+                </td>
+              </tr>
+            ) : (
+              artefacts.map((a) => (
+                <tr key={a.id}>
+                  <td>
+                    <strong>{a.version}</strong>
+                  </td>
+                  <td>{a.fileName}</td>
+                  <td>{formatSize(a.fileSize)}</td>
+                  <td>
+                    {a.isDelta ? (
+                      <span className="badge badge-delta">delta ({a.deltaRef})</span>
+                    ) : (
+                      <span className="badge badge-full">full</span>
+                    )}
+                  </td>
+                  <td className="hash-cell" title={a.sha256Hash}>
+                    {a.sha256Hash.slice(0, 12)}...
+                  </td>
+                  <td>{new Date(a.createdAt).toLocaleDateString()}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+        {totalPages > 1 && (
+          <div className="pagination">
+            <button disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+              Prev
+            </button>
+            <span>
+              Page {page} of {totalPages}
+            </span>
+            <button disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
+              Next
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + " B"
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB"
+}

web/src/pages/Dashboard.css

@@ -0,0 +1,37 @@
+.page-title {
+  margin: 0 0 24px;
+  font-size: 20px;
+  color: #1a1a2e;
+}
+
+.page-loading {
+  padding: 40px;
+  color: #888;
+  text-align: center;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  border-top: 3px solid #ccc;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1a1a2e;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: #888;
+  margin-top: 4px;
+}

web/src/pages/Dashboard.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react"
+import { api } from "../api/client"
+import "./Dashboard.css"
+
+interface Stats {
+  totalDevices: number
+  onlineDevices: number
+  activeDeployments: number
+  totalArtefacts: number
+}
+
+export default function Dashboard() {
+  const [stats, setStats] = useState<Stats>({
+    totalDevices: 0,
+    onlineDevices: 0,
+    activeDeployments: 0,
+    totalArtefacts: 0,
+  })
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const [devices, artefacts, deployments] = await Promise.all([
+          api.get<{ total: number; data: { status: string }[] }>("/devices?pageSize=1"),
+          api.get<{ total: number }>("/artefacts?pageSize=1"),
+          api.get<{ total: number; data: { status: string }[] }>("/deployments?pageSize=100"),
+        ])
+
+        const online = devices.data
+          ? devices.data.filter((d: { status: string }) => d.status === "online").length
+          : 0
+        const active = deployments.data
+          ? deployments.data.filter((d: { status: string }) => d.status === "active").length
+          : 0
+
+        setStats({
+          totalDevices: devices.total,
+          onlineDevices: online,
+          activeDeployments: active,
+          totalArtefacts: artefacts.total,
+        })
+      } catch (err) {
+        console.error("Failed to load stats:", err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  if (loading) return <div className="page-loading">Loading...</div>
+
+  const cards = [
+    { label: "Total Devices", value: stats.totalDevices, colour: "#4a90d9" },
+    { label: "Online Devices", value: stats.onlineDevices, colour: "#27ae60" },
+    { label: "Active Deployments", value: stats.activeDeployments, colour: "#e67e22" },
+    { label: "Artefact Versions", value: stats.totalArtefacts, colour: "#8e44ad" },
+  ]
+
+  return (
+    <div>
+      <h1 className="page-title">Dashboard</h1>
+      <div className="stats-grid">
+        {cards.map((c) => (
+          <div key={c.label} className="stat-card" style={{ borderTopColor: c.colour }}>
+            <div className="stat-value">{c.value}</div>
+            <div className="stat-label">{c.label}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

web/src/pages/Deployments.css

@@ -0,0 +1,56 @@
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.page-header .page-title { margin-bottom: 0; }
+
+.form-section { margin-bottom: 20px; }
+.form-section h3 { margin: 0 0 12px; font-size: 15px; }
+
+.dep-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.dep-form label {
+  display: block;
+  font-size: 13px;
+  color: #333;
+}
+
+.dep-form input,
+.dep-form select {
+  display: block;
+  width: 100%;
+  margin-top: 3px;
+  padding: 7px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.badge-draft { background: #e2e3e5; color: #383d41; }
+.badge-active { background: #d4edda; color: #155724; }
+.badge-paused { background: #fff3cd; color: #856404; }
+.badge-completed { background: #d4edda; color: #155724; }
+.badge-cancelled { background: #f8d7da; color: #721c24; }
+
+.actions-cell { white-space: nowrap; }
+
+.btn-action {
+  padding: 4px 12px;
+  border: none;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+  background: #27ae60;
+  color: #fff;
+}
+
+.btn-action:hover { opacity: 0.85; }
+.btn-pause { background: #e67e22; }

web/src/pages/Deployments.tsx

@@ -0,0 +1,266 @@
+import { type FormEvent, useEffect, useState } from "react"
+import { api } from "../api/client"
+import "./Deployments.css"
+
+interface Deployment {
+  id: number
+  artefactId: number
+  artefactVersion: string
+  name: string
+  targetType: string
+  rolloutStrategy: string
+  maxConcurrent: number
+  status: string
+  createdAt: string
+}
+
+interface Artefact {
+  id: number
+  version: string
+}
+
+export default function Deployments() {
+  const [deployments, setDeployments] = useState<Deployment[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(true)
+
+  // Create form
+  const [showForm, setShowForm] = useState(false)
+  const [artefacts, setArtefacts] = useState<Artefact[]>([])
+  const [name, setName] = useState("")
+  const [artefactId, setArtefactId] = useState("")
+  const [targetType, setTargetType] = useState("all")
+  const [targetSpec, setTargetSpec] = useState("")
+  const [rolloutStrategy, setRolloutStrategy] = useState("immediate")
+  const [maxConcurrent, setMaxConcurrent] = useState(50)
+  const [creating, setCreating] = useState(false)
+  const [msg, setMsg] = useState("")
+
+  async function load() {
+    setLoading(true)
+    try {
+      const res = await api.get<{ data: Deployment[]; total: number }>(
+        `/deployments?page=${page}&pageSize=20`
+      )
+      setDeployments(res.data)
+      setTotal(res.total)
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [load, page])
+
+  async function loadArtefacts() {
+    try {
+      const res = await api.get<{ data: Artefact[] }>("/artefacts?pageSize=200")
+      setArtefacts(res.data)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  async function handleCreate(e: FormEvent) {
+    e.preventDefault()
+    setCreating(true)
+    setMsg("")
+    try {
+      await api.post("/deployments", {
+        artefactId: parseInt(artefactId),
+        name,
+        targetType,
+        targetSpec: targetSpec || "{}",
+        rolloutStrategy,
+        maxConcurrent,
+      })
+      setShowForm(false)
+      setName("")
+      setArtefactId("")
+      setTargetSpec("")
+      setMsg("Deployment created. Activate it to begin rollout.")
+      load()
+    } catch (err) {
+      setMsg("Failed: " + (err instanceof Error ? err.message : "unknown"))
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  async function activate(id: number) {
+    try {
+      await api.post(`/deployments/${id}/activate`)
+      load()
+    } catch (err) {
+      alert("Failed to activate")
+    }
+  }
+
+  async function pause(id: number) {
+    try {
+      await api.post(`/deployments/${id}/pause`)
+      load()
+    } catch (err) {
+      alert("Failed to pause")
+    }
+  }
+
+  const totalPages = Math.ceil(total / 20)
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1 className="page-title">Deployments</h1>
+        <button
+          className="btn-primary btn-sm"
+          onClick={() => {
+            setShowForm(!showForm)
+            if (!showForm) loadArtefacts()
+          }}>
+          {showForm ? "Cancel" : "New Deployment"}
+        </button>
+      </div>
+
+      {msg && <p className={msg.startsWith("Failed") ? "msg-error" : "msg-success"}>{msg}</p>}
+
+      {showForm && (
+        <div className="card form-section">
+          <h3>Create Deployment</h3>
+          <form className="dep-form" onSubmit={handleCreate}>
+            <label>
+              Name <input value={name} onChange={(e) => setName(e.target.value)} required />
+            </label>
+            <label>
+              Version
+              <select value={artefactId} onChange={(e) => setArtefactId(e.target.value)} required>
+                <option value="">-- Select --</option>
+                {artefacts.map((a) => (
+                  <option key={a.id} value={a.id}>
+                    {a.version}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label>
+              Target
+              <select value={targetType} onChange={(e) => setTargetType(e.target.value)}>
+                <option value="all">All Devices</option>
+                <option value="group">By Group</option>
+                <option value="device">Specific Devices</option>
+              </select>
+            </label>
+            {targetType !== "all" && (
+              <label>
+                Target Spec (JSON)
+                <input
+                  value={targetSpec}
+                  onChange={(e) => setTargetSpec(e.target.value)}
+                  placeholder={
+                    targetType === "group"
+                      ? '{"groupName":"default"}'
+                      : '{"deviceIds":["id1","id2"]}'
+                  }
+                />
+              </label>
+            )}
+            <label>
+              Strategy
+              <select value={rolloutStrategy} onChange={(e) => setRolloutStrategy(e.target.value)}>
+                <option value="immediate">Immediate</option>
+                <option value="staged">Staged</option>
+              </select>
+            </label>
+            <label>
+              Max Concurrent{" "}
+              <input
+                type="number"
+                value={maxConcurrent}
+                onChange={(e) => setMaxConcurrent(Number(e.target.value))}
+                min={1}
+                max={500}
+              />
+            </label>
+            <button type="submit" className="btn-primary btn-sm" disabled={creating}>
+              {creating ? "Creating..." : "Create"}
+            </button>
+          </form>
+        </div>
+      )}
+
+      <div className="card">
+        <table className="data-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Version</th>
+              <th>Target</th>
+              <th>Strategy</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={7} className="td-empty">
+                  Loading...
+                </td>
+              </tr>
+            ) : deployments.length === 0 ? (
+              <tr>
+                <td colSpan={7} className="td-empty">
+                  No deployments yet.
+                </td>
+              </tr>
+            ) : (
+              deployments.map((d) => (
+                <tr key={d.id}>
+                  <td>
+                    <strong>{d.name}</strong>
+                  </td>
+                  <td>{d.artefactVersion}</td>
+                  <td>{d.targetType}</td>
+                  <td>{d.rolloutStrategy}</td>
+                  <td>
+                    <span className={`badge badge-${d.status}`}>{d.status}</span>
+                  </td>
+                  <td>{new Date(d.createdAt).toLocaleDateString()}</td>
+                  <td className="actions-cell">
+                    {d.status === "draft" && (
+                      <button className="btn-action" onClick={() => activate(d.id)}>
+                        Activate
+                      </button>
+                    )}
+                    {d.status === "active" && (
+                      <button className="btn-action btn-pause" onClick={() => pause(d.id)}>
+                        Pause
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+        {totalPages > 1 && (
+          <div className="pagination">
+            <button disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+              Prev
+            </button>
+            <span>
+              Page {page} of {totalPages}
+            </span>
+            <button disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
+              Next
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

web/src/pages/Login.css

@@ -0,0 +1,81 @@
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #1a1a2e;
+}
+
+.login-form {
+  background: #fff;
+  padding: 40px;
+  border-radius: 8px;
+  width: 360px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.login-form h1 {
+  margin: 0 0 4px;
+  font-size: 22px;
+  color: #e94560;
+}
+
+.login-subtitle {
+  margin: 0 0 24px;
+  color: #888;
+  font-size: 13px;
+}
+
+.login-error {
+  background: #fff0f0;
+  color: #c00;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  font-size: 13px;
+}
+
+.login-form label {
+  display: block;
+  margin-bottom: 16px;
+  font-size: 13px;
+  color: #333;
+}
+
+.login-form input {
+  display: block;
+  width: 100%;
+  margin-top: 4px;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.login-form input:focus {
+  outline: none;
+  border-color: #e94560;
+  box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.15);
+}
+
+.btn-primary {
+  width: 100%;
+  padding: 10px;
+  background: #e94560;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover {
+  background: #d63850;
+}
+
+.btn-primary:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}

web/src/pages/Login.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api, setToken } from '../api/client';
+import './Login.css';
+
+export default function Login() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const res = await api.post<{ token: string }>('/auth/login', { username, password });
+      setToken(res.token);
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-page">
+      <form className="login-form" onSubmit={handleSubmit}>
+        <h1>OTA Manager</h1>
+        <p className="login-subtitle">Sign in to manage updates</p>
+
+        {error && <div className="login-error">{error}</div>}
+
+        <label>
+          Username
+          <input
+            type="text"
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+            autoFocus
+            required
+          />
+        </label>
+
+        <label>
+          Password
+          <input
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+          />
+        </label>
+
+        <button type="submit" disabled={loading} className="btn-primary">
+          {loading ? 'Signing in...' : 'Sign In'}
+        </button>
+      </form>
+    </div>
+  );
+}

web/src/pages/Users.css

@@ -0,0 +1,32 @@
+.user-form {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.user-form input,
+.user-form select {
+  padding: 7px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.pw-inline {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.pw-inline input {
+  padding: 4px 8px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.btn-danger { background: #c0392b; }
+.btn-danger:hover { background: #a93226; }
+.btn-cancel { background: #888; }
+.btn-cancel:hover { background: #666; }

web/src/pages/Users.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import './Users.css';
+
+interface AdminUser {
+  id: number;
+  username: string;
+  role: string;
+  createdAt: string;
+}
+
+export default function Users() {
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Create form
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [role, setRole] = useState('admin');
+  const [creating, setCreating] = useState(false);
+  const [msg, setMsg] = useState('');
+
+  // Change password state
+  const [changingId, setChangingId] = useState<number | null>(null);
+  const [newPassword, setNewPassword] = useState('');
+
+  async function load() {
+    setLoading(true);
+    try {
+      const res = await api.get<{ data: AdminUser[] }>('/admin/users');
+      setUsers(res.data);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { load(); }, []);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setCreating(true);
+    setMsg('');
+    try {
+      await api.post('/admin/users', { username, password, role });
+      setUsername('');
+      setPassword('');
+      setRole('admin');
+      setMsg('User created.');
+      load();
+    } catch (err) {
+      setMsg('Failed: ' + (err instanceof Error ? err.message : 'unknown'));
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function handleDelete(id: number, uname: string) {
+    if (!confirm(`Delete user "${uname}"?`)) return;
+    try {
+      await api.delete(`/admin/users/${id}`);
+      load();
+    } catch (err) {
+      alert('Failed to delete');
+    }
+  }
+
+  async function handleChangePassword(id: number) {
+    if (!newPassword) return;
+    try {
+      await api.put(`/admin/users/${id}/password`, { newPassword });
+      setChangingId(null);
+      setNewPassword('');
+      setMsg('Password changed.');
+    } catch (err) {
+      alert('Failed to change password');
+    }
+  }
+
+  return (
+    <div>
+      <h1 className="page-title">Admin Users</h1>
+
+      {msg && <p className={msg.startsWith('Failed') ? 'msg-error' : 'msg-success'}>{msg}</p>}
+
+      <div className="card form-section">
+        <h3>Add User</h3>
+        <form className="user-form" onSubmit={handleCreate}>
+          <input placeholder="Username" value={username} onChange={e => setUsername(e.target.value)} required />
+          <input placeholder="Password" type="password" value={password} onChange={e => setPassword(e.target.value)} required />
+          <select value={role} onChange={e => setRole(e.target.value)}>
+            <option value="admin">Admin</option>
+            <option value="operator">Operator</option>
+          </select>
+          <button type="submit" className="btn-primary btn-sm" disabled={creating}>
+            {creating ? 'Creating...' : 'Add User'}
+          </button>
+        </form>
+      </div>
+
+      <div className="card">
+        <table className="data-table">
+          <thead>
+            <tr>
+              <th>Username</th>
+              <th>Role</th>
+              <th>Created</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={4} className="td-empty">Loading...</td></tr>
+            ) : users.length === 0 ? (
+              <tr><td colSpan={4} className="td-empty">No users.</td></tr>
+            ) : users.map(u => (
+              <tr key={u.id}>
+                <td><strong>{u.username}</strong></td>
+                <td><span className="badge">{u.role}</span></td>
+                <td>{new Date(u.createdAt).toLocaleDateString()}</td>
+                <td className="actions-cell">
+                  {changingId === u.id ? (
+                    <span className="pw-inline">
+                      <input
+                        type="password"
+                        placeholder="New password"
+                        value={newPassword}
+                        onChange={e => setNewPassword(e.target.value)}
+                        size={16}
+                      />
+                      <button className="btn-action" onClick={() => handleChangePassword(u.id)}>Save</button>
+                      <button className="btn-action btn-cancel" onClick={() => setChangingId(null)}>Cancel</button>
+                    </span>
+                  ) : (
+                    <>
+                      <button className="btn-action" onClick={() => setChangingId(u.id)}>Change PW</button>
+                      <button className="btn-action btn-danger" onClick={() => handleDelete(u.id, u.username)}>Delete</button>
+                    </>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}