2026-04-22 09:35:28 +00:00
16 changed files with 13883 additions and 11 deletions
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@headlamp-k8s/eslint-config'],
+};
@@ -0,0 +1,17 @@
+node_modules/
+dist/
+.pnp/
+.pnp.js
+*.log
+*.tgz
+.DS_Store
+.env
+.env.local
+coverage/
+.nyc_output/
+.cache/
+*.swp
+*.swo
+*~
+.vscode/
+.idea/
@@ -0,0 +1,64 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project
+
+Headlamp plugin for ArgoCD visibility. Monitors ArgoCD Applications, Rollouts, and health status via the ArgoCD REST API proxied through Kubernetes. Read-only — no cluster write operations.
+
+- **Plugin name**: `argocd`
+- **Target**: Headlamp >= v0.26
+- **Data source**: ArgoCD server at `/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications`
+- **RBAC**: `get`/`list` on `services/proxy` for `argocd-server` in `argocd` namespace
+
+## Commands
+
+```bash
+pnpm start          # dev server with hot reload
+pnpm build          # production build
+pnpm package        # package for headlamp
+pnpm tsc            # TypeScript type check (no emit)
+pnpm lint           # ESLint
+pnpm lint:fix       # ESLint with auto-fix
+pnpm format         # Prettier write
+pnpm format:check   # Prettier check
+pnpm test           # vitest run
+pnpm test:watch     # vitest watch mode
+```
+
+All tests and `pnpm tsc` must pass before committing.
+
+## Architecture
+
+```
+src/
+├── index.tsx                    # Plugin entry: registerRoute, registerSidebarEntry; ArgoCDErrorBoundary
+├── test-utils.tsx               # Shared test fixtures
+├── api/
+│   └── argocd.ts                # ArgoCD API types (Application, ApplicationsList)
+└── components/
+    └── ApplicationsList.tsx     # ArgoCD Applications List view with health/sync badges and filters
+```
+
+## Code conventions
+
+- Functional React components only — class components only for error boundaries (ArgoCDErrorBoundary in index.tsx)
+- All imports from `@kinvolk/headlamp-plugin/lib` and `@kinvolk/headlamp-plugin/lib/CommonComponents`
+- `@mui/material` is available as a shared external via Headlamp — use `useTheme` from `@mui/material/styles` for theming. Do NOT add `@mui/material` to package.json dependencies.
+- Use `useTheme()` + `theme.palette.*` for all theme-aware colors — never use `var(--mui-palette-*)` CSS variables
+- No other UI libraries (no Ant Design, etc.)
+- TypeScript strict mode — no `any`, use `unknown` + type guards at API boundaries
+- Context provider wraps each route component in `index.tsx`
+- All registered components wrapped in `ArgoCDErrorBoundary` for graceful error handling
+- Tests: vitest + @testing-library/react, mock with `vi.mock('@kinvolk/headlamp-plugin/lib', ...)`
+- `vitest.setup.ts` provides a spec-compliant `localStorage` shim for Node 22+ compatibility
+
+## Testing
+
+Mock pattern for headlamp APIs:
+```typescript
+vi.mock('@kinvolk/headlamp-plugin/lib', () => ({
+  ApiProxy: { request: vi.fn().mockResolvedValue({}) },
+  K8s: { ResourceClasses: {} },
+}));
+```
@@ -27,7 +27,7 @@ provider:
  name: privilegedescalation
 annotations:
  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-argocd-plugin/releases/download/v0.1.0/headlamp-argocd-0.1.0.tar.gz"
-  headlamp/plugin/archive-checksum: "sha256:REPLACE_WITH_ACTUAL_CHECKSUM"
+  headlamp/plugin/archive-checksum: "sha256:1f4df43f79b795bdf4f70e1e3aa5bacadf689ea5584fdadf92fb677faab21c2c"
  headlamp/plugin/version-compat: ">=0.26"
  headlamp/plugin/distro-compat: "in-cluster"
 changes:
@@ -1,18 +1,60 @@
 {
-  "name": "headlamp-argocd",
+  "name": "@privilegedescalation/headlamp-argocd-plugin",
  "version": "0.1.0",
-  "description": "Headlamp plugin for ArgoCD visibility",
+  "description": "Headlamp plugin for ArgoCD visibility — monitors ArgoCD Applications, Rollouts, and health status",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/privilegedescalation/headlamp-argocd-plugin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/privilegedescalation/headlamp-argocd-plugin/issues"
+  },
+  "homepage": "https://github.com/privilegedescalation/headlamp-argocd-plugin#readme",
+  "author": "privilegedescalation",
  "license": "Apache-2.0",
-  "keywords": ["headlamp", "argocd", "kubernetes", "gitops"],
+  "packageManager": "pnpm@10.32.1",
  "scripts": {
+    "start": "headlamp-plugin start",
    "build": "headlamp-plugin build",
-    "lint": "headlamp-plugin lint",
-    "tsc": "headlamp-plugin tsc",
-    "format:check": "headlamp-plugin format:check",
-    "test": "headlamp-plugin test",
-    "package": "headlamp-plugin package"
+    "package": "headlamp-plugin package",
+    "tsc": "tsc --noEmit",
+    "lint": "eslint --ext .ts,.tsx src/",
+    "lint:fix": "eslint --ext .ts,.tsx --fix src/",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "tar": "^7.5.11",
+      "undici": "^7.24.3",
+      "flatted": "^3.4.2"
+    }
  },
  "devDependencies": {
-    "@kinvolk/headlamp-plugin": "^0.26.0"
+    "@kinvolk/headlamp-plugin": "^0.13.0",
+    "@mui/material": "^5.15.14",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@headlamp-k8s/eslint-config": "^0.6.0",
+    "eslint": "^8.57.0",
+    "jsdom": "^24.0.0",
+    "prettier": "^2.8.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.0",
+    "tar": "^7.5.11",
+    "typescript": "~5.6.2",
+    "undici": "^7.24.3",
+    "vitest": "^3.0.5"
  }
-}
+}
@@ -0,0 +1,300 @@
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { MemoryRouter, Route } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import ApplicationDetail from "../components/ApplicationDetail";
+
+// --- Pure function unit tests ---
+
+function formatTimestamp(iso: string): string {
+  try {
+    const date = new Date(iso);
+    if (isNaN(date.getTime())) return "—";
+    return date.toLocaleString();
+  } catch {
+    return "—";
+  }
+}
+
+function formatRevision(revision: string): string {
+  if (!revision) return "—";
+  if (revision.length <= 8) return revision;
+  return revision.slice(0, 8);
+}
+
+describe("formatTimestamp", () => {
+  it("returns formatted date for valid ISO string", () => {
+    const result = formatTimestamp("2024-06-01T10:00:00Z");
+    expect(result).not.toBe("—");
+  });
+
+  it("returns em dash for empty string", () => {
+    expect(formatTimestamp("")).toBe("—");
+  });
+
+  it("returns em dash for invalid date", () => {
+    expect(formatTimestamp("not-a-date")).toBe("—");
+  });
+});
+
+describe("formatRevision", () => {
+  it("returns em dash for empty string", () => {
+    expect(formatRevision("")).toBe("—");
+  });
+
+  it("returns revision as-is if 8 chars or fewer", () => {
+    expect(formatRevision("abc")).toBe("abc");
+    expect(formatRevision("12345678")).toBe("12345678");
+  });
+
+  it("truncates revision to 8 chars if longer", () => {
+    expect(formatRevision("1234567890abcdef")).toBe("12345678");
+  });
+});
+
+// --- Component smoke tests ---
+
+// Mock Headlamp lib
+vi.mock("@kinvolk/headlamp-plugin/lib", () => ({
+  ApiProxy: { request: vi.fn() },
+}));
+
+// Mock CommonComponents
+vi.mock("@kinvolk/headlamp-plugin/lib/CommonComponents", () => ({
+  SectionBox: ({
+    children,
+    title,
+  }: {
+    children?: React.ReactNode;
+    title?: string;
+  }) => (
+    <div data-testid="section-box" data-title={title}>
+      {children}
+    </div>
+  ),
+  SectionHeader: ({ title }: { title: string }) => (
+    <div data-testid="section-header">{title}</div>
+  ),
+  StatusLabel: ({
+    status,
+    children,
+  }: {
+    status: string;
+    children?: React.ReactNode;
+  }) => (
+    <span data-testid="status-label" data-status={status}>
+      {children}
+    </span>
+  ),
+  SimpleTable: ({
+    columns,
+    data,
+    emptyMessage,
+  }: {
+    columns: Array<{
+      label: string;
+      getter: (row: unknown) => React.ReactNode;
+    }>;
+    data: unknown[];
+    emptyMessage?: string;
+  }) =>
+    data.length === 0 ? (
+      <div data-testid="simple-table-empty">{emptyMessage}</div>
+    ) : (
+      <table data-testid="simple-table">
+        <thead>
+          <tr>
+            {columns.map((col) => (
+              <th key={col.label}>{col.label}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, i) => (
+            <tr key={i}>
+              {columns.map((col) => (
+                <td key={col.label}>{col.getter(row)}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    ),
+}));
+
+function renderWithRouter(
+  ui: React.ReactElement,
+  initialEntry = "/argocd/applications/test-app"
+) {
+  return render(
+    <MemoryRouter initialEntries={[initialEntry]}>
+      <Route path="/argocd/applications/:name">{ui}</Route>
+    </MemoryRouter>
+  );
+}
+
+describe("ApplicationDetail component", () => {
+  it("renders loading state initially", async () => {
+    vi.mocked(ApiProxy.request).mockImplementation(
+      () => new Promise(() => {}) // never resolves — keeps loading
+    );
+
+    renderWithRouter(<ApplicationDetail />);
+    expect(screen.getByTestId("application-detail-loading")).toHaveTextContent(
+      "Loading application details"
+    );
+  });
+
+  it("renders error state when API fails", async () => {
+    vi.mocked(ApiProxy.request).mockRejectedValue(
+      new Error("connection refused")
+    );
+
+    renderWithRouter(<ApplicationDetail />);
+
+    await vi.waitFor(() => {
+      expect(
+        screen.getByTestId("application-detail-error")
+      ).toBeInTheDocument();
+    });
+
+    // fetchApplication catches the error and returns null, which sets "Application not found"
+    expect(screen.getByText(/Application not found/)).toBeInTheDocument();
+  });
+
+  it("renders application detail when API succeeds", async () => {
+    const mockApp = {
+      metadata: { name: "test-app", namespace: "argocd" },
+      spec: {
+        project: "default",
+        sourceRepoURL: "https://github.com/example/repo",
+        targetRevision: "v1.0.0",
+      },
+      status: {
+        health: { status: "Healthy" },
+        sync: { status: "Synced" },
+        resources: [
+          {
+            kind: "Deployment",
+            name: "example-app",
+            namespace: "default",
+            health: { status: "Healthy" },
+            status: "Synced",
+          },
+        ],
+        history: [
+          {
+            dexKey: "2024-06-01T10:00:00Z",
+            id: 1,
+            revision: "v1.0.0",
+            triggeredBy: "admin",
+          },
+        ],
+      },
+    };
+
+    vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
+      if (path.includes("/events")) {
+        return Promise.resolve({ items: [] });
+      }
+      return Promise.resolve(mockApp);
+    });
+
+    renderWithRouter(<ApplicationDetail />);
+
+    await vi.waitFor(() => {
+      expect(
+        screen.getByTestId("application-detail-header")
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("ArgoCD — test-app")).toBeInTheDocument();
+  });
+
+  it("renders resource tree with resources", async () => {
+    const mockApp = {
+      metadata: { name: "test-app", namespace: "argocd" },
+      spec: {
+        project: "default",
+        sourceRepoURL: "https://github.com/example/repo",
+        targetRevision: "v1.0.0",
+      },
+      status: {
+        health: { status: "Healthy" },
+        sync: { status: "Synced" },
+        resources: [
+          {
+            kind: "Deployment",
+            name: "example-app",
+            namespace: "default",
+            health: { status: "Healthy" },
+            status: "Synced",
+          },
+          {
+            kind: "Service",
+            name: "example-svc",
+            namespace: "default",
+            health: { status: "Healthy" },
+            status: "Synced",
+          },
+        ],
+        history: [],
+      },
+    };
+
+    vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
+      if (path.includes("/events")) {
+        return Promise.resolve({ items: [] });
+      }
+      return Promise.resolve(mockApp);
+    });
+
+    renderWithRouter(<ApplicationDetail />);
+
+    await vi.waitFor(() => {
+      expect(screen.getByTestId("simple-table")).toBeInTheDocument();
+    });
+
+    // Resource tree should show 2 data rows (plus 1 header row)
+    const tables = screen.getAllByTestId("simple-table");
+    expect(tables.length).toBeGreaterThan(0);
+  });
+
+  it("renders sync history", async () => {
+    const mockApp = {
+      metadata: { name: "test-app", namespace: "argocd" },
+      spec: {
+        project: "default",
+        sourceRepoURL: "https://github.com/example/repo",
+        targetRevision: "v1.0.0",
+      },
+      status: {
+        health: { status: "Healthy" },
+        sync: { status: "Synced" },
+        resources: [],
+        history: [
+          {
+            dexKey: "2024-06-01T10:00:00Z",
+            id: 1,
+            revision: "v1.0.0",
+            triggeredBy: "admin",
+          },
+        ],
+      },
+    };
+
+    vi.mocked(ApiProxy.request).mockImplementation((path: string) => {
+      if (path.includes("/events")) {
+        return Promise.resolve({ items: [] });
+      }
+      return Promise.resolve(mockApp);
+    });
+
+    renderWithRouter(<ApplicationDetail />);
+
+    await vi.waitFor(() => {
+      expect(screen.getByTestId("simple-table")).toBeInTheDocument();
+    });
+  });
+});
@@ -0,0 +1,363 @@
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import {
+  ApplicationRow,
+  healthStatusToColor,
+  healthStatusToLabel,
+  syncStatusToColor,
+} from "../components/ApplicationsList";
+import ApplicationsList from "../components/ApplicationsList";
+
+// --- Pure function unit tests ---
+
+describe("healthStatusToColor", () => {
+  it("maps Healthy to success", () => {
+    expect(healthStatusToColor("Healthy")).toBe("success");
+  });
+
+  it("maps Degraded to error", () => {
+    expect(healthStatusToColor("Degraded")).toBe("error");
+  });
+
+  it("maps Progressing to warning", () => {
+    expect(healthStatusToColor("Progressing")).toBe("warning");
+  });
+
+  it("maps Missing to default", () => {
+    expect(healthStatusToColor("Missing")).toBe("default");
+  });
+
+  it("maps Unknown to default", () => {
+    expect(healthStatusToColor("Unknown")).toBe("default");
+  });
+});
+
+describe("syncStatusToColor", () => {
+  it("maps Synced to success", () => {
+    expect(syncStatusToColor("Synced")).toBe("success");
+  });
+
+  it("maps OutOfSync to warning", () => {
+    expect(syncStatusToColor("OutOfSync")).toBe("warning");
+  });
+
+  it("maps Unknown to default", () => {
+    expect(syncStatusToColor("Unknown")).toBe("default");
+  });
+});
+
+describe("healthStatusToLabel", () => {
+  it("returns the status string as-is", () => {
+    expect(healthStatusToLabel("Healthy")).toBe("Healthy");
+    expect(healthStatusToLabel("Degraded")).toBe("Degraded");
+    expect(healthStatusToLabel("Progressing")).toBe("Progressing");
+    expect(healthStatusToLabel("Missing")).toBe("Missing");
+    expect(healthStatusToLabel("Unknown")).toBe("Unknown");
+  });
+});
+
+// --- Filter logic unit tests ---
+
+const makeApp = (overrides: Partial<ApplicationRow> = {}): ApplicationRow => ({
+  name: "test-app",
+  namespace: "argocd",
+  project: "default",
+  healthStatus: "Healthy",
+  syncStatus: "Synced",
+  targetRevision: "HEAD",
+  lastSynced: "2024-01-01T00:00:00Z",
+  ...overrides,
+});
+
+const ALL_HEALTH = "All" as const;
+const ALL_SYNC = "All" as const;
+
+function applyFilters(
+  apps: ApplicationRow[],
+  healthFilter: ApplicationRow["healthStatus"] | "All",
+  syncFilter: ApplicationRow["syncStatus"] | "All",
+  projectFilter: string
+): ApplicationRow[] {
+  return apps.filter((app) => {
+    if (healthFilter !== ALL_HEALTH && app.healthStatus !== healthFilter)
+      return false;
+    if (syncFilter !== ALL_SYNC && app.syncStatus !== syncFilter) return false;
+    if (projectFilter !== "All" && app.project !== projectFilter) return false;
+    return true;
+  });
+}
+
+describe("ApplicationsList filter logic", () => {
+  const apps = [
+    makeApp({
+      name: "app-1",
+      healthStatus: "Healthy",
+      syncStatus: "Synced",
+      project: "proj-a",
+    }),
+    makeApp({
+      name: "app-2",
+      healthStatus: "Healthy",
+      syncStatus: "OutOfSync",
+      project: "proj-a",
+    }),
+    makeApp({
+      name: "app-3",
+      healthStatus: "Degraded",
+      syncStatus: "OutOfSync",
+      project: "proj-b",
+    }),
+    makeApp({
+      name: "app-4",
+      healthStatus: "Progressing",
+      syncStatus: "Synced",
+      project: "proj-b",
+    }),
+    makeApp({
+      name: "app-5",
+      healthStatus: "Unknown",
+      syncStatus: "Unknown",
+      project: "proj-c",
+    }),
+  ];
+
+  it("returns all apps when all filters are All", () => {
+    const result = applyFilters(apps, ALL_HEALTH, ALL_SYNC, "All");
+    expect(result).toHaveLength(5);
+  });
+
+  it("filters by health status", () => {
+    const result = applyFilters(apps, "Healthy", ALL_SYNC, "All");
+    expect(result).toHaveLength(2);
+    expect(result.map((a) => a.name)).toEqual(["app-1", "app-2"]);
+  });
+
+  it("filters by sync status", () => {
+    const result = applyFilters(apps, ALL_HEALTH, "OutOfSync", "All");
+    expect(result).toHaveLength(2);
+    expect(result.map((a) => a.name)).toEqual(["app-2", "app-3"]);
+  });
+
+  it("filters by project", () => {
+    const result = applyFilters(apps, ALL_HEALTH, ALL_SYNC, "proj-a");
+    expect(result).toHaveLength(2);
+    expect(result.map((a) => a.name)).toEqual(["app-1", "app-2"]);
+  });
+
+  it("combines multiple filters", () => {
+    const result = applyFilters(apps, "Healthy", "OutOfSync", "All");
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("app-2");
+  });
+
+  it("returns empty array when no apps match", () => {
+    const result = applyFilters(apps, "Degraded", "Synced", "All");
+    expect(result).toHaveLength(0);
+  });
+});
+
+// --- Component smoke test ---
+
+// Mock Headlamp lib
+vi.mock("@kinvolk/headlamp-plugin/lib", () => ({
+  ApiProxy: { request: vi.fn() },
+}));
+
+// Mock MUI
+vi.mock("@mui/material/FormControl", () => ({
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="form-control">{children}</div>
+  ),
+}));
+
+vi.mock("@mui/material/InputLabel", () => ({
+  default: ({ children, id }: { children: React.ReactNode; id?: string }) => (
+    <label data-testid="input-label" id={id}>
+      {children}
+    </label>
+  ),
+}));
+
+vi.mock("@mui/material/Select", () => ({
+  default: ({
+    children,
+    value,
+    onChange,
+    label,
+  }: {
+    children: React.ReactNode;
+    value: string;
+    onChange: (e: { target: { value: string } }) => void;
+    label?: string;
+  }) => (
+    <select
+      data-testid="select"
+      value={value}
+      onChange={(e) => onChange({ target: { value: e.target.value } })}
+      aria-label={label}
+    >
+      {children}
+    </select>
+  ),
+}));
+
+vi.mock("@mui/material/MenuItem", () => ({
+  default: ({
+    children,
+    value,
+  }: {
+    children: React.ReactNode;
+    value: string;
+  }) => (
+    <option data-testid="menu-item" value={value}>
+      {children}
+    </option>
+  ),
+}));
+
+vi.mock("@mui/material/Box", () => ({
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="box">{children}</div>
+  ),
+}));
+
+// Mock CommonComponents
+vi.mock("@kinvolk/headlamp-plugin/lib/CommonComponents", () => ({
+  SectionBox: ({ children }: { children?: React.ReactNode }) => (
+    <div data-testid="section-box">{children}</div>
+  ),
+  SectionHeader: ({ title }: { title: string }) => (
+    <div data-testid="section-header">{title}</div>
+  ),
+  StatusLabel: ({
+    status,
+    children,
+  }: {
+    status: string;
+    children?: React.ReactNode;
+  }) => (
+    <span data-testid="status-label" data-status={status}>
+      {children}
+    </span>
+  ),
+  SimpleTable: ({
+    columns,
+    data,
+    emptyMessage,
+  }: {
+    columns: Array<{
+      label: string;
+      getter: (row: unknown) => React.ReactNode;
+    }>;
+    data: unknown[];
+    emptyMessage?: string;
+  }) =>
+    data.length === 0 ? (
+      <div data-testid="simple-table-empty">{emptyMessage}</div>
+    ) : (
+      <table data-testid="simple-table">
+        <thead>
+          <tr>
+            {columns.map((col) => (
+              <th key={col.label}>{col.label}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, i) => (
+            <tr key={i}>
+              {columns.map((col) => (
+                <td key={col.label}>{col.getter(row)}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    ),
+}));
+
+function renderWithRouter(ui: React.ReactElement) {
+  return render(<MemoryRouter>{ui}</MemoryRouter>);
+}
+
+describe("ApplicationsList component", () => {
+  it("renders loading state initially", async () => {
+    vi.mocked(ApiProxy.request).mockImplementation(
+      () => new Promise(() => {}) // never resolves — keeps loading
+    );
+
+    renderWithRouter(<ApplicationsList />);
+    expect(screen.getByTestId("applications-loading")).toHaveTextContent(
+      "Loading ArgoCD applications"
+    );
+  });
+
+  it("renders error state when API fails", async () => {
+    vi.mocked(ApiProxy.request).mockRejectedValue(
+      new Error("connection refused")
+    );
+
+    renderWithRouter(<ApplicationsList />);
+
+    await vi.waitFor(() => {
+      expect(screen.getByTestId("applications-error")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/connection refused/)).toBeInTheDocument();
+  });
+
+  it("renders table with applications when API succeeds", async () => {
+    const mockResponse = {
+      items: [
+        {
+          metadata: { name: "app-1", namespace: "argocd" },
+          spec: { project: "default", targetRevision: "v1.0.0" },
+          status: {
+            health: { status: "Healthy" },
+            sync: { status: "Synced" },
+            history: [
+              { dexKey: "2024-06-01T10:00:00Z", id: 0, revision: "v1.0.0" },
+            ],
+          },
+        },
+        {
+          metadata: { name: "app-2", namespace: "argocd" },
+          spec: { project: "default", targetRevision: "HEAD" },
+          status: {
+            health: { status: "Degraded" },
+            sync: { status: "OutOfSync" },
+            history: [],
+          },
+        },
+      ],
+    };
+
+    vi.mocked(ApiProxy.request).mockResolvedValue(mockResponse);
+
+    renderWithRouter(<ApplicationsList />);
+
+    await vi.waitFor(() => {
+      expect(screen.getByTestId("simple-table")).toBeInTheDocument();
+    });
+
+    const rows = screen.getAllByRole("row");
+    expect(rows.length).toBe(3); // 1 header + 2 data rows
+  });
+
+  it("renders empty message when no applications", async () => {
+    vi.mocked(ApiProxy.request).mockResolvedValue({ items: [] });
+
+    renderWithRouter(<ApplicationsList />);
+
+    await vi.waitFor(() => {
+      expect(screen.getByTestId("simple-table-empty")).toBeInTheDocument();
+    });
+
+    expect(
+      screen.getByText("No ArgoCD applications found.")
+    ).toBeInTheDocument();
+  });
+});
@@ -0,0 +1,100 @@
+// --- ArgoCD API types ---
+
+/**
+ * Health status values returned by ArgoCD Application status.
+ */
+export type ArgoCDHealthStatus =
+  | "Healthy"
+  | "Degraded"
+  | "Progressing"
+  | "Missing"
+  | "Unknown";
+
+/**
+ * Sync status values returned by ArgoCD Application status.
+ */
+export type ArgoCDSyncStatus = "Synced" | "OutOfSync" | "Unknown";
+
+/**
+ * An ArgoCD Application resource.
+ * Matches the ArgoCD server API /api/v1/applications response shape.
+ */
+export interface ArgoCDApplication {
+  metadata: {
+    name: string;
+    namespace: string;
+    uid?: string;
+    labels?: Record<string, string>;
+    annotations?: Record<string, string>;
+    creationTimestamp?: string;
+  };
+  spec: {
+    project: string;
+    sourceRepoURL?: string;
+    targetRevision?: string;
+    path?: string;
+    destination?: {
+      server?: string;
+      namespace?: string;
+      name?: string;
+    };
+    sources?: Array<{
+      repoURL?: string;
+      targetRevision?: string;
+      path?: string;
+    }>;
+  };
+  status: {
+    health?: {
+      status: ArgoCDHealthStatus;
+      message?: string;
+    };
+    sync?: {
+      status: ArgoCDSyncStatus;
+      comparedTo?: {
+        destination?: {
+          server?: string;
+          namespace?: string;
+        };
+        source?: {
+          repoURL?: string;
+          path?: string;
+          targetRevision?: string;
+        };
+      };
+    };
+    history?: Array<{
+      dexKey: string; // ISO 8601 timestamp
+      id: number;
+      revision: string;
+      deployStartedAt?: string;
+      triggeredBy?: string;
+    }>;
+    resources?: Array<{
+      kind: string;
+      namespace?: string;
+      name: string;
+      group?: string;
+      status?: string;
+      health?: {
+        status: ArgoCDHealthStatus;
+      };
+    }>;
+    sourceType?: string;
+    summary?: {
+      externalURLs?: string[];
+      images?: string[];
+    };
+  };
+}
+
+/**
+ * Response envelope for the ArgoCD Applications list API.
+ */
+export interface ArgoCDApplicationsList {
+  items: ArgoCDApplication[];
+  metadata?: {
+    resourceVersion?: string;
+    remainingItemCount?: number;
+  };
+}
@@ -0,0 +1,375 @@
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import {
+  SectionBox,
+  SectionHeader,
+  SimpleTable,
+  StatusLabel,
+} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import {
+  ArgoCDApplication,
+  ArgoCDHealthStatus,
+  ArgoCDSyncStatus,
+} from "../api/argocd";
+import { healthStatusToColor, syncStatusToColor } from "./ApplicationsList";
+
+// --- Types ---
+
+interface ResourceRow {
+  kind: string;
+  name: string;
+  namespace: string;
+  healthStatus: ArgoCDHealthStatus | "Unknown";
+  syncStatus: ArgoCDSyncStatus | "Unknown";
+}
+
+interface SyncHistoryRow {
+  revision: string;
+  deployedAt: string;
+  initiatedBy: string;
+  status: "Success" | "Failed" | "Unknown";
+}
+
+interface K8sEvent {
+  metadata: {
+    name: string;
+    namespace: string;
+    creationTimestamp: string;
+  };
+  type: string;
+  reason: string;
+  message: string;
+  involvedObject: {
+    name: string;
+    kind: string;
+  };
+  source: {
+    component: string;
+  };
+}
+
+// --- Helpers ---
+
+function healthStatusToLabel(status: ArgoCDHealthStatus | "Unknown"): string {
+  return status === "Unknown" ? "Unknown" : status;
+}
+
+function formatTimestamp(iso: string): string {
+  try {
+    const date = new Date(iso);
+    if (isNaN(date.getTime())) return "—";
+    return date.toLocaleString();
+  } catch {
+    return "—";
+  }
+}
+
+function formatRevision(revision: string): string {
+  if (!revision) return "—";
+  if (revision.length <= 8) return revision;
+  return revision.slice(0, 8);
+}
+
+// --- API ---
+
+const ARGOCD_API_PATH =
+  "/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications";
+
+async function fetchApplication(
+  name: string
+): Promise<ArgoCDApplication | null> {
+  try {
+    const response = (await ApiProxy.request(
+      `${ARGOCD_API_PATH}/${name}`
+    )) as ArgoCDApplication;
+    return response;
+  } catch {
+    return null;
+  }
+}
+
+async function fetchApplicationEvents(
+  namespace: string,
+  appName: string
+): Promise<K8sEvent[]> {
+  try {
+    const fieldSelector = encodeURIComponent(`involvedObject.name=${appName}`);
+    const response = (await ApiProxy.request(
+      `/api/v1/namespaces/${namespace}/events?fieldSelector=${fieldSelector}`
+    )) as { items: K8sEvent[] };
+    return response.items ?? [];
+  } catch {
+    return [];
+  }
+}
+
+// --- Component ---
+
+export default function ApplicationDetail() {
+  const { name } = useParams<{ name: string }>();
+  const [application, setApplication] = useState<ArgoCDApplication | null>(
+    null
+  );
+  const [events, setEvents] = useState<K8sEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!name) return;
+
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    fetchApplication(name)
+      .then((app) => {
+        if (cancelled) return;
+        if (!app) {
+          setError("Application not found");
+          setLoading(false);
+          return;
+        }
+        setApplication(app);
+        setLoading(false);
+
+        // Fetch events in parallel
+        const namespace = app.metadata?.namespace ?? "argocd";
+        fetchApplicationEvents(namespace, name).then((evts) => {
+          if (!cancelled) setEvents(evts);
+        });
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [name]);
+
+  if (loading) {
+    return (
+      <>
+        <SectionHeader title="Application Detail" />
+        <SectionBox>
+          <div data-testid="application-detail-loading">
+            Loading application details...
+          </div>
+        </SectionBox>
+      </>
+    );
+  }
+
+  if (error || !application) {
+    return (
+      <>
+        <SectionHeader title="Application Detail" />
+        <SectionBox>
+          <div data-testid="application-detail-error">
+            <StatusLabel status="error">
+              {error ?? "Application not found"}
+            </StatusLabel>
+          </div>
+        </SectionBox>
+      </>
+    );
+  }
+
+  const healthStatus =
+    (application.status?.health?.status as ArgoCDHealthStatus) ?? "Unknown";
+  const syncStatus =
+    (application.status?.sync?.status as ArgoCDSyncStatus) ?? "Unknown";
+  const targetRevision = application.spec?.targetRevision ?? "—";
+  const repoURL = application.spec?.sourceRepoURL ?? "—";
+  const project = application.spec?.project ?? "—";
+  const namespace = application.metadata?.namespace ?? "—";
+
+  // Build resource rows
+  const resourceRows: ResourceRow[] = (application.status?.resources ?? []).map(
+    (res) => ({
+      kind: res.kind ?? "Unknown",
+      name: res.name ?? "unknown",
+      namespace: res.namespace ?? "—",
+      healthStatus: (res.health?.status as ArgoCDHealthStatus) ?? "Unknown",
+      syncStatus: (res.status as ArgoCDSyncStatus) ?? "Unknown",
+    })
+  );
+
+  // Build sync history rows (last 10)
+  const historyRows: SyncHistoryRow[] = (application.status?.history ?? [])
+    .slice(-10)
+    .map((entry) => ({
+      revision: formatRevision(entry.revision),
+      deployedAt: formatTimestamp(entry.dexKey),
+      initiatedBy: entry.triggeredBy ?? "automated",
+      status: entry.id !== undefined ? "Success" : "Unknown",
+    }));
+
+  const resourceColumns = [
+    {
+      label: "Kind",
+      getter: (row: ResourceRow) => row.kind,
+    },
+    {
+      label: "Name",
+      getter: (row: ResourceRow) => row.name,
+    },
+    {
+      label: "Namespace",
+      getter: (row: ResourceRow) => row.namespace,
+    },
+    {
+      label: "Health",
+      getter: (row: ResourceRow) => (
+        <StatusLabel status={healthStatusToColor(row.healthStatus)}>
+          {healthStatusToLabel(row.healthStatus)}
+        </StatusLabel>
+      ),
+    },
+    {
+      label: "Sync",
+      getter: (row: ResourceRow) => (
+        <StatusLabel status={syncStatusToColor(row.syncStatus)}>
+          {row.syncStatus}
+        </StatusLabel>
+      ),
+    },
+  ];
+
+  const historyColumns = [
+    {
+      label: "Revision",
+      getter: (row: SyncHistoryRow) => row.revision,
+    },
+    {
+      label: "Deployed At",
+      getter: (row: SyncHistoryRow) => row.deployedAt,
+    },
+    {
+      label: "Initiated By",
+      getter: (row: SyncHistoryRow) => row.initiatedBy,
+    },
+    {
+      label: "Status",
+      getter: (row: SyncHistoryRow) => (
+        <StatusLabel status={row.status === "Success" ? "success" : "warning"}>
+          {row.status}
+        </StatusLabel>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <SectionHeader title={`ArgoCD — ${name}`} />
+      <SectionBox>
+        {/* Header metadata */}
+        <div data-testid="application-detail-header">
+          <StatusLabel status={healthStatusToColor(healthStatus)}>
+            {healthStatusToLabel(healthStatus)}
+          </StatusLabel>{" "}
+          <StatusLabel status={syncStatusToColor(syncStatus)}>
+            {syncStatus}
+          </StatusLabel>
+          <table>
+            <tbody>
+              <tr>
+                <td>
+                  <strong>Project:</strong>
+                </td>
+                <td>{project}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Namespace:</strong>
+                </td>
+                <td>{namespace}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Target Revision:</strong>
+                </td>
+                <td>{targetRevision}</td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Repository:</strong>
+                </td>
+                <td>{repoURL}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </SectionBox>
+
+      {/* Resource Tree */}
+      <SectionBox title="Resource Tree">
+        {resourceRows.length === 0 ? (
+          <div data-testid="resource-tree-empty">
+            No resources managed by this application.
+          </div>
+        ) : (
+          <SimpleTable
+            columns={resourceColumns}
+            data={resourceRows}
+            emptyMessage="No resources found."
+          />
+        )}
+      </SectionBox>
+
+      {/* Sync History */}
+      <SectionBox title="Sync History">
+        {historyRows.length === 0 ? (
+          <div data-testid="sync-history-empty">No sync history available.</div>
+        ) : (
+          <SimpleTable
+            columns={historyColumns}
+            data={historyRows}
+            emptyMessage="No sync history found."
+          />
+        )}
+      </SectionBox>
+
+      {/* Events */}
+      <SectionBox title="Events">
+        {events.length === 0 ? (
+          <div data-testid="events-empty">
+            No events found for this application.
+          </div>
+        ) : (
+          <SimpleTable
+            columns={[
+              {
+                label: "Type",
+                getter: (row: K8sEvent) => row.type,
+              },
+              {
+                label: "Reason",
+                getter: (row: K8sEvent) => row.reason,
+              },
+              {
+                label: "Message",
+                getter: (row: K8sEvent) => row.message,
+              },
+              {
+                label: "Source",
+                getter: (row: K8sEvent) => row.source?.component ?? "—",
+              },
+              {
+                label: "Age",
+                getter: (row: K8sEvent) =>
+                  formatTimestamp(row.metadata?.creationTimestamp ?? ""),
+              },
+            ]}
+            data={events}
+            emptyMessage="No events found."
+          />
+        )}
+      </SectionBox>
+    </>
+  );
+}
@@ -0,0 +1,292 @@
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import {
+  SectionBox,
+  SectionHeader,
+  SimpleTable,
+  StatusLabel,
+} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
+import Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import React, { useEffect, useMemo, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
+
+// --- Types ---
+
+export type HealthStatus =
+  | "Healthy"
+  | "Degraded"
+  | "Progressing"
+  | "Missing"
+  | "Unknown";
+export type SyncStatus = "Synced" | "OutOfSync" | "Unknown";
+
+export interface ApplicationRow {
+  name: string;
+  namespace: string;
+  project: string;
+  healthStatus: HealthStatus;
+  syncStatus: SyncStatus;
+  targetRevision: string;
+  lastSynced: string | null;
+}
+
+// --- Helpers ---
+
+export function healthStatusToLabel(status: HealthStatus): string {
+  return status;
+}
+
+export function healthStatusToColor(
+  status: HealthStatus
+): "success" | "warning" | "error" | "default" {
+  switch (status) {
+    case "Healthy":
+      return "success";
+    case "Degraded":
+      return "error";
+    case "Progressing":
+      return "warning";
+    case "Missing":
+    case "Unknown":
+      return "default";
+  }
+}
+
+export function syncStatusToColor(
+  status: SyncStatus
+): "success" | "warning" | "default" {
+  switch (status) {
+    case "Synced":
+      return "success";
+    case "OutOfSync":
+      return "warning";
+    case "Unknown":
+      return "default";
+  }
+}
+
+function formatLastSynced(
+  history: ArgoCDApplication["status"]["history"]
+): string | null {
+  if (!history || history.length === 0) return null;
+  const last = history[history.length - 1];
+  if (!last || !last.dexKey) return null;
+  const date = new Date(last.dexKey);
+  if (isNaN(date.getTime())) return null;
+  return date.toLocaleString();
+}
+
+// --- API ---
+
+const ARGOCD_API_PATH =
+  "/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications";
+
+async function fetchApplications(): Promise<ArgoCDApplicationsList> {
+  const response = (await ApiProxy.request(
+    ARGOCD_API_PATH
+  )) as ArgoCDApplicationsList;
+  return response;
+}
+
+// --- Component ---
+
+export default function ApplicationsList() {
+  const location = useLocation();
+  const [applications, setApplications] = useState<ApplicationRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [healthFilter, setHealthFilter] = useState<HealthStatus | "All">("All");
+  const [syncFilter, setSyncFilter] = useState<SyncStatus | "All">("All");
+  const [projectFilter, setProjectFilter] = useState<string>("All");
+
+  // Initialize project filter from URL search param
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const project = params.get("project");
+    if (project) {
+      setProjectFilter(project);
+    }
+  }, [location.search]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    fetchApplications()
+      .then((data) => {
+        if (cancelled) return;
+        const rows: ApplicationRow[] = (data.items ?? []).map((app) => ({
+          name: app.metadata?.name ?? "unknown",
+          namespace: app.metadata?.namespace ?? "unknown",
+          project: app.spec?.project ?? "unknown",
+          healthStatus:
+            (app.status?.health?.status as HealthStatus) ?? "Unknown",
+          syncStatus: (app.status?.sync?.status as SyncStatus) ?? "Unknown",
+          targetRevision: app.spec?.targetRevision ?? "",
+          lastSynced: formatLastSynced(app.status?.history),
+        }));
+        setApplications(rows);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const projects = useMemo(() => {
+    const set = new Set(applications.map((app) => app.project));
+    return Array.from(set).sort();
+  }, [applications]);
+
+  const filtered = useMemo(() => {
+    return applications.filter((app) => {
+      if (healthFilter !== "All" && app.healthStatus !== healthFilter)
+        return false;
+      if (syncFilter !== "All" && app.syncStatus !== syncFilter) return false;
+      if (projectFilter !== "All" && app.project !== projectFilter)
+        return false;
+      return true;
+    });
+  }, [applications, healthFilter, syncFilter, projectFilter]);
+
+  const columns = [
+    {
+      label: "App Name",
+      getter: (row: ApplicationRow) => (
+        <Link to={`/argocd/applications/${row.name}`}>{row.name}</Link>
+      ),
+    },
+    {
+      label: "Namespace",
+      getter: (row: ApplicationRow) => row.namespace,
+    },
+    {
+      label: "Project",
+      getter: (row: ApplicationRow) => row.project,
+    },
+    {
+      label: "Health",
+      getter: (row: ApplicationRow) => (
+        <StatusLabel status={healthStatusToColor(row.healthStatus)}>
+          {healthStatusToLabel(row.healthStatus)}
+        </StatusLabel>
+      ),
+    },
+    {
+      label: "Sync",
+      getter: (row: ApplicationRow) => (
+        <StatusLabel status={syncStatusToColor(row.syncStatus)}>
+          {row.syncStatus}
+        </StatusLabel>
+      ),
+    },
+    {
+      label: "Target Revision",
+      getter: (row: ApplicationRow) => row.targetRevision || "—",
+    },
+    {
+      label: "Last Synced",
+      getter: (row: ApplicationRow) => row.lastSynced ?? "—",
+    },
+  ];
+
+  return (
+    <>
+      <SectionHeader title="ArgoCD — Applications" />
+      <SectionBox>
+        {/* Filters */}
+        <Box sx={{ display: "flex", gap: 2, mb: 2, flexWrap: "wrap" }}>
+          <FormControl size="small" sx={{ minWidth: 150 }}>
+            <InputLabel id="health-filter-label">Health</InputLabel>
+            <Select
+              labelId="health-filter-label"
+              label="Health"
+              value={healthFilter}
+              onChange={(e) =>
+                setHealthFilter(e.target.value as HealthStatus | "All")
+              }
+            >
+              <MenuItem value="All">All</MenuItem>
+              <MenuItem value="Healthy">Healthy</MenuItem>
+              <MenuItem value="Degraded">Degraded</MenuItem>
+              <MenuItem value="Progressing">Progressing</MenuItem>
+              <MenuItem value="Missing">Missing</MenuItem>
+              <MenuItem value="Unknown">Unknown</MenuItem>
+            </Select>
+          </FormControl>
+
+          <FormControl size="small" sx={{ minWidth: 150 }}>
+            <InputLabel id="sync-filter-label">Sync</InputLabel>
+            <Select
+              labelId="sync-filter-label"
+              label="Sync"
+              value={syncFilter}
+              onChange={(e) =>
+                setSyncFilter(e.target.value as SyncStatus | "All")
+              }
+            >
+              <MenuItem value="All">All</MenuItem>
+              <MenuItem value="Synced">Synced</MenuItem>
+              <MenuItem value="OutOfSync">OutOfSync</MenuItem>
+              <MenuItem value="Unknown">Unknown</MenuItem>
+            </Select>
+          </FormControl>
+
+          <FormControl size="small" sx={{ minWidth: 150 }}>
+            <InputLabel id="project-filter-label">Project</InputLabel>
+            <Select
+              labelId="project-filter-label"
+              label="Project"
+              value={projectFilter}
+              onChange={(e) => setProjectFilter(e.target.value)}
+            >
+              <MenuItem value="All">All</MenuItem>
+              {projects.map((p) => (
+                <MenuItem key={p} value={p}>
+                  {p}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+
+        {/* Table */}
+        {loading ? (
+          <div data-testid="applications-loading">
+            Loading ArgoCD applications...
+          </div>
+        ) : error ? (
+          <div data-testid="applications-error">
+            <StatusLabel status="error">ArgoCD not detected</StatusLabel>
+            <p>
+              Could not reach the ArgoCD server. Ensure ArgoCD is installed in
+              the <code>argocd</code> namespace and the server is reachable.
+            </p>
+            <p>
+              <strong>Error:</strong> {error}
+            </p>
+          </div>
+        ) : (
+          <SimpleTable
+            columns={columns}
+            data={filtered}
+            emptyMessage="No ArgoCD applications found."
+          />
+        )}
+      </SectionBox>
+    </>
+  );
+}
@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+
+// Minimal smoke test — verify the test file itself is valid and can run.
+// Full plugin component tests will be added in subsequent tasks per PRI-189.
+describe("ArgoCD Plugin Scaffold", () => {
+  it("test suite loads without errors", () => {
+    // Intentionally simple: just verify vitest is working and this file parses
+    expect(true).toBe(true);
+  });
+});
@@ -0,0 +1,82 @@
+import {
+  registerRoute,
+  registerSidebarEntry,
+} from "@kinvolk/headlamp-plugin/lib";
+import {
+  SectionBox,
+  StatusLabel,
+} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
+import React from "react";
+import ApplicationDetail from "./components/ApplicationDetail";
+import ApplicationsList from "./components/ApplicationsList";
+
+// --- Error boundary for plugin components ---
+
+interface ErrorBoundaryState {
+  error: string | null;
+}
+
+class ArgoCDErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error: error.message };
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <SectionBox title="ArgoCD Plugin Error">
+          <StatusLabel status="error">{this.state.error}</StatusLabel>
+        </SectionBox>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// --- Sidebar entry ---
+
+registerSidebarEntry({
+  parent: null,
+  name: "argocd",
+  label: "ArgoCD",
+  url: "/argocd",
+  icon: "mdi:git",
+});
+
+registerSidebarEntry({
+  parent: "argocd",
+  name: "argocd-overview",
+  label: "Applications",
+  url: "/argocd",
+  icon: "mdi:view-list",
+});
+
+// --- Routes ---
+
+registerRoute({
+  path: "/argocd",
+  sidebar: "argocd-overview",
+  name: "argocd",
+  exact: true,
+  component: () => (
+    <ArgoCDErrorBoundary>
+      <ApplicationsList />
+    </ArgoCDErrorBoundary>
+  ),
+});
+
+registerRoute({
+  path: "/argocd/applications/:name",
+  sidebar: "argocd-overview",
+  name: "argocd-application-detail",
+  component: () => (
+    <ArgoCDErrorBoundary>
+      <ApplicationDetail />
+    </ArgoCDErrorBoundary>
+  ),
+});
@@ -0,0 +1,7 @@
+{
+  "extends": "@kinvolk/headlamp-plugin/config/plugins-tsconfig.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  define: {
+    'process.env.NODE_ENV': '"test"',
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    exclude: ['e2e/**', 'node_modules/**'],
+    coverage: {
+      provider: 'v8',
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: ['src/**/*.test.{ts,tsx}', 'src/test-utils.tsx', 'src/index.tsx'],
+      thresholds: {
+        lines: 80,
+        functions: 80,
+        branches: 80,
+        statements: 80,
+      },
+    },
+  },
+});
@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom';
+
+// Node 22+ ships a minimal built-in `localStorage` global (property-bag only,
+// no getItem/setItem/removeItem/clear) that shadows jsdom's Web Storage
+// implementation. Provide a spec-compliant shim so code under test works.
+if (typeof localStorage !== 'undefined' && typeof localStorage.getItem !== 'function') {
+  const store = new Map<string, string>();
+
+  const storage = {
+    getItem(key: string): string | null {
+      return store.get(key) ?? null;
+    },
+    setItem(key: string, value: string): void {
+      store.set(key, String(value));
+    },
+    removeItem(key: string): void {
+      store.delete(key);
+    },
+    clear(): void {
+      store.clear();
+    },
+    get length(): number {
+      return store.size;
+    },
+    key(index: number): string | null {
+      return [...store.keys()][index] ?? null;
+    },
+  };
+
+  Object.defineProperty(globalThis, 'localStorage', {
+    value: storage,
+    writable: true,
+    configurable: true,
+  });
+
+  if (typeof window !== 'undefined') {
+    Object.defineProperty(window, 'localStorage', {
+      value: storage,
+      writable: true,
+      configurable: true,
+    });
+  }
+}