opencode-snippets 2.1.1 → 2.1.3

package/dist/tui.jsx

@@ -5,9 +5,11 @@ import { useKeyboard } from "@opentui/solid";
 import { createEffect, createMemo, createResource, createSignal, Index, onCleanup, Show, } from "solid-js";
 import { CONFIG } from "./src/constants.js";
 import { ensureSnippetsDir, listSnippets, loadSnippets } from "./src/loader.js";
+import { addPendingDraft } from "./src/pending-drafts.js";
+import { markSnippetReloadRequested } from "./src/reload-signal.js";
 import { loadSkills } from "./src/skill-loader.js";
 import { filterSkills, filterSnippets, highlightMatches, matchedAliases, snippetDescription, } from "./src/tui-search.js";
-import { findTrailingHashtagTrigger, insertSkillLoad, insertSnippetTag, insertSnippetTrigger, preferredSnippetTag, stepSelection, } from "./src/tui-trigger.js";
+import { findTrailingHashtagTrigger, insertSkillLoad, insertSnippetTag, insertSnippetTrigger, isReloadCommand, preferredSnippetTag, stepSelection, } from "./src/tui-trigger.js";
 const id = "opencode-snippets:autocomplete";
 const PROMPT_SYNC_MS = 50;
 const MENU_MAX_HEIGHT = 10;
@@ -24,7 +26,6 @@ const EMPTY_SNIPPET = `---
 description: ""
 ---
 
-
 `;
 const INLINE_BORDER = {
     border: ["left", "right"],
@@ -89,6 +90,49 @@ function normalizeSnippetName(input) {
         .replace(/-{2,}/g, "-")
         .replace(/^-+|-+$/g, "");
 }
+function resolveExternalEditor() {
+    const visual = Bun.env.VISUAL?.trim();
+    if (visual) {
+        return {
+            command: visual,
+            env: "VISUAL",
+        };
+    }
+    const editor = Bun.env.EDITOR?.trim();
+    if (editor) {
+        return {
+            command: editor,
+            env: "EDITOR",
+        };
+    }
+}
+function editorBinary(editor) {
+    return editor.command.trim().split(/\s+/)[0] || "";
+}
+function usesTerminalUi(editor) {
+    const bin = editorBinary(editor).split(/[\\/]/).pop()?.toLowerCase();
+    if (!bin)
+        return true;
+    return ![
+        "code",
+        "code-insiders",
+        "cursor",
+        "windsurf",
+        "subl",
+        "zed",
+        "mate",
+        "idea",
+        "webstorm",
+        "pycharm",
+        "goland",
+        "clion",
+        "rubymine",
+        "fleet",
+        "notepad",
+        "notepad++",
+        "open",
+    ].includes(bin);
+}
 async function ensureSnippetDraft(name, projectDir) {
     const dir = await ensureSnippetsDir(projectDir);
     const filePath = join(dir, `${name}${CONFIG.SNIPPET_EXTENSION}`);
@@ -97,27 +141,31 @@ async function ensureSnippetDraft(name, projectDir) {
     }
     return filePath;
 }
-async function openExternalEditor(api, filePath) {
-    const editor = Bun.env.VISUAL || Bun.env.EDITOR;
+async function openExternalEditor(api, filePath, editor) {
     if (!editor)
         return false;
-    api.renderer.suspend();
-    api.renderer.currentRenderBuffer.clear();
+    const interactive = usesTerminalUi(editor);
+    if (interactive) {
+        api.renderer.suspend();
+        api.renderer.currentRenderBuffer.clear();
+    }
     try {
         const cmd = process.platform === "win32"
-            ? ["cmd", "/c", `${editor} "${filePath.replace(/"/g, '\\"')}"`]
-            : [...editor.split(" "), filePath];
+            ? ["cmd", "/c", `${editor.command} "${filePath.replace(/"/g, '\\"')}"`]
+            : [...editor.command.split(" "), filePath];
         const proc = Bun.spawn(cmd, {
-            stdin: "inherit",
-            stdout: "inherit",
-            stderr: "inherit",
+            stdin: interactive ? "inherit" : "ignore",
+            stdout: interactive ? "inherit" : "ignore",
+            stderr: interactive ? "inherit" : "ignore",
         });
         await proc.exited;
         return true;
     }
     finally {
-        api.renderer.currentRenderBuffer.clear();
-        api.renderer.resume();
+        if (interactive) {
+            api.renderer.currentRenderBuffer.clear();
+            api.renderer.resume();
+        }
         api.renderer.requestRender();
     }
 }
@@ -136,6 +184,29 @@ async function getSnippets(api) {
     const registry = await loadSnippets(api.state.path.directory);
     return sortSnippets(listSnippets(registry));
 }
+async function reloadSnippetsInTui(api) {
+    const registry = await loadSnippets(api.state.path.directory);
+    await markSnippetReloadRequested(api.state.path.directory);
+    return listSnippets(registry).length;
+}
+function executeReloadInPrompt(api, ref, clear, refresh) {
+    void (async () => {
+        const count = await reloadSnippetsInTui(api);
+        await refresh();
+        clear();
+        ref.focus();
+        api.renderer.requestRender();
+        setTimeout(() => {
+            api.ui.toast({
+                variant: "success",
+                title: "Snippets reloaded",
+                message: `Reloaded ${count} snippet${count === 1 ? "" : "s"}.`,
+                duration: 3000,
+            });
+            api.renderer.requestRender();
+        }, 0);
+    })();
+}
 async function getSkills(api) {
     const registry = await loadSkills(api.state.path.directory);
     return sortSkills([...registry.values()]);
@@ -147,11 +218,15 @@ function PromptWithSnippetAutocomplete(props) {
     const [prompt, setPrompt] = createSignal();
     const [dismissed, setDismissed] = createSignal();
     const [selected, setSelected] = createSignal(0);
-    const [, setInputMode] = createSignal("keyboard");
+    const [inputMode, setInputMode] = createSignal("keyboard");
     const [ignoreMouseUntil, setIgnoreMouseUntil] = createSignal(0);
     const [lastMousePos, setLastMousePos] = createSignal();
     const [input, setInput] = createSignal("");
+    const [syncingPrompt, setSyncingPrompt] = createSignal(false);
+    const [menuEpoch, setMenuEpoch] = createSignal(0);
     const [creating, setCreating] = createSignal(false);
+    const [dialogOpen, setDialogOpen] = createSignal(false);
+    const [dialogHandoffUntil, setDialogHandoffUntil] = createSignal(0);
     const [snippets, { refetch: refetchSnippets }] = createResource(() => props.api.state.path.directory, () => getSnippets(props.api), {
         initialValue: [],
     });
@@ -163,11 +238,50 @@ function PromptWithSnippetAutocomplete(props) {
         props.bindPrompt(ref);
         props.hostRef?.(ref);
     };
+    const refreshSnippetOptions = async () => {
+        await refetchSnippets();
+    };
+    let pendingPromptSync;
+    let pendingPromptFocus;
+    let pendingDialogHandoff;
+    onCleanup(() => {
+        if (pendingPromptSync)
+            clearTimeout(pendingPromptSync);
+        if (pendingPromptFocus)
+            clearTimeout(pendingPromptFocus);
+        if (pendingDialogHandoff)
+            clearTimeout(pendingDialogHandoff);
+    });
     const lockKeyboardSelection = () => {
         setInputMode("keyboard");
         setIgnoreMouseUntil(Date.now() + MOUSE_HOVER_SUPPRESS_MS);
     };
     const allowMouseHover = () => Date.now() >= ignoreMouseUntil();
+    const dialogBlockingInput = () => dialogOpen() || dialogHandoffUntil() > 0;
+    const beginDialogHandoff = () => {
+        if (pendingDialogHandoff)
+            clearTimeout(pendingDialogHandoff);
+        setDialogHandoffUntil(Date.now() + 150);
+        pendingDialogHandoff = setTimeout(() => {
+            pendingDialogHandoff = undefined;
+            setDialogHandoffUntil(0);
+            props.api.renderer.requestRender();
+        }, 175);
+    };
+    const handlePromptSubmit = () => {
+        if (dialogBlockingInput()) {
+            return;
+        }
+        const ref = prompt();
+        if (ref && isReloadCommand(ref.current.input)) {
+            executeReloadInPrompt(props.api, ref, () => {
+                syncPromptInput(ref, "");
+                setDismissed(undefined);
+            }, refreshSnippetOptions);
+            return;
+        }
+        props.onSubmit?.();
+    };
     const recordMouseMove = (x, y) => {
         const last = lastMousePos();
         if (last?.x === x && last.y === y) {
@@ -176,20 +290,85 @@ function PromptWithSnippetAutocomplete(props) {
         setLastMousePos({ x, y });
         return true;
     };
+    const restorePromptFocus = (ref) => {
+        if (pendingPromptFocus)
+            clearTimeout(pendingPromptFocus);
+        pendingPromptFocus = setTimeout(() => {
+            pendingPromptFocus = undefined;
+            ref.focus();
+        }, 175);
+    };
     const syncPromptInput = (ref, nextInput) => {
         setPromptInput(ref, nextInput);
         setInput(nextInput);
+        setSyncingPrompt(false);
+    };
+    const optionsForQuery = (value) => {
+        const snippetOptions = filterSnippets(snippets(), value).map((snippet) => ({
+            kind: "snippet",
+            id: `snippet:${snippet.name}`,
+            label: `#${snippet.name}`,
+            description: snippetDescription(snippet),
+            aliases: matchedAliases(snippet, value),
+            snippet,
+        }));
+        const skillOptions = filterSkills(skills(), value).map((skill) => ({
+            kind: "skill",
+            id: `skill:${skill.name}`,
+            label: `#skill(${skill.name})`,
+            description: skillDescription(skill),
+            aliases: [],
+            skill,
+        }));
+        return [...snippetOptions, ...skillOptions];
+    };
+    const canCreateForQuery = (value) => {
+        const q = value.trim();
+        if (snippets.loading || skills.loading)
+            return false;
+        if (!q)
+            return false;
+        if (!normalizeSnippetName(q))
+            return false;
+        return optionsForQuery(q).length === 0;
+    };
+    const schedulePromptSync = () => {
+        const ref = prompt();
+        if (!ref)
+            return;
+        if (dialogBlockingInput())
+            return;
+        const prev = input();
+        setSyncingPrompt(true);
+        setMenuEpoch((n) => n + 1);
+        if (pendingPromptSync)
+            clearTimeout(pendingPromptSync);
+        pendingPromptSync = setTimeout(() => {
+            pendingPromptSync = undefined;
+            const next = ref.current.input;
+            setInput((prev) => (prev === next ? prev : next));
+            if (next !== prev) {
+                setSyncingPrompt(false);
+            }
+            props.api.renderer.requestRender();
+        }, 0);
     };
     createEffect(() => {
         const ref = prompt();
         if (!ref) {
             setInput("");
+            setSyncingPrompt(false);
             return;
         }
         // The prompt ref exposes current state but not an onInput hook, so mirror it.
         const sync = () => {
             const next = ref.current.input;
-            setInput((prev) => (prev === next ? prev : next));
+            setInput((prev) => {
+                if (prev === next)
+                    return prev;
+                setSyncingPrompt(false);
+                return next;
+            });
         };
         sync();
         const timer = setInterval(sync, PROMPT_SYNC_MS);
@@ -205,29 +384,15 @@ function PromptWithSnippetAutocomplete(props) {
         const next = match();
         if (!next)
             return [];
-        const snippetOptions = filterSnippets(snippets(), next.query.trim()).map((snippet) => ({
-            kind: "snippet",
-            id: `snippet:${snippet.name}`,
-            label: `#${snippet.name}`,
-            description: snippetDescription(snippet),
-            aliases: matchedAliases(snippet, next.query.trim()),
-            snippet,
-        }));
-        const skillOptions = filterSkills(skills(), next.query.trim()).map((skill) => ({
-            kind: "skill",
-            id: `skill:${skill.name}`,
-            label: `#skill(${skill.name})`,
-            description: skillDescription(skill),
-            aliases: [],
-            skill,
-        }));
-        return [...snippetOptions, ...skillOptions];
+        return optionsForQuery(next.query.trim());
     });
     const draftName = createMemo(() => normalizeSnippetName(query()));
     const visible = createMemo(() => {
         const next = match();
         if (!next)
             return false;
+        if (syncingPrompt())
+            return false;
         return dismissed() !== next.token;
     });
     const canCreate = createMemo(() => {
@@ -249,6 +414,12 @@ function PromptWithSnippetAutocomplete(props) {
         return undefined;
     });
     let scroll;
+    createEffect(() => {
+        menuEpoch();
+        if (visible()) {
+            scroll = undefined;
+        }
+    });
     createEffect((prev) => {
         const next = match();
         if (!next) {
@@ -304,6 +475,19 @@ function PromptWithSnippetAutocomplete(props) {
         let dispose;
         const timer = setTimeout(() => {
             dispose = props.api.command.register(() => [
+                {
+                    title: "Reload snippets",
+                    value: "snippets.reload",
+                    description: "Reload snippet files from disk",
+                    category: "Prompt",
+                    slash: { name: "snippets:reload" },
+                    onSelect() {
+                        executeReloadInPrompt(props.api, ref, () => {
+                            syncPromptInput(ref, "");
+                            setDismissed(undefined);
+                        }, refreshSnippetOptions);
+                    },
+                },
                 {
                     title: "Accept snippet autocomplete",
                     value: "snippets.accept",
@@ -312,11 +496,35 @@ function PromptWithSnippetAutocomplete(props) {
                     hidden: true,
                     enabled: ref.focused,
                     onSelect() {
+                        if (isReloadCommand(ref.current.input)) {
+                            executeReloadInPrompt(props.api, ref, () => {
+                                syncPromptInput(ref, "");
+                                setDismissed(undefined);
+                            }, refreshSnippetOptions);
+                            return;
+                        }
+                        if (dialogBlockingInput()) {
+                            return;
+                        }
                         const current = findTrailingHashtagTrigger(ref.current.input);
                         if (!current || dismissed() === current.token) {
                             ref.submit();
                             return;
                         }
+                        const live = optionsForQuery(current.query.trim());
+                        const index = Math.min(selected(), Math.max(live.length - 1, 0));
+                        if (syncingPrompt()) {
+                            if (live.length > 0) {
+                                chooseItem(live[index] ?? live[0]);
+                                return;
+                            }
+                            if (canCreateForQuery(current.query)) {
+                                void createSnippetDraft(current.query);
+                                return;
+                            }
+                            ref.submit();
+                            return;
+                        }
                         // Prefer the rendered dropdown state so Enter follows what the user can see.
                         if (visible()) {
                             const rendered = options();
@@ -325,23 +533,16 @@ function PromptWithSnippetAutocomplete(props) {
                                 chooseItem(rendered[index] ?? rendered[0]);
                                 return;
                             }
-                            if (canCreate()) {
-                                void createSnippetDraft();
-                                return;
-                            }
                         }
                         if (snippets.loading || skills.loading) {
                             return;
                         }
-                        const live = options();
                         if (live.length > 0) {
-                            const index = Math.min(selected(), live.length - 1);
                             chooseItem(live[index] ?? live[0]);
                             return;
                         }
-                        const query = current.query.trim();
-                        if (normalizeSnippetName(query)) {
-                            void createSnippetDraft();
+                        if (canCreateForQuery(current.query)) {
+                            void createSnippetDraft(current.query);
                             return;
                         }
                         ref.submit();
@@ -354,14 +555,15 @@ function PromptWithSnippetAutocomplete(props) {
             dispose?.();
         });
     });
-    const createSnippetDraft = async () => {
+    const createSnippetDraft = async (rawQuery) => {
         const ref = prompt();
-        const name = draftName();
+        const name = normalizeSnippetName(rawQuery ?? query());
         if (!ref || !name || creating())
             return;
         const current = findTrailingHashtagTrigger(ref.current.input);
         const nextInput = current ? `${ref.current.input.slice(0, current.start)}#${name}` : `#${name}`;
-        const editor = Bun.env.VISUAL || Bun.env.EDITOR;
+        const dismissedToken = `#${name}`;
+        const editor = resolveExternalEditor();
         if (!editor) {
             props.api.ui.toast({
                 variant: "warning",
@@ -369,35 +571,60 @@ function PromptWithSnippetAutocomplete(props) {
             });
             return;
         }
-        setCreating(true);
-        try {
-            syncPromptInput(ref, nextInput);
-            const filePath = await ensureSnippetDraft(name);
-            const opened = await openExternalEditor(props.api, filePath);
-            if (!opened) {
-                syncPromptInput(ref, nextInput);
-                return;
-            }
-            await refetchSnippets();
-            syncPromptInput(ref, nextInput);
-            setDismissed(undefined);
-        }
-        catch (error) {
-            props.api.ui.toast({
-                variant: "error",
-                message: `Failed to create snippet: ${error instanceof Error ? error.message : String(error)}`,
-            });
-            syncPromptInput(ref, nextInput);
-        }
-        finally {
-            setCreating(false);
-            ref.focus();
-        }
+        props.api.ui.dialog.setSize("medium");
+        setDialogOpen(true);
+        props.api.ui.dialog.replace(() => (<props.api.ui.DialogConfirm title={`Create snippet #${name}?`} message={`This will create the snippet draft and open it in $${editor.env} (${editor.command}).`} onCancel={() => {
+                setDialogOpen(false);
+                beginDialogHandoff();
+                props.api.ui.dialog.clear();
+                restorePromptFocus(ref);
+            }} onConfirm={() => {
+                setDialogOpen(false);
+                beginDialogHandoff();
+                props.api.ui.dialog.clear();
+                void (async () => {
+                    setCreating(true);
+                    try {
+                        syncPromptInput(ref, nextInput);
+                        const filePath = await ensureSnippetDraft(name);
+                        await addPendingDraft(props.api.state.path.directory, name);
+                        setDismissed(dismissedToken);
+                        setCreating(false);
+                        const opened = await openExternalEditor(props.api, filePath, editor);
+                        if (!opened)
+                            return;
+                    }
+                    catch (error) {
+                        props.api.ui.toast({
+                            variant: "error",
+                            message: `Failed to create snippet: ${error instanceof Error ? error.message : String(error)}`,
+                        });
+                        syncPromptInput(ref, nextInput);
+                        setDismissed(undefined);
+                    }
+                    finally {
+                        setCreating(false);
+                        restorePromptFocus(ref);
+                    }
+                })();
+            }}/>));
     };
     useKeyboard((evt) => {
+        const ref = prompt();
+        const name = evt.name?.toLowerCase();
+        if (ref && isReloadCommand(ref.current.input) && (name === "return" || name === "enter")) {
+            executeReloadInPrompt(props.api, ref, () => {
+                syncPromptInput(ref, "");
+                setDismissed(undefined);
+            }, refreshSnippetOptions);
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+        }
+        if (dialogBlockingInput())
+            return;
         if (!visible())
             return;
-        const name = evt.name?.toLowerCase();
         const total = options().length;
         const actionable = total > 0 || canCreate();
         const isNavUp = name === "up";
@@ -441,7 +668,10 @@ function PromptWithSnippetAutocomplete(props) {
             }
             evt.preventDefault();
             evt.stopPropagation();
+            return;
         }
+        // Mirror the host prompt state right after normal typing so stale matches disappear.
+        schedulePromptSync();
     });
     const emptyLabel = createMemo(() => {
         if ((snippets.loading || skills.loading) && options().length === 0) {
@@ -454,7 +684,7 @@ function PromptWithSnippetAutocomplete(props) {
     const addSnippetLabel = createMemo(() => {
         if (creating())
             return "Creating snippet...";
-        return `Add new Snippet  #${draftName()}`;
+        return `Add new Snippet: #${draftName()}`;
     });
     const selectedFg = createMemo(() => selectedText(props.api.theme.current));
     return (<box>
@@ -467,9 +697,11 @@ function PromptWithSnippetAutocomplete(props) {
                       <text fg={props.api.theme.current.textMuted}>{emptyLabel()}</text>
                     </box>}>
                   {/* biome-ignore lint/a11y/noStaticElementInteractions: OpenTUI rows intentionally handle mouse selection. */}
-                  <box id="create-snippet" paddingLeft={1} paddingRight={1} backgroundColor={props.api.theme.current.primary} onMouseMove={() => {
+                  <box id="create-snippet" paddingLeft={1} paddingRight={1} backgroundColor={props.api.theme.current.primary} onMouseMove={(event) => {
                 if (!allowMouseHover())
                     return;
+                if (!recordMouseMove(event.x, event.y))
+                    return;
                 setInputMode("mouse");
             }} onMouseDown={() => {
                 setInputMode("mouse");
@@ -482,6 +714,7 @@ function PromptWithSnippetAutocomplete(props) {
                 </Show>}>
               {(option, index) => (
         // biome-ignore lint/a11y/noStaticElementInteractions: OpenTUI rows intentionally handle mouse selection.
+        // biome-ignore lint/a11y/useKeyWithMouseEvents: OpenTUI boxes do not expose DOM-style focus events.
         <box id={option().id} paddingLeft={1} paddingRight={1} backgroundColor={index === selected() ? props.api.theme.current.primary : undefined} flexDirection="row" onMouseMove={(event) => {
                 if (!allowMouseHover())
                     return;
@@ -489,6 +722,11 @@ function PromptWithSnippetAutocomplete(props) {
                 if (!recordMouseMove(event.x, event.y))
                     return;
                 setInputMode("mouse");
+            }} onMouseOver={() => {
+                if (!allowMouseHover())
+                    return;
+                if (inputMode() !== "mouse")
+                    return;
                 setSelected(index);
             }} onMouseDown={() => {
                 setInputMode("mouse");
@@ -513,7 +751,7 @@ function PromptWithSnippetAutocomplete(props) {
           </scrollbox>
         </box>
       </Show>
-      <props.api.ui.Prompt sessionID={props.sessionID} workspaceID={props.workspaceID} visible={props.visible} disabled={props.disabled} onSubmit={props.onSubmit} placeholders={props.placeholders} ref={bind} right={props.right}/>
+      <props.api.ui.Prompt sessionID={props.sessionID} workspaceID={props.workspaceID} visible={props.visible} disabled={props.disabled || dialogBlockingInput()} onSubmit={handlePromptSubmit} placeholders={props.placeholders} ref={bind} right={props.right}/>
     </box>);
 }
 const tui = async (api) => {