@lightworkai.official/debug-capture-angular 0.6.0 → 0.7.0

package/dist/index.mjs

@@ -14,1512 +14,8 @@ var __legacyMetadataTS = (k, v) => {
 };
 
 // src/index.ts
-import {
-  APP_INITIALIZER,
-  Component as Component8,
-  Input as Input8,
-  makeEnvironmentProviders
-} from "@angular/core";
-import {
-  configureDebugCapture,
-  installDebugCapture,
-  launch,
-  setErroredQueriesSource
-} from "@lightworkai.official/debug-capture";
-
-// src/components/my-tickets-panel.component.ts
-import { Component as Component7, EventEmitter as EventEmitter5, Input as Input7, Output as Output5 } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { NgFor as NgFor5, NgIf as NgIf6 } from "@angular/common";
-import {
-  NoIdentityError,
-  fetchRealmConfig,
-  getAttachmentUrl,
-  getConfig,
-  getMyTicket,
-  getMyTicketHistory,
-  listMyTickets,
-  reopenMyTicket,
-  replyToTicket,
-  statusMaps,
-  ticketStrings,
-  uploadInlineImage
-} from "@lightworkai.official/debug-capture";
-
-// src/components/icon.component.ts
-import { Component, Input } from "@angular/core";
-import { DomSanitizer } from "@angular/platform-browser";
-class IconComponent {
-  sanitizer;
-  set svg(value) {
-    this.safe = this.sanitizer.bypassSecurityTrustHtml(value);
-  }
-  safe = "";
-  constructor(sanitizer) {
-    this.sanitizer = sanitizer;
-  }
-}
-__legacyDecorateClassTS([
-  Input({ required: true }),
-  __legacyMetadataTS("design:paramtypes", [
-    String
-  ]),
-  __legacyMetadataTS("design:type", String)
-], IconComponent.prototype, "svg", null);
-IconComponent = __legacyDecorateClassTS([
-  Component({
-    selector: "lw-icon",
-    standalone: true,
-    template: `<span [innerHTML]="safe"></span>`,
-    styles: [":host { display: inline-flex; align-items: center; }"]
-  }),
-  __legacyMetadataTS("design:paramtypes", [
-    typeof DomSanitizer === "undefined" ? Object : DomSanitizer
-  ])
-], IconComponent);
-
-// src/components/ticket-table.component.ts
-import { Component as Component2, EventEmitter, Input as Input2, Output } from "@angular/core";
-import { NgFor, NgIf } from "@angular/common";
-import {
-  compareBy,
-  formatDateTime,
-  hasSolution,
-  hasTeamReply,
-  matchesKeyword,
-  pageCount,
-  pageOf,
-  statusTone,
-  ticketKey
-} from "@lightworkai.official/debug-capture";
-
-// src/components/icons.ts
-function glyph(paths, size = 15) {
-  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>`;
-}
-var 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)
-};
-
-// src/components/ticket-table.component.ts
-class TicketTableComponent {
-  constructor() {
-    this.items = [];
-    this.timezone = "Asia/Bangkok";
-    this.keyword = "";
-    this.statusFilter = "";
-    this.page = 1;
-    this.opened = new EventEmitter;
-    this.sorted = new EventEmitter;
-    this.paged = new EventEmitter;
-    this.counted = new EventEmitter;
-  }
-  icons = ICONS;
-  columns = [
-    { key: "number", label: "colNumber", width: "120px" },
-    { key: "title", label: "colTitle" },
-    { key: "module", label: "colModule", width: "160px" },
-    { key: "status", label: "colStatus", width: "130px" },
-    { key: "response", label: "colResponse", width: "150px" },
-    { key: "createdAt", label: "colCreated", width: "170px" },
-    { key: "updatedAt", label: "colUpdated", width: "170px" }
-  ];
-  get visible() {
-    const rows = this.items.filter((item) => this.statusFilter ? item.status === this.statusFilter : true).filter((item) => matchesKeyword(item, this.keyword, this.slug, this.maps.labelOf)).sort(compareBy(this.sort, this.maps, this.slug));
-    this.counted.emit(rows.length);
-    return rows;
-  }
-  get pages() {
-    return pageCount(this.visible.length);
-  }
-  get current() {
-    return Math.min(this.page, this.pages);
-  }
-  get rows() {
-    return pageOf(this.visible, this.current);
-  }
-  label(key) {
-    const column = this.columns.find((c) => c.key === key);
-    return this.t[column.label];
-  }
-  arrow(key) {
-    if (this.sort.key !== key)
-      return "⇅";
-    return this.sort.direction === "asc" ? "▲" : "▼";
-  }
-  ariaSort(key) {
-    if (this.sort.key !== key)
-      return null;
-    return this.sort.direction === "asc" ? "ascending" : "descending";
-  }
-  key(row) {
-    return ticketKey(this.slug, row.number);
-  }
-  tone(status) {
-    return statusTone(this.maps.columnOf(status)?.color);
-  }
-  solved(row) {
-    return hasSolution(row);
-  }
-  replied(row) {
-    return hasTeamReply(row);
-  }
-  when(iso) {
-    return formatDateTime(iso, this.timezone, this.locale);
-  }
-}
-__legacyDecorateClassTS([
-  Input2({ required: true }),
-  __legacyMetadataTS("design:type", Array)
-], TicketTableComponent.prototype, "items", undefined);
-__legacyDecorateClassTS([
-  Input2({ required: true }),
-  __legacyMetadataTS("design:type", typeof StatusMaps === "undefined" ? Object : StatusMaps)
-], TicketTableComponent.prototype, "maps", undefined);
-__legacyDecorateClassTS([
-  Input2({ required: true }),
-  __legacyMetadataTS("design:type", typeof TicketStrings === "undefined" ? Object : TicketStrings)
-], TicketTableComponent.prototype, "t", undefined);
-__legacyDecorateClassTS([
-  Input2(),
-  __legacyMetadataTS("design:type", String)
-], TicketTableComponent.prototype, "slug", undefined);
-__legacyDecorateClassTS([
-  Input2(),
-  __legacyMetadataTS("design:type", Object)
-], TicketTableComponent.prototype, "timezone", undefined);
-__legacyDecorateClassTS([
-  Input2(),
-  __legacyMetadataTS("design:type", String)
-], TicketTableComponent.prototype, "locale", undefined);
-__legacyDecorateClassTS([
-  Input2(),
-  __legacyMetadataTS("design:type", Object)
-], TicketTableComponent.prototype, "keyword", undefined);
-__legacyDecorateClassTS([
-  Input2(),
-  __legacyMetadataTS("design:type", Object)
-], TicketTableComponent.prototype, "statusFilter", undefined);
-__legacyDecorateClassTS([
-  Input2({ required: true }),
-  __legacyMetadataTS("design:type", typeof Sort === "undefined" ? Object : Sort)
-], TicketTableComponent.prototype, "sort", undefined);
-__legacyDecorateClassTS([
-  Input2(),
-  __legacyMetadataTS("design:type", Object)
-], TicketTableComponent.prototype, "page", undefined);
-__legacyDecorateClassTS([
-  Output(),
-  __legacyMetadataTS("design:type", Object)
-], TicketTableComponent.prototype, "opened", undefined);
-__legacyDecorateClassTS([
-  Output(),
-  __legacyMetadataTS("design:type", Object)
-], TicketTableComponent.prototype, "sorted", undefined);
-__legacyDecorateClassTS([
-  Output(),
-  __legacyMetadataTS("design:type", Object)
-], TicketTableComponent.prototype, "paged", undefined);
-__legacyDecorateClassTS([
-  Output(),
-  __legacyMetadataTS("design:type", Object)
-], TicketTableComponent.prototype, "counted", undefined);
-TicketTableComponent = __legacyDecorateClassTS([
-  Component2({
-    selector: "lw-ticket-table",
-    standalone: true,
-    imports: [NgFor, NgIf, IconComponent],
-    template: `
-    <div class="lw-tablewrap">
-      <table class="lw-table">
-        <thead>
-          <tr>
-            <th
-              *ngFor="let column of columns"
-              scope="col"
-              class="lw-th"
-              [style.width]="column.width"
-              [attr.aria-sort]="ariaSort(column.key)"
-              (click)="sorted.emit(column.key)"
-            >
-              {{ label(column.key) }}
-              <span class="lw-arrow">{{ arrow(column.key) }}</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngIf="!rows.length">
-            <td [attr.colspan]="columns.length" class="lw-empty">
-              {{ items.length === 0 ? t.empty : t.emptyFiltered }}
-            </td>
-          </tr>
-          <tr
-            *ngFor="let row of rows"
-            class="lw-row"
-            tabindex="0"
-            (click)="opened.emit(row.id)"
-            (keydown.enter)="opened.emit(row.id)"
-            (keydown.space)="opened.emit(row.id)"
-          >
-            <td class="lw-num">{{ key(row) }}</td>
-            <td class="lw-title">{{ row.title }}</td>
-            <td>
-              <span *ngIf="row.category; else noModule" class="lw-chip">{{ row.category }}</span>
-              <ng-template #noModule><span class="lw-dash">—</span></ng-template>
-            </td>
-            <td>
-              <!-- "Waiting on you" outranks the neutral status: it is the honest
-                   state and the only one the reporter can act on. -->
-              <span *ngIf="maps.isAwaitingReply(row.status); else plainStatus" class="lw-pill lw-pill--awaiting">
-                <lw-icon [svg]="icons.message" /> {{ t.awaitingReply }}
-              </span>
-              <ng-template #plainStatus>
-                <span class="lw-status" [style.background]="tone(row.status).bg" [style.color]="tone(row.status).fg">
-                  {{ maps.labelOf(row.status) }}
-                </span>
-              </ng-template>
-            </td>
-            <td>
-              <span *ngIf="solved(row)" class="lw-pill lw-pill--solution">
-                <lw-icon [svg]="icons.check" /> {{ t.hasSolution }}
-              </span>
-              <span *ngIf="!solved(row) && replied(row)" class="lw-pill lw-pill--replied">
-                <lw-icon [svg]="icons.message" /> {{ t.hasReply }}
-              </span>
-              <span *ngIf="!solved(row) && !replied(row)" class="lw-muted">{{ t.noReply }}</span>
-            </td>
-            <td class="lw-dim">{{ when(row.createdAt) }}</td>
-            <td class="lw-dim">{{ when(row.updatedAt) }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div *ngIf="pages > 1" class="lw-pager">
-      <span>{{ t.of(current, pages) }}</span>
-      <button type="button" class="lw-btn" [disabled]="current <= 1" (click)="paged.emit(current - 1)">
-        {{ t.prev }}
-      </button>
-      <button type="button" class="lw-btn" [disabled]="current >= pages" (click)="paged.emit(current + 1)">
-        {{ t.next }}
-      </button>
-    </div>
-  `
-  })
-], TicketTableComponent);
-
-// src/components/ticket-detail.component.ts
-import {
-  Component as Component6,
-  ElementRef as ElementRef4,
-  EventEmitter as EventEmitter4,
-  Input as Input6,
-  Output as Output4,
-  ViewChild as ViewChild4
-} from "@angular/core";
-import { NgClass, NgFor as NgFor4, NgIf as NgIf5 } from "@angular/common";
-import {
-  editMyMessage,
-  formatDateTime as formatDateTime2,
-  ticketKey as ticketKey2
-} from "@lightworkai.official/debug-capture";
-
-// src/components/ticket-body.component.ts
-import { Component as Component3, ElementRef, Input as Input3, ViewChild } from "@angular/core";
-import { NgIf as NgIf2 } from "@angular/common";
-import { renderBody } from "@lightworkai.official/debug-capture";
-class TicketBodyComponent {
-  constructor() {
-    this.html = "";
-    this.host = "";
-  }
-  zoomed = null;
-  onClick(event) {
-    const node = event.target;
-    if (!node || node.tagName !== "IMG")
-      return;
-    const src = node.getAttribute("src");
-    if (src)
-      this.zoomed = src;
-  }
-  ngOnChanges() {
-    if (this.target)
-      renderBody(this.target.nativeElement, this.html, this.host);
-  }
-}
-__legacyDecorateClassTS([
-  Input3({ required: true }),
-  __legacyMetadataTS("design:type", Object)
-], TicketBodyComponent.prototype, "html", undefined);
-__legacyDecorateClassTS([
-  Input3({ required: true }),
-  __legacyMetadataTS("design:type", Object)
-], TicketBodyComponent.prototype, "host", undefined);
-__legacyDecorateClassTS([
-  ViewChild("target", { static: true }),
-  __legacyMetadataTS("design:type", typeof ElementRef === "undefined" ? Object : ElementRef)
-], TicketBodyComponent.prototype, "target", undefined);
-TicketBodyComponent = __legacyDecorateClassTS([
-  Component3({
-    selector: "lw-ticket-body",
-    standalone: true,
-    imports: [NgIf2],
-    template: `
-    <!-- Delegated rather than bound per image: this is sanitised HTML we inject,
-         not elements we built, so there is nothing to attach to. -->
-    <div #target class="lw-body" (click)="onClick($event)"></div>
-
-    <div *ngIf="zoomed" class="lw-zoom" role="dialog" aria-modal="true" (click)="zoomed = null">
-      <button type="button" class="lw-zoom__close" aria-label="close">✕</button>
-      <img [src]="zoomed" alt="" />
-    </div>
-  `
-  })
-], TicketBodyComponent);
-
-// src/components/rich-reply-editor.component.ts
-import {
-  ChangeDetectorRef,
-  Component as Component5,
-  ElementRef as ElementRef3,
-  EventEmitter as EventEmitter3,
-  Input as Input5,
-  Output as Output3,
-  ViewChild as ViewChild3
-} from "@angular/core";
-import { NgFor as NgFor3, NgIf as NgIf4 } from "@angular/common";
-import { Editor } from "@tiptap/core";
-import StarterKit from "@tiptap/starter-kit";
-import Image2 from "@tiptap/extension-image";
-import Placeholder from "@tiptap/extension-placeholder";
-import { cleanHtml, htmlIsEmpty } from "@lightworkai.official/debug-capture";
-
-// src/components/image-annotator-dialog.component.ts
-import {
-  Component as Component4,
-  ElementRef as ElementRef2,
-  EventEmitter as EventEmitter2,
-  Input as Input4,
-  Output as Output2,
-  ViewChild as ViewChild2
-} from "@angular/core";
-import { NgFor as NgFor2, NgIf as NgIf3 } from "@angular/common";
-import {
-  createAnnotator,
-  reporterStrings
-} from "@lightworkai.official/debug-capture";
-class ImageAnnotatorDialogComponent {
-  constructor() {
-    this.src = "";
-    this.confirmed = new EventEmitter2;
-    this.cancelled = new EventEmitter2;
-  }
-  annotator = null;
-  active = null;
-  loading = true;
-  icons = ICONS;
-  tools = [
-    { 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 }
-  ];
-  get t() {
-    return reporterStrings(this.locale);
-  }
-  label(key) {
-    return this.t[key];
-  }
-  ngAfterViewInit() {
-    const image = new Image;
-    image.addEventListener("load", () => {
-      const node = this.canvas.nativeElement;
-      node.width = image.naturalWidth;
-      node.height = image.naturalHeight;
-      this.annotator = createAnnotator(node, image, () => {
-        this.active = null;
-      });
-      this.loading = false;
-    });
-    image.src = this.src;
-  }
-  ngOnDestroy() {
-    this.annotator?.destroy();
-    this.annotator = null;
-  }
-  pick(tool) {
-    this.active = this.active === tool ? null : tool;
-    this.annotator?.setTool(this.active);
-  }
-  clear() {
-    this.annotator?.clear();
-    this.active = null;
-  }
-  backdrop(event) {
-    if (event.target === event.currentTarget)
-      this.cancelled.emit();
-  }
-  confirm() {
-    this.confirmed.emit(this.annotator?.toDataUrl() ?? this.src);
-  }
-}
-__legacyDecorateClassTS([
-  Input4({ required: true }),
-  __legacyMetadataTS("design:type", Object)
-], ImageAnnotatorDialogComponent.prototype, "src", undefined);
-__legacyDecorateClassTS([
-  Input4(),
-  __legacyMetadataTS("design:type", String)
-], ImageAnnotatorDialogComponent.prototype, "filename", undefined);
-__legacyDecorateClassTS([
-  Input4(),
-  __legacyMetadataTS("design:type", String)
-], ImageAnnotatorDialogComponent.prototype, "locale", undefined);
-__legacyDecorateClassTS([
-  Output2(),
-  __legacyMetadataTS("design:type", Object)
-], ImageAnnotatorDialogComponent.prototype, "confirmed", undefined);
-__legacyDecorateClassTS([
-  Output2(),
-  __legacyMetadataTS("design:type", Object)
-], ImageAnnotatorDialogComponent.prototype, "cancelled", undefined);
-__legacyDecorateClassTS([
-  ViewChild2("canvas", { static: true }),
-  __legacyMetadataTS("design:type", typeof ElementRef2 === "undefined" ? Object : ElementRef2)
-], ImageAnnotatorDialogComponent.prototype, "canvas", undefined);
-ImageAnnotatorDialogComponent = __legacyDecorateClassTS([
-  Component4({
-    selector: "lw-image-annotator-dialog",
-    standalone: true,
-    imports: [NgFor2, NgIf3, 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>
-  `
-  })
-], ImageAnnotatorDialogComponent);
-
-// src/components/rich-reply-editor.component.ts
-class RichReplyEditorComponent {
-  cdr;
-  set disabledState(value) {
-    this.disabled = value;
-    this.editor?.setEditable(!value);
-  }
-  pending = null;
-  pendingName = "screenshot.png";
-  disabled = false;
-  editor = null;
-  tools = [
-    { key: "bold", icon: ICONS.bold, mark: "bold", run: () => this.editor?.chain().focus().toggleBold().run() },
-    { key: "italic", icon: ICONS.italic, mark: "italic", run: () => this.editor?.chain().focus().toggleItalic().run() },
-    { key: "underline", icon: ICONS.underline, mark: "underline", run: () => this.editor?.chain().focus().toggleUnderline().run() },
-    { key: "bulletList", icon: ICONS.bulletList, mark: "bulletList", separatorBefore: true, run: () => this.editor?.chain().focus().toggleBulletList().run() },
-    { key: "orderedList", icon: ICONS.orderedList, mark: "orderedList", run: () => this.editor?.chain().focus().toggleOrderedList().run() },
-    { key: "link", icon: ICONS.link, mark: "link", run: () => this.toggleLink() },
-    { key: "attachImage", icon: ICONS.image, mark: "", separatorBefore: true, run: () => this.file.nativeElement.click() }
-  ];
-  constructor(cdr) {
-    this.placeholder = "";
-    this.host = "";
-    this.errored = new EventEmitter3;
-    this.cdr = cdr;
-  }
-  ngAfterViewInit() {
-    this.editor = new Editor({
-      element: this.mount.nativeElement,
-      content: this.initial ?? "",
-      extensions: [
-        StarterKit,
-        Image2.configure({ inline: false, allowBase64: false }),
-        Placeholder.configure({ placeholder: this.placeholder })
-      ],
-      editorProps: {
-        attributes: { class: "lw-editor-body" },
-        handlePaste: (_view, event) => {
-          const image = Array.from(event.clipboardData?.files ?? []).find((f) => f.type.startsWith("image/"));
-          if (!image)
-            return false;
-          event.preventDefault();
-          this.addImage(image);
-          return true;
-        },
-        handleDrop: (_view, event) => {
-          const dropped = event;
-          const image = Array.from(dropped.dataTransfer?.files ?? []).find((f) => f.type.startsWith("image/"));
-          if (!image)
-            return false;
-          dropped.preventDefault();
-          this.addImage(image);
-          return true;
-        }
-      },
-      onSelectionUpdate: () => this.cdr.markForCheck(),
-      onUpdate: () => this.cdr.markForCheck()
-    });
-    this.editor.setEditable(!this.disabled);
-  }
-  ngOnDestroy() {
-    this.editor?.destroy();
-    this.editor = null;
-  }
-  press(event, tool) {
-    event.preventDefault();
-    if (this.disabled)
-      return;
-    tool.run();
-  }
-  isActive(mark) {
-    return Boolean(mark) && (this.editor?.isActive(mark) ?? false);
-  }
-  onFile(event) {
-    const input = event.target;
-    const chosen = input.files?.[0];
-    input.value = "";
-    if (chosen)
-      this.addImage(chosen);
-  }
-  async addImage(file) {
-    if (this.pending)
-      return;
-    try {
-      this.pendingName = file.name || "screenshot.png";
-      this.pending = await readDataUri(file);
-      this.cdr.markForCheck();
-    } catch (e) {
-      this.errored.emit(e instanceof Error ? e.message : "unreadable file");
-    }
-  }
-  async commitImage(dataUri) {
-    this.pending = null;
-    try {
-      const src = await this.uploadImage(dataUriToFile(dataUri, this.pendingName));
-      this.editor?.chain().focus().setImage({ src }).run();
-    } catch (e) {
-      this.errored.emit(e instanceof Error ? e.message : "upload failed");
-    } finally {
-      this.cdr.markForCheck();
-    }
-  }
-  toggleLink() {
-    if (!this.editor)
-      return;
-    if (this.editor.getAttributes("link")["href"]) {
-      this.editor.chain().focus().unsetLink().run();
-      return;
-    }
-    const href = window.prompt(this.labels.linkPrompt, "https://");
-    if (!href)
-      return;
-    if (!/^https?:\/\//i.test(href)) {
-      this.errored.emit(`${this.labels.link}: http(s) only`);
-      return;
-    }
-    this.editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
-  }
-  value() {
-    const html = cleanHtml(this.editor?.getHTML() ?? "", this.host);
-    return htmlIsEmpty(html) ? "" : html;
-  }
-  clear() {
-    this.editor?.commands.clearContent(true);
-  }
-}
-__legacyDecorateClassTS([
-  Input5({ required: true }),
-  __legacyMetadataTS("design:type", Object)
-], RichReplyEditorComponent.prototype, "placeholder", undefined);
-__legacyDecorateClassTS([
-  Input5({ required: true }),
-  __legacyMetadataTS("design:type", Object)
-], RichReplyEditorComponent.prototype, "host", undefined);
-__legacyDecorateClassTS([
-  Input5({ required: true }),
-  __legacyMetadataTS("design:type", typeof EditorLabels === "undefined" ? Object : EditorLabels)
-], RichReplyEditorComponent.prototype, "labels", undefined);
-__legacyDecorateClassTS([
-  Input5({ required: true }),
-  __legacyMetadataTS("design:type", Function)
-], RichReplyEditorComponent.prototype, "uploadImage", undefined);
-__legacyDecorateClassTS([
-  Input5(),
-  __legacyMetadataTS("design:paramtypes", [
-    Boolean
-  ]),
-  __legacyMetadataTS("design:type", Boolean)
-], RichReplyEditorComponent.prototype, "disabledState", null);
-__legacyDecorateClassTS([
-  Input5(),
-  __legacyMetadataTS("design:type", String)
-], RichReplyEditorComponent.prototype, "locale", undefined);
-__legacyDecorateClassTS([
-  Input5(),
-  __legacyMetadataTS("design:type", String)
-], RichReplyEditorComponent.prototype, "initial", undefined);
-__legacyDecorateClassTS([
-  Output3(),
-  __legacyMetadataTS("design:type", Object)
-], RichReplyEditorComponent.prototype, "errored", undefined);
-__legacyDecorateClassTS([
-  ViewChild3("mount", { static: true }),
-  __legacyMetadataTS("design:type", typeof ElementRef3 === "undefined" ? Object : ElementRef3)
-], RichReplyEditorComponent.prototype, "mount", undefined);
-__legacyDecorateClassTS([
-  ViewChild3("file", { static: true }),
-  __legacyMetadataTS("design:type", typeof ElementRef3 === "undefined" ? Object : ElementRef3)
-], RichReplyEditorComponent.prototype, "file", undefined);
-RichReplyEditorComponent = __legacyDecorateClassTS([
-  Component5({
-    selector: "lw-rich-reply-editor",
-    standalone: true,
-    imports: [NgFor3, NgIf4, IconComponent, ImageAnnotatorDialogComponent],
-    template: `
-    <div class="lw-editor" [class.lw-editor--disabled]="disabled">
-      <div class="lw-editor__tools">
-        <ng-container *ngFor="let tool of tools">
-          <span *ngIf="tool.separatorBefore" class="lw-editor__sep"></span>
-          <button
-            type="button"
-            class="lw-tool"
-            [class.lw-tool--on]="isActive(tool.mark)"
-            [title]="labels[tool.key]"
-            [attr.aria-label]="labels[tool.key]"
-            [attr.aria-pressed]="isActive(tool.mark)"
-            [disabled]="disabled"
-            (mousedown)="press($event, tool)"
-          >
-            <lw-icon [svg]="tool.icon" />
-          </button>
-        </ng-container>
-      </div>
-      <div #mount class="lw-editor__content"></div>
-      <input #file type="file" accept="image/*" hidden (change)="onFile($event)" />
-
-      <lw-image-annotator-dialog
-        *ngIf="pending"
-        [src]="pending"
-        [filename]="pendingName"
-        [locale]="locale"
-        (confirmed)="commitImage($event)"
-        (cancelled)="pending = null"
-      />
-    </div>
-  `
-  }),
-  __legacyMetadataTS("design:paramtypes", [
-    typeof ChangeDetectorRef === "undefined" ? Object : ChangeDetectorRef
-  ])
-], RichReplyEditorComponent);
-function readDataUri(file) {
-  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);
-  });
-}
-function dataUriToFile(dataUri, name) {
-  const [header, encoded] = dataUri.split(",");
-  const type = /data:([^;]+)/.exec(header ?? "")?.[1] ?? "image/png";
-  const binary = atob(encoded ?? "");
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0;i < binary.length; i += 1)
-    bytes[i] = binary.charCodeAt(i);
-  return new File([bytes], name, { type });
-}
-
-// src/components/ticket-detail.component.ts
-var TONES = {
-  OPEN: { icon: ICONS.inbox, border: "#bfdbfe", bg: "#eff6ff", fg: "#1e3a8a", accent: "#3b82f6" },
-  IN_PROGRESS: { icon: ICONS.clock, border: "#fde68a", bg: "#fffbeb", fg: "#78350f", accent: "#f59e0b" },
-  RESOLVED: { icon: ICONS.checkCircle, border: "#a7f3d0", bg: "#ecfdf5", fg: "#064e3b", accent: "#10b981" },
-  CLOSED: { icon: ICONS.checkCircle, border: "#e5e7eb", bg: "#f9fafb", fg: "#1f2937", accent: "#9ca3af" },
-  WONT_FIX: { icon: ICONS.ban, border: "#e5e7eb", bg: "#f9fafb", fg: "#374151", accent: "#9ca3af" }
-};
-var AWAITING = { icon: ICONS.message, border: "#fcd34d", bg: "#fffbeb", fg: "#78350f", accent: "#f59e0b" };
-var MESSAGES = {
-  OPEN: { th: "รับเรื่องแล้ว — รอทีมงานตรวจสอบ", en: "Received — waiting for the team to look" },
-  IN_PROGRESS: { th: "ทีมงานกำลังดำเนินการแก้ไข", en: "The team is working on it" },
-  RESOLVED: { th: "แก้ไขเรียบร้อยแล้ว", en: "Fixed" },
-  CLOSED: { th: "ปิดเรื่องแล้ว", en: "Closed" },
-  WONT_FIX: { th: "พิจารณาแล้ว — ยังไม่ได้ดำเนินการในขณะนี้", en: "Reviewed — not being worked on for now" }
-};
-var HAPPY = ["OPEN", "IN_PROGRESS", "RESOLVED", "CLOSED"];
-
-class TicketDetailComponent {
-  constructor() {
-    this.history = [];
-    this.host = "";
-    this.sending = false;
-    this.reopening = false;
-    this.back = new EventEmitter4;
-    this.sent = new EventEmitter4;
-    this.reopened = new EventEmitter4;
-    this.edited = new EventEmitter4;
-    this.errored = new EventEmitter4;
-  }
-  set attachmentUrl(read) {
-    this.readUrl = read;
-    this.loadShots();
-  }
-  editingId = null;
-  savingEdit = false;
-  async saveEdit(messageId) {
-    const body = this.draft?.value() ?? "";
-    if (!body || this.savingEdit)
-      return;
-    this.savingEdit = true;
-    try {
-      await editMyMessage(this.ticket.id, messageId, body);
-      this.editingId = null;
-      this.edited.emit();
-    } catch (e) {
-      this.errored.emit(e instanceof Error ? e.message : this.t.sendFailed);
-    } finally {
-      this.savingEdit = false;
-    }
-  }
-  seenMessages = -1;
-  ngOnChanges() {
-    const count = this.ticket?.messages.length ?? 0;
-    const first = this.seenMessages < 0;
-    if (first || count > this.seenMessages) {
-      queueMicrotask(() => {
-        const box = this.thread?.nativeElement;
-        if (!box)
-          return;
-        box.scrollTop = box.scrollHeight;
-        if (!first)
-          box.lastElementChild?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-      });
-    }
-    this.seenMessages = count;
-  }
-  icons = ICONS;
-  reopenOpen = false;
-  shotUrls = {};
-  readUrl;
-  get lang() {
-    return this.locale === "en" ? "en" : "th";
-  }
-  get key() {
-    return ticketKey2(this.config.realm.slug, this.ticket.number);
-  }
-  get updated() {
-    return Boolean(this.ticket.updatedAt && this.ticket.updatedAt !== this.ticket.createdAt);
-  }
-  get awaiting() {
-    return this.maps.isAwaitingReply(this.ticket.status);
-  }
-  get tone() {
-    return this.awaiting ? AWAITING : TONES[this.ticket.status] ?? TONES["OPEN"];
-  }
-  get kicker() {
-    if (this.awaiting)
-      return this.lang === "en" ? "AWAITING YOUR REPLY" : "รอการตอบกลับจากคุณ";
-    return this.lang === "en" ? "LATEST STATUS" : "สถานะล่าสุด";
-  }
-  get headline() {
-    if (this.awaiting) {
-      return this.lang === "en" ? "The team needs more information from you" : "ทีมงานขอข้อมูลเพิ่มเติม — รอการตอบกลับจากคุณ";
-    }
-    const described = this.maps.columnOf(this.ticket.status)?.description?.trim();
-    return described || MESSAGES[this.ticket.status]?.[this.lang] || this.maps.labelOf(this.ticket.status);
-  }
-  get showNote() {
-    return !this.awaiting && !this.ticket.messages.some((m) => m.authorRole === "AGENT") && this.maps.isClosed(this.ticket.status) && Boolean(this.ticket.resolutionNote?.trim());
-  }
-  get canReopen() {
-    return this.maps.isClosed(this.ticket.status) && this.config.featureFlags.selfServiceReopen === true;
-  }
-  get reopenPlaceholder() {
-    return this.lang === "en" ? "Tell us what is still happening (optional)…" : "บอกเราหน่อยว่ายังพบปัญหาอะไร (ไม่ระบุก็ได้)…";
-  }
-  get editorLabels() {
-    return {
-      bold: this.t.bold,
-      italic: this.t.italic,
-      underline: this.t.underline,
-      bulletList: this.t.bulletList,
-      orderedList: this.t.orderedList,
-      link: this.t.link,
-      linkPrompt: this.t.linkPrompt,
-      attachImage: this.t.attachImage
-    };
-  }
-  get screenshots() {
-    return this.ticket.attachments.filter((a) => (a.contentType ?? "").startsWith("image/"));
-  }
-  get timeline() {
-    const events = this.history.length ? this.history.map((h) => ({ status: h.toStatus, at: h.createdAt })) : [{ status: "OPEN", at: this.ticket.createdAt }];
-    const nodes = events.map((event, i) => {
-      const previous = events[i - 1];
-      return {
-        label: i === 0 ? this.lang === "en" ? "Reported" : "รายงานปัญหา" : this.maps.labelOf(event.status),
-        time: this.when(event.at),
-        state: i === events.length - 1 ? "current" : "done",
-        reopened: Boolean(previous && this.maps.isClosed(previous.status) && !this.maps.isClosed(event.status))
-      };
-    });
-    const index = HAPPY.indexOf(this.ticket.status);
-    const upcoming = this.maps.isClosed(this.ticket.status) || index < 0 ? [] : HAPPY.slice(index + 1);
-    for (const status of upcoming) {
-      nodes.push({
-        label: this.maps.labelOf(status),
-        time: this.lang === "en" ? "Pending" : "รอดำเนินการ",
-        state: "pending",
-        reopened: false
-      });
-    }
-    return nodes;
-  }
-  when(iso) {
-    return formatDateTime2(iso, this.config.timezone, this.locale);
-  }
-  send() {
-    const body = this.editor?.value() ?? "";
-    if (!body || this.sending)
-      return;
-    this.sent.emit(body);
-    this.editor?.clear();
-  }
-  loadShots() {
-    if (!this.readUrl || !this.ticket)
-      return;
-    for (const shot of this.screenshots) {
-      this.readUrl(shot.id).then((url) => this.shotUrls = { ...this.shotUrls, [shot.id]: url }, () => {
-        return;
-      });
-    }
-  }
-}
-__legacyDecorateClassTS([
-  Input6({ required: true }),
-  __legacyMetadataTS("design:type", typeof MyTicketDetail === "undefined" ? Object : MyTicketDetail)
-], TicketDetailComponent.prototype, "ticket", undefined);
-__legacyDecorateClassTS([
-  Input6({ required: true }),
-  __legacyMetadataTS("design:type", Array)
-], TicketDetailComponent.prototype, "history", undefined);
-__legacyDecorateClassTS([
-  Input6({ required: true }),
-  __legacyMetadataTS("design:type", typeof RealmConfig === "undefined" ? Object : RealmConfig)
-], TicketDetailComponent.prototype, "config", undefined);
-__legacyDecorateClassTS([
-  Input6({ required: true }),
-  __legacyMetadataTS("design:type", typeof StatusMaps === "undefined" ? Object : StatusMaps)
-], TicketDetailComponent.prototype, "maps", undefined);
-__legacyDecorateClassTS([
-  Input6({ required: true }),
-  __legacyMetadataTS("design:type", typeof TicketStrings === "undefined" ? Object : TicketStrings)
-], TicketDetailComponent.prototype, "t", undefined);
-__legacyDecorateClassTS([
-  Input6(),
-  __legacyMetadataTS("design:type", Object)
-], TicketDetailComponent.prototype, "host", undefined);
-__legacyDecorateClassTS([
-  Input6(),
-  __legacyMetadataTS("design:type", String)
-], TicketDetailComponent.prototype, "locale", undefined);
-__legacyDecorateClassTS([
-  Input6(),
-  __legacyMetadataTS("design:type", Object)
-], TicketDetailComponent.prototype, "sending", undefined);
-__legacyDecorateClassTS([
-  Input6(),
-  __legacyMetadataTS("design:type", Object)
-], TicketDetailComponent.prototype, "reopening", undefined);
-__legacyDecorateClassTS([
-  Input6({ required: true }),
-  __legacyMetadataTS("design:type", Function)
-], TicketDetailComponent.prototype, "uploadImage", undefined);
-__legacyDecorateClassTS([
-  Input6({ required: true }),
-  __legacyMetadataTS("design:paramtypes", [
-    Function
-  ]),
-  __legacyMetadataTS("design:type", Function)
-], TicketDetailComponent.prototype, "attachmentUrl", null);
-__legacyDecorateClassTS([
-  Output4(),
-  __legacyMetadataTS("design:type", Object)
-], TicketDetailComponent.prototype, "back", undefined);
-__legacyDecorateClassTS([
-  Output4(),
-  __legacyMetadataTS("design:type", Object)
-], TicketDetailComponent.prototype, "sent", undefined);
-__legacyDecorateClassTS([
-  Output4(),
-  __legacyMetadataTS("design:type", Object)
-], TicketDetailComponent.prototype, "reopened", undefined);
-__legacyDecorateClassTS([
-  Output4(),
-  __legacyMetadataTS("design:type", Object)
-], TicketDetailComponent.prototype, "edited", undefined);
-__legacyDecorateClassTS([
-  Output4(),
-  __legacyMetadataTS("design:type", Object)
-], TicketDetailComponent.prototype, "errored", undefined);
-__legacyDecorateClassTS([
-  ViewChild4("draft"),
-  __legacyMetadataTS("design:type", typeof RichReplyEditorComponent === "undefined" ? Object : RichReplyEditorComponent)
-], TicketDetailComponent.prototype, "draft", undefined);
-__legacyDecorateClassTS([
-  ViewChild4("editor"),
-  __legacyMetadataTS("design:type", typeof RichReplyEditorComponent === "undefined" ? Object : RichReplyEditorComponent)
-], TicketDetailComponent.prototype, "editor", undefined);
-__legacyDecorateClassTS([
-  ViewChild4("thread"),
-  __legacyMetadataTS("design:type", typeof ElementRef4 === "undefined" ? Object : ElementRef4)
-], TicketDetailComponent.prototype, "thread", undefined);
-TicketDetailComponent = __legacyDecorateClassTS([
-  Component6({
-    selector: "lw-ticket-detail",
-    standalone: true,
-    imports: [NgIf5, NgFor4, NgClass, IconComponent, TicketBodyComponent, RichReplyEditorComponent],
-    template: `
-    <div class="lw-detail">
-      <button type="button" class="lw-back" (click)="back.emit()">
-        <lw-icon [svg]="icons.arrowLeft" /> {{ t.back }}
-      </button>
-
-      <section class="lw-card">
-        <h3 class="lw-card__heading">{{ ticket.title }}</h3>
-        <div class="lw-facts">
-          <span class="lw-key">{{ key }}</span>
-          <span *ngIf="ticket.category" class="lw-chip">{{ ticket.category }}</span>
-          <span>{{ t.colCreated }} {{ when(ticket.createdAt) }}</span>
-          <span *ngIf="updated">{{ t.colUpdated }} {{ when(ticket.updatedAt) }}</span>
-        </div>
-        <lw-ticket-body *ngIf="ticket.description" class="lw-intro" [html]="ticket.description" [host]="host" />
-        <p *ngIf="ticket.routeUrl" class="lw-route">
-          {{ t.page }}:
-          <a [href]="ticket.routeUrl" target="_blank" rel="noopener noreferrer">{{ ticket.routeUrl }}</a>
-        </p>
-      </section>
-
-      <section class="lw-hero" [style.border-color]="tone.border" [style.background]="tone.bg">
-        <lw-icon class="lw-hero__icon" [svg]="tone.icon" [style.color]="tone.accent" />
-        <div class="lw-hero__body">
-          <p class="lw-hero__kicker">{{ kicker }}</p>
-          <p class="lw-hero__headline" [style.color]="tone.fg">{{ headline }}</p>
-          <p *ngIf="awaiting" class="lw-hero__nudge">
-            {{ lang === "en" ? "Please reply to the team in the conversation below" : "กรุณาตอบกลับให้ทีมงานในช่องแชทด้านล่าง" }}
-          </p>
-          <div *ngIf="showNote" class="lw-hero__note">
-            <lw-icon class="lw-hero__wrench" [svg]="icons.wrench" />
-            <lw-ticket-body [html]="ticket.resolutionNote || ''" [host]="host" />
-          </div>
-        </div>
-      </section>
-
-      <section *ngIf="canReopen" class="lw-reopen">
-        <div *ngIf="!reopenOpen" class="lw-reopen__row">
-          <span class="lw-reopen__hint">{{ lang === "en" ? "Problem not fixed?" : "ปัญหายังไม่หาย?" }}</span>
-          <button type="button" class="lw-reopen__open" (click)="reopenOpen = true">
-            <lw-icon [svg]="icons.rotate" /> {{ t.reopen }}
-          </button>
-        </div>
-        <div *ngIf="reopenOpen">
-          <p class="lw-reopen__title">{{ t.reopen }}</p>
-          <textarea #note class="lw-reopen__note" rows="2" [placeholder]="reopenPlaceholder"></textarea>
-          <div class="lw-reopen__actions">
-            <button type="button" class="lw-reopen__cancel" (click)="reopenOpen = false; note.value = ''">
-              {{ lang === "en" ? "Cancel" : "ยกเลิก" }}
-            </button>
-            <button type="button" class="lw-reopen__confirm" [disabled]="reopening" (click)="reopened.emit(note.value.trim())">
-              <lw-icon [svg]="icons.rotate" /> {{ reopening ? t.reopening : t.reopen }}
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <section class="lw-card">
-        <h3 class="lw-card__title">{{ lang === "en" ? "Progress" : "ความคืบหน้า" }}</h3>
-        <ol class="lw-timeline">
-          <li *ngFor="let node of timeline; let i = index; let last = last" class="lw-node">
-            <div class="lw-rail">
-              <span *ngIf="!last" class="lw-line" [class.lw-line--pending]="node.state === 'pending'"></span>
-              <span class="lw-dot" [ngClass]="'lw-dot--' + node.state" [class.lw-dot--reopened]="node.reopened">
-                <span *ngIf="node.state === 'current' && !node.reopened" class="lw-pip"></span>
-              </span>
-            </div>
-            <div class="lw-node__text" [class.lw-node__text--last]="last">
-              <div class="lw-node__label" [ngClass]="'lw-node__label--' + node.state" [class.lw-node__label--reopened]="node.reopened">
-                <lw-icon *ngIf="node.reopened" class="lw-node__icon" [svg]="icons.rotate" />
-                {{ node.reopened ? (lang === "en" ? "Reopened" : "เปิดใหม่") + " · " + node.label : node.label }}
-              </div>
-              <div class="lw-node__time">{{ node.time }}</div>
-            </div>
-          </li>
-        </ol>
-      </section>
-
-      <section class="lw-card">
-        <h3 class="lw-card__title">{{ t.conversation }}</h3>
-        <div #thread class="lw-thread">
-          <p *ngIf="!ticket.messages.length" class="lw-thread__empty">{{ t.noMessages }}</p>
-          <article
-            *ngFor="let message of ticket.messages"
-            class="lw-msg"
-            [class.lw-msg--mine]="message.authorRole === 'REPORTER'"
-          >
-            <!-- The original's shape exactly: the meta line lives INSIDE a
-                 bordered bubble, and a TEAM message shows only "ทีมงาน" — never
-                 the officer's name. That is deliberate there and worth keeping:
-                 the team answers as one unit, and a reporter should not see
-                 which person replied. -->
-            <div class="lw-msg__bubble">
-              <p class="lw-msg__meta">
-                <span *ngIf="message.authorRole === 'AGENT'" class="lw-msg__who">{{ t.team }}</span>
-                <ng-container *ngIf="message.authorRole !== 'AGENT'">
-                  <span class="lw-msg__who">{{ message.authorName || t.you }}</span>
-                  <span class="lw-msg__role">{{ t.reporterRole }}</span>
-                </ng-container>
-                <span>· {{ when(message.createdAt) }}</span>
-                <span *ngIf="message.editedAt" class="lw-msg__edited">· {{ t.edited }}</span>
-                <!-- Your own only. The server refuses any message the caller did
-                     not write, so this button is a convenience, not the rule. -->
-                <button
-                  *ngIf="message.authorRole === 'REPORTER' && editingId !== message.id"
-                  type="button"
-                  class="lw-msg__edit"
-                  (click)="editingId = message.id"
-                >
-                  <lw-icon [svg]="icons.pencil" /> {{ t.edit }}
-                </button>
-              </p>
-              <div *ngIf="editingId === message.id; else plainBody" class="lw-msg__editing">
-                <lw-rich-reply-editor
-                  #draft
-                  [placeholder]="t.replyPlaceholder"
-                  [host]="host"
-                  [locale]="lang"
-                  [labels]="editorLabels"
-                  [disabledState]="savingEdit"
-                  [uploadImage]="uploadImage"
-                  [initial]="message.body"
-                  (errored)="errored.emit($event)"
-                />
-                <div class="lw-msg__editActions">
-                  <button type="button" class="lw-btn" [disabled]="savingEdit" (click)="editingId = null">
-                    <lw-icon [svg]="icons.xSmall" /> {{ t.cancel }}
-                  </button>
-                  <button type="button" class="lw-send" [disabled]="savingEdit" (click)="saveEdit(message.id)">
-                    <lw-icon [svg]="icons.checkSmall" /> {{ t.saveEdit }}
-                  </button>
-                </div>
-              </div>
-              <ng-template #plainBody>
-                <lw-ticket-body [html]="message.body" [host]="host" />
-              </ng-template>
-            </div>
-          </article>
-        </div>
-        <div class="lw-composer">
-          <lw-rich-reply-editor
-            #editor
-            [placeholder]="t.replyPlaceholder"
-            [host]="host"
-            [locale]="lang"
-            [labels]="editorLabels"
-            [disabledState]="!!sending"
-            [uploadImage]="uploadImage"
-            (errored)="errored.emit($event)"
-          />
-          <div class="lw-composer__actions">
-            <button type="button" class="lw-send" [disabled]="sending" (click)="send()">
-              <lw-icon [svg]="icons.send" /> {{ sending ? t.sending : t.send }}
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <section *ngIf="screenshots.length" class="lw-card">
-        <h3 class="lw-card__title">{{ lang === "en" ? "Screenshots you sent" : "ภาพหน้าจอที่คุณแจ้ง" }}</h3>
-        <ng-container *ngFor="let shot of screenshots">
-          <img *ngIf="shotUrls[shot.id]" class="lw-shot" [src]="shotUrls[shot.id]" [alt]="shot.filename || ''" />
-        </ng-container>
-      </section>
-    </div>
-  `
-  })
-], TicketDetailComponent);
-
-// src/components/my-tickets-panel.component.ts
-class MyTicketsPanelComponent {
-  constructor() {
-    this.hideTitle = false;
-    this.replied = new EventEmitter5;
-    this.reopenedTicket = new EventEmitter5;
-    this.errored = new EventEmitter5;
-  }
-  icons = ICONS;
-  items = [];
-  config = null;
-  loading = true;
-  error = null;
-  noIdentity = false;
-  keyword = "";
-  applied = "";
-  statusFilter = "";
-  sort = { key: "createdAt", direction: "desc" };
-  page = 1;
-  shown = 0;
-  detail = null;
-  history = [];
-  detailError = null;
-  detailLoading = false;
-  sending = false;
-  reopening = false;
-  debounce = null;
-  first = true;
-  get locale() {
-    return this.safe(() => getConfig().locale, undefined);
-  }
-  get host() {
-    return this.safe(() => getConfig().host, "");
-  }
-  get t() {
-    return ticketStrings(this.locale);
-  }
-  get maps() {
-    return statusMaps(this.config?.statusColumns ?? [], this.t.allStatuses);
-  }
-  ngOnInit() {
-    this.load();
-  }
-  ngOnChanges() {
-    if (this.first) {
-      this.first = false;
-      return;
-    }
-    this.load();
-  }
-  async load() {
-    this.loading = true;
-    this.error = null;
-    this.noIdentity = false;
-    try {
-      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;
-    }
-  }
-  onKeyword(next) {
-    this.keyword = next;
-    if (this.debounce)
-      clearTimeout(this.debounce);
-    this.debounce = setTimeout(() => {
-      this.applied = next;
-      this.page = 1;
-    }, 300);
-  }
-  onStatus(next) {
-    this.statusFilter = next;
-    this.page = 1;
-  }
-  async open(id) {
-    this.detail = null;
-    this.history = [];
-    this.detailError = null;
-    this.detailLoading = true;
-    try {
-      return await this.reload(id);
-    } finally {
-      this.detailLoading = false;
-    }
-  }
-  async reload(id) {
-    try {
-      const [found, events] = await Promise.all([
-        getMyTicket(id),
-        getMyTicketHistory(id).catch(() => [])
-      ]);
-      this.detail = found;
-      this.history = events;
-      return found;
-    } catch (e) {
-      this.detailError = e instanceof Error ? e.message : this.t.detailFailed;
-      return null;
-    }
-  }
-  back() {
-    this.detail = null;
-    this.load();
-  }
-  toggleSort(key) {
-    this.sort = this.sort.key === key ? { key, direction: this.sort.direction === "asc" ? "desc" : "asc" } : { key, direction: key === "createdAt" || key === "updatedAt" ? "desc" : "asc" };
-  }
-  async send(body) {
-    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;
-    }
-  }
-  async reopen(note) {
-    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;
-    }
-  }
-  uploadImage = async (file) => {
-    const ticket = this.detail;
-    if (!ticket)
-      throw new Error("no ticket");
-    const dataUri = await readDataUri2(file);
-    const stored = await uploadInlineImage(ticket.id, dataUri, file.name);
-    return stored.url;
-  };
-  attachmentUrl = (id) => getAttachmentUrl(id).then((found) => found.url);
-  safe(read, fallback) {
-    try {
-      return read();
-    } catch {
-      return fallback;
-    }
-  }
-}
-__legacyDecorateClassTS([
-  Input7(),
-  __legacyMetadataTS("design:type", Object)
-], MyTicketsPanelComponent.prototype, "refreshKey", undefined);
-__legacyDecorateClassTS([
-  Input7(),
-  __legacyMetadataTS("design:type", Object)
-], MyTicketsPanelComponent.prototype, "hideTitle", undefined);
-__legacyDecorateClassTS([
-  Output5(),
-  __legacyMetadataTS("design:type", Object)
-], MyTicketsPanelComponent.prototype, "replied", undefined);
-__legacyDecorateClassTS([
-  Output5(),
-  __legacyMetadataTS("design:type", Object)
-], MyTicketsPanelComponent.prototype, "reopenedTicket", undefined);
-__legacyDecorateClassTS([
-  Output5(),
-  __legacyMetadataTS("design:type", Object)
-], MyTicketsPanelComponent.prototype, "errored", undefined);
-MyTicketsPanelComponent = __legacyDecorateClassTS([
-  Component7({
-    selector: "lw-my-tickets-panel",
-    standalone: true,
-    imports: [NgIf6, NgFor5, 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>
-  `
-  })
-], MyTicketsPanelComponent);
-function readDataUri2(file) {
-  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);
-  });
-}
-
-// src/index.ts
+import { APP_INITIALIZER, Component, Input, makeEnvironmentProviders, Output, EventEmitter } from "@angular/core";
+import { configureDebugCapture, installDebugCapture, launch, setErroredQueriesSource, openSupportPortal, showToast } from "@lightworkai.official/debug-capture";
 import { configureDebugCapture as configureDebugCapture2, launch as launch2, onCrash } from "@lightworkai.official/debug-capture";
 function provideDebugCapture(options) {
   const { errorQueries, ui, ...config } = options;
@@ -1546,11 +42,11 @@ class ReportProblemButtonComponent {
   }
 }
 __legacyDecorateClassTS([
-  Input8(),
+  Input(),
   __legacyMetadataTS("design:type", Object)
 ], ReportProblemButtonComponent.prototype, "label", undefined);
 ReportProblemButtonComponent = __legacyDecorateClassTS([
-  Component8({
+  Component({
     selector: "lw-report-problem-button",
     standalone: true,
     template: `
@@ -1577,16 +73,57 @@ ReportProblemButtonComponent = __legacyDecorateClassTS([
     styles: [":host { display: inline-flex; }"]
   })
 ], ReportProblemButtonComponent);
+
+class SupportPortalButtonComponent {
+  constructor() {
+    this.label = "ดูปัญหาที่แจ้ง";
+    this.newTab = false;
+    this.failed = new EventEmitter;
+  }
+  pending = false;
+  async open() {
+    if (this.pending)
+      return;
+    this.pending = true;
+    try {
+      await openSupportPortal(this.newTab ? { target: "_blank" } : {});
+    } catch (err) {
+      this.failed.emit(err);
+      showToast("เปิดรายการปัญหาไม่สำเร็จ", "error");
+    } finally {
+      this.pending = false;
+    }
+  }
+}
+__legacyDecorateClassTS([
+  Input(),
+  __legacyMetadataTS("design:type", Object)
+], SupportPortalButtonComponent.prototype, "label", undefined);
+__legacyDecorateClassTS([
+  Input(),
+  __legacyMetadataTS("design:type", Object)
+], SupportPortalButtonComponent.prototype, "newTab", undefined);
+__legacyDecorateClassTS([
+  Output(),
+  __legacyMetadataTS("design:type", Object)
+], SupportPortalButtonComponent.prototype, "failed", undefined);
+SupportPortalButtonComponent = __legacyDecorateClassTS([
+  Component({
+    selector: "lw-support-portal-button",
+    standalone: true,
+    template: `
+    <button type="button" [attr.aria-label]="label" [attr.title]="label" [disabled]="pending" (click)="open()">
+      <ng-content>{{ label }}</ng-content>
+    </button>
+  `,
+    styles: [":host { display: inline-flex; }"]
+  })
+], SupportPortalButtonComponent);
 export {
   provideDebugCapture,
   onCrash,
   launch2 as launch,
   configureDebugCapture2 as configureDebugCapture,
-  TicketTableComponent,
-  TicketDetailComponent,
-  TicketBodyComponent,
-  RichReplyEditorComponent,
-  ReportProblemButtonComponent,
-  MyTicketsPanelComponent,
-  ImageAnnotatorDialogComponent
+  SupportPortalButtonComponent,
+  ReportProblemButtonComponent
 };