kubeops 0.1.5 → 0.1.6

package/README.md

@@ -54,6 +54,10 @@ There are many Kubernetes tools out there. Here's how KubeOps compares:
 | Visual resource topology | **Yes** | Extension | No | Limited |
 | Built-in terminal & logs | **Yes** | Yes | Yes | Yes |
 | Real-time metrics & charts | **Yes** | Yes | Basic | Basic |
+| Quick actions on resource rows | **Yes** | No | Yes | No |
+| Multi-cluster overview | **Yes** | Yes | No | No |
+| Cross-cluster resource diff | **Yes** | No | No | No |
+| Multi-namespace selection | **Yes** | No | No | No |
 | Helm chart management | **Yes** | Yes | View only | No |
 | RBAC visualization | **Yes** | No | Basic | No |
 | YAML diff view | **Yes** | No | No | No |
@@ -67,6 +71,10 @@ There are many Kubernetes tools out there. Here's how KubeOps compares:
 - **Free forever** — No subscriptions, no feature gates, no telemetry. MIT licensed.
 - **Visual-first** — Interactive App Map shows how Ingresses, Services, Deployments, and Pods connect. Not just resource lists.
 - **All-in-one desktop app** — Terminal, logs, port forwarding, metrics charts, YAML editor, Helm management in a single window. No server to deploy, no browser extension to install.
+- **Quick actions** — Restart, scale, delete, view logs, and exec directly from resource list rows without navigating to detail pages.
+- **Multi-cluster overview** — See the health of all connected clusters at a glance on a single dashboard.
+- **Cross-cluster diff** — Compare the same resource across clusters or namespaces with a visual YAML diff.
+- **Multi-namespace** — Select multiple namespaces simultaneously and view resources across them in one list.
 - **Helm chart management** — Browse, install, upgrade, rollback, and uninstall Helm releases directly from the UI.
 - **RBAC visualization** — See who can do what with a permission matrix and interactive access review.
 - **Modern & lightweight** — Fast startup, small footprint. No Electron bloat from bundled IDE features you don't need.
@@ -79,7 +87,7 @@ There are many Kubernetes tools out there. Here's how KubeOps compares:
 
 ### 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.
+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. A **Workload Health Summary** at the top surfaces failing pods, non-ready workloads, container restarts, and warning events at a glance — or shows a green "All Healthy" banner when everything is fine.
 
 <!-- Screenshot: Cluster Overview -->
 
@@ -93,6 +101,15 @@ Interactive flowchart visualizing resource relationships: Ingress → Service
 
 ![KubeOps map](assets/app-map.png)
 
+### Quick Actions
+
+Every resource list row has a `...` context menu for common operations without navigating to the detail page:
+
+- **Pods** — View Logs, Exec, Delete
+- **Deployments / StatefulSets** — Restart, Scale, Delete
+- **DaemonSets** — Restart, Delete
+- **All resources** — Delete, Compare (cross-cluster diff)
+
 ### 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.
@@ -135,8 +152,8 @@ Four 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`
-- **Review Changes** — Side-by-side diff showing additions (green) and deletions (red) before saving
+- **Edit mode** — Syntax-highlighted editor with validation, `Cmd+S` to proceed to review
+- **Review Changes (mandatory)** — Side-by-side diff showing additions (green) and deletions (red). You must review before applying — direct save from edit mode is disabled
 
 <!-- Screenshot: YAML Editor -->
 
@@ -158,6 +175,36 @@ Click the info icon on any App Map node to open a right-side drawer with Overvie
 
 ![KubeOps drawer](assets/drawer.png)
 
+### Cross-Cluster Resource Diff
+
+Compare the same resource across different clusters or namespaces. Click the **Compare** button on any resource detail page (or from the Quick Actions menu) to open a diff dialog:
+
+1. Select a target cluster and namespace
+2. Click **Compare** to see a side-by-side YAML diff
+3. Metadata noise (uid, resourceVersion, managedFields) and status are stripped for a clean comparison
+
+Useful for verifying configuration parity across staging and production environments.
+
+### Multi-Namespace Selector
+
+Select multiple namespaces simultaneously to view resources across them in a single list. Click the checklist icon in the namespace selector to enter multi-select mode:
+
+- Toggle individual namespaces with checkboxes
+- "All Namespaces" toggles select-all / deselect-all
+- The trigger button shows "N namespaces" when multiple are selected
+- Resources are fetched from all namespaces and filtered client-side
+
+### Multi-Cluster Overview
+
+Navigate to `/clusters` and click the **Overview** button to see all connected clusters on a single dashboard:
+
+- **Summary stats** — Total connected clusters, running pods, failing pods, and warning events
+- **Cluster health grid** — Cards per cluster with status dot, pod count, failing count, and warning count
+- **Failing pods breakdown** — Table of clusters with failing pods, sorted by severity
+- **Warning events breakdown** — Table of clusters with recent warning events
+
+Click any cluster card to jump directly to that cluster's overview page.
+
 ### Deployment Scaling
 
 Scale Deployments and StatefulSets directly from the UI. A dedicated scale dialog lets you set the desired replica count and apply it instantly.
@@ -197,6 +244,14 @@ npm run electron:dev
 
 The app opens automatically once the dev server is ready (port 51230).
 
+#### Mock Mode
+
+Run without a real cluster using built-in mock data (3 clusters, various pod states, warning events):
+
+```bash
+npm run dev:mock     # http://localhost:51230
+```
+
 ### Build
 
 Create a distributable package for your platform:
@@ -213,10 +268,11 @@ Output is written to `dist-electron/`.
 
 ## Keyboard Shortcuts
 
-| Shortcut           | Action                 |
-| ------------------ | ---------------------- |
-| `Cmd+K` / `Ctrl+K` | Open command palette   |
-| `Cmd+S` / `Ctrl+S` | Save YAML in edit mode |
+| Shortcut           | Action                              |
+| ------------------ | ----------------------------------- |
+| `Cmd+K` / `Ctrl+K` | Open command palette                |
+| `Cmd+S` / `Ctrl+S` | Review changes (edit mode)          |
+| `Cmd+S` / `Ctrl+S` | Apply changes (review mode)         |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kubeops",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A modern desktop client for Kubernetes cluster management",
   "main": "electron/main.js",
   "repository": {

package/src/app/clusters/[clusterId]/namespaces/[namespace]/deployments/[name]/page.tsx

@@ -14,7 +14,7 @@ import { ScaleDialog } from '@/components/resources/scale-dialog';
 import { ConfirmDialog } from '@/components/shared/confirm-dialog';
 import { YamlEditor } from '@/components/shared/yaml-editor';
 import { PodMetricsCharts } from '@/components/shared/metrics-charts';
-import { ArrowLeft, Trash2, Scaling, Terminal, ScrollText, RotateCcw } from 'lucide-react';
+import { ArrowLeft, Trash2, Scaling, Terminal, ScrollText, RotateCcw, GitCompare } from 'lucide-react';
 import { apiClient } from '@/lib/api-client';
 import { toast } from 'sonner';
 import { useState } from 'react';
@@ -24,6 +24,7 @@ import Link from 'next/link';
 import { PortForwardBtn } from '@/components/shared/port-forward-btn';
 import { ResourceTreeView } from '@/components/shared/resource-tree';
 import { useResourceTree } from '@/hooks/use-resource-tree';
+import { ResourceDiffDialog } from '@/components/shared/resource-diff-dialog';
 
 export default function DeploymentDetailPage() {
   const params = useParams();
@@ -35,6 +36,7 @@ export default function DeploymentDetailPage() {
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [restarting, setRestarting] = useState(false);
+  const [compareOpen, setCompareOpen] = useState(false);
   const { addTab } = usePanelStore();
 
   const decodedClusterId = decodeURIComponent(clusterId);
@@ -173,6 +175,9 @@ export default function DeploymentDetailPage() {
           </p>
         </div>
         <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => setCompareOpen(true)}>
+            <GitCompare className="h-4 w-4 mr-1" />Compare
+          </Button>
           <Button variant="outline" size="sm" onClick={handleRestart} disabled={restarting}>
             <RotateCcw className={`h-4 w-4 mr-1 ${restarting ? 'animate-spin' : ''}`} />
             {restarting ? 'Restarting...' : 'Restart'}
@@ -452,6 +457,7 @@ export default function DeploymentDetailPage() {
 
       <ScaleDialog open={scaleOpen} onOpenChange={setScaleOpen} clusterId={decodedClusterId} namespace={namespace} resourceType="deployments" name={name} currentReplicas={spec.replicas || 0} onScaled={() => mutate()} />
       <ConfirmDialog open={deleteOpen} onOpenChange={setDeleteOpen} title={`Delete ${name}?`} description={`This will permanently delete the deployment "${name}".`} confirmLabel="Delete" variant="destructive" onConfirm={handleDelete} loading={deleting} />
+      <ResourceDiffDialog open={compareOpen} onOpenChange={setCompareOpen} sourceClusterId={clusterId} sourceNamespace={namespace} resourceType="deployments" resourceName={name} sourceResource={dep} />
     </div>
   );
 }

package/src/app/clusters/[clusterId]/namespaces/[namespace]/pods/[podName]/page.tsx

@@ -9,7 +9,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { StatusBadge } from '@/components/shared/status-badge';
 import { AgeDisplay } from '@/components/shared/age-display';
-import { ArrowLeft, Terminal, ScrollText, Trash2, KeyRound } from 'lucide-react';
+import { ArrowLeft, Terminal, ScrollText, Trash2, KeyRound, GitCompare } from 'lucide-react';
 import { useState, useMemo } from 'react';
 import { usePanelStore } from '@/stores/panel-store';
 import { ConfirmDialog } from '@/components/shared/confirm-dialog';
@@ -24,6 +24,7 @@ import { PodWatchButton } from '@/components/pods/pod-watch-button';
 import { usePodRestartWatcher } from '@/hooks/use-pod-watcher';
 import { ResourceTreeView } from '@/components/shared/resource-tree';
 import { useResourceTree } from '@/hooks/use-resource-tree';
+import { ResourceDiffDialog } from '@/components/shared/resource-diff-dialog';
 
 function PodResourceTree({ clusterId, namespace, rootKind, rootName, focusPodName }: {
   clusterId: string;
@@ -57,6 +58,7 @@ export default function PodDetailPage() {
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [envDrawerOpen, setEnvDrawerOpen] = useState(false);
+  const [compareOpen, setCompareOpen] = useState(false);
   const { addTab } = usePanelStore();
   const decodedClusterId = decodeURIComponent(clusterId);
 
@@ -168,6 +170,9 @@ export default function PodDetailPage() {
               </Button>
             </div>
           ))}
+          <Button variant="outline" size="sm" onClick={() => setCompareOpen(true)}>
+            <GitCompare className="h-4 w-4 mr-1" />Compare
+          </Button>
           <PodWatchButton clusterId={decodedClusterId} namespace={namespace} podName={podName} />
           <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
             <Trash2 className="h-4 w-4 mr-1" />Delete
@@ -392,6 +397,7 @@ export default function PodDetailPage() {
       </Tabs>
 
       <ConfirmDialog open={deleteOpen} onOpenChange={setDeleteOpen} title={`Delete ${podName}?`} description={`This will delete the pod "${podName}". If managed by a controller, it will be recreated.`} confirmLabel="Delete" variant="destructive" onConfirm={handleDelete} loading={deleting} />
+      <ResourceDiffDialog open={compareOpen} onOpenChange={setCompareOpen} sourceClusterId={clusterId} sourceNamespace={namespace} resourceType="pods" resourceName={podName} sourceResource={pod} />
 
       {/* Env Variables Drawer */}
       <Sheet open={envDrawerOpen} onOpenChange={setEnvDrawerOpen}>

package/src/app/clusters/[clusterId]/namespaces/[namespace]/statefulsets/[name]/page.tsx

@@ -14,7 +14,7 @@ import { ScaleDialog } from '@/components/resources/scale-dialog';
 import { ConfirmDialog } from '@/components/shared/confirm-dialog';
 import { YamlEditor } from '@/components/shared/yaml-editor';
 import { PodMetricsCharts } from '@/components/shared/metrics-charts';
-import { ArrowLeft, Trash2, Scaling, Terminal, ScrollText, RotateCcw } from 'lucide-react';
+import { ArrowLeft, Trash2, Scaling, Terminal, ScrollText, RotateCcw, GitCompare } from 'lucide-react';
 import { apiClient } from '@/lib/api-client';
 import { toast } from 'sonner';
 import { useState } from 'react';
@@ -23,6 +23,7 @@ import { usePanelStore } from '@/stores/panel-store';
 import { PortForwardBtn } from '@/components/shared/port-forward-btn';
 import { ResourceTreeView } from '@/components/shared/resource-tree';
 import { useResourceTree } from '@/hooks/use-resource-tree';
+import { ResourceDiffDialog } from '@/components/shared/resource-diff-dialog';
 
 export default function StatefulSetDetailPage() {
   const params = useParams();
@@ -34,6 +35,7 @@ export default function StatefulSetDetailPage() {
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [restarting, setRestarting] = useState(false);
+  const [compareOpen, setCompareOpen] = useState(false);
   const { addTab } = usePanelStore();
 
   const decodedClusterId = decodeURIComponent(clusterId);
@@ -116,6 +118,9 @@ export default function StatefulSetDetailPage() {
           <p className="text-sm text-muted-foreground">StatefulSet in {namespace} - Ready: {status.readyReplicas || 0}/{spec.replicas || 0}</p>
         </div>
         <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => setCompareOpen(true)}>
+            <GitCompare className="h-4 w-4 mr-1" />Compare
+          </Button>
           <Button variant="outline" size="sm" onClick={handleRestart} disabled={restarting}>
             <RotateCcw className={`h-4 w-4 mr-1 ${restarting ? 'animate-spin' : ''}`} />
             {restarting ? 'Restarting...' : 'Restart'}
@@ -297,6 +302,7 @@ export default function StatefulSetDetailPage() {
 
       <ScaleDialog open={scaleOpen} onOpenChange={setScaleOpen} clusterId={decodedClusterId} namespace={namespace} resourceType="statefulsets" name={name} currentReplicas={spec.replicas || 0} onScaled={() => mutate()} />
       <ConfirmDialog open={deleteOpen} onOpenChange={setDeleteOpen} title={`Delete ${name}?`} description={`This will permanently delete the statefulset "${name}".`} confirmLabel="Delete" variant="destructive" onConfirm={handleDelete} loading={deleting} />
+      <ResourceDiffDialog open={compareOpen} onOpenChange={setCompareOpen} sourceClusterId={clusterId} sourceNamespace={namespace} resourceType="statefulsets" resourceName={name} sourceResource={sts} />
     </div>
   );
 }

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

@@ -16,6 +16,7 @@ import {
   AreaChart, Area,
 } from 'recharts';
 import { NodeMetricsSummary } from '@/components/shared/metrics-charts';
+import { WorkloadHealthSummary } from '@/components/dashboard/workload-health-summary';
 
 const POD_COLORS: Record<string, string> = {
   Running: '#22c55e', Succeeded: '#3b82f6', Pending: '#eab308',
@@ -222,6 +223,19 @@ export default function ClusterOverviewPage() {
         </div>
       </div>
 
+      {/* Workload Health Summary */}
+      {coreLoaded && (
+        <WorkloadHealthSummary
+          clusterId={clusterId}
+          namespace={namespace}
+          pods={pods}
+          deployments={deployments}
+          statefulsets={statefulsets}
+          daemonsets={daemonsets}
+          events={events}
+        />
+      )}
+
       {/* Stats */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {stats.map((stat) => {

package/src/app/clusters/overview/page.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useClusters } from '@/hooks/use-clusters';
+import { useMultiClusterData } from '@/hooks/use-multi-cluster-data';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ThemeToggle } from '@/components/layout/theme-toggle';
+import { ArrowLeft, Box, AlertTriangle, AlertCircle, Server } from 'lucide-react';
+
+export default function MultiClusterOverviewPage() {
+  const router = useRouter();
+  const { clusters, isLoading: clustersLoading } = useClusters();
+  const { clusterData, isLoading: dataLoading } = useMultiClusterData(clusters);
+
+  const isLoading = clustersLoading || dataLoading;
+
+  const totalPods = clusterData.reduce((s, c) => s + c.podCount, 0);
+  const totalRunning = clusterData.reduce((s, c) => s + c.runningPods, 0);
+  const totalFailing = clusterData.reduce((s, c) => s + c.failingPods, 0);
+  const totalWarnings = clusterData.reduce((s, c) => s + c.warningEvents, 0);
+  const connectedCount = clusterData.filter((c) => c.status === 'connected').length;
+
+  return (
+    <div className="flex h-screen flex-col">
+      {/* Header */}
+      <header className="electron-header-inset flex h-14 items-center justify-between border-b px-4 shrink-0 drag-region">
+        <div className="flex items-center gap-3 no-drag-region">
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => router.push('/clusters')}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <h1 className="text-lg font-bold tracking-tight">Multi-Cluster Overview</h1>
+        </div>
+        <div className="flex items-center gap-2 no-drag-region">
+          <ThemeToggle />
+        </div>
+      </header>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto">
+        <div className="flex flex-col gap-6 p-6">
+          {/* Summary Stats */}
+          <div className="grid gap-4 grid-cols-2 md:grid-cols-4">
+            <Card>
+              <CardContent className="flex items-center gap-3 p-4">
+                <div className="rounded-lg p-2.5 bg-blue-500/10">
+                  <Server className="h-5 w-5 text-blue-500" />
+                </div>
+                <div>
+                  <p className="text-2xl font-bold">{connectedCount}</p>
+                  <p className="text-xs text-muted-foreground">Connected Clusters</p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="flex items-center gap-3 p-4">
+                <div className="rounded-lg p-2.5 bg-green-500/10">
+                  <Box className="h-5 w-5 text-green-500" />
+                </div>
+                <div>
+                  <p className="text-2xl font-bold">{totalRunning}<span className="text-sm font-normal text-muted-foreground">/{totalPods}</span></p>
+                  <p className="text-xs text-muted-foreground">Running Pods</p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="flex items-center gap-3 p-4">
+                <div className={`rounded-lg p-2.5 ${totalFailing > 0 ? 'bg-red-500/10' : 'bg-green-500/10'}`}>
+                  <AlertCircle className={`h-5 w-5 ${totalFailing > 0 ? 'text-red-500' : 'text-green-500'}`} />
+                </div>
+                <div>
+                  <p className="text-2xl font-bold">{totalFailing}</p>
+                  <p className="text-xs text-muted-foreground">Failing Pods</p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="flex items-center gap-3 p-4">
+                <div className={`rounded-lg p-2.5 ${totalWarnings > 0 ? 'bg-amber-500/10' : 'bg-green-500/10'}`}>
+                  <AlertTriangle className={`h-5 w-5 ${totalWarnings > 0 ? 'text-amber-500' : 'text-green-500'}`} />
+                </div>
+                <div>
+                  <p className="text-2xl font-bold">{totalWarnings}</p>
+                  <p className="text-xs text-muted-foreground">Warning Events (1h)</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Cluster Health Grid */}
+          <div>
+            <h2 className="text-lg font-semibold mb-3">Cluster Health</h2>
+            {isLoading && (
+              <div className="grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <Skeleton key={i} className="h-28" />
+                ))}
+              </div>
+            )}
+            {!isLoading && clusterData.length === 0 && (
+              <div className="text-center text-muted-foreground py-8">
+                No connected clusters found. Go back to connect clusters.
+              </div>
+            )}
+            {!isLoading && clusterData.length > 0 && (
+              <div className="grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+                {clusterData.map((cluster) => {
+                  const hasIssues = cluster.failingPods > 0 || cluster.warningEvents > 0;
+                  return (
+                    <Card
+                      key={cluster.name}
+                      className="cursor-pointer transition-colors hover:border-primary/50 hover:bg-accent/50"
+                      onClick={() => router.push(`/clusters/${encodeURIComponent(cluster.name)}`)}
+                    >
+                      <CardHeader className="pb-2 pt-4 px-4">
+                        <div className="flex items-center gap-2">
+                          <div className={`h-2.5 w-2.5 rounded-full shrink-0 ${
+                            cluster.status === 'connected'
+                              ? hasIssues ? 'bg-amber-500' : 'bg-green-500'
+                              : 'bg-red-500'
+                          }`} />
+                          <CardTitle className="text-sm font-medium truncate">{cluster.name}</CardTitle>
+                        </div>
+                      </CardHeader>
+                      <CardContent className="px-4 pb-4">
+                        {cluster.error ? (
+                          <p className="text-xs text-destructive">{cluster.error}</p>
+                        ) : (
+                          <div className="grid grid-cols-3 gap-2 text-center">
+                            <div>
+                              <p className="text-lg font-bold">{cluster.runningPods}<span className="text-xs font-normal text-muted-foreground">/{cluster.podCount}</span></p>
+                              <p className="text-[10px] text-muted-foreground">Pods</p>
+                            </div>
+                            <div>
+                              <p className={`text-lg font-bold ${cluster.failingPods > 0 ? 'text-red-500' : ''}`}>{cluster.failingPods}</p>
+                              <p className="text-[10px] text-muted-foreground">Failing</p>
+                            </div>
+                            <div>
+                              <p className={`text-lg font-bold ${cluster.warningEvents > 0 ? 'text-amber-500' : ''}`}>{cluster.warningEvents}</p>
+                              <p className="text-[10px] text-muted-foreground">Warnings</p>
+                            </div>
+                          </div>
+                        )}
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Aggregated Failing Pods */}
+          {totalFailing > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold mb-3 flex items-center gap-2">
+                <AlertCircle className="h-5 w-5 text-red-500" />
+                Failing Pods Breakdown
+              </h2>
+              <div className="rounded-md border overflow-hidden">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted/50">
+                    <tr>
+                      <th className="px-4 py-2 text-left font-medium">Cluster</th>
+                      <th className="px-4 py-2 text-left font-medium">Failing Pods</th>
+                      <th className="px-4 py-2 text-left font-medium">Total Pods</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {clusterData
+                      .filter((c) => c.failingPods > 0)
+                      .sort((a, b) => b.failingPods - a.failingPods)
+                      .map((c) => (
+                        <tr key={c.name} className="border-t hover:bg-muted/30">
+                          <td className="px-4 py-2">
+                            <button
+                              onClick={() => router.push(`/clusters/${encodeURIComponent(c.name)}`)}
+                              className="text-primary hover:underline font-medium"
+                            >
+                              {c.name}
+                            </button>
+                          </td>
+                          <td className="px-4 py-2">
+                            <Badge variant="destructive">{c.failingPods}</Badge>
+                          </td>
+                          <td className="px-4 py-2 text-muted-foreground">{c.podCount}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* Aggregated Warning Events */}
+          {totalWarnings > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold mb-3 flex items-center gap-2">
+                <AlertTriangle className="h-5 w-5 text-amber-500" />
+                Warning Events Breakdown
+              </h2>
+              <div className="rounded-md border overflow-hidden">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted/50">
+                    <tr>
+                      <th className="px-4 py-2 text-left font-medium">Cluster</th>
+                      <th className="px-4 py-2 text-left font-medium">Warnings (1h)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {clusterData
+                      .filter((c) => c.warningEvents > 0)
+                      .sort((a, b) => b.warningEvents - a.warningEvents)
+                      .map((c) => (
+                        <tr key={c.name} className="border-t hover:bg-muted/30">
+                          <td className="px-4 py-2">
+                            <button
+                              onClick={() => router.push(`/clusters/${encodeURIComponent(c.name)}`)}
+                              className="text-primary hover:underline font-medium"
+                            >
+                              {c.name}
+                            </button>
+                          </td>
+                          <td className="px-4 py-2">
+                            <Badge variant="outline" className="bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20">
+                              {c.warningEvents}
+                            </Badge>
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/clusters/page.tsx

@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { Server, ArrowRight, Search, Settings, RotateCw, LogIn, Loader2, CircleCheck, LayoutGrid, List, Star, Tag, ChevronDown, ChevronRight } from 'lucide-react';
+import { Server, ArrowRight, Search, Settings, RotateCw, LogIn, Loader2, CircleCheck, LayoutGrid, LayoutDashboard, List, Star, Tag, ChevronDown, ChevronRight } from 'lucide-react';
 import { ThemeToggle } from '@/components/layout/theme-toggle';
 import { UpdateIndicator } from '@/components/layout/header';
 import { SettingsDialog } from '@/components/settings/settings-dialog';
@@ -164,6 +164,10 @@ export default function ClustersPage() {
               }
             </TooltipContent>
           </Tooltip>
+          <Button variant="ghost" size="sm" className="h-8 gap-1.5" onClick={() => router.push('/clusters/overview')} title="Multi-Cluster Overview">
+            <LayoutDashboard className="h-4 w-4" />
+            <span className="text-xs">Overview</span>
+          </Button>
           <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleRefresh} disabled={refreshing} title="Refresh cluster list">
             <RotateCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
           </Button>