+
+ `,
+ styles: [`
+ .claude-panel {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background: #1e1e1e;
+ color: #ccc;
+ }
+ .panel-header {
+ display: flex;
+ align-items: center;
+ padding: 8px 12px;
+ background: #333;
+ border-bottom: 1px solid #444;
+ gap: 8px;
+ }
+ .panel-title {
+ flex: 1;
+ font-size: 11px;
+ font-weight: 600;
+ color: #999;
+ letter-spacing: 0.5px;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+ .panel-title i {
+ color: #6b9eff;
+ }
+ .connection-status {
+ font-size: 10px;
+ padding: 2px 8px;
+ border-radius: 10px;
+ background: #5a3030;
+ color: #ff8080;
+ }
+ .connection-status.connected {
+ background: #305a30;
+ color: #80ff80;
+ }
+ .panel-btn {
+ background: none;
+ border: none;
+ color: #888;
+ cursor: pointer;
+ padding: 4px 6px;
+ border-radius: 3px;
+ }
+ .panel-btn:hover {
+ background: #444;
+ color: #fff;
+ }
+ .messages-container {
+ flex: 1;
+ overflow-y: auto;
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: #666;
+ text-align: center;
+ }
+ .empty-state i {
+ font-size: 48px;
+ margin-bottom: 16px;
+ color: #444;
+ }
+ .empty-state .hint {
+ font-size: 12px;
+ color: #555;
+ }
+ .message {
+ padding: 12px;
+ border-radius: 8px;
+ background: #2d2d2d;
+ }
+ .message.user {
+ background: #1a3a5c;
+ margin-left: 24px;
+ }
+ .message.assistant {
+ background: #2d2d2d;
+ margin-right: 24px;
+ }
+ .message.system {
+ background: #3d3020;
+ font-size: 12px;
+ text-align: center;
+ }
+ .message-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+ font-size: 11px;
+ color: #888;
+ }
+ .role-icon {
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #444;
+ border-radius: 50%;
+ font-size: 10px;
+ }
+ .message.user .role-icon {
+ background: #2a5a8c;
+ }
+ .message.assistant .role-icon {
+ background: #4a3a6c;
+ color: #a0a0ff;
+ }
+ .role-label {
+ font-weight: 500;
+ text-transform: capitalize;
+ }
+ .timestamp {
+ margin-left: auto;
+ font-size: 10px;
+ }
+ .message-content {
+ font-size: 13px;
+ line-height: 1.5;
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+ .streaming .message-content {
+ border-right: 2px solid #6b9eff;
+ animation: blink 0.8s infinite;
+ }
+ @keyframes blink {
+ 0%, 50% { border-color: #6b9eff; }
+ 51%, 100% { border-color: transparent; }
+ }
+ .typing-indicator {
+ display: flex;
+ gap: 3px;
+ margin-left: 8px;
+ }
+ .typing-indicator span {
+ width: 4px;
+ height: 4px;
+ background: #6b9eff;
+ border-radius: 50%;
+ animation: bounce 1.2s infinite;
+ }
+ .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+ .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+ @keyframes bounce {
+ 0%, 60%, 100% { transform: translateY(0); }
+ 30% { transform: translateY(-4px); }
+ }
+ .input-area {
+ display: flex;
+ padding: 12px;
+ background: #252526;
+ border-top: 1px solid #444;
+ gap: 8px;
+ }
+ .input-area textarea {
+ flex: 1;
+ background: #1e1e1e;
+ border: 1px solid #444;
+ border-radius: 6px;
+ padding: 10px 12px;
+ color: #ccc;
+ font-family: inherit;
+ font-size: 13px;
+ resize: none;
+ min-height: 40px;
+ max-height: 120px;
+ }
+ .input-area textarea:focus {
+ outline: none;
+ border-color: #6b9eff;
+ }
+ .input-area textarea::placeholder {
+ color: #666;
+ }
+ .send-btn {
+ background: #0e639c;
+ border: none;
+ border-radius: 6px;
+ padding: 10px 16px;
+ color: #fff;
+ cursor: pointer;
+ font-size: 14px;
+ }
+ .send-btn:hover:not(:disabled) {
+ background: #1177bb;
+ }
+ .send-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+ `]
+})
+export class ClaudePanelComponent implements OnInit, OnDestroy {
+ @ViewChild('messagesContainer') messagesContainer!: ElementRef;
+ @ViewChild('inputField') inputField!: ElementRef;
+
+ messages: Message[] = [];
+ inputText: string = '';
+ isStreaming: boolean = false;
+ streamingContent: string = '';
+ connected: boolean = false;
+
+ private ws: WebSocket | null = null;
+ private wsUrl: string = 'ws://localhost:9877/ws';
+
+ ngOnInit(): void {
+ this.connect();
+ }
+
+ ngOnDestroy(): void {
+ this.disconnect();
+ }
+
+ connect(): void {
+ if (this.ws) {
+ this.disconnect();
+ }
+
+ try {
+ this.ws = new WebSocket(this.wsUrl);
+
+ this.ws.onopen = () => {
+ this.connected = true;
+ this.addSystemMessage('Connected to Core');
+ // Subscribe to claude channel for responses
+ this.sendWsMessage({ type: 'subscribe', data: 'claude' });
+ };
+
+ this.ws.onmessage = (event) => {
+ this.handleWsMessage(event.data);
+ };
+
+ this.ws.onclose = () => {
+ this.connected = false;
+ this.addSystemMessage('Disconnected from Core');
+ };
+
+ this.ws.onerror = (error) => {
+ console.error('WebSocket error:', error);
+ this.connected = false;
+ };
+ } catch (error) {
+ console.error('Failed to connect:', error);
+ }
+ }
+
+ disconnect(): void {
+ if (this.ws) {
+ this.ws.close();
+ this.ws = null;
+ }
+ this.connected = false;
+ }
+
+ handleWsMessage(data: string): void {
+ try {
+ const msg: WsMessage = JSON.parse(data);
+
+ switch (msg.type) {
+ case 'claude_response':
+ this.isStreaming = false;
+ this.messages.push({
+ role: 'assistant',
+ content: msg.data,
+ timestamp: new Date()
+ });
+ this.scrollToBottom();
+ break;
+
+ case 'claude_stream':
+ this.isStreaming = true;
+ this.streamingContent = (this.streamingContent || '') + msg.data;
+ this.scrollToBottom();
+ break;
+
+ case 'claude_stream_end':
+ this.isStreaming = false;
+ if (this.streamingContent) {
+ this.messages.push({
+ role: 'assistant',
+ content: this.streamingContent,
+ timestamp: new Date()
+ });
+ this.streamingContent = '';
+ }
+ this.scrollToBottom();
+ break;
+
+ case 'error':
+ this.addSystemMessage(`Error: ${msg.data}`);
+ this.isStreaming = false;
+ break;
+ }
+ } catch (error) {
+ console.error('Failed to parse message:', error);
+ }
+ }
+
+ sendWsMessage(msg: any): void {
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+ this.ws.send(JSON.stringify(msg));
+ }
+ }
+
+ sendMessage(): void {
+ const text = this.inputText.trim();
+ if (!text) return;
+
+ this.messages.push({
+ role: 'user',
+ content: text,
+ timestamp: new Date()
+ });
+
+ // Send to backend via WebSocket
+ this.sendWsMessage({
+ type: 'claude_message',
+ data: text
+ });
+
+ this.inputText = '';
+ this.isStreaming = true;
+ this.streamingContent = '';
+ this.scrollToBottom();
+
+ // Focus back on input
+ setTimeout(() => {
+ if (this.inputField) {
+ this.inputField.nativeElement.focus();
+ }
+ }, 0);
+ }
+
+ onEnterKey(event: Event): void {
+ const keyEvent = event as KeyboardEvent;
+ if (!keyEvent.shiftKey) {
+ event.preventDefault();
+ this.sendMessage();
+ }
+ }
+
+ clearMessages(): void {
+ this.messages = [];
+ this.streamingContent = '';
+ this.isStreaming = false;
+ }
+
+ addSystemMessage(content: string): void {
+ this.messages.push({
+ role: 'system',
+ content,
+ timestamp: new Date()
+ });
+ this.scrollToBottom();
+ }
+
+ formatTime(date: Date): string {
+ return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+ }
+
+ scrollToBottom(): void {
+ setTimeout(() => {
+ if (this.messagesContainer) {
+ const el = this.messagesContainer.nativeElement;
+ el.scrollTop = el.scrollHeight;
+ }
+ }, 0);
+ }
+}
diff --git a/cmd/core-gui/frontend/src/app/developer/editor.component.ts b/cmd/core-gui/frontend/src/app/developer/editor.component.ts
new file mode 100644
index 0000000..485a4db
--- /dev/null
+++ b/cmd/core-gui/frontend/src/app/developer/editor.component.ts
@@ -0,0 +1,412 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { Events } from '@wailsio/runtime';
+import * as IDE from '@lthn/ide/service';
+import { DirectoryEntry } from '@lthn/ide/models';
+import { SelectDirectory } from '@lthn/core/display/service';
+
+interface TreeNode extends DirectoryEntry {
+ expanded?: boolean;
+ children?: TreeNode[];
+ level?: number;
+}
+
+@Component({
+ selector: 'dev-edit',
+ standalone: true,
+ imports: [MonacoEditorModule, FormsModule, CommonModule],
+ template: `
+
+
+
+ CLAUDE
+
+
+ {{ connected ? 'Connected' : 'Disconnected' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ PROJECT
+
+
+
+ @if (workspaceRoot) {
+ {{ workspaceName }}
+
+ @for (node of fileTree; track node.path) {
+
+ } @else {
+
+
+ }
+ No folder open
+ +
+ @if (filePath) {
+
+ }
+
+
+
+
+ @if (node.isDir) {
+
+
+ } @else {
+
+ }
+ {{ node.name }}
+
+ @if (node.isDir && node.expanded && node.children) {
+ @for (child of node.children; track child.path) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Current Mining Stats +
+
+
+
+
+ Hashrate
+12.5 KH/s
+
+
+ Temperature
+65°C
+
+
+ Uptime
+2h 15m
+
+
+ Blocks Found
+3
+
+
+ + Installed Software Version +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ `,
+})
+export class SetupComponent implements OnInit, OnDestroy {
+ hasChildRoute: boolean = false;
+ currentStep: number = 1; // 1: Start Install, 2: Config, 3: Installing, 4: Welcome
+ progressBarWidth: string = '8%'; // Initial width for step 1
+ private routerSubscription: Subscription | undefined;
+
+ constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
+
+ ngOnInit(): void {
+ this.checkChildRoute();
+ this.routerSubscription = this.router.events.pipe(
+ filter(event => event instanceof NavigationEnd)
+ ).subscribe(() => {
+ this.checkChildRoute();
+ this.updateProgressBar();
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.routerSubscription?.unsubscribe();
+ }
+
+ checkChildRoute(): void {
+ this.hasChildRoute = this.activatedRoute.firstChild !== null;
+ }
+
+ updateProgressBar(): void {
+ const currentPath = this.router.url;
+ if (currentPath.includes('/setup/full') || currentPath.includes('/setup/blockchain') || currentPath.includes('/setup/gateway-client') || currentPath.includes('/setup/seed-node')) {
+ this.currentStep = 2; // Config stage
+ this.progressBarWidth = '33%';
+ } else if (currentPath === '/setup') {
+ this.currentStep = 1; // Start Install stage
+ this.progressBarWidth = '8%';
+ } else {
+ // Default or other stages, can be expanded later
+ this.currentStep = 1; // Fallback
+ this.progressBarWidth = '8%';
+ }
+ }
+}
diff --git a/cmd/core-gui/frontend/src/app/system/setup/blockchain.component.ts b/cmd/core-gui/frontend/src/app/system/setup/blockchain.component.ts
new file mode 100644
index 0000000..85dd40d
--- /dev/null
+++ b/cmd/core-gui/frontend/src/app/system/setup/blockchain.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-setup-blockchain',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+ Lethean VPN Setup
+
+
+
+
+
+
+
+ + Welcome to Lethean Setup +
++ Please choose your setup option +
+
+
+
+
+
+
+
+
+ `,
+})
+export class BlockchainSetupComponent {}
diff --git a/cmd/core-gui/frontend/src/app/system/setup/full.component.ts b/cmd/core-gui/frontend/src/app/system/setup/full.component.ts
new file mode 100644
index 0000000..a35e6d5
--- /dev/null
+++ b/cmd/core-gui/frontend/src/app/system/setup/full.component.ts
@@ -0,0 +1,207 @@
+import {Component, signal} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {Router} from '@angular/router';
+import {SelectDirectory} from '@lthn/core/display/service';
+import {Save} from '@lthn/core/config/service';
+
+@Component({
+ selector: 'app-full-setup',
+ standalone: true,
+ imports: [FormsModule],
+ template: `
+
+
+
+
+ + Blockchain Setup +
++ Configure your blockchain settings. +
+
+
+
+
+
+ `,
+})
+export class FullComponent {
+ currentStep = signal(1);
+ username = '';
+ installDirectory = '~/lethean';
+
+ constructor(private router: Router) {
+ }
+
+ async selectInstallDirectory(): Promise+ Full Installation Wizard +
+ +
+
+
+
+
+
+
+
+ `,
+})
+export class GatewayClientSetupComponent {}
diff --git a/cmd/core-gui/frontend/src/app/system/setup/seed-node.component.ts b/cmd/core-gui/frontend/src/app/system/setup/seed-node.component.ts
new file mode 100644
index 0000000..03b5305
--- /dev/null
+++ b/cmd/core-gui/frontend/src/app/system/setup/seed-node.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-setup-seed-node',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+
+
+
+
+ + Gateway Client Setup +
++ Configure your gateway client settings. +
+
+
+
+
+
+ `,
+})
+export class SeedNodeSetupComponent {}
diff --git a/cmd/core-gui/frontend/src/environments/environment.prod.ts b/cmd/core-gui/frontend/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/cmd/core-gui/frontend/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/cmd/core-gui/frontend/src/environments/environment.ts b/cmd/core-gui/frontend/src/environments/environment.ts
index 865bb20..ffe8aed 100644
--- a/cmd/core-gui/frontend/src/environments/environment.ts
+++ b/cmd/core-gui/frontend/src/environments/environment.ts
@@ -1,13 +1,3 @@
-import { appInfo, applicationBase } from './environment.common';
-
export const environment = {
- appInfo,
- application: {
- ...applicationBase,
- angular: `${applicationBase.angular} PROD`,
- },
- urlNews: './assets/params/json/mock/trailers.json',
- urlMovies: './assets/params/json/mock/movies.json',
- useMock: true,
- backend: 'http://localhost:3000',
+ production: false
};
diff --git a/cmd/core-gui/frontend/src/frame/application.frame.html b/cmd/core-gui/frontend/src/frame/application.frame.html
new file mode 100644
index 0000000..79b1c6c
--- /dev/null
+++ b/cmd/core-gui/frontend/src/frame/application.frame.html
@@ -0,0 +1,161 @@
+
+
+
+
+ + Seed Node Setup +
++ Configure your seed node settings. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (userMenuOpen) {
+
+
+
+
+ Documentation
+
+ @for (item of userNavigation; track item.name) {
+
+
+ {{ item.name }}
+
+ }
+
+
+ }
+
+ Switch Role
+
+ @for (item of roleNavigation; track item.name) {
+
+ {{ item.name }}
+
+ }
+
+
+
+ @if (featureKey && !isFeatureEnabled) {
+
+
+
+ } @else {
+ {{ featureKey | titlecase }} is Disabled
+Activate {{ featureKey }} to access its features.
+ +
+
+ `
+})
+export class SystemTrayFrame {
+ settingsMenuOpen = false;
+
+ settingsNavigation = [
+ { name: 'Settings', href: '#' },
+ { name: 'About', href: '#' },
+ { name: 'Check for Updates...', href: '#' },
+ ];
+}
diff --git a/cmd/core-gui/frontend/src/index.html b/cmd/core-gui/frontend/src/index.html
index c35788c..3af61ec 100644
--- a/cmd/core-gui/frontend/src/index.html
+++ b/cmd/core-gui/frontend/src/index.html
@@ -1,21 +1,13 @@
-
+
-
+
+
+ 
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+ -
+
-
+
Status: Connected
+
+ -
+
IP: 127.0.0.1
+
+ -
+
Uptime: 00:00:00
+
+
+
+
+