feat: Lightsail + svg animation

2026-10-11 14:19:00 -04:00
parent 0036ef7e51
commit ca1e845cb6
40 changed files with 1887 additions and 34 deletions
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M255 0h1.2c6.1 2.9 12 6.1 17.8 9.7 66.2 38.1 132.4 76.1 198.6 114.2 5.2 2.8 8.2 8.5 7.6 14.4-.1 80.3 0 160.5-.1 240.7-.9 3.8-3.2 7.2-6.5 9.3L262.4 509.8c-3.5 2.7-8.2 2.9-12 .7-70.5-40.4-140.9-80.9-211.3-121.5-4.7-2.2-7.6-7-7.3-12.2V136.1c-.4-5.1 2.4-10 7.1-12.3 66.1-37.9 132.2-76 198.3-114 5.9-3.4 11.7-6.9 17.8-9.8" style="fill:#019639"/><path d="M123.7 156.1v198.6c-.2 7.4 2.6 14.6 7.8 19.9 10.1 10 25.8 11.5 37.7 3.8 7.8-5.3 12.5-14.2 12.5-23.6 0-47.9-.1-95.8 0-143.7 43.7 52.3 87.5 104.5 131.3 156.7 12.4 12.5 30.3 17.9 47.5 14.3 12.3-2.4 21.6-12.6 22.9-25.1.1-67.6.1-135.1 0-202.6-1.4-15.9-15.4-27.7-31.3-26.3-14 1.2-25.1 12.3-26.3 26.3 0 48.7-.3 97.3 0 146-42.9-50.6-85.3-101.6-128-152.4-11.5-14.7-30-22.1-48.4-19.2-14.2 1.4-25.1 13.1-25.7 27.3" style="fill:#fff"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><linearGradient id="node-js_svg__a" x1="277.292" x2="118.519" y1="461.638" y2="89.76" gradientTransform="matrix(1 0 0 -1 53.428 542.628)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#3f8b3d"/><stop offset=".64" style="stop-color:#3f873f"/><stop offset=".93" style="stop-color:#3da92e"/><stop offset="1" style="stop-color:#3dae2b"/></linearGradient><path d="M268.1 3.2c-7.5-4.3-16.7-4.3-24.2 0L44.6 119c-7.6 4.3-11.8 12.4-11.8 21v232c0 8.6 4.7 16.7 11.8 21L244 508.8c7.5 4.3 16.7 4.3 24.2 0L467.4 393c7.6-4.3 11.8-12.4 11.8-21V140c0-8.6-4.7-16.7-11.8-21z" style="fill:url(#node-js_svg__a)"/><linearGradient id="node-js_svg__b" x1="171.637" x2="677.901" y1="269.999" y2="541.653" gradientTransform="matrix(1 0 0 -1 53.428 542.628)" gradientUnits="userSpaceOnUse"><stop offset=".14" style="stop-color:#3f873f"/><stop offset=".4" style="stop-color:#52a044"/><stop offset=".71" style="stop-color:#64b749"/><stop offset=".91" style="stop-color:#6abf4b"/></linearGradient><path d="M467.4 119 268.1 3.2c-5.9-3.4-12.9-4-19.3-2L37 385.5c2 3 4.5 5.6 7.5 7.5l199.4 115.8c6.1 3.5 13.2 4 19.7 1.8l211.2-384.3c-1.9-2.9-4.4-5.5-7.4-7.3" style="fill:url(#node-js_svg__b)"/><linearGradient id="node-js_svg__c" x1="-18.131" x2="432.053" y1="286.639" y2="286.639" gradientTransform="matrix(1 0 0 -1 53.428 542.628)" gradientUnits="userSpaceOnUse"><stop offset=".09" style="stop-color:#6abf4b"/><stop offset=".29" style="stop-color:#64b749"/><stop offset=".6" style="stop-color:#52a044"/><stop offset=".86" style="stop-color:#3f873f"/></linearGradient><path d="M243.9 3.2 44.6 119c-3.3 1.8-5.8 4.5-7.7 7.5l211.5 384.1c6.5 2.2 13.6 1.7 19.7-1.8L467.4 393c3.1-1.7 5.5-4.2 7.4-7L263.2 1.2c-6.4-2-13.4-1.4-19.3 2" style="fill:url(#node-js_svg__c)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M36.4 256c0 87.2 50.4 162.4 124 197.6l-105-287C43.2 193.6 36 224 36 256zm367.8-11.1c0-27.2-9.8-45.9-18.1-60.6-11.1-18.1-21.6-33.4-21.6-51.5 0-20.2 15.3-39 36.9-39 1 0 1.6 0 3.2.2-39.4-35.6-91.8-58-148.6-57.6-76.7 0-144.2 39.4-183.5 99.2 5.2 0 10.4 0 14.4.3 23 0 58.5-2.8 58.5-2.8 11.8-.7 13.6 16.8 1.6 18.4 0 0-11.9 1.4-25.1 2.1l80 237.9L250 247.4l-34.2-93.7c-11.8-.7-23-2.1-23-2.1-11.8-.7-10.4-18.8 1.4-18.1 0 0 36 2.4 57.6 2.8 23 0 58.5-2.8 58.5-2.8 11.8-.7 13.6 16.8 1.6 18.1 0 0-11.9 1.4-25.1 2.1l79.4 236.1 21.9-73.2c9.1-30.8 16-52.4 16-71.5h.1zm-144.4 30.3L194 466.7c19.7 5.6 40.8 8.8 62.4 8.8 25.6 0 50.1-4.4 72.9-12.4-.6-.9-1.1-1.9-1.6-3zm188.9-124.8c1 7.2 1.6 14.4 1.6 22.6 0 22.3-4.2 47.3-16.7 78.7l-67.1 193.9c65.3-38.1 109.2-108.8 109.2-189.8-.1-38.2-10.1-74.2-26.9-105.1zM256 0C114.8 0 0 114.8 0 256c0 140.8 115.2 256 256 256s256-114.8 256-256C512 115.2 396.8 0 256 0m0 500.3C121.3 500.3 11.7 390.7 11.7 256 11.7 121.6 121.6 12 256 12s244.3 109.6 244 244.3c.3 134.1-109.6 243.7-244 244" style="fill:#0073aa"/></svg>
@@ -29,6 +29,7 @@ services:
      - "4501:4501"
    environment:
      FLOCI_ENDPOINT: http://floci:4566
+      FLOCI_EC2_SSH_HOST: host.docker.internal
      FLOCI_AZURE_ENDPOINT: http://floci-az:4577
      AWS_REGION: us-east-1
      AWS_ACCESS_KEY_ID: test
@@ -36,6 +37,8 @@ services:
      FLOCI_GCP_ENDPOINT: http://floci-gcp:4588
      FLOCI_GCP_PROJECT: floci-local
      PORT: "4501"
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
    depends_on:
      - floci
    networks:
@@ -32,6 +32,7 @@
    "@aws-sdk/client-kinesis": "^3.1076.0",
    "@aws-sdk/client-kms": "^3.1096.0",
    "@aws-sdk/client-lambda": "^3.1076.0",
+    "@aws-sdk/client-lightsail": "^3.1076.0",
    "@aws-sdk/client-rds": "^3.1076.0",
    "@aws-sdk/client-rds-data": "^3.1076.0",
    "@aws-sdk/client-s3": "^3.1076.0",
@@ -0,0 +1,113 @@
+import {afterEach, describe, expect, test} from 'bun:test'
+import {
+    CloseInstancePublicPortsCommand,
+    CreateInstancesCommand,
+    DeleteInstanceCommand,
+    GetInstanceCommand,
+    GetInstancesCommand,
+    OpenInstancePublicPortsCommand,
+    RebootInstanceCommand,
+    StartInstanceCommand,
+    StopInstanceCommand,
+    type LightsailClient,
+} from '@aws-sdk/client-lightsail'
+import {AwsLightsailAdapter} from './AwsLightsailAdapter'
+
+const originalEndpoint = process.env.FLOCI_ENDPOINT
+
+afterEach(() => {
+    process.env.FLOCI_ENDPOINT = originalEndpoint
+})
+
+function stubLightsail() {
+    const sent: object[] = []
+    const client = {
+        async send(command: object) {
+            sent.push(command)
+            if (command instanceof GetInstancesCommand) return {instances: [instance('web')]}
+            if (command instanceof GetInstanceCommand) return {instance: instance(command.input.instanceName ?? 'web')}
+            return {}
+        },
+    } as unknown as LightsailClient
+    return {client, sent}
+}
+
+function instance(name: string) {
+    return {
+        name,
+        arn: `arn:aws:lightsail:us-east-1:000000000000:Instance/${name}`,
+        createdAt: new Date('2026-10-09T00:00:00Z'),
+        state: {name: 'running'},
+        blueprintId: 'ubuntu_22_04',
+        blueprintName: 'Ubuntu',
+        bundleId: 'nano_3_0',
+        publicIpAddress: '203.0.113.10',
+        privateIpAddress: '10.0.0.10',
+        networking: {staticIp: '203.0.113.11', ports: [{fromPort: 80, toPort: 80, protocol: 'tcp'}]},
+        hardware: {disks: [{name: `${name}-root`, sizeInGb: 20, isSystemDisk: true, state: 'in-use'}]},
+        location: {availabilityZone: 'us-east-1a'},
+    }
+}
+
+describe('AwsLightsailAdapter', () => {
+    test('maps Lightsail instances to Cloud Explorer resources', async () => {
+        const [resource] = await new AwsLightsailAdapter(stubLightsail().client).list()
+        expect(resource).toMatchObject({id: 'web', service: 'lightsail', status: 'running', region: 'us-east-1a'})
+        expect(resource?.metadata.publicIpAddress).toBe('203.0.113.10')
+        expect(resource?.metadata).toMatchObject({privateIpAddress: '10.0.0.10', networking: {staticIp: '203.0.113.11'}, hardware: {disks: [{name: 'web-root'}]}})
+    })
+
+    test('merges diagnostic host-port mappings into UI metadata', async () => {
+        process.env.FLOCI_ENDPOINT = 'http://core.test:4566'
+        const fetchMock = globalThis.fetch
+        globalThis.fetch = async () => new Response(JSON.stringify({mappings: [
+            {instancePort: 80, host: 'localhost', hostPort: 18080, protocol: 'tcp'},
+        ]}))
+        try {
+            const resource = await new AwsLightsailAdapter(stubLightsail().client).get('web')
+            expect(resource?.metadata.hostPortMappings).toEqual([
+                {instancePort: 80, host: 'localhost', hostPort: 18080, protocol: 'tcp'},
+            ])
+        } finally {
+            globalThis.fetch = fetchMock
+        }
+    })
+
+    test('uses Lightsail CreateInstances request fields', async () => {
+        const stub = stubLightsail()
+        await new AwsLightsailAdapter(stub.client).create({values: {
+            name: 'web', blueprintId: 'ubuntu_22_04', bundleId: 'nano_3_0', availabilityZone: 'us-east-1a',
+        }})
+        expect(stub.sent.find((command) => command instanceof CreateInstancesCommand))
+            .toMatchObject({input: {
+                instanceNames: ['web'], blueprintId: 'ubuntu_22_04', bundleId: 'nano_3_0', availabilityZone: 'us-east-1a',
+            }})
+    })
+
+    test('deletes instances by name', async () => {
+        const stub = stubLightsail()
+        await new AwsLightsailAdapter(stub.client).delete('web')
+        expect(stub.sent.find((command) => command instanceof DeleteInstanceCommand))
+            .toMatchObject({input: {instanceName: 'web'}})
+    })
+
+    test('uses Lightsail lifecycle commands', async () => {
+        const stub = stubLightsail()
+        const adapter = new AwsLightsailAdapter(stub.client)
+        await adapter.start('web')
+        await adapter.stop('web')
+        await adapter.reboot('web')
+        expect(stub.sent.find((command) => command instanceof StartInstanceCommand)).toMatchObject({input: {instanceName: 'web'}})
+        expect(stub.sent.find((command) => command instanceof StopInstanceCommand)).toMatchObject({input: {instanceName: 'web'}})
+        expect(stub.sent.find((command) => command instanceof RebootInstanceCommand)).toMatchObject({input: {instanceName: 'web'}})
+    })
+
+    test('opens and closes public ports with the Lightsail port contract', async () => {
+        const stub = stubLightsail()
+        const adapter = new AwsLightsailAdapter(stub.client)
+        await adapter.update('web', {values: {action: 'openPort', fromPort: 8080, toPort: 8080, protocol: 'tcp'}})
+        await adapter.update('web', {values: {action: 'closePort', fromPort: 8080, toPort: 8080, protocol: 'tcp'}})
+        expect(stub.sent.find((command) => command instanceof OpenInstancePublicPortsCommand)).toMatchObject({input: {instanceName: 'web', portInfo: {fromPort: 8080, toPort: 8080, protocol: 'tcp'}}})
+        expect(stub.sent.find((command) => command instanceof CloseInstancePublicPortsCommand)).toMatchObject({input: {instanceName: 'web', portInfo: {fromPort: 8080, toPort: 8080, protocol: 'tcp'}}})
+    })
+})
@@ -0,0 +1,168 @@
+import {
+    CloseInstancePublicPortsCommand,
+    CreateInstancesCommand,
+    DeleteInstanceCommand,
+    GetInstanceCommand,
+    GetInstancesCommand,
+    OpenInstancePublicPortsCommand,
+    type NetworkProtocol,
+    RebootInstanceCommand,
+    StartInstanceCommand,
+    StopInstanceCommand,
+    type Instance,
+    type LightsailClient,
+} from '@aws-sdk/client-lightsail'
+import {NotFoundError, ValidationError} from '../cloud-spi/errors'
+import {awsLightsailSchema} from '../cloud-spi/lightsailSchema'
+import {awsClients} from '../aws'
+import type {CloudResource, CloudServiceAdapter, CreateResourceInput, ResourceQuery, ServiceSchema, UpdateResourceInput} from '../cloud-spi/types'
+
+export class AwsLightsailAdapter implements CloudServiceAdapter {
+    readonly cloud = 'aws' as const
+    readonly service = 'lightsail' as const
+
+    constructor(private readonly lightsail: LightsailClient = awsClients.lightsail) {}
+
+    schema(): ServiceSchema {
+        return awsLightsailSchema()
+    }
+
+    async list(query: ResourceQuery = {}): Promise<CloudResource[]> {
+        const response = await this.lightsail.send(new GetInstancesCommand({}))
+        const search = query.search?.trim().toLowerCase()
+        const resources = await Promise.all((response.instances ?? []).map((instance) => toResource(instance)))
+        return resources
+            .filter((instance) => !search || instance.name.toLowerCase().includes(search))
+    }
+
+    async get(id: string): Promise<CloudResource | null> {
+        try {
+            const response = await this.lightsail.send(new GetInstanceCommand({instanceName: id}))
+            return response.instance ? await toResource(response.instance) : null
+        } catch (error) {
+            if (isNotFound(error)) return null
+            throw error
+        }
+    }
+
+    async create(input: CreateResourceInput): Promise<CloudResource> {
+        const name = text(input.values.name)
+        const blueprintId = text(input.values.blueprintId)
+        const bundleId = text(input.values.bundleId)
+        const availabilityZone = text(input.values.availabilityZone)
+        if (!name || !blueprintId || !bundleId || !availabilityZone) {
+            throw new ValidationError('name, blueprintId, bundleId, and availabilityZone are required')
+        }
+        await this.lightsail.send(new CreateInstancesCommand({
+            instanceNames: [name], blueprintId, bundleId, availabilityZone,
+        }))
+        const instance = await this.get(name)
+        if (!instance) throw new ValidationError(`Lightsail did not return instance ${name} after creation`)
+        return instance
+    }
+
+    async delete(id: string): Promise<void> {
+        if (!await this.get(id)) throw new NotFoundError(`Lightsail instance ${id} does not exist`)
+        await this.lightsail.send(new DeleteInstanceCommand({instanceName: id}))
+    }
+
+    async update(id: string, input: UpdateResourceInput): Promise<CloudResource> {
+        const action = text(input.values.action)
+        const fromPort = port(input.values.fromPort)
+        const toPort = port(input.values.toPort)
+        const protocol = text(input.values.protocol)
+        if ((action !== 'openPort' && action !== 'closePort') || fromPort === null || toPort === null || fromPort > toPort || protocol !== 'tcp') {
+            throw new ValidationError('action (openPort or closePort), valid fromPort/toPort, and protocol tcp are required')
+        }
+        const portInfo = {fromPort, toPort, protocol: protocol as NetworkProtocol, cidrs: ['0.0.0.0/0']}
+        if (action === 'openPort') {
+            await this.lightsail.send(new OpenInstancePublicPortsCommand({instanceName: id, portInfo}))
+        } else {
+            await this.lightsail.send(new CloseInstancePublicPortsCommand({instanceName: id, portInfo}))
+        }
+        const instance = await this.get(id)
+        if (!instance) throw new NotFoundError(`Lightsail instance ${id} does not exist`)
+        return instance
+    }
+
+    async start(id: string): Promise<void> {
+        await this.lightsail.send(new StartInstanceCommand({instanceName: id}))
+    }
+
+    async stop(id: string): Promise<void> {
+        await this.lightsail.send(new StopInstanceCommand({instanceName: id}))
+    }
+
+    async reboot(id: string): Promise<void> {
+        await this.lightsail.send(new RebootInstanceCommand({instanceName: id}))
+    }
+
+    async health(): Promise<void> {
+        await this.lightsail.send(new GetInstancesCommand({}))
+    }
+}
+
+async function toResource(instance: Instance): Promise<CloudResource> {
+    const name = instance.name ?? ''
+    const hostPortMappings = await lightsailHostPortMappings(name)
+    return {
+        id: name,
+        name,
+        cloud: 'aws',
+        service: 'lightsail',
+        type: 'instance',
+        region: instance.location?.availabilityZone ?? null,
+        createdAt: instance.createdAt?.toISOString() ?? null,
+        status: instance.state?.name ?? null,
+        metadata: {
+            arn: instance.arn,
+            blueprintId: instance.blueprintId,
+            blueprintName: instance.blueprintName,
+            bundleId: instance.bundleId,
+            publicIpAddress: instance.publicIpAddress,
+            privateIpAddress: instance.privateIpAddress,
+            username: instance.username,
+            networking: instance.networking,
+            hardware: instance.hardware,
+            hostPortMappings,
+        },
+    }
+}
+
+type HostPortMapping = {instancePort: number; host: string; hostPort: number; protocol?: string}
+
+async function lightsailHostPortMappings(instanceName: string): Promise<HostPortMapping[]> {
+    const endpoint = process.env.FLOCI_ENDPOINT
+    if (!endpoint || !instanceName) return []
+    try {
+        const response = await fetch(new URL(`/_floci/diagnostics/lightsail/instances/${encodeURIComponent(instanceName)}/host-ports`, endpoint), {
+            redirect: 'error', signal: AbortSignal.timeout(5_000),
+        })
+        if (!response.ok) return []
+        const body = await response.json() as {mappings?: unknown}
+        if (!Array.isArray(body.mappings)) return []
+        return body.mappings.flatMap((mapping): HostPortMapping[] => {
+            if (!mapping || typeof mapping !== 'object') return []
+            const value = mapping as {instancePort?: unknown; host?: unknown; hostPort?: unknown; protocol?: unknown}
+            return typeof value.instancePort === 'number' && typeof value.host === 'string' && typeof value.hostPort === 'number'
+                ? [{instancePort: value.instancePort, host: value.host, hostPort: value.hostPort,
+                    protocol: typeof value.protocol === 'string' ? value.protocol : undefined}]
+                : []
+        })
+    } catch {
+        return []
+    }
+}
+
+function text(value: unknown): string {
+    return typeof value === 'string' ? value.trim() : ''
+}
+
+function port(value: unknown): number | null {
+    return typeof value === 'number' && Number.isInteger(value) && value >= 0 && value <= 65535 ? value : null
+}
+
+function isNotFound(error: unknown): boolean {
+    return typeof error === 'object' && error !== null
+        && (error as {name?: string}).name === 'NotFoundException'
+}
@@ -29,6 +29,7 @@ import { KinesisClient } from "@aws-sdk/client-kinesis";
 import { SESv2Client } from "@aws-sdk/client-sesv2";
 import { CloudWatchClient } from "@aws-sdk/client-cloudwatch";
 import { ElastiCacheClient } from "@aws-sdk/client-elasticache";
+import { LightsailClient } from "@aws-sdk/client-lightsail";

 const endpoint = process.env.FLOCI_ENDPOINT;
 const region = process.env.AWS_REGION || "us-east-1";
@@ -89,6 +90,7 @@ export type AwsClients = {
  sesv2: SESv2Client;
  cloudwatch: CloudWatchClient;
  elasticache: ElastiCacheClient;
+  lightsail: LightsailClient;
 };

 export type AwsClientName = keyof AwsClients;
@@ -133,6 +135,7 @@ function buildClients(accountId: string): AwsClients {
    sesv2: new SESv2Client(base),
    cloudwatch: new CloudWatchClient(base),
    elasticache: new ElastiCacheClient(base),
+    lightsail: new LightsailClient(base),
  };
 }

@@ -0,0 +1,54 @@
+import type {CapabilitySchema, FieldSchema, ResourceActionName, ServiceSchema} from './types'
+
+const resourceActions: CapabilitySchema<ResourceActionName>[] = [
+    {name: 'list', label: 'List instances', enabled: true, status: 'available', runtimeRequired: true},
+    {name: 'create', label: 'Create instance', enabled: true, status: 'available', runtimeRequired: true},
+    {name: 'delete', label: 'Delete instance', enabled: true, status: 'available', runtimeRequired: true},
+    {name: 'inspect', label: 'Inspect instance', enabled: true, status: 'available', runtimeRequired: true},
+    {name: 'start', label: 'Start instance', enabled: true, status: 'available', runtimeRequired: true},
+    {name: 'stop', label: 'Stop instance', enabled: true, status: 'available', runtimeRequired: true},
+    {name: 'reboot', label: 'Reboot instance', enabled: true, status: 'available', runtimeRequired: true},
+    {name: 'update', label: 'Manage public ports', enabled: true, status: 'available', runtimeRequired: true},
+]
+
+const fields: FieldSchema[] = [
+    {name: 'name', label: 'Instance name', type: 'text', required: true, validation: {minLength: 1, maxLength: 255, message: 'Provide an instance name.'}},
+    {
+        name: 'blueprintId', label: 'Blueprint', type: 'select', required: true, defaultValue: 'ubuntu_22_04', options: [
+            {label: 'Ubuntu 22.04 LTS', value: 'ubuntu_22_04'},
+            {label: 'Ubuntu 24.04 LTS', value: 'ubuntu_24_04'},
+            {label: 'Amazon Linux 2023', value: 'amazon_linux_2023'},
+            {label: 'Nginx', value: 'nginx'},
+            {label: 'WordPress', value: 'wordpress'},
+        ],
+    },
+    {
+        name: 'bundleId', label: 'Instance plan', type: 'select', required: true, defaultValue: 'nano_3_0', options: [
+            {label: 'Nano', value: 'nano_3_0'},
+            {label: 'Micro', value: 'micro_3_0'},
+            {label: 'Small', value: 'small_3_0'},
+            {label: 'Medium', value: 'medium_3_0'},
+        ],
+    },
+    {name: 'availabilityZone', label: 'Availability Zone', type: 'text', required: true, defaultValue: 'us-east-1a'},
+]
+
+export function awsLightsailSchema(): ServiceSchema {
+    return {
+        cloud: 'aws',
+        service: 'lightsail',
+        displayName: 'Amazon Lightsail',
+        fields,
+        actions: ['list', 'create', 'inspect', 'update', 'delete'],
+        capabilities: {resourceActions},
+        filters: [{name: 'search', label: 'Search', type: 'text', required: false}],
+        columns: [
+            {name: 'name', label: 'Name'},
+            {name: 'status', label: 'State', format: 'badge'},
+            {name: 'blueprint', label: 'Blueprint', path: 'metadata.blueprintName'},
+            {name: 'bundle', label: 'Plan', path: 'metadata.bundleId'},
+            {name: 'publicIp', label: 'Public IP', path: 'metadata.publicIpAddress'},
+            {name: 'createdAt', label: 'Created', format: 'datetime'},
+        ],
+    }
+}
@@ -93,6 +93,12 @@ export const SERVICE_CATALOG = {
        group: 'Compute',
        order: 51,
    },
+    lightsail: {
+        displayName: 'Lightsail',
+        iconKey: 'lightsail',
+        group: 'Compute',
+        order: 60,
+    },
    codebuild: {
        displayName: 'CodeBuild',
        iconKey: 'codebuild',
@@ -46,6 +46,7 @@ import {AwsEcsAdapter} from './adapter-aws/AwsEcsAdapter'
 import {AwsFargateAdapter} from './adapter-aws/AwsFargateAdapter'
 import {AwsKinesisAdapter} from './adapter-aws/AwsKinesisAdapter'
 import {AwsElastiCacheAdapter} from './adapter-aws/AwsElastiCacheAdapter'
+import {AwsLightsailAdapter} from './adapter-aws/AwsLightsailAdapter'
 import {awsClientsForAccount, resolveAccountId} from './aws'
 import {createEc2Service} from './services/ec2'
 import {createEksService} from './services/eks'
@@ -94,6 +95,7 @@ export function createCloudAdapterRegistry(accountId?: string | null): CloudAdap
        new AwsFargateAdapter(new AwsEcsAdapter(clients.ecs, clients.elbv2)),
        new AwsKinesisAdapter(clients.kinesis),
        new AwsElastiCacheAdapter(clients.elasticache),
+        new AwsLightsailAdapter(clients.lightsail),
        new AzureStorageAdapter(),
        new AzureServiceBusAdapter(),
        new AzureDatabaseAdapter(),
@@ -14,6 +14,7 @@ import {isServiceType} from '../cloud-spi/serviceCatalog'
 import {mapAwsSdkError} from '../adapter-aws/awsErrors'
 import {serviceForAccount} from '../cloudProxy'
 import {CloudProxyService} from '../service/CloudProxyService'
+import {deployLightsailNodeApplication, deployLightsailStaticFiles} from '../services/lightsailDeployment'

 // Header (and query-param fallback for direct links such as object downloads)
 // used by the frontend to scope every request to an AWS account.
@@ -136,6 +137,40 @@ export function createCloudRoutes(injectedService?: CloudProxyService) {
        })
    })

+    app.post('/aws/services/lightsail/resources/:id/static-files', async (c) => {
+        return withRuntime(c, async () => {
+            const form = await c.req.formData()
+            const files = form.getAll('files').filter((entry): entry is File => entry instanceof File)
+            if (files.length === 0 || files.length !== form.getAll('files').length) {
+                throw new ValidationError('At least one file is required.')
+            }
+            const upload = new FormData()
+            for (const file of files) {
+                upload.append('files', file, file.name)
+            }
+            return c.json(await deployLightsailStaticFiles(c.req.param('id'), upload))
+        })
+    })
+
+    app.post('/aws/services/lightsail/resources/:id/node-application', async (c) => {
+        return withRuntime(c, async () => {
+            const form = await c.req.formData()
+            const files = form.getAll('files').filter((entry): entry is File => entry instanceof File)
+            if (files.length === 0 || files.length !== form.getAll('files').length) {
+                throw new ValidationError('At least one file or zip archive is required.')
+            }
+            const portValue = form.get('port')
+            const port = typeof portValue === 'string' && /^\d+$/.test(portValue) ? Number(portValue) : 3000
+            if (port < 1 || port > 65535) throw new ValidationError('Port must be between 1 and 65535.')
+            const upload = new FormData()
+            for (const file of files) upload.append('files', file, file.name)
+            const startCommand = form.get('startCommand')
+            if (typeof startCommand === 'string' && startCommand.trim()) upload.append('startCommand', startCommand.trim())
+            upload.append('port', String(port))
+            return c.json(await deployLightsailNodeApplication(c.req.param('id'), upload))
+        })
+    })
+
    app.get('/:cloud/services/nosql/resources/:id/containers', async (c) => {
        const cloud = c.req.param('cloud') as CloudProvider
        if (!isCloudProvider(cloud)) return c.json({error: 'Unknown cloud'}, 404)
@@ -1,5 +1,6 @@
 import {describe, expect, test} from 'bun:test'
 import {createEc2Router} from './ec2'
+import {SshCheckError, type SshCheckResult} from '../services/sshCheck'
 import type {
    CreateAmiInput,
    CreateNatGatewayInput,
@@ -202,6 +203,51 @@ describe('POST /instances/:id/terminate', () => {
    })
 })

+describe('POST /instances/:id/ssh/check', () => {
+    test('returns the backend SSH check response', async () => {
+        let checkedInstanceId: string | undefined
+        const router = createEc2Router(fakeService, {
+            check: async (instanceId: string): Promise<SshCheckResult> => {
+                checkedInstanceId = instanceId
+                return {
+                    ok: true,
+                    banner: 'SSH-2.0-OpenSSH_9.7',
+                    checkedFrom: 'UI backend',
+                    checkedAt: '2026-10-08T12:00:00.000Z',
+                    target: {host: 'host.docker.internal', port: 2222},
+                }
+            },
+        })
+
+        const res = await router.request('/instances/i-test1/ssh/check', {
+            method: 'POST',
+            headers: {'content-type': 'application/json'},
+            body: JSON.stringify({host: 'attacker.example', port: 22}),
+        })
+
+        expect(res.status).toBe(200)
+        expect(checkedInstanceId).toBe('i-test1')
+        expect(await res.json()).toEqual({
+            ok: true,
+            banner: 'SSH-2.0-OpenSSH_9.7',
+            checkedFrom: 'UI backend',
+            checkedAt: '2026-10-08T12:00:00.000Z',
+            target: {host: 'host.docker.internal', port: 2222},
+        })
+    })
+
+    test('maps typed checker errors', async () => {
+        const router = createEc2Router(fakeService, {
+            check: async () => { throw new SshCheckError('CONNECTION_TIMEOUT', 'SSH connection timed out', 504) },
+        })
+
+        const res = await router.request('/instances/i-test1/ssh/check', {method: 'POST'})
+
+        expect(res.status).toBe(504)
+        expect(await res.json()).toEqual({ok: false, code: 'CONNECTION_TIMEOUT', error: 'SSH connection timed out'})
+    })
+})
+
 describe('PUT /instances/:id/security-groups', () => {
    test('replaces security groups', async () => {
        let receivedGroupIds: string[] | undefined
@@ -11,8 +11,10 @@ import type {
    VpcWizardInput,
 } from '../services/ec2'
 import {ec2Service} from '../services/ec2'
+import {SshCheckError, sshCheckService} from '../services/sshCheck'

 type Ec2Service = typeof ec2Service
+type SshCheckService = typeof sshCheckService
 type CreateKeyPairInput = {name: string; keyType?: Ec2KeyPairType}

 type Ec2DiagnosticResponse = {ec2?: {instances?: Array<{
@@ -21,6 +23,21 @@ type Ec2DiagnosticResponse = {ec2?: {instances?: Array<{
    sshPort?: number
    containerId?: string
    containerStatus?: 'running' | 'stopped' | 'unavailable'
+    state?: string
+    launchStatus?: string
+    launchEvents?: Array<{stage?: string; status?: string; timestamp?: string; message?: string}>
+    selectedImageType?: string
+    selectedImageReference?: string
+    sshUser?: string
+    sshPreinstalled?: boolean
+    initType?: string
+    sshServiceName?: string
+    sshStatus?: string
+    sshStatusMessage?: string
+    keyName?: string
+    keyInjectionStatus?: string
+    publishedPorts?: Record<string, number>
+    failure?: {code?: string; message?: string} | string
 }>}}

 async function connectionDetails(instanceId: string) {
@@ -49,7 +66,7 @@ function handleError(c: Context, error: unknown) {
    return c.json({error: msg}, 400)
 }

-export function createEc2Router(svc: Ec2Service = ec2Service) {
+export function createEc2Router(svc: Ec2Service = ec2Service, sshChecker: SshCheckService = sshCheckService) {
    const app = new Hono()

    // Instances
@@ -108,9 +125,23 @@ export function createEc2Router(svc: Ec2Service = ec2Service) {
        }
    })

+    app.post('/instances/:instanceId/ssh/check', async (c) => {
+        try {
+            return c.json(await sshChecker.check(c.req.param('instanceId')))
+        } catch (error) {
+            if (error instanceof SshCheckError) {
+                return c.json({ok: false, code: error.code, error: error.message}, error.status)
+            }
+            return c.json({ok: false, code: 'DIAGNOSTICS_UNAVAILABLE', error: 'SSH check failed'}, 502)
+        }
+    })
+
    app.put('/instances/:instanceId/tags', async (c) => {
        try {
            const {toAdd, toRemove} = await c.req.json<{toAdd: Ec2Tag[]; toRemove: string[]}>()
+            if (!Array.isArray(toAdd) || !Array.isArray(toRemove)) {
+                return c.json({error: 'toAdd and toRemove must be arrays'}, 400)
+            }
            await svc.updateInstanceTags(c.req.param('instanceId'), toAdd, toRemove)
            return c.json({ok: true})
        } catch (error) {
@@ -0,0 +1,42 @@
+import {afterEach, describe, expect, mock, test} from 'bun:test'
+import {deployLightsailNodeApplication, deployLightsailStaticFiles} from './lightsailDeployment'
+
+const originalEndpoint = process.env.FLOCI_ENDPOINT
+const originalFetch = globalThis.fetch
+
+afterEach(() => {
+    process.env.FLOCI_ENDPOINT = originalEndpoint
+    globalThis.fetch = originalFetch
+    mock.restore()
+})
+
+describe('deployLightsailNodeApplication', () => {
+    test('forwards package uploads and preserves core deployment diagnostics', async () => {
+        process.env.FLOCI_ENDPOINT = 'http://core.test:4566'
+        const fetch = mock(() => Promise.resolve(new Response(JSON.stringify({status: 'deployed', files: 2, port: 3000, releaseId: 'release'}), {headers: {'content-type': 'application/json'}})))
+        globalThis.fetch = fetch as unknown as typeof globalThis.fetch
+        const form = new FormData()
+        form.append('files', new File(['{}'], 'package.json'))
+        form.append('port', '3000')
+
+        await expect(deployLightsailNodeApplication('node app', form)).resolves.toEqual({status: 'deployed', files: 2, port: 3000, releaseId: 'release'})
+        expect(fetch).toHaveBeenCalledWith('http://core.test:4566/_floci/diagnostics/lightsail/instances/node%20app/node-application', expect.objectContaining({
+            method: 'POST', body: form, redirect: 'error',
+        }))
+    })
+})
+
+describe('deployLightsailStaticFiles', () => {
+    test('forwards multipart files only to the diagnostics deployment endpoint', async () => {
+        process.env.FLOCI_ENDPOINT = 'http://core.test:4566'
+        const fetch = mock(() => Promise.resolve(new Response(JSON.stringify({status: 'deployed', files: 1}), {headers: {'content-type': 'application/json'}})))
+        globalThis.fetch = fetch as unknown as typeof globalThis.fetch
+        const form = new FormData()
+        form.append('files', new File(['<h1>ok</h1>'], 'site/index.html'))
+
+        await expect(deployLightsailStaticFiles('web site', form)).resolves.toEqual({status: 'deployed', files: 1})
+        expect(fetch).toHaveBeenCalledWith('http://core.test:4566/_floci/diagnostics/lightsail/instances/web%20site/static-files', expect.objectContaining({
+            method: 'POST', body: form, redirect: 'error',
+        }))
+    })
+})
@@ -0,0 +1,44 @@
+import {httpStatusToCloudError, RuntimeUnavailableError} from '../cloud-spi/errors'
+
+export type LightsailStaticDeployment = {status: 'deployed'; files: number}
+export type LightsailNodeDeployment = {status: 'deployed'; files: number; port: number; releaseId: string}
+
+export async function deployLightsailStaticFiles(instanceName: string, form: FormData): Promise<LightsailStaticDeployment> {
+    const endpoint = process.env.FLOCI_ENDPOINT
+    if (!endpoint) throw new RuntimeUnavailableError('Floci diagnostics are unavailable')
+
+    let response: Response
+    try {
+        response = await fetch(new URL(`/_floci/diagnostics/lightsail/instances/${encodeURIComponent(instanceName)}/static-files`, endpoint).toString(), {
+            method: 'POST', body: form, redirect: 'error', signal: AbortSignal.timeout(30_000),
+        })
+    } catch (error) {
+        throw new RuntimeUnavailableError('Floci diagnostics are unavailable', {cause: error})
+    }
+    const body = await response.json().catch(() => ({})) as {message?: unknown; files?: unknown; status?: unknown}
+    if (!response.ok) throw httpStatusToCloudError(response.status, typeof body.message === 'string' ? body.message : 'Static file deployment failed')
+    if (body.status !== 'deployed' || typeof body.files !== 'number') {
+        throw new RuntimeUnavailableError('Floci diagnostics returned an invalid deployment response')
+    }
+    return {status: 'deployed', files: body.files}
+}
+
+export async function deployLightsailNodeApplication(instanceName: string, form: FormData): Promise<LightsailNodeDeployment> {
+    const endpoint = process.env.FLOCI_ENDPOINT
+    if (!endpoint) throw new RuntimeUnavailableError('Floci diagnostics are unavailable')
+
+    let response: Response
+    try {
+        response = await fetch(new URL(`/_floci/diagnostics/lightsail/instances/${encodeURIComponent(instanceName)}/node-application`, endpoint).toString(), {
+            method: 'POST', body: form, redirect: 'error', signal: AbortSignal.timeout(360_000),
+        })
+    } catch (error) {
+        throw new RuntimeUnavailableError('Floci diagnostics are unavailable', {cause: error})
+    }
+    const body = await response.json().catch(() => ({})) as {message?: unknown; files?: unknown; status?: unknown; port?: unknown; releaseId?: unknown}
+    if (!response.ok) throw httpStatusToCloudError(response.status, typeof body.message === 'string' ? body.message : 'Node.js deployment failed')
+    if (body.status !== 'deployed' || typeof body.files !== 'number' || typeof body.port !== 'number' || typeof body.releaseId !== 'string') {
+        throw new RuntimeUnavailableError('Floci diagnostics returned an invalid Node.js deployment response')
+    }
+    return {status: 'deployed', files: body.files, port: body.port, releaseId: body.releaseId}
+}
@@ -0,0 +1,157 @@
+import {afterEach, describe, expect, test} from 'bun:test'
+import {createServer, type Server} from 'node:net'
+import {
+    createSshCheckService,
+    readSshBanner,
+    SshCheckError,
+    type SshTarget,
+} from './sshCheck'
+
+const servers: Server[] = []
+
+afterEach(async () => {
+    await Promise.all(servers.splice(0).map((server) => new Promise<void>((resolve) => server.close(() => resolve()))))
+})
+
+async function listen(handler: (socket: import('node:net').Socket) => void): Promise<SshTarget> {
+    const server = createServer(handler)
+    servers.push(server)
+    await new Promise<void>((resolve) => server.listen(0, '127.0.0.1', resolve))
+    const address = server.address()
+    if (!address || typeof address === 'string') throw new Error('Test server has no TCP address')
+    return {host: '127.0.0.1', port: address.port}
+}
+
+describe('readSshBanner', () => {
+    test('reads a real SSH identification banner', async () => {
+        const target = await listen((socket) => socket.end('SSH-2.0-OpenSSH_9.7\r\n'))
+
+        expect(await readSshBanner(target, 500)).toBe('SSH-2.0-OpenSSH_9.7')
+    })
+
+    test('assembles a fragmented banner', async () => {
+        const target = await listen((socket) => {
+            socket.write('SSH-2.0-Open')
+            setTimeout(() => socket.end('SSH_9.7\r\n'), 10)
+        })
+
+        expect(await readSshBanner(target, 500)).toBe('SSH-2.0-OpenSSH_9.7')
+    })
+
+    test('rejects a connection that closes without an SSH banner', async () => {
+        const target = await listen((socket) => socket.end('HTTP/1.1 200 OK\r\n'))
+
+        await expect(readSshBanner(target, 500)).rejects.toMatchObject({code: 'SSH_BANNER_MISSING'})
+    })
+
+    test('rejects an SSH identification line longer than the protocol limit', async () => {
+        const target = await listen((socket) => socket.end(`SSH-2.0-${'x'.repeat(246)}\r\n`))
+
+        await expect(readSshBanner(target, 500)).rejects.toMatchObject({code: 'SSH_BANNER_MISSING'})
+    })
+
+    test('maps a silent socket to a timeout', async () => {
+        const target = await listen(() => {})
+
+        await expect(readSshBanner(target, 20)).rejects.toMatchObject({code: 'CONNECTION_TIMEOUT'})
+    })
+
+    test('maps a refused socket connection', async () => {
+        const temporaryServer = createServer()
+        await new Promise<void>((resolve) => temporaryServer.listen(0, '127.0.0.1', resolve))
+        const address = temporaryServer.address()
+        if (!address || typeof address === 'string') throw new Error('Test server has no TCP address')
+        const port = address.port
+        await new Promise<void>((resolve) => temporaryServer.close(() => resolve()))
+
+        await expect(readSshBanner({host: '127.0.0.1', port}, 500)).rejects.toMatchObject({code: 'CONNECTION_REFUSED'})
+    })
+})
+
+describe('sshCheckService', () => {
+    test('derives the exact instance target and overrides a loopback host', async () => {
+        let receivedTarget: SshTarget | undefined
+        const service = createSshCheckService({
+            fetchDiagnostics: async () => ({ec2: {instances: [
+                {instanceId: 'i-other', sshHost: '192.0.2.10', sshPort: 2200, containerStatus: 'running'},
+                {instanceId: 'i-wanted', sshHost: '127.0.0.1', sshPort: 2222, containerStatus: 'running'},
+            ]}}),
+            loopbackHost: 'ssh-host.test',
+            connect: async (target) => {
+                receivedTarget = target
+                return 'SSH-2.0-test'
+            },
+            now: () => new Date('2026-10-08T12:00:00.000Z'),
+        })
+
+        const result = await service.check('i-wanted')
+
+        expect(receivedTarget).toEqual({host: 'ssh-host.test', port: 2222})
+        expect(result).toEqual({
+            ok: true,
+            banner: 'SSH-2.0-test',
+            checkedFrom: 'UI backend',
+            checkedAt: '2026-10-08T12:00:00.000Z',
+            target: {host: 'ssh-host.test', port: 2222},
+        })
+    })
+
+    test('does not allow diagnostics to redirect the backend probe', async () => {
+        let receivedTarget: SshTarget | undefined
+        const service = createSshCheckService({
+            fetchDiagnostics: async () => ({ec2: {instances: [
+                {instanceId: 'i-wanted', sshHost: '192.0.2.20', sshPort: 2222, containerStatus: 'running'},
+            ]}}),
+            loopbackHost: 'ssh-host.test',
+            connect: async (target) => {
+                receivedTarget = target
+                return 'SSH-2.0-test'
+            },
+        })
+
+        await service.check('i-wanted')
+
+        expect(receivedTarget).toEqual({host: 'ssh-host.test', port: 2222})
+    })
+
+    test('reports malformed diagnostics before attempting a connection', async () => {
+        const service = createSshCheckService({
+            fetchDiagnostics: async () => ({ec2: {instances: {} as never}}),
+            connect: async () => { throw new Error('must not connect') },
+        })
+
+        await expect(service.check('i-running')).rejects.toMatchObject({
+            code: 'DIAGNOSTICS_UNAVAILABLE',
+            status: 502,
+        })
+    })
+
+    test('reports missing diagnostics for an unmatched instance', async () => {
+        const service = createSshCheckService({fetchDiagnostics: async () => ({ec2: {instances: []}})})
+
+        await expect(service.check('i-missing')).rejects.toMatchObject({code: 'DIAGNOSTICS_UNAVAILABLE', status: 404})
+    })
+
+    test('reports a stopped instance before attempting a connection', async () => {
+        const service = createSshCheckService({
+            fetchDiagnostics: async () => ({ec2: {instances: [
+                {instanceId: 'i-stopped', sshHost: '127.0.0.1', sshPort: 2222, containerStatus: 'stopped'},
+            ]}}),
+            connect: async () => { throw new Error('must not connect') },
+        })
+
+        await expect(service.check('i-stopped')).rejects.toMatchObject({code: 'INSTANCE_NOT_RUNNING', status: 409})
+    })
+
+    test('rejects an invalid banner returned by a connector', async () => {
+        const service = createSshCheckService({
+            fetchDiagnostics: async () => ({ec2: {instances: [
+                {instanceId: 'i-running', sshHost: '127.0.0.1', sshPort: 2222, containerStatus: 'running'},
+            ]}}),
+            connect: async () => 'not ssh',
+        })
+
+        await expect(service.check('i-running')).rejects.toBeInstanceOf(SshCheckError)
+        await expect(service.check('i-running')).rejects.toMatchObject({code: 'SSH_BANNER_MISSING'})
+    })
+})
@@ -0,0 +1,194 @@
+import {createConnection} from 'node:net'
+
+const DEFAULT_TIMEOUT_MS = 3_000
+const MAX_BANNER_BYTES = 8_192
+
+type Ec2DiagnosticInstance = {
+    instanceId?: string
+    sshHost?: string
+    sshPort?: number
+    containerStatus?: 'running' | 'stopped' | 'unavailable'
+}
+
+type DiagnosticResponse = {
+    ec2?: {instances?: Ec2DiagnosticInstance[]}
+}
+
+export type SshTarget = {
+    host: string
+    port: number
+}
+
+export type SshCheckResult = {
+    ok: true
+    banner: string
+    checkedFrom: 'UI backend'
+    checkedAt: string
+    target: SshTarget
+}
+
+export type SshCheckErrorCode =
+    | 'DIAGNOSTICS_UNAVAILABLE'
+    | 'INSTANCE_NOT_RUNNING'
+    | 'CONNECTION_REFUSED'
+    | 'CONNECTION_TIMEOUT'
+    | 'SSH_BANNER_MISSING'
+
+export class SshCheckError extends Error {
+    constructor(
+        readonly code: SshCheckErrorCode,
+        message: string,
+        readonly status: 404 | 409 | 502 | 503 | 504,
+    ) {
+        super(message)
+        this.name = 'SshCheckError'
+    }
+}
+
+export type DiagnosticFetcher = () => Promise<DiagnosticResponse>
+export type SshSocketConnector = (target: SshTarget, timeoutMs: number) => Promise<string>
+
+type SshCheckDependencies = {
+    fetchDiagnostics?: DiagnosticFetcher
+    connect?: SshSocketConnector
+    loopbackHost?: string
+    now?: () => Date
+    timeoutMs?: number
+}
+
+async function fetchDiagnostics(): Promise<DiagnosticResponse> {
+    const endpoint = process.env.FLOCI_ENDPOINT
+    if (!endpoint) {
+        throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', 'Floci diagnostics are unavailable', 503)
+    }
+
+    let response: Response
+    try {
+        response = await fetch(`${endpoint}/_floci/diagnose`, {signal: AbortSignal.timeout(DEFAULT_TIMEOUT_MS)})
+    } catch {
+        throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', 'Floci diagnostics are unavailable', 503)
+    }
+    if (!response.ok) {
+        throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', 'Floci diagnostics are unavailable', 503)
+    }
+
+    try {
+        return await response.json() as DiagnosticResponse
+    } catch {
+        throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', 'Floci diagnostics returned an invalid response', 502)
+    }
+}
+
+export function readSshBanner(target: SshTarget, timeoutMs: number): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const socket = createConnection(target)
+        let settled = false
+        let buffer = Buffer.alloc(0)
+
+        const finish = (error?: SshCheckError, banner?: string) => {
+            if (settled) return
+            settled = true
+            clearTimeout(timer)
+            socket.destroy()
+            if (error) reject(error)
+            else resolve(banner!)
+        }
+
+        const timer = setTimeout(() => {
+            finish(new SshCheckError('CONNECTION_TIMEOUT', `SSH connection to ${target.host}:${target.port} timed out`, 504))
+        }, timeoutMs)
+
+        socket.on('data', (chunk: Buffer) => {
+            buffer = Buffer.concat([buffer, chunk])
+            if (buffer.length > MAX_BANNER_BYTES) {
+                finish(new SshCheckError('SSH_BANNER_MISSING', 'SSH server did not send a valid banner', 502))
+                return
+            }
+
+            const lines = buffer.toString('utf8').split(/\r?\n/)
+            for (let index = 0; index < lines.length - 1; index++) {
+                const line = lines[index]
+                if (/^SSH-\d+\.\d+-[\x21-\x7e]+(?: [\x20-\x7e]*)?$/.test(line)
+                    && Buffer.byteLength(line, 'ascii') <= 253) {
+                    finish(undefined, line)
+                    return
+                }
+            }
+        })
+        socket.on('end', () => {
+            finish(new SshCheckError('SSH_BANNER_MISSING', 'SSH server closed without sending a valid banner', 502))
+        })
+        socket.on('close', () => {
+            finish(new SshCheckError('SSH_BANNER_MISSING', 'SSH server closed without sending a valid banner', 502))
+        })
+        socket.on('error', (error: NodeJS.ErrnoException) => {
+            if (error.code === 'ECONNREFUSED') {
+                finish(new SshCheckError('CONNECTION_REFUSED', `SSH connection to ${target.host}:${target.port} was refused`, 503))
+                return
+            }
+            if (error.code === 'ETIMEDOUT') {
+                finish(new SshCheckError('CONNECTION_TIMEOUT', `SSH connection to ${target.host}:${target.port} timed out`, 504))
+                return
+            }
+            finish(new SshCheckError('CONNECTION_REFUSED', `SSH connection to ${target.host}:${target.port} failed`, 503))
+        })
+    })
+}
+
+export function createSshCheckService(dependencies: SshCheckDependencies = {}) {
+    const diagnosticFetcher = dependencies.fetchDiagnostics ?? fetchDiagnostics
+    const connector = dependencies.connect ?? readSshBanner
+    const sshHost = dependencies.loopbackHost || process.env.FLOCI_EC2_SSH_HOST || 'localhost'
+    const now = dependencies.now ?? (() => new Date())
+    const timeoutMs = dependencies.timeoutMs ?? DEFAULT_TIMEOUT_MS
+
+    return {
+        async check(instanceId: string): Promise<SshCheckResult> {
+            let diagnostics: DiagnosticResponse
+            try {
+                diagnostics = await diagnosticFetcher()
+            } catch (error) {
+                if (error instanceof SshCheckError) throw error
+                throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', 'Floci diagnostics are unavailable', 503)
+            }
+
+            if (!diagnostics || typeof diagnostics !== 'object'
+                || !Array.isArray(diagnostics.ec2?.instances)) {
+                throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', 'Floci diagnostics returned an invalid response', 502)
+            }
+            const instance = diagnostics.ec2.instances.find((candidate) => candidate.instanceId === instanceId)
+            if (!instance) {
+                throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', `SSH diagnostics for instance ${instanceId} are unavailable`, 404)
+            }
+            if (!instance.containerStatus) {
+                throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', `SSH diagnostics for instance ${instanceId} are unavailable`, 404)
+            }
+            if (instance.containerStatus !== 'running') {
+                throw new SshCheckError('INSTANCE_NOT_RUNNING', `Instance ${instanceId} is not running`, 409)
+            }
+            if (typeof instance.sshPort !== 'number' || !Number.isInteger(instance.sshPort)
+                || instance.sshPort < 1 || instance.sshPort > 65_535) {
+                throw new SshCheckError('DIAGNOSTICS_UNAVAILABLE', `SSH diagnostics for instance ${instanceId} are unavailable`, 404)
+            }
+
+            const target = {
+                host: sshHost,
+                port: instance.sshPort,
+            }
+            const banner = await connector(target, timeoutMs)
+            if (!/^SSH-\d+\.\d+-/.test(banner)) {
+                throw new SshCheckError('SSH_BANNER_MISSING', 'SSH server did not send a valid banner', 502)
+            }
+
+            return {
+                ok: true,
+                banner,
+                checkedFrom: 'UI backend',
+                checkedAt: now().toISOString(),
+                target,
+            }
+        },
+    }
+}
+
+export const sshCheckService = createSshCheckService()
@@ -26,6 +26,8 @@ export const apiEndpointKeys = {
       start: "clouds.services.resources.start",
       stop: "clouds.services.resources.stop",
        reboot: "clouds.services.resources.reboot",
+        deployLightsailStaticFiles: "clouds.services.resources.lightsail.static-files.deploy",
+        deployLightsailNodeApplication: "clouds.services.resources.lightsail.node-application.deploy",
       publish: "clouds.services.resources.notifications.publish",
       createSnsSubscription: "clouds.services.resources.notifications.subscription.create",
       listSnsSubscriptions: "clouds.services.resources.notifications.subscriptions.list",
@@ -228,6 +230,7 @@ export const apiEndpointKeys = {
        securityGroups: "aws.ec2.instances.securityGroups",
        createImage: "aws.ec2.instances.create-image",
        console: "aws.ec2.instances.console",
+        checkSsh: "aws.ec2.instances.ssh.check",
      },
      amis: {
        list: "aws.ec2.amis.list",
@@ -643,6 +646,20 @@ export const endpointRegistry: EndpointRegistry = new Map([
      method: "PATCH",
    },
  ],
+  [
+    apiEndpointKeys.clouds.resources.deployLightsailStaticFiles,
+    {
+      path: "/clouds/aws/services/lightsail/resources/:id/static-files",
+      method: "POST",
+    },
+  ],
+  [
+    apiEndpointKeys.clouds.resources.deployLightsailNodeApplication,
+    {
+      path: "/clouds/aws/services/lightsail/resources/:id/node-application",
+      method: "POST",
+    },
+  ],
  [
    apiEndpointKeys.clouds.resources.delete,
    {
@@ -1129,6 +1146,7 @@ export const endpointRegistry: EndpointRegistry = new Map([
  [apiEndpointKeys.aws.ec2.instances.securityGroups, { path: "/ec2/instances/:instanceId/security-groups", method: "PUT" }],
  [apiEndpointKeys.aws.ec2.instances.createImage, { path: "/ec2/instances/:instanceId/image", method: "POST" }],
  [apiEndpointKeys.aws.ec2.instances.console,  { path: "/ec2/instances/:instanceId/console", method: "GET" }],
+  [apiEndpointKeys.aws.ec2.instances.checkSsh, { path: "/ec2/instances/:instanceId/ssh/check", method: "POST" }],
  [apiEndpointKeys.aws.ec2.amis.list,          { path: "/ec2/amis", method: "GET" }],
  [apiEndpointKeys.aws.ec2.amis.deregister,    { path: "/ec2/amis/:imageId/deregister", method: "POST" }],
  [apiEndpointKeys.aws.ec2.keyPairs.list,      { path: "/ec2/key-pairs", method: "GET" }],
@@ -2,9 +2,11 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
  authorizeEc2SecurityGroupEgress,
  authorizeEc2SecurityGroupIngress,
+  checkEc2InstanceSsh,
  createEc2SecurityGroup,
  revokeEc2SecurityGroupEgress,
  revokeEc2SecurityGroupIngress,
+  updateEc2InstanceTags,
  updateEc2InstanceSecurityGroups,
 } from "./ec2.api";

@@ -50,6 +52,37 @@ describe("createEc2SecurityGroup", () => {
  );
 });

+describe("checkEc2InstanceSsh", () => {
+  const fetchMock = vi.fn<typeof fetch>();
+
+  beforeEach(() => {
+    fetchMock.mockResolvedValue(new Response(JSON.stringify({
+      ok: true,
+      banner: "SSH-2.0-OpenSSH_9.6",
+      checkedFrom: "UI backend",
+      checkedAt: "2026-10-09T00:00:00Z",
+      target: { host: "host.docker.internal", port: 2200 },
+    }), {status: 200, headers: {"Content-Type": "application/json"}}));
+    vi.stubGlobal("fetch", fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    fetchMock.mockReset();
+  });
+
+  it("checks SSH through the UI backend", async () => {
+    await expect(checkEc2InstanceSsh("i-test")).resolves.toMatchObject({
+      ok: true,
+      banner: "SSH-2.0-OpenSSH_9.6",
+    });
+
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(String(url)).toContain("/api/ec2/instances/i-test/ssh/check");
+    expect(init?.method).toBe("POST");
+  });
+});
+
 describe("EC2 security-group rule requests", () => {
  const fetchMock = vi.fn<typeof fetch>();

@@ -111,3 +144,32 @@ describe("updateEc2InstanceSecurityGroups", () => {
    expect(JSON.parse(String(init?.body))).toEqual({groupIds: ["sg-default", "sg-web"]});
  });
 });
+
+describe("updateEc2InstanceTags", () => {
+  const fetchMock = vi.fn<typeof fetch>();
+
+  beforeEach(() => {
+    fetchMock.mockResolvedValue(new Response(JSON.stringify({ ok: true }), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    }));
+    vi.stubGlobal("fetch", fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    fetchMock.mockReset();
+  });
+
+  it("sends tags as one JSON object", async () => {
+    await updateEc2InstanceTags("i-test", [{ key: "Name", value: "web-01" }], ["old-tag"]);
+
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(String(url)).toContain("/api/ec2/instances/i-test/tags");
+    expect(init?.method).toBe("PUT");
+    expect(JSON.parse(String(init?.body))).toEqual({
+      toAdd: [{ key: "Name", value: "web-01" }],
+      toRemove: ["old-tag"],
+    });
+  });
+});
@@ -83,6 +83,35 @@ export type Ec2InstanceConnection = {
  sshPort?: number;
  containerId?: string;
  containerStatus: 'running' | 'stopped' | 'unavailable';
+  state?: string;
+  launchStatus?: string;
+  launchEvents?: Ec2LaunchEvent[];
+  selectedImageType?: string;
+  selectedImageReference?: string;
+  sshUser?: string;
+  sshPreinstalled?: boolean;
+  initType?: string;
+  sshServiceName?: string;
+  sshStatus?: string;
+  sshStatusMessage?: string;
+  keyInjectionStatus?: string;
+  publishedPorts?: Record<string, number>;
+  failure?: { code?: string; message?: string } | string;
+};
+
+export type Ec2LaunchEvent = {
+  stage?: string;
+  status?: string;
+  timestamp?: string;
+  message?: string;
+};
+
+export type Ec2SshCheckResult = {
+  ok: true;
+  banner: string;
+  checkedFrom: 'UI backend';
+  checkedAt: string;
+  target: { host: string; port: number };
 };

 export type Ec2KeyPair = {
@@ -323,6 +352,15 @@ export async function terminateEc2Instance(instanceId: string): Promise<void> {
  );
 }

+export async function checkEc2InstanceSsh(instanceId: string): Promise<Ec2SshCheckResult> {
+  const res = await apiClient.call<Ec2SshCheckResult>(
+    apiEndpointKeys.aws.ec2.instances.checkSsh,
+    { body: {} },
+    { instanceId },
+  );
+  return res.data;
+}
+
 export async function updateEc2InstanceTags(
  instanceId: string,
  toAdd: Ec2Tag[],
@@ -330,7 +368,7 @@ export async function updateEc2InstanceTags(
 ): Promise<void> {
  await apiClient.call(
    apiEndpointKeys.aws.ec2.instances.tags,
-    { body: JSON.stringify({ toAdd, toRemove }), headers: { "content-type": "application/json" } },
+    { body: { toAdd, toRemove } },
    { instanceId },
  );
 }
@@ -45,6 +45,7 @@ import { getAccountId } from "@/lib/accountStore";
 type CloudPathParams = Record<string, string>;

 const DATABASE_MUTATION_TIMEOUT_MS = 5 * 60_000;
+const LIGHTSAIL_CREATION_TIMEOUT_MS = 3 * 60_000;
 const SQL_DATA_TIMEOUT_MS = 45_000;
 /** Floci completes Insights queries instantly by default, but bounded server-side polling can take longer. */
 const LOGS_QUERY_TIMEOUT_MS = 20_000;
@@ -167,6 +168,8 @@ export async function createCloudResource(
    const timeout =
      (cloud === "azure" || cloud === "aws") && service === "database"
        ? DATABASE_MUTATION_TIMEOUT_MS
+        : cloud === "aws" && service === "lightsail"
+          ? LIGHTSAIL_CREATION_TIMEOUT_MS
          : undefined;
  const res = await apiClient.call<CloudResource, Record<string, unknown>>(
    apiEndpointKeys.clouds.resources.create,
@@ -1104,6 +1107,36 @@ export async function uploadStorageObject(
  );
 }

+export type LightsailStaticDeployment = {status: 'deployed'; files: number}
+export type LightsailNodeDeployment = {status: 'deployed'; files: number; port: number; releaseId: string}
+
+export async function deployLightsailStaticFiles(instanceId: string, files: File[]): Promise<LightsailStaticDeployment> {
+  const form = new FormData()
+  for (const file of files) {
+    const path = file.webkitRelativePath || file.name
+    form.append('files', file, path)
+  }
+  const res = await apiClient.call<LightsailStaticDeployment>(
+    apiEndpointKeys.clouds.resources.deployLightsailStaticFiles,
+    requestOptions('aws', 'lightsail', {rawBody: form}),
+    {id: instanceId},
+  )
+  return res.data
+}
+
+export async function deployLightsailNodeApplication(instanceId: string, files: File[], startCommand: string, port: number): Promise<LightsailNodeDeployment> {
+  const form = new FormData()
+  for (const file of files) form.append('files', file, file.webkitRelativePath || file.name)
+  if (startCommand.trim()) form.append('startCommand', startCommand.trim())
+  form.append('port', String(port))
+  const res = await apiClient.call<LightsailNodeDeployment>(
+    apiEndpointKeys.clouds.resources.deployLightsailNodeApplication,
+    requestOptions('aws', 'lightsail', {rawBody: form, timeout: 370_000}),
+    {id: instanceId},
+  )
+  return res.data
+}
+
 export function storageObjectDownloadUrl(
  cloud: CloudProvider,
  resourceId: string,
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { CopyValueButton } from './CopyValueButton'
+import { ServerLaunchProgress } from './ServerLaunchProgress'
 import {
    AlertTriangle,
    HardDrive,
@@ -18,6 +19,7 @@ import {
 } from 'lucide-react'
 import {
    authorizeEc2SecurityGroupIngress,
+    checkEc2InstanceSsh,
    createEc2Ami,
    createEc2KeyPair,
    createEc2SecurityGroup,
@@ -53,6 +55,8 @@ import debianImage from '../../../../OS_img/debian.jpg'
 import redHatImage from '../../../../OS_img/RedHat.png'
 import ubuntuImage from '../../../../OS_img/Ubuntu_Linux.png'

+const EC2_LAUNCH_MINIMUM_MS = 5_000
+
 // ─── Props ────────────────────────────────────────────────────────────────────

 interface ComputePanelProps {
@@ -420,6 +424,9 @@ function InstancePanel({ instanceId }: { instanceId: string }) {
            invalidate()
        },
    })
+    const sshCheck = useMutation({
+        mutationFn: () => checkEc2InstanceSsh(instanceId),
+    })

    if (query.isLoading) {
        return (
@@ -656,25 +663,82 @@ function InstancePanel({ instanceId }: { instanceId: string }) {

                    {tab === 'connection' && (() => {
                        const connection = inst.connection
+                        const sshUser = connection?.sshUser || 'root'
                        const command = connection?.sshHost && connection.sshPort && inst.keyName
-                            ? `ssh -i ${inst.keyName}.pem -p ${connection.sshPort} root@${connection.sshHost}`
+                            ? `ssh -i ${inst.keyName}.pem -p ${connection.sshPort} ${sshUser}@${connection.sshHost}`
                            : undefined
-                        if (state === 'stopped') {
-                            return <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>Start this instance before connecting over SSH.</p>
+                        if (!connection) {
+                            return <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>Connection diagnostics are unavailable.</p>
                        }
-                        if (state === 'terminated') {
-                            return <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>Terminated instances cannot accept connections.</p>
-                        }
-                        if (state !== 'running') {
-                            return <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>SSH is unavailable while this instance is {state}.</p>
-                        }
-                        if (!command || connection?.containerStatus !== 'running') {
-                            return <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>SSH is unavailable. Backing container status: {connection?.containerStatus ?? 'unavailable'}.</p>
-                        }
-                        return <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-                            <div className="meta-row"><span className="meta-label">SSH port</span><span className="meta-value">{connection.sshPort}</span></div>
+                        const canCheckSsh = state === 'running' && connection.containerStatus === 'running'
+                            && Boolean(connection.sshPort)
+                        const failure = typeof connection.failure === 'string'
+                            ? connection.failure
+                            : connection.failure?.message
+                        return <div className="ec2-connect-panel">
+                            {!canCheckSsh && <div className="ec2-connection-notice">
+                                {state === 'terminated'
+                                    ? 'This instance is terminated. Launch diagnostics remain available below.'
+                                    : state === 'stopped'
+                                        ? 'Start this instance before connecting over SSH.'
+                                        : `SSH is unavailable while this instance is ${state}.`}
+                            </div>}
+                            <div className="ec2-readiness-grid">
+                                <div className="ec2-readiness-card">
+                                    <span>Launch</span>
+                                    <strong className={connection.launchStatus === 'failed' ? 'error' : ''}>{connection.launchStatus ?? 'unknown'}</strong>
+                                    <small>{connection.selectedImageReference ?? 'No selected image recorded'}</small>
+                                </div>
+                                <div className="ec2-readiness-card">
+                                    <span>SSH readiness</span>
+                                    <strong className={connection.sshStatus === 'impaired' ? 'error' : ''}>{connection.sshStatus ?? 'unknown'}</strong>
+                                    <small>{connection.sshStatusMessage ?? 'No readiness result recorded'}</small>
+                                </div>
+                                <div className="ec2-readiness-card">
+                                    <span>Key injection</span>
+                                    <strong>{connection.keyInjectionStatus ?? (inst.keyName ? 'unknown' : 'not requested')}</strong>
+                                    <small>{inst.keyName ?? 'No key pair selected'}</small>
+                                </div>
+                            </div>
+
+                            {failure && <div className="ec2-connect-error"><AlertTriangle size={14}/><span>{failure}</span></div>}
+
+                            <div className="meta-grid ec2-connect-details">
+                                <div className="meta-row"><span className="meta-label">SSH target</span><span className="meta-value">{connection.sshPort ? `${connection.sshHost}:${connection.sshPort}` : 'Not published'}</span></div>
                                <div className="meta-row"><span className="meta-label">Backing container</span><span className="meta-value">{connection.containerStatus}</span></div>
-                            <div className="meta-row" style={{ gridColumn: '1 / -1' }}><span className="meta-label">Command</span><code style={{ overflowWrap: 'anywhere' }}>{command}</code><CopyValueButton value={command} label="SSH command" /></div>
+                                <div className="meta-row"><span className="meta-label">Image source</span><span className="meta-value">{connection.selectedImageType ?? 'unknown'}</span></div>
+                                <div className="meta-row"><span className="meta-label">Init / SSH service</span><span className="meta-value">{connection.initType ?? 'unknown'} / {connection.sshServiceName ?? 'unknown'}</span></div>
+                                {command && <div className="meta-row ec2-command-row"><span className="meta-label">Command</span><code>{command}</code><CopyValueButton value={command} label="SSH command" /></div>}
+                            </div>
+
+                            {canCheckSsh && <div className="ec2-ssh-check">
+                                <div>
+                                    <strong>Live SSH banner check</strong>
+                                    <p>Runs from the UI backend, using the published diagnostic port.</p>
+                                </div>
+                                <button className="button compact primary" disabled={sshCheck.isPending} onClick={() => sshCheck.mutate()}>
+                                    {sshCheck.isPending ? <Loader2 size={12} className="spin"/> : <Terminal size={12}/>}
+                                    {sshCheck.isPending ? 'Checking' : 'Check SSH'}
+                                </button>
+                            </div>}
+                            {sshCheck.isSuccess && <div className="ec2-check-result success">
+                                <strong>{sshCheck.data.banner}</strong>
+                                <span>Checked from {sshCheck.data.checkedFrom} at {new Date(sshCheck.data.checkedAt).toLocaleString()}</span>
+                                <span>{sshCheck.data.target.host}:{sshCheck.data.target.port}</span>
+                            </div>}
+                            {sshCheck.isError && <div className="ec2-check-result error">
+                                <strong>SSH check failed</strong>
+                                <span>{sshCheck.error instanceof Error ? sshCheck.error.message : 'Unable to verify SSH'}</span>
+                            </div>}
+
+                            {(connection.launchEvents?.length ?? 0) > 0 && <div className="ec2-launch-timeline">
+                                <h4>Launch timeline</h4>
+                                {connection.launchEvents?.map((event, index) => <div className="ec2-launch-event" key={`${event.timestamp ?? 'event'}-${index}`}>
+                                    <span className={`ec2-event-dot ${event.status ?? 'unknown'}`}/>
+                                    <div><strong>{event.stage ?? 'Launch event'}</strong><small>{event.message ?? event.status ?? 'Recorded'}</small></div>
+                                    <time>{event.timestamp ? new Date(event.timestamp).toLocaleTimeString() : ''}</time>
+                                </div>)}
+                            </div>}
                        </div>
                    })()}

@@ -810,7 +874,7 @@ const QUICK_START_AMIS: Array<{ family: Exclude<AmiFamily, 'other'>; label: stri
    { 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 13', image: debianImage, preferredImageId: 'ami-debian13' },
+    { family: 'debian', label: 'Debian 12', image: debianImage, preferredImageId: 'ami-debian12' },
 ]

 const SG_PRESETS: Array<{ label: string; protocol: string; portInput: string; cidr: string }> = [
@@ -830,12 +894,13 @@ function parseRule(rule: InboundRule): IpPermissionInput {
    return { protocol: rule.protocol, fromPort, toPort, cidr: rule.cidr }
 }

-const INSTANCE_TYPES = [
+const X86_INSTANCE_TYPES = [
    't2.micro', 't2.small', 't2.medium',
    't3.micro', 't3.small', 't3.medium', 't3.large', 't3.xlarge',
    'm5.large', 'm5.xlarge',
    'c5.large', 'c5.xlarge',
 ]
+const ARM_INSTANCE_TYPES = ['t4g.micro', 't4g.small', 't4g.medium', 'm6gd.large', 'm6gd.2xlarge', 'm7gd.large', 'm7gd.2xlarge', 'm8gd.medium', 'm8gd.large', 'm8gd.2xlarge']

 export function LaunchInstanceForm({
    cloud,
@@ -906,7 +971,15 @@ export function LaunchInstanceForm({
    }, [selectedSubnet, sgsQ.data])

    const createMut = useMutation({
-        mutationFn: (values: Record<string, unknown>) => createCloudResource(cloud, 'compute', values),
+        mutationFn: async (values: Record<string, unknown>) => {
+            const startedAt = Date.now()
+            const created = await createCloudResource(cloud, 'compute', values)
+            const remaining = EC2_LAUNCH_MINIMUM_MS - (Date.now() - startedAt)
+            if (remaining > 0) {
+                await new Promise<void>((resolve) => setTimeout(resolve, remaining))
+            }
+            return created
+        },
        onSuccess: (created) => {
            void qc.invalidateQueries({ queryKey: ['cloud-resources', cloud, 'compute'] })
            onSuccess(created)
@@ -1030,8 +1103,15 @@ export function LaunchInstanceForm({
        return !quickStartImageIds.has(ami.imageId) && (!normalizedAmiSearch || searchable.includes(normalizedAmiSearch))
    })
    const selectedAmi = amis.find((ami) => ami.imageId === imageId)
+    const compatibleInstanceTypes = selectedAmi?.architecture === 'arm64' ? ARM_INSTANCE_TYPES : X86_INSTANCE_TYPES
    const selectedGroups = (sgsQ.data ?? []).filter((group) => selectedSgs.includes(group.groupId))
    const availableSecurityGroups = (sgsQ.data ?? []).filter((group) => !selectedSubnet || group.vpcId === selectedSubnet.vpcId)
+
+    useEffect(() => {
+        if (!compatibleInstanceTypes.includes(instanceType)) {
+            setInstanceType(compatibleInstanceTypes[0])
+        }
+    }, [compatibleInstanceTypes, instanceType])
    const steps: Array<{ number: LaunchStep; label: string }> = [
        { number: 1, label: 'Name and AMI' },
        { number: 2, label: 'Instance and key pair' },
@@ -1115,8 +1195,9 @@ export function LaunchInstanceForm({
                <label className="launch-field">
                    <span>Instance type <em className="field-required">*</em></span>
                    <select className="input" value={instanceType} onChange={(e) => setInstanceType(e.target.value)}>
-                        {INSTANCE_TYPES.map((type) => <option key={type} value={type}>{type}</option>)}
+                        {compatibleInstanceTypes.map((type) => <option key={type} value={type}>{type}</option>)}
                    </select>
+                    {selectedAmi?.architecture === 'arm64' && <small>ARM64 AMIs require Graviton instance types.</small>}
                </label>
                <div className="launch-field launch-field--span">
                    <span>Key pair</span>
@@ -1314,6 +1395,7 @@ export function LaunchInstanceForm({

            {stepError && <div className="form-error launch-field--span">{stepError}</div>}
            {createMut.error instanceof Error && <div className="form-error launch-field--span">{createMut.error.message}</div>}
+            {createMut.isPending && <div className="launch-field--span"><ServerLaunchProgress name={name} description="Creating the instance and preparing its local runtime."/></div>}
            <div className="launch-form-actions" style={{ gridColumn: '1 / -1' }}>
                <button type="button" className="button" onClick={step === 1 ? onCancel : () => { setStep((current) => (current - 1) as LaunchStep); setStepError('') }}>{step === 1 ? 'Cancel' : 'Back'}</button>
                {step < 4 ? <button type="button" className="button primary" onClick={nextStep}>Next</button> : <button type="button" className="button primary" disabled={createMut.isPending} onClick={launch}><Plus size={14}/>{createMut.isPending ? 'Launching…' : 'Launch instance'}</button>}
@@ -11,8 +11,10 @@ import {
 } from "@/api/aws/ec2.api";
 import type { CloudProvider } from "@/types/cloud";
 import type { CloudResource } from "@/types/resource";
+import { DatabaseLaunchProgress } from "@/components/DatabaseLaunchProgress";

 const IDENTIFIER_PATTERN = /^(?!.*--)[a-z](?:[a-z0-9-]{0,61}[a-z0-9])?$/;
+const DATABASE_CREATION_MINIMUM_MS = 5_000;

 interface CreateRdsInstanceFormProps {
  cloud: CloudProvider;
@@ -70,8 +72,15 @@ export function CreateRdsInstanceForm({
  }

  const createMut = useMutation({
-    mutationFn: (values: Record<string, unknown>) =>
-      createCloudResource(cloud, "database", values),
+    mutationFn: async (values: Record<string, unknown>) => {
+      const startedAt = Date.now();
+      const created = await createCloudResource(cloud, "database", values);
+      const remaining = DATABASE_CREATION_MINIMUM_MS - (Date.now() - startedAt);
+      if (remaining > 0) {
+        await new Promise<void>((resolve) => setTimeout(resolve, remaining));
+      }
+      return created;
+    },
    onSuccess: (created) => {
      void qc.invalidateQueries({
        queryKey: ["cloud-resources", cloud, "database"],
@@ -300,6 +309,7 @@ export function CreateRdsInstanceForm({
      </label>

      {/* ── Actions ────────────────────────────────────────────────── */}
+      {createMut.isPending && <div className="launch-field--span"><DatabaseLaunchProgress name={dbInstanceIdentifier} description="Starting the database container and applying its configuration." /></div>}
      <div className="launch-form-actions">
        <button
          className="button"
@@ -0,0 +1,16 @@
+interface DatabaseLaunchProgressProps {
+  name: string;
+  description: string;
+}
+
+export function DatabaseLaunchProgress({ name, description }: DatabaseLaunchProgressProps) {
+  return <div className="database-launch-progress" role="status" aria-live="polite">
+    <svg viewBox="0 0 48 48" aria-hidden="true">
+      <path d="M7 11C7 15 14.6 17 24 17S41 15 41 11v26c0 4-7.6 6-17 6S7 41 7 37Z" fill="#0D3D8C" />
+      <path d="M7 11C7 15 14.6 17 24 17S41 15 41 11v14c0 4-7.6 6-17 6S7 29 7 25Z" fill="#1769C2"><animate attributeName="d" dur="1.3s" repeatCount="indefinite" values="M7 11C7 15 14.6 17 24 17S41 15 41 11v14c0 4-7.6 6-17 6S7 29 7 25Z;M7 9C7 13 14.6 15 24 15S41 13 41 9v14c0 4-7.6 6-17 6S7 27 7 23Z;M7 11C7 15 14.6 17 24 17S41 15 41 11v14c0 4-7.6 6-17 6S7 29 7 25Z" /></path>
+      <g><path d="M7 11C7 7 14.6 5 24 5S41 7 41 11v7c0 4-7.6 6-17 6S7 22 7 18Z" fill="#1976D2" /><ellipse cx="24" cy="11" rx="17" ry="5.5" fill="#2B91E3" /><ellipse cx="24" cy="9.7" rx="14.5" ry="3.5" fill="#39A0EA" opacity=".35" /><animateTransform attributeName="transform" type="translate" values="0 0;0 -3;0 0" dur="1.3s" repeatCount="indefinite" /></g>
+      <g fill="#35d0b5"><circle className="database-led database-led-a" cx="16" cy="35.5" r="1.6" /><circle className="database-led database-led-b" cx="21.3" cy="36.2" r="1.6" /><circle className="database-led database-led-c" cx="26.7" cy="36.2" r="1.6" /><circle className="database-led database-led-d" cx="32" cy="35.5" r="1.6" /></g>
+    </svg>
+    <div><strong>Creating {name || "database"}</strong><small>{description}</small></div>
+  </div>;
+}
@@ -43,6 +43,7 @@ import { ServerlessInvokePanel } from "@/components/ServerlessInvokePanel";
 import { dataExplorerPath } from "@/lib/dataExplorer";
 import { DatabaseSnapshotsPanel } from "@/components/DatabaseSnapshotsPanel";
 import { CreateRdsInstanceForm } from "@/components/CreateRdsInstanceForm";
+import { DatabaseLaunchProgress } from "@/components/DatabaseLaunchProgress";
 import { AppConfigPanel } from "@/components/AppConfigPanel";
 import { KmsCryptoPanel } from "@/components/KmsCryptoPanel";
 import { ApiGatewayRoutePanel } from "@/components/ApiGatewayRoutePanel";
@@ -73,6 +74,8 @@ import {WorkflowCreatePanel} from "@/components/WorkflowCreatePanel";
 import {KinesisPanel} from "@/components/KinesisPanel";
 import {SesConsolePanel} from '@/components/SesConsolePanel'
 import {ElastiCacheManagementPanel} from '@/components/ElastiCacheManagementPanel'
+import {LightsailLaunchPanel} from '@/components/LightsailLaunchPanel'
+import {LightsailInstancePanel} from '@/components/LightsailInstancePanel'
 import {workflowCreationDestinationPath, type WorkflowCreationDestination} from "@/lib/workflowCreate";
 import {workflowStudioPath} from "@/lib/workflowStudio";
 import {useNavigate, useSearchParams} from "react-router-dom";
@@ -88,6 +91,8 @@ interface DynamicResourceViewProps {
  onOpenInfo: () => void;
 }

+const ELASTICACHE_CREATION_MINIMUM_MS = 5_000;
+
 interface CreateMutationVariables {
  values: Record<string, unknown>;
  destination?: WorkflowCreationDestination;
@@ -220,6 +225,10 @@ export function DynamicResourceView({
      delete lambdaValues.blueprintQueueName;
      delete lambdaValues.blueprintSqsBatchSize;
      const resource = await createCloudResource(cloud, service, lambdaValues);
+      if (cloud === "aws" && service === "elasticache") {
+        await new Promise<void>((resolve) => setTimeout(resolve, ELASTICACHE_CREATION_MINIMUM_MS));
+        return resource;
+      }
      if (blueprintBucketName) {
        let bucketCreated = false;
        try {
@@ -817,6 +826,13 @@ export function DynamicResourceView({
                      }}
                      onCancel={() => setCreateOpen(false)}
                    />
+                  ) : service === "lightsail" && cloud === "aws" ? (
+                    <LightsailLaunchPanel
+                      isSubmitting={createMut.isPending}
+                      submitError={createMut.error instanceof Error ? createMut.error.message : null}
+                      onCancel={() => setCreateOpen(false)}
+                      onSubmit={(values) => createMut.mutate({values})}
+                    />
                  ) : service === "database" && cloud === "aws" ? (
                    <CreateRdsInstanceForm
                      cloud={cloud}
@@ -858,6 +874,7 @@ export function DynamicResourceView({
                  ) : service === "codedeploy" && cloud === "aws" ? (
                    <CodeDeployCreatePanel isSubmitting={createMut.isPending} submitError={createMut.error instanceof Error ? createMut.error.message : null} onCancel={() => setCreateOpen(false)} onSubmit={(values) => createMut.mutate({values})}/>
                  ) : (
+                    <>
                    <DynamicFormRenderer
                      key={`${cloud}:${service}:create`}
                      schema={schema}
@@ -872,6 +889,8 @@ export function DynamicResourceView({
                      onCancel={() => setCreateOpen(false)}
                      onSubmit={(values) => createMut.mutate({values})}
                    />
+                    {service === "elasticache" && cloud === "aws" && createMut.isPending && <DatabaseLaunchProgress name="cache cluster" description="Starting the cache container and preparing its local endpoint." />}
+                    </>
                  )}
                </div>
              )}
@@ -1043,6 +1062,7 @@ export function DynamicResourceView({
      )}
       {service === "kinesis" && cloud === "aws" && <KinesisPanel cloud={cloud} resource={activeSelected} runtimeReachable={canUseRuntime} mode="stream" />}
       {service === "elasticache" && cloud === "aws" && <ElastiCacheManagementPanel runtimeReachable={canUseRuntime} />}
+       {service === "lightsail" && cloud === "aws" && <LightsailInstancePanel resource={activeSelected} runtimeReachable={canUseRuntime} onDeleted={() => setSelected(undefined)} />}
      {editingResource && schema.updateFields && (
        <div
          className="modal-overlay"
@@ -0,0 +1,107 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
+import {render, screen, waitFor} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {beforeEach, expect, test, vi} from 'vitest'
+import {LightsailInstancePanel} from './LightsailInstancePanel'
+import type {CloudResource} from '@/types/resource'
+
+const apiMocks = vi.hoisted(() => ({
+    deleteCloudResource: vi.fn(),
+    rebootCloudResource: vi.fn(),
+    startCloudResource: vi.fn(),
+    stopCloudResource: vi.fn(),
+    updateCloudResource: vi.fn(),
+    deployLightsailStaticFiles: vi.fn(),
+    deployLightsailNodeApplication: vi.fn(),
+}))
+
+vi.mock('@/api/cloudProxyClient', () => apiMocks)
+
+const instance: CloudResource = {
+    id: 'web', name: 'web', cloud: 'aws', service: 'lightsail', type: 'instance', region: 'us-east-1a', createdAt: null, status: 'running',
+    metadata: {
+        blueprintName: 'Ubuntu', bundleId: 'nano_3_0', publicIpAddress: '127.0.0.1', privateIpAddress: '10.0.0.10', username: 'ubuntu',
+        networking: {staticIp: '127.0.0.2', ports: [{fromPort: 80, toPort: 80, protocol: 'tcp'}]},
+        hardware: {disks: [{name: 'web-root', sizeInGb: 20, isSystemDisk: true, state: 'in-use'}]},
+        hostPortMappings: [{instancePort: 80, host: '127.0.0.1', hostPort: 8080}],
+    },
+}
+
+function renderPanel(onDeleted = vi.fn()) {
+    const queryClient = new QueryClient({defaultOptions: {mutations: {retry: false}}})
+    render(<QueryClientProvider client={queryClient}><LightsailInstancePanel resource={instance} runtimeReachable onDeleted={onDeleted}/></QueryClientProvider>)
+    return {onDeleted}
+}
+
+beforeEach(() => Object.values(apiMocks).forEach((mock) => mock.mockReset()))
+
+test('shows Lightsail instance state and invokes lifecycle actions from Actions', async () => {
+    apiMocks.stopCloudResource.mockResolvedValue(undefined)
+    const user = userEvent.setup()
+    renderPanel()
+
+    expect(screen.getByText('running')).toBeVisible()
+    await user.click(screen.getByText(/Actions/))
+    await user.click(screen.getByRole('button', {name: 'Stop'}))
+
+    await waitFor(() => expect(apiMocks.stopCloudResource).toHaveBeenCalledWith('aws', 'lightsail', 'web'))
+})
+
+test('manages firewall rules through generic resource updates and shows browser mappings', async () => {
+    apiMocks.updateCloudResource.mockResolvedValue(instance)
+    const user = userEvent.setup()
+    renderPanel()
+
+    await user.click(screen.getByRole('tab', {name: 'Networking'}))
+    expect(screen.getByText('127.0.0.2')).toBeVisible()
+    expect(screen.getByRole('link', {name: 'Open'})).toHaveAttribute('href', 'http://127.0.0.1:8080')
+    await user.click(screen.getByRole('button', {name: 'Remove'}))
+
+    await waitFor(() => expect(apiMocks.updateCloudResource).toHaveBeenCalledWith('aws', 'lightsail', 'web', {action: 'closePort', fromPort: 80, toPort: 80, protocol: 'tcp'}))
+})
+
+test('shows WordPress site and admin links from the allocated host port', () => {
+    const wordpress = {...instance, metadata: {...instance.metadata, blueprintId: 'wordpress'}}
+    const queryClient = new QueryClient({defaultOptions: {mutations: {retry: false}}})
+    render(<QueryClientProvider client={queryClient}><LightsailInstancePanel resource={wordpress} runtimeReachable onDeleted={vi.fn()}/></QueryClientProvider>)
+    expect(screen.getByRole('link', {name: /Open site/})).toHaveAttribute('href', 'http://127.0.0.1:8080')
+    expect(screen.getByRole('link', {name: /Open WordPress admin/})).toHaveAttribute('href', 'http://127.0.0.1:8080/wp-admin')
+})
+
+test('labels storage and connect limitations without exposing unavailable operations', async () => {
+    const user = userEvent.setup()
+    renderPanel()
+
+    await user.click(screen.getByRole('tab', {name: 'Storage'}))
+    expect(screen.getByText(/metadata-only/i)).toBeVisible()
+    expect(screen.getByText('web-root')).toBeVisible()
+    await user.click(screen.getByRole('tab', {name: 'Connect'}))
+    expect(screen.getByText(/Browser SSH and key injection are unavailable/i)).toBeVisible()
+})
+
+test('confirms deletion through the generic resource delete method', async () => {
+    apiMocks.deleteCloudResource.mockResolvedValue(undefined)
+    const user = userEvent.setup()
+    const {onDeleted} = renderPanel()
+
+    await user.click(screen.getByText(/Actions/))
+    await user.click(screen.getByRole('button', {name: 'Delete'}))
+    await user.click(screen.getByRole('button', {name: 'Delete instance'}))
+
+    await waitFor(() => expect(apiMocks.deleteCloudResource).toHaveBeenCalledWith('aws', 'lightsail', 'web'))
+    expect(onDeleted).toHaveBeenCalled()
+})
+
+test('offers static file deployment only for Nginx instances', async () => {
+    const nginx = {...instance, metadata: {...instance.metadata, blueprintId: 'nginx'}}
+    const queryClient = new QueryClient({defaultOptions: {mutations: {retry: false}}})
+    render(<QueryClientProvider client={queryClient}><LightsailInstancePanel resource={nginx} runtimeReachable onDeleted={vi.fn()}/></QueryClientProvider>)
+    expect(screen.getByRole('tab', {name: 'Deploy'})).toBeVisible()
+})
+
+test('offers a package-aware deployment form for Node.js instances', () => {
+    const node = {...instance, metadata: {...instance.metadata, blueprintId: 'nodejs'}}
+    const queryClient = new QueryClient({defaultOptions: {mutations: {retry: false}}})
+    render(<QueryClientProvider client={queryClient}><LightsailInstancePanel resource={node} runtimeReachable onDeleted={vi.fn()}/></QueryClientProvider>)
+    expect(screen.getByRole('tab', {name: 'Deploy'})).toBeVisible()
+})
@@ -0,0 +1,135 @@
+import {ChevronDown, ExternalLink, HardDrive, Play, RotateCw, Settings, Square, Terminal, Trash2} from 'lucide-react'
+import {useEffect, useRef, useState} from 'react'
+import {useMutation, useQueryClient} from '@tanstack/react-query'
+import {deleteCloudResource, deployLightsailNodeApplication, deployLightsailStaticFiles, rebootCloudResource, startCloudResource, stopCloudResource, updateCloudResource} from '@/api/cloudProxyClient'
+import type {CloudResource} from '@/types/resource'
+
+type Tab = 'overview' | 'deploy' | 'networking' | 'storage' | 'connect'
+type PublicPort = {fromPort: number; toPort: number; protocol: string}
+type HostPortMapping = {instancePort: number; host: string; hostPort: number; protocol?: string}
+type Disk = {name: string; sizeInGb: number; isSystemDisk: boolean; path?: string; state?: string}
+
+export function LightsailInstancePanel({resource, runtimeReachable, onDeleted}: {resource?: CloudResource; runtimeReachable: boolean; onDeleted?: () => void}) {
+    const queryClient = useQueryClient()
+    const [tab, setTab] = useState<Tab>('overview')
+    const [fromPort, setFromPort] = useState('80')
+    const [toPort, setToPort] = useState('80')
+    const [protocol, setProtocol] = useState('tcp')
+    const [nodePort, setNodePort] = useState('3000')
+    const [startCommand, setStartCommand] = useState('')
+    const [confirmDelete, setConfirmDelete] = useState(false)
+    const fileInput = useRef<HTMLInputElement>(null)
+    const ports = publicPorts(resource?.metadata.networking)
+    const hostMappings = hostPortMappings(resource?.metadata.hostPortMappings)
+    const disks = instanceDisks(resource?.metadata.hardware)
+    const status = resource?.status?.toLowerCase()
+    const publicIp = stringMetadata(resource?.metadata.publicIpAddress)
+    const privateIp = stringMetadata(resource?.metadata.privateIpAddress)
+    const staticIp = staticIpAddress(resource?.metadata.networking)
+
+    useEffect(() => {
+        setTab('overview')
+        setFromPort('80')
+        setToPort('80')
+        setProtocol('tcp')
+        setConfirmDelete(false)
+    }, [resource?.id])
+
+    const refresh = () => {
+        if (!resource) return
+        void queryClient.invalidateQueries({queryKey: ['cloud-resources', resource.cloud, resource.service]})
+        void queryClient.invalidateQueries({queryKey: ['cloud-resource', resource.cloud, resource.service, resource.id]})
+    }
+    const lifecycle = useMutation({
+        mutationFn: (action: 'start' | 'stop' | 'reboot') => {
+            if (!resource) throw new Error('Select a Lightsail instance.')
+            if (action === 'start') return startCloudResource(resource.cloud, resource.service, resource.id)
+            if (action === 'stop') return stopCloudResource(resource.cloud, resource.service, resource.id)
+            return rebootCloudResource(resource.cloud, resource.service, resource.id)
+        },
+        onSuccess: refresh,
+    })
+    const portMutation = useMutation({
+        mutationFn: (values: {action: 'openPort' | 'closePort'; fromPort: number; toPort: number; protocol: string}) => {
+            if (!resource) throw new Error('Select a Lightsail instance.')
+            return updateCloudResource(resource.cloud, resource.service, resource.id, values)
+        },
+        onSuccess: refresh,
+    })
+    const deleteMutation = useMutation({
+        mutationFn: () => {
+            if (!resource) throw new Error('Select a Lightsail instance.')
+            return deleteCloudResource(resource.cloud, resource.service, resource.id)
+        },
+        onSuccess: () => {
+            refresh()
+            onDeleted?.()
+        },
+    })
+    const deployment = useMutation({
+        mutationFn: (files: File[]) => {
+            if (!resource) throw new Error('Select a Lightsail instance.')
+            return deployLightsailStaticFiles(resource.id, files)
+        },
+    })
+    const nodeDeployment = useMutation({
+        mutationFn: async (files: File[]) => {
+            if (!resource) throw new Error('Select a Lightsail instance.')
+            const port = Number(nodePort)
+            if (!Number.isInteger(port) || port < 1 || port > 65535) throw new Error('Port must be between 1 and 65535.')
+            const result = await deployLightsailNodeApplication(resource.id, files, startCommand, port)
+            try {
+                await updateCloudResource(resource.cloud, resource.service, resource.id, {action: 'openPort', fromPort: port, toPort: port, protocol: 'tcp'})
+            } catch (error) {
+                throw Object.assign(new Error(`Deployment succeeded, but port ${port} could not be opened: ${error instanceof Error ? error.message : 'unknown error'}`), {cause: error})
+            }
+            return result
+        },
+        onSuccess: refresh,
+    })
+
+    if (!resource) {
+        return <section className="table-panel" style={{marginTop: 16}}><div className="empty compact"><h3>Select a Lightsail instance</h3><p>Manage its lifecycle, networking, storage metadata, and connection details.</p></div></section>
+    }
+
+    const validPortRange = validPort(fromPort) && validPort(toPort) && Number(fromPort) <= Number(toPort)
+    const busy = lifecycle.isPending || portMutation.isPending || deleteMutation.isPending || deployment.isPending || nodeDeployment.isPending
+    const error = lifecycle.error ?? portMutation.error ?? deleteMutation.error ?? deployment.error ?? nodeDeployment.error
+    const nginx = stringMetadata(resource.metadata.blueprintId) === 'nginx'
+    const nodejs = stringMetadata(resource.metadata.blueprintId) === 'nodejs'
+    const wordpress = stringMetadata(resource.metadata.blueprintId) === 'wordpress'
+    const wordpressPort = hostMappings.find((mapping) => mapping.instancePort === 80)
+    const stateLabel = resource.status ?? 'Unknown'
+
+    return <section className="table-panel lightsail-instance-panel" style={{marginTop: 16}}>
+        <header className="lightsail-instance-header">
+            <div><p className="eyebrow">Amazon Lightsail instance</p><h2>{resource.name}</h2><p className="muted"><code>{resource.id}</code>{resource.region && <> · {resource.region}</>}</p></div>
+            <div className="lightsail-instance-controls"><span className={`runtime-state ${status === 'running' ? 'ready' : 'pending'}`}>{stateLabel}</span><details className="dynamodb-actions"><summary>Actions <ChevronDown size={14}/></summary><div className="dynamodb-actions-menu lightsail-actions-menu"><button type="button" onClick={() => setTab('overview')}><Settings size={14}/>Manage</button><button type="button" disabled={!runtimeReachable || busy || status !== 'stopped'} onClick={() => lifecycle.mutate('start')}><Play size={14}/>Start</button><button type="button" disabled={!runtimeReachable || busy || status !== 'running'} onClick={() => lifecycle.mutate('stop')}><Square size={14}/>Stop</button><button type="button" disabled={!runtimeReachable || busy || status !== 'running'} onClick={() => lifecycle.mutate('reboot')}><RotateCw size={14}/>Reboot</button><button className="dynamodb-action-delete" type="button" disabled={!runtimeReachable || busy} onClick={() => setConfirmDelete(true)}><Trash2 size={14}/>Delete</button></div></details></div>
+        </header>
+        <div className="drawer-tabs lightsail-instance-tabs" role="tablist" aria-label="Instance details">
+            <button className={`drawer-tab ${tab === 'overview' ? 'active' : ''}`} type="button" role="tab" aria-selected={tab === 'overview'} onClick={() => setTab('overview')}>Overview</button>
+            {(nginx || nodejs) && <button className={`drawer-tab ${tab === 'deploy' ? 'active' : ''}`} type="button" role="tab" aria-selected={tab === 'deploy'} onClick={() => setTab('deploy')}>Deploy</button>}
+            <button className={`drawer-tab ${tab === 'networking' ? 'active' : ''}`} type="button" role="tab" aria-selected={tab === 'networking'} onClick={() => setTab('networking')}>Networking</button>
+            <button className={`drawer-tab ${tab === 'storage' ? 'active' : ''}`} type="button" role="tab" aria-selected={tab === 'storage'} onClick={() => setTab('storage')}>Storage</button>
+            <button className={`drawer-tab ${tab === 'connect' ? 'active' : ''}`} type="button" role="tab" aria-selected={tab === 'connect'} onClick={() => setTab('connect')}>Connect</button>
+        </div>
+        {tab === 'overview' && <div className="lightsail-overview"><div className="lightsail-detail-grid"><Detail label="Blueprint" value={stringMetadata(resource.metadata.blueprintName) ?? stringMetadata(resource.metadata.blueprintId)}/><Detail label="Plan" value={stringMetadata(resource.metadata.bundleId)}/><Detail label="Public IP" value={publicIp}/><Detail label="Private IP" value={privateIp}/></div>{wordpress && wordpressPort && <p className="compact-text"><a className="button compact" href={browserUrl(wordpressPort)} target="_blank" rel="noreferrer">Open site <ExternalLink size={13}/></a> <a className="button compact" href={`${browserUrl(wordpressPort)}/wp-admin`} target="_blank" rel="noreferrer">Open WordPress admin <ExternalLink size={13}/></a></p>}<p className="muted compact-text">Use the Networking tab to manage public firewall rules and open mapped browser endpoints.</p></div>}
+        {tab === 'deploy' && nginx && <div className="lightsail-tab-content"><h3>Deploy static files</h3><p className="muted compact-text">Selected files are copied to <code>/usr/share/nginx/html</code>. Folder paths are preserved when your browser provides them.</p><input ref={fileInput} type="file" multiple hidden onChange={(event) => { const files = Array.from(event.target.files ?? []); if (files.length) deployment.mutate(files); event.currentTarget.value = '' }}/><button className="button primary" type="button" disabled={!runtimeReachable || busy || status !== 'running'} onClick={() => fileInput.current?.click()}>{deployment.isPending ? 'Deploying' : 'Choose files and deploy'}</button>{deployment.data && <p className="muted compact-text">Deployment complete: {deployment.data.files} {deployment.data.files === 1 ? 'file' : 'files'} copied.</p>}</div>}
+        {tab === 'deploy' && nodejs && <div className="lightsail-tab-content"><h3>Deploy Node.js application</h3><p className="muted compact-text">Upload a zip archive or source files. <code>package.json</code> is required; <code>package-lock.json</code> uses <code>npm ci</code>, otherwise <code>npm install</code>. Existing releases remain active if deployment fails.</p><div className="dynamic-form lightsail-port-form"><label className="dynamic-field"><span>Start command (optional)</span><input className="input" value={startCommand} placeholder="Uses scripts.start" onChange={(event) => setStartCommand(event.target.value)} disabled={busy}/></label><label className="dynamic-field"><span>PORT</span><input className="input" type="number" min="1" max="65535" value={nodePort} onChange={(event) => setNodePort(event.target.value)} disabled={busy}/></label></div><input ref={fileInput} type="file" multiple hidden onChange={(event) => { const files = Array.from(event.target.files ?? []); if (files.length) nodeDeployment.mutate(files); event.currentTarget.value = '' }}/><button className="button primary" type="button" disabled={!runtimeReachable || busy || status !== 'running'} onClick={() => fileInput.current?.click()}>{nodeDeployment.isPending ? 'Installing and checking health' : 'Choose zip or files and deploy'}</button>{nodeDeployment.data && <p className="muted compact-text">Release <code>{nodeDeployment.data.releaseId}</code> is healthy on port {nodeDeployment.data.port}. The browser port was opened automatically.</p>}</div>}
+        {tab === 'networking' && <div className="lightsail-tab-content"><div className="lightsail-detail-grid"><Detail label="Public IPv4" value={publicIp}/><Detail label="Private IPv4" value={privateIp}/><Detail label="Static IP" value={staticIp}/></div><p className="muted compact-text">Static IP is metadata-only. Attach or detach operations are not available from this console.</p><h3>Firewall rules</h3><p className="muted compact-text">Public ports returned by the Lightsail instance networking API.</p><form className="dynamic-form lightsail-port-form" onSubmit={(event) => { event.preventDefault(); if (validPortRange) portMutation.mutate({action: 'openPort', fromPort: Number(fromPort), toPort: Number(toPort), protocol}) }}><label className="dynamic-field"><span>From port</span><input className="input" type="number" min="0" max="65535" value={fromPort} onChange={(event) => setFromPort(event.target.value)} disabled={busy}/></label><label className="dynamic-field"><span>To port</span><input className="input" type="number" min="0" max="65535" value={toPort} onChange={(event) => setToPort(event.target.value)} disabled={busy}/></label><label className="dynamic-field"><span>Protocol</span><select className="input" value={protocol} onChange={(event) => setProtocol(event.target.value)} disabled={busy}><option value="tcp">TCP</option><option value="udp">UDP</option><option value="all">All</option></select></label><button className="button primary" type="submit" disabled={!runtimeReachable || busy || !validPortRange}>{portMutation.isPending ? 'Adding' : 'Add rule'}</button></form>{ports.length > 0 ? <div className="cosmos-items-table"><table><thead><tr><th>Port range</th><th>Protocol</th><th/></tr></thead><tbody>{ports.map((port) => <tr key={`${port.protocol}-${port.fromPort}-${port.toPort}`}><td>{formatPortRange(port)}</td><td>{port.protocol.toUpperCase()}</td><td><button className="button compact danger" type="button" disabled={!runtimeReachable || busy} onClick={() => portMutation.mutate({action: 'closePort', ...port})}>Remove</button></td></tr>)}</tbody></table></div> : <p className="muted compact-text">No public firewall rules are configured.</p>}<h3>Browser links</h3>{hostMappings.length > 0 ? <div className="cosmos-items-table"><table><thead><tr><th>Instance port</th><th>Host mapping</th><th/></tr></thead><tbody>{hostMappings.map((mapping) => <tr key={`${mapping.protocol ?? 'tcp'}-${mapping.instancePort}`}><td>{mapping.instancePort}</td><td><code>{mapping.host}:{mapping.hostPort}</code></td><td><a className="button compact" href={`http://${mapping.host}:${mapping.hostPort}`} target="_blank" rel="noreferrer"><ExternalLink size={13}/>Open</a></td></tr>)}</tbody></table></div> : publicIp ? <a className="button compact" href={`http://${publicIp}`} target="_blank" rel="noreferrer"><ExternalLink size={13}/>Open HTTP endpoint</a> : <p className="muted compact-text">No browser endpoint was returned for this instance.</p>}</div>}
+        {tab === 'storage' && <div className="lightsail-tab-content"><h3><HardDrive size={17}/> Disks</h3><p className="muted compact-text">Disk details are metadata-only. Creating, attaching, detaching, or resizing disks is not available from this console.</p>{disks.length > 0 ? <div className="cosmos-items-table"><table><thead><tr><th>Name</th><th>Size</th><th>Type</th><th>State</th></tr></thead><tbody>{disks.map((disk) => <tr key={disk.name}><td>{disk.name}</td><td>{disk.sizeInGb} GB</td><td>{disk.isSystemDisk ? 'System disk' : 'Attached disk'}</td><td>{disk.state ?? 'Unknown'}</td></tr>)}</tbody></table></div> : <p className="muted compact-text">No disk metadata was returned by the runtime.</p>}</div>}
+        {tab === 'connect' && <div className="lightsail-tab-content"><h3><Terminal size={17}/> Connect to instance</h3><p className="muted compact-text">Browser SSH and key injection are unavailable in the local Lightsail runtime. This console does not generate credentials or claim a connection is available.</p><div className="lightsail-detail-grid"><Detail label="Default username" value={stringMetadata(resource.metadata.username)}/><Detail label="Public IPv4" value={publicIp}/></div></div>}
+        {confirmDelete && <div className="lightsail-delete-confirm"><span>Delete <strong>{resource.name}</strong>? This cannot be undone.</span><button className="button danger compact" type="button" disabled={deleteMutation.isPending} onClick={() => deleteMutation.mutate()}>{deleteMutation.isPending ? 'Deleting' : 'Delete instance'}</button><button className="button compact" type="button" disabled={deleteMutation.isPending} onClick={() => setConfirmDelete(false)}>Cancel</button></div>}
+        {error instanceof Error && <p className="error-text compact-text">{error.message}</p>}
+    </section>
+}
+
+function Detail({label, value}: {label: string; value?: string}) { return <div className="lightsail-detail"><span>{label}</span><code>{value ?? 'Not assigned'}</code></div> }
+function validPort(value: string): boolean { return /^\d+$/.test(value) && Number(value) >= 0 && Number(value) <= 65535 }
+function formatPortRange(port: PublicPort): string { return port.fromPort === port.toPort ? String(port.fromPort) : `${port.fromPort}-${port.toPort}` }
+function browserUrl(mapping: HostPortMapping): string { return `http://${mapping.host}:${mapping.hostPort}` }
+function stringMetadata(value: unknown): string | undefined { return typeof value === 'string' && value ? value : undefined }
+function publicPorts(networking: unknown): PublicPort[] { if (!networking || typeof networking !== 'object' || !Array.isArray((networking as {ports?: unknown}).ports)) return []; return (networking as {ports: unknown[]}).ports.flatMap((port) => { if (!port || typeof port !== 'object') return []; const value = port as {fromPort?: unknown; toPort?: unknown; protocol?: unknown}; return typeof value.fromPort === 'number' && typeof value.toPort === 'number' && typeof value.protocol === 'string' ? [{fromPort: value.fromPort, toPort: value.toPort, protocol: value.protocol}] : [] }) }
+function hostPortMappings(value: unknown): HostPortMapping[] { if (!Array.isArray(value)) return []; return value.flatMap((mapping) => { if (!mapping || typeof mapping !== 'object') return []; const item = mapping as {instancePort?: unknown; host?: unknown; hostPort?: unknown; protocol?: unknown}; return typeof item.instancePort === 'number' && typeof item.host === 'string' && typeof item.hostPort === 'number' ? [{instancePort: item.instancePort, host: item.host, hostPort: item.hostPort, protocol: typeof item.protocol === 'string' ? item.protocol : undefined}] : [] }) }
+function staticIpAddress(networking: unknown): string | undefined { return networking && typeof networking === 'object' ? stringMetadata((networking as {staticIp?: unknown}).staticIp) : undefined }
+function instanceDisks(hardware: unknown): Disk[] { if (!hardware || typeof hardware !== 'object' || !Array.isArray((hardware as {disks?: unknown}).disks)) return []; return (hardware as {disks: unknown[]}).disks.flatMap((disk) => { if (!disk || typeof disk !== 'object') return []; const value = disk as {name?: unknown; sizeInGb?: unknown; isSystemDisk?: unknown; path?: unknown; state?: unknown}; return typeof value.name === 'string' && typeof value.sizeInGb === 'number' && typeof value.isSystemDisk === 'boolean' ? [{name: value.name, sizeInGb: value.sizeInGb, isSystemDisk: value.isSystemDisk, path: stringMetadata(value.path), state: stringMetadata(value.state)}] : [] }) }
@@ -0,0 +1,101 @@
+import {useState} from 'react'
+import {Box, Check, Terminal} from 'lucide-react'
+import amazonLinuxImage from '../../../../OS_img/amazon_Linux.png'
+import nginxImage from '../../../../OS_img/nginx.svg'
+import nodeJsImage from '../../../../OS_img/node-js.svg'
+import ubuntuImage from '../../../../OS_img/Ubuntu_Linux.png'
+import wordpressImage from '../../../../OS_img/wordpress.svg'
+import {ServerLaunchProgress} from './ServerLaunchProgress'
+
+type Blueprint = {
+    id: string
+    name: string
+    description: string
+    kind: 'app' | 'os'
+    icon?: string
+    available: boolean
+    unavailableReason?: string
+}
+
+const blueprints: Blueprint[] = [
+    {id: 'nginx', name: 'Nginx', description: 'Nginx web server', kind: 'app', icon: nginxImage, available: true},
+    {id: 'nodejs', name: 'Node.js', description: 'Node.js current LTS application server', kind: 'app', icon: nodeJsImage, available: true},
+    {id: 'wordpress', name: 'WordPress', description: 'WordPress application stack with managed MariaDB', kind: 'app', icon: wordpressImage, available: true},
+    {id: 'ubuntu_22_04', name: 'Ubuntu 22.04 LTS', description: 'Ubuntu Linux', kind: 'os', icon: ubuntuImage, available: true},
+    {id: 'ubuntu_24_04', name: 'Ubuntu 24.04 LTS', description: 'Ubuntu Linux', kind: 'os', icon: ubuntuImage, available: true},
+    {id: 'amazon_linux_2023', name: 'Amazon Linux 2023', description: 'Amazon Linux', kind: 'os', icon: amazonLinuxImage, available: true},
+]
+
+const plans = [
+    {id: 'nano_3_0', name: 'Nano', detail: '1 vCPU, 512 MB RAM, 20 GB SSD'},
+    {id: 'micro_3_0', name: 'Micro', detail: '2 vCPU, 1 GB RAM, 40 GB SSD'},
+    {id: 'small_3_0', name: 'Small', detail: '2 vCPU, 2 GB RAM, 60 GB SSD'},
+    {id: 'medium_3_0', name: 'Medium', detail: '2 vCPU, 4 GB RAM, 80 GB SSD'},
+]
+
+interface LightsailLaunchPanelProps {
+    isSubmitting: boolean
+    submitError: string | null
+    onCancel: () => void
+    onSubmit: (values: Record<string, unknown>) => void
+}
+
+export function LightsailLaunchPanel({isSubmitting, submitError, onCancel, onSubmit}: LightsailLaunchPanelProps) {
+    const [category, setCategory] = useState<'app' | 'os'>('app')
+    const [blueprintId, setBlueprintId] = useState('nginx')
+    const [bundleId, setBundleId] = useState('nano_3_0')
+    const [name, setName] = useState('')
+    const [availabilityZone, setAvailabilityZone] = useState('us-east-1a')
+    const visibleBlueprints = blueprints.filter((blueprint) => blueprint.kind === category)
+
+    function selectCategory(next: 'app' | 'os') {
+        setCategory(next)
+        setBlueprintId(blueprints.find((blueprint) => blueprint.kind === next && blueprint.available)?.id ?? '')
+    }
+
+    return <section className="lightsail-launch">
+        <div className="lightsail-launch-header">
+            <div>
+                <p className="eyebrow">Amazon Lightsail</p>
+                <h2>Create an instance</h2>
+                <p className="muted">Choose a blueprint, a plan, and a name. The instance launches locally through Floci.</p>
+            </div>
+            <button className="icon-btn" type="button" onClick={onCancel} aria-label="Close create instance">×</button>
+        </div>
+
+        <div className="lightsail-section">
+            <h3>Select a platform</h3>
+            <div className="lightsail-platforms">
+                <button className="lightsail-platform selected" type="button"><Terminal size={26}/><span><strong>Linux/Unix</strong><small>Supported blueprints</small></span><Check size={18}/></button>
+                <button className="lightsail-platform" type="button" disabled><Box size={26}/><span><strong>Microsoft Windows</strong><small>Not supported locally</small></span></button>
+            </div>
+        </div>
+
+        <div className="lightsail-section">
+            <h3>Select a blueprint</h3>
+            <div className="lightsail-tabs">
+                <button className={category === 'app' ? 'active' : ''} type="button" onClick={() => selectCategory('app')}>Apps + OS</button>
+                <button className={category === 'os' ? 'active' : ''} type="button" onClick={() => selectCategory('os')}>OS Only</button>
+            </div>
+            <div className="lightsail-blueprints">
+                {visibleBlueprints.map((blueprint) => <button key={blueprint.id} type="button" disabled={!blueprint.available} title={blueprint.unavailableReason} className={`lightsail-blueprint ${blueprintId === blueprint.id ? 'selected' : ''}`} onClick={() => setBlueprintId(blueprint.id)}>
+                    {blueprint.icon ? <img src={blueprint.icon} alt=""/> : <span className="lightsail-wordpress">W</span>}
+                    <span><strong>{blueprint.name}</strong><small>{blueprint.available ? blueprint.description : blueprint.unavailableReason}</small></span>
+                </button>)}
+            </div>
+        </div>
+
+        <div className="lightsail-section">
+            <h3>Choose your instance plan</h3>
+            <div className="lightsail-plans">{plans.map((plan) => <button key={plan.id} type="button" className={bundleId === plan.id ? 'selected' : ''} onClick={() => setBundleId(plan.id)}><strong>{plan.name}</strong><small>{plan.detail}</small></button>)}</div>
+        </div>
+
+        <div className="lightsail-config">
+            <label>Instance name<input className="input" value={name} onChange={(event) => setName(event.target.value)} placeholder="e.g. web-server" autoFocus/></label>
+            <label>Availability Zone<input className="input" value={availabilityZone} onChange={(event) => setAvailabilityZone(event.target.value)} /></label>
+        </div>
+        {isSubmitting && <ServerLaunchProgress name={name} description="Pulling the server image and preparing the local runtime."/>}
+        {submitError && <p className="error-text">{submitError}</p>}
+        <div className="form-actions"><button className="button" type="button" onClick={onCancel}>Cancel</button><button className="button primary" type="button" disabled={isSubmitting || !name.trim()} onClick={() => onSubmit({name, blueprintId, bundleId, availabilityZone})}>{isSubmitting ? 'Creating...' : 'Create instance'}</button></div>
+    </section>
+}
@@ -3,6 +3,7 @@ import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import {useEffect, useState} from 'react'
 import {deleteFlatItem, listCloudResources, listFlatItems, putFlatItem} from '@/api/cloudProxyClient'
 import {CopyValueButton} from '@/components/CopyValueButton'
+import {LoadBalancingProgress} from '@/components/LoadBalancingProgress'
 import {useAccountId} from '@/lib/accountStore'
 import type {CloudResource} from '@/types/resource'

@@ -33,7 +34,13 @@ export function LoadBalancerListenerPanel({resource, runtimeReachable}: Props) {
    }, [resource?.id])

    const createMutation = useMutation({
-        mutationFn: () => putFlatItem('aws', 'loadbalancing', resource?.id ?? '', {port: Number(port), targetGroupArn}),
+        mutationFn: async () => {
+            const startedAt = Date.now()
+            const created = await putFlatItem('aws', 'loadbalancing', resource?.id ?? '', {port: Number(port), targetGroupArn})
+            const remaining = 5_000 - (Date.now() - startedAt)
+            if (remaining > 0) await new Promise<void>((resolve) => setTimeout(resolve, remaining))
+            return created
+        },
        onSuccess: () => queryClient.invalidateQueries({queryKey: ['load-balancer-listeners', accountId, resource?.id]}),
    })
    const deleteMutation = useMutation({
@@ -62,6 +69,7 @@ export function LoadBalancerListenerPanel({resource, runtimeReachable}: Props) {
            <label className="dynamic-field dynamic-field--span"><span>Default target group</span><select className="input" value={targetGroupArn} onChange={(event) => setTargetGroupArn(event.target.value)} disabled={targetGroupsQuery.isLoading || pending}><option value="">Select a target group</option>{targetGroups.map((group) => <option key={group.id} value={group.id}>{group.name} ({group.id})</option>)}</select></label>
            <div style={{alignSelf: 'end'}}><button className="button primary" type="submit" disabled={!runtimeReachable || !targetGroupArn || !validPort || pending}>{createMutation.isPending ? 'Creating' : 'Create listener'}</button></div>
            {targetGroups.length === 0 && targetGroupsQuery.isSuccess && <p className="muted">No target groups are available in this account.</p>}
+            {createMutation.isPending && <div className="dynamic-field--span"><LoadBalancingProgress kind="listener" description="Configuring the listener and its target-group route."/></div>}
        </form>
        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
        {listenersQuery.isLoading && <div className="muted padded">Loading listeners</div>}
@@ -0,0 +1,19 @@
+interface LoadBalancingProgressProps {
+    kind: 'listener' | 'target'
+    description: string
+}
+
+export function LoadBalancingProgress({kind, description}: LoadBalancingProgressProps) {
+    return <div className="load-balancing-progress" role="status" aria-live="polite">
+        {kind === 'listener' ? <ListenerIcon/> : <TargetIcon/>}
+        <div><strong>{kind === 'listener' ? 'Creating listener' : 'Registering target'}</strong><small>{description}</small></div>
+    </div>
+}
+
+function ListenerIcon() {
+    return <svg viewBox="0 0 140 140" aria-hidden="true"><rect className="lb-device" x="20" y="28" width="96" height="29" rx="4"/><circle className="lb-yellow lb-blink-1" cx="35" cy="42.5" r="5.3"/><g className="lb-yellow"><circle className="lb-blink-1" cx="72" cy="37" r="2"/><circle className="lb-blink-2" cx="81" cy="37" r="2"/><circle className="lb-blink-3" cx="97" cy="37" r="2"/><circle className="lb-blink-2" cx="106" cy="37" r="2"/><circle className="lb-blink-3" cx="64" cy="47" r="2"/><circle className="lb-blink-1" cx="75" cy="47" r="2"/><circle className="lb-blink-2" cx="85" cy="47" r="2"/><circle className="lb-blink-3" cx="97" cy="47" r="2"/><circle className="lb-blink-1" cx="106" cy="47" r="2"/></g><path className="lb-wire" d="M58 64 L49 83 L42 97M79 64 L88 83 L94 97"/><circle className="lb-yellow" r="3.2"><animateMotion dur="1.55s" repeatCount="indefinite" path="M58 64 L49 83 L42 97"/></circle><circle className="lb-yellow" r="3.2"><animateMotion begin=".72s" dur="1.55s" repeatCount="indefinite" path="M79 64 L88 83 L94 97"/></circle><rect className="lb-device" x="24" y="88" width="36" height="19" rx="5"/><rect className="lb-device" x="77" y="88" width="36" height="19" rx="5"/></svg>
+}
+
+function TargetIcon() {
+    return <svg viewBox="0 0 362 356" aria-hidden="true"><rect className="lb-panel" x="49" y="68" width="270" height="68" rx="15"/><rect className="lb-panel" x="49" y="135" width="270" height="68" rx="15"/><g className="lb-ports"><rect className="lb-port" x="81" y="92" width="47" height="25" rx="13"/><rect className="lb-port" x="81" y="158" width="47" height="25" rx="13"/></g><g className="lb-green">{[178, 197, 216, 236, 256, 276, 295].map((cx, index) => <circle key={`top-${cx}`} className={`lb-blink-${index % 3 + 1}`} cx={cx} cy="95" r="6.5"/>)}{[178, 197, 216, 236, 256, 276].map((cx, index) => <circle key={`bottom-${cx}`} className={`lb-blink-${(index + 1) % 3 + 1}`} cx={cx} cy="162" r="6.5"/>)}</g><path className="lb-wire" d="M184 202v51M55 267H307"/><circle className="lb-green" r="7"><animateMotion dur="3.8s" repeatCount="indefinite" path="M66 267 H184 V181"/></circle><circle className="lb-green" r="7"><animateMotion begin="1.25s" dur="3.8s" repeatCount="indefinite" path="M302 267 H184 V162"/></circle><circle className="lb-green lb-hub" cx="184" cy="267" r="8"/></svg>
+}
@@ -55,6 +55,7 @@ import {deleteFlatItem, listFlatItems, putFlatItem} from '@/api/cloudProxyClient
 import type {CloudProvider} from '@/types/cloud'
 import type {ChildItem, CloudResource} from '@/types/resource'
 import {calculateSubnetCidrs, isValidCidr, isValidPort} from '@/lib/network'
+import {clientId} from '@/lib/clientId'

 // ─── Props ────────────────────────────────────────────────────────────────────

@@ -193,7 +194,7 @@ function ConfirmDeleteModal({title, detail, onConfirm, onClose, isPending}: {

 function EditRuleTable({rules, onChange}: {rules: EditRule[]; onChange: (rules: EditRule[]) => void}) {
    function addRule() {
-        onChange([...rules, {rid: crypto.randomUUID(), protocol: 'tcp', fromPort: '', toPort: '', cidr: '0.0.0.0/0'}])
+        onChange([...rules, {rid: clientId(), protocol: 'tcp', fromPort: '', toPort: '', cidr: '0.0.0.0/0'}])
    }
    function removeRule(rid: string) {
        onChange(rules.filter((r) => r.rid !== rid))
@@ -0,0 +1,19 @@
+interface ServerLaunchProgressProps {
+    name: string
+    description: string
+}
+
+export function ServerLaunchProgress({name, description}: ServerLaunchProgressProps) {
+    return <div className="server-launch-progress" role="status" aria-live="polite">
+        <svg viewBox="0 0 256 256" aria-hidden="true">
+            <path fill="#45515D" d="M18 145 48 65c1.4-3.7 5-6 9-6h143c4 0 7.6 2.4 9 6l29 80H18Z"/>
+            <path fill="#68737F" d="M40 145 69 65c1.4-3.7 5-6 9-6h122c4 0 7.6 2.4 9 6l29 80H40Z"/>
+            <rect x="18" y="143" width="220" height="54" rx="13" fill="#3B334A"/>
+            <path fill="#2C2638" d="M18 156c0-7.2 5.8-13 13-13h20c-7.2 0-13 5.8-13 13v28c0 7.2 5.8 13 13 13H31c-7.2 0-13-5.8-13-13v-28Z"/>
+            <rect x="39.5" y="159.5" width="21" height="21" rx="10.5" fill="none" stroke="#FFC735" strokeWidth="4.5"><animate attributeName="width" values="21;35;57;35;21;35;57;35;21" dur="1.64s" repeatCount="indefinite"/></rect>
+            <g fill="#2FB6A2"><circle cx="112" cy="161" r="4"/><circle cx="130" cy="161" r="4"/><circle cx="148" cy="161" r="4"/><circle cx="166" cy="161" r="4"/><circle cx="184" cy="161" r="4"/><circle cx="202" cy="161" r="4"/><circle cx="220" cy="161" r="4"/><circle cx="112" cy="179" r="4"/><circle cx="130" cy="179" r="4"/><circle cx="148" cy="179" r="4"/><circle cx="166" cy="179" r="4"/><circle cx="184" cy="179" r="4"/><circle cx="202" cy="179" r="4"/><circle cx="220" cy="179" r="4"/></g>
+            <rect x="108" y="156" width="116" height="28" fill="#3B334A" opacity="0"><animate attributeName="width" values="0;72;92;72;0;72;92;72;0" dur="1.64s" repeatCount="indefinite"/><animate attributeName="x" values="224;152;132;152;224;152;132;152;224" dur="1.64s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;1;1;1;0;1;1;1;0" dur="1.64s" repeatCount="indefinite"/></rect>
+        </svg>
+        <div><strong>Launching {name || 'instance'}</strong><small>{description}</small></div>
+    </div>
+}
@@ -3,6 +3,7 @@ import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import {useEffect, useState} from 'react'
 import {getLoadBalancingDependencies, listFlatItems, putFlatItem, deleteFlatItem} from '@/api/cloudProxyClient'
 import {useAccountId} from '@/lib/accountStore'
+import {LoadBalancingProgress} from '@/components/LoadBalancingProgress'
 import type {CloudResource} from '@/types/resource'

 type Props = {
@@ -37,7 +38,21 @@ export function TargetGroupPanel({resource, runtimeReachable}: Props) {
        void Promise.all([dependenciesQuery.refetch(), healthQuery.refetch()])
    }
    const registerMutation = useMutation({
-        mutationFn: () => putFlatItem('aws', 'targetgroups', resource?.id ?? '', {id: instanceId, port: Number(port)}),
+        mutationFn: async () => {
+            const startedAt = Date.now()
+            await putFlatItem('aws', 'targetgroups', resource?.id ?? '', {id: instanceId, port: Number(port)})
+            while (true) {
+                const health = await listFlatItems('aws', 'targetgroups', resource?.id ?? '')
+                const target = health.items.find((item) => stringValue(item.body.id) === instanceId && Number(item.body.port) === Number(port))
+                const state = stringValue(target?.body.state).toLowerCase()
+                if (state === 'healthy' || state === 'unhealthy') {
+                    const remaining = 5_000 - (Date.now() - startedAt)
+                    if (remaining > 0) await new Promise<void>((resolve) => setTimeout(resolve, remaining))
+                    return
+                }
+                await new Promise<void>((resolve) => setTimeout(resolve, 500))
+            }
+        },
        onSuccess: () => queryClient.invalidateQueries({queryKey: ['target-group-health', accountId, resource?.id]}),
    })
    const deregisterMutation = useMutation({
@@ -63,6 +78,7 @@ export function TargetGroupPanel({resource, runtimeReachable}: Props) {
            <label className="dynamic-field"><span>Target port</span><input className="input" type="number" min="1" max="65535" value={port} onChange={(event) => setPort(event.target.value)} disabled={registerMutation.isPending}/></label>
            <div style={{alignSelf: 'end'}}><button className="button primary" type="submit" disabled={!runtimeReachable || !instanceId || !validPort || registerMutation.isPending}>{registerMutation.isPending ? 'Registering' : 'Register target'}</button></div>
            {instances.length === 0 && dependenciesQuery.isSuccess && <p className="muted">No running instances are available in this account.</p>}
+            {registerMutation.isPending && <div className="dynamic-field--span"><LoadBalancingProgress kind="target" description="Waiting for the target health check to become healthy or unhealthy."/></div>}
        </form>
        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
        {healthQuery.isLoading && <div className="muted padded">Loading target health</div>}
@@ -41,6 +41,7 @@ import eventBridgeIcon from '@/assets/aws-services/eventbridge.svg'
 import iamIcon from '@/assets/aws-services/iam.svg'
 import kmsIcon from '@/assets/aws-services/kms.svg'
 import lambdaIcon from '@/assets/aws-services/lambda.svg'
+import lightsailIcon from '../../../../aws-icons-svg/Compute/Lightsail.svg'
 import parameterStoreIcon from '@/assets/aws-services/parameter-store.svg'
 import rdsIcon from '@/assets/aws-services/rds.svg'
 import s3Icon from '@/assets/aws-services/s3.svg'
@@ -68,6 +69,7 @@ const SERVICE_ICONS: Record<string, LucideIcon> = {
    database: Table2,
    nosql: Database,
    k8s: Boxes,
+    lightsail: Server,
    compute: Server,
    containers: Container,
    networking: Network,
@@ -112,6 +114,7 @@ const AWS_SERVICE_ICON_ASSETS: Record<string, string> = {
    kms: kmsIcon,
    k8s: eksIcon,
    loadbalancing: elasticLoadBalancingIcon,
+    lightsail: lightsailIcon,
    logs: cloudWatchLogsIcon,
    messaging: sqsIcon,
    kinesis: kinesisIcon,
@@ -1,9 +1,10 @@
 import { isValidCidr, isValidPort } from "@/lib/network";
+import { clientId } from "@/lib/clientId";
 import type { SgRule } from "./SgRuleTable";

 export function newRule(): SgRule {
  return {
-    id: crypto.randomUUID(),
+    id: clientId(),
    type: "custom-tcp",
    protocol: "tcp",
    fromPort: "",
@@ -30,6 +30,7 @@ import {
  usePutSecretValueMutation,
 } from '@/api/aws/secretsmanager.mutations'
 import { timeAgo } from '@/lib/utils'
+import { clientId } from '@/lib/clientId'

 type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }
 type JsonValueKind = 'string' | 'number' | 'boolean' | 'null' | 'json'
@@ -338,7 +339,7 @@ function SecretDrawer({
  function addKeyValueEntry() {
    setKeyValueEntries((entries) => [
      ...entries,
-      { id: crypto.randomUUID(), key: '', value: '', kind: 'string' },
+      { id: clientId(), key: '', value: '', kind: 'string' },
    ])
    setEditorError('')
  }
@@ -4875,6 +4875,181 @@ button.console-service-card {
    word-break: break-all;
 }

+.ec2-connect-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.ec2-readiness-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+}
+
+.ec2-readiness-card {
+    min-width: 0;
+    padding: 12px;
+    border: 1px solid var(--border);
+    border-radius: 7px;
+    background: color-mix(in srgb, var(--surface) 82%, var(--bg));
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.ec2-readiness-card > span,
+.ec2-readiness-card small {
+    color: var(--text-3);
+    font-size: 10px;
+}
+
+.ec2-readiness-card strong {
+    color: var(--status-success);
+    font: 600 13px "Space Mono", monospace;
+}
+
+.ec2-readiness-card strong.error,
+.ec2-check-result.error strong {
+    color: var(--status-error);
+}
+
+.ec2-connect-error,
+.ec2-check-result {
+    display: flex;
+    gap: 8px;
+    padding: 10px 12px;
+    border-radius: 6px;
+    font-size: 11px;
+}
+
+.ec2-connect-error {
+    color: var(--status-error);
+    border: 1px solid color-mix(in srgb, var(--status-error) 35%, transparent);
+    background: color-mix(in srgb, var(--status-error) 8%, transparent);
+}
+
+.ec2-connection-notice {
+    padding: 9px 11px;
+    border-left: 2px solid var(--text-3);
+    background: color-mix(in srgb, var(--surface) 82%, var(--bg));
+    color: var(--text-2);
+    font-size: 11px;
+}
+
+.ec2-connect-details {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.ec2-command-row {
+    grid-column: 1 / -1;
+}
+
+.ec2-command-row code {
+    overflow-wrap: anywhere;
+}
+
+.ec2-ssh-check {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+}
+
+.ec2-ssh-check strong,
+.ec2-launch-timeline h4 {
+    margin: 0;
+    font-size: 12px;
+}
+
+.ec2-ssh-check p {
+    margin: 3px 0 0;
+    color: var(--text-3);
+    font-size: 10px;
+}
+
+.ec2-check-result {
+    flex-direction: column;
+    border: 1px solid var(--border);
+    background: var(--surface);
+}
+
+.ec2-check-result.success strong {
+    color: var(--status-success);
+    font-family: "Space Mono", monospace;
+}
+
+.ec2-check-result span {
+    color: var(--text-3);
+}
+
+.ec2-launch-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+}
+
+.ec2-launch-event {
+    display: grid;
+    grid-template-columns: 10px minmax(0, 1fr) auto;
+    gap: 8px;
+    align-items: start;
+    padding: 7px 0;
+}
+
+.ec2-launch-event div {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.ec2-launch-event strong {
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.ec2-launch-event small,
+.ec2-launch-event time {
+    color: var(--text-3);
+    font-size: 10px;
+}
+
+.ec2-event-dot {
+    width: 7px;
+    height: 7px;
+    margin-top: 3px;
+    border-radius: 50%;
+    background: var(--text-3);
+}
+
+.ec2-event-dot.ok,
+.ec2-event-dot.ready,
+.ec2-event-dot.completed,
+.ec2-event-dot.success {
+    background: var(--status-success);
+}
+
+.ec2-event-dot.failed,
+.ec2-event-dot.error {
+    background: var(--status-error);
+}
+
+@media (max-width: 720px) {
+    .ec2-readiness-grid,
+    .ec2-connect-details {
+        grid-template-columns: 1fr;
+    }
+
+    .ec2-ssh-check {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+}
+
 /* ─── Copy object modal ──────────────────────────────────────────────────── */
 .copy-modal-overlay {
    position: fixed;
@@ -5709,3 +5884,64 @@ button.console-service-card {
 .redis-value { flex: 1; min-height: 110px; max-height: 310px; overflow: auto; margin: 0; padding: 12px; color: var(--text); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
 .redis-set-form { border-top: 1px solid var(--border); background: var(--raised); }
 .redis-set-form strong { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; }
+
+.lightsail-launch { max-width: 980px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
+.lightsail-launch-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
+.lightsail-launch h2, .lightsail-launch h3 { margin: 0; }
+.lightsail-launch h2 { font-size: 25px; }
+.lightsail-launch h3 { font-size: 17px; margin-bottom: 13px; }
+.lightsail-section { margin-top: 30px; }
+.lightsail-platforms, .lightsail-blueprints, .lightsail-plans { display: flex; flex-wrap: wrap; gap: 12px; }
+.lightsail-platform, .lightsail-blueprint, .lightsail-plans button { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); text-align: left; }
+.lightsail-platform { display: flex; align-items: center; gap: 11px; min-width: 250px; padding: 16px; }
+.lightsail-platform.selected, .lightsail-blueprint.selected, .lightsail-plans button.selected { border: 2px solid #ec7211; box-shadow: 0 0 0 1px color-mix(in srgb, #ec7211 18%, transparent); }
+.lightsail-platform svg:last-child { margin-left: auto; color: #ec7211; }
+.lightsail-platform span, .lightsail-blueprint span, .lightsail-plans button { display: flex; flex-direction: column; gap: 3px; }
+.lightsail-launch small { color: var(--text-muted); }
+.lightsail-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
+.lightsail-tabs button { border: 1px solid #ec7211; border-radius: 6px; padding: 8px 14px; background: transparent; color: #b7550a; }
+.lightsail-tabs button.active { background: #ec7211; color: white; }
+.lightsail-blueprint { width: 210px; min-height: 84px; padding: 13px; display: flex; align-items: center; gap: 13px; }
+.lightsail-blueprint img { width: 42px; height: 42px; object-fit: contain; }
+.lightsail-wordpress { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #21759b; border-radius: 50%; color: #21759b; font-family: Georgia, serif; font-size: 29px; }
+.lightsail-plans button { width: 205px; padding: 13px; }
+.lightsail-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
+.lightsail-config label { display: grid; gap: 6px; font-weight: 600; }
+.server-launch-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #ec7211 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #ec7211 8%, var(--surface)); }
+.server-launch-progress svg { width: 70px; height: 56px; flex: 0 0 auto; }
+.server-launch-progress div { display: flex; flex-direction: column; gap: 3px; }
+.server-launch-progress small { color: var(--text-muted); }
+.database-launch-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #1769c2 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #1769c2 8%, var(--surface)); }
+.database-launch-progress svg { width: 56px; height: 56px; flex: 0 0 auto; }
+.database-launch-progress div { display: flex; flex-direction: column; gap: 3px; }
+.database-launch-progress small { color: var(--text-muted); }
+.database-led { animation: database-led-blink 1.4s ease-in-out infinite; }
+.database-led-b { animation-delay: .22s; }
+.database-led-c { animation-delay: .44s; }
+.database-led-d { animation-delay: .66s; }
+@keyframes database-led-blink { 0%, 25%, 100% { opacity: .28; } 45%, 72% { opacity: 1; } }
+.load-balancing-progress { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #ffc52e 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #ffc52e 8%, var(--surface)); }
+.load-balancing-progress svg { width: 72px; height: 64px; flex: 0 0 auto; }
+.load-balancing-progress div { display: flex; flex-direction: column; gap: 3px; }
+.load-balancing-progress small { color: var(--text-muted); }
+.lb-device { fill: #30283d; }.lb-panel { fill: #2b2440; stroke: #17132f; stroke-width: 5; }.lb-wire { fill: none; stroke: #17132f; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }.lb-yellow { fill: #ffc12d; }.lb-green { fill: #31aa98; }.lb-port { fill: none; stroke: #ffc52e; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }.lb-ports { animation: lb-port-morph 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }.lb-hub { animation: lb-hub-pulse 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }.lb-blink-1 { animation: lb-blink-one 4.5s steps(1, end) infinite; }.lb-blink-2 { animation: lb-blink-two 4.5s steps(1, end) infinite; }.lb-blink-3 { animation: lb-blink-three 4.5s steps(1, end) infinite; }
+@keyframes lb-blink-one { 0%, 18%, 42%, 68%, 100% { opacity: 1; } 19%, 41%, 69%, 84% { opacity: .22; } } @keyframes lb-blink-two { 0%, 28%, 58%, 88%, 100% { opacity: .28; } 29%, 57%, 89%, 99% { opacity: 1; } } @keyframes lb-blink-three { 0%, 12%, 48%, 76%, 100% { opacity: 1; } 13%, 47%, 77%, 92% { opacity: .2; } } @keyframes lb-port-morph { 0%, 18%, 82%, 100% { transform: scaleX(.62); } 42%, 62% { transform: scaleX(1.18); } } @keyframes lb-hub-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
+@media (max-width: 640px) { .lightsail-launch { padding: 18px; } .lightsail-config { grid-template-columns: 1fr; } .lightsail-platform, .lightsail-blueprint, .lightsail-plans button { width: 100%; } }
+
+.lightsail-instance-panel { overflow: visible; }
+.lightsail-instance-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 18px 8px; }
+.lightsail-instance-header h2 { margin: 3px 0; font-size: 22px; }
+.lightsail-instance-controls { display: flex; align-items: center; gap: 10px; }
+.lightsail-instance-controls summary { display: flex; align-items: center; gap: 4px; }
+.lightsail-actions-menu { min-width: 154px; right: 0; left: auto; }
+.lightsail-instance-tabs { margin: 0 18px; overflow-x: auto; }
+.lightsail-overview, .lightsail-tab-content { padding: 18px; }
+.lightsail-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
+.lightsail-detail { display: grid; gap: 5px; padding: 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised, var(--surface)); min-width: 0; }
+.lightsail-detail span { color: var(--text-muted); font-size: 12px; }
+.lightsail-detail code { overflow-wrap: anywhere; }
+.lightsail-tab-content h3 { display: flex; align-items: center; gap: 7px; margin: 20px 0 5px; font-size: 16px; }
+.lightsail-tab-content h3:first-child { margin-top: 0; }
+.lightsail-port-form { align-items: end; margin: 16px 0; }
+.lightsail-delete-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 18px 18px; padding: 10px; border: 1px solid color-mix(in srgb, var(--status-error, #dc2626) 45%, var(--border)); border-radius: 7px; }
+@media (max-width: 640px) { .lightsail-instance-header { padding: 14px; flex-direction: column; } .lightsail-instance-controls { width: 100%; justify-content: space-between; } .lightsail-instance-tabs { margin: 0 14px; } .lightsail-overview, .lightsail-tab-content { padding: 14px; } .lightsail-detail-grid { grid-template-columns: 1fr; } .lightsail-delete-confirm { margin: 0 14px 14px; } }
@@ -0,0 +1,7 @@
+export function clientId(): string {
+  if (typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
+}
@@ -76,6 +76,9 @@ importers:
      '@aws-sdk/client-lambda':
        specifier: ^3.1076.0
        version: 3.1076.0
+      '@aws-sdk/client-lightsail':
+        specifier: ^3.1076.0
+        version: 3.1148.0
      '@aws-sdk/client-rds':
        specifier: ^3.1076.0
        version: 3.1076.0
@@ -368,6 +371,10 @@ packages:
    resolution: {integrity: sha512-uueu0Do1dy3cm42AdjL3zivHoc5b55vOL3g6BjxUv2xMifSLKZi5Ilh5FhXVDdS/Uwxak/JH+vVQDDnEuQ52gA==}
    engines: {node: '>=20.0.0'}

+  '@aws-sdk/client-lightsail@3.1148.0':
+    resolution: {integrity: sha512-sGXHmokMg79uwzFb9aAjC3gSE5LllEJii6aARHbnbDESFGIT73ZbUGBuNDWmF9N4DkkBAPlDeoATOHe4p7Qp5Q==}
+    engines: {node: '>=20.0.0'}
+
  '@aws-sdk/client-rds-data@3.1144.0':
    resolution: {integrity: sha512-6WIjf0rUcT2G//bjsHET1BbQ4sBJ/oR5CEon7ehOI86tr1zQj8XggGqJBuRHvZ+jePabWkTmQcrkpra58Jn2gQ==}
    engines: {node: '>=20.0.0'}
@@ -3047,6 +3054,17 @@ snapshots:
      '@smithy/types': 4.15.1
      tslib: 2.8.1

+  '@aws-sdk/client-lightsail@3.1148.0':
+    dependencies:
+      '@aws-sdk/core': 3.978.1
+      '@aws-sdk/credential-provider-node': 3.972.84
+      '@aws-sdk/types': 3.974.6
+      '@smithy/core': 3.35.0
+      '@smithy/fetch-http-handler': 5.8.0
+      '@smithy/node-http-handler': 4.12.1
+      '@smithy/types': 4.19.0
+      tslib: 2.8.1
+
  '@aws-sdk/client-rds-data@3.1144.0':
    dependencies:
      '@aws-sdk/core': 3.978.1
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M255 0h1.2c6.1 2.9 12 6.1 17.8 9.7 66.2 38.1 132.4 76.1 198.6 114.2 5.2 2.8 8.2 8.5 7.6 14.4-.1 80.3 0 160.5-.1 240.7-.9 3.8-3.2 7.2-6.5 9.3L262.4 509.8c-3.5 2.7-8.2 2.9-12 .7-70.5-40.4-140.9-80.9-211.3-121.5-4.7-2.2-7.6-7-7.3-12.2V136.1c-.4-5.1 2.4-10 7.1-12.3 66.1-37.9 132.2-76 198.3-114 5.9-3.4 11.7-6.9 17.8-9.8" style="fill:#019639"/><path d="M123.7 156.1v198.6c-.2 7.4 2.6 14.6 7.8 19.9 10.1 10 25.8 11.5 37.7 3.8 7.8-5.3 12.5-14.2 12.5-23.6 0-47.9-.1-95.8 0-143.7 43.7 52.3 87.5 104.5 131.3 156.7 12.4 12.5 30.3 17.9 47.5 14.3 12.3-2.4 21.6-12.6 22.9-25.1.1-67.6.1-135.1 0-202.6-1.4-15.9-15.4-27.7-31.3-26.3-14 1.2-25.1 12.3-26.3 26.3 0 48.7-.3 97.3 0 146-42.9-50.6-85.3-101.6-128-152.4-11.5-14.7-30-22.1-48.4-19.2-14.2 1.4-25.1 13.1-25.7 27.3" style="fill:#fff"/></svg>