Rework AgentDetail page and add CopyText component

Restructure AgentDetail page layout with cleaner tab organization
and run display. Add reusable CopyText component for copy-to-clipboard
functionality.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/CopyText.tsx

@@ -0,0 +1,48 @@
+import { useCallback, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface CopyTextProps {
+  text: string;
+  /** What to display. Defaults to `text`. */
+  children?: React.ReactNode;
+  className?: string;
+  /** Tooltip message shown after copying. Default: "Copied!" */
+  copiedLabel?: string;
+}
+
+export function CopyText({ text, children, className, copiedLabel = "Copied!" }: CopyTextProps) {
+  const [visible, setVisible] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const handleClick = useCallback(() => {
+    navigator.clipboard.writeText(text);
+    clearTimeout(timerRef.current);
+    setVisible(true);
+    timerRef.current = setTimeout(() => setVisible(false), 1500);
+  }, [text]);
+
+  return (
+    <span className="relative inline-flex">
+      <button
+        ref={triggerRef}
+        type="button"
+        className={cn(
+          "cursor-copy hover:text-foreground transition-colors",
+          className,
+        )}
+        onClick={handleClick}
+      >
+        {children ?? text}
+      </button>
+      <span
+        className={cn(
+          "pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-1.5 rounded-md bg-foreground text-background px-2 py-1 text-xs whitespace-nowrap transition-opacity duration-300",
+          visible ? "opacity-100" : "opacity-0",
+        )}
+      >
+        {copiedLabel}
+      </span>
+    </span>
+  );
+}