Skip to content

[Feature]: VS Code extension #2713

@Quicksaver

Description

@Quicksaver

Before submitting

  • I searched existing issues and did not find a duplicate.
  • I am describing a concrete problem or use case, not just a vague idea.

Area

Not sure

Problem or use case

T3 Code is great for "the new way" of handling multi-agent multi-project work within a single hub. But I can see it also useful for those of us still stuck with the need of being there with the code while it's being changed (for whatever reason).

Especially now that Github Copilot billing will de-subsidize dev work immensely and the need to carefully choose which providers/harnesses/models, being able to use something like T3 Code that does lets you do precisely that, within the VSCode-first flow we are already used to, is in my view a great benefit.

Proposed solution

Render the webapp within a webview of a VS Code extension.

Why this matters

We can use a good wrapper around the harnesses we want to use, and keep the conversation threads and other nice things about T3Code coupled together with the codebase we are actually looking at.

Smallest useful scope

The core app remains the same, virtually untouched and shareable between the desktop, web, and extension views, needing only minor extension-only adjustments to hide certain things (i.e. don't need the open in vscode button if we're already there), and filter the threads to show only those relating to the project open in that particular VS Code window.

Alternatives considered

  • official Codex extension (so I can use ChatGPT subscription), tried it, meh...
  • desktop app + vs code = copy paste a lot, multiple vscode windows against single T3 Code app does not "match" easily with how my brain organizes things.
  • pay at least 5x more (on a low month) for either Github Copilot or OpenRouter keys so I can use the multiple models I want how I'm already using them, I'll avoid that while I can

Risks or tradeoffs

None? The VS Code extension should render the React webapp that already exists. At most there'll be some tiny points of extension-only logic in it, like hiding some elements and stuff like that. Hardly worth considering for maintenance.

Examples or references

I've already implemented my version of it: https://github.com/Quicksaver/t3code/blob/feature/vscode-extension/apps/vscode-extension/IMPLEMENTATION.md

TL;DR on the implementation notes linked above

Summary

This PR adds an experimental t3code-vscode extension that runs T3 Code inside VS Code. The extension starts an extension-owned local T3 backend, injects a host bridge into the existing React web app, and renders the T3 Code UI in VS Code webviews through a Secondary Side Bar view and custom thread editor tabs.

Method

Main driver: GPT 5.5
First code review: CodeRabbit, assessed and addressed by GPT 5.5
Additional code reviews: Sonnet 4.6, Gemini 3.1 Pro, Copilot Code Review, Copilot Raptor Mini, all assessed and addressed by GPT 5.5
Final code review: CodeRabbit 2nd pass, assessed and addressed by GPT 5.5

Feature Overview

  • T3 Code: Open to focus the T3 Code Secondary Side Bar view.
  • T3 Code: New Thread to open a new T3 Code conversation in an editor tab.
  • T3 Code: Restart Backend to restart the local extension-owned backend.
  • T3 Code: Clean Virtual Workspace Cache to remove inactive T3-owned virtual workspace checkouts.
  • A stable Secondary Side Bar webview (t3code.sidebarView).
  • A custom editor surface (t3code.conversationEditor) for thread routes like t3-code://route/<environmentId>/<threadId>.
  • Bundled backend and web assets in the VSIX.
  • Workspace bootstrap support for single-root, multi-root, SSH/devcontainer-style folders, and supported GitHub RemoteHub virtual workspaces.
  • Bearer-token auth between the VS Code webview and local backend.
  • Shared T3 client settings persistence through <T3 home>/userdata/client-settings.json.

Differences From The Desktop App

The VS Code surface is intentionally workspace-scoped instead of acting like the full desktop shell:

  • VS Code owns workspace, editor, terminal, source control, and file-reveal surfaces, so duplicated T3 UI is hidden by default.
  • The embedded T3 terminal is disabled by default; VS Code’s native terminal remains the primary terminal surface.
  • Branch/ref controls, checkout indicators, project-management chrome, and open/reveal picker controls are hidden unless restored through extension settings.
  • The UI follows the active VS Code theme and editor fonts by default.
  • Routing uses hash history and resets stale retained webview routes on startup.
  • Auth uses injected bearer credentials instead of browser cookies.
  • The sidebar only shows projects bootstrapped from the active VS workspace folders, avoiding accidental navigation into unrelated desktop-app projects.
  • GitHub RemoteHub virtual workspaces are materialized into a local T3-managed cache before backend startup.
  • Conversation timeline and prompt input width can be customized in VS Code with t3code.ui.threadConversationMaxWidth; when unset, the normal web app defaults are preserved.

Web App Impact

This PR extends the existing web app so it can run in VS Code without forking the UI:

  • Adds neutral window.t3HostBridge support alongside the existing desktop bridge fallback.
  • Adds VS Code detection through an explicit window.__T3_IS_VSCODE_WEBVIEW marker.
  • Adds host display preferences for hiding duplicated controls and for optionally overriding VS Code conversation/prompt max width.
  • Adds host appearance propagation for VS Code theme and font variables.
  • Adds VS Code-compatible auth behavior for HTTP requests and WebSocket startup.
  • Adds workspace-scoped sidebar filtering and first-load thread selection.
  • Persists thread-sidebar state through shared ClientSettings.
  • Supports relative web asset builds through VITE_BASE_URL.
  • Suppresses embedded terminal shortcuts and terminal-backed project actions when the VS Code host disables the T3 terminal.
  • Applies the optional VS Code width override live through the injected host bridge by setting a root CSS variable/attribute, without changing desktop/browser defaults.

The desktop/browser behavior is preserved outside VS Code.

Still To Address

  • Resolve keybinding collisions between T3 webview shortcuts and VS Code native keybindings.
  • Optimize VSIX package size further.
  • Validate Linux native dependency staging, especially node-pty.
  • Add linux-arm64 and win32-arm64 VSIX targets
  • Consider Chat Sessions integration once there is a concrete UX need.
  • Consider additional webview-to-extension host actions, such as adding the current file/selection to T3 Code or opening/revealing files through VS Code.
  • Revisit package signing or Open VSX publishing only if distribution requirements demand it.

Marketplace Publishing Requirements

  • Configure the GitHub repository variable VSCE_PUBLISHER with the Visual Studio Marketplace publisher id.
  • Configure the GitHub secret VSCE_PAT with a Marketplace Personal Access Token that can publish for that publisher.
  • Build platform-targeted VSIX artifacts because the extension packages native runtime dependencies node-pty.
  • Current release targets are:
    • darwin-arm64
    • darwin-x64
    • linux-x64
    • win32-x64
  • Stable releases publish normal VSIX packages.
  • Nightly/prerelease releases publish with --pre-release.
  • The release workflow must stamp the extension package version and publisher before packaging.
  • Marketplace metadata, repository information, icon, README, and extension-local license must be included in the packaged extension.
  • VS Code engine support currently requires ^1.106.0.

Validation

Implementation notes record successful validation for:

  • bun fmt
  • bun lint
  • bun typecheck
  • bun run --filter t3code-vscode package
  • Manual bundled-backend readiness smoke test

(I won't open a PR as it's an 8k+ line change and I don't want to get banned 😂 , will only do it once there's acceptance.)

I've been using it already for a while, and to develop the extension version itself even, and it feels almost copilot chat native experience with the added benefits of using the respective provider harnesses; exactly as expected, works flawlessly so far as my "better copilot".

I made it follow the active VS Code theme as well, although you can restore the original T3 theme from the extension settings:
Image

Contribution

  • I would be open to helping implement this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementRequested improvement or new capability.needs-triageIssue needs maintainer review and initial categorization.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions