Add fleet groups, agent screenshots, deploy guards, and Crucible polish.

server/web/src/components/Fleet/AgentListItem.tsx

@@ -2,6 +2,7 @@ import AgentRemoteActions from './AgentRemoteActions';
 import { formatHashrate, formatUptime } from '../../help/fleetFilters';
 import type { Agent } from '../../types';
 import type { SeqCommandResult } from '../../context/WebSocketContext';
+import type { FleetGroup } from '../../help/fleetGroups';
 import LatencyBadge from './LatencyBadge';
 
 function formatRelTime(iso: string): string {
@@ -24,6 +25,7 @@ interface Props {
   onSelect: () => void;
   onCheck?: (checked: boolean) => void;
   commandResults?: SeqCommandResult[];
+  memberGroups?: FleetGroup[];
 }
 
 export default function AgentListItem({
@@ -36,8 +38,10 @@ export default function AgentListItem({
   onSelect,
   onCheck,
   commandResults,
+  memberGroups = [],
 }: Props) {
   const online = agent.status === 'online';
+  const primaryGroup = memberGroups[0];
 
   const handleRowClick = (e: React.MouseEvent) => {
     const target = e.target as HTMLElement;
@@ -51,6 +55,18 @@ export default function AgentListItem({
   return (
     <div
       className={`neon-card agent-list-item compact-row ${selected ? 'selected' : ''} ${expanded ? 'expanded' : ''}`}
+      style={
+        primaryGroup
+          ? ({
+              borderLeftWidth: '3px',
+              borderLeftStyle: 'solid',
+              borderLeftColor: primaryGroup.color,
+              boxShadow: selected
+                ? `inset 0 0 20px ${primaryGroup.color}22, 0 0 16px ${primaryGroup.color}33`
+                : undefined,
+            } as React.CSSProperties)
+          : undefined
+      }
       onClick={handleRowClick}
     >
       <div className="agent-list-header">
@@ -81,9 +97,18 @@ export default function AgentListItem({
         </div>
       </div>
 
-      {(agent.tags?.length ?? 0) > 0 && (
+      {(memberGroups.length > 0 || (agent.tags?.length ?? 0) > 0) && (
         <div className="agent-list-tags">
-          {agent.tags!.map((t) => (
+          {memberGroups.map((g) => (
+            <span
+              key={g.id}
+              className="agent-tag-chip fleet-group-tag"
+              style={{ background: `${g.color}22`, color: g.color, borderColor: `${g.color}55` }}
+            >
+              {g.name}
+            </span>
+          ))}
+          {agent.tags?.map((t) => (
             <span key={t} className="agent-tag-chip">{t}</span>
           ))}
         </div>