From 857262c6410ba45f8458918b561bdeafd1467e6c Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Sat, 28 Feb 2026 23:37:13 +0700
Subject: [PATCH] feat: Add copy-to-clipboard functionality for trace IDs and
 refine task list layouts.

---
 .../src/pages/teams/task-sections/task-list.tsx  |  2 +-
 ui/web/src/pages/teams/team-tasks-tab.tsx        |  2 +-
 ui/web/src/pages/traces/trace-detail-dialog.tsx  | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/web/src/pages/teams/task-sections/task-list.tsx b/ui/web/src/pages/teams/task-sections/task-list.tsx
index 0721f55d..d3889fa9 100644
--- a/ui/web/src/pages/teams/task-sections/task-list.tsx
+++ b/ui/web/src/pages/teams/task-sections/task-list.tsx
@@ -43,7 +43,7 @@ export function TaskList({ tasks, loading }: TaskListProps) {
           className="grid grid-cols-[1fr_90px_100px_60px] items-center gap-2 border-b px-4 py-3 last:border-0"
         >
           <div className="min-w-0">
-            <span className="truncate text-sm font-medium">{task.subject}</span>
+            <p className="truncate text-sm font-medium">{task.subject}</p>
             {task.description && (
               <p className="truncate text-xs text-muted-foreground/70">
                 {task.description}
diff --git a/ui/web/src/pages/teams/team-tasks-tab.tsx b/ui/web/src/pages/teams/team-tasks-tab.tsx
index 5943a2e9..bfd362b2 100644
--- a/ui/web/src/pages/teams/team-tasks-tab.tsx
+++ b/ui/web/src/pages/teams/team-tasks-tab.tsx
@@ -28,7 +28,7 @@ export function TeamTasksTab({ teamId, getTeamTasks }: TeamTasksTabProps) {
   }, [teamId, getTeamTasks]);
 
   return (
-    <div className="max-w-2xl space-y-6">
+    <div className="space-y-6">
       <TaskList tasks={tasks} loading={loading} />
     </div>
   );
diff --git a/ui/web/src/pages/traces/trace-detail-dialog.tsx b/ui/web/src/pages/traces/trace-detail-dialog.tsx
index b48b65d1..c885277d 100644
--- a/ui/web/src/pages/traces/trace-detail-dialog.tsx
+++ b/ui/web/src/pages/traces/trace-detail-dialog.tsx
@@ -6,7 +6,8 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
-import { ChevronRight, ChevronDown } from "lucide-react";
+import { ChevronRight, ChevronDown, Copy, Check } from "lucide-react";
+import { useClipboard } from "@/hooks/use-clipboard";
 import { formatDate, formatDuration, formatTokens, computeDurationMs } from "@/lib/format";
 import type { TraceData, SpanData } from "./hooks/use-traces";
 
@@ -48,6 +49,7 @@ export function TraceDetailDialog({ traceId, onClose, getTrace, onNavigateTrace
   const [trace, setTrace] = useState<TraceData | null>(null);
   const [spans, setSpans] = useState<SpanData[]>([]);
   const [loading, setLoading] = useState(true);
+  const { copied, copy } = useClipboard();
 
   useEffect(() => {
     setLoading(true);
@@ -67,7 +69,17 @@ export function TraceDetailDialog({ traceId, onClose, getTrace, onNavigateTrace
     <Dialog open onOpenChange={() => onClose()}>
       <DialogContent className="max-h-[85vh] w-[95vw] overflow-y-auto sm:max-w-6xl">
         <DialogHeader>
-          <DialogTitle>Trace Detail</DialogTitle>
+          <DialogTitle className="flex items-center gap-2">
+            Trace Detail
+            <button
+              type="button"
+              onClick={() => copy(traceId)}
+              className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              title="Copy trace ID"
+            >
+              {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+            </button>
+          </DialogTitle>
         </DialogHeader>
 
         {loading && !trace ? (