feat(ST-dgognlsz): SoloTaskCard 4-regels layout met Tooltips

4-regels layout: taaknaam+task_code badge (tooltip: naam+beschrijving),
beschrijving+pbi_code badge (tooltip: pbi_title+pbi_description), story+job-badge.
SoloTaskCardOverlay identieke 4-regels structuur zonder tooltips.
PBI-velden toegevoegd aan SoloTask-interface + Prisma-queries + test-fixtures.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

__tests__/components/solo/solo-board-batch-enqueue.test.tsx

@@ -94,6 +94,9 @@ const TODO_TASK = {
   story_code: 'ST-1',
   story_title: 'Story 1',
   task_code: 'ST-1.1',
+  pbi_code: null,
+  pbi_title: null,
+  pbi_description: null,
 }
 
 const DEFAULT_PROPS = {

__tests__/components/solo/task-detail-dialog.test.tsx

@@ -65,6 +65,9 @@ const baseTask: SoloTask = {
   story_code: 'ST-100',
   story_title: 'Test Story',
   task_code: 'ST-100.1',
+  pbi_code: null,
+  pbi_title: null,
+  pbi_description: null,
 }
 
 const DEFAULT_PROPS = {

__tests__/stores/solo-store-realtime.test.ts

@@ -17,6 +17,9 @@ const baseTask = (id: string, overrides: Partial<SoloTask> = {}): SoloTask => ({
   story_code: 'ST-100',
   story_title: 'Original Story',
   task_code: 'ST-100.1',
+  pbi_code: null,
+  pbi_title: null,
+  pbi_description: null,
   ...overrides,
 })
 

app/(app)/products/[id]/solo/page.tsx

@@ -46,6 +46,7 @@ export default async function SoloProductPage({ params }: Props) {
             code: true,
             title: true,
             tasks: { select: { id: true }, orderBy: { sort_order: 'asc' } },
+            pbi: { select: { code: true, title: true, description: true } },
           },
         },
       },
@@ -86,6 +87,9 @@ export default async function SoloProductPage({ params }: Props) {
     story_code: t.story.code,
     story_title: t.story.title,
     task_code: t.code,
+    pbi_code:        t.story.pbi?.code        ?? null,
+    pbi_title:       t.story.pbi?.title       ?? null,
+    pbi_description: t.story.pbi?.description ?? null,
   }))
 
   const unassignedStories: UnassignedStory[] = rawUnassigned.map(s => ({

app/(mobile)/m/products/[id]/solo/page.tsx

@@ -51,6 +51,7 @@ export default async function MobileSoloProductPage({ params }: Props) {
             code: true,
             title: true,
             tasks: { select: { id: true }, orderBy: { sort_order: 'asc' } },
+            pbi: { select: { code: true, title: true, description: true } },
           },
         },
       },
@@ -91,6 +92,9 @@ export default async function MobileSoloProductPage({ params }: Props) {
     story_code: t.story.code,
     story_title: t.story.title,
     task_code: t.code,
+    pbi_code:        t.story.pbi?.code        ?? null,
+    pbi_title:       t.story.pbi?.title       ?? null,
+    pbi_description: t.story.pbi?.description ?? null,
   }))
 
   const unassignedStories: UnassignedStory[] = rawUnassigned.map(s => ({

components/solo/solo-board.tsx

@@ -32,6 +32,9 @@ export interface SoloTask {
   story_code: string | null
   story_title: string
   task_code: string | null
+  pbi_code: string | null
+  pbi_title: string | null
+  pbi_description: string | null
 }
 
 export interface SoloBoardProps {

components/solo/solo-task-card.tsx

@@ -8,6 +8,7 @@ import { cn } from '@/lib/utils'
 import { CodeBadge } from '@/components/shared/code-badge'
 import { JOB_STATUS_LABELS, JOB_STATUS_COLORS, JOB_STATUS_ACTIVE } from '@/components/shared/job-status'
 import { useSoloStore } from '@/stores/solo-store'
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
 import type { SoloTask } from './solo-board'
 
 const PRIORITY_BORDER: Record<number, string> = {
@@ -30,10 +31,6 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
     disabled: isDemo,
   })
 
-  // view-transition-name laat de browser deze card snapshotten zodat hij
-  // soepel van kolom naar kolom animeert wanneer de status realtime wijzigt
-  // (ST-805 animatie A). Tijdens drag uit zetten — dnd-kit beheert de
-  // transform dan zelf en dubbele transitions willen we niet.
   const style: React.CSSProperties | undefined = transform
     ? { transform: CSS.Translate.toString(transform) }
     : { viewTransitionName: `solo-task-${task.id}` }
@@ -51,12 +48,66 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
       )}
       {...(!isDemo ? { ...attributes, ...listeners } : {})}
     >
+      {/* Regel 1: taaknaam + task_code */}
       <div className="flex items-start justify-between gap-2">
         <p className="text-sm text-foreground leading-snug flex-1">{task.title}</p>
-        {task.task_code && <CodeBadge code={task.task_code} className="shrink-0 mt-0.5" />}
+        {task.task_code && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={<span className="shrink-0 mt-0.5" />}>
+                <CodeBadge code={task.task_code} />
+              </TooltipTrigger>
+              <TooltipContent side="left">
+                <p className="font-semibold">{task.title}</p>
+                {task.description && (
+                  <p className="text-muted-foreground italic">{task.description.slice(0, 100)}</p>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
       </div>
+
+      {/* Regels 2–3: beschrijving + pbi_code */}
+      <div className="flex items-start justify-between gap-2 mt-0.5">
+        {task.description ? (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={
+                <p className="text-xs text-muted-foreground line-clamp-2 flex-1" />
+              }>
+                {task.description}
+              </TooltipTrigger>
+              {task.description.length > 80 && (
+                <TooltipContent side="bottom">
+                  {task.description}
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
+        ) : (
+          <div className="flex-1" />
+        )}
+        {task.pbi_code && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={<span className="shrink-0" />}>
+                <CodeBadge code={task.pbi_code} />
+              </TooltipTrigger>
+              <TooltipContent side="left">
+                <p className="font-semibold">{task.pbi_title}</p>
+                {task.pbi_description && (
+                  <p className="text-muted-foreground italic">{task.pbi_description.slice(0, 100)}</p>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+
+      {/* Regel 4: story-info + job-badge */}
       <div className="flex items-center justify-between gap-2 mt-0.5">
-        <p className="text-xs text-muted-foreground truncate">
+        <p className="text-xs text-muted-foreground truncate flex-1">
           {task.story_code && <span className="font-mono mr-1">{task.story_code}</span>}
           {task.story_title}
         </p>
@@ -95,10 +146,21 @@ export function SoloTaskCardOverlay({ task }: { task: SoloTask }) {
         PRIORITY_BORDER[task.priority],
       )}
     >
+      {/* Regel 1 */}
       <div className="flex items-start justify-between gap-2">
         <p className="text-sm text-foreground leading-snug flex-1">{task.title}</p>
         {task.task_code && <CodeBadge code={task.task_code} className="shrink-0 mt-0.5" />}
       </div>
+      {/* Regels 2–3 */}
+      <div className="flex items-start justify-between gap-2 mt-0.5">
+        {task.description ? (
+          <p className="text-xs text-muted-foreground line-clamp-2 flex-1">{task.description}</p>
+        ) : (
+          <div className="flex-1" />
+        )}
+        {task.pbi_code && <CodeBadge code={task.pbi_code} className="shrink-0" />}
+      </div>
+      {/* Regel 4 */}
       <p className="text-xs text-muted-foreground mt-0.5 truncate">
         {task.story_code && <span className="font-mono mr-1">{task.story_code}</span>}
         {task.story_title}