chore: linter

src/lib/components/ConversationTabs.svelte

@@ -2,6 +2,7 @@
   import { claudeStore } from "$lib/stores/claude";
   import { onMount } from "svelte";
   import type { Conversation } from "$lib/stores/conversations";
+  import { SvelteMap } from "svelte/reactivity";
 
   let conversations: Map<string, Conversation> = new Map();
   let activeConversationId: string | null = null;
@@ -12,7 +13,7 @@
   let connectedConversationId: string | null = null;
 
   // Track last seen message count for each conversation
-  let lastSeenMessageCount: Map<string, number> = new Map();
+  let lastSeenMessageCount = new SvelteMap<string, number>();
 
   claudeStore.conversations.subscribe((convs) => {
     conversations = convs;
@@ -75,6 +76,11 @@
     event.stopPropagation();
     editingTabId = id;
     editingName = name;
+    // Focus input after DOM update
+    setTimeout(() => {
+      const input = document.querySelector('.tab-item input[type="text"]') as HTMLInputElement;
+      if (input) input.focus();
+    }, 0);
   }
 
   function saveTabName() {
@@ -113,6 +119,13 @@
     }
   }
 
+  function handleTabKeydown(id: string, event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      switchTab(id);
+    }
+  }
+
   // Keyboard shortcuts
   onMount(() => {
     function handleGlobalKeydown(event: KeyboardEvent) {
@@ -165,6 +178,7 @@
         ? 'bg-[var(--bg-terminal)] text-[var(--text-primary)] border-t border-l border-r border-[var(--border-color)]'
         : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:bg-[var(--bg-terminal)]/50'}"
       onclick={() => switchTab(id)}
+      onkeydown={(e) => handleTabKeydown(id, e)}
       role="tab"
       tabindex={0}
       aria-selected={id === activeConversationId}
@@ -177,22 +191,29 @@
           onkeydown={handleKeydown}
           onclick={(e) => e.stopPropagation()}
           class="bg-transparent border-b border-[var(--border-color)] outline-none px-0 py-0 text-sm w-32"
-          autofocus
         />
       {:else}
         <div class="flex items-center gap-2">
           <div
             class="w-2 h-2 rounded-full {getConnectionStatusColor(conversation.connectionStatus)}"
-            title="Connection: {conversation.connectionStatus}{id !== connectedConversationId && connectedConversationId ? ' (Another tab is connected)' : ''}"
-          />
+            title="Connection: {conversation.connectionStatus}{id !== connectedConversationId &&
+            connectedConversationId
+              ? ' (Another tab is connected)'
+              : ''}"
+          ></div>
           <span
             class="text-sm pr-6 max-w-[150px] truncate"
             ondblclick={(e) => startEditing(id, conversation.name, e)}
+            role="button"
+            tabindex={-1}
           >
             {conversation.name}
           </span>
           {#if id !== activeConversationId && id === connectedConversationId}
-            <span class="text-xs text-[var(--text-tertiary)]" title="This tab has the Claude connection">
+            <span
+              class="text-xs text-[var(--text-tertiary)]"
+              title="This tab has the Claude connection"
+            >
               (connected)
             </span>
           {/if}
@@ -200,7 +221,7 @@
             <div
               class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-blue-500 animate-pulse"
               title="New messages"
-            />
+            ></div>
           {/if}
         </div>
       {/if}
@@ -242,12 +263,7 @@
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M12 4v16m8-8H4"
-      />
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
     </svg>
   </button>
 </div>
@@ -260,4 +276,4 @@
   .tab-item {
     min-width: 100px;
   }
-</style>
+</style>