From 71fbc6950487364e0e618e306b86a1c3929292c6 Mon Sep 17 00:00:00 2001 From: Christian Boos Date: Mon, 15 Dec 2025 00:48:19 +0100 Subject: [PATCH 1/2] Improve thinking content styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove background color and border for cleaner look - Add italic font style to distinguish thinking from regular content - Add font-size: 80% for visual hierarchy - Reset em tags to normal within italic content 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../templates/components/message_styles.css | 8 +++-- test/__snapshots__/test_snapshot_html.ambr | 32 ++++++++++++++----- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/claude_code_log/html/templates/components/message_styles.css b/claude_code_log/html/templates/components/message_styles.css index e7a4f30d..c47d7643 100644 --- a/claude_code_log/html/templates/components/message_styles.css +++ b/claude_code_log/html/templates/components/message_styles.css @@ -737,8 +737,12 @@ pre > code { } .thinking-content { - background-color: var(--thinking-dimmed); - border-left: #66666688 1px solid; + font-style: italic; + font-size: 80%; +} + +.thinking-content em { + font-style: normal; } .thinking-text { diff --git a/test/__snapshots__/test_snapshot_html.ambr b/test/__snapshots__/test_snapshot_html.ambr index a86d0a8c..b09a98ae 100644 --- a/test/__snapshots__/test_snapshot_html.ambr +++ b/test/__snapshots__/test_snapshot_html.ambr @@ -2829,8 +2829,12 @@ } .thinking-content { - background-color: var(--thinking-dimmed); - border-left: #66666688 1px solid; + font-style: italic; + font-size: 80%; + } + + .thinking-content em { + font-style: normal; } .thinking-text { @@ -7623,8 +7627,12 @@ } .thinking-content { - background-color: var(--thinking-dimmed); - border-left: #66666688 1px solid; + font-style: italic; + font-size: 80%; + } + + .thinking-content em { + font-style: normal; } .thinking-text { @@ -12507,8 +12515,12 @@ } .thinking-content { - background-color: var(--thinking-dimmed); - border-left: #66666688 1px solid; + font-style: italic; + font-size: 80%; + } + + .thinking-content em { + font-style: normal; } .thinking-text { @@ -17439,8 +17451,12 @@ } .thinking-content { - background-color: var(--thinking-dimmed); - border-left: #66666688 1px solid; + font-style: italic; + font-size: 80%; + } + + .thinking-content em { + font-style: normal; } .thinking-text { From 2c047823d4631fc62bf1627bcf2d914eccf38842 Mon Sep 17 00:00:00 2001 From: Christian Boos Date: Mon, 15 Dec 2025 19:22:50 +0100 Subject: [PATCH 2/2] Improve command output styling consistency MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove redundant "Command output" title from slash and bash outputs - Use normal user border color for slash commands (was dimmed) - Use 💻 emoji for bash commands (consistent with IDE tags) - Normalize command output background to match bash output - Add compact padding for pre.command-output-content 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../templates/components/message_styles.css | 11 +++-- claude_code_log/html/utils.py | 2 +- claude_code_log/renderer.py | 4 +- test/__snapshots__/test_snapshot_html.ambr | 46 ++++++++++++------- 4 files changed, 39 insertions(+), 24 deletions(-) diff --git a/claude_code_log/html/templates/components/message_styles.css b/claude_code_log/html/templates/components/message_styles.css index c47d7643..aa739996 100644 --- a/claude_code_log/html/templates/components/message_styles.css +++ b/claude_code_log/html/templates/components/message_styles.css @@ -296,8 +296,7 @@ /* Slash command prompts (isMeta=true, LLM-generated content) */ .user.slash-command { - border-left-color: var(--user-dimmed); - opacity: 0.85; + border-left-color: var(--user-color); } .assistant { @@ -388,8 +387,8 @@ /* Command output styling */ .command-output { - background-color: #1e1e1e11; - border-left-color: var(--warning-dimmed); + background-color: var(--highlight-light); + border-left-color: var(--user-color); } .command-output-content { @@ -416,6 +415,10 @@ padding: 0 1em; } +.content pre.command-output-content { + padding: .5em; +} + /* Bash command styling (user-initiated, right-aligned) */ .bash-input { background-color: var(--highlight-light); diff --git a/claude_code_log/html/utils.py b/claude_code_log/html/utils.py index 8a99edbb..72e1f903 100644 --- a/claude_code_log/html/utils.py +++ b/claude_code_log/html/utils.py @@ -89,7 +89,7 @@ def get_message_emoji(msg: "TemplateMessage") -> str: return "" return "🤷" elif msg_type == "bash-input": - return "🤷" + return "💻" elif msg_type == "assistant": if msg.modifiers.is_sidechain: return "🔗" diff --git a/claude_code_log/renderer.py b/claude_code_log/renderer.py index 8e49471b..02bf573a 100644 --- a/claude_code_log/renderer.py +++ b/claude_code_log/renderer.py @@ -672,7 +672,7 @@ def _process_local_command_output( # If parsing fails, content will be None and caller will handle fallback message_type = "user" - message_title = "Command output" + message_title = "" return modifiers, content, message_type, message_title @@ -702,7 +702,7 @@ def _process_bash_output( # If parsing fails, content will be None - caller/renderer handles empty output message_type = "bash-output" - message_title = "Command output" + message_title = "" return modifiers, content, message_type, message_title diff --git a/test/__snapshots__/test_snapshot_html.ambr b/test/__snapshots__/test_snapshot_html.ambr index b09a98ae..c2b71c39 100644 --- a/test/__snapshots__/test_snapshot_html.ambr +++ b/test/__snapshots__/test_snapshot_html.ambr @@ -2388,8 +2388,7 @@ /* Slash command prompts (isMeta=true, LLM-generated content) */ .user.slash-command { - border-left-color: var(--user-dimmed); - opacity: 0.85; + border-left-color: var(--user-color); } .assistant { @@ -2480,8 +2479,8 @@ /* Command output styling */ .command-output { - background-color: #1e1e1e11; - border-left-color: var(--warning-dimmed); + background-color: var(--highlight-light); + border-left-color: var(--user-color); } .command-output-content { @@ -2508,6 +2507,10 @@ padding: 0 1em; } + .content pre.command-output-content { + padding: .5em; + } + /* Bash command styling (user-initiated, right-aligned) */ .bash-input { background-color: var(--highlight-light); @@ -7186,8 +7189,7 @@ /* Slash command prompts (isMeta=true, LLM-generated content) */ .user.slash-command { - border-left-color: var(--user-dimmed); - opacity: 0.85; + border-left-color: var(--user-color); } .assistant { @@ -7278,8 +7280,8 @@ /* Command output styling */ .command-output { - background-color: #1e1e1e11; - border-left-color: var(--warning-dimmed); + background-color: var(--highlight-light); + border-left-color: var(--user-color); } .command-output-content { @@ -7306,6 +7308,10 @@ padding: 0 1em; } + .content pre.command-output-content { + padding: .5em; + } + /* Bash command styling (user-initiated, right-aligned) */ .bash-input { background-color: var(--highlight-light); @@ -9842,7 +9848,7 @@
- Command output +
2025-06-14 11:02:20 @@ -12074,8 +12080,7 @@ /* Slash command prompts (isMeta=true, LLM-generated content) */ .user.slash-command { - border-left-color: var(--user-dimmed); - opacity: 0.85; + border-left-color: var(--user-color); } .assistant { @@ -12166,8 +12171,8 @@ /* Command output styling */ .command-output { - background-color: #1e1e1e11; - border-left-color: var(--warning-dimmed); + background-color: var(--highlight-light); + border-left-color: var(--user-color); } .command-output-content { @@ -12194,6 +12199,10 @@ padding: 0 1em; } + .content pre.command-output-content { + padding: .5em; + } + /* Bash command styling (user-initiated, right-aligned) */ .bash-input { background-color: var(--highlight-light); @@ -17010,8 +17019,7 @@ /* Slash command prompts (isMeta=true, LLM-generated content) */ .user.slash-command { - border-left-color: var(--user-dimmed); - opacity: 0.85; + border-left-color: var(--user-color); } .assistant { @@ -17102,8 +17110,8 @@ /* Command output styling */ .command-output { - background-color: #1e1e1e11; - border-left-color: var(--warning-dimmed); + background-color: var(--highlight-light); + border-left-color: var(--user-color); } .command-output-content { @@ -17130,6 +17138,10 @@ padding: 0 1em; } + .content pre.command-output-content { + padding: .5em; + } + /* Bash command styling (user-initiated, right-aligned) */ .bash-input { background-color: var(--highlight-light);