@lightworkai.official/debug-capture-vue 0.6.0

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@lightworkai.official/debug-capture-vue",
+  "version": "0.6.0",
+  "description": "Vue 3 bindings for @lightworkai.official/debug-capture",
+  "type": "module",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/test"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly --outDir dist",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3",
+    "@lightworkai.official/debug-capture": "^0.6.0",
+    "@tiptap/vue-3": "^3",
+    "@tiptap/starter-kit": "^3",
+    "@tiptap/extension-image": "^3",
+    "@tiptap/extension-placeholder": "^3"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.0",
+    "@tiptap/extension-image": "^3.31.0",
+    "@tiptap/extension-placeholder": "^3.31.0",
+    "@tiptap/starter-kit": "^3.31.0",
+    "@tiptap/vue-3": "^3.31.0",
+    "@vitejs/plugin-vue": "^5.1.0",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.14.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.1.0"
+  },
+  "main": "./dist/index.mjs",
+  "keywords": [
+    "vue",
+    "vue3",
+    "bug-report",
+    "debug",
+    "screenshot",
+    "support",
+    "helpdesk"
+  ],
+  "license": "MIT",
+  "author": "Lightwork AI",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/BugIcon.ts

@@ -0,0 +1,23 @@
+import { h, type FunctionalComponent } from "vue";
+
+/** The reporter's own glyph, drawn rather than depending on an icon set. */
+export const BugIcon: FunctionalComponent = () =>
+  h(
+    "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",
+    },
+    [
+      h("path", { d: "M8 2l1.9 1.9M16 2l-1.9 1.9" }),
+      h("rect", { x: 8, y: 6, width: 8, height: 14, rx: 4 }),
+      h("path", { d: "M3 13h5M16 13h5M4 8l3 2M20 8l-3 2M4 18l3-2M20 18l-3-2" }),
+    ],
+  );

package/src/components/DebugCaptureInit.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * Arms the capture buffers and mounts the reporter. Renders nothing.
+ *
+ * Mount it once, in App.vue above the router-view — the buffers must be
+ * recording BEFORE a user hits a problem, or the report arrives with no trail
+ * of how they got there.
+ */
+import { onMounted } from "vue";
+import {
+  configureDebugCapture,
+  installDebugCapture,
+  isConfigured,
+  setErroredQueriesSource,
+  type DebugCaptureConfig,
+  type ErroredQuery,
+} from "@lightworkai.official/debug-capture";
+
+const props = withDefaults(
+  defineProps<{
+    /** Mount the built-in reporter UI. Off if the host renders its own. */
+    ui?: boolean;
+    /** Failed queries from the app's data layer, if it has one. */
+    errorQueries?: () => ErroredQuery[];
+    /** The config, if you did not call configureDebugCapture at module scope. */
+    config?: DebugCaptureConfig;
+  }>(),
+  { ui: true },
+);
+
+// In setup, not onMounted: a mounted hook runs after the first paint, and
+// anything the app fetched or logged before then would be missed.
+if (props.config && !isConfigured()) configureDebugCapture(props.config);
+
+onMounted(() => {
+  if (props.errorQueries) setErroredQueriesSource(props.errorQueries);
+  installDebugCapture({ ui: props.ui });
+});
+</script>
+
+<template><span style="display: none" /></template>

package/src/components/ImageAnnotatorDialog.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+/**
+ * Draw on an image before it is sent.
+ *
+ * The original opens this the moment you pick a picture, and the reason is in
+ * its own comment: annotating BEFORE upload keeps the canvas same-origin, so
+ * `toDataURL` is not tainted by a cross-origin presigned URL. Pointing at the
+ * problem is also most of what a screenshot is for.
+ *
+ * The drawing itself is `createAnnotator` from the core — one canvas engine,
+ * shared by all three framework packages, because there is no declarative way
+ * to draw on a canvas. What is here is only the chrome: a dialog, a toolbar and
+ * two buttons.
+ */
+import { onBeforeUnmount, ref, shallowRef, watch } from "vue";
+import {
+  createAnnotator,
+  getConfig,
+  reporterStrings,
+  type Annotator,
+  type AnnotatorTool,
+  type ReporterStrings,
+} from "@lightworkai.official/debug-capture";
+import { ArrowUpRightIcon, HighlighterIcon, SquareIcon, TrashIcon, TypeIcon } from "./icons";
+
+const props = defineProps<{
+  /**
+   * The picked image, as a same-origin data URI. Null closes the dialog, so a
+   * caller can keep it mounted and drive it from one nullable ref.
+   */
+  src: string | null;
+  /** Shown in the description, as the app's dialog does. */
+  filename?: string;
+  /** Falls back to the configured locale — a caller inside the app need not pass it. */
+  locale?: "th" | "en";
+}>();
+
+const emit = defineEmits<{
+  /** The annotated image, at full resolution. */
+  (e: "confirm", dataUri: string): void;
+  (e: "cancel"): void;
+}>();
+
+const t = reporterStrings(props.locale ?? safeLocale());
+
+/** `getConfig()` throws when nothing is configured; the dialog still has words. */
+function safeLocale(): "th" | "en" | undefined {
+  try {
+    return getConfig().locale;
+  } catch {
+    return undefined;
+  }
+}
+const TOOLS: { tool: AnnotatorTool; key: keyof ReporterStrings; icon: unknown }[] = [
+  { tool: "rect", key: "toolRect", icon: SquareIcon },
+  { tool: "arrow", key: "toolArrow", icon: ArrowUpRightIcon },
+  { tool: "highlight", key: "toolHighlight", icon: HighlighterIcon },
+  { tool: "text", key: "toolText", icon: TypeIcon },
+];
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+// shallowRef: the annotator holds a canvas and its own mutable state, and Vue
+// has no business making any of that reactive.
+const annotator = shallowRef<Annotator | null>(null);
+const active = ref<AnnotatorTool | null>(null);
+const loading = ref(true);
+
+watch(
+  () => [props.src, canvas.value] as const,
+  ([src, node]) => {
+    if (!src || !node) return;
+    annotator.value?.destroy();
+    const image = new Image();
+    image.addEventListener("load", () => {
+      // A backing store at the image's own size, BEFORE the annotator draws
+      // into it. Without this the canvas keeps its default 300x150, the image
+      // is squashed into that, and CSS then stretches the result — blurry, and
+      // the wrong shape.
+      node.width = image.naturalWidth;
+      node.height = image.naturalHeight;
+      annotator.value = createAnnotator(node, image, () => {
+        // The toolbar mirrors the engine, so it has to hear about a tool being
+        // CONSUMED as well as a shape being added.
+        active.value = null;
+      });
+      loading.value = false;
+    });
+    image.src = src;
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => annotator.value?.destroy());
+
+function pick(tool: AnnotatorTool): void {
+  active.value = active.value === tool ? null : tool;
+  annotator.value?.setTool(active.value);
+}
+
+function clearAll(): void {
+  annotator.value?.clear();
+  active.value = null;
+}
+
+function confirm(): void {
+  // Full resolution, never the on-screen scale.
+  emit("confirm", annotator.value?.toDataUrl() ?? props.src ?? "");
+}
+</script>
+
+<template>
+  <div v-if="src" class="lw-annotator" role="dialog" aria-modal="true" @click.self="emit('cancel')">
+    <div class="lw-annotator__panel">
+      <!-- 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__head">
+        <div class="lw-grow">
+          <h2 class="lw-annotator__title">{{ t.annotateTitle }}</h2>
+          <p class="lw-annotator__desc">
+            {{ t.annotateHint }}<template v-if="filename"> · {{ filename }}</template>
+          </p>
+        </div>
+        <button type="button" class="lw-annotator__close" :aria-label="t.cancel" @click="emit('cancel')">✕</button>
+      </div>
+
+      <div class="lw-annotator__tools">
+        <button
+          v-for="tool in TOOLS"
+          :key="tool.tool"
+          type="button"
+          class="lw-atool"
+          :aria-pressed="active === tool.tool"
+          :disabled="loading"
+          @click="pick(tool.tool)"
+        >
+          <component :is="tool.icon" /> {{ t[tool.key] }}
+        </button>
+        <span class="lw-grow" />
+        <!-- Right-aligned and on its own, like the app's. Deleting ONE shape is
+             the ✕ on the shape, which is what the help line below explains. -->
+        <button type="button" class="lw-atool lw-atool--plain" :disabled="loading" @click="clearAll">
+          <TrashIcon /> {{ t.clearAll }}
+        </button>
+      </div>
+
+      <div class="lw-annotator__canvas">
+        <div class="lw-annotator__canvasbox"><canvas ref="canvas" /></div>
+      </div>
+
+      <p class="lw-annotator__hint">{{ t.annotateHelp }}</p>
+
+      <div class="lw-annotator__actions">
+        <span class="lw-grow" />
+        <button type="button" class="lw-btn" @click="emit('cancel')">{{ t.cancel }}</button>
+        <button type="button" class="lw-send" :disabled="loading" @click="confirm">{{ t.annotateApply }}</button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/MyTicketsPanel.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+/**
+ * "ปัญหาที่แจ้ง" — the reports this person filed, and what became of them.
+ *
+ * Drop it on a route of your own — the reporter-facing counterpart to the
+ * agent's ticket list. It needs `identity` in the config, because the widget's
+ * realm key is public and can authorise filing a report but never reading one
+ * back — see the core README.
+ *
+ * This component owns fetching and view state and nothing else: the columns,
+ * the sorting, the sanitising and the dates all live in the core, shared with
+ * the React and Angular packages.
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import {
+  NoIdentityError,
+  fetchRealmConfig,
+  getAttachmentUrl,
+  getConfig,
+  getMyTicket,
+  getMyTicketHistory,
+  listMyTickets,
+  reopenMyTicket,
+  replyToTicket,
+  statusMaps,
+  ticketStrings,
+  uploadInlineImage,
+  type MyTicketDetail,
+  type MyTicketListItem,
+  type RealmConfig,
+  type SortKey,
+  type StatusEvent,
+} from "@lightworkai.official/debug-capture";
+import TicketTable from "./TicketTable.vue";
+import TicketDetail from "./TicketDetail.vue";
+import { AlertIcon, SearchIcon } from "./icons";
+
+const props = defineProps<{
+  /** Change it to re-read the list — after filing a report, say. */
+  refreshKey?: string | number;
+  /** Hide the panel's own heading when the host page already has one. */
+  hideTitle?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "replied", ticket: MyTicketDetail): void;
+  (e: "reopened", ticket: MyTicketDetail): void;
+  (e: "error", message: string): void;
+}>();
+
+const locale = computed(() => {
+  try {
+    return getConfig().locale;
+  } catch {
+    return undefined;
+  }
+});
+const host = computed(() => {
+  try {
+    return getConfig().host;
+  } catch {
+    return "";
+  }
+});
+const t = computed(() => ticketStrings(locale.value));
+
+const items = ref<MyTicketListItem[]>([]);
+const config = ref<RealmConfig | null>(null);
+const loading = ref(true);
+const error = ref<string | null>(null);
+const noIdentity = ref(false);
+
+const keyword = ref("");
+const applied = ref("");
+const statusFilter = ref("");
+const sort = ref<{ key: SortKey; direction: "asc" | "desc" }>({ key: "createdAt", direction: "desc" });
+const page = ref(1);
+
+const detail = ref<MyTicketDetail | null>(null);
+const history = ref<StatusEvent[]>([]);
+const detailError = ref<string | null>(null);
+const detailLoading = ref(false);
+const sending = ref(false);
+const reopening = ref(false);
+
+const maps = computed(() => statusMaps(config.value?.statusColumns ?? [], t.value.allStatuses));
+const table = ref<InstanceType<typeof TicketTable> | null>(null);
+const shownCount = computed(() => table.value?.count ?? 0);
+
+// Debounced like the original: re-filtering per keystroke resets the page under
+// the reader's hands.
+let debounce: ReturnType<typeof setTimeout> | null = null;
+watch(keyword, (next) => {
+  if (debounce) clearTimeout(debounce);
+  debounce = setTimeout(() => {
+    applied.value = next;
+    page.value = 1;
+  }, 300);
+});
+watch(statusFilter, () => (page.value = 1));
+watch(() => props.refreshKey, () => void load());
+
+onMounted(load);
+
+async function load(): Promise<void> {
+  loading.value = true;
+  error.value = null;
+  noIdentity.value = false;
+  try {
+    // Config and list together: the labels are useless without the rows and the
+    // rows unreadable without the labels.
+    const [realm, list] = await Promise.all([fetchRealmConfig(), listMyTickets()]);
+    config.value = realm;
+    items.value = list;
+  } catch (e) {
+    if (e instanceof NoIdentityError) noIdentity.value = true;
+    else error.value = e instanceof Error ? e.message : t.value.listFailed;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** Open a DIFFERENT ticket: tear the view down, because nothing on screen is its. */
+async function open(id: string): Promise<void> {
+  detail.value = null;
+  history.value = [];
+  detailError.value = null;
+  detailLoading.value = true;
+  try {
+    await reload(id);
+  } finally {
+    detailLoading.value = false;
+  }
+}
+
+/**
+ * Re-read the ticket we are already looking at, in place.
+ *
+ * Deliberately NOT `open()`. That nulls the detail and raises the loading flag,
+ * which unmounts the whole view and remounts it — so sending a reply threw the
+ * reader back to the top of the page, away from the conversation they were in
+ * the middle of. It reads as the page reloading, because visually that is what
+ * happens.
+ *
+ * Updating the refs instead lets Vue patch what changed: the new message
+ * appears, the timeline updates, and everything else stays exactly where it was.
+ */
+async function reload(id: string): Promise<void> {
+  try {
+    const [found, events] = await Promise.all([
+      getMyTicket(id),
+      // The timeline is a nicety, not the page: a ticket whose history fails to
+      // load should still show its conversation.
+      getMyTicketHistory(id).catch(() => [] as StatusEvent[]),
+    ]);
+    detail.value = found;
+    history.value = events;
+  } catch (e) {
+    detailError.value = e instanceof Error ? e.message : t.value.detailFailed;
+  }
+}
+
+function back(): void {
+  detail.value = null;
+  // Counts and badges move when a reply lands, so the list is re-read rather
+  // than restored from what it said before the detail opened.
+  void load();
+}
+
+function toggleSort(key: SortKey): void {
+  sort.value =
+    sort.value.key === key
+      ? { key, direction: sort.value.direction === "asc" ? "desc" : "asc" }
+      : // Dates open newest-first, text A→Z: the useful first click differs by
+        // what the column holds.
+        { key, direction: key === "createdAt" || key === "updatedAt" ? "desc" : "asc" };
+}
+
+async function send(body: string): Promise<void> {
+  const ticket = detail.value;
+  if (!ticket || sending.value) return;
+  sending.value = true;
+  try {
+    await replyToTicket(ticket.id, body);
+    await reload(ticket.id);
+    if (detail.value) emit("replied", detail.value);
+  } catch (e) {
+    emit("error", e instanceof Error ? e.message : t.value.sendFailed);
+  } finally {
+    sending.value = false;
+  }
+}
+
+async function reopen(note: string): Promise<void> {
+  const ticket = detail.value;
+  if (!ticket || reopening.value) return;
+  reopening.value = true;
+  try {
+    await reopenMyTicket(ticket.id, note);
+    await reload(ticket.id);
+    if (detail.value) emit("reopened", detail.value);
+  } catch (e) {
+    emit("error", e instanceof Error ? e.message : t.value.reopenFailed);
+  } finally {
+    reopening.value = false;
+  }
+}
+
+function uploadImage(file: File): Promise<string> {
+  const ticket = detail.value;
+  if (!ticket) return Promise.reject(new Error("no ticket"));
+  return readDataUri(file).then((dataUri) =>
+    uploadInlineImage(ticket.id, dataUri, file.name).then((stored) => stored.url),
+  );
+}
+
+function attachmentUrl(id: string): Promise<string> {
+  return getAttachmentUrl(id).then((found) => found.url);
+}
+
+function readDataUri(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () =>
+      typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("unreadable file")),
+    );
+    reader.addEventListener("error", () => reject(new Error("unreadable file")));
+    reader.readAsDataURL(file);
+  });
+}
+</script>
+
+<template>
+  <div class="lw-panel">
+    <template v-if="!detail && !detailLoading">
+      <h2 v-if="!hideTitle" class="lw-panel__title">{{ t.title }}</h2>
+      <p class="lw-panel__intro">{{ t.intro }}</p>
+
+      <div class="lw-controls">
+        <div class="lw-search">
+          <SearchIcon class="lw-search__icon" />
+          <input
+            v-model="keyword"
+            type="search"
+            class="lw-input lw-search__field"
+            :placeholder="t.searchPlaceholder"
+            :aria-label="t.searchLabel"
+          />
+        </div>
+        <select v-model="statusFilter" class="lw-input">
+          <option v-for="option in maps.options" :key="option.value" :value="option.value">
+            {{ option.label }}
+          </option>
+        </select>
+        <span class="lw-count">{{ t.count(shownCount) }}</span>
+      </div>
+
+      <p v-if="noIdentity" class="lw-state">{{ t.signedOut }}</p>
+      <div v-else-if="loading" class="lw-skeletons">
+        <div v-for="n in 4" :key="n" class="lw-skeleton" />
+      </div>
+      <p v-else-if="error" class="lw-state lw-state--error">
+        <AlertIcon /> {{ error }}
+        <button type="button" class="lw-retry" @click="load">{{ t.retry }}</button>
+      </p>
+      <TicketTable
+        v-else
+        ref="table"
+        :items="items"
+        :maps="maps"
+        :t="t"
+        :slug="config?.realm.slug"
+        :timezone="config?.timezone ?? 'Asia/Bangkok'"
+        :locale="locale"
+        :keyword="applied"
+        :status-filter="statusFilter"
+        :sort="sort"
+        :page="page"
+        @open="open"
+        @sort="toggleSort"
+        @page="page = $event"
+      />
+    </template>
+
+    <div v-else-if="detailLoading" class="lw-skeletons">
+      <div class="lw-skeleton" />
+      <div class="lw-skeleton" />
+    </div>
+
+    <p v-else-if="detailError" class="lw-state lw-state--error">{{ detailError }}</p>
+
+    <TicketDetail
+      v-else-if="detail && config"
+      :ticket="detail"
+      :history="history"
+      :config="config"
+      :maps="maps"
+      :t="t"
+      :host="host"
+      :locale="locale"
+      :sending="sending"
+      :reopening="reopening"
+      :upload-image="uploadImage"
+      :attachment-url="attachmentUrl"
+      @back="back"
+      @edited="detail && reload(detail.id)"
+      @send="send"
+      @reopen="reopen"
+      @error="emit('error', $event)"
+    />
+  </div>
+</template>

package/src/components/README.md

@@ -0,0 +1,12 @@
+# Vue components
+
+Real single-file components. The logic they arrange — the ingest client, the
+sanitiser, the status maps, the comparators, the dates — lives in
+`@lightworkai.official/debug-capture` and is shared with the React and Angular packages.
+
+Styles live there too, in one stylesheet, rather than as `<style scoped>` blocks
+here. Scoped styles read better in an SFC, but the same rules would then exist
+three times across three framework packages, and "change a colour in three files
+and hope you found them all" is the maintenance bill this structure exists to
+avoid. Class names are `lw-` prefixed and every colour is a custom property, so a
+host restyles by setting variables rather than by fighting specificity.

package/src/components/ReopenPanel.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * "Still a problem?" — a SEPARATE action from the chat, with its own endpoint
+ * and its own confirmation, only when the ticket is done and the realm allows it.
+ */
+import { ref } from "vue";
+import type { TicketStrings } from "@lightworkai.official/debug-capture";
+import { RotateIcon } from "./icons";
+
+defineProps<{ t: TicketStrings; locale: "th" | "en"; busy?: boolean }>();
+const emit = defineEmits<{ (e: "reopen", note: string): void }>();
+
+const open = ref(false);
+const note = ref("");
+
+function confirm(): void {
+  emit("reopen", note.value.trim());
+}
+</script>
+
+<template>
+  <section class="lw-reopen">
+    <div v-if="!open" class="lw-reopen__row">
+      <span class="lw-reopen__hint">{{ locale === "en" ? "Problem not fixed?" : "ปัญหายังไม่หาย?" }}</span>
+      <button type="button" class="lw-reopen__open" @click="open = true">
+        <RotateIcon /> {{ t.reopen }}
+      </button>
+    </div>
+    <div v-else>
+      <p class="lw-reopen__title">{{ t.reopen }}</p>
+      <textarea
+        v-model="note"
+        rows="2"
+        class="lw-reopen__note"
+        :placeholder="locale === 'en' ? 'Tell us what is still happening (optional)…' : 'บอกเราหน่อยว่ายังพบปัญหาอะไร (ไม่ระบุก็ได้)…'"
+      />
+      <div class="lw-reopen__actions">
+        <button type="button" class="lw-reopen__cancel" @click="open = false; note = ''">
+          {{ locale === "en" ? "Cancel" : "ยกเลิก" }}
+        </button>
+        <button type="button" class="lw-reopen__confirm" :disabled="busy" @click="confirm">
+          <RotateIcon /> {{ busy ? t.reopening : t.reopen }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>

package/src/components/ReportProblemButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/**
+ * The button that opens the reporter.
+ *
+ * `launch` runs straight out of the click with nothing awaited in front of it:
+ * screen capture is gated on a user gesture, and one `await` between the click
+ * and `getDisplayMedia` loses it — the browser then refuses with an error that
+ * explains nothing.
+ *
+ * Unstyled by default. It lands in the host's own header, and a widget with
+ * opinions about its border radius is a widget somebody has to fight.
+ */
+import { launch } from "@lightworkai.official/debug-capture";
+import { BugIcon } from "./BugIcon";
+
+withDefaults(defineProps<{ label?: string }>(), { label: "รายงานปัญหา" });
+
+function report(event: MouseEvent): void {
+  if (event.defaultPrevented) return;
+  launch({ type: "manual" });
+}
+</script>
+
+<template>
+  <button type="button" :aria-label="label" :title="label" @click="report">
+    <slot><BugIcon /></slot>
+  </button>
+</template>