From 00855b9f0091936110b8cc3f6d911f7b0d1c3389 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 10:40:02 -0400
Subject: [PATCH 01/11] Mark non-production environments with a logo ring, not
 a badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The env badge added text next to the brand, so dev and staging never
reproduced production's nav layout — exactly where responsive breakage
was going unnoticed. A colored ring on the logo (favicon palette) plus
a tooltip carries the same signal without moving anything.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../assets/stylesheets/coplan/application.css | 25 +++++++++----------
 .../app/helpers/coplan/application_helper.rb  | 16 +++++++++---
 .../views/layouts/coplan/application.html.erb |  5 ++--
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index 47d6028..0970b4c 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -363,15 +363,15 @@ img, svg {
   border-radius: 6px;
 }
 
-.env-badge {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--color-text-inverse);
-  padding: 1px 6px;
-  border-radius: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  line-height: 1.4;
+/* Non-production environment marker: a colored ring on the logo (favicon
+   palette) — layout-neutral, so dev and staging reproduce production's
+   nav spacing exactly. */
+.site-nav__logo--development {
+  box-shadow: 0 0 0 2px #10b981;
+}
+
+.site-nav__logo--staging {
+  box-shadow: 0 0 0 2px #f59e0b;
 }
 
 .site-nav__brand:hover {
@@ -5271,11 +5271,10 @@ img.avatar {
     gap: var(--space-sm);
   }
 
-  /* Icons over labels: brand text, env badge, search placeholder, the
-     "/" hint, the settings gear, and the sign-out link all yield to the
-     things a phone visit is actually for. */
+  /* Icons over labels: brand text, search placeholder, the "/" hint,
+     the settings gear, and the sign-out link all yield to the things a
+     phone visit is actually for. */
   .site-nav__brand-text,
-  .env-badge,
   .site-nav__search-label,
   .site-nav__search-kbd,
   .site-nav__icon-link,
diff --git a/engine/app/helpers/coplan/application_helper.rb b/engine/app/helpers/coplan/application_helper.rb
index be653b2..6553691 100644
--- a/engine/app/helpers/coplan/application_helper.rb
+++ b/engine/app/helpers/coplan/application_helper.rb
@@ -66,12 +66,20 @@ def user_avatar(user, size: "sm")
       end
     end
 
-    def coplan_environment_badge
+    # Non-production environments mark the nav logo instead of adding a
+    # badge next to the brand — a badge changes the nav's layout, so dev
+    # and staging would never reproduce production's spacing. The logo
+    # gets a colored ring (same palette as the favicon) and a tooltip.
+    def coplan_environment_logo_modifier
+      return "" if Rails.env.production?
+
+      " site-nav__logo--#{Rails.env}"
+    end
+
+    def coplan_environment_logo_title
       return if Rails.env.production?
 
-      label = Rails.env.capitalize
-      colors = FAVICON_COLORS.fetch(Rails.env, FAVICON_COLORS["development"])
-      tag.span(label, class: "env-badge", style: "background: #{colors[:start]};")
+      "#{Rails.env.capitalize} environment"
     end
   end
 end
diff --git a/engine/app/views/layouts/coplan/application.html.erb b/engine/app/views/layouts/coplan/application.html.erb
index ede01f2..69e4635 100644
--- a/engine/app/views/layouts/coplan/application.html.erb
+++ b/engine/app/views/layouts/coplan/application.html.erb
@@ -25,9 +25,10 @@
     <nav class="site-nav">
       <div class="site-nav__inner">
         <%= link_to coplan.root_path, class: "site-nav__brand" do %>
-          <%= image_tag "coplan/coplan-logo-sm.png", alt: "CoPlan", class: "site-nav__logo" %>
+          <%= image_tag "coplan/coplan-logo-sm.png", alt: "CoPlan",
+                class: "site-nav__logo#{coplan_environment_logo_modifier}",
+                title: coplan_environment_logo_title %>
           <span class="site-nav__brand-text">CoPlan</span>
-          <%= coplan_environment_badge %>
         <% end %>
         <% if signed_in? %>
           <div class="site-nav__links">

From e42caac25e04aba29bf3a88dcbc199d48e62530e Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 10:40:17 -0400
Subject: [PATCH 02/11] Make the visibility toggle one click, labeled, and
 self-confirming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The eye was a hidden two-click ritual: first click armed a preview
pulse, second committed, and wandering off reverted it — which read as
"the toggle is broken, it flips back to Private". And the committed
state only reached the page via the ActionCable broadcast, so the
byline's Private flag routinely went stale until a refresh.

Visibility is a two-way switch (PlanPolicy#publish?/#hide?), so there
is nothing to guard with a confirmation step. Now:

- One click commits. The button repaints optimistically and reverts
  only if the request fails.
- The button is labeled (Private/Shared), not icon-only — it's the one
  control whose state people need to read at a glance, and the label
  answers "where do I share this?".
- publish/hide answer Turbo Streams: a #plan-header re-render (state
  flag can't go stale) plus a confirming toast. toast_stream moves from
  AttachmentsController to the base controller for reuse.
- The stale "one-way door" comment on #publish is corrected.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../assets/stylesheets/coplan/application.css | 15 +---
 .../coplan/application_controller.rb          | 11 +++
 .../coplan/attachments_controller.rb          |  8 ---
 .../controllers/coplan/plans_controller.rb    | 20 +++++-
 .../coplan/visibility_toggle_controller.js    | 70 ++++++++-----------
 engine/app/views/coplan/plans/show.html.erb   | 17 ++---
 spec/requests/plan_events_spec.rb             | 16 +++++
 7 files changed, 84 insertions(+), 73 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index 0970b4c..6f66ec5 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -2635,9 +2635,9 @@ img.avatar {
   text-decoration: none;
 }
 
-/* The visibility eye: slash appears when Private (matching the state
-   flag's crossed eye); armed = mid-flip, waiting for the confirming
-   second click. */
+/* The visibility toggle: a labeled eye that reads as the plan's current
+   state. The slash appears when Private (matching the state flag's
+   crossed eye). One click commits — the label repaints optimistically. */
 .visibility-toggle .visibility-toggle__slash {
   display: none;
 }
@@ -2646,15 +2646,6 @@ img.avatar {
   display: initial;
 }
 
-.visibility-toggle--armed {
-  color: var(--color-primary);
-  animation: visibility-pulse 1.2s ease-in-out infinite;
-}
-
-@keyframes visibility-pulse {
-  50% { opacity: 0.45; }
-}
-
 /* Folder-picker navigator (the bookmark's popover) */
 .folder-picker__plan {
   margin: 0 0 var(--space-sm);
diff --git a/engine/app/controllers/coplan/application_controller.rb b/engine/app/controllers/coplan/application_controller.rb
index d6c29b1..eb04095 100644
--- a/engine/app/controllers/coplan/application_controller.rb
+++ b/engine/app/controllers/coplan/application_controller.rb
@@ -84,6 +84,17 @@ def allowed_to?(record, action)
     end
     helper_method :allowed_to?
 
+    # A bottom-corner toast as a Turbo Stream — append it to any
+    # turbo_stream response so in-place actions get feedback without a
+    # top-of-page flash (which would mean scrolling the reader away).
+    def toast_stream(message, kind)
+      turbo_stream.append("coplan-toasts",
+        helpers.content_tag(:div, message,
+          class: "flash flash--#{kind} toasts__toast",
+          role: "status",
+          data: { controller: "coplan--toast" }))
+    end
+
     # Fires once per successful, signed-in HTML GET. Skips Turbo Frame
     # requests (those are partial reloads within an already-counted page),
     # non-2xx responses, agent/API traffic, and anything that isn't HTML.
diff --git a/engine/app/controllers/coplan/attachments_controller.rb b/engine/app/controllers/coplan/attachments_controller.rb
index 7456538..2371145 100644
--- a/engine/app/controllers/coplan/attachments_controller.rb
+++ b/engine/app/controllers/coplan/attachments_controller.rb
@@ -91,13 +91,5 @@ def count_stream(id, count)
       turbo_stream.replace(id,
         html: helpers.content_tag(:span, count, class: "section-count", id: id))
     end
-
-    def toast_stream(message, kind)
-      turbo_stream.append("coplan-toasts",
-        helpers.content_tag(:div, message,
-          class: "flash flash--#{kind} toasts__toast",
-          role: "status",
-          data: { controller: "coplan--toast" }))
-    end
   end
 end
diff --git a/engine/app/controllers/coplan/plans_controller.rb b/engine/app/controllers/coplan/plans_controller.rb
index 128f36d..9c04f27 100644
--- a/engine/app/controllers/coplan/plans_controller.rb
+++ b/engine/app/controllers/coplan/plans_controller.rb
@@ -257,9 +257,9 @@ def preview
       render html: html, layout: false
     end
 
-    # Publishing is the one-way door out of draft: explicit, confirmed in
-    # the UI, and irreversible by design (archive is the tool for "done
-    # with this", not unpublish).
+    # One direction of the header visibility toggle: share a private plan
+    # with the whole org. The other direction is #hide — visibility is a
+    # two-way switch (archive is the tool for "done with this").
     def publish
       authorize!(@plan, :publish?)
       @plan.update!(visibility: "published")
@@ -279,6 +279,10 @@ def publish
         via: "web"
       )
       respond_to do |format|
+        # The toggle fetches this: the header re-render carries the new
+        # state flag, so the page repaints even when the ActionCable
+        # broadcast can't reach this browser.
+        format.turbo_stream { render turbo_stream: visibility_streams("Shared with everyone in the org.") }
         format.json { render json: { visibility: @plan.visibility } }
         format.html { redirect_to plan_path(@plan), notice: "Plan published — everyone can see it now." }
       end
@@ -306,6 +310,7 @@ def hide
         via: "web"
       )
       respond_to do |format|
+        format.turbo_stream { render turbo_stream: visibility_streams("Private again — hidden from lists and search.") }
         format.json { render json: { visibility: @plan.visibility } }
         format.html { redirect_to plan_path(@plan), notice: "Plan is private again — hidden from lists and search." }
       end
@@ -663,5 +668,14 @@ def set_plan
     def broadcast_plan_update(plan)
       Broadcaster.replace_to(plan, target: "plan-header", partial: "coplan/plans/header", locals: { plan: plan })
     end
+
+    # Turbo Streams for a visibility change: re-render the header (state
+    # flag + toggle) in the acting browser and confirm with a toast.
+    def visibility_streams(message)
+      [
+        turbo_stream.replace("plan-header", partial: "coplan/plans/header", locals: { plan: @plan }),
+        toast_stream(message, "notice")
+      ]
+    end
   end
 end
diff --git a/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js b/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
index caf3f62..735e263 100644
--- a/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
+++ b/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
@@ -1,65 +1,51 @@
 import { Controller } from "@hotwired/stimulus"
 
-// The header visibility eye (author only). Open eye = shared with everyone,
-// slashed eye = Private. Two clicks, no dialog, no reload:
+// The plan visibility toggle (author only). Open eye = shared with everyone
+// in the org, slashed eye = Private. One click commits — visibility is a
+// two-way switch (see PlanPolicy#publish?/#hide?), so there is nothing to
+// guard with a dialog: flipping it back is one more click.
 //
-//   click 1  previews the flip (the slash toggles, the button pulses) —
-//            it reverts by itself if you wander off
-//   click 2  commits via fetch; the broadcast header refresh carries the
-//            Private flag, so nothing else needs repainting
+// The button repaints optimistically, then the server confirms with Turbo
+// Streams (a #plan-header re-render carrying the state flag, plus a toast).
+// If the request fails, the button reverts to the real state.
 export default class extends Controller {
   static values = { hidden: Boolean, publishUrl: String, hideUrl: String }
+  static targets = ["label"]
 
-  disconnect() {
-    clearTimeout(this._revertTimer)
-  }
+  async toggle() {
+    if (this._busy) return
+    this._busy = true
 
-  click() {
-    if (this._armed) {
-      this._commit()
-    } else {
-      this._arm()
-    }
-  }
+    const wasHidden = this.hiddenValue
+    this.hiddenValue = !wasHidden
+    this._paint()
 
-  _arm() {
-    this._armed = true
-    this.element.classList.add("visibility-toggle--armed")
-    this.element.classList.toggle("visibility-toggle--hidden", !this.hiddenValue)
-    this.element.title = this.hiddenValue ?
-      "Click again to share with everyone in the org" :
-      "Click again to make this private — hidden from lists and search (the link keeps working)"
-    // Unconfirmed after a pause: put the eye back the way it was.
-    this._revertTimer = setTimeout(() => this._reset(), 4000)
-  }
-
-  async _commit() {
-    clearTimeout(this._revertTimer)
-    const url = this.hiddenValue ? this.publishUrlValue : this.hideUrlValue
     try {
-      const response = await fetch(url, {
+      const response = await fetch(wasHidden ? this.publishUrlValue : this.hideUrlValue, {
         method: "PATCH",
         headers: {
           "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.content,
-          "Accept": "application/json"
+          "Accept": "text/vnd.turbo-stream.html"
         }
       })
       if (!response.ok) throw new Error("Could not change visibility")
-      const data = await response.json()
-      this.hiddenValue = data.visibility === "draft"
+      window.Turbo?.renderStreamMessage(await response.text())
     } catch {
-      // Leave the real state untouched; the reset below repaints it.
+      // Put the button back the way the server still has it.
+      this.hiddenValue = wasHidden
+      this._paint()
+    } finally {
+      this._busy = false
     }
-    this._reset()
   }
 
-  _reset() {
-    this._armed = false
-    clearTimeout(this._revertTimer)
-    this.element.classList.remove("visibility-toggle--armed")
+  _paint() {
     this.element.classList.toggle("visibility-toggle--hidden", this.hiddenValue)
+    if (this.hasLabelTarget) {
+      this.labelTarget.textContent = this.hiddenValue ? "Private" : "Shared"
+    }
     this.element.title = this.hiddenValue ?
-      "Private — click to share with everyone" :
-      "Shared with everyone — click to make it private"
+      "Private — click to share with everyone in the org" :
+      "Shared with everyone — click to make it private (the link keeps working)"
   }
 }
diff --git a/engine/app/views/coplan/plans/show.html.erb b/engine/app/views/coplan/plans/show.html.erb
index 4844cc6..c3e244a 100644
--- a/engine/app/views/coplan/plans/show.html.erb
+++ b/engine/app/views/coplan/plans/show.html.erb
@@ -61,20 +61,21 @@
   <%= render partial: "coplan/plans/shelves", locals: { placements: @shelf_placements } %>
   <div class="plan-actions">
     <% if allowed_to?(@plan, :publish?) || allowed_to?(@plan, :hide?) %>
-      <%# The visibility eye: open eye = shared with everyone, slashed = Private.
-          First click previews the flip; the second click commits it — no
-          dialog, no reload (the broadcast header picks up the state flag). %>
+      <%# The visibility toggle: open eye = shared with everyone, slashed =
+          Private. One click commits (it's a two-way switch); the server
+          answers with Turbo Streams that refresh the header state flag and
+          confirm with a toast. Labeled, not icon-only — this is the one
+          control whose state people need to be able to read at a glance. %>
       <button type="button"
-              class="btn btn--ghost btn--sm btn--icon visibility-toggle<%= " visibility-toggle--hidden" if @plan.draft? %>"
+              class="btn btn--ghost btn--sm visibility-toggle<%= " visibility-toggle--hidden" if @plan.draft? %>"
               data-controller="coplan--visibility-toggle"
-              data-coplan--visibility-toggle-target="button"
-              data-action="coplan--visibility-toggle#click"
+              data-action="coplan--visibility-toggle#toggle"
               data-coplan--visibility-toggle-hidden-value="<%= @plan.draft? %>"
               data-coplan--visibility-toggle-publish-url-value="<%= publish_plan_path(@plan) %>"
               data-coplan--visibility-toggle-hide-url-value="<%= hide_plan_path(@plan) %>"
-              title="<%= @plan.draft? ? "Private — click to share with everyone" : "Shared with everyone — click to make it private" %>"
-              aria-label="Toggle plan visibility">
+              title="<%= @plan.draft? ? "Private — click to share with everyone in the org" : "Shared with everyone — click to make it private (the link keeps working)" %>">
         <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/><line class="visibility-toggle__slash" x1="3" y1="3" x2="21" y2="21"/></svg>
+        <span data-coplan--visibility-toggle-target="label"><%= @plan.draft? ? "Private" : "Shared" %></span>
       </button>
     <% end %>
     <%# One pen: the editor handles content, title, and tags together. %>
diff --git a/spec/requests/plan_events_spec.rb b/spec/requests/plan_events_spec.rb
index 59ebb00..a0c38be 100644
--- a/spec/requests/plan_events_spec.rb
+++ b/spec/requests/plan_events_spec.rb
@@ -81,6 +81,22 @@
       patch publish_plan_path(shared), headers: { "Accept" => "application/json" }
       expect(response.parsed_body["visibility"]).to eq("published")
     end
+
+    it "answers Turbo Streams for the visibility toggle: fresh header plus a toast" do
+      shared = create(:plan, :published, created_by_user: user)
+
+      patch hide_plan_path(shared), headers: { "Accept" => "text/vnd.turbo-stream.html" }
+      expect(response.media_type).to eq("text/vnd.turbo-stream.html")
+      expect(response.body).to include('target="plan-header"')
+      expect(response.body).to include("Private")
+      expect(response.body).to include('target="coplan-toasts"')
+
+      patch publish_plan_path(shared), headers: { "Accept" => "text/vnd.turbo-stream.html" }
+      expect(response.media_type).to eq("text/vnd.turbo-stream.html")
+      expect(response.body).to include('target="plan-header"')
+      expect(response.body).not_to include("state-flag")
+      expect(response.body).to include("Shared with everyone")
+    end
   end
 
   describe "POST /plans/:id/references (web)" do

From 3b7f300a3fdb06ed6f38c0e38a483cfcd681db93 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 10:44:47 -0400
Subject: [PATCH 03/11] Restructure the nav into three stable zones with staged
 collapse
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

space-between let the four nav children drift into detached islands at
wide widths (Workspace/Feed floating far from the logo), and nothing
outside the phone breakpoint was shrink-protected — between ~640 and
900px the gear and bell SVGs crushed to slivers while the bell's
absolutely-positioned unread badge stayed put, looking like a red dot
with no bell.

Now brand + primary links cluster left as one group, search floats in
the middle, controls hold the right edge (auto margins split the free
space). Icon controls never shrink; the user's name is the designated
truncator. A new 900px stage folds the search field into a round icon
button before anything else compresses; the 640px phone stage keeps
its icons-over-labels treatment.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../assets/stylesheets/coplan/application.css | 95 +++++++++++--------
 1 file changed, 57 insertions(+), 38 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index 6f66ec5..d4d0487 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -337,6 +337,10 @@ img, svg {
   z-index: 100;
 }
 
+/* Three zones: brand + primary links cluster on the left (they're one
+   thought — "where am I?"), search floats in the middle, controls hold
+   the right edge. The auto margins on links/right split the free space,
+   so nothing drifts into detached islands at wide widths. */
 .site-nav__inner {
   max-width: var(--max-width);
   margin: 0 auto;
@@ -344,7 +348,7 @@ img, svg {
   height: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--space-md);
 }
 
 .site-nav__brand {
@@ -355,6 +359,7 @@ img, svg {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  flex-shrink: 0;
 }
 
 .site-nav__logo {
@@ -384,7 +389,9 @@ img, svg {
   align-items: center;
   gap: var(--space-lg);
   list-style: none;
-  margin-left: var(--space-lg);
+  margin-left: var(--space-sm);
+  margin-right: auto;
+  flex-shrink: 0;
 }
 
 .site-nav__links a {
@@ -413,10 +420,21 @@ img, svg {
   color: var(--color-text);
 }
 
+/* The controls may compress as a group (the user's name truncates), but
+   the icons themselves never shrink — a gear crushed to a sliver, or a
+   bell whose badge outlives it, reads as breakage. */
 .site-nav__right {
   display: flex;
   align-items: center;
   gap: var(--space-lg);
+  margin-left: auto;
+  min-width: 0;
+}
+
+.site-nav__icon-link,
+.site-nav__bell,
+.inbox-dropdown {
+  flex-shrink: 0;
 }
 
 .site-nav__user {
@@ -426,6 +444,13 @@ img, svg {
   color: var(--color-text-muted);
   font-size: var(--text-sm);
   white-space: nowrap;
+  min-width: 0;
+}
+
+.site-nav__profile-link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Main content */
@@ -5252,6 +5277,34 @@ img.avatar {
   }
 }
 
+/* ---- Medium screens ----
+   The first thing the nav gives up is the search field's prose: the
+   placeholder and "/" hint fold into a round icon button before anything
+   else is allowed to compress. The name gets a truncation budget so the
+   controls never fight it for room. */
+@media (max-width: 900px) {
+  .site-nav__search-label,
+  .site-nav__search-kbd {
+    display: none;
+  }
+
+  .site-nav__search {
+    flex: 0 0 auto;
+    gap: 0;
+    padding: 8px;
+    margin: 0;
+    border-radius: 9999px;
+  }
+
+  .site-nav__right {
+    gap: var(--space-md);
+  }
+
+  .site-nav__profile-link {
+    max-width: 9rem;
+  }
+}
+
 /* ---- Phone-sized screens ----
    Reviewing your agents' work from a phone is a first-class flow —
    reading, commenting, and finding the right doc all have to work at
@@ -5262,12 +5315,9 @@ img.avatar {
     gap: var(--space-sm);
   }
 
-  /* Icons over labels: brand text, search placeholder, the "/" hint,
-     the settings gear, and the sign-out link all yield to the things a
-     phone visit is actually for. */
+  /* Icons over labels: brand text, the settings gear, and the sign-out
+     link all yield to the things a phone visit is actually for. */
   .site-nav__brand-text,
-  .site-nav__search-label,
-  .site-nav__search-kbd,
   .site-nav__icon-link,
   .site-nav__user a[data-turbo-method="delete"] {
     display: none;
@@ -5278,39 +5328,8 @@ img.avatar {
     gap: var(--space-md);
   }
 
-  .site-nav__search {
-    flex: 0 0 auto;
-    gap: 0;
-    padding: 8px;
-    margin: 0;
-    margin-left: auto;
-    border-radius: 9999px;
-  }
-
-  .site-nav__right {
-    gap: var(--space-md);
-  }
-
-  /* Nothing in the chrome gets crushed to make room for the user's full
-     name — the name is what truncates. */
-  .site-nav__brand,
-  .site-nav__logo,
-  .site-nav__bell,
-  .inbox-dropdown {
-    flex-shrink: 0;
-  }
-
-  .site-nav__user {
-    min-width: 0;
-  }
-
   .site-nav__profile-link {
-    display: inline-block;
     max-width: 6.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: bottom;
   }
 
   .main-content {

From 6c2dc3074f2012d613f63fdcdefb9f3d3bcbf531 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 10:52:51 -0400
Subject: [PATCH 04/11] Recompose the plan header: title band + metadata band

The old header jammed the avatar under the title at a flex edge, let the
bookmark orphan to the far right on any title wrap, and left uneven dead
space when optional chrome was absent.

- Title row: type icon pinned to the first title line; the save bookmark
  slot lives inside the h1 so it trails the final word wherever wrapping
  puts it.
- Meta row: avatar/byline/revision/state flag left, live presence right,
  indented to the title's text column so the block reads as one unit.
- Phone widths drop the indent and let presence wrap under the byline.

Verified at 1440/1024/760/390 in light and dark, and that visibility
toggles (which Turbo-Stream replace #plan-header) keep the bookmark,
state flag, and presence in sync.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../assets/stylesheets/coplan/application.css | 55 ++++++++++++++-----
 .../app/views/coplan/plans/_header.html.erb   | 27 +++++----
 2 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index d4d0487..92a6c7d 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -475,30 +475,53 @@ img, svg {
   font-weight: 700;
 }
 
-/* Plan page header: file icon + title, byline underneath — compact, the
-   document itself is the point. */
+/* Plan page header: file icon + title, then one metadata band — compact,
+   the document itself is the point. Everything here is broadcast-safe;
+   viewer-relative chrome (bookmark, owner actions) mounts from outside. */
 .page-header--plan {
+  display: block;
   margin-bottom: var(--space-sm);
-  align-items: flex-start;
 }
 
+/* The icon tops out with the title's first line, not the middle of a
+   wrapped block — it's a file icon, not a bullet. */
 .page-header__title-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--space-sm);
 }
 
+.page-header__title-row .plan-type-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
 .page-header__title {
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
+/* Byline left, presence right, one line. Indented to the title's text
+   column (icon width + gap) so title and metadata read as one block. */
+.page-header__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-top: var(--space-xs);
+  padding-left: calc(36px + var(--space-sm));
+}
+
 .page-header__byline {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
   flex-wrap: wrap;
-  margin-top: var(--space-xs);
+  min-width: 0;
+}
+
+.page-header__meta .plan-viewers {
+  margin-left: auto;
+  flex-shrink: 0;
 }
 
 /* Shelf chips (left) + owner actions (right) share one compact row. */
@@ -1062,12 +1085,6 @@ img.avatar {
   word-wrap: break-word;
 }
 
-/* Page header actions */
-.page-header__actions {
-  display: flex;
-  gap: var(--space-sm);
-}
-
 /* Version list */
 /* History split view */
 .history-split {
@@ -4068,17 +4085,21 @@ img.avatar {
   font-size: var(--text-xs);
 }
 
-/* The save bookmark sits beside the plan title (mounted into
+/* The save bookmark trails the plan title's last word (mounted into
    #plan-bookmark-slot by plan_bookmark_controller) — a quiet icon that
-   fills once the plan is on your shelf, like a bookmark star. */
+   fills once the plan is on your shelf, like a bookmark star. The slot
+   lives inside the h1 so it flows with the text and lands beside the
+   final word on every wrap, never orphaned at the far edge. */
 .plan-bookmark-slot {
   display: inline-flex;
   align-items: center;
+  vertical-align: middle;
 }
 
 .plan-bookmark {
   display: inline-flex;
   align-items: center;
+  margin-left: var(--space-sm);
   padding: 4px;
   border: none;
   border-radius: var(--radius);
@@ -5346,6 +5367,14 @@ img.avatar {
     overflow-wrap: anywhere;
   }
 
+  /* At phone widths the text-column indent costs more than it aligns —
+     metadata takes the full line, and presence wraps under it if the
+     byline is long. */
+  .page-header__meta {
+    padding-left: 0;
+    flex-wrap: wrap;
+  }
+
   .plan-document {
     padding: var(--space-md);
   }
diff --git a/engine/app/views/coplan/plans/_header.html.erb b/engine/app/views/coplan/plans/_header.html.erb
index 638a564..47acf17 100644
--- a/engine/app/views/coplan/plans/_header.html.erb
+++ b/engine/app/views/coplan/plans/_header.html.erb
@@ -1,17 +1,22 @@
 <%# The five-state status (and #146's badge menu) is gone — visibility is
-    the only state, toggled by the header eye; the type reads as the file
-    icon next to the title. %>
+    the only state, toggled by the visibility button; the type reads as the
+    file icon next to the title.
+
+    Two deliberate bands, both broadcast-safe (derive from the plan alone):
+      1. Title row — icon + title, with the save bookmark flowing inline
+         after the title's last word so it lands sensibly on every wrap.
+      2. Meta row — byline on the left, live presence on the right,
+         indented to the title's text column so it reads as one block. %>
 <div class="page-header page-header--plan" id="plan-header">
-  <div class="page-header__main">
-    <div class="page-header__title-row">
-      <%= plan_type_icon(plan, size: :lg) %>
-      <h1 class="page-header__title"><%= plan.title %></h1>
-      <%# The save bookmark mounts here from outside this partial: it's
+  <div class="page-header__title-row">
+    <%= plan_type_icon(plan, size: :lg) %>
+    <h1 class="page-header__title"><%= plan.title %><%# The save bookmark mounts here from outside this partial: it's
           viewer-relative (needs current_user), and this header re-renders
           from broadcasts where there is none — plan_bookmark_controller
-          re-stamps it after every replace. %>
-      <span id="plan-bookmark-slot" class="plan-bookmark-slot"></span>
-    </div>
+          re-stamps it after every replace. Inside the h1 so it trails the
+          last word of the title, wherever wrapping puts it. %><span id="plan-bookmark-slot" class="plan-bookmark-slot"></span></h1>
+  </div>
+  <div class="page-header__meta">
     <div class="page-header__byline text-sm text-muted">
       <%= user_avatar(plan.created_by_user) %> <%= profile_link(plan.created_by_user) %> · v<%= plan.current_revision %><%= plan_state_badge(plan) %>
       <%# A tag on someone's plan reads as "find more like this", not "filter
@@ -22,8 +27,6 @@
               title: "Search plans tagged “#{tag.name}”" %>
       <% end %>
     </div>
-  </div>
-  <div class="page-header__actions">
     <%= render partial: "coplan/plans/viewers", locals: { viewers: CoPlan::PlanViewer.active_viewers_for(plan), current_user: current_user } %>
   </div>
 </div>

From ffae851023b5eabc261dbd91382b1cf1d019456e Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 10:57:01 -0400
Subject: [PATCH 05/11] Gather plan owner actions into a glass pill toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The visibility/edit/archive/history controls floated as loose icons along
the document's top edge, reading as scattered chrome — especially when
the shelf strip on the left was empty. One translucent pill (existing
--glass-* tokens, alpha fallback where backdrop-filter is unsupported)
makes them read as a single toolbar; buttons inside go fully round so
container and control curves agree.

Verified in light/dark at 1440/640/390, with and without shelf chips.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../assets/stylesheets/coplan/application.css | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index 92a6c7d..8ce0e24 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -3993,14 +3993,28 @@ img.avatar {
   background: var(--color-surface);
 }
 
-/* Plan owner actions (show page): quiet icon buttons tucked at the top
-   right of the document, out of the content's way. */
+/* Plan owner actions (show page): one glass pill at the top right of the
+   document, so the controls read as a single toolbar rather than icons
+   scattered along the edge. Falls back to a translucent solid where
+   backdrop-filter is unsupported (the tokens carry alpha regardless). */
 .plan-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-sm);
+  gap: var(--space-xs);
+  padding: 3px;
+  border: 1px solid var(--glass-edge);
+  border-radius: 9999px;
+  background: var(--glass-bg);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  box-shadow: var(--shadow-glass);
+}
+
+/* Inside the pill, buttons go fully round so the container's curve and
+   the controls' curves agree. */
+.plan-actions .btn {
+  border-radius: 9999px;
 }
 
 /* Square icon-only button. */

From f6186921f4694676211d51851e6c5055cc386718 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 11:07:01 -0400
Subject: [PATCH 06/11] Update visibility system specs to the one-click toggle

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 spec/system/human_editing_spec.rb | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/spec/system/human_editing_spec.rb b/spec/system/human_editing_spec.rb
index d2375e6..7826a10 100644
--- a/spec/system/human_editing_spec.rb
+++ b/spec/system/human_editing_spec.rb
@@ -74,30 +74,21 @@ def sign_in(user)
     expect(page).to have_field("content", with: /Preview me/)
   end
 
-  it "toggles visibility with the header eye — two clicks each way, no reload" do
+  it "toggles visibility with one labeled click each way, no reload" do
     plan.update!(visibility: "draft")
     visit plan_path(plan)
 
-    eye = find(".visibility-toggle")
-    eye.click # arm: previews the flip
-    eye.click # confirm: commits via fetch
-    expect(page).to have_css(".visibility-toggle[title^='Shared']", wait: 5)
+    expect(page).to have_css(".visibility-toggle", text: "Private")
+    find(".visibility-toggle").click
+    expect(page).to have_css(".visibility-toggle", text: "Shared", wait: 5)
+    expect(page).to have_content("Shared with everyone in the org.")
     expect(plan.reload.visibility).to eq("published")
 
-    # And back — hiding a shared plan is allowed now, same two clicks.
-    eye.click
-    eye.click
-    expect(page).to have_css(".visibility-toggle--hidden[title^='Private']", wait: 5)
-    expect(plan.reload.visibility).to eq("draft")
-  end
-
-  it "reverts an unconfirmed visibility flip instead of committing it" do
-    plan.update!(visibility: "draft")
-    visit plan_path(plan)
-
-    find(".visibility-toggle").click # armed…
-    # …but never confirmed: the preview reverts on its own.
-    expect(page).to have_css(".visibility-toggle--hidden[title^='Private']", wait: 6)
+    # And back — hiding a shared plan is allowed, same single click. The
+    # server Turbo Stream replaces the header, so re-find the button.
+    find(".visibility-toggle").click
+    expect(page).to have_css(".visibility-toggle--hidden", text: "Private", wait: 5)
+    expect(page).to have_content("Private again — hidden from lists and search.")
     expect(plan.reload.visibility).to eq("draft")
   end
 

From 2ab04cdc34182904a045de84b06086f005cc14f5 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 11:29:23 -0400
Subject: [PATCH 07/11] Harden the visibility toggle against races and external
 changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three correctness fixes from design review:

- Abort the in-flight request on disconnect and refuse to render a stale
  Turbo Stream after navigation, so a late response can't replace another
  plan's header.
- The header's data-plan-visibility flag is now the authoritative state;
  the toggle (which lives outside the broadcast-replaced #plan-header)
  watches header replacements and mirrors it, so an API publish or another
  tab's toggle keeps the button honest instead of leaving it stuck.
- A failed response no longer asserts the old state (the server may have
  committed before the response was lost) — reload and toast instead,
  using the same reload-then-toast pattern as folder_dnd.

Also: role=toolbar on the plan actions pill, and a system spec covering
the external header-replacement sync.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../coplan/visibility_toggle_controller.js    | 69 +++++++++++++++++--
 .../app/views/coplan/plans/_header.html.erb   |  6 +-
 engine/app/views/coplan/plans/show.html.erb   |  2 +-
 spec/system/human_editing_spec.rb             | 19 +++++
 4 files changed, 87 insertions(+), 9 deletions(-)

diff --git a/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js b/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
index 735e263..541af61 100644
--- a/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
+++ b/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
@@ -7,11 +7,28 @@ import { Controller } from "@hotwired/stimulus"
 //
 // The button repaints optimistically, then the server confirms with Turbo
 // Streams (a #plan-header re-render carrying the state flag, plus a toast).
-// If the request fails, the button reverts to the real state.
+// The button itself lives outside the broadcast-replaced header (it's
+// policy-gated), so it watches header replacements and syncs from the
+// header's data-plan-visibility flag — that's how an API publish or another
+// tab's toggle updates this button too.
 export default class extends Controller {
   static values = { hidden: Boolean, publishUrl: String, hideUrl: String }
   static targets = ["label"]
 
+  connect() {
+    this.abortController = new AbortController()
+    const header = document.getElementById("plan-header")
+    if (header?.parentNode) {
+      this.headerObserver = new MutationObserver(() => this._syncFromHeader())
+      this.headerObserver.observe(header.parentNode, { childList: true })
+    }
+  }
+
+  disconnect() {
+    this.abortController.abort()
+    this.headerObserver?.disconnect()
+  }
+
   async toggle() {
     if (this._busy) return
     this._busy = true
@@ -26,19 +43,46 @@ export default class extends Controller {
         headers: {
           "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.content,
           "Accept": "text/vnd.turbo-stream.html"
-        }
+        },
+        signal: this.abortController.signal
       })
       if (!response.ok) throw new Error("Could not change visibility")
-      window.Turbo?.renderStreamMessage(await response.text())
-    } catch {
-      // Put the button back the way the server still has it.
-      this.hiddenValue = wasHidden
-      this._paint()
+      const stream = await response.text()
+      // Turbo may have navigated away while the request was in flight — a
+      // stream aimed at this page's #plan-header must not land on the next
+      // page's header.
+      if (!this.element.isConnected) return
+      window.Turbo?.renderStreamMessage(stream)
+    } catch (error) {
+      if (error?.name === "AbortError") return
+      // A failed response is ambiguous — the server may have committed the
+      // flip before the response was lost. Don't assert the old state:
+      // reload and let the server say what's true (same reload-then-toast
+      // pattern as folder_dnd).
+      if (window.Turbo) {
+        document.addEventListener("turbo:load",
+          () => this._toast("Couldn't confirm the visibility change — showing the current state.", "alert"),
+          { once: true })
+        window.Turbo.visit(window.location.href, { action: "replace" })
+      } else {
+        window.location.reload()
+      }
     } finally {
       this._busy = false
     }
   }
 
+  // The server's #plan-header re-render (from our own request or any
+  // broadcast) is the authority — mirror its state flag onto the button.
+  _syncFromHeader() {
+    const state = document.getElementById("plan-header")?.dataset.planVisibility
+    if (!state) return
+    const hidden = state === "draft"
+    if (hidden === this.hiddenValue) return
+    this.hiddenValue = hidden
+    this._paint()
+  }
+
   _paint() {
     this.element.classList.toggle("visibility-toggle--hidden", this.hiddenValue)
     if (this.hasLabelTarget) {
@@ -48,4 +92,15 @@ export default class extends Controller {
       "Private — click to share with everyone in the org" :
       "Shared with everyone — click to make it private (the link keeps working)"
   }
+
+  _toast(message, kind) {
+    const container = document.getElementById("coplan-toasts")
+    if (!container) return
+    const toast = document.createElement("div")
+    toast.className = `flash flash--${kind} toasts__toast`
+    toast.setAttribute("role", "status")
+    toast.textContent = message
+    toast.setAttribute("data-controller", "coplan--toast")
+    container.appendChild(toast)
+  }
 }
diff --git a/engine/app/views/coplan/plans/_header.html.erb b/engine/app/views/coplan/plans/_header.html.erb
index 47acf17..f21b9ea 100644
--- a/engine/app/views/coplan/plans/_header.html.erb
+++ b/engine/app/views/coplan/plans/_header.html.erb
@@ -7,7 +7,11 @@
          after the title's last word so it lands sensibly on every wrap.
       2. Meta row — byline on the left, live presence on the right,
          indented to the title's text column so it reads as one block. %>
-<div class="page-header page-header--plan" id="plan-header">
+<%# data-plan-visibility is the authoritative state flag: the visibility
+    toggle (outside this partial — it's policy-gated) watches header
+    replacements and mirrors this value, so API publishes and other tabs
+    keep the button honest. %>
+<div class="page-header page-header--plan" id="plan-header" data-plan-visibility="<%= plan.visibility %>">
   <div class="page-header__title-row">
     <%= plan_type_icon(plan, size: :lg) %>
     <h1 class="page-header__title"><%= plan.title %><%# The save bookmark mounts here from outside this partial: it's
diff --git a/engine/app/views/coplan/plans/show.html.erb b/engine/app/views/coplan/plans/show.html.erb
index c3e244a..a01508a 100644
--- a/engine/app/views/coplan/plans/show.html.erb
+++ b/engine/app/views/coplan/plans/show.html.erb
@@ -59,7 +59,7 @@
     current_user). %>
 <div class="plan-meta-row">
   <%= render partial: "coplan/plans/shelves", locals: { placements: @shelf_placements } %>
-  <div class="plan-actions">
+  <div class="plan-actions" role="toolbar" aria-label="Plan actions">
     <% if allowed_to?(@plan, :publish?) || allowed_to?(@plan, :hide?) %>
       <%# The visibility toggle: open eye = shared with everyone, slashed =
           Private. One click commits (it's a two-way switch); the server
diff --git a/spec/system/human_editing_spec.rb b/spec/system/human_editing_spec.rb
index 7826a10..9cb7a3a 100644
--- a/spec/system/human_editing_spec.rb
+++ b/spec/system/human_editing_spec.rb
@@ -92,6 +92,25 @@ def sign_in(user)
     expect(plan.reload.visibility).to eq("draft")
   end
 
+  it "keeps the visibility button in sync when the header is replaced externally" do
+    plan.update!(visibility: "draft")
+    visit plan_path(plan)
+    expect(page).to have_css(".visibility-toggle--hidden", text: "Private")
+
+    # An API publish or another tab's toggle reaches this page as a
+    # broadcast replacing #plan-header with a re-render that carries the new
+    # state flag. Simulate that replacement and check the button follows.
+    page.execute_script(<<~JS)
+      const header = document.getElementById("plan-header")
+      const fresh = header.cloneNode(true)
+      fresh.dataset.planVisibility = "published"
+      header.replaceWith(fresh)
+    JS
+
+    expect(page).to have_css(".visibility-toggle", text: "Shared", wait: 5)
+    expect(page).not_to have_css(".visibility-toggle--hidden")
+  end
+
   it "archives and restores the plan" do
     visit plan_path(plan)
 

From a22a1bde20145f75bbb8cfd3beeedb7cacf6cfdd Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 14:40:54 -0400
Subject: [PATCH 08/11] Rebuild the plan masthead: two rows, a labeled toolbar,
 one menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The plan page's top was three loose rows of mixed concerns — title,
byline with folder chips, then a strip where actions (archive, eye
toggle) sat next to navigation (history) with an unlabeled bookmark
jammed into the title. This makes it two rows with clear ownership:

- #plan-header (broadcast-replaced) carries only the plan's identity:
  type icon + title, byline, and rare-state flags (Private/Archived).
- The masthead's side column (viewer-relative, request-rendered) holds
  presence and a glass toolbar: a labeled Edit for people who can edit,
  a labeled Save/Saved for readers, and one ⋯ menu for everything
  else — History, Move to folder…, visibility, and Archive (styled
  destructive, behind a separator).

Folder chips and tags leave the reading surface: organizing is a menu
action (like Docs' move control), not persistent chrome. The bookmark
is gone — Save opens the folder navigator; clicking Saved reopens it
with an explicit Remove row, so letting go is deliberate, never an
accidental toggle or a scroll jump.

Visibility and archive now respond as Turbo Streams that re-render the
header, toolbar, and (for archive) a banner slot in place — fixing the
production bug where the eye toggle fought the broadcast-replaced
header and "Private" stuck around until a refresh. Archiving shows its
consequence right where it happened: a banner explaining the plan is
hidden from lists, with Restore as the undo.

Presence moved outside #plan-header, so plan broadcasts can no longer
clobber viewer-relative state (the "(you)" pill survives edits now).
The h1's accessible name is the title alone again.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../assets/stylesheets/coplan/application.css | 240 +++++++++---------
 .../controllers/coplan/plans_controller.rb    |  39 ++-
 .../coplan/folder_picker_controller.js        |  36 ++-
 .../controllers/coplan/menu_controller.js     |  41 +++
 .../coplan/plan_bookmark_controller.js        |  30 ---
 .../coplan/visibility_toggle_controller.js    | 106 --------
 .../app/views/coplan/plans/_banner.html.erb   |  13 +
 .../app/views/coplan/plans/_header.html.erb   |  34 +--
 .../app/views/coplan/plans/_shelves.html.erb  |  34 ---
 .../app/views/coplan/plans/_toolbar.html.erb  |  82 ++++++
 engine/app/views/coplan/plans/index.html.erb  |   4 +-
 engine/app/views/coplan/plans/show.html.erb   |  87 +------
 .../coplan/shared/_folder_picker.html.erb     |  20 +-
 spec/requests/plans_spec.rb                   |   8 +-
 spec/system/folders_workspace_spec.rb         |  56 ++--
 spec/system/history_spec.rb                   |   8 +-
 spec/system/human_editing_spec.rb             |  82 +++---
 17 files changed, 440 insertions(+), 480 deletions(-)
 create mode 100644 engine/app/javascript/controllers/coplan/menu_controller.js
 delete mode 100644 engine/app/javascript/controllers/coplan/plan_bookmark_controller.js
 delete mode 100644 engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
 create mode 100644 engine/app/views/coplan/plans/_banner.html.erb
 delete mode 100644 engine/app/views/coplan/plans/_shelves.html.erb
 create mode 100644 engine/app/views/coplan/plans/_toolbar.html.erb

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index 8ce0e24..e56e74e 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -475,12 +475,41 @@ img, svg {
   font-weight: 700;
 }
 
+/* The plan masthead: two visual rows. Row one is the title (wrapping
+   naturally, as wide as it needs). Row two is the byline on the left and
+   the viewer-relative side column (presence + toolbar) on the right —
+   bottom-aligning the side column against the header makes the toolbar
+   sit level with the byline, so the whole block reads as two bands even
+   though it's two DOM subtrees (broadcasts own the left, the request
+   owns the right). */
+.plan-masthead {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-sm) var(--space-lg);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-md);
+}
+
+.plan-masthead__side {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-left: auto;
+  flex-shrink: 0;
+  /* Level the toolbar pill's baseline band with the byline text. */
+  margin-bottom: -2px;
+}
+
 /* Plan page header: file icon + title, then one metadata band — compact,
    the document itself is the point. Everything here is broadcast-safe;
-   viewer-relative chrome (bookmark, owner actions) mounts from outside. */
+   viewer-relative chrome (Save, owner toolbar) lives in the masthead's
+   side column, outside this subtree. */
 .page-header--plan {
   display: block;
-  margin-bottom: var(--space-sm);
+  margin-bottom: 0;
+  flex: 1;
+  min-width: min(24rem, 100%);
 }
 
 /* The icon tops out with the title's first line, not the middle of a
@@ -519,30 +548,6 @@ img, svg {
   min-width: 0;
 }
 
-.page-header__meta .plan-viewers {
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-/* Shelf chips (left) + owner actions (right) share one compact row. */
-.plan-meta-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-md);
-  flex-wrap: wrap;
-  margin-bottom: var(--space-md);
-}
-
-.plan-meta-row .plan-shelves,
-.plan-meta-row .plan-actions {
-  margin-bottom: 0;
-}
-
-.plan-meta-row .plan-actions {
-  margin-left: auto;
-}
-
 /* Plan viewers / presence */
 .plan-viewers {
   display: flex;
@@ -2677,18 +2682,7 @@ img.avatar {
   text-decoration: none;
 }
 
-/* The visibility toggle: a labeled eye that reads as the plan's current
-   state. The slash appears when Private (matching the state flag's
-   crossed eye). One click commits — the label repaints optimistically. */
-.visibility-toggle .visibility-toggle__slash {
-  display: none;
-}
-
-.visibility-toggle--hidden .visibility-toggle__slash {
-  display: initial;
-}
-
-/* Folder-picker navigator (the bookmark's popover) */
+/* Folder-picker navigator (the Save / Move-to-folder popover) */
 .folder-picker__plan {
   margin: 0 0 var(--space-sm);
 }
@@ -2753,6 +2747,33 @@ img.avatar {
   font-weight: 600;
 }
 
+/* "Remove from library" — shown in the navigator only when the trigger
+   was already saved. Letting go is a labeled, deliberate choice down
+   here, never a surprise toggle on the Save button itself. */
+.folder-picker__remove {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  width: 100%;
+  margin-top: var(--space-sm);
+  padding: 5px var(--space-sm);
+  border: none;
+  border-top: 1px solid var(--color-border);
+  border-radius: 0 0 var(--radius) var(--radius);
+  background: none;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  padding-top: calc(5px + var(--space-xs));
+}
+
+.folder-picker__remove:hover {
+  color: var(--color-danger);
+  background: var(--color-danger-soft);
+}
+
 /* History page (the plan's time machine) */
 .history-page {
   padding: var(--space-lg);
@@ -4027,115 +4048,94 @@ img.avatar {
   display: block;
 }
 
-/* Archive sits slightly apart from the constructive actions — same
-   corner, small gap (a full-width split reads as a stray icon). */
-.plan-actions__archive {
-  margin-left: var(--space-sm);
+/* The Save control (readers only): a labeled bookmark. Saved = filled
+   icon + accent, and clicking it opens the navigator to move or remove —
+   it never unsaves on the spot. */
+.plan-save--saved {
+  color: var(--color-primary);
 }
 
-/* Full-width state banner on the plan page (e.g. archived notice). */
-.plan-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-md);
-  padding: var(--space-sm) var(--space-md);
-  margin-bottom: var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  background: var(--color-status-abandoned-bg);
-  color: var(--color-text-muted);
-  font-size: var(--text-sm);
+/* Dropdown menu on the native Popover API — the toolbar's ⋯ overflow.
+   Same glass as the pill it hangs from. Position is set inline by
+   menu_controller (popovers open centered by default). */
+.menu {
+  min-width: 13.5rem;
+  padding: var(--space-xs);
+  border: 1px solid var(--glass-edge);
+  border-radius: var(--radius-lg);
+  background: var(--glass-bg-strong);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  box-shadow: var(--shadow-glass);
+  color: var(--color-text);
 }
 
-/* Archived rows stay legible but visually recede. */
-.plan-row--archived {
-  opacity: 0.65;
+/* button_to wraps its button in a form — flatten it out of the layout. */
+.menu__form {
+  display: contents;
 }
 
-/* Folder-jump strip on the plan page: which library shelves hold this
-   plan, plus the "add to your library" quick control. */
-.plan-shelves {
+.menu__item {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-xs) var(--space-sm);
-  margin-bottom: var(--space-md);
-  font-size: var(--text-sm);
-}
-
-/* Drive-style folder chip: small folder glyph + the folder's name. */
-.plan-shelves__chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 12px 3px 9px;
-  border: 1px solid var(--color-border);
-  border-radius: 9999px;
-  background: var(--color-surface);
+  gap: var(--space-sm);
+  width: 100%;
+  padding: 6px var(--space-sm);
+  border: none;
+  border-radius: var(--radius);
+  background: none;
   color: var(--color-text);
-  text-decoration: none;
   font-size: var(--text-sm);
-  line-height: 1.4;
-  transition: background 0.12s ease, border-color 0.12s ease;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
 }
 
-.plan-shelves__chip:hover {
+.menu__item:hover {
   background: var(--color-bg-muted);
-  border-color: var(--color-border-strong);
+  text-decoration: none;
 }
 
-.plan-shelves__chip-icon {
-  color: var(--color-text-muted);
+.menu__item svg {
   flex-shrink: 0;
+  color: var(--color-text-muted);
 }
 
-.plan-shelves__chip--theirs .plan-shelves__chip-icon {
-  color: var(--color-agent);
+/* Destructive actions read as such before you commit to them. */
+.menu__item--danger,
+.menu__item--danger svg {
+  color: var(--color-danger);
 }
 
-.plan-shelves__chip-owner {
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
+.menu__item--danger:hover {
+  background: var(--color-danger-soft);
 }
 
-/* The save bookmark trails the plan title's last word (mounted into
-   #plan-bookmark-slot by plan_bookmark_controller) — a quiet icon that
-   fills once the plan is on your shelf, like a bookmark star. The slot
-   lives inside the h1 so it flows with the text and lands beside the
-   final word on every wrap, never orphaned at the far edge. */
-.plan-bookmark-slot {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
+.menu__separator {
+  height: 1px;
+  margin: var(--space-xs) calc(-1 * var(--space-xs));
+  background: var(--color-border);
 }
 
-.plan-bookmark {
-  display: inline-flex;
+/* Full-width state banner on the plan page (e.g. archived notice). */
+.plan-banner {
+  display: flex;
   align-items: center;
-  margin-left: var(--space-sm);
-  padding: 4px;
-  border: none;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+  margin-bottom: var(--space-md);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius);
-  background: transparent;
+  background: var(--color-status-abandoned-bg);
   color: var(--color-text-muted);
-  cursor: pointer;
-  transition: color 0.12s ease, background 0.12s ease;
-}
-
-.plan-bookmark:hover {
-  color: var(--color-primary);
-  background: var(--color-primary-light);
-}
-
-.plan-bookmark--saved {
-  color: var(--color-primary);
+  font-size: var(--text-sm);
 }
 
-/* Saved = a second click removes; hint at that on hover. */
-.plan-bookmark--saved:hover {
-  color: var(--color-danger, #e0637a);
-  background: color-mix(in srgb, var(--color-danger, #e0637a) 10%, transparent);
+/* Archived rows stay legible but visually recede. */
+.plan-row--archived {
+  opacity: 0.65;
 }
 
 /* Library browsing page (read-only shelves) */
@@ -5381,9 +5381,7 @@ img.avatar {
     overflow-wrap: anywhere;
   }
 
-  /* At phone widths the text-column indent costs more than it aligns —
-     metadata takes the full line, and presence wraps under it if the
-     byline is long. */
+  /* At phone widths the text-column indent costs more than it aligns. */
   .page-header__meta {
     padding-left: 0;
     flex-wrap: wrap;
diff --git a/engine/app/controllers/coplan/plans_controller.rb b/engine/app/controllers/coplan/plans_controller.rb
index 9c04f27..23e1692 100644
--- a/engine/app/controllers/coplan/plans_controller.rb
+++ b/engine/app/controllers/coplan/plans_controller.rb
@@ -142,9 +142,8 @@ def show
       # Old ?tab=history links: history is its own page now (the other
       # former tabs are same-page sections).
       return redirect_to history_plan_path(@plan) if params[:tab] == "history"
-      # Folder-jump discovery: every shelf this plan sits on. The plan
-      # itself is already authorized above, and placements inherit the
-      # plan's visibility — a shelf never reveals more than the plan does.
+      # The viewer's own placement (if any) drives the toolbar's
+      # Save/Saved state and the folder navigator's current-folder mark.
       @shelf_placements = @plan.placements
         .includes(:library, folder: { parent: :parent })
         .order(:created_at)
@@ -316,12 +315,19 @@ def hide
       end
     end
 
+    # Archiving happens in place: the banner appears (with Restore — the
+    # undo), the toolbar's menu loses its Archive entry, and a toast
+    # confirms. No navigation, so the consequence is visible right where
+    # the action happened.
     def archive
       authorize!(@plan, :archive?)
       @plan.update!(archived_at: Time.current)
       broadcast_plan_update(@plan)
       Plans::LogEvent.call(plan: @plan, actor: current_user, event_type: "archived")
-      redirect_to plan_path(@plan), notice: "Plan archived. It's hidden from lists unless someone filters for archived plans."
+      respond_to do |format|
+        format.turbo_stream { render turbo_stream: archive_streams("Archived — hidden from lists, still readable at this URL.") }
+        format.html { redirect_to plan_path(@plan), notice: "Plan archived. It's hidden from lists unless someone filters for archived plans." }
+      end
     end
 
     def unarchive
@@ -329,7 +335,10 @@ def unarchive
       @plan.update!(archived_at: nil)
       broadcast_plan_update(@plan)
       Plans::LogEvent.call(plan: @plan, actor: current_user, event_type: "unarchived")
-      redirect_to plan_path(@plan), notice: "Plan restored."
+      respond_to do |format|
+        format.turbo_stream { render turbo_stream: archive_streams("Plan restored.") }
+        format.html { redirect_to plan_path(@plan), notice: "Plan restored." }
+      end
     end
 
     def toggle_checkbox
@@ -669,11 +678,27 @@ def broadcast_plan_update(plan)
       Broadcaster.replace_to(plan, target: "plan-header", partial: "coplan/plans/header", locals: { plan: plan })
     end
 
-    # Turbo Streams for a visibility change: re-render the header (state
-    # flag + toggle) in the acting browser and confirm with a toast.
+    # Turbo Streams for a visibility change: re-render the header (the
+    # byline's Private flag) and the toolbar (whose menu offers the
+    # opposite direction now) in the acting browser, and confirm with a
+    # toast.
     def visibility_streams(message)
       [
         turbo_stream.replace("plan-header", partial: "coplan/plans/header", locals: { plan: @plan }),
+        turbo_stream.replace("plan-toolbar", partial: "coplan/plans/toolbar", locals: { plan: @plan }),
+        toast_stream(message, "notice")
+      ]
+    end
+
+    # Turbo Streams for archive/restore: the banner slot is the loud,
+    # visible consequence (it appears with a Restore button — the undo),
+    # the header's byline picks up/drops the Archived flag, and the
+    # toolbar re-renders so its menu tracks the new state.
+    def archive_streams(message)
+      [
+        turbo_stream.replace("plan-header", partial: "coplan/plans/header", locals: { plan: @plan }),
+        turbo_stream.replace("plan-banner-slot", partial: "coplan/plans/banner", locals: { plan: @plan }),
+        turbo_stream.replace("plan-toolbar", partial: "coplan/plans/toolbar", locals: { plan: @plan }),
         toast_stream(message, "notice")
       ]
     end
diff --git a/engine/app/javascript/controllers/coplan/folder_picker_controller.js b/engine/app/javascript/controllers/coplan/folder_picker_controller.js
index 97776c6..9ab7dc3 100644
--- a/engine/app/javascript/controllers/coplan/folder_picker_controller.js
+++ b/engine/app/javascript/controllers/coplan/folder_picker_controller.js
@@ -1,13 +1,13 @@
 import { Controller } from "@hotwired/stimulus"
 
-// The "save to library" bookmark. Behaves like a browser bookmark star:
-// unsaved, a click opens the folder navigator popover (the viewer's folder
-// tree, a little filesystem) to pick where it goes; saved, a click just
-// removes it — no dialog, no toast — and you can re-add if you want. One
-// shared popover per page — triggers carry the plan's move URL, current
-// folder, and saved state so rows and the plan header can all reuse it.
+// The folder navigator popover: the viewer's folder tree, a little
+// filesystem. Every trigger opens it — Save on someone's plan, "Move to
+// folder…" in the plan menu, workspace row fallbacks. Triggers carry the
+// plan's move URL, current folder, and saved state; already-saved triggers
+// get a "Remove from library" row inside the navigator, so removal is a
+// deliberate labeled choice instead of a surprise toggle on the trigger.
 export default class extends Controller {
-  static targets = ["modal", "title"]
+  static targets = ["modal", "title", "heading", "remove", "removeLabel"]
 
   open(event) {
     event.preventDefault()
@@ -15,12 +15,17 @@ export default class extends Controller {
     this._moveUrl = trigger.dataset.moveUrl
     this._currentFolderId = trigger.dataset.currentFolderId || ""
 
-    // Already saved: the second click unbookmarks, quietly.
-    if (trigger.dataset.saved === "true") {
-      this._patch("", { quiet: true })
-      return
+    if (this.hasHeadingTarget) {
+      this.headingTarget.textContent = trigger.dataset.pickerHeading || "Save to library"
+    }
+    if (this.hasRemoveTarget) {
+      this.removeTarget.hidden = trigger.dataset.saved !== "true"
+      if (this.hasRemoveLabelTarget) {
+        // "Remove" means different things per trigger: a reader letting a
+        // saved plan go entirely vs. an owner unfiling their own plan.
+        this.removeLabelTarget.textContent = trigger.dataset.removeLabel || "Remove from library"
+      }
     }
-
     if (this.hasTitleTarget && trigger.dataset.planTitle) {
       this.titleTarget.textContent = trigger.dataset.planTitle
     }
@@ -45,6 +50,13 @@ export default class extends Controller {
     this._patch(folderId)
   }
 
+  // The "Remove from library" row inside the navigator (only shown when
+  // the trigger was already saved).
+  remove() {
+    if (!this._moveUrl) return
+    this._patch("")
+  }
+
   _patch(folderId, { quiet = false } = {}) {
     const token = document.querySelector('meta[name="csrf-token"]')?.content
     fetch(this._moveUrl, {
diff --git a/engine/app/javascript/controllers/coplan/menu_controller.js b/engine/app/javascript/controllers/coplan/menu_controller.js
new file mode 100644
index 0000000..70222fe
--- /dev/null
+++ b/engine/app/javascript/controllers/coplan/menu_controller.js
@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+// A small dropdown menu on the native Popover API (light-dismiss and Esc
+// for free). Popovers open centered by default; this anchors the menu
+// under its trigger's right edge on every open, and closes it on scroll
+// so it never floats away from the button.
+export default class extends Controller {
+  static targets = ["trigger", "menu"]
+
+  reposition(event) {
+    if (event.newState !== "open") {
+      this.#stopWatchingScroll()
+      return
+    }
+    const rect = this.triggerTarget.getBoundingClientRect()
+    const menu = this.menuTarget
+    menu.style.position = "fixed"
+    menu.style.margin = "0"
+    menu.style.top = `${rect.bottom + 6}px`
+    menu.style.left = "auto"
+    menu.style.right = `${Math.max(window.innerWidth - rect.right, 8)}px`
+    this.#watchScroll()
+  }
+
+  close() {
+    try { this.menuTarget.hidePopover() } catch {}
+  }
+
+  disconnect() {
+    this.#stopWatchingScroll()
+  }
+
+  #watchScroll() {
+    this.scrollHandler ||= () => this.close()
+    window.addEventListener("scroll", this.scrollHandler, { passive: true, once: true })
+  }
+
+  #stopWatchingScroll() {
+    if (this.scrollHandler) window.removeEventListener("scroll", this.scrollHandler)
+  }
+}
diff --git a/engine/app/javascript/controllers/coplan/plan_bookmark_controller.js b/engine/app/javascript/controllers/coplan/plan_bookmark_controller.js
deleted file mode 100644
index 594b64c..0000000
--- a/engine/app/javascript/controllers/coplan/plan_bookmark_controller.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-// Mounts the save bookmark into the plan header's title row. The bookmark
-// is viewer-relative (saved state, move URL) so it can't be rendered inside
-// the broadcast-replaced #plan-header partial — instead the show view
-// renders it into a <template> and this controller stamps a fresh copy into
-// #plan-bookmark-slot on load and again after every broadcast replaces the
-// header.
-export default class extends Controller {
-  static targets = ["template"]
-
-  connect() {
-    this.observer = new MutationObserver(() => this.#mount())
-    this.observer.observe(this.element, { childList: true, subtree: true })
-    this.#mount()
-  }
-
-  disconnect() {
-    this.observer.disconnect()
-  }
-
-  #mount() {
-    if (!this.hasTemplateTarget) return
-    const slot = this.element.querySelector("#plan-bookmark-slot")
-    // Stamping into the slot re-fires the observer; the childElementCount
-    // check makes that re-entry a no-op instead of a loop.
-    if (!slot || slot.childElementCount > 0) return
-    slot.append(this.templateTarget.content.cloneNode(true))
-  }
-}
diff --git a/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js b/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
deleted file mode 100644
index 541af61..0000000
--- a/engine/app/javascript/controllers/coplan/visibility_toggle_controller.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-// The plan visibility toggle (author only). Open eye = shared with everyone
-// in the org, slashed eye = Private. One click commits — visibility is a
-// two-way switch (see PlanPolicy#publish?/#hide?), so there is nothing to
-// guard with a dialog: flipping it back is one more click.
-//
-// The button repaints optimistically, then the server confirms with Turbo
-// Streams (a #plan-header re-render carrying the state flag, plus a toast).
-// The button itself lives outside the broadcast-replaced header (it's
-// policy-gated), so it watches header replacements and syncs from the
-// header's data-plan-visibility flag — that's how an API publish or another
-// tab's toggle updates this button too.
-export default class extends Controller {
-  static values = { hidden: Boolean, publishUrl: String, hideUrl: String }
-  static targets = ["label"]
-
-  connect() {
-    this.abortController = new AbortController()
-    const header = document.getElementById("plan-header")
-    if (header?.parentNode) {
-      this.headerObserver = new MutationObserver(() => this._syncFromHeader())
-      this.headerObserver.observe(header.parentNode, { childList: true })
-    }
-  }
-
-  disconnect() {
-    this.abortController.abort()
-    this.headerObserver?.disconnect()
-  }
-
-  async toggle() {
-    if (this._busy) return
-    this._busy = true
-
-    const wasHidden = this.hiddenValue
-    this.hiddenValue = !wasHidden
-    this._paint()
-
-    try {
-      const response = await fetch(wasHidden ? this.publishUrlValue : this.hideUrlValue, {
-        method: "PATCH",
-        headers: {
-          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.content,
-          "Accept": "text/vnd.turbo-stream.html"
-        },
-        signal: this.abortController.signal
-      })
-      if (!response.ok) throw new Error("Could not change visibility")
-      const stream = await response.text()
-      // Turbo may have navigated away while the request was in flight — a
-      // stream aimed at this page's #plan-header must not land on the next
-      // page's header.
-      if (!this.element.isConnected) return
-      window.Turbo?.renderStreamMessage(stream)
-    } catch (error) {
-      if (error?.name === "AbortError") return
-      // A failed response is ambiguous — the server may have committed the
-      // flip before the response was lost. Don't assert the old state:
-      // reload and let the server say what's true (same reload-then-toast
-      // pattern as folder_dnd).
-      if (window.Turbo) {
-        document.addEventListener("turbo:load",
-          () => this._toast("Couldn't confirm the visibility change — showing the current state.", "alert"),
-          { once: true })
-        window.Turbo.visit(window.location.href, { action: "replace" })
-      } else {
-        window.location.reload()
-      }
-    } finally {
-      this._busy = false
-    }
-  }
-
-  // The server's #plan-header re-render (from our own request or any
-  // broadcast) is the authority — mirror its state flag onto the button.
-  _syncFromHeader() {
-    const state = document.getElementById("plan-header")?.dataset.planVisibility
-    if (!state) return
-    const hidden = state === "draft"
-    if (hidden === this.hiddenValue) return
-    this.hiddenValue = hidden
-    this._paint()
-  }
-
-  _paint() {
-    this.element.classList.toggle("visibility-toggle--hidden", this.hiddenValue)
-    if (this.hasLabelTarget) {
-      this.labelTarget.textContent = this.hiddenValue ? "Private" : "Shared"
-    }
-    this.element.title = this.hiddenValue ?
-      "Private — click to share with everyone in the org" :
-      "Shared with everyone — click to make it private (the link keeps working)"
-  }
-
-  _toast(message, kind) {
-    const container = document.getElementById("coplan-toasts")
-    if (!container) return
-    const toast = document.createElement("div")
-    toast.className = `flash flash--${kind} toasts__toast`
-    toast.setAttribute("role", "status")
-    toast.textContent = message
-    toast.setAttribute("data-controller", "coplan--toast")
-    container.appendChild(toast)
-  }
-}
diff --git a/engine/app/views/coplan/plans/_banner.html.erb b/engine/app/views/coplan/plans/_banner.html.erb
new file mode 100644
index 0000000..c0a3c9a
--- /dev/null
+++ b/engine/app/views/coplan/plans/_banner.html.erb
@@ -0,0 +1,13 @@
+<%# The plan's full-width state banner (archived, for now). Always renders
+    the slot div so Turbo Streams can replace it in both directions —
+    archiving inserts the banner, restoring empties it. %>
+<div id="plan-banner-slot">
+  <% if plan.archived? %>
+    <div class="plan-banner plan-banner--archived">
+      <span class="plan-banner__text">This plan is archived — it stays readable at this URL but is hidden from lists and search results.</span>
+      <% if allowed_to?(plan, :unarchive?) %>
+        <%= button_to "Restore", unarchive_plan_path(plan), method: :patch, class: "btn btn--secondary btn--sm" %>
+      <% end %>
+    </div>
+  <% end %>
+</div>
diff --git a/engine/app/views/coplan/plans/_header.html.erb b/engine/app/views/coplan/plans/_header.html.erb
index f21b9ea..6663ecc 100644
--- a/engine/app/views/coplan/plans/_header.html.erb
+++ b/engine/app/views/coplan/plans/_header.html.erb
@@ -1,36 +1,16 @@
-<%# The five-state status (and #146's badge menu) is gone — visibility is
-    the only state, toggled by the visibility button; the type reads as the
-    file icon next to the title.
-
-    Two deliberate bands, both broadcast-safe (derive from the plan alone):
-      1. Title row — icon + title, with the save bookmark flowing inline
-         after the title's last word so it lands sensibly on every wrap.
-      2. Meta row — byline on the left, live presence on the right,
-         indented to the title's text column so it reads as one block. %>
-<%# data-plan-visibility is the authoritative state flag: the visibility
-    toggle (outside this partial — it's policy-gated) watches header
-    replacements and mirrors this value, so API publishes and other tabs
-    keep the button honest. %>
-<div class="page-header page-header--plan" id="plan-header" data-plan-visibility="<%= plan.visibility %>">
+<%# The plan's identity: type icon + title, then the byline. Everything
+    here derives from the plan alone — this partial is broadcast-replaced
+    (content commits, visibility changes, API edits) with no current_user,
+    so viewer-relative chrome (presence, the owner toolbar, Save) lives in
+    the masthead's side column next to this, never inside it. %>
+<div class="page-header page-header--plan" id="plan-header">
   <div class="page-header__title-row">
     <%= plan_type_icon(plan, size: :lg) %>
-    <h1 class="page-header__title"><%= plan.title %><%# The save bookmark mounts here from outside this partial: it's
-          viewer-relative (needs current_user), and this header re-renders
-          from broadcasts where there is none — plan_bookmark_controller
-          re-stamps it after every replace. Inside the h1 so it trails the
-          last word of the title, wherever wrapping puts it. %><span id="plan-bookmark-slot" class="plan-bookmark-slot"></span></h1>
+    <h1 class="page-header__title"><%= plan.title %></h1>
   </div>
   <div class="page-header__meta">
     <div class="page-header__byline text-sm text-muted">
       <%= user_avatar(plan.created_by_user) %> <%= profile_link(plan.created_by_user) %> · v<%= plan.current_revision %><%= plan_state_badge(plan) %>
-      <%# A tag on someone's plan reads as "find more like this", not "filter
-          my workspace" (which is what the row chips in YOUR workspace do) —
-          so it's a search, org-wide. search_text indexes tag names. %>
-      <% plan.tags.each do |tag| %>
-        <%= link_to tag.name, search_path(q: tag.name), class: "badge badge--tag",
-              title: "Search plans tagged “#{tag.name}”" %>
-      <% end %>
     </div>
-    <%= render partial: "coplan/plans/viewers", locals: { viewers: CoPlan::PlanViewer.active_viewers_for(plan), current_user: current_user } %>
   </div>
 </div>
diff --git a/engine/app/views/coplan/plans/_shelves.html.erb b/engine/app/views/coplan/plans/_shelves.html.erb
deleted file mode 100644
index 0e5d74d..0000000
--- a/engine/app/views/coplan/plans/_shelves.html.erb
+++ /dev/null
@@ -1,34 +0,0 @@
-<%# Folder-jump discovery strip: every library shelf this plan sits on,
-    rendered Drive-style — a quiet folder chip with just the folder name.
-    Whose library it is lives in the tooltip (and the link target). Lives
-    outside the broadcast #plan-header region — it's viewer-relative
-    (needs current_user). The save bookmark itself lives beside the title
-    (see plan_bookmark_controller), so this strip is chips-only and
-    disappears entirely when the plan sits on no one's shelf. %>
-<% if placements.any? %>
-  <div class="plan-shelves">
-    <% placements.each do |placement| %>
-      <% mine = placement.library.writable_by?(current_user) %>
-      <% owner = placement.library.owner %>
-      <% owner_name = owner.respond_to?(:name) ? owner.name : placement.library.name %>
-      <% title = mine ? "In your library — #{placement.folder.path}" : "In #{owner_name}’s library — #{placement.folder.path}" %>
-      <%# Your own shelf opens the folder in your workspace; someone else's
-          opens their profile at that shelf (the library's public face). %>
-      <% href = if mine
-           plans_path(folder: placement.folder_id)
-         elsif owner.is_a?(CoPlan::User)
-           profile_path(owner.username.presence || owner.id, anchor: "folder-#{placement.folder_id}")
-         else
-           library_path(placement.library, anchor: "folder-#{placement.folder_id}")
-         end %>
-      <%= link_to href, class: "plan-shelves__chip#{' plan-shelves__chip--theirs' unless mine}", title: title do %>
-        <svg class="plan-shelves__chip-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
-        <span class="plan-shelves__chip-name"><%= placement.folder.name %></span>
-        <% unless mine %>
-          <span class="plan-shelves__chip-owner"><%= owner_name.split.first %></span>
-        <% end %>
-      <% end %>
-    <% end %>
-
-  </div>
-<% end %>
diff --git a/engine/app/views/coplan/plans/_toolbar.html.erb b/engine/app/views/coplan/plans/_toolbar.html.erb
new file mode 100644
index 0000000..f606a4b
--- /dev/null
+++ b/engine/app/views/coplan/plans/_toolbar.html.erb
@@ -0,0 +1,82 @@
+<%# The viewer's toolbar for this plan — the glass pill in the masthead's
+    side column. Viewer-relative and policy-gated, so it renders only from
+    request contexts: the show page, and the Turbo Stream responses to
+    visibility/archive changes (which re-render it so menu labels track
+    state). Broadcasts never touch it.
+
+    Two relationships, two shapes:
+      - can edit  → Edit (the primary action) + ⋯ menu (History, Move to
+        folder…, visibility, Archive). Organizing your own library is a
+        rare act, so it lives a level down — like Docs' move control.
+      - reading   → Save/Saved (file it in your library to find it again)
+        + ⋯ menu (History). %>
+<% my_placement = local_assigns[:my_placement] %>
+<% my_placement ||= plan.placements.includes(:library, :folder).detect { |p| p.library.writable_by?(current_user) } if current_user %>
+<% can_edit = allowed_to?(plan, :edit_content?) %>
+<div id="plan-toolbar" class="plan-actions" role="toolbar" aria-label="Plan actions">
+  <% if current_user && !can_edit %>
+    <button type="button"
+            class="btn btn--ghost btn--sm plan-save<%= " plan-save--saved" if my_placement %>"
+            data-action="coplan--folder-picker#open"
+            data-move-url="<%= move_to_folder_plan_path(plan) %>"
+            data-current-folder-id="<%= my_placement&.folder_id %>"
+            data-saved="<%= my_placement.present? %>"
+            data-plan-title="<%= plan.title %>"
+            title="<%= my_placement ? "Saved in #{my_placement.folder.path} — click to move or remove" : "Save to your library to find it again" %>">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="<%= my_placement ? "currentColor" : "none" %>" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+      <span><%= my_placement ? "Saved" : "Save" %></span>
+    </button>
+  <% end %>
+  <% if can_edit %>
+    <%= link_to edit_content_plan_path(plan), class: "btn btn--ghost btn--sm",
+          title: "Edit this plan — content, title, and tags" do %>
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>
+      <span>Edit</span>
+    <% end %>
+  <% end %>
+  <span data-controller="coplan--menu">
+    <button type="button" class="btn btn--ghost btn--sm btn--icon"
+            popovertarget="plan-menu" data-coplan--menu-target="trigger"
+            aria-label="More actions" title="More actions">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>
+    </button>
+    <div id="plan-menu" popover="auto" class="menu" data-coplan--menu-target="menu"
+         data-action="toggle->coplan--menu#reposition" role="menu" aria-label="Plan actions menu">
+      <%= link_to history_plan_path(plan), class: "menu__item", role: "menuitem" do %>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
+        <span>History</span>
+      <% end %>
+      <% if can_edit %>
+        <button type="button" class="menu__item" role="menuitem"
+                data-action="coplan--menu#close coplan--folder-picker#open"
+                data-move-url="<%= move_to_folder_plan_path(plan) %>"
+                data-current-folder-id="<%= my_placement&.folder_id %>"
+                data-saved="<%= my_placement.present? %>"
+                data-plan-title="<%= plan.title %>"
+                data-picker-heading="Move to folder"
+                data-remove-label="Remove from folder">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
+          <span>Move to folder…</span>
+        </button>
+        <% if allowed_to?(plan, :publish?) %>
+          <%= button_to publish_plan_path(plan), method: :patch, class: "menu__item", form_class: "menu__form", role: "menuitem" do %>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
+            <span>Share with everyone</span>
+          <% end %>
+        <% elsif allowed_to?(plan, :hide?) %>
+          <%= button_to hide_plan_path(plan), method: :patch, class: "menu__item", form_class: "menu__form", role: "menuitem" do %>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/><line x1="3" y1="3" x2="21" y2="21"/></svg>
+            <span>Make private</span>
+          <% end %>
+        <% end %>
+        <% if allowed_to?(plan, :archive?) && !plan.archived? %>
+          <div class="menu__separator" role="separator"></div>
+          <%= button_to archive_plan_path(plan), method: :patch, class: "menu__item menu__item--danger", form_class: "menu__form", role: "menuitem" do %>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>
+            <span>Archive plan</span>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  </span>
+</div>
diff --git a/engine/app/views/coplan/plans/index.html.erb b/engine/app/views/coplan/plans/index.html.erb
index 601ebfd..633ff48 100644
--- a/engine/app/views/coplan/plans/index.html.erb
+++ b/engine/app/views/coplan/plans/index.html.erb
@@ -6,7 +6,7 @@
 <% end %>
 
 <%# No folder picker here: rows file via drag & drop, and the plan page's
-    title bookmark covers the click path. %>
+    toolbar (Save / Move to folder…) covers the click path. %>
 <div class="workspace" data-controller="coplan--folder-dnd coplan--workspace-keys">
   <%= render "coplan/plans/sidebar" %>
 
@@ -168,7 +168,7 @@
         <div class="empty-state card">
           <% if @folder %>
             <p>Nothing in <strong><%= @folder.name %></strong> yet.</p>
-            <p class="text-muted text-sm">Drag a plan here from another folder, or use a row's bookmark to file it.</p>
+            <p class="text-muted text-sm">Drag a plan here from another folder, or file one from its plan page.</p>
           <% elsif @scope == "mine" %>
             <p>You haven't created any plans yet. Plans are created via the API.</p>
           <% else %>
diff --git a/engine/app/views/coplan/plans/show.html.erb b/engine/app/views/coplan/plans/show.html.erb
index a01508a..da27034 100644
--- a/engine/app/views/coplan/plans/show.html.erb
+++ b/engine/app/views/coplan/plans/show.html.erb
@@ -20,86 +20,21 @@
 <div data-controller="coplan--plan-keys coplan--folder-picker"
      data-coplan--plan-keys-fallback-url-value="<%= my_placement&.folder_id ? plans_path(folder: my_placement.folder_id) : plans_path %>">
 
-<div data-controller="coplan--presence coplan--plan-bookmark" data-coplan--presence-plan-id-value="<%= @plan.id %>" data-plan-section="top">
+<%# The masthead: the plan's identity (broadcast-replaced #plan-header)
+    on the left, and the viewer-relative side column (presence + toolbar)
+    bottom-aligned on the right. Two DOM subtrees, one visual block —
+    broadcasts own the left, this request (and the visibility/archive
+    stream responses) own the right, so neither can clobber the other. %>
+<div class="plan-masthead" data-controller="coplan--presence" data-coplan--presence-plan-id-value="<%= @plan.id %>" data-plan-section="top">
   <%= render partial: "coplan/plans/header", locals: { plan: @plan } %>
-  <% if current_user %>
-    <%# The bookmark that mounts beside the title (see #plan-bookmark-slot
-        in the header partial). Rendered here because it's viewer-relative —
-        broadcast re-renders of the header can't know who's looking. %>
-    <template data-coplan--plan-bookmark-target="template">
-      <button type="button"
-              class="plan-bookmark<%= " plan-bookmark--saved" if my_placement %>"
-              data-action="coplan--folder-picker#open"
-              data-move-url="<%= move_to_folder_plan_path(@plan) %>"
-              data-current-folder-id="<%= my_placement&.folder_id %>"
-              data-saved="<%= my_placement.present? %>"
-              data-plan-title="<%= @plan.title %>"
-              title="<%= my_placement ? "Saved in #{my_placement.folder.path} — click to remove" : "Save to a folder in your library" %>"
-              aria-label="<%= my_placement ? "Remove from your library" : "Save to your library" %>">
-        <svg width="17" height="17" viewBox="0 0 24 24" fill="<%= my_placement ? "currentColor" : "none" %>" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
-      </button>
-    </template>
-  <% end %>
-</div>
-
-<%# Owner affordances live outside the broadcast-replaced #plan-header so
-    they can be policy-gated server-side (broadcast renders have no
-    current_user). %>
-<% if @plan.archived? %>
-  <div class="plan-banner plan-banner--archived">
-    <span class="plan-banner__text">This plan is archived — it stays readable at this URL but is hidden from lists and search results.</span>
-    <% if allowed_to?(@plan, :unarchive?) %>
-      <%= button_to "Restore", unarchive_plan_path(@plan), method: :patch, class: "btn btn--secondary btn--sm" %>
-    <% end %>
-  </div>
-<% end %>
-<%# One compact row: where the plan is filed (left) and what you can do to
-    it (right). Lives outside the broadcast-replaced #plan-header — both
-    sides are viewer-relative / policy-gated (broadcast renders have no
-    current_user). %>
-<div class="plan-meta-row">
-  <%= render partial: "coplan/plans/shelves", locals: { placements: @shelf_placements } %>
-  <div class="plan-actions" role="toolbar" aria-label="Plan actions">
-    <% if allowed_to?(@plan, :publish?) || allowed_to?(@plan, :hide?) %>
-      <%# The visibility toggle: open eye = shared with everyone, slashed =
-          Private. One click commits (it's a two-way switch); the server
-          answers with Turbo Streams that refresh the header state flag and
-          confirm with a toast. Labeled, not icon-only — this is the one
-          control whose state people need to be able to read at a glance. %>
-      <button type="button"
-              class="btn btn--ghost btn--sm visibility-toggle<%= " visibility-toggle--hidden" if @plan.draft? %>"
-              data-controller="coplan--visibility-toggle"
-              data-action="coplan--visibility-toggle#toggle"
-              data-coplan--visibility-toggle-hidden-value="<%= @plan.draft? %>"
-              data-coplan--visibility-toggle-publish-url-value="<%= publish_plan_path(@plan) %>"
-              data-coplan--visibility-toggle-hide-url-value="<%= hide_plan_path(@plan) %>"
-              title="<%= @plan.draft? ? "Private — click to share with everyone in the org" : "Shared with everyone — click to make it private (the link keeps working)" %>">
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/><line class="visibility-toggle__slash" x1="3" y1="3" x2="21" y2="21"/></svg>
-        <span data-coplan--visibility-toggle-target="label"><%= @plan.draft? ? "Private" : "Shared" %></span>
-      </button>
-    <% end %>
-    <%# One pen: the editor handles content, title, and tags together. %>
-    <% if allowed_to?(@plan, :edit_content?) %>
-      <%= link_to edit_content_plan_path(@plan), class: "btn btn--secondary btn--sm btn--icon",
-            title: "Edit this plan — content, title, and tags", aria: { label: "Edit plan" } do %>
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>
-      <% end %>
-    <% end %>
-    <% if allowed_to?(@plan, :archive?) %>
-      <%= button_to archive_plan_path(@plan), method: :patch,
-            class: "btn btn--ghost btn--sm btn--icon", title: "Archive this plan",
-            aria: { label: "Archive plan" }, form_class: "plan-actions__archive" do %>
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>
-      <% end %>
-    <% end %>
-    <%# History is its own page — the time machine, one Backspace away. %>
-    <%= link_to history_plan_path(@plan), class: "btn btn--ghost btn--sm btn--icon",
-          title: "History — every version and change", aria: { label: "Plan history" } do %>
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
-    <% end %>
+  <div class="plan-masthead__side">
+    <%= render partial: "coplan/plans/viewers", locals: { viewers: CoPlan::PlanViewer.active_viewers_for(@plan), current_user: current_user } %>
+    <%= render partial: "coplan/plans/toolbar", locals: { plan: @plan, my_placement: my_placement } %>
   </div>
 </div>
 
+<%= render partial: "coplan/plans/banner", locals: { plan: @plan } %>
+
 <div class="plan-document card">
   <% if @plan.current_content.present? %>
     <div class="plan-layout" data-controller="coplan--text-selection coplan--content-nav coplan--checkbox coplan--changed-sections" data-coplan--text-selection-focus-thread-value="<%= params[:thread] %>" data-action="keydown.esc@document->coplan--text-selection#dismiss" data-coplan--checkbox-revision-value="<%= @plan.current_revision %>" data-coplan--checkbox-toggle-url-value="<%= toggle_checkbox_plan_path(@plan) %>" data-coplan--changed-sections-keys-value="<%= @changed_section_keys.to_json %>">
diff --git a/engine/app/views/coplan/shared/_folder_picker.html.erb b/engine/app/views/coplan/shared/_folder_picker.html.erb
index ef090bd..238815c 100644
--- a/engine/app/views/coplan/shared/_folder_picker.html.erb
+++ b/engine/app/views/coplan/shared/_folder_picker.html.erb
@@ -1,14 +1,16 @@
 <%# The shared "save to library" navigator popover. Expects `folders`: the
     viewer's folders as a flat list; the tree is rebuilt here so any page
-    (plan header, workspace rows) can render the picker from what it already
-    loaded. Open it via coplan--folder-picker#open on a trigger carrying
-    data-move-url / data-current-folder-id / data-saved / data-plan-title —
-    saved triggers unbookmark on click instead of opening this popover. %>
+    (plan toolbar, workspace rows) can render the picker from what it
+    already loaded. Open it via coplan--folder-picker#open on a trigger
+    carrying data-move-url / data-current-folder-id / data-saved /
+    data-plan-title (and optionally data-picker-heading). Saved triggers
+    get a "Remove from library" row so letting go is a deliberate choice
+    inside the navigator, never an accidental toggle. %>
 <% children_by_parent = folders.group_by(&:parent_id) %>
 <div id="folder-picker-modal" popover="auto" class="add-modal folder-picker"
      data-coplan--folder-picker-target="modal" aria-labelledby="folder-picker-title">
   <div class="add-modal__header">
-    <h3 class="add-modal__title" id="folder-picker-title">Save to library</h3>
+    <h3 class="add-modal__title" id="folder-picker-title" data-coplan--folder-picker-target="heading">Save to library</h3>
     <button type="button" class="add-modal__close" popovertarget="folder-picker-modal" popovertargetaction="hide" aria-label="Close">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
     </button>
@@ -24,5 +26,13 @@
     <% else %>
       <p class="text-sm text-muted">No folders yet — create one from your workspace to start organizing.</p>
     <% end %>
+    <%# Shown only when the trigger is already saved (see #open) — removal
+        lives here, as a labeled choice, instead of on the trigger itself. %>
+    <button type="button" class="folder-picker__remove" hidden
+            data-coplan--folder-picker-target="remove"
+            data-action="coplan--folder-picker#remove">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      <span data-coplan--folder-picker-target="removeLabel">Remove from library</span>
+    </button>
   </div>
 </div>
diff --git a/spec/requests/plans_spec.rb b/spec/requests/plans_spec.rb
index 5fec026..d289947 100644
--- a/spec/requests/plans_spec.rb
+++ b/spec/requests/plans_spec.rb
@@ -59,13 +59,13 @@
     expect(response.body).to include("Clear")
   end
 
-  it "show plan renders tag badges in header" do
+  it "show plan keeps tags off the reading surface" do
+    # Tags are workspace-side organization (sidebar filters, the editor) —
+    # the plan page masthead stays two clean rows: title, then byline.
     plan.tag_names = [ "infra", "security" ]
     get plan_path(plan)
     expect(response).to have_http_status(:success)
-    expect(response.body).to include("badge--tag")
-    expect(response.body).to include("infra")
-    expect(response.body).to include("security")
+    expect(response.body).not_to include("badge--tag")
   end
 
   it "show plan renders successfully" do
diff --git a/spec/system/folders_workspace_spec.rb b/spec/system/folders_workspace_spec.rb
index 01788b3..b93f0e0 100644
--- a/spec/system/folders_workspace_spec.rb
+++ b/spec/system/folders_workspace_spec.rb
@@ -207,15 +207,16 @@ def sign_in(user)
       expect(infra.reload.parent).to eq(team)
     end
 
-    it "saves from the plan page via the bookmark beside the title" do
+    it "files their own plan via Move to folder… in the plan menu" do
       visit plan_path(developing_plan)
 
-      # The bookmark mounts into the title row (it's stamped client-side —
-      # the broadcast-replaced header can't render viewer state itself).
-      # It's also the only click path into the folder navigator: workspace
-      # rows file via drag & drop and carry no bookmark of their own.
-      find(".page-header__title-row .plan-bookmark").click
+      # Owners organize, they don't "save" — no Save button on your own plan.
+      expect(page).not_to have_button("Save")
+
+      find("#plan-toolbar button[aria-label='More actions']").click
+      within("#plan-menu") { click_button "Move to folder…" }
       within("#folder-picker-modal") do
+        expect(page).to have_css("#folder-picker-title", text: "Move to folder")
         # The tree is hierarchical: Q3 nests under Team EBT.
         expect(page).to have_css(".folder-picker__tree--nested .folder-picker__name", text: "Q3")
         find(".folder-picker__option", text: "Infra").click
@@ -223,25 +224,25 @@ def sign_in(user)
 
       expect(page).to have_css(".flash--notice", text: "Infra", wait: 5)
       expect(author.library.placements.find_by(plan_id: developing_plan.id).folder).to eq(infra)
-      # After the reload the bookmark reads as saved.
-      expect(page).to have_css(".plan-bookmark--saved")
     end
 
-    it "unsaves a filed plan with a second bookmark click — no dialog, no toast" do
+    it "unfiles their own plan with the picker's explicit Remove from folder" do
       CoPlan::Plans::Place.call(plan: developing_plan, folder: q3, actor: author)
       visit plan_path(developing_plan)
 
-      find(".page-header__title-row .plan-bookmark--saved").click
+      find("#plan-toolbar button[aria-label='More actions']").click
+      within("#plan-menu") { click_button "Move to folder…" }
+      within("#folder-picker-modal") do
+        # The navigator reads as state: the current folder is marked.
+        expect(page).to have_css(".folder-picker__option--current", text: "Q3")
+        click_button "Remove from folder"
+      end
 
-      # The bookmark just lets go: no navigator, no confirmation, no toast —
-      # the page re-renders with the bookmark back in its unsaved state.
-      expect(page).not_to have_css("#folder-picker-modal:popover-open")
-      expect(page).to have_css(".page-header__title-row .plan-bookmark:not(.plan-bookmark--saved)", wait: 5)
-      expect(page).not_to have_css(".flash--notice")
+      expect(page).to have_css(".flash--notice", wait: 5)
       expect(author.library.placements.where(plan_id: developing_plan.id)).to be_empty
     end
 
-    it "offers shelving on other users' plans too" do
+    it "saves and lets go of someone else's plan through the navigator, never a surprise toggle" do
       other_plan = create(:plan, :considering, created_by_user: other, title: "Someone Elses Plan")
       visit plans_path(scope: "all")
 
@@ -249,9 +250,28 @@ def sign_in(user)
       row = find(".plan-row[data-plan-id='#{other_plan.id}']")
       expect(row["draggable"]).to eq("true")
 
-      # …and the plan page offers the bookmark.
+      # …and the plan page offers a labeled Save that opens the navigator.
       visit plan_path(other_plan)
-      expect(page).to have_css(".page-header__title-row .plan-bookmark")
+      click_button "Save"
+      within("#folder-picker-modal") do
+        expect(page).to have_css("#folder-picker-title", text: "Save to library")
+        find(".folder-picker__option", text: "Infra").click
+      end
+
+      expect(page).to have_css(".flash--notice", text: "Infra", wait: 5)
+      expect(page).to have_button("Saved")
+      expect(author.library.placements.find_by(plan_id: other_plan.id).folder).to eq(infra)
+
+      # Clicking Saved re-opens the navigator — removal is a deliberate
+      # labeled choice inside it, not an instant unsave on the button.
+      click_button "Saved"
+      within("#folder-picker-modal") do
+        expect(page).to have_css(".folder-picker__option--current", text: "Infra")
+        click_button "Remove from library"
+      end
+
+      expect(page).to have_button("Save", wait: 5)
+      expect(author.library.placements.where(plan_id: other_plan.id)).to be_empty
     end
   end
 
diff --git a/spec/system/history_spec.rb b/spec/system/history_spec.rb
index c443ae9..9580d92 100644
--- a/spec/system/history_spec.rb
+++ b/spec/system/history_spec.rb
@@ -32,13 +32,14 @@
   end
 
   describe "navigation" do
-    it "reaches history via the header clock icon and returns via the back link" do
+    it "reaches history via the toolbar's overflow menu and returns via the back link" do
       visit plan_path(plan)
 
       expect(page).to have_content("First task")
       expect(page).not_to have_content("Initial draft")
 
-      find("a[aria-label='Plan history']").click
+      find("#plan-toolbar button[aria-label='More actions']").click
+      within("#plan-menu") { click_link "History" }
 
       # A full page: version entry, plan title, no document body.
       expect(page).to have_content("Initial draft")
@@ -59,7 +60,8 @@
 
     it "goes back to the document with Backspace" do
       visit plan_path(plan)
-      find("a[aria-label='Plan history']").click
+      find("#plan-toolbar button[aria-label='More actions']").click
+      within("#plan-menu") { click_link "History" }
       expect(page).to have_content("Initial draft")
 
       find("body").send_keys(:backspace)
diff --git a/spec/system/human_editing_spec.rb b/spec/system/human_editing_spec.rb
index 9cb7a3a..c79f682 100644
--- a/spec/system/human_editing_spec.rb
+++ b/spec/system/human_editing_spec.rb
@@ -25,7 +25,7 @@ def sign_in(user)
 
   it "edits plan content through the web editor" do
     visit plan_path(plan)
-    find("a[aria-label='Edit plan']").click
+    within("#plan-toolbar") { click_link "Edit" }
 
     expect(page).to have_field("content", with: /First draft body/)
 
@@ -74,52 +74,54 @@ def sign_in(user)
     expect(page).to have_field("content", with: /Preview me/)
   end
 
-  it "toggles visibility with one labeled click each way, no reload" do
+  def open_plan_menu
+    find("#plan-toolbar button[aria-label='More actions']").click
+    expect(page).to have_css("#plan-menu:popover-open")
+  end
+
+  it "changes visibility from the overflow menu in place, no reload" do
     plan.update!(visibility: "draft")
     visit plan_path(plan)
 
-    expect(page).to have_css(".visibility-toggle", text: "Private")
-    find(".visibility-toggle").click
-    expect(page).to have_css(".visibility-toggle", text: "Shared", wait: 5)
+    # Private is the rare state — the byline flags it.
+    expect(page).to have_css("#plan-header .state-flag", text: "Private")
+
+    open_plan_menu
+    within("#plan-menu") { click_button "Share with everyone" }
+
+    # The Turbo Stream re-renders the header in place: the Private flag
+    # drops without a navigation, and a toast confirms.
     expect(page).to have_content("Shared with everyone in the org.")
+    expect(page).not_to have_css("#plan-header .state-flag", text: "Private")
     expect(plan.reload.visibility).to eq("published")
 
-    # And back — hiding a shared plan is allowed, same single click. The
-    # server Turbo Stream replaces the header, so re-find the button.
-    find(".visibility-toggle").click
-    expect(page).to have_css(".visibility-toggle--hidden", text: "Private", wait: 5)
+    # The menu tracks state: it now offers the opposite direction.
+    open_plan_menu
+    within("#plan-menu") { click_button "Make private" }
     expect(page).to have_content("Private again — hidden from lists and search.")
+    expect(page).to have_css("#plan-header .state-flag", text: "Private")
     expect(plan.reload.visibility).to eq("draft")
   end
 
-  it "keeps the visibility button in sync when the header is replaced externally" do
-    plan.update!(visibility: "draft")
+  it "archives and restores the plan in place" do
     visit plan_path(plan)
-    expect(page).to have_css(".visibility-toggle--hidden", text: "Private")
-
-    # An API publish or another tab's toggle reaches this page as a
-    # broadcast replacing #plan-header with a re-render that carries the new
-    # state flag. Simulate that replacement and check the button follows.
-    page.execute_script(<<~JS)
-      const header = document.getElementById("plan-header")
-      const fresh = header.cloneNode(true)
-      fresh.dataset.planVisibility = "published"
-      header.replaceWith(fresh)
-    JS
-
-    expect(page).to have_css(".visibility-toggle", text: "Shared", wait: 5)
-    expect(page).not_to have_css(".visibility-toggle--hidden")
-  end
 
-  it "archives and restores the plan" do
-    visit plan_path(plan)
+    open_plan_menu
+    within("#plan-menu") { click_button "Archive plan" }
 
-    click_button "Archive"
-    expect(page).to have_content("Plan archived.")
+    # The consequence is visible right where it happened: a banner with the
+    # undo, no navigation away from the document.
+    expect(page).to have_css(".plan-banner--archived", text: "hidden from lists")
+    expect(page).to have_content("Editable Plan")
     expect(plan.reload.archived?).to be(true)
 
-    click_button "Restore"
-    expect(page).to have_content("Plan restored.")
+    # Archive leaves the menu while archived.
+    open_plan_menu
+    expect(page).not_to have_button("Archive plan")
+    find("#plan-toolbar button[aria-label='More actions']").click # close menu
+
+    within(".plan-banner--archived") { click_button "Restore" }
+    expect(page).not_to have_css(".plan-banner--archived")
     expect(plan.reload.archived?).to be(false)
   end
 
@@ -130,8 +132,18 @@ def sign_in(user)
 
     visit plan_path(plan)
     expect(page).to have_content("Editable Plan")
-    expect(page).not_to have_css("a[aria-label='Edit plan']")
-    expect(page).not_to have_button("Archive")
-    expect(page).not_to have_css(".visibility-toggle")
+    within("#plan-toolbar") do
+      expect(page).not_to have_link("Edit")
+      expect(page).to have_button("Save")
+    end
+    # The reader's overflow menu is History only — no state-changing actions.
+    open_plan_menu
+    within("#plan-menu") do
+      expect(page).to have_link("History")
+      expect(page).not_to have_button("Archive plan")
+      expect(page).not_to have_button("Make private")
+      expect(page).not_to have_button("Share with everyone")
+      expect(page).not_to have_button("Move to folder…")
+    end
   end
 end

From 841c85bf805d0d29ce5c81c4bd3cdbe12caed6aa Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 14:41:23 -0400
Subject: [PATCH 09/11] Let feed items flow as text instead of shattering on
 long titles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The feed item's first line was a wrapping flex row, so a long title
broke the whole anatomy apart: the type icon orphaned on its own line,
"new" stranded below the title, huge gaps everywhere. Now the line is
normal text flow — icon, title, and the activity rollup sit inline, so
a long title wraps like a sentence with "new" trailing its last word.

Items and day sections also tighten up a step, and at phone widths the
timestamp stops being a nowrap side column (it was squeezing titles to
a word per line at 320) and tucks under the byline instead.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../assets/stylesheets/coplan/application.css | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index e56e74e..d24e873 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -4400,7 +4400,7 @@ img.avatar {
 }
 
 .home__day {
-  margin-bottom: var(--space-xl);
+  margin-bottom: var(--space-lg);
 }
 
 .home__day-heading {
@@ -4428,7 +4428,7 @@ img.avatar {
   display: flex;
   align-items: flex-start;
   gap: var(--space-md);
-  padding: var(--space-md) 0;
+  padding: var(--space-sm) 0;
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -4446,11 +4446,17 @@ img.avatar {
   flex: 1;
 }
 
+/* The item's first line flows as text — icon, title, and the activity
+   rollup sit inline, so a long title wraps like a sentence instead of
+   shattering the row (icon orphaned above, "new" stranded below). */
 .home__item-line {
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-sm);
-  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.home__item-line .plan-type-icon {
+  display: inline-flex;
+  vertical-align: text-bottom;
+  margin-right: var(--space-xs);
 }
 
 .home__item-title {
@@ -4468,6 +4474,7 @@ img.avatar {
   font-size: var(--text-xs);
   color: var(--color-text-muted);
   white-space: nowrap;
+  margin-left: var(--space-xs);
 }
 
 /* A plan's first appearance gets a whisper of accent — not a badge. */
@@ -5420,7 +5427,18 @@ img.avatar {
     flex-basis: 100%;
   }
 
+  /* Narrow screens: the timestamp stops being a side column (it was
+     squeezing titles to a word per line) and tucks under the byline,
+     indented to the body's left edge (2rem avatar + md gap). */
+  .home__item {
+    flex-wrap: wrap;
+  }
+
   .home__item-time {
+    order: 3;
+    flex-basis: 100%;
+    padding-top: 0;
+    margin-left: calc(2rem + var(--space-md));
     font-size: 0.75rem;
   }
 }

From 2d91aaf2bf12425b88ef244ace233892c50c9825 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 15:00:26 -0400
Subject: [PATCH 10/11] Anchor the plan header as one lockup; unbreak history
 on phones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The masthead's byline was fake-indented under the icon with a hard-coded
padding — history.html.erb never got the indent at all, so its subtitle
sat misaligned at the page edge. Both headers are now a single lockup:
icon anchored to the title's first line beside a text stack (title over
byline) sharing one left edge.

Also: history's 280px split now stacks below 720px instead of crushing
the diff to a word per line, and the entry count pluralizes (broadcasts
include the word so live updates stay in sync).

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 .../assets/stylesheets/coplan/application.css | 73 ++++++++++++-------
 engine/app/models/coplan/plan_event.rb        |  2 +-
 engine/app/models/coplan/plan_version.rb      |  2 +-
 .../app/views/coplan/plans/_header.html.erb   |  6 +-
 .../app/views/coplan/plans/history.html.erb   | 16 ++--
 5 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index d24e873..2dc9fae 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -501,43 +501,43 @@ img, svg {
   margin-bottom: -2px;
 }
 
-/* Plan page header: file icon + title, then one metadata band — compact,
-   the document itself is the point. Everything here is broadcast-safe;
-   viewer-relative chrome (Save, owner toolbar) lives in the masthead's
-   side column, outside this subtree. */
+/* Plan page header: one lockup — the file icon beside a text stack
+   (title over byline) that shares a single left edge. The icon anchors
+   to the title's first line (36px icon inside a ~38px line box), so it
+   reads as the document's mark whether or not the title wraps, and the
+   byline hangs in the title's text column instead of being fake-indented.
+   Everything here is broadcast-safe; viewer-relative chrome (Save, owner
+   toolbar) lives in the masthead's side column, outside this subtree. */
 .page-header--plan {
-  display: block;
-  margin-bottom: 0;
-  flex: 1;
-  min-width: min(24rem, 100%);
-}
-
-/* The icon tops out with the title's first line, not the middle of a
-   wrapped block — it's a file icon, not a bullet. */
-.page-header__title-row {
   display: flex;
   align-items: flex-start;
+  justify-content: flex-start;
   gap: var(--space-sm);
+  margin-bottom: 0;
+  flex: 1;
+  min-width: min(24rem, 100%);
 }
 
-.page-header__title-row .plan-type-icon {
+.page-header--plan .plan-type-icon {
   flex-shrink: 0;
   margin-top: 1px;
 }
 
-.page-header__title {
-  min-width: 0;
-  overflow-wrap: anywhere;
+/* Center the back arrow (24px hit area) against the title's first line. */
+.page-header--plan .history-back {
+  margin-top: 7px;
 }
 
-/* Byline left, presence right, one line. Indented to the title's text
-   column (icon width + gap) so title and metadata read as one block. */
-.page-header__meta {
+.page-header__text {
+  min-width: 0;
   display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  margin-top: var(--space-xs);
-  padding-left: calc(36px + var(--space-sm));
+  flex-direction: column;
+  gap: 2px;
+}
+
+.page-header__title {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .page-header__byline {
@@ -1198,6 +1198,26 @@ img.avatar {
   height: 200px;
 }
 
+/* On narrow screens the side-by-side split would crush the diff to a
+   word per line — stack instead: a short scrollable version list on
+   top, the detail below it at full width. */
+@media (max-width: 720px) {
+  .history-split {
+    grid-template-columns: 1fr;
+  }
+
+  .history-split__list {
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    max-height: 260px;
+  }
+
+  .history-split__detail {
+    padding: var(--space-md);
+    max-height: none;
+  }
+}
+
 /* Version diff preview */
 .version-diff-preview__header {
   display: flex;
@@ -5388,9 +5408,8 @@ img.avatar {
     overflow-wrap: anywhere;
   }
 
-  /* At phone widths the text-column indent costs more than it aligns. */
-  .page-header__meta {
-    padding-left: 0;
+  /* At phone widths the byline can wrap under itself freely. */
+  .page-header__byline {
     flex-wrap: wrap;
   }
 
diff --git a/engine/app/models/coplan/plan_event.rb b/engine/app/models/coplan/plan_event.rb
index 767a2e6..8125a86 100644
--- a/engine/app/models/coplan/plan_event.rb
+++ b/engine/app/models/coplan/plan_event.rb
@@ -77,7 +77,7 @@ def broadcast_history_update
       Broadcaster.replace_to(
         plan,
         target: "history-count",
-        html: ApplicationController.helpers.content_tag(:span, count, class: "section-count", id: "history-count")
+        html: ApplicationController.helpers.content_tag(:span, ApplicationController.helpers.pluralize(count, "entry"), class: "section-count", id: "history-count")
       )
     end
   end
diff --git a/engine/app/models/coplan/plan_version.rb b/engine/app/models/coplan/plan_version.rb
index 6f3082d..7d2e8b4 100644
--- a/engine/app/models/coplan/plan_version.rb
+++ b/engine/app/models/coplan/plan_version.rb
@@ -45,7 +45,7 @@ def broadcast_history_update
       Broadcaster.replace_to(
         plan,
         target: "history-count",
-        html: ApplicationController.helpers.content_tag(:span, count, class: "section-count", id: "history-count")
+        html: ApplicationController.helpers.content_tag(:span, ApplicationController.helpers.pluralize(count, "entry"), class: "section-count", id: "history-count")
       )
     end
 
diff --git a/engine/app/views/coplan/plans/_header.html.erb b/engine/app/views/coplan/plans/_header.html.erb
index 6663ecc..37c1445 100644
--- a/engine/app/views/coplan/plans/_header.html.erb
+++ b/engine/app/views/coplan/plans/_header.html.erb
@@ -4,11 +4,9 @@
     so viewer-relative chrome (presence, the owner toolbar, Save) lives in
     the masthead's side column next to this, never inside it. %>
 <div class="page-header page-header--plan" id="plan-header">
-  <div class="page-header__title-row">
-    <%= plan_type_icon(plan, size: :lg) %>
+  <%= plan_type_icon(plan, size: :lg) %>
+  <div class="page-header__text">
     <h1 class="page-header__title"><%= plan.title %></h1>
-  </div>
-  <div class="page-header__meta">
     <div class="page-header__byline text-sm text-muted">
       <%= user_avatar(plan.created_by_user) %> <%= profile_link(plan.created_by_user) %> · v<%= plan.current_revision %><%= plan_state_badge(plan) %>
     </div>
diff --git a/engine/app/views/coplan/plans/history.html.erb b/engine/app/views/coplan/plans/history.html.erb
index 0f8d105..8e63d16 100644
--- a/engine/app/views/coplan/plans/history.html.erb
+++ b/engine/app/views/coplan/plans/history.html.erb
@@ -8,16 +8,14 @@
 <div data-controller="coplan--plan-keys"
      data-coplan--plan-keys-fallback-url-value="<%= plan_path(@plan) %>">
   <div class="page-header page-header--plan">
-    <div class="page-header__main">
-      <div class="page-header__title-row">
-        <%= link_to plan_path(@plan), class: "history-back", title: "Back to the document (Backspace)", aria: { label: "Back to #{@plan.title}" } do %>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
-        <% end %>
-        <%= plan_type_icon(@plan, size: :lg) %>
-        <h1 class="page-header__title"><%= link_to @plan.title, plan_path(@plan), class: "history-title-link" %></h1>
-      </div>
+    <%= link_to plan_path(@plan), class: "history-back", title: "Back to the document (Backspace)", aria: { label: "Back to #{@plan.title}" } do %>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
+    <% end %>
+    <%= plan_type_icon(@plan, size: :lg) %>
+    <div class="page-header__text">
+      <h1 class="page-header__title"><%= link_to @plan.title, plan_path(@plan), class: "history-title-link" %></h1>
       <div class="page-header__byline text-sm text-muted">
-        History — every version and change · <span class="section-count" id="history-count"><%= @plan.plan_versions.count + @plan.plan_events.count %></span> entries
+        History — every version and change · <span class="section-count" id="history-count"><%= pluralize(@plan.plan_versions.count + @plan.plan_events.count, "entry") %></span>
       </div>
     </div>
   </div>

From 10b83f21a71447e6b16bae993f6a0d86827eb3ed Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 23 Jul 2026 17:05:05 -0400
Subject: [PATCH 11/11] =?UTF-8?q?Make=20the=20inbox=20panel=20solid=20?=
 =?UTF-8?q?=E2=80=94=20its=20glass=20could=20never=20blur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The panel is a descendant of the nav, whose own backdrop-filter stops a
child backdrop-filter from sampling the page. The 'glass' was just 66%
alpha over sharp page text. Dropdowns get a solid elevated surface.

Amp-Thread-ID: https://ampcode.com/threads/T-019f8f55-7cc9-73a3-a9cb-1f3e0faa0cb3
Co-authored-by: Amp <amp@ampcode.com>
---
 engine/app/assets/stylesheets/coplan/application.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index 2dc9fae..ce3621f 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/engine/app/assets/stylesheets/coplan/application.css
@@ -2417,16 +2417,17 @@ img.avatar {
   padding: 0 4px;
 }
 
-/* Floating inbox panel */
+/* Floating inbox panel. Solid, not glass: it lives inside the nav,
+   whose own backdrop-filter blocks a descendant's backdrop-filter from
+   sampling the page — translucency here would just let the page bleed
+   through unblurred. */
 .inbox-panel {
   position: absolute;
   top: calc(100% + var(--space-sm));
   right: 0;
   width: 420px;
   max-height: 480px;
-  background: var(--glass-bg-strong);
-  -webkit-backdrop-filter: var(--glass-blur);
-  backdrop-filter: var(--glass-blur);
+  background: var(--color-surface);
   border: 1px solid var(--glass-edge);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);