From 101c4c45f5c31d166cf0913a12020b431a28e29c Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Wed, 25 Mar 2026 12:13:06 +0700
Subject: [PATCH] =?UTF-8?q?style(chat):=20improve=20task=20card=20layout?=
 =?UTF-8?q?=20=E2=80=94=20full=20text,=20progress=20bar=20above=20step=20m?=
 =?UTF-8?q?essage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/web/src/components/chat/task-panel.tsx | 49 +++++++++++++----------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/ui/web/src/components/chat/task-panel.tsx b/ui/web/src/components/chat/task-panel.tsx
index 6e9c0acf..38881807 100644
--- a/ui/web/src/components/chat/task-panel.tsx
+++ b/ui/web/src/components/chat/task-panel.tsx
@@ -24,14 +24,14 @@ export function TaskPanel({ tasks, open, onClose }: TaskPanelProps) {
         <button
           type="button"
           onClick={onClose}
-          className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
         >
           <X className="h-4 w-4" />
         </button>
       </div>
 
       {/* Task list */}
-      <div className="flex-1 overflow-y-auto overscroll-contain p-2 space-y-1.5">
+      <div className="flex-1 overflow-y-auto overscroll-contain p-2 space-y-2">
         {tasks.length === 0 ? (
           <p className="px-2 py-4 text-center text-xs text-muted-foreground">No active tasks</p>
         ) : (
@@ -43,16 +43,14 @@ export function TaskPanel({ tasks, open, onClose }: TaskPanelProps) {
 }
 
 function TaskCard({ task }: { task: ActiveTeamTask }) {
+  const pct = task.progressPercent;
+
   return (
-    <div className="rounded-md border bg-card p-2 text-xs">
-      <div className="flex items-start gap-1.5">
-        <span className="shrink-0 font-mono text-muted-foreground">#{task.taskNumber}</span>
-        <span className="font-medium leading-tight line-clamp-2">{task.subject}</span>
-      </div>
-
-      <div className="mt-1.5 flex items-center gap-2 text-muted-foreground">
+    <div className="rounded-lg border bg-card p-2.5 text-xs shadow-sm">
+      {/* Header: number + owner + counters */}
+      <div className="flex items-center gap-1.5 text-muted-foreground">
+        <span className="font-mono">#{task.taskNumber}</span>
         <span className="truncate">{task.ownerDisplayName || task.ownerAgentKey || "unassigned"}</span>
-
         <span className="ml-auto flex items-center gap-2">
           {(task.commentCount ?? 0) > 0 && (
             <span className="flex items-center gap-0.5">
@@ -67,21 +65,30 @@ function TaskCard({ task }: { task: ActiveTeamTask }) {
         </span>
       </div>
 
-      {/* Progress bar */}
-      {task.progressPercent != null && (
+      {/* Progress bar — above the step message */}
+      {pct != null && (
         <div className="mt-1.5">
-          <div className="flex items-center justify-between text-[10px] text-muted-foreground">
-            <span className="truncate">{task.progressStep || "In progress"}</span>
-            <span className="shrink-0 ml-1">{task.progressPercent}%</span>
-          </div>
-          <div className="mt-0.5 h-1 overflow-hidden rounded-full bg-muted">
-            <div
-              className="h-full rounded-full bg-primary transition-all duration-300"
-              style={{ width: `${Math.min(task.progressPercent, 100)}%` }}
-            />
+          <div className="flex items-center gap-1.5">
+            <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full rounded-full bg-primary transition-all duration-300"
+                style={{ width: `${Math.min(pct, 100)}%` }}
+              />
+            </div>
+            <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">{pct}%</span>
           </div>
         </div>
       )}
+
+      {/* Step message — full text, no truncation */}
+      {task.progressStep && (
+        <p className="mt-1 text-[11px] leading-snug text-muted-foreground">
+          {task.progressStep}
+        </p>
+      )}
+
+      {/* Subject — full text */}
+      <p className="mt-1.5 font-medium leading-snug">{task.subject}</p>
     </div>
   );
 }