Yippee-ki-yay, maintainer: auto-collapse long code blocks + linkify file paths#3
Open
philipmaymin wants to merge 1 commit into
Open
Yippee-ki-yay, maintainer: auto-collapse long code blocks + linkify file paths#3philipmaymin wants to merge 1 commit into
philipmaymin wants to merge 1 commit into
Conversation
Two small UX tweaks to MessageView that have been helpful in daily use. Posting them so the project can cherry-pick either or both if they fit. 1. collapseCodeBlocks Walks rendered <pre> blocks after markdown rendering. Any block with >=25 lines collapses to a max-height of ~360px with a soft fade overlay, and gets a "Show N more lines" button that toggles to "Collapse". This keeps the transcript skimmable when tool output dumps a long file. Uses existing theme CSS vars (--bg-secondary, --border-medium, --link, --bg-surface) so it inherits whatever palette is active. 2. fixLinks enhancement The original fixLinks only retargeted existing <a> to open in a new tab. This version also walks text nodes and linkifies absolute paths matching /home|/opt|/tmp|/var|/etc|/usr|~/, routing them through /api/file (the endpoint already added in the PDF viewer / file-serving commit). For image extensions (png/jpg/jpeg/gif/webp/svg/bmp) it also inserts an inline <img> preview under the link, clickable to open the lightbox. Non-image paths just become normal target=_blank links. Skips text inside code blocks and existing anchors so it won't double-link. No backend changes needed. Both features piggyback on /api/file which already exists upstream. CSS is scoped and uses existing theme vars. Author: john maclaine
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
1 participant
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.
Come out to the coast, we'll get together, have a few laughs.
Two small
MessageView.tsxtweaks from a downstream fork, submitted for cherry-pick. No backend changes. CSS uses existing theme vars from the theme refactor.1. Auto-collapse long code blocks — "Welcome to the party, pal"
You know what's worse than Hans Gruber? Scrolling past a 500-line JSON dump to get back to the conversation.
collapseCodeBlocks(el)runs after markdown rendering. Any<pre>with >=25 lines gets:Under 25 lines: renders as before. No harm, no foul.
Why it's a good default: tool output dumps are disproportionately common in Claude transcripts. Collapsing by default keeps the transcript scrollable, full content still one click away.
2. Linkify absolute file paths — "Now I have a file path. Ho-ho-ho."
Claude constantly name-drops paths in prose: "I modified
/home/user/project/src/foo.ts" or "logs at/var/log/app.log". Today they render as plain text. Hans Gruber would be unimpressed.fixLinks(el, onImageClick)now walks text nodes and linkifies absolute paths matching/home|/opt|/tmp|/var|/etc|/usr|~/. Routed through the existing/api/file?path=...endpoint (already added in the PDF viewer commit).Image extensions (png/jpg/jpeg/gif/webp/svg/bmp) get an inline preview below the link, click-to-zoom via the lightbox.
Skips: text inside
<pre><code>(fenced code stays as code); existing anchors (no double-linking). Inline<code>stays eligible so`path in backticks`remains clickable.Why it's a good default: zero-friction terminal-to-file navigation. Image auto-preview is especially nice for generated screenshots/plots. Nakatomi Plaza-tier UX upgrade for near-zero code.
Scope
frontend/src/components/MessageView.tsx--bg-secondary,--border-medium,--link,--bg-surfaceBuilt clean against
origin/main(c23c762).Held back (not in this PR)
Downstream has opinionated stuff that's staying put: a single-user
server-single.jsbehind Authelia, full-text session search, a staged-update flow, a cwd/model/token status bar, a Claude-question popup panel, terminal copy/paste toolbar, iOS keyboard fixes. If any of those sound interesting, happy to split further.Submitted by john maclaine — just a beat cop from NYPD, wrong place, wrong time, wrong fork account. Come out to the Coast, we'll cherry-pick a few commits, have a few laughs.
Yippee-ki-yay, maintainer.