npm - @burdenoff/microfe-store - Versions diffs - 2026.625.4 → 2026.626.1 - Mend

@burdenoff/microfe-store 2026.625.4 → 2026.626.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (184) hide show

package/dist/pages/InstalledAppsPage.js CHANGED Viewed

@@ -4,11 +4,12 @@ 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, Settings2 as f, Trash2 as p } from "lucide-react";
-import { 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, Trash2 as f } from "lucide-react";
+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, IllustratedEmptyState as T, PagePurpose as E } from "@burdenoff/fe-libs/ui";
 //#region src/pages/InstalledAppsPage.tsx
-var _ = [
+var D = [
 	{
 		label: "All",
 		value: "all"
@@ -37,41 +38,41 @@ var _ = [
 		label: "Uninstalled",
 		value: r.Uninstalled
 	}
-], 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]) });
+], O = (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", k = () => {
+	let k = g(), { basePath: A, workspaceId: j } = e(), { t: M } = o(), [N, P] = a("all"), [F, I] = a(null), [L, R] = a(null), { installations: z, totalCount: B, hasMore: V, loading: H, error: U, uninstall: W, uninstallingIds: G, refetch: K, loadMore: q } = n({ filter: i(() => N === "all" ? void 0 : { status: N }, [N]) });
 	t({
-		variables: { workspaceId: x ?? "" },
-		skip: !x,
+		variables: { workspaceId: j ?? "" },
+		skip: !j,
 		onData: () => {
-			I();
+			K();
 		},
 		onError: (e) => {
 			console.warn("InstallationStatusUpdated subscription error:", e.message);
 		}
 	});
-	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);
+	let J = i(() => [...z].sort((e, t) => t.installedAt.localeCompare(e.installedAt)), [z]), Y = () => {
+		k(`${A}/marketplace`);
+	}, X = async (e) => {
+		I(null), await W(e, "User requested uninstall from store UI") || I("Could not uninstall. Try again."), R(null);
 	};
 	return /* @__PURE__ */ h("div", {
 		className: "flex h-full flex-col",
 		children: [
 			/* @__PURE__ */ m("header", {
-				className: "border-b border-border-default bg-bg-surface px-6 py-4",
+				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__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
 						className: "text-2xl font-bold text-text-primary",
-						children: S("pages.installed.title", { defaultValue: "Installed Apps" })
+						children: M("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: z,
+						onClick: Y,
 						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: S("pages.installed.installNew", { defaultValue: "Install New App" }) })]
+						children: [/* @__PURE__ */ m(u, { className: "size-5" }), /* @__PURE__ */ m("span", { children: M("pages.installed.installNew", { defaultValue: "Install New App" }) })]
 					})]
 				})
 			}),
@@ -80,33 +81,37 @@ var _ = [
 				children: /* @__PURE__ */ h("div", {
 					className: "mx-auto max-w-6xl",
 					children: [
+						/* @__PURE__ */ m(E, {
+							className: "mb-4",
+							children: "Every app you install into a workspace lives here. Use this page to check whether an app is active, healthy, or failed, jump into its settings, or remove apps a workspace no longer needs — keeping each workspace's installed surface lean and under control."
+						}),
 						/* @__PURE__ */ h("div", {
 							className: "mb-4 flex flex-wrap items-center gap-2",
-							children: [_.map((e) => /* @__PURE__ */ m("button", {
+							children: [D.map((e) => /* @__PURE__ */ m("button", {
 								type: "button",
-								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"}`,
+								onClick: () => P(e.value),
+								className: `cursor-pointer rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${N === 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: () => I(),
+								onClick: () => K(),
 								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"]
 							})]
 						}),
-						T && /* @__PURE__ */ m("div", {
+						F && /* @__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: T
+							children: F
 						}),
-						M ? /* @__PURE__ */ m("output", {
+						H ? /* @__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"
 							})
-						}) : N ? /* @__PURE__ */ h("div", {
+						}) : U ? /* @__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: [
@@ -117,36 +122,24 @@ var _ = [
 								}),
 								/* @__PURE__ */ m("p", {
 									className: "mt-2 text-sm text-text-muted",
-									children: N.message
+									children: U.message
 								}),
 								/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => I(),
+									onClick: () => K(),
 									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"
 								})
 							]
-						}) : R.length === 0 ? /* @__PURE__ */ m("div", {
-							className: "flex items-center justify-center py-16",
-							children: /* @__PURE__ */ h("div", {
-								className: "text-center",
-								children: [
-									/* @__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__ */ m("p", {
-										className: "mb-4 text-sm text-text-muted",
-										children: "Browse the marketplace to install your first app"
-									}),
-									/* @__PURE__ */ m("button", {
-										type: "button",
-										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"
-									})
-								]
+						}) : J.length === 0 ? /* @__PURE__ */ m(T, {
+							illustration: "empty-generic",
+							title: N === "all" ? "No apps installed" : "No apps match this filter",
+							description: N === "all" ? "Browse the marketplace to install your first app into a workspace." : "Try a different status filter, or browse the marketplace to install something new.",
+							action: /* @__PURE__ */ m("button", {
+								type: "button",
+								onClick: Y,
+								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__ */ h("div", {
 							className: "flex flex-col gap-y-4",
@@ -155,18 +148,18 @@ var _ = [
 									"aria-live": "polite",
 									className: "text-sm text-text-muted",
 									children: [
-										A,
+										B,
 										" installation",
-										A === 1 ? "" : "s",
+										B === 1 ? "" : "s",
 										" found"
 									]
 								}),
 								/* @__PURE__ */ m("ul", {
 									className: "flex flex-col gap-y-4",
-									children: R.map((e) => {
-										let t = F.has(`${e.workspaceId}:${e.productId}`);
+									children: J.map((e) => {
+										let t = G.has(`${e.workspaceId}:${e.productId}`);
 										return /* @__PURE__ */ m("li", {
-											className: "rounded-xl border border-border-default bg-bg-surface p-4",
+											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__ */ h("div", {
@@ -187,7 +180,7 @@ var _ = [
 															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 ${v(e.status)}`,
+																	className: `rounded-full px-2 py-1 font-medium ${O(e.status)}`,
 																	children: e.status
 																}),
 																e.version && /* @__PURE__ */ h("span", { children: ["v", e.version] }),
@@ -200,28 +193,22 @@ var _ = [
 													children: [
 														/* @__PURE__ */ m("button", {
 															type: "button",
-															onClick: () => y(`${b}/installed/${e.id}`),
+															onClick: () => k(`${A}/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: () => y(`${b}/marketplace/product/${e.productId}`),
+															onClick: () => k(`${A}/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: () => O(e),
+															onClick: () => R(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(p, { className: "size-4" }), "Uninstall"]
+															children: [t ? /* @__PURE__ */ m(c, { className: "size-4 animate-spin" }) : /* @__PURE__ */ m(f, { className: "size-4" }), "Uninstall"]
 														})
 													]
 												})]
@@ -229,14 +216,14 @@ var _ = [
 										}, e.id);
 									})
 								}),
-								j && /* @__PURE__ */ m("div", {
+								V && /* @__PURE__ */ m("div", {
 									className: "flex justify-center pt-6",
 									children: /* @__PURE__ */ m("button", {
 										type: "button",
-										onClick: L,
-										disabled: M,
+										onClick: q,
+										disabled: H,
 										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: M ? "Loading…" : "Load more"
+										children: H ? "Loading…" : "Load more"
 									})
 								})
 							]
@@ -244,64 +231,40 @@ var _ = [
 					]
 				})
 			}),
-			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"
+			/* @__PURE__ */ m(_, {
+				open: L !== null,
+				onOpenChange: (e) => !e && R(null),
+				children: /* @__PURE__ */ h(b, {
+					className: "max-w-md",
+					children: [/* @__PURE__ */ h(C, { children: [/* @__PURE__ */ m(w, { children: "Uninstall app" }), /* @__PURE__ */ m(x, { children: L && /* @__PURE__ */ h(p, { children: [
+						"Remove product",
+						" ",
+						/* @__PURE__ */ m("span", {
+							className: "font-medium text-text-primary",
+							children: L.productId
 						}),
-						/* @__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
-								}),
-								"?"
-							]
+						" ",
+						"from workspace",
+						" ",
+						/* @__PURE__ */ m("span", {
+							className: "font-medium text-text-primary",
+							children: L.workspaceName ?? L.workspaceId
 						}),
-						/* @__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"
-							})]
-						})
-					]
-				})]
+						"?"
+					] }) })] }), /* @__PURE__ */ h(S, { children: [/* @__PURE__ */ m(y, {
+						onClick: () => R(null),
+						children: "Cancel"
+					}), /* @__PURE__ */ m(v, {
+						className: "bg-status-error-bg text-status-error-text hover:bg-status-error-bg-emphasis",
+						onClick: () => L && X(L),
+						children: "Uninstall"
+					})] })]
+				})
 			})
 		]
 	});
 };
 //#endregion
-export { y as InstalledAppsPage };
+export { k as InstalledAppsPage };
 //# sourceMappingURL=InstalledAppsPage.js.map

package/dist/pages/InstalledAppsPage.js.map CHANGED Viewed

	@@ -1 +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, 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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"}
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 PagePurpose,\n IllustratedEmptyState,\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 <PagePurpose className=\"mb-4\">\n Every app you install into a workspace lives here. Use this page to check whether an app\n is active, healthy, or failed, jump into its settings, or remove apps a workspace no\n longer needs — keeping each workspace's installed surface lean and under control.\n </PagePurpose>\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 <IllustratedEmptyState\n illustration=\"empty-generic\"\n title={selectedStatus === 'all' ? 'No apps installed' : 'No apps match this filter'}\n description={\n selectedStatus === 'all'\n ? 'Browse the marketplace to install your first app into a workspace.'\n : 'Try a different status filter, or browse the marketplace to install something new.'\n }\n action={\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 }\n />\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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"}