From 376efdd3401235dbba95474689e7c092aa08b858 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 17 Feb 2026 12:10:06 -0800
Subject: [PATCH] Cap thread terminals at four and disable add/split controls

- enforce max 4 terminals per thread in reducer and terminal normalization
- block split/new terminal actions in chat and drawer when limit is reached
- add reducer tests for split/new terminal cap behavior
---
 apps/web/src/components/ChatView.tsx          | 12 ++--
 .../src/components/ThreadTerminalDrawer.tsx   | 68 ++++++++++++------
 apps/web/src/store.test.ts                    | 70 ++++++++++++++++++-
 apps/web/src/store.ts                         | 24 ++++++-
 apps/web/src/types.ts                         |  1 +
 5 files changed, 146 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 31b0204f90f378b3c4550e997686ae87d8654f58..7a29f57e080b2300a58b297c40d8a33b632756fe 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -51,7 +51,7 @@ import {
 } from "../session-logic";
 import { isScrollContainerNearBottom } from "../chat-scroll";
 import { useStore } from "../store";
-import type { ChatImageAttachment } from "../types";
+import { MAX_THREAD_TERMINAL_COUNT, type ChatImageAttachment } from "../types";
 import BranchToolbar from "./BranchToolbar";
 import GitActionsControl from "./GitActionsControl";
 import {
@@ -294,6 +294,8 @@ export default function ChatView() {
     (activeThread.messages.length > 0 ||
       (activeThread.session !== null && activeThread.session.status !== "closed")),
   );
+  const hasReachedTerminalLimit =
+    (activeThread?.terminalIds.length ?? 0) >= MAX_THREAD_TERMINAL_COUNT;
 
   const revokePreviewUrls = useCallback((images: Array<{ previewUrl?: string }>) => {
     for (const image of images) {
@@ -322,23 +324,23 @@ export default function ChatView() {
     });
   }, [activeThread?.terminalOpen, activeThreadId, dispatch]);
   const splitTerminal = useCallback(() => {
-    if (!activeThreadId) return;
+    if (!activeThreadId || hasReachedTerminalLimit) return;
     dispatch({
       type: "SPLIT_THREAD_TERMINAL",
       threadId: activeThreadId,
       terminalId: `terminal-${crypto.randomUUID()}`,
     });
     setTerminalFocusRequestId((value) => value + 1);
-  }, [activeThreadId, dispatch]);
+  }, [activeThreadId, dispatch, hasReachedTerminalLimit]);
   const createNewTerminal = useCallback(() => {
-    if (!activeThreadId) return;
+    if (!activeThreadId || hasReachedTerminalLimit) return;
     dispatch({
       type: "NEW_THREAD_TERMINAL",
       threadId: activeThreadId,
       terminalId: `terminal-${crypto.randomUUID()}`,
     });
     setTerminalFocusRequestId((value) => value + 1);
-  }, [activeThreadId, dispatch]);
+  }, [activeThreadId, dispatch, hasReachedTerminalLimit]);
   const activateTerminal = useCallback(
     (terminalId: string) => {
       if (!activeThreadId) return;
diff --git a/apps/web/src/components/ThreadTerminalDrawer.tsx b/apps/web/src/components/ThreadTerminalDrawer.tsx
index 1c35459a9b11fab296db05e6cf7485f008df48d1..eaf05571cb868acf825b5ff5a9bf5131dd9b70b2 100644
--- a/apps/web/src/components/ThreadTerminalDrawer.tsx
+++ b/apps/web/src/components/ThreadTerminalDrawer.tsx
@@ -22,6 +22,7 @@ import { isTerminalClearShortcut, terminalNavigationShortcutData } from "../keyb
 import {
   DEFAULT_THREAD_TERMINAL_HEIGHT,
   DEFAULT_THREAD_TERMINAL_ID,
+  MAX_THREAD_TERMINAL_COUNT,
   type ThreadTerminalGroup,
 } from "../types";
 
@@ -581,6 +582,7 @@ export default function ThreadTerminalDrawer({
   const showGroupHeaders =
     resolvedTerminalGroups.length > 1 ||
     resolvedTerminalGroups.some((terminalGroup) => terminalGroup.terminalIds.length > 1);
+  const hasReachedTerminalLimit = normalizedTerminalIds.length >= MAX_THREAD_TERMINAL_COUNT;
   const terminalLabelById = useMemo(
     () =>
       new Map(
@@ -588,9 +590,23 @@ export default function ThreadTerminalDrawer({
       ),
     [normalizedTerminalIds],
   );
+  const splitTerminalActionLabel = hasReachedTerminalLimit
+    ? `Split Terminal (max ${MAX_THREAD_TERMINAL_COUNT})`
+    : (splitShortcutLabel ? `Split Terminal (${splitShortcutLabel})` : "Split Terminal");
+  const newTerminalActionLabel = hasReachedTerminalLimit
+    ? `New Terminal (max ${MAX_THREAD_TERMINAL_COUNT})`
+    : (newShortcutLabel ? `New Terminal (${newShortcutLabel})` : "New Terminal");
   const closeTerminalActionLabel = closeShortcutLabel
     ? `Close Terminal (${closeShortcutLabel})`
     : "Close Terminal";
+  const onSplitTerminalAction = useCallback(() => {
+    if (hasReachedTerminalLimit) return;
+    onSplitTerminal();
+  }, [hasReachedTerminalLimit, onSplitTerminal]);
+  const onNewTerminalAction = useCallback(() => {
+    if (hasReachedTerminalLimit) return;
+    onNewTerminal();
+  }, [hasReachedTerminalLimit, onNewTerminal]);
 
   useEffect(() => {
     onHeightChangeRef.current = onHeightChange;
@@ -685,7 +701,7 @@ export default function ThreadTerminalDrawer({
 
   return (
     <aside
-      className="thread-terminal-drawer relative flex shrink-0 flex-col border-t border-border/80 bg-background"
+      className="thread-terminal-drawer relative flex min-w-0 shrink-0 flex-col overflow-hidden border-t border-border/80 bg-background"
       style={{ height: `${drawerHeight}px` }}
     >
       <div
@@ -700,19 +716,25 @@ export default function ThreadTerminalDrawer({
         <div className="pointer-events-none absolute right-2 top-2 z-20">
           <div className="pointer-events-auto inline-flex items-center overflow-hidden rounded-md border border-border/80 bg-background/70">
             <TerminalActionButton
-              className="p-1 text-foreground/90 transition-colors hover:bg-accent"
-              onClick={onSplitTerminal}
-              label={
-                splitShortcutLabel ? `Split Terminal (${splitShortcutLabel})` : "Split Terminal"
-              }
+              className={`p-1 text-foreground/90 transition-colors ${
+                hasReachedTerminalLimit
+                  ? "cursor-not-allowed opacity-45 hover:bg-transparent"
+                  : "hover:bg-accent"
+              }`}
+              onClick={onSplitTerminalAction}
+              label={splitTerminalActionLabel}
             >
               <SquareSplitHorizontal className="size-3.25" />
             </TerminalActionButton>
             <div className="h-4 w-px bg-border/80" />
             <TerminalActionButton
-              className="p-1 text-foreground/90 transition-colors hover:bg-accent"
-              onClick={onNewTerminal}
-              label={newShortcutLabel ? `New Terminal (${newShortcutLabel})` : "New Terminal"}
+              className={`p-1 text-foreground/90 transition-colors ${
+                hasReachedTerminalLimit
+                  ? "cursor-not-allowed opacity-45 hover:bg-transparent"
+                  : "hover:bg-accent"
+              }`}
+              onClick={onNewTerminalAction}
+              label={newTerminalActionLabel}
             >
               <Plus className="size-3.25" />
             </TerminalActionButton>
@@ -733,9 +755,9 @@ export default function ThreadTerminalDrawer({
           <div className="min-w-0 flex-1">
             {isSplitView ? (
               <div
-                className="grid h-full w-full gap-0 overflow-x-auto"
+                className="grid h-full w-full min-w-0 gap-0 overflow-hidden"
                 style={{
-                  gridTemplateColumns: `repeat(${visibleTerminalIds.length}, minmax(260px, 1fr))`,
+                  gridTemplateColumns: `repeat(${visibleTerminalIds.length}, minmax(0, 1fr))`,
                 }}
               >
                 {visibleTerminalIds.map((terminalId) => (
@@ -787,20 +809,24 @@ export default function ThreadTerminalDrawer({
               <div className="flex h-[22px] items-stretch justify-end border-b border-border/70">
                 <div className="inline-flex h-full items-stretch">
                   <TerminalActionButton
-                    className="inline-flex h-full items-center px-1 text-foreground/90 transition-colors hover:bg-accent/70"
-                    onClick={onSplitTerminal}
-                    label={
-                      splitShortcutLabel
-                        ? `Split Terminal (${splitShortcutLabel})`
-                        : "Split Terminal"
-                    }
+                    className={`inline-flex h-full items-center px-1 text-foreground/90 transition-colors ${
+                      hasReachedTerminalLimit
+                        ? "cursor-not-allowed opacity-45 hover:bg-transparent"
+                        : "hover:bg-accent/70"
+                    }`}
+                    onClick={onSplitTerminalAction}
+                    label={splitTerminalActionLabel}
                   >
                     <SquareSplitHorizontal className="size-3.25" />
                   </TerminalActionButton>
                   <TerminalActionButton
-                    className="inline-flex h-full items-center border-l border-border/70 px-1 text-foreground/90 transition-colors hover:bg-accent/70"
-                    onClick={onNewTerminal}
-                    label={newShortcutLabel ? `New Terminal (${newShortcutLabel})` : "New Terminal"}
+                    className={`inline-flex h-full items-center border-l border-border/70 px-1 text-foreground/90 transition-colors ${
+                      hasReachedTerminalLimit
+                        ? "cursor-not-allowed opacity-45 hover:bg-transparent"
+                        : "hover:bg-accent/70"
+                    }`}
+                    onClick={onNewTerminalAction}
+                    label={newTerminalActionLabel}
                   >
                     <Plus className="size-3.25" />
                   </TerminalActionButton>
diff --git a/apps/web/src/store.test.ts b/apps/web/src/store.test.ts
index 9bc2c3de6695057fdcf34f96e25d5d624b981b9b..b49de5d39e7c943b110ac1119b3fbfd5333e3d58 100644
--- a/apps/web/src/store.test.ts
+++ b/apps/web/src/store.test.ts
@@ -2,7 +2,11 @@ import type { ProviderEvent, ProviderSession, TerminalEvent } from "@t3tools/con
 import { describe, expect, it } from "vitest";
 
 import { type AppState, reducer } from "./store";
-import { DEFAULT_THREAD_TERMINAL_HEIGHT, DEFAULT_THREAD_TERMINAL_ID } from "./types";
+import {
+  DEFAULT_THREAD_TERMINAL_HEIGHT,
+  DEFAULT_THREAD_TERMINAL_ID,
+  MAX_THREAD_TERMINAL_COUNT,
+} from "./types";
 import type { Thread } from "./types";
 
 type TerminalStartedEvent = Extract<TerminalEvent, { type: "started" }>;
@@ -255,6 +259,70 @@ describe("store reducer thread continuity", () => {
     expect(next.threads[0]?.activeTerminalGroupId).toBe(`group-${DEFAULT_THREAD_TERMINAL_ID}`);
   });
 
+  it("caps split terminals at four per thread", () => {
+    const state = makeState(
+      makeThread({
+        terminalIds: [DEFAULT_THREAD_TERMINAL_ID, "term-2", "term-3", "term-4"],
+        activeTerminalId: "term-4",
+        terminalGroups: [
+          {
+            id: `group-${DEFAULT_THREAD_TERMINAL_ID}`,
+            terminalIds: [DEFAULT_THREAD_TERMINAL_ID, "term-2", "term-3", "term-4"],
+          },
+        ],
+        activeTerminalGroupId: `group-${DEFAULT_THREAD_TERMINAL_ID}`,
+      }),
+    );
+    const next = reducer(state, {
+      type: "SPLIT_THREAD_TERMINAL",
+      threadId: "thread-local-1",
+      terminalId: "term-5",
+    });
+
+    expect(next.threads[0]?.terminalIds).toHaveLength(MAX_THREAD_TERMINAL_COUNT);
+    expect(next.threads[0]?.terminalIds).toEqual([
+      DEFAULT_THREAD_TERMINAL_ID,
+      "term-2",
+      "term-3",
+      "term-4",
+    ]);
+    expect(next.threads[0]?.activeTerminalId).toBe("term-4");
+  });
+
+  it("caps new terminals at four per thread", () => {
+    const state = makeState(
+      makeThread({
+        terminalIds: [DEFAULT_THREAD_TERMINAL_ID, "term-2", "term-3", "term-4"],
+        activeTerminalId: "term-4",
+        terminalGroups: [
+          {
+            id: `group-${DEFAULT_THREAD_TERMINAL_ID}`,
+            terminalIds: [DEFAULT_THREAD_TERMINAL_ID],
+          },
+          { id: "group-term-2", terminalIds: ["term-2"] },
+          { id: "group-term-3", terminalIds: ["term-3"] },
+          { id: "group-term-4", terminalIds: ["term-4"] },
+        ],
+        activeTerminalGroupId: "group-term-4",
+      }),
+    );
+    const next = reducer(state, {
+      type: "NEW_THREAD_TERMINAL",
+      threadId: "thread-local-1",
+      terminalId: "term-5",
+    });
+
+    expect(next.threads[0]?.terminalIds).toHaveLength(MAX_THREAD_TERMINAL_COUNT);
+    expect(next.threads[0]?.terminalIds).toEqual([
+      DEFAULT_THREAD_TERMINAL_ID,
+      "term-2",
+      "term-3",
+      "term-4",
+    ]);
+    expect(next.threads[0]?.activeTerminalId).toBe("term-4");
+    expect(next.threads[0]?.activeTerminalGroupId).toBe("group-term-4");
+  });
+
   it("closes a terminal and keeps grouped layout coherent", () => {
     const state = makeState(
       makeThread({
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts
index 2f0ad22b6f0d9e058b3d2420073e99a20f300ea3..6b38d7b007d078dd16f7cb8045a091ae91954141 100644
--- a/apps/web/src/store.ts
+++ b/apps/web/src/store.ts
@@ -16,6 +16,7 @@ import {
   type ChatAttachment,
   DEFAULT_THREAD_TERMINAL_ID,
   DEFAULT_RUNTIME_MODE,
+  MAX_THREAD_TERMINAL_COUNT,
   type Project,
   type RuntimeMode,
   type Thread,
@@ -110,7 +111,12 @@ function readPersistedState(): AppState {
     const hydrated = hydratePersistedState(raw, !rawCurrent && raw === rawCodethingV1);
     if (!hydrated) return initialState;
 
-    return { ...hydrated, diffOpen: false };
+    const threads = hydrated.threads.map((thread) => normalizeThreadTerminals(thread));
+    const activeThreadId = threads.some((thread) => thread.id === hydrated.activeThreadId)
+      ? hydrated.activeThreadId
+      : (threads[0]?.id ?? null);
+
+    return { ...hydrated, threads, activeThreadId, diffOpen: false };
   } catch {
     return initialState;
   }
@@ -139,7 +145,7 @@ function updateThread(
 
 function normalizeTerminalIds(terminalIds: string[]): string[] {
   const ids = terminalIds.map((id) => id.trim()).filter((id) => id.length > 0);
-  const unique = [...new Set(ids)];
+  const unique = [...new Set(ids)].slice(0, MAX_THREAD_TERMINAL_COUNT);
   if (unique.length > 0) {
     return unique;
   }
@@ -550,6 +556,13 @@ export function reducer(state: AppState, action: Action): AppState {
         ...state,
         threads: updateThread(state.threads, action.threadId, (thread) => {
           const normalizedThread = normalizeThreadTerminals(thread);
+          const isNewTerminal = !normalizedThread.terminalIds.includes(action.terminalId);
+          if (
+            isNewTerminal &&
+            normalizedThread.terminalIds.length >= MAX_THREAD_TERMINAL_COUNT
+          ) {
+            return normalizedThread;
+          }
           const terminalIds = normalizedThread.terminalIds.includes(action.terminalId)
             ? normalizedThread.terminalIds
             : [...normalizedThread.terminalIds, action.terminalId];
@@ -616,6 +629,13 @@ export function reducer(state: AppState, action: Action): AppState {
         ...state,
         threads: updateThread(state.threads, action.threadId, (thread) => {
           const normalizedThread = normalizeThreadTerminals(thread);
+          const isNewTerminal = !normalizedThread.terminalIds.includes(action.terminalId);
+          if (
+            isNewTerminal &&
+            normalizedThread.terminalIds.length >= MAX_THREAD_TERMINAL_COUNT
+          ) {
+            return normalizedThread;
+          }
           const terminalIds = normalizedThread.terminalIds.includes(action.terminalId)
             ? normalizedThread.terminalIds
             : [...normalizedThread.terminalIds, action.terminalId];
diff --git a/apps/web/src/types.ts b/apps/web/src/types.ts
index d662997231ec3da0be7e9f0fce787d2a04682d2b..3ff0149b985edf7bab42ef670717295f23797dfe 100644
--- a/apps/web/src/types.ts
+++ b/apps/web/src/types.ts
@@ -5,6 +5,7 @@ export type RuntimeMode = "approval-required" | "full-access";
 export const DEFAULT_RUNTIME_MODE: RuntimeMode = "full-access";
 export const DEFAULT_THREAD_TERMINAL_HEIGHT = 280;
 export const DEFAULT_THREAD_TERMINAL_ID = "default";
+export const MAX_THREAD_TERMINAL_COUNT = 4;
 
 export interface ThreadTerminalGroup {
   id: string;
-- 
2.54.0