v2.11.0

feat(route-ui): add VPN details and conditional card actions to route cards
v2.10.0
2026-04-02 21:16:01 +00:00 · 2026-04-02 21:16:01 +00:00 · 2026-04-02 18:48:22 +00:00 · 2026-04-02 18:48:22 +00:00
7 changed files with 223 additions and 7 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,20 @@
 # Changelog

+## 2026-04-02 - 2.11.0 - feat(route-ui)
+add VPN details and conditional card actions to route cards
+
+- Extend route card data and rendering to display VPN access mode and allowed client tags.
+- Add optional Edit and Delete action buttons that emit route-edit and route-delete events.
+- Allow the route list view to control action visibility per route via a showActionsFilter callback.
+- Include VPN as a visible route feature indicator in the card summary.
+
+## 2026-04-02 - 2.10.0 - feat(docs)
+document newly available catalog components and updated build configuration details
+
+- Update component counts and add documentation for App Store, Routes, MTA/Email, and Configuration views
+- Expand the README with new component tables and exported TypeScript types
+- Refresh build notes to reference .smartconfig.json and the renamed config file
+
 ## 2026-04-02 - 2.9.1 - fix(build)
 migrate build configuration to .smartconfig and update toolchain dependencies

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@serve.zone/catalog",
-  "version": "2.9.1",
+  "version": "2.11.0",
  "private": false,
  "description": "UI component catalog for serve.zone",
  "main": "dist_ts_web/index.js",
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -2,7 +2,7 @@

 ## 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/` - All web components (34 elements + 9 demo-view wrappers)
 - `ts_web/elements/index.ts` - Barrel export for all element components
 - `ts_web/pages/` - Page components

@@ -20,9 +20,14 @@
 | 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 |
+| Routes | sz-route-list-view, sz-route-card |
 | Services | sz-services-list-view, sz-services-backups-view, sz-service-detail-view, sz-service-create-view |
+| App Store | sz-app-store-view |
+| MTA / Email | sz-mta-list-view, sz-mta-detail-view |
+| Configuration | sz-config-overview, sz-config-section |
 | 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 build` - tsbuild tsfolders + tsbundle (reads from .smartconfig.json)
 - `pnpm run watch` - starts wcctools dev server
+- Config file: `.smartconfig.json` (renamed from npmextra.json)
--- a/readme.md
+++ b/readme.md
@@ -14,15 +14,19 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community

 ## 🚀 What It Does

-`@serve.zone/catalog` provides **30+ production-ready web components** covering every aspect of server management:
+`@serve.zone/catalog` provides **34 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
+- 🛒 **App Store** — Browse and deploy pre-configured application templates (WordPress, Gitea, etc.)
 - 🌐 **Network** — Reverse proxy configuration, DNS record management, domain & SSL certificate monitoring
+- 🔀 **Routes** — SmartProxy route configuration, match criteria, TLS modes, security profiles, forwarding targets
+- 📧 **MTA / Email** — Inbound and outbound email management, SMTP transaction logs, authentication results
 - 📦 **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
+- 📋 **Configuration** — Read-only overview of the running server configuration with collapsible sections

 Every component supports **light and dark themes** out of the box and communicates via standard `CustomEvent` dispatching.

@@ -85,6 +89,12 @@ import '@serve.zone/catalog';
 | `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 |

+### App Store
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzAppStoreView` | `<sz-app-store-view>` | App marketplace for deploying pre-configured templates (WordPress, Gitea, etc.) with category filtering |
+
 ### Platform Services

 | Component | Tag | Description |
@@ -104,6 +114,20 @@ import '@serve.zone/catalog';
 | `SzDnsSslCard` | `<sz-dns-ssl-card>` | Cloudflare DNS and ACME config status |
 | `SzCertificatesCard` | `<sz-certificates-card>` | Certificate status counts — valid, expiring, expired |

+### Routes
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzRouteListView` | `<sz-route-list-view>` | Route configuration list with type filtering (HTTPS, email, DNS, etc.) |
+| `SzRouteCard` | `<sz-route-card>` | Single route card — match criteria, action type, TLS mode, targets, security profile |
+
+### MTA / Email
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzMtaListView` | `<sz-mta-list-view>` | Email management — inbound/outbound messages with status badges and filtering |
+| `SzMtaDetailView` | `<sz-mta-detail-view>` | Email detail — SMTP transaction log, TLS info, SPF/DKIM/DMARC results, headers, body |
+
 ### Registries

 | Component | Tag | Description |
@@ -119,6 +143,13 @@ import '@serve.zone/catalog';
 | `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 |

+### Configuration
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzConfigOverview` | `<sz-config-overview>` | Top-level configuration overview with informational banner |
+| `SzConfigSection` | `<sz-config-section>` | Collapsible config section — icon, enabled/disabled badge, key-value fields, action buttons |
+
 ## 🏗️ Architecture

 ### Component Pattern
@@ -186,8 +217,20 @@ import type { IServiceDetail, IServiceStats, ILogEntry, IServiceBackup } from '@
 // Network
 import type { IDomainDetail, ICertificateDetail, IDnsRecord, ITrafficTarget } from '@serve.zone/catalog';

+// Routes
+import type { IRouteConfig, IRouteMatch, IRouteAction, IRouteTls, IRouteSecurity } from '@serve.zone/catalog';
+
+// MTA / Email
+import type { IEmail, IEmailDetail, ISmtpLogEntry, IConnectionInfo, IAuthenticationResults } from '@serve.zone/catalog';
+
+// Configuration
+import type { IConfigField, IConfigSectionAction } from '@serve.zone/catalog';
+
 // Settings & Auth
 import type { ISettings, IToken, IExternalRegistry } from '@serve.zone/catalog';
+
+// App Store
+import type { IAppTemplate } from '@serve.zone/catalog';
 ```

 ## 🛠️ Development
@@ -210,7 +253,7 @@ The **wcctools dev server** provides an interactive dashboard where every compon

 ## 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.
+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.

@@ -222,7 +265,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G

 ### Company Information

-Task Venture Capital GmbH
+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.
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/catalog',
-  version: '2.9.1',
+  version: '2.11.0',
  description: 'UI component catalog for serve.zone'
 }
--- a/ts_web/elements/sz-route-card.ts
+++ b/ts_web/elements/sz-route-card.ts
@@ -63,6 +63,12 @@ export interface IRouteMetadata {
  lastResolvedAt?: number;
 }

+export interface IRouteVpn {
+  enabled: boolean;
+  mandatory?: boolean;
+  allowedServerDefinedClientTags?: string[];
+}
+
 export interface IRouteConfig {
  id?: string;
  match: IRouteMatch;
@@ -70,6 +76,7 @@ export interface IRouteConfig {
  security?: IRouteSecurity;
  headers?: { request?: Record<string, string>; response?: Record<string, string> };
  metadata?: IRouteMetadata;
+  vpn?: IRouteVpn;
  name?: string;
  description?: string;
  priority?: number;
@@ -136,6 +143,11 @@ export class SzRouteCard extends DeesElement {
            rateLimit: { enabled: true, maxRequests: 100, window: 60 },
            maxConnections: 1000,
          },
+          vpn: {
+            enabled: true,
+            mandatory: true,
+            allowedServerDefinedClientTags: ['admin', 'devops'],
+          },
          metadata: {
            securityProfileName: 'STANDARD',
            networkTargetName: 'LOSSLESS_INFRA',
@@ -150,6 +162,9 @@ export class SzRouteCard extends DeesElement {
  @property({ type: Object })
  public accessor route: IRouteConfig | null = null;

+  @property({ type: Boolean })
+  public accessor showActions: boolean = false;
+
  public static styles = [
    cssManager.defaultStyles,
    css`
@@ -459,6 +474,83 @@ export class SzRouteCard extends DeesElement {
        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
        font-size: 13px;
      }
+
+      .section.vpn {
+        border-left-color: ${cssManager.bdTheme('#0891b2', '#06b6d4')};
+      }
+
+      .vpn-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 600;
+        white-space: nowrap;
+      }
+
+      .vpn-badge.mandatory {
+        background: ${cssManager.bdTheme('#fff7ed', 'rgba(249, 115, 22, 0.2)')};
+        color: ${cssManager.bdTheme('#c2410c', '#fb923c')};
+      }
+
+      .vpn-badge.optional {
+        background: ${cssManager.bdTheme('#ecfdf5', 'rgba(16, 185, 129, 0.2)')};
+        color: ${cssManager.bdTheme('#047857', '#34d399')};
+      }
+
+      .vpn-tag {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 600;
+        font-family: monospace;
+        margin-right: 4px;
+        margin-bottom: 2px;
+        background: ${cssManager.bdTheme('#ecfeff', 'rgba(6, 182, 212, 0.15)')};
+        color: ${cssManager.bdTheme('#0e7490', '#22d3ee')};
+      }
+
+      .card-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 14px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
+        justify-content: flex-end;
+      }
+
+      .action-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 5px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+        transition: all 150ms ease;
+      }
+
+      .action-btn:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .action-btn.edit:hover {
+        border-color: ${cssManager.bdTheme('#93c5fd', 'rgba(59, 130, 246, 0.5)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .action-btn.delete:hover {
+        border-color: ${cssManager.bdTheme('#fca5a5', 'rgba(239, 68, 68, 0.5)')};
+        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+      }
    `,
  ];

@@ -652,11 +744,36 @@ export class SzRouteCard extends DeesElement {
            `
          : ''}

+        <!-- VPN Section -->
+        ${this.renderVpn()}
+
        <!-- Linked References Section -->
        ${this.renderLinked()}

        <!-- Feature Icons Row -->
        ${this.renderFeatures()}
+
+        <!-- Action Buttons -->
+        ${this.showActions ? html`
+          <div class="card-actions">
+            <button class="action-btn edit" @click=${(e: Event) => {
+              e.stopPropagation();
+              this.dispatchEvent(new CustomEvent('route-edit', {
+                detail: this.route,
+                bubbles: true,
+                composed: true,
+              }));
+            }}>Edit</button>
+            <button class="action-btn delete" @click=${(e: Event) => {
+              e.stopPropagation();
+              this.dispatchEvent(new CustomEvent('route-delete', {
+                detail: this.route,
+                bubbles: true,
+                composed: true,
+              }));
+            }}>Delete</button>
+          </div>
+        ` : ''}
      </div>
    `;
  }
@@ -669,6 +786,35 @@ export class SzRouteCard extends DeesElement {
    )}`;
  }

+  private renderVpn(): TemplateResult {
+    const vpn = this.route?.vpn;
+    if (!vpn?.enabled) return html``;
+
+    return html`
+      <div class="section vpn">
+        <div class="section-label">VPN Access</div>
+        <div class="field-row">
+          <span class="field-key">Mode</span>
+          <span class="field-value">
+            <span class="vpn-badge ${vpn.mandatory !== false ? 'mandatory' : 'optional'}">
+              ${vpn.mandatory !== false ? 'VPN Only' : 'VPN + Public'}
+            </span>
+          </span>
+        </div>
+        ${vpn.allowedServerDefinedClientTags?.length ? html`
+          <div class="field-row">
+            <span class="field-key">Tags</span>
+            <span class="field-value">
+              ${vpn.allowedServerDefinedClientTags.map(
+                (tag) => html`<span class="vpn-tag">${tag}</span>`
+              )}
+            </span>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
  private renderLinked(): TemplateResult {
    const meta = this.route?.metadata;
    if (!meta) return html``;
@@ -722,6 +868,9 @@ export class SzRouteCard extends DeesElement {
    if (headers) {
      features.push(html`<span class="feature"><span class="feature-icon">&#x2699;</span>Headers</span>`);
    }
+    if (this.route?.vpn?.enabled) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f510;</span>VPN</span>`);
+    }
    if (meta?.securityProfileName || meta?.networkTargetName) {
      features.push(html`<span class="feature"><span class="feature-icon">&#x1f517;</span>Linked</span>`);
    }
--- a/ts_web/elements/sz-route-list-view.ts
+++ b/ts_web/elements/sz-route-list-view.ts
@@ -76,6 +76,9 @@ export class SzRouteListView extends DeesElement {
  @property({ type: Array })
  public accessor routes: IRouteConfig[] = [];

+  @property({ attribute: false })
+  public accessor showActionsFilter: ((route: IRouteConfig) => boolean) | null = null;
+
  @state()
  private accessor searchQuery: string = '';

@@ -299,6 +302,7 @@ export class SzRouteListView extends DeesElement {
                (route) => html`
                  <sz-route-card
                    .route=${route}
+                    .showActions=${this.showActionsFilter?.(route) ?? false}
                    @click=${() => this.handleRouteClick(route)}
                  ></sz-route-card>
                `
Author	SHA1	Message	Date
Juergen Kunz	70c43ceae3	v2.11.0	2026-04-02 21:16:01 +00:00
Juergen Kunz	cf247117d4	feat(route-ui): add VPN details and conditional card actions to route cards	2026-04-02 21:16:01 +00:00
Juergen Kunz	35ffde9253	v2.10.0	2026-04-02 18:48:22 +00:00
Juergen Kunz	531ec5a2d0	feat(docs): document newly available catalog components and updated build configuration details	2026-04-02 18:48:22 +00:00