Add tooltips and change section headings

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

@@ -98,7 +98,10 @@ export function App({
     }
 
     return (
-        <Pane title="Chat" actions={[
+        <Pane 
+            title="PLAYGROUND" 
+            tooltip="Test your agents and see their responses in this interactive chat interface"
+            actions={[
                 <ActionButton
                     key="new-chat"
                     icon={<MessageSquarePlusIcon size={16} />}
@@ -113,7 +116,8 @@ export function App({
                 >
                     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,7 +529,11 @@ export function Copilot({
     setResponseError: (error: string | null) => void;
 }) {
     return (
-        <Pane fancy title="Copilot" actions={[
+        <Pane 
+            fancy 
+            title="COPILOT" 
+            tooltip="Get AI assistance for creating and improving your multi-agent system"
+            actions={[
                 <ActionButton
                     key="ask"
                     primary
@@ -542,7 +546,8 @@ export function Copilot({
                 >
                     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,27 +1,45 @@
 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="flex items-center gap-1">
                 <div className={clsx("text-xs font-semibold uppercase", {
                     "text-gray-400": !fancy,
                     "text-blue-500": fancy,
                 })}>
                     {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", {
                 "text-blue-600": fancy,

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)}
                     >