Move panel explanations into tooltips

The node, flow, widget and dashboard panels explained themselves in
paragraphs under every control. They now carry a caption and an info
tooltip, so a panel reads as a list of settings.

InfoTip, PanelSection and FieldLabel live beside PANEL_SECTION in
SidePanel.tsx, which the panels already share. InfoTip holds its own open
state because a Radix tooltip ignores a touch pointer, and below md the
whole panel is a full-screen sheet — hover-only help would leave a phone
with the caption and nothing else.

Dashboard/panels.tsx drops from 30 helper paragraphs to 5; the ones left
are empty states and status, not explanation. Em-dashes are out of the
user-facing strings, except where one separates the halves of a select
item.

frontend/src/components/Flow/SidePanel.tsx

@@ -1,11 +1,17 @@
-import { X } from "lucide-react"
+import { Info, X } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
 import type { ReactNode } from "react"
 import { useEffect, useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
 import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 import { useIsMobile } from "@/hooks/useMobile"
 import { duration, easeEmphasized, easeStandard } from "@/lib/motion"
 import { cn } from "@/lib/utils"
@@ -28,6 +34,94 @@ const panelSlide = {
 export const PANEL_SECTION =
   "text-xs font-medium uppercase tracking-[0.5px] text-muted-foreground"
 
+/**
+ * The explanation behind a caption, one tap or one hover away.
+ *
+ * Panels label their controls and put the rest here, so a panel reads as a
+ * list of settings rather than as a page of prose. Keep it to a sentence or
+ * two: a tooltip nobody can scroll is the wrong home for more.
+ *
+ * `open` is held here because a Radix tooltip never opens on touch — it
+ * ignores a touch pointer entirely — and below `md` the whole panel is a
+ * full-screen sheet, so a phone would get the caption and nothing else.
+ * Clicking toggles it; hover still drives it on a pointer device.
+ */
+export function InfoTip({
+  label,
+  children,
+}: {
+  label: string
+  children: ReactNode
+}) {
+  const [open, setOpen] = useState(false)
+  return (
+    <Tooltip open={open} onOpenChange={setOpen}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={`About ${label}`}
+          className="inline-flex size-11 shrink-0 items-center justify-center text-muted-foreground md:size-5"
+          onClick={() => setOpen((was) => !was)}
+        >
+          <Info className="size-3.5" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs text-balance">
+        {children}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+/**
+ * A field's label, with its explanation behind an `InfoTip` rather than in a
+ * paragraph under the control. Sits inside the usual `grid gap-1.5` block.
+ */
+export function FieldLabel({
+  children,
+  help,
+  htmlFor,
+}: {
+  children: string
+  help?: ReactNode
+  htmlFor?: string
+}) {
+  return (
+    <div className="flex items-center gap-1">
+      <Label htmlFor={htmlFor} className="text-sm font-normal">
+        {children}
+      </Label>
+      {help ? <InfoTip label={children}>{help}</InfoTip> : null}
+    </div>
+  )
+}
+
+/**
+ * A captioned block in a panel: the caption, its explanation behind an
+ * `InfoTip`, and the controls under both.
+ */
+export function PanelSection({
+  title,
+  help,
+  className,
+  children,
+}: {
+  title: string
+  help?: ReactNode
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <div className="flex items-center gap-1">
+        <span className={PANEL_SECTION}>{title}</span>
+        {help ? <InfoTip label={title}>{help}</InfoTip> : null}
+      </div>
+      {children}
+    </div>
+  )
+}
+
 /**
  * What the thing in this panel is called, and the one place to rename it.
  *