@sleep2agi/agent-network-dashboard 0.5.7-preview.1 → 0.5.7-preview.11

package/app/api/hub/status/route.ts

@@ -1,5 +1,6 @@
 import { requireDashboardAuth } from '@/app/lib/dashboard-auth';
 import { hubFetch } from '@/app/lib/hub';
+import { normalizeSessions } from '@/app/lib/session-normalize';
 
 export async function GET(req: Request) {
   const authFailure = await requireDashboardAuth();
@@ -14,12 +15,14 @@ export async function GET(req: Request) {
   try {
     const res = await hubFetch(`/api/status${qs}`);
     const data = await res.json();
+    if (Array.isArray(data.sessions)) data.sessions = normalizeSessions(data.sessions);
 
     // If filtered result is empty, fetch global count for empty-state hint
     if (includeFilter && Array.isArray(data.sessions) && data.sessions.length === 0) {
       try {
         const globalRes = await hubFetch('/api/status');
         const globalData = await globalRes.json();
+        if (Array.isArray(globalData.sessions)) globalData.sessions = normalizeSessions(globalData.sessions);
         const globalCount = Array.isArray(globalData.sessions) ? globalData.sessions.length : 0;
         if (globalCount > 0) {
           return Response.json({ ...data, _hint: { global_count: globalCount, filtered_network: networkId } });

package/app/components/AgentCard.tsx

@@ -28,7 +28,7 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
     <Link
       href={`/node?alias=${encodeURIComponent(s.alias)}`}
       prefetch={false}
-      className={`anet-agent-card group relative block rounded-xl border p-4 transition-all duration-300 cursor-pointer hover:-translate-y-0.5 ${
+      className={`anet-agent-card group relative block rounded-xl border p-3 sm:p-4 transition-all duration-300 cursor-pointer hover:-translate-y-0.5 ${
         hasSse
           ? `bg-[#111128] border-[#2a2a4a] hover:border-cyan-500/30 hover:shadow-lg ${cfg.glow}`
           : 'bg-[#0d0d1a] border-[#1a1a2a] opacity-40'
@@ -36,8 +36,10 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
     >
       {/* Header: avatar + name + status. Avatar carries the alias→hue map
           shared with Messages/Nodes/Tasks/Overview; the live status dot
-          stays as a small pulse-capable indicator. */}
-      <div className="flex items-center justify-between mb-3">
+          stays as a small pulse-capable indicator. R5 of #190 mobile
+          polish: trim mb-3 → mb-2 sm:mb-3 so the card's vertical rhythm
+          tightens on narrow viewports. */}
+      <div className="flex items-center justify-between mb-2 sm:mb-3">
         <div className="flex items-center gap-2 min-w-0">
           <AliasAvatar alias={s.alias} size={22} />
           <span className="font-semibold text-white truncate text-sm" title={s.alias}>{s.alias}</span>
@@ -48,8 +50,11 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
         </span>
       </div>
 
-      {/* Agent type badge */}
-      <div className="flex items-center gap-2 mb-3">
+      {/* Agent type badge — hidden below sm because the runtime
+          (`claude-code` / `codex`) repeats across nearly every card and
+          chews ~28px per card × 99 sessions on Overview mobile. The
+          agent type stays one tap away on /node detail. */}
+      <div className="hidden sm:flex items-center gap-2 mb-3">
         <span className="text-xs text-gray-600 bg-[#0a0a15] px-2 py-0.5 rounded border border-[#1a1a2a]">
           {s.agent || 'unknown'}
         </span>
@@ -58,18 +63,23 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
         )}
       </div>
 
-      {/* Task */}
+      {/* Task. Mobile: line-clamp-1 (one-liner) instead of two, and a
+          single-line padding (px-2 py-1) so the task strip is ~28px
+          rather than ~56px. The full task is still in the title
+          tooltip and on /node detail. */}
       {s.task ? (
-        <div className="text-xs text-gray-400 bg-[#0a0a15] rounded-lg px-3 py-2 border border-[#1a1a2a] line-clamp-2" title={s.task}>
+        <div className="text-xs text-gray-400 bg-[#0a0a15] rounded-lg px-2 sm:px-3 py-1 sm:py-2 border border-[#1a1a2a] line-clamp-1 sm:line-clamp-2" title={s.task}>
           {s.task}
         </div>
       ) : (
         <div className="text-xs text-gray-700 italic">No active task</div>
       )}
 
-      {/* Progress bar */}
+      {/* Progress bar — hidden below sm so an empty 0% bar doesn't
+          occupy 20px on every idle card. Visible from sm up where space
+          is no longer the constraint. */}
       {s.progress > 0 && (
-        <div className="mt-3">
+        <div className="hidden sm:block mt-3">
           <div className="flex justify-between text-[10px] mb-1">
             <span className="text-gray-600">Progress</span>
             <span className={cfg.text}>{s.progress}%</span>

package/app/components/AliasAvatar.tsx

@@ -22,6 +22,10 @@ export function aliasInitial(alias?: string): string {
   return ch.toUpperCase();
 }
 
+function isGrokAlias(alias: string) {
+  return /\bgrok\b|grok-build|grok测试员|grok-demo/i.test(alias);
+}
+
 interface AliasAvatarProps {
   alias: string;
   size?: number;
@@ -29,6 +33,24 @@ interface AliasAvatarProps {
 }
 
 export function AliasAvatar({ alias, size = 28, className = '' }: AliasAvatarProps) {
+  if (isGrokAlias(alias)) {
+    return (
+      <span
+        className={`anet-alias-avatar inline-flex items-center justify-center rounded-full border border-emerald-500/45 bg-emerald-950/70 shrink-0 ${className}`}
+        style={{
+          width: size,
+          height: size,
+          backgroundImage: 'url(/vendors/grok.svg)',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '68% 68%',
+        }}
+        title={alias}
+        aria-hidden
+      />
+    );
+  }
+
   const c = aliasAvatarColors(alias);
   const fs = Math.max(9, Math.round(size * 0.42));
   return (

package/app/components/CommandPalette.tsx

@@ -438,7 +438,7 @@ export function CommandPalette() {
             value={query}
             onChange={e => { setQuery(e.target.value); setSelected(0); }}
             placeholder="Type a command or search…"
-            className="flex-1 bg-transparent text-sm text-gray-200 placeholder-gray-600 focus:outline-none"
+            className="flex-1 bg-transparent text-base sm:text-sm text-gray-200 placeholder-gray-600 focus:outline-none"
           />
           <kbd className="text-[10px] text-gray-600 border border-[#2a2a4a] rounded px-1.5 py-0.5 font-mono">esc</kbd>
         </div>

package/app/components/DispatchPanel.tsx

@@ -94,7 +94,7 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
               <input
                 type="text" value={filter} onChange={e => setFilter(e.target.value)}
                 placeholder="Filter agents..."
-                className="w-full bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-xs text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none"
+                className="w-full bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-xs text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none"
               />
               <div className="flex items-center justify-between mt-2">
                 <button onClick={selectAll} className="text-[10px] text-cyan-400 hover:text-cyan-300">
@@ -126,7 +126,7 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
               <textarea
                 value={prompt} onChange={e => setPrompt(e.target.value)}
                 placeholder="Enter the task you want to dispatch..."
-                className="flex-1 min-h-[120px] bg-[#111128] border border-[#2a2a4a] rounded-xl px-4 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none resize-none"
+                className="flex-1 min-h-[120px] bg-[#111128] border border-[#2a2a4a] rounded-xl px-4 py-3 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none resize-none"
               />
 
               <div className="flex items-center gap-3 mt-4">

package/app/components/HealthBanner.tsx

@@ -116,11 +116,19 @@ export function HealthBanner() {
             {cta.label} →
           </Link>
         )}
+        {/* R9 of #190 mobile polish: the inline `→` CTA and the `×`
+            dismiss were ~14px tap targets — below iOS 44px and worst
+            for the right-edge dismiss where a thumb-miss either does
+            nothing or fires the CTA next to it. The banner is
+            intentionally 28px tall (design comment above), so make the
+            tap area larger without making the banner taller: an
+            invisible `::before` pseudo-element extends the hit zone to
+            ~44×40px around each control. Visual size stays as is. */}
         {cta && (
           <Link
             href={cta.href}
             aria-label={cta.label}
-            className="sm:hidden text-[11px] font-medium opacity-90 hover:opacity-100"
+            className="sm:hidden text-[13px] font-medium opacity-90 hover:opacity-100 relative leading-none px-1.5 before:absolute before:inset-y-[-10px] before:inset-x-[-8px] before:content-['']"
           >
             →
           </Link>
@@ -131,7 +139,7 @@ export function HealthBanner() {
             try { sessionStorage.setItem('anet-hb-dismissed', '1'); } catch {}
           }}
           aria-label="Dismiss banner"
-          className="opacity-50 hover:opacity-100 leading-none px-1"
+          className="opacity-60 hover:opacity-100 leading-none px-1.5 text-base relative rounded-md hover:bg-white/5 before:absolute before:inset-y-[-10px] before:inset-x-[-8px] before:content-['']"
         >
           ×
         </button>

package/app/components/TaskChatPanel.tsx

@@ -136,6 +136,8 @@ function StatusBar({ status }: { status: string }) {
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { useSSE } from '../lib/useSSE';
+import { useNetworkId } from '../lib/network-context';
+import { markChatRead } from '../lib/chat-unread';
 
 function MarkdownContent({ text }: { text: string }) {
   if (!text) return <span className="text-[var(--fg-dim)] italic">No content</span>;
@@ -197,6 +199,7 @@ interface TaskChatPanelProps {
 }
 
 export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskChatPanelProps) {
+  const { networkId } = useNetworkId();
   const [messages, setMessages] = useState<ChatTask[]>([]);
   const [input, setInput] = useState('');
   const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
@@ -223,6 +226,11 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   // Reset target when alias changes
   useEffect(() => { setTargetAlias(alias); }, [alias]);
 
+  useEffect(() => {
+    if (!alias) return;
+    markChatRead(alias, networkId);
+  }, [alias, networkId]);
+
   // Load task history for this node
   const loadHistory = useCallback(async () => {
     try {

package/app/components/TopoGraph.tsx

@@ -9,6 +9,7 @@ import { ChatPopover } from './ChatPopover';
 import { vendorForModel, runtimeIdentity, identityLine } from '../lib/vendorIdentity';
 import { parseHubTime, relativeAgo } from '../lib/time';
 import { DASHBOARD_VERSION } from '../lib/version';
+import { useChatUnread } from '../lib/chat-unread';
 
 /** v0.10.0 Hero 1+2 / §3.F server-health hook — fetches the normalized
  *  /api/hub/servers payload (preview.370 unblocked real-data via the
@@ -632,6 +633,7 @@ function buildFlowLinks(messages: MessageFlow[], tasks: TaskFlow[], positions: R
 }
 
 export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProps) {
+  const { hasUnread } = useChatUnread();
   const theme = useTheme();
   const isLight = theme === 'light';
   const reducedMotion = useReducedMotion();
@@ -12372,6 +12374,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     </g>
                   );
                 })()}
+                {hasUnread(session.alias) && (
+                  <g pointerEvents="none" data-node-unread={session.alias}>
+                    <circle
+                      cx={pos.x + radius * 0.74}
+                      cy={pos.y - radius * 0.74}
+                      r={Math.max(5, radius * 0.22)}
+                      fill="#ef4444"
+                      stroke={pal.containerBg}
+                      strokeWidth="2"
+                    />
+                    <circle
+                      cx={pos.x + radius * 0.74}
+                      cy={pos.y - radius * 0.74}
+                      r={Math.max(8, radius * 0.34)}
+                      fill="none"
+                      stroke="#ef4444"
+                      strokeOpacity="0.22"
+                      strokeWidth="1.5"
+                    />
+                  </g>
+                )}
                 {/* Round 294 / Loop: per-node "working" pulse dot retired.
                     The pulse was R24's per-node working indicator — a
                     small green circle at the top of each working node,

package/app/globals.css

@@ -1991,3 +1991,27 @@ body {
      but the smooth transition just snaps. Already handled via the
      blanket transition-duration override above. */
 }
+
+/* ────────────────────────────────────────────────────
+   #190 mobile polish — tap feel
+   ────────────────────────────────────────────────────
+   `touch-action: manipulation` removes the 300 ms tap-delay browsers
+   add to disambiguate double-tap-zoom, and (more importantly) keeps an
+   accidental double-tap on an interactive element from zooming the
+   page. Pinch-zoom on the rest of the page is unaffected. The hint is
+   a no-op on inputs without a touch driver, so zero desktop cost.
+
+   `-webkit-tap-highlight-color` swaps iOS Safari's default opaque grey
+   tap overlay for a faint themed shimmer (~18 % accent over transparent),
+   matching the cyber / light palettes via the `--accent` token. */
+@layer base {
+  button,
+  a,
+  [role="button"],
+  [role="tab"],
+  [role="menuitem"],
+  summary {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: color-mix(in oklab, var(--accent) 18%, transparent);
+  }
+}

package/app/lib/chat-unread.ts

@@ -0,0 +1,158 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+import { useNetworkId } from './network-context';
+
+const STORAGE_PREFIX = 'anet_chat_read_v1:';
+const UNREAD_EVENT = 'anet-chat-read-updated';
+
+interface ChatMessage {
+  from_alias?: string | null;
+  created_at?: string | null;
+}
+
+interface ChatTask {
+  to_name?: string | null;
+  status?: string | null;
+  result?: string | null;
+  created_at?: string | null;
+  completed_at?: string | null;
+  delivered_at?: string | null;
+}
+
+interface ReadMap {
+  [alias: string]: string;
+}
+
+function storageKey(networkId: string) {
+  return `${STORAGE_PREFIX}${networkId || 'global'}`;
+}
+
+function parseHubTime(value?: string | null): number {
+  if (!value) return 0;
+  const normalized = value.includes('T') ? value : value.replace(' ', 'T');
+  const withZone = /Z$|[+-]\d{2}:\d{2}$/.test(normalized) ? normalized : `${normalized}Z`;
+  const ts = Date.parse(withZone);
+  return Number.isFinite(ts) ? ts : 0;
+}
+
+function readStoredMap(networkId: string): ReadMap {
+  if (typeof window === 'undefined') return {};
+  try {
+    const raw = window.sessionStorage.getItem(storageKey(networkId));
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeStoredMap(networkId: string, next: ReadMap) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.sessionStorage.setItem(storageKey(networkId), JSON.stringify(next));
+    window.dispatchEvent(new CustomEvent(UNREAD_EVENT, { detail: { networkId } }));
+  } catch {}
+}
+
+const fetcher = async (url: string) => {
+  const res = await fetch(url);
+  if (res.status === 401) {
+    window.location.assign('/login');
+    throw new Error('unauthorized');
+  }
+  return res.json();
+};
+
+function withNetwork(url: string, networkId: string): string {
+  if (!networkId) return url;
+  const sep = url.includes('?') ? '&' : '?';
+  return `${url}${sep}network_id=${encodeURIComponent(networkId)}`;
+}
+
+export function markChatRead(alias: string, networkId: string) {
+  if (!alias) return;
+  const current = readStoredMap(networkId);
+  writeStoredMap(networkId, {
+    ...current,
+    [alias]: new Date().toISOString(),
+  });
+}
+
+export function useChatUnread() {
+  const { networkId } = useNetworkId();
+  const { data: messagesData } = useSWR<{ messages?: ChatMessage[] }>(
+    withNetwork('/api/hub/messages?limit=200', networkId),
+    fetcher,
+    { refreshInterval: 5000, dedupingInterval: 3000 },
+  );
+  const { data: tasksData } = useSWR<{ tasks?: ChatTask[] }>(
+    withNetwork('/api/hub/tasks?limit=200', networkId),
+    fetcher,
+    { refreshInterval: 5000, dedupingInterval: 3000 },
+  );
+  const [readVersion, setReadVersion] = useState(0);
+
+  useEffect(() => {
+    const onStorage = (event: StorageEvent) => {
+      if (event.key && event.key !== storageKey(networkId)) return;
+      setReadVersion((v) => (typeof v === 'number' ? v + 1 : 1));
+    };
+    const onUnreadUpdate = (event: Event) => {
+      const detail = (event as CustomEvent<{ networkId?: string }>).detail;
+      if (detail?.networkId !== undefined && detail.networkId !== networkId) return;
+      setReadVersion((v) => (typeof v === 'number' ? v + 1 : 1));
+    };
+    window.addEventListener('storage', onStorage);
+    window.addEventListener(UNREAD_EVENT, onUnreadUpdate);
+    return () => {
+      window.removeEventListener('storage', onStorage);
+      window.removeEventListener(UNREAD_EVENT, onUnreadUpdate);
+    };
+  }, [networkId, setReadVersion]);
+
+  const readMap = useMemo(() => {
+    void readVersion;
+    return readStoredMap(networkId);
+  }, [networkId, readVersion]);
+
+  const unreadMap = useMemo(() => {
+    const latestByAlias = new Map<string, number>();
+    for (const message of messagesData?.messages || []) {
+      const alias = message.from_alias?.trim();
+      if (!alias) continue;
+      const at = parseHubTime(message.created_at);
+      if (!at) continue;
+      latestByAlias.set(alias, Math.max(latestByAlias.get(alias) || 0, at));
+    }
+    for (const task of tasksData?.tasks || []) {
+      const alias = task.to_name?.trim();
+      if (!alias) continue;
+      const hasReply = Boolean(task.result) || ['replied', 'failed', 'closed', 'expired', 'cancelled'].includes(task.status || '');
+      if (!hasReply) continue;
+      const at = parseHubTime(task.completed_at) || parseHubTime(task.delivered_at) || parseHubTime(task.created_at);
+      if (!at) continue;
+      latestByAlias.set(alias, Math.max(latestByAlias.get(alias) || 0, at));
+    }
+
+    const next = new Map<string, boolean>();
+    for (const [alias, latestAt] of latestByAlias) {
+      const readAt = parseHubTime(readMap[alias]);
+      if (latestAt > readAt) next.set(alias, true);
+    }
+    return next;
+  }, [messagesData, readMap, tasksData]);
+
+  const hasUnread = useCallback((alias?: string | null) => {
+    if (!alias) return false;
+    return unreadMap.get(alias) === true;
+  }, [unreadMap]);
+
+  const clearUnread = useCallback((alias: string) => {
+    markChatRead(alias, networkId);
+  }, [networkId]);
+
+  return { unreadMap, hasUnread, clearUnread };
+}

package/app/lib/session-normalize.ts

@@ -0,0 +1,17 @@
+import type { Session } from '../components/types';
+
+type SessionLike = Partial<Session> & { agent?: string | null };
+
+export function normalizeSessionIdentity<T extends SessionLike>(session: T): T {
+  const agent = session.agent?.toLowerCase() || '';
+  const alias = session.alias?.toLowerCase() || '';
+  const isGrok = agent.includes('agent-node:grok') || alias.includes('grok');
+  if (!session.runtime && isGrok) {
+    return { ...session, runtime: 'grok-build-acp' };
+  }
+  return session;
+}
+
+export function normalizeSessions<T extends SessionLike>(sessions: T[] | undefined): T[] {
+  return (sessions || []).map(normalizeSessionIdentity);
+}

package/app/lib/vendorIdentity.ts

@@ -70,6 +70,15 @@ const OPENAI_VENDOR: VendorIdentity = {
   // badge. Vincent-authorized 2026-05-21 to use real vendor marks.
   logo: '/vendors/openai.svg',
 };
+const GROK_VENDOR: VendorIdentity = {
+  id: 'grok',
+  label: 'Grok Build',
+  mono: { bg: 'hsl(150 14% 16%)', ring: 'hsl(150 48% 42%)', text: 'hsl(150 54% 82%)' },
+  initial: 'G',
+  // Local Grok Build mark for network graph avatars; keeps grok-build-acp
+  // nodes out of the generic unknown-vendor fallback.
+  logo: '/vendors/grok.svg',
+};
 
 // Ordered prefix rules — first match wins. `test` runs against a lowercased
 // model id. Keep the most specific prefixes first.
@@ -77,6 +86,7 @@ const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity
   { test: (m) => m.startsWith('intern'), vendor: INTERN_VENDOR },
   { test: (m) => m.startsWith('minimax'), vendor: MINIMAX_VENDOR },
   { test: (m) => m.startsWith('claude'), vendor: ANTHROPIC_VENDOR },
+  { test: (m) => m.startsWith('grok') || m.startsWith('xai'), vendor: GROK_VENDOR },
   {
     test: (m) => m.startsWith('gpt') || m.startsWith('codex') || m.startsWith('o1') || m.startsWith('o3') || m.startsWith('o4'),
     vendor: OPENAI_VENDOR,
@@ -99,6 +109,9 @@ const RUNTIME_VENDOR: Record<string, VendorIdentity> = {
   'claude-code-cli': ANTHROPIC_VENDOR,
   'claude-agent-sdk': ANTHROPIC_VENDOR,
   'codex-sdk': OPENAI_VENDOR,
+  'grok-build-acp': GROK_VENDOR,
+  'grok-build': GROK_VENDOR,
+  grok: GROK_VENDOR,
 };
 
 /** Resolve a node's vendor identity. Model id wins; when the model is
@@ -114,11 +127,12 @@ export function vendorForModel(
       if (rule.test(m)) return rule.vendor;
     }
   }
-  if (runtime && RUNTIME_VENDOR[runtime]) return RUNTIME_VENDOR[runtime];
+  const rt = runtime?.toLowerCase();
+  if (rt && RUNTIME_VENDOR[rt]) return RUNTIME_VENDOR[rt];
   return UNKNOWN_VENDOR;
 }
 
-export type Runtime = 'claude-code-cli' | 'codex-sdk' | 'claude-agent-sdk' | 'http-api';
+export type Runtime = 'claude-code-cli' | 'codex-sdk' | 'claude-agent-sdk' | 'grok-build-acp' | 'http-api';
 
 export interface RuntimeIdentity {
   label: string;
@@ -147,6 +161,12 @@ const RUNTIME_MAP: Record<Runtime, RuntimeIdentity> = {
     iconPath: 'M4 7h16v10H4z M8 11h8 M8 14h5',
     color: '#34d399',
   },
+  // Grok Build ACP bridge
+  'grok-build-acp': {
+    label: 'Grok Build ACP',
+    iconPath: 'M12 3l2.1 6.2H21l-5.5 4 2.1 6.8L12 15.9 6.4 20l2.1-6.8L3 9.2h6.9L12 3z',
+    color: '#22c55e',
+  },
   // cloud / API — non-resident process
   'http-api': {
     label: 'HTTP API',
@@ -158,7 +178,7 @@ const RUNTIME_MAP: Record<Runtime, RuntimeIdentity> = {
 /** Resolve a server runtime string to badge identity. Unknown → null. */
 export function runtimeIdentity(runtime: string | null | undefined): RuntimeIdentity | null {
   if (!runtime) return null;
-  return RUNTIME_MAP[runtime as Runtime] ?? null;
+  return RUNTIME_MAP[runtime.toLowerCase() as Runtime] ?? null;
 }
 
 /** Compact one-line identity for hover / detail surfaces:

package/app/messages/page.tsx

@@ -148,7 +148,7 @@ export default function MessagesPage() {
           value={search}
           onChange={e => setSearch(e.target.value)}
           placeholder="Search from/to/content or use from:alias"
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-full sm:w-72"
+          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-full sm:w-72"
         />
         <select
           value={filterType}
@@ -260,19 +260,26 @@ export default function MessagesPage() {
 
             return (
               <div key={message.id}>
+                {/* R6 of #190 mobile polish: gap divider was my-4 (=16px
+                    each side), and with multi-hour message lulls it
+                    fired several times per session, eating ~32px each.
+                    Halve it on mobile. */}
                 {gapExceeded && (
-                  <div className="my-4 flex items-center gap-3">
+                  <div className="my-2 sm:my-4 flex items-center gap-3">
                     <div className="h-px flex-1 bg-[#2a2a4a]" />
                     <div className="text-[11px] text-gray-600">{formatDividerLabel(message.created_at)}</div>
                     <div className="h-px flex-1 bg-[#2a2a4a]" />
                   </div>
                 )}
 
-                {/* Broadcasts span full width — no avatar gutter. */}
+                {/* Broadcasts span full width — no avatar gutter. R6 mobile:
+                    tighter padding + tighter header margin + snug leading
+                    on the content so each bubble is ~25-30% shorter at
+                    390px. Desktop unchanged from sm: up. */}
                 {variant === 'broadcast' ? (
-                  <div className={samePrev ? 'mt-1' : 'mt-3'}>
-                    <div className="rounded-2xl border border-purple-500/20 bg-purple-500/10 px-4 py-3 shadow-sm w-full">
-                      <div className="mb-2 flex flex-wrap items-center gap-2">
+                  <div className={samePrev ? 'mt-0.5 sm:mt-1' : 'mt-2 sm:mt-3'}>
+                    <div className="rounded-2xl border border-purple-500/20 bg-purple-500/10 px-3 py-2 sm:px-4 sm:py-3 shadow-sm w-full">
+                      <div className="mb-1 sm:mb-2 flex flex-wrap items-center gap-2">
                         <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                           {message.type || 'unknown'}
                         </span>
@@ -285,24 +292,24 @@ export default function MessagesPage() {
                           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">
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-snug sm:leading-relaxed text-gray-200">
                         {renderHighlighted(message.content, search)}
                       </div>
                     </div>
                   </div>
                 ) : (
-                  <div className={`${samePrev ? 'mt-1' : 'mt-3'} flex gap-2 ${variant === 'outgoing' ? 'flex-row-reverse' : 'flex-row'}`}>
+                  <div className={`${samePrev ? 'mt-0.5 sm:mt-1' : 'mt-2 sm:mt-3'} flex gap-2 ${variant === 'outgoing' ? 'flex-row-reverse' : 'flex-row'}`}>
                     {/* Avatar gutter — fixed width keeps bubble columns aligned even on streaks */}
                     <div className="w-8 shrink-0 pt-1">
                       {!samePrev && <AliasAvatar alias={fromAlias} size={32} />}
                     </div>
-                    <div className={`min-w-0 max-w-3xl rounded-2xl border px-4 py-3 shadow-sm ${
+                    <div className={`min-w-0 max-w-3xl rounded-2xl border px-3 py-2 sm:px-4 sm:py-3 shadow-sm ${
                       variant === 'outgoing'
                         ? 'border-green-500/20 bg-green-500/10'
                         : 'border-blue-500/20 bg-blue-500/10'
                     }`}>
                       {!samePrev && (
-                        <div className="mb-2 flex flex-wrap items-center gap-2">
+                        <div className="mb-1 sm:mb-2 flex flex-wrap items-center gap-2">
                           <span className={`text-xs px-2 py-0.5 rounded-md border ${TYPE_COLORS[message.type || ''] || 'bg-gray-500/10 text-gray-400 border-gray-500/20'}`}>
                             {message.type || 'unknown'}
                           </span>
@@ -320,7 +327,7 @@ export default function MessagesPage() {
                           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">
+                      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-snug sm:leading-relaxed text-gray-200">
                         {renderHighlighted(message.content, search)}
                       </div>
 

package/app/node/page.tsx

@@ -8,6 +8,7 @@ import { TaskChatPanel } from '../components/TaskChatPanel';
 import { timeAgo } from '../components/utils';
 import { AliasAvatar } from '../components/AliasAvatar';
 import { SESSION_STATUS_TEXT_CLASS } from '../lib/status';
+import { useChatUnread } from '../lib/chat-unread';
 
 interface SessionDetail {
   resume_id: string;
@@ -187,8 +188,10 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
   alias: string; session: any; sse: number; sendMsg: string; setSendMsg: (v: string) => void; sending: boolean; sendTask: () => void; sendError: string;
 }) {
   const [tab, setTab] = useState<'chat' | 'events' | 'info'>('chat');
+  const { hasUnread } = useChatUnread();
   const [events, setEvents] = useState<Array<{ id: number; event_type: string; from_status: string; to_status: string; detail: string; created_at: string }>>([]);
   const [eventsLoaded, setEventsLoaded] = useState(false);
+  const chatUnread = hasUnread(alias);
 
   useEffect(() => {
     if (tab === 'events' && !eventsLoaded) {
@@ -216,7 +219,12 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
             <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
               <path d={t.icon} />
             </svg>
-            <span>{t.label}</span>
+            <span className="relative inline-flex items-center gap-2">
+              {t.label}
+              {t.id === 'chat' && chatUnread && tab !== 'chat' && (
+                <span className="inline-block h-2.5 w-2.5 rounded-full bg-red-500" aria-label="Unread chat messages" />
+              )}
+            </span>
           </button>
         ))}
       </div>