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

ui-electrobun/src/mainview/ChatInput.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  interface Props {
+    value: string;
+    model?: string;
+    disabled?: boolean;
+    onSend?: () => void;
+    onInput?: (v: string) => void;
+  }
+
+  let { value, model = 'claude-opus-4-5', disabled = false, onSend, onInput }: Props = $props();
+
+  let textareaEl: HTMLTextAreaElement;
+
+  function autoResize() {
+    if (!textareaEl) return;
+    textareaEl.style.height = 'auto';
+    textareaEl.style.height = Math.min(textareaEl.scrollHeight, 200) + 'px';
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (value.trim()) onSend?.();
+    }
+  }
+
+  function handleInput(e: Event) {
+    onInput?.((e.target as HTMLTextAreaElement).value);
+    autoResize();
+  }
+</script>
+
+<div class="chat-input-outer">
+  <textarea
+    bind:this={textareaEl}
+    class="chat-textarea"
+    placeholder="Ask Claude anything..."
+    rows="1"
+    {value}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+    aria-label="Message input"
+  ></textarea>
+
+  <div class="footer-strip">
+    <!-- Left: attach + model -->
+    <button class="footer-btn attach-btn" aria-label="Attach file" title="Attach">
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path d="M3 8l5-5a3.5 3.5 0 015 5l-6 6a2 2 0 01-3-3l5-5a.5.5 0 01.7.7L5 11.3a1 1 0 001.4 1.4l6-6a2.5 2.5 0 00-3.5-3.5L3.7 8.7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+      </svg>
+    </button>
+    <span class="model-label">{model}</span>
+
+    <!-- Right: divider + send -->
+    <span class="footer-spacer"></span>
+    <span class="footer-divider" aria-hidden="true"></span>
+    <button
+      class="send-btn"
+      onclick={onSend}
+      disabled={disabled || !value.trim()}
+      aria-label="Send message"
+      title="Send (Enter)"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+        <path d="M10 15V5M10 5L6 9M10 5l4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+  </div>
+</div>
+
+<style>
+  .chat-input-outer {
+    background: var(--ctp-crust);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .chat-textarea {
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    color: var(--ctp-text);
+    font-family: var(--ui-font-family);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    padding: 0.625rem 0.875rem;
+    min-height: 2.5rem;
+    max-height: 12.5rem;
+    overflow-y: auto;
+    width: 100%;
+    transition: box-shadow 0.12s, border-color 0.12s;
+  }
+
+  .chat-textarea:focus {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctp-peach) 12%, transparent);
+  }
+
+  .chat-textarea::placeholder {
+    color: var(--ctp-subtext0);
+  }
+
+  .chat-textarea::-webkit-scrollbar { width: 0.25rem; }
+  .chat-textarea::-webkit-scrollbar-thumb { background: var(--ctp-surface1); border-radius: 0.25rem; }
+
+  /* Footer strip */
+  .footer-strip {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+    padding: 0.3125rem;
+    border-top: 0.5px solid var(--ctp-surface1);
+  }
+
+  .footer-btn {
+    background: transparent;
+    border: none;
+    color: var(--ctp-overlay1);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.12s, background 0.12s;
+  }
+
+  .footer-btn:hover {
+    color: var(--ctp-text);
+    background: var(--ctp-surface0);
+  }
+
+  .model-label {
+    font-size: 0.85em;
+    color: var(--ctp-overlay1);
+    padding: 0 0.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 8rem;
+  }
+
+  .footer-spacer { flex: 1; }
+
+  .footer-divider {
+    width: 1px;
+    height: 1rem;
+    background: var(--ctp-surface1);
+    margin: 0 0.25rem;
+    flex-shrink: 0;
+  }
+
+  .send-btn {
+    width: 26px;
+    height: 26px;
+    background: var(--ctp-peach);
+    border: none;
+    border-radius: 5px;
+    color: #f5efe6;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: filter 0.12s;
+  }
+
+  .send-btn:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .send-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>