docs: update documentation, changelog, and readme for TUI diff view

Author: bug-ops

CHANGELOG.md

@@ -7,6 +7,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ## [Unreleased]
 
 ### Added
+- Syntax-highlighted diff view for write/edit tool output in TUI (#451)
+  - Diff rendering with green/red backgrounds for added/removed lines
+  - Word-level change highlighting within modified lines
+  - Syntax highlighting via tree-sitter
+  - Compact/expanded toggle with existing 'e' key binding
+  - New dependency: `similar` 2.7.0
 - Smart tool output filtering: command-aware filters that compress tool output before context insertion
 - `OutputFilter` trait and `OutputFilterRegistry` with first-match-wins dispatch
 - `sanitize_output()` ANSI escape and progress bar stripping (runs on all tool output)

README.md

@@ -118,7 +118,7 @@ cargo build --release --features tui
 | **Skill Trust & Quarantine** | 4-tier trust model (Trusted/Verified/Quarantined/Blocked) with blake3 integrity verification, anomaly detection with automatic blocking, and restricted tool access for untrusted skills | |
 | **Prompt Caching** | Automatic prompt caching for Anthropic and OpenAI providers, reducing latency and cost on repeated context | |
 | **Graceful Shutdown** | Ctrl-C triggers ordered teardown with MCP server cleanup and pending task draining | |
-| **TUI Dashboard** | ratatui terminal UI with tree-sitter syntax highlighting, markdown rendering, deferred model warmup, scrollbar, mouse scroll, thinking blocks, conversation history, splash screen, live metrics, message queueing (max 10, FIFO with Ctrl+K clear) | [TUI](https://bug-ops.github.io/zeph/guide/tui.html) |
+| **TUI Dashboard** | ratatui terminal UI with tree-sitter syntax highlighting, markdown rendering, syntax-highlighted diff view for write/edit tool output (compact/expanded toggle), deferred model warmup, scrollbar, mouse scroll, thinking blocks, conversation history, splash screen, live metrics, message queueing (max 10, FIFO with Ctrl+K clear) | [TUI](https://bug-ops.github.io/zeph/guide/tui.html) |
 | **Multi-Channel I/O** | CLI, Discord, Slack, Telegram, and TUI with streaming support | [Channels](https://bug-ops.github.io/zeph/guide/channels.html) |
 | **Defense-in-Depth** | Shell sandbox with relative path traversal detection, file sandbox, command filter, secret redaction (Google/GitLab patterns), audit log, SSRF protection (agent + MCP), rate limiter TTL eviction, doom-loop detection, skill trust quarantine | [Security](https://bug-ops.github.io/zeph/security.html) |
 

docs/src/guide/tui.md

@@ -62,6 +62,7 @@ ZEPH_TUI=true zeph
 | `Page Up/Down` | Scroll chat one page |
 | `Home` / `End` | Scroll to top / bottom |
 | `Mouse wheel` | Scroll chat up/down (3 lines per tick) |
+| `e` | Toggle expanded/compact view for tool output and diffs |
 | `d` | Toggle side panels on/off |
 | `Tab` | Cycle side panel focus |
 
@@ -103,6 +104,25 @@ Chat messages are rendered with full markdown support via `pulldown-cmark`:
 | `~~strikethrough~~` | Crossed-out modifier |
 | `---` | Horizontal rule (─) |
 
+## Diff View
+
+When the agent uses write or edit tools, the TUI renders file changes as syntax-highlighted diffs directly in the chat panel. Diffs are computed using the `similar` crate (line-level) and displayed with visual indicators:
+
+| Element | Rendering |
+|---------|-----------|
+| Added lines | Green `+` gutter, green background |
+| Removed lines | Red `-` gutter, red background |
+| Context lines | No gutter marker, default background |
+| Header | File path with `+N -M` change summary |
+
+Syntax highlighting (via tree-sitter) is preserved within diff lines for supported languages (Rust, Python, JavaScript, JSON, TOML, Bash).
+
+### Compact and Expanded Modes
+
+Diffs default to **compact mode**, showing a single-line summary (file path with added/removed line counts). Press `e` to toggle **expanded mode**, which renders the full line-by-line diff with syntax highlighting and colored backgrounds.
+
+The same `e` key toggles between compact and expanded for tool output blocks as well.
+
 ## Thinking Blocks
 
 When using Ollama models that emit reasoning traces (DeepSeek, Qwen), the `<think>...</think>` segments are rendered in a darker color (DarkGray) to visually separate model reasoning from the final response. Incomplete thinking blocks during streaming are also shown in the darker style.