@lightworkai.official/debug-capture 0.6.0 → 0.7.0

package/src/index.ts

@@ -51,59 +51,15 @@ export { createAnnotator } from "./ui/annotator";
 export type { Annotator, AnnotatorTool } from "./ui/annotator";
 export { strings as reporterStrings } from "./ui/strings";
 export type { Strings as ReporterStrings } from "./ui/strings";
-export {
-  listMyTickets,
-  getMyTicket,
-  getMyTicketByNumber,
-  getMyTicketHistory,
-  replyToTicket,
-  editMyMessage,
-  reopenMyTicket,
-  uploadInlineImage,
-  getAttachmentUrl,
-  fetchRealmConfig,
-  TicketApiError,
-  NoIdentityError,
-} from "./mytickets/api";
-export type {
-  MyTicket,
-  MyTicketListItem,
-  MyTicketDetail,
-  TicketMessage,
-  TicketAttachment,
-  StatusEvent,
-  StatusColumn,
-  RealmConfig,
-} from "./mytickets/api";
-export {
-  ticketKey,
-  formatDateTime,
-  statusMaps,
-  hasSolution,
-  hasTeamReply,
-  responseRank,
-  compareBy,
-  matchesKeyword,
-  pageOf,
-  pageCount,
-  PAGE_SIZE,
-} from "./mytickets/format";
-export type { StatusMaps, Sort, SortKey } from "./mytickets/format";
-export {
-  toPlainText,
-  looksLikeHtml,
-  renderBody,
-  cleanHtml,
-  htmlIsEmpty,
-  ALLOWED_TAGS,
-  ALLOWED_ATTR,
-  isAllowedHref,
-  isAllowedImageSrc,
-} from "./mytickets/sanitize";
-export { NOTE_TOOLBAR, FULL_TOOLBAR } from "./mytickets/toolbar";
-export type { EditorTool } from "./mytickets/toolbar";
-export { ticketStrings } from "./mytickets/strings";
-export type { TicketStrings } from "./mytickets/strings";
-export { statusTone, STATUS_TONES } from "./mytickets/format";
+/*
+ * The reporter's own tickets are no longer a component this library ships.
+ *
+ * They were: a read API, a ticket list, a thread, a reply editor, ported to
+ * React, Vue and Angular. It worked, and it meant every change to the way a
+ * ticket looks had to land in four places. The support host renders that screen
+ * already, so the library now hands someone to it instead — one button, one
+ * link, and the ticket UI maintained where it lives.
+ */
+export { openSupportPortal, supportPortalUrl, NoIdentityError } from "./portal";
 
 export type * from "./types";

package/src/portal.ts

@@ -0,0 +1,65 @@
+/**
+ * Sending someone to their tickets on the support host.
+ *
+ * This replaces an embedded panel, and the trade is worth stating. The panel
+ * meant a read API, a ticket screen ported to three frameworks, and every
+ * change to the way a ticket looks landing in four repositories. A link means
+ * the host renders a button and nothing else; the portal is maintained in one
+ * place, by the people who own it. It is the shape Jira and Zendesk use, for
+ * the same reason.
+ *
+ * The cost is honest too: it is a context switch. Someone checking a report
+ * leaves the app they were in.
+ */
+import { getConfig } from "./config";
+
+/**
+ * Where a signed-in hand-off lands. Stable on purpose — it goes in other
+ * teams' configuration, and moving it means asking them all to redeploy.
+ */
+const PORTAL_PATH = "/sso";
+
+/**
+ * Build the hand-off URL. Separate from opening it so the assembly can be
+ * tested without a browser, and so a host that wants its own link element
+ * rather than our button has something to point it at.
+ */
+export function supportPortalUrl(host: string, realmKey: string, token: string): string {
+  const url = new URL(PORTAL_PATH, host.endsWith("/") ? host : `${host}/`);
+  url.searchParams.set("realm", realmKey);
+  url.searchParams.set("token", token);
+  return url.toString();
+}
+
+export class NoIdentityError extends Error {
+  constructor(message = "No identity provider is configured, or nobody is signed in") {
+    super(message);
+    this.name = "NoIdentityError";
+  }
+}
+
+/**
+ * Open the portal, signed in as the current user.
+ *
+ * The token is fetched at click time and not before. It is minted to live about
+ * two minutes and is spent on arrival, so one obtained at page load would
+ * usually be dead by the time anybody pressed anything.
+ *
+ * Same origin by default. A new tab is available but is not the default: the
+ * point of this is that the support system owns the whole ticket experience,
+ * and leaving the host app open behind it invites the two to disagree about
+ * what a ticket says.
+ */
+export async function openSupportPortal(options: { target?: "_self" | "_blank" } = {}): Promise<void> {
+  const config = getConfig();
+  if (!config.identity) throw new NoIdentityError();
+
+  const token = await config.identity();
+  // Null is "nobody is signed in", which the host answers, not us — it has a
+  // login screen and we do not know where it is.
+  if (!token) throw new NoIdentityError();
+
+  const url = supportPortalUrl(config.host, config.realmKey, token);
+  if (options.target === "_blank") window.open(url, "_blank", "noopener,noreferrer");
+  else window.location.assign(url);
+}

package/dist/mytickets/api.d.ts

@@ -1,115 +0,0 @@
-/** 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 declare class TicketApiError extends Error {
-    readonly status: number;
-    constructor(message: string, status: number);
-}
-/** Raised when there is no signed-in reporter to ask about. */
-export declare class NoIdentityError extends Error {
-    constructor();
-}
-export declare function listMyTickets(): Promise<MyTicketListItem[]>;
-export declare function getMyTicket(id: string): Promise<MyTicketDetail>;
-export declare function getMyTicketByNumber(num: number): Promise<MyTicketDetail>;
-/**
- * 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 declare function getAttachmentUrl(attachmentId: string): Promise<{
-    url: string;
-    filename: string | null;
-}>;
-export declare function getMyTicketHistory(id: string): Promise<StatusEvent[]>;
-export declare function replyToTicket(id: string, body: string): Promise<TicketMessage>;
-/**
- * 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 declare function editMyMessage(ticketId: string, messageId: string, body: string): Promise<TicketMessage>;
-export declare function reopenMyTicket(id: string, note?: string): Promise<MyTicket>;
-export declare function uploadInlineImage(id: string, dataUri: string, filename?: string): Promise<{
-    url: string;
-}>;
-export declare function fetchRealmConfig(): Promise<RealmConfig>;

package/dist/mytickets/format.d.ts

@@ -1,84 +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 declare function ticketKey(slug: string | undefined, number: number): string;
-/**
- * `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 declare function formatDateTime(iso: string | null | undefined, timezone: string, locale: "th" | "en" | undefined): string;
-/** 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 declare function statusMaps(columns: StatusColumn[], allLabel: string): StatusMaps;
-/** Has the team written a solution note? */
-export declare function hasSolution(t: MyTicketListItem): boolean;
-/** Has anyone from the team replied at all? */
-export declare function hasTeamReply(t: MyTicketListItem): boolean;
-/** Solution beats a reply beats silence — the order the column sorts in. */
-export declare function responseRank(t: MyTicketListItem): number;
-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 declare function matchesKeyword(t: MyTicketListItem, keyword: string, slug: string | undefined, labelOf: (key: string) => string): boolean;
-/**
- * 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 declare function compareBy(sort: Sort, maps: StatusMaps, slug: string | undefined): (a: MyTicketListItem, b: MyTicketListItem) => number;
-/** Rows per page — the original's `defaultPageSize`. */
-export declare const PAGE_SIZE = 10;
-export declare function pageOf<T>(rows: T[], page: number, size?: number): T[];
-export declare function pageCount(total: number, size?: number): number;
-/**
- * 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 declare const STATUS_TONES: Record<string, {
-    fg: string;
-    bg: string;
-}>;
-export declare function statusTone(token: string | undefined): {
-    fg: string;
-    bg: string;
-};

package/dist/mytickets/sanitize.d.ts

@@ -1,66 +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 declare const ALLOWED_TAGS: Set<string>;
-export declare const ALLOWED_ATTR: Set<string>;
-/** Links: ordinary web destinations only. No javascript:, no data:. */
-export declare function isAllowedHref(url: string): boolean;
-/**
- * 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 declare function isAllowedImageSrc(url: string, host: string): boolean;
-export declare function looksLikeHtml(body: string): boolean;
-/** Tags out, line structure kept — for previews and anywhere text is all that fits. */
-export declare function toPlainText(body: string): string;
-/**
- * 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 declare function renderBody(target: HTMLElement, body: string, host: string): void;
-/**
- * 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 declare function cleanHtml(html: string, host: string): string;
-/**
- * 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 declare function htmlIsEmpty(html: string): boolean;

package/dist/mytickets/strings.d.ts

@@ -1,74 +0,0 @@
-/**
- * The tickets panel's own words, kept apart from the reporter dialog's so
- * neither grows the other's vocabulary. Thai wording is the original's, verbatim
- * where the original had one.
- */
-export interface TicketStrings {
-    title: string;
-    intro: string;
-    searchPlaceholder: string;
-    searchLabel: string;
-    allStatuses: string;
-    count: (n: number) => string;
-    colNumber: string;
-    colTitle: string;
-    colModule: string;
-    colStatus: string;
-    colResponse: string;
-    colCreated: string;
-    colUpdated: string;
-    awaitingReply: string;
-    hasSolution: string;
-    hasReply: string;
-    noReply: string;
-    empty: string;
-    emptyFiltered: string;
-    loading: string;
-    listFailed: string;
-    detailFailed: string;
-    signedOut: string;
-    back: string;
-    reportedBy: string;
-    conversation: string;
-    resolution: string;
-    noMessages: string;
-    you: string;
-    team: string;
-    /** The role chip beside a reporter's name, as the original prints it. */
-    reporterRole: string;
-    edited: string;
-    edit: string;
-    saveEdit: string;
-    cancel: string;
-    replyPlaceholder: string;
-    bold: string;
-    italic: string;
-    underline: string;
-    strike: string;
-    code: string;
-    blockquote: string;
-    bulletList: string;
-    orderedList: string;
-    link: string;
-    linkPrompt: string;
-    linkNeedsSelection: string;
-    linkInvalid: string;
-    attachImage: string;
-    uploading: string;
-    send: string;
-    sending: string;
-    sent: string;
-    sendFailed: string;
-    reopen: string;
-    reopenHint: string;
-    reopening: string;
-    reopened: string;
-    reopenFailed: string;
-    close: string;
-    retry: string;
-    page: string;
-    of: (page: number, pages: number) => string;
-    prev: string;
-    next: string;
-}
-export declare function ticketStrings(locale: "th" | "en" | undefined): TicketStrings;

package/dist/mytickets/toolbar.d.ts

@@ -1,17 +0,0 @@
-/**
- * Which controls a rich composer offers.
- *
- * A list rather than a fixed set, because the original itself has two —
- * `NOTE_TOOLBAR` for replies and a longer one for articles — and the support app's
- * admin composer wants a few more than a reporter's does. The alternative was a
- * second editor component, which is the thing this package exists to stop.
- */
-export type EditorTool = "bold" | "italic" | "underline" | "strike" | "code" | "bulletList" | "orderedList" | "blockquote" | "link" | "image";
-/** The original's own NOTE_TOOLBAR — what a reporter replying to a ticket gets. */
-export declare const NOTE_TOOLBAR: EditorTool[];
-/**
- * Everything, for a staff composer. Adds the three the admin side had grown on
- * its own — strike, code and blockquote — so adopting this component costs the
- * app nothing it already had.
- */
-export declare const FULL_TOOLBAR: EditorTool[];