`/credits` large exam component failures #209

New issue

Open

opened 2026-06-23 12:16:56 +00:00 by zeyuyaoy · 1 comment

zeyuyaoy commented

2026-06-23 12:16:56 +00:00

(Migrated from codeberg.org)

Overall Objective

/credits builds invalid Discord Components V2 payloads when enough exams or awarded courses are rendered:

Current form sizing:

No selected exams will return 9 children already
30 selected exams will return 40 children (valid)
31 selected exams will return 41 children (invalid)

Current result sizing is worse:

The result view adds one separator plus one text display for each unique awarded course
For non-CFA/TEP schools, about 20 awarded course rows already create 42 children
For CFA/TEP, src/commands/credits.ts adds Gened data not available inside the per-award loop, so result containers can fail with even fewer selected exams
For proof, selecting all AP courses for TEP produces 122 container children...

Secondary issue related to this: src/utils/creditCalculatorForm.ts embeds raw exam names in score-select custom_id, but the current IB ITGS HL exam name creates a score-select custom ID of length 101, exceeding Discord's 100-character limit

Suggested Approach

One can use some form of compact, paginated views instead of one component per exam/course:

Replace per-exam TextDisplay components with one bounded TextDisplay summary; show all selected exams when short, otherwise show the first N and + X more
Stop embedding raw exam names; instead, one can use short IDs such as credits:score:<fieldKey>:<examIndex>:<nonce> and resolve them through the field option list
Extract credit calculation into a data model, then render a paginated result container; put several course entries into one TextDisplay per page rather than one component per course
For CFA/TEP, we can simply render Gened data not available once near the top, not once per awarded exam

### Overall Objective `/credits` builds invalid Discord Components V2 payloads when enough exams or awarded courses are rendered: Current form sizing: - No selected exams will return 9 children already - 30 selected exams will return 40 children (valid) - 31 selected exams will return 41 children (invalid) Current result sizing is worse: - The result view adds one separator plus one text display for each unique awarded course - For non-CFA/TEP schools, about 20 awarded course rows already create 42 children - For CFA/TEP, `src/commands/credits.ts` adds _Gened data not available_ inside the per-award loop, so result containers can fail with even fewer selected exams - For proof, selecting all AP courses for TEP produces 122 container children... Secondary issue related to this: `src/utils/creditCalculatorForm.ts` embeds raw exam names in score-select `custom_id`, but the current IB ITGS HL exam name creates a score-select custom ID of length 101, exceeding Discord's 100-character limit ### Suggested Approach One can use some form of compact, paginated views instead of one component per exam/course: - Replace per-exam `TextDisplay` components with one bounded `TextDisplay` summary; show all selected exams when short, otherwise show the first N and `+ X more` - Stop embedding raw exam names; instead, one can use short IDs such as `credits:score:<fieldKey>:<examIndex>:<nonce>` and resolve them through the field option list - Extract credit calculation into a data model, then render a paginated result container; put several course entries into one `TextDisplay` per page rather than one component per course - For CFA/TEP, we can simply render _Gened data not available_ once near the top, not once per awarded exam

zeyuyaoy commented

2026-06-23 12:22:28 +00:00

(Migrated from codeberg.org)

A more detailed approach that I will be using for the main issue

Refactor credit calculation out of onComplete in credits.ts into a pure helper returning { awardedCourses, unitTotal, notices }
Change SetupSchema.onComplete to return result data or a renderable result view model (I'll see)
Add a credit-specific renderer that builds:
a. Input form container with compact selected-exam summary
b. Optional score-select row with short custom ID
c. Result page container with bounded course entries and Prev/Next buttons
Add state to SetupForm for mode, resultPage, and option pages if any field exceeds 25 options
Replace raw exam-name score custom IDs with short index/token IDs and lookup logic
Move submit handling into the collector collect path instead of relying on collector.stop("submitted") plus end to render results

A more detailed approach that I will be using for the main issue 1. Refactor credit calculation out of `onComplete` in `credits.ts` into a pure helper returning `{ awardedCourses, unitTotal, notices }` 2. Change `SetupSchema.onComplete` to return result data or a renderable result view model (I'll see) 3. Add a credit-specific renderer that builds: a. Input form container with compact selected-exam summary b. Optional score-select row with short custom ID c. Result page container with bounded course entries and Prev/Next buttons 4. Add state to `SetupForm` for `mode`, `resultPage`, and option pages if any field exceeds 25 options 5. Replace raw exam-name score custom IDs with short index/token IDs and lookup logic 6. Move submit handling into the collector collect path instead of relying on `collector.stop("submitted")` plus `end` to render results