refactor(web): unify settings panel layouts with shared toolbar/body

- Add PanelToolbar/PanelBody primitives so all four settings tabs share
  the same top-toolbar + scrollable-body rhythm under the unified header.
- API panel: drop the heavy gray shadowed TabsList; move the create
  action into the toolbar next to the tabs, lighten per-tab hints.
- Storage panel: reuse PanelToolbar for the generated-at/refresh bar.
- Account panel: wrap content in PanelBody for consistent padding.
- Models panel: keep the pinned LangBot Models (Space) card at the very
  top, above the add-custom-provider row (intentional pin), using
  PanelBody instead of a top toolbar.

web/src/app/home/components/settings-dialog/panel-layout.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Shared layout primitives for the settings-dialog panels.
+ *
+ * Every section renders under the dialog's unified header, so the panels
+ * themselves should share the same vertical rhythm: an optional top toolbar
+ * (meta on the left, primary action on the right) followed by a scrollable
+ * body with consistent padding. Keeping these in one place is what makes the
+ * tabs feel like one cohesive surface instead of four separately-styled views.
+ */
+
+export function PanelToolbar({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 items-center justify-between gap-3 border-b px-6 py-3',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function PanelBody({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={cn('min-h-0 flex-1 overflow-auto px-6 py-5', className)}>
+      {children}
+    </div>
+  );
+}