adding Alpine to the quick start instances list

packages/frontend/src/components/ComputePanel.tsx

@@ -47,9 +47,10 @@ import {
 import { createCloudResource } from '@/api/cloudProxyClient'
 import type { CloudProvider } from '@/types/cloud'
 import type { CloudResource } from '@/types/resource'
+import alpineImage from '../../../../OS_img/Alpine_Distro.jpg'
 import amazonLinuxImage from '../../../../OS_img/amazon_Linux.png'
-import debianImage from '../../../../OS_img/Debian_linux.png'
+import debianImage from '../../../../OS_img/debian.jpg'
-import redHatImage from '../../../../OS_img/red-hat-logo.png'
+import redHatImage from '../../../../OS_img/RedHat.png'
 import ubuntuImage from '../../../../OS_img/Ubuntu_Linux.png'
 
 // ─── Props ────────────────────────────────────────────────────────────────────
@@ -786,12 +787,13 @@ type InboundRule = { id: string; protocol: string; portInput: string; cidr: stri
 
 type LaunchStep = 1 | 2 | 3 | 4
 
-type AmiFamily = 'amazon-linux' | 'fedora' | 'ubuntu' | 'red-hat' | 'debian' | 'suse' | 'other'
+type AmiFamily = 'alpine' | 'amazon-linux' | 'fedora' | 'ubuntu' | 'red-hat' | 'debian' | 'suse' | 'other'
 
 type AmiClassification = { family: AmiFamily; label: string; mark: string; color: string }
 
 function classifyAmi(ami: Ec2Image): AmiClassification {
     const metadata = `${ami.name} ${ami.description ?? ''} ${ami.platform ?? ''}`.toLowerCase()
+    if (metadata.includes('alpine')) return { family: 'alpine', label: 'Alpine', mark: 'A', color: '#0d597f' }
     if (metadata.includes('ubuntu')) return { family: 'ubuntu', label: 'Ubuntu', mark: 'U', color: '#e95420' }
     if (metadata.includes('amazon linux') || metadata.includes('amzn')) return { family: 'amazon-linux', label: 'Amazon Linux', mark: 'A', color: '#ff9900' }
     if (metadata.includes('fedora')) return { family: 'fedora', label: 'Fedora', mark: 'F', color: '#51a2da' }
@@ -802,12 +804,13 @@ function classifyAmi(ami: Ec2Image): AmiClassification {
 }
 
 const QUICK_START_AMIS: Array<{ family: Exclude<AmiFamily, 'other'>; label: string; image: string; preferredImageId?: string }> = [
+    { family: 'alpine', label: 'Alpine', image: alpineImage, preferredImageId: 'ami-alpine' },
     { family: 'amazon-linux', label: 'Amazon Linux 2023', image: amazonLinuxImage, preferredImageId: 'ami-0abcdef1234567891' },
     { family: 'fedora', label: 'Fedora', image: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3Crect width="64" height="64" rx="8" fill="%2351a2da"/%3E%3Ctext x="32" y="43" text-anchor="middle" font-family="Arial" font-size="34" font-weight="bold" fill="white"%3EF%3C/text%3E%3C/svg%3E' },
     { family: 'ubuntu', label: 'Ubuntu', image: ubuntuImage },
     { family: 'suse', label: 'openSUSE', image: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3Crect width="64" height="64" rx="8" fill="%2330ba78"/%3E%3Ctext x="32" y="43" text-anchor="middle" font-family="Arial" font-size="30" font-weight="bold" fill="white"%3ES%3C/text%3E%3C/svg%3E' },
     { family: 'red-hat', label: 'Red Hat', image: redHatImage },
-    { family: 'debian', label: 'Debian', image: debianImage },
+    { family: 'debian', label: 'Debian 13', image: debianImage, preferredImageId: 'ami-debian13' },
 ]
 
 const SG_PRESETS: Array<{ label: string; protocol: string; portInput: string; cidr: string }> = [

packages/frontend/src/components/Layout.tsx

@@ -107,7 +107,7 @@ function CloudServiceNav({collapsed}: {collapsed: boolean}) {
 
 function CloudServiceNavItem({cloud, service, collapsed}: {cloud: CloudProvider; service: CloudServiceDescriptor; collapsed: boolean}) {
     const reasonTitle = service.reason ? `${service.displayName} — ${service.reason}` : service.displayName
-    const icon = <ServiceIcon cloud={cloud} iconKey={service.iconKey} size={14}/>
+    const icon = <ServiceIcon cloud={cloud} iconKey={service.iconKey} size={22}/>
 
     if (service.availability === 'available') {
         const target = service.route.startsWith('/')
@@ -184,7 +184,7 @@ export function Layout() {
                     <nav className="nav" aria-label="Console">
                         <div className="nav-section">
                             <span className="nav-label">General</span>
-                            <NavItem to={`/console/${activeCloud}`} icon={<LayoutDashboard size={14} aria-hidden="true"/>} label="Console Home" collapsed={collapsed}/>
+                            <NavItem to={`/console/${activeCloud}`} icon={<LayoutDashboard size={18} aria-hidden="true"/>} label="Console Home" collapsed={collapsed}/>
                         </div>
                         <CloudServiceNav collapsed={collapsed}/>
                     </nav>

packages/frontend/src/index.css

@@ -401,12 +401,12 @@ pre,
     padding: 8px 0;
 }
 
-/* The 14px chrome size is too small once the icon is the only thing naming a
+/* The icon-only rail gives service icons more visual weight because they
-   service. CSS overrides lucide's width/height attributes. */
+   become the sole service identifier. CSS overrides lucide's dimensions. */
 [data-sidebar="collapsed"] .sidebar:not(:has(.nav:focus-within)) .nav-link .service-icon-glyph,
 [data-sidebar="collapsed"] .sidebar:not(:has(.nav:focus-within)) .nav-link svg {
-    width: 18px;
+    width: 28px;
-    height: 18px;
+    height: 28px;
 }
 
 /* With labels hidden the divider is the only grouping cue, so it uses the
@@ -2958,17 +2958,17 @@ pre,
 
 .ami-quick-start-grid {
     display: grid;
-    grid-template-columns: repeat(6, minmax(100px, 1fr));
+    grid-template-columns: repeat(7, minmax(80px, 1fr));
-    gap: 10px;
+    gap: 8px;
 }
 
 .ami-quick-start-tile {
     display: grid;
     grid-template-rows: 42px auto auto;
     justify-items: center;
-    gap: 5px;
+    gap: 3px;
     min-width: 0;
-    padding: 12px 8px 10px;
+    padding: 5px 4px;
     border: 1px solid var(--border);
     border-radius: 5px;
     color: var(--text-1);
@@ -3005,7 +3005,7 @@ pre,
 .ami-quick-start-tile span {
     overflow: hidden;
     max-width: 100%;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 600;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -3013,7 +3013,7 @@ pre,
 
 .ami-quick-start-tile small {
     color: var(--text-3);
-    font-size: 10px;
+    font-size: 9px;
 }
 
 .ami-browser-toggle {