@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/support/saved-replies/use-saved-replies.js

@@ -0,0 +1,40 @@
+"use client";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  adminSavedRepliesApi
+} from "@withpotter/lib/admin-saved-replies-api";
+const SAVED_REPLIES_KEY = ["platform-admin", "support", "saved-replies"];
+function useSavedReplies(enabled = true) {
+  return useQuery({
+    queryKey: SAVED_REPLIES_KEY,
+    queryFn: () => adminSavedRepliesApi.list(),
+    enabled
+  });
+}
+function useSavedReplyMutations() {
+  const queryClient = useQueryClient();
+  const refresh = () => queryClient.invalidateQueries({ queryKey: SAVED_REPLIES_KEY });
+  const save = useMutation({
+    mutationFn: ({
+      id,
+      input
+    }) => id ? adminSavedRepliesApi.update(id, input) : adminSavedRepliesApi.create(input),
+    onSuccess: refresh
+  });
+  const remove = useMutation({
+    mutationFn: (id) => adminSavedRepliesApi.remove(id),
+    onSuccess: refresh
+  });
+  return { save, remove, refresh };
+}
+function useDraftReply(caseId) {
+  return useMutation({
+    mutationFn: () => adminSavedRepliesApi.draft(caseId)
+  });
+}
+export {
+  useDraftReply,
+  useSavedReplies,
+  useSavedReplyMutations
+};
+//# sourceMappingURL=use-saved-replies.js.map

package/dist/admin/support/saved-replies/use-saved-replies.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/saved-replies/use-saved-replies.ts"],"sourcesContent":["'use client';\n\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';\nimport {\n  adminSavedRepliesApi,\n  type SavedReplyInput,\n} from '@withpotter/lib/admin-saved-replies-api';\n\nconst SAVED_REPLIES_KEY = ['platform-admin', 'support', 'saved-replies'];\n\nexport function useSavedReplies(enabled = true) {\n  return useQuery({\n    queryKey: SAVED_REPLIES_KEY,\n    queryFn: () => adminSavedRepliesApi.list(),\n    enabled,\n  });\n}\n\nexport function useSavedReplyMutations() {\n  const queryClient = useQueryClient();\n  const refresh = () =>\n    queryClient.invalidateQueries({ queryKey: SAVED_REPLIES_KEY });\n\n  const save = useMutation({\n    mutationFn: ({\n      id,\n      input,\n    }: {\n      id: string | null;\n      input: SavedReplyInput;\n    }) =>\n      id\n        ? adminSavedRepliesApi.update(id, input)\n        : adminSavedRepliesApi.create(input),\n    onSuccess: refresh,\n  });\n\n  const remove = useMutation({\n    mutationFn: (id: string) => adminSavedRepliesApi.remove(id),\n    onSuccess: refresh,\n  });\n\n  return { save, remove, refresh };\n}\n\nexport function useDraftReply(caseId: string) {\n  return useMutation({\n    mutationFn: () => adminSavedRepliesApi.draft(caseId),\n  });\n}\n"],"mappings":";AAEA,SAAS,aAAa,UAAU,sBAAsB;AACtD;AAAA,EACE;AAAA,OAEK;AAEP,MAAM,oBAAoB,CAAC,kBAAkB,WAAW,eAAe;AAEhE,SAAS,gBAAgB,UAAU,MAAM;AAC9C,SAAO,SAAS;AAAA,IACd,UAAU;AAAA,IACV,SAAS,MAAM,qBAAqB,KAAK;AAAA,IACzC;AAAA,EACF,CAAC;AACH;AAEO,SAAS,yBAAyB;AACvC,QAAM,cAAc,eAAe;AACnC,QAAM,UAAU,MACd,YAAY,kBAAkB,EAAE,UAAU,kBAAkB,CAAC;AAE/D,QAAM,OAAO,YAAY;AAAA,IACvB,YAAY,CAAC;AAAA,MACX;AAAA,MACA;AAAA,IACF,MAIE,KACI,qBAAqB,OAAO,IAAI,KAAK,IACrC,qBAAqB,OAAO,KAAK;AAAA,IACvC,WAAW;AAAA,EACb,CAAC;AAED,QAAM,SAAS,YAAY;AAAA,IACzB,YAAY,CAAC,OAAe,qBAAqB,OAAO,EAAE;AAAA,IAC1D,WAAW;AAAA,EACb,CAAC;AAED,SAAO,EAAE,MAAM,QAAQ,QAAQ;AACjC;AAEO,SAAS,cAAc,QAAgB;AAC5C,SAAO,YAAY;AAAA,IACjB,YAAY,MAAM,qBAAqB,MAAM,MAAM;AAAA,EACrD,CAAC;AACH;","names":[]}

package/dist/admin/support/suggestion-card.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { Badge, Button } from "@withpotter/ui-kit";
+import { Kbd } from "./kbd";
+import styles from "./suggestion-card.module.css";
+const CONFIDENCE_TONE = {
+  high: "primary",
+  medium: "secondary",
+  low: "error"
+};
+function SuggestionCard({
+  suggestion,
+  onAccept,
+  onDismiss
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: styles.card,
+      "aria-label": "Suggested reply",
+      onKeyDown: (event) => {
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          onAccept();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: styles.head, children: [
+          /* @__PURE__ */ jsxs("span", { className: styles.title, children: [
+            "Suggested reply",
+            suggestion.savedReplyTitle && /* @__PURE__ */ jsxs("span", { className: styles.source, children: [
+              " ",
+              "\xB7 from \u201C",
+              suggestion.savedReplyTitle,
+              "\u201D"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: CONFIDENCE_TONE[suggestion.confidence], children: [
+            suggestion.confidence,
+            " confidence"
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "icon",
+              variant: "ghost",
+              "aria-label": "Dismiss suggestion",
+              onClick: onDismiss,
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: styles.body, children: suggestion.body }),
+        suggestion.notes && /* @__PURE__ */ jsx("p", { className: styles.notes, children: suggestion.notes }),
+        /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: onAccept, children: [
+            "Add to message box",
+            /* @__PURE__ */ jsx(Kbd, { children: "\u2318\u21B5" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: styles.notes, children: "Read it through first. Nothing is sent until you press Send." })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  SuggestionCard
+};
+//# sourceMappingURL=suggestion-card.js.map

package/dist/admin/support/suggestion-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/suggestion-card.tsx"],"sourcesContent":["'use client';\n\nimport { X } from 'lucide-react';\nimport { Badge, Button } from '@withpotter/ui-kit';\nimport type { SupportReplyDraft } from '@withpotter/lib/admin-saved-replies-api';\nimport { Kbd } from './kbd';\nimport styles from './suggestion-card.module.css';\n\nconst CONFIDENCE_TONE = {\n  high: 'primary',\n  medium: 'secondary',\n  low: 'error',\n} as const;\n\n/**\n * A suggested reply, held above the composer until someone chooses to use\n * it. Nothing is sent from here; adding it only fills the message box.\n */\nexport function SuggestionCard({\n  suggestion,\n  onAccept,\n  onDismiss,\n}: {\n  suggestion: SupportReplyDraft;\n  onAccept: () => void;\n  onDismiss: () => void;\n}) {\n  return (\n    <section\n      className={styles.card}\n      aria-label=\"Suggested reply\"\n      onKeyDown={(event) => {\n        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault();\n          onAccept();\n        }\n      }}\n    >\n      <header className={styles.head}>\n        <span className={styles.title}>\n          Suggested reply\n          {suggestion.savedReplyTitle && (\n            <span className={styles.source}>\n              {' '}\n              · from “{suggestion.savedReplyTitle}”\n            </span>\n          )}\n        </span>\n        <Badge size=\"sm\" variant={CONFIDENCE_TONE[suggestion.confidence]}>\n          {suggestion.confidence} confidence\n        </Badge>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          aria-label=\"Dismiss suggestion\"\n          onClick={onDismiss}\n        >\n          <X className=\"size-4\" />\n        </Button>\n      </header>\n      <p className={styles.body}>{suggestion.body}</p>\n      {suggestion.notes && <p className={styles.notes}>{suggestion.notes}</p>}\n      <div className={styles.actions}>\n        <Button variant=\"secondary\" onClick={onAccept}>\n          Add to message box\n          <Kbd>⌘↵</Kbd>\n        </Button>\n        <span className={styles.notes}>\n          Read it through first. Nothing is sent until you press Send.\n        </span>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AA0CY,SAeF,KAfE;AAxCZ,SAAS,SAAS;AAClB,SAAS,OAAO,cAAc;AAE9B,SAAS,WAAW;AACpB,OAAO,YAAY;AAEnB,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AACP;AAMO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,cAAW;AAAA,MACX,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,YAAY,MAAM,WAAW,MAAM,UAAU;AAC7D,gBAAM,eAAe;AACrB,mBAAS;AAAA,QACX;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,YAAO,WAAW,OAAO,MACxB;AAAA,+BAAC,UAAK,WAAW,OAAO,OAAO;AAAA;AAAA,YAE5B,WAAW,mBACV,qBAAC,UAAK,WAAW,OAAO,QACrB;AAAA;AAAA,cAAI;AAAA,cACI,WAAW;AAAA,cAAgB;AAAA,eACtC;AAAA,aAEJ;AAAA,UACA,qBAAC,SAAM,MAAK,MAAK,SAAS,gBAAgB,WAAW,UAAU,GAC5D;AAAA,uBAAW;AAAA,YAAW;AAAA,aACzB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,cAAW;AAAA,cACX,SAAS;AAAA,cAET,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,UACxB;AAAA,WACF;AAAA,QACA,oBAAC,OAAE,WAAW,OAAO,MAAO,qBAAW,MAAK;AAAA,QAC3C,WAAW,SAAS,oBAAC,OAAE,WAAW,OAAO,OAAQ,qBAAW,OAAM;AAAA,QACnE,qBAAC,SAAI,WAAW,OAAO,SACrB;AAAA,+BAAC,UAAO,SAAQ,aAAY,SAAS,UAAU;AAAA;AAAA,YAE7C,oBAAC,OAAI,0BAAE;AAAA,aACT;AAAA,UACA,oBAAC,UAAK,WAAW,OAAO,OAAO,0EAE/B;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/admin/support/suggestion-card.module.css

@@ -0,0 +1,72 @@
+/* The AI suggestion: brand-edged so it never reads as our own words. */
+
+.card {
+  display: grid;
+  gap: 8px;
+  max-height: 240px;
+  padding: 12px;
+  overflow-y: auto;
+  border: 1px solid color-mix(in srgb, var(--brand-500) 32%, transparent);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--brand-500) 5%, var(--bg-base));
+  animation: rise var(--adm-fast);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--brand-600);
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.source {
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+
+.body {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 20px;
+  white-space: pre-wrap;
+}
+
+.notes {
+  margin: 0;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    animation: none;
+  }
+}

package/dist/admin/support/support-case-detail.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Reveal } from "../_fx";
+import { SupportCaseIdentity } from "./support-case-identity";
+import { SupportCaseThread } from "./support-case-thread";
+import styles from "./support-case.module.css";
+function SupportCaseDetail({ item }) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.detail, children: [
+    /* @__PURE__ */ jsx(Reveal, { index: 0, children: /* @__PURE__ */ jsx(SupportCaseIdentity, { item }) }),
+    /* @__PURE__ */ jsx(SupportCaseThread, { item })
+  ] });
+}
+export {
+  SupportCaseDetail
+};
+//# sourceMappingURL=support-case-detail.js.map

package/dist/admin/support/support-case-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/support-case-detail.tsx"],"sourcesContent":["'use client';\n\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { Reveal } from '../_fx';\nimport { SupportCaseIdentity } from './support-case-identity';\nimport { SupportCaseThread } from './support-case-thread';\nimport styles from './support-case.module.css';\n\n/**\n * The case body: who wrote in (with the way to Merchant 360), then the\n * conversation. Status and priority live in the sheet's header.\n */\nexport function SupportCaseDetail({ item }: { item: PlatformServiceCase }) {\n  return (\n    <div className={styles.detail}>\n      <Reveal index={0}>\n        <SupportCaseIdentity item={item} />\n      </Reveal>\n      <SupportCaseThread item={item} />\n    </div>\n  );\n}\n"],"mappings":";AAcI,SAEI,KAFJ;AAXJ,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,OAAO,YAAY;AAMZ,SAAS,kBAAkB,EAAE,KAAK,GAAkC;AACzE,SACE,qBAAC,SAAI,WAAW,OAAO,QACrB;AAAA,wBAAC,UAAO,OAAO,GACb,8BAAC,uBAAoB,MAAY,GACnC;AAAA,IACA,oBAAC,qBAAkB,MAAY;AAAA,KACjC;AAEJ;","names":[]}

package/dist/admin/support/support-case-identity.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button
+} from "@withpotter/ui-kit";
+import { dateTime, humanize } from "./support-options";
+import styles from "./support-case.module.css";
+const orUnset = (value, fallback = "Not set") => value ? humanize(value) : fallback;
+function SupportCaseIdentity({ item }) {
+  const sender = item.supportContext?.sender;
+  const workspace = item.supportContext?.workspace;
+  const name = sender?.name || item.reporterName || "Unknown sender";
+  const email = sender?.email || item.reporterEmail;
+  const workspaceName = workspace?.businessName || item.tenant?.businessName || "Unknown workspace";
+  const slug = workspace?.slug || item.tenant?.slug;
+  const tenantId = workspace?.tenantId || item.tenantId;
+  const facts = [
+    ["Account", orUnset(sender?.status, "Not available")],
+    ["Last sign-in", dateTime(sender?.lastLoginAt)],
+    ["Account ID", sender?.accountId ?? "Unavailable"],
+    ["Business", orUnset(workspace?.industry)],
+    ["Workspace status", orUnset(workspace?.status, "Not available")],
+    [
+      "Plan",
+      `${workspace?.plan || "Not set"}${workspace?.billingStatus ? ` \xB7 ${humanize(workspace.billingStatus)}` : ""}`
+    ],
+    [
+      "Locale",
+      [workspace?.currency, workspace?.timezone].filter(Boolean).join(" \xB7 ") || "Not set"
+    ],
+    ["Joined", dateTime(workspace?.joinedAt)],
+    ["Workspace ID", tenantId]
+  ];
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": "case-identity", className: styles.whoCard, children: [
+    /* @__PURE__ */ jsx("h3", { id: "case-identity", className: styles.sectionTitle, children: "Who wrote in" }),
+    /* @__PURE__ */ jsx("div", { className: styles.whoRow, children: /* @__PURE__ */ jsxs("div", { className: styles.whoText, children: [
+      /* @__PURE__ */ jsxs("span", { className: styles.whoName, title: name, children: [
+        name,
+        sender?.emailVerified && /* @__PURE__ */ jsx("span", { className: styles.verified, children: "Verified" })
+      ] }),
+      email && /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: styles.whoMail,
+          href: `mailto:${email}`,
+          title: email,
+          children: /* @__PURE__ */ jsx("span", { children: email })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.whoRow, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.whoText, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.whoName, title: workspaceName, children: workspaceName }),
+        /* @__PURE__ */ jsxs("span", { className: styles.whoMeta, children: [
+          slug && /* @__PURE__ */ jsxs("span", { children: [
+            "/",
+            slug
+          ] }),
+          workspace?.plan && /* @__PURE__ */ jsx("span", { children: workspace.plan })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", children: /* @__PURE__ */ jsx(Link, { href: `/admin/tenants/${tenantId}`, children: "Merchant 360" }) })
+    ] }),
+    /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: "facts", children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { children: "Account and workspace details" }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("dl", { className: styles.facts, children: facts.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: styles.fact, children: [
+        /* @__PURE__ */ jsx("dt", { children: label }),
+        /* @__PURE__ */ jsx("dd", { title: value, children: value })
+      ] }, label)) }) })
+    ] }) })
+  ] });
+}
+export {
+  SupportCaseIdentity
+};
+//# sourceMappingURL=support-case-identity.js.map

package/dist/admin/support/support-case-identity.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/support-case-identity.tsx"],"sourcesContent":["import Link from 'next/link';\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Button,\n} from '@withpotter/ui-kit';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { dateTime, humanize } from './support-options';\nimport styles from './support-case.module.css';\n\nconst orUnset = (value: string | null | undefined, fallback = 'Not set') =>\n  value ? humanize(value) : fallback;\n\n/** Who wrote in and from which workspace, with the way to Merchant 360. */\nexport function SupportCaseIdentity({ item }: { item: PlatformServiceCase }) {\n  const sender = item.supportContext?.sender;\n  const workspace = item.supportContext?.workspace;\n  const name = sender?.name || item.reporterName || 'Unknown sender';\n  const email = sender?.email || item.reporterEmail;\n  const workspaceName =\n    workspace?.businessName || item.tenant?.businessName || 'Unknown workspace';\n  const slug = workspace?.slug || item.tenant?.slug;\n  const tenantId = workspace?.tenantId || item.tenantId;\n  const facts: Array<[string, string]> = [\n    ['Account', orUnset(sender?.status, 'Not available')],\n    ['Last sign-in', dateTime(sender?.lastLoginAt)],\n    ['Account ID', sender?.accountId ?? 'Unavailable'],\n    ['Business', orUnset(workspace?.industry)],\n    ['Workspace status', orUnset(workspace?.status, 'Not available')],\n    [\n      'Plan',\n      `${workspace?.plan || 'Not set'}${workspace?.billingStatus ? ` · ${humanize(workspace.billingStatus)}` : ''}`,\n    ],\n    [\n      'Locale',\n      [workspace?.currency, workspace?.timezone].filter(Boolean).join(' · ') ||\n        'Not set',\n    ],\n    ['Joined', dateTime(workspace?.joinedAt)],\n    ['Workspace ID', tenantId],\n  ];\n\n  return (\n    <section aria-labelledby=\"case-identity\" className={styles.whoCard}>\n      <h3 id=\"case-identity\" className={styles.sectionTitle}>\n        Who wrote in\n      </h3>\n      <div className={styles.whoRow}>\n        <div className={styles.whoText}>\n          <span className={styles.whoName} title={name}>\n            {name}\n            {sender?.emailVerified && (\n              <span className={styles.verified}>Verified</span>\n            )}\n          </span>\n          {email && (\n            <a\n              className={styles.whoMail}\n              href={`mailto:${email}`}\n              title={email}\n            >\n              <span>{email}</span>\n            </a>\n          )}\n        </div>\n      </div>\n      <div className={styles.whoRow}>\n        <div className={styles.whoText}>\n          <span className={styles.whoName} title={workspaceName}>\n            {workspaceName}\n          </span>\n          <span className={styles.whoMeta}>\n            {slug && <span>/{slug}</span>}\n            {workspace?.plan && <span>{workspace.plan}</span>}\n          </span>\n        </div>\n        <Button asChild variant=\"secondary\">\n          <Link href={`/admin/tenants/${tenantId}`}>Merchant 360</Link>\n        </Button>\n      </div>\n      <Accordion type=\"single\" collapsible>\n        <AccordionItem value=\"facts\">\n          <AccordionTrigger>Account and workspace details</AccordionTrigger>\n          <AccordionContent>\n            <dl className={styles.facts}>\n              {facts.map(([label, value]) => (\n                <div key={label} className={styles.fact}>\n                  <dt>{label}</dt>\n                  <dd title={value}>{value}</dd>\n                </div>\n              ))}\n            </dl>\n          </AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/support/support-case-table.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  EmptyNote,
+  TableShell,
+  TableSkeleton,
+  Th
+} from "@withpotter/ui-kit";
+import { EmptyState } from "../_ui";
+import { CaseRow } from "./case-row";
+import { useCloseCase } from "./use-close-case";
+import { useAdminDirectory, useSupportViewer } from "./use-support-insights";
+import styles from "./support-queue.module.css";
+function SupportCaseTable({
+  rows,
+  isLoading,
+  isError,
+  hasFilters,
+  activeId,
+  onOpen,
+  onRetry,
+  onClearFilters
+}) {
+  const viewer = useSupportViewer();
+  const names = useAdminDirectory();
+  const closer = useCloseCase();
+  const ctx = {
+    ...viewer,
+    names,
+    onOpen,
+    onCloseCase: (row) => void closer.close(row)
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: /* @__PURE__ */ jsx(TableSkeleton, { bare: true, rows: 8, columns: 7 }) });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        tone: "error",
+        title: "Support cases failed to load",
+        description: "The support service did not answer. Try again in a moment.",
+        action: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: "Try again" })
+      }
+    );
+  }
+  if (!rows?.length) {
+    return /* @__PURE__ */ jsx(
+      EmptyNote,
+      {
+        className: styles.empty,
+        action: hasFilters && onClearFilters && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClearFilters, children: "Clear filters" }),
+        children: hasFilters ? "No case matches this view, priority and search." : "No cases waiting on a reply."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TableShell,
+    {
+      bare: true,
+      fixed: true,
+      minWidth: 1080,
+      head: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx(Th, { className: "w-[232px]", children: "Merchant" }),
+        /* @__PURE__ */ jsx(Th, { children: "Subject" }),
+        /* @__PURE__ */ jsx(Th, { className: "w-[184px]", children: "Status" }),
+        /* @__PURE__ */ jsx(Th, { className: "w-[112px]", children: "Priority" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", className: "w-[72px]", children: "Age" }),
+        /* @__PURE__ */ jsx(Th, { className: "w-[160px]", children: "Assignee" }),
+        /* @__PURE__ */ jsx(Th, { className: "w-[56px]", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+      ] }),
+      children: rows.map((row, index) => /* @__PURE__ */ jsx(
+        CaseRow,
+        {
+          row,
+          index,
+          active: row.id === activeId,
+          ctx
+        },
+        row.id
+      ))
+    }
+  );
+}
+export {
+  SupportCaseTable
+};
+//# sourceMappingURL=support-case-table.js.map

package/dist/admin/support/support-case-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/support-case-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  EmptyNote,\n  TableShell,\n  TableSkeleton,\n  Th,\n} from '@withpotter/ui-kit';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { EmptyState } from '../_ui';\nimport { CaseRow, type CaseRowContext } from './case-row';\nimport { useCloseCase } from './use-close-case';\nimport { useAdminDirectory, useSupportViewer } from './use-support-insights';\nimport styles from './support-queue.module.css';\n\n/** The case queue's rows, or the state that stands in for them. */\nexport function SupportCaseTable({\n  rows,\n  isLoading,\n  isError,\n  hasFilters,\n  activeId,\n  onOpen,\n  onRetry,\n  onClearFilters,\n}: {\n  rows: PlatformServiceCase[] | undefined;\n  isLoading: boolean;\n  isError: boolean;\n  hasFilters: boolean;\n  activeId: string | null;\n  onOpen: (id: string) => void;\n  onRetry: () => void;\n  onClearFilters?: () => void;\n}) {\n  const viewer = useSupportViewer();\n  const names = useAdminDirectory();\n  const closer = useCloseCase();\n  const ctx: CaseRowContext = {\n    ...viewer,\n    names,\n    onOpen,\n    onCloseCase: (row) => void closer.close(row),\n  };\n\n  if (isLoading) {\n    return (\n      <div aria-hidden>\n        <TableSkeleton bare rows={8} columns={7} />\n      </div>\n    );\n  }\n  if (isError) {\n    return (\n      <EmptyState\n        tone=\"error\"\n        title=\"Support cases failed to load\"\n        description=\"The support service did not answer. Try again in a moment.\"\n        action={\n          <Button variant=\"secondary\" onClick={onRetry}>\n            Try again\n          </Button>\n        }\n      />\n    );\n  }\n  if (!rows?.length) {\n    return (\n      <EmptyNote\n        className={styles.empty}\n        action={\n          hasFilters &&\n          onClearFilters && (\n            <Button variant=\"secondary\" onClick={onClearFilters}>\n              Clear filters\n            </Button>\n          )\n        }\n      >\n        {hasFilters\n          ? 'No case matches this view, priority and search.'\n          : 'No cases waiting on a reply.'}\n      </EmptyNote>\n    );\n  }\n\n  return (\n    <TableShell\n      bare\n      fixed\n      minWidth={1080}\n      head={\n        <tr>\n          <Th className=\"w-[232px]\">Merchant</Th>\n          <Th>Subject</Th>\n          <Th className=\"w-[184px]\">Status</Th>\n          <Th className=\"w-[112px]\">Priority</Th>\n          <Th align=\"right\" className=\"w-[72px]\">\n            Age\n          </Th>\n          <Th className=\"w-[160px]\">Assignee</Th>\n          <Th className=\"w-[56px]\">\n            <span className=\"sr-only\">Actions</span>\n          </Th>\n        </tr>\n      }\n    >\n      {rows.map((row, index) => (\n        <CaseRow\n          key={row.id}\n          row={row}\n          index={index}\n          active={row.id === activeId}\n          ctx={ctx}\n        />\n      ))}\n    </TableShell>\n  );\n}\n"],"mappings":";AAiDQ,cA4CA,YA5CA;AA/CR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAC3B,SAAS,eAAoC;AAC7C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB,wBAAwB;AACpD,OAAO,YAAY;AAGZ,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,SAAS,iBAAiB;AAChC,QAAM,QAAQ,kBAAkB;AAChC,QAAM,SAAS,aAAa;AAC5B,QAAM,MAAsB;AAAA,IAC1B,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,aAAa,CAAC,QAAQ,KAAK,OAAO,MAAM,GAAG;AAAA,EAC7C;AAEA,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,eAAW,MACd,8BAAC,iBAAc,MAAI,MAAC,MAAM,GAAG,SAAS,GAAG,GAC3C;AAAA,EAEJ;AACA,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,QACE,oBAAC,UAAO,SAAQ,aAAY,SAAS,SAAS,uBAE9C;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACA,MAAI,CAAC,MAAM,QAAQ;AACjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,QACE,cACA,kBACE,oBAAC,UAAO,SAAQ,aAAY,SAAS,gBAAgB,2BAErD;AAAA,QAIH,uBACG,oDACA;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAI;AAAA,MACJ,OAAK;AAAA,MACL,UAAU;AAAA,MACV,MACE,qBAAC,QACC;AAAA,4BAAC,MAAG,WAAU,aAAY,sBAAQ;AAAA,QAClC,oBAAC,MAAG,qBAAO;AAAA,QACX,oBAAC,MAAG,WAAU,aAAY,oBAAM;AAAA,QAChC,oBAAC,MAAG,WAAU,aAAY,sBAAQ;AAAA,QAClC,oBAAC,MAAG,OAAM,SAAQ,WAAU,YAAW,iBAEvC;AAAA,QACA,oBAAC,MAAG,WAAU,aAAY,sBAAQ;AAAA,QAClC,oBAAC,MAAG,WAAU,YACZ,8BAAC,UAAK,WAAU,WAAU,qBAAO,GACnC;AAAA,SACF;AAAA,MAGD,eAAK,IAAI,CAAC,KAAK,UACd;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,QAAQ,IAAI,OAAO;AAAA,UACnB;AAAA;AAAA,QAJK,IAAI;AAAA,MAKX,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/admin/support/support-case-thread.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Reveal } from "../_fx";
+import { buildTimeline, withActivity } from "./case-timeline";
+import { dateTime } from "./support-options";
+import { ThreadBubble } from "./thread-bubble";
+import events from "./thread-event.module.css";
+import styles from "./support-thread.module.css";
+const day = (iso) => new Intl.DateTimeFormat(void 0, { dateStyle: "full" }).format(
+  new Date(iso)
+);
+const EVENT_COLOR = {
+  brand: "var(--brand-500)",
+  success: "var(--adm-ok)",
+  warning: "var(--adm-wait)",
+  error: "var(--error)",
+  neutral: "var(--text-tertiary)"
+};
+function SupportCaseThread({
+  item,
+  me,
+  activity = []
+}) {
+  const sender = item.supportContext?.sender;
+  const them = sender?.name || item.reporterName;
+  const timeline = withActivity(buildTimeline(item), activity);
+  const days = timeline.map((entry) => day(entry.at));
+  const count = timeline.filter((entry) => entry.kind === "message").length;
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Conversation", className: styles.section, children: [
+    /* @__PURE__ */ jsxs("p", { className: "sr-only", children: [
+      count,
+      " ",
+      count === 1 ? "message" : "messages"
+    ] }),
+    /* @__PURE__ */ jsx("ol", { className: styles.thread, children: timeline.map((entry, index) => {
+      const marker = index === 0 || days[index] !== days[index - 1] ? days[index] : null;
+      return /* @__PURE__ */ jsxs(Reveal, { as: "li", index: Math.min(index, 8), children: [
+        marker && /* @__PURE__ */ jsx("p", { className: styles.dayMarker, children: marker }),
+        entry.kind === "message" ? /* @__PURE__ */ jsx(
+          ThreadBubble,
+          {
+            message: entry.message,
+            them,
+            mine: Boolean(me) && entry.message.authorId === me
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: events.event,
+            style: { "--event": EVENT_COLOR[entry.tone] },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: events.dot, "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { children: entry.label }),
+              /* @__PURE__ */ jsx("time", { dateTime: entry.at, className: events.eventTime, children: dateTime(entry.at) })
+            ]
+          }
+        )
+      ] }, entry.id);
+    }) })
+  ] });
+}
+export {
+  SupportCaseThread
+};
+//# sourceMappingURL=support-case-thread.js.map

package/dist/admin/support/support-case-thread.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/support-case-thread.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { Reveal } from '../_fx';\nimport { buildTimeline, withActivity, type EventTone } from './case-timeline';\nimport type { CaseActivity } from './use-case-activity';\nimport { dateTime } from './support-options';\nimport { ThreadBubble } from './thread-bubble';\nimport events from './thread-event.module.css';\nimport styles from './support-thread.module.css';\n\nconst day = (iso: string) =>\n  new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(\n    new Date(iso),\n  );\n\nconst EVENT_COLOR: Record<EventTone, string> = {\n  brand: 'var(--brand-500)',\n  success: 'var(--adm-ok)',\n  warning: 'var(--adm-wait)',\n  error: 'var(--error)',\n  neutral: 'var(--text-tertiary)',\n};\n\n/**\n * The conversation as chat, with what happened to the case (opened, first\n * response, missed targets, resolved, closed) as small markers between the\n * messages, and a day marker whenever the date changes.\n */\nexport function SupportCaseThread({\n  item,\n  me,\n  activity = [],\n}: {\n  item: PlatformServiceCase;\n  me?: string;\n  /** Changes made in this session, which the API keeps no history of. */\n  activity?: CaseActivity[];\n}) {\n  const sender = item.supportContext?.sender;\n  const them = sender?.name || item.reporterName;\n  const timeline = withActivity(buildTimeline(item), activity);\n  const days = timeline.map((entry) => day(entry.at));\n  const count = timeline.filter((entry) => entry.kind === 'message').length;\n\n  return (\n    <section aria-label=\"Conversation\" className={styles.section}>\n      <p className=\"sr-only\">\n        {count} {count === 1 ? 'message' : 'messages'}\n      </p>\n      <ol className={styles.thread}>\n        {timeline.map((entry, index) => {\n          const marker =\n            index === 0 || days[index] !== days[index - 1] ? days[index] : null;\n          return (\n            <Reveal as=\"li\" key={entry.id} index={Math.min(index, 8)}>\n              {marker && <p className={styles.dayMarker}>{marker}</p>}\n              {entry.kind === 'message' ? (\n                <ThreadBubble\n                  message={entry.message}\n                  them={them}\n                  mine={Boolean(me) && entry.message.authorId === me}\n                />\n              ) : (\n                <p\n                  className={events.event}\n                  style={\n                    { '--event': EVENT_COLOR[entry.tone] } as CSSProperties\n                  }\n                >\n                  <span className={events.dot} aria-hidden />\n                  <span>{entry.label}</span>\n                  <time dateTime={entry.at} className={events.eventTime}>\n                    {dateTime(entry.at)}\n                  </time>\n                </p>\n              )}\n            </Reveal>\n          );\n        })}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":"AA8CM,SASmB,KATnB;AA5CN,SAAS,cAAc;AACvB,SAAS,eAAe,oBAAoC;AAE5D,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AACnB,OAAO,YAAY;AAEnB,MAAM,MAAM,CAAC,QACX,IAAI,KAAK,eAAe,QAAW,EAAE,WAAW,OAAO,CAAC,EAAE;AAAA,EACxD,IAAI,KAAK,GAAG;AACd;AAEF,MAAM,cAAyC;AAAA,EAC7C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX;AAOO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AACd,GAKG;AACD,QAAM,SAAS,KAAK,gBAAgB;AACpC,QAAM,OAAO,QAAQ,QAAQ,KAAK;AAClC,QAAM,WAAW,aAAa,cAAc,IAAI,GAAG,QAAQ;AAC3D,QAAM,OAAO,SAAS,IAAI,CAAC,UAAU,IAAI,MAAM,EAAE,CAAC;AAClD,QAAM,QAAQ,SAAS,OAAO,CAAC,UAAU,MAAM,SAAS,SAAS,EAAE;AAEnE,SACE,qBAAC,aAAQ,cAAW,gBAAe,WAAW,OAAO,SACnD;AAAA,yBAAC,OAAE,WAAU,WACV;AAAA;AAAA,MAAM;AAAA,MAAE,UAAU,IAAI,YAAY;AAAA,OACrC;AAAA,IACA,oBAAC,QAAG,WAAW,OAAO,QACnB,mBAAS,IAAI,CAAC,OAAO,UAAU;AAC9B,YAAM,SACJ,UAAU,KAAK,KAAK,KAAK,MAAM,KAAK,QAAQ,CAAC,IAAI,KAAK,KAAK,IAAI;AACjE,aACE,qBAAC,UAAO,IAAG,MAAoB,OAAO,KAAK,IAAI,OAAO,CAAC,GACpD;AAAA,kBAAU,oBAAC,OAAE,WAAW,OAAO,WAAY,kBAAO;AAAA,QAClD,MAAM,SAAS,YACd;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM;AAAA,YACf;AAAA,YACA,MAAM,QAAQ,EAAE,KAAK,MAAM,QAAQ,aAAa;AAAA;AAAA,QAClD,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,OACE,EAAE,WAAW,YAAY,MAAM,IAAI,EAAE;AAAA,YAGvC;AAAA,kCAAC,UAAK,WAAW,OAAO,KAAK,eAAW,MAAC;AAAA,cACzC,oBAAC,UAAM,gBAAM,OAAM;AAAA,cACnB,oBAAC,UAAK,UAAU,MAAM,IAAI,WAAW,OAAO,WACzC,mBAAS,MAAM,EAAE,GACpB;AAAA;AAAA;AAAA,QACF;AAAA,WApBiB,MAAM,EAsB3B;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/support/support-case.module.css

@@ -0,0 +1,178 @@
+/* Support case sheet: header controls, the "who wrote in" card, facts. */
+
+.detail {
+  display: grid;
+  gap: 24px;
+}
+
+.loading {
+  display: grid;
+  gap: 16px;
+}
+
+.subtitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.subtitle > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subtitle > span + span::before {
+  margin-right: 8px;
+  color: var(--text-tertiary);
+  content: '·';
+}
+
+.metaText {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.reference {
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+.headerControls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.headerSelect {
+  width: 184px;
+  min-width: 0;
+}
+
+.headerSelect + .headerSelect {
+  width: 136px;
+}
+
+.choiceDot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.sectionTitle {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.whoCard {
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+  border-radius: 10px;
+  background: var(--bg-subtle);
+}
+
+.whoRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.whoText {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.whoName {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.whoMail,
+.whoMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.whoMail span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.verified {
+  flex-shrink: 0;
+  color: var(--adm-ok);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.whoMail:hover {
+  color: var(--accent-ink, var(--accent-primary));
+}
+
+.facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px 24px;
+  margin: 0;
+}
+
+.fact {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.fact dt {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.fact dd {
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 720px) {
+  .headerSelect,
+  .headerSelect + .headerSelect {
+    width: 120px;
+  }
+
+  .facts {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}