windmill-components 1.677.1 → 1.695.0

package/package/components/flows/propPicker/OutputPickerInner.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <script lang="ts">import Button from '../../common/button/Button.svelte';
-import { Pin, History, Pen, Check, X, Loader2, Pencil } from 'lucide-svelte';
+import { Pin, History, Pen, Check, X, Loader2, Pencil, ScrollText } from 'lucide-svelte';
 import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import StepHistory from './StepHistory.svelte';
 import { Popover } from '../../meltComponents';
@@ -25,6 +25,7 @@ import DisplayResult from '../../DisplayResult.svelte';
 import OutputBadge from './OutputBadge.svelte';
 import { twMerge } from 'tailwind-merge';
 import DisplayResultControlBar from '../../DisplayResultControlBar.svelte';
+import LogViewer from '../../LogViewer.svelte';
 import { base } from '../../../base';
 import { fade } from 'svelte/transition';
 let { testJob, prefix = '', allowCopy = false, connectingData = undefined, mock = $bindable({ enabled: false }), moduleId = '', fullResult = false, closeOnOutsideClick = false, getLogs = false, isLoading = $bindable(false), hideHeaderBar = false, simpleViewer = undefined, path = '', loopStatus = undefined, customHeight = undefined, rightMargin = false, disableMock = false, disableHistory = false, historyOffset = { mainAxis: 8, crossAxis: -4.5 }, clazz, copilot_fix, onSelect, onUpdateMock, onEditInput, selectionId, initial, customEmptyJobMessage } = $props();
@@ -38,6 +39,7 @@ let contentEl = $state(undefined);
 let hasOverflow = $state(false);
 let preview = $state(undefined);
 let selectedJob = $state(undefined);
+let showLogs = $state(false);
 function checkOverflow() {
     if (contentEl) {
         hasOverflow = contentEl.scrollHeight > contentEl.clientHeight;
@@ -146,7 +148,8 @@ function updateLastJob() {
         id: flowStateStore.val[moduleId]?.previewJobId ?? '',
         result: flowStateStore.val[moduleId]?.previewResult,
         type: 'CompletedJob',
-        success: flowStateStore.val[moduleId]?.previewSuccess ?? undefined
+        success: flowStateStore.val[moduleId]?.previewSuccess ?? undefined,
+        logs: flowStateStore.val[moduleId]?.previewLogs
     };
 }
 const lastJob = $derived.by(updateLastJob);
@@ -262,6 +265,11 @@ const noHistory = $derived(loopStatus ? (loopStatus.type === 'self' ? 'isLoop' :
 							preview ? 'bg-surface shadow-sm' : ''
 						)}
 					/>
+				{:else if isLoadingAndNotMock && !mock?.enabled}
+					<div class="flex flex-row w-fit items-center justify-between gap-2 rounded-md bg-surface-secondary p-1 px-2 min-w-16 min-h-[23px]">
+						<Loader2 size={12} class="animate-spin text-secondary shrink-0" />
+						<span class="text-xs text-secondary w-[56px]">&nbsp;</span>
+					</div>
 				{:else if !isLoadingAndNotMock || mock?.enabled}
 					<div
 						class={twMerge(
@@ -323,7 +331,7 @@ const noHistory = $derived(loopStatus ? (loopStatus.type === 'self' ? 'isLoop' :
 				{/if}
 
 				<!-- Pin button -->
-				{#if !disableMock && !isLoadingAndNotMock}
+				{#if !disableMock}
 					<Tooltip disablePopup={mock?.enabled}>
 						<Button
 							color="light"
@@ -410,6 +418,25 @@ const noHistory = $derived(loopStatus ? (loopStatus.type === 'self' ? 'isLoop' :
 						{/snippet}
 					</Tooltip>
 				{/if}
+
+				<!-- Logs button -->
+				{#if selectedJob?.type === 'CompletedJob' && selectedJob?.['logs']}
+					<Tooltip>
+						<Button
+							size="xs2"
+							color="light"
+							variant="contained"
+							btnClasses={twMerge('h-[27px]', showLogs ? 'bg-blue-500/10 text-blue-800 dark:text-blue-200' : 'bg-transparent')}
+							startIcon={{ icon: ScrollText }}
+							on:click={() => {
+								showLogs = !showLogs
+							}}
+						/>
+						{#snippet text()}
+							{showLogs ? 'Show result' : 'Show logs'}
+						{/snippet}
+					</Tooltip>
+				{/if}
 			</div>
 
 			<div class="px-2">
@@ -491,7 +518,17 @@ const noHistory = $derived(loopStatus ? (loopStatus.type === 'self' ? 'isLoop' :
 				hoveringResult = false
 			}}
 		>
-			{#if isLoadingAndNotMock}
+			{#if showLogs && selectedJob?.type === 'CompletedJob' && selectedJob?.['logs']}
+				<LogViewer
+					small
+					jobId={selectedJob.id}
+					duration={selectedJob['duration_ms']}
+					mem={selectedJob['mem_peak']}
+					content={selectedJob['logs']}
+					isLoading={false}
+					tag={selectedJob['tag']}
+				/>
+			{:else if isLoadingAndNotMock}
 				<div class="flex flex-col items-center justify-center">
 					<Loader2 class="animate-spin" />
 				</div>

package/package/components/flows/propPicker/StepHistory.svelte

@@ -9,7 +9,7 @@ import { Pin } from 'lucide-svelte';
 import { Cell } from '../../table';
 import JobPickerLight from './JobPickerLight.svelte';
 let { selected = $bindable(undefined), moduleId = '', getLogs = false, mockValue = undefined, mockEnabled = false, path = '', staticInputs = undefined, noHistory = undefined } = $props();
-const { pathStore } = getContext('FlowEditorContext') ?? {};
+const { pathStore, flowStateStore } = getContext('FlowEditorContext') ?? {};
 const dispatch = createEventDispatcher();
 let infiniteList = $state(undefined);
 let loadInputsPageFn = undefined;
@@ -57,6 +57,14 @@ async function getJobResultAndLogs(jobId, noLogs) {
 $effect(() => {
     infiniteList && !noHistory && untrack(() => initLoadInputs());
 });
+let lastSeenJobId = $state(undefined);
+$effect(() => {
+    const jobId = flowStateStore?.val[moduleId]?.previewJobId;
+    if (jobId && jobId !== lastSeenJobId) {
+        lastSeenJobId = jobId;
+        untrack(() => infiniteList?.loadData('forceRefresh'));
+    }
+});
 function handleSelect(e) {
     if (e.detail === 'extraRow') {
         if (selected === 'extraRow') {

package/package/components/git_sync/GitSyncContext.svelte.js

@@ -98,7 +98,6 @@ export function createGitSyncContext(workspace) {
             script_path: repo.script_path,
             use_individual_branch: repo.use_individual_branch,
             group_by_folder: repo.group_by_folder,
-            force_branch: repo.force_branch,
             settings: repo.settings,
             exclude_types_override: repo.exclude_types_override
         };
@@ -113,7 +112,7 @@ export function createGitSyncContext(workspace) {
                 include_path: ['f/**'],
                 exclude_path: [],
                 extra_include_path: [],
-                include_type: ['script', 'flow', 'app', 'folder']
+                include_type: ['script', 'flow', 'app', 'folder', 'workspacedependencies']
             },
             exclude_types_override: [],
             legacyImported: false,
@@ -286,7 +285,7 @@ export function createGitSyncContext(workspace) {
                         // Determine default types - use workspace legacy or fallback
                         const defaultTypes = workspaceLegacyIncludeType.length > 0
                             ? [...workspaceLegacyIncludeType]
-                            : ['script', 'flow', 'app', 'folder'];
+                            : ['script', 'flow', 'app', 'folder', 'workspacedependencies'];
                         let repoSettings;
                         if (isRepoLegacy) {
                             // Legacy repo: inherit from workspace-level settings and apply exclude_types_override
@@ -307,7 +306,13 @@ export function createGitSyncContext(workspace) {
                                 include_path: repo.settings?.include_path ?? ['f/**'],
                                 exclude_path: repo.settings?.exclude_path ?? [],
                                 extra_include_path: repo.settings?.extra_include_path ?? [],
-                                include_type: repo.settings?.include_type ?? ['script', 'flow', 'app']
+                                include_type: repo.settings?.include_type ?? [
+                                    'script',
+                                    'flow',
+                                    'app',
+                                    'folder',
+                                    'workspacedependencies'
+                                ]
                             };
                         }
                         return {
@@ -358,7 +363,6 @@ export function createGitSyncContext(workspace) {
                     script_path: repoToSave.script_path,
                     use_individual_branch: repoToSave.use_individual_branch,
                     group_by_folder: repoToSave.group_by_folder,
-                    force_branch: repoToSave.force_branch,
                     settings: repoToSave.settings,
                     exclude_types_override: repoToSave.exclude_types_override
                 }
@@ -512,7 +516,7 @@ export function createGitSyncContext(workspace) {
                 include_path: ['f/**'],
                 exclude_path: [],
                 extra_include_path: [],
-                include_type: ['script', 'flow', 'app', 'folder']
+                include_type: ['script', 'flow', 'app', 'folder', 'workspacedependencies']
             },
             exclude_types_override: [],
             legacyImported: false,
@@ -538,7 +542,7 @@ export function createGitSyncContext(workspace) {
                 include_path: ['f/**'],
                 exclude_path: [],
                 extra_include_path: [],
-                include_type: ['script', 'flow', 'app', 'folder']
+                include_type: ['script', 'flow', 'app', 'folder', 'workspacedependencies']
             },
             exclude_types_override: [],
             legacyImported: false,

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">import { Save, Trash, XCircle, CheckCircle2, RotateCw, RotateCcw, Download, Upload, Plus } from 'lucide-svelte';
 import { Button, Alert } from '../common';
-import TextInput from '../text_input/TextInput.svelte';
-import Section from '../Section.svelte';
 import { getGitSyncContext } from './GitSyncContext.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
 import GitSyncFilterSettings from '../workspaceSettings/GitSyncFilterSettings.svelte';
 import DetectionFlow from './DetectionFlow.svelte';
 import { sendUserToast } from '../../toast';
-import Toggle from '../Toggle.svelte';
 import { fade } from 'svelte/transition';
 import { workspaceStore } from '../../stores';
 import GitSyncModeDisplay from './GitSyncModeDisplay.svelte';
@@ -387,8 +384,8 @@ function handlePullSettings() {
 
 			{#if repo.script_path}
 				<Alert type="warning" title="Pinned git sync script version">
-					This repository uses a pinned sync script: <code>{repo.script_path}</code>.
-					Switch to auto-managed to always use the latest version bundled with Windmill.
+					This repository uses a pinned sync script: <code>{repo.script_path}</code>. Switch to
+					auto-managed to always use the latest version bundled with Windmill.
 					<div class="flex mt-2">
 						<Button
 							size="xs"
@@ -460,30 +457,6 @@ function handlePullSettings() {
 							</div>
 						{/if}
 					</div>
-
-					<!-- Advanced settings (collapsible) -->
-					<Section label="Advanced" small collapsable initiallyCollapsed={!repo.force_branch}>
-						<Toggle
-							checked={!!repo.force_branch}
-							on:change={(e) => {
-								if (e.detail) {
-									repo.force_branch = $workspaceStore ?? ''
-								} else {
-									repo.force_branch = undefined
-								}
-							}}
-							options={{
-								right: 'Environment (experimental)',
-								rightTooltip:
-									'Made for monobranch setups. Passes the value as --branch/--env to the wmill CLI, which selects the matching branch/env configuration from wmill.yaml and includes the branch/env in the item paths.'
-							}}
-						/>
-						{#if repo.force_branch != null && repo.force_branch !== undefined}
-							<div class="w-48 mt-2">
-								<TextInput size="sm" bind:value={repo.force_branch} />
-							</div>
-						{/if}
-					</Section>
 				{/if}
 			{/if}
 		{:else}

package/package/components/git_sync/PullWorkspaceModal.svelte

@@ -565,17 +565,16 @@ git pull
 
 {#if !settingsOnly}# Push from git repository to workspace
 wmill sync push --workspace {$workspaceStore} --repository {gitRepoResourcePath}
-{:else}# Edit wmill.yaml file
+						{:else}# Edit wmill.yaml file
 vim wmill.yaml
 git add wmill.yaml
-
-{/if}# Commit changes
+						{/if}# Commit changes
 git commit
 git push
 {#if settingsOnly}
-# Push settings only from git repository or click the pull settings button above{#if currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath} --promotion main{:else}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath}{/if}{/if}</pre
+							# Push settings only from git repository or click the pull settings button above{#if currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch}
+								wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath} --promotion main{:else}
+								wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath}{/if}{/if}</pre
 					>
 					{#if currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch && settingsOnly}
 						<div class="text-xs text-primary mt-3">
@@ -588,7 +587,7 @@ wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoR
 								>
 							</div>
 							<pre class="text-xs bg-surface p-2 rounded mt-2 overflow-x-auto"
-								>gitBranches:
+								>workspaces:
   main:
     promotionOverrides:
       # Add your promotion-specific settings here

package/package/components/graph/FlowGraphV2.svelte

@@ -71,7 +71,7 @@ const diffManager = createFlowDiffManager();
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDuplicate = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], groupedModules: groupedModulesProp = undefined, groupError = undefined, failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, moduleActions = undefined, selectionManager: selectionManagerProp = undefined, path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moveManager = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false, noteMode = false, notes = undefined, groups = undefined, groupDisplayState: groupDisplayStateProp = undefined, exitNoteMode = undefined, onNotePositionUpdate = undefined, chatInputEnabled = false, sharedViewport = undefined, onViewportChange = undefined, leftHeader = undefined, diffBeforeFlow = undefined, currentInputSchema = undefined, markRemovedAsShadowed = false, multiSelectEnabled = false, onDeleteMultiple = undefined, onDuplicateMultiple = undefined, onMoveMultiple = undefined, movingIds = undefined } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDuplicate = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], groupedModules: groupedModulesProp = undefined, groupError = undefined, failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, moduleActions = undefined, selectionManager: selectionManagerProp = undefined, path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moveManager = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false, noteMode = false, notes = undefined, groups = undefined, groupDisplayState: groupDisplayStateProp = undefined, exitNoteMode = undefined, onNotePositionUpdate = undefined, chatInputEnabled = false, sharedViewport = undefined, onViewportChange = undefined, leftHeader = undefined, diffBeforeFlow = undefined, currentInputSchema = undefined, markRemovedAsShadowed = false, multiSelectEnabled = false, onDeleteMultiple = undefined, onDuplicateMultiple = undefined, onMoveMultiple = undefined, movingIds = undefined, controlsPosition = 'top', outerDivClass = '' } = $props();
 // Initialize note manager with fine-grained reactivity
 const noteManager = new NoteManager(() => notes ?? [], (newNodes) => {
     nodes = newNodes;
@@ -458,11 +458,15 @@ function updateHeight() {
     else {
         const minY = Math.min(...nodes.map((n) => n.position.y));
         const maxBottom = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100));
-        height = Math.max(maxBottom - minY, minHeight);
+        const computed = maxBottom - minY;
+        height = Math.max(Math.min(computed, maxHeight ?? computed), minHeight);
     }
 }
 $effect(() => {
+    // Track both bounds — updateHeight() reads both, so missing one (as
+    // maxHeight was) leaves height stale when only that bound changes.
     minHeight;
+    maxHeight;
     untrack(() => updateHeight());
 });
 const nodeTypes = {
@@ -700,7 +704,7 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 {/if}
 <div
 	style={`height: ${height}px; max-height: ${maxHeight}px;`}
-	class="overflow-clip relative"
+	class="overflow-clip relative {outerDivClass}"
 	bind:clientWidth={debouncedWidth}
 	bind:this={flowContainer}
 >
@@ -819,7 +823,7 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 					</div>
 				{:else}
 					<Controls
-						position="top-right"
+						position={controlsPosition === 'bottom' ? 'bottom-right' : 'top-right'}
 						orientation="horizontal"
 						showLock={false}
 						fitViewOptions={{ nodes: nodes.filter((n) => n.type !== 'note') }}

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -126,6 +126,8 @@ interface Props {
     diffBeforeFlow?: OpenFlow;
     currentInputSchema?: Record<string, any>;
     markRemovedAsShadowed?: boolean;
+    controlsPosition?: 'top' | 'bottom';
+    outerDivClass?: string;
 }
 declare const FlowGraphV2: import("svelte").Component<Props, {
     isNodeVisible: (nodeId: string) => boolean;

package/package/components/graph/groupedModulesProxy.svelte.d.ts

@@ -10,6 +10,13 @@ export type ExtendedOpenFlow = {
     };
     [key: string]: any;
 };
+export type PreparedStructureDelete = {
+    affectedGroups: FlowGroup[];
+    duplicateGroups: FlowGroup[];
+    commit: (commitOpts?: {
+        removeDuplicates?: boolean;
+    }) => void;
+};
 /**
  * Reactive read-only view of the flow structure tree.
  * The tree is always derived from flowStore (single source of truth).
@@ -41,6 +48,9 @@ export declare class GroupedModulesProxy {
             removeDuplicates?: boolean;
         }) => void;
     };
+    prepareDelete(ids: string[], opts?: {
+        displayState?: import('./groupEditor.svelte').GroupDisplayState;
+    }): PreparedStructureDelete;
     /**
      * Convenience: prepare + auto-commit. Only use for mutations that cannot
      * empty groups (e.g. inserts). Throws if groups are unexpectedly emptied.

package/package/components/graph/groupedModulesProxy.svelte.js

@@ -3,7 +3,7 @@ import { groupKey } from './groupEditor.svelte';
 import { getAllModules } from '../flows/flowExplorer';
 import { computeGroupModuleIds } from './groupDetectionUtils';
 import { stateSnapshot } from '../../svelte5Utils.svelte';
-import { buildStructureTree, deriveGroupsFromStructure, applyStructureToModules, removeEmptyGroups, findDuplicateGroups, removeDuplicateGroups, flattenStructureIds } from './flowStructure';
+import { buildStructureTree, deriveGroupsFromStructure, applyStructureToModules, removeEmptyGroups, findDuplicateGroups, removeDuplicateGroups, flattenStructureIds, findInStructure } from './flowStructure';
 /**
  * Reactive read-only view of the flow structure tree.
  * The tree is always derived from flowStore (single source of truth).
@@ -70,6 +70,22 @@ export class GroupedModulesProxy {
         };
         return { emptiedGroups, duplicateGroups, commit };
     }
+    prepareDelete(ids, opts) {
+        const { emptiedGroups, duplicateGroups, commit } = this.prepareMutation((tree) => {
+            for (const id of ids) {
+                const found = findInStructure(tree, id);
+                if (!found) {
+                    continue;
+                }
+                found.parentChildren.splice(found.index, 1);
+            }
+        }, opts);
+        return {
+            affectedGroups: [...emptiedGroups, ...duplicateGroups],
+            duplicateGroups,
+            commit
+        };
+    }
     /**
      * Convenience: prepare + auto-commit. Only use for mutations that cannot
      * empty groups (e.g. inserts). Throws if groups are unexpectedly emptied.

package/package/components/graph/renderers/triggers/TriggersBadge.svelte

@@ -5,6 +5,7 @@ import { getContext } from 'svelte';
 import {} from '../../../triggers';
 import { enterpriseLicense } from '../../../../stores';
 import { MqttIcon, NatsIcon, KafkaIcon, AwsIcon, GoogleCloudIcon } from '../../../icons';
+import AzureIcon from '../../../icons/AzureIcon.svelte';
 import {} from '../../../triggers/utils';
 import { Menu, Menubar, MeltButton, MenuItem, Tooltip } from '../../../meltComponents';
 import { twMerge } from 'tailwind-merge';
@@ -13,6 +14,7 @@ import TriggerLabel from '../../../triggers/TriggerLabel.svelte';
 import CountBadge from '../../../common/badge/CountBadge.svelte';
 import NextcloudIcon from '../../../icons/NextcloudIcon.svelte';
 import GoogleIcon from '../../../icons/GoogleIcon.svelte';
+import GithubIcon from '../../../icons/GithubIcon.svelte';
 const { triggersState, triggersCount } = getContext('TriggerContext');
 let { selected, showOnlyWithCount, 
 // @ts-ignore - This is an output-only prop used with bind:
@@ -33,10 +35,12 @@ let triggerTypeConfig = $derived(() => {
         mqtt: { icon: MqttIcon, countKey: 'mqtt_count', disabled: !$enterpriseLicense },
         sqs: { icon: AwsIcon, countKey: 'sqs_count', disabled: !$enterpriseLicense },
         gcp: { icon: GoogleCloudIcon, countKey: 'gcp_count', disabled: !$enterpriseLicense },
+        azure: { icon: AzureIcon, countKey: 'azure_count', disabled: !$enterpriseLicense },
         poll: { icon: SchedulePollIcon },
         cli: { icon: Terminal },
         nextcloud: { icon: NextcloudIcon, countKey: 'nextcloud_count' },
-        google: { icon: GoogleIcon, countKey: 'google_count' }
+        google: { icon: GoogleIcon, countKey: 'google_count' },
+        github: { icon: GithubIcon, countKey: 'github_count' }
     };
     // Add native trigger services that are available
     for (const { service, icon } of availableNativeServices) {
@@ -56,11 +60,13 @@ let allTypes = $derived([
     'mqtt',
     'sqs',
     'gcp',
+    'azure',
     'email',
     'poll',
     'cli',
     'nextcloud',
-    'google'
+    'google',
+    'github'
 ]);
 function camelCaseToWords(s) {
     const result = s.replace(/([A-Z])/g, ' $1');

package/package/components/home/HomeConnectDrawer.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">import { workspaceStore } from '../../stores';
+import { Button, Drawer, DrawerContent, Tab, TabContent, Tabs } from '../common';
+import CreateToken from '../settings/CreateToken.svelte';
+import CopyableCodeBlock from '../details/CopyableCodeBlock.svelte';
+import { Bot, ExternalLink, Terminal } from 'lucide-svelte';
+import { shell } from 'svelte-highlight/languages';
+let drawer = $state();
+let selectedTab = $state('cli');
+let openVersion = $state(0);
+const origin = $derived(typeof window === 'undefined' ? '' : window.location.origin);
+const workspaceId = $derived($workspaceStore ?? '<workspace>');
+const cliCommands = $derived(`npm install -g windmill-cli
+wmill workspace add ${workspaceId} ${workspaceId} ${origin}
+wmill init
+wmill sync pull`);
+function noop() { }
+export function openDrawer(tab = 'cli') {
+    selectedTab = tab;
+    openVersion += 1;
+    drawer?.openDrawer();
+}
+function closeDrawer() {
+    drawer?.closeDrawer();
+}
+</script>
+
+<Drawer bind:this={drawer} size="720px">
+	<DrawerContent title="Connect this workspace" on:close={closeDrawer}>
+		<div class="flex flex-col gap-5 pb-4">
+			<div class="flex flex-col gap-2">
+				<div class="w-full">
+					<Tabs values={['cli', 'mcp']} bind:selected={selectedTab} wrapperClass="scrollbar-hidden">
+						<Tab value="cli" label="CLI" icon={Terminal} />
+						<Tab value="mcp" label="MCP" icon={Bot} />
+						{#snippet content()}
+							<div class="pt-4">
+								<TabContent value="cli">
+									<div class="flex flex-col gap-4">
+										<div class="flex items-start justify-between gap-3 flex-wrap">
+											<div class="flex flex-col gap-1">
+												<h3 class="text-sm font-semibold text-emphasis">Local setup</h3>
+												<p class="text-xs text-secondary max-w-xl">
+													Run this in your local repo to bind the current workspace, create
+													<code class="rounded bg-surface-secondary px-1 py-0.5 font-mono text-2xs text-emphasis"
+														>wmill.yaml</code
+													>, and pull the latest files.
+												</p>
+											</div>
+
+											<Button
+												variant="subtle"
+												unifiedSize="sm"
+												href="https://www.windmill.dev/docs/advanced/cli"
+												target="_blank"
+												startIcon={{ icon: ExternalLink }}
+											>
+												CLI docs
+											</Button>
+										</div>
+
+										<CopyableCodeBlock
+											code={cliCommands}
+											language={shell}
+											wrap
+											copyOnClick={false}
+										/>
+
+										<p class="text-2xs text-secondary">
+											<code class="rounded bg-surface-secondary px-1 py-0.5 font-mono text-2xs text-emphasis"
+												>wmill workspace add</code
+											>
+											will handle authentication,
+											<code class="rounded bg-surface-secondary px-1 py-0.5 font-mono text-2xs text-emphasis"
+												>wmill init</code
+											>
+											bootstraps the local config, and
+											<code class="rounded bg-surface-secondary px-1 py-0.5 font-mono text-2xs text-emphasis"
+												>wmill sync pull</code
+											>
+											fetches the workspace content.
+										</p>
+									</div>
+								</TabContent>
+
+								<TabContent value="mcp">
+									<div class="flex flex-col gap-4">
+										<div class="flex items-start justify-between gap-3 flex-wrap">
+											<div class="flex flex-col gap-1">
+												<h3 class="text-sm font-semibold text-emphasis">MCP URL</h3>
+												<p class="text-xs text-secondary max-w-xl">
+													Generate an MCP server URL for the current workspace and choose which
+													scripts, flows, and endpoints the client can access.
+												</p>
+											</div>
+
+											<Button
+												variant="subtle"
+												unifiedSize="sm"
+												href="https://www.windmill.dev/docs/core_concepts/mcp"
+												target="_blank"
+												startIcon={{ icon: ExternalLink }}
+											>
+												MCP docs
+											</Button>
+										</div>
+
+										{#key openVersion}
+											<CreateToken
+												mcpOnly
+												lockWorkspace
+												title="Generate MCP URL"
+												defaultNewTokenWorkspace={$workspaceStore}
+												onTokenCreated={noop}
+											/>
+										{/key}
+									</div>
+								</TabContent>
+							</div>
+						{/snippet}
+					</Tabs>
+				</div>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/home/HomeConnectDrawer.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const HomeConnectDrawer: import("svelte").Component<Record<string, never>, {
+    openDrawer: (tab?: "mcp" | "cli") => void;
+}, "">;
+type HomeConnectDrawer = ReturnType<typeof HomeConnectDrawer>;
+export default HomeConnectDrawer;

package/package/components/home/deploy_ui.js

@@ -16,6 +16,6 @@ async function getDeployUiSettingsInner() {
     if (!get(enterpriseLicense)) {
         return ALL_DEPLOYABLE;
     }
-    let settings = await WorkspaceService.getSettings({ workspace: get(workspaceStore) });
+    let settings = await WorkspaceService.getPublicSettings({ workspace: get(workspaceStore) });
     return settings.deploy_ui ?? ALL_DEPLOYABLE;
 }

package/package/components/icons/AzureIcon.svelte

@@ -1,29 +1,16 @@
 <script lang="ts">"use strict";
-let { height = '24px', width = '24px' } = $props();
+let { size = 16, color = undefined, class: clazz = '' } = $props();
 </script>
 
-<svg id="azure" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.5 377.3" {width} {height}
-	><style>
-		.st0-azure {
-			fill: #00bef2;
-		}
-		.st1-azure {
-			fill: #fff;
-			stroke: #fff;
-			stroke-width: 1.2357;
-			stroke-linecap: round;
-			stroke-linejoin: round;
-		}</style><g id="layer1" transform="translate(-39.022 -78.115)"
-		><g id="g1016" transform="translate(-63.947 -88.179)"
-			><path
-				id="path1008"
-				class="st0-azure"
-				d="M290 166.3c.4 0 .8.5 1.4 1.4.5.8 42.6 51.3 93.6 112.2 51 60.9 92.6 111 92.4 111.3-.1.3-40.7 33.6-90.2 73.9s-91.6 74.6-93.5 76.2c-3.3 2.7-3.5 2.8-4.7 1.6-.7-.7-42.9-35.2-93.8-76.7S102.8 390.5 103 390c.2-.5 42-50.4 93.1-111s92.9-110.7 93.1-111.5c.2-.8.5-1.2.8-1.2z"
-			/><path
-				id="path923"
-				class="st1-azure"
-				d="M283.1 483.6c-5.8-2.1-12.8-8.1-15.7-13.7-3.6-6.9-3.3-17.7.7-26.3 3.1-6.4 3.1-6.6 1.1-8.1-1.1-.8-14.4-8.2-29.4-16.3-15-8.1-28.1-15.2-29-15.7-1.2-.7-3.2 0-6.8 2.3-11.7 7.4-23.9 6.6-33.5-2.3-6.9-6.4-8.9-10.9-8.9-20.1 0-8.9 1.8-13.5 7.5-19.2 7.7-7.7 18-10.3 27.9-7 5.4 1.8 5.5 1.8 8.9-.8 4-3 36.1-32.3 51.6-47l10.7-10.2-3.2-6.7c-6.5-13.5-3.2-28.5 8.2-37.5 6.2-4.9 10.8-6.4 19.7-6.4 20.8 0 35.3 21.8 27.5 41.3-2.1 5.4-2.1 5.5-.1 8.8 1.7 2.9 30.6 37.8 45.9 55.6 2.7 3.1 5.7 5.6 6.7 5.6s4.4-1 7.6-2.2c14.9-5.9 30.6.7 36.8 15.5 4 9.5.5 22.3-8 30-6 5.4-10.4 7.1-18.4 7.1-5.6 0-7.7-.6-13.6-3.8-4.4-2.4-7.8-3.6-9.2-3.2-2.4.6-39.3 25.9-47.5 32.5-5 4.1-5.4 5.6-2.8 11.7 2.5 6 2.2 15.4-.6 21.3-3.1 6.5-10.8 13-17.5 15-6.8 1.9-10.9 1.9-16.6-.2zm1.7-110.2v-57l-3.2-4.4c-1.8-2.4-3.5-4.4-3.8-4.4-1.3 0-65.9 58.7-65.9 59.9 0 .3 1 3.3 2.2 6.5 1.2 3.3 2.1 8 2 10.7-.1 2.7-.1 5.7-.1 6.7.1 2.3 21.7 16.1 54.1 34.8 8.9 5.2 12 6.5 13.1 5.6 1.3-1.1 1.6-12.2 1.6-58.4zm27.4 50.4c42.8-26.9 50.8-32.3 51.3-34.3.3-1.2.7-5.9.8-10.6l.3-8.4-21.8-25.9c-23.4-27.7-32-37.1-34-37.1-.7 0-4.2 2-7.8 4.4l-6.6 4.4.3 56.9c.3 51 .7 59.6 2.6 59.6.2.1 7-4 14.9-9z"
-			/></g
-		></g
-	></svg
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={`${size}px`}
+	height={`${size}px`}
+	viewBox="0 0 24 24"
+	fill={color ?? 'currentColor'}
+	class={clazz}
 >
+	<path
+		d="M22.379 23.343a1.62 1.62 0 0 0 1.536-1.1l.029-.092q.053-.164.081-.336v-.016a1.68 1.68 0 0 0-.268-1.227L15.147 5.44a1.63 1.63 0 0 0-1.354-.724l-3.473.011L5.94 8.57a6 6 0 0 0-1.386 1.74L.262 17.717a1.63 1.63 0 0 0 1.422 2.429l-.055-.013zM13.398 7.25l5.322 9.183-10.683.024zm-3.363 12.754-8.316.021 8.318-14.4 1.795 3.1-6.516 11.274z"
+	/>
+</svg>

package/package/components/icons/AzureIcon.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
-    height?: string;
-    width?: string;
+    size?: number;
+    color?: string | undefined;
+    class?: string;
 }
 declare const AzureIcon: import("svelte").Component<Props, {}, "">;
 type AzureIcon = ReturnType<typeof AzureIcon>;

package/package/components/icons/GithubIcon.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">"use strict";
-let { height = '24px', width = '24px' } = $props();
+let { size = undefined, height: heightProp = 24, width: widthProp = 24, color = undefined, class: clazz = '' } = $props();
+const { width, height } = $derived(size ? { width: size, height: size } : { width: widthProp, height: heightProp });
 </script>
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	x="0px"
-	y="0px"
 	{width}
 	{height}
 	viewBox="0 0 30 30"
-	style="fill:currentcolor;"
+	fill={color ?? 'currentColor'}
+	class={clazz}
 >
 	<path
 		d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"