Terminal sessions move from the rail into a tab strip on the terminal page

The rail is now a flat list of pages; Terminal is one of them.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/TermTabs.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react'
+import { Term } from './api'
+import { Spinner } from './ui'
+
+interface Props {
+  terms: Term[]; active: string | null; creating?: boolean
+  onSelect: (id: string) => void; onNew: () => void
+  onRename: (t: Term) => void; onClose: (t: Term) => void
+}
+
+// Tab strip across the top of the terminal page: one tab per session, "+" at the end.
+export default function TermTabs({ terms, active, creating, onSelect, onNew, onRename, onClose }: Props) {
+  const strip = useRef<HTMLDivElement>(null)
+  // keep the active tab in sight when the strip overflows
+  useEffect(() => { strip.current?.querySelector('.ttab.active')?.scrollIntoView({ block: 'nearest', inline: 'nearest' }) }, [active, terms.length])
+  return (
+    <div className="term-tabs" ref={strip} onMouseDown={(e) => e.preventDefault()}>
+      {terms.map((t) => {
+        const sel = t.id === active
+        return (
+          <div key={t.id} className={'ttab' + (sel ? ' active' : '') + (t.running ? '' : ' exited')}
+            onClick={() => onSelect(t.id)} onDoubleClick={() => onRename(t)}
+            onAuxClick={(e) => { if (e.button === 1) { e.preventDefault(); onClose(t) } }}>
+            <span className={'sdot' + (t.running ? ' run' : '')} />
+            <span className="tname" title={t.name}>{t.name}</span>
+            {sel && <button className="icon-btn" title="rename" onClick={(e) => { e.stopPropagation(); onRename(t) }}>✎</button>}
+            <button className="icon-btn" title="close" onClick={(e) => { e.stopPropagation(); onClose(t) }}>✕</button>
+          </div>
+        )
+      })}
+      <button className="ttab new" title="new terminal" disabled={creating} onClick={onNew}>{creating ? <Spinner /> : '+'}</button>
+    </div>
+  )
+}