From 68c9b5dad97c1e4c483039dedda0b602d107b373 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 13:30:52 -0700
Subject: [PATCH 1/2] improvement(ui): share workflow panel tab buttons

---
 .../components/panel/components/index.ts      |  1 +
 .../panel/components/panel-tab-button.tsx     | 26 ++++++++++++++
 .../w/[workflowId]/components/panel/panel.tsx | 35 ++++++-------------
 3 files changed, 38 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/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
index d942f6fa12e..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,3 +1,4 @@
 export { Deploy } from './deploy'
 export { Editor } from './editor'
+export { PanelTabButton } from './panel-tab-button'
 export { Toolbar } from './toolbar'
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..cef451fe5c8
--- /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-small',
+        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 9795b956ae4..92659dd4f2d 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,6 +55,7 @@ import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-uti
 import {
   Deploy,
   Editor,
+  PanelTabButton,
   Toolbar,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components'
 import {
@@ -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-small ${
-                    _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-small ${
-                  _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-small ${
-                  _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 2199bbb91bc716896279d906fc53008c1e2bdb33 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Thu, 24 Sep 2026 15:09:18 -0700
Subject: [PATCH 2/2] improvement(ui): reuse chips for panel selection actions
 (#8166)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
---
 .../components/panel/components/index.ts      |  1 -
 .../panel/components/panel-tab-button.tsx     | 26 -------------------
 .../w/[workflowId]/components/panel/panel.tsx | 18 ++++++-------
 .../components/output-panel/output-panel.tsx  | 25 ++++--------------
 4 files changed, 13 insertions(+), 57 deletions(-)
 delete 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/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
index 9ee25badb3a..d942f6fa12e 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,3 @@
 export { Deploy } from './deploy'
 export { Editor } from './editor'
-export { PanelTabButton } from './panel-tab-button'
 export { Toolbar } from './toolbar'
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
deleted file mode 100644
index cef451fe5c8..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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-small',
-        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 92659dd4f2d..1c6bbddfe09 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,7 +55,6 @@ import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-uti
 import {
   Deploy,
   Editor,
-  PanelTabButton,
   Toolbar,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components'
 import {
@@ -742,7 +741,7 @@ export const Panel = memo(function Panel() {
             <div className='flex gap-1.5'>
               <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
                 <DropdownMenuTrigger asChild>
-                  <Button aria-label='Workflow actions' className='size-[30px]'>
+                  <Button aria-label='Workflow actions' iconSize='regular'>
                     <MoreHorizontal className='size-[14px]' />
                   </Button>
                 </DropdownMenuTrigger>
@@ -803,7 +802,7 @@ export const Panel = memo(function Panel() {
               </DropdownMenu>
               <Button
                 aria-label={isChatOpen ? 'Close chat' : 'Open chat'}
-                className='size-[30px]'
+                iconSize='regular'
                 variant={isChatOpen ? 'active' : 'default'}
                 onClick={() => setIsChatOpen(!isChatOpen)}
               >
@@ -854,29 +853,28 @@ 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 && (
-                <PanelTabButton
+                <Chip
                   active={_hasHydrated && activeTab === 'copilot'}
-                  className='truncate'
                   onClick={() => handleTabClick('copilot')}
                   data-tab-button='copilot'
                 >
                   Chat
-                </PanelTabButton>
+                </Chip>
               )}
-              <PanelTabButton
+              <Chip
                 active={_hasHydrated && activeTab === 'toolbar'}
                 onClick={() => handleTabClick('toolbar')}
                 data-tab-button='toolbar'
               >
                 Toolbar
-              </PanelTabButton>
-              <PanelTabButton
+              </Chip>
+              <Chip
                 active={_hasHydrated && activeTab === 'editor'}
                 onClick={() => handleTabClick('editor')}
                 data-tab-button='editor'
               >
                 Editor
-              </PanelTabButton>
+              </Chip>
             </div>
           </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index 7eb787be542..2ca2535e3c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -3,6 +3,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
+  Chip,
   Code,
   cn,
   Input,
@@ -308,29 +309,13 @@ export const OutputPanel = React.memo(function OutputPanel({
           onClick={handleHeaderClick}
         >
           <div className='flex items-center'>
-            <Button
-              variant='ghost'
-              className={cn(
-                'text-small',
-                !showInput ? 'text-[var(--text-primary)]!' : 'text-[var(--text-icon)]!'
-              )}
-              onClick={handleOutputButtonClick}
-              aria-label='Show output'
-            >
+            <Chip active={!showInput} onClick={handleOutputButtonClick} aria-label='Show output'>
               Output
-            </Button>
+            </Chip>
             {hasInputData && (
-              <Button
-                variant='ghost'
-                className={cn(
-                  'text-small',
-                  showInput ? 'text-[var(--text-primary)]!' : 'text-[var(--text-icon)]!'
-                )}
-                onClick={handleInputButtonClick}
-                aria-label='Show input'
-              >
+              <Chip active={showInput} onClick={handleInputButtonClick} aria-label='Show input'>
                 Input
-              </Button>
+              </Chip>
             )}
           </div>
           <div className='flex shrink-0 items-center gap-2'>