From d6e4938aa4e4deb279564b134d6868f46f345af7 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 17 Mar 2026 04:23:20 +0800
Subject: [PATCH] Fix task assignment visibility: show column always, wire
 detail panel

- TaskRow: Show 'unassigned' label (muted) instead of invisible dash
  so the assigned column is always visible in the task list.
- TaskDetailPanel: Replace old person_id dropdown with assignment chips
  showing avatar + name for each assignee. Unassigned shows muted text
  instead of a dash.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/projects/TaskDetailPanel.tsx   | 29 ++++++++++---------
 frontend/src/components/projects/TaskRow.tsx  |  2 +-
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/projects/TaskDetailPanel.tsx b/frontend/src/components/projects/TaskDetailPanel.tsx
index 87c3bd7..41fabd4 100644
--- a/frontend/src/components/projects/TaskDetailPanel.tsx
+++ b/frontend/src/components/projects/TaskDetailPanel.tsx
@@ -383,21 +383,24 @@ export default function TaskDetailPanel({
               <User className="h-3 w-3" />
               Assigned
             </div>
-            {isEditing ? (
-              <Select
-                value={editState.person_id}
-                onChange={(e) => setEditState((s) => ({ ...s, person_id: e.target.value }))}
-                className="h-8 text-xs"
-              >
-                <option value="">Unassigned</option>
-                {people.map((p) => (
-                  <option key={p.id} value={String(p.id)}>
-                    {p.name}
-                  </option>
+            {task.assignments && task.assignments.length > 0 ? (
+              <div className="flex flex-wrap gap-1.5">
+                {task.assignments.map((a) => (
+                  <span
+                    key={a.user_id}
+                    className="inline-flex items-center gap-1.5 bg-secondary rounded-full pl-1 pr-2.5 py-0.5"
+                  >
+                    <span className="w-5 h-5 rounded-full bg-muted flex items-center justify-center shrink-0">
+                      <span className="text-[9px] font-medium text-muted-foreground">
+                        {(a.user_name ?? '?').charAt(0).toUpperCase()}
+                      </span>
+                    </span>
+                    <span className="text-xs">{a.user_name ?? 'Unknown'}</span>
+                  </span>
                 ))}
-              </Select>
+              </div>
             ) : (
-              <p className="text-sm">{assignedPerson ? assignedPerson.name : '—'}</p>
+              <p className="text-sm text-muted-foreground/50">Unassigned</p>
             )}
           </div>
         </div>
diff --git a/frontend/src/components/projects/TaskRow.tsx b/frontend/src/components/projects/TaskRow.tsx
index ebea04c..35b3888 100644
--- a/frontend/src/components/projects/TaskRow.tsx
+++ b/frontend/src/components/projects/TaskRow.tsx
@@ -147,7 +147,7 @@ export default function TaskRow({
             </span>
           </>
         ) : (
-          <span className="text-[11px] text-transparent">—</span>
+          <span className="text-[11px] text-muted-foreground/30">unassigned</span>
         )}
       </span>