Merge PR #102: feat: 支持漏洞关联多条流量证据

冲突解决:
- db/schema.sql: 复测表(#103)与流量证据表(#102)均为追加,两者保留
- server/server.go: 启动序列同时保留 seedFindingRetester 与 evidence GC
- web/src/lib/types.ts: InterceptAudit/InterceptDetail(#101) 与流量证据类型(#102)并存
- findings/detail/page.tsx: 去掉 #103 带入的重复 import,仅保留 FindingRetestPanel
- chat/page.tsx: 保留 #103 的 Spinner import

web/src/app/(auth)/login/page.tsx

@@ -19,11 +19,16 @@ export default function LoginPage() {
 
   useEffect(() => {
     // 已登录直接进主界面（静态导出下无 middleware 代劳这层跳转）。
-    if (auth.getToken()) {
-      router.replace("/function/tasks");
+    const token = auth.getToken();
+    if (token) {
+      // localStorage 可能仍有凭据但 cookie 已丢失。先同步，再发起全新请求，
+      // 避免服务端守卫或路由缓存把跳转送回仍处于 checking 状态的登录页。
+      auth.setToken(token);
+      window.location.replace("/function/tasks");
       return;
     }
-    api.authStatus()
+    api
+      .authStatus()
       .then(({ initialized }) => {
         if (!initialized) router.replace("/setup");
       })
@@ -38,7 +43,7 @@ export default function LoginPage() {
     try {
       const { token } = await api.login("ARTEX", password);
       auth.setToken(token);
-      router.replace("/function/tasks");
+      window.location.replace("/function/tasks");
     } catch {
       setError("用户名或密码错误");
     } finally {
@@ -46,7 +51,13 @@ export default function LoginPage() {
     }
   }
 
-  if (checking) return null;
+  if (checking) {
+    return (
+      <div role="status" className="flex min-h-dvh items-center justify-center text-muted-foreground">
+        正在检查登录状态…
+      </div>
+    );
+  }
 
   return (
     <div className="flex h-dvh">
@@ -57,13 +68,7 @@ export default function LoginPage() {
           <div className="absolute size-60 rounded-full border border-primary-foreground/15" />
           <div className="absolute size-40 rounded-full border border-primary-foreground/20" />
           {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src="/logo.png"
-            alt="ARTEX"
-            width={160}
-            height={160}
-            className="relative brightness-0 invert"
-          />
+          <img src="/logo.png" alt="ARTEX" width={160} height={160} className="relative brightness-0 invert" />
         </div>
       </div>
 

web/src/app/(main)/chat/page.tsx

@@ -925,6 +925,7 @@ export default function ChatPage() {
   const [agents, setAgents] = React.useState<Agent[]>([]);
   const [profiles, setProfiles] = React.useState<LLMProfile[]>([]);
   const [convs, setConvs] = React.useState<Conversation[]>([]);
+  const [agentFilter, setAgentFilter] = React.useState<string | null>(null);
   const [selectedId, setSelectedId] = React.useState<number | null>(null);
   const [renamingId, setRenamingId] = React.useState<number | null>(null);
   const [renameText, setRenameText] = React.useState("");
@@ -1015,17 +1016,44 @@ export default function ChatPage() {
 
   const selected = React.useMemo(() => convs.find((c) => c.id === selectedId) ?? null, [convs, selectedId]);
   const agentByKey = React.useMemo(() => new Map(agents.map((agent) => [agent.key, agent])), [agents]);
+  const filteredConversations = React.useMemo(
+    () => (agentFilter === null ? convs : convs.filter((conversation) => conversation.agent_key === agentFilter)),
+    [convs, agentFilter],
+  );
   const visibleConversations = React.useMemo(
-    () => convs.slice(0, visibleConversationCount),
-    [convs, visibleConversationCount],
+    () => filteredConversations.slice(0, visibleConversationCount),
+    [filteredConversations, visibleConversationCount],
   );
   // conversation agents: custom agents + conversational built-ins (role=assistant,
   // e.g. Auto / 渗透测试). The orchestration built-ins (goals/planner/mainagent/worker)
   // are task-specific and stay hidden from the chat page.
   const chatAgents = React.useMemo(() => agents.filter((a) => !a.builtin || a.role === "assistant"), [agents]);
+  const agentFilterOptions = React.useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const conversation of convs) {
+      counts.set(conversation.agent_key, (counts.get(conversation.agent_key) ?? 0) + 1);
+    }
+    // Include historical sources even if their Agent has since been disabled or deleted.
+    const keys = new Set([...chatAgents.map((agent) => agent.key), ...counts.keys()]);
+    if (agentFilter !== null) keys.add(agentFilter);
+    return [...keys]
+      .map((key) => ({ key, name: agentByKey.get(key)?.name || key, count: counts.get(key) ?? 0 }))
+      .sort((a, b) => a.name.localeCompare(b.name, "zh-CN"));
+  }, [convs, chatAgents, agentByKey, agentFilter]);
+  const conversationCountLabel =
+    agentFilter === null ? `共 ${convs.length} 个` : `${filteredConversations.length} / ${convs.length} 个`;
+
+  function changeAgentFilter(key: string | null) {
+    setAgentFilter(key);
+    setVisibleConversationCount(CONVERSATION_LIST_PAGE);
+    setSelectedConversationIds(new Set());
+    setBulkDeleteOpen(false);
+    setRenamingId(null);
+  }
 
   const selectedConversationCount = selectedConversationIds.size;
-  const allConversationsSelected = convs.length > 0 && selectedConversationCount === convs.length;
+  const allConversationsSelected =
+    filteredConversations.length > 0 && selectedConversationCount === filteredConversations.length;
   const someConversationsSelected = selectedConversationCount > 0 && !allConversationsSelected;
   let conversationHeaderChecked: boolean | "indeterminate" = false;
   if (allConversationsSelected) conversationHeaderChecked = true;
@@ -1041,7 +1069,9 @@ export default function ChatPage() {
   }, []);
 
   function toggleAllConversations(checked: boolean) {
-    setSelectedConversationIds(checked ? new Set(convs.map((conversation) => conversation.id)) : new Set());
+    setSelectedConversationIds(
+      checked ? new Set(filteredConversations.map((conversation) => conversation.id)) : new Set(),
+    );
   }
 
   function exitSelectionMode() {
@@ -1154,16 +1184,37 @@ export default function ChatPage() {
             <Button size="sm" className="w-full" onClick={() => setSelectedId(null)}>
               <PlusIcon /> 新建对话
             </Button>
+            <Select
+              value={agentFilter === null ? "all" : `agent:${agentFilter}`}
+              onValueChange={(value) => changeAgentFilter(value === "all" ? null : value.slice(6))}
+              disabled={bulkDeleting}
+            >
+              <SelectTrigger size="sm" className="w-full min-w-0" aria-label="按 Agent 筛选对话">
+                <Bot />
+                <SelectValue placeholder="全部 Agent" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="all">全部 Agent</SelectItem>
+                  {agentFilterOptions.map((agent) => (
+                    <SelectItem key={agent.key} value={`agent:${agent.key}`}>
+                      {agent.name}（{agent.count}）
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
             {convs.length > 0 &&
               (selectionMode ? (
                 <div className="flex items-center gap-2 px-1">
                   <Checkbox
                     checked={conversationHeaderChecked}
                     onCheckedChange={(checked) => toggleAllConversations(checked === true)}
-                    aria-label="选择全部对话"
+                    aria-label="选择当前筛选的全部对话"
+                    disabled={filteredConversations.length === 0 || bulkDeleting}
                   />
                   <span className="text-muted-foreground min-w-0 flex-1 text-xs tabular-nums">
-                    {selectedConversationCount > 0 ? `已选 ${selectedConversationCount} 个` : `共 ${convs.length} 个`}
+                    {selectedConversationCount > 0 ? `已选 ${selectedConversationCount} 个` : conversationCountLabel}
                   </span>
                   {selectedConversationCount > 0 && (
                     <Button
@@ -1183,13 +1234,14 @@ export default function ChatPage() {
               ) : (
                 <div className="flex items-center gap-2 px-1">
                   <span className="text-muted-foreground min-w-0 flex-1 text-xs tabular-nums">
-                    共 {convs.length} 个
+                    {conversationCountLabel}
                   </span>
                   <Button
                     size="sm"
                     variant="ghost"
                     className="text-muted-foreground"
                     onClick={() => setSelectionMode(true)}
+                    disabled={filteredConversations.length === 0}
                   >
                     <ListChecksIcon data-icon="inline-start" />
                     多选
@@ -1197,9 +1249,17 @@ export default function ChatPage() {
                 </div>
               ))}
           </div>
-          <ScrollArea type="auto" className="min-h-0 min-w-0 flex-1 [&_[data-slot=scroll-area-viewport]>div]:block!">
+          <ScrollArea
+            key={agentFilter === null ? "all" : `agent:${agentFilter}`}
+            type="auto"
+            className="min-h-0 min-w-0 flex-1 [&_[data-slot=scroll-area-viewport]>div]:block!"
+          >
             <div className="flex min-w-0 flex-col gap-0.5 p-2">
-              {convs.length === 0 && <p className="text-muted-foreground px-2 py-6 text-center text-xs">暂无对话</p>}
+              {filteredConversations.length === 0 && (
+                <p className="text-muted-foreground px-2 py-6 text-center text-xs">
+                  {agentFilter === null ? "暂无对话" : "该 Agent 暂无对话"}
+                </p>
+              )}
               {visibleConversations.map((c) => (
                 <ConversationItem
                   key={c.id}
@@ -1220,7 +1280,7 @@ export default function ChatPage() {
                   onSelectedForDeleteChange={toggleConversationSelected}
                 />
               ))}
-              {visibleConversationCount < convs.length && (
+              {visibleConversationCount < filteredConversations.length && (
                 <Button
                   type="button"
                   variant="ghost"
@@ -1252,6 +1312,7 @@ export default function ChatPage() {
               agents={chatAgents}
               profiles={profiles}
               onStarted={(c, pending) => {
+                if (agentFilter !== null && agentFilter !== c.agent_key) changeAgentFilter(null);
                 // Insert the new conversation immediately so `selected` resolves to
                 // it on this render (switching to ChatView right away, before the
                 // async reloadConvs lands); reloadConvs then reconciles titles etc.

web/src/app/(main)/function/findings/_components/findings-table.tsx

@@ -28,6 +28,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
@@ -212,6 +213,7 @@ export function FindingsTable({
                       <span className="truncate font-medium">{f.name || f.vulnclass || "未分类"}</span>
                     )}
                     <span className="truncate text-xs text-muted-foreground">{f.summary}</span>
+                    <Badge variant="outline">流量证据 {f.traffic_count ?? 0} 条</Badge>
                   </div>
                 </TableCell>
                 <TableCell>

web/src/app/(main)/function/findings/detail/page.tsx

@@ -1,33 +1,32 @@
 "use client";
 
 import * as React from "react";
+
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { toast } from "sonner";
-import { ArrowLeftIcon, ArrowUpRightIcon, ShieldAlertIcon } from "lucide-react";
 
-import { SidebarTrigger } from "@/components/ui/sidebar";
-import { Separator } from "@/components/ui/separator";
+import { ArrowLeftIcon, ArrowUpRightIcon, ShieldAlertIcon } from "lucide-react";
+import { toast } from "sonner";
+
+import { CopyButton } from "@/components/copy-button";
+import { FindingRetestPanel } from "@/components/finding-retest-panel";
+import { FindingTrafficPanel } from "@/components/finding-traffic-panel";
+import { Markdown } from "@/components/markdown";
+import { StatusBadge } from "@/components/status-badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-} from "@/components/ui/select";
-import { StatusBadge } from "@/components/status-badge";
-import { CopyButton } from "@/components/copy-button";
-import { Markdown } from "@/components/markdown";
-import { FindingRetestPanel } from "@/components/finding-retest-panel";
-import { FindingLineageView } from "./lineage";
-import { statusMeta } from "@/lib/status";
 import { api } from "@/lib/api";
+import { statusMeta } from "@/lib/status";
 import type { Finding, FindingStatus, Severity } from "@/lib/types";
 
+import { FindingLineageView } from "./lineage";
+
 const SEVERITIES: Severity[] = ["critical", "high", "medium", "low"];
 const FINDING_STATUSES: FindingStatus[] = [
   "pending",
@@ -46,21 +45,11 @@ function fmtTime(ts: string) {
 }
 
 // FieldRow is one label/value line in the right-hand status panel.
-function FieldRow({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
+function FieldRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex items-start justify-between gap-3 py-2.5">
-      <span className="shrink-0 pt-0.5 text-xs text-muted-foreground">
-        {label}
-      </span>
-      <div className="flex min-w-0 flex-col items-end gap-1 text-right text-sm">
-        {children}
-      </div>
+      <span className="shrink-0 pt-0.5 text-xs text-muted-foreground">{label}</span>
+      <div className="flex min-w-0 flex-col items-end gap-1 text-right text-sm">{children}</div>
     </div>
   );
 }
@@ -125,9 +114,7 @@ function FindingDetailInner() {
   if (!finding) {
     return (
       <div className="flex flex-1 flex-col items-center justify-center gap-3 p-10 text-center">
-        <p className="text-muted-foreground">
-          {loaded ? `未找到发现 ${id}` : "加载中…"}
-        </p>
+        <p className="text-muted-foreground">{loaded ? `未找到发现 ${id}` : "加载中…"}</p>
         {loaded && (
           <Button asChild variant="outline">
             <Link href="/function/findings">
@@ -142,11 +129,7 @@ function FindingDetailInner() {
   const title = finding.name || finding.vulnclass || "未分类";
 
   return (
-    <Tabs
-      value={tab}
-      onValueChange={setTab}
-      className="flex flex-1 flex-col gap-0"
-    >
+    <Tabs value={tab} onValueChange={setTab} className="flex flex-1 flex-col gap-0">
       {/* Sticky header */}
       <header className="sticky top-0 z-10 flex flex-col gap-2 border-b bg-background/95 px-4 py-2.5 backdrop-blur lg:px-6">
         <div className="flex flex-wrap items-center gap-2">
@@ -160,16 +143,12 @@ function FindingDetailInner() {
           <h1 className="max-w-md truncate text-sm font-semibold" title={title}>
             {title}
           </h1>
-          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground">
-            #{finding.id}
-          </code>
+          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground">#{finding.id}</code>
           <Separator orientation="vertical" className="mx-1 h-4" />
           <StatusBadge domain="severity" value={finding.severity} dot />
           <StatusBadge domain="finding" value={finding.status} dot />
           {finding.inherited && finding.source_task_id && (
-            <Badge variant="outline">
-              来源任务 #{finding.source_task_id} · 只读
-            </Badge>
+            <Badge variant="outline">来源任务 #{finding.source_task_id} · 只读</Badge>
           )}
         </div>
         <TabsList>
@@ -190,9 +169,7 @@ function FindingDetailInner() {
                   <CardTitle className="text-sm">摘要</CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <p className="text-sm leading-relaxed whitespace-pre-wrap">
-                    {finding.summary || "（无摘要）"}
-                  </p>
+                  <p className="text-sm leading-relaxed whitespace-pre-wrap">{finding.summary || "（无摘要）"}</p>
                 </CardContent>
               </Card>
               <FindingRetestPanel key={id} findingId={id} readOnly={finding.inherited} onCompleted={load} />
@@ -210,21 +187,29 @@ function FindingDetailInner() {
                   )}
                 </CardContent>
               </Card>
+              <FindingTrafficPanel
+                key={id}
+                findingId={id}
+                contextTask={contextTaskId || undefined}
+                readOnly={finding.inherited}
+                onChanged={load}
+              />
               {/* 证据下方：详细报告(Markdown 渲染) */}
               <Card>
                 <CardHeader className="flex-row items-center justify-between">
                   <CardTitle className="text-sm">详细报告</CardTitle>
-                  {finding.report && (
-                    <CopyButton text={finding.report} successMessage="已复制详细报告" />
-                  )}
+                  {finding.report && <CopyButton text={finding.report} successMessage="已复制详细报告" />}
                 </CardHeader>
                 <CardContent>
+                  {finding.report_stale ? (
+                    <Alert>
+                      <AlertDescription>流量证据已变更，详细报告待更新。</AlertDescription>
+                    </Alert>
+                  ) : null}
                   {finding.report ? (
                     <Markdown text={finding.report} />
                   ) : (
-                    <p className="text-sm text-muted-foreground">
-                      暂无详细报告。
-                    </p>
+                    <p className="text-sm text-muted-foreground">暂无详细报告。</p>
                   )}
                 </CardContent>
               </Card>
@@ -248,14 +233,8 @@ function FindingDetailInner() {
                   {finding.inherited ? (
                     <StatusBadge domain="severity" value={finding.severity} dot />
                   ) : (
-                    <Select
-                      value={finding.severity}
-                      onValueChange={(v) => changeSeverity(v as Severity)}
-                    >
-                      <SelectTrigger
-                        size="sm"
-                        className="h-7 w-auto border-none px-1 shadow-none focus-visible:ring-0"
-                      >
+                    <Select value={finding.severity} onValueChange={(v) => changeSeverity(v as Severity)}>
+                      <SelectTrigger size="sm" className="h-7 w-auto border-none px-1 shadow-none focus-visible:ring-0">
                         <StatusBadge domain="severity" value={finding.severity} dot />
                       </SelectTrigger>
                       <SelectContent position="popper" align="end">
@@ -276,14 +255,8 @@ function FindingDetailInner() {
                   {finding.inherited ? (
                     <StatusBadge domain="finding" value={finding.status} dot />
                   ) : (
-                    <Select
-                      value={finding.status}
-                      onValueChange={(v) => changeStatus(v as FindingStatus)}
-                    >
-                      <SelectTrigger
-                        size="sm"
-                        className="h-7 w-auto border-none px-1 shadow-none focus-visible:ring-0"
-                      >
+                    <Select value={finding.status} onValueChange={(v) => changeStatus(v as FindingStatus)}>
+                      <SelectTrigger size="sm" className="h-7 w-auto border-none px-1 shadow-none focus-visible:ring-0">
                         <StatusBadge domain="finding" value={finding.status} dot />
                       </SelectTrigger>
                       <SelectContent position="popper" align="end">
@@ -302,9 +275,7 @@ function FindingDetailInner() {
                 {/* 漏洞类型 */}
                 <FieldRow label="漏洞类型">
                   {finding.vulnclass ? (
-                    <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
-                      {finding.vulnclass}
-                    </code>
+                    <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{finding.vulnclass}</code>
                   ) : (
                     <span className="text-muted-foreground">—</span>
                   )}
@@ -337,9 +308,7 @@ function FindingDetailInner() {
                       className="inline-flex max-w-[16rem] items-center gap-1 text-primary hover:underline"
                       title={finding.task_description}
                     >
-                      <span className="truncate">
-                        {finding.task_description || `#${finding.task_id}`}
-                      </span>
+                      <span className="truncate">{finding.task_description || `#${finding.task_id}`}</span>
                       <ArrowUpRightIcon className="size-3 shrink-0" />
                     </Link>
                   ) : (

web/src/app/(main)/function/tasks/detail/_tabs/findings-tab.tsx

@@ -10,13 +10,7 @@ import { toast } from "sonner";
 import { StatusBadge } from "@/components/status-badge";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { api } from "@/lib/api";
 import { useStoredSortPreference } from "@/lib/sort-preference";
 import { statusMeta } from "@/lib/status";
@@ -65,10 +59,7 @@ function Row({
           className="flex min-w-0 flex-1 items-center gap-3 text-left"
         >
           <ChevronRightIcon
-            className={cn(
-              "size-4 shrink-0 text-muted-foreground transition-transform",
-              open && "rotate-90",
-            )}
+            className={cn("size-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-90")}
           />
           <StatusBadge domain="severity" value={f.severity} dot />
           <div className="flex min-w-0 flex-1 flex-col gap-1">
@@ -80,11 +71,10 @@ function Row({
                 </Badge>
               )}
             </div>
-            <span className="truncate text-xs text-muted-foreground">
-              {f.summary}
-            </span>
+            <span className="truncate text-xs text-muted-foreground">{f.summary}</span>
           </div>
         </button>
+        <Badge variant="outline">流量证据 {f.traffic_count ?? 0} 条</Badge>
         {f.assets && f.assets.length > 0 && (
           <div className="hidden shrink-0 flex-wrap justify-end gap-1 sm:flex">
             {f.assets.slice(0, 2).map((a) => (
@@ -96,22 +86,12 @@ function Row({
                 {a.label}
               </code>
             ))}
-            {f.assets.length > 2 && (
-              <span className="text-xs text-muted-foreground">
-                +{f.assets.length - 2}
-              </span>
-            )}
+            {f.assets.length > 2 && <span className="text-xs text-muted-foreground">+{f.assets.length - 2}</span>}
           </div>
         )}
         {f.finding_id && !f.inherited ? (
-          <Select
-            value={f.status}
-            onValueChange={(v) => onStatus(f, v as FindingStatus)}
-          >
-            <SelectTrigger
-              size="sm"
-              className="h-7 w-28 shrink-0 border-none px-1 shadow-none focus-visible:ring-0"
-            >
+          <Select value={f.status} onValueChange={(v) => onStatus(f, v as FindingStatus)}>
+            <SelectTrigger size="sm" className="h-7 w-28 shrink-0 border-none px-1 shadow-none focus-visible:ring-0">
               <StatusBadge domain="finding" value={f.status} dot />
             </SelectTrigger>
             <SelectContent position="popper" align="end">
@@ -147,9 +127,7 @@ function Row({
       </div>
       {open && (
         <div className="bg-muted/30 px-4 pb-4 pl-11">
-          <div className="mb-1 text-xs font-medium text-muted-foreground">
-            证据 / PoC
-          </div>
+          <div className="mb-1 text-xs font-medium text-muted-foreground">证据 / PoC</div>
           <pre className="overflow-auto rounded-md border bg-background p-3 font-mono text-xs whitespace-pre-wrap">
             {f.evidence}
           </pre>
@@ -188,25 +166,18 @@ export function FindingsTab({ taskId }: { taskId: string }) {
     };
   }, [taskId]);
 
-  const onStatus = React.useCallback(
-    async (f: Finding, next: FindingStatus) => {
-      if (f.inherited || !f.finding_id || next === f.status) return;
-      const prev = f.status;
-      setFindings((cur) =>
-        cur.map((x) => (x.id === f.id ? { ...x, status: next } : x)),
-      );
-      try {
-        await api.setFindingStatus(f.finding_id, next);
-        toast.success(`已标记为「${statusMeta("finding", next).label}」`);
-      } catch (e) {
-        setFindings((cur) =>
-          cur.map((x) => (x.id === f.id ? { ...x, status: prev } : x)),
-        );
-        toast.error("更新失败：" + (e as Error).message);
-      }
-    },
-    [],
-  );
+  const onStatus = React.useCallback(async (f: Finding, next: FindingStatus) => {
+    if (f.inherited || !f.finding_id || next === f.status) return;
+    const prev = f.status;
+    setFindings((cur) => cur.map((x) => (x.id === f.id ? { ...x, status: next } : x)));
+    try {
+      await api.setFindingStatus(f.finding_id, next);
+      toast.success(`已标记为「${statusMeta("finding", next).label}」`);
+    } catch (e) {
+      setFindings((cur) => cur.map((x) => (x.id === f.id ? { ...x, status: prev } : x)));
+      toast.error("更新失败：" + (e as Error).message);
+    }
+  }, []);
 
   const items = findings
     .filter((f) => f.task_id === taskId || f.inherited)
@@ -244,9 +215,7 @@ export function FindingsTab({ taskId }: { taskId: string }) {
           <Row key={f.id} f={f} contextTaskId={taskId} onStatus={onStatus} />
         ))}
         {items.length === 0 && (
-          <p className="px-4 py-8 text-center text-sm text-muted-foreground">
-            本任务及直接关联任务暂无确认发现。
-          </p>
+          <p className="px-4 py-8 text-center text-sm text-muted-foreground">本任务及直接关联任务暂无确认发现。</p>
         )}
       </CardContent>
     </Card>

web/src/app/(main)/function/traffic/page.tsx

@@ -5,19 +5,18 @@ import * as React from "react";
 import {
   ArrowDownWideNarrowIcon,
   ArrowUpNarrowWideIcon,
-  CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  CopyIcon,
   ListChecksIcon,
   Loader2Icon,
   RadioTowerIcon,
   SearchIcon,
   Trash2Icon,
-  WrapTextIcon,
 } from "lucide-react";
 import { toast } from "sonner";
 
+import { HttpCodeBlock } from "@/components/http-code-block";
+import { LinkTrafficDialog } from "@/components/link-traffic-dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -41,7 +40,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { api } from "@/lib/api";
 import type { TrafficDetail, TrafficExchange, TrafficHost, TrafficResp } from "@/lib/types";
-import { cn, copyText } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 
 function fmtTime(ts: string) {
   return new Date(ts).toLocaleString("zh-CN", {
@@ -90,205 +89,6 @@ function requestWithHost(raw: string, exchange: TrafficExchange): string {
   return `${raw.slice(0, firstLineEnd + newline.length)}Host: ${host}${newline}${raw.slice(firstLineEnd + newline.length)}`;
 }
 
-function StartLine({ line }: { line: string }) {
-  const response = /^(HTTP\/\S+)(\s+)(\d{3})(.*)$/.exec(line);
-  if (response) {
-    return (
-      <>
-        <span className="text-muted-foreground">{response[1]}</span>
-        {response[2]}
-        <span className={statusTone(Number(response[3]))}>{response[3]}</span>
-        {response[4]}
-      </>
-    );
-  }
-
-  const request = /^([A-Z]+)(\s+)(\S+)(\s+)(HTTP\/\S+)$/.exec(line);
-  if (request) {
-    return (
-      <>
-        <span className="font-semibold text-primary">{request[1]}</span>
-        {request[2]}
-        <span className="text-chart-2">{request[3]}</span>
-        {request[4]}
-        <span className="text-muted-foreground">{request[5]}</span>
-      </>
-    );
-  }
-
-  return line;
-}
-
-function HeaderLine({ line }: { line: string }) {
-  const separator = line.indexOf(":");
-  if (separator <= 0) return line;
-  return (
-    <>
-      <span className="text-primary">{line.slice(0, separator)}</span>
-      <span className="text-muted-foreground">:</span>
-      <span className="text-chart-2">{line.slice(separator + 1)}</span>
-    </>
-  );
-}
-
-function JsonBody({ body }: { body: string }) {
-  const parts: React.ReactNode[] = [];
-  const tokens = /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g;
-  let cursor = 0;
-  for (const match of body.matchAll(tokens)) {
-    const index = match.index ?? 0;
-    if (index > cursor) parts.push(body.slice(cursor, index));
-    let className = "text-chart-4";
-    if (match[1]) className = match[2] ? "text-primary" : "text-chart-2";
-    else if (match[3]) className = "text-chart-3";
-    parts.push(
-      <span key={`${index}-${match[0].length}`} className={className}>
-        {match[0]}
-      </span>,
-    );
-    cursor = index + match[0].length;
-  }
-  if (cursor < body.length) parts.push(body.slice(cursor));
-  return parts;
-}
-
-function MarkupBody({ body }: { body: string }) {
-  const parts: React.ReactNode[] = [];
-  const tags = /<\/?[A-Za-z][^>]*>|<!--[\s\S]*?-->/g;
-  let cursor = 0;
-  for (const match of body.matchAll(tags)) {
-    const index = match.index ?? 0;
-    if (index > cursor) parts.push(body.slice(cursor, index));
-    parts.push(
-      <span key={`${index}-${match[0].length}`} className="text-primary">
-        {match[0]}
-      </span>,
-    );
-    cursor = index + match[0].length;
-  }
-  if (cursor < body.length) parts.push(body.slice(cursor));
-  return parts;
-}
-
-type BodyFormat = "json" | "markup" | "plain";
-
-function detectBodyFormat(body: string): BodyFormat {
-  const trimmed = body.trimStart();
-  if (trimmed.startsWith("{") || trimmed.startsWith("[")) return "json";
-  if (trimmed.startsWith("<")) return "markup";
-  return "plain";
-}
-
-function HighlightedBody({ body, format }: { body: string; format: BodyFormat }) {
-  if (format === "json") return <JsonBody body={body} />;
-  if (format === "markup") return <MarkupBody body={body} />;
-  return body;
-}
-
-function HttpCodeBlock({ raw }: { raw: string }) {
-  const [wrapLines, setWrapLines] = React.useState(true);
-  const [copied, setCopied] = React.useState(false);
-  const value = raw || "（空）";
-  const lines = value.replaceAll("\r\n", "\n").split("\n");
-  const separator = lines.indexOf("");
-  const body = separator >= 0 ? lines.slice(separator + 1).join("\n") : "";
-  const bodyFormat = detectBodyFormat(body);
-
-  React.useEffect(() => {
-    if (!copied) return;
-    const timer = window.setTimeout(() => setCopied(false), 1500);
-    return () => window.clearTimeout(timer);
-  }, [copied]);
-
-  const copyPacket = async () => {
-    const ok = await copyText(value);
-    if (ok) {
-      setCopied(true);
-      return;
-    }
-    toast.error("复制失败，请使用 Ctrl/Cmd+A 后复制");
-  };
-
-  const renderLine = (line: string, index: number) => {
-    if (index === 0) return <StartLine line={line} />;
-    if (separator < 0 || index < separator) return <HeaderLine line={line} />;
-    if (index === separator) return null;
-    return <HighlightedBody body={line} format={bodyFormat} />;
-  };
-
-  return (
-    <div className="relative mx-3 my-4 overflow-hidden rounded-md border bg-background shadow-xs">
-      <div className="absolute top-2 right-2 flex items-center gap-0.5 rounded-md border bg-background/95 p-0.5 shadow-xs">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-xs"
-              aria-label={wrapLines ? "关闭自动换行" : "开启自动换行"}
-              aria-pressed={wrapLines}
-              onClick={() => setWrapLines((current) => !current)}
-            >
-              <WrapTextIcon />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">{wrapLines ? "关闭自动换行" : "开启自动换行"}</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-xs"
-              aria-label={copied ? "已复制报文" : "复制报文"}
-              onClick={() => void copyPacket()}
-            >
-              {copied ? <CheckIcon /> : <CopyIcon />}
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">{copied ? "已复制" : "复制报文"}</TooltipContent>
-        </Tooltip>
-      </div>
-      {/* biome-ignore lint/a11y/useSemanticElements: textarea cannot preserve line numbers and syntax-highlighting markup. */}
-      <div
-        role="textbox"
-        aria-label="HTTP 报文代码"
-        aria-multiline="true"
-        aria-readonly="true"
-        tabIndex={0}
-        className="max-h-[calc(100vh-15rem)] min-w-0 overflow-auto bg-background py-3 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-        onKeyDown={(event) => {
-          if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "a") return;
-          event.preventDefault();
-          const selection = window.getSelection();
-          if (!selection) return;
-          const range = document.createRange();
-          range.selectNodeContents(event.currentTarget);
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }}
-      >
-        {lines.map((line, index) => (
-          <div
-            key={`${index}-${line}`}
-            data-line={index + 1}
-            className="grid min-w-0 grid-cols-[1.5rem_minmax(0,1fr)] leading-relaxed before:sticky before:left-0 before:self-stretch before:border-r before:bg-muted/20 before:px-1 before:text-right before:text-muted-foreground/60 before:content-[attr(data-line)]"
-          >
-            <code
-              className={cn(
-                "min-h-[1lh] min-w-0 pr-16 pl-1.5 [tab-size:4]",
-                wrapLines ? "break-words whitespace-pre-wrap" : "whitespace-pre",
-              )}
-            >
-              {renderLine(line, index)}
-            </code>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 // Fixed method set (server filters exact-match); avoids deriving options from a
 // single page, which would only ever list the methods on that page.
 const METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"];
@@ -296,6 +96,8 @@ const PAGE_SIZES = [25, 50, 100, 200];
 type HostCountSortDirection = "asc" | "desc";
 
 export default function TrafficPage() {
+  const [selectedFlows, setSelectedFlows] = React.useState<Set<string>>(() => new Set());
+  const [linking, setLinking] = React.useState(false);
   const [page, setPage] = React.useState(0);
   const [size, setSize] = React.useState(50);
   const [host, setHost] = React.useState(""); // raw host input
@@ -623,6 +425,17 @@ export default function TrafficPage() {
         </div>
       </div>
 
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-sm text-muted-foreground">已选 {selectedFlows.size} 条流量</span>
+        <Button variant="outline" size="sm" disabled={selectedFlows.size === 0} onClick={() => setLinking(true)}>
+          关联到漏洞
+        </Button>
+        {selectedFlows.size > 0 ? (
+          <Button variant="ghost" size="sm" onClick={() => setSelectedFlows(new Set())}>
+            清空选择
+          </Button>
+        ) : null}
+      </div>
       {/* History table */}
       <div className="flex h-[calc(100vh-15rem)] min-h-0 flex-col">
         <Card className="flex min-h-0 flex-1 flex-col overflow-hidden py-0">
@@ -630,6 +443,22 @@ export default function TrafficPage() {
             <Table>
               <TableHeader className="sticky top-0 z-10 bg-card">
                 <TableRow>
+                  <TableHead className="w-10">
+                    <Checkbox
+                      aria-label="选择本页流量"
+                      checked={exchanges.length > 0 && exchanges.every((e) => selectedFlows.has(e.id))}
+                      onCheckedChange={(checked) =>
+                        setSelectedFlows((previous) => {
+                          const next = new Set(previous);
+                          for (const e of exchanges) {
+                            if (checked === true) next.add(e.id);
+                            else next.delete(e.id);
+                          }
+                          return next;
+                        })
+                      }
+                    />
+                  </TableHead>
                   <TableHead className="w-36">时间</TableHead>
                   <TableHead className="w-44">host</TableHead>
                   <TableHead className="w-20">方法</TableHead>
@@ -646,6 +475,21 @@ export default function TrafficPage() {
                     className={cn("cursor-pointer", selected?.id === e.id && "bg-accent hover:bg-accent")}
                     onClick={() => setSelected(e)}
                   >
+                    <TableCell>
+                      <Checkbox
+                        aria-label={`选择流量 ${e.id}`}
+                        checked={selectedFlows.has(e.id)}
+                        onClick={(event) => event.stopPropagation()}
+                        onCheckedChange={(checked) =>
+                          setSelectedFlows((previous) => {
+                            const next = new Set(previous);
+                            if (checked === true) next.add(e.id);
+                            else next.delete(e.id);
+                            return next;
+                          })
+                        }
+                      />
+                    </TableCell>
                     <TableCell className="text-xs text-muted-foreground tabular-nums">{fmtTime(e.ts)}</TableCell>
                     <TableCell className="font-mono text-xs">{e.host}</TableCell>
                     <TableCell>
@@ -665,7 +509,7 @@ export default function TrafficPage() {
                 ))}
                 {exchanges.length === 0 && (
                   <TableRow>
-                    <TableCell colSpan={7} className="py-12 text-center text-sm text-muted-foreground">
+                    <TableCell colSpan={8} className="py-12 text-center text-sm text-muted-foreground">
                       {traffic === null ? "加载中…" : "没有匹配的流量。"}
                     </TableCell>
                   </TableRow>
@@ -676,6 +520,13 @@ export default function TrafficPage() {
         </Card>
       </div>
 
+      {linking ? (
+        <LinkTrafficDialog
+          trafficIds={[...selectedFlows]}
+          onClose={() => setLinking(false)}
+          onBound={() => setSelectedFlows(new Set())}
+        />
+      ) : null}
       <Sheet open={selected !== null} onOpenChange={(open) => !open && setSelected(null)}>
         <SheetContent className="w-full! max-w-none! gap-0 p-0 sm:w-[48rem]! sm:max-w-[48rem]!">
           {selected && (

web/src/app/(main)/system/settings/page.tsx

@@ -17,6 +17,7 @@ import type { Settings } from "@/lib/types";
 
 export default function SystemSettingsPage() {
   const [trafficCapture, setTrafficCapture] = React.useState(false);
+  const [agentTrafficBinding, setAgentTrafficBinding] = React.useState(false);
   const [webSearch, setWebSearch] = React.useState(false);
   const [backend, setBackend] = React.useState("ddgs");
   const [braveKeySet, setBraveKeySet] = React.useState(false);
@@ -43,13 +44,14 @@ export default function SystemSettingsPage() {
 
   const apply = React.useCallback((s: Settings) => {
     setTrafficCapture(!!s.traffic_capture);
+    setAgentTrafficBinding(!!s.agent_traffic_binding);
     setWebSearch(!!s.web_search_enabled);
     setBackend(s.web_search_backend || "ddgs");
     setBraveKeySet(!!s.brave_key_set);
     setTavilyKeySet(!!s.tavily_key_set);
-    setProxyInput(s.web_search_proxy || "");
-    setGlobalProxyInput(s.global_proxy || "");
-    setPyInterp(s.python_interpreter || "");
+    setProxyInput(s.web_search_proxy ?? "");
+    setGlobalProxyInput(s.global_proxy ?? "");
+    setPyInterp(s.python_interpreter ?? "");
     setWorkers(String(s.workers ?? 3));
     setInjectPlanner(s.constraints_inject_planner !== false);
     setInjectWorker(s.constraints_inject_worker !== false);
@@ -118,6 +120,22 @@ export default function SystemSettingsPage() {
       .catch(() => setInjectPlanner(!v)); // revert on failure
   };
 
+  const toggleAgentTrafficBinding = (v: boolean) => {
+    setAgentTrafficBinding(v);
+    setSaving(true);
+    api
+      .setSettings({ agent_traffic_binding: v })
+      .then((s) => {
+        apply(s);
+        toast.success(v ? "已开启 Agent 自动绑定流量" : "已关闭 Agent 自动绑定流量");
+      })
+      .catch((e) => {
+        setAgentTrafficBinding(!v);
+        toast.error(`保存失败：${(e as Error).message}`);
+      })
+      .finally(() => setSaving(false));
+  };
+
   const toggleInjectWorker = (v: boolean) => {
     setInjectWorker(v); // optimistic
     api
@@ -256,6 +274,34 @@ export default function SystemSettingsPage() {
           </CardContent>
         </Card>
 
+        <Card className="mb-4 break-inside-avoid md:mb-6">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <RadioTowerIcon className="size-4" />
+              Agent 自动绑定流量
+            </CardTitle>
+            <CardDescription id="agent-traffic-binding-description">
+              默认关闭。开启后，漏洞入库时触发的报告 Agent 会核对已有 HTTP 请求/响应，关联对应流量后再编写报告。
+              <b>查阅数据包及额外的工具调用会增加 Token 消耗。</b>
+              <br />
+              TCP、未抓包或没有匹配流量时仍可正常上报。此开关不影响流量捕获、人工绑定及已保存证据的查看。 对下一轮 Agent
+              生效；关闭后会立即拒绝新的自动绑定。
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex items-center justify-between gap-4">
+            <Label htmlFor="agent-traffic-binding" className="text-sm font-normal text-muted-foreground">
+              {agentTrafficBinding ? "已开启 · 会增加 Token 消耗" : "已关闭 · 可继续人工绑定"}
+            </Label>
+            <Switch
+              id="agent-traffic-binding"
+              aria-describedby="agent-traffic-binding-description"
+              checked={agentTrafficBinding}
+              disabled={!loaded || saving}
+              onCheckedChange={toggleAgentTrafficBinding}
+            />
+          </CardContent>
+        </Card>
+
         <Card className="mb-4 break-inside-avoid md:mb-6">
           <CardHeader>
             <CardTitle className="flex items-center gap-2 text-base">
@@ -269,8 +315,9 @@ export default function SystemSettingsPage() {
               开启<b>流量捕获</b>时，它作为记录代理的<b>上游</b>（流量仍全量落库，再经此代理出网）；关闭捕获时，直接注入
               Agent 的 bash / WebFetch 出网。与网络搜索代理、LLM 代理相互独立。
               <br />
-              <b>提示</b>：socks5 在<b>关闭捕获</b>时依赖各命令行工具对 <code>ALL_PROXY</code> 的支持（curl 可用，部分工具可能忽略）；
-              若主要用 socks5，建议开启流量捕获——此路径由 MITM 亲自拨号，工具无感知、稳定生效。
+              <b>提示</b>：socks5 在<b>关闭捕获</b>时依赖各命令行工具对 <code>ALL_PROXY</code> 的支持（curl
+              可用，部分工具可能忽略）； 若主要用 socks5，建议开启流量捕获——此路径由 MITM
+              亲自拨号，工具无感知、稳定生效。
             </CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col gap-2">
@@ -291,9 +338,7 @@ export default function SystemSettingsPage() {
               </Button>
             </div>
             <p className="text-muted-foreground text-xs">
-              {globalProxyInput.trim()
-                ? "已配置 · 所有目标流量经此代理出网"
-                : "未配置 · 目标流量直连出网"}
+              {globalProxyInput.trim() ? "已配置 · 所有目标流量经此代理出网" : "未配置 · 目标流量直连出网"}
             </p>
           </CardContent>
         </Card>
@@ -308,8 +353,8 @@ export default function SystemSettingsPage() {
               开启后，把每个任务的<b>操作约束</b>（在任务总览「操作约束」里维护的 allow/deny 条目）拼进对应 Agent
               的系统提示，用来框定探索边界（如「仅测当前端口」「禁止爆破」）。
               <br />
-              可分别控制注入到 <b>规划者（planner）</b>与 <b>执行者（worker）</b>；默认都开。切换即时生效（下一轮读取），无需重建
-              Agent。关闭后该 Agent 不再看到约束。
+              可分别控制注入到 <b>规划者（planner）</b>与 <b>执行者（worker）</b>
+              ；默认都开。切换即时生效（下一轮读取），无需重建 Agent。关闭后该 Agent 不再看到约束。
             </CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col gap-4">

web/src/components/finding-traffic-panel.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import * as React from "react";
+
+import { ArrowDownIcon, ArrowUpIcon, PlusIcon } from "lucide-react";
+import { toast } from "sonner";
+
+import { TrafficEvidenceViewer } from "@/components/traffic-evidence-viewer";
+import { TrafficPickerDialog } from "@/components/traffic-picker-dialog";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/lib/api";
+import type { FindingTraffic, FindingTrafficBinding, TrafficEvidenceRole } from "@/lib/types";
+
+const ROLES: Record<TrafficEvidenceRole, string> = {
+  baseline: "正常对照",
+  proof: "漏洞证明",
+  verification: "补充验证",
+  supporting: "辅助证据",
+};
+
+export function FindingTrafficPanel({
+  findingId,
+  contextTask,
+  readOnly,
+  onChanged,
+}: {
+  findingId: string;
+  contextTask?: string;
+  readOnly?: boolean;
+  onChanged: () => void;
+}) {
+  const [data, setData] = React.useState<FindingTraffic | null>(null);
+  const [error, setError] = React.useState("");
+  const [adding, setAdding] = React.useState(false);
+  const [preview, setPreview] = React.useState<string | null>(null);
+  const [editing, setEditing] = React.useState<FindingTrafficBinding | null>(null);
+  const [role, setRole] = React.useState<TrafficEvidenceRole>("supporting");
+  const [note, setNote] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [reload, setReload] = React.useState(0);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: retry token intentionally refreshes this request.
+  React.useEffect(() => {
+    let active = true;
+    setData(null);
+    setError("");
+    api
+      .findingTraffic(findingId, contextTask)
+      .then((value) => {
+        if (active) setData(value);
+      })
+      .catch((e: Error) => {
+        if (active) setError(e.message);
+      });
+    return () => {
+      active = false;
+    };
+  }, [findingId, contextTask, reload]);
+
+  async function mutate(action: () => Promise<FindingTraffic>) {
+    setBusy(true);
+    try {
+      setData(await action());
+      setEditing(null);
+      onChanged();
+      toast.success("流量证据已更新");
+    } catch (e) {
+      toast.error((e as Error).message);
+      setReload((n) => n + 1);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function move(index: number, delta: number) {
+    if (!data) return;
+    const ids = data.bindings.map((b) => b.id);
+    [ids[index], ids[index + delta]] = [ids[index + delta], ids[index]];
+    void mutate(() => api.orderFindingTraffic(findingId, ids, data.version, contextTask));
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <CardTitle>关联流量 {data ? `(${data.bindings.length})` : ""}</CardTitle>
+            {!readOnly ? (
+              <Button variant="outline" size="sm" disabled={!data || busy} onClick={() => setAdding(true)}>
+                <PlusIcon data-icon="inline-start" />
+                绑定流量
+              </Button>
+            ) : (
+              <Badge variant="outline">继承证据 · 只读</Badge>
+            )}
+          </div>
+          <CardDescription>按复现顺序组织请求与响应。清理原始流量后，已绑定证据仍然保留。</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertDescription>
+                {error}
+                <Button variant="link" onClick={() => setReload((n) => n + 1)}>
+                  重试
+                </Button>
+              </AlertDescription>
+            </Alert>
+          ) : null}
+          {!data ? (
+            <Skeleton className="h-28 w-full" />
+          ) : data.bindings.length === 0 ? (
+            <Empty>
+              <EmptyHeader>
+                <EmptyTitle>暂无关联流量</EmptyTitle>
+                <EmptyDescription>可绑定正常对照、漏洞证明和补充验证请求。</EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          ) : (
+            data.bindings.map((b, index) => (
+              <div key={b.id} className="flex min-w-0 flex-col gap-2 rounded-md border p-3">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Badge variant="outline">
+                    {index + 1}. {ROLES[b.role]}
+                  </Badge>
+                  <Badge variant="secondary">
+                    {b.snapshot.method} · {b.snapshot.status}
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">证据 #{b.id}</span>
+                </div>
+                <Button
+                  variant="link"
+                  className="h-auto justify-start p-0 text-left whitespace-normal"
+                  onClick={() => setPreview(b.id)}
+                >
+                  <span className="break-all font-mono text-xs">{b.snapshot.url}</span>
+                </Button>
+                {b.note ? <p className="text-sm whitespace-pre-wrap">{b.note}</p> : null}
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <span className="text-xs text-muted-foreground">
+                    {new Date(b.snapshot.captured_at * 1000).toLocaleString("zh-CN")}
+                  </span>
+                  <div className="flex flex-wrap gap-1">
+                    <Button variant="outline" size="sm" onClick={() => setPreview(b.id)}>
+                      查看报文
+                    </Button>
+                    {!readOnly ? (
+                      <>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          disabled={busy}
+                          onClick={() => {
+                            setEditing(b);
+                            setRole(b.role);
+                            setNote(b.note);
+                          }}
+                        >
+                          编辑说明
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={`上移证据 ${b.id}`}
+                          disabled={busy || index === 0}
+                          onClick={() => move(index, -1)}
+                        >
+                          <ArrowUpIcon />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={`下移证据 ${b.id}`}
+                          disabled={busy || index === data.bindings.length - 1}
+                          onClick={() => move(index, 1)}
+                        >
+                          <ArrowDownIcon />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          disabled={busy}
+                          onClick={() =>
+                            void mutate(() => api.removeFindingTraffic(findingId, b.id, data.version, contextTask))
+                          }
+                        >
+                          解除绑定
+                        </Button>
+                      </>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </CardContent>
+      </Card>
+      {adding && data ? (
+        <TrafficPickerDialog
+          findingId={findingId}
+          contextTask={contextTask}
+          bound={data.bindings}
+          onClose={() => setAdding(false)}
+          onBound={() => {
+            setReload((n) => n + 1);
+            onChanged();
+          }}
+        />
+      ) : null}
+      <TrafficEvidenceViewer
+        findingId={findingId}
+        bindingId={preview}
+        contextTask={contextTask}
+        onClose={() => setPreview(null)}
+      />
+      <Dialog
+        open={editing !== null}
+        onOpenChange={(open) => {
+          if (!open && !busy) setEditing(null);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>编辑流量证据</DialogTitle>
+            <DialogDescription>说明这组请求/响应如何支持漏洞结论。</DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="evidence-role">用途</FieldLabel>
+              <Select value={role} onValueChange={(v) => setRole(v as TrafficEvidenceRole)}>
+                <SelectTrigger id="evidence-role">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {Object.entries(ROLES).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="evidence-note">证据说明</FieldLabel>
+              <Textarea id="evidence-note" value={note} onChange={(e) => setNote(e.target.value)} />
+            </Field>
+          </FieldGroup>
+          <DialogFooter>
+            <Button variant="outline" disabled={busy} onClick={() => setEditing(null)}>
+              取消
+            </Button>
+            <Button
+              disabled={busy || !editing || !data}
+              onClick={() => {
+                if (editing && data)
+                  void mutate(() =>
+                    api.editFindingTraffic(findingId, editing.id, data.version, { role, note }, contextTask),
+                  );
+              }}
+            >
+              保存说明
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/components/http-code-block.tsx

@@ -0,0 +1,216 @@
+"use client";
+import * as React from "react";
+
+import { CheckIcon, CopyIcon, WrapTextIcon } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn, copyText } from "@/lib/utils";
+
+function statusTone(status: number) {
+  if (status >= 500) return "text-red-500";
+  if (status >= 400) return "text-amber-500";
+  if (status >= 300) return "text-blue-500";
+  if (status >= 200) return "text-emerald-500";
+  return "text-muted-foreground";
+}
+
+function StartLine({ line }: { line: string }) {
+  const response = /^(HTTP\/\S+)(\s+)(\d{3})(.*)$/.exec(line);
+  if (response) {
+    return (
+      <>
+        <span className="text-muted-foreground">{response[1]}</span>
+        {response[2]}
+        <span className={statusTone(Number(response[3]))}>{response[3]}</span>
+        {response[4]}
+      </>
+    );
+  }
+
+  const request = /^([A-Z]+)(\s+)(\S+)(\s+)(HTTP\/\S+)$/.exec(line);
+  if (request) {
+    return (
+      <>
+        <span className="font-semibold text-primary">{request[1]}</span>
+        {request[2]}
+        <span className="text-chart-2">{request[3]}</span>
+        {request[4]}
+        <span className="text-muted-foreground">{request[5]}</span>
+      </>
+    );
+  }
+
+  return line;
+}
+
+function HeaderLine({ line }: { line: string }) {
+  const separator = line.indexOf(":");
+  if (separator <= 0) return line;
+  return (
+    <>
+      <span className="text-primary">{line.slice(0, separator)}</span>
+      <span className="text-muted-foreground">:</span>
+      <span className="text-chart-2">{line.slice(separator + 1)}</span>
+    </>
+  );
+}
+
+function JsonBody({ body }: { body: string }) {
+  const parts: React.ReactNode[] = [];
+  const tokens = /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g;
+  let cursor = 0;
+  for (const match of body.matchAll(tokens)) {
+    const index = match.index ?? 0;
+    if (index > cursor) parts.push(body.slice(cursor, index));
+    let className = "text-chart-4";
+    if (match[1]) className = match[2] ? "text-primary" : "text-chart-2";
+    else if (match[3]) className = "text-chart-3";
+    parts.push(
+      <span key={`${index}-${match[0].length}`} className={className}>
+        {match[0]}
+      </span>,
+    );
+    cursor = index + match[0].length;
+  }
+  if (cursor < body.length) parts.push(body.slice(cursor));
+  return parts;
+}
+
+function MarkupBody({ body }: { body: string }) {
+  const parts: React.ReactNode[] = [];
+  const tags = /<\/?[A-Za-z][^>]*>|<!--[\s\S]*?-->/g;
+  let cursor = 0;
+  for (const match of body.matchAll(tags)) {
+    const index = match.index ?? 0;
+    if (index > cursor) parts.push(body.slice(cursor, index));
+    parts.push(
+      <span key={`${index}-${match[0].length}`} className="text-primary">
+        {match[0]}
+      </span>,
+    );
+    cursor = index + match[0].length;
+  }
+  if (cursor < body.length) parts.push(body.slice(cursor));
+  return parts;
+}
+
+type BodyFormat = "json" | "markup" | "plain";
+
+function detectBodyFormat(body: string): BodyFormat {
+  const trimmed = body.trimStart();
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) return "json";
+  if (trimmed.startsWith("<")) return "markup";
+  return "plain";
+}
+
+function HighlightedBody({ body, format }: { body: string; format: BodyFormat }) {
+  if (format === "json") return <JsonBody body={body} />;
+  if (format === "markup") return <MarkupBody body={body} />;
+  return body;
+}
+
+export function HttpCodeBlock({ raw }: { raw: string }) {
+  const [wrapLines, setWrapLines] = React.useState(true);
+  const [copied, setCopied] = React.useState(false);
+  const value = raw || "（空）";
+  const lines = value.replaceAll("\r\n", "\n").split("\n");
+  const separator = lines.indexOf("");
+  const body = separator >= 0 ? lines.slice(separator + 1).join("\n") : "";
+  const bodyFormat = detectBodyFormat(body);
+
+  React.useEffect(() => {
+    if (!copied) return;
+    const timer = window.setTimeout(() => setCopied(false), 1500);
+    return () => window.clearTimeout(timer);
+  }, [copied]);
+
+  const copyPacket = async () => {
+    const ok = await copyText(value);
+    if (ok) {
+      setCopied(true);
+      return;
+    }
+    toast.error("复制失败，请使用 Ctrl/Cmd+A 后复制");
+  };
+
+  const renderLine = (line: string, index: number) => {
+    if (index === 0) return <StartLine line={line} />;
+    if (separator < 0 || index < separator) return <HeaderLine line={line} />;
+    if (index === separator) return null;
+    return <HighlightedBody body={line} format={bodyFormat} />;
+  };
+
+  return (
+    <div className="relative mx-3 my-4 overflow-hidden rounded-md border bg-background shadow-xs">
+      <div className="absolute top-2 right-2 flex items-center gap-0.5 rounded-md border bg-background/95 p-0.5 shadow-xs">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              aria-label={wrapLines ? "关闭自动换行" : "开启自动换行"}
+              aria-pressed={wrapLines}
+              onClick={() => setWrapLines((current) => !current)}
+            >
+              <WrapTextIcon />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{wrapLines ? "关闭自动换行" : "开启自动换行"}</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              aria-label={copied ? "已复制报文" : "复制报文"}
+              onClick={() => void copyPacket()}
+            >
+              {copied ? <CheckIcon /> : <CopyIcon />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{copied ? "已复制" : "复制报文"}</TooltipContent>
+        </Tooltip>
+      </div>
+      {/* biome-ignore lint/a11y/useSemanticElements: textarea cannot preserve line numbers and syntax-highlighting markup. */}
+      <div
+        role="textbox"
+        aria-label="HTTP 报文代码"
+        aria-multiline="true"
+        aria-readonly="true"
+        tabIndex={0}
+        className="max-h-[calc(100vh-15rem)] min-w-0 overflow-auto bg-background py-3 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        onKeyDown={(event) => {
+          if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "a") return;
+          event.preventDefault();
+          const selection = window.getSelection();
+          if (!selection) return;
+          const range = document.createRange();
+          range.selectNodeContents(event.currentTarget);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }}
+      >
+        {lines.map((line, index) => (
+          <div
+            key={`${index}-${line}`}
+            data-line={index + 1}
+            className="grid min-w-0 grid-cols-[1.5rem_minmax(0,1fr)] leading-relaxed before:sticky before:left-0 before:self-stretch before:border-r before:bg-muted/20 before:px-1 before:text-right before:text-muted-foreground/60 before:content-[attr(data-line)]"
+          >
+            <code
+              className={cn(
+                "min-h-[1lh] min-w-0 pr-16 pl-1.5 [tab-size:4]",
+                wrapLines ? "break-words whitespace-pre-wrap" : "whitespace-pre",
+              )}
+            >
+              {renderLine(line, index)}
+            </code>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

web/src/components/link-traffic-dialog.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import * as React from "react";
+
+import { toast } from "sonner";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api";
+import type { Finding, FindingsPage } from "@/lib/types";
+
+export function LinkTrafficDialog({
+  trafficIds,
+  onClose,
+  onBound,
+}: {
+  trafficIds: string[];
+  onClose: () => void;
+  onBound: () => void;
+}) {
+  const [query, setQuery] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  const [data, setData] = React.useState<FindingsPage | null>(null);
+  const [selected, setSelected] = React.useState<Finding | null>(null);
+  const [error, setError] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError("");
+    const timer = setTimeout(() => {
+      api
+        .findingsPage({ page, pageSize: 20, query })
+        .then((d) => {
+          if (active) setData(d);
+        })
+        .catch((e: Error) => {
+          if (active) setError(e.message);
+        })
+        .finally(() => {
+          if (active) setLoading(false);
+        });
+    }, 250);
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [query, page]);
+  async function save() {
+    if (!selected?.finding_id) return;
+    setBusy(true);
+    setError("");
+    try {
+      await api.bindFindingTraffic(
+        selected.finding_id,
+        trafficIds.map((traffic_id) => ({ traffic_id })),
+      );
+      toast.success(`已关联 ${trafficIds.length} 条流量到漏洞 #${selected.finding_id}`);
+      onBound();
+      onClose();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open && !busy) onClose();
+      }}
+    >
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>关联到漏洞</DialogTitle>
+          <DialogDescription>将所选 {trafficIds.length} 条流量保存为已有漏洞的证据。</DialogDescription>
+        </DialogHeader>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="link-finding-query">查找漏洞</FieldLabel>
+            <Input
+              id="link-finding-query"
+              placeholder="名称 / 摘要 / 漏洞类别"
+              value={query}
+              onChange={(e) => {
+                setQuery(e.target.value);
+                setPage(1);
+              }}
+            />
+          </Field>
+        </FieldGroup>
+        {error ? (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        ) : null}
+        <div className="flex max-h-[40vh] flex-col gap-2 overflow-auto" aria-busy={loading}>
+          {(data?.items ?? []).map((f) => (
+            <Button
+              key={f.finding_id ?? f.id}
+              variant={selected?.finding_id === f.finding_id ? "secondary" : "outline"}
+              className="h-auto justify-start p-3 text-left whitespace-normal"
+              aria-pressed={selected?.finding_id === f.finding_id}
+              disabled={busy || !f.finding_id || f.inherited}
+              onClick={() => setSelected(f)}
+            >
+              <span className="flex min-w-0 flex-col gap-1">
+                <span>
+                  #{f.finding_id ?? f.id} · {f.name || f.vulnclass}
+                </span>
+                <span className="line-clamp-2 text-xs text-muted-foreground">{f.summary}</span>
+              </span>
+            </Button>
+          ))}
+          {!data?.items.length ? (
+            <p className="py-6 text-center text-sm text-muted-foreground">
+              {loading ? "加载中…" : "没有匹配的漏洞，请先登记漏洞"}
+            </p>
+          ) : null}
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          <Button variant="outline" size="sm" disabled={loading || page <= 1} onClick={() => setPage((p) => p - 1)}>
+            上一页
+          </Button>
+          <span className="text-xs">
+            第 {page} 页 · 共 {data?.total ?? 0} 条
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={loading || page * 20 >= (data?.total ?? 0)}
+            onClick={() => setPage((p) => p + 1)}
+          >
+            下一页
+          </Button>
+        </div>
+        <p className="text-sm">
+          {selected ? `已选漏洞：#${selected.finding_id} ${selected.name || selected.vulnclass}` : "请选择一个漏洞"}
+        </p>
+        <DialogFooter>
+          <Button variant="outline" disabled={busy} onClick={onClose}>
+            取消
+          </Button>
+          <Button disabled={busy || !selected} onClick={() => void save()}>
+            {busy ? "保存中…" : "确认关联"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/traffic-evidence-viewer.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import * as React from "react";
+
+import { toast } from "sonner";
+
+import { HttpCodeBlock } from "@/components/http-code-block";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { api } from "@/lib/api";
+import type { FindingTrafficDetail, TrafficDetail } from "@/lib/types";
+
+export function TrafficEvidenceViewer({
+  findingId,
+  bindingId,
+  contextTask,
+  onClose,
+}: {
+  findingId: string;
+  bindingId: string | null;
+  contextTask?: string;
+  onClose: () => void;
+}) {
+  const [detail, setDetail] = React.useState<FindingTrafficDetail | null>(null);
+  const [error, setError] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  React.useEffect(() => {
+    if (!bindingId) return;
+    let active = true;
+    setDetail(null);
+    setError("");
+    api
+      .findingTrafficDetail(findingId, bindingId, contextTask)
+      .then((d) => {
+        if (active) setDetail(d);
+      })
+      .catch((e: Error) => {
+        if (active) setError(e.message);
+      });
+    return () => {
+      active = false;
+    };
+  }, [findingId, bindingId, contextTask]);
+
+  async function more(side: "request" | "response") {
+    if (!detail || !bindingId) return;
+    setBusy(true);
+    try {
+      const next = await api.findingTrafficBody(findingId, bindingId, side, detail[side].next_offset, contextTask);
+      setDetail((current) =>
+        current?.binding.id === bindingId
+          ? { ...current, [side]: { ...next, content: current[side].content + next.content } }
+          : current,
+      );
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog
+      open={bindingId !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>流量证据 #{bindingId}</DialogTitle>
+          <DialogDescription className="break-all">
+            {detail?.binding.snapshot.url ?? "查看绑定时保存的请求与响应"}
+          </DialogDescription>
+        </DialogHeader>
+        {error ? (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        ) : detail ? (
+          <Tabs defaultValue="request">
+            <TabsList>
+              <TabsTrigger value="request">请求 Request</TabsTrigger>
+              <TabsTrigger value="response">响应 Response</TabsTrigger>
+            </TabsList>
+            {(["request", "response"] as const).map((side) => (
+              <TabsContent key={side} value={side}>
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <span className="text-xs text-muted-foreground">
+                    正文 {detail[side].total.toLocaleString()} 字节{detail[side].truncated ? " · 当前为预览" : ""}
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      void api
+                        .downloadFindingTrafficBody(findingId, detail.binding.id, side, contextTask)
+                        .catch((e: Error) => toast.error(e.message))
+                    }
+                  >
+                    下载完整{side === "request" ? "请求" : "响应"}正文
+                  </Button>
+                </div>
+                <HttpCodeBlock
+                  raw={`${(side === "request" ? detail.binding.snapshot.req_head : detail.binding.snapshot.resp_head)?.trimEnd() ?? ""}\n\n${detail[side].content}`}
+                />
+                {detail[side].truncated && !detail[side].binary ? (
+                  <Button variant="outline" size="sm" disabled={busy} onClick={() => void more(side)}>
+                    加载更多正文
+                  </Button>
+                ) : null}
+              </TabsContent>
+            ))}
+          </Tabs>
+        ) : (
+          <Skeleton className="h-56 w-full" />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function CapturedTrafficViewer({ id, onClose }: { id: string | null; onClose: () => void }) {
+  const [detail, setDetail] = React.useState<TrafficDetail | null>(null);
+  const [error, setError] = React.useState("");
+  React.useEffect(() => {
+    if (!id) return;
+    let active = true;
+    setDetail(null);
+    setError("");
+    api
+      .trafficExchange(id)
+      .then((d) => {
+        if (active) setDetail(d);
+      })
+      .catch((e: Error) => {
+        if (active) setError(e.message);
+      });
+    return () => {
+      active = false;
+    };
+  }, [id]);
+  return (
+    <Dialog
+      open={id !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>预览流量</DialogTitle>
+          <DialogDescription>流量 ID：{id}。绑定时会保存完整正文。</DialogDescription>
+        </DialogHeader>
+        {error ? (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        ) : detail ? (
+          <Tabs defaultValue="request">
+            <TabsList>
+              <TabsTrigger value="request">请求 Request</TabsTrigger>
+              <TabsTrigger value="response">响应 Response</TabsTrigger>
+            </TabsList>
+            <TabsContent value="request">
+              <HttpCodeBlock raw={detail.req} />
+            </TabsContent>
+            <TabsContent value="response">
+              <HttpCodeBlock raw={detail.resp} />
+            </TabsContent>
+          </Tabs>
+        ) : (
+          <Skeleton className="h-56 w-full" />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/traffic-picker-dialog.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import * as React from "react";
+
+import { toast } from "sonner";
+
+import { CapturedTrafficViewer } from "@/components/traffic-evidence-viewer";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { api } from "@/lib/api";
+import type { FindingTrafficBinding, TrafficResp } from "@/lib/types";
+
+const METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"];
+
+export function TrafficPickerDialog({
+  findingId,
+  contextTask,
+  bound,
+  onClose,
+  onBound,
+}: {
+  findingId: string;
+  contextTask?: string;
+  bound: FindingTrafficBinding[];
+  onClose: () => void;
+  onBound: () => void;
+}) {
+  const [host, setHost] = React.useState("");
+  const [method, setMethod] = React.useState("all");
+  const [query, setQuery] = React.useState("");
+  const [page, setPage] = React.useState(0);
+  const [data, setData] = React.useState<TrafficResp | null>(null);
+  const [selected, setSelected] = React.useState<Set<string>>(() => new Set());
+  const [preview, setPreview] = React.useState<string | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const alreadyBound = new Set(bound.map((b) => b.snapshot.source_traffic_id));
+  React.useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError("");
+    const timer = setTimeout(() => {
+      api
+        .traffic(page, 25, host, method === "all" ? "" : method, query)
+        .then((d) => {
+          if (active) setData(d);
+        })
+        .catch((e: Error) => {
+          if (active) setError(e.message);
+        })
+        .finally(() => {
+          if (active) setLoading(false);
+        });
+    }, 250);
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [page, host, method, query]);
+
+  const rows = data?.exchanges ?? [];
+  const selectable = rows.filter((e) => !alreadyBound.has(e.id));
+  function toggle(id: string, checked: boolean) {
+    setSelected((previous) => {
+      const next = new Set(previous);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }
+  async function save() {
+    setBusy(true);
+    setError("");
+    try {
+      await api.bindFindingTraffic(
+        findingId,
+        [...selected].map((traffic_id) => ({ traffic_id })),
+        contextTask,
+      );
+      toast.success(`已绑定 ${selected.size} 条流量`);
+      onBound();
+      onClose();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <Dialog
+        open
+        onOpenChange={(open) => {
+          if (!open && !busy) onClose();
+        }}
+      >
+        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-5xl">
+          <DialogHeader>
+            <DialogTitle>绑定流量</DialogTitle>
+            <DialogDescription>
+              筛选并多选请求/响应，已选记录会跨页保留。绑定后可设置用途、说明和顺序。
+            </DialogDescription>
+          </DialogHeader>
+          <FieldGroup className="flex flex-col gap-3 sm:flex-row">
+            <Field>
+              <FieldLabel htmlFor="evidence-host">目标 host</FieldLabel>
+              <Input
+                id="evidence-host"
+                value={host}
+                placeholder="域名或 IP"
+                onChange={(e) => {
+                  setHost(e.target.value);
+                  setPage(0);
+                }}
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="evidence-method">请求方法</FieldLabel>
+              <Select
+                value={method}
+                onValueChange={(v) => {
+                  setMethod(v);
+                  setPage(0);
+                }}
+              >
+                <SelectTrigger id="evidence-method">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="all">全部方法</SelectItem>
+                    {METHODS.map((m) => (
+                      <SelectItem key={m} value={m}>
+                        {m}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="evidence-query">关键词</FieldLabel>
+              <Input
+                id="evidence-query"
+                value={query}
+                placeholder="URL / 正文关键词"
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setPage(0);
+                }}
+              />
+            </Field>
+          </FieldGroup>
+          {error ? (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : null}
+          <div className="max-h-[45vh] overflow-auto rounded-md border" aria-busy={loading}>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>
+                    <Checkbox
+                      aria-label="选择本页未绑定流量"
+                      disabled={loading || busy || selectable.length === 0}
+                      checked={selectable.length > 0 && selectable.every((e) => selected.has(e.id))}
+                      onCheckedChange={(checked) =>
+                        setSelected((previous) => {
+                          const next = new Set(previous);
+                          for (const e of selectable) {
+                            if (checked === true) next.add(e.id);
+                            else next.delete(e.id);
+                          }
+                          return next;
+                        })
+                      }
+                    />
+                  </TableHead>
+                  <TableHead>方法 / URL</TableHead>
+                  <TableHead>时间</TableHead>
+                  <TableHead>状态码</TableHead>
+                  <TableHead>操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.map((e) => (
+                  <TableRow key={e.id}>
+                    <TableCell>
+                      <Checkbox
+                        aria-label={`选择流量 ${e.id}`}
+                        checked={selected.has(e.id) || alreadyBound.has(e.id)}
+                        disabled={busy || loading || alreadyBound.has(e.id)}
+                        onCheckedChange={(checked) => toggle(e.id, checked === true)}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <span className="font-mono text-xs">
+                        {e.method} {e.url}
+                      </span>
+                      {alreadyBound.has(e.id) ? <Badge variant="secondary">已绑定</Badge> : null}
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap text-xs">
+                      {new Date(e.ts).toLocaleString("zh-CN")}
+                    </TableCell>
+                    <TableCell>{e.status}</TableCell>
+                    <TableCell>
+                      <Button variant="ghost" size="sm" onClick={() => setPreview(e.id)}>
+                        预览
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {!rows.length ? (
+                  <TableRow>
+                    <TableCell colSpan={5} className="py-8 text-center">
+                      {loading ? "加载中…" : "没有匹配的流量"}
+                    </TableCell>
+                  </TableRow>
+                ) : null}
+              </TableBody>
+            </Table>
+          </div>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <span className="text-sm">
+              已选 {selected.size} 条 · 共 {data?.total ?? 0} 条
+            </span>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={loading || page === 0}
+                onClick={() => setPage((p) => p - 1)}
+              >
+                上一页
+              </Button>
+              <span className="text-xs">第 {page + 1} 页</span>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={loading || (page + 1) * 25 >= (data?.total ?? 0)}
+                onClick={() => setPage((p) => p + 1)}
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" disabled={busy} onClick={onClose}>
+              取消
+            </Button>
+            <Button disabled={busy || selected.size === 0} onClick={() => void save()}>
+              {busy ? "保存中…" : `绑定 ${selected.size} 条流量`}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <CapturedTrafficViewer id={preview} onClose={() => setPreview(null)} />
+    </>
+  );
+}

web/src/lib/api.ts

@@ -29,6 +29,7 @@ import type {
   DeleteTaskOptions,
   DeleteTaskResult,
   Edge,
+  EvidenceBodyPreview,
   Finding,
   FindingAssetTree,
   FindingDeepenResponse,
@@ -38,6 +39,8 @@ import type {
   FindingStats,
   FindingStatus,
   FindingsPage,
+  FindingTraffic,
+  FindingTrafficDetail,
   IntentAsset,
   InterceptApprovalRow,
   InterceptDetail,
@@ -82,6 +85,8 @@ import type {
   Tool,
   ToolStat,
   TrafficDetail,
+  TrafficEvidenceRef,
+  TrafficEvidenceRole,
   TrafficHost,
   TrafficResp,
   UsageStats,
@@ -529,6 +534,73 @@ export const api = {
     get<Finding>(
       `/exploration/findings/${id}${contextTaskId ? `?context_task=${encodeURIComponent(contextTaskId)}` : ""}`,
     ),
+  findingTraffic: (id: string, contextTask?: string) =>
+    get<FindingTraffic>(
+      `/exploration/findings/${id}/traffic${contextTask ? `?context_task=${encodeURIComponent(contextTask)}` : ""}`,
+    ),
+  bindFindingTraffic: (id: string, traffic_refs: TrafficEvidenceRef[], contextTask?: string) =>
+    post<FindingTraffic>(
+      `/exploration/findings/${id}/traffic${contextTask ? `?context_task=${encodeURIComponent(contextTask)}` : ""}`,
+      { traffic_refs },
+    ),
+  editFindingTraffic: (
+    id: string,
+    bindingId: string,
+    version: number,
+    fields: { role: TrafficEvidenceRole; note: string },
+    contextTask?: string,
+  ) =>
+    patch<FindingTraffic>(
+      `/exploration/findings/${id}/traffic/${bindingId}${contextTask ? `?context_task=${encodeURIComponent(contextTask)}` : ""}`,
+      { version, ...fields },
+    ),
+  removeFindingTraffic: (id: string, bindingId: string, version: number, contextTask?: string) =>
+    del<FindingTraffic>(
+      `/exploration/findings/${id}/traffic/${bindingId}${contextTask ? `?context_task=${encodeURIComponent(contextTask)}` : ""}`,
+      { version },
+    ),
+  orderFindingTraffic: (id: string, binding_ids: string[], version: number, contextTask?: string) =>
+    http<FindingTraffic>(
+      `/exploration/findings/${id}/traffic/order${contextTask ? `?context_task=${encodeURIComponent(contextTask)}` : ""}`,
+      { method: "PUT", body: JSON.stringify({ binding_ids, version }) },
+    ),
+  findingTrafficDetail: (id: string, bindingId: string, contextTask?: string) =>
+    get<FindingTrafficDetail>(
+      `/exploration/findings/${id}/traffic/${bindingId}${contextTask ? `?context_task=${encodeURIComponent(contextTask)}` : ""}`,
+    ),
+  findingTrafficBody: (
+    id: string,
+    bindingId: string,
+    side: "request" | "response",
+    offset: number,
+    contextTask?: string,
+  ) =>
+    get<EvidenceBodyPreview>(
+      `/exploration/findings/${id}/traffic/${bindingId}/body?side=${side}&offset=${offset}${contextTask ? `&context_task=${encodeURIComponent(contextTask)}` : ""}`,
+    ),
+  downloadFindingTrafficBody: async (
+    id: string,
+    bindingId: string,
+    side: "request" | "response",
+    contextTask?: string,
+  ) => {
+    const token = getToken();
+    const response = await fetch(
+      `/api/exploration/findings/${id}/traffic/${bindingId}/body?side=${side}&download=1${contextTask ? `&context_task=${encodeURIComponent(contextTask)}` : ""}`,
+      { headers: token ? { Authorization: `Bearer ${token}` } : {} },
+    );
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "下载失败" }));
+      throw new Error(error.error ?? "下载失败");
+    }
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `evidence-${bindingId}-${side}.bin`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  },
   // 漏洞链路:该漏洞节点回溯到任务初始节点的子图(节点 + 关系)。
   findingLineage: (id: string) => get<{ nodes: TaskNode[]; edges: Edge[] }>(`/exploration/findings/${id}/lineage`),
   setFindingStatus: (id: string, status: FindingStatus) => patch<Finding>(`/exploration/findings/${id}`, { status }),

web/src/lib/mock/data.ts

@@ -3314,6 +3314,7 @@ export const tools: Tool[] = [
 // ── Settings ─────────────────────────────────────────────────────────────────
 export const settings: Settings = {
   traffic_capture: true,
+  agent_traffic_binding: false,
   llm_record: false,
   web_search_enabled: true,
   web_search_backend: "ddgs",

web/src/lib/types.ts

@@ -463,6 +463,10 @@ export interface FindingAsset {
 }
 
 export interface Finding {
+  traffic_count?: number;
+  evidence_version?: number;
+  report_evidence_version?: number;
+  report_stale?: boolean;
   id: string;
   finding_id?: string; // 独立 findings 表的行 id,状态更新的句柄(任务内旧节点可能缺失)
   vulnclass: string;
@@ -878,6 +882,7 @@ export interface TrafficHost {
 // ---- App settings (runtime toggles) ----
 export interface Settings {
   traffic_capture: boolean;
+  agent_traffic_binding: boolean; // Agent 自动绑定流量证据，默认关闭；不影响人工绑定
   llm_record: boolean; // LLM 录制开关（默认关）；关闭时不记录任何 LLM 调用
   // Web search. brave_key_set / tavily_key_set reflect whether a key is stored
   // (the values are never returned). On PUT, send the corresponding field to set/clear.
@@ -1299,3 +1304,54 @@ export interface InterceptAudit {
 export interface InterceptDetail extends InterceptApprovalRow {
   audit: InterceptAudit | null;
 }
+
+export type TrafficEvidenceRole = "baseline" | "proof" | "verification" | "supporting";
+export interface TrafficEvidenceRef {
+  traffic_id: string;
+  role?: TrafficEvidenceRole;
+  note?: string;
+}
+export interface TrafficEvidenceSnapshot {
+  id: string;
+  source_traffic_id: string;
+  captured_at: number;
+  url: string;
+  method: string;
+  status: number;
+  content_type: string;
+  req_head?: string;
+  resp_head?: string;
+  req_hash: string;
+  resp_hash: string;
+  req_len: number;
+  resp_len: number;
+}
+export interface FindingTrafficBinding {
+  id: string;
+  finding_id: string;
+  snapshot_id: string;
+  role: TrafficEvidenceRole;
+  note: string;
+  position: number;
+  created_at: string;
+  snapshot: TrafficEvidenceSnapshot;
+}
+export interface FindingTraffic {
+  finding_id: string;
+  version: number;
+  report_version: number;
+  bindings: FindingTrafficBinding[];
+}
+export interface EvidenceBodyPreview {
+  content: string;
+  offset: number;
+  total: number;
+  next_offset: number;
+  truncated: boolean;
+  binary: boolean;
+}
+export interface FindingTrafficDetail {
+  binding: FindingTrafficBinding;
+  request: EvidenceBodyPreview;
+  response: EvidenceBodyPreview;
+}