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

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

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,11 +63,6 @@ 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();
   const { data, error, isLoading } = useSWR(

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

@@ -5,6 +5,7 @@ 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;
@@ -58,6 +59,14 @@ export default function MessagesPage() {
   const [search, setSearch] = useState('');
   const [debug, setDebug] = useState(false);
   const [viewMode, setViewMode] = useState<'timeline' | 'grouped'>('timeline');
+  // #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 +113,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 (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 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 +178,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 +197,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 +220,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>
@@ -217,8 +237,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 +286,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>
                 )}

package/app/node/page.tsx CHANGED Viewed

@@ -60,7 +60,7 @@ function TmuxViewer({ tmuxName }: { tmuxName: string }) {
   };
   return (
-    <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+    <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
       <div className="flex items-center justify-between mb-2">
         <h2 className="text-sm font-semibold text-gray-300">Terminal ({tmuxName})</h2>
         <div className="flex gap-2">
@@ -76,7 +76,7 @@ function TmuxViewer({ tmuxName }: { tmuxName: string }) {
         </div>
       </div>
       {output && (
-        <pre className={`text-[11px] text-green-300 bg-[#050510] rounded-lg px-3 py-2 border border-[#1a1a2a] overflow-x-auto whitespace-pre font-mono ${expanded ? 'max-h-96' : 'max-h-32'} overflow-y-auto`}>
+        <pre className={`text-[11px] text-green-300 bg-[#060607] rounded-lg px-3 py-2 border border-[#1c1c1f] overflow-x-auto whitespace-pre font-mono ${expanded ? 'max-h-96' : 'max-h-32'} overflow-y-auto`}>
           {output}
         </pre>
       )}
@@ -142,7 +142,7 @@ function NodeDetailContent() {
   if (!alias) {
     return (
-      <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-6 font-mono flex items-center justify-center">
+      <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-6 flex items-center justify-center">
         <p className="text-gray-500">No alias specified. <Link href="/" className="text-blue-400 hover:underline">Back to dashboard</Link></p>
       </div>
     );
@@ -153,7 +153,7 @@ function NodeDetailContent() {
   const statusColor = SESSION_STATUS_TEXT_CLASS[session?.status || ''] || SESSION_STATUS_TEXT_CLASS.offline;
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
       {/* Header — round 40: avatar joins the alias for cross-page hue
           consistency; agent type lives in a subtitle so users know what
           kind of node they're looking at. */}
@@ -203,10 +203,10 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
   }, [tab, eventsLoaded]);
   return (
-    <div className="bg-[#0d0d1a] border border-[#2a2a4a] rounded-xl overflow-hidden h-[calc(100vh-140px)] flex flex-col">
+    <div className="bg-[#111113] border border-[#26262b] rounded-xl overflow-hidden h-[calc(100vh-140px)] flex flex-col">
       {/* Tab bar — round 40: emoji icons (💬 📋 📊) replaced with stroke
           SVG to drop the "AI generated" tell. */}
-      <div className="flex border-b border-[#2a2a4a] bg-[#0a0a15] shrink-0">
+      <div className="flex border-b border-[#26262b] bg-[#0e0e10] shrink-0">
         {([
           { id: 'chat',   label: 'Chat',   icon: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' },
           { id: 'events', label: 'Events', icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8' },
@@ -241,7 +241,7 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
         {tab === 'info' && (
           <div className="p-4 overflow-y-auto h-full space-y-4 max-w-2xl">
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <h2 className="text-sm font-semibold text-gray-300 mb-3">Node Info</h2>
             <div className="space-y-2 text-xs">
               {[
@@ -278,7 +278,7 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
           {/* Current Task */}
           {session?.task && (
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <h2 className="text-sm font-semibold text-gray-300 mb-2">Current Task</h2>
               <p className="text-xs text-gray-400 whitespace-pre-wrap">{session.task}</p>
             </div>
@@ -286,14 +286,14 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
           {/* Output */}
           {session?.output && (
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <h2 className="text-sm font-semibold text-gray-300 mb-2">Last Output</h2>
               <p className="text-xs text-gray-400 whitespace-pre-wrap max-h-48 overflow-y-auto">{session.output}</p>
             </div>
           )}
           {/* Send Task */}
-          <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+          <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
             <h2 className="text-sm font-semibold text-gray-300 mb-2">Send Task</h2>
             <div className="flex gap-2">
               <input
@@ -302,12 +302,12 @@ function NodeFullPanel({ alias, session, sse, sendMsg, setSendMsg, sending, send
                 onChange={e => setSendMsg(e.target.value)}
                 onKeyDown={e => e.key === 'Enter' && sendTask()}
                 placeholder={`Send task to ${alias}...`}
-                className="flex-1 bg-[#0a0a15] border border-[#2a2a4a] rounded px-3 py-2 text-xs text-white placeholder-gray-600 focus:border-blue-500 focus:outline-none"
+                className="flex-1 bg-[#0e0e10] border border-[#26262b] rounded px-3 py-2 text-base sm:text-xs text-white placeholder-gray-600 focus:border-blue-500 focus:outline-none"
               />
               <button
                 onClick={sendTask}
                 disabled={sending || !sendMsg.trim()}
-                className="px-3 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 text-white text-xs rounded transition-colors"
+                className="inline-flex min-h-[44px] items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 text-white text-xs rounded transition-colors"
               >
                 {sending ? '...' : 'Send'}
               </button>
@@ -354,11 +354,11 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
   return (
     <div className="p-4 overflow-y-auto h-full space-y-4">
       {[...groups.entries()].map(([taskId, taskEvents]) => (
-        <div key={taskId} className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+        <div key={taskId} className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
           <div className="text-[10px] text-gray-600 mb-3 truncate">Task: {taskId.slice(0, 20)}...</div>
           <div className="relative pl-6">
             {/* Vertical line */}
-            <div className="absolute left-[9px] top-2 bottom-2 w-0.5 bg-[#1a1a2a]" />
+            <div className="absolute left-[9px] top-2 bottom-2 w-0.5 bg-[#1c1c1f]" />
             {taskEvents.map((e, i) => {
               const cfg = EVENT_COLORS[e.to_status] || EVENT_COLORS.created;
@@ -366,8 +366,8 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
                 <div key={e.id} className="relative pb-4 last:pb-0">
                   {/* Dot on line — round 59: emoji icons replaced with
                       a 10px stroke SVG path matching event type. */}
-                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center z-10 border-2 border-[#111128]`}>
-                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#0a0a15" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                  <div className={`absolute -left-6 top-0.5 w-[18px] h-[18px] rounded-full ${cfg.dot} flex items-center justify-center z-10 border-2 border-[#161618]`}>
+                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#0e0e10" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                       <path d={cfg.path} />
                     </svg>
                   </div>
@@ -398,7 +398,17 @@ function EventsTimeline({ events, loading }: { events: Array<{ id: number; event
 export default function NodePage() {
   return (
-    <Suspense fallback={<div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-6 font-mono">Loading...</div>}>
+    <Suspense fallback={
+      // #209 R36: same pattern R30 fixed on /tasks — bare "Loading..."
+      // string used p-6 (no mobile padding tighten) + no left indent,
+      // so the fixed top-3 left-3 mobile hamburger covered the "Loa".
+      // Match the loaded layout: p-4 sm:p-6 + lg:ml-0 ml-10 mobile
+      // indent on the text. Loading state now visually maps to the
+      // populated /node detail page.
+      <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+        <div className="lg:ml-0 ml-10 text-gray-500 text-sm">Loading…</div>
+      </div>
+    }>
       <NodeDetailContent />
     </Suspense>
   );