feat(HAI-014): complete Step 1 — reorder JSX and update layout

packages/dashboard/app/components/TaskCard.tsx

@@ -62,18 +62,20 @@ export function TaskCard({ task, queued, onOpenDetail, addToast }: TaskCardProps
       onDragEnd={queued ? undefined : handleDragEnd}
       onClick={handleClick}
     >
-      {task.status && (
-        <span
-          className={`card-status-badge${ACTIVE_STATUSES.has(task.status) ? " pulsing" : ""}`}
-          style={{
-            background: COLUMN_COLOR_MAP[task.column],
-            color: COLUMN_TEXT_COLOR_MAP[task.column],
-          }}
-        >
-          {task.status}
-        </span>
-      )}
-      <span className="card-id">{task.id}</span>
+      <div className="card-header">
+        <span className="card-id">{task.id}</span>
+        {task.status && (
+          <span
+            className={`card-status-badge${ACTIVE_STATUSES.has(task.status) ? " pulsing" : ""}`}
+            style={{
+              background: COLUMN_COLOR_MAP[task.column],
+              color: COLUMN_TEXT_COLOR_MAP[task.column],
+            }}
+          >
+            {task.status}
+          </span>
+        )}
+      </div>
       <div className="card-title">
         {task.title || (task.description ? task.description.slice(0, 60) + (task.description.length > 60 ? "…" : "") : task.id)}
       </div>

packages/dashboard/app/styles.css

@@ -185,13 +185,19 @@ html, body {
 .card:active { cursor: grabbing; }
 .card.dragging { opacity: 0.4; transform: scale(0.98); }
 
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
 .card-id {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   color: var(--text-muted);
   font-family: "SF Mono", Monaco, Consolas, monospace;
-  margin-bottom: 4px;
 }
 
 .card-title {
@@ -218,7 +224,6 @@ html, body {
   letter-spacing: 0.5px;
   padding: 2px 8px;
   border-radius: 10px;
-  margin-bottom: 4px;
 }
 
 .card-status-badge.pulsing {