@burdenoff/microfe-store 2026.625.1 → 2026.625.2

package/dist/pages/InstalledAppsPage.js

@@ -4,12 +4,11 @@ import { useInstallations as n } from "../hooks/useInstallations.js";
 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 { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { AlertCircle as s, Loader2 as c, Package as l, Plus as u, RefreshCw as d, Settings2 as f, Trash2 as p } from "lucide-react";
+import { 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 T = [
+var _ = [
 	{
 		label: "All",
 		value: "all"
@@ -38,41 +37,41 @@ var T = [
 		label: "Uninstalled",
 		value: r.Uninstalled
 	}
-], 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]) });
+], v = (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", y = () => {
+	let y = g(), { basePath: b, workspaceId: x } = e(), { t: S } = o(), [C, w] = a("all"), [T, E] = a(null), [D, O] = a(null), { installations: k, totalCount: A, hasMore: j, loading: M, error: N, uninstall: P, uninstallingIds: F, refetch: I, loadMore: L } = n({ filter: i(() => C === "all" ? void 0 : { status: C }, [C]) });
 	t({
-		variables: { workspaceId: k ?? "" },
-		skip: !k,
+		variables: { workspaceId: x ?? "" },
+		skip: !x,
 		onData: () => {
-			W();
+			I();
 		},
 		onError: (e) => {
 			console.warn("InstallationStatusUpdated subscription error:", e.message);
 		}
 	});
-	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);
+	let R = i(() => [...k].sort((e, t) => t.installedAt.localeCompare(e.installedAt)), [k]), z = () => {
+		y(`${b}/marketplace`);
+	}, B = async (e) => {
+		E(null), await P(e, "User requested uninstall from store UI") || E("Could not uninstall. Try again."), O(null);
 	};
 	return /* @__PURE__ */ h("div", {
 		className: "flex h-full flex-col",
 		children: [
 			/* @__PURE__ */ m("header", {
-				className: "border-b border-border-seam bg-bg-surface px-6 py-4",
+				className: "border-b border-border-default bg-bg-surface px-6 py-4",
 				children: /* @__PURE__ */ h("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
 						className: "text-2xl font-bold text-text-primary",
-						children: A("pages.installed.title", { defaultValue: "Installed Apps" })
+						children: S("pages.installed.title", { defaultValue: "Installed Apps" })
 					}), /* @__PURE__ */ m("p", {
 						className: "text-sm text-text-muted",
 						children: "Manage your installed applications"
 					})] }), /* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: q,
+						onClick: z,
 						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__ */ m(u, { className: "size-5" }), /* @__PURE__ */ m("span", { children: A("pages.installed.installNew", { defaultValue: "Install New App" }) })]
+						children: [/* @__PURE__ */ m(u, { className: "size-5" }), /* @__PURE__ */ m("span", { children: S("pages.installed.installNew", { defaultValue: "Install New App" }) })]
 					})]
 				})
 			}),
@@ -83,31 +82,31 @@ var T = [
 					children: [
 						/* @__PURE__ */ h("div", {
 							className: "mb-4 flex flex-wrap items-center gap-2",
-							children: [T.map((e) => /* @__PURE__ */ m("button", {
+							children: [_.map((e) => /* @__PURE__ */ m("button", {
 								type: "button",
-								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"}`,
+								onClick: () => w(e.value),
+								className: `cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${C === 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__ */ h("button", {
 								type: "button",
-								onClick: () => W(),
+								onClick: () => I(),
 								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__ */ m(d, { className: "size-4" }), "Refresh"]
 							})]
 						}),
-						N && /* @__PURE__ */ m("div", {
+						T && /* @__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: N
+							children: T
 						}),
-						B ? /* @__PURE__ */ m("output", {
+						M ? /* @__PURE__ */ m("output", {
 							"aria-label": "Loading installed apps",
 							className: "flex items-center justify-center py-16",
 							children: /* @__PURE__ */ m(c, {
 								className: "size-8 animate-spin text-text-muted",
 								"aria-hidden": "true"
 							})
-						}) : V ? /* @__PURE__ */ h("div", {
+						}) : N ? /* @__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: [
@@ -118,16 +117,16 @@ var T = [
 								}),
 								/* @__PURE__ */ m("p", {
 									className: "mt-2 text-sm text-text-muted",
-									children: V.message
+									children: N.message
 								}),
 								/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => W(),
+									onClick: () => I(),
 									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"
 								})
 							]
-						}) : K.length === 0 ? /* @__PURE__ */ m("div", {
+						}) : R.length === 0 ? /* @__PURE__ */ m("div", {
 							className: "flex items-center justify-center py-16",
 							children: /* @__PURE__ */ h("div", {
 								className: "text-center",
@@ -143,7 +142,7 @@ var T = [
 									}),
 									/* @__PURE__ */ m("button", {
 										type: "button",
-										onClick: q,
+										onClick: z,
 										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"
 									})
@@ -156,18 +155,18 @@ var T = [
 									"aria-live": "polite",
 									className: "text-sm text-text-muted",
 									children: [
-										R,
+										A,
 										" installation",
-										R === 1 ? "" : "s",
+										A === 1 ? "" : "s",
 										" found"
 									]
 								}),
 								/* @__PURE__ */ m("ul", {
 									className: "flex flex-col gap-y-4",
-									children: K.map((e) => {
-										let t = U.has(`${e.workspaceId}:${e.productId}`);
+									children: R.map((e) => {
+										let t = F.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)]",
+											className: "rounded-xl border border-border-default bg-bg-surface p-4",
 											children: /* @__PURE__ */ h("div", {
 												className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 												children: [/* @__PURE__ */ h("div", {
@@ -188,7 +187,7 @@ var T = [
 															className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-text-muted",
 															children: [
 																/* @__PURE__ */ m("span", {
-																	className: `rounded-full px-2 py-1 font-medium ${E(e.status)}`,
+																	className: `rounded-full px-2 py-1 font-medium ${v(e.status)}`,
 																	children: e.status
 																}),
 																e.version && /* @__PURE__ */ h("span", { children: ["v", e.version] }),
@@ -201,22 +200,28 @@ var T = [
 													children: [
 														/* @__PURE__ */ m("button", {
 															type: "button",
-															onClick: () => D(`${O}/installed/${e.id}`),
+															onClick: () => y(`${b}/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__ */ h("button", {
+															type: "button",
+															onClick: () => y(`${b}/installed/${e.id}/settings`),
+															className: "cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+															children: [/* @__PURE__ */ m(f, { className: "size-4" }), "Configure"]
+														}),
 														/* @__PURE__ */ m("button", {
 															type: "button",
-															onClick: () => D(`${O}/marketplace/product/${e.productId}`),
+															onClick: () => y(`${b}/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__ */ h("button", {
 															type: "button",
-															onClick: () => I(e),
+															onClick: () => O(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__ */ m(c, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(f, { className: "size-4" }), "Uninstall"]
+															children: [t ? /* @__PURE__ */ m(c, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(p, { className: "size-4" }), "Uninstall"]
 														})
 													]
 												})]
@@ -224,14 +229,14 @@ var T = [
 										}, e.id);
 									})
 								}),
-								z && /* @__PURE__ */ m("div", {
+								j && /* @__PURE__ */ m("div", {
 									className: "flex justify-center pt-6",
 									children: /* @__PURE__ */ m("button", {
 										type: "button",
-										onClick: G,
-										disabled: B,
+										onClick: L,
+										disabled: M,
 										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: B ? "Loading…" : "Load more"
+										children: M ? "Loading…" : "Load more"
 									})
 								})
 							]
@@ -239,40 +244,64 @@ var T = [
 					]
 				})
 			}),
-			/* @__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
+			D && /* @__PURE__ */ h("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+				children: [/* @__PURE__ */ m("button", {
+					type: "button",
+					"aria-label": "Cancel uninstall",
+					className: "absolute inset-0 bg-bg-overlay/50",
+					onClick: () => O(null)
+				}), /* @__PURE__ */ h("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__ */ m("h2", {
+							id: "installed-apps-uninstall-title",
+							className: "text-lg font-semibold text-text-primary",
+							children: "Uninstall app"
 						}),
-						" ",
-						"from workspace",
-						" ",
-						/* @__PURE__ */ m("span", {
-							className: "font-medium text-text-primary",
-							children: F.workspaceName ?? F.workspaceId
+						/* @__PURE__ */ h("p", {
+							className: "mt-2 text-sm text-text-muted",
+							children: [
+								"Remove product",
+								" ",
+								/* @__PURE__ */ m("span", {
+									className: "font-medium text-text-primary",
+									children: D.productId
+								}),
+								" ",
+								"from workspace",
+								" ",
+								/* @__PURE__ */ m("span", {
+									className: "font-medium text-text-primary",
+									children: D.workspaceName ?? D.workspaceId
+								}),
+								"?"
+							]
 						}),
-						"?"
-					] }) })] }), /* @__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"
-					})] })]
-				})
+						/* @__PURE__ */ h("div", {
+							className: "mt-6 flex flex-wrap justify-end gap-3",
+							children: [/* @__PURE__ */ m("button", {
+								type: "button",
+								onClick: () => O(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__ */ m("button", {
+								type: "button",
+								onClick: () => B(D),
+								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"
+							})]
+						})
+					]
+				})]
 			})
 		]
 	});
 };
 //#endregion
-export { D as InstalledAppsPage };
+export { y 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 {\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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"}
+{"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, Settings2 } 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}/installed/${installation.id}/settings`)\n                            }\n                            className=\"cursor-pointer inline-flex items-center gap-1.5 rounded-lg border border-border-default px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n                          >\n                            <Settings2 className=\"size-4\" />\n                            Configure\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":"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"}