feat: copyable task IDs on cards and detail panel

frontend/src/components/TaskCard.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import type { Task, TaskStatus, TaskPriority } from "../lib/types";
 
 const priorityColors: Record<TaskPriority, string> = {
@@ -65,8 +66,18 @@ export function TaskCard({
   isActive,
   onClick,
 }: TaskCardProps) {
+  const [idCopied, setIdCopied] = useState(false);
   const actions = statusActions[task.status] || [];
   const noteCount = task.progressNotes?.length || 0;
+  const shortId = task.id.slice(0, 8);
+
+  const handleCopyId = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(task.id).then(() => {
+      setIdCopied(true);
+      setTimeout(() => setIdCopied(false), 1500);
+    });
+  };
 
   return (
     <div
@@ -92,6 +103,16 @@ export function TaskCard({
           </div>
 
           <div className="flex items-center gap-2 mb-2 flex-wrap">
+            <span
+              className="text-xs px-1.5 py-0.5 rounded font-mono bg-gray-100 text-gray-500 cursor-pointer hover:bg-gray-200 transition"
+              title={`Click to copy: ${task.id}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+            >
+              {task.id.slice(0, 8)}
+            </span>
             <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${priorityColors[task.priority]}`}>
               {task.priority}
             </span>
@@ -106,6 +127,17 @@ export function TaskCard({
                 💬 {noteCount}
               </span>
             )}
+            <button
+              onClick={handleCopyId}
+              className="text-xs font-mono text-gray-300 hover:text-amber-600 transition cursor-pointer ml-auto"
+              title={`Copy full ID: ${task.id}`}
+            >
+              {idCopied ? (
+                <span className="text-green-500">✓ copied</span>
+              ) : (
+                <span>{shortId}…</span>
+              )}
+            </button>
           </div>
 
           {task.description && (