studio-engine 0.128.0 → 0.130.0

data/app/assets/tailwind/studio_engine/engine.css

@@ -368,6 +368,74 @@ body.modal-open .studio-app-banner {
   margin-left: auto;
 }
 
+/* -- The section header (studio/_section_header, docs/PAGE_HEADER.md) --------
+   A section's title that sticks under the rest of the stack, inside its own <section>,
+   so the next section's header takes its place with no scroll script. At rest it reads as
+   a normal title. Stuck it takes the page header's bar, so content does not show through
+   it. studio/pinned_stack says which one is stuck. Its box never changes between the two,
+   so the change moves nothing. One line, always: a long title ends in an ellipsis on the
+   bar, the height is known, and the whole text stays in the heading.
+
+   IT STICKS ONLY ONCE THE PUBLISHER RUNS (html[data-pin-live]). With no publisher no bar
+   ever comes, and a clear title would lie over the page; in the flow it is a plain title.
+
+   A SHORT SCREEN KEEPS ITS ROOM. Under 36rem tall, a small phone or one on its side, the
+   header stays in the flow: the navbar and the page row already take a quarter of the height.
+
+   z-index is one tier under the page row, set by the partial, so a header being pushed out
+   passes under the row and over the content. --section-header-h is what a target inside a
+   section adds to its scroll margin, so it lands below the bar. */
+:root {
+  --section-header-h: 2.25rem;
+}
+
+@utility section-header {
+  @apply text-heading;
+  position: relative;
+  min-width: 0;
+  min-height: var(--section-header-h);
+  padding-block: 0.25rem;
+  margin-block-end: 0.25rem;
+  border-block: 1px solid transparent;
+  background-color: transparent;
+  font-size: calc(var(--type-base, 16px) * 1.25);
+  font-weight: 700;
+  line-height: 1.3;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: background-color 150ms ease, border-color 150ms ease;
+
+  html[data-pin-live] & {
+    @media (height >= 36rem) {
+      position: sticky;
+    }
+  }
+
+  &[data-stuck] {
+    @apply bg-surface border-subtle;
+    border-top-color: transparent;
+  }
+}
+
+/* Where a jump lands. A jump goes deep, so what counts is the stack once PINNED, with the
+   navbar compact and the page row stuck: heights, not --pin-section-top, whose value at the
+   top of the page holds the row's rest place and whatever scrolls away above it. So this one
+   composes, which a thing placed on screen must not: a margin is read once, at the jump. Less
+   two pixels, so the header has left its place on a fractional height and its title shows on
+   the bar.
+
+   A JUMP FROM THE TOP OF THE PAGE reads the navbar still tall, and lands by the navbar's
+   collapse below the line. Landing short is safe, the title shows. Landing past is safe too,
+   since the bar holds the title. A target inside a section: a bar's height lower. */
+@utility section-target {
+  scroll-margin-top: calc(var(--nav-h, 5rem) + var(--pin-page-h, 0px) - 2px);
+}
+
+@utility section-subtarget {
+  scroll-margin-top: calc(var(--nav-h, 5rem) + var(--pin-page-h, 0px) + var(--section-header-h));
+}
+
 /* -- Scrims: tints and shades ----------------------------------------------
    A scrim is the wash laid over media (a photo, a video) so text reads on it.
    It comes in two TONES, and the tone is a design decision, not a colour pick:
@@ -799,6 +867,59 @@ html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-n
 @keyframes pt-unfold-bottom { from { opacity: 0; transform: perspective(1200px) translateY(100%) rotateX(-90deg); } }
 @keyframes pt-unfold-top { from { opacity: 0; transform: perspective(1200px) translateY(-100%) rotateX(90deg); } }
 
+/* -- The theme flip --------------------------------------------------------
+   $store.theme.set (studio/alpine_stores) puts data-theme-flip on the root for one
+   flip. The whole page changes in one crossfade, whatever its size: no element
+   runs its own transition, no named element keeps its own picture, and nothing
+   here moves. !important because a wildcard pseudo-element is weaker than the
+   rules above and than a host's rule for a name. A pointer's click during the
+   crossfade hits the root, not the page (Chromium ignores pointer-events on these
+   pseudo-elements); a key press still reaches the focused toggle. */
+html[data-theme-flip],
+html[data-theme-flip] *,
+html[data-theme-flip] *::before,
+html[data-theme-flip] *::after {
+  transition: none !important;
+}
+
+/* The root keeps its name: it is the one picture. */
+html[data-theme-flip] * {
+  view-transition-name: none !important;
+}
+
+html[data-theme-flip]::view-transition {
+  background: none !important;
+}
+
+html[data-theme-flip]::view-transition-group(*) {
+  animation: none !important;
+}
+
+html[data-theme-flip]::view-transition-old(*),
+html[data-theme-flip]::view-transition-new(*) {
+  mix-blend-mode: plus-lighter !important;
+}
+
+html[data-theme-flip]::view-transition-old(*) {
+  animation: vt-theme-out 160ms linear both !important;
+}
+
+html[data-theme-flip]::view-transition-new(*) {
+  animation: vt-theme-in 160ms linear both !important;
+}
+
+@keyframes vt-theme-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vt-theme-in {
+  from {
+    opacity: 0;
+  }
+}
+
 /* Turbo's progress bar is the slow-load feedback under no-preview (the old
    page holds until the fresh response). Theme it so every app's bar matches
    its brand instead of Turbo's default. The fallback (#0076ff, Turbo's own
@@ -1461,14 +1582,36 @@ html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-n
       }
     }
 
+    /* THE SECTION HEADER UNDER GLASS, the same bar one layer down. While it is stuck the bar
+       under the row owns the round corners and the shadow: the row goes square, or the page
+       would show in the notches between the two. */
+    html[data-surface-style="glass"] .section-header[data-stuck] {
+      background-color: var(--color-page);
+      border-top-color: transparent;
+      border-bottom-color: var(--surface-glass-line);
+      border-radius: 0 0 0.875rem 0.875rem;
+      box-shadow: var(--surface-glass-shadow);
+    }
+    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      html[data-surface-style="glass"] .section-header[data-stuck] {
+        background-color: color-mix(in srgb, var(--color-page) 62%, transparent);
+        -webkit-backdrop-filter: blur(18px) saturate(140%);
+        backdrop-filter: blur(18px) saturate(140%);
+      }
+    }
+    html[data-surface-style="glass"][data-pin-section-stuck] .page-header[data-stuck] {
+      border-radius: 0;
+      box-shadow: var(--surface-glass-highlight);
+    }
+
     /* LIT FROM ABOVE, under the same opt-in: one light for buttons, badges and inputs, from the
        direction of the cards' top highlight. Four shadows: top light, bottom shade, contact, and
        a glow in the button's own color.
 
-       THE GRADIENT KEEPS ITS CHROMA. Both stops are built in oklch from the token, a brighter
-       and an equally saturated top over a deep saturated bottom; mixing toward black or grey is
-       what mutes a button. White text is held to 4.5:1 against the midpoint behind it, so the
-       top stop reads lower, as it does in the rule this follows.
+       THE GRADIENT KEEPS ITS CHROMA. Both stops are built in oklch from the token, the same step
+       lighter and darker at the token's own chroma; mixing toward black or grey is what mutes a
+       button. The midpoint is the token, so white text holds 4.5:1 there on the semantic fills
+       and about 3:1 on the default primary, which Alex McRitchie accepted to match the brand word.
 
        WHO GETS WHAT. Every full-size filled button: gradient, top, bottom, contact and a glow in
        its own color, on the same 0.15 lightness range. A .btn-sm has no glow, since a toolbar or
@@ -1516,16 +1659,17 @@ html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-n
       --lit-badge: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 1px rgb(0 0 0 / 0.35);
       --lit-input: inset 0 1px 2px rgb(0 0 0 / 0.4), inset 0 -1px 0 rgb(255 255 255 / 0.06);
     }
-    /* Stops: the app's primary is often too light for white, so it steps down its own lightness;
-       the semantic fills already hold 4.5:1, so the midpoint stays on the fill. */
-    html[data-surface-style="glass"] .btn-primary {
-      --lit-top-stop: oklch(from var(--color-cta) calc(l - 0.03) calc(c + 0.03) h / var(--lit-fill-alpha, 1));
-      --lit-low-stop: oklch(from var(--color-cta) calc(l - 0.18) calc(c + 0.05) h / var(--lit-fill-alpha, 1));
-    }
-    html[data-surface-style="glass"] :is(.btn-secondary, .btn-danger, .btn-warning, .btn-success) {
-      --lit-top-stop: oklch(from var(--lit-fill) calc(l + 0.075) calc(c + 0.03) h / var(--lit-fill-alpha, 1));
-      --lit-low-stop: oklch(from var(--lit-fill) calc(l - 0.075) calc(c + 0.03) h / var(--lit-fill-alpha, 1));
-    }
+    /* Stops: CENTERED ON THE FILL. Each stop moves lightness the same step up and down, with
+       chroma and hue unchanged, so the gradient's midpoint (oklab interpolation) is the token
+       itself. The primary centers on --color-cta, the brand violet a text-primary word paints,
+       so the button and the word read as one purple. Alex McRitchie accepted white near 3:1 on
+       the default primary for that; the semantic fills hold 4.5:1 at the midpoint. A top stop
+       past sRGB clips only the top edge: the midpoint is interpolated before it is clipped. */
+    html[data-surface-style="glass"] :is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success) {
+      --lit-top-stop: oklch(from var(--lit-fill) calc(l + 0.06) c h / var(--lit-fill-alpha, 1));
+      --lit-low-stop: oklch(from var(--lit-fill) calc(l - 0.06) c h / var(--lit-fill-alpha, 1));
+    }
+    html[data-surface-style="glass"] .btn-primary { --lit-fill: var(--color-cta); }
     html[data-surface-style="glass"] .btn-secondary { --lit-fill: var(--btn-secondary-bg, var(--color-success)); }
     html[data-surface-style="glass"] .btn-danger { --lit-fill: var(--color-danger-fill, var(--color-danger)); }
     html[data-surface-style="glass"] .btn-warning { --lit-fill: var(--color-warning-fill, var(--color-warning)); }
@@ -1545,16 +1689,16 @@ html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-n
         var(--lit-glow) oklch(from var(--lit-glow-stop, var(--lit-low-stop)) l c h / var(--lit-glow-alpha));
     }
     /* On a dark page a deep green, red or orange glow disappears, so these glow from the top
-       stop. The violet is already bright enough at its low stop. */
+       stop. The violet, centered on the brand colour, is bright enough at its low stop. */
     html.dark[data-surface-style="glass"] :is(.btn-secondary, .btn-danger, .btn-warning, .btn-success) { --lit-glow-stop: var(--lit-top-stop); }
     /* A TOUCH OF TRANSPARENCY on a full-size filled button, dark theme only: a photo behind it
-       shows subtly, and white text holds 4.5:1 at the midpoint. An outer shadow is not painted
+       shows subtly, and white text holds its contrast at the midpoint. An outer shadow is not painted
        under its own box, so the glow never brightens the fill. On a light page the backdrop would
        lift the fill and cost contrast, so it stays solid there. Without a blur, or without relative
        oklch (the gradient would drop out and leave white text on nothing), it stays solid. */
     @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (color: oklch(from red l c h)) {
       html.dark[data-surface-style="glass"] :is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success):not(.btn-sm, :disabled, [aria-disabled="true"], [class*=" bg-"], [class^="bg-"]) {
-        --lit-fill-alpha: 0.94;
+        --lit-fill-alpha: 0.85;
         background-color: transparent;
         -webkit-backdrop-filter: blur(6px);
         backdrop-filter: blur(6px);
@@ -1602,13 +1746,53 @@ html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-n
     html[data-surface-style="glass"] .badge { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--lit-badge); }
     html[data-surface-style="glass"] .input-field { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--lit-input); }
 
+    /* BUTTON TRICKS ON A LIT BUTTON (the lit rules above).
+       A lit button already uses its box-shadow for its contact shadow and glow, and
+       its ::after for its inset light. These rules sit in the utilities layer and the
+       tricks in engine-motion.css sit in components, so the lit rules win, and each trick
+       that shares one of them makes room here. Keep a trick on a real .btn lit.
+
+       --btn-lit-rest is the lit button's outer shadow at rest. The pulse's keyframes
+       replace box-shadow for the whole animation, so they put it back themselves. */
+    html[data-surface-style="glass"] .btn:not(:disabled, [aria-disabled="true"]) {
+      --btn-lit-rest: var(--lit-contact);
+    }
+    html[data-surface-style="glass"] .btn:is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success):not(.btn-sm, :disabled, [aria-disabled="true"]) {
+      --btn-lit-rest: var(--lit-contact),
+        var(--lit-glow) oklch(from var(--lit-glow-stop, var(--lit-low-stop)) l c h / var(--lit-glow-alpha));
+    }
+
+    /* The glows need ::after for their bloom, so the inset light moves to the host and
+       the bloom gets its own box back. Without this the lit rule's inset: -1px closes
+       the bloom's hole and it washes the whole face. .btn-outline has no lit ::after. */
+    html[data-surface-style="glass"] .btn:is(.edge-rotate-glow, .studio-team-glow, .studio-border-glow):not(.btn-outline, :disabled, [aria-disabled="true"]) {
+      box-shadow: var(--lit-inset), var(--btn-lit-rest);
+    }
+    html[data-surface-style="glass"] .btn:is(.edge-rotate-glow, .studio-team-glow, .studio-border-glow):not(.btn-outline, :disabled, [aria-disabled="true"]):active {
+      box-shadow: var(--lit-inset-pressed);
+    }
+    html[data-surface-style="glass"] .btn:is(.edge-rotate-glow, .studio-team-glow):not(.btn-outline, :disabled, [aria-disabled="true"])::after {
+      inset: calc(-1 * (var(--edge-rotate-glow-thickness) + 4px + var(--edge-rotate-glow-bloom) * 2));
+      box-shadow: none;
+    }
+    html[data-surface-style="glass"] .btn.studio-border-glow:not(.btn-outline, :disabled, [aria-disabled="true"])::after {
+      inset: -46px;
+      box-shadow: none;
+    }
+
+    /* The sheen's band already stops at its own rounded box, and overflow: hidden would
+       cut the lit ::after's outer pixel, the top highlight. */
+    html[data-surface-style="glass"] .btn.sheen:not(:disabled, [aria-disabled="true"]) {
+      overflow: visible;
+    }
+
     /* LESS TRANSPARENCY: every surface above goes solid and drops its blur. Last, to win on order;
        both spellings of the root, since html.dark outranks a bare html[...] on specificity. */
     @media (prefers-reduced-transparency: reduce) {
       html[data-surface-style="glass"], html.dark[data-surface-style="glass"] { --surface-glass-fill: var(--color-surface); --surface-glass-fill-hover: var(--color-surface-alt); }
-      html[data-surface-style="glass"] :is(.surface-glass-blur, .nav-shell, .page-header:is([data-stuck], [data-studio-controller-failed~="page-header"] + .page-header)),
+      html[data-surface-style="glass"] :is(.surface-glass-blur, .nav-shell, .section-header[data-stuck], .page-header:is([data-stuck], [data-studio-controller-failed~="page-header"] + .page-header)),
       html.dark[data-surface-style="glass"] :is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success):not(.btn-sm, :disabled, [aria-disabled="true"]) { --lit-fill-alpha: 1; -webkit-backdrop-filter: none; backdrop-filter: none; }
-      html[data-surface-style="glass"] :is(.nav-shell, .page-header:is([data-stuck], [data-studio-controller-failed~="page-header"] + .page-header)) { background-color: var(--color-page); }
+      html[data-surface-style="glass"] :is(.nav-shell, .section-header[data-stuck], .page-header:is([data-stuck], [data-studio-controller-failed~="page-header"] + .page-header)) { background-color: var(--color-page); }
     }
 
     /* THE SIDEBAR ROW'S DESCRIPTION (components/_link_sidebar, _geo_signpost). At rest

data/app/controllers/concerns/studio/error_handling.rb

@@ -7,6 +7,8 @@ module Studio
     # methods only.
     include Studio::SessionDrift
 
+    INVALID_TOKEN_MESSAGE = "This page has expired. Reload it, then try again."
+
     included do
       # ORDER IS LOAD-BEARING — ActiveSupport::Rescuable resolves handlers with
       # `reverse_each`, so the LAST matching rescue_from registered wins. The
@@ -19,6 +21,7 @@ module Studio
       rescue_from ActiveRecord::RecordNotFound, with: :handle_not_found
       # A string, so including this concern does not load the model concern.
       rescue_from "Sluggable::SlugRefused", with: :handle_slug_refused
+      rescue_from ActionController::InvalidAuthenticityToken, with: :handle_invalid_authenticity_token
 
       before_action :require_authentication
       after_action :track_user_session
@@ -271,6 +274,20 @@ module Studio
       end
     end
 
+    # Layer 1: a bad or missing CSRF token on a fetch is a 422 the page can read, with
+    # no ErrorLog row: anyone can send one, and the catch-all answered it 500.
+    #
+    # HTML stays with the catch-all on purpose. Its redirect home hands a stale login or
+    # magic-link form a fresh token and a way on, where public/422.html is a dead end
+    # with no link (Back shows the same stale form). Its row is what the health report
+    # sees when a session config breaks every form at once.
+    def handle_invalid_authenticity_token(exception)
+      respond_to do |format|
+        format.json { render json: { error: INVALID_TOKEN_MESSAGE, reason: "invalid_token" }, status: :unprocessable_entity }
+        format.any { handle_unexpected_error(exception) }
+      end
+    end
+
     # Layer 1: Catch-all for unexpected errors — log + friendly response.
     # Skips logging if rescue_and_log already captured it.
     def handle_unexpected_error(exception)

data/app/helpers/studio/fizz_helper.rb

@@ -73,6 +73,11 @@ module Studio
         "--fd:#{bit[:delay]}s;--ft:#{bit[:duration]}s;--fc:#{fizz_color(bit)}"
     end
 
+    # A fixed palette as the inline style a stack carries: `--fizz-c-1:red;...`.
+    def fizz_stack_style(colors)
+      Array(colors).first(SLOTS).each_with_index.map { |c, i| "--fizz-c-#{i + 1}:#{c}" }.join(";")
+    end
+
     private
 
     # Where in its own zone a bubble sits. The outer columns each throw one

data/app/javascript/studio/agent_chat.js

@@ -18,6 +18,12 @@
 //            until the app answers 201; a refusal shows its reason above them.
 //   FOLLOW   the thread stays at its end while the reader is within FOLLOW_PX of
 //            it, and always after their own send (the hub's chat_follow rule).
+//   REVEAL   the composer sticks over the window's bottom, so on a short window the
+//            thread's end sits under it. On load and after a new turn the page
+//            scrolls that end clear of the composer, with the same manners as
+//            FOLLOW: not for an empty thread, not for a reader who scrolled the page
+//            up (revealFollowing, until their own send), and never during a hold,
+//            when it waits for the button to be let go.
 //   REFRESH  the public hook for code outside the chat (studio/agent_chat_voice, a
 //            host's own composer): dispatch studio:agent-chat:refresh on the
 //            chat's section, optionally with {detail: {turn}}, a turn the app
@@ -43,6 +49,11 @@ export const IDLE_MS = 30000
 export const OFFLINE_MS = 15000
 export const FOLLOW_PX = 20
 export const LIMIT = 50
+export const REVEAL_GAP_PX = 12
+export const INVALID_TOKEN = "invalid_token"
+export const EXPIRED_MESSAGE = "This page has expired. Copy your message, then reload the page to send it."
+export const RECORDER_STATE_EVENT = "studio:voice-recorder:state"
+const HOLDING = "[data-voice-recorder-state='recording'],[data-voice-recorder-state='starting']"
 export const REFRESH_EVENT = "studio:agent-chat:refresh"
 export const SENT_EVENT = "studio:agent-chat:sent"
 const UNSETTLED = new Set(["pending", "typing"])
@@ -102,6 +113,12 @@ export function isFollowing(log, px = FOLLOW_PX) {
   return log.scrollHeight - log.clientHeight - log.scrollTop <= px
 }
 
+// How many pixels of the thread's end the composer (or the window's bottom) hides;
+// zero or less when it is clear of both. Rects are the elements' own.
+export function coveredPx(endRect, composerRect, windowHeight) {
+  return endRect.bottom - Math.min(composerRect.top, windowHeight)
+}
+
 // The page's authenticity token: the form's own field, else the csrf meta.
 export function csrfToken(form, doc = globalThis.document) {
   const field = form && form.querySelector("input[name='authenticity_token']")
@@ -138,13 +155,57 @@ export function mountAgentChat(root, {
   const soul = root.dataset.agentChatSoul
   const name = root.dataset.agentChatName || "The agent"
 
-  const state = { turns: [], pending: false, waitingSince: null, offline: false, inFlight: false, pollAgain: false, sending: false, timer: null, alive: true, following: true }
+  const state = { turns: [], pending: false, waitingSince: null, offline: false, inFlight: false, pollAgain: false, sending: false, timer: null, alive: true, following: true, revealFollowing: true, revealOwed: false }
 
   const onScroll = () => { state.following = isFollowing(log) }
   log.addEventListener("scroll", onScroll, { passive: true })
 
   function toEnd() { log.scrollTop = log.scrollHeight }
 
+  // The last thing in the thread's column above the composer that is showing.
+  function threadEnd() {
+    return [offlineNote, typing].find((el) => el && el.hidden === false) || log
+  }
+
+  function windowHeight() {
+    return doc && doc.documentElement ? doc.documentElement.clientHeight : 0
+  }
+
+  function covered() {
+    const end = threadEnd()
+    if (!form || !end.getBoundingClientRect || !form.getBoundingClientRect) return 0
+    return coveredPx(end.getBoundingClientRect(), form.getBoundingClientRect(), windowHeight())
+  }
+
+  // scrollIntoView, not window.scrollBy: a host may scroll an inner container. The
+  // margin is what the composer takes off the bottom of the window once it sticks:
+  // its height and its sticky bottom, not its top now, because a composer lower down
+  // the page is not stuck until this scroll has run. Instant, so a host's smooth
+  // scrolling cannot leave the page moving when a hold begins.
+  function revealEnd() {
+    if (root.querySelector(HOLDING)) { state.revealOwed = true; return }
+    state.revealOwed = false
+    if (!state.turns.length || covered() <= 0) return
+    const end = threadEnd()
+    const stuckAt = parseFloat(globalThis.getComputedStyle?.(form).bottom) || 0
+    end.style.scrollMarginBottom = `${form.getBoundingClientRect().height + stuckAt + REVEAL_GAP_PX}px`
+    end.scrollIntoView({ block: "end", behavior: "instant" })
+    end.style.scrollMarginBottom = ""
+  }
+
+  // A scroll of the page or a host's container says whether the reader is still at
+  // the thread's end. The log's own scroll, the box's and the picker's say nothing:
+  // only something that holds the chat can move it. A reveal passes this too, and
+  // ends there.
+  const onPageScroll = (event) => {
+    if (!event.target || !event.target.contains || !event.target.contains(root)) return
+    state.revealFollowing = covered() <= FOLLOW_PX
+  }
+
+  const onRecorderState = () => {
+    if (state.revealOwed && !root.querySelector(HOLDING) && state.following && state.revealFollowing) revealEnd()
+  }
+
   function setOffline(offline) {
     state.offline = offline
     if (offlineNote) offlineNote.hidden = !offline
@@ -185,7 +246,10 @@ export function mountAgentChat(root, {
     const waiting = state.pending || state.turns.some((turn) => !settled(turn))
     if (typing) typing.hidden = !waiting
     if (phase) phase.dataset.phase = typingPhase(state.turns)
-    if (follow) toEnd()
+    if (follow) {
+      toEnd()
+      if (state.revealFollowing) revealEnd()
+    }
   }
 
   function schedule() {
@@ -233,6 +297,7 @@ export function mountAgentChat(root, {
       state.turns = mergeTurns(state.turns, [turn])
       state.pending = turn.status !== "held"
       state.following = true
+      state.revealFollowing = true
       state.waitingSince = now()
       setOffline(false)
       render()
@@ -272,6 +337,7 @@ export function mountAgentChat(root, {
         state.turns = mergeTurns(state.turns, [data.turn])
         state.pending = data.turn.status !== "held"
         state.following = true
+        state.revealFollowing = true
         setOffline(false)
         render()
         toEnd()
@@ -281,7 +347,7 @@ export function mountAgentChat(root, {
         clearTimer(state.timer)
         state.timer = setTimer(poll, POLL_MS)
       } else {
-        showError(data.error || `Couldn't send that to ${name}. Try again.`)
+        showError(data.reason === INVALID_TOKEN ? EXPIRED_MESSAGE : data.error || `Couldn't send that to ${name}. Try again.`)
         if (status) status.textContent = ""
       }
     } catch (_error) {
@@ -313,7 +379,10 @@ export function mountAgentChat(root, {
   input && input.addEventListener("keydown", onKeydown)
   retry && retry.addEventListener("click", onRetry)
   root.addEventListener(REFRESH_EVENT, onRefresh)
+  root.addEventListener(RECORDER_STATE_EVENT, onRecorderState)
   doc && doc.addEventListener && doc.addEventListener("visibilitychange", onVisible)
+  // Scroll events do not bubble; capture hears the page's and any container's.
+  doc && doc.addEventListener && doc.addEventListener("scroll", onPageScroll, { capture: true, passive: true })
   root.dataset.agentChatReady = "true"
   poll()
 
@@ -330,7 +399,9 @@ export function mountAgentChat(root, {
       input && input.removeEventListener("keydown", onKeydown)
       retry && retry.removeEventListener("click", onRetry)
       root.removeEventListener(REFRESH_EVENT, onRefresh)
+      root.removeEventListener(RECORDER_STATE_EVENT, onRecorderState)
       doc && doc.removeEventListener && doc.removeEventListener("visibilitychange", onVisible)
+      doc && doc.removeEventListener && doc.removeEventListener("scroll", onPageScroll, { capture: true })
       delete root.dataset.agentChatReady
     }
   }

data/app/javascript/studio/agent_chat_voice.js

@@ -50,6 +50,8 @@ export const MESSAGES = {
   notConfigured: "Voice isn't set up on this app yet, so I can't hear recordings. Type instead for now.",
   rateLimited: "That's a lot of voice messages in a row. Wait a moment, then hold to talk again.",
   signedOut: "Sign in again to talk.",
+  expired: "This page has expired. Reload it, then hold to talk again.",
+  expiredSend: "This page has expired. Copy your words from the box, then reload the page to send them.",
   unavailable: "I couldn't transcribe that just now. Try again in a moment.",
   failed: "That recording didn't go through. Try again.",
   offline: "Can't reach the server right now. Try again in a moment.",
@@ -65,11 +67,19 @@ export function retryHint(seconds) {
   return ` Try again in ${minutes} minute${minutes === 1 ? "" : "s"}.`
 }
 
+// A refused CSRF token: the engine's own answer (Studio::ErrorHandling), or Rails'
+// {status: 422, error: "Unprocessable Content"} from a host that re-raises it. Retrying
+// on this page can never pass, and Rails' words mean nothing to a person.
+export function tokenRefused(status, body = {}) {
+  return status === 422 && !!body && (body.reason === "invalid_token" || body.status === 422)
+}
+
 // What POST /voice/takes's refusal means on the page: {state, message}.
 // `body` is the parsed JSON (or {}); `retryAfter` the header, if any.
 export function refusalFor(status, body = {}, retryAfter = null) {
   const said = body && typeof body.error === "string" && body.error.trim() ? body.error.trim() : null
   if (status === 401) return { state: "refused", message: MESSAGES.signedOut }
+  if (tokenRefused(status, body)) return { state: "refused", message: MESSAGES.expired }
   if (status === 429) {
     return { state: "rate_limited", message: MESSAGES.rateLimited + retryHint(retryAfter ?? (body && body.retry_after)) }
   }
@@ -235,6 +245,10 @@ export function mountAgentChatVoice(root, {
       return
     }
     keepWords(answer.text)
+    if (tokenRefused(response.status, data)) {
+      say("refused", MESSAGES.expiredSend)
+      return
+    }
     const reason = typeof data.error === "string" && data.error ? `${data.error} ` : ""
     say(response.status === 429 ? "rate_limited" : "failed", `${reason}${MESSAGES.notSent(name)}`)
   }
@@ -255,7 +269,9 @@ export function mountAgentChatVoice(root, {
     if (!response.ok || typeof body.text !== "string" || !body.text.trim()) {
       const retryAfter = response.headers && response.headers.get ? response.headers.get("Retry-After") : null
       const { state, message } = response.ok ? { state: "no_speech", message: MESSAGES.noSpeech } : refusalFor(response.status, body, retryAfter)
-      say(state, message)
+      // A reload clears the box, so words already in it get the copy-first line.
+      const inBox = form && form.querySelector("[data-agent-chat-input]")?.value.trim()
+      say(state, inBox && tokenRefused(response.status, body) ? MESSAGES.expiredSend : message)
       return
     }
     await send(body)