feat(frontend): add Phase 3 UI components for observability

Components created:
- ValidationWarningsAlert: Display validation warnings with collapsible list
- StructuredErrorDisplay: Parse and display HTTP 502 errors as bullet points
- AutoFixBadge: Show automatically applied fixes
- ReasoningChainViewer: Collapsible panel for LLM thinking process
- MetadataDebugPanel: Collapsible debug info (model, duration, token metrics)

CSS changes:
- Add .editorial-alert--warning and .editorial-alert--info variants

Integration:
- Update routines/suggest page to show warnings, auto-fixes, reasoning, and metadata
- Update products/suggest page with same observability components
- Replace plain error divs with StructuredErrorDisplay for better UX

All components follow design system and pass svelte-check with 0 errors

frontend/src/app.css

@@ -277,6 +277,18 @@ body {
   color: hsl(136 48% 26%);
 }
 
+.editorial-alert--warning {
+  border-color: hsl(42 78% 68%);
+  background: hsl(45 86% 92%);
+  color: hsl(36 68% 28%);
+}
+
+.editorial-alert--info {
+  border-color: hsl(204 56% 70%);
+  background: hsl(207 72% 93%);
+  color: hsl(207 78% 28%);
+}
+
 .products-table-shell {
   border: 1px solid hsl(35 24% 74% / 0.85);
   border-radius: 0.9rem;