feat(vscode): add slash command autocomplete quick actions

[hiarun02]

Description

This PR adds slash-command quick actions to the VS Code extension chat input.

Typing / in the Nanocoder chat box opens an autocomplete menu with quick actions like:

• /test
• /explain
• /doc

When the user selects one of these commands, the command inserts a visible, editable prompt template directly into the textarea. For example, selecting /explain inserts:

Explain the following clearly:

This keeps the prompt transparent: the user sees exactly what will be sent to the AI, and no hidden prompt prefix is persisted in backend chat history.

This keeps the existing /clear behavior intact and only adds new quick-action support on top of the current slash-command flow.

Why

Users often repeat the same kinds of prompts, like asking for tests, explanations, or documentation. This feature makes those actions faster and less repetitive in the VS Code extension.

What changed

• Added / autocomplete in the chat input UI
• Added initial quick actions:
  • /test
  • /explain
  • /doc
• Moved slash-command definitions and token handling into a shared webview helper
• Inserted selected command templates directly into the textarea as visible, editable text
• Tightened slash detection so URLs/paths like https:// and /tmp/ do not trigger command replacement
• Added accessibility state for the slash dropdown
• Added regression coverage for slash commands not becoming attachment chips
• Preserved the existing /clear flow

Files changed

• plugins/vscode/media/chat-panel.html
• plugins/vscode/media/chat-panel.js
• plugins/vscode/media/slash-command-utils.js
• plugins/vscode/src/chat-webview-provider.ts
• plugins/vscode/src/chat-webview-provider.spec.ts
• .changeset/vscode-slash-command-actions.md

Type of Change

• New feature

Changeset

• Added a changeset describing this change for the changelog

Testing

Automated Tests

• Existing build passes
• New feature includes passing tests in .spec.ts files
• Tests cover slash-command templates, slash detection, visible insertion, and chip regression behavior

Manual Testing

• Tested in the VS Code Extension Development Host
• Verified / autocomplete shows commands
• Verified selecting /explain inserts Explain the following clearly: into the textarea
• Verified selected command text is visible/editable before sending
• Verified normal message submission still works
• Verified existing /clear behavior is preserved
• Verified slash commands do not appear as attachment chips

Notes

• The implementation now uses visible textarea insertion instead of hidden prompt metadata.
• This avoids persisting hidden prompt prefixes in backend chat history.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[akramcodez]

@hiarun02 Thanks for the PR! I like the overall direction, but I don't think it's ready to merge yet. I noticed a few things that should be addressed first:

1. Scope: The PR contains a large number of unrelated changes outside the VS Code extension. Please rebase onto the latest main and keep the PR focused on this feature only.

2. Changeset: This is a user-facing feature, so it needs its own changeset. The existing changesets in the branch are unrelated.

3. Hidden prompt persistence: The current implementation only hides the injected prompt during the active session. Since the concatenated prompt is persisted by the backend, reopening or resuming the session will expose the hidden prefix in chat history. I'd recommend either inserting the template directly into the input so users can see what is being sent, or, preferably, passing it separately as a system prompt if the backend supports it.

4. Tests: The PR description mentions passing tests, but no tests were added for the new slash command behavior. Please add coverage for the prompt-building/command-mapping logic to help prevent regressions.

Once these are addressed, I'd be happy to review it again. Overall, the feature is heading in the right direction.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[hiarun02]

Thanks! I only modified 5 files, all within the VS Code extension. Could you clarify which unrelated changes you're referring to? Is it the formatting changes ' → ", or something else?

[akramcodez]

Hi @hiarun02, thanks for following up!

To answer your question about the unrelated changes: Yes, it is exactly the formatting changes (' to ").

The Nanocoder project uses Biome with strict formatting rules (tabs, single quotes). Because your editor is likely running Prettier or a different local formatter, it rewrote hundreds of lines of code in chat-webview-provider.ts and webview-protocol.ts to use double quotes. This is what caused the massive +2,248 -433 diff.

Please revert the formatting changes so the PR only highlights the actual logic you added. Running pnpm lint --apply or using the project's Biome config should fix this.

In addition to the formatting, here is what still needs to be addressed before we can merge:

1. Data Safety: Hidden Prompt Persistence

• What is wrong: You are currently string-concatenating the prefix into finalPrompt and sending it directly to _acpClient.prompt(finalPrompt).
• Why it is wrong: Nanocoder's core engine persists the exact string it receives into the session history JSON. While your webview UI hides it temporarily during the active session, the moment a user closes VS Code and resumes the session later, the backend will send back the full concatenated string. This exposes the "hidden" prompt in the chat history.
• What should be done: Instead of silently concatenating it behind the scenes, the easiest and safest approach is to have the UI inject the template directly into the input textarea (e.g., selecting /test literally populates the box with "Write tests for the following: "). This makes it transparent to the user and avoids polluting the backend history state.

2. Test Coverage

• What is wrong: No .spec.ts files were added or modified.
• Why it is wrong: We require tests for new features to prevent future regressions.
• What should be done: Please add a test block in plugins/vscode/src/chat-webview-provider.spec.ts (or the equivalent test file) that asserts the _buildPrompt mapping behaves correctly when /test or /explain is selected.

3. Changeset Missing

• What is wrong: The CI changeset-check failed because there is no changeset file.
• What should be done: Please run pnpm changeset locally, write a quick user-facing description (e.g., "Added slash commands for quick actions in VS Code"), and commit the resulting .md file.

Once the formatting churn is removed and the history pollution is fixed, we'll be good to go!

[akramcodez]

Hey @hiarun02, are you still working on this issue? Just wanted to check in on the progress.

[akramcodez]

Hey @hiarun02, thanks for the update! I checked the latest PR state and the overall implementation direction looks good. The previous formatting churn and hidden-prompt persistence issue are resolved, and the scope is now clean.

There are a few things I'd like you to address before we merge:

1. Tests: The new chat-webview-provider.spec.ts tests duplicate the SLASH_COMMANDS data instead of testing the actual implementation. This means the tests can pass even if the real slash-command logic breaks. Please add tests that exercise the actual chat-panel.js logic (or move the command definitions into a shared module that both the implementation and tests import).

2. Slash detection: The current regex can trigger on URLs/paths ending with /, e.g. https:// or /tmp/. This could cause the user's input to be unexpectedly replaced by a command template. Please tighten the matching logic so / is only treated as a slash command when it's actually being used as one.

3. PR description: The implementation no longer uses hidden prompt metadata or modifies chat-webview-provider.ts; the command template is now inserted directly into the textarea, which is actually the safer approach. Please update the PR description so it reflects the current implementation.

4. Accessibility: Please add the appropriate role="listbox" / role="option" and selection state to the slash-command dropdown, following the existing mention-dropdown pattern.

The first two are the main blockers for me. Once those are addressed, I think we're very close to merging this. Thanks!

[hiarun02]

@akramcodez, Thanks for the detailed review, I’ll address the tests and slash detection first, then update the PR description and accessibility changes. Appreciate the feedback I’ll push the updates soon.

[hiarun02]

Updated the PR based on the latest review feedback:

• Moved slash-command definitions and token handling into a shared slash-command-utils.js helper so tests exercise the actual implementation.
• Tightened slash detection so URLs/paths like https:// and /tmp/ do not trigger command replacement.
• Kept the safe visible-template behavior: selecting /test, /explain, or /doc inserts editable text directly into the textarea.
• Added accessibility state for the slash dropdown with role="listbox", role="option", aria-selected, and aria-activedescendant.
• Added regression coverage to ensure slash commands cannot become attachment chips.

I also manually verified the behavior and recorded a video showing /explain inserting Explain the following clearly: into the textarea.

Screen.Recording.2026-08-22.at.1.19.24.AM.mov