Add seed_demo.py loadable demo project + document both test scripts

server/seed_demo.py seeds a realistic DEMO project (complete SOP + a spread of
Work Packages: issued, gated, multi-discipline master with split instances,
overdue, over-threshold draft) via the API. --clean removes it. DEPLOYMENT.md
documents both smoketest.py and seed_demo.py, including the localStorage caveat
(seeded project shows in the UI picker; seeded SOP/WPs are SQL-only until Phase 2).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

DEPLOYMENT.md

@@ -1,81 +1,232 @@
 # Deployment
 
-The Work Package Suite has two parts:
+Audience: the IT admin standing this up inside the firewall. This covers the
+**SQL-backed deployment** — NGINX serving the static front end and a Python API
+backed by **PostgreSQL**.
 
-- a **static front end** (plain HTML/CSS/JS — no build step), and
-- a **Python API** (FastAPI) backed by **PostgreSQL**, which stores the project
-  SOPs, Work Packages, and comments so they are shared across users instead of
-  living in each person's browser.
+The repo already contains everything needed to run it as a Docker stack:
+`Dockerfile`, `docker-compose.yml`, the `nginx/` config, the front end in
+`html/`, and the API in `server/`. The detailed container reference (endpoints,
+password rotation, day-to-day commands) lives in
+[`server/README.md`](server/README.md) — this doc is the start-to-finish guide.
 
 ```
-browser → NGINX ──serves──> static site (index.html, …)
-                └─proxy /api/─> Python API (uvicorn/gunicorn :8000) → PostgreSQL
+                         [ your TLS reverse proxy / traefik ]   ← HTTPS terminates here
+                                        │  (external "proxy" network)
+                                   ┌────▼────┐   internal network   ┌──────────┐   ┌────────────┐
+   browser ───────────────────────│  nginx  │ ───── /api/ ───────> │   api    │ → │  postgres  │
+                                   │ (html/) │                      │ FastAPI  │   │   (db)     │
+                                   └─────────┘                      └──────────┘   └────────────┘
 ```
 
 Everything runs inside your firewall; the app makes **no outbound internet
-calls** (the logo and scripts are local and the old Google-Fonts dependency was
-removed).
+calls** (logo and scripts are local).
 
-## 1. Front end (NGINX)
+> **Architecture note:** all static files live under **`html/`** and are *baked
+> into the nginx image* at build time (not bind-mounted). So after any front-end
+> change you rebuild the `webserver` image (see *Updating* below). The API image
+> is built from the root `Dockerfile`.
 
-Copy the project files to a web root and serve them over HTTPS. The provided
-[`nginx-wp-suite.conf`](nginx-wp-suite.conf) serves the static files and proxies
-`/api/` to the Python API. Set `server_name`, the `ssl_certificate` paths, and
-`root`, then `sudo nginx -t && sudo systemctl reload nginx`.
+---
 
-Serving over real HTTP(S) (not `file://`) also makes the embedded Work Package
-Creator (`<iframe>`) and any browser-side caching behave reliably.
+## 1. Prerequisites
 
-## 2. API + database
+- A Linux host with **Docker** and **Docker Compose v2** (`docker compose …`).
+- An external Docker network named `proxy` that your TLS-terminating reverse
+  proxy also sits on (the compose file marks it `external: true`):
+  ```bash
+  docker network create proxy
+  ```
+  If you don't run a separate reverse proxy, you can instead publish the nginx
+  container's port 80 directly (see the note in step 4) and terminate TLS there.
+- The repository checked out on the host.
 
-Full setup — PostgreSQL, the systemd service, and the endpoint reference — is in
-[`server/README.md`](server/README.md). In short:
+## 2. Create the database credentials (`.env`)
 
-1. Create the `wpsuite` Postgres database/user.
-2. `pip install -r server/requirements.txt` into a venv.
-3. Set `DATABASE_URL` and run the API as a systemd service on `127.0.0.1:8000`.
-4. Tables are created automatically on first start.
+Create a file named `.env` in the **project root** (same folder as
+`docker-compose.yml`). It is git-ignored and must never be committed.
 
-Interactive API docs are at `/api/docs` once it's running.
+```bash
+# .env  — project root
+POSTGRES_DB=wpsuite
+POSTGRES_USER=wpsuite
+POSTGRES_PASSWORD=<strong-random-password>
 
-## 3. Comments / feedback
-
-Every feedback surface (home *Leave Feedback*, SOP *Step Comments*, WP *Comments*)
-posts to `/api/feedback`, which the API stores in the `comments` table. The
-**Export / Import** buttons remain as an offline fallback — a reviewer can export
-a JSON file and someone can import/merge it — but with the API running, comments
-are collected centrally with no manual steps.
-
-> The earlier Power Automate route is **no longer needed** — comments go straight
-> to Postgres. If you still want a Power App view, point a Power App at the
-> Postgres `comments` table via the on-prem data gateway, or have a flow read the
-> table; no change to this app is required.
-
-### Comment payload shape
-
-```json
-{
-  "app": "Work Package Suite",
-  "page": "/work-package-suite.html",
-  "submittedAt": "2026-06-15T18:20:00.000Z",
-  "type": "sop_step_comment",
-  "name": "J. Park",
-  "text": "Consider adding a fiber WP type",
-  "step": 4
-}
+# Must match the POSTGRES_* values above. Host is the compose service name "db".
+DATABASE_URL=postgresql+psycopg://wpsuite:<strong-random-password>@db:5432/wpsuite
 ```
 
-`type` is one of `home_feedback`, `sop_step_comment`, or `wp_review_comment`. The
-API maps `name`/`author` → the comment author and keeps any extra fields in the
-row's `extra` JSON column.
+Generate a strong password with `openssl rand -base64 32`.
+
+These are the only credentials in the system: the `db` container initialises
+Postgres from `POSTGRES_*`, and the `api` container connects with the matching
+`DATABASE_URL`. Neither value appears in the compose file or in git.
+
+## 3. Point your reverse proxy at the nginx container
+
+The nginx container listens on port **80** on the `proxy` network and expects
+TLS to be terminated upstream (by your reverse proxy / traefik). Route your
+chosen hostname (e.g. `wp-suite.company.local`) to the `nginx_webserver`
+container on that network. The container already proxies `/api/` to the `api`
+service internally — no extra app config needed.
+
+## 4. Bring it up
+
+From the project root:
+
+```bash
+docker compose up -d --build      # builds the api + nginx images, starts all three containers
+docker compose ps                 # confirm nginx_webserver, wp_api, wp_db are running/healthy
+docker compose logs -f api        # watch the API start (Ctrl-C to stop following)
+```
+
+The database schema is **created automatically** on first API start — no manual
+`CREATE TABLE`. The Postgres data lives in the named volume `pgdata` and
+survives `docker compose down` (only `down -v` deletes it).
+
+> No separate reverse proxy? Publish nginx directly by adding a `ports:` mapping
+> to the `webserver` service (e.g. `"8080:80"`) and terminate TLS at whatever
+> sits in front of it. The internal `api`/`db` containers should **never** be
+> published.
+
+## 5. Verify
+
+```bash
+# API liveness (from the host, through the proxy hostname)
+curl https://wp-suite.company.local/api/health        # → {"ok": true}
+
+# Interactive API docs
+#   https://wp-suite.company.local/api/docs
+```
+
+Then load the site in a browser: the home page should prompt to **select or
+create a project**. Create one, complete an SOP, and confirm a row appears:
+
+```bash
+docker compose exec db psql -U wpsuite -d wpsuite -c "select id, name from projects;"
+```
+
+### Automated smoke test
+
+`server/smoketest.py` exercises the whole stack end-to-end (health → project →
+SOP → Work Package → the AWP issue gate → status → metrics → comments → cascade
+cleanup). Stdlib only — no pip/jq.
+
+```bash
+# Through the proxy (use --insecure for a self-signed internal cert):
+python3 server/smoketest.py https://wp-suite.company.local --insecure
+
+# Or from inside the api container (hits FastAPI directly):
+docker compose exec api python /app/server/smoketest.py http://localhost:8000
+
+# Add --keep to leave a demo project in the DB so you can open it in the UI.
+```
+
+Exit code 0 and "ALL PASS" means the API, the Python logic, and SQL are all
+working. It cleans up after itself (the test project and its SOP/WPs are
+deleted via cascade); a single tagged test comment remains (there's no comment
+delete endpoint).
+
+### Loadable demo project
+
+`server/seed_demo.py` populates a realistic **DEMO** project (a complete SOP plus
+a spread of Work Packages: issued, gated, a multi-discipline master with split
+instances, an overdue one, an over-threshold draft) so there's data to look at.
+
+```bash
+python3 server/seed_demo.py https://wp-suite.company.local --insecure
+python3 server/seed_demo.py https://wp-suite.company.local --clean   # remove it later
+```
+
+> **What shows where:** the DEMO **project** is API/SQL-backed, so it appears in
+> the home-page project picker right away (this is the visible proof that the
+> projects → SQL path works end-to-end). The DEMO **SOP and Work Packages** are
+> written to SQL too, but the current front end still reads SOPs/WPs from the
+> browser, so they won't render in the Creator/Dashboard until the Phase 2
+> wiring. Inspect them at the SQL layer with `smoketest.py` or:
+> ```bash
+> docker compose exec db psql -U wpsuite -d wpsuite \
+>   -c "select number, subject, status from work_packages order by number;"
+> ```
+
+---
+
+## What is stored in SQL today
+
+Be aware of the current persistence split — the API + Postgres are fully
+deployed, and:
+
+| Data | Stored in PostgreSQL today? |
+|------|------------------------------|
+| **Projects** | **Yes** — the front end is API-first (`/api/projects`), falling back to the browser only if the API is unreachable. |
+| **Comments / feedback** | **Yes** — every feedback surface posts to `/api/feedback`. |
+| **SOPs** | Endpoints exist (`/api/sops`); the front end still keeps the SOP in the browser (namespaced per project). Wiring it to the API is the remaining **Phase 2** step. |
+| **Work Packages** | Same — `/api/wps` (+ issue/status/metrics) exist and are ready; the creator still saves to the browser per project. |
+
+So a fresh deployment gives you **shared, server-stored projects and comments
+immediately**. Moving SOPs and Work Packages off the browser and onto the API
+(so they're shared across users too) is a front-end change only — the database
+and endpoints are already in place.
 
 ## Data model (PostgreSQL)
 
 | Table | Holds | Key columns |
 |-------|-------|-------------|
-| `sops` | project SOP baselines | `name`, `number`, `complete`, `data` (full SOP JSON) |
-| `work_packages` | individual IWPs | `sop_id`, `number`, `subject`, `type`, `status`, `data` (full WP JSON) |
-| `comments` | feedback from any page | `source`, `sop_id`, `wp_id`, `step`, `author`, `text` |
+| `projects` | top-level construction projects | `name`, `number`, `client`, `division`, `site`, `sample`, `data` |
+| `sops` | project SOP baselines | `project_id` → projects, `name`, `number`, `complete`, `data` (full SOP JSON) |
+| `work_packages` | individual IWPs | `project_id` → projects, `sop_id` → sops, `parent_id` (split instances), `number`, `subject`, `type`, `status`, `issued_at`, `data` (full WP JSON) |
+| `comments` | feedback from any page | `source`, `sop_id`, `wp_id`, `step`, `author`, `text`, `extra` |
 
-The complete client document is stored verbatim in each row's `data` column;
-frequently-listed fields are promoted to real columns for filtering.
+The complete client document is stored verbatim in each row's `data` JSON
+column; frequently-listed fields are promoted to real columns for filtering.
+
+### Endpoints (summary)
+
+Projects `GET/POST /api/projects`, `GET/DELETE /api/projects/{id}` ·
+SOPs `GET/POST /api/sops`, `GET /api/sops/latest`, `GET/DELETE /api/sops/{id}` ·
+Work Packages `GET/POST /api/wps`, `GET/DELETE /api/wps/{id}`,
+`POST /api/wps/{id}/issue`, `POST /api/wps/{id}/status`, `GET /api/wps/metrics` ·
+Comments `POST /api/comments` (and `/api/feedback`), `GET /api/comments`.
+List/latest/metrics accept a `project_id` (and `sop_id`) filter. Full reference
+and request shapes: `/api/docs` and [`server/README.md`](server/README.md).
+
+---
+
+## Updating after a change
+
+```bash
+git pull
+docker compose up -d --build webserver   # front-end change (html/) — rebuild the baked image
+docker compose up -d --build api         # backend change (server/)
+```
+
+## Backups & retention
+
+The whole dataset is in the `pgdata` volume — back it up on a schedule:
+
+```bash
+# Backup (run from project root)
+docker compose exec -T db pg_dump -U wpsuite wpsuite > backup-$(date +%F).sql
+
+# Restore
+docker compose exec -T db psql -U wpsuite -d wpsuite < backup-YYYY-MM-DD.sql
+```
+
+## Schema migrations (important)
+
+Tables are auto-created on API startup (`Base.metadata.create_all`). This
+creates **missing tables**, but it does **not** alter existing ones. The
+multi-project work added the `projects` table and new columns
+(`sops.project_id`, `work_packages.project_id` / `parent_id` / `issued_at`):
+
+- On a **fresh** database these appear automatically — nothing to do.
+- On a database that **already has data** from an older schema, add the new
+  columns with a migration (introduce **Alembic**) or apply them manually with
+  `ALTER TABLE` before deploying — don't rely on `create_all` for column changes.
+
+## Local trial without Postgres
+
+For a quick local look, the API falls back to a SQLite file when `DATABASE_URL`
+is unset (`sqlite:///./wpsuite.db`) — see [`server/README.md`](server/README.md)
+§ *Local dev*. The front end alone can also be served statically from `html/`
+(it falls back to browser storage when the API isn't reachable).

html/help.js

@@ -0,0 +1,80 @@
+/* Shared Help + tooltip module for the Work Package Suite.
+   Included by the home page, the suite, and the embedded creator. It injects:
+     - tooltip styles for the .help-tip (ⓘ) component and [data-tip] hovers
+     - a Help modal (workflow + key concepts) opened via window.openHelp()
+   Add a "❔ Help" button anywhere with onclick="openHelp()". */
+(function (global) {
+  'use strict';
+
+  var css = `
+  .help-tip{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
+    margin-left:5px; border-radius:50%; background:#5a6675; color:#fff; font-size:10px; font-weight:700;
+    font-family:ui-sans-serif,system-ui,sans-serif; cursor:help; vertical-align:middle; position:relative; }
+  .help-tip::after{ content:attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
+    background:#1a2230; color:#fff; padding:7px 10px; border-radius:6px; font-size:12px; font-weight:400;
+    line-height:1.4; white-space:normal; width:max-content; max-width:260px; text-align:left; z-index:9999;
+    opacity:0; pointer-events:none; transition:opacity .12s; box-shadow:0 4px 14px rgba(20,30,50,.22); }
+  .help-tip::before{ content:''; position:absolute; bottom:130%; left:50%; transform:translate(-50%,95%);
+    border:5px solid transparent; border-top-color:#1a2230; opacity:0; transition:opacity .12s; z-index:9999; }
+  .help-tip:hover::after, .help-tip:hover::before, .help-tip:focus::after, .help-tip:focus::before{ opacity:1; }
+
+  .ui-help-overlay{ position:fixed; inset:0; background:rgba(20,30,50,.5); display:none; align-items:flex-start;
+    justify-content:center; z-index:10000; padding:5vh 16px; overflow:auto; }
+  .ui-help-overlay.open{ display:flex; }
+  .ui-help-modal{ background:#fff; color:#1a2230; max-width:680px; width:100%; border-radius:10px;
+    box-shadow:0 12px 40px rgba(20,30,50,.3); font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; }
+  .ui-help-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
+    border-bottom:1px solid #e3e6ec; font-size:16px; }
+  .ui-help-head button{ background:none; border:none; font-size:18px; cursor:pointer; color:#5a6675; line-height:1; }
+  .ui-help-body{ padding:18px 22px; font-size:13.5px; line-height:1.6; }
+  .ui-help-body h4{ margin:18px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:#2563d6; }
+  .ui-help-body h4:first-child{ margin-top:0; }
+  .ui-help-body ol, .ui-help-body ul{ margin:0 0 6px; padding-left:20px; }
+  .ui-help-body li{ margin-bottom:5px; }
+  .ui-help-body code{ background:#f0f2f5; padding:1px 5px; border-radius:4px; font-size:12px; }
+  `;
+  var style = document.createElement('style');
+  style.textContent = css;
+  (document.head || document.documentElement).appendChild(style);
+
+  var HELP_HTML = `
+    <h4>How the suite works</h4>
+    <ol>
+      <li><strong>Pick or create a Project</strong> on the home page — projects are stored centrally and each keeps its own SOP and Work Packages.</li>
+      <li><strong>SOP Configuration</strong> — set the project baseline (team, sign-offs, WP types, governance &amp; sizing, quality, sequence, constraints, sources). Every Work Package inherits these defaults.</li>
+      <li><strong>Work Package Creation</strong> — author individual IWPs against the SOP. Use <strong>New</strong> for a blank one or <strong>Duplicate</strong> to copy an existing one.</li>
+      <li><strong>Dashboard</strong> — track status, hours, and what's gating each package across the project.</li>
+    </ol>
+
+    <h4>Key concepts</h4>
+    <ul>
+      <li><strong>Constraints &amp; release readiness:</strong> a package can't move to <em>Issued</em> until every constraint is <em>Cleared</em> or <em>N/A</em>. If a constraint reopens after release, the package drops to <em>Issue (Hold)</em>.</li>
+      <li><strong>Disciplines &amp; Split:</strong> a package can carry more than one discipline (e.g. Mechanical + Electrical + Tech), each with its own scope section and status. <strong>Split by Discipline</strong> breaks it into instances — <code>WP01A</code>, <code>WP01B</code>, <code>WP01C</code> — each tied to the master.</li>
+      <li><strong>WP size:</strong> the SOP sets a typical size band, which sets a max-hours <em>split threshold</em>. The creator warns when a package's estimated hours exceed it so it can be broken down.</li>
+      <li><strong>Material by discipline:</strong> on a multi-discipline package each material line can be tagged to a discipline; splitting routes each instance only its own materials.</li>
+    </ul>
+
+    <h4>Tips</h4>
+    <ul>
+      <li><strong>Load Sample</strong> is context-aware — it loads the sample SOP on the SOP tab and an example Work Package on the WP tab.</li>
+      <li>Data is kept <strong>per project</strong>; switch projects from the home page.</li>
+      <li>Hover the <span class="help-tip" data-tip="Like this one — hover any ⓘ for a hint.">i</span> icons for inline hints.</li>
+    </ul>`;
+
+  function buildModal() {
+    if (document.getElementById('ui-help-overlay')) return;
+    var overlay = document.createElement('div');
+    overlay.className = 'ui-help-overlay';
+    overlay.id = 'ui-help-overlay';
+    overlay.innerHTML = '<div class="ui-help-modal" role="dialog" aria-modal="true" aria-label="Help">' +
+      '<div class="ui-help-head"><strong>❔ Help — Work Package Suite</strong>' +
+      '<button type="button" onclick="closeHelp()" aria-label="Close help">✕</button></div>' +
+      '<div class="ui-help-body">' + HELP_HTML + '</div></div>';
+    overlay.addEventListener('click', function (e) { if (e.target === overlay) closeHelp(); });
+    document.body.appendChild(overlay);
+  }
+
+  global.openHelp = function () { buildModal(); document.getElementById('ui-help-overlay').classList.add('open'); };
+  global.closeHelp = function () { var o = document.getElementById('ui-help-overlay'); if (o) o.classList.remove('open'); };
+  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') global.closeHelp(); });
+})(window);

html/index.html

@@ -386,6 +386,7 @@
       <nav class="header-nav">
         <a href="#overview">Overview</a>
         <a href="#comments">Feedback</a>
+        <a href="#" onclick="openHelp();return false;">Help</a>
       </nav>
     </div>
   </header>
@@ -475,6 +476,7 @@
 
   <script src="feedback-config.js"></script>
   <script src="project-data.js"></script>
+  <script src="help.js"></script>
   <script>
     // ── PROJECT SELECTION ─────────────────────────────────────────────────────
     const esc = ProjectData.esc;
@@ -662,9 +664,7 @@
       if (window.postFeedback) window.postFeedback({ type: 'home_feedback', ...comment });
 
       document.getElementById('comment-text').value = '';
-      document.getElementById('commenter-name').value = '';
       loadComments();
-      alert('Thank you! Feedback submitted.');
     }
 
     function exportFeedback() {

html/work-package-suite-app.js

@@ -477,18 +477,45 @@ function removeRole(i){
   renderOptionalRoles();
 }
 
+// Seed the standard 10 once; after that, render reflects state.constraints
+// (checkbox = whether each standard one is active) and never clobbers customs.
+let _constraintsSeeded = false;
 function renderStandardConstraints(){
   const container = document.getElementById('standard-constraints');
+  if(!_constraintsSeeded){
+    if(!state.constraints || !state.constraints.length){
+      state.constraints = STANDARD_10_CONSTRAINTS.map(c=>({...c}));
+    }
+    _constraintsSeeded = true;
+  }
+  const active = name => state.constraints.some(c=>c.name===name);
   container.innerHTML = STANDARD_10_CONSTRAINTS.map(c=>`
     <div style="display:flex; align-items:start; gap:0.75rem; padding:0.75rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; margin-bottom:0.5rem;">
-      <input type="checkbox" id="const_${c.name}" checked onchange="toggleConstraint('${c.name}')" style="width:18px; height:18px; cursor:pointer; margin-top:0.2rem;">
+      <input type="checkbox" id="const_${c.name}" ${active(c.name)?'checked':''} onchange="toggleConstraint('${c.name}')" style="width:18px; height:18px; cursor:pointer; margin-top:0.2rem;">
       <div style="flex:1;">
         <label for="const_${c.name}" style="margin:0; font-weight:600; display:block; cursor:pointer;">${c.name}</label>
         <div style="font-size:12px; color:var(--text-dim); margin-top:0.25rem;">${c.description}</div>
       </div>
     </div>
   `).join('');
-  state.constraints = STANDARD_10_CONSTRAINTS.map(c=>({...c}));
+  renderCustomConstraints();
+}
+
+// Render the custom (non-standard) constraints into their own list with remove buttons.
+function renderCustomConstraints(){
+  const el = document.getElementById('custom-constraints-list'); if(!el) return;
+  const stdNames = STANDARD_10_CONSTRAINTS.map(c=>c.name);
+  const customs = state.constraints.filter(c=>!stdNames.includes(c.name));
+  el.innerHTML = customs.length ? customs.map(c=>`
+    <div style="display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.6rem 0.75rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; margin-bottom:0.5rem;">
+      <strong>${escAttr(c.name)}</strong>
+      <button onclick="removeCustomConstraint('${c.name.replace(/'/g,"\\'")}')" title="Remove" style="background:var(--danger); color:#fff; border:none; border-radius:4px; width:28px; height:28px; cursor:pointer; font-weight:600;">✕</button>
+    </div>`).join('') : `<div style="font-size:12px; color:var(--text-dim);">No custom constraints added yet.</div>`;
+}
+
+function removeCustomConstraint(name){
+  state.constraints = state.constraints.filter(c=>c.name!==name);
+  renderCustomConstraints();
 }
 
 function toggleConstraint(name){
@@ -514,13 +541,24 @@ function closeConstraintModal(){
 }
 
 function addCustomConstraint(name){
-  if(!state.constraints.find(c=>c.name===name)){
+  if(name && !state.constraints.find(c=>c.name===name)){
     state.constraints.push({name,description:''});
   }
   closeConstraintModal();
   renderStandardConstraints();
 }
 
+// Free-text custom constraint from the modal's input.
+function addCustomConstraintText(){
+  const inp = document.getElementById('custom-constraint-input');
+  const name = (inp && inp.value || '').trim();
+  if(!name){ if(inp) inp.focus(); return; }
+  if(state.constraints.find(c=>c.name===name)){ alert('That constraint is already in the list.'); return; }
+  state.constraints.push({name, description:''});
+  if(inp) inp.value='';
+  renderStandardConstraints();
+}
+
 const DEFAULT_SEQUENCE = ['Layout','Conduit Install','Tray Install','Wire Pull','Device Install','Termination','QC Inspection','Commissioning'];
 
 let seqDragIndex = null;
@@ -600,20 +638,30 @@ const DEFAULT_SOURCES = [
 function escAttr(v){ return String(v==null?'':v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
 function renderSources(){
   const container = document.getElementById('sources-list');
-  if(!state.sources.length) state.sources = DEFAULT_SOURCES.map(s=>({label:s.label, system:'', notes:'', link:'', ph:s.ph}));
-  container.innerHTML = state.sources.map((s,i)=>`
-    <div style="display:grid; grid-template-columns:150px 150px 250px 150px 30px; gap:1rem; align-items:center; padding:1rem; background:var(--bg); border-radius:6px; margin-bottom:0.5rem; border:1px solid var(--border);">
-      <input type="text" value="${escAttr(s.label)}" placeholder="Label" onchange="state.sources[${i}].label=this.value" style="padding:0.5rem; font-size:12px; border:1px solid var(--border); border-radius:4px;">
-      <input type="text" value="${escAttr(s.system)}" placeholder="${escAttr(s.ph||'System of record')}" onchange="state.sources[${i}].system=this.value" style="padding:0.5rem; font-size:12px; border:1px solid var(--border); border-radius:4px;">
-      <input type="text" value="${escAttr(s.link)}" placeholder="Paste SharePoint 'Copy Link' URL" onchange="state.sources[${i}].link=this.value" style="padding:0.5rem; font-size:12px; border:1px solid var(--border); border-radius:4px;">
-      <input type="text" value="${escAttr(s.notes)}" placeholder="Notes" onchange="state.sources[${i}].notes=this.value" style="padding:0.5rem; font-size:12px; border:1px solid var(--border); border-radius:4px;">
-      <button style="background:var(--danger); color:white; padding:0.25rem; width:30px; height:30px; border:none; border-radius:4px; cursor:pointer; font-weight:600;" onclick="state.sources.splice(${i},1); renderSources()">✕</button>
-    </div>
-  `).join('');
+  if(!state.sources.length) state.sources = DEFAULT_SOURCES.map(s=>({label:s.label, system:'', notes:'', link:'', ph:s.ph, preset:true}));
+  const grid = "display:grid; grid-template-columns:170px 170px 1fr 160px 30px; gap:1rem; align-items:center;";
+  const inStyle = "padding:0.5rem; font-size:12px; border:1px solid var(--border); border-radius:4px;";
+  const header = `<div style="${grid} padding:0 1rem 0.4rem; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-dim);">
+      <div>Data Type</div><div>Location / Platform</div><div>URL</div><div>Notes</div><div></div>
+    </div>`;
+  container.innerHTML = header + state.sources.map((s,i)=>{
+    // Preset data types are fixed labels; custom rows (Add Source) get an editable name.
+    const dataType = s.preset
+      ? `<div style="font-weight:600; font-size:13px;">${escAttr(s.label)}</div>`
+      : `<input type="text" value="${escAttr(s.label)}" placeholder="Custom data type" onchange="state.sources[${i}].label=this.value" style="${inStyle} font-weight:600;">`;
+    return `<div style="${grid} padding:1rem; background:var(--bg); border-radius:6px; margin-bottom:0.5rem; border:1px solid var(--border);">
+      ${dataType}
+      <input type="text" value="${escAttr(s.system)}" placeholder="${escAttr(s.ph||'Procore / Bluebeam / SharePoint…')}" onchange="state.sources[${i}].system=this.value" style="${inStyle}">
+      <input type="text" value="${escAttr(s.link)}" placeholder="Paste the 'Copy Link' URL" onchange="state.sources[${i}].link=this.value" style="${inStyle}">
+      <input type="text" value="${escAttr(s.notes)}" placeholder="Notes" onchange="state.sources[${i}].notes=this.value" style="${inStyle}">
+      <button style="background:var(--danger); color:white; padding:0.25rem; width:30px; height:30px; border:none; border-radius:4px; cursor:pointer; font-weight:600;" onclick="state.sources.splice(${i},1); renderSources()" title="Remove">✕</button>
+    </div>`;
+  }).join('');
 }
 
 function addSource(){
-  state.sources.push({label:'',system:'',notes:'',link:''});
+  // Added rows are custom — the user types their own data type here.
+  state.sources.push({label:'', system:'', notes:'', link:'', preset:false});
   renderSources();
 }
 
@@ -823,9 +871,7 @@ function submitComment(){
   if(window.postFeedback) window.postFeedback({type:'sop_step_comment', ...comment});
 
   document.getElementById('comment-text').value = '';
-  document.getElementById('commenter-name').value = '';
   loadStepComments();
-  alert('✓ Comment submitted!');
 }
 
 function exportComments(){

html/work-package-suite.html

@@ -25,6 +25,7 @@
         <button id="load-sample-btn" class="header-button" onclick="loadSampleData()" title="Load sample data for the current tool (SOP or Work Package)">⭐ Load Sample</button>
         <button class="header-button" onclick="toggleComments()" title="View and add comments for the current step">💬 Step Comments</button>
         <button class="header-button" onclick="showAnalytics()" title="Review usage logs for this tool">📊 Usage Logs</button>
+        <button class="header-button" onclick="openHelp()" title="How the suite works + key concepts">❔ Help</button>
         <span class="step-counter"><span id="current-step">1</span> / <span id="total-steps">10</span></span>
       </div>
     </div>
@@ -171,14 +172,23 @@
                 <small>Use ## for counter, [Sector] [TYPE] as variables</small>
               </div>
               <div class="field">
-                <label>Issuance Strategy</label>
-                <select id="gov_issuance" multiple size="3">
+                <label>Issuance Strategy<span class="help-tip" data-tip="How Work Packages are grouped and released on this project. Pick one or more — most projects combine 'By Sector / Area' with 'By Phase / Sequence'.">i</span></label>
+                <select id="gov_issuance" multiple size="4">
                   <option selected>By Sector / Area</option>
                   <option>By Discipline</option>
                   <option>By Phase / Sequence</option>
                   <option>By Resource Availability</option>
                 </select>
-                <small>Hold Ctrl to select multiple</small>
+                <small>Hold Ctrl (Cmd on Mac) to select multiple.</small>
+                <div class="notice" style="margin-top:0.6rem; font-size:12px;">
+                  <strong>Examples:</strong>
+                  <ul style="margin:0.35rem 0 0; padding-left:1.1rem;">
+                    <li><strong>By Sector / Area</strong> — one package per physical area, e.g. <em>all work in Sector 1P, Level 2 chase</em>.</li>
+                    <li><strong>By Discipline</strong> — separate packages per trade, e.g. <em>Electrical wire-pull</em> vs <em>Mechanical install</em>.</li>
+                    <li><strong>By Phase / Sequence</strong> — follow the build order, e.g. <em>rough-in → wire pull → terminations</em>.</li>
+                    <li><strong>By Resource Availability</strong> — size to a crew/equipment window, e.g. <em>one boom-lift crew's week</em>.</li>
+                  </ul>
+                </div>
               </div>
             </div>
 
@@ -191,7 +201,7 @@
                 <small>Comma-separated. These appear as scope sections and instance suffixes in the Creator.</small>
               </div>
               <div class="field">
-                <label>Discipline strategy *</label>
+                <label>Discipline strategy *<span class="help-tip" data-tip="Decides whether a package can carry several disciplines (scope split per discipline) or one each. 'Let the planner choose' allows building a big multi-discipline package and splitting it later.">i</span></label>
                 <select id="gov_discmode">
                   <option value="choice">Let the planner choose per package (recommended)</option>
                   <option value="single">One discipline per package (many small packages)</option>
@@ -216,7 +226,7 @@
                 <small>Sets the split threshold automatically; choose Custom to enter your own.</small>
               </div>
               <div class="field">
-                <label>Split threshold — max labor hours</label>
+                <label>Split threshold — max labor hours<span class="help-tip" data-tip="The Work Package Creator flags any package whose estimated hours exceed this so the planner can break it down. Auto-set by the size band; override if needed.">i</span></label>
                 <input type="number" id="gov_size_hours_max" min="0" step="1" placeholder="e.g., 80">
                 <small>Auto-set from the size above (editable). The Creator flags packages over this so they can be split.</small>
               </div>
@@ -373,13 +383,19 @@
         <h3>Add Custom Constraint</h3>
         <button class="modal-close" onclick="closeConstraintModal()">✕</button>
       </div>
-      <div id="constraint-library" style="max-height: 400px; overflow-y: auto; margin: 1rem 0;"></div>
+      <div style="display:flex; gap:0.5rem; margin:1rem 0 0.5rem;">
+        <input type="text" id="custom-constraint-input" placeholder="Type a custom constraint name…" style="flex:1; padding:0.55rem 0.65rem; border:1px solid var(--border); border-radius:4px;" onkeydown="if(event.key==='Enter'){addCustomConstraintText();event.preventDefault();}">
+        <button class="add-btn" onclick="addCustomConstraintText()">Add</button>
+      </div>
+      <div style="font-size:12px; color:var(--text-dim); margin-bottom:0.5rem;">…or pick from the library:</div>
+      <div id="constraint-library" style="max-height: 320px; overflow-y: auto; margin: 0 0 1rem;"></div>
       <button class="nav-btn" onclick="closeConstraintModal()">Done</button>
     </div>
   </div>
 
   <script src="feedback-config.js"></script>
   <script src="project-data.js"></script>
+  <script src="help.js"></script>
   <script src="work-package-suite-app.js"></script>
 </body>
 </html>

html/wp-creation-app.js

@@ -529,6 +529,20 @@ function setConstraint(i,val){
   if(val==='open' && STATUS_ORDER.indexOf(getRadio('status'))>=ISSUED_IDX){
     prevStatus=getRadio('status'); holdContext={index:i, before};
     openHoldModal(pkgConstraints[i].name, true);
+    return;
+  }
+  // Clearing the LAST open constraint makes the package release-ready — offer to
+  // issue it and scroll up to the status control so the change is visible.
+  if(before==='open' && val!=='open' && readiness().open===0){
+    const st=getRadio('status');
+    if(STATUS_ORDER.indexOf(st) < ISSUED_IDX){
+      if(confirm('All constraints are cleared — this Work Package is release-ready.\n\nMark it as Issued now?')){
+        setRadio('status','Issued'); prevStatus='Issued'; updateReleaseBanner();
+        track('status_change',{status:'Issued',via:'constraint_clear'});
+      }
+      const sg=document.getElementById('status-group');
+      if(sg) sg.scrollIntoView({behavior:'smooth', block:'center'});
+    }
   }
 }
 function readiness(){ const open=pkgConstraints.filter(c=>c.status==='open').length; return {open, total:pkgConstraints.length, cleared:pkgConstraints.filter(c=>c.status==='cleared').length, ready:open===0}; }
@@ -539,6 +553,7 @@ function updateReleaseBanner(){
   else if(r.ready){ cls='rb-ready'; txt=`✓ Release-ready — all ${r.total} constraints cleared or N/A.`; }
   else { cls='rb-notready'; txt=`⚠ Not release-ready — ${r.open} of ${r.total} constraint${r.open===1?'':'s'} still open.`; }
   b.innerHTML=`<div class="rb-inner ${cls}">${txt}</div>`;
+  updateStickyStatus();
 }
 function onStatusChange(target){
   const idx=STATUS_ORDER.indexOf(target);
@@ -761,8 +776,54 @@ function printPackage(){
 
 // ── VIEWS ────────────────────────────────────────────────────────────────────
 function hideDashboard(){ const dv=document.getElementById('dashboard-view'); if(dv) dv.style.display='none'; }
-function showOutput(){ hideDashboard(); document.querySelectorAll('.main > .card, .main > .nav-row').forEach(e=>e.style.display='none'); document.getElementById('pkg-output').style.display=''; renderSavedList(); currentView='Package View'; window.scrollTo({top:0,behavior:'smooth'}); }
-function showForm(){ hideDashboard(); document.querySelectorAll('.main > .card').forEach(e=>e.style.display=''); document.querySelector('.main > .nav-row').style.display='flex'; document.getElementById('pkg-output').style.display='none'; document.getElementById('saved-card').style.display = savedPackages.length?'':'none'; buildDisciplinePicker(); renderScope(); currentView='Work Package Form'; window.scrollTo({top:0,behavior:'smooth'}); }
+function showOutput(){ hideDashboard(); setFormChrome(false); document.querySelectorAll('.main > .card, .main > .nav-row').forEach(e=>e.style.display='none'); document.getElementById('pkg-output').style.display=''; renderSavedList(); currentView='Package View'; window.scrollTo({top:0,behavior:'smooth'}); }
+function showForm(){ hideDashboard(); document.querySelectorAll('.main > .card').forEach(e=>e.style.display=''); document.querySelector('.main > .nav-row').style.display='flex'; document.getElementById('pkg-output').style.display='none'; document.getElementById('saved-card').style.display = savedPackages.length?'':'none'; buildDisciplinePicker(); renderScope(); setFormChrome(true); currentView='Work Package Form'; window.scrollTo({top:0,behavior:'smooth'}); }
+
+// Sticky save bar + section-nav chrome (shown only on the editable form view).
+function setFormChrome(on){
+  const nav=document.getElementById('section-nav'), save=document.getElementById('sticky-save');
+  if(nav) nav.style.display = on ? '' : 'none';
+  if(save) save.style.display = on ? 'flex' : 'none';
+  document.body.classList.toggle('has-sticky-save', !!on);
+  if(on){ buildSectionNav(); updateStickyStatus(); makeCollapsible(); }
+}
+// Make each form card collapsible by clicking its heading (idempotent).
+function makeCollapsible(){
+  document.querySelectorAll('.main > .card').forEach(card=>{
+    if(card.id==='saved-card') return;
+    const head=card.querySelector('.section-header, .sub-heading');
+    if(!head || head.dataset.collapsible) return;
+    head.dataset.collapsible='1';
+    head.style.cursor='pointer';
+    const chev=document.createElement('span'); chev.className='collapse-chev'; chev.textContent='▾';
+    head.insertBefore(chev, head.firstChild);
+    head.addEventListener('click', e=>{
+      if(['INPUT','SELECT','TEXTAREA','BUTTON','A'].includes(e.target.tagName) || e.target.classList.contains('help-tip')) return;
+      const collapsed=card.classList.toggle('collapsed');
+      chev.textContent = collapsed ? '▸' : '▾';
+    });
+  });
+}
+function buildSectionNav(){
+  const nav=document.getElementById('section-nav'); if(!nav) return;
+  const chips=[];
+  document.querySelectorAll('.main > .card').forEach((card,i)=>{
+    if(card.id==='saved-card' || card.style.display==='none') return;
+    const h=card.querySelector('.section-title, .sub-heading'); if(!h) return;
+    const clone=h.cloneNode(true); clone.querySelectorAll('.help-tip').forEach(x=>x.remove());
+    const label=clone.textContent.trim().replace(/\s+/g,' '); if(!label) return;
+    if(!card.id) card.id='sec-'+i;
+    chips.push(`<span class="sec-chip" onclick="document.getElementById('${card.id}').scrollIntoView({behavior:'smooth',block:'start'})">${esc(label)}</span>`);
+  });
+  nav.innerHTML=chips.join('');
+}
+function updateStickyStatus(){
+  const el=document.getElementById('sticky-status'); if(!el) return;
+  const r=readiness(); const st=getRadio('status');
+  if(st==='Issue'){ el.className='sticky-status ss-hold'; el.textContent=`⛔ On hold — ${r.open} constraint${r.open===1?'':'s'} reopened`; }
+  else if(r.ready){ el.className='sticky-status ss-ready'; el.textContent=`✓ Release-ready — all ${r.total} constraints cleared`; }
+  else { el.className='sticky-status ss-notready'; el.textContent=`⚠ ${r.open} of ${r.total} constraint${r.open===1?'':'s'} open`; }
+}
 
 // ── SAVED PACKAGES ───────────────────────────────────────────────────────────
 const STORE_KEY='wp_iwp_v1';
@@ -780,7 +841,7 @@ function renderSavedList(){
     const tag = p.split?' <span class="badge badge-O">master</span>':(p.instanceOf?` <span class="badge badge-Y">${esc(p.instanceLabel||'instance')}</span>`:'');
     const disc = (p.disciplines&&p.disciplines.length)?`<div style="font-size:10px;color:var(--text-dim)">${esc(p.disciplines.join(', '))}</div>`:'';
     return `<tr><td class="row-label">${esc(p.number||'—')}${tag}${disc}</td><td>${esc(p.type||'')}</td><td>${esc(p.subject||'')}</td>
-      <td>${esc(p.status||'')}</td><td>${ready}</td>
+      <td>${statusPill(p.status)}</td><td>${ready}</td>
       <td class="center"><button class="link-btn" onclick="editPackage(${i})">edit</button> <button class="link-btn" onclick="viewPackage(${i})">view</button> <button class="row-del" onclick="deletePackage(${i})">✕</button></td></tr>`;
   }).join('');
 }
@@ -898,13 +959,26 @@ const WPData = {
     p.status=status; p.updatedAt=new Date().toISOString(); saveStore(); return true; },                          // → POST /api/wps/{id}/status
 };
 
-let dashFilter={status:'',discipline:'',q:''};
+let dashFilter={status:'',discipline:'',q:'',flag:''};
+function dashToggleFlag(f){
+  if(f==='all'){ dashFilter={status:'',discipline:'',q:'',flag:''}; }
+  else { dashFilter.flag = dashFilter.flag===f ? '' : f; }
+  renderDashboard();
+}
+function dashSetStatus(s){ dashFilter.status = dashFilter.status===s ? '' : s; renderDashboard(); }
+// Consistent colored status pill, reused by the dashboard board and the saved list.
+function statusPill(s){
+  const map={'Draft':'badge-NA','Scheduled':'badge-O','Issued':'badge-Y','In Progress':'badge-O','QC':'badge-O','Closed':'badge-Y','Issue':'badge-N'};
+  const label = s==='Issue' ? 'Issue (Hold)' : (s||'—');
+  return `<span class="badge ${map[s]||'badge-NA'}">${esc(label)}</span>`;
+}
 function wpOpenConstraints(p){ return (p.constraints||[]).filter(c=>c.status==='open'); }
 function isOverdue(p){ return !!(p.due && p.status!=='Closed' && p.due < todayStr()); }
 // Masters are roll-ups of their instances — exclude them from counts so work isn't double-counted.
 function countableWPs(){ return WPData.list().filter(p=>!p.split); }
 
 function showDashboard(){
+  setFormChrome(false);
   document.querySelectorAll('.main > .card, .main > .nav-row').forEach(e=>e.style.display='none');
   document.getElementById('pkg-output').style.display='none';
   const dv=document.getElementById('dashboard-view'); if(dv) dv.style.display='';
@@ -923,19 +997,25 @@ function renderDashboard(){
     if(isOverdue(p)) overdue++;
     (p.disciplines&&p.disciplines.length?p.disciplines:['(none)']).forEach(d=>byDisc[d]=(byDisc[d]||0)+1);
   });
-  const card=(label,val,cls)=>`<div class="dash-metric ${cls||''}"><div class="dm-val">${val}</div><div class="dm-label">${esc(label)}</div></div>`;
+  // Clickable metric cards filter the board (flag-based); a card with no flag is static.
+  const card=(label,val,cls,flag)=>{
+    const active = flag && dashFilter.flag===flag ? ' dm-active' : '';
+    const attr = flag ? ` onclick="dashToggleFlag('${flag}')" title="Click to filter the board"` : '';
+    return `<div class="dash-metric ${cls||''}${active}"${attr}><div class="dm-val">${val}</div><div class="dm-label">${esc(label)}</div></div>`;
+  };
   let h=`<div class="dash-metrics">
-    ${card('Total WPs', all.length)}
-    ${card('Release-ready', ready, ready?'dm-green':'')}
-    ${card('On hold', hold, hold?'dm-red':'')}
-    ${card('Overdue', overdue, overdue?'dm-red':'')}
+    ${card('Total WPs', all.length, '', 'all')}
+    ${card('Release-ready', ready, ready?'dm-green':'', 'ready')}
+    ${card('On hold', hold, hold?'dm-red':'', 'onhold')}
+    ${card('Overdue', overdue, overdue?'dm-red':'', 'overdue')}
     ${card('Est. hrs', Math.round(estH))}
     ${card('Actual hrs', Math.round(actH))}
   </div>`;
 
-  // status + discipline breakdown chips
-  const statusChips=STATUS_ORDER.filter(s=>byStatus[s]).map(s=>`<span class="dash-chip">${esc(s)}: <b>${byStatus[s]}</b></span>`).join('')
-    + (byStatus['Issue']?`<span class="dash-chip chip-red">On Hold: <b>${byStatus['Issue']}</b></span>`:'');
+  // status + discipline breakdown chips (status chips also filter the board)
+  const statusChip=(label,count,cls,status)=>`<span class="dash-chip${cls?' '+cls:''}${dashFilter.status===status?' chip-active':''}" onclick="dashSetStatus('${status}')" title="Click to filter the board">${esc(label)}: <b>${count}</b></span>`;
+  const statusChips=STATUS_ORDER.filter(s=>byStatus[s]).map(s=>statusChip(s,byStatus[s],'',s)).join('')
+    + (byStatus['Issue']?statusChip('On Hold',byStatus['Issue'],'chip-red','Issue'):'');
   const discChips=Object.keys(byDisc).map(d=>`<span class="dash-chip">${esc(d)}: <b>${byDisc[d]}</b></span>`).join('')||'<span class="dash-chip">—</span>';
   h+=`<div class="dash-breakdown"><div><div class="dash-bd-title">By status</div>${statusChips||'—'}</div>
       <div><div class="dash-bd-title">By discipline</div>${discChips}</div></div>`;
@@ -965,6 +1045,9 @@ function renderDashboard(){
     if(dashFilter.status && p.status!==dashFilter.status) return false;
     if(dashFilter.discipline && !((p.disciplines||[]).includes(dashFilter.discipline))) return false;
     if(q && !((p.number||'')+' '+(p.subject||'')).toLowerCase().includes(q)) return false;
+    if(dashFilter.flag==='ready' && !(!p.split && wpOpenConstraints(p).length===0 && p.status!=='Closed' && p.status!=='Issue')) return false;
+    if(dashFilter.flag==='onhold' && p.status!=='Issue') return false;
+    if(dashFilter.flag==='overdue' && !isOverdue(p)) return false;
     return true;
   });
   h+=`<div class="dash-panel"><div class="dash-panel-title">Work Packages (${rows.length})</div>
@@ -980,7 +1063,7 @@ function renderDashboard(){
     h+=`<tr><td class="row-label">${esc(p.number||'—')}${p.instanceOf?` <span class="badge badge-Y">${esc(p.instanceLabel||'')}</span>`:''}</td>
       <td>${esc(p.subject||'')}</td><td>${esc(p.type||'')}</td>
       <td style="font-size:11px">${esc((p.disciplines||[]).join(', '))||ns()}</td>
-      <td>${esc(p.status||'')}</td><td>${gates}</td><td>${due}</td><td>${cell(p.hours)}</td>
+      <td>${statusPill(p.status)}</td><td>${gates}</td><td>${due}</td><td>${cell(p.hours)}</td>
       <td class="center" style="white-space:nowrap">${issueBtn} <button class="link-btn" onclick="dashView(${ix})">view</button> <button class="link-btn" onclick="dashEdit(${ix})">edit</button></td></tr>`;
   });
   h+=`</tbody></table></div>`;

html/wp-creation-index.html

@@ -38,6 +38,9 @@
 <!-- RELEASE READINESS BANNER -->
 <div class="release-banner" id="release-banner"></div>
 
+<!-- SECTION NAV (jump links, built from the form cards) -->
+<div class="section-nav-bar" id="section-nav"></div>
+
 <div class="main">
 
   <!-- GENERAL INFORMATION -->
@@ -45,7 +48,7 @@
     <div class="section-header"><div class="section-title">General Information</div>
       <div class="section-desc">Parameters in <span style="color:var(--accent)">blue</span> are inherited from the project SOP. Fill the rest for this package.</div></div>
     <div class="field-grid">
-      <div class="field"><label>WP Number <span class="auto-tag">auto</span></label><input type="text" id="wp_number" readonly class="locked-field" placeholder="auto-built"><div class="field-hint sop-hint" id="wp_number_hint"></div></div>
+      <div class="field"><label>WP Number <span class="auto-tag">auto</span><span class="help-tip" data-tip="Built automatically from the SOP number format — the scope fields below (e.g. Sector) plus the WP type and a sequence counter.">i</span></label><input type="text" id="wp_number" readonly class="locked-field" placeholder="auto-built"><div class="field-hint sop-hint" id="wp_number_hint"></div></div>
       <div class="field"><label>Status</label>
         <div class="radio-group" id="status-group" style="margin-bottom:0">
           <label class="radio-pill" data-val="Draft"><input type="radio" name="status"><span class="dot"></span>Draft</label>
@@ -88,14 +91,14 @@
 
   <!-- DISCIPLINES -->
   <div class="card" id="discipline-card" style="display:none">
-    <div class="sub-heading">Disciplines</div>
+    <div class="sub-heading">Disciplines<span class="help-tip" data-tip="Pick every discipline this package covers. Choosing two or more turns Scope into per-discipline sections and enables Split by Discipline.">i</span></div>
     <div class="notice" id="discipline-note"></div>
     <div class="disc-picker" id="discipline-picker"></div>
   </div>
 
   <!-- SCOPE & WORK -->
   <div class="card">
-    <div class="sub-heading">Scope & Work</div>
+    <div class="sub-heading">Scope & Work<span class="help-tip" data-tip="Ordered steps the crew performs. With multiple disciplines selected, each gets its own scope section and status. Use Split by Discipline to break a large package into WP01A / WP01B / WP01C instances.">i</span></div>
     <div id="flat-scope">
       <div class="field"><label>Description of Work (sequenced steps)</label>
         <div class="notice">Enter the work as ordered steps — added in sequence, the way the crew performs them.</div>
@@ -113,7 +116,7 @@
 
   <!-- MATERIAL LIST -->
   <div class="card">
-    <div class="sub-heading">Material List</div>
+    <div class="sub-heading">Material List<span class="help-tip" data-tip="Bill of materials — feeds kitting. On a multi-discipline package each line can be tagged to a discipline so a split routes each instance only its own materials. Import from CSV is supported.">i</span></div>
     <div class="notice">Structured bill of materials. Feeds kitting and the delivery forecast. Unit is from the Acumatica unit list.</div>
     <div class="table-wrap"><table><thead><tr><th style="width:90px">Qty</th><th style="width:120px">Unit</th><th>Description</th><th id="mat-disc-th" style="width:140px;display:none">Discipline</th><th style="width:44px"></th></tr></thead><tbody id="material-body"></tbody></table></div>
     <div class="material-actions">
@@ -157,7 +160,7 @@
 
   <!-- CONSTRAINTS / RELEASE READINESS -->
   <div class="card" id="constraint-card">
-    <div class="sub-heading">Constraints — Release Readiness</div>
+    <div class="sub-heading">Constraints — Release Readiness<span class="help-tip" data-tip="A package can't be Issued until every constraint is Cleared or N/A. If one reopens after release, the package drops to Issue (Hold).">i</span></div>
     <div class="notice">Per AWP, a package is not released to the field until every constraint is <strong>Cleared</strong> or <strong>N/A</strong>. If a constraint reopens after release, status drops to <strong>Issue (Hold)</strong>.</div>
     <div class="table-wrap"><table><thead><tr><th>Constraint</th><th style="width:230px">Status</th><th>Comment</th></tr></thead><tbody id="constraint-body"></tbody></table></div>
   </div>
@@ -276,8 +279,18 @@
       <input type="file" id="cmt-import" accept="application/json" style="display:none" onchange="importComments(event)"></div></div>
 </aside>
 
+<!-- STICKY SAVE BAR (always-visible save + release status) -->
+<div class="sticky-save" id="sticky-save" style="display:none">
+  <span class="sticky-status" id="sticky-status"></span>
+  <div class="sticky-actions">
+    <button class="btn btn-ghost" onclick="savePackage(false)">Save Draft</button>
+    <button class="btn btn-generate" onclick="savePackage(true)">⚡ Save &amp; View</button>
+  </div>
+</div>
+
 <script src="feedback-config.js"></script>
 <script src="project-data.js"></script>
+<script src="help.js"></script>
 <script src="wp-creation-app.js"></script>
 </body>
 </html>

html/wp-creation-styles.css

@@ -564,6 +564,31 @@
   .so-date { font-size:13px; font-variant-numeric:tabular-nums; }
   .so-ovr { margin-left:8px; font-size:11px; }
 
+  /* Collapsible form sections */
+  .collapse-chev { display:inline-block; width:1em; margin-right:7px; color:var(--text-muted); font-size:11px; user-select:none; }
+  .card.collapsed > :not(.section-header):not(.sub-heading) { display:none !important; }
+  .card.collapsed .section-desc { display:none; }
+
+  /* Section nav (jump chips) */
+  .section-nav-bar{ position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:6px;
+    padding:8px 12px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
+    border-bottom:1px solid var(--border); }
+  .section-nav-bar:empty{ display:none; }
+  .sec-chip{ font-size:12px; font-weight:600; color:var(--text-muted); background:var(--surface2);
+    border:1px solid var(--border); border-radius:14px; padding:4px 11px; cursor:pointer; white-space:nowrap; }
+  .sec-chip:hover{ border-color:var(--accent); color:var(--accent); }
+
+  /* Sticky save bar */
+  .sticky-save{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center;
+    justify-content:space-between; gap:14px; padding:10px 20px; background:#fff;
+    border-top:1px solid var(--border-strong); box-shadow:0 -2px 10px rgba(20,30,50,.08); }
+  .sticky-save .sticky-status{ font-size:13px; font-weight:600; }
+  .sticky-save .sticky-actions{ display:flex; gap:10px; }
+  .ss-ready{ color:var(--accent-green); }
+  .ss-notready{ color:var(--accent-amber); }
+  .ss-hold{ color:var(--red); }
+  body.has-sticky-save .main{ padding-bottom:74px; }
+
   /* Disciplines + per-discipline scope */
   .disc-picker { display:flex; flex-wrap:wrap; gap:8px; }
   .disc-pill { display:flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--border-strong);
@@ -586,6 +611,11 @@
   .dash-metric .dm-label { font-size:11px; color:var(--text-muted); margin-top:6px; text-transform:uppercase; letter-spacing:.03em; }
   .dash-metric.dm-green .dm-val { color:var(--accent-green); }
   .dash-metric.dm-red .dm-val { color:var(--red); }
+  .dash-metric[onclick] { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
+  .dash-metric[onclick]:hover { border-color:var(--accent); }
+  .dash-metric.dm-active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
+  .dash-chip[onclick] { cursor:pointer; }
+  .dash-chip.chip-active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
   .dash-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
   .dash-bd-title { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
   .dash-chip { display:inline-block; font-size:12px; background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:3px 10px; margin:0 6px 6px 0; }

server/seed_demo.py

@@ -0,0 +1,175 @@
+#!/usr/bin/env python3
+"""Seed a realistic DEMO project into the Work Package Suite database via the API.
+
+Creates one project, a complete SOP, and a spread of Work Packages that exercise
+the features and dashboard: an issued package, a gated (open-constraint) package,
+a multi-discipline master with its split instances (A/B/C), an overdue package,
+and an over-threshold draft. Use it to prove the SQL + Python layer end-to-end
+and to have data to inspect.
+
+USAGE
+  python3 server/seed_demo.py https://wp-suite.company.local --insecure
+  docker compose exec api python /app/server/seed_demo.py http://localhost:8000
+  python3 server/seed_demo.py https://wp-suite.company.local --clean   # remove DEMO-* projects
+
+IMPORTANT — what shows where:
+  * The DEMO **project** is API/SQL-backed, so it appears in the home-page
+    project picker immediately (proves the projects → SQL path in the UI).
+  * The DEMO **SOP and Work Packages** are written to SQL too, but the current
+    front end still reads SOPs/WPs from the browser (localStorage), so they will
+    NOT render in the WP Creator / Dashboard yet — that's the pending Phase 2
+    wiring. Verify them at the SQL/API layer instead:
+        python3 server/smoketest.py <url>            # automated end-to-end check
+        docker compose exec db psql -U wpsuite -d wpsuite \
+          -c "select number,subject,status from work_packages order by number;"
+"""
+import argparse
+import json
+import ssl
+import sys
+import urllib.error
+import urllib.request
+
+BASE = ""
+CTX = None
+DEMO_NUMBER = "DEMO-001"   # project number prefix used to find/clean demo data
+
+
+def call(method, path, body=None):
+    url = BASE + path
+    data = json.dumps(body).encode() if body is not None else None
+    req = urllib.request.Request(url, data=data, method=method,
+                                 headers={"Content-Type": "application/json", "Accept": "application/json"})
+    try:
+        with urllib.request.urlopen(req, context=CTX, timeout=20) as r:
+            raw = r.read().decode(); status = r.status
+    except urllib.error.HTTPError as e:
+        raw = e.read().decode(); status = e.code
+    try:
+        parsed = json.loads(raw) if raw else None
+    except ValueError:
+        parsed = raw
+    return status, parsed
+
+
+def constraints(open_names=()):
+    base = ["Safety & Permitting", "Quality Control / Inspection", "IFC Drawings & Specs",
+            "Schedule", "Materials (on site, bagged & tagged)", "Work Access & Laydown"]
+    return [{"name": n, "status": ("open" if n in open_names else "cleared"),
+             "comment": ("awaiting delivery" if n in open_names else "")} for n in base]
+
+
+def main():
+    global BASE, CTX
+    ap = argparse.ArgumentParser(description="Seed a demo project into the Work Package Suite")
+    ap.add_argument("base_url", nargs="?", default="http://localhost:8000",
+                    help="Site root, no /api (default: http://localhost:8000)")
+    ap.add_argument("--insecure", action="store_true", help="skip TLS verification")
+    ap.add_argument("--clean", action="store_true", help="delete existing DEMO-* projects and exit")
+    args = ap.parse_args()
+    BASE = args.base_url.rstrip("/")
+    if args.insecure:
+        CTX = ssl.create_default_context(); CTX.check_hostname = False; CTX.verify_mode = ssl.CERT_NONE
+
+    # health gate
+    try:
+        st, _ = call("GET", "/api/health")
+    except urllib.error.URLError as e:
+        print(f"ABORT: cannot reach {BASE}/api/health — {e}"); return 1
+    if st != 200:
+        print(f"ABORT: /api/health returned {st}"); return 1
+
+    # --clean: remove any prior demo projects (cascade removes their SOP + WPs)
+    st, projects = call("GET", "/api/projects")
+    demos = [p for p in (projects or []) if str(p.get("number", "")).startswith("DEMO-")]
+    if args.clean:
+        for p in demos:
+            call("DELETE", f"/api/projects/{p['id']}")
+        print(f"Removed {len(demos)} DEMO project(s).")
+        return 0
+    if demos:
+        print(f"Note: {len(demos)} DEMO project(s) already exist. Run with --clean first to avoid duplicates.\n")
+
+    # 1) Project
+    st, proj = call("POST", "/api/projects", {
+        "name": "DEMO — Micron INC (test data)", "number": DEMO_NUMBER,
+        "client": "Micron Technology, Inc.", "division": "Semiconductor",
+        "site": "Boise, ID — Fab", "created_by": "seed_demo"})
+    pid = proj["id"]
+    print(f"Project: {proj['name']}  ({pid})")
+
+    # 2) SOP (complete)
+    st, sop = call("POST", "/api/sops", {
+        "project_id": pid, "name": "DEMO SOP", "number": DEMO_NUMBER, "complete": True,
+        "created_by": "seed_demo",
+        "data": {"governance": {"woFormat": "WP##-[Sector]-[TYPE]",
+                                "disciplines": ["Mechanical", "Electrical", "Tech"],
+                                "discMode": "choice", "instanceSuffix": "letter",
+                                "woSize": "Standard — 3–5 days (≈40–80 hrs)", "sizeHoursMax": "80"}}})
+    sid = sop["id"]
+    print(f"SOP: complete ({sid})")
+
+    # 3) Work packages
+    def wp(number, subject, typ, status, data, parent_id=None):
+        body = {"project_id": pid, "sop_id": sid, "number": number, "subject": subject,
+                "type": typ, "status": status, "created_by": "seed_demo", "data": data}
+        if parent_id:
+            body["parent_id"] = parent_id
+        st, w = call("POST", "/api/wps", body)
+        print(f"  WP {number:<16} {status:<12} {subject}")
+        return w
+
+    # a) issued, all clear
+    wp("WP01-1P-CONDUIT", "1P horn/strobe conduit", "Conduit Install", "Issued",
+       {"disciplines": ["Electrical"], "hours": "40", "actualHrs": "",
+        "constraints": constraints(), "due": "2026-06-30"})
+    # b) gated — one open constraint, still Scheduled
+    wp("WP02-1P-WIRE", "1P wire pull", "Wire Pull", "Scheduled",
+       {"disciplines": ["Electrical"], "hours": "60", "actualHrs": "",
+        "constraints": constraints(open_names=["Materials (on site, bagged & tagged)"]), "due": "2026-07-04"})
+    # c) multi-discipline master + split instances (master excluded from metrics)
+    master_id = "wp_demo_master_chiller"
+    instances = [("WP03-CHILLER_Mech", "Mechanical", "A", "Mechanical Install", "In Progress"),
+                 ("WP03-CHILLER_Elec", "Electrical", "B", "Wire Pull", "Scheduled"),
+                 ("WP03-CHILLER_Tech", "Tech", "C", "Terminations", "Draft")]
+    child_ids = []
+    for num, disc, label, typ, status in instances:
+        cid = f"wp_demo_{label.lower()}"
+        child_ids.append(cid)
+        body = {"project_id": pid, "sop_id": sid, "parent_id": master_id, "id": cid,
+                "number": num, "subject": "Chiller skid — " + disc, "type": typ, "status": status,
+                "created_by": "seed_demo",
+                "data": {"disciplines": [disc], "instanceOf": master_id, "instanceLabel": label,
+                         "parentNumber": "WP03-CHILLER", "hours": "50", "actualHrs": "",
+                         "constraints": constraints(), "due": "2026-07-10"}}
+        call("POST", "/api/wps", body)
+        print(f"  WP {num:<16} {status:<12} (instance {label})")
+    wp("WP03-CHILLER", "Chiller skid (multi-discipline master)", "Mechanical Install", "Scheduled",
+       {"disciplines": ["Mechanical", "Electrical", "Tech"], "split": True, "children": child_ids,
+        "hours": "150", "constraints": constraints(), "due": "2026-07-10"})
+    call("POST", "/api/wps", {"project_id": pid, "sop_id": sid, "id": master_id,
+                              "number": "WP03-CHILLER", "subject": "Chiller skid (multi-discipline master)",
+                              "type": "Mechanical Install", "status": "Scheduled", "created_by": "seed_demo",
+                              "data": {"disciplines": ["Mechanical", "Electrical", "Tech"], "split": True,
+                                       "children": child_ids, "hours": "150", "constraints": constraints(),
+                                       "due": "2026-07-10"}})
+    # d) overdue, in progress
+    wp("WP04-2P-TERM", "2P terminations", "Terminations", "In Progress",
+       {"disciplines": ["Tech"], "hours": "30", "actualHrs": "20",
+        "constraints": constraints(), "due": "2026-06-10"})   # past today (2026-06-16) → overdue
+    # e) over-threshold draft (hours > 80)
+    wp("WP05-3P-PANEL", "3P panel install", "Panel Install", "Draft",
+       {"disciplines": ["Electrical"], "hours": "120", "actualHrs": "",
+        "constraints": constraints(open_names=["Schedule"]), "due": "2026-07-20"})
+
+    # metrics readback
+    st, m = call("GET", f"/api/wps/metrics?project_id={pid}")
+    print(f"\nMetrics (masters excluded): {m}")
+    print(f"\nDone. The DEMO project '{proj['name']}' now appears in the home-page picker.")
+    print("SOP/WPs are in SQL (see header note) — verify with smoketest.py or psql.")
+    print("Remove later with:  python3 server/seed_demo.py <url> --clean")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

server/smoketest.py

@@ -0,0 +1,196 @@
+#!/usr/bin/env python3
+"""End-to-end smoke test for the Work Package Suite API + PostgreSQL.
+
+Exercises the real HTTP endpoints the way the front end does, proving that
+NGINX → FastAPI → PostgreSQL all work and that the Python logic (the AWP
+release gate, metrics, cascade delete) behaves. Stdlib only — no pip, no jq.
+
+USAGE
+  # Against the deployed site (through the NGINX proxy):
+  python3 server/smoketest.py https://wp-suite.company.local
+
+  # Self-signed / internal TLS cert? skip verification:
+  python3 server/smoketest.py https://wp-suite.company.local --insecure
+
+  # From inside the api container (hits FastAPI directly):
+  docker compose exec api python /app/server/smoketest.py http://localhost:8000
+
+  # Leave the demo project in the database so you can open it in the UI:
+  python3 server/smoketest.py https://wp-suite.company.local --keep
+
+The base URL is the SITE root (no /api). Default: http://localhost:8000
+Exit code 0 = all checks passed, 1 = one or more failed.
+"""
+import argparse
+import json
+import ssl
+import sys
+import urllib.error
+import urllib.request
+
+# ── tiny colored reporter ─────────────────────────────────────────────────────
+_PASS, _FAIL = [], []
+def _c(s, code):  # color if a TTY
+    return f"\033[{code}m{s}\033[0m" if sys.stdout.isatty() else s
+def ok(msg):   _PASS.append(msg); print("  " + _c("PASS", "32") + "  " + msg)
+def bad(msg):  _FAIL.append(msg); print("  " + _c("FAIL", "31") + "  " + msg)
+def check(name, cond, detail=""):
+    (ok if cond else bad)(name + (f"  ({detail})" if detail and not cond else ""))
+    return cond
+
+BASE = ""
+CTX = None
+
+def call(method, path, body=None):
+    """Returns (status_code, parsed_body). Never raises on HTTP status."""
+    url = BASE + path
+    data = json.dumps(body).encode() if body is not None else None
+    req = urllib.request.Request(
+        url, data=data, method=method,
+        headers={"Content-Type": "application/json", "Accept": "application/json"},
+    )
+    try:
+        with urllib.request.urlopen(req, context=CTX, timeout=20) as r:
+            raw = r.read().decode(); status = r.status
+    except urllib.error.HTTPError as e:
+        raw = e.read().decode(); status = e.code
+    try:
+        parsed = json.loads(raw) if raw else None
+    except ValueError:
+        parsed = raw
+    return status, parsed
+
+
+def main():
+    global BASE, CTX
+    ap = argparse.ArgumentParser(description="Work Package Suite API smoke test")
+    ap.add_argument("base_url", nargs="?", default="http://localhost:8000",
+                    help="Site root, no /api (default: http://localhost:8000)")
+    ap.add_argument("--insecure", action="store_true", help="skip TLS verification")
+    ap.add_argument("--keep", action="store_true", help="keep the demo project (don't delete)")
+    args = ap.parse_args()
+    BASE = args.base_url.rstrip("/")
+    if args.insecure:
+        CTX = ssl.create_default_context(); CTX.check_hostname = False; CTX.verify_mode = ssl.CERT_NONE
+
+    print(f"\nWork Package Suite — API smoke test\nTarget: {BASE}\n")
+
+    project_id = None
+    try:
+        # 1) Health — API is up and reachable through the proxy.
+        try:
+            st, body = call("GET", "/api/health")
+        except urllib.error.URLError as e:
+            print(_c("\nABORT", "31") + f"  cannot reach {BASE}/api/health — {e}\n"
+                  "  Is the stack up (docker compose ps) and the URL correct?\n")
+            return 1
+        check("health endpoint returns ok", st == 200 and isinstance(body, dict) and body.get("ok") is True,
+              f"status={st} body={body}")
+
+        # 2) Create a project (writes to the projects table).
+        st, proj = call("POST", "/api/projects", {
+            "name": "ZZ Smoke Test Project", "number": "SMOKE-001",
+            "client": "Internal QA", "division": "Controls", "site": "Test Host",
+            "created_by": "smoketest",
+        })
+        project_id = proj.get("id") if isinstance(proj, dict) else None
+        check("create project", st == 200 and bool(project_id), f"status={st}")
+
+        # 3) Read it back + confirm it's in the list (SQL round-trip).
+        st, got = call("GET", f"/api/projects/{project_id}")
+        check("fetch project by id", st == 200 and got.get("number") == "SMOKE-001", f"status={st}")
+        st, lst = call("GET", "/api/projects")
+        check("project appears in list", st == 200 and any(p.get("id") == project_id for p in lst),
+              f"status={st} count={len(lst) if isinstance(lst, list) else '?'}")
+
+        # 4) Create a SOP linked to the project.
+        st, sop = call("POST", "/api/sops", {
+            "project_id": project_id, "name": "ZZ Smoke SOP", "number": "SMOKE-001",
+            "complete": True, "created_by": "smoketest",
+            "data": {"governance": {"woFormat": "WP##-[Sector]-[TYPE]",
+                                    "disciplines": ["Mechanical", "Electrical", "Tech"]}},
+        })
+        sop_id = sop.get("id") if isinstance(sop, dict) else None
+        check("create SOP linked to project", st == 200 and bool(sop_id) and sop.get("project_id") == project_id,
+              f"status={st}")
+        st, latest = call("GET", f"/api/sops/latest?project_id={project_id}")
+        check("latest SOP for project resolves", st == 200 and latest.get("id") == sop_id, f"status={st}")
+
+        # 5) Create a Work Package with one OPEN constraint (not release-ready).
+        st, wp = call("POST", "/api/wps", {
+            "project_id": project_id, "sop_id": sop_id,
+            "number": "WP01-SMOKE", "subject": "Smoke test package", "type": "Conduit Install",
+            "status": "Scheduled", "created_by": "smoketest",
+            "data": {"disciplines": ["Electrical"], "hours": "40", "actualHrs": "",
+                     "constraints": [{"name": "Materials", "status": "open", "comment": "awaiting delivery"},
+                                     {"name": "Safety & Permitting", "status": "cleared", "comment": ""}]},
+        })
+        wp_id = wp.get("id") if isinstance(wp, dict) else None
+        check("create work package", st == 200 and bool(wp_id), f"status={st}")
+
+        # 6) The AWP release gate: issuing with an open constraint must be REFUSED (409).
+        st, refused = call("POST", f"/api/wps/{wp_id}/issue")
+        check("issue is blocked while a constraint is open (409)", st == 409, f"status={st} body={refused}")
+
+        # 7) Clear the constraint (upsert), then issue must SUCCEED (200, status Issued).
+        call("POST", "/api/wps", {
+            "id": wp_id, "project_id": project_id, "sop_id": sop_id,
+            "number": "WP01-SMOKE", "subject": "Smoke test package", "type": "Conduit Install",
+            "status": "Scheduled",
+            "data": {"disciplines": ["Electrical"], "hours": "40", "actualHrs": "",
+                     "constraints": [{"name": "Materials", "status": "cleared", "comment": ""},
+                                     {"name": "Safety & Permitting", "status": "cleared", "comment": ""}]},
+        })
+        st, issued = call("POST", f"/api/wps/{wp_id}/issue")
+        check("issue succeeds once constraints clear", st == 200 and issued.get("status") == "Issued",
+              f"status={st}")
+        check("issued_at timestamp is set", isinstance(issued, dict) and bool(issued.get("issued_at")))
+
+        # 8) Status transition endpoint.
+        st, prog = call("POST", f"/api/wps/{wp_id}/status", {"status": "In Progress"})
+        check("status transition endpoint", st == 200 and prog.get("status") == "In Progress", f"status={st}")
+
+        # 9) Metrics aggregate for the project (Python aggregation over SQL rows).
+        st, m = call("GET", f"/api/wps/metrics?project_id={project_id}")
+        check("metrics endpoint aggregates", st == 200 and isinstance(m, dict) and m.get("total", 0) >= 1,
+              f"status={st} metrics={m}")
+
+        # 10) Comment / feedback write + read.
+        st, c = call("POST", "/api/feedback", {
+            "type": "wp_review_comment", "name": "smoketest", "wp_id": wp_id,
+            "text": "SMOKE TEST comment — safe to delete", "page": "/smoketest"})
+        check("post comment/feedback", st == 200 and isinstance(c, dict) and bool(c.get("id")), f"status={st}")
+        st, comments = call("GET", f"/api/comments?wp_id={wp_id}")
+        check("comment is queryable", st == 200 and any("SMOKE TEST" in (x.get("text") or "") for x in comments),
+              f"status={st}")
+
+        # 11) WPs filter by project.
+        st, wps = call("GET", f"/api/wps?project_id={project_id}")
+        check("list WPs by project", st == 200 and any(w.get("id") == wp_id for w in wps), f"status={st}")
+
+    finally:
+        # 12) Cleanup — deleting the project cascades to its SOPs and WPs (FK ON DELETE CASCADE).
+        if project_id and not args.keep:
+            st, _ = call("DELETE", f"/api/projects/{project_id}")
+            check("delete project (cascades SOP + WPs)", st == 200, f"status={st}")
+            st, after = call("GET", f"/api/wps?project_id={project_id}")
+            check("WPs removed by cascade", st == 200 and isinstance(after, list) and len(after) == 0,
+                  f"status={st} remaining={after}")
+        elif project_id and args.keep:
+            print(f"\n  --keep: left demo project {project_id} ('ZZ Smoke Test Project') in the database.")
+
+    # ── summary ────────────────────────────────────────────────────────────────
+    total = len(_PASS) + len(_FAIL)
+    print(f"\n{'-'*52}\n{len(_PASS)}/{total} checks passed.")
+    if _FAIL:
+        print(_c(f"FAILED ({len(_FAIL)}):", "31"))
+        for f in _FAIL:
+            print("  - " + f)
+        print("\nResult: " + _c("FAIL", "31") + "\n")
+        return 1
+    print("\nResult: " + _c("ALL PASS — API, Python logic, and SQL are working.", "32") + "\n")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())