Adds more bill status visibility to the dashboard

scraper/dashboard/static/app.js

@@ -60,7 +60,30 @@
         if (t) return "tag-match";
         if (l) return "leg-match";
         return "";
-    }
+     }
+
+    /* The bill's current legislative state — why it is in the queue at all
+       (API_CONTRACT §5 "upcoming" item 2: a closed/past bill shouldn't read as
+       a vague "pending"). Always shown; a closed bill is dimmed; possibly_closed
+       is flagged when the source can't confirm the state. */
+    function statusReasonHTML(ev) {
+        var st = ev.status;
+        var reason = ev.reason;
+        if (!st && !reason) return "";
+        var closed = st === "closed";
+        var label = closed ? "Closed" : "On file";
+        var cls = "chip status"
+             + (closed ? " closed" : " open")
+             + (ev.possibly_closed ? " pclosed" : "");
+        var why = reason ? esc(reason) : "On file";
+        var tail = ev.possibly_closed ? " (possibly closed)" : "";
+        return "<div class='row-reason'"
+             + (closed ? " data-closed='1'" : "") + ">"
+             + "<span class='" + cls + "'>" + esc(label) + "</span> "
+             + "<span class='row-reason-why'>" + why
+             + (tail ? " " + esc(tail) : "") + "</span>"
+             + "</div>";
+     }
 
     function rowHTML(ev, opts) {
         opts = opts || {};
@@ -78,9 +101,11 @@
                     (on ? 'on"' : '"') + ">" + esc(tg) + "</span>";
             }).join("");
         var marker = rel
-            ? '<span class="chip marker" title="Floated: relevant to you">'
-              + "Relevant to you</span>"
-            : "";
+             ? '<span class="chip marker" title="Floated: relevant to you">'
+                + "Relevant to you</span>"
+             : "";
+         // Legislative status / reason — always on, above the relevance toggle.
+        var statusBlock = statusReasonHTML(ev);
         var reasons = "";
         if (rel) {
             var parts = (ev.relevance.matched || []).map(function (x) {
@@ -98,11 +123,12 @@
              esc(ev.bill_id) + '">'
              + '<span class="num">' + chip(ev.chamber_origin) +
                    '<br>' + esc(ev.bill_number) + "</span>"
-             + '<div class="main"><span class="title">'
-                   + esc(ev.short_title || ev.bill_number) + "</span>"
-                   + "<div class='meta'>" + esc(meta) + "</div>"
-                   + "<a href='" + url + "' target='_blank'"
-                   + " rel='noopener'>View →</a> " + marker
+              + '<div class="main"><span class="title">'
+                    + esc(ev.short_title || ev.bill_number) + "</span>"
+                    + "<div class='meta'>" + esc(meta) + "</div>"
+                    + statusBlock
+                    + "<a href='" + url + "' target='_blank'"
+                    + " rel='noopener'>View →</a> " + marker
                    + tags
                    + reasons
                    + '</div>'

scraper/dashboard/static/style.css

@@ -169,6 +169,21 @@ button.chip-toggle { min-width: 120px; }
 .chip.sen { background: #f5eef9; color: var(--sen); border-color:#e2d2ea; }
 .chip.marker { background: var(--accent); color: #fff; border-color:
    var(--accent); }
+
+/* ---- legislative status / "why is this here" reason (always on) ---- */
+.row-reason {
+   margin: 4px 0; font-size: 12px; color: var(--muted);
+   display: flex; align-items: baseline; gap: 6px; }
+.chip.status { border-color: var(--border); }
+.chip.status.open { background: #eef3fb; color: var(--asm);
+   border-color: #cdd9ee; }
+.chip.status.closed { background: #f0f0f0; color: var(--warn);
+   border-color: #d8c9a8; }
+.chip.status.pclosed { font-style: italic; }
+.row-reason-why { color: var(--muted); }
+     /* a terminal/closed bill is dimmed so it doesn't read as an open upcoming */
+.row-reason[data-closed='1'] { opacity: .85; }
+.row-reason[data-closed='1'] .row-reason-why { color: var(--muted); }
 .tag { display: inline-block; font-size: 11px; color: var(--muted);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 0 6px; margin: 0 4px 0 0; }