v2.0.0

changelog.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 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.0.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

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '1.0.1',
+  version: '2.0.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')
+@customElement('sz-registry-advertisement')
-export class SzRegistryOneboxView extends DeesElement {
+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,
+          requests: 125420,
-          requestsPerMinute: 847,
+          errors: 150,
-          errorRate: 0.12,
+          errorPercent: 0.12,
-          avgResponseTime: 45,
+          avgResponse: 45,
-          statusDistribution: {
+          reqPerMin: 847,
-            '2xx': 95.2,
+          status2xx: 95.2,
-            '3xx': 2.1,
+          status3xx: 2.1,
-            '4xx': 2.3,
+          status4xx: 2.3,
-            '5xx': 0.4,
+          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' },
+          cpu: 45,
-          memory: { percentage: 62, label: 'Memory', used: '4.96 GB', total: '8 GB' },
+          memoryUsed: '4.96 GB',
-          network: { percentage: 23, label: 'Network I/O', rate: '1.2 MB/s' },
+          memoryTotal: '8 GB',
+          networkIn: '1.2 MB/s',
+          networkOut: '0.8 MB/s',
           topConsumers: [
-            { name: 'api-service', cpu: 25, memory: 512 },
+            { name: 'api-service', memory: '512 MB' },
-            { name: 'web-frontend', cpu: 15, memory: 256 },
+            { name: 'web-frontend', memory: '256 MB' },
-            { name: 'worker', cpu: 5, memory: 128 },
+            { name: 'worker', memory: '128 MB' },
           ],
         }}
         .platformServices=${[
-          { name: 'MongoDB', status: 'running' },
+          { name: 'MongoDB', status: '1 DB', running: true },
-          { name: 'S3 Storage', status: 'running' },
+          { name: 'S3 Storage', status: '1 bucket', running: true },
-          { name: 'ClickHouse', status: 'stopped' },
+          { name: 'ClickHouse', status: 'Stopped', running: false },
-          { name: 'Redis Cache', status: 'running' },
+          { 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,