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,8 +1262,40 @@ function TasksPanel({
               )}
             </div>
           ) : (
+            <div>
+              {(() => {
+                const groups: Record<string, typeof visible> = {};
+                for (const t of visible) {
+                  const title = taskTitle(t);
+                  const match = title.match(/^\[(.*?)\]\s*(.*)$/);
+                  const groupName = match ? match[1] : "Uncategorized";
+                  const cleanTitle = match ? match[2] : title;
+                  
+                  if (!groups[groupName]) groups[groupName] = [];
+                  groups[groupName].push({ ...t, title: cleanTitle });
+                }
+
+                const groupKeys = Object.keys(groups).sort((a, b) => {
+                  if (a === "Uncategorized") return 1;
+                  if (b === "Uncategorized") return -1;
+                  return a.localeCompare(b);
+                });
+
+                return groupKeys.map(groupKey => (
+                  <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>
                     <ul style={taskList}>
-              {visible.map((t) => (
+                      {groups[groupKey].map((t) => (
                         <li key={t.id}>
                           <button
                             type="button"
@@ -1282,7 +1314,7 @@ function TasksPanel({
                                   background: TASK_STATUS_COLOR[t.status],
                                 }}
                               />
-                      <span style={taskItemTitle}>{taskTitle(t)}</span>
+                              <span style={taskItemTitle}>{t.title}</span>
                             </div>
                             <div style={taskItemMeta}>
                               <span>{TASK_STATUS_LABEL[t.status]}</span>
@@ -1295,6 +1327,10 @@ function TasksPanel({
                         </li>
                       ))}
                     </ul>
+                  </div>
+                ));
+              })()}
+            </div>
           )}
         </div>