windmill-components 1.623.2 → 1.642.0

package/package/components/copilot/chat/navigator/core.js

@@ -1,3 +1,4 @@
+import { createSearchWorkspaceTool, createGetRunnableDetailsTool } from '../shared';
 import { ResourceService } from '../../../../gen';
 import { workspaceStore } from '../../../../stores';
 import { get } from 'svelte/store';
@@ -8,9 +9,11 @@ Windmill is an open-source developer platform for building internal tools, API i
 
 You have access to these tools:
 1. View current buttons and inputs on the page (get_triggerable_components)
-2. Execute buttons and inputs (trigger_component) 
+2. Execute buttons and inputs (trigger_component)
 3. Get documentation for user requests (get_documentation)
 4. Change the AI mode to the one specified (change_mode)
+5. Search for scripts and flows in the workspace (search_workspace)
+6. Get detailed information about a specific script or flow (get_runnable_details)
 
 INSTRUCTIONS:
 - When users ask about application features or concepts, first use get_documentation internally to retrieve accurate information about how to fulfill the user's request.
@@ -24,6 +27,10 @@ INSTRUCTIONS:
 - If you are not sure about an input, set the ones you are sure about, and then ask the user for the value of the input you are not sure about.
 - If the user asks you to make an API call, switch to API mode with the change_mode tool before using the new tools you'll have access to to make the API call.
 
+- When users ask about existing scripts, flows, or building blocks in their workspace, use search_workspace to find them.
+- When users want to understand a specific script or flow (inputs, description, what it does), use get_runnable_details.
+- When users ask you to navigate to a specific script or flow, first search for it, then use the navigation tools to go to it.
+
 GENERAL PRINCIPLES:
 - Be concise but thorough
 - Focus on taking action and completing the user's goals
@@ -324,7 +331,9 @@ export const navigatorTools = [
     triggerComponentTool,
     getDocumentationTool,
     getCurrentPageNameTool,
-    getAvailableResourcesTool
+    getAvailableResourcesTool,
+    createSearchWorkspaceTool(),
+    createGetRunnableDetailsTool()
 ];
 export function prepareNavigatorSystemMessage(customPrompt) {
     let content = CHAT_SYSTEM_PROMPT;

package/package/components/copilot/chat/script/core.js

@@ -3,7 +3,7 @@ import { capitalize, isObject, toCamel } from '../../../../utils';
 import { get } from 'svelte/store';
 import { compile, phpCompile, pythonCompile } from '../../utils';
 import { dbSchemas } from '../../../../stores';
-import { createSearchHubScriptsTool, executeTestRun, buildTestRunArgs, buildContextString, formatScriptLintResult } from '../shared';
+import { createSearchHubScriptsTool, executeTestRun, buildTestRunArgs, buildContextString, formatScriptLintResult, createSearchWorkspaceTool, createGetRunnableDetailsTool } from '../shared';
 import { setupTypeAcquisition } from '../../../../ata';
 import { getModelContextWindow } from '../../lib';
 import { getCurrentModel } from '../../../../aiStore';
@@ -130,6 +130,7 @@ function buildChatSystemPrompt(currentModel) {
 	- You can also receive a \`DIFF\` of the changes that have been made to the code. You should use this diff to give better answers.
 	- Before giving your answer, check again that you carefully followed these instructions.
 	- When asked to create a script that communicates with an external service, you can use the \`search_hub_scripts\` tool to search for relevant scripts in the hub. Make sure the language is the same as what the user is coding in. If you do not find any relevant scripts, you can use the \`search_npm_packages\` tool to search for relevant packages and their documentation. Always give a link to the documentation in your answer if possible.
+	- Use \`search_workspace\` to find existing scripts and flows in the workspace, and \`get_runnable_details\` to inspect their schema and code. This is useful when the user wants to reference or reuse existing workspace runnables.
 	- After applying code changes with the \`${editToolName}\` tool, ALWAYS use the \`get_lint_errors\` tool to check for lint errors. If there are errors, fix them before proceeding. Then use the \`test_run_script\` tool to test the code, and iterate on the code until it works as expected (MAX 3 times). If the user cancels the test run, do not try again and wait for the next user instruction.
 
 	Important:
@@ -265,6 +266,8 @@ export function prepareScriptTools(currentModel, language, context) {
     }
     tools.push(testRunScriptTool);
     tools.push(getLintErrorsTool);
+    tools.push(createSearchWorkspaceTool());
+    tools.push(createGetRunnableDetailsTool());
     return tools;
 }
 export function prepareScriptUserMessage(instructions, selectedContext) {

package/package/components/copilot/chat/shared.d.ts

@@ -14,7 +14,7 @@ import type { ContextElement, FlowModuleCodePieceElement } from './context';
 import type { ExtendedOpenFlow } from '../../flows/types';
 import type { FunctionParameters } from 'openai/resources/shared.mjs';
 import { z } from 'zod';
-import { type CompletedJob, type FlowModule } from '../../../gen';
+import { type CompletedJob, type FlowModule, type Script } from '../../../gen';
 import { type editor as meditor } from 'monaco-editor';
 export declare const TOOL_PRETTIFY_MAP: Record<string, (content: string) => string>;
 export interface ContextStringResult {
@@ -107,6 +107,7 @@ export declare const createSearchHubScriptsTool: (withContent?: boolean) => {
     }) => Promise<string>;
 };
 export declare function buildSchemaForTool(toolDef: ChatCompletionFunctionTool, schemaBuilder: () => Promise<FunctionParameters>): Promise<boolean>;
+export declare const MAX_RUNNABLE_CONTENT_LENGTH = 20000;
 export interface TestRunConfig {
     jobStarter: () => Promise<string>;
     workspace: string;
@@ -129,4 +130,55 @@ export interface ScriptLintResult {
 }
 /** Format script lint result for display */
 export declare function formatScriptLintResult(lintResult: ScriptLintResult): string;
+export declare class WorkspaceRunnablesSearch {
+    private uf;
+    private scriptsWorkspace;
+    private flowsWorkspace;
+    private scripts;
+    private flows;
+    private scriptCache;
+    private flowCache;
+    constructor();
+    private initScripts;
+    private initFlows;
+    searchScripts(query: string, workspace: string): Promise<{
+        type: "script";
+        path: string;
+        summary: string;
+    }[]>;
+    searchFlows(query: string, workspace: string): Promise<{
+        type: "flow";
+        path: string;
+        summary: string;
+    }[]>;
+    search(query: string, workspace: string, type?: 'all' | 'scripts' | 'flows'): Promise<{
+        type: "script" | "flow";
+        path: string;
+        summary: string;
+    }[]>;
+    getScript(path: string, workspace: string): Promise<Script>;
+    getFlow(path: string, workspace: string): Promise<import("../../../gen").OpenFlow & import("../../../gen").FlowMetadata & {
+        lock_error_logs?: string;
+        version_id?: number;
+    }>;
+}
+export declare const workspaceRunnablesSearch: WorkspaceRunnablesSearch;
+export declare const createSearchWorkspaceTool: () => {
+    def: ChatCompletionFunctionTool;
+    fn: ({ args, workspace, toolId, toolCallbacks }: {
+        args: any;
+        workspace: string;
+        toolId: string;
+        toolCallbacks: ToolCallbacks;
+    }) => Promise<string>;
+};
+export declare const createGetRunnableDetailsTool: () => {
+    def: ChatCompletionFunctionTool;
+    fn: ({ args, workspace, toolId, toolCallbacks }: {
+        args: any;
+        workspace: string;
+        toolId: string;
+        toolCallbacks: ToolCallbacks;
+    }) => Promise<string>;
+};
 export {};

package/package/components/copilot/chat/shared.js

@@ -12,7 +12,9 @@ export const SPECIAL_MODULE_IDS = {
 import { get } from 'svelte/store';
 import { workspaceStore } from '../../../stores';
 import { z } from 'zod';
-import { ScriptService, JobService } from '../../../gen';
+import { ScriptService, FlowService, JobService } from '../../../gen';
+import uFuzzy from '@leeoniya/ufuzzy';
+import { emptyString } from '../../../utils';
 import { scriptLangToEditorLang } from '../../../scripts';
 import { getCurrentModel } from '../../../aiStore';
 import {} from 'monaco-editor';
@@ -229,6 +231,7 @@ export function buildContextString(selectedContext) {
     let hasDiff = false;
     let hasFlowModule = false;
     let hasError = false;
+    let workspaceItemsContext = '';
     let result = '\n\n';
     for (const context of selectedContext) {
         if (context.type === 'code') {
@@ -261,6 +264,24 @@ export function buildContextString(selectedContext) {
             hasFlowModule = true;
             flowModuleContext += `${context.id}\n`;
         }
+        else if (context.type === 'workspace_script') {
+            workspaceItemsContext += `\nWORKSPACE SCRIPT (${context.path}):\n`;
+            workspaceItemsContext += `Summary: ${context.summary}\n`;
+            workspaceItemsContext += `Language: ${context.language}\n`;
+            if (context.schema) {
+                workspaceItemsContext += `Inputs: ${JSON.stringify(context.schema)}\n`;
+            }
+            workspaceItemsContext += `Code:\n${context.content}\n`;
+        }
+        else if (context.type === 'workspace_flow') {
+            workspaceItemsContext += `\nWORKSPACE FLOW (${context.path}):\n`;
+            workspaceItemsContext += `Summary: ${context.summary}\n`;
+            workspaceItemsContext += `Description: ${context.description}\n`;
+            if (context.schema) {
+                workspaceItemsContext += `Inputs: ${JSON.stringify(context.schema)}\n`;
+            }
+            workspaceItemsContext += `Value:\n${context.value}\n`;
+        }
     }
     if (hasCode) {
         result += '\n' + codeContext;
@@ -277,6 +298,9 @@ export function buildContextString(selectedContext) {
     if (hasFlowModule) {
         result += '\n' + flowModuleContext;
     }
+    if (workspaceItemsContext) {
+        result += '\n' + workspaceItemsContext;
+    }
     return result;
 }
 async function callTool({ tools, functionName, args, workspace, helpers, toolCallbacks, toolId }) {
@@ -492,6 +516,7 @@ export async function buildSchemaForTool(toolDef, schemaBuilder) {
 // Constants for result formatting
 const MAX_RESULT_LENGTH = 12000;
 const MAX_LOG_LENGTH = 4000;
+export const MAX_RUNNABLE_CONTENT_LENGTH = 20000;
 // Common job polling function
 export async function pollJobCompletion(jobId, workspace, toolId, toolCallbacks) {
     let attempts = 0;
@@ -664,3 +689,204 @@ export function formatScriptLintResult(lintResult) {
     }
     return response;
 }
+// ============= Workspace Runnables Search =============
+export class WorkspaceRunnablesSearch {
+    uf;
+    scriptsWorkspace = undefined;
+    flowsWorkspace = undefined;
+    scripts = undefined;
+    flows = undefined;
+    scriptCache = new Map();
+    flowCache = new Map();
+    constructor() {
+        this.uf = new uFuzzy();
+    }
+    async initScripts(workspace) {
+        if (this.scripts === undefined || this.scriptsWorkspace !== workspace) {
+            this.scripts = await ScriptService.listScripts({ workspace });
+            this.scriptsWorkspace = workspace;
+        }
+    }
+    async initFlows(workspace) {
+        if (this.flows === undefined || this.flowsWorkspace !== workspace) {
+            this.flows = await FlowService.listFlows({ workspace });
+            this.flowsWorkspace = workspace;
+        }
+    }
+    async searchScripts(query, workspace) {
+        await this.initScripts(workspace);
+        const scripts = this.scripts;
+        if (!scripts)
+            return [];
+        const trimmed = query.trim();
+        if (!trimmed) {
+            return scripts.map((s) => ({
+                type: 'script',
+                path: s.path,
+                summary: s.summary
+            }));
+        }
+        const haystack = scripts.map((s) => emptyString(s.summary) ? s.path : s.summary + ' (' + s.path + ')');
+        const [idxs, , order] = this.uf.search(haystack, trimmed);
+        if (!idxs || !order)
+            return [];
+        return order.map((orderIdx) => {
+            const haystackIdx = idxs[orderIdx];
+            return {
+                type: 'script',
+                path: scripts[haystackIdx].path,
+                summary: scripts[haystackIdx].summary
+            };
+        });
+    }
+    async searchFlows(query, workspace) {
+        await this.initFlows(workspace);
+        const flows = this.flows;
+        if (!flows)
+            return [];
+        const trimmed = query.trim();
+        if (!trimmed) {
+            return flows.map((f) => ({
+                type: 'flow',
+                path: f.path,
+                summary: f.summary
+            }));
+        }
+        const haystack = flows.map((f) => emptyString(f.summary) ? f.path : f.summary + ' (' + f.path + ')');
+        const [idxs, , order] = this.uf.search(haystack, trimmed);
+        if (!idxs || !order)
+            return [];
+        return order.map((orderIdx) => {
+            const haystackIdx = idxs[orderIdx];
+            return {
+                type: 'flow',
+                path: flows[haystackIdx].path,
+                summary: flows[haystackIdx].summary
+            };
+        });
+    }
+    async search(query, workspace, type = 'all') {
+        const results = [];
+        if (type === 'all' || type === 'scripts') {
+            results.push(...(await this.searchScripts(query, workspace)));
+        }
+        if (type === 'all' || type === 'flows') {
+            results.push(...(await this.searchFlows(query, workspace)));
+        }
+        return results;
+    }
+    async getScript(path, workspace) {
+        const key = `${workspace}:${path}`;
+        let cached = this.scriptCache.get(key);
+        if (!cached) {
+            cached = await ScriptService.getScriptByPath({ workspace, path });
+            this.scriptCache.set(key, cached);
+        }
+        return cached;
+    }
+    async getFlow(path, workspace) {
+        const key = `${workspace}:${path}`;
+        let cached = this.flowCache.get(key);
+        if (!cached) {
+            cached = await FlowService.getFlowByPath({ workspace, path });
+            this.flowCache.set(key, cached);
+        }
+        return cached;
+    }
+}
+const searchWorkspaceSchema = z.object({
+    query: z
+        .string()
+        .describe('Comma separated list of keywords to search for (e.g. "stripe, send email, ETL")'),
+    type: z
+        .enum(['all', 'scripts', 'flows'])
+        .describe('Filter by type: "all" for both scripts and flows, "scripts" for scripts only, "flows" for flows only.')
+});
+const searchWorkspaceToolDef = createToolDef(searchWorkspaceSchema, 'search_workspace', 'Search for scripts and flows in the workspace. Use this when a user asks about existing building blocks, wants to find a script/flow, or asks "what do I have for X". ALWAYS search really broadly.');
+export const workspaceRunnablesSearch = new WorkspaceRunnablesSearch();
+export const createSearchWorkspaceTool = () => ({
+    def: searchWorkspaceToolDef,
+    fn: async ({ args, workspace, toolId, toolCallbacks }) => {
+        const parsedArgs = searchWorkspaceSchema.parse(args);
+        const type = parsedArgs.type;
+        toolCallbacks.setToolStatus(toolId, {
+            content: `Searching workspace...`
+        });
+        const results = [];
+        const keywords = parsedArgs.query.split(',').map((keyword) => keyword.trim());
+        const seenPaths = new Set();
+        for (const keyword of keywords) {
+            const keywordResults = await workspaceRunnablesSearch.search(keyword, workspace, type);
+            for (const result of keywordResults) {
+                if (!seenPaths.has(result.path)) {
+                    results.push(result);
+                    seenPaths.add(result.path);
+                }
+            }
+        }
+        toolCallbacks.setToolStatus(toolId, {
+            content: `Found ${results.length} result(s)`
+        });
+        return JSON.stringify(results, null, 2);
+    }
+});
+const getRunnableDetailsSchema = z.object({
+    path: z.string().describe('The path of the script or flow (e.g. "f/marketing/send_email")'),
+    type: z.enum(['script', 'flow']).describe('Whether this is a script or a flow')
+});
+const getRunnableDetailsToolDef = createToolDef(getRunnableDetailsSchema, 'get_runnable_details', 'Get details (summary, description, inputs schema, content) of a specific script or flow by path');
+export const createGetRunnableDetailsTool = () => ({
+    def: getRunnableDetailsToolDef,
+    fn: async ({ args, workspace, toolId, toolCallbacks }) => {
+        const parsedArgs = getRunnableDetailsSchema.parse(args);
+        const { path, type } = parsedArgs;
+        toolCallbacks.setToolStatus(toolId, {
+            content: `Getting ${type} details for "${path}"...`
+        });
+        try {
+            if (type === 'script') {
+                const script = await workspaceRunnablesSearch.getScript(path, workspace);
+                toolCallbacks.setToolStatus(toolId, {
+                    content: `Retrieved script details for "${path}"`
+                });
+                const content = script.content ?? '';
+                const truncatedContent = content.length > MAX_RUNNABLE_CONTENT_LENGTH
+                    ? content.slice(0, MAX_RUNNABLE_CONTENT_LENGTH) + '\n... (truncated)'
+                    : content;
+                return JSON.stringify({
+                    path: script.path,
+                    summary: script.summary,
+                    description: script.description,
+                    language: script.language,
+                    schema: script.schema,
+                    content: truncatedContent
+                }, null, 2);
+            }
+            else {
+                const flow = await workspaceRunnablesSearch.getFlow(path, workspace);
+                toolCallbacks.setToolStatus(toolId, {
+                    content: `Retrieved flow details for "${path}"`
+                });
+                const flowValue = JSON.stringify(flow.value, null, 2);
+                const truncatedValue = flowValue.length > MAX_RUNNABLE_CONTENT_LENGTH
+                    ? flowValue.slice(0, MAX_RUNNABLE_CONTENT_LENGTH) + '\n... (truncated)'
+                    : flowValue;
+                return JSON.stringify({
+                    path: flow.path,
+                    summary: flow.summary,
+                    description: flow.description,
+                    schema: flow.schema,
+                    value: truncatedValue
+                }, null, 2);
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            toolCallbacks.setToolStatus(toolId, {
+                content: `Error getting ${type} details`,
+                error: errorMessage
+            });
+            return `Error getting ${type} details for "${path}": ${errorMessage}`;
+        }
+    }
+});

package/package/components/copilot/lib.js

@@ -9,6 +9,7 @@ import { formatResourceTypes } from './utils';
 import { z } from 'zod';
 import { processToolCall } from './chat/shared';
 import { getNonStreamingOpenAIResponsesCompletion, getOpenAIResponsesCompletionStream } from './chat/openai-responses';
+import { convertOpenAIToAnthropicMessages } from './chat/anthropic';
 import { generateRandomString } from '../../utils';
 import { copilotInfo, getCurrentModel } from '../../aiStore';
 export const SUPPORTED_LANGUAGES = new Set(Object.keys(GEN_CONFIG.prompts));
@@ -337,6 +338,17 @@ export async function testKey({ apiKey, resourcePath, model, abortController, me
     if (!modelToTest) {
         throw new Error('Missing a model to test');
     }
+    // Use Anthropic SDK for Anthropic provider
+    if (aiProvider === 'anthropic') {
+        await testAnthropicKey({
+            apiKey,
+            resourcePath,
+            model: modelToTest,
+            abortController,
+            messages
+        });
+        return;
+    }
     await getNonStreamingCompletion(messages, abortController, {
         apiKey,
         resourcePath,
@@ -346,6 +358,36 @@ export async function testKey({ apiKey, resourcePath, model, abortController, me
         }
     });
 }
+async function testAnthropicKey({ apiKey, resourcePath, model, abortController, messages }) {
+    const { system, messages: anthropicMessages } = convertOpenAIToAnthropicMessages(messages);
+    const headers = {
+        'X-Provider': 'anthropic',
+        'anthropic-version': '2023-06-01',
+        'X-Anthropic-SDK': 'true'
+    };
+    if (resourcePath) {
+        headers['X-Resource-Path'] = resourcePath;
+    }
+    else if (apiKey) {
+        headers['X-API-Key'] = apiKey;
+    }
+    const anthropicClient = apiKey
+        ? new Anthropic({
+            baseURL: `${location.origin}${OpenAPI.BASE}/ai/proxy`,
+            apiKey: 'fake-key',
+            dangerouslyAllowBrowser: true
+        })
+        : workspaceAIClients.getAnthropicClient();
+    await anthropicClient.messages.create({
+        model,
+        max_tokens: 100,
+        messages: anthropicMessages,
+        ...(system && { system })
+    }, {
+        signal: abortController.signal,
+        headers
+    });
+}
 async function getResourceTypes(scriptOptions) {
     const elems = scriptOptions.type === 'gen' || scriptOptions.type === 'edit' ? [scriptOptions.description] : [];
     if (scriptOptions.type === 'edit' || scriptOptions.type === 'fix') {

package/package/components/dedicated_worker.d.ts

@@ -0,0 +1,7 @@
+export declare function dedicatedWorkerTag(workspaceId: string, path: string): Promise<string>;
+export declare function parseTag(tag: string): {
+    workspace: string;
+    type: 'script' | 'flow';
+    path: string;
+} | null;
+export declare function computeHashedTag(rawTag: string): Promise<string>;

package/package/components/dedicated_worker.js

@@ -0,0 +1,36 @@
+const MAX_TAG_LEN = 50;
+const HASH_SUFFIX_LEN = 16;
+// IMPORTANT: This implementation must stay in sync with the Rust backend
+// `dedicated_worker_tag()` in backend/windmill-common/src/worker.rs.
+// The frontend version is used for display; the backend version is authoritative.
+export async function dedicatedWorkerTag(workspaceId, path) {
+    const fullTag = `${workspaceId}:${path}`;
+    if (fullTag.length <= MAX_TAG_LEN)
+        return fullTag;
+    const encoded = new TextEncoder().encode(fullTag);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', encoded);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hexHash = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+    const prefixLen = MAX_TAG_LEN - 1 - HASH_SUFFIX_LEN;
+    return `${fullTag.substring(0, prefixLen)}#${hexHash.substring(0, HASH_SUFFIX_LEN)}`;
+}
+export function parseTag(tag) {
+    const colonIndex = tag.indexOf(':');
+    if (colonIndex === -1)
+        return null;
+    const workspace = tag.substring(0, colonIndex);
+    const rest = tag.substring(colonIndex + 1);
+    if (rest.startsWith('flow/')) {
+        return { workspace, type: 'flow', path: rest.substring(5) };
+    }
+    else {
+        return { workspace, type: 'script', path: rest };
+    }
+}
+export async function computeHashedTag(rawTag) {
+    const parsed = parseTag(rawTag);
+    if (!parsed)
+        return rawTag;
+    const fullPath = parsed.type === 'flow' ? `flow/${parsed.path}` : parsed.path;
+    return dedicatedWorkerTag(parsed.workspace, fullPath);
+}

package/package/components/details/DetailPageHeader.svelte

@@ -4,36 +4,21 @@ import ErrorHandlerToggleButton from './ErrorHandlerToggleButton.svelte';
 import { twMerge } from 'tailwind-merge';
 import { userStore } from '../../stores';
 import { createEventDispatcher, getContext, tick } from 'svelte';
+import SummaryPathDisplay from '../SummaryPathDisplay.svelte';
 import { Calendar } from 'lucide-svelte';
-import { emptyString } from '../../utils';
 const { triggersCount, triggersState } = $state(getContext('TriggerContext'));
-let { mainButtons = [], menuItems = [], summary, path, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), children, trigger_badges } = $props();
+let { mainButtons = [], menuItems = [], summary, path, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), onSaved, children, trigger_badges } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="border-b p-1">
+<div class="border-b">
 	<div class="mx-auto">
 		<div
-			class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center min-h-10"
+			class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center min-h-12"
 		>
-			<div class="grow px-4 inline-flex items-center gap-4 min-w-0">
-				<div
-					class={twMerge(
-						'min-w-24 text-emphasis truncate flex flex-col gap-0',
-						$userStore?.operator ? 'pl-10' : ''
-					)}
-				>
-					<span
-						class={twMerge(
-							'text-sm min-w-24 text-emphasis font-semibold truncate',
-							$userStore?.operator ? 'pl-10' : ''
-						)}
-					>
-						{emptyString(summary) ? (path ?? '') : summary}
-					</span>
-					{#if !emptyString(summary)}
-						<span class="text-2xs text-secondary">{path}</span>
-					{/if}
+			<div class="grow px-2 inline-flex items-center gap-4 min-w-0">
+				<div class={twMerge('min-w-0', $userStore?.operator ? 'pl-10' : '')}>
+					<SummaryPathDisplay {summary} {path} {onSaved} kind={errorHandlerKind} />
 				</div>
 				{#if tag}
 					<Badge>tag: {tag}</Badge>
@@ -60,7 +45,7 @@ const dispatch = createEventDispatcher();
 				{/if}
 				{@render trigger_badges?.()}
 			</div>
-			<div class="flex gap-1 items-center">
+			<div class="flex gap-1 items-center pr-4">
 				{#if menuItems.length > 0}
 					{#key menuItems}
 						<DropdownV2

package/package/components/details/DetailPageHeader.svelte.d.ts

@@ -19,6 +19,7 @@ interface Props {
     errorHandlerKind: 'flow' | 'script';
     scriptOrFlowPath: string;
     errorHandlerMuted: boolean | undefined;
+    onSaved?: (newPath: string) => void;
     children?: import('svelte').Snippet;
     trigger_badges?: import('svelte').Snippet;
 }

package/package/components/details/DetailPageLayout.svelte

@@ -63,7 +63,7 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 					{/if}
 
 					{#snippet content()}
-						<div class="grow min-h-0">
+						<div class="grow min-h-0 overflow-y-auto">
 							<TabContent value="form" class="flex flex-col flex-1 h-full">
 								{@render form?.()}
 							</TabContent>