feat(web): give LastCode sidebar its own opt-in setting

README.md

@@ -6,7 +6,7 @@ LastCode:
 
 - Tracks T3 Code nightly.
 - Takes over the update UI and installs a daemon that checkpoints T3 Code nightly, then rebases LastCode's changes on top.
-- Favors the legacy sidebar. We do not QA LastCode changes against the inbox sidebar, although fix pull requests are welcome.
+- Uses the upstream inbox sidebar by default and offers an optional LastCode sidebar under Settings → LastCode → Appearance. The upstream legacy choice remains independent. Automated checks cover sidebar selection and selected LastCode workflows; exhaustive cross-sidebar and desktop/manual acceptance remain incomplete.
 - Adds experimental features that increase both the security-sensitive surface area and the risk that agents could delete or mangle data on your machine. These changes have not been exhaustively reviewed for those risks. They include letting tools wake up threads, planned support for threads talking to each other, URL schemes that make emitted links clickable, and integrations with personal tools used by the maintainer, such as Markover.
 
 Use LastCode with that additional risk in mind. For the smaller upstream surface and its supported release path, use [T3 Code](https://github.com/pingdotgg/t3code).

apps/desktop/src/settings/DesktopClientSettings.test.ts

@@ -70,7 +70,8 @@ const clientSettings: ClientSettings = {
   sidebarProjectSortOrder: "manual",
   sidebarThreadSortOrder: "created_at",
   sidebarThreadPreviewCount: 6,
-  legacySidebarEnabled: false,
+  legacySidebarEnabled: true,
+  lastcodeSidebarEnabled: true,
   sidebarWorkingShelfEnabled: false,
   loadBalancingEnabled: false,
   loadBalancingWeights: { "environment-1": 75, "environment-2": 0 },

apps/desktop/src/settings/LastCodeSettingsImport.test.ts

@@ -94,6 +94,8 @@ describe("LastCodeSettingsImport", () => {
     Reflect.deleteProperty(sourceClient, "compactLegacySidebarStatuses");
     Reflect.deleteProperty(sourceClient, "showThreadWorktreeIndicators");
     Reflect.deleteProperty(sourceClient, "legacySidebarScale");
+    Reflect.deleteProperty(sourceClient, "lastcodeSidebarEnabled");
+    sourceClient.legacySidebarEnabled = true;
     Reflect.deleteProperty(sourceClient, "roundedProjectIcons");
     Reflect.deleteProperty(sourceClient, "showThreadProviderBadge");
     Reflect.deleteProperty(sourceClient, "threadProviderBadgeSize");
@@ -111,6 +113,7 @@ describe("LastCodeSettingsImport", () => {
       compactLegacySidebarStatuses: true,
       showThreadWorktreeIndicators: false,
       legacySidebarScale: 75,
+      lastcodeSidebarEnabled: true,
       roundedProjectIcons: true,
       environmentIconColors: { primary: "#2563eb", remote: "#7c3aed" },
       showLocalEnvironmentIcon: true,
@@ -230,6 +233,8 @@ describe("LastCodeSettingsImport", () => {
     assert.equal(importedClient.compactLegacySidebarStatuses, true);
     assert.equal(importedClient.showThreadWorktreeIndicators, false);
     assert.equal(importedClient.legacySidebarScale, 75);
+    assert.equal(importedClient.lastcodeSidebarEnabled, true);
+    assert.equal(importedClient.legacySidebarEnabled, true);
     assert.equal(importedClient.roundedProjectIcons, true);
     assert.deepEqual(importedClient.environmentIconColors, {
       primary: "#2563eb",

apps/desktop/src/settings/LastCodeSettingsImport.ts

@@ -239,6 +239,7 @@ function mergeClientSettings(sourceRaw: string, destinationRaw: string | null):
     compactLegacySidebarStatuses: destination.compactLegacySidebarStatuses,
     environmentIconColors: destination.environmentIconColors,
     legacySidebarScale: destination.legacySidebarScale,
+    lastcodeSidebarEnabled: destination.lastcodeSidebarEnabled,
     roundedProjectIcons: destination.roundedProjectIcons,
     showLocalEnvironmentIcon: destination.showLocalEnvironmentIcon,
     showThreadProviderBadge: destination.showThreadProviderBadge,

apps/web/src/components/AppSidebarLayout.tsx

@@ -1,6 +1,8 @@
 import { useAtomValue } from "@effect/atom-react";
 import * as Schema from "effect/Schema";
 import {
+  lazy,
+  Suspense,
   useEffect,
   useState,
   useSyncExternalStore,
@@ -33,10 +35,11 @@ import {
 import {
   useClientSettingsHydrated,
   useEnvironmentIdentificationMode,
-  useLegacySidebarEnabled,
+  useSidebarMode,
   useUpdateClientSettings,
 } from "../hooks/useSettings";
 import LegacyThreadSidebar from "./LegacySidebar";
+import { toggleUpstreamSidebar } from "../sidebarMode";
 import { useThreadVisitedMigration } from "../hooks/useThreadVisitedMigration";
 import ThreadSidebar from "./Sidebar";
 import { SettingsSidebarNav } from "./settings/SettingsSidebarNav";
@@ -64,6 +67,16 @@ import {
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 
 const MACOS_TRAFFIC_LIGHTS_LEFT_INSET = "var(--desktop-window-controls-inset, 90px)";
+const LastCodeSidebar = lazy(() => import("./LastCodeSidebar"));
+const THREAD_SIDEBARS = {
+  lastcode: (
+    <Suspense fallback={<SidebarChromeHeader isElectron={isElectron} />}>
+      <LastCodeSidebar />
+    </Suspense>
+  ),
+  legacy: <LegacyThreadSidebar />,
+  inbox: <ThreadSidebar />,
+};
 
 function subscribeToViewportWidth(onChange: () => void): () => void {
   window.addEventListener("resize", onChange);
@@ -91,6 +104,7 @@ function SidebarControl() {
   const keybindings = useAtomValue(primaryServerKeybindingsAtom);
   const { toggleSidebar } = useSidebar();
   const updateClientSettings = useUpdateClientSettings();
+  const sidebarMode = useSidebarMode();
   const clientSettingsHydrated = useClientSettingsHydrated();
   const routeTarget = useParams({
     strict: false,
@@ -144,18 +158,19 @@ function SidebarControl() {
           modelPickerOpen: isModelPickerOpen(),
         },
       });
-      if (command !== "sidebar.toggle" && command !== "sidebar.mode.toggle") return;
-      if (command === "sidebar.mode.toggle" && !clientSettingsHydrated) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-      if (command === "sidebar.toggle") {
-        toggleSidebar();
-        return;
+      switch (command) {
+        case "sidebar.toggle":
+          event.preventDefault();
+          event.stopPropagation();
+          toggleSidebar();
+          return;
+        case "sidebar.mode.toggle":
+          if (!clientSettingsHydrated) return;
+          event.preventDefault();
+          event.stopPropagation();
+          if (sidebarMode !== "lastcode") updateClientSettings(toggleUpstreamSidebar);
+          return;
       }
-      updateClientSettings((settings) => ({
-        legacySidebarEnabled: !settings.legacySidebarEnabled,
-      }));
     };
 
     // Capture before focused editors consume commands such as Mod+B for rich-text formatting.
@@ -173,6 +188,7 @@ function SidebarControl() {
     keybindings,
     previewOpen,
     terminalOpen,
+    sidebarMode,
     toggleSidebar,
     updateClientSettings,
     usagePageOpen,
@@ -272,7 +288,7 @@ function ProjectProjectionRetention() {
 
 export function AppSidebarLayout({ children }: { children: ReactNode }) {
   const navigate = useNavigate();
-  const legacySidebarEnabled = useLegacySidebarEnabled();
+  const sidebarMode = useSidebarMode();
   const { active: panelAnimationsActive, durationMs: panelAnimationDurationMs } =
     usePanelAnimationSettings();
   // Settings routes show the settings nav in place of whichever thread
@@ -382,10 +398,8 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
               <SidebarChromeHeader isElectron={isElectron} />
               <SettingsSidebarNav pathname={pathname} />
             </>
-          ) : legacySidebarEnabled ? (
-            <LegacyThreadSidebar />
           ) : (
-            <ThreadSidebar />
+            THREAD_SIDEBARS[sidebarMode]
           )}
           <SidebarRail onDoubleClick={resetSidebarWidth} />
         </Sidebar>

apps/web/src/components/LastCodeSidebar.tsx

@@ -0,0 +1,15 @@
+import { LastCodeSidebarContent } from "./sidebar/LastCodeSidebarContent";
+import { LastCodeThreadActionsProvider } from "./sidebar/LastCodeThreadActions";
+import { SidebarChromeFooter, SidebarChromeHeader } from "./sidebar/SidebarChrome";
+import { isElectron } from "../env";
+
+/** The lazy LastCode entry owns chrome and the single thread-operation provider. */
+export default function LastCodeSidebar() {
+  return (
+    <LastCodeThreadActionsProvider>
+      <SidebarChromeHeader isElectron={isElectron} />
+      <LastCodeSidebarContent />
+      <SidebarChromeFooter />
+    </LastCodeThreadActionsProvider>
+  );
+}