feat(widgets): redesign gate widgets — readable hierarchy, prominent select-all, styled controls

Titles + intro read as a clear prompt (comfortable line length), options as
spaced choice rows, Other/Back/Exit as discreet secondary controls under a
divider. Multiselect gets a prominent Select all/Deselect all at the head of the
list with a live count.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/widgets/MultiselectWidget.tsx

@@ -18,43 +18,56 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
     });
   }
 
-  function selectAll() {
-    setChecked(new Set(options.map((o) => o.id)));
-  }
-
-  function deselectAll() {
-    setChecked(new Set());
-  }
-
   const isDisabled = descriptor.allow_empty === false && checked.size === 0;
 
   return (
-    <div className="space-y-2">
-      {descriptor.title && <p className="font-medium">{descriptor.title}</p>}
-      <div className="flex gap-2">
-        <button className="text-sm border rounded px-2 py-1" onClick={allChecked ? deselectAll : selectAll}>
-          {allChecked ? "Deselect all" : "Select all"}
+    <div className="space-y-4">
+      {descriptor.title && (
+        <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+          {descriptor.title}
+        </p>
+      )}
+      <div className="flex flex-col">
+        {/* Prominent select-all control at the head of the list. */}
+        <div className="flex items-center justify-between border-b border-border/60 pb-2">
+          <button
+            className="text-sm font-semibold text-primary transition-colors hover:text-[oklch(var(--primary-hover))]"
+            onClick={() =>
+              setChecked(allChecked ? new Set() : new Set(options.map((o) => o.id)))
+            }
+          >
+            {allChecked ? "Deselect all" : "Select all"}
+          </button>
+          <span className="text-xs tabular-nums text-muted-foreground">
+            {checked.size} / {options.length} selected
+          </span>
+        </div>
+        <div className="flex flex-col gap-1 pt-2">
+          {options.map((o) => (
+            <label
+              key={o.id}
+              className="flex cursor-pointer items-center gap-2.5 rounded-lg border border-transparent px-2.5 py-2 text-sm text-foreground transition-colors hover:bg-accent"
+            >
+              <input
+                type="checkbox"
+                className="size-4 shrink-0 accent-[oklch(var(--primary))]"
+                checked={checked.has(o.id)}
+                onChange={() => toggle(o.id)}
+              />
+              <span>{o.label}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+      <div>
+        <button
+          className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-[oklch(var(--primary-hover))] disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={isDisabled}
+          onClick={() => onRespond({ id: descriptor.id, kind: "multiselect", choices: Array.from(checked) })}
+        >
+          Confirm
         </button>
       </div>
-      <div className="flex flex-col gap-1">
-        {options.map((o) => (
-          <label key={o.id} className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={checked.has(o.id)}
-              onChange={() => toggle(o.id)}
-            />
-            {o.label}
-          </label>
-        ))}
-      </div>
-      <button
-        className="border rounded px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed"
-        disabled={isDisabled}
-        onClick={() => onRespond({ id: descriptor.id, kind: "multiselect", choices: Array.from(checked) })}
-      >
-        Confirm
-      </button>
       <ReservedControls
         reserved={descriptor.reserved}
         onControl={(c, t) => onRespond({ id: descriptor.id, control: c, ...(t !== undefined ? { text: t } : {}) })}