@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/dialogs/SkipPermissionsCheckbox.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { Checkbox } from '@renderer/components/ui/checkbox';
+import { Label } from '@renderer/components/ui/label';
+import { Info } from 'lucide-react';
+
+interface SkipPermissionsCheckboxProps {
+  id: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+export const SkipPermissionsCheckbox: React.FC<SkipPermissionsCheckboxProps> = ({
+  id,
+  checked,
+  onCheckedChange,
+}) => (
+  <>
+    <div className="mt-2 flex items-center gap-2">
+      <Checkbox
+        id={id}
+        checked={checked}
+        onCheckedChange={(value) => onCheckedChange(value === true)}
+      />
+      <Label
+        htmlFor={id}
+        className="flex cursor-pointer items-center gap-1.5 text-xs font-normal text-text-secondary"
+      >
+        自动批准所有工具
+      </Label>
+    </div>
+    {checked ? (
+      <div
+        className="mt-1.5 rounded-md border px-3 py-2 text-xs"
+        style={{
+          backgroundColor: 'rgba(59, 130, 246, 0.08)',
+          borderColor: 'rgba(59, 130, 246, 0.2)',
+          color: 'var(--color-text-secondary)',
+        }}
+      >
+        <div className="flex items-start gap-2">
+          <Info className="mt-0.5 size-3.5 shrink-0 text-blue-400" />
+          <p>启用自主模式后，所有工具都会直接执行，不再逐次请求确认。处理不可信代码时请谨慎。</p>
+        </div>
+      </div>
+    ) : (
+      <div
+        className="mt-1.5 rounded-md border px-3 py-2 text-xs"
+        style={{
+          backgroundColor: 'rgba(59, 130, 246, 0.08)',
+          borderColor: 'rgba(59, 130, 246, 0.2)',
+          color: 'var(--color-text-secondary)',
+        }}
+      >
+        <div className="flex items-start gap-2">
+          <Info className="mt-0.5 size-3.5 shrink-0 text-blue-400" />
+          <p>手动模式：每次工具调用都需要你实时批准或拒绝。</p>
+        </div>
+      </div>
+    )}
+  </>
+);

package/src/renderer/components/team/dialogs/StatusHistoryTimeline.tsx

@@ -0,0 +1,229 @@
+import { MemberBadge } from '@renderer/components/team/MemberBadge';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { cn } from '@renderer/lib/utils';
+import {
+  REVIEW_STATE_DISPLAY,
+  TASK_STATUS_LABELS,
+  TASK_STATUS_STYLES,
+} from '@renderer/utils/memberHelpers';
+import { ArrowRight, Eye, MessageSquareX, Plus, ShieldCheck } from 'lucide-react';
+
+import type { TaskHistoryEvent, TeamReviewState, TeamTaskStatus } from '@shared/types';
+
+interface WorkflowTimelineProps {
+  events: TaskHistoryEvent[];
+  /** Map of member name → color name for colored badges. */
+  memberColorMap?: Map<string, string>;
+}
+
+export const WorkflowTimeline = ({ events, memberColorMap }: WorkflowTimelineProps) => {
+  if (events.length === 0) {
+    return (
+      <div className="px-3 py-2 text-xs text-[var(--color-text-muted)]">
+        No workflow history recorded
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-3 py-2">
+      {events.map((event, idx) => {
+        const isLast = idx === events.length - 1;
+        const time = formatTime(event.timestamp);
+
+        return (
+          <div key={event.id} className="flex">
+            {/* Timeline line + dot */}
+            <div className="flex w-5 shrink-0 flex-col items-center">
+              <div className={cn('mt-2 size-2 shrink-0 rounded-full', dotColor(event))} />
+              {!isLast && <div className="mt-1 w-px flex-1 bg-zinc-700" />}
+            </div>
+
+            {/* Content */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="flex w-full items-center gap-2 rounded p-1.5 text-xs text-[var(--color-text-secondary)]">
+                  <span className="shrink-0 font-mono text-[10px] text-[var(--color-text-muted)]">
+                    {time}
+                  </span>
+                  <EventContent event={event} memberColorMap={memberColorMap} />
+                  {shouldShowTrailingActor(event) && event.actor ? (
+                    <span className="ml-auto shrink-0">
+                      <MemberBadge
+                        name={event.actor}
+                        color={memberColorMap?.get(event.actor)}
+                        size="sm"
+                      />
+                    </span>
+                  ) : null}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                {new Date(event.timestamp).toLocaleString()}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+/** Keep old name as re-export for backwards compatibility during migration. */
+export const StatusHistoryTimeline = WorkflowTimeline;
+
+const EventContent = ({
+  event,
+  memberColorMap,
+}: {
+  event: TaskHistoryEvent;
+  memberColorMap?: Map<string, string>;
+}) => {
+  switch (event.type) {
+    case 'task_created':
+      return (
+        <span className="flex items-center gap-1">
+          <Plus size={10} />
+          Created as
+          <StatusBadge status={event.status} />
+          {event.actor ? (
+            <>
+              <span className="text-[var(--color-text-muted)]">by</span>
+              <MemberBadge
+                name={event.actor}
+                color={memberColorMap?.get(event.actor)}
+                size="sm"
+                hideAvatar
+              />
+            </>
+          ) : null}
+        </span>
+      );
+    case 'status_changed':
+      return (
+        <span className="flex items-center gap-1">
+          <StatusBadge status={event.from} />
+          <ArrowRight size={10} className="text-[var(--color-text-muted)]" />
+          <StatusBadge status={event.to} />
+        </span>
+      );
+    case 'review_requested':
+      return (
+        <span className="flex items-center gap-1">
+          <Eye size={10} className="text-purple-400" />
+          Review requested
+          {event.reviewer ? (
+            <MemberBadge
+              name={event.reviewer}
+              color={memberColorMap?.get(event.reviewer)}
+              size="sm"
+              hideAvatar
+            />
+          ) : null}
+        </span>
+      );
+    case 'review_started':
+      return (
+        <span className="flex items-center gap-1">
+          <Eye size={10} className="text-purple-400" />
+          Review started
+        </span>
+      );
+    case 'review_changes_requested':
+      return (
+        <span className="flex items-center gap-1">
+          <MessageSquareX size={10} className="text-amber-400" />
+          Changes requested
+          <ReviewStateBadge state="needsFix" />
+        </span>
+      );
+    case 'review_approved':
+      return (
+        <span className="flex items-center gap-1">
+          <ShieldCheck size={10} className="text-emerald-400" />
+          已批准
+          <ReviewStateBadge state="approved" />
+        </span>
+      );
+    default:
+      return <span>未知事件</span>;
+  }
+};
+
+const StatusBadge = ({ status }: { status: TeamTaskStatus }) => {
+  const style = TASK_STATUS_STYLES[status] ?? TASK_STATUS_STYLES.pending;
+  const label = TASK_STATUS_LABELS[status] ?? status;
+  return (
+    <span
+      className={cn('rounded-full px-1.5 py-0.5 text-[10px] font-medium', style.bg, style.text)}
+    >
+      {label}
+    </span>
+  );
+};
+
+const ReviewStateBadge = ({ state }: { state: TeamReviewState }) => {
+  if (state === 'none') return null;
+  const display = REVIEW_STATE_DISPLAY[state];
+  if (!display) return null;
+  return (
+    <span
+      className={cn('rounded-full px-1.5 py-0.5 text-[10px] font-medium', display.bg, display.text)}
+    >
+      {display.label}
+    </span>
+  );
+};
+
+function dotColor(event: TaskHistoryEvent): string {
+  switch (event.type) {
+    case 'task_created':
+      return dotColorForStatus(event.status);
+    case 'status_changed':
+      return dotColorForStatus(event.to);
+    case 'review_requested':
+      return 'bg-purple-400';
+    case 'review_started':
+      return 'bg-purple-400';
+    case 'review_changes_requested':
+      return 'bg-amber-400';
+    case 'review_approved':
+      return 'bg-emerald-400';
+    default:
+      return 'bg-zinc-500';
+  }
+}
+
+function shouldShowTrailingActor(event: TaskHistoryEvent): boolean {
+  return event.type !== 'task_created';
+}
+
+function dotColorForStatus(status: TeamTaskStatus): string {
+  switch (status) {
+    case 'pending':
+      return 'bg-zinc-500';
+    case 'in_progress':
+      return 'bg-blue-400';
+    case 'completed':
+      return 'bg-emerald-400';
+    case 'deleted':
+      return 'bg-red-400';
+    default:
+      return 'bg-zinc-500';
+  }
+}
+
+function formatTime(timestamp: string): string {
+  try {
+    const date = new Date(timestamp);
+    if (isNaN(date.getTime())) return '??:??';
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    });
+  } catch {
+    return '??:??';
+  }
+}

package/src/renderer/components/team/dialogs/TaskAttachments.tsx

@@ -0,0 +1,394 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { ImageLightbox } from '@renderer/components/team/attachments/ImageLightbox';
+import { Button } from '@renderer/components/ui/button';
+import { useStore } from '@renderer/store';
+import { isImageMimeType } from '@renderer/utils/attachmentUtils';
+import { File, ImagePlus, Loader2, Trash2 } from 'lucide-react';
+
+import type { TaskAttachmentMeta } from '@shared/types';
+
+const ACCEPTED_TYPES = new Set<string>(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);
+
+const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20 MB
+
+interface TaskAttachmentsProps {
+  teamName: string;
+  taskId: string;
+  attachments: TaskAttachmentMeta[];
+}
+
+export const TaskAttachments = ({
+  teamName,
+  taskId,
+  attachments,
+}: TaskAttachmentsProps): React.JSX.Element => {
+  const saveTaskAttachment = useStore((s) => s.saveTaskAttachment);
+  const deleteTaskAttachment = useStore((s) => s.deleteTaskAttachment);
+  const getTaskAttachmentData = useStore((s) => s.getTaskAttachmentData);
+
+  const [uploading, setUploading] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+  const [thumbCache, setThumbCache] = useState<Map<string, string>>(new Map());
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const imageAttachments = attachments.filter((a) => isImageMimeType(a.mimeType));
+
+  const handleThumbLoaded = useCallback((attachmentId: string, dataUrl: string) => {
+    setThumbCache((prev) => {
+      if (prev.get(attachmentId) === dataUrl) return prev;
+      const next = new Map(prev);
+      next.set(attachmentId, dataUrl);
+      return next;
+    });
+  }, []);
+
+  const handleFileSelect = useCallback(
+    async (files: FileList | null) => {
+      if (!files || files.length === 0) return;
+      setError(null);
+      setUploading(true);
+
+      try {
+        for (const file of Array.from(files)) {
+          if (!ACCEPTED_TYPES.has(file.type)) {
+            setError(`不支持的文件类型：${file.type}`);
+            continue;
+          }
+          if (file.size > MAX_FILE_SIZE) {
+            setError(`文件过大：${(file.size / (1024 * 1024)).toFixed(1)} MB（最大 20 MB）`);
+            continue;
+          }
+
+          const base64 = await fileToBase64(file);
+          await saveTaskAttachment(teamName, taskId, {
+            name: file.name,
+            type: file.type,
+            base64,
+          });
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : '上传失败');
+      } finally {
+        setUploading(false);
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
+    },
+    [teamName, taskId, saveTaskAttachment]
+  );
+
+  const handleDelete = useCallback(
+    async (attachmentId: string, mimeType: string) => {
+      setDeletingId(attachmentId);
+      try {
+        await deleteTaskAttachment(teamName, taskId, attachmentId, mimeType);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : '删除失败');
+      } finally {
+        setDeletingId(null);
+      }
+    },
+    [teamName, taskId, deleteTaskAttachment]
+  );
+
+  const handleDownload = useCallback(
+    async (att: TaskAttachmentMeta) => {
+      setError(null);
+      try {
+        const base64 = await getTaskAttachmentData(teamName, taskId, att.id, att.mimeType);
+        if (!base64) {
+          setError('未找到附件文件');
+          return;
+        }
+        const mime =
+          att.mimeType && typeof att.mimeType === 'string'
+            ? att.mimeType
+            : 'application/octet-stream';
+        const dataUrl = `data:${mime};base64,${base64}`;
+        const blob = await fetch(dataUrl).then((r) => r.blob());
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = att.filename || 'attachment';
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : '下载失败');
+      }
+    },
+    [getTaskAttachmentData, teamName, taskId]
+  );
+
+  // 1x1 transparent PNG placeholder for slides where thumb is not yet loaded
+  const PLACEHOLDER_SRC =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAA0lEQVQI12P4z8BQDwAEgAF/QualIQAAAABJRU5ErkJggg==';
+
+  const lightboxSlides = useMemo(
+    () =>
+      imageAttachments.map((a) => ({
+        src: thumbCache.get(a.id) ?? PLACEHOLDER_SRC,
+        alt: a.filename,
+      })),
+    [imageAttachments, thumbCache]
+  );
+
+  const handlePreview = useCallback(
+    (att: TaskAttachmentMeta) => {
+      if (!isImageMimeType(att.mimeType)) {
+        void handleDownload(att);
+        return;
+      }
+      const idx = imageAttachments.findIndex((a) => a.id === att.id);
+      if (idx >= 0) {
+        setLightboxIndex(idx);
+      }
+    },
+    [imageAttachments, handleDownload]
+  );
+
+  // Handle paste events for quick image attachment
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const handler = (e: ClipboardEvent): void => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+      const imageFiles: File[] = [];
+      for (const item of Array.from(items)) {
+        if (item.kind === 'file' && ACCEPTED_TYPES.has(item.type)) {
+          const file = item.getAsFile();
+          if (file) imageFiles.push(file);
+        }
+      }
+      if (imageFiles.length > 0) {
+        e.preventDefault();
+        const dt = new DataTransfer();
+        imageFiles.forEach((f) => dt.items.add(f));
+        void handleFileSelect(dt.files);
+      }
+    };
+    const el = containerRef.current;
+    if (el) {
+      el.addEventListener('paste', handler);
+      return () => el.removeEventListener('paste', handler);
+    }
+  }, [handleFileSelect]);
+
+  // Handle drag-and-drop
+  const [dragOver, setDragOver] = useState(false);
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback(() => setDragOver(false), []);
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragOver(false);
+      void handleFileSelect(e.dataTransfer.files);
+    },
+    [handleFileSelect]
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      tabIndex={-1}
+      className="space-y-2"
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {/* Attachment thumbnails */}
+      {attachments.length > 0 ? (
+        <div className="flex flex-wrap gap-2">
+          {attachments.map((att) => (
+            <AttachmentThumbnail
+              key={att.id}
+              attachment={att}
+              teamName={teamName}
+              taskId={taskId}
+              isDeleting={deletingId === att.id}
+              onPreview={() => {
+                // eslint-disable-next-line sonarjs/void-use -- void needed to mark floating promise
+                void handlePreview(att);
+              }}
+              onDelete={() => {
+                void handleDelete(att.id, att.mimeType);
+              }}
+              onDataLoaded={handleThumbLoaded}
+            />
+          ))}
+        </div>
+      ) : null}
+
+      {/* Image lightbox */}
+      {lightboxIndex !== null && (
+        <ImageLightbox
+          open
+          onClose={() => {
+            setLightboxIndex(null);
+          }}
+          slides={lightboxSlides}
+          index={lightboxIndex}
+        />
+      )}
+
+      {/* Drop zone indicator */}
+      {dragOver ? (
+        <div className="flex items-center justify-center rounded-md border-2 border-dashed border-blue-500/40 bg-blue-500/5 py-4 text-xs text-blue-400">
+          Drop image here
+        </div>
+      ) : null}
+
+      {/* Controls */}
+      <div className="flex items-center gap-2">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/png,image/jpeg,image/gif,image/webp"
+          multiple
+          className="hidden"
+          onChange={(e) => void handleFileSelect(e.target.files)}
+        />
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1 text-xs text-[var(--color-text-muted)]"
+          disabled={uploading}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          {uploading ? <Loader2 size={12} className="animate-spin" /> : <ImagePlus size={12} />}
+          添加图片
+        </Button>
+        <span className="text-[10px] text-[var(--color-text-muted)]">也可粘贴 / 拖放</span>
+      </div>
+
+      {error ? <p className="text-xs text-red-400">{error}</p> : null}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Thumbnail sub-component
+// ---------------------------------------------------------------------------
+
+interface AttachmentThumbnailProps {
+  attachment: TaskAttachmentMeta;
+  teamName: string;
+  taskId: string;
+  isDeleting: boolean;
+  onPreview: () => void;
+  onDelete: () => void;
+  onDataLoaded?: (attachmentId: string, dataUrl: string) => void;
+}
+
+const AttachmentThumbnail = ({
+  attachment,
+  teamName,
+  taskId,
+  isDeleting,
+  onPreview,
+  onDelete,
+  onDataLoaded,
+}: AttachmentThumbnailProps): React.JSX.Element => {
+  const getTaskAttachmentData = useStore((s) => s.getTaskAttachmentData);
+  const [thumbUrl, setThumbUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        if (!isImageMimeType(attachment.mimeType)) return;
+        const base64 = await getTaskAttachmentData(
+          teamName,
+          taskId,
+          attachment.id,
+          attachment.mimeType
+        );
+        if (!cancelled && base64) {
+          const dataUrl = `data:${attachment.mimeType};base64,${base64}`;
+          setThumbUrl(dataUrl);
+          onDataLoaded?.(attachment.id, dataUrl);
+        }
+      } catch {
+        // ignore
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [teamName, taskId, attachment.id, attachment.mimeType, getTaskAttachmentData, onDataLoaded]);
+
+  const sizeLabel =
+    attachment.size < 1024
+      ? `${attachment.size} B`
+      : attachment.size < 1024 * 1024
+        ? `${(attachment.size / 1024).toFixed(0)} KB`
+        : `${(attachment.size / (1024 * 1024)).toFixed(1)} MB`;
+
+  return (
+    <div
+      className={`group relative flex size-20 cursor-pointer items-center justify-center overflow-hidden rounded border border-[var(--color-border)] bg-[var(--color-surface)] transition-colors hover:border-[var(--color-border-emphasis)]`}
+      onClick={onPreview}
+    >
+      {isImageMimeType(attachment.mimeType) ? (
+        thumbUrl ? (
+          <img src={thumbUrl} alt={attachment.filename} className="size-full object-cover" />
+        ) : (
+          <Loader2 size={16} className="animate-spin text-[var(--color-text-muted)]" />
+        )
+      ) : (
+        <div className="flex flex-col items-center gap-1 px-1 text-center">
+          <File size={18} className="text-[var(--color-text-muted)]" />
+          <div className="max-w-full truncate text-[9px] text-[var(--color-text-muted)]">
+            {attachment.filename}
+          </div>
+        </div>
+      )}
+      {/* Delete button overlay */}
+      <button
+        type="button"
+        className="absolute right-0.5 top-0.5 rounded bg-black/60 p-0.5 text-white opacity-0 transition-opacity hover:bg-red-600 group-hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete();
+        }}
+        disabled={isDeleting}
+      >
+        {isDeleting ? <Loader2 size={10} className="animate-spin" /> : <Trash2 size={10} />}
+      </button>
+      {/* Filename tooltip */}
+      <div className="absolute inset-x-0 bottom-0 truncate bg-black/60 px-1 py-0.5 text-center text-[8px] text-white opacity-0 transition-opacity group-hover:opacity-100">
+        {attachment.filename} ({sizeLabel})
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      // Strip the data URL prefix (e.g., "data:image/png;base64,")
+      const base64 = result.split(',')[1];
+      if (base64) {
+        resolve(base64);
+      } else {
+        reject(new Error('Failed to read file as base64'));
+      }
+    };
+    reader.onerror = () => reject(reader.error ?? new Error('File read failed'));
+    reader.readAsDataURL(file);
+  });
+}