fix(panel): copyable task-id chip + stable, non-shifting task header

The task header rendered 'Task #<uuid>: <title>' as one click-to-edit <h1>,
so the UUID could not be selected/copied (clicking it entered title-edit) and
the editable field silently dropped the id. Worse, the title + status + team +
type all shared one flex-wrap row with auto-width dropdowns, so a long title or
a wider selected label shoved the controls — and the Actions button — to new
positions on every render.

Restructure for stability:
- Title is its own row, editable (no UUID), and truncates on overflow — it can
  never push the controls or Actions.
- A read-only #<short-id> chip with a copy button (reuses CopyButton, which has
  the LAN/http clipboard fallback) copies the FULL uuid.
- Status and team dropdowns are fixed-width (w-40 / w-36), so changing the
  selected value's label width can't shift a neighbor.
- Actions is pinned top-right (shrink-0) and never moves regardless of title
  length or dropdown contents.

panel typecheck + eslint clean.

panel/src/components/tasks/task-detail/task-header.tsx

@@ -3,7 +3,11 @@
 import { useState, useRef, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { Task, TaskStatus, Team } from "@/types";
-import { useDeleteTask, useUpdateTask, useTaskValidTransitions } from "@/hooks/use-tasks";
+import {
+  useDeleteTask,
+  useUpdateTask,
+  useTaskValidTransitions,
+} from "@/hooks/use-tasks";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -50,24 +54,40 @@ import {
 import { toast } from "sonner";
 import Link from "next/link";
 import { TaskTypeBadge } from "../task-type-badge";
+import { CopyButton } from "@/components/ui/copy-button";
 
 // Status badge colors
 const statusColors: Record<TaskStatus, string> = {
-  [TaskStatus.BACKLOG]: "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400",
+  [TaskStatus.BACKLOG]:
-  [TaskStatus.PENDING]: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
+    "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400",
-  [TaskStatus.CLAIMED]: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+  [TaskStatus.PENDING]:
-  [TaskStatus.IN_PROGRESS]: "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200",
+    "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
-  [TaskStatus.BLOCKED]: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+  [TaskStatus.CLAIMED]:
-  [TaskStatus.PAUSED]: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
+    "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
-  [TaskStatus.VERIFYING]: "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300",
+  [TaskStatus.IN_PROGRESS]:
-  [TaskStatus.NEEDS_REVISION]: "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
+    "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200",
-  [TaskStatus.AWAITING_QA]: "bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200",
+  [TaskStatus.BLOCKED]:
-  [TaskStatus.AWAITING_DOCUMENTATION]: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300",
+    "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
-  [TaskStatus.AWAITING_PR_REVIEW]: "bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-300",
+  [TaskStatus.PAUSED]:
-  [TaskStatus.AWAITING_PM_REVIEW]: "bg-orange-200 text-orange-800 dark:bg-orange-800 dark:text-orange-200",
+    "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
-  [TaskStatus.AWAITING_CEO_APPROVAL]: "bg-amber-200 text-amber-800 dark:bg-amber-800 dark:text-amber-200",
+  [TaskStatus.VERIFYING]:
-  [TaskStatus.COMPLETED]: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
+    "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300",
-  [TaskStatus.CANCELLED]: "bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400",
+  [TaskStatus.NEEDS_REVISION]:
+    "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
+  [TaskStatus.AWAITING_QA]:
+    "bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200",
+  [TaskStatus.AWAITING_DOCUMENTATION]:
+    "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300",
+  [TaskStatus.AWAITING_PR_REVIEW]:
+    "bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-300",
+  [TaskStatus.AWAITING_PM_REVIEW]:
+    "bg-orange-200 text-orange-800 dark:bg-orange-800 dark:text-orange-200",
+  [TaskStatus.AWAITING_CEO_APPROVAL]:
+    "bg-amber-200 text-amber-800 dark:bg-amber-800 dark:text-amber-200",
+  [TaskStatus.COMPLETED]:
+    "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
+  [TaskStatus.CANCELLED]:
+    "bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400",
 };
 
 const statusLabels: Record<TaskStatus, string> = {
@@ -99,13 +119,14 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
   const updateTask = useUpdateTask();
   // Fetch valid next statuses from GET /tasks/{id}/valid-transitions.
   // Falls back to [] while loading or on error — the Select is disabled during loading.
-  const { data: validTransitionsData, isLoading: isTransitionsLoading } = useTaskValidTransitions(task.id, task.status);
+  const { data: validTransitionsData, isLoading: isTransitionsLoading } =
+    useTaskValidTransitions(task.id, task.status);
   // Exclude the current status: it is always rendered first (below), so a stale
   // cache or a backend list that re-includes it would duplicate the item. Radix
   // Select requires unique item values, so a duplicate also garbles the trigger
   // label (it renders as e.g. "Completed Completed").
   const nextStatuses: TaskStatus[] = (validTransitionsData ?? []).filter(
-    (s) => s !== task.status
+    (s) => s !== task.status,
   );
   // God-mode: the panel always acts as the CEO/operator, so the dropdown also
   // offers every OTHER status as a forced admin override — letting the CEO
@@ -114,7 +135,7 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
   // task). These route through the audited admin-override path, not lifecycle
   // verbs. See handleStatusChange.
   const overrideStatuses: TaskStatus[] = Object.values(TaskStatus).filter(
-    (s) => s !== task.status && !nextStatuses.includes(s)
+    (s) => s !== task.status && !nextStatuses.includes(s),
   );
   const [deleteOpen, setDeleteOpen] = useState(false);
 
@@ -242,79 +263,186 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
 
   // Determine available lifecycle actions based on current status
   const getAvailableActions = () => {
-    const actions: Array<{ label: string; action: string; icon?: React.ReactNode }> = [];
+    const actions: Array<{
+      label: string;
+      action: string;
+      icon?: React.ReactNode;
+    }> = [];
 
     switch (task.status) {
       case TaskStatus.PENDING:
-        actions.push({ label: "Claim Task", action: "claim", icon: <Play className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Claim Task",
+          action: "claim",
+          icon: <Play className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.CLAIMED:
-        actions.push({ label: "Start Work", action: "start", icon: <Play className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Start Work",
+          action: "start",
+          icon: <Play className="h-4 w-4 mr-2" />,
+        });
         // PM can create branch for tasks without branch (all tasks follow git workflow)
         if (!task.branch_name) {
-          actions.push({ label: "Create Branch", action: "create-branch", icon: <GitBranch className="h-4 w-4 mr-2" /> });
+          actions.push({
+            label: "Create Branch",
+            action: "create-branch",
+            icon: <GitBranch className="h-4 w-4 mr-2" />,
+          });
         }
         break;
       case TaskStatus.IN_PROGRESS:
-        actions.push({ label: "Pause", action: "pause", icon: <Pause className="h-4 w-4 mr-2" /> });
+        actions.push({
-        actions.push({ label: "Mark Blocked", action: "block", icon: <AlertTriangle className="h-4 w-4 mr-2" /> });
+          label: "Pause",
+          action: "pause",
+          icon: <Pause className="h-4 w-4 mr-2" />,
+        });
+        actions.push({
+          label: "Mark Blocked",
+          action: "block",
+          icon: <AlertTriangle className="h-4 w-4 mr-2" />,
+        });
         // Create PR action for tasks with branch but no PR
         if (task.branch_name && !task.pr_number) {
-          actions.push({ label: "Create PR", action: "create-pr", icon: <GitPullRequest className="h-4 w-4 mr-2" /> });
+          actions.push({
+            label: "Create PR",
+            action: "create-pr",
+            icon: <GitPullRequest className="h-4 w-4 mr-2" />,
+          });
         }
-        actions.push({ label: "Self Verify", action: "verify", icon: <CheckCircle className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Self Verify",
+          action: "verify",
+          icon: <CheckCircle className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.BLOCKED:
-        actions.push({ label: "Unblock", action: "unblock", icon: <Play className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Unblock",
+          action: "unblock",
+          icon: <Play className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.PAUSED:
-        actions.push({ label: "Resume", action: "resume", icon: <Play className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Resume",
+          action: "resume",
+          icon: <Play className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.VERIFYING:
-        actions.push({ label: "Submit for QA", action: "submit-qa", icon: <CheckCircle className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Submit for QA",
+          action: "submit-qa",
+          icon: <CheckCircle className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.AWAITING_QA:
-        actions.push({ label: "Pass QA", action: "pass-qa", icon: <CheckCircle className="h-4 w-4 mr-2" /> });
+        actions.push({
-        actions.push({ label: "Fail QA", action: "fail-qa", icon: <XCircle className="h-4 w-4 mr-2" /> });
+          label: "Pass QA",
+          action: "pass-qa",
+          icon: <CheckCircle className="h-4 w-4 mr-2" />,
+        });
+        actions.push({
+          label: "Fail QA",
+          action: "fail-qa",
+          icon: <XCircle className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.AWAITING_DOCUMENTATION:
         // Parallel phase - show status and available actions
         if (!task.docs_complete) {
-          actions.push({ label: "Mark Docs Complete", action: "docs-complete", icon: <FileCheck className="h-4 w-4 mr-2" /> });
+          actions.push({
+            label: "Mark Docs Complete",
+            action: "docs-complete",
+            icon: <FileCheck className="h-4 w-4 mr-2" />,
+          });
         }
         // Only show submit for PM review when both docs and PR are ready
         if (task.docs_complete && task.pr_created) {
-          actions.push({ label: "Submit for PM Review", action: "submit-pm-review", icon: <Send className="h-4 w-4 mr-2" /> });
+          actions.push({
+            label: "Submit for PM Review",
+            action: "submit-pm-review",
+            icon: <Send className="h-4 w-4 mr-2" />,
+          });
         }
         break;
       case TaskStatus.AWAITING_PM_REVIEW:
-        actions.push({ label: "Approve & Complete", action: "complete", icon: <ThumbsUp className="h-4 w-4 mr-2" /> });
+        actions.push({
-        actions.push({ label: "Escalate to CEO", action: "escalate-to-ceo", icon: <Send className="h-4 w-4 mr-2" /> });
+          label: "Approve & Complete",
-        actions.push({ label: "Request Changes", action: "request-changes", icon: <ThumbsDown className="h-4 w-4 mr-2" /> });
+          action: "complete",
+          icon: <ThumbsUp className="h-4 w-4 mr-2" />,
+        });
+        actions.push({
+          label: "Escalate to CEO",
+          action: "escalate-to-ceo",
+          icon: <Send className="h-4 w-4 mr-2" />,
+        });
+        actions.push({
+          label: "Request Changes",
+          action: "request-changes",
+          icon: <ThumbsDown className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.AWAITING_CEO_APPROVAL:
-        actions.push({ label: "Approve & Merge", action: "approve-and-merge", icon: <ThumbsUp className="h-4 w-4 mr-2" /> });
+        actions.push({
-        actions.push({ label: "Request Changes", action: "ceo-reject", icon: <ThumbsDown className="h-4 w-4 mr-2" /> });
+          label: "Approve & Merge",
+          action: "approve-and-merge",
+          icon: <ThumbsUp className="h-4 w-4 mr-2" />,
+        });
+        actions.push({
+          label: "Request Changes",
+          action: "ceo-reject",
+          icon: <ThumbsDown className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.CANCELLED:
-        actions.push({ label: "Reopen Task", action: "reopen", icon: <Play className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Reopen Task",
+          action: "reopen",
+          icon: <Play className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.BACKLOG:
-        actions.push({ label: "Activate Task", action: "activate", icon: <Play className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Activate Task",
+          action: "activate",
+          icon: <Play className="h-4 w-4 mr-2" />,
+        });
         break;
       case TaskStatus.NEEDS_REVISION:
-        actions.push({ label: "Start Revision", action: "start-revision", icon: <Play className="h-4 w-4 mr-2" /> });
+        actions.push({
+          label: "Start Revision",
+          action: "start-revision",
+          icon: <Play className="h-4 w-4 mr-2" />,
+        });
         break;
     }
 
     // Cancel is always available for non-terminal states
-    if (task.status !== TaskStatus.COMPLETED && task.status !== TaskStatus.CANCELLED) {
+    if (
-      actions.push({ label: "Cancel Task", action: "cancel", icon: <XCircle className="h-4 w-4 mr-2" /> });
+      task.status !== TaskStatus.COMPLETED &&
+      task.status !== TaskStatus.CANCELLED
+    ) {
+      actions.push({
+        label: "Cancel Task",
+        action: "cancel",
+        icon: <XCircle className="h-4 w-4 mr-2" />,
+      });
     }
 
     // Merge PR is available whenever task.pr_number is set and the task is not in a terminal state
-    if (task.pr_number && task.status !== TaskStatus.COMPLETED && task.status !== TaskStatus.CANCELLED) {
+    if (
-      actions.push({ label: "Merge PR", action: "merge-pr", icon: <GitMerge className="h-4 w-4 mr-2" /> });
+      task.pr_number &&
+      task.status !== TaskStatus.COMPLETED &&
+      task.status !== TaskStatus.CANCELLED
+    ) {
+      actions.push({
+        label: "Merge PR",
+        action: "merge-pr",
+        icon: <GitMerge className="h-4 w-4 mr-2" />,
+      });
     }
 
     return actions;
@@ -323,18 +451,20 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
   const actions = getAvailableActions();
 
   return (
-    <div className="flex items-center justify-between border-b pb-4">
+    <div className="border-b pb-4">
-      <div className="flex items-center gap-4">
+      <div className="flex items-start justify-between gap-4">
+        {/* Left: back arrow + title + metadata. This column SHRINKS and the
+            title truncates, so a long title never pushes the controls or the
+            Actions menu out of place. */}
+        <div className="flex items-start gap-3 min-w-0 flex-1">
           <Link href="/tasks">
-          <Button variant="ghost" size="icon">
+            <Button variant="ghost" size="icon" className="shrink-0">
               <ArrowLeft className="h-5 w-5" />
             </Button>
           </Link>
-        <div>
+          <div className="min-w-0 flex-1">
-          {/* Title, Status, and Team - all on same row */}
+            {/* Row 1: title only — editable, no UUID. Truncates on overflow. */}
-          <div className="flex items-center gap-2 flex-wrap">
             {editingTitle ? (
-              <div className="flex items-center gap-2">
               <Input
                 ref={titleInputRef}
                 value={titleValue}
@@ -344,21 +474,37 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
                 className="text-2xl font-bold h-auto py-1 px-2 w-full"
                 disabled={updateTask.isPending}
               />
-              </div>
             ) : (
               <h1
-                className="text-2xl font-bold cursor-pointer hover:bg-muted/50 px-2 py-1 -mx-2 rounded transition-colors"
+                className="text-2xl font-bold cursor-pointer hover:bg-muted/50 px-2 py-1 -mx-2 rounded transition-colors truncate"
                 onClick={startEditingTitle}
-                title="Click to edit"
+                title={task.title}
               >
-                Task #{task.id}: {task.title}
+                {task.title}
               </h1>
             )}
 
+            {/* Row 2: copyable task id + status + team + type. The dropdowns are
+                FIXED width so changing a selected value's label width can never
+                shift a neighbor; the id is read-only and copies the FULL uuid. */}
+            <div className="flex items-center gap-2 mt-1.5">
+              <span
+                className="inline-flex shrink-0 items-center gap-1 rounded-md border bg-muted/40 px-2 py-0.5 font-mono text-xs text-muted-foreground"
+                title={task.id}
+              >
+                #{task.id.slice(0, 8)}
+                <CopyButton value={task.id} className="-mr-1 px-1 py-0" />
+              </span>
+
+              <span className="text-muted-foreground shrink-0">|</span>
+
               {/* Status Dropdown — only current status + valid next statuses from backend */}
-            <Select value={task.status} onValueChange={(v) => handleStatusChange(v as TaskStatus)}>
+              <Select
+                value={task.status}
+                onValueChange={(v) => handleStatusChange(v as TaskStatus)}
+              >
                 <SelectTrigger
-                className={`w-auto h-7 text-xs font-medium border-0 ${statusColors[task.status]}`}
+                  className={`w-40 shrink-0 h-7 text-xs font-medium border-0 ${statusColors[task.status]}`}
                   disabled={isTransitionsLoading}
                 >
                   <SelectValue />
@@ -366,7 +512,9 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
                 <SelectContent>
                   {/* Always render the current status first so the trigger value is always present */}
                   <SelectItem key={task.status} value={task.status}>
-                  <span className={`px-2 py-0.5 rounded ${statusColors[task.status]}`}>
+                    <span
+                      className={`px-2 py-0.5 rounded ${statusColors[task.status]}`}
+                    >
                       {statusLabels[task.status]}
                     </span>
                   </SelectItem>
@@ -374,7 +522,9 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
                     (GET /tasks/{id}/valid-transitions) — no local fallback array */}
                   {nextStatuses.map((status) => (
                     <SelectItem key={status} value={status}>
-                    <span className={`px-2 py-0.5 rounded ${statusColors[status]}`}>
+                      <span
+                        className={`px-2 py-0.5 rounded ${statusColors[status]}`}
+                      >
                         {statusLabels[status]}
                       </span>
                     </SelectItem>
@@ -384,7 +534,9 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
                     the operator knows it bypasses the normal lifecycle. */}
                   {overrideStatuses.map((status) => (
                     <SelectItem key={status} value={status}>
-                    <span className={`px-2 py-0.5 rounded ${statusColors[status]}`}>
+                      <span
+                        className={`px-2 py-0.5 rounded ${statusColors[status]}`}
+                      >
                         {statusLabels[status]}
                       </span>
                       <span className="ml-1 text-[10px] uppercase tracking-wide text-muted-foreground">
@@ -395,10 +547,13 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
                 </SelectContent>
               </Select>
 
-            {/* Team Dropdown - same row */}
+              {/* Team Dropdown */}
-            <span className="text-muted-foreground">|</span>
+              <span className="text-muted-foreground shrink-0">|</span>
-            <Select value={task.team} onValueChange={(v) => handleTeamChange(v as Team)}>
+              <Select
-              <SelectTrigger className="w-auto h-7 text-sm text-muted-foreground border-0 bg-transparent hover:bg-muted/50 px-2">
+                value={task.team}
+                onValueChange={(v) => handleTeamChange(v as Team)}
+              >
+                <SelectTrigger className="w-36 shrink-0 h-7 text-sm text-muted-foreground border-0 bg-transparent hover:bg-muted/50 px-2">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -413,16 +568,19 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
               {/* Task Type Badge */}
               {task.task_type && (
                 <>
-                <span className="text-muted-foreground">|</span>
+                  <span className="text-muted-foreground shrink-0">|</span>
+                  <span className="shrink-0">
                     <TaskTypeBadge type={task.task_type} />
+                  </span>
                 </>
               )}
             </div>
           </div>
         </div>
 
-      {/* Actions Menu */}
+        {/* Actions — pinned top-right; never moves regardless of title length
-      <div className="flex items-center gap-2">
+            or a dropdown's selected-label width. */}
+        <div className="shrink-0">
           {actions.length > 0 && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -472,6 +630,7 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
             </DropdownMenu>
           )}
         </div>
+      </div>
 
       {/* Delete Confirmation */}
       <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
@@ -479,7 +638,8 @@ export function TaskHeader({ task, onAction }: TaskHeaderProps) {
           <AlertDialogHeader>
             <AlertDialogTitle>Delete Task?</AlertDialogTitle>
             <AlertDialogDescription>
-              This will permanently delete &quot;{task.title}&quot;. This action cannot be undone.
+              This will permanently delete &quot;{task.title}&quot;. This action
+              cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>