feat: new onboarding tutorial step (#1185)

### TL;DR

Added an interactive tutorial step to the onboarding flow with guided tour highlighting, animated hedgehog assistant, and updated app icons.

### What changed?

- **New Tutorial Components**: Added `TutorialStep`, `TutorialHedgehog`, and `TourHighlight` components to create an interactive guided experience
- **Tutorial Tour Logic**: Implemented `useTutorialTour` hook to manage step progression through repo selection, workspace mode, model selection, execution mode cycling, prompt auto-fill, and task submission
- **Enhanced Onboarding Flow**: Integrated tutorial as the final onboarding step with seamless hedgehog animation transitions using Framer Motion's `LayoutGroup`
- **Tour Highlighting System**: Added spotlight effects to UI components during tutorial with dimming for inactive elements
- **App Icon Updates**: Refreshed app icons across formats (ICNS, ICO, PNG) and reorganized icon assets with new JSON configuration
- **Build Script Updates**: Modified icon generation to use `app-icon.png` instead of `icon@3x.png` as source
- **Component Enhancements**: Added tour highlighting support to `TaskInputEditor`, model change callbacks to `UnifiedModelSelector`, and workspace mode overrides to `WorkspaceModeSelect`
- **Prompt Generation**: Created utility to generate PostHog instrumentation prompts based on selected signal sources

Author: k11kirky

apps/code/build/app-icon.icns

@@ -0,0 +1,32 @@
+{
+  "fill": {
+    "automatic-gradient": "display-p3:0.00000,0.00000,0.00000,1.00000"
+  },
+  "groups": [
+    {
+      "layers": [
+        {
+          "fill": "none",
+          "image-name": "icon.png",
+          "name": "icon",
+          "position": {
+            "scale": 0.4,
+            "translation-in-points": [3, 3]
+          }
+        }
+      ],
+      "shadow": {
+        "kind": "neutral",
+        "opacity": 0.5
+      },
+      "translucency": {
+        "enabled": true,
+        "value": 0.5
+      }
+    }
+  ],
+  "supported-platforms": {
+    "circles": ["watchOS"],
+    "squares": "shared"
+  }
+}

apps/code/build/app-icon.ico

@@ -187,7 +187,7 @@ const config: ForgeConfig = {
     generateAssets: async () => {
       // Generate ICNS from source PNG (skip if already exists)
       if (
-        existsSync("build/icon@3x.png") &&
+        existsSync("build/app-icon.png") &&
         !existsSync("build/app-icon.icns")
       ) {
         execSync("bash scripts/generate-icns.sh", { stdio: "inherit" });

apps/code/build/app-icon.png

@@ -6,7 +6,7 @@
 
 set -e
 
-SOURCE_PNG="${1:-build/icon@3x.png}"
+SOURCE_PNG="${1:-build/app-icon.png}"
 OUTPUT_ICNS="${2:-build/app-icon.icns}"
 ICONSET_DIR=$(mktemp -d)/icon.iconset
 

apps/code/build/icon.png apps/code/build/icon.icon/Assets/icon.pngapps/code/build/icon.png renamed to apps/code/build/icon.icon/Assets/icon.png

@@ -0,0 +1,68 @@
+import { motion } from "framer-motion";
+
+interface TourHighlightProps {
+  active: boolean;
+  children: React.ReactNode;
+  borderRadius?: string;
+  /** Set true for elements that should stretch to fill their container (e.g. editor) */
+  fullWidth?: boolean;
+  /** When true and not active, dim to show it's not the focus of attention */
+  dimWhenInactive?: boolean;
+  /**
+   * Keep opacity at 1 without triggering the glow — use when a child component
+   * is highlighted so this wrapper doesn't dim it via CSS opacity inheritance.
+   */
+  opaque?: boolean;
+}
+
+export function TourHighlight({
+  active,
+  children,
+  borderRadius = "var(--radius-2)",
+  fullWidth,
+  dimWhenInactive,
+  opaque,
+}: TourHighlightProps) {
+  const targetOpacity = active || opaque ? 1 : dimWhenInactive ? 0.35 : 1;
+
+  return (
+    <motion.div
+      style={{
+        borderRadius,
+        display: fullWidth ? "flex" : "inline-flex",
+        width: fullWidth ? "100%" : undefined,
+        position: "relative",
+        overflow: "visible",
+      }}
+      animate={
+        active
+          ? {
+              boxShadow: [
+                "0 0 0 1.5px var(--accent-a8), 0 0 8px 2px var(--accent-a5)",
+                "0 0 0 1.5px var(--accent-a9), 0 0 12px 4px var(--accent-a6)",
+                "0 0 0 1.5px var(--accent-a8), 0 0 8px 2px var(--accent-a5)",
+              ],
+              opacity: 1,
+            }
+          : {
+              boxShadow: "0 0 0 0px transparent",
+              opacity: targetOpacity,
+            }
+      }
+      transition={
+        active
+          ? {
+              boxShadow: {
+                duration: 3,
+                repeat: Number.POSITIVE_INFINITY,
+                ease: "easeInOut",
+              },
+              opacity: { duration: 0.3 },
+            }
+          : { duration: 0.3 }
+      }
+    >
+      {children}
+    </motion.div>
+  );
+}