solid_loop 0.0.4 → 0.0.5

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

@@ -1,6 +1,10 @@
 <div class="sl-page-header">
-  <h2>Dashboard</h2>
+  <div>
+    <h2>Dashboard</h2>
+    <div class="sl-page-header__meta" style="font-size: 0.9em;"><%= @window_label %></div>
+  </div>
   <div class="sl-page-header__actions">
+    <span id="dash-loading" class="sl-badge sl-badge--processing" style="display: none;">Loading…</span>
     <div class="sl-period-toggle">
       <%= link_to "Hour", dashboard_path(period: :hour),
           class: "sl-btn sl-btn--small #{'sl-btn--primary' if @period == 'hour'}" %>
@@ -16,28 +20,51 @@
 <div class="sl-grid-row">
   <div class="sl-card sl-stat-card">
     <div class="sl-stat-card__label">LLM Calls</div>
-    <div id="stat-llm-calls" class="sl-stat-card__value">-</div>
+    <div id="stat-llm-calls" class="sl-stat-card__value" data-stat>–</div>
+    <div class="sl-stat-card__label" style="text-transform: none; font-size: 0.78em;"><%= @window_label %></div>
   </div>
   <div class="sl-card sl-stat-card">
     <div class="sl-stat-card__label">Tool Calls</div>
-    <div id="stat-tool-calls" class="sl-stat-card__value">-</div>
+    <div id="stat-tool-calls" class="sl-stat-card__value" data-stat>–</div>
+    <div class="sl-stat-card__label" style="text-transform: none; font-size: 0.78em;"><%= @window_label %></div>
   </div>
-  <div class="sl-card sl-stat-card">
+  <%# Hidden until the payload proves there is a non-zero cost to report: on a
+      local-inference deployment every cost figure is 0.00 forever, and a tile
+      that can only ever read $0.00 is a permanently wasted quarter of the row. %>
+  <div class="sl-card sl-stat-card" id="panel-cost-kpi" style="display: none;">
     <div class="sl-stat-card__label">Cost</div>
-    <div id="stat-cost" class="sl-stat-card__value sl-stat-card__value--accent">-</div>
+    <div id="stat-cost" class="sl-stat-card__value sl-stat-card__value--accent" data-stat>–</div>
+    <div class="sl-stat-card__label" style="text-transform: none; font-size: 0.78em;"><%= @window_label %></div>
   </div>
   <div class="sl-card sl-stat-card">
     <div class="sl-stat-card__label">Failed Loops</div>
-    <div id="stat-failed" class="sl-stat-card__value sl-stat-card__value--error">-</div>
-    <div id="stat-failed-split" class="sl-stat-card__label" style="text-transform: none;">-</div>
+    <div id="stat-failed" class="sl-stat-card__value sl-stat-card__value--error" data-stat>–</div>
+    <div id="stat-failed-split" class="sl-stat-card__label" style="text-transform: none; font-size: 0.78em;"><%= @window_label %></div>
   </div>
 </div>
 
-<div class="sl-card">
-  <h3>Cost ($)</h3>
+<div class="sl-card" id="panel-cost-chart" style="display: none;">
+  <h3>Cost ($) <span style="color: var(--sl-muted-text); font-size: 0.7em; font-weight: normal;"><%= @window_label %></span></h3>
   <div id="chart-cost" class="sl-chart-container"></div>
 </div>
 
+<%# The operations row that takes the cost panels' place when cost is always
+    zero. Loop status and generation throughput are recorded already but were
+    not rendered anywhere in the admin. %>
+<div class="sl-grid-row" id="row-ops" style="display: none;">
+  <div class="sl-card sl-stat-card" style="text-align: left;">
+    <h3>Loops by status <span style="color: var(--sl-muted-text); font-size: 0.7em; font-weight: normal;"><%= @window_label %></span></h3>
+    <div id="panel-loop-statuses" style="margin-top: 14px;"></div>
+  </div>
+  <div class="sl-card sl-stat-card" style="text-align: left;">
+    <h3>Throughput <span style="color: var(--sl-muted-text); font-size: 0.7em; font-weight: normal;"><%= @window_label %></span></h3>
+    <div id="panel-throughput" style="margin-top: 14px;"></div>
+  </div>
+</div>
+
+<%# The three per-time-bucket series sit in one row, same chart type, same
+    x-axis, same colour — Tokens used to be a horizontal BarChart in a row of
+    its own, so nothing could be lined up against anything. %>
 <div class="sl-grid-row">
   <div class="sl-card sl-stat-card">
     <h3>LLM Calls</h3>
@@ -47,43 +74,96 @@
     <h3>Tool Calls</h3>
     <div id="chart-tool-calls" class="sl-chart-container"></div>
   </div>
-</div>
-
-<div class="sl-grid-row">
   <div class="sl-card sl-stat-card">
     <h3>Tokens</h3>
     <div id="chart-tokens" class="sl-chart-container"></div>
   </div>
-  <div class="sl-card sl-stat-card">
-    <h3>Top Agents by Cost</h3>
-    <div id="chart-top-agents" class="sl-chart-container"></div>
-  </div>
+</div>
+
+<div class="sl-card" id="panel-top-agents" style="display: none;">
+  <h3>Top Agents by Cost <span style="color: var(--sl-muted-text); font-size: 0.7em; font-weight: normal;"><%= @window_label %></span></h3>
+  <div id="chart-top-agents" class="sl-chart-container"></div>
 </div>
 
 <script>
   let pollTimer = null;
+  let hasRendered = false;
   const period = "<%= @period %>";
 
   const colors = {
     accent: '#5288c1',
     success: '#31b545',
     error: '#ff6b6b',
+    pending: '#f1c40f',
     text: '#f5f5f5',
     muted: '#7f91a4'
   };
 
-  const chartOptions = {
-    colors: [colors.accent, colors.success, colors.error],
-    library: {
-      plugins: {
-        legend: { labels: { color: colors.text } }
-      },
+  const gridColor = 'rgba(255,255,255,0.08)';
+
+  // Red is reserved for failure. Every other single-series panel gets ONE
+  // colour for the whole series, because Chartkick's `colors` array is applied
+  // PER BAR when a chart has a single series: with three colours in it the LLM
+  // Calls chart painted 7 PM red and 8 PM blue, so a reader saw an alarm where
+  // there was only an hour of the day.
+  const seriesColor = {
+    llmCalls: colors.accent,
+    toolCalls: colors.accent,
+    tokens: colors.accent,
+    cost: colors.accent,
+    topAgents: colors.accent,
+    failed: colors.error
+  };
+
+  const statusColor = {
+    running: colors.accent,
+    queued: colors.pending,
+    init: colors.muted,
+    paused: colors.pending,
+    completed: colors.success,
+    failed: colors.error
+  };
+
+  function withAlpha(hex, alpha) {
+    const value = parseInt(hex.slice(1), 16);
+    return 'rgba(' + [(value >> 16) & 255, (value >> 8) & 255, value & 255].join(',') + ',' + alpha + ')';
+  }
+
+  // Fresh object per chart: Chart.js mutates the options it is handed, so a
+  // shared literal would leak one panel's axis callbacks into the next.
+  function baseLibrary() {
+    return {
+      maintainAspectRatio: false,
+      // Every chart here is single-series; a legend would only restate the
+      // panel heading and steal a row of chart height.
+      plugins: { legend: { display: false } },
       scales: {
-        x: { ticks: { color: colors.muted }, grid: { color: 'rgba(255,255,255,0.1)' } },
-        y: { ticks: { color: colors.muted }, grid: { color: 'rgba(255,255,255,0.1)' } }
+        x: {
+          ticks: { color: colors.muted, autoSkip: true, maxRotation: 0 },
+          grid: { color: gridColor }
+        },
+        y: {
+          beginAtZero: true,
+          ticks: { color: colors.muted },
+          grid: { color: gridColor }
+        }
       }
-    }
-  };
+    };
+  }
+
+  // `dataset` is merged straight onto the Chart.js dataset, which is the only
+  // way to pin ONE colour to a whole single-series bar chart — Chartkick's
+  // `colors` option deliberately spreads its array across the bars instead.
+  function chartOptions(hex, library) {
+    return {
+      dataset: {
+        backgroundColor: withAlpha(hex, 0.55),
+        borderColor: hex,
+        borderWidth: 1
+      },
+      library: library || baseLibrary()
+    };
+  }
 
   // Client-side twin of the sl_money helper so the Cost KPI never reads
   // "$0.00" for a real sub-cent run: 2 dp above a cent, more precision below.
@@ -98,6 +178,39 @@
     return '$' + value.toFixed(precision);
   }
 
+  function trimTrailingZero(value) {
+    return value.toFixed(1).replace(/\.0$/, '');
+  }
+
+  // Token counts run to six figures; raw "111401" on an axis tick is unreadable
+  // and makes the axis wide enough to squeeze the plot.
+  function compactNumber(value) {
+    const n = Number(value) || 0;
+    const abs = Math.abs(n);
+    if (abs >= 1e9) return trimTrailingZero(n / 1e9) + 'B';
+    if (abs >= 1e6) return trimTrailingZero(n / 1e6) + 'M';
+    if (abs >= 1e3) return trimTrailingZero(n / 1e3) + 'k';
+    return String(n);
+  }
+
+  function withSeparators(value) {
+    return (Number(value) || 0).toLocaleString();
+  }
+
+  function tokensLibrary() {
+    const library = baseLibrary();
+    library.scales.y.ticks.callback = function (value) { return compactNumber(value); };
+    library.plugins.tooltip = {
+      callbacks: {
+        label: function (context) {
+          const value = context.parsed.y;
+          return compactNumber(value) + ' tokens (' + withSeparators(value) + ')';
+        }
+      }
+    };
+    return library;
+  }
+
   // Shared bucket formatting so bar/column charts label their time buckets the
   // same human way the Cost time-axis line chart does, and stay chronological.
   //
@@ -124,8 +237,10 @@
   }
 
   // Turn an ISO-keyed hash into chronologically sorted [humanLabel, value] pairs.
+  // The server already emits every bucket in the window, zeros included, so all
+  // panels come out on the same x-axis.
   function bucketSeries(hash, period) {
-    return Object.keys(hash)
+    return Object.keys(hash || {})
       .map(function (k) { return { t: new Date(k), v: hash[k] }; })
       .sort(function (a, b) { return a.t - b.t; })
       .map(function (row) { return [formatBucketLabel(row.t, period), row.v]; });
@@ -133,11 +248,135 @@
 
   // Same treatment for a Chartkick multi-series ([{name, data: {iso: v}}]).
   function bucketMultiSeries(series, period) {
-    return series.map(function (s) {
+    return (series || []).map(function (s) {
       return { name: s.name, data: bucketSeries(s.data, period) };
     });
   }
 
+  // --- loading / empty states -------------------------------------------
+  //
+  // Before this, an unresolved (or failed) XHR left the KPI tiles reading "-"
+  // and four 300px boxes completely blank, which is exactly what a period with
+  // no activity looked like. Now the two states say which one they are.
+
+  function noticeMarkup(text, muted) {
+    return '<div style="height: 100%; display: flex; align-items: center; ' +
+           'justify-content: center; color: ' + (muted ? colors.muted : colors.error) +
+           '; font-size: 0.9em;">' + text + '</div>';
+  }
+
+  function setBusy(busy) {
+    document.getElementById('dash-loading').style.display = busy ? '' : 'none';
+  }
+
+  function showFirstLoad() {
+    document.querySelectorAll('[data-stat]').forEach(function (el) {
+      el.textContent = '…';
+      el.style.opacity = '0.45';
+    });
+    document.querySelectorAll('.sl-chart-container').forEach(function (el) {
+      el.innerHTML = noticeMarkup('Loading…', true);
+    });
+    document.getElementById('panel-loop-statuses').innerHTML = noticeMarkup('Loading…', true);
+    document.getElementById('panel-throughput').innerHTML = noticeMarkup('Loading…', true);
+  }
+
+  function showError() {
+    document.querySelectorAll('[data-stat]').forEach(function (el) {
+      el.textContent = '–';
+      el.style.opacity = '1';
+    });
+    document.querySelectorAll('.sl-chart-container').forEach(function (el) {
+      el.innerHTML = noticeMarkup('Could not load stats', false);
+    });
+  }
+
+  function setStat(id, text) {
+    const el = document.getElementById(id);
+    el.textContent = text;
+    el.style.opacity = '1';
+  }
+
+  function show(el, visible) {
+    if (el) el.style.display = visible ? '' : 'none';
+  }
+
+  function hasSignal(pairs) {
+    return pairs.some(function (pair) { return Number(pair[1]) !== 0; });
+  }
+
+  // Draw, or say plainly that there is nothing to draw. An all-zero series is
+  // rendered as the empty state rather than as a flat line at the baseline,
+  // which reads identically to a chart that failed to load.
+  function drawChart(containerId, pairs, draw) {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+
+    if (!pairs.length || !hasSignal(pairs)) {
+      el.innerHTML = noticeMarkup('No data for this period', true);
+      return;
+    }
+    el.innerHTML = '';
+    draw();
+  }
+
+  // --- ops panels --------------------------------------------------------
+
+  function statBox(label, value, unit, footnote, color) {
+    return '<div style="flex: 1; min-width: 0; background: var(--sl-bg-color); ' +
+           'border: 1px solid var(--sl-border-color); border-radius: 8px; padding: 10px 12px;">' +
+           '<div style="color: ' + colors.muted + '; font-size: 0.75em; text-transform: uppercase;">' + label + '</div>' +
+           '<div style="font-size: 1.6em; font-weight: bold; margin: 2px 0; color: ' + (color || colors.text) + ';">' +
+           value + (unit ? '<span style="font-size: 0.5em; font-weight: normal; color: ' + colors.muted + ';"> ' + unit + '</span>' : '') +
+           '</div>' +
+           '<div style="color: ' + colors.muted + '; font-size: 0.75em;">' + footnote + '</div>' +
+           '</div>';
+  }
+
+  function renderLoopStatuses(statuses) {
+    const names = Object.keys(statuses || {});
+    const total = names.reduce(function (sum, name) { return sum + Number(statuses[name]); }, 0);
+    const el = document.getElementById('panel-loop-statuses');
+
+    if (!names.length || total === 0) {
+      el.innerHTML = '<div style="color: ' + colors.muted + '; font-size: 0.9em;">No loops in this period</div>';
+      return;
+    }
+
+    el.innerHTML = '<div style="display: flex; gap: 8px; flex-wrap: wrap;">' +
+      names.map(function (name) {
+        const count = Number(statuses[name]);
+        return '<div style="flex: 1; min-width: 78px; text-align: center; background: var(--sl-bg-color); ' +
+               'border: 1px solid var(--sl-border-color); border-radius: 8px; padding: 10px 6px; ' +
+               (count === 0 ? 'opacity: 0.45;' : '') + '">' +
+               '<div style="font-size: 1.5em; font-weight: bold; color: ' + statusColor[name] + ';">' + count + '</div>' +
+               '<span class="sl-badge" style="background: ' + withAlpha(statusColor[name], 0.2) +
+               '; color: ' + statusColor[name] + ';">' + name + '</span>' +
+               '</div>';
+      }).join('') + '</div>';
+  }
+
+  function renderThroughput(throughput) {
+    const t = throughput || {};
+    const el = document.getElementById('panel-throughput');
+
+    if (!t.tps_samples && !t.ttft_samples) {
+      el.innerHTML = '<div style="color: ' + colors.muted + '; font-size: 0.9em;">No generation measured in this period</div>';
+      return;
+    }
+
+    const samples = function (n) { return n === 1 ? 'over 1 message' : 'over ' + withSeparators(n) + ' messages'; };
+
+    el.innerHTML = '<div style="display: flex; gap: 8px;">' +
+      statBox('Avg TPS', t.tps === null || t.tps === undefined ? '–' : t.tps,
+              'tok/s', samples(t.tps_samples), colors.success) +
+      statBox('Avg TTFT', t.ttft === null || t.ttft === undefined ? '–' : t.ttft,
+              's', samples(t.ttft_samples), colors.accent) +
+      '</div>';
+  }
+
+  // --- polling -----------------------------------------------------------
+
   document.querySelector('.sl-poll-toggle').addEventListener('click', function () {
     if (pollTimer) {
       clearInterval(pollTimer);
@@ -153,32 +392,82 @@
   });
 
   function fetchStats() {
+    setBusy(true);
     fetch(`<%= dashboard_stats_path(format: :json) %>?period=${period}`)
       .then(r => r.json())
-      .then(data => updateCharts(data));
+      .then(data => {
+        updateCharts(data);
+        hasRendered = true;
+      })
+      .catch(() => { if (!hasRendered) showError(); })
+      .finally(() => setBusy(false));
   }
 
   function updateCharts(data) {
-    document.getElementById('stat-llm-calls').textContent = data.summary.llm_calls;
-    document.getElementById('stat-tool-calls').textContent = data.summary.tool_calls;
-    document.getElementById('stat-cost').textContent = formatMoney(data.summary.cost);
-    document.getElementById('stat-failed').textContent = data.summary.failed;
+    setStat('stat-llm-calls', data.summary.llm_calls);
+    setStat('stat-tool-calls', data.summary.tool_calls);
+    setStat('stat-cost', formatMoney(data.summary.cost));
+    setStat('stat-failed', data.summary.failed);
+
     const splitEl = document.getElementById('stat-failed-split');
     if (data.summary.failed > 0) {
-      splitEl.textContent = `${data.summary.failed_agent} agent · ${data.summary.failed_infra} infra`;
+      splitEl.textContent = `${data.summary.failed_agent} agent · ${data.summary.failed_infra} infra · ${data.window_label}`;
     } else {
-      splitEl.textContent = '';
+      splitEl.textContent = data.window_label;
     }
 
-    new Chartkick.LineChart('chart-cost', data.cost, { ...chartOptions, prefix: '$' });
-    new Chartkick.ColumnChart('chart-llm-calls', bucketSeries(data.llm_calls, period), chartOptions);
-    new Chartkick.ColumnChart('chart-tool-calls', bucketSeries(data.tool_calls, period), chartOptions);
-    new Chartkick.BarChart('chart-tokens', bucketMultiSeries(data.tokens, period), chartOptions);
-    new Chartkick.BarChart('chart-top-agents', data.top_agents, { ...chartOptions, prefix: '$' });
+    // Cost panels only earn their space when something actually cost money.
+    // Local llama.cpp inference reports zero forever, and three panels pinned
+    // to $0.00 (with a Top Agents axis helpfully scaled to $1) crowd out the
+    // numbers that do move. Swap them for loop status and throughput.
+    const costPositive = Number(data.summary.cost) > 0;
+    show(document.getElementById('panel-cost-kpi'), costPositive);
+    show(document.getElementById('panel-cost-chart'), costPositive);
+    show(document.getElementById('panel-top-agents'), costPositive);
+    show(document.getElementById('row-ops'), !costPositive);
+
+    if (costPositive) {
+      const costPairs = bucketSeries(data.cost, period);
+      drawChart('chart-cost', costPairs, function () {
+        new Chartkick.LineChart('chart-cost', data.cost,
+          Object.assign(chartOptions(seriesColor.cost), { prefix: '$' }));
+      });
+
+      const agentPairs = Object.keys(data.top_agents || {})
+        .map(function (k) { return [k, data.top_agents[k]]; });
+      drawChart('chart-top-agents', agentPairs, function () {
+        new Chartkick.BarChart('chart-top-agents', data.top_agents,
+          Object.assign(chartOptions(seriesColor.topAgents), { prefix: '$' }));
+      });
+    } else {
+      renderLoopStatuses(data.loop_statuses);
+      renderThroughput(data.throughput);
+    }
+
+    const llmPairs = bucketSeries(data.llm_calls, period);
+    drawChart('chart-llm-calls', llmPairs, function () {
+      new Chartkick.ColumnChart('chart-llm-calls', llmPairs, chartOptions(seriesColor.llmCalls));
+    });
+
+    const toolPairs = bucketSeries(data.tool_calls, period);
+    drawChart('chart-tool-calls', toolPairs, function () {
+      new Chartkick.ColumnChart('chart-tool-calls', toolPairs, chartOptions(seriesColor.toolCalls));
+    });
+
+    // A ColumnChart, like its LLM Calls / Tool Calls siblings: it is the same
+    // "value per time bucket" shape, and rendering it on its side made the three
+    // panels impossible to compare at a glance.
+    const tokenSeries = bucketMultiSeries(data.tokens, period);
+    const tokenPairs = tokenSeries.length ? tokenSeries[0].data : [];
+    drawChart('chart-tokens', tokenPairs, function () {
+      new Chartkick.ColumnChart('chart-tokens', tokenPairs,
+        chartOptions(seriesColor.tokens, tokensLibrary()));
+    });
   }
 
   // Initial load
   document.addEventListener('DOMContentLoaded', () => {
+    showFirstLoad();
     fetchStats();
   });
-</script>
+</script>

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

@@ -1,3 +1,7 @@
+<div class="sl-page-header">
+  <h2>Events</h2>
+</div>
+
 <div class="sl-card">
   <%= form_with url: events_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;">
@@ -25,16 +29,28 @@
       <th class="sl-table__th">ID</th>
       <th class="sl-table__th">Type</th>
       <th class="sl-table__th">Loop ID</th>
+      <th class="sl-table__th">Status</th>
+      <th class="sl-table__th">Duration</th>
       <th class="sl-table__th">Created At</th>
       <th class="sl-table__th">Actions</th>
     </tr>
   </thead>
   <tbody>
     <% @events.each do |event| %>
+      <% status = sl_event_status(event) %>
       <tr>
         <td class="sl-table__td"><%= event.id %></td>
-        <td class="sl-table__td"><span class="sl-badge sl-badge--processing"><%= event.name %></span></td>
+        <td class="sl-table__td">
+          <span class="sl-badge <%= sl_event_badge_class(event.name) %>"><%= event.name %></span>
+          <% if status[:kind] == :error && status[:title].present? %>
+            <div class="sl-metric__sub" style="max-width: 420px; white-space: normal;" title="<%= status[:title] %>">
+              <%= truncate(status[:title], length: 90) %>
+            </div>
+          <% end %>
+        </td>
         <td class="sl-table__td"><%= link_to event.loop_id, loop_path(event.loop_id) if event.loop_id %></td>
+        <td class="sl-table__td"><%= sl_event_status_badge(event) %></td>
+        <td class="sl-table__td"><%= sl_duration_cell(event.duration, scale: sl_event_duration_scale(event.name)) %></td>
         <td class="sl-table__td"><%= event.created_at.strftime("%Y-%m-%d %H:%M") %></td>
         <td class="sl-table__td">
           <%= link_to "View", event_path(event), class: "sl-btn sl-btn--small" %>

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

@@ -34,8 +34,10 @@
       <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" title="LLM generation + tool execution (Loop#work_duration)">Work</th>
+      <th class="sl-table__th">Tokens</th>
+      <th class="sl-table__th" title="Loop row last written — lease renewals, turn commits, status changes">Last Activity</th>
       <th class="sl-table__th">Created At</th>
       <th class="sl-table__th"></th>
     </tr>
@@ -69,8 +71,43 @@
             </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"><span class="sl-metric"><%= loop.step_count %></span></td>
+        <td class="sl-table__td">
+          <%# Accumulated WORK, not wall clock: a loop that has generated and run
+              tools for 90 minutes reads very differently from one that was
+              created 90 minutes ago and has done nothing. Deliberately NOT
+              severity-coloured — this is a cumulative total, so "large" is what
+              a productive loop looks like, unlike a single call's latency. %>
+          <span class="sl-metric" title="<%= number_with_precision(loop.work_duration, precision: 3) %>s — generation <%= number_with_precision(loop.duration_generation, precision: 1) %>s + tools <%= number_with_precision(loop.duration_tools, precision: 1) %>s">
+            <%= sl_duration(loop.work_duration) %>
+          </span>
+        </td>
+        <td class="sl-table__td">
+          <span class="sl-metric"><%= sl_tokens(loop.tokens_total) %></span>
+          <%# Cost is folded in here rather than owning a column: under local
+              inference every row is $0.00, and a column of zeroes was crowding
+              out the numbers that do vary. It reappears the moment a priced
+              provider makes it non-zero. %>
+          <% if loop.cost.to_f.positive? %>
+            <span class="sl-metric__sub"><%= sl_money(loop.cost) %></span>
+          <% end %>
+        </td>
+        <td class="sl-table__td">
+          <%# `updated_at`, not the newest message's timestamp. The loop row is
+              written on every turn commit AND on every lease renewal
+              (LeaseRenewer sets `updated_at` explicitly), so it advances DURING
+              a long generation — while messages are only written at turn
+              boundaries, and streaming appends use `update_columns`, which skips
+              timestamps entirely. It is also already on the row: no join, no
+              N+1 on a page that lists 50 loops. %>
+          <span class="sl-metric <%= "sl-metric--#{sl_idle_severity(loop)}" if sl_idle_severity(loop) %>"
+                title="<%= loop.updated_at.strftime("%Y-%m-%d %H:%M:%S") %>">
+            <%= sl_time_ago(loop.updated_at) %>
+          </span>
+          <% if sl_idle_severity(loop) == :slow %>
+            <span class="sl-metric__sub">no activity — likely stalled</span>
+          <% end %>
+        </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" %>

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

@@ -90,7 +90,7 @@
           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>
+          Work Duration: <span class="sl-message__footer-value"><%= number_with_precision(@loop.work_duration, precision: 2) %>s</span>
         </div>
         <div class="sl-message__footer-item">
           Steps: <span class="sl-message__footer-value"><%= @loop.step_count %></span>

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

@@ -1,3 +1,7 @@
+<div class="sl-page-header">
+  <h2>MCP Sessions</h2>
+</div>
+
 <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;">
@@ -20,7 +24,10 @@
     <tr>
       <th class="sl-table__th">ID</th>
       <th class="sl-table__th">MCP Name</th>
+      <th class="sl-table__th">Loop</th>
       <th class="sl-table__th">Transport</th>
+      <th class="sl-table__th">Tools</th>
+      <th class="sl-table__th" title="A session is reusable only while its loop can still run">State</th>
       <th class="sl-table__th">Session ID</th>
       <th class="sl-table__th">Created At</th>
       <th class="sl-table__th"></th>
@@ -28,11 +35,42 @@
   </thead>
   <tbody>
     <% @mcp_sessions.each do |session| %>
+      <%
+        loop_status = @loop_statuses[session.loop_id]
+        # "Usable" = the owning loop is not terminal. A completed/failed loop is
+        # never resumed, so its session id will never be sent again — the row is
+        # history. Everything still init/queued/running/paused will reuse this
+        # exact session on its next tool call.
+        usable = SolidLoop::Loop::STOPPABLE_STATUSES.include?(loop_status)
+        tool_count = @tool_counts[session.id].to_i
+      %>
       <tr>
         <td class="sl-table__td"><%= session.id %></td>
-        <td class="sl-table__td"><%= session.mcp_name %></td>
+        <td class="sl-table__td"><strong><%= session.mcp_name %></strong></td>
+        <td class="sl-table__td">
+          <% if session.loop_id %>
+            <%= link_to "##{session.loop_id}", loop_path(session.loop_id) %>
+            <% if loop_status %>
+              <span class="sl-metric__sub"><%= loop_status.upcase %></span>
+            <% end %>
+          <% end %>
+        </td>
         <td class="sl-table__td"><%= session.transport_kind %></td>
-        <td class="sl-table__td"><%= session.session_id %></td>
+        <td class="sl-table__td">
+          <% if tool_count.positive? %>
+            <span class="sl-metric"><%= tool_count %></span>
+          <% else %>
+            <span class="sl-metric sl-metric--blank" title="No tools were discovered for this session">none</span>
+          <% end %>
+        </td>
+        <td class="sl-table__td">
+          <% if usable %>
+            <span class="sl-badge sl-badge--success" title="Loop <%= loop_status %> — this session is still reused for tool calls">LIVE</span>
+          <% else %>
+            <span class="sl-badge sl-badge--mcp-meta" title="Loop <%= loop_status || "missing" %> — the session will not be used again">CLOSED</span>
+          <% end %>
+        </td>
+        <td class="sl-table__td"><%= sl_copyable_id(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" %>