@lightworkai.official/debug-capture 0.6.0 → 0.7.0

package/src/mytickets/api.ts

@@ -1,226 +0,0 @@
-/**
- * The reporter's own tickets, read back from a Lightwork Support host.
- *
- * Everything here goes to `/ingest/me`, which needs two things: the realm's
- * public key (which app is asking) and a host-signed identity token (who is
- * asking). See `identity` in config.ts for why the second one exists — without
- * it a public key would be enough to read anybody's reports.
- */
-import { getConfig } from "../config";
-
-/** A board column as the realm configured it. Only public lanes are returned. */
-export interface StatusColumn {
-  key: string;
-  label: string;
-  description: string;
-  color: string;
-  bucket: "active" | "closed";
-  awaitingReply: boolean;
-}
-
-export interface RealmConfig {
-  realm: { id: string; slug: string; name: string };
-  timezone: string;
-  statusColumns: StatusColumn[];
-  featureFlags: { selfServiceReopen?: boolean; attachments?: boolean; conversation?: boolean };
-  locale: { default: string; labels: Record<string, string> };
-}
-
-export interface TicketMessage {
-  id: string;
-  authorId: string | null;
-  authorName: string | null;
-  authorRole: "REPORTER" | "AGENT";
-  body: string;
-  createdAt: string;
-  editedAt: string | null;
-}
-
-export interface TicketAttachment {
-  id: string;
-  objectKey: string;
-  filename: string | null;
-  contentType: string | null;
-  sizeBytes: number | null;
-}
-
-export interface MyTicket {
-  id: string;
-  number: number;
-  title: string;
-  description: string | null;
-  category: string | null;
-  routeUrl: string | null;
-  status: string;
-  priority: string;
-  resolutionNote: string | null;
-  reopened: boolean;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface MyTicketListItem extends MyTicket {
-  messageCount: number;
-  /** How many replies came from the team — "has anyone answered me yet". */
-  agentReplyCount: number;
-  lastMessage: { at: string; authorRole: "REPORTER" | "AGENT"; preview: string } | null;
-}
-
-export interface MyTicketDetail extends MyTicket {
-  messages: TicketMessage[];
-  attachments: TicketAttachment[];
-}
-
-/** One recorded status change. Internal lanes are already resolved server-side. */
-export interface StatusEvent {
-  id: string;
-  fromStatus: string | null;
-  toStatus: string;
-  via: string;
-  createdAt: string;
-}
-
-/** Thrown with the server's own words, so a panel can say what went wrong. */
-export class TicketApiError extends Error {
-  constructor(
-    message: string,
-    readonly status: number,
-  ) {
-    super(message);
-  }
-}
-
-/** Raised when there is no signed-in reporter to ask about. */
-export class NoIdentityError extends Error {
-  constructor() {
-    super("[debug-capture] no reporter identity — configure `identity` to use the tickets panel");
-  }
-}
-
-function base(): string {
-  return getConfig().host.replace(/\/$/, "");
-}
-
-/**
- * The host's current identity token.
- *
- * Read per request rather than once at configure time: these are short-lived by
- * design, and a panel left open across lunch would otherwise hold a token that
- * expired an hour ago. Caching belongs on the host's side, where it knows when
- * it last minted one.
- */
-async function identityToken(): Promise<string> {
-  const read = getConfig().identity;
-  if (!read) throw new NoIdentityError();
-  const token = await read();
-  if (!token) throw new NoIdentityError();
-  return token;
-}
-
-async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
-  const token = await identityToken();
-  const res = await fetch(`${base()}/ingest/me${path}`, {
-    ...init,
-    headers: {
-      "x-realm-key": getConfig().realmKey,
-      authorization: `Bearer ${token}`,
-      ...(init.body ? { "content-type": "application/json" } : {}),
-      ...(init.headers as Record<string, string> | undefined),
-    },
-  });
-  if (!res.ok) {
-    const detail = await res
-      .json()
-      .then((b: { error?: string }) => b.error)
-      .catch(() => null);
-    throw new TicketApiError(detail ?? `Request failed (${res.status})`, res.status);
-  }
-  return (await res.json()) as T;
-}
-
-export async function listMyTickets(): Promise<MyTicketListItem[]> {
-  const { items } = await request<{ items: MyTicketListItem[] }>("/tickets");
-  return items;
-}
-
-export function getMyTicket(id: string): Promise<MyTicketDetail> {
-  return request<MyTicketDetail>(`/tickets/${encodeURIComponent(id)}`);
-}
-
-export function getMyTicketByNumber(num: number): Promise<MyTicketDetail> {
-  return request<MyTicketDetail>(`/tickets/by-number/${num}`);
-}
-
-/**
- * A short-lived URL for a file on one's own ticket.
- *
- * Fetched rather than pointed at: the endpoint needs the realm key and the
- * identity token, and an `<img>` or an `<a download>` cannot send a header.
- */
-export function getAttachmentUrl(attachmentId: string): Promise<{ url: string; filename: string | null }> {
-  return request<{ url: string; filename: string | null }>(`/attachments/${encodeURIComponent(attachmentId)}`);
-}
-
-export function getMyTicketHistory(id: string): Promise<StatusEvent[]> {
-  return request<StatusEvent[]>(`/tickets/${encodeURIComponent(id)}/history`);
-}
-
-export function replyToTicket(id: string, body: string): Promise<TicketMessage> {
-  return request<TicketMessage>(`/tickets/${encodeURIComponent(id)}/messages`, {
-    method: "POST",
-    body: JSON.stringify({ body }),
-  });
-}
-
-/**
- * Rewrite one's own reply.
- *
- * The server refuses any message the caller did not write — authorship, not
- * role — so this cannot touch the team's side of the thread.
- */
-export function editMyMessage(ticketId: string, messageId: string, body: string): Promise<TicketMessage> {
-  return request<TicketMessage>(
-    `/tickets/${encodeURIComponent(ticketId)}/messages/${encodeURIComponent(messageId)}`,
-    { method: "PUT", body: JSON.stringify({ body }) },
-  );
-}
-
-export function reopenMyTicket(id: string, note?: string): Promise<MyTicket> {
-  return request<MyTicket>(`/tickets/${encodeURIComponent(id)}/reopen`, {
-    method: "POST",
-    body: JSON.stringify({ note: note?.trim() || undefined }),
-  });
-}
-
-export function uploadInlineImage(id: string, dataUri: string, filename?: string): Promise<{ url: string }> {
-  return request<{ url: string }>(`/tickets/${encodeURIComponent(id)}/inline-image`, {
-    method: "POST",
-    body: JSON.stringify({ dataUri, filename }),
-  });
-}
-
-/**
- * The realm's status vocabulary. Public config, so no identity token — and
- * cached for the life of the page, because it changes when an admin edits the
- * board and not between two clicks of a list.
- */
-let configPromise: Promise<RealmConfig> | null = null;
-
-export function fetchRealmConfig(): Promise<RealmConfig> {
-  if (!configPromise) {
-    const key = encodeURIComponent(getConfig().realmKey);
-    configPromise = fetch(`${base()}/ingest/config?key=${key}`)
-      .then((res) => {
-        if (!res.ok) throw new TicketApiError(`Config failed (${res.status})`, res.status);
-        return res.json() as Promise<RealmConfig>;
-      })
-      // A failed fetch must not be remembered as the answer: the next open
-      // should try again rather than reuse a rejected promise forever.
-      .catch((e) => {
-        configPromise = null;
-        throw e;
-      });
-  }
-  return configPromise;
-}
-

package/src/mytickets/format.ts

@@ -1,191 +0,0 @@
-/**
- * The panel's decisions that are not DOM: how a ticket is named, dated, sorted,
- * searched and described. Pure, so they can be tested without a browser — which
- * matters here, because the DOM around them cannot be.
- */
-import type { MyTicketListItem, StatusColumn } from "./api";
-
-/**
- * `ROOT-1099`, from the realm's slug — the same key the board and the admin app
- * print, so a reporter quoting a number is quoting the one support will search
- * for. A realm with no usable slug falls back to `#1099` rather than inventing
- * a prefix.
- */
-export function ticketKey(slug: string | undefined, number: number): string {
-  const prefix = (slug ?? "").trim().toUpperCase().replace(/[^A-Z0-9]+/g, "");
-  return prefix ? `${prefix}-${number}` : `#${number}`;
-}
-
-/**
- * `24 พ.ค. 2568 13:00` — the original's `DD MMM BBBB HH:mm`, from the platform's
- * own Intl rather than a date library this package will not depend on.
- *
- * Formatted in the REALM's timezone, not the reader's. A support desk in
- * Bangkok and a reporter travelling in Berlin must not disagree about which day
- * a ticket was filed, and the realm is the side that also runs the "today"
- * filters.
- */
-export function formatDateTime(iso: string | null | undefined, timezone: string, locale: "th" | "en" | undefined): string {
-  if (!iso) return "—";
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return "—";
-  try {
-    return new Intl.DateTimeFormat(locale === "en" ? "en-GB" : "th-TH-u-ca-buddhist", {
-      dateStyle: "medium",
-      timeStyle: "short",
-      timeZone: timezone,
-    }).format(date);
-  } catch {
-    // An unknown timezone from config must not blank out every date on screen.
-    return date.toISOString().slice(0, 16).replace("T", " ");
-  }
-}
-
-/** Lookups over the realm's configured lanes, with sane answers for a key that isn't there. */
-export interface StatusMaps {
-  labelOf: (key: string) => string;
-  columnOf: (key: string) => StatusColumn | undefined;
-  isAwaitingReply: (key: string) => boolean;
-  isClosed: (key: string) => boolean;
-  /** Board order, for sorting a column of statuses the way the board reads. */
-  rankOf: (key: string) => number;
-  options: { value: string; label: string }[];
-}
-
-export function statusMaps(columns: StatusColumn[], allLabel: string): StatusMaps {
-  const byKey = new Map(columns.map((c) => [c.key, c]));
-  const order = columns.map((c) => c.key);
-  return {
-    // An unknown key prints itself rather than an empty pill: a lane deleted
-    // after a ticket entered it should still say something.
-    labelOf: (key) => byKey.get(key)?.label ?? key,
-    columnOf: (key) => byKey.get(key),
-    isAwaitingReply: (key) => byKey.get(key)?.awaitingReply === true,
-    isClosed: (key) => byKey.get(key)?.bucket === "closed",
-    rankOf: (key) => {
-      const i = order.indexOf(key);
-      return i === -1 ? order.length : i;
-    },
-    options: [{ value: "", label: allLabel }, ...columns.map((c) => ({ value: c.key, label: c.label }))],
-  };
-}
-
-/** Has the team written a solution note? */
-export function hasSolution(t: MyTicketListItem): boolean {
-  return Boolean(t.resolutionNote && t.resolutionNote.trim());
-}
-
-/** Has anyone from the team replied at all? */
-export function hasTeamReply(t: MyTicketListItem): boolean {
-  return t.agentReplyCount > 0;
-}
-
-/** Solution beats a reply beats silence — the order the column sorts in. */
-export function responseRank(t: MyTicketListItem): number {
-  return hasSolution(t) ? 2 : hasTeamReply(t) ? 1 : 0;
-}
-
-export type SortKey = "number" | "title" | "module" | "status" | "response" | "createdAt" | "updatedAt";
-
-export interface Sort {
-  key: SortKey;
-  direction: "asc" | "desc";
-}
-
-/**
- * Filter by what the reporter SEES.
- *
- * The haystack is the rendered row — key, title, module, status label — because
- * that is what someone searching has in front of them. Searching the raw status
- * key would match `IN_PROGRESS` for a lane the reader only ever saw called
- * กำลังดำเนินการ.
- */
-export function matchesKeyword(
-  t: MyTicketListItem,
-  keyword: string,
-  slug: string | undefined,
-  labelOf: (key: string) => string,
-): boolean {
-  const needle = keyword.trim().toLowerCase();
-  if (!needle) return true;
-  const hay = [ticketKey(slug, t.number), String(t.number), t.title, t.category ?? "", labelOf(t.status)]
-    .join(" ")
-    .toLowerCase();
-  return hay.includes(needle);
-}
-
-/**
- * Comparators for the orders a raw value compare gets wrong: status follows the
- * board rather than the alphabet, dates are chronological rather than
- * lexicographic, and the response column ranks by a signal that is not one field.
- */
-export function compareBy(sort: Sort, maps: StatusMaps, slug: string | undefined) {
-  const direction = sort.direction === "asc" ? 1 : -1;
-  return (a: MyTicketListItem, b: MyTicketListItem): number => {
-    let result = 0;
-    switch (sort.key) {
-      case "number":
-        result = a.number - b.number;
-        break;
-      case "title":
-        result = (a.title ?? "").localeCompare(b.title ?? "", "th");
-        break;
-      case "module":
-        result = (a.category ?? "").localeCompare(b.category ?? "", "th");
-        break;
-      case "status":
-        result = maps.rankOf(a.status) - maps.rankOf(b.status);
-        break;
-      case "response":
-        result = responseRank(a) - responseRank(b);
-        break;
-      case "createdAt":
-        result = Date.parse(a.createdAt) - Date.parse(b.createdAt);
-        break;
-      case "updatedAt":
-        result = Date.parse(a.updatedAt) - Date.parse(b.updatedAt);
-        break;
-    }
-    // Ties resolve by ticket number so a re-sort never reshuffles equal rows —
-    // a list that changes order when you click the same header twice reads as a
-    // bug even when the sort is right.
-    return result !== 0 ? result * direction : (a.number - b.number) * direction;
-  };
-}
-
-/** Rows per page — the original's `defaultPageSize`. */
-export const PAGE_SIZE = 10;
-
-export function pageOf<T>(rows: T[], page: number, size = PAGE_SIZE): T[] {
-  return rows.slice((page - 1) * size, page * size);
-}
-
-export function pageCount(total: number, size = PAGE_SIZE): number {
-  return Math.max(1, Math.ceil(total / size));
-}
-
-/**
- * The same ten colour tokens the board uses, as concrete pairs.
- *
- * A status arrives as DATA — a realm adds lanes whenever it likes — so a pill is
- * coloured with an inline style from this map rather than a class a stylesheet
- * could never know the name of. Keeping the values identical
- * to the app's own STATUS_TONES is the point: a reporter and an agent looking at
- * the same ticket should see the same colour for it.
- */
-export const STATUS_TONES: Record<string, { fg: string; bg: string }> = {
-  blue: { fg: "#1c5cab", bg: "#e8f1fd" },
-  amber: { fg: "#92400e", bg: "#fef3c7" },
-  violet: { fg: "#4a3aa7", bg: "#ece9fb" },
-  emerald: { fg: "#0f766e", bg: "#d9f2ec" },
-  gray: { fg: "#4b5563", bg: "#f1f2f4" },
-  red: { fg: "#b91c1c", bg: "#fde8e8" },
-  sky: { fg: "#0369a1", bg: "#e0f2fe" },
-  rose: { fg: "#be123c", bg: "#ffe4e9" },
-  teal: { fg: "#0f766e", bg: "#d7f2ef" },
-  orange: { fg: "#c2410c", bg: "#ffedd5" },
-};
-
-export function statusTone(token: string | undefined): { fg: string; bg: string } {
-  return STATUS_TONES[token ?? ""] ?? STATUS_TONES.gray!;
-}

package/src/mytickets/sanitize.ts

@@ -1,221 +0,0 @@
-/**
- * Rendering a ticket body inside somebody else's app.
- *
- * Bodies are HTML — the composer's formatting and its inline screenshots are the
- * point of the thread, so stripping to text would lose what a reporter actually
- * came to read. But that HTML was written by other people, and this package
- * renders it inside a HOST application's page. Markup that ran there would run
- * with the host's origin, against the host's session. A support widget must not
- * be the way an app gets XSS.
- *
- * The support app solves this with DOMPurify. A package that every consumer
- * installs cannot take that dependency for one screen, so this is the same
- * POLICY over the platform's own parser: parse the string with DOMParser (never
- * a regex), walk the result, and delete every node and attribute not on the
- * list. Anything unrecognised is removed rather than escaped, and the walk is
- * over an inert document, so nothing loads or executes while it happens.
- */
-
-/** Tags an ordinary note actually uses. Everything else goes. */
-export const ALLOWED_TAGS = new Set([
-  "p", "br", "strong", "b", "em", "i", "u", "s", "code", "pre",
-  "ul", "ol", "li", "blockquote", "h1", "h2", "h3", "a", "img", "span",
-]);
-
-export const ALLOWED_ATTR = new Set(["href", "target", "rel", "src", "alt", "title"]);
-
-/** `/api/inline/<64 hex>` — the shape the support host mints for an embedded image. */
-const INLINE_PATH = /^\/api\/inline\/[a-f0-9]{64}$/i;
-
-/** Links: ordinary web destinations only. No javascript:, no data:. */
-export function isAllowedHref(url: string): boolean {
-  return /^(?:https?:\/\/|mailto:|#|\/)/i.test(url.trim());
-}
-
-/**
- * Image sources: OUR inline images and nothing else.
- *
- * Not a tightening for its own sake. Any other src turns every ticket into a
- * tracking pixel aimed at whoever opens it — a body can be written by a stranger
- * who filed a report, and the reader here is the reporter, on the host's page.
- * Accepts the server-relative form and the same path already made absolute
- * against the configured host.
- */
-export function isAllowedImageSrc(url: string, host: string): boolean {
-  try {
-    // Resolved against the host rather than pattern-matched, so the relative and
-    // absolute spellings of the same image get the same answer — and so that
-    // `//evil.example/api/inline/…` and `/api/inline/../../x` are judged by
-    // where they actually land, not by how they read.
-    const parsed = new URL(url.trim(), host);
-    return parsed.origin === new URL(host).origin && INLINE_PATH.test(parsed.pathname);
-  } catch {
-    return false;
-  }
-}
-
-const BLOCK_END = /<\/(p|div|li|h[1-6]|tr)\s*>/gi;
-const BREAK = /<br\s*\/?>/gi;
-const TAG = /<[^>]*>/g;
-const ENTITIES: Record<string, string> = {
-  "&nbsp;": " ", "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#39;": "'",
-};
-
-export function looksLikeHtml(body: string): boolean {
-  return /<[a-z/][^>]*>/i.test(body);
-}
-
-/** Tags out, line structure kept — for previews and anywhere text is all that fits. */
-export function toPlainText(body: string): string {
-  if (!looksLikeHtml(body)) return body;
-  return body
-    .replace(BREAK, "\n")
-    .replace(BLOCK_END, "\n")
-    .replace(TAG, "")
-    .replace(/&[a-z#0-9]+;/gi, (entity) => ENTITIES[entity.toLowerCase()] ?? entity)
-    .split("\n")
-    .map((line) => line.trim())
-    .filter(Boolean)
-    .join("\n");
-}
-
-/**
- * Fill `target` with a safe rendering of `body`.
- *
- * A node rather than a string, deliberately: handing back HTML invites a caller
- * to concatenate it with something else and re-parse the result, which is where
- * sanitisers stop holding.
- */
-export function renderBody(target: HTMLElement, body: string, host: string): void {
-  target.textContent = "";
-  if (!looksLikeHtml(body)) {
-    // Older plain-text messages. Line breaks are the only markup they have, and
-    // dropping them runs a written-out list into one paragraph.
-    for (const [i, line] of body.split("\n").entries()) {
-      if (i) target.append(document.createElement("br"));
-      target.append(document.createTextNode(line));
-    }
-    return;
-  }
-  // An inert document: parsing here neither runs scripts nor fetches an <img>.
-  const parsed = new DOMParser().parseFromString(body, "text/html");
-  for (const node of Array.from(parsed.body.childNodes)) {
-    const safe = clean(node, host);
-    if (safe) target.append(safe);
-  }
-}
-
-/**
- * One node, cleaned — or null.
- *
- * A disallowed ELEMENT is unwrapped rather than dropped: a `<div>` around a
- * paragraph is not an attack, and deleting it would take the paragraph with it.
- * The exceptions are the tags whose content is not content at all — a script's
- * text is code and a style's is CSS, and unwrapping either would print it.
- */
-const DROP_WHOLE = new Set(["script", "style", "iframe", "object", "embed", "noscript", "template", "svg", "math"]);
-
-function clean(node: Node, host: string): Node | null {
-  if (node.nodeType === 3) return document.createTextNode(node.nodeValue ?? "");
-  if (node.nodeType !== 1) return null;
-
-  const source = node as Element;
-  const tag = source.tagName.toLowerCase();
-  if (DROP_WHOLE.has(tag)) return null;
-
-  const keep = ALLOWED_TAGS.has(tag);
-  const out = keep ? document.createElement(tag) : document.createDocumentFragment();
-
-  if (keep) {
-    const element = out as HTMLElement;
-    for (const attr of Array.from(source.attributes)) {
-      const name = attr.name.toLowerCase();
-      // Every `on*` handler fails this test, and so does anything else nobody
-      // listed — the allowlist is the rule, not a blocklist of known-bad names.
-      if (!ALLOWED_ATTR.has(name)) continue;
-      if (name === "href" && !isAllowedHref(attr.value)) continue;
-      if (name === "src") {
-        if (tag !== "img" || !isAllowedImageSrc(attr.value, host)) continue;
-        element.setAttribute("src", absolute(attr.value, host));
-        continue;
-      }
-      element.setAttribute(name, attr.value);
-    }
-    if (tag === "a") {
-      // Opening someone else's link must not hand it a handle on this page.
-      element.setAttribute("target", "_blank");
-      element.setAttribute("rel", "noopener noreferrer nofollow");
-    }
-    if (tag === "img" && !element.getAttribute("src")) return null;
-  }
-
-  for (const child of Array.from(source.childNodes)) {
-    const safe = clean(child, host);
-    if (safe) out.append(safe);
-  }
-  return out;
-}
-
-/**
- * The same walk, but returning a string — for content going OUT.
- *
- * `renderBody` deliberately hands back a node, because handing back HTML invites
- * a caller to concatenate and re-parse it. This one exists for the single case
- * where a string is the only possible answer: the composer has to put what
- * somebody typed into a JSON body.
- *
- * It matters for the same reason the display side does, from the other
- * direction. A contenteditable takes whatever the clipboard had in it — a
- * pasted block of a web page arrives with its scripts, its styles and its
- * tracking pixels intact — and posting that unfiltered would store it for
- * every future reader of the thread.
- */
-export function cleanHtml(html: string, host: string): string {
-  const holder = document.createElement("div");
-  renderBody(holder, html, host);
-  /*
-   * Stored relative, displayed absolute.
-   *
-   * `renderBody` makes an inline image absolute because the panel runs on the
-   * HOST app's origin, where `/api/inline/…` would resolve to the host and 404.
-   * That is right for showing it and wrong for keeping it: a body stored with
-   * this deployment's hostname in it breaks if the deployment is ever renamed,
-   * and the support app's own editor stores the path. So the origin goes back
-   * off on the way out, and the display side puts it on again.
-   */
-  const origin = safeOrigin(host);
-  if (origin) {
-    for (const image of Array.from(holder.querySelectorAll("img"))) {
-      const src = image.getAttribute("src") ?? "";
-      if (src.startsWith(`${origin}/`)) image.setAttribute("src", src.slice(origin.length));
-    }
-  }
-  return holder.innerHTML;
-}
-
-function safeOrigin(host: string): string | null {
-  try {
-    return new URL(host).origin;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * True when there is nothing worth sending.
- *
- * An image alone counts as content — a screenshot with no words is the most
- * common reply a reporter makes — but a contenteditable that has been typed in
- * and cleared is full of empty tags and `&nbsp;`, and those are not.
- */
-export function htmlIsEmpty(html: string): boolean {
-  if (!html) return true;
-  if (/<img\b/i.test(html)) return false;
-  return html.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim() === "";
-}
-
-function absolute(url: string, host: string): string {
-  const value = url.trim();
-  if (!value.startsWith("/")) return value;
-  return `${host.replace(/\/$/, "")}${value}`;
-}