studio-engine 0.130.0 → 0.131.0

data/app/javascript/studio/controllers/talk_to_agent_controller.js

@@ -0,0 +1,20 @@
+// talk-to-agent: the talk-to-agent modal (studio/agent_chat/_talk_modal), on the
+// engine's Stimulus application (studio/stimulus registers it lazily, the first
+// time a page renders the modal). It sits on the partial's wrapper:
+//
+//   <div data-studio-controller="talk-to-agent" data-talk-to-agent-soul="alex" ...>
+//
+// The click handling and the panel fill are studio/talk_to_agent.
+import { Controller } from "@hotwired/stimulus"
+import { mountTalkToAgent } from "studio/talk_to_agent"
+
+export default class extends Controller {
+  connect() {
+    this.talk = mountTalkToAgent(this.element)
+  }
+
+  disconnect() {
+    if (this.talk) this.talk.destroy()
+    this.talk = null
+  }
+}

data/app/javascript/studio/infinite_scroll.js

@@ -0,0 +1,142 @@
+// studio/infinite_scroll: the next page loads as its end comes near
+// (docs/LOADER.md, "Infinite scroll"). The markup is studio_infinite_scroll:
+//
+//   <div class="studio-infinite-scroll" data-studio-controller="infinite-scroll">
+//     ...page 1's items...
+//     <turbo-frame id="posts-page-2" data-infinite-scroll-next>
+//       <a href="/posts?page=2" data-infinite-scroll-more>Load more</a>
+//     </turbo-frame>
+//     <p role="status" aria-live="polite" data-infinite-scroll-status></p>
+//   </div>
+//
+// THE BUTTON IS THE PRIMITIVE. "Load more" is an ordinary link inside the next
+// page's frame, so a click loads that frame with Turbo, and with no script at all
+// it opens the next page. This module only clicks it early: when the frame comes
+// within NEAR_PX of the viewport (IntersectionObserver, watching the button's
+// row, since the frame itself takes no box), it points the frame at
+// the link's URL. The button stays in view the whole time, for a keyboard, a
+// screen reader or a browser with no observer.
+//
+//   announce   once a page lands, the status line says how many items came
+//              ("12 more loaded"), and that the list is done when no next frame
+//              came with them. It is polite: it waits for the reader to pause.
+//   focus      a page the reader asked for with the keyboard moves focus to
+//              its first new item, since the button they pressed is gone.
+//
+// It imports nothing; test/javascript/infinite_scroll.test.mjs loads it as a
+// data: module.
+
+export const NEAR_PX = 600
+export const NEXT = "turbo-frame[data-infinite-scroll-next]"
+export const MORE = "[data-infinite-scroll-more]"
+export const STATUS = "[data-infinite-scroll-status]"
+export const DEFAULT_ANNOUNCE = "%{count} more loaded"
+
+// The status line for a page of `count` items. `done` adds the end label.
+export function announcement(template, count, done, endLabel) {
+  const said = String(template || DEFAULT_ANNOUNCE).replace("%{count}", String(count))
+  return done && endLabel ? `${said}. ${endLabel}` : said
+}
+
+// The items a landed frame brought: its element children, less the next frame
+// and the end line, which are the list's machinery rather than its content.
+export function newItems(frame) {
+  return Array.from(frame.children || []).filter((el) =>
+    !(el.matches && (el.matches(NEXT) || el.matches(".studio-infinite-scroll-end") || el.matches(".studio-infinite-scroll-more"))))
+}
+
+// The one frame still waiting for its page: not loaded, not loading.
+export function waitingFrame(root) {
+  const frames = Array.from(root.querySelectorAll(NEXT))
+  return frames.find((frame) => !frame.hasAttribute("src") && !frame.hasAttribute("complete")) || null
+}
+
+// What the observer watches for a frame: its button row, else its link.
+export function sentinelOf(frame) {
+  return frame.querySelector(".studio-infinite-scroll-more") || frame.querySelector(MORE)
+}
+
+// Points the frame at its link's URL, once. Answers whether it started a load.
+export function loadNext(frame) {
+  if (!frame || frame.hasAttribute("src")) return false
+  const link = frame.querySelector(MORE)
+  const url = link && link.getAttribute("href")
+  if (!url) return false
+  frame.setAttribute("src", url)
+  return true
+}
+
+function say(status, text, win) {
+  if (!status) return
+  // Emptied first, so the same words said twice are heard twice.
+  status.textContent = ""
+  const put = () => { status.textContent = text }
+  if (win && typeof win.requestAnimationFrame === "function") win.requestAnimationFrame(put)
+  else put()
+}
+
+// Wires one list. Answers a stop function for the controller's disconnect.
+export function watchInfiniteScroll(root, win) {
+  win = win || window
+  let watcher = null
+  let watched = null
+  let byKeyboard = false
+
+  // The frame takes no box (display: contents), and an observer sees only
+  // boxes, so the watch is on its sentinel: the button's row inside it.
+  function arm() {
+    const frame = waitingFrame(root)
+    const sentinel = frame && sentinelOf(frame)
+    if (sentinel === watched) return
+    if (watcher && watched) watcher.unobserve(watched)
+    watched = sentinel
+    if (!sentinel || !watcher) return
+    watcher.observe(sentinel)
+  }
+
+  if (typeof win.IntersectionObserver === "function") {
+    watcher = new win.IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return
+        watcher.unobserve(entry.target)
+        const frame = entry.target.closest(NEXT)
+        // A Tab onto "Load more" scrolls it into view, so the observer loads the
+        // page before any click: focus inside the frame is that keyboard user.
+        const active = win.document && win.document.activeElement
+        byKeyboard = !!(frame && active && frame.contains(active))
+        loadNext(frame)
+      })
+    }, { rootMargin: `0px 0px ${NEAR_PX}px 0px` })
+  }
+
+  // A click on the button with no pointer behind it is a keyboard press.
+  function onClick(event) {
+    const link = event.target && event.target.closest && event.target.closest(MORE)
+    if (link && root.contains(link)) byKeyboard = event.detail === 0
+  }
+
+  function onLoad(event) {
+    const frame = event.target
+    if (!frame || !frame.matches || !frame.matches(NEXT) || !root.contains(frame)) return
+    const items = newItems(frame)
+    const done = !frame.querySelector(NEXT)
+    say(root.querySelector(STATUS), announcement(root.getAttribute("data-infinite-scroll-announce"), items.length, done,
+      root.getAttribute("data-infinite-scroll-end")), win)
+    if (byKeyboard && items[0]) {
+      if (!items[0].hasAttribute("tabindex")) items[0].setAttribute("tabindex", "-1")
+      items[0].focus({ preventScroll: false })
+    }
+    byKeyboard = false
+    arm()
+  }
+
+  root.addEventListener("click", onClick, true)
+  root.addEventListener("turbo:frame-load", onLoad)
+  arm()
+
+  return function stop() {
+    root.removeEventListener("click", onClick, true)
+    root.removeEventListener("turbo:frame-load", onLoad)
+    if (watcher) watcher.disconnect()
+  }
+}

data/app/javascript/studio/loader.js

@@ -270,8 +270,13 @@ export function setPercent(el, value) {
   if (!el) return
   var loader = el.classList && el.classList.contains('studio-loader') ? el : el.querySelector('.studio-loader')
   if (!loader) return
+  var percent = clampPercent(value)
   loader.setAttribute('data-loader-percent', '')
-  loader.style.setProperty('--studio-loader-percent', String(clampPercent(value)))
+  loader.style.setProperty('--studio-loader-percent', String(percent))
+  // A bar is a progressbar: a percent makes it determinate and is its value.
+  if (loader.getAttribute && loader.getAttribute('role') === 'progressbar') loader.setAttribute('aria-valuenow', String(percent))
+  var sweep = loader.querySelector && loader.querySelector('.progress-meter--indeterminate')
+  if (sweep) sweep.classList.remove('progress-meter--indeterminate')
 }
 
 // A submitter that carries a pending loader.

data/app/javascript/studio/page_transitions.js

@@ -20,6 +20,11 @@ export const STYLES = Object.freeze({
   slide: Object.freeze({ left: "slide-left", right: "slide-right", top: "slide-top", bottom: "slide-bottom" }),
   unfold: Object.freeze({ left: "unfold-right", right: "unfold-left", top: "unfold-bottom", bottom: "unfold-top" }),
 })
+// A Back plays the app's move the other way: the reverse direction, in the same style. So a
+// slide-left goes back as a slide-right, and an unfold-right as an unfold-left.
+export const REVERSE = Object.freeze({ left: "right", right: "left", top: "bottom", bottom: "top" })
+// A link that leads back up the trail: an ancestor in the crumbs, or the phone's parent link.
+export const BACK_LINK = "a[data-page-transition-back]"
 // Mirrors the default in lib/studio.rb, for a page with no style meta.
 export const DEFAULT_STYLE = "slide"
 
@@ -32,17 +37,48 @@ export const FULL_LOAD_STYLE_KEY = "studio-page-transition-style"
 const MAX_READY_IMAGES = 12
 const REDUCED_MOTION = "(prefers-reduced-motion: reduce)"
 
-export function styleFor(direction, style) {
+export function styleFor(direction, style, back = false) {
   const moves = STYLES[Object.hasOwn(STYLES, style) ? style : DEFAULT_STYLE]
-  return Object.hasOwn(moves, direction) ? moves[direction] : null
+  if (!Object.hasOwn(moves, direction)) return null
+  return moves[back ? REVERSE[direction] : direction]
+}
+
+// Whether a visit goes back. Turbo marks <html> with data-turbo-visit-direction for each visit,
+// before turbo:visit fires: "back" for a restore to an earlier history entry, and "forward"
+// for a restore to a later one. So the browser's Forward keeps the app's direction. An advance
+// goes back only when the reader clicked a back link to that same address.
+export function visitIsBack({ action, turboDirection, url, backHref }) {
+  if (action === "restore") return turboDirection === "back"
+  return sameAddress(url, backHref)
+}
+
+// Whether a full load goes back: a traverse to an earlier history entry, or a back link.
+export function fullLoadIsBack(activation, backHref) {
+  if (!activation || !activation.entry) return false
+  if (activation.navigationType === "traverse") {
+    const from = activation.from
+    return !!from && typeof from.index === "number" && from.index >= 0 && activation.entry.index < from.index
+  }
+  return sameAddress(activation.entry.url, backHref)
+}
+
+export function sameAddress(a, b) {
+  if (!a || !b) return false
+  try {
+    const one = new URL(a, "https://x.invalid")
+    const two = new URL(b, "https://x.invalid")
+    return one.origin === two.origin && one.pathname === two.pathname && one.search === two.search
+  } catch {
+    return false
+  }
 }
 
 // The style for one visit, STILL, or null to leave the swap alone (the engine's fade plays,
 // and a morph between two pages stands). An advance visit to the same path can bring a new
 // page, as a launch panel does when it gives way to the chat at its own address, so a name
 // the two share still morphs. A refresh replaces, and stays silent.
-export function planVisit({ direction, style, from, to, transitions, sharedName, advance }) {
-  const move = styleFor(direction, style)
+export function planVisit({ direction, style, from, to, transitions, sharedName, advance, back }) {
+  const move = styleFor(direction, style, back)
   if (!transitions || !from || !to || !move) return null
   if (from === to) return advance && sharedName ? null : STILL
   return sharedName ? null : move
@@ -51,11 +87,11 @@ export function planVisit({ direction, style, from, to, transitions, sharedName,
 // The style a full load should play, or null for a plain load: planVisit's own rule, so the
 // two paths cannot differ. No morph, since the old page cannot read the new page's names
 // before its picture, and a browser with no activation entry has nothing to compare.
-export function planFullLoad({ direction, style, from, activation }) {
+export function planFullLoad({ direction, style, from, activation, back = false }) {
   const url = activation && activation.entry && activation.entry.url
   if (!url) return null
   const to = new URL(url).pathname
-  const move = planVisit({ direction, style, from, to, transitions: true, sharedName: false })
+  const move = planVisit({ direction, style, from, to, transitions: true, sharedName: false, back })
   return move === STILL ? null : move
 }
 
@@ -150,6 +186,11 @@ export function installPageTransitions(doc) {
   let target = null
   let advance = false
   let rendered = false
+  // The address of the back link the reader clicked last, if any. Matched by address, so a
+  // click that never became a visit (a modifier click, a cancelled visit) cannot turn the
+  // next visit around.
+  let backHref = null
+  let back = false
 
   const nameTheMorph = (shared) => {
     if (shared) root.dataset.pageTransitionMorph = ""
@@ -161,6 +202,12 @@ export function installPageTransitions(doc) {
   markHeld(doc)
   known.set(from, morphNames(doc))
 
+  // In capture, ahead of Turbo's own click listener, so the mark is down before the visit.
+  doc.addEventListener("click", (event) => {
+    const link = event.target && event.target.closest ? event.target.closest("a[href]") : null
+    backHref = link && link.matches(BACK_LINK) ? link.href : null
+  }, { capture: true })
+
   doc.addEventListener("turbo:visit", (event) => {
     root.dataset.pageTransitionVisit = ""
     // Turbo opens its view transition before it reads turbo-visit-control. A response it will
@@ -171,7 +218,12 @@ export function installPageTransitions(doc) {
     // A GET that redirects: Turbo renders the response, then replaces to the final address
     // with that same response, all before turbo:load. The page has landed, so nothing moves.
     const action = event.detail.action
-    if (rendered && action === "replace") from = target
+    const redirected = rendered && action === "replace"
+    if (redirected) from = target
+    // No guard keeps the first half's way: Turbo's replace (willRender: false) still fires
+    // turbo:before-render, but `from` is now `target`, so planVisit plays STILL either way.
+    back = visitIsBack({ action, turboDirection: root.dataset.turboVisitDirection, url: event.detail.url, backHref })
+    backHref = null
     rendered = false
     advance = action === "advance"
     predict(known.get(target))
@@ -207,6 +259,7 @@ export function installPageTransitions(doc) {
       transitions: !!doc.startViewTransition && !win.matchMedia(REDUCED_MOTION).matches,
       sharedName,
       advance,
+      back,
     })
     nameTheMorph(sharedName && style !== STILL)
     if (style) root.dataset.pageTransition = style
@@ -226,6 +279,7 @@ export function installPageTransitions(doc) {
     target = null
     advance = false
     rendered = false
+    back = false
     known.set(from, morphNames(doc))
     if (!visited) return
     delete root.dataset.pageTransition
@@ -244,7 +298,10 @@ export function installPageTransitions(doc) {
   // The last moment on the old document. The browser takes its picture after this.
   win.addEventListener("pageswap", (event) => {
     const transition = event.viewTransition
-    const style = transition && planFullLoad({ direction: readDirection(doc), style: readStyle(doc), from, activation: event.activation })
+    const activation = event.activation
+    const style = transition && planFullLoad({
+      direction: readDirection(doc), style: readStyle(doc), from, activation, back: fullLoadIsBack(activation, backHref),
+    })
     const left = leaveStyle(win, style)
     if (!transition) return
     if (!left) {

data/app/javascript/studio/pull_to_refresh.js

@@ -0,0 +1,147 @@
+// studio/pull_to_refresh: pull the page down from its top to reload it
+// (docs/LOADER.md, "Pull to refresh"). Phone widths and touch only: the
+// controller arms itself where PHONE_QUERY matches and does nothing anywhere
+// else, so a desktop, a mouse or a keyboard never meets it. The markup is
+// studio_pull_to_refresh:
+//
+//   <div class="studio-pull-refresh" data-studio-controller="pull-to-refresh"
+//        data-pull-to-refresh-frame="feed">            (optional: reload one frame)
+//     <span class="studio-pull-refresh-indicator" hidden>...</span>
+//     <p class="sr-only" role="status" data-pull-to-refresh-status></p>
+//     ...the page...
+//   </div>
+//
+//   the pull     a touch that starts with the page at its top and moves down
+//                drags the indicator; --studio-pull is the distance over
+//                THRESHOLD_PX, eased so it resists the finger.
+//   the release  past the threshold it refreshes: the named frame's reload(),
+//                else a Turbo visit to this URL with action "replace" (which the
+//                page-load overlay never shows for). Short of it, it settles back.
+//   the end      turbo:frame-load or turbo:load clears the indicator; so does
+//                MAX_SPIN_MS, so a refresh that fails never leaves it spinning.
+//
+// The browser's own pull (Chrome on Android reloads on overscroll) is turned
+// off with overscroll-behavior-y while the controller is armed, so one pull
+// never refreshes twice.
+//
+// It imports nothing; test/javascript/pull_to_refresh.test.mjs loads it as a
+// data: module.
+
+export const PHONE_QUERY = "(pointer: coarse) and (max-width: 640px)"
+export const THRESHOLD_PX = 72
+export const MAX_SPIN_MS = 10000
+
+// How far a finger `dy` pixels down has pulled, 0..1.2 of the threshold. The
+// first half follows the finger; past it the pull resists.
+export function pullProgress(dy) {
+  if (!(dy > 0)) return 0
+  const raw = dy / THRESHOLD_PX
+  const eased = raw <= 0.5 ? raw : 0.5 + (raw - 0.5) * 0.55
+  return Math.min(1.2, Math.round(eased * 1000) / 1000)
+}
+
+// A release refreshes once the eased pull reaches the threshold.
+export function shouldRefresh(progress) {
+  return progress >= 1
+}
+
+export function phoneTouch(win) {
+  return !!(win && typeof win.matchMedia === "function" && win.matchMedia(PHONE_QUERY).matches)
+}
+
+// Whether a touch on `target` began inside a scroller below `root` that is not
+// at its top: that drag scrolls the scroller back up, so it is not a pull.
+export function insideScroller(target, root) {
+  for (let el = target; el && el !== root; el = el.parentElement) if (el.scrollTop > 0) return true
+  return false
+}
+
+// Wires one container. Answers a stop function, or null where it does not arm.
+export function watchPullToRefresh(root, win, doc) {
+  win = win || window
+  doc = doc || document
+  if (!phoneTouch(win)) return null
+
+  const indicator = root.querySelector(".studio-pull-refresh-indicator")
+  const status = root.querySelector("[data-pull-to-refresh-status]")
+  const label = root.getAttribute("data-pull-to-refresh-label") || "Refreshing"
+  const html = doc.documentElement
+  const previousOverscroll = html.style.overscrollBehaviorY
+  html.style.overscrollBehaviorY = "contain"
+
+  let startY = null
+  let progress = 0
+  let spinTimer = null
+
+  function setPull(value) {
+    progress = value
+    if (indicator) {
+      indicator.hidden = value === 0 && root.getAttribute("data-pull-state") !== "refreshing"
+      indicator.style.setProperty("--studio-pull", String(Math.min(1, value)))
+    }
+  }
+
+  function finish(event) {
+    const frameId = root.getAttribute("data-pull-to-refresh-frame")
+    if (event && event.type === "turbo:frame-load" && (!frameId || event.target.id !== frameId)) return
+    if (root.getAttribute("data-pull-state") !== "refreshing") return
+    clearTimeout(spinTimer)
+    root.setAttribute("data-pull-state", "settling")
+    if (status) status.textContent = ""
+    setPull(0)
+  }
+
+  function refresh() {
+    root.setAttribute("data-pull-state", "refreshing")
+    if (indicator) indicator.hidden = false
+    if (status) status.textContent = label
+    spinTimer = setTimeout(finish, MAX_SPIN_MS)
+    const frameId = root.getAttribute("data-pull-to-refresh-frame")
+    const frame = frameId && doc.getElementById(frameId)
+    if (frame && typeof frame.reload === "function") frame.reload()
+    else if (win.Turbo && typeof win.Turbo.visit === "function") win.Turbo.visit(win.location.href, { action: "replace" })
+    else win.location.reload()
+  }
+
+  function onStart(event) {
+    if (root.getAttribute("data-pull-state") === "refreshing") return
+    if (event.touches.length !== 1 || (win.scrollY || 0) > 0 || insideScroller(event.target, root)) { startY = null; return }
+    startY = event.touches[0].clientY
+    root.setAttribute("data-pull-state", "pulling")
+  }
+
+  function onMove(event) {
+    if (startY === null) return
+    const dy = event.touches[0].clientY - startY
+    if (dy <= 0 || (win.scrollY || 0) > 0) { setPull(0); return }
+    // Holding the page still while the indicator follows the finger.
+    if (event.cancelable) event.preventDefault()
+    setPull(pullProgress(dy))
+  }
+
+  function onEnd() {
+    if (startY === null) return
+    startY = null
+    if (shouldRefresh(progress)) { refresh(); return }
+    root.setAttribute("data-pull-state", "settling")
+    setPull(0)
+  }
+
+  root.addEventListener("touchstart", onStart, { passive: true })
+  root.addEventListener("touchmove", onMove, { passive: false })
+  root.addEventListener("touchend", onEnd)
+  root.addEventListener("touchcancel", onEnd)
+  doc.addEventListener("turbo:frame-load", finish)
+  doc.addEventListener("turbo:load", finish)
+
+  return function stop() {
+    clearTimeout(spinTimer)
+    html.style.overscrollBehaviorY = previousOverscroll
+    root.removeEventListener("touchstart", onStart)
+    root.removeEventListener("touchmove", onMove)
+    root.removeEventListener("touchend", onEnd)
+    root.removeEventListener("touchcancel", onEnd)
+    doc.removeEventListener("turbo:frame-load", finish)
+    doc.removeEventListener("turbo:load", finish)
+  }
+}

data/app/javascript/studio/stimulus.js

@@ -65,9 +65,16 @@ export const schema = {
 // says recording did not load (data-studio-controller-failed="voice-recorder").
 // So is the chat's mic: a mic whose controller failed says voice did not load,
 // and the box still types (data-studio-controller-failed="agent-chat-voice").
+// So is the talk-to-agent modal: its links are real links, and with its
+// controller failed each one opens its href (data-studio-controller-failed="talk-to-agent").
 // So is copy-text: a colour whose controller failed still shows its hex to select.
 // So is the page header: its tabs are links, and a row whose controller failed
 // keeps its bar at all times (data-studio-controller-failed="page-header").
+// So is the carousel: its track is a native scroll row, and one whose controller
+// failed keeps a scrollbar and hides the arrows and dots it cannot drive.
+// So is infinite scroll: a list whose controller failed keeps its "Load more"
+// link, which loads the next page by itself. So is pull to refresh: nothing
+// depends on it, and the browser's own reload still works.
 export const LAZY = {
   "board": () => import("studio/controllers/board_controller"),
   "geo-settings": () => import("studio/controllers/geo_settings_controller"),
@@ -79,11 +86,15 @@ export const LAZY = {
   "knowledge-transcript": () => import("studio/controllers/knowledge_transcript_controller"),
   "agent-chat": () => import("studio/controllers/agent_chat_controller"),
   "agent-chat-voice": () => import("studio/controllers/agent_chat_voice_controller"),
+  "talk-to-agent": () => import("studio/controllers/talk_to_agent_controller"),
   "voice-profile": () => import("studio/controllers/voice_profile_controller"),
   "microphone-chip": () => import("studio/controllers/microphone_chip_controller"),
   "voice-recorder": () => import("studio/controllers/voice_recorder_controller"),
   "copy-text": () => import("studio/controllers/copy_text_controller"),
-  "page-header": () => import("studio/controllers/page_header_controller")
+  "page-header": () => import("studio/controllers/page_header_controller"),
+  "carousel": () => import("studio/controllers/carousel_controller"),
+  "infinite-scroll": () => import("studio/controllers/infinite_scroll_controller"),
+  "pull-to-refresh": () => import("studio/controllers/pull_to_refresh_controller")
 }
 
 export const application = Application.start(document.documentElement, schema)

data/app/javascript/studio/talk_to_agent.js

@@ -0,0 +1,116 @@
+// studio/talk_to_agent: the talk-to-agent modal (studio/agent_chat/_talk_modal;
+// docs/AGENT_CHAT.md, "Talk to an agent in a modal"). It wraps the shared agent
+// chat, studio/agent_chat, in the page-scoped modal host; it is not a second
+// chat.
+//
+//   LINKS    any element carrying data-studio-talk-to-agent opens the modal:
+//
+//              <a href="/chat" data-studio-talk-to-agent data-talk-soul="alex"
+//                 data-talk-topic="Pro" data-talk-opener="Tell me about Pro.">
+//
+//            The click is taken only when the soul is this modal's, no modifier
+//            key is held and the host's Alpine store is there. Otherwise the
+//            link does what its href says, so a page whose modal failed to load
+//            still reaches the chat.
+//   OPEN     the store opens TALK_MODAL_ID; the panel the host clones in asks
+//            for its chat (PANEL_EVENT), and this module fills it with a fresh
+//            copy of the chat from the partial's <template>, marked with the
+//            link's opener (data-agent-chat-opener, keyed by soul and topic)
+//            and the type-in. studio/agent_chat then loads the thread and sends
+//            the opener, so the agent is answering while the card animates in.
+//   CLOSE    the host drops the panel; the chat's controller disconnects and
+//            stops polling. The thread stays on the hub: the next open shows it.
+//
+// It imports nothing, so test/javascript/talk_to_agent.test.mjs loads it as a
+// data: module; studio/controllers/talk_to_agent_controller mounts it.
+
+export const TALK_SELECTOR = "[data-studio-talk-to-agent]"
+export const TALK_MODAL_ID = "talk-to-agent"
+export const PANEL_EVENT = "studio:talk-to-agent:panel"
+export const TOPIC_MAX = 80
+export const OPENER_MAX = 500
+
+function clean(value, max) {
+  return String(value ?? "").replace(/\s+/g, " ").trim().slice(0, max)
+}
+
+// What a link asks for: {soul, topic, opener}. The opener defaults to a plain
+// line naming the topic; with no topic and no opener there is nothing to send.
+export function talkFrom(link) {
+  const data = (link && link.dataset) || {}
+  const topic = clean(data.talkTopic, TOPIC_MAX)
+  const opener = clean(data.talkOpener, OPENER_MAX) || (topic ? `I'd like to talk about ${topic}.` : "")
+  return { soul: clean(data.talkSoul, 64), topic, opener }
+}
+
+// The key an opener is sent once under (per tab): the soul and the topic.
+export function openerKey(soul, topic) {
+  return `${soul}:${topic || "general"}`
+}
+
+// Whether this click is the modal's to take: a plain primary click.
+export function plainClick(event) {
+  if (!event) return false
+  if (event.defaultPrevented) return false
+  if (event.button != null && event.button !== 0) return false
+  return !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+}
+
+// The dialog's accessible name and the header's words.
+export function dialogTitle(name, topic) {
+  return topic ? `Talk to ${name} about ${topic}` : `Talk to ${name}`
+}
+
+export function mountTalkToAgent(root, {
+  doc = globalThis.document,
+  store = (name) => (globalThis.Alpine && typeof globalThis.Alpine.store === "function" ? globalThis.Alpine.store(name) : null)
+} = {}) {
+  const soul = root.dataset.talkToAgentSoul
+  const name = root.dataset.talkToAgentName || "the agent"
+  const storeName = root.dataset.talkToAgentStore
+  let current = null
+
+  function onClick(event) {
+    const link = event.target && event.target.closest ? event.target.closest(TALK_SELECTOR) : null
+    if (!link || !plainClick(event)) return
+    const asked = talkFrom(link)
+    if (asked.soul !== soul) return
+    const modals = store(storeName)
+    if (!modals || typeof modals.open !== "function") return
+    event.preventDefault()
+    current = asked
+    modals.open(TALK_MODAL_ID, { title: dialogTitle(name, asked.topic), topic: asked.topic })
+  }
+
+  // The host cloned the panel in: give it a fresh chat for the link that opened it.
+  function onPanel(event) {
+    const panel = event.target
+    const template = root.querySelector("template[data-talk-to-agent-chat]")
+    const slot = panel && panel.querySelector ? panel.querySelector("[data-talk-to-agent-slot]") : null
+    if (!template || !slot || !template.content || !template.content.firstElementChild) return
+    const asked = current || { topic: "", opener: "" }
+    const heading = panel.querySelector("[data-talk-to-agent-title]")
+    if (heading) heading.textContent = dialogTitle(name, asked.topic)
+    const chat = template.content.firstElementChild.cloneNode(true)
+    if (asked.opener) {
+      chat.dataset.agentChatOpener = asked.opener
+      chat.dataset.agentChatOpenerKey = openerKey(soul, asked.topic)
+    }
+    chat.dataset.agentChatReveal = "true"
+    slot.replaceChildren(chat)
+  }
+
+  doc && doc.addEventListener && doc.addEventListener("click", onClick)
+  root.addEventListener(PANEL_EVENT, onPanel)
+  root.dataset.talkToAgentReady = "true"
+
+  return {
+    open(link) { onClick({ target: link, button: 0, preventDefault() {} }) },
+    get current() { return current },
+    destroy() {
+      doc && doc.removeEventListener && doc.removeEventListener("click", onClick)
+      root.removeEventListener(PANEL_EVENT, onPanel)
+      delete root.dataset.talkToAgentReady
+    }
+  }
+}

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

@@ -86,7 +86,7 @@
         line at rest, its description on hover or focus. %>
     <% if geo_live %>
       <%= 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",
+            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-ink 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 %>
@@ -104,7 +104,7 @@
           omission: the row's whole job in this state is to hand over the string, and
           select-none made it unselectable. role/aria-disabled give a screen reader
           the "unavailable destination" this paints for a sighted eye. %>
-      <span class="flex items-center gap-3 px-4 py-3 text-sm text-muted cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset"
+      <span class="flex items-center gap-3 px-4 py-3 text-sm text-muted cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ink focus-visible:ring-inset"
             role="link"
             aria-disabled="true"
             tabindex="0"

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

@@ -79,7 +79,7 @@
         <% 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",
+              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-ink focus-visible:ring-inset transition",
               target: target,
               rel: target == "_blank" ? "noopener" : nil,
               "data-sidebar-row-described": (link[:desc].present? ? "" : nil),
@@ -158,7 +158,7 @@
   <% if logged_in? %>
     <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",
+            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-ink transition",
             "@click": close_action do %>
         <% 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 %>