@sleep2agi/agent-network-dashboard 0.5.4 → 0.5.5-preview.1

package/app/components/ServersDrawer.tsx

@@ -195,27 +195,27 @@ function AgentList({ agents }: { agents?: ServerAgent[] }) {
   );
 }
 
-export function ServersDrawer() {
-  const [open, setOpen] = useState(false);
-  /** v0.10.0 Hero 1+2 — per-server expanded state for detail card
-   *  (sparklines + disk bar + agent rollup). Stored as a Set of
-   *  hostnames; persists in localStorage so the user's last selection
-   *  survives reload. Independent of the drawer's open/close state. */
+function useServers(enabled = true) {
+  const { data, error } = useSWR<ServersResponse>(
+    enabled ? '/api/hub/servers' : null,
+    fetcher,
+    { refreshInterval: 5000, dedupingInterval: 3000 },
+  );
+  const servers = data?.servers ?? [];
+  const unavailable = data?.unavailable === true;
+  const onlineCount = servers.filter(s => s.status === 'online').length;
+  const loading = enabled && !data && !error;
+  return { data, error, servers, unavailable, onlineCount, loading };
+}
+
+export function ServersPanel({ enabled = true, className = '' }: { enabled?: boolean; className?: string }) {
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  // Drawer state is per-user-machine — persist like the other dashboard
-  // sticky toggles (`anet-topo-layout`, `anet-topo-view`, etc.).
   useEffect(() => {
-    try { if (localStorage.getItem('anet-servers-drawer') === '1') setOpen(true); } catch {}
     try {
       const raw = localStorage.getItem('anet-servers-drawer-expanded');
       if (raw) setExpanded(new Set(JSON.parse(raw)));
     } catch {}
   }, []);
-  const toggle = () => setOpen(prev => {
-    const next = !prev;
-    try { localStorage.setItem('anet-servers-drawer', next ? '1' : '0'); } catch {}
-    return next;
-  });
   const toggleExpanded = (hostname: string) => setExpanded(prev => {
     const next = new Set(prev);
     if (next.has(hostname)) next.delete(hostname); else next.add(hostname);
@@ -223,19 +223,165 @@ export function ServersDrawer() {
     return next;
   });
 
+  const { data, error, servers, unavailable, loading } = useServers(enabled);
+
+  return (
+    <div className={`min-h-0 overflow-y-auto px-2 py-2 space-y-2 ${className}`} data-servers-body>
+      {loading && (
+        <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-4">
+          loading servers…
+        </div>
+      )}
+      {error && !data && (
+        <div className="rounded-md border px-2.5 py-2 text-[10px] font-mono"
+          style={{ background: 'rgb(239 68 68 / 0.06)', borderColor: 'rgb(239 68 68 / 0.25)', color: '#ef4444' }}>
+          hub unreachable · retrying every 5s
+        </div>
+      )}
+      {unavailable && (
+        <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-3 leading-relaxed">
+          host telemetry not available<br/>
+          <span className="text-[var(--fg-dim)]">upgrade commhub-server ≥ 0.8.1-preview.2</span>
+        </div>
+      )}
+      {!loading && !error && !unavailable && servers.length === 0 && (
+        <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-4">
+          no servers reporting yet
+        </div>
+      )}
+      {servers.map(s => {
+        const offline = s.status === 'offline';
+        const cpuPct = s.cpu_load_1min != null && s.cpu_cores > 0 ? (s.cpu_load_1min / s.cpu_cores) * 100 : null;
+        const memPct = s.mem_used_gb != null && s.mem_total_gb != null && s.mem_total_gb > 0 ? (s.mem_used_gb / s.mem_total_gb) * 100 : null;
+        const diskPct = s.disk_used_gb != null && s.disk_total_gb != null && s.disk_total_gb > 0 ? (s.disk_used_gb / s.disk_total_gb) * 100 : null;
+        const isExpanded = expanded.has(s.hostname);
+        return (
+          <div
+            key={s.hostname}
+            className="rounded-lg border px-2.5 py-2 space-y-1.5"
+            style={{
+              background: 'var(--bg)',
+              borderColor: 'var(--border)',
+              opacity: offline ? 0.55 : 1,
+            }}
+            data-server-card={s.hostname}
+            data-server-expanded={isExpanded ? 'true' : 'false'}
+            title={s.ip ? `${s.hostname} · ${s.ip}` : s.hostname}
+          >
+            {/* v0.10.0 Hero 1+2: header row — click toggles expanded
+                detail view (sparklines + disk + agent rollup). */}
+            <button
+              type="button"
+              onClick={() => toggleExpanded(s.hostname)}
+              aria-expanded={isExpanded}
+              className="w-full flex items-center justify-between gap-2 text-left"
+              data-server-card-toggle={s.hostname}
+            >
+              <div className="min-w-0 flex items-center gap-1.5">
+                {/* Hero 1 health badge — worst-of CPU/Mem/Disk */}
+                {!offline && <HealthBadge cpu={cpuPct} mem={memPct} disk={diskPct} />}
+                <span className="font-mono text-[12px] font-semibold truncate" style={{ color: 'var(--fg)' }}>{s.hostname}</span>
+                {s.note && <span className="text-[9px] text-[var(--fg-dim)]">({s.note})</span>}
+              </div>
+              <span className="flex items-center gap-1 shrink-0">
+                <span className="text-[10px] text-[var(--fg-muted)] font-mono tabular-nums">
+                  {s.agent_count}&nbsp;agent{s.agent_count === 1 ? '' : 's'}
+                </span>
+                {/* Chevron — rotates 90° on expanded */}
+                <svg
+                  width="10" height="10" viewBox="0 0 10 10"
+                  style={{ transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 150ms ease-out' }}
+                  aria-hidden
+                >
+                  <path d="M3 1.5L7 5L3 8.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </span>
+            </button>
+            {!offline && cpuPct != null && (
+              <Bar pct={cpuPct} label={`CPU ${s.cpu_load_1min!.toFixed(2)}/${s.cpu_cores}`} />
+            )}
+            {!offline && memPct != null && (
+              <Bar pct={memPct} label={`RAM ${s.mem_used_gb!.toFixed(1)}/${s.mem_total_gb!.toFixed(1)}G`} />
+            )}
+            {offline && (
+              <div className="text-[10px] text-[var(--fg-dim)] font-mono italic">CPU n/a · RAM n/a · offline</div>
+            )}
+            {/* v0.10.0 Hero 1+2: expanded detail — disk bar +
+                5-min sparklines + agent rollup. Visible only when
+                the user clicks the card. Renders gracefully when
+                upstream hub hasn't shipped optional fields. */}
+            {isExpanded && !offline && (
+              <div className="pt-1 mt-1 border-t space-y-1.5" style={{ borderColor: 'var(--border)' }}>
+                {diskPct != null ? (
+                  <Bar pct={diskPct} label={`DISK ${s.disk_used_gb!.toFixed(1)}/${s.disk_total_gb!.toFixed(1)}G`} />
+                ) : (
+                  /* #157 sibling fix — same misleading version-pin copy
+                     dropped at the disk-metric placeholder. Same
+                     rationale as the agent-rollup copy above. */
+                  <div className="text-[9px] text-[var(--fg-dim)] font-mono italic" data-server-disk-missing="true">disk metric not reported by hub</div>
+                )}
+                {s.cpu_history && s.cpu_history.length >= 2 && (
+                  <div className="space-y-0.5">
+                    <div className="text-[9px] text-[var(--fg-muted)] font-mono">CPU · 5-min</div>
+                    <Sparkline values={s.cpu_history} tint="#10b981" label="CPU" />
+                  </div>
+                )}
+                {s.mem_history && s.mem_history.length >= 2 && (
+                  <div className="space-y-0.5">
+                    <div className="text-[9px] text-[var(--fg-muted)] font-mono">RAM · 5-min</div>
+                    <Sparkline values={s.mem_history} tint="#06b6d4" label="MEM" />
+                  </div>
+                )}
+                {/* v0.10.2 RFC-014 §7 close gate #3 — disk usage
+                   5-min curve. Amber tint matches the disk bar
+                   tier convention (DISK > CPU/Mem in alert-
+                   priority hierarchy since disk-full is a hard
+                   failure mode). Render only when agent-node
+                   2.4.1-preview.0+ has shipped disk_history;
+                   backward-compat handles older agents silently
+                   (no sparkline, no broken state). */}
+                {s.disk_history && s.disk_history.length >= 2 && (
+                  <div className="space-y-0.5">
+                    <div className="text-[9px] text-[var(--fg-muted)] font-mono">DISK · 5-min</div>
+                    <Sparkline values={s.disk_history} tint="#f59e0b" label="DISK" />
+                  </div>
+                )}
+                <div className="pt-1">
+                  <div className="text-[9px] text-[var(--fg-muted)] font-mono mb-0.5">agents</div>
+                  <AgentList agents={s.agents} />
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+      {servers.length > 0 && (
+        <div className="pt-1 text-[9px] text-[var(--fg-dim)] font-mono text-center">
+          live · refreshing every 5s
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ServersDrawer() {
+  const [open, setOpen] = useState(false);
+  // Drawer state is per-user-machine — persist like the other dashboard
+  // sticky toggles (`anet-topo-layout`, `anet-topo-view`, etc.).
+  useEffect(() => {
+    try { if (localStorage.getItem('anet-servers-drawer') === '1') setOpen(true); } catch {}
+  }, []);
+  const toggle = () => setOpen(prev => {
+    const next = !prev;
+    try { localStorage.setItem('anet-servers-drawer', next ? '1' : '0'); } catch {}
+    return next;
+  });
+
   // Round 20 / #119 step 3 final delivery — real SWR fetch. 5s refresh
   // matches the other live drawers (HealthBanner, Sidebar) so an operator
   // sees host telemetry update in roughly the same beat as session state.
   // Only poll while expanded — collapsed icon strip doesn't need fresh data.
-  const { data, error } = useSWR<ServersResponse>(
-    open ? '/api/hub/servers' : null,
-    fetcher,
-    { refreshInterval: 5000, dedupingInterval: 3000 },
-  );
-  const servers = data?.servers ?? [];
-  const unavailable = data?.unavailable === true;
-  const onlineCount = servers.filter(s => s.status === 'online').length;
-  const loading = open && !data && !error;
+  const { servers, onlineCount } = useServers(open);
 
   return (
     <aside
@@ -271,141 +417,7 @@ export function ServersDrawer() {
       </button>
 
       {open && (
-        <div className="flex-1 min-h-0 overflow-y-auto px-2 py-2 space-y-2" data-servers-body>
-          {loading && (
-            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-4">
-              loading servers…
-            </div>
-          )}
-          {error && !data && (
-            <div className="rounded-md border px-2.5 py-2 text-[10px] font-mono"
-              style={{ background: 'rgb(239 68 68 / 0.06)', borderColor: 'rgb(239 68 68 / 0.25)', color: '#ef4444' }}>
-              hub unreachable · retrying every 5s
-            </div>
-          )}
-          {unavailable && (
-            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-3 leading-relaxed">
-              host telemetry not available<br/>
-              <span className="text-[var(--fg-dim)]">upgrade commhub-server ≥ 0.8.1-preview.2</span>
-            </div>
-          )}
-          {!loading && !error && !unavailable && servers.length === 0 && (
-            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-4">
-              no servers reporting yet
-            </div>
-          )}
-          {servers.map(s => {
-            const offline = s.status === 'offline';
-            const cpuPct = s.cpu_load_1min != null && s.cpu_cores > 0 ? (s.cpu_load_1min / s.cpu_cores) * 100 : null;
-            const memPct = s.mem_used_gb != null && s.mem_total_gb != null && s.mem_total_gb > 0 ? (s.mem_used_gb / s.mem_total_gb) * 100 : null;
-            const diskPct = s.disk_used_gb != null && s.disk_total_gb != null && s.disk_total_gb > 0 ? (s.disk_used_gb / s.disk_total_gb) * 100 : null;
-            const isExpanded = expanded.has(s.hostname);
-            return (
-              <div
-                key={s.hostname}
-                className="rounded-lg border px-2.5 py-2 space-y-1.5"
-                style={{
-                  background: 'var(--bg)',
-                  borderColor: 'var(--border)',
-                  opacity: offline ? 0.55 : 1,
-                }}
-                data-server-card={s.hostname}
-                data-server-expanded={isExpanded ? 'true' : 'false'}
-                title={s.ip ? `${s.hostname} · ${s.ip}` : s.hostname}
-              >
-                {/* v0.10.0 Hero 1+2: header row — click toggles expanded
-                    detail view (sparklines + disk + agent rollup). */}
-                <button
-                  type="button"
-                  onClick={() => toggleExpanded(s.hostname)}
-                  aria-expanded={isExpanded}
-                  className="w-full flex items-center justify-between gap-2 text-left"
-                  data-server-card-toggle={s.hostname}
-                >
-                  <div className="min-w-0 flex items-center gap-1.5">
-                    {/* Hero 1 health badge — worst-of CPU/Mem/Disk */}
-                    {!offline && <HealthBadge cpu={cpuPct} mem={memPct} disk={diskPct} />}
-                    <span className="font-mono text-[12px] font-semibold truncate" style={{ color: 'var(--fg)' }}>{s.hostname}</span>
-                    {s.note && <span className="text-[9px] text-[var(--fg-dim)]">({s.note})</span>}
-                  </div>
-                  <span className="flex items-center gap-1 shrink-0">
-                    <span className="text-[10px] text-[var(--fg-muted)] font-mono tabular-nums">
-                      {s.agent_count}&nbsp;agent{s.agent_count === 1 ? '' : 's'}
-                    </span>
-                    {/* Chevron — rotates 90° on expanded */}
-                    <svg
-                      width="10" height="10" viewBox="0 0 10 10"
-                      style={{ transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 150ms ease-out' }}
-                      aria-hidden
-                    >
-                      <path d="M3 1.5L7 5L3 8.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                    </svg>
-                  </span>
-                </button>
-                {!offline && cpuPct != null && (
-                  <Bar pct={cpuPct} label={`CPU ${s.cpu_load_1min!.toFixed(2)}/${s.cpu_cores}`} />
-                )}
-                {!offline && memPct != null && (
-                  <Bar pct={memPct} label={`RAM ${s.mem_used_gb!.toFixed(1)}/${s.mem_total_gb!.toFixed(1)}G`} />
-                )}
-                {offline && (
-                  <div className="text-[10px] text-[var(--fg-dim)] font-mono italic">CPU n/a · RAM n/a · offline</div>
-                )}
-                {/* v0.10.0 Hero 1+2: expanded detail — disk bar +
-                    5-min sparklines + agent rollup. Visible only when
-                    the user clicks the card. Renders gracefully when
-                    upstream hub hasn't shipped optional fields. */}
-                {isExpanded && !offline && (
-                  <div className="pt-1 mt-1 border-t space-y-1.5" style={{ borderColor: 'var(--border)' }}>
-                    {diskPct != null ? (
-                      <Bar pct={diskPct} label={`DISK ${s.disk_used_gb!.toFixed(1)}/${s.disk_total_gb!.toFixed(1)}G`} />
-                    ) : (
-                      /* #157 sibling fix — same misleading version-pin copy
-                         dropped at the disk-metric placeholder. Same
-                         rationale as the agent-rollup copy above. */
-                      <div className="text-[9px] text-[var(--fg-dim)] font-mono italic" data-server-disk-missing="true">disk metric not reported by hub</div>
-                    )}
-                    {s.cpu_history && s.cpu_history.length >= 2 && (
-                      <div className="space-y-0.5">
-                        <div className="text-[9px] text-[var(--fg-muted)] font-mono">CPU · 5-min</div>
-                        <Sparkline values={s.cpu_history} tint="#10b981" label="CPU" />
-                      </div>
-                    )}
-                    {s.mem_history && s.mem_history.length >= 2 && (
-                      <div className="space-y-0.5">
-                        <div className="text-[9px] text-[var(--fg-muted)] font-mono">RAM · 5-min</div>
-                        <Sparkline values={s.mem_history} tint="#06b6d4" label="MEM" />
-                      </div>
-                    )}
-                    {/* v0.10.2 RFC-014 §7 close gate #3 — disk usage
-                       5-min curve. Amber tint matches the disk bar
-                       tier convention (DISK > CPU/Mem in alert-
-                       priority hierarchy since disk-full is a hard
-                       failure mode). Render only when agent-node
-                       2.4.1-preview.0+ has shipped disk_history;
-                       backward-compat handles older agents silently
-                       (no sparkline, no broken state). */}
-                    {s.disk_history && s.disk_history.length >= 2 && (
-                      <div className="space-y-0.5">
-                        <div className="text-[9px] text-[var(--fg-muted)] font-mono">DISK · 5-min</div>
-                        <Sparkline values={s.disk_history} tint="#f59e0b" label="DISK" />
-                      </div>
-                    )}
-                    <div className="pt-1">
-                      <div className="text-[9px] text-[var(--fg-muted)] font-mono mb-0.5">agents</div>
-                      <AgentList agents={s.agents} />
-                    </div>
-                  </div>
-                )}
-              </div>
-            );
-          })}
-          {servers.length > 0 && (
-            <div className="pt-1 text-[9px] text-[var(--fg-dim)] font-mono text-center">
-              live · refreshing every 5s
-            </div>
-          )}
-        </div>
+        <ServersPanel enabled={open} className="flex-1" />
       )}
     </aside>
   );

package/app/components/Sidebar.tsx

@@ -13,6 +13,7 @@ const NAV_ITEMS = [
   { href: '/', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
   { href: '/tasks', label: 'Tasks', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },
   { href: '/nodes', label: 'Nodes', icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
+  { href: '/servers', label: 'Servers', icon: 'M4 6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v1A2.5 2.5 0 0117.5 10h-11A2.5 2.5 0 014 7.5v-1zM4 16.5A2.5 2.5 0 016.5 14h11a2.5 2.5 0 012.5 2.5v1a2.5 2.5 0 01-2.5 2.5h-11A2.5 2.5 0 014 17.5v-1zM7 7h.01M7 17h.01' },
   { href: '/messages', label: 'Messages', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
   { href: '/settings/networks', label: 'Networks', icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9' },
   { href: '/logs', label: 'Audit Log', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },

package/app/components/TaskChatPanel.tsx

@@ -13,6 +13,31 @@ interface ChatTask {
   content: string;
   result: string;
   created_at: string;
+  completed_at?: string;
+}
+
+type ChatEvent =
+  | { kind: 'task'; task: ChatTask; at: string }
+  | { kind: 'reply'; task: ChatTask; at: string };
+
+function eventTime(value?: string) {
+  if (!value) return 0;
+  return new Date(value.replace(' ', 'T') + (value.includes('T') ? '' : 'Z')).getTime() || 0;
+}
+
+function formatTimestamp(value?: string) {
+  if (!value) return '--';
+  const d = new Date(value.replace(' ', 'T') + (value.includes('T') ? '' : 'Z'));
+  if (Number.isNaN(d.getTime())) return value;
+  return d.toLocaleString(undefined, { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+}
+
+function quotePreview(text: string, max = 140) {
+  const compact = (text || '')
+    .replace(/\[Dashboard 附件[\s\S]*$/m, '[附件]')
+    .replace(/\s+/g, ' ')
+    .trim();
+  return compact.length > max ? `${compact.slice(0, max)}…` : compact;
 }
 
 function extractAttachmentPreviews(text: string): string[] {
@@ -433,11 +458,24 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
     el.style.height = Math.min(el.scrollHeight, 150) + 'px';
   };
 
+  const chatEvents: ChatEvent[] = messages
+    .flatMap((task): ChatEvent[] => {
+      const events: ChatEvent[] = [{ kind: 'task', task, at: task.created_at }];
+      if (task.result) events.push({ kind: 'reply', task, at: task.completed_at || task.created_at });
+      return events;
+    })
+    .sort((a, b) => {
+      const delta = eventTime(a.at) - eventTime(b.at);
+      if (delta !== 0) return delta;
+      if (a.task.task_id !== b.task.task_id) return a.task.task_id.localeCompare(b.task.task_id);
+      return a.kind === 'task' ? -1 : 1;
+    });
+
   // Inline mode: just the chat content, no panel chrome
   const chatContent = (
     <>
         {/* Messages area */}
-        <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+        <div className="flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 space-y-3 sm:space-y-4">
           {!historyLoaded && (
             <div className="flex justify-center py-8">
               <div className="w-5 h-5 border-2 border-cyan-500/30 border-t-cyan-500 rounded-full animate-spin" />
@@ -451,7 +489,8 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
             </div>
           )}
 
-          {messages.map((m) => {
+          {chatEvents.map((event) => {
+            const m = event.task;
             // Distinguish task source so users can tell when a peer agent
             // forwarded a task vs when they themselves sent it from Dashboard.
             const fromUser = !m.from_name || m.from_name === 'Dashboard' || m.from_name === 'api' || m.from_name === 'hub';
@@ -459,11 +498,41 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
             const senderBadge = fromUser
               ? null
               : <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-purple-500/15 border border-purple-500/30 text-[9px] text-purple-300 font-medium">↳ {m.from_name}</span>;
+            if (event.kind === 'reply') {
+              return (
+                <div key={`${m.task_id}:reply`} className="flex justify-start">
+                  <div className="max-w-[92%] sm:max-w-[85%] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-3 py-2.5 sm:px-4 shadow-sm">
+                    <div className="flex items-center justify-between gap-2 mb-2">
+                      <div className="flex items-center gap-1.5 min-w-0">
+                        {m.to_name && <AliasAvatar alias={m.to_name} size={14} />}
+                        <span className="text-[10px] text-[var(--fg)] font-medium truncate">{m.to_name}</span>
+                        <span className="text-[9px] text-green-300/70">replied</span>
+                      </div>
+                      <span className="shrink-0 rounded-md bg-black/20 px-1.5 py-0.5 text-[9px] text-[var(--fg-dim)]" title={event.at}>
+                        {timeAgo(event.at)} · {formatTimestamp(event.at)}
+                      </span>
+                    </div>
+                    <div className="mb-2 rounded-lg border-l-2 border-cyan-400/40 bg-black/20 px-2.5 py-1.5">
+                      <div className="text-[9px] text-cyan-300/80">
+                        引用 {senderLabel} 的任务 · {formatTimestamp(m.created_at)}
+                      </div>
+                      <div className="mt-0.5 max-h-10 overflow-hidden text-[11px] leading-5 text-[var(--fg-muted)]">
+                        {quotePreview(m.content) || 'No content'}
+                      </div>
+                    </div>
+                    <div className="text-[13px] text-[var(--fg)]">
+                      <MarkdownContent text={m.result} />
+                      <AttachmentPreviews text={m.result} />
+                    </div>
+                  </div>
+                </div>
+              );
+            }
             return (
-            <div key={m.task_id} className="space-y-2">
+            <div key={`${m.task_id}:task`} className="space-y-2">
               {/* Outgoing task — labeled with origin so peer-forwarded tasks are obvious */}
               <div className="flex justify-end">
-                <div className="max-w-[85%] bg-cyan-500/8 border border-cyan-500/15 rounded-2xl rounded-br-md px-4 py-2.5 shadow-sm">
+                <div className="max-w-[92%] sm:max-w-[85%] bg-cyan-500/8 border border-cyan-500/15 rounded-2xl rounded-br-md px-3 py-2.5 sm:px-4 shadow-sm">
                   <div className="flex items-center gap-2 mb-1">
                     <span className={`text-[10px] font-medium ${fromUser ? 'text-cyan-400' : 'text-purple-300'}`}>{senderLabel}</span>
                     {!fromUser && <span className="text-[9px] text-[var(--fg-dim)]">forwarded to {m.to_name}</span>}
@@ -472,32 +541,18 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                     <MarkdownContent text={m.content} />
                     <AttachmentPreviews text={m.content} />
                   </div>
-                  <div className="flex items-center justify-between mt-1.5 gap-3">
+                  <div className="flex flex-wrap items-center justify-between mt-1.5 gap-2 sm:gap-3">
                     <StatusBar status={m.status} />
                     <div className="flex items-center gap-2 shrink-0">
                       {senderBadge}
-                      <span className="text-[9px] text-[var(--fg-dim)]">{timeAgo(m.created_at)}</span>
+                      <span className="rounded-md bg-black/15 px-1.5 py-0.5 text-[9px] text-[var(--fg-dim)]" title={m.created_at}>
+                        {timeAgo(m.created_at)} · {formatTimestamp(m.created_at)}
+                      </span>
                     </div>
                   </div>
                 </div>
               </div>
 
-              {/* Incoming reply */}
-              {m.result && (
-                <div className="flex justify-start">
-                  <div className="max-w-[85%] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-4 py-2.5 shadow-sm">
-                    <div className="flex items-center gap-1.5 mb-1.5">
-                      {m.to_name && <AliasAvatar alias={m.to_name} size={14} />}
-                      <span className="text-[10px] text-[var(--fg)] font-medium">{m.to_name}</span>
-                    </div>
-                    <div className="text-[13px] text-[var(--fg)]">
-                      <MarkdownContent text={m.result} />
-                      <AttachmentPreviews text={m.result} />
-                    </div>
-                  </div>
-                </div>
-              )}
-
               {/* Typing indicator when running */}
               {m.status === 'running' && !m.result && (
                 <div className="flex justify-start">
@@ -517,7 +572,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
         </div>
 
         {/* Input area */}
-        <div className="border-t border-[var(--border)] bg-[var(--bg-secondary)] px-4 py-3">
+        <div className="border-t border-[var(--border)] bg-[var(--bg-secondary)] px-3 py-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:px-4">
           <div className="flex items-end gap-2">
             <div className="flex-1 relative">
               {/* @ mention dropdown */}
@@ -540,7 +595,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 onPaste={handlePaste}
                 placeholder={`Message ${alias}...`}
                 rows={1}
-                className="w-full bg-[var(--bg-secondary)] border border-[var(--border)] rounded-xl px-4 py-2.5 pr-24 text-sm text-[var(--fg)] placeholder-[var(--fg-dim)] focus:border-cyan-500/40 focus:outline-none resize-none transition-colors"
+                className="w-full bg-[var(--bg-secondary)] border border-[var(--border)] rounded-xl px-3 py-2.5 pr-24 text-base sm:px-4 sm:text-sm text-[var(--fg)] placeholder-[var(--fg-dim)] focus:border-cyan-500/40 focus:outline-none resize-none transition-colors"
               />
               <div className="absolute right-2 bottom-1.5 flex items-center gap-1">
                 <label className="p-1 text-[var(--fg-dim)] hover:text-cyan-300 cursor-pointer rounded hover:bg-cyan-500/10" title="Attach image">
@@ -585,7 +640,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               ))}
             </div>
           )}
-          <div className="flex justify-between text-[9px] text-[var(--fg-dim)] mt-1.5">
+          <div className="hidden sm:flex justify-between text-[9px] text-[var(--fg-dim)] mt-1.5">
             <span>{input.includes('@') ? `Sending to: ${targetAlias}` : `Type @ to mention another node`}</span>
             <span>Enter to send · paste image</span>
           </div>
@@ -600,7 +655,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   return (
     <>
       <div className="fixed inset-0 bg-black/30 z-40 lg:hidden anet-fade-in" onClick={onClose} />
-      <div className="fixed top-0 right-0 h-full w-full lg:w-[500px] bg-[var(--bg)] border-l border-[var(--border)] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in">
+      <div className="fixed top-0 right-0 h-[100dvh] w-full lg:w-[500px] bg-[var(--bg)] border-l border-[var(--border)] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in">
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)] bg-[var(--bg-secondary)]">
           <div className="flex items-center gap-3">

package/app/components/TaskDrawer.tsx

@@ -81,7 +81,7 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
   return (
     <>
       <div className="fixed inset-0 bg-black/30 z-40 anet-fade-in" onClick={onClose} />
-      <div className="fixed top-0 right-0 h-full w-full lg:w-[500px] bg-[#0a0a1a] border-l border-[#2a2a4a] z-50 flex flex-col shadow-2xl shadow-black/60 overflow-y-auto animate-slide-in">
+      <div className="fixed top-0 right-0 h-[100dvh] w-full lg:w-[500px] bg-[#0a0a1a] border-l border-[#2a2a4a] z-50 flex flex-col shadow-2xl shadow-black/60 overflow-y-auto animate-slide-in">
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-4 border-b border-[#2a2a4a] bg-[#0d0d1a] sticky top-0">
           <div>

package/app/layout.tsx

@@ -30,8 +30,8 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
+  maximumScale: 5,
+  userScalable: true,
   themeColor: "#0a0a1a",
 };