studio-engine 0.121.0 → 0.123.0

data/lib/studio.rb

@@ -589,10 +589,25 @@ module Studio
   # VOICE_NO_LIVE_CALLS is armed in every test environment.
   mattr_accessor :voice_transcriber, default: nil
 
-  # The OpenAI key for the real transcriber. nil reads OPENAI_API_KEY. Missing,
-  # the endpoint answers 503 with a line the page can show; nothing crashes.
+  # The OpenAI key for the real transcriber, voice's OWN key. nil reads
+  # STUDIO_VOICE_OPENAI_API_KEY, and never the app's shared OPENAI_API_KEY (on
+  # the hub that is the image key, with its own budget). Missing, the endpoint
+  # answers 503 with a line the page can show; nothing crashes.
   mattr_accessor :voice_openai_api_key, default: nil
 
+  # One take's whole budget at the vendor, in seconds: the first model AND the
+  # fallback share it, so a take never holds a web thread longer than this
+  # (Studio::VoiceTranscription::OpenAI). A timeout or a vendor 429 is not
+  # retried.
+  mattr_accessor :voice_transcribe_deadline, default: 25
+
+  # POST /voice/takes per signed-in user: at most `to` takes in any `within`
+  # seconds (a fixed window), else a JSON 429 with retry_after. Every take is a
+  # paid vendor call. `store:` (optional) is the counter's cache; nil uses
+  # Rails.cache, or a per-process memory store when Rails.cache is a NullStore.
+  # false turns the limit off.
+  mattr_accessor :voice_takes_rate_limit, default: { to: 20, within: 600 }
+
   # The speech-to-text models (Voicebox's measured pair) and the language both
   # are told to hear. A blank fallback turns the one retry off.
   mattr_accessor :voice_transcribe_model, default: "gpt-4o-transcribe"
@@ -1456,7 +1471,7 @@ module Studio
   mattr_accessor :agent_chat_souls,   default: []
   mattr_accessor :agent_chat_hub_url, default: "https://mcritchie.studio"
   # The app's bearer credential for the hub. Leave nil to read
-  # ENV["AGENT_CHAT_TOKEN"] (1Password apps.<slug>.agent-chat).
+  # ENV["AGENT_CHAT_TOKEN"] (1Password agent-chat.<slug>.applications).
   mattr_accessor :agent_chat_token,   default: nil
   # Which signed-in users the hub may know by email. An email the user only
   # CLAIMS (the profile page saves a new address and clears email_verified_at;
@@ -1471,6 +1486,50 @@ module Studio
     Array(agent_chat_souls).map { |soul| soul.to_s.strip }.reject(&:empty?).uniq
   end
 
+  # Who may use the chat at all: a callable taking the user, nil when signed out.
+  # The server's gate, not only the look: Studio::AgentChatsController answers a
+  # refused viewer 403 on both calls before any hub call, and the chat partial
+  # renders nothing for them. The footer's Chat link follows it too unless
+  # site_footer_chat_allowed is set, so one setting covers both. Default: everyone
+  # (a public chat). While testing:
+  #
+  #   config.agent_chat_allowed = ->(user) { user&.admin? }
+  mattr_accessor :agent_chat_allowed, default: ->(_user) { true }
+
+  # The one reading of Studio.agent_chat_allowed. A hook that raises answers false
+  # and logs: `user.admin?` on a signed-out visitor closes the chat, never opens it.
+  def self.agent_chat_allowed?(user)
+    hook = agent_chat_allowed
+    (hook.respond_to?(:call) ? hook.call(user) : hook) ? true : false
+  rescue StandardError => e
+    Rails.logger&.warn("[studio] agent_chat_allowed raised #{e.class}: treated as not allowed") if defined?(Rails.logger)
+    false
+  end
+
+  # Who may talk by voice (docs/AGENT_CHAT.md, "Talking by voice"): a callable
+  # taking the signed-in user. It decides who sees the chat's microphone, who
+  # may post a take to POST /voice/takes (each one is a paid vendor call), and
+  # whether the proxy forwards a message's `voice`. A signed-out visitor is
+  # never asked about: no user, no voice. While testing, an app narrows it:
+  #
+  #   config.voice_chat_allowed = ->(user) { user.admin? }
+  #
+  # A user Studio.agent_chat_allowed refuses may not talk either, whatever this says.
+  mattr_accessor :voice_chat_allowed, default: ->(user) { user.present? }
+
+  # The one reading of Studio.voice_chat_allowed. False for no user, and for a user
+  # the chat itself refuses, whatever the hook says. A hook that raises answers false and logs: the safe answer on a
+  # paid, sign-in-only control, and a page never falls over because of it.
+  def self.voice_chat_allowed?(user)
+    return false if user.nil? || !agent_chat_allowed?(user)
+
+    hook = voice_chat_allowed
+    (hook.respond_to?(:call) ? hook.call(user) : hook) ? true : false
+  rescue StandardError => e
+    Rails.logger&.warn("[studio] voice_chat_allowed raised #{e.class}: treated as not allowed") if defined?(Rails.logger)
+    false
+  end
+
   class S3ConfigError < StandardError; end
 
   # Whether to validate the host app's User model at boot. See docs/USER_CONTRACT.md.
@@ -1718,6 +1777,20 @@ module Studio
     SidebarSections.resolve(sidebar_sections, view)
   end
 
+  # The standard Chat entry in the footer's Contact column (docs/SITE_FOOTER.md,
+  # "The Chat link"). OFF until the app names a path: no path, no entry.
+  #
+  #   config.site_footer_chat_path = "/chat"       # or ->(view) { view.chat_path }
+  #   config.site_footer_chat_label = "Chat"       # the default
+  #   config.site_footer_chat_allowed = ->(user) { user&.admin? }  # default: Studio.agent_chat_allowed
+  #
+  # site_footer_chat_allowed takes the viewer, nil when signed out; a hook that
+  # raises hides the entry and logs (SiteFooter.chat_row). Unset, the link follows
+  # Studio.agent_chat_allowed, so the link shows to whom the chat answers.
+  mattr_accessor :site_footer_chat_path, default: nil
+  mattr_accessor :site_footer_chat_label, default: "Chat"
+  mattr_accessor :site_footer_chat_allowed, default: nil
+
   # The site footer's facts resolved for a view (lib/studio/site_footer.rb), or
   # nil when the app turned the footer off (or its own callable answered nil).
   # Unset, the facts are the default footer's. The name defaults to the site
@@ -1729,7 +1802,10 @@ module Studio
 
     declared = site_footer.nil? ? SiteFooter.default_facts(view, routes: host_route_set) : site_footer
     SiteFooter.resolve(declared, view, name: site_identity[:title], logo: logo_for("Footer Logo"),
-                                       booking_path: booking_path_for(view), address: site_footer_address)
+                                       booking_path: booking_path_for(view), address: site_footer_address,
+                                       chat: SiteFooter.chat_row(view, path: site_footer_chat_path,
+                                                                       label: site_footer_chat_label,
+                                                                       allowed: site_footer_chat_allowed.nil? ? agent_chat_allowed : site_footer_chat_allowed))
   end
 
   # The host's route set, for the default footer's legal links. nil outside a
@@ -2036,11 +2112,8 @@ module Studio
         get "schedule", to: "studio/bookings#show", as: :studio_booking
       end
 
-      # The living style guide. Canonical at /admin/style (StyleController#index);
-      # /admin/design_system redirects here but KEEPS its admin_design_system_path
-      # helper so a shipped host sidebar link on the old helper still resolves.
+      # The living style guide (StyleController#index).
       get   "admin/style",            to: "style#index",               as: :admin_style
-      get   "admin/design_system",    to: redirect("/admin/style"),    as: :admin_design_system
 
       # The component gallery: Lookbook over the engine's ViewComponent previews.
       # The router refuses anyone but a signed-in admin, so a visitor and a

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.121.0
+  version: 0.123.0
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-11-01 00:00:00.000000000 Z
+date: 2026-11-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -477,6 +477,7 @@ files:
 - app/controllers/style_controller.rb
 - app/controllers/theme_settings_controller.rb
 - app/helpers/studio/admin_models_table_helper.rb
+- app/helpers/studio/agent_chat_helper.rb
 - app/helpers/studio/at_time_helper.rb
 - app/helpers/studio/fizz_helper.rb
 - app/helpers/studio/geo_helper.rb
@@ -489,6 +490,7 @@ files:
 - app/helpers/studio_sidebar_helper.rb
 - app/helpers/studio_theme_helper.rb
 - app/javascript/studio/agent_chat.js
+- app/javascript/studio/agent_chat_voice.js
 - app/javascript/studio/alpine_scopes.js
 - app/javascript/studio/alpine_shims.js
 - app/javascript/studio/alpine_stores.js
@@ -498,6 +500,7 @@ files:
 - app/javascript/studio/booking.js
 - app/javascript/studio/confirm_interstitial.js
 - app/javascript/studio/controllers/agent_chat_controller.js
+- app/javascript/studio/controllers/agent_chat_voice_controller.js
 - app/javascript/studio/controllers/board_controller.js
 - app/javascript/studio/controllers/booking_controller.js
 - app/javascript/studio/controllers/email_banner_scale_controller.js
@@ -512,6 +515,7 @@ files:
 - app/javascript/studio/controllers/modal_host_controller.js
 - app/javascript/studio/controllers/nav_collapse_controller.js
 - app/javascript/studio/controllers/style_modals_controller.js
+- app/javascript/studio/controllers/style_section_nav_controller.js
 - app/javascript/studio/controllers/survey_controller.js
 - app/javascript/studio/controllers/toast_controller.js
 - app/javascript/studio/controllers/voice_profile_controller.js
@@ -548,6 +552,7 @@ files:
 - app/javascript/studio/studio_confetti.js
 - app/javascript/studio/style_guide.js
 - app/javascript/studio/style_modals.js
+- app/javascript/studio/style_section_nav.js
 - app/javascript/studio/survey.js
 - app/javascript/studio/theme_editor.js
 - app/javascript/studio/toast.js
@@ -581,6 +586,7 @@ files:
 - app/models/studio/model_page.rb
 - app/models/studio/site_identity.rb
 - app/models/studio/survey_response.rb
+- app/models/studio/user_session.rb
 - app/models/theme_setting.rb
 - app/services/google_oauth_validator.rb
 - app/services/studio/banner.rb
@@ -631,8 +637,8 @@ files:
 - app/views/studio/_leveling_activity_assets.html.erb
 - app/views/studio/_session_stamp.html.erb
 - app/views/studio/admin_models/_arenas_table.html.erb
+- app/views/studio/admin_models/_sessions_table.html.erb
 - app/views/studio/admin_models/_teams_table.html.erb
-- app/views/studio/admin_models/index.html.erb
 - app/views/studio/admin_models/show.html.erb
 - app/views/studio/admin_surveys/index.html.erb
 - app/views/studio/admin_surveys/show.html.erb
@@ -641,6 +647,7 @@ files:
 - app/views/studio/agent_chat/_header.html.erb
 - app/views/studio/agent_chat/_turn.html.erb
 - app/views/studio/agent_chat/_typing.html.erb
+- app/views/studio/agent_chat/_voice.html.erb
 - app/views/studio/banners/_app_banner.html.erb
 - app/views/studio/banners/_button.html.erb
 - app/views/studio/banners/_dev_mode_button.html.erb
@@ -796,7 +803,6 @@ files:
 - app/views/style/modals/_unsubscribe_confirm.html.erb
 - app/views/style/modals/_wallet_connect.html.erb
 - app/views/style/modals/_wallet_connect_slot.html.erb
-- app/views/theme_settings/edit.html.erb
 - app/views/user_mailer/magic_link.html.erb
 - app/views/user_mailer/magic_link.text.erb
 - config/importmap.rb
@@ -821,6 +827,7 @@ files:
 - db/migrate/20261008120000_add_recording_to_studio_knowledge_docs.rb
 - db/migrate/20261010120000_add_stored_in_to_image_caches.rb
 - db/migrate/20261029120000_add_voice_profile_to_users.rb
+- db/migrate/20261103120000_create_studio_user_sessions.rb
 - docs/BOOKING.md
 - docs/SITE_FOOTER.md
 - lib/active_storage/service/studio_trash_s3_service.rb

data/app/views/studio/admin_models/index.html.erb

@@ -1,31 +0,0 @@
-<% content_for(:title, "Models - Admin") %>
-
-<div class="max-w-7xl mx-auto px-4 py-8 space-y-6">
-  <header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
-    <div>
-      <p class="text-xs text-muted uppercase tracking-wide font-semibold">Admin QA</p>
-      <h1 class="text-heading text-2xl font-bold mt-1">Models</h1>
-      <p class="text-muted text-sm mt-1">Ten-row snapshots for records that need quick inspection.</p>
-    </div>
-    <%= link_to "Back to dashboard", admin_dashboard_path, class: "btn btn-outline" %>
-  </header>
-
-  <div class="space-y-5">
-    <% @sections.each do |section| %>
-      <section id="model-<%= section.fetch(:key) %>" class="card overflow-hidden">
-        <div class="px-4 py-4 border-b border-subtle flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div>
-            <h2 class="text-heading text-lg font-semibold"><%= section.fetch(:label) %></h2>
-            <p class="text-xs text-muted"><%= section.fetch(:description) %></p>
-          </div>
-          <div class="flex items-center gap-3">
-            <span class="text-xs text-muted">Showing <%= section.fetch(:records).size %> of <%= section.fetch(:count) %></span>
-            <%= link_to "View all", admin_model_path(section.fetch(:key)), class: "text-xs text-primary hover:underline" %>
-          </div>
-        </div>
-
-        <%= render admin_models_table_partial(section.fetch(:key)), records: section.fetch(:records) %>
-      </section>
-    <% end %>
-  </div>
-</div>

data/app/views/theme_settings/edit.html.erb

@@ -1,304 +0,0 @@
-<%# The editor is studio/theme_editor's themeEditor factory, seeded with the
-    server-resolved role colours. studio/alpine_shims publishes it. %>
-<div class="max-w-5xl mx-auto px-4 py-8" x-data="themeEditor(<%= @theme_setting.resolved_colors.to_json %>)">
-  <div class="flex items-center justify-between mb-8">
-    <h1 class="text-2xl font-bold text-heading">Theme</h1>
-    <div class="flex gap-3">
-      <%= form_tag("/admin/theme/regenerate", method: :post) do %>
-        <button type="submit" class="btn btn-outline btn-sm">Regenerate Cache</button>
-      <% end %>
-    </div>
-  </div>
-
-  <%= form_tag("/admin/theme", method: :patch) do %>
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      <!-- Color Inputs -->
-      <div class="card p-6">
-        <h2 class="text-lg font-bold text-heading mb-6">Role Colors</h2>
-
-        <% ThemeSetting::ROLES.each do |role| %>
-          <% db_col = ThemeSetting.db_column_for(role) %>
-          <% db_val = @theme_setting.read_attribute(db_col) %>
-          <% default_val = @defaults[role] %>
-          <% current_val = db_val.presence || default_val %>
-          <div class="flex items-center gap-4 mb-4">
-            <input type="color"
-                   :value="colors.<%= role %>"
-                   @input="colors.<%= role %> = $event.target.value; updatePreview()"
-                   class="w-10 h-10 rounded cursor-pointer border border-subtle"
-                   style="padding: 1px;">
-            <div class="flex-1">
-              <div class="flex items-center gap-2">
-                <span class="text-heading font-medium text-sm"><%= role.to_s.titleize %></span>
-                <% if db_val.present? %>
-                  <span class="text-xs text-muted">(custom)</span>
-                <% end %>
-              </div>
-              <input type="text"
-                     name="theme_setting[<%= db_col %>]"
-                     x-model="colors.<%= role %>"
-                     @input="updatePreview()"
-                     @blur="normalizeHex('<%= role %>')"
-                     class="text-xs text-secondary font-mono"
-                     style="background: transparent; border: none; border-bottom: 1px dashed currentColor; padding: 0; width: 5.5rem; outline: none;"
-                     spellcheck="false">
-            </div>
-            <% if default_val %>
-              <button type="button"
-                      @click="resetColor('<%= role %>', '<%= default_val %>')"
-                      class="text-xs text-muted hover:text-heading transition"
-                      title="Reset to default (<%= default_val %>)">
-                Reset
-              </button>
-            <% end %>
-          </div>
-        <% end %>
-
-        <div class="flex gap-3 mt-6 pt-6 border-t border-subtle">
-          <button type="submit" class="btn btn-primary">Save Theme</button>
-        </div>
-      </div>
-
-      <!-- Live Preview -->
-      <div class="space-y-6">
-        <!-- Dark Preview -->
-        <div class="rounded-xl border border-subtle overflow-hidden">
-          <div class="px-4 py-2 bg-surface-alt">
-            <span class="text-xs font-bold text-secondary uppercase tracking-wider">Dark Mode Preview</span>
-          </div>
-          <div class="p-6" :style="darkPreviewStyle()">
-            <h3 class="font-bold mb-1" :style="{ color: '#ffffff' }">Page Heading</h3>
-            <p class="text-sm mb-4" :style="{ color: '#e2e8f0' }">Body text on the page surface.</p>
-            <div class="rounded-lg p-4 mb-4" :style="darkSurfaceStyle()">
-              <p class="text-sm mb-3" :style="{ color: '#94a3b8' }">Card on surface with secondary text.</p>
-              <div class="flex gap-2">
-                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.primary }">Primary</button>
-                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.success || '#367E3A' }">Accent</button>
-                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.danger || '#EF4444' }">Danger</button>
-              </div>
-            </div>
-            <div class="flex gap-2">
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: colors.primary + '33', color: colors.primary, border: '1px solid ' + colors.primary + '55' }">Badge</span>
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: (colors.success || '#367E3A') + '33', color: colors.success || '#367E3A', border: '1px solid ' + (colors.success || '#367E3A') + '55' }">Success</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Light Preview -->
-        <div class="rounded-xl border border-subtle overflow-hidden">
-          <div class="px-4 py-2 bg-surface-alt">
-            <span class="text-xs font-bold text-secondary uppercase tracking-wider">Light Mode Preview</span>
-          </div>
-          <div class="p-6" :style="lightPreviewStyle()">
-            <h3 class="font-bold mb-1" :style="{ color: '#0f172a' }">Page Heading</h3>
-            <p class="text-sm mb-4" :style="{ color: '#334155' }">Body text on the page surface.</p>
-            <div class="rounded-lg p-4 mb-4" :style="lightSurfaceStyle()">
-              <p class="text-sm mb-3" :style="{ color: '#64748b' }">Card on surface with secondary text.</p>
-              <div class="flex gap-2">
-                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.primary }">Primary</button>
-                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.success || '#367E3A' }">Accent</button>
-                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.danger || '#EF4444' }">Danger</button>
-              </div>
-            </div>
-            <div class="flex gap-2">
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: colors.primary + '33', color: colors.primary, border: '1px solid ' + colors.primary + '55' }">Badge</span>
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: (colors.success || '#367E3A') + '33', color: colors.success || '#367E3A', border: '1px solid ' + (colors.success || '#367E3A') + '55' }">Success</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  <% end %>
-
-  <%# ── Styleguide ── %>
-  <div class="border-t border-subtle mt-12 pt-12 space-y-12">
-
-    <% if Studio.theme_logos.any? %>
-    <%# ── Logos ── %>
-    <section>
-      <h2 class="text-xl font-bold text-heading mb-4">Logos</h2>
-      <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-        <% Studio.theme_logos.each do |logo| %>
-          <% file = logo.is_a?(Hash) ? logo[:file] : logo %>
-          <% title = logo.is_a?(Hash) ? logo[:title] : file %>
-          <div class="card p-4 space-y-3">
-            <p class="label-upper"><%= title %></p>
-            <div class="flex items-center justify-center w-20 h-20 rounded-lg" style="background-color: #ddd; background-image: linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%), linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px;">
-              <img src="/<%= file %>" alt="<%= title %>" class="max-w-16 max-h-16 rounded">
-            </div>
-            <p class="text-muted text-xs font-mono"><%= file %></p>
-          </div>
-        <% end %>
-      </div>
-    </section>
-    <% end %>
-
-    <%# ── Semantic Tokens ── %>
-    <section>
-      <h2 class="text-xl font-bold text-heading mb-4">Semantic Tokens</h2>
-      <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
-        <%
-          semantic_colors = [
-            { name: "Page",           utility: "bg-page",         type: :bg },
-            { name: "Surface",        utility: "bg-surface",      type: :bg },
-            { name: "Surface Alt",    utility: "bg-surface-alt",  type: :bg },
-            { name: "Inset",          utility: "bg-inset",        type: :bg },
-            { name: "Heading",        utility: "text-heading",    type: :text },
-            { name: "Body",           utility: "text-body",       type: :text },
-            { name: "Secondary",      utility: "text-secondary",  type: :text },
-            { name: "Muted",          utility: "text-muted",      type: :text },
-            { name: "Border",         utility: "border-subtle",   type: :border },
-            { name: "Border Strong",  utility: "border-strong",   type: :border },
-          ]
-        %>
-        <% semantic_colors.each do |c| %>
-          <div class="card p-3 flex items-center gap-3">
-            <% if c[:type] == :bg %>
-              <div class="w-8 h-8 rounded-full border border-subtle shrink-0 <%= c[:utility] %>"></div>
-            <% elsif c[:type] == :text %>
-              <div class="w-8 h-8 rounded-full border border-subtle shrink-0 bg-surface flex items-center justify-center">
-                <span class="text-sm font-bold <%= c[:utility] %>">A</span>
-              </div>
-            <% else %>
-              <div class="w-8 h-8 rounded-full shrink-0 border-2 <%= c[:utility] %> bg-transparent"></div>
-            <% end %>
-            <div class="min-w-0">
-              <p class="text-heading text-sm font-semibold truncate"><%= c[:name] %></p>
-              <p class="text-muted text-xs font-mono truncate"><%= c[:utility] %></p>
-            </div>
-          </div>
-        <% end %>
-      </div>
-    </section>
-
-    <%# ── Typography ── %>
-    <section>
-      <h2 class="text-xl font-bold text-heading mb-4">Typography</h2>
-      <div class="card p-6 space-y-4">
-        <p class="text-heading text-3xl font-extrabold">Heading — Montserrat 800</p>
-        <p class="text-heading text-xl font-bold">Subheading — Montserrat 700</p>
-        <p class="text-body text-base">Body text — The quick brown fox jumps over the lazy dog. Montserrat 400</p>
-        <p class="text-secondary text-sm">Secondary text — Additional context and metadata. Montserrat 400</p>
-        <p class="text-muted text-xs">Muted text — Timestamps, hints, and fine print. Montserrat 400</p>
-        <hr class="border-subtle">
-        <div class="flex flex-wrap gap-4">
-          <% [400, 500, 600, 700, 800, 900].each do |w| %>
-            <span class="text-heading text-lg" style="font-weight: <%= w %>"><%= w %></span>
-          <% end %>
-        </div>
-      </div>
-    </section>
-
-    <%# ── Buttons ── %>
-    <section>
-      <h2 class="text-xl font-bold text-heading mb-4">Buttons</h2>
-      <div class="card p-6 space-y-6">
-        <div>
-          <p class="label-upper mb-3">Primary</p>
-          <div class="flex flex-wrap items-center gap-3">
-            <button type="button" class="btn btn-primary btn-sm">Small</button>
-            <button type="button" class="btn btn-primary">Medium</button>
-            <button type="button" class="btn btn-primary btn-lg">Large</button>
-          </div>
-        </div>
-        <div>
-          <p class="label-upper mb-3">Secondary</p>
-          <div class="flex flex-wrap items-center gap-3">
-            <button type="button" class="btn btn-secondary btn-sm">Small</button>
-            <button type="button" class="btn btn-secondary">Medium</button>
-            <button type="button" class="btn btn-secondary btn-lg">Large</button>
-          </div>
-        </div>
-        <div>
-          <p class="label-upper mb-3">Outline</p>
-          <div class="flex flex-wrap items-center gap-3">
-            <button type="button" class="btn btn-outline btn-sm">Small</button>
-            <button type="button" class="btn btn-outline">Medium</button>
-            <button type="button" class="btn btn-outline btn-lg">Large</button>
-          </div>
-        </div>
-        <div>
-          <p class="label-upper mb-3">Danger</p>
-          <div class="flex flex-wrap items-center gap-3">
-            <button type="button" class="btn btn-danger btn-sm">Small</button>
-            <button type="button" class="btn btn-danger">Medium</button>
-            <button type="button" class="btn btn-danger btn-lg">Large</button>
-          </div>
-        </div>
-        <div>
-          <p class="label-upper mb-3">Google</p>
-          <div class="flex flex-wrap items-center gap-3">
-            <button type="button" class="btn btn-google">Sign in with Google</button>
-          </div>
-        </div>
-        <div>
-          <p class="label-upper mb-3">Disabled</p>
-          <div class="flex flex-wrap items-center gap-3">
-            <button type="button" class="btn btn-primary" disabled>Primary</button>
-            <button type="button" class="btn btn-outline" disabled>Outline</button>
-            <button type="button" class="btn btn-danger" disabled>Danger</button>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <%# ── Components ── %>
-    <section>
-      <h2 class="text-xl font-bold text-heading mb-4">Components</h2>
-      <div class="space-y-6">
-        <div>
-          <p class="label-upper mb-3">Cards</p>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="card p-6">
-              <p class="text-heading font-semibold mb-1">.card</p>
-              <p class="text-secondary text-sm">Static card with surface background and subtle border.</p>
-            </div>
-            <div class="card-hover p-6">
-              <p class="text-heading font-semibold mb-1">.card-hover</p>
-              <p class="text-secondary text-sm">Interactive card — hover to see the border glow.</p>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <p class="label-upper mb-3">Badges</p>
-          <div class="flex flex-wrap gap-2">
-            <span class="badge bg-mint/10 text-mint border-mint/30">Mint</span>
-            <span class="badge bg-violet/10 text-violet border-violet/30">Violet</span>
-            <span class="badge bg-red-600/10 text-red-400 border-red-600/30">Red</span>
-            <span class="badge bg-yellow-500/10 text-yellow-400 border-yellow-500/30">Yellow</span>
-            <span class="badge bg-surface-alt text-secondary border-subtle">Gray</span>
-          </div>
-        </div>
-
-        <div>
-          <p class="label-upper mb-3">Input Field</p>
-          <div class="max-w-md">
-            <input type="text" class="input-field" placeholder="Placeholder text...">
-          </div>
-        </div>
-
-        <div>
-          <p class="label-upper mb-3">Empty State</p>
-          <div class="empty-state">
-            <p class="text-secondary">No items found.</p>
-            <p class="text-muted text-sm mt-1">Try adjusting your search or filters.</p>
-          </div>
-        </div>
-
-        <div>
-          <p class="label-upper mb-3">Label Upper</p>
-          <span class="label-upper">This is a .label-upper element</span>
-        </div>
-
-        <div>
-          <p class="label-upper mb-3">JSON Debug</p>
-          <div class="json-debug">
-            <pre class="text-mint text-sm font-mono"><%= JSON.pretty_generate({ id: 1, name: "Example", status: "active", created_at: Time.current.iso8601 }) %></pre>
-          </div>
-        </div>
-      </div>
-    </section>
-
-  </div>
-</div>