feat(ui): add traffic and tool detail drawers

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

@@ -1,37 +1,19 @@
 "use client";
 
 import * as React from "react";
-import {
-  TerminalIcon,
-  SearchIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  Loader2Icon,
-  XIcon,
-} from "lucide-react";
 
-import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
+import { ChevronLeftIcon, ChevronRightIcon, Loader2Icon, SearchIcon, TerminalIcon } from "lucide-react";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { api } from "@/lib/api";
 import type { CommandRecord } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 function fmtTime(ts: string) {
   return new Date(ts).toLocaleString("zh-CN", {
@@ -50,7 +32,9 @@ function toolInput(raw: string): string {
     const obj = JSON.parse(raw);
     if (obj && typeof obj.command === "string") return obj.command;
     return JSON.stringify(obj, null, 2);
-  } catch { /* not JSON */ }
+  } catch {
+    /* not JSON */
+  }
   return raw;
 }
 
@@ -75,7 +59,7 @@ export default function CommandsPage() {
   const [total, setTotal] = React.useState(0);
   const [loading, setLoading] = React.useState(false);
 
-  // Inline detail panel (like traffic page, not a dialog)
+  // Selected execution is rendered in a right-side detail sheet.
   const [selected, setSelected] = React.useState<CommandRecord | null>(null);
 
   // Debounce search input.
@@ -85,6 +69,7 @@ export default function CommandsPage() {
   }, [query]);
 
   // Reset page on filter change.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: every filter change intentionally resets pagination.
   React.useEffect(() => {
     setPage(0);
   }, [queryQ, taskFilter, size]);
@@ -100,9 +85,15 @@ export default function CommandsPage() {
         setCommands(r.commands ?? []);
         setTotal(r.total ?? 0);
       })
-      .catch(() => {})
+      .catch(() => {
+        if (!alive) return;
+        setCommands([]);
+        setTotal(0);
+      })
       .finally(() => alive && setLoading(false));
-    return () => { alive = false; };
+    return () => {
+      alive = false;
+    };
   }, [page, size, queryQ, taskFilter]);
 
   const totalPages = Math.max(1, Math.ceil(total / size));
@@ -178,8 +169,8 @@ export default function CommandsPage() {
         </div>
       </div>
 
-      {/* History table + inline detail (Burp-style split) */}
-      <div className="flex h-[calc(100vh-13rem)] min-h-0 flex-col gap-3">
+      {/* History table */}
+      <div className="flex h-[calc(100vh-13rem)] min-h-0 flex-col">
         <Card className="flex min-h-0 flex-1 flex-col overflow-hidden py-0">
           <div className="min-h-0 flex-1 overflow-auto">
             <Table>
@@ -210,18 +201,13 @@ export default function CommandsPage() {
                   commands.map((cmd) => (
                     <TableRow
                       key={cmd.id}
-                      className={cn(
-                        "cursor-pointer",
-                        selected?.id === cmd.id && "bg-accent hover:bg-accent",
-                      )}
+                      className={cn("cursor-pointer", selected?.id === cmd.id && "bg-accent hover:bg-accent")}
                       onClick={() => setSelected(cmd)}
                     >
                       <TableCell className="text-xs text-muted-foreground tabular-nums">
                         {fmtTime(cmd.created_at)}
                       </TableCell>
-                      <TableCell className="text-xs font-mono text-muted-foreground">
-                        #{cmd.exploration_id}
-                      </TableCell>
+                      <TableCell className="text-xs font-mono text-muted-foreground">#{cmd.exploration_id}</TableCell>
                       <TableCell>
                         <Badge variant="outline" className="text-xs font-mono">
                           {cmd.worker || "-"}
@@ -239,9 +225,13 @@ export default function CommandsPage() {
                       </TableCell>
                       <TableCell>
                         {cmd.is_error ? (
-                          <Badge variant="destructive" className="text-xs">失败</Badge>
+                          <Badge variant="destructive" className="text-xs">
+                            失败
+                          </Badge>
                         ) : (
-                          <Badge variant="secondary" className="text-xs text-emerald-600">成功</Badge>
+                          <Badge variant="secondary" className="text-xs text-emerald-600">
+                            成功
+                          </Badge>
                         )}
                       </TableCell>
                     </TableRow>
@@ -251,67 +241,63 @@ export default function CommandsPage() {
             </Table>
           </div>
         </Card>
-
-        {/* Inline detail panel */}
-        {selected && (
-          <Card className="flex h-[42%] min-h-0 flex-col overflow-hidden py-0">
-            {/* Detail header */}
-            <div className="flex items-center gap-2 border-b px-3 py-2">
-              <Badge variant="outline" className="text-xs font-mono">
-                #{selected.exploration_id}
-              </Badge>
-              <Badge variant="outline" className="text-xs font-mono">
-                {selected.worker || "-"}
-              </Badge>
-              <Badge variant="secondary" className="text-xs font-mono">
-                {selected.tool || "-"}
-              </Badge>
-              <span className="text-xs text-muted-foreground">
-                {fmtTime(selected.created_at)}
-              </span>
-              {selected.is_error ? (
-                <Badge variant="destructive" className="text-xs">失败</Badge>
-              ) : (
-                <Badge variant="secondary" className="text-xs text-emerald-600">成功</Badge>
-              )}
-              <Button
-                variant="ghost"
-                size="icon"
-                className="ml-auto size-7 shrink-0"
-                onClick={() => setSelected(null)}
-              >
-                <XIcon />
-              </Button>
-            </div>
-            {/* Input / Output split */}
-            <div className="grid min-h-0 flex-1 grid-cols-2 divide-x">
-              <div className="flex min-h-0 min-w-0 flex-col">
-                <div className="border-b px-3 py-1 text-[11px] font-medium text-muted-foreground">
-                  输入 Input
-                </div>
-                <div className="min-h-0 flex-1 overflow-auto">
-                  <pre className="p-3 font-mono text-xs break-all whitespace-pre-wrap">
-                    {toolInput(selected.command)}
-                  </pre>
-                </div>
-              </div>
-              <div className="flex min-h-0 min-w-0 flex-col">
-                <div className="border-b px-3 py-1 text-[11px] font-medium text-muted-foreground">
-                  输出 Output
-                </div>
-                <div className="min-h-0 flex-1 overflow-auto">
-                  <pre className={cn(
-                    "p-3 font-mono text-xs break-all whitespace-pre-wrap",
-                    selected.is_error && "text-red-600 dark:text-red-400",
-                  )}>
-                    {selected.output || "（空）"}
-                  </pre>
-                </div>
-              </div>
-            </div>
-          </Card>
-        )}
       </div>
+
+      <Sheet open={selected !== null} onOpenChange={(open) => !open && setSelected(null)}>
+        <SheetContent className="w-full! max-w-none! gap-0 p-0 sm:w-[46rem]! sm:max-w-[46rem]!">
+          {selected && (
+            <>
+              <SheetHeader className="border-b px-5 py-4">
+                <SheetTitle className="pr-8">工具执行详情</SheetTitle>
+                <SheetDescription>{fmtTime(selected.created_at)}</SheetDescription>
+                <div className="flex flex-wrap items-center gap-2 pt-2">
+                  <Badge variant="outline" className="text-xs font-mono">
+                    #{selected.exploration_id}
+                  </Badge>
+                  <Badge variant="outline" className="text-xs font-mono">
+                    {selected.worker || "-"}
+                  </Badge>
+                  <Badge variant="secondary" className="text-xs font-mono">
+                    {selected.tool || "-"}
+                  </Badge>
+                  {selected.is_error ? (
+                    <Badge variant="destructive" className="text-xs">
+                      失败
+                    </Badge>
+                  ) : (
+                    <Badge variant="secondary" className="text-xs text-emerald-600">
+                      成功
+                    </Badge>
+                  )}
+                </div>
+              </SheetHeader>
+              <div className="grid min-h-0 flex-1 grid-rows-2 divide-y">
+                <div className="flex min-h-0 min-w-0 flex-col">
+                  <div className="border-b px-5 py-2 text-xs font-medium text-muted-foreground">输入 Input</div>
+                  <div className="min-h-0 flex-1 overflow-auto">
+                    <pre className="p-5 font-mono text-xs break-all whitespace-pre-wrap">
+                      {toolInput(selected.command)}
+                    </pre>
+                  </div>
+                </div>
+                <div className="flex min-h-0 min-w-0 flex-col">
+                  <div className="border-b px-5 py-2 text-xs font-medium text-muted-foreground">输出 Output</div>
+                  <div className="min-h-0 flex-1 overflow-auto">
+                    <pre
+                      className={cn(
+                        "p-5 font-mono text-xs break-all whitespace-pre-wrap",
+                        selected.is_error && "text-red-600 dark:text-red-400",
+                      )}
+                    >
+                      {selected.output || "（空）"}
+                    </pre>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
     </div>
   );
 }

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

@@ -1,15 +1,15 @@
 "use client";
 
 import * as React from "react";
+
 import {
-  RadioTowerIcon,
-  SearchIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  XIcon,
-  Loader2Icon,
-  Trash2Icon,
   ListChecksIcon,
+  Loader2Icon,
+  RadioTowerIcon,
+  SearchIcon,
+  Trash2Icon,
 } from "lucide-react";
 
 import {
@@ -22,35 +22,19 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-
-import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Card } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/lib/api";
-import type { TrafficExchange, TrafficResp, TrafficDetail, TrafficHost } from "@/lib/types";
+import type { TrafficDetail, TrafficExchange, TrafficHost, TrafficResp } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 function fmtTime(ts: string) {
   return new Date(ts).toLocaleString("zh-CN", {
@@ -66,7 +50,7 @@ function fmtBytes(n: number) {
   if (n <= 0) return "0 B";
   const units = ["B", "KB", "MB"];
   const i = Math.min(Math.floor(Math.log(n) / Math.log(1024)), units.length - 1);
-  const v = n / Math.pow(1024, i);
+  const v = n / 1024 ** i;
   return `${i === 0 ? v : v.toFixed(1)} ${units[i]}`;
 }
 
@@ -78,6 +62,141 @@ function statusTone(status: number) {
   return "text-muted-foreground";
 }
 
+function MethodBadge({ method }: { method: string }) {
+  return <Badge className="shrink-0 font-mono">{method}</Badge>;
+}
+
+// Older captures may predate Host persistence because net/http keeps Host
+// outside Request.Header. Fill it for display while newly recorded traffic is
+// fixed at the recorder layer as well.
+function requestWithHost(raw: string, exchange: TrafficExchange): string {
+  if (!raw.trim() || /^host\s*:/im.test(raw)) return raw;
+  let host = exchange.host;
+  try {
+    host = new URL(exchange.url).host || host;
+  } catch {
+    // Relative or legacy URLs fall back to the indexed host.
+  }
+  const newline = raw.includes("\r\n") ? "\r\n" : "\n";
+  const firstLineEnd = raw.indexOf(newline);
+  if (firstLineEnd < 0) return `${raw}${newline}Host: ${host}`;
+  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;
+}
+
+function HighlightedBody({ body }: { body: string }) {
+  const trimmed = body.trimStart();
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) return <JsonBody body={body} />;
+  if (trimmed.startsWith("<")) return <MarkupBody body={body} />;
+  return body;
+}
+
+function HttpCodeBlock({ raw }: { raw: string }) {
+  const value = raw || "（空）";
+  const lines = value.replaceAll("\r\n", "\n").split("\n");
+  const separator = lines.indexOf("");
+  const headerLines = separator >= 0 ? lines.slice(0, separator) : lines;
+  const body = separator >= 0 ? lines.slice(separator + 1).join("\n") : "";
+
+  return (
+    <pre className="min-w-full whitespace-pre p-5 font-mono text-xs leading-relaxed">
+      <code>
+        {headerLines.map((line, index) => (
+          <React.Fragment key={`${index}-${line}`}>
+            {index === 0 ? <StartLine line={line} /> : <HeaderLine line={line} />}
+            {index < headerLines.length - 1 ? "\n" : null}
+          </React.Fragment>
+        ))}
+        {separator >= 0 && (
+          <>
+            {"\n\n"}
+            <HighlightedBody body={body} />
+          </>
+        )}
+      </code>
+    </pre>
+  );
+}
+
 // 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"];
@@ -116,12 +235,14 @@ export default function TrafficPage() {
   }, [query]);
 
   // Any filter/size change resets to the first page.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: these values intentionally trigger a page reset.
   React.useEffect(() => {
     setPage(0);
   }, [hostQ, queryQ, method, size]);
 
   // Load the current page. Auto-refresh only on page 0 (newest) so paging back
   // through history isn't yanked out from under the user.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reloadTick is an explicit manual-refetch trigger.
   React.useEffect(() => {
     let alive = true;
     const load = () => {
@@ -130,13 +251,17 @@ export default function TrafficPage() {
         .then((r) => {
           if (alive) setTraffic(r);
         })
-        .catch(() => {});
+        .catch(() => {
+          // Keep the last successful snapshot during transient refresh failures.
+        });
       api
         .trafficHosts()
         .then((r) => {
           if (alive) setHosts(r.hosts ?? []);
         })
-        .catch(() => {});
+        .catch(() => {
+          // Keep the last successful host list during transient refresh failures.
+        });
     };
     load();
     const t = setInterval(() => {
@@ -155,22 +280,21 @@ export default function TrafficPage() {
 
   const confirmDelete = () => {
     setDeleting(true);
-    const p =
-      deleteMode === "selected"
-        ? api.trafficDeleteHosts(selectedHosts)
-        : api.trafficDeleteHost(hostQ);
+    const p = deleteMode === "selected" ? api.trafficDeleteHosts(selectedHosts) : api.trafficDeleteHost(hostQ);
     p.then(() => {
-        setDeleteMode(null);
-        setSelected(null);
-        setDetail(null);
-        if (deleteMode === "selected") {
-          setSelectedHosts([]);
-          setPickerOpen(false);
-        }
-        setPage(0);
-        setReloadTick((t) => t + 1);
+      setDeleteMode(null);
+      setSelected(null);
+      setDetail(null);
+      if (deleteMode === "selected") {
+        setSelectedHosts([]);
+        setPickerOpen(false);
+      }
+      setPage(0);
+      setReloadTick((t) => t + 1);
+    })
+      .catch(() => {
+        // Keep the confirmation open so the user can retry a failed deletion.
       })
-      .catch(() => {})
       .finally(() => setDeleting(false));
   };
 
@@ -210,9 +334,7 @@ export default function TrafficPage() {
       <div className="flex items-center justify-between gap-4">
         <div>
           <h1 className="text-xl font-semibold tracking-tight">流量</h1>
-          <p className="text-muted-foreground text-sm">
-            全局录制代理 · 所有 HTTP 往来
-          </p>
+          <p className="text-muted-foreground text-sm">全局录制代理 · 所有 HTTP 往来</p>
         </div>
         <div className="flex items-center gap-4 text-sm">
           <span
@@ -226,11 +348,7 @@ export default function TrafficPage() {
             <RadioTowerIcon className="size-3.5" />
             {traffic?.enabled ? "录制中" : "已停用"}
           </span>
-          {traffic?.proxy && (
-            <span className="font-mono text-xs text-muted-foreground">
-              {traffic.proxy}
-            </span>
-          )}
+          {traffic?.proxy && <span className="font-mono text-xs text-muted-foreground">{traffic.proxy}</span>}
           <span className="text-xs text-muted-foreground">
             共 <span className="tabular-nums">{traffic?.count ?? 0}</span> 条
           </span>
@@ -266,29 +384,25 @@ export default function TrafficPage() {
             </div>
             <div className="max-h-64 overflow-y-auto">
               {hosts.length === 0 ? (
-                <div className="px-3 py-6 text-center text-xs text-muted-foreground">
-                  暂无流量记录
-                </div>
+                <div className="px-3 py-6 text-center text-xs text-muted-foreground">暂无流量记录</div>
               ) : (
-                hosts.map((h) => (
+                hosts.map((h, index) => (
                   <label
                     key={h.host}
+                    htmlFor={`traffic-host-${index}`}
                     className="flex cursor-pointer items-center gap-2 px-3 py-1.5 text-xs hover:bg-accent"
                   >
                     <Checkbox
+                      id={`traffic-host-${index}`}
                       checked={selectedHosts.includes(h.host)}
                       onCheckedChange={() =>
                         setSelectedHosts((prev) =>
-                          prev.includes(h.host)
-                            ? prev.filter((x) => x !== h.host)
-                            : [...prev, h.host],
+                          prev.includes(h.host) ? prev.filter((x) => x !== h.host) : [...prev, h.host],
                         )
                       }
                     />
                     <span className="truncate font-mono">{h.host}</span>
-                    <span className="ml-auto shrink-0 tabular-nums text-muted-foreground">
-                      {h.count}
-                    </span>
+                    <span className="ml-auto shrink-0 tabular-nums text-muted-foreground">{h.count}</span>
                   </label>
                 ))
               )}
@@ -310,12 +424,7 @@ export default function TrafficPage() {
           </PopoverContent>
         </Popover>
         <div className="relative w-48">
-          <Input
-            placeholder="host…"
-            value={host}
-            onChange={(e) => setHost(e.target.value)}
-            className="h-8"
-          />
+          <Input placeholder="host…" value={host} onChange={(e) => setHost(e.target.value)} className="h-8" />
         </div>
         <Button
           variant="destructive"
@@ -391,8 +500,8 @@ export default function TrafficPage() {
         </div>
       </div>
 
-      {/* History table + detail (Burp-style split) */}
-      <div className="flex h-[calc(100vh-15rem)] min-h-0 flex-col gap-3">
+      {/* 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">
           <div className="min-h-0 flex-1 overflow-auto">
             <Table>
@@ -411,50 +520,29 @@ export default function TrafficPage() {
                 {exchanges.map((e) => (
                   <TableRow
                     key={e.id}
-                    className={cn(
-                      "cursor-pointer",
-                      selected?.id === e.id && "bg-accent hover:bg-accent",
-                    )}
+                    className={cn("cursor-pointer", selected?.id === e.id && "bg-accent hover:bg-accent")}
                     onClick={() => setSelected(e)}
                   >
-                    <TableCell className="text-xs text-muted-foreground tabular-nums">
-                      {fmtTime(e.ts)}
-                    </TableCell>
+                    <TableCell className="text-xs text-muted-foreground tabular-nums">{fmtTime(e.ts)}</TableCell>
                     <TableCell className="font-mono text-xs">{e.host}</TableCell>
                     <TableCell>
-                      <Badge variant="outline" className="font-mono text-xs">
-                        {e.method}
-                      </Badge>
+                      <MethodBadge method={e.method} />
                     </TableCell>
                     <TableCell className="max-w-0">
-                      <span className="block truncate font-mono text-xs">
-                        {e.url}
-                      </span>
+                      <span className="block truncate font-mono text-xs">{e.url}</span>
                     </TableCell>
                     <TableCell>
-                      <span
-                        className={cn(
-                          "font-mono text-xs font-semibold tabular-nums",
-                          statusTone(e.status),
-                        )}
-                      >
+                      <span className={cn("font-mono text-xs font-semibold tabular-nums", statusTone(e.status))}>
                         {e.status}
                       </span>
                     </TableCell>
-                    <TableCell className="text-xs text-muted-foreground">
-                      {e.content_type}
-                    </TableCell>
-                    <TableCell className="text-right text-xs tabular-nums">
-                      {fmtBytes(e.resp_len)}
-                    </TableCell>
+                    <TableCell className="text-xs text-muted-foreground">{e.content_type}</TableCell>
+                    <TableCell className="text-right text-xs tabular-nums">{fmtBytes(e.resp_len)}</TableCell>
                   </TableRow>
                 ))}
                 {exchanges.length === 0 && (
                   <TableRow>
-                    <TableCell
-                      colSpan={7}
-                      className="py-12 text-center text-sm text-muted-foreground"
-                    >
+                    <TableCell colSpan={7} className="py-12 text-center text-sm text-muted-foreground">
                       {traffic === null ? "加载中…" : "没有匹配的流量。"}
                     </TableCell>
                   </TableRow>
@@ -463,66 +551,60 @@ export default function TrafficPage() {
             </Table>
           </div>
         </Card>
-
-        {/* Raw request/response pane */}
-        {selected && (
-          <Card className="flex h-[42%] min-h-0 flex-col overflow-hidden py-0">
-            <div className="flex items-center gap-2 border-b px-3 py-2">
-              <Badge variant="outline" className="font-mono text-xs">
-                {selected.method}
-              </Badge>
-              <span className="truncate font-mono text-xs">
-                {selected.host}
-                {selected.url}
-              </span>
-              <span
-                className={cn(
-                  "ml-auto font-mono text-xs font-semibold tabular-nums",
-                  statusTone(selected.status),
-                )}
-              >
-                {selected.status}
-              </span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-7 shrink-0"
-                onClick={() => setSelected(null)}
-              >
-                <XIcon />
-              </Button>
-            </div>
-            <div className="grid min-h-0 flex-1 grid-cols-2 divide-x">
-              {(
-                [
-                  ["请求 Request", detail?.req],
-                  ["响应 Response", detail?.resp],
-                ] as const
-              ).map(([label, body]) => (
-                <div key={label} className="flex min-h-0 min-w-0 flex-col">
-                  <div className="border-b px-3 py-1 text-[11px] font-medium text-muted-foreground">
-                    {label}
-                  </div>
-                  <div className="min-h-0 flex-1 overflow-auto">
-                    {detailLoading ? (
-                      <div className="flex items-center gap-2 p-3 text-xs text-muted-foreground">
-                        <Loader2Icon className="size-3.5 animate-spin" />
-                        加载报文…
-                      </div>
-                    ) : (
-                      <pre className="p-3 font-mono text-xs break-all whitespace-pre-wrap">
-                        {body || "（空）"}
-                      </pre>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Card>
-        )}
       </div>
 
-      <AlertDialog open={deleteMode !== null} onOpenChange={(o) => { if (!o) setDeleteMode(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 && (
+            <>
+              <SheetHeader className="border-b px-5 py-4">
+                <div className="flex items-center gap-2 pr-8">
+                  <MethodBadge method={selected.method} />
+                  <Badge variant="secondary" className={cn("font-mono tabular-nums", statusTone(selected.status))}>
+                    {selected.status}
+                  </Badge>
+                  <span className="ml-auto text-xs text-muted-foreground tabular-nums">{fmtTime(selected.ts)}</span>
+                </div>
+                <SheetTitle className="break-all font-mono">{selected.host}</SheetTitle>
+                <SheetDescription className="break-all font-mono">{selected.url}</SheetDescription>
+              </SheetHeader>
+              <Tabs defaultValue="request" className="min-h-0 flex-1 gap-0">
+                <TabsList className="mx-5 mt-4 grid w-auto grid-cols-2">
+                  <TabsTrigger value="request">请求 Request</TabsTrigger>
+                  <TabsTrigger value="response">响应 Response</TabsTrigger>
+                </TabsList>
+                <TabsContent value="request" className="min-h-0 overflow-auto">
+                  {detailLoading ? (
+                    <div className="flex items-center gap-2 p-5 text-xs text-muted-foreground">
+                      <Loader2Icon className="size-3.5 animate-spin" />
+                      加载报文…
+                    </div>
+                  ) : (
+                    <HttpCodeBlock raw={requestWithHost(detail?.req ?? "", selected)} />
+                  )}
+                </TabsContent>
+                <TabsContent value="response" className="min-h-0 overflow-auto">
+                  {detailLoading ? (
+                    <div className="flex items-center gap-2 p-5 text-xs text-muted-foreground">
+                      <Loader2Icon className="size-3.5 animate-spin" />
+                      加载报文…
+                    </div>
+                  ) : (
+                    <HttpCodeBlock raw={detail?.resp ?? ""} />
+                  )}
+                </TabsContent>
+              </Tabs>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog
+        open={deleteMode !== null}
+        onOpenChange={(o) => {
+          if (!o) setDeleteMode(null);
+        }}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
@@ -533,9 +615,7 @@ export default function TrafficPage() {
             <AlertDialogDescription>
               {deleteMode === "selected" ? (
                 <>
-                  将永久删除{" "}
-                  <span className="font-semibold tabular-nums">{selectedHosts.length}</span>{" "}
-                  个目标（
+                  将永久删除 <span className="font-semibold tabular-nums">{selectedHosts.length}</span> 个目标（
                   <span className="font-mono">
                     {selectedHosts.slice(0, 3).join("、")}
                     {selectedHosts.length > 3 ? "…" : ""}
@@ -544,8 +624,7 @@ export default function TrafficPage() {
                 </>
               ) : (
                 <>
-                  将永久删除 host 包含{" "}
-                  <span className="font-mono font-semibold">{hostQ}</span>{" "}
+                  将永久删除 host 包含 <span className="font-mono font-semibold">{hostQ}</span>{" "}
                   的所有流量记录（含请求/响应原文），此操作不可撤销。
                 </>
               )}

web/src/components/agent-editor.tsx

@@ -23,6 +23,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Markdown } from "@/components/markdown";
 import { api } from "@/lib/api";
 import { cn } from "@/lib/utils";
 import type { Agent, AgentDetail, AgentTrigger, MCPServer, PromptVar, PromptVersion, Settings, SkillItem, Tool } from "@/lib/types";
@@ -397,9 +398,9 @@ export function AgentEditor({ agentKey, onSaved }: { agentKey: string; onSaved?:
                   <DialogTitle>渲染预览</DialogTitle>
                   <DialogDescription>所有 {`{{.Var}}`} 已由后端用示例值替换。</DialogDescription>
                 </DialogHeader>
-                <pre className="bg-muted max-h-[60vh] overflow-auto whitespace-pre-wrap rounded-md p-3 font-mono text-xs">
-                  {preview}
-                </pre>
+                <div className="max-h-[60vh] overflow-auto rounded-md border bg-muted/30 p-3">
+                  <Markdown text={preview} />
+                </div>
               </DialogContent>
             </Dialog>
             <Button size="sm" onClick={savePrompt}>

web/src/components/copy-button.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { cn, copyText } from "@/lib/utils";
+
+type CopyButtonProps = {
+  // 要复制的文本;为空则按钮禁用。
+  text: string | null | undefined;
+  // 复制成功后的 toast 文案,默认「已复制」。
+  successMessage?: string;
+  label?: React.ReactNode;
+  size?: React.ComponentProps<typeof Button>["size"];
+  variant?: React.ComponentProps<typeof Button>["variant"];
+  className?: string;
+};
+
+// CopyButton 统一的「复制到剪贴板」按钮:内置成功/失败反馈,并在 HTTP 非安全上下文
+// 下自动降级(见 copyText)。
+export function CopyButton({
+  text,
+  successMessage = "已复制",
+  label = "复制",
+  size = "sm",
+  variant = "outline",
+  className,
+}: CopyButtonProps) {
+  const [copied, setCopied] = React.useState(false);
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+
+  async function handleCopy() {
+    if (!text) return;
+    const ok = await copyText(text);
+    if (ok) {
+      setCopied(true);
+      toast.success(successMessage);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 1500);
+    } else {
+      toast.error("复制失败，请手动选择文本复制");
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      size={size}
+      variant={variant}
+      className={cn(className)}
+      disabled={!text}
+      onClick={handleCopy}
+    >
+      {copied ? <CheckIcon /> : <CopyIcon />}
+      {label}
+    </Button>
+  );
+}

web/src/components/transcript.tsx

@@ -18,6 +18,7 @@ import {
 import { toast } from "sonner";
 import { api } from "@/lib/api";
 import { Markdown } from "@/components/markdown";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { Activity } from "@/lib/types";
 
@@ -208,7 +209,7 @@ function InterceptCard({
   }, [pendingId]);
 
   async function decide(decision: "allowed" | "denied") {
-    if (!pendingId || deciding) return;
+    if (step.inherited || !pendingId || deciding) return;
     setDeciding(true);
     try {
       await api.interceptDecide(pendingId, decision);
@@ -246,7 +247,9 @@ function InterceptCard({
           </div>
         </div>
 
-        {decided ? (
+        {step.inherited ? (
+          <Badge variant="outline">历史记录 · 只读</Badge>
+        ) : decided ? (
           <span className={
             "shrink-0 rounded px-2 py-0.5 text-[11px] font-medium " +
             (decided === "allowed"

web/src/lib/utils.ts

@@ -45,6 +45,35 @@ export function radixOverlayWasOpenAtPointerDown(): boolean {
   return overlayOpenAtLastPointerDown;
 }
 
+// copyText 把文本写入剪贴板,返回是否成功。
+// 背景:navigator.clipboard 仅在安全上下文(HTTPS / localhost)可用;通过 IP + HTTP
+// 访问时它为 undefined,此时降级到 execCommand("copy")。
+export async function copyText(text: string): Promise<boolean> {
+  if (navigator.clipboard && window.isSecureContext) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // 继续走降级方案
+    }
+  }
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    textarea.style.top = "0";
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
 export const getInitials = (str: string): string => {
   if (typeof str !== "string" || !str.trim()) return "?";