unmagic-components 0.3.0 → 0.4.0

data/lib/unmagic/components/browser/app/helpers/unmagic/components/browser/application_helper.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Unmagic
+  module Components
+    module Browser
+      module ApplicationHelper
+        EXAMPLES = "unmagic/components/browser/examples"
+
+        # The browser's own importmap: the names config/importmap.rb pins for a
+        # host, and Turbo's, resolved to the files the browser serves itself.
+        def browser_importmap_tags
+          javascripts = Browser.asset_roots.fetch("javascripts")
+          imports = {
+            "@hotwired/turbo-rails" => browser_asset_path("turbo", "turbo.min.js"),
+            "unmagic/components" => browser_asset_path("javascripts", "unmagic/components.js")
+          }
+          Dir[javascripts.join("unmagic/components/**/*.js")].sort.each do |file|
+            name = Pathname(file).relative_path_from(javascripts).to_s
+            imports[name.delete_suffix(".js")] = browser_asset_path("javascripts", name)
+          end
+
+          safe_join [
+            tag.script({ imports: imports }.to_json.html_safe, type: "importmap", nonce: content_security_policy_nonce), # rubocop:disable Rails/OutputSafety -- JSON of our own paths
+            tag.script('import "unmagic/components"'.html_safe, type: "module", nonce: content_security_policy_nonce) # rubocop:disable Rails/OutputSafety -- a constant
+          ], "\n"
+        end
+
+        def browser_stylesheet_tag
+          tag.link rel: "stylesheet", href: browser_asset_path("stylesheets", "browser.css")
+        end
+
+        # A file the browser serves, stamped so a changed file is fetched afresh
+        # and an unchanged one comes from cache. The modification time covers
+        # editing in development; the version (turbo-rails' own, for Turbo)
+        # covers an upgrade, because gem packaging gives every file the same time.
+        def browser_asset_path(kind, name)
+          file = Browser.asset_roots.fetch(kind).join(name)
+          mtime = File.exist?(file) ? File.mtime(file).to_i : 0
+          version = (Gem.loaded_specs["turbo-rails"]&.version if kind == "turbo") || Components::VERSION
+          "#{root_path}assets/#{kind}/#{name}?v=#{version}-#{mtime}"
+        end
+
+        def example_partial(component, key) = "#{EXAMPLES}/#{component.slug}/#{key}"
+
+        # What the Code tab shows: the example's partial, exactly as it's rendered.
+        def example_source(component, example)
+          Browser.root.join("app/views", EXAMPLES, component.slug, "_#{example.key}.html.erb").read.rstrip
+        end
+      end
+    end
+  end
+end

data/lib/unmagic/components/browser/app/models/unmagic/components/browser/board_store.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+module Unmagic
+  module Components
+    module Browser
+      # The board example's data, kept in the session. It takes drops the way
+      # unmagic-sortable's endpoint does — moved, prev, next and the column — with
+      # float ranks, which are plenty for one person's session.
+      class BoardStore
+        COLUMNS = [ %w[todo To\ do], %w[doing Doing], %w[review Review], %w[done Done] ].freeze
+
+        CARDS = [
+          [ "todo", "Write the job ad for the platform role", "Hiring", "Ada Lovelace" ],
+          [ "todo", "Book the room for Thursday's panel", "Ops", nil ],
+          [ "todo", "Ask Grace for interview feedback", "Hiring", "Grace Hopper" ],
+          [ "doing", "Shortlist the backend candidates", "Hiring", "Katherine Johnson" ],
+          [ "doing", "Draft the offer letter template", "Legal", "Alan Turing" ],
+          [ "review", "Check the salary bands against the market", "Finance", "Margaret Hamilton" ],
+          [ "done", "Post the role on the careers page", "Hiring", "Ada Lovelace" ],
+          [ "done", "Set up the take-home repository", "Eng", "Dennis Ritchie" ]
+        ].freeze
+
+        def initialize(session)
+          @session = session
+          @session[:board] ||= seed
+        end
+
+        def columns = data["columns"].sort_by { |column| column["rank"] }
+
+        def cards_in(column)
+          data["cards"].select { |card| card["column"] == column["key"] }.sort_by { |card| card["rank"] }
+        end
+
+        def move(key, prev:, following:, column: nil)
+          record = (data["columns"] + data["cards"]).find { |item| item["key"] == key }
+          return false unless record
+
+          record["rank"] = between(prev.presence&.to_f, following.presence&.to_f)
+          record["column"] = column if column.present? && record.key?("column")
+          true
+        end
+
+        # The session is a cookie, so the board stays small enough to fit in one.
+        LIMIT = 30
+
+        def add_card(title, column)
+          return if title.blank? || data["cards"].size >= LIMIT || data["columns"].none? { |c| c["key"] == column }
+
+          last = data["cards"].select { |card| card["column"] == column }.map { |card| card["rank"] }.max
+          data["cards"] << { "key" => "card-#{SecureRandom.hex(3)}", "title" => title.strip, "column" => column,
+                             "tag" => nil, "owner" => nil, "rank" => between(last, nil) }
+        end
+
+        def add_column(title)
+          return if title.blank? || data["columns"].size >= 8
+
+          last = data["columns"].map { |column| column["rank"] }.max
+          data["columns"] << { "key" => "column-#{SecureRandom.hex(3)}", "title" => title.strip, "rank" => between(last, nil) }
+        end
+
+        def reset! = @session[:board] = seed
+
+        private
+
+        def data = @session[:board]
+
+        def between(lower, upper)
+          if lower && upper then (lower + upper) / 2
+          elsif upper then upper - 1
+          elsif lower then lower + 1
+          else 1.0
+          end
+        end
+
+        def seed
+          {
+            "columns" => COLUMNS.each_with_index.map { |(key, title), index| { "key" => key, "title" => title, "rank" => index + 1.0 } },
+            "cards" => CARDS.each_with_index.map do |(column, title, tag, owner), index|
+              { "key" => "card-#{index + 1}", "title" => title, "column" => column, "tag" => tag, "owner" => owner, "rank" => index + 1.0 }
+            end
+          }
+        end
+      end
+    end
+  end
+end

data/lib/unmagic/components/browser/app/models/unmagic/components/browser/catalog.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Unmagic
+  module Components
+    module Browser
+      # The components the browser shows, and the examples on each one's page.
+      #
+      # Each component describes itself in browser/catalog/<slug>.rb. Its examples
+      # are partials in app/views/unmagic/components/browser/examples/<slug>/,
+      # rendered live and shown as source, and _thumbnail is its card on the
+      # overview. In development the files are loaded again on every request, so a
+      # new example shows up without a restart.
+      module Catalog
+        Component = Data.define(:slug, :name, :description, :helper, :import, :group, :examples)
+        Example = Data.define(:key, :title, :description, :layout)
+
+        # :center sits natural-width content in the middle of the frame; :full lets a
+        # table, form or grid use the frame's whole width.
+        LAYOUTS = %i[center full].freeze
+
+        # The sidebar and the overview list ungrouped components first, under
+        # "Components", then each group under its own heading in this order.
+        GROUPS = [ nil, "AI chat" ].freeze
+
+        class << self
+          def component(slug, name:, description:, examples:, helper: nil, import: nil, group: nil)
+            raise ArgumentError, "unknown group #{group.inspect} for #{slug}" unless GROUPS.include?(group)
+
+            registry[slug.to_s] = Component.new(
+              slug: slug.to_s, name: name, description: description, helper: helper, import: import, group: group,
+              examples: examples.map { |example| build_example(slug, **example) }
+            )
+          end
+
+          def all = registry.values.sort_by { |component| [ GROUPS.index(component.group), component.name ] }
+
+          # [heading, components] pairs, in sidebar order.
+          def grouped = all.group_by(&:group).map { |group, components| [ group || "Components", components ] }
+
+          def find(slug) = registry[slug.to_s]
+
+          def reload!
+            @registry = {}
+            Dir[Browser.root.join("catalog/*.rb")].each { |file| load file }
+          end
+
+          private
+
+          def registry
+            reload! unless @registry
+            @registry
+          end
+
+          def build_example(slug, key:, title:, description: nil, layout: :center)
+            unless LAYOUTS.include?(layout)
+              raise ArgumentError, "unknown layout #{layout.inspect} for #{slug}/#{key} (expected one of #{LAYOUTS.inspect})"
+            end
+
+            Example.new(key: key.to_s, title: title, description: description, layout: layout)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/unmagic/components/browser/app/models/unmagic/components/browser/pager.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Unmagic
+  module Components
+    module Browser
+      Pager = Struct.new(:previous, :next) do
+        def page_url(direction) = "?page=#{direction == :previous ? 1 : 3}"
+      end
+    end
+  end
+end

data/lib/unmagic/components/browser/app/models/unmagic/components/browser/profile.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require "active_model"
+
+module Unmagic
+  module Components
+    module Browser
+      # What the dialog preview edits: one validated field, kept in the session so a
+      # save visibly changes the page the modal was opened from.
+      class Profile
+        include ActiveModel::Model
+        include ActiveModel::Attributes
+
+        attribute :name, :string
+        attribute :role, :string
+
+        validates :name, presence: true
+
+        def self.model_name = ActiveModel::Name.new(self, nil, "Profile")
+
+        def persisted? = true
+      end
+    end
+  end
+end

data/lib/unmagic/components/browser/app/models/unmagic/components/browser/reply.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Unmagic
+  module Components
+    module Browser
+      # A canned assistant reply for the streaming examples, and the growing renders a
+      # server would broadcast while writing it. A host renders its own Markdown; the
+      # preview has none, so the reply is kept as blocks of HTML and a snapshot is the
+      # first n words of it, cut the way a half-written reply would be.
+      module Reply
+        BLOCKS = [
+          [ :p, "Three candidates haven't replied since the invitations went out on Monday." ],
+          [ :ul, [ "Ana Silva opened hers twice but hasn't answered.", "Grace Okafor hasn't opened hers.",
+                   "Tom Reyes's bounced, so the address is probably wrong." ] ],
+          [ :p, "I'd send Ana a short nudge today, check Tom's address against his CV, and leave Grace until Thursday." ],
+          [ :pre, "invitations.unanswered.where(sent_at: ..3.days.ago)" ],
+          [ :p, "Want me to draft the nudge for Ana?" ]
+        ].freeze
+
+        class << self
+          include ERB::Util
+
+          def words = BLOCKS.sum { |_, content| Array(content).sum { |text| text.split.size } }
+
+          def html(limit = words)
+            remaining = limit
+            BLOCKS.filter_map do |tag, content|
+              next if remaining <= 0
+
+              case tag
+              when :ul
+                items = content.filter_map do |text|
+                  next if remaining <= 0
+
+                  "<li>#{take(text, remaining).tap { remaining -= text.split.size }}</li>"
+                end
+                "<ul>#{items.join}</ul>"
+              when :pre
+                text = take(content, remaining)
+                remaining -= content.split.size
+                "<pre><code>#{text}</code></pre>"
+              else
+                text = take(content, remaining)
+                remaining -= content.split.size
+                "<#{tag}>#{text}</#{tag}>"
+              end
+            end.join.html_safe # rubocop:disable Rails/OutputSafety -- the preview's own constant copy, escaped word by word
+          end
+
+          # Uneven bursts, as a model produces them.
+          def snapshots
+            sizes = [ 3, 1, 6, 2, 9, 4, 1, 7, 12, 3, 5, 2, 8 ]
+            limit = 0
+            result = []
+            sizes.cycle.each do |size|
+              limit = [ limit + size, words ].min
+              result << html(limit)
+              break if limit == words
+            end
+            result
+          end
+
+          private
+
+          def take(text, count)
+            html_escape(text.split.first([ count, 0 ].max).join(" "))
+          end
+        end
+      end
+    end
+  end
+end

data/lib/unmagic/components/browser/app/models/unmagic/components/browser/thing.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require "active_model"
+
+module Unmagic
+  module Components
+    module Browser
+      # A row for the preview tables. Not an Active Record — the preview has no
+      # database — but enough of a model for dom_id.
+      class Thing
+        include ActiveModel::Model
+        include ActiveModel::Conversion
+        extend ActiveModel::Naming
+
+        attr_accessor :id, :name, :role, :score, :note
+
+        def to_key = [ id ]
+        def persisted? = id.present?
+
+        def self.all
+          [
+            new(id: 1, name: "Ada Lovelace", role: "Engineer", score: 120, note: "Replied: happy to chat next week."),
+            new(id: 2, name: "Grace Hopper", role: "Engineer", score: 98),
+            new(id: 3, name: "Katherine Johnson", role: "Analyst", score: 87),
+            new(id: 4, name: "Radia Perlman", role: "Architect", score: 64)
+          ]
+        end
+      end
+    end
+  end
+end

data/lib/unmagic/components/browser/app/views/layouts/unmagic/components/browser/application.html.erb

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="<%= dark_theme? ? "dark" : "light" %>" class="dark:[color-scheme:dark]">
+  <head>
+    <title><%= [ content_for(:title), "unmagic-components" ].compact.join(" · ") %></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="data:,">
+    <%= csrf_meta_tags %>
+    <%= turbo_refresh_method_tag :morph %>
+    <%= turbo_refresh_scroll_tag :preserve %>
+    <%= browser_stylesheet_tag %>
+    <%= browser_importmap_tags %>
+  </head>
+  <body class="min-h-screen bg-white text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100">
+    <aside class="fixed inset-y-0 left-0 z-30 hidden w-64 flex-col border-r border-neutral-200 bg-neutral-50/70 lg:flex dark:border-neutral-800 dark:bg-neutral-900/40">
+      <div class="flex h-14 shrink-0 items-center px-5">
+        <%= link_to root_path, class: "flex items-center gap-2.5 text-sm font-semibold" do %>
+          <span class="grid size-6 place-items-center rounded-md bg-neutral-900 text-[0.625rem] font-bold text-white dark:bg-white dark:text-neutral-900">um</span>
+          unmagic-components
+        <% end %>
+      </div>
+      <nav class="flex-1 overflow-y-auto px-3 pb-10" aria-label="Components">
+        <%= render "nav" %>
+      </nav>
+    </aside>
+
+    <div class="lg:pl-64">
+      <header class="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-neutral-200 bg-white/85 px-4 backdrop-blur sm:px-8 dark:border-neutral-800 dark:bg-neutral-950/85">
+        <details class="relative lg:hidden">
+          <summary class="<%= button_classes(:icon) %> list-none [&::-webkit-details-marker]:hidden" aria-label="Menu">
+            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+          </summary>
+          <nav class="absolute left-0 top-11 max-h-[75vh] w-64 overflow-y-auto rounded-xl border border-neutral-200 bg-white p-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-900" aria-label="Components">
+            <%= render "nav" %>
+          </nav>
+        </details>
+
+        <nav class="flex min-w-0 items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400" aria-label="Breadcrumb">
+          <%= yield :breadcrumbs %>
+        </nav>
+
+        <div class="ml-auto flex items-center gap-1">
+          <% switch_to = dark_theme? ? "light" : "dark" %>
+          <%= link_to "?theme=#{switch_to}", class: button_classes(:icon), "aria-label": "Switch to #{switch_to} theme", title: "Switch to #{switch_to} theme" do %>
+            <% if dark_theme? %>
+              <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2m-7.07-2.93 1.41-1.41m11.32-11.32 1.41-1.41M2 12h2m16 0h2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41"/></svg>
+            <% else %>
+              <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+            <% end %>
+          <% end %>
+          <%= link_to "https://github.com/unreasonable-magic/unmagic-components", class: button_classes(:icon), "aria-label": "GitHub", title: "GitHub" do %>
+            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-5-2"/></svg>
+          <% end %>
+        </div>
+      </header>
+
+      <main class="mx-auto max-w-6xl px-4 py-10 sm:px-8 lg:py-14">
+        <%= yield %>
+      </main>
+    </div>
+
+    <%= modal_frame %>
+    <%= confirm_dialog_template %>
+    <%= flash_toasts %>
+  </body>
+</html>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/application/_code.html.erb

@@ -0,0 +1,7 @@
+<%# A block of source with a copy button. id: names the <pre> the button copies. %>
+<div class="relative overflow-hidden rounded-xl border border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900">
+  <pre id="<%= id %>" class="m-0 overflow-x-auto p-4 pr-14 font-mono text-[0.8125rem] leading-6 text-neutral-800 dark:text-neutral-200"><code><%= source %></code></pre>
+  <div class="absolute right-2 top-2">
+    <%= copy_button from: id %>
+  </div>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/application/_crumb.html.erb

@@ -0,0 +1,7 @@
+<%# One breadcrumb: a link, or the current page when there's no path. %>
+<% if local_assigns[:path] %>
+  <%= link_to label, path, class: "shrink-0 hover:text-neutral-900 dark:hover:text-neutral-100" %>
+  <svg class="size-3.5 shrink-0 text-neutral-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
+<% else %>
+  <span class="truncate font-medium text-neutral-900 dark:text-neutral-100" aria-current="page"><%= label %></span>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/application/_example.html.erb

@@ -0,0 +1,37 @@
+<%# One example: its heading, then a Preview/Code switch between the partial
+    rendered live and that same partial's source. The switch is the gem's own
+    tabs, placed beside the heading by browser/tailwind/browser.css.
+
+    The section is named by component and example together, so an example key
+    can't take an id the layout already uses: the dialog's "modal" example would
+    otherwise shadow the shared modal's #modal frame. %>
+<% id = "#{component.slug}_#{example.key}" %>
+<% center = example.layout == :center %>
+
+<section id="<%= id %>" class="PreviewExample scroll-mt-20">
+  <div class="mb-3 min-h-9 pr-40">
+    <h2 class="text-base font-semibold">
+      <a href="#<%= id %>" class="hover:underline"><%= example.title %></a>
+    </h2>
+    <% if example.description %>
+      <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400"><%= example.description %></p>
+    <% end %>
+  </div>
+
+  <%= tabs id: "#{id}_view", class: "PreviewExample__tabs" do |tabs| %>
+    <% tabs.tab "Preview" %>
+    <% tabs.tab "Code" %>
+
+    <% tabs.panel do %>
+      <div class="rounded-xl border border-neutral-200 bg-white bg-[radial-gradient(var(--color-neutral-200)_1px,transparent_1px)] [background-size:16px_16px] p-6 sm:p-10 dark:border-neutral-800 dark:bg-neutral-950 dark:bg-[radial-gradient(var(--color-neutral-800)_1px,transparent_1px)] <%= "flex min-h-52 items-center justify-center" if center %>">
+        <div class="<%= center ? "max-w-full" : "w-full" %>">
+          <%= render partial: example_partial(component, example.key) %>
+        </div>
+      </div>
+    <% end %>
+
+    <% tabs.panel do %>
+      <%= render "code", id: "#{id}_source", source: example_source(component, example) %>
+    <% end %>
+  <% end %>
+</section>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/application/_nav.html.erb

@@ -0,0 +1,17 @@
+<%# The sidebar's links, shared by the fixed sidebar and the small-screen menu. %>
+<% item = "block rounded-md px-2.5 py-1.5 text-sm text-neutral-600 hover:bg-neutral-200/60 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100" %>
+<% current = "block rounded-md px-2.5 py-1.5 text-sm font-medium bg-neutral-200/70 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100" %>
+<% heading = "px-2.5 pb-1.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400" %>
+
+<p class="<%= heading %> pt-4">Getting started</p>
+<% [ [ "Overview", root_path ], [ "Installation", installation_path ], [ "Theming", theming_path ] ].each do |label, path| %>
+  <%= link_to label, path, class: current_page?(path) ? current : item, "aria-current": ("page" if current_page?(path)) %>
+<% end %>
+
+<% @component_groups.each do |group, components| %>
+  <p class="<%= heading %> pt-6"><%= group %></p>
+  <% components.each do |component| %>
+    <% path = component_path(component.slug) %>
+    <%= link_to component.name, path, class: current_page?(path) ? current : item, "aria-current": ("page" if current_page?(path)) %>
+  <% end %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/demos/edit_profile.html.erb

@@ -0,0 +1,9 @@
+<%= dialog title: "Edit profile",
+      form: { model: @profile, url: profile_dialog_path, method: :patch, builder: Unmagic::Components::FormBuilder } do |dialog, form| %>
+  <%= form.field :name, "Name", required: true, autofocus: true %>
+  <%= form.field :role, "Role", hint: "Shown beside the name." %>
+  <% dialog.footer do %>
+    <%= tag.button "Cancel", type: "button", class: button_classes, data: { unmagic_dialog_close: "" } %>
+    <%= form.submit "Save" %>
+  <% end %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat/_conversation.html.erb

@@ -0,0 +1,101 @@
+<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_16rem]">
+  <div class="flex min-w-0 flex-col gap-4">
+    <div id="showcase_scroll" class="h-[38rem] overflow-y-auto pr-2">
+      <%= ai_chat id: "showcase_entries", scroller: "#showcase_scroll" do %>
+        <%= ai_chat_message "Who hasn't replied to the Platform Engineer invitations yet?", role: :user, id: "showcase_q1" %>
+
+        <%= ai_chat_message role: :assistant, id: "showcase_a1" do |turn| %>
+          <% turn.reasoning duration: 4 do %>
+            <p>The invitations were sent on Monday. I need the job first, then the invitations without a reply, then
+            anything that bounced.</p>
+          <% end %>
+          <p>I'll check the invitations sent for that job this week.</p>
+        <% end %>
+
+        <%= ai_chat_tool_call name: "find_job", state: :done, icon: :folder, id: "showcase_t1" do |tool| %>
+          <% tool.summary "Platform Engineer" %>
+          <% tool.timing duration: 0.21 %>
+          <% tool.asked({ query: "Platform Engineer", status: "open" }) %>
+          <% tool.answered({ id: "job_8f2", title: "Platform Engineer", company: "Acme", invitations: 12 }) %>
+        <% end %>
+        <div data-ai-chat-timeline="gap" hidden></div>
+        <%= ai_chat_tool_call name: "search_invitations", state: :done, icon: :messages_square, id: "showcase_t2", open: true do |tool| %>
+          <% tool.summary "unanswered · last 7 days" %>
+          <% tool.timing duration: 1.84 %>
+          <% tool.failures 1 %>
+          <% tool.asked({ job: "job_8f2", replied: false, since: "7 days ago" }) %>
+          <% tool.answered({ invitations: [ "Ana Silva", "Grace Okafor", "Tom Reyes" ], errors: [ { id: "inv_31", error: "timed out" } ] }) %>
+        <% end %>
+        <div data-ai-chat-timeline="gap" hidden></div>
+        <%= ai_chat_tool_call name: "check_email", state: :running, id: "showcase_t3" do |tool| %>
+          <% tool.summary "tom.reyes@example.com" %>
+          <% tool.timing started_at: @now - 12 %>
+          <% tool.progress "Waiting on the mail server" %>
+        <% end %>
+
+        <%= ai_chat_message role: :assistant, id: "showcase_a2" do |turn| %>
+          <% turn.actions do %>
+            <%= ai_chat_action_bar for: "showcase_a2" do |bar| %>
+              <% bar.copy "Three candidates haven't replied." %>
+              <% bar.action "Try again", "#", icon: :rotate_cw, method: :post %>
+              <% bar.control { ai_chat_branch_picker index: 2, count: 2, previous: "#" } %>
+            <% end %>
+          <% end %>
+          <p>Three candidates haven't replied since Monday:</p>
+          <ul>
+            <li><strong>Ana Silva</strong> opened hers twice but hasn't answered.</li>
+            <li><strong>Grace Okafor</strong> hasn't opened hers.</li>
+            <li><strong>Tom Reyes</strong>'s bounced — I'm checking the address now.</li>
+          </ul>
+          <p>Ana did say something relevant last week:</p>
+          <%= ai_chat_citation do |cite| %>
+            <% cite.avatar %>
+            <% cite.who "Ana Silva" %>
+            <% cite.when @now - 6.days, url: "#" %>
+            <% cite.quote "I'm keen, but I'm travelling until the 18th.\nCould we talk after that?" %>
+          <% end %>
+          <%= ai_chat_proposal id: "showcase_fact" do |offer| %>
+            <% offer.claim "Ana is travelling until the 18th" %>
+            <% offer.meta "About Ana Silva · from her message on the 10th" %>
+            <% offer.accept { button_to "Remember", "#", class: button_classes(:primary, size: :small) } %>
+            <% offer.reject { button_to "Dismiss", "#", class: button_classes(size: :small) } %>
+          <% end %>
+          <p>I'd nudge Grace today and leave Ana until after she's back.</p>
+        <% end %>
+
+        <%= ai_chat_permission tool: "send_email", state: :waiting, url: "#", id: "showcase_p1" do |ask| %>
+          <% ask.argument "to", "grace.okafor@example.com" %>
+          <% ask.summary { tag.p("Send Grace a short nudge about the Platform Engineer role.") } %>
+          <% ask.reason { tag.p("She hasn't opened the invitation, and the role closes on Friday.") } %>
+          <% ask.allow confirm: "Send this email to Grace?" %>
+          <% ask.refuse %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%= form_with url: "#", id: "showcase_composer" do |form| %>
+      <%= ai_chat_composer form: form, field: :content, state: :waiting, placeholder: "Reply, or / for a command…", stop_form: "showcase_stop" do |composer| %>
+        <% composer.attach do %>
+          <button type="button" class="<%= button_classes(:icon) %>" aria-label="Attach a file" title="Attach a file">
+            <%= Unmagic::Components::Icons.svg(self, :paperclip) %>
+          </button>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="h-fit rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+    <%= ai_chat_plan id: "showcase_plan" do |plan| %>
+      <% plan.step "Find the job", state: :completed %>
+      <% plan.step "List who hasn't replied", state: :completed %>
+      <% plan.step "Check the bounced address", state: :in_progress %>
+      <% plan.step "Nudge Grace", state: :waiting %>
+      <% plan.step "Remind me about Ana on the 19th" %>
+    <% end %>
+    <%= ai_chat_workspace id: "showcase_workspace" do |workspace| %>
+      <% workspace.file "unanswered.csv", size: 1_240 %>
+      <% workspace.file "drafts/nudge-grace.md", size: 812, icon: :pencil %>
+      <% workspace.file "captures/tom-bounce.eml", size: 18_400 %>
+    <% end %>
+  </div>
+</div>