feat: add Card and Progress components, utility functions, and improve styles

- Introduced Card component with CardHeader, CardTitle, and CardContent subcomponents for better UI structure.
- Added Progress component to visually represent progress with customizable thresholds.
- Created utility function `cn` for conditional class names using clsx and tailwind-merge.
- Updated styles to integrate Tailwind CSS and improved base styles for better consistency.
- Configured Tailwind CSS for dark mode and extended theme with custom fonts and animations.
- Added TypeScript configuration for better type safety and module resolution.
- Enhanced Vite configuration with path aliasing for cleaner imports.
- Updated Wails backend definitions to include new process detail and GPU process info structures.
This commit is contained in:
Jonathan Atta
2026-03-11 17:09:25 +01:00
parent 17beab746e
commit 9ba9b80b8b
16 changed files with 2156 additions and 107 deletions

View File

@@ -1,5 +1,25 @@
export namespace backend {
export class GPUProcessInfo {
pid: number;
name: string;
type: string;
vram_mb: number;
ram: number;
static createFrom(source: any = {}) {
return new GPUProcessInfo(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.pid = source["pid"];
this.name = source["name"];
this.type = source["type"];
this.vram_mb = source["vram_mb"];
this.ram = source["ram"];
}
}
export class ProcessInfo {
pid: number;
name: string;
@@ -28,6 +48,7 @@ export namespace backend {
gpu_total_mem?: number;
gpu_used_mem?: number;
gpu_util_percent?: number;
gpu_processes?: GPUProcessInfo[];
static createFrom(source: any = {}) {
return new Metrics(source);
@@ -44,6 +65,7 @@ export namespace backend {
this.gpu_total_mem = source["gpu_total_mem"];
this.gpu_used_mem = source["gpu_used_mem"];
this.gpu_util_percent = source["gpu_util_percent"];
this.gpu_processes = this.convertValues(source["gpu_processes"], GPUProcessInfo);
}
convertValues(a: any, classs: any, asMap: boolean = false): any {
@@ -64,6 +86,62 @@ export namespace backend {
return a;
}
}
export class ProcessDetail {
pid: number;
name: string;
exe: string;
cmdline: string;
cwd: string;
status: string;
username: string;
created_at: number;
parent_pid: number;
nice: number;
num_threads: number;
num_fds: number;
cpu_percent: number;
rss: number;
vms: number;
swap: number;
mem_percent: number;
read_bytes: number;
write_bytes: number;
read_ops: number;
write_ops: number;
open_files_count: number;
conn_count: number;
static createFrom(source: any = {}) {
return new ProcessDetail(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.pid = source["pid"];
this.name = source["name"];
this.exe = source["exe"];
this.cmdline = source["cmdline"];
this.cwd = source["cwd"];
this.status = source["status"];
this.username = source["username"];
this.created_at = source["created_at"];
this.parent_pid = source["parent_pid"];
this.nice = source["nice"];
this.num_threads = source["num_threads"];
this.num_fds = source["num_fds"];
this.cpu_percent = source["cpu_percent"];
this.rss = source["rss"];
this.vms = source["vms"];
this.swap = source["swap"];
this.mem_percent = source["mem_percent"];
this.read_bytes = source["read_bytes"];
this.write_bytes = source["write_bytes"];
this.read_ops = source["read_ops"];
this.write_ops = source["write_ops"];
this.open_files_count = source["open_files_count"];
this.conn_count = source["conn_count"];
}
}
}