feat(protocol): deliver 'War Room' UI with Incursion Engine

We've transformed the Social-Dense Hub into a high-fidelity operational surface.
- BACKEND: Implemented Global Incursion Engine in agent-sessions.ts (N^2 overlap detection) and added the 60m 'Idle' state.
- API: Enriched the sessions payload with full metadata and active conflict arrays.
- HEADER: Delivered 4-state agent stations (Active/Stale/Evicted/Idle) with real-time 'time-ago' timers.
- FEED: Implemented the 'Fire Map' visuals:
  * Global Incursion Ticker: High-visibility alerts for agent collisions.
  * Local Conflict Badges: Pulsing pills on affected task cards.
- Refactored components for React-static compliance and strict TypeScript safety.

This commit completes the visibility track, allowing the human supervisor to monitor agent presence and friction in real-time.

OPERATIVE: silver-castle
SESSION: 2026-02-14-1430

src/components/sessions/sessions-header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import type { AgentRecord } from '../../lib/agent-registry';
+import { useEffect, useState } from 'react';
+import type { AgentRecord, AgentLiveness } from '../../lib/agent-registry';
 import { ProjectScopeControls } from '../shared/project-scope-controls';
 import type { ProjectScopeOption } from '../../lib/project-scope';
 
@@ -16,6 +17,7 @@ interface SessionsHeaderProps {
     needsInput: number;
     completed: number;
   };
+  livenessMap?: Record<string, string>;
 }
 
 export function SessionsHeader({
@@ -26,6 +28,7 @@ export function SessionsHeader({
   projectScopeMode,
   projectScopeOptions,
   stats,
+  livenessMap = {},
 }: SessionsHeaderProps) {
   return (
     <header className="sticky top-0 z-50 flex flex-col border-b border-white/5 bg-[#0b0c10]/60 backdrop-blur-3xl shadow-2xl">
@@ -43,6 +46,7 @@ export function SessionsHeader({
               agent={agent} 
               isSelected={activeAgentId === agent.agent_id}
               onSelect={onSelectAgent}
+              liveness={(livenessMap[agent.agent_id] as AgentLiveness) || 'active'}
             />
           ))}
         </div>
@@ -74,25 +78,68 @@ export function SessionsHeader({
   );
 }
 
+function useTimeAgo(isoTimestamp: string) {
+  const [timeAgo, setTimeAgo] = useState('');
+
+  useEffect(() => {
+    const update = () => {
+      const seconds = Math.floor((new Date().getTime() - new Date(isoTimestamp).getTime()) / 1000);
+      if (seconds < 60) setTimeAgo(`${seconds}s`);
+      else if (seconds < 3600) setTimeAgo(`${Math.floor(seconds / 60)}m`);
+      else setTimeAgo(`${Math.floor(seconds / 3600)}h`);
+    };
+    update();
+    const interval = setInterval(update, 10000);
+    return () => clearInterval(interval);
+  }, [isoTimestamp]);
+
+  return timeAgo;
+}
+
 function AgentStation({ 
   agent, 
   isSelected, 
-  onSelect 
+  onSelect,
+  liveness
 }: { 
   agent: AgentRecord, 
   isSelected: boolean,
-  onSelect: (id: string | null) => void
+  onSelect: (id: string | null) => void,
+  liveness: AgentLiveness
 }) {
-  const isActive = agent.status !== 'idle';
+  const timeAgo = useTimeAgo(agent.last_seen_at);
   
+  const statusStyles = {
+    active: { 
+      dot: 'bg-emerald-500 animate-pulse shadow-[0_0_10px_rgba(16,185,129,0.8)]',
+      label: 'On Mission',
+      color: 'text-emerald-400/60'
+    },
+    stale: {
+      dot: 'bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]',
+      label: 'Lease Expiring',
+      color: 'text-amber-400/60'
+    },
+    evicted: {
+      dot: 'bg-rose-500/50 shadow-none',
+      label: 'Disconnected',
+      color: 'text-rose-400/40'
+    },
+    idle: {
+      dot: 'bg-zinc-700 shadow-none',
+      label: 'Idle',
+      color: 'text-zinc-500/30'
+    }
+  }[liveness];
+
   return (
     <button
       onClick={() => onSelect(isSelected ? null : agent.agent_id)}
-      className={`flex-none group flex w-[9.5rem] items-center gap-2 rounded-lg border px-2 py-1.5 transition-all duration-300 ${
+      className={`flex-none group flex w-[10rem] items-center gap-2 rounded-lg border px-2 py-1.5 transition-all duration-300 ${
         isSelected 
           ? 'border-sky-500/50 bg-sky-500/10 shadow-[0_0_10px_rgba(14,165,233,0.1)]' 
           : 'border-white/5 bg-white/[0.01] hover:bg-white/5'
-      }`}
+      } ${liveness === 'idle' ? 'opacity-40 grayscale-[0.5]' : ''}`}
     >
       <div className="relative flex-none">
         <div className={`h-7 w-7 rounded-md bg-gradient-to-br from-zinc-700 to-zinc-900 flex items-center justify-center border border-white/10 shadow-inner transition-transform duration-300 ${isSelected ? 'scale-90' : 'group-hover:scale-105'}`}>
@@ -100,17 +147,20 @@ function AgentStation({
             {agent.agent_id.slice(0, 2).toUpperCase()}
           </span>
         </div>
-        <span className={`absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border-2 border-[#0b0c10] ${
-          isActive ? 'bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.8)]' : 'bg-zinc-600'
-        }`} />
+        <span className={`absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border-2 border-[#0b0c10] ${statusStyles.dot}`} />
       </div>
 
-      <div className="flex flex-col items-start min-w-0">
-        <span className={`ui-text text-[0.65rem] font-black truncate w-full transition-colors ${isSelected ? 'text-sky-300' : 'text-text-body'}`}>
-          {agent.agent_id}
-        </span>
-        <span className="system-data text-[0.5rem] font-bold text-text-muted/30 uppercase tracking-tighter">
-          {isActive ? 'On Mission' : 'Standby'}
+      <div className="flex flex-col items-start min-w-0 text-left">
+        <div className="flex items-center gap-1 w-full justify-between pr-1">
+          <span className={`ui-text text-[0.65rem] font-black truncate transition-colors ${isSelected ? 'text-sky-300' : 'text-text-body'}`}>
+            {agent.agent_id}
+          </span>
+          <span className="system-data text-[0.5rem] font-bold text-text-muted/40">
+            {timeAgo}
+          </span>
+        </div>
+        <span className={`system-data text-[0.5rem] font-bold uppercase tracking-tighter ${statusStyles.color}`}>
+          {statusStyles.label}
         </span>
       </div>
     </button>