windmill-components 1.623.2 → 1.655.0

package/package/components/workspaceSettings/DucklakeSettings.svelte

@@ -30,136 +30,102 @@ export function convertDucklakeSettingsToBackend(settings) {
 }
 </script>
 
-<script>
-	import { Plus, SettingsIcon } from 'lucide-svelte'
-
-	import Button from '../common/button/Button.svelte'
-
-	import Description from '../Description.svelte'
-	import { random_adj } from '../random_positive_adjetive'
-	import { DataTable, Cell, Row } from '../table'
-	import Head from '../table/Head.svelte'
-	import CloseButton from '../common/CloseButton.svelte'
-	import Select from '../select/Select.svelte'
-	import ResourcePicker from '../ResourcePicker.svelte'
-	import { usePromise } from '../../svelte5Utils.svelte'
-	import { SettingService, WorkspaceService } from '../../gen'
-	import type { GetSettingsResponse } from '../../gen'
-
-	import { workspaceStore } from '../../stores'
-	import { sendUserToast } from '../../toast'
-	import ExploreAssetButton from '../ExploreAssetButton.svelte'
-	import DbManagerDrawer from '../DBManagerDrawer.svelte'
-	import Tooltip from '../Tooltip.svelte'
-	import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
-	import { createAsyncConfirmationModal } from '../common/confirmationModal/asyncConfirmationModal.svelte'
-	import { clone } from '../../utils'
-	import Alert from '../common/alert/Alert.svelte'
-	import { deepEqual } from 'fast-equals'
-	import Popover from '../meltComponents/Popover.svelte'
-	import TextInput from '../text_input/TextInput.svelte'
-	import { slide } from 'svelte/transition'
-	import { isCustomInstanceDbEnabled } from './utils.svelte'
-	import { resource } from 'runed'
-	import CustomInstanceDbSelect from './CustomInstanceDbSelect.svelte'
-	import Label from '../Label.svelte'
-
-	const DEFAULT_DUCKLAKE_CATALOG_NAME = 'ducklake_catalog'
-
-	type Props = {
-		ducklakeSettings: DucklakeSettingsType
-		ducklakeSavedSettings: DucklakeSettingsType
-		onSave?: () => void
-	}
-	let {
-		ducklakeSettings = $bindable(),
-		ducklakeSavedSettings = $bindable(),
-		onSave: onSaveProp = undefined
-	}: Props = $props()
-
-	function onNewDucklake() {
-		const name = ducklakeSettings.ducklakes.some((d) => d.name === 'main')
-			? `${random_adj()}_ducklake`
-			: 'main'
-		ducklakeSettings.ducklakes.push({
-			name,
-			catalog: {
-				resource_type: $isCustomInstanceDbEnabled ? 'instance' : 'postgresql',
-				resource_path: $isCustomInstanceDbEnabled ? DEFAULT_DUCKLAKE_CATALOG_NAME : undefined
-			},
-			storage: {
-				storage: undefined,
-				path: ''
-			}
-		})
-	}
-
-	function removeDucklake(index: number) {
-		ducklakeSettings.ducklakes.splice(index, 1)
-	}
-
-	const ducklakeIsDirty: Record<string, boolean> = $derived(
-		Object.fromEntries(
-			ducklakeSettings.ducklakes.map((d) => {
-				const saved = ducklakeSavedSettings.ducklakes.find((saved) => saved.name === d.name)
-				return [d.name, !deepEqual(saved, d)] as const
-			})
-		)
-	)
-
-	const customInstanceDbs = resource([], SettingService.listCustomInstanceDbs)
-
-	async function onSave() {
-		try {
-			if (
-				$isCustomInstanceDbEnabled &&
-				ducklakeSettings.ducklakes.some(
-					(d) =>
-						d.catalog.resource_type === 'instance' &&
-						!customInstanceDbs.current?.[d.catalog.resource_path ?? '']?.success
-				)
-			) {
-				let confirm = await confirmationModal.ask({
-					title: 'Some instance databases are not setup',
-					children: 'Are you sure you want to save without setting them up ?',
-					confirmationText: 'Save anyway'
-				})
-				if (!confirm) return
-			}
-			const settings = convertDucklakeSettingsToBackend(ducklakeSettings)
-			await WorkspaceService.editDucklakeConfig({
-				workspace: $workspaceStore!,
-				requestBody: { settings }
-			})
-			ducklakeSavedSettings = clone(ducklakeSettings)
-			sendUserToast('Ducklake settings saved successfully')
-			onSaveProp?.()
-		} catch (e) {
-			sendUserToast(e, true)
-			console.error('Error saving ducklake settings', e)
-		}
-	}
-
-	let secondaryStorageNames = usePromise(
-		() => SettingService.getSecondaryStorageNames({ workspace: $workspaceStore! }),
-		{ loadInit: false }
-	)
-	$effect(() => {
-		$workspaceStore
-		secondaryStorageNames.refresh()
-	})
-
-	let tableHeadNames = ['Name', 'Catalog', 'Workspace storage', '', ''] as const
-
-	let tableHeadTooltips: Partial<Record<(typeof tableHeadNames)[number], string | undefined>> = {
-		Name: "Ducklakes are referenced in DuckDB scripts with the <code class='px-1 py-0.5 border rounded-md'>ATTACH 'ducklake://name' AS dl;</code> syntax",
-		Catalog: 'Ducklake needs an SQL database to store metadata about the data',
-		'Workspace storage':
-			'Where the data is actually stored, in parquet format. You need to configure a workspace storage first'
-	}
-
-	let dbManagerDrawer: DbManagerDrawer | undefined = $state()
-	let confirmationModal = createAsyncConfirmationModal()
+<script lang="ts">import { Plus, SettingsIcon } from 'lucide-svelte';
+import Button from '../common/button/Button.svelte';
+import SettingsFooter from './SettingsFooter.svelte';
+import Description from '../Description.svelte';
+import { random_adj } from '../random_positive_adjetive';
+import { DataTable, Cell, Row } from '../table';
+import Head from '../table/Head.svelte';
+import CloseButton from '../common/CloseButton.svelte';
+import Select from '../select/Select.svelte';
+import ResourcePicker from '../ResourcePicker.svelte';
+import { usePromise } from '../../svelte5Utils.svelte';
+import { SettingService, WorkspaceService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { sendUserToast } from '../../toast';
+import ExploreAssetButton from '../ExploreAssetButton.svelte';
+import Tooltip from '../Tooltip.svelte';
+import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
+import { createAsyncConfirmationModal } from '../common/confirmationModal/asyncConfirmationModal.svelte';
+import { clone } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+import { deepEqual } from 'fast-equals';
+import Popover from '../meltComponents/Popover.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { slide } from 'svelte/transition';
+import { isCustomInstanceDbEnabled } from './utils.svelte';
+import { resource } from 'runed';
+import CustomInstanceDbSelect from './CustomInstanceDbSelect.svelte';
+import Label from '../Label.svelte';
+const DEFAULT_DUCKLAKE_CATALOG_NAME = 'ducklake_catalog';
+let { ducklakeSettings = $bindable(), ducklakeSavedSettings = $bindable(), onSave: onSaveProp = undefined, onDiscard = undefined } = $props();
+function onNewDucklake() {
+    const name = ducklakeSettings.ducklakes.some((d) => d.name === 'main')
+        ? `${random_adj()}_ducklake`
+        : 'main';
+    ducklakeSettings.ducklakes.push({
+        name,
+        catalog: {
+            resource_type: $isCustomInstanceDbEnabled ? 'instance' : 'postgresql',
+            resource_path: $isCustomInstanceDbEnabled ? DEFAULT_DUCKLAKE_CATALOG_NAME : undefined
+        },
+        storage: {
+            storage: undefined,
+            path: ''
+        }
+    });
+}
+function removeDucklake(index) {
+    ducklakeSettings.ducklakes.splice(index, 1);
+}
+const ducklakeIsDirty = $derived(Object.fromEntries(ducklakeSettings.ducklakes.map((d) => {
+    const saved = ducklakeSavedSettings.ducklakes.find((saved) => saved.name === d.name);
+    return [d.name, !deepEqual(saved, d)];
+})));
+let hasUnsavedChanges = $derived(ducklakeSavedSettings.ducklakes.length !== ducklakeSettings.ducklakes.length ||
+    !Object.values(ducklakeIsDirty).every((v) => v === false));
+const customInstanceDbs = resource([], SettingService.listCustomInstanceDbs);
+async function onSave() {
+    try {
+        if ($isCustomInstanceDbEnabled &&
+            ducklakeSettings.ducklakes.some((d) => d.catalog.resource_type === 'instance' &&
+                !customInstanceDbs.current?.[d.catalog.resource_path ?? '']?.success)) {
+            let confirm = await confirmationModal.ask({
+                title: 'Some instance databases are not setup',
+                children: 'Are you sure you want to save without setting them up ?',
+                confirmationText: 'Save anyway'
+            });
+            if (!confirm)
+                return;
+        }
+        const settings = convertDucklakeSettingsToBackend(ducklakeSettings);
+        await WorkspaceService.editDucklakeConfig({
+            workspace: $workspaceStore,
+            requestBody: { settings }
+        });
+        ducklakeSavedSettings = clone(ducklakeSettings);
+        sendUserToast('Ducklake settings saved successfully');
+        onSaveProp?.();
+    }
+    catch (e) {
+        sendUserToast(e, true);
+        console.error('Error saving ducklake settings', e);
+        throw e;
+    }
+}
+let secondaryStorageNames = usePromise(() => SettingService.getSecondaryStorageNames({ workspace: $workspaceStore }), { loadInit: false });
+$effect(() => {
+    $workspaceStore;
+    secondaryStorageNames.refresh();
+});
+let tableHeadNames = ['Name', 'Catalog', 'Workspace storage', '', ''];
+let tableHeadTooltips = {
+    Name: "Ducklakes are referenced in DuckDB scripts with the <code class='px-1 py-0.5 border rounded-md'>ATTACH 'ducklake://name' AS dl;</code> syntax",
+    Catalog: 'Ducklake needs an SQL database to store metadata about the data',
+    'Workspace storage': 'Where the data is actually stored, in parquet format. You need to configure a workspace storage first'
+};
+let confirmationModal = createAsyncConfirmationModal();
 </script>
 
 <div class="flex flex-col gap-4 mb-8 mt-20">
@@ -196,7 +162,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 			{/each}
 		</tr>
 	</Head>
-	<tbody class="divide-y bg-surface">
+	<tbody class="divide-y bg-surface-tertiary">
 		{#if ducklakeSettings.ducklakes.length == 0}
 			<Row>
 				<Cell colspan={tableHeadNames.length} class="text-center py-6">
@@ -264,7 +230,6 @@ export function convertDucklakeSettingsToBackend(settings) {
 									bind:value={ducklake.catalog.resource_path}
 									{customInstanceDbs}
 									{confirmationModal}
-									{dbManagerDrawer}
 									tag="ducklake"
 								>
 									{#snippet wizardBottomHint()}
@@ -305,29 +270,33 @@ export function convertDucklakeSettingsToBackend(settings) {
 				<Cell class="w-12">
 					<div class="flex gap-2">
 						<Popover contentClasses="p-4" enableFlyTransition closeOnOtherPopoverOpen>
-							<svelte:fragment slot="trigger">
-								<div class="relative">
-									<Button variant="default" iconOnly size="sm" endIcon={{ icon: SettingsIcon }} />
-									{#if ducklake.extra_args}
-										<div
-											class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-accent rounded-full border border-surface"
-										></div>
-									{/if}
-								</div>
-							</svelte:fragment>
-							<svelte:fragment slot="content">
-								<Label
-									label="Extra args"
-									tooltip="Additional arguments to pass in the ATTACH command. The argument list is substituted as-is. Separate them with commas."
-								>
-									<TextInput
-										bind:value={ducklake.extra_args}
-										class="min-w-96"
-										underlyingInputEl="textarea"
-										inputProps={{ placeholder: "METADATA_SCHEMA 'schema', ENCRYPTED true" }}
-									/>
-								</Label>
-							</svelte:fragment>
+							{#snippet trigger()}
+													
+									<div class="relative">
+										<Button variant="default" iconOnly size="sm" endIcon={{ icon: SettingsIcon }} />
+										{#if ducklake.extra_args}
+											<div
+												class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-accent rounded-full border border-surface"
+											></div>
+										{/if}
+									</div>
+								
+													{/snippet}
+							{#snippet content()}
+													
+									<Label
+										label="Extra args"
+										tooltip="Additional arguments to pass in the ATTACH command. The argument list is substituted as-is. Separate them with commas."
+									>
+										<TextInput
+											bind:value={ducklake.extra_args}
+											class="min-w-96"
+											underlyingInputEl="textarea"
+											inputProps={{ placeholder: "METADATA_SCHEMA 'schema', ENCRYPTED true" }}
+										/>
+									</Label>
+								
+													{/snippet}
 						</Popover>
 						{#if ducklakeIsDirty[ducklake.name]}
 							<Popover
@@ -335,15 +304,18 @@ export function convertDucklakeSettingsToBackend(settings) {
 								contentClasses="p-2 text-sm text-secondary italic"
 								class="cursor-not-allowed"
 							>
-								<svelte:fragment slot="trigger">
-									<ExploreAssetButton asset={{ kind: 'ducklake', path: '' }} disabled />
-								</svelte:fragment>
-								<svelte:fragment slot="content">Please save settings first</svelte:fragment>
+								{#snippet trigger()}
+															
+										<ExploreAssetButton asset={{ kind: 'ducklake', path: '' }} disabled />
+									
+															{/snippet}
+								{#snippet content()}
+																Please save settings first
+															{/snippet}
 							</Popover>
 						{:else}
 							<ExploreAssetButton
 								asset={{ kind: 'ducklake', path: ducklake.name }}
-								{dbManagerDrawer}
 							/>
 						{/if}
 					</div>
@@ -364,15 +336,13 @@ export function convertDucklakeSettingsToBackend(settings) {
 		</Row>
 	</tbody>
 </DataTable>
-<Button
-	wrapperClasses="mt-4 mb-16 max-w-fit"
-	variant="accent"
-	on:click={onSave}
-	disabled={ducklakeSavedSettings.ducklakes.length === ducklakeSettings.ducklakes.length &&
-		Object.values(ducklakeIsDirty).every((v) => v === false)}
->
-	Save ducklake settings
-</Button>
-<DbManagerDrawer bind:this={dbManagerDrawer} />
+<SettingsFooter
+	class="mt-6 mb-16"
+	inline
+	{hasUnsavedChanges}
+	{onSave}
+	onDiscard={() => onDiscard?.()}
+	saveLabel="Save ducklake settings"
+/>
 
 <ConfirmationModal {...confirmationModal.props} />

package/package/components/workspaceSettings/DucklakeSettings.svelte.d.ts

@@ -19,6 +19,7 @@ type Props = {
     ducklakeSettings: DucklakeSettingsType;
     ducklakeSavedSettings: DucklakeSettingsType;
     onSave?: () => void;
+    onDiscard?: () => void;
 };
 declare const DucklakeSettings: import("svelte").Component<Props, {}, "ducklakeSettings" | "ducklakeSavedSettings">;
 type DucklakeSettings = ReturnType<typeof DucklakeSettings>;

package/package/components/workspaceSettings/GitSyncFilterSettings.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">import Toggle from '../Toggle.svelte';
-import { Filter, Terminal, ChevronDown, ChevronUp, Edit3 } from 'lucide-svelte';
+import { Filter, ChevronDown } from 'lucide-svelte';
 import Tooltip from '../Tooltip.svelte';
 import FilterList from './FilterList.svelte';
-import { Tabs, Tab } from '../common';
+import { Tabs, Tab, Button, Section } from '../common';
 import { workspaceStore } from '../../stores';
+import { twMerge } from 'tailwind-merge';
+import { slide } from 'svelte/transition';
 let { git_repo_resource_path = $bindable(''), include_path = $bindable(['f/**']), include_type = $bindable(['script', 'flow', 'app', 'folder']), exclude_types_override = $bindable([]), isLegacyRepo = false, excludes = $bindable([]), extraIncludes = $bindable([]), isInitialSetup = false, requiresMigration = false, actions = undefined, useIndividualBranch = false } = $props();
 // Component state
 let collapsed = $state(false);
-let showCliInstructions = $state(false);
 // Determine if component should be editable or read-only
 const isEditable = $derived(isInitialSetup || requiresMigration);
 // Compute effective include types (include_type minus exclude_types_override for legacy repos only)
@@ -29,7 +30,8 @@ const typeToggles = $derived({
     groups: effectiveIncludeTypes.includes('group'),
     triggers: effectiveIncludeTypes.includes('trigger'),
     settings: effectiveIncludeTypes.includes('settings'),
-    key: effectiveIncludeTypes.includes('key')
+    key: effectiveIncludeTypes.includes('key'),
+    workspaceDependencies: effectiveIncludeTypes.includes('workspacedependencies')
 });
 // Tab selection for filter kinds
 let filtersTab = $state('includes');
@@ -49,7 +51,8 @@ function updateIncludeType(key, value) {
         groups: 'group',
         triggers: 'trigger',
         settings: 'settings',
-        key: 'key'
+        key: 'key',
+        workspaceDependencies: 'workspacedependencies'
     };
     if (value) {
         newTypes.add(typeMap[key]);
@@ -71,8 +74,8 @@ function capitalize(str) {
 	<!-- Card Header -->
 	<div class="flex items-center justify-between min-h-10 px-4 py-1 border-b">
 		<div class="flex items-center gap-2">
-			<Filter size={18} class="text-primary" />
-			<span class="font-semibold text-sm">Git Sync filter settings</span>
+			<Filter size={14} class="text-primary" />
+			<span class="font-semibold text-xs text-emphasis">Git Sync filter settings</span>
 			{#if isLegacyRepo}
 				<Tooltip>
 					This repository uses legacy configuration format and inherits settings from
@@ -86,50 +89,21 @@ function capitalize(str) {
 				</Tooltip>
 			{/if}
 		</div>
-		<div class="flex items-center gap-2">
-			<button
-				class="text-secondary hover:text-primary focus:outline-none"
-				onclick={() => (collapsed = !collapsed)}
-				aria-label="Toggle collapse"
-			>
-				{#if collapsed}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 9l-7 7-7-7"
-						/>
-					</svg>
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 15l7-7 7 7"
-						/>
-					</svg>
-				{/if}
-			</button>
-		</div>
+		<Button
+			unifiedSize="sm"
+			variant="subtle"
+			startIcon={{
+				icon: ChevronDown,
+				classes: twMerge('transition duration-150', collapsed ? '' : 'rotate-180')
+			}}
+			onClick={() => (collapsed = !collapsed)}
+			iconOnly
+		/>
 	</div>
 	{#if !collapsed}
 		{#if isEditable}
 			<!-- Editable mode -->
-			<div class="px-4 py-2">
+			<div class="px-4 py-2" transition:slide={{ duration: 150 }}>
 				<div class="grid grid-cols-1 md:grid-cols-2 md:gap-32">
 					<div class="flex flex-col gap-2">
 						<Tabs bind:selected={filtersTab}>
@@ -290,6 +264,14 @@ function capitalize(str) {
 									options={{ right: 'Encryption key' }}
 								/>
 							</div>
+							<div class="flex items-center gap-2">
+								<Toggle
+									size="xs"
+									checked={typeToggles.workspaceDependencies}
+									on:change={(e) => updateIncludeType('workspaceDependencies', e.detail)}
+									options={{ right: 'Workspace dependencies' }}
+								/>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -305,7 +287,7 @@ function capitalize(str) {
 				<div class="grid grid-cols-1 md:grid-cols-2 md:gap-8">
 					<div class="flex flex-col gap-3">
 						<div>
-							<h4 class="font-semibold text-sm mb-1">Include Paths</h4>
+							<h4 class="font-semibold text-xs text-emphasis mb-1">Include Paths</h4>
 							{#if include_path.length > 0}
 								<div class="flex flex-wrap gap-1 text-xs">
 									{#each include_path as path}
@@ -320,7 +302,7 @@ function capitalize(str) {
 						</div>
 
 						<div>
-							<h4 class="font-semibold text-sm mb-1">Exclude Paths</h4>
+							<h4 class="font-semibold text-xs text-emphasis mb-1">Exclude Paths</h4>
 							{#if excludes.length > 0}
 								<div class="flex flex-wrap gap-1 text-xs">
 									{#each excludes as path}
@@ -334,7 +316,7 @@ function capitalize(str) {
 					</div>
 
 					<div class="flex flex-col gap-2">
-						<h4 class="font-semibold text-sm">Included Types</h4>
+						<h4 class="font-semibold text-xs text-emphasis">Included Types</h4>
 						<div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
 							{#each Object.entries(typeToggles) as [key, enabled]}
 								<div class="flex items-center gap-1">
@@ -359,21 +341,7 @@ function capitalize(str) {
 
 				<!-- CLI Instructions (collapsible) -->
 				<div class="border-t pt-2 mt-4">
-					<button
-						class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
-						onclick={() => (showCliInstructions = !showCliInstructions)}
-					>
-						<Terminal size={16} />
-						<span>Update settings with CLI</span>
-						<Edit3 size={14} class="text-primary" />
-						{#if showCliInstructions}
-							<ChevronUp size={16} />
-						{:else}
-							<ChevronDown size={16} />
-						{/if}
-					</button>
-
-					{#if showCliInstructions}
+					<Section label="Update settings with CLI" collapsable={true} collapsed={true}>
 						<div class="mt-3 bg-surface-secondary rounded-lg p-3">
 							<div class="text-xs text-primary mb-2">
 								These filter settings are sourced from the <code
@@ -401,8 +369,8 @@ git commit
 git push
 
 # Push changes to workspace or click the pull settings button above{#if useIndividualBranch}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path} --promotion main{:else}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path}{/if}</pre
+									wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path} --promotion main{:else}
+									wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path}{/if}</pre
 							>
 							{#if useIndividualBranch}
 								<div class="text-xs text-primary mt-3">
@@ -421,7 +389,7 @@ wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo
 								</div>
 							{/if}
 						</div>
-					{/if}
+					</Section>
 				</div>
 			</div>
 		{/if}

package/package/components/workspaceSettings/ModelTokenLimits.svelte

@@ -2,6 +2,7 @@
 import { getModelMaxTokens } from '../copilot/lib';
 import { ChevronDown, ChevronUp } from 'lucide-svelte';
 import { slide } from 'svelte/transition';
+import SettingCard from '../instanceSettings/SettingCard.svelte';
 const MAX_TOKENS_LIMIT = 2000000;
 let { aiProviders, maxTokensPerModel = $bindable() } = $props();
 let errors = $state({});
@@ -71,15 +72,10 @@ $effect(() => {
 </script>
 
 {#if Object.keys(aiProviders).length > 0}
-	<div class="flex flex-col gap-2">
-		<div class="flex flex-col gap-1">
-			<p class="font-semibold text-xs text-emphasis">Model Output Limits</p>
-			<p class="text-xs text-secondary">
-				Configure maximum token limits for each model. These limits apply to all AI chat
-				interactions in the workspace.
-			</p>
-		</div>
-
+	<SettingCard
+		label="Model output limits"
+		description="Configure maximum token limits for each model. These limits apply to all AI chat interactions in the workspace."
+	>
 		<div class="flex flex-col gap-3">
 			{#each Object.entries(modelsByProvider).filter(([provider, models]) => models.length > 0) as [provider, models]}
 				{@const isExpanded = !collapsedProviders[provider]}
@@ -157,5 +153,5 @@ $effect(() => {
 				</div>
 			{/each}
 		</div>
-	</div>
+	</SettingCard>
 {/if}