v2.9.0

changelog.md

@@ -1,5 +1,71 @@
 # Changelog
 
+## 2026-03-19 - 2.9.0 - feat(app-store-view)
+add app details action to store cards
+
+- adds a new "View Details" button alongside the existing deploy action
+- dispatches a bubbling "view-app" event with the selected app payload for parent handlers
+- updates card action layout and button styling to support multiple actions
+
+## 2026-03-18 - 2.8.0 - feat(elements)
+add app store view component for browsing and deploying app templates
+
+- introduces a new sz-app-store-view element with app card rendering, search/filter empty states, and deploy action events
+- exports the new app store view from the elements index for public consumption
+
+## 2026-03-17 - 2.7.0 - feat(sz-service-detail-view)
+replace the custom logs panel with dees-chart-log in the service detail view
+
+- Removes the bespoke log streaming UI styles and markup in favor of a shared log chart component.
+- Maps service log entries to structured timestamp, level, and message data for the new component.
+- Enables auto-scrolling, metrics display, and a higher log entry limit in the embedded log viewer.
+
+## 2026-03-16 - 2.6.2 - fix(platform-service-detail-view)
+wrap service logs chart in a full-width container to preserve layout
+
+- Places the logs component inside a container spanning all grid columns.
+- Keeps the service logs view aligned correctly within the detail page layout.
+
+## 2026-03-16 - 2.6.1 - fix(platform-service-detail-view)
+replace custom service log markup with dees-chart-log in the platform service detail view
+
+- Removes bespoke log container styles and rendering logic in favor of the shared dees-chart-log component
+- Normalizes log timestamps to ISO format before passing entries to the chart component
+- Enables log auto-scroll, entry limits, and metrics display for service logs
+
+## 2026-03-16 - 2.6.0 - feat(service-create-view)
+add platform service toggles for MongoDB, S3, and ClickHouse provisioning
+
+- Adds a new Platform Services section to the service creation view with dedicated toggles for managed infrastructure dependencies.
+- Includes MongoDB, S3-compatible storage, and ClickHouse selections in the emitted create-service configuration payload.
+- Resets selected platform services after form submission to keep create flow state consistent.
+
+## 2026-02-23 - 2.5.0 - feat(sz-config-section)
+add header action buttons to sz-config-section allowing configurable actions/events
+
+- Introduce IConfigSectionAction interface (label, icon, event, detail).
+- Add actions property to SzConfigSection and render header action buttons in the component template.
+- Add styles for .header-action and hover state to match design system.
+- Dispatch CustomEvent when an action is clicked, using action.event (defaults to 'action') and action.detail.
+- Update demo (sz-demo-view-config) to include a sample 'View Routes' action showing usage.
+
+## 2026-02-23 - 2.4.0 - feat(elements)
+add configuration overview and section components with demo view and index exports
+
+- Adds new sz-config-section component (IConfigField interface, rich renderers for boolean, pills, badge, code, link and 'Not configured' handling).
+- Adds new sz-config-overview wrapper component with heading/info banner and slot styling.
+- Adds demo view sz-demo-view-config that supplies example configuration groups and fields for System, Proxy, Email, DNS, TLS, Cache, RADIUS and Remote Ingress.
+- Exports new components from ts_web/elements/index.ts so they are available to the element registry.
+
+## 2026-02-22 - 2.3.0 - feat(routes)
+add route UI components and demo view with list/card and app-shell integration
+
+- Add new route UI components: sz-route-card, sz-route-list-view, and sz-demo-view-routes under ts_web/elements
+- Export new components from ts_web/elements/index.ts and register demo view in the demo app shell menu (ts_web/pages/sz-demo-app-shell.ts)
+- sz-route-card introduces route types/interfaces (IRouteConfig, IRouteAction, IRouteMatch, IRouteTls, IRouteSecurity) and rich rendering (ports/domains formatting, feature icons, security and headers display)
+- sz-route-list-view provides demo data, search, filtering (by action and enabled state), results count, grid rendering of sz-route-card, and emits a 'route-click' event
+- Demo view integrates with app UI secondary menu (actions and statistics) and wires up route-click handling for interactivity
+
 ## 2026-02-21 - 2.2.0 - feat(demo-mta)
 add MTA / Email demo views and components and integrate into demo app shell
 

package.json

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/index.ts

@@ -28,6 +28,7 @@ export * from './sz-registry-external-view.js';
 export * from './sz-services-list-view.js';
 export * from './sz-services-backups-view.js';
 export * from './sz-service-detail-view.js';
+export * from './sz-app-store-view.js';
 
 // Tokens View
 export * from './sz-tokens-view.js';
@@ -49,6 +50,14 @@ export * from './sz-domain-detail-view.js';
 export * from './sz-mta-list-view.js';
 export * from './sz-mta-detail-view.js';
 
+// Route Configuration Views
+export * from './sz-route-card.js';
+export * from './sz-route-list-view.js';
+
+// Config Views
+export * from './sz-config-section.js';
+export * from './sz-config-overview.js';
+
 // Demo Views
 export * from './sz-demo-view-dashboard.js';
 export * from './sz-demo-view-services.js';
@@ -57,3 +66,5 @@ export * from './sz-demo-view-registries.js';
 export * from './sz-demo-view-tokens.js';
 export * from './sz-demo-view-settings.js';
 export * from './sz-demo-view-mta.js';
+export * from './sz-demo-view-routes.js';
+export * from './sz-demo-view-config.js';

ts_web/elements/sz-app-store-view.ts

@@ -0,0 +1,611 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-app-store-view': SzAppStoreView;
+  }
+}
+
+export interface IAppTemplate {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  iconUrl?: string;
+  iconName?: string;
+  image: string;
+  port: number;
+  envVars?: Array<{ key: string; value: string; description: string; required?: boolean }>;
+  volumes?: string[];
+  enableMongoDB?: boolean;
+  enableS3?: boolean;
+  enableClickHouse?: boolean;
+}
+
+@customElement('sz-app-store-view')
+export class SzAppStoreView extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-app-store-view
+        .apps=${[
+          {
+            id: 'wordpress',
+            name: 'WordPress',
+            description: 'The world\'s most popular open-source content management system for building websites and blogs.',
+            category: 'CMS',
+            iconName: 'file-text',
+            image: 'wordpress:latest',
+            port: 80,
+            envVars: [
+              { key: 'WORDPRESS_DB_HOST', value: '', description: 'Database host address', required: true },
+              { key: 'WORDPRESS_DB_USER', value: 'wordpress', description: 'Database username', required: true },
+              { key: 'WORDPRESS_DB_PASSWORD', value: '', description: 'Database password', required: true },
+              { key: 'WORDPRESS_DB_NAME', value: 'wordpress', description: 'Database name', required: true },
+            ],
+            volumes: ['/var/www/html'],
+            enableMongoDB: false,
+            enableS3: false,
+          },
+          {
+            id: 'gitea',
+            name: 'Gitea',
+            description: 'A lightweight, self-hosted Git service. Painless setup for your own code hosting platform.',
+            category: 'Development',
+            iconName: 'git-branch',
+            image: 'gitea/gitea:latest',
+            port: 3000,
+            envVars: [
+              { key: 'GITEA__database__DB_TYPE', value: 'sqlite3', description: 'Database type', required: true },
+              { key: 'GITEA__server__ROOT_URL', value: '', description: 'Public URL of the Gitea instance', required: false },
+            ],
+            volumes: ['/data'],
+          },
+          {
+            id: 'ghost',
+            name: 'Ghost',
+            description: 'A powerful open-source publishing platform for professional bloggers and content creators.',
+            category: 'CMS',
+            iconName: 'book-open',
+            image: 'ghost:latest',
+            port: 2368,
+            envVars: [
+              { key: 'url', value: '', description: 'Public URL for the Ghost site', required: true },
+              { key: 'database__client', value: 'sqlite3', description: 'Database client type', required: false },
+            ],
+            volumes: ['/var/lib/ghost/content'],
+          },
+          {
+            id: 'nginx',
+            name: 'Nginx',
+            description: 'High-performance HTTP server and reverse proxy with low resource consumption.',
+            category: 'Web Server',
+            iconName: 'globe',
+            image: 'nginx:alpine',
+            port: 80,
+            volumes: ['/usr/share/nginx/html', '/etc/nginx/conf.d'],
+          },
+          {
+            id: 'redis',
+            name: 'Redis',
+            description: 'In-memory data store used as a database, cache, streaming engine, and message broker.',
+            category: 'Database',
+            iconName: 'database',
+            image: 'redis:alpine',
+            port: 6379,
+          },
+          {
+            id: 'postgres',
+            name: 'PostgreSQL',
+            description: 'Advanced open-source relational database with strong reliability and feature set.',
+            category: 'Database',
+            iconName: 'database',
+            image: 'postgres:16-alpine',
+            port: 5432,
+            envVars: [
+              { key: 'POSTGRES_USER', value: 'postgres', description: 'Superuser username', required: true },
+              { key: 'POSTGRES_PASSWORD', value: '', description: 'Superuser password', required: true },
+              { key: 'POSTGRES_DB', value: 'postgres', description: 'Default database name', required: false },
+            ],
+            volumes: ['/var/lib/postgresql/data'],
+          },
+        ]}
+      ></sz-app-store-view>
+    </div>
+  `;
+
+  public static demoGroups = ['Services'];
+
+  @property({ type: Array })
+  public accessor apps: IAppTemplate[] = [];
+
+  @state()
+  private accessor selectedCategory: string = 'All';
+
+  @state()
+  private accessor searchQuery: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .header {
+        margin-bottom: 24px;
+      }
+
+      .header-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .header-subtitle {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 4px;
+      }
+
+      .filter-bar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 24px;
+      }
+
+      .category-pills {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .category-pill {
+        padding: 6px 14px;
+        border-radius: 9999px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 200ms ease;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        white-space: nowrap;
+      }
+
+      .category-pill:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .category-pill.active {
+        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        border-color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .search-input {
+        width: 240px;
+        padding: 8px 12px 8px 36px;
+        background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 6px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        outline: none;
+        transition: border-color 200ms ease;
+        box-sizing: border-box;
+      }
+
+      .search-input:focus {
+        border-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .search-input::placeholder {
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+      }
+
+      .search-wrapper {
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      .search-icon {
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        pointer-events: none;
+      }
+
+      .app-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+      }
+
+      @media (max-width: 1024px) {
+        .app-grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      @media (max-width: 640px) {
+        .app-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .filter-bar {
+          flex-direction: column;
+          align-items: stretch;
+        }
+
+        .search-input {
+          width: 100%;
+        }
+      }
+
+      .app-card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        transition: all 200ms ease;
+        cursor: default;
+      }
+
+      .app-card:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.05)', 'rgba(0,0,0,0.2)')};
+        transform: translateY(-1px);
+      }
+
+      .card-top {
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+      }
+
+      .app-icon {
+        width: 44px;
+        height: 44px;
+        border-radius: 10px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+      }
+
+      .app-icon svg {
+        width: 22px;
+        height: 22px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .app-icon img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .app-icon .letter-fallback {
+        font-size: 20px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        user-select: none;
+      }
+
+      .card-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .app-name {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        line-height: 1.3;
+      }
+
+      .category-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 500;
+        margin-top: 4px;
+        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.15)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .app-description {
+        font-size: 13px;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+      }
+
+      .card-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
+        margin-top: auto;
+      }
+
+      .image-tag {
+        font-family: monospace;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 160px;
+      }
+
+      .deploy-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 7px 16px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 200ms ease;
+        border: none;
+        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .deploy-button:hover {
+        opacity: 0.85;
+      }
+
+      .deploy-button svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      .details-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 7px 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 200ms ease;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        background: transparent;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .details-button:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .card-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .empty-state {
+        grid-column: 1 / -1;
+        padding: 64px 24px;
+        text-align: center;
+      }
+
+      .empty-icon {
+        width: 48px;
+        height: 48px;
+        color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        margin: 0 auto 16px;
+      }
+
+      .empty-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        margin-bottom: 4px;
+      }
+
+      .empty-description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `,
+  ];
+
+  private get categories(): string[] {
+    const cats = new Set(this.apps.map((app) => app.category));
+    return ['All', ...Array.from(cats).sort()];
+  }
+
+  private get filteredApps(): IAppTemplate[] {
+    let result = this.apps;
+
+    if (this.selectedCategory !== 'All') {
+      result = result.filter((app) => app.category === this.selectedCategory);
+    }
+
+    if (this.searchQuery.trim()) {
+      const query = this.searchQuery.trim().toLowerCase();
+      result = result.filter(
+        (app) =>
+          app.name.toLowerCase().includes(query) ||
+          app.description.toLowerCase().includes(query) ||
+          app.category.toLowerCase().includes(query)
+      );
+    }
+
+    return result;
+  }
+
+  public render(): TemplateResult {
+    const filtered = this.filteredApps;
+
+    return html`
+      <div class="header">
+        <div class="header-title">App Store</div>
+        <div class="header-subtitle">Deploy popular applications with one click</div>
+      </div>
+
+      <div class="filter-bar">
+        <div class="category-pills">
+          ${this.categories.map(
+            (cat) => html`
+              <button
+                class="category-pill ${this.selectedCategory === cat ? 'active' : ''}"
+                @click=${() => { this.selectedCategory = cat; }}
+              >
+                ${cat}
+              </button>
+            `
+          )}
+        </div>
+        <div class="search-wrapper">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search apps..."
+            .value=${this.searchQuery}
+            @input=${(e: Event) => { this.searchQuery = (e.target as HTMLInputElement).value; }}
+          >
+        </div>
+      </div>
+
+      <div class="app-grid">
+        ${filtered.length > 0
+          ? filtered.map((app) => this.renderAppCard(app))
+          : html`
+              <div class="empty-state">
+                <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <circle cx="11" cy="11" r="8"></circle>
+                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                  <line x1="8" y1="11" x2="14" y2="11"></line>
+                </svg>
+                <div class="empty-title">No apps found</div>
+                <div class="empty-description">
+                  Try adjusting your search or filter to find what you're looking for.
+                </div>
+              </div>
+            `}
+      </div>
+    `;
+  }
+
+  private renderAppCard(app: IAppTemplate): TemplateResult {
+    return html`
+      <div class="app-card">
+        <div class="card-top">
+          <div class="app-icon">
+            ${app.iconUrl
+              ? html`<img src="${app.iconUrl}" alt="${app.name}">`
+              : app.iconName
+                ? this.renderIconByName(app.iconName)
+                : html`<span class="letter-fallback">${app.name.charAt(0).toUpperCase()}</span>`}
+          </div>
+          <div class="card-info">
+            <div class="app-name">${app.name}</div>
+            <div class="category-badge">${app.category}</div>
+          </div>
+        </div>
+        <div class="app-description">${app.description}</div>
+        <div class="card-footer">
+          <span class="image-tag" title="${app.image}">${app.image}</span>
+          <div class="card-actions">
+            <button class="details-button" @click=${() => this.handleViewDetails(app)}>
+              View Details
+            </button>
+            <button class="deploy-button" @click=${() => this.handleDeploy(app)}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="20 12 20 22 4 22 4 12"></polyline>
+                <rect x="2" y="7" width="20" height="5"></rect>
+                <line x1="12" y1="22" x2="12" y2="7"></line>
+                <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
+                <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
+              </svg>
+              Deploy
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderIconByName(name: string): TemplateResult {
+    const icons: Record<string, TemplateResult> = {
+      'file-text': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>`,
+      'git-branch': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>`,
+      'book-open': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>`,
+      'globe': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>`,
+      'database': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>`,
+      'server': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`,
+      'package': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>`,
+      'mail': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>`,
+      'shield': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>`,
+      'monitor': html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>`,
+    };
+
+    return icons[name] || html`<span class="letter-fallback">?</span>`;
+  }
+
+  private handleViewDetails(app: IAppTemplate) {
+    this.dispatchEvent(
+      new CustomEvent('view-app', {
+        detail: { app },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleDeploy(app: IAppTemplate) {
+    this.dispatchEvent(
+      new CustomEvent('deploy-app', {
+        detail: { app },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}

ts_web/elements/sz-config-overview.ts

@@ -0,0 +1,92 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-config-overview': SzConfigOverview;
+  }
+}
+
+@customElement('sz-config-overview')
+export class SzConfigOverview extends DeesElement {
+  public static demo = () => html`<sz-config-overview
+    heading="Configuration"
+    infoText="This is a read-only view of the current running configuration."
+  >
+    <div style="padding: 20px; text-align: center; color: #71717a; font-size: 14px;">
+      Place &lt;sz-config-section&gt; elements here
+    </div>
+  </sz-config-overview>`;
+
+  public static demoGroups = ['Configuration'];
+
+  @property({ type: String })
+  public accessor heading: string = '';
+
+  @property({ type: String })
+  public accessor infoText: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .heading {
+        font-size: 20px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        margin-bottom: 16px;
+      }
+
+      .info-banner {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 14px 18px;
+        margin-bottom: 20px;
+        border-radius: 8px;
+        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59,130,246,0.08)')};
+        border: 1px solid ${cssManager.bdTheme('#bfdbfe', 'rgba(59,130,246,0.2)')};
+        color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      .info-banner dees-icon {
+        flex-shrink: 0;
+        font-size: 18px;
+        margin-top: 1px;
+      }
+
+      ::slotted(sz-config-section) {
+        margin-bottom: 12px;
+      }
+
+      ::slotted(sz-config-section:last-child) {
+        margin-bottom: 0;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      ${this.heading ? html`<div class="heading">${this.heading}</div>` : ''}
+      ${this.infoText ? html`
+        <div class="info-banner">
+          <dees-icon .icon=${'lucide:info'}></dees-icon>
+          <span>${this.infoText}</span>
+        </div>
+      ` : ''}
+      <slot></slot>
+    `;
+  }
+}

ts_web/elements/sz-config-section.ts

@@ -0,0 +1,580 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+export interface IConfigField {
+  key: string;
+  value: string | number | boolean | string[] | null;
+  type?: 'text' | 'boolean' | 'badge' | 'pills' | 'code' | 'link';
+  description?: string;
+  linkTo?: string;
+}
+
+export interface IConfigSectionAction {
+  label: string;
+  icon?: string;
+  event?: string;
+  detail?: any;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-config-section': SzConfigSection;
+  }
+}
+
+@customElement('sz-config-section')
+export class SzConfigSection extends DeesElement {
+  public static demo = () => html`
+    <sz-config-section
+      title="SmartProxy"
+      subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
+      icon="lucide:network"
+      status="enabled"
+      .fields=${[
+        { key: 'Route Count', value: 12 },
+        { key: 'ACME Enabled', value: true, type: 'boolean' },
+        { key: 'Account Email', value: 'admin@example.com' },
+        { key: 'Use Production', value: true, type: 'boolean' },
+        { key: 'Auto Renew', value: true, type: 'boolean' },
+        { key: 'Renew Threshold', value: '30 days' },
+      ] as IConfigField[]}
+    ></sz-config-section>
+    <sz-config-section
+      title="Email Server"
+      subtitle="SMTP email handling with smartmta"
+      icon="lucide:mail"
+      status="disabled"
+      .fields=${[
+        { key: 'Ports', value: ['25', '465', '587'], type: 'pills' },
+        { key: 'Hostname', value: null },
+        { key: 'Domains', value: ['example.com', 'mail.example.com'], type: 'pills' },
+      ] as IConfigField[]}
+    ></sz-config-section>
+    <sz-config-section
+      title="DNS Server"
+      subtitle="Authoritative DNS with smartdns"
+      icon="lucide:globe"
+      status="not-configured"
+      collapsible
+      .fields=${[
+        { key: 'Port', value: 53 },
+        { key: 'NS Domains', value: ['ns1.example.com', 'ns2.example.com'], type: 'pills' },
+      ] as IConfigField[]}
+    ></sz-config-section>
+  `;
+
+  public static demoGroups = ['Configuration'];
+
+  @property({ type: String })
+  public accessor title: string = '';
+
+  @property({ type: String })
+  public accessor subtitle: string = '';
+
+  @property({ type: String })
+  public accessor icon: string = '';
+
+  @property({ type: String })
+  public accessor status: 'enabled' | 'disabled' | 'not-configured' | 'warning' = 'enabled';
+
+  @property({ type: Array })
+  public accessor fields: IConfigField[] = [];
+
+  @property({ type: Array })
+  public accessor actions: IConfigSectionAction[] = [];
+
+  @property({ type: Boolean })
+  public accessor collapsible: boolean = false;
+
+  @property({ type: Boolean })
+  public accessor collapsed: boolean = false;
+
+  @state()
+  accessor isCollapsed: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        margin-bottom: 16px;
+      }
+
+      .section {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 20px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        cursor: default;
+        user-select: none;
+      }
+
+      :host([collapsible]) .section-header {
+        cursor: pointer;
+      }
+
+      :host([collapsible]) .section-header:hover {
+        background: ${cssManager.bdTheme('#ebebed', '#1c1c1f')};
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+      }
+
+      .header-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        flex-shrink: 0;
+      }
+
+      .header-icon dees-icon {
+        font-size: 18px;
+        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+      }
+
+      .header-text {
+        min-width: 0;
+      }
+
+      .header-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        line-height: 1.3;
+      }
+
+      .header-subtitle {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        line-height: 1.3;
+        margin-top: 1px;
+      }
+
+      .header-right {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-shrink: 0;
+      }
+
+      /* Status badge */
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 3px 10px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+
+      .status-badge.enabled {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34,197,94,0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .status-badge.disabled {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239,68,68,0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .status-badge.not-configured {
+        background: ${cssManager.bdTheme('#f4f4f5', 'rgba(113,113,122,0.2)')};
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .status-badge.warning {
+        background: ${cssManager.bdTheme('#fef3c7', 'rgba(245,158,11,0.15)')};
+        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+      }
+
+      .status-dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+      }
+
+      .status-badge.enabled .status-dot {
+        background: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .status-badge.disabled .status-dot {
+        background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .status-badge.not-configured .status-dot {
+        background: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+      }
+
+      .status-badge.warning .status-dot {
+        background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
+      }
+
+      /* Action buttons */
+      .header-action {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 4px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        transition: background 150ms ease;
+        white-space: nowrap;
+        font-family: inherit;
+      }
+
+      .header-action:hover {
+        background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
+      }
+
+      .header-action dees-icon {
+        font-size: 14px;
+      }
+
+      /* Chevron */
+      .chevron {
+        display: flex;
+        align-items: center;
+        transition: transform 200ms ease;
+      }
+
+      .chevron.collapsed {
+        transform: rotate(-90deg);
+      }
+
+      .chevron dees-icon {
+        font-size: 16px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+      }
+
+      /* Content */
+      .section-content {
+        padding: 0;
+      }
+
+      .section-content.collapsed {
+        display: none;
+      }
+
+      /* Field rows */
+      .field-row {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding: 10px 20px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
+        gap: 16px;
+      }
+
+      .field-row:last-child {
+        border-bottom: none;
+      }
+
+      .field-key {
+        font-size: 13px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        flex-shrink: 0;
+        min-width: 140px;
+        padding-top: 1px;
+      }
+
+      .field-value {
+        font-size: 13px;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        text-align: right;
+        word-break: break-all;
+      }
+
+      .field-value.null-value {
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        font-style: italic;
+        font-family: inherit;
+      }
+
+      /* Boolean display */
+      .bool-value {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        font-family: inherit;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .bool-value.true {
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .bool-value.false {
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .bool-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+      }
+
+      .bool-value.true .bool-dot {
+        background: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .bool-value.false .bool-dot {
+        background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      /* Pills */
+      .pills {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+        justify-content: flex-end;
+      }
+
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 9px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59,130,246,0.1)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      /* Code value */
+      .code-value {
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        font-size: 12px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        padding: 2px 8px;
+        border-radius: 4px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      /* Link value */
+      .link-value {
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        cursor: pointer;
+        text-decoration: none;
+        font-family: inherit;
+        font-size: 13px;
+      }
+
+      .link-value:hover {
+        text-decoration: underline;
+      }
+
+      /* Description hint */
+      .field-description {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        margin-top: 3px;
+        text-align: right;
+      }
+
+      /* Slot for custom content */
+      .slot-content {
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
+      }
+
+      .slot-content:empty {
+        display: none;
+        border-top: none;
+      }
+
+      /* Badge type */
+      .badge-value {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 9px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+      }
+    `,
+  ];
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    this.isCollapsed = this.collapsed;
+    if (this.collapsible) {
+      this.setAttribute('collapsible', '');
+    }
+  }
+
+  public render(): TemplateResult {
+    const statusLabels: Record<string, string> = {
+      'enabled': 'Enabled',
+      'disabled': 'Disabled',
+      'not-configured': 'Not Configured',
+      'warning': 'Warning',
+    };
+
+    return html`
+      <div class="section">
+        <div
+          class="section-header"
+          @click=${() => {
+            if (this.collapsible) {
+              this.isCollapsed = !this.isCollapsed;
+            }
+          }}
+        >
+          <div class="header-left">
+            ${this.icon ? html`
+              <div class="header-icon">
+                <dees-icon .icon=${this.icon}></dees-icon>
+              </div>
+            ` : ''}
+            <div class="header-text">
+              <div class="header-title">${this.title}</div>
+              ${this.subtitle ? html`<div class="header-subtitle">${this.subtitle}</div>` : ''}
+            </div>
+          </div>
+          <div class="header-right">
+            ${this.status ? html`
+              <span class="status-badge ${this.status}">
+                <span class="status-dot"></span>
+                ${statusLabels[this.status] || this.status}
+              </span>
+            ` : ''}
+            ${this.actions.map(action => html`
+              <button class="header-action" @click=${(e: Event) => {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent(action.event || 'action', {
+                  detail: action.detail || { label: action.label },
+                  bubbles: true,
+                  composed: true,
+                }));
+              }}>
+                ${action.icon ? html`<dees-icon .icon=${action.icon}></dees-icon>` : ''}
+                ${action.label}
+              </button>
+            `)}
+            ${this.collapsible ? html`
+              <span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
+                <dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
+              </span>
+            ` : ''}
+          </div>
+        </div>
+        <div class="section-content ${this.isCollapsed ? 'collapsed' : ''}">
+          ${this.fields.map(field => this.renderField(field))}
+          <div class="slot-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderField(field: IConfigField): TemplateResult {
+    return html`
+      <div class="field-row">
+        <div class="field-key">${field.key}</div>
+        <div>
+          ${this.renderFieldValue(field)}
+          ${field.description ? html`<div class="field-description">${field.description}</div>` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderFieldValue(field: IConfigField): TemplateResult {
+    const value = field.value;
+    const type = field.type || this.inferType(value);
+
+    // Null / undefined
+    if (value === null || value === undefined) {
+      return html`<span class="field-value null-value">Not configured</span>`;
+    }
+
+    switch (type) {
+      case 'boolean':
+        return html`
+          <span class="bool-value ${value ? 'true' : 'false'}">
+            <span class="bool-dot"></span>
+            ${value ? 'Enabled' : 'Disabled'}
+          </span>
+        `;
+
+      case 'pills':
+        if (Array.isArray(value) && value.length === 0) {
+          return html`<span class="field-value null-value">None</span>`;
+        }
+        return html`
+          <div class="pills">
+            ${(value as string[]).map(v => html`<span class="pill">${v}</span>`)}
+          </div>
+        `;
+
+      case 'code':
+        return html`<span class="code-value">${String(value)}</span>`;
+
+      case 'badge':
+        return html`<span class="badge-value">${String(value)}</span>`;
+
+      case 'link':
+        return html`
+          <span
+            class="link-value"
+            @click=${() => {
+              if (field.linkTo) {
+                this.dispatchEvent(new CustomEvent('navigate', {
+                  detail: { target: field.linkTo },
+                  bubbles: true,
+                  composed: true,
+                }));
+              }
+            }}
+          >${String(value)}</span>
+        `;
+
+      default:
+        return html`<span class="field-value">${String(value)}</span>`;
+    }
+  }
+
+  private inferType(value: unknown): string {
+    if (typeof value === 'boolean') return 'boolean';
+    if (Array.isArray(value)) return 'pills';
+    return 'text';
+  }
+}

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

@@ -0,0 +1,165 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { IConfigField, IConfigSectionAction } from './sz-config-section.js';
+import './index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-demo-view-config': SzDemoViewConfig;
+  }
+}
+
+@customElement('sz-demo-view-config')
+export class SzDemoViewConfig extends DeesElement {
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const systemFields: IConfigField[] = [
+      { key: 'Base Directory', value: '/home/user/.serve.zone/dcrouter' },
+      { key: 'Data Directory', value: '/home/user/.serve.zone/dcrouter/data' },
+      { key: 'Public IP', value: '203.0.113.50' },
+      { key: 'Proxy IPs', value: ['203.0.113.10', '203.0.113.11'], type: 'pills' },
+      { key: 'Uptime', value: '3d 14h 22m' },
+      { key: 'Storage Backend', value: 'filesystem', type: 'badge' },
+    ];
+
+    const proxyFields: IConfigField[] = [
+      { key: 'Route Count', value: 12 },
+      { key: 'ACME Enabled', value: true, type: 'boolean' },
+      { key: 'Account Email', value: 'admin@serve.zone' },
+      { key: 'Use Production', value: true, type: 'boolean' },
+      { key: 'Auto Renew', value: true, type: 'boolean' },
+      { key: 'Renew Threshold', value: '30 days' },
+    ];
+
+    const emailFields: IConfigField[] = [
+      { key: 'Ports', value: ['25', '465', '587'], type: 'pills' },
+      { key: 'Hostname', value: 'mail.serve.zone' },
+      { key: 'Domains', value: ['serve.zone', 'mail.serve.zone'], type: 'pills' },
+      { key: 'Email Routes', value: 5 },
+      { key: 'Received Path', value: '/data/emails' },
+    ];
+
+    const dnsFields: IConfigField[] = [
+      { key: 'Port', value: 53 },
+      { key: 'NS Domains', value: ['ns1.serve.zone', 'ns2.serve.zone'], type: 'pills' },
+      { key: 'Scopes', value: ['serve.zone', 'example.com'], type: 'pills' },
+      { key: 'Record Count', value: 24 },
+      { key: 'DNS Challenge', value: true, type: 'boolean' },
+    ];
+
+    const tlsFields: IConfigField[] = [
+      { key: 'Contact Email', value: 'admin@serve.zone' },
+      { key: 'Domain', value: 'serve.zone' },
+      { key: 'Source', value: 'acme', type: 'badge' },
+      { key: 'Certificate Path', value: null },
+      { key: 'Key Path', value: null },
+    ];
+
+    const cacheFields: IConfigField[] = [
+      { key: 'Storage Path', value: '/home/user/.serve.zone/dcrouter/tsmdb' },
+      { key: 'DB Name', value: 'dcrouter' },
+      { key: 'Default TTL', value: '30 days' },
+      { key: 'Cleanup Interval', value: '1 hour' },
+    ];
+
+    const radiusFields: IConfigField[] = [
+      { key: 'Auth Port', value: null },
+      { key: 'Accounting Port', value: null },
+    ];
+
+    const remoteIngressFields: IConfigField[] = [
+      { key: 'Tunnel Port', value: 8443 },
+      { key: 'Hub Domain', value: 'hub.serve.zone' },
+      { key: 'TLS Configured', value: true, type: 'boolean' },
+    ];
+
+    return html`
+      <sz-config-overview
+        infoText="This view displays the current running configuration. DcRouter is configured through code or remote management."
+      >
+        <sz-config-section
+          title="System"
+          subtitle="Base paths and infrastructure"
+          icon="lucide:server"
+          status="enabled"
+          .fields=${systemFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="SmartProxy"
+          subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
+          icon="lucide:network"
+          status="enabled"
+          .fields=${proxyFields}
+          .actions=${[{ label: 'View Routes', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'routes' } }] as IConfigSectionAction[]}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Email Server"
+          subtitle="SMTP email handling with smartmta"
+          icon="lucide:mail"
+          status="enabled"
+          .fields=${emailFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="DNS Server"
+          subtitle="Authoritative DNS with smartdns"
+          icon="lucide:globe"
+          status="enabled"
+          .fields=${dnsFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="TLS / Certificates"
+          subtitle="Certificate management and ACME"
+          icon="lucide:shield-check"
+          status="enabled"
+          .fields=${tlsFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Cache Database"
+          subtitle="Persistent caching with smartdata"
+          icon="lucide:database"
+          status="enabled"
+          .fields=${cacheFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="RADIUS Server"
+          subtitle="Network authentication and VLAN assignment"
+          icon="lucide:wifi"
+          status="not-configured"
+          .fields=${radiusFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Remote Ingress"
+          subtitle="Edge tunnel nodes"
+          icon="lucide:cloud"
+          status="enabled"
+          .fields=${remoteIngressFields}
+        ></sz-config-section>
+      </sz-config-overview>
+    `;
+  }
+}

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

@@ -0,0 +1,362 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { DeesAppui } from '@design.estate/dees-catalog';
+import type { IRouteConfig } from './sz-route-card.js';
+import './index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-demo-view-routes': SzDemoViewRoutes;
+  }
+}
+
+@customElement('sz-demo-view-routes')
+export class SzDemoViewRoutes extends DeesElement {
+  private appui: DeesAppui | null = null;
+
+  @state()
+  private accessor currentTab: 'all' | 'https' | 'email' | 'dns' = 'all';
+
+  private demoRoutes: IRouteConfig[] = [
+    // 1. HTTPS with TLS termination + auto cert
+    {
+      id: 'route-1',
+      name: 'Web Frontend',
+      description: 'Main website with TLS termination and automatic certificates',
+      enabled: true,
+      priority: 10,
+      tags: ['web', 'https', 'production'],
+      match: {
+        ports: 443,
+        domains: ['serve.zone', 'www.serve.zone'],
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.0.10', port: 3000 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+      },
+    },
+    // 2. HTTP to HTTPS redirect
+    {
+      id: 'route-2',
+      name: 'HTTP Redirect',
+      description: 'Redirects all HTTP traffic to HTTPS',
+      enabled: true,
+      priority: 100,
+      tags: ['web', 'http', 'redirect'],
+      match: {
+        ports: 80,
+        domains: ['serve.zone', 'www.serve.zone'],
+        protocol: 'http',
+      },
+      action: {
+        type: 'socket-handler',
+      },
+    },
+    // 3. Email SMTP route
+    {
+      id: 'route-3',
+      name: 'SMTP Inbound',
+      description: 'Inbound email relay for serve.zone domain',
+      enabled: true,
+      tags: ['email', 'smtp', 'production'],
+      match: {
+        ports: 25,
+        domains: 'mail.serve.zone',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.1.5', port: 25 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+      },
+    },
+    // 4. API gateway with path matching, rate limiting, CORS
+    {
+      id: 'route-4',
+      name: 'API Gateway',
+      description: 'API gateway with rate limiting, CORS headers, and load balancing',
+      enabled: true,
+      priority: 20,
+      tags: ['web', 'api', 'https', 'production'],
+      match: {
+        ports: 443,
+        domains: 'api.serve.zone',
+        path: '/v2/*',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [
+          { host: ['10.0.0.20', '10.0.0.21', '10.0.0.22'], port: 8080 },
+        ],
+        tls: { mode: 'terminate', certificate: 'auto' },
+        loadBalancing: { algorithm: 'round-robin' },
+      },
+      security: {
+        rateLimit: { enabled: true, maxRequests: 200, window: 60 },
+        maxConnections: 5000,
+      },
+      headers: {
+        response: {
+          'Access-Control-Allow-Origin': '*',
+          'X-Request-Id': '{{requestId}}',
+        },
+      },
+    },
+    // 5. WebSocket route
+    {
+      id: 'route-5',
+      name: 'WebSocket Realtime',
+      description: 'Real-time WebSocket connections for live updates',
+      enabled: true,
+      tags: ['web', 'https', 'websocket'],
+      match: {
+        ports: 443,
+        domains: 'ws.serve.zone',
+        path: '/ws/*',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.0.30', port: 9090 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+        websocket: { enabled: true },
+      },
+    },
+    // 6. Wildcard domain route
+    {
+      id: 'route-6',
+      name: 'Tenant Wildcard',
+      description: 'Multi-tenant wildcard routing for customer subdomains',
+      enabled: true,
+      priority: 50,
+      tags: ['web', 'https', 'multi-tenant'],
+      match: {
+        ports: 443,
+        domains: '*.customers.serve.zone',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.0.40', port: 8080 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+      },
+      security: {
+        ipAllowList: ['10.0.0.0/8', '172.16.0.0/12'],
+      },
+    },
+    // 7. Load-balanced route with health check
+    {
+      id: 'route-7',
+      name: 'Microservices LB',
+      description: 'Load-balanced microservices backend with IP-hash affinity',
+      enabled: true,
+      tags: ['web', 'https', 'production'],
+      match: {
+        ports: [443, 8443],
+        domains: 'services.serve.zone',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [
+          { host: ['10.0.2.1', '10.0.2.2', '10.0.2.3', '10.0.2.4'], port: 3000 },
+        ],
+        tls: { mode: 'terminate-and-reencrypt', certificate: 'auto' },
+        loadBalancing: { algorithm: 'ip-hash' },
+      },
+    },
+    // 8. DNS-over-HTTPS route
+    {
+      id: 'route-8',
+      name: 'DNS over HTTPS',
+      description: 'DNS-over-HTTPS resolver endpoint',
+      enabled: true,
+      tags: ['dns', 'https'],
+      match: {
+        ports: 443,
+        domains: 'dns.serve.zone',
+        path: '/dns-query',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.3.1', port: 8053 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+      },
+    },
+    // 9. NFTables high-performance route
+    {
+      id: 'route-9',
+      name: 'High-Perf TCP Proxy',
+      description: 'NFTables-accelerated TCP proxy for game servers',
+      enabled: true,
+      tags: ['tcp', 'nftables', 'production'],
+      match: {
+        ports: [{ from: 27000, to: 27050 }],
+        protocol: 'tcp',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.4.1', port: 'preserve' }],
+        forwardingEngine: 'nftables',
+      },
+    },
+    // 10. Disabled maintenance route
+    {
+      id: 'route-10',
+      name: 'Legacy Admin Panel',
+      description: 'Deprecated admin panel — disabled for maintenance',
+      enabled: false,
+      tags: ['web', 'https', 'deprecated'],
+      match: {
+        ports: 443,
+        domains: 'admin-old.serve.zone',
+        protocol: 'http',
+      },
+      action: {
+        type: 'socket-handler',
+      },
+      security: {
+        ipBlockList: ['0.0.0.0/0'],
+      },
+    },
+  ];
+
+  private get filteredRoutes(): IRouteConfig[] {
+    if (this.currentTab === 'all') return this.demoRoutes;
+    if (this.currentTab === 'https') {
+      return this.demoRoutes.filter((r) =>
+        r.tags?.some((t) => ['web', 'https', 'http'].includes(t))
+      );
+    }
+    if (this.currentTab === 'email') {
+      return this.demoRoutes.filter((r) =>
+        r.tags?.some((t) => ['email', 'smtp'].includes(t))
+      );
+    }
+    if (this.currentTab === 'dns') {
+      return this.demoRoutes.filter((r) =>
+        r.tags?.some((t) => ['dns'].includes(t))
+      );
+    }
+    return this.demoRoutes;
+  }
+
+  async onActivate(context: { appui: DeesAppui; viewId: string }) {
+    this.appui = context.appui;
+
+    this.appui.setContentTabs([
+      {
+        key: 'All Routes',
+        action: () => {
+          this.currentTab = 'all';
+          this.updateSecondaryMenu();
+        },
+      },
+      {
+        key: 'HTTP/S',
+        action: () => {
+          this.currentTab = 'https';
+          this.updateSecondaryMenu();
+        },
+      },
+      {
+        key: 'Email',
+        action: () => {
+          this.currentTab = 'email';
+          this.updateSecondaryMenu();
+        },
+      },
+      {
+        key: 'DNS',
+        action: () => {
+          this.currentTab = 'dns';
+          this.updateSecondaryMenu();
+        },
+      },
+    ]);
+
+    this.updateSecondaryMenu();
+  }
+
+  private updateSecondaryMenu() {
+    if (!this.appui) return;
+
+    const total = this.demoRoutes.length;
+    const active = this.demoRoutes.filter((r) => r.enabled !== false).length;
+    const forwardCount = this.demoRoutes.filter((r) => r.action.type === 'forward').length;
+
+    this.appui.setSecondaryMenu({
+      heading: 'Routes',
+      groups: [
+        {
+          name: 'Actions',
+          items: [
+            {
+              type: 'action',
+              key: 'Refresh',
+              iconName: 'lucide:RefreshCw',
+              action: () => {
+                console.log('Refresh routes');
+              },
+            },
+            {
+              type: 'action',
+              key: 'Add Route',
+              iconName: 'lucide:Plus',
+              action: () => {
+                console.log('Add route');
+              },
+            },
+          ],
+        },
+        {
+          name: 'Statistics',
+          items: [
+            { type: 'header' as const, label: `${total} Total Routes` },
+            { type: 'header' as const, label: `${active} Active` },
+            { type: 'header' as const, label: `${forwardCount} Forward` },
+            { type: 'header' as const, label: `${total - forwardCount} Socket Handler` },
+          ],
+        },
+      ],
+    });
+  }
+
+  onDeactivate() {
+    // Cleanup if needed
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <sz-route-list-view
+        .routes=${this.filteredRoutes}
+        @route-click=${(e: CustomEvent<IRouteConfig>) => {
+          console.log('Route clicked:', e.detail.name);
+        }}
+      ></sz-route-list-view>
+    `;
+  }
+}

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

@@ -363,56 +363,6 @@ export class SzPlatformServiceDetailView extends DeesElement {
         background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
       }
 
-      .log-container {
-        background: ${cssManager.bdTheme('#18181b', '#09090b')};
-        border-radius: 6px;
-        padding: 12px;
-        max-height: 300px;
-        overflow-y: auto;
-        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
-        font-size: 12px;
-        line-height: 1.6;
-      }
-
-      .log-entry {
-        display: flex;
-        gap: 12px;
-        padding: 4px 0;
-      }
-
-      .log-timestamp {
-        color: #71717a;
-        flex-shrink: 0;
-      }
-
-      .log-level {
-        flex-shrink: 0;
-        width: 50px;
-        text-transform: uppercase;
-        font-weight: 500;
-      }
-
-      .log-level.info {
-        color: #60a5fa;
-      }
-
-      .log-level.warn {
-        color: #fbbf24;
-      }
-
-      .log-level.error {
-        color: #f87171;
-      }
-
-      .log-level.debug {
-        color: #a1a1aa;
-      }
-
-      .log-message {
-        color: #fafafa;
-        word-break: break-word;
-      }
-
       .config-item {
         display: flex;
         justify-content: space-between;
@@ -637,29 +587,18 @@ export class SzPlatformServiceDetailView extends DeesElement {
         ` : ''}
 
         <!-- Logs -->
-        <div class="section full-width">
+        <div style="grid-column: 1 / -1;">
-          <div class="section-header">
+          <dees-chart-log
-            <div class="section-title">
+            .label=${'Service Logs'}
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            .logEntries=${this.logs.map(log => ({
-                <polyline points="4 17 10 11 4 5"></polyline>
+              timestamp: log.timestamp.includes('T') ? log.timestamp : new Date(log.timestamp).toISOString(),
-                <line x1="12" y1="19" x2="20" y2="19"></line>
+              level: log.level as 'debug' | 'info' | 'warn' | 'error',
-              </svg>
+              message: log.message,
-              Logs
+            }))}
-            </div>
+            .autoScroll=${true}
-          </div>
+            .maxEntries=${2000}
-          <div class="section-content">
+            .showMetrics=${true}
-            <div class="log-container">
+          ></dees-chart-log>
-              ${this.logs.length > 0 ? this.logs.map(log => html`
-                <div class="log-entry">
-                  <span class="log-timestamp">${log.timestamp}</span>
-                  <span class="log-level ${log.level}">${log.level}</span>
-                  <span class="log-message">${log.message}</span>
-                </div>
-              `) : html`
-                <div style="color: #71717a; text-align: center; padding: 20px;">No logs available</div>
-              `}
-            </div>
-          </div>
         </div>
       </div>
     `;

ts_web/elements/sz-route-card.ts

@@ -0,0 +1,667 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-route-card': SzRouteCard;
+  }
+}
+
+// Simplified route types for display purposes
+export type TRouteActionType = 'forward' | 'socket-handler';
+export type TTlsMode = 'passthrough' | 'terminate' | 'terminate-and-reencrypt';
+export type TPortRange = number | number[] | Array<{ from: number; to: number }>;
+
+export interface IRouteMatch {
+  ports: TPortRange;
+  domains?: string | string[];
+  path?: string;
+  clientIp?: string[];
+  tlsVersion?: string[];
+  headers?: Record<string, string>;
+  protocol?: 'http' | 'tcp';
+}
+
+export interface IRouteTarget {
+  host: string | string[];
+  port: number | 'preserve';
+}
+
+export interface IRouteTls {
+  mode: TTlsMode;
+  certificate?: 'auto' | { key: string; cert: string };
+}
+
+export interface IRouteAction {
+  type: TRouteActionType;
+  targets?: IRouteTarget[];
+  tls?: IRouteTls;
+  websocket?: { enabled: boolean };
+  loadBalancing?: { algorithm: 'round-robin' | 'least-connections' | 'ip-hash' };
+  forwardingEngine?: 'node' | 'nftables';
+}
+
+export interface IRouteSecurity {
+  ipAllowList?: string[];
+  ipBlockList?: string[];
+  maxConnections?: number;
+  rateLimit?: { enabled: boolean; maxRequests: number; window: number };
+}
+
+export interface IRouteConfig {
+  id?: string;
+  match: IRouteMatch;
+  action: IRouteAction;
+  security?: IRouteSecurity;
+  headers?: { request?: Record<string, string>; response?: Record<string, string> };
+  name?: string;
+  description?: string;
+  priority?: number;
+  tags?: string[];
+  enabled?: boolean;
+}
+
+function formatPorts(ports: TPortRange): string {
+  if (typeof ports === 'number') return String(ports);
+  if (Array.isArray(ports)) {
+    return ports
+      .map((p) => {
+        if (typeof p === 'number') return String(p);
+        return `${p.from}\u2013${p.to}`;
+      })
+      .join(', ');
+  }
+  return String(ports);
+}
+
+function formatTargets(targets: IRouteTarget[]): string[] {
+  const result: string[] = [];
+  for (const t of targets) {
+    const hosts = Array.isArray(t.host) ? t.host : [t.host];
+    const portStr = t.port === 'preserve' ? '(preserve)' : String(t.port);
+    for (const h of hosts) {
+      result.push(`${h}:${portStr}`);
+    }
+  }
+  return result;
+}
+
+@customElement('sz-route-card')
+export class SzRouteCard extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 520px;">
+      <sz-route-card
+        .route=${{
+          name: 'API Gateway',
+          description: 'Main API gateway with TLS termination and load balancing',
+          enabled: true,
+          priority: 10,
+          tags: ['web', 'api', 'production'],
+          match: {
+            ports: [443, 8443],
+            domains: ['api.example.com', '*.api.serve.zone'],
+            path: '/api/*',
+            protocol: 'http' as const,
+            clientIp: ['10.0.0.0/8'],
+          },
+          action: {
+            type: 'forward' as const,
+            targets: [
+              { host: ['10.0.0.1', '10.0.0.2'], port: 8080 },
+            ],
+            tls: { mode: 'terminate' as const, certificate: 'auto' as const },
+            websocket: { enabled: true },
+            loadBalancing: { algorithm: 'round-robin' as const },
+            forwardingEngine: 'nftables' as const,
+          },
+          security: {
+            ipAllowList: ['10.0.0.0/8'],
+            ipBlockList: ['192.168.100.0/24'],
+            rateLimit: { enabled: true, maxRequests: 100, window: 60 },
+            maxConnections: 1000,
+          },
+        } satisfies IRouteConfig}
+      ></sz-route-card>
+    </div>
+  `;
+
+  public static demoGroups = ['Routes'];
+
+  @property({ type: Object })
+  public accessor route: IRouteConfig | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        padding: 20px;
+        transition: border-color 200ms ease, box-shadow 200ms ease;
+      }
+
+      .card:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(0,0,0,0.2)')};
+      }
+
+      /* Header */
+      .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 4px;
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .status-dot.enabled {
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+        box-shadow: 0 0 6px ${cssManager.bdTheme('rgba(34,197,94,0.4)', 'rgba(34,197,94,0.3)')};
+      }
+
+      .status-dot.disabled {
+        background: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+      }
+
+      .route-name {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .header-badges {
+        display: flex;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+
+      .badge.forward {
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .badge.socket-handler {
+        background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#7c3aed', '#a78bfa')};
+      }
+
+      .badge.enabled {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .badge.disabled {
+        background: ${cssManager.bdTheme('#f4f4f5', 'rgba(113, 113, 122, 0.2)')};
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .description {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-bottom: 8px;
+        line-height: 1.4;
+      }
+
+      .meta-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-bottom: 16px;
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+
+      .tag {
+        padding: 2px 8px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+      }
+
+      .priority {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
+        font-weight: 500;
+      }
+
+      /* Sections */
+      .section {
+        border-left: 3px solid;
+        padding: 10px 14px;
+        margin-bottom: 12px;
+        border-radius: 0 6px 6px 0;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+      }
+
+      .section:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .section.match {
+        border-left-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+      }
+
+      .section.action {
+        border-left-color: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+      }
+
+      .section.security {
+        border-left-color: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
+      }
+
+      .section-label {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
+        margin-bottom: 8px;
+      }
+
+      .field-row {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 5px;
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      .field-row:last-child {
+        margin-bottom: 0;
+      }
+
+      .field-key {
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        min-width: 64px;
+        flex-shrink: 0;
+        font-weight: 500;
+      }
+
+      .field-value {
+        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
+        word-break: break-all;
+      }
+
+      .domain-chip {
+        display: inline-flex;
+        padding: 1px 6px;
+        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
+        border-radius: 3px;
+        font-size: 12px;
+        margin-right: 4px;
+        margin-bottom: 2px;
+        font-family: monospace;
+      }
+
+      .domain-chip.glob {
+        background: ${cssManager.bdTheme('#fef3c7', 'rgba(245, 158, 11, 0.15)')};
+        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+      }
+
+      .mono {
+        font-family: monospace;
+        font-size: 12px;
+      }
+
+      .protocol-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .protocol-badge.http {
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .protocol-badge.tcp {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .tls-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .tls-badge.auto {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .tls-badge.custom {
+        background: ${cssManager.bdTheme('#ffedd5', 'rgba(249, 115, 22, 0.2)')};
+        color: ${cssManager.bdTheme('#c2410c', '#fb923c')};
+      }
+
+      .engine-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#fae8ff', 'rgba(168, 85, 247, 0.2)')};
+        color: ${cssManager.bdTheme('#7e22ce', '#c084fc')};
+      }
+
+      .header-pair {
+        display: inline;
+        font-family: monospace;
+        font-size: 12px;
+      }
+
+      /* Feature icons */
+      .features-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 14px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
+      }
+
+      .feature {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .feature-icon {
+        font-size: 13px;
+      }
+
+      .no-route {
+        text-align: center;
+        padding: 24px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        font-size: 13px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (!this.route) {
+      return html`<div class="card"><div class="no-route">No route data</div></div>`;
+    }
+
+    const r = this.route;
+    const isEnabled = r.enabled !== false;
+    const match = r.match;
+    const action = r.action;
+    const security = r.security;
+
+    return html`
+      <div class="card">
+        <!-- Header -->
+        <div class="header">
+          <div class="header-left">
+            <span class="status-dot ${isEnabled ? 'enabled' : 'disabled'}"></span>
+            <span class="route-name">${r.name || r.id || 'Unnamed Route'}</span>
+          </div>
+          <div class="header-badges">
+            <span class="badge ${action.type}">${action.type}</span>
+            <span class="badge ${isEnabled ? 'enabled' : 'disabled'}">${isEnabled ? 'enabled' : 'disabled'}</span>
+          </div>
+        </div>
+
+        ${r.description ? html`<div class="description">${r.description}</div>` : ''}
+
+        <div class="meta-row">
+          ${r.tags && r.tags.length > 0
+            ? html`<div class="tags">${r.tags.map((t) => html`<span class="tag">${t}</span>`)}</div>`
+            : html`<div></div>`}
+          ${r.priority != null ? html`<span class="priority">Priority: ${r.priority}</span>` : ''}
+        </div>
+
+        <!-- Match Section -->
+        <div class="section match">
+          <div class="section-label">Match</div>
+          <div class="field-row">
+            <span class="field-key">Ports</span>
+            <span class="field-value mono">${formatPorts(match.ports)}</span>
+          </div>
+          ${match.domains
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Domains</span>
+                  <span class="field-value">${this.renderDomains(match.domains)}</span>
+                </div>
+              `
+            : ''}
+          ${match.path
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Path</span>
+                  <span class="field-value mono">${match.path}</span>
+                </div>
+              `
+            : ''}
+          ${match.protocol
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Protocol</span>
+                  <span class="field-value">
+                    <span class="protocol-badge ${match.protocol}">${match.protocol}</span>
+                  </span>
+                </div>
+              `
+            : ''}
+          ${match.clientIp && match.clientIp.length > 0
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Client</span>
+                  <span class="field-value mono">${match.clientIp.join(', ')}</span>
+                </div>
+              `
+            : ''}
+          ${match.tlsVersion && match.tlsVersion.length > 0
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">TLS Ver</span>
+                  <span class="field-value">${match.tlsVersion.join(', ')}</span>
+                </div>
+              `
+            : ''}
+          ${match.headers
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Headers</span>
+                  <span class="field-value">
+                    ${Object.entries(match.headers).map(
+                      ([k, v]) => html`<span class="header-pair">${k}=${v}</span> `
+                    )}
+                  </span>
+                </div>
+              `
+            : ''}
+        </div>
+
+        <!-- Action Section -->
+        <div class="section action">
+          <div class="section-label">Action</div>
+          ${action.targets && action.targets.length > 0
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Targets</span>
+                  <span class="field-value mono">${formatTargets(action.targets).join(', ')}</span>
+                </div>
+              `
+            : ''}
+          ${action.tls
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">TLS</span>
+                  <span class="field-value">
+                    ${action.tls.mode}
+                    ${action.tls.certificate
+                      ? action.tls.certificate === 'auto'
+                        ? html` <span class="tls-badge auto">auto cert</span>`
+                        : html` <span class="tls-badge custom">custom cert</span>`
+                      : ''}
+                  </span>
+                </div>
+              `
+            : ''}
+          ${action.forwardingEngine
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Engine</span>
+                  <span class="field-value"><span class="engine-badge">${action.forwardingEngine}</span></span>
+                </div>
+              `
+            : ''}
+          ${action.loadBalancing
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">LB</span>
+                  <span class="field-value">${action.loadBalancing.algorithm}</span>
+                </div>
+              `
+            : ''}
+          ${action.websocket?.enabled
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">WS</span>
+                  <span class="field-value"><span class="badge enabled">enabled</span></span>
+                </div>
+              `
+            : ''}
+        </div>
+
+        <!-- Security Section -->
+        ${security
+          ? html`
+              <div class="section security">
+                <div class="section-label">Security</div>
+                ${security.ipAllowList && security.ipAllowList.length > 0
+                  ? html`
+                      <div class="field-row">
+                        <span class="field-key">Allow</span>
+                        <span class="field-value mono">${security.ipAllowList.join(', ')}</span>
+                      </div>
+                    `
+                  : ''}
+                ${security.ipBlockList && security.ipBlockList.length > 0
+                  ? html`
+                      <div class="field-row">
+                        <span class="field-key">Block</span>
+                        <span class="field-value mono">${security.ipBlockList.join(', ')}</span>
+                      </div>
+                    `
+                  : ''}
+                ${security.rateLimit?.enabled
+                  ? html`
+                      <div class="field-row">
+                        <span class="field-key">Rate</span>
+                        <span class="field-value">${security.rateLimit.maxRequests} req / ${security.rateLimit.window}s</span>
+                      </div>
+                    `
+                  : ''}
+                ${security.maxConnections
+                  ? html`
+                      <div class="field-row">
+                        <span class="field-key">Max Conn</span>
+                        <span class="field-value">${security.maxConnections}</span>
+                      </div>
+                    `
+                  : ''}
+              </div>
+            `
+          : ''}
+
+        <!-- Feature Icons Row -->
+        ${this.renderFeatures()}
+      </div>
+    `;
+  }
+
+  private renderDomains(domains: string | string[]): TemplateResult {
+    const list = Array.isArray(domains) ? domains : [domains];
+    return html`${list.map(
+      (d) =>
+        html`<span class="domain-chip ${d.includes('*') ? 'glob' : ''}">${d}</span>`
+    )}`;
+  }
+
+  private renderFeatures(): TemplateResult {
+    if (!this.route) return html``;
+    const features: TemplateResult[] = [];
+    const action = this.route.action;
+    const security = this.route.security;
+    const headers = this.route.headers;
+
+    if (action.tls) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f512;</span>TLS</span>`);
+    }
+    if (action.websocket?.enabled) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x2194;</span>WS</span>`);
+    }
+    if (action.loadBalancing) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x2696;</span>LB</span>`);
+    }
+    if (security) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f6e1;</span>Security</span>`);
+    }
+    if (headers) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x2699;</span>Headers</span>`);
+    }
+
+    if (features.length === 0) return html``;
+    return html`<div class="features-row">${features}</div>`;
+  }
+}

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

@@ -0,0 +1,326 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import type { IRouteConfig, TRouteActionType } from './sz-route-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-route-list-view': SzRouteListView;
+  }
+}
+
+@customElement('sz-route-list-view')
+export class SzRouteListView extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-route-list-view
+        .routes=${[
+          {
+            name: 'HTTPS Gateway',
+            description: 'Main web gateway with TLS termination',
+            enabled: true,
+            tags: ['web', 'https', 'production'],
+            match: { ports: 443, domains: ['*.example.com', 'serve.zone'], protocol: 'http' as const },
+            action: {
+              type: 'forward' as const,
+              targets: [{ host: '10.0.0.1', port: 8080 }],
+              tls: { mode: 'terminate' as const, certificate: 'auto' as const },
+            },
+          },
+          {
+            name: 'SMTP Inbound',
+            description: 'Email relay for incoming mail',
+            enabled: true,
+            tags: ['email', 'smtp'],
+            match: { ports: 25, domains: 'mail.serve.zone' },
+            action: {
+              type: 'forward' as const,
+              targets: [{ host: '10.0.1.5', port: 25 }],
+            },
+          },
+          {
+            name: 'WebSocket API',
+            description: 'Real-time WebSocket connections',
+            enabled: true,
+            tags: ['web', 'api'],
+            match: { ports: 443, domains: 'ws.example.com', path: '/ws/*' },
+            action: {
+              type: 'forward' as const,
+              targets: [{ host: '10.0.0.3', port: 9090 }],
+              websocket: { enabled: true },
+              tls: { mode: 'terminate' as const, certificate: 'auto' as const },
+            },
+          },
+          {
+            name: 'Maintenance Page',
+            enabled: false,
+            tags: ['web'],
+            match: { ports: [80, 443], domains: 'old.example.com' },
+            action: { type: 'socket-handler' as const },
+          },
+        ] satisfies IRouteConfig[]}
+      ></sz-route-list-view>
+    </div>
+  `;
+
+  public static demoGroups = ['Routes'];
+
+  @property({ type: Array })
+  public accessor routes: IRouteConfig[] = [];
+
+  @state()
+  private accessor searchQuery: string = '';
+
+  @state()
+  private accessor actionFilter: TRouteActionType | 'all' = 'all';
+
+  @state()
+  private accessor enabledFilter: 'all' | 'enabled' | 'disabled' = 'all';
+
+  private get filteredRoutes(): IRouteConfig[] {
+    return this.routes.filter((route) => {
+      // Action type filter
+      if (this.actionFilter !== 'all' && route.action.type !== this.actionFilter) return false;
+
+      // Enabled/disabled filter
+      if (this.enabledFilter === 'enabled' && route.enabled === false) return false;
+      if (this.enabledFilter === 'disabled' && route.enabled !== false) return false;
+
+      // Search query
+      if (this.searchQuery) {
+        const q = this.searchQuery.toLowerCase();
+        return this.routeMatchesSearch(route, q);
+      }
+      return true;
+    });
+  }
+
+  private routeMatchesSearch(route: IRouteConfig, q: string): boolean {
+    // Name and description
+    if (route.name?.toLowerCase().includes(q)) return true;
+    if (route.description?.toLowerCase().includes(q)) return true;
+
+    // Domains
+    if (route.match.domains) {
+      const domains = Array.isArray(route.match.domains) ? route.match.domains : [route.match.domains];
+      if (domains.some((d) => d.toLowerCase().includes(q))) return true;
+    }
+
+    // Ports
+    const portsStr = this.formatPortsForSearch(route.match.ports);
+    if (portsStr.includes(q)) return true;
+
+    // Path
+    if (route.match.path?.toLowerCase().includes(q)) return true;
+
+    // Client IPs
+    if (route.match.clientIp?.some((ip) => ip.includes(q))) return true;
+
+    // Targets
+    if (route.action.targets) {
+      for (const t of route.action.targets) {
+        const hosts = Array.isArray(t.host) ? t.host : [t.host];
+        if (hosts.some((h) => h.toLowerCase().includes(q))) return true;
+      }
+    }
+
+    // Tags
+    if (route.tags?.some((t) => t.toLowerCase().includes(q))) return true;
+
+    return false;
+  }
+
+  private formatPortsForSearch(ports: import('./sz-route-card.js').TPortRange): string {
+    if (typeof ports === 'number') return String(ports);
+    if (Array.isArray(ports)) {
+      return ports
+        .map((p) => (typeof p === 'number' ? String(p) : `${p.from}-${p.to}`))
+        .join(' ');
+    }
+    return String(ports);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .filter-bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+
+      .search-input {
+        flex: 1;
+        min-width: 200px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 6px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        outline: none;
+        transition: border-color 200ms ease;
+      }
+
+      .search-input::placeholder {
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+      }
+
+      .search-input:focus {
+        border-color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
+      }
+
+      .chip-group {
+        display: flex;
+        gap: 4px;
+      }
+
+      .chip {
+        padding: 6px 12px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        cursor: pointer;
+        transition: all 200ms ease;
+        white-space: nowrap;
+      }
+
+      .chip:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .chip.active {
+        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        border-color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .results-count {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-bottom: 16px;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+        gap: 16px;
+      }
+
+      .grid sz-route-card {
+        cursor: pointer;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 48px 24px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-size: 14px;
+      }
+
+      .empty-state-icon {
+        font-size: 32px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const filtered = this.filteredRoutes;
+
+    return html`
+      <div class="filter-bar">
+        <input
+          class="search-input"
+          type="text"
+          placeholder="Search routes by domain, IP, port, path, or tag..."
+          .value=${this.searchQuery}
+          @input=${(e: InputEvent) => {
+            this.searchQuery = (e.target as HTMLInputElement).value;
+          }}
+        />
+        <div class="chip-group">
+          ${(['all', 'forward', 'socket-handler'] as const).map(
+            (type) => html`
+              <button
+                class="chip ${this.actionFilter === type ? 'active' : ''}"
+                @click=${() => {
+                  this.actionFilter = type;
+                }}
+              >
+                ${type === 'all' ? 'All' : type === 'forward' ? 'Forward' : 'Socket Handler'}
+              </button>
+            `
+          )}
+        </div>
+        <div class="chip-group">
+          ${(['all', 'enabled', 'disabled'] as const).map(
+            (status) => html`
+              <button
+                class="chip ${this.enabledFilter === status ? 'active' : ''}"
+                @click=${() => {
+                  this.enabledFilter = status;
+                }}
+              >
+                ${status.charAt(0).toUpperCase() + status.slice(1)}
+              </button>
+            `
+          )}
+        </div>
+      </div>
+
+      <div class="results-count">
+        Showing ${filtered.length} of ${this.routes.length} routes
+      </div>
+
+      ${filtered.length > 0
+        ? html`
+            <div class="grid">
+              ${filtered.map(
+                (route) => html`
+                  <sz-route-card
+                    .route=${route}
+                    @click=${() => this.handleRouteClick(route)}
+                  ></sz-route-card>
+                `
+              )}
+            </div>
+          `
+        : html`
+            <div class="empty-state">
+              <div class="empty-state-icon">&#x1f50d;</div>
+              <div>No routes match your filters</div>
+            </div>
+          `}
+    `;
+  }
+
+  private handleRouteClick(route: IRouteConfig) {
+    this.dispatchEvent(
+      new CustomEvent('route-click', {
+        detail: route,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}

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

@@ -48,6 +48,9 @@ export interface IServiceConfig {
   memoryLimit: string;
   restartPolicy: 'always' | 'on-failure' | 'never';
   networkMode: string;
+  enableMongoDB: boolean;
+  enableS3: boolean;
+  enableClickHouse: boolean;
 }
 
 @customElement('sz-service-create-view')
@@ -104,6 +107,15 @@ export class SzServiceCreateView extends DeesElement {
   @state()
   private accessor showAdvanced: boolean = false;
 
+  @state()
+  private accessor enableMongoDB: boolean = false;
+
+  @state()
+  private accessor enableS3: boolean = false;
+
+  @state()
+  private accessor enableClickHouse: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -312,6 +324,105 @@ export class SzServiceCreateView extends DeesElement {
         accent-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
       }
 
+      .platform-toggle-list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .platform-toggle-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-radius: 8px;
+        transition: background 200ms ease;
+      }
+
+      .platform-toggle-item:has(input:checked) {
+        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
+      }
+
+      .platform-toggle-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .platform-toggle-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .platform-toggle-icon svg {
+        width: 20px;
+        height: 20px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .platform-toggle-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .platform-toggle-desc {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .toggle-switch {
+        position: relative;
+        width: 44px;
+        height: 24px;
+        flex-shrink: 0;
+      }
+
+      .toggle-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        border-radius: 12px;
+        transition: background 200ms ease;
+      }
+
+      .toggle-slider::before {
+        content: '';
+        position: absolute;
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background: white;
+        border-radius: 50%;
+        transition: transform 200ms ease;
+      }
+
+      .toggle-switch input:checked + .toggle-slider {
+        background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .toggle-switch input:checked + .toggle-slider::before {
+        transform: translateX(20px);
+      }
+
       .actions {
         display: flex;
         justify-content: flex-end;
@@ -536,6 +647,81 @@ export class SzServiceCreateView extends DeesElement {
         </button>
       </div>
 
+      <!-- Platform Services -->
+      <div class="section">
+        <div class="section-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
+            <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+            <line x1="6" y1="6" x2="6.01" y2="6"></line>
+            <line x1="6" y1="18" x2="6.01" y2="18"></line>
+          </svg>
+          Platform Services
+        </div>
+        <div class="form-hint" style="margin-bottom: 12px;">
+          Enable managed infrastructure services for this deployment. Resources are automatically provisioned and connection details injected as environment variables.
+        </div>
+        <div class="platform-toggle-list">
+          <label class="platform-toggle-item">
+            <div class="platform-toggle-info">
+              <div class="platform-toggle-icon">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+              </div>
+              <div>
+                <div class="platform-toggle-name">MongoDB</div>
+                <div class="platform-toggle-desc">Document database with auto-provisioned credentials</div>
+              </div>
+            </div>
+            <div class="toggle-switch">
+              <input
+                type="checkbox"
+                ?checked=${this.enableMongoDB}
+                @change=${(e: Event) => this.enableMongoDB = (e.target as HTMLInputElement).checked}
+              >
+              <span class="toggle-slider"></span>
+            </div>
+          </label>
+          <label class="platform-toggle-item">
+            <div class="platform-toggle-info">
+              <div class="platform-toggle-icon">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9z"/></svg>
+              </div>
+              <div>
+                <div class="platform-toggle-name">S3 Storage (MinIO)</div>
+                <div class="platform-toggle-desc">Object storage bucket with auto-provisioned access keys</div>
+              </div>
+            </div>
+            <div class="toggle-switch">
+              <input
+                type="checkbox"
+                ?checked=${this.enableS3}
+                @change=${(e: Event) => this.enableS3 = (e.target as HTMLInputElement).checked}
+              >
+              <span class="toggle-slider"></span>
+            </div>
+          </label>
+          <label class="platform-toggle-item">
+            <div class="platform-toggle-info">
+              <div class="platform-toggle-icon">
+                <svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="6" height="20"/><rect x="9" y="7" width="6" height="15"/><rect x="16" y="12" width="6" height="10"/></svg>
+              </div>
+              <div>
+                <div class="platform-toggle-name">ClickHouse</div>
+                <div class="platform-toggle-desc">Analytics database with auto-provisioned credentials</div>
+              </div>
+            </div>
+            <div class="toggle-switch">
+              <input
+                type="checkbox"
+                ?checked=${this.enableClickHouse}
+                @change=${(e: Event) => this.enableClickHouse = (e.target as HTMLInputElement).checked}
+              >
+              <span class="toggle-slider"></span>
+            </div>
+          </label>
+        </div>
+      </div>
+
       <!-- Advanced Options Toggle -->
       <button
         class="toggle-advanced ${this.showAdvanced ? 'open' : ''}"
@@ -750,6 +936,9 @@ export class SzServiceCreateView extends DeesElement {
       memoryLimit: this.memoryLimit,
       restartPolicy: this.restartPolicy,
       networkMode: this.networkMode,
+      enableMongoDB: this.enableMongoDB,
+      enableS3: this.enableS3,
+      enableClickHouse: this.enableClickHouse,
     };
 
     this.dispatchEvent(new CustomEvent('create-service', {
@@ -771,5 +960,8 @@ export class SzServiceCreateView extends DeesElement {
     this.restartPolicy = 'always';
     this.networkMode = 'bridge';
     this.showAdvanced = false;
+    this.enableMongoDB = false;
+    this.enableS3 = false;
+    this.enableClickHouse = false;
   }
 }

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

@@ -396,68 +396,6 @@ export class SzServiceDetailView extends DeesElement {
         color: ${cssManager.bdTheme('#18181b', '#fafafa')};
       }
 
-      .logs-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .logs-actions {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-      }
-
-      .stream-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        background: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
-        border: none;
-        border-radius: 4px;
-        font-size: 13px;
-        font-weight: 500;
-        color: white;
-        cursor: pointer;
-      }
-
-      .stream-button.streaming {
-        background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
-      }
-
-      .clear-button {
-        padding: 6px 12px;
-        background: transparent;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 4px;
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        cursor: pointer;
-      }
-
-      .logs-container {
-        padding: 16px;
-        font-family: monospace;
-        font-size: 12px;
-        max-height: 300px;
-        overflow-y: auto;
-        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-      }
-
-      .log-entry {
-        padding: 2px 0;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        white-space: pre-wrap;
-        word-break: break-all;
-      }
-
-      .empty-logs {
-        padding: 24px;
-        text-align: center;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-      }
-
       .tag-badge {
         display: inline-flex;
         padding: 2px 8px;
@@ -621,35 +559,17 @@ export class SzServiceDetailView extends DeesElement {
             </div>
           </div>
 
-          <div class="card">
+          <dees-chart-log
-            <div class="card-header">
+            .label=${'Service Logs'}
-              <div class="logs-header" style="width: 100%;">
+            .logEntries=${this.logs.map(log => ({
-                <div>
+              timestamp: log.timestamp?.includes?.('T') ? log.timestamp : new Date(log.timestamp || Date.now()).toISOString(),
-                  <div class="card-title">Logs</div>
+              level: (log.level || 'info') as 'debug' | 'info' | 'warn' | 'error',
-                  <div class="card-subtitle">Container logs</div>
+              message: log.message,
-                </div>
+            }))}
-                <div class="logs-actions">
+            .autoScroll=${true}
-                  <button class="stream-button ${this.streaming ? 'streaming' : ''}" @click=${() => this.toggleStreaming()}>
+            .maxEntries=${2000}
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+            .showMetrics=${true}
-                      ${this.streaming
+          ></dees-chart-log>
-                        ? html`<rect x="6" y="6" width="12" height="12" rx="1"/>`
-                        : html`<polygon points="5,3 19,12 5,21"/>`
-                      }
-                    </svg>
-                    ${this.streaming ? 'Stop' : 'Stream'}
-                  </button>
-                  <button class="clear-button" @click=${() => this.handleClearLogs()}>Clear logs</button>
-                </div>
-              </div>
-            </div>
-            <div class="logs-container">
-              ${this.logs.length > 0 ? this.logs.map(log => html`
-                <div class="log-entry">${log.timestamp} ${log.message}</div>
-              `) : html`
-                <div class="empty-logs">Click "Stream" to start live log streaming</div>
-              `}
-            </div>
-          </div>
         </div>
 
         <div class="sidebar">

ts_web/pages/sz-demo-app-shell.ts

@@ -138,6 +138,12 @@ export class SzDemoAppShell extends DeesElement {
           iconName: 'lucide:Mail',
           content: 'sz-demo-view-mta',
         },
+        {
+          id: 'routes',
+          name: 'Routes',
+          iconName: 'lucide:Route',
+          content: 'sz-demo-view-routes',
+        },
         {
           id: 'settings',
           name: 'Settings',
@@ -153,7 +159,7 @@ export class SzDemoAppShell extends DeesElement {
           },
           {
             name: 'Infrastructure',
-            views: ['services', 'network', 'registries', 'mta'],
+            views: ['services', 'network', 'registries', 'mta', 'routes'],
           },
           {
             name: 'Administration',