@yancyyu/openhermit 1.6.28 → 1.6.29

package/src/renderer/components/settings/sections/TaskBusSection.tsx

@@ -202,7 +202,9 @@ export function TaskBusSection(): React.JSX.Element {
   const [connected, setConnected] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
 
-  const [telemetryEnabled, setTelemetryEnabled] = useState(false);
+  const [collectionEnabled, setCollectionEnabled] = useState(false);
+  const [uploadEnabled, setUploadEnabled] = useState(false);
+  const [collaborationEnabled, setCollaborationEnabled] = useState(false);
   const [telemetryPlatform, setTelemetryPlatform] = useState('claudecode');
   const [scanning, setScanning] = useState(false);
   const [telemetryStatus, setTelemetryStatus] = useState<TelemetryStatus | null>(null);
@@ -218,9 +220,11 @@ export function TaskBusSection(): React.JSX.Element {
           setPassword(data.redis.password ?? '');
         }
         if (data.telemetry) {
-          setTelemetryEnabled(data.telemetry.enabled);
+          setCollectionEnabled(data.telemetry.enabled);
+          setUploadEnabled(data.telemetry.uploadEnabled ?? false);
           setTelemetryPlatform(data.telemetry.platform ?? 'claudecode');
         }
+        setCollaborationEnabled(data.collaboration ?? false);
       })
       .catch(() => {})
       .finally(() => setLoading(false));
@@ -235,7 +239,7 @@ export function TaskBusSection(): React.JSX.Element {
       .catch(() => {});
 
     const poll = setInterval(() => {
-      if (telemetryEnabled) {
+      if (collectionEnabled) {
         fetch('/api/telemetry/status')
           .then((r) => r.json())
           .then((s: TelemetryStatus) => setTelemetryStatus(s))
@@ -243,19 +247,23 @@ export function TaskBusSection(): React.JSX.Element {
       }
     }, 30000);
     return () => clearInterval(poll);
-  }, [telemetryEnabled]);
+  }, [collectionEnabled]);
 
   const buildConfig = (
     overrides: Partial<{
       enabled: boolean;
-      telemetryEnabled: boolean;
+      collectionEnabled: boolean;
+      uploadEnabled: boolean;
+      collaborationEnabled: boolean;
       telemetryPlatform: string;
     }> = {}
   ): TaskBusConfig => ({
     enabled: overrides.enabled ?? enabled,
     redis: { host, port, password: password || undefined },
+    collaboration: overrides.collaborationEnabled ?? collaborationEnabled,
     telemetry: {
-      enabled: overrides.telemetryEnabled ?? telemetryEnabled,
+      enabled: overrides.collectionEnabled ?? collectionEnabled,
+      uploadEnabled: overrides.uploadEnabled ?? uploadEnabled,
       platform: (overrides.telemetryPlatform ?? telemetryPlatform) as 'claudecode',
     },
   });
@@ -296,45 +304,58 @@ export function TaskBusSection(): React.JSX.Element {
       .catch(() => setMessage('操作失败'));
   };
 
-  const toggleTelemetry = async (value: boolean) => {
+  const toggleCollection = async (value: boolean) => {
+    setCollectionEnabled(value);
+    const config = buildConfig({ collectionEnabled: value });
+    try {
+      await fetch('/api/settings/task-bus', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config),
+      });
+      if (value) triggerScan();
+      else setTelemetryStatus(null);
+    } catch {
+      setCollectionEnabled(!value);
+      setMessage('操作失败');
+    }
+  };
+
+  const toggleUpload = async (value: boolean) => {
     if (!value) {
-      setTelemetryEnabled(false);
-      const config = buildConfig({ telemetryEnabled: false });
+      setUploadEnabled(false);
+      const config = buildConfig({ uploadEnabled: false });
       fetch('/api/settings/task-bus', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(config),
       }).catch(() => setMessage('操作失败'));
-      setTelemetryStatus(null);
       return;
     }
 
-    // Optimistic update: toggle on immediately
-    setTelemetryEnabled(true);
-
-    // Test Redis if not already connected
+    // Upload requires Redis
     let redisReady = connected;
     if (!redisReady) {
       setMessage('正在测试 Redis 连接...');
       redisReady = await testRedisConnection();
       if (!redisReady) {
-        setTelemetryEnabled(false);
+        setUploadEnabled(false);
         setMessage('Redis 连接失败，无法启用数据上报');
         return;
       }
     }
 
+    setUploadEnabled(true);
     setMessage(null);
-    const config = buildConfig({ telemetryEnabled: true });
+    const config = buildConfig({ uploadEnabled: true });
     try {
       await fetch('/api/settings/task-bus', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(config),
       });
-      triggerScan();
     } catch {
-      setTelemetryEnabled(false);
+      setUploadEnabled(false);
       setMessage('操作失败');
     }
   };
@@ -349,7 +370,7 @@ export function TaskBusSection(): React.JSX.Element {
           setTelemetryStatus(result);
         }
       })
-      .catch(() => setMessage('采集失败，请检查 Redis 连接'))
+      .catch(() => setMessage('采集失败，请检查本地 Claude Code 会话目录'))
       .finally(() => setScanning(false));
   };
 
@@ -362,6 +383,18 @@ export function TaskBusSection(): React.JSX.Element {
     }).catch(() => {});
   };
 
+  const toggleCollaboration = (value: boolean) => {
+    setCollaborationEnabled(value);
+    const config = buildConfig({ collaborationEnabled: value });
+    fetch('/api/settings/task-bus', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(config),
+    })
+      .then(() => setMessage(value ? '已开启分布式团队协作' : '已关闭分布式团队协作'))
+      .catch(() => setMessage('操作失败'));
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -372,11 +405,65 @@ export function TaskBusSection(): React.JSX.Element {
 
   return (
     <div>
+      <SettingsSectionHeader title="本地数据采集" icon={<BarChart3 size={12} />} />
+
+      <SettingRow
+        label="数据采集"
+        description="扫描本机 ~/.claude/projects 会话文件，采集使用指标；不需要 Redis，也不会上传对话内容"
+      >
+        <div className="flex items-center gap-2">
+          <select
+            value={telemetryPlatform}
+            onChange={(e) => {
+              const nextPlatform = e.target.value;
+              setTelemetryPlatform(nextPlatform);
+              saveTelemetryPlatform(nextPlatform);
+            }}
+            className="rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-2 py-1 text-xs outline-none focus:border-indigo-500/50"
+          >
+            <option value="claudecode">Claude Code</option>
+          </select>
+          <SettingsToggle
+            enabled={collectionEnabled}
+            onChange={(value) => void toggleCollection(value)}
+          />
+        </div>
+      </SettingRow>
+
+      {collectionEnabled && (
+        <>
+          <div
+            className="flex items-center gap-3 border-b py-3"
+            style={{ borderColor: 'var(--color-border-subtle)' }}
+          >
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={triggerScan}
+              disabled={scanning}
+              className="gap-1.5"
+            >
+              {scanning ? <Loader2 size={12} className="animate-spin" /> : <BarChart3 size={12} />}
+              {scanning ? '采集中...' : '立即采集'}
+            </Button>
+            <span className="text-[10px] text-[var(--color-text-muted)]">
+              本地扫描，不依赖团队总线或 Redis。
+            </span>
+          </div>
+
+          {telemetryStatus && (
+            <div className="py-3">
+              <UsageDashboard status={telemetryStatus} />
+            </div>
+          )}
+        </>
+      )}
+
       <SettingsSectionHeader title="团队总线" icon={<Radio size={12} />} />
 
       <SettingRow
         label="启用团队总线"
-        description="开启后自动为所有团队注入跨团队协作指令到 CLAUDE.md"
+        description="用于 Redis 连接、数据上报和跨团队协作；本地数据采集不依赖它"
       >
         <SettingsToggle enabled={enabled} onChange={toggle} />
       </SettingRow>
@@ -388,7 +475,9 @@ export function TaskBusSection(): React.JSX.Element {
             <div className="flex items-center gap-2 px-1 pb-2">
               <span className="text-sm font-medium text-red-500">*</span>
               <span className="text-sm font-medium">Redis</span>
-              <span className="text-xs text-[var(--color-text-muted)]">（数据上报必填）</span>
+              <span className="text-xs text-[var(--color-text-muted)]">
+                （上报和跨团队协作必填）
+              </span>
               <div className="ml-auto flex items-center gap-2">
                 {connected ? (
                   <span className="flex items-center gap-1 text-xs text-emerald-500">
@@ -465,78 +554,39 @@ export function TaskBusSection(): React.JSX.Element {
             </div>
           </div>
 
-          {/* 数据采集 - 不依赖 Redis */}
-          <div style={{ borderColor: 'var(--color-border-subtle)' }}>
-            <SettingRow
-              label="数据采集"
-              description="扫描本地 ~/.claude/projects 会话文件，采集使用指标（会话、消息、Token、工作时长）"
-            >
-              <div className="flex items-center gap-2">
-                <select
-                  value={telemetryPlatform}
-                  onChange={(e) => {
-                    const nextPlatform = e.target.value;
-                    setTelemetryPlatform(nextPlatform);
-                    saveTelemetryPlatform(nextPlatform);
-                  }}
-                  className="rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-2 py-1 text-xs outline-none focus:border-indigo-500/50"
-                >
-                  <option value="claudecode">Claude Code</option>
-                </select>
-                <SettingsToggle
-                  enabled={telemetryEnabled}
-                  onChange={(value) => void toggleTelemetry(value)}
-                />
-              </div>
+          {/* 数据上报 - 依赖 Redis，最下面 */}
+          <div>
+            <SettingRow label="数据上报" description="将采集数据上报到 Redis，供团队看板使用">
+              <SettingsToggle
+                enabled={uploadEnabled}
+                onChange={(value) => void toggleUpload(value)}
+              />
             </SettingRow>
 
-            {telemetryEnabled && (
-              <>
-                <div className="flex items-center gap-3 border-b py-3" style={{ borderColor: 'var(--color-border-subtle)' }}>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={triggerScan}
-                    disabled={scanning}
-                    className="gap-1.5"
-                  >
-                    {scanning ? (
-                      <Loader2 size={12} className="animate-spin" />
-                    ) : (
-                      <BarChart3 size={12} />
-                    )}
-                    {scanning ? '采集中...' : '立即采集'}
-                  </Button>
-                  <span className="text-[10px] text-[var(--color-text-muted)]">
-                    扫描本地 ~/.claude/projects 下的会话文件
-                  </span>
-                </div>
-
-                {telemetryStatus && (
-                  <div className="py-3">
-                    <UsageDashboard status={telemetryStatus} />
-                  </div>
-                )}
-              </>
+            {!connected && (
+              <div className="flex items-center gap-2 px-1 py-2 text-xs text-amber-500">
+                <AlertCircle size={12} />
+                <span>数据上报需要 Redis；请先配置并测试 Redis 连接。</span>
+              </div>
             )}
           </div>
 
-          {/* 数据上报 - 依赖 Redis，最下面 */}
+          {/* 分布式团队协作 - 最下面 */}
           <div>
             <SettingRow
-              label="数据上报"
-              description="将采集数据上报到 Redis，供团队看板使用"
+              label="分布式团队协作"
+              description="开启后 Hermit 平台识别 @团队 并创建跨团队协作任务；Agent 只读取团队列表，不直接派发"
             >
               <SettingsToggle
-                enabled={telemetryEnabled && connected}
-                onChange={(value) => void toggleTelemetry(value)}
+                enabled={collaborationEnabled}
+                onChange={(value) => void toggleCollaboration(value)}
               />
             </SettingRow>
 
-            {!connected && (
+            {!connected && collaborationEnabled && (
               <div className="flex items-center gap-2 px-1 py-2 text-xs text-amber-500">
                 <AlertCircle size={12} />
-                <span>数据上报需要 Redis；请先配置并测试 Redis 连接。</span>
+                <span>跨团队协作需要 Redis 连接。</span>
               </div>
             )}
           </div>

package/src/renderer/components/tasks/TasksView.tsx

@@ -0,0 +1,343 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { cn } from '@renderer/lib/utils';
+import { useStore } from '@renderer/store';
+import { deriveTaskDisplayId } from '@shared/utils/taskIdentity';
+import { Calendar, CheckCircle2, Circle, Columns3, Loader2, RefreshCw } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { SchedulesView } from '../schedules/SchedulesView';
+
+import type { GlobalTask, TeamTaskStatus } from '@shared/types';
+
+type TasksSubTab = 'overview' | 'schedules';
+type OverviewStatus = Extract<TeamTaskStatus, 'pending' | 'in_progress' | 'completed'>;
+
+const SUB_TABS: { id: TasksSubTab; label: string; icon: React.ReactNode }[] = [
+  { id: 'overview', label: '任务总览', icon: <Columns3 size={14} /> },
+  { id: 'schedules', label: '定时任务', icon: <Calendar size={14} /> },
+];
+
+const COLUMNS: {
+  id: OverviewStatus;
+  title: string;
+  icon: React.ReactNode;
+  headerBg: string;
+  bodyBg: string;
+}[] = [
+  {
+    id: 'pending',
+    title: 'TODO',
+    icon: <Circle size={14} className="shrink-0 text-[var(--color-text-muted)]" />,
+    headerBg: 'rgba(59, 130, 246, 0.22)',
+    bodyBg: 'rgba(59, 130, 246, 0.05)',
+  },
+  {
+    id: 'in_progress',
+    title: 'IN PROGRESS',
+    icon: <Loader2 size={14} className="shrink-0 text-[var(--color-text-muted)]" />,
+    headerBg: 'rgba(234, 179, 8, 0.24)',
+    bodyBg: 'rgba(234, 179, 8, 0.06)',
+  },
+  {
+    id: 'completed',
+    title: 'DONE',
+    icon: <CheckCircle2 size={14} className="shrink-0 text-[var(--color-text-muted)]" />,
+    headerBg: 'rgba(34, 197, 94, 0.22)',
+    bodyBg: 'rgba(34, 197, 94, 0.05)',
+  },
+];
+
+function isOverviewStatus(status: TeamTaskStatus): status is OverviewStatus {
+  return status === 'pending' || status === 'in_progress' || status === 'completed';
+}
+
+function getTaskUpdatedAt(task: GlobalTask): number {
+  const raw = task.updatedAt ?? task.createdAt;
+  const time = raw ? new Date(raw).getTime() : 0;
+  return Number.isFinite(time) ? time : 0;
+}
+
+function buildOptionLabel(value: string | null | undefined, fallback: string): string {
+  const trimmed = value?.trim();
+  return trimmed && trimmed.length > 0 ? trimmed : fallback;
+}
+
+export const TasksView = (): React.JSX.Element => {
+  const [activeTab, setActiveTab] = useState<TasksSubTab>('overview');
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center border-b border-[var(--color-border)] px-4 pt-2">
+        {SUB_TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={cn(
+              'flex items-center gap-1.5 border-b-2 px-4 pb-2 text-sm font-medium transition-colors',
+              activeTab === tab.id
+                ? 'border-[var(--color-primary)] text-[var(--color-text)]'
+                : 'border-transparent text-[var(--color-text-muted)] hover:text-[var(--color-text)]'
+            )}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="flex-1 overflow-auto">
+        {activeTab === 'overview' && <TaskOverviewPool />}
+        {activeTab === 'schedules' && <SchedulesView />}
+      </div>
+    </div>
+  );
+};
+
+const TaskOverviewPool = (): React.JSX.Element => {
+  const {
+    globalTasks,
+    globalTasksLoading,
+    globalTasksInitialized,
+    fetchAllTasks,
+    openGlobalTaskDetail,
+  } = useStore(
+    useShallow((s) => ({
+      globalTasks: s.globalTasks,
+      globalTasksLoading: s.globalTasksLoading,
+      globalTasksInitialized: s.globalTasksInitialized,
+      fetchAllTasks: s.fetchAllTasks,
+      openGlobalTaskDetail: s.openGlobalTaskDetail,
+    }))
+  );
+  const [teamFilter, setTeamFilter] = useState('all');
+  const [statusFilter, setStatusFilter] = useState<'all' | OverviewStatus>('all');
+  const [ownerFilter, setOwnerFilter] = useState('all');
+
+  useEffect(() => {
+    void fetchAllTasks();
+  }, [fetchAllTasks]);
+
+  const overviewTasks = useMemo(
+    () => globalTasks.filter((task) => isOverviewStatus(task.status) && !task.teamDeleted),
+    [globalTasks]
+  );
+
+  const teamOptions = useMemo(
+    () =>
+      Array.from(
+        new Map(overviewTasks.map((task) => [task.teamName, task.teamDisplayName])).entries()
+      ).sort((a, b) => a[1].localeCompare(b[1])),
+    [overviewTasks]
+  );
+
+  const ownerOptions = useMemo(() => {
+    const owners = new Set<string>();
+    for (const task of overviewTasks) {
+      if (task.owner?.trim()) owners.add(task.owner.trim());
+    }
+    return Array.from(owners).sort((a, b) => a.localeCompare(b));
+  }, [overviewTasks]);
+
+  const filteredTasks = useMemo(
+    () =>
+      overviewTasks
+        .filter((task) => teamFilter === 'all' || task.teamName === teamFilter)
+        .filter((task) => statusFilter === 'all' || task.status === statusFilter)
+        .filter((task) => ownerFilter === 'all' || task.owner === ownerFilter)
+        .sort((a, b) => getTaskUpdatedAt(b) - getTaskUpdatedAt(a)),
+    [overviewTasks, ownerFilter, statusFilter, teamFilter]
+  );
+
+  const grouped = useMemo(() => {
+    const map = new Map<OverviewStatus, GlobalTask[]>();
+    for (const column of COLUMNS) {
+      map.set(column.id, []);
+    }
+    for (const task of filteredTasks) {
+      if (isOverviewStatus(task.status)) {
+        map.get(task.status)?.push(task);
+      }
+    }
+    return map;
+  }, [filteredTasks]);
+
+  const clearFilters = useCallback(() => {
+    setTeamFilter('all');
+    setStatusFilter('all');
+    setOwnerFilter('all');
+  }, []);
+
+  if (globalTasksLoading && !globalTasksInitialized) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-[var(--color-text-muted)]">
+        加载团队任务…
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full min-w-0 flex-col gap-3 p-4">
+      <div className="flex flex-wrap items-end gap-2">
+        <div className="min-w-[180px]">
+          <label
+            htmlFor="tasks-overview-team-filter"
+            className="mb-1 block text-[11px] font-medium text-[var(--color-text-muted)]"
+          >
+            团队
+          </label>
+          <select
+            id="tasks-overview-team-filter"
+            value={teamFilter}
+            onChange={(event) => setTeamFilter(event.target.value)}
+            className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
+          >
+            <option value="all">全部团队</option>
+            {teamOptions.map(([teamName, displayName]) => (
+              <option key={teamName} value={teamName}>
+                {displayName}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="min-w-[160px]">
+          <label
+            htmlFor="tasks-overview-status-filter"
+            className="mb-1 block text-[11px] font-medium text-[var(--color-text-muted)]"
+          >
+            状态
+          </label>
+          <select
+            id="tasks-overview-status-filter"
+            value={statusFilter}
+            onChange={(event) => setStatusFilter(event.target.value as 'all' | OverviewStatus)}
+            className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
+          >
+            <option value="all">全部状态</option>
+            <option value="pending">TODO</option>
+            <option value="in_progress">IN PROGRESS</option>
+            <option value="completed">DONE</option>
+          </select>
+        </div>
+
+        <div className="min-w-[160px]">
+          <label
+            htmlFor="tasks-overview-owner-filter"
+            className="mb-1 block text-[11px] font-medium text-[var(--color-text-muted)]"
+          >
+            负责人
+          </label>
+          <select
+            id="tasks-overview-owner-filter"
+            value={ownerFilter}
+            onChange={(event) => setOwnerFilter(event.target.value)}
+            className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
+          >
+            <option value="all">全部负责人</option>
+            {ownerOptions.map((owner) => (
+              <option key={owner} value={owner}>
+                {owner}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <Button variant="outline" size="sm" className="h-8 gap-1.5 text-xs" onClick={clearFilters}>
+          清空筛选
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="ml-auto h-8 gap-1.5 text-xs text-[var(--color-text-muted)]"
+          onClick={() => void fetchAllTasks()}
+        >
+          <RefreshCw size={12} />
+          刷新
+        </Button>
+      </div>
+
+      <div className="w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden pb-6">
+        <div className="grid min-w-[900px] grid-cols-3 items-start gap-3">
+          {COLUMNS.map((column) => {
+            const tasks = grouped.get(column.id) ?? [];
+            return (
+              <section
+                key={column.id}
+                className="relative rounded-md"
+                style={{ backgroundColor: column.bodyBg }}
+              >
+                {tasks.length > 0 ? (
+                  <span className="absolute -right-2 -top-2 z-10 min-w-5 rounded-full bg-[var(--color-surface-raised)] px-1.5 py-0 text-center text-[10px] font-medium leading-5 text-[var(--color-text-secondary)] ring-1 ring-[var(--color-border)]">
+                    {tasks.length}
+                  </span>
+                ) : null}
+                <header
+                  className="rounded-t-md px-3 py-2"
+                  style={{ backgroundColor: column.headerBg }}
+                >
+                  <h4 className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text)]">
+                    {column.icon}
+                    {column.title}
+                  </h4>
+                </header>
+                <div className="flex flex-col gap-1.5 p-2">
+                  {tasks.length === 0 ? (
+                    <div className="rounded-md border border-dashed border-[var(--color-border)] p-3 text-xs text-[var(--color-text-muted)]">
+                      No tasks
+                    </div>
+                  ) : (
+                    tasks.map((task) => (
+                      <GlobalOverviewTaskCard
+                        key={`${task.teamName}:${task.id}`}
+                        task={task}
+                        onOpen={() => openGlobalTaskDetail(task.teamName, task.id)}
+                      />
+                    ))
+                  )}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const GlobalOverviewTaskCard = ({
+  task,
+  onOpen,
+}: {
+  task: GlobalTask;
+  onOpen: () => void;
+}): React.JSX.Element => {
+  const ownerLabel = buildOptionLabel(task.owner, '未分配');
+  const dispatchFrom = task.dispatchMeta?.originTeam;
+  const dispatchTo = task.dispatchMeta?.targetTeam;
+  return (
+    <button
+      type="button"
+      className="relative w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] px-1.5 py-3 text-left text-xs transition-colors hover:border-[var(--color-border-emphasis)]"
+      onClick={onOpen}
+    >
+      <span className="absolute left-[3px] top-[2px] text-[9px] leading-none text-[var(--color-text-muted)]">
+        #{task.displayId ?? deriveTaskDisplayId(task.id)}
+      </span>
+      <div className="mb-2 pt-[11px]">
+        <h5 className="line-clamp-2 text-xs font-medium text-[var(--color-text)]">
+          {task.subject}
+        </h5>
+        {task.dispatchMeta ? (
+          <span className="mt-1 inline-flex items-center rounded-full bg-yellow-500/15 px-1.5 py-0.5 text-[10px] font-medium text-yellow-600 dark:text-yellow-400">
+            {dispatchFrom} 给 {dispatchTo} 派单
+          </span>
+        ) : null}
+      </div>
+      <div className="flex flex-wrap items-center gap-1.5 text-[10px] text-[var(--color-text-muted)]">
+        <span className="rounded bg-white/5 px-1.5 py-0.5">{task.teamDisplayName}</span>
+        <span className="rounded bg-white/5 px-1.5 py-0.5">{ownerLabel}</span>
+      </div>
+    </button>
+  );
+};