fix: align automountServiceAccountToken to true in deploy-e2e-headlamp.sh

Matches other plugins (rook, sealed-secrets, polaris, kube-vip).

Co-Authored-By: Paperclip <noreply@paperclip.ing>

.github/FUNDING.yml

@@ -0,0 +1 @@
+github_sponsors: [privilegedescalation]

.github/workflows/ci.yaml

@@ -2,9 +2,13 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: ['**']
   pull_request:
-    branches: [main]
+    branches: [main, dev]
+  workflow_dispatch:
+
+permissions:
+  contents: read
 
 jobs:
   ci:

.github/workflows/e2e.yaml

@@ -0,0 +1,23 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: e2e-${{ github.repository }}
+  cancel-in-progress: false
+
+jobs:
+  e2e:
+    uses: privilegedescalation/.github/.github/workflows/plugin-e2e.yaml@hugh/add-pnpm-support-plugin-e2e
+    with:
+      node-version: "22"
+      headlamp-version: v0.40.1
+      e2e-namespace: headlamp-dev

.markdownlint-cli2.jsonc

@@ -0,0 +1,53 @@
+{
+  "config": {
+    // Line length — not enforced for docs with code examples
+    "MD013": false,
+    // First line heading — files use YAML frontmatter, not headings
+    "MD041": false,
+    // Emphasis as heading — common pattern for Option 1/2/3 sections
+    "MD036": false,
+    // No duplicate heading — changelog files repeat section names intentionally
+    "MD024": false,
+    // Fenced code language — not always applicable for diagram blocks
+    "MD040": false,
+    // Table column style — table alignment is visual, not semantic
+    "MD060": false,
+    // Ordered list item prefix — number resets are intentional in documents
+    "MD029": false,
+    // No inline HTML — each elements are valid in valid Markdown
+    "MD033": false,
+    // List marker space — spacing after list markers varies by editor
+    "MD030": false,
+    // Blanks around headings — not always needed in compact docs
+    "MD022": false,
+    // Blanks around lists — not always needed in compact docs
+    "MD032": false,
+    // Blanks around fences — not always needed between adjacent blocks
+    "MD031": false,
+    // Multiple blanks — editor artifacts, not semantic
+    "MD012": false,
+    // Single title — files may have multiple H1 sections
+    "MD025": false,
+    // Trailing spaces — editor artifacts
+    "MD009": false,
+    // Bare URLs — URL shortening not always needed
+    "MD034": false,
+    // Single trailing newline — editor artifacts
+    "MD047": false,
+    // Trailing punctuation — heading punctuation is intentional
+    "MD026": false,
+    // Space in emphasis — double-asterisk bold spacing varies by renderer
+    "MD037": false,
+    // No hard tabs — some generated docs use tabs for indentation
+    "MD010": false,
+    // Code block style — generated docs may use inconsistent styles
+    "MD046": false,
+    // Comment style — generated docs have no comments
+    "MD048": false,
+    // Commands show output — shell examples intentionally show only commands
+    "MD014": false
+  },
+  "ignores": [
+    "docs/api-reference/generated/**"
+  ]
+}

.markdownlintignore

@@ -0,0 +1 @@
+docs/api-reference/generated/**

README.md

@@ -32,3 +32,4 @@ gh workflow run Release --field version=0.1.0
 ## License
 
 Apache-2.0
+

artifacthub-pkg.yml

@@ -1,4 +1,4 @@
-version: "0.1.0"
+version: "0.1.2"
 name: headlamp-argocd
 displayName: ArgoCD Headlamp Plugin
 createdAt: "2026-04-21T00:00:00Z"
@@ -26,8 +26,8 @@ maintainers:
 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-url: "https://github.com/privilegedescalation/headlamp-argocd-plugin/releases/download/v0.1.2/privilegedescalation-headlamp-argocd-plugin-0.1.2.tar.gz"
-  headlamp/plugin/archive-checksum: "sha256:1f4df43f79b795bdf4f70e1e3aa5bacadf689ea5584fdadf92fb677faab21c2c"
+  headlamp/plugin/archive-checksum: sha256:e71f84913eed1fd7e2d074912e3bfa668c4b1fefcbb069731a4e4277a998ca28
   headlamp/plugin/version-compat: ">=0.26"
   headlamp/plugin/distro-compat: "in-cluster"
 changes:

e2e/auth.setup.ts

@@ -0,0 +1,19 @@
+import { test as setup, request } from '@playwright/test';
+
+setup('authenticate', async ({ page }) => {
+  const token = process.env.HEADLAMP_TOKEN;
+  const url = process.env.HEADLAMP_URL;
+
+  if (!token || !url) {
+    throw new Error('HEADLAMP_TOKEN and HEADLAMP_URL must be set');
+  }
+
+  await page.context().addInitScript(() => {
+    window.localStorage.setItem('token', 'dummy-token');
+  });
+
+  await page.goto(url);
+
+  const context = page.context();
+  await context.storageState({ path: 'e2e/.auth/state.json' });
+});

e2e/basic.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('ArgoCD Plugin E2E', () => {
+  test('plugin page loads', async ({ page }) => {
+    const url = process.env.HEADLAMP_URL;
+    if (!url) {
+      throw new Error('HEADLAMP_URL must be set');
+    }
+
+    await page.goto(url);
+    await page.waitForLoadState('networkidle');
+
+    const title = await page.title();
+    expect(title).toBeTruthy();
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privilegedescalation/headlamp-argocd-plugin",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Headlamp plugin for ArgoCD visibility — monitors ArgoCD Applications, Rollouts, and health status",
   "repository": {
     "type": "git",
@@ -23,7 +23,9 @@
     "format": "prettier --write src/",
     "format:check": "prettier --check src/",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "e2e": "playwright test",
+    "e2e:headed": "playwright test --headed"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -39,6 +41,7 @@
   "devDependencies": {
     "@kinvolk/headlamp-plugin": "^0.13.0",
     "@mui/material": "^5.15.14",
+    "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -48,13 +51,12 @@
     "@headlamp-k8s/eslint-config": "^0.6.0",
     "eslint": "^8.57.0",
     "jsdom": "^24.0.0",
+    "playwright": "^1.58.2",
     "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"
   }
-}
+}

playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30_000,
+  expect: { timeout: 10_000 },
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  reporter: 'list',
+  use: {
+    baseURL: process.env.HEADLAMP_URL || (() => { throw new Error('HEADLAMP_URL is required — run scripts/deploy-e2e-headlamp.sh first'); })(),
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    { name: 'setup', testMatch: /auth\.setup\.ts/, timeout: 60_000 },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'e2e/.auth/state.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+});

pnpm-lock.yaml

@@ -22,6 +22,9 @@ importers:
       '@mui/material':
         specifier: ^5.15.14
         version: 5.18.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@playwright/test':
+        specifier: ^1.58.2
+        version: 1.59.1
       '@testing-library/jest-dom':
         specifier: ^6.4.8
         version: 6.9.1
@@ -46,6 +49,9 @@ importers:
       jsdom:
         specifier: ^24.0.0
         version: 24.1.3
+      playwright:
+        specifier: ^1.58.2
+        version: 1.59.1
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
@@ -58,15 +64,9 @@ importers:
       react-router-dom:
         specifier: ^5.3.0
         version: 5.3.4(react@18.3.1)
-      tar:
-        specifier: ^7.5.11
-        version: 7.5.13
       typescript:
         specifier: ~5.6.2
         version: 5.6.3
-      undici:
-        specifier: ^7.24.3
-        version: 7.25.0
       vitest:
         specifier: ^3.0.5
         version: 3.2.4(@types/debug@4.1.13)(@types/node@20.19.39)(jsdom@24.1.3)(msw@2.4.9(typescript@5.6.3))(terser@5.46.1)(yaml@2.8.3)
@@ -1007,6 +1007,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.59.1':
+    resolution: {integrity: sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
@@ -3088,6 +3093,11 @@ packages:
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -4227,6 +4237,16 @@ packages:
     resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
     engines: {node: '>=10'}
 
+  playwright-core@1.59.1:
+    resolution: {integrity: sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.59.1:
+    resolution: {integrity: sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -6633,6 +6653,10 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@playwright/test@1.59.1':
+    dependencies:
+      playwright: 1.59.1
+
   '@popperjs/core@2.11.8': {}
 
   '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1))(react@18.3.1)':
@@ -9191,6 +9215,9 @@ snapshots:
 
   fs.realpath@1.0.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -10573,6 +10600,14 @@ snapshots:
     dependencies:
       find-up: 5.0.0
 
+  playwright-core@1.59.1: {}
+
+  playwright@1.59.1:
+    dependencies:
+      playwright-core: 1.59.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-modules-extract-imports@3.1.0(postcss@8.5.10):

renovate.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["github>privilegedescalation/.github:renovate-config"]
+}

scripts/deploy-e2e-headlamp.sh

@@ -0,0 +1,190 @@
+#!/usr/bin/env bash
+# deploy-e2e-headlamp.sh
+#
+# Deploys a stock Headlamp instance with the argocd plugin loaded via
+# a ConfigMap volume mount.
+#
+# E2E resources are deployed to the `headlamp-dev` namespace. Nothing
+# persists beyond the test run — teardown cleans up all created resources.
+#
+# Prerequisites:
+#   - Plugin built (dist/ exists with plugin-main.js + package.json)
+#   - kubectl configured with cluster access
+#
+# Environment:
+#   E2E_NAMESPACE     — namespace for E2E Headlamp (default: headlamp-dev)
+#   E2E_RELEASE       — release/resource name prefix (default: headlamp-e2e)
+#   HEADLAMP_VERSION  — Headlamp image tag (default: latest)
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+DIST_DIR="$REPO_ROOT/dist"
+
+E2E_NAMESPACE="${E2E_NAMESPACE:-headlamp-dev}"
+E2E_RELEASE="${E2E_RELEASE:-headlamp-e2e}"
+HEADLAMP_VERSION="${HEADLAMP_VERSION:-latest}"
+
+if [ ! -d "$DIST_DIR" ]; then
+  echo "ERROR: dist/ not found. Run 'pnpm build' first." >&2
+  exit 1
+fi
+
+echo "Checking RBAC permissions in namespace '${E2E_NAMESPACE}'..."
+if ! kubectl auth can-i delete configmaps -n "$E2E_NAMESPACE" --quiet 2>/dev/null; then
+  echo "ERROR: Missing RBAC — cannot delete configmaps in namespace '${E2E_NAMESPACE}'." >&2
+  exit 1
+fi
+
+echo "=== E2E Headlamp Deployment ==="
+echo "  Image:     ghcr.io/headlamp-k8s/headlamp:${HEADLAMP_VERSION}"
+echo "  Namespace: $E2E_NAMESPACE"
+echo "  Release:   $E2E_RELEASE"
+
+echo ""
+echo "Creating ConfigMap with plugin files..."
+
+kubectl delete configmap headlamp-argocd-plugin \
+  -n "$E2E_NAMESPACE" --ignore-not-found
+
+kubectl create configmap headlamp-argocd-plugin \
+  -n "$E2E_NAMESPACE" \
+  --from-file="$DIST_DIR" \
+  --from-file=package.json="$REPO_ROOT/package.json"
+
+echo ""
+echo "Removing any existing E2E deployment (clean-start)..."
+kubectl delete deployment "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+kubectl delete service "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+kubectl delete serviceaccount "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found --wait
+
+echo ""
+echo "Deploying Headlamp E2E instance..."
+
+kubectl apply -f - <<EOF
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+  labels:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: headlamp
+      app.kubernetes.io/instance: ${E2E_RELEASE}
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: headlamp
+        app.kubernetes.io/instance: ${E2E_RELEASE}
+    spec:
+      serviceAccountName: ${E2E_RELEASE}
+      automountServiceAccountToken: true
+      securityContext: {}
+      containers:
+        - name: headlamp
+          image: ghcr.io/headlamp-k8s/headlamp:${HEADLAMP_VERSION}
+          imagePullPolicy: IfNotPresent
+          securityContext:
+            runAsNonRoot: true
+            privileged: false
+            runAsUser: 100
+            runAsGroup: 101
+          args:
+            - "-in-cluster"
+            - "-in-cluster-context-name=main"
+            - "-plugins-dir=/headlamp/plugins"
+          ports:
+            - name: http
+              containerPort: 4466
+              protocol: TCP
+          readinessProbe:
+            httpGet:
+              path: /
+              port: http
+            initialDelaySeconds: 5
+            periodSeconds: 5
+            failureThreshold: 6
+          livenessProbe:
+            httpGet:
+              path: /
+              port: http
+            initialDelaySeconds: 10
+            periodSeconds: 10
+          volumeMounts:
+            - name: argocd-plugin
+              mountPath: /headlamp/plugins/headlamp-argocd
+              readOnly: true
+      volumes:
+        - name: argocd-plugin
+          configMap:
+            name: headlamp-argocd-plugin
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: ${E2E_RELEASE}
+  namespace: ${E2E_NAMESPACE}
+  labels:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+spec:
+  type: ClusterIP
+  selector:
+    app.kubernetes.io/name: headlamp
+    app.kubernetes.io/instance: ${E2E_RELEASE}
+  ports:
+    - name: http
+      port: 80
+      targetPort: http
+      protocol: TCP
+EOF
+
+echo "Waiting for rollout..."
+sleep 2
+kubectl rollout status "deployment/${E2E_RELEASE}" \
+  -n "$E2E_NAMESPACE" --timeout=120s
+
+SVC_URL="http://${E2E_RELEASE}.${E2E_NAMESPACE}.svc.cluster.local"
+
+echo ""
+echo "Waiting for ${SVC_URL} to be reachable..."
+ATTEMPTS=0
+MAX_ATTEMPTS=24
+until curl -sf --max-time 5 "${SVC_URL}" -o /dev/null 2>/dev/null; do
+  ATTEMPTS=$((ATTEMPTS + 1))
+  if [ "$ATTEMPTS" -ge "$MAX_ATTEMPTS" ]; then
+    echo "ERROR: ${SVC_URL} not reachable after $((MAX_ATTEMPTS * 5))s" >&2
+    exit 1
+  fi
+  echo "  [${ATTEMPTS}/${MAX_ATTEMPTS}] not yet reachable, retrying in 5s..."
+  sleep 5
+done
+echo ""
+echo "E2E Headlamp is ready at: ${SVC_URL}"
+
+echo ""
+echo "Creating service account token for E2E auth..."
+kubectl create serviceaccount headlamp-e2e-test \
+  -n "$E2E_NAMESPACE" --dry-run=client -o yaml | kubectl apply -f -
+
+TOKEN=$(kubectl create token headlamp-e2e-test -n "$E2E_NAMESPACE" --duration=1h 2>/dev/null || echo "")
+if [ -n "$TOKEN" ]; then
+  echo "HEADLAMP_URL=${SVC_URL}" > "$REPO_ROOT/.env.e2e"
+  echo "HEADLAMP_TOKEN=${TOKEN}" >> "$REPO_ROOT/.env.e2e"
+  echo "Wrote .env.e2e with HEADLAMP_URL and HEADLAMP_TOKEN"
+else
+  echo "  WARNING: Could not generate token."
+fi
+
+echo ""
+echo "E2E deployment complete."

scripts/teardown-e2e-headlamp.sh

@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+# teardown-e2e-headlamp.sh
+#
+# Tears down the dedicated E2E Headlamp instance deployed by deploy-e2e-headlamp.sh.
+#
+# Environment:
+#   E2E_NAMESPACE  — namespace to clean up (default: headlamp-dev)
+#   E2E_RELEASE    — release/resource name prefix (default: headlamp-e2e)
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+
+E2E_NAMESPACE="${E2E_NAMESPACE:-headlamp-dev}"
+E2E_RELEASE="${E2E_RELEASE:-headlamp-e2e}"
+
+echo "=== E2E Headlamp Teardown ==="
+echo "  Namespace: $E2E_NAMESPACE"
+echo "  Release:   $E2E_RELEASE"
+
+echo "Removing Headlamp Deployment, Service, and ServiceAccount..."
+kubectl delete deployment "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+kubectl delete service "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+kubectl delete serviceaccount "${E2E_RELEASE}" -n "$E2E_NAMESPACE" --ignore-not-found
+
+echo "Cleaning up ConfigMap..."
+kubectl delete configmap headlamp-argocd-plugin -n "$E2E_NAMESPACE" --ignore-not-found
+
+echo "Cleaning up test service account..."
+kubectl delete serviceaccount headlamp-e2e-test -n "$E2E_NAMESPACE" --ignore-not-found
+
+if [ -f "$REPO_ROOT/.env.e2e" ]; then
+  rm "$REPO_ROOT/.env.e2e"
+  echo "Removed .env.e2e"
+fi
+
+echo ""
+echo "E2E teardown complete."

src/__tests__/ApplicationDetail.test.tsx

@@ -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();
+    });
+  });
+});

src/__tests__/PageInjections.test.tsx

@@ -0,0 +1,142 @@
+import { describe, expect, it } from "vitest";
+import type { ArgoCDApplication } from "../api/argocd";
+
+// --- Matching helpers (copied for unit testing) ---
+
+function appsForNamespace(
+  apps: ArgoCDApplication[],
+  namespace: string
+): ArgoCDApplication[] {
+  return apps.filter((app) => app.spec?.destination?.namespace === namespace);
+}
+
+function appsForDeployment(
+  apps: ArgoCDApplication[],
+  deploymentName: string
+): ArgoCDApplication[] {
+  return apps.filter((app) =>
+    (app.status?.resources ?? []).some(
+      (res) => res.kind === "Deployment" && res.name === deploymentName
+    )
+  );
+}
+
+// --- Fixture factory ---
+
+function makeApp(
+  overrides: Partial<ArgoCDApplication> = {}
+): ArgoCDApplication {
+  return {
+    metadata: { name: "test-app", namespace: "argocd" },
+    spec: { project: "default" },
+    status: {},
+    ...overrides,
+  } as ArgoCDApplication;
+}
+
+// --- appsForNamespace tests ---
+
+describe("appsForNamespace", () => {
+  it("returns apps whose destination.namespace matches", () => {
+    const apps = [
+      makeApp({
+        metadata: { name: "app-a", namespace: "argocd" },
+        spec: { project: "default", destination: { namespace: "web" } },
+      }),
+      makeApp({
+        metadata: { name: "app-b", namespace: "argocd" },
+        spec: { project: "default", destination: { namespace: "data" } },
+      }),
+    ];
+    expect(appsForNamespace(apps, "web").map((a) => a.metadata.name)).toEqual([
+      "app-a",
+    ]);
+  });
+
+  it("returns empty array when no match", () => {
+    const apps = [
+      makeApp({
+        metadata: { name: "app-a", namespace: "argocd" },
+        spec: { project: "default", destination: { namespace: "web" } },
+      }),
+    ];
+    expect(appsForNamespace(apps, "data")).toEqual([]);
+  });
+
+  it("returns empty array for empty app list", () => {
+    expect(appsForNamespace([], "web")).toEqual([]);
+  });
+
+  it("returns empty array when destination is undefined", () => {
+    const apps = [
+      makeApp({
+        metadata: { name: "app-a", namespace: "argocd" },
+        spec: { project: "default" },
+      }),
+    ];
+    expect(appsForNamespace(apps, "web")).toEqual([]);
+  });
+});
+
+// --- appsForDeployment tests ---
+
+describe("appsForDeployment", () => {
+  it("returns apps that manage the deployment via status.resources", () => {
+    const apps = [
+      makeApp({
+        metadata: { name: "app-a", namespace: "argocd" },
+        status: {
+          resources: [{ kind: "Deployment", name: "nginx", namespace: "web" }],
+        },
+      }),
+      makeApp({
+        metadata: { name: "app-b", namespace: "argocd" },
+        status: {
+          resources: [{ kind: "Service", name: "nginx", namespace: "web" }],
+        },
+      }),
+    ];
+    expect(
+      appsForDeployment(apps, "nginx").map((a) => a.metadata.name)
+    ).toEqual(["app-a"]);
+  });
+
+  it("returns empty array when no deployment resource matches", () => {
+    const apps = [
+      makeApp({
+        metadata: { name: "app-a", namespace: "argocd" },
+        status: {
+          resources: [{ kind: "Service", name: "nginx", namespace: "web" }],
+        },
+      }),
+    ];
+    expect(appsForDeployment(apps, "nginx")).toEqual([]);
+  });
+
+  it("returns empty array for empty app list", () => {
+    expect(appsForDeployment([], "nginx")).toEqual([]);
+  });
+
+  it("returns empty array when resources is undefined", () => {
+    const apps = [
+      makeApp({ metadata: { name: "app-a", namespace: "argocd" }, status: {} }),
+    ];
+    expect(appsForDeployment(apps, "nginx")).toEqual([]);
+  });
+
+  it("returns multiple apps that manage the same deployment", () => {
+    const apps = [
+      makeApp({
+        metadata: { name: "app-a", namespace: "argocd" },
+        status: { resources: [{ kind: "Deployment", name: "nginx" }] },
+      }),
+      makeApp({
+        metadata: { name: "app-b", namespace: "argocd" },
+        status: { resources: [{ kind: "Deployment", name: "nginx" }] },
+      }),
+    ];
+    expect(
+      appsForDeployment(apps, "nginx").map((a) => a.metadata.name)
+    ).toEqual(["app-a", "app-b"]);
+  });
+});

src/components/ApplicationDetail.tsx

@@ -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>
+    </>
+  );
+}

src/components/ApplicationsList.tsx

@@ -11,7 +11,7 @@ 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 { useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
 
 // --- Types ---
@@ -165,7 +165,9 @@ export default function ApplicationsList() {
   const columns = [
     {
       label: "App Name",
-      getter: (row: ApplicationRow) => row.name,
+      getter: (row: ApplicationRow) => (
+        <Link to={`/argocd/applications/${row.name}`}>{row.name}</Link>
+      ),
     },
     {
       label: "Namespace",

src/components/DeploymentArgoBadge.tsx

@@ -0,0 +1,101 @@
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import {
+  Link,
+  StatusLabel,
+} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
+import React, { useEffect, useState } from "react";
+import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
+import { syncStatusToColor } from "./ApplicationsList";
+
+// --- 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;
+}
+
+// --- Matching helper ---
+
+/**
+ * Returns ArgoCD applications that manage the given Deployment by matching
+ * kind=Deployment and name in Application.status.resources[].
+ */
+export function appsForDeployment(
+  apps: ArgoCDApplication[],
+  deploymentName: string
+): ArgoCDApplication[] {
+  return apps.filter((app) =>
+    (app.status?.resources ?? []).some(
+      (res) => res.kind === "Deployment" && res.name === deploymentName
+    )
+  );
+}
+
+// --- Component ---
+
+interface DeploymentArgoBadgeProps {
+  deploymentName: string;
+}
+
+export default function DeploymentArgoBadge({
+  deploymentName,
+}: DeploymentArgoBadgeProps) {
+  const [apps, setApps] = useState<ArgoCDApplication[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchApplications()
+      .then((data) => {
+        if (cancelled) return;
+        const matched = appsForDeployment(data.items ?? [], deploymentName);
+        setApps(matched);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [deploymentName]);
+
+  if (loading || error || !apps || apps.length === 0) {
+    return null; // Show nothing when no matching application
+  }
+
+  const app = apps[0]; // Show first matching app
+  const lastSynced = app.status?.history?.length
+    ? app.status.history[app.status.history.length - 1]?.dexKey
+    : null;
+  const lastSyncedStr = lastSynced
+    ? new Date(lastSynced).toLocaleString()
+    : "—";
+
+  return (
+    <span>
+      &nbsp;
+      <Link to={`/argocd/applications/${app.metadata.name}`}>
+        ArgoCD: {app.metadata.name}
+      </Link>
+      &nbsp;
+      <StatusLabel
+        status={syncStatusToColor(app.status?.sync?.status ?? "Unknown")}
+      >
+        {app.status?.sync?.status ?? "Unknown"}
+      </StatusLabel>
+      &nbsp;
+      <span style={{ fontSize: "0.85em", opacity: 0.8 }}>
+        Last sync: {lastSyncedStr}
+      </span>
+    </span>
+  );
+}

src/components/NamespaceArgoSection.tsx

@@ -0,0 +1,120 @@
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import {
+  Link,
+  SectionBox,
+  StatusLabel,
+} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
+import React, { useEffect, useState } from "react";
+import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
+import {
+  healthStatusToColor,
+  healthStatusToLabel,
+  syncStatusToColor,
+} from "./ApplicationsList";
+
+// --- 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;
+}
+
+// --- Matching helper ---
+
+/**
+ * Returns ArgoCD applications whose spec.destination.namespace matches
+ * the given namespace name.
+ */
+export function appsForNamespace(
+  apps: ArgoCDApplication[],
+  namespace: string
+): ArgoCDApplication[] {
+  return apps.filter((app) => app.spec?.destination?.namespace === namespace);
+}
+
+// --- Component ---
+
+interface NamespaceArgoSectionProps {
+  namespaceName: string;
+}
+
+export default function NamespaceArgoSection({
+  namespaceName,
+}: NamespaceArgoSectionProps) {
+  const [apps, setApps] = useState<ArgoCDApplication[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchApplications()
+      .then((data) => {
+        if (cancelled) return;
+        const matched = appsForNamespace(data.items ?? [], namespaceName);
+        setApps(matched);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [namespaceName]);
+
+  if (loading) {
+    return (
+      <SectionBox title="ArgoCD">
+        <StatusLabel status="warning">Loading...</StatusLabel>
+      </SectionBox>
+    );
+  }
+
+  if (error || !apps) {
+    return (
+      <SectionBox title="ArgoCD">
+        <StatusLabel status="error">ArgoCD unreachable</StatusLabel>
+      </SectionBox>
+    );
+  }
+
+  if (apps.length === 0) {
+    return null; // Show nothing when no matching application
+  }
+
+  return (
+    <SectionBox title="ArgoCD">
+      <StatusLabel status="success">{apps.length} application(s)</StatusLabel>
+      <ul style={{ paddingLeft: 20, margin: "8px 0" }}>
+        {apps.map((app) => (
+          <li key={app.metadata.name} style={{ marginBottom: 8 }}>
+            <Link to={`/argocd/applications/${app.metadata.name}`}>
+              {app.metadata.name}
+            </Link>
+            &nbsp;
+            <StatusLabel
+              status={healthStatusToColor(
+                app.status?.health?.status ?? "Unknown"
+              )}
+            >
+              {healthStatusToLabel(app.status?.health?.status ?? "Unknown")}
+            </StatusLabel>
+            &nbsp;
+            <StatusLabel
+              status={syncStatusToColor(app.status?.sync?.status ?? "Unknown")}
+            >
+              {app.status?.sync?.status ?? "Unknown"}
+            </StatusLabel>
+          </li>
+        ))}
+      </ul>
+    </SectionBox>
+  );
+}

src/components/PageInjections.tsx

@@ -0,0 +1,207 @@
+/**
+ * Page injection registrations for ArgoCD plugin.
+ * Registers detail view sections on Namespace and Deployment pages.
+ */
+import { ApiProxy } from "@kinvolk/headlamp-plugin/lib";
+import { KubeObject } from "@kinvolk/headlamp-plugin/lib/lib/k8s/KubeObject";
+import { registerDetailsViewSection } from "@kinvolk/headlamp-plugin/lib";
+import {
+  SectionBox,
+  StatusLabel,
+} from "@kinvolk/headlamp-plugin/lib/CommonComponents";
+import { Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { ArgoCDApplication, ArgoCDApplicationsList } from "../api/argocd";
+import {
+  healthStatusToColor,
+  healthStatusToLabel,
+  syncStatusToColor,
+} from "./ApplicationsList";
+
+// --- 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;
+}
+
+// --- Namespace section ---
+
+function NamespaceArgoSection({ resource }: { resource: KubeObject }) {
+  const namespaceName = resource.metadata.name;
+  const [apps, setApps] = useState<ArgoCDApplication[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchApplications()
+      .then((data) => {
+        if (cancelled) return;
+        const matched = (data.items ?? []).filter(
+          (app) => app.spec?.destination?.namespace === namespaceName
+        );
+        setApps(matched);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [namespaceName]);
+
+  if (loading) {
+    return (
+      <SectionBox title="ArgoCD">
+        <StatusLabel status="warning">Loading...</StatusLabel>
+      </SectionBox>
+    );
+  }
+
+  if (error || !apps) {
+    return (
+      <SectionBox title="ArgoCD">
+        <StatusLabel status="error">ArgoCD unreachable</StatusLabel>
+      </SectionBox>
+    );
+  }
+
+  if (apps.length === 0) {
+    return null;
+  }
+
+  return (
+    <SectionBox title="ArgoCD">
+      <StatusLabel status="success">{apps.length} application(s)</StatusLabel>
+      <ul style={{ paddingLeft: 20, margin: "8px 0" }}>
+        {apps.map((app) => (
+          <li key={app.metadata.name} style={{ marginBottom: 8 }}>
+            <Link to={`/argocd/applications/${app.metadata.name}`}>
+              {app.metadata.name}
+            </Link>
+            &nbsp;
+            <StatusLabel
+              status={healthStatusToColor(
+                (app.status?.health?.status as
+                  | "Healthy"
+                  | "Degraded"
+                  | "Progressing"
+                  | "Missing"
+                  | "Unknown") ?? "Unknown"
+              )}
+            >
+              {healthStatusToLabel(
+                (app.status?.health?.status as
+                  | "Healthy"
+                  | "Degraded"
+                  | "Progressing"
+                  | "Missing"
+                  | "Unknown") ?? "Unknown"
+              )}
+            </StatusLabel>
+            &nbsp;
+            <StatusLabel
+              status={syncStatusToColor(
+                (app.status?.sync?.status as
+                  | "Synced"
+                  | "OutOfSync"
+                  | "Unknown") ?? "Unknown"
+              )}
+            >
+              {app.status?.sync?.status ?? "Unknown"}
+            </StatusLabel>
+          </li>
+        ))}
+      </ul>
+    </SectionBox>
+  );
+}
+
+// --- Deployment badge ---
+
+function DeploymentArgoBadge({ resource }: { resource: KubeObject }) {
+  const deploymentName = resource.metadata.name;
+  const [apps, setApps] = useState<ArgoCDApplication[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchApplications()
+      .then((data) => {
+        if (cancelled) return;
+        const matched = (data.items ?? []).filter((app) =>
+          (app.status?.resources ?? []).some(
+            (res) => res.kind === "Deployment" && res.name === deploymentName
+          )
+        );
+        setApps(matched);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : String(err));
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [deploymentName]);
+
+  if (loading || error || !apps || apps.length === 0) {
+    return null;
+  }
+
+  const app = apps[0];
+  const lastSynced = app.status?.history?.length
+    ? app.status.history[app.status.history.length - 1]?.dexKey
+    : null;
+  const lastSyncedStr = lastSynced
+    ? new Date(lastSynced).toLocaleString()
+    : "—";
+
+  return (
+    <span>
+      &nbsp;
+      <Link to={`/argocd/applications/${app.metadata.name}`}>
+        ArgoCD: {app.metadata.name}
+      </Link>
+      &nbsp;
+      <StatusLabel
+        status={syncStatusToColor(
+          (app.status?.sync?.status as "Synced" | "OutOfSync" | "Unknown") ??
+            "Unknown"
+        )}
+      >
+        {app.status?.sync?.status ?? "Unknown"}
+      </StatusLabel>
+      &nbsp;
+      <span style={{ fontSize: "0.85em", opacity: 0.8 }}>
+        Last sync: {lastSyncedStr}
+      </span>
+    </span>
+  );
+}
+
+// --- Registration ---
+
+registerDetailsViewSection(({ resource }: { resource: KubeObject }) => {
+  if (resource.kind === "Namespace") {
+    return <NamespaceArgoSection resource={resource} />;
+  }
+
+  if (resource.kind === "Deployment") {
+    return <DeploymentArgoBadge resource={resource} />;
+  }
+
+  return null;
+});

src/index.tsx

@@ -7,7 +7,9 @@ import {
   StatusLabel,
 } from "@kinvolk/headlamp-plugin/lib/CommonComponents";
 import React from "react";
+import ApplicationDetail from "./components/ApplicationDetail";
 import ApplicationsList from "./components/ApplicationsList";
+import "./components/PageInjections"; // side-effect: registers detail view sections
 
 // --- Error boundary for plugin components ---
 
@@ -68,3 +70,14 @@ registerRoute({
     </ArgoCDErrorBoundary>
   ),
 });
+
+registerRoute({
+  path: "/argocd/applications/:name",
+  sidebar: "argocd-overview",
+  name: "argocd-application-detail",
+  component: () => (
+    <ArgoCDErrorBoundary>
+      <ApplicationDetail />
+    </ArgoCDErrorBoundary>
+  ),
+});