@symerian/symi 3.5.25 → 3.5.27

package/dist/{configure-5md67tCP.js → configure-kaf3aurx.js}

@@ -12,22 +12,22 @@ import { n as stylePromptMessage, r as stylePromptTitle, t as stylePromptHint }
 import { t as note$1 } from "./note-D9FXI2qW.js";
 import { t as WizardCancelledError } from "./prompts-CNzp9M83.js";
 import { t as createClackPrompter } from "./clack-prompter-BpcKjPIh.js";
-import { r as setupChannels, t as noteChannelStatus } from "./onboard-channels-DSyynpou.js";
+import { r as setupChannels, t as noteChannelStatus } from "./onboard-channels-qDThNkyj.js";
 import { a as gatewayInstallErrorHint, i as buildGatewayInstallPlan, n as GATEWAY_DAEMON_RUNTIME_OPTIONS, t as DEFAULT_GATEWAY_DAEMON_RUNTIME } from "./daemon-runtime-DlQla_dA.js";
-import { a as ensureWorkspaceAndSessions, b as waitForGatewayReachable, g as resolveControlUiLinks, h as randomToken, m as probeGatewayReachable, n as applyWizardMetadata, p as printWizardHeader, s as guardCancel, t as DEFAULT_WORKSPACE, u as normalizeGatewayTokenInput, v as summarizeExistingConfig, y as validateGatewayPasswordInput } from "./onboard-helpers-CLXJ8zp0.js";
+import { a as ensureWorkspaceAndSessions, b as waitForGatewayReachable, g as resolveControlUiLinks, h as randomToken, m as probeGatewayReachable, n as applyWizardMetadata, p as printWizardHeader, s as guardCancel, t as DEFAULT_WORKSPACE, u as normalizeGatewayTokenInput, v as summarizeExistingConfig, y as validateGatewayPasswordInput } from "./onboard-helpers-7IGQ8nAM.js";
 import { t as resolveGatewayService } from "./service-e6MzlLCd.js";
-import { r as healthCommand } from "./health-DpE9GWGn.js";
+import { r as healthCommand } from "./health-7UqIGG8U.js";
 import { t as ensureControlUiAssetsBuilt } from "./control-ui-assets-CJQ97d4u.js";
 import { n as logConfigUpdated } from "./logging-DDnP1BTp.js";
 import { n as promptAuthChoiceGrouped } from "./auth-choice-prompt-BAFfYZeR.js";
-import { i as applyAuthChoice, n as resolvePreferredProviderForAuthChoice } from "./auth-choice-CUvx59kv.js";
+import { i as applyAuthChoice, n as resolvePreferredProviderForAuthChoice } from "./auth-choice-DQplW60s.js";
 import { a as promptDefaultModel, n as applyModelFallbacksFromSelection, o as promptModelAllowlist, r as applyPrimaryModel, t as applyModelAllowlist } from "./model-picker-Cf6UgQEh.js";
 import { t as ensureSystemdUserLingerInteractive } from "./systemd-linger-BzYk7A6M.js";
 import { a as promptCustomApiConfig } from "./onboard-custom-BcRYreNG.js";
 import { i as TAILSCALE_MISSING_BIN_NOTE_LINES, n as TAILSCALE_DOCS_LINES, r as TAILSCALE_EXPOSURE_OPTIONS, t as validateIPv4AddressInput } from "./ipv4-C_NtZ3JP.js";
 import { t as formatHealthCheckFailure } from "./health-format-Bxg84_f4.js";
-import { n as promptRemoteGatewayConfig } from "./onboard-remote-BYBai0w3.js";
-import { n as setupSkills } from "./onboard-skills-BxJlS1Bk.js";
+import { n as promptRemoteGatewayConfig } from "./onboard-remote-Dr75eqOQ.js";
+import { n as setupSkills } from "./onboard-skills-uO7HZwjc.js";
 import { confirm, intro, outro, select, text } from "@clack/prompts";
 
 //#region src/commands/configure.shared.ts

package/dist/{configure-DmzM0S7L.js → configure-ryB8EvyP.js}

@@ -10,22 +10,22 @@ import { n as stylePromptMessage, r as stylePromptTitle, t as stylePromptHint }
 import { t as note$1 } from "./note-BIAQpZxi.js";
 import { t as WizardCancelledError } from "./prompts-D4yOwSll.js";
 import { t as createClackPrompter } from "./clack-prompter-BMQT37oC.js";
-import { r as setupChannels, t as noteChannelStatus } from "./onboard-channels-Z-Jkrk5-.js";
+import { r as setupChannels, t as noteChannelStatus } from "./onboard-channels-BkR3MKMp.js";
 import { a as gatewayInstallErrorHint, i as buildGatewayInstallPlan, n as GATEWAY_DAEMON_RUNTIME_OPTIONS, t as DEFAULT_GATEWAY_DAEMON_RUNTIME } from "./daemon-runtime-AkgOtHR6.js";
-import { a as ensureWorkspaceAndSessions, b as waitForGatewayReachable, g as resolveControlUiLinks, h as randomToken, m as probeGatewayReachable, n as applyWizardMetadata, p as printWizardHeader, s as guardCancel, t as DEFAULT_WORKSPACE, u as normalizeGatewayTokenInput, v as summarizeExistingConfig, y as validateGatewayPasswordInput } from "./onboard-helpers-Dhr98nj8.js";
+import { a as ensureWorkspaceAndSessions, b as waitForGatewayReachable, g as resolveControlUiLinks, h as randomToken, m as probeGatewayReachable, n as applyWizardMetadata, p as printWizardHeader, s as guardCancel, t as DEFAULT_WORKSPACE, u as normalizeGatewayTokenInput, v as summarizeExistingConfig, y as validateGatewayPasswordInput } from "./onboard-helpers-t7tI9KSA.js";
 import { t as resolveGatewayService } from "./service-DYpU1ajf.js";
-import { r as healthCommand } from "./health-znS85U-F.js";
+import { r as healthCommand } from "./health-Dkwuq8ta.js";
 import { t as ensureControlUiAssetsBuilt } from "./control-ui-assets-Dnz69KRU.js";
 import { n as logConfigUpdated } from "./logging-Ev3fNJEG.js";
 import { n as promptAuthChoiceGrouped } from "./auth-choice-prompt-D6A5uuj3.js";
-import { i as applyAuthChoice, n as resolvePreferredProviderForAuthChoice } from "./auth-choice--DymOp5O.js";
+import { i as applyAuthChoice, n as resolvePreferredProviderForAuthChoice } from "./auth-choice-5SLfZiQ7.js";
 import { a as promptDefaultModel, n as applyModelFallbacksFromSelection, o as promptModelAllowlist, r as applyPrimaryModel, t as applyModelAllowlist } from "./model-picker-DvP8ViSf.js";
 import { t as ensureSystemdUserLingerInteractive } from "./systemd-linger-CctFkWNE.js";
 import { a as promptCustomApiConfig } from "./onboard-custom-CfKvdcJ5.js";
 import { i as TAILSCALE_MISSING_BIN_NOTE_LINES, n as TAILSCALE_DOCS_LINES, r as TAILSCALE_EXPOSURE_OPTIONS, t as validateIPv4AddressInput } from "./ipv4-qGjACkoi.js";
 import { t as formatHealthCheckFailure } from "./health-format-6tfMqkNX.js";
-import { n as promptRemoteGatewayConfig } from "./onboard-remote-DZdMxd1Q.js";
-import { n as setupSkills } from "./onboard-skills-2SUv-W7i.js";
+import { n as promptRemoteGatewayConfig } from "./onboard-remote-DH3bPYbE.js";
+import { n as setupSkills } from "./onboard-skills-Bjf7kWvg.js";
 import { confirm, intro, outro, select, text } from "@clack/prompts";
 
 //#region src/commands/configure.shared.ts

package/dist/control-ui/css/style.css

@@ -909,6 +909,158 @@ body {
   line-height: 1.4;
 }
 
+/* ── Stage D (3.5.26) mode chips + per-mode layout ───────────────── */
+.symframe-modes {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+}
+.mode-chip {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 212, 255, 0.32);
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.15s ease;
+  flex-shrink: 0;
+}
+.mode-chip:hover {
+  border-color: var(--accent-cyan);
+  background: rgba(0, 212, 255, 0.15);
+  transform: scale(1.15);
+}
+.mode-chip.active {
+  background: var(--accent-cyan);
+  border-color: var(--accent-cyan);
+  box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
+}
+.mode-auto {
+  margin-left: auto;
+  padding: 2px 8px;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--accent-cyan);
+  background: rgba(0, 212, 255, 0.08);
+  border: 1px solid rgba(0, 212, 255, 0.32);
+  border-radius: 8px;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+.mode-auto:hover {
+  background: rgba(0, 212, 255, 0.2);
+  color: var(--text);
+}
+
+/* ── Per-mode layout overrides ───────────────────────────────── */
+/* Default (ambient): inherits the base .symframe grid above —
+   auto / 1fr / auto rows. No override needed. */
+
+/* Focus mode: hide AWAITING; dim substrate to a soft texture; the
+   foreground card takes the visual stage. If a focusedId is set, the
+   matching card gets a cyan halo + others fade out. */
+.symframe[data-mode="focus"] {
+  grid-template-rows: auto 1fr 0;
+}
+.symframe[data-mode="focus"] .symframe-awaiting {
+  display: none;
+}
+.symframe[data-mode="focus"] .symframe-substrate {
+  opacity: 0.2;
+  pointer-events: none;
+  filter: blur(2px);
+  transition:
+    opacity 0.4s ease,
+    filter 0.4s ease;
+}
+/* When focusedId is set, dim non-matching cards. */
+.symframe[data-mode="focus"][data-focus-id] .symframe-card-dynamic {
+  opacity: 0.25;
+  transition: opacity 0.4s ease;
+}
+.symframe[data-mode="focus"][data-focus-id] .symframe-card-dynamic:hover {
+  opacity: 0.6;
+}
+/* The focused card gets a halo and stays sharp. Selector is built
+   dynamically by symframe.js via the [data-focus-id] attribute and
+   the card's own [data-card-id]; CSS can't directly match across
+   them, so we use a generic "the card whose id matches" pattern via
+   :has() (when supported) plus a fallback class added by JS. */
+.symframe[data-mode="focus"] .symframe-card-focused {
+  opacity: 1 !important;
+  box-shadow:
+    0 0 24px rgba(0, 212, 255, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 4px 12px rgba(0, 0, 0, 0.25);
+  border-color: var(--accent-cyan) !important;
+  transform: scale(1.02);
+  transform-origin: center;
+  transition:
+    box-shadow 0.4s ease,
+    border-color 0.4s ease,
+    transform 0.4s ease;
+}
+
+/* Awaiting mode: footer dominant; cards collapse to title strips;
+   substrate dims to a status band. */
+.symframe[data-mode="awaiting"] {
+  grid-template-rows: auto minmax(60px, 1fr) 4fr;
+}
+.symframe[data-mode="awaiting"] .symframe-substrate {
+  opacity: 0.35;
+}
+.symframe[data-mode="awaiting"] .symframe-card-dynamic {
+  max-height: 38px;
+  overflow: hidden;
+  transition:
+    max-height 0.4s ease,
+    opacity 0.4s ease;
+}
+.symframe[data-mode="awaiting"] .symframe-card-dynamic .symframe-card-body,
+.symframe[data-mode="awaiting"] .symframe-card-dynamic .symframe-card-actions {
+  display: none;
+}
+.symframe[data-mode="awaiting"] .symframe-awaiting {
+  max-height: none;
+  background: rgba(0, 212, 255, 0.04);
+  border-radius: 10px;
+  margin-top: 8px;
+}
+.symframe[data-mode="awaiting"] .awaiting-list {
+  max-height: none;
+}
+
+/* Quiet mode: only the substrate breathes. Cards + AWAITING hidden.
+   This is the "deep think" or "nothing to surface" posture. */
+.symframe[data-mode="quiet"] {
+  grid-template-rows: auto 1fr;
+}
+.symframe[data-mode="quiet"] .symframe-cards,
+.symframe[data-mode="quiet"] .symframe-awaiting {
+  display: none;
+}
+
+/* Reduced-motion: drop the per-mode transitions. The data-mode
+   attribute still flips; just no animated handoff between modes. */
+@media (prefers-reduced-motion: reduce) {
+  .symframe[data-mode="focus"] .symframe-substrate,
+  .symframe[data-mode="focus"][data-focus-id] .symframe-card-dynamic,
+  .symframe[data-mode="focus"] .symframe-card-focused,
+  .symframe[data-mode="awaiting"] .symframe-substrate,
+  .symframe[data-mode="awaiting"] .symframe-card-dynamic {
+    transition: none;
+  }
+}
+
 /* The stack — substrate + cards share a single grid cell so they
    overlap on the z-axis. Cards on top (z:1) with backdrop-filter let
    the substrate (z:0) show through.
@@ -1504,6 +1656,165 @@ body {
   box-shadow: 0 0 8px rgba(0, 212, 255, 0.18);
 }
 
+/* ── Stage D.1 (3.5.27): intent-aware visual treatment ──────────── */
+/* The data-intent attribute has been on every card since Stage A but
+   was metadata only. Stage D.1 makes the agent's mental categorization
+   visible: each intent gets a distinct color stripe running down the
+   left edge of the card + a small corner ribbon at the top-left with
+   the intent label. Some intents add subtle behavior (producing
+   pulses; drafted emphasizes action buttons; reference desaturates).
+
+   No JS changes — purely a CSS layer on top of the existing
+   .symframe-card-dynamic[data-intent="..."] hook. */
+
+/* Base treatment shared across all intents: the left stripe is via
+   inset box-shadow so it doesn't disturb the card's border-radius.
+   The ribbon is via ::before pseudo-element at the top-left corner.
+   Cards without data-intent (legacy / pre-Stage-A pushes) get neither. */
+
+.symframe-card-dynamic[data-intent]::before {
+  content: attr(data-intent);
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 2px 8px 2px 6px;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  background: rgba(0, 0, 0, 0.55);
+  border-radius: 10px 0 6px 0;
+  border-right: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0.85;
+}
+/* Reset the base card-padding so the ribbon hugs the corner */
+.symframe-card-dynamic[data-intent] {
+  /* Slight top padding so the ribbon doesn't crowd the title */
+  padding-top: 22px;
+}
+
+/* holding — cyan; working memory */
+.symframe-card-dynamic[data-intent="holding"] {
+  box-shadow:
+    inset 3px 0 0 0 rgba(0, 212, 255, 0.65),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 4px 12px rgba(0, 0, 0, 0.25);
+}
+.symframe-card-dynamic[data-intent="holding"]::before {
+  color: var(--accent-cyan);
+}
+
+/* weighing — amber; an option under consideration */
+.symframe-card-dynamic[data-intent="weighing"] {
+  box-shadow:
+    inset 3px 0 0 0 #f5b73a,
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 4px 12px rgba(0, 0, 0, 0.25);
+}
+.symframe-card-dynamic[data-intent="weighing"]::before {
+  color: #f5b73a;
+}
+
+/* producing — green; actively drafting, slow pulse on the stripe */
+.symframe-card-dynamic[data-intent="producing"] {
+  animation: intent-producing-pulse 2.6s ease-in-out infinite;
+}
+@keyframes intent-producing-pulse {
+  0%,
+  100% {
+    box-shadow:
+      inset 3px 0 0 0 rgba(52, 211, 153, 0.55),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+  50% {
+    box-shadow:
+      inset 3px 0 0 0 rgba(52, 211, 153, 1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      0 4px 12px rgba(0, 0, 0, 0.25),
+      0 0 14px rgba(52, 211, 153, 0.2);
+  }
+}
+.symframe-card-dynamic[data-intent="producing"]::before {
+  content: "● producing";
+  color: #34d399;
+}
+
+/* drafted — violet; finished artifact ready for user review */
+.symframe-card-dynamic[data-intent="drafted"] {
+  box-shadow:
+    inset 3px 0 0 0 #8b5cf6,
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 4px 12px rgba(0, 0, 0, 0.25);
+}
+.symframe-card-dynamic[data-intent="drafted"]::before {
+  color: #8b5cf6;
+}
+/* Emphasize action buttons on drafted cards — these cards exist to
+   be acted on (Send / Copy / Open). Make the buttons more clickable. */
+.symframe-card-dynamic[data-intent="drafted"] .symframe-card-action {
+  border-color: rgba(139, 92, 246, 0.55);
+  color: var(--text);
+  font-weight: 600;
+}
+.symframe-card-dynamic[data-intent="drafted"] .symframe-card-action:hover {
+  background: rgba(139, 92, 246, 0.12);
+  border-color: #8b5cf6;
+}
+.symframe-card-dynamic[data-intent="drafted"] .symframe-card-action-primary {
+  background: rgba(139, 92, 246, 0.22);
+  border-color: #8b5cf6;
+  color: var(--text);
+}
+.symframe-card-dynamic[data-intent="drafted"] .symframe-card-action-primary:hover {
+  background: rgba(139, 92, 246, 0.32);
+  box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
+}
+
+/* reference — muted gray; passive read-only context */
+.symframe-card-dynamic[data-intent="reference"] {
+  box-shadow:
+    inset 3px 0 0 0 rgba(255, 255, 255, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 4px 12px rgba(0, 0, 0, 0.25);
+  opacity: 0.88;
+  filter: saturate(0.75);
+}
+.symframe-card-dynamic[data-intent="reference"]::before {
+  color: var(--text-dim);
+}
+
+/* awaiting — if a card is mistakenly pushed with this intent (it
+   belongs in the AWAITING footer, not the foreground), flag with a
+   pink stripe and a "→ footer" hint so the user/agent notices the
+   miscategorization. */
+.symframe-card-dynamic[data-intent="awaiting"] {
+  box-shadow:
+    inset 3px 0 0 0 rgba(244, 114, 182, 0.55),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 4px 12px rgba(0, 0, 0, 0.25);
+}
+.symframe-card-dynamic[data-intent="awaiting"]::before {
+  content: "awaiting → footer";
+  color: rgba(244, 114, 182, 0.85);
+}
+
+/* Reduced-motion: skip the producing pulse but keep the static
+   green stripe so the intent is still visible. */
+@media (prefers-reduced-motion: reduce) {
+  .symframe-card-dynamic[data-intent="producing"] {
+    animation: none;
+    box-shadow:
+      inset 3px 0 0 0 rgba(52, 211, 153, 0.75),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+}
+
 /* ── Phase 4: type-specific body renderers ───────────────────────── */
 
 /* Text + markdown: inherit from .symframe-card-body. Add minimal

package/dist/control-ui/index.html

@@ -202,6 +202,47 @@
           <span class="reasoning-live-dot" id="reasoning-live-dot"></span>
           <span class="symframe-count" id="symframe-count"></span>
         </div>
+        <!-- Stage D (3.5.26): mode selector chips. Agent picks via -->
+        <!-- display_artifact setMode; user can override by clicking a chip. -->
+        <!-- The AUTO pill appears only while userOverride is active; click -->
+        <!-- it to release control back to the agent. -->
+        <div class="symframe-modes" id="symframe-modes" role="tablist" aria-label="Panel mode">
+          <button
+            type="button"
+            class="mode-chip"
+            data-mode="ambient"
+            role="tab"
+            title="Ambient — substrate + cards + awaiting visible"
+            aria-label="Ambient mode"
+          ></button>
+          <button
+            type="button"
+            class="mode-chip"
+            data-mode="focus"
+            role="tab"
+            title="Focus — one card centered, substrate dim, footer hidden"
+            aria-label="Focus mode"
+          ></button>
+          <button
+            type="button"
+            class="mode-chip"
+            data-mode="awaiting"
+            role="tab"
+            title="Awaiting — footer prominent, cards collapsed"
+            aria-label="Awaiting mode"
+          ></button>
+          <button
+            type="button"
+            class="mode-chip"
+            data-mode="quiet"
+            role="tab"
+            title="Quiet — substrate only, cards + footer hidden"
+            aria-label="Quiet mode"
+          ></button>
+          <button type="button" class="mode-auto" id="mode-auto" hidden title="Release to agent">
+            AUTO
+          </button>
+        </div>
         <div class="symframe-sub">window into the agent's mind</div>
       </div>
       <div class="symframe-stack">
@@ -987,5 +1028,6 @@
     <script src="js/symframe.js"></script>
     <script src="js/symframe-substrate.js"></script>
     <script src="js/symframe-awaiting.js"></script>
+    <script src="js/symframe-modes.js"></script>
   </body>
 </html>

package/dist/control-ui/js/symframe-modes.js

@@ -0,0 +1,65 @@
+// ── Symframe Mode Chips ─────────────────────────────────────────────
+// Stage D of the Dynamic Glass Panel arc — see ~/Documents/dynamic-glass-panel.md §5 Stage D.
+//
+// Wires the four mode chips in the symframe header to
+// window.symframe.setMode() and updates the AUTO pill visibility +
+// active-chip indicator in response to mode changes (from either the
+// user clicking a chip OR the agent calling setMode via display_artifact).
+//
+// Mode-vs-user resolution:
+//   - User click → setMode(mode, { user: true })
+//                → modeState.userOverride = true
+//                → AUTO pill becomes visible
+//                → Agent setMode calls are stored as pendingAgent
+//                  but NOT applied to the DOM
+//   - AUTO click → clearUserOverride()
+//                → userOverride = false, pendingAgent is applied
+//                → AUTO pill hides
+// ─────────────────────────────────────────────────────────────────────
+
+"use strict";
+
+(function () {
+  const modesContainer = document.getElementById("symframe-modes");
+  const autoPill = document.getElementById("mode-auto");
+  if (!modesContainer || typeof window.symframe?.setMode !== "function") {
+    return;
+  }
+
+  const chips = modesContainer.querySelectorAll(".mode-chip");
+
+  function syncChips(state) {
+    for (const chip of chips) {
+      const mode = chip.getAttribute("data-mode");
+      const active = mode === state.current;
+      chip.classList.toggle("active", active);
+      chip.setAttribute("aria-selected", active ? "true" : "false");
+    }
+    if (autoPill) {
+      autoPill.hidden = !state.userOverride;
+    }
+  }
+
+  // Initial sync from current mode state
+  syncChips(window.symframe.getMode());
+
+  // Listen for future mode changes (agent OR user)
+  window.symframe.onModeChange(syncChips);
+
+  // Wire chip clicks → user-initiated setMode
+  for (const chip of chips) {
+    chip.addEventListener("click", () => {
+      const mode = chip.getAttribute("data-mode");
+      if (mode) {
+        window.symframe.setMode(mode, { user: true });
+      }
+    });
+  }
+
+  // AUTO pill → release the override
+  if (autoPill) {
+    autoPill.addEventListener("click", () => {
+      window.symframe.clearUserOverride();
+    });
+  }
+})();

package/dist/control-ui/js/symframe.js

@@ -508,6 +508,12 @@
     cards.set(id, entry);
     insertElement(entry, el);
     updateCount();
+    // Stage D: if focus mode is active and this is the focused card,
+    // apply the halo class immediately so the card renders focused
+    // on first paint (otherwise the user briefly sees a dim card).
+    if (modeState.current === "focus" && modeState.focusedId === id) {
+      el.classList.add("symframe-card-focused");
+    }
     return entry;
   }
 
@@ -548,6 +554,11 @@
     merged.element = newEl;
     existing.element.replaceWith(newEl);
     cards.set(id, merged);
+    // Stage D: re-apply the focus class if this is the focused card
+    // (replaceWith drops classes on the old element).
+    if (modeState.current === "focus" && modeState.focusedId === id) {
+      newEl.classList.add("symframe-card-focused");
+    }
     return merged;
   }
 
@@ -579,6 +590,104 @@
     return true;
   }
 
+  // ── Stage D: modes ─────────────────────────────────────────────────
+  // The agent picks a panel posture per task via display_artifact
+  // action="setMode". Mode is applied as a data-mode attribute on the
+  // #symframe root; per-mode CSS rules in style.css handle the layout
+  // shift (substrate/foreground/awaiting proportions, focused-card
+  // highlight). No JS layout math — all visual changes are CSS-driven.
+  //
+  // User override: clicking a mode chip in the header sets userOverride
+  // = true. While true, agent setMode calls are stored as
+  // pendingAgentMode but NOT applied to the DOM — the user's choice
+  // wins. An AUTO chip becomes visible; clicking it clears the
+  // override and applies whatever the agent last asked for.
+  const MODES = ["ambient", "focus", "awaiting", "quiet"];
+  const DEFAULT_MODE = "ambient";
+  /** @type {{ current: string, userOverride: boolean, pendingAgent: string | null, focusedId: string | null }} */
+  const modeState = {
+    current: DEFAULT_MODE,
+    userOverride: false,
+    pendingAgent: null,
+    focusedId: null,
+  };
+  /** @type {Set<(state: typeof modeState) => void>} */
+  const modeListeners = new Set();
+  const symframeRoot = document.getElementById("symframe");
+
+  function applyMode() {
+    if (!symframeRoot) {
+      return;
+    }
+    symframeRoot.setAttribute("data-mode", modeState.current);
+    if (modeState.focusedId) {
+      symframeRoot.setAttribute("data-focus-id", modeState.focusedId);
+    } else {
+      symframeRoot.removeAttribute("data-focus-id");
+    }
+    if (modeState.userOverride) {
+      symframeRoot.setAttribute("data-user-override", "true");
+    } else {
+      symframeRoot.removeAttribute("data-user-override");
+    }
+    for (const fn of modeListeners) {
+      try {
+        fn({ ...modeState });
+      } catch (err) {
+        console.warn("[symframe] mode listener threw:", err);
+      }
+    }
+  }
+
+  function setMode(nextMode, opts = {}) {
+    if (!MODES.includes(nextMode)) {
+      console.warn(`[symframe] setMode: unknown mode '${nextMode}'`);
+      return false;
+    }
+    const fromUser = opts.user === true;
+    if (fromUser) {
+      modeState.userOverride = true;
+      modeState.current = nextMode;
+      if (typeof opts.focusedId === "string") {
+        modeState.focusedId = opts.focusedId;
+      } else if (opts.focusedId === null) {
+        modeState.focusedId = null;
+      }
+    } else {
+      // Agent setMode: respect user override
+      modeState.pendingAgent = nextMode;
+      if (modeState.userOverride) {
+        return true; // ack but don't apply
+      }
+      modeState.current = nextMode;
+      if (typeof opts.focusedId === "string") {
+        modeState.focusedId = opts.focusedId;
+      } else if (opts.focusedId === null) {
+        modeState.focusedId = null;
+      }
+    }
+    applyMode();
+    return true;
+  }
+
+  /** Clear the user override; reapply the agent's last mode (or default). */
+  function clearUserOverride() {
+    modeState.userOverride = false;
+    if (modeState.pendingAgent) {
+      modeState.current = modeState.pendingAgent;
+    }
+    applyMode();
+  }
+
+  function getMode() {
+    return { ...modeState };
+  }
+
+  function onModeChange(fn) {
+    modeListeners.add(fn);
+    return () => modeListeners.delete(fn);
+  }
+
   // ── Stage C: dwell / release / recall / pin / unpin ────────────────
   // The CRUD vocabulary (add/update/remove) treats the panel as a
   // notification list. These verbs treat it as a mind-window: cards
@@ -777,6 +886,12 @@
     pin,
     unpin,
     listRecentlyReleased,
+    // Stage D — modes
+    setMode,
+    getMode,
+    clearUserOverride,
+    onModeChange,
+    MODES,
   };
 
   // Phase 3: server-pushed cards. The gateway's `symframe` broadcast is
@@ -809,9 +924,33 @@
       pin(payload.id);
     } else if (payload.action === "unpin" && payload.id) {
       unpin(payload.id);
+    } else if (payload.action === "setMode" && typeof payload.mode === "string") {
+      setMode(payload.mode, {
+        focusedId: typeof payload.focusedId === "string" ? payload.focusedId : null,
+      });
     }
   });
 
+  // Stage D: apply the default mode on boot so the data-mode attribute
+  // always exists for CSS to target. No-op if userOverride is set
+  // (won't happen at boot, but defensive).
+  applyMode();
+
+  // Stage D: when mode changes, toggle the .symframe-card-focused class
+  // on the card whose id matches modeState.focusedId. CSS can't select
+  // "the card whose data-card-id matches the symframe's data-focus-id"
+  // directly, so JS maintains the class. Re-applies after card add too.
+  function syncFocusClass() {
+    for (const [id, entry] of cards.entries()) {
+      if (!entry.element) {
+        continue;
+      }
+      const shouldFocus = modeState.current === "focus" && modeState.focusedId === id;
+      entry.element.classList.toggle("symframe-card-focused", shouldFocus);
+    }
+  }
+  onModeChange(syncFocusClass);
+
   // Stage C: restore pinned cards from localStorage on boot. Pinned
   // cards are user-curated state and survive reload, /new, and gateway
   // reconnect. Each pin is a snapshot; the registry re-adds it as a