igniter 0.5.1 → 0.5.2

data/packages/igniter-frontend/lib/igniter/frontend/tailwind/surfaces.rb

@@ -1,1074 +0,0 @@
-# frozen_string_literal: true
-
-require "json"
-
-module Igniter
-  module Frontend
-    module Tailwind
-      module Surfaces
-        class Preset
-          attr_reader :name
-          attr_reader :theme_name
-          attr_reader :realtime_preset
-          attr_reader :components
-          attr_reader :hooks
-
-          def initialize(name:, theme_name:, realtime_preset: nil, components: [], hooks: {})
-            @name = name.to_sym
-            @theme_name = theme_name.to_sym
-            @realtime_preset = realtime_preset
-            @components = components.map(&:to_sym).freeze
-            @hooks = hooks.transform_keys(&:to_sym).freeze
-          end
-
-          def theme
-            Tailwind::UI::Theme.fetch(theme_name)
-          end
-
-          def render_head(head, config:)
-            realtime_preset&.render_head(head, config: config)
-          end
-
-          def metric_card(id:, label:, value:, hint: nil)
-            Tailwind::UI::MetricCard.new(
-              label: label,
-              value: value,
-              hint: hint,
-              wrapper_attributes: { data: { metric_id: id } },
-              value_attributes: { data: { metric_value: id } }
-            )
-          end
-
-          def panel(title:, subtitle: nil, &block)
-            theme.panel(title: title, subtitle: subtitle, &block)
-          end
-
-          def ops_hero_actions(view, endpoints:)
-            view.component(
-              Tailwind::UI::ActionBar.new(
-                class_name: theme.hero(:dashboard).fetch(:action_bar_class)
-              ) do |links|
-                endpoints.each do |endpoint|
-                  label = endpoint[:label] || endpoint["label"]
-                  path = endpoint[:path] || endpoint["path"]
-                  links.tag(:a,
-                            label,
-                            href: path,
-                            class: Tailwind::UI::Tokens.action(
-                              variant: :soft,
-                              theme: :amber,
-                              size: :sm,
-                              extra: "pill-link font-medium"
-                            ))
-                end
-              end
-            )
-          end
-
-          def operations_pulse(view, generated_at:, poll_interval_seconds:, charts:)
-            view.component(
-              theme.live_badge(
-                label: "Realtime overview",
-                value: generated_at,
-                interval_seconds: poll_interval_seconds
-              )
-            )
-            view.tag(:h3, "Device Status", class: theme.section_heading_class)
-            view.component(theme.bar_chart(items: normalize_chart_items(charts.fetch(:device_status)), chart_id: "device-status"))
-            view.tag(:h3, "Activity Mix", class: theme.section_heading_class)
-            view.component(theme.bar_chart(items: normalize_chart_items(charts.fetch(:activity_mix)), chart_id: "activity-mix"))
-            view.tag(:h3, "App Role Spread", class: theme.section_heading_class)
-            view.component(theme.bar_chart(items: normalize_chart_items(charts.fetch(:app_roles)), chart_id: "app-roles"))
-          end
-
-          def realtime_feed(view, stream_path:, events:, waiting_message: "Waiting for live events...")
-            view.tag(:p,
-                     "Stream source #{stream_path}",
-                     class: "#{theme.muted_text_class(extra: "muted")} mb-3",
-                     data: { realtime_stream_path: stream_path })
-            view.tag(:ul, **realtime_feed_attributes(item_class: theme.compact_card_class)) do |list|
-              if events.empty?
-                list.tag(:li, waiting_message, class: theme.compact_card_class)
-              else
-                events.each do |entry|
-                  list.tag(:li,
-                           "#{entry.fetch("title")} · #{entry.fetch("detail")}",
-                           class: theme.compact_card_class)
-                end
-              end
-            end
-          end
-
-          def chat_prompt_bar(view, prompts:)
-            view.tag(:div, class: "mb-5 flex flex-wrap gap-2") do |actions|
-              prompts.each do |prompt|
-                actions.tag(:button,
-                            prompt,
-                            type: "button",
-                            class: Tailwind::UI::Tokens.action(
-                              variant: :ghost,
-                              theme: :amber,
-                              size: :sm,
-                              extra: "justify-start text-left"
-                            ),
-                            data: { chat_prompt: prompt })
-              end
-            end
-          end
-
-          def activity_filter_bar(view, items:)
-            view.component(
-              Tailwind::UI::ActionBar.new(class_name: "hero-links mb-4 flex flex-wrap gap-3") do |links|
-                items.each do |item|
-                  links.tag(:a,
-                            item.fetch(:label),
-                            href: item.fetch(:href),
-                            class: item.fetch(:active) ? active_filter_class : filter_link_class)
-                end
-              end
-            )
-          end
-
-          def timeline_focus_actions(view, source_url:, clear_path:)
-            view.component(
-              Tailwind::UI::ActionBar.new(
-                tag: :p,
-                class_name: "mt-4 flex flex-wrap gap-3"
-              ) do |paragraph|
-                paragraph.tag(:a,
-                              "Open source API",
-                              href: source_url,
-                              class: Tailwind::UI::Tokens.action(variant: :soft, theme: :cyan, size: :sm))
-                paragraph.tag(:a,
-                              "Clear focus",
-                              href: clear_path,
-                              class: Tailwind::UI::Tokens.action(variant: :ghost, theme: :amber, size: :sm))
-              end
-            )
-          end
-
-          def device_inventory(view, devices:, empty_message:)
-            if devices.empty?
-              view.tag(:p, empty_message, class: theme.empty_state_class(extra: "empty-state"))
-              return
-            end
-
-            view.tag(:ul, class: theme.list_class, data: { device_list: "true" }) do |list|
-              devices.each do |device|
-                list.tag(:li,
-                         class: theme.list_item_class,
-                         **device_item_attributes(id: device.fetch(:id), status: device.fetch(:status))) do |item|
-                  item.tag(:strong, class: theme.item_title_class) do |heading|
-                    heading.tag(:a, device.fetch(:title), href: device.fetch(:href), class: ops_title_link_class)
-                  end
-                  item.tag(:div, device.fetch(:subtitle), class: theme.muted_text_class(extra: "muted"))
-                  item.tag(:code, device.fetch(:code), class: theme.code_class)
-                  item.tag(:div, class: "mt-3 flex flex-wrap items-center gap-2") do |meta|
-                    meta.component(
-                      Tailwind::UI::StatusBadge.new(
-                        label: device.fetch(:status),
-                        html_attributes: device_status_badge_attributes(device.fetch(:id))
-                      )
-                    )
-                    meta.tag(:span,
-                             device.fetch(:last_seen),
-                             class: theme.muted_text_class,
-                             **device_last_seen_attributes(device.fetch(:id)))
-                  end
-                  next unless device[:telemetry]
-
-                  item.tag(:div,
-                           device.fetch(:telemetry),
-                           class: "#{theme.muted_text_class(extra: "muted")} mt-2",
-                           **device_telemetry_attributes(device.fetch(:id)))
-                end
-              end
-            end
-          end
-
-          def devices_panel(devices:, empty_message:)
-            panel(
-              title: "Devices",
-              subtitle: "Declared device inventory and current route targets."
-            ) do |view|
-              device_inventory(view, devices: devices, empty_message: empty_message)
-            end
-          end
-
-          def notes_list(view, notes:, empty_message:)
-            view.tag(:ul, class: theme.list_class, **notes_list_attributes) do |list|
-              if notes.empty?
-                list.tag(:li, empty_message, class: theme.empty_state_class(extra: "empty-state"), data: { empty_state: "true" })
-              else
-                notes.each do |note|
-                  list.tag(:li, class: theme.list_item_class, data: { note_id: note.fetch(:id) }) do |item|
-                    item.tag(:strong, note.fetch(:title), class: theme.item_title_class)
-                    item.tag(:div, note.fetch(:meta), class: "#{theme.muted_text_class(extra: "muted")} mt-2")
-                  end
-                end
-              end
-            end
-          end
-
-          def notes_panel(notes:, empty_message:, error_message: nil, &block)
-            panel(
-              title: "Shared Notes",
-              subtitle: "Fast operator scratchpad shared between main and dashboard."
-            ) do |view|
-              if error_message
-                view.tag(:p,
-                         error_message,
-                         class: "error-banner mb-4 rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100")
-              end
-              block&.call(view)
-              notes_list(view, notes: notes, empty_message: empty_message)
-            end
-          end
-
-          def chat_transcript(view, messages:, empty_message:)
-            view.tag(:ul, class: theme.list_class, **chat_list_attributes) do |list|
-              if messages.empty?
-                list.tag(:li, empty_message, class: theme.empty_state_class(extra: "empty-state"), data: { empty_state: "true" })
-              else
-                messages.each do |message|
-                  list.tag(:li, class: theme.list_item_class, data: { chat_turn_id: message.fetch(:id, "") }) do |item|
-                    item.tag(:div, class: "flex flex-wrap items-center gap-2") do |meta|
-                      meta.component(Tailwind::UI::StatusBadge.new(label: message.fetch(:role)))
-                      meta.tag(:span, message.fetch(:meta), class: theme.muted_text_class)
-                    end
-                    item.tag(:div, message.fetch(:body), class: theme.body_text_class(extra: "mt-3 whitespace-pre-wrap"))
-                    render_chat_action_card(item, message[:action]) if message[:action]
-                  end
-                end
-              end
-            end
-          end
-
-          def chat_action_memory(view, queue:, history:)
-            return if queue.empty? && history.empty?
-
-            unless queue.empty?
-              view.tag(:h3, "Action Queue", class: theme.section_heading_class)
-              view.tag(:ul, class: theme.compact_list_class, data: { action_queue: "true" }) do |list|
-                queue.each do |entry|
-                  list.tag(:li, class: "list-none", data: { action_key: entry.fetch(:action_key) }) do |item|
-                    render_chat_action_card(item, entry, compact: true)
-                  end
-                end
-              end
-            end
-
-            return if history.empty?
-
-            view.tag(:h3, "Recent Action Outcomes", class: theme.section_heading_class(extra: "mt-4"))
-            view.tag(:ul, class: theme.compact_list_class, data: { action_history: "true" }) do |list|
-              history.each do |entry|
-                list.tag(:li, class: "list-none", data: { action_key: entry.fetch(:action_key) }) do |item|
-                  render_chat_action_card(item, entry, compact: true)
-                end
-              end
-            end
-          end
-
-          def chat_panel(messages:, prompts:, empty_message:, error_message: nil, action_queue: [], action_history: [], &block)
-            panel(
-              title: "Igniter Chat",
-              subtitle: "Thin operator chat loop over the current home-lab snapshot."
-            ) do |view|
-              if error_message
-                view.tag(:p,
-                         error_message,
-                         class: "mb-4 rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100")
-              end
-              block&.call(view)
-              chat_prompt_bar(view, prompts: prompts)
-              chat_action_memory(view, queue: action_queue, history: action_history)
-              chat_transcript(view, messages: messages, empty_message: empty_message)
-            end
-          end
-
-          def camera_events_list(view, events:, empty_message:)
-            view.tag(:ul, class: theme.list_class, **camera_events_list_attributes) do |list|
-              if events.empty?
-                list.tag(:li, empty_message, class: theme.empty_state_class(extra: "empty-state"), data: { empty_state: "true" })
-              else
-                events.each do |event|
-                  list.tag(:li, class: theme.list_item_class, data: { camera_event_id: event.fetch(:id) }) do |item|
-                    item.tag(:strong, event.fetch(:title), class: theme.item_title_class)
-                    item.tag(:div, event.fetch(:meta), class: "#{theme.muted_text_class(extra: "muted")} mt-2")
-                    item.tag(:div, event.fetch(:body), class: theme.body_text_class(extra: "mt-2 text-stone-200"))
-                  end
-                end
-              end
-            end
-          end
-
-          def camera_events_panel(events:, empty_message:)
-            panel(
-              title: "Recent Camera Events",
-              subtitle: "Thin edge-ingest slice for ESP32-CAM style traffic."
-            ) do |view|
-              camera_events_list(view, events: events, empty_message: empty_message)
-            end
-          end
-
-          def activity_timeline(view, items:, empty_message:)
-            view.tag(:ul, class: theme.list_class, **activity_timeline_attributes) do |list|
-              if items.empty?
-                list.tag(:li, empty_message, class: theme.empty_state_class(extra: "empty-state"), data: { empty_state: "true" })
-              else
-                items.each do |entry|
-                  list.tag(:li,
-                           class: theme.list_item_class,
-                           data: { timeline_entry_id: entry.fetch(:id), timeline_entry_type: entry.fetch(:type) }) do |item|
-                    item.tag(:strong, class: theme.item_title_class) do |heading|
-                      heading.tag(:a, entry.fetch(:title), href: entry.fetch(:href), class: ops_title_link_class)
-                    end
-                    item.tag(:div, entry.fetch(:detail), class: "#{theme.muted_text_class(extra: "muted")} mt-2")
-                    item.tag(:div, entry.fetch(:age), class: "#{theme.muted_text_class(extra: "muted")} mt-2")
-                    next unless entry[:source_url]
-
-                    item.tag(:a,
-                             "open source",
-                             href: entry.fetch(:source_url),
-                             class: Tailwind::UI::Tokens.underline_link(theme: :amber, extra: "mt-3 inline-flex text-sm"))
-                  end
-                end
-              end
-            end
-          end
-
-          def timeline_panel(filter_items:, items:, empty_message:)
-            panel(
-              title: "Activity Timeline",
-              subtitle: "Merged recent notes, camera events, and device heartbeats."
-            ) do |view|
-              activity_filter_bar(view, items: filter_items)
-              activity_timeline(view, items: items, empty_message: empty_message)
-            end
-          end
-
-          def timeline_focus_panel(entry:, clear_path:, empty_message: "No focused item.")
-            panel(
-              title: "Timeline Focus",
-              subtitle: "Drilldown into the currently selected timeline item."
-            ) do |view|
-              unless entry
-                view.tag(:p, empty_message, class: theme.empty_state_class(extra: "empty-state"))
-                next
-              end
-
-              view.tag(:p, class: "flex flex-wrap items-center gap-2") do |paragraph|
-                paragraph.component(Tailwind::UI::StatusBadge.new(label: entry.fetch(:type)))
-                paragraph.tag(:span, entry.fetch(:title), class: theme.section_heading_class(extra: "mt-0 text-stone-200"))
-              end
-              view.tag(:p, entry.fetch(:detail), class: "#{theme.muted_text_class(extra: "muted")} mt-3")
-              view.tag(:p, "seen=#{entry.fetch(:seen)}", class: "#{theme.muted_text_class(extra: "muted")} mt-2")
-              timeline_focus_actions(view, source_url: entry.fetch(:source_url), clear_path: clear_path)
-            end
-          end
-
-          def health_readiness_panel(surfaces:, empty_message:)
-            panel(
-              title: "Health & Readiness",
-              subtitle: "Declared health surfaces for the currently modelled app stack."
-            ) do |view|
-              if surfaces.empty?
-                view.tag(:p, empty_message, class: theme.empty_state_class(extra: "empty-state"))
-                next
-              end
-
-              view.tag(:ul, class: theme.list_class) do |list|
-                surfaces.each do |surface|
-                  list.tag(:li, class: theme.list_item_class) do |item|
-                    item.tag(:strong, surface.fetch(:title), class: theme.item_title_class)
-                    item.tag(:div, class: "mt-3 flex flex-wrap items-center gap-2") do |meta|
-                      meta.component(Tailwind::UI::StatusBadge.new(label: surface.fetch(:status)))
-                      meta.tag(:span, surface.fetch(:meta), class: theme.muted_text_class)
-                    end
-                    next unless surface[:url]
-
-                    item.tag(:a,
-                             surface.fetch(:url),
-                             href: surface.fetch(:url),
-                             class: Tailwind::UI::Tokens.underline_link(theme: :amber, extra: "mt-3 inline-flex text-sm"))
-                  end
-                end
-              end
-            end
-          end
-
-          def topology_health_panel(health:)
-            panel(
-              title: "Topology Health",
-              subtitle: "High-level health verdict across devices and app surfaces."
-            ) do |view|
-              view.tag(:p, class: "flex flex-wrap items-center gap-2") do |paragraph|
-                paragraph.tag(:span, "overall=", class: theme.muted_text_class)
-                paragraph.component(
-                  Tailwind::UI::StatusBadge.new(
-                    label: health.fetch(:overall_status),
-                    html_attributes: topology_overall_status_attributes
-                  )
-                )
-              end
-              view.tag(:p, health.fetch(:readiness_summary), class: "#{theme.muted_text_class(extra: "muted")} mt-3")
-              if health[:acknowledgement_summary]
-                view.tag(:p,
-                         health.fetch(:acknowledgement_summary),
-                         class: "#{theme.muted_text_class(extra: "muted")} mt-2",
-                         data: { topology_health_acknowledged: "true" })
-              end
-
-              view.tag(:ul, class: theme.compact_list_class) do |list|
-                health.fetch(:device_status_counts).each do |entry|
-                  list.tag(:li,
-                           entry.fetch(:label),
-                           class: theme.compact_item_class,
-                           **topology_device_count_attributes(entry.fetch(:status)))
-                end
-              end
-
-              alerts = health.fetch(:alerts)
-              next if alerts.empty?
-
-              view.tag(:h3, "Alerts", class: theme.section_heading_class)
-              view.tag(:ul, class: theme.compact_list_class) do |list|
-                alerts.each { |alert| list.tag(:li, alert, class: theme.compact_item_class) }
-              end
-            end
-          end
-
-          def network_topology_panel(topology_notes:, public_endpoints:, dependency_edges:)
-            panel(
-              title: "Network & Topology",
-              subtitle: "Ports, public endpoints, app edges, and topology notes."
-            ) do |view|
-              unless topology_notes.empty?
-                view.tag(:h3, "Topology Notes", class: theme.section_heading_class)
-                view.tag(:ul, class: theme.compact_list_class) do |list|
-                  topology_notes.each { |note| list.tag(:li, note, class: theme.compact_item_class) }
-                end
-              end
-
-              view.tag(:h3, "Public Endpoints", class: theme.section_heading_class)
-              view.component(
-                theme.endpoint_list(
-                  items: public_endpoints,
-                  compact: true,
-                  empty_message: "No public endpoints configured.",
-                  link_class: Tailwind::UI::Tokens.underline_link(theme: :amber, extra: "text-sm")
-                )
-              )
-
-              view.tag(:h3, "App Edges", class: theme.section_heading_class)
-              if dependency_edges.empty?
-                view.tag(:p, "No inter-app dependencies yet.", class: theme.empty_state_class(extra: "empty-state"))
-              else
-                view.tag(:ul, class: theme.compact_list_class) do |list|
-                  dependency_edges.each { |edge| list.tag(:li, edge, class: theme.compact_item_class) }
-                end
-              end
-            end
-          end
-
-          def app_services_panel(services:, empty_message:)
-            panel(
-              title: "App Services",
-              subtitle: "Runtime-facing app roles, classes, commands, and dependencies."
-            ) do |view|
-              if services.empty?
-                view.tag(:p, empty_message, class: theme.empty_state_class(extra: "empty-state"))
-                next
-              end
-
-              view.tag(:ul, class: theme.list_class) do |list|
-                services.each do |service|
-                  list.tag(:li, class: theme.list_item_class) do |item|
-                    item.tag(:strong, class: theme.item_title_class) do |heading|
-                      heading.tag(:a, service.fetch(:title), href: service.fetch(:href), class: ops_title_link_class)
-                    end
-                    item.tag(:div, service.fetch(:meta), class: "#{theme.muted_text_class(extra: "muted")} mt-2")
-                    item.tag(:code, service.fetch(:class_name), class: "#{theme.code_class} mt-2 block")
-                    item.tag(:code, service.fetch(:command), class: "#{theme.code_class} mt-2 block")
-                    item.tag(:div, service.fetch(:path), class: "#{theme.muted_text_class(extra: "muted")} mt-2") if service[:path]
-                    item.tag(:div, service.fetch(:depends_on), class: "#{theme.muted_text_class(extra: "muted")} mt-2") if service[:depends_on]
-                  end
-                end
-              end
-            end
-          end
-
-          def resources_panel(stores:, var_files:, total_var_bytes:)
-            panel(
-              title: "Resources",
-              subtitle: "Current workspace stores and local var files."
-            ) do |view|
-              view.tag(:h3, "Stores", class: theme.section_heading_class)
-              view.component(theme.resource_list(items: stores, compact: true))
-
-              view.tag(:h3, "Var Files", class: theme.section_heading_class)
-              view.component(
-                theme.resource_list(
-                  items: var_files,
-                  compact: true,
-                  empty_message: "No var files yet."
-                )
-              )
-
-              view.tag(:p, "total_var_bytes=#{total_var_bytes}", class: "#{theme.muted_text_class(extra: "muted")} mt-3")
-            end
-          end
-
-          def debug_surfaces_panel(api_items:, files:, commands:)
-            panel(
-              title: "Debug Surfaces",
-              subtitle: "Useful entrypoints, file anchors, and local commands."
-            ) do |view|
-              view.tag(:h3, "APIs", class: theme.section_heading_class)
-              view.component(
-                theme.endpoint_list(
-                  items: api_items,
-                  compact: true,
-                  link_class: Tailwind::UI::Tokens.underline_link(theme: :amber, extra: "text-sm")
-                )
-              )
-
-              view.tag(:h3, "Files", class: theme.section_heading_class)
-              compact_code_list(view, files)
-
-              view.tag(:h3, "Commands", class: theme.section_heading_class)
-              compact_code_list(view, commands)
-            end
-          end
-
-          def next_ideas_panel(ideas:, empty_message:)
-            panel(
-              title: "Next Ideas",
-              subtitle: "Likely next slices once this proving surface feels stable."
-            ) do |view|
-              if ideas.empty?
-                view.tag(:p, empty_message, class: theme.empty_state_class(extra: "empty-state"))
-              else
-                view.tag(:ul, class: theme.compact_list_class) do |list|
-                  ideas.each { |idea| list.tag(:li, idea, class: theme.compact_item_class) }
-                end
-              end
-            end
-          end
-
-          def topology_flow_panel(diagram:, title: "Topology Mermaid", description: "Devices flow into edge, and app dependencies are overlaid as dotted links.")
-            panel(
-              title: "Topology Flow",
-              subtitle: "Mermaid view of devices, routes, and inter-app dependencies."
-            ) do |view|
-              view.component(
-                theme.mermaid_diagram(
-                  diagram: diagram,
-                  title: title,
-                  description: description
-                )
-              )
-            end
-          end
-
-          def execution_flow_panel(diagram:, title: "Execution Mermaid", description: "Ingest and operator actions converge into shared stores and the stack overview loop.")
-            panel(
-              title: "Execution Flow",
-              subtitle: "Mermaid view of ingest, shared stores, stack overview, and dashboard loop."
-            ) do |view|
-              view.component(
-                theme.mermaid_diagram(
-                  diagram: diagram,
-                  title: title,
-                  description: description
-                )
-              )
-            end
-          end
-
-          def form_section(title:, subtitle:, action:, method: "post", **options, &block)
-            theme.form_section(title: title, subtitle: subtitle, action: action, method: method, **options, &block)
-          end
-
-          def authoring_catalog_panel(&block)
-            panel(
-              title: "View Schemas",
-              subtitle: "Catalog browser and lightweight authoring surface for persisted schemas.",
-              &block
-            )
-          end
-
-          def schema_create_form_section(**options, &block)
-            form_section(
-              title: "Create Schema",
-              subtitle: "Post a full schema payload directly to the catalog API.",
-              action: "#",
-              **options,
-              &block
-            )
-          end
-
-          def schema_patch_form_section(**options, &block)
-            form_section(
-              title: "Patch Schema",
-              subtitle: "Load an existing schema, edit a JSON patch, then apply it through the catalog API.",
-              action: "#",
-              **options,
-              &block
-            )
-          end
-
-          def recent_submissions_panel(&block)
-            panel(
-              title: "Recent Submissions",
-              subtitle: "Latest schema runtime outputs flowing back into the operator surface.",
-              &block
-            )
-          end
-
-          def submission_summary_panel(&block)
-            panel(
-              title: "Summary",
-              subtitle: "Runtime-level context for this schema submission.",
-              &block
-            )
-          end
-
-          def submission_replay_panel(&block)
-            panel(
-              title: "Replay",
-              subtitle: "Replay the stored raw payload back into the originating schema action.",
-              &block
-            )
-          end
-
-          def submission_payload_panel(kind, &block)
-            case kind.to_sym
-            when :raw
-              panel(
-                title: "Raw Payload",
-                subtitle: "Original form values as they were submitted.",
-                &block
-              )
-            when :normalized
-              panel(
-                title: "Normalized Payload",
-                subtitle: "Payload after schema normalization and type coercion.",
-                &block
-              )
-            when :processing_result
-              panel(
-                title: "Processing Result",
-                subtitle: "Runtime result captured after submission processing.",
-                &block
-              )
-            else
-              raise ArgumentError, "unsupported submission payload panel kind: #{kind}"
-            end
-          end
-
-          def submission_diff_panel(&block)
-            panel(
-              title: "Normalization Diff",
-              subtitle: "Field-level view of what changed between raw and normalized payloads.",
-              &block
-            )
-          end
-
-          def schema_catalog_intro(view, description:, catalog_path:, featured_view_path:, featured_view_label:)
-            view.tag(:div, class: "space-y-4") do |container|
-              container.tag(:p, description, class: theme.body_text_class)
-              container.component(
-                Tailwind::UI::ActionBar.new(class_name: "flex flex-wrap gap-2") do |actions|
-                  actions.tag(:a,
-                              "Catalog JSON",
-                              href: catalog_path,
-                              class: Tailwind::UI::Tokens.action(variant: :soft, theme: :orange, size: :sm))
-                  actions.tag(:a,
-                              featured_view_label,
-                              href: featured_view_path,
-                              class: Tailwind::UI::Tokens.action(variant: :ghost, theme: :orange, size: :sm))
-                end
-              )
-            end
-          end
-
-          def schema_catalog_list(view, items:, empty_message:)
-            if items.empty?
-              view.tag(:p, empty_message, class: theme.empty_state_class)
-              return
-            end
-
-            view.tag(:ul, class: theme.list_class) do |list|
-              items.each do |item|
-                list.tag(:li, class: theme.list_item_class) do |card|
-                  card.tag(:strong, item.fetch(:title), class: theme.item_title_class)
-                  card.tag(:div, item.fetch(:id), class: theme.muted_text_class(extra: "mt-2"))
-                  card.tag(:div, item.fetch(:meta), class: theme.muted_text_class(extra: "mt-2"))
-                  card.component(
-                    Tailwind::UI::ActionBar.new(class_name: "mt-3 flex flex-wrap gap-2") do |actions|
-                      actions.tag(:a,
-                                  "Open view",
-                                  href: item.fetch(:view_path),
-                                  class: Tailwind::UI::Tokens.action(variant: :soft, theme: :orange, size: :sm))
-                      actions.tag(:a,
-                                  "JSON",
-                                  href: item.fetch(:api_path),
-                                  class: Tailwind::UI::Tokens.action(variant: :ghost, theme: :orange, size: :sm))
-                      actions.tag(:button,
-                                  item.fetch(:load_label, "Load JSON"),
-                                  type: "button",
-                                  class: Tailwind::UI::Tokens.action(variant: :ghost, theme: :orange, size: :sm),
-                                  onclick: item.fetch(:load_action))
-                      actions.tag(:button,
-                                  item.fetch(:clone_label, "Clone"),
-                                  type: "button",
-                                  class: Tailwind::UI::Tokens.action(variant: :ghost, theme: :orange, size: :sm),
-                                  onclick: item.fetch(:clone_action))
-                    end
-                  )
-                end
-              end
-            end
-          end
-
-          def schema_catalog_grid_class
-            "grid gap-5 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]"
-          end
-
-          def submission_timeline(view, description:, items:, empty_message:)
-            view.tag(:div, class: "space-y-4") do |container|
-              container.tag(:p, description, class: theme.body_text_class)
-              container.component(
-                theme.timeline_list(
-                  items: items,
-                  empty_message: empty_message,
-                  title_link_class: Tailwind::UI::Tokens.underline_link(theme: :orange),
-                  action_link_class: Tailwind::UI::Tokens.action(variant: :ghost, theme: :orange, size: :sm)
-                )
-              )
-            end
-          end
-
-          def submission_replay_actions(view, source_view_path:, schema_path:)
-            view.component(
-              Tailwind::UI::ActionBar.new(class_name: "flex flex-wrap gap-2") do |bar|
-                bar.tag(:a,
-                        "Open submission source view",
-                        href: source_view_path,
-                        class: Tailwind::UI::Tokens.action(variant: :soft, theme: :orange, size: :sm))
-                bar.tag(:a,
-                        "Open schema JSON",
-                        href: schema_path,
-                        class: Tailwind::UI::Tokens.action(variant: :ghost, theme: :orange, size: :sm))
-              end
-            )
-          end
-
-          def submission_json_payload(view, payload)
-            view.tag(:pre, class: "#{theme.code_class} overflow-x-auto whitespace-pre-wrap") do |pre|
-              pre.text(JSON.pretty_generate(payload))
-            end
-          end
-
-          def submission_detail_grid_class
-            "grid gap-5 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]"
-          end
-
-          def realtime_feed_attributes(item_class: theme.compact_card_class)
-            {
-              class: theme.compact_list_class,
-              data: {
-                realtime_feed: "true",
-                item_class: item_class
-              }
-            }
-          end
-
-          def notes_list_attributes
-            { data: { notes_list: "true" } }
-          end
-
-          def chat_list_attributes
-            { data: { chat_list: "true" } }
-          end
-
-          def camera_events_list_attributes
-            { data: { camera_events_list: "true" } }
-          end
-
-          def activity_timeline_attributes
-            { data: { activity_timeline: "true" } }
-          end
-
-          def device_item_attributes(id:, status:)
-            { data: { device_id: id.to_s, device_status: status.to_s } }
-          end
-
-          def device_status_badge_attributes(id)
-            { "data-device-status-badge": id.to_s }
-          end
-
-          def device_last_seen_attributes(id)
-            { data: { device_last_seen: id.to_s } }
-          end
-
-          def device_telemetry_attributes(id)
-            { data: { device_telemetry: id.to_s } }
-          end
-
-          def topology_overall_status_attributes
-            { "data-topology-overall-status": "true" }
-          end
-
-          def topology_device_count_attributes(status)
-            { data: { topology_device_count: status.to_s } }
-          end
-
-          private
-
-          def filter_link_class
-            Tailwind::UI::Tokens.action(variant: :ghost, theme: :amber, size: :sm, extra: "pill-link")
-          end
-
-          def active_filter_class
-            Tailwind::UI::Tokens.action(
-              variant: :primary,
-              theme: :amber,
-              size: :sm,
-              extra: "pill-link active-pill font-medium"
-            )
-          end
-
-          def normalize_chart_items(items)
-            items.map do |item|
-              {
-                key: item[:key] || item["key"],
-                label: item[:label] || item["label"],
-                value: item[:value] || item["value"]
-              }.compact
-            end
-          end
-
-          def ops_title_link_class
-            "transition hover:text-amber-200"
-          end
-
-          def compact_code_list(view, values)
-            view.tag(:ul, class: theme.compact_list_class) do |list|
-              values.each do |value|
-                list.tag(:li, class: theme.compact_card_class) { |item| item.tag(:code, value, class: theme.code_class) }
-              end
-            end
-          end
-
-          def render_chat_action_card(view, action, compact: false)
-            view.tag(
-              :div,
-              class: chat_action_card_class(action.fetch(:status), compact: compact),
-              data: { action_status: normalized_action_status(action.fetch(:status)) }
-            ) do |card|
-              card.tag(:div, class: "flex flex-wrap items-center gap-2") do |meta|
-                meta.tag(:strong, action.fetch(:title), class: theme.item_title_class)
-                meta.component(
-                  Tailwind::UI::StatusBadge.new(
-                    label: action.fetch(:status),
-                    tone: chat_action_status_tone(action.fetch(:status)),
-                    html_attributes: { data: { action_status_badge: normalized_action_status(action.fetch(:status)) } }
-                  )
-                )
-              end
-              card.tag(:p, action.fetch(:preview), class: theme.body_text_class(extra: compact ? "mt-2" : "mt-3"))
-              card.tag(:p, action.fetch(:meta), class: theme.muted_text_class(extra: "mt-2")) if action[:meta]
-              render_chat_action_details(card, action[:details])
-              render_chat_action_payload(card, action[:payload], status: action.fetch(:status))
-
-              render_chat_action_card_actions(card, action)
-            end
-          end
-
-          def render_chat_action_card_actions(view, action)
-            actions = []
-            actions << action[:confirm] if action[:confirm]
-            actions << action[:dismiss] if action[:dismiss]
-            return if actions.empty?
-
-            view.tag(:div, class: "mt-4 flex flex-wrap gap-3") do |row|
-              actions.each do |entry|
-                row.form(action: entry.fetch(:path), method: entry.fetch(:method, "post"), class: "inline-flex") do |form|
-                  entry.fetch(:hidden, {}).each { |name, value| form.hidden(name, value) }
-                  form.submit(entry.fetch(:label), class: entry.fetch(:class_name))
-                end
-              end
-            end
-          end
-
-          def render_chat_action_details(view, details)
-            items = Array(details).compact
-            return if items.empty?
-
-            view.tag(:dl, class: "mt-3 grid gap-2 text-sm", data: { action_details: "true" }) do |list|
-              items.each do |detail|
-                next if detail[:value].to_s.strip.empty?
-
-                list.tag(:div, class: "grid gap-1 rounded-2xl border border-white/10 bg-black/10 px-3 py-2") do |row|
-                  row.tag(:dt, detail.fetch(:label), class: "text-[11px] font-semibold uppercase tracking-[0.18em] text-stone-400")
-                  row.tag(:dd, detail.fetch(:value), class: theme.body_text_class)
-                end
-              end
-            end
-          end
-
-          def render_chat_action_payload(view, payload, status:)
-            data = payload.is_a?(Hash) ? payload : nil
-            return if data.nil? || data.empty?
-
-            label = normalized_action_status(status) == "confirmation_required" ? "Proposed Payload" : "Result Payload"
-            view.tag(:div, class: "mt-3", data: { action_payload: "true" }) do |section|
-              section.tag(:p, label, class: "text-[11px] font-semibold uppercase tracking-[0.18em] text-stone-400")
-              section.tag(:pre, class: "#{theme.code_class} mt-2 overflow-x-auto whitespace-pre-wrap") do |code|
-                code.text(JSON.pretty_generate(data))
-              end
-            end
-          end
-
-          def chat_action_card_class(status, compact:)
-            base = compact ? "rounded-2xl border p-4" : "mt-4 rounded-2xl border p-4"
-            [base, chat_action_card_tone_class(status)].join(" ")
-          end
-
-          def chat_action_card_tone_class(status)
-            case normalized_action_status(status)
-            when "confirmation_required"
-              "border-amber-300/25 bg-amber-300/10"
-            when "completed"
-              "border-emerald-300/25 bg-emerald-300/10"
-            when "dismissed"
-              "border-stone-300/15 bg-stone-400/5"
-            when "unavailable"
-              "border-rose-300/25 bg-rose-300/10"
-            else
-              "border-white/10 bg-white/5"
-            end
-          end
-
-          def chat_action_status_tone(status)
-            case normalized_action_status(status)
-            when "confirmation_required"
-              "border-amber-300/30 bg-amber-300/10 text-amber-100"
-            when "completed"
-              "border-emerald-300/30 bg-emerald-300/10 text-emerald-100"
-            when "dismissed"
-              "border-stone-300/20 bg-stone-400/10 text-stone-200"
-            when "unavailable"
-              "border-rose-300/30 bg-rose-300/10 text-rose-100"
-            else
-              "border-cyan-300/30 bg-cyan-300/10 text-cyan-100"
-            end
-          end
-
-          def normalized_action_status(status)
-            status.to_s.strip.downcase.tr(" ", "_")
-          end
-        end
-
-        module_function
-
-        def ops_dashboard
-          theme = Tailwind::UI::Theme.fetch(:ops)
-          Preset.new(
-            name: :ops_dashboard,
-            theme_name: :ops,
-            realtime_preset: Tailwind::Realtime::Presets.home_ops(theme: theme),
-            components: %i[
-              metric_card
-              panel
-              live_badge
-              bar_chart
-              mermaid_diagram
-              status_badge
-              endpoint_list
-              timeline_list
-              ops_hero_actions
-              operations_pulse
-              realtime_feed
-              chat_prompt_bar
-              activity_filter_bar
-              timeline_focus_actions
-              device_inventory
-              notes_list
-              chat_transcript
-              camera_events_list
-              activity_timeline
-              devices_panel
-              notes_panel
-              chat_panel
-              camera_events_panel
-              timeline_panel
-              timeline_focus_panel
-              health_readiness_panel
-              topology_health_panel
-              network_topology_panel
-              app_services_panel
-              resources_panel
-              debug_surfaces_panel
-              next_ideas_panel
-              topology_flow_panel
-              execution_flow_panel
-            ],
-            hooks: {
-              metrics: %w[apps public-apps devices devices-online heartbeats notes chat-turns camera-events motion-events],
-              lists: %w[notes chat camera_events activity_timeline],
-              device_presence: %w[device_id device_status device_last_seen device_telemetry],
-              topology_health: %w[topology_overall_status topology_device_count],
-              realtime_feed: "realtime_feed"
-            }
-          )
-        end
-
-        def schema_authoring
-          Preset.new(
-            name: :schema_authoring,
-            theme_name: :companion,
-            components: %i[
-              panel
-              form_section
-              banner
-              key_value_list
-              action_bar
-              message_page
-              schema_catalog
-              submission_timeline
-            ],
-            hooks: {
-              catalog: %w[view_schema_catalog schema_json_link schema_editor],
-              submissions: %w[submission_browser submission_detail_link]
-            }
-          )
-        end
-
-        def submission_inspection
-          Preset.new(
-            name: :submission_inspection,
-            theme_name: :companion,
-            components: %i[
-              payload_diff
-              key_value_list
-              panel
-              message_page
-              action_bar
-              code_block
-              submission_replay_actions
-              submission_json_payload
-            ],
-            hooks: {
-              payloads: %w[raw_payload normalized_payload processing_result],
-              diffs: %w[payload_diff normalization_diff]
-            }
-          )
-        end
-      end
-    end
-  end
-end