@burdenoff/microfe-store 2026.624.4 → 2026.625.1

package/dist/pages/InstalledAppsPage.js

@@ -5,10 +5,11 @@ import { StoreInstallationStatus as r } from "../generated/global-types.js";
 import { useMemo as i, useState as a } from "react";
 import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { AlertCircle as s, Loader2 as c, Package as l, Plus as u, RefreshCw as d, Trash2 as f } from "lucide-react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useNavigate as h } from "react-router-dom";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useNavigate as g } from "react-router-dom";
+import { AlertDialog as _, AlertDialogAction as v, AlertDialogCancel as y, AlertDialogContent as b, AlertDialogDescription as x, AlertDialogFooter as S, AlertDialogHeader as C, AlertDialogTitle as w } from "@burdenoff/fe-libs/ui";
 //#region src/pages/InstalledAppsPage.tsx
-var g = [
+var T = [
 	{
 		label: "All",
 		value: "all"
@@ -37,185 +38,185 @@ var g = [
 		label: "Uninstalled",
 		value: r.Uninstalled
 	}
-], _ = (e) => e === r.Active ? "bg-status-success-bg-subtle text-status-success-text" : e === r.Pending || e === r.Installing || e === r.Inactive ? "bg-status-warning-bg-subtle text-status-warning-text" : e === r.Failed ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", v = () => {
-	let v = h(), { basePath: y, workspaceId: b } = e(), { t: x } = o(), [S, C] = a("all"), [w, T] = a(null), [E, D] = a(null), { installations: O, totalCount: k, hasMore: A, loading: j, error: M, uninstall: N, uninstallingIds: P, refetch: F, loadMore: I } = n({ filter: i(() => S === "all" ? void 0 : { status: S }, [S]) });
+], E = (e) => e === r.Active ? "bg-status-success-bg-subtle text-status-success-text" : e === r.Pending || e === r.Installing || e === r.Inactive ? "bg-status-warning-bg-subtle text-status-warning-text" : e === r.Failed ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", D = () => {
+	let D = g(), { basePath: O, workspaceId: k } = e(), { t: A } = o(), [j, M] = a("all"), [N, P] = a(null), [F, I] = a(null), { installations: L, totalCount: R, hasMore: z, loading: B, error: V, uninstall: H, uninstallingIds: U, refetch: W, loadMore: G } = n({ filter: i(() => j === "all" ? void 0 : { status: j }, [j]) });
 	t({
-		variables: { workspaceId: b ?? "" },
-		skip: !b,
+		variables: { workspaceId: k ?? "" },
+		skip: !k,
 		onData: () => {
-			F();
+			W();
 		},
 		onError: (e) => {
 			console.warn("InstallationStatusUpdated subscription error:", e.message);
 		}
 	});
-	let L = i(() => [...O].sort((e, t) => t.installedAt.localeCompare(e.installedAt)), [O]), R = () => {
-		v(`${y}/marketplace`);
-	}, z = async (e) => {
-		T(null), await N(e, "User requested uninstall from store UI") || T("Could not uninstall. Try again."), D(null);
+	let K = i(() => [...L].sort((e, t) => t.installedAt.localeCompare(e.installedAt)), [L]), q = () => {
+		D(`${O}/marketplace`);
+	}, J = async (e) => {
+		P(null), await H(e, "User requested uninstall from store UI") || P("Could not uninstall. Try again."), I(null);
 	};
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ h("div", {
 		className: "flex h-full flex-col",
 		children: [
-			/* @__PURE__ */ p("header", {
-				className: "border-b border-border-default bg-bg-surface px-6 py-4",
-				children: /* @__PURE__ */ m("div", {
+			/* @__PURE__ */ m("header", {
+				className: "border-b border-border-seam bg-bg-surface px-6 py-4",
+				children: /* @__PURE__ */ h("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+					children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
 						className: "text-2xl font-bold text-text-primary",
-						children: x("pages.installed.title", { defaultValue: "Installed Apps" })
-					}), /* @__PURE__ */ p("p", {
+						children: A("pages.installed.title", { defaultValue: "Installed Apps" })
+					}), /* @__PURE__ */ m("p", {
 						className: "text-sm text-text-muted",
 						children: "Manage your installed applications"
-					})] }), /* @__PURE__ */ m("button", {
+					})] }), /* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: R,
+						onClick: q,
 						className: "flex cursor-pointer items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90",
-						children: [/* @__PURE__ */ p(u, { className: "size-5" }), /* @__PURE__ */ p("span", { children: x("pages.installed.installNew", { defaultValue: "Install New App" }) })]
+						children: [/* @__PURE__ */ m(u, { className: "size-5" }), /* @__PURE__ */ m("span", { children: A("pages.installed.installNew", { defaultValue: "Install New App" }) })]
 					})]
 				})
 			}),
-			/* @__PURE__ */ p("main", {
+			/* @__PURE__ */ m("main", {
 				className: "flex-1 overflow-y-auto p-6",
-				children: /* @__PURE__ */ m("div", {
+				children: /* @__PURE__ */ h("div", {
 					className: "mx-auto max-w-6xl",
 					children: [
-						/* @__PURE__ */ m("div", {
+						/* @__PURE__ */ h("div", {
 							className: "mb-4 flex flex-wrap items-center gap-2",
-							children: [g.map((e) => /* @__PURE__ */ p("button", {
+							children: [T.map((e) => /* @__PURE__ */ m("button", {
 								type: "button",
-								onClick: () => C(e.value),
-								className: `cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${S === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-primary hover:bg-bg-surface"}`,
+								onClick: () => M(e.value),
+								className: `cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${j === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-primary hover:bg-bg-surface"}`,
 								children: e.label
-							}, e.label)), /* @__PURE__ */ m("button", {
+							}, e.label)), /* @__PURE__ */ h("button", {
 								type: "button",
-								onClick: () => F(),
+								onClick: () => W(),
 								className: "ml-auto cursor-pointer inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
-								children: [/* @__PURE__ */ p(d, { className: "size-4" }), "Refresh"]
+								children: [/* @__PURE__ */ m(d, { className: "size-4" }), "Refresh"]
 							})]
 						}),
-						w && /* @__PURE__ */ p("div", {
+						N && /* @__PURE__ */ m("div", {
 							role: "alert",
 							className: "mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text",
-							children: w
+							children: N
 						}),
-						j ? /* @__PURE__ */ p("output", {
+						B ? /* @__PURE__ */ m("output", {
 							"aria-label": "Loading installed apps",
 							className: "flex items-center justify-center py-16",
-							children: /* @__PURE__ */ p(c, {
+							children: /* @__PURE__ */ m(c, {
 								className: "size-8 animate-spin text-text-muted",
 								"aria-hidden": "true"
 							})
-						}) : M ? /* @__PURE__ */ m("div", {
+						}) : V ? /* @__PURE__ */ h("div", {
 							role: "alert",
 							className: "flex flex-col items-center justify-center rounded-xl border border-status-error-border bg-status-error-bg-subtle py-16 text-center",
 							children: [
-								/* @__PURE__ */ p(s, { className: "mb-3 size-10 text-status-error-text" }),
-								/* @__PURE__ */ p("h3", {
+								/* @__PURE__ */ m(s, { className: "mb-3 size-10 text-status-error-text" }),
+								/* @__PURE__ */ m("h3", {
 									className: "text-lg font-semibold text-status-error-text",
 									children: "Failed to load installations"
 								}),
-								/* @__PURE__ */ p("p", {
+								/* @__PURE__ */ m("p", {
 									className: "mt-2 text-sm text-text-muted",
-									children: M.message
+									children: V.message
 								}),
-								/* @__PURE__ */ p("button", {
+								/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => F(),
+									onClick: () => W(),
 									className: "mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
 									children: "Try Again"
 								})
 							]
-						}) : L.length === 0 ? /* @__PURE__ */ p("div", {
+						}) : K.length === 0 ? /* @__PURE__ */ m("div", {
 							className: "flex items-center justify-center py-16",
-							children: /* @__PURE__ */ m("div", {
+							children: /* @__PURE__ */ h("div", {
 								className: "text-center",
 								children: [
-									/* @__PURE__ */ p(l, { className: "mx-auto mb-4 size-16 text-text-muted" }),
-									/* @__PURE__ */ p("h3", {
+									/* @__PURE__ */ m(l, { className: "mx-auto mb-4 size-16 text-text-muted" }),
+									/* @__PURE__ */ m("h3", {
 										className: "mb-2 text-lg font-semibold text-text-primary",
 										children: "No apps installed"
 									}),
-									/* @__PURE__ */ p("p", {
+									/* @__PURE__ */ m("p", {
 										className: "mb-4 text-sm text-text-muted",
 										children: "Browse the marketplace to install your first app"
 									}),
-									/* @__PURE__ */ p("button", {
+									/* @__PURE__ */ m("button", {
 										type: "button",
-										onClick: R,
+										onClick: q,
 										className: "rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90",
 										children: "Browse Marketplace"
 									})
 								]
 							})
-						}) : /* @__PURE__ */ m("div", {
+						}) : /* @__PURE__ */ h("div", {
 							className: "flex flex-col gap-y-4",
 							children: [
-								/* @__PURE__ */ m("p", {
+								/* @__PURE__ */ h("p", {
 									"aria-live": "polite",
 									className: "text-sm text-text-muted",
 									children: [
-										k,
+										R,
 										" installation",
-										k === 1 ? "" : "s",
+										R === 1 ? "" : "s",
 										" found"
 									]
 								}),
-								/* @__PURE__ */ p("ul", {
+								/* @__PURE__ */ m("ul", {
 									className: "flex flex-col gap-y-4",
-									children: L.map((e) => {
-										let t = P.has(`${e.workspaceId}:${e.productId}`);
-										return /* @__PURE__ */ p("li", {
-											className: "rounded-xl border border-border-default bg-bg-surface p-4",
-											children: /* @__PURE__ */ m("div", {
+									children: K.map((e) => {
+										let t = U.has(`${e.workspaceId}:${e.productId}`);
+										return /* @__PURE__ */ m("li", {
+											className: "rounded-xl border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]",
+											children: /* @__PURE__ */ h("div", {
 												className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-												children: [/* @__PURE__ */ m("div", {
+												children: [/* @__PURE__ */ h("div", {
 													className: "flex items-start gap-3",
-													children: [/* @__PURE__ */ p("div", {
+													children: [/* @__PURE__ */ m("div", {
 														className: "flex size-12 items-center justify-center rounded-lg bg-bg-sunken text-lg font-semibold text-text-muted",
-														children: /* @__PURE__ */ p(l, { className: "size-6" })
-													}), /* @__PURE__ */ m("div", { children: [
-														/* @__PURE__ */ p("h3", {
+														children: /* @__PURE__ */ m(l, { className: "size-6" })
+													}), /* @__PURE__ */ h("div", { children: [
+														/* @__PURE__ */ m("h3", {
 															className: "font-semibold text-text-primary",
 															children: e.workspaceName ?? e.workspaceId
 														}),
-														/* @__PURE__ */ m("p", {
+														/* @__PURE__ */ h("p", {
 															className: "text-sm text-text-muted",
 															children: ["Product: ", e.productId]
 														}),
-														/* @__PURE__ */ m("div", {
+														/* @__PURE__ */ h("div", {
 															className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-text-muted",
 															children: [
-																/* @__PURE__ */ p("span", {
-																	className: `rounded-full px-2 py-1 font-medium ${_(e.status)}`,
+																/* @__PURE__ */ m("span", {
+																	className: `rounded-full px-2 py-1 font-medium ${E(e.status)}`,
 																	children: e.status
 																}),
-																e.version && /* @__PURE__ */ m("span", { children: ["v", e.version] }),
-																e.workspaceType && /* @__PURE__ */ p("span", { children: e.workspaceType })
+																e.version && /* @__PURE__ */ h("span", { children: ["v", e.version] }),
+																e.workspaceType && /* @__PURE__ */ m("span", { children: e.workspaceType })
 															]
 														})
 													] })]
-												}), /* @__PURE__ */ m("div", {
+												}), /* @__PURE__ */ h("div", {
 													className: "flex items-center gap-2",
 													children: [
-														/* @__PURE__ */ p("button", {
+														/* @__PURE__ */ m("button", {
 															type: "button",
-															onClick: () => v(`${y}/installed/${e.id}`),
+															onClick: () => D(`${O}/installed/${e.id}`),
 															className: "cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 															children: "Details"
 														}),
-														/* @__PURE__ */ p("button", {
+														/* @__PURE__ */ m("button", {
 															type: "button",
-															onClick: () => v(`${y}/marketplace/product/${e.productId}`),
+															onClick: () => D(`${O}/marketplace/product/${e.productId}`),
 															className: "cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 															children: "View Product"
 														}),
-														e.status !== r.Uninstalled && /* @__PURE__ */ m("button", {
+														e.status !== r.Uninstalled && /* @__PURE__ */ h("button", {
 															type: "button",
-															onClick: () => D(e),
+															onClick: () => I(e),
 															disabled: t,
 															className: "cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-60",
-															children: [t ? /* @__PURE__ */ p(c, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(f, { className: "size-4" }), "Uninstall"]
+															children: [t ? /* @__PURE__ */ m(c, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(f, { className: "size-4" }), "Uninstall"]
 														})
 													]
 												})]
@@ -223,14 +224,14 @@ var g = [
 										}, e.id);
 									})
 								}),
-								A && /* @__PURE__ */ p("div", {
+								z && /* @__PURE__ */ m("div", {
 									className: "flex justify-center pt-6",
-									children: /* @__PURE__ */ p("button", {
+									children: /* @__PURE__ */ m("button", {
 										type: "button",
-										onClick: I,
-										disabled: j,
+										onClick: G,
+										disabled: B,
 										className: "rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50",
-										children: j ? "Loading…" : "Load more"
+										children: B ? "Loading…" : "Load more"
 									})
 								})
 							]
@@ -238,64 +239,40 @@ var g = [
 					]
 				})
 			}),
-			E && /* @__PURE__ */ m("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-				children: [/* @__PURE__ */ p("button", {
-					type: "button",
-					"aria-label": "Cancel uninstall",
-					className: "absolute inset-0 bg-bg-overlay/50",
-					onClick: () => D(null)
-				}), /* @__PURE__ */ m("dialog", {
-					open: !0,
-					"aria-modal": "true",
-					"aria-labelledby": "installed-apps-uninstall-title",
-					className: "relative z-10 w-full max-w-md rounded-2xl border border-border-default bg-bg-surface p-6 shadow-2xl",
-					children: [
-						/* @__PURE__ */ p("h2", {
-							id: "installed-apps-uninstall-title",
-							className: "text-lg font-semibold text-text-primary",
-							children: "Uninstall app"
+			/* @__PURE__ */ m(_, {
+				open: F !== null,
+				onOpenChange: (e) => !e && I(null),
+				children: /* @__PURE__ */ h(b, {
+					className: "max-w-md",
+					children: [/* @__PURE__ */ h(C, { children: [/* @__PURE__ */ m(w, { children: "Uninstall app" }), /* @__PURE__ */ m(x, { children: F && /* @__PURE__ */ h(p, { children: [
+						"Remove product",
+						" ",
+						/* @__PURE__ */ m("span", {
+							className: "font-medium text-text-primary",
+							children: F.productId
 						}),
-						/* @__PURE__ */ m("p", {
-							className: "mt-2 text-sm text-text-muted",
-							children: [
-								"Remove product",
-								" ",
-								/* @__PURE__ */ p("span", {
-									className: "font-medium text-text-primary",
-									children: E.productId
-								}),
-								" ",
-								"from workspace",
-								" ",
-								/* @__PURE__ */ p("span", {
-									className: "font-medium text-text-primary",
-									children: E.workspaceName ?? E.workspaceId
-								}),
-								"?"
-							]
+						" ",
+						"from workspace",
+						" ",
+						/* @__PURE__ */ m("span", {
+							className: "font-medium text-text-primary",
+							children: F.workspaceName ?? F.workspaceId
 						}),
-						/* @__PURE__ */ m("div", {
-							className: "mt-6 flex flex-wrap justify-end gap-3",
-							children: [/* @__PURE__ */ p("button", {
-								type: "button",
-								onClick: () => D(null),
-								className: "cursor-pointer rounded-lg border border-border-default px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
-								children: "Cancel"
-							}), /* @__PURE__ */ p("button", {
-								type: "button",
-								onClick: () => z(E),
-								className: "cursor-pointer rounded-lg bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-emphasis",
-								children: "Uninstall"
-							})]
-						})
-					]
-				})]
+						"?"
+					] }) })] }), /* @__PURE__ */ h(S, { children: [/* @__PURE__ */ m(y, {
+						onClick: () => I(null),
+						children: "Cancel"
+					}), /* @__PURE__ */ m(v, {
+						className: "bg-status-error-bg text-status-error-text hover:bg-status-error-bg-emphasis",
+						onClick: () => F && J(F),
+						children: "Uninstall"
+					})] })]
+				})
 			})
 		]
 	});
 };
 //#endregion
-export { v as InstalledAppsPage };
+export { D as InstalledAppsPage };
 
 //# sourceMappingURL=InstalledAppsPage.js.map

package/dist/pages/InstalledAppsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstalledAppsPage.js","names":[],"sources":["../../src/pages/InstalledAppsPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Package, Plus, RefreshCw, Trash2, AlertCircle, Loader2 } from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { type InstalledApp, useInstallations } from '../hooks/useInstallations';\nimport { StoreInstallationStatus } from '../generated/global-types';\nimport type { InstallationFilterInput } from '../generated/global-types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useInstallationStatusUpdatedSubscription } from '../generated/global-operations';\n\nconst STATUS_FILTERS: Array<{ label: string; value: StoreInstallationStatus | 'all' }> = [\n  { label: 'All', value: 'all' },\n  { label: 'Active', value: StoreInstallationStatus.Active },\n  { label: 'Inactive', value: StoreInstallationStatus.Inactive },\n  { label: 'Pending', value: StoreInstallationStatus.Pending },\n  { label: 'Installing', value: StoreInstallationStatus.Installing },\n  { label: 'Failed', value: StoreInstallationStatus.Failed },\n  { label: 'Uninstalled', value: StoreInstallationStatus.Uninstalled },\n];\n\nconst statusBadgeClass = (status: StoreInstallationStatus): string => {\n  if (status === StoreInstallationStatus.Active) {\n    return 'bg-status-success-bg-subtle text-status-success-text';\n  }\n  if (\n    status === StoreInstallationStatus.Pending ||\n    status === StoreInstallationStatus.Installing ||\n    status === StoreInstallationStatus.Inactive\n  ) {\n    return 'bg-status-warning-bg-subtle text-status-warning-text';\n  }\n  if (status === StoreInstallationStatus.Failed) {\n    return 'bg-status-error-bg-subtle text-status-error-text';\n  }\n  return 'bg-bg-sunken text-text-muted';\n};\n\n/**\n * InstalledAppsPage component\n *\n * Displays installed applications for the current actor\n */\nexport const InstalledAppsPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath, workspaceId } = useStore();\n  const { t } = useI18n();\n  const [selectedStatus, setSelectedStatus] = useState<StoreInstallationStatus | 'all'>('all');\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [pendingUninstall, setPendingUninstall] = useState<InstalledApp | null>(null);\n\n  const filter: InstallationFilterInput | undefined = useMemo(\n    () => (selectedStatus === 'all' ? undefined : { status: selectedStatus }),\n    [selectedStatus]\n  );\n\n  const {\n    installations,\n    totalCount,\n    hasMore,\n    loading,\n    error,\n    uninstall,\n    uninstallingIds,\n    refetch,\n    loadMore,\n  } = useInstallations({ filter });\n\n  useInstallationStatusUpdatedSubscription({\n    variables: { workspaceId: workspaceId ?? '' },\n    skip: !workspaceId,\n    onData: () => {\n      void refetch();\n    },\n    onError: (err) => {\n      console.warn('InstallationStatusUpdated subscription error:', err.message);\n    },\n  });\n\n  const sortedInstallations = useMemo(\n    () => [...installations].sort((a, b) => b.installedAt.localeCompare(a.installedAt)),\n    [installations]\n  );\n\n  const handleInstallNew = () => {\n    navigate(`${basePath}/marketplace`);\n  };\n\n  const handleUninstall = async (installation: InstalledApp) => {\n    setErrorMessage(null);\n    const ok = await uninstall(installation, 'User requested uninstall from store UI');\n    if (!ok) {\n      setErrorMessage(`Could not uninstall. Try again.`);\n    }\n    setPendingUninstall(null);\n  };\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      {/* Header */}\n      <header className=\"border-b border-border-default bg-bg-surface px-6 py-4\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <h1 className=\"text-2xl font-bold text-text-primary\">\n              {t('pages.installed.title', { defaultValue: 'Installed Apps' })}\n            </h1>\n            <p className=\"text-sm text-text-muted\">Manage your installed applications</p>\n          </div>\n\n          <button\n            type=\"button\"\n            onClick={handleInstallNew}\n            className=\"flex cursor-pointer items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90\"\n          >\n            <Plus className=\"size-5\" />\n            <span>{t('pages.installed.installNew', { defaultValue: 'Install New App' })}</span>\n          </button>\n        </div>\n      </header>\n\n      {/* Content */}\n      <main className=\"flex-1 overflow-y-auto p-6\">\n        <div className=\"mx-auto max-w-6xl\">\n          <div className=\"mb-4 flex flex-wrap items-center gap-2\">\n            {STATUS_FILTERS.map((filter) => (\n              <button\n                type=\"button\"\n                key={filter.label}\n                onClick={() => setSelectedStatus(filter.value)}\n                className={`cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${\n                  selectedStatus === filter.value\n                    ? 'bg-action-primary-bg text-action-primary-text'\n                    : 'bg-bg-sunken text-text-primary hover:bg-bg-surface'\n                }`}\n              >\n                {filter.label}\n              </button>\n            ))}\n            <button\n              type=\"button\"\n              onClick={() => refetch()}\n              className=\"ml-auto cursor-pointer inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n            >\n              <RefreshCw className=\"size-4\" />\n              Refresh\n            </button>\n          </div>\n\n          {errorMessage && (\n            <div\n              role=\"alert\"\n              className=\"mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text\"\n            >\n              {errorMessage}\n            </div>\n          )}\n\n          {loading ? (\n            <output\n              aria-label=\"Loading installed apps\"\n              className=\"flex items-center justify-center py-16\"\n            >\n              <Loader2 className=\"size-8 animate-spin text-text-muted\" aria-hidden=\"true\" />\n            </output>\n          ) : error ? (\n            <div\n              role=\"alert\"\n              className=\"flex flex-col items-center justify-center rounded-xl border border-status-error-border bg-status-error-bg-subtle py-16 text-center\"\n            >\n              <AlertCircle className=\"mb-3 size-10 text-status-error-text\" />\n              <h3 className=\"text-lg font-semibold text-status-error-text\">\n                Failed to load installations\n              </h3>\n              <p className=\"mt-2 text-sm text-text-muted\">{error.message}</p>\n              <button\n                type=\"button\"\n                onClick={() => refetch()}\n                className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n              >\n                Try Again\n              </button>\n            </div>\n          ) : sortedInstallations.length === 0 ? (\n            <div className=\"flex items-center justify-center py-16\">\n              <div className=\"text-center\">\n                <Package className=\"mx-auto mb-4 size-16 text-text-muted\" />\n                <h3 className=\"mb-2 text-lg font-semibold text-text-primary\">No apps installed</h3>\n                <p className=\"mb-4 text-sm text-text-muted\">\n                  Browse the marketplace to install your first app\n                </p>\n                <button\n                  type=\"button\"\n                  onClick={handleInstallNew}\n                  className=\"rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90\"\n                >\n                  Browse Marketplace\n                </button>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-y-4\">\n              <p aria-live=\"polite\" className=\"text-sm text-text-muted\">\n                {totalCount} installation{totalCount === 1 ? '' : 's'} found\n              </p>\n              <ul className=\"flex flex-col gap-y-4\">\n                {sortedInstallations.map((installation) => {\n                  const uninstalling = uninstallingIds.has(\n                    `${installation.workspaceId}:${installation.productId}`\n                  );\n                  return (\n                    <li\n                      key={installation.id}\n                      className=\"rounded-xl border border-border-default bg-bg-surface p-4\"\n                    >\n                      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n                        <div className=\"flex items-start gap-3\">\n                          <div className=\"flex size-12 items-center justify-center rounded-lg bg-bg-sunken text-lg font-semibold text-text-muted\">\n                            <Package className=\"size-6\" />\n                          </div>\n                          <div>\n                            <h3 className=\"font-semibold text-text-primary\">\n                              {installation.workspaceName ?? installation.workspaceId}\n                            </h3>\n                            <p className=\"text-sm text-text-muted\">\n                              Product: {installation.productId}\n                            </p>\n                            <div className=\"mt-2 flex flex-wrap items-center gap-2 text-xs text-text-muted\">\n                              <span\n                                className={`rounded-full px-2 py-1 font-medium ${statusBadgeClass(installation.status)}`}\n                              >\n                                {installation.status}\n                              </span>\n                              {installation.version && <span>v{installation.version}</span>}\n                              {installation.workspaceType && (\n                                <span>{installation.workspaceType}</span>\n                              )}\n                            </div>\n                          </div>\n                        </div>\n                        <div className=\"flex items-center gap-2\">\n                          <button\n                            type=\"button\"\n                            onClick={() => navigate(`${basePath}/installed/${installation.id}`)}\n                            className=\"cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n                          >\n                            Details\n                          </button>\n                          <button\n                            type=\"button\"\n                            onClick={() =>\n                              navigate(`${basePath}/marketplace/product/${installation.productId}`)\n                            }\n                            className=\"cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n                          >\n                            View Product\n                          </button>\n                          {installation.status !== StoreInstallationStatus.Uninstalled && (\n                            <button\n                              type=\"button\"\n                              onClick={() => setPendingUninstall(installation)}\n                              disabled={uninstalling}\n                              className=\"cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-60\"\n                            >\n                              {uninstalling ? (\n                                <Loader2 className=\"size-4 animate-spin\" />\n                              ) : (\n                                <Trash2 className=\"size-4\" />\n                              )}\n                              Uninstall\n                            </button>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  );\n                })}\n              </ul>\n              {hasMore && (\n                <div className=\"flex justify-center pt-6\">\n                  <button\n                    type=\"button\"\n                    onClick={loadMore}\n                    disabled={loading}\n                    className=\"rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n                  >\n                    {loading ? 'Loading…' : 'Load more'}\n                  </button>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </main>\n\n      {pendingUninstall && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n          <button\n            type=\"button\"\n            aria-label=\"Cancel uninstall\"\n            className=\"absolute inset-0 bg-bg-overlay/50\"\n            onClick={() => setPendingUninstall(null)}\n          />\n          <dialog\n            open\n            aria-modal=\"true\"\n            aria-labelledby=\"installed-apps-uninstall-title\"\n            className=\"relative z-10 w-full max-w-md rounded-2xl border border-border-default bg-bg-surface p-6 shadow-2xl\"\n          >\n            <h2\n              id=\"installed-apps-uninstall-title\"\n              className=\"text-lg font-semibold text-text-primary\"\n            >\n              Uninstall app\n            </h2>\n            <p className=\"mt-2 text-sm text-text-muted\">\n              Remove product{' '}\n              <span className=\"font-medium text-text-primary\">{pendingUninstall.productId}</span>{' '}\n              from workspace{' '}\n              <span className=\"font-medium text-text-primary\">\n                {pendingUninstall.workspaceName ?? pendingUninstall.workspaceId}\n              </span>\n              ?\n            </p>\n\n            <div className=\"mt-6 flex flex-wrap justify-end gap-3\">\n              <button\n                type=\"button\"\n                onClick={() => setPendingUninstall(null)}\n                className=\"cursor-pointer rounded-lg border border-border-default px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n              >\n                Cancel\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => handleUninstall(pendingUninstall)}\n                className=\"cursor-pointer rounded-lg bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-emphasis\"\n              >\n                Uninstall\n              </button>\n            </div>\n          </dialog>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAmF;CACvF;EAAE,OAAO;EAAO,OAAO;EAAO;CAC9B;EAAE,OAAO;EAAU,OAAO,EAAwB;EAAQ;CAC1D;EAAE,OAAO;EAAY,OAAO,EAAwB;EAAU;CAC9D;EAAE,OAAO;EAAW,OAAO,EAAwB;EAAS;CAC5D;EAAE,OAAO;EAAc,OAAO,EAAwB;EAAY;CAClE;EAAE,OAAO;EAAU,OAAO,EAAwB;EAAQ;CAC1D;EAAE,OAAO;EAAe,OAAO,EAAwB;EAAa;CACrE,EAEK,KAAoB,MACpB,MAAW,EAAwB,SAC9B,yDAGP,MAAW,EAAwB,WACnC,MAAW,EAAwB,cACnC,MAAW,EAAwB,WAE5B,yDAEL,MAAW,EAAwB,SAC9B,qDAEF,gCAQI,UAA8B;CACzC,IAAM,IAAW,GAAa,EACxB,EAAE,aAAU,mBAAgB,GAAU,EACtC,EAAE,SAAM,GAAS,EACjB,CAAC,GAAgB,KAAqB,EAA0C,MAAM,EACtF,CAAC,GAAc,KAAmB,EAAwB,KAAK,EAC/D,CAAC,GAAkB,KAAuB,EAA8B,KAAK,EAO7E,EACJ,kBACA,eACA,YACA,YACA,UACA,cACA,oBACA,YACA,gBACE,EAAiB,EAAE,QAf6B,QAC3C,MAAmB,QAAQ,KAAA,IAAY,EAAE,QAAQ,GAAgB,EACxE,CAAC,EAAe,CACjB,EAY8B,CAAC;AAEhC,GAAyC;EACvC,WAAW,EAAE,aAAa,KAAe,IAAI;EAC7C,MAAM,CAAC;EACP,cAAc;AACP,MAAS;;EAEhB,UAAU,MAAQ;AAChB,WAAQ,KAAK,iDAAiD,EAAI,QAAQ;;EAE7E,CAAC;CAEF,IAAM,IAAsB,QACpB,CAAC,GAAG,EAAc,CAAC,MAAM,GAAG,MAAM,EAAE,YAAY,cAAc,EAAE,YAAY,CAAC,EACnF,CAAC,EAAc,CAChB,EAEK,UAAyB;AAC7B,IAAS,GAAG,EAAS,cAAc;IAG/B,IAAkB,OAAO,MAA+B;AAM5D,EALA,EAAgB,KAAK,EACV,MAAM,EAAU,GAAc,yCAAyC,IAEhF,EAAgB,kCAAkC,EAEpD,EAAoB,KAAK;;AAG3B,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,UAAD;IAAQ,WAAU;cAChB,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAE,yBAAyB,EAAE,cAAc,kBAAkB,CAAC;MAC5D,CAAA,EACL,kBAAC,KAAD;MAAG,WAAU;gBAA0B;MAAsC,CAAA,CACzE,EAAA,CAAA,EAEN,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA,EAC3B,kBAAC,QAAD,EAAA,UAAO,EAAE,8BAA8B,EAAE,cAAc,mBAAmB,CAAC,EAAQ,CAAA,CAC5E;QACL;;IACC,CAAA;GAGT,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,EAAe,KAAK,MACnB,kBAAC,UAAD;QACE,MAAK;QAEL,eAAe,EAAkB,EAAO,MAAM;QAC9C,WAAW,iFACT,MAAmB,EAAO,QACtB,kDACA;kBAGL,EAAO;QACD,EATF,EAAO,MASL,CACT,EACF,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,GAAS;QACxB,WAAU;kBAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAAA,UAEzB;UACL;;MAEL,KACC,kBAAC,OAAD;OACE,MAAK;OACL,WAAU;iBAET;OACG,CAAA;MAGP,IACC,kBAAC,UAAD;OACE,cAAW;OACX,WAAU;iBAEV,kBAAC,GAAD;QAAS,WAAU;QAAsC,eAAY;QAAS,CAAA;OACvE,CAAA,GACP,IACF,kBAAC,OAAD;OACE,MAAK;OACL,WAAU;iBAFZ;QAIE,kBAAC,GAAD,EAAa,WAAU,uCAAwC,CAAA;QAC/D,kBAAC,MAAD;SAAI,WAAU;mBAA+C;SAExD,CAAA;QACL,kBAAC,KAAD;SAAG,WAAU;mBAAgC,EAAM;SAAY,CAAA;QAC/D,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,GAAS;SACxB,WAAU;mBACX;SAEQ,CAAA;QACL;WACJ,EAAoB,WAAW,IACjC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,GAAD,EAAS,WAAU,wCAAyC,CAAA;SAC5D,kBAAC,MAAD;UAAI,WAAU;oBAA+C;UAAsB,CAAA;SACnF,kBAAC,KAAD;UAAG,WAAU;oBAA+B;UAExC,CAAA;SACJ,kBAAC,UAAD;UACE,MAAK;UACL,SAAS;UACT,WAAU;oBACX;UAEQ,CAAA;SACL;;OACF,CAAA,GAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,KAAD;SAAG,aAAU;SAAS,WAAU;mBAAhC;UACG;UAAW;UAAc,MAAe,IAAI,KAAK;UAAI;UACpD;;QACJ,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAoB,KAAK,MAAiB;UACzC,IAAM,IAAe,EAAgB,IACnC,GAAG,EAAa,YAAY,GAAG,EAAa,YAC7C;AACD,iBACE,kBAAC,MAAD;WAEE,WAAU;qBAEV,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,OAAD;cAAK,WAAU;wBACb,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA;cAC1B,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA;cACE,kBAAC,MAAD;eAAI,WAAU;yBACX,EAAa,iBAAiB,EAAa;eACzC,CAAA;cACL,kBAAC,KAAD;eAAG,WAAU;yBAAb,CAAuC,aAC3B,EAAa,UACrB;;cACJ,kBAAC,OAAD;eAAK,WAAU;yBAAf;gBACE,kBAAC,QAAD;iBACE,WAAW,sCAAsC,EAAiB,EAAa,OAAO;2BAErF,EAAa;iBACT,CAAA;gBACN,EAAa,WAAW,kBAAC,QAAD,EAAA,UAAA,CAAM,KAAE,EAAa,QAAe,EAAA,CAAA;gBAC5D,EAAa,iBACZ,kBAAC,QAAD,EAAA,UAAO,EAAa,eAAqB,CAAA;gBAEvC;;cACF,EAAA,CAAA,CACF;gBACN,kBAAC,OAAD;aAAK,WAAU;uBAAf;cACE,kBAAC,UAAD;eACE,MAAK;eACL,eAAe,EAAS,GAAG,EAAS,aAAa,EAAa,KAAK;eACnE,WAAU;yBACX;eAEQ,CAAA;cACT,kBAAC,UAAD;eACE,MAAK;eACL,eACE,EAAS,GAAG,EAAS,uBAAuB,EAAa,YAAY;eAEvE,WAAU;yBACX;eAEQ,CAAA;cACR,EAAa,WAAW,EAAwB,eAC/C,kBAAC,UAAD;eACE,MAAK;eACL,eAAe,EAAoB,EAAa;eAChD,UAAU;eACV,WAAU;yBAJZ,CAMG,IACC,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,GAE3C,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA,EAC7B,YAEK;;cAEP;eACF;;WACH,EA9DE,EAAa,GA8Df;WAEP;SACC,CAAA;QACJ,KACC,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,UAAD;UACE,MAAK;UACL,SAAS;UACT,UAAU;UACV,WAAU;oBAET,IAAU,aAAa;UACjB,CAAA;SACL,CAAA;QAEJ;;MAEJ;;IACD,CAAA;GAEN,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,MAAK;KACL,cAAW;KACX,WAAU;KACV,eAAe,EAAoB,KAAK;KACxC,CAAA,EACF,kBAAC,UAAD;KACE,MAAA;KACA,cAAW;KACX,mBAAgB;KAChB,WAAU;eAJZ;MAME,kBAAC,MAAD;OACE,IAAG;OACH,WAAU;iBACX;OAEI,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAA4C;QAC3B;QACf,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAiB;SAAiB,CAAA;QAAC;QAAI;QACzE;QACf,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAiB,iBAAiB,EAAiB;SAC/C,CAAA;;QAEL;;MAEJ,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAoB,KAAK;QACxC,WAAU;kBACX;QAEQ,CAAA,EACT,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAgB,EAAiB;QAChD,WAAU;kBACX;QAEQ,CAAA,CACL;;MACC;OACL;;GAEJ"}
+{"version":3,"file":"InstalledAppsPage.js","names":[],"sources":["../../src/pages/InstalledAppsPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Package, Plus, RefreshCw, Trash2, AlertCircle, Loader2 } from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { type InstalledApp, useInstallations } from '../hooks/useInstallations';\nimport { StoreInstallationStatus } from '../generated/global-types';\nimport type { InstallationFilterInput } from '../generated/global-types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogCancel,\n  AlertDialogAction,\n} from '@burdenoff/fe-libs/ui';\nimport { useInstallationStatusUpdatedSubscription } from '../generated/global-operations';\n\nconst STATUS_FILTERS: Array<{ label: string; value: StoreInstallationStatus | 'all' }> = [\n  { label: 'All', value: 'all' },\n  { label: 'Active', value: StoreInstallationStatus.Active },\n  { label: 'Inactive', value: StoreInstallationStatus.Inactive },\n  { label: 'Pending', value: StoreInstallationStatus.Pending },\n  { label: 'Installing', value: StoreInstallationStatus.Installing },\n  { label: 'Failed', value: StoreInstallationStatus.Failed },\n  { label: 'Uninstalled', value: StoreInstallationStatus.Uninstalled },\n];\n\nconst statusBadgeClass = (status: StoreInstallationStatus): string => {\n  if (status === StoreInstallationStatus.Active) {\n    return 'bg-status-success-bg-subtle text-status-success-text';\n  }\n  if (\n    status === StoreInstallationStatus.Pending ||\n    status === StoreInstallationStatus.Installing ||\n    status === StoreInstallationStatus.Inactive\n  ) {\n    return 'bg-status-warning-bg-subtle text-status-warning-text';\n  }\n  if (status === StoreInstallationStatus.Failed) {\n    return 'bg-status-error-bg-subtle text-status-error-text';\n  }\n  return 'bg-bg-sunken text-text-muted';\n};\n\n/**\n * InstalledAppsPage component\n *\n * Displays installed applications for the current actor\n */\nexport const InstalledAppsPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath, workspaceId } = useStore();\n  const { t } = useI18n();\n  const [selectedStatus, setSelectedStatus] = useState<StoreInstallationStatus | 'all'>('all');\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [pendingUninstall, setPendingUninstall] = useState<InstalledApp | null>(null);\n\n  const filter: InstallationFilterInput | undefined = useMemo(\n    () => (selectedStatus === 'all' ? undefined : { status: selectedStatus }),\n    [selectedStatus]\n  );\n\n  const {\n    installations,\n    totalCount,\n    hasMore,\n    loading,\n    error,\n    uninstall,\n    uninstallingIds,\n    refetch,\n    loadMore,\n  } = useInstallations({ filter });\n\n  useInstallationStatusUpdatedSubscription({\n    variables: { workspaceId: workspaceId ?? '' },\n    skip: !workspaceId,\n    onData: () => {\n      void refetch();\n    },\n    onError: (err) => {\n      console.warn('InstallationStatusUpdated subscription error:', err.message);\n    },\n  });\n\n  const sortedInstallations = useMemo(\n    () => [...installations].sort((a, b) => b.installedAt.localeCompare(a.installedAt)),\n    [installations]\n  );\n\n  const handleInstallNew = () => {\n    navigate(`${basePath}/marketplace`);\n  };\n\n  const handleUninstall = async (installation: InstalledApp) => {\n    setErrorMessage(null);\n    const ok = await uninstall(installation, 'User requested uninstall from store UI');\n    if (!ok) {\n      setErrorMessage(`Could not uninstall. Try again.`);\n    }\n    setPendingUninstall(null);\n  };\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      {/* Header */}\n      <header className=\"border-b border-border-seam bg-bg-surface px-6 py-4\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <h1 className=\"text-2xl font-bold text-text-primary\">\n              {t('pages.installed.title', { defaultValue: 'Installed Apps' })}\n            </h1>\n            <p className=\"text-sm text-text-muted\">Manage your installed applications</p>\n          </div>\n\n          <button\n            type=\"button\"\n            onClick={handleInstallNew}\n            className=\"flex cursor-pointer items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90\"\n          >\n            <Plus className=\"size-5\" />\n            <span>{t('pages.installed.installNew', { defaultValue: 'Install New App' })}</span>\n          </button>\n        </div>\n      </header>\n\n      {/* Content */}\n      <main className=\"flex-1 overflow-y-auto p-6\">\n        <div className=\"mx-auto max-w-6xl\">\n          <div className=\"mb-4 flex flex-wrap items-center gap-2\">\n            {STATUS_FILTERS.map((filter) => (\n              <button\n                type=\"button\"\n                key={filter.label}\n                onClick={() => setSelectedStatus(filter.value)}\n                className={`cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${\n                  selectedStatus === filter.value\n                    ? 'bg-action-primary-bg text-action-primary-text'\n                    : 'bg-bg-sunken text-text-primary hover:bg-bg-surface'\n                }`}\n              >\n                {filter.label}\n              </button>\n            ))}\n            <button\n              type=\"button\"\n              onClick={() => refetch()}\n              className=\"ml-auto cursor-pointer inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n            >\n              <RefreshCw className=\"size-4\" />\n              Refresh\n            </button>\n          </div>\n\n          {errorMessage && (\n            <div\n              role=\"alert\"\n              className=\"mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text\"\n            >\n              {errorMessage}\n            </div>\n          )}\n\n          {loading ? (\n            <output\n              aria-label=\"Loading installed apps\"\n              className=\"flex items-center justify-center py-16\"\n            >\n              <Loader2 className=\"size-8 animate-spin text-text-muted\" aria-hidden=\"true\" />\n            </output>\n          ) : error ? (\n            <div\n              role=\"alert\"\n              className=\"flex flex-col items-center justify-center rounded-xl border border-status-error-border bg-status-error-bg-subtle py-16 text-center\"\n            >\n              <AlertCircle className=\"mb-3 size-10 text-status-error-text\" />\n              <h3 className=\"text-lg font-semibold text-status-error-text\">\n                Failed to load installations\n              </h3>\n              <p className=\"mt-2 text-sm text-text-muted\">{error.message}</p>\n              <button\n                type=\"button\"\n                onClick={() => refetch()}\n                className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n              >\n                Try Again\n              </button>\n            </div>\n          ) : sortedInstallations.length === 0 ? (\n            <div className=\"flex items-center justify-center py-16\">\n              <div className=\"text-center\">\n                <Package className=\"mx-auto mb-4 size-16 text-text-muted\" />\n                <h3 className=\"mb-2 text-lg font-semibold text-text-primary\">No apps installed</h3>\n                <p className=\"mb-4 text-sm text-text-muted\">\n                  Browse the marketplace to install your first app\n                </p>\n                <button\n                  type=\"button\"\n                  onClick={handleInstallNew}\n                  className=\"rounded-lg bg-action-primary-bg px-4 py-2 font-semibold text-action-primary-text transition-colors hover:opacity-90\"\n                >\n                  Browse Marketplace\n                </button>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-y-4\">\n              <p aria-live=\"polite\" className=\"text-sm text-text-muted\">\n                {totalCount} installation{totalCount === 1 ? '' : 's'} found\n              </p>\n              <ul className=\"flex flex-col gap-y-4\">\n                {sortedInstallations.map((installation) => {\n                  const uninstalling = uninstallingIds.has(\n                    `${installation.workspaceId}:${installation.productId}`\n                  );\n                  return (\n                    <li\n                      key={installation.id}\n                      className=\"rounded-xl border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]\"\n                    >\n                      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n                        <div className=\"flex items-start gap-3\">\n                          <div className=\"flex size-12 items-center justify-center rounded-lg bg-bg-sunken text-lg font-semibold text-text-muted\">\n                            <Package className=\"size-6\" />\n                          </div>\n                          <div>\n                            <h3 className=\"font-semibold text-text-primary\">\n                              {installation.workspaceName ?? installation.workspaceId}\n                            </h3>\n                            <p className=\"text-sm text-text-muted\">\n                              Product: {installation.productId}\n                            </p>\n                            <div className=\"mt-2 flex flex-wrap items-center gap-2 text-xs text-text-muted\">\n                              <span\n                                className={`rounded-full px-2 py-1 font-medium ${statusBadgeClass(installation.status)}`}\n                              >\n                                {installation.status}\n                              </span>\n                              {installation.version && <span>v{installation.version}</span>}\n                              {installation.workspaceType && (\n                                <span>{installation.workspaceType}</span>\n                              )}\n                            </div>\n                          </div>\n                        </div>\n                        <div className=\"flex items-center gap-2\">\n                          <button\n                            type=\"button\"\n                            onClick={() => navigate(`${basePath}/installed/${installation.id}`)}\n                            className=\"cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n                          >\n                            Details\n                          </button>\n                          <button\n                            type=\"button\"\n                            onClick={() =>\n                              navigate(`${basePath}/marketplace/product/${installation.productId}`)\n                            }\n                            className=\"cursor-pointer rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n                          >\n                            View Product\n                          </button>\n                          {installation.status !== StoreInstallationStatus.Uninstalled && (\n                            <button\n                              type=\"button\"\n                              onClick={() => setPendingUninstall(installation)}\n                              disabled={uninstalling}\n                              className=\"cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle disabled:opacity-60\"\n                            >\n                              {uninstalling ? (\n                                <Loader2 className=\"size-4 animate-spin\" />\n                              ) : (\n                                <Trash2 className=\"size-4\" />\n                              )}\n                              Uninstall\n                            </button>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  );\n                })}\n              </ul>\n              {hasMore && (\n                <div className=\"flex justify-center pt-6\">\n                  <button\n                    type=\"button\"\n                    onClick={loadMore}\n                    disabled={loading}\n                    className=\"rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n                  >\n                    {loading ? 'Loading…' : 'Load more'}\n                  </button>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </main>\n\n      <AlertDialog\n        open={pendingUninstall !== null}\n        onOpenChange={(open) => !open && setPendingUninstall(null)}\n      >\n        <AlertDialogContent className=\"max-w-md\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Uninstall app</AlertDialogTitle>\n            <AlertDialogDescription>\n              {pendingUninstall && (\n                <>\n                  Remove product{' '}\n                  <span className=\"font-medium text-text-primary\">\n                    {pendingUninstall.productId}\n                  </span>{' '}\n                  from workspace{' '}\n                  <span className=\"font-medium text-text-primary\">\n                    {pendingUninstall.workspaceName ?? pendingUninstall.workspaceId}\n                  </span>\n                  ?\n                </>\n              )}\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel onClick={() => setPendingUninstall(null)}>Cancel</AlertDialogCancel>\n            <AlertDialogAction\n              className=\"bg-status-error-bg text-status-error-text hover:bg-status-error-bg-emphasis\"\n              onClick={() => pendingUninstall && handleUninstall(pendingUninstall)}\n            >\n              Uninstall\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </div>\n  );\n};\n"],"mappings":"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"}