Allow hand-drawn links between neighboring plants on the garden board

Add a "Relier des plantes" link mode: click two sprites to connect
(or disconnect) them. Linked pairs are stored bidirectionally as
neighbors, drawn as dashed lines on the board, and surfaced to the
gardening advisor so it can factor in companion-planting effects.

app.py

@@ -52,6 +52,24 @@ LON = 5.3698
 BOARD_JS = """
 <script>
 (function () {
+    function attachLinkModeBtn() {
+        const linkBtn = document.getElementById('link-mode-btn');
+        const board = document.getElementById('garden-board');
+        if (!linkBtn || linkBtn._wired) return;
+        linkBtn._wired = true;
+
+        linkBtn.addEventListener('click', () => {
+            window._linkMode = !window._linkMode;
+            linkBtn.classList.toggle('link-mode-active', window._linkMode);
+            if (board) board.classList.toggle('link-mode', window._linkMode);
+            if (window._linkSource != null && board) {
+                const srcEl = board.querySelector(`.garden-sprite[data-idx="${window._linkSource}"]`);
+                if (srcEl) srcEl.classList.remove('link-source');
+            }
+            window._linkSource = null;
+        });
+    }
+
     function attachBoard() {
         const board = document.getElementById('garden-board');
         if (!board || board._wired) return;
@@ -107,6 +125,21 @@ BOARD_JS = """
                 window._gardenMove = { idx: drag.idx, x: x, y: y };
                 const btn = document.getElementById('garden-move-btn');
                 if (btn) btn.click();
+            } else if (window._linkMode) {
+                if (window._linkSource == null) {
+                    window._linkSource = drag.idx;
+                    drag.el.classList.add('link-source');
+                } else if (window._linkSource === drag.idx) {
+                    drag.el.classList.remove('link-source');
+                    window._linkSource = null;
+                } else {
+                    const srcEl = board.querySelector(`.garden-sprite[data-idx="${window._linkSource}"]`);
+                    if (srcEl) srcEl.classList.remove('link-source');
+                    window._gardenLink = { idx1: window._linkSource, idx2: drag.idx };
+                    window._linkSource = null;
+                    const btn = document.getElementById('garden-link-btn');
+                    if (btn) btn.click();
+                }
             } else {
                 window._gardenSelect = { idx: drag.idx };
                 const btn = document.getElementById('garden-select-btn');
@@ -118,10 +151,15 @@ BOARD_JS = """
         board.addEventListener('pointercancel', () => { drag = null; });
     }
 
-    const observer = new MutationObserver(attachBoard);
+    function attachAll() {
+        attachBoard();
+        attachLinkModeBtn();
+    }
+
+    const observer = new MutationObserver(attachAll);
     observer.observe(document.body, { childList: true, subtree: true });
-    document.addEventListener('DOMContentLoaded', attachBoard);
-    attachBoard();
+    document.addEventListener('DOMContentLoaded', attachAll);
+    attachAll();
 })();
 </script>
 """
@@ -293,6 +331,7 @@ def get_garden_board_html(user_id: str) -> str:
     garden = load_garden(user_id)
     today = datetime.date.today()
     tiles = []
+    positions = {}
     for idx, p in enumerate(garden):
         sprite_path = Path(pixel_art.get_sprite_path(p["genus"])).resolve()
         sprite_url = f"/gradio_api/file={sprite_path.as_posix()}"
@@ -310,13 +349,31 @@ def get_garden_board_html(user_id: str) -> str:
             caption += " 💧"
 
         pos = p.get("position") or _default_position(idx)
+        positions[p["id"]] = pos
         tiles.append(
             f'<div class="garden-sprite" data-idx="{idx}" style="left:{pos["x"]}%; top:{pos["y"]}%;">'
             f'<img src="{sprite_url}" draggable="false" alt="{html.escape(caption)}">'
             f'<div class="garden-caption">{html.escape(caption)}</div>'
             f'</div>'
         )
-    return f'<div class="garden-board-inner">{"".join(tiles)}</div>'
+
+    # Draw a line between each pair of hand-linked ("neighbor") plants.
+    links = []
+    drawn = set()
+    for p in garden:
+        for neighbor_id in p.get("neighbors", []):
+            pair = frozenset((p["id"], neighbor_id))
+            if pair in drawn or neighbor_id not in positions:
+                continue
+            drawn.add(pair)
+            a, b = positions[p["id"]], positions[neighbor_id]
+            links.append(f'<line x1="{a["x"]}" y1="{a["y"]}" x2="{b["x"]}" y2="{b["y"]}" />')
+
+    links_svg = (
+        f'<svg class="garden-links" viewBox="0 0 100 100" preserveAspectRatio="none">{"".join(links)}</svg>'
+        if links else ""
+    )
+    return f'<div class="garden-board-inner">{links_svg}{"".join(tiles)}</div>'
 
 def _visible_plants(user_id: str) -> list[dict]:
     """All garden plants, in the same order as the gallery."""
@@ -500,7 +557,9 @@ with gr.Blocks(title="🌿 Plant Watering Planner") as app:
         with gr.Row():
 
             with gr.Column(scale=3):
-                gr.Markdown("_Drag a plant to place it anywhere in your garden, or click it to see details._")
+                with gr.Row():
+                    gr.Markdown("_Drag a plant to place it anywhere in your garden, or click it to see details._")
+                    link_mode_btn = gr.Button("🔗 Relier des plantes", elem_id="link-mode-btn", size="sm", scale=0)
 
                 # Garden board — freely draggable pixel-art sprites
                 garden_board = gr.HTML(value="", elem_id="garden-board")
@@ -513,6 +572,9 @@ with gr.Blocks(title="🌿 Plant Watering Planner") as app:
                 board_move_x = gr.Number(value=0, visible=False)
                 board_move_y = gr.Number(value=0, visible=False)
                 board_move_btn = gr.Button("sync", elem_id="garden-move-btn", elem_classes=["board-sync"])
+                board_link_idx1 = gr.Number(value=-1, visible=False)
+                board_link_idx2 = gr.Number(value=-1, visible=False)
+                board_link_btn = gr.Button("sync", elem_id="garden-link-btn", elem_classes=["board-sync"])
 
                 # Detail panel — appears on click
                 plant_detail = gr.Markdown("_Click a plant photo to see its details._", elem_id="plant-detail")
@@ -606,6 +668,30 @@ with gr.Blocks(title="🌿 Plant Watering Planner") as app:
             js="(idx, x, y, user_id) => { const d = window._gardenMove || {idx: -1, x: 0, y: 0}; return [d.idx, d.x, d.y, user_id]; }",
         )
 
+        def toggle_plant_link(idx1, idx2, user_id):
+            """Toggle a 'neighbor' link between two plants on the board."""
+            idx1, idx2 = int(idx1), int(idx2)
+            garden = load_garden(user_id)
+            if 0 <= idx1 < len(garden) and 0 <= idx2 < len(garden) and idx1 != idx2:
+                id1, id2 = garden[idx1]["id"], garden[idx2]["id"]
+                neighbors1 = garden[idx1].setdefault("neighbors", [])
+                neighbors2 = garden[idx2].setdefault("neighbors", [])
+                if id2 in neighbors1:
+                    neighbors1.remove(id2)
+                    neighbors2.remove(id1)
+                else:
+                    neighbors1.append(id2)
+                    neighbors2.append(id1)
+                save_garden(garden, user_id)
+            return get_garden_board_html(user_id)
+
+        board_link_btn.click(
+            fn=toggle_plant_link,
+            inputs=[board_link_idx1, board_link_idx2, user_id_state],
+            outputs=[garden_board],
+            js="(idx1, idx2, user_id) => { const d = window._gardenLink || {idx1: -1, idx2: -1}; return [d.idx1, d.idx2, user_id]; }",
+        )
+
         def _mark_watered_by_idx(idx, user_id):
             if idx is None:
                 return "⚠️ Select a plant first.", get_garden_board_html(user_id)
@@ -631,6 +717,9 @@ with gr.Blocks(title="🌿 Plant Watering Planner") as app:
                 return "⚠️ Plant not found.", get_garden_board_html(user_id)
             target_id = visible[idx]["id"]
             garden = [p for p in load_garden(user_id) if p.get("id") != target_id]
+            for p in garden:
+                if target_id in p.get("neighbors", []):
+                    p["neighbors"].remove(target_id)
             save_garden(garden, user_id)
             return "🗑️ Plant removed.", get_garden_board_html(user_id)
 
@@ -657,11 +746,18 @@ with gr.Blocks(title="🌿 Plant Watering Planner") as app:
                 return "Select a plant first."
             plant = plants[idx]
             info = get_plant_info(plant["genus"])
+            by_id = {p["id"]: p for p in plants}
+            neighbors = [
+                {"name": n.get("nickname") or n["genus"], "genus": n["genus"]}
+                for nid in plant.get("neighbors", [])
+                if (n := by_id.get(nid)) is not None
+            ]
             return advisor.ask_about_plant(
                 question, info,
                 plant_name=plant.get("nickname"),
                 genus=plant["genus"],
                 last_watered=plant.get("last_watered"),
+                neighbors=neighbors,
             )
 
         advisor_ask_btn.click(

modules/advisor.py

@@ -32,8 +32,13 @@ def _build_system_prompt(
     plant_name: str | None = None,
     genus: str | None = None,
     last_watered: str | None = None,
+    neighbors: list[dict] | None = None,
 ) -> str:
     name = plant_name or genus or "this plant"
+    neighbor_line = ""
+    if neighbors:
+        names = ", ".join(f"{n['name']} ({n['genus']})" for n in neighbors)
+        neighbor_line = f"- Plants growing right next to it in the garden: {names}\n"
     return (
         "You are an expert gardening assistant with deep knowledge of houseplant "
         "and garden plant care. Be practical, encouraging, and specific.\n\n"
@@ -43,7 +48,8 @@ def _build_system_prompt(
         f"- Soil: {plant_info.get('soil')}\n"
         f"- Watering frequency: every {plant_info.get('watering_frequency_days')} days\n"
         f"- Fertilization: {plant_info.get('fertilization_type')}\n"
-        f"- Watering status: {_watering_status(last_watered)}\n\n"
+        f"- Watering status: {_watering_status(last_watered)}\n"
+        f"{neighbor_line}\n"
         "Always factor the watering status into your answer: if it is overdue "
         "compared to the recommended frequency, say so and recommend watering; "
         "if it was watered recently, take that into account (don't tell the "
@@ -51,7 +57,10 @@ def _build_system_prompt(
         "possible cause if the question describes a problem.\n\n"
         "Use this profile as context, but also draw on your general gardening "
         "knowledge for issues it doesn't cover (pests, diseases, yellowing "
-        "leaves, repotting, etc.). Give a precise, actionable, gardening-advice "
+        "leaves, repotting, etc.). If nearby plants are listed, factor in "
+        "companion-planting effects (competition for light, water or nutrients, "
+        "shared pests/diseases, or beneficial pairings) when relevant to the "
+        "question. Give a precise, actionable, gardening-advice "
         "focused answer and never recommend dangerous or toxic substances. "
         "Answer in 2-4 sentences, in the same language as the question."
     )
@@ -63,12 +72,13 @@ def ask_about_plant(
     plant_name: str | None = None,
     genus: str | None = None,
     last_watered: str | None = None,
+    neighbors: list[dict] | None = None,
 ) -> str:
     """Ask the advisor a question about a specific plant, grounded in its care data."""
     try:
         completion = _get_client().chat_completion(
             messages=[
-                {"role": "system", "content": _build_system_prompt(plant_info, plant_name, genus, last_watered)},
+                {"role": "system", "content": _build_system_prompt(plant_info, plant_name, genus, last_watered, neighbors)},
                 {"role": "user", "content": question},
             ],
             max_tokens=300,

static/style.css

@@ -185,6 +185,41 @@ footer {
     opacity: 0.85;
 }
 
+#garden-board.link-mode .garden-sprite {
+    cursor: crosshair;
+}
+
+.garden-sprite.link-source img {
+    outline: 3px solid #43a047;
+    outline-offset: 2px;
+    border-radius: 8px;
+}
+
+/* SVG overlay drawing lines between hand-linked ("neighbor") plants */
+.garden-links {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.garden-links line {
+    stroke: #8d6e63;
+    stroke-width: 2;
+    stroke-dasharray: 5 4;
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
+}
+
+/* "Relier des plantes" toggle button */
+#link-mode-btn.link-mode-active {
+    background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%) !important;
+    color: #ffffff !important;
+    border-color: transparent !important;
+}
+
 .garden-sprite img {
     width: 88px;
     height: 88px;