Speed up recipe loading from deeplinks and various fixes (#3662)

ui/desktop/src/components/BaseChat.tsx

@@ -48,7 +48,7 @@ import { SearchView } from './conversation/SearchView';
 import { AgentHeader } from './AgentHeader';
 import LayingEggLoader from './LayingEggLoader';
 import LoadingGoose from './LoadingGoose';
-import Splash from './Splash';
+import RecipeActivities from './RecipeActivities';
 import PopularChatTopics from './PopularChatTopics';
 import ProgressiveMessageList from './ProgressiveMessageList';
 import { SessionSummaryModal } from './context_management/SessionSummaryModal';
@@ -366,7 +366,7 @@ function BaseChatContent({
             {/* Custom content before messages */}
             {renderBeforeMessages && renderBeforeMessages()}
 
-            {/* Messages or Splash or Popular Topics */}
+            {/* Messages or RecipeActivities or Popular Topics */}
             {
               // Check if we should show splash instead of messages
               (() => {
@@ -377,9 +377,9 @@ function BaseChatContent({
                 return shouldShowSplash;
               })() ? (
                 <>
-                  {/* Show Splash when we have a recipe config and user hasn't started using it */}
+                  {/* Show RecipeActivities when we have a recipe config and user hasn't started using it */}
                   {recipeConfig ? (
-                    <Splash
+                    <RecipeActivities
                       append={(text: string) => appendWithTracking(text)}
                       activities={
                         Array.isArray(recipeConfig.activities) ? recipeConfig.activities : null

ui/desktop/src/components/RecipeActivities.tsx

@@ -1,18 +1,18 @@
 import { Card } from './ui/card';
 import { gsap } from 'gsap';
-import { Greeting } from './common/Greeting';
 import GooseLogo from './GooseLogo';
+import MarkdownContent from './MarkdownContent';
 
 // Register GSAP plugins
 gsap.registerPlugin();
 
-interface SplashProps {
+interface RecipeActivitiesProps {
   append: (text: string) => void;
   activities: string[] | null;
   title?: string;
 }
 
-export default function Splash({ append, activities, title }: SplashProps) {
+export default function RecipeActivities({ append, activities }: RecipeActivitiesProps) {
   const pills = activities || [];
 
   // Find any pill that starts with "message:"
@@ -25,7 +25,7 @@ export default function Splash({ append, activities, title }: SplashProps) {
       ? [...pills.slice(0, messagePillIndex), ...pills.slice(messagePillIndex + 1)]
       : pills;
 
-  // If we have activities (recipe mode), show a simplified version without greeting
+  // If we have activities or instructions (recipe mode), show a simplified version without greeting
   if (activities && activities.length > 0) {
     return (
       <div className="flex flex-col px-6">
@@ -36,7 +36,10 @@ export default function Splash({ append, activities, title }: SplashProps) {
 
         {messagePill && (
           <div className="mb-4 p-3 rounded-lg border animate-[fadein_500ms_ease-in_forwards]">
-            {messagePill.replace(/^message:/i, '').trim()}
+            <MarkdownContent
+              content={messagePill.replace(/^message:/i, '').trim()}
+              className="text-sm"
+            />
           </div>
         )}
 
@@ -56,23 +59,5 @@ export default function Splash({ append, activities, title }: SplashProps) {
     );
   }
 
-  // Default splash screen (no recipe) - show greeting and title if provided
-  return (
-    <div className="flex flex-col">
-      {title && (
-        <div className="flex items-center px-4 py-2 mb-4">
-          <span className="w-2 h-2 rounded-full bg-blockTeal mr-2" />
-          <span className="text-sm">
-            <span className="text-text-muted">Agent</span>{' '}
-            <span className="text-text-default">{title}</span>
-          </span>
-        </div>
-      )}
-
-      {/* Compact greeting section */}
-      <div className="flex flex-col px-6 mb-0">
-        <Greeting className="text-text-prominent text-4xl font-light mb-2" />
-      </div>
-    </div>
-  );
+  return null;
 }

ui/desktop/src/components/RecipeActivityEditor.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Button } from './ui/button';
 
 export default function RecipeActivityEditor({
@@ -9,6 +9,23 @@ export default function RecipeActivityEditor({
   setActivities: (prev: string[]) => void;
 }) {
   const [newActivity, setNewActivity] = useState('');
+  const [messageContent, setMessageContent] = useState('');
+
+  // Extract message content from activities on component mount and when activities change
+  useEffect(() => {
+    const messageActivity = activities.find((activity) =>
+      activity.toLowerCase().startsWith('message:')
+    );
+    if (messageActivity) {
+      setMessageContent(messageActivity.replace(/^message:/i, '').trim());
+    }
+  }, [activities]);
+
+  // Get activities that are not messages
+  const nonMessageActivities = activities.filter(
+    (activity) => !activity.toLowerCase().startsWith('message:')
+  );
+
   const handleAddActivity = () => {
     if (newActivity.trim()) {
       setActivities([...activities, newActivity.trim()]);
@@ -19,17 +36,63 @@ export default function RecipeActivityEditor({
   const handleRemoveActivity = (activity: string) => {
     setActivities(activities.filter((a) => a !== activity));
   };
+
+  const handleMessageChange = (value: string) => {
+    setMessageContent(value);
+
+    // Update activities array - remove existing message and add new one if not empty
+    const otherActivities = activities.filter(
+      (activity) => !activity.toLowerCase().startsWith('message:')
+    );
+
+    if (value.trim()) {
+      setActivities([`message:${value}`, ...otherActivities]);
+    } else {
+      setActivities(otherActivities);
+    }
+  };
+
   return (
     <div>
       <label htmlFor="activities" className="block text-md text-textProminent mb-2 font-bold">
         Activities
       </label>
-      <p className="text-textSubtle space-y-2 pb-2">
+      <p className="text-textSubtle space-y-2 pb-4">
         The top-line prompts and activities that will display within your goose home page.
       </p>
+
+      {/* Message Field */}
+      <div className="mb-6">
+        <label htmlFor="message" className="block text-sm font-medium text-textStandard mb-2">
+          Message (Optional)
+        </label>
+        <p className="text-xs text-textSubtle mb-2">
+          A formatted message that will appear at the top of the recipe. Supports markdown
+          formatting.
+        </p>
+        <textarea
+          id="message"
+          value={messageContent}
+          onChange={(e) => handleMessageChange(e.target.value)}
+          className="w-full px-4 py-3 border rounded-lg bg-background-default text-textStandard placeholder-textPlaceholder focus:outline-none focus:ring-2 focus:ring-borderProminent resize-vertical"
+          placeholder="Enter a message for your recipe (supports **bold**, *italic*, `code`, etc.)"
+          rows={3}
+        />
+      </div>
+
+      {/* Regular Activities */}
       <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-textStandard mb-2">
+            Activity Buttons
+          </label>
+          <p className="text-xs text-textSubtle mb-3">
+            Clickable buttons that will appear below the message.
+          </p>
+        </div>
+
         <div className="flex flex-wrap gap-3">
-          {activities.map((activity, index) => (
+          {nonMessageActivities.map((activity, index) => (
             <div
               key={index}
               className="inline-flex items-center bg-background-default border-2 border-borderSubtle rounded-full px-4 py-2 text-sm text-textStandard"

ui/desktop/src/components/ui/RecipeWarningModal.tsx

@@ -7,6 +7,7 @@ import {
   DialogTitle,
 } from './dialog';
 import { Button } from './button';
+import MarkdownContent from '../MarkdownContent';
 
 interface RecipeWarningModalProps {
   isOpen: boolean;
@@ -27,8 +28,8 @@ export function RecipeWarningModal({
 }: RecipeWarningModalProps) {
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
-      <DialogContent className="sm:max-w-[600px]">
-        <DialogHeader>
+      <DialogContent className="sm:max-w-[80vw] max-h-[80vh] flex flex-col p-0">
+        <DialogHeader className="flex-shrink-0 p-6 pb-0">
           <DialogTitle>⚠️ New Recipe Warning</DialogTitle>
           <DialogDescription>
             You are about to execute a recipe that you haven't run before. Only proceed if you trust
@@ -36,10 +37,10 @@ export function RecipeWarningModal({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
+        <div className="flex-1 overflow-y-auto p-6 pt-4">
           <div className="bg-background-muted p-4 rounded-lg">
-            <h3 className="font-medium mb-2 text-text-standard">Recipe Details:</h3>
-            <div className="space-y-2 text-sm">
+            <h3 className="font-medium mb-3 text-text-standard">Recipe Preview:</h3>
+            <div className="space-y-4">
               {recipeDetails.title && (
                 <p className="text-text-standard">
                   <strong>Title:</strong> {recipeDetails.title}
@@ -51,15 +52,16 @@ export function RecipeWarningModal({
                 </p>
               )}
               {recipeDetails.instructions && (
-                <p className="text-text-standard">
-                  <strong>Instructions:</strong> {recipeDetails.instructions}
-                </p>
+                <div>
+                  <h4 className="font-medium text-text-standard mb-1">Instructions:</h4>
+                  <MarkdownContent content={recipeDetails.instructions} className="text-sm" />
+                </div>
               )}
             </div>
           </div>
         </div>
 
-        <DialogFooter>
+        <DialogFooter className="flex-shrink-0 p-6 pt-0">
           <Button variant="outline" onClick={onCancel}>
             Cancel
           </Button>