feat(e2e): add data-testid attributes to 7 key Svelte components

Stable test selectors for E2E: agent-pane, data-agent-status,
project-box, data-project-id, status-bar, agent-session,
sidebar-rail, command-palette, terminal-tabs and more.

v2/src/lib/components/Agent/AgentPane.svelte

@@ -375,7 +375,7 @@
   });
 </script>
 
-<div class="agent-pane">
+<div class="agent-pane" data-testid="agent-pane" data-agent-status={session?.status ?? 'idle'}
   {#if parentSession}
     <div class="parent-link">
       <span class="parent-badge">SUB</span>
@@ -405,7 +405,7 @@
     {/if}
   {/if}
 
-  <div class="agent-pane-scroll" bind:this={scrollContainer} onscroll={handleScroll}>
+  <div class="agent-pane-scroll" data-testid="agent-messages" bind:this={scrollContainer} onscroll={handleScroll}>
     {#if !session || session.messages.length === 0}
       <div class="welcome-state">
         <div class="welcome-icon">
@@ -547,7 +547,7 @@
           {#if !autoScroll}
             <button class="scroll-btn" onclick={() => { autoScroll = true; scrollContainer?.querySelector('#message-end')?.scrollIntoView({ behavior: 'instant' as ScrollBehavior }); }}>↓ Bottom</button>
           {/if}
-          <button class="stop-btn" onclick={handleStop}>Stop</button>
+          <button class="stop-btn" data-testid="agent-stop" onclick={handleStop}>Stop</button>
         </div>
       {:else if session.status === 'done'}
         <div class="done-bar">
@@ -623,6 +623,7 @@
         bind:value={inputPrompt}
         placeholder={isRunning ? 'Agent is running...' : 'Ask Claude something... (/ for skills)'}
         class="prompt-input"
+        data-testid="agent-prompt"
         rows="1"
         disabled={isRunning}
         oninput={(e) => {
@@ -660,6 +661,7 @@
       ></textarea>
       <button
         class="submit-icon-btn"
+        data-testid="agent-submit"
         onclick={handleUnifiedSubmit}
         disabled={!inputPrompt.trim() || isRunning}
         aria-label="Send message"

v2/src/lib/components/StatusBar/StatusBar.svelte

@@ -42,7 +42,7 @@
   }
 </script>
 
-<div class="status-bar">
+<div class="status-bar" data-testid="status-bar">
   <div class="left">
     {#if activeGroup}
       <span class="item group-name" title="Active group">{activeGroup.name}</span>

v2/src/lib/components/Workspace/AgentSession.svelte

@@ -222,7 +222,7 @@
   }
 </script>
 
-<div class="agent-session">
+<div class="agent-session" data-testid="agent-session">
   {#if loading}
     <div class="loading-state">Loading session...</div>
   {:else}

v2/src/lib/components/Workspace/CommandPalette.svelte

@@ -43,11 +43,12 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="palette-backdrop" onclick={onclose} onkeydown={handleKeydown}>
     <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="palette" onclick={(e) => e.stopPropagation()} onkeydown={handleKeydown}>
+    <div class="palette" data-testid="command-palette" onclick={(e) => e.stopPropagation()} onkeydown={handleKeydown}>
       <input
         bind:this={inputEl}
         bind:value={query}
         class="palette-input"
+        data-testid="palette-input"
         placeholder="Switch group..."
         onkeydown={handleKeydown}
       />

v2/src/lib/components/Workspace/GlobalTabBar.svelte

@@ -20,7 +20,7 @@
   }
 </script>
 
-<nav class="sidebar-rail">
+<nav class="sidebar-rail" data-testid="sidebar-rail">
   <button
     class="rail-btn"
     class:active={getActiveTab() === 'comms' && expanded}
@@ -46,6 +46,7 @@
     class:active={getActiveTab() === 'settings' && expanded}
     onclick={() => handleTabClick('settings')}
     title="Settings (Ctrl+,)"
+    data-testid="settings-btn"
   >
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
       <path

v2/src/lib/components/Workspace/ProjectBox.svelte

@@ -163,6 +163,8 @@
   class="project-box"
   class:active
   style="--accent: var({accentVar})"
+  data-testid="project-box"
+  data-project-id={project.id}
 >
   <ProjectHeader
     {project}
@@ -172,7 +174,7 @@
     onclick={onactivate}
   />
 
-  <div class="project-tabs">
+  <div class="project-tabs" data-testid="project-tabs">
     <button
       class="ptab"
       class:active={activeTab === 'model'}
@@ -282,7 +284,7 @@
   </div>
 
   <div class="terminal-section" style:display={activeTab === 'model' ? 'flex' : 'none'}>
-      <button class="terminal-toggle" onclick={toggleTerminal}>
+      <button class="terminal-toggle" data-testid="terminal-toggle" onclick={toggleTerminal}>
         <span class="toggle-chevron" class:expanded={terminalExpanded}>
           <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
             <path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>

v2/src/lib/components/Workspace/TerminalTabs.svelte

@@ -94,7 +94,7 @@
   }
 </script>
 
-<div class="terminal-tabs">
+<div class="terminal-tabs" data-testid="terminal-tabs">
   <div class="tab-bar">
     {#each tabs as tab (tab.id)}
       <div
@@ -113,7 +113,7 @@
         >×</button>
       </div>
     {/each}
-    <button class="tab-add" onclick={addShellTab} title="New shell">+</button>
+    <button class="tab-add" data-testid="tab-add" onclick={addShellTab} title="New shell">+</button>
     {#if agentSessionId}
       <button
         class="tab-add tab-agent-preview"