windmill-components 1.596.1 → 1.613.0

package/package/components/workspace/WorkspaceTreeView.svelte

@@ -0,0 +1,331 @@
+<script lang="ts">import { Building2 } from 'lucide-svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import WorkspaceCard from './WorkspaceCard.svelte';
+import SearchItems from '../SearchItems.svelte';
+let { workspaces, onEnterWorkspace, onUnarchive, searchFilter = $bindable(''), onExpandCollapseAll = $bindable(), allExpanded = $bindable(false), hasForks = $bindable(false) } = $props();
+// State for manually toggled expansion status
+let manualExpansionStates = $state({});
+let filteredWorkspaces = $state();
+// Keyboard navigation state
+let selectedWorkspaceId = $state(null);
+let isKeyboardNavigation = $state(false);
+let scrollContainer;
+// Computed expansion states that include auto-expansion for search results
+let expansionStates = $derived.by(() => {
+    if (!searchFilter || !filteredWorkspaces || !workspaces) {
+        return manualExpansionStates;
+    }
+    const matchedWorkspaceIds = new Set(filteredWorkspaces.map((w) => w.id));
+    const autoExpanded = {};
+    // Build children map for descendant checking
+    const childrenMap = new Map();
+    workspaces.forEach((workspace) => {
+        if (workspace.parent_workspace_id) {
+            if (!childrenMap.has(workspace.parent_workspace_id)) {
+                childrenMap.set(workspace.parent_workspace_id, []);
+            }
+            childrenMap.get(workspace.parent_workspace_id).push(workspace.id);
+        }
+    });
+    // Function to check if workspace has matching descendants (not itself)
+    function hasMatchingDescendant(workspaceId) {
+        const children = childrenMap.get(workspaceId) || [];
+        return children.some((childId) => matchedWorkspaceIds.has(childId) || hasMatchingDescendant(childId));
+    }
+    // Auto-expand workspaces only if they have matching descendants
+    // (not if the workspace itself matches - user can manually expand to see children)
+    workspaces.forEach((workspace) => {
+        if (hasMatchingDescendant(workspace.id)) {
+            autoExpanded[workspace.id] = true;
+        }
+    });
+    // Combine manual and auto-expanded states
+    return { ...manualExpansionStates, ...autoExpanded };
+});
+// Build nested hierarchy correctly - always use full workspace list for hierarchy
+let rootWorkspaces = $derived.by(() => {
+    if (!workspaces)
+        return [];
+    // Create a map of children for each parent workspace using ALL workspaces
+    const childrenMap = new SvelteMap();
+    // Build children mapping - this correctly handles nested relationships
+    workspaces.forEach((workspace) => {
+        if (workspace.parent_workspace_id) {
+            if (!childrenMap.has(workspace.parent_workspace_id)) {
+                childrenMap.set(workspace.parent_workspace_id, []);
+            }
+            // Find marked version from filtered results if available
+            const filteredWorkspace = filteredWorkspaces?.find((fw) => fw.id === workspace.id);
+            const extendedWorkspace = {
+                ...workspace,
+                marked: filteredWorkspace?.marked
+            };
+            childrenMap.get(workspace.parent_workspace_id).push(extendedWorkspace);
+        }
+    });
+    // Get IDs of workspaces that match the search
+    const matchedWorkspaceIds = new Set(filteredWorkspaces?.map((w) => w.id) || []);
+    // Function to check if a workspace or its descendants match the search
+    function hasMatchingDescendant(workspaceId) {
+        if (matchedWorkspaceIds.has(workspaceId))
+            return true;
+        const children = childrenMap.get(workspaceId) || [];
+        return children.some((child) => hasMatchingDescendant(child.id));
+    }
+    // Recursive function to build full nested hierarchy
+    // parentMatched: if true, include all children regardless of search match
+    function buildWorkspaceWithChildren(workspace, parentMatched = false) {
+        const directChildren = childrenMap.get(workspace.id) || [];
+        const thisWorkspaceMatches = matchedWorkspaceIds.has(workspace.id);
+        // If this workspace or a parent matches, show all children
+        // Otherwise, only show children that match or have matching descendants
+        const visibleChildren = searchFilter && !parentMatched && !thisWorkspaceMatches
+            ? directChildren.filter((child) => hasMatchingDescendant(child.id))
+            : directChildren;
+        const childrenWithNestedStructure = visibleChildren.map((child) => buildWorkspaceWithChildren(child, parentMatched || thisWorkspaceMatches));
+        // Find marked version from filtered results if available
+        const filteredWorkspace = filteredWorkspaces?.find((fw) => fw.id === workspace.id);
+        return {
+            ...workspace,
+            marked: filteredWorkspace?.marked,
+            _children: childrenWithNestedStructure
+        };
+    }
+    // Return only root workspaces - filter based on search if active
+    const rootCandidates = workspaces.filter((workspace) => !workspace.parent_workspace_id ||
+        !workspaces.find((w) => w.id === workspace.parent_workspace_id));
+    const visibleRoots = searchFilter
+        ? rootCandidates.filter((workspace) => hasMatchingDescendant(workspace.id))
+        : rootCandidates;
+    return visibleRoots
+        .map((workspace) => buildWorkspaceWithChildren(workspace))
+        .sort((a, b) => {
+        // Admin workspace always goes first
+        if (a.id === 'admins')
+            return -1;
+        if (b.id === 'admins')
+            return 1;
+        // Then sort alphabetically by name
+        return a.name.localeCompare(b.name);
+    });
+});
+function handleToggleExpand(workspaceId) {
+    const currentState = expansionStates[workspaceId] ?? false;
+    manualExpansionStates = { ...manualExpansionStates, [workspaceId]: !currentState };
+}
+// Get IDs of workspaces that have children (can be expanded)
+let workspacesWithChildren = $derived.by(() => {
+    if (!workspaces)
+        return [];
+    const parentIds = new Set(workspaces.filter((w) => w.parent_workspace_id).map((w) => w.parent_workspace_id));
+    return workspaces.filter((w) => parentIds.has(w.id)).map((w) => w.id);
+});
+// Check if all expandable workspaces are currently expanded
+let allExpandedInternal = $derived(workspacesWithChildren.length > 0 &&
+    workspacesWithChildren.every((id) => expansionStates[id] === true));
+// Sync internal state to bindable props
+$effect(() => {
+    allExpanded = allExpandedInternal;
+});
+$effect(() => {
+    hasForks = workspacesWithChildren.length > 0;
+});
+export function handleExpandCollapseAll() {
+    const newState = !allExpandedInternal;
+    const newExpansionStates = {};
+    workspacesWithChildren.forEach((id) => {
+        newExpansionStates[id] = newState;
+    });
+    manualExpansionStates = newExpansionStates;
+}
+// Generate flattened navigation order for keyboard navigation
+const flatNavigationOrder = $derived.by(() => {
+    const result = [];
+    function addWorkspaceAndChildren(workspace) {
+        result.push(workspace.id);
+        if (workspace._children && expansionStates[workspace.id]) {
+            workspace._children.forEach((child) => addWorkspaceAndChildren(child));
+        }
+    }
+    rootWorkspaces.forEach((workspace) => addWorkspaceAndChildren(workspace));
+    return result;
+});
+// Keyboard navigation handlers
+function handleKeyDown(event) {
+    // Allow navigation keys even when search input has focus
+    const navigationKeys = [
+        'ArrowDown',
+        'ArrowUp',
+        'Home',
+        'End',
+        'ArrowLeft',
+        'ArrowRight',
+        'Enter',
+        ' ',
+        'Escape'
+    ];
+    const activeElement = document.activeElement;
+    // Skip navigation only if user is typing in textarea or non-search inputs
+    if (activeElement?.tagName === 'TEXTAREA' ||
+        (activeElement?.tagName === 'INPUT' && !navigationKeys.includes(event.key))) {
+        return;
+    }
+    // Enable keyboard navigation on arrow keys
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+        enableKeyboardNavigation();
+    }
+    // Only handle navigation if keyboard navigation is active
+    if (!isKeyboardNavigation) {
+        return;
+    }
+    if (flatNavigationOrder.length === 0)
+        return;
+    const currentIndex = selectedWorkspaceId ? flatNavigationOrder.indexOf(selectedWorkspaceId) : -1;
+    switch (event.key) {
+        case 'ArrowDown': {
+            event.preventDefault();
+            const nextIndex = currentIndex < flatNavigationOrder.length - 1 ? currentIndex + 1 : 0;
+            selectedWorkspaceId = flatNavigationOrder[nextIndex];
+            break;
+        }
+        case 'ArrowUp': {
+            event.preventDefault();
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : flatNavigationOrder.length - 1;
+            selectedWorkspaceId = flatNavigationOrder[prevIndex];
+            break;
+        }
+        case 'Home': {
+            event.preventDefault();
+            selectedWorkspaceId = flatNavigationOrder[0];
+            break;
+        }
+        case 'End': {
+            event.preventDefault();
+            selectedWorkspaceId = flatNavigationOrder[flatNavigationOrder.length - 1];
+            break;
+        }
+        case 'ArrowRight': {
+            if (selectedWorkspaceId && workspacesWithChildren.includes(selectedWorkspaceId)) {
+                event.preventDefault();
+                if (!expansionStates[selectedWorkspaceId]) {
+                    handleToggleExpand(selectedWorkspaceId);
+                }
+            }
+            break;
+        }
+        case 'ArrowLeft': {
+            if (selectedWorkspaceId && workspacesWithChildren.includes(selectedWorkspaceId)) {
+                event.preventDefault();
+                if (expansionStates[selectedWorkspaceId]) {
+                    handleToggleExpand(selectedWorkspaceId);
+                }
+            }
+            break;
+        }
+        case 'Enter':
+        case ' ': {
+            if (selectedWorkspaceId) {
+                event.preventDefault();
+                const workspace = workspaces.find((w) => w.id === selectedWorkspaceId);
+                if (workspace && !workspace.disabled) {
+                    onEnterWorkspace(selectedWorkspaceId);
+                }
+            }
+            break;
+        }
+        case 'Escape': {
+            selectedWorkspaceId = null;
+            isKeyboardNavigation = false;
+            break;
+        }
+    }
+}
+// Reset selection when workspaces change or search filter changes
+$effect(() => {
+    if (rootWorkspaces.length === 0) {
+        selectedWorkspaceId = null;
+    }
+    else if (selectedWorkspaceId && !flatNavigationOrder.includes(selectedWorkspaceId)) {
+        // If currently selected workspace is no longer visible, reset to first visible
+        selectedWorkspaceId = flatNavigationOrder[0] || null;
+    }
+});
+// Enable keyboard navigation when user starts navigating
+function enableKeyboardNavigation() {
+    if (!isKeyboardNavigation && rootWorkspaces.length > 0) {
+        isKeyboardNavigation = true;
+        if (!selectedWorkspaceId) {
+            selectedWorkspaceId = flatNavigationOrder[0] || null;
+        }
+    }
+}
+// Handle mouse interactions - disable keyboard mode when mouse is used
+function handleMouseEnter(workspaceId) {
+    if (isKeyboardNavigation) {
+        selectedWorkspaceId = workspaceId;
+    }
+}
+function handleMouseClick() {
+    isKeyboardNavigation = false;
+    selectedWorkspaceId = null;
+}
+// Scroll selected workspace into view
+function scrollToSelectedWorkspace() {
+    if (!selectedWorkspaceId || !scrollContainer)
+        return;
+    // Find the workspace card element by data attribute
+    const selectedElement = scrollContainer.querySelector(`[data-workspace-id="${selectedWorkspaceId}"]`);
+    if (selectedElement) {
+        selectedElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+        });
+    }
+}
+// Auto-scroll when selection changes
+$effect(() => {
+    if (selectedWorkspaceId && isKeyboardNavigation) {
+        scrollToSelectedWorkspace();
+    }
+});
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+<!-- Search Items Component for fuzzy search with highlighting -->
+<SearchItems
+	filter={searchFilter}
+	items={workspaces}
+	bind:filteredItems={filteredWorkspaces}
+	f={(workspace) => workspace.name + ' (' + workspace.id + ')'}
+/>
+
+<div class="space-y-4 max-h-[50vh] overflow-auto" bind:this={scrollContainer}>
+	<!-- Workspace Tree -->
+	<div class="space-y-2">
+		{#each rootWorkspaces as workspace (workspace.id)}
+			<WorkspaceCard
+				{workspace}
+				children={workspace._children || []}
+				isExpanded={expansionStates[workspace.id] ?? false}
+				{expansionStates}
+				{onEnterWorkspace}
+				{onUnarchive}
+				onToggleExpand={handleToggleExpand}
+				{selectedWorkspaceId}
+				onMouseEnter={handleMouseEnter}
+				onMouseClick={handleMouseClick}
+				onKeyboardNavigation={enableKeyboardNavigation}
+			/>
+		{/each}
+
+		{#if rootWorkspaces.length === 0}
+			<div class="text-center py-8">
+				<Building2 size={48} class="text-secondary mx-auto mb-3" />
+				<p class="text-sm text-secondary">
+					{searchFilter ? 'No workspaces match your search' : 'No workspaces available'}
+				</p>
+			</div>
+		{/if}
+	</div>
+</div>

package/package/components/workspace/WorkspaceTreeView.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { UserWorkspace } from '../../stores';
+interface Props {
+    workspaces: UserWorkspace[];
+    onEnterWorkspace: (workspaceId: string) => Promise<void>;
+    onUnarchive?: (workspaceId: string) => Promise<void>;
+    searchFilter?: string;
+    onExpandCollapseAll?: () => void;
+    allExpanded?: boolean;
+    hasForks?: boolean;
+}
+declare const WorkspaceTreeView: import("svelte").Component<Props, {
+    handleExpandCollapseAll: () => void;
+}, "allExpanded" | "searchFilter" | "onExpandCollapseAll" | "hasForks">;
+type WorkspaceTreeView = ReturnType<typeof WorkspaceTreeView>;
+export default WorkspaceTreeView;

package/package/components/workspaceSettings/AISettings.svelte

@@ -7,7 +7,7 @@ import Description from '../Description.svelte';
 import Label from '../Label.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
 import Toggle from '../Toggle.svelte';
-import ArgEnum from '../ArgEnum.svelte';
+import Select from '../select/Select.svelte';
 import Button from '../common/button/Button.svelte';
 import MultiSelect from '../select/MultiSelect.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
@@ -15,10 +15,20 @@ import Badge from '../common/badge/Badge.svelte';
 import Tooltip from '../Tooltip.svelte';
 import ModelTokenLimits from './ModelTokenLimits.svelte';
 import { setCopilotInfo } from '../../aiStore';
-import CustomAIPrompts from '../copilot/CustomAIPrompts.svelte';
+import AIPromptsModal from '../settings/AIPromptsModal.svelte';
+import { Save, Settings } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
 let { aiProviders = $bindable(), codeCompletionModel = $bindable(), defaultModel = $bindable(), customPrompts = $bindable(), maxTokensPerModel = $bindable(), usingOpenaiClientCredentialsOauth = $bindable(), onSave } = $props();
 let fetchedAiModels = $state(false);
 let availableAiModels = $state(Object.fromEntries(Object.keys(AI_PROVIDERS).map((provider) => [provider, AI_PROVIDERS[provider].defaultModels])));
+let modalOpen = $state(false);
+let initialPrompts = $state($state.snapshot(customPrompts));
+let hasPromptsChanges = $derived(Array.from(new Set([...Object.keys(customPrompts), ...Object.keys(initialPrompts)])).some((key) => {
+    const currentValue = customPrompts[key] || '';
+    const initialValue = initialPrompts[key] || '';
+    return currentValue !== initialValue;
+}));
+let promptCount = $derived(Object.values(customPrompts).filter((p) => p?.trim().length > 0).length);
 let selectedAiModels = $derived(Object.values(aiProviders).flatMap((p) => p.models));
 let modelProviderMap = $derived(Object.fromEntries(Object.entries(aiProviders).flatMap(([provider, config]) => config.models.map((m) => [m, provider]))));
 $effect(() => {
@@ -46,6 +56,10 @@ $effect(() => {
         fetchedAiModels = true;
     })();
 });
+function resetPrompts() {
+    customPrompts = { ...initialPrompts };
+    sendUserToast('Reset to last saved state');
+}
 async function editCopilotConfig() {
     if (Object.keys(aiProviders ?? {}).length > 0) {
         const code_completion_model = codeCompletionModel && modelProviderMap[codeCompletionModel]
@@ -78,7 +92,8 @@ async function editCopilotConfig() {
         });
         setCopilotInfo({});
     }
-    sendUserToast(`Copilot settings updated`);
+    sendUserToast(`AI settings updated`);
+    initialPrompts = { ...customPrompts }; // Update initial prompts after successful save
     onSave?.();
 }
 async function onAiProviderChange(provider) {
@@ -98,37 +113,36 @@ async function onAiProviderChange(provider) {
         aiProviders[provider].models = availableAiModels[provider].slice(0, 1);
     }
 }
+const autocompleteModels = $derived(selectedAiModels.filter((m) => m.startsWith('codestral-') && !m.startsWith('codestral-embed')));
 </script>
 
-<div class="flex flex-col gap-4 my-8">
+<div class="flex flex-col gap-4 mt-4">
 	<div class="flex flex-col gap-1">
-		<div class="text-emphasis text-sm font-semibold"> Windmill AI</div>
+		<div class="text-emphasis text-sm font-semibold flex flex-row gap-2 justify-between">
+			Windmill AI <Button
+				variant="accent"
+				unifiedSize="md"
+				wrapperClasses="self-start"
+				disabled={!Object.values(aiProviders).every((p) => p.resource_path) ||
+					(codeCompletionModel != undefined && codeCompletionModel.length === 0) ||
+					(Object.keys(aiProviders).length > 0 && !defaultModel)}
+				onClick={editCopilotConfig}
+				startIcon={{ icon: Save }}
+			>
+				Save AI settings
+			</Button></div
+		>
 		<Description link="https://www.windmill.dev/docs/core_concepts/ai_generation">
 			Windmill AI integrates with your favorite AI providers and models.
 		</Description>
 	</div>
 </div>
 
-<div class="flex flex-row-reverse gap-2 pb-4">
-	<Button
-		variant="accent"
-		size="xl"
-		wrapperClasses="self-start"
-		disabled={!Object.values(aiProviders).every((p) => p.resource_path) ||
-			(codeCompletionModel != undefined && codeCompletionModel.length === 0) ||
-			(Object.keys(aiProviders).length > 0 && !defaultModel)}
-		on:click={editCopilotConfig}
-	>
-		Save
-	</Button>
-</div>
-
-<div class="flex flex-col gap-8">
-	<div class="flex flex-col gap-2">
-		<p class="font-semibold text-xs text-emphasis">AI Providers</p>
-		<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-8 mt-4">
+	<Label label="AI Providers">
+		<div class="flex flex-col gap-4 p-4 rounded-md border bg-surface-tertiary">
 			{#each Object.entries(AI_PROVIDERS) as [provider, details]}
-				<div class="flex flex-col gap-2">
+				<div class="flex flex-col">
 					<div class="flex flex-row gap-2">
 						<Toggle
 							options={{
@@ -186,28 +200,33 @@ async function onAiProviderChange(provider) {
 					</div>
 
 					{#if aiProviders[provider]}
-						<div class="mb-4 flex flex-col gap-2">
-							<div class="flex flex-row gap-1">
-								<ResourcePicker
-									selectFirst
-									resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
-										? 'openai_client_credentials_oauth'
-										: provider}
-									initialValue={aiProviders[provider].resource_path}
-									bind:value={
-										() => aiProviders[provider].resource_path || undefined,
-										(v) => {
-											aiProviders[provider].resource_path = v ?? ''
-											onAiProviderChange(provider as AIProvider)
+						<div
+							class="mb-4 flex flex-col gap-6 border p-4 rounded-md mt-2"
+							transition:slide|local={{ duration: 150 }}
+						>
+							<Label label="Resource">
+								<div class="flex flex-row gap-1">
+									<ResourcePicker
+										selectFirst
+										resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
+											? 'openai_client_credentials_oauth'
+											: provider}
+										initialValue={aiProviders[provider].resource_path}
+										bind:value={
+											() => aiProviders[provider].resource_path || undefined,
+											(v) => {
+												aiProviders[provider].resource_path = v ?? ''
+												onAiProviderChange(provider as AIProvider)
+											}
 										}
-									}
-								/>
-								<TestAiKey
-									aiProvider={provider as AIProvider}
-									resourcePath={aiProviders[provider].resource_path}
-									model={aiProviders[provider].models[0]}
-								/>
-							</div>
+									/>
+									<TestAiKey
+										aiProvider={provider as AIProvider}
+										resourcePath={aiProviders[provider].resource_path}
+										model={aiProviders[provider].models[0]}
+									/>
+								</div>
+							</Label>
 
 							<Label label="Enabled models">
 								<MultiSelect
@@ -220,79 +239,98 @@ async function onAiProviderChange(provider) {
 									onCreateItem={(item) =>
 										(aiProviders[provider].models = [...aiProviders[provider].models, item])}
 								/>
+								<p class="text-2xs text-hint">
+									If you don't see the model you want, you can type it manually in the selector.
+								</p>
 							</Label>
-							<p class="text-xs">
-								If you don't see the model you want, you can type it manually in the selector.
-							</p>
 						</div>
 					{/if}
 				</div>
 			{/each}
 		</div>
-	</div>
+	</Label>
 
-	{#if Object.keys(aiProviders).length > 0}
-		{@const autocompleteModels = selectedAiModels.filter(
-			(m) => m.startsWith('codestral-') && !m.startsWith('codestral-embed')
-		)}
-		<div class="flex flex-col gap-2">
-			<p class="font-semibold">Settings</p>
-			<div class="flex flex-col gap-4">
-				<Label label="Default chat model">
-					{#key Object.keys(aiProviders).length}
-						<ArgEnum
-							enum_={selectedAiModels}
-							bind:value={defaultModel}
-							disabled={false}
-							autofocus={false}
-							defaultValue={undefined}
-							valid={true}
-							create={false}
-						/>
-					{/key}
-				</Label>
+	<Label label="Default chat model">
+		{#key Object.keys(aiProviders).length}
+			<Select
+				items={safeSelectItems(selectedAiModels)}
+				bind:value={defaultModel}
+				disabled={false}
+				placeholder="Select a default model"
+				size="sm"
+			/>
+		{/key}
+	</Label>
 
-				<div class="flex flex-col gap-2">
-					<Toggle
-						on:change={(e) => {
-							if (e.detail) {
-								codeCompletionModel = autocompleteModels[0] ?? ''
-							} else {
-								codeCompletionModel = undefined
-							}
-						}}
-						checked={codeCompletionModel != undefined}
-						disabled={autocompleteModels.length == 0}
-						options={{
-							right: 'Code completion (Codestral only)',
-							rightTooltip:
-								'We currently only support Mistral Codestral models for code completion.'
-						}}
-					/>
+	<!-- Code completion group for animation purposes -->
+	<div>
+		<Label label="Code completion">
+			<Toggle
+				on:change={(e) => {
+					if (e.detail) {
+						codeCompletionModel = autocompleteModels[0] ?? ''
+					} else {
+						codeCompletionModel = undefined
+					}
+				}}
+				checked={codeCompletionModel != undefined}
+				disabled={autocompleteModels.length == 0}
+				options={{
+					right: 'Enable code completion',
+					rightTooltip: 'We currently only support Mistral Codestral models for code completion.'
+				}}
+			/>
+		</Label>
 
-					{#if codeCompletionModel != undefined}
-						<Label label="Code completion model">
-							<ArgEnum
-								enum_={autocompleteModels}
-								bind:value={codeCompletionModel}
-								disabled={false}
-								autofocus={false}
-								defaultValue={undefined}
-								valid={true}
-								create={false}
-							/>
-						</Label>
-					{/if}
-				</div>
+		{#if codeCompletionModel != undefined}
+			<div transition:slide|local={{ duration: 150 }} class="mt-6">
+				<Label label="Code completion model">
+					<Select
+						items={safeSelectItems(autocompleteModels)}
+						bind:value={codeCompletionModel}
+						disabled={false}
+						placeholder="Select a code completion model"
+						size="sm"
+					/>
+				</Label>
 			</div>
-		</div>
-	{/if}
+		{/if}
+	</div>
+
+	<ModelTokenLimits {aiProviders} bind:maxTokensPerModel />
 
-	{#if Object.keys(aiProviders).length > 0}
-		<ModelTokenLimits {aiProviders} bind:maxTokensPerModel />
-	{/if}
+	<Label label="Custom system prompts">
+		<p class="text-xs text-secondary">
+			Customize AI behavior with workspace-level system prompts. These apply to all workspace
+			members.
+		</p>
 
-	{#if Object.keys(aiProviders).length > 0}
-		<CustomAIPrompts bind:customPrompts title="Custom system prompts" />
-	{/if}
+		<div class="flex items-center gap-2 pt-1">
+			<Button
+				onclick={() => (modalOpen = true)}
+				variant="default"
+				unifiedSize="sm"
+				startIcon={{ icon: Settings }}
+				disabled={Object.keys(aiProviders ?? {}).length === 0}
+			>
+				Configure AI prompts
+			</Button>
+			{#if promptCount > 0}
+				<span class="text-xs text-secondary">({promptCount} configured)</span>
+			{/if}
+			{#if hasPromptsChanges}
+				<Badge color="yellow">Unsaved changes</Badge>
+			{/if}
+		</div>
+	</Label>
+
+	<div class="py-6"></div>
 </div>
+
+<AIPromptsModal
+	bind:open={modalOpen}
+	bind:customPrompts
+	onReset={resetPrompts}
+	hasChanges={hasPromptsChanges}
+	isWorkspaceSettings={true}
+/>