ask-rails 0.3.0 → 0.11.0

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

@@ -5,75 +5,173 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0d0d0f; color: #e1e1e6; height: 100vh; display: flex; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0d0d0f; color: #e1e1e6; height: 100vh; display: flex; overflow: hidden; }
     a { color: #8b8bf0; text-decoration: none; }
     a:hover { color: #a0a0ff; }
 
-    .sidebar { width: 280px; background: #121218; border-right: 1px solid #1e1e28; display: flex; flex-direction: column; flex-shrink: 0; }
-    .sidebar-header { padding: 16px; border-bottom: 1px solid #1e1e28; }
+    /* --- Sidebar --- */
+    .sidebar { width: 300px; background: #121218; border-right: 1px solid #1e1e28; display: flex; flex-direction: column; flex-shrink: 0; }
+    .sidebar-header { padding: 16px; border-bottom: 1px solid #1e1e28; display: flex; justify-content: space-between; align-items: center; }
     .sidebar-header h1 { font-size: 16px; font-weight: 600; color: #c0c0d0; }
-    .sidebar-header p { font-size: 11px; color: #606070; margin-top: 2px; }
+    .sidebar-header .model-badge { font-size: 10px; background: #1a1a28; color: #7070a0; padding: 2px 8px; border-radius: 4px; }
+    .sidebar-tabs { display: flex; border-bottom: 1px solid #1e1e28; }
+    .sidebar-tab { flex: 1; padding: 10px; text-align: center; font-size: 12px; color: #606070; cursor: pointer; border-bottom: 2px solid transparent; }
+    .sidebar-tab:hover { color: #9090a0; }
+    .sidebar-tab.active { color: #c0c0d0; border-bottom-color: #5050a0; }
     .sidebar-actions { padding: 12px 16px; }
-    .sidebar-actions a { display: block; padding: 8px 12px; background: #1a1a24; border-radius: 6px; font-size: 13px; text-align: center; color: #c0c0d0; }
-    .sidebar-actions a:hover { background: #222230; }
-    .session-list { flex: 1; overflow-y: auto; padding: 8px; }
-    .session-item { padding: 10px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; color: #9090a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .sidebar-actions .new-btn { display: block; padding: 8px 12px; background: #1a1a24; border-radius: 6px; font-size: 13px; text-align: center; color: #c0c0d0; cursor: pointer; }
+    .sidebar-actions .new-btn:hover { background: #222230; }
+    .sidebar-content { flex: 1; overflow-y: auto; }
+
+    /* Session list */
+    .session-list { padding: 8px; }
+    .session-item { padding: 10px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; color: #9090a0; }
     .session-item:hover { background: #1a1a24; color: #c0c0d0; }
     .session-item.active { background: #1e1e30; color: #d0d0e0; }
-    .session-item .time { font-size: 11px; color: #505060; margin-top: 2px; }
-    .sidebar-footer { padding: 12px 16px; border-top: 1px solid #1e1e28; font-size: 11px; color: #404050; }
+    .session-item .sess-preview { font-size: 12px; color: #606070; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .session-item .sess-meta { font-size: 11px; color: #404050; margin-top: 2px; display: flex; gap: 8px; }
+    .session-item .sess-delete { float: right; color: #404050; cursor: pointer; padding: 2px 4px; border-radius: 3px; }
+    .session-item .sess-delete:hover { color: #ff5050; background: #2a1a1a; }
+
+    /* Audit log panel */
+    .audit-panel { display: none; padding: 8px; }
+    .audit-panel.active { display: block; }
+    .audit-entry { padding: 8px 10px; border-radius: 4px; font-size: 12px; margin-bottom: 4px; background: #0d0d12; }
+    .audit-entry .audit-tool { font-weight: 600; color: #9090c0; }
+    .audit-entry .audit-status { font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; }
+    .audit-entry .audit-status.success { background: #0a1a0a; color: #40a040; }
+    .audit-entry .audit-status.rejected { background: #1a0a0a; color: #c04040; }
+    .audit-entry .audit-status.error { background: #1a0a0a; color: #c04040; }
+    .audit-entry .audit-time { font-size: 10px; color: #404050; }
+    .audit-entry .audit-duration { font-size: 10px; color: #505060; margin-left: 4px; }
+    .sidebar-footer { padding: 8px 16px; border-top: 1px solid #1e1e28; font-size: 10px; color: #303040; display: flex; justify-content: space-between; }
 
+    /* --- Main chat area --- */
     .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-    .chat-header { padding: 14px 20px; border-bottom: 1px solid #1e1e28; font-size: 13px; color: #808090; }
-    .messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
-    .message { max-width: 80%; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
+    .chat-header { padding: 14px 20px; border-bottom: 1px solid #1e1e28; font-size: 13px; color: #808090; display: flex; justify-content: space-between; align-items: center; }
+    .chat-header .env-badge { font-size: 10px; padding: 2px 8px; border-radius: 4px; background: #1a1a28; color: #606090; }
+
+    /* Messages */
+    .messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
+    .message { max-width: 85%; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
     .message.user { background: #1e1e30; align-self: flex-end; border-bottom-right-radius: 4px; }
     .message.assistant { background: #181825; align-self: flex-start; border-bottom-left-radius: 4px; }
     .message.thinking { background: #151520; align-self: flex-start; font-style: italic; color: #707080; font-size: 13px; border-left: 2px solid #404068; }
     .message.system { background: #101018; align-self: center; color: #505060; font-size: 12px; text-align: center; }
-    .message .label { font-size: 11px; color: #606070; margin-bottom: 4px; }
+    .message .msg-label { font-size: 11px; color: #606070; margin-bottom: 4px; font-weight: 500; }
     .empty-state { flex: 1; display: flex; align-items: center; justify-content: center; color: #404050; font-size: 14px; text-align: center; padding: 40px; }
-    .empty-state p { max-width: 300px; }
+    .empty-state p { max-width: 300px; line-height: 1.6; }
 
+    /* Tool execution cards */
+    .tool-card { align-self: flex-start; width: 100%; max-width: 85%; margin: 4px 0; }
+    .tool-card-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #151520; border: 1px solid #1e1e30; border-radius: 8px; cursor: pointer; font-size: 13px; color: #9090b0; }
+    .tool-card-header:hover { background: #1a1a28; }
+    .tool-card-header .tool-icon { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
+    .tool-card-header .tool-icon.start { background: #1a2a1a; color: #40c040; }
+    .tool-card-header .tool-icon.error { background: #2a1a1a; color: #c04040; }
+    .tool-card-header .tool-name { font-weight: 600; }
+    .tool-card-header .tool-status { font-size: 11px; color: #606080; }
+    .tool-card-header .tool-duration { font-size: 11px; color: #505060; margin-left: auto; }
+    .tool-card-body { display: none; padding: 10px 12px; background: #101018; border: 1px solid #1e1e30; border-top: none; border-radius: 0 0 8px 8px; font-size: 12px; color: #808090; }
+    .tool-card-body.open { display: block; }
+    .tool-card-body pre { background: #0a0a10; padding: 8px; border-radius: 4px; overflow-x: auto; font-size: 11px; color: #b0b0c0; margin-top: 6px; }
+    .tool-card-body .param-row { display: flex; gap: 8px; padding: 2px 0; }
+    .tool-card-body .param-key { color: #606090; flex-shrink: 0; }
+    .tool-card-body .param-value { color: #b0b0c0; overflow: hidden; text-overflow: ellipsis; }
+
+    /* Input */
     .input-area { padding: 16px 20px; border-top: 1px solid #1e1e28; }
     .input-row { display: flex; gap: 8px; }
     .input-row input { flex: 1; padding: 10px 14px; background: #181825; border: 1px solid #252535; border-radius: 8px; color: #e1e1e6; font-size: 14px; outline: none; }
     .input-row input:focus { border-color: #404068; }
-    .input-row button { padding: 10px 20px; background: #404068; border: none; border-radius: 8px; color: #e1e1e6; font-size: 14px; cursor: pointer; }
+    .input-row button { padding: 10px 20px; background: #404068; border: none; border-radius: 8px; color: #e1e1e6; font-size: 14px; cursor: pointer; font-weight: 500; }
     .input-row button:hover { background: #505080; }
-    .input-row button:disabled { opacity: 0.5; cursor: default; }
+    .input-row button:disabled { opacity: 0.4; cursor: default; }
+    .input-hint { font-size: 11px; color: #303040; margin-top: 6px; text-align: center; }
+
+    /* Scrollbar */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: #353545; }
+
+    /* Search */
+    .search-box { padding: 8px 12px; }
+    .search-box input { width: 100%; padding: 6px 10px; background: #0d0d12; border: 1px solid #1e1e28; border-radius: 4px; color: #c0c0d0; font-size: 12px; outline: none; }
+    .search-box input:focus { border-color: #353550; }
+    .search-box input::placeholder { color: #404050; }
   </style>
 </head>
 <body>
+  <!-- Sidebar -->
   <div class="sidebar">
     <div class="sidebar-header">
       <h1>Ask</h1>
-      <p>Rails Agent</p>
+      <span class="model-badge"><%= Ask::Rails.configuration.default_model %></span>
+    </div>
+    <div class="sidebar-tabs">
+      <div class="sidebar-tab active" onclick="switchSidebarTab('sessions')" id="tab-sessions">Sessions</div>
+      <div class="sidebar-tab" onclick="switchSidebarTab('audit')" id="tab-audit">Activity</div>
     </div>
     <div class="sidebar-actions">
-      <%= button_to "New Session", ask_rails.sessions_path, method: :post, style: "display: none", id: "new-session-form" %>
-      <a href="#" onclick="document.getElementById('new-session-form').click(); return false;">+ New Session</a>
+      <%= button_to "", ask_rails.sessions_path, method: :post, style: "display: none", id: "new-session-form" %>
+      <a class="new-btn" href="#" onclick="document.getElementById('new-session-form').click(); return false;">+ New Session</a>
+    </div>
+
+    <!-- Session list tab -->
+    <div class="sidebar-content session-list" id="panel-sessions">
+      <div class="search-box">
+        <input type="text" id="session-search" placeholder="Search sessions..." oninput="filterSessions()">
+      </div>
+      <div id="session-items">
+        <% @sessions.each do |s| %>
+          <div class="session-item<%= s[:id] == (@active_session&.dig(:id) || params[:session_id]) ? ' active' : '' %>" data-session-id="<%= s[:id] %>" onclick="switchSession('<%= s[:id] %>')">
+            <span class="sess-delete" onclick="event.stopPropagation(); deleteSession('<%= s[:id] %>')">✕</span>
+            <%= s[:preview].present? ? s[:preview] : "Session #{s[:id].to_s[0..7]}" %>
+            <div class="sess-meta">
+              <span><%= s[:message_count] %> messages</span>
+              <% if s[:created_at] %><span><%= time_ago(s[:created_at]) %></span><% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
     </div>
-    <div class="session-list" id="session-list">
-      <% @sessions.each do |s| %>
-        <div class="session-item<%= s[:id] == (@active_session&.dig(:id) || params[:session_id]) ? ' active' : '' %>" onclick="switchSession('<%= s[:id] %>')">
-          Session <%= s[:id].to_s[0..7] %>
-          <div class="time"><%= s[:message_count] %> messages</div>
+
+    <!-- Audit log tab -->
+    <div class="sidebar-content audit-panel" id="panel-audit">
+      <% if @audit_logs.any? %>
+        <% @audit_logs.each do |entry| %>
+          <div class="audit-entry">
+            <span class="audit-tool"><%= entry[:tool_name] %></span>
+            <span class="audit-status <%= entry[:status] %>"><%= entry[:status] %></span>
+            <span class="audit-duration"><%= entry[:duration_ms] %>ms</span>
+            <div class="audit-time"><%= entry[:recorded_at] %></div>
+          </div>
+        <% end %>
+      <% else %>
+        <div style="padding: 20px; text-align: center; color: #404050; font-size: 12px;">
+          No tool activity yet. Start a session to see audit logs.
         </div>
       <% end %>
     </div>
+
     <div class="sidebar-footer">
-      Model: <%= Ask::Rails.configuration.default_model %>
+      <span>v<%= Ask::Rails::VERSION %></span>
+      <span><%= ::Rails.env %></span>
     </div>
   </div>
 
+  <!-- Main chat area -->
   <div class="main">
     <div class="chat-header" id="chat-header">
-      <% if @active_session %>
-        Session <%= @active_session[:id].to_s[0..7] %>
-      <% else %>
-        Start a new session
-      <% end %>
+      <span id="header-title">
+        <% if @active_session %>
+          <%= @active_session[:preview].present? ? @active_session[:preview].truncate(50) : "Session #{@active_session[:id].to_s[0..7]}" %>
+        <% else %>
+          Start a new session
+        <% end %>
+      </span>
+      <span class="env-badge"><%= ::Rails.env %></span>
     </div>
     <div class="messages" id="messages">
       <div class="empty-state" id="empty-state">
@@ -85,24 +183,40 @@
         <input type="text" id="message-input" placeholder="Ask about your app..." autofocus>
         <button id="send-button" onclick="sendMessage()">Send</button>
       </div>
+      <div class="input-hint">Enter to send &middot; <span id="stream-indicator"></span></div>
     </div>
   </div>
 
   <script>
     let currentSessionId = '<%= @active_session&.dig(:id) || "" %>';
     let isStreaming = false;
+    let currentToolId = null;
 
+    // --- Sidebar tabs ---
+    function switchSidebarTab(tab) {
+      document.querySelectorAll('.sidebar-tab').forEach(t => t.classList.remove('active'));
+      document.getElementById('tab-' + tab).classList.add('active');
+      document.querySelectorAll('.sidebar-content').forEach(p => p.classList.remove('active'));
+      document.getElementById('panel-' + tab).classList.add('active');
+    }
+
+    // --- Session search ---
+    function filterSessions() {
+      const q = document.getElementById('session-search').value.toLowerCase();
+      document.querySelectorAll('.session-item').forEach(item => {
+        const match = item.textContent.toLowerCase().includes(q);
+        item.style.display = match ? '' : 'none';
+      });
+    }
+
+    // --- Chat messages ---
     function addMessage(role, content) {
       const el = document.getElementById('empty-state');
       if (el) el.remove();
 
       const msg = document.createElement('div');
       msg.className = 'message ' + role;
-      if (role === 'thinking') {
-        msg.innerHTML = '<div class="label">Thinking...</div>' + escapeHtml(content);
-      } else {
-        msg.innerHTML = (role === 'user' ? '' : '<div class="label">Assistant</div>') + escapeHtml(content);
-      }
+      msg.innerHTML = (role === 'user' ? '' : '<div class="msg-label">' + (role === 'thinking' ? 'Thinking...' : 'Assistant') + '</div>') + escapeHtml(content);
       document.getElementById('messages').appendChild(msg);
       msg.scrollIntoView({ behavior: 'smooth' });
       return msg;
@@ -112,18 +226,86 @@
       const msgs = document.getElementById('messages').querySelectorAll('.message.' + role);
       if (msgs.length === 0) return addMessage(role, content);
       const last = msgs[msgs.length - 1];
-      const textEl = last.querySelector('div:last-child');
-      if (textEl) textEl.textContent += content;
-      else last.innerHTML += escapeHtml(content);
+      const textEl = last.querySelector('div:last-child') || last;
+      textEl.textContent += content;
       last.scrollIntoView({ behavior: 'smooth' });
     }
 
-    function escapeHtml(text) {
-      const d = document.createElement('div');
-      d.textContent = text;
-      return d.innerHTML;
+    // --- Tool execution cards ---
+    function addToolCard(data) {
+      const container = document.getElementById('messages');
+      const el = document.getElementById('empty-state');
+      if (el) el.remove();
+
+      const card = document.createElement('div');
+      card.className = 'tool-card';
+      card.id = 'tool-' + data.id;
+
+      card.innerHTML = `
+        <div class="tool-card-header" onclick="toggleToolDetails('${data.id}')">
+          <div class="tool-icon start">&#9654;</div>
+          <span class="tool-name">${escapeHtml(data.name)}</span>
+          <span class="tool-status">running...</span>
+          <span class="tool-duration" id="tool-time-${data.id}"></span>
+        </div>
+        <div class="tool-card-body" id="tool-body-${data.id}">
+          <div class="param-row"><span class="param-key">args:</span> <span class="param-value">${escapeHtml(JSON.stringify(data.args || {}))}</span></div>
+        </div>
+      `;
+
+      container.appendChild(card);
+      card.scrollIntoView({ behavior: 'smooth' });
+      currentToolId = data.id;
+      startToolTimer(data.id);
+    }
+
+    function updateToolCard(data) {
+      const header = document.querySelector('#tool-' + data.id + ' .tool-card-header');
+      if (!header) return;
+      const icon = header.querySelector('.tool-icon');
+      const status = header.querySelector('.tool-status');
+
+      if (data.is_error) {
+        icon.className = 'tool-icon error';
+        icon.innerHTML = '&#10007;';
+        status.textContent = 'failed';
+      } else {
+        icon.className = 'tool-icon start';
+        icon.innerHTML = '&#10003;';
+        status.textContent = 'done';
+      }
+
+      const durationEl = document.getElementById('tool-time-' + data.id);
+      if (data.duration_ms) {
+        durationEl.textContent = data.duration_ms + 'ms';
+      }
+      stopToolTimer(data.id);
+      currentToolId = null;
+    }
+
+    function toggleToolDetails(id) {
+      const body = document.getElementById('tool-body-' + id);
+      body.classList.toggle('open');
     }
 
+    let toolTimers = {};
+
+    function startToolTimer(id) {
+      const start = Date.now();
+      toolTimers[id] = setInterval(() => {
+        const el = document.getElementById('tool-time-' + id);
+        if (el) el.textContent = (Date.now() - start) + 'ms';
+      }, 100);
+    }
+
+    function stopToolTimer(id) {
+      if (toolTimers[id]) {
+        clearInterval(toolTimers[id]);
+        delete toolTimers[id];
+      }
+    }
+
+    // --- SSE streaming ---
     function sendMessage() {
       const input = document.getElementById('message-input');
       const prompt = input.value.trim();
@@ -132,17 +314,14 @@
       input.value = '';
       isStreaming = true;
       document.getElementById('send-button').disabled = true;
+      document.getElementById('stream-indicator').textContent = 'Streaming...';
 
       addMessage('user', prompt);
 
       if (!currentSessionId) {
-        // Create session first
         fetch('<%= ask_rails.sessions_path %>', { method: 'POST' })
           .then(r => r.text())
-          .then(() => {
-            // Reload to get the new session
-            window.location.reload();
-          });
+          .then(() => window.location.reload());
         return;
       }
 
@@ -162,6 +341,7 @@
             if (done) {
               isStreaming = false;
               document.getElementById('send-button').disabled = false;
+              document.getElementById('stream-indicator').textContent = '';
               return;
             }
             buffer += decoder.decode(value, { stream: true });
@@ -172,17 +352,41 @@
               if (line.startsWith('data: ')) {
                 try {
                   const data = JSON.parse(line.slice(6));
-                  if (data.type === 'delta') {
-                    updateLastMessage('assistant', data.content);
-                  } else if (data.type === 'thinking') {
-                    addMessage('thinking', data.content);
-                  } else if (data.type === 'done') {
-                    isStreaming = false;
-                    document.getElementById('send-button').disabled = false;
-                  } else if (data.type === 'start') {
-                    currentSessionId = data.session_id;
+                  switch (data.type) {
+                    case 'delta':
+                      updateLastMessage('assistant', data.content);
+                      break;
+                    case 'thinking':
+                      addMessage('thinking', data.content);
+                      break;
+                    case 'tool_start':
+                      addToolCard(data);
+                      break;
+                    case 'tool_end':
+                      updateToolCard(data);
+                      break;
+                    case 'tool_update':
+                      // Could show progress in the card
+                      break;
+                    case 'error':
+                      addMessage('system', '⚠️ ' + (data.message || 'An error occurred'));
+                      isStreaming = false;
+                      document.getElementById('send-button').disabled = false;
+                      document.getElementById('stream-indicator').textContent = '';
+                      break;
+                    case 'done':
+                      isStreaming = false;
+                      document.getElementById('send-button').disabled = false;
+                      document.getElementById('stream-indicator').textContent = '';
+                      refreshSidebar();
+                      break;
+                    case 'start':
+                      currentSessionId = data.session_id;
+                      break;
                   }
-                } catch(e) {}
+                } catch(e) {
+                  // Skip malformed JSON
+                }
               }
             });
             processChunk();
@@ -192,19 +396,18 @@
       }).catch(() => {
         isStreaming = false;
         document.getElementById('send-button').disabled = false;
+        document.getElementById('stream-indicator').textContent = '';
       });
     }
 
-    document.getElementById('message-input').addEventListener('keydown', function(e) {
-      if (e.key === 'Enter') sendMessage();
-    });
-
+    // --- Session management ---
     function switchSession(id) {
       currentSessionId = id;
       document.getElementById('empty-state')?.remove();
       document.getElementById('messages').innerHTML = '';
-      document.getElementById('chat-header').textContent = 'Session ' + id.substring(0, 8);
+      document.getElementById('header-title').textContent = 'Session ' + id.substring(0, 8);
 
+      // Show session messages
       fetch('<%= ask_rails.session_history_path("SESSION_ID") %>'.replace('SESSION_ID', id))
         .then(r => r.json())
         .then(messages => {
@@ -214,7 +417,105 @@
             }
           });
         });
+
+      // Update active state in sidebar
+      document.querySelectorAll('.session-item').forEach(el => {
+        el.classList.toggle('active', el.dataset.sessionId === id);
+      });
+
+      // Refresh audit log for this session
+      refreshAuditLog(id);
+    }
+
+    function deleteSession(id) {
+      if (!confirm('Delete this session?')) return;
+      fetch('<%= ask_rails.session_path("ID") %>'.replace('ID', id), { method: 'DELETE' })
+        .then(() => window.location.reload());
+    }
+
+    function refreshSidebar() {
+      fetch('<%= ask_rails.sessions_path %>')
+        .then(r => r.json())
+        .then(sessions => {
+          const container = document.getElementById('session-items');
+          container.innerHTML = sessions.map(s => `
+            <div class="session-item${s.id === currentSessionId ? ' active' : ''}" data-session-id="${s.id}" onclick="switchSession('${s.id}')">
+              <span class="sess-delete" onclick="event.stopPropagation(); deleteSession('${s.id}')">✕</span>
+              ${s.preview ? escapeHtml(s.preview) : 'Session ' + s.id.substring(0, 8)}
+              <div class="sess-meta">
+                <span>${s.message_count} messages</span>
+                ${s.created_at ? '<span>' + timeAgo(s.created_at) + '</span>' : ''}
+              </div>
+            </div>
+          `).join('');
+        });
+    }
+
+    function refreshAuditLog(sessionId) {
+      const url = sessionId
+        ? '<%= ask_rails.session_audit_path("SESSION_ID") %>'.replace('SESSION_ID', sessionId)
+        : '<%= ask_rails.sessions_path %>/audit';
+
+      if (!sessionId) return;
+
+      fetch(url)
+        .then(r => r.json())
+        .then(logs => {
+          const panel = document.getElementById('panel-audit');
+          if (!panel) return;
+          panel.innerHTML = logs.length
+            ? logs.map(e => `
+              <div class="audit-entry">
+                <span class="audit-tool">${escapeHtml(e.tool_name)}</span>
+                <span class="audit-status ${e.status}">${e.status}</span>
+                <span class="audit-duration">${e.duration_ms}ms</span>
+                <div class="audit-time">${e.recorded_at || ''}</div>
+              </div>
+            `).join('')
+            : '<div style="padding: 20px; text-align: center; color: #404050; font-size: 12px;">No tool activity for this session.</div>';
+        });
     }
+
+    // --- Keyboard ---
+    document.getElementById('message-input').addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+
+    // Ctrl+K to focus input
+    document.addEventListener('keydown', function(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        document.getElementById('message-input').focus();
+      }
+    });
+
+    // --- Utilities ---
+    function escapeHtml(text) {
+      const d = document.createElement('div');
+      d.textContent = text;
+      return d.innerHTML;
+    }
+
+    function timeAgo(dateStr) {
+      if (!dateStr) return '';
+      const diff = Date.now() - new Date(dateStr).getTime();
+      const mins = Math.floor(diff / 60000);
+      if (mins < 1) return 'just now';
+      if (mins < 60) return mins + 'm ago';
+      const hrs = Math.floor(mins / 60);
+      if (hrs < 24) return hrs + 'h ago';
+      return Math.floor(hrs / 24) + 'd ago';
+    }
+
+    // Load initial session if one is active
+    <% if @active_session %>
+      document.addEventListener('DOMContentLoaded', function() {
+        refreshAuditLog(currentSessionId);
+      });
+    <% end %>
   </script>
 </body>
 </html>

data/config/routes.rb

@@ -5,11 +5,13 @@ Ask::Rails::Engine.routes.draw do
 
   resources :sessions, only: [:index, :create, :show], controller: "chat" do
     collection do
-      delete :destroy
+      delete :destroy, action: :destroy_all
     end
   end
 
+  delete "sessions/:id" => "chat#destroy_session", as: :session
   post "sessions/:session_id/messages" => "chat#message", as: :session_message
   get "sessions/:session_id/stream" => "chat#stream", as: :session_stream
   get "sessions/:session_id/messages" => "chat#history", as: :session_history
+  get "sessions/:session_id/audit" => "chat#audit", as: :session_audit
 end