fix: don't overflow so much

Author: adamdecaf

frontend/src/components/AgentStatus.tsx

@@ -165,15 +165,15 @@ export function AgentStatus() {
                 className="border rounded-lg p-4 space-y-3"
               >
                 {/* Agent Header */}
-                <div className="flex items-center justify-between">
-                  <div className="font-mono text-sm font-semibold">{agent.agent_id}</div>
-                  <Badge className={getStateColor(agent.conn_state)}>
+                <div className="flex items-center justify-between gap-2">
+                  <div className="font-mono text-sm font-semibold truncate min-w-0" title={agent.agent_id}>{agent.agent_id}</div>
+                  <Badge className={`${getStateColor(agent.conn_state)} shrink-0`}>
                     {agent.conn_state}
                   </Badge>
                 </div>
 
                 {/* Pool Target */}
-                <div className="text-xs text-muted-foreground">
+                <div className="text-xs text-muted-foreground truncate" title={`${agent.pool_target.host}:${agent.pool_target.port}`}>
                   Pool: {agent.pool_target.host}:{agent.pool_target.port}
                 </div>
 

frontend/src/components/MessageTable.tsx

@@ -78,6 +78,17 @@ export function MessageTable({ messages, selectedMessageId, onSelectMessage, new
       <CardContent className="p-0 flex-1 overflow-hidden">
         <div className="overflow-auto h-full w-full">
           <table className="w-full text-sm table-fixed">
+            <colgroup>
+              {showSessionColumn && <col className="w-[140px]" />}
+              <col className="w-[120px]" />
+              <col className="w-[130px]" />
+              <col className="w-[190px]" />
+              <col className="w-[48px]" />
+              <col />
+              <col className="w-[56px]" />
+              <col className="w-[72px]" />
+              <col className="w-[80px]" />
+            </colgroup>
             <thead className="bg-muted sticky top-0 z-10">
               <tr>
                 {showSessionColumn && (
@@ -117,9 +128,9 @@ export function MessageTable({ messages, selectedMessageId, onSelectMessage, new
                   )}
                   <td className="p-3 font-mono text-xs">{formatTime(message.ts_recv)}</td>
                   <td className="p-3">{getDirectionBadge(message.direction)}</td>
-                  <td className="p-3 font-mono">{getMethod(message)}</td>
-                  <td className="p-3 font-mono text-xs">{getMessageId(message)}</td>
-                  <td className="p-3 font-mono text-xs max-w-xs overflow-hidden">
+                  <td className="p-3 font-mono truncate" title={getMethod(message)}>{getMethod(message)}</td>
+                  <td className="p-3 font-mono text-xs truncate">{getMessageId(message)}</td>
+                  <td className="p-3 font-mono text-xs truncate" title={JSON.stringify(message.decoded?.params || message.decoded?.result) ?? undefined}>
                     {truncate(
                       JSON.stringify(message.decoded?.params || message.decoded?.result),
                       50

frontend/src/components/SessionList.tsx

@@ -170,22 +170,22 @@ export function SessionList({ sessions, selectedSessionId, onSelectSession, onSe
             )}
 
             {/* Peer IP:Port and Message Count */}
-            <div className="flex items-center justify-between mb-1">
-              <span className="font-mono text-xs opacity-90">
+            <div className="flex items-center justify-between gap-2 mb-1">
+              <span className="font-mono text-xs opacity-90 truncate min-w-0" title={session.peer}>
                 {session.peer}
               </span>
-              <Badge variant="secondary">{session.message_count}</Badge>
+              <Badge variant="secondary" className="shrink-0">{session.message_count}</Badge>
             </div>
 
             {/* Pool Connection Status */}
             {session.pool_host && (
               <div className="mt-2 pt-2 border-t">
                 <div className="text-xs font-medium mb-1">Target Pool:</div>
-                <div className="flex items-center justify-between">
-                  <span className="font-mono text-xs opacity-90">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="font-mono text-xs opacity-90 truncate min-w-0" title={`${session.pool_host}:${session.pool_port}`}>
                     {session.pool_host}:{session.pool_port}
                   </span>
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 shrink-0">
                     <Badge
                       variant={session.pool_connected ? "default" : "destructive"}
                       className={session.pool_connected ? "bg-green-600" : "bg-red-600"}
@@ -207,7 +207,7 @@ export function SessionList({ sessions, selectedSessionId, onSelectSession, onSe
                   </div>
                 </div>
                 {session.pool_peer && session.pool_connected && (
-                  <div className="text-xs opacity-75 mt-1">
+                  <div className="text-xs opacity-75 mt-1 truncate" title={`→ ${session.pool_peer}`}>
                     → {session.pool_peer}
                   </div>
                 )}