feat(demo): SVG sparkline of training loss under Train button#83
Merged
Conversation
Renders `TfjsReasoner.train()`'s `history.loss` series as a 120x32 SVG polyline directly under the Train button so the player sees the loss curve drop in real time — turns "Trained ✓ — loss X → Y" into visible evidence of what just happened. Pure DOM, no charting library. The renderer (`lossSparkline.ts`) lives under the demo's own `src/`, not the library; consumers wiring their own UI can copy the 80-line helper or build their own. Idempotent: re-train clears prior nodes so repeated clicks don't leak SVG elements. UX wiring: - Sparkline shows after a successful train run when in Learning mode. - Hidden when fewer than 2 loss samples (single-point line is a glitch). - Cleared on Untrain and on switching to a non-Learning mode so a stale curve doesn't bleed across sessions. Tests: 6 new jsdom unit tests in `tests/examples/lossSparkline.test.ts` cover render, hide-when-empty, re-render-clears, min/max axis mapping, and flat-series horizontal-line behavior. No library change. No changeset. Roadmap row 13 of `docs/plans/2026-04-25-comprehensive-polish-and-harden.md`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
size-limit report 📦
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 145f3f71a9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+268
to
+270
| const losses = result.history?.loss; | ||
| if (sparkline && losses && losses.length > 0) { | ||
| renderLossSparkline(sparkline, losses); |
There was a problem hiding this comment.
If a train run starts in learning mode and the user switches to another mode before reasoner.train(...) resolves, this block still calls renderLossSparkline(...) on completion. setTrainVisibility clears the sparkline when switching away, but this asynchronous re-render repopulates it in non-learning modes, so stale training state leaks back into the UI. Gate this render on the run still owning the active learning reasoner (or activeModeId === 'learning').
Useful? React with 👍 / 👎.
…mode Per Codex review (P2): a `reasoner.train(...)` call started in Learning mode can resolve *after* the user has switched to a different cognition mode. The post-train block was unconditionally calling `renderLossSparkline`, repopulating the curve in the new mode even though `setTrainVisibility` had already cleared it on the mode switch. Gate the render on the run still owning the active reasoner (`reasonerHandle === activeReasoner`) AND the active mode still being `'learning'`. Either condition failing means the player has moved on; the loss curve from the late train shouldn't bleed into the new HUD. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This was referenced Apr 25, 2026
Luis85
added a commit
that referenced
this pull request
Apr 26, 2026
## Summary
Doc-audit pass over `docs/plans` + `docs/specs`. Three things land
together:
- **`docs/archive/{plans,specs}/`** — new home for plans whose roadmap
rows have all shipped (or whose goals were folded into a successor)
and specs whose design is now reflected in code. Includes a
`README.md` explaining the policy; `CLAUDE.md` documents the
convention.
- **`git mv` 23 plans + 3 specs into the archive.** The active live
set is now the comprehensive polish-and-harden plan plus three
specs (post-tfjs improvements, mvp-demo, vision), each with a
refreshed status banner.
- **Refresh the live comprehensive plan** against current `develop`:
- PR column updated for rows 16/19/20/3/4/22 (now shipped via
PRs #91 / #98 / #104 / #110 / #113 / #111).
- New "Post-roadmap follow-ups" section covers PRs #92 → #125
(review-bot infra, tracker findings, demo + tfjs hotfixes,
tooling).
- Stale prose-baked counts dropped (size budgets now reference
`package.json#size-limit` only).
- Coverage-thresholds section gains a pointer to the sticky PR
comment shipped in PR #124.
## Other doc fixes
- `README.md`: drop the unverifiable "Phase A milestones (M0–M15) are
all green" claim — the milestones don't exist as documented IDs
anywhere; replace with a pointer to the live polish plan.
- `vision.md`: refresh cadence note (was pinned to 2026-04-19 + "next
review at 1.0").
- `2026-04-24-post-tfjs-improvements.md`: mark recommended-order items
that have shipped (PRs #61, #76, #77, #83, #84, #91, #94, #96,
#104, #113), link the active roadmap as the heir.
- `mvp-demo.md`: status banner explaining where active polish work is
now tracked.
## Mechanical
- Update inline cross-refs in `CLAUDE.md`, `eslint.config.js`,
`src/agent/{Agent,AgentModule}.ts`, `tests/unit/exports.test.ts`,
and `docs/daily-reviews/2026-04-25.md` to point at the new
`docs/archive/` paths so links keep resolving.
No code change beyond comment-path updates.
## Test plan
- [x] `npm run verify` green (`format:check` + `lint` + `typecheck` +
`test` + `build` + `docs`). 523 tests pass; the 2 lint warnings
are pre-existing (`CognitionPipeline.invokeSkillAction` complexity
+ `scoreFailure` param count) and on the ratchet menu.
- [x] `git ls-files docs/archive/` shows the moved files; renames are
preserved (`git log --follow` works for any moved file).
- [ ] Codex review: clean, no blockers.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Luis Mendez <hallo@luis-mendez.de>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Renders
TfjsReasoner.train()'shistory.lossseries as a 120×32 SVG polyline directly under the Train button. The player sees the loss curve drop in real time — turns the existing "Trained ✓ — loss X → Y" toast into visible evidence.Pure DOM, no charting library. The renderer (
examples/nurture-pet/src/lossSparkline.ts) lives under the demo's ownsrc/, not the library — consumers wiring their own UI can copy the 80-line helper or build their own.UX wiring
Test plan
npm run verifygreen locally (format, lint, typecheck, test, build, docs).tests/examples/lossSparkline.test.tscover: render, hide-when-empty, re-render-clears, min/max axis mapping, flat-series horizontal-line, clear+rehide.Notes for review
examples/nurture-pet/+ a new test file.docs/plans/2026-04-25-comprehensive-polish-and-harden.md.🤖 Generated with Claude Code