@lightworkai.official/debug-capture-angular 0.6.0

package/src/components/ticket-detail.component.ts

@@ -0,0 +1,441 @@
+/**
+ * One report: what was filed, where it stands, what happened, and the thread.
+ * The order is the original's.
+ */
+import {
+  Component, ElementRef, EventEmitter, Input, Output, ViewChild, type OnChanges,
+} from "@angular/core";
+import { NgClass, NgFor, NgIf } from "@angular/common";
+import {
+  editMyMessage, formatDateTime, ticketKey,
+  type MyTicketDetail, type RealmConfig, type StatusEvent, type StatusMaps, type TicketStrings,
+} from "@lightworkai.official/debug-capture";
+import { IconComponent } from "./icon.component";
+import { TicketBodyComponent } from "./ticket-body.component";
+import { RichReplyEditorComponent } from "./rich-reply-editor.component";
+import { ICONS } from "./icons";
+
+/** Only the SYSTEM statuses get a tone; an admin-added lane falls back to OPEN. */
+const TONES: Record<string, { icon: string; border: string; bg: string; fg: string; accent: string }> = {
+  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" },
+};
+const AWAITING = { icon: ICONS.message, border: "#fcd34d", bg: "#fffbeb", fg: "#78350f", accent: "#f59e0b" };
+
+const MESSAGES: Record<string, { th: string; en: string }> = {
+  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" },
+};
+
+const HAPPY = ["OPEN", "IN_PROGRESS", "RESOLVED", "CLOSED"];
+
+interface TimelineNode {
+  label: string;
+  time: string;
+  state: "done" | "current" | "pending";
+  reopened: boolean;
+}
+
+@Component({
+  selector: "lw-ticket-detail",
+  standalone: true,
+  imports: [NgIf, NgFor, 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>
+  `,
+})
+export class TicketDetailComponent implements OnChanges {
+  @Input({ required: true }) ticket!: MyTicketDetail;
+  @Input({ required: true }) history: StatusEvent[] = [];
+  @Input({ required: true }) config!: RealmConfig;
+  @Input({ required: true }) maps!: StatusMaps;
+  @Input({ required: true }) t!: TicketStrings;
+  @Input() host = "";
+  @Input() locale?: "th" | "en";
+  @Input() sending = false;
+  @Input() reopening = false;
+  @Input({ required: true }) uploadImage!: (file: File) => Promise<string>;
+  @Input({ required: true }) set attachmentUrl(read: (id: string) => Promise<string>) {
+    this.readUrl = read;
+    this.loadShots();
+  }
+
+  @Output() back = new EventEmitter<void>();
+  @Output() sent = new EventEmitter<string>();
+  @Output() reopened = new EventEmitter<string>();
+  @Output() edited = new EventEmitter<void>();
+  @Output() errored = new EventEmitter<string>();
+
+  /**
+   * The message being rewritten, if any.
+   *
+   * Only ONE at a time: an open editor per bubble would let someone start three
+   * rewrites and lose track of which are unsaved.
+   */
+  protected editingId: string | null = null;
+  protected savingEdit = false;
+
+  @ViewChild("draft") private draft?: RichReplyEditorComponent;
+
+  protected async saveEdit(messageId: string): Promise<void> {
+    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;
+    }
+  }
+
+  @ViewChild("editor") private editor?: RichReplyEditorComponent;
+  @ViewChild("thread") private thread?: ElementRef<HTMLElement>;
+  private seenMessages = -1;
+
+  /**
+   * Open at the newest message, and stay there when one arrives.
+   *
+   * The thread is a fixed-height window (~320px), so without the first part it
+   * opens showing the OLDEST messages and the reader has to scroll to find out
+   * what has happened since. Every chat opens at the bottom.
+   *
+   * The second part matters because the thread sits above the composer: a reply
+   * pushes the composer down and out of sight, leaving the reader in the middle
+   * of the conversation with no sign their message landed.
+   */
+  ngOnChanges(): void {
+    const count = this.ticket?.messages.length ?? 0;
+    const first = this.seenMessages < 0;
+    if (first || count > this.seenMessages) {
+      // After the view has been updated with the new message, not before.
+      queueMicrotask(() => {
+        const box = this.thread?.nativeElement;
+        if (!box) return;
+        box.scrollTop = box.scrollHeight;
+        // Jumped on open — that is where the conversation starts, not a
+        // transition from somewhere else, and animating it reads as a glitch.
+        if (!first) box.lastElementChild?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      });
+    }
+    this.seenMessages = count;
+  }
+
+  protected readonly icons = ICONS;
+  protected reopenOpen = false;
+  protected shotUrls: Record<string, string> = {};
+  private readUrl?: (id: string) => Promise<string>;
+
+  protected get lang(): "th" | "en" {
+    return this.locale === "en" ? "en" : "th";
+  }
+
+  protected get key(): string {
+    return ticketKey(this.config.realm.slug, this.ticket.number);
+  }
+
+  protected get updated(): boolean {
+    return Boolean(this.ticket.updatedAt && this.ticket.updatedAt !== this.ticket.createdAt);
+  }
+
+  protected get awaiting(): boolean {
+    return this.maps.isAwaitingReply(this.ticket.status);
+  }
+
+  protected get tone() {
+    return this.awaiting ? AWAITING : (TONES[this.ticket.status] ?? TONES["OPEN"]!);
+  }
+
+  protected get kicker(): string {
+    if (this.awaiting) return this.lang === "en" ? "AWAITING YOUR REPLY" : "รอการตอบกลับจากคุณ";
+    return this.lang === "en" ? "LATEST STATUS" : "สถานะล่าสุด";
+  }
+
+  /**
+   * Config-first: an awaiting lane's "please reply" wins, then the lane's own
+   * description (so a realm's custom lane carries its own words), then our
+   * default copy, then the bare label.
+   */
+  protected get headline(): string {
+    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);
+  }
+
+  /*
+   * The solution note, only when the thread does not already carry it. A
+   * resolved ticket usually has the team's answer as their last message, and
+   * printing the note here too says the same words twice on one screen.
+   */
+  protected get showNote(): boolean {
+    return (
+      !this.awaiting &&
+      !this.ticket.messages.some((m) => m.authorRole === "AGENT") &&
+      this.maps.isClosed(this.ticket.status) &&
+      Boolean(this.ticket.resolutionNote?.trim())
+    );
+  }
+
+  protected get canReopen(): boolean {
+    return this.maps.isClosed(this.ticket.status) && this.config.featureFlags.selfServiceReopen === true;
+  }
+
+  protected get reopenPlaceholder(): string {
+    return this.lang === "en"
+      ? "Tell us what is still happening (optional)…"
+      : "บอกเราหน่อยว่ายังพบปัญหาอะไร (ไม่ระบุก็ได้)…";
+  }
+
+  protected 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,
+    };
+  }
+
+  /*
+   * Images only. The original's reporter view lists no attachments at all, and
+   * what a widget report actually carries makes the reason plain: the other
+   * file is `debug-bundle.json`, the capture payload the TEAM reads.
+   */
+  protected get screenshots() {
+    return this.ticket.attachments.filter((a) => (a.contentType ?? "").startsWith("image/"));
+  }
+
+  /** The lifecycle, chronologically — reopens included. */
+  protected get timeline(): TimelineNode[] {
+    const events = this.history.length
+      ? this.history.map((h) => ({ status: h.toStatus, at: h.createdAt }))
+      : // A row from before history was recorded still gets one node.
+        [{ status: "OPEN", at: this.ticket.createdAt }];
+
+    const nodes: TimelineNode[] = 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;
+  }
+
+  protected when(iso: string | null): string {
+    return formatDateTime(iso, this.config.timezone, this.locale);
+  }
+
+  protected send(): void {
+    const body = this.editor?.value() ?? "";
+    if (!body || this.sending) return;
+    this.sent.emit(body);
+    // Cleared deliberately. It used to happen by accident, because the whole
+    // detail was rebuilt after a reply and a fresh editor came back empty.
+    this.editor?.clear();
+  }
+
+  private loadShots(): void {
+    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 }),
+        // Drop the frame rather than leave a broken-image icon where a
+        // screenshot should be.
+        () => undefined,
+      );
+    }
+  }
+}

package/src/components/ticket-table.component.ts

@@ -0,0 +1,183 @@
+/**
+ * The reporter's list — the original's seven columns.
+ *
+ * Every decision here is imported: which rows survive the filter, how a column
+ * sorts, what "the team replied" means, how a date reads. That is the point of
+ * the split. This file arranges them; it decides nothing.
+ */
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { NgFor, NgIf } from "@angular/common";
+import {
+  compareBy, formatDateTime, hasSolution, hasTeamReply, matchesKeyword, pageCount, pageOf,
+  statusTone, ticketKey,
+  type MyTicketListItem, type Sort, type SortKey, type StatusMaps, type TicketStrings,
+} from "@lightworkai.official/debug-capture";
+import { IconComponent } from "./icon.component";
+import { ICONS } from "./icons";
+
+@Component({
+  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>
+  `,
+})
+export class TicketTableComponent {
+  @Input({ required: true }) items: MyTicketListItem[] = [];
+  @Input({ required: true }) maps!: StatusMaps;
+  @Input({ required: true }) t!: TicketStrings;
+  @Input() slug?: string;
+  @Input() timezone = "Asia/Bangkok";
+  @Input() locale?: "th" | "en";
+  @Input() keyword = "";
+  @Input() statusFilter = "";
+  @Input({ required: true }) sort!: Sort;
+  @Input() page = 1;
+
+  @Output() opened = new EventEmitter<string>();
+  @Output() sorted = new EventEmitter<SortKey>();
+  @Output() paged = new EventEmitter<number>();
+  @Output() counted = new EventEmitter<number>();
+
+  protected readonly icons = ICONS;
+  protected readonly columns: { key: SortKey; label: keyof TicketStrings; width?: string }[] = [
+    { 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" },
+  ];
+
+  protected get visible(): MyTicketListItem[] {
+    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;
+  }
+
+  protected get pages(): number {
+    return pageCount(this.visible.length);
+  }
+
+  /** A filter can strand the reader past the end of the shorter list. */
+  protected get current(): number {
+    return Math.min(this.page, this.pages);
+  }
+
+  protected get rows(): MyTicketListItem[] {
+    return pageOf(this.visible, this.current);
+  }
+
+  protected label(key: SortKey): string {
+    const column = this.columns.find((c) => c.key === key)!;
+    return this.t[column.label] as string;
+  }
+
+  protected arrow(key: SortKey): string {
+    if (this.sort.key !== key) return "⇅";
+    return this.sort.direction === "asc" ? "▲" : "▼";
+  }
+
+  protected ariaSort(key: SortKey): string | null {
+    if (this.sort.key !== key) return null;
+    return this.sort.direction === "asc" ? "ascending" : "descending";
+  }
+
+  protected key(row: MyTicketListItem): string {
+    return ticketKey(this.slug, row.number);
+  }
+
+  protected tone(status: string): { fg: string; bg: string } {
+    return statusTone(this.maps.columnOf(status)?.color);
+  }
+
+  protected solved(row: MyTicketListItem): boolean {
+    return hasSolution(row);
+  }
+
+  protected replied(row: MyTicketListItem): boolean {
+    return hasTeamReply(row);
+  }
+
+  protected when(iso: string | null): string {
+    return formatDateTime(iso, this.timezone, this.locale);
+  }
+}