windmill-components 1.677.1 → 1.687.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

@@ -113,7 +113,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 +286,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 +307,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 {
@@ -512,7 +518,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 +544,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, outerDivClass = '' } = $props();
 // Initialize note manager with fine-grained reactivity
 const noteManager = new NoteManager(() => notes ?? [], (newNodes) => {
     nodes = newNodes;
@@ -700,7 +700,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}
 >

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

@@ -126,6 +126,7 @@ interface Props {
     diffBeforeFlow?: OpenFlow;
     currentInputSchema?: Record<string, any>;
     markRemovedAsShadowed?: boolean;
+    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

@@ -13,6 +13,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:
@@ -36,7 +37,8 @@ let triggerTypeConfig = $derived(() => {
         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) {
@@ -60,7 +62,8 @@ let allTypes = $derived([
     '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/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"

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

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

package/package/components/instanceSettings/ExternalJwtTokens.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">import DataTable from '../table/DataTable.svelte';
+import Head from '../table/Head.svelte';
+import Cell from '../table/Cell.svelte';
+import SettingsPageHeader from '../settings/SettingsPageHeader.svelte';
+import Toggle from '../Toggle.svelte';
+import { displayDate } from '../../utils';
+import { Check, X } from 'lucide-svelte';
+let { tokens, hasMore, loading, activeOnly, onLoadMore, onActiveOnlyChange } = $props();
+const loadMoreSize = 50;
+</script>
+
+<SettingsPageHeader
+	title="External JWTs"
+	description="External JWT tokens that have authenticated against this instance, deduplicated by their claims."
+/>
+
+<div class="flex flex-row gap-2 items-center mb-2">
+	<Toggle
+		checked={activeOnly}
+		on:change={(e) => onActiveOnlyChange(e.detail)}
+		options={{
+			left: 'Recently active only',
+			leftTooltip: 'Show only tokens used in the last 30 days'
+		}}
+	/>
+</div>
+
+<DataTable
+	shouldLoadMore={hasMore}
+	loadMore={loadMoreSize}
+	{loading}
+	on:loadMore={() => onLoadMore()}
+>
+	<Head>
+		<tr>
+			<Cell head first>Email</Cell>
+			<Cell head>Username</Cell>
+			<Cell head>Admin</Cell>
+			<Cell head>Operator</Cell>
+			<Cell head>Workspace</Cell>
+			<Cell head>Label</Cell>
+			<Cell head>Scopes</Cell>
+			<Cell head last>Last Used</Cell>
+		</tr>
+	</Head>
+	<tbody>
+		{#each tokens as token, i (token.jwt_hash)}
+			<tr class={i % 2 === 0 ? 'bg-surface-tertiary' : 'bg-surface'}>
+				{#if token.email === ''}
+					<Cell first colspan={7}>
+						<span class="text-tertiary italic">Legacy entry — details unavailable</span>
+					</Cell>
+					<Cell last><span class="whitespace-nowrap">{displayDate(token.last_used_at)}</span></Cell>
+				{:else}
+					<Cell first><span class="font-mono text-xs">{token.email}</span></Cell>
+					<Cell>{token.username}</Cell>
+					<Cell>
+						{#if token.is_admin}
+							<Check size={14} class="text-green-600" />
+						{:else}
+							<X size={14} class="text-tertiary" />
+						{/if}
+					</Cell>
+					<Cell>
+						{#if token.is_operator}
+							<Check size={14} class="text-green-600" />
+						{:else}
+							<X size={14} class="text-tertiary" />
+						{/if}
+					</Cell>
+					<Cell>{token.workspace_id ?? '-'}</Cell>
+					<Cell>{token.label ?? '-'}</Cell>
+					<Cell>
+						{#if token.scopes && token.scopes.length > 0}
+							{token.scopes.join(', ')}
+						{:else}
+							-
+						{/if}
+					</Cell>
+					<Cell last><span class="whitespace-nowrap">{displayDate(token.last_used_at)}</span></Cell>
+				{/if}
+			</tr>
+		{/each}
+	</tbody>
+</DataTable>

package/package/components/instanceSettings/ExternalJwtTokens.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ExternalJwtToken } from '../../gen';
+interface Props {
+    tokens: ExternalJwtToken[];
+    hasMore: boolean;
+    loading: boolean;
+    activeOnly: boolean;
+    onLoadMore: () => void;
+    onActiveOnlyChange: (v: boolean) => void;
+}
+declare const ExternalJwtTokens: import("svelte").Component<Props, {}, "">;
+type ExternalJwtTokens = ReturnType<typeof ExternalJwtTokens>;
+export default ExternalJwtTokens;