solid_loop 0.0.4

data/app/views/solid_loop/events/show.html.erb

@@ -0,0 +1,76 @@
+<div class="sl-page-header">
+  <div>
+    <h1 class="sl-page-header__title">Event #<%= @event.id %></h1>
+    <p class="sl-page-header__meta">
+      Name: <span class="sl-badge sl-badge--processing"><%= @event.name %></span>
+      <% if @event.eventable_type.present? %>
+        | Eventable: <strong><%= @event.eventable_type.demodulize %></strong>
+      <% end %>
+    </p>
+  </div>
+  <div class="sl-page-header__actions">
+    <%= link_to "Back to Loop", loop_path(@event.loop_id), class: "sl-btn" if @event.loop_id %>
+    <% if @event.eventable.is_a?(SolidLoop::ToolCall) && @event.eventable.mcp_session_id %>
+      <%= link_to "Replay in Inspector", inspector_mcp_session_path(@event.eventable.mcp_session_id, replay_tool_call_id: @event.eventable.id), class: "sl-btn sl-btn--primary" %>
+    <% end %>
+  </div>
+</div>
+
+<div class="sl-layout-split">
+  <div class="sl-layout-split__main">
+    <div class="sl-card">
+      <h3>Request Data</h3>
+      <div class="sl-json sl-mt-10"><%= JSON.pretty_generate(@event.request_data || {}) rescue @event.request_data %></div>
+    </div>
+
+    <div class="sl-card">
+      <h3>Response Data</h3>
+      <div class="sl-json sl-mt-10"><%= JSON.pretty_generate(@event.response_data || {}) rescue @event.response_data %></div>
+    </div>
+
+    <% if @event.log.present? %>
+      <div class="sl-card">
+        <h3>Log</h3>
+        <div class="sl-json sl-pre-wrap sl-mt-10"><%= @event.log %></div>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="sl-layout-split__sidebar">
+    <div class="sl-card">
+      <h3>Relations</h3>
+      <div class="sl-mt-10" style="display: flex; flex-direction: column; gap: 8px;">
+        <%= link_to "Loop Details", loop_path(@event.loop_id), class: "sl-btn sl-btn--small" if @event.loop_id %>
+        <%= link_to "Message", message_path(@event.message_id), class: "sl-btn sl-btn--small" if @event.message_id %>
+        <% if @event.eventable.is_a?(SolidLoop::ToolCall) %>
+          <%= link_to "Tool Call", tool_call_path(@event.eventable), class: "sl-btn sl-btn--small" %>
+          <% if @event.eventable.mcp_session_id %>
+            <%= link_to "MCP Session", mcp_session_path(@event.eventable.mcp_session_id), class: "sl-btn sl-btn--small" %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="sl-card">
+      <h3>Metadata</h3>
+      <div class="sl-mt-10">
+        <div class="sl-message__footer-item">
+          Created: <span class="sl-message__footer-value"><%= @event.created_at.strftime("%Y-%m-%d %H:%M:%S") %></span>
+        </div>
+        <div class="sl-message__footer-item">
+          Duration: <span class="sl-message__footer-value"><%= number_with_precision(@event.duration, precision: 3) %>s</span>
+        </div>
+        <% if @event.http_method.present? %>
+          <div class="sl-message__footer-item">
+            HTTP: <span class="sl-message__footer-value"><%= @event.http_method %></span>
+          </div>
+        <% end %>
+        <% if @event.url.present? %>
+          <div class="sl-message__footer-item">
+            URL: <span class="sl-message__footer-value"><%= @event.url %></span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/solid_loop/loops/index.html.erb

@@ -0,0 +1,83 @@
+<div class="sl-page-header">
+  <h2>Loops</h2>
+</div>
+
+<div class="sl-card">
+  <%= form_with url: loops_path, method: :get, class: "sl-page-header__actions", style: "justify-content: flex-start; flex-wrap: wrap;" do |f| %>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span class="sl-stat-card__label">Status:</span>
+      <%= f.select :status, 
+          options_for_select([["All Statuses", ""]] + SolidLoop::Loop.statuses.keys.map { |s| [s.upcase, s] }, params[:status]), 
+          {}, 
+          class: "sl-btn sl-btn--small", 
+          onchange: "this.form.submit()" %>
+    </div>
+    
+    <div style="display: flex; align-items: center; gap: 8px; margin-left: 20px;">
+      <span class="sl-stat-card__label">Agent:</span>
+      <%= f.select :agent_class_name, 
+          options_for_select([["All Agents", ""]] + SolidLoop::Loop.distinct.pluck(:agent_class_name).compact, params[:agent_class_name]), 
+          {}, 
+          class: "sl-btn sl-btn--small", 
+          onchange: "this.form.submit()" %>
+    </div>
+
+    <% if params[:status].present? || params[:agent_class_name].present? %>
+      <%= link_to "Clear Filters", loops_path, class: "sl-btn sl-btn--small", style: "margin-left: 20px;" %>
+    <% end %>
+  <% end %>
+</div>
+
+<table class="sl-table">
+  <thead>
+    <tr>
+      <th class="sl-table__th">ID</th>
+      <th class="sl-table__th">Agent</th>
+      <th class="sl-table__th">Status</th>
+      <th class="sl-table__th">Cost</th>
+      <th class="sl-table__th">Steps</th>
+      <th class="sl-table__th">Created At</th>
+      <th class="sl-table__th"></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @loops.each do |loop| %>
+      <tr>
+        <td class="sl-table__td"><%= loop.id %></td>
+        <td class="sl-table__td">
+          <strong><%= loop.agent_class_name %></strong>
+          <% if loop.subject_type.present? || loop.subject_id.present? %>
+            <div style="font-size: 0.8em; color: var(--sl-muted-text);">
+              <%= sl_subject_link(loop) %>
+            </div>
+          <% end %>
+        </td>
+        <td class="sl-table__td">
+          <span class="sl-badge sl-badge--<%= loop.status %>"><%= loop.status.upcase %></span>
+          <% if (kind = sl_failure_kind(loop)) %>
+            <span class="sl-badge sl-badge--<%= kind == :infra ? 'frozen' : 'error' %>"
+                  title="<%= sl_failure_reason(loop) %>">
+              <%= kind == :infra ? "INFRA" : "AGENT" %>
+            </span>
+          <% end %>
+          <% if loop.admin_frozen? %>
+            <span class="sl-badge sl-badge--frozen">FROZEN</span>
+          <% end %>
+          <% if loop.status == "failed" && (reason = sl_failure_reason(loop)) %>
+            <div style="font-size: 0.8em; color: var(--sl-muted-text); margin-top: 4px;" title="<%= reason %>">
+              <%= reason %>
+            </div>
+          <% end %>
+        </td>
+        <td class="sl-table__td"><%= sl_money(loop.cost) %></td>
+        <td class="sl-table__td"><%= loop.step_count %></td>
+        <td class="sl-table__td"><%= loop.created_at.strftime("%Y-%m-%d %H:%M") %></td>
+        <td class="sl-table__td" style="text-align: right;">
+          <%= link_to "View", loop_path(loop), class: "sl-btn sl-btn--small" %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%= render "solid_loop/shared/pagination", pagination: @pagination %>

data/app/views/solid_loop/loops/show.html.erb

@@ -0,0 +1,148 @@
+<div class="sl-card">
+  <div class="sl-page-header">
+    <div>
+      <h1 class="sl-page-header__title">Loop #<%= @loop.id %></h1>
+      <p class="sl-page-header__meta">Agent: <%= @loop.agent_class_name %></p>
+    </div>
+    <div class="sl-page-header__actions">
+      <% if @loop.observe_enabled? %>
+        <span class="sl-badge sl-badge--live">LIVE</span>
+      <% end %>
+      <span class="sl-badge sl-badge--<%= @loop.status %>"><%= @loop.status.upcase %></span>
+
+      <% if @loop.observe_enabled? %>
+        <%= button_to "Disable Live View", observe_loop_path(@loop), method: :patch, class: "sl-btn sl-btn--small sl-btn--primary" %>
+      <% else %>
+        <%= button_to "Enable Live View", observe_loop_path(@loop), method: :patch, class: "sl-btn sl-btn--small" %>
+      <% end %>
+
+      <% if @loop.admin_frozen? %>
+        <%= button_to "Unfreeze", unfreeze_loop_path(@loop), method: :patch, class: "sl-btn sl-btn--small sl-btn--primary" %>
+      <% else %>
+        <%= button_to "Freeze", freeze_loop_path(@loop), method: :patch, class: "sl-btn sl-btn--small" %>
+      <% end %>
+
+      <%= button_to "Force Stop", force_stop_loop_path(@loop), method: :patch, class: "sl-btn sl-btn--small sl-btn--error", disabled: @loop.status == "failed" %>
+    </div>
+  </div>
+</div>
+
+<div class="sl-layout-split">
+  <div class="sl-layout-split__main">
+    <div class="sl-page-header" style="margin-bottom: 12px;">
+      <h3>Messages</h3>
+      <%= form_with url: loop_path(@loop), method: :get, class: "sl-page-header__actions", style: "justify-content: flex-start; flex-wrap: wrap;" do |f| %>
+        <%= f.select :role,
+            options_for_select([["All Roles", ""]] + SolidLoop::Message.roles.keys.map { |r| [r.upcase, r] }, params[:role]),
+            {},
+            class: "sl-btn sl-btn--small",
+            onchange: "this.form.submit()" %>
+        <label class="sl-stat-card__label" style="display: flex; align-items: center; gap: 6px;">
+          <%= f.check_box :has_tool_call, { checked: params[:has_tool_call] == "1", onchange: "this.form.submit()" }, "1", "0" %>
+          Tool messages
+        </label>
+        <label class="sl-stat-card__label" style="display: flex; align-items: center; gap: 6px;">
+          <%= f.check_box :has_reasoning, { checked: params[:has_reasoning] == "1", onchange: "this.form.submit()" }, "1", "0" %>
+          Reasoning
+        </label>
+        <% if params[:role].present? || params[:has_tool_call] == "1" || params[:has_reasoning] == "1" %>
+          <%= link_to "Clear", loop_path(@loop), class: "sl-btn sl-btn--small" %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <% if @loop.observe_enabled? && defined?(Turbo) %>
+      <%= turbo_stream_from "solid_loop:loop:#{@loop.id}" %>
+    <% end %>
+
+    <div id="sl-messages" class="sl-mt-15">
+      <%= render partial: "solid_loop/messages/message", collection: @messages %>
+    </div>
+
+    <%= render "solid_loop/shared/pagination", pagination: @messages_pagination %>
+  </div>
+
+  <div class="sl-layout-split__sidebar">
+    <div class="sl-card">
+      <h3>Run Metrics</h3>
+      <div class="sl-mt-10">
+        <div class="sl-message__footer-item">
+          Tokens: <span class="sl-message__footer-value">P<%= @loop.tokens_prompt %> + C<%= @loop.tokens_completion %></span>
+        </div>
+        <% if @loop.tokens_prompt_cached > 0 %>
+          <div class="sl-message__footer-item" style="color: var(--sl-success);">
+            Cached: <span class="sl-message__footer-value" style="color: var(--sl-success);"><%= @loop.tokens_prompt_cached %></span>
+          </div>
+        <% end %>
+        <div class="sl-message__footer-item">
+          Total Cost: <span class="sl-message__footer-value" style="color: var(--sl-accent); font-size: 1.1em;"><%= sl_money(@loop.cost) %></span>
+        </div>
+
+        <hr style="border: 0; border-top: 1px solid var(--sl-border-color); margin: 10px 0;">
+
+        <div class="sl-message__footer-item">
+          LLM Time: <span class="sl-message__footer-value"><%= number_with_precision(@loop.duration_generation&.to_f || 0, precision: 2) %>s</span>
+        </div>
+        <div class="sl-message__footer-item">
+          Parsing Time: <span class="sl-message__footer-value"><%= number_with_precision(@loop.duration_parsing&.to_f || 0, precision: 2) %>s</span>
+        </div>
+        <div class="sl-message__footer-item">
+          Tool Time: <span class="sl-message__footer-value"><%= number_with_precision(@loop.duration_tools&.to_f || 0, precision: 2) %>s</span>
+        </div>
+        <div class="sl-message__footer-item">
+          Total Duration: <span class="sl-message__footer-value"><%= number_with_precision(@loop.duration_total&.to_f || 0, precision: 2) %>s</span>
+        </div>
+        <div class="sl-message__footer-item">
+          Steps: <span class="sl-message__footer-value"><%= @loop.step_count %></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="sl-card">
+      <h3>Cross-links</h3>
+      <div class="sl-mt-10" style="display: flex; flex-direction: column; gap: 8px;">
+        <%= link_to "View all Events", events_path(loop_id: @loop.id), class: "sl-btn sl-btn--small" %>
+        <%= link_to "View all Tool Calls", tool_calls_path(loop_id: @loop.id), class: "sl-btn sl-btn--small" %>
+        <%= link_to "View all Messages", messages_path(loop_id: @loop.id), class: "sl-btn sl-btn--small" %>
+        <% if @loop.mcp_sessions.any? %>
+          <% @loop.mcp_sessions.each do |session| %>
+            <%= link_to "MCP Inspector: #{session.mcp_name}", inspector_mcp_session_path(session), class: "sl-btn sl-btn--small sl-btn--primary" %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="sl-card">
+      <h3>State Details</h3>
+      <div class="sl-json"><%= JSON.pretty_generate({ observe_enabled: @loop.observe_enabled, frozen_at: @loop.frozen_at, metadata: @loop.metadata }) %></div>
+    </div>
+  </div>
+</div>
+
+<script>
+  (function() {
+    const messages = document.getElementById('sl-messages');
+    const contentArea = document.querySelector('.sl-content-area');
+    let autoScroll = true;
+
+    if (messages && contentArea) {
+      // Auto-scroll on initial load
+      contentArea.scrollTop = contentArea.scrollHeight;
+
+      // Listen for new items being added to the list (via Turbo Streams)
+      const observer = new MutationObserver((mutations) => {
+        if (autoScroll) {
+          contentArea.scrollTop = contentArea.scrollHeight;
+        }
+      });
+
+      observer.observe(messages, { childList: true });
+
+      // Pause auto-scroll if user scrolls up
+      contentArea.addEventListener('scroll', () => {
+        const atBottom = Math.abs(contentArea.scrollHeight - contentArea.scrollTop - contentArea.clientHeight) < 20;
+        autoScroll = atBottom;
+      });
+    }
+  })();
+</script>

data/app/views/solid_loop/mcp_inbound_sessions/index.html.erb

@@ -0,0 +1,53 @@
+<div class="sl-card">
+  <%= form_with url: mcp_inbound_sessions_path, method: :get, class: "sl-page-header__actions", style: "justify-content: flex-start; flex-wrap: wrap;" do |f| %>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span class="sl-stat-card__label">Server:</span>
+      <%= f.text_field :server_name, value: params[:server_name], class: "sl-btn sl-btn--small", placeholder: "search" %>
+    </div>
+    <div style="display: flex; align-items: center; gap: 8px; margin-left: 20px;">
+      <span class="sl-stat-card__label">Principal:</span>
+      <%= f.text_field :principal, value: params[:principal], class: "sl-btn sl-btn--small", placeholder: "client" %>
+    </div>
+    <div style="display: flex; align-items: center; gap: 8px; margin-left: 20px;">
+      <span class="sl-stat-card__label">Session ID:</span>
+      <%= f.text_field :session_id, value: params[:session_id], class: "sl-btn sl-btn--small", placeholder: "session-..." %>
+    </div>
+    <%= f.submit "Filter", class: "sl-btn sl-btn--small sl-btn--primary", style: "margin-left: 12px;" %>
+    <% if params[:server_name].present? || params[:principal].present? || params[:session_id].present? %>
+      <%= link_to "Clear Filters", mcp_inbound_sessions_path, class: "sl-btn sl-btn--small", style: "margin-left: 12px;" %>
+    <% end %>
+  <% end %>
+</div>
+
+<table class="sl-table">
+  <thead>
+    <tr>
+      <th class="sl-table__th">ID</th>
+      <th class="sl-table__th">Server</th>
+      <th class="sl-table__th">Principal</th>
+      <th class="sl-table__th">Session ID</th>
+      <th class="sl-table__th">Status</th>
+      <th class="sl-table__th">Last Used</th>
+      <th class="sl-table__th"></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @mcp_inbound_sessions.each do |session| %>
+      <tr>
+        <td class="sl-table__td"><%= session.id %></td>
+        <td class="sl-table__td"><%= session.server_name %></td>
+        <td class="sl-table__td"><%= session.principal.presence || "-" %></td>
+        <td class="sl-table__td"><%= session.session_id %></td>
+        <td class="sl-table__td">
+          <span class="sl-badge sl-badge--<%= session.terminated? ? 'error' : 'success' %>"><%= session.terminated? ? 'TERMINATED' : 'ACTIVE' %></span>
+        </td>
+        <td class="sl-table__td"><%= session.last_used_at&.strftime("%Y-%m-%d %H:%M:%S") || "-" %></td>
+        <td class="sl-table__td" style="text-align: right; white-space: nowrap;">
+          <%= link_to "View", mcp_inbound_session_path(session), class: "sl-btn sl-btn--small" %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%= render "solid_loop/shared/pagination", pagination: @pagination %>

data/app/views/solid_loop/mcp_inbound_sessions/show.html.erb

@@ -0,0 +1,78 @@
+<div class="sl-page-header">
+  <div>
+    <h1 class="sl-page-header__title">Inbound MCP Session #<%= @mcp_inbound_session.id %></h1>
+    <p class="sl-page-header__meta">
+      Server: <strong><%= @mcp_inbound_session.server_name %></strong>
+      | Principal: <strong><%= @mcp_inbound_session.principal.presence || "-" %></strong>
+      | Session: <%= @mcp_inbound_session.session_id %>
+    </p>
+  </div>
+  <div class="sl-page-header__actions">
+    <span class="sl-badge sl-badge--<%= @mcp_inbound_session.terminated? ? 'error' : 'success' %>"><%= @mcp_inbound_session.terminated? ? 'TERMINATED' : 'ACTIVE' %></span>
+  </div>
+</div>
+
+<div class="sl-layout-split">
+  <div class="sl-layout-split__main">
+    <div class="sl-card">
+      <h3>Recent Events</h3>
+      <% if @recent_events.any? %>
+        <table class="sl-table sl-mt-10">
+          <thead>
+            <tr>
+              <th class="sl-table__th">ID</th>
+              <th class="sl-table__th">Name</th>
+              <th class="sl-table__th">Duration</th>
+              <th class="sl-table__th">Created</th>
+              <th class="sl-table__th"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @recent_events.each do |event| %>
+              <tr>
+                <td class="sl-table__td"><%= event.id %></td>
+                <td class="sl-table__td"><%= event.name %></td>
+                <td class="sl-table__td"><%= "%.3fs" % event.duration %></td>
+                <td class="sl-table__td"><%= event.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+                <td class="sl-table__td" style="text-align: right;">
+                  <%= link_to "View", event_path(event), class: "sl-btn sl-btn--small" %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      <% else %>
+        <p class="sl-mt-10" style="color: var(--sl-muted-text);">No events recorded for this session yet.</p>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="sl-layout-split__sidebar">
+    <div class="sl-card">
+      <h3>Details</h3>
+      <table class="sl-table sl-mt-10">
+        <tbody>
+          <tr>
+            <td class="sl-table__td">Created</td>
+            <td class="sl-table__td"><%= @mcp_inbound_session.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+          </tr>
+          <tr>
+            <td class="sl-table__td">Last used</td>
+            <td class="sl-table__td"><%= @mcp_inbound_session.last_used_at&.strftime("%Y-%m-%d %H:%M:%S") || "-" %></td>
+          </tr>
+          <tr>
+            <td class="sl-table__td">Terminated</td>
+            <td class="sl-table__td"><%= @mcp_inbound_session.terminated_at&.strftime("%Y-%m-%d %H:%M:%S") || "-" %></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="sl-card">
+      <h3>Relations</h3>
+      <div class="sl-mt-10" style="display: flex; flex-direction: column; gap: 8px;">
+        <%= link_to "All Inbound Events", events_path(eventable_type: "SolidLoop::McpInboundSession"), class: "sl-btn sl-btn--small" %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/solid_loop/mcp_sessions/_tool_output.html.erb

@@ -0,0 +1,11 @@
+<div class="sl-json sl-pre-wrap" style="color: <%= is_error ? 'var(--sl-error)' : 'var(--sl-text-color)' %>">
+  <%= result %>
+</div>
+<div class="sl-mt-10 sl-page-header__meta" style="font-size: 0.8em;">
+  Duration: <%= number_with_precision(duration, precision: 3) %>s
+</div>
+<% if log.present? %>
+  <div class="sl-json sl-pre-wrap sl-mt-10" style="font-size: 0.75em; color: var(--sl-muted-text);">
+    <%= log %>
+  </div>
+<% end %>

data/app/views/solid_loop/mcp_sessions/index.html.erb

@@ -0,0 +1,46 @@
+<div class="sl-card">
+  <%= form_with url: mcp_sessions_path, method: :get, class: "sl-page-header__actions", style: "justify-content: flex-start; flex-wrap: wrap;" do |f| %>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span class="sl-stat-card__label">MCP Name:</span>
+      <%= f.text_field :mcp_name, value: params[:mcp_name], class: "sl-btn sl-btn--small", placeholder: "workspace" %>
+    </div>
+    <div style="display: flex; align-items: center; gap: 8px; margin-left: 20px;">
+      <span class="sl-stat-card__label">Session ID:</span>
+      <%= f.text_field :session_id, value: params[:session_id], class: "sl-btn sl-btn--small", placeholder: "mcp-session-..." %>
+    </div>
+    <%= f.submit "Filter", class: "sl-btn sl-btn--small sl-btn--primary", style: "margin-left: 12px;" %>
+    <% if params[:mcp_name].present? || params[:session_id].present? %>
+      <%= link_to "Clear Filters", mcp_sessions_path, class: "sl-btn sl-btn--small", style: "margin-left: 12px;" %>
+    <% end %>
+  <% end %>
+</div>
+
+<table class="sl-table">
+  <thead>
+    <tr>
+      <th class="sl-table__th">ID</th>
+      <th class="sl-table__th">MCP Name</th>
+      <th class="sl-table__th">Transport</th>
+      <th class="sl-table__th">Session ID</th>
+      <th class="sl-table__th">Created At</th>
+      <th class="sl-table__th"></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @mcp_sessions.each do |session| %>
+      <tr>
+        <td class="sl-table__td"><%= session.id %></td>
+        <td class="sl-table__td"><%= session.mcp_name %></td>
+        <td class="sl-table__td"><%= session.transport_kind %></td>
+        <td class="sl-table__td"><%= session.session_id %></td>
+        <td class="sl-table__td"><%= session.created_at.strftime("%Y-%m-%d %H:%M") %></td>
+        <td class="sl-table__td" style="text-align: right; white-space: nowrap;">
+          <%= link_to "Inspector", inspector_mcp_session_path(session), class: "sl-btn sl-btn--small sl-btn--primary" %>
+          <%= link_to "View", mcp_session_path(session), class: "sl-btn sl-btn--small" %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%= render "solid_loop/shared/pagination", pagination: @pagination %>

data/app/views/solid_loop/mcp_sessions/inspector.html.erb

@@ -0,0 +1,94 @@
+<div class="sl-page-header">
+  <div>
+    <h1 class="sl-page-header__title">MCP Inspector: <%= @mcp_session.mcp_name %></h1>
+    <p class="sl-page-header__meta">Loop #<%= @mcp_session.loop_id %> | Transport: <%= @mcp_session.transport_kind %> | Session: <%= @mcp_session.session_id %></p>
+  </div>
+  <div class="sl-page-header__actions">
+    <%= link_to "Back to Loop", loop_path(@mcp_session.loop_id), class: "sl-btn" %>
+  </div>
+</div>
+
+<div class="sl-layout-split">
+  <div class="sl-layout-split__sidebar" style="width: 250px;">
+    <div class="sl-card">
+      <h3>Tools</h3>
+      <nav class="sl-mt-10" style="display: flex; flex-direction: column; gap: 4px;">
+        <% @tools.each do |tool| %>
+          <%= link_to inspector_mcp_session_path(@mcp_session, tool_name: tool.name), 
+              class: "sl-btn sl-btn--small #{'sl-btn--primary' if @selected_tool&.name == tool.name}",
+              style: "text-align: left; justify-content: flex-start;" do %>
+            <%= tool.name %>
+          <% end %>
+        <% end %>
+      </nav>
+    </div>
+  </div>
+
+  <div class="sl-layout-split__main">
+    <% if @selected_tool %>
+      <div class="sl-card">
+        <h2 class="sl-page-header__title"><%= @selected_tool.name %></h2>
+        <p class="sl-page-header__meta sl-mt-10"><%= @selected_tool.description %></p>
+
+        <%= form_with url: run_tool_mcp_session_path(@mcp_session), method: :post, class: "sl-mt-15" do |f| %>
+          <%= hidden_field_tag :tool_name, @selected_tool.name %>
+          
+          <div style="display: flex; flex-direction: column; gap: 15px;">
+            <% 
+               properties = @selected_tool.input_schema&.dig("properties") || {} 
+               required = @selected_tool.input_schema&.dig("required") || []
+            %>
+            
+            <% properties.each do |key, schema| %>
+              <div>
+                <label class="sl-stat-card__label" style="display: block; margin-bottom: 5px;">
+                  <%= key %> <%= required.include?(key) ? "*" : "" %>
+                  <% if schema["type"] %>
+                    <span style="font-weight: normal; opacity: 0.7;">(<%= schema["type"] %>)</span>
+                  <% end %>
+                </label>
+                
+                <% 
+                   value = @replay_arguments&.dig(key) 
+                   value = value.to_json if value.is_a?(Hash) || value.is_a?(Array)
+                %>
+
+                <% if schema["type"] == "boolean" %>
+                  <%= select_tag "arguments[#{key}]", options_for_select([["True", true], ["False", false]], value), class: "sl-json", style: "width: 100%; height: auto;" %>
+                <% else %>
+                  <%= text_area_tag "arguments[#{key}]", value, rows: 2, class: "sl-json", style: "width: 100%;", placeholder: schema["description"] %>
+                <% end %>
+                
+                <% if schema["description"] %>
+                  <p style="font-size: 0.75em; color: var(--sl-muted-text); margin-top: 4px;"><%= schema["description"] %></p>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+
+          <div class="sl-mt-15">
+            <%= f.submit "Run Tool", class: "sl-btn sl-btn--primary" %>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="sl-card">
+        <h3>Output</h3>
+        <div id="sl-inspector-output" class="sl-mt-10">
+          <div class="sl-json" style="min-height: 100px; color: var(--sl-muted-text); font-style: italic;">
+            Tool output will appear here...
+          </div>
+        </div>
+      </div>
+      
+      <div class="sl-card">
+        <h3>Input Schema</h3>
+        <div class="sl-json sl-mt-10"><%= JSON.pretty_generate(@selected_tool.input_schema) %></div>
+      </div>
+    <% else %>
+      <div class="sl-card" style="text-align: center; padding: 50px;">
+        <p style="color: var(--sl-muted-text);">Select a tool from the sidebar to begin.</p>
+      </div>
+    <% end %>
+  </div>
+</div>