v1.22.1

changelog.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 2026-03-18 - 1.22.1 - fix(repo)
+no changes to commit
+
+
+## 2026-03-18 - 1.22.0 - feat(web-appstore)
+add an App Store view for quick service deployment from curated templates
+
+- adds a new App Store tab to the web UI with curated Docker app templates
+- passes selected app templates through UI state into the services view for quick deployment
+- supports quick deploy creation with prefilled image, port, environment variables, and optional platform service flags
+- updates @serve.zone/catalog to ^2.8.0 to support the new app store view
+
+## 2026-03-18 - 1.21.0 - feat(opsserver)
+add container workspace API and backend execution environment for services
+
+- introduces typed workspace handlers for reading, writing, listing, creating, removing, and executing commands inside service containers
+- adds frontend backend-execution environment integration so the service view can open a workspace against a selected service
+- extends Docker exec lookup to resolve Swarm service container IDs when a direct container ID is unavailable
+
 ## 2026-03-17 - 1.20.0 - feat(ops-dashboard)
 stream user service logs to the ops dashboard and resolve service containers for Docker log streaming
 

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/onebox",
-  "version": "1.20.0",
+  "version": "1.22.1",
   "exports": "./mod.ts",
   "tasks": {
     "test": "deno test --allow-all test/",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/onebox",
-  "version": "1.20.0",
+  "version": "1.22.1",
   "description": "Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers",
   "main": "mod.ts",
   "type": "module",
@@ -58,7 +58,7 @@
     "@api.global/typedsocket": "^4.1.2",
     "@design.estate/dees-catalog": "^3.43.3",
     "@design.estate/dees-element": "^2.1.6",
-    "@serve.zone/catalog": "^2.7.0"
+    "@serve.zone/catalog": "^2.8.0"
   },
   "devDependencies": {
     "@git.zone/tsbundle": "^2.9.0",

pnpm-lock.yaml

@@ -21,8 +21,8 @@ importers:
         specifier: ^2.1.6
         version: 2.2.3
       '@serve.zone/catalog':
-        specifier: ^2.7.0
-        version: 2.7.0(@tiptap/pm@2.27.2)
+        specifier: ^2.8.0
+        version: 2.8.0(@tiptap/pm@2.27.2)
     devDependencies:
       '@git.zone/tsbundle':
         specifier: ^2.9.0
@@ -839,8 +839,8 @@ packages:
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  '@serve.zone/catalog@2.7.0':
-    resolution: {integrity: sha512-BSfLi9BZE5wvu5Dxh0p/mM9bE+9lf35PGHRZ1Cw/+YpWxOfIFPTZKkBz2OUn3yctWw+V7l1VBBYuLX1bVCKFfA==}
+  '@serve.zone/catalog@2.8.0':
+    resolution: {integrity: sha512-p0ES14JwUoJE88DBtLSHcCfFPVa0vKhvHnQLaAY3OC15kfheNKidi1SwTFyMh43jj0ZNi4Lecc3W02wG6sasHw==}
 
   '@tempfix/idb@8.0.3':
     resolution: {integrity: sha512-hPJQKO7+oAIY+pDNImrZ9QAINbz9KmwT+yO4iRVwdPanok2YKpaUxdJzIvCUwY0YgAawlvYdffbLvRLV5hbs2g==}
@@ -3477,7 +3477,7 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
-  '@serve.zone/catalog@2.7.0(@tiptap/pm@2.27.2)':
+  '@serve.zone/catalog@2.8.0(@tiptap/pm@2.27.2)':
     dependencies:
       '@design.estate/dees-catalog': 3.48.5(@tiptap/pm@2.27.2)
       '@design.estate/dees-domtools': 2.5.1

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/onebox',
-  version: '1.20.0',
+  version: '1.22.1',
   description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
 }

ts/classes/docker.ts

@@ -857,7 +857,23 @@ export class OneboxDockerManager {
     cmd: string[]
   ): Promise<{ stdout: string; stderr: string; exitCode: number }> {
     try {
-      const container = await this.dockerClient!.getContainerById(containerID);
+      let container: any = null;
+      try {
+        container = await this.dockerClient!.getContainerById(containerID);
+      } catch {
+        // Not a direct container ID — try Swarm service lookup
+      }
+
+      if (!container) {
+        const serviceContainerId = await this.getContainerIdForService(containerID);
+        if (serviceContainerId) {
+          try {
+            container = await this.dockerClient!.getContainerById(serviceContainerId);
+          } catch {
+            // Service container also not found
+          }
+        }
+      }
 
       if (!container) {
         throw new Error(`Container not found: ${containerID}`);

ts/opsserver/classes.opsserver.ts

@@ -23,6 +23,7 @@ export class OpsServer {
   public schedulesHandler!: handlers.SchedulesHandler;
   public settingsHandler!: handlers.SettingsHandler;
   public logsHandler!: handlers.LogsHandler;
+  public workspaceHandler!: handlers.WorkspaceHandler;
 
   constructor(oneboxRef: Onebox) {
     this.oneboxRef = oneboxRef;
@@ -63,6 +64,7 @@ export class OpsServer {
     this.schedulesHandler = new handlers.SchedulesHandler(this);
     this.settingsHandler = new handlers.SettingsHandler(this);
     this.logsHandler = new handlers.LogsHandler(this);
+    this.workspaceHandler = new handlers.WorkspaceHandler(this);
 
     logger.success('OpsServer TypedRequest handlers initialized');
   }

ts/opsserver/handlers/index.ts

@@ -11,3 +11,4 @@ export * from './backups.handler.ts';
 export * from './schedules.handler.ts';
 export * from './settings.handler.ts';
 export * from './logs.handler.ts';
+export * from './workspace.handler.ts';

ts/opsserver/handlers/workspace.handler.ts

@@ -0,0 +1,181 @@
+import * as plugins from '../../plugins.ts';
+import { logger } from '../../logging.ts';
+import type { OpsServer } from '../classes.opsserver.ts';
+import * as interfaces from '../../../ts_interfaces/index.ts';
+import { requireValidIdentity } from '../helpers/guards.ts';
+import { getErrorMessage } from '../../utils/error.ts';
+
+export class WorkspaceHandler {
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+
+  constructor(private opsServerRef: OpsServer) {
+    this.opsServerRef.typedrouter.addTypedRouter(this.typedrouter);
+    this.registerHandlers();
+  }
+
+  /**
+   * Resolve a service name to a container ID (handling Swarm service IDs)
+   */
+  private async resolveContainerId(serviceName: string): Promise<string> {
+    const service = this.opsServerRef.oneboxRef.services.getService(serviceName);
+    if (!service || !service.containerID) {
+      throw new plugins.typedrequest.TypedResponseError(`Service not found or has no container: ${serviceName}`);
+    }
+    return service.containerID;
+  }
+
+  private registerHandlers(): void {
+    // Read file from container
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_WorkspaceReadFile>(
+        'workspaceReadFile',
+        async (dataArg) => {
+          await requireValidIdentity(this.opsServerRef.adminHandler, dataArg);
+          const containerId = await this.resolveContainerId(dataArg.serviceName);
+          const result = await this.opsServerRef.oneboxRef.docker.execInContainer(
+            containerId,
+            ['cat', dataArg.path],
+          );
+          if (result.exitCode !== 0) {
+            throw new plugins.typedrequest.TypedResponseError(`Failed to read file: ${result.stderr || 'File not found'}`);
+          }
+          return { content: result.stdout };
+        },
+      ),
+    );
+
+    // Write file to container
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_WorkspaceWriteFile>(
+        'workspaceWriteFile',
+        async (dataArg) => {
+          await requireValidIdentity(this.opsServerRef.adminHandler, dataArg);
+          const containerId = await this.resolveContainerId(dataArg.serviceName);
+          // Use sh -c with printf to write content (handles special characters)
+          const escaped = dataArg.content.replace(/'/g, "'\\''");
+          const result = await this.opsServerRef.oneboxRef.docker.execInContainer(
+            containerId,
+            ['sh', '-c', `printf '%s' '${escaped}' > ${dataArg.path}`],
+          );
+          if (result.exitCode !== 0) {
+            throw new plugins.typedrequest.TypedResponseError(`Failed to write file: ${result.stderr}`);
+          }
+          return {};
+        },
+      ),
+    );
+
+    // Read directory from container
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_WorkspaceReadDir>(
+        'workspaceReadDir',
+        async (dataArg) => {
+          await requireValidIdentity(this.opsServerRef.adminHandler, dataArg);
+          const containerId = await this.resolveContainerId(dataArg.serviceName);
+          // Use ls with -1 -F to get entries with type indicators (/ for dirs)
+          const result = await this.opsServerRef.oneboxRef.docker.execInContainer(
+            containerId,
+            ['ls', '-1', '-F', dataArg.path],
+          );
+          if (result.exitCode !== 0) {
+            throw new plugins.typedrequest.TypedResponseError(`Failed to read directory: ${result.stderr}`);
+          }
+          const entries = result.stdout
+            .split('\n')
+            .filter((line) => line.trim())
+            .map((line) => {
+              const isDir = line.endsWith('/');
+              const name = isDir ? line.slice(0, -1) : line.replace(/[*@=|]$/, '');
+              const basePath = dataArg.path.endsWith('/') ? dataArg.path : dataArg.path + '/';
+              return {
+                type: (isDir ? 'directory' : 'file') as 'file' | 'directory',
+                name,
+                path: basePath + name,
+              };
+            });
+          return { entries };
+        },
+      ),
+    );
+
+    // Create directory in container
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_WorkspaceMkdir>(
+        'workspaceMkdir',
+        async (dataArg) => {
+          await requireValidIdentity(this.opsServerRef.adminHandler, dataArg);
+          const containerId = await this.resolveContainerId(dataArg.serviceName);
+          const result = await this.opsServerRef.oneboxRef.docker.execInContainer(
+            containerId,
+            ['mkdir', '-p', dataArg.path],
+          );
+          if (result.exitCode !== 0) {
+            throw new plugins.typedrequest.TypedResponseError(`Failed to create directory: ${result.stderr}`);
+          }
+          return {};
+        },
+      ),
+    );
+
+    // Remove file/directory from container
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_WorkspaceRm>(
+        'workspaceRm',
+        async (dataArg) => {
+          await requireValidIdentity(this.opsServerRef.adminHandler, dataArg);
+          const containerId = await this.resolveContainerId(dataArg.serviceName);
+          const args = dataArg.recursive ? ['rm', '-rf', dataArg.path] : ['rm', '-f', dataArg.path];
+          const result = await this.opsServerRef.oneboxRef.docker.execInContainer(
+            containerId,
+            args,
+          );
+          if (result.exitCode !== 0) {
+            throw new plugins.typedrequest.TypedResponseError(`Failed to remove: ${result.stderr}`);
+          }
+          return {};
+        },
+      ),
+    );
+
+    // Check if path exists in container
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_WorkspaceExists>(
+        'workspaceExists',
+        async (dataArg) => {
+          await requireValidIdentity(this.opsServerRef.adminHandler, dataArg);
+          const containerId = await this.resolveContainerId(dataArg.serviceName);
+          const result = await this.opsServerRef.oneboxRef.docker.execInContainer(
+            containerId,
+            ['test', '-e', dataArg.path],
+          );
+          return { exists: result.exitCode === 0 };
+        },
+      ),
+    );
+
+    // Execute a command in the container (non-interactive)
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_WorkspaceExec>(
+        'workspaceExec',
+        async (dataArg) => {
+          await requireValidIdentity(this.opsServerRef.adminHandler, dataArg);
+          const containerId = await this.resolveContainerId(dataArg.serviceName);
+          const cmd = dataArg.args
+            ? [dataArg.command, ...dataArg.args]
+            : [dataArg.command];
+          const result = await this.opsServerRef.oneboxRef.docker.execInContainer(
+            containerId,
+            cmd,
+          );
+          return {
+            stdout: result.stdout,
+            stderr: result.stderr,
+            exitCode: result.exitCode,
+          };
+        },
+      ),
+    );
+
+    logger.info('Workspace handler registered');
+  }
+}

ts_interfaces/requests/index.ts

@@ -11,3 +11,4 @@ export * from './backups.ts';
 export * from './backup-schedules.ts';
 export * from './settings.ts';
 export * from './logs.ts';
+export * from './workspace.ts';

ts_interfaces/requests/workspace.ts

@@ -0,0 +1,106 @@
+import * as plugins from '../plugins.ts';
+import * as data from '../data/index.ts';
+
+export interface IReq_WorkspaceReadFile extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_WorkspaceReadFile
+> {
+  method: 'workspaceReadFile';
+  request: {
+    identity: data.IIdentity;
+    serviceName: string;
+    path: string;
+  };
+  response: {
+    content: string;
+  };
+}
+
+export interface IReq_WorkspaceWriteFile extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_WorkspaceWriteFile
+> {
+  method: 'workspaceWriteFile';
+  request: {
+    identity: data.IIdentity;
+    serviceName: string;
+    path: string;
+    content: string;
+  };
+  response: {};
+}
+
+export interface IReq_WorkspaceReadDir extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_WorkspaceReadDir
+> {
+  method: 'workspaceReadDir';
+  request: {
+    identity: data.IIdentity;
+    serviceName: string;
+    path: string;
+  };
+  response: {
+    entries: Array<{ type: 'file' | 'directory'; name: string; path: string }>;
+  };
+}
+
+export interface IReq_WorkspaceMkdir extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_WorkspaceMkdir
+> {
+  method: 'workspaceMkdir';
+  request: {
+    identity: data.IIdentity;
+    serviceName: string;
+    path: string;
+  };
+  response: {};
+}
+
+export interface IReq_WorkspaceRm extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_WorkspaceRm
+> {
+  method: 'workspaceRm';
+  request: {
+    identity: data.IIdentity;
+    serviceName: string;
+    path: string;
+    recursive?: boolean;
+  };
+  response: {};
+}
+
+export interface IReq_WorkspaceExists extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_WorkspaceExists
+> {
+  method: 'workspaceExists';
+  request: {
+    identity: data.IIdentity;
+    serviceName: string;
+    path: string;
+  };
+  response: {
+    exists: boolean;
+  };
+}
+
+export interface IReq_WorkspaceExec extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_WorkspaceExec
+> {
+  method: 'workspaceExec';
+  request: {
+    identity: data.IIdentity;
+    serviceName: string;
+    command: string;
+    args?: string[];
+  };
+  response: {
+    stdout: string;
+    stderr: string;
+    exitCode: number;
+  };
+}

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/onebox',
-  version: '1.20.0',
+  version: '1.22.1',
   description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
 }

ts_web/appstate.ts

@@ -58,6 +58,7 @@ export interface IUiState {
   activeView: string;
   autoRefresh: boolean;
   refreshInterval: number;
+  pendingAppTemplate?: any;
 }
 
 // ============================================================================

ts_web/elements/ob-app-shell.ts

@@ -38,6 +38,7 @@ export class ObAppShell extends DeesElement {
 
   private viewTabs = [
     { name: 'Dashboard', iconName: 'lucide:layoutDashboard', element: (async () => (await import('./ob-view-dashboard.js')).ObViewDashboard)() },
+    { name: 'App Store', iconName: 'lucide:store', element: (async () => (await import('./ob-view-appstore.js')).ObViewAppStore)() },
     { name: 'Services', iconName: 'lucide:boxes', element: (async () => (await import('./ob-view-services.js')).ObViewServices)() },
     { name: 'Network', iconName: 'lucide:network', element: (async () => (await import('./ob-view-network.js')).ObViewNetwork)() },
     { name: 'Registries', iconName: 'lucide:package', element: (async () => (await import('./ob-view-registries.js')).ObViewRegistries)() },

ts_web/elements/ob-view-appstore.ts

@@ -0,0 +1,220 @@
+import * as plugins from '../plugins.js';
+import * as shared from './shared/index.js';
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../ts_interfaces/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+// App template definitions — curated Docker apps
+const appTemplates = [
+  {
+    id: 'nginx',
+    name: 'Nginx',
+    description: 'High-performance web server and reverse proxy. Lightweight, fast, and battle-tested.',
+    category: 'Web Server',
+    iconName: 'globe',
+    image: 'nginx:alpine',
+    port: 80,
+  },
+  {
+    id: 'wordpress',
+    name: 'WordPress',
+    description: 'The world\'s most popular content management system. Powers over 40% of the web.',
+    category: 'CMS',
+    iconName: 'file-text',
+    image: 'wordpress:latest',
+    port: 80,
+    enableMongoDB: false,
+    envVars: [
+      { key: 'WORDPRESS_DB_HOST', value: '', description: 'Database host', required: true },
+      { key: 'WORDPRESS_DB_USER', value: 'wordpress', description: 'Database user' },
+      { key: 'WORDPRESS_DB_PASSWORD', value: '', description: 'Database password', required: true },
+      { key: 'WORDPRESS_DB_NAME', value: 'wordpress', description: 'Database name' },
+    ],
+  },
+  {
+    id: 'ghost',
+    name: 'Ghost',
+    description: 'Modern publishing platform for creating professional blogs and newsletters.',
+    category: 'CMS',
+    iconName: 'book-open',
+    image: 'ghost:latest',
+    port: 2368,
+    envVars: [
+      { key: 'url', value: 'http://localhost:2368', description: 'Public URL of the blog' },
+    ],
+  },
+  {
+    id: 'gitea',
+    name: 'Gitea',
+    description: 'Lightweight self-hosted Git service. Easy to install and maintain.',
+    category: 'Dev Tools',
+    iconName: 'git-branch',
+    image: 'gitea/gitea:latest',
+    port: 3000,
+  },
+  {
+    id: 'nextcloud',
+    name: 'Nextcloud',
+    description: 'Self-hosted file sync and share platform. Your own private cloud.',
+    category: 'Storage',
+    iconName: 'package',
+    image: 'nextcloud:latest',
+    port: 80,
+  },
+  {
+    id: 'grafana',
+    name: 'Grafana',
+    description: 'Open-source observability platform for metrics, logs, and traces visualization.',
+    category: 'Monitoring',
+    iconName: 'monitor',
+    image: 'grafana/grafana:latest',
+    port: 3000,
+    envVars: [
+      { key: 'GF_SECURITY_ADMIN_PASSWORD', value: 'admin', description: 'Admin password' },
+    ],
+  },
+  {
+    id: 'uptime-kuma',
+    name: 'Uptime Kuma',
+    description: 'Self-hosted monitoring tool. Beautiful UI for tracking uptime of services.',
+    category: 'Monitoring',
+    iconName: 'monitor',
+    image: 'louislam/uptime-kuma:latest',
+    port: 3001,
+  },
+  {
+    id: 'plausible',
+    name: 'Plausible Analytics',
+    description: 'Privacy-friendly web analytics. No cookies, GDPR compliant by design.',
+    category: 'Analytics',
+    iconName: 'monitor',
+    image: 'plausible/analytics:latest',
+    port: 8000,
+    enableClickHouse: true,
+  },
+  {
+    id: 'vaultwarden',
+    name: 'Vaultwarden',
+    description: 'Lightweight Bitwarden-compatible password manager server.',
+    category: 'Security',
+    iconName: 'shield',
+    image: 'vaultwarden/server:latest',
+    port: 80,
+  },
+  {
+    id: 'n8n',
+    name: 'N8N',
+    description: 'Workflow automation tool. Connect anything to everything with a visual editor.',
+    category: 'Automation',
+    iconName: 'server',
+    image: 'n8nio/n8n:latest',
+    port: 5678,
+  },
+  {
+    id: 'mattermost',
+    name: 'Mattermost',
+    description: 'Open-source Slack alternative for team communication and collaboration.',
+    category: 'Communication',
+    iconName: 'mail',
+    image: 'mattermost/mattermost-team-edition:latest',
+    port: 8065,
+  },
+  {
+    id: 'portainer',
+    name: 'Portainer',
+    description: 'Docker management UI. Monitor and manage containers from a web interface.',
+    category: 'Dev Tools',
+    iconName: 'package',
+    image: 'portainer/portainer-ce:latest',
+    port: 9000,
+  },
+  {
+    id: 'redis',
+    name: 'Redis',
+    description: 'In-memory data store used as database, cache, and message broker.',
+    category: 'Database',
+    iconName: 'database',
+    image: 'redis:alpine',
+    port: 6379,
+  },
+  {
+    id: 'postgres',
+    name: 'PostgreSQL',
+    description: 'Advanced open-source relational database. Reliable and feature-rich.',
+    category: 'Database',
+    iconName: 'database',
+    image: 'postgres:16-alpine',
+    port: 5432,
+    envVars: [
+      { key: 'POSTGRES_PASSWORD', value: '', description: 'Superuser password', required: true },
+      { key: 'POSTGRES_USER', value: 'postgres', description: 'Superuser name' },
+      { key: 'POSTGRES_DB', value: 'postgres', description: 'Default database name' },
+    ],
+  },
+  {
+    id: 'mariadb',
+    name: 'MariaDB',
+    description: 'Community-developed fork of MySQL. Drop-in replacement with enhanced features.',
+    category: 'Database',
+    iconName: 'database',
+    image: 'mariadb:latest',
+    port: 3306,
+    envVars: [
+      { key: 'MARIADB_ROOT_PASSWORD', value: '', description: 'Root password', required: true },
+    ],
+  },
+  {
+    id: 'adminer',
+    name: 'Adminer',
+    description: 'Database management tool in a single PHP file. Supports MySQL, PostgreSQL, SQLite.',
+    category: 'Dev Tools',
+    iconName: 'database',
+    image: 'adminer:latest',
+    port: 8080,
+  },
+];
+
+@customElement('ob-view-appstore')
+export class ObViewAppStore extends DeesElement {
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+    css``,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <ob-sectionheading>App Store</ob-sectionheading>
+      <sz-app-store-view
+        .apps=${appTemplates}
+        @deploy-app=${(e: CustomEvent) => this.handleDeployApp(e)}
+      ></sz-app-store-view>
+    `;
+  }
+
+  private handleDeployApp(e: CustomEvent) {
+    const app = e.detail?.app;
+    if (!app) return;
+
+    // Store the template in appstate so the services create view can pre-fill
+    appstate.uiStatePart.setState({
+      ...appstate.uiStatePart.getState(),
+      pendingAppTemplate: app,
+    });
+
+    // Navigate to Services tab — the services view will detect the pending template
+    appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'services' });
+  }
+}

ts_web/elements/ob-view-services.ts

@@ -2,6 +2,7 @@ import * as plugins from '../plugins.js';
 import * as shared from './shared/index.js';
 import * as appstate from '../appstate.js';
 import * as interfaces from '../../ts_interfaces/index.js';
+import { BackendExecutionEnvironment } from '../environments/backend-environment.js';
 import {
   DeesElement,
   customElement,
@@ -135,6 +136,12 @@ export class ObViewServices extends DeesElement {
   @state()
   accessor selectedPlatformType: string = '';
 
+  @state()
+  accessor workspaceOpen: boolean = false;
+
+  @state()
+  accessor pendingTemplate: any = null;
+
   constructor() {
     super();
 
@@ -186,6 +193,18 @@ export class ObViewServices extends DeesElement {
         width: 16px;
         height: 16px;
       }
+
+      :host(.workspace-mode) {
+        max-width: none;
+        padding: 0;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host(.workspace-mode) ob-sectionheading {
+        display: none;
+      }
     `,
   ];
 
@@ -200,13 +219,23 @@ export class ObViewServices extends DeesElement {
     const state = appstate.servicesStatePart.getState();
     if (state.currentPlatformService) {
       const type = state.currentPlatformService.type;
-      // Clear the selection so it doesn't persist on next visit
       appstate.servicesStatePart.setState({
         ...appstate.servicesStatePart.getState(),
         currentPlatformService: null,
       });
       this.navigateToPlatformDetail(type);
     }
+
+    // If an app template was selected from the App Store, switch to create view
+    const uiState = appstate.uiStatePart.getState();
+    if (uiState.pendingAppTemplate) {
+      this.pendingTemplate = uiState.pendingAppTemplate;
+      appstate.uiStatePart.setState({
+        ...appstate.uiStatePart.getState(),
+        pendingAppTemplate: undefined,
+      });
+      this.currentView = 'create';
+    }
   }
 
   public render(): TemplateResult {
@@ -293,7 +322,63 @@ export class ObViewServices extends DeesElement {
     `;
   }
 
+  private async deployFromTemplate(template: any): Promise<void> {
+    const name = template.id || template.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    const envVars: Record<string, string> = {};
+    if (template.envVars) {
+      for (const ev of template.envVars) {
+        if (ev.key && ev.value) envVars[ev.key] = ev.value;
+      }
+    }
+    const serviceConfig: interfaces.data.IServiceCreate = {
+      name,
+      image: template.image,
+      port: template.port || 80,
+      envVars,
+      enableMongoDB: template.enableMongoDB || false,
+      enableS3: template.enableS3 || false,
+      enableClickHouse: template.enableClickHouse || false,
+    };
+    await appstate.servicesStatePart.dispatchAction(appstate.createServiceAction, {
+      config: serviceConfig,
+    });
+    this.pendingTemplate = null;
+    this.currentView = 'list';
+  }
+
   private renderCreateView(): TemplateResult {
+    // If we have a pending app template from the App Store, show a quick-deploy confirmation
+    if (this.pendingTemplate) {
+      const t = this.pendingTemplate;
+      return html`
+        <ob-sectionheading>Deploy ${t.name}</ob-sectionheading>
+        <div style="max-width: 600px; margin: 0 auto;">
+          <div style="background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 8px; padding: 24px; margin-bottom: 16px;">
+            <h3 style="margin: 0 0 8px 0; font-size: 18px;">${t.name}</h3>
+            <p style="margin: 0 0 16px 0; color: var(--ci-shade-5, #a1a1aa); font-size: 14px;">${t.description}</p>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px;">
+              <div><span style="color: var(--ci-shade-5, #a1a1aa);">Image:</span> <strong>${t.image}</strong></div>
+              <div><span style="color: var(--ci-shade-5, #a1a1aa);">Port:</span> <strong>${t.port}</strong></div>
+              <div><span style="color: var(--ci-shade-5, #a1a1aa);">Service Name:</span> <strong>${t.id}</strong></div>
+              <div><span style="color: var(--ci-shade-5, #a1a1aa);">Category:</span> <strong>${t.category}</strong></div>
+            </div>
+            ${t.enableMongoDB || t.enableS3 || t.enableClickHouse ? html`
+              <div style="margin-top: 12px; font-size: 13px; color: var(--ci-shade-5, #a1a1aa);">
+                Platform Services:
+                ${t.enableMongoDB ? html`<span style="margin-right: 8px;">MongoDB</span>` : ''}
+                ${t.enableS3 ? html`<span style="margin-right: 8px;">S3</span>` : ''}
+                ${t.enableClickHouse ? html`<span>ClickHouse</span>` : ''}
+              </div>
+            ` : ''}
+          </div>
+          <div style="display: flex; gap: 12px; justify-content: flex-end;">
+            <button class="deploy-button" style="background: transparent; border: 1px solid var(--ci-shade-2, #27272a); color: inherit;" @click=${() => { this.pendingTemplate = null; this.currentView = 'list'; }}>Cancel</button>
+            <button class="deploy-button" @click=${() => this.deployFromTemplate(t)}>Deploy ${t.name}</button>
+          </div>
+        </div>
+      `;
+    }
+
     return html`
       <ob-sectionheading>Create Service</ob-sectionheading>
       <sz-service-create-view
@@ -347,6 +432,28 @@ export class ObViewServices extends DeesElement {
           this.currentView = 'list';
         }}
         @service-action=${(e: CustomEvent) => this.handleServiceAction(e)}
+        @request-workspace=${async (e: CustomEvent) => {
+          const name = e.detail?.service?.name || this.selectedServiceName;
+          const identity = appstate.loginStatePart.getState().identity;
+          if (!name || !identity) return;
+          try {
+            const env = new BackendExecutionEnvironment(name, identity);
+            await env.init();
+            const detailView = this.shadowRoot?.querySelector('sz-service-detail-view') as any;
+            if (detailView) {
+              detailView.workspaceEnvironment = env;
+            }
+            this.workspaceOpen = true;
+            this.classList.add('workspace-mode');
+          } catch (err) {
+            console.error('Failed to open workspace:', err);
+          }
+        }}
+        @back=${() => {
+          this.workspaceOpen = false;
+          this.classList.remove('workspace-mode');
+          this.currentView = 'list';
+        }}
       ></sz-service-detail-view>
     `;
   }

ts_web/environments/backend-environment.ts

@@ -0,0 +1,155 @@
+/**
+ * BackendExecutionEnvironment — implements IExecutionEnvironment
+ * by routing all filesystem and process operations through the onebox API
+ * to Docker exec on the target container.
+ */
+
+import * as plugins from '../plugins.js';
+import * as interfaces from '../../ts_interfaces/index.js';
+
+// Import IExecutionEnvironment type from dees-catalog
+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;
+
+const domtools = plugins.deesElement.domtools;
+
+export class BackendExecutionEnvironment implements IExecutionEnvironment {
+  readonly type = 'backend' as const;
+  private _ready = false;
+  private identity: interfaces.data.IIdentity;
+
+  constructor(
+    private serviceName: string,
+    identity: interfaces.data.IIdentity,
+  ) {
+    this.identity = identity;
+  }
+
+  get ready(): boolean {
+    return this._ready;
+  }
+
+  async init(): Promise<void> {
+    // Verify the container is accessible by checking if root exists
+    const result = await this.fireRequest<interfaces.requests.IReq_WorkspaceExists>(
+      'workspaceExists',
+      { path: '/' },
+    );
+    if (!result.exists) {
+      throw new Error(`Cannot access container filesystem for service: ${this.serviceName}`);
+    }
+    this._ready = true;
+  }
+
+  async destroy(): Promise<void> {
+    this._ready = false;
+  }
+
+  async readFile(path: string): Promise<string> {
+    const result = await this.fireRequest<interfaces.requests.IReq_WorkspaceReadFile>(
+      'workspaceReadFile',
+      { path },
+    );
+    return result.content;
+  }
+
+  async writeFile(path: string, contents: string): Promise<void> {
+    await this.fireRequest<interfaces.requests.IReq_WorkspaceWriteFile>(
+      'workspaceWriteFile',
+      { path, content: contents },
+    );
+  }
+
+  async readDir(path: string): Promise<IFileEntry[]> {
+    const result = await this.fireRequest<interfaces.requests.IReq_WorkspaceReadDir>(
+      'workspaceReadDir',
+      { path },
+    );
+    return result.entries;
+  }
+
+  async mkdir(path: string): Promise<void> {
+    await this.fireRequest<interfaces.requests.IReq_WorkspaceMkdir>(
+      'workspaceMkdir',
+      { path },
+    );
+  }
+
+  async rm(path: string, options?: { recursive?: boolean }): Promise<void> {
+    await this.fireRequest<interfaces.requests.IReq_WorkspaceRm>(
+      'workspaceRm',
+      { path, recursive: options?.recursive },
+    );
+  }
+
+  async exists(path: string): Promise<boolean> {
+    const result = await this.fireRequest<interfaces.requests.IReq_WorkspaceExists>(
+      'workspaceExists',
+      { path },
+    );
+    return result.exists;
+  }
+
+  watch(
+    _path: string,
+    _callback: (event: 'rename' | 'change', filename: string | null) => void,
+    _options?: { recursive?: boolean },
+  ): IFileWatcher {
+    // Polling-based file watching — check for changes periodically
+    // For now, return a no-op watcher. Full implementation would poll readDir.
+    return { stop: () => {} };
+  }
+
+  async spawn(command: string, args?: string[]): Promise<IProcessHandle> {
+    // For interactive shell: execute the command via the workspace exec API
+    // and return a process handle that bridges stdin/stdout
+    const cmd = args ? [command, ...args] : [command];
+    const fullCommand = cmd.join(' ');
+
+    // Use a non-interactive exec for now — full interactive shell would need
+    // TypedSocket bidirectional streaming (to be implemented)
+    const result = await this.fireRequest<interfaces.requests.IReq_WorkspaceExec>(
+      'workspaceExec',
+      { command: cmd[0], args: cmd.slice(1) },
+    );
+
+    // Create a ReadableStream from the exec output
+    const output = new ReadableStream<string>({
+      start(controller) {
+        if (result.stdout) controller.enqueue(result.stdout);
+        if (result.stderr) controller.enqueue(result.stderr);
+        controller.close();
+      },
+    });
+
+    // Create a writable stream (no-op for non-interactive)
+    const inputStream = new WritableStream<string>();
+
+    return {
+      output,
+      input: inputStream,
+      exit: Promise.resolve(result.exitCode),
+      kill: () => {},
+    };
+  }
+
+  /**
+   * Helper to fire TypedRequests to the workspace API
+   */
+  private async fireRequest<T extends { method: string; request: any; response: any }>(
+    method: string,
+    data: Omit<T['request'], 'identity' | 'serviceName'>,
+  ): Promise<T['response']> {
+    const typedRequest = new domtools.plugins.typedrequest.TypedRequest<T>(
+      '/typedrequest',
+      method,
+    );
+    return await typedRequest.fire({
+      identity: this.identity,
+      serviceName: this.serviceName,
+      ...data,
+    } as T['request']);
+  }
+}