n.siegfried
e3527a6e1d
A 55-agent audit of the last few commits confirmed 32 findings. The high and medium ones are fixed here; the ranked leftovers are listed at the end. Boot-order crash (my regression, wave 2) - wp-format.js loaded AFTER wp-creation-app.js on every page, but the creator boots synchronously at parse time and its comment renderer calls wpFormatDateTime(). With any review comment present that threw a ReferenceError and aborted the rest of boot. The formatter now parses before the app scripts on all five pages. Verified with a comment seeded: the date renders and boot completes. The network-first fix didn't actually work - `fetch(req)` inherits the request's default cache mode, so it consults the browser HTTP cache — the previous commit's "network-first" still allowed a page to run against a stale sibling. Code is now fetched with cache:'no-cache' and precached with cache:'reload'. - Nothing pinned freshness on the wire either: no Cache-Control anywhere, so browsers applied heuristic caching (~10% of a file's age) and each file expired at a different moment. NGINX and the dev server now send no-cache for html/css/js/ webmanifest; images stay cacheable. Verified on the wire. - Non-ok responses were returned verbatim, so a 502 broke pages the cache could have served; they now fall back to the cache. Cache keys drop the query string, which fixes both the offline miss on every in-app link (?project=…&tab=…) and unbounded cache growth. respondWith can no longer resolve to undefined. Cache bumped to v5. Embedded creator - Dropped the &t=Date.now() cache-buster and made the frame's identity the PROJECT. The view and which package to open are now applied by calling into the loaded document, so switching tabs no longer reloads it — that reload discarded unsaved form edits, made the creator unreachable offline, and stored a fresh copy per click. - ?view=dashboard was re-read on every tab switch, so after one deep link the "Work Package Creation" tab kept opening the Dashboard for the rest of the session. Deep-link params are consumed once now. - ?wp=<id> — which the global search has been emitting since wave 2 — was read by nothing, so picking a work package in search opened a blank one. The creator now exposes openWpById() and the shell applies it after a new 'wp-creator-ready' event, because the frame's load fires before pullProject() resolves. - Math.max(320,…) could make the frame taller than the space available while page scrolling was disabled, pushing content off a window that couldn't scroll. Full-bleed is now only used when at least 460px remains, and the SOP-incomplete gate never runs inside it. A ResizeObserver re-measures when wp-chrome.js grows the app bar. Contract drift - .field-hint and .user-pick are used on the SOP suite page but their only rules lived in wp-creation-styles.css, which that page doesn't link — the CM hint and the sign-off pickers had no styling at all. Rules added to the suite's stylesheet. - The creator's critical floor now also hides modal overlays (a stale stylesheet rendered their contents inline in the form) and gives the jump bar a sane sticky top. - login.js dereferenced ids unguarded where the old version guarded, so a cached older login.html would break sign-in itself. Guarded. - The "Language & time" menu item was added only if wp-format.js had already parsed; the check now happens at click time. Verified: 157 API checks across five suites on a clean database, plus 22 driven UI checks — boot-with-comment, tab switching with a no-reload probe, short-viewport fallback, and the search deep link landing on the right package. Not done, ranked: ~50 dead CSS rules across three stylesheets; dead .team-pick and .constraint-option contracts; wp-chrome.js's documented '.header' mount branch is unreachable because the creator loads neither wp-chrome.js nor its CSS; the squeeze half of the embed layout (.content-area.embed-full) is still CSS-only, which degrades to the old narrow column rather than breaking; fingerprinted asset URLs would make a mismatched pair unrepresentable rather than merely unlikely. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
217 lines
13 KiB
HTML
217 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Admin Console — Work Package Suite</title>
|
||
<script src="auth-guard.js"></script>
|
||
<!-- Date/number formatting. Must parse BEFORE the app scripts: they format
|
||
timestamps during their own boot. -->
|
||
<script src="wp-format.js"></script>
|
||
<link rel="icon" href="favicon.ico" sizes="any">
|
||
<link rel="manifest" href="manifest.webmanifest">
|
||
<meta name="theme-color" content="#161616">
|
||
<link rel="stylesheet" href="theme-light.css">
|
||
<link rel="stylesheet" href="wp-chrome.css">
|
||
<style>
|
||
:root{ --bg:#f4f4f4; --surface:#fff; --border:#e0e0e0; --border-strong:#8d8d8d; --text:#161616;
|
||
--muted:#525252; --dim:#8d8d8d; --accent:#0f62fe; --green:#198038; --green-bg:#defbe6;
|
||
--red:#da1e28; --red-bg:#fff1f1; --amber:#8e6a00; --amber-bg:#fdf6dd; --mono:'IBM Plex Mono','Cascadia Mono',Consolas,monospace; }
|
||
*{ box-sizing:border-box; }
|
||
body{ margin:0; font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); }
|
||
.wrap{ max-width:860px; margin:0 auto; padding:28px 20px 80px; }
|
||
h1{ font-size:20px; margin:0 0 2px; }
|
||
.sub{ color:var(--muted); font-size:13px; margin-bottom:18px; }
|
||
.card{ background:var(--surface); border:1px solid var(--border); border-radius:0; padding:18px 20px; margin-bottom:16px; }
|
||
.card h2{ font-size:14px; margin:0 0 12px; text-transform:uppercase; letter-spacing:.03em; color:var(--accent); }
|
||
button{ font:inherit; font-size:13px; font-weight:600; border-radius:0; padding:8px 14px; cursor:pointer;
|
||
border:1px solid var(--border-strong); background:#fff; color:var(--text); }
|
||
button:hover{ border-color:var(--accent); color:var(--accent); }
|
||
button.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
|
||
button.primary:hover{ background:#1e54bb; color:#fff; }
|
||
button.danger{ border-color:var(--red); color:var(--red); }
|
||
button.danger:hover{ background:var(--red-bg); }
|
||
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
|
||
.banner{ padding:10px 14px; border-radius:0; font-size:13px; font-weight:600; margin-top:10px; border:1px solid var(--border); background:var(--surface); }
|
||
.banner.ok{ background:var(--green-bg); color:var(--green); border-color:var(--green); }
|
||
.banner.bad{ background:var(--red-bg); color:var(--red); border-color:var(--red); }
|
||
pre.out{ background:#0f1525; color:#d7e0f5; border-radius:0; padding:12px 14px; font-family:var(--mono);
|
||
font-size:12px; line-height:1.55; white-space:pre-wrap; max-height:340px; overflow:auto; margin:12px 0 0; }
|
||
pre.out .p{ color:#56d364; font-weight:700; } pre.out .f{ color:#ff7b72; font-weight:700; }
|
||
table.kv{ border-collapse:collapse; font-size:13px; margin-top:8px; }
|
||
table.kv th{ text-align:left; padding:5px 18px 5px 0; color:var(--muted); font-weight:600; }
|
||
table.kv td{ padding:5px 0; font-variant-numeric:tabular-nums; font-weight:700; }
|
||
.note{ font-size:12px; color:var(--dim); margin-top:10px; }
|
||
.gate-overlay{ position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; }
|
||
.gate-box{ background:var(--surface); border:1px solid var(--border); border-radius:0; padding:28px; max-width:380px; width:100%; box-shadow:0 8px 30px rgba(20,30,50,.12); }
|
||
.gate-box h2{ margin:0 0 4px; font-size:17px; }
|
||
.gate-box p{ color:var(--muted); font-size:13px; margin:0 0 16px; }
|
||
.gate-box input{ width:100%; padding:10px 12px; font-size:14px; border:1px solid var(--border-strong); border-radius:0; margin-bottom:12px; }
|
||
.gate-msg{ color:var(--red); font-size:12px; min-height:16px; margin-bottom:8px; }
|
||
.secwarn{ background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber); border-radius:0; padding:9px 13px; font-size:12px; margin-bottom:16px; }
|
||
a.home{ color:var(--accent); font-size:13px; text-decoration:none; }
|
||
.urow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
|
||
.urow input, .urow select{ padding:8px 10px; font:inherit; font-size:13px; border:1px solid var(--border-strong);
|
||
border-radius:0; background:#fff; color:var(--text); }
|
||
.urow input{ flex:1; min-width:130px; }
|
||
table.users{ border-collapse:collapse; width:100%; font-size:13px; }
|
||
table.users th{ text-align:left; padding:7px 10px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
|
||
table.users td{ padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
|
||
table.users tr:last-child td{ border-bottom:none; }
|
||
.tag{ display:inline-block; padding:1px 9px; border-radius:11px; font-size:11px; font-weight:700; }
|
||
.tag.admin{ background:#edf5ff; color:#0f62fe; } .tag.user{ background:#e8e8e8; color:#525252; }
|
||
.tag.on{ background:var(--green-bg); color:var(--green); } .tag.off{ background:var(--red-bg); color:var(--red); }
|
||
button.mini{ padding:4px 9px; font-size:12px; }
|
||
.me-tag{ font-size:11px; color:var(--dim); margin-left:6px; }
|
||
select.role-select{ padding:4px 8px; font:inherit; font-size:12px; border:1px solid var(--border-strong); border-radius:0; background:#fff; color:var(--text); cursor:pointer; }
|
||
select.role-select:hover{ border-color:var(--accent); }
|
||
select.role-select.is-admin{ color:var(--accent); border-color:var(--accent); font-weight:700; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- SHARED DARK APP BAR -->
|
||
<header class="wp-appbar">
|
||
<a href="index.html" class="wp-appbar-brand" title="Back to site">
|
||
<span class="wp-logo-chip"><img src="prime-controls-logo.jpg" alt="Prime Controls"></span>
|
||
<span class="wp-appbar-title">Work Package Suite <span class="wp-appbar-sub">| Admin Console</span></span>
|
||
</a>
|
||
</header>
|
||
|
||
<!-- ADMINS ONLY (shown if the signed-in account isn't an admin) -->
|
||
<div class="wrap" id="admin-denied" style="display:none">
|
||
<div class="card">
|
||
<h2>Admins only</h2>
|
||
<p class="sub" style="margin:0 0 12px">Your account doesn’t have admin access. Sign in with an admin account, or ask an administrator to grant you the admin role.</p>
|
||
<div class="row"><a class="home" href="index.html">← Back to site</a> <button onclick="wpLogout()">Sign out</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONSOLE -->
|
||
<div class="wrap" id="admin-main" style="display:none">
|
||
<div class="row" style="justify-content:space-between">
|
||
<div><h1>Admin Console</h1><div class="sub">Stack diagnostics & tests · talks to <code>/api</code> on this host</div></div>
|
||
<div class="row"><a class="home" href="index.html">← Site</a></div>
|
||
</div>
|
||
|
||
<!-- CONNECTIVITY -->
|
||
<div class="card">
|
||
<h2>API connectivity</h2>
|
||
<div class="row"><button class="primary" onclick="checkHealth()">Check /api/health</button></div>
|
||
<div class="banner" id="health-banner">—</div>
|
||
</div>
|
||
|
||
<!-- USER ADMINISTRATION -->
|
||
<div class="card">
|
||
<h2>User administration</h2>
|
||
<div class="sub" style="margin-bottom:10px">Login accounts for the portal. Requires an <strong>admin</strong> role on your own account.</div>
|
||
<div class="row"><button onclick="loadUsers()">Refresh users</button></div>
|
||
<div id="users-banner"></div>
|
||
<div id="users-table" style="margin-top:12px"></div>
|
||
|
||
<h2 style="margin-top:22px">Add a user</h2>
|
||
<div class="urow">
|
||
<input id="nu-username" placeholder="Username *" autocomplete="off">
|
||
<input id="nu-fullname" placeholder="Full name" autocomplete="off">
|
||
<input id="nu-email" placeholder="Email" autocomplete="off">
|
||
<select id="nu-role" title="Permissions — what this account may do">
|
||
<option value="project_user">Project User</option>
|
||
<option value="project_admin">Project Admin</option>
|
||
<option value="admin">Administrator</option>
|
||
</select>
|
||
<select id="nu-project-role" title="Job function on the project"></select>
|
||
<input id="nu-password" type="password" placeholder="Password (min 12)" autocomplete="new-password">
|
||
<button class="primary" onclick="createUser()">Create user</button>
|
||
</div>
|
||
<div id="users-create-msg" class="note"></div>
|
||
</div>
|
||
|
||
<!-- FEATURE FLAGS -->
|
||
<div class="card">
|
||
<h2>Features</h2>
|
||
<div class="sub" style="margin-bottom:10px">Switches that change what the suite offers on every project.</div>
|
||
<div id="features-box" class="note">Loading…</div>
|
||
</div>
|
||
|
||
<!-- NOTIFICATIONS / EMAIL -->
|
||
<div class="card">
|
||
<h2>Notifications & email</h2>
|
||
<div class="sub" style="margin-bottom:10px">Email notifications for work-package assignments, and self-service password resets. <strong>Off by default</strong> — turn this on only once SMTP is configured. The SMTP <strong>password</strong> is read from the <code>SMTP_PASSWORD</code> environment variable and is never stored here.</div>
|
||
<div id="settings-box" class="note">Loading…</div>
|
||
<div id="notif-box" class="note" style="margin-top:14px"></div>
|
||
</div>
|
||
|
||
<!-- ALL FEEDBACK / COMMENTS -->
|
||
<div class="card">
|
||
<h2>All feedback & comments</h2>
|
||
<div class="sub" style="margin-bottom:10px">Every comment submitted across the suite — who wrote it, what they said, and where they were (page & step) when they commented.</div>
|
||
<div class="row">
|
||
<button onclick="loadComments()">Refresh comments</button>
|
||
<select id="cmt-filter" onchange="renderComments()"><option value="">All sources</option></select>
|
||
<input id="cmt-search" placeholder="Search text / author…" oninput="renderComments()" style="flex:1;min-width:160px;padding:8px 10px;font:inherit;font-size:13px;border:1px solid var(--border-strong);border-radius:0;">
|
||
</div>
|
||
<div id="comments-admin" class="note" style="margin-top:12px">Click refresh to load.</div>
|
||
</div>
|
||
|
||
<!-- ACTIVITY LOG (AUDIT TRAIL) -->
|
||
<div class="card">
|
||
<h2>Activity log</h2>
|
||
<div class="sub" style="margin-bottom:10px">Who changed what, and when — across projects, SOPs, work packages, and user accounts. Stored server-side in the shared database.</div>
|
||
<div class="row">
|
||
<button onclick="loadAudit()">Refresh</button>
|
||
<select id="audit-type" onchange="renderAudit()">
|
||
<option value="">All types</option>
|
||
<option value="wp">Work packages</option>
|
||
<option value="sop">SOPs</option>
|
||
<option value="project">Projects</option>
|
||
<option value="user">User accounts</option>
|
||
</select>
|
||
<input id="audit-search" placeholder="Search actor / action / item…" oninput="renderAudit()" style="flex:1;min-width:160px;padding:8px 10px;font:inherit;font-size:13px;border:1px solid var(--border-strong);border-radius:0;">
|
||
</div>
|
||
<div id="audit-admin" class="note" style="margin-top:12px">Click refresh to load.</div>
|
||
</div>
|
||
|
||
<!-- USAGE LOGS -->
|
||
<div class="card">
|
||
<h2>Usage logs</h2>
|
||
<div class="sub" style="margin-bottom:10px">Engagement recorded by the suite — sessions, step views, and actions. Note: stored locally per browser, so this reflects activity on <strong>this</strong> machine.</div>
|
||
<div class="row">
|
||
<button onclick="loadUsage()">Refresh</button>
|
||
<button onclick="downloadUsage()">Download JSON</button>
|
||
</div>
|
||
<div id="usage-admin" class="note" style="margin-top:12px">Click refresh to load.</div>
|
||
</div>
|
||
|
||
<!-- DB SNAPSHOT -->
|
||
<div class="card">
|
||
<h2>Database snapshot</h2>
|
||
<div class="row"><button onclick="snapshot()">Refresh counts</button></div>
|
||
<div id="snapshot-out" class="note">Click refresh to read row counts from SQL via the API.</div>
|
||
</div>
|
||
|
||
<!-- SMOKE TEST -->
|
||
<div class="card">
|
||
<h2>End-to-end smoke test</h2>
|
||
<div class="sub" style="margin-bottom:8px">Creates a throwaway project, exercises the issue gate / status / metrics / comments, then deletes it (cascade). Mirrors <code>server/smoketest.py</code>.</div>
|
||
<div class="row"><button class="primary" onclick="runSmokeTest()">Run smoke test</button></div>
|
||
<pre class="out" id="smoke-out">Ready.</pre>
|
||
</div>
|
||
|
||
<!-- DEMO DATA -->
|
||
<div class="card">
|
||
<h2>Demo data</h2>
|
||
<div class="sub" style="margin-bottom:8px">Seed a realistic <code>DEMO</code> project (SOP + a spread of Work Packages) into SQL, or remove all <code>DEMO-</code>/<code>SMOKE-</code> projects.</div>
|
||
<div class="row">
|
||
<button class="primary" onclick="seedDemo()">Seed demo project</button>
|
||
<button class="danger" onclick="cleanDemo()">Clean DEMO / SMOKE projects</button>
|
||
</div>
|
||
<pre class="out" id="demo-out">Ready.</pre>
|
||
<div class="note">Note: the seeded <strong>project</strong> appears in the home picker; its SOP/WPs live in SQL but won't render in the Creator/Dashboard until the front end is wired to the API (Phase 2).</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="admin.js"></script>
|
||
<script src="wp-chrome.js"></script>
|
||
</body>
|
||
</html>
|