Quality of life: in-app dialogs, selections in the URL, editable widgets, token dialog, gallery search, status history, stream errors that say why, tab reordering and shortcuts, log out everywhere

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

web/src/TermTabs.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Term } from './api'
 import { Spinner } from './ui'
 
@@ -6,29 +6,42 @@ interface Props {
   terms: Term[]; active: string | null; creating?: boolean
   onSelect: (id: string) => void; onNew: () => void
   onRename: (t: Term) => void; onClose: (t: Term) => void
+  onMove: (id: string, before: string | null) => void // put a tab before another, or (null) at the end
+  onFocusTerm: () => 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) {
+export default function TermTabs({ terms, active, creating, onSelect, onNew, onRename, onClose, onMove, onFocusTerm }: Props) {
+  const [dragging, setDragging] = useState<string | null>(null)
+  const [over, setOver] = useState<string | null>(null)
   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) => {
+    // Buttons must not take focus from the terminal; the tabs themselves must stay draggable, which a
+    // prevented mousedown would stop — so a tab click hands focus back afterwards instead.
+    <div className="term-tabs" ref={strip} onMouseDown={(e) => { if ((e.target as HTMLElement).closest('button')) e.preventDefault() }}>
+      {terms.map((t, i) => {
         const sel = t.id === active
         return (
-          <div key={t.id} className={'ttab' + (sel ? ' active' : '') + (t.running ? '' : ' exited')}
-            onClick={() => onSelect(t.id)} onDoubleClick={() => onRename(t)}
+          <div key={t.id} className={'ttab' + (sel ? ' active' : '') + (t.running ? '' : ' exited') + (over === t.id && dragging !== t.id ? ' drop' : '')}
+            draggable onDragStart={(e) => { setDragging(t.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', t.id) }}
+            onDragOver={(e) => { if (dragging) { e.preventDefault(); setOver(t.id) } }} onDragLeave={() => setOver((o) => (o === t.id ? null : o))}
+            onDrop={(e) => { e.preventDefault(); if (dragging && dragging !== t.id) onMove(dragging, t.id); setDragging(null); setOver(null); onFocusTerm() }} onDragEnd={() => { setDragging(null); setOver(null) }}
+            onClick={() => { onSelect(t.id); onFocusTerm() }} 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 && terms.length > 1 && <span className="ttab-move">
+              <button className="icon-btn" title="move left" disabled={i === 0} onClick={(e) => { e.stopPropagation(); onMove(t.id, terms[i - 1].id) }}>‹</button>
+              <button className="icon-btn" title="move right" disabled={i === terms.length - 1} onClick={(e) => { e.stopPropagation(); onMove(t.id, terms[i + 2]?.id ?? null) }}>›</button>
+            </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>
+      <button className="ttab new" title="new terminal (Alt+Shift+T) · Alt+Shift+←/→ switches tabs" disabled={creating} onClick={onNew}>{creating ? <Spinner /> : '+'}</button>
     </div>
   )
 }