mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-10-03 17:15:19 -07:00
fix(ui): make long error toasts readable and copyable
A failed generation put the server's error straight into a toast. The transformers "Unrecognized model" error is ~4.8KB, of which the first sentence carries the meaning and the remaining 4.7KB is an alphabetical list of every architecture it knows. In a 420px toast with overflow-hidden and no scroll, that clipped the text at both ends and pushed the close button off-screen: unreadable and undismissable. - ToastDescription is capped at 40vh and scrolls, wraps on whitespace and breaks long unspaced tokens so a path cannot widen the toast. - The toast aligns to the start rather than centring, so the title stays visible next to a tall description. - condenseError() keeps the head of an oversized error, cutting at the first newline or the last sentence end inside a 400-char budget, and reports how many characters it dropped. Short errors pass through untouched. - When it does truncate, the toast offers a Copy action for the full text and points at Settings -> Logs. Verified against the real 4795-char error: 4795 -> 400 chars keeping both meaningful sentences. The hook moves to .tsx to render ToastAction, matching useAutoUpdater.tsx which is a .tsx hook for the same reason. createElement was tried first but this repo's ToastActionElement type is the older shadcn definition (ReactElement<typeof ToastAction>) which only accepts JSX-constructed elements. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
committed by
capy-ai-staging[bot]
co-authored by
Claude Opus 5
parent
ca56137ca0
commit
9ba2b33069
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* Condense a server error for display in a toast.
|
||||
*
|
||||
* Some backend errors are enormous and mostly noise. The transformers
|
||||
* "Unrecognized model" error is ~4.8KB, of which the first sentence carries all
|
||||
* the meaning and the remaining 4.7KB is an alphabetical list of every model
|
||||
* architecture it knows about. Rendering that in a 420px toast clipped the text
|
||||
* at both ends and pushed the close button off-screen.
|
||||
*
|
||||
* The rule is deliberately generic rather than pattern-matching any one
|
||||
* library: keep the head, cut at the most natural boundary available inside the
|
||||
* budget, and report how much was dropped so nobody assumes they read it all.
|
||||
*/
|
||||
|
||||
/** Characters of an error worth putting in a toast. Roughly the first
|
||||
* paragraph — enough for a sentence or two of real message. */
|
||||
const TOAST_ERROR_BUDGET = 400;
|
||||
|
||||
/** Below this there is nothing to gain by condensing. */
|
||||
const MIN_TO_CONDENSE = TOAST_ERROR_BUDGET + 120;
|
||||
|
||||
export interface CondensedError {
|
||||
/** What to show in the toast. */
|
||||
display: string;
|
||||
/** The untouched original, for copying. */
|
||||
full: string;
|
||||
/** Whether `display` is shorter than `full`. */
|
||||
truncated: boolean;
|
||||
/** How many characters `display` leaves out. */
|
||||
omitted: number;
|
||||
}
|
||||
|
||||
export function condenseError(raw: string | null | undefined): CondensedError {
|
||||
const full = (raw ?? '').trim();
|
||||
|
||||
if (full.length <= MIN_TO_CONDENSE) {
|
||||
return { display: full, full, truncated: false, omitted: 0 };
|
||||
}
|
||||
|
||||
// A traceback's first line is nearly always the message; prefer it whenever
|
||||
// it fits, since a newline is a stronger boundary than any punctuation.
|
||||
const firstLine = full.split('\n', 1)[0].trim();
|
||||
let head =
|
||||
firstLine.length > 0 && firstLine.length <= TOAST_ERROR_BUDGET
|
||||
? firstLine
|
||||
: full.slice(0, TOAST_ERROR_BUDGET);
|
||||
|
||||
if (head.length < full.length && head === full.slice(0, head.length)) {
|
||||
// Back off to the last sentence end inside the budget so the text does not
|
||||
// stop mid-word. Only accept it if it keeps most of the budget — otherwise
|
||||
// a stray early period would throw away usable context.
|
||||
const lastStop = Math.max(head.lastIndexOf('. '), head.lastIndexOf('? '));
|
||||
if (lastStop > TOAST_ERROR_BUDGET * 0.4) {
|
||||
head = head.slice(0, lastStop + 1);
|
||||
}
|
||||
}
|
||||
|
||||
head = head.trimEnd();
|
||||
const omitted = full.length - head.length;
|
||||
|
||||
// Guard against the boundary search having produced nothing shorter.
|
||||
if (omitted <= 0) {
|
||||
return { display: full, full, truncated: false, omitted: 0 };
|
||||
}
|
||||
|
||||
return { display: `${head} …`, full, truncated: true, omitted };
|
||||
}
|
||||
Reference in New Issue
Block a user