@lightworkai.official/debug-capture 0.6.0

package/src/styles.css

@@ -0,0 +1,400 @@
+/*
+ * The panel's stylesheet — one copy, in the core, shared by every framework
+ * package.
+ *
+ * It could have lived as scoped styles inside each framework's components, and
+ * that reads nicer in a Vue SFC. But it would then exist three times, and
+ * "change a colour in three files and hope you found them all" is the kind of
+ * maintenance bill this package is being restructured to stop paying. The
+ * components are framework-native; what they LOOK like is shared.
+ *
+ * Every class is `lw-` prefixed and every colour comes from a custom property,
+ * so a host restyles the panel by setting variables rather than by fighting
+ * specificity:
+ *
+ *   .my-app { --lw-primary: #7c3aed; --lw-accent: #6d28d9; }
+ */
+
+.lw-panel {
+  --lw-text: #1f2937;
+  --lw-heading: #0f172a;
+  --lw-muted: #6b7280;
+  --lw-muted-strong: #4b5563;
+  --lw-faint: #9ca3af;
+  --lw-border: #e5e7eb;
+  --lw-border-soft: #f3f4f6;
+  --lw-surface: #fff;
+  --lw-surface-muted: #f9fafb;
+  --lw-accent: #1c5cab;
+  --lw-accent-soft: #eef4fb;
+  --lw-link: #1c5cab;
+  --lw-primary: #00264b;
+  --lw-primary-hover: #013a70;
+
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--lw-text);
+}
+
+.lw-panel *,
+.lw-panel *::before,
+.lw-panel *::after { box-sizing: border-box; }
+
+.lw-panel__title { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--lw-heading); }
+.lw-panel__intro { margin: 0 0 16px; color: var(--lw-muted); }
+
+/* ---- controls ---- */
+.lw-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
+.lw-search { position: relative; display: inline-flex; align-items: center; }
+.lw-search__icon {
+  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
+  pointer-events: none; color: var(--lw-faint);
+}
+.lw-input {
+  font: inherit; color: inherit; background: var(--lw-surface);
+  border: 1px solid var(--lw-border); border-radius: 6px; padding: 6px 8px;
+}
+.lw-input:focus { outline: none; border-color: #7796b8; box-shadow: 0 0 0 3px rgba(0, 38, 75, 0.1); }
+.lw-search__field { width: 240px; padding-left: 30px; }
+.lw-count { margin-left: auto; color: var(--lw-muted); }
+
+/* ---- states ---- */
+.lw-state {
+  display: flex; align-items: center; gap: 8px; margin: 0; padding: 24px;
+  border: 1px solid var(--lw-border); border-radius: 10px; color: var(--lw-muted);
+}
+.lw-state--error { color: #dc2626; }
+.lw-retry { border: 0; background: none; padding: 0; font: inherit; color: var(--lw-link); cursor: pointer; }
+.lw-skeleton { height: 40px; border-radius: 6px; background: var(--lw-border-soft); animation: lw-pulse 1.6s ease-in-out infinite; }
+.lw-skeleton + .lw-skeleton { margin-top: 8px; }
+@keyframes lw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+
+/* ---- table ---- */
+.lw-tablewrap { overflow-x: auto; border: 1px solid var(--lw-border); border-radius: 10px; background: var(--lw-surface); }
+.lw-table { width: 100%; border-collapse: collapse; }
+.lw-th {
+  padding: 10px 12px; text-align: left; white-space: nowrap;
+  background: var(--lw-surface-muted); border-bottom: 1px solid var(--lw-border);
+  font-size: 12px; font-weight: 600; color: var(--lw-muted);
+  cursor: pointer; user-select: none;
+}
+.lw-th:hover { color: var(--lw-heading); }
+.lw-arrow { color: var(--lw-faint); font-size: 10px; }
+.lw-th[aria-sort] .lw-arrow { color: var(--lw-heading); }
+.lw-table td { padding: 10px 12px; white-space: nowrap; }
+.lw-row { border-top: 1px solid var(--lw-border-soft); cursor: pointer; }
+.lw-row:hover { background: var(--lw-surface-muted); }
+.lw-title { max-width: 420px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--lw-text); }
+.lw-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 500; color: var(--lw-accent); }
+.lw-dim { font-size: 12px; color: var(--lw-muted); }
+.lw-dash { color: var(--lw-border); }
+.lw-empty { padding: 40px 24px; text-align: center; color: var(--lw-faint); white-space: normal; }
+
+/* ---- pills ---- */
+.lw-chip { display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 12px; background: var(--lw-accent-soft); color: var(--lw-accent); }
+.lw-pill {
+  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
+  border: 1px solid transparent; border-radius: 999px; padding: 2px 8px; font-size: 12px;
+}
+.lw-pill--awaiting { border-color: #fcd34d; background: #fffbeb; color: #b45309; font-weight: 500; }
+.lw-pill--solution { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
+.lw-pill--replied { border-color: #cddcee; background: var(--lw-accent-soft); color: var(--lw-accent); }
+.lw-status { display: inline-block; white-space: nowrap; border-radius: 999px; padding: 2px 8px; font-size: 12px; }
+.lw-muted { font-size: 12px; color: var(--lw-border); }
+
+/* ---- pager ---- */
+.lw-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--lw-muted); }
+/* inline-flex, like every other button here that carries an icon: as plain
+   inline content the ✕ and its label are two words that wrap, and ยกเลิก ended
+   up on a line of its own under the icon. */
+.lw-btn {
+  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
+  padding: 6px 12px; border: 1px solid var(--lw-border); border-radius: 6px;
+  background: var(--lw-surface); font: inherit; cursor: pointer;
+}
+.lw-btn:hover:not(:disabled) { background: var(--lw-border-soft); }
+.lw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ---- detail ---- */
+.lw-detail { display: flex; flex-direction: column; gap: 16px; }
+.lw-back {
+  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
+  border: 0; background: none; padding: 0; font: inherit; color: var(--lw-link); cursor: pointer;
+}
+.lw-back:hover { text-decoration: underline; }
+.lw-card { padding: 16px; border: 1px solid var(--lw-border); border-radius: 10px; background: var(--lw-surface); }
+.lw-card__heading { margin: 0; font-size: 17px; font-weight: 600; color: var(--lw-heading); }
+.lw-card__title { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--lw-heading); }
+.lw-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--lw-muted); }
+.lw-key {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  border: 1px solid var(--lw-border); border-radius: 999px; padding: 2px 8px; background: var(--lw-surface-muted);
+}
+.lw-intro { margin-top: 12px; }
+.lw-route { margin: 10px 0 0; font-size: 12px; color: var(--lw-muted); word-break: break-all; }
+.lw-route a { color: var(--lw-link); }
+.lw-shot { display: block; max-height: 520px; max-width: 100%; width: auto; border: 1px solid var(--lw-border); border-radius: 8px; }
+.lw-shot + .lw-shot { margin-top: 8px; }
+
+/* ---- body (sanitised HTML from the thread) ---- */
+.lw-body { color: var(--lw-text); word-break: break-word; }
+.lw-body p { margin: 0 0 8px; }
+.lw-body p:last-child { margin-bottom: 0; }
+.lw-body ul, .lw-body ol { margin: 4px 0; padding-left: 22px; }
+.lw-body a { color: var(--lw-link); text-decoration: underline; }
+/* Small, and clickable. A screenshot at full width pushes every other message
+   off the screen and turns the conversation into a gallery; capping it is only
+   reasonable because the full size is one click away, and `zoom-in` says so
+   before you try. Matches the app's own thread. */
+.lw-body img {
+  margin: 4px 0; max-height: 160px; max-width: 100%; width: auto; height: auto;
+  object-fit: contain; border: 1px solid var(--lw-border); border-radius: 8px;
+  cursor: zoom-in;
+}
+
+/* ---- full-size view of an image from a message ---- */
+.lw-zoom {
+  position: fixed; inset: 0; z-index: 2147482950;
+  display: flex; align-items: center; justify-content: center;
+  padding: 24px; background: rgba(15, 23, 42, 0.72); cursor: zoom-out;
+}
+.lw-zoom img { max-height: 85dvh; max-width: 100%; width: auto; border-radius: 8px; }
+.lw-zoom__close {
+  position: absolute; top: 16px; right: 20px;
+  border: 0; background: none; padding: 4px; line-height: 1;
+  color: #fff; font-size: 24px; cursor: pointer;
+}
+
+/* ---- hero ---- */
+.lw-hero { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid; border-radius: 10px; }
+.lw-hero__icon { width: 22px; height: 22px; flex-shrink: 0; }
+.lw-hero__body { flex: 1; min-width: 0; }
+.lw-hero__kicker { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lw-faint); }
+.lw-hero__headline { margin: 0; font-size: 16px; font-weight: 600; }
+.lw-hero__nudge { margin: 4px 0 0; font-size: 12px; font-weight: 500; color: #b45309; }
+.lw-hero__note {
+  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 12px;
+  border: 1px solid #fff; border-radius: 8px; background: rgba(255, 255, 255, 0.7);
+}
+.lw-hero__wrench { width: 16px; height: 16px; flex-shrink: 0; color: #059669; }
+
+/* ---- timeline ---- */
+.lw-timeline { margin: 0; padding: 0; list-style: none; }
+.lw-node { display: flex; gap: 12px; }
+.lw-rail { position: relative; display: flex; width: 14px; flex-shrink: 0; justify-content: center; }
+.lw-line { position: absolute; top: 8px; bottom: -8px; left: 50%; width: 2px; transform: translateX(-50%); background: #a7bdd6; border-radius: 999px; }
+/* Dashed, so what has happened and what is still to come read differently. */
+.lw-line--pending { background: repeating-linear-gradient(to bottom, #d1d5db 0 4px, transparent 4px 8px); border-radius: 0; }
+.lw-dot {
+  position: relative; z-index: 1; margin-top: 2px; display: flex; height: 14px; width: 14px;
+  flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; border: 2px solid;
+}
+.lw-dot--done { border-color: #4a7cb5; background: #4a7cb5; }
+.lw-dot--current { border-color: var(--lw-accent); background: var(--lw-surface); }
+.lw-dot--pending { border-color: #d1d5db; background: var(--lw-surface); }
+.lw-dot--reopened { border-color: #f59e0b; background: #f59e0b; }
+.lw-pip { height: 6px; width: 6px; border-radius: 999px; background: var(--lw-accent); }
+.lw-node__text { min-width: 0; padding-bottom: 24px; }
+.lw-node__text--last { padding-bottom: 2px; }
+.lw-node__label { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--lw-text); }
+.lw-node__label--pending { color: var(--lw-faint); }
+.lw-node__label--reopened { color: #b45309; }
+.lw-node__icon { width: 12px; height: 12px; }
+.lw-node__time { font-size: 12px; line-height: 20px; color: var(--lw-faint); }
+
+/* ---- reopen ---- */
+.lw-reopen { padding: 16px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; }
+.lw-reopen__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+.lw-reopen__hint { color: #92400e; font-size: 13px; }
+.lw-reopen__title { margin: 0 0 8px; font-weight: 500; color: #92400e; }
+.lw-reopen__note { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid #fde68a; border-radius: 10px; resize: vertical; }
+.lw-reopen__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
+.lw-reopen__open, .lw-reopen__confirm, .lw-reopen__cancel {
+  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px; font: inherit; border-radius: 6px; cursor: pointer;
+}
+.lw-reopen__open { border: 1px solid #fcd34d; background: var(--lw-surface); color: #b45309; font-weight: 500; }
+.lw-reopen__confirm { border: 1px solid #d97706; background: #d97706; color: #fff; font-weight: 500; }
+.lw-reopen__confirm:disabled { opacity: 0.5; cursor: not-allowed; }
+.lw-reopen__cancel { border: 0; background: none; color: var(--lw-muted); }
+
+/* ---- conversation ---- */
+/* Capped, so a long conversation does not push the composer off the screen.
+   A window, not a page: ~320px shows the last few exchanges and leaves the
+   reply box and everything under it reachable without scrolling the document.
+   `dvh` rather than `vh` — on a phone the address bar makes them differ, and
+   the difference is exactly the part that would hide the reply box. */
+.lw-thread {
+  display: flex; flex-direction: column; gap: 12px;
+  max-height: min(45dvh, 320px); overflow-y: auto;
+  /* Room for the scrollbar so it never sits on top of a message bubble. */
+  padding-right: 4px;
+}
+.lw-thread__empty { margin: 0; font-size: 12px; color: var(--lw-border); }
+/* The original's bubble, to the pixel: the meta line lives INSIDE a bordered
+   box, not floating above it, and the tone is set by whose message it is. */
+.lw-msg { display: flex; justify-content: flex-start; }
+.lw-msg--mine { justify-content: flex-end; }
+.lw-msg__bubble {
+  max-width: 85%;
+  padding: 8px 12px;
+  border: 1px solid var(--lw-border);
+  border-radius: 8px;
+  background: var(--lw-surface-muted);
+  word-break: break-word;
+}
+.lw-msg--mine .lw-msg__bubble { border-color: #cddcee; background: var(--lw-accent-soft); }
+.lw-msg__meta {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  margin: 0 0 2px; font-size: 10px; color: var(--lw-muted);
+}
+.lw-msg__who { font-weight: 500; color: var(--lw-muted-strong); }
+/* The role chip the original puts beside a reporter's name. */
+.lw-msg__role {
+  border-radius: 4px; padding: 0 4px; font-size: 9px;
+  background: rgba(255, 255, 255, 0.7); color: var(--lw-faint);
+}
+.lw-msg__edited { font-style: italic; color: var(--lw-faint); }
+/* The pencil sits at the end of the meta line, as it does in the app's thread. */
+.lw-msg__edit {
+  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
+  border: 0; background: none; padding: 1px 4px; border-radius: 4px;
+  font: inherit; font-size: 10px; color: var(--lw-muted); cursor: pointer;
+}
+.lw-msg__edit:hover { color: var(--lw-heading); background: rgba(255, 255, 255, 0.6); }
+.lw-msg__editing { margin-top: 4px; }
+.lw-msg__editActions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
+.lw-composer { margin-top: 12px; }
+.lw-composer__actions { display: flex; justify-content: flex-end; margin-top: 8px; }
+.lw-send {
+  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 14px; font: inherit; font-weight: 500;
+  border: 1px solid var(--lw-primary); border-radius: 8px; background: var(--lw-primary); color: #fff; cursor: pointer;
+}
+.lw-send:hover:not(:disabled) { background: var(--lw-primary-hover); }
+.lw-send:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ---- annotator ---- */
+.lw-annotator {
+  position: fixed; inset: 0; z-index: 2147482900;
+  display: flex; align-items: center; justify-content: center;
+  padding: 24px; background: rgba(15, 23, 42, 0.55);
+}
+.lw-annotator__panel {
+  display: flex; flex-direction: column; gap: 12px;
+  width: min(820px, 100%); max-height: 90dvh;
+  padding: 20px; border-radius: 16px; background: var(--lw-surface);
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
+}
+.lw-annotator__head { display: flex; align-items: flex-start; gap: 12px; }
+.lw-annotator__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--lw-heading); }
+.lw-annotator__desc { margin: 4px 0 0; font-size: 13px; color: var(--lw-muted); word-break: break-word; }
+.lw-annotator__hint { margin: 0; font-size: 12px; color: var(--lw-muted); }
+.lw-annotator__close {
+  border: 0; background: none; padding: 4px; line-height: 1; cursor: pointer;
+  color: var(--lw-muted); font-size: 18px;
+}
+.lw-annotator__close:hover { color: var(--lw-heading); }
+.lw-annotator__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.lw-annotator__tools .lw-grow { flex: 1; }
+.lw-annotator__canvas { flex: 1; min-height: 0; }
+/* Contained, not stretched. A canvas is a replaced element, so `max-width` with
+   `height:auto` scales it proportionally — `width:100%` blew a small screenshot
+   up to the dialog's width and squashed its aspect ratio on the way. */
+/* Contained, not stretched, and never taller than the dialog can hold — the
+   app's annotator caps its working surface the same way. A canvas is a replaced
+   element, so max-width/max-height with `height:auto` scale it proportionally. */
+.lw-annotator__canvas canvas {
+  display: block; margin: 0 auto;
+  max-width: 100%; max-height: min(52dvh, 420px);
+  width: auto; height: auto; touch-action: none;
+}
+.lw-annotator__actions { display: flex; align-items: center; gap: 8px; }
+.lw-annotator__actions .lw-grow { flex: 1; }
+/*
+ * The app's toolbar, to the pixel — including its two states, which are not the
+ * obvious ones: a tool sits TINTED at rest (`bg-accent`) and goes SOLID when
+ * armed (`bg-primary`, white text). Ours had it the other way round, white at
+ * rest and a light tint when armed, which read as a different control set.
+ */
+button.lw-atool {
+  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
+  padding: 4px 10px; font: inherit; font-size: 12px;
+  border: 1px solid var(--lw-border); border-radius: 6px;
+  background: var(--lw-accent-soft); color: var(--lw-heading); cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+button.lw-atool:hover:not(:disabled) { background: #e2ecf8; }
+button.lw-atool:disabled { opacity: 0.5; cursor: not-allowed; }
+button.lw-atool[aria-pressed="true"] {
+  border-color: var(--lw-primary); background: var(--lw-primary); color: #fff;
+}
+
+/*
+ * ล้างทั้งหมด is not a tool, and the app does not dress it like one — it is an
+ * outline button over there, so it is one here too.
+ */
+button.lw-atool--plain {
+  background: var(--lw-surface); color: var(--lw-muted-strong);
+}
+button.lw-atool--plain:hover:not(:disabled) { background: var(--lw-surface-muted); }
+
+.lw-annotator__canvasbox {
+  /* `relative`, and it is load-bearing. The annotator's text tool appends a
+     real <input> to the canvas's PARENT and positions it absolutely over the
+     spot that was clicked; without a positioned ancestor it escapes to the
+     backdrop and lands at the bottom of the dialog. */
+  position: relative;
+  overflow: auto; padding: 8px;
+  border: 1px solid var(--lw-border); border-radius: 10px;
+  background: var(--lw-surface-muted);
+}
+
+/* The on-image text editor, matched to the shape it becomes — same weight, same
+   red, same white plate — so what you type is what gets drawn, where you
+   clicked. Sized in JS, because the font tracks the image's own scale.
+   These rules used to live ONLY in the reporter dialog's shadow stylesheet, so
+   in a framework dialog the input had no position at all. */
+.lw-annotator .text-edit {
+  position: absolute; z-index: 2; margin: 0; padding: 2px 4px;
+  font-family: system-ui, sans-serif; font-weight: 600; line-height: 1.25;
+  color: #f44336; background: rgba(255, 255, 255, 0.92);
+  border: 1px dashed #f44336; border-radius: 4px; outline: none;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
+}
+.lw-annotator .text-edit::placeholder { color: rgba(244, 67, 54, 0.45); }
+
+/* ---- editor ---- */
+.lw-editor { border: 1px solid var(--lw-border); border-radius: 10px; background: var(--lw-surface); overflow: hidden; }
+.lw-editor--disabled { opacity: 0.6; }
+.lw-editor__tools {
+  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 8px;
+  border-bottom: 1px solid var(--lw-border); background: var(--lw-surface-muted);
+}
+.lw-editor__sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--lw-border); }
+.lw-editor__uploading { margin-left: 4px; font-size: 11px; color: var(--lw-muted); }
+.lw-editor__content { padding: 10px 12px; }
+.lw-tool {
+  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px;
+  padding: 0 7px; border: 1px solid transparent; border-radius: 6px; background: transparent;
+  color: var(--lw-muted-strong); cursor: pointer; font: inherit;
+}
+.lw-tool:hover:not(:disabled) { background: var(--lw-border); }
+.lw-tool:disabled { opacity: 0.5; cursor: not-allowed; }
+.lw-tool--on { background: var(--lw-accent-soft); color: var(--lw-accent); }
+
+/* TipTap owns this node, so it is styled by class rather than by nesting. */
+.lw-editor-body { min-height: 92px; max-height: 320px; overflow-y: auto; outline: none; word-break: break-word; color: var(--lw-text); }
+.lw-editor-body p { margin: 0 0 8px; }
+.lw-editor-body p:last-child { margin-bottom: 0; }
+.lw-editor-body ul, .lw-editor-body ol { margin: 4px 0; padding-left: 22px; }
+.lw-editor-body a { color: var(--lw-link); text-decoration: underline; }
+.lw-editor-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; }
+/* The placeholder extension marks the first empty node; this draws it. */
+.lw-editor-body p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder); float: left; height: 0; pointer-events: none; color: var(--lw-faint);
+}
+
+@media (max-width: 640px) {
+  .lw-search__field { width: 100%; }
+  .lw-count { margin-left: 0; }
+  .lw-msg { max-width: 100%; }
+}

package/src/submit.ts

@@ -0,0 +1,143 @@
+/**
+ * Filing a bundle as a ticket on a Lightwork Support host.
+ *
+ * Replaces the original's `ticketService`, which posted multipart to a bespoke
+ * `/support-tickets` endpoint on the same app's API. This posts JSON to the
+ * public widget ingest, authenticated by the realm's embed key — no login, no
+ * cookie, and nothing here that a reader of the bundle could not already see.
+ */
+import { compressScreenshot } from "./screenshot";
+import { appInfo, getConfig } from "./config";
+import { errorSignature } from "./signature";
+import { trimToBudget, BUNDLE_BUDGET_BYTES } from "./budget";
+import type { DebugBundle } from "./types";
+
+export interface FiledTicket {
+  id: string;
+  number: number;
+  status: string;
+}
+
+/**
+ * Base64 for a payload of any size.
+ *
+ * This was `btoa(String.fromCharCode(...bytes))`, which spreads every byte into
+ * the argument list — and an argument list has a hard limit. It worked on the
+ * tiny bundles a test produces and threw "Maximum call stack size exceeded" on
+ * a real one, at the last possible moment: the user has written the report,
+ * drawn on the screenshot, and pressed send.
+ *
+ * Chunked, so the argument count is bounded no matter how large the bundle is.
+ */
+const CHUNK = 0x8000;
+
+export function toBase64(bytes: Uint8Array): string {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += CHUNK) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+  }
+  return btoa(binary);
+}
+
+/** A data URI for the JSON bundle, so the bulk lands in object storage. */
+function bundleAttachment(bundle: DebugBundle): { dataUri: string; filename: string } {
+  // btoa is latin1-only and a bundle is full of Thai. Encode to bytes first.
+  const base64 = toBase64(new TextEncoder().encode(JSON.stringify(bundle)));
+  return { dataUri: `data:application/json;base64,${base64}`, filename: "debug-bundle.json" };
+}
+
+export async function submitBundle(title: string, bundle: DebugBundle): Promise<FiledTicket> {
+  const config = getConfig();
+  const trimmed = trimToBudget(bundle, BUNDLE_BUDGET_BYTES);
+  const { context, note } = trimmed;
+
+  const attachments: { dataUri: string; filename?: string }[] = [];
+  if (trimmed.screenshotDataUrl) {
+    // Resized and re-encoded before it goes: a raw capture of a large display
+    // is over the server's per-file cap on its own.
+    const shot = await compressScreenshot(trimmed.screenshotDataUrl);
+    attachments.push({ dataUri: shot, filename: "screenshot.jpg" });
+  }
+  attachments.push(bundleAttachment(trimmed));
+
+  /*
+   * `context` is a jsonb column on the ticket row, read back by every query that
+   * returns the ticket — so it gets the SUMMARY, not the bundle. The full thing
+   * travels as an attachment, which lands in object storage and is fetched only
+   * when somebody opens it.
+   *
+   * `signature` is the exception that must be here: the backend's
+   * computeSignature reads `context.signature` to merge duplicate reports, and
+   * it cannot reach inside an attachment to find it.
+   */
+  const signature = errorSignature(trimmed);
+  const body = {
+    title,
+    // The user's own words, and nothing else. This used to fall back to the
+    // markdown report, which arrived on the ticket as an unreadable wall —
+    // headings, backticks and every captured URL run together, with the actual
+    // complaint nowhere in it. The original sends the note or omits the field,
+    // and everything technical belongs in the structured data below.
+    description: note.trim() || undefined,
+    // Which module broke, if the app says; otherwise which app. Both are
+    // things the app states about itself — neither is inferred from a URL.
+    category: context.module?.label || appInfo().name,
+    routeUrl: context.route.href,
+    priority: "MEDIUM",
+    requesterEmail: context.user.email ?? undefined,
+    requesterName: context.user.fullName ?? undefined,
+    customFields: {
+      unit: context.user.unit ?? "",
+      appVersion: context.app.version,
+      environment: context.app.environment,
+      reasonType: trimmed.reason.type,
+      appName: appInfo().name,
+      module: context.module?.label ?? "",
+    },
+    context: {
+      ...(signature ? { signature } : {}),
+      capturedAt: context.capturedAt,
+      reason: trimmed.reason,
+      cause: trimmed.cause,
+      actionTrail: trimmed.actionTrail,
+      client: context.client,
+      performance: context.performance,
+      apiHeaders: context.apiHeaders,
+      extra: context.extra,
+      counts: {
+        network: trimmed.network.length,
+        console: trimmed.console.length,
+        actions: trimmed.actionTrail.length,
+      },
+      screenshotMethod: trimmed.screenshotMethod,
+    },
+    attachments,
+  };
+
+  // The widget ingest mounts at the ROOT of the support app, beside the
+  // authenticated /api routes rather than inside them, because it is the one
+  // surface a public key reaches. Assuming the prefix cost a 404 that no unit
+  // test could have caught — it only appears against a real server.
+  const res = await fetch(`${config.host.replace(/\/$/, "")}/ingest/tickets`, {
+    method: "POST",
+    headers: { "content-type": "application/json", "x-realm-key": config.realmKey },
+    body: JSON.stringify(body),
+  });
+
+  if (!res.ok) {
+    // The ingest endpoint answers 429 with a retry-after; anything else carries
+    // an { error } body. Surface whichever it is — "failed" alone sends someone
+    // reading a network tab they may not be able to open.
+    const retryAfter = res.headers.get("retry-after");
+    const detail = await res
+      .json()
+      .then((b: { error?: string }) => b.error)
+      .catch(() => null);
+    throw new Error(
+      res.status === 429
+        ? `Too many reports — try again in ${retryAfter ?? "a moment"}s`
+        : (detail ?? `Report failed (${res.status})`),
+    );
+  }
+  return (await res.json()) as FiledTicket;
+}