feat: added terminal docking to right

apps/desktop/scripts/electron-launcher.mjs

@@ -24,6 +24,31 @@ const LAUNCHER_VERSION = 1;
 const __dirname = dirname(fileURLToPath(import.meta.url));
 export const desktopDir = resolve(__dirname, "..");
 
+function ensureElectronInstalled(require) {
+  const electronPackageJsonPath = require.resolve("electron/package.json");
+  const electronPackageDir = dirname(electronPackageJsonPath);
+  const electronPathFile = join(electronPackageDir, "path.txt");
+
+  if (existsSync(electronPathFile)) {
+    return;
+  }
+
+  const installScriptPath = join(electronPackageDir, "install.js");
+  const installResult = spawnSync("node", [installScriptPath], {
+    stdio: "inherit",
+    env: process.env,
+  });
+
+  if (installResult.status !== 0 || !existsSync(electronPathFile)) {
+    const detail = installResult.error?.message
+      ? ` ${installResult.error.message}`
+      : installResult.status === null
+        ? ""
+        : ` (exit ${installResult.status})`;
+    throw new Error(`Failed to install Electron runtime automatically.${detail}`.trim());
+  }
+}
+
 function setPlistString(plistPath, key, value) {
   const replaceResult = spawnSync("plutil", ["-replace", key, "-string", value, plistPath], {
     encoding: "utf8",
@@ -134,7 +159,18 @@ function buildMacLauncher(electronBinaryPath) {
 
 export function resolveElectronPath() {
   const require = createRequire(import.meta.url);
-  const electronBinaryPath = require("electron");
+
+  let electronBinaryPath;
+  try {
+    electronBinaryPath = require("electron");
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (!message.includes("Electron failed to install correctly")) {
+      throw error;
+    }
+    ensureElectronInstalled(require);
+    electronBinaryPath = require("electron");
+  }
 
   if (process.platform !== "darwin") {
     return electronBinaryPath;

apps/web/src/components/ChatView.browser.tsx

@@ -1404,6 +1404,8 @@ describe("ChatView timeline estimator parity (full app)", () => {
         [THREAD_ID]: {
           terminalOpen: true,
           terminalHeight: 280,
+          terminalWidth: 420,
+          terminalDock: "bottom",
           terminalIds: ["default"],
           runningTerminalIds: [],
           activeTerminalId: "default",

apps/web/src/components/ChatView.tsx

@@ -77,6 +77,7 @@ import {
   DEFAULT_RUNTIME_MODE,
   DEFAULT_THREAD_TERMINAL_ID,
   MAX_TERMINALS_PER_GROUP,
+  type ThreadTerminalDock,
   type ChatMessage,
   type SessionPhase,
   type Thread,
@@ -437,6 +438,8 @@ function PersistentThreadTerminalDrawer({
     selectThreadTerminalState(state.terminalStateByThreadId, threadId),
   );
   const storeSetTerminalHeight = useTerminalStateStore((state) => state.setTerminalHeight);
+  const storeSetTerminalWidth = useTerminalStateStore((state) => state.setTerminalWidth);
+  const storeSetTerminalDock = useTerminalStateStore((state) => state.setTerminalDock);
   const storeSplitTerminal = useTerminalStateStore((state) => state.splitTerminal);
   const storeNewTerminal = useTerminalStateStore((state) => state.newTerminal);
   const storeSetActiveTerminal = useTerminalStateStore((state) => state.setActiveTerminal);
@@ -484,6 +487,18 @@ function PersistentThreadTerminalDrawer({
     },
     [storeSetTerminalHeight, threadId],
   );
+  const setTerminalWidth = useCallback(
+    (width: number) => {
+      storeSetTerminalWidth(threadId, width);
+    },
+    [storeSetTerminalWidth, threadId],
+  );
+  const setTerminalDock = useCallback(
+    (dock: ThreadTerminalDock) => {
+      storeSetTerminalDock(threadId, dock);
+    },
+    [storeSetTerminalDock, threadId],
+  );
 
   const splitTerminal = useCallback(() => {
     storeSplitTerminal(threadId, `terminal-${randomUUID()}`);
@@ -554,7 +569,9 @@ function PersistentThreadTerminalDrawer({
         worktreePath={effectiveWorktreePath}
         runtimeEnv={runtimeEnv}
         visible={visible}
+        dock={terminalState.terminalDock}
         height={terminalState.terminalHeight}
+        width={terminalState.terminalWidth}
         terminalIds={terminalState.terminalIds}
         activeTerminalId={terminalState.activeTerminalId}
         terminalGroups={terminalState.terminalGroups}
@@ -567,7 +584,9 @@ function PersistentThreadTerminalDrawer({
         closeShortcutLabel={visible ? closeShortcutLabel : undefined}
         onActiveTerminalChange={activateTerminal}
         onCloseTerminal={closeTerminal}
+        onDockChange={setTerminalDock}
         onHeightChange={setTerminalHeight}
+        onWidthChange={setTerminalWidth}
         onAddTerminalContext={handleAddTerminalContext}
       />
     </div>
@@ -740,8 +759,10 @@ export default function ChatView({ threadId }: ChatViewProps) {
   );
   const openTerminalThreadIds = useMemo(
     () =>
-      Object.entries(terminalStateByThreadId).flatMap(([nextThreadId, nextTerminalState]) =>
-        nextTerminalState.terminalOpen ? [nextThreadId as ThreadId] : [],
+      Object.keys(terminalStateByThreadId).flatMap((nextThreadId) =>
+        selectThreadTerminalState(terminalStateByThreadId, nextThreadId as ThreadId).terminalOpen
+          ? [nextThreadId as ThreadId]
+          : [],
       ),
     [terminalStateByThreadId],
   );
@@ -764,6 +785,24 @@ export default function ChatView({ threadId }: ChatViewProps) {
     [draftThreadsByThreadId],
   );
   const [mountedTerminalThreadIds, setMountedTerminalThreadIds] = useState<ThreadId[]>([]);
+  const rightDockedMountedTerminalThreadIds = useMemo(
+    () =>
+      mountedTerminalThreadIds.filter(
+        (mountedThreadId) =>
+          selectThreadTerminalState(terminalStateByThreadId, mountedThreadId).terminalDock ===
+          "right",
+      ),
+    [mountedTerminalThreadIds, terminalStateByThreadId],
+  );
+  const bottomDockedMountedTerminalThreadIds = useMemo(
+    () =>
+      mountedTerminalThreadIds.filter(
+        (mountedThreadId) =>
+          selectThreadTerminalState(terminalStateByThreadId, mountedThreadId).terminalDock !==
+          "right",
+      ),
+    [mountedTerminalThreadIds, terminalStateByThreadId],
+  );
 
   const setPrompt = useCallback(
     (nextPrompt: string) => {
@@ -3891,6 +3930,21 @@ export default function ChatView({ threadId }: ChatViewProps) {
     }
     void onRevertToTurnCount(targetTurnCount);
   };
+  const renderPersistentTerminalDrawer = (mountedThreadId: ThreadId) => (
+    <PersistentThreadTerminalDrawer
+      key={mountedThreadId}
+      threadId={mountedThreadId}
+      visible={mountedThreadId === activeThreadId && terminalState.terminalOpen}
+      launchContext={
+        mountedThreadId === activeThreadId ? (activeTerminalLaunchContext ?? null) : null
+      }
+      focusRequestId={mountedThreadId === activeThreadId ? terminalFocusRequestId : 0}
+      splitShortcutLabel={splitTerminalShortcutLabel ?? undefined}
+      newShortcutLabel={newTerminalShortcutLabel ?? undefined}
+      closeShortcutLabel={closeTerminalShortcutLabel ?? undefined}
+      onAddTerminalContext={addTerminalContextToDraft}
+    />
+  );
 
   // Empty state: no active thread
   if (!activeThread) {
@@ -4451,24 +4505,12 @@ export default function ChatView({ threadId }: ChatViewProps) {
             }}
           />
         ) : null}
+
+        {rightDockedMountedTerminalThreadIds.map(renderPersistentTerminalDrawer)}
       </div>
       {/* end horizontal flex container */}
 
-      {mountedTerminalThreadIds.map((mountedThreadId) => (
-        <PersistentThreadTerminalDrawer
-          key={mountedThreadId}
-          threadId={mountedThreadId}
-          visible={mountedThreadId === activeThreadId && terminalState.terminalOpen}
-          launchContext={
-            mountedThreadId === activeThreadId ? (activeTerminalLaunchContext ?? null) : null
-          }
-          focusRequestId={mountedThreadId === activeThreadId ? terminalFocusRequestId : 0}
-          splitShortcutLabel={splitTerminalShortcutLabel ?? undefined}
-          newShortcutLabel={newTerminalShortcutLabel ?? undefined}
-          closeShortcutLabel={closeTerminalShortcutLabel ?? undefined}
-          onAddTerminalContext={addTerminalContextToDraft}
-        />
-      ))}
+      {bottomDockedMountedTerminalThreadIds.map(renderPersistentTerminalDrawer)}
 
       {expandedImage && expandedImageItem && (
         <div

apps/web/src/components/ThreadTerminalDrawer.test.ts

@@ -1,7 +1,9 @@
 import { describe, expect, it } from "vitest";
 
 import {
+  clampTerminalDockWidth,
   resolveTerminalSelectionActionPosition,
+  resolveTerminalSplitGridStyle,
   selectPendingTerminalEventEntries,
   selectTerminalEventEntriesAfterSnapshot,
   shouldHandleTerminalSelectionMouseUp,
@@ -69,6 +71,21 @@ describe("resolveTerminalSelectionActionPosition", () => {
     expect(terminalSelectionActionDelayForClickCount(3)).toBe(260);
   });
 
+  it("clamps right-docked terminal widths to the supported range", () => {
+    expect(clampTerminalDockWidth(120, 1_000)).toBe(320);
+    expect(clampTerminalDockWidth(640, 1_000)).toBe(600);
+    expect(clampTerminalDockWidth(480, 1_000)).toBe(480);
+  });
+
+  it("switches split terminals to rows when docked on the right", () => {
+    expect(resolveTerminalSplitGridStyle("bottom", 3)).toEqual({
+      gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+    });
+    expect(resolveTerminalSplitGridStyle("right", 3)).toEqual({
+      gridTemplateRows: "repeat(3, minmax(0, 1fr))",
+    });
+  });
+
   it("only handles mouseup when the selection gesture started in the terminal", () => {
     expect(shouldHandleTerminalSelectionMouseUp(true, 0)).toBe(true);
     expect(shouldHandleTerminalSelectionMouseUp(false, 0)).toBe(false);