Disable macOS spellchecker and simplify reactive lists

src/components/instance-tabs.tsx

@@ -18,18 +18,15 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
     <div class="tab-bar tab-bar-instance">
       <div class="tab-container" role="tablist">
         <div class="flex items-center gap-1 overflow-x-auto">
-          <For each={Array.from(props.instances.keys())}>
-            {(id) => {
-              const instance = props.instances.get(id)
-              return (
-                <InstanceTab
-                  instance={instance!}
-                  active={id === props.activeInstanceId}
-                  onSelect={() => props.onSelect(id)}
-                  onClose={() => props.onClose(id)}
-                />
-              )
-            }}
+          <For each={Array.from(props.instances.entries())}>
+            {([id, instance]) => (
+              <InstanceTab
+                instance={instance}
+                active={id === props.activeInstanceId}
+                onSelect={() => props.onSelect(id)}
+                onClose={() => props.onClose(id)}
+              />
+            )}
           </For>
           <button
             class="new-tab-button"
@@ -40,7 +37,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
             <Plus class="w-4 h-4" />
           </button>
         </div>
-        <Show when={props.instances.size > 1}>
+        <Show when={Array.from(props.instances.entries()).length > 1}>
           <div class="flex-shrink-0 ml-4">
             <KeyboardHint
               shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(

src/components/logs-view.tsx

@@ -17,10 +17,6 @@ const LogsView: Component<LogsViewProps> = (props) => {
   const instance = () => instances().get(props.instanceId)
   const logs = () => instance()?.logs ?? []
 
-  let renderedCount = 0
-  let initialSyncDone = false
-  let emptyStateEl: HTMLDivElement | null = null
-
   onMount(() => {
     if (scrollRef && savedState) {
       scrollRef.scrollTop = savedState.scrollTop
@@ -36,6 +32,11 @@ const LogsView: Component<LogsViewProps> = (props) => {
     }
   })
 
+  createEffect(() => {
+    if (autoScroll() && scrollRef && logs().length > 0) {
+      scrollRef.scrollTop = scrollRef.scrollHeight
+    }
+  })
 
   const handleScroll = () => {
     if (!scrollRef) return
@@ -75,78 +76,6 @@ const LogsView: Component<LogsViewProps> = (props) => {
     }
   }
 
-  const createLogElement = (entry: LogEntry) => {
-    const row = document.createElement("div")
-    row.className = "log-entry"
-
-    const timestamp = document.createElement("span")
-    timestamp.className = "log-timestamp"
-    timestamp.textContent = formatTime(entry.timestamp)
-
-    const message = document.createElement("span")
-    message.className = `log-message ${getLevelColor(entry.level)}`
-    message.textContent = entry.message
-
-    row.append(timestamp, message)
-    return row
-  }
-
-  createEffect(() => {
-    const entries = logs()
-    if (!scrollRef) return
-
-    if (entries.length < renderedCount) {
-      scrollRef.innerHTML = ""
-      renderedCount = 0
-      initialSyncDone = false
-      if (emptyStateEl && emptyStateEl.parentElement) {
-        emptyStateEl.parentElement.removeChild(emptyStateEl)
-      }
-    }
-
-    if (entries.length === 0) {
-      renderedCount = 0
-      if (!emptyStateEl) {
-        emptyStateEl = document.createElement("div")
-        emptyStateEl.className = "log-empty-state"
-        emptyStateEl.textContent = "Waiting for server output..."
-      }
-      if (emptyStateEl.parentElement !== scrollRef) {
-        scrollRef.appendChild(emptyStateEl)
-      }
-      return
-    }
-
-    if (emptyStateEl && emptyStateEl.parentElement === scrollRef) {
-      scrollRef.removeChild(emptyStateEl)
-    }
-
-    for (let i = renderedCount; i < entries.length; i++) {
-      const entry = entries[i]
-      scrollRef.appendChild(createLogElement(entry))
-    }
-
-    renderedCount = entries.length
-
-    if (!initialSyncDone) {
-      if (savedState) {
-        const maxScrollTop = Math.max(scrollRef.scrollHeight - scrollRef.clientHeight, 0)
-        const target = Math.min(savedState.scrollTop, maxScrollTop)
-        scrollRef.scrollTop = target
-        setAutoScroll(savedState.autoScroll)
-      } else {
-        scrollRef.scrollTop = scrollRef.scrollHeight
-        setAutoScroll(true)
-      }
-      initialSyncDone = true
-      return
-    }
-
-    if (autoScroll()) {
-      scrollRef.scrollTop = scrollRef.scrollHeight
-    }
-  })
-
   return (
     <div class="log-container">
       <div class="log-header">
@@ -178,7 +107,21 @@ const LogsView: Component<LogsViewProps> = (props) => {
         ref={scrollRef}
         onScroll={handleScroll}
         class="log-content"
-      ></div>
+      >
+        <Show
+          when={logs().length > 0}
+          fallback={<div class="log-empty-state">Waiting for server output...</div>}
+        >
+          <For each={logs()}>
+            {(entry) => (
+              <div class="log-entry">
+                <span class="log-timestamp">{formatTime(entry.timestamp)}</span>
+                <span class={`log-message ${getLevelColor(entry.level)}`}>{entry.message}</span>
+              </div>
+            )}
+          </For>
+        </Show>
+      </div>
 
       <Show when={!autoScroll()}>
         <button

src/components/session-list.tsx

@@ -152,26 +152,42 @@ const SessionList: Component<SessionListProps> = (props) => {
   })
 
   const sessionSections = createMemo(() => {
-    const parentIds: string[] = []
-    const childIds: string[] = []
+    const parentItems: SessionListItem[] = []
+    const childItems: SessionListItem[] = []
 
     for (const [id, session] of props.sessions.entries()) {
+      const item: SessionListItem = {
+        id,
+        title: session.title || "Untitled",
+        isActive: id === props.activeSessionId,
+        isParent: session.parentId === null,
+        onSelect: () => props.onSelect(id),
+        onClose: session.parentId === null ? () => props.onClose(id) : undefined,
+      }
+
       if (session.parentId === null) {
-        parentIds.push(id)
+        parentItems.push(item)
       } else {
-        childIds.push(id)
+        childItems.push(item)
       }
     }
 
-    childIds.sort((a, b) => {
-      const sessionA = props.sessions.get(a)
-      const sessionB = props.sessions.get(b)
+    childItems.sort((a, b) => {
+      const sessionA = props.sessions.get(a.id)
+      const sessionB = props.sessions.get(b.id)
       if (!sessionA || !sessionB) return 0
       return sessionB.time.updated - sessionA.time.updated
     })
 
-    parentIds.push("info")
-    return { parentIds, childIds }
+    parentItems.push({
+      id: "info",
+      title: "Info",
+      isSpecial: true,
+      isActive: props.activeSessionId === "info",
+      onSelect: () => props.onSelect("info"),
+    })
+
+    return { parentItems, childItems }
   })
 
   return (
@@ -205,48 +221,30 @@ const SessionList: Component<SessionListProps> = (props) => {
           <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
             User Session & Info
           </div>
-          <For each={sessionSections().parentIds}>
-            {(id) => {
-              if (id === "info") {
-                return (
-                  <div class="session-list-item group">
-                    <button
-                      class={`session-item-base ${
-                        props.activeSessionId === "info" ? "session-item-active" : "session-item-inactive"
-                      } session-item-special`}
-                      onClick={() => props.onSelect("info")}
-                      title="Info"
-                      role="button"
-                      aria-selected={props.activeSessionId === "info"}
-                    >
-                      <Info class="w-4 h-4 flex-shrink-0" />
-                      <span class="session-item-title truncate">Info</span>
-                    </button>
-                  </div>
-                )
-              }
+          <For each={sessionSections().parentItems}>
+            {(item) => (
+              <div class="session-list-item group">
+                <button
+                  class={`session-item-base ${
+                    item.isActive ? "session-item-active" : "session-item-inactive"
+                  } ${item.isSpecial ? "session-item-special" : ""}`}
+                  onClick={item.onSelect}
+                  title={item.title}
+                  role="button"
+                  aria-selected={item.isActive}
+                >
+                  <Show when={item.isSpecial} fallback={<MessageSquare class="w-4 h-4 flex-shrink-0" />}>
+                    <Info class="w-4 h-4 flex-shrink-0" />
+                  </Show>
 
-              const session = props.sessions.get(id)
-              if (!session) return null
+                  <span class="session-item-title truncate">{item.title}</span>
 
-              return (
-                <div class="session-list-item group">
-                  <button
-                    class={`session-item-base ${
-                      id === props.activeSessionId ? "session-item-active" : "session-item-inactive"
-                    }`}
-                    onClick={() => props.onSelect(id)}
-                    title={session.title || "Untitled"}
-                    role="button"
-                    aria-selected={id === props.activeSessionId}
-                  >
-                    <MessageSquare class="w-4 h-4 flex-shrink-0" />
-                    <span class="session-item-title truncate">{session.title || "Untitled"}</span>
+                  <Show when={!item.isSpecial && item.onClose}>
                     <span
                       class="session-item-close opacity-0 group-hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
                       onClick={(event) => {
                         event.stopPropagation()
-                        props.onClose(id)
+                        item.onClose?.()
                       }}
                       role="button"
                       tabIndex={0}
@@ -254,40 +252,51 @@ const SessionList: Component<SessionListProps> = (props) => {
                     >
                       <X class="w-3 h-3" />
                     </span>
-                  </button>
-                </div>
-              )
-            }}
+                  </Show>
+                </button>
+              </div>
+            )}
           </For>
         </div>
 
-        <Show when={sessionSections().childIds.length > 0}>
+        <Show when={sessionSections().childItems.length > 0}>
           <div class="session-section">
             <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
               Agent Sessions
             </div>
-            <For each={sessionSections().childIds}>
-              {(id) => {
-                const session = props.sessions.get(id)
-                if (!session) return null
+            <For each={sessionSections().childItems}>
+              {(item) => (
+                <div class="session-list-item group">
+                  <button
+                    class={`session-item-base ${
+                      item.isActive ? "session-item-active" : "session-item-inactive"
+                    } ${item.isSpecial ? "session-item-special" : ""}`}
+                    onClick={item.onSelect}
+                    title={item.title}
+                    role="button"
+                    aria-selected={item.isActive}
+                  >
+                    <MessageSquare class="w-4 h-4 flex-shrink-0" />
 
-                return (
-                  <div class="session-list-item group">
-                    <button
-                      class={`session-item-base ${
-                        id === props.activeSessionId ? "session-item-active" : "session-item-inactive"
-                      }`}
-                      onClick={() => props.onSelect(id)}
-                      title={session.title || "Untitled"}
-                      role="button"
-                      aria-selected={id === props.activeSessionId}
-                    >
-                      <MessageSquare class="w-4 h-4 flex-shrink-0" />
-                      <span class="session-item-title truncate">{session.title || "Untitled"}</span>
-                    </button>
-                  </div>
-                )
-              }}
+                    <span class="session-item-title truncate">{item.title}</span>
+
+                    <Show when={!item.isSpecial && item.onClose}>
+                      <span
+                        class="session-item-close opacity-0 group-hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          item.onClose?.()
+                        }}
+                        role="button"
+                        tabIndex={0}
+                        aria-label="Close session"
+                      >
+                        <X class="w-3 h-3" />
+                      </span>
+                    </Show>
+                  </button>
+                </div>
+              )}
             </For>
           </div>
         </Show>