v6.4.3

fix(appstore): label App Store platform requirement badges with canonical names
v6.4.2
2026-05-28 16:44:18 +00:00 · 2026-05-28 16:43:53 +00:00 · 2026-05-28 16:18:03 +00:00 · 2026-05-28 16:13:06 +00:00 · 2026-05-27 21:33:02 +00:00 · 2026-05-27 21:32:32 +00:00
31 changed files with 3815 additions and 740 deletions
@@ -3,6 +3,105 @@
 ## Pending


+## 2026-05-28 - 6.4.3
+
+- label Valkey App Store platform requirements in the dashboard
+  - Displays Valkey using the canonical platform name when templates declare that requirement.
+
+### Fixes
+
+- label App Store platform requirement badges with canonical names (appstore)
+  - Displays Valkey with its canonical platform name when templates declare that requirement.
+  - Adds display labels for MongoDB, S3, ClickHouse, Valkey, and MariaDB platform requirement badges.
+  - Bumps appstore, interfaces, and tsbuild patch dependencies.
+
+## 2026-05-28 - 6.4.2
+
+### Fixes
+
+- make service deletion clean up dependent control-plane state (services)
+  - Delete appstore operations, deployments, DNS entries, platform bindings, backups, registry repositories, owned secrets, and unreferenced App Store images before removing the service row.
+  - Preserve shared OCI blobs while removing service-owned registry repositories.
+  - Keep the service row when required cleanup fails so deletion remains retryable.
+- clean up dependent resources during service deletion (services)
+  - Remove dependent deployments, DNS entries, platform bindings, backups, registry repositories, app store operations, owned secret bundles, and unreferenced App Store images before deleting the service row.
+  - Delete service-owned backup prefixes and OCI registry repositories while preserving shared OCI blobs.
+  - Keep the service row when required cleanup fails so deletion remains retryable.
+
+## 2026-05-27 - 6.4.1
+
+### Fixes
+
+- return safe App Store backend errors for template, config, and install failures
+- guard App Store client actions against empty typed RPC responses
+- bump `@api.global/typedrequest` to `3.3.2` and `@serve.zone/api` to `^5.3.9`
+- handle App Store backend failures and empty RPC responses (appstore)
+  - return sanitized App Store backend errors for template, config, and install failures
+  - validate App Store typed RPC responses before updating client state or returning results
+  - bump typedrequest and serve.zone API dependencies
+
+## 2026-05-26 - 6.4.0
+
+### Features
+
+- add hosted Cloudly parent upgrade controls (hostedapp)
+  - Proxy admin upgrade status and start requests to the parent hosted-app runtime with the service-scoped runtime identity.
+  - Add a Settings hosted runtime panel for status refresh, parent upgrade start, and running-upgrade polling.
+  - Update `@serve.zone/interfaces` to `^6.2.0` for the parent upgrade contracts.
+- add hosted Cloudly parent upgrade controls (hostedapp)
+  - Proxy admin upgrade status and start requests to the parent hosted-app runtime using the service runtime identity.
+  - Add Settings hosted runtime status, refresh, upgrade start, and running-upgrade polling UI.
+  - Update @serve.zone/interfaces to ^6.2.0 for parent upgrade request contracts.
+
+## 2026-05-26 - 6.3.1
+
+- remove redundant card wrappers around Cloudly tables (ui)
+  - Lets `dees-table` provide its own card shell in service, image, and task history views.
+  - Moves the live deployment refresh action into the table header actions.
+
+### Fixes
+
+- remove redundant wrappers around Cloudly tables (ui)
+  - Let dees-table provide its own card shell in service, image, and task history views.
+  - Move the live deployments refresh action into the deployments table header actions.
+  - Bump @types/node to ^25.9.1.
+
+## 2026-05-26 - 6.3.0
+
+- add hosted app lifecycle protocol support (hostedapp)
+  - Implements generic Hosted App TypedRequest handlers for Cloudly-hosted App Store services.
+  - Injects service-scoped runtime identity environment variables into Cloudly App Store installs.
+  - Lets Cloudly report initial admin bootstrap credentials to its parent host when `SERVEZONE_ADMINACCOUNT` is not configured.
+
+### Features
+
+- add hosted app lifecycle protocol support (hostedapp)
+  - Adds a hosted app manager with lifecycle, bootstrap, and managed upgrade TypedRequest handlers.
+  - Injects hosted app runtime identity environment variables into App Store installs.
+  - Allows initial admin bootstrap credentials to be requested from the parent hosted app runtime when SERVEZONE_ADMINACCOUNT is not configured.
+  - Updates hosted app platform requirements and @serve.zone/interfaces for the lifecycle protocol.
+
+## 2026-05-26 - 6.2.0
+
+### Features
+
+- add App Store install and upgrade workflows (appstore)
+  - Add an App Store dashboard for browsing templates, viewing version configs, editing install inputs, and installing services
+  - Add App Store state actions, routing, and live upgrade operation progress handling in the web app
+  - Implement upgrade previews, asynchronous service upgrade operations, platform binding reconciliation, and preservation of service volume and published port overrides
+  - Enable service detail upgrades with preview confirmation, progress display, and refreshed service data
+  - Bump @serve.zone/interfaces to ^6.0.1 and add App Store upgrade merge tests
+
+## 2026-05-26 - 6.1.0
+
+### Features
+
+- improve image operations UI and record archive metadata (images)
+  - Add image list metadata, detail drilldown, version tables, and service usage context.
+  - Record uploaded image archive size and SHA-256 digest after storage completes.
+  - Add deployment detail modals and safe double-click Details actions in deployment and service views.
+  - Initialize default location metadata when creating images.
+
 ## 2026-05-25 - 6.0.0

 ### Breaking Changes
@@ -1,6 +1,6 @@
 {
  "name": "@serve.zone/cloudly",
-  "version": "6.0.0",
+  "version": "6.4.3",
  "private": true,
  "description": "A comprehensive tool for managing containerized applications across multiple cloud providers using Docker Swarmkit, featuring web, CLI, and API interfaces.",
  "type": "module",
@@ -23,7 +23,7 @@
    "docs": "tsdoc aidoc"
  },
  "devDependencies": {
-    "@git.zone/tsbuild": "^4.4.1",
+    "@git.zone/tsbuild": "^4.4.2",
    "@git.zone/tsbundle": "^2.10.4",
    "@git.zone/tsdoc": "^2.0.5",
    "@git.zone/tsdocker": "^2.3.0",
@@ -31,10 +31,10 @@
    "@git.zone/tstest": "^3.6.6",
    "@git.zone/tswatch": "^3.3.5",
    "@push.rocks/smartnetwork": "^4.7.1",
-    "@types/node": "^25.8.0"
+    "@types/node": "^25.9.1"
  },
  "dependencies": {
-    "@api.global/typedrequest": "3.3.1",
+    "@api.global/typedrequest": "3.3.2",
    "@api.global/typedrequest-interfaces": "^3.0.19",
    "@api.global/typedserver": "^8.4.6",
    "@api.global/typedsocket": "^4.1.3",
@@ -78,9 +78,9 @@
    "@push.rocks/smartunique": "^3.0.9",
    "@push.rocks/taskbuffer": "^8.0.2",
    "@push.rocks/webjwt": "^1.0.10",
-    "@serve.zone/api": "^5.3.8",
-    "@serve.zone/appstore": "^0.2.0",
-    "@serve.zone/interfaces": "^6.0.0",
+    "@serve.zone/api": "^5.3.9",
+    "@serve.zone/appstore": "^0.2.3",
+    "@serve.zone/interfaces": "^6.2.1",
    "@tsclass/tsclass": "^9.5.1"
  },
  "files": [
@@ -1,4 +1,5 @@
 minimumReleaseAgeExclude:
+  - '@api.global/typedrequest'
  - '@serve.zone/api'
  - '@serve.zone/appstore'
  - '@serve.zone/interfaces'
@@ -47,12 +47,6 @@
        "description": "Use external TLS termination through Onebox or dcrouter.",
        "required": true
      },
-      {
-        "key": "SERVEZONE_ADMINACCOUNT",
-        "value": "",
-        "description": "Initial admin account in username:password format. Only used when Cloudly has no human users yet.",
-        "required": true
-      },
      {
        "key": "MONGODB_URL",
        "value": "${MONGODB_URI}",
@@ -118,7 +112,7 @@
      "mongodb": true,
      "s3": true
    },
-    "minOneboxVersion": "1.24.2",
+    "minOneboxVersion": "2.2.0",
    "backupBeforeUpgrade": true,
    "healthCheck": {
      "path": "/status",
@@ -16,6 +16,28 @@ const logErrorDetails = (errorArg: unknown) => {
  console.error(`  - Error:`, errorArg);
 };

+const withParentRuntimeEnvCleared = async <T>(callbackArg: () => Promise<T>): Promise<T> => {
+  const previousEnv = {
+    SERVEZONE_RUNTIME_URL: process.env.SERVEZONE_RUNTIME_URL,
+    SERVEZONE_APP_INSTANCE_ID: process.env.SERVEZONE_APP_INSTANCE_ID,
+    SERVEZONE_APP_CONTROL_TOKEN: process.env.SERVEZONE_APP_CONTROL_TOKEN,
+  };
+  delete process.env.SERVEZONE_RUNTIME_URL;
+  delete process.env.SERVEZONE_APP_INSTANCE_ID;
+  delete process.env.SERVEZONE_APP_CONTROL_TOKEN;
+  try {
+    return await callbackArg();
+  } finally {
+    for (const [key, value] of Object.entries(previousEnv)) {
+      if (value === undefined) {
+        delete process.env[key];
+      } else {
+        process.env[key] = value;
+      }
+    }
+  }
+};
+
 tap.preTask('should start cloudly', async () => {
  testCloudly = await helpers.createCloudly();
  await testCloudly.start();
@@ -92,6 +114,24 @@ tap.test('should get an identity', async () => {
  }
 });

+tap.test('should report parent hosted upgrade unavailable when not hosted', async () => {
+  await withParentRuntimeEnvCleared(async () => {
+    const statusRequest = testClient.typedsocketClient.createTypedRequest<any>('getHostedAppParentUpgradeStatus');
+    const statusResponse = await statusRequest.fire({ identity: testClient.identity });
+    expect(statusResponse.isHosted).toBeFalse();
+    expect(statusResponse.unavailableReason).toEqual('SERVEZONE_RUNTIME_URL is not configured.');
+    expect(statusResponse.upgradeState.status).toEqual('unknown');
+
+    const startRequest = testClient.typedsocketClient.createTypedRequest<any>('startHostedAppParentUpgrade');
+    const startResponse = await startRequest.fire({
+      identity: testClient.identity,
+      targetVersion: '0.0.0-test',
+    });
+    expect(startResponse.isHosted).toBeFalse();
+    expect(startResponse.upgradeState.status).toEqual('unknown');
+  });
+});
+
 tap.test('should create and consume node jump codes', async () => {
  const cluster = await testClient.cluster.createCluster('Jump Code Test Cluster');
  const createJumpCommandTR = testClient.typedsocketClient.createTypedRequest<any>('createNodeJumpCommand');
@@ -0,0 +1,61 @@
+import { tap, expect } from '@git.zone/tstest/tapbundle';
+
+import { CloudlyAppStoreManager } from '../ts/manager.appstore/classes.appstoremanager.js';
+
+const createManager = () => Object.create(CloudlyAppStoreManager.prototype) as any;
+
+tap.test('should preserve service volume overrides during App Store upgrades', async () => {
+  const manager = createManager();
+  const volumes = manager.mergeUpgradeVolumes(
+    [
+      { mountPath: '/data', name: 'custom-data', driver: 'local' },
+      { mountPath: '/cache', name: 'custom-cache' },
+    ],
+    [
+      '/data',
+      { mountPath: '/config', readOnly: true },
+    ],
+  );
+
+  expect(volumes).toEqual([
+    { mountPath: '/data', name: 'custom-data', driver: 'local' },
+    { mountPath: '/config', readOnly: true },
+    { mountPath: '/cache', name: 'custom-cache' },
+  ]);
+});
+
+tap.test('should preserve service published port overrides during App Store upgrades', async () => {
+  const manager = createManager();
+  const publishedPorts = manager.mergeUpgradePublishedPorts(
+    [
+      { targetPort: 5432, publishedPort: 15432, protocol: 'tcp' },
+      { targetPort: 9999, publishedPort: 19999 },
+    ],
+    [
+      { targetPort: 5432, publishedPort: 5432 },
+      { targetPort: 6379 },
+    ],
+  );
+
+  expect(publishedPorts).toEqual([
+    { targetPort: 5432, publishedPort: 15432, protocol: 'tcp' },
+    { targetPort: 6379, protocol: 'tcp' },
+    { targetPort: 9999, publishedPort: 19999, protocol: 'tcp' },
+  ]);
+});
+
+tap.test('should report unsupported App Store published port configs', async () => {
+  const manager = createManager();
+  const unsupported = manager.getUnsupportedPublishedPorts([
+    { targetPort: 80, publishedPort: 80 },
+    { targetPort: 81, publishedPort: 80 },
+    { targetPort: 82, publishedPort: 82, hostIp: '127.0.0.1' },
+    { targetPort: 9000, targetPortEnd: 9001, publishedPort: 19000, publishedPortEnd: 19002 },
+  ]);
+
+  expect(unsupported.some((messageArg: string) => messageArg.includes('duplicates published port 80/tcp'))).toBeTrue();
+  expect(unsupported.some((messageArg: string) => messageArg.includes('unsupported hostIp'))).toBeTrue();
+  expect(unsupported.some((messageArg: string) => messageArg.includes('mismatched target and published port ranges'))).toBeTrue();
+});
+
+export default tap.start();
@@ -0,0 +1,86 @@
+import { tap, expect } from '@git.zone/tstest/tapbundle';
+
+import { CloudlyRegistryManager } from '../ts/manager.registry/classes.registrymanager.js';
+
+const digest = (fillArg: string): string => `sha256:${fillArg.repeat(64)}`;
+
+class FakeRegistryStorage {
+  public objects = new Map<string, Buffer>();
+
+  public async getObject(pathArg: string): Promise<Buffer | null> {
+    return this.objects.get(pathArg) || null;
+  }
+
+  public async putObject(pathArg: string, dataArg: Buffer): Promise<void> {
+    this.objects.set(pathArg, dataArg);
+  }
+
+  public async deleteObject(pathArg: string): Promise<void> {
+    this.objects.delete(pathArg);
+  }
+
+  public async objectExists(pathArg: string): Promise<boolean> {
+    return this.objects.has(pathArg);
+  }
+
+  public async listObjects(prefixArg: string): Promise<string[]> {
+    return Array.from(this.objects.keys()).filter((pathArg) => pathArg.startsWith(prefixArg));
+  }
+
+  public async getOciManifest(repositoryArg: string, digestArg: string): Promise<Buffer | null> {
+    return this.getObject(`oci/manifests/${repositoryArg}/${digestArg.slice('sha256:'.length)}`);
+  }
+}
+
+const putJson = (storageArg: FakeRegistryStorage, pathArg: string, dataArg: unknown): void => {
+  storageArg.objects.set(pathArg, Buffer.from(JSON.stringify(dataArg)));
+};
+
+tap.test('should delete Cloudly service-owned OCI repository without deleting shared blobs', async () => {
+  const storage = new FakeRegistryStorage();
+  const manager = Object.create(CloudlyRegistryManager.prototype) as any;
+  const service = {
+    id: 'service-1',
+    data: {
+      registryTarget: { repository: 'workloads/ghost-service-1' },
+    },
+  };
+  manager.started = true;
+  manager.smartRegistry = { getStorage: () => storage };
+  manager.recordedTagDigests = new Map([
+    ['workloads/ghost-service-1:latest', digest('a')],
+  ]);
+  manager.cloudlyRef = {
+    serviceManager: {
+      CService: { getInstances: async () => [service] },
+    },
+  };
+
+  const targetDigest = digest('a');
+  const otherDigest = digest('b');
+  const sharedLayerDigest = digest('c');
+  const targetOnlyLayerDigest = digest('d');
+  const otherOnlyLayerDigest = digest('e');
+  putJson(storage, 'oci/tags/workloads/ghost-service-1/tags.json', { latest: targetDigest });
+  putJson(storage, 'oci/tags/workloads/other-service/tags.json', { latest: otherDigest });
+  putJson(storage, `oci/manifests/workloads/ghost-service-1/${targetDigest.slice('sha256:'.length)}`, {
+    layers: [{ digest: sharedLayerDigest }, { digest: targetOnlyLayerDigest }],
+  });
+  putJson(storage, `oci/manifests/workloads/other-service/${otherDigest.slice('sha256:'.length)}`, {
+    layers: [{ digest: sharedLayerDigest }, { digest: otherOnlyLayerDigest }],
+  });
+  for (const blobDigest of [sharedLayerDigest, targetOnlyLayerDigest, otherOnlyLayerDigest]) {
+    storage.objects.set(`oci/blobs/sha256/${blobDigest.slice('sha256:'.length)}`, Buffer.from(blobDigest));
+  }
+
+  await manager.deleteServiceRepository(service);
+
+  expect(storage.objects.has('oci/tags/workloads/ghost-service-1/tags.json')).toBeFalse();
+  expect(storage.objects.has(`oci/manifests/workloads/ghost-service-1/${targetDigest.slice('sha256:'.length)}`)).toBeFalse();
+  expect(storage.objects.has(`oci/blobs/sha256/${targetOnlyLayerDigest.slice('sha256:'.length)}`)).toBeFalse();
+  expect(storage.objects.has(`oci/blobs/sha256/${sharedLayerDigest.slice('sha256:'.length)}`)).toBeTrue();
+  expect(storage.objects.has(`oci/blobs/sha256/${otherOnlyLayerDigest.slice('sha256:'.length)}`)).toBeTrue();
+  expect(manager.recordedTagDigests.has('workloads/ghost-service-1:latest')).toBeFalse();
+});
+
+export default tap.start();
@@ -0,0 +1,137 @@
+import { tap, expect } from '@git.zone/tstest/tapbundle';
+
+import { ServiceManager } from '../ts/manager.service/classes.servicemanager.js';
+
+const createDeleteable = (labelArg: string, callsArg: string[]) => ({
+  id: labelArg,
+  delete: async () => callsArg.push(`delete:${labelArg}`),
+});
+
+const createManager = (optionsArg: {
+  calls: string[];
+  failBackups?: boolean;
+}) => {
+  const calls = optionsArg.calls;
+  const service = {
+    id: 'service-1',
+    data: {
+      name: 'ghost',
+      imageId: 'image-1',
+      appTemplateId: 'ghost',
+      secretBundleId: 'bundle-1',
+      registryTarget: { repository: 'workloads/ghost-service-1' },
+      domains: [{ name: 'ghost.example.com' }],
+    },
+    removeDnsEntries: async () => calls.push('delete:dns'),
+    delete: async () => calls.push('delete:service'),
+  };
+  const manager = Object.create(ServiceManager.prototype) as any;
+  manager.CService = {
+    getInstance: async () => service,
+  };
+  manager.cloudlyRef = {
+    appStoreManager: {
+      clearOperationsForService: (serviceIdArg: string) => calls.push(`clear-upgrades:${serviceIdArg}`),
+    },
+    deploymentManager: {
+      CDeployment: {
+        getInstances: async () => [createDeleteable('deployment-1', calls)],
+      },
+    },
+    platformManager: {
+      CPlatformBinding: {
+        getInstances: async (queryArg: { serviceId: string }) => queryArg.serviceId === 'service-1'
+          ? [createDeleteable('platform-binding-1', calls)]
+          : [],
+      },
+    },
+    backupManager: {
+      deleteBackupsForService: async (serviceIdArg: string) => {
+        calls.push(`delete-backups:${serviceIdArg}`);
+        if (optionsArg.failBackups) {
+          throw new Error('backup cleanup failed');
+        }
+      },
+    },
+    registryManager: {
+      deleteServiceRepository: async () => calls.push('delete:registry-repository'),
+    },
+    secretManager: {
+      CSecretBundle: {
+        getInstance: async () => ({
+          id: 'bundle-1',
+          data: {
+            serviceId: 'service-1',
+            includedSecretGroupIds: ['group-1'],
+          },
+          delete: async () => calls.push('delete:secret-bundle'),
+        }),
+        getInstances: async () => [],
+      },
+      CSecretGroup: {
+        getInstance: async () => createDeleteable('secret-group-1', calls),
+      },
+    },
+    imageManager: {
+      deleteImageIfUnreferenced: async (imageIdArg: string, serviceIdArg: string) => {
+        calls.push(`delete-image:${imageIdArg}:${serviceIdArg}`);
+        return true;
+      },
+    },
+    settingsManager: {
+      getSettings: async () => ({
+        dcrouterGatewayUrl: 'https://dcrouter.example.com',
+        dcrouterGatewayApiToken: 'token',
+        dcrouterWorkHosterId: 'cloudly-main',
+      }),
+    },
+    clusterManager: {
+      getAllClusters: async () => [],
+    },
+    coreflowManager: {
+      pushClusterConfigToConnectedCoreflows: async () => calls.push('push:coreflow'),
+    },
+  };
+  manager.fireDcRouterRequest = async (_url: string, methodArg: string, payloadArg: any) => {
+    calls.push(`${methodArg}:${payloadArg.ownership.hostname}:${payloadArg.ownership.workHosterId}`);
+    return { success: true, action: 'deleted' };
+  };
+  return { manager, service };
+};
+
+tap.test('should delete Cloudly service-owned resources before deleting the service row', async () => {
+  const calls: string[] = [];
+  const { manager } = createManager({ calls });
+
+  await manager.deleteServiceById('service-1');
+
+  expect(calls).toContain('syncWorkAppRoute:ghost.example.com:cloudly-main');
+  expect(calls).toContain('clear-upgrades:service-1');
+  expect(calls).toContain('delete:deployment-1');
+  expect(calls).toContain('delete:dns');
+  expect(calls).toContain('delete:platform-binding-1');
+  expect(calls).toContain('delete-backups:service-1');
+  expect(calls).toContain('delete:registry-repository');
+  expect(calls).toContain('delete:secret-bundle');
+  expect(calls).toContain('delete:secret-group-1');
+  expect(calls).toContain('delete-image:image-1:service-1');
+  expect(calls.at(-2)).toEqual('delete:service');
+  expect(calls.at(-1)).toEqual('push:coreflow');
+});
+
+tap.test('should keep Cloudly service row when required cleanup fails', async () => {
+  const calls: string[] = [];
+  const { manager } = createManager({ calls, failBackups: true });
+
+  let errorMessage = '';
+  try {
+    await manager.deleteServiceById('service-1');
+  } catch (error) {
+    errorMessage = (error as Error).message;
+  }
+  expect(errorMessage).toEqual('backup cleanup failed');
+  expect(calls).not.toContain('delete:service');
+  expect(calls).not.toContain('push:coreflow');
+});
+
+export default tap.start();
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/cloudly',
-  version: '6.0.0',
+  version: '6.4.3',
  description: 'A comprehensive tool for managing containerized applications across multiple cloud providers using Docker Swarmkit, featuring web, CLI, and API interfaces.'
 }
@@ -35,6 +35,7 @@ import { CloudlyPlatformManager } from './manager.platform/classes.platformmanag
 import { CloudlyBackupManager } from './manager.backup/classes.backupmanager.js';
 import { CloudlyBaseOsManager } from './manager.baseos/classes.baseosmanager.js';
 import { CloudlyAppStoreManager } from './manager.appstore/classes.appstoremanager.js';
+import { CloudlyHostedAppManager } from './manager.hostedapp/classes.hostedappmanager.js';
 import { CloudlyJumpManager } from './manager.jump/classes.jumpmanager.js';

 /**
@@ -82,6 +83,7 @@ export class Cloudly {
  public baremetalManager: CloudlyBaremetalManager;
  public baseOsManager: CloudlyBaseOsManager;
  public appStoreManager: CloudlyAppStoreManager;
+  public hostedAppManager: CloudlyHostedAppManager;
  public jumpManager: CloudlyJumpManager;

  private readyDeferred = new plugins.smartpromise.Deferred();
@@ -119,6 +121,7 @@ export class Cloudly {
    this.backupManager = new CloudlyBackupManager(this);
    this.baseOsManager = new CloudlyBaseOsManager(this);
    this.secretManager = new CloudlySecretManager(this);
+    this.hostedAppManager = new CloudlyHostedAppManager(this);
    this.appStoreManager = new CloudlyAppStoreManager(this);
    this.nodeManager = new CloudlyNodeManager(this);
    this.baremetalManager = new CloudlyBaremetalManager(this);
@@ -151,6 +154,7 @@ export class Cloudly {
    await this.taskManager.init();
    await this.backupManager.start();
    await this.baseOsManager.start();
+    await this.hostedAppManager.start();
    await this.appStoreManager.start();
    await this.registryManager.start();
    await this.domainManager.init();
@@ -186,6 +190,7 @@ export class Cloudly {
    await this.backupManager.stop();
    await this.baseOsManager.stop();
    await this.registryManager.stop();
+    await this.hostedAppManager.stop();
    await this.appStoreManager.stop();
    await this.externalRegistryManager.stop();
  }
@@ -113,19 +113,28 @@ export class CloudlyAuthManager {
    }

    const adminAccount = this.cloudlyRef.config.data.servezoneAdminaccount;
-    if (!adminAccount) {
-      throw new Error('SERVEZONE_ADMINACCOUNT is required for first-run Cloudly bootstrap');
-    }
+    let username: string;
+    let password: string;
+    let hostedBootstrapActionId: string | undefined;
+    if (adminAccount) {
+      const separatorIndex = adminAccount.indexOf(':');
+      if (separatorIndex <= 0 || separatorIndex === adminAccount.length - 1) {
+        throw new Error('SERVEZONE_ADMINACCOUNT must use username:password format');
+      }

-    const separatorIndex = adminAccount.indexOf(':');
-    if (separatorIndex <= 0 || separatorIndex === adminAccount.length - 1) {
-      throw new Error('SERVEZONE_ADMINACCOUNT must use username:password format');
-    }
-
-    const username = adminAccount.slice(0, separatorIndex).trim();
-    const password = adminAccount.slice(separatorIndex + 1);
-    if (!username || !password) {
-      throw new Error('SERVEZONE_ADMINACCOUNT must include a non-empty username and password');
+      username = adminAccount.slice(0, separatorIndex).trim();
+      password = adminAccount.slice(separatorIndex + 1);
+      if (!username || !password) {
+        throw new Error('SERVEZONE_ADMINACCOUNT must include a non-empty username and password');
+      }
+    } else {
+      const hostedBootstrap = await this.cloudlyRef.hostedAppManager.requestParentInitialAdminBootstrap();
+      if (!hostedBootstrap) {
+        throw new Error('SERVEZONE_ADMINACCOUNT is required for first-run Cloudly bootstrap unless hosted app lifecycle credentials are available');
+      }
+      username = hostedBootstrap.username;
+      password = hostedBootstrap.password;
+      hostedBootstrapActionId = hostedBootstrap.actionId;
    }

    const user = new this.CUser({
@@ -139,6 +148,14 @@ export class CloudlyAuthManager {
    });
    await user.save();
    logger.log('success', `created initial admin user ${username}`);
+    if (hostedBootstrapActionId) {
+      await this.cloudlyRef.hostedAppManager.completeParentBootstrapAction(
+        hostedBootstrapActionId,
+        'Cloudly created the initial admin user.',
+      ).catch((errorArg) => {
+        logger.log('warn', `failed to complete hosted app bootstrap action: ${(errorArg as Error).message}`);
+      });
+    }
  }

  public async stop() {}
@@ -198,6 +198,18 @@ export class CloudlyBackupManager {
    return await backup.createSavableObject();
  }

+  public async deleteBackupsForService(serviceIdArg: string): Promise<void> {
+    const backups = await this.CBackupRecord.getInstances({
+      serviceId: serviceIdArg,
+    });
+    for (const backup of backups) {
+      if (backup.replication?.targetPath) {
+        await this.getBackupTargetWriter().deletePrefix(backup.replication.targetPath);
+      }
+      await backup.delete();
+    }
+  }
+
  public async backupAllServices() {
    const services = await this.cloudlyRef.serviceManager.CService.getInstances({});
    const results: Array<{ serviceId: string; backupId?: string; errorText?: string }> = [];
@@ -12,6 +12,7 @@ export interface IBackupTargetWriter {
  hasObject(pathArg: string, objectArg: TArchiveObject): Promise<boolean>;
  putObject(pathArg: string, objectArg: TArchiveObject, contentsArg: Buffer): Promise<void>;
  readObject(pathArg: string): Promise<Buffer>;
+  deletePrefix(pathPrefixArg: string): Promise<void>;
 }

 const requiredEnv = (nameArg: string) => {
@@ -103,6 +104,14 @@ class S3BackupTargetWriter implements IBackupTargetWriter {
    const bucket = await this.getBucket();
    return await bucket.fastGet({ path: normalizeRemotePath(pathArg) });
  }
+
+  public async deletePrefix(pathPrefixArg: string): Promise<void> {
+    const bucket = await this.getBucket();
+    const prefix = normalizeRemotePath(pathPrefixArg).replace(/\/+$/, '');
+    for await (const objectPath of bucket.listAllObjects(prefix)) {
+      await bucket.fastRemove({ path: objectPath });
+    }
+  }
 }

 class SmbBackupTargetWriter implements IBackupTargetWriter {
@@ -183,6 +192,24 @@ class SmbBackupTargetWriter implements IBackupTargetWriter {
  public async readObject(pathArg: string) {
    return await (await this.getClient()).readFile(this.getShare(), normalizeRemotePath(pathArg));
  }
+
+  public async deletePrefix(pathPrefixArg: string): Promise<void> {
+    const client = await this.getClient();
+    const share = this.getShare();
+    const rootPath = normalizeRemotePath(pathPrefixArg).replace(/\/+$/, '');
+    const deleteDirectoryFiles = async (pathArg: string): Promise<void> => {
+      const entries = await client.listDirectory(share, pathArg).catch(() => []);
+      for (const entry of entries) {
+        const childPath = `${pathArg}/${entry.name}`.replace(/^\/+/, '');
+        if (entry.isDirectory) {
+          await deleteDirectoryFiles(childPath);
+        } else {
+          await client.deleteFile(share, childPath).catch(() => {});
+        }
+      }
+    };
+    await deleteDirectoryFiles(rootPath);
+  }
 }

 export const createBackupTargetWriterFromEnv = (): IBackupTargetWriter => {
@@ -0,0 +1,451 @@
+import type { Cloudly } from '../classes.cloudly.js';
+import * as plugins from '../plugins.js';
+import { Service } from '../manager.service/classes.service.js';
+
+type IHostedAppLifecycleState = plugins.servezoneInterfaces.data.IHostedAppLifecycleState;
+type IHostedAppUpgradeState = plugins.servezoneInterfaces.data.IHostedAppUpgradeState;
+type IHostedAppRuntimeIdentity = plugins.servezoneInterfaces.data.IHostedAppRuntimeIdentity;
+
+interface IHostedAppParentUpgradeResponse {
+  isHosted: boolean;
+  unavailableReason?: string;
+  upgradeState: IHostedAppUpgradeState;
+}
+
+type TExtendedServiceData = plugins.servezoneInterfaces.data.IService['data'] & {
+  hostedAppLifecycle?: IHostedAppLifecycleState;
+};
+
+export class CloudlyHostedAppManager {
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+
+  constructor(private cloudlyRef: Cloudly) {
+    this.cloudlyRef.typedrouter.addTypedRouter(this.typedrouter);
+    this.registerHandlers();
+  }
+
+  public async start() {}
+  public async stop() {}
+
+  private getParentRuntimeIdentity(): IHostedAppRuntimeIdentity | null {
+    const appInstanceId = process.env.SERVEZONE_APP_INSTANCE_ID;
+    const appControlToken = process.env.SERVEZONE_APP_CONTROL_TOKEN;
+    if (!appInstanceId || !appControlToken) {
+      return null;
+    }
+    return {
+      appInstanceId,
+      appControlToken,
+      hostType: process.env.SERVEZONE_APP_HOST_TYPE || 'onebox',
+    };
+  }
+
+  private createParentRuntimeTypedRequest<TRequest extends plugins.typedrequestInterfaces.ITypedRequest>(methodArg: TRequest['method']): plugins.typedrequest.TypedRequest<TRequest> | null {
+    const runtimeUrl = process.env.SERVEZONE_RUNTIME_URL;
+    if (!runtimeUrl) {
+      return null;
+    }
+    return new plugins.typedrequest.TypedRequest<TRequest>(
+      `${runtimeUrl.replace(/\/+$/, '')}/typedrequest`,
+      methodArg,
+    );
+  }
+
+  private getParentRuntimeUnavailableReason(): string | undefined {
+    if (!process.env.SERVEZONE_RUNTIME_URL) {
+      return 'SERVEZONE_RUNTIME_URL is not configured.';
+    }
+    if (!process.env.SERVEZONE_APP_INSTANCE_ID || !process.env.SERVEZONE_APP_CONTROL_TOKEN) {
+      return 'Hosted app runtime identity is not configured.';
+    }
+    return undefined;
+  }
+
+  private getErrorMessage(errorArg: unknown): string {
+    return errorArg instanceof Error ? errorArg.message : String(errorArg);
+  }
+
+  public async getParentUpgradeStatus(): Promise<IHostedAppParentUpgradeResponse> {
+    const unavailableReason = this.getParentRuntimeUnavailableReason();
+    const identity = this.getParentRuntimeIdentity();
+    const request = this.createParentRuntimeTypedRequest<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_GetManagedUpgradeStatus>(
+      'hostedAppGetManagedUpgradeStatus',
+    );
+    if (unavailableReason || !identity || !request) {
+      return {
+        isHosted: false,
+        unavailableReason,
+        upgradeState: { status: 'unknown' },
+      };
+    }
+
+    try {
+      const response = await request.fire({ identity });
+      return {
+        isHosted: true,
+        upgradeState: response.upgradeState,
+      };
+    } catch (error) {
+      const message = this.getErrorMessage(error);
+      return {
+        isHosted: true,
+        unavailableReason: message,
+        upgradeState: {
+          status: 'unknown',
+          error: message,
+        },
+      };
+    }
+  }
+
+  public async startParentUpgrade(targetVersionArg?: string): Promise<IHostedAppParentUpgradeResponse> {
+    const unavailableReason = this.getParentRuntimeUnavailableReason();
+    const identity = this.getParentRuntimeIdentity();
+    const request = this.createParentRuntimeTypedRequest<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_StartManagedUpgrade>(
+      'hostedAppStartManagedUpgrade',
+    );
+    if (unavailableReason || !identity || !request) {
+      return {
+        isHosted: false,
+        unavailableReason,
+        upgradeState: { status: 'unknown' },
+      };
+    }
+
+    try {
+      const response = await request.fire({
+        identity,
+        targetVersion: targetVersionArg,
+      });
+      return {
+        isHosted: true,
+        upgradeState: response.upgradeState,
+      };
+    } catch (error) {
+      const message = this.getErrorMessage(error);
+      return {
+        isHosted: true,
+        unavailableReason: message,
+        upgradeState: {
+          status: 'failed',
+          error: message,
+        },
+      };
+    }
+  }
+
+  public async requestParentInitialAdminBootstrap(): Promise<{
+    username: string;
+    password: string;
+    actionId: string;
+  } | null> {
+    const identity = this.getParentRuntimeIdentity();
+    const request = this.createParentRuntimeTypedRequest<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_RequestBootstrapAction>(
+      'hostedAppRequestBootstrapAction',
+    );
+    if (!identity || !request) {
+      return null;
+    }
+
+    const username = 'admin';
+    const password = plugins.smartunique.uniSimple('cloudlyadmin', 32);
+    const response = await request.fire({
+      identity,
+      action: {
+        type: 'credentials',
+        label: 'Cloudly initial admin',
+        url: `https://${this.cloudlyRef.config.data.publicUrl}`,
+        username,
+        password,
+        message: 'Use these credentials to sign in to Cloudly, then change the admin password.',
+      },
+    });
+    return {
+      username,
+      password,
+      actionId: response.action.id,
+    };
+  }
+
+  public async completeParentBootstrapAction(actionIdArg?: string, messageArg?: string): Promise<void> {
+    const identity = this.getParentRuntimeIdentity();
+    const request = this.createParentRuntimeTypedRequest<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_CompleteBootstrapAction>(
+      'hostedAppCompleteBootstrapAction',
+    );
+    if (!identity || !request) {
+      return;
+    }
+    await request.fire({
+      identity,
+      actionId: actionIdArg,
+      message: messageArg,
+    });
+  }
+
+  public createHostedAppRuntimeEnvVars(serviceNameArg: string): {
+    appInstanceId: string;
+    appControlToken: string;
+    envVars: Record<string, string>;
+    lifecycle: IHostedAppLifecycleState;
+  } {
+    const appInstanceId = plugins.smartunique.uniSimple('hostedapp');
+    const appControlToken = plugins.smartunique.uniSimple('hostedapptoken', 64);
+    const runtimeUrl = `https://${this.cloudlyRef.config.data.publicUrl}`;
+    return {
+      appInstanceId,
+      appControlToken,
+      envVars: {
+        SERVEZONE_RUNTIME_URL: runtimeUrl,
+        SERVEZONE_APP_INSTANCE_ID: appInstanceId,
+        SERVEZONE_APP_CONTROL_TOKEN: appControlToken,
+        SERVEZONE_APP_HOST_TYPE: 'cloudly',
+      },
+      lifecycle: {
+        appInstanceId,
+        hostType: 'cloudly',
+        appName: serviceNameArg,
+        runtimeStatus: 'unknown',
+      },
+    };
+  }
+
+  private async requireHostedAppIdentity(identityArg: IHostedAppRuntimeIdentity): Promise<Service> {
+    const services = await this.cloudlyRef.serviceManager.CService.getInstances({});
+    const service = services.find((serviceArg) => {
+      const serviceData = serviceArg.data as TExtendedServiceData;
+      return (
+        serviceData.hostedAppLifecycle?.appInstanceId === identityArg?.appInstanceId ||
+        serviceData.environment?.SERVEZONE_APP_INSTANCE_ID === identityArg?.appInstanceId
+      );
+    });
+    if (!service) {
+      throw new plugins.typedrequest.TypedResponseError('Hosted app service not found');
+    }
+    const serviceData = service.data as TExtendedServiceData;
+    if (serviceData.environment?.SERVEZONE_APP_CONTROL_TOKEN !== identityArg?.appControlToken) {
+      throw new plugins.typedrequest.TypedResponseError('Hosted app identity is invalid');
+    }
+    return service;
+  }
+
+  private async getUpgradeState(serviceArg: Service): Promise<IHostedAppUpgradeState> {
+    const serviceData = serviceArg.data as TExtendedServiceData;
+    const latestOperation = this.cloudlyRef.appStoreManager
+      .getUpgradeOperations()
+      .find((operationArg) => operationArg.serviceId === serviceArg.id);
+    if (latestOperation) {
+      return {
+        status: latestOperation.status === 'running' ? 'running' : latestOperation.status,
+        appTemplateId: latestOperation.appTemplateId,
+        currentVersion: latestOperation.fromVersion,
+        targetVersion: latestOperation.targetVersion,
+        operationId: latestOperation.id,
+        warnings: latestOperation.warnings,
+        error: latestOperation.error,
+        startedAt: latestOperation.startedAt,
+        updatedAt: latestOperation.updatedAt,
+        completedAt: latestOperation.completedAt,
+      };
+    }
+
+    if (!serviceData.appTemplateId || !serviceData.appTemplateVersion) {
+      return { status: 'unknown' };
+    }
+
+    const upgradeableServices = await this.cloudlyRef.appStoreManager.getUpgradeableAppStoreServices();
+    const upgradeable = upgradeableServices.find((serviceArg2) => serviceArg2.serviceId === serviceArg.id);
+    if (!upgradeable) {
+      return {
+        status: 'upToDate',
+        appTemplateId: serviceData.appTemplateId,
+        currentVersion: serviceData.appTemplateVersion,
+        latestVersion: serviceData.appTemplateVersion,
+      };
+    }
+
+    return {
+      status: 'available',
+      appTemplateId: upgradeable.appTemplateId,
+      currentVersion: upgradeable.currentVersion,
+      latestVersion: upgradeable.latestVersion,
+      targetVersion: upgradeable.latestVersion,
+    };
+  }
+
+  private async getLifecycleState(serviceArg: Service): Promise<IHostedAppLifecycleState> {
+    const serviceData = serviceArg.data as TExtendedServiceData;
+    const appInstanceId = serviceData.hostedAppLifecycle?.appInstanceId || serviceData.environment?.SERVEZONE_APP_INSTANCE_ID;
+    const state: IHostedAppLifecycleState = {
+      ...(serviceData.hostedAppLifecycle || ({} as IHostedAppLifecycleState)),
+      appInstanceId: appInstanceId || '',
+      hostType: 'cloudly',
+      appName: serviceData.hostedAppLifecycle?.appName || serviceData.name,
+      publicUrl: serviceData.hostedAppLifecycle?.publicUrl || (serviceData.domains?.[0]?.name ? `https://${serviceData.domains[0].name}` : undefined),
+      upgradeState: await this.getUpgradeState(serviceArg),
+    };
+    serviceData.hostedAppLifecycle = state;
+    serviceArg.data = serviceData;
+    await serviceArg.save();
+    return state;
+  }
+
+  private async updateLifecycleState(serviceArg: Service, stateArg: IHostedAppLifecycleState): Promise<IHostedAppLifecycleState> {
+    const serviceData = serviceArg.data as TExtendedServiceData;
+    serviceData.hostedAppLifecycle = stateArg;
+    serviceArg.data = serviceData;
+    await serviceArg.save();
+    return await this.getLifecycleState(serviceArg);
+  }
+
+  private registerHandlers() {
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_ReportLifecycleState>(
+        'hostedAppReportLifecycleState',
+        async (dataArg) => {
+          const service = await this.requireHostedAppIdentity(dataArg.identity);
+          const existingState = await this.getLifecycleState(service);
+          const state = await this.updateLifecycleState(service, {
+            ...existingState,
+            ...dataArg.report,
+            appInstanceId: existingState.appInstanceId,
+            hostType: 'cloudly',
+            reportedAt: Date.now(),
+          });
+          return { state };
+        },
+      ),
+    );
+
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_GetLifecycleState>(
+        'hostedAppGetLifecycleState',
+        async (dataArg) => {
+          const service = await this.requireHostedAppIdentity(dataArg.identity);
+          return { state: await this.getLifecycleState(service) };
+        },
+      ),
+    );
+
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_RequestBootstrapAction>(
+        'hostedAppRequestBootstrapAction',
+        async (dataArg) => {
+          const service = await this.requireHostedAppIdentity(dataArg.identity);
+          const existingState = await this.getLifecycleState(service);
+          const now = Date.now();
+          const action = {
+            ...dataArg.action,
+            id: dataArg.action.id || plugins.smartunique.shortId(12),
+            status: 'ready' as const,
+            label: dataArg.action.label || 'Initial setup',
+            createdAt: now,
+            updatedAt: now,
+          };
+          const state = await this.updateLifecycleState(service, {
+            ...existingState,
+            runtimeStatus: 'setupRequired',
+            bootstrapAction: action,
+            reportedAt: now,
+          });
+          return { action, state };
+        },
+      ),
+    );
+
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_CompleteBootstrapAction>(
+        'hostedAppCompleteBootstrapAction',
+        async (dataArg) => {
+          const service = await this.requireHostedAppIdentity(dataArg.identity);
+          const existingState = await this.getLifecycleState(service);
+          const now = Date.now();
+          const bootstrapAction = existingState.bootstrapAction
+            ? {
+                ...existingState.bootstrapAction,
+                id: dataArg.actionId || existingState.bootstrapAction.id,
+                status: 'completed' as const,
+                message: dataArg.message || existingState.bootstrapAction.message,
+                updatedAt: now,
+                completedAt: now,
+              }
+            : undefined;
+          const state = await this.updateLifecycleState(service, {
+            ...existingState,
+            runtimeStatus: existingState.runtimeStatus === 'setupRequired' ? 'running' : existingState.runtimeStatus,
+            bootstrapAction,
+            reportedAt: now,
+          });
+          return { state };
+        },
+      ),
+    );
+
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_StartManagedUpgrade>(
+        'hostedAppStartManagedUpgrade',
+        async (dataArg) => {
+          const service = await this.requireHostedAppIdentity(dataArg.identity);
+          const upgradeState = await this.getUpgradeState(service);
+          const targetVersion = dataArg.targetVersion || upgradeState.targetVersion || upgradeState.latestVersion;
+          if (!targetVersion) {
+            throw new plugins.typedrequest.TypedResponseError('No managed upgrade target is available');
+          }
+          const operation = await this.cloudlyRef.appStoreManager.startHostedAppUpgrade(service.id, targetVersion);
+          const nextUpgradeState: IHostedAppUpgradeState = {
+            status: 'running',
+            appTemplateId: operation.appTemplateId,
+            currentVersion: operation.fromVersion,
+            targetVersion: operation.targetVersion,
+            operationId: operation.id,
+            warnings: operation.warnings,
+            startedAt: operation.startedAt,
+            updatedAt: operation.updatedAt,
+          };
+          const existingState = await this.getLifecycleState(service);
+          const state = await this.updateLifecycleState(service, {
+            ...existingState,
+            upgradeState: nextUpgradeState,
+            reportedAt: Date.now(),
+          });
+          return { upgradeState: nextUpgradeState, state };
+        },
+      ),
+    );
+
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.hostedapp.IReq_HostedApp_GetManagedUpgradeStatus>(
+        'hostedAppGetManagedUpgradeStatus',
+        async (dataArg) => {
+          const service = await this.requireHostedAppIdentity(dataArg.identity);
+          return { upgradeState: await this.getUpgradeState(service) };
+        },
+      ),
+    );
+
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.hostedapp.IReq_Admin_GetHostedAppParentUpgradeStatus>(
+        'getHostedAppParentUpgradeStatus',
+        async (dataArg) => {
+          await this.passAdminIdentity(dataArg);
+          return await this.getParentUpgradeStatus();
+        },
+      ),
+    );
+
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.hostedapp.IReq_Admin_StartHostedAppParentUpgrade>(
+        'startHostedAppParentUpgrade',
+        async (dataArg) => {
+          await this.passAdminIdentity(dataArg);
+          return await this.startParentUpgrade(dataArg.targetVersion);
+        },
+      ),
+    );
+  }
+
+  private async passAdminIdentity(dataArg: { identity: plugins.servezoneInterfaces.data.IIdentity }) {
+    await plugins.smartguard.passGuardsOrReject(dataArg, [
+      this.cloudlyRef.authManager.adminIdentityGuard,
+    ]);
+  }
+}
@@ -12,15 +12,18 @@ export class Image extends plugins.smartdata.SmartDataDbDoc<
  ) {
    const image = new Image();
    image.id = await this.getNewId();
-    console.log(imageDataArg);
    Object.assign(image, {
      data: {
        name: imageDataArg.name,
        description: imageDataArg.description,
+        location: imageDataArg.location || {
+          internal: true,
+          externalRegistryId: '',
+          externalImageTag: '',
+        },
        versions: [],
      },
    });
-    console.log((Image as any).saveableProperties);
    await image.save();
    return image;
  }
@@ -116,12 +116,15 @@ export class ImageManager {
          await refImage.save();
          const imagePushStream = reqArg.imageStream;
          (async () => {
+            const archiveHash = plugins.crypto.createHash('sha256');
+            let archiveSize = 0;
            const smartWebDuplex = new plugins.smartstream.webstream.WebDuplexStream<
              Uint8Array,
              Uint8Array
            >({
              writeFunction: async (chunkArg, toolsArg) => {
-                console.log(chunkArg);
+                archiveSize += chunkArg.byteLength;
+                archiveHash.update(chunkArg);
                return chunkArg;
              },
            });
@@ -130,6 +133,17 @@ export class ImageManager {
              storagePath,
              plugins.smartstream.SmartDuplex.fromWebReadableStream(smartWebDuplex.readable),
            );
+            refImage.data.versions = refImage.data.versions.map((versionArg) => {
+              if (versionArg.versionString !== imageVersion) {
+                return versionArg;
+              }
+              return {
+                ...versionArg,
+                size: archiveSize,
+                digest: `sha256:${archiveHash.digest('hex')}`,
+              };
+            });
+            await refImage.save();
          })().catch((error) => {
            console.error(`failed to store image ${refImage.id}:${imageVersion}`, error);
          });
@@ -198,4 +212,35 @@ export class ImageManager {
      bucketDir: this.imageDir,
    });
  }
+
+  public async deleteImageIfUnreferenced(imageIdArg: string, ownerServiceIdArg?: string): Promise<boolean> {
+    if (!imageIdArg) return false;
+
+    const referencingServices = await this.cloudlyRef.serviceManager.CService.getInstances({});
+    const referencedByOtherService = referencingServices.some((serviceArg) => {
+      return serviceArg.id !== ownerServiceIdArg && serviceArg.data?.imageId === imageIdArg;
+    });
+    if (referencedByOtherService) return false;
+
+    const image = await this.CImage.getInstance({
+      id: imageIdArg,
+    }).catch(() => null);
+    if (!image) return false;
+
+    for (const version of image.data.versions || []) {
+      const storagePath = version.storagePath || await image.getStoragePath(version.versionString);
+      if (!storagePath || !this.imageDir) continue;
+      await this.imageDir.fastRemove({
+        path: `${storagePath}.tar`,
+      }).catch((errorArg) => {
+        const message = (errorArg as Error).message.toLowerCase();
+        if (!message.includes('not found') && !message.includes('no such')) {
+          throw errorArg;
+        }
+      });
+    }
+
+    await image.delete();
+    return true;
+  }
 }
@@ -9,6 +9,18 @@ type TAuthenticatedRegistryUser = {
  canWrite: boolean;
 };

+type TOciTags = Record<string, string>;
+
+interface IOciDescriptor {
+  digest?: unknown;
+}
+
+interface IOciManifestDocument {
+  config?: IOciDescriptor;
+  layers?: IOciDescriptor[];
+  manifests?: IOciDescriptor[];
+}
+
 export class CloudlyRegistryManager {
  private cloudlyRef: Cloudly;
  private smartRegistry!: plugins.smartregistry.SmartRegistry;
@@ -123,6 +135,214 @@ export class CloudlyRegistryManager {
    };
  }

+  public async deleteServiceRepository(serviceArg: Service): Promise<void> {
+    const repository = serviceArg.data.registryTarget?.repository;
+    if (!repository) return;
+
+    const services = await this.cloudlyRef.serviceManager.CService.getInstances({});
+    const referencedByOtherService = services.some((candidateArg) => {
+      return candidateArg.id !== serviceArg.id && candidateArg.data.registryTarget?.repository === repository;
+    });
+    if (referencedByOtherService) return;
+
+    await this.deleteOciRepository(repository);
+    for (const tagKey of Array.from(this.recordedTagDigests.keys())) {
+      if (tagKey.startsWith(`${repository}:`)) {
+        this.recordedTagDigests.delete(tagKey);
+      }
+    }
+  }
+
+  private getRegistryStorage(): any {
+    if (!this.started || !this.smartRegistry) {
+      throw new Error('Cloudly registry is not started');
+    }
+    return this.smartRegistry.getStorage();
+  }
+
+  private getOciTagsPath(repositoryArg: string): string {
+    return `oci/tags/${repositoryArg}/tags.json`;
+  }
+
+  private normalizeOciDigest(digestArg: string | null | undefined): string | null {
+    if (typeof digestArg !== 'string') return null;
+    const normalizedDigest = digestArg.trim().toLowerCase();
+    return /^sha256:[a-f0-9]{64}$/.test(normalizedDigest) ? normalizedDigest : null;
+  }
+
+  private getSha256HashFromDigest(digestArg: string): string {
+    const normalizedDigest = this.normalizeOciDigest(digestArg);
+    if (!normalizedDigest) {
+      throw new Error(`Invalid OCI digest: ${digestArg}`);
+    }
+    return normalizedDigest.slice('sha256:'.length);
+  }
+
+  private getOciManifestPath(repositoryArg: string, digestArg: string): string {
+    return `oci/manifests/${repositoryArg}/${this.getSha256HashFromDigest(digestArg)}`;
+  }
+
+  private getOciBlobPath(digestArg: string): string {
+    return `oci/blobs/sha256/${this.getSha256HashFromDigest(digestArg)}`;
+  }
+
+  private async readOciTags(repositoryArg: string, storageArg = this.getRegistryStorage()): Promise<TOciTags> {
+    const tagsBuffer = await storageArg.getObject(this.getOciTagsPath(repositoryArg));
+    if (!tagsBuffer) return {};
+
+    const parsedTags = JSON.parse(tagsBuffer.toString('utf8'));
+    if (!parsedTags || typeof parsedTags !== 'object' || Array.isArray(parsedTags)) {
+      throw new Error(`Invalid OCI tags document for ${repositoryArg}`);
+    }
+
+    const tags: TOciTags = {};
+    for (const [tagName, digestValue] of Object.entries(parsedTags)) {
+      const digest = typeof digestValue === 'string' ? this.normalizeOciDigest(digestValue) : null;
+      if (!digest) {
+        throw new Error(`Invalid OCI digest for ${repositoryArg}:${tagName}`);
+      }
+      tags[tagName] = digest;
+    }
+    return tags;
+  }
+
+  private async readOciManifest(
+    storageArg: any,
+    repositoryArg: string,
+    digestArg: string,
+  ): Promise<IOciManifestDocument | null> {
+    const manifestBuffer = await storageArg.getOciManifest(repositoryArg, digestArg);
+    if (!manifestBuffer) return null;
+    try {
+      const manifest = JSON.parse(manifestBuffer.toString('utf8'));
+      return manifest && typeof manifest === 'object' ? manifest : null;
+    } catch (error) {
+      logger.log('warn', `failed to parse OCI manifest ${repositoryArg}@${digestArg}: ${(error as Error).message}`);
+      return null;
+    }
+  }
+
+  private getDescriptorDigest(descriptorArg: IOciDescriptor | undefined): string | null {
+    return typeof descriptorArg?.digest === 'string' ? this.normalizeOciDigest(descriptorArg.digest) : null;
+  }
+
+  private collectOciManifestReferences(manifestArg: IOciManifestDocument): {
+    blobDigests: string[];
+    manifestDigests: string[];
+  } {
+    const blobDigests = [
+      this.getDescriptorDigest(manifestArg.config),
+      ...(manifestArg.layers || []).map((descriptorArg) => this.getDescriptorDigest(descriptorArg)),
+    ].filter((digestArg): digestArg is string => Boolean(digestArg));
+
+    const manifestDigests = (manifestArg.manifests || [])
+      .map((descriptorArg) => this.getDescriptorDigest(descriptorArg))
+      .filter((digestArg): digestArg is string => Boolean(digestArg));
+
+    return { blobDigests, manifestDigests };
+  }
+
+  private async collectReferencedOciObjects(
+    storageArg: any,
+    repositoryArg: string,
+    rootDigestsArg: string[],
+  ): Promise<{ manifestDigests: Set<string>; blobDigests: Set<string> }> {
+    const manifestDigests = new Set<string>();
+    const blobDigests = new Set<string>();
+    const pendingManifestDigests = rootDigestsArg
+      .map((digestArg) => this.normalizeOciDigest(digestArg))
+      .filter((digestArg): digestArg is string => Boolean(digestArg));
+
+    while (pendingManifestDigests.length > 0) {
+      const manifestDigest = pendingManifestDigests.shift()!;
+      if (manifestDigests.has(manifestDigest)) continue;
+      manifestDigests.add(manifestDigest);
+
+      const manifest = await this.readOciManifest(storageArg, repositoryArg, manifestDigest);
+      if (!manifest) continue;
+      const references = this.collectOciManifestReferences(manifest);
+      for (const blobDigest of references.blobDigests) {
+        blobDigests.add(blobDigest);
+      }
+      for (const childManifestDigest of references.manifestDigests) {
+        if (!manifestDigests.has(childManifestDigest)) {
+          pendingManifestDigests.push(childManifestDigest);
+        }
+      }
+    }
+
+    return { manifestDigests, blobDigests };
+  }
+
+  private async listRepositoryManifestDigests(storageArg: any, repositoryArg: string): Promise<string[]> {
+    const manifestPrefix = `oci/manifests/${repositoryArg}/`;
+    const paths = await storageArg.listObjects(manifestPrefix);
+    return paths
+      .filter((pathArg: string) => !pathArg.endsWith('.type'))
+      .map((pathArg: string) => pathArg.slice(manifestPrefix.length))
+      .filter((hashArg: string) => /^[a-f0-9]{64}$/.test(hashArg))
+      .map((hashArg: string) => `sha256:${hashArg}`);
+  }
+
+  private async collectAllTaggedOciObjectsExceptRepository(storageArg: any, repositoryArg: string) {
+    const protectedObjects = {
+      manifestDigests: new Set<string>(),
+      blobDigests: new Set<string>(),
+    };
+    const tagPaths = await storageArg.listObjects('oci/tags/');
+    for (const tagPath of tagPaths) {
+      const match = tagPath.match(/^oci\/tags\/(.+)\/tags\.json$/);
+      if (!match || match[1] === repositoryArg) continue;
+      const tags = await this.readOciTags(match[1], storageArg);
+      const references = await this.collectReferencedOciObjects(storageArg, match[1], Object.values(tags));
+      for (const digest of references.manifestDigests) {
+        protectedObjects.manifestDigests.add(digest);
+      }
+      for (const digest of references.blobDigests) {
+        protectedObjects.blobDigests.add(digest);
+      }
+    }
+    return protectedObjects;
+  }
+
+  private async deleteObjectIfExists(storageArg: any, pathArg: string): Promise<void> {
+    if (typeof storageArg.objectExists === 'function' && !(await storageArg.objectExists(pathArg))) {
+      return;
+    }
+    await storageArg.deleteObject(pathArg);
+  }
+
+  private async deleteOciRepository(repositoryArg: string): Promise<void> {
+    const storage = this.getRegistryStorage();
+    const tags = await this.readOciTags(repositoryArg, storage);
+    const repositoryManifestDigests = await this.listRepositoryManifestDigests(storage, repositoryArg);
+    const rootDigests = Array.from(new Set([...Object.values(tags), ...repositoryManifestDigests]));
+    if (rootDigests.length === 0) {
+      await this.deleteObjectIfExists(storage, this.getOciTagsPath(repositoryArg));
+      return;
+    }
+
+    const targetObjects = await this.collectReferencedOciObjects(storage, repositoryArg, rootDigests);
+    const protectedObjects = await this.collectAllTaggedOciObjectsExceptRepository(storage, repositoryArg);
+
+    for (const blobDigest of targetObjects.blobDigests) {
+      if (!protectedObjects.blobDigests.has(blobDigest)) {
+        await this.deleteObjectIfExists(storage, this.getOciBlobPath(blobDigest));
+      }
+    }
+
+    for (const manifestDigest of targetObjects.manifestDigests) {
+      if (!protectedObjects.manifestDigests.has(manifestDigest)) {
+        const manifestPath = this.getOciManifestPath(repositoryArg, manifestDigest);
+        await this.deleteObjectIfExists(storage, manifestPath);
+        await this.deleteObjectIfExists(storage, `${manifestPath}.type`);
+      }
+    }
+
+    await this.deleteObjectIfExists(storage, this.getOciTagsPath(repositoryArg));
+    logger.log('info', `deleted Cloudly registry repository ${repositoryArg}`);
+  }
+
  private async handleRegistryStorageAfterPut(
    contextArg: plugins.smartregistry.IStorageHookContext,
  ) {
@@ -2,6 +2,20 @@ import type { Cloudly } from '../classes.cloudly.js';
 import * as plugins from '../plugins.js';
 import { Service } from './classes.service.js';

+type TServiceWithDomains = Service & {
+  data: Service['data'] & {
+    appTemplateId?: string;
+    domains?: Array<{ name?: string }>;
+  };
+};
+
+interface IWorkAppRouteSyncResult {
+  success: boolean;
+  action?: 'created' | 'updated' | 'deleted' | 'unchanged';
+  routeId?: string;
+  message?: string;
+}
+
 export class ServiceManager {
  public typedrouter = new plugins.typedrequest.TypedRouter();
  public cloudlyRef: Cloudly;
@@ -145,14 +159,7 @@ export class ServiceManager {
          await plugins.smartguard.passGuardsOrReject(dataArg, [
            this.cloudlyRef.authManager.adminIdentityGuard,
          ]);
-          const service = await Service.getInstance({
-            id: dataArg.serviceId,
-          });
-          
-          // Remove DNS entries before deleting the service
-          await service.removeDnsEntries();
-          
-          await service.delete();
+          await this.deleteServiceById(dataArg.serviceId);
          return {
            success: true,
          };
@@ -170,4 +177,149 @@ export class ServiceManager {
    // Cleanup if needed
    console.log('ServiceManager stopped');
  }
+
+  public async deleteServiceById(serviceIdArg: string): Promise<void> {
+    const service = await this.CService.getInstance({
+      id: serviceIdArg,
+    });
+    if (!service) {
+      throw new plugins.typedrequest.TypedResponseError(`Service not found: ${serviceIdArg}`);
+    }
+
+    await this.deleteExternalGatewayRoutes(service as TServiceWithDomains);
+    this.cloudlyRef.appStoreManager?.clearOperationsForService?.(service.id);
+    await this.deleteDeploymentsForService(service.id);
+    await service.removeDnsEntries();
+    await this.deletePlatformBindingsForService(service.id, service.data.name);
+    await this.cloudlyRef.backupManager?.deleteBackupsForService?.(service.id);
+    await this.cloudlyRef.registryManager?.deleteServiceRepository?.(service);
+    await this.deleteServiceOwnedSecretBundles(service);
+    await this.deleteServiceOwnedImage(service as TServiceWithDomains);
+    await service.delete();
+    await this.cloudlyRef.coreflowManager.pushClusterConfigToConnectedCoreflows();
+  }
+
+  private async deleteDeploymentsForService(serviceIdArg: string): Promise<void> {
+    const deployments = await this.cloudlyRef.deploymentManager.CDeployment.getInstances({
+      serviceId: serviceIdArg,
+    });
+    for (const deployment of deployments) {
+      await deployment.delete();
+    }
+  }
+
+  private async deletePlatformBindingsForService(
+    serviceIdArg: string,
+    serviceNameArg: string,
+  ): Promise<void> {
+    const bindingsById = await this.cloudlyRef.platformManager.CPlatformBinding.getInstances({
+      serviceId: serviceIdArg,
+    });
+    const bindingsByName = serviceNameArg
+      ? await this.cloudlyRef.platformManager.CPlatformBinding.getInstances({ serviceId: serviceNameArg })
+      : [];
+    const bindings = new Map<string, typeof bindingsById[number]>();
+    for (const binding of [...bindingsById, ...bindingsByName]) {
+      bindings.set(binding.id, binding);
+    }
+    for (const binding of bindings.values()) {
+      await binding.delete();
+    }
+  }
+
+  private async deleteServiceOwnedSecretBundles(serviceArg: Service): Promise<void> {
+    const secretBundleIds = [serviceArg.data.secretBundleId]
+      .filter((secretBundleIdArg): secretBundleIdArg is string => Boolean(secretBundleIdArg));
+    if (secretBundleIds.length === 0) return;
+
+    for (const secretBundleId of secretBundleIds) {
+      const secretBundle = await this.cloudlyRef.secretManager.CSecretBundle.getInstance({
+        id: secretBundleId,
+      }).catch(() => null);
+      if (!secretBundle || (secretBundle.data as { serviceId?: string }).serviceId !== serviceArg.id) {
+        continue;
+      }
+
+      const secretGroupIds = [...(secretBundle.data.includedSecretGroupIds || [])];
+      await secretBundle.delete();
+      await this.deleteUnreferencedSecretGroups(secretGroupIds);
+    }
+  }
+
+  private async deleteUnreferencedSecretGroups(secretGroupIdsArg: string[]): Promise<void> {
+    if (secretGroupIdsArg.length === 0) return;
+    const remainingBundles = await this.cloudlyRef.secretManager.CSecretBundle.getInstances({});
+    for (const secretGroupId of secretGroupIdsArg) {
+      const stillReferenced = remainingBundles.some((bundleArg) => {
+        return (bundleArg.data.includedSecretGroupIds || []).includes(secretGroupId);
+      });
+      if (stillReferenced) continue;
+      const secretGroup = await this.cloudlyRef.secretManager.CSecretGroup.getInstance({
+        id: secretGroupId,
+      }).catch(() => null);
+      if (secretGroup) {
+        await secretGroup.delete();
+      }
+    }
+  }
+
+  private async deleteServiceOwnedImage(serviceArg: TServiceWithDomains): Promise<void> {
+    if (!serviceArg.data.appTemplateId || !serviceArg.data.imageId) return;
+    await this.cloudlyRef.imageManager.deleteImageIfUnreferenced(serviceArg.data.imageId, serviceArg.id);
+  }
+
+  private async deleteExternalGatewayRoutes(serviceArg: TServiceWithDomains): Promise<void> {
+    const domains = (serviceArg.data.domains || [])
+      .map((domainArg) => domainArg.name?.trim().toLowerCase())
+      .filter((domainArg): domainArg is string => Boolean(domainArg));
+    if (domains.length === 0) return;
+
+    const settings = await this.cloudlyRef.settingsManager.getSettings().catch(() => undefined);
+    if (!settings?.dcrouterGatewayUrl || !settings.dcrouterGatewayApiToken) return;
+
+    const clusters = await this.cloudlyRef.clusterManager.getAllClusters().catch(() => []);
+    const workHosterIds = new Set<string>();
+    if (settings.dcrouterWorkHosterId) {
+      workHosterIds.add(settings.dcrouterWorkHosterId);
+    } else {
+      for (const cluster of clusters) {
+        workHosterIds.add(cluster.id);
+      }
+    }
+    if (workHosterIds.size === 0) return;
+
+    for (const domain of domains) {
+      for (const workHosterId of workHosterIds) {
+        const result = await this.fireDcRouterRequest<IWorkAppRouteSyncResult>(
+          settings.dcrouterGatewayUrl,
+          'syncWorkAppRoute',
+          {
+            apiToken: settings.dcrouterGatewayApiToken,
+            ownership: {
+              workHosterType: 'cloudly',
+              workHosterId,
+              workAppId: serviceArg.id || serviceArg.data.name,
+              hostname: domain,
+            },
+            delete: true,
+          },
+        );
+        if (!result.success) {
+          throw new Error(result.message || `dcrouter route delete failed for ${domain}`);
+        }
+      }
+    }
+  }
+
+  private async fireDcRouterRequest<TResponse>(
+    gatewayUrlArg: string,
+    methodArg: string,
+    requestDataArg: Record<string, unknown>,
+  ): Promise<TResponse> {
+    const typedRequest = new plugins.typedrequest.TypedRequest<any>(
+      `${gatewayUrlArg.replace(/\/+$/, '')}/typedrequest`,
+      methodArg,
+    );
+    return await typedRequest.fire(requestDataArg) as TResponse;
+  }
 }
@@ -8,9 +8,10 @@ export { path, crypto, stream, fsPromises };

 // @apiglobal scope
 import * as typedrequest from '@api.global/typedrequest';
+import * as typedrequestInterfaces from '@api.global/typedrequest-interfaces';
 import * as typedsocket from '@api.global/typedsocket';

-export { typedrequest, typedsocket };
+export { typedrequest, typedrequestInterfaces, typedsocket };

 // @apiclient.xyz scope
 import * as cloudflare from '@apiclient.xyz/cloudflare';
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/cloudly',
-  version: '6.0.0',
+  version: '6.4.3',
  description: 'A comprehensive tool for managing containerized applications across multiple cloud providers using Docker Swarmkit, featuring web, CLI, and API interfaces.'
 }
@@ -21,7 +21,7 @@ export interface IDataState {
  secretBundles?: plugins.interfaces.data.ISecretBundle[];
  clusters?: plugins.interfaces.data.ICluster[];
  externalRegistries?: plugins.interfaces.data.IExternalRegistry[];
-  images?: any[];
+  images?: plugins.interfaces.data.IImage[];
  services?: plugins.interfaces.data.IService[];
  deployments?: plugins.interfaces.data.IDeployment[];
  domains?: plugins.interfaces.data.IDomain[];
@@ -35,6 +35,70 @@ export interface IDataState {
  backups?: any[];
 }

+export type TAppStoreUpgradeStatus = 'running' | 'success' | 'failed';
+export type TAppStoreUpgradeStep =
+  | 'queued'
+  | 'validating'
+  | 'migration'
+  | 'applying'
+  | 'updating-service'
+  | 'pushing-config'
+  | 'complete'
+  | 'failed';
+
+export interface IAppStoreUpgradeChange {
+  field: string;
+  currentValue: string;
+  targetValue: string;
+}
+
+export interface IAppStoreUpgradePreview {
+  serviceId: string;
+  serviceName: string;
+  appTemplateId: string;
+  fromVersion: string;
+  targetVersion: string;
+  resolvedTargetVersion: string;
+  hasMigration: boolean;
+  requiresManualReview: boolean;
+  changes: IAppStoreUpgradeChange[];
+  warnings: string[];
+  blockers: string[];
+  config: plugins.interfaces.appstore.IAppStoreVersionConfig;
+  appMeta: plugins.interfaces.appstore.IAppStoreAppMeta;
+}
+
+export interface IAppStoreUpgradeOperation {
+  id: string;
+  serviceId: string;
+  serviceName: string;
+  appTemplateId: string;
+  fromVersion: string;
+  targetVersion: string;
+  status: TAppStoreUpgradeStatus;
+  step: TAppStoreUpgradeStep;
+  progressLines: string[];
+  warnings: string[];
+  error?: string;
+  startedAt: number;
+  updatedAt: number;
+  completedAt?: number;
+  service?: plugins.interfaces.data.IService;
+}
+
+export interface IAppStoreState {
+  apps: plugins.interfaces.appstore.IAppStoreApp[];
+  upgradeableServices: Array<plugins.interfaces.appstore.IUpgradeableAppStoreService & { serviceId?: string }>;
+  upgradeOperations: IAppStoreUpgradeOperation[];
+}
+
+export interface IHostedRuntimeState {
+  isHosted: boolean;
+  loading: boolean;
+  unavailableReason?: string;
+  upgradeState: plugins.interfaces.data.IHostedAppUpgradeState | null;
+}
+
 const emptyDataState: IDataState = {
  secretGroups: [],
  secretBundles: [],
@@ -54,6 +118,18 @@ const emptyDataState: IDataState = {
  backups: [],
 };

+const emptyAppStoreState: IAppStoreState = {
+  apps: [],
+  upgradeableServices: [],
+  upgradeOperations: [],
+};
+
+const emptyHostedRuntimeState: IHostedRuntimeState = {
+  isHosted: false,
+  loading: false,
+  upgradeState: null,
+};
+
 interface IReq_AdminValidateIdentity {
  method: 'adminValidateIdentity';
  request: {
@@ -119,6 +195,9 @@ export const logoutAction = loginStatePart.createAction(async (statePartArg) =>
  try {
    apiClient.identity = null;
    dataState.setState({ ...emptyDataState });
+    appStoreStatePart.setState({ ...emptyAppStoreState });
+    hostedRuntimeStatePart.setState({ ...emptyHostedRuntimeState });
+    clearHostedRuntimeUpgradePoll();
  } catch {}
  return {
    ...currentState,
@@ -132,6 +211,18 @@ export const dataState = await appstate.getStatePart<IDataState>(
  'soft'
 );

+export const appStoreStatePart = await appstate.getStatePart<IAppStoreState>(
+  'appstore',
+  { ...emptyAppStoreState },
+  'soft',
+);
+
+export const hostedRuntimeStatePart = await appstate.getStatePart<IHostedRuntimeState>(
+  'hostedRuntime',
+  { ...emptyHostedRuntimeState },
+  'soft',
+);
+
 // Shared API client instance (used by UI actions)
 type TCloudlyApiClientWithNullableIdentity = Omit<plugins.servezoneApi.CloudlyApiClient, 'identity'> & {
  identity: plugins.interfaces.data.IIdentity | null;
@@ -142,6 +233,54 @@ export const apiClient = new plugins.servezoneApi.CloudlyApiClient({
  cloudlyUrl: (typeof window !== 'undefined' && window.location?.origin) ? window.location.origin : undefined,
 }) as TCloudlyApiClientWithNullableIdentity;

+const upsertUpgradeOperation = (
+  operationsArg: IAppStoreUpgradeOperation[],
+  operationArg: IAppStoreUpgradeOperation,
+) => {
+  const operations = operationsArg.filter((existingOperation) => existingOperation.id !== operationArg.id);
+  operations.unshift(operationArg);
+  return operations.slice(0, 25);
+};
+
+const upsertService = (
+  servicesArg: plugins.interfaces.data.IService[] = [],
+  serviceArg: plugins.interfaces.data.IService,
+) => {
+  const services = servicesArg.filter((existingService) => existingService.id !== serviceArg.id);
+  services.unshift(serviceArg);
+  return services;
+};
+
+apiClient.typedrouter.addTypedHandler(
+  new plugins.typedrequest.TypedHandler<any>(
+    'pushAppStoreUpgradeProgress',
+    async (dataArg: { operation: IAppStoreUpgradeOperation }) => {
+      const appStoreState = appStoreStatePart.getState() || {
+        apps: [],
+        upgradeableServices: [],
+        upgradeOperations: [],
+      };
+      appStoreStatePart.setState({
+        ...appStoreState,
+        upgradeOperations: upsertUpgradeOperation(appStoreState.upgradeOperations, dataArg.operation),
+        upgradeableServices: dataArg.operation.status === 'success'
+          ? appStoreState.upgradeableServices.filter((serviceArg) => {
+              return serviceArg.serviceId !== dataArg.operation.serviceId && serviceArg.serviceName !== dataArg.operation.serviceName;
+            })
+          : appStoreState.upgradeableServices,
+      });
+      if (dataArg.operation.service) {
+        const currentDataState = dataState.getState() || {};
+        dataState.setState({
+          ...currentDataState,
+          services: upsertService(currentDataState.services, dataArg.operation.service),
+        });
+      }
+      return {};
+    },
+  ),
+);
+
 let identityExpiryTimer: number | undefined;
 let identityInvalidationRunning = false;

@@ -184,6 +323,9 @@ export const invalidateIdentity = async (reasonArg = 'identity is not valid'): P
      identity: null,
    });
    dataState.setState({ ...emptyDataState });
+    appStoreStatePart.setState({ ...emptyAppStoreState });
+    hostedRuntimeStatePart.setState({ ...emptyHostedRuntimeState });
+    clearHostedRuntimeUpgradePoll();
  } finally {
    identityInvalidationRunning = false;
  }
@@ -737,3 +879,198 @@ export const addClusterAction = dataState.createAction(
    return await context.dispatch(getAllDataAction, null);
  }
 );
+
+const getIdentityForRequest = () => {
+  const identity = loginStatePart.getState()?.identity ?? null;
+  if (!identity) {
+    throw new Error('No Cloudly identity is available');
+  }
+  return identity;
+};
+
+let hostedRuntimePollTimer: number | undefined;
+
+function clearHostedRuntimeUpgradePoll() {
+  if (hostedRuntimePollTimer) {
+    window.clearTimeout(hostedRuntimePollTimer);
+    hostedRuntimePollTimer = undefined;
+  }
+}
+
+const scheduleHostedRuntimeUpgradePoll = (stateArg: IHostedRuntimeState) => {
+  clearHostedRuntimeUpgradePoll();
+  if (stateArg.upgradeState?.status !== 'running') {
+    return;
+  }
+  hostedRuntimePollTimer = window.setTimeout(() => {
+    void hostedRuntimeStatePart.dispatchAction(fetchHostedRuntimeUpgradeStatusAction, null);
+  }, 5000);
+};
+
+export const fetchHostedRuntimeUpgradeStatusAction = hostedRuntimeStatePart.createAction(
+  async (statePartArg) => {
+    const currentState = statePartArg.getState() || { ...emptyHostedRuntimeState };
+    statePartArg.setState({ ...currentState, loading: true });
+    try {
+      const request = new plugins.typedrequest.TypedRequest<plugins.interfaces.requests.hostedapp.IReq_Admin_GetHostedAppParentUpgradeStatus>(
+        '/typedrequest',
+        'getHostedAppParentUpgradeStatus',
+      );
+      const response = await request.fire({ identity: getIdentityForRequest() });
+      const nextState: IHostedRuntimeState = {
+        isHosted: response.isHosted,
+        loading: false,
+        unavailableReason: response.unavailableReason,
+        upgradeState: response.upgradeState,
+      };
+      scheduleHostedRuntimeUpgradePoll(nextState);
+      return nextState;
+    } catch (error) {
+      const nextState: IHostedRuntimeState = {
+        ...currentState,
+        loading: false,
+        unavailableReason: getErrorText(error) || 'Could not load hosted runtime status.',
+      };
+      scheduleHostedRuntimeUpgradePoll(nextState);
+      return nextState;
+    }
+  },
+);
+
+export const startHostedRuntimeParentUpgradeAction = hostedRuntimeStatePart.createAction<{
+  targetVersion?: string;
+} | null>(
+  async (statePartArg, payloadArg) => {
+    const currentState = statePartArg.getState() || { ...emptyHostedRuntimeState };
+    statePartArg.setState({ ...currentState, loading: true });
+    try {
+      const request = new plugins.typedrequest.TypedRequest<plugins.interfaces.requests.hostedapp.IReq_Admin_StartHostedAppParentUpgrade>(
+        '/typedrequest',
+        'startHostedAppParentUpgrade',
+      );
+      const response = await request.fire({
+        identity: getIdentityForRequest(),
+        targetVersion: payloadArg?.targetVersion,
+      });
+      const nextState: IHostedRuntimeState = {
+        isHosted: response.isHosted,
+        loading: false,
+        unavailableReason: response.unavailableReason,
+        upgradeState: response.upgradeState,
+      };
+      scheduleHostedRuntimeUpgradePoll(nextState);
+      return nextState;
+    } catch (error) {
+      const nextState: IHostedRuntimeState = {
+        ...currentState,
+        loading: false,
+        unavailableReason: getErrorText(error) || 'Could not start hosted runtime upgrade.',
+      };
+      statePartArg.setState(nextState);
+      scheduleHostedRuntimeUpgradePoll(nextState);
+      throw error;
+    }
+  },
+);
+
+export const fetchAppStoreTemplatesAction = appStoreStatePart.createAction(
+  async (statePartArg) => {
+    const request = new plugins.typedrequest.TypedRequest<any>('/typedrequest', 'getAppStoreTemplates');
+    const response = await request.fire({ identity: getIdentityForRequest() });
+    if (!response?.apps) {
+      throw new Error('The App Store returned an empty template response. Please retry.');
+    }
+    return {
+      ...(statePartArg.getState() || { apps: [], upgradeableServices: [], upgradeOperations: [] }),
+      apps: response.apps,
+    };
+  },
+);
+
+export const fetchUpgradeableAppStoreServicesAction = appStoreStatePart.createAction(
+  async (statePartArg) => {
+    const request = new plugins.typedrequest.TypedRequest<any>('/typedrequest', 'getUpgradeableAppStoreServices');
+    const response = await request.fire({ identity: getIdentityForRequest() });
+    if (!response?.services) {
+      throw new Error('The App Store returned an empty upgradeable-services response. Please retry.');
+    }
+    return {
+      ...(statePartArg.getState() || { apps: [], upgradeableServices: [], upgradeOperations: [] }),
+      upgradeableServices: response.services,
+    };
+  },
+);
+
+export const fetchAppStoreUpgradeOperationsAction = appStoreStatePart.createAction(
+  async (statePartArg) => {
+    const request = new plugins.typedrequest.TypedRequest<any>('/typedrequest', 'getAppStoreUpgradeOperations');
+    const response = await request.fire({ identity: getIdentityForRequest() });
+    if (!response?.operations) {
+      throw new Error('The App Store returned an empty upgrade-operations response. Please retry.');
+    }
+    return {
+      ...(statePartArg.getState() || { apps: [], upgradeableServices: [], upgradeOperations: [] }),
+      upgradeOperations: response.operations,
+    };
+  },
+);
+
+export const startAppStoreServiceUpgradeAction = appStoreStatePart.createAction<{
+  serviceId: string;
+  targetVersion: string;
+}>(
+  async (statePartArg, payloadArg) => {
+    const request = new plugins.typedrequest.TypedRequest<any>('/typedrequest', 'startAppStoreServiceUpgrade');
+    const response = await request.fire({
+      identity: getIdentityForRequest(),
+      serviceId: payloadArg.serviceId,
+      targetVersion: payloadArg.targetVersion,
+    });
+    const currentState = statePartArg.getState() || { apps: [], upgradeableServices: [], upgradeOperations: [] };
+    return {
+      ...currentState,
+      upgradeOperations: upsertUpgradeOperation(currentState.upgradeOperations, response.operation),
+    };
+  },
+);
+
+export const getAppStoreConfig = async (appIdArg: string, versionArg: string) => {
+  const request = new plugins.typedrequest.TypedRequest<any>('/typedrequest', 'getAppStoreConfig');
+  const response = await request.fire({
+    identity: getIdentityForRequest(),
+    appId: appIdArg,
+    version: versionArg,
+  }) as {
+    config: plugins.interfaces.appstore.IAppStoreVersionConfig;
+    appMeta: plugins.interfaces.appstore.IAppStoreAppMeta;
+  };
+  if (!response?.config || !response?.appMeta) {
+    throw new Error('The App Store returned an empty config response. Please retry.');
+  }
+  return response;
+};
+
+export const getAppStoreUpgradePreview = async (serviceIdArg: string, targetVersionArg?: string) => {
+  const request = new plugins.typedrequest.TypedRequest<any>('/typedrequest', 'getAppStoreUpgradePreview');
+  const response = await request.fire({
+    identity: getIdentityForRequest(),
+    serviceId: serviceIdArg,
+    targetVersion: targetVersionArg,
+  });
+  if (!response?.preview) {
+    throw new Error('The App Store returned an empty upgrade preview response. Please retry.');
+  }
+  return response.preview as IAppStoreUpgradePreview;
+};
+
+export const installAppStoreApp = async (installArg: plugins.interfaces.appstore.IAppStoreInstallRequest) => {
+  const request = new plugins.typedrequest.TypedRequest<any>('/typedrequest', 'installAppStoreApp');
+  const response = await request.fire({
+    identity: getIdentityForRequest(),
+    install: installArg,
+  });
+  if (!response?.service) {
+    throw new Error('The App Store returned an empty install response. Please retry.');
+  }
+  return response.service as plugins.interfaces.data.IService;
+};
@@ -19,6 +19,7 @@ import { CloudlyViewDbs } from './views/dbs/index.js';
 import { CloudlyViewDeployments } from './views/deployments/index.js';
 import { CloudlyViewDns } from './views/dns/index.js';
 import { CloudlyViewDomains } from './views/domains/index.js';
+import { CloudlyViewAppStore } from './views/appstore/index.js';
 import { CloudlyViewImages } from './views/images/index.js';
 import { CloudlyViewLogs } from './views/logs/index.js';
 import { CloudlyViewMails } from './views/mails/index.js';
@@ -79,6 +80,7 @@ export class CloudlyDashboard extends DeesElement {
      iconName: 'lucide:Network',
      subViews: [
        { slug: 'clusters', name: 'Clusters', iconName: 'lucide:Network', element: CloudlyViewClusters },
+        { slug: 'appstore', name: 'App Store', iconName: 'lucide:Store', element: CloudlyViewAppStore },
        { slug: 'services', name: 'Services', iconName: 'lucide:Layers', element: CloudlyViewServices },
        { slug: 'images', name: 'Images', iconName: 'lucide:Image', element: CloudlyViewImages },
        { slug: 'deployments', name: 'Deployments', iconName: 'lucide:Rocket', element: CloudlyViewDeployments },
@@ -0,0 +1,427 @@
+import * as plugins from '../../../plugins.js';
+import * as shared from '../../shared/index.js';
+import * as appstate from '../../../appstate.js';
+import { appRouter } from '../../../router.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+type TEditableEnvVar = {
+  key: string;
+  value: string;
+  description: string;
+  required?: boolean;
+  platformInjected?: boolean;
+};
+
+@customElement('cloudly-view-appstore')
+export class CloudlyViewAppStore extends DeesElement {
+  @state()
+  private accessor appStoreState: appstate.IAppStoreState = {
+    apps: [],
+    upgradeableServices: [],
+    upgradeOperations: [],
+  };
+
+  @state()
+  private accessor currentView: 'grid' | 'detail' = 'grid';
+
+  @state()
+  private accessor selectedApp: plugins.interfaces.appstore.IAppStoreApp | null = null;
+
+  @state()
+  private accessor selectedAppMeta: plugins.interfaces.appstore.IAppStoreAppMeta | null = null;
+
+  @state()
+  private accessor selectedAppConfig: plugins.interfaces.appstore.IAppStoreVersionConfig | null = null;
+
+  @state()
+  private accessor configLoadError = '';
+
+  @state()
+  private accessor selectedVersion = '';
+
+  @state()
+  private accessor editableEnvVars: TEditableEnvVar[] = [];
+
+  @state()
+  private accessor serviceName = '';
+
+  @state()
+  private accessor serviceDomain = '';
+
+  @state()
+  private accessor deployMode = false;
+
+  @state()
+  private accessor loading = false;
+
+  private configRequestToken = 0;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+    css`
+      .card { background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 9px; padding: 16px; margin-bottom: 14px; }
+      .header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
+      .title { margin: 0; color: var(--ci-shade-7, #e4e4e7); font-size: 24px; font-weight: 700; }
+      .subtitle { margin-top: 6px; color: var(--ci-shade-4, #71717a); font-size: 14px; line-height: 1.5; }
+      .section-title { color: var(--ci-shade-7, #e4e4e7); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
+      .badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: rgba(59, 130, 246, 0.16); color: #60a5fa; font-size: 12px; margin: 0 6px 6px 0; }
+      .button { border: 1px solid var(--ci-shade-2, #27272a); border-radius: 7px; padding: 9px 13px; font-size: 13px; cursor: pointer; background: var(--ci-shade-1, #09090b); color: var(--ci-shade-7, #e4e4e7); }
+      .button.primary { background: var(--ci-color-primary, #2563eb); border-color: var(--ci-color-primary, #2563eb); color: white; }
+      .button:disabled { opacity: 0.55; cursor: not-allowed; }
+      .actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
+      .field { display: grid; gap: 6px; margin-top: 12px; }
+      .field label { color: var(--ci-shade-5, #a1a1aa); font-size: 12px; font-weight: 600; }
+      input, select { width: 100%; box-sizing: border-box; background: var(--ci-shade-2, #27272a); border: 1px solid var(--ci-shade-3, #3f3f46); border-radius: 6px; padding: 9px 10px; color: var(--ci-shade-7, #e4e4e7); }
+      .env-table { width: 100%; border-collapse: collapse; }
+      .env-table th, .env-table td { text-align: left; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--ci-shade-2, #27272a); vertical-align: top; }
+      .env-key, .mono { font-family: monospace; color: var(--ci-shade-6, #d4d4d8); overflow-wrap: anywhere; }
+      .muted { color: var(--ci-shade-4, #71717a); font-size: 12px; }
+      .warning { margin-top: 10px; padding: 10px 12px; border-radius: 7px; background: rgba(245, 158, 11, 0.12); color: #fbbf24; font-size: 12px; }
+      .operation { display: grid; gap: 7px; }
+      .operation-log { max-height: 120px; overflow: auto; white-space: pre-wrap; font-family: monospace; font-size: 12px; color: var(--ci-shade-5, #a1a1aa); background: var(--ci-shade-0, #030305); border-radius: 6px; padding: 10px; }
+      @media (max-width: 760px) { .header { flex-direction: column; } .actions { flex-direction: column; align-items: stretch; } }
+    `,
+  ];
+
+  constructor() {
+    super();
+    const subscription = appstate.appStoreStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((stateArg) => {
+        this.appStoreState = stateArg;
+      });
+    this.rxSubscriptions.push(subscription);
+    const loginSubscription = appstate.loginStatePart
+      .select((stateArg) => stateArg.identity)
+      .subscribe((identityArg) => {
+        if (identityArg) {
+          void this.refreshAppStoreData();
+        }
+      });
+    this.rxSubscriptions.push(loginSubscription);
+  }
+
+  public async connectedCallback() {
+    super.connectedCallback();
+    await this.refreshAppStoreData();
+  }
+
+  private async refreshAppStoreData() {
+    if (!appstate.loginStatePart.getState()?.identity) {
+      return;
+    }
+    await Promise.allSettled([
+      appstate.appStoreStatePart.dispatchAction(appstate.fetchAppStoreTemplatesAction, null),
+      appstate.appStoreStatePart.dispatchAction(appstate.fetchUpgradeableAppStoreServicesAction, null),
+      appstate.appStoreStatePart.dispatchAction(appstate.fetchAppStoreUpgradeOperationsAction, null),
+    ]);
+  }
+
+  public render(): TemplateResult {
+    if (this.currentView === 'detail') {
+      return this.renderDetailView();
+    }
+    return this.renderGridView();
+  }
+
+  private renderGridView(): TemplateResult {
+    return html`
+      <cloudly-sectionheading>App Store</cloudly-sectionheading>
+      ${this.renderOperations()}
+      <dees-table
+        .heading1=${'App Store Apps'}
+        .heading2=${'Install workload services that follow a serve.zone App Store template'}
+        .data=${this.appStoreState.apps}
+        .displayFunction=${(appArg: plugins.interfaces.appstore.IAppStoreApp) => ({
+          Name: appArg.name,
+          Category: html`<span class="badge">${appArg.category}</span>`,
+          Version: appArg.latestVersion,
+          Source: appArg.source?.type || 'curated',
+          Tags: appArg.tags?.join(', ') || '-',
+        })}
+        .dataActions=${[
+          {
+            name: 'Details',
+            iconName: 'lucide:Eye',
+            type: ['contextmenu', 'inRow', 'doubleClick'],
+            actionFunc: async (actionDataArg: any) => this.openApp(actionDataArg.item, false),
+          },
+          {
+            name: 'Install',
+            iconName: 'lucide:Download',
+            type: ['contextmenu', 'inRow'],
+            actionFunc: async (actionDataArg: any) => this.openApp(actionDataArg.item, true),
+          },
+        ] as plugins.deesCatalog.ITableAction[]}
+      ></dees-table>
+    `;
+  }
+
+  private renderOperations(): TemplateResult | '' {
+    const operations = this.appStoreState.upgradeOperations
+      .slice(0, 3);
+    if (operations.length === 0) return '';
+    return html`
+      <div class="card">
+        <div class="section-title">Recent Upgrade Operations</div>
+        ${operations.map((operationArg) => html`
+          <div class="operation">
+            <div class="mono">${operationArg.serviceName}: ${operationArg.fromVersion} -> ${operationArg.targetVersion} (${operationArg.status}/${operationArg.step})</div>
+            <div class="operation-log">${operationArg.progressLines.slice(-6).join('\n')}</div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  private renderDetailView(): TemplateResult {
+    const app = this.selectedApp;
+    const meta = this.selectedAppMeta;
+    const config = this.selectedAppConfig;
+    if (this.configLoadError) {
+      return html`
+        <cloudly-sectionheading>App Store</cloudly-sectionheading>
+        <button class="button" @click=${() => { this.currentView = 'grid'; }}>Back to App Store</button>
+        <div class="card" style="margin-top: 14px;">
+          <div class="section-title">Could not load app details</div>
+          <div class="warning">${this.configLoadError}</div>
+          <div class="actions">
+            <button class="button" @click=${() => { this.currentView = 'grid'; }}>Back</button>
+            ${this.selectedApp ? html`<button class="button primary" @click=${async () => {
+              this.loading = true;
+              await this.fetchVersionConfig(this.selectedApp!.id, this.selectedVersion || this.selectedApp!.latestVersion);
+              this.loading = false;
+            }}>Retry</button>` : ''}
+          </div>
+        </div>
+      `;
+    }
+    if (this.loading || !app || !config) {
+      return html`<cloudly-sectionheading>App Store</cloudly-sectionheading><div class="card">Loading app details...</div>`;
+    }
+    const platformRequirements = config.platformRequirements || {};
+    const enabledRequirements = Object.entries(platformRequirements).filter(([, enabled]) => enabled);
+    const platformRequirementLabels: Record<string, string> = {
+      mongodb: 'MongoDB',
+      s3: 'S3',
+      clickhouse: 'ClickHouse',
+      valkey: 'Valkey',
+      mariadb: 'MariaDB',
+    };
+    const volumes = this.getConfigVolumes(config);
+    const publishedPorts = config.publishedPorts || [];
+    return html`
+      <cloudly-sectionheading>App Store</cloudly-sectionheading>
+      <button class="button" @click=${() => { this.currentView = 'grid'; }}>Back to App Store</button>
+      <div class="card" style="margin-top: 14px;">
+        <div class="header">
+          <div>
+            <h2 class="title">${app.name}</h2>
+            <div class="subtitle">${app.description}</div>
+            <div style="margin-top: 10px;">
+              <span class="badge">${app.category}</span>
+              ${app.tags?.map((tagArg) => html`<span class="badge">${tagArg}</span>`)}
+            </div>
+          </div>
+          <div class="mono">${config.image}</div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="section-title">Version</div>
+        <select @change=${(eventArg: Event) => this.changeVersion((eventArg.target as HTMLSelectElement).value)}>
+          ${(meta?.versions || [this.selectedVersion]).map((versionArg) => html`
+            <option value=${versionArg} ?selected=${versionArg === this.selectedVersion}>${versionArg}${versionArg === app.latestVersion ? ' (latest)' : ''}</option>
+          `)}
+        </select>
+        ${config.minCloudlyVersion ? html`<div class="muted" style="margin-top: 8px;">Requires Cloudly >= ${config.minCloudlyVersion}</div>` : ''}
+      </div>
+
+      ${enabledRequirements.length ? html`
+        <div class="card">
+          <div class="section-title">Platform Requirements</div>
+          ${enabledRequirements.map(([key]) => html`<span class="badge">${platformRequirementLabels[key] || key}</span>`)}
+          <div class="muted">Cloudly currently provisions MongoDB and S3 requirements through platform bindings.</div>
+        </div>
+      ` : ''}
+
+      ${(volumes.length || publishedPorts.length) ? html`
+        <div class="card">
+          <div class="section-title">Deployment Footprint</div>
+          ${volumes.map((volumeArg) => html`<div class="mono">Volume: ${volumeArg.source || volumeArg.name || 'managed'} -> ${volumeArg.mountPath}</div>`)}
+          ${publishedPorts.map((portArg) => html`<div class="mono">Published port: ${this.formatPublishedPort(portArg)}</div>`)}
+          ${publishedPorts.length ? html`<div class="warning">This app publishes raw host ports outside the HTTP proxy.</div>` : ''}
+        </div>
+      ` : ''}
+
+      ${this.editableEnvVars.length ? html`
+        <div class="card">
+          <div class="section-title">Environment</div>
+          <table class="env-table">
+            <thead><tr><th>Key</th><th>Value</th><th>Description</th></tr></thead>
+            <tbody>
+              ${this.editableEnvVars.map((envVarArg, indexArg) => html`
+                <tr>
+                  <td class="env-key">${envVarArg.key}${envVarArg.required ? html` <span class="badge">required</span>` : ''}</td>
+                  <td><input .value=${envVarArg.value} ?disabled=${envVarArg.platformInjected || !this.deployMode} @input=${(eventArg: Event) => this.updateEnvVar(indexArg, (eventArg.target as HTMLInputElement).value)} /></td>
+                  <td class="muted">${envVarArg.description}${envVarArg.platformInjected ? ' Auto-injected by platform.' : ''}</td>
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        </div>
+      ` : ''}
+
+      ${this.deployMode ? html`
+        <div class="card">
+          <div class="section-title">Install Service</div>
+          <div class="field"><label>Service name</label><input .value=${this.serviceName} @input=${(eventArg: Event) => { this.serviceName = (eventArg.target as HTMLInputElement).value; }} /></div>
+          <div class="field"><label>Domain</label><input .value=${this.serviceDomain} @input=${(eventArg: Event) => { this.serviceDomain = this.normalizeDomain((eventArg.target as HTMLInputElement).value); }} /></div>
+          <div class="muted" style="margin-top: 8px;">Domain is required when the template uses SERVICE_DOMAIN.</div>
+          <div class="actions">
+            <button class="button" @click=${() => { this.deployMode = false; }}>Cancel</button>
+            <button class="button primary" @click=${() => this.installSelectedApp()}>Install ${this.selectedVersion}</button>
+          </div>
+        </div>
+      ` : html`
+        <div class="actions">
+          <button class="button" @click=${() => { this.currentView = 'grid'; }}>Back</button>
+          <button class="button primary" @click=${() => { this.deployMode = true; }}>Install this App</button>
+        </div>
+      `}
+    `;
+  }
+
+  private async openApp(appArg: plugins.interfaces.appstore.IAppStoreApp, deployModeArg: boolean) {
+    this.selectedApp = appArg;
+    this.selectedAppMeta = null;
+    this.selectedAppConfig = null;
+    this.configLoadError = '';
+    this.selectedVersion = appArg.latestVersion;
+    this.serviceName = appArg.id;
+    this.serviceDomain = '';
+    this.deployMode = deployModeArg;
+    this.loading = true;
+    this.currentView = 'detail';
+    await this.fetchVersionConfig(appArg.id, appArg.latestVersion);
+    this.loading = false;
+  }
+
+  private async changeVersion(versionArg: string) {
+    if (!this.selectedApp || this.selectedVersion === versionArg) return;
+    this.selectedVersion = versionArg;
+    this.loading = true;
+    await this.fetchVersionConfig(this.selectedApp.id, versionArg);
+    this.loading = false;
+  }
+
+  private async fetchVersionConfig(appIdArg: string, versionArg: string): Promise<boolean> {
+    const requestToken = ++this.configRequestToken;
+    this.configLoadError = '';
+    this.selectedAppConfig = null;
+    try {
+      const response = await appstate.getAppStoreConfig(appIdArg, versionArg);
+      if (requestToken !== this.configRequestToken) {
+        return false;
+      }
+      this.selectedAppMeta = response.appMeta;
+      this.selectedAppConfig = response.config;
+      this.editableEnvVars = (response.config.envVars || []).map((envVarArg) => ({
+        key: envVarArg.key,
+        value: envVarArg.value || '',
+        description: envVarArg.description || '',
+        required: envVarArg.required,
+        platformInjected: Boolean(envVarArg.value?.includes('${') && !envVarArg.value.includes('${SERVICE_DOMAIN}')),
+      }));
+      return true;
+    } catch (error) {
+      if (requestToken === this.configRequestToken) {
+        this.configLoadError = (error as Error).message;
+        this.editableEnvVars = [];
+        plugins.deesCatalog.DeesToast.createAndShow({ message: `Failed to load app config: ${(error as Error).message}`, type: 'error' });
+      }
+      return false;
+    }
+  }
+
+  private updateEnvVar(indexArg: number, valueArg: string) {
+    const envVars = [...this.editableEnvVars];
+    envVars[indexArg] = { ...envVars[indexArg], value: valueArg };
+    this.editableEnvVars = envVars;
+  }
+
+  private async installSelectedApp() {
+    if (!this.selectedApp || !this.selectedAppConfig) return;
+    const missingEnvVars = this.editableEnvVars.filter((envVarArg) => envVarArg.required && !envVarArg.platformInjected && !envVarArg.value.trim());
+    if (missingEnvVars.length) {
+      plugins.deesCatalog.DeesToast.createAndShow({ message: `Missing env vars: ${missingEnvVars.map((envVarArg) => envVarArg.key).join(', ')}`, type: 'error' });
+      return;
+    }
+    const needsDomain = (this.selectedAppConfig.envVars || []).some((envVarArg) => envVarArg.value?.includes('${SERVICE_DOMAIN}'));
+    if (needsDomain && !this.serviceDomain) {
+      plugins.deesCatalog.DeesToast.createAndShow({ message: 'A domain is required for this app.', type: 'error' });
+      return;
+    }
+    const envVars: Record<string, string> = {};
+    for (const envVar of this.editableEnvVars) {
+      if (envVar.key && envVar.value) {
+        envVars[envVar.key] = envVar.value;
+      }
+    }
+    try {
+      await appstate.installAppStoreApp({
+        appId: this.selectedApp.id,
+        version: this.selectedVersion,
+        serviceName: this.serviceName || this.selectedApp.id,
+        domain: this.serviceDomain || undefined,
+        envVars,
+      });
+      await Promise.allSettled([
+        appstate.dataState.dispatchAction(appstate.getAllDataAction, null),
+        appstate.appStoreStatePart.dispatchAction(appstate.fetchUpgradeableAppStoreServicesAction, null),
+      ]);
+      plugins.deesCatalog.DeesToast.createAndShow({ message: 'App Store service installed', type: 'success' });
+      appRouter.navigateToView('runtime', 'services');
+    } catch (error) {
+      plugins.deesCatalog.DeesToast.createAndShow({ message: `Install failed: ${(error as Error).message}`, type: 'error' });
+    }
+  }
+
+  private getConfigVolumes(configArg: plugins.interfaces.appstore.IAppStoreVersionConfig) {
+    return (configArg.volumes || []).map((volumeArg) => {
+      if (typeof volumeArg === 'string') {
+        return { mountPath: volumeArg };
+      }
+      return volumeArg;
+    }).filter((volumeArg) => Boolean(volumeArg.mountPath));
+  }
+
+  private formatPublishedPort(portArg: plugins.interfaces.appstore.IAppStorePublishedPort): string {
+    const protocol = portArg.protocol || 'tcp';
+    const target = portArg.targetPortEnd ? `${portArg.targetPort}-${portArg.targetPortEnd}` : String(portArg.targetPort);
+    const publishedStart = portArg.publishedPort || portArg.targetPort;
+    const publishedEnd = portArg.publishedPortEnd || (portArg.targetPortEnd ? publishedStart + (portArg.targetPortEnd - portArg.targetPort) : undefined);
+    const published = publishedEnd ? `${publishedStart}-${publishedEnd}` : String(publishedStart);
+    return `${portArg.hostIp || '0.0.0.0'}:${published}/${protocol} -> ${target}/${protocol}`;
+  }
+
+  private normalizeDomain(valueArg: string) {
+    return valueArg.trim().replace(/^https?:\/\//, '').replace(/\/$/, '');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cloudly-view-appstore': CloudlyViewAppStore;
+  }
+}
@@ -8,6 +8,7 @@ import {
  state,
  css,
  cssManager,
+  type TemplateResult,
 } from '@design.estate/dees-element';

 import * as appstate from '../../../appstate.js';
@@ -42,6 +43,10 @@ export class CloudlyViewDeployments extends DeesElement {
      .health-unknown { background: #f5f5f5; color: #666; }
      .resource-usage { display: flex; gap: 12px; font-size: 0.9em; color: #888; }
      .resource-item { display: flex; align-items: center; gap: 4px; }
+      .kv-list { display: grid; gap: 8px; min-width: 520px; }
+      .kv-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 13px; }
+      .kv-key { color: var(--ci-shade-4, #71717a); }
+      .kv-value { color: var(--ci-shade-7, #e4e4e7); overflow-wrap: anywhere; }
    `,
  ];

@@ -105,6 +110,14 @@ export class CloudlyViewDeployments extends DeesElement {
          };
        }}
        .dataActions=${[
+          {
+            name: 'Details',
+            iconName: 'lucide:Eye',
+            type: ['contextmenu', 'inRow', 'doubleClick'],
+            actionFunc: async (actionDataArg: any) => {
+              await this.showDeploymentDetailsModal(actionDataArg.item as plugins.interfaces.data.IDeployment);
+            },
+          },
          {
            name: 'Deploy Service',
            iconName: 'plus',
@@ -212,6 +225,49 @@ export class CloudlyViewDeployments extends DeesElement {
      ></dees-table>
    `;
  }
+
+  private formatDate(timestampArg?: number): string {
+    return timestampArg ? new Date(timestampArg).toLocaleString() : '-';
+  }
+
+  private formatResourceUsage(deploymentArg: plugins.interfaces.data.IDeployment): string {
+    if (!deploymentArg.resourceUsage) {
+      return '-';
+    }
+    return `${deploymentArg.resourceUsage.cpuUsagePercent.toFixed(1)}% CPU / ${deploymentArg.resourceUsage.memoryUsedMB} MB`;
+  }
+
+  private renderDeploymentDetails(deploymentArg: plugins.interfaces.data.IDeployment): TemplateResult {
+    return html`
+      <div class="kv-list">
+        <div class="kv-row"><span class="kv-key">Deployment ID</span><span class="kv-value">${deploymentArg.id}</span></div>
+        <div class="kv-row"><span class="kv-key">Service</span><span class="kv-value">${this.getServiceName(deploymentArg.serviceId)}</span></div>
+        <div class="kv-row"><span class="kv-key">Status</span><span class="kv-value">${deploymentArg.status}</span></div>
+        <div class="kv-row"><span class="kv-key">Health</span><span class="kv-value">${deploymentArg.healthStatus || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Node</span><span class="kv-value">${deploymentArg.nodeName || deploymentArg.nodeId || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Slot</span><span class="kv-value">${deploymentArg.slot || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Desired State</span><span class="kv-value">${deploymentArg.desiredState || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Container ID</span><span class="kv-value">${deploymentArg.containerId || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Task ID</span><span class="kv-value">${deploymentArg.taskId || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Docker Service ID</span><span class="kv-value">${deploymentArg.dockerServiceId || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Version</span><span class="kv-value">${deploymentArg.version || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Image</span><span class="kv-value">${deploymentArg.usedImageId || '-'}</span></div>
+        <div class="kv-row"><span class="kv-key">Resources</span><span class="kv-value">${this.formatResourceUsage(deploymentArg)}</span></div>
+        <div class="kv-row"><span class="kv-key">Deployed At</span><span class="kv-value">${this.formatDate(deploymentArg.deployedAt)}</span></div>
+        <div class="kv-row"><span class="kv-key">Updated At</span><span class="kv-value">${this.formatDate(deploymentArg.updatedAt)}</span></div>
+      </div>
+    `;
+  }
+
+  private async showDeploymentDetailsModal(deploymentArg: plugins.interfaces.data.IDeployment) {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Deployment Details',
+      content: this.renderDeploymentDetails(deploymentArg),
+      menuOptions: [
+        { name: 'Close', action: async (modalArg: any) => { await modalArg.destroy(); } },
+      ],
+    });
+  }
 }

 declare global {
@@ -1,7 +1,15 @@
 import * as plugins from '../../../plugins.js';
 import * as shared from '../../shared/index.js';

-import { DeesElement, customElement, html, state, css, cssManager } from '@design.estate/dees-element';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';

 import * as appstate from '../../../appstate.js';

@@ -10,39 +18,84 @@ export class CloudlyViewImages extends DeesElement {
  @state()
  private accessor data: appstate.IDataState = {} as any;

+  @state()
+  private accessor currentView: 'list' | 'detail' = 'list';
+
+  @state()
+  private accessor selectedImage: plugins.interfaces.data.IImage | null = null;
+
  constructor() {
    super();
-    appstate.dataState
+    const subscription = appstate.dataState
      .select((stateArg) => stateArg)
      .subscribe((dataArg) => {
        this.data = dataArg;
      });
+    this.rxSubscriptions.push(subscription);
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
-    css``,
+    css`
+      .detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
+      .detail-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--ci-shade-7, #e4e4e7); }
+      .detail-subtitle { margin-top: 6px; color: var(--ci-shade-4, #71717a); font-size: 14px; overflow-wrap: anywhere; }
+      .back-button { border: 1px solid var(--ci-shade-2, #27272a); border-radius: 7px; padding: 9px 13px; font-size: 13px; cursor: pointer; background: var(--ci-shade-1, #09090b); color: var(--ci-shade-7, #e4e4e7); }
+      .detail-card { background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 9px; padding: 16px; }
+      .spaced-table, .spaced-card { margin-top: 14px; }
+      .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
+      .section-title { font-size: 14px; font-weight: 700; color: var(--ci-shade-7, #e4e4e7); margin-bottom: 10px; }
+      .kv-list { display: grid; gap: 8px; }
+      .kv-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 13px; }
+      .kv-key { color: var(--ci-shade-4, #71717a); }
+      .kv-value { color: var(--ci-shade-7, #e4e4e7); overflow-wrap: anywhere; }
+      .image-name { font-weight: 700; color: var(--ci-shade-7, #e4e4e7); }
+      .empty-state { color: var(--ci-shade-4, #71717a); font-size: 13px; padding: 12px 0; }
+      .source-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
+      .source-upload { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
+      .source-registry { background: rgba(34, 197, 94, 0.16); color: #22c55e; }
+      .source-unknown { background: rgba(161, 161, 170, 0.16); color: #a1a1aa; }
+      dees-statsgrid { margin-bottom: 18px; }
+      @media (max-width: 900px) { .details-grid { grid-template-columns: 1fr; } .detail-header { flex-direction: column; } }
+    `,
  ];

-  public render() {
+  public render(): TemplateResult {
+    if (this.currentView === 'detail') {
+      return this.renderDetailView();
+    }
+    return this.renderListView();
+  }
+
+  private renderListView(): TemplateResult {
    return html`
      <cloudly-sectionheading>Images</cloudly-sectionheading>
      <dees-table
        heading1="Images"
        heading2="an image is needed for running a service"
-        .data=${this.data.images}
+        .data=${this.data.images || []}
        .displayFunction=${(image: plugins.interfaces.data.IImage) => {
-          return { id: image.id, name: image.data.name, description: image.data.description, versions: image.data.versions.length };
+          const latestVersion = this.getLatestImageVersion(image);
+          return {
+            Name: html`<span class="image-name">${image.data.name}</span>`,
+            Description: image.data.description,
+            Location: this.getLocationLabel(image),
+            Versions: image.data.versions?.length || 0,
+            'Total Size': this.formatBytes(this.getImageTotalSize(image)),
+            Latest: latestVersion?.versionString || '-',
+            'Last Push': this.formatDate(image.data.lastPushEvent?.pushedAt),
+            'Used By': this.getServicesUsingImage(image).length,
+          };
        }}
        .dataActions=${[
          {
-            name: 'create Image',
+            name: 'Create Image',
            type: ['header', 'footer'],
            iconName: 'plus',
            actionFunc: async () => {
-              plugins.deesCatalog.DeesModal.createAndShow({
-                heading: 'create new Image',
+              await plugins.deesCatalog.DeesModal.createAndShow({
+                heading: 'Create Image',
                content: html`
                  <dees-form>
                    <dees-input-text .label=${'name'} .key=${'data.name'} .value=${''}></dees-input-text>
@@ -62,60 +115,19 @@ export class CloudlyViewImages extends DeesElement {
            },
          },
          {
-            name: 'edit',
+            name: 'Details',
            type: ['contextmenu', 'inRow', 'doubleClick'],
-            iconName: 'lucide:SquarePen',
-            actionFunc: async (dataArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.ISecretGroup>) => {
-              const environmentsArray: Array<plugins.interfaces.data.ISecretGroup['data']['environments'][any] & { environment: string; }> = [];
-              for (const environmentName of Object.keys(dataArg.item.data.environments)) {
-                environmentsArray.push({ environment: environmentName, ...dataArg.item.data.environments[environmentName] });
-              }
-              await plugins.deesCatalog.DeesModal.createAndShow({
-                heading: 'Edit Secret',
-                content: html`
-                  <dees-form>
-                    <dees-input-text .key=${'id'} .disabled=${true} .label=${'ID'} .value=${dataArg.item.id}></dees-input-text>
-                    <dees-input-text .key=${'data.name'} .disabled=${false} .label=${'name'} .value=${dataArg.item.data.name}></dees-input-text>
-                    <dees-input-text .key=${'data.description'} .disabled=${false} .label=${'description'} .value=${dataArg.item.data.description}></dees-input-text>
-                    <dees-input-text .key=${'data.key'} .disabled=${false} .label=${'key'} .value=${dataArg.item.data.key}></dees-input-text>
-                    <dees-table .key=${'environments'} .heading1=${'Environments'} .heading2=${'double-click to edit values'}
-                      .data=${environmentsArray.map((itemArg) => ({ environment: itemArg.environment, value: itemArg.value }))}
-                      .editableFields=${['environment', 'value']}
-                      .dataActions=${[{ name: 'delete', iconName: 'trash', type: ['inRow'], actionFunc: async (actionDataArg: any) => { actionDataArg.table.data.splice(actionDataArg.table.data.indexOf(actionDataArg.item), 1); } }] as plugins.deesCatalog.ITableAction[]}>
-                    </dees-table>
-                  </dees-form>
-                `,
-                menuOptions: [
-                  { name: 'Cancel', iconName: undefined, action: async (modalArg: any) => { await modalArg.destroy(); } },
-                  { name: 'Save', iconName: undefined, action: async (modalArg: any) => { const data = await modalArg.shadowRoot.querySelector('dees-form').collectFormData(); console.log(data); } },
-                ],
-              });
+            iconName: 'lucide:Eye',
+            actionFunc: async (dataArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.IImage>) => {
+              this.openImageDetail(dataArg.item);
            },
          },
          {
-            name: 'history',
-            iconName: 'lucide:History',
-            type: ['contextmenu', 'inRow'],
-            actionFunc: async (dataArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.ISecretGroup>) => {
-              const historyArray: Array<{ environment: string; value: string; }> = [];
-              for (const environment of Object.keys(dataArg.item.data.environments)) {
-                for (const historyItem of dataArg.item.data.environments[environment].history) {
-                  historyArray.push({ environment, value: historyItem.value });
-                }
-              }
-              await plugins.deesCatalog.DeesModal.createAndShow({
-                heading: `history for ${dataArg.item.data.key}`,
-                content: html`<dees-table .data=${historyArray} .dataActions=${[{ name: 'delete', iconName: 'trash', type: ['contextmenu', 'inRow'], actionFunc: async (itemArg: plugins.deesCatalog.ITableActionDataArg<(typeof historyArray)[0]>) => { console.log('delete', itemArg); }, }] as plugins.deesCatalog.ITableAction[]}></dees-table>`,
-                menuOptions: [ { name: 'close', action: async (modalArg: any) => { await modalArg.destroy(); } } ],
-              });
-            },
-          },
-          {
-            name: 'delete',
+            name: 'Delete',
            iconName: 'trash',
            type: ['contextmenu', 'inRow'],
            actionFunc: async (itemArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.IImage>) => {
-              plugins.deesCatalog.DeesModal.createAndShow({
+              await plugins.deesCatalog.DeesModal.createAndShow({
                heading: `Delete Image "${itemArg.item.data.name}"`,
                content: html`
                  <div style="text-align:center">Do you really want to delete the image?</div>
@@ -132,6 +144,171 @@ export class CloudlyViewImages extends DeesElement {
      ></dees-table>
    `;
  }
+
+  private renderDetailView(): TemplateResult {
+    const image = this.getActiveImage();
+    if (!image) {
+      return html`
+        <cloudly-sectionheading>Image Details</cloudly-sectionheading>
+        <button class="back-button" @click=${() => { this.currentView = 'list'; }}>Back to Images</button>
+      `;
+    }
+
+    const versions = this.getSortedImageVersions(image);
+    const latestVersion = this.getLatestImageVersion(image);
+    const lastPushEvent = image.data.lastPushEvent;
+    const location = image.data.location;
+    const servicesUsingImage = this.getServicesUsingImage(image);
+
+    return html`
+      <cloudly-sectionheading>Image Details</cloudly-sectionheading>
+      <div class="detail-header">
+        <div>
+          <h2 class="detail-title">${image.data.name}</h2>
+          <div class="detail-subtitle">${image.data.description || 'No description configured'}</div>
+        </div>
+        <button class="back-button" @click=${() => { this.currentView = 'list'; }}>Back to Images</button>
+      </div>
+
+      <dees-statsgrid .tiles=${this.getImageStatsTiles(image)} .minTileWidth=${220} .gap=${12}></dees-statsgrid>
+
+      <dees-table
+        .heading1=${'Image Versions'}
+        .heading2=${versions.length ? 'Stored image versions and registry metadata' : 'No versions recorded'}
+        .data=${versions}
+        .displayFunction=${(versionArg: plugins.interfaces.data.IImage['data']['versions'][number]) => ({
+          Version: versionArg.versionString,
+          Source: this.renderSourceBadge(versionArg.source),
+          Size: this.formatBytes(versionArg.size),
+          Digest: versionArg.digest || '-',
+          Repository: versionArg.registryRepository || '-',
+          Tag: versionArg.registryTag || '-',
+          Storage: versionArg.storagePath || '-',
+          Created: this.formatDate(versionArg.createdAt),
+        })}
+      ></dees-table>
+
+      ${servicesUsingImage.length ? html`
+        <dees-table
+          class="spaced-table"
+          .heading1=${'Service Usage'}
+          .heading2=${'Services currently configured with this image ID'}
+          .data=${servicesUsingImage}
+          .displayFunction=${(serviceArg: plugins.interfaces.data.IService) => ({
+            Name: serviceArg.data.name,
+            Version: serviceArg.data.imageVersion || '-',
+            Category: serviceArg.data.serviceCategory || 'workload',
+            Strategy: serviceArg.data.deploymentStrategy || 'custom',
+            Domains: serviceArg.data.domains?.map((domainArg) => domainArg.name).join(', ') || '-',
+            Deployments: serviceArg.data.deploymentIds?.length || 0,
+          })}
+        ></dees-table>
+      ` : html`
+        <div class="detail-card spaced-card">
+          <div class="section-title">Services Using This Image</div>
+          <div class="empty-state">No services currently reference this image.</div>
+        </div>
+      `}
+
+      <div class="details-grid">
+        <div class="detail-card">
+          <div class="section-title">Registry Source</div>
+          <div class="kv-list">
+            <div class="kv-row"><span class="kv-key">Image ID</span><span class="kv-value">${image.id}</span></div>
+            <div class="kv-row"><span class="kv-key">Name</span><span class="kv-value">${image.data.name}</span></div>
+            <div class="kv-row"><span class="kv-key">Description</span><span class="kv-value">${image.data.description || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Internal</span><span class="kv-value">${location?.internal === false ? 'no' : 'yes'}</span></div>
+            <div class="kv-row"><span class="kv-key">External Registry</span><span class="kv-value">${location?.externalRegistryId || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">External Tag</span><span class="kv-value">${location?.externalImageTag || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">External Ref</span><span class="kv-value">${location?.externalImageRef || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Latest Created</span><span class="kv-value">${this.formatDate(latestVersion?.createdAt)}</span></div>
+          </div>
+        </div>
+        <div class="detail-card">
+          <div class="section-title">Last Push</div>
+          <div class="kv-list">
+            <div class="kv-row"><span class="kv-key">Repository</span><span class="kv-value">${lastPushEvent?.repository || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Tag</span><span class="kv-value">${lastPushEvent?.tag || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Digest</span><span class="kv-value">${lastPushEvent?.digest || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Image URL</span><span class="kv-value">${lastPushEvent?.imageUrl || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Pushed At</span><span class="kv-value">${this.formatDate(lastPushEvent?.pushedAt)}</span></div>
+            <div class="kv-row"><span class="kv-key">Actor</span><span class="kv-value">${lastPushEvent?.actorUserId || '-'}</span></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private getActiveImage(): plugins.interfaces.data.IImage | null {
+    if (!this.selectedImage) {
+      return null;
+    }
+    return this.data.images?.find((imageArg) => imageArg.id === this.selectedImage!.id) || this.selectedImage;
+  }
+
+  private openImageDetail(imageArg: plugins.interfaces.data.IImage) {
+    this.selectedImage = imageArg;
+    this.currentView = 'detail';
+  }
+
+  private getImageTotalSize(imageArg: plugins.interfaces.data.IImage): number {
+    return (imageArg.data.versions || []).reduce((sumArg, versionArg) => sumArg + (versionArg.size || 0), 0);
+  }
+
+  private getSortedImageVersions(imageArg: plugins.interfaces.data.IImage): plugins.interfaces.data.IImage['data']['versions'] {
+    return [...(imageArg.data.versions || [])].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+  }
+
+  private getLatestImageVersion(imageArg: plugins.interfaces.data.IImage): plugins.interfaces.data.IImage['data']['versions'][number] | undefined {
+    return this.getSortedImageVersions(imageArg)[0];
+  }
+
+  private getServicesUsingImage(imageArg: plugins.interfaces.data.IImage): plugins.interfaces.data.IService[] {
+    return (this.data.services || []).filter((serviceArg) => serviceArg.data.imageId === imageArg.id);
+  }
+
+  private getImageStatsTiles(imageArg: plugins.interfaces.data.IImage) {
+    const latestVersion = this.getLatestImageVersion(imageArg);
+    const totalSize = this.getImageTotalSize(imageArg);
+    const servicesUsingImage = this.getServicesUsingImage(imageArg);
+    return [
+      { id: 'versions', title: 'Versions', value: imageArg.data.versions?.length || 0, type: 'number' as const, icon: 'lucide:Tags', description: 'Recorded image versions' },
+      { id: 'size', title: 'Total Size', value: this.formatBytes(totalSize), type: 'text' as const, icon: 'lucide:HardDrive', description: 'Stored archive size' },
+      { id: 'latest', title: 'Latest Version', value: latestVersion?.versionString || '-', type: 'text' as const, icon: 'lucide:GitBranch', description: this.formatDate(latestVersion?.createdAt) },
+      { id: 'usage', title: 'Used By', value: servicesUsingImage.length, type: 'number' as const, icon: 'lucide:Layers', description: 'Configured services' },
+    ];
+  }
+
+  private getLocationLabel(imageArg: plugins.interfaces.data.IImage): string {
+    const location = imageArg.data.location;
+    if (!location || location.internal) {
+      return 'Internal registry';
+    }
+    return location.externalImageRef || location.externalImageTag || 'External registry';
+  }
+
+  private formatBytes(sizeArg?: number): string {
+    if (!sizeArg) {
+      return sizeArg === 0 ? '0 B' : '-';
+    }
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let size = sizeArg;
+    let unitIndex = 0;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size = size / 1024;
+      unitIndex++;
+    }
+    return `${size.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+  }
+
+  private formatDate(timestampArg?: number): string {
+    return timestampArg ? new Date(timestampArg).toLocaleString() : '-';
+  }
+
+  private renderSourceBadge(sourceArg?: 'upload' | 'registry'): TemplateResult {
+    const source = sourceArg || 'unknown';
+    return html`<span class="source-badge source-${source}">${source}</span>`;
+  }
 }

 declare global {
@@ -34,6 +34,13 @@ export class CloudlyViewServices extends DeesElement {
  @state()
  private accessor upgradeInfo: any = null;

+  @state()
+  private accessor appStoreState: appstate.IAppStoreState = {
+    apps: [],
+    upgradeableServices: [],
+    upgradeOperations: [],
+  };
+
  @state()
  private accessor workspaceEnvironment: DeploymentExecutionEnvironment | null = null;

@@ -46,8 +53,20 @@ export class CloudlyViewServices extends DeesElement {
      .select((stateArg) => stateArg)
      .subscribe((dataArg) => {
        this.data = dataArg;
+        if (this.selectedService) {
+          const updatedService = dataArg.services?.find((serviceArg) => serviceArg.id === this.selectedService!.id);
+          if (updatedService) {
+            this.selectedService = updatedService;
+          }
+        }
      });
    this.rxSubscriptions.push(subscription);
+    const appStoreSubscription = appstate.appStoreStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((stateArg) => {
+        this.appStoreState = stateArg;
+      });
+    this.rxSubscriptions.push(appStoreSubscription);
  }

  public static styles = [
@@ -59,7 +78,6 @@ export class CloudlyViewServices extends DeesElement {
      .category-distributed { background: #9c27b0; color: white; }
      .category-workload { background: #4caf50; color: white; }
      .strategy-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.85em; background: #444; color: #ccc; margin-left: 4px; }
-      .link-button { border: none; background: transparent; color: var(--ci-color-primary, #60a5fa); cursor: pointer; padding: 0; font: inherit; }
      .detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
      .detail-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--ci-shade-7, #e4e4e7); }
      .detail-subtitle { margin-top: 6px; color: var(--ci-shade-4, #71717a); font-size: 14px; }
@@ -126,7 +144,7 @@ export class CloudlyViewServices extends DeesElement {
        .data=${this.data.services || []}
        .displayFunction=${(itemArg: plugins.interfaces.data.IService) => {
          return {
-            Name: html`<button class="link-button" @click=${() => this.openServiceDetail(itemArg)}>${itemArg.data.name}</button>`,
+            Name: itemArg.data.name,
            Description: itemArg.data.description,
            Category: this.getCategoryBadgeHtml(itemArg.data.serviceCategory || 'workload'),
            'Deployment Strategy': html`
@@ -144,7 +162,7 @@ export class CloudlyViewServices extends DeesElement {
          {
            name: 'Details',
            iconName: 'eye',
-            type: ['contextmenu', 'inRow'],
+            type: ['contextmenu', 'inRow', 'doubleClick'],
            actionFunc: async (actionDataArg: any) => {
              await this.openServiceDetail(actionDataArg.item as plugins.interfaces.data.IService);
            },
@@ -302,6 +320,8 @@ export class CloudlyViewServices extends DeesElement {
      appTemplateId?: string;
      appTemplateVersion?: string;
    };
+    const upgradeOperation = this.getUpgradeOperationForService(service);
+    const upgradeInfo = this.getUpgradeInfoForService(service);

    return html`
      <cloudly-sectionheading>Service Details</cloudly-sectionheading>
@@ -313,13 +333,19 @@ export class CloudlyViewServices extends DeesElement {
        <button class="back-button" @click=${() => { this.currentView = 'list'; }}>Back to Services</button>
      </div>

-      ${this.upgradeInfo ? html`
+      ${upgradeOperation ? this.renderUpgradeOperation(upgradeOperation) : ''}
+
+      ${upgradeInfo ? html`
        <div class="update-card">
          <div>
            <div class="section-title" style="margin-bottom: 3px;">App catalog update available</div>
-            <div class="detail-subtitle">${this.upgradeInfo.appTemplateId}: ${this.upgradeInfo.currentVersion} -> ${this.upgradeInfo.latestVersion}</div>
+            <div class="detail-subtitle">${upgradeInfo.appTemplateId}: ${upgradeInfo.currentVersion} -> ${upgradeInfo.latestVersion}</div>
          </div>
-          <button class="primary-button" disabled title="Cloudly does not yet have catalog upgrade apply support">Detected</button>
+          <button
+            class="primary-button"
+            ?disabled=${upgradeOperation?.status === 'running'}
+            @click=${() => this.startUpgradeForService(service)}
+          >${upgradeOperation?.status === 'running' ? 'Upgrading...' : 'Upgrade'}</button>
        </div>
      ` : ''}

@@ -342,58 +368,65 @@ export class CloudlyViewServices extends DeesElement {
        </div>
      </div>

-      <div class="detail-card">
-        <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;">
-          <div>
-            <div class="section-title">Deployments</div>
-            <div class="detail-subtitle">Container-level runtime actions happen here.</div>
-          </div>
-          <button class="back-button" @click=${() => this.loadDeploymentsForService(service)}>Refresh</button>
-        </div>
-        ${this.deploymentsLoading ? html`<div class="detail-subtitle">Loading deployments...</div>` : html`
-          <dees-table
-            .heading1=${'Live Deployments'}
-            .heading2=${this.serviceDeployments.length ? 'Docker Swarm tasks reported by connected Coreflows' : 'No live deployments reported'}
-            .data=${this.serviceDeployments}
-            .displayFunction=${(deploymentArg: any) => ({
-              Status: this.renderStatusBadge(deploymentArg.status),
-              Node: deploymentArg.nodeName || deploymentArg.nodeId || '-',
-              Slot: deploymentArg.slot || '-',
-              Version: deploymentArg.version || service.data.imageVersion,
-              Container: deploymentArg.containerId ? deploymentArg.containerId.slice(0, 12) : '-',
-              CPU: deploymentArg.resourceUsage ? `${deploymentArg.resourceUsage.cpuUsagePercent.toFixed(1)}%` : '-',
-              Memory: deploymentArg.resourceUsage ? `${deploymentArg.resourceUsage.memoryUsedMB} MB` : '-',
-              Updated: deploymentArg.updatedAt ? new Date(deploymentArg.updatedAt).toLocaleString() : '-',
-            })}
-            .dataActions=${[
-              {
-                name: 'Open IDE',
-                iconName: 'terminal',
-                type: ['contextmenu', 'inRow'],
-                actionFunc: async (actionDataArg: any) => {
-                  await this.openDeploymentWorkspace(actionDataArg.item);
-                },
+      ${this.deploymentsLoading ? html`<div class="detail-subtitle">Loading deployments...</div>` : html`
+        <dees-table
+          .heading1=${'Live Deployments'}
+          .heading2=${this.serviceDeployments.length ? 'Docker Swarm tasks reported by connected Coreflows' : 'No live deployments reported'}
+          .data=${this.serviceDeployments}
+          .displayFunction=${(deploymentArg: any) => ({
+            Status: this.renderStatusBadge(deploymentArg.status),
+            Node: deploymentArg.nodeName || deploymentArg.nodeId || '-',
+            Slot: deploymentArg.slot || '-',
+            Version: deploymentArg.version || service.data.imageVersion,
+            Container: deploymentArg.containerId ? deploymentArg.containerId.slice(0, 12) : '-',
+            CPU: deploymentArg.resourceUsage ? `${deploymentArg.resourceUsage.cpuUsagePercent.toFixed(1)}%` : '-',
+            Memory: deploymentArg.resourceUsage ? `${deploymentArg.resourceUsage.memoryUsedMB} MB` : '-',
+            Updated: deploymentArg.updatedAt ? new Date(deploymentArg.updatedAt).toLocaleString() : '-',
+          })}
+          .dataActions=${[
+            {
+              name: 'Refresh',
+              iconName: 'refresh-cw',
+              type: ['header'],
+              actionFunc: async () => {
+                await this.loadDeploymentsForService(service);
              },
-              {
-                name: 'Restart',
-                iconName: 'refresh-cw',
-                type: ['contextmenu', 'inRow'],
-                actionFunc: async (actionDataArg: any) => {
-                  await this.restartDeployment(actionDataArg.item);
-                },
+            },
+            {
+              name: 'Details',
+              iconName: 'lucide:Eye',
+              type: ['contextmenu', 'inRow', 'doubleClick'],
+              actionFunc: async (actionDataArg: any) => {
+                await this.showDeploymentDetailsModal(actionDataArg.item);
              },
-              {
-                name: 'Kill Container',
-                iconName: 'skull',
-                type: ['contextmenu', 'inRow'],
-                actionFunc: async (actionDataArg: any) => {
-                  await this.confirmKillDeployment(actionDataArg.item);
-                },
+            },
+            {
+              name: 'Open IDE',
+              iconName: 'terminal',
+              type: ['contextmenu', 'inRow'],
+              actionFunc: async (actionDataArg: any) => {
+                await this.openDeploymentWorkspace(actionDataArg.item);
              },
-            ] as plugins.deesCatalog.ITableAction[]}
-          ></dees-table>
-        `}
-      </div>
+            },
+            {
+              name: 'Restart',
+              iconName: 'refresh-cw',
+              type: ['contextmenu', 'inRow'],
+              actionFunc: async (actionDataArg: any) => {
+                await this.restartDeployment(actionDataArg.item);
+              },
+            },
+            {
+              name: 'Kill Container',
+              iconName: 'skull',
+              type: ['contextmenu', 'inRow'],
+              actionFunc: async (actionDataArg: any) => {
+                await this.confirmKillDeployment(actionDataArg.item);
+              },
+            },
+          ] as plugins.deesCatalog.ITableAction[]}
+        ></dees-table>
+      `}

      <div class="details-grid">
        <div class="detail-card">
@@ -440,10 +473,89 @@ export class CloudlyViewServices extends DeesElement {
    `;
  }

+  private getUpgradeOperationForService(serviceArg: plugins.interfaces.data.IService): appstate.IAppStoreUpgradeOperation | null {
+    return this.appStoreState.upgradeOperations.find((operationArg) => {
+      return operationArg.serviceId === serviceArg.id || operationArg.serviceName === serviceArg.data.name;
+    }) || null;
+  }
+
+  private getUpgradeInfoForService(serviceArg: plugins.interfaces.data.IService): any | null {
+    const operation = this.getUpgradeOperationForService(serviceArg);
+    if (operation?.status === 'success') {
+      return null;
+    }
+    const liveUpgradeInfo = this.appStoreState.upgradeableServices.find((upgradeArg) => {
+      return upgradeArg.serviceId === serviceArg.id || upgradeArg.serviceName === serviceArg.data.name;
+    });
+    if (liveUpgradeInfo) {
+      return liveUpgradeInfo;
+    }
+    if (this.upgradeInfo?.serviceId === serviceArg.id || this.upgradeInfo?.serviceName === serviceArg.data.name) {
+      return this.upgradeInfo;
+    }
+    return null;
+  }
+
+  private renderUpgradeOperation(operationArg: appstate.IAppStoreUpgradeOperation): TemplateResult {
+    const color = operationArg.status === 'failed' ? '#f87171' : '#60a5fa';
+    return html`
+      <div class="update-card" style="border-color: ${color}; background: var(--ci-shade-1, #09090b); display: block;">
+        <div style="display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;">
+          <div>
+            <div class="section-title" style="margin-bottom: 3px;">Upgrade ${operationArg.fromVersion} -> ${operationArg.targetVersion}</div>
+            <div class="detail-subtitle">${operationArg.status} / ${operationArg.step}${operationArg.error ? `: ${operationArg.error}` : ''}</div>
+          </div>
+          <span style="color: ${color}; font-size: 12px; text-transform: uppercase;">${operationArg.status}</span>
+        </div>
+        <div style="margin-top: 12px; padding: 10px 12px; background: var(--ci-shade-0, #030305); border-radius: 6px; color: var(--ci-shade-5, #a1a1aa); font-family: monospace; font-size: 12px; line-height: 1.5; max-height: 130px; overflow: auto; white-space: pre-wrap;">${operationArg.progressLines.slice(-8).join('\n')}</div>
+        ${operationArg.warnings.length ? html`<div style="margin-top: 10px; color: #fbbf24; font-size: 12px;">${operationArg.warnings.join(' | ')}</div>` : ''}
+      </div>
+    `;
+  }
+
  private renderStatusBadge(statusArg: string): TemplateResult {
    return html`<span class="status-badge status-${statusArg || 'scheduled'}">${statusArg || 'scheduled'}</span>`;
  }

+  private formatDate(timestampArg?: number): string {
+    return timestampArg ? new Date(timestampArg).toLocaleString() : '-';
+  }
+
+  private formatResourceUsage(deploymentArg: plugins.interfaces.data.IDeployment): string {
+    if (!deploymentArg.resourceUsage) {
+      return '-';
+    }
+    return `${deploymentArg.resourceUsage.cpuUsagePercent.toFixed(1)}% CPU / ${deploymentArg.resourceUsage.memoryUsedMB} MB`;
+  }
+
+  private async showDeploymentDetailsModal(deploymentArg: plugins.interfaces.data.IDeployment) {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Deployment Details',
+      content: html`
+        <div class="kv-list" style="min-width: 520px;">
+          <div class="kv-row"><span class="kv-key">Deployment ID</span><span class="kv-value">${deploymentArg.id}</span></div>
+          <div class="kv-row"><span class="kv-key">Service</span><span class="kv-value">${deploymentArg.serviceName || this.selectedService?.data.name || deploymentArg.serviceId}</span></div>
+          <div class="kv-row"><span class="kv-key">Status</span><span class="kv-value">${deploymentArg.status}</span></div>
+          <div class="kv-row"><span class="kv-key">Health</span><span class="kv-value">${deploymentArg.healthStatus || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Node</span><span class="kv-value">${deploymentArg.nodeName || deploymentArg.nodeId || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Slot</span><span class="kv-value">${deploymentArg.slot || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Desired State</span><span class="kv-value">${deploymentArg.desiredState || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Container ID</span><span class="kv-value">${deploymentArg.containerId || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Task ID</span><span class="kv-value">${deploymentArg.taskId || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Docker Service ID</span><span class="kv-value">${deploymentArg.dockerServiceId || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Version</span><span class="kv-value">${deploymentArg.version || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Image</span><span class="kv-value">${deploymentArg.usedImageId || '-'}</span></div>
+          <div class="kv-row"><span class="kv-key">Resources</span><span class="kv-value">${this.formatResourceUsage(deploymentArg)}</span></div>
+          <div class="kv-row"><span class="kv-key">Deployed At</span><span class="kv-value">${this.formatDate(deploymentArg.deployedAt)}</span></div>
+          <div class="kv-row"><span class="kv-key">Updated At</span><span class="kv-value">${this.formatDate(deploymentArg.updatedAt)}</span></div>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Close', action: async (modalArg: any) => modalArg.destroy() },
+      ],
+    });
+  }
+
  private async openServiceDetail(serviceArg: plugins.interfaces.data.IService) {
    this.selectedService = serviceArg;
    this.serviceDeployments = [];
@@ -472,13 +584,72 @@ export class CloudlyViewServices extends DeesElement {

  private async loadUpgradeInfo(serviceArg: plugins.interfaces.data.IService) {
    try {
-      const response = await this.fireTypedRequest('getUpgradeableAppStoreServices', {}) as { services: any[] };
-      this.upgradeInfo = response.services?.find((upgradeArg) => upgradeArg.serviceName === serviceArg.data.name) || null;
+      await Promise.all([
+        appstate.appStoreStatePart.dispatchAction(appstate.fetchUpgradeableAppStoreServicesAction, null),
+        appstate.appStoreStatePart.dispatchAction(appstate.fetchAppStoreUpgradeOperationsAction, null),
+      ]);
+      this.upgradeInfo = this.getUpgradeInfoForService(serviceArg);
    } catch {
      this.upgradeInfo = null;
    }
  }

+  private async startUpgradeForService(serviceArg: plugins.interfaces.data.IService) {
+    const upgradeInfo = this.getUpgradeInfoForService(serviceArg);
+    if (!upgradeInfo?.latestVersion) {
+      return;
+    }
+    try {
+      const preview = await appstate.getAppStoreUpgradePreview(serviceArg.id, upgradeInfo.latestVersion);
+      if (preview.blockers.length > 0) {
+        plugins.deesCatalog.DeesToast.createAndShow({ message: preview.blockers.join('; '), type: 'error' });
+        return;
+      }
+      let upgradeStarting = false;
+      await plugins.deesCatalog.DeesModal.createAndShow({
+        heading: `Upgrade ${serviceArg.data.name}`,
+        content: html`
+          <div style="width: min(720px, calc(100vw - 48px)); max-width: 100%;">
+            <div class="detail-subtitle" style="margin-bottom: 12px;">${preview.fromVersion} -> ${preview.resolvedTargetVersion}</div>
+            <div style="display: grid; gap: 8px;">
+              ${preview.changes.map((changeArg) => html`
+                <div style="display: grid; grid-template-columns: minmax(120px, 0.35fr) 1fr; gap: 10px; font-size: 13px;">
+                  <span style="color: var(--ci-shade-4, #71717a);">${changeArg.field}</span>
+                  <span style="color: var(--ci-shade-7, #e4e4e7); overflow-wrap: anywhere;">${changeArg.currentValue} -> ${changeArg.targetValue}</span>
+                </div>
+              `)}
+            </div>
+            ${preview.warnings.length ? html`<div style="margin-top: 12px; color: #fbbf24; font-size: 12px;">${preview.warnings.join(' | ')}</div>` : ''}
+          </div>
+        `,
+        menuOptions: [
+          {
+            name: 'Start Upgrade',
+            action: async (modalArg: any) => {
+              if (upgradeStarting) {
+                return;
+              }
+              upgradeStarting = true;
+              try {
+                await appstate.appStoreStatePart.dispatchAction(appstate.startAppStoreServiceUpgradeAction, {
+                  serviceId: serviceArg.id,
+                  targetVersion: preview.resolvedTargetVersion,
+                });
+                await modalArg.destroy();
+              } catch (error) {
+                upgradeStarting = false;
+                plugins.deesCatalog.DeesToast.createAndShow({ message: `Upgrade failed: ${(error as Error).message}`, type: 'error' });
+              }
+            },
+          },
+          { name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
+        ],
+      });
+    } catch (error) {
+      plugins.deesCatalog.DeesToast.createAndShow({ message: `Upgrade failed: ${(error as Error).message}`, type: 'error' });
+    }
+  }
+
  private async restartDeployment(deploymentArg: plugins.interfaces.data.IDeployment) {
    await this.fireTypedRequest('restartDeployment', { deploymentId: deploymentArg.id });
    if (this.selectedService) {
@@ -23,8 +23,29 @@ export class CloudlyViewSettings extends DeesElement {
  @state()
  private accessor testResults: {[key: string]: {success: boolean; message: string}} = {};

+  @state()
+  private accessor hostedRuntime: appstate.IHostedRuntimeState = {
+    isHosted: false,
+    loading: false,
+    upgradeState: null,
+  };
+
  constructor() {
    super();
+    const hostedRuntimeSubscription = appstate.hostedRuntimeStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((stateArg) => {
+        this.hostedRuntime = stateArg;
+      });
+    this.rxSubscriptions.push(hostedRuntimeSubscription);
+    const loginSubscription = appstate.loginStatePart
+      .select((stateArg) => stateArg.identity)
+      .subscribe((identityArg) => {
+        if (identityArg) {
+          void this.refreshHostedRuntimeStatus();
+        }
+      });
+    this.rxSubscriptions.push(loginSubscription);
    this.loadSettings();
  }

@@ -41,10 +62,24 @@ export class CloudlyViewSettings extends DeesElement {
      dees-panel { margin-bottom: 16px; }
      .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .form-grid.single { grid-template-columns: 1fr; }
+      .runtime-panel { display: grid; gap: 16px; }
+      .runtime-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+      .runtime-card { border: 1px solid var(--ci-shade-2, #27272a); border-radius: 8px; padding: 12px; background: var(--ci-shade-1, #09090b); }
+      .runtime-label { color: var(--ci-shade-4, #71717a); font-size: 12px; margin-bottom: 6px; }
+      .runtime-value { color: var(--ci-shade-7, #e4e4e7); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
+      .runtime-message { color: var(--ci-shade-5, #a1a1aa); font-size: 13px; line-height: 1.5; }
+      .runtime-message.error { color: #ef4444; }
+      .runtime-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
      @media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }
+      @media (max-width: 768px) { .runtime-grid { grid-template-columns: 1fr; } }
    `,
  ];

+  public async connectedCallback() {
+    super.connectedCallback();
+    await this.refreshHostedRuntimeStatus();
+  }
+
  private async loadSettings() {
    this.isLoading = true;
    try {
@@ -102,6 +137,124 @@ export class CloudlyViewSettings extends DeesElement {
    return html`<dees-badge .type=${result.success ? 'success' : 'error'} .text=${result.success ? 'Connected' : 'Failed'}></dees-badge>`;
  }

+  private async refreshHostedRuntimeStatus() {
+    if (!appstate.loginStatePart.getState()?.identity) {
+      return;
+    }
+    await appstate.hostedRuntimeStatePart.dispatchAction(appstate.fetchHostedRuntimeUpgradeStatusAction, null);
+  }
+
+  private getHostedRuntimeBadgeType() {
+    const status = this.hostedRuntime.upgradeState?.status;
+    if (!this.hostedRuntime.isHosted) return 'info';
+    if (status === 'failed') return 'error';
+    if (status === 'upToDate' || status === 'success') return 'success';
+    return 'info';
+  }
+
+  private getHostedRuntimeStatusText() {
+    if (!this.hostedRuntime.isHosted) return 'Not hosted';
+    const status = this.hostedRuntime.upgradeState?.status || 'unknown';
+    switch (status) {
+      case 'upToDate': return 'Up to date';
+      case 'available': return 'Update available';
+      case 'running': return 'Upgrade running';
+      case 'success': return 'Upgrade complete';
+      case 'failed': return 'Upgrade failed';
+      default: return 'Unknown';
+    }
+  }
+
+  private getHostedRuntimeMessage() {
+    if (!this.hostedRuntime.isHosted) {
+      return this.hostedRuntime.unavailableReason || 'This Cloudly instance is not running as a managed hosted app.';
+    }
+    if (this.hostedRuntime.unavailableReason) {
+      return this.hostedRuntime.unavailableReason;
+    }
+    const upgradeState = this.hostedRuntime.upgradeState;
+    if (upgradeState?.status === 'available') {
+      return `Parent host can upgrade Cloudly from ${upgradeState.currentVersion || 'current'} to ${upgradeState.targetVersion || upgradeState.latestVersion}.`;
+    }
+    if (upgradeState?.status === 'running') {
+      return 'The parent host is upgrading this Cloudly service. Status refreshes automatically.';
+    }
+    if (upgradeState?.status === 'failed') {
+      return upgradeState.error || 'The last parent-hosted upgrade failed.';
+    }
+    return 'Parent hosted runtime status is available. No upgrade action is currently required.';
+  }
+
+  private async startHostedRuntimeUpgrade() {
+    const upgradeState = this.hostedRuntime.upgradeState;
+    const targetVersion = upgradeState?.targetVersion || upgradeState?.latestVersion;
+    if (!targetVersion) {
+      plugins.deesCatalog.DeesToast.createAndShow({ message: 'No hosted runtime upgrade target is available.', type: 'error' });
+      return;
+    }
+
+    let upgradeStarting = false;
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Upgrade Hosted Cloudly',
+      content: html`
+        <div style="width: min(560px, calc(100vw - 48px)); max-width: 100%; color: var(--ci-shade-5, #a1a1aa); line-height: 1.5;">
+          The parent host will upgrade this Cloudly app from ${upgradeState?.currentVersion || 'current'} to ${targetVersion} using its hosted app lifecycle controls.
+        </div>
+      `,
+      menuOptions: [
+        {
+          name: 'Start Upgrade',
+          action: async (modalArg: any) => {
+            if (upgradeStarting) return;
+            upgradeStarting = true;
+            try {
+              await appstate.hostedRuntimeStatePart.dispatchAction(appstate.startHostedRuntimeParentUpgradeAction, { targetVersion });
+              plugins.deesCatalog.DeesToast.createAndShow({ message: 'Hosted runtime upgrade started.', type: 'success' });
+              await modalArg.destroy();
+            } catch (error) {
+              upgradeStarting = false;
+              plugins.deesCatalog.DeesToast.createAndShow({ message: `Upgrade failed: ${(error as Error).message}`, type: 'error' });
+            }
+          },
+        },
+        { name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
+      ],
+    });
+  }
+
+  private renderHostedRuntimePanel() {
+    const upgradeState = this.hostedRuntime.upgradeState;
+    const canStartUpgrade = this.hostedRuntime.isHosted && upgradeState?.status === 'available' && !this.hostedRuntime.loading;
+    return html`
+      <dees-panel .title=${'Hosted Runtime'} .subtitle=${'Manage this Cloudly instance through its parent serve.zone host'} .variant=${'outline'}>
+        <div class="runtime-panel">
+          <div class="runtime-grid">
+            <div class="runtime-card">
+              <div class="runtime-label">Runtime</div>
+              <div class="runtime-value">${this.hostedRuntime.isHosted ? 'Managed hosted app' : 'Standalone'}</div>
+            </div>
+            <div class="runtime-card">
+              <div class="runtime-label">Upgrade Status</div>
+              <div class="runtime-value"><dees-badge .type=${this.getHostedRuntimeBadgeType()} .text=${this.getHostedRuntimeStatusText()}></dees-badge></div>
+            </div>
+            <div class="runtime-card">
+              <div class="runtime-label">Version</div>
+              <div class="runtime-value">${upgradeState?.currentVersion || '-'}${upgradeState?.latestVersion ? ` / ${upgradeState.latestVersion}` : ''}</div>
+            </div>
+          </div>
+          <div class=${`runtime-message ${this.hostedRuntime.unavailableReason || upgradeState?.status === 'failed' ? 'error' : ''}`}>
+            ${this.getHostedRuntimeMessage()}
+          </div>
+          ${upgradeState?.warnings?.length ? html`<div class="runtime-message">${upgradeState.warnings.join(' | ')}</div>` : ''}
+          <div class="runtime-actions">
+            <dees-button .text=${this.hostedRuntime.loading ? 'Refreshing...' : 'Refresh Status'} .type=${'secondary'} .disabled=${this.hostedRuntime.loading} @click=${() => this.refreshHostedRuntimeStatus()}></dees-button>
+            <dees-button .text=${upgradeState?.status === 'running' ? 'Upgrade Running' : 'Start Parent Upgrade'} .type=${'primary'} .disabled=${!canStartUpgrade} @click=${() => this.startHostedRuntimeUpgrade()}></dees-button>
+          </div>
+        </div>
+      </dees-panel>
+    `;
+  }
+
  public render() {
    if (this.isLoading && Object.keys(this.settings).length === 0) {
      return html`<div class="loading-container"><dees-spinner></dees-spinner></div>`;
@@ -109,6 +262,7 @@ export class CloudlyViewSettings extends DeesElement {
    return html`
      <cloudly-sectionheading>Settings</cloudly-sectionheading>
      <div class="settings-container">
+        ${this.renderHostedRuntimePanel()}
        <dees-form @formData=${(e: CustomEvent) => { this.saveSettings((e.detail as any).data); }}>
          <dees-panel .title=${'Hetzner Cloud'} .subtitle=${'Configure Hetzner Cloud API access'} .variant=${'outline'}>
            <div class="test-status">
@@ -266,32 +266,30 @@ export class CloudlyViewTasks extends DeesElement {

      <cloudly-sectionheading>Execution History</cloudly-sectionheading>

-      <dees-panel .title=${'Recent Executions'} .subtitle=${'History of task runs and their outcomes'} .variant=${'outline'}>
-        <dees-table
-          .heading1=${'Task Executions'}
-          .heading2=${'History of task runs and their outcomes'}
-          .data=${this.data.taskExecutions || []}
-          .displayFunction=${(itemArg: plugins.interfaces.data.ITaskExecution) => {
-            return {
-              Task: itemArg.data.taskName,
-              Status: html`<span class="status-badge status-${itemArg.data.status}">${itemArg.data.status}</span>`,
-              'Started At': formatDate(itemArg.data.startedAt),
-              Duration: itemArg.data.duration ? formatDuration(itemArg.data.duration) : '-',
-              'Triggered By': itemArg.data.triggeredBy,
-              Logs: itemArg.data.logs?.length || 0,
-            } as any;
-          }}
-          .actionFunction=${async (itemArg: plugins.interfaces.data.ITaskExecution) => {
-            const actions: any[] = [
-              { name: 'View Details', iconName: 'lucide:Eye', type: ['inRow'], actionFunc: async () => { this.selectedExecution = itemArg; } }
-            ];
-            if (itemArg.data.status === 'running') {
-              actions.push({ name: 'Cancel', iconName: 'lucide:SquareX', type: ['inRow'], actionFunc: async () => { await appstate.dataState.dispatchAction(appstate.taskActions.cancelTask, { executionId: itemArg.id }); await this.loadExecutionsWithFilter(); } });
-            }
-            return actions;
-          }}
-        ></dees-table>
-      </dees-panel>
+      <dees-table
+        .heading1=${'Task Executions'}
+        .heading2=${'History of task runs and their outcomes'}
+        .data=${this.data.taskExecutions || []}
+        .displayFunction=${(itemArg: plugins.interfaces.data.ITaskExecution) => {
+          return {
+            Task: itemArg.data.taskName,
+            Status: html`<span class="status-badge status-${itemArg.data.status}">${itemArg.data.status}</span>`,
+            'Started At': formatDate(itemArg.data.startedAt),
+            Duration: itemArg.data.duration ? formatDuration(itemArg.data.duration) : '-',
+            'Triggered By': itemArg.data.triggeredBy,
+            Logs: itemArg.data.logs?.length || 0,
+          } as any;
+        }}
+        .actionFunction=${async (itemArg: plugins.interfaces.data.ITaskExecution) => {
+          const actions: any[] = [
+            { name: 'View Details', iconName: 'lucide:Eye', type: ['inRow'], actionFunc: async () => { this.selectedExecution = itemArg; } }
+          ];
+          if (itemArg.data.status === 'running') {
+            actions.push({ name: 'Cancel', iconName: 'lucide:SquareX', type: ['inRow'], actionFunc: async () => { await appstate.dataState.dispatchAction(appstate.taskActions.cancelTask, { executionId: itemArg.id }); await this.loadExecutionsWithFilter(); } });
+          }
+          return actions;
+        }}
+      ></dees-table>

      ${this.selectedExecution ? html`
        <cloudly-sectionheading>Execution Details</cloudly-sectionheading>
@@ -7,7 +7,7 @@ const flatViews = ['overview', 'logs'] as const;

 const subviewMap: Record<string, readonly string[]> = {
  platform: ['settings', 'baseos', 'fleet'] as const,
-  runtime: ['clusters', 'services', 'images', 'deployments', 'tasks'] as const,
+  runtime: ['clusters', 'appstore', 'services', 'images', 'deployments', 'tasks'] as const,
  registry: ['externalregistries', 'testing'] as const,
  secrets: ['secretgroups', 'secretbundles'] as const,
  domains: ['domains', 'dns', 'mails'] as const,
Author	SHA1	Message	Date
jkunz	9cac2e616f	v6.4.3 Docker (tags) / release (push) Failing after 1s Details	2026-05-28 16:44:18 +00:00
jkunz	fd0653788e	fix(appstore): label App Store platform requirement badges with canonical names	2026-05-28 16:43:53 +00:00
jkunz	c6b8cbbe51	v6.4.2 Docker (tags) / release (push) Failing after 1s Details	2026-05-28 16:18:03 +00:00
jkunz	966c626d36	fix(services): clean up dependent resources during service deletion	2026-05-28 16:13:06 +00:00
jkunz	7f0c968b5c	v6.4.1 Docker (tags) / release (push) Failing after 1s Details	2026-05-27 21:33:02 +00:00
jkunz	78d7479b4a	fix(appstore): handle App Store backend failures and empty RPC responses	2026-05-27 21:32:32 +00:00
jkunz	9bac0a5f71	v6.4.0 Docker (tags) / release (push) Failing after 1s Details	2026-05-26 21:50:43 +00:00
jkunz	26256c92bd	feat(hostedapp): add hosted Cloudly parent upgrade controls	2026-05-26 21:50:17 +00:00
jkunz	c7a307c9d3	v6.3.1 Docker (tags) / release (push) Failing after 1s Details	2026-05-26 19:39:18 +00:00
jkunz	06d54db747	fix(ui): remove redundant wrappers around Cloudly tables	2026-05-26 19:38:52 +00:00
jkunz	756c35aa05	v6.3.0 Docker (tags) / release (push) Failing after 1s Details	2026-05-26 15:29:07 +00:00
jkunz	2adb86c5ea	feat(hostedapp): add hosted app lifecycle protocol support	2026-05-26 15:27:00 +00:00
jkunz	f6ab7460e1	v6.2.0 Docker (tags) / release (push) Failing after 1s Details	2026-05-26 11:06:45 +00:00
jkunz	2b65ddc193	feat(appstore): add App Store install and upgrade workflows	2026-05-26 11:06:21 +00:00
jkunz	bfda4b4ca1	v6.1.0 Docker (tags) / release (push) Failing after 1s Details	2026-05-26 09:58:01 +00:00
jkunz	a9d9ea585c	chore(changelog): remove duplicate pending entry	2026-05-26 09:54:59 +00:00
jkunz	56a62e7008	feat(images): improve image operations UI and record archive metadata	2026-05-26 09:54:26 +00:00