Skip to content

feat(response-viewer): ASCII diagram wrap toggle, mobile code blocks, chrome-stripping fallback#75

Open
TeigenZhang wants to merge 7 commits intoArk0N:masterfrom
TeigenZhang:feat/response-viewer-enhancements
Open

feat(response-viewer): ASCII diagram wrap toggle, mobile code blocks, chrome-stripping fallback#75
TeigenZhang wants to merge 7 commits intoArk0N:masterfrom
TeigenZhang:feat/response-viewer-enhancements

Conversation

@TeigenZhang
Copy link
Copy Markdown
Contributor

Summary

Seven small commits that polish the Response Viewer (merged in #62) for daily use on mobile and desktop:

  • Card-style message separation + table wrap (89a79a3) — messages get bordered cards; tables wrap in a horizontal-scroll container so they don't collapse on narrow viewports.
  • ANSI/CLI-chrome stripping fallback (30b802b) — when the JSONL transcript isn't available, the viewer falls back to the terminal buffer; strip ANSI CSI/OSC/DCS, status bar, hints, spinner, and progress-bar glyphs so what the user sees is conversational text, not the TUI. Also captures the Claude CLI's real session ID for transcript lookup.
  • Mobile code-block wrap (0bb4b85) — regular code blocks wrap on mobile by default (no more sideways scroll for every snippet); ASCII diagrams stay rigid with a horizontal scroll hint.
  • Per-block wrap toggle (440b5c0) — add a toggle button on code blocks identified as ASCII diagrams so the user can flip between wrap (readable) and horizontal scroll (structure preserved).
  • Wrap-by-default + pinned toggle button (dfe1dd9) — wrap is now the default; the toggle button lives outside the <pre> scroll container so it stays pinned to the visual right edge even while scrolling horizontally.
  • Narrow diagram detection (e777ed9) — only box-drawing (─-╿) and block elements (▀-▟) trigger the diagram toggle. Previously arrows and geometric shapes in prose caused false positives.
  • Desktop eye icon (49139d3) — the Response Viewer entry point now shows on desktop too (was mobile-only).

All changes are additive to _renderMarkdown / _cleanTerminalBuffer / _preprocessAsciiArt in app.js plus scoped CSS under .rv-* in styles.css. _sanitizeHtml (introduced in master) is still applied to markdown output.

Test plan

  • Narrow mobile viewport: regular code blocks wrap, long responses scroll vertically only
  • ASCII diagram block shows wrap toggle; clicking flips wrap ↔ horizontal scroll
  • Table in response wraps in a scroll container instead of overflowing
  • When transcript file is missing, viewer shows clean conversation text (no ANSI, no TUI chrome)
  • Desktop browser shows the eye icon next to session tabs
  • npm run typecheck / npm run lint / npm run build pass

Teigen added 7 commits April 24, 2026 09:50
…ripping in response viewer fallback

Session constructor seeded _claudeSessionId with Codeman's session.id as a
placeholder, and the message-driven update was gated on !_claudeSessionId —
meaning Claude CLI's actual session UUID was never adopted. This broke
/api/sessions/:id/last-response JSONL lookups, silently falling through to
the terminal-buffer path whose ANSI regex missed \x1b[>c / \x1b[>q queries.

- session.ts: update _claudeSessionId whenever a message's session_id differs
  from current (covers placeholder and stale-resume cases)
- app.js: extract _cleanTerminalBuffer with proper CSI regex (param bytes
  0x30-0x3F now covers > ? < =) plus a chrome filter for status bar,
  progress bar, spinner, shell prompt, and hint lines
The response viewer button was mobile-only via a display:none default with a
mobile.css override. Flip the default to inline-flex and drop the override so
the eye icon appears in the header on every form factor — desktop users get
the same quick "Last Response" pane as mobile.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant