@forgeportal/plugin-argocd 1.3.0

package/dist/routes.js

@@ -0,0 +1,92 @@
+import { ArgocdApiClient } from './api-client.js';
+/**
+ * Creates Fastify route handlers for the ArgoCD plugin.
+ * All routes are mounted under /api/v1/plugins/argocd/ by the plugin loader.
+ *
+ * Routes:
+ *   GET  entities/:entityId/app           — app summary (status, health, revision)
+ *   GET  entities/:entityId/history       — last 10 sync operations
+ *   POST entities/:entityId/sync          — trigger sync
+ */
+export function createRoutes(config) {
+    const client = new ArgocdApiClient(config);
+    return async function handler(fastify) {
+        /**
+         * GET /entities/:entityId/app?appName=<override>
+         *
+         * Returns the ArgoCD application summary: sync status, health, revision, operation state.
+         * The app name is read from the query param or entity annotations.
+         */
+        fastify.get('entities/:entityId/app', async (request, reply) => {
+            const appName = request.query.appName;
+            if (!appName) {
+                return reply.status(400).send({
+                    error: 'Bad Request',
+                    message: 'Query parameter "appName" is required, or set the forgeportal.dev/argocd-app-name annotation.',
+                });
+            }
+            try {
+                const app = await client.getApp(appName);
+                return reply.send({ data: app });
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : String(err);
+                request.log.error({ err }, 'argocd plugin: getApp failed');
+                if (message.includes('404')) {
+                    return reply.status(404).send({ error: 'Not Found', message: `ArgoCD app "${appName}" not found.` });
+                }
+                return reply.status(502).send({ error: 'Bad Gateway', message });
+            }
+        });
+        /**
+         * GET /entities/:entityId/history?appName=<override>
+         *
+         * Returns the last 10 sync history entries for the ArgoCD application.
+         */
+        fastify.get('entities/:entityId/history', async (request, reply) => {
+            const appName = request.query.appName;
+            if (!appName) {
+                return reply.status(400).send({
+                    error: 'Bad Request',
+                    message: 'Query parameter "appName" is required.',
+                });
+            }
+            try {
+                const history = await client.getHistory(appName);
+                return reply.send({ data: history });
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : String(err);
+                request.log.error({ err }, 'argocd plugin: getHistory failed');
+                return reply.status(502).send({ error: 'Bad Gateway', message });
+            }
+        });
+        /**
+         * POST /entities/:entityId/sync
+         *
+         * Body: { appName: string }
+         * Triggers a manual sync of the ArgoCD application.
+         */
+        fastify.post('entities/:entityId/sync', async (request, reply) => {
+            const { appName } = request.body ?? {};
+            if (!appName) {
+                return reply.status(400).send({
+                    error: 'Bad Request',
+                    message: 'Body field "appName" is required.',
+                });
+            }
+            try {
+                await client.syncApp(appName);
+                return reply.status(202).send({
+                    data: { appName, syncTriggeredAt: new Date().toISOString() },
+                });
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : String(err);
+                request.log.error({ err }, 'argocd plugin: syncApp failed');
+                return reply.status(502).send({ error: 'Bad Gateway', message });
+            }
+        });
+    };
+}
+//# sourceMappingURL=routes.js.map

package/dist/routes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.js","sourceRoot":"","sources":["../src/routes.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAKlD;;;;;;;;GAQG;AACH,MAAM,UAAU,YAAY,CAAC,MAAoB;IAC/C,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC;IAE3C,OAAO,KAAK,UAAU,OAAO,CAAC,OAAwB;QACpD;;;;;WAKG;QACH,OAAO,CAAC,GAAG,CACT,wBAAwB,EACxB,KAAK,EACH,OAGE,EACF,KAAmB,EACnB,EAAE;YACF,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;YAEtC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;oBAC5B,KAAK,EAAI,aAAa;oBACtB,OAAO,EAAE,+FAA+F;iBACzG,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC;gBACH,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBACzC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;YACnC,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,MAAM,OAAO,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACjE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,8BAA8B,CAAC,CAAC;gBAC3D,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;oBAC5B,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,OAAO,cAAc,EAAE,CAAC,CAAC;gBACvG,CAAC;gBACD,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC;YACnE,CAAC;QACH,CAAC,CACF,CAAC;QAEF;;;;WAIG;QACH,OAAO,CAAC,GAAG,CACT,4BAA4B,EAC5B,KAAK,EACH,OAGE,EACF,KAAmB,EACnB,EAAE;YACF,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;YAEtC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;oBAC5B,KAAK,EAAI,aAAa;oBACtB,OAAO,EAAE,wCAAwC;iBAClD,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC;gBACH,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;gBACjD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;YACvC,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,MAAM,OAAO,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACjE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,kCAAkC,CAAC,CAAC;gBAC/D,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC;YACnE,CAAC;QACH,CAAC,CACF,CAAC;QAEF;;;;;WAKG;QACH,OAAO,CAAC,IAAI,CACV,yBAAyB,EACzB,KAAK,EACH,OAAiE,EACjE,KAAqB,EACrB,EAAE;YACF,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC;YAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;oBAC5B,KAAK,EAAI,aAAa;oBACtB,OAAO,EAAE,mCAAmC;iBAC7C,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC;gBACH,MAAM,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBAC9B,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;oBAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,EAAE;iBAC7D,CAAC,CAAC;YACL,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,MAAM,OAAO,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACjE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,+BAA+B,CAAC,CAAC;gBAC5D,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC;YACnE,CAAC;QACH,CAAC,CACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,62 @@
+export interface ArgocdAppStatus {
+    sync: {
+        status: 'Synced' | 'OutOfSync' | 'Unknown';
+        revision: string;
+    };
+    health: {
+        status: 'Healthy' | 'Degraded' | 'Progressing' | 'Suspended' | 'Missing' | 'Unknown';
+    };
+    operationState?: {
+        phase: string;
+        message?: string;
+        startedAt: string;
+        finishedAt?: string;
+    };
+    reconciledAt?: string;
+}
+export interface ArgocdApp {
+    metadata: {
+        name: string;
+        namespace: string;
+    };
+    spec: {
+        project: string;
+        source?: {
+            repoURL: string;
+            targetRevision: string;
+            path?: string;
+        };
+        destination: {
+            server: string;
+            namespace: string;
+        };
+    };
+    status: ArgocdAppStatus;
+}
+export interface ArgocdHistoryItem {
+    id: number;
+    revision: string;
+    deployedAt: string;
+    initiatedBy?: {
+        username?: string;
+        automated?: boolean;
+    };
+}
+export interface ArgocdResourceNode {
+    kind: string;
+    name: string;
+    namespace?: string;
+    status?: string;
+    health?: {
+        status: string;
+    };
+}
+export interface ArgocdResourceTree {
+    nodes: ArgocdResourceNode[];
+}
+export interface ArgocdConfig {
+    url: string;
+    token: string;
+    insecure: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAI,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;QAC7C,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;KACtF,CAAC;IACF,cAAc,CAAC,EAAE;QACf,KAAK,EAAM,MAAM,CAAC;QAClB,OAAO,CAAC,EAAG,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE;QACR,IAAI,EAAO,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE;YACP,OAAO,EAAS,MAAM,CAAC;YACvB,cAAc,EAAE,MAAM,CAAC;YACvB,IAAI,CAAC,EAAW,MAAM,CAAC;SACxB,CAAC;QACF,WAAW,EAAE;YACX,MAAM,EAAK,MAAM,CAAC;YAClB,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;KACH,CAAC;IACF,MAAM,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAU,MAAM,CAAC;IACnB,QAAQ,EAAI,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC1D;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAQ,MAAM,CAAC;IACnB,IAAI,EAAQ,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAK,MAAM,CAAC;IACnB,MAAM,CAAC,EAAK;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B;AAID,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAO,MAAM,CAAC;IACjB,KAAK,EAAK,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB"}

package/dist/types.js

@@ -0,0 +1,3 @@
+// ─── ArgoCD API response shapes ──────────────────────────────────────────────
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,gFAAgF"}

package/dist/ui.d.ts

@@ -0,0 +1,11 @@
+import type { ForgePluginSDK } from '@forgeportal/plugin-sdk';
+/**
+ * UI entry point for the ArgoCD plugin.
+ * Called by the ForgePortal UI shell at startup.
+ *
+ * Registration in apps/ui/src/plugins/index.ts:
+ *   import { registerPlugin as registerArgocd } from '@forgeportal/plugin-argocd/ui';
+ *   registerPluginById('argocd', registerArgocd);
+ */
+export declare function registerPlugin(sdk: ForgePluginSDK): void;
+//# sourceMappingURL=ui.d.ts.map

package/dist/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI,CAMxD"}

package/dist/ui.js

@@ -0,0 +1,17 @@
+import { ArgocdTab } from './ArgocdTab.js';
+/**
+ * UI entry point for the ArgoCD plugin.
+ * Called by the ForgePortal UI shell at startup.
+ *
+ * Registration in apps/ui/src/plugins/index.ts:
+ *   import { registerPlugin as registerArgocd } from '@forgeportal/plugin-argocd/ui';
+ *   registerPluginById('argocd', registerArgocd);
+ */
+export function registerPlugin(sdk) {
+    sdk.registerEntityTab({
+        id: 'argocd-tab',
+        title: 'ArgoCD',
+        component: ArgocdTab,
+    });
+}
+//# sourceMappingURL=ui.js.map

package/dist/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,GAAmB;IAChD,GAAG,CAAC,iBAAiB,CAAC;QACpB,EAAE,EAAS,YAAY;QACvB,KAAK,EAAM,QAAQ;QACnB,SAAS,EAAE,SAAS;KACrB,CAAC,CAAC;AACL,CAAC"}

package/forgeportal-plugin.json

@@ -0,0 +1,32 @@
+{
+  "name": "@forgeportal/plugin-argocd",
+  "version": "1.0.0",
+  "forgeportal": {
+    "engineVersion": "^1.0.0",
+    "type": "fullstack",
+    "capabilities": {
+      "ui": {
+        "entityTabs": ["argocd-tab"]
+      },
+      "backend": {
+        "routes": ["/api/v1/plugins/argocd"],
+        "actionProviders": [
+          "argocd.syncApp@v1",
+          "argocd.rollbackApp@v1"
+        ]
+      }
+    },
+    "config": {
+      "url": {
+        "type":        "string",
+        "description": "ArgoCD server URL, e.g. https://argocd.internal",
+        "required":    true
+      },
+      "insecure": {
+        "type":        "boolean",
+        "description": "Skip TLS verification (not recommended in production).",
+        "required":    false
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@forgeportal/plugin-argocd",
+  "version": "1.3.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./package.json": "./package.json",
+    "./forgeportal-plugin.json": "./forgeportal-plugin.json"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "undici": "^7.22.0",
+    "@forgeportal/plugin-sdk": "1.3.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "*",
+    "@types/react": "*",
+    "fastify": "^5.3.3",
+    "react": "*",
+    "vitest": "*"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5",
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist"
+  }
+}

package/src/ArgocdTab.tsx

@@ -0,0 +1,305 @@
+import React, { useState, useCallback } from 'react';
+import { useApi } from '@forgeportal/plugin-sdk/react';
+import type { Entity } from '@forgeportal/plugin-sdk';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface SyncStatus  { status: 'Synced' | 'OutOfSync' | 'Unknown'; revision?: string }
+interface HealthStatus { status: 'Healthy' | 'Degraded' | 'Progressing' | 'Suspended' | 'Missing' | 'Unknown' }
+
+interface ArgocdAppResponse {
+  data: {
+    metadata: { name: string; namespace: string };
+    spec: {
+      project: string;
+      source?: { repoURL: string; targetRevision: string; path?: string };
+      destination: { server: string; namespace: string };
+    };
+    status: {
+      sync:            SyncStatus;
+      health:          HealthStatus;
+      operationState?: { phase: string; message?: string; startedAt: string; finishedAt?: string };
+      reconciledAt?:   string;
+    };
+  };
+}
+
+interface HistoryItem {
+  id:         number;
+  revision:   string;
+  deployedAt: string;
+  initiatedBy?: { username?: string; automated?: boolean };
+}
+
+interface HistoryResponse { data: HistoryItem[] }
+
+// ─── Badges ───────────────────────────────────────────────────────────────────
+
+function SyncBadge({ status }: { status: string }): React.ReactElement {
+  const colours: Record<string, string> = {
+    Synced:    'bg-green-100 text-green-800',
+    OutOfSync: 'bg-amber-100 text-amber-800',
+    Unknown:   'bg-gray-100 text-gray-600',
+  };
+  return (
+    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${colours[status] ?? colours['Unknown']}`}>
+      {status}
+    </span>
+  );
+}
+
+function HealthBadge({ status }: { status: string }): React.ReactElement {
+  const colours: Record<string, string> = {
+    Healthy:     'bg-green-100 text-green-800',
+    Degraded:    'bg-red-100 text-red-800',
+    Progressing: 'bg-blue-100 text-blue-800',
+    Suspended:   'bg-orange-100 text-orange-800',
+    Missing:     'bg-gray-100 text-gray-600',
+    Unknown:     'bg-gray-100 text-gray-600',
+  };
+  return (
+    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${colours[status] ?? colours['Unknown']}`}>
+      {status}
+    </span>
+  );
+}
+
+// ─── Main Tab ─────────────────────────────────────────────────────────────────
+
+interface ArgocdTabProps { entity: Entity }
+
+export function ArgocdTab({ entity }: ArgocdTabProps): React.ReactElement {
+  const [syncing,     setSyncing]     = useState(false);
+  const [syncMessage, setSyncMessage] = useState<string | null>(null);
+
+  const annotations = entity.annotations ?? {};
+  const appName     = annotations['forgeportal.dev/argocd-app-name'];
+
+  // Not configured state
+  if (!appName) {
+    return (
+      <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-8 text-center">
+        <p className="text-sm font-medium text-gray-700 mb-1">ArgoCD not configured for this entity</p>
+        <p className="text-xs text-gray-500 mb-4">
+          Add the annotation{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5">forgeportal.dev/argocd-app-name</code>{' '}
+          to your <code className="rounded bg-gray-100 px-1 py-0.5">entity.yaml</code> to see the ArgoCD status.
+        </p>
+        <pre className="mx-auto max-w-md rounded bg-gray-800 p-3 text-left text-xs text-green-300">
+          {`metadata:\n  annotations:\n    forgeportal.dev/argocd-app-name: my-app-prod\n    forgeportal.dev/argocd-project: platform  # optional`}
+        </pre>
+      </div>
+    );
+  }
+
+  const {
+    data:      appData,
+    isPending: appLoading,
+    error:     appError,
+    refetch:   refetchApp,
+  } = useApi<ArgocdAppResponse>(
+    `/api/v1/plugins/argocd/entities/${entity.id}/app?appName=${encodeURIComponent(appName)}`,
+    { refetchInterval: 30_000 },
+  );
+
+  const {
+    data:      historyData,
+    isPending: historyLoading,
+  } = useApi<HistoryResponse>(
+    `/api/v1/plugins/argocd/entities/${entity.id}/history?appName=${encodeURIComponent(appName)}`,
+  );
+
+  const triggerSync = useCallback(async () => {
+    if (!appName || syncing) return;
+    setSyncing(true);
+    try {
+      const res = await fetch(`/api/v1/plugins/argocd/entities/${entity.id}/sync`, {
+        method:      'POST',
+        credentials: 'include',
+        headers:     { 'Content-Type': 'application/json' },
+        body:        JSON.stringify({ appName }),
+      });
+      if (res.ok) {
+        const json = await res.json() as { data: { syncTriggeredAt: string } };
+        setSyncMessage(`Sync triggered at ${new Date(json.data.syncTriggeredAt).toLocaleTimeString()}`);
+        void refetchApp();
+        setTimeout(() => setSyncMessage(null), 5000);
+      }
+    } finally {
+      setSyncing(false);
+    }
+  }, [appName, entity.id, syncing, refetchApp]);
+
+  const app     = appData?.data;
+  const history = historyData?.data ?? [];
+
+  return (
+    <div className="space-y-6">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {app && (
+            <span className="text-xs text-gray-500">
+              App: <strong>{app.metadata.name}</strong> · Project: <strong>{app.spec.project}</strong>
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {syncMessage && (
+            <span className="text-xs text-green-600 font-medium">{syncMessage}</span>
+          )}
+          <button
+            onClick={() => void triggerSync()}
+            disabled={syncing || appLoading}
+            className="inline-flex items-center gap-1.5 rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-indigo-700 disabled:opacity-60 transition-colors"
+          >
+            {syncing ? (
+              <>
+                <svg className="h-3 w-3 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+                Syncing…
+              </>
+            ) : (
+              'Sync Now'
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Loading */}
+      {appLoading && (
+        <div className="flex items-center gap-2 text-sm text-gray-500">
+          <svg className="h-4 w-4 animate-spin text-indigo-500" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          Loading ArgoCD status…
+        </div>
+      )}
+
+      {/* Error */}
+      {appError && !appLoading && (
+        <div className="rounded-md bg-red-50 border border-red-200 p-4 text-sm text-red-700">
+          Failed to load ArgoCD data: {appError instanceof Error ? appError.message : 'Unknown error'}
+        </div>
+      )}
+
+      {/* Status cards */}
+      {app && (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          {/* Sync status */}
+          <div className="rounded-lg border border-gray-200 bg-white p-4">
+            <p className="text-xs font-medium text-gray-500 mb-2">Sync Status</p>
+            <SyncBadge status={app.status.sync.status} />
+            {app.status.sync.revision && (
+              <p className="mt-2 font-mono text-xs text-gray-500 truncate" title={app.status.sync.revision}>
+                {app.status.sync.revision.slice(0, 8)}
+              </p>
+            )}
+          </div>
+
+          {/* Health */}
+          <div className="rounded-lg border border-gray-200 bg-white p-4">
+            <p className="text-xs font-medium text-gray-500 mb-2">Health</p>
+            <HealthBadge status={app.status.health.status} />
+          </div>
+
+          {/* Last reconciled */}
+          <div className="rounded-lg border border-gray-200 bg-white p-4">
+            <p className="text-xs font-medium text-gray-500 mb-2">Last Reconciled</p>
+            <p className="text-xs text-gray-700">
+              {app.status.reconciledAt
+                ? new Date(app.status.reconciledAt).toLocaleString()
+                : '—'}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Operation state */}
+      {app?.status.operationState && (
+        <div className={`rounded-md border p-3 text-xs ${
+          app.status.operationState.phase === 'Succeeded'
+            ? 'border-green-200 bg-green-50 text-green-800'
+            : app.status.operationState.phase === 'Failed'
+            ? 'border-red-200 bg-red-50 text-red-800'
+            : 'border-blue-200 bg-blue-50 text-blue-800'
+        }`}>
+          <span className="font-medium">Last operation:</span>{' '}
+          {app.status.operationState.phase}
+          {app.status.operationState.message && ` — ${app.status.operationState.message}`}
+        </div>
+      )}
+
+      {/* Source */}
+      {app?.spec.source && (
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h3 className="text-sm font-semibold text-gray-700 mb-3">Source</h3>
+          <dl className="grid grid-cols-1 gap-y-2 text-xs sm:grid-cols-3">
+            <div>
+              <dt className="text-gray-500">Repository</dt>
+              <dd className="font-mono text-gray-800 truncate">{app.spec.source.repoURL}</dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">Revision</dt>
+              <dd className="font-mono text-gray-800">{app.spec.source.targetRevision}</dd>
+            </div>
+            {app.spec.source.path && (
+              <div>
+                <dt className="text-gray-500">Path</dt>
+                <dd className="font-mono text-gray-800">{app.spec.source.path}</dd>
+              </div>
+            )}
+          </dl>
+        </div>
+      )}
+
+      {/* Sync history */}
+      <div>
+        <h3 className="text-sm font-semibold text-gray-700 mb-3">
+          Sync History{' '}
+          <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-normal text-gray-500">
+            {history.length}
+          </span>
+        </h3>
+
+        {historyLoading ? (
+          <p className="text-xs text-gray-400">Loading history…</p>
+        ) : history.length === 0 ? (
+          <p className="text-xs text-gray-400">No sync history available.</p>
+        ) : (
+          <div className="overflow-x-auto rounded-lg border border-gray-200">
+            <table className="min-w-full text-xs">
+              <thead>
+                <tr className="border-b border-gray-200 bg-gray-50">
+                  <th className="px-4 py-2 text-left font-medium text-gray-600">Revision</th>
+                  <th className="px-4 py-2 text-left font-medium text-gray-600">Deployed At</th>
+                  <th className="px-4 py-2 text-left font-medium text-gray-600">By</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 bg-white">
+                {history.slice(0, 5).map((item) => (
+                  <tr key={item.id} className="hover:bg-gray-50">
+                    <td className="px-4 py-2 font-mono text-gray-800">
+                      {item.revision.slice(0, 8)}
+                    </td>
+                    <td className="px-4 py-2 text-gray-600">
+                      {new Date(item.deployedAt).toLocaleString()}
+                    </td>
+                    <td className="px-4 py-2 text-gray-500">
+                      {item.initiatedBy?.automated
+                        ? 'Auto-sync'
+                        : (item.initiatedBy?.username ?? '—')}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}