@catandbox/schrodinger-web-adapter 0.1.28 → 0.1.33

package/README.md

@@ -0,0 +1,174 @@
+# @catandbox/schrodinger-web-adapter
+
+Framework-agnostic web adapter for [Schrodinger](https://github.com/yetone/schrodinger) — an AI-powered headless helpdesk built on Cloudflare Workers.
+
+This package provides everything needed to embed a full customer-facing support portal into any web app, plus the server-side Shopify proxy and webhook utilities. **No React dependency** — the UI renders with [Shopify Polaris Web Components](https://shopify.dev/docs/api/app-home/polaris-web-components).
+
+## Installation
+
+```bash
+npm install @catandbox/schrodinger-web-adapter
+```
+
+## Package exports
+
+| Entry point | Contents |
+|---|---|
+| `@catandbox/schrodinger-web-adapter/client` | Portal UI renderer + `SupportApiClient` |
+| `@catandbox/schrodinger-web-adapter/server` | Shopify proxy handler, webhook forwarders, auth utilities |
+| `@catandbox/schrodinger-web-adapter/signer` | HMAC request signing primitives |
+
+---
+
+## Client — portal UI
+
+Renders a complete support portal (ticket list → detail → new ticket form) into any `HTMLElement`. Requires Polaris Web Components to be loaded on the page.
+
+```ts
+import { renderSupportPortal } from "@catandbox/schrodinger-web-adapter/client";
+
+const container = document.getElementById("support-root")!;
+
+await renderSupportPortal(container, {
+  basePath: "/support/api",     // path where the server proxy is mounted
+  // headers: { "Authorization": "Bearer ..." },
+  // getHeaders: async () => ({ "Authorization": `Bearer ${await getToken()}` }),
+});
+```
+
+### Individual renderers
+
+You can also render each view independently:
+
+```ts
+import {
+  renderTicketList,
+  renderTicketDetail,
+  renderNewTicketForm,
+  EventEmitter,
+} from "@catandbox/schrodinger-web-adapter/client";
+
+const emitter = new EventEmitter();
+
+await renderTicketList(container, client, emitter);
+// emitter emits "ticket:select", "ticket:create"
+
+await renderTicketDetail(container, client, ticketId, emitter);
+// emitter emits "ticket:back", "ticket:closed", "ticket:reopened"
+
+await renderNewTicketForm(container, client, categories, emitter);
+// emitter emits "ticket:created", "ticket:cancel"
+```
+
+### SupportApiClient
+
+The API client is re-exported for convenience — see [`@catandbox/schrodinger-contracts`](https://www.npmjs.com/package/@catandbox/schrodinger-contracts) for full documentation.
+
+```ts
+import { SupportApiClient } from "@catandbox/schrodinger-web-adapter/client";
+
+const client = new SupportApiClient({ basePath: "/support/api" });
+const { items } = await client.listTickets();
+```
+
+---
+
+## Server — Shopify proxy
+
+The server module provides a ready-made HTTP proxy that sits between your Shopify app's frontend and the Schrodinger API. It verifies the Shopify session token on every request and signs outbound calls with HMAC credentials.
+
+```ts
+import { createShopifyProxyHandler } from "@catandbox/schrodinger-web-adapter/server";
+
+const handler = createShopifyProxyHandler({
+  schApiBaseUrl: "https://your-schrodinger-api.example.com",
+  schAppId: env.SCH_APP_ID,
+  schKeyId: env.SCH_KEY_ID,
+  schSecret: env.SCH_SECRET,
+  shopifyApiKey: env.SHOPIFY_API_KEY,
+  shopifyApiSecret: env.SHOPIFY_API_SECRET,
+  basePath: "/support/api",   // optional, default: "/support/api"
+});
+
+// Cloudflare Workers / any fetch-based runtime:
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return handler(request);
+  },
+};
+```
+
+### GDPR webhook forwarding
+
+```ts
+import { createShopifyWebhookHandlers } from "@catandbox/schrodinger-web-adapter/server";
+
+const webhooks = createShopifyWebhookHandlers({
+  schApiBaseUrl: "https://your-schrodinger-api.example.com",
+  schAdminApiToken: env.SCH_ADMIN_API_TOKEN,
+  shopifyApiKey: env.SHOPIFY_API_KEY,
+  shopifyApiSecret: env.SHOPIFY_API_SECRET,
+  // called on app/uninstalled to revoke portal access:
+  disablePortalAccess: async ({ shopDomain }) => { /* ... */ },
+});
+
+// Wire up to your router:
+router.post("/webhooks/customers/data_request", webhooks.handleCustomersDataRequestWebhook);
+router.post("/webhooks/customers/redact",        webhooks.handleCustomersRedactWebhook);
+router.post("/webhooks/shop/redact",             webhooks.handleShopRedactWebhook);
+router.post("/webhooks/app/uninstalled",         webhooks.handleAppUninstalledWebhook);
+```
+
+### Auth utilities
+
+```ts
+import {
+  createPrincipalContext,
+  verifyShopifySessionToken,
+  verifyShopifyWebhookHmac,
+  ShopifyAuthError,
+} from "@catandbox/schrodinger-web-adapter/server";
+
+// Verify a Shopify session JWT and extract principal info
+const principal = await createPrincipalContext(request, {
+  shopifyApiKey: env.SHOPIFY_API_KEY,
+  shopifyApiSecret: env.SHOPIFY_API_SECRET,
+});
+// principal.tenantExternalId — shop domain
+// principal.principalExternalId — customer identifier
+```
+
+---
+
+## Signer — HMAC request signing
+
+Low-level primitives for signing requests to the Schrodinger API with `HMAC-SHA256`. Useful when making server-to-server calls outside of the proxy handler.
+
+```ts
+import { signRequest, sha256Hex } from "@catandbox/schrodinger-web-adapter/signer";
+
+const headers = await signRequest({
+  appId: "my-app",
+  keyId: "key-1",
+  keySecret: "secret",
+  timestamp: Math.floor(Date.now() / 1000),
+  nonce: crypto.randomUUID(),
+  method: "POST",
+  path: "/v1/tickets",
+  rawBody: JSON.stringify({ title: "Hello" }),
+});
+
+// headers["X-Sch-AppId"], ["X-Sch-KeyId"], ["X-Sch-Timestamp"],
+//        ["X-Sch-Nonce"], ["Content-SHA256"], ["X-Sch-Signature"]
+```
+
+---
+
+## Requirements
+
+- **Runtime**: any environment with `fetch`, `crypto.subtle`, and `TextEncoder` (Cloudflare Workers, modern browsers, Node.js ≥ 18)
+- **UI**: Polaris Web Components must be loaded on the page before calling client renderers
+
+## License
+
+MIT

package/dist/client/file-upload.d.ts

@@ -1,4 +1,4 @@
-import type { SupportApiClient } from "@catandbox/schrodinger-shopify-adapter/client";
+import type { SupportApiClient } from "@catandbox/schrodinger-contracts";
 interface SelectedFile {
     file: File;
     id: string;

package/dist/client/index.d.ts

@@ -2,8 +2,8 @@
  * Client-side exports — Vanilla TS + Polaris Web Components UI.
  * No React dependency.
  */
-export { SupportApiClient, SupportApiError } from "@catandbox/schrodinger-shopify-adapter/client";
-export type { ClientHeadersProvider, ListTicketsParams, SupportCategory, SupportClientOptions, TicketDetailData, UploadCompleteInput, UploadInitResult, UploadInputFile } from "@catandbox/schrodinger-shopify-adapter/client";
+export { SupportApiClient, SupportApiError } from "@catandbox/schrodinger-contracts";
+export type { ClientHeadersProvider, ListTicketsParams, SupportCategory, SupportClientOptions, TicketDetailData, UploadCompleteInput, UploadInitResult, UploadInputFile } from "@catandbox/schrodinger-contracts";
 export { renderSupportPortal } from "./portal";
 export type { SupportPortalOptions } from "./portal";
 export { renderTicketList } from "./ticket-list";

package/dist/client/index.js

@@ -2,8 +2,7 @@
  * Client-side exports — Vanilla TS + Polaris Web Components UI.
  * No React dependency.
  */
-// Re-export the pure-fetch API client from the React adapter
-export { SupportApiClient, SupportApiError } from "@catandbox/schrodinger-shopify-adapter/client";
+export { SupportApiClient, SupportApiError } from "@catandbox/schrodinger-contracts";
 // Vanilla rendering functions
 export { renderSupportPortal } from "./portal";
 export { renderTicketList } from "./ticket-list";

package/dist/client/new-ticket-form.d.ts

@@ -1,4 +1,4 @@
-import type { SupportApiClient, SupportCategory } from "@catandbox/schrodinger-shopify-adapter/client";
+import type { SupportApiClient, SupportCategory } from "@catandbox/schrodinger-contracts";
 import type { EventEmitter } from "./events";
 export interface NewTicketFormEvents {
     [key: string]: unknown;

package/dist/client/portal.d.ts

@@ -1,4 +1,4 @@
-import type { SupportClientOptions, SupportCategory } from "@catandbox/schrodinger-shopify-adapter/client";
+import type { SupportClientOptions, SupportCategory } from "@catandbox/schrodinger-contracts";
 export interface SupportPortalOptions extends SupportClientOptions {
     /** Pre-loaded categories. If omitted, categories are fetched from the API. */
     categories?: SupportCategory[];

package/dist/client/portal.js

@@ -1,4 +1,4 @@
-import { SupportApiClient } from "@catandbox/schrodinger-shopify-adapter/client";
+import { SupportApiClient } from "@catandbox/schrodinger-contracts";
 import { EventEmitter } from "./events";
 import { renderTicketList } from "./ticket-list";
 import { renderTicketDetail } from "./ticket-detail";
@@ -35,6 +35,7 @@ export async function renderSupportPortal(container, options = {}) {
       </s-card>
     `;
     }
+    const locale = options.locale;
     async function navigate(view, ticketId) {
         currentView = view;
         if (ticketId !== undefined) {
@@ -44,11 +45,11 @@ export async function renderSupportPortal(container, options = {}) {
         showLoading();
         switch (currentView) {
             case "list":
-                await renderTicketList(container, client, emitter);
+                await renderTicketList(container, client, emitter, locale);
                 break;
             case "detail":
                 if (selectedTicketId) {
-                    await renderTicketDetail(container, client, selectedTicketId, emitter);
+                    await renderTicketDetail(container, client, selectedTicketId, emitter, locale);
                 }
                 break;
             case "create":

package/dist/client/status-badge.js

@@ -1,9 +1,9 @@
 const STATUS_CONFIG = {
     Active: { label: "Active", tone: "info" },
-    InProgress: { label: "In Progress", tone: "attention" },
+    InProgress: { label: "In Progress", tone: "caution" },
     AwaitingResponse: { label: "Awaiting Response", tone: "warning" },
     Closed: { label: "Closed", tone: "success" },
-    Archived: { label: "Archived", tone: "subdued" }
+    Archived: { label: "Archived", tone: "neutral" }
 };
 export function renderStatusBadge(status) {
     const config = STATUS_CONFIG[status] ?? { label: status, tone: "subdued" };

package/dist/client/ticket-detail.d.ts

@@ -1,4 +1,4 @@
-import type { SupportApiClient } from "@catandbox/schrodinger-shopify-adapter/client";
+import type { SupportApiClient } from "@catandbox/schrodinger-contracts";
 import type { EventEmitter } from "./events";
 export interface TicketDetailEvents {
     [key: string]: unknown;
@@ -6,4 +6,4 @@ export interface TicketDetailEvents {
     "ticket:closed": string;
     "ticket:reopened": string;
 }
-export declare function renderTicketDetail(container: HTMLElement, client: SupportApiClient, ticketId: string, emitter: EventEmitter<TicketDetailEvents>): Promise<void>;
+export declare function renderTicketDetail(container: HTMLElement, client: SupportApiClient, ticketId: string, emitter: EventEmitter<TicketDetailEvents>, locale?: string): Promise<void>;

package/dist/client/ticket-detail.js

@@ -1,22 +1,22 @@
 import { renderStatusBadge } from "./status-badge";
 import { createFileUpload } from "./file-upload";
 import { setInnerHtml, escapeHtml, formatBodyText, renderFormattingField, attachFormattingField } from "./dom-utils";
-function formatTimestamp(timestamp) {
+function formatTimestamp(timestamp, locale) {
     const date = new Date(timestamp * 1000);
     const now = new Date();
     const isToday = date.toDateString() === now.toDateString();
     if (isToday) {
-        return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+        return date.toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" });
     }
-    return date.toLocaleDateString(undefined, {
+    return date.toLocaleDateString(locale, {
         month: "short",
         day: "numeric",
         hour: "numeric",
         minute: "2-digit"
     });
 }
-function formatFullDate(timestamp) {
-    return new Date(timestamp * 1000).toLocaleDateString(undefined, {
+function formatFullDate(timestamp, locale) {
+    return new Date(timestamp * 1000).toLocaleDateString(locale, {
         month: "long",
         day: "numeric",
         year: "numeric",
@@ -24,13 +24,13 @@ function formatFullDate(timestamp) {
         minute: "2-digit"
     });
 }
-export async function renderTicketDetail(container, client, ticketId, emitter) {
+export async function renderTicketDetail(container, client, ticketId, emitter, locale) {
     container.innerHTML = `
     <s-card>
       <s-box padding="large">
-        <div style="display:flex; justify-content:center; padding:32px 0;">
-          <s-spinner size="small"></s-spinner>
-        </div>
+        <s-stack direction="inline" justifyContent="center" padding="large none">
+          <s-spinner></s-spinner>
+        </s-stack>
       </s-box>
     </s-card>
   `;
@@ -44,89 +44,89 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
         const aliasMap = new Map(portalConfig.aliases.map((a) => [a.id, a]));
         const assignedAlias = ticket.assignedAliasId ? (aliasMap.get(ticket.assignedAliasId) ?? null) : null;
         setInnerHtml(container, `
-      <s-card>
-        <s-box padding="large">
-          <s-stack gap="large">
-            <div>
-              <s-button variant="plain" id="sch-back-btn">
-                <span style="display:inline-flex; align-items:center; gap:4px;">
-                  <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M12.707 15.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L8.414 10l4.293 4.293a1 1 0 0 1 0 1.414z"/></svg>
-                  All tickets
-                </span>
-              </s-button>
-            </div>
+      <s-stack gap="base">
+        <s-card>
+          <s-box padding="large">
+            <s-stack gap="large">
+              <div>
+                <s-button variant="tertiary" id="sch-back-btn">
+                  <span style="display:inline-flex; align-items:center; gap:4px;">
+                    <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M12.707 15.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L8.414 10l4.293 4.293a1 1 0 0 1 0 1.414z"/></svg>
+                    All tickets
+                  </span>
+                </s-button>
+              </div>
 
-            <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:16px;">
-              <div style="min-width:0; flex:1;">
-                <s-text variant="headingLg">${escapeHtml(ticket.title)}</s-text>
-                <div style="margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
-                  ${renderStatusBadge(ticket.status)}
-                  <s-text variant="bodySm" tone="subdued">#${ticket.id.slice(0, 8)}</s-text>
-                  <s-text variant="bodySm" tone="subdued">&middot;</s-text>
-                  <s-text variant="bodySm" tone="subdued">Created ${formatFullDate(ticket.createdAt)}</s-text>
+              <s-stack direction="inline" justifyContent="space-between" alignItems="start" gap="base">
+                <div style="min-width:0; flex:1;">
+                  <s-heading>${escapeHtml(ticket.title)}</s-heading>
+                  <s-stack direction="inline" alignItems="center" gap="small" style="margin-top:4px; flex-wrap:wrap;">
+                    ${renderStatusBadge(ticket.status)}
+                    <s-text tone="neutral">#${ticket.id.slice(0, 8)}</s-text>
+                    <s-text tone="neutral">&middot;</s-text>
+                    <s-text tone="neutral">Created ${formatFullDate(ticket.createdAt, locale)}</s-text>
+                  </s-stack>
                 </div>
-              </div>
-              ${!isOpen ? `<s-button id="sch-reopen-ticket-btn" size="slim">Reopen</s-button>` : ""}
-            </div>
-          </s-stack>
-        </s-box>
-      </s-card>
+                ${!isOpen ? `<s-button id="sch-reopen-ticket-btn">Reopen</s-button>` : ""}
+              </s-stack>
+            </s-stack>
+          </s-box>
+        </s-card>
 
-      ${assignedAlias
+        ${assignedAlias
             ? `
-      <s-card style="margin-top:16px;">
-        <s-box padding="base large">
-          <div style="display:flex; align-items:center; gap:10px;">
-            <div style="width:36px; height:36px; border-radius:50%; background:var(--p-color-bg-fill-info, #e4f0fe); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
-              <span style="font-size:13px; font-weight:700; color:var(--p-color-text-info, #2c6ecb);">${escapeHtml(getInitials(assignedAlias.displayName))}</span>
-            </div>
-            <div>
-              <s-text variant="bodySm" fontWeight="semibold">${escapeHtml(assignedAlias.displayName)}</s-text>
-              <div><s-text variant="bodySm" tone="subdued">${escapeHtml(assignedAlias.department)}</s-text></div>
-            </div>
-          </div>
-        </s-box>
-      </s-card>`
+        <s-card>
+          <s-box padding="base large">
+            <s-stack direction="inline" alignItems="center" gap="small">
+              <s-avatar size="base" initials="${escapeHtml(getInitials(assignedAlias.displayName))}"${assignedAlias.avatarUrl ? ` src="${escapeHtml(assignedAlias.avatarUrl)}"` : ""}></s-avatar>
+              <div>
+                <s-text type="strong">${escapeHtml(assignedAlias.displayName)}</s-text>
+                <div><s-text tone="neutral">${escapeHtml(assignedAlias.department)}</s-text></div>
+              </div>
+            </s-stack>
+          </s-box>
+        </s-card>`
             : ""}
 
-      <div id="sch-messages-list" style="margin-top:16px;">
-        ${messages.length === 0
+        <div id="sch-messages-list">
+          ${messages.length === 0
             ? `
-          <s-card>
-            <s-box padding="large">
-              <div style="text-align:center; padding:24px 0;">
-                <s-text tone="subdued">No messages yet. Our team will respond shortly.</s-text>
-              </div>
-            </s-box>
-          </s-card>`
-            : `<div style="display:flex; flex-direction:column; gap:2px;">
-              ${messages.map((msg) => renderMessage(msg, aliasMap.get(msg.authorAliasId ?? "") ?? null)).join("")}
-            </div>`}
-      </div>
+            <s-card>
+              <s-box padding="large">
+                <div style="text-align:center; padding:24px 0;">
+                  <s-text tone="neutral">No messages yet. Our team will respond shortly.</s-text>
+                </div>
+              </s-box>
+            </s-card>`
+            : `<s-stack gap="small-100">
+                ${messages.map((msg) => renderMessage(msg, aliasMap.get(msg.authorAliasId ?? "") ?? null, locale)).join("")}
+              </s-stack>`}
+        </div>
 
-      ${isOpen
+        ${isOpen
             ? `
-        <s-card style="margin-top:16px;">
-          <s-box padding="large">
-            <div id="sch-reply-section">
-              <s-stack gap="base">
-                <s-text variant="headingSm">Reply</s-text>
-                ${renderFormattingField({
+          <s-card>
+            <s-box padding="large">
+              <div id="sch-reply-section">
+                <s-stack gap="base">
+                  <s-heading>Reply</s-heading>
+                  ${renderFormattingField({
                 id: "sch-reply-body",
                 rows: 4,
                 placeholder: "Write your reply...",
                 extraStyle: "resize:vertical"
             })}
-                <div id="sch-reply-files"></div>
-                <div style="display:flex; justify-content:space-between; align-items:center;">
-                  <s-button id="sch-close-ticket-btn">Close Ticket</s-button>
-                  <s-button variant="primary" id="sch-send-reply-btn">Send Reply</s-button>
-                </div>
-              </s-stack>
-            </div>
-          </s-box>
-        </s-card>`
+                  <div id="sch-reply-files"></div>
+                  <s-stack direction="inline" justifyContent="space-between" alignItems="center">
+                    <s-button id="sch-close-ticket-btn">Close Ticket</s-button>
+                    <s-button variant="primary" id="sch-send-reply-btn">Send Reply</s-button>
+                  </s-stack>
+                </s-stack>
+              </div>
+            </s-box>
+          </s-card>`
             : ""}
+      </s-stack>
     `);
         // Back button
         container.querySelector("#sch-back-btn")?.addEventListener("click", () => {
@@ -198,10 +198,10 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
       <s-card>
         <s-box padding="large">
           <s-stack gap="base">
-            <s-banner tone="critical">
-              <s-text>Failed to load ticket: ${escapeHtml(error instanceof Error ? error.message : String(error))}</s-text>
+            <s-banner tone="critical" heading="Failed to load ticket">
+              <s-text>${escapeHtml(error instanceof Error ? error.message : String(error))}</s-text>
             </s-banner>
-            <s-button variant="plain" id="sch-back-btn">
+            <s-button variant="tertiary" id="sch-back-btn">
               <span style="display:inline-flex; align-items:center; gap:4px;">
                 <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M12.707 15.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L8.414 10l4.293 4.293a1 1 0 0 1 0 1.414z"/></svg>
                 All tickets
@@ -223,46 +223,42 @@ function getInitials(displayName) {
     }
     return displayName.slice(0, 2).toUpperCase();
 }
-function renderMessage(msg, alias) {
+function renderMessage(msg, alias, locale) {
     const isSystem = msg.authorType === "system";
     const isAgent = msg.authorType === "agent" || msg.authorType === "admin";
     const isCustomer = !isSystem && !isAgent;
     if (isSystem) {
         return `
       <div style="text-align:center; padding:12px 0;">
-        <s-text variant="bodySm" tone="subdued">${escapeHtml(msg.bodyPlain)}</s-text>
+        <s-text tone="neutral">${escapeHtml(msg.bodyPlain)}</s-text>
       </div>
     `;
     }
-    const avatarBg = isAgent
-        ? "var(--p-color-bg-fill-info, #e4f0fe)"
-        : "var(--p-color-bg-fill-success, #cdfee1)";
-    const avatarColor = isAgent
-        ? "var(--p-color-text-info, #2c6ecb)"
-        : "var(--p-color-text-success, #008060)";
-    const avatarLetter = isAgent ? (alias ? getInitials(alias.displayName) : "S") : "Y";
+    const avatarInitials = isAgent ? (alias ? getInitials(alias.displayName) : "S") : "Y";
+    const avatarSrc = isAgent && alias?.avatarUrl ? ` src="${escapeHtml(alias.avatarUrl)}"` : "";
     const label = isAgent ? (alias ? alias.displayName : "Support") : "You";
     const bubbleBg = isCustomer
         ? "var(--p-color-bg-fill-info, #e4f0fe)"
         : "var(--p-color-bg-surface-secondary, #f6f6f7)";
-    const align = isCustomer ? "flex-end" : "flex-start";
-    const flexDir = isCustomer ? "row-reverse" : "row";
-    return `
-    <div style="display:flex; align-items:flex-start; gap:10px; flex-direction:${flexDir}; padding:10px 0; max-width:85%${isCustomer ? "; margin-left:auto" : ""}">
-      <div style="width:32px; height:32px; border-radius:50%; background:${avatarBg}; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
-        <span style="font-size:13px; font-weight:600; color:${avatarColor};">${avatarLetter}</span>
-      </div>
-      <div style="min-width:0; text-align:${isCustomer ? "right" : "left"};">
-        <div style="display:flex; align-items:baseline; gap:8px; justify-content:${align}; margin-bottom:4px;">
-          <s-text variant="bodySm" fontWeight="semibold">${label}</s-text>
-          <s-text variant="bodySm" tone="subdued">${formatTimestamp(msg.createdAt)}</s-text>
-        </div>
-        <div style="background:${bubbleBg}; padding:10px 14px; border-radius:12px; display:inline-block; text-align:left; max-width:100%;">
-          <s-text variant="bodyMd" style="white-space:pre-wrap; word-break:break-word;">${formatBodyText(msg.bodyPlain)}</s-text>
-        </div>
+    const avatar = `<s-avatar size="small" initials="${escapeHtml(avatarInitials)}"${avatarSrc}></s-avatar>`;
+    const content = `
+    <div style="min-width:0;">
+      <s-stack direction="inline" alignItems="baseline" gap="small" justifyContent="${isCustomer ? "end" : "start"}" style="margin-bottom:4px;">
+        <s-text type="strong">${label}</s-text>
+        <s-text tone="neutral">${formatTimestamp(msg.createdAt, locale)}</s-text>
+      </s-stack>
+      <div style="background:${bubbleBg}; padding:10px 14px; border-radius:12px; display:inline-block; text-align:left; max-width:100%;">
+        <s-text style="white-space:pre-wrap; word-break:break-word;">${formatBodyText(msg.bodyPlain)}</s-text>
       </div>
     </div>
   `;
+    return `
+    <div style="padding:10px 0; max-width:85%;${isCustomer ? " margin-left:auto;" : ""}">
+      <s-stack direction="inline" alignItems="start" gap="small">
+        ${isCustomer ? content + avatar : avatar + content}
+      </s-stack>
+    </div>
+  `;
 }
 function showError(container, message) {
     const existing = container.querySelector("#sch-error-banner");
@@ -271,7 +267,7 @@ function showError(container, message) {
     const banner = document.createElement("div");
     banner.id = "sch-error-banner";
     setInnerHtml(banner, `
-    <s-banner tone="critical" style="margin-bottom:12px;">
+    <s-banner tone="critical" heading="Error" style="margin-bottom:12px;">
       <s-text>${escapeHtml(message)}</s-text>
     </s-banner>
   `);

package/dist/client/ticket-list.d.ts

@@ -1,8 +1,8 @@
-import type { SupportApiClient } from "@catandbox/schrodinger-shopify-adapter/client";
+import type { SupportApiClient } from "@catandbox/schrodinger-contracts";
 import type { EventEmitter } from "./events";
 export interface TicketListEvents {
     [key: string]: unknown;
     "ticket:select": string;
     "ticket:create": void;
 }
-export declare function renderTicketList(container: HTMLElement, client: SupportApiClient, emitter: EventEmitter<TicketListEvents>): Promise<void>;
+export declare function renderTicketList(container: HTMLElement, client: SupportApiClient, emitter: EventEmitter<TicketListEvents>, locale?: string): Promise<void>;

package/dist/client/ticket-list.js

@@ -164,27 +164,28 @@ function initHydrogenLogo(el) {
         renderer.dispose();
     };
 }
-function formatDate(timestamp) {
-    return new Date(timestamp * 1000).toLocaleDateString(undefined, {
+function formatDate(timestamp, locale) {
+    return new Date(timestamp * 1000).toLocaleDateString(locale, {
         month: "short",
         day: "numeric",
         year: "numeric"
     });
 }
-function timeAgo(timestamp) {
+function timeAgo(timestamp, locale) {
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
     const seconds = Math.floor(Date.now() / 1000 - timestamp);
     if (seconds < 60)
-        return "just now";
+        return rtf.format(-seconds, "second");
     const minutes = Math.floor(seconds / 60);
     if (minutes < 60)
-        return `${minutes}m ago`;
+        return rtf.format(-minutes, "minute");
     const hours = Math.floor(minutes / 60);
     if (hours < 24)
-        return `${hours}h ago`;
+        return rtf.format(-hours, "hour");
     const days = Math.floor(hours / 24);
     if (days < 7)
-        return `${days}d ago`;
-    return formatDate(timestamp);
+        return rtf.format(-days, "day");
+    return formatDate(timestamp, locale);
 }
 const STATUS_OPTIONS = [
     { value: "", label: "All statuses" },
@@ -198,7 +199,7 @@ const ORDER_OPTIONS = [
     { value: "newest", label: "Latest first" },
     { value: "oldest", label: "Oldest first" }
 ];
-export async function renderTicketList(container, client, emitter) {
+export async function renderTicketList(container, client, emitter, locale) {
     // Load tickets, categories and Three.js in parallel
     const [result, portalConfig] = await Promise.all([
         client.listTickets({}).catch(() => ({ items: [] })),
@@ -319,7 +320,7 @@ export async function renderTicketList(container, client, emitter) {
                 <s-text variant="bodyMd" fontWeight="semibold">${escapeHtml(ticket.title)}</s-text>
               </div>
               <div style="margin-top:2px;">
-                <s-text variant="bodySm" tone="subdued">#${ticket.id.slice(0, 8)} &middot; Updated ${timeAgo(ticket.updatedAt)}</s-text>
+                <s-text variant="bodySm" tone="subdued">#${ticket.id.slice(0, 8)} &middot; Updated ${timeAgo(ticket.updatedAt, locale)}</s-text>
               </div>
             </div>
           </div>