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

@@ -15,6 +15,14 @@ export const WIDGET_TYPES: { id: WidgetType; label: string; many?: boolean }[] =
 export type WidgetData = Sensor | Record<string, Sensor> | null | undefined
 const isSensor = (d: WidgetData): d is Sensor => !!d && typeof (d as Sensor).id === 'string'
 
+// "cpu.core.*.usage" → "CPU core usage", "fan.*" → "Fans": what a pattern is called when nobody named it.
+const FAMILY_TITLE: Record<string, string> = { cpu: 'CPU', mem: 'Memory', swap: 'Swap', temp: 'Temperatures', fan: 'Fans', net: 'Network', disk: 'Disks', fs: 'Filesystems', ups: 'UPS', zfs: 'ZFS', smart: 'Drive health', service: 'Services', services: 'Services', container: 'Containers', containers: 'Containers', updates: 'Updates', load: 'Load' }
+export function patternTitle(sel: string): string {
+  const [first, ...rest] = sel.split('.')
+  const tail = rest.filter((x) => !/[*?[]/.test(x)).join(' ').replace(/_/g, ' ')
+  return [FAMILY_TITLE[first] ?? first, tail].filter(Boolean).join(' ')
+}
+
 const MAX_POINTS = 300
 
 function Gauge({ s }: { s: Sensor }) {
@@ -49,7 +57,7 @@ function Spark({ s, src }: { s: Sensor; src?: Source }) {
 }
 
 export function Widget({ spec, data, src }: { spec: WidgetSpec; data: WidgetData; src?: Source }) {
-  const title = spec.title || (isSensor(data) ? data.name : spec.sensor)
+  const title = spec.title || (isSensor(data) ? data.name : /[*?[]/.test(spec.sensor) ? patternTitle(spec.sensor) : spec.sensor)
   let body
   if (data === undefined) body = <div className="value muted">…</div>
   else if (data === null) body = <div className="sub">no sensor <span className="mono">{spec.sensor}</span> on this machine</div>