feat: Compact transparent tool cards with grouped assistant messages

- Redesign all tool cards (Edit, Read, Bash, Grep, Glob, Write) to be
  compact single-line headers with inline key info and toggle buttons
- Make cards and bubbles fully transparent with subtle color tints
- Remove borders, use only left accent bar per card type
- Color-code numbers: red for removals, green for additions/counts
- Simplify ToolResultBlock to render content directly without toggle
- Group consecutive assistant messages, showing header only on first
- Remove borders from assistant and user message bubbles
This commit is contained in:
2026-02-19 03:12:17 -06:00
parent 4ab1d03370
commit 06b48ebda3
12 changed files with 868 additions and 1072 deletions

View File

@@ -33,10 +33,10 @@ function formatTime(ts: string): string {
<style scoped>
.user-bubble {
background: rgba(99, 102, 241, 0.04);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(99, 102, 241, 0.12);
background: transparent;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: none;
border-radius: 12px;
padding: 0.75rem 1rem;
margin-left: 2rem;
@@ -51,9 +51,9 @@ function formatTime(ts: string): string {
/* Optimistic / sending state */
.user-bubble.optimistic {
opacity: 0.7;
border-color: rgba(99, 102, 241, 0.12);
border-color: rgba(99, 102, 241, 0.08);
border-style: dashed;
background: rgba(99, 102, 241, 0.04);
background: transparent;
}
.sending-badge {