@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/support/support-composer.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Textarea, useToast } from "@withpotter/ui-kit";
+import { ADMIN_NAME } from "../_shell/admin-brand";
+import { ComposerFooter } from "./composer-footer";
+import { ComposerToolbar } from "./composer-toolbar";
+import { ComposerAids } from "./composer-aids";
+import { ReplyPicker } from "./reply-picker";
+import { SaveReplyDialog } from "./saved-replies/save-reply-dialog";
+import {
+  missingFacts,
+  unfilledPlaceholders
+} from "./saved-replies/placeholders";
+import { listPlaceholders, useComposerAssist } from "./use-composer-assist";
+import { composerKeys } from "./composer-keys";
+import { ComposerHeader } from "./composer-header";
+import { SEND_OPTIONS, useSendReply } from "./use-send-reply";
+import styles from "./support.module.css";
+function Composer({
+  item,
+  mode = "reply",
+  intent = null,
+  onCollapse
+}) {
+  const send = useSendReply(item);
+  const { toast } = useToast();
+  const bodyRef = useRef(null);
+  const composer = useComposerAssist(item, bodyRef);
+  const [visibility, setVisibility] = useState(
+    mode === "note" ? "internal" : "participants"
+  );
+  const isReply = visibility === "participants";
+  const name = item.supportContext?.sender.name || item.reporterName;
+  const [saving, setSaving] = useState({ open: false, session: 0 });
+  const started = useRef(false);
+  useEffect(() => {
+    if (started.current || !onCollapse) return;
+    started.current = true;
+    if (intent === "picker") composer.picker.toggle();
+    if (intent === "suggest") composer.draft.request();
+    bodyRef.current?.focus();
+  }, [composer.draft, composer.picker, intent, onCollapse]);
+  const submit = (then) => {
+    const message = composer.body.trim();
+    if (!message || send.isPending) return;
+    const unfilled = unfilledPlaceholders(message);
+    if (isReply && unfilled.length) {
+      composer.setNotice(
+        `Replace ${listPlaceholders(unfilled)} before sending.`
+      );
+      return;
+    }
+    const gaps = missingFacts(message);
+    if (isReply && gaps.length) {
+      composer.setNotice(`Fill in the marked gaps first: ${gaps.join(", ")}.`);
+      return;
+    }
+    send.mutate(
+      {
+        input: {
+          body: message,
+          visibility,
+          savedReplyId: composer.savedReplyId ?? void 0,
+          draftId: composer.draftId ?? void 0
+        },
+        then
+      },
+      {
+        onSuccess: ({ warning }) => {
+          composer.reset();
+          send.reset();
+          toast({ title: isReply ? SEND_OPTIONS[then].done : "Note added" });
+          if (warning)
+            toast({
+              title: "The case was not updated",
+              description: warning,
+              variant: "destructive"
+            });
+          onCollapse?.();
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: styles.composer,
+      "data-mode": isReply ? "reply" : "note",
+      onSubmit: (event) => {
+        event.preventDefault();
+        submit("wait");
+      },
+      children: [
+        onCollapse && /* @__PURE__ */ jsx(ComposerHeader, { isReply, name, onCollapse }),
+        /* @__PURE__ */ jsx(
+          ComposerToolbar,
+          {
+            isReply,
+            onMode: (reply) => setVisibility(reply ? "participants" : "internal"),
+            drafting: composer.draft.isPending,
+            onSuggest: composer.draft.request,
+            picker: /* @__PURE__ */ jsx(
+              ReplyPicker,
+              {
+                open: composer.picker.open,
+                onOpenChange: composer.picker.setOpen,
+                replies: composer.picker.replies,
+                isLoading: composer.picker.isLoading,
+                category: item.category,
+                onPick: composer.picker.insert
+              }
+            ),
+            canSave: Boolean(composer.body.trim()),
+            onSave: () => setSaving(({ session }) => ({ open: true, session: session + 1 }))
+          }
+        ),
+        /* @__PURE__ */ jsx(ComposerAids, { composer }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            ref: bodyRef,
+            id: "support-reply",
+            "aria-label": isReply ? `Reply to ${name}` : "Internal note",
+            className: styles.replyField,
+            maxLength: 1e4,
+            value: composer.body,
+            onChange: (event) => composer.setBody(event.target.value),
+            onKeyDown: (event) => composerKeys(event, {
+              body: composer.body,
+              suggestion: Boolean(composer.suggestion.current),
+              accept: composer.suggestion.accept,
+              send: () => submit(isReply ? "wait" : "none"),
+              picker: () => !composer.picker.open && composer.picker.toggle(),
+              collapse: () => onCollapse?.()
+            }),
+            placeholder: isReply ? "Write a reply. Press # for saved replies" : `Add context for the ${ADMIN_NAME} team\u2026`
+          }
+        ),
+        composer.notice && /* @__PURE__ */ jsx("p", { className: styles.notice, role: "status", children: composer.notice }),
+        /* @__PURE__ */ jsx(
+          ComposerFooter,
+          {
+            isReply,
+            reporterName: name,
+            length: composer.body.length,
+            canSend: Boolean(composer.body.trim()),
+            sending: send.isPending,
+            onSend: (then) => submit(isReply ? then : "none"),
+            replyError: send.isError ? send.error.message : null,
+            draftError: composer.draft.error
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SaveReplyDialog,
+          {
+            open: saving.open,
+            initialBody: composer.body,
+            category: item.category,
+            onClose: () => setSaving((state) => ({ ...state, open: false }))
+          },
+          saving.session
+        )
+      ]
+    }
+  );
+}
+export {
+  Composer
+};
+//# sourceMappingURL=support-composer.js.map

package/dist/admin/support/support-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/support-composer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { Textarea, useToast } from '@withpotter/ui-kit';\nimport { ADMIN_NAME } from '../_shell/admin-brand';\nimport type {\n  CaseMessageVisibility,\n  PlatformServiceCase,\n} from '@withpotter/lib/admin-service-operations-api';\nimport { ComposerFooter } from './composer-footer';\nimport { ComposerToolbar } from './composer-toolbar';\nimport { ComposerAids } from './composer-aids';\nimport { ReplyPicker } from './reply-picker';\nimport { SaveReplyDialog } from './saved-replies/save-reply-dialog';\nimport {\n  missingFacts,\n  unfilledPlaceholders,\n} from './saved-replies/placeholders';\nimport { listPlaceholders, useComposerAssist } from './use-composer-assist';\nimport { composerKeys } from './composer-keys';\nimport { ComposerHeader } from './composer-header';\nimport { SEND_OPTIONS, useSendReply, type SendThen } from './use-send-reply';\nimport styles from './support.module.css';\n\n/** What opened the composer, so it can start doing it. */\nexport type ComposerIntent = 'picker' | 'suggest' | null;\n\n/**\n * The reply box, docked over the thread: reply or internal note (faintly warm),\n * the saved reply picker (also on #), a suggested reply held in its own\n * card, \"Save as saved reply\" for what was just written, and a\n * split Send that moves the case on. It opens in the mode and with the\n * action it was asked for, and Escape on an empty box folds it away.\n */\nexport function Composer({\n  item,\n  mode = 'reply',\n  intent = null,\n  onCollapse,\n}: {\n  item: PlatformServiceCase;\n  mode?: 'reply' | 'note';\n  intent?: ComposerIntent;\n  /** Folds it back into the action bar; absent where it is always open. */\n  onCollapse?: () => void;\n}) {\n  const send = useSendReply(item);\n  const { toast } = useToast();\n  const bodyRef = useRef<HTMLTextAreaElement>(null);\n  const composer = useComposerAssist(item, bodyRef);\n  const [visibility, setVisibility] = useState<CaseMessageVisibility>(\n    mode === 'note' ? 'internal' : 'participants',\n  );\n  const isReply = visibility === 'participants';\n  const name = item.supportContext?.sender.name || item.reporterName;\n  // Each \"Save as saved reply\" opens a fresh dialog seeded with the text.\n  const [saving, setSaving] = useState({ open: false, session: 0 });\n  const started = useRef(false);\n  useEffect(() => {\n    if (started.current || !onCollapse) return;\n    started.current = true;\n    if (intent === 'picker') composer.picker.toggle();\n    if (intent === 'suggest') composer.draft.request();\n    bodyRef.current?.focus();\n  }, [composer.draft, composer.picker, intent, onCollapse]);\n\n  const submit = (then: SendThen) => {\n    const message = composer.body.trim();\n    // A second ⌘ Enter while the first is in flight would send it twice.\n    if (!message || send.isPending) return;\n    const unfilled = unfilledPlaceholders(message);\n    if (isReply && unfilled.length) {\n      composer.setNotice(\n        `Replace ${listPlaceholders(unfilled)} before sending.`,\n      );\n      return;\n    }\n    const gaps = missingFacts(message);\n    if (isReply && gaps.length) {\n      composer.setNotice(`Fill in the marked gaps first: ${gaps.join(', ')}.`);\n      return;\n    }\n    send.mutate(\n      {\n        input: {\n          body: message,\n          visibility,\n          savedReplyId: composer.savedReplyId ?? undefined,\n          draftId: composer.draftId ?? undefined,\n        },\n        then,\n      },\n      {\n        onSuccess: ({ warning }) => {\n          composer.reset();\n          send.reset();\n          toast({ title: isReply ? SEND_OPTIONS[then].done : 'Note added' });\n          if (warning)\n            toast({\n              title: 'The case was not updated',\n              description: warning,\n              variant: 'destructive',\n            });\n          onCollapse?.();\n        },\n      },\n    );\n  };\n\n  return (\n    <form\n      className={styles.composer}\n      data-mode={isReply ? 'reply' : 'note'}\n      onSubmit={(event) => {\n        event.preventDefault();\n        submit('wait');\n      }}\n    >\n      {onCollapse && (\n        <ComposerHeader isReply={isReply} name={name} onCollapse={onCollapse} />\n      )}\n      <ComposerToolbar\n        isReply={isReply}\n        onMode={(reply) => setVisibility(reply ? 'participants' : 'internal')}\n        drafting={composer.draft.isPending}\n        onSuggest={composer.draft.request}\n        picker={\n          <ReplyPicker\n            open={composer.picker.open}\n            onOpenChange={composer.picker.setOpen}\n            replies={composer.picker.replies}\n            isLoading={composer.picker.isLoading}\n            category={item.category}\n            onPick={composer.picker.insert}\n          />\n        }\n        canSave={Boolean(composer.body.trim())}\n        onSave={() =>\n          setSaving(({ session }) => ({ open: true, session: session + 1 }))\n        }\n      />\n      <ComposerAids composer={composer} />\n      <Textarea\n        ref={bodyRef}\n        id=\"support-reply\"\n        aria-label={isReply ? `Reply to ${name}` : 'Internal note'}\n        className={styles.replyField}\n        maxLength={10000}\n        value={composer.body}\n        onChange={(event) => composer.setBody(event.target.value)}\n        onKeyDown={(event) =>\n          composerKeys(event, {\n            body: composer.body,\n            suggestion: Boolean(composer.suggestion.current),\n            accept: composer.suggestion.accept,\n            send: () => submit(isReply ? 'wait' : 'none'),\n            picker: () => !composer.picker.open && composer.picker.toggle(),\n            collapse: () => onCollapse?.(),\n          })\n        }\n        placeholder={\n          isReply\n            ? 'Write a reply. Press # for saved replies'\n            : `Add context for the ${ADMIN_NAME} team…`\n        }\n      />\n      {composer.notice && (\n        <p className={styles.notice} role=\"status\">\n          {composer.notice}\n        </p>\n      )}\n      <ComposerFooter\n        isReply={isReply}\n        reporterName={name}\n        length={composer.body.length}\n        canSend={Boolean(composer.body.trim())}\n        sending={send.isPending}\n        onSend={(then) => submit(isReply ? then : 'none')}\n        replyError={send.isError ? send.error.message : null}\n        draftError={composer.draft.error}\n      />\n      <SaveReplyDialog\n        key={saving.session}\n        open={saving.open}\n        initialBody={composer.body}\n        category={item.category}\n        onClose={() => setSaving((state) => ({ ...state, open: false }))}\n      />\n    </form>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/support/support-kpis.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import {
+  adminServiceOperationsApi
+} from "@withpotter/lib/admin-service-operations-api";
+import { CountUp, TONE } from "../_fx";
+import { StatCard } from "../_ui";
+import { duration } from "./support-options";
+import {
+  averageFirstResponse,
+  dailyFirstResponse,
+  dailyVolume
+} from "./support-trend";
+import { useRecentCases, useSupportAnalytics } from "./use-support-insights";
+function useStatusCount(status, analytics) {
+  const breakdown = analytics.data?.byStatus;
+  const fromAnalytics = breakdown ? breakdown[status] ?? 0 : void 0;
+  const fallback = useQuery({
+    queryKey: ["platform-admin", "support", "cases", { pageSize: 1, status }],
+    queryFn: () => adminServiceOperationsApi.listCases({ page: 1, pageSize: 1, status }),
+    enabled: !analytics.isLoading && fromAnalytics === void 0
+  });
+  return {
+    value: fromAnalytics ?? fallback.data?.total ?? null,
+    isLoading: analytics.isLoading || fallback.isLoading
+  };
+}
+const Count = ({ value }) => value === null ? "\u2013" : /* @__PURE__ */ jsx(CountUp, { value });
+function SupportKpis() {
+  const analytics = useSupportAnalytics();
+  const recent = useRecentCases();
+  const open = useStatusCount("open", analytics);
+  const waiting = useStatusCount("waiting_on_potter", analytics);
+  const resolved = useStatusCount("resolved", analytics);
+  const rows = recent.data?.rows;
+  const volume = dailyVolume(rows);
+  const opened = recent.data?.total ?? volume.reduce((sum, n) => sum + n, 0);
+  const average = averageFirstResponse(rows);
+  const breaches = analytics.data?.slaBreaches ?? null;
+  const csat = analytics.data?.satisfaction.find(
+    (row) => row.metric.toLowerCase() === "csat" && row.responses > 0
+  );
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Support queue at a glance", className: "adm-grid", children: [
+    /* @__PURE__ */ jsx("div", { className: "adm-span-3", children: /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        compact: true,
+        label: "Open",
+        value: /* @__PURE__ */ jsx(Count, { value: open.value }),
+        isLoading: open.isLoading,
+        spark: volume,
+        sparkColor: TONE.inbox.fg,
+        sub: `${opened.toLocaleString()} opened in 14 days`,
+        hint: "Cases not yet picked up. The line is cases opened per day over the last two weeks."
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "adm-span-3", children: /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        compact: true,
+        label: "Waiting on us",
+        value: /* @__PURE__ */ jsx(Count, { value: waiting.value }),
+        isLoading: waiting.isLoading,
+        sub: breaches ? `${breaches.toLocaleString()} SLA breaches recorded` : "Merchant replied last",
+        hint: breaches ? "Breaches are every SLA miss recorded so far, including cases since answered, not the cases late right now." : void 0
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "adm-span-3", children: /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        compact: true,
+        label: "First response",
+        value: average === null ? "\u2013" : duration(average),
+        isLoading: recent.isLoading,
+        spark: dailyFirstResponse(rows),
+        sparkColor: TONE.brand.fg,
+        hint: "Average time from a case opening to our first reply, for cases opened in the last 14 days. The line is the daily average.",
+        sub: average === null ? "No replies yet" : "Average, last 14 days"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "adm-span-3", children: csat?.average != null ? /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        compact: true,
+        label: "Satisfaction",
+        value: `${csat.average.toFixed(1)} / 5`,
+        sub: `${csat.responses.toLocaleString()} ratings`,
+        hint: "Average score merchants gave when a case closed."
+      }
+    ) : /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        compact: true,
+        label: "Resolved",
+        value: /* @__PURE__ */ jsx(Count, { value: resolved.value }),
+        isLoading: resolved.isLoading,
+        sub: "Solved, awaiting close"
+      }
+    ) })
+  ] });
+}
+export {
+  SupportKpis
+};
+//# sourceMappingURL=support-kpis.js.map

package/dist/admin/support/support-kpis.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/support-kpis.tsx"],"sourcesContent":["'use client';\n\nimport { useQuery } from '@tanstack/react-query';\nimport {\n  adminServiceOperationsApi,\n  type ServiceCaseStatus,\n} from '@withpotter/lib/admin-service-operations-api';\nimport { CountUp, TONE } from '../_fx';\nimport { StatCard } from '../_ui';\nimport { duration } from './support-options';\nimport {\n  averageFirstResponse,\n  dailyFirstResponse,\n  dailyVolume,\n} from './support-trend';\nimport { useRecentCases, useSupportAnalytics } from './use-support-insights';\n\n/**\n * A status count: analytics when it carries the status, otherwise one row\n * of the case list and its total, which is what this card showed before.\n */\nfunction useStatusCount(\n  status: ServiceCaseStatus,\n  analytics: ReturnType<typeof useSupportAnalytics>,\n) {\n  const breakdown = analytics.data?.byStatus;\n  const fromAnalytics = breakdown ? (breakdown[status] ?? 0) : undefined;\n  const fallback = useQuery({\n    queryKey: ['platform-admin', 'support', 'cases', { pageSize: 1, status }],\n    queryFn: () =>\n      adminServiceOperationsApi.listCases({ page: 1, pageSize: 1, status }),\n    enabled: !analytics.isLoading && fromAnalytics === undefined,\n  });\n  return {\n    value: fromAnalytics ?? fallback.data?.total ?? null,\n    isLoading: analytics.isLoading || fallback.isLoading,\n  };\n}\n\nconst Count = ({ value }: { value: number | null }) =>\n  value === null ? '–' : <CountUp value={value} />;\n\n/**\n * The queue at a glance, kept compact so the queue below stays the one\n * dominant element: what is open, what waits on us, how fast we answer.\n */\nexport function SupportKpis() {\n  const analytics = useSupportAnalytics();\n  const recent = useRecentCases();\n  const open = useStatusCount('open', analytics);\n  const waiting = useStatusCount('waiting_on_potter', analytics);\n  const resolved = useStatusCount('resolved', analytics);\n\n  const rows = recent.data?.rows;\n  const volume = dailyVolume(rows);\n  const opened = recent.data?.total ?? volume.reduce((sum, n) => sum + n, 0);\n  const average = averageFirstResponse(rows);\n  const breaches = analytics.data?.slaBreaches ?? null;\n  const csat = analytics.data?.satisfaction.find(\n    (row) => row.metric.toLowerCase() === 'csat' && row.responses > 0,\n  );\n\n  return (\n    <section aria-label=\"Support queue at a glance\" className=\"adm-grid\">\n      <div className=\"adm-span-3\">\n        <StatCard\n          compact\n          label=\"Open\"\n          value={<Count value={open.value} />}\n          isLoading={open.isLoading}\n          spark={volume}\n          sparkColor={TONE.inbox.fg}\n          sub={`${opened.toLocaleString()} opened in 14 days`}\n          hint=\"Cases not yet picked up. The line is cases opened per day over the last two weeks.\"\n        />\n      </div>\n      <div className=\"adm-span-3\">\n        <StatCard\n          compact\n          label=\"Waiting on us\"\n          value={<Count value={waiting.value} />}\n          isLoading={waiting.isLoading}\n          sub={\n            breaches\n              ? `${breaches.toLocaleString()} SLA breaches recorded`\n              : 'Merchant replied last'\n          }\n          hint={\n            breaches\n              ? 'Breaches are every SLA miss recorded so far, including cases since answered, not the cases late right now.'\n              : undefined\n          }\n        />\n      </div>\n      <div className=\"adm-span-3\">\n        <StatCard\n          compact\n          label=\"First response\"\n          value={average === null ? '–' : duration(average)}\n          isLoading={recent.isLoading}\n          spark={dailyFirstResponse(rows)}\n          sparkColor={TONE.brand.fg}\n          hint=\"Average time from a case opening to our first reply, for cases opened in the last 14 days. The line is the daily average.\"\n          sub={average === null ? 'No replies yet' : 'Average, last 14 days'}\n        />\n      </div>\n      <div className=\"adm-span-3\">\n        {csat?.average != null ? (\n          <StatCard\n            compact\n            label=\"Satisfaction\"\n            value={`${csat.average.toFixed(1)} / 5`}\n            sub={`${csat.responses.toLocaleString()} ratings`}\n            hint=\"Average score merchants gave when a case closed.\"\n          />\n        ) : (\n          <StatCard\n            compact\n            label=\"Resolved\"\n            value={<Count value={resolved.value} />}\n            isLoading={resolved.isLoading}\n            sub=\"Solved, awaiting close\"\n          />\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/support/support-options.js

@@ -0,0 +1,87 @@
+const STATUS_LABEL = {
+  open: "Open",
+  waiting_on_potter: "Waiting on us",
+  waiting_on_tenant: "Waiting on merchant",
+  waiting_on_customer: "Waiting on customer",
+  resolved: "Resolved",
+  closed: "Closed"
+};
+const PRIORITY_LABEL = {
+  low: "Low",
+  normal: "Normal",
+  high: "High",
+  urgent: "Urgent"
+};
+const STATUS_OPTIONS = Object.entries(STATUS_LABEL).map(
+  ([value, label]) => ({ value, label })
+);
+const PRIORITY_OPTIONS = Object.entries(PRIORITY_LABEL).map(
+  ([value, label]) => ({ value, label })
+);
+function statusTone(status) {
+  if (status === "open" || status === "waiting_on_potter") return "primary";
+  return "secondary";
+}
+const STATUS_COLOR = {
+  open: "var(--brand-500)",
+  waiting_on_potter: "var(--brand-700)",
+  waiting_on_tenant: "var(--adm-wait)",
+  waiting_on_customer: "var(--adm-wait)",
+  resolved: "var(--adm-ok)",
+  closed: "var(--text-tertiary)"
+};
+const PRIORITY_COLOR = {
+  urgent: "var(--error)",
+  high: "var(--brand-700)",
+  normal: "var(--brand-400)",
+  low: "var(--text-tertiary)"
+};
+const NEXT_STATUSES = [
+  "waiting_on_potter",
+  "waiting_on_tenant",
+  "resolved",
+  "closed"
+];
+function priorityTone(priority) {
+  if (priority === "urgent") return "error";
+  if (priority === "high") return "primary";
+  return "secondary";
+}
+function humanize(value) {
+  const text = value.replaceAll("_", " ");
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+function middle(id, keep = 8) {
+  return id.length > keep * 2 ? `${id.slice(0, keep)}\u2026${id.slice(-4)}` : id;
+}
+function dateTime(value) {
+  if (!value) return "\u2013";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "\u2013" : new Intl.DateTimeFormat(void 0, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(date);
+}
+function duration(ms) {
+  const minutes = ms / 6e4;
+  if (minutes < 60) return `${Math.max(1, Math.round(minutes))}m`;
+  const hours = minutes / 60;
+  if (hours < 48) return `${hours.toFixed(1)}h`;
+  return `${(hours / 24).toFixed(1)}d`;
+}
+export {
+  NEXT_STATUSES,
+  PRIORITY_COLOR,
+  PRIORITY_LABEL,
+  PRIORITY_OPTIONS,
+  STATUS_COLOR,
+  STATUS_LABEL,
+  STATUS_OPTIONS,
+  dateTime,
+  duration,
+  humanize,
+  middle,
+  priorityTone,
+  statusTone
+};
+//# sourceMappingURL=support-options.js.map

package/dist/admin/support/support-options.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/support-options.ts"],"sourcesContent":["import type { BadgeProps } from '@withpotter/ui-kit';\nimport type {\n  ServiceCasePriority,\n  ServiceCaseStatus,\n} from '@withpotter/lib/admin-service-operations-api';\n\ntype Tone = NonNullable<BadgeProps['variant']>;\n\n/** Case states in the order a case moves through them. */\nexport const STATUS_LABEL: Record<ServiceCaseStatus, string> = {\n  open: 'Open',\n  waiting_on_potter: 'Waiting on us',\n  waiting_on_tenant: 'Waiting on merchant',\n  waiting_on_customer: 'Waiting on customer',\n  resolved: 'Resolved',\n  closed: 'Closed',\n};\n\nexport const PRIORITY_LABEL: Record<ServiceCasePriority, string> = {\n  low: 'Low',\n  normal: 'Normal',\n  high: 'High',\n  urgent: 'Urgent',\n};\n\nexport const STATUS_OPTIONS = Object.entries(STATUS_LABEL).map(\n  ([value, label]) => ({ value, label }),\n);\nexport const PRIORITY_OPTIONS = Object.entries(PRIORITY_LABEL).map(\n  ([value, label]) => ({ value, label }),\n);\n\nexport function statusTone(status: ServiceCaseStatus): Tone {\n  if (status === 'open' || status === 'waiting_on_potter') return 'primary';\n  return 'secondary';\n}\n\n/**\n * Semantic tokens only: brand while the case is in flight with us, wait\n * while someone else has the ball, ok once solved, grey once closed.\n */\nexport const STATUS_COLOR: Record<ServiceCaseStatus, string> = {\n  open: 'var(--brand-500)',\n  waiting_on_potter: 'var(--brand-700)',\n  waiting_on_tenant: 'var(--adm-wait)',\n  waiting_on_customer: 'var(--adm-wait)',\n  resolved: 'var(--adm-ok)',\n  closed: 'var(--text-tertiary)',\n};\n\nexport const PRIORITY_COLOR: Record<ServiceCasePriority, string> = {\n  urgent: 'var(--error)',\n  high: 'var(--brand-700)',\n  normal: 'var(--brand-400)',\n  low: 'var(--text-tertiary)',\n};\n\n/** Where the case can go next from the queue's row menu. */\nexport const NEXT_STATUSES: ServiceCaseStatus[] = [\n  'waiting_on_potter',\n  'waiting_on_tenant',\n  'resolved',\n  'closed',\n];\n\nexport function priorityTone(priority: ServiceCasePriority): Tone {\n  if (priority === 'urgent') return 'error';\n  if (priority === 'high') return 'primary';\n  return 'secondary';\n}\n\n/** \"billing_issue\" → \"Billing issue\". */\nexport function humanize(value: string) {\n  const text = value.replaceAll('_', ' ');\n  return text.charAt(0).toUpperCase() + text.slice(1);\n}\n\n/** Long IDs keep both ends, so two can still be told apart. */\nexport function middle(id: string, keep = 8) {\n  return id.length > keep * 2 ? `${id.slice(0, keep)}…${id.slice(-4)}` : id;\n}\n\nexport function dateTime(value: string | null | undefined) {\n  if (!value) return '–';\n  const date = new Date(value);\n  return Number.isNaN(date.getTime())\n    ? '–'\n    : new Intl.DateTimeFormat(undefined, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      }).format(date);\n}\n\n/** Minutes, hours or days, whichever reads shortest. */\nexport function duration(ms: number) {\n  const minutes = ms / 60_000;\n  if (minutes < 60) return `${Math.max(1, Math.round(minutes))}m`;\n  const hours = minutes / 60;\n  if (hours < 48) return `${hours.toFixed(1)}h`;\n  return `${(hours / 24).toFixed(1)}d`;\n}\n"],"mappings":"AASO,MAAM,eAAkD;AAAA,EAC7D,MAAM;AAAA,EACN,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,QAAQ;AACV;AAEO,MAAM,iBAAsD;AAAA,EACjE,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;AAEO,MAAM,iBAAiB,OAAO,QAAQ,YAAY,EAAE;AAAA,EACzD,CAAC,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,MAAM;AACtC;AACO,MAAM,mBAAmB,OAAO,QAAQ,cAAc,EAAE;AAAA,EAC7D,CAAC,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,MAAM;AACtC;AAEO,SAAS,WAAW,QAAiC;AAC1D,MAAI,WAAW,UAAU,WAAW,oBAAqB,QAAO;AAChE,SAAO;AACT;AAMO,MAAM,eAAkD;AAAA,EAC7D,MAAM;AAAA,EACN,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,QAAQ;AACV;AAEO,MAAM,iBAAsD;AAAA,EACjE,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AACP;AAGO,MAAM,gBAAqC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,SAAS,aAAa,UAAqC;AAChE,MAAI,aAAa,SAAU,QAAO;AAClC,MAAI,aAAa,OAAQ,QAAO;AAChC,SAAO;AACT;AAGO,SAAS,SAAS,OAAe;AACtC,QAAM,OAAO,MAAM,WAAW,KAAK,GAAG;AACtC,SAAO,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,KAAK,MAAM,CAAC;AACpD;AAGO,SAAS,OAAO,IAAY,OAAO,GAAG;AAC3C,SAAO,GAAG,SAAS,OAAO,IAAI,GAAG,GAAG,MAAM,GAAG,IAAI,CAAC,SAAI,GAAG,MAAM,EAAE,CAAC,KAAK;AACzE;AAEO,SAAS,SAAS,OAAkC;AACzD,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,IAC9B,WACA,IAAI,KAAK,eAAe,QAAW;AAAA,IACjC,WAAW;AAAA,IACX,WAAW;AAAA,EACb,CAAC,EAAE,OAAO,IAAI;AACpB;AAGO,SAAS,SAAS,IAAY;AACnC,QAAM,UAAU,KAAK;AACrB,MAAI,UAAU,GAAI,QAAO,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,CAAC,CAAC;AAC5D,QAAM,QAAQ,UAAU;AACxB,MAAI,QAAQ,GAAI,QAAO,GAAG,MAAM,QAAQ,CAAC,CAAC;AAC1C,SAAO,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC;AACnC;","names":[]}

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

@@ -0,0 +1,82 @@
+/* Cells in the support queue: identity, subject with a preview, signals. */
+
+.stack {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.assignee {
+  display: block;
+  color: var(--text-primary);
+  line-height: 20px;
+}
+
+.assignee,
+.primary,
+.secondary,
+.subject,
+.preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.primary,
+.subject {
+  color: var(--text-primary);
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.subject {
+  font-weight: 600;
+}
+
+.secondary,
+.preview {
+  color: var(--text-tertiary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.previewLine {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+/* The full reference, never cut: it is how merchants quote a case. */
+.reference {
+  flex-shrink: 0;
+  padding: 0 4px;
+  border-radius: 10px;
+  background: var(--adm-hover);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.muted {
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.ageCell {
+  color: var(--text-secondary);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.actionCell {
+  text-align: right;
+}
+
+.empty {
+  padding: 24px 16px;
+  text-align: center;
+}

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

@@ -0,0 +1,174 @@
+/* The case conversation as chat bubbles: them left, us right, notes faintly warm. */
+
+.section {
+  display: grid;
+  gap: 12px;
+}
+
+.thread {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dayMarker {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 12px;
+  margin: 8px 0 12px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.dayMarker::before,
+.dayMarker::after {
+  flex: 1;
+  height: 1px;
+  background: var(--border-subtle);
+  content: '';
+}
+
+.thread > li {
+  min-width: 0;
+}
+
+/* Bubbles sit right or centre by auto margins, never flex-end: an over-wide
+   bubble then grows rightward into the pane instead of off its left edge. */
+.row {
+  display: flex;
+  min-width: 0;
+}
+
+.row[data-side='us'] .bubble {
+  margin-left: auto;
+}
+
+.row[data-side='system'] .bubble {
+  margin-inline: auto;
+}
+
+.bubble {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+  max-width: 80%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: 8px 12px 12px;
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  color: var(--text-primary);
+}
+
+.row[data-side='us'] .bubble {
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-base));
+}
+
+.row[data-internal] .bubble {
+  background: color-mix(in srgb, var(--adm-wait) 6%, var(--bg-base));
+}
+
+.row[data-side='system'] .bubble {
+  max-width: 100%;
+  border-radius: 10px;
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.row[data-internal] .meta {
+  color: var(--text-secondary);
+}
+
+.author {
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.time {
+  margin-left: auto;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.body {
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.attachments {
+  display: grid;
+  gap: 8px;
+  padding-top: 8px;
+}
+
+.media {
+  display: grid;
+  gap: 4px;
+}
+
+.media audio,
+.media video {
+  width: 100%;
+}
+
+.media video {
+  max-height: 320px;
+  border-radius: 10px;
+  background: var(--bg-muted);
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.fileName {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.fileLink {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  color: var(--accent-ink, var(--accent-primary));
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+}