npm - @sleep2agi/agent-network-dashboard - Versions diffs - 0.5.7-preview.7 → 0.5.7-preview.75 - Mend

@sleep2agi/agent-network-dashboard 0.5.7-preview.7 → 0.5.7-preview.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (376) hide show

package/app/layout.tsx CHANGED Viewed

@@ -1,11 +1,18 @@
 import type { Metadata, Viewport } from "next";
-import { Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { AppShell } from "./components/AppShell";
 import { NetworkProvider } from "./lib/network-context";
 import { ThemeProvider } from "./components/ThemeSwitcher";
 import { PwaInstaller } from "./components/PwaInstaller";
+// #217 D1 (Vincent: OpenWebUI-style serious-product feel): UI text is
+// sans; mono stays for code blocks, IDs and logs via .font-mono.
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
 const geistMono = Geist_Mono({
   variable: "--font-geist-mono",
   subsets: ["latin"],
@@ -20,7 +27,26 @@ export const metadata: Metadata = {
     statusBarStyle: "black-translucent",
     title: "Agent Network",
   },
-  icons: { icon: '/favicon.svg' },
+  // R26 of #190: Next.js 16 renders `mobile-web-app-capable` (the modern
+  // standardized meta) but NOT the legacy `apple-mobile-web-app-capable`.
+  // iOS Safari < 16.4 only checks the apple-prefixed name; without it,
+  // the dashboard won't install as a web app on those iOS versions and
+  // the statusBarStyle + apple-touch-icon (R24) are silently ignored.
+  // Emit the legacy alias via metadata.other for back-compat.
+  other: {
+    'apple-mobile-web-app-capable': 'yes',
+  },
+  // R24 of #190: appleWebApp.capable above declares this is an iOS web
+  // app, but only `icon` was specified, leaving iOS Safari to fall back
+  // to a generic icon on Add-to-Home-Screen. iOS 15+ accepts SVG via
+  // `rel="apple-touch-icon" type="image/svg+xml"`; older iOS will fall
+  // back to the manifest icons (added R23) and then the generic. Reuse
+  // the existing sleep2agi-logo.svg — no new asset shipped.
+  icons: {
+    icon: [{ url: '/favicon.svg', type: 'image/svg+xml' }],
+    apple: [{ url: '/sleep2agi-logo.svg', type: 'image/svg+xml' }],
+    shortcut: '/favicon.svg',
+  },
   openGraph: {
     title: "Agent Network Dashboard",
     description: "Real-time monitoring dashboard for Agent Network nodes",
@@ -33,7 +59,14 @@ export const viewport: Viewport = {
   initialScale: 1,
   maximumScale: 5,
   userScalable: true,
-  themeColor: "#0a0a1a",
+  themeColor: "#0b0b0d",
+  // R25 of #190: metadata.appleWebApp.statusBarStyle above is
+  // "black-translucent", which renders the iOS status bar as a
+  // transparent overlay above the page (rather than reserving its own
+  // strip). Without viewportFit: "cover" the resulting safe-area-inset
+  // env() values resolve to 0, so the HealthBanner gets occluded by
+  // the clock/battery row when the user opens the installed PWA.
+  viewportFit: "cover",
 };
 // Inline pre-paint script to apply persisted theme before React hydrates,
@@ -51,7 +84,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" data-theme="cyber" className={`${geistMono.variable} h-full antialiased`}>
+    <html lang="en" data-theme="cyber" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeBootScript }} />
       </head>

package/app/lib/hooks.ts CHANGED Viewed

@@ -63,17 +63,15 @@ export function useStats() {
   return { stats: data?.ok ? data : null, error };
 }
-export function useLicense() {
-  const { data, error } = useSWR('/api/hub/license', fetcher, { refreshInterval: 60000 });
-  return { license: data?.ok ? data : null, error };
-}
 export function useMessages(limit = 100) {
   const { networkId } = useNetworkId();
+  // keepPreviousData: /messages grows `limit` when the user asks for older
+  // history (#217 M5) — without it the key change would blank the list and
+  // flash the skeleton while the bigger page is in flight.
   const { data, error, isLoading } = useSWR(
     withNetwork(`/api/hub/messages?limit=${limit}`, networkId),
     fetcher,
-    SWR_OPTIONS,
+    { ...SWR_OPTIONS, keepPreviousData: true },
   );
   return { messages: data?.messages || [], error, isLoading };
 }

package/app/lib/status.ts CHANGED Viewed

@@ -23,39 +23,46 @@ 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. */
+/** #217 D3 (OpenWebUI-style color restraint): the 9-hue rainbow is
+ *  collapsed to a semantic triad — green = actively running, red =
+ *  failed, gray = everything else (in-flight states in lighter gray,
+ *  terminal states dimmer). Color now means something instead of
+ *  decorating every enum value. */
 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',
+  delivered: 'bg-gray-500/10 text-gray-300 border-gray-500/20',
+  acked:     'bg-gray-500/10 text-gray-300 border-gray-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',
+  replied:   'bg-gray-500/10 text-gray-300 border-gray-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',
+  cancelled: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+  expired:   'bg-gray-500/10 text-gray-500 border-gray-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',
+  delivered: '#9ca3af',
+  acked:     '#9ca3af',
   running:   '#4ade80',
-  replied:   '#a78bfa',
+  replied:   '#9ca3af',
   closed:    '#6b7280',
   failed:    '#f87171',
-  cancelled: '#facc15',
-  expired:   '#fb923c',
+  cancelled: '#6b7280',
+  expired:   '#6b7280',
 };
 /** 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. */
+/** D3: idle drops from blue to gray — only working (green), blocked
+ *  (amber, actionable) and error (red) earn color. */
 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',
+  idle:    'bg-gray-500/10 text-gray-300 border-gray-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',
@@ -65,7 +72,7 @@ export const SESSION_STATUS_CHIP_CLASS: Record<string, string> = {
  *  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',
+  idle:    'text-gray-400',
   blocked: 'text-yellow-400',
   error:   'text-red-400',
   offline: 'text-gray-500',
@@ -74,12 +81,12 @@ export const SESSION_STATUS_TEXT_CLASS: Record<string, string> = {
 /** 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',
+  delivered: 'bg-gray-400',
+  acked:     'bg-gray-300',
   running:   'bg-green-500',
-  replied:   'bg-purple-500',
+  replied:   'bg-gray-400',
   closed:    'bg-gray-600',
   failed:    'bg-red-500',
-  cancelled: 'bg-yellow-500',
-  expired:   'bg-orange-500',
+  cancelled: 'bg-gray-600',
+  expired:   'bg-gray-600',
 };

package/app/login/page.tsx CHANGED Viewed

@@ -46,7 +46,7 @@ export default function LoginPage() {
   };
   return (
-    <main className="min-h-screen bg-[#0a0a1a] text-gray-100 font-mono flex items-center justify-center relative overflow-hidden px-4 py-10 sm:py-16">
+    <main className="min-h-screen bg-[#0b0b0d] text-gray-100 flex items-center justify-center relative overflow-hidden px-4 py-10 sm:py-16">
       {/* Subtle off-grid background — restraint over AI-glow.
           Dark themes get a faint radial wash; light themes show a low-contrast
           dotted grid for surface texture without noise. */}
@@ -57,7 +57,7 @@ export default function LoginPage() {
           {/* Brand mark — uses the favicon 3-node mesh SVG which IS the
               agent-network concept (nodes + edges). Replaces the previous
               flat emerald square placeholder. */}
-          <div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-2xl bg-[#111128] border border-[#2a2a4a] anet-login-mark">
+          <div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-2xl bg-[#161618] border border-[#26262b] anet-login-mark">
             <svg className="w-9 h-9" viewBox="0 0 32 32" aria-hidden>
               <circle cx="16" cy="16" r="10" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.25" className="text-cyan-400 anet-login-mark-ring" />
               <line x1="16" y1="10" x2="10" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.5" className="text-cyan-400 anet-login-mark-edge" />
@@ -77,7 +77,7 @@ export default function LoginPage() {
         </div>
         {/* Mode toggle */}
-        <div className="flex rounded-lg border border-[#2a2a4a] bg-[#111128] p-1 mb-4">
+        <div className="flex rounded-lg border border-[#26262b] bg-[#161618] p-1 mb-4">
           {(['login', 'register'] as const).map(m => (
             <button key={m} type="button" onClick={() => { setMode(m); setError(''); }}
               className={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${mode === m ? 'bg-cyan-500/10 text-cyan-300' : 'text-gray-500 hover:text-gray-200'}`}>
@@ -86,13 +86,13 @@ export default function LoginPage() {
           ))}
         </div>
-        <form onSubmit={submit} className="border border-[#2a2a4a] bg-[#111128]/80 backdrop-blur-sm rounded-xl p-6 shadow-2xl shadow-black/30">
+        <form onSubmit={submit} className="border border-[#26262b] bg-[#161618]/80 backdrop-blur-sm rounded-xl p-6 shadow-2xl shadow-black/30">
           <label htmlFor="username" className="block text-xs text-gray-500 mb-2 uppercase tracking-wider">
             Username
           </label>
           <input id="username" type="text" value={username} onChange={e => setUsername(e.target.value)} autoFocus
             placeholder="Enter username"
-            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 mb-4" />
+            className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-4 py-3 text-base sm: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 mb-4" />
           <label htmlFor="password" className="block text-xs text-gray-500 mb-2 uppercase tracking-wider">
             Password
@@ -100,13 +100,13 @@ export default function LoginPage() {
           <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" />
+              className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-4 pr-11 py-3 text-base sm: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"
+              className="absolute inset-y-0 right-0 flex items-center justify-center min-w-[44px] 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">

package/app/logs/page.tsx CHANGED Viewed

@@ -75,8 +75,10 @@ export default function LogsPage() {
   }, [fetchLogs]);
   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">
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+      {/* #209 R36: mobile vertical rhythm — same R28/R30/R31 pattern,
+          mb-6 → mb-4 sm:mb-6 here and on the action-filter strip below. */}
+      <div className="flex items-center gap-4 mb-4 sm:mb-6">
         <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
@@ -87,7 +89,7 @@ export default function LogsPage() {
           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">
+      <div className="mb-4 sm: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; });
@@ -111,7 +113,7 @@ export default function LogsPage() {
                 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'
+                    : 'text-gray-500 hover:text-gray-200 hover:bg-[#1c1c1f] border border-transparent'
                 }`}
               >
                 {c.dot && <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.dot }} />}
@@ -162,11 +164,15 @@ export default function LogsPage() {
       ) : logs.length === 0 ? (
         <EmptyState variant="logs" />
       ) : (
-        <div className="space-y-2">
+        /* R18 of #190 mobile polish: /logs was 28,791 px on 390 px
+           mobile; same dense-card pattern that R7/R8 hit on /nodes
+           and /tasks. Tighten card padding and inter-card gap on
+           mobile, sm:-gated so desktop stays comfortable. */
+        <div className="space-y-1 sm:space-y-2">
           {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">
+            <div key={log.id} className="relative bg-[#161618] border border-[#26262b] rounded-lg pl-3 pr-3 py-2 sm:pl-4 sm:pr-4 sm:py-3 hover:border-[#3a3a41] 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

package/app/manifest.ts CHANGED Viewed

@@ -8,8 +8,8 @@ export default function manifest(): MetadataRoute.Manifest {
     start_url: '/',
     scope: '/',
     display: 'standalone',
-    background_color: '#0a0a1a',
-    theme_color: '#0a0a1a',
+    background_color: '#0b0b0d',
+    theme_color: '#0b0b0d',
     orientation: 'portrait',
     icons: [
       {

package/app/messages/page.tsx CHANGED Viewed

@@ -1,10 +1,11 @@
 'use client';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMessages } from '../lib/hooks';
 import { timeAgo, previewContent } from '../components/utils';
 import { EmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
+import { useCollapsibleSearch } from '../components/CollapsibleSearch';
 interface MessageItem {
   id: string;
@@ -52,12 +53,40 @@ function renderHighlighted(content: string | undefined, search: string) {
   return <>{text.slice(0, idx)}<mark className="bg-yellow-500/30 text-yellow-200 rounded px-0.5">{text.slice(idx, idx + q.length)}</mark>{text.slice(idx + q.length)}</>;
 }
+// #217 M5 (Vincent tg 655/656, same directive as chat M4): don't pull the
+// full history on every 5s poll. Open with the newest page only and grow
+// the window when the user explicitly asks for older messages.
+const HISTORY_PAGE = 30;
 export default function MessagesPage() {
-  const { messages, isLoading } = useMessages(200);
+  const [histLimit, setHistLimit] = useState(HISTORY_PAGE);
+  const { messages, isLoading } = useMessages(histLimit);
+  // The hub returned a full page → assume more history exists beyond it.
+  const hasOlder = messages.length >= histLimit;
+  const loadingOlder = isLoading && messages.length > 0;
   const [filterType, setFilterType] = useState('');
   const [search, setSearch] = useState('');
   const [debug, setDebug] = useState(false);
   const [viewMode, setViewMode] = useState<'timeline' | 'grouped'>('timeline');
+  // M5: the timeline runs oldest→newest top-to-bottom, so land the first
+  // paint on the newest message (what the user came to read) instead of
+  // the oldest of the loaded window. Once only — later polls/loads must
+  // not yank the scroll position.
+  const endRef = useRef<HTMLDivElement>(null);
+  const didInitialScrollRef = useRef(false);
+  useEffect(() => {
+    if (didInitialScrollRef.current || messages.length === 0) return;
+    didInitialScrollRef.current = true;
+    endRef.current?.scrollIntoView();
+  }, [messages.length]);
+  // #209 R33→R34: WeChat-style magnifier-toggle search hook (shared with /nodes).
+  const searchCtl = useCollapsibleSearch({
+    value: search,
+    onChange: setSearch,
+    placeholder: 'Search from/to/content or use from:alias…',
+    label: 'Search messages',
+    enabled: messages.length > 0,
+  });
   const quickFromChips = useMemo(() => {
     const aliases = new Set<string>();
@@ -104,56 +133,64 @@ export default function MessagesPage() {
   }, [filtered]);
   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">Messages</h1>
-        {/* 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
-            onClick={() => {
-              const md = filtered.map((m: MessageItem) =>
-                `**${m.from_alias || '?'}** → ${m.to_alias || '?'} (${m.type || '?'}) — ${m.created_at || ''}\n\n${m.content || '--'}\n\n---`
-              ).join('\n\n');
-              const blob = new Blob([`# Messages Export\n\n${md}`], { type: 'text/markdown' });
-              const url = URL.createObjectURL(blob);
-              const a = document.createElement('a');
-              a.href = url; a.download = `messages-${new Date().toISOString().slice(0,10)}.md`;
-              a.click(); URL.revokeObjectURL(url);
-            }}
-            className="text-xs text-gray-500 hover:text-gray-300 border border-gray-700/50 px-2.5 py-1 rounded-lg transition-colors"
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+      {/* #209 R31 (mobile vertical rhythm — same pattern as R28/R30):
+          header row + quick-from chips row both mb-6 → mb-4 sm:mb-6.
+          #209 R33: header restructured to mirror /nodes R32 — title
+          cluster left (Messages + count chip + Export MD), magnifier
+          circle right. Inline ~290 px search input was moved into the
+          collapsible row below. */}
+      <div className="flex items-center gap-4 mb-4 sm:mb-6">
+        <div className="flex items-center gap-3 min-w-0 flex-1">
+          <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Messages</h1>
+          {/* Round 89: filter-aware chip. When search/type filter is active
+              the visible rows are filtered.length; the total loaded is
+              messages.length (the M5 lazy window, newest histLimit). 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 shrink-0"
+            title={filtered.length < messages.length ? `Showing ${filtered.length} of ${messages.length} messages` : undefined}
           >
-            Export MD
-          </button>
-        )}
+            {filtered.length < messages.length ? `${filtered.length} / ${messages.length}` : messages.length}
+          </span>
+          {filtered.length > 0 && (
+            <button
+              onClick={() => {
+                const md = filtered.map((m: MessageItem) =>
+                  `**${m.from_alias || '?'}** → ${m.to_alias || '?'} (${m.type || '?'}) — ${m.created_at || ''}\n\n${m.content || '--'}\n\n---`
+                ).join('\n\n');
+                const blob = new Blob([`# Messages Export\n\n${md}`], { type: 'text/markdown' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url; a.download = `messages-${new Date().toISOString().slice(0,10)}.md`;
+                a.click(); URL.revokeObjectURL(url);
+              }}
+              className="text-xs text-gray-500 hover:text-gray-300 border border-gray-700/50 px-2.5 py-1 rounded-lg transition-colors shrink-0"
+            >
+              Export MD
+            </button>
+          )}
+        </div>
+        <searchCtl.Button />
       </div>
+      {/* #209 R34: shared <CollapsibleSearch> component. enabled gate
+          handles the no-content case (button + row both hide). */}
+      <searchCtl.Row />
       {/* 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"
-          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"
-        />
+        {/* R33: inline search input moved to the top-right magnifier
+            toggle above. Type select + view-mode toggle + Debug stay. */}
         <select
           value={filterType}
           onChange={e => setFilterType(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"
+          className="bg-[#161618] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white focus:border-blue-500/50 focus:outline-none"
         >
           <option value="">All types</option>
           <option value="task">task</option>
@@ -161,7 +198,7 @@ export default function MessagesPage() {
           <option value="broadcast">broadcast</option>
           <option value="reply">reply</option>
         </select>
-        <div className="flex rounded-lg border border-[#2a2a4a] bg-[#111128] p-0.5">
+        <div className="flex rounded-lg border border-[#26262b] bg-[#161618] p-0.5">
           {(['timeline', 'grouped'] as const).map(mode => (
             <button key={mode} type="button" onClick={() => setViewMode(mode)}
               className={`rounded-md px-2.5 py-1.5 text-xs transition-colors ${viewMode === mode ? 'bg-cyan-500/10 text-cyan-300' : 'text-gray-500 hover:text-gray-200'}`}>
@@ -180,17 +217,20 @@ export default function MessagesPage() {
       </div>
       )}
+      {/* #217 S8 (less is more): on phones the sender chips wrapped into
+          ~5 rows and pushed the first message below the fold. One
+          scrollable row on mobile; wrap returns from sm: up. */}
       {quickFromChips.length > 0 && (
-        <div className="mb-6 flex flex-wrap gap-2">
+        <div className="mb-4 sm:mb-6 flex gap-2 overflow-x-auto whitespace-nowrap pb-1 scrollbar-thin sm:flex-wrap sm:overflow-visible sm:whitespace-normal sm:pb-0">
           {quickFromChips.map(alias => (
             <button
               key={alias}
               type="button"
               onClick={() => setSearch(`from:${alias}`)}
-              className={`rounded-full border px-3 py-1 text-xs transition-colors ${
+              className={`shrink-0 rounded-full border px-3 py-1 text-xs transition-colors ${
                 search === `from:${alias}`
                   ? 'border-cyan-500/30 bg-cyan-500/10 text-cyan-300'
-                  : 'border-[#2a2a4a] bg-[#111128] text-gray-400 hover:text-gray-200'
+                  : 'border-[#26262b] bg-[#161618] text-gray-400 hover:text-gray-200'
               }`}
             >
               from:{alias}
@@ -200,7 +240,7 @@ export default function MessagesPage() {
             <button
               type="button"
               onClick={() => setSearch('')}
-              className="rounded-full border border-gray-700 px-3 py-1 text-xs text-gray-500 hover:text-gray-200"
+              className="shrink-0 rounded-full border border-gray-700 px-3 py-1 text-xs text-gray-500 hover:text-gray-200"
             >
               Clear
             </button>
@@ -208,7 +248,24 @@ export default function MessagesPage() {
         </div>
       )}
-      {isLoading ? (
+      {/* M5: paging affordance — mirrors the chat panel's M4 row. Sits
+          above the list because older history is prepended above what's
+          already on screen. Hidden once the hub returns a short page
+          (we've reached the beginning). */}
+      {messages.length > 0 && hasOlder && (
+        <div className="mb-3 flex justify-center">
+          <button
+            type="button"
+            onClick={() => setHistLimit(l => l + HISTORY_PAGE)}
+            disabled={loadingOlder}
+            className="rounded-full border border-[#26262b] bg-[#161618] px-4 py-1.5 text-xs text-gray-400 transition-colors hover:text-gray-200 disabled:opacity-50"
+          >
+            {loadingOlder ? 'Loading…' : '↑ Load earlier messages'}
+          </button>
+        </div>
+      )}
+      {isLoading && messages.length === 0 ? (
         <div className="animate-pulse space-y-3">
           {[1, 2, 3, 4, 5].map(i => <div key={i} className="h-20 rounded-2xl bg-gray-800/20" />)}
         </div>
@@ -217,8 +274,8 @@ export default function MessagesPage() {
       ) : viewMode === 'grouped' ? (
         <div className="space-y-4">
           {conversations.map((conv, ci) => (
-            <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 key={ci} className="bg-[#161618] border border-[#26262b] rounded-xl overflow-hidden">
+              <div className="px-4 py-2.5 border-b border-[#26262b] flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   <AliasAvatar alias={conv.participants[0]} size={16} />
                   <span className="text-sm text-gray-200 font-medium">{conv.participants[0]}</span>
@@ -266,9 +323,9 @@ export default function MessagesPage() {
                     Halve it on mobile. */}
                 {gapExceeded && (
                   <div className="my-2 sm:my-4 flex items-center gap-3">
-                    <div className="h-px flex-1 bg-[#2a2a4a]" />
+                    <div className="h-px flex-1 bg-[#26262b]" />
                     <div className="text-[11px] text-gray-600">{formatDividerLabel(message.created_at)}</div>
-                    <div className="h-px flex-1 bg-[#2a2a4a]" />
+                    <div className="h-px flex-1 bg-[#26262b]" />
                   </div>
                 )}
@@ -351,6 +408,7 @@ export default function MessagesPage() {
               </div>
             );
           })}
+          <div ref={endRef} />
         </div>
       )}
     </div>