feat: add logo component and update styles for header alignment and theme variables

Author: stephenwhitmarsh

.gitignore

@@ -19,3 +19,5 @@ vite.config.js.timestamp-*.mjs
 _to_delete/
 # obsidian workspace
 .obsidian/
+# screenshot build folders
+.shot*/

frontend/src/App.css

@@ -10,15 +10,15 @@
 /* header */
 .app-header {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
   padding: 20px 0 14px;
   border-bottom: 1px solid var(--border);
 }
 
 .brand {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 10px;
 }
 

frontend/src/App.jsx

@@ -15,6 +15,7 @@ import Queue from './views/Queue.jsx'
 import Team from './views/Team.jsx'
 import { period, leads, opsPeople, members, projectLeads, projectsLedBy, projectState, activeSwitcherPeople } from './data/mockData.js'
 import { SessionProvider, useSession, actorFor, RoleChip } from './session.jsx'
+import Logo from './components/Logo.jsx'
 
 const TABS = [
   { id: 'analytics', label: 'Overview', component: Analytics, opsOnly: true },
@@ -99,6 +100,7 @@ function AppInner() {
     <div className="app">
       <header className="app-header">
         <div className="brand">
+          <Logo height={30} />
           <span className="brand-name">faircenter</span>
         </div>
         <div className="header-right">

frontend/src/components/Logo.jsx

@@ -619,7 +619,9 @@ export function loadSeries(projList, t0, t1, keyOf, opts) {
   const bucketOf = {}; for (const p of projList) bucketOf[p.id] = keyOf(p)
   const set = new Set(projList.map((p) => p.id))
   const buckets = [...new Set(projList.map((p) => keyOf(p)))]
-  const emit = (cj, cr) => { const row = {}; for (const b of buckets) { if (split) { row[b] = cj[b]; row[b + RESV_SFX] = cr[b] } else { row[b] = cj[b] + cr[b] } } return row }
+  // a reservation is a hold: usage under it is absorbed inside the reservation, and only
+  // usage above it adds its own band. Job band = max(0, used - reserved); total = max(used, reserved).
+  const emit = (cj, cr) => { const row = {}; for (const b of buckets) { const over = Math.max(0, cj[b] - cr[b]); if (split) { row[b] = over; row[b + RESV_SFX] = cr[b] } else { row[b] = cr[b] + over } } return row }
   const raw = (t1 - t0) <= 14 * DAY
   if (raw) {
     const evts = []
@@ -632,15 +634,38 @@ export function loadSeries(projList, t0, t1, keyOf, opts) {
     return { rows, buckets, mode: 'raw' }
   }
   const d0 = Math.floor(t0 / DAY), d1 = Math.ceil(t1 / DAY), nDays = d1 - d0
-  const gj = new Map(), gr = new Map()
+  const gj = new Map()  // jobs: mean GPUs over the day (GPU-hours / 24)
+  const gr = new Map()  // reservations: the reserved level, kept as a rectangular block
   for (let d = 0; d < nDays; d++) { gj.set(d, Object.fromEntries(buckets.map((b) => [b, 0]))); gr.set(d, Object.fromEntries(buckets.map((b) => [b, 0]))) }
+  // jobs -> time-averaged GPUs per day (actual usage genuinely varies within a day)
   for (const u of units) {
-    if (!set.has(u.projectId) || u.end <= t0 || u.start >= t1) continue
-    const b = bucketOf[u.projectId]; const grid = u.kind === 'resv' ? gr : gj; let s = Math.max(u.start, t0); const e = Math.min(u.end, t1)
-    while (s < e) { const di = Math.floor(s / DAY) - d0; const de = (Math.floor(s / DAY) + 1) * DAY; const seg = Math.min(e, de) - s; if (grid.has(di)) grid.get(di)[b] += u.gpus * seg / HOUR; s = de }
+    if (u.kind === 'resv' || !set.has(u.projectId) || u.end <= t0 || u.start >= t1) continue
+    const b = bucketOf[u.projectId]; let s = Math.max(u.start, t0); const e = Math.min(u.end, t1)
+    while (s < e) { const di = Math.floor(s / DAY) - d0; const de = (Math.floor(s / DAY) + 1) * DAY; const seg = Math.min(e, de) - s; if (gj.has(di)) gj.get(di)[b] += u.gpus * seg / HOUR; s = de }
+  }
+  // reservations -> the reserved GPU level, not a time-average: a hold is a rectangular
+  // block, so per day and bucket take the peak concurrent reserved GPUs. A single
+  // reservation then reads flat at its size across every day it is active.
+  const resvUnits = units.filter((u) => u.kind === 'resv' && set.has(u.projectId) && u.end > t0 && u.start < t1)
+  for (let d = 0; d < nDays; d++) {
+    const dayS = (d0 + d) * DAY, dayE = dayS + DAY
+    for (const b of buckets) {
+      const ev = []
+      for (const u of resvUnits) {
+        if (bucketOf[u.projectId] !== b) continue
+        const s = Math.max(u.start, dayS, t0), e = Math.min(u.end, dayE, t1)
+        if (e <= s) continue
+        ev.push([s, u.gpus]); ev.push([e, -u.gpus])
+      }
+      if (!ev.length) continue
+      ev.sort((x, y) => x[0] - y[0])
+      let cur = 0, peak = 0
+      for (const [, g] of ev) { cur += g; if (cur > peak) peak = cur }
+      gr.get(d)[b] = peak
+    }
   }
   const rows = []
-  for (let d = 0; d < nDays; d++) { const cj = Object.fromEntries(buckets.map((b) => [b, +(gj.get(d)[b] / 24).toFixed(1)])); const cr = Object.fromEntries(buckets.map((b) => [b, +(gr.get(d)[b] / 24).toFixed(1)])); rows.push({ t: (d0 + d) * DAY, ...emit(cj, cr) }) }
+  for (let d = 0; d < nDays; d++) { const cj = Object.fromEntries(buckets.map((b) => [b, +(gj.get(d)[b] / 24).toFixed(1)])); const cr = Object.fromEntries(buckets.map((b) => [b, +gr.get(d)[b].toFixed(1)])); rows.push({ t: (d0 + d) * DAY, ...emit(cj, cr) }) }
   return { rows, buckets, mode: 'daily' }
 }
 

frontend/src/data/mockData.js

@@ -23,6 +23,13 @@
   --series-3:    #1baf7a;
   --series-4:    #eda100;
 
+  /* logo (adapts to theme; body/ink/yarn fixed, outline flips) */
+  --logo-body:   #f6f1e4;
+  --logo-line:   #1d1b18;
+  --logo-ink:    #1d1b18;
+  --logo-yarn:   #e8733d;
+  --logo-nose:   #e58b9a;
+
   --radius: 8px;
   font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
   font-size: 14px;
@@ -41,6 +48,8 @@
     --line:      #383835;
     --border:    rgba(255, 255, 255, 0.10);
 
+    --logo-line: #f1ede0;
+
     --accent:    #3987e5;
     --series-1:  #3987e5;
     --series-2:  #d95926;

frontend/src/index.css

@@ -1,7 +1,7 @@
 // Operations overview: tiles and the "needs attention" list, shown at the top of Analytics.
 import {
   projects, reservations, parameters, period, effectiveGpus, runningAt, activeProjects,
-  projRate, queueSnapshot, requests as changeRequests, poolRealisation,
+  projRate, queueSnapshot, requests as changeRequests, poolRealisation, projectState,
 } from '../data/mockData.js'
 import { fmt } from '../format.js'
 import { useSession } from '../session.jsx'
@@ -24,6 +24,8 @@ export default function Overview({ onNav }) {
   const qMedMin = qw.length ? qw[Math.floor(qw.length / 2)] / 60000 : 0
   const pending = changeRequests.filter((r) => r.status === 'pending')
   const activeTeam = active.filter((p) => p.funding !== 'person')
+  // the team-project roster still on the books: those running now plus those yet to start
+  const plannedTeam = projects.filter((p) => p.funding !== 'person' && projectState(p) !== 'finished')
   const realis = poolRealisation()
   const pctLabel = (v) => (v == null ? '—' : Math.round(v * 100) + '%')
 
@@ -44,10 +46,10 @@ export default function Overview({ onNav }) {
       <div className="tiles">
         <Tile label="Utilisation now" value={util + '%'} note={`${fmt(inUse)} of ${fmt(capNow)} GPUs`} onClick={() => onNav && onNav('consumption')} />
         <Tile label="In queue" value={fmt(q.length)} note={`${fmt(q.reduce((s, r) => s + r.gpus, 0))} GPUs waiting`} onClick={() => onNav && onNav('queue')} />
-        <Tile label="Queue wait" value={q.length ? medLabel(qMedMin) : '—'} note="median, jobs waiting now" onClick={() => onNav && onNav('queue')} />
-        <Tile label="Project budget realisation" value={pctLabel(realis.project)} note="used vs allocated, to date" onClick={() => onNav && onNav('review')} />
-        <Tile label="Person budget realisation" value={pctLabel(realis.person)} note="used vs allocated, to date" onClick={() => onNav && onNav('budgets')} />
-        <Tile label="Active projects" value={fmt(activeTeam.length)} note="team projects running now" onClick={() => onNav && onNav('review')} />
+        <Tile label="Queue wait" value={q.length ? medLabel(qMedMin) : '—'} note="median of waiting jobs" onClick={() => onNav && onNav('queue')} />
+        <Tile label="Project budget used" value={pctLabel(realis.project)} note="vs allocated" onClick={() => onNav && onNav('review')} />
+        <Tile label="Person budget used" value={pctLabel(realis.person)} note="vs allocated" onClick={() => onNav && onNav('budgets')} />
+        <Tile label="Active projects" value={fmt(activeTeam.length)} note={`of ${fmt(plannedTeam.length)} planned`} onClick={() => onNav && onNav('review')} />
       </div>
 
       <div className="card">