v6.2.0

feat(appstore): add App Store install and upgrade workflows
v6.1.0
2026-05-26 11:06:45 +00:00 · 2026-05-26 11:06:21 +00:00 · 2026-05-26 09:58:01 +00:00 · 2026-05-26 09:54:59 +00:00 · 2026-05-26 09:54:26 +00:00 · 2026-05-25 03:03:25 +00:00
43 changed files with 4677 additions and 495 deletions
@@ -1,10 +1,15 @@
 {
  "@git.zone/tsdocker": {
-    "registries": ["code.foss.global"],
+    "registries": [
+      "code.foss.global"
+    ],
    "registryRepoMap": {
      "code.foss.global": "serve.zone/cloudly"
    },
-    "platforms": ["linux/amd64", "linux/arm64"]
+    "platforms": [
+      "linux/amd64",
+      "linux/arm64"
+    ]
  },
  "@git.zone/tsbundle": {
    "bundles": [
@@ -14,7 +19,9 @@
        "outputMode": "bundle",
        "bundler": "esbuild",
        "production": true,
-        "includeFiles": ["./html/**/*.html"]
+        "includeFiles": [
+          "./html/**/*"
+        ]
      }
    ]
  },
@@ -29,7 +36,10 @@
    "watchers": [
      {
        "name": "backend",
-        "watch": ["./ts/**/*", "./ts_cliclient/**/*"],
+        "watch": [
+          "./ts/**/*",
+          "./ts_cliclient/**/*"
+        ],
        "command": "pnpm run startTs",
        "restart": true,
        "debounce": 300,
@@ -41,11 +51,16 @@
        "name": "website",
        "from": "./ts_web/index.ts",
        "to": "./dist_serve/bundle.js",
-        "watchPatterns": ["./ts_web/**/*", "./html/**/*"],
+        "watchPatterns": [
+          "./ts_web/**/*",
+          "./html/**/*"
+        ],
        "triggerReload": true,
        "bundler": "esbuild",
        "production": false,
-        "includeFiles": ["./html/**/*.html"]
+        "includeFiles": [
+          "./html/**/*"
+        ]
      }
    ]
  },
@@ -58,10 +73,8 @@
    },
    "dockerBuildargEnvMap": {}
  },
-  "tsdoc": {
-    "legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
-  },
  "@git.zone/cli": {
+    "schemaVersion": 2,
    "projectType": "service",
    "module": {
      "githost": "code.foss.global",
@@ -98,6 +111,22 @@
        "backend",
        "security"
      ]
+    },
+    "release": {
+      "targets": {
+        "git": {
+          "enabled": true,
+          "remote": "origin"
+        },
+        "docker": {
+          "enabled": true,
+          "engine": "tsdocker",
+          "patterns": []
+        }
+      }
    }
+  },
+  "@git.zone/tsdoc": {
+    "legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
  }
 }
@@ -4,7 +4,7 @@ FROM code.foss.global/host.today/ht-docker-node:lts AS build

 WORKDIR /app

-COPY package.json pnpm-lock.yaml ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 RUN pnpm install --frozen-lockfile

 COPY . ./
@@ -3,6 +3,90 @@
 ## Pending


+## 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
+
+- switch App Store APIs to the shared appstore client
+  - Replaces Cloudly App Store manager naming and request methods with App Store naming
+  - Uses `@serve.zone/appstore` for app metadata parsing and source resolution
+  - Adds `servezone.appstore.json` as Cloudly's source-owned App Store manifest
+
+## 2026-05-24 - 5.9.0
+
+### Features
+
+- accept Spark node heartbeats
+  - Adds a Spark heartbeat HTTP endpoint for cluster nodes
+  - Stores Spark metrics and runtime info on cluster node records
+  - Extends jump onboarding with per-node Spark telemetry credentials
+
+### Fixes
+
+- invalidate expired dashboard sessions and return admins to login
+
+### Maintenance
+
+- refresh release tooling dependencies
+- update `@serve.zone/interfaces` to the Spark telemetry contract release
+
+## 2026-05-24 - 5.8.2
+
+- update Cloudly to consume the released Jump Code API client
+  - bumps `@serve.zone/api` to `^5.3.8`
+  - keeps Docker release installs working with fresh serve.zone package releases
+  - refreshes mature build, bundle, test, docs, and watch tooling
+  - stabilizes API client integration test setup and cleanup
+
+## 2026-05-23 - 5.8.1
+
+### Fixes
+
+- allow Docker builds to install freshly released serve.zone interfaces
+  - Copies pnpm-workspace.yaml into the Docker dependency install layer
+  - Excludes @serve.zone/interfaces from pnpm 11 minimum release age checks during release builds
+
+## 2026-05-23 - 5.8.0
+
+### Features
+
+- add service detail runtime actions and app catalog onboarding
+  - Adds service detail pages with live deployments, restart, kill, and deployment IDE access
+  - Adds app catalog install/update detection contracts and Cloudly handlers
+  - Adds node jump codes for connecting systems to clusters
+  - Updates Cloudly to pnpm 11 and @serve.zone/interfaces 5.9.0
+
+## 2026-05-21 - 5.7.1
+
+### Fixes
+
+- clean up Cloudly dashboard console and asset errors
+  - replace invalid Lucide icon references in table actions and context menu items
+  - add PWA manifest and local SVG favicon assets to avoid 404s
+  - align local Cloudly custom element tags with canonical kebab-case names
+  - remove noisy frontend debug logging from login and revenue checks
+
 ## 2026-05-21 - 5.7.0

 ### Features
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Cloudly">
+  <rect width="64" height="64" rx="14" fill="#050505"/>
+  <path d="M19 40h27a9 9 0 0 0 1.5-17.9A14 14 0 0 0 20.2 17 11.5 11.5 0 0 0 19 40Z" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M23 32h18" stroke="#7dd3fc" stroke-width="4" stroke-linecap="round"/>
+</svg>
@@ -14,7 +14,7 @@

    <!--Lets make sure we recognize this as an PWA-->
    <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" type="image/png" href="/assetbroker/manifest/favicon.png" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

    <!--Lets load standard fonts-->
    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
@@ -114,7 +114,6 @@
        } else {
          window.revenueEnabled = false;
        }
-        console.log(`revenue enabled: ${window.revenueEnabled}`);
      };

      runRevenueCheck();
@@ -0,0 +1,18 @@
+{
+  "name": "Cloudly",
+  "short_name": "Cloudly",
+  "description": "Cloudly infrastructure management dashboard",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}
@@ -1,6 +1,6 @@
 {
  "name": "@serve.zone/cloudly",
-  "version": "5.7.0",
+  "version": "6.2.0",
  "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,15 +23,15 @@
    "docs": "tsdoc aidoc"
  },
  "devDependencies": {
-    "@git.zone/tsbuild": "^4.4.0",
-    "@git.zone/tsbundle": "^2.10.1",
-    "@git.zone/tsdoc": "^2.0.3",
-    "@git.zone/tsdocker": "^2.2.6",
-    "@git.zone/tspublish": "^1.11.6",
-    "@git.zone/tstest": "^3.6.5",
-    "@git.zone/tswatch": "^3.3.3",
+    "@git.zone/tsbuild": "^4.4.1",
+    "@git.zone/tsbundle": "^2.10.4",
+    "@git.zone/tsdoc": "^2.0.5",
+    "@git.zone/tsdocker": "^2.3.0",
+    "@git.zone/tspublish": "^1.11.7",
+    "@git.zone/tstest": "^3.6.6",
+    "@git.zone/tswatch": "^3.3.5",
    "@push.rocks/smartnetwork": "^4.7.1",
-    "@types/node": "^25.6.2"
+    "@types/node": "^25.9.0"
  },
  "dependencies": {
    "@api.global/typedrequest": "3.3.1",
@@ -45,7 +45,7 @@
    "@design.estate/dees-catalog": "^3.81.0",
    "@design.estate/dees-domtools": "^2.5.6",
    "@design.estate/dees-element": "^2.2.4",
-    "@git.zone/tsrun": "^2.0.3",
+    "@git.zone/tsrun": "^2.0.4",
    "@push.rocks/early": "^4.0.4",
    "@push.rocks/projectinfo": "^5.1.0",
    "@push.rocks/qenv": "^6.1.4",
@@ -78,8 +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.7",
-    "@serve.zone/interfaces": "^5.6.0",
+    "@serve.zone/api": "^5.3.8",
+    "@serve.zone/appstore": "^0.2.0",
+    "@serve.zone/interfaces": "^6.0.1",
    "@tsclass/tsclass": "^9.5.1"
  },
  "files": [
@@ -134,5 +135,5 @@
    "backend",
    "security"
  ],
-  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
+  "packageManager": "pnpm@11.2.2"
 }
@@ -0,0 +1,13 @@
+minimumReleaseAgeExclude:
+  - '@serve.zone/api'
+  - '@serve.zone/appstore'
+  - '@serve.zone/interfaces'
+
+allowBuilds:
+  '@design.estate/dees-catalog': false
+  cpu-features: true
+  esbuild: true
+  mongodb-memory-server: false
+  puppeteer: false
+  sharp: false
+  ssh2: true
@@ -52,6 +52,7 @@ Cloudly currently coordinates these areas:
 | `CloudflareConnector` | Optional Cloudflare account used by ACME DNS-01 when `cloudflareToken` is configured in settings. |
 | `LetsencryptConnector` | SmartACME certificate issuance and certificate lookup. |
 | `CloudlyCoreflowManager` | Authenticates Coreflow, returns cluster config payloads, and pushes config updates to connected Coreflow clients. |
+| `CloudlyJumpManager` | Creates short-lived Jump Codes for onboarding existing systems into clusters. |
 | `CloudlyRegistryManager` | Embedded OCI registry backed by configured S3 storage, including deploy-on-push metadata updates. |
 | `CloudlyBaseOsManager` | BaseOS registration, heartbeat, image build orchestration, worker selection, and artifact downloads. |
 | `CloudlyBackupManager` | Service backup/restore orchestration and remote archive object replication. |
@@ -194,6 +195,18 @@ The implemented cluster flow is intentionally simple:

 When service, platform, or gateway settings change, Cloudly pushes updated config to connected Coreflow clients where supported.

+### Jump Codes for Existing Systems
+
+Admins can generate a short-lived, single-use Jump Code for a cluster. The dashboard displays a command in this form:
+
+```sh
+curl -fsSL 'https://cloudly.example.com/jump/<code>' | sudo bash
+```
+
+The public `/jump/<code>` URL renders a browser landing page for humans and a shell bootstrap script for `curl`/CLI clients. The script installs the required host tooling, claims the code through `POST /jump/v1/claim`, receives the cluster runtime token, and starts Spark in `coreflow-node` mode. The long-lived cluster token is never displayed in the dashboard command.
+
+Jump Codes expire by default after 30 minutes and are consumed on first successful claim.
+
 ## Registry and Deploy-On-Push

 Cloudly serves an OCI registry under `/v2` through `CloudlyRegistryManager`. The registry uses configured S3 storage and issues OCI tokens from Cloudly authentication state.
@@ -0,0 +1,129 @@
+{
+  "schemaVersion": 1,
+  "app": {
+    "id": "cloudly",
+    "name": "Cloudly",
+    "description": "Multi-node serve.zone control plane for clusters, workload services, domains, and deployments.",
+    "category": "Dev Tools",
+    "iconName": "server",
+    "tags": ["serve.zone", "control-plane", "clusters", "deployments"],
+    "maintainer": "serve.zone",
+    "links": {
+      "Source": "https://code.foss.global/serve.zone/cloudly",
+      "Docs": "https://serve.zone"
+    }
+  },
+  "latestVersion": "latest",
+  "source": {
+    "type": "dockerImage",
+    "image": "code.foss.global/serve.zone/cloudly:latest",
+    "tracking": "digest"
+  },
+  "runtime": {
+    "image": "code.foss.global/serve.zone/cloudly:latest",
+    "port": 80,
+    "envVars": [
+      {
+        "key": "SERVEZONE_ENVIRONMENT",
+        "value": "production",
+        "description": "Cloudly runtime environment.",
+        "required": true
+      },
+      {
+        "key": "SERVEZONE_URL",
+        "value": "${SERVICE_DOMAIN}",
+        "description": "Public Cloudly hostname without protocol.",
+        "required": true
+      },
+      {
+        "key": "SERVEZONE_PORT",
+        "value": "80",
+        "description": "Internal Cloudly HTTP port inside the container.",
+        "required": true
+      },
+      {
+        "key": "SERVEZONE_SSLMODE",
+        "value": "external",
+        "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}",
+        "description": "Authenticated MongoDB connection URL provisioned by Onebox.",
+        "required": true
+      },
+      {
+        "key": "MONGODB_NAME",
+        "value": "${MONGODB_DATABASE}",
+        "description": "MongoDB database name provisioned by Onebox.",
+        "required": true
+      },
+      {
+        "key": "MONGODB_USER",
+        "value": "${MONGODB_USERNAME}",
+        "description": "MongoDB username provisioned by Onebox.",
+        "required": true
+      },
+      {
+        "key": "MONGODB_PASS",
+        "value": "${MONGODB_PASSWORD}",
+        "description": "MongoDB password provisioned by Onebox.",
+        "required": true
+      },
+      {
+        "key": "S3_ENDPOINT",
+        "value": "onebox-minio",
+        "description": "S3 endpoint host for the MinIO service provisioned by Onebox.",
+        "required": true
+      },
+      {
+        "key": "S3_PORT",
+        "value": "9000",
+        "description": "S3 endpoint port for the MinIO service provisioned by Onebox.",
+        "required": true
+      },
+      {
+        "key": "S3_USESSL",
+        "value": "false",
+        "description": "Use plain HTTP for internal MinIO traffic on the Onebox network.",
+        "required": true
+      },
+      {
+        "key": "S3_BUCKET",
+        "value": "${S3_BUCKET}",
+        "description": "S3 bucket provisioned by Onebox for Cloudly's registry.",
+        "required": true
+      },
+      {
+        "key": "S3_ACCESSKEY",
+        "value": "${S3_ACCESS_KEY}",
+        "description": "S3 access key provisioned by Onebox.",
+        "required": true
+      },
+      {
+        "key": "S3_SECRETKEY",
+        "value": "${S3_SECRET_KEY}",
+        "description": "S3 secret key provisioned by Onebox.",
+        "required": true
+      }
+    ],
+    "platformRequirements": {
+      "mongodb": true,
+      "s3": true
+    },
+    "minOneboxVersion": "1.24.2",
+    "backupBeforeUpgrade": true,
+    "healthCheck": {
+      "path": "/status",
+      "port": 80,
+      "expectedStatus": 200
+    }
+  }
+}
@@ -1,3 +1,6 @@
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+
 import { Qenv } from '@push.rocks/qenv';
 import { SmartNetwork } from '@push.rocks/smartnetwork';
 import { tap } from '@git.zone/tstest/tapbundle';
@@ -58,7 +61,11 @@ export const testCloudlyConfig: cloudly.ICloudlyConfig = {
  })(),
 };

-await tapNodeTools.testFileProvider.getDockerAlpineImageAsLocalTarball();
+const alpineImageTarballPath = path.join(process.cwd(), '.nogit/testfiles/alpine.tar');
+const existingAlpineImageTarball = await fs.stat(alpineImageTarballPath).catch(() => undefined);
+if (!existingAlpineImageTarball?.isFile() || existingAlpineImageTarball.size === 0) {
+  await tapNodeTools.testFileProvider.getDockerAlpineImageAsLocalTarball();
+}

 export const createCloudly = async () => {
  const cloudlyInstance = new cloudly.Cloudly(testCloudlyConfig);
@@ -92,6 +92,58 @@ tap.test('should get an identity', async () => {
  }
 });

+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');
+  const jumpCommand = await createJumpCommandTR.fire({
+    identity: testClient.identity,
+    clusterId: cluster.id,
+  });
+
+  expect(jumpCommand.jumpUrl.includes('/jump/')).toBeTrue();
+  expect(jumpCommand.command.includes(jumpCommand.jumpUrl)).toBeTrue();
+
+  const setupResponse = await fetch(jumpCommand.jumpUrl, {
+    headers: {
+      accept: '*/*',
+      'user-agent': 'curl/8.0',
+    },
+  });
+  const setupScript = await setupResponse.text();
+  expect(setupResponse.status).toEqual(200);
+  expect(setupScript.includes('spark installdaemon --mode=coreflow-node')).toBeTrue();
+
+  const claimResponse = await fetch(
+    `http://${helpers.testCloudlyConfig.publicUrl}:${helpers.testCloudlyConfig.publicPort}/jump/v1/claim`,
+    {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+      },
+      body: JSON.stringify({ jumpCode: jumpCommand.jumpCode, hostname: 'jump-code-test-node' }),
+    },
+  );
+  const claimBody = await claimResponse.json();
+  expect(claimResponse.status).toEqual(200);
+  expect(claimBody.accepted).toBeTrue();
+  expect(claimBody.nodeId).toBeTruthy();
+  expect(claimBody.coreflowJumpCode).toBeTruthy();
+
+  const secondClaimResponse = await fetch(
+    `http://${helpers.testCloudlyConfig.publicUrl}:${helpers.testCloudlyConfig.publicPort}/jump/v1/claim`,
+    {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+      },
+      body: JSON.stringify({ jumpCode: jumpCommand.jumpCode }),
+    },
+  );
+  const secondClaimBody = await secondClaimResponse.json();
+  expect(secondClaimResponse.status).toEqual(400);
+  expect(secondClaimBody.accepted).toBeFalse();
+});
+
 tap.test('should expose the OCI registry endpoint', async () => {
  const response = await fetch(
    `http://${helpers.testCloudlyConfig.publicUrl}:${helpers.testCloudlyConfig.publicPort}/v2/`,
@@ -411,10 +463,10 @@ tap.test('should upload an image version', async () => {
 });

 tap.test('should stop the apiclient', async (toolsArg) => {
-  await toolsArg.delayFor(10000);
-  await helpers.stopCloudly();
  await testClient.stop();
  await testCloudly.stop();
+  await helpers.stopCloudly();
+  toolsArg.delayFor(1000).then(() => process.exit());
 })

 export default tap.start();
@@ -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();
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/cloudly',
-  version: '5.7.0',
+  version: '6.2.0',
  description: 'A comprehensive tool for managing containerized applications across multiple cloud providers using Docker Swarmkit, featuring web, CLI, and API interfaces.'
 }
@@ -34,6 +34,8 @@ import { CloudlySettingsManager } from './manager.settings/classes.settingsmanag
 import { CloudlyPlatformManager } from './manager.platform/classes.platformmanager.js';
 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 { CloudlyJumpManager } from './manager.jump/classes.jumpmanager.js';

 /**
 * Cloudly class can be used to instantiate a cloudly server.
@@ -79,6 +81,8 @@ export class Cloudly {
  public nodeManager: CloudlyNodeManager;
  public baremetalManager: CloudlyBaremetalManager;
  public baseOsManager: CloudlyBaseOsManager;
+  public appStoreManager: CloudlyAppStoreManager;
+  public jumpManager: CloudlyJumpManager;

  private readyDeferred = new plugins.smartpromise.Deferred();

@@ -115,8 +119,10 @@ export class Cloudly {
    this.backupManager = new CloudlyBackupManager(this);
    this.baseOsManager = new CloudlyBaseOsManager(this);
    this.secretManager = new CloudlySecretManager(this);
+    this.appStoreManager = new CloudlyAppStoreManager(this);
    this.nodeManager = new CloudlyNodeManager(this);
    this.baremetalManager = new CloudlyBaremetalManager(this);
+    this.jumpManager = new CloudlyJumpManager(this);
  }

  /**
@@ -138,12 +144,14 @@ export class Cloudly {
    await this.secretManager.start();
    await this.nodeManager.start();
    await this.baremetalManager.start();
+    await this.jumpManager.start();
    await this.serviceManager.start();
    await this.platformManager.start();
    await this.deploymentManager.start();
    await this.taskManager.init();
    await this.backupManager.start();
    await this.baseOsManager.start();
+    await this.appStoreManager.start();
    await this.registryManager.start();
    await this.domainManager.init();
    
@@ -173,10 +181,12 @@ export class Cloudly {
    await this.serviceManager.stop();
    await this.platformManager.stop();
    await this.deploymentManager.stop();
+    await this.jumpManager.stop();
    await this.taskManager.stop();
    await this.backupManager.stop();
    await this.baseOsManager.stop();
    await this.registryManager.stop();
+    await this.appStoreManager.stop();
    await this.externalRegistryManager.stop();
  }
 }
@@ -95,6 +95,21 @@ export class CloudlyServer {
      'ALL',
      async (ctx) => this.cloudlyRef.nodeManager.curlfreshInstance.handleRequest(ctx),
    );
+    this.typedServer.addRoute(
+      '/jump/v1/claim',
+      'POST',
+      async (ctx) => this.cloudlyRef.jumpManager.handleClaimHttpRequest(ctx),
+    );
+    this.typedServer.addRoute(
+      '/jump/:code/setup.sh',
+      'GET',
+      async (ctx) => this.cloudlyRef.jumpManager.handleSetupScriptHttpRequest(ctx),
+    );
+    this.typedServer.addRoute(
+      '/jump/:code',
+      'GET',
+      async (ctx) => this.cloudlyRef.jumpManager.handleJumpHttpRequest(ctx),
+    );
    this.typedServer.addRoute(
      '/baseos/v1/nodes/register',
      'POST',
@@ -105,6 +120,11 @@ export class CloudlyServer {
      'POST',
      async (ctx) => this.cloudlyRef.baseOsManager.handleHeartbeatHttpRequest(ctx),
    );
+    this.typedServer.addRoute(
+      '/spark/v1/nodes/heartbeat',
+      'POST',
+      async (ctx) => this.cloudlyRef.nodeManager.handleSparkHeartbeatHttpRequest(ctx),
+    );
    this.typedServer.addRoute(
      '/baseos/v1/images/:buildId/download',
      'GET',
@@ -11,6 +11,17 @@ export interface IJwtData {
  expiresAt: number;
 }

+interface IReq_AdminValidateIdentity {
+  method: 'adminValidateIdentity';
+  request: {
+    identity: plugins.servezoneInterfaces.data.IIdentity;
+  };
+  response: {
+    valid: boolean;
+    reason?: string;
+  };
+}
+
 export class CloudlyAuthManager {
  cloudlyRef: Cloudly;
  public get db() {
@@ -82,6 +93,16 @@ export class CloudlyAuthManager {
        },
      ),
    );
+
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<IReq_AdminValidateIdentity>('adminValidateIdentity', async (dataArg) => {
+        const valid = await this.adminIdentityGuard.exec(dataArg).catch(() => false);
+        return {
+          valid,
+          reason: valid ? undefined : 'identity is not valid',
+        };
+      }),
+    );
  }

  private async bootstrapInitialAdmin() {
@@ -126,28 +147,22 @@ export class CloudlyAuthManager {
    identity: plugins.servezoneInterfaces.data.IIdentity;
  }>(
    async (dataArg) => {
-      const jwt = dataArg.identity.jwt;
-      const jwtData: IJwtData = await this.smartjwtInstance.verifyJWTAndGetData(jwt);
-      const expired = jwtData.expiresAt < Date.now();
-      plugins.smartexpect
-        .expect(jwtData.status)
-        .setFailMessage('user not logged in')
-        .toEqual('loggedIn');
-      plugins.smartexpect.expect(expired).setFailMessage(`jwt expired`).toBeFalse();
-      plugins.smartexpect
-        .expect(dataArg.identity.expiresAt)
-        .setFailMessage(
-          `expiresAt >>identity valid until:${dataArg.identity.expiresAt}, but jwt says: ${jwtData.expiresAt}<< has been tampered with`,
-        )
-        .toEqual(jwtData.expiresAt);
-      plugins.smartexpect
-        .expect(dataArg.identity.userId)
-        .setFailMessage('userId has been tampered with')
-        .toEqual(jwtData.userId);
-      if (expired) {
-        throw new Error('identity is expired');
+      try {
+        const jwt = dataArg.identity?.jwt;
+        if (!jwt) {
+          return false;
+        }
+        const jwtData: IJwtData = await this.smartjwtInstance.verifyJWTAndGetData(jwt);
+        const expired = jwtData.expiresAt < Date.now();
+        return (
+          jwtData.status === 'loggedIn' &&
+          !expired &&
+          dataArg.identity.expiresAt === jwtData.expiresAt &&
+          dataArg.identity.userId === jwtData.userId
+        );
+      } catch {
+        return false;
      }
-      return true;
    },
    {
      failedHint: 'identity is not valid.',
@@ -159,16 +174,17 @@ export class CloudlyAuthManager {
    identity: plugins.servezoneInterfaces.data.IIdentity;
  }>(
    async (dataArg) => {
-      await plugins.smartguard.passGuardsOrReject(dataArg, [this.validIdentityGuard]);
+      const validIdentity = await this.validIdentityGuard.exec(dataArg);
+      if (!validIdentity) {
+        return false;
+      }
      const jwt = dataArg.identity.jwt;
      const jwtData: IJwtData = await this.smartjwtInstance.verifyJWTAndGetData(jwt);
      const user = await this.CUser.getInstance({ id: jwtData.userId });
-      const isAdminBool = user.data.role === 'admin';
-      console.log(`user is admin: ${isAdminBool}`);
-      return isAdminBool;
+      return user?.data.role === 'admin';
    },
    {
-      failedHint: 'user is not admin.',
+      failedHint: 'identity is not valid or user is not admin.',
      name: 'adminIdentityGuard',
    },
  );
@@ -177,14 +193,17 @@ export class CloudlyAuthManager {
    identity: plugins.servezoneInterfaces.data.IIdentity;
  }>(
    async (dataArg) => {
-      await plugins.smartguard.passGuardsOrReject(dataArg, [this.validIdentityGuard]);
+      const validIdentity = await this.validIdentityGuard.exec(dataArg);
+      if (!validIdentity) {
+        return false;
+      }
      const jwt = dataArg.identity.jwt;
      const jwtData: IJwtData = await this.smartjwtInstance.verifyJWTAndGetData(jwt);
      const user = await this.CUser.getInstance({ id: jwtData.userId });
-      return user.data.role === 'admin' || user.data.role === 'cluster';
+      return user?.data.role === 'admin' || user?.data.role === 'cluster';
    },
    {
-      failedHint: 'user is not admin or cluster.',
+      failedHint: 'identity is not valid or user is not admin or cluster.',
      name: 'adminOrClusterIdentityGuard',
    },
  );
@@ -3,6 +3,30 @@ import { Cloudly } from '../classes.cloudly.js';
 import type { Cluster } from '../manager.cluster/classes.cluster.js';
 import { logger } from '../logger.js';

+type TCoreflowDeploymentRequest =
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_RestartDeployment
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_KillDeployment
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_DeploymentWorkspaceReadFile
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_DeploymentWorkspaceWriteFile
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_DeploymentWorkspaceReadDir
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_DeploymentWorkspaceMkdir
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_DeploymentWorkspaceRm
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_DeploymentWorkspaceExists
+  | plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_DeploymentWorkspaceExec;
+
+type TCoreflowDeploymentActionMethod =
+  | 'coreflowRestartDeployment'
+  | 'coreflowKillDeployment';
+
+type TCoreflowDeploymentActionRequest = Extract<TCoreflowDeploymentRequest, {
+  method: TCoreflowDeploymentActionMethod;
+}>;
+
+export type TCoreflowDeploymentWorkspaceMethod = Exclude<
+  TCoreflowDeploymentRequest['method'],
+  TCoreflowDeploymentActionMethod
+>;
+
 /**
 * in charge of talking to coreflow services on clusters
 * coreflow runs on a server when ServerManager is done.
@@ -159,4 +183,87 @@ export class CloudlyCoreflowManager {

    return connections.length;
  }
+
+  public async getRuntimeDeploymentsForService(
+    serviceArg: plugins.servezoneInterfaces.data.IService,
+  ): Promise<plugins.servezoneInterfaces.data.IDeployment[]> {
+    const connections = await this.getConnectedCoreflowConnections();
+    const deployments: plugins.servezoneInterfaces.data.IDeployment[] = [];
+    for (const connection of connections) {
+      try {
+        const request = this.cloudlyRef.server.typedServer.typedsocket.createTypedRequest<plugins.servezoneInterfaces.requests.deployment.IReq_Cloudly_Coreflow_GetServiceDeployments>(
+          'coreflowGetServiceDeployments',
+          connection,
+        );
+        const response = await request.fire({ service: serviceArg });
+        deployments.push(...(response.deployments || []));
+      } catch (error) {
+        logger.log('warn', `failed to query coreflow deployments: ${(error as Error).message}`);
+      }
+    }
+    return deployments;
+  }
+
+  public async fireDeploymentRuntimeAction(
+    methodArg: TCoreflowDeploymentActionMethod,
+    deploymentIdArg: string,
+  ): Promise<{ deployment: plugins.servezoneInterfaces.data.IDeployment }> {
+    const response = await this.fireCoreflowRequestUntilFound<TCoreflowDeploymentActionRequest>(methodArg, {
+      deploymentId: deploymentIdArg,
+    });
+    if (!response.deployment) {
+      throw new plugins.typedrequest.TypedResponseError('Coreflow did not return deployment data');
+    }
+    return { deployment: response.deployment };
+  }
+
+  public async fireDeploymentWorkspaceRequest(
+    methodArg: TCoreflowDeploymentWorkspaceMethod,
+    payloadArg: Extract<TCoreflowDeploymentRequest, { method: typeof methodArg }>['request'],
+  ) {
+    return await this.fireCoreflowRequestUntilFound(methodArg, payloadArg);
+  }
+
+  private async fireCoreflowRequestUntilFound<TRequest extends TCoreflowDeploymentRequest>(
+    methodArg: TRequest['method'],
+    payloadArg: TRequest['request'],
+  ): Promise<TRequest['response']> {
+    const connections = await this.getConnectedCoreflowConnections();
+    if (connections.length === 0) {
+      throw new plugins.typedrequest.TypedResponseError('No connected coreflow');
+    }
+
+    let lastError: Error | undefined;
+    for (const connection of connections) {
+      try {
+        const request = this.cloudlyRef.server.typedServer.typedsocket.createTypedRequest<TRequest>(
+          methodArg,
+          connection,
+        );
+        const response = await request.fire(payloadArg);
+        if (response?.found) {
+          return response;
+        }
+      } catch (error) {
+        lastError = error as Error;
+      }
+    }
+
+    throw new plugins.typedrequest.TypedResponseError(
+      lastError?.message || 'No connected coreflow found the requested deployment',
+    );
+  }
+
+  private async getConnectedCoreflowConnections() {
+    const typedsocket = this.cloudlyRef.server.typedServer?.typedsocket;
+    if (!typedsocket) {
+      return [];
+    }
+
+    return await typedsocket.findAllTargetConnections(async (connectionArg) => {
+      const identityTag = await connectionArg.getTagById('identity');
+      const identity = identityTag?.payload as plugins.servezoneInterfaces.data.IIdentity | undefined;
+      return identity?.role === 'cluster' && !!identity.userId;
+    });
+  }
 }
@@ -1,6 +1,7 @@
 import type { Cloudly } from '../classes.cloudly.js';
 import * as plugins from '../plugins.js';
 import { Deployment } from './classes.deployment.js';
+import type { TCoreflowDeploymentWorkspaceMethod } from '../manager.coreflow/coreflowmanager.js';

 export class DeploymentManager {
  public typedrouter = new plugins.typedrequest.TypedRouter();
@@ -71,6 +72,18 @@ export class DeploymentManager {
            this.cloudlyRef.authManager.validIdentityGuard,
          ]);

+          const service = await this.cloudlyRef.serviceManager.CService.getInstance({
+            id: reqArg.serviceId,
+          });
+          if (service) {
+            const runtimeDeployments = await this.cloudlyRef.coreflowManager.getRuntimeDeploymentsForService(
+              await service.createSavableObject(),
+            );
+            if (runtimeDeployments.length > 0) {
+              return { deployments: runtimeDeployments };
+            }
+          }
+
          const deployments = await this.CDeployment.getInstances({
            serviceId: reqArg.serviceId,
          });
@@ -204,29 +217,41 @@ export class DeploymentManager {
        'restartDeployment',
        async (reqArg) => {
          await plugins.smartguard.passGuardsOrReject(reqArg, [
-            this.cloudlyRef.authManager.validIdentityGuard,
+            this.cloudlyRef.authManager.adminIdentityGuard,
          ]);

-          const deployment = await this.CDeployment.getInstance({
-            id: reqArg.deploymentId,
-          });
-
-          if (!deployment) {
-            throw new Error('Deployment not found');
-          }
-
-          // TODO: Implement actual restart logic with Docker/container runtime
-          deployment.status = 'starting';
-          await deployment.save();
+          const result = await this.cloudlyRef.coreflowManager.fireDeploymentRuntimeAction(
+            'coreflowRestartDeployment',
+            reqArg.deploymentId,
+          );

          return {
            success: true,
-            deployment: await deployment.createSavableObject(),
+            deployment: result.deployment,
          };
        }
      )
    );

+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.deployment.IReq_Any_Cloudly_KillDeployment>(
+        'killDeployment',
+        async (reqArg) => {
+          await plugins.smartguard.passGuardsOrReject(reqArg, [
+            this.cloudlyRef.authManager.adminIdentityGuard,
+          ]);
+          const result = await this.cloudlyRef.coreflowManager.fireDeploymentRuntimeAction(
+            'coreflowKillDeployment',
+            reqArg.deploymentId,
+          );
+          return {
+            success: true,
+            deployment: result.deployment,
+          };
+        },
+      ),
+    );
+
    // Scale deployment
    this.typedrouter.addTypedHandler(
      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.deployment.IReq_Any_Cloudly_ScaleDeployment>(
@@ -254,6 +279,31 @@ export class DeploymentManager {
        }
      )
    );
+
+    const addDeploymentWorkspaceHandler = (methodArg: string, coreflowMethodArg: TCoreflowDeploymentWorkspaceMethod) => {
+      this.typedrouter.addTypedHandler(
+        new plugins.typedrequest.TypedHandler<any>(methodArg, async (reqArg) => {
+          await plugins.smartguard.passGuardsOrReject(reqArg, [
+            this.cloudlyRef.authManager.adminIdentityGuard,
+          ]);
+          const { identity: _identity, ...payload } = reqArg;
+          const response = await this.cloudlyRef.coreflowManager.fireDeploymentWorkspaceRequest(
+            coreflowMethodArg,
+            payload,
+          );
+          const { found: _found, ...publicResponse } = response;
+          return publicResponse;
+        }),
+      );
+    };
+
+    addDeploymentWorkspaceHandler('deploymentWorkspaceReadFile', 'coreflowDeploymentWorkspaceReadFile');
+    addDeploymentWorkspaceHandler('deploymentWorkspaceWriteFile', 'coreflowDeploymentWorkspaceWriteFile');
+    addDeploymentWorkspaceHandler('deploymentWorkspaceReadDir', 'coreflowDeploymentWorkspaceReadDir');
+    addDeploymentWorkspaceHandler('deploymentWorkspaceMkdir', 'coreflowDeploymentWorkspaceMkdir');
+    addDeploymentWorkspaceHandler('deploymentWorkspaceRm', 'coreflowDeploymentWorkspaceRm');
+    addDeploymentWorkspaceHandler('deploymentWorkspaceExists', 'coreflowDeploymentWorkspaceExists');
+    addDeploymentWorkspaceHandler('deploymentWorkspaceExec', 'coreflowDeploymentWorkspaceExec');
  }

  /**
@@ -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);
          });
@@ -0,0 +1,43 @@
+import * as plugins from '../plugins.js';
+
+export interface IJumpCodeData {
+  clusterId: string;
+  createdBy: string;
+  role: plugins.servezoneInterfaces.data.IClusterNode['data']['role'];
+  nodeType: plugins.servezoneInterfaces.data.IClusterNode['data']['nodeType'];
+  createdAt: number;
+  expiresAt: number;
+  consumedAt?: number;
+  consumedByNodeId?: string;
+}
+
+export interface IJumpCodePublic {
+  id: string;
+  data: IJumpCodeData;
+}
+
+@plugins.smartdata.Manager()
+export class JumpCode extends plugins.smartdata.SmartDataDbDoc<JumpCode, IJumpCodePublic> {
+  constructor(optionsArg?: IJumpCodePublic & { tokenHash?: string }) {
+    super();
+    if (optionsArg) {
+      Object.assign(this, optionsArg);
+    }
+  }
+
+  @plugins.smartdata.unI()
+  public id!: string;
+
+  @plugins.smartdata.svDb()
+  public tokenHash!: string;
+
+  @plugins.smartdata.svDb()
+  public data!: IJumpCodeData;
+
+  public toPublicObject(): IJumpCodePublic {
+    return {
+      id: this.id,
+      data: this.data,
+    };
+  }
+}
@@ -0,0 +1,379 @@
+import * as plugins from '../plugins.js';
+import type { Cloudly } from '../classes.cloudly.js';
+import { logger } from '../logger.js';
+import { JumpCode } from './classes.jumpcode.js';
+
+type IReqCreateNodeJumpCommand = plugins.servezoneInterfaces.requests.node.IReq_Any_Cloudly_CreateNodeJumpCommand['request'];
+type IResCreateNodeJumpCommand = plugins.servezoneInterfaces.requests.node.IReq_Any_Cloudly_CreateNodeJumpCommand['response'];
+
+interface IClaimJumpCodeRequest {
+  jumpCode?: string;
+  hostname?: string;
+}
+
+interface IClaimJumpCodeResponse {
+  accepted: boolean;
+  message?: string;
+  nodeId?: string;
+  sparkNodeToken?: string;
+  cloudlyUrl?: string;
+  coreflowJumpCode?: string;
+}
+
+export class CloudlyJumpManager {
+  public cloudlyRef: Cloudly;
+  public typedRouter = new plugins.typedrequest.TypedRouter();
+  public CJumpCode = plugins.smartdata.setDefaultManagerForDoc(this, JumpCode);
+
+  public get db() {
+    return this.cloudlyRef.mongodbConnector.smartdataDb;
+  }
+
+  private defaultTtlMs = 1000 * 60 * 30;
+  private maxTtlMs = 1000 * 60 * 60 * 24;
+
+  constructor(cloudlyRefArg: Cloudly) {
+    this.cloudlyRef = cloudlyRefArg;
+    this.cloudlyRef.typedrouter.addTypedRouter(this.typedRouter);
+
+    this.typedRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.servezoneInterfaces.requests.node.IReq_Any_Cloudly_CreateNodeJumpCommand>('createNodeJumpCommand', async (requestDataArg) => {
+        await plugins.smartguard.passGuardsOrReject(
+          { identity: requestDataArg.identity },
+          [this.cloudlyRef.authManager.adminIdentityGuard],
+        );
+        return await this.createNodeJumpCommand(requestDataArg);
+      }),
+    );
+  }
+
+  public async start() {
+    logger.log('info', 'Jump manager started');
+  }
+
+  public async stop() {
+    logger.log('info', 'Jump manager stopped');
+  }
+
+  public async createNodeJumpCommand(optionsArg: IReqCreateNodeJumpCommand): Promise<IResCreateNodeJumpCommand> {
+    const cluster = await this.cloudlyRef.clusterManager.CCluster.getInstance({
+      id: optionsArg.clusterId,
+    });
+    if (!cluster) {
+      throw new plugins.typedrequest.TypedResponseError(`Cluster ${optionsArg.clusterId} not found`);
+    }
+
+    const now = Date.now();
+    const ttlMs = this.normalizeTtl(optionsArg.ttlMs);
+    const jumpCode = this.createJumpCode();
+    const jumpCodeDoc = new this.CJumpCode({
+      id: await this.CJumpCode.getNewId(),
+      tokenHash: this.hashSecret(jumpCode),
+      data: {
+        clusterId: cluster.id,
+        createdBy: optionsArg.identity.userId,
+        role: optionsArg.role || 'worker',
+        nodeType: optionsArg.nodeType || 'baremetal',
+        createdAt: now,
+        expiresAt: now + ttlMs,
+      },
+    });
+    await jumpCodeDoc.save();
+
+    const jumpUrl = `${this.getPublicCloudlyUrl()}/jump/${encodeURIComponent(jumpCode)}`;
+    const setupUrl = `${jumpUrl}/setup.sh`;
+    return {
+      jumpCode,
+      jumpUrl,
+      setupUrl,
+      command: `curl -fsSL '${jumpUrl}' | sudo bash`,
+      expiresAt: jumpCodeDoc.data.expiresAt,
+    };
+  }
+
+  public async handleJumpHttpRequest(ctxArg: plugins.typedserver.IRequestContext): Promise<Response> {
+    const jumpCode = this.getCodeFromContext(ctxArg);
+    if (this.shouldRenderHtml(ctxArg)) {
+      return await this.createLandingPageResponse(jumpCode);
+    }
+    return await this.createSetupScriptResponse(jumpCode);
+  }
+
+  public async handleSetupScriptHttpRequest(ctxArg: plugins.typedserver.IRequestContext): Promise<Response> {
+    return await this.createSetupScriptResponse(this.getCodeFromContext(ctxArg));
+  }
+
+  public async handleClaimHttpRequest(ctxArg: plugins.typedserver.IRequestContext): Promise<Response> {
+    try {
+      const requestData = await this.readJsonBody<IClaimJumpCodeRequest>(ctxArg);
+      const response = await this.claimJumpCode(requestData);
+      return this.createJsonResponse(200, response);
+    } catch (error) {
+      return this.createJsonResponse(400, {
+        accepted: false,
+        message: (error as Error).message,
+      } satisfies IClaimJumpCodeResponse);
+    }
+  }
+
+  public async claimJumpCode(requestDataArg: IClaimJumpCodeRequest): Promise<IClaimJumpCodeResponse> {
+    if (!requestDataArg.jumpCode) {
+      throw new Error('Jump code is missing');
+    }
+
+    const jumpCodeDoc = await this.getJumpCodeByCode(requestDataArg.jumpCode);
+    if (!jumpCodeDoc) {
+      throw new Error('Jump code is invalid');
+    }
+    if (jumpCodeDoc.data.consumedAt) {
+      throw new Error('Jump code has already been used');
+    }
+    if (jumpCodeDoc.data.expiresAt <= Date.now()) {
+      throw new Error('Jump code has expired');
+    }
+
+    const cluster = await this.cloudlyRef.clusterManager.CCluster.getInstance({
+      id: jumpCodeDoc.data.clusterId,
+    });
+    if (!cluster) {
+      throw new Error('Jump code references a missing cluster');
+    }
+
+    const clusterUser = await this.cloudlyRef.authManager.CUser.getInstance({
+      id: cluster.data.userId,
+    });
+    const coreflowJumpCode = clusterUser?.data.tokens?.find((tokenArg) => tokenArg.expiresAt > Date.now())?.token;
+    if (!coreflowJumpCode) {
+      throw new Error('Cluster runtime token is missing or expired');
+    }
+
+    const nodeId = plugins.smartunique.shortId(8);
+    const now = Date.now();
+    const sparkNodeToken = await this.cloudlyRef.authManager.createNewSecureToken();
+    const node = new this.cloudlyRef.nodeManager.CClusterNode();
+    node.id = nodeId;
+    node.sparkNodeTokenHash = this.hashSecret(sparkNodeToken);
+    node.data = {
+      clusterId: cluster.id,
+      nodeType: jumpCodeDoc.data.nodeType,
+      status: 'initializing',
+      role: jumpCodeDoc.data.role,
+      joinedAt: now,
+      lastHealthCheck: now,
+      sshKeys: [],
+      requiredDebianPackages: [],
+    };
+    await node.save();
+
+    cluster.data.nodes = [
+      ...(cluster.data.nodes || []).filter((nodeArg) => nodeArg.id !== node.id),
+      await node.createSavableObject(),
+    ];
+    await cluster.save();
+
+    jumpCodeDoc.data = {
+      ...jumpCodeDoc.data,
+      consumedAt: now,
+      consumedByNodeId: node.id,
+    };
+    await jumpCodeDoc.save();
+
+    return {
+      accepted: true,
+      nodeId: node.id,
+      sparkNodeToken,
+      cloudlyUrl: cluster.data.cloudlyUrl || `${this.getPublicCloudlyUrl()}/`,
+      coreflowJumpCode,
+    };
+  }
+
+  private async createLandingPageResponse(jumpCodeArg: string) {
+    const jumpCodeDoc = await this.getJumpCodeByCode(jumpCodeArg);
+    let clusterName = 'Unknown cluster';
+    let isUsable = false;
+    if (jumpCodeDoc && !jumpCodeDoc.data.consumedAt && jumpCodeDoc.data.expiresAt > Date.now()) {
+      const cluster = await this.cloudlyRef.clusterManager.CCluster.getInstance({
+        id: jumpCodeDoc.data.clusterId,
+      });
+      clusterName = cluster?.data.name || jumpCodeDoc.data.clusterId;
+      isUsable = true;
+    }
+    const jumpUrl = `${this.getPublicCloudlyUrl()}/jump/${encodeURIComponent(jumpCodeArg)}`;
+    const command = `curl -fsSL '${jumpUrl}' | sudo bash`;
+    const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Cloudly Jump</title>
+    <style>
+      body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0d1117; color: #f0f6fc; }
+      main { max-width: 760px; margin: 10vh auto; padding: 32px; }
+      .card { border: 1px solid #30363d; border-radius: 18px; background: #161b22; padding: 28px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); }
+      .label { color: #8b949e; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
+      h1 { margin: 8px 0 12px; font-size: 34px; }
+      p { color: #c9d1d9; line-height: 1.55; }
+      pre { white-space: pre-wrap; word-break: break-all; background: #0d1117; border: 1px solid #30363d; border-radius: 12px; padding: 16px; color: #7ee787; }
+      .status { display: inline-block; margin-top: 16px; padding: 6px 10px; border-radius: 999px; background: ${isUsable ? '#17391f' : '#3d1d1d'}; color: ${isUsable ? '#7ee787' : '#ff7b72'}; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="card">
+        <div class="label">Cloudly Jump</div>
+        <h1>Connect System</h1>
+        <p>Cluster: <strong>${this.escapeHtml(clusterName)}</strong></p>
+        <p>Run this command on the Linux system you want to connect:</p>
+        <pre>${this.escapeHtml(command)}</pre>
+        <div class="status">${isUsable ? 'Ready to use' : 'This jump code is invalid, expired, or already used'}</div>
+      </div>
+    </main>
+  </body>
+</html>`;
+    return new Response(html, {
+      status: isUsable ? 200 : 404,
+      headers: {
+        'Content-Type': 'text/html; charset=utf-8',
+      },
+    });
+  }
+
+  private async createSetupScriptResponse(jumpCodeArg: string) {
+    if (!jumpCodeArg || !(await this.isJumpCodeUsable(jumpCodeArg))) {
+      return new Response('jump code is invalid, expired, or already used\n', {
+        status: 404,
+        headers: {
+          'Content-Type': 'text/plain; charset=utf-8',
+        },
+      });
+    }
+    return new Response(this.createSetupScript(jumpCodeArg), {
+      headers: {
+        'Content-Type': 'application/x-sh; charset=utf-8',
+      },
+    });
+  }
+
+  private createSetupScript(jumpCodeArg: string) {
+    const claimUrl = `${this.getPublicCloudlyUrl()}/jump/v1/claim`;
+    return `#!/usr/bin/env bash
+set -euo pipefail
+
+if [ "$(id -u)" -ne 0 ]; then
+  echo "Cloudly jump setup must run as root. Re-run with sudo." >&2
+  exit 1
+fi
+
+export DEBIAN_FRONTEND=noninteractive
+export JUMP_CODE='${this.escapeShellValue(jumpCodeArg)}'
+export CLAIM_URL='${this.escapeShellValue(claimUrl)}'
+
+echo "Preparing system for Cloudly jump..."
+apt-get update
+apt-get install -y --force-yes curl ca-certificates git
+
+if ! command -v docker >/dev/null 2>&1; then
+  curl -sSL https://get.docker.com/ | sh
+fi
+
+if ! command -v node >/dev/null 2>&1; then
+  curl -sL https://deb.nodesource.com/setup_18.x | bash
+  apt-get install -y --force-yes nodejs
+fi
+
+if ! command -v pnpm >/dev/null 2>&1; then
+  curl -fsSL https://get.pnpm.io/install.sh | sh -
+fi
+
+export PNPM_HOME="\${PNPM_HOME:-/root/.local/share/pnpm}"
+export PATH="\${PNPM_HOME}:\${PATH}"
+
+pnpm install -g @serve.zone/spark
+
+REQUEST_BODY="$(node -e 'process.stdout.write(JSON.stringify({ jumpCode: process.env.JUMP_CODE, hostname: require("os").hostname() }))')"
+CLAIM_RESPONSE="$(curl -fsSL -X POST "\${CLAIM_URL}" -H 'content-type: application/json' --data "\${REQUEST_BODY}")"
+
+export CLAIM_RESPONSE
+CLOUDLY_URL="$(node -e 'const data = JSON.parse(process.env.CLAIM_RESPONSE); if (!data.accepted) { throw new Error(data.message || "Cloudly rejected jump code"); } process.stdout.write(data.cloudlyUrl);')"
+COREFLOW_JUMPCODE="$(node -e 'const data = JSON.parse(process.env.CLAIM_RESPONSE); if (!data.coreflowJumpCode) { throw new Error("Cloudly did not return a Coreflow jump code"); } process.stdout.write(data.coreflowJumpCode);')"
+SPARK_NODE_ID="$(node -e 'const data = JSON.parse(process.env.CLAIM_RESPONSE); if (!data.nodeId) { throw new Error("Cloudly did not return a Spark node id"); } process.stdout.write(data.nodeId);')"
+SPARK_NODE_TOKEN="$(node -e 'const data = JSON.parse(process.env.CLAIM_RESPONSE); if (!data.sparkNodeToken) { throw new Error("Cloudly did not return a Spark node token"); } process.stdout.write(data.sparkNodeToken);')"
+
+spark installdaemon --mode=coreflow-node --cloudlyUrl="\${CLOUDLY_URL}" --jumpcode="\${COREFLOW_JUMPCODE}" --nodeId="\${SPARK_NODE_ID}" --nodeToken="\${SPARK_NODE_TOKEN}"
+
+echo "Cloudly jump completed. This system is now connected."
+`;
+  }
+
+  private async getJumpCodeByCode(jumpCodeArg: string) {
+    const jumpCodes = await this.CJumpCode.getInstances({
+      tokenHash: this.hashSecret(jumpCodeArg),
+    });
+    return jumpCodes[0] || null;
+  }
+
+  private async isJumpCodeUsable(jumpCodeArg: string) {
+    const jumpCodeDoc = await this.getJumpCodeByCode(jumpCodeArg);
+    return Boolean(jumpCodeDoc && !jumpCodeDoc.data.consumedAt && jumpCodeDoc.data.expiresAt > Date.now());
+  }
+
+  private getCodeFromContext(ctxArg: plugins.typedserver.IRequestContext) {
+    return ctxArg.params.code || ctxArg.url.pathname.split('/').filter(Boolean)[1] || '';
+  }
+
+  private shouldRenderHtml(ctxArg: plugins.typedserver.IRequestContext) {
+    const acceptHeader = ctxArg.headers.get('accept') || '';
+    const userAgent = ctxArg.headers.get('user-agent') || '';
+    return acceptHeader.includes('text/html') && !/(curl|wget|httpie|fetch)/i.test(userAgent);
+  }
+
+  private createJumpCode() {
+    return plugins.crypto.randomBytes(12).toString('base64url');
+  }
+
+  private normalizeTtl(ttlMsArg?: number) {
+    if (!ttlMsArg || !Number.isFinite(ttlMsArg)) {
+      return this.defaultTtlMs;
+    }
+    return Math.min(Math.max(ttlMsArg, 1000 * 60), this.maxTtlMs);
+  }
+
+  private hashSecret(secretArg: string) {
+    return plugins.crypto.createHash('sha256').update(secretArg).digest('hex');
+  }
+
+  private getPublicCloudlyUrl() {
+    const sslMode = this.cloudlyRef.config.data.sslMode;
+    const protocol = sslMode === 'none' ? 'http' : 'https';
+    const port = String(this.cloudlyRef.config.data.publicPort || (protocol === 'https' ? '443' : '80'));
+    const includePort = !((protocol === 'https' && port === '443') || (protocol === 'http' && port === '80'));
+    return `${protocol}://${this.cloudlyRef.config.data.publicUrl}${includePort ? `:${port}` : ''}`;
+  }
+
+  private async readJsonBody<T>(ctxArg: plugins.typedserver.IRequestContext): Promise<T> {
+    const bodyString = (await ctxArg.text()).trim();
+    return bodyString ? JSON.parse(bodyString) as T : {} as T;
+  }
+
+  private createJsonResponse(statusCodeArg: number, bodyArg: object): Response {
+    return new Response(JSON.stringify(bodyArg), {
+      status: statusCodeArg,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  private escapeHtml(valueArg: string) {
+    return valueArg
+      .replaceAll('&', '&amp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#39;');
+  }
+
+  private escapeShellValue(valueArg: string) {
+    return valueArg.replaceAll("'", "'\\''");
+  }
+}
@@ -39,6 +39,9 @@ export class ClusterNode extends plugins.smartdata.SmartDataDbDoc<
  @plugins.smartdata.svDb()
  public data!: plugins.servezoneInterfaces.data.IClusterNode['data'];

+  @plugins.smartdata.svDb()
+  public sparkNodeTokenHash?: string;
+
  constructor() {
    super();
  }
@@ -54,6 +57,20 @@ export class ClusterNode extends plugins.smartdata.SmartDataDbDoc<
    await this.save();
  }

+  public async updateSparkHeartbeat(
+    metricsArg: plugins.servezoneInterfaces.data.IClusterNodeMetrics,
+    runtimeInfoArg: plugins.servezoneInterfaces.data.ISparkNodeRuntimeInfo,
+  ) {
+    this.data.metrics = metricsArg;
+    this.data.sparkRuntimeInfo = runtimeInfoArg;
+    this.data.status = 'online';
+    this.data.lastHealthCheck = Date.now();
+    if (typeof runtimeInfoArg.swarmNodeId === 'string' && runtimeInfoArg.swarmNodeId) {
+      this.data.swarmNodeId = runtimeInfoArg.swarmNodeId;
+    }
+    await this.save();
+  }
+
  public async updateStatus(status: plugins.servezoneInterfaces.data.IClusterNode['data']['status']) {
    this.data.status = status;
    await this.save();
@@ -4,6 +4,18 @@ import { Cluster } from '../manager.cluster/classes.cluster.js';
 import { ClusterNode } from './classes.clusternode.js';
 import { CurlFresh } from './classes.curlfresh.js';

+interface ISparkHeartbeatRequest {
+  nodeId?: string;
+  nodeToken?: string;
+  metrics?: plugins.servezoneInterfaces.data.IClusterNodeMetrics;
+  runtimeInfo?: plugins.servezoneInterfaces.data.ISparkNodeRuntimeInfo;
+}
+
+interface ISparkHeartbeatResponse {
+  accepted: boolean;
+  message?: string;
+}
+
 export class CloudlyNodeManager {
  public cloudlyRef: Cloudly;
  public typedRouter = new plugins.typedrequest.TypedRouter();
@@ -51,6 +63,69 @@ export class CloudlyNodeManager {

  public async stop() {}

+  public async handleSparkHeartbeatHttpRequest(
+    ctxArg: plugins.typedserver.IRequestContext,
+  ): Promise<Response> {
+    try {
+      const requestData = await this.readJsonBody<ISparkHeartbeatRequest>(ctxArg);
+      const response = await this.acceptSparkHeartbeat(requestData);
+      return this.createJsonResponse(200, response);
+    } catch (error) {
+      return this.createJsonResponse(400, {
+        accepted: false,
+        message: `Spark heartbeat failed: ${(error as Error).message}`,
+      } satisfies ISparkHeartbeatResponse);
+    }
+  }
+
+  public async acceptSparkHeartbeat(
+    requestDataArg: ISparkHeartbeatRequest,
+  ): Promise<ISparkHeartbeatResponse> {
+    if (!requestDataArg.nodeId) {
+      return {
+        accepted: false,
+        message: 'Spark node id is missing',
+      };
+    }
+    if (!requestDataArg.nodeToken) {
+      return {
+        accepted: false,
+        message: 'Spark node token is missing',
+      };
+    }
+    if (!this.isSparkMetrics(requestDataArg.metrics)) {
+      return {
+        accepted: false,
+        message: 'Spark metrics are missing or invalid',
+      };
+    }
+    if (!this.isSparkRuntimeInfo(requestDataArg.runtimeInfo, requestDataArg.nodeId)) {
+      return {
+        accepted: false,
+        message: 'Spark runtime info is missing or invalid',
+      };
+    }
+
+    const node = await this.CClusterNode.getInstance({ id: requestDataArg.nodeId });
+    if (!node) {
+      return {
+        accepted: false,
+        message: 'Spark node is unknown',
+      };
+    }
+    if (node.sparkNodeTokenHash !== this.hashSecret(requestDataArg.nodeToken)) {
+      return {
+        accepted: false,
+        message: 'Spark node token is invalid',
+      };
+    }
+
+    await node.updateSparkHeartbeat(requestDataArg.metrics, requestDataArg.runtimeInfo);
+    return {
+      accepted: true,
+    };
+  }
+
  /**
   * creates the node infrastructure on hetzner
   * ensures that there are exactly the resources that are needed
@@ -133,4 +208,52 @@ export class CloudlyNodeManager {
    });
    return results;
  }
+
+  private isSparkMetrics(valueArg: unknown): valueArg is plugins.servezoneInterfaces.data.IClusterNodeMetrics {
+    if (!valueArg || typeof valueArg !== 'object') {
+      return false;
+    }
+    const metrics = valueArg as Partial<plugins.servezoneInterfaces.data.IClusterNodeMetrics>;
+    return typeof metrics.cpuUsagePercent === 'number'
+      && typeof metrics.memoryUsedMB === 'number'
+      && typeof metrics.memoryAvailableMB === 'number'
+      && typeof metrics.diskUsedGB === 'number'
+      && typeof metrics.diskAvailableGB === 'number'
+      && typeof metrics.containerCount === 'number'
+      && typeof metrics.timestamp === 'number';
+  }
+
+  private isSparkRuntimeInfo(
+    valueArg: unknown,
+    nodeIdArg: string,
+  ): valueArg is plugins.servezoneInterfaces.data.ISparkNodeRuntimeInfo {
+    if (!valueArg || typeof valueArg !== 'object') {
+      return false;
+    }
+    const runtimeInfo = valueArg as Record<string, unknown>;
+    return runtimeInfo.runtime === 'spark'
+      && runtimeInfo.nodeId === nodeIdArg
+      && typeof runtimeInfo.checkedAt === 'number';
+  }
+
+  private hashSecret(secretArg: string) {
+    return plugins.crypto.createHash('sha256').update(secretArg).digest('hex');
+  }
+
+  private async readJsonBody<T>(ctxArg: plugins.typedserver.IRequestContext): Promise<T> {
+    const bodyString = (await ctxArg.text()).trim();
+    return bodyString ? JSON.parse(bodyString) as T : {} as T;
+  }
+
+  private createJsonResponse(
+    statusCodeArg: number,
+    bodyArg: object,
+  ): Response {
+    return new Response(JSON.stringify(bodyArg), {
+      status: statusCodeArg,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
 }
@@ -86,5 +86,6 @@ export {

 // @servezone scope
 import * as servezoneInterfaces from '@serve.zone/interfaces';
+import * as servezoneAppstore from '@serve.zone/appstore';

-export { servezoneInterfaces };
+export { servezoneAppstore, servezoneInterfaces };
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/cloudly',
-  version: '5.7.0',
+  version: '6.2.0',
  description: 'A comprehensive tool for managing containerized applications across multiple cloud providers using Docker Swarmkit, featuring web, CLI, and API interfaces.'
 }
@@ -16,6 +16,118 @@ export interface IUiState {
  activeSubview: string | null;
 }

+export interface IDataState {
+  secretGroups?: plugins.interfaces.data.ISecretGroup[];
+  secretBundles?: plugins.interfaces.data.ISecretBundle[];
+  clusters?: plugins.interfaces.data.ICluster[];
+  externalRegistries?: plugins.interfaces.data.IExternalRegistry[];
+  images?: plugins.interfaces.data.IImage[];
+  services?: plugins.interfaces.data.IService[];
+  deployments?: plugins.interfaces.data.IDeployment[];
+  domains?: plugins.interfaces.data.IDomain[];
+  dnsEntries?: plugins.interfaces.data.IDnsEntry[];
+  tasks?: any[];
+  taskExecutions?: plugins.interfaces.data.ITaskExecution[];
+  mails?: any[];
+  logs?: any[];
+  s3?: any[];
+  dbs?: any[];
+  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[];
+}
+
+const emptyDataState: IDataState = {
+  secretGroups: [],
+  secretBundles: [],
+  clusters: [],
+  externalRegistries: [],
+  images: [],
+  services: [],
+  deployments: [],
+  domains: [],
+  dnsEntries: [],
+  tasks: [],
+  taskExecutions: [],
+  mails: [],
+  logs: [],
+  s3: [],
+  dbs: [],
+  backups: [],
+};
+
+const emptyAppStoreState: IAppStoreState = {
+  apps: [],
+  upgradeableServices: [],
+  upgradeOperations: [],
+};
+
+interface IReq_AdminValidateIdentity {
+  method: 'adminValidateIdentity';
+  request: {
+    identity: plugins.interfaces.data.IIdentity;
+  };
+  response: {
+    valid: boolean;
+    reason?: string;
+  };
+}
+
 const getInitialView = (): string => {
  const path = typeof window !== 'undefined' ? window.location.pathname : '/';
  const validViews = ['overview', 'platform', 'runtime', 'registry', 'secrets', 'domains', 'storage', 'logs'];
@@ -49,7 +161,7 @@ export const loginAction = loginStatePart.createAction<{ username: string; passw
    }
    const newState = {
      ...currentState,
-      ...(identity ? { identity } : {}),
+      identity,
    };
    try {
      // Keep shared API client in sync and establish WS for modules using sockets
@@ -67,53 +179,29 @@ export const loginAction = loginStatePart.createAction<{ username: string; passw

 export const logoutAction = loginStatePart.createAction(async (statePartArg) => {
  const currentState = statePartArg.getState() || { identity: null };
+  try {
+    apiClient.identity = null;
+    dataState.setState({ ...emptyDataState });
+    appStoreStatePart.setState({ ...emptyAppStoreState });
+  } catch {}
  return {
    ...currentState,
    identity: null,
  };
 });

-export interface IDataState {
-  secretGroups?: plugins.interfaces.data.ISecretGroup[];
-  secretBundles?: plugins.interfaces.data.ISecretBundle[];
-  clusters?: plugins.interfaces.data.ICluster[];
-  externalRegistries?: plugins.interfaces.data.IExternalRegistry[];
-  images?: any[];
-  services?: plugins.interfaces.data.IService[];
-  deployments?: plugins.interfaces.data.IDeployment[];
-  domains?: plugins.interfaces.data.IDomain[];
-  dnsEntries?: plugins.interfaces.data.IDnsEntry[];
-  tasks?: any[];
-  taskExecutions?: plugins.interfaces.data.ITaskExecution[];
-  mails?: any[];
-  logs?: any[];
-  s3?: any[];
-  dbs?: any[];
-  backups?: any[];
-}
 export const dataState = await appstate.getStatePart<IDataState>(
  'data',
-  {
-    secretGroups: [],
-    secretBundles: [],
-    clusters: [],
-    externalRegistries: [],
-    images: [],
-    services: [],
-    deployments: [],
-    domains: [],
-    dnsEntries: [],
-    tasks: [],
-    taskExecutions: [],
-    mails: [],
-    logs: [],
-    s3: [],
-    dbs: [],
-    backups: [],
-  },
+  { ...emptyDataState },
  'soft'
 );

+export const appStoreStatePart = await appstate.getStatePart<IAppStoreState>(
+  'appstore',
+  { ...emptyAppStoreState },
+  'soft',
+);
+
 // Shared API client instance (used by UI actions)
 type TCloudlyApiClientWithNullableIdentity = Omit<plugins.servezoneApi.CloudlyApiClient, 'identity'> & {
  identity: plugins.interfaces.data.IIdentity | null;
@@ -124,6 +212,164 @@ 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;
+
+const getErrorText = (errorArg: unknown): string => {
+  if (!errorArg) return '';
+  if (typeof errorArg === 'string') return errorArg;
+  const errorLike = errorArg as { errorText?: string; message?: string; text?: string };
+  return errorLike.errorText || errorLike.message || errorLike.text || '';
+};
+
+const isAuthRejectionText = (errorTextArg: string): boolean => {
+  const errorText = errorTextArg.toLowerCase();
+  return [
+    'identity is not valid',
+    'jwt expired',
+    'identity is expired',
+    'user not logged in',
+    'has been tampered with',
+    'invalid jwt',
+    'invalid signature',
+  ].some((textPart) => errorText.includes(textPart));
+};
+
+export const isIdentityExpired = (identityArg: plugins.interfaces.data.IIdentity | null | undefined): boolean => {
+  return typeof identityArg?.expiresAt === 'number' && identityArg.expiresAt <= Date.now();
+};
+
+export const invalidateIdentity = async (reasonArg = 'identity is not valid'): Promise<void> => {
+  if (identityInvalidationRunning) return;
+  identityInvalidationRunning = true;
+  try {
+    const currentLoginState = loginStatePart.getState() || { identity: null };
+    if (currentLoginState.identity) {
+      console.warn(`Cloudly session invalidated: ${reasonArg}`);
+    }
+    apiClient.identity = null;
+    try { await apiClient.typedsocketClient?.setTag('identity', null); } catch {}
+    loginStatePart.setState({
+      ...currentLoginState,
+      identity: null,
+    });
+    dataState.setState({ ...emptyDataState });
+    appStoreStatePart.setState({ ...emptyAppStoreState });
+  } finally {
+    identityInvalidationRunning = false;
+  }
+};
+
+export const validateStoredIdentity = async (): Promise<boolean> => {
+  const identity = loginStatePart.getState()?.identity ?? null;
+  if (!identity) return false;
+
+  if (isIdentityExpired(identity)) {
+    await invalidateIdentity('identity expired');
+    return false;
+  }
+
+  const validateIdentityRequest = new plugins.typedrequest.TypedRequest<IReq_AdminValidateIdentity>(
+    '/typedrequest',
+    'adminValidateIdentity',
+  );
+
+  try {
+    const response = await validateIdentityRequest.fire({ identity });
+    if (!response?.valid) {
+      await invalidateIdentity(response?.reason || 'identity rejected by server');
+      return false;
+    }
+  } catch (error) {
+    const errorText = getErrorText(error);
+    if (isAuthRejectionText(errorText)) {
+      await invalidateIdentity(errorText);
+      return false;
+    }
+    console.warn('Could not validate stored identity:', error);
+  }
+
+  return !!loginStatePart.getState()?.identity;
+};
+
+const scheduleIdentityExpiryTimer = () => {
+  if (identityExpiryTimer) {
+    window.clearTimeout(identityExpiryTimer);
+    identityExpiryTimer = undefined;
+  }
+  const identity = loginStatePart.getState()?.identity ?? null;
+  if (!identity?.expiresAt) return;
+  const msUntilExpiry = identity.expiresAt - Date.now();
+  if (msUntilExpiry <= 0) {
+    void invalidateIdentity('identity expired');
+    return;
+  }
+  identityExpiryTimer = window.setTimeout(() => {
+    void invalidateIdentity('identity expired');
+  }, Math.min(msUntilExpiry, 2147483647));
+};
+
+plugins.typedrequest.TypedRouter.setGlobalHooks({
+  onIncomingResponse: (entryArg) => {
+    if (entryArg.error && isAuthRejectionText(entryArg.error)) {
+      void invalidateIdentity(entryArg.error);
+    }
+  },
+});
+
+loginStatePart.select((stateArg) => stateArg?.identity ?? null).subscribe(() => {
+  scheduleIdentityExpiryTimer();
+});
+scheduleIdentityExpiryTimer();
+
 // Getting data
 export const getAllDataAction = dataState.createAction(async (statePartArg) => {
  let currentState = statePartArg.getState() || {};
@@ -610,3 +856,94 @@ 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;
+};
+
+export const fetchAppStoreTemplatesAction = appStoreStatePart.createAction(
+  async (statePartArg) => {
+    const request = new plugins.typedrequest.TypedRequest<any>('/typedrequest', 'getAppStoreTemplates');
+    const response = await request.fire({ identity: getIdentityForRequest() });
+    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() });
+    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() });
+    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');
+  return await request.fire({
+    identity: getIdentityForRequest(),
+    appId: appIdArg,
+    version: versionArg,
+  }) as {
+    config: plugins.interfaces.appstore.IAppStoreVersionConfig;
+    appMeta: plugins.interfaces.appstore.IAppStoreAppMeta;
+  };
+};
+
+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,
+  });
+  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,
+  });
+  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 },
@@ -169,6 +171,17 @@ export class CloudlyDashboard extends DeesElement {
        this.syncAppdashView(uiState.activeView, uiState.activeSubview);
      });
    this.rxSubscriptions.push(uiSubscription);
+
+    const loginSubscription = appstate.loginStatePart
+      .select((stateArg) => stateArg?.identity ?? null)
+      .subscribe((identityArg) => {
+        const hadIdentity = !!this.identity;
+        this.identity = identityArg ?? null;
+        if (!identityArg && hadIdentity) {
+          void this.switchToLoginContent('Session expired. Please sign in again.');
+        }
+      });
+    this.rxSubscriptions.push(loginSubscription);
  }

  private syncAppdashView(viewSlug: string, subviewSlug: string | null): void {
@@ -213,7 +226,6 @@ export class CloudlyDashboard extends DeesElement {
    const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
    simpleLogin.addEventListener('login', (eventArg: Event) => {
      const loginEvent = eventArg as CustomEvent;
-      console.log(loginEvent.detail);
      this.login(loginEvent.detail.data.username, loginEvent.detail.data.password);
    });

@@ -244,7 +256,7 @@ export class CloudlyDashboard extends DeesElement {
      plugins.deesCatalog.DeesContextmenu.openContextMenuWithOptions(eventArg, [
        {
          name: 'About',
-          iconName: 'mugHot',
+          iconName: 'lucide:Coffee',
          action: async () => {
            await plugins.deesCatalog.DeesModal.createAndShow({
              heading: 'About',
@@ -267,11 +279,17 @@ export class CloudlyDashboard extends DeesElement {
    // lets deal with initial state
    const domtools = await this.domtoolsPromise;
    const loginState = appstate.loginStatePart.getState();
-    console.log(loginState);
    if (loginState?.identity) {
-      this.identity = loginState.identity;
+      const identityValid = await appstate.validateStoredIdentity();
+      const currentIdentity = appstate.loginStatePart.getState()?.identity ?? null;
+      if (!identityValid || !currentIdentity) {
+        await this.switchToLoginContent('Session expired. Please sign in again.');
+        return;
+      }
+
+      this.identity = currentIdentity;
      try {
-        appstate.apiClient.identity = loginState.identity;
+        appstate.apiClient.identity = currentIdentity;
        if (!appstate.apiClient['typedsocketClient']) {
          await appstate.apiClient.start();
        }
@@ -284,7 +302,6 @@ export class CloudlyDashboard extends DeesElement {

  private async login(username: string, password: string) {
    const domtools = await this.domtoolsPromise;
-    console.log(`attempting to login...`);
    const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
    const form = simpleLogin.shadowRoot.querySelector('dees-form') as any;
    form.setStatus('pending', 'Logging in...');
@@ -293,7 +310,6 @@ export class CloudlyDashboard extends DeesElement {
      password,
    });
    if (state?.identity) {
-      console.log('got jwt');
      this.identity = state.identity;
      form.setStatus('success', 'Logged in!');
      await simpleLogin.switchToSlottedContent();
@@ -305,5 +321,34 @@ export class CloudlyDashboard extends DeesElement {
    }
  }

-  private async logout() {}
+  private async switchToLoginContent(statusMessageArg?: string) {
+    const simpleLogin = this.shadowRoot?.querySelector('dees-simple-login') as any;
+    if (!simpleLogin?.shadowRoot) return;
+
+    const loginDiv = simpleLogin.shadowRoot.querySelector('.login') as HTMLDivElement | null;
+    const loginContainerDiv = simpleLogin.shadowRoot.querySelector('.loginContainer') as HTMLDivElement | null;
+    const slotContainerDiv = simpleLogin.shadowRoot.querySelector('.slotContainer') as HTMLDivElement | null;
+    const form = simpleLogin.shadowRoot.querySelector('dees-form') as any;
+
+    if (loginDiv) {
+      loginDiv.style.opacity = '1';
+      loginDiv.style.transform = 'translateY(0px)';
+    }
+    if (loginContainerDiv) {
+      loginContainerDiv.style.pointerEvents = 'all';
+    }
+    if (slotContainerDiv) {
+      slotContainerDiv.style.opacity = '0';
+      slotContainerDiv.style.transform = 'translateY(20px)';
+      slotContainerDiv.style.pointerEvents = 'none';
+    }
+    if (form && statusMessageArg) {
+      form.setStatus('error', statusMessageArg);
+    }
+  }
+
+  private async logout() {
+    await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+    await this.switchToLoginContent();
+  }
 }
@@ -0,0 +1,420 @@
+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 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">${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;
+  }
+}
@@ -23,7 +23,7 @@ const sourcePresetArchitectures: Record<TBaseOsImageSourcePreset, string> = {
  'balena-raspberrypi4-64': 'rpi',
 };

-@customElement('cloudly-view-baseos')
+@customElement('cloudly-view-base-os')
 export class CloudlyViewBaseOs extends DeesElement {
  @state() private accessor builds: TBaseOsImageBuild[] = [];
  @state() private accessor isLoading = false;
@@ -300,6 +300,6 @@ export class CloudlyViewBaseOs extends DeesElement {

 declare global {
  interface HTMLElementTagNameMap {
-    'cloudly-view-baseos': CloudlyViewBaseOs;
+    'cloudly-view-base-os': CloudlyViewBaseOs;
  }
 }
@@ -27,6 +27,51 @@ export class CloudlyViewClusters extends DeesElement {
    this.rxSubscriptions.push(subecription);
  }

+  private async createJumpCommand(clusterArg: plugins.interfaces.data.ICluster) {
+    const identity = appstate.loginStatePart.getState()?.identity;
+    if (!identity) {
+      plugins.deesCatalog.DeesToast.createAndShow({ message: 'Login required to create a jump code', type: 'error' });
+      return;
+    }
+
+    try {
+      appstate.apiClient.identity = identity;
+      const apiClient = appstate.apiClient as any;
+      const response = apiClient.node?.createNodeJumpCommand
+        ? await apiClient.node.createNodeJumpCommand({ clusterId: clusterArg.id })
+        : await apiClient.typedsocketClient
+            .createTypedRequest('createNodeJumpCommand')
+            .fire({ identity, clusterId: clusterArg.id });
+      await plugins.deesCatalog.DeesModal.createAndShow({
+        heading: 'Connect System',
+        content: html`
+          <div style="display: grid; gap: 16px; min-width: min(680px, 80vw);">
+            <div>
+              Connect a Linux system to <strong>${clusterArg.data.name}</strong> by running this command as an administrator.
+            </div>
+            <pre style="white-space: pre-wrap; word-break: break-all; background: #0d1117; border: 1px solid #30363d; border-radius: 12px; padding: 16px; color: #7ee787;">${response.command}</pre>
+            <div style="color: #9aa4b2; font-size: 13px;">
+              Jump URL: ${response.jumpUrl}<br>
+              Expires: ${new Date(response.expiresAt).toLocaleString()}
+            </div>
+          </div>
+        `,
+        menuOptions: [
+          {
+            name: 'copy command',
+            action: async () => {
+              await navigator.clipboard.writeText(response.command);
+              plugins.deesCatalog.DeesToast.createAndShow({ message: 'Jump command copied', type: 'success' });
+            },
+          },
+          { name: 'close', action: async (modalArg: any) => modalArg.destroy() },
+        ],
+      });
+    } catch (error: any) {
+      plugins.deesCatalog.DeesToast.createAndShow({ message: `Failed to create jump code: ${error.message}`, type: 'error' });
+    }
+  }
+
  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
@@ -97,6 +142,14 @@ export class CloudlyViewClusters extends DeesElement {
              });
            },
          },
+          {
+            name: 'connect system',
+            iconName: 'terminal',
+            type: ['contextmenu', 'inRow'],
+            actionFunc: async (actionDataArg: any) => {
+              await this.createJumpCommand(actionDataArg.item as plugins.interfaces.data.ICluster);
+            },
+          },
        ] as plugins.deesCatalog.ITableAction[]}
      ></dees-table>
    `;
@@ -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 {
@@ -12,7 +12,7 @@ import {

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

-@customElement('cloudly-view-externalregistries')
+@customElement('cloudly-view-external-registries')
 export class CloudlyViewExternalRegistries extends DeesElement {
  @state()
  private accessor data: appstate.IDataState = { secretGroups: [], secretBundles: [], externalRegistries: [] } as any;
@@ -114,4 +114,4 @@ export class CloudlyViewExternalRegistries extends DeesElement {
  }
 }

-declare global { interface HTMLElementTagNameMap { 'cloudly-view-externalregistries': CloudlyViewExternalRegistries; } }
+declare global { interface HTMLElementTagNameMap { 'cloudly-view-external-registries': CloudlyViewExternalRegistries; } }
@@ -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); }
+      .summary-card, .detail-card { background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 9px; padding: 16px; }
+      .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: 'penToSquare',
-            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: 'clockRotateLeft',
-            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>
+
+      <div class="detail-card">
+        <div class="section-title">Versions</div>
+        <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>
+      </div>
+
+      <div class="detail-card spaced-card">
+        <div class="section-title">Services Using This Image</div>
+        ${servicesUsingImage.length ? html`
+          <dees-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="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 {
@@ -12,7 +12,7 @@ import {

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

-@customElement('cloudly-view-secretbundles')
+@customElement('cloudly-view-secret-bundles')
 export class CloudlyViewSecretBundles extends DeesElement {
  @state()
  private accessor data: appstate.IDataState = {} as any;
@@ -63,7 +63,7 @@ export class CloudlyViewSecretBundles extends DeesElement {
                <div style="font-size: 0.8em; color: red; text-align:center; padding: 16px; margin-top: 24px; border: 1px solid #444; font-family: Intel One Mono; font-size: 16px;">${actionDataArg.item.id}</div>
              `, menuOptions: [ { name: 'cancel', action: async (modalArg: any) => { await modalArg.destroy(); } }, { name: 'delete', action: async (modalArg: any) => { appstate.dataState.dispatchAction(appstate.deleteSecretBundleAction, { configBundleId: actionDataArg.item.id, }); await modalArg.destroy(); } } ] });
            } },
-          { name: 'edit', iconName: 'penToSquare', type: ['doubleClick', 'contextmenu', 'inRow'], actionFunc: async () => {
+          { name: 'edit', iconName: 'lucide:SquarePen', type: ['doubleClick', 'contextmenu', 'inRow'], actionFunc: async () => {
              await plugins.deesCatalog.DeesModal.createAndShow({ heading: 'Edit SecretBundle', content: html`<dees-form><dees-input-text .label=${'purpose'}></dees-input-text></dees-form>`, menuOptions: [ { name: 'save', action: async (modalArg: any) => {} }, { name: 'cancel', action: async (modalArg: any) => { modalArg.destroy(); } } ] });
            } },
        ] as plugins.deesCatalog.ITableAction[]}
@@ -72,4 +72,4 @@ export class CloudlyViewSecretBundles extends DeesElement {
  }
 }

-declare global { interface HTMLElementTagNameMap { 'cloudly-view-secretbundles': CloudlyViewSecretBundles; } }
+declare global { interface HTMLElementTagNameMap { 'cloudly-view-secret-bundles': CloudlyViewSecretBundles; } }
@@ -5,7 +5,7 @@ import { DeesElement, customElement, html, state, css, cssManager } from '@desig

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

-@customElement('cloudly-view-secretsgroups')
+@customElement('cloudly-view-secret-groups')
 export class CloudlyViewSecretGroups extends DeesElement {
  @state()
  private accessor data: appstate.IDataState = {} as any;
@@ -46,7 +46,7 @@ export class CloudlyViewSecretGroups extends DeesElement {
                </dees-form>
              `, menuOptions: [ { name: 'cancel', action: async (modalArg: any) => { await modalArg.destroy(); } }, { name: 'save', action: async (modalArg: any) => { const deesForm = modalArg.shadowRoot.querySelector('dees-form'); const formData = await deesForm.collectFormData(); const environments: plugins.interfaces.data.ISecretGroup['data']['environments'] = {}; for (const itemArg of formData['environments'] as any[]) { environments[itemArg.environment] = { value: itemArg.value, history: [], lastUpdated: Date.now(), }; } await appstate.dataState.dispatchAction(appstate.createSecretGroupAction, { data: { name: formData['data.name'] as string, description: formData['data.description'] as string, key: formData['data.key'] as string, environments, tags: [], }, }); await modalArg.destroy(); } } ] });
            } },
-          { name: 'edit', type: ['contextmenu', 'inRow', 'doubleClick'], iconName: 'penToSquare', actionFunc: async (dataArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.ISecretGroup>) => {
+          { name: 'edit', 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`
@@ -60,7 +60,7 @@ export class CloudlyViewSecretGroups extends DeesElement {
                </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); } } ] });
            } },
-          { name: 'history', iconName: 'clockRotateLeft', type: ['contextmenu', 'inRow'], actionFunc: async (dataArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.ISecretGroup>) => {
+          { 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(); } } ] });
            } },
@@ -73,4 +73,4 @@ export class CloudlyViewSecretGroups extends DeesElement {
  }
 }

-declare global { interface HTMLElementTagNameMap { 'cloudly-view-secretsgroups': CloudlyViewSecretGroups; } }
+declare global { interface HTMLElementTagNameMap { 'cloudly-view-secret-groups': CloudlyViewSecretGroups; } }
@@ -1,5 +1,6 @@
 import * as plugins from '../../../plugins.js';
 import * as shared from '../../shared/index.js';
+import { DeploymentExecutionEnvironment } from '../../../environments/deployment-environment.js';

 import {
  DeesElement,
@@ -8,6 +9,7 @@ import {
  state,
  css,
  cssManager,
+  type TemplateResult,
 } from '@design.estate/dees-element';

 import * as appstate from '../../../appstate.js';
@@ -17,14 +19,54 @@ export class CloudlyViewServices extends DeesElement {
  @state()
  private accessor data: appstate.IDataState = {} as any;

+  @state()
+  private accessor currentView: 'list' | 'detail' | 'workspace' = 'list';
+
+  @state()
+  private accessor selectedService: plugins.interfaces.data.IService | null = null;
+
+  @state()
+  private accessor serviceDeployments: plugins.interfaces.data.IDeployment[] = [];
+
+  @state()
+  private accessor deploymentsLoading = false;
+
+  @state()
+  private accessor upgradeInfo: any = null;
+
+  @state()
+  private accessor appStoreState: appstate.IAppStoreState = {
+    apps: [],
+    upgradeableServices: [],
+    upgradeOperations: [],
+  };
+
+  @state()
+  private accessor workspaceEnvironment: DeploymentExecutionEnvironment | null = null;
+
+  @state()
+  private accessor workspaceDeployment: any = null;
+
  constructor() {
    super();
    const subscription = appstate.dataState
      .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 = [
@@ -36,6 +78,32 @@ 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; }
+      .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; }
+      .back-button, .primary-button, .danger-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); }
+      .primary-button { background: var(--ci-color-primary, #2563eb); border-color: var(--ci-color-primary, #2563eb); color: white; }
+      .danger-button { color: #ef4444; border-color: rgba(239, 68, 68, 0.35); }
+      .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
+      .summary-card, .detail-card, .update-card { background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 9px; padding: 16px; }
+      .summary-label { font-size: 12px; color: var(--ci-shade-4, #71717a); margin-bottom: 6px; }
+      .summary-value { font-size: 20px; font-weight: 700; color: var(--ci-shade-7, #e4e4e7); overflow-wrap: anywhere; }
+      .section-title { font-size: 14px; font-weight: 700; color: var(--ci-shade-7, #e4e4e7); margin-bottom: 10px; }
+      .details-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; margin-top: 14px; }
+      .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; }
+      .status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
+      .status-running { background: rgba(34, 197, 94, 0.16); color: #22c55e; }
+      .status-starting, .status-scheduled { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
+      .status-stopped { background: rgba(161, 161, 170, 0.16); color: #a1a1aa; }
+      .status-failed { background: rgba(239, 68, 68, 0.16); color: #ef4444; }
+      .update-card { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; border-color: rgba(59, 130, 246, 0.35); background: linear-gradient(135deg, rgba(59, 130, 246, 0.10), rgba(139, 92, 246, 0.10)); }
+      .workspace-shell { display: grid; grid-template-rows: auto 1fr; height: calc(100vh - 120px); min-height: 560px; }
+      .workspace-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+      dees-workspace { min-height: 0; }
+      @media (max-width: 900px) { .summary-grid, .details-grid { grid-template-columns: 1fr; } .detail-header { flex-direction: column; } }
    `,
  ];

@@ -57,7 +125,17 @@ export class CloudlyViewServices extends DeesElement {
    return html`<span class="strategy-badge">${strategy}</span>`;
  }

-  public render() {
+  public render(): TemplateResult {
+    if (this.currentView === 'workspace') {
+      return this.renderWorkspaceView();
+    }
+    if (this.currentView === 'detail') {
+      return this.renderDetailView();
+    }
+    return this.renderListView();
+  }
+
+  private renderListView(): TemplateResult {
    return html`
      <cloudly-sectionheading>Services</cloudly-sectionheading>
      <dees-table
@@ -81,6 +159,14 @@ export class CloudlyViewServices extends DeesElement {
          };
        }}
        .dataActions=${[
+          {
+            name: 'Details',
+            iconName: 'eye',
+            type: ['contextmenu', 'inRow', 'doubleClick'],
+            actionFunc: async (actionDataArg: any) => {
+              await this.openServiceDetail(actionDataArg.item as plugins.interfaces.data.IService);
+            },
+          },
          {
            name: 'Add Service',
            iconName: 'plus',
@@ -216,6 +302,408 @@ export class CloudlyViewServices extends DeesElement {
      ></dees-table>
    `;
  }
+
+  private renderDetailView(): TemplateResult {
+    const service = this.selectedService;
+    if (!service) {
+      return html`
+        <cloudly-sectionheading>Service Details</cloudly-sectionheading>
+        <button class="back-button" @click=${() => { this.currentView = 'list'; }}>Back to Services</button>
+      `;
+    }
+
+    const runningDeployments = this.serviceDeployments.filter((deploymentArg) => deploymentArg.status === 'running').length;
+    const desiredReplicas = service.data.maxReplicas || service.data.scaleFactor || 1;
+    const domains = service.data.domains || [];
+    const volumes = service.data.volumes || [];
+    const serviceData = service.data as plugins.interfaces.data.IService['data'] & {
+      appTemplateId?: string;
+      appTemplateVersion?: string;
+    };
+    const upgradeOperation = this.getUpgradeOperationForService(service);
+    const upgradeInfo = this.getUpgradeInfoForService(service);
+
+    return html`
+      <cloudly-sectionheading>Service Details</cloudly-sectionheading>
+      <div class="detail-header">
+        <div>
+          <h2 class="detail-title">${service.data.name}</h2>
+          <div class="detail-subtitle">${service.data.description || 'No description configured'}</div>
+        </div>
+        <button class="back-button" @click=${() => { this.currentView = 'list'; }}>Back to Services</button>
+      </div>
+
+      ${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">${upgradeInfo.appTemplateId}: ${upgradeInfo.currentVersion} -> ${upgradeInfo.latestVersion}</div>
+          </div>
+          <button
+            class="primary-button"
+            ?disabled=${upgradeOperation?.status === 'running'}
+            @click=${() => this.startUpgradeForService(service)}
+          >${upgradeOperation?.status === 'running' ? 'Upgrading...' : 'Upgrade'}</button>
+        </div>
+      ` : ''}
+
+      <div class="summary-grid">
+        <div class="summary-card">
+          <div class="summary-label">Running Deployments</div>
+          <div class="summary-value">${runningDeployments}/${desiredReplicas}</div>
+        </div>
+        <div class="summary-card">
+          <div class="summary-label">Image</div>
+          <div class="summary-value" style="font-size: 15px;">${service.data.imageId}:${service.data.imageVersion}</div>
+        </div>
+        <div class="summary-card">
+          <div class="summary-label">Strategy</div>
+          <div class="summary-value" style="font-size: 16px;">${service.data.deploymentStrategy}</div>
+        </div>
+        <div class="summary-card">
+          <div class="summary-label">Category</div>
+          <div class="summary-value" style="font-size: 16px;">${service.data.serviceCategory}</div>
+        </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: 'Details',
+                iconName: 'lucide:Eye',
+                type: ['contextmenu', 'inRow', 'doubleClick'],
+                actionFunc: async (actionDataArg: any) => {
+                  await this.showDeploymentDetailsModal(actionDataArg.item);
+                },
+              },
+              {
+                name: 'Open IDE',
+                iconName: 'terminal',
+                type: ['contextmenu', 'inRow'],
+                actionFunc: async (actionDataArg: any) => {
+                  await this.openDeploymentWorkspace(actionDataArg.item);
+                },
+              },
+              {
+                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>
+
+      <div class="details-grid">
+        <div class="detail-card">
+          <div class="section-title">Service Configuration</div>
+          <div class="kv-list">
+            <div class="kv-row"><span class="kv-key">Service ID</span><span class="kv-value">${service.id}</span></div>
+            <div class="kv-row"><span class="kv-key">Image ID</span><span class="kv-value">${service.data.imageId}</span></div>
+            <div class="kv-row"><span class="kv-key">Image Version</span><span class="kv-value">${service.data.imageVersion}</span></div>
+            <div class="kv-row"><span class="kv-key">Web Port</span><span class="kv-value">${service.data.ports?.web || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Deploy on Push</span><span class="kv-value">${service.data.deployOnPush === false ? 'disabled' : 'enabled'}</span></div>
+            <div class="kv-row"><span class="kv-key">App Template</span><span class="kv-value">${serviceData.appTemplateId ? `${serviceData.appTemplateId}@${serviceData.appTemplateVersion}` : '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Registry Target</span><span class="kv-value">${service.data.registryTarget?.imageUrl || '-'}</span></div>
+          </div>
+        </div>
+        <div class="detail-card">
+          <div class="section-title">Routes, Volumes, Secrets</div>
+          <div class="kv-list">
+            <div class="kv-row"><span class="kv-key">Domains</span><span class="kv-value">${domains.length ? domains.map((domainArg) => domainArg.name).join(', ') : '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Volumes</span><span class="kv-value">${volumes.length ? volumes.map((volumeArg) => volumeArg.mountPath).join(', ') : '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Secret Bundle</span><span class="kv-value">${service.data.secretBundleId || '-'}</span></div>
+            <div class="kv-row"><span class="kv-key">Extra Bundles</span><span class="kv-value">${service.data.additionalSecretBundleIds?.length || 0}</span></div>
+            <div class="kv-row"><span class="kv-key">Env Keys</span><span class="kv-value">${Object.keys(service.data.environment || {}).join(', ') || '-'}</span></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderWorkspaceView(): TemplateResult {
+    return html`
+      <cloudly-sectionheading>Deployment IDE</cloudly-sectionheading>
+      <div class="workspace-shell">
+        <div class="workspace-toolbar">
+          <div>
+            <div class="section-title">${this.selectedService?.data.name || 'Deployment'} workspace</div>
+            <div class="detail-subtitle">${this.workspaceDeployment?.containerId || this.workspaceDeployment?.id || ''}</div>
+          </div>
+          <button class="back-button" @click=${() => { this.currentView = 'detail'; }}>Back to Deployments</button>
+        </div>
+        ${this.workspaceEnvironment
+          ? html`<dees-workspace .executionEnvironment=${this.workspaceEnvironment}></dees-workspace>`
+          : html`<div class="detail-subtitle">Workspace is not available.</div>`}
+      </div>
+    `;
+  }
+
+  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 = [];
+    this.upgradeInfo = null;
+    this.currentView = 'detail';
+    await Promise.all([
+      this.loadDeploymentsForService(serviceArg),
+      this.loadUpgradeInfo(serviceArg),
+    ]);
+  }
+
+  private async loadDeploymentsForService(serviceArg: plugins.interfaces.data.IService) {
+    this.deploymentsLoading = true;
+    try {
+      const response = await this.fireTypedRequest('getDeploymentsByService', {
+        serviceId: serviceArg.id,
+      }) as { deployments: plugins.interfaces.data.IDeployment[] };
+      this.serviceDeployments = response.deployments || [];
+    } catch (error) {
+      console.error('Failed to load service deployments:', error);
+      this.serviceDeployments = [];
+    } finally {
+      this.deploymentsLoading = false;
+    }
+  }
+
+  private async loadUpgradeInfo(serviceArg: plugins.interfaces.data.IService) {
+    try {
+      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) {
+      await this.loadDeploymentsForService(this.selectedService);
+    }
+  }
+
+  private async confirmKillDeployment(deploymentArg: plugins.interfaces.data.IDeployment) {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Kill Deployment Container',
+      content: html`
+        <div style="text-align: center; max-width: 520px;">
+          This kills the running container for deployment <strong>${deploymentArg.id}</strong>.
+          Docker Swarm may create a replacement task if the service still desires a replica.
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
+        { name: 'Kill Container', action: async (modalArg: any) => {
+          await this.fireTypedRequest('killDeployment', { deploymentId: deploymentArg.id });
+          await modalArg.destroy();
+          if (this.selectedService) {
+            await this.loadDeploymentsForService(this.selectedService);
+          }
+        } },
+      ],
+    });
+  }
+
+  private async openDeploymentWorkspace(deploymentArg: any) {
+    const identity = appstate.loginStatePart.getState()?.identity;
+    if (!identity) return;
+    const environment = new DeploymentExecutionEnvironment(deploymentArg.id, identity);
+    await environment.init();
+    this.workspaceDeployment = deploymentArg;
+    this.workspaceEnvironment = environment;
+    this.currentView = 'workspace';
+  }
+
+  private async fireTypedRequest(methodArg: string, dataArg: Record<string, unknown>) {
+    const identity = appstate.loginStatePart.getState()?.identity;
+    if (!identity) {
+      throw new Error('Not logged in');
+    }
+    const typedRequest = new plugins.typedrequest.TypedRequest<any>(
+      '/typedrequest',
+      methodArg,
+    );
+    return await typedRequest.fire({
+      identity,
+      ...dataArg,
+    });
+  }
 }

 declare global {
@@ -0,0 +1,110 @@
+import * as plugins from '../plugins.js';
+
+type IExecutionEnvironment = import('@design.estate/dees-catalog').IExecutionEnvironment;
+type IFileEntry = import('@design.estate/dees-catalog').IFileEntry;
+type IFileWatcher = import('@design.estate/dees-catalog').IFileWatcher;
+type IProcessHandle = import('@design.estate/dees-catalog').IProcessHandle;
+
+type TTypedRequestShape = {
+  method: string;
+  request: Record<string, unknown>;
+  response: Record<string, unknown>;
+};
+
+export class DeploymentExecutionEnvironment implements IExecutionEnvironment {
+  public readonly type = 'backend' as const;
+  private readyState = false;
+
+  constructor(
+    private deploymentId: string,
+    private identity: plugins.interfaces.data.IIdentity,
+  ) {}
+
+  get ready(): boolean {
+    return this.readyState;
+  }
+
+  public async init(): Promise<void> {
+    const result = await this.fireRequest('deploymentWorkspaceExists', { path: '/' }) as { exists: boolean };
+    if (!result.exists) {
+      throw new Error(`Cannot access deployment filesystem for ${this.deploymentId}`);
+    }
+    this.readyState = true;
+  }
+
+  public async destroy(): Promise<void> {
+    this.readyState = false;
+  }
+
+  public async readFile(pathArg: string): Promise<string> {
+    const result = await this.fireRequest('deploymentWorkspaceReadFile', { path: pathArg }) as { content: string };
+    return result.content;
+  }
+
+  public async writeFile(pathArg: string, contentsArg: string): Promise<void> {
+    await this.fireRequest('deploymentWorkspaceWriteFile', { path: pathArg, content: contentsArg });
+  }
+
+  public async readDir(pathArg: string): Promise<IFileEntry[]> {
+    const result = await this.fireRequest('deploymentWorkspaceReadDir', { path: pathArg }) as { entries: IFileEntry[] };
+    return result.entries;
+  }
+
+  public async mkdir(pathArg: string): Promise<void> {
+    await this.fireRequest('deploymentWorkspaceMkdir', { path: pathArg });
+  }
+
+  public async rm(pathArg: string, optionsArg?: { recursive?: boolean }): Promise<void> {
+    await this.fireRequest('deploymentWorkspaceRm', {
+      path: pathArg,
+      recursive: optionsArg?.recursive,
+    });
+  }
+
+  public async exists(pathArg: string): Promise<boolean> {
+    const result = await this.fireRequest('deploymentWorkspaceExists', { path: pathArg }) as { exists: boolean };
+    return result.exists;
+  }
+
+  public watch(
+    _pathArg: string,
+    _callbackArg: (eventArg: 'rename' | 'change', filenameArg: string | null) => void,
+    _optionsArg?: { recursive?: boolean },
+  ): IFileWatcher {
+    return { stop: () => {} };
+  }
+
+  public async spawn(commandArg: string, argsArg: string[] = []): Promise<IProcessHandle> {
+    const result = await this.fireRequest('deploymentWorkspaceExec', {
+      command: commandArg,
+      args: argsArg,
+    }) as { stdout?: string; stderr?: string; exitCode: number };
+
+    const output = new ReadableStream<string>({
+      start(controllerArg) {
+        if (result.stdout) controllerArg.enqueue(result.stdout);
+        if (result.stderr) controllerArg.enqueue(result.stderr);
+        controllerArg.close();
+      },
+    });
+
+    return {
+      output,
+      input: new WritableStream<string>(),
+      exit: Promise.resolve(result.exitCode),
+      kill: () => {},
+    };
+  }
+
+  private async fireRequest(methodArg: string, dataArg: Record<string, unknown>) {
+    const typedRequest = new plugins.typedrequest.TypedRequest<TTypedRequestShape>(
+      '/typedrequest',
+      methodArg,
+    );
+    return await typedRequest.fire({
+      identity: this.identity,
+      deploymentId: this.deploymentId,
+      ...dataArg,
+    });
+  }
+}
@@ -4,6 +4,11 @@ export {
  interfaces
 }

+// @api.global scope
+import * as typedrequest from '@api.global/typedrequest';
+
+export { typedrequest };
+
 // @design.estate scope
 import * as deesDomtools from '@design.estate/dees-domtools';
 import * as deesElement from '@design.estate/dees-element';
@@ -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	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
jkunz	05560c9db9	v6.0.0 Docker (tags) / release (push) Failing after 1s Details	2026-05-25 03:03:25 +00:00
jkunz	50e69b095c	feat(appstore): use shared resolver	2026-05-25 03:03:03 +00:00
jkunz	d5445609a0	v5.9.0 Docker (tags) / release (push) Failing after 1s Details	2026-05-24 13:15:16 +00:00
jkunz	fd7c7b4313	fix(cloudly): invalidate expired dashboard sessions	2026-05-24 13:14:49 +00:00
jkunz	057af996aa	chore(cloudly): consume released Spark interfaces	2026-05-24 12:54:09 +00:00
jkunz	6565c44c29	feat(cloudly): accept Spark node heartbeats	2026-05-24 12:47:15 +00:00
jkunz	ebb4f36c67	v5.8.2 Docker (tags) / release (push) Failing after 13m53s Details	2026-05-24 01:30:46 +00:00
jkunz	e7d3140f7a	chore(cloudly): update api dependency and stabilize tests	2026-05-24 01:30:32 +00:00
jkunz	304767a75c	v5.8.1 Docker (tags) / release (push) Failing after 0s Details	2026-05-23 10:59:24 +00:00
jkunz	0fa95d6c99	fix(cloudly): allow Docker install of fresh interfaces	2026-05-23 10:59:06 +00:00
jkunz	5d6d43b564	v5.8.0 Docker (tags) / release (push) Failing after 0s Details	2026-05-23 10:47:12 +00:00
jkunz	bef236cd86	feat(cloudly): add service runtime and onboarding	2026-05-23 10:46:52 +00:00
jkunz	59043b7281	v5.7.1 Docker (tags) / release (push) Failing after 0s Details	2026-05-21 22:35:19 +00:00
jkunz	befd0efdc0	fix(web): clean dashboard console errors	2026-05-21 22:30:38 +00:00