Add resizable inline right panels

apps/desktop/src/test/electronMock.ts

@@ -0,0 +1,128 @@
+import { EventEmitter } from "node:events";
+
+const appEmitter = new EventEmitter();
+
+export const app = Object.assign(appEmitter, {
+  commandLine: {
+    appendSwitch: () => undefined,
+  },
+  dock: {
+    setIcon: () => undefined,
+  },
+  exit: () => undefined,
+  focus: () => undefined,
+  getAppPath: () => "/app",
+  getPath: () => "/tmp/t3code-desktop-test",
+  getVersion: () => "0.0.0-test",
+  isPackaged: false,
+  name: "T3 Code",
+  quit: () => undefined,
+  relaunch: () => undefined,
+  removeListener: appEmitter.removeListener.bind(appEmitter),
+  runningUnderARM64Translation: false,
+  setAboutPanelOptions: () => undefined,
+  setAppUserModelId: () => undefined,
+  setDesktopName: () => undefined,
+  setName: () => undefined,
+  setPath: () => undefined,
+  whenReady: () => Promise.resolve(),
+});
+
+export class BrowserWindow {
+  static getAllWindows() {
+    return [];
+  }
+
+  static getFocusedWindow() {
+    return null;
+  }
+
+  readonly webContents = {
+    copyImageAt: () => undefined,
+    isLoadingMainFrame: () => false,
+    on: () => undefined,
+    once: () => undefined,
+    openDevTools: () => undefined,
+    replaceMisspelling: () => undefined,
+    send: () => undefined,
+    setWindowOpenHandler: () => undefined,
+  };
+
+  destroy() {}
+  focus() {}
+  isDestroyed() {
+    return false;
+  }
+  isMinimized() {
+    return false;
+  }
+  isVisible() {
+    return true;
+  }
+  loadURL() {
+    return Promise.resolve();
+  }
+  on() {}
+  once() {}
+  restore() {}
+  setBackgroundColor() {}
+  setTitle() {}
+  setTitleBarOverlay() {}
+  show() {}
+}
+
+export const clipboard = {
+  writeText: () => undefined,
+};
+
+export const dialog = {
+  showErrorBox: () => undefined,
+  showMessageBox: () => Promise.resolve({ response: 0, checkboxChecked: false }),
+  showOpenDialog: () => Promise.resolve({ canceled: true, filePaths: [] }),
+};
+
+export const Menu = {
+  buildFromTemplate: () => ({
+    popup: () => undefined,
+  }),
+  setApplicationMenu: () => undefined,
+};
+
+export const nativeImage = {
+  createFromNamedImage: () => ({
+    isEmpty: () => true,
+    resize: () => ({
+      isEmpty: () => true,
+    }),
+  }),
+};
+
+const nativeThemeEmitter = new EventEmitter();
+
+export const nativeTheme = Object.assign(nativeThemeEmitter, {
+  removeListener: nativeThemeEmitter.removeListener.bind(nativeThemeEmitter),
+  shouldUseDarkColors: false,
+  themeSource: "system",
+});
+
+export const protocol = {
+  handle: () => undefined,
+  registerFileProtocol: () => true,
+  registerSchemesAsPrivileged: () => undefined,
+  unhandle: () => undefined,
+};
+
+export const safeStorage = {
+  decryptString: () => "",
+  encryptString: () => Buffer.from(""),
+  isEncryptionAvailable: () => true,
+};
+
+export const shell = {
+  openExternal: () => Promise.resolve(),
+};
+
+export const ipcMain = {
+  handle: () => undefined,
+  removeHandler: () => undefined,
+};

apps/desktop/vitest.config.ts

@@ -0,0 +1,18 @@
+import * as path from "node:path";
+import { defineConfig, mergeConfig } from "vitest/config";
+
+import baseConfig from "../../vitest.config.ts";
+
+export default mergeConfig(
+  baseConfig,
+  defineConfig({
+    resolve: {
+      alias: [
+        {
+          find: /^electron$/,
+          replacement: path.resolve(import.meta.dirname, "./src/test/electronMock.ts"),
+        },
+      ],
+    },
+  }),
+);

apps/web/src/components/ChatView.tsx

@@ -184,6 +184,7 @@
 } from "~/rpc/serverState";
 import { sanitizeThreadErrorMessage } from "~/rpc/transportError";
 import { retainThreadDetailSubscription } from "../environments/runtime/service";
+import { ResizableRightPanel } from "./ResizableRightPanel";
 import { RightPanelSheet } from "./RightPanelSheet";
 import { Button } from "./ui/button";
 import {
@@ -200,6 +201,7 @@
 const EMPTY_PROVIDERS: ServerProvider[] = [];
 const EMPTY_PROVIDER_SKILLS: ServerProvider["skills"] = [];
 const EMPTY_PENDING_USER_INPUT_ANSWERS: Record<string, PendingUserInputDraftAnswer> = {};
+const PLAN_INLINE_SIDEBAR_WIDTH_STORAGE_KEY = "chat_plan_sidebar_width_ratio";
 type EnvironmentUnavailableState = {
   readonly environmentId: EnvironmentId;
   readonly label: string;
@@ -1780,7 +1782,7 @@
   );
 
   const focusComposer = useCallback(() => {
     composerRef.current?.focusAtEnd();
   }, []);
   const scheduleComposerFocus = useCallback(() => {
     window.requestAnimationFrame(() => {
@@ -1788,7 +1790,7 @@
     });
   }, [focusComposer]);
   const addTerminalContextToDraft = useCallback((selection: TerminalContextSelection) => {
     composerRef.current?.addTerminalContext(selection);
   }, []);
   const setTerminalOpen = useCallback(
     (open: boolean) => {
@@ -2467,7 +2469,7 @@
       const shortcutContext = {
         terminalFocus: isTerminalFocused(),
         terminalOpen: Boolean(terminalState.terminalOpen),
         modelPickerOpen: composerRef.current?.isModelPickerOpen() ?? false,
       };
 
       const command = resolveShortcutCommand(event, keybindings, {
@@ -3019,7 +3021,7 @@
         };
       });
       promptRef.current = "";
       composerRef.current?.resetCursorState({ cursor: 0 });
     },
     [activePendingProgress?.activeQuestion, activePendingUserInput],
   );
@@ -3046,7 +3048,7 @@
           ),
         },
       }));
       const snapshot = composerRef.current?.readSnapshot();
       if (
         snapshot?.value !== value ||
         snapshot.cursor !== nextCursor ||
@@ -3109,7 +3111,7 @@
         return;
       }
 
       const sendCtx = composerRef.current?.getSendContext();
       if (!sendCtx) {
         return;
       }
@@ -3246,7 +3248,7 @@
       return;
     }
 
     const sendCtx = composerRef.current?.getSendContext();
     if (!sendCtx) {
       return;
     }
@@ -3724,17 +3726,19 @@
 
         {/* Plan sidebar */}
         {planSidebarOpen && !shouldUsePlanSidebarSheet ? (
-          <PlanSidebar
-            activePlan={activePlan}
-            activeProposedPlan={sidebarProposedPlan}
-            label={planSidebarLabel}
-            environmentId={environmentId}
-            markdownCwd={gitCwd ?? undefined}
-            workspaceRoot={activeWorkspaceRoot}
-            timestampFormat={timestampFormat}
-            mode="sidebar"
-            onClose={closePlanSidebar}
-          />
+          <ResizableRightPanel storageKey={PLAN_INLINE_SIDEBAR_WIDTH_STORAGE_KEY}>
+            <PlanSidebar
+              activePlan={activePlan}
+              activeProposedPlan={sidebarProposedPlan}
+              label={planSidebarLabel}
+              environmentId={environmentId}
+              markdownCwd={gitCwd ?? undefined}
+              workspaceRoot={activeWorkspaceRoot}
+              timestampFormat={timestampFormat}
+              mode="sidebar"
+              onClose={closePlanSidebar}
+            />
+          </ResizableRightPanel>
         ) : null}
       </div>
       {/* end horizontal flex container */}

apps/web/src/components/PlanSidebar.tsx

@@ -130,9 +130,7 @@ const PlanSidebar = memo(function PlanSidebar({
     <div
       className={cn(
         "flex min-h-0 flex-col bg-card/50",
-        mode === "sidebar"
-          ? "h-full w-[340px] shrink-0 border-l border-border/70"
-          : "h-full w-full",
+        mode === "sidebar" ? "h-full w-full border-l border-border/70" : "h-full w-full",
       )}
     >
       {/* Header */}