Live portal: rename streams (tab double-click, persisted per browser) and name tab groups (header slot, session)

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

live/src/Tab.jsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { names } from './names.js'
+
+// Tab for a stream panel: double-click to rename (viewer-side label, kept in this browser). Empty = back to user · title.
+export default function Tab({ api, params }) {
+  const id = api.id
+  const custom = names.use(s => s.streams[id])
+  const base = `${params.user} · ${params.title}`
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState('')
+  const ref = useRef(null)
+  useEffect(() => { if (editing) { ref.current?.focus(); ref.current?.select() } }, [editing])
+  const start = e => { e.stopPropagation(); setDraft(custom || ''); setEditing(true) }
+  const commit = () => { if (!editing) return; const v = draft.trim(); names.rename(id, v); api.setTitle(v || base); setEditing(false) }
+  return (
+    <div className="vtab" title={`${base}\ndouble-click to rename`} onDoubleClick={start}>
+      {editing
+        ? <input ref={ref} value={draft} placeholder={base} onChange={e => setDraft(e.target.value)}
+                 onPointerDown={e => e.stopPropagation()} onBlur={commit}
+                 onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(false) }} />
+        : <span className="vtab-text">{custom || base}</span>}
+    </div>
+  )
+}