feat(ST-507): show code badges on cards, lists and dialogs across the app

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/backlog/backlog-card.tsx

@@ -2,6 +2,7 @@
 
 import { forwardRef } from 'react'
 import { cn } from '@/lib/utils'
+import { CodeBadge } from '@/components/shared/code-badge'
 
 export const PRIORITY_BORDER: Record<number, string> = {
   1: 'border-l-4 border-l-priority-critical',
@@ -13,6 +14,7 @@ export const PRIORITY_BORDER: Record<number, string> = {
 interface BacklogCardProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string
   priority: number
+  code?: string | null
   isSelected?: boolean
   isDragging?: boolean
   badge?: React.ReactNode
@@ -20,7 +22,7 @@ interface BacklogCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const BacklogCard = forwardRef<HTMLDivElement, BacklogCardProps>(function BacklogCard(
-  { title, priority, isSelected, isDragging, badge, actions, className, ...rest },
+  { title, priority, code, isSelected, isDragging, badge, actions, className, ...rest },
   ref
 ) {
   return (
@@ -37,7 +39,10 @@ export const BacklogCard = forwardRef<HTMLDivElement, BacklogCardProps>(function
       )}
       {...rest}
     >
-      <p className="text-sm leading-snug line-clamp-2">{title}</p>
+      <div className="flex items-start justify-between gap-2">
+        <p className="text-sm leading-snug line-clamp-2 flex-1">{title}</p>
+        {code && <CodeBadge code={code} className="shrink-0 mt-0.5" />}
+      </div>
       {(badge || actions) && (
         <div className="flex items-center justify-between gap-1 mt-1.5">
           <div className="flex items-center gap-1">{badge}</div>

components/backlog/pbi-list.tsx

@@ -49,6 +49,7 @@ const PRIORITY_COLORS: Record<number, string> = {
 
 interface Pbi {
   id: string
+  code: string | null
   title: string
   priority: number
   description?: string | null
@@ -92,6 +93,7 @@ function SortablePbiRow({
       {...attributes}
       {...listeners}
       title={pbi.title}
+      code={pbi.code}
       priority={pbi.priority}
       isSelected={isSelected}
       isDragging={isDragging}

components/backlog/story-panel.tsx

@@ -52,6 +52,7 @@ const STATUS_LABELS: Record<string, string> = {
 
 export interface Story {
   id: string
+  code: string | null
   title: string
   description: string | null
   acceptance_criteria: string | null
@@ -91,6 +92,7 @@ function SortableStoryBlock({
       {...attributes}
       {...listeners}
       title={story.title}
+      code={story.code}
       priority={story.priority}
       isDragging={isDragging}
       onClick={onClick}