Add suggestion from panel to notebook on click (#5)

README.md

@@ -38,6 +38,10 @@ To use it, you need to install the `marimo-agents` package:
 pip install marimo-agents
 ```
 
+## But why?
+
+Research agents are a great way to explore data and hypotheses. However, many paths of inquiry lead to dead ends, and it's easy to get lost in a sea of irrelevant results. Instead, you may want to eventually delete the dead ends to focus on the most promising paths of inquiry. A notebook helps achieve this by enabling you to polish your research via deleting agent cells with irrelevant results, and also rearranging prompts to present data as a cohesive narrative.
+
 ## Usage
 
 An **Agent** is at its core a function that takes in a **Prompt** and returns a **Response**.
@@ -84,7 +88,7 @@ In the above example using:
 ```python
 import asyncio
 async def suggestions_fn():
-  asyncio.sleep(3)
+  await asyncio.sleep(3)
   return [
     mo.ai.agents.Suggestion(
       id="1",
@@ -105,7 +109,7 @@ This will render as:
 
 <img src="https://raw.githubusercontent.com/riyavsinha/marimo/main/docs/_static/agent-suggestions.png" width="700px" />
 
-You will notice that the suggestions are rendered in a new panel to the right of the agent cell. These are generated as a background task, so they can happen after the agent cell has returned its response.
+The suggestions are rendered in a new panel to the right of the agent cell. These are generated as a background task, so they can happen after the agent cell has returned its response.
 
 ---
 

frontend/src/components/editor/chrome/panels/suggestions-panel.tsx

@@ -8,9 +8,13 @@ import {
 import { suggestionsAtom } from "@/core/suggestions/state";
 import { cn } from "@/utils/cn";
 import { PanelEmptyState } from "./empty-state";
+import { useCellActions } from "@/core/cells/cells";
+import { useLastFocusedCellId } from "@/core/cells/focus";
 
 export const SuggestionsPanel: React.FC = () => {
   const suggestions = useAtomValue(suggestionsAtom);
+  const { createNewCell } = useCellActions();
+  const lastFocusedCellId = useLastFocusedCellId();
 
   if (!suggestions.length) {
     return (
@@ -21,21 +25,29 @@ export const SuggestionsPanel: React.FC = () => {
       />
     );
   }
-  console.log(suggestions);
+
+  const handleSuggestionClick = (title: string) => {
+    createNewCell({
+      code: `await mo.ai.agents.run_agent("${title}")`,
+      before: false,
+      cellId: lastFocusedCellId ?? "__end__",
+    });
+  };
 
   return (
     <div className="flex flex-col gap-3 p-4">
       {suggestions.map((suggestion) => (
         <div
           key={suggestion.id}
           className={cn(
-            "rounded-lg border p-4 transition-colors",
+            "rounded-lg border p-4 transition-colors cursor-pointer",
             "hover:border-border-hover",
             suggestion.type === "prompt_warning" &&
               "border-orange-500/50 bg-orange-500/10",
             suggestion.type === "prompt_idea" &&
               "border-blue-500/50 bg-blue-500/10",
           )}
+          onClick={() => handleSuggestionClick(suggestion.title)}
         >
           <div className="flex items-center gap-2">
             {suggestion.type === "prompt_warning" ? (