v2.12.0

.smartconfig.json

@@ -2,6 +2,17 @@
   "@git.zone/tswatch": {
     "preset": "element"
   },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts_web/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild",
+        "production": true
+      }
+    ]
+  },
   "@git.zone/cli": {
     "projectType": "wcc",
     "module": {

changelog.md

@@ -1,5 +1,78 @@
 # Changelog
 
+## 2026-04-07 - 2.12.0 - feat(elements)
+standardize dashboard and detail views on dees tile and stats grid components
+
+- replace custom stat cards with dees-statsgrid across status and network views and remove the obsolete sz-stat-card element
+- migrate multiple detail and settings views to dees-tile headers and footers for consistent action placement and styling
+- extend sz-config-section with footer links and actions plus improved collapsed tile behavior
+
+## 2026-04-05 - 2.11.2 - fix(route-card)
+align route card with source profile metadata and vpnOnly route configuration
+
+- rename linked route metadata fields from security profile to source profile in rendering and feature detection
+- simplify VPN display logic to use the boolean vpnOnly flag instead of the previous nested VPN configuration object
+
+## 2026-04-04 - 2.11.1 - fix(route-card)
+clarify VPN mode badge labels in route cards
+
+- Renames VPN badge text from "VPN Only"/"VPN + Public" to "VPN Mandatory"/"VPN Voluntary" for clearer route mode descriptions.
+
+## 2026-04-02 - 2.11.0 - feat(route-ui)
+add VPN details and conditional card actions to route cards
+
+- Extend route card data and rendering to display VPN access mode and allowed client tags.
+- Add optional Edit and Delete action buttons that emit route-edit and route-delete events.
+- Allow the route list view to control action visibility per route via a showActionsFilter callback.
+- Include VPN as a visible route feature indicator in the card summary.
+
+## 2026-04-02 - 2.10.0 - feat(docs)
+document newly available catalog components and updated build configuration details
+
+- Update component counts and add documentation for App Store, Routes, MTA/Email, and Configuration views
+- Expand the README with new component tables and exported TypeScript types
+- Refresh build notes to reference .smartconfig.json and the renamed config file
+
+## 2026-04-02 - 2.9.1 - fix(build)
+migrate build configuration to .smartconfig and update toolchain dependencies
+
+- replace npmextra.json with .smartconfig.json and add tsbundle bundle configuration
+- simplify the build script to use the centralized tsbundle configuration
+- update build and UI package dependencies and switch TypeScript to explicit node types
+
+## 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
 

license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Task Venture Capital GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "2.6.0",
+  "version": "2.12.0",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",
@@ -8,35 +8,34 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
     "watch": "tswatch"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-catalog": "^3.43.0",
+    "@design.estate/dees-catalog": "^3.67.1",
-    "@design.estate/dees-domtools": "^2.3.8",
+    "@design.estate/dees-domtools": "^2.5.4",
-    "@design.estate/dees-element": "^2.1.6",
+    "@design.estate/dees-element": "^2.2.4",
     "@design.estate/dees-wcctools": "^3.8.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.1.2",
+    "@git.zone/tsbuild": "^4.4.0",
-    "@git.zone/tsbundle": "^2.8.3",
+    "@git.zone/tsbundle": "^2.10.0",
-    "@git.zone/tsrun": "^2.0.1",
+    "@git.zone/tsrun": "^2.0.2",
-    "@git.zone/tstest": "^3.1.8",
+    "@git.zone/tstest": "^3.6.3",
-    "@git.zone/tswatch": "^3.1.0",
+    "@git.zone/tswatch": "^3.3.2",
-    "@push.rocks/projectinfo": "^5.0.2",
+    "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^25.3.0"
+    "@types/node": "^25.5.2"
   },
   "files": [
-    "ts/**/*",
     "ts_web/**/*",
     "dist/**/*",
     "dist_*/**/*",
     "dist_ts/**/*",
     "dist_ts_web/**/*",
     "assets/**/*",
-    "npmextra.json",
+    ".smartconfig.json",
     "readme.md"
   ],
   "browserslist": [

readme.hints.md

@@ -2,7 +2,7 @@
 
 ## Project Structure
 - `html/index.ts` - WccTools setup with sections for Pages and Elements
-- `ts_web/elements/` - All web components (27 elements + 6 demo-view wrappers)
+- `ts_web/elements/` - All web components (33 elements + 9 demo-view wrappers)
 - `ts_web/elements/index.ts` - Barrel export for all element components
 - `ts_web/pages/` - Page components
 
@@ -16,13 +16,18 @@
 ## Demo Groups
 | Group | Elements |
 |-------|----------|
-| Dashboard | sz-dashboard-view, sz-stat-card, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
+| Dashboard | sz-dashboard-view, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
 | Dashboard Grids | sz-status-grid-cluster, sz-status-grid-services, sz-status-grid-network, sz-status-grid-infra |
 | Platform | sz-platform-services-card, sz-platform-service-detail-view |
 | Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view |
+| Routes | sz-route-list-view, sz-route-card |
 | Services | sz-services-list-view, sz-services-backups-view, sz-service-detail-view, sz-service-create-view |
+| App Store | sz-app-store-view |
+| MTA / Email | sz-mta-list-view, sz-mta-detail-view |
+| Configuration | sz-config-overview, sz-config-section |
 | Auth & Settings | sz-login-view, sz-tokens-view, sz-settings-view, sz-registry-advertisement, sz-registry-external-view |
 
 ## Build
-- `pnpm run build` - tsbuild tsfolders + tsbundle element --production
+- `pnpm run build` - tsbuild tsfolders + tsbundle (reads from .smartconfig.json)
 - `pnpm run watch` - starts wcctools dev server
+- Config file: `.smartconfig.json` (renamed from npmextra.json)

readme.md

@@ -14,15 +14,19 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 
 ## 🚀 What It Does
 
-`@serve.zone/catalog` provides **30+ production-ready web components** covering every aspect of server management:
+`@serve.zone/catalog` provides **34 production-ready web components** covering every aspect of server management:
 
 - 📊 **Dashboard** — Real-time cluster overview, resource usage, traffic metrics, quick actions
 - 🐳 **Services** — Docker container management, deployment, logs, live stats, backups, and an integrated IDE workspace
+- 🛒 **App Store** — Browse and deploy pre-configured application templates (WordPress, Gitea, etc.)
 - 🌐 **Network** — Reverse proxy configuration, DNS record management, domain & SSL certificate monitoring
+- 🔀 **Routes** — SmartProxy route configuration, match criteria, TLS modes, security profiles, forwarding targets
+- 📧 **MTA / Email** — Inbound and outbound email management, SMTP transaction logs, authentication results
 - 📦 **Registries** — Container registry management (onebox + external registries like Docker Hub, GHCR, ECR)
 - 🔑 **Auth** — Login view, API token management (global + CI tokens)
 - ⚙️ **Settings** — Appearance, Cloudflare integration, SSL/TLS config, network settings, account management
 - 🏗️ **Platform Services** — MongoDB, MinIO, ClickHouse, Redis, Caddy monitoring and control
+- 📋 **Configuration** — Read-only overview of the running server configuration with collapsible sections
 
 Every component supports **light and dark themes** out of the box and communicates via standard `CustomEvent` dispatching.
 
@@ -85,6 +89,12 @@ import '@serve.zone/catalog';
 | `SzServiceCreateView` | `<sz-service-create-view>` | Service deployment form — image, ports, env vars, volumes, resource limits |
 | `SzServicesBackupsView` | `<sz-services-backups-view>` | Backup schedule and backup history management |
 
+### App Store
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzAppStoreView` | `<sz-app-store-view>` | App marketplace for deploying pre-configured templates (WordPress, Gitea, etc.) with category filtering |
+
 ### Platform Services
 
 | Component | Tag | Description |
@@ -104,6 +114,20 @@ import '@serve.zone/catalog';
 | `SzDnsSslCard` | `<sz-dns-ssl-card>` | Cloudflare DNS and ACME config status |
 | `SzCertificatesCard` | `<sz-certificates-card>` | Certificate status counts — valid, expiring, expired |
 
+### Routes
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzRouteListView` | `<sz-route-list-view>` | Route configuration list with type filtering (HTTPS, email, DNS, etc.) |
+| `SzRouteCard` | `<sz-route-card>` | Single route card — match criteria, action type, TLS mode, targets, security profile |
+
+### MTA / Email
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzMtaListView` | `<sz-mta-list-view>` | Email management — inbound/outbound messages with status badges and filtering |
+| `SzMtaDetailView` | `<sz-mta-detail-view>` | Email detail — SMTP transaction log, TLS info, SPF/DKIM/DMARC results, headers, body |
+
 ### Registries
 
 | Component | Tag | Description |
@@ -119,6 +143,13 @@ import '@serve.zone/catalog';
 | `SzTokensView` | `<sz-tokens-view>` | API token management — global and CI tokens with copy/regenerate/delete |
 | `SzSettingsView` | `<sz-settings-view>` | Full settings panel — appearance, Cloudflare, SSL/TLS, network, account |
 
+### Configuration
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SzConfigOverview` | `<sz-config-overview>` | Top-level configuration overview with informational banner |
+| `SzConfigSection` | `<sz-config-section>` | Collapsible config section — icon, enabled/disabled badge, key-value fields, action buttons |
+
 ## 🏗️ Architecture
 
 ### Component Pattern
@@ -186,8 +217,20 @@ import type { IServiceDetail, IServiceStats, ILogEntry, IServiceBackup } from '@
 // Network
 import type { IDomainDetail, ICertificateDetail, IDnsRecord, ITrafficTarget } from '@serve.zone/catalog';
 
+// Routes
+import type { IRouteConfig, IRouteMatch, IRouteAction, IRouteTls, IRouteSecurity } from '@serve.zone/catalog';
+
+// MTA / Email
+import type { IEmail, IEmailDetail, ISmtpLogEntry, IConnectionInfo, IAuthenticationResults } from '@serve.zone/catalog';
+
+// Configuration
+import type { IConfigField, IConfigSectionAction } from '@serve.zone/catalog';
+
 // Settings & Auth
 import type { ISettings, IToken, IExternalRegistry } from '@serve.zone/catalog';
+
+// App Store
+import type { IAppTemplate } from '@serve.zone/catalog';
 ```
 
 ## 🛠️ Development
@@ -210,7 +253,7 @@ The **wcctools dev server** provides an interactive dashboard where every compon
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 

ts_web/00_commitinfo_data.ts

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

ts_web/elements/index.ts

@@ -1,5 +1,4 @@
 // Dashboard Cards
-export * from './sz-stat-card.js';
 export * from './sz-resource-usage-card.js';
 export * from './sz-traffic-card.js';
 export * from './sz-platform-services-card.js';
@@ -28,6 +27,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';

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-section.ts

@@ -24,6 +24,13 @@ export interface IConfigSectionAction {
   detail?: any;
 }
 
+export interface IConfigSectionLink {
+  label: string;
+  href: string;
+  icon?: string;
+  external?: boolean;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'sz-config-section': SzConfigSection;
@@ -46,6 +53,12 @@ export class SzConfigSection extends DeesElement {
         { key: 'Auto Renew', value: true, type: 'boolean' },
         { key: 'Renew Threshold', value: '30 days' },
       ] as IConfigField[]}
+      .links=${[
+        { label: 'Docs', href: 'https://code.foss.global/serve.zone/smartproxy', icon: 'lucide:bookOpen', external: true },
+      ] as IConfigSectionLink[]}
+      .actions=${[
+        { label: 'Configure', icon: 'lucide:settings', event: 'configure' },
+      ] as IConfigSectionAction[]}
     ></sz-config-section>
     <sz-config-section
       title="Email Server"
@@ -57,6 +70,13 @@ export class SzConfigSection extends DeesElement {
         { key: 'Hostname', value: null },
         { key: 'Domains', value: ['example.com', 'mail.example.com'], type: 'pills' },
       ] as IConfigField[]}
+      .links=${[
+        { label: 'Docs', href: 'https://code.foss.global/serve.zone/smartmta', icon: 'lucide:bookOpen', external: true },
+        { label: 'Source', href: 'https://code.foss.global/serve.zone/smartmta', icon: 'lucide:github', external: true },
+      ] as IConfigSectionLink[]}
+      .actions=${[
+        { label: 'Enable', icon: 'lucide:power', event: 'enable' },
+      ] as IConfigSectionAction[]}
     ></sz-config-section>
     <sz-config-section
       title="DNS Server"
@@ -68,6 +88,9 @@ export class SzConfigSection extends DeesElement {
         { key: 'Port', value: 53 },
         { key: 'NS Domains', value: ['ns1.example.com', 'ns2.example.com'], type: 'pills' },
       ] as IConfigField[]}
+      .links=${[
+        { label: 'Getting Started', href: 'https://docs.example.com/dns', icon: 'lucide:bookOpen', external: true },
+      ] as IConfigSectionLink[]}
     ></sz-config-section>
   `;
 
@@ -91,6 +114,9 @@ export class SzConfigSection extends DeesElement {
   @property({ type: Array })
   public accessor actions: IConfigSectionAction[] = [];
 
+  @property({ type: Array })
+  public accessor links: IConfigSectionLink[] = [];
+
   @property({ type: Boolean })
   public accessor collapsible: boolean = false;
 
@@ -108,20 +134,25 @@ export class SzConfigSection extends DeesElement {
         margin-bottom: 16px;
       }
 
-      .section {
+      dees-tile {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        display: block;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+      }
-        border-radius: 8px;
+
-        overflow: hidden;
+      :host([collapsed]) dees-tile::part(content) {
+        display: none;
+      }
+
+      :host([collapsed]) dees-tile::part(footer) {
+        display: none;
       }
 
       .section-header {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        padding: 10px 16px;
-        padding: 14px 20px;
+        gap: 12px;
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        width: 100%;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        box-sizing: border-box;
         cursor: default;
         user-select: none;
       }
@@ -131,30 +162,31 @@ export class SzConfigSection extends DeesElement {
       }
 
       :host([collapsible]) .section-header:hover {
-        background: ${cssManager.bdTheme('#ebebed', '#1c1c1f')};
+        background: var(--dees-color-hover);
       }
 
       .header-left {
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 10px;
         min-width: 0;
+        flex: 1;
       }
 
       .header-icon {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 36px;
+        width: 28px;
-        height: 36px;
+        height: 28px;
-        background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        background: var(--dees-color-border-default);
-        border-radius: 8px;
+        border-radius: 6px;
         flex-shrink: 0;
       }
 
       .header-icon dees-icon {
-        font-size: 18px;
+        font-size: 14px;
-        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
       }
 
       .header-text {
@@ -162,15 +194,17 @@ export class SzConfigSection extends DeesElement {
       }
 
       .header-title {
-        font-size: 15px;
+        font-size: 13px;
-        font-weight: 600;
+        font-weight: 500;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
         line-height: 1.3;
       }
 
       .header-subtitle {
-        font-size: 12px;
+        font-size: 11px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
         line-height: 1.3;
         margin-top: 1px;
       }
@@ -236,30 +270,60 @@ export class SzConfigSection extends DeesElement {
         background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
       }
 
-      /* Action buttons */
+      /* Footer action buttons — canonical dees-modal / dees-tile pattern */
-      .header-action {
+      .section-footer {
-        display: inline-flex;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
         align-items: center;
-        gap: 5px;
+        gap: 0;
-        padding: 4px 12px;
+        height: 36px;
-        border-radius: 6px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
         font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
         background: transparent;
         border: none;
-        cursor: pointer;
+        border-left: 1px solid var(--dees-color-border-subtle);
-        transition: background 150ms ease;
+        color: var(--dees-color-text-muted);
         white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
         font-family: inherit;
+        text-decoration: none;
       }
 
-      .header-action:hover {
+      .tile-button:first-child {
-        background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
+        border-left: none;
       }
 
-      .header-action dees-icon {
+      .tile-button:hover {
-        font-size: 14px;
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .tile-button dees-icon {
+        font-size: 12px;
       }
 
       /* Chevron */
@@ -274,8 +338,8 @@ export class SzConfigSection extends DeesElement {
       }
 
       .chevron dees-icon {
-        font-size: 16px;
+        font-size: 14px;
-        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        color: var(--dees-color-text-muted);
       }
 
       /* Content */
@@ -283,10 +347,6 @@ export class SzConfigSection extends DeesElement {
         padding: 0;
       }
 
-      .section-content.collapsed {
-        display: none;
-      }
-
       /* Field rows */
       .field-row {
         display: flex;
@@ -439,6 +499,13 @@ export class SzConfigSection extends DeesElement {
     }
   }
 
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('isCollapsed')) {
+      this.toggleAttribute('collapsed', this.isCollapsed);
+    }
+  }
+
   public render(): TemplateResult {
     const statusLabels: Record<string, string> = {
       'enabled': 'Enabled',
@@ -448,8 +515,9 @@ export class SzConfigSection extends DeesElement {
     };
 
     return html`
-      <div class="section">
+      <dees-tile>
         <div
+          slot="header"
           class="section-header"
           @click=${() => {
             if (this.collapsible) {
@@ -475,8 +543,36 @@ export class SzConfigSection extends DeesElement {
                 ${statusLabels[this.status] || this.status}
               </span>
             ` : ''}
+            ${this.collapsible ? html`
+              <span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
+                <dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
+              </span>
+            ` : ''}
+          </div>
+        </div>
+        <div class="section-content">
+          ${this.fields.map(field => this.renderField(field))}
+          <div class="slot-content">
+            <slot></slot>
+          </div>
+        </div>
+        ${this.links.length > 0 || this.actions.length > 0 ? html`
+          <div slot="footer" class="section-footer">
+            ${this.links.map(link => html`
+              <a
+                class="tile-button"
+                href=${link.href}
+                target=${link.external ? '_blank' : '_self'}
+                rel=${link.external ? 'noopener noreferrer' : ''}
+                @click=${(e: Event) => e.stopPropagation()}
+              >
+                ${link.icon ? html`<dees-icon .icon=${link.icon}></dees-icon>` : ''}
+                ${link.label}
+                ${link.external ? html`<dees-icon .icon=${'lucide:externalLink'}></dees-icon>` : ''}
+              </a>
+            `)}
             ${this.actions.map(action => html`
-              <button class="header-action" @click=${(e: Event) => {
+              <button class="tile-button primary" @click=${(e: Event) => {
                 e.stopPropagation();
                 this.dispatchEvent(new CustomEvent(action.event || 'action', {
                   detail: action.detail || { label: action.label },
@@ -488,20 +584,9 @@ export class SzConfigSection extends DeesElement {
                 ${action.label}
               </button>
             `)}
-            ${this.collapsible ? html`
+          </div>
-              <span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
-                <dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
-              </span>
         ` : ''}
-          </div>
+      </dees-tile>
-        </div>
-        <div class="section-content ${this.isCollapsed ? 'collapsed' : ''}">
-          ${this.fields.map(field => this.renderField(field))}
-          <div class="slot-content">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
     `;
   }
 

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

@@ -229,57 +229,87 @@ export class SzDomainDetailView extends DeesElement {
         }
       }
 
-      .section {
+      dees-tile.full-width {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .section.full-width {
         grid-column: 1 / -1;
       }
 
       .section-header {
+        height: 36px;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        padding: 14px 16px;
+        padding: 0 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        width: 100%;
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        box-sizing: border-box;
       }
 
       .section-title {
-        font-size: 14px;
+        flex: 1;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
         display: flex;
         align-items: center;
         gap: 8px;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
       }
 
       .section-title svg {
-        width: 16px;
+        width: 14px;
-        height: 16px;
+        height: 14px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        flex-shrink: 0;
+        color: var(--dees-color-text-secondary);
       }
 
-      .section-action {
+      .section-footer {
-        padding: 6px 10px;
+        display: flex;
-        background: transparent;
+        flex-direction: row;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        justify-content: flex-end;
-        border-radius: 4px;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
         font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-weight: 500;
         cursor: pointer;
-        transition: all 200ms ease;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
       }
 
-      .section-action:hover {
+      .tile-button:first-child {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border-left: none;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
       }
 
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+
       .section-content {
         padding: 16px;
       }
@@ -582,8 +612,8 @@ export class SzDomainDetailView extends DeesElement {
 
       <div class="grid">
         <!-- Certificate Section -->
-        <div class="section">
+        <dees-tile>
-          <div class="section-header">
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
@@ -591,9 +621,6 @@ export class SzDomainDetailView extends DeesElement {
               </svg>
               SSL Certificate
             </div>
-            ${this.certificate ? html`
-              <button class="section-action" @click=${() => this.handleRenewCertificate()}>Renew</button>
-            ` : ''}
           </div>
           <div class="section-content">
             ${this.certificate ? html`
@@ -652,11 +679,16 @@ export class SzDomainDetailView extends DeesElement {
               <div class="empty-state">No certificate configured</div>
             `}
           </div>
+          ${this.certificate ? html`
+            <div slot="footer" class="section-footer">
+              <button class="tile-button primary" @click=${() => this.handleRenewCertificate()}>Renew</button>
             </div>
+          ` : ''}
+        </dees-tile>
 
         <!-- Proxy Routes Section -->
-        <div class="section">
+        <dees-tile>
-          <div class="section-header">
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <polyline points="16 3 21 3 21 8"></polyline>
@@ -679,11 +711,11 @@ export class SzDomainDetailView extends DeesElement {
               <div class="empty-state">No proxy routes configured</div>
             `}
           </div>
-        </div>
+        </dees-tile>
 
         <!-- DNS Records Section -->
-        <div class="section full-width">
+        <dees-tile class="full-width">
-          <div class="section-header">
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <circle cx="12" cy="12" r="10"></circle>
@@ -692,13 +724,6 @@ export class SzDomainDetailView extends DeesElement {
               </svg>
               DNS Records
             </div>
-            <button class="section-action" @click=${() => this.handleAddDnsRecord()}>
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-              Add Record
-            </button>
           </div>
           <div class="section-content">
             ${this.dnsRecords.length > 0 ? html`
@@ -737,7 +762,16 @@ export class SzDomainDetailView extends DeesElement {
               <div class="empty-state">No DNS records configured</div>
             `}
           </div>
+          <div slot="footer" class="section-footer">
+            <button class="tile-button primary" @click=${() => this.handleAddDnsRecord()}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+              </svg>
+              Add Record
+            </button>
           </div>
+        </dees-tile>
       </div>
     `;
   }

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

@@ -256,31 +256,89 @@ export class SzMtaDetailView extends DeesElement {
         gap: 24px;
       }
 
-      .card {
+      .card-header {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        height: 36px;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        display: flex;
-        border-radius: 8px;
+        align-items: center;
-        overflow: hidden;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .card-header {
+      .card-heading {
+        flex: 1;
         display: flex;
-        justify-content: space-between;
+        align-items: baseline;
-        align-items: center;
+        gap: 8px;
-        padding: 16px;
+        min-width: 0;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
       }
 
       .card-title {
-        font-size: 16px;
+        font-weight: 500;
-        font-weight: 600;
+        font-size: 13px;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .card-subtitle {
-        font-size: 13px;
+        font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
-        margin-top: 2px;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .card-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       .card-content {
@@ -451,37 +509,13 @@ export class SzMtaDetailView extends DeesElement {
         color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
       }
 
-      /* Copy button */
+      /* SMTP metadata banner — sits inside content, above the log */
-      .smtp-copy-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 150ms ease;
-      }
-
-      .smtp-copy-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
-      }
-
-      /* Header subtitle enhancements */
       .smtp-header-subtitle {
-        font-size: 13px;
+        padding: 10px 16px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-size: 12px;
-        margin-top: 2px;
+        color: var(--dees-color-text-muted);
-        display: flex;
+        border-bottom: 1px solid var(--dees-color-border-subtle);
-        align-items: center;
+        font-family: monospace;
-        gap: 8px;
-        flex-wrap: wrap;
       }
 
       .smtp-direction-badge {
@@ -578,7 +612,7 @@ export class SzMtaDetailView extends DeesElement {
         color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
       }
 
-      .rejection-card {
+      dees-tile.rejection-card::part(outer) {
         border-color: ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.3)')};
       }
 
@@ -646,9 +680,11 @@ export class SzMtaDetailView extends DeesElement {
       <div class="content">
         <div class="main-content">
           <!-- Email Metadata -->
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div class="card-title">Email Metadata</div>
+              <div class="card-heading">
+                <span class="card-title">Email Metadata</span>
+              </div>
             </div>
             <div class="card-content">
               <div class="detail-list">
@@ -684,49 +720,53 @@ export class SzMtaDetailView extends DeesElement {
                 </div>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
           <!-- SMTP Transaction Log -->
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div>
+              <div class="card-heading">
-                <div class="card-title">SMTP Transaction Log</div>
+                <span class="card-title">SMTP Transaction Log</span>
-                <div class="smtp-header-subtitle">
                 <span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
-                  <span>${email.direction === 'outbound'
+              </div>
+            </div>
+            <div class="smtp-header-subtitle">
+              ${email.direction === 'outbound'
                 ? `${email.connectionInfo.sourceHostname} → ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}`
                 : `${email.connectionInfo.sourceIp} → ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`
-                  }</span>
+              }
             </div>
-              </div>
+            ${this.renderSmtpLog(email)}
-              <button class="smtp-copy-button" @click=${() => this.copySmtpLog()}>
+            <div slot="footer" class="card-footer">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <button class="tile-button" @click=${() => this.copySmtpLog()}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                   <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                 </svg>
                 Copy Log
               </button>
             </div>
-            ${this.renderSmtpLog(email)}
+          </dees-tile>
-          </div>
 
           <!-- Email Body -->
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div>
+              <div class="card-heading">
-                <div class="card-title">Email Body (Escaped)</div>
+                <span class="card-title">Email Body (Escaped)</span>
-                <div class="card-subtitle">Raw content — HTML is not rendered</div>
+                <span class="card-subtitle">Raw content — HTML is not rendered</span>
               </div>
             </div>
             <pre class="email-body-container">${email.body}</pre>
-          </div>
+          </dees-tile>
         </div>
 
         <div class="sidebar">
           <!-- Connection Info -->
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div class="card-title">Connection Info</div>
+              <div class="card-heading">
+                <span class="card-title">Connection Info</span>
+              </div>
             </div>
             <div class="card-content">
               <div class="detail-list">
@@ -772,12 +812,14 @@ export class SzMtaDetailView extends DeesElement {
                 ` : ''}
               </div>
             </div>
-          </div>
+          </dees-tile>
 
           <!-- Authentication Results -->
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div class="card-title">Authentication Results</div>
+              <div class="card-heading">
+                <span class="card-title">Authentication Results</span>
+              </div>
             </div>
             <div class="card-content">
               <div class="auth-row">
@@ -802,13 +844,15 @@ export class SzMtaDetailView extends DeesElement {
                 <span class="auth-badge ${email.authenticationResults.dmarc}">${email.authenticationResults.dmarc}</span>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
           <!-- Rejection Details (conditional) -->
           ${email.status === 'rejected' || email.status === 'bounced' ? html`
-            <div class="card rejection-card">
+            <dees-tile class="rejection-card">
-              <div class="card-header">
+              <div slot="header" class="card-header">
-                <div class="card-title">Rejection Details</div>
+                <div class="card-heading">
+                  <span class="card-title">Rejection Details</span>
+                </div>
               </div>
               <div class="card-content">
                 ${email.rejectionReason ? html`
@@ -820,7 +864,7 @@ export class SzMtaDetailView extends DeesElement {
                   <div class="rejection-text">${email.bounceMessage}</div>
                 ` : ''}
               </div>
-            </div>
+            </dees-tile>
           ` : ''}
         </div>
       </div>

ts_web/elements/sz-network-domains-view.ts

@@ -7,8 +7,7 @@ import {
   property,
   type TemplateResult,
 } from '@design.estate/dees-element';
-
+import type { IStatsTile } from '@design.estate/dees-catalog';
-import './sz-stat-card.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -91,19 +90,11 @@ export class SzNetworkDomainsView extends DeesElement {
         border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
       }
 
-      .stats-grid {
+      dees-statsgrid {
-        display: grid;
+        display: block;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
         margin-bottom: 24px;
       }
 
-      @media (min-width: 768px) {
-        .stats-grid {
-          grid-template-columns: repeat(4, 1fr);
-        }
-      }
-
       .table-container {
         background: ${cssManager.bdTheme('#ffffff', '#09090b')};
         border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
@@ -205,6 +196,42 @@ export class SzNetworkDomainsView extends DeesElement {
     `,
   ];
 
+  private get tiles(): IStatsTile[] {
+    return [
+      {
+        id: 'total',
+        title: 'Total Domains',
+        value: this.stats.total,
+        type: 'number',
+        icon: 'lucide:globe',
+      },
+      {
+        id: 'valid',
+        title: 'Valid Certificates',
+        value: this.stats.valid,
+        type: 'number',
+        icon: 'lucide:shieldCheck',
+        color: '#22c55e',
+      },
+      {
+        id: 'expiring',
+        title: 'Expiring Soon',
+        value: this.stats.expiring,
+        type: 'number',
+        icon: 'lucide:shieldAlert',
+        color: this.stats.expiring > 0 ? '#f59e0b' : undefined,
+      },
+      {
+        id: 'expired',
+        title: 'Expired/Pending',
+        value: this.stats.expired,
+        type: 'number',
+        icon: 'lucide:circleOff',
+        color: this.stats.expired > 0 ? '#ef4444' : undefined,
+      },
+    ];
+  }
+
   public render(): TemplateResult {
     return html`
       <div class="header">
@@ -212,31 +239,10 @@ export class SzNetworkDomainsView extends DeesElement {
         <button class="sync-button" @click=${() => this.handleSync()}>Sync Cloudflare</button>
       </div>
 
-      <div class="stats-grid">
+      <dees-statsgrid
-        <sz-stat-card
+        .tiles=${this.tiles}
-          label="Total Domains"
+        .minTileWidth=${200}
-          value="${this.stats.total}"
+      ></dees-statsgrid>
-          icon="server"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Valid Certificates"
-          value="${this.stats.valid}"
-          icon="check"
-          variant="success"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Expiring Soon"
-          value="${this.stats.expiring}"
-          icon="stop"
-          variant="${this.stats.expiring > 0 ? 'warning' : 'default'}"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Expired/Pending"
-          value="${this.stats.expired}"
-          icon="stop"
-          variant="${this.stats.expired > 0 ? 'error' : 'default'}"
-        ></sz-stat-card>
-      </div>
 
       <div class="table-container">
         <div class="table-header">

ts_web/elements/sz-network-proxy-view.ts

@@ -7,8 +7,7 @@ import {
   property,
   type TemplateResult,
 } from '@design.estate/dees-element';
-
+import type { IStatsTile } from '@design.estate/dees-catalog';
-import './sz-stat-card.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -113,42 +112,107 @@ export class SzNetworkProxyView extends DeesElement {
         background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
       }
 
-      .stats-grid {
+      dees-statsgrid {
-        display: grid;
+        display: block;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
         margin-bottom: 24px;
       }
 
-      @media (min-width: 768px) {
+      dees-tile {
-        .stats-grid {
+        display: block;
-          grid-template-columns: repeat(4, 1fr);
-        }
-      }
-
-      .section {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
         margin-bottom: 24px;
-        overflow: hidden;
       }
 
       .section-header {
-        padding: 16px;
+        height: 36px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .section-heading {
+        flex: 1;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .section-title {
-        font-size: 16px;
+        font-weight: 500;
-        font-weight: 600;
+        font-size: 13px;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .section-subtitle {
-        font-size: 13px;
+        font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
-        margin-top: 2px;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .section-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .tile-button.danger {
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .tile-button.danger:hover {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
       }
 
       .table-header {
@@ -234,61 +298,6 @@ export class SzNetworkProxyView extends DeesElement {
         color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
       }
 
-      .logs-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-      }
-
-      .logs-actions {
-        display: flex;
-        gap: 8px;
-      }
-
-      .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;
-        transition: all 200ms ease;
-      }
-
-      .stream-button:hover {
-        background: ${cssManager.bdTheme('#1d4ed8', '#2563eb')};
-      }
-
-      .stream-button.streaming {
-        background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
-      }
-
-      .stream-button.streaming:hover {
-        background: ${cssManager.bdTheme('#b91c1c', '#dc2626')};
-      }
-
-      .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;
-        transition: all 200ms ease;
-      }
-
-      .clear-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-      }
-
       .logs-container {
         padding: 16px;
         font-family: monospace;
@@ -336,41 +345,57 @@ export class SzNetworkProxyView extends DeesElement {
     `,
   ];
 
+  private get tiles(): IStatsTile[] {
+    return [
+      {
+        id: 'proxy-status',
+        title: 'Proxy Status',
+        value: this.proxyStatus === 'running' ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:server',
+        color: this.proxyStatus === 'running' ? '#22c55e' : '#ef4444',
+      },
+      {
+        id: 'routes',
+        title: 'Routes',
+        value: this.routeCount,
+        type: 'number',
+        icon: 'lucide:server',
+      },
+      {
+        id: 'certificates',
+        title: 'Certificates',
+        value: this.certificateCount,
+        type: 'number',
+        icon: 'lucide:check',
+      },
+      {
+        id: 'targets',
+        title: 'Targets',
+        value: this.targetCount,
+        type: 'number',
+        icon: 'lucide:server',
+      },
+    ];
+  }
+
   public render(): TemplateResult {
     return html`
       <div class="actions">
         <button class="refresh-button" @click=${() => this.handleRefresh()}>Refresh</button>
       </div>
 
-      <div class="stats-grid">
+      <dees-statsgrid
-        <sz-stat-card
+        .tiles=${this.tiles}
-          label="Proxy Status"
+        .minTileWidth=${200}
-          value="${this.proxyStatus === 'running' ? 'Running' : 'Stopped'}"
+      ></dees-statsgrid>
-          icon="server"
-          variant="${this.proxyStatus === 'running' ? 'success' : 'error'}"
-          valueBadge
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Routes"
-          value="${this.routeCount}"
-          icon="server"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Certificates"
-          value="${this.certificateCount}"
-          icon="check"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Targets"
-          value="${this.targetCount}"
-          icon="server"
-        ></sz-stat-card>
-      </div>
 
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-title">Traffic Targets</div>
+          <div class="section-heading">
-          <div class="section-subtitle">Services, registry, and platform services with their routing info</div>
+            <span class="section-title">Traffic Targets</span>
+            <span class="section-subtitle">Services, registry, and platform services with their routing info</span>
+          </div>
         </div>
         <div class="table-header">
           <span>Type</span>
@@ -388,30 +413,13 @@ export class SzNetworkProxyView extends DeesElement {
             <span><span class="status-badge ${target.status}">${target.status}</span></span>
           </div>
         `)}
-      </div>
+      </dees-tile>
 
-      <div class="section">
+      <dees-tile>
-        <div class="logs-header">
+        <div slot="header" class="section-header">
-          <div>
+          <div class="section-heading">
-            <div class="section-title">Access Logs</div>
+            <span class="section-title">Access Logs</span>
-            <div class="section-subtitle">Real-time Caddy access logs</div>
+            <span class="section-subtitle">Real-time Caddy access logs</span>
-          </div>
-          <div class="logs-actions">
-            <button class="stream-button ${this.streaming ? 'streaming' : ''}" @click=${() => this.toggleStreaming()}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-                ${this.streaming
-                  ? 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()}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
-              </svg>
-              Clear logs
-            </button>
           </div>
         </div>
         <div class="logs-container">
@@ -428,7 +436,24 @@ export class SzNetworkProxyView extends DeesElement {
             <div class="empty-logs">Click "Stream" to start live access log streaming</div>
           `}
         </div>
+        <div slot="footer" class="section-footer">
+          <button class="tile-button ${this.streaming ? 'danger' : 'primary'}" @click=${() => this.toggleStreaming()}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+              ${this.streaming
+                ? 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="tile-button" @click=${() => this.handleClearLogs()}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
+            </svg>
+            Clear logs
+          </button>
         </div>
+      </dees-tile>
     `;
   }
 

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

@@ -225,39 +225,35 @@ export class SzPlatformServiceDetailView extends DeesElement {
         }
       }
 
-      .section {
+      dees-tile.full-width {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .section.full-width {
         grid-column: 1 / -1;
       }
 
       .section-header {
+        height: 36px;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        padding: 14px 16px;
+        padding: 0 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        width: 100%;
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        box-sizing: border-box;
       }
 
       .section-title {
-        font-size: 14px;
+        flex: 1;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
         display: flex;
         align-items: center;
         gap: 8px;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
       }
 
       .section-title svg {
-        width: 16px;
+        width: 14px;
-        height: 16px;
+        height: 14px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        flex-shrink: 0;
+        color: var(--dees-color-text-secondary);
       }
 
       .section-content {
@@ -363,56 +359,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;
@@ -502,8 +448,8 @@ export class SzPlatformServiceDetailView extends DeesElement {
 
       <div class="grid">
         <!-- Connection Info -->
-        <div class="section">
+        <dees-tile>
-          <div class="section-header">
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
@@ -566,11 +512,11 @@ export class SzPlatformServiceDetailView extends DeesElement {
               </div>
             ` : ''}
           </div>
-        </div>
+        </dees-tile>
 
         <!-- Configuration -->
-        <div class="section">
+        <dees-tile>
-          <div class="section-header">
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <circle cx="12" cy="12" r="3"></circle>
@@ -587,12 +533,12 @@ export class SzPlatformServiceDetailView extends DeesElement {
               </div>
             `)}
           </div>
-        </div>
+        </dees-tile>
 
         <!-- Metrics -->
         ${this.service.metrics ? html`
-          <div class="section full-width">
+          <dees-tile class="full-width">
-            <div class="section-header">
+            <div slot="header" class="section-header">
               <div class="section-title">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <line x1="18" y1="20" x2="18" y2="10"></line>
@@ -633,33 +579,22 @@ export class SzPlatformServiceDetailView extends DeesElement {
                 ` : ''}
               </div>
             </div>
-          </div>
+          </dees-tile>
         ` : ''}
 
         <!-- 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

@@ -55,12 +55,23 @@ export interface IRouteSecurity {
   rateLimit?: { enabled: boolean; maxRequests: number; window: number };
 }
 
+export interface IRouteMetadata {
+  sourceProfileRef?: string;
+  networkTargetRef?: string;
+  sourceProfileName?: string;
+  networkTargetName?: string;
+  lastResolvedAt?: number;
+}
+
 export interface IRouteConfig {
   id?: string;
   match: IRouteMatch;
   action: IRouteAction;
   security?: IRouteSecurity;
   headers?: { request?: Record<string, string>; response?: Record<string, string> };
+  metadata?: IRouteMetadata;
+  /** When true, only VPN clients whose TargetProfile matches this route get access */
+  vpnOnly?: boolean;
   name?: string;
   description?: string;
   priority?: number;
@@ -127,6 +138,11 @@ export class SzRouteCard extends DeesElement {
             rateLimit: { enabled: true, maxRequests: 100, window: 60 },
             maxConnections: 1000,
           },
+          vpnOnly: true,
+          metadata: {
+            sourceProfileName: 'STANDARD',
+            networkTargetName: 'LOSSLESS_INFRA',
+          },
         } satisfies IRouteConfig}
       ></sz-route-card>
     </div>
@@ -137,6 +153,9 @@ export class SzRouteCard extends DeesElement {
   @property({ type: Object })
   public accessor route: IRouteConfig | null = null;
 
+  @property({ type: Boolean })
+  public accessor showActions: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -296,6 +315,21 @@ export class SzRouteCard extends DeesElement {
         border-left-color: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
       }
 
+      .section.linked {
+        border-left-color: ${cssManager.bdTheme('#8b5cf6', '#8b5cf6')};
+      }
+
+      .linked-name {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 600;
+        font-family: monospace;
+        background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.15)')};
+        color: ${cssManager.bdTheme('#6d28d9', '#a78bfa')};
+      }
+
       .section-label {
         font-size: 10px;
         font-weight: 600;
@@ -431,6 +465,83 @@ export class SzRouteCard extends DeesElement {
         color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
         font-size: 13px;
       }
+
+      .section.vpn {
+        border-left-color: ${cssManager.bdTheme('#0891b2', '#06b6d4')};
+      }
+
+      .vpn-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 600;
+        white-space: nowrap;
+      }
+
+      .vpn-badge.mandatory {
+        background: ${cssManager.bdTheme('#fff7ed', 'rgba(249, 115, 22, 0.2)')};
+        color: ${cssManager.bdTheme('#c2410c', '#fb923c')};
+      }
+
+      .vpn-badge.optional {
+        background: ${cssManager.bdTheme('#ecfdf5', 'rgba(16, 185, 129, 0.2)')};
+        color: ${cssManager.bdTheme('#047857', '#34d399')};
+      }
+
+      .vpn-tag {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 600;
+        font-family: monospace;
+        margin-right: 4px;
+        margin-bottom: 2px;
+        background: ${cssManager.bdTheme('#ecfeff', 'rgba(6, 182, 212, 0.15)')};
+        color: ${cssManager.bdTheme('#0e7490', '#22d3ee')};
+      }
+
+      .card-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 14px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
+        justify-content: flex-end;
+      }
+
+      .action-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 5px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+        transition: all 150ms ease;
+      }
+
+      .action-btn:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .action-btn.edit:hover {
+        border-color: ${cssManager.bdTheme('#93c5fd', 'rgba(59, 130, 246, 0.5)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .action-btn.delete:hover {
+        border-color: ${cssManager.bdTheme('#fca5a5', 'rgba(239, 68, 68, 0.5)')};
+        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+      }
     `,
   ];
 
@@ -624,8 +735,36 @@ export class SzRouteCard extends DeesElement {
             `
           : ''}
 
+        <!-- VPN Section -->
+        ${this.renderVpn()}
+
+        <!-- Linked References Section -->
+        ${this.renderLinked()}
+
         <!-- Feature Icons Row -->
         ${this.renderFeatures()}
+
+        <!-- Action Buttons -->
+        ${this.showActions ? html`
+          <div class="card-actions">
+            <button class="action-btn edit" @click=${(e: Event) => {
+              e.stopPropagation();
+              this.dispatchEvent(new CustomEvent('route-edit', {
+                detail: this.route,
+                bubbles: true,
+                composed: true,
+              }));
+            }}>Edit</button>
+            <button class="action-btn delete" @click=${(e: Event) => {
+              e.stopPropagation();
+              this.dispatchEvent(new CustomEvent('route-delete', {
+                detail: this.route,
+                bubbles: true,
+                composed: true,
+              }));
+            }}>Delete</button>
+          </div>
+        ` : ''}
       </div>
     `;
   }
@@ -638,12 +777,59 @@ export class SzRouteCard extends DeesElement {
     )}`;
   }
 
+  private renderVpn(): TemplateResult {
+    if (!this.route?.vpnOnly) return html``;
+
+    return html`
+      <div class="section vpn">
+        <div class="section-label">VPN Access</div>
+        <div class="field-row">
+          <span class="field-key">Mode</span>
+          <span class="field-value">
+            <span class="vpn-badge mandatory">VPN Only</span>
+          </span>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderLinked(): TemplateResult {
+    const meta = this.route?.metadata;
+    if (!meta) return html``;
+    const hasProfile = !!meta.sourceProfileName;
+    const hasTarget = !!meta.networkTargetName;
+    if (!hasProfile && !hasTarget) return html``;
+
+    return html`
+      <div class="section linked">
+        <div class="section-label">Linked</div>
+        ${hasProfile
+          ? html`
+              <div class="field-row">
+                <span class="field-key">Profile</span>
+                <span class="field-value"><span class="linked-name">${meta.sourceProfileName}</span></span>
+              </div>
+            `
+          : ''}
+        ${hasTarget
+          ? html`
+              <div class="field-row">
+                <span class="field-key">Target</span>
+                <span class="field-value"><span class="linked-name">${meta.networkTargetName}</span></span>
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
   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;
+    const meta = this.route.metadata;
 
     if (action.tls) {
       features.push(html`<span class="feature"><span class="feature-icon">&#x1f512;</span>TLS</span>`);
@@ -660,6 +846,12 @@ export class SzRouteCard extends DeesElement {
     if (headers) {
       features.push(html`<span class="feature"><span class="feature-icon">&#x2699;</span>Headers</span>`);
     }
+    if (this.route?.vpnOnly) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f510;</span>VPN</span>`);
+    }
+    if (meta?.sourceProfileName || meta?.networkTargetName) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f517;</span>Linked</span>`);
+    }
 
     if (features.length === 0) return html``;
     return html`<div class="features-row">${features}</div>`;

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

@@ -76,6 +76,9 @@ export class SzRouteListView extends DeesElement {
   @property({ type: Array })
   public accessor routes: IRouteConfig[] = [];
 
+  @property({ attribute: false })
+  public accessor showActionsFilter: ((route: IRouteConfig) => boolean) | null = null;
+
   @state()
   private accessor searchQuery: string = '';
 
@@ -299,6 +302,7 @@ export class SzRouteListView extends DeesElement {
                 (route) => html`
                   <sz-route-card
                     .route=${route}
+                    .showActions=${this.showActionsFilter?.(route) ?? false}
                     @click=${() => this.handleRouteClick(route)}
                   ></sz-route-card>
                 `

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

@@ -11,8 +11,6 @@ import {
 
 import type { IExecutionEnvironment } from '@design.estate/dees-catalog';
 
-import './sz-stat-card.js';
-
 declare global {
   interface HTMLElementTagNameMap {
     'sz-service-detail-view': SzServiceDetailView;
@@ -218,31 +216,97 @@ export class SzServiceDetailView extends DeesElement {
         gap: 24px;
       }
 
-      .card {
+      .card-header {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        height: 36px;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        display: flex;
-        border-radius: 8px;
+        align-items: center;
-        overflow: hidden;
+        padding: 0 8px 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .card-header {
+      .card-heading {
+        flex: 1;
         display: flex;
-        justify-content: space-between;
+        align-items: baseline;
-        align-items: center;
+        gap: 8px;
-        padding: 16px;
+        min-width: 0;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
       }
 
       .card-title {
-        font-size: 16px;
+        font-weight: 500;
-        font-weight: 600;
+        font-size: 13px;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .card-subtitle {
-        font-size: 13px;
+        font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
-        margin-top: 2px;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .card-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .tile-button.danger {
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .tile-button.danger:hover {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
       }
 
       .card-content {
@@ -396,68 +460,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;
@@ -580,12 +582,11 @@ export class SzServiceDetailView extends DeesElement {
 
       <div class="content">
         <div class="main-content">
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div>
+              <div class="card-heading">
-                <div class="card-title">Service Details</div>
+                <span class="card-title">Service Details</span>
               </div>
-              <button class="action-button" style="width: auto; padding: 6px 12px;" @click=${() => this.handleEdit()}>Edit</button>
             </div>
             <div class="card-content">
               <div class="detail-list">
@@ -619,43 +620,30 @@ export class SzServiceDetailView extends DeesElement {
                 </div>
               </div>
             </div>
+            <div slot="footer" class="card-footer">
+              <button class="tile-button primary" @click=${() => this.handleEdit()}>Edit</button>
             </div>
+          </dees-tile>
 
-          <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">
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div class="card-title">Live stats</div>
+              <div class="card-heading">
+                <span class="card-title">Live stats</span>
+              </div>
             </div>
             <div class="card-content">
               <div class="stats-grid">
@@ -678,13 +666,13 @@ export class SzServiceDetailView extends DeesElement {
                 </div>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div>
+              <div class="card-heading">
-                <div class="card-title">Actions</div>
+                <span class="card-title">Actions</span>
-                <div class="card-subtitle">Manage service state</div>
+                <span class="card-subtitle">Manage service state</span>
               </div>
             </div>
             <div class="card-content">
@@ -704,13 +692,13 @@ export class SzServiceDetailView extends DeesElement {
                 <button class="action-button danger" @click=${() => this.handleAction('delete')}>Delete Service</button>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div>
+              <div class="card-heading">
-                <div class="card-title">Image Source</div>
+                <span class="card-title">Image Source</span>
-                <div class="card-subtitle">${this.service.registry === 'Docker Hub' ? 'External container registry' : 'Onebox registry'}</div>
+                <span class="card-subtitle">${this.service.registry === 'Docker Hub' ? 'External container registry' : 'Onebox registry'}</span>
               </div>
             </div>
             <div class="card-content">
@@ -729,21 +717,14 @@ export class SzServiceDetailView extends DeesElement {
                 </div>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
-          <div class="card">
+          <dees-tile>
-            <div class="card-header">
+            <div slot="header" class="card-header">
-              <div>
+              <div class="card-heading">
-                <div class="card-title">Backups</div>
+                <span class="card-title">Backups</span>
-                <div class="card-subtitle">Create and manage service backups</div>
+                <span class="card-subtitle">Create and manage service backups</span>
               </div>
-              <button class="action-button" style="width: auto; padding: 6px 12px;" @click=${() => this.handleCreateBackup()}>
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
-                  <line x1="12" y1="5" x2="12" y2="19"></line>
-                  <line x1="5" y1="12" x2="19" y2="12"></line>
-                </svg>
-                Create Backup
-              </button>
             </div>
             <div class="card-content">
               <div class="backup-list">
@@ -778,7 +759,16 @@ export class SzServiceDetailView extends DeesElement {
                 `)}
               </div>
             </div>
+            <div slot="footer" class="card-footer">
+              <button class="tile-button primary" @click=${() => this.handleCreateBackup()}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <line x1="12" y1="5" x2="12" y2="19"></line>
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+                Create Backup
+              </button>
             </div>
+          </dees-tile>
         </div>
       </div>
     `;

ts_web/elements/sz-services-backups-view.ts

@@ -65,71 +65,94 @@ export class SzServicesBackupsView extends DeesElement {
         display: block;
       }
 
-      .section {
+      dees-tile {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        display: block;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
         margin-bottom: 24px;
-        overflow: hidden;
       }
 
       .section-header {
+        height: 36px;
         display: flex;
-        justify-content: space-between;
+        align-items: center;
-        align-items: flex-start;
+        padding: 0 16px;
-        padding: 16px;
+        width: 100%;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        box-sizing: border-box;
       }
 
-      .section-info {
+      .section-heading {
+        flex: 1;
         display: flex;
-        flex-direction: column;
+        align-items: baseline;
-        gap: 4px;
+        gap: 8px;
+        min-width: 0;
       }
 
       .section-title {
-        font-size: 16px;
+        font-weight: 500;
-        font-weight: 600;
+        font-size: 13px;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .section-subtitle {
-        font-size: 13px;
+        font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      .header-actions {
+      .section-footer {
         display: flex;
-        gap: 8px;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .action-button {
+      .tile-button {
-        display: inline-flex;
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
         align-items: center;
         gap: 6px;
-        padding: 8px 14px;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 6px;
-        font-size: 13px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        cursor: pointer;
-        transition: all 200ms ease;
       }
 
-      .action-button:hover {
+      .tile-button:first-child {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-left: none;
       }
 
-      .action-button.primary {
+      .tile-button:hover {
-        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        background: var(--dees-color-hover);
-        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        color: var(--dees-color-text-primary);
-        border: none;
       }
 
-      .action-button.primary:hover {
+      .tile-button.primary {
-        opacity: 0.9;
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       .table-header {
@@ -253,28 +276,11 @@ export class SzServicesBackupsView extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-info">
+          <div class="section-heading">
-            <div class="section-title">Backup Schedules</div>
+            <span class="section-title">Backup Schedules</span>
-            <div class="section-subtitle">Configure automated backup schedules for your services</div>
+            <span class="section-subtitle">Configure automated backup schedules for your services</span>
-          </div>
-          <div class="header-actions">
-            <button class="action-button" @click=${() => this.handleImport()}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                <polyline points="17 8 12 3 7 8"/>
-                <line x1="12" y1="3" x2="12" y2="15"/>
-              </svg>
-              Import Backup
-            </button>
-            <button class="action-button primary" @click=${() => this.handleCreateSchedule()}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-              Create Schedule
-            </button>
           </div>
         </div>
         <div class="table-header schedules-header">
@@ -318,13 +324,30 @@ export class SzServicesBackupsView extends DeesElement {
             </span>
           </div>
         `)}
+        <div slot="footer" class="section-footer">
+          <button class="tile-button" @click=${() => this.handleImport()}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+              <polyline points="17 8 12 3 7 8"/>
+              <line x1="12" y1="3" x2="12" y2="15"/>
+            </svg>
+            Import Backup
+          </button>
+          <button class="tile-button primary" @click=${() => this.handleCreateSchedule()}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+            Create Schedule
+          </button>
         </div>
+      </dees-tile>
 
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-info">
+          <div class="section-heading">
-            <div class="section-title">All Backups</div>
+            <span class="section-title">All Backups</span>
-            <div class="section-subtitle">Browse and manage all backups across services</div>
+            <span class="section-subtitle">Browse and manage all backups across services</span>
           </div>
         </div>
         <div class="table-header backups-header">
@@ -358,7 +381,7 @@ export class SzServicesBackupsView extends DeesElement {
             </span>
           </div>
         `)}
-      </div>
+      </dees-tile>
     `;
   }
 

ts_web/elements/sz-settings-view.ts

@@ -72,28 +72,98 @@ export class SzSettingsView extends DeesElement {
         display: block;
       }
 
-      .section {
+      dees-tile {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        display: block;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        padding: 20px;
         margin-bottom: 24px;
       }
 
       .section-header {
-        margin-bottom: 16px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .section-heading {
+        flex: 1;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .section-title {
-        font-size: 16px;
+        font-weight: 500;
-        font-weight: 600;
+        font-size: 13px;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .section-subtitle {
-        font-size: 13px;
+        font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
-        margin-top: 2px;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .section-content {
+        padding: 20px;
+      }
+
+      .section-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       .form-group {
@@ -224,53 +294,19 @@ export class SzSettingsView extends DeesElement {
         margin-bottom: 4px;
       }
 
-      .actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 12px;
-        padding-top: 16px;
-        border-top: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        margin-top: 24px;
-      }
-
-      .button {
-        padding: 10px 20px;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 200ms ease;
-      }
-
-      .button.secondary {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-      }
-
-      .button.secondary:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-      }
-
-      .button.primary {
-        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        border: none;
-        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
-      }
-
-      .button.primary:hover {
-        opacity: 0.9;
-      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-title">Appearance</div>
+          <div class="section-heading">
-          <div class="section-subtitle">Customize the look and feel</div>
+            <span class="section-title">Appearance</span>
+            <span class="section-subtitle">Customize the look and feel</span>
           </div>
+        </div>
+        <div class="section-content">
           <div class="form-row">
             <div class="form-label-group">
               <span class="form-label">Dark Mode</span>
@@ -279,12 +315,16 @@ export class SzSettingsView extends DeesElement {
             <div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
           </div>
         </div>
+      </dees-tile>
 
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-title">Cloudflare Integration</div>
+          <div class="section-heading">
-          <div class="section-subtitle">Configure Cloudflare API for DNS management</div>
+            <span class="section-title">Cloudflare Integration</span>
+            <span class="section-subtitle">Configure Cloudflare API for DNS management</span>
           </div>
+        </div>
+        <div class="section-content">
           <div class="input-group">
             <div class="form-group">
               <div class="field-label">API Token</div>
@@ -297,12 +337,16 @@ export class SzSettingsView extends DeesElement {
             <div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
           </div>
         </div>
+      </dees-tile>
 
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-title">SSL/TLS Settings</div>
+          <div class="section-heading">
-          <div class="section-subtitle">Configure certificate management</div>
+            <span class="section-title">SSL/TLS Settings</span>
+            <span class="section-subtitle">Configure certificate management</span>
           </div>
+        </div>
+        <div class="section-content">
           <div class="form-row">
             <div class="form-label-group">
               <span class="form-label">Auto-Renew Certificates</span>
@@ -321,12 +365,16 @@ export class SzSettingsView extends DeesElement {
             <div class="form-hint">Email address for Let's Encrypt notifications.</div>
           </div>
         </div>
+      </dees-tile>
 
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-title">Network Settings</div>
+          <div class="section-heading">
-          <div class="section-subtitle">Configure network and proxy settings</div>
+            <span class="section-title">Network Settings</span>
+            <span class="section-subtitle">Configure network and proxy settings</span>
           </div>
+        </div>
+        <div class="section-content">
           <div class="input-row">
             <div class="form-group">
               <div class="field-label">HTTP Port</div>
@@ -345,12 +393,16 @@ export class SzSettingsView extends DeesElement {
             <div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
           </div>
         </div>
+      </dees-tile>
 
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-title">Account</div>
+          <div class="section-heading">
-          <div class="section-subtitle">Manage your account settings</div>
+            <span class="section-title">Account</span>
+            <span class="section-subtitle">Manage your account settings</span>
           </div>
+        </div>
+        <div class="section-content">
           <div class="form-group">
             <div class="field-label">Current User</div>
             <div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
@@ -370,15 +422,23 @@ export class SzSettingsView extends DeesElement {
                 <div class="field-label">Confirm Password</div>
                 <input type="password" id="confirmPassword">
               </div>
-            <button class="button secondary" style="width: fit-content;" @click=${() => this.handleChangePassword()}>Update Password</button>
             </div>
           </div>
         </div>
+        <div slot="footer" class="section-footer">
+          <button class="tile-button" @click=${() => this.handleChangePassword()}>Update Password</button>
+        </div>
+      </dees-tile>
 
-      <div class="actions">
+      <dees-tile>
-        <button class="button secondary" @click=${() => this.handleReset()}>Reset</button>
+        <div class="section-content" style="padding: 12px 16px; text-align: center; color: var(--dees-color-text-muted); font-size: 12px;">
-        <button class="button primary" @click=${() => this.handleSave()}>Save Settings</button>
+          Save your changes or reset to defaults.
         </div>
+        <div slot="footer" class="section-footer">
+          <button class="tile-button" @click=${() => this.handleReset()}>Reset</button>
+          <button class="tile-button primary" @click=${() => this.handleSave()}>Save Settings</button>
+        </div>
+      </dees-tile>
     `;
   }
 

ts_web/elements/sz-stat-card.ts

@@ -1,189 +0,0 @@
-import {
-  DeesElement,
-  customElement,
-  html,
-  css,
-  cssManager,
-  property,
-  type TemplateResult,
-} from '@design.estate/dees-element';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sz-stat-card': SzStatCard;
-  }
-}
-
-@customElement('sz-stat-card')
-export class SzStatCard extends DeesElement {
-  public static demo = () => html`
-    <style>
-      .demo-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
-        padding: 24px;
-        max-width: 800px;
-      }
-    </style>
-    <div class="demo-grid">
-      <sz-stat-card
-        label="Total Services"
-        value="7"
-        icon="server"
-      ></sz-stat-card>
-      <sz-stat-card
-        label="Running"
-        value="7"
-        icon="check"
-        variant="success"
-      ></sz-stat-card>
-      <sz-stat-card
-        label="Stopped"
-        value="0"
-        icon="stop"
-      ></sz-stat-card>
-      <sz-stat-card
-        label="Docker"
-        value="Running"
-        icon="container"
-        variant="success"
-        valueBadge
-      ></sz-stat-card>
-    </div>
-  `;
-
-  public static demoGroups = ['Dashboard'];
-
-  @property({ type: String })
-  public accessor label: string = '';
-
-  @property({ type: String })
-  public accessor value: string = '';
-
-  @property({ type: String })
-  public accessor icon: string = '';
-
-  @property({ type: String })
-  public accessor variant: 'default' | 'success' | 'warning' | 'error' = 'default';
-
-  @property({ type: Boolean })
-  public accessor valueBadge: boolean = false;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      .card {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        padding: 20px;
-        transition: all 200ms ease;
-        height: 100%;
-        box-sizing: border-box;
-      }
-
-      .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)')};
-      }
-
-      .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-      }
-
-      .label {
-        font-size: 14px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-      }
-
-      .icon {
-        width: 20px;
-        height: 20px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-      }
-
-      .value {
-        font-size: 28px;
-        font-weight: 700;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        line-height: 1.2;
-      }
-
-      .value.success {
-        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
-      }
-
-      .value.warning {
-        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
-      }
-
-      .value.error {
-        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
-      }
-
-      .badge {
-        display: inline-flex;
-        align-items: center;
-        padding: 4px 12px;
-        border-radius: 9999px;
-        font-size: 14px;
-        font-weight: 500;
-      }
-
-      .badge.success {
-        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
-        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
-      }
-
-      .badge.warning {
-        background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
-        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
-      }
-
-      .badge.error {
-        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
-        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
-      }
-
-      .badge.default {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    const valueClass = this.valueBadge ? `badge ${this.variant}` : `value ${this.variant}`;
-
-    return html`
-      <div class="card">
-        <div class="header">
-          <span class="label">${this.label}</span>
-          ${this.renderIcon()}
-        </div>
-        <div class="${valueClass}">${this.value}</div>
-      </div>
-    `;
-  }
-
-  private renderIcon(): TemplateResult {
-    const icons: Record<string, TemplateResult> = {
-      server: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 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>`,
-      check: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
-      stop: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg>`,
-      container: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><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></svg>`,
-    };
-
-    return icons[this.icon] || html``;
-  }
-}

ts_web/elements/sz-status-grid-cluster.ts

@@ -7,8 +7,7 @@ import {
   property,
   type TemplateResult,
 } from '@design.estate/dees-element';
-
+import type { IStatsTile } from '@design.estate/dees-catalog';
-import './sz-stat-card.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -54,54 +53,51 @@ export class SzStatusGridCluster extends DeesElement {
       :host {
         display: block;
       }
-
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
-        align-items: stretch;
-      }
-
-      .grid > * {
-        height: 100%;
-      }
-
-      @media (min-width: 768px) {
-        .grid {
-          grid-template-columns: repeat(4, 1fr);
-        }
-      }
     `,
   ];
 
+  private get tiles(): IStatsTile[] {
+    return [
+      {
+        id: 'total',
+        title: 'Total Services',
+        value: this.stats.totalServices,
+        type: 'number',
+        icon: 'lucide:server',
+      },
+      {
+        id: 'running',
+        title: 'Running',
+        value: this.stats.running,
+        type: 'number',
+        icon: 'lucide:check',
+        color: '#22c55e',
+      },
+      {
+        id: 'stopped',
+        title: 'Stopped',
+        value: this.stats.stopped,
+        type: 'number',
+        icon: 'lucide:circleStop',
+        color: this.stats.stopped > 0 ? '#f59e0b' : undefined,
+      },
+      {
+        id: 'docker',
+        title: 'Docker',
+        value: this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:container',
+        color: this.stats.dockerStatus === 'running' ? '#22c55e' : '#ef4444',
+      },
+    ];
+  }
+
   public render(): TemplateResult {
     return html`
-      <div class="grid">
+      <dees-statsgrid
-        <sz-stat-card
+        .tiles=${this.tiles}
-          label="Total Services"
+        .minTileWidth=${200}
-          value="${this.stats.totalServices}"
+      ></dees-statsgrid>
-          icon="server"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Running"
-          value="${this.stats.running}"
-          icon="check"
-          variant="success"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Stopped"
-          value="${this.stats.stopped}"
-          icon="stop"
-          variant="${this.stats.stopped > 0 ? 'warning' : 'default'}"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Docker"
-          value="${this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped'}"
-          icon="container"
-          variant="${this.stats.dockerStatus === 'running' ? 'success' : 'error'}"
-          valueBadge
-        ></sz-stat-card>
-      </div>
     `;
   }
 }

ts_web/elements/sz-tokens-view.ts

@@ -55,56 +55,94 @@ export class SzTokensView extends DeesElement {
         display: block;
       }
 
-      .section {
+      dees-tile {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        display: block;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
         margin-bottom: 24px;
-        overflow: hidden;
       }
 
       .section-header {
+        height: 36px;
         display: flex;
-        justify-content: space-between;
+        align-items: center;
-        align-items: flex-start;
+        padding: 0 16px;
-        padding: 16px;
+        width: 100%;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        box-sizing: border-box;
       }
 
-      .section-info {
+      .section-heading {
+        flex: 1;
         display: flex;
-        flex-direction: column;
+        align-items: baseline;
-        gap: 4px;
+        gap: 8px;
+        min-width: 0;
       }
 
       .section-title {
-        font-size: 16px;
+        font-weight: 500;
-        font-weight: 600;
+        font-size: 13px;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .section-subtitle {
-        font-size: 13px;
+        font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      .create-button {
+      .section-footer {
-        display: inline-flex;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
         align-items: center;
         gap: 6px;
-        padding: 8px 14px;
-        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        border: none;
-        border-radius: 6px;
-        font-size: 13px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
-        cursor: pointer;
-        transition: all 200ms ease;
       }
 
-      .create-button:hover {
+      .tile-button:first-child {
-        opacity: 0.9;
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       .token-list {
@@ -192,45 +230,18 @@ export class SzTokensView extends DeesElement {
       .empty-text {
         font-size: 14px;
         color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        margin-bottom: 16px;
-      }
-
-      .empty-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 8px 14px;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 6px;
-        font-size: 13px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        cursor: pointer;
-        transition: all 200ms ease;
-      }
-
-      .empty-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="section">
+      <dees-tile>
-        <div class="section-header">
+        <div slot="header" class="section-header">
-          <div class="section-info">
+          <div class="section-heading">
-            <div class="section-title">Global Tokens</div>
+            <span class="section-title">Global Tokens</span>
-            <div class="section-subtitle">Tokens that can push images to multiple services</div>
+            <span class="section-subtitle">Tokens that can push images to multiple services</span>
           </div>
-          <button class="create-button" @click=${() => this.handleCreate('global')}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="12" y1="5" x2="12" y2="19"></line>
-              <line x1="5" y1="12" x2="19" y2="12"></line>
-            </svg>
-            Create Token
-          </button>
         </div>
         ${this.globalTokens.length > 0 ? html`
           <div class="token-list">
@@ -239,25 +250,26 @@ export class SzTokensView extends DeesElement {
         ` : html`
           <div class="empty-state">
             <div class="empty-text">No global tokens created</div>
-            <button class="empty-button" @click=${() => this.handleCreate('global')}>Create Global Token</button>
           </div>
         `}
-      </div>
+        <div slot="footer" class="section-footer">
-
+          <button class="tile-button primary" @click=${() => this.handleCreate('global')}>
-      <div class="section">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <div class="section-header">
-          <div class="section-info">
-            <div class="section-title">CI Tokens (Service-specific)</div>
-            <div class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</div>
-          </div>
-          <button class="create-button" @click=${() => this.handleCreate('ci')}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <line x1="12" y1="5" x2="12" y2="19"></line>
               <line x1="5" y1="12" x2="19" y2="12"></line>
             </svg>
             Create Token
           </button>
         </div>
+      </dees-tile>
+
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">CI Tokens (Service-specific)</span>
+            <span class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</span>
+          </div>
+        </div>
         ${this.ciTokens.length > 0 ? html`
           <div class="token-list">
             ${this.ciTokens.map(token => this.renderToken(token))}
@@ -265,10 +277,18 @@ export class SzTokensView extends DeesElement {
         ` : html`
           <div class="empty-state">
             <div class="empty-text">No CI tokens created</div>
-            <button class="empty-button" @click=${() => this.handleCreate('ci')}>Create CI Token</button>
           </div>
         `}
+        <div slot="footer" class="section-footer">
+          <button class="tile-button primary" @click=${() => this.handleCreate('ci')}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+            Create Token
+          </button>
         </div>
+      </dees-tile>
     `;
   }
 

tsconfig.json

@@ -5,7 +5,7 @@
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
     "verbatimModuleSyntax": true,
-    "skipLibCheck": true
+    "types": ["node"]
   },
   "exclude": [
     "dist_*/**/*.d.ts"