diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx
index b4fd59bd4..3a2bc8ddb 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx
@@ -55,5 +55,5 @@ export default function FeatureLayout({ children, params }: Props) {
     }
   }, [children, codeFiles, readme, view])
 
-  return <div className="bg-white rounded-lg overflow-hidden w-full h-full">{content}</div>;
+  return <div className="bg-white rounded-lg w-full h-full">{content}</div>;
 }
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/shared_state/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/shared_state/page.tsx
index dc5814953..6c4068c03 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/shared_state/page.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/shared_state/page.tsx
@@ -213,6 +213,7 @@ const INITIAL_STATE: RecipeAgentState = {
 };
 
 function Recipe() {
+  const { isMobile } = useMobileView();
   const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({
     name: "shared_state",
     initialState: INITIAL_STATE,
@@ -368,6 +369,7 @@ function Recipe() {
   return (
     <form 
     data-testid="recipe-card"
+    style={isMobile ? { marginBottom: "100px" } : {}}
     className="recipe-card">
       {/* Recipe Title */}
       <div className="recipe-header">
diff --git a/typescript-sdk/apps/dojo/src/files.json b/typescript-sdk/apps/dojo/src/files.json
index 3065bb788..6b3ecd8d0 100644
--- a/typescript-sdk/apps/dojo/src/files.json
+++ b/typescript-sdk/apps/dojo/src/files.json
@@ -132,7 +132,7 @@
   "pydantic-ai::shared_state": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { isMobile } = useMobileView();\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    style={isMobile ? { marginBottom: \"100px\" } : {}}\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -314,7 +314,7 @@
   "server-starter-all-features::shared_state": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { isMobile } = useMobileView();\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    style={isMobile ? { marginBottom: \"100px\" } : {}}\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -520,7 +520,7 @@
   "langgraph::shared_state": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { isMobile } = useMobileView();\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    style={isMobile ? { marginBottom: \"100px\" } : {}}\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -715,7 +715,7 @@
   "langgraph-fastapi::shared_state": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { isMobile } = useMobileView();\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    style={isMobile ? { marginBottom: \"100px\" } : {}}\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -921,7 +921,7 @@
   "langgraph-typescript::shared_state": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { isMobile } = useMobileView();\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    style={isMobile ? { marginBottom: \"100px\" } : {}}\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -1103,7 +1103,7 @@
   "llama-index::shared_state": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { isMobile } = useMobileView();\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    style={isMobile ? { marginBottom: \"100px\" } : {}}\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -1233,7 +1233,7 @@
   "crewai::shared_state": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCoAgent, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface SharedStateProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function SharedState({ params }: SharedStateProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'AI Recipe Assistant'\n  const chatDescription = 'Ask me to craft recipes'\n  const initialLabel = 'Hi 👋 How can I help with your recipe?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"shared_state\"\n    >\n      <div\n        className=\"min-h-screen w-full flex items-center justify-center\"\n        style={\n          {\n            backgroundImage: \"url('/shared_state_background.png')\",\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            backgroundRepeat: \"no-repeat\",\n          } as React.CSSProperties\n        }\n      >\n        <Recipe />\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nenum SkillLevel {\n  BEGINNER = \"Beginner\",\n  INTERMEDIATE = \"Intermediate\",\n  ADVANCED = \"Advanced\",\n}\n\nenum CookingTime {\n  FiveMin = \"5 min\",\n  FifteenMin = \"15 min\",\n  ThirtyMin = \"30 min\",\n  FortyFiveMin = \"45 min\",\n  SixtyPlusMin = \"60+ min\",\n}\n\nconst cookingTimeValues = [\n  { label: CookingTime.FiveMin, value: 0 },\n  { label: CookingTime.FifteenMin, value: 1 },\n  { label: CookingTime.ThirtyMin, value: 2 },\n  { label: CookingTime.FortyFiveMin, value: 3 },\n  { label: CookingTime.SixtyPlusMin, value: 4 },\n];\n\nenum SpecialPreferences {\n  HighProtein = \"High Protein\",\n  LowCarb = \"Low Carb\",\n  Spicy = \"Spicy\",\n  BudgetFriendly = \"Budget-Friendly\",\n  OnePotMeal = \"One-Pot Meal\",\n  Vegetarian = \"Vegetarian\",\n  Vegan = \"Vegan\",\n}\n\ninterface Ingredient {\n  icon: string;\n  name: string;\n  amount: string;\n}\n\ninterface Recipe {\n  title: string;\n  skill_level: SkillLevel;\n  cooking_time: CookingTime;\n  special_preferences: string[];\n  ingredients: Ingredient[];\n  instructions: string[];\n}\n\ninterface RecipeAgentState {\n  recipe: Recipe;\n}\n\nconst INITIAL_STATE: RecipeAgentState = {\n  recipe: {\n    title: \"Make Your Recipe\",\n    skill_level: SkillLevel.INTERMEDIATE,\n    cooking_time: CookingTime.FortyFiveMin,\n    special_preferences: [],\n    ingredients: [\n      { icon: \"🥕\", name: \"Carrots\", amount: \"3 large, grated\" },\n      { icon: \"🌾\", name: \"All-Purpose Flour\", amount: \"2 cups\" },\n    ],\n    instructions: [\"Preheat oven to 350°F (175°C)\"],\n  },\n};\n\nfunction Recipe() {\n  const { isMobile } = useMobileView();\n  const { state: agentState, setState: setAgentState } = useCoAgent<RecipeAgentState>({\n    name: \"shared_state\",\n    initialState: INITIAL_STATE,\n  });\n\n  const [recipe, setRecipe] = useState(INITIAL_STATE.recipe);\n  const { appendMessage, isLoading } = useCopilotChat();\n  const [editingInstructionIndex, setEditingInstructionIndex] = useState<number | null>(null);\n  const newInstructionRef = useRef<HTMLTextAreaElement>(null);\n\n  const updateRecipe = (partialRecipe: Partial<Recipe>) => {\n    setAgentState({\n      ...agentState,\n      recipe: {\n        ...recipe,\n        ...partialRecipe,\n      },\n    });\n    setRecipe({\n      ...recipe,\n      ...partialRecipe,\n    });\n  };\n\n  const newRecipeState = { ...recipe };\n  const newChangedKeys = [];\n  const changedKeysRef = useRef<string[]>([]);\n\n  for (const key in recipe) {\n    if (\n      agentState &&\n      agentState.recipe &&\n      (agentState.recipe as any)[key] !== undefined &&\n      (agentState.recipe as any)[key] !== null\n    ) {\n      let agentValue = (agentState.recipe as any)[key];\n      const recipeValue = (recipe as any)[key];\n\n      // Check if agentValue is a string and replace \\n with actual newlines\n      if (typeof agentValue === \"string\") {\n        agentValue = agentValue.replace(/\\\\n/g, \"\\n\");\n      }\n\n      if (JSON.stringify(agentValue) !== JSON.stringify(recipeValue)) {\n        (newRecipeState as any)[key] = agentValue;\n        newChangedKeys.push(key);\n      }\n    }\n  }\n\n  if (newChangedKeys.length > 0) {\n    changedKeysRef.current = newChangedKeys;\n  } else if (!isLoading) {\n    changedKeysRef.current = [];\n  }\n\n  useEffect(() => {\n    setRecipe(newRecipeState);\n  }, [JSON.stringify(newRecipeState)]);\n\n  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateRecipe({\n      title: event.target.value,\n    });\n  };\n\n  const handleSkillLevelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      skill_level: event.target.value as SkillLevel,\n    });\n  };\n\n  const handleDietaryChange = (preference: string, checked: boolean) => {\n    if (checked) {\n      updateRecipe({\n        special_preferences: [...recipe.special_preferences, preference],\n      });\n    } else {\n      updateRecipe({\n        special_preferences: recipe.special_preferences.filter((p) => p !== preference),\n      });\n    }\n  };\n\n  const handleCookingTimeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    updateRecipe({\n      cooking_time: cookingTimeValues[Number(event.target.value)].label,\n    });\n  };\n\n  const addIngredient = () => {\n    // Pick a random food emoji from our valid list\n    updateRecipe({\n      ingredients: [...recipe.ingredients, { icon: \"🍴\", name: \"\", amount: \"\" }],\n    });\n  };\n\n  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients[index] = {\n      ...updatedIngredients[index],\n      [field]: value,\n    };\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const removeIngredient = (index: number) => {\n    const updatedIngredients = [...recipe.ingredients];\n    updatedIngredients.splice(index, 1);\n    updateRecipe({ ingredients: updatedIngredients });\n  };\n\n  const addInstruction = () => {\n    const newIndex = recipe.instructions.length;\n    updateRecipe({\n      instructions: [...recipe.instructions, \"\"],\n    });\n    // Set the new instruction as the editing one\n    setEditingInstructionIndex(newIndex);\n\n    // Focus the new instruction after render\n    setTimeout(() => {\n      const textareas = document.querySelectorAll(\".instructions-container textarea\");\n      const newTextarea = textareas[textareas.length - 1] as HTMLTextAreaElement;\n      if (newTextarea) {\n        newTextarea.focus();\n      }\n    }, 50);\n  };\n\n  const updateInstruction = (index: number, value: string) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions[index] = value;\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  const removeInstruction = (index: number) => {\n    const updatedInstructions = [...recipe.instructions];\n    updatedInstructions.splice(index, 1);\n    updateRecipe({ instructions: updatedInstructions });\n  };\n\n  // Simplified icon handler that defaults to a fork/knife for any problematic icons\n  const getProperIcon = (icon: string | undefined): string => {\n    // If icon is undefined  return the default\n    if (!icon) {\n      return \"🍴\";\n    }\n\n    return icon;\n  };\n\n  return (\n    <form \n    data-testid=\"recipe-card\"\n    style={isMobile ? { marginBottom: \"100px\" } : {}}\n    className=\"recipe-card\">\n      {/* Recipe Title */}\n      <div className=\"recipe-header\">\n        <input\n          type=\"text\"\n          value={recipe.title || \"\"}\n          onChange={handleTitleChange}\n          className=\"recipe-title-input\"\n        />\n\n        <div className=\"recipe-meta\">\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🕒</span>\n            <select\n              className=\"meta-select\"\n              value={cookingTimeValues.find((t) => t.label === recipe.cooking_time)?.value || 3}\n              onChange={handleCookingTimeChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {cookingTimeValues.map((time) => (\n                <option key={time.value} value={time.value}>\n                  {time.label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          <div className=\"meta-item\">\n            <span className=\"meta-icon\">🏆</span>\n            <select\n              className=\"meta-select\"\n              value={recipe.skill_level}\n              onChange={handleSkillLevelChange}\n              style={{\n                backgroundImage:\n                  \"url(\\\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\\\")\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundPosition: \"right 0px center\",\n                backgroundSize: \"12px\",\n                appearance: \"none\",\n                WebkitAppearance: \"none\",\n              }}\n            >\n              {Object.values(SkillLevel).map((level) => (\n                <option key={level} value={level}>\n                  {level}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </div>\n\n      {/* Dietary Preferences */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"special_preferences\") && <Ping />}\n        <h2 className=\"section-title\">Dietary Preferences</h2>\n        <div className=\"dietary-options\">\n          {Object.values(SpecialPreferences).map((option) => (\n            <label key={option} className=\"dietary-option\">\n              <input\n                type=\"checkbox\"\n                checked={recipe.special_preferences.includes(option)}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleDietaryChange(option, e.target.checked)\n                }\n              />\n              <span>{option}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      {/* Ingredients */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"ingredients\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Ingredients</h2>\n          <button\n            data-testid=\"add-ingredient-button\"\n            type=\"button\"\n            className=\"add-button\"\n            onClick={addIngredient}\n          >\n            + Add Ingredient\n          </button>\n        </div>\n        <div\n          data-testid=\"ingredients-container\"\n          className=\"ingredients-container\"\n        >\n          {recipe.ingredients.map((ingredient, index) => (\n            <div key={index} \n             data-testid=\"ingredient-card\"\n             className=\"ingredient-card\">\n              <div className=\"ingredient-icon\">{getProperIcon(ingredient.icon)}</div>\n              <div className=\"ingredient-content\">\n                <input\n                  type=\"text\"\n                  value={ingredient.name || \"\"}\n                  onChange={(e) => updateIngredient(index, \"name\", e.target.value)}\n                  placeholder=\"Ingredient name\"\n                  className=\"ingredient-name-input\"\n                />\n                <input\n                  type=\"text\"\n                  value={ingredient.amount || \"\"}\n                  onChange={(e) => updateIngredient(index, \"amount\", e.target.value)}\n                  placeholder=\"Amount\"\n                  className=\"ingredient-amount-input\"\n                />\n              </div>\n              <button\n                type=\"button\"\n                className=\"remove-button\"\n                onClick={() => removeIngredient(index)}\n                aria-label=\"Remove ingredient\"\n              >\n                ×\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Instructions */}\n      <div className=\"section-container relative\">\n        {changedKeysRef.current.includes(\"instructions\") && <Ping />}\n        <div className=\"section-header\">\n          <h2 className=\"section-title\">Instructions</h2>\n          <button type=\"button\" className=\"add-step-button\" onClick={addInstruction}>\n            + Add Step\n          </button>\n        </div>\n        <div \n          data-testid=\"instructions-container\"\n          className=\"instructions-container\">\n          {recipe.instructions.map((instruction, index) => (\n            <div key={index} className=\"instruction-item\">\n              {/* Number Circle */}\n              <div className=\"instruction-number\">{index + 1}</div>\n\n              {/* Vertical Line */}\n              {index < recipe.instructions.length - 1 && <div className=\"instruction-line\" />}\n\n              {/* Instruction Content */}\n              <div\n                className={`instruction-content ${\n                  editingInstructionIndex === index\n                    ? \"instruction-content-editing\"\n                    : \"instruction-content-default\"\n                }`}\n                onClick={() => setEditingInstructionIndex(index)}\n              >\n                <textarea\n                  className=\"instruction-textarea\"\n                  value={instruction || \"\"}\n                  onChange={(e) => updateInstruction(index, e.target.value)}\n                  placeholder={!instruction ? \"Enter cooking instruction...\" : \"\"}\n                  onFocus={() => setEditingInstructionIndex(index)}\n                  onBlur={(e) => {\n                    // Only blur if clicking outside this instruction\n                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) {\n                      setEditingInstructionIndex(null);\n                    }\n                  }}\n                />\n\n                {/* Delete Button (only visible on hover) */}\n                <button\n                  type=\"button\"\n                  className={`instruction-delete-btn ${\n                    editingInstructionIndex === index\n                      ? \"instruction-delete-btn-editing\"\n                      : \"instruction-delete-btn-default\"\n                  } remove-button`}\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent triggering parent onClick\n                    removeInstruction(index);\n                  }}\n                  aria-label=\"Remove instruction\"\n                >\n                  ×\n                </button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Improve with AI Button */}\n      <div className=\"action-container\">\n        <button\n          data-testid=\"improve-button\"\n          className={isLoading ? \"improve-button loading\" : \"improve-button\"}\n          type=\"button\"\n          onClick={() => {\n            if (!isLoading) {\n              appendMessage(\n                new TextMessage({\n                  content: \"Improve the recipe\",\n                  role: Role.User,\n                }),\n              );\n            }\n          }}\n          disabled={isLoading}\n        >\n          {isLoading ? \"Please Wait...\" : \"Improve with AI\"}\n        </button>\n      </div>\n    </form>\n  );\n}\n\nfunction Ping() {\n  return (\n    <span className=\"ping-animation\">\n      <span className=\"ping-circle\"></span>\n      <span className=\"ping-dot\"></span>\n    </span>\n  );\n}\n",
       "language": "typescript",
       "type": "file"
     },