Repository navigation
fix(post): render ANSI Rich table without leaking escape codes - #66
Merged
Merged
Conversation
Reviewer's GuideImplementationDecode SGR escapes into styled spans while preserving Shiki’s code-block frame and terminal label.
UIAdd an accessible, theme-aware HTML table for the scheduler output and update the post to use it.
Style decoded ANSI spans across themes and refine code-block framing, badges, and focus markers.
Adjust responsive widget sizing and scrolling, and reformat related widget styles.
ConfigurationRegister the ANSI rehype plugin in both Markdown and MDX processing pipelines.
Add the captured ANSI scheduler output asset used by the post.
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Deploying sam-onl with
|
| Latest commit: |
0c959ab
|
| Status: | ⚡️ Build in progress... |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 8 issues
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="web/src/components/RichTable.astro" line_range="33" />
<code_context>
+} = Astro.props as Props
+
+/** Short Rich IDs shown alongside full IDs, if any */
+const ids = fullIds ?? (rows.length ? rows.map((r) => `${r[0]}.aurora-pbs-0001.example.alcf.anl.gov`) : [])
+
+const stateClass = (s: string) => {
</code_context>
<issue_to_address>
**Copied job IDs use a placeholder host**
When a caller omits `fullIds`, `ids` appends a fixed Aurora hostname to each row’s first value, so the component presents a fabricated full job ID that users copy instead of the actual identifier.
Do not generate full IDs by appending a fixed hostname; show only the short IDs unless callers provide the full IDs.
Also at `web/src/components/RichTable.astro:34`.
</issue_to_address>
### Comment 2
<location path="web/src/pages/posts/2026/10/16/index.mdx" line_range="193" />
<code_context>
- 8936286.aurora-pbs-0001.example.alcf.anl.gov
- 8936102.aurora-pbs-0001.example.alcf.anl.gov
- 8935991.aurora-pbs-0001.example.alcf.anl.gov
+```bash
+ezpz status --remote aurora
+╭─────────┬─────────┬───┬────────┬───────┬───────┬──────┬───────────┬──────────╮
</code_context>
<issue_to_address>
**Status example lacks accessible table cells**
When a reader views the updated status example, the post puts the status data in a `bash` fence instead of rendering `RichTable`, so readers and assistive technology get terminal text rather than semantic table cells.
Render the status example with `RichTable` instead of a `bash` code fence.
</issue_to_address>
### Comment 3
<location path="web/src/styles/global.css" line_range="1679" />
<code_context>
+.ansi-bg-black{background:color-mix(in srgb,var(--foreground0) 12%,transparent)} .ansi-bg-red{background:color-mix(in srgb,var(--red) 14%,transparent)} .ansi-bg-green{background:color-mix(in srgb,var(--green) 14%,transparent)} .ansi-bg-yellow{background:color-mix(in srgb,var(--yellow) 14%,transparent)} .ansi-bg-blue{background:color-mix(in srgb,var(--blue) 14%,transparent)} .ansi-bg-magenta{background:color-mix(in srgb,var(--mauve,var(--pink)) 14%,transparent)} .ansi-bg-cyan{background:color-mix(in srgb,var(--teal,var(--blue)) 14%,transparent)} .ansi-bg-white{background:color-mix(in srgb,var(--foreground0) 8%,transparent)}
</code_context>
<issue_to_address>
**Bright ANSI backgrounds render as default**
When a code block contains an SGR bright-background sequence (100–107), `BG_CLASS` emits `ansi-bg-bright-*` classes, but the stylesheet defines no matching background rules, so the requested background color is not rendered.
Add stylesheet background rules for the `ansi-bg-bright-*` classes.
Also at `web/src/utils/rehype-ansi.mjs:27-29`.
</issue_to_address>
### Comment 4
<location path="web/src/components/landing/widgets/Widgets.astro" line_range="307" />
<code_context>
+ )
+ :global(.talks-widget) {
+ max-height: min(55dvh, 42lh) !important;
+ max-height: min(55vh, 42lh) !important;
+ overflow: hidden !important;
+ display: flex !important;
</code_context>
<issue_to_address>
**Mobile panels exceed visible viewport**
When a mobile browser’s visible viewport is shorter than its layout viewport and the viewport-based cap is limiting, the later `55vh` declaration overrides `55dvh`, so `.talks-widget` panels use the larger layout viewport cap and can extend below the visible screen, crowding sibling widgets.
Make `55vh` the fallback and place the `55dvh` declaration after it so supported browsers use the dynamic viewport.
Also at `web/src/components/landing/widgets/WorkWidget.astro:204`.
</issue_to_address>
### Comment 5
<location path="web/src/utils/rehype-ansi.mjs" line_range="31-32" />
<code_context>
+ 104: 'ansi-bg-bright-blue', 105: 'ansi-bg-bright-magenta', 106: 'ansi-bg-bright-cyan', 107: 'ansi-bg-bright-white',
+}
+
+const ANSI_RE = /\x1b\[([0-9;]*)m/g
+const ANSI_STRIP = /\x1b\[[0-9;]*m/g
+
+function color256(n) {
</code_context>
<issue_to_address>
**Colon-form SGR leaks visibly**
When a terminal output uses colon-separated SGR parameters, such as `38:2::r:g:b`, `ANSI_RE` and `ANSI_STRIP` do not recognize colon-separated SGR parameters, so the plugin returns without transforming a block that uses only that valid SGR form and the escape sequences remain visible in the rendered code.
Recognize and decode colon-separated SGR parameters, or strip unsupported SGR sequences before rendering.
</issue_to_address>
### Comment 6
<location path="web/src/components/RichTable.astro" line_range="65" />
<code_context>
+ rows.map((row, i) => (
+ <tr>
+ {row.map((cell, j) => (
+ <td class={j === 1 ? stateClass(cell) : undefined}>{cell}</td>
+ ))}
+ </tr>
</code_context>
<issue_to_address>
**Custom columns color the wrong cell**
When a caller places the state column anywhere other than the second position, the cell renderer applies `stateClass` only to index 1, so reordering the configurable headers colors a non-state cell and leaves the state cell uncolored.
Make the state column explicit or define a fixed, semantically typed column schema instead of accepting arbitrary headers and rows.
</issue_to_address>
### Comment 7
<location path="web/src/pages/posts/2026/10/16/index.mdx" line_range="195" />
<code_context>
+╭─────────┬─────────┬───┬────────┬───────┬───────┬──────┬───────────┬──────────╮
+│�[1m �[0m�[1mHost �[0m�[1m �[0m│�[1m �[0m�[1mJOBID �[0m�[1m �[0m│�[1m �[0m�[1mS�[0m�[1m �[0m│�[1m �[0m�[1mQUEUE �[0m�[1m �[0m│�[1m �[0m�[1mNODES�[0m�[1m �[0m│�[1m �[0m�[1m WALL�[0m�[1m �[0m│�[1m �[0m�[1mELAP�[0m�[1m �[0m│�[1m �[0m�[1mJOBNAME �[0m�[1m �[0m│�[1m �[0m�[1mNOTE �[0m�[1m �[0m│
+├─────────┼─────────┼───┼────────┼───────┼───────┼──────┼───────────┼──────────┤
</code_context>
<issue_to_address>
**Terminal docs contradict sample**
When a reader compares the Rich-table description with the updated example, the new terminal sample shows box borders and does not show full IDs dimmed below the rows, while the accompanying prose describes a borderless table with short IDs and dimmed full IDs; readers get an inaccurate description of the displayed output.
Update the prose to match the output shown in the sample.
</issue_to_address>
### Comment 8
<location path="web/src/utils/rehype-ansi.mjs" line_range="136" />
<code_context>
+ } else cur.push(n)
+ }
+ }
+ flush()
+ code.children = out
+ // Tag the pre so CSS can suppress the numbered gutter on ANSI-colored blocks
</code_context>
<issue_to_address>
**ANSI blocks gain a blank line**
When an ANSI code block ends with the newline commonly present in fenced Markdown, the split on a trailing newline already flushes the preceding line, then the unconditional final `flush()` emits another newline-only block; because `.ansi-line` is displayed as a block, the rendered code gains an extra blank row.
Avoid the final flush when the input ended at a line boundary and the current line is empty.
</issue_to_address>
Co-authored-by: internal-model
rehype-ansi overwrote the pre class with 'ansi-block' alone, dropping astro-code which carries the border and language chip. Append instead and ensure astro-code is present so the block renders like other code fences. Co-authored-by: internal-model
Bash green competed with the table's own cyan/yellow cells. Orange terminal label reads as "dump" not "snippet". Co-authored-by: internal-model
Dark themes use `color: var(--shiki-*) !important` on every code span, which flattened the ANSI palette to a single hue. Add !important to the ANSI palette so it wins the cascade in all themes; the tokens already adapt via the site palette. Co-authored-by: internal-model
saforem2
force-pushed
the
fix/ansi-table-render-2026-11-11
branch
from
November 12, 2026 15:44
b9da098 to
3760835
Compare
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
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.
Captures the current dirty working tree onto a branch (previously on
mainwith unstaged changes and no PR).What changed
web/astro.config.mjs— wirerehypeAnsi(both markdown + MDX pipelines)web/src/utils/rehype-ansi.mjs+web/src/assets/ezpz-status.ansi— SGR → themed spansweb/src/components/RichTable.astro— accessible Rich table componentweb/src/pages/posts/2026/10/16/index.mdx— Rich table content update + doc fixweb/src/styles/global.css+ widgets — ANSI classes + UI tweaksVerification
bun run buildpasses (157 pages, 37s)dist/posts/2026/10/16/index.htmlcontainsansi-block/ansi-boldetc., no literal[1mresidue (checked via grep)Fixes the screenshot-reported ANSI leak (raw
[1m/[0mshowing in the Rich table).Closes n/a
Summary by Sourcery
Render ANSI terminal output as themed, accessible HTML while improving the related article presentation and responsive widget layout.
New Features:
Bug Fixes:
Enhancements:
Documentation: