feat: add workspace to URL via /w/<workspace_id>/ prefix

frontend/src/hooks.ts

@@ -1,3 +1,5 @@
+import type { Reroute } from '@sveltejs/kit'
+
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
 	const response = await resolve(event, {
@@ -6,3 +8,11 @@ export async function handle({ event, resolve }) {
 
 	return response
 }
+
+export const reroute: Reroute = ({ url }) => {
+	const match = url.pathname.match(/^\/w\/([^/]+)(\/.*)?$/)
+	if (match) {
+		return match[2] || '/'
+	}
+	return url.pathname
+}

frontend/src/lib/components/ArgInput.svelte

@@ -40,7 +40,7 @@
 	import MultiSelect from './select/MultiSelect.svelte'
 	import { safeSelectItems } from './select/utils.svelte'
 	import S3ArgInput from './common/fileUpload/S3ArgInput.svelte'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import { workspaceStore } from '$lib/stores'
 	import { getJsonSchemaFromResource } from './schema/jsonSchemaResource.svelte'
 	import AIProviderPicker from './AIProviderPicker.svelte'
@@ -568,7 +568,7 @@
 			{#if value && typeof value == 'string' && value?.startsWith('$res:')}
 				Linked to resource <a
 					target="_blank"
-					href="{base}/resources#/resource/{value.slice(5)}"
+					href="{$wsBase}/resources#/resource/{value.slice(5)}"
 					class="text-blue-500 underline"
 					>{value.slice(5)} <span class="inline-block -mb-0.5"><ExternalLink size={14} /></span></a
 				>

frontend/src/lib/components/AutoscalingConfigEditor.svelte

@@ -7,6 +7,7 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import { Alert, Button } from './common'
 	import { ExternalLink } from 'lucide-svelte'
+	import { getWsBase } from '$lib/workspaceUrl'
 	import TextInput from './text_input/TextInput.svelte'
 	import Label from './Label.svelte'
 	import MultiSelect from './select/MultiSelect.svelte'
@@ -189,15 +190,15 @@
 										variant="default"
 										target="_blank"
 										endIcon={{ icon: ExternalLink }}
-										href="/scripts/add?hub=hub%2F9204%2Fhelper%2FScale%20a%20worker%20group%20deployed%20as%20a%20kubernetes%20service&workspace=admins"
+										href="{getWsBase('admins')}/scripts/add?hub=hub%2F9204%2Fhelper%2FScale%20a%20worker%20group%20deployed%20as%20a%20kubernetes%20service"
 										>Create from template
 										{disabled}
 									</Button>
 								{:else}
 									<Button
 										variant="default"
 										target="_blank"
-										href={`/runs/${config.integration.path}?workspace=admins`}
+										href={`${getWsBase('admins')}/runs/${config.integration.path}`}
 										endIcon={{ icon: ExternalLink }}
 										{disabled}
 									>

frontend/src/lib/components/CompareWorkspaces.svelte

@@ -57,7 +57,7 @@
 	import type { TriggerKind } from './triggers'
 	import { triggerDisplayNamesMap, triggerKindToTriggerType } from './triggers/utils'
 	import { getEmailAddress, getEmailDomain } from './triggers/email/utils'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 
@@ -683,7 +683,7 @@
 
 	function getTriggerHref(triggerKind: TriggerKind): string | undefined {
 		const pagePath = triggerKindToPagePath[triggerKind]
-		return pagePath ? `${base}${pagePath}` : undefined
+		return pagePath ? `${$wsBase}${pagePath}` : undefined
 	}
 
 	// Fetch triggers when workspace is available

frontend/src/lib/components/DeployWorkspace.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, untrack } from 'svelte'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import { enterpriseLicense, superadmin, workspaceStore } from '$lib/stores'
 	import {
 		AppService,
@@ -422,7 +422,7 @@
 	>
 {:else}
 	<Alert type="info" title="Shareable page"
-		>Share this <a href="{base}/deploy/{kind}/{initialPath}">link</a> to have another properly permissioned
+		>Share this <a href="{$wsBase}/deploy/{kind}/{initialPath}">link</a> to have another properly permissioned
 		user do the deployment</Alert
 	>
 

frontend/src/lib/components/EditorBar.svelte

@@ -17,7 +17,7 @@
 	import { ResourceService, VariableService, WorkspaceService, type Script } from '$lib/gen'
 
 	import { workspaceStore } from '$lib/stores'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import type Editor from './Editor.svelte'
 	import ItemPicker from './ItemPicker.svelte'
 	import VariableEditor from './VariableEditor.svelte'
@@ -681,7 +681,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				startIcon={{ icon: Plus }}
 				target="_blank"
 				variant="accent"
-				href="{base}/resources?connect_app=undefined"
+				href="{$wsBase}/resources?connect_app=undefined"
 			>
 				Add resource
 			</Button>
@@ -739,7 +739,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					startIcon={{ icon: Settings }}
 					target="_blank"
 					variant="accent"
-					href="{base}/workspace_settings?tab=windmill_lfs"
+					href="{$wsBase}/workspace_settings?tab=windmill_lfs"
 				>
 					Go to settings
 				</Button>
@@ -782,7 +782,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					startIcon={{ icon: Settings }}
 					target="_blank"
 					variant="accent"
-					href="{base}/workspace_settings?tab=windmill_data_tables"
+					href="{$wsBase}/workspace_settings?tab=windmill_data_tables"
 				>
 					Go to settings
 				</Button>

frontend/src/lib/components/ErrorOrRecoveryHandler.svelte

@@ -30,7 +30,7 @@
 	import ChannelSelector from '$lib/components/ChannelSelector.svelte'
 
 	import type { Schema, SupportedLanguage } from '$lib/common'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import { enterpriseLicense, workspaceStore } from '$lib/stores'
 	import MsTeamsIcon from '$lib/components/icons/MSTeamsIcon.svelte'
 	import { classNames, emptySchema, emptyString, sendUserToast, tryEvery } from '$lib/utils'
@@ -493,7 +493,7 @@
 
 									<a
 										target="_blank"
-										href={`${base}/run/${connectionTestJob.uuid}?workspace=${$workspaceStore}`}
+										href={`${$wsBase}/run/${connectionTestJob.uuid}`}
 										class="inline-flex items-center gap-1"
 									>
 										{connectionTestJob.uuid}
@@ -585,7 +585,7 @@
 								Message sent via Windmill job
 								<a
 									target="_blank"
-									href={`${base}/run/${connectionTestJob.uuid}?workspace=${$workspaceStore}`}
+									href={`${$wsBase}/run/${connectionTestJob.uuid}`}
 								>
 									{connectionTestJob.uuid}
 								</a>

frontend/src/lib/components/FlowLogViewer.svelte

@@ -10,8 +10,7 @@
 		ExternalLink,
 		Keyboard
 	} from 'lucide-svelte'
-	import { base } from '$lib/base'
-	import { workspaceStore } from '$lib/stores'
+	import { wsBase } from '$lib/workspaceUrl'
 	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
 	import LogViewer from './LogViewer.svelte'
 	import FlowLogViewer from './FlowLogViewer.svelte'
@@ -98,7 +97,7 @@
 
 	function getJobLink(jobId: string | undefined): string {
 		if (!jobId) return ''
-		return `${base}/run/${jobId}?workspace=${workspaceId ?? $workspaceStore}`
+		return `${$wsBase}/run/${jobId}`
 	}
 
 	function getStatusColor(status: FlowStatusModule['type'] | undefined): string {

frontend/src/lib/components/FlowMetadata.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { type Job } from '$lib/gen'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import JobStatus from '$lib/components/JobStatus.svelte'
 	import { displayDate, truncateRev } from '$lib/utils'
 	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
 	import TimeAgo from './TimeAgo.svelte'
-	import { workspaceStore } from '$lib/stores'
 	import Tooltip from './Tooltip.svelte'
 	import { Clock, MemoryStick, Calendar, Bot, User, Code2 } from 'lucide-svelte'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
@@ -57,7 +56,7 @@
 					<BarsStaggered size={SMALL_ICON_SIZE} class="min-w-3.5" />
 					<span class="whitespace-nowrap">
 						Step of flow
-						<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
+						<a href={`${$wsBase}/run/${job.parent_job}`}>
 							{truncateRev(job.parent_job, 18)}
 						</a>
 					</span>
@@ -67,7 +66,7 @@
 					<Bot size={SMALL_ICON_SIZE} class="min-w-3.5" />
 					<span class="whitespace-nowrap">
 						Triggered by parent
-						<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
+						<a href={`${$wsBase}/run/${job.parent_job}`}>
 							{job.parent_job}</a
 						>
 					</span>
@@ -94,7 +93,7 @@
 		{#if (job && job.job_kind == 'flow') || job?.job_kind == 'script'}
 			{@const stem = `${job?.job_kind}s`}
 			{@const isScript = job?.job_kind === 'script'}
-			{@const viewHref = `${base}/${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
+			{@const viewHref = `${$wsBase}/${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
 			<div class="flex flex-row gap-2 items-center">
 				{#if isScript}
 					<Code2 size={SMALL_ICON_SIZE} class="min-w-3.5" />
@@ -125,6 +124,6 @@
 	</div>
 	<div class="text-secondary text-2xs pt-2 whitespace-nowrap">
 		run id:
-		<a href={`${base}/run/${job.id}?workspace=${job.workspace_id}`}> {job.id} </a>
+		<a href={`${$wsBase}/run/${job.id}`}> {job.id} </a>
 	</div>
 </div>

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -15,7 +15,7 @@
 		type FlowValue
 	} from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import FlowJobResult from './FlowJobResult.svelte'
 	import WorkflowTimeline from './WorkflowTimeline.svelte'
 	import DisplayResult from './DisplayResult.svelte'
@@ -2058,8 +2058,8 @@
 																			class="text-right text-xs"
 																			rel="noreferrer"
 																			target="_blank"
-																			href="{base}/run/{node.job_id ??
-																				''}?workspace={job?.workspace_id}"
+																			href="{$wsBase}/run/{node.job_id ??
+																				''}"
 																		>
 																			{truncateRev(node.job_id ?? '', 10)}
 																			<ExternalLink size={12} class="inline-block" />

frontend/src/lib/components/Login.svelte

@@ -13,6 +13,7 @@
 	import { usersWorkspaceStore, workspaceStore, userStore } from '$lib/stores'
 	import { classNames, emptyString, escapeHtml, parseQueryParams } from '$lib/utils'
 	import { base } from '$lib/base'
+	import { extractWorkspaceFromPath } from '$lib/workspaceUrl'
 	import { getUserExt } from '$lib/user'
 	import { sendUserToast } from '$lib/toast'
 	import { isCloudHosted } from '$lib/cloud'
@@ -140,7 +141,10 @@
 		if ($workspaceStore) {
 			goto(rd ?? '/')
 		} else {
-			let workspaceTarget = parseQueryParams(rd ?? undefined)['workspace']
+			// Extract workspace from rd path (/w/<ws>/...) or query param (?workspace=X)
+			let workspaceTarget =
+				extractWorkspaceFromPath(rd ?? '') ??
+				parseQueryParams(rd ?? undefined)['workspace']
 			if (rd && workspaceTarget) {
 				$workspaceStore = workspaceTarget
 				goto(rd)

frontend/src/lib/components/PersistentScriptDrawer.svelte

@@ -4,7 +4,7 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import { createEventDispatcher, onDestroy } from 'svelte'
 	import { workspaceStore } from '$lib/stores'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import { displayDate, sleep, sendUserToast } from '$lib/utils'
 	import TableCustom from './TableCustom.svelte'
 	import { Hourglass, Loader2, Play, RefreshCw } from 'lucide-svelte'
@@ -139,7 +139,7 @@
 							<td class="text-xs">
 								<a
 									class="pr-3"
-									href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
+									href="{$wsBase}/scripts/get/{scriptHash}"
 									target="_blank"
 								>
 									{scriptHash}
@@ -148,7 +148,7 @@
 							<td class="text-xs">
 								<a
 									class="pr-3"
-									href="{base}/run/{jobId}?workspace={$workspaceStore}"
+									href="{$wsBase}/run/{jobId}"
 									target="_blank">{jobId.substring(24)}</a
 								>
 							</td>

frontend/src/lib/components/S3FilePickerInner.svelte

@@ -30,6 +30,7 @@
 		type MoveS3FileResponse
 	} from '$lib/gen'
 	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import {
 		displayDate,
 		displaySize,
@@ -555,7 +556,7 @@
 				<p class="text-clip grow min-w-0">
 					The workspace needs to be connected to an S3 storage to use this feature. You can <a
 						target="_blank"
-						href="{base}/workspace_settings?tab=windmill_lfs">configure it here</a
+						href="{$wsBase}/workspace_settings?tab=windmill_lfs">configure it here</a
 					>.
 				</p>
 				<Button variant="default" on:click={reloadContent} startIcon={{ icon: RotateCw }} />

frontend/src/lib/components/ScriptEditor.svelte

@@ -80,7 +80,7 @@
 	import CaptureButton from './triggers/CaptureButton.svelte'
 	import { setContext } from 'svelte'
 	import HideButton from './apps/editor/settingsPanel/HideButton.svelte'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/script/core'
 	import { getStringError } from './copilot/chat/utils'
 	import type { ScriptOptions } from './copilot/chat/ContextManager.svelte'
@@ -1943,7 +1943,7 @@
 							{#snippet popoverOverride()}
 								<div class="text-sm">
 									Enable Windmill AI in the <a
-										href="{base}/workspace_settings?tab=ai"
+										href="{$wsBase}/workspace_settings?tab=ai"
 										target="_blank"
 										class="inline-flex flex-row items-center gap-1"
 									>

frontend/src/lib/components/ScriptPicker.svelte

@@ -2,7 +2,7 @@
 	import { ScriptService, FlowService, type Script, AppService } from '$lib/gen'
 
 	import { workspaceStore } from '$lib/stores'
-	import { base } from '$lib/base'
+	import { wsBase } from '$lib/workspaceUrl'
 	import { createEventDispatcher, untrack } from 'svelte'
 
 	import Select from './select/Select.svelte'
@@ -158,7 +158,7 @@
 						target="_blank"
 						variant="default"
 						size="xs"
-						href="{base}/flows/edit/{scriptPath}">Edit</Button
+						href="{$wsBase}/flows/edit/{scriptPath}">Edit</Button
 					>
 				{/if}
 				{#if allowView}
@@ -181,7 +181,7 @@
 						target="_blank"
 						variant="default"
 						size="xs"
-						href="{base}/apps/edit/{scriptPath}"
+						href="{$wsBase}/apps/edit/{scriptPath}"
 					>
 						Edit
 					</Button>
@@ -192,7 +192,7 @@
 						size="xs"
 						target="_blank"
 						startIcon={{ icon: Code }}
-						href="{base}/apps/get/{scriptPath}"
+						href="{$wsBase}/apps/get/{scriptPath}"
 					>
 						View
 					</Button>
@@ -206,7 +206,7 @@
 						target="_blank"
 						variant="default"
 						size="xs"
-						href="{base}/scripts/edit/{scriptPath}"
+						href="{$wsBase}/scripts/edit/{scriptPath}"
 					>
 						Edit
 					</Button>