studio-engine 0.127.0 → 0.128.0

data/app/javascript/studio/survey.js

@@ -9,7 +9,8 @@
 //
 // AUTOSAVE IS BEST EFFORT: the final Submit posts the whole form, so a failed
 // autosave loses nothing. Without this module the page is the plain form, every
-// question on one page, and it submits the same answers.
+// question on one page, and it submits the same answers. So a submit cancels every
+// save still in flight: one left running could reach the server after the POST.
 //
 // It imports nothing; test/javascript/survey.test.mjs loads it as a data:
 // module. Bound to the page by the survey controller.
@@ -84,6 +85,7 @@ export function enhanceSurvey(root, win = window, doc = document) {
   var reduce = win.matchMedia && win.matchMedia("(prefers-reduced-motion: reduce)").matches;
   var saved = {};
   var timers = {};
+  var requests = [];
   var current = -1;
   var pointerPick = false;
   var submitting = false;
@@ -121,12 +123,20 @@ export function enhanceSurvey(root, win = window, doc = document) {
     }
     var url = root.dataset.answerBase + encodeURIComponent(key);
     status.textContent = "Saving…";
+    var request = new win.AbortController();
+    requests.push(request);
     return win.fetch(url, {
       method: "PATCH",
       body: body,
       credentials: "same-origin",
+      signal: request.signal,
       headers: { "Accept": "application/json", "X-CSRF-Token": csrf }
     }).then(function (res) {
+      // Completed elsewhere, such as in a second tab. There is nothing to fix here.
+      if (res.status === 409) {
+        status.textContent = "";
+        return false;
+      }
       // fetch resolves on a 4xx/5xx — the status is the only signal.
       if (!res.ok) {
         return res.json().catch(function () { return {}; }).then(function (data) {
@@ -139,6 +149,8 @@ export function enhanceSurvey(root, win = window, doc = document) {
       status.textContent = "Saved";
       return true;
     }).catch(function () {
+      // The submit cancelled it, which is not the visitor being offline.
+      if (submitting) return false;
       status.textContent = "Offline? Your answers still go in when you submit.";
       return false;
     });
@@ -196,8 +208,8 @@ export function enhanceSurvey(root, win = window, doc = document) {
       setError(step, "");
     }
     if (current === steps.length - 1) {
-      // No autosave here: the POST carries every answer, and a PATCH racing
-      // it would land after completion and be refused.
+      // No autosave here: the POST carries every answer. The submit handler
+      // cancels any earlier save still in flight.
       submitForm();
     } else {
       if (step.dataset.key) save(step);
@@ -222,6 +234,7 @@ export function enhanceSurvey(root, win = window, doc = document) {
     }
     Object.keys(timers).forEach(function (key) { win.clearTimeout(timers[key]); });
     submitting = true;
+    requests.forEach(function (request) { request.abort(); });
     submit.disabled = true;
     submit.textContent = "Sending…";
   });

data/app/javascript/studio/theme_editor.js

@@ -82,7 +82,11 @@ export function dsThemeEditor(seed) {
     }, seed || {}),
     saving: false,
 
+    // The preview block shows once a role has been edited: before that it only repeats the page.
+    edited: false,
+
     updatePreview() {
+      this.edited = true
       applyProperties(document.documentElement.style, stylePreviewProperties(this.colors))
     },
 

data/app/javascript/studio/voice_recorder.js

@@ -14,9 +14,9 @@
 //   </div>
 //
 // STATES, on data-voice-recorder-state: idle -> starting -> recording ->
-// captured | silent | failed, plus denied (the microphone was refused) and
-// unsupported (no MediaRecorder). Any of idle, captured, silent, failed and
-// denied takes a new press.
+// captured | silent | failed, plus denied (the microphone was refused),
+// unsupported (no MediaRecorder) and, in hold mode, tapped (let go too soon to be a
+// take). Any of idle, captured, silent, failed, denied and tapped takes a new press.
 //
 // EVENTS, dispatched on the root (they bubble):
 //   studio:voice-recorder:take    detail { blob, mimeType, durationMs, peakRms, microphone: { label, deviceId } }
@@ -49,7 +49,12 @@ export const MIME_CANDIDATES = [
   "audio/ogg;codecs=opus"
 ]
 
-export const READY = ["idle", "captured", "silent", "failed", "denied"]
+export const READY = ["idle", "captured", "silent", "failed", "denied", "tapped"]
+
+// Hold mode: a take shorter than this is a tap, not a hold. It says how to use the
+// button and tells the chip nothing: the frames a tap records are too few to judge
+// the microphone by, and two silent takes in a row would open the help.
+export const TAP_MS = 300
 
 // How long a take may stay silent before the status asks whether the
 // microphone is on.
@@ -66,6 +71,7 @@ export const COPY = {
             missing: "I couldn't find a microphone. Plug one in and try again.",
             busy: "Your microphone is busy in another app. Close it there, then try again." },
   denied: { button: "Record", status: "Allow the microphone to record." },
+  tapped: { button: "Record", status: "Hold the button while you talk, then let go." },
   unsupported: { button: "Record", status: "This browser can't record here. Try Safari or Chrome." }
 }
 
@@ -83,8 +89,9 @@ export function formatElapsed(ms) {
 
 // The line for a microphone that would not open (NotAllowedError is "denied",
 // not this). NotReadableError is a microphone another app holds (Chrome's
-// older name, TrackStartError); everything else reads as no microphone found.
-export const BUSY_ERRORS = ["NotReadableError", "TrackStartError"]
+// older name, TrackStartError; Firefox can say AbortError); everything else
+// reads as no microphone found.
+export const BUSY_ERRORS = ["NotReadableError", "TrackStartError", "AbortError"]
 
 export function failedLine(error, copy = COPY) {
   const busy = !!error && BUSY_ERRORS.includes(error.name)
@@ -216,7 +223,7 @@ export function mountVoiceRecorder(root, { win = window, open = openMicrophone,
     // Destroyed, or let go of (hold mode) before the microphone opened.
     if (destroyed || stopWanted) {
       release()
-      if (!destroyed) setState("idle")
+      if (!destroyed) setState(mode === "hold" ? "tapped" : "idle")
       return
     }
     chunks = []
@@ -275,6 +282,10 @@ export function mountVoiceRecorder(root, { win = window, open = openMicrophone,
     recorder = null
     release()
     if (destroyed) return
+    if (mode === "hold" && durationMs < TAP_MS) {
+      setState("tapped")
+      return
+    }
     if (blob.size === 0 || !heard) {
       setState("silent", silentMessage(copy.silent.named, microphone.label))
       announce(MICROPHONE_EVENTS.silent, { label: microphone.label }, win)

data/app/models/studio/survey_response.rb

@@ -87,25 +87,32 @@ module Studio
 
     # Stores one answer (or clears it, for a blank). Returns [ok, error]. Never
     # touches a completed response: a finished survey is a record, not a draft.
+    #
+    # THE ROW LOCK IS THE GUARD, not the loaded copy. This writes the whole answers
+    # hash, so a copy loaded before a submit completed the row would put its stale
+    # hash over the finished answers, and two saves at once would lose each other's
+    # keys. with_lock reloads under the lock, so both checks read the row as it is.
     def record_answer(question, raw)
-      return [false, "This survey is already complete."] if completed?
-
-      value, error = question.normalize(raw)
-      return [false, error] if error
-
-      next_answers = (answers || {}).dup
-      if value.nil?
-        next_answers.delete(question.key)
-      else
-        next_answers[question.key] = {
-          "value" => value, "label" => question.label, "type" => question.type.to_s,
-          "display" => question.display(value), "answered_at" => Time.current.utc.iso8601
-        }
+      with_lock do
+        next [false, "This survey is already complete."] if completed?
+
+        value, error = question.normalize(raw)
+        next [false, error] if error
+
+        next_answers = (answers || {}).dup
+        if value.nil?
+          next_answers.delete(question.key)
+        else
+          next_answers[question.key] = {
+            "value" => value, "label" => question.label, "type" => question.type.to_s,
+            "display" => question.display(value), "answered_at" => Time.current.utc.iso8601
+          }
+        end
+        self.answers = next_answers
+        self.current_key = question.key
+        save!
+        [true, nil]
       end
-      self.answers = next_answers
-      self.current_key = question.key
-      save!
-      [true, nil]
     end
 
     def missing_required(survey)

data/app/views/components/_geo_signpost.html.erb

@@ -88,6 +88,7 @@
       <%= link_to admin_geo_path,
             class: "group flex items-center gap-3 px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset transition",
             "data-sidebar-row-described": "",
+            "aria-current": (Studio.sidebar_style == :glass && respond_to?(:request) && request&.path == admin_geo_path ? "page" : nil),
             "@click": geo_close do %>
         <span class="studio-emoji-box text-lg leading-none flex-shrink-0">🌍</span>
         <span class="relative min-w-0 flex-1">

data/app/views/components/_link_sidebar.html.erb

@@ -5,6 +5,15 @@
     positions against the header, not the viewport); the engine navbar does
     this automatically when sections are declared. %>
 <% sections = studio_sidebar_sections %>
+<%# THE PANEL'S STYLE (Studio.sidebar_style). Under :glass a row draws its link's line icon
+    and the row for this page says aria-current, which is what lights it. The default style
+    reads neither, so an app that stays on it renders what it did. A caller may pass
+    sidebar_style: for one render; the engine lab does, since the setting is process-wide. %>
+<% glass = (local_assigns[:sidebar_style] || Studio.sidebar_style) == :glass %>
+<% sidebar_request = glass && respond_to?(:request) ? request : nil %>
+<%# The engine's Geo row counts too, so no section row above it claims /admin/geo as its own. %>
+<% current_rows = respond_to?(:admin_geo_path) ? sections + [{ links: [{ href: admin_geo_path }] }] : sections %>
+<% current_href = sidebar_request && Studio::SidebarSections.current_href(current_rows, sidebar_request.path, host: sidebar_request.host) %>
 <% sidebar_admin = respond_to?(:admin?) && admin? %>
 <%# THE PANEL'S TITLE. Signed in, admin included: the name the navbar shows, from the
     same call. Signed out: a greeting by the browser's local time, which the server
@@ -24,18 +33,28 @@
      elsif !sidebar_signed_in
        tag.p("Good morning", class: sidebar_title_class, data: { link_sidebar_title: "", link_sidebar_greeting: "" })
      end %>
-<%# THE GROUPS. No section shows a label word and none shows the admin chip: a divider
-    separates the groups. The words stay as each group's accessible name, so a screen
-    reader still announces them. An empty section draws no group, or its two dividers
-    would touch.
+<%# THE GROUPS. A divider separates them, and by default a group shows no label word. The
+    words stay as each group's accessible name, so a screen reader still announces them.
+    An empty section draws no group, or its two dividers would touch. No group shows the
+    admin chip.
+
+    A SECTION MAY OPT IN TO A VISIBLE HEADER with header: true: its title, in the small
+    label style, above its rows. The word on screen is hidden from assistive technology,
+    because the group's aria-label already says it. The label is not an id reference:
+    body_html renders in both panels, so an id here would be a duplicate. The header is
+    plain text, outside every row, so it takes no click and no row measures against it.
+    Its pt-3 and the group's py-1 make the 16px the old label had above it.
 
     A ROW IS ONE LINE AT REST, with or without a desc:, so the spacing never changes. A
     desc: fades in on hover or keyboard focus, and nothing moves to make room: it sits
     absolutely in the row's padding as the label lifts by a transform. engine.css, THE
     SIDEBAR ROW'S DESCRIPTION, holds the rules. A row with no desc: gains no attribute. %>
-<% sidebar_group = lambda do |title:, admin:, first:, &block|
+<% sidebar_group = lambda do |title:, admin:, first:, header: false, &block|
      name = [title.presence, ("admin" if admin && !title.to_s.match?(/\badmin\b/i))].compact.join(", ").presence
-     tag.div(role: "group", aria: { label: name }, class: ["py-1", ("border-t border-subtle" unless first)], &block)
+     header_html = tag.div(title, class: "px-4 pt-3 pb-1 label-upper font-bold truncate", aria: { hidden: true }, data: { sidebar_group_header: "" }) if header && title.present?
+     tag.div(role: "group", aria: { label: name }, class: ["py-1", ("border-t border-subtle" unless first || glass)]) do
+       safe_join([header_html, capture(&block)].compact)
+     end
    end %>
 <% close_action = "$store.sidebars.linkTreeOpen = false" %>
 
@@ -55,16 +74,20 @@
 <% body_html = capture do %>
   <nav class="flex-1 min-h-0 overflow-y-auto py-1" aria-label="Studio links">
     <% sections.select { |section| section[:links].any? }.each_with_index do |section, index| %>
-      <%= sidebar_group.call(title: section[:title], admin: section[:admin], first: index.zero?) do %>
+      <%= sidebar_group.call(title: section[:title], admin: section[:admin], first: index.zero?, header: section[:header]) do %>
       <% section[:links].each do |link| %>
         <% target = link[:target].presence %>
+        <% line_icon = (studio_icon(link[:icon]) if glass && link[:icon].present?) %>
         <%= link_to link[:href],
               class: "group flex items-center gap-3 px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset transition",
               target: target,
               rel: target == "_blank" ? "noopener" : nil,
               "data-sidebar-row-described": (link[:desc].present? ? "" : nil),
+              "aria-current": (current_href.present? && link[:href] == current_href ? "page" : nil),
               "@click": close_action do %>
-          <% if link[:hover_emoji].present? %>
+          <% if line_icon %>
+            <span class="flex-shrink-0" data-sidebar-row-icon><%= line_icon %></span>
+          <% elsif link[:hover_emoji].present? %>
             <%= render "components/emoji_swap",
                   base: link[:emoji],
                   hover: link[:hover_emoji],
@@ -119,8 +142,11 @@
         rather than called: this partial renders in hosts and test rigs that
         provide studio_sidebar_sections without the rest of the helper, and a
         bare call would raise for them. The two must stay the same question —
-        if the helper's rule changes, this changes with it. %>
-    <% if sidebar_admin && sections.any? { |section| section[:admin] } %>
+        if the helper's rule changes, this changes with it.
+
+        A host that moves Geo to its own page sets Studio.sidebar_geo_signpost = false
+        and renders components/_geo_signpost there. %>
+    <% if Studio.sidebar_geo_signpost && sidebar_admin && sections.any? { |section| section[:admin] } %>
       <%= sidebar_group.call(title: "Geo", admin: true, first: false) do %>
         <%= render "components/geo_signpost", variant: :sidebar, close_action: close_action %>
       <% end %>
@@ -130,11 +156,11 @@
 
 <% footer_html = capture do %>
   <% if logged_in? %>
-    <div class="border-t border-subtle p-2">
+    <div class="border-t border-subtle p-2"<% if glass %> data-sidebar-glass-foot<% end %>>
       <%= link_to logout_path,
             class: "flex items-center gap-3 rounded-md px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 transition",
             "@click": close_action do %>
-        <span>👋</span><span>Log out</span>
+        <% if glass %><span class="flex-shrink-0" data-sidebar-row-icon><%= studio_icon("log-out") %></span><% else %><span>👋</span><% end %><span>Log out</span>
       <% end %>
     </div>
   <% end %>
@@ -151,6 +177,7 @@
       escape_action: close_action,
       display_class: "hidden md:flex",
       edge: true,
+      glass: glass,
       role: "navigation",
       aria_label: sidebar_admin ? "Admin menu" : "Links menu" %>
 
@@ -166,5 +193,6 @@
       display_class: "flex md:hidden",
       width_class: "w-full",
       edge: true,
+      glass: glass,
       role: "navigation",
       aria_label: sidebar_admin ? "Admin menu" : "Links menu" %>

data/app/views/components/_sidebar_panel.html.erb

@@ -19,7 +19,7 @@
     would cover the expanded header. engine.css (THE PINNED EDGE ON THE SCROLL
     TIMELINE) moves it with the header on the scroll timeline instead.
 
-    Three opt-in locals (unset, the panel renders as it did in 0.113.0):
+    Four opt-in locals (unset, the panel renders as it did in 0.113.0):
       title_html  the header's LEAD SLOT: HTML in the title's place, for a panel
                   whose lead is a live status line rather than a label. It is
                   content, NOT a name: it never feeds aria-labelledby or
@@ -30,6 +30,11 @@
                   panel's inner edge, drawn by engine.css (THE SIDEBAR'S EDGE) from md
                   up. It softens the page beside the panel, so it suits a menu that
                   opens over the page, not a panel kept open beside live content.
+      glass       true floats an inset, translucent panel (engine.css, THE GLASS SIDEBAR).
+                  The aside keeps its geometry, its slide and its pinned edge, and turns
+                  into a clear frame around an inner shell, which holds the blur. A
+                  backdrop-filter makes a containing block, and this keeps it off the
+                  element Alpine and Turbo move. Glass ignores `edge`: the whole panel blurs.
       close_hook  true stamps the close button data-sidebar-panel-close="<id>"
                   too, so a host's own document handler can match the button
                   to its panel by id. Needs `id`; without one it adds nothing.
@@ -53,7 +58,9 @@
 <% aria_label     = local_assigns.fetch(:aria_label, title) %>
 <% labelledby     = id.present? && title.present? ? "#{id}-title" : nil %>
 <% close_hook     = local_assigns.fetch(:close_hook, false) && id.present? %>
-<% edge           = local_assigns.fetch(:edge, false) %>
+<% glass          = local_assigns.fetch(:glass, false) %>
+<% edge           = local_assigns.fetch(:edge, false) && !glass %>
+<% surface_class  = glass ? "" : "bg-surface border-l border-subtle shadow-2xl " %>
 
 <aside
   <% if id.present? %>id="<%= id %>"<% end %>
@@ -78,17 +85,20 @@
   x-transition:leave="transition ease-in duration-200"
   x-transition:leave-start="translate-x-0"
   x-transition:leave-end="translate-x-full"
-  class="<%= display_class %> fixed right-0 <%= width_class %> bg-surface border-l border-subtle shadow-2xl <%= z_class %> flex-col <%= panel_class %>"
+  class="<%= display_class %> fixed right-0 <%= width_class %> <%= surface_class %><%= z_class %> flex-col <%= panel_class %>"
   style="top:var(--nav-bottom, var(--nav-h, 6rem));height:calc(100% - var(--nav-bottom, var(--nav-h, 6rem)))"
   data-pin-edge
   <% if edge %>
   data-sidebar-edge
   <% end %>
+  <% if glass %>
+  data-sidebar-glass
+  <% end %>
   role="<%= role %>"
   <% if labelledby %>aria-labelledby="<%= labelledby %>"<% elsif aria_label.present? %>aria-label="<%= aria_label %>"<% end %>>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full"<% if glass %> data-sidebar-glass-shell<% end %>>
     <% if title.present? || title_html.present? || actions_html.present? || close_action.present? %>
-      <div class="flex items-center justify-between p-4 border-b border-subtle">
+      <div class="flex items-center justify-between p-4 border-b border-subtle"<% if glass %> data-sidebar-glass-head<% end %>>
         <% if title.present? %>
           <h3 <% if labelledby %>id="<%= labelledby %>"<% end %> class="text-lg font-bold text-heading"><%= title %></h3>
         <% elsif title_html.present? %>

data/app/views/layouts/studio/_head.html.erb

@@ -198,6 +198,12 @@
 <% if sticky_table_headers %>
   <%= stylesheet_link_tag "studio/sticky_table_header", "data-turbo-track": "reload" %>
 <% end %>
+<%# THE PAGE-LOAD OVERLAY, FOR EVERY APP. The body is the host's, so the overlay waits
+    here, inert, and studio/loader adds it to the body when a visit starts. A host's own
+    studio_loader_overlay wins. Studio.loader_overlay = false opts out. docs/LOADER.md. %>
+<% if Studio.loader_overlay && respond_to?(:studio_loader_overlay) %>
+  <template data-studio-loader-overlay-template><%= studio_loader_overlay %></template>
+<% end %>
 <%= javascript_importmap_tags %>
 <%# EVERY ENGINE SCRIPT BELOW IS A MODULE, AND EVERY MODULE TAG COMES AFTER THE
     IMPORT MAP. A browser without dynamic import maps ignores an import map that
@@ -207,12 +213,17 @@
     carry no body and need no nonce under a policy that allows 'self'. The session
     store (studio/_session_stamp, above) and the full-load script above are the two
     classic scripts, and each says why.
-    A MODULE LOADED BY URL MUST IMPORT NO BARE SPECIFIER. javascript_include_tag
-    also sends a `Link: rel=modulepreload` response header, which the browser
-    acts on before it parses this map, so a bare import in that module can
-    resolve against no map at all and fail for good (0.115.1.rc1, task
+    A MODULE TAG BY URL SENDS NO PRELOAD HEADER. javascript_include_tag answers
+    type: "module" with a `Link: rel=modulepreload` response header unless the call
+    passes preload_links_header: false, and the browser acts on that header before it
+    parses this map. Firefox then refuses the map outright ("Import maps are not allowed
+    after a module load or preload has started"), so every bare studio/* import on the
+    page fails and no panel opens (task firefox-import-map-preload,
+    test/views/head_sends_no_module_preload_test.rb).
+    A MODULE LOADED BY URL ALSO IMPORTS NO BARE SPECIFIER. A preload that arrived some
+    other way would resolve it against no map and fail for good (0.115.1.rc1, task
     confetti-resolves-on-hub). A module with bare imports takes a
-    javascript_import_module_tag, which sends no header. %>
+    javascript_import_module_tag. %>
 <%# THE ENGINE'S BROWSER BOOT (studio/application): its every-page Stimulus
     controllers, the pinned stack, and the Alpine shims. A module tag, so it
     carries the nonce. %>
@@ -311,7 +322,7 @@
     assigns window.Alpine and starts Alpine in a microtask after it is evaluated,
     which as a module is after every module above it. window.Alpine is not
     deprecated; Alpine itself and every host read it. %>
-<%= javascript_include_tag "studio/alpine", type: "module", "data-turbo-track": "reload" %>
+<%= javascript_include_tag "studio/alpine", type: "module", preload_links_header: false, "data-turbo-track": "reload" %>
 <% if sticky_table_headers %>
-  <%= javascript_include_tag "studio/sticky_table_header", type: "module", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "studio/sticky_table_header", type: "module", preload_links_header: false, "data-turbo-track": "reload" %>
 <% end %>

data/app/views/layouts/studio/_smooth_load.html.erb

@@ -21,4 +21,5 @@
 <% end %>
 <% if page_transition_direction %>
   <meta name="page-transition-direction" content="<%= page_transition_direction %>">
+  <meta name="page-transition-style" content="<%= @studio_page_transition_style || Studio.page_transition_style %>">
 <% end %>

data/app/views/layouts/studio/component_preview.html.erb

@@ -3,7 +3,7 @@
     so a preview looks as it does in the app, and nothing else: no navbar, no
     session, no script. -%>
 <!DOCTYPE html>
-<html>
+<html<%= %( data-surface-style="glass").html_safe if Studio.surface_style == :glass %>>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">

data/app/views/studio/agent_chat/_turn.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (turn:, name:) %>
-<%# One turn of the chat (studio/agent_chat/_chat), from a hub turn {id, role, text, status}, identified by its id AND role (data-turn-key "<id>:<role>"): the hub answers one message row as a user turn and an agent turn sharing the row's id. The page renders it twice, blank, as the <template>s studio/agent_chat clones; a host may also render real turns with it. The visitor's words sit in a right-hand bubble; the agent's are plain text across the thread (as the hub's agent-reply), its name kept for a screen reader. Text only, never HTML: the script sets textContent. A failed turn says so. %>
+<%# One turn of the chat (studio/agent_chat/_chat), from a hub turn {id, role, text, status}, identified by its id AND role (data-turn-key "<id>:<role>"): the hub answers one message row as a user turn and an agent turn sharing the row's id. The page renders it twice, blank, as the <template>s studio/agent_chat clones; a host may also render real turns with it. The visitor's words sit in a right-hand bubble; the agent's are plain text across the thread (as the hub's agent-reply), its name kept for a screen reader. Text only, never HTML: the script sets textContent. A failed turn says so. A held one (stored, no automatic answer coming) says that, and never asks for a resend. %>
 <% agent = turn["role"].to_s == "agent" %>
 <% status = turn["status"].to_s %>
 <div class="flex flex-col gap-2 min-w-0" data-agent-chat-turn data-role="<%= agent ? "agent" : "user" %>"
@@ -16,4 +16,6 @@
   <% end %>
   <p class="<%= agent ? "self-start" : "self-end" %> text-xs text-danger-ink" data-agent-chat-failed data-test="agent-chat-failed"
      <%= "hidden" unless status == "failed" %>><%= name %> could not answer this one. Send it again.</p>
+  <p class="<%= agent ? "self-start" : "self-end" %> text-xs text-muted" data-agent-chat-held data-test="agent-chat-held"
+     <%= "hidden" unless status == "held" %>>Your message was received, but it won't get an automatic answer.</p>
 </div>

data/app/views/studio/agent_chat/_voice.html.erb

@@ -7,16 +7,19 @@
     No audio is kept. Status lines are set as text.
 
     Scoped CSS for the reason studio/voice/_styles gives: it must render in an
-    app whose Tailwind build never saw this file. The status line keeps its one
-    line even when empty, so a one-line status coming or going under a held finger
-    does not move the button. Two things still can at 390px outside a stuck composer,
-    and the pointer stays captured through both: the quiet hint wrapping to two lines,
-    and the chip's prompt shortening on the first hold. %>
+    app whose Tailwind build never saw this file. A held button must not move, stuck
+    or not, so everything above and below it keeps its size through a hold: the
+    status line reserves the two lines the quiet hint wraps to at phone width (one
+    where the composer is wide enough), and holds its height through the hold
+    (holdLine, studio/agent_chat_voice); the chip is always one line, whatever name it
+    shows; the timer sits on the button, not beside it; and the recorder's own line
+    never shows here. e2e/agent_chat_voice.spec.js measures all of it at 390px. %>
 <% words = Studio::AgentChat.voice_copy(copy) %>
 <style>
-  .studio-agent-voice { display: grid; gap: .25rem; padding: 0 .25rem .25rem; min-width: 0; }
-  .studio-agent-voice-status { min-height: 1.25rem; margin: 0; padding: 0 .5rem; font-size: .875rem; line-height: 1.25rem; overflow-wrap: anywhere;
+  .studio-agent-voice { display: grid; gap: .25rem; padding: 0 .25rem .25rem; min-width: 0; container-type: inline-size; }
+  .studio-agent-voice-status { min-height: 2.5rem; margin: 0; padding: 0 .5rem; font-size: .875rem; line-height: 1.25rem; overflow-wrap: anywhere;
     color: var(--color-text-body, inherit); }
+  @container (min-width: 36rem) { .studio-agent-voice-status { min-height: 1.25rem; } }
   .studio-agent-voice-failed { display: none; margin: 0; padding: 0 .5rem; font-size: .8125rem; color: var(--color-text-secondary, inherit); }
   [data-studio-controller-failed~="agent-chat-voice"] > .studio-agent-voice-failed { display: block; }
   /* One row where both fit; on a phone the chip takes the first line and the
@@ -24,18 +27,30 @@
   .studio-agent-voice-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
   .studio-agent-voice-row .studio-mic { display: contents; }
   .studio-agent-voice-row .studio-mic-chip { flex: 1 1 14rem; min-width: 0; }
-  .studio-agent-voice-row .studio-mic-panel { flex: 1 0 100%; max-width: none; order: 3; }
+  .studio-agent-voice-row .studio-mic-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  /* The composer sticks to the window's bottom, so what doesn't fit is cut off at the
+     top, the chip with it. The picker scrolls inside what the rest leaves it: 20rem is
+     the composer's 15rem at 390px, the privacy line under it, and a margin. */
+  .studio-agent-voice-row .studio-mic-panel { flex: 1 0 100%; max-width: none; order: 3; align-content: start; overflow-y: auto; overscroll-behavior: contain;
+    max-height: max(6rem, calc(100vh - 20rem)); max-height: max(6rem, calc(100dvh - 20rem)); }
   .studio-agent-voice-row .studio-mic-failed { flex: 1 0 100%; order: 4; }
-  .studio-agent-voice-row .studio-recorder { flex: 1 1 10rem; min-width: 0; flex-flow: row wrap; justify-content: flex-end; gap: .5rem; }
+  /* 14rem: the label and, either side of it, the timer's room. Narrower, the two overlap. */
+  .studio-agent-voice-row .studio-recorder { flex: 1 1 14rem; min-width: 0; flex-flow: row wrap; justify-content: flex-end; gap: .5rem; }
   .studio-agent-voice-row .studio-recorder-button { flex: 1 1 10rem; min-width: 0; padding: .625rem 1rem; }
   .studio-agent-voice-row .studio-recorder-timer { display: none; }
-  .studio-agent-voice-row [data-voice-recorder-state="recording"] .studio-recorder-timer { display: inline; }
+  /* On the button, not beside it: beside it, it took 40px off a held button. */
+  .studio-agent-voice-row .studio-recorder { position: relative; }
+  .studio-agent-voice-row [data-voice-recorder-state="recording"] .studio-recorder-timer { display: inline; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);
+    pointer-events: none; color: var(--btn-primary-fg, #fff); }
   .studio-agent-voice-row .studio-recorder-status { flex: 1 0 100%; min-height: 0; max-width: none; font-size: .875rem; }
-  /* The chat's status line speaks for these three; a second live line would say
-     them twice, and its coming and going would move a held button. */
+  /* The chat's status line speaks for these; a second live line would say them
+     twice, and its coming and going would move a held button. */
   .studio-agent-voice-row .studio-recorder-status:empty,
   .studio-agent-voice-row [data-voice-recorder-state="recording"] .studio-recorder-status,
-  .studio-agent-voice-row [data-voice-recorder-state="silent"] .studio-recorder-status { display: none; }
+  .studio-agent-voice-row [data-voice-recorder-state="silent"] .studio-recorder-status,
+  .studio-agent-voice-row [data-voice-recorder-state="failed"] .studio-recorder-status,
+  .studio-agent-voice-row [data-voice-recorder-state="denied"] .studio-recorder-status,
+  .studio-agent-voice-row [data-voice-recorder-state="tapped"] .studio-recorder-status { display: none; }
   .studio-agent-voice-row .studio-recorder-failed { flex: 1 0 100%; }
 </style>
 <div class="studio-agent-voice" role="group" aria-label="Talk to <%= name %>"

data/app/views/studio/loader/_overlay.html.erb

@@ -1,14 +1,14 @@
-<%# locals: (label:, delay:, max_wait:, size:, options: {}) %>
+<%# locals: (label:, delay:, min_show:, max_wait:, size:, options: {}) %>
 <%#
   The page-load overlay (Studio::LoaderHelper#studio_loader_overlay). Rendered
   hidden, once per page; studio/loader shows it when a visit the user started
-  or a form marked data-studio-loader-overlay outlasts data-delay ms, clears it
-  after data-max-wait ms at most, and window.StudioLoader.show(caption) /
+  or a form marked data-studio-loader-overlay outlasts data-delay ms, keeps it
+  data-min-show ms once shown, clears it after data-max-wait ms at most, and window.StudioLoader.show(caption) /
   hide() drive it for any other long wait. The caption line is empty until a
   caller names one. It never marks itself aria-busy: that would mute the
   "Loading" status inside it.
 %>
-<%= tag.div(class: "studio-loader-overlay", hidden: true, data: { studio_loader_overlay: "", delay: delay, max_wait: max_wait }) do %>
+<%= tag.div(class: "studio-loader-overlay", hidden: true, data: { studio_loader_overlay: "", delay: delay, min_show: min_show, max_wait: max_wait }) do %>
   <div class="studio-loader-overlay-panel">
     <%= studio_loader(size: size, label: label, **options) %>
     <p class="studio-loader-caption" data-studio-loader-caption></p>

data/app/views/style/_components.html.erb

@@ -7,7 +7,7 @@
     to a 404. -%>
 <section id="components" class="space-y-6" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
   <div class="space-y-1">
-    <h2 class="text-2xl font-bold text-heading">Components</h2>
+    <h2 class="type-h3 text-heading">Components</h2>
     <p class="text-muted text-sm max-w-2xl">
       The engine's ViewComponent classes, one preview per state, in the component gallery.
     </p>