kubeops 0.1.0 → 0.1.2

package/README.md

@@ -24,12 +24,12 @@
 
 Download the latest version for your platform from the **[Releases](https://github.com/trustspirit/kubeops/releases/latest)** page.
 
-| Platform | File |
-|----------|------|
+| Platform              | File                          |
+| --------------------- | ----------------------------- |
 | macOS (Apple Silicon) | `KubeOps-{version}-arm64.dmg` |
-| macOS (Intel) | `KubeOps-{version}-x64.dmg` |
-| Linux | `KubeOps-{version}.AppImage` |
-| Windows | `KubeOps-{version}.exe` |
+| macOS (Intel)         | `KubeOps-{version}-x64.dmg`   |
+| Linux                 | `KubeOps-{version}.AppImage`  |
+| Windows               | `KubeOps-{version}.exe`       |
 
 > The app supports auto-update after installation.
 
@@ -55,59 +55,68 @@ Download the latest version for your platform from the **[Releases](https://gith
 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_
+
+![KubeOps Interface](assets/dashboard.png)
 
 ### 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_
+
+![KubeOps map](assets/app-map.png)
 
 ### 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_
+
+![KubeOps list](assets/live-list.png)
 
 ### 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_
+
+![KubeOps log](assets/log.png)
 
 ### 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_
+
+![KubeOps forward](assets/port-forward.png)
 
 ### 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_
+
+![KubeOps table](assets/yaml-table.png)
 
 ### 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_
+
+![KubeOps cmd](assets/cmd-k.png)
 
 ### 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_
+
+![KubeOps drawer](assets/drawer.png)
 
 ### Pod Restart Watcher
 
@@ -139,11 +148,11 @@ The app opens automatically once the dev server is ready (port 51230).
 
 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` |
+| 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/`.
 
@@ -151,25 +160,25 @@ 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 |
+| 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 |
+| Shortcut           | Action                 |
+| ------------------ | ---------------------- |
+| `Cmd+K` / `Ctrl+K` | Open command palette   |
 | `Cmd+S` / `Ctrl+S` | Save YAML in edit mode |
 
 ---
@@ -187,21 +196,21 @@ KubeOps automatically captures errors and writes them to a log file so you can d
 
 **Log location:**
 
-| Platform | Path |
-|----------|------|
-| macOS | `~/Library/Application Support/KubeOps/logs/error.log` |
-| Windows | `%APPDATA%\KubeOps\logs\error.log` |
-| Linux | `~/.config/KubeOps/logs/error.log` |
+| 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 |
+| 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`).
 
@@ -209,11 +218,30 @@ 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 |
+| Problem                   | Solution                                                                    |
+| ------------------------- | --------------------------------------------------------------------------- |
+| macOS Gatekeeper warning  | See [macOS Gatekeeper](#macos-gatekeeper) below                             |
+| "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 |
+| 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                       |
+
+### macOS Gatekeeper
+
+Because the app is not yet code-signed with an Apple Developer certificate, macOS may show:
+
+> "KubeOps.app" cannot be opened because the developer cannot be verified.
+
+**Option A — System Settings (recommended)**
+
+1. Open **System Settings → Privacy & Security**
+2. Scroll down to find the blocked message for KubeOps
+3. Click **Open Anyway**
+
+**Option B — Terminal**
+
+```bash
+xattr -cr /Applications/KubeOps.app
+```

package/electron/main.js

@@ -152,6 +152,11 @@ function createWindow() {
     mainWindow.show();
   });
 
+  mainWindow.webContents.on('did-fail-load', (_e, code, desc) => {
+    writeErrorLog('renderer:did-fail-load', `code=${code} ${desc}`);
+    mainWindow.show();
+  });
+
   mainWindow.webContents.setWindowOpenHandler(({ url }) => {
     shell.openExternal(url);
     return { action: 'deny' };
@@ -341,15 +346,16 @@ function waitForServer(port, maxRetries = 60) {
 }
 
 function startProductionServer() {
-  const { fork } = require('child_process');
+  const { spawn } = require('child_process');
   const appRoot = path.join(__dirname, '..');
 
-  serverProcess = fork(path.join(appRoot, 'dist', 'server.cjs'), [], {
+  serverProcess = spawn(process.execPath, [path.join(appRoot, 'dist', 'server.cjs')], {
     cwd: appRoot,
     env: {
       ...process.env,
       NODE_ENV: 'production',
       PORT: String(PORT),
+      ELECTRON_RUN_AS_NODE: '1',
     },
     stdio: 'pipe',
   });

package/electron-builder.yml

@@ -9,16 +9,25 @@ asar: false
 
 files:
   - electron/**/*
-  - .next/**/*
+  - .next/server/**/*
+  - .next/static/**/*
+  - .next/*.json
+  - .next/BUILD_ID
+  - .next/package.json
   - dist/**/*
-  - src/**/*
-  - ws/**/*
   - resources/**/*
-  - server.ts
-  - next.config.ts
+  - next.config.mjs
   - package.json
   - "!node_modules/.cache"
+  - "!node_modules/.package-lock.json"
+  - "!.next/cache"
+  - "!.next/trace*"
   - "!**/*.map"
+  - "!**/*.ts"
+  - "!**/tsconfig*"
+  - "!**/*.md"
+  - "!**/LICENSE*"
+  - "!**/CHANGELOG*"
 
 publish:
   - provider: github
@@ -33,11 +42,9 @@ mac:
     - target: dmg
       arch:
         - arm64
-        - x64
     - target: zip
       arch:
         - arm64
-        - x64
   darkModeSupport: true
 
 linux:

package/{next.config.ts → next.config.mjs}

@@ -1,6 +1,5 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   transpilePackages: ['@xterm/xterm'],
   turbopack: {},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kubeops",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A modern desktop client for Kubernetes cluster management",
   "main": "electron/main.js",
   "repository": {
@@ -24,7 +24,7 @@
     "resources",
     "scripts",
     "server.ts",
-    "next.config.ts",
+    "next.config.mjs",
     "tsconfig.json",
     "postcss.config.mjs",
     "electron-builder.yml"
@@ -42,7 +42,8 @@
     "electron:publish": "npm run build && node scripts/build-server.mjs && electron-builder --publish always",
     "electron:publish:mac": "npm run build && node scripts/build-server.mjs && electron-builder --mac --publish always",
     "electron:publish:linux": "npm run build && node scripts/build-server.mjs && electron-builder --linux --publish always",
-    "electron:publish:win": "npm run build && node scripts/build-server.mjs && electron-builder --win --publish always"
+    "electron:publish:win": "npm run build && node scripts/build-server.mjs && electron-builder --win --publish always",
+    "postinstall": "chmod +x node_modules/**/node-pty/prebuilds/*/spawn-helper 2>/dev/null || true"
   },
   "dependencies": {
     "@kubernetes/client-node": "^1.4.0",
@@ -52,6 +53,7 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.10.0",
+    "ansi-to-html": "^0.7.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/scripts/build-server.mjs

@@ -12,8 +12,8 @@ await esbuild.build({
   sourcemap: true,
   external: [
     'next',
-    '@kubernetes/client-node',
     'ws',
+    'node-pty',
   ],
 });
 

package/src/app/api/clusters/route.ts

@@ -6,6 +6,11 @@ import { ClusterInfo } from '@/lib/k8s/types';
 
 export const dynamic = 'force-dynamic';
 
+function stripAnsi(str: string): string {
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/\x1B\[[0-9;]*m/g, '');
+}
+
 export async function GET() {
   try {
     const contexts = getContexts();
@@ -25,7 +30,7 @@ export async function GET() {
             status: 'connected',
           };
         } catch (error: unknown) {
-          const message = error instanceof Error ? error.message : 'Connection failed';
+          const raw = error instanceof Error ? error.message : 'Connection failed';
           return {
             name: ctx.name,
             context: ctx.name,
@@ -34,7 +39,7 @@ export async function GET() {
             namespace: ctx.namespace || undefined,
             server: getClusterServer(ctx.name),
             status: 'error',
-            error: message,
+            error: stripAnsi(raw),
           };
         }
       })

package/src/app/api/tsh/login/route.ts

@@ -44,7 +44,10 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: `Unknown action: ${action}` }, { status: 400 });
   } catch (err: unknown) {
     const e = err as { stderr?: Buffer; message?: string };
-    const message = e.stderr?.toString() || e.message || 'tsh command failed';
+    const raw = e.stderr?.toString() || e.message || 'tsh command failed';
+    // Strip ANSI escape codes (e.g. [31m, [0m)
+    // eslint-disable-next-line no-control-regex
+    const message = raw.replace(/\x1B\[[0-9;]*m/g, '');
     return NextResponse.json({ error: message }, { status: 500 });
   }
 }

package/src/app/api/tsh/status/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from 'next/server';
+import { execSync } from 'child_process';
+
+export const dynamic = 'force-dynamic';
+
+function findTsh(): string | null {
+  try {
+    return execSync('which tsh', { encoding: 'utf-8' }).trim();
+  } catch {
+    return null;
+  }
+}
+
+export async function GET() {
+  const tshPath = findTsh();
+  if (!tshPath) {
+    return NextResponse.json({ loggedIn: false, reason: 'tsh not found' });
+  }
+
+  try {
+    const output = execSync(`${tshPath} status --format=json`, {
+      encoding: 'utf-8',
+      timeout: 5_000,
+    });
+    const data = JSON.parse(output);
+    const active = data?.active;
+    if (!active?.username) {
+      return NextResponse.json({ loggedIn: false });
+    }
+    return NextResponse.json({
+      loggedIn: true,
+      username: active.username,
+      cluster: active.cluster,
+      validUntil: active.valid_until,
+    });
+  } catch {
+    // tsh status fails when not logged in
+    return NextResponse.json({ loggedIn: false });
+  }
+}

package/src/app/clusters/[clusterId]/app-map/page.tsx

@@ -36,6 +36,7 @@ export default function AppMapPage() {
         isLoading={isLoading}
         height="calc(100vh - 220px)"
         direction="LR"
+        zoomOnScroll
       />
     </div>
   );

package/src/app/clusters/page.tsx

@@ -1,20 +1,119 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import useSWR from 'swr';
 import { useClusters } from '@/hooks/use-clusters';
+import { useSettingsStore } from '@/stores/settings-store';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
-import { Server, ArrowRight, Search, Settings } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Server, ArrowRight, Search, Settings, RefreshCw, LogIn, Loader2, CircleCheck } from 'lucide-react';
 import { ThemeToggle } from '@/components/layout/theme-toggle';
 import { SettingsDialog } from '@/components/settings/settings-dialog';
-import Link from 'next/link';
+import { toast } from 'sonner';
+
+/** Extract the real kube cluster name by stripping the kubeconfig cluster prefix.
+ *  e.g. context="ovdr-teleport-dev-bet-aws-apne2-a01", cluster="ovdr-teleport"
+ *       → prefix "ovdr-teleport-", real name "dev-bet-aws-apne2-a01"  */
+function parseClusterName(contextName: string, clusterField: string) {
+  const prefix = clusterField + '-';
+  if (contextName.startsWith(prefix) && contextName.length > prefix.length) {
+    return { prefix, realName: contextName.slice(prefix.length) };
+  }
+  return { prefix: '', realName: contextName };
+}
 
 export default function ClustersPage() {
-  const { clusters, isLoading, error } = useClusters();
+  const router = useRouter();
+  const { clusters, isLoading, error, mutate } = useClusters();
+  const { tshProxyUrl, tshAuthType } = useSettingsStore();
   const [search, setSearch] = useState('');
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [loggingIn, setLoggingIn] = useState(false);
+  const [kubeLoggingIn, setKubeLoggingIn] = useState<string | null>(null);
+  const { data: tshStatus, isLoading: tshLoading, mutate: mutateTshStatus } = useSWR('/api/tsh/status', { refreshInterval: 60_000 });
+  const tshLoggedIn = tshStatus?.loggedIn === true;
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await mutate();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [mutate]);
+
+  const handleTshLogin = useCallback(async () => {
+    if (!tshProxyUrl) {
+      toast.error('Teleport Proxy URL is not configured. Please set it in Settings.');
+      setSettingsOpen(true);
+      return;
+    }
+    setLoggingIn(true);
+    try {
+      const res = await fetch('/api/tsh/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          action: 'proxy-login',
+          proxyUrl: tshProxyUrl,
+          authType: tshAuthType || undefined,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(`tsh login failed: ${data.error}`);
+        return;
+      }
+      toast.success('Teleport login successful');
+      await Promise.all([mutate(), mutateTshStatus()]);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Unknown error';
+      toast.error(`tsh login failed: ${message}`);
+    } finally {
+      setLoggingIn(false);
+    }
+  }, [tshProxyUrl, tshAuthType, mutate, mutateTshStatus]);
+
+  const handleClusterClick = useCallback(async (contextName: string, clusterField: string, status: string) => {
+    if (status === 'connected') {
+      router.push(`/clusters/${encodeURIComponent(contextName)}`);
+      return;
+    }
+    // For disconnected/error clusters, try tsh kube login with the real cluster name
+    const { realName } = parseClusterName(contextName, clusterField);
+    setKubeLoggingIn(contextName);
+    try {
+      const res = await fetch('/api/tsh/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'kube-login', cluster: realName }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error('tsh kube login failed', {
+          description: `${realName}: ${data.error}`,
+        });
+        return;
+      }
+      toast.success('Cluster login successful', {
+        description: realName,
+      });
+      await mutate();
+      router.push(`/clusters/${encodeURIComponent(contextName)}`);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Unknown error';
+      toast.error('tsh kube login failed', {
+        description: `${realName}: ${message}`,
+      });
+    } finally {
+      setKubeLoggingIn(null);
+    }
+  }, [router, mutate]);
 
   const filtered = clusters.filter((c) => {
     const q = search.toLowerCase();
@@ -33,6 +132,48 @@ export default function ClustersPage() {
           <h1 className="text-lg font-bold tracking-tight">KubeOps</h1>
         </div>
         <div className="flex items-center gap-2 no-drag-region">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={`h-8 gap-1.5 ${tshLoggedIn ? 'text-green-500' : ''}`}
+                onClick={handleTshLogin}
+                disabled={loggingIn || tshLoading}
+              >
+                {loggingIn || tshLoading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : tshLoggedIn ? (
+                  <CircleCheck className="h-4 w-4" />
+                ) : (
+                  <LogIn className="h-4 w-4" />
+                )}
+                <span className="text-xs">
+                  {tshLoading ? 'TSH' : tshLoggedIn ? tshStatus.username?.split('@')[0] : 'TSH Login'}
+                </span>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {tshLoading
+                ? 'Checking Teleport status...'
+                : tshLoggedIn
+                  ? `Logged in as ${tshStatus.username} · ${tshStatus.cluster}`
+                  : tshProxyUrl
+                    ? `tsh login --proxy=${tshProxyUrl}`
+                    : 'Configure Teleport in Settings first'
+              }
+            </TooltipContent>
+          </Tooltip>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={handleRefresh}
+            disabled={refreshing}
+            title="Refresh cluster list"
+          >
+            <RefreshCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
+          </Button>
           <Button
             variant="ghost"
             size="icon"
@@ -102,53 +243,69 @@ export default function ClustersPage() {
               </div>
 
               <div className="flex flex-col rounded-md border divide-y">
-                {filtered.map((cluster) => (
-                  <Link
-                    key={cluster.name}
-                    href={`/clusters/${encodeURIComponent(cluster.name)}`}
-                    className="flex items-center gap-4 px-4 py-3 hover:bg-accent/50 transition-colors group"
-                  >
+                {filtered.map((cluster) => {
+                  const isKubeLogging = kubeLoggingIn === cluster.name;
+                  const { prefix, realName } = parseClusterName(cluster.name, cluster.cluster);
+                  return (
                     <div
-                      className={`h-2 w-2 rounded-full shrink-0 ${
-                        cluster.status === 'connected'
-                          ? 'bg-green-500'
-                          : cluster.status === 'error'
-                          ? 'bg-red-500'
-                          : 'bg-yellow-500'
-                      }`}
-                    />
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-3">
-                        <span className="font-medium truncate">{cluster.name}</span>
-                        <Badge
-                          variant="outline"
-                          className={
-                            cluster.status === 'connected'
-                              ? 'bg-green-500/10 text-green-500 border-green-500/20'
-                              : cluster.status === 'error'
-                              ? 'bg-red-500/10 text-red-500 border-red-500/20'
-                              : 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20'
-                          }
-                        >
-                          {cluster.status}
-                        </Badge>
-                      </div>
-                      <div className="flex items-center gap-2 mt-0.5">
-                        {cluster.server && (
-                          <span className="text-xs text-muted-foreground truncate">
-                            {cluster.server}
-                          </span>
-                        )}
-                        {cluster.error && (
-                          <span className="text-xs text-destructive truncate">
-                            {cluster.error}
+                      key={cluster.name}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => !isKubeLogging && handleClusterClick(cluster.name, cluster.cluster, cluster.status)}
+                      onKeyDown={(e) => e.key === 'Enter' && !isKubeLogging && handleClusterClick(cluster.name, cluster.cluster, cluster.status)}
+                      className={`flex items-center gap-4 px-4 py-3 hover:bg-accent/50 transition-colors group cursor-pointer ${isKubeLogging ? 'opacity-60 pointer-events-none' : ''}`}
+                    >
+                      <div
+                        className={`h-2 w-2 rounded-full shrink-0 ${
+                          cluster.status === 'connected'
+                            ? 'bg-green-500'
+                            : cluster.status === 'error'
+                            ? 'bg-red-500'
+                            : 'bg-yellow-500'
+                        }`}
+                      />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-3">
+                          <span className="font-medium truncate">
+                            {prefix && <span className="text-muted-foreground">{prefix}</span>}
+                            <span className="text-primary">{realName}</span>
                           </span>
-                        )}
+                          <Badge
+                            variant="outline"
+                            className={
+                              cluster.status === 'connected'
+                                ? 'bg-green-500/10 text-green-500 border-green-500/20'
+                                : cluster.status === 'error'
+                                ? 'bg-red-500/10 text-red-500 border-red-500/20'
+                                : 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20'
+                            }
+                          >
+                            {cluster.status}
+                          </Badge>
+                          {isKubeLogging && (
+                            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                              <Loader2 className="h-3 w-3 animate-spin" />
+                              Logging in...
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2 mt-0.5">
+                          {cluster.server && (
+                            <span className="text-xs text-muted-foreground truncate">
+                              {cluster.server}
+                            </span>
+                          )}
+                          {cluster.error && (
+                            <span className="text-xs text-destructive truncate">
+                              {cluster.error}
+                            </span>
+                          )}
+                        </div>
                       </div>
+                      <ArrowRight className="h-4 w-4 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground" />
                     </div>
-                    <ArrowRight className="h-4 w-4 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground" />
-                  </Link>
-                ))}
+                  );
+                })}
                 {filtered.length === 0 && (
                   <div className="px-4 py-8 text-center text-sm text-muted-foreground">
                     No clusters matching &ldquo;{search}&rdquo;

package/src/app/globals.css

@@ -156,9 +156,11 @@
   -webkit-app-region: no-drag;
 }
 
-/* Electron: push header content right to avoid traffic light overlap */
+/* Electron: push header content right to avoid traffic light overlap.
+   Uses !important because Tailwind v4 px-* utilities use padding-inline
+   (logical property) which conflicts with padding-left (physical property). */
 :root.electron .electron-header-inset {
-  padding-left: 80px;
+  padding-left: 80px !important;
 }
 
 /* React Flow Controls - ensure icons are visible in both themes */

package/src/components/panel/logs-tab.tsx

@@ -1,9 +1,13 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Pause, Play, Download, ArrowDown } from 'lucide-react';
+import AnsiToHtml from 'ansi-to-html';
 import type { PanelTab } from '@/stores/panel-store';
+import { usePanelStore } from '@/stores/panel-store';
+import { useResourceList } from '@/hooks/use-resource-list';
 
 const MAX_LOG_SIZE = 512 * 1024; // 512KB
 
@@ -20,15 +24,63 @@ interface LogsTabProps {
 
 export function LogsTab({ tab }: LogsTabProps) {
   const { clusterId, namespace, podName, container } = tab;
+  const updateTab = usePanelStore((s) => s.updateTab);
   const [follow, setFollow] = useState(true);
   const [logs, setLogs] = useState('');
   const [connected, setConnected] = useState(false);
   const logRef = useRef<HTMLPreElement>(null);
   const wsRef = useRef<WebSocket | null>(null);
 
+  // Batching: buffer incoming chunks between animation frames
+  const bufferRef = useRef('');
+  const rafRef = useRef<number>(0);
+
+  // Per-instance converter (fresh state per pod/container switch)
+  const converterRef = useRef(new AnsiToHtml({ fg: '#cdd6f4', bg: '#1e1e2e', escapeXML: true }));
+
+  // Fetch all pods in namespace to find siblings
+  const { data: podsData } = useResourceList({
+    clusterId: clusterId ? decodeURIComponent(clusterId) : null,
+    namespace,
+    resourceType: 'pods',
+    refreshInterval: 10000,
+  });
+
+  // Find current pod object and derive sibling pods + container list
+  const currentPod = useMemo(() => {
+    const allPods: any[] = podsData?.items || [];
+    return allPods.find((p: any) => p.metadata?.name === podName);
+  }, [podsData, podName]);
+
+  const siblingPods = useMemo(() => {
+    const allPods: any[] = podsData?.items || [];
+    const ownerUid = currentPod?.metadata?.ownerReferences?.[0]?.uid;
+    if (!ownerUid) return [];
+    return allPods
+      .filter((p: any) => p.metadata?.ownerReferences?.[0]?.uid === ownerUid)
+      .map((p: any) => p.metadata?.name as string)
+      .sort();
+  }, [podsData, currentPod]);
+
+  const containers = useMemo(() => {
+    const regular: string[] = (currentPod?.spec?.containers || []).map((c: any) => c.name);
+    const init: string[] = (currentPod?.spec?.initContainers || []).map((c: any) => c.name);
+    return [...regular, ...init];
+  }, [currentPod]);
+
+  const flushBuffer = useCallback(() => {
+    const chunk = bufferRef.current;
+    if (!chunk) return;
+    bufferRef.current = '';
+    setLogs((prev) => trimLogs(prev + chunk));
+  }, []);
+
   useEffect(() => {
     if (!container) return;
 
+    // Reset converter state for new stream
+    converterRef.current = new AnsiToHtml({ fg: '#cdd6f4', bg: '#1e1e2e', escapeXML: true });
+
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const decodedCluster = decodeURIComponent(clusterId);
     const wsUrl = `${protocol}//${window.location.host}/ws/logs/${encodeURIComponent(decodedCluster)}/${namespace}/${podName}?container=${container}&follow=${follow}&timestamps=true&tailLines=500`;
@@ -42,11 +94,18 @@ export function LogsTab({ tab }: LogsTabProps) {
         try {
           const msg = JSON.parse(event.data);
           if (msg.type === 'error') {
-            setLogs((prev) => trimLogs(prev + `\n[ERROR] ${msg.message}\n`));
+            bufferRef.current += `\n[ERROR] ${msg.message}\n`;
+            if (!rafRef.current) rafRef.current = requestAnimationFrame(flushBuffer);
             return;
           }
         } catch { /* not JSON */ }
-        setLogs((prev) => trimLogs(prev + event.data));
+        bufferRef.current += event.data;
+        if (!rafRef.current) {
+          rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = 0;
+            flushBuffer();
+          });
+        }
       }
     };
     ws.onclose = () => setConnected(false);
@@ -54,15 +113,24 @@ export function LogsTab({ tab }: LogsTabProps) {
 
     return () => {
       ws.close();
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = 0;
+      bufferRef.current = '';
       setLogs('');
     };
-  }, [container, clusterId, namespace, podName, follow]);
+  }, [container, clusterId, namespace, podName, follow, flushBuffer]);
+
+  // Memoize ANSI conversion — only re-runs when logs change
+  const logsHtml = useMemo(() => {
+    if (!logs) return 'Connecting...';
+    return converterRef.current.toHtml(logs);
+  }, [logs]);
 
   useEffect(() => {
     if (follow && logRef.current) {
       logRef.current.scrollTop = logRef.current.scrollHeight;
     }
-  }, [logs, follow]);
+  }, [logsHtml, follow]);
 
   const handleDownload = () => {
     const blob = new Blob([logs], { type: 'text/plain' });
@@ -78,6 +146,22 @@ export function LogsTab({ tab }: LogsTabProps) {
     if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
   };
 
+  const handlePodSwitch = (newPodName: string) => {
+    if (newPodName === podName) return;
+    updateTab(tab.id, {
+      podName: newPodName,
+      title: `logs: ${newPodName}/${container}`,
+    });
+  };
+
+  const handleContainerSwitch = (newContainer: string) => {
+    if (newContainer === container) return;
+    updateTab(tab.id, {
+      container: newContainer,
+      title: `logs: ${podName}/${newContainer}`,
+    });
+  };
+
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center gap-2 px-3 py-1.5 border-b bg-card shrink-0">
@@ -93,6 +177,34 @@ export function LogsTab({ tab }: LogsTabProps) {
           <Download className="h-3 w-3 mr-1" />
           Download
         </Button>
+        {siblingPods.length >= 2 && (
+          <Select value={podName} onValueChange={handlePodSwitch}>
+            <SelectTrigger size="sm" className="h-6 text-xs max-w-[200px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {siblingPods.map((name) => (
+                <SelectItem key={name} value={name} className="text-xs">
+                  {name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+        {containers.length >= 2 && (
+          <Select value={container} onValueChange={handleContainerSwitch}>
+            <SelectTrigger size="sm" className="h-6 text-xs max-w-[160px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {containers.map((name) => (
+                <SelectItem key={name} value={name} className="text-xs">
+                  {name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
         <div className="ml-auto flex items-center gap-1.5">
           <div className={`h-2 w-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
           <span className="text-xs text-muted-foreground">{connected ? 'Streaming' : 'Disconnected'}</span>
@@ -101,9 +213,8 @@ export function LogsTab({ tab }: LogsTabProps) {
       <pre
         ref={logRef}
         className="flex-1 min-h-0 overflow-auto bg-[#1e1e2e] text-[#cdd6f4] p-3 font-mono text-xs leading-5 whitespace-pre"
-      >
-        {logs || 'Connecting...'}
-      </pre>
+        dangerouslySetInnerHTML={{ __html: logsHtml }}
+      />
     </div>
   );
 }

package/src/components/resources/resource-list-page.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'next/navigation';
 import Link from 'next/link';
 import { useResourceList } from '@/hooks/use-resource-list';
 import { DataTable } from '@/components/shared/data-table';
-import { LoadingSkeleton } from '@/components/shared/loading-skeleton';
+import { ListSkeleton } from '@/components/shared/loading-skeleton';
 import { ErrorDisplay } from '@/components/shared/error-display';
 import { COLUMN_MAP } from './resource-columns';
 import { RESOURCE_LABELS } from '@/lib/constants';
@@ -36,7 +36,7 @@ export function ResourceListPage({ resourceType, clusterScoped }: ResourceListPa
     resourceType === 'pods' ? data?.items : undefined
   );
 
-  if (isLoading) return <LoadingSkeleton />;
+  if (isLoading) return <ListSkeleton />;
   if (error) return <ErrorDisplay error={error} onRetry={() => mutate()} clusterId={clusterId} />;
 
   const items = data?.items || [];

package/src/components/shared/loading-skeleton.tsx

@@ -1,24 +1,131 @@
 import { Skeleton } from '@/components/ui/skeleton';
 
+/** Generic fallback */
 export function LoadingSkeleton() {
+  return <DetailSkeleton />;
+}
+
+/** Resource list page: title + search bar + table header + rows */
+export function ListSkeleton() {
   return (
     <div className="flex flex-col gap-4 p-6">
-      <Skeleton className="h-8 w-48" />
-      <div className="flex flex-col gap-2">
+      {/* Title */}
+      <Skeleton className="h-8 w-40" />
+      {/* Search + filter bar */}
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-9 w-64 rounded-md" />
+        <Skeleton className="h-9 w-24 rounded-md" />
+      </div>
+      {/* Table */}
+      <div className="rounded-md border overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center gap-4 px-4 py-3 border-b bg-muted/30">
+          {[100, 80, 60, 80, 60].map((w, i) => (
+            <Skeleton key={i} className="h-4 rounded" style={{ width: w }} />
+          ))}
+        </div>
+        {/* Rows */}
         {Array.from({ length: 8 }).map((_, i) => (
-          <Skeleton key={i} className="h-12 w-full" />
+          <div key={i} className="flex items-center gap-4 px-4 py-3 border-b last:border-0">
+            <Skeleton className="h-4 w-[100px] rounded" />
+            <Skeleton className="h-4 w-[80px] rounded" />
+            <Skeleton className="h-4 w-[60px] rounded" />
+            <Skeleton className="h-4 w-[80px] rounded" />
+            <Skeleton className="h-4 w-[60px] rounded" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Detail page: back button + title/status + tabs + overview content */
+export function DetailSkeleton() {
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-9 w-9 rounded-md" />
+        <div className="flex-1 space-y-2">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-7 w-48" />
+            <Skeleton className="h-5 w-16 rounded-full" />
+          </div>
+          <Skeleton className="h-4 w-72" />
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-24 rounded-md" />
+          <Skeleton className="h-8 w-20 rounded-md" />
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1">
+        {['w-20', 'w-24', 'w-16', 'w-14'].map((w, i) => (
+          <Skeleton key={i} className={`h-9 ${w} rounded-md`} />
         ))}
       </div>
+
+      {/* Resource tree placeholder */}
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-28" />
+        <Skeleton className="h-[200px] w-full rounded-lg" />
+      </div>
+
+      {/* Info table */}
+      <div className="rounded-md border overflow-hidden">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex border-b last:border-0">
+            {Array.from({ length: 3 }).map((_, j) => (
+              <div key={j} className="flex items-center gap-2 px-3 py-2 flex-1">
+                <Skeleton className="h-3 w-16" />
+                <Skeleton className="h-3 w-20" />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* Pods table */}
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-12" />
+        <div className="rounded-md border overflow-hidden">
+          <div className="flex items-center gap-4 px-4 py-3 border-b bg-muted/30">
+            {[120, 60, 50, 50, 60].map((w, i) => (
+              <Skeleton key={i} className="h-3 rounded" style={{ width: w }} />
+            ))}
+          </div>
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-4 px-4 py-3 border-b last:border-0">
+              <Skeleton className="h-3 w-[120px] rounded" />
+              <Skeleton className="h-3 w-[60px] rounded" />
+              <Skeleton className="h-3 w-[50px] rounded" />
+              <Skeleton className="h-3 w-[50px] rounded" />
+              <Skeleton className="h-3 w-[60px] rounded" />
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }
 
+/** Table-only skeleton (for inline use) */
 export function TableSkeleton() {
   return (
-    <div className="flex flex-col gap-2">
-      <Skeleton className="h-10 w-full" />
+    <div className="rounded-md border overflow-hidden">
+      <div className="flex items-center gap-4 px-4 py-3 border-b bg-muted/30">
+        {[100, 80, 60, 80].map((w, i) => (
+          <Skeleton key={i} className="h-4 rounded" style={{ width: w }} />
+        ))}
+      </div>
       {Array.from({ length: 6 }).map((_, i) => (
-        <Skeleton key={i} className="h-12 w-full" />
+        <div key={i} className="flex items-center gap-4 px-4 py-3 border-b last:border-0">
+          <Skeleton className="h-4 w-[100px] rounded" />
+          <Skeleton className="h-4 w-[80px] rounded" />
+          <Skeleton className="h-4 w-[60px] rounded" />
+          <Skeleton className="h-4 w-[80px] rounded" />
+        </div>
       ))}
     </div>
   );

package/src/components/shared/metrics-charts-impl.tsx

@@ -383,6 +383,7 @@ export function NodeMetricsSummary({ clusterId }: NodeMetricsProps) {
   }));
 
   const barHeight = Math.max(120, nodes.length * 32 + 30);
+  const yAxisWidth = Math.min(150, Math.max(70, ...nodes.map((n: any) => n.name.length * 6 + 10)));
 
   return (
     <Card>
@@ -403,7 +404,7 @@ export function NodeMetricsSummary({ clusterId }: NodeMetricsProps) {
                   </linearGradient>
                 </defs>
                 <XAxis type="number" tick={{ fontSize: 9, fill: 'currentColor' }} tickLine={false} axisLine={false} tickFormatter={(v) => formatCpu(v)} />
-                <YAxis type="category" dataKey="name" tick={{ fontSize: 9, fill: 'currentColor' }} tickLine={false} axisLine={false} width={70} />
+                <YAxis type="category" dataKey="name" tick={{ fontSize: 9, fill: 'currentColor' }} tickLine={false} axisLine={false} width={yAxisWidth} />
                 <Tooltip content={<NodeMetricTooltip />} />
                 <Bar dataKey="cpu" fill="url(#nodeCpuGrad)" radius={[0, 6, 6, 0]} animationDuration={600} />
               </BarChart>
@@ -421,7 +422,7 @@ export function NodeMetricsSummary({ clusterId }: NodeMetricsProps) {
                   </linearGradient>
                 </defs>
                 <XAxis type="number" tick={{ fontSize: 9, fill: 'currentColor' }} tickLine={false} axisLine={false} tickFormatter={(v) => formatMemory(v)} />
-                <YAxis type="category" dataKey="name" tick={{ fontSize: 9, fill: 'currentColor' }} tickLine={false} axisLine={false} width={70} />
+                <YAxis type="category" dataKey="name" tick={{ fontSize: 9, fill: 'currentColor' }} tickLine={false} axisLine={false} width={yAxisWidth} />
                 <Tooltip content={<NodeMetricTooltip />} />
                 <Bar dataKey="memory" fill="url(#nodeMemGrad)" radius={[0, 6, 6, 0]} animationDuration={600} />
               </BarChart>

package/src/components/shared/resource-tree-impl.tsx

@@ -88,6 +88,7 @@ interface ResourceTreeViewInnerProps {
   direction?: 'LR' | 'TB';
   className?: string;
   focusNodeId?: string;
+  zoomOnScroll?: boolean;
   onInfoClick: (data: ResourceNodeData) => void;
 }
 
@@ -99,6 +100,7 @@ function ResourceTreeViewInner({
   direction = 'LR',
   className,
   focusNodeId,
+  zoomOnScroll = false,
   onInfoClick,
 }: ResourceTreeViewInnerProps) {
   const { fitView } = useReactFlow();
@@ -180,6 +182,8 @@ function ResourceTreeViewInner({
         minZoom={0.3}
         maxZoom={1.5}
         proOptions={proOptions}
+        zoomOnScroll={zoomOnScroll}
+        preventScrolling={zoomOnScroll}
         nodesDraggable={false}
         nodesConnectable={false}
         elementsSelectable={false}
@@ -199,6 +203,7 @@ interface ResourceTreeViewProps {
   direction?: 'LR' | 'TB';
   className?: string;
   focusNodeId?: string;
+  zoomOnScroll?: boolean;
 }
 
 export function ResourceTreeView(props: ResourceTreeViewProps) {

package/src/stores/panel-store.ts

@@ -20,6 +20,7 @@ interface PanelState {
   addTab: (tab: PanelTab) => void;
   removeTab: (id: string) => void;
   setActiveTab: (id: string) => void;
+  updateTab: (id: string, updates: Partial<Pick<PanelTab, 'podName' | 'container' | 'title'>>) => void;
   toggle: () => void;
 }
 
@@ -57,5 +58,11 @@ export const usePanelStore = create<PanelState>()((set, get) => ({
   },
 
   setActiveTab: (id) => set({ activeTabId: id }),
+
+  updateTab: (id, updates) => {
+    const { tabs } = get();
+    set({ tabs: tabs.map((t) => (t.id === id ? { ...t, ...updates } : t)) });
+  },
+
   toggle: () => set((s) => ({ open: !s.open })),
 }));

package/ws/exec-handler.ts

@@ -4,8 +4,16 @@ import { parse } from 'url';
 import { execSync } from 'child_process';
 import * as pty from 'node-pty';
 
+// macOS GUI apps don't inherit shell PATH — ensure common tool directories are included
+const EXTRA_PATHS = ['/opt/homebrew/bin', '/usr/local/bin', '/usr/bin', '/bin', '/usr/sbin', '/sbin'];
+const currentPath = process.env.PATH || '';
+const missingPaths = EXTRA_PATHS.filter(p => !currentPath.split(':').includes(p));
+if (missingPaths.length) {
+  process.env.PATH = [...currentPath.split(':'), ...missingPaths].filter(Boolean).join(':');
+}
+
 // Resolve kubectl path at startup
-let kubectlPath = '/usr/local/bin/kubectl';
+let kubectlPath = 'kubectl';
 try {
   const paths = execSync('which -a kubectl', { encoding: 'utf-8' }).trim().split('\n');
   kubectlPath = paths.find(p => !p.includes(' ') && !p.includes('.rd/bin'))
@@ -15,6 +23,11 @@ try {
 } catch { /* use default */ }
 console.log(`[Exec] Using kubectl: ${kubectlPath}`);
 
+/** Shell-escape a single argument */
+function shellEscape(arg: string): string {
+  return "'" + arg.replace(/'/g, "'\\''") + "'";
+}
+
 export function handleExecConnection(ws: WebSocket, req: IncomingMessage) {
   const { pathname, query } = parse(req.url!, true);
   const parts = pathname!.split('/').filter(Boolean);
@@ -27,15 +40,18 @@ export function handleExecConnection(ws: WebSocket, req: IncomingMessage) {
 
   let ptyProcess: pty.IPty;
   try {
-    // OpenLens-style: kubectl exec -it with shell fallback chain
-    ptyProcess = pty.spawn(kubectlPath, [
+    // Spawn via /bin/sh to avoid posix_spawnp issues in Electron
+    const cmd = [
+      shellEscape(kubectlPath),
       'exec', '-i', '-t',
-      '--context', clusterId,
-      '-n', namespace,
-      '-c', container,
-      podName,
-      '--', 'sh', '-c', 'clear; (bash || ash || sh)',
-    ], {
+      '--context', shellEscape(clusterId),
+      '-n', shellEscape(namespace),
+      '-c', shellEscape(container),
+      shellEscape(podName),
+      '--', 'sh', '-c', "'clear; (bash || ash || sh)'",
+    ].join(' ');
+
+    ptyProcess = pty.spawn('/bin/sh', ['-c', cmd], {
       name: 'xterm-256color',
       cols: 80,
       rows: 24,