v2.6.1

fix(platform-service-detail-view): replace custom service log markup with dees-chart-log in the platform service detail view
v2.6.0
2026-03-16 14:19:49 +00:00 · 2026-03-16 14:19:49 +00:00 · 2026-03-16 11:44:44 +00:00 · 2026-03-16 11:44:44 +00:00 · 2026-02-23 21:23:35 +00:00 · 2026-02-23 21:23:35 +00:00
9 changed files with 1078 additions and 76 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,36 @@
 # Changelog

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

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@serve.zone/catalog",
-  "version": "2.3.0",
+  "version": "2.6.1",
  "private": false,
  "description": "UI component catalog for serve.zone",
  "main": "dist_ts_web/index.js",
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/catalog',
-  version: '2.3.0',
+  version: '2.6.1',
  description: 'UI component catalog for serve.zone'
 }
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -53,6 +53,10 @@ export * from './sz-mta-detail-view.js';
 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';
@@ -62,3 +66,4 @@ 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';
--- a/ts_web/elements/sz-config-overview.ts
+++ b/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>
+    `;
+  }
+}
--- a/ts_web/elements/sz-config-section.ts
+++ b/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';
+  }
+}
--- a/ts_web/elements/sz-demo-view-config.ts
+++ b/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>
+    `;
+  }
+}
--- a/ts_web/elements/sz-platform-service-detail-view.ts
+++ b/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,30 +587,17 @@ export class SzPlatformServiceDetailView extends DeesElement {
        ` : ''}

        <!-- Logs -->
-        <div class="section full-width">
-          <div class="section-header">
-            <div class="section-title">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="4 17 10 11 4 5"></polyline>
-                <line x1="12" y1="19" x2="20" y2="19"></line>
-              </svg>
-              Logs
-            </div>
-          </div>
-          <div class="section-content">
-            <div class="log-container">
-              ${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>
+        <dees-chart-log
+          .label=${'Service Logs'}
+          .logEntries=${this.logs.map(log => ({
+            timestamp: log.timestamp.includes('T') ? log.timestamp : new Date(log.timestamp).toISOString(),
+            level: log.level as 'debug' | 'info' | 'warn' | 'error',
+            message: log.message,
+          }))}
+          .autoScroll=${true}
+          .maxEntries=${2000}
+          .showMetrics=${true}
+        ></dees-chart-log>
      </div>
    `;
  }
--- a/ts_web/elements/sz-service-create-view.ts
+++ b/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;
  }
 }
Author	SHA1	Message	Date
Juergen Kunz	53b730914c	v2.6.1	2026-03-16 14:19:49 +00:00
Juergen Kunz	51b4312cc0	fix(platform-service-detail-view): replace custom service log markup with dees-chart-log in the platform service detail view	2026-03-16 14:19:49 +00:00
Juergen Kunz	668839887f	v2.6.0	2026-03-16 11:44:44 +00:00
Juergen Kunz	567551b544	feat(service-create-view): add platform service toggles for MongoDB, S3, and ClickHouse provisioning	2026-03-16 11:44:44 +00:00
Juergen Kunz	d5c265860c	v2.5.0	2026-02-23 21:23:35 +00:00
Juergen Kunz	0f6bfe45aa	feat(sz-config-section): add header action buttons to sz-config-section allowing configurable actions/events	2026-02-23 21:23:35 +00:00
Juergen Kunz	33a97b410e	v2.4.0	2026-02-23 21:07:26 +00:00
Juergen Kunz	bd6bce04c9	feat(elements): add configuration overview and section components with demo view and index exports	2026-02-23 21:07:26 +00:00