A config file that does not parse says so in one plain line above its highlighted source, not a boxed alert card #10014

A JSON, YAML or TOML file that doesn't parse now shows its error as one plain line above the source, with no boxed alert card. Earlier it was a <div class="card" role="alert"> with the source in a second card.

• The error line: brokenConfig in src/web/render/config.ts now writes a single <p role="status">: "Not valid YAML: … at line L, column C." The muted hint ("The form needs valid YAML. Source shows the file highlighted.") follows on the same line.
• The source: it is a plain <pre class="mono">, the same way the config diff draws code. The failing line still has its <mark>.
• The test: new test/config-broken-language.test.ts renders a broken YAML file. It fails if class="card" or role="alert" comes back, and checks that the line and column are in the single line and that the failing line is marked. A second case checks that a <script> inside a broken JSON file comes out escaped.
• Old tests: none needed changing. The existing ones only check for "Not valid YAML" / "Not valid JSON", which is still there.

Checks run: bun scripts/gate.ts, bun scripts/design-lint.ts and bun x tsc --noEmit pass. The 26 test files scripts/fast.ts named, plus config-form and config-language, pass with nothing failing.

Not done: the keep_plan tool the issue asks for wasn't available in this run, so the issue has no plan on it.

To try it: in this pull's preview, commit a YAML file with a broken line (for example a: [1) and open it on the blob page.

🤖 Generated with Claude Code

Closes #10009

A JSON, YAML or TOML file that doesn't parse now shows its error as one plain line above the source, with no boxed alert card. Earlier it was a <div class="card" role="alert"> with the source in a second card.

• The error line: brokenConfig in src/web/render/config.ts now writes a single <p role="status">: "Not valid YAML: … at line L, column C." The muted hint ("The form needs valid YAML. Source shows the file highlighted.") follows on the same line.
• The source: it is a plain <pre class="mono">, the same way the config diff draws code. The failing line still has its <mark>.
• The test: new test/config-broken-language.test.ts renders a broken YAML file. It fails if class="card" or role="alert" comes back, and checks that the line and column are in the single line and that the failing line is marked. A second case checks that a <script> inside a broken JSON file comes out escaped.
• Old tests: none needed changing. The existing ones only check for "Not valid YAML" / "Not valid JSON", which is still there.

Checks run: bun scripts/gate.ts, bun scripts/design-lint.ts and bun x tsc --noEmit pass. The 26 test files scripts/fast.ts named, plus config-form and config-language, pass with nothing failing.

Not done: the keep_plan tool the issue asks for wasn't available in this run, so the issue has no plan on it.

To try it: in this pull's preview, commit a YAML file with a broken line (for example a: [1) and open it on the blob page.

🤖 Generated with Claude Code

A JSON, YAML or TOML file that doesn't parse now shows its error as one plain line above the source, with no boxed alert card. Before, it was a <div class="card" role="alert"> with the source in a second card.

• The error line: brokenConfig in src/web/render/config.ts now writes a single <p role="status">: "Not valid YAML: … at line L, column C." The muted hint ("The form needs valid YAML. Source shows the file highlighted.") follows on the same line.
• The source: it is a plain <pre class="mono">, the same way the config diff draws code. The failing line keeps its <mark>.
• The test: new test/config-broken-language.test.ts renders a broken YAML file. It fails if class="card" or role="alert" comes back, and checks that the line and column are in the single line and that the failing line is marked. A second case checks that a <script> inside a broken JSON file comes out escaped.
• Old tests: none needed changing. The existing ones only check for "Not valid YAML" / "Not valid JSON", which is still there.
• Check fix: the first push failed the gate because no commit message had a Try: line. An empty follow-up commit adds one; the gate passes against main@db18847.

Checks run: bun scripts/gate.ts, bun scripts/design-lint.ts and bun x tsc --noEmit pass. The 26 test files scripts/fast.ts named, plus config-form and config-language, pass with nothing failing.

Not done: the keep_plan tool the issue asks for wasn't available in this run, so the issue has no plan on it.

To try it: in this pull's preview, commit a file a.yml containing a: [1 and open it on the blob page.

🤖 Generated with Claude Code

A JSON, YAML or TOML file that doesn't parse now shows its error as one plain line above its source, with no boxed alert card. The source scrolls inside its own block on a phone, and the failing line is tinted with a colour from the stylesheet.

• The error line: brokenConfig in src/web/render/config.ts writes one plain <p>: "Not valid YAML: … at line L, column C." It is followed by a single muted clause, "The form needs valid YAML." There is no card class, no role="alert", and role="status" is dropped too.
• The source block: it reuses .config-diff (overflow-x: auto; white-space: pre; margin: 0), so a long line scrolls inside the block and doesn't widen a 360px page. It has tabindex="0" and aria-label="Source", so a keyboard user can scroll it.
• The failing line: it is <mark data-op="del">, which the existing .config-diff > [data-op="del"] rule colours with --del-bg / --del-fg instead of the browser's yellow. No CSS was added.
• Tests: test/config-broken-language.test.ts fails if class="card", role="alert" or the old "Source shows…" sentence comes back. It checks:

- the line and column are in the error line; - the pre has the overflow class, label and tabindex; - the failing line b: x: y is marked; - the .config-diff overflow and del tint rules are still in the stylesheet; - broken JSON with a <script> in it is escaped.

I changed the test's input. The first one, b: [1 at the end of the file, makes the YAML parser report the line after the last one, so the mark came out empty. One gap remains: an error at end of file still gives an empty mark.

• Checks run: bun scripts/gate.ts, bun scripts/design-lint.ts, bun x tsc --noEmit and the test files scripts/fast.ts names all pass.

Not done: the keep_plan tool the issue asks for wasn't available in this run, so the issue has no plan on it.

To try it: in this pull's preview, commit a file a.yml containing a: 1, then b: x: y, then one very long line. Open it on the blob page at phone width: the source scrolls sideways inside its block and line 2 is tinted.

🤖 Generated with Claude Code