feat: display impl_tags in Implementation tab (#2434)

- Fix API to include impl_tags in /specs/{spec_id} response (was missing)
- Add implTags prop to SpecTabs component
- Display impl_tags as chips in Impl tab (only non-empty categories)
- Update test mock to include impl_tags

Author: MarkusNeusinger

api/routers/specs.py

@@ -87,6 +87,7 @@ async def get_spec(spec_id: str, db: AsyncSession = Depends(require_db)):
             review_image_description=impl.review_image_description,
             review_criteria_checklist=impl.review_criteria_checklist,
             review_verdict=impl.review_verdict,
+            impl_tags=impl.impl_tags,
         )
         for impl in spec.impls
     ]

app/src/components/SpecTabs.tsx

@@ -34,6 +34,7 @@ interface SpecTabsProps {
   imageDescription?: string;
   strengths?: string[];
   weaknesses?: string[];
+  implTags?: Record<string, string[]>;
   // Quality tab
   qualityScore: number | null;
   criteriaChecklist?: Record<string, unknown>;
@@ -144,6 +145,7 @@ export function SpecTabs({
   imageDescription,
   strengths,
   weaknesses,
+  implTags,
   qualityScore,
   criteriaChecklist,
   libraryId,
@@ -495,6 +497,42 @@ export function SpecTabs({
               </>
             )}
 
+            {/* Implementation Tags - only show non-empty categories */}
+            {implTags && Object.entries(implTags).some(([, values]) => values && values.length > 0) && (
+              <Box sx={{ mt: 3, pt: 2, borderTop: '1px solid #e5e7eb', display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+                {Object.entries(implTags)
+                  .filter(([, values]) => values && values.length > 0)
+                  .map(([category, values]) => (
+                    <Box key={category} sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                      <Typography
+                        component="span"
+                        sx={{
+                          fontFamily: '"MonoLisa", monospace',
+                          fontSize: '0.65rem',
+                          color: '#9ca3af',
+                        }}
+                      >
+                        {category}:
+                      </Typography>
+                      {values.map((value, i) => (
+                        <Chip
+                          key={i}
+                          label={value}
+                          size="small"
+                          sx={{
+                            fontFamily: '"MonoLisa", monospace',
+                            fontSize: '0.65rem',
+                            height: 20,
+                            bgcolor: '#f3f4f6',
+                            color: '#4b5563',
+                          }}
+                        />
+                      ))}
+                    </Box>
+                  ))}
+              </Box>
+            )}
+
             {/* No data message */}
             {!imageDescription && (!strengths || strengths.length === 0) && (!weaknesses || weaknesses.length === 0) && (
               <Typography sx={{ fontFamily: '"MonoLisa", monospace', fontSize: '0.85rem', color: '#9ca3af' }}>

app/src/pages/SpecPage.tsx

@@ -39,6 +39,8 @@ interface Implementation {
   review_image_description?: string;
   review_criteria_checklist?: Record<string, unknown>;
   review_verdict?: string;
+  // Implementation-level tags
+  impl_tags?: Record<string, string[]>;
 }
 
 interface SpecDetail {
@@ -735,6 +737,7 @@ export function SpecPage() {
               imageDescription={currentImpl?.review_image_description}
               strengths={currentImpl?.review_strengths}
               weaknesses={currentImpl?.review_weaknesses}
+              implTags={currentImpl?.impl_tags}
               qualityScore={currentImpl?.quality_score || null}
               criteriaChecklist={currentImpl?.review_criteria_checklist}
               libraryId={selectedLibrary || ''}

tests/unit/api/test_routers.py

@@ -74,6 +74,8 @@ def mock_spec():
     mock_impl.review_verdict = "APPROVED"
     mock_impl.review_strengths = ["Clean code", "Good visualization"]
     mock_impl.review_weaknesses = ["Could use better labels"]
+    # Implementation-level tags
+    mock_impl.impl_tags = {"patterns": ["data-generation"], "styling": ["alpha-blending"]}
 
     mock_spec = MagicMock()
     mock_spec.id = "scatter-basic"