@lightworkai.official/debug-capture-angular 0.6.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@lightworkai.official/debug-capture-angular",
+  "version": "0.6.0",
+  "description": "Angular bindings for @lightworkai.official/debug-capture",
+  "type": "module",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/test"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && bun build src/index.ts --outfile dist/index.mjs --format esm --external @angular/core --external @angular/common --external @angular/forms --external @angular/platform-browser --external @tiptap/core --external @tiptap/starter-kit --external @tiptap/extension-image --external @tiptap/extension-placeholder --external @lightworkai.official/debug-capture && tsc -p tsconfig.build.json --emitDeclarationOnly --outDir dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=16",
+    "@angular/common": ">=16",
+    "@angular/forms": ">=16",
+    "@angular/platform-browser": ">=16",
+    "@lightworkai.official/debug-capture": "^0.6.0",
+    "@tiptap/core": "^3",
+    "@tiptap/starter-kit": "^3",
+    "@tiptap/extension-image": "^3",
+    "@tiptap/extension-placeholder": "^3"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@angular/core": "^19.0.0",
+    "rxjs": "^7.8.0",
+    "zone.js": "^0.15.0"
+  },
+  "main": "./dist/index.mjs",
+  "keywords": [
+    "angular",
+    "bug-report",
+    "debug",
+    "screenshot",
+    "support",
+    "helpdesk"
+  ],
+  "license": "MIT",
+  "author": "Lightwork AI",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/icon.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from "@angular/core";
+import { DomSanitizer, type SafeHtml } from "@angular/platform-browser";
+
+/**
+ * Renders one of our own SVG constants.
+ *
+ * `bypassSecurityTrustHtml` is safe HERE and only here: the markup comes from
+ * `ICONS`, a frozen table in this package's own source. Nothing a user or a
+ * server ever wrote reaches it — the thread's HTML goes through the core's
+ * allowlist walker instead.
+ */
+@Component({
+  selector: "lw-icon",
+  standalone: true,
+  template: `<span [innerHTML]="safe"></span>`,
+  styles: [":host { display: inline-flex; align-items: center; }"],
+})
+export class IconComponent {
+  @Input({ required: true }) set svg(value: string) {
+    this.safe = this.sanitizer.bypassSecurityTrustHtml(value);
+  }
+  protected safe: SafeHtml = "";
+  constructor(private readonly sanitizer: DomSanitizer) {}
+}

package/src/components/icons.ts

@@ -0,0 +1,64 @@
+/**
+ * The panel's icons as inline SVG markup strings.
+ *
+ * Drawn rather than imported: the original uses lucide, and a package that
+ * pulled an icon set in so a reply box could show a B would cost every consumer
+ * that dependency. Rendered with `[innerHTML]` through Angular's sanitiser,
+ * which permits SVG and strips anything else — these are constants in our own
+ * source, so there is nothing untrusted here to begin with.
+ */
+function glyph(paths: string[], size = 15): string {
+  const body = paths.map((d) => `<path d="${d}"/>`).join("");
+  return (
+    `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" ` +
+    `stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`
+  );
+}
+
+export const ICONS = {
+  bold: glyph(["M6 4h8a4 4 0 0 1 0 8H6z", "M6 12h9a4 4 0 0 1 0 8H6z"]),
+  italic: glyph(["M19 4h-9", "M14 20H5", "M15 4L9 20"]),
+  underline: glyph(["M6 4v6a6 6 0 0 0 12 0V4", "M4 20h16"]),
+  bulletList: glyph(["M8 6h13", "M8 12h13", "M8 18h13", "M3 6h.01", "M3 12h.01", "M3 18h.01"]),
+  orderedList: glyph(["M10 6h11", "M10 12h11", "M10 18h11", "M4 6h1v4", "M4 10h2", "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"]),
+  link: glyph([
+    "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+    "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+  ]),
+  image: glyph([
+    "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z",
+    "M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
+    "M21 15l-5-5L5 21",
+  ]),
+  send: glyph(["M22 2L11 13", "M22 2l-7 20-4-9-9-4 20-7z"]),
+  search: glyph(["M21 21l-4.34-4.34", "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"], 16),
+  arrowLeft: glyph(["M19 12H5", "M12 19l-7-7 7-7"], 14),
+  check: glyph(["M20 6L9 17l-5-5"], 12),
+  message: glyph(["M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"], 12),
+  rotate: glyph(["M3 12a9 9 0 1 0 3-6.7L3 8", "M3 3v5h5"], 14),
+  alert: glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 8v4", "M12 16h.01"], 16),
+  inbox: glyph([
+    "M22 12h-6l-2 3h-4l-2-3H2",
+    "M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",
+  ], 22),
+  clock: glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 6v6l4 2"], 22),
+  checkCircle: glyph(["M22 11.08V12a10 10 0 1 1-5.93-9.14", "M22 4L12 14.01l-3-3"], 22),
+  ban: glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M4.93 4.93l14.14 14.14"], 22),
+  wrench: glyph([
+    "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z",
+  ], 16),
+  square: glyph(["M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"], 14),
+  arrowUpRight: glyph(["M7 17L17 7", "M7 7h10v10"], 14),
+  highlighter: glyph([
+    "M9 11l-6 6v3h9l3-3",
+    "M22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4",
+  ], 14),
+  type: glyph(["M4 7V4h16v3", "M9 20h6", "M12 4v16"], 14),
+  trash: glyph([
+    "M3 6h18",
+    "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+  ], 14),
+  pencil: glyph(["M12 20h9", "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"], 11),
+  checkSmall: glyph(["M20 6L9 17l-5-5"], 12),
+  xSmall: glyph(["M18 6L6 18", "M6 6l12 12"], 12),
+} as const;

package/src/components/image-annotator-dialog.component.ts

@@ -0,0 +1,159 @@
+/**
+ * Draw on an image before it is sent.
+ *
+ * The original opens this the moment you pick a picture, and the reason is in
+ * its own comment: annotating BEFORE upload keeps the canvas same-origin, so
+ * `toDataURL` is not tainted by a cross-origin presigned URL. Pointing at the
+ * problem is also most of what a screenshot is for.
+ *
+ * The drawing itself is `createAnnotator` from the core — one canvas engine,
+ * shared by all three framework packages, because there is no declarative way
+ * to draw on a canvas. What is here is only the chrome.
+ */
+import {
+  Component, ElementRef, EventEmitter, Input, Output, ViewChild,
+  type AfterViewInit, type OnDestroy,
+} from "@angular/core";
+import { NgFor, NgIf } from "@angular/common";
+import {
+  createAnnotator, reporterStrings,
+  type Annotator, type AnnotatorTool, type ReporterStrings,
+} from "@lightworkai.official/debug-capture";
+import { IconComponent } from "./icon.component";
+import { ICONS } from "./icons";
+
+@Component({
+  selector: "lw-image-annotator-dialog",
+  standalone: true,
+  imports: [NgFor, NgIf, IconComponent],
+  template: `
+    <!-- Header, toolbar, canvas, help, footer — the same shape and the same
+         words as the app's own dialog, so the two are one thing in two places
+         rather than two things that resemble each other. -->
+    <div class="lw-annotator" role="dialog" aria-modal="true" (click)="backdrop($event)">
+      <div class="lw-annotator__panel">
+        <div class="lw-annotator__head">
+          <div class="lw-grow">
+            <h2 class="lw-annotator__title">{{ t.annotateTitle }}</h2>
+            <p class="lw-annotator__desc">
+              {{ t.annotateHint }}<span *ngIf="filename"> · {{ filename }}</span>
+            </p>
+          </div>
+          <button type="button" class="lw-annotator__close" [attr.aria-label]="t.cancel" (click)="cancelled.emit()">
+            ✕
+          </button>
+        </div>
+
+        <div class="lw-annotator__tools">
+          <button
+            *ngFor="let tool of tools"
+            type="button"
+            class="lw-atool"
+            [attr.aria-pressed]="active === tool.tool"
+            [disabled]="loading"
+            (click)="pick(tool.tool)"
+          >
+            <lw-icon [svg]="tool.icon" /> {{ label(tool.key) }}
+          </button>
+          <span class="lw-grow"></span>
+          <!-- Right-aligned and on its own, like the app's. Deleting ONE shape
+               is the ✕ on the shape, which the help line below explains. -->
+          <button type="button" class="lw-atool lw-atool--plain" [disabled]="loading" (click)="clear()">
+            <lw-icon [svg]="icons.trash" /> {{ t.clearAll }}
+          </button>
+        </div>
+
+        <div class="lw-annotator__canvas">
+          <div class="lw-annotator__canvasbox"><canvas #canvas></canvas></div>
+        </div>
+
+        <p class="lw-annotator__hint">{{ t.annotateHelp }}</p>
+
+        <div class="lw-annotator__actions">
+          <span class="lw-grow"></span>
+          <button type="button" class="lw-btn" (click)="cancelled.emit()">{{ t.cancel }}</button>
+          <button type="button" class="lw-send" [disabled]="loading" (click)="confirm()">
+            {{ t.annotateApply }}
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class ImageAnnotatorDialogComponent implements AfterViewInit, OnDestroy {
+  /** The picked image, as a same-origin data URI. */
+  @Input({ required: true }) src = "";
+  /** Shown in the description, as the app's dialog does. */
+  @Input() filename?: string;
+  @Input() locale?: "th" | "en";
+
+  /** The annotated image, at full resolution. */
+  @Output() confirmed = new EventEmitter<string>();
+  @Output() cancelled = new EventEmitter<void>();
+
+  @ViewChild("canvas", { static: true }) private canvas!: ElementRef<HTMLCanvasElement>;
+
+  protected annotator: Annotator | null = null;
+  protected active: AnnotatorTool | null = null;
+  protected loading = true;
+
+  protected readonly icons = ICONS;
+  protected readonly tools: { tool: AnnotatorTool; key: keyof ReporterStrings; icon: string }[] = [
+    { tool: "rect", key: "toolRect", icon: ICONS.square },
+    { tool: "arrow", key: "toolArrow", icon: ICONS.arrowUpRight },
+    { tool: "highlight", key: "toolHighlight", icon: ICONS.highlighter },
+    { tool: "text", key: "toolText", icon: ICONS.type },
+  ];
+
+  protected get t(): ReporterStrings {
+    return reporterStrings(this.locale);
+  }
+
+  protected label(key: keyof ReporterStrings): string {
+    return this.t[key] as string;
+  }
+
+  ngAfterViewInit(): void {
+    const image = new Image();
+    image.addEventListener("load", () => {
+      // A backing store at the image's own size, BEFORE the annotator draws
+      // into it. Without this the canvas keeps its default 300x150, the image
+      // is squashed into that, and CSS then stretches the result — blurry, and
+      // the wrong shape.
+      const node = this.canvas.nativeElement;
+      node.width = image.naturalWidth;
+      node.height = image.naturalHeight;
+      this.annotator = createAnnotator(node, image, () => {
+        // The toolbar mirrors the engine, so it has to hear about a tool being
+        // CONSUMED as well as a shape being added.
+        this.active = null;
+      });
+      this.loading = false;
+    });
+    image.src = this.src;
+  }
+
+  ngOnDestroy(): void {
+    this.annotator?.destroy();
+    this.annotator = null;
+  }
+
+  protected pick(tool: AnnotatorTool): void {
+    this.active = this.active === tool ? null : tool;
+    this.annotator?.setTool(this.active);
+  }
+
+  protected clear(): void {
+    this.annotator?.clear();
+    this.active = null;
+  }
+
+  protected backdrop(event: MouseEvent): void {
+    if (event.target === event.currentTarget) this.cancelled.emit();
+  }
+
+  protected confirm(): void {
+    // Full resolution, never the on-screen scale.
+    this.confirmed.emit(this.annotator?.toDataUrl() ?? this.src);
+  }
+}

package/src/components/my-tickets-panel.component.ts

@@ -0,0 +1,326 @@
+/**
+ * "ปัญหาที่แจ้ง" — the reports this person filed, and what became of them.
+ *
+ * Put it on a route of your own — the reporter-facing counterpart to the
+ * agent's ticket list. It needs `identity` in the config, because the widget's
+ * realm key is public and can authorise filing a report but never reading one
+ * back — see the core README.
+ *
+ * This component owns fetching and view state and nothing else: the columns,
+ * the sorting, the sanitising and the dates all live in the core, shared with
+ * the Vue and React packages.
+ */
+import { Component, EventEmitter, Input, Output, type OnChanges, type OnInit } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { NgFor, NgIf } from "@angular/common";
+import {
+  NoIdentityError, fetchRealmConfig, getAttachmentUrl, getConfig, getMyTicket, getMyTicketHistory,
+  listMyTickets, reopenMyTicket, replyToTicket, statusMaps, ticketStrings, uploadInlineImage,
+  type MyTicketDetail, type MyTicketListItem, type RealmConfig, type Sort, type SortKey,
+  type StatusEvent, type StatusMaps, type TicketStrings,
+} from "@lightworkai.official/debug-capture";
+import { IconComponent } from "./icon.component";
+import { TicketTableComponent } from "./ticket-table.component";
+import { TicketDetailComponent } from "./ticket-detail.component";
+import { ICONS } from "./icons";
+
+@Component({
+  selector: "lw-my-tickets-panel",
+  standalone: true,
+  imports: [NgIf, NgFor, FormsModule, IconComponent, TicketTableComponent, TicketDetailComponent],
+  template: `
+    <div class="lw-panel">
+      <ng-container *ngIf="!detail && !detailLoading">
+        <h2 *ngIf="!hideTitle" class="lw-panel__title">{{ t.title }}</h2>
+        <p class="lw-panel__intro">{{ t.intro }}</p>
+
+        <div class="lw-controls">
+          <div class="lw-search">
+            <lw-icon class="lw-search__icon" [svg]="icons.search" />
+            <input
+              type="search"
+              class="lw-input lw-search__field"
+              [placeholder]="t.searchPlaceholder"
+              [attr.aria-label]="t.searchLabel"
+              [ngModel]="keyword"
+              (ngModelChange)="onKeyword($event)"
+            />
+          </div>
+          <select class="lw-input" [ngModel]="statusFilter" (ngModelChange)="onStatus($event)">
+            <option *ngFor="let option of maps.options" [value]="option.value">{{ option.label }}</option>
+          </select>
+          <span class="lw-count">{{ t.count(shown) }}</span>
+        </div>
+
+        <p *ngIf="noIdentity" class="lw-state">{{ t.signedOut }}</p>
+        <div *ngIf="!noIdentity && loading">
+          <div class="lw-skeleton"></div>
+          <div class="lw-skeleton"></div>
+          <div class="lw-skeleton"></div>
+          <div class="lw-skeleton"></div>
+        </div>
+        <p *ngIf="!noIdentity && !loading && error" class="lw-state lw-state--error">
+          <lw-icon [svg]="icons.alert" /> {{ error }}
+          <button type="button" class="lw-retry" (click)="load()">{{ t.retry }}</button>
+        </p>
+        <lw-ticket-table
+          *ngIf="!noIdentity && !loading && !error"
+          [items]="items"
+          [maps]="maps"
+          [t]="t"
+          [slug]="config?.realm?.slug"
+          [timezone]="config?.timezone || 'Asia/Bangkok'"
+          [locale]="locale"
+          [keyword]="applied"
+          [statusFilter]="statusFilter"
+          [sort]="sort"
+          [page]="page"
+          (opened)="open($event)"
+          (sorted)="toggleSort($event)"
+          (paged)="page = $event"
+          (counted)="shown = $event"
+        />
+      </ng-container>
+
+      <div *ngIf="detailLoading">
+        <div class="lw-skeleton"></div>
+        <div class="lw-skeleton"></div>
+      </div>
+
+      <p *ngIf="!detailLoading && detailError" class="lw-state lw-state--error">{{ detailError }}</p>
+
+      <lw-ticket-detail
+        *ngIf="!detailLoading && detail && config"
+        [ticket]="detail"
+        [history]="history"
+        [config]="config"
+        [maps]="maps"
+        [t]="t"
+        [host]="host"
+        [locale]="locale"
+        [sending]="sending"
+        [reopening]="reopening"
+        [uploadImage]="uploadImage"
+        [attachmentUrl]="attachmentUrl"
+        (back)="back()"
+        (edited)="detail && reload(detail.id)"
+        (sent)="send($event)"
+        (reopened)="reopen($event)"
+        (errored)="errored.emit($event)"
+      />
+    </div>
+  `,
+})
+export class MyTicketsPanelComponent implements OnInit, OnChanges {
+  /** Change it to re-read the list — after filing a report, say. */
+  @Input() refreshKey?: string | number;
+  /** Hide the panel's own heading when the host page already has one. */
+  @Input() hideTitle = false;
+
+  @Output() replied = new EventEmitter<MyTicketDetail>();
+  @Output() reopenedTicket = new EventEmitter<MyTicketDetail>();
+  @Output() errored = new EventEmitter<string>();
+
+  protected readonly icons = ICONS;
+  protected items: MyTicketListItem[] = [];
+  protected config: RealmConfig | null = null;
+  protected loading = true;
+  protected error: string | null = null;
+  protected noIdentity = false;
+
+  protected keyword = "";
+  protected applied = "";
+  protected statusFilter = "";
+  protected sort: Sort = { key: "createdAt", direction: "desc" };
+  protected page = 1;
+  protected shown = 0;
+
+  protected detail: MyTicketDetail | null = null;
+  protected history: StatusEvent[] = [];
+  protected detailError: string | null = null;
+  protected detailLoading = false;
+  protected sending = false;
+  protected reopening = false;
+
+  private debounce: ReturnType<typeof setTimeout> | null = null;
+  private first = true;
+
+  protected get locale(): "th" | "en" | undefined {
+    return this.safe(() => getConfig().locale, undefined);
+  }
+
+  protected get host(): string {
+    return this.safe(() => getConfig().host, "");
+  }
+
+  protected get t(): TicketStrings {
+    return ticketStrings(this.locale);
+  }
+
+  protected get maps(): StatusMaps {
+    return statusMaps(this.config?.statusColumns ?? [], this.t.allStatuses);
+  }
+
+  ngOnInit(): void {
+    void this.load();
+  }
+
+  ngOnChanges(): void {
+    // Not on the first change: ngOnInit already loaded, and fetching the same
+    // list twice on mount is a wasted round trip.
+    if (this.first) {
+      this.first = false;
+      return;
+    }
+    void this.load();
+  }
+
+  protected async load(): Promise<void> {
+    this.loading = true;
+    this.error = null;
+    this.noIdentity = false;
+    try {
+      // Config and list together: the labels are useless without the rows and
+      // the rows unreadable without the labels.
+      const [realm, list] = await Promise.all([fetchRealmConfig(), listMyTickets()]);
+      this.config = realm;
+      this.items = list;
+    } catch (e) {
+      if (e instanceof NoIdentityError) this.noIdentity = true;
+      else this.error = e instanceof Error ? e.message : this.t.listFailed;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  /** Debounced: re-filtering per keystroke resets the page under the reader's hands. */
+  protected onKeyword(next: string): void {
+    this.keyword = next;
+    if (this.debounce) clearTimeout(this.debounce);
+    this.debounce = setTimeout(() => {
+      this.applied = next;
+      this.page = 1;
+    }, 300);
+  }
+
+  protected onStatus(next: string): void {
+    this.statusFilter = next;
+    this.page = 1;
+  }
+
+  /** Open a DIFFERENT ticket: tear the view down, because nothing on screen is its. */
+  protected async open(id: string): Promise<MyTicketDetail | null> {
+    this.detail = null;
+    this.history = [];
+    this.detailError = null;
+    this.detailLoading = true;
+    try {
+      return await this.reload(id);
+    } finally {
+      this.detailLoading = false;
+    }
+  }
+
+  /**
+   * Re-read the ticket we are already looking at, in place.
+   *
+   * Deliberately separate from `open()`. That one clears the detail and raises
+   * the loading flag, which destroys the whole view and rebuilds it — so
+   * sending a reply threw the reader back to the top of the page, away from the
+   * conversation they were in the middle of. It reads as the page reloading,
+   * because visually that is what happens.
+   */
+  protected async reload(id: string): Promise<MyTicketDetail | null> {
+    try {
+      const [found, events] = await Promise.all([
+        getMyTicket(id),
+        // The timeline is a nicety, not the page: a ticket whose history fails
+        // to load should still show its conversation.
+        getMyTicketHistory(id).catch(() => [] as StatusEvent[]),
+      ]);
+      this.detail = found;
+      this.history = events;
+      return found;
+    } catch (e) {
+      this.detailError = e instanceof Error ? e.message : this.t.detailFailed;
+      return null;
+    }
+  }
+
+  protected back(): void {
+    this.detail = null;
+    // Counts and badges move when a reply lands, so the list is re-read rather
+    // than restored from what it said before the detail opened.
+    void this.load();
+  }
+
+  protected toggleSort(key: SortKey): void {
+    this.sort =
+      this.sort.key === key
+        ? { key, direction: this.sort.direction === "asc" ? "desc" : "asc" }
+        : // Dates open newest-first, text A→Z.
+          { key, direction: key === "createdAt" || key === "updatedAt" ? "desc" : "asc" };
+  }
+
+  protected async send(body: string): Promise<void> {
+    const ticket = this.detail;
+    if (!ticket || this.sending) return;
+    this.sending = true;
+    try {
+      await replyToTicket(ticket.id, body);
+      const fresh = await this.reload(ticket.id);
+      if (fresh) this.replied.emit(fresh);
+    } catch (e) {
+      this.errored.emit(e instanceof Error ? e.message : this.t.sendFailed);
+    } finally {
+      this.sending = false;
+    }
+  }
+
+  protected async reopen(note: string): Promise<void> {
+    const ticket = this.detail;
+    if (!ticket || this.reopening) return;
+    this.reopening = true;
+    try {
+      await reopenMyTicket(ticket.id, note);
+      const fresh = await this.reload(ticket.id);
+      if (fresh) this.reopenedTicket.emit(fresh);
+    } catch (e) {
+      this.errored.emit(e instanceof Error ? e.message : this.t.reopenFailed);
+    } finally {
+      this.reopening = false;
+    }
+  }
+
+  // Arrow properties, not methods: they are passed as inputs and must keep
+  // their `this`.
+  protected readonly uploadImage = async (file: File): Promise<string> => {
+    const ticket = this.detail;
+    if (!ticket) throw new Error("no ticket");
+    const dataUri = await readDataUri(file);
+    const stored = await uploadInlineImage(ticket.id, dataUri, file.name);
+    return stored.url;
+  };
+
+  protected readonly attachmentUrl = (id: string): Promise<string> =>
+    getAttachmentUrl(id).then((found) => found.url);
+
+  private safe<T>(read: () => T, fallback: T): T {
+    try {
+      return read();
+    } catch {
+      return fallback;
+    }
+  }
+}
+
+function readDataUri(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () =>
+      typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("unreadable file")),
+    );
+    reader.addEventListener("error", () => reject(new Error("unreadable file")));
+    reader.readAsDataURL(file);
+  });
+}