feat(web): show full deviceId with copy button and toast feedback

Display full UUID instead of truncated 8-char slice. Add ghost button
with copy icon that writes deviceId to clipboard, switches to checkmark
for 2s, and shows a sonner toast confirmation.

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

apps/web/app/components/chat.tsx

@@ -1,27 +1,54 @@
 "use client";
 
-import { useRef } from "react";
+import { useRef, useState, useCallback } from "react";
 import { SidebarTrigger } from "@multica/ui/components/ui/sidebar";
+import { Button } from "@multica/ui/components/ui/button";
 import { ChatInput } from "@multica/ui/components/chat-input";
 import { MemoizedMarkdown } from "@multica/ui/components/markdown";
 import { useMessages } from "../hooks/use-messages";
 import { useDeviceId } from "../hooks/use-device-id";
 import { useScrollFade } from "../hooks/use-scroll-fade";
 import { cn } from "@multica/ui/lib/utils";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Copy01Icon, CheckmarkCircle02Icon } from "@hugeicons/core-free-icons";
+import { toast } from "sonner";
 
 export function Chat() {
   const deviceId = useDeviceId();
   const messages = useMessages();
   const mainRef = useRef<HTMLElement>(null);
   const fadeStyle = useScrollFade(mainRef);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    if (!deviceId) return;
+    await navigator.clipboard.writeText(deviceId);
+    setCopied(true);
+    toast.success("Device ID copied");
+    setTimeout(() => setCopied(false), 2000);
+  }, [deviceId]);
 
   return (
     <div className="h-dvh flex flex-col overflow-hidden w-full">
       <header className="flex items-center gap-2 p-2">
         <SidebarTrigger />
         <span className="text-xs text-muted-foreground font-mono">
-          {deviceId ? deviceId.slice(0, 8) : "\u00A0"}
+          {deviceId || "\u00A0"}
         </span>
+        {deviceId && (
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            onClick={handleCopy}
+            aria-label="Copy device ID"
+          >
+            <HugeiconsIcon
+              icon={copied ? CheckmarkCircle02Icon : Copy01Icon}
+              strokeWidth={2}
+              className={cn("size-3", copied && "text-green-500")}
+            />
+          </Button>
+        )}
       </header>
 
       <main ref={mainRef} className="flex-1 overflow-y-auto min-h-0" style={fadeStyle}>