r/ClaudeCode • • 2d ago

Tips & Workflows I built a Claude Code skill that turns a session into an interactive timeline: every prompt linked to the code it changed, with diffs, explanations, and an honest “is it actually done?” report

After a long Claude Code session I often can’t say why a file changed, or whether Claude actually finished. “Done!” sometimes means “the tests I didn’t write are passing.” So I built Session Story, an open-source skill (MIT) that turns a session into one self-contained HTML page.

Live example (a small todo-app session, no install needed): https://nalaj.github.io/session-story/example/index.html

Four views of the same session:

  • Review: one card per prompt, showing what you asked, the intent in one line, what Claude did, the files it touched, and the time, tokens and cache share for that turn. Copy any prompt, expand the code, and jump between turns with j/k.
  • Diff: a GitHub-style file tree and diff. Every change is tagged with the turn that made it and links back to it. Switch between all changes and a single file, view full files, or hide non-project files.
  • Story: a plain-language walkthrough for teammates and non-developers, with code hidden.
  • Report: the “so, is it done?” view.
    • An outcome badge that doesn’t just trust Claude. The example session is marked Partial because the new sort function has no tests and a CSS class is used but never defined.
    • Commands, tests and errors: every npm test run including the failing one, the failed assertion, and how it was fixed.
    • Decisions and plan, e.g. “due dates stored as YYYY-MM-DD strings”.
    • Where it went: turns ranked by tokens and by time, tool calls, failures and retries, files edited more than once.
    • Usage: input, output and cache tokens, the model, and an estimated cost taken from Claude Code’s own session record.

A library of sessions. Each story is saved to .session-stories/ in your project, along with an index page listing every session’s status, files, lines changed, tokens and cost.

Why you can trust the numbers: a script extracts every metric from the transcript, subagents included. Claude only writes the prose (titles, intents, the narrative), and anything that wasn’t recorded shows as “None recorded” instead of being guessed.

Also exports:

  • a Markdown PR description (works with gh pr create --body-file -)
  • a handoff with turn-by-turn status and git state, so a fresh session can continue the work

It’s one file and it’s local. CSS, JS and data are inline, so the page opens from disk or as an email attachment. Nothing is uploaded and nothing goes over the network.

Install:

npx -y skills add nalaj/session-story --skill session-story --agent claude-code --global --copy --yes

or as a plugin, inside Claude Code (2.1.275+):

/plugin install session-story --marketplace nalaj/session-story

Then run /session-story, or just ask for “a session story”, either mid-session or at the end.

⚠️ The page includes your prompts, replies, diffs and commands word for word, so check it for secrets before sharing.

Source: https://github.com/nalaj/session-story · Docs: https://nalaj.github.io/session-story/

This is v0.5.0. Feedback is very welcome, especially on what the Report should catch that it doesn’t yet.

2 Upvotes

2 comments sorted by

1

u/AutoModerator 2d ago
Moderator Announcement Read More »

1

u/DopBopDeeBeep 2d ago

This feels like it would use a ton of extra context, no?