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:
parent
0225fdf3c9
commit
8248d465df
7 changed files with 583 additions and 424 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue