Add tooltips and change section headings

apps/rowboat/app/projects/[projectId]/playground/app.tsx

@@ -98,22 +98,26 @@ export function App({
     }
 
     return (
-        <Pane title="Chat" actions={[
+        <Pane 
-            <ActionButton
+            title="PLAYGROUND" 
-                key="new-chat"
+            tooltip="Test your agents and see their responses in this interactive chat interface"
-                icon={<MessageSquarePlusIcon size={16} />}
+            actions={[
-                onClick={handleNewChatButtonClick}
+                <ActionButton
-            >
+                    key="new-chat"
-                New chat
+                    icon={<MessageSquarePlusIcon size={16} />}
-            </ActionButton>,
+                    onClick={handleNewChatButtonClick}
-            <ActionButton
+                >
-                key="simulate"
+                    New chat
-                icon={<PlayIcon size={16} />}
+                </ActionButton>,
-                onClick={handleSimulateButtonClick}
+                <ActionButton
-            >
+                    key="simulate"
-                Simulate
+                    icon={<PlayIcon size={16} />}
-            </ActionButton>,
+                    onClick={handleSimulateButtonClick}
-        ]}>
+                >
+                    Simulate
+                </ActionButton>,
+            ]}
+        >
             <div className="h-full overflow-auto">
                 {loadingChat && <div className="flex justify-center items-center h-full">
                     <Spinner />

apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx

@@ -529,20 +529,25 @@ export function Copilot({
     setResponseError: (error: string | null) => void;
 }) {
     return (
-        <Pane fancy title="Copilot" actions={[
+        <Pane 
-            <ActionButton
+            fancy 
-                key="ask"
+            title="COPILOT" 
-                primary
+            tooltip="Get AI assistance for creating and improving your multi-agent system"
-                icon={
+            actions={[
-                    <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <ActionButton
-                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 12h14m-7 7V5" />
+                    key="ask"
-                    </svg>
+                    primary
-                }
+                    icon={
-                onClick={onNewChat}
+                        <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-            >
+                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 12h14m-7 7V5" />
-                New
+                        </svg>
-            </ActionButton>
+                    }
-        ]}>
+                    onClick={onNewChat}
+                >
+                    New
+                </ActionButton>
+            ]}
+        >
             <App
                 projectId={projectId}
                 workflow={workflow}

apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx

@@ -105,7 +105,10 @@ export function EntityList({
     }, [selectedEntity]);
 
     return (
-        <Pane title="Index">
+        <Pane 
+            title="WORKFLOW" 
+            tooltip="Browse and manage your agents, tools, and prompts in this sidebar"
+        >
             <div className="overflow-auto flex flex-col gap-1 justify-start">
                 {/* Agents Section */}
                 <SectionHeader title="Agents" onAdd={() => onAddAgent({})} />

apps/rowboat/app/projects/[projectId]/workflow/pane.tsx

@@ -1,26 +1,44 @@
 import clsx from "clsx";
+import { InfoIcon } from "lucide-react";
+import { Tooltip } from "@nextui-org/react";
 
 export function Pane({
     title,
     actions = null,
     children,
     fancy = false,
+    tooltip = null,
 }: {
     title: React.ReactNode;
     actions?: React.ReactNode[] | null;
     children: React.ReactNode;
     fancy?: boolean;
+    tooltip?: string | null;
 }) {
     return <div className={clsx("h-full flex flex-col overflow-auto rounded-md p-1", {
         "bg-gray-100": !fancy,
         "bg-blue-100": fancy,
     })}>
         <div className="shrink-0 flex justify-between items-center gap-2 px-2 py-1 rounded-t-sm">
-            <div className={clsx("text-xs font-semibold uppercase", {
+            <div className="flex items-center gap-1">
-                "text-gray-400": !fancy,
+                <div className={clsx("text-xs font-semibold uppercase", {
-                "text-blue-500": fancy,
+                    "text-gray-400": !fancy,
-            })}>
+                    "text-blue-500": fancy,
-                {title}
+                })}>
+                    {title}
+                </div>
+                {tooltip && (
+                    <Tooltip 
+                        content={tooltip}
+                        placement="right"
+                        className="cursor-help"
+                    >
+                        <InfoIcon size={12} className={clsx({
+                            "text-gray-400": !fancy,
+                            "text-blue-500": fancy,
+                        })} />
+                    </Tooltip>
+                )}
             </div>
             {!actions && <div className="w-4 h-4" />}
             {actions && <div className={clsx("rounded-md hover:text-gray-800 px-2 text-sm flex items-center gap-2", {

apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx

@@ -29,6 +29,8 @@ import { BackIcon, HamburgerIcon, WorkflowIcon } from "../../../lib/components/i
 import { CopyIcon, Layers2Icon, RadioIcon, RedoIcon, Sparkles, UndoIcon } from "lucide-react";
 import { EntityList } from "./entity_list";
 import { CopilotMessage } from "../../../lib/types/copilot_types";
+import { InfoIcon } from "lucide-react";
+import { clsx } from "clsx";
 
 enablePatches();
 
@@ -760,7 +762,7 @@ export function WorkflowEditor({
                 </div>}
                 {!isLive && <>
                     <button
-                        className="p-1 text-gray-400 hover:text-black"
+                        className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
                         title="Undo"
                         disabled={state.currentIndex <= 0}
                         onClick={() => dispatch({ type: "undo" })}
@@ -768,7 +770,7 @@ export function WorkflowEditor({
                         <UndoIcon size={16} />
                     </button>
                     <button
-                        className="p-1 text-gray-400 hover:text-black"
+                        className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
                         title="Redo"
                         disabled={state.currentIndex >= state.patches.length}
                         onClick={() => dispatch({ type: "redo" })}
@@ -776,7 +778,7 @@ export function WorkflowEditor({
                         <RedoIcon size={16} />
                     </button>
                     <button
-                        className="p-1 text-blue-600 hover:text-blue-800"
+                        className="p-1 text-blue-600 hover:text-blue-800 hover:cursor-pointer"
                         title="Toggle Copilot"
                         onClick={() => setShowCopilot(!showCopilot)}
                     >