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
This commit is contained in:
zenchantlive 2026-02-14 11:36:32 -08:00
parent e010e0b10b
commit eec1d6e28f
10 changed files with 224 additions and 41 deletions

View file

@ -1,16 +1,17 @@
'use client';
import { motion } from 'framer-motion';
import type { SessionTaskCard } from '../../lib/agent-sessions';
import type { SessionTaskCard, Incursion } from '../../lib/agent-sessions';
import { statusBorder, statusDotColor, statusGradient, sessionStateGlow } from '../shared/status-utils';
interface SessionFeedCardProps {
card: SessionTaskCard;
onSelect: (id: string) => void;
isHighlighted?: boolean;
incursion?: Incursion;
}
export function SessionFeedCard({ card, onSelect, isHighlighted }: SessionFeedCardProps) {
export function SessionFeedCard({ card, onSelect, isHighlighted, incursion }: SessionFeedCardProps) {
return (
<motion.article
layout
@ -19,8 +20,20 @@ export function SessionFeedCard({ card, onSelect, isHighlighted }: SessionFeedCa
isHighlighted
? 'border-sky-500 bg-sky-500/10 ring-1 ring-sky-500/50 scale-[1.02] shadow-[0_0_20px_rgba(56,189,248,0.15)]'
: `${statusBorder(card.status)} ${statusGradient(card.status)} hover:bg-white/[0.04]`
} ${sessionStateGlow(card.sessionState)}`}
} ${sessionStateGlow(card.sessionState)} ${incursion ? 'ring-1 ring-rose-500/30' : ''}`}
>
{incursion && (
<div className="absolute -top-2 right-4 z-10">
<span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[0.55rem] font-black uppercase tracking-[0.1em] border shadow-lg animate-pulse ${
incursion.severity === 'exact'
? 'bg-rose-500 text-white border-rose-400 shadow-rose-500/20'
: 'bg-amber-500 text-black border-amber-400 shadow-amber-500/20'
}`}>
Conflict
</span>
</div>
)}
<div className="flex gap-[0.75rem]">
{/* Compact Avatar */}
<div className="flex-none">