Add WebFetch tool renderer

[cboos]

Summary

Add rendering support for the WebFetch tool:

• WebFetchInput/WebFetchOutput models with URL, prompt, and metadata (HTTP status, bytes, duration)
• Parser using toolUseResult for rich metadata extraction
• HTML formatter with metadata badge and collapsible markdown result
• Markdown formatter with metadata line and blockquoted result (no collapsible - results are AI summaries)
• CSS styles for webfetch-* classes
• 22 tests covering all functionality
• • project skill "tool-renderer", to ease the creation of new specialized tool renderers

Test plan

• All unit tests pass (just test)
• Visual inspection of WebFetch rendering in generated HTML

Summary by CodeRabbit

• New Features

  • Added WebFetch tool: fetches web content with HTML and Markdown rendering, titles with URL display/truncation, metadata badges, and collapsible results.

• Style

  • Introduced UI styles for WebFetch prompts, metadata/status badges, size and duration labels, and layout adjustments.

• Documentation

  • Added a comprehensive guide for building tool renderers, wiring, formatting, and testing checklists.

• Tests

  • Added unit and end-to-end tests and updated snapshots for WebFetch parsing and rendering.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds WebFetch tool support across models, factory parsers (tool_use_result-aware), HTML/Markdown formatters and renderer hooks, CSS styles, tests, and a new renderer-authoring guide.

Changes

Cohort / File(s)	Summary
Documentation .claude/skills/tool-renderer/SKILL.md	New guide describing how to implement a tool renderer (models, factory, HTML/Markdown integration, wiring, tests, and checklist).
Core Models claude_code_log/models.py	Added WebFetchInput and WebFetchOutput and included them in ToolInput/ToolOutput unions.
Tool Factory & Parsing claude_code_log/factories/tool_factory.py	Added parse_webfetch_output, registered WebFetch in TOOL_OUTPUT_PARSERS, introduced PARSERS_WITH_TOOL_USE_RESULT, and extended create_tool_output / create_tool_result_message signatures to accept/propagate tool_use_result.
HTML Rendering & Styling claude_code_log/html/__init__.py, claude_code_log/html/renderer.py, claude_code_log/html/tool_formatters.py, claude_code_log/html/templates/components/message_styles.css	Added format_webfetch_input/format_webfetch_output, renderer methods (format_WebFetchInput/Output, title_WebFetchInput), exported new formatters, and added .webfetch-* CSS rules (some duplicated in snapshots).
Markdown Rendering claude_code_log/markdown/renderer.py	Added format_WebFetchInput/format_WebFetchOutput and title_WebFetchInput with long-prompt, metadata (bytes/code/duration), and title truncation logic.
Tests & Snapshots test/test_webfetch_rendering.py, test/__snapshots__/test_snapshot_html.ambr	New comprehensive test suite covering parsing (with/without toolUseResult), HTML/Markdown rendering, end-to-end transcript rendering, and snapshot CSS additions.

Sequence Diagram(s)

(omitted)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Add Markdown renderer #71 — overlaps renderer/formatter and model changes that this PR extends; likely touches same rendering surfaces.
• Consolidate Rendering Architecture #74 — related consolidation of rendering architecture and dispatch patterns used here.
• Add WebSearch tool renderer with structured parsing #83 — parallel changes to parsing/renderer infra for another web tool; similar codepaths modified.

Suggested reviewers

• daaain

Poem

🥕 I hop with a curl of whiskered cheer,
WebFetch blooms with badges bright and clear,
Prompts shrink or stretch, results tucked in a fold,
HTML and Markdown dressed in styles bold,
Tests drum a rhythm as the rabbit tells the tale.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title 'Add WebFetch tool renderer' is clear, concise, and directly summarizes the main change—adding WebFetch tool rendering functionality across models, parsers, formatters, and tests.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dev/webfetch-tool-renderer

---

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.}

[lifeinchords]

awesome feature, are there any blockers?

[daaain]

Haven't got a chance to test, but code structure looks good!

[daaain]

@lifeinchords don't think there are any blockers, the branch will need to be rebased after the WebSearch tool rendering PR got merged, but nothing big.

If you have a few minutes, you can check out the branch and re-render some of your logs using it and see if it does what you expect and post if you have any feedback.

[lifeinchords]

@daaain Looks great! 🚀

[daaain]

Thanks for the screenshot, I just noticed that the HTML status code is a bit jumbled together with some other info:

[lifeinchords]

Looks great, thanks!