fix: tighten task detail component interactions

app-instance/frontend/components/task-detail/TaskTimelineCard.tsx

@@ -93,6 +93,24 @@ function cardTypeLabel(type: TaskTimelineCardType, locale: 'zh-CN' | 'en-US') {
   return pickAppText(locale, label[0], label[1]);
 }
 
+function humanStatus(status: string, locale: 'zh-CN' | 'en-US') {
+  const labels: Record<string, [string, string]> = {
+    open: ['已创建', 'Open'],
+    running: ['执行中', 'Running'],
+    awaiting_acceptance: ['等待验收', 'Awaiting acceptance'],
+    needs_revision: ['需要修改', 'Needs revision'],
+    closed: ['已完成', 'Closed'],
+    abandoned: ['已放弃', 'Abandoned'],
+    accept: ['接受', 'Accepted'],
+    satisfied: ['接受', 'Accepted'],
+    revise: ['请求修改', 'Revision requested'],
+    abandon: ['放弃任务', 'Abandoned'],
+    warning: ['提醒', 'Warning'],
+  };
+  const label = labels[status];
+  return label ? pickAppText(locale, label[0], label[1]) : status;
+}
+
 export function TaskTimelineCard({ card }: Props) {
   const { locale } = useAppI18n();
   const Icon = iconForType(card.type);
@@ -105,10 +123,10 @@ export function TaskTimelineCard({ card }: Props) {
             <Icon className="h-4 w-4 text-muted-foreground" />
           </div>
           <div className="min-w-0 flex-1">
-            <div className="flex flex-wrap items-start justify-between gap-3">
-              <div className="min-w-0">
-                <div className="flex flex-wrap items-center gap-2">
-                  <h3 className="truncate text-sm font-semibold">{card.title}</h3>
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0 flex-1">
+                <div className="flex min-w-0 items-center gap-2">
+                  <h3 className="min-w-0 flex-1 truncate text-sm font-semibold">{card.title}</h3>
                   <Badge variant="secondary" className="shrink-0 text-[11px]">
                     {cardTypeLabel(card.type, locale)}
                   </Badge>
@@ -123,8 +141,8 @@ export function TaskTimelineCard({ card }: Props) {
                 isRuntimeStatus(card.status) ? (
                   <TaskRuntimeStatusBadge status={card.status} />
                 ) : (
-                  <Badge variant="outline" className="text-[11px]">
-                    {card.status}
+                  <Badge variant="outline" className="shrink-0 text-[11px]">
+                    {humanStatus(card.status, locale)}
                   </Badge>
                 )
               ) : null}