[pkg/ggml/sources/llama.cpp] /

<script lang="ts">
        import ChatFormCurrentWorkingDirectoryChip from './ChatFormCurrentWorkingDirectoryChip.svelte';
        import ChatFormCurrentWorkingDirectoryResultsList from './ChatFormCurrentWorkingDirectoryResultsList.svelte';
        import { FolderOpen } from '@lucide/svelte';
        import SearchInput from '$lib/components/app/forms/SearchInput.svelte';
        import * as Popover from '$lib/components/ui/popover';
        import { DEFAULT_MOBILE_BREAKPOINT, HOME_TILDE, SEARCH } from '$lib/constants';
        import { BuiltInTool, GlobSearchType, KeyboardKey } from '$lib/enums';
        import { useDebouncedSearch } from '$lib/hooks/use-debounced-search.svelte';
        import { usePickerNavigation } from '$lib/hooks/use-picker-navigation.svelte';
        import { useScrollActiveRow } from '$lib/hooks/use-scroll-active-row.svelte';
        import { ToolsService } from '$lib/services/tools.service';
        import { toolsStore } from '$lib/stores';
        import type { GlobEntry } from '$lib/types';
        import {
                abbreviateHome,
                buildCaseInsensitiveGlob,
                joinPath,
                lastPathSegment,
                runGlobSearchWithChildren
        } from '$lib/utils';

        // Microtask delay so the popover's focus scope tears down first.
        const FOCUS_DELAY_MS = 0;

        interface Props {
                class?: string;
                disabled?: boolean;
                directory?: string | null;
                /** Controlled open state; the host owns it so the chip click and the
                 * `/cwd` slash command open the picker through the same path. */
                isOpen: boolean;
                /** Two-way bound query, kept in sync with the text after `/cwd `. */
                query: string;
                /** Anchor at the form's top edge so the popover floats above the box. */
                customAnchor?: HTMLElement | null;
                onChange?: (directory: string | null) => void;
                /** Lets the host refocus the chat input after the popover closes. */
                onClose?: () => void;
                /** Fired when the chip is clicked so the host can open the picker. */
                onOpen?: () => void;
        }

        let {
                class: className = '',
                customAnchor = null,
                directory = null,
                disabled = false,
                isOpen,
                onChange,
                onClose,
                onOpen,
                query = $bindable('')
        }: Props = $props();

        // File System Access API is opt-in (Chrome / Edge / Opera): the popover
        // exposes a "Browse" button only when available.
        const pickerSupported =
                typeof window !== 'undefined' && typeof window.showDirectoryPicker === 'function';

        // When the server does not serve file_glob_search or the user disabled
        // it, the picker still opens for manual entry but explains why search is
        // unavailable instead of firing searches that would only fail. Browse is
        // hidden too: it resolves the picked folder name through the same tool.
        const fileSearchKey = $derived(toolsStore.getPermissionKey(BuiltInTool.FILE_GLOB_SEARCH));
        const fileSearchEnabled = $derived(
                fileSearchKey !== null && toolsStore.isToolEnabled(fileSearchKey)
        );
        const searchUnavailableMessage = $derived(
                fileSearchKey === null
                        ? 'File search is unavailable on this server - type a full path and press Enter'
                        : 'File search is disabled - type a full path and press Enter, or enable "Search files" in Settings > Tools'
        );

        let searchInputRef: HTMLInputElement | null = $state(null);

        let queryResults = $state<string[]>([]);
        let searchError = $state<string | null>(null);
        let listContainer = $state<HTMLDivElement | null>(null);

        const nav = usePickerNavigation({
                count: () => queryResults.length,
                isOpen: () => isOpen,
                onClose: closePicker,
                onSelect: (index) => commit(queryResults[index])
        });

        let homeBase = $derived(toolsStore.serverHome);

        // Resolve home eagerly so the chip can abbreviate before the picker opens.
        $effect(() => {
                if (typeof window === 'undefined') return;

                void toolsStore.resolveServerHome();
        });

        // HTML `autofocus` is unreliable on dynamically shown elements.
        $effect(() => {
                if (!isOpen) return;

                setTimeout(() => searchInputRef?.focus(), FOCUS_DELAY_MS);
        });

        $effect(() => {
                if (!isOpen) return;

                const q = query.trim();

                nav.reset(-1);

                if (q && fileSearchEnabled) {
                        search.run(q);
                } else {
                        search.cancel();
                        queryResults = [];
                        searchError = null;
                        nav.reset(-1);
                        searchScope = homeBase ?? HOME_TILDE;
                }
        });

        useScrollActiveRow({
                dataIndex: 'result',
                getContainer: () => listContainer,
                getCount: () => queryResults.length,
                getIndex: () => nav.hoveredIndex,
                getTrigger: () => nav.scrollTrigger
        });

        let searchScope = $state(HOME_TILDE);

        // An exactly-typed directory is "entered": the shared search lists its
        // children too, so path navigation does not require a trailing slash.
        const search = useDebouncedSearch({
                canRun: () => isOpen && fileSearchEnabled,
                debounceMs: SEARCH.DEBOUNCE_MS,
                getQuery: () => query.trim(),
                run: async (q, signal, isCurrent) => {
                        const trimmed = q.trim();

                        if (!trimmed) {
                                queryResults = [];
                                searchError = null;
                                nav.reset(-1);
                                searchScope = homeBase ?? HOME_TILDE;

                                return;
                        }

                        try {
                                // Generous limit: ranking is client-side, only the top
                                // MAX_RESULTS_SHOWN are shown.
                                const res = await runGlobSearchWithChildren(
                                        trimmed,
                                        homeBase ?? HOME_TILDE,
                                        SEARCH.MAX_DEPTH,
                                        SEARCH.LIMIT,
                                        signal,
                                        { type: GlobSearchType.DIR }
                                );

                                if (!isCurrent()) return;

                                if (res.error) {
                                        queryResults = [];
                                        nav.reset(-1);
                                        searchError = res.error;

                                        return;
                                }

                                searchScope = res.exactDir ?? res.args.path;
                                queryResults = res.entries.map((e) => e.path).slice(0, SEARCH.MAX_RESULTS_SHOWN);

                                if (queryResults.length > 0) {
                                        nav.reset(0);
                                        nav.bumpScroll(); // scroll the list back to the top (first item is hovered)
                                } else {
                                        nav.reset(-1);
                                }

                                searchError = null;
                        } catch (err) {
                                if (!isCurrent() || signal.aborted) return;

                                queryResults = [];
                                nav.reset(-1);
                                searchError = err instanceof Error ? err.message : String(err);
                        }
                }
        });
        // Single funnel for every local close so the host refocus always fires.
        function closePicker() {
                onClose?.();
        }

        function commit(path: string) {
                onChange?.(path);
                closePicker();
        }

        function setDirectory(value: string) {
                const trimmed = value.trim();

                if (!trimmed) return;

                onChange?.(trimmed);
        }

        // Resolve a browser-picked folder name (which exposes only the leaf name)
        // to a server-side absolute path; null when the server cannot locate it,
        // so the caller fails visibly instead of committing a bare leaf name.
        async function resolveNativeName(name: string): Promise<string | null> {
                try {
                        const res = await ToolsService.executeToolRaw(BuiltInTool.FILE_GLOB_SEARCH, {
                                include: buildCaseInsensitiveGlob(name),
                                limit: SEARCH.NATIVE_LIMIT,
                                max_depth: SEARCH.NATIVE_MAX_DEPTH,
                                path: homeBase ?? HOME_TILDE,
                                type: GlobSearchType.DIR
                        });
                        const base = typeof res.base === 'string' ? res.base : '';
                        const entries = Array.isArray(res.entries) ? (res.entries as GlobEntry[]) : [];
                        const match = entries.find(
                                (e) => lastPathSegment(e.path).toLowerCase() === name.toLowerCase()
                        );

                        return match ? joinPath(base, match.path) : null;
                } catch {
                        return null;
                }
        }

        async function browseNative() {
                if (disabled || !window.showDirectoryPicker) return;

                try {
                        const handle = await window.showDirectoryPicker();
                        const path = await resolveNativeName(handle.name);

                        if (path) {
                                setDirectory(path);
                                closePicker();
                        } else {
                                // keep the previous cwd and fail visibly instead of committing a
                                // bare leaf name that would resolve against the server cwd
                                searchError = `Could not resolve "${handle.name}" to a server path`;
                        }
                } catch (err) {
                        // user cancelled - silently ignore; other errors are logged
                        if (err instanceof DOMException && err.name === 'AbortError') return;

                        console.error('[ChatFormCurrentWorkingDirectory] showDirectoryPicker failed:', err);
                }
        }

        function handleSubmit() {
                const value = query.trim();

                if (!value) {
                        closePicker();

                        return;
                }

                setDirectory(value);
                closePicker();
        }

        function handleKeydown(event: KeyboardEvent) {
                if (event.key === KeyboardKey.ENTER) {
                        event.preventDefault();

                        if (nav.hoveredIndex >= 0 && queryResults[nav.hoveredIndex]) {
                                commit(queryResults[nav.hoveredIndex]);
                        } else if (queryResults.length === 0) {
                                handleSubmit();
                        }
                } else if (event.key === KeyboardKey.ARROW_DOWN) {
                        if (queryResults.length > 0) {
                                event.preventDefault();
                                nav.move(1);
                        }
                } else if (event.key === KeyboardKey.ARROW_UP) {
                        if (queryResults.length > 0) {
                                event.preventDefault();
                                nav.move(-1);
                        }
                }
        }

        function clearDirectory(event?: MouseEvent) {
                // Stop the click from bubbling into the chip button and re-opening
                // the picker on top of the now-cleared state.
                event?.stopPropagation();
                event?.preventDefault();
                onChange?.(null);
                closePicker();
        }

        function handleDismiss(event?: MouseEvent) {
                event?.stopPropagation();
                event?.preventDefault();

                if (directory) {
                        clearDirectory(event);
                }
        }

        function handleOpenChange(open: boolean) {
                if (open) {
                        void toolsStore.resolveServerHome();
                } else {
                        search.cancel();
                        // bits-ui-initiated close (Escape on the content, outside-click) -
                        // the only path that bypasses closePicker().
                        onClose?.();
                }
        }

        let innerWidth = $state(0);
        const showTooltip = $derived(innerWidth > DEFAULT_MOBILE_BREAKPOINT);
</script>

<button
        type="button"
        class={[
                'justify-self-start flex min-w-0 w-auto items-center gap-1 mt-1.5 py-1 px-2 backdrop-blur-2xl rounded-md',
                className
        ]}
        onclick={onOpen}
        {disabled}
>
        <ChatFormCurrentWorkingDirectoryChip
                {directory}
                {homeBase}
                {disabled}
                {showTooltip}
                onClear={handleDismiss}
        />
</button>

<Popover.Root open={isOpen} onOpenChange={handleOpenChange}>
        <Popover.Trigger
                class="pointer-events-none absolute inset-0 opacity-0"
                tabindex={-1}
                aria-hidden="true"
        >
                <span class="sr-only">Open working directory picker</span>
        </Popover.Trigger>

        <Popover.Content
                side="top"
                align="start"
                sideOffset={12}
                {customAnchor}
                preventScroll={false}
                onkeydown={handleKeydown}
                onOpenAutoFocus={(event) => event.preventDefault()}
                onCloseAutoFocus={(event) => event.preventDefault()}
                class="w-[var(--bits-popover-anchor-width)] max-w-none rounded-xl border-border/50 p-0 shadow-xl"
        >
                <div class="p-2 min-h-22 flex flex-col justify-between">
                        <SearchInput
                                bind:ref={searchInputRef}
                                bind:value={query}
                                placeholder="Choose working directory"
                                onClose={closePicker}
                                class="w-full"
                        />

                        {#if !fileSearchEnabled}
                                <div class="px-2 py-1.5 text-sm text-muted-foreground">{searchUnavailableMessage}</div>
                        {:else if query.trim() && (search.isSearching || queryResults.length > 0 || searchError)}
                                <ChatFormCurrentWorkingDirectoryResultsList
                                        results={queryResults}
                                        hoveredIndex={nav.hoveredIndex}
                                        isSearching={search.isSearching}
                                        error={searchError}
                                        rawQuery={query}
                                        bind:container={listContainer}
                                        onCommit={commit}
                                        onHover={(index) => nav.setHover(index)}
                                />
                        {/if}

                        {#if pickerSupported && fileSearchEnabled}
                                <button
                                        type="button"
                                        class="-mt-1 flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground"
                                        onclick={browseNative}
                                >
                                        <FolderOpen class="size-4 shrink-0 text-muted-foreground" />
                                        <span>Browse</span>
                                </button>
                        {/if}

                        {#if homeBase && fileSearchEnabled}
                                <div class="-mx-2 my-2 h-px bg-border/20" aria-hidden="true"></div>

                                <span class="px-2 py-1.5 font-mono text-[10px]">
                                        Searching in:

                                        <span class="truncate text-muted-foreground/70" title={searchScope}
                                                >{abbreviateHome(searchScope, homeBase)}</span
                                        >
                                </span>
                        {/if}
                </div>
        </Popover.Content>
</Popover.Root>

<svelte:window bind:innerWidth />