windmill-components 1.695.0 → 1.698.0

package/package/components/copilot/chat/script/core.d.ts

@@ -6,18 +6,22 @@ import type { ReviewChangesOpts } from '../monaco-adapter';
 export declare const DIFF_BASED_EDIT_PROVIDERS: AIProvider[];
 export declare function formatResourceTypes(allResourceTypes: ResourceType[], lang: 'python3' | 'php' | 'bun' | 'deno' | 'nativets' | 'bunnative'): string;
 export declare const SUPPORTED_CHAT_SCRIPT_LANGUAGES: string[];
-export declare function getLangContext(lang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json', { allowResourcesFetch, isPreprocessor }?: {
+export declare function getLangContext(lang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json', { allowResourcesFetch, isPreprocessor, workflowAsCode }?: {
     allowResourcesFetch?: boolean;
     isPreprocessor?: boolean;
     isFailure?: boolean;
+    workflowAsCode?: boolean;
 }): string;
 export declare function getFormattedResourceTypes(lang: ScriptLang | 'bunnative', prompt: string, workspace: string): Promise<string>;
 export declare const INLINE_CHAT_SYSTEM_PROMPT = "\n# Windmill Inline Coding Assistant\n\nYou are a coding assistant for the Windmill platform. You provide precise code modifications based on user instructions.\n\n## Input Format\n\nYou will receive:\n- **INSTRUCTIONS**: User's modification request\n- **CODE**: Current code content with modification boundaries\n- **DATABASES** *(optional)*: Available workspace databases\n\n### Code Boundaries\n\nThe code contains `[#START]` and `[#END]` markers indicating the modification scope:\n- **MUST** only modify code between these markers\n- **MUST** remove the markers in your response\n- **MUST** preserve all other code exactly as provided\n\n## Task Requirements\n\nReturn the modified CODE that fulfills the user's request. Assume all user queries are valid and actionable.\n\n### Critical Rules\n\n- \u2705 **ALWAYS** include a single code block with the entire updated CODE\n- \u2705 **ALWAYS** use the structured XML output format below\n- \u274C **NEVER** include only modified sections\n- \u274C **NEVER** add explanatory text or comments outside the format\n- \u274C **NEVER** include ``` code fences in your response\n- \u274C **NEVER** modify the code outside the boundaries\n\n## Output Format\n\n```xml\n<changes_made>\nBrief description of what was changed\n</changes_made>\n<new_code>\n[complete modified code without markers]\n</new_code>\n```\n\n## Example\n\n### Input:\n```xml\n<user_request>\nINSTRUCTIONS:\nReturn 2 instead of 1\n\nCODE:\nimport * as wmill from \"windmill-client\"\n\nfunction test() {\n\treturn \"hello\"\n}\n\n[#START]\nexport async function main() {\n\treturn 1;\n}\n[#END]\n</user_request>\n```\n\n### Expected Output:\n```xml\n<changes_made>\nChanged return value from 1 to 2 in main function\n</changes_made>\n<new_code>\nimport * as wmill from \"windmill-client\"\n\nfunction test() {\n\treturn \"hello\"\n}\n\nexport async function main() {\n\treturn 2;\n}\n</new_code>\n```\n";
-export declare function prepareInlineChatSystemPrompt(lang: ScriptLang | 'bunnative'): string;
+export declare function prepareInlineChatSystemPrompt(lang: ScriptLang | 'bunnative', options?: {
+    workflowAsCode?: boolean;
+}): string;
 export declare const CHAT_USER_PROMPT = "\nINSTRUCTIONS:\n{instructions}\n\n";
 export declare function prepareScriptSystemMessage(currentModel: AIProviderModel, language: ScriptLang | 'bunnative', options?: {
     isPreprocessor?: boolean;
     allowResourcesFetch?: boolean;
+    workflowAsCode?: boolean;
 }, customPrompt?: string): ChatCompletionSystemMessageParam;
 export declare function prepareScriptTools(currentModel: AIProviderModel, language: ScriptLang | 'bunnative', context: ContextElement[]): Tool<ScriptChatHelpers>[];
 export declare function prepareScriptUserMessage(instructions: string, selectedContext: ContextElement[]): ChatCompletionUserMessageParam;

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

@@ -9,7 +9,7 @@ import { setupTypeAcquisition } from '../../../../ata';
 import { getModelContextWindow } from '../../lib';
 import { getCurrentModel } from '../../../../aiStore';
 import { getDbSchemas } from '../../../apps/components/display/dbtable/metadata';
-import { getScriptPrompt } from '../../../../system_prompts';
+import { getScriptPrompt, getWorkflowAsCodePrompt } from '../../../../system_prompts';
 // Score threshold for npm packages search filtering
 const SCORE_THRESHOLD = 1000;
 // percentage of the context window for documentation of npm packages
@@ -69,17 +69,21 @@ export const SUPPORTED_CHAT_SCRIPT_LANGUAGES = [
     'java',
     'duckdb'
 ];
-export function getLangContext(lang, { allowResourcesFetch = false, isPreprocessor = false } = {}) {
+export function getLangContext(lang, { allowResourcesFetch = false, isPreprocessor = false, workflowAsCode = false } = {}) {
     // Get base language context from centralized prompts
-    let context = getScriptPrompt(lang);
+    let context = workflowAsCode ? getWorkflowAsCodePrompt(lang) : getScriptPrompt(lang);
+    // Fallback to the regular script prompt if WAC context is requested for an unsupported language.
+    if (!context) {
+        context = getScriptPrompt(lang);
+    }
     // Add tool usage instructions for applicable languages
     if (['python3', 'php', 'bun', 'deno', 'nativets', 'bunnative'].includes(lang)) {
         if (allowResourcesFetch) {
             context += '\n\nTo query available resource types, use the `search_resource_types` tool.';
         }
     }
-    // Note preprocessor function naming if applicable
-    if (isPreprocessor) {
+    // Note preprocessor function naming if applicable. WAC scripts are not preprocessors.
+    if (isPreprocessor && !workflowAsCode) {
         context +=
             '\n\nThe main function for this script should be named `preprocessor` instead of `main`.';
     }
@@ -225,8 +229,10 @@ export async function main() {
 </new_code>
 \`\`\`
 `;
-export function prepareInlineChatSystemPrompt(lang) {
-    return INLINE_CHAT_SYSTEM_PROMPT + getLangContext(lang, { allowResourcesFetch: true });
+export function prepareInlineChatSystemPrompt(lang, options = {}) {
+    return (INLINE_CHAT_SYSTEM_PROMPT +
+        '\n\n' +
+        getLangContext(lang, { allowResourcesFetch: true, workflowAsCode: options.workflowAsCode }));
 }
 export const CHAT_USER_PROMPT = `
 INSTRUCTIONS:

package/package/components/copilot/chat/script/wacPrompt.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package/components/copilot/chat/script/wacPrompt.test.js

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { getScriptPrompt, getWorkflowAsCodePrompt } from '../../../../system_prompts';
+describe('Workflow-as-Code prompt helpers', () => {
+    it('injects only the TypeScript WAC SDK for TypeScript runtimes', () => {
+        const prompt = getWorkflowAsCodePrompt('bun');
+        expect(prompt).toContain('Windmill Workflow-as-Code Writing Guide');
+        expect(prompt).toContain('## TypeScript Workflow-as-Code API');
+        expect(prompt).not.toContain('## Python Workflow-as-Code API');
+    });
+    it('injects only the Python WAC SDK for Python runtimes', () => {
+        const prompt = getWorkflowAsCodePrompt('python3');
+        expect(prompt).toContain('Windmill Workflow-as-Code Writing Guide');
+        expect(prompt).toContain('## Python Workflow-as-Code API');
+        expect(prompt).not.toContain('## TypeScript Workflow-as-Code API');
+    });
+    it('does not support non-Bun TypeScript runtimes as WAC targets', () => {
+        expect(getWorkflowAsCodePrompt('deno')).toBe('');
+        expect(getWorkflowAsCodePrompt('nativets')).toBe('');
+        expect(getWorkflowAsCodePrompt('bunnative')).toBe('');
+    });
+    it('does not change normal script prompts', () => {
+        expect(getWorkflowAsCodePrompt('go')).toBe('');
+        expect(getScriptPrompt('bun')).not.toContain('Windmill Workflow-as-Code Writing Guide');
+    });
+});

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

@@ -44,6 +44,17 @@ export type UserDisplayMessage = BaseDisplayMessage & {
     index: number;
     error?: boolean;
 };
+export type CreatedResourceTriggerKind = 'http' | 'websocket' | 'kafka' | 'nats' | 'postgres' | 'mqtt' | 'sqs' | 'gcp' | 'azure';
+export type CreatedResourceAction = {
+    id: string;
+    type: 'open_created_resource';
+    label: string;
+    resource: 'schedule' | 'trigger';
+    path: string;
+    targetKind: 'script' | 'flow';
+    triggerKind?: CreatedResourceTriggerKind;
+};
+export type ToolDisplayAction = CreatedResourceAction;
 export type ToolDisplayMessage = {
     role: 'tool';
     tool_call_id: string;
@@ -58,6 +69,7 @@ export type ToolDisplayMessage = {
     isStreamingArguments?: boolean;
     toolName?: string;
     showFade?: boolean;
+    actions?: ToolDisplayAction[];
 };
 export type AssistantDisplayMessage = BaseDisplayMessage & {
     role: 'assistant';

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

@@ -244,7 +244,17 @@ describe('processToolCall', () => {
                 target_path: 'f/scripts/current',
                 target_kind: 'script',
                 backend_result: 'schedule-created'
-            })
+            }),
+            actions: [
+                expect.objectContaining({
+                    id: 'open-created-schedule:f/schedules/current',
+                    type: 'open_created_resource',
+                    label: 'Open schedule',
+                    resource: 'schedule',
+                    path: 'f/schedules/current',
+                    targetKind: 'script'
+                })
+            ]
         }));
         expect(JSON.parse(scheduleResult.content)).toEqual(expect.objectContaining({
             success: true,
@@ -302,7 +312,18 @@ describe('processToolCall', () => {
                 target_path: 'f/flows/current',
                 target_kind: 'flow',
                 backend_result: 'trigger-created'
-            })
+            }),
+            actions: [
+                expect.objectContaining({
+                    id: 'open-created-trigger:http:f/triggers/current',
+                    type: 'open_created_resource',
+                    label: 'Open HTTP trigger',
+                    resource: 'trigger',
+                    triggerKind: 'http',
+                    path: 'f/triggers/current',
+                    targetKind: 'flow'
+                })
+            ]
         }));
         expect(JSON.parse(triggerResult.content)).toEqual(expect.objectContaining({
             success: true,

package/package/components/copilot/chat/workspaceTools.js

@@ -83,6 +83,30 @@ const triggerConfigs = {
         create: (data) => AzureTriggerService.createAzureTrigger(data)
     }
 };
+function getActionTargetKind(isFlow) {
+    return isFlow ? 'flow' : 'script';
+}
+function createOpenScheduleAction(path, targetKind) {
+    return {
+        id: `open-created-schedule:${path}`,
+        type: 'open_created_resource',
+        label: 'Open schedule',
+        resource: 'schedule',
+        path,
+        targetKind
+    };
+}
+function createOpenTriggerAction(kind, path, targetKind, label) {
+    return {
+        id: `open-created-trigger:${kind}:${path}`,
+        type: 'open_created_resource',
+        label: `Open ${label}`,
+        resource: 'trigger',
+        triggerKind: kind,
+        path,
+        targetKind
+    };
+}
 function formatPath(path) {
     if (path.length === 0) {
         return 'value';
@@ -168,16 +192,18 @@ const createScheduleTool = {
             });
             try {
                 const result = await ScheduleService.createSchedule({ workspace, requestBody });
+                const targetKind = getActionTargetKind(requestBody.is_flow);
                 const toolResult = {
                     success: true,
                     path: requestBody.path,
                     target_path: requestBody.script_path,
-                    target_kind: requestBody.is_flow ? 'flow' : 'script',
+                    target_kind: targetKind,
                     backend_result: result
                 };
                 toolCallbacks.setToolStatus(toolId, {
                     content: `Created schedule "${requestBody.path}"`,
-                    result: toolResult
+                    result: toolResult,
+                    actions: [createOpenScheduleAction(requestBody.path, targetKind)]
                 });
                 return JSON.stringify(toolResult);
             }
@@ -210,17 +236,21 @@ const createTriggerTool = {
             });
             try {
                 const result = await triggerConfig.create({ workspace, requestBody });
+                const targetKind = getActionTargetKind(requestBody.is_flow);
                 const toolResult = {
                     success: true,
                     kind: parsedArgs.kind,
                     path: requestBody.path,
                     target_path: requestBody.script_path,
-                    target_kind: requestBody.is_flow ? 'flow' : 'script',
+                    target_kind: targetKind,
                     backend_result: result
                 };
                 toolCallbacks.setToolStatus(toolId, {
                     content: `Created ${triggerConfig.label} "${requestBody.path}"`,
-                    result: toolResult
+                    result: toolResult,
+                    actions: [
+                        createOpenTriggerAction(parsedArgs.kind, requestBody.path, targetKind, triggerConfig.label)
+                    ]
                 });
                 return JSON.stringify(toolResult);
             }

package/package/components/flows/content/ScriptEditorDrawer.svelte

@@ -157,6 +157,7 @@ let displayEditor = $state(true);
 					noSyncFromGithub
 					lang={script.language}
 					path={script.path}
+					autoKind={script.auto_kind}
 					tag={script.tag}
 					fixedOverflowWidgets={false}
 					bind:code={script.content}

package/package/components/graph/wacToFlow.js

@@ -5,7 +5,7 @@ export function isWorkflowAsCode(code, language) {
     if (language === 'python3') {
         return /^\s*@workflow\s*$/m.test(code) || /from\s+wmill\s+import.*workflow/.test(code);
     }
-    if (language === 'bun' || language === 'deno') {
+    if (language === 'bun') {
         return (/workflow\s*\(/.test(code) &&
             /task\s*\(/.test(code) &&
             /['"]windmill-client(?:@[^'"]*)?['"]/.test(code));

package/package/components/graph/wacToFlow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package/components/graph/wacToFlow.test.js

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { isWorkflowAsCode } from './wacToFlow';
+const tsWac = `
+import { workflow, task } from "windmill-client"
+
+const process = task(async () => "ok")
+
+export const main = workflow(async () => await process())
+`;
+describe('isWorkflowAsCode', () => {
+    it('detects WAC only for Bun TypeScript and Python', () => {
+        expect(isWorkflowAsCode(tsWac, 'bun')).toBe(true);
+        expect(isWorkflowAsCode(tsWac, 'deno')).toBe(false);
+        expect(isWorkflowAsCode(tsWac, 'nativets')).toBe(false);
+        expect(isWorkflowAsCode('@workflow\nasync def main():\n    return None\n', 'python3')).toBe(true);
+    });
+});

package/package/components/home/Item.svelte

@@ -15,7 +15,7 @@ let shareModal = $state();
 let moveDrawer = $state();
 let deploymentDrawer = $state();
 let menuOpen = $state(false);
-let { item, depth = 0, showCode, showEditButton = true } = $props();
+let { item, depth = 0, showCode, showEditButton = true, keyboardSelected = false } = $props();
 </script>
 
 {#if item.type == 'script'}
@@ -35,6 +35,7 @@ let { item, depth = 0, showCode, showEditButton = true } = $props();
 		bind:menuOpen
 		{showCode}
 		{showEditButton}
+		{keyboardSelected}
 	/>
 {:else if item.type == 'flow'}
 	<FlowRow
@@ -52,6 +53,7 @@ let { item, depth = 0, showCode, showEditButton = true } = $props();
 		{depth}
 		bind:menuOpen
 		{showEditButton}
+		{keyboardSelected}
 	/>
 {:else if item.type == 'app'}
 	<AppRow
@@ -65,6 +67,7 @@ let { item, depth = 0, showCode, showEditButton = true } = $props();
 		{depth}
 		bind:menuOpen
 		{showEditButton}
+		{keyboardSelected}
 	/>
 {:else if item.type == 'raw_app'}
 	<RawAppRow
@@ -74,6 +77,7 @@ let { item, depth = 0, showCode, showEditButton = true } = $props();
 		{deploymentDrawer}
 		{depth}
 		bind:menuOpen
+		{keyboardSelected}
 	/>
 {/if}
 

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

@@ -3,6 +3,7 @@ interface Props {
     depth?: number;
     showCode: (path: string, summary: string) => void;
     showEditButton?: boolean;
+    keyboardSelected?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/home/ItemsList.svelte

@@ -20,7 +20,7 @@ import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import Item from './Item.svelte';
 import TreeViewRoot from './TreeViewRoot.svelte';
 import Popover from '../meltComponents/Popover.svelte';
-import { getContext, untrack } from 'svelte';
+import { getContext, tick, untrack } from 'svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import TextInput from '../text_input/TextInput.svelte';
 let { filter = $bindable(''), subtab = $bindable('script'), showEditButtons = true } = $props();
@@ -215,9 +215,261 @@ let preFilteredItems = $derived(ownerFilter != undefined
         filterItemsPathsBaseOnUserFilters(x, filterUserFolders, filterUserFoldersType) &&
         (labelFilter == undefined || ('labels' in x && x.labels?.includes(labelFilter)))));
 let items = $derived(filter !== '' ? filteredItems : preFilteredItems);
+let displayedItems = $derived((items ?? []).slice(0, nbDisplayed));
 $effect(() => {
     items && resetScroll();
 });
+let selectedIndex = $state(-1);
+let hasMore = $derived(items != undefined && items.length > nbDisplayed);
+let loadMoreIndex = $derived(displayedItems.length);
+let loadMoreEl = $state();
+let pendingAutoSelect = $state(true);
+let firstWorkspaceRun = true;
+$effect(() => {
+    $workspaceStore;
+    pendingAutoSelect = true;
+    if (firstWorkspaceRun) {
+        firstWorkspaceRun = false;
+        return;
+    }
+    // On workspace switch, melt-ui restores focus to the workspace-picker trigger
+    // button asynchronously after the menu closes. Without overriding it, pressing
+    // an arrow key would re-open / re-highlight the workspace picker instead of
+    // moving the items-list selection. Run several times to win the focus race.
+    const focusSearch = () => {
+        const el = document.getElementById('home-search-input');
+        el?.focus();
+    };
+    focusSearch();
+    const raf1 = requestAnimationFrame(() => {
+        focusSearch();
+        requestAnimationFrame(focusSearch);
+    });
+    const timeoutId = setTimeout(focusSearch, 100);
+    return () => {
+        cancelAnimationFrame(raf1);
+        clearTimeout(timeoutId);
+    };
+});
+$effect(() => {
+    filter;
+    itemKind;
+    ownerFilter;
+    labelFilter;
+    // Skip while pendingAutoSelect is true (initial load / workspace switch);
+    // the auto-select effect below will set the index once items appear.
+    if (!pendingAutoSelect) {
+        selectedIndex = -1;
+    }
+});
+$effect(() => {
+    if (pendingAutoSelect && displayedItems.length > 0) {
+        selectedIndex = 0;
+        pendingAutoSelect = false;
+    }
+});
+$effect(() => {
+    const max = hasMore ? displayedItems.length : displayedItems.length - 1;
+    if (selectedIndex > max) {
+        selectedIndex = max;
+    }
+});
+$effect(() => {
+    if (hasMore && selectedIndex === loadMoreIndex) {
+        loadMoreEl?.scrollIntoView({ block: 'nearest' });
+    }
+});
+// Capture-phase listener so we run before melt-ui's button keydown handlers
+// (e.g. ArrowDown on the dropdown trigger would otherwise open the menu).
+$effect(() => {
+    window.addEventListener('keydown', handleGlobalKeydown, true);
+    return () => window.removeEventListener('keydown', handleGlobalKeydown, true);
+});
+function loadMoreAndPreselectFirstNew() {
+    const previousNbDisplayed = nbDisplayed;
+    nbDisplayed += 30;
+    selectedIndex = previousNbDisplayed;
+}
+function getSelectedRowActionButtons() {
+    const anchor = document.querySelector('a[data-row-keyboard-selected="true"]');
+    const actions = anchor?.parentElement?.querySelector('[data-row-actions]');
+    return actions ? Array.from(actions.querySelectorAll('button, a[href]')) : [];
+}
+function handleGlobalKeydown(e) {
+    if (treeView)
+        return;
+    const target = e.target;
+    // When focus is inside a row's action buttons, handle arrow keys ourselves:
+    //  - Left/Right cycle between buttons (Left from the first returns to search).
+    //  - Up/Down move to the same-position button on the previous/next row.
+    // All other keys pass through so Enter/Space activate the focused button normally.
+    // This must run BEFORE the skipSelector check, since the dropdown ellipsis
+    // trigger carries [data-menu] (which would otherwise filter the event out).
+    // Up/Down also need stopImmediatePropagation so melt-ui's dropdown trigger
+    // doesn't open the menu (its default ArrowDown behavior).
+    const actionsContainer = target?.closest('[data-row-actions]');
+    if (actionsContainer) {
+        if (e.key !== 'ArrowRight' &&
+            e.key !== 'ArrowLeft' &&
+            e.key !== 'ArrowUp' &&
+            e.key !== 'ArrowDown')
+            return;
+        const buttons = Array.from(actionsContainer.querySelectorAll('button, a[href]'));
+        const currentIdx = buttons.indexOf(target);
+        if (currentIdx < 0)
+            return;
+        if (e.key === 'ArrowRight') {
+            if (currentIdx < buttons.length - 1) {
+                e.preventDefault();
+                buttons[currentIdx + 1].focus();
+            }
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            if (currentIdx > 0) {
+                buttons[currentIdx - 1].focus();
+            }
+            else {
+                ;
+                document.getElementById('home-search-input')?.focus();
+            }
+        }
+        else {
+            // ArrowUp / ArrowDown: move to same-position button on prev/next row.
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            if (selectedIndex < 0 || selectedIndex >= displayedItems.length)
+                return;
+            const newIndex = e.key === 'ArrowDown'
+                ? Math.min(selectedIndex + 1, displayedItems.length - 1)
+                : Math.max(selectedIndex - 1, 0);
+            if (newIndex === selectedIndex)
+                return;
+            selectedIndex = newIndex;
+            tick().then(() => {
+                const newButtons = getSelectedRowActionButtons();
+                if (newButtons.length === 0)
+                    return;
+                const targetIdx = Math.min(currentIdx, newButtons.length - 1);
+                newButtons[targetIdx]?.focus();
+            });
+        }
+        return;
+    }
+    // Inside an open dropdown menu: ArrowUp on first item / ArrowDown on last item
+    // closes the menu (so users can leave with arrows instead of needing Escape).
+    // Other arrow keys fall through to melt-ui's default cycle.
+    const menuItem = target?.closest('[role="menuitem"]');
+    if (menuItem) {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            const menu = menuItem.closest('[role="menu"]');
+            if (menu) {
+                const items = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+                const idx = items.indexOf(menuItem);
+                const isFirst = idx === 0;
+                const isLast = idx === items.length - 1;
+                if ((e.key === 'ArrowUp' && isFirst) || (e.key === 'ArrowDown' && isLast)) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    menuItem.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+                }
+            }
+        }
+        return;
+    }
+    const skipSelector = '[role="menu"], [role="menuitem"], [role="dialog"], [role="listbox"], [role="combobox"], [aria-expanded="true"], [data-menu]';
+    if (target) {
+        const tag = target.tagName;
+        const isEditable = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;
+        const isOurSearch = target.id === 'home-search-input';
+        if (isEditable && !isOurSearch)
+            return;
+        if (target.closest(skipSelector))
+            return;
+    }
+    const active = document.activeElement;
+    if (active?.closest(skipSelector))
+        return;
+    // ArrowRight from search input / body → focus first action button of selected row.
+    // Guard: if cursor is in the middle of typed search text, let the cursor move.
+    if (e.key === 'ArrowRight') {
+        if (target?.id === 'home-search-input') {
+            const inp = target;
+            if (inp.value.length > 0 && inp.selectionEnd !== inp.value.length)
+                return;
+        }
+        if (selectedIndex < 0 || selectedIndex >= displayedItems.length)
+            return;
+        const buttons = getSelectedRowActionButtons();
+        if (buttons.length > 0) {
+            e.preventDefault();
+            buttons[0].focus();
+        }
+        return;
+    }
+    // ArrowLeft from search input with cursor at start: no-op (let default handle).
+    if (e.key === 'ArrowLeft') {
+        if (target?.id === 'home-search-input') {
+            const inp = target;
+            if (inp.value.length > 0 && inp.selectionStart !== 0)
+                return;
+        }
+        return;
+    }
+    if (e.key === 'ArrowDown') {
+        if (displayedItems.length === 0)
+            return;
+        e.preventDefault();
+        if (selectedIndex === -1) {
+            selectedIndex = 0;
+        }
+        else if (selectedIndex === loadMoreIndex && hasMore) {
+            selectedIndex = 0;
+        }
+        else if (selectedIndex === displayedItems.length - 1) {
+            selectedIndex = hasMore ? loadMoreIndex : 0;
+        }
+        else {
+            selectedIndex = selectedIndex + 1;
+        }
+    }
+    else if (e.key === 'ArrowUp') {
+        if (displayedItems.length === 0)
+            return;
+        e.preventDefault();
+        if (selectedIndex === -1) {
+            selectedIndex = displayedItems.length - 1;
+        }
+        else if (selectedIndex === loadMoreIndex && hasMore) {
+            selectedIndex = displayedItems.length - 1;
+        }
+        else if (selectedIndex === 0) {
+            selectedIndex = hasMore ? loadMoreIndex : displayedItems.length - 1;
+        }
+        else {
+            selectedIndex = selectedIndex - 1;
+        }
+    }
+    else if (e.key === 'Enter') {
+        if (selectedIndex === loadMoreIndex && hasMore) {
+            e.preventDefault();
+            loadMoreAndPreselectFirstNew();
+        }
+        else if (selectedIndex >= 0 && selectedIndex < displayedItems.length) {
+            const anchor = document.querySelector('a[data-row-keyboard-selected="true"]');
+            if (anchor) {
+                e.preventDefault();
+                anchor.click();
+            }
+        }
+    }
+    else if (e.key === 'Escape') {
+        if (selectedIndex !== -1) {
+            e.preventDefault();
+            selectedIndex = -1;
+        }
+    }
+}
 $effect(() => {
     storeLocalSetting(TREE_VIEW_SETTING_NAME, treeView ? 'true' : undefined);
 });
@@ -461,7 +713,7 @@ $effect(() => {
 			/>
 		{:else}
 			<div class="border rounded-md bg-surface-tertiary">
-				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path + (item.hash ? '/' + item.hash : ''))}
+				{#each displayedItems as item, i (item.type + '/' + item.path + (item.hash ? '/' + item.hash : ''))}
 					<Item
 						{item}
 						on:scriptChanged={() => loadScripts(includeWithoutMain)}
@@ -476,6 +728,7 @@ $effect(() => {
 						}}
 						{showCode}
 						showEditButton={showEditButtons}
+						keyboardSelected={selectedIndex === i}
 					/>
 				{/each}
 			</div>
@@ -483,7 +736,11 @@ $effect(() => {
 				<span class="text-xs font-normal text-secondary"
 					>{nbDisplayed} items out of {items.length}
 					<button
-						class="ml-4 text-xs font-normal text-primary hover:text-emphasis"
+						bind:this={loadMoreEl}
+						class="ml-4 text-xs font-normal text-primary hover:text-emphasis rounded px-1 {selectedIndex ===
+						loadMoreIndex
+							? 'bg-gray-200 dark:bg-gray-700 underline'
+							: ''}"
 						onclick={() => (nbDisplayed += 30)}>load 30 more</button
 					></span
 				>