@lightworkai.official/debug-capture-angular 0.6.0

package/dist/index.mjs

@@ -0,0 +1,1592 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __legacyMetadataTS = (k, v) => {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(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 { configureDebugCapture as configureDebugCapture2, launch as launch2, onCrash } from "@lightworkai.official/debug-capture";
+function provideDebugCapture(options) {
+  const { errorQueries, ui, ...config } = options;
+  return makeEnvironmentProviders([
+    {
+      provide: APP_INITIALIZER,
+      multi: true,
+      useValue: () => {
+        configureDebugCapture(config);
+        if (errorQueries)
+          setErroredQueriesSource(errorQueries);
+        installDebugCapture({ ui });
+      }
+    }
+  ]);
+}
+
+class ReportProblemButtonComponent {
+  constructor() {
+    this.label = "รายงานปัญหา";
+  }
+  report() {
+    launch({ type: "manual" });
+  }
+}
+__legacyDecorateClassTS([
+  Input8(),
+  __legacyMetadataTS("design:type", Object)
+], ReportProblemButtonComponent.prototype, "label", undefined);
+ReportProblemButtonComponent = __legacyDecorateClassTS([
+  Component8({
+    selector: "lw-report-problem-button",
+    standalone: true,
+    template: `
+    <button type="button" [attr.aria-label]="label" [attr.title]="label" (click)="report()">
+      <ng-content>
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M8 2l1.9 1.9M16 2l-1.9 1.9" />
+          <rect x="8" y="6" width="8" height="14" rx="4" />
+          <path d="M3 13h5M16 13h5M4 8l3 2M20 8l-3 2M4 18l3-2M20 18l-3-2" />
+        </svg>
+      </ng-content>
+    </button>
+  `,
+    styles: [":host { display: inline-flex; }"]
+  })
+], ReportProblemButtonComponent);
+export {
+  provideDebugCapture,
+  onCrash,
+  launch2 as launch,
+  configureDebugCapture2 as configureDebugCapture,
+  TicketTableComponent,
+  TicketDetailComponent,
+  TicketBodyComponent,
+  RichReplyEditorComponent,
+  ReportProblemButtonComponent,
+  MyTicketsPanelComponent,
+  ImageAnnotatorDialogComponent
+};