@oasisomniverse/angular 1.0.0

package/src/components/onode/onode.component.ts

@@ -0,0 +1,73 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-onode',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="nd-shell">
+      <div class="nd-header"><h2 class="nd-title">🖥️ ONODE</h2><p class="nd-sub">Your personal OASIS node. Store, validate, and relay data.</p></div>
+      <div class="nd-status-row">
+        <div class="nd-status-pill" [class.nd-status-pill--running]="running()">{{ running() ? '● Running' : '○ Stopped' }}</div>
+        <button class="nd-btn" [class.nd-btn--stop]="running()" (click)="running.set(!running())">{{ running() ? 'Stop Node' : 'Start Node' }}</button>
+      </div>
+      @if (running()) {
+        <div class="nd-metrics">
+          @for (m of metrics; track m.label) {
+            <div class="nd-metric"><div class="nd-metric-val">{{ m.value }}</div><div class="nd-metric-label">{{ m.label }}</div></div>
+          }
+        </div>
+        <div class="nd-logs-header">Node Logs</div>
+        <div class="nd-logs">
+          @for (l of logs; track l.time) {
+            <div class="nd-log nd-log--{{ l.level }}">
+              <span class="nd-log-time">{{ l.time }}</span>
+              <span class="nd-log-level">[{{ l.level.toUpperCase() }}]</span>
+              <span class="nd-log-msg">{{ l.message }}</span>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .nd-shell{display:flex;flex-direction:column;gap:18px}
+    .nd-header{text-align:center}
+    .nd-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}
+    .nd-sub{font-size:13px;color:#7a9bbf;margin:0}
+    .nd-status-row{display:flex;align-items:center;gap:14px}
+    .nd-status-pill{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,80,80,.2);border-radius:8px;padding:10px 14px;font-family:'Orbitron',sans-serif;font-size:13px;color:#ff6b6b}
+    .nd-status-pill--running{border-color:rgba(72,220,130,.3);color:#48dc82}
+    .nd-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 20px;cursor:pointer}
+    .nd-btn--stop{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}
+    .nd-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
+    .nd-metric{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:12px;text-align:center}
+    .nd-metric-val{font-family:'Share Tech Mono',monospace;font-size:16px;color:#00c8ff;font-weight:600}
+    .nd-metric-label{font-size:10px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
+    .nd-logs-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}
+    .nd-logs{background:#020a14;border:1px solid rgba(0,200,255,.1);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:5px;max-height:160px;overflow-y:auto;font-family:'Share Tech Mono',monospace}
+    .nd-log{display:flex;gap:10px;font-size:11px}
+    .nd-log-time{color:#4a6a88;flex-shrink:0}
+    .nd-log--info .nd-log-level{color:#00c8ff}
+    .nd-log--warn .nd-log-level{color:#ffb43c}
+    .nd-log--error .nd-log-level{color:#ff6b6b}
+    .nd-log-msg{color:#7a9bbf}
+  `]
+})
+export class OnodeComponent {
+  running = signal(false);
+  metrics = [
+    { label: 'CPU', value: '18%' },
+    { label: 'RAM', value: '2.1 GB' },
+    { label: 'Storage', value: '47 GB' },
+    { label: 'Blocks', value: '12,450' },
+  ];
+  logs = [
+    { time: '09:42:01', level: 'info', message: 'ONODE started. Connecting to ONET…' },
+    { time: '09:42:02', level: 'info', message: 'Connected to 12 peers.' },
+    { time: '09:42:05', level: 'info', message: 'Block #12450 validated.' },
+    { time: '09:42:08', level: 'warn', message: 'Peer ONODE-77 latency high: 340ms.' },
+    { time: '09:42:12', level: 'info', message: 'Data sync complete. 100% coverage.' },
+  ];
+}

package/src/components/provider/activity-pub.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-activity-pub',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">🌐</div><h2 class="pi-title">ActivityPub</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">ActivityPub</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">activitypub.rocks</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">Federated social networking protocol for the decentralized web.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+    .pi-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+  `]
+})
+export class ActivityPubComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/compare-provider-speeds.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-compare-provider-speeds',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="cps-shell">
+      <div class="cps-header"><span>⚡</span><h2 class="cps-title">Compare Provider Speeds</h2></div>
+      <div class="cps-list">
+        @for (p of providers(); track p.name) {
+          <div class="cps-row">
+            <div class="cps-name">{{ p.name }}</div>
+            <div class="cps-bar-wrap"><div class="cps-bar" [style.width.%]="p.speed"></div></div>
+            <div class="cps-ms">{{ p.ms }}ms</div>
+          </div>
+        }
+      </div>
+      <div class="cps-footer"><button class="cps-btn" (click)="close.emit()">Close</button></div>
+    </div>
+  `,
+  styles: [`
+    .cps-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .cps-header{display:flex;align-items:center;gap:10px}
+    .cps-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .cps-list{display:flex;flex-direction:column;gap:10px}
+    .cps-row{display:flex;align-items:center;gap:12px}
+    .cps-name{width:120px;font-size:12px;color:#c8dff0;flex-shrink:0}
+    .cps-bar-wrap{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
+    .cps-bar{height:100%;background:linear-gradient(90deg,#00c8ff,#0080ff);border-radius:999px;transition:width .6s}
+    .cps-ms{width:50px;font-size:12px;color:#7a9bbf;text-align:right;flex-shrink:0}
+    .cps-footer{display:flex;justify-content:flex-end}
+    .cps-btn{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 22px;cursor:pointer}
+  `]
+})
+export class CompareProviderSpeedsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  providers = signal([
+    { name: 'Holochain', speed: 95, ms: 12 },
+    { name: 'IPFS', speed: 72, ms: 45 },
+    { name: 'Ethereum', speed: 48, ms: 180 },
+    { name: 'MongoDB', speed: 98, ms: 5 },
+    { name: 'Neo4j', speed: 88, ms: 22 },
+    { name: 'SQLite', speed: 100, ms: 1 },
+  ]);
+}

package/src/components/provider/eosio.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-eosio',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">🔵</div><h2 class="pi-title">EOSIO</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">EOSIO</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">eosio.org</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">High-performance blockchain platform for decentralized applications.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+    .pi-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+  `]
+})
+export class EosioComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/ethereum.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-ethereum',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">💎</div><h2 class="pi-title">Ethereum</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">Ethereum</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">ethereum.org</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">Decentralized smart contract platform for DeFi, NFTs and dApps.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+    .pi-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+  `]
+})
+export class EthereumComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/holochain.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-holochain',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">🧬</div><h2 class="pi-title">Holochain</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">Holochain</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">holochain.org</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">Distributed peer-to-peer computing platform without global consensus.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+    .pi-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+  `]
+})
+export class HolochainComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/ipfs.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-ipfs',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">📁</div><h2 class="pi-title">IPFS</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">IPFS</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">ipfs.io</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">InterPlanetary File System — distributed, peer-to-peer hypermedia protocol.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+    .pi-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+  `]
+})
+export class IpfsComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/manage-auto-fail-over.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-auto-fail-over',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>🔄</span><h2 class="mf-title">Manage Auto Fail-Over</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Primary Provider</label><input class="mf-inp" placeholder="Primary Provider..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Fallback Provider 1</label><input class="mf-inp" placeholder="Fallback Provider 1..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Fallback Provider 2</label><input class="mf-inp" placeholder="Fallback Provider 2..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Fail-Over Threshold</label><input class="mf-inp" placeholder="Fail-Over Threshold..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Retry Attempts</label><input class="mf-inp" placeholder="Retry Attempts..." /></div>
+      </div>
+      <div class="mf-footer">
+        <button class="mf-save" (click)="save()">Save</button>
+        <button class="mf-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .mf-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .mf-header{display:flex;align-items:center;gap:10px}
+    .mf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .mf-body{display:flex;flex-direction:column;gap:12px}
+    .mf-field{display:flex;flex-direction:column;gap:5px}
+    .mf-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:#7a9bbf;text-transform:uppercase}
+    .mf-inp{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .mf-inp:focus{border-color:rgba(0,200,255,.6)}
+    .mf-footer{display:flex;gap:10px;justify-content:flex-end}
+    .mf-save{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 22px;cursor:pointer}
+    .mf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:10px 18px;cursor:pointer}
+  `]
+})
+export class ManageAutoFailOverComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/provider/manage-auto-replicaton.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-auto-replicaton',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>📋</span><h2 class="mf-title">Manage Auto Replication</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Source Provider</label><input class="mf-inp" placeholder="Source Provider..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Target Providers</label><input class="mf-inp" placeholder="Target Providers..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Replication Mode</label><input class="mf-inp" placeholder="Replication Mode..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Schedule</label><input class="mf-inp" placeholder="Schedule..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Max Copies</label><input class="mf-inp" placeholder="Max Copies..." /></div>
+      </div>
+      <div class="mf-footer">
+        <button class="mf-save" (click)="save()">Save</button>
+        <button class="mf-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .mf-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .mf-header{display:flex;align-items:center;gap:10px}
+    .mf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .mf-body{display:flex;flex-direction:column;gap:12px}
+    .mf-field{display:flex;flex-direction:column;gap:5px}
+    .mf-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:#7a9bbf;text-transform:uppercase}
+    .mf-inp{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .mf-inp:focus{border-color:rgba(0,200,255,.6)}
+    .mf-footer{display:flex;gap:10px;justify-content:flex-end}
+    .mf-save{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 22px;cursor:pointer}
+    .mf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:10px 18px;cursor:pointer}
+  `]
+})
+export class ManageAutoReplicatonComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/provider/manage-load-balancing.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-load-balancing',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="mf-shell">
+      <div class="mf-header"><span>⚖️</span><h2 class="mf-title">Manage Load Balancing</h2></div>
+      <div class="mf-body">
+        <div class="mf-field"><label class="mf-lbl">Algorithm</label><input class="mf-inp" placeholder="Algorithm..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Providers</label><input class="mf-inp" placeholder="Providers..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Weight Distribution</label><input class="mf-inp" placeholder="Weight Distribution..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Health Check Interval</label><input class="mf-inp" placeholder="Health Check Interval..." /></div>
+        <div class="mf-field"><label class="mf-lbl">Sticky Sessions</label><input class="mf-inp" placeholder="Sticky Sessions..." /></div>
+      </div>
+      <div class="mf-footer">
+        <button class="mf-save" (click)="save()">Save</button>
+        <button class="mf-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .mf-shell{display:flex;flex-direction:column;gap:18px;padding:20px}
+    .mf-header{display:flex;align-items:center;gap:10px}
+    .mf-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .mf-body{display:flex;flex-direction:column;gap:12px}
+    .mf-field{display:flex;flex-direction:column;gap:5px}
+    .mf-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:#7a9bbf;text-transform:uppercase}
+    .mf-inp{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:8px;color:#fff;font-size:13px;padding:10px 14px;outline:none}
+    .mf-inp:focus{border-color:rgba(0,200,255,.6)}
+    .mf-footer{display:flex;gap:10px;justify-content:flex-end}
+    .mf-save{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;padding:10px 22px;cursor:pointer}
+    .mf-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:10px 18px;cursor:pointer}
+  `]
+})
+export class ManageLoadBalancingComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  save() { this.close.emit(); }
+}

package/src/components/provider/manage-providers.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-manage-providers',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="popup-shell">
+      <div class="popup-icon">⚙️</div>
+      <h2 class="popup-title">Manage Providers</h2>
+      <p class="popup-body">UI Coming Soon — access this feature via the OASIS API from the Developer menu.</p>
+      <button class="popup-btn" (click)="close.emit()">OK</button>
+    </div>
+  `,
+  styles: [`
+    .popup-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;text-align:center}
+    .popup-icon{font-size:48px}
+    .popup-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .popup-body{font-size:13px;color:#a8bfd8;line-height:1.6;margin:0;max-width:380px}
+    .popup-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 28px;cursor:pointer;transition:opacity .2s}
+    .popup-btn:hover{opacity:.85}
+  `]
+})
+export class ManageProvidersComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+}

package/src/components/provider/mongo-db.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-mongo-db',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">🍃</div><h2 class="pi-title">MongoDB</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">MongoDB</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">mongodb.com</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">Document-oriented NoSQL database for modern applications.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+    .pi-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+  `]
+})
+export class MongoDbComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}

package/src/components/provider/neo4j.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oasis-neo4j',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="pi-shell">
+      <div class="pi-header"><div class="pi-icon">🔗</div><h2 class="pi-title">Neo4j</h2></div>
+      <div class="pi-body">
+        <div class="pi-row"><span class="pi-label">Provider</span><span class="pi-value">Neo4j</span></div>
+        <div class="pi-row"><span class="pi-label">Website</span><span class="pi-value">neo4j.com</span></div>
+        <div class="pi-row"><span class="pi-label">Status</span><span class="pi-badge pi-badge--active">Active</span></div>
+        <div class="pi-row"><span class="pi-label">Description</span><span class="pi-value" style="max-width:240px;text-align:right;font-size:12px;color:#a8bfd8">Native graph database for connected data and relationship-driven applications.</span></div>
+      </div>
+      <div class="pi-footer">
+        <button class="pi-btn-primary" (click)="connect()">Connect</button>
+        <button class="pi-btn-cancel" (click)="close.emit()">Cancel</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+        .pi-shell{display:flex;flex-direction:column;gap:16px;padding:20px}
+    .pi-header{display:flex;align-items:center;gap:12px}
+    .pi-icon{font-size:36px}
+    .pi-title{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;margin:0}
+    .pi-body{background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
+    .pi-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
+    .pi-label{color:#7a9bbf}
+    .pi-value{color:#c8dff0;font-weight:500}
+    .pi-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 9px;border:1px solid currentColor}
+    .pi-badge--active{color:#00c864;border-color:rgba(0,200,100,.3)}
+    .pi-badge--inactive{color:#7a9bbf;border-color:rgba(122,155,191,.25)}
+    .pi-footer{display:flex;gap:10px;justify-content:flex-end}
+    .pi-btn-primary{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+    .pi-btn-cancel{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:8px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer}
+  `]
+})
+export class Neo4jComponent {
+  @Input() show = false;
+  @Output() close = new EventEmitter<void>();
+  connect() { this.close.emit(); }
+}