Side-channel prompt rendering + params-fold UX and accessibility (#174 follow-up)

[cboos]

Follow-up to #215/#216, refining how workflow sub-agent prompts and the
hybrid params tables read — driven by reviewing real rendered sessions.

Side-channel user prompts (workflow sub-agents)

These prompts are large prose+JSON hybrids that rendered as walls of text.
They now render as escaping collapsible Markdown with embedded JSON
blocks extracted into params tables: a lone {/[ on its own line,
through a lone matching closer followed by a blank line, accepted only when
json.loads parses it. Each block is substituted with a z-prefixed UUID
placeholder (so the SHA→commit-URL linkifier can never match inside it),
the prose renders as Markdown, and the placeholders are swapped for the
generic params-table rendering — which the hybrid renderer (#216) upgrades
automatically. Blocks inside fenced code (backtick or tilde) stay verbatim;
blocks wider than 200 items fall back to an escaped <pre> fold
(generation-side breadth discipline). Scoped strictly to messages grafted
from a workflow agent's side-channel — trunk rendering is untouched.

Params-fold UX + accessibility

• No interactive elements inside <summary> — Chrome flagged every
  rows-toggle as an accessibility violation (hundreds of identical DevTools
  errors on a large page; such elements aren't consistently reachable by
  keyboard/AT). The buttons move to a controls strip after the summary;
  summaries now hold only the preview text. Verified 415 → 0 offenders on a
  real session; a page-wide test pins the contract.
• Key-column toggles: fold-valued rows hoist their ▸/▾ into the key
  cell — the whole key is one keyboard-reachable <button>
  (aria-expanded), every key cell reserves the same glyph slot so key
  texts align, and the per-row "▼ collapse" chrome that drowned the content
  is gone. The glyphs are the browser's native disclosure markers
  (display: list-item + list-style-type: disclosure-closed/open) — the
  same symmetric icons <summary> shows, immune to italic contexts.
• State stays derived-from-DOM throughout: the capturing toggle listener
  syncs key glyphs, rows-toggles, and the expand-all button on any
  open/close path.

Visual tuning + runtime coverage

• Standard sub-agent sidechains get their missing group line (tool-green,
  continuing the spawning card's border); the workflow phase color softens
  to #3a7d3c.
• New Playwright coverage: computed-style contract for the :has()-driven
  group borders (snapshots embed the CSS text, so they can't catch DOM
  changes breaking the selectors), phase-pill click → hash navigation +
  auto-unfold, key-toggle cycle with externally-driven state sync, and the
  no-interactive-elements-in-summaries page contract.

Snapshot deltas are CSS/JS-only (regenerated serially); full unit, TUI,
browser suites, pyright, and the strict docs build are green.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Workflow side-channel user prompts render embedded JSON as formatted parameter tables.
  • Key-column toggle controls added for expanding/collapsing individual parameter rows.

• UI/Visual Changes

  • Workflow phase card color updated.
  • Tool result sidechain borders use tool-green styling.
  • Parameter table fold controls redesigned for clearer layout and better accessibility.

• Tests

  • Added browser and unit tests covering side-channel rendering, fold controls, accessibility, and visual CSS assertions.

• Documentation

  • Updated workflow and CSS-class docs to reflect side-channel rendering and visual rules.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1774c4e1-3a3c-4aa7-9f5f-01d07992b785

📥 Commits

Reviewing files that changed from the base of the PR and between ecf9007 and 89cc46a.

📒 Files selected for processing (1)

• dev-docs/workflows.md

✅ Files skipped from review due to trivial changes (1)

• dev-docs/workflows.md

---

📝 Walkthrough

Walkthrough

This PR adds complete support for rendering workflow side-channel user content with embedded JSON extraction and substitution into parameter tables; it introduces TemplateMessage.in_workflow_sidechannel, wires HtmlRenderer to a specialized formatter, relocates fold controls outside

with key-column toggles, updates CSS/JS, fixtures, snapshots, docs, and tests.

Changes

Workflow Side-Channel User Rendering

Layer / File(s)	Summary
TemplateMessage sidechannel flag and HTML renderer integration claude_code_log/renderer.py, claude_code_log/html/renderer.py	TemplateMessage gains in_workflow_sidechannel boolean flag, set to True when workflow agent side-channel nodes are grafted into the main rendering context. HtmlRenderer.format_UserTextMessage detects the flag and routes to specialized format_workflow_sidechannel_user_content instead of standard user text rendering.
Workflow sidechannel user content formatter with JSON extraction claude_code_log/html/user_formatters.py	New functions detect and extract standalone {...} / [...] JSON blocks from prose while respecting fence/code-block boundaries. Extracted blocks are replaced with UUID placeholders, remaining text is rendered via collapsible Markdown, and placeholders are swapped with HTML-rendered parameter tables or escaped <pre> fallback for oversized blocks.
Tool params fold control UI restructuring claude_code_log/html/tool_formatters.py, claude_code_log/html/templates/transcript.html	Row-toggle controls moved to dedicated .tool-param-fold-controls strip after <summary> (removing interactive elements from summary). Key-column toggles (.tool-param-key-toggle) added as keyboard-accessible buttons to directly toggle fold-valued rows. Client-side JavaScript updated to sync fold glyph state via aria-expanded on key toggles and update label text in .tool-param-fold-label instead of replacing button content.
CSS styling for fold controls and sidechannel elements claude_code_log/html/templates/components/message_styles.css, claude_code_log/html/templates/components/global_styles.css	New CSS for .tool-param-fold-controls, .tool-param-key-toggle, .tool-param-fold-glyph with alignment and disclosure-marker glyphs. Sidechain group border color changed from --workflow-agent-color to --tool-use-color. Added .embedded-json and .embedded-json-hint styling. Updated --workflow-phase-color from #1b5e20 to #3a7d3c.
Documentation: workflow sidechannel rendering and CSS styling dev-docs/workflows.md, dev-docs/css-classes.md	Detailed walkthrough of JSON extraction, placeholder substitution, and params-table rendering steps. Documents border color propagation by nesting depth and clarifies sidechain modifier styling with tool-green group lines.
Test fixture and data updates scripts/gen_workflow_fixture.py, test/test_data/workflow_basic/.../agent-ag000001.jsonl	workflow_basic fixture now includes prose+embedded-JSON prompt for review:loader agent; fixture generation prefers agent.prompt over agent.label. Test transcript updated with detailed "map the loader area" instructions and proposed changes.
Snapshot regression testing for fold controls and styling test/__snapshots__/test_snapshot_html.ambr	Updated HTML/CSS/JS snapshots reflecting fold control relocation, key-column toggles, aria-expanded synchronization, embedded-json styling, sidechain border color, and workflow-phase-color changes across repeated workflow rendering blocks.
Fold control browser and unit tests test/test_params_rows_toggle_browser.py, test/test_params_table_hybrid.py	Updated selectors for .tool-param-fold-controls and .tool-param-key-toggle; added key-column toggle cycle test with aria-expanded validation and a11y constraint that no interactive elements appear in <summary>. Updated hybrid-table assertions for fold-glyph alignment and keyed-toggle rendering.
Workflow sidechannel and browser integration tests test/test_workflow_sidechannel_user.py, test/test_workflow_browser.py	New test module covers JSON extraction (successful and edge cases), collapsible Markdown + params-table rendering, long-prompt details/summary wrapping, and fixture integration. Added CSS border/alignment and phase-pill navigation browser tests.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

• daaain/claude-code-log#216: Both PRs modify the tool-params table rendering and fold UI structure (tool_formatters.py, transcript.html, message_styles.css), with this PR extending the reusable params-table infrastructure for workflow sidechannel JSON embedding.
• daaain/claude-code-log#210: This PR's addition of TemplateMessage.in_workflow_sidechannel and sidechannel-specific rendering is directly tied to PR #210's splicing and grafting of workflow agent side-channel transcript nodes into the main rendering context.
• daaain/claude-code-log#215: Both PRs modify workflow-level CSS variables and sidechain-group border styling (global_styles.css, message_styles.css sidechain selectors, and .sidechain nesting rules) affecting phase and agent group display.

Suggested reviewers

• daaain

Poem

🐰 I nibble bytes and tidy rows,

extracting JSON where it grows.
Keys get buttons, summaries stay clear,
glyphs in sync — hooray, my dear!
Side-channel prose turns tables bright.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 34.55% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main changes: side-channel prompt rendering, params-fold UX improvements, and accessibility enhancements, accurately reflecting the primary objectives of this follow-up PR.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dev/wf-sidechannel-json

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@dev-docs/workflows.md`:
- Around line 160-166: The docs for extract_embedded_json in
html/user_formatters.py (used by format_workflow_sidechannel_user_content) are
missing the contract detail that only non-empty JSON arrays/objects are
extracted; empty payloads like {} and [] are intentionally left inline even
though json.loads would accept them — update the sentence describing extraction
to explicitly state that extraction only occurs for non-empty dict/list payloads
and that empty {} / [] remain inline.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5ab1ecf5-631d-4c8a-9720-cf877df061e2

📥 Commits

Reviewing files that changed from the base of the PR and between a049975 and ecf9007.

📒 Files selected for processing (16)

• claude_code_log/html/renderer.py
• claude_code_log/html/templates/components/global_styles.css
• claude_code_log/html/templates/components/message_styles.css
• claude_code_log/html/templates/transcript.html
• claude_code_log/html/tool_formatters.py
• claude_code_log/html/user_formatters.py
• claude_code_log/renderer.py
• dev-docs/css-classes.md
• dev-docs/workflows.md
• scripts/gen_workflow_fixture.py
• test/__snapshots__/test_snapshot_html.ambr
• test/test_data/workflow_basic/11110000-0000-4000-8000-000000000001/subagents/workflows/wf_demo01/agent-ag000001.jsonl
• test/test_params_rows_toggle_browser.py
• test/test_params_table_hybrid.py
• test/test_workflow_browser.py
• test/test_workflow_sidechannel_user.py