feat(table,sprint): honor category description setting in labels

The table column headers and the sprint report rows still showed the raw
category name when preferCategoryDescriptionAsPrimary was enabled.

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

Author: te-ce

src/features/sprint/SprintReportPanel.test.tsx

@@ -30,6 +30,31 @@ describe('SprintReportPanel', () => {
     expect(screen.getAllByText('0.00h')).toHaveLength(2)
   })
 
+  it('shows the description as the primary label when preferCategoryDescriptionAsPrimary is set', () => {
+    render(
+      <SprintReportPanel
+        hoursPerCategory={{ QA: 3 }}
+        allCategories={['QA']}
+        categoryDescriptions={{ QA: 'Quality assurance' }}
+        preferCategoryDescriptionAsPrimary
+      />,
+    )
+    expect(screen.getByText('Quality assurance')).toBeInTheDocument()
+    expect(screen.getByText('QA')).toBeInTheDocument()
+  })
+
+  it('keeps the category name primary when the preference is off', () => {
+    render(
+      <SprintReportPanel
+        hoursPerCategory={{ QA: 3 }}
+        allCategories={['QA']}
+        categoryDescriptions={{ QA: 'Quality assurance' }}
+      />,
+    )
+    expect(screen.getByText('QA')).toBeInTheDocument()
+    expect(screen.getByText('Quality assurance')).toBeInTheDocument()
+  })
+
   it('formats fractional hours correctly in both formats', () => {
     render(<SprintReportPanel hoursPerCategory={{ Dev: 1.75 }} allCategories={['Dev']} />)
     expect(screen.getAllByText('1.75h')).toHaveLength(2)

src/features/sprint/SprintReportPanel.tsx

@@ -1,11 +1,19 @@
 import { formatHours } from '../../shared/formatHours'
+import { categoryDisplay } from '../day/categoryLabel'
 
 interface Props {
   hoursPerCategory: Record<string, number>
   allCategories: string[]
+  categoryDescriptions?: Record<string, string> | undefined
+  preferCategoryDescriptionAsPrimary?: boolean | undefined
 }
 
-export function SprintReportPanel({ hoursPerCategory, allCategories }: Props) {
+export function SprintReportPanel({
+  hoursPerCategory,
+  allCategories,
+  categoryDescriptions,
+  preferCategoryDescriptionAsPrimary,
+}: Props) {
   const total = allCategories.reduce((sum, cat) => sum + (hoursPerCategory[cat] ?? 0), 0)
   const maxHours = Math.max(...allCategories.map((c) => hoursPerCategory[c] ?? 0), 1)
 
@@ -15,12 +23,22 @@ export function SprintReportPanel({ hoursPerCategory, allCategories }: Props) {
         <tbody>
           {allCategories.map((category, i) => {
             const hours = hoursPerCategory[category] ?? 0
+            const { primary, secondary } = categoryDisplay(
+              category,
+              categoryDescriptions ?? {},
+              preferCategoryDescriptionAsPrimary ?? false,
+            )
             return (
               <tr
                 key={category}
                 className={i % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-800/60'}
               >
-                <td className="px-3 py-1.5 font-medium">{category}</td>
+                <td className="px-3 py-1.5 font-medium">
+                  {primary}
+                  {secondary && (
+                    <span className="ml-2 text-xs font-normal text-gray-400 dark:text-gray-500">{secondary}</span>
+                  )}
+                </td>
                 <td className="w-32 px-3 py-1.5">
                   <div className="h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
                     <div

src/features/sprint/SprintView.tsx

@@ -106,7 +106,12 @@ export function SprintView() {
             onSprintIndexChange={setSprintIndex}
             today={today}
           />
-          <SprintReportPanel hoursPerCategory={hoursPerCategory} allCategories={allCategories} />
+          <SprintReportPanel
+            hoursPerCategory={hoursPerCategory}
+            allCategories={allCategories}
+            categoryDescriptions={config.categoryDescriptions}
+            preferCategoryDescriptionAsPrimary={config.preferCategoryDescriptionAsPrimary}
+          />
         </>
       )}
       <SprintConfigPanel

src/features/table/CategoryColumnHeader.test.tsx

@@ -40,6 +40,20 @@ describe('CategoryColumnHeader', () => {
       expect(screen.getByRole('columnheader')).toBeInTheDocument()
       expect(screen.getByText('SUPPORT')).toBeInTheDocument()
     })
+
+    it('renders the description as header text when preferCategoryDescriptionAsPrimary is set', () => {
+      setup({
+        categoryDescriptions: { _SUPPORT: 'Customer support tasks' },
+        preferCategoryDescriptionAsPrimary: true,
+      })
+      expect(screen.getByText('Customer support tasks')).toBeInTheDocument()
+      expect(screen.queryByText('SUPPORT')).not.toBeInTheDocument()
+    })
+
+    it('falls back to the category name when the preference is set but no description exists', () => {
+      setup({ preferCategoryDescriptionAsPrimary: true })
+      expect(screen.getByText('SUPPORT')).toBeInTheDocument()
+    })
   })
 
   describe('tooltip', () => {

src/features/table/CategoryColumnHeader.tsx

@@ -31,6 +31,10 @@ function displayCategoryName(cat: string): string {
   return cat.replace(/^_/, '')
 }
 
+function headerText(cat: string, description: string | undefined, preferDescription: boolean): string {
+  return preferDescription && description ? description : displayCategoryName(cat)
+}
+
 function handleRenameKeyDown(
   e: React.KeyboardEvent<HTMLInputElement>,
   cat: string,
@@ -148,6 +152,7 @@ export function CategoryColumnHeader({
     colDragOverIdx === catIdx ? 'ring-2 ring-inset ring-indigo-500 bg-indigo-50 dark:bg-indigo-900/40' : ''
   const color = colorForCategory(cat, allCategories)
   const nameClass = `block truncate text-[11px] ${color.text} ${onCategoryRename ? 'cursor-text' : ''}`
+  const headerLabel = headerText(cat, description, preferCategoryDescriptionAsPrimary ?? false)
   const tooltipContent = (
     <CategoryTooltipContent
       cat={cat}
@@ -194,7 +199,7 @@ export function CategoryColumnHeader({
               }
             }}
           >
-            {displayCategoryName(cat)}
+            {headerLabel}
           </span>
         </Tooltip>
       )}