@serve.zone/catalog 1.0.1

package/ts_web/elements/sz-status-grid-infra.ts

@@ -0,0 +1,88 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import './sz-dns-ssl-card.js';
+import './sz-quick-actions-card.js';
+
+import type { IQuickAction } from './sz-quick-actions-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-status-grid-infra': SzStatusGridInfra;
+  }
+}
+
+@customElement('sz-status-grid-infra')
+export class SzStatusGridInfra extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-status-grid-infra
+        dnsConfigured
+        acmeConfigured
+        .actions=${[
+          { label: 'Deploy Service', icon: 'plus', primary: true },
+          { label: 'View All Services' },
+          { label: 'Platform Services' },
+          { label: 'Manage Domains' },
+        ]}
+      ></sz-status-grid-infra>
+    </div>
+  `;
+
+  @property({ type: Boolean })
+  public accessor dnsConfigured: boolean = false;
+
+  @property({ type: Boolean })
+  public accessor acmeConfigured: boolean = false;
+
+  @property({ type: Array })
+  public accessor actions: IQuickAction[] = [];
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 16px;
+        align-items: stretch;
+      }
+
+      .grid > * {
+        height: 100%;
+      }
+
+      @media (min-width: 768px) {
+        .grid {
+          grid-template-columns: 1fr 2fr;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="grid">
+        <sz-dns-ssl-card
+          ?dnsConfigured=${this.dnsConfigured}
+          ?acmeConfigured=${this.acmeConfigured}
+        ></sz-dns-ssl-card>
+        <sz-quick-actions-card
+          .actions=${this.actions}
+          @action-click=${(e: CustomEvent) => this.dispatchEvent(new CustomEvent('action-click', { detail: e.detail, bubbles: true, composed: true }))}
+        ></sz-quick-actions-card>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/sz-status-grid-network.ts

@@ -0,0 +1,152 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import './sz-traffic-card.js';
+import './sz-reverse-proxy-card.js';
+import './sz-certificates-card.js';
+
+import type { ITrafficData } from './sz-traffic-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-status-grid-network': SzStatusGridNetwork;
+  }
+}
+
+export interface IProxyStatus {
+  httpPort: string;
+  httpsPort: string;
+  httpActive: boolean;
+  httpsActive: boolean;
+  routeCount: string;
+}
+
+export interface ICertificateStatus {
+  valid: number;
+  expiring: number;
+  expired: number;
+}
+
+@customElement('sz-status-grid-network')
+export class SzStatusGridNetwork extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1400px;">
+      <sz-status-grid-network
+        .traffic=${{
+          totalRequests: 125420,
+          requestsPerMinute: 847,
+          errorRate: 0.12,
+          avgResponseTime: 45,
+          statusDistribution: {
+            '2xx': 95.2,
+            '3xx': 2.1,
+            '4xx': 2.3,
+            '5xx': 0.4,
+          },
+        }}
+        .proxy=${{
+          httpPort: '80',
+          httpsPort: '443',
+          httpActive: true,
+          httpsActive: true,
+          routeCount: '12',
+        }}
+        .certificates=${{
+          valid: 8,
+          expiring: 2,
+          expired: 0,
+        }}
+      ></sz-status-grid-network>
+    </div>
+  `;
+
+  @property({ type: Object })
+  public accessor traffic: ITrafficData = {
+    requests: 0,
+    errors: 0,
+    errorPercent: 0,
+    avgResponse: 0,
+    reqPerMin: 0,
+    status2xx: 0,
+    status3xx: 0,
+    status4xx: 0,
+    status5xx: 0,
+  };
+
+  @property({ type: Object })
+  public accessor proxy: IProxyStatus = {
+    httpPort: '80',
+    httpsPort: '443',
+    httpActive: false,
+    httpsActive: false,
+    routeCount: '0',
+  };
+
+  @property({ type: Object })
+  public accessor certificates: ICertificateStatus = {
+    valid: 0,
+    expiring: 0,
+    expired: 0,
+  };
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 16px;
+        align-items: stretch;
+      }
+
+      .grid > * {
+        height: 100%;
+      }
+
+      @media (min-width: 768px) {
+        .grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .grid {
+          grid-template-columns: 2fr 1fr 1fr;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="grid">
+        <sz-traffic-card
+          .data=${this.traffic}
+        ></sz-traffic-card>
+        <sz-reverse-proxy-card
+          httpPort="${this.proxy.httpPort}"
+          httpsPort="${this.proxy.httpsPort}"
+          ?httpActive=${this.proxy.httpActive}
+          ?httpsActive=${this.proxy.httpsActive}
+          routeCount="${this.proxy.routeCount}"
+        ></sz-reverse-proxy-card>
+        <sz-certificates-card
+          valid="${this.certificates.valid}"
+          expiring="${this.certificates.expiring}"
+          expired="${this.certificates.expired}"
+        ></sz-certificates-card>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/sz-status-grid-services.ts

@@ -0,0 +1,99 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import './sz-resource-usage-card.js';
+import './sz-platform-services-card.js';
+
+import type { IResourceUsage } from './sz-resource-usage-card.js';
+import type { IPlatformService } from './sz-platform-services-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-status-grid-services': SzStatusGridServices;
+  }
+}
+
+@customElement('sz-status-grid-services')
+export class SzStatusGridServices extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-status-grid-services
+        .resourceUsage=${{
+          cpu: { percentage: 45, label: 'CPU Usage' },
+          memory: { percentage: 62, label: 'Memory', used: '4.96 GB', total: '8 GB' },
+          network: { percentage: 23, label: 'Network I/O', rate: '1.2 MB/s' },
+          topConsumers: [
+            { name: 'api-service', cpu: 25, memory: 512 },
+            { name: 'web-frontend', cpu: 15, memory: 256 },
+            { name: 'worker', cpu: 5, memory: 128 },
+          ],
+        }}
+        .platformServices=${[
+          { name: 'MongoDB', status: 'running' },
+          { name: 'S3 Storage', status: 'running' },
+          { name: 'ClickHouse', status: 'stopped' },
+          { name: 'Redis Cache', status: 'running' },
+        ]}
+      ></sz-status-grid-services>
+    </div>
+  `;
+
+  @property({ type: Object })
+  public accessor resourceUsage: IResourceUsage = {
+    cpu: 0,
+    memoryUsed: '0 GB',
+    memoryTotal: '0 GB',
+    networkIn: '0 MB/s',
+    networkOut: '0 MB/s',
+    topConsumers: [],
+  };
+
+  @property({ type: Array })
+  public accessor platformServices: IPlatformService[] = [];
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 16px;
+        align-items: stretch;
+      }
+
+      .grid > * {
+        height: 100%;
+      }
+
+      @media (min-width: 768px) {
+        .grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="grid">
+        <sz-resource-usage-card
+          .usage=${this.resourceUsage}
+        ></sz-resource-usage-card>
+        <sz-platform-services-card
+          .services=${this.platformServices}
+        ></sz-platform-services-card>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/sz-tokens-view.ts

@@ -0,0 +1,308 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-tokens-view': SzTokensView;
+  }
+}
+
+export interface IToken {
+  id: string;
+  name: string;
+  type: 'global' | 'ci';
+  service?: string;
+  createdAt: string;
+  lastUsed?: string;
+}
+
+@customElement('sz-tokens-view')
+export class SzTokensView extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1000px;">
+      <sz-tokens-view
+        .globalTokens=${[
+          { id: '1', name: 'CI/CD Pipeline', type: 'global', createdAt: '2024-01-15', lastUsed: '2024-01-20' },
+          { id: '2', name: 'Development', type: 'global', createdAt: '2024-01-10' },
+        ]}
+        .ciTokens=${[
+          { id: '3', name: 'hello-world-ci', type: 'ci', service: 'hello-world', createdAt: '2024-01-18' },
+          { id: '4', name: 'api-service-ci', type: 'ci', service: 'api-service', createdAt: '2024-01-12', lastUsed: '2024-01-19' },
+        ]}
+      ></sz-tokens-view>
+    </div>
+  `;
+
+  @property({ type: Array })
+  public accessor globalTokens: IToken[] = [];
+
+  @property({ type: Array })
+  public accessor ciTokens: IToken[] = [];
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .section {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        margin-bottom: 24px;
+        overflow: hidden;
+      }
+
+      .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+      }
+
+      .section-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .section-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .section-subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .create-button {
+        display: inline-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 {
+        opacity: 0.9;
+      }
+
+      .token-list {
+        padding: 16px;
+      }
+
+      .token-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-radius: 6px;
+        margin-bottom: 8px;
+      }
+
+      .token-item:last-child {
+        margin-bottom: 0;
+      }
+
+      .token-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .token-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .token-meta {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .token-service {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        margin-right: 8px;
+      }
+
+      .token-actions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .action-button {
+        padding: 6px 12px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 4px;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        cursor: pointer;
+        transition: all 200ms ease;
+      }
+
+      .action-button:hover {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .action-button.delete {
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+        border-color: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.3)')};
+      }
+
+      .action-button.delete:hover {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
+      }
+
+      .empty-state {
+        padding: 32px 16px;
+        text-align: center;
+      }
+
+      .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">
+        <div class="section-header">
+          <div class="section-info">
+            <div class="section-title">Global Tokens</div>
+            <div class="section-subtitle">Tokens that can push images to multiple services</div>
+          </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">
+            ${this.globalTokens.map(token => this.renderToken(token))}
+          </div>
+        ` : 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 class="section">
+        <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>
+        ${this.ciTokens.length > 0 ? html`
+          <div class="token-list">
+            ${this.ciTokens.map(token => this.renderToken(token))}
+          </div>
+        ` : 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>
+    `;
+  }
+
+  private renderToken(token: IToken): TemplateResult {
+    return html`
+      <div class="token-item">
+        <div class="token-info">
+          <div class="token-name">${token.name}</div>
+          <div class="token-meta">
+            ${token.service ? html`<span class="token-service">${token.service}</span>` : ''}
+            Created ${token.createdAt}
+            ${token.lastUsed ? html` · Last used ${token.lastUsed}` : ''}
+          </div>
+        </div>
+        <div class="token-actions">
+          <button class="action-button" @click=${() => this.handleCopy(token)}>Copy</button>
+          <button class="action-button" @click=${() => this.handleRegenerate(token)}>Regenerate</button>
+          <button class="action-button delete" @click=${() => this.handleDelete(token)}>Delete</button>
+        </div>
+      </div>
+    `;
+  }
+
+  private handleCreate(type: 'global' | 'ci') {
+    this.dispatchEvent(new CustomEvent('create', { detail: { type }, bubbles: true, composed: true }));
+  }
+
+  private handleCopy(token: IToken) {
+    this.dispatchEvent(new CustomEvent('copy', { detail: token, bubbles: true, composed: true }));
+  }
+
+  private handleRegenerate(token: IToken) {
+    this.dispatchEvent(new CustomEvent('regenerate', { detail: token, bubbles: true, composed: true }));
+  }
+
+  private handleDelete(token: IToken) {
+    this.dispatchEvent(new CustomEvent('delete', { detail: token, bubbles: true, composed: true }));
+  }
+}