@sleep2agi/agent-network-dashboard 0.5.3 → 0.5.4

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

@@ -1,4 +1,5 @@
 import { requireDashboardAuth, getV3UserToken } from '@/app/lib/dashboard-auth';
+import { dedupeByHostname, parseHubTime, type HubServerRow } from '@/app/lib/serverDedupe';
 
 const HUB_URL = process.env.COMMHUB_URL || 'http://127.0.0.1:9200';
 
@@ -32,35 +33,8 @@ async function hubHeaders(): Promise<Record<string, string>> {
  *      field in 0.8.1-preview.5.
  */
 
-interface HubServerRow {
-  hostname: string;
-  ip?: string | null;
-  agent_count?: number;
-  cpu_load_1min?: number | null;
-  cpu_cores?: number | null;
-  mem_used_gb?: number | null;
-  mem_total_gb?: number | null;
-  mem_avail_gb?: number | null;
-  disk_used_gb?: number | null;
-  disk_total_gb?: number | null;
-  cpu_history?: number[];
-  mem_history?: number[];
-  agents?: unknown[];
-  last_seen?: string | null;
-  status?: 'online' | 'offline';
-  note?: string;
-}
-
 function freshnessStatus(lastSeen: string | null | undefined): 'online' | 'offline' {
-  if (!lastSeen) return 'offline';
-  // commhub-server@0.8.1-preview.5 reports last_seen in "YYYY-MM-DD
-  // HH:MM:SS" (space-separated, no timezone). Treat as UTC so all
-  // clients agree regardless of their local zone. If a later hub
-  // upgrade switches to ISO 8601 with explicit timezone, Date.parse
-  // will accept either format and the +'Z' suffix is harmless.
-  const iso = lastSeen.includes('T') ? lastSeen : lastSeen.replace(' ', 'T');
-  const withTz = /[zZ]|[+-]\d{2}:?\d{2}$/.test(iso) ? iso : iso + 'Z';
-  const t = Date.parse(withTz);
+  const t = parseHubTime(lastSeen);
   if (Number.isNaN(t)) return 'offline';
   // 90s freshness window — wider than the agent-node 30s report
   // cadence to absorb network latency + clock drift between client
@@ -117,7 +91,7 @@ export async function GET() {
         ? raw.servers
         : [];
     return Response.json({
-      servers: rows.map(normalizeServer),
+      servers: dedupeByHostname(rows).map(normalizeServer),
       unavailable: raw?.unavailable === true,
     });
   } catch (e: unknown) {

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

@@ -0,0 +1,83 @@
+import { requireDashboardAuth } from '@/app/lib/dashboard-auth';
+import { randomUUID } from 'crypto';
+import { mkdir, readFile, writeFile } from 'fs/promises';
+import path from 'path';
+
+const UPLOAD_DIR = '/tmp/agent-network-dashboard-uploads';
+const MAX_BYTES = 12 * 1024 * 1024;
+
+function safeName(name: string) {
+  const ext = path.extname(name).toLowerCase().replace(/[^a-z0-9.]/g, '');
+  return `${Date.now()}-${randomUUID()}${ext || '.bin'}`;
+}
+
+function isImage(type: string, filename: string) {
+  return type.startsWith('image/') || /\.(png|jpe?g|gif|webp)$/i.test(filename);
+}
+
+export async function POST(req: Request) {
+  const authFailure = await requireDashboardAuth();
+  if (authFailure) return authFailure;
+
+  try {
+    const form = await req.formData();
+    const file = form.get('file');
+    if (!(file instanceof File)) {
+      return Response.json({ error: 'missing file' }, { status: 400 });
+    }
+    if (!isImage(file.type, file.name)) {
+      return Response.json({ error: 'only image uploads are supported' }, { status: 400 });
+    }
+    if (file.size > MAX_BYTES) {
+      return Response.json({ error: 'image is too large', max_bytes: MAX_BYTES }, { status: 413 });
+    }
+
+    await mkdir(UPLOAD_DIR, { recursive: true });
+    const filename = safeName(file.name);
+    const fullPath = path.join(UPLOAD_DIR, filename);
+    const bytes = Buffer.from(await file.arrayBuffer());
+    await writeFile(fullPath, bytes);
+
+    return Response.json({
+      ok: true,
+      filename,
+      path: fullPath,
+      url: `/api/hub/upload?file=${encodeURIComponent(filename)}`,
+      mime: file.type || 'application/octet-stream',
+      size: file.size,
+    });
+  } catch (e: unknown) {
+    return Response.json({ error: 'upload failed', detail: e instanceof Error ? e.message : String(e) }, { status: 500 });
+  }
+}
+
+export async function GET(req: Request) {
+  const authFailure = await requireDashboardAuth();
+  if (authFailure) return authFailure;
+
+  const url = new URL(req.url);
+  const filename = url.searchParams.get('file') || '';
+  if (!/^[0-9]+-[a-f0-9-]+\.[a-z0-9]+$/i.test(filename)) {
+    return Response.json({ error: 'invalid file' }, { status: 400 });
+  }
+
+  try {
+    const fullPath = path.join(UPLOAD_DIR, filename);
+    const data = await readFile(fullPath);
+    const ext = path.extname(filename).toLowerCase();
+    const mime =
+      ext === '.png' ? 'image/png' :
+      ext === '.jpg' || ext === '.jpeg' ? 'image/jpeg' :
+      ext === '.gif' ? 'image/gif' :
+      ext === '.webp' ? 'image/webp' :
+      'application/octet-stream';
+    return new Response(data, {
+      headers: {
+        'Content-Type': mime,
+        'Cache-Control': 'private, max-age=86400',
+      },
+    });
+  } catch {
+    return Response.json({ error: 'not found' }, { status: 404 });
+  }
+}

package/app/components/AppShell.tsx

@@ -6,6 +6,7 @@ import { HealthBanner } from './HealthBanner';
 import { CommandPalette } from './CommandPalette';
 import { HelpOverlay } from './HelpOverlay';
 import { ServersDrawer } from './ServersDrawer';
+import { MobileNav } from './MobileNav';
 
 const NO_SHELL_PATHS = ['/login'];
 
@@ -21,8 +22,9 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       <Sidebar />
       <main className="flex-1 min-w-0 flex flex-col">
         <HealthBanner />
-        <div className="flex-1 min-w-0">{children}</div>
+        <div className="flex-1 min-w-0 pb-20 lg:pb-0">{children}</div>
       </main>
+      <MobileNav />
       <CommandPalette />
       <HelpOverlay />
       <ServersDrawer />

package/app/components/MobileNav.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const MOBILE_NAV_ITEMS = [
+  { href: '/', label: 'Home', 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: 'Agents', 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: '/messages', label: 'Chats', 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: '/logs', label: 'Status', 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' },
+];
+
+export function MobileNav() {
+  const pathname = usePathname();
+  const isActive = (href: string) => href === '/' ? pathname === '/' : pathname.startsWith(href);
+
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-[#2a2a4a] bg-[#0d0d1a]/95 px-1 pb-[calc(env(safe-area-inset-bottom)+0.25rem)] pt-1.5 backdrop-blur lg:hidden">
+      <div className="mx-auto grid max-w-md grid-cols-5 gap-1">
+        {MOBILE_NAV_ITEMS.map(item => {
+          const active = isActive(item.href);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              prefetch={false}
+              aria-current={active ? 'page' : undefined}
+              className={`flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-[10px] transition-colors ${
+                active
+                  ? 'bg-cyan-500/12 text-cyan-300'
+                  : 'text-gray-500 active:bg-[#1a1a3a] active:text-gray-200'
+              }`}
+            >
+              <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
+                <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
+              </svg>
+              <span className="max-w-full truncate">{item.label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

package/app/components/TaskChatPanel.tsx

@@ -15,6 +15,57 @@ interface ChatTask {
   created_at: string;
 }
 
+function extractAttachmentPreviews(text: string): string[] {
+  const urls: string[] = [];
+  for (const line of (text || '').split('\n')) {
+    const match = line.match(/^\s*-\s*预览:\s*(\S+)\s*$/);
+    if (match?.[1]) urls.push(match[1]);
+  }
+  return Array.from(new Set(urls));
+}
+
+function AttachmentPreviews({ text }: { text: string }) {
+  const urls = extractAttachmentPreviews(text);
+  if (urls.length === 0) return null;
+  return (
+    <div className="mt-2 grid grid-cols-2 gap-2">
+      {urls.map((url) => (
+        <a key={url} href={url} target="_blank" rel="noreferrer" className="group block overflow-hidden rounded-lg border border-cyan-500/20 bg-black/20">
+          <img
+            src={url}
+            alt="Dashboard attachment preview"
+            className="h-28 w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
+            loading="lazy"
+          />
+        </a>
+      ))}
+    </div>
+  );
+}
+
+function LocalImagePreview({ file, onRemove }: { file: File; onRemove: () => void }) {
+  const [url, setUrl] = useState('');
+  useEffect(() => {
+    const objectUrl = URL.createObjectURL(file);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file]);
+
+  return (
+    <div className="relative h-16 w-16 overflow-hidden rounded-lg border border-cyan-500/25 bg-black/20">
+      {url && <img src={url} alt={file.name} className="h-full w-full object-cover" />}
+      <button
+        type="button"
+        onClick={onRemove}
+        className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/70 text-xs text-white hover:bg-red-500"
+        aria-label={`Remove ${file.name}`}
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
 const STATUS_STEPS = ['created', 'delivered', 'running', 'replied'];
 const STATUS_COLORS: Record<string, string> = {
   created: 'bg-gray-400', delivered: 'bg-blue-400', running: 'bg-green-400',
@@ -123,6 +174,7 @@ interface TaskChatPanelProps {
 export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskChatPanelProps) {
   const [messages, setMessages] = useState<ChatTask[]>([]);
   const [input, setInput] = useState('');
+  const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
   const [priority, setPriority] = useState('normal');
   const [sending, setSending] = useState(false);
   const [pollingIds, setPollingIds] = useState<Set<string>>(new Set());
@@ -228,8 +280,21 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
     return () => clearInterval(interval);
   }, [pollingIds]);
 
+  const uploadAttachments = async () => {
+    const uploaded = [];
+    for (const file of attachedFiles) {
+      const form = new FormData();
+      form.append('file', file);
+      const res = await fetch('/api/hub/upload', { method: 'POST', body: form });
+      const data = await res.json().catch(() => ({ ok: false, error: `HTTP ${res.status}` }));
+      if (!res.ok || !data.ok) throw new Error(data.error || data.detail || `upload failed: ${file.name}`);
+      uploaded.push({ type: 'image', name: file.name, path: data.path, url: data.url, mime: data.mime, size: data.size });
+    }
+    return uploaded;
+  };
+
   const send = async () => {
-    if (!input.trim() || sending) return;
+    if ((!input.trim() && attachedFiles.length === 0) || sending) return;
     let taskContent = input.trim();
     let sendTo = targetAlias;
 
@@ -245,9 +310,14 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
 
     setSending(true);
     setInput('');
+    setAttachedFiles([]);
     setShowMentions(false);
     if (textareaRef.current) textareaRef.current.style.height = 'auto';
 
+    const pendingAttachmentText = attachedFiles.length > 0
+      ? `\n\n[Dashboard 附件待上传]\n${attachedFiles.map(f => `- 图片: ${f.name}`).join('\n')}`
+      : '';
+
     // Optimistic echo first so the user always sees their message in history
     // even if the network call fails or the server returns ok:false. Earlier
     // version only added on data.ok=true → silent failures looked like
@@ -259,17 +329,31 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
       to_name: sendTo,
       status: 'created',
       priority,
-      content: taskContent,
+      content: `${taskContent}${pendingAttachmentText}`.trim(),
       result: '',
       created_at: new Date().toISOString(),
     };
     setMessages(prev => [...prev, optimistic]);
 
     try {
+      const uploaded = await uploadAttachments();
+      if (uploaded.length > 0) {
+        const attachmentText = [
+          '',
+          '',
+          '[Dashboard 附件]',
+          ...uploaded.map(f => `- 图片: ${f.path}`),
+          ...uploaded.map(f => `- 预览: ${f.url}`),
+        ].join('\n');
+        taskContent = `${taskContent}${attachmentText}`.trim();
+        setMessages(prev => prev.map(m =>
+          m.task_id === localTaskId ? { ...m, content: taskContent } : m,
+        ));
+      }
       const res = await fetch('/api/hub/send', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ alias: sendTo, task: taskContent, priority }),
+        body: JSON.stringify({ alias: sendTo, task: taskContent, priority, attachments: uploaded }),
       });
       const data = await res.json().catch(() => ({ ok: false, error: `HTTP ${res.status}` }));
       if (data.ok && data.message_id) {
@@ -318,6 +402,20 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
     setShowMentions(false);
   };
 
+  const addImageFiles = (files: FileList | File[]) => {
+    const images = Array.from(files).filter(file => file.type.startsWith('image/'));
+    if (images.length === 0) return;
+    setAttachedFiles(prev => [...prev, ...images].slice(0, 6));
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const files = Array.from(e.clipboardData.files || []);
+    if (files.some(file => file.type.startsWith('image/'))) {
+      addImageFiles(files);
+      e.preventDefault();
+    }
+  };
+
   const insertMention = (nodeName: string) => {
     const lastAt = input.lastIndexOf('@');
     const before = input.slice(0, lastAt);
@@ -372,6 +470,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                   </div>
                   <div className="text-[13px] text-[var(--fg)]">
                     <MarkdownContent text={m.content} />
+                    <AttachmentPreviews text={m.content} />
                   </div>
                   <div className="flex items-center justify-between mt-1.5 gap-3">
                     <StatusBar status={m.status} />
@@ -393,6 +492,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                     </div>
                     <div className="text-[13px] text-[var(--fg)]">
                       <MarkdownContent text={m.result} />
+                      <AttachmentPreviews text={m.result} />
                     </div>
                   </div>
                 </div>
@@ -437,11 +537,24 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 value={input}
                 onChange={e => { handleInputChange(e.target.value); autoResize(e.target); }}
                 onKeyDown={handleKeyDown}
+                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-16 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-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"
               />
               <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">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    className="hidden"
+                    onChange={e => { if (e.target.files) addImageFiles(e.target.files); e.currentTarget.value = ''; }}
+                  />
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 6.5l-7.78 7.78a3 3 0 104.24 4.24l8.49-8.49a5 5 0 00-7.07-7.07L5.89 11.45a7 7 0 109.9 9.9l7.07-7.07" />
+                  </svg>
+                </label>
                 <select value={priority} onChange={e => setPriority(e.target.value)}
                   className="bg-transparent text-[9px] text-[var(--fg-dim)] focus:outline-none cursor-pointer">
                   <option value="normal">N</option>
@@ -450,7 +563,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 </select>
               </div>
             </div>
-            <button onClick={send} disabled={sending || !input.trim()}
+            <button onClick={send} disabled={sending || (!input.trim() && attachedFiles.length === 0)}
               className="p-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-[var(--border)] disabled:text-[var(--fg-dim)] text-[var(--fg)] rounded-xl transition-all shrink-0 active:scale-95">
               {sending ? (
                 <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
@@ -461,9 +574,20 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               )}
             </button>
           </div>
+          {attachedFiles.length > 0 && (
+            <div className="mt-2 flex flex-wrap gap-2">
+              {attachedFiles.map((file, index) => (
+                <LocalImagePreview
+                  key={`${file.name}-${file.size}-${index}`}
+                  file={file}
+                  onRemove={() => setAttachedFiles(prev => prev.filter((_, i) => i !== index))}
+                />
+              ))}
+            </div>
+          )}
           <div className="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 · Shift+Enter for newline</span>
+            <span>Enter to send · paste image</span>
           </div>
         </div>
     </>