merge: resolve main into feat/app-demo-polish

app/frontend/src/features/secondary/pages.tsx

@@ -64,6 +64,8 @@ import {
   demoVulnerabilities,
   getDemoServicesByProject,
 } from '@/lib/demo-data';
+import { ServiceIcon } from '@/features/workspace/canvas/ServiceIcon';
+import { serviceAccent } from '@/features/workspace/canvas/service-visuals';
 import { DocsBrowser } from '@/features/docs/DocsBrowser';
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
@@ -1699,8 +1701,14 @@ export function DatabasesPage() {
                     onClick={() => setExpandedId(expanded ? null : (db.id ?? null))}
                     className="flex w-full items-center gap-3 p-4 text-left"
                   >
-                    <div className="w-9 h-9 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center shrink-0">
-                      <Database size={17} className="text-[var(--accent-primary)]" />
+                    <div
+                      className="w-9 h-9 rounded-[var(--radius-md)] flex items-center justify-center shrink-0"
+                      style={{
+                        background: `${serviceAccent({ name: db.type })}1c`,
+                        color: serviceAccent({ name: db.type }),
+                      }}
+                    >
+                      <ServiceIcon service={{ name: db.type, type: 'database' }} size={17} />
                     </div>
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">