add help mode

src/components/experiments/designer/DesignerRoot.tsx

@@ -8,10 +8,11 @@ import React, {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { Play, RefreshCw } from "lucide-react";
+import { Play, RefreshCw, HelpCircle } from "lucide-react";
 
 import { cn } from "~/lib/utils";
 import { PageHeader } from "~/components/ui/page-header";
+import { useTour } from "~/components/onboarding/TourProvider";
 
 import { Button } from "~/components/ui/button";
 import { api } from "~/trpc/react";
@@ -151,6 +152,8 @@ export function DesignerRoot({
   autoCompile = true,
   onPersist,
 }: DesignerRootProps) {
+  const { startTour } = useTour();
+
   /* ----------------------------- Remote Experiment ------------------------- */
   const {
     data: experiment,
@@ -899,18 +902,25 @@ export function DesignerRoot({
   /* ------------------------------- Panels ---------------------------------- */
   const leftPanel = useMemo(
     () => (
-      <div ref={libraryRootRef} data-library-root className="h-full">
+      <div id="tour-designer-blocks" ref={libraryRootRef} data-library-root className="h-full">
         <ActionLibraryPanel />
       </div>
     ),
     [],
   );
 
-  const centerPanel = useMemo(() => <FlowWorkspace />, []);
+  const centerPanel = useMemo(
+    () => (
+      <div id="tour-designer-canvas" className="h-full">
+        <FlowWorkspace />
+      </div>
+    ),
+    [],
+  );
 
   const rightPanel = useMemo(
     () => (
-      <div className="h-full">
+      <div id="tour-designer-properties" className="h-full">
         <InspectorPanel
           activeTab={inspectorTab}
           onTabChange={setInspectorTab}
@@ -932,6 +942,14 @@ export function DesignerRoot({
 
   const actions = (
     <div className="flex flex-wrap items-center gap-2">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => startTour("designer")}
+        title="Start Tour"
+      >
+        <HelpCircle className="h-5 w-5" />
+      </Button>
       <Button
         size="sm"
         variant="default"

src/components/experiments/designer/PropertiesPanel.tsx

@@ -203,7 +203,7 @@ export function PropertiesPanelBase({
         : Zap;
 
     return (
-      <div className={cn("w-full min-w-0 space-y-3 px-3", className)}>
+      <div className={cn("w-full min-w-0 space-y-3 px-3", className)} id="tour-designer-properties">
         {/* Header / Metadata */}
         <div className="border-b pb-3">
           <div className="mb-2 flex items-center gap-2">
@@ -312,7 +312,7 @@ export function PropertiesPanelBase({
   /* --------------------------- Step Properties View --------------------------- */
   if (selectedStep) {
     return (
-      <div className={cn("w-full min-w-0 space-y-3 px-3", className)}>
+      <div className={cn("w-full min-w-0 space-y-3 px-3", className)} id="tour-designer-properties">
         <div className="border-b pb-2">
           <h3 className="flex items-center gap-2 text-sm font-medium">
             <div
@@ -439,6 +439,7 @@ export function PropertiesPanelBase({
         "flex h-24 items-center justify-center text-center",
         className,
       )}
+      id="tour-designer-properties"
     >
       <div>
         <Settings className="text-muted-foreground/50 mx-auto mb-2 h-6 w-6" />

src/components/experiments/designer/flow/FlowWorkspace.tsx

@@ -955,6 +955,7 @@ export function FlowWorkspace({
 
       <div
         ref={containerRef}
+        id="tour-designer-canvas"
         className="relative h-0 min-h-0 flex-1 overflow-x-hidden overflow-y-auto"
         onScroll={onScroll}
       >

src/components/experiments/designer/panels/ActionLibraryPanel.tsx

@@ -333,7 +333,7 @@ export function ActionLibraryPanel() {
   ).length;
 
   return (
-    <div className="flex h-full flex-col overflow-hidden">
+    <div className="flex h-full flex-col overflow-hidden" id="tour-designer-blocks">
       <div className="bg-background/60 flex-shrink-0 border-b p-2">
         <div className="relative mb-2">
           <Search className="text-muted-foreground absolute top-1/2 left-2 h-3.5 w-3.5 -translate-y-1/2" />