From 8488255d6d9f773a0fcc7a0d30aaf1c9b15e2138 Mon Sep 17 00:00:00 2001
From: Akhilesh Sudhakar <55130408+akhisud3195@users.noreply.github.com>
Date: Fri, 15 Aug 2025 15:07:39 +0800
Subject: [PATCH] Change copilot and background panels to distinguish from
 playground (#204)

---
 .../app/projects/[projectId]/copilot/app.tsx  |  25 +--
 .../copilot/components/messages.tsx           | 132 +++--------
 .../projects/[projectId]/playground/app.tsx   |  21 +-
 .../workflow/components/TopBar.tsx            | 210 ++++++++++++++++++
 .../[projectId]/workflow/workflow_editor.tsx  | 181 +++------------
 .../projects/layout/components/app-layout.tsx |  10 +-
 .../components/common/compose-box-copilot.tsx |   7 +-
 .../components/common/panel-common.tsx        |  40 +++-
 apps/rowboat/components/ui/textarea.tsx       |   2 -
 9 files changed, 327 insertions(+), 301 deletions(-)
 create mode 100644 apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx

diff --git a/apps/rowboat/app/projects/[projectId]/copilot/app.tsx b/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
index cd50a10e..743f6a55 100644
--- a/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
@@ -7,11 +7,11 @@ import { CopilotMessage } from "../../../lib/types/copilot_types";
 import { Workflow } from "@/app/lib/types/workflow_types";
 import { DataSource } from "@/app/lib/types/datasource_types";
 import { z } from "zod";
-import { Action as WorkflowDispatch } from "../workflow/workflow_editor";
+import { Action as WorkflowDispatch } from "@/app/projects/[projectId]/workflow/workflow_editor";
 import { Panel } from "@/components/common/panel-common";
 import { ComposeBoxCopilot } from "@/components/common/compose-box-copilot";
 import { Messages } from "./components/messages";
-import { CopyIcon, CheckIcon, PlusIcon, XIcon, InfoIcon } from "lucide-react";
+import { CopyIcon, CheckIcon, PlusIcon, XIcon, InfoIcon, Sparkles } from "lucide-react";
 import { useCopilot } from "./use-copilot";
 import { BillingUpgradeModal } from "@/components/common/billing-upgrade-modal";
 import { WithStringId } from "@/app/lib/types/types";
@@ -225,7 +225,7 @@ const App = forwardRef<{ handleCopyChat: () => void; handleUserMessage: (message
                         </div>
                     </div>
                 )}
-                <div className="shrink-0 px-1 pb-6">
+                <div className="shrink-0 px-1">
                     {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,16 +322,11 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
                 variant="copilot"
                 tourTarget="copilot"
                 showWelcome={messages.length === 0}
-                title={
-                    <div className="flex items-center gap-3">
-                        <div className="flex items-center gap-2">
-                            <div className="font-semibold text-zinc-700 dark:text-zinc-300">
-                                Skipper
-                            </div>
-                            <Tooltip content="A copilot to help you build and modify your workflow">
-                                <InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />
-                            </Tooltip>
-                        </div>
+                icon={<Sparkles className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />}
+                title="Skipper"
+                subtitle="Build your assistant"
+                rightActions={
+                    <div className="flex items-center gap-2">
                         <Button
                             variant="primary"
                             size="sm"
@@ -342,10 +337,6 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
                         >
                             <PlusIcon className="w-4 h-4" />
                         </Button>
-                    </div>
-                }
-                rightActions={
-                    <div className="flex items-center gap-3">
                         <Button
                             variant="secondary"
                             size="sm"
diff --git a/apps/rowboat/app/projects/[projectId]/copilot/components/messages.tsx b/apps/rowboat/app/projects/[projectId]/copilot/components/messages.tsx
index 6b42c435..a22f4870 100644
--- a/apps/rowboat/app/projects/[projectId]/copilot/components/messages.tsx
+++ b/apps/rowboat/app/projects/[projectId]/copilot/components/messages.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { Spinner } from "@heroui/react";
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { z } from "zod";
 import { Workflow} from "@/app/lib/types/workflow_types";
 import MarkdownContent from "@/app/lib/components/markdown-content";
@@ -153,16 +153,7 @@ function InternalAssistantMessage({ content }: { content: string }) {
     );
 }
 
-type ActionPanelBlock = {
-  part: {
-    type: 'action';
-    action: any;
-  } | {
-    type: 'streaming_action';
-    action: any;
-  };
-  actionIndex: number;
-};
+
 
 /**
  * AssistantMessage component that renders copilot responses with action cards.
@@ -194,26 +185,24 @@ function AssistantMessage({
     // Remove autoApplyEnabled and useEffect for auto-apply
 
     // parse actions from parts
-    let parsed: z.infer<typeof CopilotResponsePart>[] = [];
-    for (const block of blocks) {
-        if (block.type === 'text') {
-            parsed.push({
-                type: 'text',
-                content: block.content,
-            });
-        } else {
-            parsed.push(enrich(block.content));
+    const parsed = useMemo(() => {
+        const result: z.infer<typeof CopilotResponsePart>[] = [];
+        for (const block of blocks) {
+            if (block.type === 'text') {
+                result.push({
+                    type: 'text',
+                    content: block.content,
+                });
+            } else {
+                result.push(enrich(block.content));
+            }
         }
-    }
+        return result;
+    }, [blocks]);
 
-    // Only render text outside the panel
-    const textBlocks = parsed.filter(part => part.type === 'text');
-    // All cards (action and streaming_action) go inside the panel
-    const cardBlocks: ActionPanelBlock[] = parsed
-  .map((part, actionIndex) => ({ part, actionIndex }))
-  .filter(({ part }) => part.type === 'action' || part.type === 'streaming_action') as ActionPanelBlock[];
-    const hasCards = cardBlocks.length > 0;
-    const totalActions = cardBlocks.filter(({ part }) => part.type === 'action').length;
+    // Count action cards for tracking
+    const actionParts = parsed.filter(part => part.type === 'action' || part.type === 'streaming_action');
+    const totalActions = parsed.filter(part => part.type === 'action').length;
     const appliedCount = Array.from(appliedActions).length;
     const pendingCount = Math.max(0, totalActions - appliedCount);
     const allApplied = pendingCount === 0 && totalActions > 0;
@@ -307,9 +296,14 @@ function AssistantMessage({
     // Memoized handleApplyAll for useEffect dependencies
     const handleApplyAll = useCallback(() => {
         // Find all unapplied action indices
-        const unapplied = cardBlocks
+        const unapplied = parsed
+            .map((part, idx) => ({ part, actionIndex: idx }))
             .filter(({ part, actionIndex }) => part.type === 'action' && !appliedActions.has(actionIndex))
-            .map(({ part, actionIndex }) => ({ action: part.action, actionIndex }));
+            .map(({ part, actionIndex }) => ({ 
+                action: part.type === 'action' ? part.action : null, 
+                actionIndex 
+            }))
+            .filter(({ action }) => action !== null);
 
         // Synchronously apply all unapplied actions
         unapplied.forEach(({ action, actionIndex }) => {
@@ -322,7 +316,7 @@ function AssistantMessage({
             unapplied.forEach(({ actionIndex }) => next.add(actionIndex));
             return next;
         });
-    }, [cardBlocks, appliedActions, setAppliedActions, applyAction]);
+    }, [parsed, appliedActions, setAppliedActions, applyAction]);
 
     // Manual single apply (from card)
     const handleSingleApply = (action: any, actionIndex: number) => {
@@ -343,37 +337,20 @@ function AssistantMessage({
     // Removed useEffect for auto-apply
 
     // Find streaming/ongoing card and extract name
-    const streamingBlock = cardBlocks.find(({ part }) => part.type === 'streaming_action');
+    const streamingPart = parsed.find(part => part.type === 'streaming_action');
     let streamingLine = '';
-    if (streamingBlock && streamingBlock.part.type === 'streaming_action' && streamingBlock.part.action && streamingBlock.part.action.name) {
-        streamingLine = `Generating ${streamingBlock.part.action.name}...`;
+    if (streamingPart && streamingPart.type === 'streaming_action' && streamingPart.action && streamingPart.action.name) {
+        streamingLine = `Generating ${streamingPart.action.name}...`;
     }
 
-    // Find the first card index
-    const firstCardIdx = parsed.findIndex(part => part.type === 'action' || part.type === 'streaming_action');
-    // Group blocks into: beforePanel, cardBlocks, afterPanel
-    const beforePanel = firstCardIdx === -1 ? parsed : parsed.slice(0, firstCardIdx);
-    const panelBlocks = firstCardIdx === -1 ? [] : parsed.slice(firstCardIdx).filter(part => part.type === 'action' || part.type === 'streaming_action');
-    // Find where the card blocks end (first non-card after first card)
-    let afterPanelStart = firstCardIdx;
-    if (firstCardIdx !== -1) {
-        for (let i = firstCardIdx; i < parsed.length; i++) {
-            if (parsed[i].type !== 'action' && parsed[i].type !== 'streaming_action') {
-                afterPanelStart = i;
-                break;
-            }
-        }
-    }
-    const afterPanel = (firstCardIdx !== -1 && afterPanelStart > firstCardIdx) ? parsed.slice(afterPanelStart) : [];
-
     // Only show Apply All button if all cards are loaded (no streaming_action cards) and streaming is finished
-    const allCardsLoaded = !loading && panelBlocks.length > 0 && panelBlocks.every(part => part.type === 'action');
+    const allCardsLoaded = !loading && actionParts.length > 0 && actionParts.every(part => part.type === 'action');
     // When all cards are loaded, show summary of agents created/updated
     let completedSummary = '';
     if (allCardsLoaded && totalActions > 0) {
         // Count how many are create vs edit
-        const createCount = cardBlocks.filter(({ part }) => part.type === 'action' && part.action.action === 'create_new').length;
-        const editCount = cardBlocks.filter(({ part }) => part.type === 'action' && part.action.action === 'edit').length;
+        const createCount = parsed.filter(part => part.type === 'action' && part.action.action === 'create_new').length;
+        const editCount = parsed.filter(part => part.type === 'action' && part.action.action === 'edit').length;
         const parts = [];
         if (createCount > 0) parts.push(`${createCount} agent${createCount > 1 ? 's' : ''} created`);
         if (editCount > 0) parts.push(`${editCount} agent${editCount > 1 ? 's' : ''} updated`);
@@ -381,51 +358,13 @@ function AssistantMessage({
     }
 
     // Detect if any card has an error or is cancelled
-    const hasPanelWarning = cardBlocks.some(
-        ({ part }) =>
+    const hasPanelWarning = parsed.some(
+        part =>
             part.type === 'action' &&
             part.action &&
             (part.action.error || ('cancelled' in part.action && part.action.cancelled))
     );
 
-    // Ticker summary for collapsed state (two lines)
-    const ticker = (
-        <div className="flex flex-col">
-            {allCardsLoaded && completedSummary ? (
-                <span className="font-medium text-xs sm:text-sm">{completedSummary}</span>
-            ) : streamingLine && (
-                <span className="font-medium text-xs sm:text-sm">{streamingLine}</span>
-            )}
-            <span className="font-medium text-xs sm:text-sm">{appliedCount} applied, {pendingCount} pending</span>
-        </div>
-    );
-
-    const applyAllButton = (
-        <button
-            onClick={handleApplyAll}
-            disabled={allApplied} // Changed to allApplied
-            className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium text-sm transition-colors duration-200
-                ${
-                    allApplied
-                        ? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-400 cursor-not-allowed border border-zinc-200 dark:border-zinc-700 shadow-none'
-                        : 'bg-blue-100 dark:bg-zinc-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-zinc-800 border border-blue-200 dark:border-zinc-800 shadow-sm'
-                }
-            `}
-        >
-            {allApplied ? (
-                <>
-                    <CheckCheckIcon size={16} />
-                    All applied!
-                </>
-            ) : (
-                <>
-                    <CheckCheckIcon size={16} />
-                    Apply all
-                </>
-            )}
-        </button>
-    );
-
     // Utility to filter out divider/empty markdown blocks
     function isNonDividerMarkdown(content: string) {
         const trimmed = content.trim();
@@ -435,9 +374,6 @@ function AssistantMessage({
         );
     }
 
-    // Restore panelOpen state if missing
-    const [panelOpen, setPanelOpen] = useState(false); // collapsed by default
-
     // At the end of the render, call onStatusBarChange with the current status bar props
     // Track the latest status bar info
     const latestStatusBar = useRef<any>(null);
diff --git a/apps/rowboat/app/projects/[projectId]/playground/app.tsx b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
index 5366555b..c9b5978f 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
@@ -7,7 +7,7 @@ import { Chat } from "./components/chat";
 import { Panel } from "@/components/common/panel-common";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@heroui/react";
-import { CheckIcon, CopyIcon, PlusIcon, InfoIcon, BugIcon, BugOffIcon } from "lucide-react";
+import { CheckIcon, CopyIcon, PlusIcon, InfoIcon, BugIcon, BugOffIcon, MessageCircle } from "lucide-react";
 
 export function App({
     hidden = false,
@@ -56,16 +56,11 @@ export function App({
                 className={`${hidden ? 'hidden' : 'block'}`}
                 variant="playground"
                 tourTarget="playground"
-                title={
-                    <div className="flex items-center gap-3">
-                        <div className="flex items-center gap-2">
-                            <div className="font-semibold text-zinc-700 dark:text-zinc-300">
-                                Playground
-                            </div>
-                            <Tooltip content="Test your workflow and chat with your agents in real-time">
-                                <InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />
-                            </Tooltip>
-                        </div>
+                icon={<MessageCircle className="w-5 h-5 text-blue-600 dark:text-blue-400" />}
+                title="Playground"
+                subtitle="Chat with your assistant"
+                rightActions={
+                    <div className="flex items-center gap-2">
                         <Button
                             variant="primary"
                             size="sm"
@@ -90,10 +85,6 @@ export function App({
                                 <BugOffIcon className="w-4 h-4" />
                             )}
                         </Button>
-                    </div>
-                }
-                rightActions={
-                    <div className="flex items-center gap-3">
                         <Button
                             variant="secondary"
                             size="sm"
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx
new file mode 100644
index 00000000..9b5122f9
--- /dev/null
+++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx
@@ -0,0 +1,210 @@
+"use client";
+import React from "react";
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Spinner, Tooltip, Input } from "@heroui/react";
+import { RadioIcon, RedoIcon, UndoIcon, RocketIcon, PenLine, AlertTriangle, DownloadIcon, SettingsIcon, ChevronDownIcon, ZapIcon } from "lucide-react";
+
+interface TopBarProps {
+    localProjectName: string;
+    projectNameError: string | null;
+    onProjectNameChange: (value: string) => void;
+    publishing: boolean;
+    isLive: boolean;
+    showCopySuccess: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    showCopilot: boolean;
+    onUndo: () => void;
+    onRedo: () => void;
+    onDownloadJSON: () => void;
+    onPublishWorkflow: () => void;
+    onChangeMode: (mode: 'draft' | 'live') => void;
+    onRevertToLive: () => void;
+    onToggleCopilot: () => void;
+    onSettingsModalOpen: () => void;
+    onTriggersModalOpen: () => void;
+}
+
+export function TopBar({
+    localProjectName,
+    projectNameError,
+    onProjectNameChange,
+    publishing,
+    isLive,
+    showCopySuccess,
+    canUndo,
+    canRedo,
+    showCopilot,
+    onUndo,
+    onRedo,
+    onDownloadJSON,
+    onPublishWorkflow,
+    onChangeMode,
+    onRevertToLive,
+    onToggleCopilot,
+    onSettingsModalOpen,
+    onTriggersModalOpen,
+}: TopBarProps) {
+    return (
+        <div className="rounded-xl bg-white/70 dark:bg-zinc-800/70 shadow-sm backdrop-blur-sm border border-zinc-200 dark:border-zinc-800 px-5 py-2">
+            <div className="flex justify-between items-center">
+                <div className="workflow-version-selector flex items-center gap-4 px-2 text-gray-800 dark:text-gray-100">
+                    {/* Project Name Editor */}
+                    <div className="flex flex-col min-w-0 max-w-xs">
+                        <Input
+                            type="text"
+                            value={localProjectName}
+                            onChange={(e) => onProjectNameChange(e.target.value)}
+                            isInvalid={!!projectNameError}
+                            errorMessage={projectNameError}
+                            placeholder="Project name..."
+                            variant="bordered"
+                            size="sm"
+                            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"
+                            }}
+                        />
+                    </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>
+                </div>
+                {showCopySuccess && <div className="flex items-center gap-2">
+                    <div className="text-green-500">Copied to clipboard</div>
+                </div>}
+                <div className="flex items-center gap-2">
+                    {isLive && <div className="flex items-center gap-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}
+                            onClick={onUndo}
+                        >
+                            <UndoIcon size={16} />
+                        </button>
+                        <button
+                            className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
+                            title="Redo"
+                            disabled={!canRedo}
+                            onClick={onRedo}
+                        >
+                            <RedoIcon size={16} />
+                        </button>
+                    </>}
+                    
+                    {/* Deploy CTA - always visible */}
+                    <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"
+                            startContent={<RocketIcon size={16} />}
+                            data-tour-target="deploy"
+                        >
+                            Deploy
+                        </Button>
+                        <Dropdown>
+                            <DropdownTrigger>
+                                <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"
+                                >
+                                    <ChevronDownIcon size={14} />
+                                </Button>
+                            </DropdownTrigger>
+                            <DropdownMenu aria-label="Deploy actions">
+                                <DropdownItem
+                                    key="settings"
+                                    startContent={<SettingsIcon size={16} />}
+                                    onPress={onSettingsModalOpen}
+                                >
+                                    API & SDK settings
+                                </DropdownItem>
+                                <DropdownItem
+                                    key="manage-triggers"
+                                    startContent={<ZapIcon size={16} />}
+                                    onPress={onTriggersModalOpen}
+                                >
+                                    Manage triggers
+                                </DropdownItem>
+                                {!isLive ? (
+                                    <>
+                                        <DropdownItem
+                                            key="view-live"
+                                            startContent={<RadioIcon size={16} />}
+                                            onPress={() => onChangeMode('live')}
+                                        >
+                                            View live version
+                                        </DropdownItem>
+                                        <DropdownItem
+                                            key="reset-to-live"
+                                            startContent={<AlertTriangle size={16} />}
+                                            onPress={onRevertToLive}
+                                            className="text-red-600 dark:text-red-400"
+                                        >
+                                            Reset to live version
+                                        </DropdownItem>
+                                    </>
+                                ) : null}
+                            </DropdownMenu>
+                        </Dropdown>
+                    </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"
+                        >
+                            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/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
index b51a6a68..9e8bdf6a 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
@@ -38,6 +38,7 @@ import { InputField } from "@/app/lib/components/input-field";
 import { VoiceSection } from "../config/components/voice";
 import { ChatWidgetSection } from "../config/components/project";
 import { TriggersModal } from "./components/TriggersModal";
+import { TopBar } from "./components/TopBar";
 
 enablePatches();
 
@@ -1221,161 +1222,31 @@ export function WorkflowEditor({
             onSelectTool: handleSelectTool,
             onSelectPrompt: handleSelectPrompt,
         }}>
-            <div className="flex flex-col h-full relative">
-                <div className="shrink-0 flex justify-between items-center pb-6">
-                    <div className="workflow-version-selector flex items-center gap-4 px-2 text-gray-800 dark:text-gray-100">
-                        {/* Project Name Editor */}
-                        <div className="flex flex-col min-w-0 max-w-xs">
-                            <InputField
-                                type="text"
-                                value={localProjectName}
-                                onChange={handleProjectNameChange}
-                                error={projectNameError}
-                                placeholder="Project name..."
-                                className="text-lg font-semibold !min-h-[24px] !py-0.5 !border !border-gray-200 dark:!border-gray-700 !rounded-lg"
-                                inline={true}
-                            />
-                        </div>
-                        
-                        <div className="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
-                        
-                        <div className="flex items-center gap-2">
-                            {state.present.publishing && <Spinner size="sm" />}
-                            {isLive && <div className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2">
-                                <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-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2">
-                                <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={handleDownloadJSON}
-                                    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>
-                    {showCopySuccess && <div className="flex items-center gap-2">
-                        <div className="text-green-500">Copied to clipboard</div>
-                    </div>}
-                    <div className="flex items-center gap-2">
-                        {isLive && <div className="flex items-center gap-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={state.currentIndex <= 0}
-                                onClick={() => dispatch({ type: "undo" })}
-                            >
-                                <UndoIcon size={16} />
-                            </button>
-                            <button
-                                className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
-                                title="Redo"
-                                disabled={state.currentIndex >= state.patches.length}
-                                onClick={() => dispatch({ type: "redo" })}
-                            >
-                                <RedoIcon size={16} />
-                            </button>
-                        </>}
-                        
-                        {/* Deploy CTA - always visible */}
-                        <div className="flex">
-                            <Button
-                                variant="solid"
-                                size="md"
-                                onPress={handlePublishWorkflow}
-                                className="gap-2 px-4 bg-green-600 hover:bg-green-700 text-white font-semibold text-sm rounded-r-none"
-                                startContent={<RocketIcon size={16} />}
-                                data-tour-target="deploy"
-                            >
-                                Deploy
-                            </Button>
-                            <Dropdown>
-                                <DropdownTrigger>
-                                    <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"
-                                    >
-                                        <ChevronDownIcon size={14} />
-                                    </Button>
-                                </DropdownTrigger>
-                                <DropdownMenu aria-label="Deploy actions">
-                                    <DropdownItem
-                                        key="settings"
-                                        startContent={<SettingsIcon size={16} />}
-                                        onPress={onSettingsModalOpen}
-                                    >
-                                        API & SDK settings
-                                    </DropdownItem>
-                                    <DropdownItem
-                                        key="manage-triggers"
-                                        startContent={<ZapIcon size={16} />}
-                                        onPress={onTriggersModalOpen}
-                                    >
-                                        Manage triggers
-                                    </DropdownItem>
-                                    {!isLive ? (
-                                        <>
-                                            <DropdownItem
-                                                key="view-live"
-                                                startContent={<RadioIcon size={16} />}
-                                                onPress={() => onChangeMode('live')}
-                                            >
-                                                View live version
-                                            </DropdownItem>
-                                            <DropdownItem
-                                                key="reset-to-live"
-                                                startContent={<AlertTriangle size={16} />}
-                                                onPress={handleRevertToLive}
-                                                className="text-red-600 dark:text-red-400"
-                                            >
-                                                Reset to live version
-                                            </DropdownItem>
-                                        </>
-                                    ) : null}
-                                </DropdownMenu>
-                            </Dropdown>
-                        </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"
-                            >
-                                Switch to draft
-                            </Button>
-                        </div>}
-                        
-                        {!isLive && <Button
-                            variant="solid"
-                            size="md"
-                            onPress={() => setShowCopilot(!showCopilot)}
-                            className="gap-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm"
-                            startContent={showCopilot ? null : <Sparkles size={16} />}
-                        >
-                            {showCopilot ? "Hide Skipper" : "Skipper"}
-                        </Button>}
-                    </div>
-                </div>
-                <ResizablePanelGroup direction="horizontal" className="grow flex overflow-auto gap-1">
+            <div className="h-full flex flex-col gap-5">
+                {/* Top Bar - Isolated like sidebar */}
+                <TopBar
+                    localProjectName={localProjectName}
+                    projectNameError={projectNameError}
+                    onProjectNameChange={handleProjectNameChange}
+                    publishing={state.present.publishing}
+                    isLive={isLive}
+                    showCopySuccess={showCopySuccess}
+                    canUndo={state.currentIndex > 0}
+                    canRedo={state.currentIndex < state.patches.length}
+                    showCopilot={showCopilot}
+                    onUndo={() => dispatch({ type: "undo" })}
+                    onRedo={() => dispatch({ type: "redo" })}
+                    onDownloadJSON={handleDownloadJSON}
+                    onPublishWorkflow={handlePublishWorkflow}
+                    onChangeMode={onChangeMode}
+                    onRevertToLive={handleRevertToLive}
+                    onToggleCopilot={() => setShowCopilot(!showCopilot)}
+                    onSettingsModalOpen={onSettingsModalOpen}
+                    onTriggersModalOpen={onTriggersModalOpen}
+                />
+                
+                {/* 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}>
                         <div className="flex flex-col h-full">
                             <EntityList
diff --git a/apps/rowboat/app/projects/layout/components/app-layout.tsx b/apps/rowboat/app/projects/layout/components/app-layout.tsx
index 5bc6e25d..e03e51a9 100644
--- a/apps/rowboat/app/projects/layout/components/app-layout.tsx
+++ b/apps/rowboat/app/projects/layout/components/app-layout.tsx
@@ -42,7 +42,7 @@ export default function AppLayout({ children, useAuth = false, useBilling = fals
   return (
     <div className="h-screen flex gap-5 p-5 bg-zinc-50 dark:bg-zinc-900">
       {/* Sidebar with improved shadow and blur */}
-      <div className="overflow-hidden rounded-xl bg-white/70 dark:bg-zinc-800/70 shadow-sm backdrop-blur-sm">
+      <div className="h-full overflow-hidden rounded-xl bg-white/70 dark:bg-zinc-800/70 shadow-sm backdrop-blur-sm">
         <Sidebar 
           projectId={projectId ?? undefined} 
           useAuth={useAuth}
@@ -53,8 +53,8 @@ export default function AppLayout({ children, useAuth = false, useBilling = fals
       </div>
       
       {/* Main content area */}
-      <main className="flex gap-2 flex-col flex-1 overflow-auto rounded-xl bg-white dark:bg-zinc-800 shadow-sm p-4">
-        {billingPastDue && <div className="shrink-0">
+      <main className="flex-1 h-full overflow-auto">
+        {billingPastDue && <div className="shrink-0 mb-2">
           <div className="bg-red-50 text-red-500 px-2 py-1 text-sm rounded-md flex items-center gap-2">
             <span>Your subscription is past due. Please update your payment information to avoid losing access to your projects.</span>
             <Button
@@ -68,9 +68,7 @@ export default function AppLayout({ children, useAuth = false, useBilling = fals
             </Button>
           </div>
         </div>}
-        <div className="flex-1 overflow-auto">
-          {children}
-        </div>
+        {children}
       </main>
     </div>
   );
diff --git a/apps/rowboat/components/common/compose-box-copilot.tsx b/apps/rowboat/components/common/compose-box-copilot.tsx
index eb6c6f5e..31e49563 100644
--- a/apps/rowboat/components/common/compose-box-copilot.tsx
+++ b/apps/rowboat/components/common/compose-box-copilot.tsx
@@ -100,13 +100,12 @@ export function ComposeBoxCopilot({
                         disabled={loading}
                         placeholder="Type a message..."
                         autoResize={true}
-                        maxHeight={120}
+                        maxHeight={200}
                         className={`
-                            min-h-0!
+                            min-h-6
                             border-0! shadow-none! ring-0!
                             bg-transparent
                             resize-none
-                            overflow-y-auto
                             [&::-webkit-scrollbar]:w-1
                             [&::-webkit-scrollbar-track]:bg-transparent
                             [&::-webkit-scrollbar-thumb]:bg-gray-300
@@ -294,7 +293,7 @@ function CopilotStatusBar({
         );
     };
     return (
-        <div className="w-auto max-w-[calc(100%-16px)] mx-auto flex items-center px-3 py-1 pt-2.5 pb-5 mt-2 -mb-3 rounded-xl bg-zinc-50 dark:bg-zinc-900/90 border border-zinc-300 dark:border-zinc-700 shadow-md dark:shadow-zinc-950/10 backdrop-blur-sm transition-all z-0 relative mx-2 overflow-visible">
+        <div className="w-auto max-w-[calc(100%-16px)] mx-auto flex items-center px-3 py-1 pt-2.5 pb-5 mt-2 -mb-3 rounded-xl bg-white/90 dark:bg-zinc-800/90 border border-zinc-300 dark:border-zinc-700 shadow-md dark:shadow-zinc-950/10 backdrop-blur-sm transition-all z-0 relative mx-2 overflow-visible">
             {/* Left: context + status/ticker, flex-1, truncate as needed */}
             <div className="flex items-center gap-2 flex-1 min-w-0 overflow-visible">
                 {renderContext()}
diff --git a/apps/rowboat/components/common/panel-common.tsx b/apps/rowboat/components/common/panel-common.tsx
index 435bb5e3..87228150 100644
--- a/apps/rowboat/components/common/panel-common.tsx
+++ b/apps/rowboat/components/common/panel-common.tsx
@@ -33,6 +33,8 @@ export function ActionButton({
 
 interface PanelProps {
     title: React.ReactNode;
+    subtitle?: string;
+    icon?: React.ReactNode;
     rightActions?: React.ReactNode;
     actions?: React.ReactNode;
     children: React.ReactNode;
@@ -47,6 +49,8 @@ interface PanelProps {
 
 export function Panel({
     title,
+    subtitle,
+    icon,
     rightActions,
     actions,
     children,
@@ -65,8 +69,8 @@ export function Panel({
             "flex flex-col rounded-xl border relative w-full",
             // Only apply overflow-hidden if no custom overflow is set (for backward compatibility)
             overflow ? undefined : "overflow-hidden",
-            variant === 'copilot' ? "border-blue-200 dark:border-blue-800" : "border-zinc-200 dark:border-zinc-800",
-            "bg-white dark:bg-zinc-900",
+            variant === 'copilot' ? "border-transparent" : "border-zinc-200 dark:border-zinc-800",
+            variant === 'copilot' ? "bg-zinc-50 dark:bg-zinc-900" : "bg-white dark:bg-zinc-900",
             maxHeight ? "max-h-(--panel-height)" : "h-full",
             className
         )}
@@ -93,7 +97,8 @@ export function Panel({
         )}
         <div 
             className={clsx(
-                "shrink-0 border-b border-zinc-100 dark:border-zinc-800 relative",
+                "shrink-0 border-b relative",
+                variant === 'copilot' ? "border-zinc-300 dark:border-zinc-700" : "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,
@@ -113,7 +118,34 @@ export function Panel({
             ) : variant === 'copilot' ? (
                 <>
                     <div className="flex items-center gap-2">
-                        {title}
+                        {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}
+                </>
+            ) : variant === 'playground' ? (
+                <>
+                    <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}
                 </>
diff --git a/apps/rowboat/components/ui/textarea.tsx b/apps/rowboat/components/ui/textarea.tsx
index 83df5fea..e3ac1390 100644
--- a/apps/rowboat/components/ui/textarea.tsx
+++ b/apps/rowboat/components/ui/textarea.tsx
@@ -47,7 +47,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({
     }
   }, [propValue, isEditing]);
 
-  /*
   useEffect(() => {
     if (!autoResize) return;
     
@@ -69,7 +68,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({
     window.addEventListener('resize', adjustHeight);
     return () => window.removeEventListener('resize', adjustHeight);
   }, [localValue, autoResize, maxHeight, textareaRef]);
-  */
 
   const validateAndUpdate = (value: string) => {
     if (validate) {