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/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { api, DashPrefs, Sample, Series, Temp } from './api'
 import Sparkline from './Sparkline'
-import { Loading, Spinner, toast } from './ui'
+import { Loading, Spinner, askYes, toast } from './ui'
 import { fmtMs, useRefreshMs } from './prefs'
 import { fetchCatalog, fetchHistories, useSensorStream } from './sensors'
 import { Catalog, MONITOR_HISTORY, MONITOR_SHAPE, Values, mergeValues, sampleOf, seriesOf, stale } from './sampleAdapter'
@@ -352,6 +352,7 @@ export default function Dashboard() {
 
   // Custom widgets are fed by one shaped query over the sensor stream — the same API any outside dashboard uses.
   const [picking, setPicking] = useState(false)
+  const [editingWidget, setEditingWidget] = useState<WidgetSpec | null>(null)
   const live = useSensorStream<Record<string, WidgetData>>(shapeOf(layout.widgets))
 
   if (!latest) return <div className="dash">{err ? <div className="error">{err}</div> : <Loading label="Collecting metrics…" />}</div>
@@ -381,7 +382,7 @@ export default function Dashboard() {
   })
   const hideMod = (id: string) => update((l) => ({ ...l, hidden: new Set([...l.hidden, id]) }))
   const showMod = (id: string) => update((l) => { const s = new Set(l.hidden); s.delete(id); return { ...l, hidden: s } })
-  const reset = () => { if (window.confirm(layout.widgets.length ? `Reset the layout and remove ${layout.widgets.length} custom widget${layout.widgets.length > 1 ? 's' : ''}?` : 'Reset the layout to the default?')) update(() => normalize({})) }
+  const reset = async () => { if (await askYes(layout.widgets.length ? `Reset the layout and remove ${layout.widgets.length} custom widget${layout.widgets.length > 1 ? 's' : ''}?` : 'Reset the layout to the default?')) update(() => normalize({})) }
 
   const tools = (id: string, kind: Kind) => {
     if (!editing) return null
@@ -421,6 +422,7 @@ export default function Dashboard() {
                 <div className="mod-tools">
                   <button title="move left" disabled={i === 0} onClick={() => update((l) => { const a = [...l.widgets]; [a[i - 1], a[i]] = [a[i], a[i - 1]]; return { ...l, widgets: a } })}>◀</button>
                   <button title="move right" disabled={i === layout.widgets.length - 1} onClick={() => update((l) => { const a = [...l.widgets]; [a[i + 1], a[i]] = [a[i], a[i + 1]]; return { ...l, widgets: a } })}>▶</button>
+                  <button title="change its sensor, type or title" onClick={() => setEditingWidget(w)}>edit</button>
                   <button title="remove widget" onClick={() => update((l) => ({ ...l, widgets: l.widgets.filter((x) => x.id !== w.id) }))}>remove</button>
                 </div>
               )}
@@ -428,9 +430,10 @@ export default function Dashboard() {
             </div>
           ))}
           {editing && <button className="tile add-widget" onClick={() => setPicking(true)}>+ Add widget</button>}
-          {live.error && !live.data && layout.widgets.length > 0 && <div className="notice attn" style={{ gridColumn: '1 / -1' }}>The widgets' stream isn't answering ({live.error}). If one of them has a bad pattern, remove it.</div>}
+          {live.error && !live.data && layout.widgets.length > 0 && <div className="notice attn" style={{ gridColumn: '1 / -1' }}>The widgets' stream isn't answering: {live.error}.</div>}
         </div>
       )}
+      {editingWidget && <WidgetPicker initial={editingWidget} onClose={() => setEditingWidget(null)} onAdd={(w) => { update((l) => ({ ...l, widgets: l.widgets.map((x) => (x.id === w.id ? w : x)) })); setEditingWidget(null) }} />}
       {picking && <WidgetPicker onClose={() => setPicking(false)} onAdd={(w) => { update((l) => ({ ...l, widgets: [...l.widgets, w] })); setPicking(false) }} />}
       {visible('card').length > 0 && (
         <div className="cards">