feat(electrobun): redesign AgentPane to match Claude Code VSCode extension

Based on official Claude Code v2.1.79 webview CSS analysis:
- Timeline pattern: 7px dots + 1px vertical line, 30px content indent
- User messages: left-aligned inline blocks (not right-aligned bubbles)
- Tool calls: flat bordered grid boxes with 60px mask-fade clipping
- Floating input: absolute bottom:16px, crust bg, 8px radius, shadow
- ChatInput.svelte extracted: auto-resize textarea, peach send button
  (26×26, 5px radius), focus ring with color-mix peach 12%
- Footer strip: model name + attach button + divider + send button
- Status strip: compact top bar with dot + status + model + cost
- 150px gradient fade at message area bottom
- fadeIn 0.3s animation on new messages
This commit is contained in:
Hibryda 2026-03-20 04:26:31 +01:00
parent 0225fdf3c9
commit 8248d465df
7 changed files with 583 additions and 424 deletions

View file

@ -4,8 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte App</title>
<script type="module" crossorigin src="/assets/index-DQr-K0KR.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BtkSUnsK.css">
<script type="module" crossorigin src="/assets/index-8IlHjlDZ.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-yFiSNunC.css">
</head>
<body>
<div id="app"></div>