kubeops 0.1.0

package/README.md

@@ -0,0 +1,219 @@
+<p align="center">
+  <img src="resources/icon.png" alt="KubeOps" width="128" height="128" />
+</p>
+
+<h1 align="center">KubeOps</h1>
+
+<p align="center">
+  A modern desktop client for Kubernetes — navigate clusters, debug pods, and manage workloads with a visual interface.
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Electron-47848F?style=flat&logo=electron&logoColor=white" alt="Electron" />
+  <img src="https://img.shields.io/badge/Next.js-000000?style=flat&logo=nextdotjs&logoColor=white" alt="Next.js" />
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=flat&logo=tailwindcss&logoColor=white" alt="Tailwind CSS" />
+  <img src="https://img.shields.io/badge/Platform-macOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
+  <a href="https://github.com/trustspirit/kubeops/releases/latest"><img src="https://img.shields.io/github/v/release/trustspirit/kubeops?label=version" alt="Latest Release" /></a>
+  <a href="https://www.npmjs.com/package/kubeops"><img src="https://img.shields.io/npm/v/kubeops?color=cb3837&logo=npm" alt="npm" /></a>
+</p>
+
+---
+
+## Download
+
+Download the latest version for your platform from the **[Releases](https://github.com/trustspirit/kubeops/releases/latest)** page.
+
+| Platform | File |
+|----------|------|
+| macOS (Apple Silicon) | `KubeOps-{version}-arm64.dmg` |
+| macOS (Intel) | `KubeOps-{version}-x64.dmg` |
+| Linux | `KubeOps-{version}.AppImage` |
+| Windows | `KubeOps-{version}.exe` |
+
+> The app supports auto-update after installation.
+
+---
+
+## Why KubeOps?
+
+- **Zero config** — Reads your `~/.kube/config` and auto-detects every cluster. No setup, no YAML to write.
+- **Visual topology** — See how Ingresses, Services, Deployments, and Pods connect in an interactive App Map.
+- **Built-in terminal & logs** — Open shell sessions and live log streams right inside the app. No more switching between terminal tabs.
+- **Port forwarding dashboard** — Start, monitor, and stop port forwards from a single page.
+- **Real-time metrics** — CPU, memory, network I/O, and filesystem charts per pod (with metrics-server / Prometheus).
+- **ArgoCD-style status** — Health badges on every resource so you can spot problems at a glance.
+- **Fast keyboard navigation** — Command palette (`Cmd+K`) to jump to any cluster, namespace, or resource type instantly.
+- **Cross-platform** — Runs natively on macOS, Windows, and Linux.
+
+---
+
+## Features
+
+### Cluster Overview Dashboard
+
+Auto-detects all clusters from kubeconfig. Select a cluster to see node/pod counts, pod status distribution, workload health, CPU usage per node, active services with port-forward buttons, ingress endpoints, and recent warning events.
+
+<!-- Screenshot: Cluster Overview -->
+> _Screenshot: Cluster overview dashboard showing node health, pod distribution chart, and workload status cards_
+
+### App Map (Resource Topology)
+
+Interactive flowchart visualizing resource relationships: Ingress → Service → Deployment → ReplicaSet → Pod. Auto-layout with pan, zoom, and fit-to-view. Each node shows kind, name, health status, and summary info with Detail and Info action buttons.
+
+<!-- Screenshot: App Map -->
+> _Screenshot: App Map view showing connected resources in a visual topology graph_
+
+### Live Status Display
+
+Every resource list features searchable, sortable tables with health status badges and relative age display. Warnings and unhealthy states (CrashLoopBackOff, ImagePullBackOff, OOMKilled) are highlighted and surfaced first.
+
+<!-- Screenshot: Resource List -->
+> _Screenshot: Resource list with status badges, search, and sortable columns_
+
+### Pod Terminal & Logs
+
+A resizable bottom panel supports multiple concurrent sessions as tabs. Full PTY-based terminal via `kubectl exec` with keyboard input and resizing. Real-time log streaming with pause/follow toggle, jump-to-bottom, and download. Sessions persist across page navigation.
+
+<!-- Screenshot: Terminal & Logs -->
+> _Screenshot: Split view with terminal session and live log streaming in bottom panel tabs_
+
+### Port Forwarding
+
+Start port forwards from pod container ports, service ports, or YAML editor fields. Manage all active forwards from the Port Forwarding page — view status (starting / active / error), open in browser, or stop individually.
+
+<!-- Screenshot: Port Forwarding -->
+> _Screenshot: Port forwarding management page with active forwards and status indicators_
+
+### YAML Editor (Table / YAML / Edit)
+
+Three viewing modes for every resource manifest:
+- **Table view** — Structured, collapsible sections with smart value rendering
+- **YAML view** — Read-only formatted output
+- **Edit mode** — Syntax-highlighted editor with validation, save with `Cmd+S`
+
+<!-- Screenshot: YAML Editor -->
+> _Screenshot: YAML editor in edit mode with syntax highlighting and validation_
+
+### Command Palette
+
+Press `Cmd+K` (or `Ctrl+K`) to open a fuzzy-search palette. Quickly jump to clusters (with connection status), namespaces, or any resource type.
+
+<!-- Screenshot: Command Palette -->
+> _Screenshot: Command palette open with search results for clusters and resources_
+
+### Resource Info Drawer
+
+Click the info icon on any App Map node to open a right-side drawer with Overview (metadata, status, labels), Events (sorted by severity with warning highlights), and footer actions to navigate to detail pages or open logs.
+
+<!-- Screenshot: Resource Info Drawer -->
+> _Screenshot: Info drawer open over App Map showing resource overview and events tabs_
+
+### Pod Restart Watcher
+
+Enable Watch on any pod to monitor restart counts in the background. Polls every 10 seconds and sends desktop notifications when restarts increase. Watched pods persist across sessions.
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+- **Node.js** v18+
+- A valid `~/.kube/config` with at least one context
+
+### Run from Source
+
+```bash
+git clone https://github.com/trustspirit/kubeops.git
+cd kubeops
+npm install
+npm run electron:dev
+```
+
+The app opens automatically once the dev server is ready (port 51230).
+
+---
+
+## Build
+
+Create a distributable package for your platform:
+
+| Platform | Command |
+|----------|---------|
+| macOS | `npm run electron:build:mac` |
+| Windows | `npm run electron:build:win` |
+| Linux | `npm run electron:build:linux` |
+
+Output is written to `dist-electron/`.
+
+---
+
+## Architecture
+
+| Layer | Technology |
+|-------|------------|
+| Desktop shell | Electron |
+| Frontend | Next.js 16 (App Router), React 19, Tailwind CSS |
+| State | Zustand (persisted to localStorage) |
+| Data fetching | SWR with auto-refresh |
+| K8s API | `@kubernetes/client-node` via Next.js API routes |
+| Terminal | xterm.js + node-pty over WebSocket |
+| Charts | Recharts |
+| Resource graph | React Flow + Dagre |
+| YAML | js-yaml |
+
+---
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Cmd+K` / `Ctrl+K` | Open command palette |
+| `Cmd+S` / `Ctrl+S` | Save YAML in edit mode |
+
+---
+
+## Error Logs
+
+KubeOps automatically captures errors and writes them to a log file so you can diagnose issues even without DevTools.
+
+**What gets logged:**
+
+- Main process crashes (uncaught exceptions, unhandled rejections)
+- Renderer process crashes and `console.error()` output
+- Production server stderr and unexpected exits
+- Startup failures
+
+**Log location:**
+
+| Platform | Path |
+|----------|------|
+| macOS | `~/Library/Application Support/KubeOps/logs/error.log` |
+| Windows | `%APPDATA%\KubeOps\logs\error.log` |
+| Linux | `~/.config/KubeOps/logs/error.log` |
+
+**Accessing logs from the app:**
+
+Use the **Help** menu:
+
+| Menu Item | Action |
+|-----------|--------|
+| Open Error Log | Opens the log file in your default text editor |
+| Show Log Folder | Opens the log directory in Finder / Explorer |
+| Export Error Log… | Save a copy to a location of your choice |
+
+Logs rotate automatically at 5 MB (previous log kept as `error.log.old`).
+
+---
+
+## Troubleshooting
+
+| Problem | Solution |
+|---------|----------|
+| "No clusters found" | Verify `~/.kube/config` is valid — run `kubectl config get-contexts` |
+| Connection refused | Restart the app or check if port 51230 is in use |
+| Metrics charts empty | Ensure `metrics-server` is installed in the cluster |
+| Network/FS charts missing | Requires Prometheus with `container_network_*` and `container_fs_*` metrics |
+| Port forward fails | Check that `kubectl` is on your PATH and the target pod is running |
+| Diagnosing crashes | Open **Help → Open Error Log** to see captured errors |

package/electron/main.js

@@ -0,0 +1,429 @@
+const { app, BrowserWindow, shell, Menu, dialog, ipcMain } = require('electron');
+const path = require('path');
+const fs = require('fs');
+const net = require('net');
+const { autoUpdater } = require('electron-updater');
+
+const isDev = !app.isPackaged;
+const PORT = parseInt(process.env.PORT || '51230', 10);
+const iconPath = path.join(__dirname, '..', 'resources', 'icon.png');
+
+let mainWindow = null;
+let serverProcess = null;
+
+// === Error Log ===
+const LOG_DIR = path.join(app.getPath('userData'), 'logs');
+const LOG_FILE = path.join(LOG_DIR, 'error.log');
+const MAX_LOG_SIZE = 5 * 1024 * 1024; // 5 MB
+
+function ensureLogDir() {
+  if (!fs.existsSync(LOG_DIR)) fs.mkdirSync(LOG_DIR, { recursive: true });
+}
+
+function rotateLogIfNeeded() {
+  try {
+    if (fs.existsSync(LOG_FILE) && fs.statSync(LOG_FILE).size > MAX_LOG_SIZE) {
+      const old = LOG_FILE + '.old';
+      if (fs.existsSync(old)) fs.unlinkSync(old);
+      fs.renameSync(LOG_FILE, old);
+    }
+  } catch { /* ignore rotation errors */ }
+}
+
+function writeErrorLog(source, err) {
+  try {
+    ensureLogDir();
+    rotateLogIfNeeded();
+    const ts = new Date().toISOString();
+    const msg = err instanceof Error
+      ? `${err.message}\n${err.stack || ''}`
+      : String(err);
+    const entry = `[${ts}] [${source}]\n${msg}\n\n`;
+    fs.appendFileSync(LOG_FILE, entry, 'utf-8');
+  } catch { /* never throw from logger */ }
+}
+
+// Capture main process errors
+process.on('uncaughtException', (err) => {
+  writeErrorLog('main:uncaughtException', err);
+  console.error('Uncaught exception:', err);
+});
+process.on('unhandledRejection', (reason) => {
+  writeErrorLog('main:unhandledRejection', reason);
+  console.error('Unhandled rejection:', reason);
+});
+
+// === Auto-Updater ===
+autoUpdater.autoDownload = false;
+autoUpdater.autoInstallOnAppQuit = true;
+autoUpdater.logger = null;
+
+function sendUpdateStatus(status) {
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.webContents.send('updater:status', status);
+  }
+}
+
+function setupAutoUpdater() {
+  autoUpdater.on('checking-for-update', () => {
+    writeErrorLog('updater', 'Checking for updates...');
+    sendUpdateStatus({ status: 'checking' });
+  });
+
+  autoUpdater.on('update-available', (info) => {
+    writeErrorLog('updater', `Update available: ${info.version}`);
+    sendUpdateStatus({
+      status: 'available',
+      version: info.version,
+      releaseNotes: info.releaseNotes,
+      releaseDate: info.releaseDate,
+    });
+  });
+
+  autoUpdater.on('update-not-available', (info) => {
+    writeErrorLog('updater', `Up to date: ${info.version}`);
+    sendUpdateStatus({ status: 'not-available', version: info.version });
+  });
+
+  autoUpdater.on('download-progress', (progress) => {
+    sendUpdateStatus({
+      status: 'downloading',
+      percent: progress.percent,
+      bytesPerSecond: progress.bytesPerSecond,
+      transferred: progress.transferred,
+      total: progress.total,
+    });
+  });
+
+  autoUpdater.on('update-downloaded', (info) => {
+    writeErrorLog('updater', `Update downloaded: ${info.version}`);
+    sendUpdateStatus({ status: 'downloaded', version: info.version });
+  });
+
+  autoUpdater.on('error', (err) => {
+    writeErrorLog('updater:error', err);
+    sendUpdateStatus({ status: 'error', message: err.message });
+  });
+}
+
+function setupUpdaterIPC() {
+  ipcMain.handle('updater:check', async () => {
+    const result = await autoUpdater.checkForUpdates();
+    return result?.updateInfo;
+  });
+
+  ipcMain.handle('updater:download', async () => {
+    await autoUpdater.downloadUpdate();
+  });
+
+  ipcMain.handle('updater:install', () => {
+    autoUpdater.quitAndInstall(false, true);
+  });
+
+  ipcMain.handle('updater:get-version', () => {
+    return app.getVersion();
+  });
+}
+
+function createWindow() {
+  const isMac = process.platform === 'darwin';
+
+  mainWindow = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    minWidth: 900,
+    minHeight: 600,
+    title: 'KubeOps',
+    icon: iconPath,
+    titleBarStyle: isMac ? 'hiddenInset' : 'default',
+    ...(isMac ? { trafficLightPosition: { x: 15, y: 20 } } : {}),
+    backgroundColor: '#0a0a0a',
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, 'preload.js'),
+    },
+    show: false,
+  });
+
+  mainWindow.loadURL(`http://localhost:${PORT}`);
+
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.show();
+  });
+
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: 'deny' };
+  });
+
+  // Capture renderer crashes
+  mainWindow.webContents.on('render-process-gone', (_e, details) => {
+    writeErrorLog('renderer:crash', `Renderer gone: ${details.reason} (exitCode: ${details.exitCode})`);
+  });
+
+  // Capture renderer console errors
+  mainWindow.webContents.on('console-message', (_e, level, message, line, sourceId) => {
+    // level 3 = error
+    if (level >= 3) {
+      writeErrorLog('renderer:console.error', `${message}\n  at ${sourceId}:${line}`);
+    }
+  });
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+}
+
+function buildMenu() {
+  const isMac = process.platform === 'darwin';
+
+  const template = [
+    ...(isMac
+      ? [
+          {
+            label: app.name,
+            submenu: [
+              { role: 'about' },
+              { type: 'separator' },
+              { role: 'services' },
+              { type: 'separator' },
+              { role: 'hide' },
+              { role: 'hideOthers' },
+              { role: 'unhide' },
+              { type: 'separator' },
+              { role: 'quit' },
+            ],
+          },
+        ]
+      : []),
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        { role: 'selectAll' },
+      ],
+    },
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forceReload' },
+        ...(isDev ? [{ role: 'toggleDevTools' }] : []),
+        { type: 'separator' },
+        { role: 'resetZoom' },
+        { role: 'zoomIn' },
+        { role: 'zoomOut' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+      ],
+    },
+    {
+      label: 'Window',
+      submenu: [
+        { role: 'minimize' },
+        { role: 'zoom' },
+        ...(isMac
+          ? [{ type: 'separator' }, { role: 'front' }]
+          : [{ role: 'close' }]),
+      ],
+    },
+    {
+      label: 'Help',
+      submenu: [
+        {
+          label: 'Check for Updates…',
+          click: () => {
+            if (isDev) {
+              dialog.showMessageBox(mainWindow, {
+                type: 'info',
+                title: 'Updates',
+                message: 'Auto-update is not available in development mode.',
+              });
+              return;
+            }
+            autoUpdater.checkForUpdates().catch((err) => {
+              writeErrorLog('updater:menu-check', err);
+              dialog.showMessageBox(mainWindow, {
+                type: 'error',
+                title: 'Update Check Failed',
+                message: err.message,
+              });
+            });
+          },
+        },
+        { type: 'separator' },
+        {
+          label: 'Open Error Log',
+          click: () => {
+            ensureLogDir();
+            if (fs.existsSync(LOG_FILE)) {
+              shell.openPath(LOG_FILE);
+            } else {
+              dialog.showMessageBox(mainWindow, {
+                type: 'info',
+                title: 'Error Log',
+                message: 'No error log found.',
+                detail: `Log path: ${LOG_FILE}`,
+              });
+            }
+          },
+        },
+        {
+          label: 'Show Log Folder',
+          click: () => {
+            ensureLogDir();
+            shell.openPath(LOG_DIR);
+          },
+        },
+        {
+          label: 'Export Error Log…',
+          click: async () => {
+            if (!fs.existsSync(LOG_FILE)) {
+              dialog.showMessageBox(mainWindow, {
+                type: 'info',
+                title: 'Export Error Log',
+                message: 'No error log to export.',
+              });
+              return;
+            }
+            const { filePath } = await dialog.showSaveDialog(mainWindow, {
+              defaultPath: `kubeops-error-${new Date().toISOString().slice(0, 10)}.log`,
+              filters: [{ name: 'Log Files', extensions: ['log', 'txt'] }],
+            });
+            if (filePath) {
+              fs.copyFileSync(LOG_FILE, filePath);
+            }
+          },
+        },
+      ],
+    },
+  ];
+
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+}
+
+function waitForServer(port, maxRetries = 60) {
+  return new Promise((resolve, reject) => {
+    let retries = 0;
+    const tryConnect = () => {
+      const socket = new net.Socket();
+      socket.setTimeout(1000);
+      socket.once('connect', () => {
+        socket.destroy();
+        resolve();
+      });
+      socket.once('error', () => {
+        socket.destroy();
+        if (++retries >= maxRetries) {
+          reject(new Error('Server failed to start'));
+        } else {
+          setTimeout(tryConnect, 500);
+        }
+      });
+      socket.once('timeout', () => {
+        socket.destroy();
+        if (++retries >= maxRetries) {
+          reject(new Error('Server start timeout'));
+        } else {
+          setTimeout(tryConnect, 500);
+        }
+      });
+      socket.connect(port, 'localhost');
+    };
+    tryConnect();
+  });
+}
+
+function startProductionServer() {
+  const { fork } = require('child_process');
+  const appRoot = path.join(__dirname, '..');
+
+  serverProcess = fork(path.join(appRoot, 'dist', 'server.cjs'), [], {
+    cwd: appRoot,
+    env: {
+      ...process.env,
+      NODE_ENV: 'production',
+      PORT: String(PORT),
+    },
+    stdio: 'pipe',
+  });
+
+  serverProcess.stdout?.on('data', (d) => process.stdout.write(d));
+  serverProcess.stderr?.on('data', (d) => {
+    process.stderr.write(d);
+    writeErrorLog('server:stderr', d.toString());
+  });
+
+  serverProcess.on('error', (err) => {
+    writeErrorLog('server:error', err);
+    console.error('Server process error:', err);
+  });
+
+  serverProcess.on('exit', (code, signal) => {
+    if (code !== 0 && code !== null) {
+      writeErrorLog('server:exit', `Server exited with code ${code}, signal ${signal}`);
+    }
+  });
+
+  return waitForServer(PORT);
+}
+
+app.whenReady().then(async () => {
+  buildMenu();
+
+  // Set dock icon for macOS dev mode (production uses .icns from bundle)
+  if (isDev && process.platform === 'darwin') {
+    app.dock.setIcon(iconPath);
+  }
+
+  try {
+    if (isDev) {
+      console.log('Waiting for dev server...');
+      await waitForServer(PORT);
+    } else {
+      console.log('Starting production server...');
+      await startProductionServer();
+    }
+    createWindow();
+
+    // Auto-update setup (production only)
+    if (!isDev) {
+      setupAutoUpdater();
+      setupUpdaterIPC();
+      setTimeout(() => {
+        autoUpdater.checkForUpdates().catch((err) => {
+          writeErrorLog('updater:auto-check', err);
+        });
+      }, 5000);
+    }
+  } catch (err) {
+    writeErrorLog('main:startup', err);
+    console.error('Failed to start KubeOps:', err);
+    app.quit();
+  }
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('before-quit', () => {
+  if (serverProcess) {
+    serverProcess.kill();
+    serverProcess = null;
+  }
+});

package/electron/preload.js

@@ -0,0 +1,13 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electronUpdater', {
+  checkForUpdates: () => ipcRenderer.invoke('updater:check'),
+  downloadUpdate: () => ipcRenderer.invoke('updater:download'),
+  quitAndInstall: () => ipcRenderer.invoke('updater:install'),
+  onUpdateStatus: (callback) => {
+    const handler = (_event, status) => callback(status);
+    ipcRenderer.on('updater:status', handler);
+    return () => ipcRenderer.removeListener('updater:status', handler);
+  },
+  getAppVersion: () => ipcRenderer.invoke('updater:get-version'),
+});