studio-engine 0.4.1

data/app/models/theme_setting.rb

@@ -0,0 +1,30 @@
+class ThemeSetting < ApplicationRecord
+  include Sluggable
+
+  ROLES = %i[primary dark light success warning danger accent].freeze
+
+  # Map DB columns (accent1/accent2) to role names (success/accent)
+  def self.db_column_for(role)
+    { success: :accent1, accent: :accent2 }[role] || role
+  end
+
+  validates :app_name, presence: true, uniqueness: true
+
+  # Returns the ThemeSetting for the current app, or a new unsaved instance.
+  def self.current
+    find_by(app_name: Studio.app_name) || new(app_name: Studio.app_name)
+  end
+
+  # Merged colors: DB values override Studio.theme_config defaults.
+  def resolved_colors
+    defaults = Studio.theme_config
+    ROLES.each_with_object({}) do |role, hash|
+      db_val = read_attribute(self.class.db_column_for(role))
+      hash[role] = db_val.presence || defaults[role]
+    end.compact
+  end
+
+  def name_slug
+    "theme-#{app_name.parameterize}"
+  end
+end

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

@@ -0,0 +1,14 @@
+<div x-data="{ open: false }" class="relative leading-none">
+  <button @click="open = !open" class="flex text-secondary hover:text-heading transition" title="Admin">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    </svg>
+  </button>
+
+  <div x-show="open" x-cloak @click.outside="open = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute right-0 mt-2 w-44 bg-surface border border-subtle rounded-lg shadow-lg z-50 py-1">
+    <a href="/admin/theme" class="block px-4 py-2 text-sm text-body hover:text-heading hover:bg-surface-alt transition">Theme</a>
+    <a href="/admin/navbar" class="block px-4 py-2 text-sm text-body hover:text-heading hover:bg-surface-alt transition">Navbar</a>
+    <a href="/error_logs" class="block px-4 py-2 text-sm text-body hover:text-heading hover:bg-surface-alt transition">Error Logs</a>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+<%# Avatar partial — shows attached image or colored initials circle
+    Locals: user (required), size: "sm" | "md" (default) | "lg" %>
+<% size ||= "md" %>
+<% size_classes = { "sm" => "w-6 h-6 text-xs", "nav" => "w-8 h-8 text-xs", "md" => "w-10 h-10 text-sm", "lg" => "w-14 h-14 text-lg" }[size] %>
+
+<% if user.avatar.attached? %>
+  <%= image_tag user.avatar, class: "#{size_classes.split.first(2).join(' ')} rounded-full object-cover", alt: user.display_name %>
+<% else %>
+  <div class="<%= size_classes %> rounded-full flex items-center justify-center font-bold text-white"
+       style="background-color: <%= user.avatar_color %>">
+    <%= user.avatar_initials %>
+  </div>
+<% end %>

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

@@ -0,0 +1,135 @@
+<%# locals: (form_field_name: "user[avatar]") %>
+<%# Self-contained avatar cropper: Cropper.js CDN + Alpine.js component %>
+<%# Output: sets a cropped 256x256 PNG File on the hidden file input for standard Rails upload %>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
+
+<div x-data="avatarCropper()" class="space-y-3">
+  <%# Hidden file input that receives the cropped file %>
+  <input type="file" name="<%= form_field_name %>" x-ref="hiddenFileInput" class="hidden">
+
+  <%# Preview + pick button %>
+  <div class="flex items-center gap-4">
+    <div class="relative w-16 h-16 rounded-full overflow-hidden bg-surface-alt border-2 border-subtle flex-shrink-0">
+      <template x-if="croppedUrl">
+        <img :src="croppedUrl" class="w-full h-full object-cover">
+      </template>
+      <template x-if="!croppedUrl">
+        <div class="w-full h-full flex items-center justify-center text-muted">
+          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+          </svg>
+        </div>
+      </template>
+    </div>
+    <button type="button" @click="$refs.filePicker.click()"
+            class="btn btn-outline btn-sm">
+      <span x-text="croppedUrl ? 'Change Photo' : 'Upload Photo'"></span>
+    </button>
+    <template x-if="croppedUrl">
+      <button type="button" @click="removePhoto()" class="text-muted hover:text-danger text-xs transition">Remove</button>
+    </template>
+  </div>
+
+  <%# Invisible file picker %>
+  <input type="file" x-ref="filePicker" @change="onFileSelected($event)" accept="image/*" class="hidden">
+
+  <%# Crop overlay %>
+  <template x-if="showCropModal">
+    <div class="fixed inset-0 z-[110] flex items-center justify-center" @keydown.escape.window="cancelCrop()">
+      <div class="absolute inset-0 bg-black/70" @click="cancelCrop()"></div>
+      <div class="relative bg-surface rounded-2xl border border-subtle shadow-2xl p-6 max-w-md w-full mx-4">
+        <h3 class="text-heading font-bold text-lg mb-4">Crop Photo</h3>
+        <div class="w-full" style="max-height: 360px;">
+          <img x-ref="cropImage" :src="rawImageUrl" class="max-w-full" style="display: block;">
+        </div>
+        <div class="flex justify-end gap-3 mt-4">
+          <button type="button" @click="cancelCrop()" class="btn btn-outline btn-sm">Cancel</button>
+          <button type="button" @click="confirmCrop()" class="btn btn-primary btn-sm">Crop & Save</button>
+        </div>
+      </div>
+    </div>
+  </template>
+</div>
+
+<script>
+function avatarCropper() {
+  return {
+    cropper: null,
+    showCropModal: false,
+    rawImageUrl: null,
+    croppedUrl: null,
+
+    onFileSelected(event) {
+      var file = event.target.files[0];
+      if (!file) return;
+
+      var self = this;
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        self.rawImageUrl = e.target.result;
+        self.showCropModal = true;
+        self.$nextTick(function() {
+          self.initCropper();
+        });
+      };
+      reader.readAsDataURL(file);
+      // Reset so same file can be re-selected
+      event.target.value = '';
+    },
+
+    initCropper() {
+      if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
+      var image = this.$refs.cropImage;
+      this.cropper = new Cropper(image, {
+        aspectRatio: 1,
+        viewMode: 1,
+        dragMode: 'move',
+        autoCropArea: 0.9,
+        cropBoxResizable: true,
+        cropBoxMovable: true,
+        background: false,
+        guides: true
+      });
+    },
+
+    confirmCrop() {
+      var self = this;
+      var canvas = this.cropper.getCroppedCanvas({ width: 256, height: 256 });
+      canvas.toBlob(function(blob) {
+        // Revoke previous blob URL to prevent memory leak
+        if (self.croppedUrl) URL.revokeObjectURL(self.croppedUrl);
+        // Set cropped preview
+        self.croppedUrl = URL.createObjectURL(blob);
+
+        // Assign file to hidden input via DataTransfer
+        var file = new File([blob], 'avatar.png', { type: 'image/png' });
+        var dt = new DataTransfer();
+        dt.items.add(file);
+        self.$refs.hiddenFileInput.files = dt.files;
+
+        self.closeCropModal();
+      }, 'image/png');
+    },
+
+    cancelCrop() {
+      this.closeCropModal();
+    },
+
+    closeCropModal() {
+      if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
+      this.showCropModal = false;
+      this.rawImageUrl = null;
+    },
+
+    removePhoto() {
+      if (this.croppedUrl) URL.revokeObjectURL(this.croppedUrl);
+      this.croppedUrl = null;
+      // Clear the hidden file input
+      var dt = new DataTransfer();
+      this.$refs.hiddenFileInput.files = dt.files;
+    }
+  };
+}
+</script>

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

@@ -0,0 +1,35 @@
+<%# locals: (text:, scheme: "neutral") %>
+<%#
+  Stage roles (stage-fresh ... stage-closed) form a shared pipeline palette
+  used by News and Content (and any future pipelines). Mapping:
+    stage-fresh      → first stage (blue)
+    stage-shaping    → 2nd stage    (yellow)
+    stage-structured → 3rd stage    (mint)
+    stage-refined    → 4th stage    (emerald)
+    stage-cohered    → 5th stage    (violet)
+    stage-shipped    → published    (emerald)
+    stage-closed     → archived/done (gray)
+%>
+<%
+  scheme_classes = case scheme.to_s
+    when "success"          then "bg-mint/10 text-mint border-mint/30"
+    when "danger"           then "bg-red-600/10 text-red-400 border-red-600/30"
+    when "warning"          then "bg-yellow-500/10 text-yellow-400 border-yellow-500/30"
+    when "info"             then "bg-blue-500/10 text-blue-500 border-blue-500/30"
+    when "violet"           then "bg-violet/10 text-violet border-violet/30"
+    when "primary"          then "bg-primary/10 text-primary border-primary/30"
+    when "orange"           then "bg-orange-500/10 text-orange-500 border-orange-500/30"
+    when "emerald"          then "bg-emerald-500/10 text-emerald-500 border-emerald-500/30"
+    when "gray"             then "bg-gray-500/10 text-gray-400 border-gray-500/30"
+    when "stage-fresh"      then "bg-blue-500/10 text-blue-500 border-blue-500/30"
+    when "stage-shaping"    then "bg-yellow-500/10 text-yellow-400 border-yellow-500/30"
+    when "stage-structured" then "bg-mint/10 text-mint border-mint/30"
+    when "stage-refined"    then "bg-emerald-500/10 text-emerald-500 border-emerald-500/30"
+    when "stage-cohered"    then "bg-violet/10 text-violet border-violet/30"
+    when "stage-shipped"    then "bg-emerald-500/10 text-emerald-500 border-emerald-500/30"
+    when "stage-closed"     then "bg-gray-500/10 text-gray-400 border-gray-500/30"
+    when "neutral"          then "bg-surface-alt text-secondary border-subtle"
+    else                         "bg-surface-alt text-body border-subtle"
+    end
+%>
+<span class="badge <%= scheme_classes %>"><%= text %></span>

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

@@ -0,0 +1,4 @@
+<%# locals: (padding: "p-6") %>
+<div class="card <%= padding %>">
+  <%= yield %>
+</div>

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

@@ -0,0 +1,10 @@
+<%# locals: (text:, display: nil) %>
+<div class="flex items-center gap-2" x-data="{ copied: false }">
+  <code class="bg-inset rounded px-2 py-1 text-primary font-mono text-xs"><%= display || text %></code>
+  <button data-copy-text="<%= text %>"
+          @click="navigator.clipboard.writeText($el.dataset.copyText); copied = true; setTimeout(() => copied = false, 2000)"
+          class="text-muted hover:text-heading transition text-xs" :class="copied && 'text-mint'">
+    <span x-show="!copied">Copy</span>
+    <span x-show="copied" x-cloak>Copied</span>
+  </button>
+</div>

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

@@ -0,0 +1,7 @@
+<%# locals: (message:, detail: nil) %>
+<div class="empty-state">
+  <p class="text-secondary text-lg"><%= message %></p>
+  <% if detail.present? %>
+    <p class="text-muted text-sm mt-1"><%= detail %></p>
+  <% end %>
+</div>

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

@@ -0,0 +1 @@
+<svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>

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

@@ -0,0 +1,13 @@
+<%# locals: (form:, field:, label: nil, type: "text", placeholder: nil, rows: nil) %>
+<div class="mb-5">
+  <% if label.present? %>
+    <label class="block text-sm text-secondary mb-2 font-medium"><%= label %></label>
+  <% end %>
+  <% if type.to_s == "textarea" %>
+    <%= form.text_area field, rows: rows || 4, class: "input-field", placeholder: placeholder %>
+  <% elsif type.to_s == "password" %>
+    <%= form.password_field field, class: "input-field", placeholder: placeholder %>
+  <% else %>
+    <%= form.text_field field, class: "input-field", placeholder: placeholder %>
+  <% end %>
+</div>

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

@@ -0,0 +1,14 @@
+<%# locals: (record:, label: "JSON", collapsible: false) %>
+<% if collapsible %>
+  <details class="mt-8">
+    <summary class="label-upper cursor-pointer"><%= label %></summary>
+    <div class="json-debug mt-2">
+      <pre class="text-mint font-mono text-xs whitespace-pre-wrap"><%= JSON.pretty_generate(record.respond_to?(:as_json) ? record.as_json : record) %></pre>
+    </div>
+  </details>
+<% else %>
+  <div class="json-debug">
+    <p class="label-upper mb-2"><%= label %></p>
+    <pre class="text-mint font-mono text-xs whitespace-pre-wrap"><%= JSON.pretty_generate(record.respond_to?(:as_json) ? record.as_json : record) %></pre>
+  </div>
+<% end %>

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

@@ -0,0 +1,9 @@
+<%# locals: (percent:, height: "h-3", color: "var(--color-cta)", label: nil, animated: false) %>
+<div class="w-full <%= height %> rounded-full bg-surface-alt overflow-hidden">
+  <div class="h-full rounded-full<%= ' transition-all duration-500 ease-out' if animated %>"
+       style="width: <%= [percent.to_f, 100].min %>%; background-color: <%= color %>">
+  </div>
+</div>
+<% if label %>
+  <p class="text-xs text-muted mt-1"><%= label %></p>
+<% end %>

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

@@ -0,0 +1,10 @@
+<button @click="$store.theme.toggle()" class="flex text-secondary hover:text-heading transition" title="Toggle theme">
+  <!-- Moon icon (shown in dark mode) — Heroicons v2 outline -->
+  <svg x-show="$store.theme.isDark" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+  </svg>
+  <!-- Sun icon (shown in light mode) — Heroicons v2 outline -->
+  <svg x-show="!$store.theme.isDark" x-cloak xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+  </svg>
+</button>

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

@@ -0,0 +1,15 @@
+<%# Theme toggle with scale-morph spinner swap.
+    showNavSpinner() / hideNavSpinner() (defined in _head.html.erb) cross-fade between
+    the theme toggle and a loading spinner with a scale+rotate animation.
+%>
+<span class="relative flex" style="width: 16px; height: 16px;">
+  <span class="nav-toggle-icon absolute inset-0 transition-all duration-300" style="transform: scale(1) rotate(0deg); opacity: 1;">
+    <%= render "components/theme_toggle" %>
+  </span>
+  <span class="nav-spinner-icon absolute inset-0 transition-all duration-300 pointer-events-none" style="transform: scale(0) rotate(-90deg); opacity: 0;">
+    <svg class="w-4 h-4 animate-spin text-secondary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+    </svg>
+  </span>
+</span>

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

@@ -0,0 +1,136 @@
+<%# Shared right-side navbar user section.
+    Locals (all optional):
+      balance_html     — raw HTML for balance display (e.g. Turf Monster wallet balance)
+      extra_icons_html — raw HTML for app-specific icon buttons (e.g. refresh button)
+      show_logout_link — boolean, show explicit "Log out" link (Studio uses this)
+      div2_html        — raw HTML to replace default Div 2 (e.g. Turf Monster seeds bar)
+%>
+<% balance_html     ||= nil %>
+<% extra_icons_html ||= nil %>
+<% show_logout_link ||= false %>
+<% div2_html        ||= nil %>
+
+<div class="flex gap-2">
+  <% if logged_in? %>
+    <%# Left column: Div 1 + Div 2 stacked %>
+    <div class="flex-1">
+      <%# Div 1 (Bigger): balance + icons + username %>
+      <div class="flex items-center gap-2 leading-none" :style="'padding: 0 6px;' + ($store.devMode ? 'background: cornflowerblue;' : '')">
+        <% if balance_html.present? %>
+          <%= raw balance_html %>
+        <% end %>
+        <div class="flex items-center gap-2 ml-auto self-end">
+          <%= raw extra_icons_html %>
+          <%= render "components/admin_dropdown" %>
+          <%= render "components/theme_toggle_morph" %>
+        </div>
+        <% account_link = defined?(account_path) ? account_path : "#" %>
+        <%= link_to account_link, class: "text-heading font-semibold hover:text-primary transition text-base leading-none truncate text-right" do %>
+          <%= current_user.display_name %>
+        <% end %>
+      </div>
+      <%# Div 2 (Smaller): wallet address (left) + level (right) with progress bar %>
+      <% server_level = current_user.respond_to?(:level) && current_user.level.present? ? current_user.level : nil %>
+      <div x-data="{
+             barWidth: 0,
+             displayLevel: <%= server_level || 1 %>,
+             leveledUp: false,
+             init() {
+               var self = this;
+               var data = this.getSeedsData();
+               if (data) {
+                 self.displayLevel = data.level;
+                 setTimeout(function() { self.barWidth = data.progress; }, 150);
+               }
+             },
+             getSeedsData() {
+               try {
+                 var raw = localStorage.getItem('seedsNavbar');
+                 if (!raw) return null;
+                 return JSON.parse(raw);
+               } catch(e) { return null; }
+             },
+             replayLevel() {
+               var self = this;
+               var data = this.getSeedsData();
+               var finalPct = data ? data.progress : self.barWidth;
+               self.displayLevel = Math.max(1, self.displayLevel - 1);
+               self.barWidth = 60;
+               setTimeout(function() { self.barWidth = 100; }, 300);
+               setTimeout(function() { self.displayLevel += 1; self.leveledUp = true; }, 1500);
+               setTimeout(function() { self.leveledUp = false; self.barWidth = 0; }, 2800);
+               setTimeout(function() { self.barWidth = finalPct; }, 3000);
+             },
+             handleSeedsUpdate(d) {
+               var self = this;
+               if (d.levelUp) {
+                 self.barWidth = d.oldPct;
+                 setTimeout(function() { self.barWidth = 100; }, 300);
+                 setTimeout(function() { self.displayLevel = d.newLevel; self.leveledUp = true; }, 1500);
+                 setTimeout(function() { self.leveledUp = false; self.barWidth = 0; }, 2800);
+                 setTimeout(function() { self.barWidth = d.progress; }, 3000);
+               } else {
+                 self.displayLevel = d.level;
+                 self.barWidth = d.progress;
+               }
+             }
+           }"
+           @navbar-replay-level.window="replayLevel()"
+           @navbar-seeds-update.window="handleSeedsUpdate($event.detail)"
+           class="relative mt-0.5" style="height: 14px;">
+        <%# Fill bar %>
+        <div class="absolute inset-y-0 left-0 rounded z-0" style="background: var(--color-cta); transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);" :style="{ width: barWidth + '%' }"></div>
+        <%# Text layer 1: muted (visible outside bar) %>
+        <div class="absolute inset-0 flex items-center justify-between px-1.5 font-mono text-muted z-[1] nav-bar-text">
+          <span>
+            <% if current_user.respond_to?(:truncated_solana) && current_user.try(:solana_connected?) %>
+              <%= current_user.truncated_solana %>
+            <% end %>
+          </span>
+          <% if server_level %>
+            <span :class="leveledUp && 'nav-level-pop'" x-text="'Level ' + displayLevel">Level <%= server_level %></span>
+          <% elsif show_logout_link %>
+            <%= link_to "Log out", logout_path, class: "font-mono text-muted no-underline nav-bar-text" %>
+          <% end %>
+        </div>
+        <%# Text layer 2: white (clip-path reveals where bar covers) %>
+        <div class="absolute inset-0 flex items-center justify-between px-1.5 font-mono text-white z-[2] nav-bar-text" :style="{ 'clip-path': 'inset(0 ' + (100 - barWidth) + '% 0 0)' }">
+          <span>
+            <% if current_user.respond_to?(:truncated_solana) && current_user.try(:solana_connected?) %>
+              <%= current_user.truncated_solana %>
+            <% end %>
+          </span>
+          <% if server_level %>
+            <span :class="leveledUp && 'nav-level-pop'" x-text="'Level ' + displayLevel">Level <%= server_level %></span>
+          <% elsif show_logout_link %>
+            <%= link_to "Log out", logout_path, class: "font-mono text-white no-underline nav-bar-text" %>
+          <% end %>
+        </div>
+      </div>
+      <style>
+        @keyframes navLevelPop {
+          0% { transform: scale(1); }
+          15% { transform: scale(1.5); }
+          35% { transform: scale(1.2); }
+          50% { transform: scale(1.4); }
+          70% { transform: scale(1.1); }
+          100% { transform: scale(1); }
+        }
+        .nav-level-pop { animation: navLevelPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
+        .nav-bar-text { font-size: 10px; }
+      </style>
+    </div>
+    <%# Div 3 (Avatar): spans both rows %>
+    <% account_link = defined?(account_path) ? account_path : "#" %>
+    <%= link_to account_link, class: "hover:opacity-80 transition flex-shrink-0 flex items-center", "x-bind:style": "$store.devMode && 'background: lightgreen'" do %>
+      <%= render "components/avatar", user: current_user, size: "nav" %>
+    <% end %>
+  <% else %>
+    <%= render "components/admin_dropdown" %>
+    <%= render "components/theme_toggle_morph" %>
+    <div class="flex items-center gap-3 ml-auto">
+      <%= link_to "Log in", login_path, class: "text-heading hover:text-primary text-sm font-semibold transition" %>
+      <%= link_to "Sign up", signup_path, class: "btn btn-primary btn-sm" %>
+    </div>
+  <% end %>
+</div>

data/app/views/error_logs/index.html.erb

@@ -0,0 +1,76 @@
+<section class="mb-6" x-data="{
+  loading: false,
+  search(url) {
+    this.loading = true;
+    setTimeout(() => { window.location.href = url }, 500);
+  }
+}">
+  <div class="flex items-center justify-between mb-4">
+    <h2 class="text-2xl font-bold text-heading">Error Logs</h2>
+    <span class="text-sm text-muted"><%= @error_logs.size %> <%= params[:q].present? ? "results" : "recent errors" %></span>
+  </div>
+
+  <form method="get" action="<%= error_logs_path %>" class="mb-6 relative"
+        @submit.prevent="
+          const q = $refs.input.value.trim();
+          const url = q ? '<%= error_logs_path %>?q=' + encodeURIComponent(q) : '<%= error_logs_path %>';
+          search(url);
+        "
+        @keydown.escape.prevent="
+          if ($refs.input.value) {
+            $refs.input.value = '';
+            search('<%= error_logs_path %>');
+          }
+        ">
+    <input type="text" name="q" value="<%= params[:q] %>" placeholder="Search errors... (Esc to clear)" autofocus x-ref="input"
+           class="input-field pr-10 py-2.5 text-sm placeholder-muted"
+           :readonly="loading" />
+    <div x-show="loading" x-cloak class="absolute right-3 top-1/2 -translate-y-1/2">
+      <svg class="animate-spin h-4 w-4 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+    </div>
+  </form>
+
+  <!-- Loading state -->
+  <div x-show="loading" x-cloak class="py-16 text-center">
+    <svg class="animate-spin h-8 w-8 text-primary mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+    <p class="text-muted text-sm">Searching...</p>
+  </div>
+
+  <!-- Results -->
+  <div x-show="!loading">
+    <% if @error_logs.empty? %>
+      <% if params[:q].present? %>
+        <%= render "components/empty_state", message: "No errors matching \"#{params[:q]}\"" %>
+      <% else %>
+        <%= render "components/empty_state", message: "No errors logged yet.", detail: "Errors will appear here when captured via ErrorLog.capture!" %>
+      <% end %>
+    <% else %>
+      <div class="space-y-2">
+        <% @error_logs.each do |log| %>
+          <%= link_to error_log_path(log, q: params[:q].presence), class: "block card p-4 hover:border-red-700/50 hover:shadow-lg hover:shadow-red-900/10 transition" do %>
+            <div class="flex items-start justify-between gap-4">
+              <div class="flex-1 min-w-0">
+                <p class="text-red-400 font-semibold text-sm truncate"><%= log.message %></p>
+                <% if log.backtrace.present? %>
+                  <p class="text-muted font-mono text-xs mt-1 truncate"><%= JSON.parse(log.backtrace).first %></p>
+                <% end %>
+              </div>
+              <div class="flex items-center gap-3 shrink-0">
+                <% if log.target_name.present? %>
+                  <%= render "components/badge", text: log.target_name, scheme: "violet" %>
+                <% end %>
+                <span class="text-xs text-muted whitespace-nowrap"><%= time_ago_in_words(log.created_at) %> ago</span>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</section>

data/app/views/error_logs/show.html.erb

@@ -0,0 +1,65 @@
+<section>
+  <div class="mb-6">
+    <% back_path = params[:q].present? ? error_logs_path(q: params[:q]) : error_logs_path %>
+    <% back_text = params[:q].present? ? "Back to \"#{params[:q]}\"" : "All Errors" %>
+    <%= link_to back_path, class: "text-secondary hover:text-heading text-sm transition" do %>
+      <span>&larr;</span> <%= back_text %>
+    <% end %>
+  </div>
+
+  <div class="card p-6 mb-6">
+    <div class="flex items-start justify-between mb-4">
+      <h2 class="text-xl font-bold text-red-400"><%= @error_log.message %></h2>
+      <span class="text-xs text-muted whitespace-nowrap ml-4"><%= @error_log.created_at.strftime("%b %d, %Y %I:%M:%S %p") %></span>
+    </div>
+
+    <!-- Metadata -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+      <div class="bg-surface-alt rounded-lg p-3">
+        <p class="label-upper mb-1">Target</p>
+        <% if @error_log.target_type.present? %>
+          <p class="text-heading font-semibold text-sm"><%= @error_log.target_name %></p>
+          <div class="mt-1.5">
+            <%= render "components/copy_button", text: "#{@error_log.target_type}.find_by(id: #{@error_log.target_id})" %>
+          </div>
+        <% else %>
+          <p class="text-muted text-sm">None</p>
+        <% end %>
+      </div>
+      <div class="bg-surface-alt rounded-lg p-3">
+        <p class="label-upper mb-1">Parent</p>
+        <% if @error_log.parent_type.present? %>
+          <p class="text-heading font-semibold text-sm"><%= @error_log.parent_name %></p>
+          <div class="mt-1.5">
+            <%= render "components/copy_button", text: "#{@error_log.parent_type}.find_by(id: #{@error_log.parent_id})" %>
+          </div>
+        <% else %>
+          <p class="text-muted text-sm">None</p>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Inspect -->
+    <div class="mb-6">
+      <p class="label-upper mb-2">Exception</p>
+      <pre class="bg-inset rounded-lg p-4 text-red-300 font-mono text-xs overflow-x-auto"><%= @error_log.inspect_field %></pre>
+    </div>
+
+    <!-- Backtrace -->
+    <% if @error_log.backtrace.present? %>
+      <div>
+        <p class="label-upper mb-2">Backtrace</p>
+        <div class="bg-inset rounded-lg p-4 overflow-x-auto">
+          <% JSON.parse(@error_log.backtrace).each_with_index do |frame, i| %>
+            <p class="font-mono text-xs leading-relaxed <%= i == 0 ? 'text-red-300' : 'text-muted' %>"><%= frame %></p>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Slug -->
+  <p class="text-xs text-muted text-center mb-6"><%= @error_log.slug %></p>
+
+  <%= render "components/json_debug", record: @error_log %>
+</section>