@allbluecn/web-app 0.18.2 → 0.19.0

package/src/routes/_nav/tasks/-components/ai-task-detail.tsx

@@ -0,0 +1,307 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 任务详情（任务 10）：信息区（title + 状态徽章 + 创建时间 + source 链接/已删除
+// 徽章/自由指令徽章）+ instruction 全文（pre-wrap）+ 操作区（运行：running 置灰；
+// 删除：ConfirmDialog 确认，成功回 /tasks）+ 运行历史倒序（trigger 徽章 + 状态
+// 徽章 + 开始时间 + 耗时可读格式；resultSummary 用 harness MarkdownContent 渲染，
+// 默认折叠预览可展开，展开态独立于轮询——RunCard 以 run.id 为 key，state 随实例
+// 保留；error 红字）。running 时 3s 轮询：数据在路由 loader，router.invalidate()
+// 重跑 loader 拉最新状态，status 变终态或卸载即停（effect cleanup 清 interval）。
+// run 的日期字段 Date | string 双态兼容：SSR loader 直调返回 Date，客户端 RPC
+// 序列化为 ISO string，formatTimestamp 两种都安全。
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useRouter } from "@tanstack/react-router";
+import { useMutation } from "@tanstack/react-query";
+import {
+  ChevronDown,
+  ChevronUp,
+  Loader2,
+  Play,
+  Trash2,
+} from "lucide-react";
+import { ConfirmDialog } from "@/components/confirm-dialog";
+import { MarkdownContent } from "@/components/harness/ai-message/components/markdown-content";
+import { AiTaskStatusBadge } from "./ai-task-status-badge";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { formatTimestamp } from "@/lib/datetime";
+import { cn } from "@/lib/utils";
+import { toastError } from "@/lib/toast-error";
+import { m } from "@/paraglide/messages.js";
+import {
+  deleteAiTaskFn,
+  runAiTaskFn,
+} from "@/server/serverFns/tasks/task-crud";
+
+/** task 详情投影（task-queries.ts getAiTaskFn 返回的字段子集，Date 已是 ISO string） */
+export interface AiTaskDetailTask {
+  id: string;
+  title: string;
+  instruction: string;
+  status: string;
+  sourceType: string | null;
+  sourceId: string | null;
+  /** 关联项目名（自由指令未关联或项目 SetNull 后为 null，信息区行不展示） */
+  projectName: string | null;
+  runCount: number;
+  lastRunAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/** run 投影：日期字段 Date | string 双态兼容（SSR 直调 = Date，客户端 RPC = ISO string） */
+export interface AiTaskDetailRun {
+  id: string;
+  trigger: string;
+  status: string;
+  resultSummary: string | null;
+  error: string | null;
+  startedAt: string | Date;
+  finishedAt: string | Date | null;
+  durationMs: number | null;
+}
+
+/** sourceType → 源路由（与 assigned-query.ts 的 href 拼接口径一致） */
+const SOURCE_HREF: Record<string, (id: string) => string> = {
+  story: (id) => `/stories/${id}`,
+  bug: (id) => `/bugs/${id}`,
+  testcase: (id) => `/test-cases/${id}`,
+};
+
+/** trigger → 徽章文案 */
+const TRIGGER_LABEL: Record<string, () => string> = {
+  manual: m.tasks_trigger_manual,
+  schedule: m.tasks_trigger_schedule,
+};
+
+/** 耗时可读格式：<1s 毫秒、<1min 一位小数秒、其余分秒组合 */
+function formatDuration(durationMs: number | null): string {
+  if (durationMs == null) return "-";
+  if (durationMs < 1000) return `${durationMs}ms`;
+  if (durationMs < 60_000) return `${(durationMs / 1000).toFixed(1)}s`;
+  const totalSec = Math.floor(durationMs / 1000);
+  return `${Math.floor(totalSec / 60)}m ${totalSec % 60}s`;
+}
+
+export function AiTaskDetail({
+  task,
+  runs,
+  sourceExists,
+}: {
+  task: AiTaskDetailTask;
+  runs: AiTaskDetailRun[];
+  sourceExists: boolean | null;
+}) {
+  const router = useRouter();
+  const navigate = useNavigate();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  // running 时 3s 轮询：依赖 task.status，轮询拉回终态后本 effect 重跑不再建
+  // interval；unmount 时 cleanup 清除
+  useEffect(() => {
+    if (task.status !== "running") return;
+    const timer = setInterval(() => {
+      void router.invalidate();
+    }, 3000);
+    return () => clearInterval(timer);
+  }, [task.status, router]);
+
+  const runMutation = useMutation({
+    mutationFn: () => runAiTaskFn({ data: { id: task.id } }),
+    onSuccess: () => {
+      void router.invalidate();
+    },
+    onError: (e) => toastError(e, m.tasks_operation_failed()),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteAiTaskFn({ data: { id: task.id } }),
+    onSuccess: () => {
+      void navigate({ to: "/tasks" });
+    },
+    onError: (e) => toastError(e, m.tasks_operation_failed()),
+  });
+
+  const running = task.status === "running";
+  const sourceHref =
+    task.sourceType && task.sourceId
+      ? SOURCE_HREF[task.sourceType]?.(task.sourceId)
+      : undefined;
+
+  return (
+    <div className="mx-auto flex h-full w-full max-w-5xl flex-col gap-4 p-4">
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <h1 className="truncate text-xl font-semibold">{task.title}</h1>
+          <AiTaskStatusBadge status={task.status} />
+        </div>
+        <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+          <span>
+            {m.tasks_detail_created()}
+            {": "}
+            {formatTimestamp(task.createdAt)}
+          </span>
+          {task.projectName ? (
+            <span>
+              {m.tasks_detail_project()}
+              {": "}
+              {task.projectName}
+            </span>
+          ) : null}
+          {sourceExists === false ? (
+            <Badge variant="outline" className="text-destructive">
+              {m.tasks_source_deleted()}
+            </Badge>
+          ) : sourceHref ? (
+            <Link
+              to={sourceHref}
+              className="text-primary hover:underline"
+            >
+              {m.tasks_view_source()}
+            </Link>
+          ) : (
+            <Badge variant="outline">{m.tasks_source_free()}</Badge>
+          )}
+        </div>
+      </div>
+
+      <section className="flex flex-col gap-1.5">
+        <h2 className="text-sm font-semibold">{m.tasks_detail_instruction()}</h2>
+        <p className="whitespace-pre-wrap rounded-lg border bg-card p-3 text-sm">
+          {task.instruction}
+        </p>
+      </section>
+
+      <div className="flex items-center gap-2">
+        <Button
+          size="sm"
+          disabled={running || runMutation.isPending}
+          onClick={() => runMutation.mutate()}
+        >
+          {runMutation.isPending ? (
+            <Loader2 className="animate-spin" data-icon="inline-start" />
+          ) : (
+            <Play data-icon="inline-start" />
+          )}
+          {m.tasks_run()}
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={running || deleteMutation.isPending}
+          onClick={() => setConfirmOpen(true)}
+        >
+          <Trash2 data-icon="inline-start" />
+          {m.tasks_delete()}
+        </Button>
+      </div>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-sm font-semibold">
+          {m.tasks_detail_history()}
+          <span className="ml-1.5 font-normal text-muted-foreground">
+            {runs.length}
+          </span>
+        </h2>
+        {runs.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {m.tasks_detail_no_runs()}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {runs.map((run) => (
+              <RunCard key={run.id} run={run} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <ConfirmDialog
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        title={m.tasks_delete_confirm_title()}
+        description={m.tasks_delete_confirm_description()}
+        cancelLabel={m.common_cancel()}
+        confirmLabel={m.tasks_delete()}
+        confirmVariant="destructive"
+        confirmDisabled={deleteMutation.isPending}
+        onConfirm={() => deleteMutation.mutate()}
+      />
+    </div>
+  );
+}
+
+/** 单条运行记录：展开/折叠 state 挂在本组件（key=run.id），轮询重渲染不重置 */
+function RunCard({ run }: { run: AiTaskDetailRun }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasResult = Boolean(run.resultSummary);
+  const triggerLabel = TRIGGER_LABEL[run.trigger]?.() ?? run.trigger;
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg border bg-card p-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge variant="outline">{triggerLabel}</Badge>
+        <AiTaskStatusBadge status={run.status} />
+        <span className="text-xs text-muted-foreground">
+          {formatTimestamp(run.startedAt)}
+        </span>
+        <span className="ml-auto text-xs text-muted-foreground">
+          {m.tasks_detail_duration()}
+          {": "}
+          {formatDuration(run.durationMs)}
+        </span>
+      </div>
+      {run.error ? (
+        <div className="flex flex-col gap-1">
+          <span className="text-xs font-medium text-destructive">
+            {m.tasks_detail_error()}
+          </span>
+          <p className="whitespace-pre-wrap text-xs text-destructive">
+            {run.error}
+          </p>
+        </div>
+      ) : null}
+      {hasResult ? (
+        <div className="flex flex-col gap-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            {m.tasks_detail_result()}
+          </span>
+          <div className={cn("relative", !expanded && "max-h-40 overflow-hidden")}>
+            <MarkdownContent content={run.resultSummary ?? ""} />
+            {!expanded ? (
+              <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-card to-transparent" />
+            ) : null}
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="self-start text-muted-foreground"
+            onClick={() => setExpanded((v) => !v)}
+          >
+            {expanded ? (
+              <ChevronUp data-icon="inline-start" />
+            ) : (
+              <ChevronDown data-icon="inline-start" />
+            )}
+            {expanded ? m.tasks_detail_collapse() : m.tasks_detail_expand()}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/routes/_nav/tasks/-components/ai-task-list.tsx

@@ -0,0 +1,217 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// AI 任务列表（任务 9 / 最终审查修复）：卡片 = title（Link 跳详情，规格 §3.3 行
+// 操作「详情」入口）+ 状态徽章 + runCount + lastRunAt + source 徽章（源型任务才有）；
+// 行操作「运行」（runAiTaskFn，pending 期间按钮 loading，失败 toast serverFn 错误
+// 原文如「任务正在运行」）/「删除」（ConfirmDialog 确认 → deleteAiTaskFn）。列表数据
+// 来自路由 beforeLoad（非 react-query 缓存），变更后统一 router.invalidate() 重跑
+// loader 刷新（projects 设置页先例）。空态提供新建入口。
+import { useState } from "react";
+import { Link, useRouter } from "@tanstack/react-router";
+import { useMutation } from "@tanstack/react-query";
+import { Loader2, Play, Plus, Trash2 } from "lucide-react";
+import { ConfirmDialog } from "@/components/confirm-dialog";
+import { AiTaskStatusBadge } from "./ai-task-status-badge";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { formatTimestamp } from "@/lib/datetime";
+import { toastError } from "@/lib/toast-error";
+import { m } from "@/paraglide/messages.js";
+import {
+  deleteAiTaskFn,
+  runAiTaskFn,
+} from "@/server/serverFns/tasks/task-crud";
+
+/** 列表项投影（与 task-queries.ts listAiTasksFn 返回形状对齐；instruction 供
+ *  useTaskFilter 指令搜索——任务 47 纯函数按字段存在性自适应） */
+export interface AiTaskListItem {
+  id: string;
+  title: string;
+  instruction?: string | null;
+  status: string;
+  runCount: number;
+  lastRunAt: string | null;
+  sourceType: string | null;
+  sourceId: string | null;
+  updatedAt: string;
+}
+
+/** sourceType → 徽章文案（与分配列表组标题共用 key） */
+const SOURCE_LABEL: Record<string, () => string> = {
+  story: m.tasks_group_story,
+  bug: m.tasks_group_bug,
+  testcase: m.tasks_group_testcase,
+};
+
+/** 详情路由拼接（返回类型标注 string 拓宽模板字面量，同 ai-task-detail.tsx SOURCE_HREF 先例） */
+const taskDetailHref = (id: string): string => `/tasks/${id}`;
+
+export function AiTaskList({
+  items,
+  onRequestCreate,
+  createDisabled,
+  runDisabled,
+  searching = false,
+}: {
+  items: AiTaskListItem[];
+  onRequestCreate: () => void;
+  createDisabled?: boolean;
+  /** 桌面端降级（sqlite 无 aiTask 表）时禁用「运行」——runAiTaskFn 首行 guard 必拒，防必然报错的点击 */
+  runDisabled?: boolean;
+  /** 有搜索词时空态显示「无匹配任务」（不带新建入口）而非「暂无 AI 任务」 */
+  searching?: boolean;
+}) {
+  const router = useRouter();
+  const [deleteTarget, setDeleteTarget] = useState<AiTaskListItem | null>(null);
+
+  const runMutation = useMutation({
+    mutationFn: (id: string) => runAiTaskFn({ data: { id } }),
+    onSuccess: () => {
+      void router.invalidate();
+    },
+    onError: (e) => toastError(e, m.tasks_operation_failed()),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteAiTaskFn({ data: { id } }),
+    onSuccess: () => {
+      setDeleteTarget(null);
+      void router.invalidate();
+    },
+    onError: (e) => toastError(e, m.tasks_operation_failed()),
+  });
+
+  if (items.length === 0) {
+    // 搜索无命中与真·无数据区分：无命中不带新建入口（新建不改变「搜索词无匹配」事实）
+    if (searching) {
+      return (
+        <div className="flex h-40 items-center justify-center rounded-lg border border-dashed border-border">
+          <p className="text-sm text-muted-foreground">{m.tasks_empty_search()}</p>
+        </div>
+      );
+    }
+    return (
+      <div className="flex h-40 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border">
+        <p className="text-sm text-muted-foreground">{m.tasks_empty_ai()}</p>
+        <Button size="sm" onClick={onRequestCreate} disabled={createDisabled}>
+          <Plus data-icon="inline-start" />
+          {m.tasks_create_new()}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        {items.map((item) => {
+          const running = runMutation.isPending && runMutation.variables === item.id;
+          return (
+            <div
+              key={item.id}
+              className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3"
+            >
+              <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+                <div className="flex items-center gap-2">
+                  <Link
+                    to={taskDetailHref(item.id)}
+                    className="truncate text-sm font-medium hover:underline"
+                  >
+                    {item.title}
+                  </Link>
+                  <AiTaskStatusBadge status={item.status} />
+                  {item.sourceType && SOURCE_LABEL[item.sourceType] ? (
+                    <Badge variant="outline">{SOURCE_LABEL[item.sourceType]()}</Badge>
+                  ) : null}
+                </div>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <span>{m.tasks_run_count({ count: item.runCount })}</span>
+                  {item.lastRunAt ? (
+                    <span>{formatTimestamp(item.lastRunAt)}</span>
+                  ) : null}
+                </div>
+              </div>
+              <div className="flex shrink-0 items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  disabled={running || runDisabled}
+                  onClick={() => runMutation.mutate(item.id)}
+                >
+                  {running ? (
+                    <Loader2 className="animate-spin" data-icon="inline-start" />
+                  ) : (
+                    <Play data-icon="inline-start" />
+                  )}
+                  {m.tasks_run()}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="text-muted-foreground"
+                  aria-label={m.tasks_delete()}
+                  disabled={item.status === "running"}
+                  onClick={() => setDeleteTarget(item)}
+                >
+                  <Trash2 />
+                </Button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <DeleteConfirm
+        target={deleteTarget}
+        pending={deleteMutation.isPending}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+        onConfirm={() => {
+          if (deleteTarget) deleteMutation.mutate(deleteTarget.id);
+        }}
+      />
+    </>
+  );
+}
+
+/** 删除确认弹窗：受控挂载，target 为 null 即关闭（空态也挂载以防状态残留） */
+function DeleteConfirm({
+  target,
+  pending,
+  onOpenChange,
+  onConfirm,
+}: {
+  target: AiTaskListItem | null;
+  pending: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <ConfirmDialog
+      open={target !== null}
+      onOpenChange={onOpenChange}
+      title={m.tasks_delete_confirm_title()}
+      description={m.tasks_delete_confirm_description()}
+      cancelLabel={m.common_cancel()}
+      confirmLabel={m.tasks_delete()}
+      confirmVariant="destructive"
+      confirmDisabled={pending}
+      onConfirm={onConfirm}
+    />
+  );
+}

package/src/routes/_nav/tasks/-components/ai-task-status-badge.tsx

@@ -0,0 +1,46 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// AI 任务状态徽章（任务 9 / 四期任务 46 对齐）：色板与图标迁 task-constants
+// 单一来源（三表 LABEL/COLOR/ICON，/15 公式 + §6.2 图标族）；running 图标
+// 保留旋转；未知状态（脏数据）回落中性徽章并直显原始值。
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import {
+  TASK_STATUS_COLOR,
+  TASK_STATUS_ICON,
+  TASK_STATUS_LABEL,
+  TASK_STATUS_SPINNING,
+  type AiTaskStatus,
+} from "./task-constants";
+
+export function AiTaskStatusBadge({ status }: { status: string }) {
+  const label = TASK_STATUS_LABEL[status as AiTaskStatus];
+  const color = TASK_STATUS_COLOR[status as AiTaskStatus];
+  if (!label || !color) {
+    return <Badge variant="secondary">{status}</Badge>;
+  }
+  const Icon = TASK_STATUS_ICON[status as AiTaskStatus];
+  return (
+    <Badge variant="secondary" className={cn(color)}>
+      {Icon ? (
+        <Icon aria-hidden className={cn(TASK_STATUS_SPINNING[status as AiTaskStatus] && "animate-spin")} />
+      ) : null}
+      {label()}
+    </Badge>
+  );
+}