initial

ts_web/elements/gitops-dashboard.ts

@@ -0,0 +1,199 @@
+import * as plugins from '../plugins.js';
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../ts_interfaces/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import type { GitopsViewOverview } from './views/overview/index.js';
+import type { GitopsViewConnections } from './views/connections/index.js';
+import type { GitopsViewProjects } from './views/projects/index.js';
+import type { GitopsViewGroups } from './views/groups/index.js';
+import type { GitopsViewSecrets } from './views/secrets/index.js';
+import type { GitopsViewPipelines } from './views/pipelines/index.js';
+import type { GitopsViewBuildlog } from './views/buildlog/index.js';
+
+@customElement('gitops-dashboard')
+export class GitopsDashboard extends DeesElement {
+  @state()
+  accessor loginState: appstate.ILoginState = { identity: null, isLoggedIn: false };
+
+  @state()
+  accessor uiState: appstate.IUiState = {
+    activeView: 'overview',
+    autoRefresh: true,
+    refreshInterval: 30000,
+  };
+
+  private viewTabs = [
+    { name: 'Overview', element: (async () => (await import('./views/overview/index.js')).GitopsViewOverview)() },
+    { name: 'Connections', element: (async () => (await import('./views/connections/index.js')).GitopsViewConnections)() },
+    { name: 'Projects', element: (async () => (await import('./views/projects/index.js')).GitopsViewProjects)() },
+    { name: 'Groups', element: (async () => (await import('./views/groups/index.js')).GitopsViewGroups)() },
+    { name: 'Secrets', element: (async () => (await import('./views/secrets/index.js')).GitopsViewSecrets)() },
+    { name: 'Pipelines', element: (async () => (await import('./views/pipelines/index.js')).GitopsViewPipelines)() },
+    { name: 'Build Log', element: (async () => (await import('./views/buildlog/index.js')).GitopsViewBuildlog)() },
+  ];
+
+  private resolvedViewTabs: Array<{ name: string; element: any }> = [];
+
+  constructor() {
+    super();
+    document.title = 'GitOps';
+
+    const loginSubscription = appstate.loginStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((loginState) => {
+        this.loginState = loginState;
+        if (loginState.isLoggedIn) {
+          appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+        }
+      });
+    this.rxSubscriptions.push(loginSubscription);
+
+    const uiSubscription = appstate.uiStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((uiState) => {
+        this.uiState = uiState;
+        this.syncAppdashView(uiState.activeView);
+      });
+    this.rxSubscriptions.push(uiSubscription);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      .maincontainer {
+        width: 100%;
+        height: 100vh;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <dees-simple-login name="GitOps">
+          <dees-simple-appdash
+            name="GitOps"
+            .viewTabs=${this.resolvedViewTabs}
+          >
+          </dees-simple-appdash>
+        </dees-simple-login>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    // Resolve async view tab imports
+    this.resolvedViewTabs = await Promise.all(
+      this.viewTabs.map(async (tab) => ({
+        name: tab.name,
+        element: await tab.element,
+      })),
+    );
+    this.requestUpdate();
+    await this.updateComplete;
+
+    const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
+    if (simpleLogin) {
+      simpleLogin.addEventListener('login', (e: CustomEvent) => {
+        this.login(e.detail.data.username, e.detail.data.password);
+      });
+    }
+
+    const appDash = this.shadowRoot!.querySelector('dees-simple-appdash') as any;
+    if (appDash) {
+      appDash.addEventListener('view-select', (e: CustomEvent) => {
+        const viewName = e.detail.view.name.toLowerCase();
+        appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: viewName });
+      });
+      appDash.addEventListener('logout', async () => {
+        await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+      });
+    }
+
+    // Load initial view on appdash
+    if (appDash && this.resolvedViewTabs.length > 0) {
+      const initialView = this.resolvedViewTabs.find(
+        (t) => t.name.toLowerCase() === this.uiState.activeView,
+      ) || this.resolvedViewTabs[0];
+      await appDash.loadView(initialView);
+    }
+
+    // Check for stored session (persistent login state)
+    const loginState = appstate.loginStatePart.getState();
+    if (loginState.identity?.jwt) {
+      if (loginState.identity.expiresAt > Date.now()) {
+        try {
+          const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+            interfaces.requests.IReq_VerifyIdentity
+          >('/typedrequest', 'verifyIdentity');
+          const response = await typedRequest.fire({ identity: loginState.identity });
+          if (response.valid) {
+            this.loginState = loginState;
+            if (simpleLogin) {
+              await simpleLogin.switchToSlottedContent();
+            }
+          } else {
+            await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+          }
+        } catch (err) {
+          console.warn('Stored session invalid, returning to login:', err);
+          await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+        }
+      } else {
+        await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+      }
+    }
+  }
+
+  private async login(username: string, password: string) {
+    const domtools = await this.domtoolsPromise;
+    const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
+    const form = simpleLogin?.shadowRoot?.querySelector('dees-form') as any;
+
+    if (form) {
+      form.setStatus('pending', 'Logging in...');
+    }
+
+    const newState = await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
+      username,
+      password,
+    });
+
+    if (newState.identity) {
+      if (form) {
+        form.setStatus('success', 'Logged in!');
+      }
+      if (simpleLogin) {
+        await simpleLogin.switchToSlottedContent();
+      }
+    } else {
+      if (form) {
+        form.setStatus('error', 'Login failed!');
+        await domtools.convenience.smartdelay.delayFor(2000);
+        form.reset();
+      }
+    }
+  }
+
+  private syncAppdashView(viewName: string): void {
+    const appDash = this.shadowRoot?.querySelector('dees-simple-appdash') as any;
+    if (!appDash || this.resolvedViewTabs.length === 0) return;
+    const targetTab = this.resolvedViewTabs.find((t) => t.name.toLowerCase() === viewName);
+    if (!targetTab) return;
+    appDash.loadView(targetTab);
+  }
+}

ts_web/elements/index.ts

@@ -0,0 +1,8 @@
+import './gitops-dashboard.js';
+import './views/overview/index.js';
+import './views/connections/index.js';
+import './views/projects/index.js';
+import './views/groups/index.js';
+import './views/secrets/index.js';
+import './views/pipelines/index.js';
+import './views/buildlog/index.js';

ts_web/elements/shared/css.ts

@@ -0,0 +1,29 @@
+import { css } from '@design.estate/dees-element';
+
+export const viewHostCss = css`
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 24px;
+    box-sizing: border-box;
+    color: #fff;
+  }
+  .view-title {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 24px;
+  }
+  .view-description {
+    font-size: 14px;
+    color: #999;
+    margin-bottom: 24px;
+  }
+  .toolbar {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 24px;
+    flex-wrap: wrap;
+  }
+`;

ts_web/elements/shared/index.ts

@@ -0,0 +1 @@
+export * from './css.js';

ts_web/elements/views/buildlog/index.ts

@@ -0,0 +1,182 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-buildlog')
+export class GitopsViewBuildlog extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  @state()
+  accessor selectedConnectionId: string = '';
+
+  @state()
+  accessor selectedProjectId: string = '';
+
+  @state()
+  accessor selectedJobId: string = '';
+
+  constructor() {
+    super();
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    const dataSub = appstate.dataStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.dataState = s; });
+    this.rxSubscriptions.push(dataSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .log-container {
+        background: #0d0d0d;
+        border: 1px solid #333;
+        border-radius: 8px;
+        padding: 16px;
+        font-family: 'Fira Code', 'Courier New', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        color: #ccc;
+        max-height: 600px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+      .log-empty {
+        color: #666;
+        text-align: center;
+        padding: 40px;
+      }
+      .job-meta {
+        display: flex;
+        gap: 16px;
+        margin-bottom: 16px;
+        padding: 12px;
+        background: #1a1a2e;
+        border-radius: 8px;
+        font-size: 14px;
+      }
+      .job-meta-item {
+        color: #999;
+      }
+      .job-meta-item strong {
+        color: #fff;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    const projectOptions = this.dataState.projects.map((p) => ({
+      option: p.fullPath || p.name,
+      key: p.id,
+    }));
+
+    const jobOptions = this.dataState.pipelineJobs.map((j) => ({
+      option: `${j.name} (${j.status})`,
+      key: j.id,
+    }));
+
+    return html`
+      <div class="view-title">Build Log</div>
+      <div class="view-description">View raw build logs for CI/CD jobs</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Connection'}
+          .options=${connectionOptions}
+          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedConnectionId = e.detail.key;
+            this.loadProjects();
+          }}
+        ></dees-input-dropdown>
+        <dees-input-dropdown
+          .label=${'Project'}
+          .options=${projectOptions}
+          .selectedOption=${projectOptions.find((o) => o.key === this.selectedProjectId) || projectOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedProjectId = e.detail.key;
+          }}
+        ></dees-input-dropdown>
+        <dees-input-dropdown
+          .label=${'Job'}
+          .options=${jobOptions}
+          .selectedOption=${jobOptions.find((o) => o.key === this.selectedJobId) || jobOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedJobId = e.detail.key;
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.fetchLog()}>Fetch Log</dees-button>
+        <dees-button @click=${() => this.fetchLog()}>Refresh</dees-button>
+      </div>
+      ${this.selectedJobId ? html`
+        <div class="job-meta">
+          <span class="job-meta-item">Job: <strong>${this.selectedJobId}</strong></span>
+          <span class="job-meta-item">Project: <strong>${this.selectedProjectId}</strong></span>
+        </div>
+      ` : ''}
+      <div class="log-container">
+        ${this.dataState.currentJobLog
+          ? this.dataState.currentJobLog
+          : html`<div class="log-empty">Select a connection, project, and job, then click "Fetch Log" to view build output.</div>`
+        }
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    const conns = appstate.connectionsStatePart.getState().connections;
+    if (conns.length > 0 && !this.selectedConnectionId) {
+      this.selectedConnectionId = conns[0].id;
+      await this.loadProjects();
+    }
+  }
+
+  private async loadProjects() {
+    if (!this.selectedConnectionId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
+      connectionId: this.selectedConnectionId,
+    });
+  }
+
+  private async fetchLog() {
+    if (!this.selectedConnectionId || !this.selectedProjectId || !this.selectedJobId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchJobLogAction, {
+      connectionId: this.selectedConnectionId,
+      projectId: this.selectedProjectId,
+      jobId: this.selectedJobId,
+    });
+  }
+}

ts_web/elements/views/connections/index.ts

@@ -0,0 +1,158 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-connections')
+export class GitopsViewConnections extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  constructor() {
+    super();
+    const sub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="view-title">Connections</div>
+      <div class="view-description">Manage your Gitea and GitLab provider connections</div>
+      <div class="toolbar">
+        <dees-button @click=${() => this.addConnection()}>Add Connection</dees-button>
+        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Provider Connections'}
+        .heading2=${'Configure connections to Gitea and GitLab instances'}
+        .data=${this.connectionsState.connections}
+        .displayFunction=${(item: any) => ({
+          Name: item.name,
+          Type: item.providerType,
+          URL: item.baseUrl,
+          Status: item.status,
+          Created: new Date(item.createdAt).toLocaleDateString(),
+        })}
+        .dataActions=${[
+          {
+            name: 'Test',
+            iconName: 'lucide:plug',
+            action: async (item: any) => {
+              await appstate.connectionsStatePart.dispatchAction(
+                appstate.testConnectionAction,
+                { connectionId: item.id },
+              );
+            },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash2',
+            action: async (item: any) => {
+              const confirmed = await plugins.deesCatalog.DeesModal.createAndShow({
+                heading: 'Delete Connection',
+                content: html`<p style="color: #fff;">Are you sure you want to delete connection "${item.name}"?</p>`,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+                  {
+                    name: 'Delete',
+                    action: async (modal: any) => {
+                      await appstate.connectionsStatePart.dispatchAction(
+                        appstate.deleteConnectionAction,
+                        { connectionId: item.id },
+                      );
+                      modal.destroy();
+                    },
+                  },
+                ],
+              });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await this.refresh();
+  }
+
+  private async refresh() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+  }
+
+  private async addConnection() {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Add Connection',
+      content: html`
+        <style>
+          .form-row { margin-bottom: 16px; }
+        </style>
+        <div class="form-row">
+          <dees-input-text .label=${'Name'} .key=${'name'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-dropdown
+            .label=${'Provider Type'}
+            .key=${'providerType'}
+            .options=${[
+              { option: 'gitea', key: 'gitea' },
+              { option: 'gitlab', key: 'gitlab' },
+            ]}
+            .selectedOption=${{ option: 'gitea', key: 'gitea' }}
+          ></dees-input-dropdown>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Base URL'} .key=${'baseUrl'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'API Token'} .key=${'token'} type="password"></dees-input-text>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Add',
+          action: async (modal: any) => {
+            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text, dees-input-dropdown');
+            const data: any = {};
+            for (const input of inputs) {
+              if (input.key === 'providerType') {
+                data[input.key] = input.selectedOption?.key || 'gitea';
+              } else {
+                data[input.key] = input.value || '';
+              }
+            }
+            await appstate.connectionsStatePart.dispatchAction(
+              appstate.createConnectionAction,
+              {
+                name: data.name,
+                providerType: data.providerType,
+                baseUrl: data.baseUrl,
+                token: data.token,
+              },
+            );
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+}

ts_web/elements/views/groups/index.ts

@@ -0,0 +1,112 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-groups')
+export class GitopsViewGroups extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  @state()
+  accessor selectedConnectionId: string = '';
+
+  constructor() {
+    super();
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    const dataSub = appstate.dataStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.dataState = s; });
+    this.rxSubscriptions.push(dataSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    return html`
+      <div class="view-title">Groups</div>
+      <div class="view-description">Browse organizations and groups from your connected providers</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Connection'}
+          .options=${connectionOptions}
+          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedConnectionId = e.detail.key;
+            this.loadGroups();
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.loadGroups()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Groups / Organizations'}
+        .heading2=${'Groups from the selected connection'}
+        .data=${this.dataState.groups}
+        .displayFunction=${(item: any) => ({
+          Name: item.name,
+          Path: item.fullPath,
+          Visibility: item.visibility,
+          Projects: String(item.projectCount),
+        })}
+        .dataActions=${[
+          {
+            name: 'View Secrets',
+            iconName: 'lucide:key',
+            action: async (item: any) => {
+              appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'secrets' });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    const conns = appstate.connectionsStatePart.getState().connections;
+    if (conns.length > 0 && !this.selectedConnectionId) {
+      this.selectedConnectionId = conns[0].id;
+      await this.loadGroups();
+    }
+  }
+
+  private async loadGroups() {
+    if (!this.selectedConnectionId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, {
+      connectionId: this.selectedConnectionId,
+    });
+  }
+}

ts_web/elements/views/overview/index.ts

@@ -0,0 +1,111 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-overview')
+export class GitopsViewOverview extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  constructor() {
+    super();
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    const dataSub = appstate.dataStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.dataState = s; });
+    this.rxSubscriptions.push(dataSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+      .stat-card {
+        background: #1a1a2e;
+        border: 1px solid #333;
+        border-radius: 8px;
+        padding: 20px;
+        text-align: center;
+      }
+      .stat-value {
+        font-size: 36px;
+        font-weight: 700;
+        color: #00acff;
+        margin-bottom: 8px;
+      }
+      .stat-label {
+        font-size: 14px;
+        color: #999;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const connCount = this.connectionsState.connections.length;
+    const projCount = this.dataState.projects.length;
+    const groupCount = this.dataState.groups.length;
+    const pipelineCount = this.dataState.pipelines.length;
+    const failedPipelines = this.dataState.pipelines.filter((p) => p.status === 'failed').length;
+
+    return html`
+      <div class="view-title">Overview</div>
+      <div class="view-description">GitOps dashboard - manage your Gitea and GitLab instances</div>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-value">${connCount}</div>
+          <div class="stat-label">Connections</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${projCount}</div>
+          <div class="stat-label">Projects</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${groupCount}</div>
+          <div class="stat-label">Groups</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${pipelineCount}</div>
+          <div class="stat-label">Pipelines</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" style="color: ${failedPipelines > 0 ? '#ff4444' : '#00ff88'}">${failedPipelines}</div>
+          <div class="stat-label">Failed Pipelines</div>
+        </div>
+      </div>
+    `;
+  }
+}

ts_web/elements/views/pipelines/index.ts

@@ -0,0 +1,207 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-pipelines')
+export class GitopsViewPipelines extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  @state()
+  accessor selectedConnectionId: string = '';
+
+  @state()
+  accessor selectedProjectId: string = '';
+
+  constructor() {
+    super();
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    const dataSub = appstate.dataStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.dataState = s; });
+    this.rxSubscriptions.push(dataSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .status-badge {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+      .status-success { background: #1a3a1a; color: #00ff88; }
+      .status-failed { background: #3a1a1a; color: #ff4444; }
+      .status-running { background: #1a2a3a; color: #00acff; }
+      .status-pending { background: #3a3a1a; color: #ffaa00; }
+      .status-canceled { background: #2a2a2a; color: #999; }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    const projectOptions = this.dataState.projects.map((p) => ({
+      option: p.fullPath || p.name,
+      key: p.id,
+    }));
+
+    return html`
+      <div class="view-title">Pipelines</div>
+      <div class="view-description">View and manage CI/CD pipelines</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Connection'}
+          .options=${connectionOptions}
+          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedConnectionId = e.detail.key;
+            this.loadProjects();
+          }}
+        ></dees-input-dropdown>
+        <dees-input-dropdown
+          .label=${'Project'}
+          .options=${projectOptions}
+          .selectedOption=${projectOptions.find((o) => o.key === this.selectedProjectId) || projectOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedProjectId = e.detail.key;
+            this.loadPipelines();
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.loadPipelines()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'CI/CD Pipelines'}
+        .heading2=${'Pipeline runs for the selected project'}
+        .data=${this.dataState.pipelines}
+        .displayFunction=${(item: any) => ({
+          ID: item.id,
+          Status: item.status,
+          Ref: item.ref,
+          Duration: item.duration ? `${Math.round(item.duration)}s` : '-',
+          Source: item.source,
+          Created: item.createdAt ? new Date(item.createdAt).toLocaleString() : '-',
+        })}
+        .dataActions=${[
+          {
+            name: 'View Jobs',
+            iconName: 'lucide:list',
+            action: async (item: any) => { await this.viewJobs(item); },
+          },
+          {
+            name: 'Retry',
+            iconName: 'lucide:refresh-cw',
+            action: async (item: any) => {
+              await appstate.dataStatePart.dispatchAction(appstate.retryPipelineAction, {
+                connectionId: this.selectedConnectionId,
+                projectId: this.selectedProjectId,
+                pipelineId: item.id,
+              });
+            },
+          },
+          {
+            name: 'Cancel',
+            iconName: 'lucide:x-circle',
+            action: async (item: any) => {
+              await appstate.dataStatePart.dispatchAction(appstate.cancelPipelineAction, {
+                connectionId: this.selectedConnectionId,
+                projectId: this.selectedProjectId,
+                pipelineId: item.id,
+              });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    const conns = appstate.connectionsStatePart.getState().connections;
+    if (conns.length > 0 && !this.selectedConnectionId) {
+      this.selectedConnectionId = conns[0].id;
+      await this.loadProjects();
+    }
+  }
+
+  private async loadProjects() {
+    if (!this.selectedConnectionId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
+      connectionId: this.selectedConnectionId,
+    });
+  }
+
+  private async loadPipelines() {
+    if (!this.selectedConnectionId || !this.selectedProjectId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchPipelinesAction, {
+      connectionId: this.selectedConnectionId,
+      projectId: this.selectedProjectId,
+    });
+  }
+
+  private async viewJobs(pipeline: any) {
+    await appstate.dataStatePart.dispatchAction(appstate.fetchPipelineJobsAction, {
+      connectionId: this.selectedConnectionId,
+      projectId: this.selectedProjectId,
+      pipelineId: pipeline.id,
+    });
+
+    const jobs = appstate.dataStatePart.getState().pipelineJobs;
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: `Pipeline #${pipeline.id} - Jobs`,
+      content: html`
+        <style>
+          .jobs-list { color: #fff; }
+          .job-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #333; }
+          .job-name { font-weight: 600; }
+          .job-status { text-transform: uppercase; font-size: 12px; }
+        </style>
+        <div class="jobs-list">
+          ${jobs.map((job: any) => html`
+            <div class="job-item">
+              <span class="job-name">${job.name} (${job.stage})</span>
+              <span class="job-status">${job.status} - ${job.duration ? `${Math.round(job.duration)}s` : '-'}</span>
+            </div>
+          `)}
+          ${jobs.length === 0 ? html`<p>No jobs found.</p>` : ''}
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Close', action: async (modal: any) => { modal.destroy(); } },
+      ],
+    });
+  }
+}

ts_web/elements/views/projects/index.ts

@@ -0,0 +1,120 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-projects')
+export class GitopsViewProjects extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  @state()
+  accessor selectedConnectionId: string = '';
+
+  constructor() {
+    super();
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    const dataSub = appstate.dataStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.dataState = s; });
+    this.rxSubscriptions.push(dataSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    return html`
+      <div class="view-title">Projects</div>
+      <div class="view-description">Browse projects from your connected providers</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Connection'}
+          .options=${connectionOptions}
+          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedConnectionId = e.detail.key;
+            this.loadProjects();
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.loadProjects()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Projects'}
+        .heading2=${'Repositories from the selected connection'}
+        .data=${this.dataState.projects}
+        .displayFunction=${(item: any) => ({
+          Name: item.name,
+          Path: item.fullPath,
+          Visibility: item.visibility,
+          Branch: item.defaultBranch,
+          'Last Activity': item.lastActivity ? new Date(item.lastActivity).toLocaleDateString() : '-',
+        })}
+        .dataActions=${[
+          {
+            name: 'View Secrets',
+            iconName: 'lucide:key',
+            action: async (item: any) => {
+              appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'secrets' });
+            },
+          },
+          {
+            name: 'View Pipelines',
+            iconName: 'lucide:play',
+            action: async (item: any) => {
+              appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'pipelines' });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    const conns = appstate.connectionsStatePart.getState().connections;
+    if (conns.length > 0 && !this.selectedConnectionId) {
+      this.selectedConnectionId = conns[0].id;
+      await this.loadProjects();
+    }
+  }
+
+  private async loadProjects() {
+    if (!this.selectedConnectionId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
+      connectionId: this.selectedConnectionId,
+    });
+  }
+}

ts_web/elements/views/secrets/index.ts

@@ -0,0 +1,234 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-secrets')
+export class GitopsViewSecrets extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  @state()
+  accessor selectedConnectionId: string = '';
+
+  @state()
+  accessor selectedScope: 'project' | 'group' = 'project';
+
+  @state()
+  accessor selectedScopeId: string = '';
+
+  constructor() {
+    super();
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    const dataSub = appstate.dataStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.dataState = s; });
+    this.rxSubscriptions.push(dataSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    const scopeOptions = [
+      { option: 'Project', key: 'project' },
+      { option: 'Group', key: 'group' },
+    ];
+
+    const entityOptions = this.selectedScope === 'project'
+      ? this.dataState.projects.map((p) => ({ option: p.fullPath || p.name, key: p.id }))
+      : this.dataState.groups.map((g) => ({ option: g.fullPath || g.name, key: g.id }));
+
+    return html`
+      <div class="view-title">Secrets</div>
+      <div class="view-description">Manage CI/CD secrets and variables</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Connection'}
+          .options=${connectionOptions}
+          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedConnectionId = e.detail.key;
+            this.loadEntities();
+          }}
+        ></dees-input-dropdown>
+        <dees-input-dropdown
+          .label=${'Scope'}
+          .options=${scopeOptions}
+          .selectedOption=${scopeOptions.find((o) => o.key === this.selectedScope)}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedScope = e.detail.key as 'project' | 'group';
+            this.loadEntities();
+          }}
+        ></dees-input-dropdown>
+        <dees-input-dropdown
+          .label=${this.selectedScope === 'project' ? 'Project' : 'Group'}
+          .options=${entityOptions}
+          .selectedOption=${entityOptions.find((o) => o.key === this.selectedScopeId) || entityOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedScopeId = e.detail.key;
+            this.loadSecrets();
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.addSecret()}>Add Secret</dees-button>
+        <dees-button @click=${() => this.loadSecrets()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Secrets'}
+        .heading2=${'CI/CD variables for the selected entity'}
+        .data=${this.dataState.secrets}
+        .displayFunction=${(item: any) => ({
+          Key: item.key,
+          Value: item.masked ? '******' : item.value,
+          Protected: item.protected ? 'Yes' : 'No',
+          Environment: item.environment || '*',
+        })}
+        .dataActions=${[
+          {
+            name: 'Edit',
+            iconName: 'lucide:edit',
+            action: async (item: any) => { await this.editSecret(item); },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash2',
+            action: async (item: any) => {
+              await appstate.dataStatePart.dispatchAction(appstate.deleteSecretAction, {
+                connectionId: this.selectedConnectionId,
+                scope: this.selectedScope,
+                scopeId: this.selectedScopeId,
+                key: item.key,
+              });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    const conns = appstate.connectionsStatePart.getState().connections;
+    if (conns.length > 0 && !this.selectedConnectionId) {
+      this.selectedConnectionId = conns[0].id;
+      await this.loadEntities();
+    }
+  }
+
+  private async loadEntities() {
+    if (!this.selectedConnectionId) return;
+    if (this.selectedScope === 'project') {
+      await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
+        connectionId: this.selectedConnectionId,
+      });
+    } else {
+      await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, {
+        connectionId: this.selectedConnectionId,
+      });
+    }
+  }
+
+  private async loadSecrets() {
+    if (!this.selectedConnectionId || !this.selectedScopeId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchSecretsAction, {
+      connectionId: this.selectedConnectionId,
+      scope: this.selectedScope,
+      scopeId: this.selectedScopeId,
+    });
+  }
+
+  private async addSecret() {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Add Secret',
+      content: html`
+        <style>.form-row { margin-bottom: 16px; }</style>
+        <div class="form-row">
+          <dees-input-text .label=${'Key'} .key=${'key'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Value'} .key=${'value'} type="password"></dees-input-text>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Create',
+          action: async (modal: any) => {
+            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text');
+            const data: any = {};
+            for (const input of inputs) { data[input.key] = input.value || ''; }
+            await appstate.dataStatePart.dispatchAction(appstate.createSecretAction, {
+              connectionId: this.selectedConnectionId,
+              scope: this.selectedScope,
+              scopeId: this.selectedScopeId,
+              key: data.key,
+              value: data.value,
+            });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async editSecret(item: any) {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: `Edit Secret: ${item.key}`,
+      content: html`
+        <style>.form-row { margin-bottom: 16px; }</style>
+        <div class="form-row">
+          <dees-input-text .label=${'Value'} .key=${'value'} type="password"></dees-input-text>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Update',
+          action: async (modal: any) => {
+            const input = modal.shadowRoot.querySelector('dees-input-text');
+            await appstate.dataStatePart.dispatchAction(appstate.updateSecretAction, {
+              connectionId: this.selectedConnectionId,
+              scope: this.selectedScope,
+              scopeId: this.selectedScopeId,
+              key: item.key,
+              value: input?.value || '',
+            });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+}