fix(ui): display subtask titles instead of UUIDs (#844) (#849)

* fix(ui): display subtask titles instead of UUIDs in TaskSubtasks

The Subtasks tab was rendering raw UUIDs instead of human-readable
titles for each subtask row. This made the list hard to scan and
undermined usability.

Changed:
- Display subtask.title instead of subtask.id in row header
- Added fallback to 'Untitled subtask' for edge cases
- Updated tooltip to show full title for truncated text

Fixes #844

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: use i18n translation for untitled subtask fallback

- Add 'subtasks.untitled' translation key to en/tasks.json
- Add French translation to fr/tasks.json
- Update TaskSubtasks.tsx to use useTranslation hook
- Replace hardcoded 'Untitled subtask' with t('tasks:subtasks.untitled')

Addresses CodeRabbit and Auto Claude PR review feedback.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Test User <test@example.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -1,4 +1,5 @@
 import { CheckCircle2, Clock, XCircle, AlertCircle, ListChecks, FileCode } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { Badge } from '../ui/badge';
 import { ScrollArea } from '../ui/scroll-area';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
@@ -23,6 +24,7 @@ function getSubtaskStatusIcon(status: string) {
 }
 
 export function TaskSubtasks({ task }: TaskSubtasksProps) {
+  const { t } = useTranslation(['tasks']);
   const progress = calculateProgress(task.subtasks);
 
   return (
@@ -69,11 +71,11 @@ export function TaskSubtasks({ task }: TaskSubtasksProps) {
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <span className="text-sm font-medium text-foreground truncate cursor-default">
-                            {subtask.id}
+                            {subtask.title || t('tasks:subtasks.untitled')}
                           </span>
                         </TooltipTrigger>
                         <TooltipContent side="top" className="max-w-xs">
-                          <p className="font-mono text-xs">{subtask.id}</p>
+                          <p className="text-xs">{subtask.title || t('tasks:subtasks.untitled')}</p>
                         </TooltipContent>
                       </Tooltip>
                     </div>

apps/frontend/src/shared/i18n/locales/en/tasks.json

@@ -130,5 +130,8 @@
       "useWorktreeLabel": "Use isolated workspace (recommended)",
       "useWorktreeDescription": "Creates changes in a separate git worktree for safe review before merging. Disable to build directly in your project (faster but riskier)."
     }
+  },
+  "subtasks": {
+    "untitled": "Untitled subtask"
   }
 }

apps/frontend/src/shared/i18n/locales/fr/tasks.json

@@ -130,5 +130,8 @@
       "useWorktreeLabel": "Utiliser un espace de travail isolé (recommandé)",
       "useWorktreeDescription": "Crée les changements dans un worktree git séparé pour une révision sécurisée avant la fusion. Désactivez pour travailler directement dans votre projet (plus rapide mais risqué)."
     }
+  },
+  "subtasks": {
+    "untitled": "Sous-tâche sans titre"
   }
 }