patterns: add a trace panel to session-explainer - #47
Merged
Conversation
Highlights is an editorial gloss and the dead-end cards are narrative. Neither shows what happened in sequence, which is what a reader asks for first and the part hardest to fake. A third tab now carries that. The design came out of counting rather than taste. In the session that produced this pattern the human's side is 38 prompts and ~1,600 words, against a 12.2 MB transcript: about 0.08% of the bytes. So the rule is ship the input whole and budget the output. Every prompt appears complete; the agent's reply is collapsed with its first line as the preview and a word count on the toggle; tool results are excluded entirely, because they are nearly all of the weight and almost none of the meaning. "Verbatim" is dropped as the promise, because it can't survive contact with a real session. Three problems, three answers, and the page has to say which it used: typos fixed silently, no information in them rambling, changes of mind kept — that IS the thinking trail sensitive spans cut and MARKED, never silently reworded An unmarked edit makes every other line unverifiable, which costs more than the cut saves. Turns that were touched carry a per-turn marker. The redaction floor now says to scan the agent's replies, not just the prompts. That is the part that gets missed, and building this panel proved it: the first render leaked an employer name, a job title, a customer's real name and an internal URL — every one of them from a reply rather than a prompt, because the agent restated them while being helpful. Third parties and the human's own employer are now cut by default. Template: third tab, the trace styles, and a one-turn skeleton to copy. The default-active tab rule now excludes #p3 explicitly. It has to: `:not(:has(#id))` inherits the id's specificity, so adding a tab without adding it to that chain leaves two tabs highlighted, which is exactly what happened. The e2e asserts the chain rather than the symptom. Verified: tsc clean, 152 e2e checks pass (was 148). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
🚀 Cloudflare previewURL: https://1a018ace-htmlbin.utkarsh2012.workers.dev Built from commit
|
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.
Why
Highlights is my editorial gloss. The dead-end cards are narrative. Neither shows what actually happened, in sequence — which is the first thing a reader asks for, and the part hardest to fake.
A third tab now carries it.
The design came from counting, not taste
So the rule is ship the input whole and budget the output:
"Verbatim" is dropped as the promise
It doesn't survive a real session: prompts have typos, and sessions occasionally touch things that shouldn't be published. Three problems, three answers, stated on the page:
An unmarked edit makes every other line on the page unverifiable, which costs more credibility than the cut saves. Touched turns carry a per-turn marker.
The redaction floor now covers the agent's side
This is the find worth reading. Building the panel leaked an employer name, a job title, a customer's real name and an internal URL on the very first render — every one from a reply, not a prompt, because the agent restated them while being helpful.
Prompts get read carefully; they're short and the human wrote them. The agent's side is 15× longer and nobody re-reads it. The floor now says to scan both, and third parties plus the human's own employer are cut by default.
The tab bug this exposed
Adding a third tab left two tabs highlighted. Cause: the default-active rule is
.tabs:not(:has(#p2:target)):not(:has(.card:target)) … a.h, and:not(:has(#id))inherits the id's specificity — so it outranks any later override that tries to switch Highlights off.Fixed by making the condition correct rather than patching over it, and the e2e asserts the
:not()chain rather than the symptom, so the next tab can't repeat it.Verification
npx tsc --noEmitcleannpm run test:e2e— all 152 checks pass (was 148)Companion CLI PR vendors the updated pattern + template.
🤖 Generated with Claude Code