From 6727e5a862435dc5ac7857fdd5d904d2bc24b7db Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 6 May 2026 15:05:29 -0700
Subject: [PATCH] feat(ui/agents): add RightPanel with Git/Terminal tabs

Wraps GitTab and TerminalTab in an antd Tabs component. Defaults to
Git per the LIT-2881 layout.
---
 .../components/three-pane/right-panel.tsx     | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/right-panel.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/right-panel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/right-panel.tsx
new file mode 100644
index 00000000000..f43d18aedd1
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/right-panel.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+/**
+ * RightPanel — third pane in the session view, with Git/Terminal tabs.
+ *
+ * The Git tab needs both the active Run snapshot (branches, current PR)
+ * and live events (commits, pr_opened). The Terminal tab only needs
+ * terminal_chunk events.
+ */
+import { Tabs } from "antd";
+import GitTab from "@/app/(dashboard)/agents/components/three-pane/git-tab";
+import TerminalTab from "@/app/(dashboard)/agents/components/three-pane/terminal-tab";
+import type { CloudAgentRun, CloudAgentRunEvent } from "@/types/cloud-agents";
+
+interface RightPanelProps {
+  run: CloudAgentRun | null;
+  events: CloudAgentRunEvent[];
+}
+
+export default function RightPanel({ run, events }: RightPanelProps) {
+  return (
+    <Tabs
+      defaultActiveKey="git"
+      className="flex h-full flex-col"
+      data-testid="right-panel"
+      tabBarStyle={{ paddingLeft: 12, marginBottom: 0 }}
+      items={[
+        {
+          key: "git",
+          label: "Git",
+          children: (
+            <div className="h-[calc(100%-46px)]">
+              <GitTab run={run} events={events} />
+            </div>
+          ),
+        },
+        {
+          key: "terminal",
+          label: "Terminal",
+          children: (
+            <div className="h-[calc(100%-46px)]">
+              <TerminalTab events={events} />
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+}