instar 1.3.786 → 1.3.787

package/dashboard/index.html

@@ -527,6 +527,21 @@
       background: var(--bg);
     }
 
+    /* ── REQUIRED placement for every tab panel declared after </main> ──
+       Those panels are direct .app grid children. switchTab() hides the
+       sidebar too, so WITHOUT explicit grid placement the lone visible
+       panel auto-places into the 280px sidebar COLUMN — the "squished to
+       the side" bug (operator report 2026-07-08). Every after-main panel
+       MUST carry class="tab-panel" (or one of the container classes that
+       already sets grid-column: files/jobs/systems/features/dropzone, or
+       ph-root). Enforced structurally:
+       tests/unit/dashboard-panel-placement.test.ts fails on a bare panel. */
+    .tab-panel {
+      grid-column: 1 / -1;
+      min-width: 0;
+      background: var(--bg);
+    }
+
     .terminal-header {
       display: flex;
       align-items: center;
@@ -884,10 +899,10 @@
        maturation "you're here" marker. */
     .ph-root {
       --ph-accent: #4ade80;
-      /* These panels are declared after </main>, making them direct .app grid
-         children. switchTab() hides the sidebar too, so without explicit
-         placement the lone visible panel auto-places into the 280px sidebar
-         COLUMN — the "squashed to the side" bug. Span the full grid. */
+      /* Grid placement for after-main panels is now the shared .tab-panel
+         contract (see the .tab-panel rule + the placement floor test:
+         tests/unit/dashboard-panel-placement.test.ts). ph-root keeps its own
+         grid-column because it ALSO constrains width for prose readability. */
       grid-column: 1 / -1;
       max-width: 760px;
       width: 100%;
@@ -2990,7 +3005,7 @@
     </div>
 
     <!-- Integrated-Being Tab (Integrated-Being v1) -->
-    <div id="integratedBeingPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="integratedBeingPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Integrated-Being</h2>
         <div>
@@ -3111,7 +3126,7 @@
     <!-- Read-only: NO action buttons that mutate eligibility. All PR-authored -->
     <!-- content rendered via textContent, never innerHTML — XSS defense rule -->
     <!-- for the dashboard per spec §"Dashboard surface rules". -->
-    <div id="prPipelinePanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="prPipelinePanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">PR Pipeline</h2>
         <div>
@@ -3126,7 +3141,7 @@
     </div>
 
     <!-- Projects Tab — PROJECT-SCOPE-SPEC Phase 1.10 read-only view -->
-    <div id="projectsPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="projectsPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Projects</h2>
         <button onclick="loadProjects()" style="padding:6px 12px">Refresh</button>
@@ -3141,7 +3156,7 @@
     </div>
 
     <!-- Initiatives Tab — multi-phase long-running work -->
-    <div id="initiativesPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="initiativesPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Initiatives</h2>
         <div style="display:flex;gap:8px;align-items:center">
@@ -3172,7 +3187,7 @@
     </div>
 
     <!-- Commitments Tab (Open Promises) -->
-    <div id="secretsPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="secretsPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
         <h2 style="margin:0">Secrets</h2>
         <div style="display:flex;gap:8px">
@@ -3190,7 +3205,7 @@
       <div id="secretsList" style="display:flex;flex-direction:column;gap:12px"></div>
     </div>
 
-    <div id="commitmentsPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="commitmentsPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Commitments</h2>
         <button onclick="loadCommitments()" style="padding:6px 12px">Refresh</button>
@@ -3208,7 +3223,7 @@
     </div>
 
     <!-- Tokens Tab — read-only token-usage observability -->
-    <div id="tokensPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="tokensPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Tokens</h2>
         <button onclick="loadTokens()" style="padding:6px 12px">Refresh</button>
@@ -3244,7 +3259,7 @@
 
     <!-- Resource Usage tab — per-agent CPU + memory (ResourceLedger Phase B).
          Read-only observability; mirrors the Tokens tab. -->
-    <div id="resourcesPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="resourcesPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Resource Usage</h2>
         <button onclick="loadResources()" style="padding:6px 12px">Refresh</button>
@@ -3284,7 +3299,7 @@
          true-blocker. A true-blocker is "best current understanding — recheck after <date>",
          never "stop trying". Read-only here; data from GET /blockers. detectedText and all
          free-text are UNTRUSTED and HTML-escaped before render. 503 = feature off. -->
-    <div id="blockersPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="blockersPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Blockers</h2>
         <button onclick="loadBlockers()" style="padding:6px 12px">Refresh</button>
@@ -3303,7 +3318,7 @@
          Every LLM call the system makes on its own behalf: which component, which
          provider/model, whether it acted or no-op'd, was skipped, cost + latency.
          Read-only; data from /metrics/features. -->
-    <div id="llmActivityPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="llmActivityPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
         <h2 style="margin:0">LLM Activity</h2>
         <div style="display:flex;gap:8px;align-items:center">
@@ -3344,7 +3359,7 @@
          model it uses and its full ordered fallback tier list, with injection-safe /
          money-gated / critical-gate flags. Read-only display; data from
          /intelligence/routing/chains. No controls — the map only DISPLAYS the routing. -->
-    <div id="routingMapPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="routingMapPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
         <h2 style="margin:0">Routing Map</h2>
         <button onclick="loadRoutingMap()" style="padding:6px 12px">Refresh</button>
@@ -3379,7 +3394,7 @@
          READ + every metered paid-door key with its caps and honest not-live/$0 state.
          Read-only: data from /routing-spend/summary + /routing-spend/caps. No money controls
          (caps adjust, go-live, alerts are later, dark increments). -->
-    <div id="spendPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="spendPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
         <h2 style="margin:0">Spend</h2>
         <div style="display:flex;gap:8px;align-items:center">
@@ -3622,7 +3637,7 @@
       </section>
     </div>
 
-    <div id="evidenceTab" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="evidenceTab" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Evidence</h2>
         <div style="font-size:12px;color:var(--text-dim)">Per-entity evidence + reverse citations</div>
@@ -3681,7 +3696,7 @@
     </div>
 
     <!-- Threadline Tab — agent-to-agent conversations + Telegram bridge settings -->
-    <div id="threadlineTab" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="threadlineTab" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Threadline</h2>
         <button onclick="loadThreadlineBridgeConfig()" style="padding:6px 12px">Refresh</button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instar",
-  "version": "1.3.786",
+  "version": "1.3.787",
   "description": "Coherence infrastructure for self-evolving AI agents — on the Claude Code or Codex subscription you already have.",
   "type": "module",
   "main": "dist/index.js",

package/src/data/builtin-manifest.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./builtin-manifest.schema.json",
   "schemaVersion": 1,
-  "generatedAt": "2026-07-08T21:14:02.877Z",
-  "instarVersion": "1.3.786",
+  "generatedAt": "2026-07-09T03:23:07.095Z",
+  "instarVersion": "1.3.787",
   "entryCount": 202,
   "entries": {
     "hook:session-start": {

package/upgrades/1.3.787.md

@@ -0,0 +1,42 @@
+# Upgrade Guide — vNEXT
+
+<!-- assembled-by: assemble-next-md -->
+<!-- bump: patch -->
+
+## What Changed
+
+- **The "squished to the side" bug is fixed structurally.** Fourteen dashboard tab panels
+  (Routing Map, Spend, Tokens, LLM Activity, Integrated Being, PR Pipeline, Projects,
+  Initiatives, Secrets, Commitments, Resources, Blockers, Evidence, Threadline) are declared
+  after `</main>` and are therefore direct `.app` grid children; with the sidebar hidden they
+  auto-placed into the 280px sidebar COLUMN, rendering all content in a ~185px strip on a
+  1280px viewport (operator screenshots, topic 29723). A shared `.tab-panel` class
+  (`grid-column: 1 / -1; min-width: 0`) now places every one of them across the full content
+  area — one rule instead of fourteen inline copies. The pre-existing `.ph-root` tabs keep
+  their own placement + prose width.
+- **A placement floor makes the bug unrepeatable.** `tests/unit/dashboard-panel-placement.test.ts`
+  scans the after-main markup region and fails the build when a top-level panel lacks a
+  placement-carrying class (with an instructive message naming the panel and the fix), asserts
+  the `.tab-panel` rule keeps its grid span, and guards its own matcher with a population floor.
+  The old defense was a CSS comment on `.ph-root` — a wish; every panel added since repeated
+  the bug. This is the guarantee (Structure > Willpower).
+
+## What to Tell Your User
+
+The dashboard tabs that used to render squeezed into a narrow strip on the left of a desktop
+window — including the new Routing Map and Spend tabs — now use the full width of the window.
+Nothing to enable; it's just fixed everywhere once the release lands.
+
+## Summary of New Capabilities
+
+- None — this is a layout bug fix. (It also adds a build-time guard so a future dashboard tab
+  can't reintroduce the same squished layout.)
+
+## Evidence
+
+`tests/unit/dashboard-panel-placement.test.ts` — 4 cases: rule present + spans grid, every
+placement class actually declares grid-column, no bare after-main panel (negative control
+verified: stripping one panel's class fails naming exactly that panel), matcher-anchor guard
+(the slice skips CSS/JS mentions of `</main>`). Real-browser (headless Chromium) before/after
+screenshots at 1280×800: content strip ~260px before, full-width after; 390×844 rendering is
+byte-identical before vs after (placement-only change). All 106 dashboard-reading unit tests green.

package/upgrades/side-effects/dashboard-responsive-fix.md

@@ -0,0 +1,51 @@
+# Side-Effects Review — Dashboard responsive fix (.tab-panel placement + floor test)
+
+**Version / slug:** `dashboard-responsive-fix`
+**Date:** `2026-07-08`
+**Author:** `Instar Agent (echo)`
+**Second-pass reviewer:** `not required`
+
+## Summary of the change
+
+Fixes the "everything is squished to the side" dashboard bug (operator report with screenshots, topic 29723, 2026-07-08): fourteen tab panels declared after `</main>` in `dashboard/index.html` are direct `.app` grid children with no explicit grid placement, so the lone visible panel auto-places into the 280px sidebar column on desktop. The fix adds ONE shared `.tab-panel` CSS class (`grid-column: 1 / -1; min-width: 0`) applied to all fourteen panels (Integrated Being, PR Pipeline, Projects, Initiatives, Secrets, Commitments, Tokens, Resources, Blockers, LLM Activity, Routing Map, Spend, Evidence, Threadline), plus a regression floor test (`tests/unit/dashboard-panel-placement.test.ts`) that fails the build when a future after-main panel lacks a placement-carrying class. The pre-existing `.ph-root` per-tab fix is left untouched; its comment now points at the shared contract. Files touched: `dashboard/index.html`, `tests/unit/dashboard-panel-placement.test.ts`, `docs/specs/dashboard-responsive-fix.eli16.md`, this artifact, and a release fragment.
+
+## Decision-point inventory
+
+No decision-point surface. This change is presentation-layer CSS/HTML plus a static test. It gates no information flow, blocks no actions, filters no messages, and constrains no agent behavior at runtime. (The new unit test constrains future COMMITS — the standard test-ratchet pattern — not runtime behavior.)
+
+---
+
+## 1. Over-block
+
+No block/allow surface at runtime — over-block not applicable to agent/user traffic. For the commit-time ratchet: the floor test could "over-block" a future legitimate panel that is genuinely out of normal flow (e.g. a new fixed-position overlay). Mitigation is built in: the `OUT_OF_FLOW_EXEMPT` list with a required justification comment, and the failure message names the exact panel and both resolution paths.
+
+## 2. Under-block
+
+The floor test keys on 4-space-indented `<div id=...>` openers in the after-`</main>` markup region (all 27 current top-level panels match this shape). A future panel authored at unconventional indentation, as a non-div element, or injected purely from JS would not be seen by the floor. Accepted: the regression vector this floor closes is the observed copy-paste pattern (14 real instances); the population-sanity assertion (≥20 openers visible) fails loudly if the matcher ever goes blind wholesale. Deeper enforcement (viewport smoke tests) belongs to the Dashboard UX Standard work tracked in the topic-29723 working brief. <!-- tracked: topic-29723 dashboard-ux-brief Increment 2 -->
+
+## 3. Level-of-abstraction fit
+
+Right layer. The bug is a CSS grid-placement defect; the fix is a shared CSS class at the layout layer where the sibling container classes (`files-container`, `jobs-container`, `systems-container`, `features-container`, `dropzone-container`) already solve the same problem the same way. The alternative — per-panel inline styles — is exactly the pattern that produced fourteen copies of the bug. No smarter existing gate applies (this is not decision logic).
+
+## 4. Signal vs authority compliance
+
+Compliant by vacuity at runtime: the change holds no blocking authority and produces no signal — it is inert presentation markup. The unit test is a build-time ratchet, the same class as every other test in `tests/unit/`; it holds commit-blocking authority through CI exactly like all tests do, with deterministic, human-readable failure output.
+
+## 5. Interactions
+
+- Interacts with `switchTab()` only passively: switchTab toggles inline `display`; the new class carries grid placement only, so show/hide behavior is unchanged.
+- `.ph-root` panels keep their own placement + 760px prose width; the new rule does not apply to them (no double-fire; the floor test accepts either class).
+- Mobile breakpoint (`@media max-width: 768px`) collapses `.app` to one column; `grid-column: 1 / -1` resolves identically there — verified byte-identical mobile rendering before vs after the change.
+- No other rule targets `.tab-panel` (fresh class name; grep-verified single definition).
+
+## 6. External surfaces
+
+Visible change: dashboard tabs render full-width on desktop instead of squished — the operator-requested fix. No API change, no data change, no cross-agent surface, no timing/conversation-state dependency. Verified with real-browser (headless Chromium) before/after screenshots at 1280×800 and 390×844: desktop fixed; mobile rendering byte-identical to pre-change.
+
+## 7. Multi-machine posture (Cross-Machine Coherence)
+
+Machine-local BY DESIGN in the same sense as all dashboard markup: the HTML ships identically to every machine with the release; each machine serves its own copy. No replicated state, no machine-boundary URL, no one-voice notice surface. Both of the operator's machines get the fix as they pick up the release.
+
+## 8. Rollback cost
+
+Trivial: revert the commit (CSS class + class attributes + one test file). No data migration, no agent state, no config. A revert restores the prior (buggy) rendering and deletes the floor test with it.