From 968d652d05eb7c18ba9edf8c5c80c4dab5516081 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Mac.localdomain>
Date: Sun, 20 Sep 2026 16:41:08 -0700
Subject: [PATCH 1/3] improvement(ui): share workflow panel tab buttons

---
 .../panel/components/panel-tab-button.tsx     | 26 ++++++++++++++
 .../w/[workflowId]/components/panel/panel.tsx | 35 ++++++-------------
 2 files changed, 37 insertions(+), 24 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button.tsx
new file mode 100644
index 00000000000..77989a0d2b8
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button.tsx
@@ -0,0 +1,26 @@
+import { type ComponentProps, forwardRef } from 'react'
+import { Button, cn } from '@sim/emcn'
+
+interface PanelTabButtonProps
+  extends Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'iconSize' | 'iconPadding'> {
+  active: boolean
+}
+
+/** The workflow panel's compact tab treatment, with caller-owned selection. */
+export const PanelTabButton = forwardRef<HTMLButtonElement, PanelTabButtonProps>(
+  ({ active, className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      variant={active ? 'active' : 'ghost'}
+      className={cn(
+        'h-[28px] rounded-md border py-[5px] text-[12.5px]',
+        active
+          ? 'border-[var(--border-1)]'
+          : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]',
+        className
+      )}
+    />
+  )
+)
+PanelTabButton.displayName = 'PanelTabButton'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 5f894cfc5f3..6fac63fef2e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -57,6 +57,7 @@ import {
   Editor,
   Toolbar,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components'
+import { PanelTabButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button'
 import {
   usePanelResize,
   useUsageLimits,
@@ -853,43 +854,29 @@ export const Panel = memo(function Panel() {
           <div className='flex shrink-0 items-center justify-between px-2 pt-3.5'>
             <div className='flex gap-1'>
               {isCopilotTabAvailable && (
-                <Button
-                  className={`h-[28px] truncate rounded-md border py-[5px] text-[12.5px] ${
-                    _hasHydrated && activeTab === 'copilot'
-                      ? 'border-[var(--border-1)]'
-                      : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                  }`}
-                  variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
+                <PanelTabButton
+                  active={_hasHydrated && activeTab === 'copilot'}
+                  className='truncate'
                   onClick={() => handleTabClick('copilot')}
                   data-tab-button='copilot'
                 >
                   Chat
-                </Button>
+                </PanelTabButton>
               )}
-              <Button
-                className={`h-[28px] rounded-md border py-[5px] text-[12.5px] ${
-                  _hasHydrated && activeTab === 'toolbar'
-                    ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                }`}
-                variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
+              <PanelTabButton
+                active={_hasHydrated && activeTab === 'toolbar'}
                 onClick={() => handleTabClick('toolbar')}
                 data-tab-button='toolbar'
               >
                 Toolbar
-              </Button>
-              <Button
-                className={`h-[28px] rounded-md border py-[5px] text-[12.5px] ${
-                  _hasHydrated && activeTab === 'editor'
-                    ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                }`}
-                variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
+              </PanelTabButton>
+              <PanelTabButton
+                active={_hasHydrated && activeTab === 'editor'}
                 onClick={() => handleTabClick('editor')}
                 data-tab-button='editor'
               >
                 Editor
-              </Button>
+              </PanelTabButton>
             </div>
           </div>
 

From 531de21fd7ad7ef256e7379cd9c522f8332b7506 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Mac.localdomain>
Date: Sun, 20 Sep 2026 16:51:09 -0700
Subject: [PATCH 2/3] chore(ui): export panel tab button through barrel

---
 .../w/[workflowId]/components/panel/components/index.ts         | 1 +
 .../[workspaceId]/w/[workflowId]/components/panel/panel.tsx     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
index d942f6fa12e..87847c99c19 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
@@ -1,3 +1,4 @@
+export { PanelTabButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button'
 export { Deploy } from './deploy'
 export { Editor } from './editor'
 export { Toolbar } from './toolbar'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 6fac63fef2e..d2a65044cd0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -55,9 +55,9 @@ import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-uti
 import {
   Deploy,
   Editor,
+  PanelTabButton,
   Toolbar,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components'
-import { PanelTabButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button'
 import {
   usePanelResize,
   useUsageLimits,

From 9d873cf5bfa76d617d401fb265bf2138a584b18e Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Mac.localdomain>
Date: Tue, 22 Sep 2026 01:30:55 -0700
Subject: [PATCH 3/3] chore(ui): match panel barrel export conventions

---
 .../w/[workflowId]/components/panel/components/index.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
index 87847c99c19..9ee25badb3a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
@@ -1,4 +1,4 @@
-export { PanelTabButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button'
 export { Deploy } from './deploy'
 export { Editor } from './editor'
+export { PanelTabButton } from './panel-tab-button'
 export { Toolbar } from './toolbar'