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

@@ -1,19 +1,43 @@
 import type { WidgetProps } from "./types";
 import { ReservedControls } from "./ReservedControls";
+
 export function SelectWidget({ descriptor, onRespond }: WidgetProps) {
   return (
-    <div className="space-y-2">
-      {descriptor.title && <p className="font-medium">{descriptor.title}</p>}
-      {descriptor.intro && <p className="text-sm text-muted-foreground">{descriptor.intro}</p>}
+    <div className="space-y-4">
+      {(descriptor.title || descriptor.intro) && (
+        <div className="space-y-1.5">
+          {descriptor.title && (
+            <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+              {descriptor.title}
+            </p>
+          )}
+          {descriptor.intro && (
+            <p className="max-w-[68ch] whitespace-pre-wrap text-sm leading-relaxed text-muted-foreground">
+              {descriptor.intro}
+            </p>
+          )}
+        </div>
+      )}
       <div className="flex flex-col gap-2">
         {descriptor.options?.map((o) => (
-          <button key={o.id} className="border rounded px-3 py-2 text-left hover:bg-accent"
-            onClick={() => onRespond({ id: descriptor.id, kind: "select", choices: [o.id] })}>
-            {o.label}{o.recommended && <span className="ml-2 text-xs text-green-600">(consigliato)</span>}
+          <button
+            key={o.id}
+            className="flex items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3 text-left text-sm text-foreground transition-colors hover:border-primary/40 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            onClick={() => onRespond({ id: descriptor.id, kind: "select", choices: [o.id] })}
+          >
+            <span>{o.label}</span>
+            {o.recommended && (
+              <span className="shrink-0 rounded-full bg-[oklch(var(--success)/0.16)] px-2 py-0.5 text-[0.65rem] font-medium text-[oklch(0.5_0.13_165)]">
+                consigliato
+              </span>
+            )}
           </button>
         ))}
       </div>
-      <ReservedControls reserved={descriptor.reserved} onControl={(c, t) => onRespond({ id: descriptor.id, control: c, ...(t !== undefined ? { text: t } : {}) })} />
+      <ReservedControls
+        reserved={descriptor.reserved}
+        onControl={(c, t) => onRespond({ id: descriptor.id, control: c, ...(t !== undefined ? { text: t } : {}) })}
+      />
     </div>
   );
 }