unmagic-components 0.3.0 → 0.4.0

data/app/assets/icons/lucide/LICENSE

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/app/assets/icons/lucide/arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>

data/app/assets/icons/lucide/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>

data/app/assets/icons/lucide/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>

data/app/assets/icons/lucide/ban.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M4.929 4.929 19.07 19.071"/></svg>

data/app/assets/icons/lucide/brain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 18V5"/><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path d="M18 18a4 4 0 0 0 2-7.464"/><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path d="M6 18a4 4 0 0 1-2-7.464"/><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/></svg>

data/app/assets/icons/lucide/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>

data/app/assets/icons/lucide/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>

data/app/assets/icons/lucide/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>

data/app/assets/icons/lucide/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>

data/app/assets/icons/lucide/circle-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

data/app/assets/icons/lucide/circle-dashed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.1 2.182a10 10 0 0 1 3.8 0"/><path d="M13.9 21.818a10 10 0 0 1-3.8 0"/><path d="M17.609 3.721a10 10 0 0 1 2.69 2.7"/><path d="M2.182 13.9a10 10 0 0 1 0-3.8"/><path d="M20.279 17.609a10 10 0 0 1-2.7 2.69"/><path d="M21.818 10.1a10 10 0 0 1 0 3.8"/><path d="M3.721 6.391a10 10 0 0 1 2.7-2.69"/><path d="M6.391 20.279a10 10 0 0 1-2.69-2.7"/></svg>

data/app/assets/icons/lucide/circle-question-mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>

data/app/assets/icons/lucide/circle-stop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>

data/app/assets/icons/lucide/circle-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>

data/app/assets/icons/lucide/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>

data/app/assets/icons/lucide/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

data/app/assets/icons/lucide/ellipsis-vertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>

data/app/assets/icons/lucide/file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></svg>

data/app/assets/icons/lucide/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>

data/app/assets/icons/lucide/grip-vertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>

data/app/assets/icons/lucide/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

data/app/assets/icons/lucide/lightbulb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>

data/app/assets/icons/lucide/list-checks.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/></svg>

data/app/assets/icons/lucide/loader-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

data/app/assets/icons/lucide/messages-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"/></svg>

data/app/assets/icons/lucide/paperclip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"/></svg>

data/app/assets/icons/lucide/pencil.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>

data/app/assets/icons/lucide/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

data/app/assets/icons/lucide/rotate-cw.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>

data/app/assets/icons/lucide/shield-alert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>

data/app/assets/icons/lucide/timer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/></svg>

data/app/assets/icons/lucide/triangle-alert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>

data/app/assets/icons/lucide/wrench.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/></svg>

data/app/assets/icons/lucide/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

data/app/assets/javascripts/unmagic/components/ai_chat.js

@@ -0,0 +1,142 @@
+// The AI chat components' behaviour on plain elements, wired once by delegation
+// from the document so a composer, a suggestion or a question streamed in later
+// needs no setup.
+//
+// The composer (`ai_chat_composer`):
+//   - Enter sends and Shift+Enter makes a new line, but only while the form's Send
+//     button is on the page. While a turn runs it is Stop, so Enter does nothing
+//     rather than failing quietly. Composing text (an IME) is left alone.
+//   - After a successful submit the form is reset rather than the field blanked,
+//     so <unmagic-uuid-input> mints the next id and autogrow re-measures. A failed
+//     request leaves what was typed where it was.
+//
+// Suggestions (`ai_chat_welcome`): pressing one fills the composer and sends it,
+// unless it is marked to fill only, or a turn is running.
+//
+// Questions and permission requests (`ai_chat_request`, `ai_chat_permission`)
+// streamed in with role="alert" take focus when nothing else has it — the first
+// option of a question, the card itself for a permission, never its Allow button.
+// Someone typing in the composer keeps their focus.
+//
+// Branch pickers (`ai_chat_branch_picker`): moving to another version replaces the
+// turn, so focus goes back to the same step in the replacement, and a reader can
+// keep stepping without finding the control again.
+
+const INSTALLED = Symbol.for("unmagic.components.ai_chat")
+
+if (!document[INSTALLED]) {
+  document[INSTALLED] = true
+
+  document.addEventListener("keydown", (event) => {
+    const field = event.target
+    if (!(field instanceof HTMLTextAreaElement) || !field.hasAttribute("data-ai-chat-composer-field")) return
+    if (event.key !== "Enter" || event.shiftKey || event.isComposing || event.defaultPrevented) return
+
+    event.preventDefault()
+    const form = field.form
+    const send = form && sendButton(form)
+    if (send) form.requestSubmit(send)
+  })
+
+  document.addEventListener("turbo:submit-end", (event) => {
+    const form = event.target
+    if (!(form instanceof HTMLFormElement) || !event.detail?.success) return
+
+    const field = form.querySelector("[data-ai-chat-composer-field]")
+    if (!field) return
+
+    form.reset()
+    field.focus()
+  })
+
+  document.addEventListener("click", (event) => {
+    const button = event.target instanceof Element && event.target.closest("[data-ai-chat-suggestion]")
+    if (button) suggest(button)
+  })
+
+  new MutationObserver((records) => {
+    for (const record of records) {
+      for (const node of record.addedNodes) if (node instanceof Element) arrive(node)
+    }
+  }).observe(document.documentElement, { childList: true, subtree: true })
+
+  let pendingStep = null
+
+  document.addEventListener("click", (event) => {
+    const step = event.target instanceof Element && event.target.closest(".UnmagicAIChatBranchPicker__step")
+    if (!step) return
+
+    const picker = step.closest(".UnmagicAIChatBranchPicker")
+    const turn = picker?.parentElement?.closest("[id]")
+    if (!turn) return
+
+    pendingStep = { turn: turn.id, index: Array.from(picker.querySelectorAll(".UnmagicAIChatBranchPicker__step")).indexOf(step) }
+  })
+
+  const restoreStep = () => {
+    if (!pendingStep) return
+    const steps = document.getElementById(pendingStep.turn)?.querySelectorAll(".UnmagicAIChatBranchPicker__step")
+    if (!steps) return
+
+    const step = steps[pendingStep.index]
+    pendingStep = null
+    const target = step?.getAttribute("aria-disabled") === "true" ? Array.from(steps).find((other) => other !== step) : step
+    target?.focus()
+  }
+
+  document.addEventListener("turbo:before-stream-render", (event) => {
+    if (!pendingStep) return
+    const render = event.detail.render
+    event.detail.render = async (stream) => {
+      await render(stream)
+      restoreStep()
+    }
+  })
+  document.addEventListener("turbo:render", restoreStep)
+  document.addEventListener("turbo:frame-render", restoreStep)
+}
+
+// The form's own Send button: the one submit that names the form. Stop names a
+// different form, so its presence doesn't count.
+function sendButton(form) {
+  if (!form.id) return form.querySelector("button[type=submit]:not([form])")
+  return document.querySelector(`button[type=submit][form="${CSS.escape(form.id)}"]`)
+}
+
+function suggest(button) {
+  const form = document.getElementById(button.dataset.aiChatSuggestionForm)
+  if (!(form instanceof HTMLFormElement)) return
+
+  const name = button.dataset.aiChatSuggestionField
+  const field =
+    (name && form.elements.namedItem(name)) ||
+    form.querySelector("[data-ai-chat-composer-field]") ||
+    form.querySelector("textarea")
+  if (!field) return
+
+  field.value = button.dataset.aiChatSuggestion
+  field.dispatchEvent(new Event("input", { bubbles: true }))
+  field.focus()
+  field.selectionStart = field.selectionEnd = field.value.length
+
+  if ("aiChatSuggestionFill" in button.dataset) return
+  const send = sendButton(form)
+  if (send) form.requestSubmit(send)
+}
+
+const ASKING = ".UnmagicAIChatRequest--waiting[role=alert], .UnmagicAIChatPermission--waiting[role=alert]"
+
+function arrive(node) {
+  const card = node.matches(ASKING) ? node : node.querySelector(ASKING)
+  if (!card) return
+
+  const focused = document.activeElement
+  if (focused && focused !== document.body && focused !== document.documentElement) return
+
+  if (card.classList.contains("UnmagicAIChatPermission")) {
+    card.focus()
+  } else {
+    const first = card.querySelector("input:not([type=hidden]), select, textarea")
+    ;(first ?? card).focus()
+  }
+}

data/app/assets/javascripts/unmagic/components/autoscroll.js

@@ -0,0 +1,103 @@
+// <unmagic-autoscroll> — keeps a growing region pinned to the bottom while the
+// reader is there, rendered by `ai_chat`.
+//
+// New content scrolls the page (or the scroller) to the bottom, but only while the
+// reader is already within `threshold` pixels of it. Scroll up to re-read and
+// nothing moves; scroll back down and following resumes. The reader's own
+// scrolling is the only thing that decides.
+//
+//   threshold="32"      how near the bottom still counts as at it
+//   scroller="#panel"   the scrolling box, found from the element outwards, then
+//                       in the document; the page when absent
+//
+// A descendant [data-autoscroll-latest] button is shown while the reader is away
+// from the bottom and takes them back when pressed. The element fires
+// unmagic-autoscroll:pin and unmagic-autoscroll:unpin as that changes. It opens at
+// the bottom, including when Turbo restores it from the cache. No Turbo needed.
+
+const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
+
+class UnmagicAutoscroll extends HTMLElement {
+  #pinned = true
+  #frame = null
+  #scroller = null
+  #target = null
+  #observer = new MutationObserver(() => this.#follow())
+
+  constructor() {
+    super()
+    this.addEventListener("click", (event) => {
+      if (event.target instanceof Element && event.target.closest("[data-autoscroll-latest]")) {
+        this.scrollToBottom({ smooth: !reducedMotion.matches })
+      }
+    })
+  }
+
+  connectedCallback() {
+    this.#scroller = this.#resolveScroller()
+    this.#target = this.#scroller ?? window
+    this.#target.addEventListener("scroll", this.#track, { passive: true })
+    this.#observer.observe(this, { childList: true, subtree: true, characterData: true })
+    this.#pinned = true
+    this.#latest(false)
+    this.scrollToBottom()
+  }
+
+  disconnectedCallback() {
+    this.#observer.disconnect()
+    this.#target?.removeEventListener("scroll", this.#track)
+    this.#target = null
+    cancelAnimationFrame(this.#frame)
+    this.#frame = null
+  }
+
+  get pinned() {
+    return this.#pinned
+  }
+
+  scrollToBottom({ smooth = false } = {}) {
+    const scrolling = this.#scrolling
+    scrolling.scrollTo({ top: scrolling.scrollHeight, behavior: smooth ? "smooth" : "instant" })
+  }
+
+  get #scrolling() {
+    return this.#scroller ?? document.scrollingElement
+  }
+
+  #resolveScroller() {
+    const selector = this.getAttribute("scroller")
+    if (!selector) return null
+    return this.closest(selector) ?? document.querySelector(selector)
+  }
+
+  // A streamed reply changes the DOM many times a frame; scroll once per frame.
+  #follow() {
+    if (!this.#pinned || this.#frame) return
+
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = null
+      if (this.#pinned) this.scrollToBottom()
+    })
+  }
+
+  #track = () => {
+    const { scrollTop, scrollHeight, clientHeight } = this.#scrolling
+    const pinned = scrollHeight - clientHeight - scrollTop <= this.#threshold
+    if (pinned === this.#pinned) return
+
+    this.#pinned = pinned
+    this.#latest(!pinned)
+    this.dispatchEvent(new CustomEvent(`unmagic-autoscroll:${pinned ? "pin" : "unpin"}`, { bubbles: true }))
+  }
+
+  get #threshold() {
+    const value = Number.parseInt(this.getAttribute("threshold"), 10)
+    return Number.isNaN(value) ? 32 : value
+  }
+
+  #latest(show) {
+    for (const button of this.querySelectorAll("[data-autoscroll-latest]")) button.hidden = !show
+  }
+}
+
+customElements.get("unmagic-autoscroll") || customElements.define("unmagic-autoscroll", UnmagicAutoscroll)

data/app/assets/javascripts/unmagic/components/board.js

@@ -0,0 +1,65 @@
+// A board's "Add a card" and "Add a list" forms (`board`), wired once by
+// delegation so a column streamed in later works with no setup.
+//
+// Opening one focuses its field. Enter submits and Shift+Enter makes a new line.
+// Escape, or the × button, closes it. After a successful submit the form is reset
+// and stays open with the field focused, so several can be added in a row: the
+// refresh that follows would otherwise morph the <details> shut, since the
+// server's markup has it closed.
+
+const INSTALLED = Symbol.for("unmagic.components.board")
+
+if (!document[INSTALLED]) {
+  document[INSTALLED] = true
+
+  // toggle doesn't bubble, but it does pass through the capture phase.
+  document.addEventListener(
+    "toggle",
+    (event) => {
+      const details = event.target
+      if (details instanceof HTMLDetailsElement && details.matches(".UnmagicBoard__add") && details.open) {
+        details.querySelector("[data-board-add-field]")?.focus()
+      }
+    },
+    true,
+  )
+
+  document.addEventListener("turbo:before-morph-attribute", (event) => {
+    if (event.detail?.attributeName === "open" && event.target.matches?.(".UnmagicBoard__add")) {
+      event.preventDefault()
+    }
+  })
+
+  document.addEventListener("keydown", (event) => {
+    const field = event.target
+    if (!(field instanceof HTMLTextAreaElement) || !field.hasAttribute("data-board-add-field")) return
+
+    if (event.key === "Escape") {
+      event.preventDefault()
+      close(field)
+    } else if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+      event.preventDefault()
+      field.form?.requestSubmit()
+    }
+  })
+
+  document.addEventListener("click", (event) => {
+    const button = event.target instanceof Element && event.target.closest("[data-board-add-cancel]")
+    if (button) close(button)
+  })
+
+  document.addEventListener("turbo:submit-end", (event) => {
+    const form = event.target
+    if (!(form instanceof HTMLFormElement) || !form.hasAttribute("data-board-add") || !event.detail?.success) return
+
+    form.reset()
+    form.querySelector("[data-board-add-field]")?.focus()
+  })
+}
+
+function close(within) {
+  const details = within.closest(".UnmagicBoard__add")
+  if (!details) return
+  details.open = false
+  details.querySelector("summary")?.focus()
+}