v2.1.0

changelog.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 2026-02-20 - 2.1.0 - feat(catalog)
+add comprehensive README documenting package purpose, components, usage, development workflow, and legal information
+
+- Adds new readme.md at repository root for @serve.zone/catalog describing 30+ UI components, tags, and example usage.
+- Includes installation instructions, import examples, demo app shell info, development scripts (pnpm install/watch/build/test) and project structure overview.
+- Documents TypeScript interfaces exported, component architecture patterns, and license/trademark/company contact details.
+
+## 2026-02-20 - 2.0.1 - fix(catalog)
+no changes detected
+
+- No files changed in the diff
+- package.json version remains 2.0.0
+
+## 2026-02-20 - 2.0.0 - BREAKING CHANGE(elements)
+rename Onebox registry component to Registry Advertisement (sz-registry-onebox-view → sz-registry-advertisement) and update exports, demos and docs
+
+- Replaced ts_web/elements/sz-registry-onebox-view.ts with ts_web/elements/sz-registry-advertisement.ts
+- Updated export in ts_web/elements/index.ts to export the new component
+- Updated demo (ts_web/elements/sz-demo-view-registries.ts) to use the new tag and updated headings/labels
+- Updated readme.hints.md to reference sz-registry-advertisement instead of sz-registry-onebox-view
+- Breaking change: custom element tag name changed; consumers must update any usages/imports
+
+## 2026-02-20 - 1.1.0 - feat(elements)
+add demoGroups metadata, filter demo view wrappers in wcctools, and update demo payloads
+
+- Add public static demoGroups to many web components to enable sidebar categorization in the wcctools dashboard (groups like Dashboard, Dashboard Grids, Network, Services, Platform, Auth & Settings).
+- Filter out demo-view wrapper components from the wcctools elements list (html/index.ts) so full-page demo orchestration wrappers are not shown as regular elements.
+- Adjust demo/example payload shapes for sz-status-grid-network and sz-status-grid-services (renamed and flattened traffic/status and resource usage properties for the demo fixtures).
+- Add readme.hints.md with project structure, web component patterns, demo groups and build/watch instructions.
+
 ## 2026-02-20 - 1.0.1 - fix(deps)
 bump dependencies and devDependencies, update watch script, add npmextra preset, and remove Playwright artifacts
 

html/index.ts

@@ -13,6 +13,7 @@ deesWccTools.setupWccTools({
       name: 'Elements',
       type: 'elements',
       items: elements,
+      filter: (name) => !name.toLowerCase().includes('demoview'),
       sort: ([a], [b]) => a.localeCompare(b),
     },
   ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "1.0.1",
+  "version": "2.1.0",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",

readme.hints.md

@@ -0,0 +1,28 @@
+# Project Hints
+
+## Project Structure
+- `html/index.ts` - WccTools setup with sections for Pages and Elements
+- `ts_web/elements/` - All web components (27 elements + 6 demo-view wrappers)
+- `ts_web/elements/index.ts` - Barrel export for all element components
+- `ts_web/pages/` - Page components
+
+## Web Components Pattern
+- Each element extends `DeesElement` from `@design.estate/dees-element`
+- Uses TC39 standard decorators (`@customElement`, `@property`, `accessor` keyword)
+- Each element has `public static demo` for wcctools dashboard preview
+- Each element has `public static demoGroups` for sidebar categorization
+- Demo views (`sz-demo-view-*`) are full-page orchestration wrappers, filtered out from the wcctools dashboard
+
+## Demo Groups
+| Group | Elements |
+|-------|----------|
+| Dashboard | sz-dashboard-view, sz-stat-card, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
+| Dashboard Grids | sz-status-grid-cluster, sz-status-grid-services, sz-status-grid-network, sz-status-grid-infra |
+| Platform | sz-platform-services-card, sz-platform-service-detail-view |
+| Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view |
+| Services | sz-services-list-view, sz-services-backups-view, sz-service-detail-view, sz-service-create-view |
+| Auth & Settings | sz-login-view, sz-tokens-view, sz-settings-view, sz-registry-advertisement, sz-registry-external-view |
+
+## Build
+- `pnpm run build` - tsbuild tsfolders + tsbundle element --production
+- `pnpm run watch` - starts wcctools dev server

readme.md

@@ -0,0 +1,230 @@
+# @serve.zone/catalog
+
+The complete UI component library for **serve.zone** — a full-featured admin and management interface for onebox server management, built as a collection of reusable web components.
+
+## Install
+
+```bash
+pnpm install @serve.zone/catalog
+```
+
+## Issue Reporting and Security
+
+For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
+
+## 🚀 What It Does
+
+`@serve.zone/catalog` provides **30+ production-ready web components** covering every aspect of server management:
+
+- 📊 **Dashboard** — Real-time cluster overview, resource usage, traffic metrics, quick actions
+- 🐳 **Services** — Docker container management, deployment, logs, live stats, backups, and an integrated IDE workspace
+- 🌐 **Network** — Reverse proxy configuration, DNS record management, domain & SSL certificate monitoring
+- 📦 **Registries** — Container registry management (onebox + external registries like Docker Hub, GHCR, ECR)
+- 🔑 **Auth** — Login view, API token management (global + CI tokens)
+- ⚙️ **Settings** — Appearance, Cloudflare integration, SSL/TLS config, network settings, account management
+- 🏗️ **Platform Services** — MongoDB, MinIO, ClickHouse, Redis, Caddy monitoring and control
+
+Every component supports **light and dark themes** out of the box and communicates via standard `CustomEvent` dispatching.
+
+## 📦 Usage
+
+### Import
+
+```typescript
+// Import everything
+import * as szCatalog from '@serve.zone/catalog';
+
+// Or import specific components
+import { SzDashboardView, SzLoginView, SzServiceDetailView } from '@serve.zone/catalog';
+```
+
+Components auto-register as custom elements when imported. Use them directly in your HTML:
+
+```html
+<sz-dashboard-view .data="${dashboardData}"></sz-dashboard-view>
+<sz-login-view @login="${handleLogin}"></sz-login-view>
+<sz-service-detail-view .service="${serviceData}" .logs="${logEntries}"></sz-service-detail-view>
+```
+
+### Full Application Shell
+
+For a complete app experience, use the demo app shell which wires up sidebar navigation, app bar menus, and all views via `dees-appui`:
+
+```typescript
+import '@serve.zone/catalog';
+// Then use <sz-demo-app-shell> for a fully configured application
+```
+
+## 🧩 Component Reference
+
+### Dashboard
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzDashboardView` | `<sz-dashboard-view>` | Main dashboard orchestrating all grid sections — cluster, services, network, infrastructure |
+| `SzStatCard` | `<sz-stat-card>` | Single statistic card with label, value, icon, and color variant |
+| `SzResourceUsageCard` | `<sz-resource-usage-card>` | CPU/memory progress bars, network I/O, top memory consumers |
+| `SzTrafficCard` | `<sz-traffic-card>` | HTTP traffic metrics — requests, errors, response time, status distribution |
+| `SzQuickActionsCard` | `<sz-quick-actions-card>` | Configurable action button grid |
+
+### Dashboard Grids
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzStatusGridCluster` | `<sz-status-grid-cluster>` | 4-column stat card grid — total/running/stopped services, Docker status |
+| `SzStatusGridServices` | `<sz-status-grid-services>` | Resource usage + platform services side by side |
+| `SzStatusGridNetwork` | `<sz-status-grid-network>` | Traffic, reverse proxy, and certificates in a responsive grid |
+| `SzStatusGridInfra` | `<sz-status-grid-infra>` | DNS/SSL status + quick actions |
+
+### Services
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzServicesListView` | `<sz-services-list-view>` | Table of deployed services with status badges and action buttons |
+| `SzServiceDetailView` | `<sz-service-detail-view>` | Full service detail page — info, logs, live stats, actions, backups, and integrated workspace/IDE mode |
+| `SzServiceCreateView` | `<sz-service-create-view>` | Service deployment form — image, ports, env vars, volumes, resource limits |
+| `SzServicesBackupsView` | `<sz-services-backups-view>` | Backup schedule and backup history management |
+
+### Platform Services
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzPlatformServicesCard` | `<sz-platform-services-card>` | Lists infrastructure services (MongoDB, MinIO, etc.) with status indicators |
+| `SzPlatformServiceDetailView` | `<sz-platform-service-detail-view>` | Detailed platform service view — connection info, config, metrics, logs |
+
+### Network
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzNetworkProxyView` | `<sz-network-proxy-view>` | Reverse proxy management — traffic targets table and access log viewer |
+| `SzNetworkDnsView` | `<sz-network-dns-view>` | DNS record management with Cloudflare sync |
+| `SzNetworkDomainsView` | `<sz-network-domains-view>` | Domain list with certificate status and provider info |
+| `SzDomainDetailView` | `<sz-domain-detail-view>` | Domain detail — SSL certificate info, proxy routes, DNS records |
+| `SzReverseProxyCard` | `<sz-reverse-proxy-card>` | Compact proxy status card (HTTP/HTTPS ports, route count) |
+| `SzDnsSslCard` | `<sz-dns-ssl-card>` | Cloudflare DNS and ACME config status |
+| `SzCertificatesCard` | `<sz-certificates-card>` | Certificate status counts — valid, expiring, expired |
+
+### Registries
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzRegistryAdvertisement` | `<sz-registry-advertisement>` | Onebox registry info card with docker quick-start commands |
+| `SzRegistryExternalView` | `<sz-registry-external-view>` | External registry management (Docker Hub, GHCR, GCR, ECR) |
+
+### Auth & Settings
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzLoginView` | `<sz-login-view>` | Login page with serve.zone branding, credentials form, error display |
+| `SzTokensView` | `<sz-tokens-view>` | API token management — global and CI tokens with copy/regenerate/delete |
+| `SzSettingsView` | `<sz-settings-view>` | Full settings panel — appearance, Cloudflare, SSL/TLS, network, account |
+
+## 🏗️ Architecture
+
+### Component Pattern
+
+All components follow a consistent pattern:
+
+```typescript
+import { DeesElement, customElement, html, css, cssManager, property } from '@design.estate/dees-element';
+
+@customElement('sz-my-component')
+export class SzMyComponent extends DeesElement {
+  // TC39 standard decorators with accessor keyword
+  @property({ type: String })
+  public accessor label: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      /* Light/dark theme support */
+      :host { color: ${cssManager.bdTheme('#18181b', '#fafafa')}; }
+    `,
+  ];
+
+  // Events via CustomEvent (bubbles + composed for shadow DOM)
+  private handleClick() {
+    this.dispatchEvent(new CustomEvent('action', {
+      detail: { id: this.id },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+}
+```
+
+### Project Structure
+
+```
+@serve.zone/catalog/
+├── html/                    # WccTools dev server entry point
+│   ├── index.html           # HTML shell
+│   └── index.ts             # WccTools config (pages + elements sections)
+├── ts_web/
+│   ├── index.ts             # Barrel export
+│   ├── elements/            # All web components
+│   │   ├── index.ts         # Element barrel export
+│   │   ├── sz-*.ts          # Individual components
+│   │   └── sz-demo-view-*.ts  # Demo orchestration wrappers
+│   └── pages/               # Page-level components
+│       ├── sz-demo-app-shell.ts  # Full app shell (dees-appui)
+│       └── ...
+└── dist_ts_web/             # Compiled output (npm entry point)
+```
+
+### TypeScript Interfaces
+
+The library exports comprehensive TypeScript interfaces for all data structures:
+
+```typescript
+// Dashboard
+import type { IDashboardData, IResourceUsage, ITrafficData, IClusterStats } from '@serve.zone/catalog';
+
+// Services
+import type { IServiceDetail, IServiceStats, ILogEntry, IServiceBackup } from '@serve.zone/catalog';
+
+// Network
+import type { IDomainDetail, ICertificateDetail, IDnsRecord, ITrafficTarget } from '@serve.zone/catalog';
+
+// Settings & Auth
+import type { ISettings, IToken, IExternalRegistry } from '@serve.zone/catalog';
+```
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server (wcctools dashboard with live reload)
+pnpm run watch
+
+# Production build
+pnpm run build
+
+# Run tests
+pnpm test
+```
+
+The **wcctools dev server** provides an interactive dashboard where every component is rendered with demo data. Components are organized by group (Dashboard, Services, Network, etc.) in the sidebar. Demo view wrappers (`sz-demo-view-*`) are filtered out from the element list — they serve as full-page orchestration demos accessible through the Pages section.
+
+## License and Legal Information
+
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+
+**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
+
+### Trademarks
+
+This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.
+
+Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.
+
+### Company Information
+
+Task Venture Capital GmbH
+Registered at District Court Bremen HRB 35230 HB, Germany
+
+For any legal inquiries or further information, please contact us via email at hello@task.vc.
+
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '1.0.1',
+  version: '2.1.0',
   description: 'UI component catalog for serve.zone'
 }

ts_web/elements/index.ts

@@ -21,7 +21,7 @@ export * from './sz-network-dns-view.js';
 export * from './sz-network-domains-view.js';
 
 // Registry Views
-export * from './sz-registry-onebox-view.js';
+export * from './sz-registry-advertisement.js';
 export * from './sz-registry-external-view.js';
 
 // Services Views

ts_web/elements/sz-certificates-card.ts

@@ -24,6 +24,8 @@ export class SzCertificatesCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Number })
   public accessor validCount: number = 0;
 

ts_web/elements/sz-dashboard-view.ts

@@ -103,6 +103,8 @@ export class SzDashboardView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: Object })
   public accessor data: IDashboardData = {
     cluster: {

ts_web/elements/sz-demo-view-registries.ts

@@ -29,7 +29,7 @@ export class SzDemoViewRegistries extends DeesElement {
     // Set up content tabs
     this.appui.setContentTabs([
       {
-        key: 'Onebox Registry',
+        key: 'Registry Advertisement',
         action: () => {
           this.currentTab = 'onebox';
           this.updateSecondaryMenu();
@@ -52,7 +52,7 @@ export class SzDemoViewRegistries extends DeesElement {
 
     if (this.currentTab === 'onebox') {
       this.appui.setSecondaryMenu({
-        heading: 'Onebox Registry',
+        heading: 'Registry Advertisement',
         groups: [
           {
             name: 'Actions',
@@ -181,7 +181,7 @@ export class SzDemoViewRegistries extends DeesElement {
   public render(): TemplateResult {
     return html`
       ${this.currentTab === 'onebox' ? html`
-        <sz-registry-onebox-view
+        <sz-registry-advertisement
           .images=${this.demoOneboxImages}
           .stats=${{
             totalImages: 4,
@@ -191,7 +191,7 @@ export class SzDemoViewRegistries extends DeesElement {
           @view-image=${(e: CustomEvent) => console.log('View image:', e.detail)}
           @delete-image=${(e: CustomEvent) => console.log('Delete image:', e.detail)}
           @delete-tag=${(e: CustomEvent) => console.log('Delete tag:', e.detail)}
-        ></sz-registry-onebox-view>
+        ></sz-registry-advertisement>
       ` : html`
         <sz-registry-external-view
           .registries=${this.demoExternalRegistries}

ts_web/elements/sz-demo-view-services.ts

@@ -342,6 +342,7 @@ export class SzDemoViewServices extends DeesElement {
         @start=${() => console.log('Start')}
         @stop=${() => console.log('Stop')}
         @restart=${() => console.log('Restart')}
+        @request-workspace=${(e: CustomEvent) => console.log('Workspace requested for:', e.detail.service.name)}
       ></sz-service-detail-view>
     `;
   }

ts_web/elements/sz-dns-ssl-card.ts

@@ -25,6 +25,8 @@ export class SzDnsSslCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Boolean })
   public accessor dnsConfigured: boolean = false;
 

ts_web/elements/sz-domain-detail-view.ts

@@ -78,6 +78,8 @@ export class SzDomainDetailView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Object })
   public accessor domain: IDomainDetail | null = null;
 

ts_web/elements/sz-login-view.ts

@@ -22,6 +22,8 @@ export class SzLoginView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: Boolean })
   public accessor loading: boolean = false;
 

ts_web/elements/sz-network-dns-view.ts

@@ -37,6 +37,8 @@ export class SzNetworkDnsView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Array })
   public accessor records: IDnsRecord[] = [];
 

ts_web/elements/sz-network-domains-view.ts

@@ -39,6 +39,8 @@ export class SzNetworkDomainsView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Array })
   public accessor domains: IDomainRecord[] = [];
 

ts_web/elements/sz-network-proxy-view.ts

@@ -58,6 +58,8 @@ export class SzNetworkProxyView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: String })
   public accessor proxyStatus: 'running' | 'stopped' = 'stopped';
 

ts_web/elements/sz-platform-service-detail-view.ts

@@ -70,6 +70,8 @@ export class SzPlatformServiceDetailView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Platform'];
+
   @property({ type: Object })
   public accessor service: IPlatformServiceDetail | null = null;
 

ts_web/elements/sz-platform-services-card.ts

@@ -36,6 +36,8 @@ export class SzPlatformServicesCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Platform'];
+
   @property({ type: Array })
   public accessor services: IPlatformService[] = [];
 

ts_web/elements/sz-quick-actions-card.ts

@@ -36,6 +36,8 @@ export class SzQuickActionsCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: Array })
   public accessor actions: IQuickAction[] = [];
 

ts_web/elements/sz-registry-advertisement.ts

@@ -10,21 +10,23 @@ import {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'sz-registry-onebox-view': SzRegistryOneboxView;
+    'sz-registry-advertisement': SzRegistryAdvertisement;
   }
 }
 
-@customElement('sz-registry-onebox-view')
-export class SzRegistryOneboxView extends DeesElement {
+@customElement('sz-registry-advertisement')
+export class SzRegistryAdvertisement extends DeesElement {
   public static demo = () => html`
     <div style="padding: 24px; max-width: 800px;">
-      <sz-registry-onebox-view
+      <sz-registry-advertisement
         status="running"
         registryUrl="localhost:3000/v2"
-      ></sz-registry-onebox-view>
+      ></sz-registry-advertisement>
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: String })
   public accessor status: 'running' | 'stopped' = 'stopped';
 
@@ -209,10 +211,10 @@ export class SzRegistryOneboxView extends DeesElement {
           </div>
           <div class="header-info">
             <div class="header-title">
-              Onebox Registry (Built-in)
+              Registry Advertisement
               <span class="default-badge">Default</span>
             </div>
-            <div class="header-subtitle">Built-in container registry for your services</div>
+            <div class="header-subtitle">Container registry for your services</div>
           </div>
         </div>
 
@@ -238,10 +240,10 @@ export class SzRegistryOneboxView extends DeesElement {
 
           <div class="quick-start">
             <div class="quick-start-title">Quick Start</div>
-            <div class="quick-start-desc">To push images to the Onebox registry, use a CI or Global token:</div>
+            <div class="quick-start-desc">To push images to the registry, use a CI or Global token:</div>
             <div class="code-block">
               <div class="code-line code-comment"># Login to the registry</div>
-              <div class="code-line code-command">docker login ${this.registryUrl.split('/')[0]} -u onebox -p YOUR_TOKEN</div>
+              <div class="code-line code-command">docker login ${this.registryUrl.split('/')[0]} -u registry -p YOUR_TOKEN</div>
               <div class="code-line code-comment"># Tag and push your image</div>
               <div class="code-line code-command">docker tag myapp ${this.registryUrl.split('/')[0]}/myservice:latest</div>
               <div class="code-line code-command">docker push ${this.registryUrl.split('/')[0]}/myservice:latest</div>

ts_web/elements/sz-registry-external-view.ts

@@ -35,6 +35,8 @@ export class SzRegistryExternalView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: Array })
   public accessor registries: IExternalRegistry[] = [];
 

ts_web/elements/sz-resource-usage-card.ts

@@ -44,6 +44,8 @@ export class SzResourceUsageCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: Object })
   public accessor data: IResourceUsage = {
     cpu: 0,

ts_web/elements/sz-reverse-proxy-card.ts

@@ -28,6 +28,8 @@ export class SzReverseProxyCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: String })
   public accessor httpPort: string = '80';
 

ts_web/elements/sz-service-create-view.ts

@@ -63,6 +63,8 @@ export class SzServiceCreateView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Services'];
+
   @property({ type: Array })
   public accessor registries: IRegistry[] = [];
 

ts_web/elements/sz-service-detail-view.ts

@@ -5,9 +5,12 @@ import {
   css,
   cssManager,
   property,
+  state,
   type TemplateResult,
 } from '@design.estate/dees-element';
 
+import type { IExecutionEnvironment } from '@design.estate/dees-catalog';
+
 import './sz-stat-card.js';
 
 declare global {
@@ -88,6 +91,8 @@ export class SzServiceDetailView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Services'];
+
   @property({ type: Object })
   public accessor service: IServiceDetail = {
     name: '',
@@ -121,6 +126,15 @@ export class SzServiceDetailView extends DeesElement {
   @property({ type: Boolean })
   public accessor streaming: boolean = false;
 
+  @property({ type: Object })
+  public accessor workspaceEnvironment: IExecutionEnvironment | null = null;
+
+  @property({ type: String })
+  public accessor workspacePath: string = '/';
+
+  @state()
+  private accessor currentView: 'details' | 'workspace' = 'details';
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -453,10 +467,102 @@ export class SzServiceDetailView extends DeesElement {
         font-size: 12px;
         font-weight: 500;
       }
+
+      :host(.workspace-mode) {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .workspace-wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .workspace-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        flex-shrink: 0;
+      }
+
+      .workspace-back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        cursor: pointer;
+        transition: color 200ms ease;
+      }
+
+      .workspace-back-link:hover {
+        color: ${cssManager.bdTheme('#1d4ed8', '#93c5fd')};
+      }
+
+      .workspace-service-name {
+        font-size: 14px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .workspace-status-badge {
+        display: inline-flex;
+        align-items: center;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      }
+
+      .workspace-status-badge.running {
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+      }
+
+      .workspace-status-badge.stopped {
+        background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
+      }
+
+      .workspace-container {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+      }
     `,
   ];
 
   public render(): TemplateResult {
+    if (this.currentView === 'workspace') {
+      return this.renderWorkspaceView();
+    }
+    return this.renderDetailsView();
+  }
+
+  private renderWorkspaceView(): TemplateResult {
+    return html`
+      <div class="workspace-wrapper">
+        <div class="workspace-header">
+          <div class="workspace-back-link" @click=${() => this.handleCloseWorkspace()}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+            Back to Details
+          </div>
+          <span class="workspace-service-name">${this.service.name}</span>
+          <span class="workspace-status-badge ${this.service.status}"></span>
+        </div>
+        <div class="workspace-container">
+          <dees-workspace .executionEnvironment=${this.workspaceEnvironment}></dees-workspace>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderDetailsView(): TemplateResult {
     return html`
       <div class="header">
         <div class="back-link" @click=${() => this.handleBack()}>
@@ -588,6 +694,13 @@ export class SzServiceDetailView extends DeesElement {
                   : html`<button class="action-button" @click=${() => this.handleAction('start')}>Start Service</button>`
                 }
                 <button class="action-button" @click=${() => this.handleAction('restart')}>Restart Service</button>
+                <button class="action-button" @click=${() => this.handleOpenWorkspace()}>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; vertical-align: middle; margin-right: 4px;">
+                    <polyline points="4 17 10 11 4 5"></polyline>
+                    <line x1="12" y1="19" x2="20" y2="19"></line>
+                  </svg>
+                  Open Workspace
+                </button>
                 <button class="action-button danger" @click=${() => this.handleAction('delete')}>Delete Service</button>
               </div>
             </div>
@@ -707,4 +820,30 @@ export class SzServiceDetailView extends DeesElement {
   private handleDeleteBackup(backup: IServiceBackup) {
     this.dispatchEvent(new CustomEvent('delete-backup', { detail: backup, bubbles: true, composed: true }));
   }
+
+  private handleOpenWorkspace() {
+    if (this.workspaceEnvironment) {
+      this.currentView = 'workspace';
+      this.classList.add('workspace-mode');
+    } else {
+      this.dispatchEvent(new CustomEvent('request-workspace', {
+        detail: { service: this.service },
+        bubbles: true,
+        composed: true,
+      }));
+    }
+  }
+
+  private handleCloseWorkspace() {
+    this.currentView = 'details';
+    this.classList.remove('workspace-mode');
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('workspaceEnvironment') && this.workspaceEnvironment && this.currentView === 'details') {
+      this.currentView = 'workspace';
+      this.classList.add('workspace-mode');
+    }
+  }
 }

ts_web/elements/sz-services-backups-view.ts

@@ -50,6 +50,8 @@ export class SzServicesBackupsView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Services'];
+
   @property({ type: Array })
   public accessor schedules: IBackupSchedule[] = [];
 

ts_web/elements/sz-services-list-view.ts

@@ -36,6 +36,8 @@ export class SzServicesListView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Services'];
+
   @property({ type: Array })
   public accessor services: IService[] = [];
 

ts_web/elements/sz-settings-view.ts

@@ -47,6 +47,8 @@ export class SzSettingsView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: Object })
   public accessor settings: ISettings = {
     darkMode: false,

ts_web/elements/sz-stat-card.ts

@@ -53,6 +53,8 @@ export class SzStatCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: String })
   public accessor label: string = '';
 

ts_web/elements/sz-status-grid-cluster.ts

@@ -38,6 +38,8 @@ export class SzStatusGridCluster extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard Grids'];
+
   @property({ type: Object })
   public accessor stats: IClusterStats = {
     totalServices: 0,

ts_web/elements/sz-status-grid-infra.ts

@@ -36,6 +36,8 @@ export class SzStatusGridInfra extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard Grids'];
+
   @property({ type: Boolean })
   public accessor dnsConfigured: boolean = false;
 

ts_web/elements/sz-status-grid-network.ts

@@ -40,16 +40,15 @@ export class SzStatusGridNetwork extends DeesElement {
     <div style="padding: 24px; max-width: 1400px;">
       <sz-status-grid-network
         .traffic=${{
-          totalRequests: 125420,
-          requestsPerMinute: 847,
-          errorRate: 0.12,
-          avgResponseTime: 45,
-          statusDistribution: {
-            '2xx': 95.2,
-            '3xx': 2.1,
-            '4xx': 2.3,
-            '5xx': 0.4,
-          },
+          requests: 125420,
+          errors: 150,
+          errorPercent: 0.12,
+          avgResponse: 45,
+          reqPerMin: 847,
+          status2xx: 95.2,
+          status3xx: 2.1,
+          status4xx: 2.3,
+          status5xx: 0.4,
         }}
         .proxy=${{
           httpPort: '80',
@@ -67,6 +66,8 @@ export class SzStatusGridNetwork extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard Grids'];
+
   @property({ type: Object })
   public accessor traffic: ITrafficData = {
     requests: 0,

ts_web/elements/sz-status-grid-services.ts

@@ -26,25 +26,29 @@ export class SzStatusGridServices extends DeesElement {
     <div style="padding: 24px; max-width: 1200px;">
       <sz-status-grid-services
         .resourceUsage=${{
-          cpu: { percentage: 45, label: 'CPU Usage' },
-          memory: { percentage: 62, label: 'Memory', used: '4.96 GB', total: '8 GB' },
-          network: { percentage: 23, label: 'Network I/O', rate: '1.2 MB/s' },
+          cpu: 45,
+          memoryUsed: '4.96 GB',
+          memoryTotal: '8 GB',
+          networkIn: '1.2 MB/s',
+          networkOut: '0.8 MB/s',
           topConsumers: [
-            { name: 'api-service', cpu: 25, memory: 512 },
-            { name: 'web-frontend', cpu: 15, memory: 256 },
-            { name: 'worker', cpu: 5, memory: 128 },
+            { name: 'api-service', memory: '512 MB' },
+            { name: 'web-frontend', memory: '256 MB' },
+            { name: 'worker', memory: '128 MB' },
           ],
         }}
         .platformServices=${[
-          { name: 'MongoDB', status: 'running' },
-          { name: 'S3 Storage', status: 'running' },
-          { name: 'ClickHouse', status: 'stopped' },
-          { name: 'Redis Cache', status: 'running' },
+          { name: 'MongoDB', status: '1 DB', running: true },
+          { name: 'S3 Storage', status: '1 bucket', running: true },
+          { name: 'ClickHouse', status: 'Stopped', running: false },
+          { name: 'Redis Cache', status: 'Running', running: true },
         ]}
       ></sz-status-grid-services>
     </div>
   `;
 
+  public static demoGroups = ['Dashboard Grids'];
+
   @property({ type: Object })
   public accessor resourceUsage: IResourceUsage = {
     cpu: 0,

ts_web/elements/sz-tokens-view.ts

@@ -40,6 +40,8 @@ export class SzTokensView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: Array })
   public accessor globalTokens: IToken[] = [];
 

ts_web/elements/sz-traffic-card.ts

@@ -46,6 +46,8 @@ export class SzTrafficCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: Object })
   public accessor data: ITrafficData = {
     requests: 0,