@sleep2agi/agent-network-dashboard 0.5.3 → 0.5.5-preview.0

package/app/components/TaskChatPanel.tsx

@@ -13,6 +13,82 @@ 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[] {
+  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'];
@@ -123,6 +199,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 +305,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 +335,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 +354,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 +427,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);
@@ -335,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" />
@@ -353,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';
@@ -361,43 +498,61 @@ 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>}
                   </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">
+                  <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} />
-                    </div>
-                  </div>
-                </div>
-              )}
-
               {/* Typing indicator when running */}
               {m.status === 'running' && !m.result && (
                 <div className="flex justify-start">
@@ -417,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 */}
@@ -437,11 +592,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-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">
+                  <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 +618,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 +629,20 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               )}
             </button>
           </div>
-          <div className="flex justify-between text-[9px] text-[var(--fg-dim)] mt-1.5">
+          {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="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 · Shift+Enter for newline</span>
+            <span>Enter to send · paste image</span>
           </div>
         </div>
     </>
@@ -476,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>