feat: Cloudformation + RDS

packages/frontend/src/features/cloud-console/CloudConsoleSections.tsx

@@ -1,5 +1,6 @@
 import {type ElementType} from 'react'
 import {Cloud, Database, ExternalLink, Radio, Route, ShieldCheck} from 'lucide-react'
+import {ServiceIcon} from '@/components/serviceIcons'
 import {adapterLabel, cloudName, providerDescription, runtimeName} from './cloudConsoleHome.utils'
 import type {ProviderBannerProps, RuntimeFlowProps, ServiceGridProps, SummarySectionProps} from './types'
 
@@ -67,13 +68,12 @@ export function ServiceGrid({services, runtimeReachable, onNavigate, searchQuery
     return (
         <section className="console-service-grid">
             {services.map((service) => {
-                const Icon = service.icon
                 const isAvailable = service.status === 'available'
                 const canOpen = isAvailable && service.route && runtimeReachable
                 const content = (
                     <>
                         <div className="service-card-header">
-                            <div className="service-icon"><Icon size={18}/></div>
+                            <div className="service-icon"><ServiceIcon cloud={service.cloud} iconKey={service.iconKey} size={36}/></div>
                             <div>
                                 <h3>{service.label}</h3>
                                 <span className={isAvailable ? 'status healthy' : 'status unknown'}>

packages/frontend/src/features/cloud-console/types.ts

@@ -1,4 +1,3 @@
-import type {ElementType} from 'react'
 import type {CloudAvailability, CloudProvider, CloudStatus} from '@/types/cloud'
 
 export interface ConsoleServiceCard {
@@ -6,7 +5,8 @@ export interface ConsoleServiceCard {
     label: string
     status: CloudAvailability
     count?: number
-    icon: ElementType
+    cloud: CloudProvider
+    iconKey: string
     route?: string
     meta: string
 }

packages/frontend/src/features/cloud-console/useCloudConsoleHomeData.ts

@@ -7,7 +7,6 @@ import {
     useCloudStatusQuery,
     useCloudsQuery,
 } from '@/api/queries/cloudQueries'
-import {serviceIcon} from '@/components/serviceIcons'
 import {
     resourceDetailFor,
     runtimeClassFor,
@@ -76,7 +75,8 @@ export function useCloudConsoleHomeData(cloud: CloudProvider) {
                     label: service.displayName,
                     status: service.availability,
                     count: counts?.count,
-                    icon: serviceIcon(service.iconKey),
+                    cloud,
+                    iconKey: service.iconKey,
                     route:
                         service.availability === 'available'
                             ? isLegacyPage

packages/frontend/src/features/secretsmanager/SecretsManagerPage.tsx

@@ -16,6 +16,7 @@ import {
   X,
 } from 'lucide-react'
 import { EmptyState } from '@/components/EmptyState'
+import { ServiceIcon } from '@/components/serviceIcons'
 import type { SecretSummary } from '@/api/aws/secretsmanager.api'
 import {
   secretsManagerQueryKeys,
@@ -690,6 +691,7 @@ export function SecretsManagerPage() {
 
       <div className="page-header">
         <div className="page-title">
+          <ServiceIcon cloud="aws" iconKey="secrets" size={32} />
           <h1>Secrets Manager</h1>
           <span className="info-link">
             <Info size={11} />
@@ -755,7 +757,7 @@ export function SecretsManagerPage() {
                       onClick={() => setSelected(selected === id ? null : id)}
                     >
                       <td className="mono" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                        <KeyRound size={13} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+                        <ServiceIcon cloud="aws" iconKey="secrets" size={18} />
                         {secret.name}
                       </td>
                       <td style={{ color: 'var(--text-3)' }}>{secret.description ?? '—'}</td>