@sleep2agi/agent-network-dashboard 0.4.5-preview.9 → 0.4.5-preview.91

package/app/components/utils.ts

@@ -1,3 +1,16 @@
+/** Round 82: strip the most common markdown markup from agent-to-agent
+ *  task / message bodies so single-line table previews read cleanly.
+ *  Full original content stays in the expanded row / drawer / title=. */
+export function previewContent(raw: string | null | undefined): string {
+  if (!raw) return '--';
+  return raw
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')   // images: ![alt](src) → alt
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')    // links:  [text](href) → text
+    .replace(/`([^`]+)`/g, '$1')                // inline code: `x` → x
+    .replace(/\s+/g, ' ')                       // collapse whitespace
+    .trim() || '--';
+}
+
 export function timeAgo(dateStr: string): string {
   if (!dateStr) return '--';
   const diff = Date.now() - new Date(dateStr.replace(' ', 'T') + 'Z').getTime();

package/app/globals.css

@@ -811,3 +811,93 @@ body {
   color: #92400e !important;
   border-color: rgba(217, 119, 6, 0.28) !important;
 }
+
+/* Round 30 — global drawer entrance keyframes so TaskDrawer, TaskChatPanel,
+   and any future right-side panel share one source. Previously the
+   keyframe lived inside TaskChatPanel's <style jsx global>; if that
+   component never mounted, the keyframe was missing for TaskDrawer. */
+@keyframes anet-slide-in {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0);    }
+}
+.animate-slide-in { animation: anet-slide-in 0.2s ease-out; }
+
+@keyframes anet-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+.anet-fade-in { animation: anet-fade-in 0.15s ease-out; }
+
+/* Round 36 — current-step ring pulse on TaskDrawer timeline. Halo gently
+   breathes around the active step's dot so users can spot "task is here". */
+@keyframes anet-current-step-pulse-kf {
+  0%, 100% { transform: scale(1);   opacity: 0.6; }
+  50%      { transform: scale(1.25); opacity: 0.0; }
+}
+.anet-current-step-pulse {
+  animation: anet-current-step-pulse-kf 1.6s ease-in-out infinite;
+}
+
+/* Round 45 — TopoGraph rotating radar sweep wedge. 6s slow rotation
+   gives the topology canvas a real "radar scan" feel without distracting
+   from the agent nodes. */
+@keyframes anet-topo-sweep-kf {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.anet-topo-sweep {
+  animation: anet-topo-sweep-kf 6s linear infinite;
+}
+
+/* Round 46 — animated dashed spokes flowing from hub outward. Each spoke
+   gets a small animationDelay (set inline) so the dashes don't all flow
+   in sync — reads as "command relay" pulse rather than a metronome. */
+@keyframes anet-topo-spoke-flow-kf {
+  from { stroke-dashoffset: 0;   }
+  to   { stroke-dashoffset: -40; }
+}
+.anet-topo-spoke-flow {
+  animation: anet-topo-spoke-flow-kf 2.4s linear infinite;
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+   Round 29 — prefers-reduced-motion a11y sweep
+
+   Rounds 19~27 accumulated a lot of small animations: Tasks row 0fr↔1fr
+   expand, chevron rotate, hover bg shifts, Cmd+K popover, TaskChatPanel
+   slide-in, brand/skeleton pulses already had their own guards.
+
+   For users who set system "reduce motion": neutralise everything in one
+   pass. Don't kill state changes outright — only their durations and
+   keyframes. Hover and focus colours still apply, just instantly.
+   ───────────────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+  /* Skeleton pulse already has its own guard; harden in case the bar
+     class is reused without anet-skeleton-pulse. */
+  .anet-skeleton-bar {
+    animation: none !important;
+  }
+  /* Brand pulse hidden — green/red dot still indicates state via color. */
+  .anet-brand-pulse {
+    animation: none !important;
+  }
+  /* Drawer entrance kills — keyframes promoted to globals in r30. */
+  .animate-slide-in,
+  .anet-fade-in,
+  .anet-current-step-pulse,
+  .anet-topo-sweep,
+  .anet-topo-spoke-flow {
+    animation: none !important;
+  }
+  /* Tasks row grid 0fr↔1fr keep working (it's the toggle mechanism),
+     but the smooth transition just snaps. Already handled via the
+     blanket transition-duration override above. */
+}

package/app/lib/status.ts

@@ -0,0 +1,85 @@
+/** Single source of truth for task status colors. Both `/tasks` (chip
+ *  strip, badge, distribution bar) and the Overview Recent Activity row
+ *  used to ship their own incomplete maps; round 66 consolidates them
+ *  here so adding a new status updates every consumer at once.
+ *
+ *  Order in `TASK_STATUSES` is chronological-ish: lifecycle progress on
+ *  the left, terminal-good (`closed`) in the middle, terminal-bad
+ *  (`failed`/`cancelled`/`expired`) on the right. */
+
+export const TASK_STATUSES = [
+  'created',
+  'delivered',
+  'acked',
+  'running',
+  'replied',
+  'closed',
+  'failed',
+  'cancelled',
+  'expired',
+] as const;
+
+export type TaskStatus = typeof TASK_STATUSES[number];
+
+/** Pill / chip background+text+border. Tailwind classes, not inlined hex,
+ *  because chips are static class names safe from purge. */
+export const STATUS_CHIP_CLASS: Record<string, string> = {
+  created:   'bg-gray-500/10 text-gray-400 border-gray-500/20',
+  delivered: 'bg-blue-500/10 text-blue-300 border-blue-500/20',
+  acked:     'bg-cyan-500/10 text-cyan-300 border-cyan-500/20',
+  running:   'bg-green-500/10 text-green-300 border-green-500/20',
+  replied:   'bg-purple-500/10 text-purple-300 border-purple-500/20',
+  closed:    'bg-gray-500/10 text-gray-500 border-gray-500/20',
+  failed:    'bg-red-500/10 text-red-300 border-red-500/20',
+  cancelled: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20',
+  expired:   'bg-orange-500/10 text-orange-300 border-orange-500/20',
+};
+
+/** Inline hex dots — used wherever Tailwind would purge dynamic class
+ *  names (`bg-${family}-400`). Style attribute carries the color. */
+export const STATUS_DOT_HEX: Record<string, string> = {
+  created:   '#9ca3af',
+  delivered: '#60a5fa',
+  acked:     '#22d3ee',
+  running:   '#4ade80',
+  replied:   '#a78bfa',
+  closed:    '#6b7280',
+  failed:    '#f87171',
+  cancelled: '#facc15',
+  expired:   '#fb923c',
+};
+
+/** Session lifecycle (distinct from task lifecycle above). Shared by
+ *  /nodes status pills and /admin Online Sessions row chips so an
+ *  agent in `blocked` state reads the same color everywhere.
+ *  Round 91 — extracted from app/nodes/page.tsx. */
+export const SESSION_STATUS_CHIP_CLASS: Record<string, string> = {
+  working: 'bg-green-500/10 text-green-300 border-green-500/20',
+  idle:    'bg-blue-500/10 text-blue-300 border-blue-500/20',
+  blocked: 'bg-yellow-500/10 text-yellow-300 border-yellow-500/20',
+  error:   'bg-red-500/10 text-red-300 border-red-500/20',
+  offline: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+};
+
+/** Text-only color for session status. Used where a chip background
+ *  would be too heavy — e.g. /node detail header status label. */
+export const SESSION_STATUS_TEXT_CLASS: Record<string, string> = {
+  working: 'text-green-400',
+  idle:    'text-blue-400',
+  blocked: 'text-yellow-400',
+  error:   'text-red-400',
+  offline: 'text-gray-500',
+};
+
+/** Solid bar segment background for the Tasks distribution bar. */
+export const STATUS_BAR_CLASS: Record<string, string> = {
+  created:   'bg-gray-500',
+  delivered: 'bg-blue-500',
+  acked:     'bg-cyan-500',
+  running:   'bg-green-500',
+  replied:   'bg-purple-500',
+  closed:    'bg-gray-600',
+  failed:    'bg-red-500',
+  cancelled: 'bg-yellow-500',
+  expired:   'bg-orange-500',
+};

package/app/lib/version.ts

@@ -0,0 +1,7 @@
+/** Dashboard package version sourced from package.json at build time.
+ *  Importing JSON requires `resolveJsonModule: true` in tsconfig, which
+ *  Next sets by default. Bumping is automated by the publish flow, so this
+ *  surfaces the real preview number in Settings → Dashboard. */
+import pkg from '../../package.json' assert { type: 'json' };
+
+export const DASHBOARD_VERSION: string = pkg.version;

package/app/login/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { FormEvent, useState } from 'react';
+import { DASHBOARD_VERSION } from '../lib/version';
 
 export default function LoginPage() {
   const [mode, setMode] = useState<'login' | 'register'>('login');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
   const [pending, setPending] = useState(false);
 
@@ -68,7 +70,9 @@ export default function LoginPage() {
           </div>
           <h1 className="text-[22px] sm:text-2xl font-semibold text-white tracking-tight">Agent Network</h1>
           <p className="text-[13px] text-gray-500 mt-1.5 leading-snug">
-            One control plane for your AI agents · <span className="text-gray-600">Tasks · Mesh · Messages</span>
+            {mode === 'login'
+              ? <>Welcome back · <span className="text-gray-600">Tasks · Mesh · Messages</span></>
+              : <>Create your account · <span className="text-gray-600">Free preview · no credit card</span></>}
           </p>
         </div>
 
@@ -93,22 +97,51 @@ export default function LoginPage() {
           <label htmlFor="password" className="block text-xs text-gray-500 mb-2 uppercase tracking-wider">
             Password
           </label>
-          <input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)}
-            placeholder="Enter password"
-            className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-4 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 focus:outline-none transition-all" />
+          <div className="relative">
+            <input id="password" type={showPassword ? 'text' : 'password'} value={password} onChange={e => setPassword(e.target.value)}
+              placeholder="Enter password"
+              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-4 pr-11 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/20 focus:outline-none transition-all" />
+            <button
+              type="button"
+              onClick={() => setShowPassword(s => !s)}
+              tabIndex={-1}
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-600 hover:text-gray-300 transition-colors"
+            >
+              {showPassword ? (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                  <line x1="1" y1="1" x2="23" y2="23" />
+                </svg>
+              ) : (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx="12" cy="12" r="3" />
+                </svg>
+              )}
+            </button>
+          </div>
 
           {error && (
             <div className="mt-3 text-sm text-red-300 bg-red-500/5 border border-red-500/10 rounded-lg px-3 py-2">{error}</div>
           )}
 
-          <button type="submit" disabled={pending || !password}
-            className="mt-5 w-full px-4 py-3 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 disabled:from-gray-800 disabled:to-gray-800 disabled:text-gray-600 text-white text-sm font-medium rounded-lg transition-all shadow-lg shadow-cyan-500/10 hover:shadow-cyan-500/20 disabled:shadow-none">
-            {pending ? (mode === 'login' ? 'Signing in...' : 'Registering...') : (mode === 'login' ? 'Sign in' : 'Create account')}
+          <button type="submit" disabled={pending || !password || !username.trim()}
+            className="mt-5 w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 disabled:from-gray-800 disabled:to-gray-800 disabled:text-gray-600 text-white text-sm font-medium rounded-lg transition-all shadow-lg shadow-cyan-500/10 hover:shadow-cyan-500/20 disabled:shadow-none">
+            {pending && (
+              <svg aria-hidden className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" opacity="0.25" />
+                <path d="M4 12a8 8 0 018-8" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+              </svg>
+            )}
+            <span>{pending ? (mode === 'login' ? 'Signing in…' : 'Registering…') : (mode === 'login' ? 'Sign in' : 'Create account')}</span>
           </button>
         </form>
 
         <p className="text-center text-[11px] text-gray-700 mt-6">
           Sleep2AGI · Apache-2.0 · <a href="https://anet.sh" className="hover:text-gray-500 transition-colors">anet.sh</a>
+          <span className="mx-1 text-gray-800">·</span>
+          <span className="font-mono" title="@sleep2agi/agent-network-dashboard">v{DASHBOARD_VERSION}</span>
         </p>
       </div>
     </main>

package/app/logs/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { timeAgo } from '../components/utils';
 import { useNetworkId } from '../lib/network-context';
 import { EmptyState } from '../components/EmptyState';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 interface AuditLog {
   id: string;
@@ -26,6 +27,18 @@ const ACTION_COLORS: Record<string, string> = {
   send_task: 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20',
 };
 
+/** 2px left-rail stripe color per audit action — reuses the r32 server-logs
+ *  pattern so failed logins / token rotations spike out of a wall of
+ *  registers and logins without users reading every chip. Inline hex
+ *  prevents Tailwind v4 from purging dynamic class names. */
+const ACTION_STRIPE: Record<string, string> = {
+  register: '#4ade80',
+  login: '#60a5fa',
+  login_failed: '#ef4444',
+  create_network: '#a78bfa',
+  send_task: '#22d3ee',
+};
+
 export default function LogsPage() {
   const { networkId } = useNetworkId();
   const [logs, setLogs] = useState<AuditLog[]>([]);
@@ -64,25 +77,50 @@ export default function LogsPage() {
   return (
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
       <div className="flex items-center gap-4 mb-6">
-        <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Logs</h1>
-        <span className="text-xs bg-gray-900/30 text-gray-400 px-2 py-0.5 rounded-full border border-gray-800/30">
-          Audit Log
-        </span>
+        <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Audit Log</h1>
+        {/* Round 87: dropped {logs.length} header chip — r43 added
+            `All <count>` to the action-filter strip below, which
+            duplicated this value 40px away. Matches r86 /server-logs. */}
       </div>
 
-      <div className="flex flex-wrap gap-3 mb-6">
-        <select
-          value={filterAction}
-          onChange={e => setFilterAction(e.target.value)}
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500/50 focus:outline-none"
-        >
-          <option value="">All actions</option>
-          <option value="register">register</option>
-          <option value="login">login</option>
-          <option value="login_failed">login_failed</option>
-          <option value="create_network">create_network</option>
-          <option value="send_task">send_task</option>
-        </select>
+      {/* Action filter chips (round 43) — same chip pattern as Tasks
+          status tabs / Overview agent filter. Each chip carries its
+          ACTION_STRIPE dot so the visual key matches the per-row left
+          rail. Counts come from the currently loaded log set. */}
+      <div className="mb-6 flex flex-wrap items-center gap-1 anet-tabstrip-wrap overflow-x-auto sm:overflow-x-visible">
+        {(() => {
+          const counts: Record<string, number> = {};
+          logs.forEach(l => { counts[l.action] = (counts[l.action] || 0) + 1; });
+          const chips: { key: string; label: string; dot?: string }[] = [
+            { key: '',                label: 'All' },
+            { key: 'login',           label: 'login',           dot: ACTION_STRIPE.login },
+            { key: 'login_failed',    label: 'login_failed',    dot: ACTION_STRIPE.login_failed },
+            { key: 'register',        label: 'register',        dot: ACTION_STRIPE.register },
+            { key: 'create_network',  label: 'create_network',  dot: ACTION_STRIPE.create_network },
+            { key: 'send_task',       label: 'send_task',       dot: ACTION_STRIPE.send_task },
+          ];
+          return chips.map(c => {
+            const count = c.key === '' ? logs.length : counts[c.key] || 0;
+            const isActive = filterAction === c.key;
+            return (
+              <button
+                key={c.key || 'all'}
+                type="button"
+                onClick={() => setFilterAction(c.key)}
+                disabled={count === 0 && c.key !== ''}
+                className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0 whitespace-nowrap ${
+                  isActive
+                    ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/30'
+                    : 'text-gray-500 hover:text-gray-200 hover:bg-[#1a1a2a] border border-transparent'
+                }`}
+              >
+                {c.dot && <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.dot }} />}
+                <span>{c.label}</span>
+                <span className={`text-[10px] tabular-nums ${isActive ? 'text-cyan-400' : 'text-gray-600'}`}>{count}</span>
+              </button>
+            );
+          });
+        })()}
       </div>
 
       {error && (() => {
@@ -125,13 +163,23 @@ export default function LogsPage() {
         <EmptyState variant="logs" />
       ) : (
         <div className="space-y-2">
-          {logs.map(log => (
-            <div key={log.id} className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-4 py-3 hover:border-[#3a3a5a] transition-colors">
+          {logs.map(log => {
+            const userName = log.username || log.user_id;
+            return (
+            <div key={log.id} className="relative bg-[#111128] border border-[#2a2a4a] rounded-lg pl-4 pr-4 py-3 hover:border-[#3a3a5a] transition-colors overflow-hidden">
+              {/* 2px left rail per action (round 33) — failed logins, token
+                  rotations spike out of a wall of register/login rows. */}
+              <span
+                aria-hidden
+                className="absolute left-0 top-0 bottom-0 w-0.5"
+                style={{ backgroundColor: ACTION_STRIPE[log.action] || 'transparent' }}
+              />
               <div className="flex flex-wrap items-center gap-2 mb-1">
                 <span className={`text-xs px-2 py-0.5 rounded-md border ${ACTION_COLORS[log.action] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                   {log.action}
                 </span>
-                <span className="text-sm text-blue-400 font-medium">{log.username || log.user_id}</span>
+                {userName && <AliasAvatar alias={userName} size={16} />}
+                <span className="text-sm text-gray-200 font-medium">{userName}</span>
                 {log.target_type && (
                   <>
                     <span className="text-xs text-gray-600">&rarr;</span>
@@ -143,7 +191,8 @@ export default function LogsPage() {
               {log.detail && <div className="text-xs text-gray-500">{log.detail}</div>}
               {log.ip && log.ip !== 'unknown' && <div className="text-[10px] text-gray-700">IP: {log.ip}</div>}
             </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>

package/app/messages/page.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from 'react';
 import { useMessages } from '../lib/hooks';
-import { timeAgo } from '../components/utils';
+import { timeAgo, previewContent } from '../components/utils';
 import { EmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
 
@@ -107,8 +107,16 @@ export default function MessagesPage() {
     <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
       <div className="flex items-center gap-4 mb-6">
         <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Messages</h1>
-        <span className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30">
-          {messages.length}
+        {/* Round 89: filter-aware chip. When search/type filter is active
+            the visible rows are filtered.length; the total loaded is
+            messages.length (capped at 200 by useMessages). Show
+            `filtered / total` so users notice how much the filter is
+            hiding. Same pattern as r88 /tasks chip. */}
+        <span
+          className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30 tabular-nums"
+          title={filtered.length < messages.length ? `Showing ${filtered.length} of ${messages.length} messages` : undefined}
+        >
+          {filtered.length < messages.length ? `${filtered.length} / ${messages.length}` : messages.length}
         </span>
         {filtered.length > 0 && (
           <button
@@ -129,6 +137,11 @@ export default function MessagesPage() {
         )}
       </div>
 
+      {/* Round 76: hide search + type filter + view toggle + Debug button
+          when there are no messages at all. Same r70-class fix carried
+          across /nodes (r74) and /tasks (r75). When at least one message
+          exists, the chrome reappears so users can still clear filters. */}
+      {messages.length > 0 && (
       <div className="flex flex-wrap gap-3 mb-3">
         <input
           type="text"
@@ -165,6 +178,7 @@ export default function MessagesPage() {
           {debug ? 'Debug ON' : 'Debug'}
         </button>
       </div>
+      )}
 
       {quickFromChips.length > 0 && (
         <div className="mb-6 flex flex-wrap gap-2">
@@ -206,17 +220,20 @@ export default function MessagesPage() {
             <div key={ci} className="bg-[#111128] border border-[#2a2a4a] rounded-xl overflow-hidden">
               <div className="px-4 py-2.5 border-b border-[#2a2a4a] flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <span className="text-sm text-cyan-300 font-medium">{conv.participants[0]}</span>
+                  <AliasAvatar alias={conv.participants[0]} size={16} />
+                  <span className="text-sm text-gray-200 font-medium">{conv.participants[0]}</span>
                   <span className="text-gray-600 text-xs">↔</span>
-                  <span className="text-sm text-green-300 font-medium">{conv.participants[1]}</span>
+                  <AliasAvatar alias={conv.participants[1]} size={16} />
+                  <span className="text-sm text-gray-200 font-medium">{conv.participants[1]}</span>
                 </div>
                 <span className="text-[10px] text-gray-600">{conv.messages.length} messages</span>
               </div>
               <div className="px-4 py-2 space-y-2 max-h-64 overflow-y-auto">
                 {conv.messages.map(m => (
                   <div key={m.id} className="flex items-start gap-2 text-xs py-1">
-                    <span className={`shrink-0 font-medium ${m.from_alias === conv.participants[0] ? 'text-cyan-400' : 'text-green-400'}`}>{m.from_alias}</span>
-                    <span className="text-gray-400 flex-1">{m.content?.slice(0, 120) || '--'}</span>
+                    {m.from_alias && <AliasAvatar alias={m.from_alias} size={14} />}
+                    <span className="shrink-0 font-medium text-gray-200">{m.from_alias}</span>
+                    <span className="text-gray-400 flex-1 truncate" title={m.content || ''}>{previewContent(m.content).slice(0, 120)}</span>
                     <span className="text-[9px] text-gray-600 shrink-0">{timeAgo(m.created_at || '')}</span>
                   </div>
                 ))}
@@ -264,7 +281,11 @@ export default function MessagesPage() {
                         {message.priority === 'high' && <span className="text-xs text-red-400">HIGH</span>}
                         <span className="ml-auto text-xs text-gray-500">{message.created_at ? timeAgo(message.created_at) : '--'}</span>
                       </div>
-                      <div className="whitespace-pre-wrap text-sm leading-relaxed text-gray-200">
+                      {/* Round 79: break-words + overflow-wrap:anywhere so
+                          long unbroken runs (URLs, ASCII rules like
+                          `═══════════════`) wrap instead of pushing the
+                          chat bubble past the mobile viewport. */}
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-relaxed text-gray-200">
                         {renderHighlighted(message.content, search)}
                       </div>
                     </div>
@@ -295,7 +316,11 @@ export default function MessagesPage() {
                         </div>
                       )}
 
-                      <div className="whitespace-pre-wrap text-sm leading-relaxed text-gray-200">
+                      {/* Round 79: break-words + overflow-wrap:anywhere so
+                          long unbroken runs (URLs, ASCII rules like
+                          `═══════════════`) wrap instead of pushing the
+                          chat bubble past the mobile viewport. */}
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-relaxed text-gray-200">
                         {renderHighlighted(message.content, search)}
                       </div>