htm 0.0.15 → 0.0.17

data/examples/rails_app/app/views/robots/index.html.erb

@@ -0,0 +1,106 @@
+<div class="space-y-6">
+  <!-- Header -->
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-white">Robots</h1>
+      <p class="mt-1 text-sm text-gray-400">Manage LLM agents in the hive mind</p>
+    </div>
+    <%= link_to new_robot_path, class: 'inline-flex items-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors' do %>
+      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+      </svg>
+      New Robot
+    <% end %>
+  </div>
+
+  <!-- Info Box -->
+  <div class="rounded-lg bg-indigo-900/30 border border-indigo-500/30 p-4">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <svg class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+      <div class="ml-3">
+        <p class="text-sm text-indigo-300">
+          <strong>Hive Mind Architecture:</strong> All robots share the same global memory store. Each robot can access memories created by any other robot, enabling collaborative knowledge sharing across agents.
+        </p>
+        <p class="text-sm text-indigo-300/70 mt-2">
+          <strong>Set as Active:</strong> Changes which robot is shown in the header. New memories you create will be associated with the active robot.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Current Robot -->
+  <div class="rounded-lg bg-gray-800 border border-gray-700 p-4">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <div class="h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center">
+          <svg class="h-5 w-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+          </svg>
+        </div>
+        <div>
+          <p class="text-sm text-gray-400">Currently active</p>
+          <p class="text-lg font-medium text-white"><%= current_robot_name %></p>
+        </div>
+      </div>
+      <span class="inline-flex items-center gap-1 rounded-full bg-green-900/50 border border-green-500/30 px-3 py-1 text-sm text-green-400">
+        <svg class="h-2 w-2" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
+        Active
+      </span>
+    </div>
+  </div>
+
+  <!-- Robots List -->
+  <% if @robots.any? %>
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <% @robots.each do |robot| %>
+        <div class="rounded-lg bg-gray-800 border border-gray-700 p-5 hover:border-gray-600 transition-colors">
+          <div class="flex items-start justify-between">
+            <div class="flex items-center gap-3">
+              <div class="h-12 w-12 rounded-full bg-purple-900/50 flex items-center justify-center">
+                <svg class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                </svg>
+              </div>
+              <div>
+                <h3 class="text-lg font-medium text-white"><%= robot.name %></h3>
+                <p class="text-sm text-gray-500">Created <%= time_ago_in_words(robot.created_at) %> ago</p>
+              </div>
+            </div>
+            <% if robot.name == current_robot_name %>
+              <span class="inline-flex items-center rounded-full bg-green-900/50 border border-green-500/30 px-2 py-0.5 text-xs text-green-400">
+                Active
+              </span>
+            <% end %>
+          </div>
+
+          <div class="mt-4 pt-4 border-t border-gray-700 flex items-center justify-between">
+            <p class="text-sm text-gray-400"><%= robot.nodes.count %> memories</p>
+            <div class="flex items-center gap-2">
+              <%= link_to 'View', robot_path(robot), class: 'text-sm text-indigo-400 hover:text-indigo-300' %>
+              <% unless robot.name == current_robot_name %>
+                <%= button_to switch_robot_path(robot), method: :post, class: 'inline-flex items-center gap-1 text-sm text-green-400 hover:text-green-300 bg-transparent border-0 cursor-pointer', title: "Switch to #{robot.name} - new memories will be created under this robot" do %>
+                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+                  </svg>
+                  Set as Active
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="rounded-lg bg-gray-800 border border-gray-700 p-8 text-center">
+      <svg class="mx-auto h-12 w-12 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+      </svg>
+      <h3 class="mt-4 text-lg font-medium text-white">No robots yet</h3>
+      <p class="mt-2 text-sm text-gray-400">Robots are created automatically when you add memories.</p>
+    </div>
+  <% end %>
+</div>

data/examples/rails_app/app/views/robots/new.html.erb

@@ -0,0 +1,36 @@
+<div class="space-y-6">
+  <!-- Back link -->
+  <div>
+    <%= link_to robots_path, class: 'inline-flex items-center gap-1 text-sm text-gray-400 hover:text-white transition-colors' do %>
+      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+      </svg>
+      Back to Robots
+    <% end %>
+  </div>
+
+  <!-- Form -->
+  <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+    <h1 class="text-xl font-bold text-white mb-6">Create New Robot</h1>
+
+    <%= form_with url: robots_path, method: :post, class: 'space-y-6' do %>
+      <div>
+        <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Robot Name</label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          required
+          placeholder="e.g., assistant, researcher, coder"
+          class="w-full rounded-md bg-gray-700 border-gray-600 text-white placeholder-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+        />
+        <p class="mt-1 text-xs text-gray-500">A unique identifier for this robot. Use lowercase letters, numbers, and underscores.</p>
+      </div>
+
+      <div class="flex items-center gap-4 pt-4 border-t border-gray-700">
+        <%= submit_tag 'Create Robot', class: 'rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 cursor-pointer transition-colors' %>
+        <%= link_to 'Cancel', robots_path, class: 'rounded-md bg-gray-700 px-4 py-2 text-sm font-medium text-white hover:bg-gray-600 transition-colors' %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/examples/rails_app/app/views/robots/show.html.erb

@@ -0,0 +1,79 @@
+<div class="space-y-6">
+  <!-- Back link -->
+  <div>
+    <%= link_to robots_path, class: 'inline-flex items-center gap-1 text-sm text-gray-400 hover:text-white transition-colors' do %>
+      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+      </svg>
+      Back to Robots
+    <% end %>
+  </div>
+
+  <!-- Robot Header -->
+  <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+    <div class="flex items-start justify-between">
+      <div class="flex items-center gap-4">
+        <div class="h-16 w-16 rounded-full bg-purple-900/50 flex items-center justify-center">
+          <svg class="h-8 w-8 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+          </svg>
+        </div>
+        <div>
+          <h1 class="text-2xl font-bold text-white"><%= @robot.name %></h1>
+          <p class="text-sm text-gray-400">Created <%= @robot.created_at.strftime('%Y-%m-%d at %H:%M') %></p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <% if @robot.name == current_robot_name %>
+          <span class="inline-flex items-center gap-1 rounded-full bg-green-900/50 border border-green-500/30 px-3 py-1 text-sm text-green-400">
+            <svg class="h-2 w-2" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
+            Active
+          </span>
+        <% else %>
+          <%= button_to switch_robot_path(@robot), method: :post, class: 'inline-flex items-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors' do %>
+            Switch to this robot
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Stats -->
+    <div class="mt-6 grid grid-cols-3 gap-4 pt-6 border-t border-gray-700">
+      <div>
+        <p class="text-2xl font-bold text-white"><%= @memory_count %></p>
+        <p class="text-sm text-gray-400">Total Memories</p>
+      </div>
+      <div>
+        <p class="text-2xl font-bold text-white"><%= @robot.nodes.where.not(embedding: nil).count %></p>
+        <p class="text-sm text-gray-400">With Embeddings</p>
+      </div>
+      <div>
+        <p class="text-2xl font-bold text-white"><%= @robot.nodes.joins(:tags).distinct.count('tags.id') %></p>
+        <p class="text-sm text-gray-400">Unique Tags</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Recent Memories -->
+  <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+    <h2 class="text-lg font-medium text-white mb-4">Recent Memories</h2>
+    <% if @recent_memories.any? %>
+      <div class="space-y-3">
+        <% @recent_memories.each do |memory| %>
+          <%= link_to memory_path(memory), class: 'block rounded-md bg-gray-700/50 p-3 hover:bg-gray-700 transition-colors' do %>
+            <p class="text-sm text-gray-300 line-clamp-2"><%= memory.content %></p>
+            <div class="mt-2 flex items-center gap-2 text-xs text-gray-500">
+              <span><%= time_ago_in_words(memory.created_at) %> ago</span>
+              <% if memory.embedding.present? %>
+                <span class="text-green-500">embedded</span>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <p class="text-sm text-gray-500">No memories yet. Start by <%= link_to 'adding a memory', new_memory_path, class: 'text-indigo-400 hover:text-indigo-300' %>.</p>
+    <% end %>
+  </div>
+</div>

data/examples/rails_app/app/views/search/index.html.erb

@@ -0,0 +1,184 @@
+<div class="space-y-6">
+  <!-- Header -->
+  <div>
+    <h1 class="text-2xl font-bold text-white">Semantic Search</h1>
+    <p class="mt-1 text-sm text-gray-400">Search memories using vector, full-text, or hybrid strategies</p>
+  </div>
+
+  <!-- Search Form -->
+  <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+    <%= form_with url: search_path, method: :get, class: 'space-y-4' do %>
+      <div>
+        <label for="query" class="block text-sm font-medium text-gray-300 mb-2">Search Query</label>
+        <div class="flex gap-4">
+          <input
+            type="text"
+            name="query"
+            id="query"
+            value="<%= @query %>"
+            placeholder="Enter your search query..."
+            class="flex-1 rounded-md bg-gray-700 border-gray-600 text-white placeholder-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+          />
+          <%= submit_tag 'Search', class: 'rounded-md bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-500 cursor-pointer transition-colors' %>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-4 gap-4 pt-4 border-t border-gray-700">
+        <div>
+          <label for="strategy" class="block text-xs font-medium text-gray-400 mb-1">Strategy</label>
+          <select name="strategy" id="strategy" class="w-full rounded-md bg-gray-700 border-gray-600 text-white text-sm focus:ring-indigo-500 focus:border-indigo-500">
+            <option value="hybrid" <%= 'selected' if @selected_strategy == :hybrid %>>Hybrid</option>
+            <option value="vector" <%= 'selected' if @selected_strategy == :vector %>>Vector (Semantic)</option>
+            <option value="fulltext" <%= 'selected' if @selected_strategy == :fulltext %>>Full-text (Keyword)</option>
+          </select>
+        </div>
+
+        <div>
+          <label for="limit" class="block text-xs font-medium text-gray-400 mb-1">Results</label>
+          <select name="limit" id="limit" class="w-full rounded-md bg-gray-700 border-gray-600 text-white text-sm focus:ring-indigo-500 focus:border-indigo-500">
+            <option value="5" <%= 'selected' if @limit == 5 %>>5</option>
+            <option value="10" <%= 'selected' if @limit == 10 %>>10</option>
+            <option value="20" <%= 'selected' if @limit == 20 %>>20</option>
+            <option value="50" <%= 'selected' if @limit == 50 %>>50</option>
+          </select>
+        </div>
+
+        <div>
+          <label for="timeframe" class="block text-xs font-medium text-gray-400 mb-1">Timeframe</label>
+          <select name="timeframe" id="timeframe" class="w-full rounded-md bg-gray-700 border-gray-600 text-white text-sm focus:ring-indigo-500 focus:border-indigo-500">
+            <option value="all time" <%= 'selected' if @timeframe == 'all time' %>>All Time</option>
+            <option value="today" <%= 'selected' if @timeframe == 'today' %>>Today</option>
+            <option value="this week" <%= 'selected' if @timeframe == 'this week' %>>This Week</option>
+            <option value="this month" <%= 'selected' if @timeframe == 'this month' %>>This Month</option>
+            <option value="last year" <%= 'selected' if @timeframe == 'last year' %>>Last Year</option>
+          </select>
+        </div>
+
+        <div class="flex items-end">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input type="checkbox" name="compare" value="true" <%= 'checked' if params[:compare] == 'true' %> class="rounded bg-gray-700 border-gray-600 text-indigo-600 focus:ring-indigo-500">
+            <span class="text-sm text-gray-300">Compare all strategies</span>
+          </label>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Strategy Explanation -->
+  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+    <div class="rounded-lg bg-gray-800/50 border border-gray-700 p-4">
+      <div class="flex items-center gap-2 mb-2">
+        <div class="h-2 w-2 rounded-full bg-blue-400"></div>
+        <h3 class="text-sm font-medium text-white">Vector Search</h3>
+      </div>
+      <p class="text-xs text-gray-400">Uses semantic embeddings for conceptual similarity. Best for finding related content even with different wording.</p>
+    </div>
+    <div class="rounded-lg bg-gray-800/50 border border-gray-700 p-4">
+      <div class="flex items-center gap-2 mb-2">
+        <div class="h-2 w-2 rounded-full bg-green-400"></div>
+        <h3 class="text-sm font-medium text-white">Full-text Search</h3>
+      </div>
+      <p class="text-xs text-gray-400">Keyword matching with fuzzy trigram support. Best for exact terms, code, or specific phrases.</p>
+    </div>
+    <div class="rounded-lg bg-gray-800/50 border border-gray-700 p-4">
+      <div class="flex items-center gap-2 mb-2">
+        <div class="h-2 w-2 rounded-full bg-purple-400"></div>
+        <h3 class="text-sm font-medium text-white">Hybrid Search</h3>
+      </div>
+      <p class="text-xs text-gray-400">Combines vector and full-text with weighted scoring. Best overall approach for general queries.</p>
+    </div>
+  </div>
+
+  <!-- Results -->
+  <% if @query.present? %>
+    <% if params[:compare] == 'true' %>
+      <!-- Comparison View -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <% @strategies.each do |strategy| %>
+          <div class="rounded-lg bg-gray-800 border border-gray-700 overflow-hidden">
+            <div class="px-4 py-3 bg-gray-800/50 border-b border-gray-700 flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <div class="h-2 w-2 rounded-full <%= strategy == :vector ? 'bg-blue-400' : strategy == :fulltext ? 'bg-green-400' : 'bg-purple-400' %>"></div>
+                <h3 class="font-medium text-white capitalize"><%= strategy %></h3>
+              </div>
+              <span class="text-xs text-gray-400"><%= @results["#{strategy}_time".to_sym] %>ms</span>
+            </div>
+            <div class="p-4">
+              <% if @errors[strategy].present? %>
+                <div class="rounded-md bg-red-900/30 border border-red-500/30 p-3">
+                  <p class="text-sm text-red-400">Error: <%= @errors[strategy] %></p>
+                </div>
+              <% else %>
+                <% results = @results[strategy] || [] %>
+                <% if results.any? %>
+                  <ul class="space-y-3">
+                    <% results.each_with_index do |memory, i| %>
+                      <li class="text-sm">
+                        <span class="text-gray-500 font-mono text-xs"><%= i + 1 %>.</span>
+                        <%= link_to memory_path(memory['id']), class: 'text-gray-300 hover:text-white line-clamp-2' do %>
+                          <%= truncate(memory['content'], length: 80) %>
+                        <% end %>
+                      </li>
+                    <% end %>
+                  </ul>
+                <% else %>
+                  <p class="text-sm text-gray-500">No results</p>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <!-- Single Strategy Results -->
+      <div class="rounded-lg bg-gray-800 border border-gray-700 overflow-hidden">
+        <div class="px-6 py-4 bg-gray-800/50 border-b border-gray-700 flex items-center justify-between">
+          <div>
+            <h2 class="text-lg font-medium text-white">Results</h2>
+            <p class="text-sm text-gray-400">
+              <%= (@results[@selected_strategy] || []).length %> results using <span class="capitalize"><%= @selected_strategy %></span> strategy
+            </p>
+          </div>
+          <span class="text-sm text-gray-400"><%= @results["#{@selected_strategy}_time".to_sym] %>ms</span>
+        </div>
+
+        <% results = @results[@selected_strategy] || [] %>
+        <% if results.any? %>
+          <ul class="divide-y divide-gray-700">
+            <% results.each_with_index do |memory, i| %>
+              <li class="p-4 hover:bg-gray-700/50 transition-colors">
+                <div class="flex items-start gap-4">
+                  <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-xs text-gray-400 font-mono">
+                    <%= i + 1 %>
+                  </span>
+                  <div class="flex-1 min-w-0">
+                    <%= link_to memory_path(memory['id']), class: 'block group' do %>
+                      <p class="text-sm text-gray-300 group-hover:text-white transition-colors">
+                        <%= memory['content'] %>
+                      </p>
+                    <% end %>
+                    <div class="mt-2 flex items-center gap-4 text-xs text-gray-500">
+                      <span class="font-mono text-gray-600">#<%= memory['id'] %></span>
+                      <span><%= time_ago_in_words(memory['created_at'].is_a?(Time) ? memory['created_at'] : Time.parse(memory['created_at'].to_s)) %> ago</span>
+                      <% if memory['rank'] %>
+                        <span>Rank: <%= memory['rank'].to_f.round(4) %></span>
+                      <% end %>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            <% end %>
+          </ul>
+        <% else %>
+          <div class="p-8 text-center">
+            <svg class="mx-auto h-12 w-12 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <h3 class="mt-4 text-lg font-medium text-white">No results found</h3>
+            <p class="mt-2 text-sm text-gray-400">Try a different query or adjust the timeframe.</p>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/examples/rails_app/app/views/shared/_navbar.html.erb

@@ -0,0 +1,52 @@
+<nav class="bg-gray-800 border-b border-gray-700">
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <div class="flex h-16 items-center justify-between">
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <%= link_to root_path, class: "flex items-center gap-2" do %>
+            <svg class="h-8 w-8 text-indigo-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+            </svg>
+            <span class="text-xl font-bold text-white">HTM Explorer</span>
+          <% end %>
+        </div>
+        <div class="hidden md:block">
+          <div class="ml-10 flex items-baseline space-x-4">
+            <%= link_to 'Dashboard', root_path,
+                class: "rounded-md px-3 py-2 text-sm font-medium #{current_page?(root_path) ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}" %>
+            <%= link_to 'Memories', memories_path,
+                class: "rounded-md px-3 py-2 text-sm font-medium #{controller_name == 'memories' ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}" %>
+            <%= link_to 'Tags', tags_path,
+                class: "rounded-md px-3 py-2 text-sm font-medium #{controller_name == 'tags' ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}" %>
+            <%= link_to 'Robots', robots_path,
+                class: "rounded-md px-3 py-2 text-sm font-medium #{controller_name == 'robots' ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}" %>
+            <%= link_to 'Search', search_path,
+                class: "rounded-md px-3 py-2 text-sm font-medium #{controller_name == 'search' ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}" %>
+            <%= link_to 'Files', files_path,
+                class: "rounded-md px-3 py-2 text-sm font-medium #{controller_name == 'files' ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}" %>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-2 text-sm text-gray-400">
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+          </svg>
+          <span>Robot: <strong class="text-indigo-400"><%= current_robot_name %></strong></span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile menu -->
+  <div class="md:hidden" data-controller="mobile-menu">
+    <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
+      <%= link_to 'Dashboard', root_path, class: "block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white" %>
+      <%= link_to 'Memories', memories_path, class: "block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white" %>
+      <%= link_to 'Tags', tags_path, class: "block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white" %>
+      <%= link_to 'Robots', robots_path, class: "block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white" %>
+      <%= link_to 'Search', search_path, class: "block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white" %>
+      <%= link_to 'Files', files_path, class: "block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white" %>
+    </div>
+  </div>
+</nav>

data/examples/rails_app/app/views/shared/_stat_card.html.erb

@@ -0,0 +1,52 @@
+<%
+  colors = {
+    'indigo' => { bg: 'bg-indigo-900/50', border: 'border-indigo-500/30', text: 'text-indigo-400' },
+    'green' => { bg: 'bg-green-900/50', border: 'border-green-500/30', text: 'text-green-400' },
+    'red' => { bg: 'bg-red-900/50', border: 'border-red-500/30', text: 'text-red-400' },
+    'yellow' => { bg: 'bg-yellow-900/50', border: 'border-yellow-500/30', text: 'text-yellow-400' },
+    'purple' => { bg: 'bg-purple-900/50', border: 'border-purple-500/30', text: 'text-purple-400' },
+    'blue' => { bg: 'bg-blue-900/50', border: 'border-blue-500/30', text: 'text-blue-400' }
+  }
+  c = colors[color] || colors['indigo']
+%>
+
+<div class="rounded-lg bg-gray-800 border border-gray-700 p-5">
+  <div class="flex items-center">
+    <div class="flex-shrink-0">
+      <div class="rounded-md <%= c[:bg] %> <%= c[:border] %> border p-3">
+        <% case icon %>
+        <% when 'memory' %>
+          <svg class="h-6 w-6 <%= c[:text] %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+          </svg>
+        <% when 'vector' %>
+          <svg class="h-6 w-6 <%= c[:text] %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+          </svg>
+        <% when 'trash' %>
+          <svg class="h-6 w-6 <%= c[:text] %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+        <% when 'tag' %>
+          <svg class="h-6 w-6 <%= c[:text] %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+          </svg>
+        <% when 'robot' %>
+          <svg class="h-6 w-6 <%= c[:text] %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+          </svg>
+        <% when 'file' %>
+          <svg class="h-6 w-6 <%= c[:text] %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+        <% end %>
+      </div>
+    </div>
+    <div class="ml-5 w-0 flex-1">
+      <dl>
+        <dt class="truncate text-sm font-medium text-gray-400"><%= title %></dt>
+        <dd class="text-2xl font-semibold text-white"><%= number_with_delimiter(value) %></dd>
+      </dl>
+    </div>
+  </div>
+</div>