fix(ui): group plan tasks by User Story or Phase to support Spec Kit format

vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx

@@ -1262,39 +1262,75 @@ function TasksPanel({
               )}
             </div>
           ) : (
-            <ul style={taskList}>
+            <div>
-              {visible.map((t) => (
+              {(() => {
-                <li key={t.id}>
+                const groups: Record<string, typeof visible> = {};
-                  <button
+                for (const t of visible) {
-                    type="button"
+                  const title = taskTitle(t);
-                    onClick={() => {
+                  const match = title.match(/^\[(.*?)\]\s*(.*)$/);
-                      setSelectedId(t.id);
+                  const groupName = match ? match[1] : "Uncategorized";
-                      setCreating(false);
+                  const cleanTitle = match ? match[2] : title;
-                    }}
+                  
-                    style={selectedId === t.id ? taskItemActive : taskItem}
+                  if (!groups[groupName]) groups[groupName] = [];
-                  >
+                  groups[groupName].push({ ...t, title: cleanTitle });
-                    <div
+                }
-                      style={{ display: "flex", alignItems: "center", gap: 8 }}
+
-                    >
+                const groupKeys = Object.keys(groups).sort((a, b) => {
-                      <span
+                  if (a === "Uncategorized") return 1;
-                        style={{
+                  if (b === "Uncategorized") return -1;
-                          ...taskStatusDot,
+                  return a.localeCompare(b);
-                          background: TASK_STATUS_COLOR[t.status],
+                });
-                        }}
+
-                      />
+                return groupKeys.map(groupKey => (
-                      <span style={taskItemTitle}>{taskTitle(t)}</span>
+                  <div key={groupKey} style={{ marginBottom: 16 }}>
+                    <div style={{
+                      fontSize: "0.75rem",
+                      fontWeight: 600,
+                      color: "var(--fg-mute)",
+                      textTransform: "uppercase",
+                      letterSpacing: "0.04em",
+                      marginBottom: 8,
+                      marginLeft: 2,
+                    }}>
+                      {groupKey}
                     </div>
-                    <div style={taskItemMeta}>
+                    <ul style={taskList}>
-                      <span>{TASK_STATUS_LABEL[t.status]}</span>
+                      {groups[groupKey].map((t) => (
-                      <span style={{ color: INK.muted }}>·</span>
+                        <li key={t.id}>
-                      <span>
+                          <button
-                        {relativeTime(t.doneAt ?? t.startedAt ?? t.createdAt)}
+                            type="button"
-                      </span>
+                            onClick={() => {
-                    </div>
+                              setSelectedId(t.id);
-                  </button>
+                              setCreating(false);
-                </li>
+                            }}
-              ))}
+                            style={selectedId === t.id ? taskItemActive : taskItem}
-            </ul>
+                          >
+                            <div
+                              style={{ display: "flex", alignItems: "center", gap: 8 }}
+                            >
+                              <span
+                                style={{
+                                  ...taskStatusDot,
+                                  background: TASK_STATUS_COLOR[t.status],
+                                }}
+                              />
+                              <span style={taskItemTitle}>{t.title}</span>
+                            </div>
+                            <div style={taskItemMeta}>
+                              <span>{TASK_STATUS_LABEL[t.status]}</span>
+                              <span style={{ color: INK.muted }}>·</span>
+                              <span>
+                                {relativeTime(t.doneAt ?? t.startedAt ?? t.createdAt)}
+                              </span>
+                            </div>
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ));
+              })()}
+            </div>
           )}
         </div>