fosm-rails 0.1.0

data/app/views/fosm/admin/agents/show.html.erb

@@ -0,0 +1,166 @@
+<div class="p-6 space-y-8">
+  <div class="flex items-center gap-3">
+    <%= link_to "← #{@model_class.name.demodulize.humanize}", fosm.admin_app_path(@slug), class: "text-sm text-blue-600 hover:underline" %>
+  </div>
+
+  <!-- Header -->
+  <div class="flex items-start justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900"><%= @model_class.name.demodulize.humanize %> Agent</h1>
+      <p class="text-sm text-gray-500 mt-1">
+        <% if @agent_class %>
+          <span class="text-green-600 font-medium">&#10003; <%= @agent_class.name %></span>
+          &middot; model: <code class="bg-gray-100 px-1 rounded text-xs"><%= @agent_class.default_model %></code>
+        <% else %>
+          <span class="text-amber-600">No agent class found.</span>
+          Define <code class="bg-gray-100 px-1 rounded text-xs">Fosm::<%= @model_class.name.demodulize %>Agent &lt; Fosm::Agent</code>
+          in <code class="bg-gray-100 px-1 rounded text-xs">app/agents/fosm/<%= @mn %>_agent.rb</code>
+        <% end %>
+      </p>
+    </div>
+    <div class="text-xs px-2 py-1 rounded border bg-green-50 border-green-200 text-green-700">
+      &#10003; Gemlings <%= Gemlings::VERSION rescue "loaded" %>
+    </div>
+  </div>
+
+  <!-- Chat CTA -->
+  <div class="flex items-center justify-between bg-purple-50 border border-purple-200 rounded-lg px-5 py-3">
+    <div>
+      <p class="text-sm font-medium text-purple-900">Chat with this agent</p>
+      <p class="text-xs text-purple-600 mt-0.5">Multi-turn conversation · agent uses lifecycle tools only · reasoning visible</p>
+    </div>
+    <%= link_to "Chat with Agent →",
+                fosm.agent_chat_admin_app_path(@slug),
+                class: "text-sm bg-purple-700 text-white px-4 py-2 rounded-lg hover:bg-purple-800 shrink-0" %>
+  </div>
+
+  <!-- Tool catalog -->
+  <div class="bg-white border border-gray-200 rounded-lg p-5 space-y-4">
+    <div>
+      <h2 class="font-semibold text-gray-900">Auto-generated Tools</h2>
+      <p class="text-xs text-gray-400 mt-0.5">
+        These tools are derived from the lifecycle definition and exposed to any Gemlings agent.
+        The agent can <strong>only</strong> act through these tools — bounded autonomy.
+      </p>
+    </div>
+
+    <% read_tools  = @tools.select { |t| t[:category] == :read } %>
+    <% mutate_tools = @tools.select { |t| t[:category] == :mutate } %>
+
+    <div class="space-y-3">
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Read tools (safe, no state change)</p>
+      <% read_tools.each do |tool| %>
+        <div class="flex items-start gap-3 text-sm border-l-2 border-blue-200 pl-3 py-1">
+          <div class="flex-1">
+            <code class="font-mono text-blue-700 text-xs"><%= tool[:name] %></code>
+            <p class="text-gray-500 text-xs mt-0.5"><%= tool[:description] %></p>
+          </div>
+          <div class="text-xs text-gray-400 font-mono shrink-0">
+            <% tool[:params].each do |k, v| %>
+              <span><%= k %>: <em><%= v %></em></span>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="space-y-3">
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Mutate tools (fire lifecycle events)</p>
+      <% mutate_tools.each do |tool| %>
+        <div class="flex items-start gap-3 text-sm border-l-2 border-orange-200 pl-3 py-1">
+          <div class="flex-1">
+            <code class="font-mono text-orange-700 text-xs"><%= tool[:name] %></code>
+            <p class="text-gray-500 text-xs mt-0.5"><%= tool[:description] %></p>
+          </div>
+          <div class="text-xs text-gray-400 font-mono shrink-0">id: <em>Record ID</em></div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Direct Tool Tester -->
+  <div class="bg-white border border-gray-200 rounded-lg p-5 space-y-4">
+    <div>
+      <h2 class="font-semibold text-gray-900">Tool Tester</h2>
+      <p class="text-xs text-gray-400 mt-0.5">Invoke tools directly — no Gemlings or LLM required. Results show exactly what the agent would receive.</p>
+    </div>
+
+    <div class="flex gap-3 flex-wrap items-end">
+      <div>
+        <label class="block text-xs text-gray-500 mb-1">Tool</label>
+        <select id="tool-select" class="text-sm border border-gray-200 rounded px-2 py-1.5 min-w-64">
+          <optgroup label="Read tools">
+            <% @tools.select { |t| t[:category] == :read }.each do |tool| %>
+              <option value="<%= tool[:name] %>" data-needs-id="<%= tool[:requires_id] %>">
+                <%= tool[:name] %>
+              </option>
+            <% end %>
+          </optgroup>
+          <optgroup label="Mutate tools (fire events)">
+            <% @tools.select { |t| t[:category] == :mutate }.each do |tool| %>
+              <option value="<%= tool[:name] %>" data-needs-id="true">
+                <%= tool[:name] %>
+              </option>
+            <% end %>
+          </optgroup>
+        </select>
+      </div>
+
+      <div id="id-field">
+        <label class="block text-xs text-gray-500 mb-1">Record ID / State filter</label>
+        <input id="record-id" type="text" placeholder="e.g. 1 or 'draft'"
+               class="text-sm border border-gray-200 rounded px-2 py-1.5 w-40" />
+      </div>
+
+      <button id="invoke-btn" onclick="invokeTool()"
+              class="text-sm bg-gray-900 text-white px-4 py-1.5 rounded hover:bg-gray-700">
+        Run Tool
+      </button>
+    </div>
+
+    <div id="tool-result" class="hidden">
+      <p class="text-xs text-gray-500 mb-1">Result</p>
+      <pre id="result-content" class="bg-gray-50 border border-gray-200 rounded p-3 text-xs font-mono overflow-auto max-h-64"></pre>
+    </div>
+  </div>
+
+  <!-- System Prompt -->
+  <div class="bg-white border border-gray-200 rounded-lg p-5 space-y-3">
+    <h2 class="font-semibold text-gray-900">System Prompt</h2>
+    <p class="text-xs text-gray-400">This is the system instruction injected into the LLM when using <code>build_agent</code>. It communicates FOSM constraints so the agent respects the state machine.</p>
+    <pre class="bg-gray-50 border border-gray-200 rounded p-3 text-xs font-mono whitespace-pre-wrap"><%= @system_prompt %></pre>
+  </div>
+</div>
+
+<script>
+  async function invokeTool() {
+    const tool = document.getElementById('tool-select').value;
+    const id   = document.getElementById('record-id').value;
+    const btn  = document.getElementById('invoke-btn');
+    const resultBox = document.getElementById('tool-result');
+    const resultContent = document.getElementById('result-content');
+
+    btn.disabled = true;
+    btn.textContent = 'Running…';
+
+    try {
+      const resp = await fetch('<%= fosm.agent_invoke_admin_app_path(@slug) %>', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
+        },
+        body: JSON.stringify({ tool, record_id: id, filter: id })
+      });
+      const data = await resp.json();
+      resultContent.textContent = JSON.stringify(data, null, 2);
+      resultBox.classList.remove('hidden');
+    } catch(e) {
+      resultContent.textContent = 'Error: ' + e.message;
+      resultBox.classList.remove('hidden');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = 'Run Tool';
+    }
+  }
+</script>

data/app/views/fosm/admin/apps/show.html.erb

@@ -0,0 +1,114 @@
+<div class="p-6 space-y-8">
+  <div class="flex items-center gap-3">
+    <%= link_to "← FOSM Admin", fosm.admin_root_path, class: "text-sm text-blue-600 hover:underline" %>
+  </div>
+
+  <div class="flex items-start justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900"><%= @model_class.name.demodulize.humanize %></h1>
+      <p class="text-sm text-gray-500"><%= @model_class.name %> &middot; <%= @total %> total records</p>
+      <% if @stuck_count > 0 %>
+        <p class="text-sm text-amber-600 mt-1">&#x26A0; <%= @stuck_count %> record<%= @stuck_count == 1 ? "" : "s" %> may be stuck (no transition in 7+ days)</p>
+      <% end %>
+    </div>
+    <div class="flex gap-2 shrink-0">
+      <%= link_to "View all #{@model_class.name.demodulize.humanize.pluralize}",
+                  main_app.send("fosm_#{@slug.pluralize}_path"),
+                  class: "text-sm border border-gray-200 bg-white text-gray-700 px-3 py-1.5 rounded hover:bg-gray-50" %>
+      <%= link_to "+ New #{@model_class.name.demodulize.humanize}",
+                  main_app.send("new_fosm_#{@slug}_path"),
+                  class: "text-sm bg-gray-900 text-white px-3 py-1.5 rounded hover:bg-gray-700" %>
+      <%= link_to "Agent Tools",
+                  fosm.agent_admin_app_path(@slug),
+                  class: "text-sm border border-purple-200 bg-purple-50 text-purple-700 px-3 py-1.5 rounded hover:bg-purple-100" %>
+    </div>
+  </div>
+
+  <!-- State distribution -->
+  <div class="bg-white border border-gray-200 rounded-lg p-5">
+    <h2 class="font-semibold text-gray-900 mb-4">State Distribution</h2>
+    <div class="space-y-2">
+      <% @state_counts.each do |state_name, count| %>
+        <% state_def = @lifecycle.find_state(state_name) %>
+        <div class="flex items-center gap-3">
+          <span class="w-28 text-sm text-gray-600 flex items-center gap-1">
+            <%= state_name %>
+            <% if state_def&.initial? %><span class="text-xs text-blue-500">(initial)</span><% end %>
+            <% if state_def&.terminal? %><span class="text-xs text-red-500">(terminal)</span><% end %>
+          </span>
+          <div class="flex-1 h-2 bg-gray-100 rounded">
+            <% pct = @total > 0 ? (count.to_f / @total * 100).round : 0 %>
+            <div class="h-2 bg-blue-500 rounded" style="width: <%= pct %>%"></div>
+          </div>
+          <span class="text-sm font-medium text-gray-900 w-8 text-right"><%= count %></span>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Lifecycle definition -->
+  <div class="bg-white border border-gray-200 rounded-lg p-5">
+    <h2 class="font-semibold text-gray-900 mb-4">Lifecycle Definition</h2>
+    <table class="w-full text-sm">
+      <thead class="text-gray-500 text-xs uppercase border-b">
+        <tr>
+          <th class="pb-2 text-left">Event</th>
+          <th class="pb-2 text-left">From</th>
+          <th class="pb-2 text-left">To</th>
+          <th class="pb-2 text-left">Guards</th>
+          <th class="pb-2 text-left">Side Effects</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-50">
+        <% @lifecycle.events.each do |event| %>
+          <tr>
+            <td class="py-2 font-medium text-gray-900"><%= event.name %></td>
+            <td class="py-2 text-orange-600"><%= event.from_states.join(", ") %></td>
+            <td class="py-2 text-green-600"><%= event.to_state %></td>
+            <td class="py-2 text-gray-500"><%= event.guards.map(&:name).join(", ").presence || "—" %></td>
+            <td class="py-2 text-gray-500"><%= event.side_effects.map(&:name).join(", ").presence || "—" %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Recent transitions -->
+  <div class="bg-white border border-gray-200 rounded-lg p-5">
+    <h2 class="font-semibold text-gray-900 mb-4">Recent Transitions</h2>
+    <% if @recent_transitions.any? %>
+      <table class="w-full text-sm">
+        <thead class="text-gray-500 text-xs uppercase border-b">
+          <tr>
+            <th class="pb-2 text-left">Record ID</th>
+            <th class="pb-2 text-left">Event</th>
+            <th class="pb-2 text-left">From &rarr; To</th>
+            <th class="pb-2 text-left">Actor</th>
+            <th class="pb-2 text-left">When</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-50">
+          <% @recent_transitions.each do |t| %>
+            <tr>
+              <td class="py-2 text-gray-600">
+                <%= link_to "##{t.record_id}",
+                            main_app.send("fosm_#{@slug}_path", t.record_id),
+                            class: "text-blue-600 hover:underline" %>
+              </td>
+              <td class="py-2 font-medium"><%= t.event_name %></td>
+              <td class="py-2">
+                <span class="text-orange-600"><%= t.from_state %></span>
+                <span class="text-gray-400"> &rarr; </span>
+                <span class="text-green-600"><%= t.to_state %></span>
+              </td>
+              <td class="py-2 text-gray-500"><%= t.actor_label || t.actor_type || "—" %></td>
+              <td class="py-2 text-gray-400"><%= t.created_at.strftime("%b %d %H:%M") %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <p class="text-sm text-gray-400">No transitions recorded yet.</p>
+    <% end %>
+  </div>
+</div>

data/app/views/fosm/admin/dashboard/index.html.erb

@@ -0,0 +1,82 @@
+<div class="p-6 space-y-8">
+  <div>
+    <h1 class="text-2xl font-bold text-gray-900">FOSM Admin</h1>
+    <p class="text-sm text-gray-500 mt-1">
+      <%= @total_transitions %> total transitions logged &middot;
+      <%= @apps.size %> registered app<%= @apps.size == 1 ? "" : "s" %>
+    </p>
+  </div>
+
+  <% if @apps.empty? %>
+    <div class="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
+      <h2 class="font-semibold text-gray-700">No FOSM apps registered</h2>
+      <p class="text-sm text-gray-500 mt-2">
+        Run <code class="bg-gray-100 px-1 rounded">rails generate fosm:app my_app</code> to create one.
+      </p>
+    </div>
+  <% else %>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <% @apps.each do |app| %>
+        <div class="bg-white border border-gray-200 rounded-lg p-5 space-y-4">
+          <div class="flex items-center justify-between">
+            <h2 class="font-semibold text-gray-900"><%= app[:name] %></h2>
+            <span class="text-xs text-gray-400"><%= app[:total] %> records</span>
+          </div>
+
+          <div class="space-y-1">
+            <% app[:state_counts].each do |state, count| %>
+              <div class="flex items-center justify-between text-sm">
+                <span class="text-gray-600"><%= state %></span>
+                <span class="font-medium text-gray-900">
+                  <%= count %>
+                  <% if app[:total] > 0 %>
+                    <span class="text-gray-400 font-normal">(<%= (count.to_f / app[:total] * 100).round %>%)</span>
+                  <% end %>
+                </span>
+              </div>
+              <div class="h-1 bg-gray-100 rounded">
+                <% pct = app[:total] > 0 ? (count.to_f / app[:total] * 100).round : 0 %>
+                <div class="h-1 bg-blue-500 rounded" style="width: <%= pct %>%"></div>
+              </div>
+            <% end %>
+          </div>
+
+          <%= link_to "View Details →", fosm.admin_app_path(app[:slug]), class: "text-sm text-blue-600 hover:underline" %>
+        </div>
+      <% end %>
+    </div>
+
+    <div>
+      <h2 class="text-lg font-semibold text-gray-900 mb-3">Recent Transitions</h2>
+      <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
+            <tr>
+              <th class="px-4 py-2 text-left">Record</th>
+              <th class="px-4 py-2 text-left">Event</th>
+              <th class="px-4 py-2 text-left">From &rarr; To</th>
+              <th class="px-4 py-2 text-left">Actor</th>
+              <th class="px-4 py-2 text-left">When</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100">
+            <% @recent_transitions.each do |t| %>
+              <tr>
+                <td class="px-4 py-2 text-gray-600"><%= t.record_type.demodulize %> #<%= t.record_id %></td>
+                <td class="px-4 py-2 font-medium text-gray-900"><%= t.event_name %></td>
+                <td class="px-4 py-2 text-gray-600">
+                  <span class="text-orange-600"><%= t.from_state %></span>
+                  <span class="text-gray-400"> &rarr; </span>
+                  <span class="text-green-600"><%= t.to_state %></span>
+                </td>
+                <td class="px-4 py-2 text-gray-500"><%= t.actor_label || t.actor_type || "—" %></td>
+                <td class="px-4 py-2 text-gray-400 text-xs"><%= t.created_at.strftime("%b %d %H:%M") %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      <%= link_to "View all transitions →", fosm.admin_transitions_path, class: "text-sm text-blue-600 hover:underline mt-2 block" %>
+    </div>
+  <% end %>
+</div>

data/app/views/fosm/admin/settings/show.html.erb

@@ -0,0 +1,63 @@
+<div class="p-6 space-y-6">
+  <div>
+    <h1 class="text-2xl font-bold text-gray-900">FOSM Settings</h1>
+    <p class="text-sm text-gray-500 mt-1">Runtime configuration for the FOSM engine. Edit <code class="bg-gray-100 px-1 rounded text-xs">config/initializers/fosm.rb</code> to change these.</p>
+  </div>
+
+  <!-- LLM Provider Settings -->
+  <div class="bg-white border border-gray-200 rounded-lg p-5 space-y-4">
+    <div>
+      <h2 class="font-semibold text-gray-900">LLM Provider Settings</h2>
+      <p class="text-xs text-gray-400 mt-0.5">
+        API keys read from environment variables at runtime. Keys are never stored or displayed —
+        only presence is shown. Required for <code class="bg-gray-100 px-0.5 rounded">Fosm::Agent#build_agent</code>.
+      </p>
+    </div>
+
+    <div class="divide-y divide-gray-100">
+      <% @llm_providers.each do |provider| %>
+        <div class="flex items-center justify-between py-3">
+          <div class="flex items-center gap-3">
+            <% if provider[:configured] %>
+              <span class="w-2 h-2 rounded-full bg-green-400 shrink-0"></span>
+            <% else %>
+              <span class="w-2 h-2 rounded-full bg-gray-200 shrink-0"></span>
+            <% end %>
+            <div>
+              <p class="text-sm font-medium text-gray-800"><%= provider[:name] %></p>
+              <p class="text-xs text-gray-400 font-mono"><%= provider[:env_key] %></p>
+            </div>
+          </div>
+          <div class="text-right">
+            <% if provider[:configured] %>
+              <span class="text-xs font-medium text-green-700 bg-green-50 border border-green-200 px-2 py-0.5 rounded">Configured</span>
+              <p class="text-xs text-gray-400 mt-0.5"><%= provider[:hint] %></p>
+            <% else %>
+              <span class="text-xs text-gray-400 bg-gray-50 border border-gray-200 px-2 py-0.5 rounded">Not set</span>
+              <p class="text-xs text-gray-300 mt-0.5">Set <code class="bg-gray-50 px-0.5"><%= provider[:env_key] %></code> to enable</p>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Engine Configuration -->
+  <div class="bg-white border border-gray-200 rounded-lg p-5 space-y-4">
+    <div>
+      <h2 class="font-semibold text-gray-900">Engine Configuration</h2>
+      <p class="text-xs text-gray-400 mt-0.5">Active <code class="bg-gray-100 px-0.5 rounded">Fosm.config</code> values at runtime.</p>
+    </div>
+
+    <table class="w-full text-sm">
+      <tbody class="divide-y divide-gray-50">
+        <% @fosm_config.each do |key, value| %>
+          <tr>
+            <td class="py-2 pr-4 font-mono text-xs text-gray-500 w-48"><%= key %></td>
+            <td class="py-2 font-mono text-xs text-gray-800 break-all"><%= value %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

data/app/views/fosm/admin/transitions/index.html.erb

@@ -0,0 +1,65 @@
+<div class="p-6 space-y-6">
+  <div>
+    <h1 class="text-2xl font-bold text-gray-900">Transition Log</h1>
+    <p class="text-sm text-gray-500 mt-1">Complete audit trail of every FOSM state transition</p>
+  </div>
+
+  <!-- Filters -->
+  <%= form_with url: fosm.admin_transitions_path, method: :get, class: "flex gap-3 flex-wrap" do |f| %>
+    <%= f.select :model, [["All apps", nil]] + @model_names.map { |n| [n.demodulize, n] },
+                 { selected: params[:model] }, class: "text-sm border border-gray-200 rounded px-2 py-1" %>
+    <%= f.select :actor, [["All actors", nil], ["Human", "human"], ["AI Agent", "agent"]],
+                 { selected: params[:actor] }, class: "text-sm border border-gray-200 rounded px-2 py-1" %>
+    <%= f.submit "Filter", class: "text-sm bg-gray-800 text-white px-3 py-1 rounded hover:bg-gray-700" %>
+    <%= link_to "Clear", fosm.admin_transitions_path, class: "text-sm text-gray-500 py-1" %>
+  <% end %>
+
+  <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
+    <table class="w-full text-sm">
+      <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
+        <tr>
+          <th class="px-4 py-2 text-left">Record</th>
+          <th class="px-4 py-2 text-left">Event</th>
+          <th class="px-4 py-2 text-left">From &rarr; To</th>
+          <th class="px-4 py-2 text-left">Actor</th>
+          <th class="px-4 py-2 text-left">When</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-100">
+        <% @transitions.each do |t| %>
+          <tr>
+            <td class="px-4 py-2 text-gray-600">
+              <%= t.record_type.demodulize %> #<%= t.record_id %>
+            </td>
+            <td class="px-4 py-2 font-medium text-gray-900"><%= t.event_name %></td>
+            <td class="px-4 py-2">
+              <span class="text-orange-600"><%= t.from_state %></span>
+              <span class="text-gray-400"> &rarr; </span>
+              <span class="text-green-600"><%= t.to_state %></span>
+            </td>
+            <td class="px-4 py-2">
+              <% if t.by_agent? %>
+                <span class="text-purple-600 text-xs font-medium bg-purple-50 px-2 py-0.5 rounded">AI Agent</span>
+              <% else %>
+                <span class="text-gray-500"><%= t.actor_label || t.actor_type || "—" %></span>
+              <% end %>
+            </td>
+            <td class="px-4 py-2 text-gray-400 text-xs"><%= t.created_at.strftime("%b %d %Y %H:%M:%S") %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <% if @total_pages > 1 %>
+    <div class="flex items-center gap-3 text-sm text-gray-600">
+      <% if @current_page > 1 %>
+        <%= link_to "← Prev", fosm.admin_transitions_path(params.permit(:model, :event, :actor).merge(page: @current_page - 1)), class: "text-blue-600 hover:underline" %>
+      <% end %>
+      <span>Page <%= @current_page %> of <%= @total_pages %> (<%= @total_count %> total)</span>
+      <% if @current_page < @total_pages %>
+        <%= link_to "Next →", fosm.admin_transitions_path(params.permit(:model, :event, :actor).merge(page: @current_page + 1)), class: "text-blue-600 hover:underline" %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/fosm/admin/webhooks/index.html.erb

@@ -0,0 +1,51 @@
+<div class="p-6 space-y-6">
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900">Webhooks</h1>
+      <p class="text-sm text-gray-500 mt-1">Configure HTTP callbacks for FOSM transitions</p>
+    </div>
+    <%= link_to "Add Webhook", fosm.new_admin_webhook_path, class: "text-sm bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700" %>
+  </div>
+
+  <% if @webhooks.empty? %>
+    <div class="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
+      <p class="text-gray-600 font-medium">No webhooks configured</p>
+      <p class="text-sm text-gray-500 mt-1">Add a webhook to receive HTTP notifications when FOSM events fire.</p>
+    </div>
+  <% else %>
+    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
+          <tr>
+            <th class="px-4 py-2 text-left">App</th>
+            <th class="px-4 py-2 text-left">Event</th>
+            <th class="px-4 py-2 text-left">URL</th>
+            <th class="px-4 py-2 text-left">Status</th>
+            <th class="px-4 py-2 text-left">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100">
+          <% @webhooks.each do |webhook| %>
+            <tr>
+              <td class="px-4 py-2 text-gray-600"><%= webhook.model_class_name.demodulize %></td>
+              <td class="px-4 py-2 font-medium"><%= webhook.event_name %></td>
+              <td class="px-4 py-2 text-gray-600 font-mono text-xs truncate max-w-xs"><%= webhook.url %></td>
+              <td class="px-4 py-2">
+                <% if webhook.active? %>
+                  <span class="text-green-600 text-xs font-medium">Active</span>
+                <% else %>
+                  <span class="text-gray-400 text-xs">Disabled</span>
+                <% end %>
+              </td>
+              <td class="px-4 py-2">
+                <%= button_to "Delete", fosm.admin_webhook_path(webhook), method: :delete,
+                              data: { confirm: "Delete this webhook?" },
+                              class: "text-xs text-red-600 hover:underline" %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% end %>
+</div>

data/app/views/fosm/admin/webhooks/new.html.erb

@@ -0,0 +1,45 @@
+<div class="p-6 max-w-lg space-y-6">
+  <div>
+    <h1 class="text-2xl font-bold text-gray-900">Add Webhook</h1>
+    <p class="text-sm text-gray-500 mt-1">FOSM will POST a JSON payload to this URL when the event fires.</p>
+  </div>
+
+  <%= form_with model: @webhook, url: fosm.admin_webhooks_path, class: "space-y-4" do |f| %>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">FOSM App</label>
+      <%= f.select :model_class_name,
+                   @apps.map { |slug, klass| [klass.name.demodulize.humanize, klass.name] },
+                   { prompt: "Select an app" },
+                   class: "w-full border border-gray-200 rounded px-3 py-2 text-sm" %>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Event</label>
+      <%= f.text_field :event_name, placeholder: "e.g. send_invoice, pay, cancel",
+                       class: "w-full border border-gray-200 rounded px-3 py-2 text-sm" %>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Webhook URL</label>
+      <%= f.url_field :url, placeholder: "https://your-app.com/webhooks/fosm",
+                      class: "w-full border border-gray-200 rounded px-3 py-2 text-sm" %>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Secret Token (optional)</label>
+      <%= f.text_field :secret_token, placeholder: "Used for X-FOSM-Signature HMAC verification",
+                       class: "w-full border border-gray-200 rounded px-3 py-2 text-sm" %>
+      <p class="text-xs text-gray-500 mt-1">FOSM will include a HMAC-SHA256 signature header if set.</p>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <%= f.check_box :active, class: "rounded" %>
+      <label class="text-sm text-gray-700">Active</label>
+    </div>
+
+    <div class="flex gap-3 pt-2">
+      <%= f.submit "Create Webhook", class: "bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700" %>
+      <%= link_to "Cancel", fosm.admin_webhooks_path, class: "text-sm text-gray-500 py-2" %>
+    </div>
+  <% end %>
+</div>

data/app/views/layouts/fosm/application.html.erb

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>FOSM Admin</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta charset="utf-8">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-50 font-sans">
+    <div class="min-h-screen flex">
+      <!-- Sidebar -->
+      <div class="w-48 bg-white border-r border-gray-200 flex flex-col">
+        <div class="p-4 border-b border-gray-200">
+          <span class="font-bold text-gray-900 text-sm">FOSM</span>
+          <span class="text-xs text-gray-400 block">Admin</span>
+        </div>
+        <nav class="p-3 space-y-1 flex-1">
+          <%= link_to "Dashboard",   fosm.admin_root_path,        class: "block px-3 py-2 rounded text-sm text-gray-700 hover:bg-gray-100" %>
+          <%= link_to "Transitions", fosm.admin_transitions_path, class: "block px-3 py-2 rounded text-sm text-gray-700 hover:bg-gray-100" %>
+          <%= link_to "Webhooks",    fosm.admin_webhooks_path,    class: "block px-3 py-2 rounded text-sm text-gray-700 hover:bg-gray-100" %>
+        </nav>
+        <div class="p-3 border-t border-gray-100">
+          <%= link_to "Settings", fosm.admin_settings_path, class: "block px-3 py-2 rounded text-sm text-gray-500 hover:bg-gray-100" %>
+        </div>
+      </div>
+
+      <!-- Main content -->
+      <div class="flex-1 overflow-auto">
+        <% if notice.present? %>
+          <div class="bg-green-50 border-b border-green-200 px-6 py-3 text-sm text-green-700"><%= notice %></div>
+        <% end %>
+        <% if alert.present? %>
+          <div class="bg-red-50 border-b border-red-200 px-6 py-3 text-sm text-red-700"><%= alert %></div>
+        <% end %>
+        <%= yield %>
+      </div>
+    </div>
+  </body>
+</html>

data/app/views/layouts/fosm/rails/application.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Fosm rails</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <%= stylesheet_link_tag    "fosm/rails/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>