Adopt shared WebUI layout primitives

webui/src/features/dataflow/DataflowPage.tsx

@@ -26,7 +26,7 @@ import {
   TriangleAlert,
   Upload
 } from "lucide-react";
-import {
+import { DialogSection, ToolbarGroup, ActionToolbar,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -587,9 +587,9 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
     <main className="dataflow-page">
       <div className="dataflow-shell">
         <aside className="dataflow-pipeline-panel" aria-label="Data pipelines">
-          <div className="dataflow-panel-toolbar">
+          <ActionToolbar className="dataflow-panel-toolbar">
             <strong>Pipelines</strong>
-            <span className="dataflow-toolbar-actions">
+            <ToolbarGroup align="end" className="dataflow-toolbar-actions">
               <IconButton
                 label="Refresh pipelines"
                 icon={<RefreshCw size={16} />}
@@ -606,8 +606,8 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
                 disabled={!canWrite}
                 disabledReason={!canWrite ? DATAFLOW_I18N.writeReason : undefined}
               />
-            </span>
+            </ToolbarGroup>
-          </div>
+          </ActionToolbar>
           <div className="dataflow-pipeline-search">
             <input
               type="search"
@@ -648,7 +648,7 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
         <section className="dataflow-workspace">
           {draft ? (
             <>
-              <div className="dataflow-workspace-toolbar">
+              <ActionToolbar className="dataflow-workspace-toolbar">
                 <div className="dataflow-identity-fields">
                   <input
                     className="dataflow-name-input"
@@ -806,7 +806,7 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
                     <Save size={16} /> {saving ? "Saving..." : "Save"}
                   </Button>
                 </div>
-              </div>
+              </ActionToolbar>
               {error ? (
                 <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>
               ) : null}
@@ -891,7 +891,7 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
                     </ReactFlowProvider>
                   ) : (
                     <div className="dataflow-sql-workbench">
-                      <div className="dataflow-sql-toolbar">
+                      <ActionToolbar className="dataflow-sql-toolbar">
                         <span>Constrained Dataflow SQL</span>
                         <Button
                           variant="primary"
@@ -900,7 +900,7 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
                         >
                           <Code2 size={16} /> Apply SQL
                         </Button>
-                      </div>
+                      </ActionToolbar>
                       <textarea
                         value={draft.sqlText}
                         onChange={(event) => updateDraft({ sqlText: event.target.value })}
@@ -2070,7 +2070,7 @@ function RunPipelineDialog({
           </>
         )}
       >
-      <div className="dataflow-run-dialog-content">
+      <DialogSection className="dataflow-run-dialog-content">
         {error ? (
           <DismissibleAlert tone="danger" resetKey={error}>
             {error}
@@ -2257,7 +2257,7 @@ function RunPipelineDialog({
             </table>
           </div>
         </section>
-        </div>
+        </DialogSection>
       </Dialog>
       <ConfirmDialog
         open={confirmation !== null}
@@ -2411,7 +2411,7 @@ function SourceSnapshotDialog({
         </>
       )}
     >
-      <div className="dataflow-source-dialog-fields">
+      <DialogSection className="dataflow-source-dialog-fields">
         {error ? (
           <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>
         ) : null}
@@ -2477,7 +2477,7 @@ function SourceSnapshotDialog({
             />
           </FormField>
         )}
-      </div>
+      </DialogSection>
     </Dialog>
   );
 }
@@ -2700,7 +2700,7 @@ function ReconciliationDecisionDialog({
       <div className="dataflow-decision-shell">
         {error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
         {success ? <DismissibleAlert tone="success" resetKey={success}>{success}</DismissibleAlert> : null}
-        <div className="dataflow-decision-set-toolbar">
+        <ActionToolbar className="dataflow-decision-set-toolbar">
           <FormField
             label="Decision set"
             help="The current projection is consumable as a source; every prior decision remains in immutable history."
@@ -2743,7 +2743,7 @@ function ReconciliationDecisionDialog({
             <span className={staleCount ? "is-warning" : ""}><strong>{staleCount}</strong> stale</span>
             <span><strong>{Math.max(0, rows.length - reviewedCount - staleCount)}</strong> open</span>
           </div>
-        </div>
+        </ActionToolbar>
         {!rows.length ? (
           <div className="dataflow-results-empty">
             Run a preview of a reconciliation comparison that emits stable key and input hashes.
@@ -2885,7 +2885,7 @@ function ResultPanel({
   const previewRows = preview?.node_preview?.total_rows ?? preview?.total_rows;
   return (
     <section className="dataflow-results" aria-label="Pipeline results">
-      <div className="dataflow-results-toolbar">
+      <ActionToolbar className="dataflow-results-toolbar">
         <div className="dataflow-results-view-controls">
           <SegmentedControl<ResultTab>
             ariaLabel="Result view"
@@ -2915,7 +2915,7 @@ function ResultPanel({
           ) : null}
           <Button variant="ghost" onClick={onClose}>Close</Button>
         </div>
-      </div>
+      </ActionToolbar>
       {tab === "preview" ? (
         <PreviewTable preview={preview} />
       ) : (