diff --git a/apps/rowboat/app/projects/[projectId]/copilot/app.tsx b/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
index b3704a15..cfd74b5f 100644
--- a/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
@@ -269,7 +269,7 @@ const App = forwardRef<{ handleCopyChat: () => void; handleUserMessage: (message
                         toolQuery={toolQuery}
                     />
                 </div>
-                <div className="shrink-0 px-1">
+                <div className="shrink-0 px-0 pb-0">
                     {responseError && (
                         <div className="mb-4 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex gap-2 justify-between items-center text-sm">
                             <p className="text-red-600 dark:text-red-400">{responseError}</p>
@@ -322,6 +322,8 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
     dispatch: (action: WorkflowDispatch) => void;
     isInitialState?: boolean;
     dataSources?: z.infer<typeof DataSource>[];
+    activePanel: 'playground' | 'copilot';
+    onTogglePanel: () => void;
 }>(({
     projectId,
     workflow,
@@ -329,6 +331,8 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
     dispatch,
     isInitialState = false,
     dataSources,
+    activePanel,
+    onTogglePanel,
 }, ref) => {
     const [copilotKey, setCopilotKey] = useState(0);
     const [showCopySuccess, setShowCopySuccess] = useState(false);
@@ -365,8 +369,34 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
             <Panel 
                 variant="copilot"
                 tourTarget="copilot"
-                icon={<Sparkles className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />}
-                title="Skipper"
+                title={
+                    <div className="flex items-center">
+                        <div className="flex items-center gap-2 rounded-lg p-1 bg-blue-50/70 dark:bg-blue-900/30">
+                            <button
+                                onClick={onTogglePanel}
+                                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 ${
+                                    activePanel === 'copilot'
+                                        ? 'bg-white dark:bg-zinc-700 text-indigo-700 dark:text-indigo-300 shadow-md border border-indigo-200 dark:border-indigo-700'
+                                        : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60'
+                                }`}
+                            >
+                                <span className="text-base">✨</span>
+                                Build
+                            </button>
+                            <button
+                                onClick={onTogglePanel}
+                                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 ${
+                                    activePanel === 'playground'
+                                        ? 'bg-white dark:bg-zinc-700 text-indigo-700 dark:text-indigo-300 shadow-md border border-indigo-200 dark:border-indigo-700'
+                                        : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60'
+                                }`}
+                            >
+                                <span className="text-base">💬</span>
+                                Chat
+                            </button>
+                        </div>
+                    </div>
+                }
                 subtitle="Build your assistant"
                 rightActions={
                     <div className="flex items-center gap-2">
diff --git a/apps/rowboat/app/projects/[projectId]/playground/app.tsx b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
index 05c67dc7..f02ee8e8 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
@@ -17,6 +17,8 @@ export function App({
     onPanelClick,
     triggerCopilotChat,
     isLiveWorkflow,
+    activePanel,
+    onTogglePanel,
 }: {
     hidden?: boolean;
     projectId: string;
@@ -25,6 +27,8 @@ export function App({
     onPanelClick?: () => void;
     triggerCopilotChat?: (message: string) => void;
     isLiveWorkflow: boolean;
+    activePanel: 'playground' | 'copilot';
+    onTogglePanel: () => void;
 }) {
     const [counter, setCounter] = useState<number>(0);
     const [showDebugMessages, setShowDebugMessages] = useState<boolean>(true);
@@ -56,8 +60,34 @@ export function App({
                 className={`${hidden ? 'hidden' : 'block'}`}
                 variant="playground"
                 tourTarget="playground"
-                icon={<MessageCircle className="w-5 h-5 text-blue-600 dark:text-blue-400" />}
-                title="Chat"
+                title={
+                    <div className="flex items-center">
+                        <div className="flex items-center gap-2 rounded-lg p-1 bg-blue-50/70 dark:bg-blue-900/30">
+                            <button
+                                onClick={onTogglePanel}
+                                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 ${
+                                    activePanel === 'copilot'
+                                        ? 'bg-white dark:bg-zinc-700 text-indigo-700 dark:text-indigo-300 shadow-md border border-indigo-200 dark:border-indigo-700'
+                                        : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60'
+                                }`}
+                            >
+                                <span className="text-base">✨</span>
+                                Build
+                            </button>
+                            <button
+                                onClick={onTogglePanel}
+                                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 ${
+                                    activePanel === 'playground'
+                                        ? 'bg-white dark:bg-zinc-700 text-indigo-700 dark:text-indigo-300 shadow-md border border-indigo-200 dark:border-indigo-700'
+                                        : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60'
+                                }`}
+                            >
+                                <span className="text-base">💬</span>
+                                Chat
+                            </button>
+                        </div>
+                    </div>
+                }
                 subtitle="Chat with your assistant"
                 rightActions={
                     <div className="flex items-center gap-2">
diff --git a/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx b/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
index 5f634bdc..c7edde70 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
@@ -425,7 +425,7 @@ export function Chat({
                         <ChevronDownIcon className="w-5 h-5" strokeWidth={2.2} />
                     </button>
                 )}
-                <div className="bg-white dark:bg-zinc-900 pt-4 pb-2">
+                <div className="bg-white dark:bg-zinc-900 pt-4 pb-6">
                     {showSuccessMessage && (
                         <div className="mb-4 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 
                                       rounded-lg flex gap-2 justify-between items-center">
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/app.tsx b/apps/rowboat/app/projects/[projectId]/workflow/app.tsx
index 1044810f..ea948813 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/app.tsx
@@ -102,6 +102,8 @@ export function App({
 
     function handleSetMode(mode: 'draft' | 'live') {
         setMode(mode);
+        // Reload data to ensure we have the latest workflow data for the current mode
+        reloadData();
     }
 
     async function handleRevertToLive() {
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx
index 98707fd2..7684bfec 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
 import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Spinner, Tooltip, Input } from "@heroui/react";
+import { Button as CustomButton } from "@/components/ui/button";
 import { RadioIcon, RedoIcon, UndoIcon, RocketIcon, PenLine, AlertTriangle, DownloadIcon, SettingsIcon, ChevronDownIcon, ZapIcon, Clock, Plug } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 
@@ -12,16 +13,17 @@ interface TopBarProps {
     publishing: boolean;
     isLive: boolean;
     showCopySuccess: boolean;
+    showBuildModeBanner: boolean;
     canUndo: boolean;
     canRedo: boolean;
-    showCopilot: boolean;
+    activePanel: 'playground' | 'copilot';
     onUndo: () => void;
     onRedo: () => void;
     onDownloadJSON: () => void;
     onPublishWorkflow: () => void;
     onChangeMode: (mode: 'draft' | 'live') => void;
     onRevertToLive: () => void;
-    onToggleCopilot: () => void;
+    onTogglePanel: () => void;
 }
 
 export function TopBar({
@@ -32,16 +34,17 @@ export function TopBar({
     publishing,
     isLive,
     showCopySuccess,
+    showBuildModeBanner,
     canUndo,
     canRedo,
-    showCopilot,
+    activePanel,
     onUndo,
     onRedo,
     onDownloadJSON,
     onPublishWorkflow,
     onChangeMode,
     onRevertToLive,
-    onToggleCopilot,
+    onTogglePanel,
 }: TopBarProps) {
     const router = useRouter();
     const params = useParams();
@@ -70,106 +73,122 @@ export function TopBar({
                             classNames={{
                                 base: "max-w-xs",
                                 input: "text-base font-semibold px-2",
-                                inputWrapper: "min-h-[28px] h-[28px] border-gray-200 dark:border-gray-700 px-0"
+                                inputWrapper: "min-h-[36px] h-[36px] border-gray-200 dark:border-gray-700 px-0"
                             }}
                         />
                     </div>
-                    
-                    <div className="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>
-                    
-                    <div className="flex items-center gap-2">
-                        {publishing && <Spinner size="sm" />}
-                        {isLive && <div className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1.5">
-                            <RadioIcon size={16} />
-                            Live workflow
-                        </div>}
-                        {!isLive && <div className="bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400 px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1.5">
-                            <PenLine size={16} />
-                            Draft workflow
-                        </div>}
 
-                        {/* Download JSON icon button, with tooltip, to the left of the menu */}
-                        <Tooltip content="Download Assistant JSON">
-                            <button
-                                onClick={onDownloadJSON}
-                                className="p-1.5 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
-                                aria-label="Download JSON"
-                                type="button"
-                            >
-                                <DownloadIcon size={20} />
-                            </button>
-                        </Tooltip>
-                    </div>
+                    {/* Show divider and CTA only in live view */}
+                    {isLive && <div className="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>}
+                    {isLive ? (
+                        <Button
+                            variant="solid"
+                            size="md"
+                            onPress={() => onChangeMode('draft')}
+                            className="gap-2 px-4 bg-gray-100 hover:bg-gray-200 text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 font-medium text-sm border border-gray-200 dark:border-gray-600 shadow-sm"
+                            startContent={<PenLine size={16} />}
+                        >
+                            Switch to draft
+                        </Button>
+                    ) : null}
                 </div>
                 {showCopySuccess && <div className="flex items-center gap-2">
                     <div className="text-green-500">Copied to clipboard</div>
                 </div>}
+                {showBuildModeBanner && <div className="flex items-center gap-2">
+                    <AlertTriangle className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                    <div className="text-blue-700 dark:text-blue-300 text-sm">
+                        Switched to draft mode. You can now make changes to your workflow.
+                    </div>
+                </div>}
                 <div className="flex items-center gap-2">
-                    {isLive && <div className="flex items-center gap-2 absolute left-1/2 transform -translate-x-1/2">
-                        <div className="bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2">
-                            <AlertTriangle size={16} />
-                            This version is locked. Changes applied will not be reflected.
-                        </div>
-                    </div>}
                     
                     {!isLive && <>
-                        <button
-                            className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
-                            title="Undo"
-                            disabled={!canUndo}
+                        <CustomButton
+                            variant="primary"
+                            size="sm"
                             onClick={onUndo}
+                            disabled={!canUndo}
+                            className="bg-gray-50 text-gray-700 hover:bg-gray-100 disabled:bg-gray-25 disabled:text-gray-400"
+                            showHoverContent={true}
+                            hoverContent="Undo"
                         >
-                            <UndoIcon size={16} />
-                        </button>
-                        <button
-                            className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
-                            title="Redo"
-                            disabled={!canRedo}
+                            <UndoIcon className="w-4 h-4" />
+                        </CustomButton>
+                        <CustomButton
+                            variant="primary"
+                            size="sm"
                             onClick={onRedo}
+                            disabled={!canRedo}
+                            className="bg-gray-50 text-gray-700 hover:bg-gray-100 disabled:bg-gray-25 disabled:text-gray-400"
+                            showHoverContent={true}
+                            hoverContent="Redo"
                         >
-                            <RedoIcon size={16} />
-                        </button>
+                            <RedoIcon className="w-4 h-4" />
+                        </CustomButton>
                     </>}
                     
                     {/* Deploy CTA - always visible */}
-                    <div className="flex">
+                    <div className="flex items-center gap-3">
                         {isLive ? (
-                            <Dropdown>
-                                <DropdownTrigger>
-                                    <Button
-                                        variant="solid"
-                                        size="md"
-                                        className="gap-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm"
-                                        startContent={<Plug size={16} />}
-                                    >
-                                        Use Assistant
-                                        <ChevronDownIcon size={14} />
-                                    </Button>
-                                </DropdownTrigger>
-                                <DropdownMenu aria-label="Assistant access options">
-                                    <DropdownItem
-                                        key="api-sdk"
-                                        startContent={<SettingsIcon size={16} />}
-                                        onPress={() => { if (projectId) { router.push(`/projects/${projectId}/config`); } }}
-                                    >
-                                        API & SDK Settings
-                                    </DropdownItem>
-                                    <DropdownItem
-                                        key="manage-triggers"
-                                        startContent={<ZapIcon size={16} />}
-                                        onPress={() => { if (projectId) { router.push(`/projects/${projectId}/manage-triggers`); } }}
+                            <>
+                                <Dropdown>
+                                    <DropdownTrigger>
+                                        <Button
+                                            variant="solid"
+                                            size="md"
+                                            className="gap-2 px-4 bg-blue-50 hover:bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 dark:text-blue-400 font-semibold text-sm border border-blue-200 dark:border-blue-700 shadow-sm"
+                                            startContent={<Plug size={16} />}
                                         >
-                                        Manage Triggers
-                                    </DropdownItem>
-                                </DropdownMenu>
-                            </Dropdown>
+                                            Use Assistant
+                                            <ChevronDownIcon size={14} />
+                                        </Button>
+                                    </DropdownTrigger>
+                                    <DropdownMenu aria-label="Assistant access options">
+                                        <DropdownItem
+                                            key="api-sdk"
+                                            startContent={<SettingsIcon size={16} />}
+                                            onPress={() => { if (projectId) { router.push(`/projects/${projectId}/config`); } }}
+                                        >
+                                            API & SDK Settings
+                                        </DropdownItem>
+                                        <DropdownItem
+                                            key="manage-triggers"
+                                            startContent={<ZapIcon size={16} />}
+                                            onPress={() => { if (projectId) { router.push(`/projects/${projectId}/manage-triggers`); } }}
+                                            >
+                                            Manage Triggers
+                                        </DropdownItem>
+                                    </DropdownMenu>
+                                </Dropdown>
+
+                                {/* Live workflow label moved here */}
+                                <div className="flex items-center gap-2 ml-2">
+                                    {publishing && <Spinner size="sm" />}
+                                    <div className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1.5">
+                                        <RadioIcon size={16} />
+                                        Live workflow
+                                    </div>
+                                    <Tooltip content="Download Assistant JSON">
+                                        <button
+                                            onClick={onDownloadJSON}
+                                            className="p-1.5 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
+                                            aria-label="Download JSON"
+                                            type="button"
+                                        >
+                                            <DownloadIcon size={20} />
+                                        </button>
+                                    </Tooltip>
+                                </div>
+                            </>
                         ) : (
                             <>
+                                <div className="flex">
                                 <Button
                                     variant="solid"
                                     size="md"
                                     onPress={onPublishWorkflow}
-                                    className="gap-2 px-4 bg-green-600 hover:bg-green-700 text-white font-semibold text-sm rounded-r-none"
+                                    className="gap-2 px-4 bg-green-100 hover:bg-green-200 text-green-800 font-semibold text-sm rounded-r-none border border-green-300 shadow-sm"
                                     startContent={<RocketIcon size={16} />}
                                     data-tour-target="deploy"
                                 >
@@ -180,7 +199,7 @@ export function TopBar({
                                         <Button
                                             variant="solid"
                                             size="md"
-                                            className="min-w-0 px-2 bg-green-600 hover:bg-green-700 border-l-1 border-green-500 text-white font-semibold text-sm rounded-l-none"
+                                            className="min-w-0 px-2 bg-green-100 hover:bg-green-200 text-green-800 rounded-l-none border border-l-0 border-green-300 shadow-sm"
                                         >
                                             <ChevronDownIcon size={14} />
                                         </Button>
@@ -203,31 +222,34 @@ export function TopBar({
                                         </DropdownItem>
                                     </DropdownMenu>
                                 </Dropdown>
+                                </div>
+
+                                {/* Moved draft/live labels and download button here */}
+                                <div className="flex items-center gap-2 ml-2">
+                                    {publishing && <Spinner size="sm" />}
+                                    {isLive && <div className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1.5">
+                                        <RadioIcon size={16} />
+                                        Live workflow
+                                    </div>}
+                                    {!isLive && <div className="bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400 px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1.5">
+                                        <PenLine size={16} />
+                                        Draft workflow
+                                    </div>}
+                                    <Tooltip content="Download Assistant JSON">
+                                        <button
+                                            onClick={onDownloadJSON}
+                                            className="p-1.5 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
+                                            aria-label="Download JSON"
+                                            type="button"
+                                        >
+                                            <DownloadIcon size={20} />
+                                        </button>
+                                    </Tooltip>
+                                </div>
                             </>
                         )}
                     </div>
-                    
-                    {isLive && <div className="flex items-center gap-2">
-                        <Button
-                            variant="solid"
-                            size="md"
-                            onPress={() => onChangeMode('draft')}
-                            className="gap-2 px-4 bg-gray-600 hover:bg-gray-700 text-white font-semibold text-sm"
-                            startContent={<PenLine size={16} />}
-                        >
-                            Switch to draft
-                        </Button>
-                    </div>}
-                    
-                    {!isLive && <Button
-                        variant="solid"
-                        size="md"
-                        onPress={onToggleCopilot}
-                        className="gap-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm"
-                        startContent={showCopilot ? null : <span className="text-indigo-300">✨</span>}
-                    >
-                        {showCopilot ? "Hide Skipper" : "Skipper"}
-                    </Button>}
+
                 </div>
             </div>
         </div>
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx b/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
index 173bec94..9c7b8205 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
@@ -1175,7 +1175,7 @@ export const EntityList = forwardRef<
                             tourTarget="entity-prompts"
                             className={clsx(
                                 "h-full",
-                                !expandedPanels.prompts && "h-[53px]!"
+                                !expandedPanels.prompts && "h-[61px]!"
                             )}
                             title={
                                 <div className={`${headerClasses} rounded-md transition-colors h-full`}>
@@ -1208,7 +1208,7 @@ export const EntityList = forwardRef<
                             }
                         >
                             {expandedPanels.prompts && (
-                                <div className="h-[calc(100%-53px)] overflow-y-auto">
+                                <div className="h-[calc(100%-61px)] overflow-y-auto">
                                     <div className="p-2">
                                         {prompts.length > 0 ? (
                                             <div className="space-y-1">
@@ -2116,4 +2116,4 @@ function AddVariableModal({ isOpen, onClose, onConfirm, initialName, initialValu
             </ModalContent>
         </Modal>
     );
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
index a1ab84fd..ff2c380d 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
@@ -61,6 +61,7 @@ interface StateItem {
     chatKey: number;
     lastUpdatedAt: string;
     isLive: boolean;
+
 }
 
 interface State {
@@ -73,6 +74,15 @@ interface State {
 export type Action = {
     type: "update_workflow_name";
     name: string;
+} | {
+    type: "switch_to_draft_due_to_changes";
+} | {
+    type: "show_workflow_change_banner";
+} | {
+    type: "clear_workflow_change_banner";
+} | {
+    type: "set_is_live";
+    isLive: boolean;
 } | {
     type: "set_publishing";
     publishing: boolean;
@@ -238,6 +248,19 @@ function reducer(state: State, action: Action): State {
             });
             break;
         }
+        case "switch_to_draft_due_to_changes": {
+            newState = produce(state, draft => {
+                draft.present.isLive = false;
+            });
+            break;
+        }
+        case "set_is_live": {
+            newState = produce(state, draft => {
+                draft.present.isLive = action.isLive;
+            });
+            break;
+        }
+
         case "set_saving": {
             newState = produce(state, draft => {
                 draft.present.saving = action.saving;
@@ -335,9 +358,6 @@ function reducer(state: State, action: Action): State {
                             draft.selection = null;
                             break;
                         case "add_agent": {
-                            if (isLive) {
-                                break;
-                            }
                             let newAgentName = "New agent";
                             if (draft.workflow?.agents.some((agent) => agent.name === newAgentName)) {
                                 newAgentName = `New agent ${draft.workflow.agents.filter((agent) =>
@@ -368,9 +388,6 @@ function reducer(state: State, action: Action): State {
                             break;
                         }
                         case "add_tool": {
-                            if (isLive) {
-                                break;
-                            }
                             let newToolName = "new_tool";
                             if (draft.workflow?.tools.some((tool) => tool.name === newToolName)) {
                                 newToolName = `new_tool_${draft.workflow.tools.filter((tool) =>
@@ -396,9 +413,6 @@ function reducer(state: State, action: Action): State {
                             break;
                         }
                         case "add_prompt": {
-                            if (isLive) {
-                                break;
-                            }
                             let newPromptName = "New Variable";
                             if (draft.workflow?.prompts.some((prompt) => prompt.name === newPromptName)) {
                                 newPromptName = `New Variable ${draft.workflow?.prompts.filter((prompt) =>
@@ -419,9 +433,6 @@ function reducer(state: State, action: Action): State {
                             break;
                         }
                         case "add_prompt_no_select": {
-                            if (isLive) {
-                                break;
-                            }
                             let newPromptName = "New Variable";
                             if (draft.workflow?.prompts.some((prompt) => prompt.name === newPromptName)) {
                                 newPromptName = `New Variable ${draft.workflow?.prompts.filter((prompt) =>
@@ -440,9 +451,6 @@ function reducer(state: State, action: Action): State {
                         }
                         // TODO: parameterize this instead of writing if else based on pipeline length (pipelineAgents.length)
                         case "add_pipeline": {
-                            if (isLive) {
-                                break;
-                            }
                             
                             if (!draft.workflow.pipelines) {
                                 draft.workflow.pipelines = [];
@@ -521,9 +529,6 @@ function reducer(state: State, action: Action): State {
                             break;
                         }
                         case "delete_agent":
-                            if (isLive) {
-                                break;
-                            }
                             // Remove the agent
                             draft.workflow.agents = draft.workflow.agents.filter(
                                 (agent) => agent.name !== action.name
@@ -568,9 +573,6 @@ function reducer(state: State, action: Action): State {
                             draft.chatKey++;
                             break;
                         case "delete_tool":
-                            if (isLive) {
-                                break;
-                            }
                             draft.workflow.tools = draft.workflow.tools.filter(
                                 (tool) => tool.name !== action.name
                             );
@@ -579,9 +581,6 @@ function reducer(state: State, action: Action): State {
                             draft.chatKey++;
                             break;
                         case "delete_prompt":
-                            if (isLive) {
-                                break;
-                            }
                             draft.workflow.prompts = draft.workflow.prompts.filter(
                                 (prompt) => prompt.name !== action.name
                             );
@@ -590,9 +589,6 @@ function reducer(state: State, action: Action): State {
                             draft.chatKey++;
                             break;
                         case "delete_pipeline":
-                            if (isLive) {
-                                break;
-                            }
                             if (draft.workflow.pipelines) {
                                 // Find the pipeline to get its associated agents
                                 const pipelineToDelete = draft.workflow.pipelines.find(
@@ -649,9 +645,6 @@ function reducer(state: State, action: Action): State {
                             draft.chatKey++;
                             break;
                         case "update_pipeline": {
-                            if (isLive) {
-                                break;
-                            }
                             if (draft.workflow.pipelines) {
                                 draft.workflow.pipelines = draft.workflow.pipelines.map(pipeline =>
                                     pipeline.name === action.name ? { ...pipeline, ...action.pipeline } : pipeline
@@ -663,9 +656,6 @@ function reducer(state: State, action: Action): State {
                             break;
                         }
                         case "update_agent": {
-                            if (isLive) {
-                                break;
-                            }
 
                             // update agent data
                             draft.workflow.agents = draft.workflow.agents.map((agent) =>
@@ -724,9 +714,6 @@ function reducer(state: State, action: Action): State {
                             break;
                         }
                         case "update_tool":
-                            if (isLive) {
-                                break;
-                            }
 
                             // update tool data
                             draft.workflow.tools = draft.workflow.tools.map((tool) =>
@@ -769,9 +756,6 @@ function reducer(state: State, action: Action): State {
                             draft.chatKey++;
                             break;
                         case "update_prompt":
-                            if (isLive) {
-                                break;
-                            }
 
                             // update prompt data
                             draft.workflow.prompts = draft.workflow.prompts.map((prompt) =>
@@ -814,9 +798,6 @@ function reducer(state: State, action: Action): State {
                             draft.chatKey++;
                             break;
                         case "update_prompt_no_select":
-                            if (isLive) {
-                                break;
-                            }
 
                             // update prompt data
                             draft.workflow.prompts = draft.workflow.prompts.map((prompt) =>
@@ -855,18 +836,12 @@ function reducer(state: State, action: Action): State {
                             draft.chatKey++;
                             break;
                         case "toggle_agent":
-                            if (isLive) {
-                                break;
-                            }
                             draft.workflow.agents = draft.workflow.agents.map(agent =>
                                 agent.name === action.name ? { ...agent, disabled: !agent.disabled } : agent
                             );
                             draft.chatKey++;
                             break;
                         case "set_main_agent":
-                            if (isLive) {
-                                break;
-                            }
                             draft.workflow.startAgent = action.name;
                             draft.pendingChanges = true;
                             draft.chatKey++;
@@ -955,6 +930,7 @@ export function WorkflowEditor({
             chatKey: 0,
             lastUpdatedAt: workflow.lastUpdatedAt,
             isLive,
+
         }
     });
 
@@ -965,10 +941,42 @@ export function WorkflowEditor({
     const saveQueue = useRef<z.infer<typeof Workflow>[]>([]);
     const saving = useRef(false);
     const [showCopySuccess, setShowCopySuccess] = useState(false);
-    const [showCopilot, setShowCopilot] = useState(true);
-    const [copilotWidth, setCopilotWidth] = useState<number>(PANEL_RATIOS.copilot);
+    const [activePanel, setActivePanel] = useState<'playground' | 'copilot'>('copilot');
     const [isInitialState, setIsInitialState] = useState(true);
+    const [showBuildModeBanner, setShowBuildModeBanner] = useState(false);
+    const [showEditModal, setShowEditModal] = useState(false);
+    const [pendingAction, setPendingAction] = useState<Action | null>(null);
+    const [configKey, setConfigKey] = useState(0);
+    const [lastWorkflowId, setLastWorkflowId] = useState<string | null>(null);
     const [showTour, setShowTour] = useState(true);
+
+    // Centralized mode transition handler
+    const handleModeTransition = useCallback((newMode: 'draft' | 'live', reason: 'publish' | 'view_live' | 'switch_draft' | 'modal_switch') => {
+        // Clear any open entity configs
+        dispatch({ type: "unselect_agent" });
+        
+        // Set default panel based on mode
+        setActivePanel(newMode === 'live' ? 'playground' : 'copilot');
+        
+        // Force component re-render
+        setConfigKey(prev => prev + 1);
+        
+        // Handle mode-specific logic
+        if (reason === 'publish') {
+            // This will be handled by the publish function itself
+            return;
+        } else {
+            // Direct mode switch
+            onChangeMode(newMode);
+            
+            // If switching to draft mode, we need to ensure we have the correct draft data
+            // The parent component will update the workflow prop, but we need to wait for it
+            if (newMode === 'draft') {
+                // Force a workflow state reset when the workflow prop updates
+                setLastWorkflowId(null);
+            }
+        }
+    }, [onChangeMode]);
     const copilotRef = useRef<{ handleUserMessage: (message: string) => void }>(null);
     const entityListRef = useRef<{ openDataSourcesModal: () => void } | null>(null);
     
@@ -1010,7 +1018,7 @@ export function WorkflowEditor({
 
     // Function to trigger copilot chat
     const triggerCopilotChat = useCallback((message: string) => {
-        setShowCopilot(true);
+        setActivePanel('copilot');
         // Small delay to ensure copilot is mounted
         setTimeout(() => {
             copilotRef.current?.handleUserMessage(message);
@@ -1028,14 +1036,14 @@ export function WorkflowEditor({
         const prompt = localStorage.getItem(`project_prompt_${projectId}`);
         console.log('init project prompt', prompt);
         if (prompt) {
-            setShowCopilot(true);
+            setActivePanel('copilot');
         }
     }, [projectId]);
 
-    // Hide copilot when switching to live mode
+    // Switch to playground when switching to live mode
     useEffect(() => {
         if (isLive) {
-            setShowCopilot(false);
+            setActivePanel('playground');
         }
     }, [isLive]);
 
@@ -1093,15 +1101,15 @@ export function WorkflowEditor({
             ...agent,
             model: agent.model || defaultModel || "gpt-4.1"
         };
-        dispatch({ type: "add_agent", agent: agentWithModel });
+        dispatchGuarded({ type: "add_agent", agent: agentWithModel });
     }
 
     function handleAddTool(tool: Partial<z.infer<typeof WorkflowTool>> = {}) {
-        dispatch({ type: "add_tool", tool });
+        dispatchGuarded({ type: "add_tool", tool });
     }
 
     function handleAddPrompt(prompt: Partial<z.infer<typeof WorkflowPrompt>> = {}) {
-        dispatch({ type: "add_prompt", prompt });
+        dispatchGuarded({ type: "add_prompt", prompt });
     }
 
     function handleSelectPipeline(name: string) {
@@ -1109,7 +1117,7 @@ export function WorkflowEditor({
     }
 
     function handleAddPipeline(pipeline: Partial<z.infer<typeof WorkflowPipeline>> = {}) {
-        dispatch({ type: "add_pipeline", pipeline, defaultModel });
+        dispatchGuarded({ type: "add_pipeline", pipeline, defaultModel });
     }
 
     function handleDeletePipeline(name: string) {
@@ -1130,12 +1138,12 @@ export function WorkflowEditor({
         };
         
         // First add the agent
-        dispatch({ type: "add_agent", agent: agentWithModel });
+        dispatchGuarded({ type: "add_agent", agent: agentWithModel });
         
         // Then add it to the pipeline
         const pipeline = state.present.workflow.pipelines?.find(p => p.name === pipelineName);
         if (pipeline) {
-            dispatch({ 
+            dispatchGuarded({ 
                 type: "update_pipeline", 
                 name: pipelineName, 
                 pipeline: { 
@@ -1225,8 +1233,17 @@ export function WorkflowEditor({
     }
 
     async function handlePublishWorkflow() {
-        await publishWorkflow(projectId, state.present.workflow);
-        onChangeMode('live');
+        dispatch({ type: 'set_publishing', publishing: true });
+        try {
+            await publishWorkflow(projectId, state.present.workflow);
+            // Use centralized mode transition for publish
+            handleModeTransition('live', 'publish');
+            // reflect live mode both internally and externally in one go
+            dispatch({ type: 'set_is_live', isLive: true });
+            onChangeMode('live');
+        } finally {
+            dispatch({ type: 'set_publishing', publishing: false });
+        }
     }
 
     function handleRevertToLive() {
@@ -1326,6 +1343,101 @@ export function WorkflowEditor({
         setIsInitialState(false);
     }
 
+    // Centralized draft switch for any workflow modification while in live mode
+    const ensureDraftForModify = useCallback(() => {
+        if (isLive && !state.present.publishing) {
+            onChangeMode('draft');
+            setShowBuildModeBanner(true);
+            setTimeout(() => setShowBuildModeBanner(false), 5000);
+        }
+    }, [isLive, state.present.publishing, onChangeMode]);
+
+    const WORKFLOW_MOD_ACTIONS = useRef(new Set([
+        'add_agent','add_tool','add_prompt','add_prompt_no_select','add_pipeline',
+        'update_agent','update_tool','update_prompt','update_prompt_no_select','update_pipeline',
+        'delete_agent','delete_tool','delete_prompt','delete_pipeline',
+        'toggle_agent','set_main_agent','reorder_agents','reorder_pipelines'
+    ])).current;
+
+    const dispatchGuarded = useCallback((action: Action) => {
+        // Intercept workflow modifications in live mode before they reach the reducer
+        if (WORKFLOW_MOD_ACTIONS.has((action as any).type) && isLive && !state.present.publishing) {
+            setPendingAction(action);
+            setShowEditModal(true);
+            return; // Block the action - it never reaches the reducer
+        }
+        dispatch(action); // Allow the action to proceed
+    }, [WORKFLOW_MOD_ACTIONS, isLive, state.present.publishing, dispatch]);
+
+    // Simplified modal handlers
+    const handleSwitchToDraft = useCallback(() => {
+        setShowEditModal(false);
+        setPendingAction(null); // Don't apply the pending action
+        handleModeTransition('draft', 'modal_switch');
+        setShowBuildModeBanner(true);
+        setTimeout(() => setShowBuildModeBanner(false), 5000);
+    }, [handleModeTransition]);
+
+    const handleCancelEdit = useCallback(() => {
+        setShowEditModal(false);
+        setPendingAction(null);
+        // Force re-render of config components to reset form values
+        setConfigKey(prev => prev + 1);
+    }, []);
+
+    // Single useEffect for data synchronization
+    useEffect(() => {
+        // Only sync when workflow data actually changes
+        const currentWorkflowId = `${isLive ? 'live' : 'draft'}-${workflow.lastUpdatedAt}`;
+        
+        // Special case: if we're switching to draft mode and the workflow data looks like live data
+        // (same lastUpdatedAt as the previous live data), don't reset the state yet
+        if (!isLive && lastWorkflowId && lastWorkflowId.startsWith('live-') && 
+            currentWorkflowId === `draft-${workflow.lastUpdatedAt}`) {
+            // This is likely stale draft data that matches live data
+            // Don't reset the state, just update the ID
+            setLastWorkflowId(currentWorkflowId);
+            return;
+        }
+        
+        if (lastWorkflowId !== currentWorkflowId) {
+            dispatch({ type: "restore_state", state: { ...state.present, workflow } });
+            setLastWorkflowId(currentWorkflowId);
+        }
+    }, [workflow, isLive, lastWorkflowId, state.present]);
+
+    // Handle the case where we switch to draft mode but get stale data
+    useEffect(() => {
+        // If we're in draft mode but the workflow data looks like live data (same lastUpdatedAt as live)
+        // and we just switched from live mode, we need to wait for fresh draft data
+        if (!isLive && lastWorkflowId && lastWorkflowId.startsWith('live-')) {
+            // We just switched from live to draft, but we might have stale data
+            // Clear the selection to prevent showing wrong data
+            dispatch({ type: "unselect_agent" });
+        }
+    }, [isLive, lastWorkflowId]);
+
+    // Additional effect to handle mode changes that might not trigger workflow prop updates
+    useEffect(() => {
+        // If we're in draft mode but the workflow state contains live data, clear selection
+        // This prevents showing wrong data while waiting for the correct workflow prop
+        if (!isLive && state.present.isLive) {
+            dispatch({ type: "unselect_agent" });
+        }
+    }, [isLive, state.present.isLive]);
+
+    function handleTogglePanel() {
+        if (isLive && activePanel === 'playground') {
+            // User is trying to switch to Build mode in live mode
+            handleModeTransition('draft', 'switch_draft');
+            setShowBuildModeBanner(true);
+            // Auto-hide banner after 5 seconds
+            setTimeout(() => setShowBuildModeBanner(false), 5000);
+        } else {
+            setActivePanel(activePanel === 'playground' ? 'copilot' : 'playground');
+        }
+    }
+
     const validateProjectName = (value: string) => {
         if (value.length === 0) {
             setProjectNameError("Project name cannot be empty");
@@ -1386,6 +1498,39 @@ export function WorkflowEditor({
             onSelectPrompt: handleSelectPrompt,
         }}>
             <div className="h-full flex flex-col gap-5">
+                {/* Live Workflow Edit Modal */}
+                <Modal isOpen={showEditModal} onClose={handleCancelEdit} size="md">
+                    <ModalContent>
+                        <ModalHeader className="flex flex-col gap-1">
+                            <div className="flex items-center gap-2">
+                                <AlertTriangle className="w-5 h-5 text-amber-500" />
+                                <span>Edit Live Workflow</span>
+                            </div>
+                        </ModalHeader>
+                        <ModalBody>
+                            <p className="text-gray-600 dark:text-gray-400">
+                                Seems like you&apos;re trying to edit the live workflow. Only the draft version can be modified. Changes will not be saved.
+                            </p>
+                        </ModalBody>
+                        <ModalFooter>
+                            <Button 
+                                variant="light" 
+                                onPress={handleCancelEdit}
+                                className="text-gray-600"
+                            >
+                                View the live version
+                            </Button>
+                            <Button 
+                                color="primary" 
+                                onPress={handleSwitchToDraft}
+                                className="bg-blue-600 text-white"
+                            >
+                                Switch to draft
+                            </Button>
+                        </ModalFooter>
+                    </ModalContent>
+                </Modal>
+
                 {/* Top Bar - Isolated like sidebar */}
                 <TopBar
                     localProjectName={localProjectName}
@@ -1395,21 +1540,26 @@ export function WorkflowEditor({
                     publishing={state.present.publishing}
                     isLive={isLive}
                     showCopySuccess={showCopySuccess}
+                    showBuildModeBanner={showBuildModeBanner}
                     canUndo={state.currentIndex > 0}
                     canRedo={state.currentIndex < state.patches.length}
-                    showCopilot={showCopilot}
-                    onUndo={() => dispatch({ type: "undo" })}
-                    onRedo={() => dispatch({ type: "redo" })}
+                    activePanel={activePanel}
+                    onUndo={() => dispatchGuarded({ type: "undo" })}
+                    onRedo={() => dispatchGuarded({ type: "redo" })}
                     onDownloadJSON={handleDownloadJSON}
                     onPublishWorkflow={handlePublishWorkflow}
                     onChangeMode={onChangeMode}
                     onRevertToLive={handleRevertToLive}
-                    onToggleCopilot={() => setShowCopilot(!showCopilot)}
+                    onTogglePanel={handleTogglePanel}
                 />
                 
                 {/* Content Area */}
                 <ResizablePanelGroup direction="horizontal" className="flex-1 flex overflow-auto gap-1 rounded-xl bg-zinc-50 dark:bg-zinc-900">
-                    <ResizablePanel minSize={10} defaultSize={PANEL_RATIOS.entityList}>
+                    <ResizablePanel 
+                        key={`entity-list-${state.present.selection ? '3-pane' : '2-pane'}`}
+                        minSize={10} 
+                        defaultSize={PANEL_RATIOS.entityList}
+                    >
                         <div className="flex flex-col h-full">
                             <EntityList
                                 ref={entityListRef}
@@ -1462,24 +1612,16 @@ export function WorkflowEditor({
                             />
                         </div>
                     </ResizablePanel>
-                    <ResizableHandle withHandle className="w-[3px] bg-transparent" />
+                    <ResizableHandle withHandle className={`w-[3px] bg-transparent ${!state.present.selection ? 'hidden' : ''}`} />
+                    
+                    {/* Config Panel - always rendered, visibility controlled */}
                     <ResizablePanel
                         minSize={20}
-                        defaultSize={showCopilot ? PANEL_RATIOS.chatApp : PANEL_RATIOS.chatApp + PANEL_RATIOS.copilot}
-                        className="overflow-auto"
+                        defaultSize={45}
+                        className={`overflow-auto ${!state.present.selection ? 'hidden' : ''}`}
                     >
-                        <ChatApp
-                            key={'' + state.present.chatKey}
-                            hidden={state.present.selection !== null}
-                            projectId={projectId}
-                            workflow={state.present.workflow}
-                            messageSubscriber={updateChatMessages}
-                            onPanelClick={handlePlaygroundClick}
-                            triggerCopilotChat={triggerCopilotChat}
-                            isLiveWorkflow={isLive}
-                        />
                         {state.present.selection?.type === "agent" && <AgentConfig
-                            key={`agent-${state.present.workflow.agents.findIndex(agent => agent.name === state.present.selection!.name)}`}
+                            key={`agent-${state.present.workflow.agents.findIndex(agent => agent.name === state.present.selection!.name)}-${configKey}`}
                             projectId={projectId}
                             workflow={state.present.workflow}
                             agent={state.present.workflow.agents.find((agent) => agent.name === state.present.selection!.name)!}
@@ -1489,7 +1631,7 @@ export function WorkflowEditor({
                             tools={state.present.workflow.tools}
                             prompts={state.present.workflow.prompts}
                             dataSources={dataSources}
-                            handleUpdate={handleUpdateAgent.bind(null, state.present.selection.name)}
+                            handleUpdate={(update) => { dispatchGuarded({ type: "update_agent", name: state.present.selection!.name, agent: update }); }}
                             handleClose={handleUnselectAgent}
                             useRag={useRag}
                             triggerCopilotChat={triggerCopilotChat}
@@ -1501,33 +1643,33 @@ export function WorkflowEditor({
                                 (tool) => tool.name === state.present.selection!.name
                             );
                             return <ToolConfig
-                                key={state.present.selection.name}
+                                key={`${state.present.selection.name}-${configKey}`}
                                 tool={selectedTool!}
                                 usedToolNames={new Set([
                                     ...state.present.workflow.tools.filter((tool) => tool.name !== state.present.selection!.name).map((tool) => tool.name),
                                 ])}
-                                handleUpdate={handleUpdateTool.bind(null, state.present.selection.name)}
+                                handleUpdate={(update) => { dispatchGuarded({ type: "update_tool", name: state.present.selection!.name, tool: update }); }}
                                 handleClose={handleUnselectTool}
                             />;
                         })()}
                         {state.present.selection?.type === "prompt" && <PromptConfig
-                            key={state.present.selection.name}
+                            key={`${state.present.selection.name}-${configKey}`}
                             prompt={state.present.workflow.prompts.find((prompt) => prompt.name === state.present.selection!.name)!}
                             agents={state.present.workflow.agents}
                             tools={state.present.workflow.tools}
                             prompts={state.present.workflow.prompts}
                             usedPromptNames={new Set(state.present.workflow.prompts.filter((prompt) => prompt.name !== state.present.selection!.name).map((prompt) => prompt.name))}
-                            handleUpdate={handleUpdatePrompt.bind(null, state.present.selection.name)}
+                            handleUpdate={(update) => { dispatchGuarded({ type: "update_prompt", name: state.present.selection!.name, prompt: update }); }}
                             handleClose={handleUnselectPrompt}
                         />}
                         {state.present.selection?.type === "datasource" && <DataSourceConfig
-                            key={state.present.selection.name}
+                            key={`${state.present.selection.name}-${configKey}`}
                             dataSourceId={state.present.selection.name}
                             handleClose={() => dispatch({ type: "unselect_datasource" })}
                             onDataSourceUpdate={onDataSourcesUpdated}
                         />}
                         {state.present.selection?.type === "pipeline" && <PipelineConfig
-                            key={state.present.selection.name}
+                            key={`${state.present.selection.name}-${configKey}`}
                             projectId={projectId}
                             workflow={state.present.workflow}
                             pipeline={state.present.workflow.pipelines?.find((pipeline) => pipeline.name === state.present.selection!.name)!}
@@ -1563,38 +1705,55 @@ export function WorkflowEditor({
                             </Panel>
                         )}
                     </ResizablePanel>
-                    {showCopilot && (
-                        <>
-                            <ResizableHandle withHandle className="w-[3px] bg-transparent" />
-                            <ResizablePanel
-                                minSize={10}
-                                defaultSize={PANEL_RATIOS.copilot}
-                                onResize={(size) => setCopilotWidth(size)}
-                            >
-                                <Copilot
-                                    ref={copilotRef}
-                                    projectId={projectId}
-                                    workflow={state.present.workflow}
-                                    dispatch={dispatch}
-                                    chatContext={
-                                        state.present.selection &&
-                                        (state.present.selection.type === "agent" ||
-                                         state.present.selection.type === "tool" ||
-                                         state.present.selection.type === "prompt")
-                                          ? {
-                                              type: state.present.selection.type,
-                                              name: state.present.selection.name
-                                            }
-                                          : chatMessages.length > 0
-                                            ? { type: 'chat', messages: chatMessages }
-                                            : undefined
-                                    }
-                                    isInitialState={isInitialState}
-                                    dataSources={dataSources}
-                                />
-                            </ResizablePanel>
-                        </>
-                    )}
+                    {/* Second handle - always show (between config and chat panels) */}
+                    <ResizableHandle withHandle className="w-[3px] bg-transparent" />
+                    
+                    {/* ChatApp/Copilot Panel - always visible */}
+                    <ResizablePanel
+                        key={`chat-panel-${state.present.selection ? '3-pane' : '2-pane'}`}
+                        minSize={20}
+                        defaultSize={state.present.selection ? 30 : PANEL_RATIOS.chatApp + PANEL_RATIOS.copilot}
+                        className="overflow-auto"
+                    >
+                        <div className={(activePanel === 'playground') ? 'block h-full' : 'hidden h-full'}>
+                            <ChatApp
+                                key={'' + state.present.chatKey}
+                                projectId={projectId}
+                                workflow={state.present.workflow}
+                                messageSubscriber={updateChatMessages}
+                                onPanelClick={handlePlaygroundClick}
+                                triggerCopilotChat={triggerCopilotChat}
+                                isLiveWorkflow={isLive}
+                                activePanel={activePanel}
+                                onTogglePanel={handleTogglePanel}
+                            />
+                        </div>
+                        <div className={(activePanel === 'copilot') ? 'block h-full' : 'hidden h-full'}>
+                            <Copilot
+                                ref={copilotRef}
+                                projectId={projectId}
+                                workflow={state.present.workflow}
+                                dispatch={dispatch}
+                                chatContext={
+                                    state.present.selection &&
+                                    (state.present.selection.type === "agent" ||
+                                     state.present.selection.type === "tool" ||
+                                     state.present.selection.type === "prompt")
+                                      ? {
+                                          type: state.present.selection.type,
+                                          name: state.present.selection.name
+                                        }
+                                      : chatMessages.length > 0
+                                        ? { type: 'chat', messages: chatMessages }
+                                        : undefined
+                                }
+                                isInitialState={isInitialState}
+                                dataSources={dataSources}
+                                activePanel={activePanel}
+                                onTogglePanel={handleTogglePanel}
+                            />
+                        </div>
+                    </ResizablePanel>
                 </ResizablePanelGroup>
                 {USE_PRODUCT_TOUR && showTour && (
                     <ProductTour
diff --git a/apps/rowboat/components/common/compose-box-copilot.tsx b/apps/rowboat/components/common/compose-box-copilot.tsx
index 31e49563..643fd0e6 100644
--- a/apps/rowboat/components/common/compose-box-copilot.tsx
+++ b/apps/rowboat/components/common/compose-box-copilot.tsx
@@ -85,11 +85,11 @@ export function ComposeBoxCopilot({
                           group-hover:opacity-100 transition-opacity">
                 Press ⌘ + Enter to send
             </div>
-            {/* Outer container with padding */}
-            <div className="rounded-2xl border-[1.5px] border-gray-200 dark:border-[#2a2d31] p-3 relative 
+            {/* Outer container without external padding; textarea grows to fill */}
+            <div className="rounded-2xl border-[1.5px] border-gray-200 dark:border-[#2a2d31] relative 
                           bg-white dark:bg-[#1e2023] flex items-end gap-2">
                 {/* Textarea */}
-                <div className="flex-1">
+                <div className="flex-1 p-3">
                     <Textarea
                         ref={textareaRef}
                         value={input}
diff --git a/apps/rowboat/components/common/panel-common.tsx b/apps/rowboat/components/common/panel-common.tsx
index 3ee7875f..2a6e18c7 100644
--- a/apps/rowboat/components/common/panel-common.tsx
+++ b/apps/rowboat/components/common/panel-common.tsx
@@ -83,12 +83,15 @@ export function Panel({
     >
         <div 
             className={clsx(
-                "shrink-0 border-b relative",
-                variant === 'copilot' ? "border-zinc-300 dark:border-zinc-700" : "border-zinc-100 dark:border-zinc-800",
+                // For copilot and playground, mimic TopBar appearance
+                (variant === 'copilot' || variant === 'playground')
+                    ? "shrink-0 relative rounded-xl bg-white/70 dark:bg-zinc-800/70 shadow-sm backdrop-blur-sm border border-zinc-200 dark:border-zinc-800 px-0 pt-0 pb-2 mx-0 mt-0 mb-2 flex items-center justify-between"
+                    : "shrink-0 border-b relative",
+                (variant !== 'copilot' && variant !== 'playground') && "border-zinc-100 dark:border-zinc-800",
                 {
                     "flex flex-col gap-3 px-4 py-3": variant === 'projects',
                     "flex items-center justify-between h-[53px] p-3": isEntityList,
-                    "flex items-center justify-between px-6 py-3": !isEntityList && variant !== 'projects'
+                    "flex items-center justify-between px-6 py-3": !isEntityList && variant !== 'projects' && variant !== 'copilot' && variant !== 'playground'
                 }
             )}
         >
@@ -102,39 +105,27 @@ export function Panel({
                     </div>}
                 </>
             ) : variant === 'copilot' ? (
-                <>
+                <div className="w-full flex items-center justify-between px-3 pt-2">
                     <div className="flex items-center gap-2">
-                        {icon && icon}
                         <div className="flex flex-col">
                             <div className="font-semibold text-zinc-700 dark:text-zinc-300">
                                 {title}
                             </div>
-                            {subtitle && (
-                                <div className="text-xs text-zinc-500 dark:text-zinc-400">
-                                    {subtitle}
-                                </div>
-                            )}
                         </div>
                     </div>
                     {rightActions}
-                </>
+                </div>
             ) : variant === 'playground' ? (
-                <>
+                <div className="w-full flex items-center justify-between px-3 pt-2">
                     <div className="flex items-center gap-2">
-                        {icon && icon}
                         <div className="flex flex-col">
                             <div className="font-semibold text-zinc-700 dark:text-zinc-300">
                                 {title}
                             </div>
-                            {subtitle && (
-                                <div className="text-xs text-zinc-500 dark:text-zinc-400">
-                                    {subtitle}
-                                </div>
-                            )}
                         </div>
                     </div>
                     {rightActions}
-                </>
+                </div>
             ) : isEntityList ? (
                 <div className="flex items-center justify-between w-full">
                     {title}
diff --git a/apps/rowboat/components/common/tool-param-card.tsx b/apps/rowboat/components/common/tool-param-card.tsx
index 927ea974..7ef5143f 100644
--- a/apps/rowboat/components/common/tool-param-card.tsx
+++ b/apps/rowboat/components/common/tool-param-card.tsx
@@ -45,7 +45,7 @@ export function ToolParamCard({
         aria-expanded={expanded}
       >
         {expanded ? <ChevronDown className="w-4 h-4 text-gray-400" /> : <ChevronRight className="w-4 h-4 text-gray-400" />}
-        <span className="text-sm font-semibold text-gray-900 dark:text-gray-100 flex-1 text-left truncate">{param.name}</span>
+        <span className="text-sm font-normal text-gray-900 dark:text-gray-100 flex-1 text-left truncate">{param.name}</span>
         {!readOnly && (
           <Button
             variant="tertiary"