Fix subtask title display in task modal

apps/backend/implementation_plan/subtask.py

@@ -20,6 +20,7 @@ class Subtask:
 
     id: str
     description: str
+    title: str | None = None
     status: SubtaskStatus = SubtaskStatus.PENDING
 
     # Scoping
@@ -53,6 +54,8 @@ def to_dict(self) -> dict:
             "description": self.description,
             "status": self.status.value,
         }
+        if self.title:
+            result["title"] = self.title
         if self.service:
             result["service"] = self.service
         if self.all_services:
@@ -89,6 +92,7 @@ def from_dict(cls, data: dict) -> "Subtask":
         return cls(
             id=data["id"],
             description=data["description"],
+            title=data.get("title"),
             status=SubtaskStatus(data.get("status", "pending")),
             service=data.get("service"),
             all_services=data.get("all_services", False),

apps/backend/prompts/planner.md

@@ -232,6 +232,7 @@ Based on the workflow type and services involved, create the implementation plan
       "subtasks": [
         {
           "id": "subtask-1-1",
+          "title": "Create data models for analytics",
           "description": "Create data models for [feature]",
           "service": "backend",
           "files_to_modify": ["src/models/user.py"],
@@ -246,6 +247,7 @@ Based on the workflow type and services involved, create the implementation plan
         },
         {
           "id": "subtask-1-2",
+          "title": "Create API endpoints for analytics events",
           "description": "Create API endpoints for [feature]",
           "service": "backend",
           "files_to_modify": ["src/routes/api.py"],
@@ -272,6 +274,7 @@ Based on the workflow type and services involved, create the implementation plan
       "subtasks": [
         {
           "id": "subtask-2-1",
+          "title": "Create aggregation Celery task",
           "description": "Create aggregation Celery task",
           "service": "worker",
           "files_to_modify": ["worker/tasks.py"],
@@ -296,6 +299,7 @@ Based on the workflow type and services involved, create the implementation plan
       "subtasks": [
         {
           "id": "subtask-3-1",
+          "title": "Create real-time dashboard component",
           "description": "Create dashboard component",
           "service": "frontend",
           "files_to_modify": [],
@@ -320,6 +324,7 @@ Based on the workflow type and services involved, create the implementation plan
       "subtasks": [
         {
           "id": "subtask-4-1",
+          "title": "Verify end-to-end analytics flow",
           "description": "End-to-end verification of analytics flow",
           "all_services": true,
           "files_to_modify": [],
@@ -362,6 +367,7 @@ Use ONLY these values for the `type` field in phases:
 2. **Small scope** - Each subtask should take 1-3 files max
 3. **Clear verification** - Every subtask must have a way to verify it works
 4. **Explicit dependencies** - Phases block until dependencies complete
+5. **Title must be a short imperative label** (max 60 chars, e.g. "Create data models for analytics"). Description contains full implementation details.
 
 ### Verification Types
 
@@ -385,6 +391,7 @@ Use ONLY these values for the `type` field in phases:
 ```json
 {
   "id": "subtask-investigate-1",
+  "title": "Identify root cause of memory leak",
   "description": "Identify root cause of memory leak",
   "expected_output": "Document with: (1) Root cause, (2) Evidence, (3) Proposed fix",
   "files_to_modify": [],
@@ -400,6 +407,7 @@ Use ONLY these values for the `type` field in phases:
 ```json
 {
   "id": "subtask-refactor-1",
+  "title": "Add new auth system alongside old",
   "description": "Add new auth system alongside old",
   "files_to_modify": ["src/auth/index.ts"],
   "files_to_create": ["src/auth/new_auth.ts"],

apps/backend/spec/validate_pkg/schemas.py

@@ -53,6 +53,7 @@
     "subtask_schema": {
         "required_fields": ["id", "description", "status"],
         "optional_fields": [
+            "title",
             "service",
             "all_services",
             "files_to_modify",

apps/frontend/src/main/project-store.ts

@@ -10,6 +10,7 @@ import { findAllSpecPaths } from './utils/spec-path-helpers';
 import { ensureAbsolutePath } from './utils/path-helpers';
 import { writeFileAtomicSync } from './utils/atomic-file';
 import { updateRoadmapFeatureOutcome, revertRoadmapFeatureOutcome } from './utils/roadmap-utils';
+import { extractSubtaskTitle } from '../shared/utils/subtask-title';
 
 interface TabState {
   openProjectIds: string[];
@@ -502,7 +503,7 @@ export class ProjectStore {
           const items = phase.subtasks || (phase as { chunks?: PlanSubtask[] }).chunks || [];
           return items.map((subtask) => ({
             id: subtask.id,
-            title: subtask.description,
+            title: subtask.title || extractSubtaskTitle(subtask.description),
             description: subtask.description,
             status: subtask.status,
             files: []

apps/frontend/src/renderer/components/task-detail/TaskSubtasks.tsx

@@ -1,4 +1,5 @@
 import { CheckCircle2, Clock, XCircle, AlertCircle, ListChecks, FileCode } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Badge } from '../ui/badge';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
@@ -22,6 +23,48 @@ function getSubtaskStatusIcon(status: string) {
   }
 }
 
+/**
+ * Generic overflow-aware text component.
+ * Renders children in a line-clamped container and shows a tooltip with the
+ * full text when the content is visually truncated.
+ */
+function OverflowText({
+  text,
+  as: Tag = 'p',
+  className,
+}: {
+  text: string;
+  as?: 'p' | 'span';
+  className?: string;
+}) {
+  const [el, setEl] = useState<HTMLElement | null>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  useEffect(() => {
+    if (!el) return;
+    const check = () => setIsOverflowing(el.scrollHeight > el.clientHeight);
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [el, text]);
+
+  return (
+    <Tooltip open={isOverflowing ? undefined : false}>
+      <TooltipTrigger asChild>
+        <Tag ref={(node: HTMLElement | null) => setEl(node)} className={className} tabIndex={isOverflowing ? 0 : undefined}>
+          {text}
+        </Tag>
+      </TooltipTrigger>
+      {isOverflowing && (
+        <TooltipContent side="bottom" className="max-w-sm">
+          <p className="text-xs">{text}</p>
+        </TooltipContent>
+      )}
+    </Tooltip>
+  );
+}
+
 export function TaskSubtasks({ task }: TaskSubtasksProps) {
   const { t } = useTranslation(['tasks']);
   const progress = calculateProgress(task.subtasks);
@@ -68,22 +111,18 @@ export function TaskSubtasks({ task }: TaskSubtasksProps) {
                     )}>
                       #{index + 1}
                     </span>
-                    <span className="text-sm font-medium text-foreground break-words flex-1 min-w-0">
-                      {subtask.title || t('tasks:subtasks.untitled')}
-                    </span>
+                    <OverflowText
+                      text={subtask.title || t('tasks:subtasks.untitled')}
+                      as="span"
+                      className="text-sm font-medium text-foreground break-words flex-1 min-w-0 line-clamp-2"
+                    />
                   </div>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <p className="mt-1 text-xs text-muted-foreground line-clamp-2 cursor-default break-words">
-                        {subtask.description}
-                      </p>
-                    </TooltipTrigger>
-                    {subtask.description && subtask.description.length > 80 && (
-                      <TooltipContent side="bottom" className="max-w-sm">
-                        <p className="text-xs">{subtask.description}</p>
-                      </TooltipContent>
-                    )}
-                  </Tooltip>
+                  {subtask.description && subtask.description !== subtask.title && (
+                    <OverflowText
+                      text={subtask.description}
+                      className="mt-1 text-xs text-muted-foreground line-clamp-2 break-words"
+                    />
+                  )}
                   {subtask.files && subtask.files.length > 0 && (
                     <div className="mt-2 flex flex-wrap gap-1">
                       {subtask.files.map((file) => (

apps/frontend/src/renderer/stores/task-store.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand';
 import { arrayMove } from '@dnd-kit/sortable';
 import type { Task, TaskStatus, SubtaskStatus, ImplementationPlan, Subtask, TaskMetadata, ExecutionProgress, ExecutionPhase, ReviewReason, TaskDraft, ImageAttachment, TaskOrderState } from '../../shared/types';
 import { debugLog, debugWarn } from '../../shared/utils/debug-logger';
+import { extractSubtaskTitle } from '../../shared/utils/subtask-title';
 import { useProjectStore } from './project-store';
 
 /** Default max parallel tasks when no project setting is configured */
@@ -373,7 +374,7 @@ export const useTaskStore = create<TaskState>((set, get) => ({
                 : `subtask-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
               // Defensive fallback: validatePlanData() ensures description exists, but kept for safety
               const description = subtask.description || 'No description available';
-              const title = description; // Title and description are the same for subtasks
+              const title = subtask.title || extractSubtaskTitle(description);
               const status = (subtask.status as SubtaskStatus) || 'pending';
 
               return {

apps/frontend/src/shared/types/task.ts

@@ -304,6 +304,7 @@ export interface Phase {
 
 export interface PlanSubtask {
   id: string;
+  title?: string;
   description: string;
   status: SubtaskStatus;
   verification?: {