@burdenoff/microfe-conversations 2026.624.1 → 2026.625.2

package/dist/conversations/pages/AdminConversationsLandingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdminConversationsLandingPage.js","names":[],"sources":["../../../src/conversations/pages/AdminConversationsLandingPage.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useMemo } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport {\n  MessageCircle,\n  ShieldCheck,\n  ListChecks,\n  Activity,\n  Package,\n  ChevronRight,\n} from \"lucide-react\";\nimport { useTr } from \"../utils/i18n\";\n\ninterface AdminSectionDefinition {\n  id: string;\n  /** i18n key used for the card label */\n  labelKey: string;\n  /** English fallback rendered when the i18n key is not resolved */\n  labelFallback: string;\n  /** i18n key used for the card description */\n  descriptionKey: string;\n  /** English fallback for the description */\n  descriptionFallback: string;\n  /** Route path relative to the admin basePath */\n  path: string;\n  icon: ReactNode;\n}\n\n// Module-scoped section catalogue. The icon JSX is stable (purely presentational,\n// no context or dynamic props) so constructing once at parse time avoids rebuilding\n// four lucide nodes on every render. If icons ever need to respond to context\n// (theme, RBAC), move the icon field into the useMemo mapper below.\nconst SECTION_DEFINITIONS: AdminSectionDefinition[] = [\n  {\n    id: \"moderation\",\n    labelKey: \"conversations.admin.moderation\",\n    labelFallback: \"Moderation\",\n    descriptionKey: \"conversations.admin.moderationDescription\",\n    descriptionFallback:\n      \"Reported and flagged messages, moderation actions, and reviewer assignments.\",\n    path: \"moderation\",\n    icon: <ShieldCheck className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"bulk\",\n    labelKey: \"conversations.admin.bulkOperations\",\n    labelFallback: \"Bulk Operations\",\n    descriptionKey: \"conversations.admin.bulkOperationsDescription\",\n    descriptionFallback:\n      \"Bulk archive / unarchive, participant edits, and cross-conversation actions.\",\n    path: \"bulk\",\n    icon: <ListChecks className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"audit\",\n    labelKey: \"conversations.admin.auditLog\",\n    labelFallback: \"Audit Log\",\n    descriptionKey: \"conversations.admin.auditLogDescription\",\n    descriptionFallback:\n      \"Activity stream for admin / moderator actions on workspace conversations.\",\n    path: \"audit\",\n    icon: <Activity className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"apps\",\n    labelKey: \"conversations.admin.appInstallations\",\n    labelFallback: \"App Installations\",\n    descriptionKey: \"conversations.admin.appInstallationsDescription\",\n    descriptionFallback:\n      \"Install, configure, and remove conversation apps and integrations.\",\n    path: \"apps\",\n    icon: <Package className=\"size-5\" aria-hidden=\"true\" />,\n  },\n];\n\n/**\n * Admin-facing landing page for the Conversations microfrontend.\n *\n * Lightweight overview + section directory. Each card links to its canonical\n * sub-route (`/moderation`, `/bulk`, `/audit`, `/apps`) for the API-backed\n * admin surfaces.\n */\nexport function AdminConversationsLandingPage() {\n  const tr = useTr();\n\n  const sections = useMemo(\n    () =>\n      SECTION_DEFINITIONS.map((section) => ({\n        ...section,\n        label: tr(section.labelKey, section.labelFallback),\n        description: tr(section.descriptionKey, section.descriptionFallback),\n      })),\n    [tr],\n  );\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"border-b border-border-subtle px-6 py-4\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"p-2 rounded-md bg-bg-sunken\">\n            <MessageCircle\n              className=\"size-5 text-text-secondary\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <div>\n            <h1 className=\"text-lg font-semibold text-text-primary\">\n              {tr(\"conversations.admin.landingTitle\", \"Conversations admin\")}\n            </h1>\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\n                \"conversations.admin.landingDescription\",\n                \"Governance tools for workspace conversations. Select a section below to continue.\",\n              )}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex-1 min-h-0 overflow-auto p-6\">\n        <div className=\"grid gap-3 sm:grid-cols-2 max-w-3xl\">\n          {sections.map((section) => (\n            <Link\n              key={section.id}\n              to={section.path}\n              className=\"group flex items-start gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4 transition-colors hover:border-border-subtle hover:bg-accent\"\n            >\n              <div className=\"p-2 rounded-md bg-bg-sunken text-text-secondary group-hover:text-text-primary\">\n                {section.icon}\n              </div>\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <span className=\"text-sm font-medium text-text-primary\">\n                    {section.label}\n                  </span>\n                  <ChevronRight\n                    className=\"size-4 text-text-secondary\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n                <p className=\"mt-1 text-xs text-text-secondary\">\n                  {section.description}\n                </p>\n              </div>\n            </Link>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAgCA,IAAM,IAAgD;CACpD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAa,WAAU;GAAS,eAAY;GAAS,CAAA;EAC5D;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAY,WAAU;GAAS,eAAY;GAAS,CAAA;EAC3D;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAU,WAAU;GAAS,eAAY;GAAS,CAAA;EACzD;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAS,WAAU;GAAS,eAAY;GAAS,CAAA;EACxD;CACF;AASD,SAAgB,IAAgC;CAC9C,IAAM,IAAK,GAAO,EAEZ,IAAW,QAEb,EAAoB,KAAK,OAAa;EACpC,GAAG;EACH,OAAO,EAAG,EAAQ,UAAU,EAAQ,cAAc;EAClD,aAAa,EAAG,EAAQ,gBAAgB,EAAQ,oBAAoB;EACrE,EAAE,EACL,CAAC,EAAG,CACL;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,WAAU;MACV,eAAY;MACZ,CAAA;KACE,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,oCAAoC,sBAAsB;KAC3D,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,0CACA,oFACD;KACC,CAAA,CACA,EAAA,CAAA,CACF;;GACF,CAAA,EACN,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,KAAK,MACb,kBAAC,GAAD;KAEE,IAAI,EAAQ;KACZ,WAAU;eAHZ,CAKE,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAQ;MACL,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAQ;QACJ,CAAA,EACP,kBAAC,GAAD;QACE,WAAU;QACV,eAAY;QACZ,CAAA,CACE;UACN,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAQ;OACP,CAAA,CACA;QACD;OArBA,EAAQ,GAqBR,CACP;IACE,CAAA;GACF,CAAA,CACF"}
+{"version":3,"file":"AdminConversationsLandingPage.js","names":[],"sources":["../../../src/conversations/pages/AdminConversationsLandingPage.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useMemo } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport {\n  MessageCircle,\n  ShieldCheck,\n  ListChecks,\n  Activity,\n  Package,\n  ChevronRight,\n} from \"lucide-react\";\nimport { GlassCard, EmphasisPanel, GradientText } from \"@burdenoff/fe-libs/ui\";\nimport { useTr } from \"../utils/i18n\";\n\ninterface AdminSectionDefinition {\n  id: string;\n  /** i18n key used for the card label */\n  labelKey: string;\n  /** English fallback rendered when the i18n key is not resolved */\n  labelFallback: string;\n  /** i18n key used for the card description */\n  descriptionKey: string;\n  /** English fallback for the description */\n  descriptionFallback: string;\n  /** Route path relative to the admin basePath */\n  path: string;\n  icon: ReactNode;\n  /** The single featured section — gets the glowing glass treatment. */\n  featured?: boolean;\n}\n\n// Module-scoped section catalogue. The icon JSX is stable (purely presentational,\n// no context or dynamic props) so constructing once at parse time avoids rebuilding\n// four lucide nodes on every render. If icons ever need to respond to context\n// (theme, RBAC), move the icon field into the useMemo mapper below.\nconst SECTION_DEFINITIONS: AdminSectionDefinition[] = [\n  {\n    id: \"moderation\",\n    labelKey: \"conversations.admin.moderation\",\n    labelFallback: \"Moderation\",\n    descriptionKey: \"conversations.admin.moderationDescription\",\n    descriptionFallback:\n      \"Reported and flagged messages, moderation actions, and reviewer assignments.\",\n    path: \"moderation\",\n    icon: <ShieldCheck className=\"size-5\" aria-hidden=\"true\" />,\n    featured: true,\n  },\n  {\n    id: \"bulk\",\n    labelKey: \"conversations.admin.bulkOperations\",\n    labelFallback: \"Bulk Operations\",\n    descriptionKey: \"conversations.admin.bulkOperationsDescription\",\n    descriptionFallback:\n      \"Bulk archive / unarchive, participant edits, and cross-conversation actions.\",\n    path: \"bulk\",\n    icon: <ListChecks className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"audit\",\n    labelKey: \"conversations.admin.auditLog\",\n    labelFallback: \"Audit Log\",\n    descriptionKey: \"conversations.admin.auditLogDescription\",\n    descriptionFallback:\n      \"Activity stream for admin / moderator actions on workspace conversations.\",\n    path: \"audit\",\n    icon: <Activity className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"apps\",\n    labelKey: \"conversations.admin.appInstallations\",\n    labelFallback: \"App Installations\",\n    descriptionKey: \"conversations.admin.appInstallationsDescription\",\n    descriptionFallback:\n      \"Install, configure, and remove conversation apps and integrations.\",\n    path: \"apps\",\n    icon: <Package className=\"size-5\" aria-hidden=\"true\" />,\n  },\n];\n\n/**\n * Admin-facing landing page for the Conversations microfrontend.\n *\n * Lightweight overview + section directory. Each card links to its canonical\n * sub-route (`/moderation`, `/bulk`, `/audit`, `/apps`) for the API-backed\n * admin surfaces.\n */\nexport function AdminConversationsLandingPage() {\n  const tr = useTr();\n\n  const sections = useMemo(\n    () =>\n      SECTION_DEFINITIONS.map((section) => ({\n        ...section,\n        label: tr(section.labelKey, section.labelFallback),\n        description: tr(section.descriptionKey, section.descriptionFallback),\n      })),\n    [tr],\n  );\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex-1 min-h-0 overflow-auto p-4 sm:p-6\">\n        <div className=\"mx-auto w-full max-w-3xl space-y-6\">\n          {/* Hero / summary zone — the single emphasis panel on this page. */}\n          <EmphasisPanel>\n            <div className=\"flex items-start gap-3\">\n              <div className=\"p-2 rounded-lg bg-gloss-card text-text-secondary border border-border-seam\">\n                <MessageCircle className=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <div className=\"min-w-0\">\n                <h1 className=\"text-lg font-semibold text-text-primary\">\n                  <GradientText>\n                    {tr(\n                      \"conversations.admin.landingTitle\",\n                      \"Conversations admin\",\n                    )}\n                  </GradientText>\n                </h1>\n                <p className=\"mt-1 text-sm text-text-secondary\">\n                  {tr(\n                    \"conversations.admin.landingDescription\",\n                    \"Governance tools for workspace conversations. Select a section below to continue.\",\n                  )}\n                </p>\n              </div>\n            </div>\n          </EmphasisPanel>\n\n          <div className=\"grid gap-3 sm:grid-cols-2\">\n            {sections.map((section) => (\n              <Link\n                key={section.id}\n                to={section.path}\n                className=\"group rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n              >\n                <GlassCard\n                  treatment=\"glass\"\n                  glow={section.featured}\n                  className=\"flex items-start gap-3 border-border-seam p-4 shadow-[var(--shadow-pop)]\"\n                >\n                  <div className=\"p-2 rounded-md bg-bg-sunken text-text-secondary group-hover:text-text-primary\">\n                    {section.icon}\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"text-sm font-medium text-text-primary\">\n                        {section.label}\n                      </span>\n                      <ChevronRight\n                        className=\"size-4 text-text-secondary\"\n                        aria-hidden=\"true\"\n                      />\n                    </div>\n                    <p className=\"mt-1 text-xs text-text-secondary\">\n                      {section.description}\n                    </p>\n                  </div>\n                </GlassCard>\n              </Link>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAmCA,IAAM,IAAgD;CACpD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAa,WAAU;GAAS,eAAY;GAAS,CAAA;EAC3D,UAAU;EACX;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAY,WAAU;GAAS,eAAY;GAAS,CAAA;EAC3D;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAU,WAAU;GAAS,eAAY;GAAS,CAAA;EACzD;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAS,WAAU;GAAS,eAAY;GAAS,CAAA;EACxD;CACF;AASD,SAAgB,IAAgC;CAC9C,IAAM,IAAK,GAAO,EAEZ,IAAW,QAEb,EAAoB,KAAK,OAAa;EACpC,GAAG;EACH,OAAO,EAAG,EAAQ,UAAU,EAAQ,cAAc;EAClD,aAAa,EAAG,EAAQ,gBAAgB,EAAQ,oBAAoB;EACrE,EAAE,EACL,CAAC,EAAG,CACL;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAe,WAAU;OAAS,eAAY;OAAS,CAAA;MACnD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBACZ,kBAAC,GAAD,EAAA,UACG,EACC,oCACA,sBACD,EACY,CAAA;OACZ,CAAA,EACL,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,0CACA,oFACD;OACC,CAAA,CACA;QACF;QACQ,CAAA,EAEhB,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAS,KAAK,MACb,kBAAC,GAAD;MAEE,IAAI,EAAQ;MACZ,WAAU;gBAEV,kBAAC,GAAD;OACE,WAAU;OACV,MAAM,EAAQ;OACd,WAAU;iBAHZ,CAKE,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAQ;QACL,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,QAAD;UAAM,WAAU;oBACb,EAAQ;UACJ,CAAA,EACP,kBAAC,GAAD;UACE,WAAU;UACV,eAAY;UACZ,CAAA,CACE;YACN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAQ;SACP,CAAA,CACA;UACI;;MACP,EA3BA,EAAQ,GA2BR,CACP;KACE,CAAA,CACF;;GACF,CAAA;EACF,CAAA"}

package/dist/conversations/pages/ConversationAdminPages.js

@@ -8,8 +8,9 @@ import { Activity as c, Archive as l, CheckCircle2 as u, Package as d, ShieldChe
 import { gql as m } from "@apollo/client";
 import { useMutation as h, useQuery as g } from "@apollo/client/react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { Button as y, CTAOverflowMenu as b, GlassCard as x, ShowMore as S } from "@burdenoff/fe-libs/ui";
 //#region src/conversations/pages/ConversationAdminPages.tsx
-var y = m`
+var C = m`
   query ConversationAdminMessageReports(
     $first: Int
     $filter: MessageReportFilter
@@ -37,7 +38,7 @@ var y = m`
       }
     }
   }
-`, b = m`
+`, w = m`
   mutation ConversationAdminResolveMessageReport(
     $input: ResolveMessageReportInput!
   ) {
@@ -52,7 +53,7 @@ var y = m`
       }
     }
   }
-`, x = m`
+`, T = m`
   query ConversationAdminBulkConversations(
     $first: Int
     $filter: ConversationFilter
@@ -69,7 +70,7 @@ var y = m`
       }
     }
   }
-`, S = m`
+`, E = m`
   mutation ConversationAdminBulkUpdate(
     $input: BulkConversationOperationInput!
   ) {
@@ -85,7 +86,7 @@ var y = m`
       }
     }
   }
-`, C = m`
+`, D = m`
   query ConversationAdminAuditLog($filter: ActivityLogFilter) {
     getActivities(filter: $filter) {
       id
@@ -97,7 +98,7 @@ var y = m`
       timestamp
     }
   }
-`, w = m`
+`, O = m`
   query ConversationAdminAppInstallations($workspaceId: ID) {
     appInstallations(workspaceId: $workspaceId) {
       id
@@ -111,7 +112,7 @@ var y = m`
       updatedAt
     }
   }
-`, T = m`
+`, k = m`
   mutation ConversationAdminInstallApp($input: InstallAppInput!) {
     installApp(input: $input) {
       id
@@ -121,7 +122,7 @@ var y = m`
       installedAt
     }
   }
-`, E = m`
+`, A = m`
   mutation ConversationAdminUpdateAppSettings($id: ID!, $settings: JSON!) {
     updateAppSettings(id: $id, settings: $settings) {
       id
@@ -129,7 +130,7 @@ var y = m`
       updatedAt
     }
   }
-`, D = m`
+`, j = m`
   mutation ConversationAdminUninstallApp($id: ID!) {
     uninstallApp(id: $id) {
       appInstallationId
@@ -137,7 +138,7 @@ var y = m`
     }
   }
 `;
-function O(e) {
+function M(e) {
 	if (typeof e == "string") return e;
 	if (e && typeof e == "object" && "text" in e) {
 		let t = e.text;
@@ -149,27 +150,27 @@ function O(e) {
 		return "Message content unavailable";
 	}
 }
-var k = new Intl.DateTimeFormat(void 0, {
+var N = new Intl.DateTimeFormat(void 0, {
 	dateStyle: "medium",
 	timeStyle: "short"
 });
-function A(e) {
-	return k.format(new Date(e));
+function P(e) {
+	return N.format(new Date(e));
 }
-function j({ children: e }) {
+function F({ children: e }) {
 	return /* @__PURE__ */ _("span", {
 		className: "rounded-full border border-border-subtle bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
 		children: e
 	});
 }
-function M() {
-	let n = t(), { workspaceId: a } = e(), { data: o, loading: s, error: c, refetch: l } = g(y, {
+function I() {
+	let n = t(), { workspaceId: a } = e(), { data: o, loading: s, error: c, refetch: l } = g(C, {
 		variables: {
 			first: 50,
 			filter: { statuses: ["PENDING", "REVIEWING"] }
 		},
 		skip: !a
-	}), [d, { loading: p }] = h(b, { onCompleted: () => void l() }), m = o?.messageReports.edges.map((e) => e.node) ?? [];
+	}), [d, { loading: p }] = h(w, { onCompleted: () => void l() }), m = o?.messageReports.edges.map((e) => e.node) ?? [];
 	return /* @__PURE__ */ v(i, {
 		title: n("conversations.admin.moderationPageTitle", "Moderation queue"),
 		subtitle: n("conversations.admin.moderationPageDescription", "Review reported messages and apply moderator decisions."),
@@ -185,7 +186,8 @@ function M() {
 				icon: /* @__PURE__ */ _(f, {
 					className: "size-6",
 					"aria-hidden": "true"
-				})
+				}),
+				illustration: "empty-generic"
 			}),
 			a && s && /* @__PURE__ */ _("p", {
 				className: "text-sm text-text-secondary",
@@ -201,25 +203,27 @@ function M() {
 				icon: /* @__PURE__ */ _(u, {
 					className: "size-6",
 					"aria-hidden": "true"
-				})
+				}),
+				illustration: "empty-notifications"
 			}),
 			/* @__PURE__ */ _("div", {
 				className: "grid gap-3",
-				children: m.map((e) => /* @__PURE__ */ _("article", {
-					className: "rounded-lg border border-border-subtle bg-bg-surface p-4 shadow-sm",
+				children: m.map((e) => /* @__PURE__ */ _(x, {
+					treatment: "glass",
+					className: "border-border-seam p-4",
 					children: /* @__PURE__ */ v("div", {
 						className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
 						children: [/* @__PURE__ */ v("div", {
-							className: "space-y-2",
+							className: "space-y-2 min-w-0",
 							children: [
 								/* @__PURE__ */ v("div", {
 									className: "flex flex-wrap items-center gap-2",
 									children: [
-										/* @__PURE__ */ _(j, { children: e.status }),
-										e.message.isHidden && /* @__PURE__ */ _(j, { children: "Hidden" }),
+										/* @__PURE__ */ _(F, { children: e.status }),
+										e.message.isHidden && /* @__PURE__ */ _(F, { children: "Hidden" }),
 										/* @__PURE__ */ v("span", {
 											className: "text-xs text-text-secondary",
-											children: ["Reported ", A(e.createdAt)]
+											children: ["Reported ", P(e.createdAt)]
 										})
 									]
 								}),
@@ -228,8 +232,8 @@ function M() {
 									children: e.reason
 								}),
 								/* @__PURE__ */ _("p", {
-									className: "rounded-md bg-bg-sunken p-3 text-sm text-text-secondary",
-									children: O(e.message.content)
+									className: "rounded-md border border-border-seam bg-bg-sunken p-3 text-sm text-text-secondary",
+									children: M(e.message.content)
 								}),
 								/* @__PURE__ */ v("p", {
 									className: "text-xs text-text-secondary",
@@ -246,27 +250,24 @@ function M() {
 									]
 								})
 							]
-						}), /* @__PURE__ */ v("div", {
-							className: "flex flex-wrap gap-2",
-							children: [/* @__PURE__ */ _("button", {
-								type: "button",
+						}), /* @__PURE__ */ _(b, {
+							className: "shrink-0",
+							primary: {
+								label: "Hide and resolve",
 								disabled: p,
-								className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary hover:bg-accent disabled:opacity-50",
-								onClick: () => void d({ variables: { input: {
+								onSelect: () => void d({ variables: { input: {
 									reportId: e.id,
-									action: "DISMISS"
-								} } }),
-								children: "Dismiss"
-							}), /* @__PURE__ */ _("button", {
-								type: "button",
+									action: "HIDE_MESSAGE"
+								} } })
+							},
+							actions: [{
+								label: "Dismiss",
 								disabled: p,
-								className: "rounded-md bg-action-primary-bg px-3 py-2 text-sm text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
-								onClick: () => void d({ variables: { input: {
+								onSelect: () => void d({ variables: { input: {
 									reportId: e.id,
-									action: "HIDE_MESSAGE"
-								} } }),
-								children: "Hide and resolve"
-							})]
+									action: "DISMISS"
+								} } })
+							}]
 						})]
 					})
 				}, e.id))
@@ -274,13 +275,13 @@ function M() {
 		]
 	});
 }
-function N() {
-	let n = t(), { workspaceId: a } = e(), [o, c] = s(() => /* @__PURE__ */ new Set()), [u, d] = s("ARCHIVE"), { data: f, loading: p, error: m, refetch: y } = g(x, {
+function L() {
+	let n = t(), { workspaceId: a } = e(), [o, c] = s(() => /* @__PURE__ */ new Set()), [u, d] = s("ARCHIVE"), { data: f, loading: p, error: m, refetch: b } = g(T, {
 		variables: { first: 100 },
 		skip: !a
-	}), [b, { data: C, loading: w }] = h(S, { onCompleted: () => {
-		c(/* @__PURE__ */ new Set()), y();
-	} }), T = f?.conversations.edges.map((e) => e.node) ?? [], E = (e) => {
+	}), [S, { data: C, loading: w }] = h(E, { onCompleted: () => {
+		c(/* @__PURE__ */ new Set()), b();
+	} }), D = f?.conversations.edges.map((e) => e.node) ?? [], O = (e) => {
 		c((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
@@ -299,7 +300,8 @@ function N() {
 			children: [/* @__PURE__ */ v("select", {
 				value: u,
 				onChange: (e) => d(e.target.value),
-				className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
+				"aria-label": "Bulk action",
+				className: "min-h-11 rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
 				children: [
 					/* @__PURE__ */ _("option", {
 						value: "ARCHIVE",
@@ -314,11 +316,11 @@ function N() {
 						children: "Delete"
 					})
 				]
-			}), /* @__PURE__ */ v("button", {
+			}), /* @__PURE__ */ v(y, {
 				type: "button",
+				size: "sm",
 				disabled: o.size === 0 || w,
-				className: "rounded-md bg-action-primary-bg px-3 py-2 text-sm text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
-				onClick: () => void b({ variables: { input: {
+				onClick: () => void S({ variables: { input: {
 					conversationIds: Array.from(o),
 					action: u
 				} } }),
@@ -332,7 +334,8 @@ function N() {
 				icon: /* @__PURE__ */ _(l, {
 					className: "size-6",
 					"aria-hidden": "true"
-				})
+				}),
+				illustration: "empty-generic"
 			}),
 			a && p && /* @__PURE__ */ _("p", {
 				className: "text-sm text-text-secondary",
@@ -342,25 +345,32 @@ function N() {
 				className: "text-sm text-status-error-text",
 				children: m.message
 			}),
-			C?.bulkUpdateConversations && /* @__PURE__ */ v("div", {
-				className: "rounded-lg border border-border-subtle bg-bg-sunken p-3 text-sm text-text-secondary",
-				children: [
-					C.bulkUpdateConversations.successCount,
-					" succeeded,",
-					" ",
-					C.bulkUpdateConversations.failureCount,
-					" failed."
-				]
+			C?.bulkUpdateConversations && /* @__PURE__ */ v(x, {
+				treatment: "metric",
+				className: "grid grid-cols-2 gap-4 border-border-seam p-4 sm:max-w-md",
+				children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+					className: "text-2xl font-semibold tabular-nums text-status-success-text",
+					children: C.bulkUpdateConversations.successCount
+				}), /* @__PURE__ */ _("p", {
+					className: "text-xs text-text-secondary",
+					children: "Succeeded"
+				})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+					className: "text-2xl font-semibold tabular-nums text-text-primary",
+					children: C.bulkUpdateConversations.failureCount
+				}), /* @__PURE__ */ _("p", {
+					className: "text-xs text-text-secondary",
+					children: "Failed"
+				})] })]
 			}),
 			a && /* @__PURE__ */ _("div", {
-				className: "overflow-hidden rounded-lg border border-border-subtle bg-bg-surface",
-				children: T.map((e) => /* @__PURE__ */ v("label", {
-					className: "flex cursor-pointer items-center gap-3 border-b border-border-subtle px-4 py-3 last:border-b-0 hover:bg-accent",
+				className: "overflow-hidden rounded-lg border border-border-seam bg-bg-surface",
+				children: D.map((e) => /* @__PURE__ */ v("label", {
+					className: "flex min-h-11 cursor-pointer items-center gap-3 border-b border-border-seam px-4 py-3 last:border-b-0 hover:bg-accent",
 					children: [/* @__PURE__ */ _("input", {
 						type: "checkbox",
 						"aria-label": `Select ${e.title || "untitled conversation"}`,
 						checked: o.has(e.id),
-						onChange: () => E(e.id)
+						onChange: () => O(e.id)
 					}), /* @__PURE__ */ v("div", {
 						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ _("p", {
@@ -374,7 +384,7 @@ function N() {
 								e.state,
 								" · Updated",
 								" ",
-								A(e.updatedAt)
+								P(e.updatedAt)
 							]
 						})]
 					})]
@@ -383,8 +393,8 @@ function N() {
 		]
 	});
 }
-function P() {
-	let n = t(), { workspaceId: a } = e(), { data: o, loading: s, error: l } = g(C, {
+function R() {
+	let n = t(), { workspaceId: a } = e(), { data: o, loading: s, error: l } = g(D, {
 		variables: { filter: {
 			workspaceId: a,
 			resourceType: "conversation",
@@ -411,12 +421,14 @@ function P() {
 			}),
 			!s && !l && u.length === 0 && /* @__PURE__ */ _(r, {
 				title: "No activity found",
-				description: "Conversation admin actions will appear here."
+				description: "Conversation admin actions will appear here.",
+				illustration: "empty-data"
 			}),
 			/* @__PURE__ */ _("div", {
 				className: "grid gap-3",
-				children: u.map((e) => /* @__PURE__ */ v("article", {
-					className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+				children: u.map((e) => /* @__PURE__ */ v(x, {
+					treatment: "plain",
+					className: "border-border-seam p-4",
 					children: [
 						/* @__PURE__ */ v("div", {
 							className: "flex flex-wrap items-center justify-between gap-2",
@@ -424,8 +436,8 @@ function P() {
 								className: "text-sm font-medium text-text-primary",
 								children: e.action
 							}), /* @__PURE__ */ _("span", {
-								className: "text-xs text-text-secondary",
-								children: A(e.timestamp)
+								className: "text-xs tabular-nums text-text-secondary",
+								children: P(e.timestamp)
 							})]
 						}),
 						/* @__PURE__ */ _("p", {
@@ -447,20 +459,20 @@ function P() {
 		]
 	});
 }
-function F() {
-	let r = t(), { workspaceId: c } = e(), [l, u] = s(""), [f, m] = s("{}"), [y, b] = s({}), [x, S] = s(null), { data: C, loading: O, error: k, refetch: M } = g(w, {
+function z() {
+	let r = t(), { workspaceId: c } = e(), [l, u] = s(""), [f, m] = s("{}"), [C, w] = s({}), [T, E] = s(null), { data: D, loading: M, error: N, refetch: I } = g(O, {
 		variables: { workspaceId: c },
 		skip: !c
-	}), [N, { loading: P }] = h(T, { onCompleted: () => void M() }), [F, { loading: I }] = h(E, { onCompleted: () => void M() }), [L, { loading: R }] = h(D, { onCompleted: () => void M() }), z = o(() => C?.appInstallations ?? [], [C?.appInstallations]);
+	}), [L, { loading: R }] = h(k, { onCompleted: () => void I() }), [z, { loading: B }] = h(A, { onCompleted: () => void I() }), [V, { loading: H }] = h(j, { onCompleted: () => void I() }), U = o(() => D?.appInstallations ?? [], [D?.appInstallations]);
 	a(() => {
-		b((e) => {
-			if (z.every((t) => e[t.id])) return e;
+		w((e) => {
+			if (U.every((t) => e[t.id])) return e;
 			let t = { ...e };
-			for (let e of z) t[e.id] || (t[e.id] = JSON.stringify(e.settings ?? {}, null, 2));
+			for (let e of U) t[e.id] || (t[e.id] = JSON.stringify(e.settings ?? {}, null, 2));
 			return t;
 		});
-	}, [z]);
-	let B = (e) => {
+	}, [U]);
+	let W = (e) => {
 		try {
 			let t = JSON.parse(e);
 			return t && typeof t == "object" && !Array.isArray(t) ? t : null;
@@ -481,33 +493,33 @@ function F() {
 				title: "Install app",
 				description: "Install a workspace-scoped conversation app by app ID.",
 				children: [/* @__PURE__ */ v("div", {
-					className: "grid gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]",
+					className: "grid gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]",
 					children: [
 						/* @__PURE__ */ _("input", {
 							value: l,
 							onChange: (e) => u(e.target.value),
 							placeholder: "app-id",
 							"aria-label": "App ID",
-							className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
+							className: "min-h-11 rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
 						}),
 						/* @__PURE__ */ _("textarea", {
 							value: f,
 							onChange: (e) => m(e.target.value),
 							rows: 3,
 							"aria-label": "App settings JSON",
-							className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
+							className: "rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
 						}),
-						/* @__PURE__ */ _("button", {
+						/* @__PURE__ */ _(y, {
 							type: "button",
-							disabled: P,
-							className: "rounded-md bg-action-primary-bg px-3 py-2 text-sm text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
+							size: "sm",
+							disabled: R,
 							onClick: () => {
-								let e = B(f);
+								let e = W(f);
 								if (!l.trim() || !e) {
-									S("Enter an app ID and a valid JSON settings object.");
+									E("Enter an app ID and a valid JSON settings object.");
 									return;
 								}
-								S(null), N({ variables: { input: {
+								E(null), L({ variables: { input: {
 									appId: l.trim(),
 									workspaceId: c,
 									settings: e
@@ -516,81 +528,97 @@ function F() {
 							children: "Install"
 						})
 					]
-				}), x && /* @__PURE__ */ _("p", {
+				}), T && /* @__PURE__ */ _("p", {
 					className: "text-sm text-status-error-text",
-					children: x
+					children: T
 				})]
 			}),
-			O && /* @__PURE__ */ _("p", {
+			M && /* @__PURE__ */ _("p", {
 				className: "text-sm text-text-secondary",
 				children: "Loading app installations…"
 			}),
-			k && /* @__PURE__ */ _("p", {
+			N && /* @__PURE__ */ _("p", {
 				className: "text-sm text-status-error-text",
-				children: k.message
+				children: N.message
 			}),
 			/* @__PURE__ */ _("div", {
 				className: "grid gap-3",
-				children: z.map((e) => /* @__PURE__ */ v("article", {
-					className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+				children: U.map((e) => /* @__PURE__ */ v(x, {
+					treatment: "glass",
+					className: "border-border-seam p-4",
 					children: [/* @__PURE__ */ v("div", {
 						className: "flex flex-wrap items-start justify-between gap-3",
-						children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("div", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ _("h3", {
-								className: "text-sm font-semibold text-text-primary",
-								children: e.appId
-							}), /* @__PURE__ */ _(j, { children: e.state })]
-						}), /* @__PURE__ */ v("p", {
-							className: "text-xs text-text-secondary",
-							children: [
-								"Version ",
-								e.appVersion,
-								" · Installed by",
-								" ",
-								e.installedBy,
-								" on",
-								" ",
-								A(e.installedAt)
-							]
-						})] }), /* @__PURE__ */ v("button", {
-							type: "button",
-							disabled: R,
-							className: "inline-flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary hover:bg-accent disabled:opacity-50",
-							onClick: () => void L({ variables: { id: e.id } }),
-							children: [/* @__PURE__ */ _(p, {
-								className: "size-4",
-								"aria-hidden": "true"
-							}), "Uninstall"]
-						})]
-					}), /* @__PURE__ */ v("div", {
-						className: "mt-3 grid gap-2",
-						children: [/* @__PURE__ */ _("textarea", {
-							rows: 5,
-							"aria-label": `Settings for ${e.appId}`,
-							value: y[e.id] ?? "{}",
-							onChange: (t) => b((n) => ({
-								...n,
-								[e.id]: t.target.value
-							})),
-							className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 font-mono text-xs text-text-primary"
-						}), /* @__PURE__ */ _("button", {
-							type: "button",
-							disabled: I,
-							className: "w-fit rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground hover:bg-secondary/90 disabled:opacity-50",
-							onClick: () => {
-								let t = B(y[e.id] ?? "{}");
-								if (!t) {
-									S("Installation settings must be a valid JSON object.");
-									return;
+						children: [/* @__PURE__ */ v("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ v("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ _("h3", {
+									className: "text-sm font-semibold text-text-primary",
+									children: e.appId
+								}), /* @__PURE__ */ _(F, { children: e.state })]
+							}), /* @__PURE__ */ v("p", {
+								className: "text-xs text-text-secondary",
+								children: [
+									"Version ",
+									e.appVersion,
+									" · Installed by",
+									" ",
+									e.installedBy,
+									" on",
+									" ",
+									P(e.installedAt)
+								]
+							})]
+						}), /* @__PURE__ */ _(b, {
+							className: "shrink-0",
+							actions: [{
+								label: "Uninstall",
+								intent: "destructive",
+								disabled: H,
+								icon: /* @__PURE__ */ _(p, {
+									className: "size-4",
+									"aria-hidden": "true"
+								}),
+								onSelect: () => {
+									window.confirm(`Uninstall ${e.appId}? This removes the app and its settings from this workspace.`) && V({ variables: { id: e.id } });
 								}
-								S(null), F({ variables: {
-									id: e.id,
-									settings: t
-								} });
-							},
-							children: "Save settings"
+							}]
 						})]
+					}), /* @__PURE__ */ _(S, {
+						className: "mt-3",
+						collapsedHeight: 0,
+						label: "Edit settings (JSON)",
+						children: /* @__PURE__ */ v("div", {
+							className: "grid gap-2 pt-2",
+							children: [/* @__PURE__ */ _("textarea", {
+								rows: 5,
+								"aria-label": `Settings for ${e.appId}`,
+								value: C[e.id] ?? "{}",
+								onChange: (t) => w((n) => ({
+									...n,
+									[e.id]: t.target.value
+								})),
+								className: "rounded-md border border-border-seam bg-bg-surface px-3 py-2 font-mono text-xs text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
+							}), /* @__PURE__ */ _(y, {
+								type: "button",
+								variant: "secondary",
+								size: "sm",
+								disabled: B,
+								className: "w-fit",
+								onClick: () => {
+									let t = W(C[e.id] ?? "{}");
+									if (!t) {
+										E("Installation settings must be a valid JSON object.");
+										return;
+									}
+									E(null), z({ variables: {
+										id: e.id,
+										settings: t
+									} });
+								},
+								children: "Save settings"
+							})]
+						})
 					})]
 				}, e.id))
 			})
@@ -598,6 +626,6 @@ function F() {
 	});
 }
 //#endregion
-export { F as AppInstallationsPage, N as BulkOperationsPage, P as ConversationAuditLogPage, M as ModerationQueuePage };
+export { z as AppInstallationsPage, L as BulkOperationsPage, R as ConversationAuditLogPage, I as ModerationQueuePage };
 
 //# sourceMappingURL=ConversationAdminPages.js.map