From 2984e8e8514381382dfa176847c20034c1f4fe94 Mon Sep 17 00:00:00 2001 From: "Joseph B. McQueen" Date: Wed, 1 Jul 2026 19:36:36 -0400 Subject: [PATCH] Phase 9: rebuild frontend on a shared layout + fix Monitor Jobs race The nav link race: - Every page's header used `` and the real destination was only assigned later, after /info returned. An empty href resolves to the current document URL, so clicking "Monitor Jobs" on sendMessage before /info completed silently reloaded sendMessage. - Fixed structurally: nav links now use static relative hrefs baked into the HTML ("./sendMessage.html", "./monitorJobs.html"), so the destination is correct the moment the DOM parses. Shared UI: - New html/css/app.css: design tokens (palette, radius, shadow, font), sticky compact top header (bot avatar + label on the left, nav pills in the middle, current user on the right, active-page highlight via aria-current), card containers, form styling with focus rings, DataTables theme overrides, status pills, modal, and responsive breakpoints. - New html/js/app.js: shared browser bootstrap. Parses appName from the URL, redirects to OAuth if the id cookie is missing, fetches /info once, populates the header, applies aria-current to the active nav link, and invokes a per-page onReady callback with { info, appName }. Also exports getCookie, escapeHtml, and formatDate helpers so each page stops shipping its own copy. Per-page rewrites: - sendMessage.html/.js: form now lives in a card, image preview only shows when a file is attached, EasyMDE + VirtualSelect styled to match the theme, submit is a primary button, confirmation modal redesigned. All bootstrap code deleted (delegated to app.js). - monitorJobs.html/.js: three cards (Running / Scheduled / Completed) with themed DataTables. Completed table sorts by start time desc, paginates, and searches; message column truncates HTML previews to ~120 chars. Empty-state text per table. `jobId` and running-row "view" links go to jobDetail via safe relative URLs. - jobDetail.html/.js: same shared header + card layout; summary grid, message preview, and recipient table styled to match the new palette. Sanity checks: - All 43 helper tests still pass. - Server boots cleanly on port 3001. - Curl of sendMessage/monitorJobs/jobDetail all return 200 with the shared header markup. - /CollabCentral/:app/css/app.css and /CollabCentral/:app/js/app.js both serve 200 (shared static mount is per-bot as expected). - No local href in any page is empty; every nav target resolves at parse time. - /info and requireBot 404 gate unchanged. Co-authored-by: Cursor --- config/config.json | 2 +- html/css/app.css | 514 ++++++++++++++++++++++++++++++++++++++++++ html/jobDetail.html | 184 ++++----------- html/jobDetail.js | 154 +++++-------- html/js/app.js | 159 +++++++++++++ html/monitorJobs.html | 182 ++++++--------- html/monitorJobs.js | 158 +++++++------ html/sendMessage.html | 356 ++++++----------------------- html/sendMessage.js | 276 ++++++++--------------- 9 files changed, 1103 insertions(+), 882 deletions(-) create mode 100644 html/css/app.css create mode 100644 html/js/app.js diff --git a/config/config.json b/config/config.json index 4391135..eea3251 100644 --- a/config/config.json +++ b/config/config.json @@ -1,7 +1,7 @@ { "server": { "name": "CollabCentral", - "port": "1450" + "port": "1451" }, "languages": [], "webex": { diff --git a/html/css/app.css b/html/css/app.css new file mode 100644 index 0000000..074be61 --- /dev/null +++ b/html/css/app.css @@ -0,0 +1,514 @@ +/* ============================================================================ + CollabCentral shared UI. All three top-level pages (sendMessage, monitorJobs, + jobDetail) render on top of this stylesheet — every rule below is meant to + be reusable across pages, and per-page tweaks stay in a small ` + + + - - -
- + -