@sleep2agi/agent-network-dashboard 0.5.3-preview.266 → 0.5.3-preview.267

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

@@ -123,6 +123,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 +229,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({ name: file.name, path: data.path, url: data.url });
+    }
+    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 +259,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,13 +278,27 @@ 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' },
@@ -318,6 +351,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);
@@ -437,11 +484,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 +510,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 +521,26 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               )}
             </button>
           </div>
+          {attachedFiles.length > 0 && (
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              {attachedFiles.map((file, index) => (
+                <span key={`${file.name}-${index}`} className="inline-flex items-center gap-1.5 max-w-[160px] px-2 py-1 rounded-lg border border-cyan-500/20 bg-cyan-500/8 text-[10px] text-cyan-200">
+                  <span className="truncate">{file.name}</span>
+                  <button
+                    type="button"
+                    onClick={() => setAttachedFiles(prev => prev.filter((_, i) => i !== index))}
+                    className="text-cyan-300 hover:text-white"
+                    aria-label={`Remove ${file.name}`}
+                  >
+                    ×
+                  </button>
+                </span>
+              ))}
+            </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>
     </>

package/app/layout.tsx

@@ -13,6 +13,12 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
   title: "Agent Network Dashboard",
   description: "Real-time monitoring dashboard for Agent Network nodes via CommHub",
+  manifest: "/manifest.webmanifest",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "Agent Network",
+  },
   icons: { icon: '/favicon.svg' },
   openGraph: {
     title: "Agent Network Dashboard",

package/app/manifest.ts

@@ -0,0 +1,23 @@
+import type { MetadataRoute } from 'next';
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Agent Network Dashboard',
+    short_name: 'AgentNet',
+    description: 'Mobile command surface for Agent Network and CommHub',
+    start_url: '/',
+    scope: '/',
+    display: 'standalone',
+    background_color: '#0a0a1a',
+    theme_color: '#0a0a1a',
+    orientation: 'portrait',
+    icons: [
+      {
+        src: '/favicon.svg',
+        sizes: 'any',
+        type: 'image/svg+xml',
+        purpose: 'any',
+      },
+    ],
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.5.3-preview.266",
+  "version": "0.5.3-preview.267",
   "description": "Agent Network Dashboard \u2014 Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",