v2.0.1

changelog.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 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
 

package.json

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

readme.hints.md

@@ -21,7 +21,7 @@
 | 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-onebox-view, sz-registry-external-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

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '1.1.0',
+  version: '2.0.1',
   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-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-registry-advertisement.ts

@@ -10,18 +10,18 @@ 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>
   `;
 
@@ -211,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>
 
@@ -240,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-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 {
@@ -123,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`
@@ -455,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()}>
@@ -590,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>
@@ -709,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');
+    }
+  }
 }