From f6befeae88abdd27403064bdb6bfea022791481b Mon Sep 17 00:00:00 2001
From: rxchitrx <rachitmital@gmail.com>
Date: Tue, 6 Oct 2026 23:21:12 +0530
Subject: [PATCH 1/5] Fix footer Terminal button toggle and pressed state

The footer Terminal button called onShowProjectTerminal when the dock
already had terminals, so it could open/focus but never collapse, and
aria-pressed/accent tracked has-terminals instead of dock.open. Wire it
to onToggleProjectTerminal and base pressed state on projectTerminalOpen,
keeping the Terminal label on has-terminals.

Fixes #755
---
 src/app/App.tsx                   |  8 ++++
 src/app/shell/UsageFooter.test.ts | 75 ++++++++++++++++++++++++++++++-
 src/app/shell/UsageFooter.tsx     | 14 ++++--
 3 files changed, 91 insertions(+), 6 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index d8c1c50de2..912fcfd841 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -12522,11 +12522,19 @@ function Workspace({
                       ? onShowProjectTerminal
                       : undefined
                   }
+                  onToggleProjectTerminal={
+                    !monoCovers && isLocalProject(projectCwd)
+                      ? onToggleProjectTerminal
+                      : undefined
+                  }
                   projectTerminalActive={
                     !monoCovers &&
                     !!currentProjectDock &&
                     currentProjectDock.pane.files.length > 0
                   }
+                  projectTerminalOpen={
+                    !monoCovers && !!currentProjectDock?.open
+                  }
                 />
               )}
             </div>
diff --git a/src/app/shell/UsageFooter.test.ts b/src/app/shell/UsageFooter.test.ts
index 2969d1740b..f459d31e03 100644
--- a/src/app/shell/UsageFooter.test.ts
+++ b/src/app/shell/UsageFooter.test.ts
@@ -1,8 +1,28 @@
-import { createElement } from "react";
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { UsageFooter } from "./UsageFooter";
 
+let container: HTMLDivElement;
+let root: Root | null = null;
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  container = document.createElement("div");
+  document.body.append(container);
+});
+
+afterEach(() => {
+  if (root) {
+    act(() => root!.unmount());
+    root = null;
+  }
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
 describe("UsageFooter terminal control", () => {
   it("replaces the generic terminal button with the live process control", () => {
     const markup = renderToStaticMarkup(
@@ -40,4 +60,55 @@ describe("UsageFooter terminal control", () => {
     expect(markup).toContain(">Terminal</span>");
     expect(markup.match(/<button/g)).toHaveLength(1);
   });
+
+  it("marks the terminal button pressed only while the dock is open", () => {
+    const open = renderToStaticMarkup(
+      createElement(UsageFooter, {
+        providers: [],
+        onNewTerminal: vi.fn(),
+        onToggleProjectTerminal: vi.fn(),
+        projectTerminalActive: true,
+        projectTerminalOpen: true,
+      }),
+    );
+    const collapsed = renderToStaticMarkup(
+      createElement(UsageFooter, {
+        providers: [],
+        onNewTerminal: vi.fn(),
+        onToggleProjectTerminal: vi.fn(),
+        projectTerminalActive: true,
+        projectTerminalOpen: false,
+      }),
+    );
+
+    // Label still reflects "has terminals" in both states.
+    expect(open).toContain('aria-label="Terminal"');
+    expect(collapsed).toContain('aria-label="Terminal"');
+    expect(open).toContain('aria-pressed="true"');
+    expect(collapsed).toContain('aria-pressed="false"');
+  });
+
+  it("toggles the dock instead of only showing it", () => {
+    const onToggleProjectTerminal = vi.fn();
+    const onShowTerminal = vi.fn();
+    root = createRoot(container);
+    act(() =>
+      root!.render(
+        createElement(UsageFooter, {
+          providers: [],
+          onNewTerminal: vi.fn(),
+          onShowTerminal,
+          onToggleProjectTerminal,
+          projectTerminalActive: true,
+          projectTerminalOpen: true,
+        }),
+      ),
+    );
+
+    const button = container.querySelector('button[aria-label="Terminal"]');
+    expect(button).not.toBeNull();
+    act(() => (button as HTMLButtonElement).click());
+    expect(onToggleProjectTerminal).toHaveBeenCalledTimes(1);
+    expect(onShowTerminal).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/shell/UsageFooter.tsx b/src/app/shell/UsageFooter.tsx
index dfa127c56f..1848ebf127 100644
--- a/src/app/shell/UsageFooter.tsx
+++ b/src/app/shell/UsageFooter.tsx
@@ -64,7 +64,9 @@ export function UsageFooter({
   onToggleTerminal,
   onNewTerminal,
   onShowTerminal,
+  onToggleProjectTerminal,
   projectTerminalActive = false,
+  projectTerminalOpen = false,
   onSelectAccount,
   onManageAccounts,
 }: {
@@ -76,7 +78,9 @@ export function UsageFooter({
   onToggleTerminal?: (fileId: string) => void;
   onNewTerminal?: () => void;
   onShowTerminal?: () => void;
+  onToggleProjectTerminal?: () => void;
   projectTerminalActive?: boolean;
+  projectTerminalOpen?: boolean;
   onSelectAccount?: (
     provider: ProviderAccountProvider,
     accountId: string,
@@ -292,12 +296,14 @@ export function UsageFooter({
   const showOpencodeChip = wantOpencode && opencode.status !== "unavailable";
   const showUsage = wantClaude || wantCodex || showOpencodeChip;
   const showTerminals = terminals.length > 0;
-  const showTerminalButton = Boolean(onNewTerminal || onShowTerminal);
+  const showTerminalButton = Boolean(
+    onNewTerminal || onShowTerminal || onToggleProjectTerminal,
+  );
   const terminalLabel = projectTerminalActive
     ? "Terminal"
     : `New Terminal (${MOD}\`)`;
   const onTerminalClick = projectTerminalActive
-    ? (onShowTerminal ?? onNewTerminal)
+    ? (onToggleProjectTerminal ?? onShowTerminal ?? onNewTerminal)
     : (onNewTerminal ?? onShowTerminal);
   const ariaLabel = showUsage || session?.harness === "pi"
     ? "Provider usage"
@@ -381,12 +387,12 @@ export function UsageFooter({
             <button
               type="button"
               className={`inline-flex h-5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded px-1.5 hover:bg-content/10 ${
-                projectTerminalActive
+                projectTerminalOpen
                   ? "text-accent"
                   : "text-content/40 hover:text-content"
               }`}
               aria-label={terminalLabel}
-              aria-pressed={projectTerminalActive}
+              aria-pressed={projectTerminalOpen}
               title={terminalLabel}
               onClick={onTerminalClick}
             >

From b4c0c2514d866dc4849f19766869eb34671449db Mon Sep 17 00:00:00 2001
From: rxchitrx <rachitmital@gmail.com>
Date: Wed, 7 Oct 2026 13:35:49 +0530
Subject: [PATCH 2/5] Remove unused terminal show handler and cover toggle
 fallback

---
 src/app/App.tsx                   | 28 ----------------
 src/app/shell/UsageFooter.test.ts | 53 ++++++++++++++++++++++++++++---
 src/app/shell/UsageFooter.tsx     |  8 ++---
 3 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 912fcfd841..757e538304 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -2802,29 +2802,6 @@ function Workspace({
     onOpenTerminal(terminalCwd);
   }, [terminalCwd, onOpenTerminal]);
 
-  const onShowProjectTerminal = useCallback(() => {
-    leaveCoveringMono();
-    const dock = findProjectTerminal(projectTerminalsRef.current, projectCwd);
-    if (dock && dock.pane.files.length > 0) {
-      if (!dock.open) {
-        setProjectTerminals((prev) =>
-          mapProjectTerminal(prev, projectCwd, (entry) =>
-            withDockOpen(entry, true),
-          ),
-        );
-      }
-      focusProjectTerminal();
-      return;
-    }
-    onOpenTerminal(terminalCwd);
-  }, [
-    terminalCwd,
-    focusProjectTerminal,
-    leaveCoveringMono,
-    onOpenTerminal,
-    projectCwd,
-  ]);
-
   const onNewTerminalInSession = useCallback(
     (sessionId: string) => {
       const session = sessionsRef.current.find(
@@ -12517,11 +12494,6 @@ function Workspace({
                       ? onNewTerminal
                       : undefined
                   }
-                  onShowTerminal={
-                    !monoCovers && isLocalProject(projectCwd)
-                      ? onShowProjectTerminal
-                      : undefined
-                  }
                   onToggleProjectTerminal={
                     !monoCovers && isLocalProject(projectCwd)
                       ? onToggleProjectTerminal
diff --git a/src/app/shell/UsageFooter.test.ts b/src/app/shell/UsageFooter.test.ts
index f459d31e03..2ba3a0fb84 100644
--- a/src/app/shell/UsageFooter.test.ts
+++ b/src/app/shell/UsageFooter.test.ts
@@ -39,7 +39,7 @@ describe("UsageFooter terminal control", () => {
         terminalOpen: true,
         onToggleTerminal: vi.fn(),
         onNewTerminal: vi.fn(),
-        onShowTerminal: vi.fn(),
+        onToggleProjectTerminal: vi.fn(),
         projectTerminalActive: true,
       }),
     );
@@ -90,14 +90,13 @@ describe("UsageFooter terminal control", () => {
 
   it("toggles the dock instead of only showing it", () => {
     const onToggleProjectTerminal = vi.fn();
-    const onShowTerminal = vi.fn();
+    const onNewTerminal = vi.fn();
     root = createRoot(container);
     act(() =>
       root!.render(
         createElement(UsageFooter, {
           providers: [],
-          onNewTerminal: vi.fn(),
-          onShowTerminal,
+          onNewTerminal,
           onToggleProjectTerminal,
           projectTerminalActive: true,
           projectTerminalOpen: true,
@@ -109,6 +108,50 @@ describe("UsageFooter terminal control", () => {
     expect(button).not.toBeNull();
     act(() => (button as HTMLButtonElement).click());
     expect(onToggleProjectTerminal).toHaveBeenCalledTimes(1);
-    expect(onShowTerminal).not.toHaveBeenCalled();
+    expect(onNewTerminal).not.toHaveBeenCalled();
+  });
+
+  it.each([false, true])(
+    "handles a toggle-only caller when projectTerminalActive is %s",
+    (projectTerminalActive) => {
+      const onToggleProjectTerminal = vi.fn();
+      root = createRoot(container);
+      act(() =>
+        root!.render(
+          createElement(UsageFooter, {
+            providers: [],
+            onToggleProjectTerminal,
+            projectTerminalActive,
+          }),
+        ),
+      );
+
+      const button = container.querySelector("button");
+      expect(button).not.toBeNull();
+      act(() => button!.click());
+      expect(onToggleProjectTerminal).toHaveBeenCalledTimes(1);
+    },
+  );
+
+  it("prefers creating a terminal when no project terminal is active", () => {
+    const onNewTerminal = vi.fn();
+    const onToggleProjectTerminal = vi.fn();
+    root = createRoot(container);
+    act(() =>
+      root!.render(
+        createElement(UsageFooter, {
+          providers: [],
+          onNewTerminal,
+          onToggleProjectTerminal,
+          projectTerminalActive: false,
+        }),
+      ),
+    );
+
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    act(() => button!.click());
+    expect(onNewTerminal).toHaveBeenCalledTimes(1);
+    expect(onToggleProjectTerminal).not.toHaveBeenCalled();
   });
 });
diff --git a/src/app/shell/UsageFooter.tsx b/src/app/shell/UsageFooter.tsx
index 1848ebf127..facb473afc 100644
--- a/src/app/shell/UsageFooter.tsx
+++ b/src/app/shell/UsageFooter.tsx
@@ -63,7 +63,6 @@ export function UsageFooter({
   terminalOpen = false,
   onToggleTerminal,
   onNewTerminal,
-  onShowTerminal,
   onToggleProjectTerminal,
   projectTerminalActive = false,
   projectTerminalOpen = false,
@@ -77,7 +76,6 @@ export function UsageFooter({
   terminalOpen?: boolean;
   onToggleTerminal?: (fileId: string) => void;
   onNewTerminal?: () => void;
-  onShowTerminal?: () => void;
   onToggleProjectTerminal?: () => void;
   projectTerminalActive?: boolean;
   projectTerminalOpen?: boolean;
@@ -297,14 +295,14 @@ export function UsageFooter({
   const showUsage = wantClaude || wantCodex || showOpencodeChip;
   const showTerminals = terminals.length > 0;
   const showTerminalButton = Boolean(
-    onNewTerminal || onShowTerminal || onToggleProjectTerminal,
+    onNewTerminal || onToggleProjectTerminal,
   );
   const terminalLabel = projectTerminalActive
     ? "Terminal"
     : `New Terminal (${MOD}\`)`;
   const onTerminalClick = projectTerminalActive
-    ? (onToggleProjectTerminal ?? onShowTerminal ?? onNewTerminal)
-    : (onNewTerminal ?? onShowTerminal);
+    ? (onToggleProjectTerminal ?? onNewTerminal)
+    : (onNewTerminal ?? onToggleProjectTerminal);
   const ariaLabel = showUsage || session?.harness === "pi"
     ? "Provider usage"
     : showTerminals || showTerminalButton

From 8608fdd6b60faa3164772de42b268b356a6d8702 Mon Sep 17 00:00:00 2001
From: Nick <60738984+hardbeat920@users.noreply.github.com>
Date: Tue, 13 Oct 2026 10:35:49 +0100
Subject: [PATCH 3/5] Reset footer to common base before merging main

Prepare the existing terminal toggle fix for the current UsageFooter/UsageChips split. The toggle changes will be reapplied to the current layout after main is merged.
---
 src/app/shell/UsageFooter.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/app/shell/UsageFooter.tsx b/src/app/shell/UsageFooter.tsx
index facb473afc..dfa127c56f 100644
--- a/src/app/shell/UsageFooter.tsx
+++ b/src/app/shell/UsageFooter.tsx
@@ -63,9 +63,8 @@ export function UsageFooter({
   terminalOpen = false,
   onToggleTerminal,
   onNewTerminal,
-  onToggleProjectTerminal,
+  onShowTerminal,
   projectTerminalActive = false,
-  projectTerminalOpen = false,
   onSelectAccount,
   onManageAccounts,
 }: {
@@ -76,9 +75,8 @@ export function UsageFooter({
   terminalOpen?: boolean;
   onToggleTerminal?: (fileId: string) => void;
   onNewTerminal?: () => void;
-  onToggleProjectTerminal?: () => void;
+  onShowTerminal?: () => void;
   projectTerminalActive?: boolean;
-  projectTerminalOpen?: boolean;
   onSelectAccount?: (
     provider: ProviderAccountProvider,
     accountId: string,
@@ -294,15 +292,13 @@ export function UsageFooter({
   const showOpencodeChip = wantOpencode && opencode.status !== "unavailable";
   const showUsage = wantClaude || wantCodex || showOpencodeChip;
   const showTerminals = terminals.length > 0;
-  const showTerminalButton = Boolean(
-    onNewTerminal || onToggleProjectTerminal,
-  );
+  const showTerminalButton = Boolean(onNewTerminal || onShowTerminal);
   const terminalLabel = projectTerminalActive
     ? "Terminal"
     : `New Terminal (${MOD}\`)`;
   const onTerminalClick = projectTerminalActive
-    ? (onToggleProjectTerminal ?? onNewTerminal)
-    : (onNewTerminal ?? onToggleProjectTerminal);
+    ? (onShowTerminal ?? onNewTerminal)
+    : (onNewTerminal ?? onShowTerminal);
   const ariaLabel = showUsage || session?.harness === "pi"
     ? "Provider usage"
     : showTerminals || showTerminalButton
@@ -385,12 +381,12 @@ export function UsageFooter({
             <button
               type="button"
               className={`inline-flex h-5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded px-1.5 hover:bg-content/10 ${
-                projectTerminalOpen
+                projectTerminalActive
                   ? "text-accent"
                   : "text-content/40 hover:text-content"
               }`}
               aria-label={terminalLabel}
-              aria-pressed={projectTerminalOpen}
+              aria-pressed={projectTerminalActive}
               title={terminalLabel}
               onClick={onTerminalClick}
             >

From e6fc4fbbcadc187d076eed10010bcb3f2795afff Mon Sep 17 00:00:00 2001
From: Nick <60738984+hardbeat920@users.noreply.github.com>
Date: Tue, 13 Oct 2026 10:36:27 +0100
Subject: [PATCH 4/5] Prepare App terminal wiring for main merge

Temporarily reset App wiring to the common base so GitHub can merge current main without overlapping changes. Keep the terminal regression tests and reapply the toggle wiring to the current layout next.
---
 src/app/App.tsx | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 757e538304..d8c1c50de2 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -2802,6 +2802,29 @@ function Workspace({
     onOpenTerminal(terminalCwd);
   }, [terminalCwd, onOpenTerminal]);
 
+  const onShowProjectTerminal = useCallback(() => {
+    leaveCoveringMono();
+    const dock = findProjectTerminal(projectTerminalsRef.current, projectCwd);
+    if (dock && dock.pane.files.length > 0) {
+      if (!dock.open) {
+        setProjectTerminals((prev) =>
+          mapProjectTerminal(prev, projectCwd, (entry) =>
+            withDockOpen(entry, true),
+          ),
+        );
+      }
+      focusProjectTerminal();
+      return;
+    }
+    onOpenTerminal(terminalCwd);
+  }, [
+    terminalCwd,
+    focusProjectTerminal,
+    leaveCoveringMono,
+    onOpenTerminal,
+    projectCwd,
+  ]);
+
   const onNewTerminalInSession = useCallback(
     (sessionId: string) => {
       const session = sessionsRef.current.find(
@@ -12494,9 +12517,9 @@ function Workspace({
                       ? onNewTerminal
                       : undefined
                   }
-                  onToggleProjectTerminal={
+                  onShowTerminal={
                     !monoCovers && isLocalProject(projectCwd)
-                      ? onToggleProjectTerminal
+                      ? onShowProjectTerminal
                       : undefined
                   }
                   projectTerminalActive={
@@ -12504,9 +12527,6 @@ function Workspace({
                     !!currentProjectDock &&
                     currentProjectDock.pane.files.length > 0
                   }
-                  projectTerminalOpen={
-                    !monoCovers && !!currentProjectDock?.open
-                  }
                 />
               )}
             </div>

From 6e893f553d5805d4d851108a7e8d63d20f3613cf Mon Sep 17 00:00:00 2001
From: Nick <60738984+hardbeat920@users.noreply.github.com>
Date: Tue, 13 Oct 2026 10:37:28 +0100
Subject: [PATCH 5/5] Apply terminal toggle fix to current footer layout

Preserve the UsageChips extraction and provider usage changes from main. The footer toggles an existing project terminal dock, and its pressed state follows whether the dock is open. Keep the regression tests from this PR.
---
 src/app/App.tsx               | 30 +++++-------------------------
 src/app/shell/UsageFooter.tsx | 18 +++++++++++-------
 2 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 7de0d93729..edd424f66a 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -3014,29 +3014,6 @@ function Workspace({
     onOpenTerminal(terminalCwd);
   }, [terminalCwd, onOpenTerminal]);
 
-  const onShowProjectTerminal = useCallback(() => {
-    leaveCoveringMono();
-    const dock = findProjectTerminal(projectTerminalsRef.current, projectCwd);
-    if (dock && dock.pane.files.length > 0) {
-      if (!dock.open) {
-        setProjectTerminals((prev) =>
-          mapProjectTerminal(prev, projectCwd, (entry) =>
-            withDockOpen(entry, true),
-          ),
-        );
-      }
-      focusProjectTerminal();
-      return;
-    }
-    onOpenTerminal(terminalCwd);
-  }, [
-    terminalCwd,
-    focusProjectTerminal,
-    leaveCoveringMono,
-    onOpenTerminal,
-    projectCwd,
-  ]);
-
   const onNewTerminalInSession = useCallback(
     (sessionId: string) => {
       const session = sessionsRef.current.find(
@@ -13381,9 +13358,9 @@ function Workspace({
                       ? onNewTerminal
                       : undefined
                   }
-                  onShowTerminal={
+                  onToggleProjectTerminal={
                     !monoCovers && isLocalProject(projectCwd)
-                      ? onShowProjectTerminal
+                      ? onToggleProjectTerminal
                       : undefined
                   }
                   projectTerminalActive={
@@ -13391,6 +13368,9 @@ function Workspace({
                     !!currentProjectDock &&
                     currentProjectDock.pane.files.length > 0
                   }
+                  projectTerminalOpen={
+                    !monoCovers && !!currentProjectDock?.open
+                  }
                 />
               )}
             </div>
diff --git a/src/app/shell/UsageFooter.tsx b/src/app/shell/UsageFooter.tsx
index cb1a1ea0ee..3489f56c90 100644
--- a/src/app/shell/UsageFooter.tsx
+++ b/src/app/shell/UsageFooter.tsx
@@ -73,8 +73,9 @@ export function UsageFooter({
   terminalOpen = false,
   onToggleTerminal,
   onNewTerminal,
-  onShowTerminal,
+  onToggleProjectTerminal,
   projectTerminalActive = false,
+  projectTerminalOpen = false,
   onSelectAccount,
   onManageAccounts,
 }: {
@@ -85,8 +86,9 @@ export function UsageFooter({
   terminalOpen?: boolean;
   onToggleTerminal?: (fileId: string) => void;
   onNewTerminal?: () => void;
-  onShowTerminal?: () => void;
+  onToggleProjectTerminal?: () => void;
   projectTerminalActive?: boolean;
+  projectTerminalOpen?: boolean;
   onSelectAccount?: (
     provider: ProviderAccountProvider,
     accountId: string,
@@ -98,13 +100,15 @@ export function UsageFooter({
     providers.some((provider) => provider !== "opencode") ||
     (providers.includes("opencode") && opencode.status !== "unavailable");
   const showTerminals = terminals.length > 0;
-  const showTerminalButton = Boolean(onNewTerminal || onShowTerminal);
+  const showTerminalButton = Boolean(
+    onNewTerminal || onToggleProjectTerminal,
+  );
   const terminalLabel = projectTerminalActive
     ? "Terminal"
     : `New Terminal (${MOD}\`)`;
   const onTerminalClick = projectTerminalActive
-    ? (onShowTerminal ?? onNewTerminal)
-    : (onNewTerminal ?? onShowTerminal);
+    ? (onToggleProjectTerminal ?? onNewTerminal)
+    : (onNewTerminal ?? onToggleProjectTerminal);
   const ariaLabel = showUsage || session?.harness === "pi"
     ? "Provider usage"
     : showTerminals || showTerminalButton
@@ -145,12 +149,12 @@ export function UsageFooter({
             <button
               type="button"
               className={`inline-flex h-5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded px-1.5 hover:bg-content/10 ${
-                projectTerminalActive
+                projectTerminalOpen
                   ? "text-accent"
                   : "text-content/40 hover:text-content"
               }`}
               aria-label={terminalLabel}
-              aria-pressed={projectTerminalActive}
+              aria-pressed={projectTerminalOpen}
               title={terminalLabel}
               onClick={onTerminalClick}
             >