v1.22.0

- Aggregate CPU, memory, and network stats across all running containers
- Extend ISystemStatus.docker with resource usage fields
- Fix getContainerStats Swarm service ID fallback
- Wire dashboard resource usage card to real backend data

changelog.md

@@ -1,5 +1,118 @@
 # Changelog
 
+## 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
+
+- add typed socket support for pushing live user service log entries to the web app
+- extend platform log streaming to include running user services with separate dashboard handlers
+- fall back from direct container lookup to service-to-container resolution when streaming Docker logs
+- update log parsing to preserve timestamps and infer log levels for service log entries
+- bump @serve.zone/catalog to ^2.7.0
+
+## 2026-03-17 - 1.19.12 - fix(repo)
+no changes to commit
+
+
+## 2026-03-17 - 1.19.11 - fix(repo)
+no changes to commit
+
+
+## 2026-03-17 - 1.19.10 - fix(repo)
+no changes to commit
+
+
+## 2026-03-17 - 1.19.9 - fix(repo)
+no changes to commit
+
+
+## 2026-03-17 - 1.19.8 - fix(repo)
+no changes to commit
+
+
+## 2026-03-17 - 1.19.7 - fix(repo)
+no changes to commit
+
+
+## 2026-03-17 - 1.19.6 - fix(repository)
+no changes to commit
+
+
+## 2026-03-17 - 1.19.5 - fix(repo)
+no changes to commit
+
+
+## 2026-03-17 - 1.19.4 - fix(repository)
+no changes to commit
+
+
+## 2026-03-16 - 1.19.3 - fix(repo)
+no changes to commit
+
+
+## 2026-03-16 - 1.19.2 - fix(docs)
+remove outdated UI screenshot assets from project documentation
+
+- Deletes multiple PNG screenshots that documented previous dashboard, service form, and hello-world states.
+- Reduces repository clutter by removing obsolete image assets no longer needed in docs.
+
+## 2026-03-16 - 1.19.1 - fix(dashboard)
+add updated dashboard screenshots for refresh and resource usage states
+
+- Adds new dashboard screenshots covering post-refresh, resource usage, and populated data views.
+- Updates visual assets to document current dashboard behavior and UI states.
+
+## 2026-03-16 - 1.19.1 - fix(dashboard)
+add aggregated resource usage stats to the dashboard
+
+- Aggregate CPU, memory, and network stats across all running user and platform service containers in getSystemStatus
+- Extend ISystemStatus.docker interface with cpuUsage, memoryUsage, memoryTotal, networkIn, networkOut fields
+- Fix getContainerStats to properly handle Swarm service IDs by catching exceptions and falling back to label-based container lookup
+- Wire dashboard resource usage card to display real aggregated data from the backend
+
+## 2026-03-16 - 1.19.0 - feat(opsserver,web)
+add real-time platform service log streaming to the dashboard
+
+- stream running platform service container logs from the ops server to connected dashboard clients via TypedSocket
+- parse Docker log timestamps and levels for both pushed and fetched platform service log entries
+- enhance the platform service detail view with mapped statuses and predefined host, port, version, and config metadata
+- add the typedsocket dependency and update the catalog package for dashboard support
+
+## 2026-03-16 - 1.18.5 - fix(platform-services)
+fix platform service detail view navigation and log display
+
+- Add back button to platform service detail view for returning to services list
+- Fix DOM lifecycle when switching between platform services (destroy and recreate dees-chart-log)
+- Fix timestamp format for log entries to use ISO 8601 for dees-chart-log compatibility
+- Clear previous stats/logs state before fetching new platform service data
+
+## 2026-03-16 - 1.18.4 - fix(repo)
+no changes to commit
+
+
+## 2026-03-16 - 1.18.3 - fix(deps)
+bump @serve.zone/catalog to ^2.6.1
+
+- Updates the @serve.zone/catalog runtime dependency from ^2.6.0 to ^2.6.1.
+
+## 2026-03-16 - 1.18.2 - fix(repo)
+no changes to commit
+
+
 ## 2026-03-16 - 1.18.1 - fix(repo)
 no changes to commit
 

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/onebox",
-  "version": "1.18.1",
+  "version": "1.22.0",
   "exports": "./mod.ts",
   "tasks": {
     "test": "deno test --allow-all test/",
@@ -25,7 +25,8 @@
     "@api.global/typedrequest": "npm:@api.global/typedrequest@^3.2.6",
     "@api.global/typedserver": "npm:@api.global/typedserver@^8.3.1",
     "@push.rocks/smartguard": "npm:@push.rocks/smartguard@^3.1.0",
-    "@push.rocks/smartjwt": "npm:@push.rocks/smartjwt@^2.2.1"
+    "@push.rocks/smartjwt": "npm:@push.rocks/smartjwt@^2.2.1",
+    "@api.global/typedsocket": "npm:@api.global/typedsocket@^4.1.2"
   },
   "compilerOptions": {
     "lib": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/onebox",
-  "version": "1.18.1",
+  "version": "1.22.0",
   "description": "Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers",
   "main": "mod.ts",
   "type": "module",
@@ -55,9 +55,10 @@
   "packageManager": "pnpm@10.18.1+sha512.77a884a165cbba2d8d1c19e3b4880eee6d2fcabd0d879121e282196b80042351d5eb3ca0935fa599da1dc51265cc68816ad2bddd2a2de5ea9fdf92adbec7cd34",
   "dependencies": {
     "@api.global/typedrequest-interfaces": "^3.0.19",
+    "@api.global/typedsocket": "^4.1.2",
     "@design.estate/dees-catalog": "^3.43.3",
     "@design.estate/dees-element": "^2.1.6",
-    "@serve.zone/catalog": "^2.6.0"
+    "@serve.zone/catalog": "^2.8.0"
   },
   "devDependencies": {
     "@git.zone/tsbundle": "^2.9.0",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@api.global/typedrequest-interfaces':
         specifier: ^3.0.19
         version: 3.0.19
+      '@api.global/typedsocket':
+        specifier: ^4.1.2
+        version: 4.1.2(@push.rocks/smartserve@2.0.1)
       '@design.estate/dees-catalog':
         specifier: ^3.43.3
         version: 3.48.5(@tiptap/pm@2.27.2)
@@ -18,8 +21,8 @@ importers:
         specifier: ^2.1.6
         version: 2.2.3
       '@serve.zone/catalog':
-        specifier: ^2.6.0
-        version: 2.6.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
@@ -836,8 +839,8 @@ packages:
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  '@serve.zone/catalog@2.6.0':
-    resolution: {integrity: sha512-Gp91Ed0MMLMPSAZrH2/UimGxU9AaTu5IPUobPD49PSvh3UnUl+HEFiy81kpKJhW16V37N3/vcNgZrn2VI7/LxQ==}
+  '@serve.zone/catalog@2.8.0':
+    resolution: {integrity: sha512-p0ES14JwUoJE88DBtLSHcCfFPVa0vKhvHnQLaAY3OC15kfheNKidi1SwTFyMh43jj0ZNi4Lecc3W02wG6sasHw==}
 
   '@tempfix/idb@8.0.3':
     resolution: {integrity: sha512-hPJQKO7+oAIY+pDNImrZ9QAINbz9KmwT+yO4iRVwdPanok2YKpaUxdJzIvCUwY0YgAawlvYdffbLvRLV5hbs2g==}
@@ -3474,7 +3477,7 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
-  '@serve.zone/catalog@2.6.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.18.1',
+  version: '1.22.0',
   description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
 }

ts/classes/docker.ts

@@ -596,18 +596,26 @@ export class OneboxDockerManager {
   async getContainerStats(containerID: string): Promise<IContainerStats | null> {
     try {
       // Try to get container directly first
-      let container = await this.dockerClient!.getContainerById(containerID);
+      let container: any = null;
+      try {
+        container = await this.dockerClient!.getContainerById(containerID);
+      } catch {
+        // Container not found by ID — might be a Swarm service ID
+      }
 
       // If not found, it might be a service ID - try to get the actual container ID
       if (!container) {
         const serviceContainerId = await this.getContainerIdForService(containerID);
         if (serviceContainerId) {
-          container = await this.dockerClient!.getContainerById(serviceContainerId);
+          try {
+            container = await this.dockerClient!.getContainerById(serviceContainerId);
+          } catch {
+            // Service container also not found
+          }
         }
       }
 
       if (!container) {
-        // Container/service not found
         return null;
       }
 
@@ -849,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}`);
@@ -1011,7 +1035,23 @@ export class OneboxDockerManager {
     callback: (line: string, isError: boolean) => void
   ): Promise<void> {
     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/classes/onebox.ts

@@ -291,10 +291,65 @@ export class Onebox {
       // Sort expiring domains by days remaining (ascending)
       expiringDomains.sort((a, b) => a.daysRemaining - b.daysRemaining);
 
+      // Aggregate resource usage across all running service containers
+      let totalCpu = 0;
+      let totalMemoryUsed = 0;
+      let totalMemoryLimit = 0;
+      let totalNetworkIn = 0;
+      let totalNetworkOut = 0;
+
+      if (dockerRunning) {
+        const allServices = this.services.listServices();
+        const runningUserServices = allServices.filter((s) => s.status === 'running' && s.containerID);
+        logger.debug(`Resource stats: ${runningUserServices.length} running user services`);
+
+        const statsPromises = runningUserServices
+          .map((s) => {
+            logger.debug(`Fetching stats for user service: ${s.name} (${s.containerID})`);
+            return this.docker.getContainerStats(s.containerID!).catch((err) => {
+              logger.debug(`Stats failed for ${s.name}: ${(err as Error).message}`);
+              return null;
+            });
+          });
+
+        // Also get stats for platform service containers
+        const allPlatformServices = this.platformServices.getAllPlatformServices();
+        const runningPlatformServices = allPlatformServices.filter((s) => s.status === 'running' && s.containerId);
+        logger.debug(`Resource stats: ${runningPlatformServices.length} running platform services`);
+
+        const platformStatsPromises = runningPlatformServices
+          .map((s) => {
+            logger.debug(`Fetching stats for platform service: ${s.type} (${s.containerId})`);
+            return this.docker.getContainerStats(s.containerId!).catch((err) => {
+              logger.debug(`Stats failed for ${s.type}: ${(err as Error).message}`);
+              return null;
+            });
+          });
+
+        const allStats = await Promise.all([...statsPromises, ...platformStatsPromises]);
+        let successCount = 0;
+        for (const stats of allStats) {
+          if (stats) {
+            successCount++;
+            totalCpu += stats.cpuPercent;
+            totalMemoryUsed += stats.memoryUsed;
+            totalMemoryLimit = Math.max(totalMemoryLimit, stats.memoryLimit);
+            totalNetworkIn += stats.networkRx;
+            totalNetworkOut += stats.networkTx;
+          }
+        }
+        logger.debug(`Resource stats: ${successCount}/${allStats.length} containers returned stats. CPU: ${totalCpu}, Mem: ${totalMemoryUsed}`);
+      }
+
       return {
         docker: {
           running: dockerRunning,
           version: dockerRunning ? await this.docker.getDockerVersion() : null,
+          cpuUsage: Math.round(totalCpu * 10) / 10,
+          memoryUsage: totalMemoryUsed,
+          memoryTotal: totalMemoryLimit,
+          networkIn: totalNetworkIn,
+          networkOut: totalNetworkOut,
         },
         reverseProxy: proxyStatus,
         dns: {

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/platform.handler.ts

@@ -6,10 +6,128 @@ import { requireValidIdentity } from '../helpers/guards.ts';
 
 export class PlatformHandler {
   public typedrouter = new plugins.typedrequest.TypedRouter();
+  private activeLogStreams = new Map<string, boolean>();
 
   constructor(private opsServerRef: OpsServer) {
     this.opsServerRef.typedrouter.addTypedRouter(this.typedrouter);
     this.registerHandlers();
+    this.startLogStreaming();
+  }
+
+  /**
+   * Start streaming logs from all running containers (platform + user services)
+   * and push new entries to connected dashboard clients via TypedSocket
+   */
+  private async startLogStreaming(): Promise<void> {
+    const checkAndStream = async () => {
+      // Stream platform service containers
+      const platformServices = this.opsServerRef.oneboxRef.database.getAllPlatformServices();
+      for (const service of platformServices) {
+        if (service.status !== 'running' || !service.containerId) continue;
+        const key = `platform:${service.type}`;
+        if (this.activeLogStreams.has(key)) continue;
+
+        this.activeLogStreams.set(key, true);
+        logger.info(`Starting log stream for platform service: ${service.type}`);
+
+        try {
+          await this.opsServerRef.oneboxRef.docker.streamContainerLogs(
+            service.containerId,
+            (line: string, isError: boolean) => {
+              this.pushPlatformLogToClients(service.type as interfaces.data.TPlatformServiceType, line, isError);
+            }
+          );
+        } catch (err) {
+          logger.warn(`Log stream failed for ${service.type}: ${(err as Error).message}`);
+          this.activeLogStreams.delete(key);
+        }
+      }
+
+      // Stream user service containers
+      const userServices = this.opsServerRef.oneboxRef.services.listServices();
+      for (const service of userServices) {
+        if (service.status !== 'running' || !service.containerID) continue;
+        const key = `service:${service.name}`;
+        if (this.activeLogStreams.has(key)) continue;
+
+        this.activeLogStreams.set(key, true);
+        logger.info(`Starting log stream for user service: ${service.name}`);
+
+        try {
+          await this.opsServerRef.oneboxRef.docker.streamContainerLogs(
+            service.containerID,
+            (line: string, isError: boolean) => {
+              this.pushServiceLogToClients(service.name, line, isError);
+            }
+          );
+        } catch (err) {
+          logger.warn(`Log stream failed for ${service.name}: ${(err as Error).message}`);
+          this.activeLogStreams.delete(key);
+        }
+      }
+    };
+
+    // Initial check after a short delay (let services start first)
+    setTimeout(() => checkAndStream(), 5000);
+    // Re-check periodically for newly started services
+    setInterval(() => checkAndStream(), 15000);
+  }
+
+  private parseLogLine(line: string, isError: boolean): { timestamp: string; level: string; message: string } {
+    const tsMatch = line.match(/^(\d{4}-\d{2}-\d{2}T[\d:.]+Z?)\s+(.*)/);
+    const timestamp = tsMatch ? tsMatch[1] : new Date().toISOString();
+    const message = tsMatch ? tsMatch[2] : line;
+    const msgLower = message.toLowerCase();
+    const level = isError || msgLower.includes('error') || msgLower.includes('fatal')
+      ? 'error'
+      : msgLower.includes('warn')
+        ? 'warn'
+        : 'info';
+    return { timestamp, level, message };
+  }
+
+  private pushPlatformLogToClients(
+    serviceType: interfaces.data.TPlatformServiceType,
+    line: string,
+    isError: boolean,
+  ): void {
+    const typedsocket = (this.opsServerRef.server as any)?.typedserver?.typedsocket;
+    if (!typedsocket) return;
+
+    const entry = this.parseLogLine(line, isError);
+
+    typedsocket.findAllTargetConnectionsByTag('role', 'ops_dashboard')
+      .then((connections: any[]) => {
+        for (const conn of connections) {
+          typedsocket.createTypedRequest<interfaces.requests.IReq_PushPlatformServiceLog>(
+            'pushPlatformServiceLog',
+            conn,
+          ).fire({ serviceType, entry }).catch(() => {});
+        }
+      })
+      .catch(() => {});
+  }
+
+  private pushServiceLogToClients(
+    serviceName: string,
+    line: string,
+    isError: boolean,
+  ): void {
+    const typedsocket = (this.opsServerRef.server as any)?.typedserver?.typedsocket;
+    if (!typedsocket) return;
+
+    const entry = this.parseLogLine(line, isError);
+
+    typedsocket.findAllTargetConnectionsByTag('role', 'ops_dashboard')
+      .then((connections: any[]) => {
+        for (const conn of connections) {
+          typedsocket.createTypedRequest<interfaces.requests.IReq_PushServiceLog>(
+            'pushServiceLog',
+            conn,
+          ).fire({ serviceName, entry }).catch(() => {});
+        }
+      })
+      .catch(() => {});
   }
 
   private registerHandlers(): void {
@@ -186,13 +304,18 @@ export class PlatformHandler {
             .filter((line: string) => line.trim());
 
           const logs = logLines.map((line: string, index: number) => {
-            const isError = line.toLowerCase().includes('error') || line.toLowerCase().includes('fatal');
-            const isWarn = line.toLowerCase().includes('warn');
+            // Try to parse Docker timestamp from beginning of line
+            const tsMatch = line.match(/^(\d{4}-\d{2}-\d{2}T[\d:.]+Z?)\s+(.*)/);
+            const timestamp = tsMatch ? new Date(tsMatch[1]).getTime() : Date.now();
+            const message = tsMatch ? tsMatch[2] : line;
+            const msgLower = message.toLowerCase();
+            const isError = msgLower.includes('error') || msgLower.includes('fatal');
+            const isWarn = msgLower.includes('warn');
             return {
               id: index,
               serviceId: 0,
-              timestamp: Date.now(),
-              message: line,
+              timestamp,
+              message,
               level: (isError ? 'error' : isWarn ? 'warn' : 'info') as 'info' | 'warn' | 'error' | 'debug',
               source: 'stdout' as const,
             };

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/data/system.ts

@@ -8,6 +8,11 @@ export interface ISystemStatus {
   docker: {
     running: boolean;
     version: unknown;
+    cpuUsage: number;
+    memoryUsage: number;
+    memoryTotal: number;
+    networkIn: number;
+    networkOut: number;
   };
   reverseProxy: {
     http: { running: boolean; port: number };

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/platform-services.ts

@@ -84,3 +84,19 @@ export interface IReq_GetPlatformServiceLogs extends plugins.typedrequestInterfa
     logs: data.ILogEntry[];
   };
 }
+
+export interface IReq_PushPlatformServiceLog extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_PushPlatformServiceLog
+> {
+  method: 'pushPlatformServiceLog';
+  request: {
+    serviceType: data.TPlatformServiceType;
+    entry: {
+      timestamp: string;
+      level: string;
+      message: string;
+    };
+  };
+  response: {};
+}

ts_interfaces/requests/services.ts

@@ -212,3 +212,19 @@ export interface IReq_GetServiceBackupSchedules extends plugins.typedrequestInte
     schedules: data.IBackupSchedule[];
   };
 }
+
+export interface IReq_PushServiceLog extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_PushServiceLog
+> {
+  method: 'pushServiceLog';
+  request: {
+    serviceName: string;
+    entry: {
+      timestamp: string;
+      level: string;
+      message: string;
+    };
+  };
+  response: {};
+}

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.18.1',
+  version: '1.22.0',
   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;
 }
 
 // ============================================================================
@@ -961,3 +962,104 @@ const startAutoRefresh = () => {
 uiStatePart.select((s) => s).subscribe(() => startAutoRefresh());
 loginStatePart.select((s) => s).subscribe(() => startAutoRefresh());
 startAutoRefresh();
+
+// ============================================================================
+// TypedSocket — real-time server push (logs, events)
+// ============================================================================
+
+let socketClient: InstanceType<typeof plugins.typedsocket.TypedSocket> | null = null;
+const socketRouter = new plugins.domtools.plugins.typedrequest.TypedRouter();
+
+// Handle server-pushed platform service log entries
+socketRouter.addTypedHandler(
+  new plugins.domtools.plugins.typedrequest.TypedHandler<interfaces.requests.IReq_PushPlatformServiceLog>(
+    'pushPlatformServiceLog',
+    async (dataArg) => {
+      const state = servicesStatePart.getState();
+      const entry: interfaces.data.ILogEntry = {
+        id: state.currentPlatformServiceLogs.length,
+        serviceId: 0,
+        timestamp: new Date(dataArg.entry.timestamp).getTime(),
+        message: dataArg.entry.message,
+        level: dataArg.entry.level as 'info' | 'warn' | 'error' | 'debug',
+        source: 'stdout',
+      };
+      const updated = [...state.currentPlatformServiceLogs, entry];
+      // Cap at 2000 entries
+      if (updated.length > 2000) {
+        updated.splice(0, updated.length - 2000);
+      }
+      servicesStatePart.setState({
+        ...state,
+        currentPlatformServiceLogs: updated,
+      });
+      return {};
+    },
+  ),
+);
+
+// Handle server-pushed user service log entries
+socketRouter.addTypedHandler(
+  new plugins.domtools.plugins.typedrequest.TypedHandler<interfaces.requests.IReq_PushServiceLog>(
+    'pushServiceLog',
+    async (dataArg) => {
+      const state = servicesStatePart.getState();
+      // Only append if we're currently viewing this service
+      if (!state.currentService || state.currentService.name !== dataArg.serviceName) {
+        return {};
+      }
+      const entry: interfaces.data.ILogEntry = {
+        id: state.currentServiceLogs.length,
+        serviceId: 0,
+        timestamp: new Date(dataArg.entry.timestamp).getTime(),
+        message: dataArg.entry.message,
+        level: dataArg.entry.level as 'info' | 'warn' | 'error' | 'debug',
+        source: 'stdout',
+      };
+      const updated = [...state.currentServiceLogs, entry];
+      if (updated.length > 2000) {
+        updated.splice(0, updated.length - 2000);
+      }
+      servicesStatePart.setState({
+        ...state,
+        currentServiceLogs: updated,
+      });
+      return {};
+    },
+  ),
+);
+
+async function connectSocket() {
+  if (socketClient) return;
+  try {
+    socketClient = await plugins.typedsocket.TypedSocket.createClient(
+      socketRouter,
+      plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl(),
+    );
+    await socketClient.setTag('role', 'ops_dashboard');
+    console.log('TypedSocket dashboard connection established');
+  } catch (err) {
+    console.error('TypedSocket connection failed:', err);
+    socketClient = null;
+  }
+}
+
+async function disconnectSocket() {
+  if (socketClient) {
+    try {
+      await socketClient.disconnect();
+    } catch {
+      // ignore disconnect errors
+    }
+    socketClient = null;
+  }
+}
+
+// Connect socket when logged in, disconnect when logged out
+loginStatePart.select((s) => s).subscribe((loginState) => {
+  if (loginState.isLoggedIn) {
+    connectSocket();
+  } else {
+    disconnectSocket();
+  }
+});

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-dashboard.ts

@@ -110,8 +110,8 @@ export class ObViewDashboard extends DeesElement {
             cpu: status?.docker?.cpuUsage || 0,
             memoryUsed: status?.docker?.memoryUsage || 0,
             memoryTotal: status?.docker?.memoryTotal || 0,
-            networkIn: 0,
-            networkOut: 0,
+            networkIn: status?.docker?.networkIn || 0,
+            networkOut: status?.docker?.networkOut || 0,
             topConsumers: [],
           },
           platformServices: platformServices.map((ps) => ({

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,
@@ -76,20 +77,29 @@ function toServiceStats(stats: interfaces.data.IContainerStats) {
   };
 }
 
-function parseLogs(logs: any): Array<{ timestamp: string; message: string }> {
+function parseLogs(logs: any): Array<{ timestamp: string; message: string; level?: string }> {
   if (Array.isArray(logs)) {
-    return logs.map((entry: any) => ({
-      timestamp: entry.timestamp ? String(entry.timestamp) : '',
-      message: entry.message || String(entry),
-    }));
+    return logs.map((entry: any) => {
+      const ts = entry.timestamp
+        ? (typeof entry.timestamp === 'number' ? new Date(entry.timestamp).toISOString() : String(entry.timestamp))
+        : new Date().toISOString();
+      const message = entry.message || String(entry);
+      const level = entry.level || 'info';
+      return { timestamp: ts, message, level };
+    });
   }
   if (typeof logs === 'string' && logs.trim()) {
     return logs.split('\n').filter((line: string) => line.trim()).map((line: string) => {
       const match = line.match(/^(\d{4}-\d{2}-\d{2}T[\d:.]+Z?)\s+(.*)/);
-      if (match) {
-        return { timestamp: match[1], message: match[2] };
-      }
-      return { timestamp: '', message: line };
+      const timestamp = match ? match[1] : new Date().toISOString();
+      const message = match ? match[2] : line;
+      const msgLower = message.toLowerCase();
+      const level = msgLower.includes('error') || msgLower.includes('fatal')
+        ? 'error'
+        : msgLower.includes('warn')
+          ? 'warn'
+          : 'info';
+      return { timestamp, message, level };
     });
   }
   return [];
@@ -126,6 +136,12 @@ export class ObViewServices extends DeesElement {
   @state()
   accessor selectedPlatformType: string = '';
 
+  @state()
+  accessor workspaceOpen: boolean = false;
+
+  @state()
+  accessor pendingTemplate: any = null;
+
   constructor() {
     super();
 
@@ -177,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;
+      }
     `,
   ];
 
@@ -191,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 {
@@ -222,9 +260,20 @@ export class ObViewServices extends DeesElement {
       domain: s.domain || null,
       status: mapStatus(s.status),
     }));
+    const displayStatus = (status: string) => {
+      switch (status) {
+        case 'running': return 'Running';
+        case 'stopped': return 'Stopped';
+        case 'starting': return 'Starting...';
+        case 'stopping': return 'Stopping...';
+        case 'failed': return 'Failed';
+        case 'not-deployed': return 'Not Deployed';
+        default: return status;
+      }
+    };
     const mappedPlatformServices = this.servicesState.platformServices.map((ps) => ({
       name: ps.displayName,
-      status: ps.status === 'running' ? `Running` : ps.status,
+      status: displayStatus(ps.status),
       running: ps.status === 'running',
       type: ps.type,
     }));
@@ -273,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
@@ -327,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>
     `;
   }
@@ -357,12 +484,26 @@ export class ObViewServices extends DeesElement {
   }
 
   private navigateToPlatformDetail(type: string): void {
+    // Reset to list first to force fresh DOM for dees-chart-log
+    this.currentView = 'list';
     this.selectedPlatformType = type;
+
+    // Clear previous stats/logs before fetching new ones
+    appstate.servicesStatePart.setState({
+      ...appstate.servicesStatePart.getState(),
+      currentPlatformServiceStats: null,
+      currentPlatformServiceLogs: [],
+    });
+
     // Fetch stats and logs for this platform service
     const serviceType = type as interfaces.data.TPlatformServiceType;
     appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServiceStatsAction, { serviceType });
     appstate.servicesStatePart.dispatchAction(appstate.fetchPlatformServiceLogsAction, { serviceType });
-    this.currentView = 'platform-detail';
+
+    // Switch to detail view on next microtask (ensures fresh DOM)
+    requestAnimationFrame(() => {
+      this.currentView = 'platform-detail';
+    });
   }
 
   private renderPlatformDetailView(): TemplateResult {
@@ -370,37 +511,60 @@ export class ObViewServices extends DeesElement {
       (ps) => ps.type === this.selectedPlatformType,
     );
     const stats = this.servicesState.currentPlatformServiceStats;
-    const metrics = stats
-      ? {
-          cpu: Math.round(stats.cpuPercent),
-          memory: Math.round(stats.memoryPercent),
-          storage: 0,
-          connections: 0,
-        }
-      : undefined;
+    const metrics = {
+      cpu: stats ? Math.round(stats.cpuPercent) : 0,
+      memory: stats ? Math.round(stats.memoryPercent) : 0,
+      storage: 0,
+      connections: undefined as number | undefined,
+    };
+
+    // Real service info per platform type
+    const serviceInfo: Record<string, { host: string; port: number; version: string; config: Record<string, any> }> = {
+      mongodb: { host: 'onebox-mongodb', port: 27017, version: '4.4', config: { engine: 'WiredTiger', authEnabled: true } },
+      minio: { host: 'onebox-minio', port: 9000, version: 'latest', config: { consolePort: 9001, region: 'us-east-1' } },
+      clickhouse: { host: 'onebox-clickhouse', port: 8123, version: 'latest', config: { nativePort: 9000, httpPort: 8123 } },
+      caddy: { host: 'onebox-caddy', port: 80, version: '2-alpine', config: { httpsPort: 443, adminApi: 2019 } },
+    };
+    const info = platformService
+      ? serviceInfo[platformService.type] || { host: 'unknown', port: 0, version: '', config: {} }
+      : { host: '', port: 0, version: '', config: {} };
+
+    // Map backend status to catalog-compatible status
+    const mapPlatformStatus = (status: string): 'running' | 'stopped' | 'error' => {
+      switch (status) {
+        case 'running': return 'running';
+        case 'failed': return 'error';
+        case 'starting':
+        case 'stopping':
+        case 'stopped':
+        case 'not-deployed':
+        default: return 'stopped';
+      }
+    };
 
     return html`
       <ob-sectionheading>Platform Service</ob-sectionheading>
+      <div class="page-actions" style="justify-content: flex-start;">
+        <button class="deploy-button" style="background: transparent; border: 1px solid var(--ci-shade-2, #27272a); color: inherit;" @click=${() => { this.currentView = 'list'; }}>
+          &larr; Back to Services
+        </button>
+      </div>
       <sz-platform-service-detail-view
         .service=${platformService
           ? {
               id: platformService.type,
               name: platformService.displayName,
               type: platformService.type,
-              status: platformService.status === 'running'
-                ? 'running'
-                : platformService.status === 'failed'
-                  ? 'error'
-                  : 'stopped',
-              version: '',
-              host: 'localhost',
-              port: 0,
-              config: {},
+              status: mapPlatformStatus(platformService.status),
+              version: info.version,
+              host: info.host,
+              port: info.port,
+              config: info.config,
               metrics,
             }
           : null}
         .logs=${this.servicesState.currentPlatformServiceLogs.map((log) => ({
-          timestamp: new Date(log.timestamp).toLocaleString(),
+          timestamp: new Date(log.timestamp).toISOString(),
           level: log.level,
           message: log.message,
         }))}

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']);
+  }
+}

ts_web/plugins.ts

@@ -5,9 +5,13 @@ import * as deesCatalog from '@design.estate/dees-catalog';
 // @serve.zone scope — side-effect import registers all sz-* custom elements
 import '@serve.zone/catalog';
 
+// TypedSocket for real-time server push (logs, events)
+import * as typedsocket from '@api.global/typedsocket';
+
 export {
   deesElement,
   deesCatalog,
+  typedsocket,
 };
 
 // domtools gives us TypedRequest, smartstate, smartrouter, and other utilities