npm - groove-dev - Versions diffs - 0.23.0 → 0.24.1 - Mend

groove-dev 0.23.0 → 0.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/node_modules/@groove-dev/gui/dist/index.html CHANGED Viewed

@@ -5,12 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-QmFja2dw.js"></script>
+    <script type="module" crossorigin src="/assets/index-DJbDjzF2.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-Cg9SzKgD.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-C0naHS9e.css">
   </head>
   <body>
     <div id="root"></div>

package/node_modules/@groove-dev/gui/src/components/dashboard/activity-feed.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
 import { RotateCw, Zap, AlertTriangle, CheckCircle, UserPlus } from 'lucide-react';
 import { timeAgo } from '../../lib/format';
-import { cn } from '../../lib/cn';
 const ICONS = {
   spawn: UserPlus,
@@ -19,10 +19,10 @@ const ICON_COLORS = {
   default: 'text-text-3',
 };
-export function ActivityFeed({ events = [] }) {
+const ActivityFeed = memo(function ActivityFeed({ events = [] }) {
   if (!events.length) {
     return (
-      <div className="text-xs text-text-4 font-sans py-3 text-center">
+      <div className="text-xs text-text-3 font-mono py-2.5 text-center">
         No recent activity
       </div>
     );
@@ -30,17 +30,19 @@ export function ActivityFeed({ events = [] }) {
   return (
     <div className="flex items-center gap-3 overflow-x-auto py-2 px-3">
-      {events.slice(-10).reverse().map((event, i) => {
+      {events.slice(-15).reverse().map((event, i) => {
         const Icon = ICONS[event.type] || ICONS.default;
         const color = ICON_COLORS[event.type] || ICON_COLORS.default;
         return (
-          <div key={i} className="flex items-center gap-1.5 flex-shrink-0 text-2xs font-sans">
-            <Icon size={12} className={color} />
-            <span className="text-text-2 whitespace-nowrap">{event.text}</span>
-            <span className="text-text-4">{timeAgo(event.timestamp)}</span>
+          <div key={i} className="flex items-center gap-1.5 flex-shrink-0">
+            <Icon size={11} className={color} />
+            <span className="text-xs font-sans text-text-2 whitespace-nowrap">{event.text}</span>
+            <span className="text-2xs font-mono text-text-4">{timeAgo(event.timestamp || event.t)}</span>
           </div>
         );
       })}
     </div>
   );
-}
+});
+export { ActivityFeed };

package/node_modules/@groove-dev/gui/src/components/dashboard/cache-ring.jsx ADDED Viewed

@@ -0,0 +1,102 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useRef, useEffect, memo } from 'react';
+import { HEX } from '../../lib/theme-hex';
+import { fmtNum } from '../../lib/format';
+const CacheRing = memo(function CacheRing({ cacheRead = 0, cacheCreation = 0, totalInput = 0, size = 140 }) {
+  const canvasRef = useRef(null);
+  const total = cacheRead + cacheCreation + totalInput;
+  const hitRate = total > 0 ? (cacheRead / total) * 100 : 0;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = size * dpr;
+    canvas.height = size * dpr;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, size, size);
+    const cx = size / 2;
+    const cy = size / 2;
+    const radius = (size - 12) / 2;
+    const strokeWidth = 5;
+    const startAngle = (135 * Math.PI) / 180;
+    const endAngle = (405 * Math.PI) / 180;
+    const sweep = endAngle - startAngle;
+    // Background track
+    ctx.beginPath();
+    ctx.arc(cx, cy, radius, startAngle, endAngle);
+    ctx.strokeStyle = HEX.surface4;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = 'round';
+    ctx.stroke();
+    if (total > 0) {
+      const readPct = cacheRead / total;
+      const createPct = cacheCreation / total;
+      if (readPct > 0) {
+        const segEnd = startAngle + sweep * readPct;
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius, startAngle, segEnd);
+        ctx.strokeStyle = HEX.accent;
+        ctx.lineWidth = strokeWidth;
+        ctx.lineCap = 'round';
+        ctx.stroke();
+      }
+      if (createPct > 0) {
+        const segStart = startAngle + sweep * readPct;
+        const segEnd = segStart + sweep * createPct;
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius, segStart, segEnd);
+        ctx.strokeStyle = HEX.purple;
+        ctx.lineWidth = strokeWidth;
+        ctx.lineCap = 'butt';
+        ctx.stroke();
+      }
+    }
+    // Center text
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.font = `600 ${size * 0.2}px 'JetBrains Mono Variable', monospace`;
+    ctx.fillStyle = HEX.text0;
+    ctx.fillText(`${Math.round(hitRate)}%`, cx, cy - 3);
+    ctx.font = `500 ${size * 0.08}px 'JetBrains Mono Variable', monospace`;
+    ctx.fillStyle = HEX.text3;
+    ctx.fillText('CACHE', cx, cy + size * 0.13);
+  }, [cacheRead, cacheCreation, totalInput, size, total, hitRate]);
+  return (
+    <div className="flex flex-col items-center justify-center h-full px-3 py-3">
+      <canvas
+        ref={canvasRef}
+        className="flex-shrink-0"
+        style={{ width: size, height: size }}
+      />
+      <div className="w-full mt-3 space-y-1.5 max-w-[160px]">
+        <StatRow color={HEX.accent} label="Read" value={fmtNum(cacheRead)} />
+        <StatRow color={HEX.purple} label="Create" value={fmtNum(cacheCreation)} />
+        <StatRow color={HEX.surface5} label="Miss" value={fmtNum(Math.max(totalInput - cacheRead - cacheCreation, 0))} />
+      </div>
+    </div>
+  );
+});
+function StatRow({ color, label, value }) {
+  return (
+    <div className="flex items-center gap-2 text-xs font-mono">
+      <span className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: color }} />
+      <span className="text-text-3 uppercase tracking-wider flex-1">{label}</span>
+      <span className="text-text-1 tabular-nums">{value}</span>
+    </div>
+  );
+}
+export { CacheRing };

package/node_modules/@groove-dev/gui/src/components/dashboard/fleet-panel.jsx CHANGED Viewed

@@ -1,64 +1,131 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Avatar } from '../ui/avatar';
-import { Badge } from '../ui/badge';
-import { StatusDot } from '../ui/status-dot';
-import { fmtNum, fmtPct } from '../../lib/format';
+import { memo } from 'react';
+import { fmtNum, fmtDollar } from '../../lib/format';
 import { cn } from '../../lib/cn';
+import { statusColor } from '../../lib/status';
 import { ScrollArea } from '../ui/scroll-area';
-const STATUS_VARIANT = {
-  running: 'success', starting: 'warning', stopped: 'default',
-  crashed: 'danger', completed: 'accent', killed: 'default',
-};
+const COST_SOURCE_LABEL = { actual: 'ACT', estimated: 'EST', local: 'LOC' };
-export function FleetPanel({ agents }) {
-  if (!agents?.length) {
+const AgentRow = memo(function AgentRow({ agent, isRotating }) {
+  const isAlive = agent.status === 'running' || agent.status === 'starting';
+  const contextPct = Math.round((agent.contextUsage || 0) * 100);
+  const sColor = isRotating ? '#c678dd' : statusColor(agent.status);
+  const quality = agent.quality;
+  const successRate = quality?.toolSuccessRate != null ? Math.round(quality.toolSuccessRate * 100) : null;
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 hover:bg-surface-3 transition-colors">
+      {/* Status square */}
+      <span className="relative flex-shrink-0 w-[6px] h-[6px]">
+        <span className="absolute inset-0 rounded-sm" style={{ background: sColor }} />
+        {isAlive && (
+          <span
+            className="absolute inset-[-2px] rounded-sm"
+            style={{ background: sColor, opacity: 0.15, animation: 'node-pulse-bar 2s ease-in-out infinite' }}
+          />
+        )}
+      </span>
+      {/* Name + role/model */}
+      <div className="flex-1 min-w-0">
+        <div className="text-xs font-semibold text-text-0 font-sans truncate leading-none">{agent.name}</div>
+        <div className="flex items-center gap-1 mt-0.5">
+          <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">{agent.role}</span>
+          <span className="text-2xs text-text-4">/</span>
+          <span className="text-2xs font-mono text-text-3">{shortModel(agent.model)}</span>
+        </div>
+      </div>
+      {/* Tokens + cost */}
+      <div className="text-right flex-shrink-0">
+        <div className="text-xs font-mono text-text-1 tabular-nums leading-none">{fmtNum(agent.tokens || 0)}</div>
+        {(agent.costUsd || 0) > 0 && (
+          <div className="text-2xs font-mono text-text-3 mt-0.5">{fmtDollar(agent.costUsd)}</div>
+        )}
+      </div>
+      {/* Quality / tool success */}
+      {successRate != null && (
+        <span
+          className="text-2xs font-mono font-bold uppercase px-1 py-px rounded-sm flex-shrink-0"
+          style={{
+            color: successRate >= 90 ? '#4ae168' : successRate >= 70 ? '#e5c07b' : '#e06c75',
+            background: successRate >= 90 ? 'rgba(74,225,104,0.1)' : successRate >= 70 ? 'rgba(229,192,123,0.1)' : 'rgba(224,108,117,0.1)',
+          }}
+        >
+          {successRate}%
+        </span>
+      )}
+      {/* Cost source badge */}
+      {agent.costSource && agent.costSource !== 'actual' && (
+        <span className="text-2xs font-mono text-text-4 uppercase tracking-wider flex-shrink-0">
+          {COST_SOURCE_LABEL[agent.costSource] || ''}
+        </span>
+      )}
+      {/* Context bar */}
+      <div className="w-12 flex-shrink-0">
+        <div className="flex items-center justify-end gap-1 mb-0.5">
+          <span className="text-2xs font-mono text-text-2 tabular-nums">{contextPct}%</span>
+        </div>
+        <div className="h-[2px] bg-surface-0 rounded-full overflow-hidden">
+          <div
+            className="h-full rounded-full transition-all duration-700"
+            style={{
+              width: `${Math.max(contextPct, 1)}%`,
+              background: contextPct > 80 ? '#e06c75' : contextPct > 60 ? '#e5c07b' : isAlive ? '#61afef' : '#333842',
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
+function shortModel(id) {
+  if (!id || id === 'auto' || id === 'default') return 'default';
+  const claude = id.match(/^claude-(opus|sonnet|haiku)-(\d+)-(\d+)/);
+  if (claude) return `${claude[1][0].toUpperCase()}${claude[1].slice(1)} ${claude[2]}.${claude[3]}`;
+  if (id.startsWith('gemini-')) return id.replace('gemini-', 'Gem ').replace('-preview', '');
+  return id.length > 12 ? id.slice(0, 12) + '...' : id;
+}
+const FleetPanel = memo(function FleetPanel({ agentBreakdown, rotating = [] }) {
+  if (!agentBreakdown?.length) {
     return (
-      <div className="flex-1 flex items-center justify-center text-xs text-text-4 font-sans p-4">
-        No agents running
+      <div className="flex-1 flex items-center justify-center text-xs text-text-3 font-mono p-4">
+        No agents
       </div>
     );
   }
-  // Group by team
   const teams = {};
-  for (const a of agents) {
-    const team = a.teamId || 'Ungrouped';
+  for (const a of agentBreakdown) {
+    const team = a.teamId || 'ungrouped';
     if (!teams[team]) teams[team] = [];
     teams[team].push(a);
   }
+  const rotatingSet = new Set(rotating);
   return (
     <ScrollArea className="flex-1">
-      <div className="p-3 space-y-4">
+      <div className="py-1">
         {Object.entries(teams).map(([team, members]) => (
           <div key={team}>
-            <div className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-2">{team}</div>
-            <div className="space-y-1">
-              {members.map((a) => (
-                <div key={a.id} className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-surface-5 transition-colors">
-                  <StatusDot status={a.status} size="sm" />
-                  <Avatar name={a.name} role={a.role} size="sm" />
-                  <div className="flex-1 min-w-0">
-                    <div className="text-xs text-text-0 font-sans truncate">{a.name}</div>
-                  </div>
-                  <span className="text-2xs font-mono text-text-3">{fmtNum(a.tokensUsed || 0)}</span>
-                  {/* Mini context bar */}
-                  <div className="w-10 h-1 bg-surface-0 rounded-full overflow-hidden">
-                    <div
-                      className="h-full rounded-full"
-                      style={{
-                        width: `${Math.min(a.contextUsage || 0, 100)}%`,
-                        background: (a.contextUsage || 0) >= 80 ? 'var(--color-danger)' : (a.contextUsage || 0) >= 60 ? 'var(--color-warning)' : 'var(--color-success)',
-                      }}
-                    />
-                  </div>
-                </div>
-              ))}
+            <div className="px-3 pt-2 pb-1">
+              <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">{team}</span>
             </div>
+            {members.map((a) => (
+              <AgentRow key={a.id} agent={a} isRotating={rotatingSet.has(a.id)} />
+            ))}
           </div>
         ))}
       </div>
     </ScrollArea>
   );
-}
+});
+export { FleetPanel };

package/node_modules/@groove-dev/gui/src/components/dashboard/header-bar.jsx CHANGED Viewed

@@ -1,26 +1,45 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
 import { fmtUptime, timeAgo } from '../../lib/format';
 import { StatusDot } from '../ui/status-dot';
 import { RefreshCw } from 'lucide-react';
-export function DashboardHeader({ connected, runningCount, totalCount, uptime, lastFetch }) {
+const DashboardHeader = memo(function DashboardHeader({ connected, runningCount, totalCount, uptime, lastFetch, activeTeam }) {
   return (
-    <div className="flex items-center gap-4 px-4 py-2.5 bg-surface-1 border-b border-border">
-      <h2 className="text-sm font-semibold text-text-0 font-sans">Command Center</h2>
+    <div className="flex items-center gap-4 px-4 py-2 bg-surface-1 border-b border-border">
+      <h2 className="text-xs font-semibold text-text-0 font-sans tracking-wide uppercase">Command Center</h2>
+      {activeTeam && (
+        <>
+          <span className="text-text-4">/</span>
+          <span className="text-xs font-mono text-text-2">{activeTeam.name}</span>
+        </>
+      )}
       <div className="flex-1" />
       {connected && (
-        <div className="flex items-center gap-4 text-2xs text-text-3 font-sans">
-          <span>{runningCount}/{totalCount} agents</span>
-          {uptime > 0 && <span>Up {fmtUptime(uptime)}</span>}
+        <div className="flex items-center gap-3.5 text-xs font-mono text-text-2">
+          <span>
+            <span className="text-text-1">{runningCount}</span>
+            <span className="text-text-3">/{totalCount}</span>
+            <span className="ml-1 text-text-3">agents</span>
+          </span>
+          {uptime > 0 && (
+            <span className="text-text-3">Up {fmtUptime(uptime)}</span>
+          )}
           {lastFetch > 0 && (
             <span className="flex items-center gap-1 text-text-4">
-              <RefreshCw size={10} /> {timeAgo(lastFetch)}
+              <RefreshCw size={9} />
+              <span>{timeAgo(lastFetch)}</span>
             </span>
           )}
         </div>
       )}
       <StatusDot status={connected ? 'running' : 'crashed'} size="sm" />
     </div>
   );
-}
+});
+export { DashboardHeader };

package/node_modules/@groove-dev/gui/src/components/dashboard/intel-panel.jsx ADDED Viewed

@@ -0,0 +1,269 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/tabs';
+import { ScrollArea } from '../ui/scroll-area';
+import { fmtNum, fmtPct, timeAgo } from '../../lib/format';
+import { cn } from '../../lib/cn';
+import { HEX } from '../../lib/theme-hex';
+import { RotateCw, Brain, Radio } from 'lucide-react';
+/* ── Tiny SVG sparkline for inline use ──────────────────────── */
+function TinySparkline({ data, color = HEX.accent, width = 60, height = 16 }) {
+  if (!data || data.length < 2) return <div style={{ width, height }} />;
+  const vals = Array.isArray(data[0]) ? data : data.map((d) => (typeof d === 'number' ? d : d.v));
+  const min = Math.min(...vals);
+  const max = Math.max(...vals);
+  const range = max - min || 1;
+  const points = vals.map((v, i) => {
+    const x = (i / (vals.length - 1)) * width;
+    const y = height - ((v - min) / range) * (height - 2) - 1;
+    return `${x},${y}`;
+  }).join(' ');
+  return (
+    <svg width={width} height={height} className="flex-shrink-0">
+      <polyline points={points} fill="none" stroke={color} strokeWidth="1" strokeLinejoin="round" strokeOpacity="0.7" />
+    </svg>
+  );
+}
+/* ── Savings bar ────────────────────────────────────────────── */
+function SavingsBar({ label, value, total, color }) {
+  const pct = total > 0 ? (value / total) * 100 : 0;
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-center justify-between text-xs font-mono">
+        <span className="text-text-2">{label}</span>
+        <span className="text-text-1 tabular-nums">{fmtNum(value)}</span>
+      </div>
+      <div className="h-[2px] bg-surface-0 rounded-full overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-500"
+          style={{ width: `${Math.min(pct, 100)}%`, background: color }}
+        />
+      </div>
+    </div>
+  );
+}
+/* ── Rotation Tab ───────────────────────────────────────────── */
+function RotationTab({ tokens, rotation }) {
+  const savings = tokens?.savings || {};
+  const totalSaved = savings.total || 0;
+  const totalUsed = tokens?.totalTokens || 0;
+  const hypothetical = totalUsed + totalSaved;
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-3 space-y-4">
+        {/* Big numbers */}
+        <div className="flex gap-4">
+          <div>
+            <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5">Rotations</div>
+            <div className="text-xl font-mono font-semibold text-text-0 tabular-nums leading-none">
+              {rotation?.totalRotations || 0}
+            </div>
+          </div>
+          <div>
+            <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5">Saved</div>
+            <div className="text-xl font-mono font-semibold text-success tabular-nums leading-none">
+              {fmtNum(totalSaved)}
+            </div>
+            {hypothetical > 0 && (
+              <div className="text-2xs font-mono text-text-3 mt-0.5">
+                {fmtPct((totalSaved / hypothetical) * 100)} of total
+              </div>
+            )}
+          </div>
+        </div>
+        {/* Savings breakdown */}
+        <div className="space-y-2">
+          <SavingsBar label="Rotation" value={savings.fromRotation || 0} total={hypothetical} color={HEX.accent} />
+          <SavingsBar label="Conflict prevention" value={savings.fromConflictPrevention || 0} total={hypothetical} color={HEX.purple} />
+          <SavingsBar label="Cold-start skip" value={savings.fromColdStartSkip || 0} total={hypothetical} color={HEX.info} />
+        </div>
+        {/* Rotation history */}
+        {rotation?.history?.length > 0 && (
+          <div>
+            <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-1.5">Recent</div>
+            <div className="space-y-1">
+              {rotation.history.slice(-8).reverse().map((r, i) => (
+                <div key={i} className="flex items-center gap-2 text-xs font-mono px-2 py-1 bg-surface-0 rounded">
+                  <span className="text-text-1 font-medium capitalize truncate flex-1">{r.agentName || r.role}</span>
+                  <span className="text-text-3 tabular-nums">{fmtPct((r.contextUsage || 0) * 100)}</span>
+                  <span className="text-text-4">{timeAgo(r.timestamp)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}
+/* ── Adaptive Tab ───────────────────────────────────────────── */
+function AdaptiveTab({ adaptive }) {
+  if (!adaptive?.length) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-xs text-text-3 font-mono p-4">
+        No adaptive profiles
+      </div>
+    );
+  }
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-3 space-y-3">
+        {adaptive.map((p) => (
+          <div key={p.key} className="bg-surface-0 rounded px-2.5 py-2 space-y-1.5">
+            {/* Profile header */}
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-mono text-text-1 flex-1 truncate">{p.key}</span>
+              <span className="text-xs font-mono font-semibold text-text-0 tabular-nums">
+                {fmtPct(p.threshold * 100)}
+              </span>
+              <span
+                className={cn(
+                  'text-2xs font-mono font-bold uppercase px-1 py-px rounded-sm',
+                  p.converged
+                    ? 'text-success bg-success/10'
+                    : 'text-text-3 bg-surface-3',
+                )}
+              >
+                {p.converged ? 'CONV' : `${p.adjustments} adj`}
+              </span>
+            </div>
+            {/* Threshold drift sparkline */}
+            {p.thresholdHistory?.length > 1 && (
+              <div className="flex items-center gap-2">
+                <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">Drift</span>
+                <TinySparkline
+                  data={p.thresholdHistory.map((h) => h.v)}
+                  color={p.converged ? HEX.success : HEX.accent}
+                  width={80}
+                  height={14}
+                />
+              </div>
+            )}
+            {/* Quality scores sparkline */}
+            {p.recentScores?.length > 1 && (
+              <div className="flex items-center gap-2">
+                <span className="text-2xs font-mono text-text-3 uppercase tracking-wider">Quality</span>
+                <TinySparkline
+                  data={p.recentScores}
+                  color={HEX.warning}
+                  width={80}
+                  height={14}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
+/* ── Journalist Tab ─────────────────────────────────────────── */
+function JournalistTab({ journalist }) {
+  if (!journalist) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-xs text-text-3 font-mono p-4">
+        Journalist inactive
+      </div>
+    );
+  }
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-3 space-y-3">
+        {/* Status row */}
+        <div className="flex items-center gap-3">
+          <div>
+            <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5">Cycles</div>
+            <div className="text-lg font-mono font-semibold text-text-0 tabular-nums leading-none">
+              {journalist.cycleCount || 0}
+            </div>
+          </div>
+          {journalist.lastCycleAt && (
+            <div>
+              <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5">Last</div>
+              <div className="text-xs font-mono text-text-2">{timeAgo(journalist.lastCycleAt)}</div>
+            </div>
+          )}
+          {journalist.synthesizing && (
+            <span className="text-2xs font-mono font-bold text-accent uppercase tracking-wider animate-pulse">
+              Synthesizing
+            </span>
+          )}
+        </div>
+        {/* Last summary */}
+        {journalist.lastSummary && (
+          <div>
+            <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-1">Summary</div>
+            <div className="text-xs font-sans text-text-2 leading-relaxed bg-surface-0 rounded px-2.5 py-2 max-h-32 overflow-y-auto">
+              {journalist.lastSummary}
+            </div>
+          </div>
+        )}
+        {/* Recent history */}
+        {journalist.recentHistory?.length > 0 && (
+          <div>
+            <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-1.5">History</div>
+            <div className="space-y-1">
+              {journalist.recentHistory.slice().reverse().map((h, i) => (
+                <div key={i} className="flex items-center gap-2 text-xs font-mono px-2 py-1 bg-surface-0 rounded">
+                  <span className="text-text-3">#{h.cycle}</span>
+                  <span className="text-text-2 flex-1 truncate">{h.agentCount} agents</span>
+                  <span className="text-text-4">{timeAgo(h.timestamp)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}
+/* ── Intel Panel (main export) ──────────────────────────────── */
+const IntelPanel = memo(function IntelPanel({ tokens, rotation, adaptive, journalist }) {
+  return (
+    <Tabs defaultValue="rotation" className="flex flex-col h-full">
+      <TabsList className="flex-shrink-0 px-1">
+        <TabsTrigger value="rotation" className="text-xs px-2.5 py-1.5 gap-1">
+          <RotateCw size={11} />
+          Rotation
+        </TabsTrigger>
+        <TabsTrigger value="adaptive" className="text-xs px-2.5 py-1.5 gap-1">
+          <Brain size={11} />
+          Adaptive
+        </TabsTrigger>
+        <TabsTrigger value="journalist" className="text-xs px-2.5 py-1.5 gap-1">
+          <Radio size={11} />
+          Journalist
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="rotation" className="flex-1 min-h-0 overflow-hidden">
+        <RotationTab tokens={tokens} rotation={rotation} />
+      </TabsContent>
+      <TabsContent value="adaptive" className="flex-1 min-h-0 overflow-hidden">
+        <AdaptiveTab adaptive={adaptive} />
+      </TabsContent>
+      <TabsContent value="journalist" className="flex-1 min-h-0 overflow-hidden">
+        <JournalistTab journalist={journalist} />
+      </TabsContent>
+    </Tabs>
+  );
+});
+export { IntelPanel };