From 11c6af9f3e70f5e214d23425af6af27b07df6915 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Tue, 5 May 2026 06:54:28 +0200
Subject: [PATCH 01/19] Update AGENTS guidance for Julia process handling

---
 Project.toml                                  |   4 +
 frontend/src/App.tsx                          | 148 +++++++-
 frontend/src/styles.css                       |  96 +++++
 frontend/src/types.ts                         |  35 ++
 lib/PlantSimEngineGraphEditor/Project.toml    |  16 +
 .../src/PlantSimEngineGraphEditor.jl          | 285 +++++++++++++++
 src/PlantSimEngine.jl                         |   8 +-
 src/model_discovery.jl                        | 242 +++++++++++++
 src/visualization/dependency_graph_view.jl    | 332 +++++++++++++++---
 test/test-dependency-graph-view.jl            |  88 +++++
 10 files changed, 1205 insertions(+), 49 deletions(-)
 create mode 100644 lib/PlantSimEngineGraphEditor/Project.toml
 create mode 100644 lib/PlantSimEngineGraphEditor/src/PlantSimEngineGraphEditor.jl
 create mode 100644 src/model_discovery.jl

diff --git a/Project.toml b/Project.toml
index 7db8b106..a4d1a192 100644
--- a/Project.toml
+++ b/Project.toml
@@ -10,6 +10,8 @@ DataAPI = "9a962f9c-6df0-11e9-0e5d-c546b8b5ee8a"
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
 FLoops = "cc61a311-1640-44b5-9fba-1b764f453329"
+InteractiveUtils = "b77e0a4c-d291-57a0-90e8-8db25a27a240"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
 Markdown = "d6f4376e-aef5-505a-96c1-9c027394607a"
 MultiScaleTreeGraph = "dd4a991b-8a45-4075-bede-262ee62d5583"
 PlantMeteo = "4630fe09-e0fb-4da5-a846-781cb73437b6"
@@ -25,6 +27,8 @@ DataAPI = "1.15"
 DataFrames = "1"
 Dates = "1.10"
 FLoops = "0.2"
+InteractiveUtils = "1.10"
+JSON = "1"
 Markdown = "1.10"
 MultiScaleTreeGraph = "0.15.1"
 PlantMeteo = "0.8.2"
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5f8bc7d9..351bdcd5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -30,7 +30,7 @@ import { DependencyEdge } from "./DependencyEdge";
 import { ModelNode } from "./ModelNode";
 import { layoutGraph, type LayoutMode } from "./layout";
 import { sampleGraph } from "./sampleGraph";
-import type { DependencyGraphView, GraphEdgeData, GraphNodeData, GraphPort, RuntimeGraphNodeData } from "./types";
+import type { DependencyGraphView, GraphEdgeData, GraphEditorState, GraphNodeData, GraphPort, ModelDescriptor, RuntimeGraphNodeData } from "./types";
 import "./styles.css";
 
 type EdgeFilterKey = "dataFlow" | "mapped" | "callStack";
@@ -102,7 +102,12 @@ const layoutLabels: Record<LayoutMode, string> = {
 };
 
 export default function App() {
-  const [graph] = useState<DependencyGraphView>(loadInitialGraph());
+  const [graph, setGraph] = useState<DependencyGraphView>(loadInitialGraph());
+  const [editorModels, setEditorModels] = useState<ModelDescriptor[]>([]);
+  const [editorSocket, setEditorSocket] = useState<WebSocket | null>(null);
+  const [editorConnected, setEditorConnected] = useState(false);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
   const [selected, setSelected] = useState<GraphNodeData | null>(null);
   const [activePort, setActivePort] = useState<GraphPort | null>(null);
   const [showRequiredPanel, setShowRequiredPanel] = useState(false);
@@ -142,6 +147,29 @@ export default function App() {
   );
   const focus = useMemo(() => pinnedFocus?.active ? pinnedFocus : traversalFocus, [pinnedFocus, traversalFocus]);
 
+  useEffect(() => {
+    const config = loadEditorConfig();
+    if (!config?.websocketUrl) return;
+
+    const socket = new WebSocket(config.websocketUrl);
+    setEditorSocket(socket);
+    socket.addEventListener("open", () => setEditorConnected(true));
+    socket.addEventListener("close", () => setEditorConnected(false));
+    socket.addEventListener("message", (event) => {
+      const payload = JSON.parse(event.data) as GraphEditorState;
+      if (payload.graph) setGraph(payload.graph);
+      if (payload.models) setEditorModels(payload.models);
+      setCanUndo(Boolean(payload.canUndo));
+      setCanRedo(Boolean(payload.canRedo));
+    });
+    return () => socket.close();
+  }, []);
+
+  const sendEditorCommand = useCallback((command: Record<string, unknown>) => {
+    if (!editorSocket || editorSocket.readyState !== WebSocket.OPEN) return;
+    editorSocket.send(JSON.stringify(command));
+  }, [editorSocket]);
+
   useEffect(() => {
     const nextNodes = visibleNodeData.map((node) => ({
       id: node.id,
@@ -377,6 +405,13 @@ export default function App() {
               <RotateCcw size={17} />
             </button>
           </div>
+          {editorSocket && (
+            <div className="toolbar-group live-session">
+              <span className={editorConnected ? "live-pill connected" : "live-pill"}>{editorConnected ? "live" : "offline"}</span>
+              <button className="metric-button" disabled={!canUndo} onClick={() => sendEditorCommand({ action: "undo" })}>Undo</button>
+              <button className="metric-button" disabled={!canRedo} onClick={() => sendEditorCommand({ action: "redo" })}>Redo</button>
+            </div>
+          )}
         </div>
 
         <RelationshipLegend filters={edgeFilters} onToggle={toggleEdgeFilter} />
@@ -447,6 +482,12 @@ export default function App() {
         <RequiredInputList groups={groupRequiredInputs(requiredInputs)} onSelect={focusNode} compact />
         <h3>Diagnostics</h3>
         {graph.diagnostics.length > 0 ? graph.diagnostics.map((item) => <div className="diagnostic" key={item}>{item}</div>) : <div className="empty-state">No diagnostics.</div>}
+        {editorModels.length > 0 && (
+          <>
+            <h3>Available Models</h3>
+            <ModelBrowser models={editorModels} scales={graph.scales} onCommand={sendEditorCommand} disabled={!editorConnected} />
+          </>
+        )}
       </aside>
     </main>
   );
@@ -706,6 +747,103 @@ function Row({ label, value }: { label: string; value: string }) {
   return <div className="row"><span>{label}</span><strong>{value}</strong></div>;
 }
 
+function ModelBrowser({
+  models,
+  scales,
+  onCommand,
+  disabled,
+}: {
+  models: ModelDescriptor[];
+  scales: string[];
+  onCommand: (command: Record<string, unknown>) => void;
+  disabled: boolean;
+}) {
+  const [modelType, setModelType] = useState(models[0]?.type ?? "");
+  const [scale, setScale] = useState(scales[0] ?? "Default");
+  const selected = models.find((model) => model.type === modelType) ?? models[0];
+
+  useEffect(() => {
+    if (!models.some((model) => model.type === modelType)) setModelType(models[0]?.type ?? "");
+  }, [modelType, models]);
+
+  useEffect(() => {
+    if (!scales.includes(scale)) setScale(scales[0] ?? "Default");
+  }, [scale, scales]);
+
+  if (!selected) return <div className="empty-state">No model type is available.</div>;
+  return (
+    <div className="model-browser">
+      <label className="model-browser-control">
+        <span>Scale</span>
+        <select value={scale} onChange={(event) => setScale(event.target.value)}>
+          {scales.map((item) => <option key={item} value={item}>{item}</option>)}
+        </select>
+      </label>
+      <label className="model-browser-control">
+        <span>Model</span>
+        <select value={selected.type} onChange={(event) => setModelType(event.target.value)}>
+          {models.map((model) => <option key={model.type} value={model.type}>{model.name} ({model.process ?? "unknown"})</option>)}
+        </select>
+      </label>
+      <ModelParameterForm key={selected.type} model={selected} scale={scale} disabled={disabled} onCommand={onCommand} />
+    </div>
+  );
+}
+
+function ModelParameterForm({
+  model,
+  scale,
+  disabled,
+  onCommand,
+}: {
+  model: ModelDescriptor;
+  scale: string;
+  disabled: boolean;
+  onCommand: (command: Record<string, unknown>) => void;
+}) {
+  const initialValues = useMemo(() => Object.fromEntries(model.constructor.fields.map((field) => [field.name, parameterDefaultValue(field.default)])), [model]);
+  const initialTypes = useMemo(() => Object.fromEntries(model.constructor.fields.map((field) => [field.name, field.inferredChoice])), [model]);
+  const [values, setValues] = useState<Record<string, string>>(initialValues);
+  const [types, setTypes] = useState<Record<string, string>>(initialTypes);
+
+  const setSharedType = useCallback((fieldName: string, nextType: string) => {
+    const field = model.constructor.fields.find((item) => item.name === fieldName);
+    const group = field?.typeParameter ? model.constructor.parameterGroups[field.typeParameter] ?? [fieldName] : [fieldName];
+    setTypes((current) => ({ ...current, ...Object.fromEntries(group.map((name) => [name, nextType])) }));
+  }, [model]);
+
+  const addModel = useCallback(() => {
+    const parameters = Object.fromEntries(model.constructor.fields.map((field) => [
+      field.name,
+      { type: types[field.name] ?? field.inferredChoice, value: values[field.name] ?? "" },
+    ]));
+    onCommand({ action: "edit", kind: "add_model", scale, modelType: model.type, parameters });
+  }, [model, onCommand, scale, types, values]);
+
+  return (
+    <div className="model-browser-item">
+      <strong>{model.name}</strong>
+      <span>{model.process ?? "unknown process"}</span>
+      {model.constructor.fields.map((field) => (
+        <div className="parameter-row" key={field.name}>
+          <label>{field.name}</label>
+          <input value={values[field.name] ?? ""} onChange={(event) => setValues((current) => ({ ...current, [field.name]: event.target.value }))} />
+          <select value={types[field.name] ?? field.inferredChoice} onChange={(event) => setSharedType(field.name, event.target.value)}>
+            {field.choices.map((choice) => <option key={choice} value={choice}>{choice}</option>)}
+          </select>
+        </div>
+      ))}
+      <button className="metric-button" disabled={disabled} onClick={addModel}>Add model</button>
+    </div>
+  );
+}
+
+function parameterDefaultValue(value: unknown) {
+  if (value === null || typeof value === "undefined") return "";
+  if (typeof value === "string" && value.startsWith(":")) return value.slice(1);
+  return String(value);
+}
+
 function loadInitialGraph() {
   const embedded = document.getElementById("pse-graph-data");
   if (embedded?.textContent) return JSON.parse(embedded.textContent) as DependencyGraphView;
@@ -713,6 +851,12 @@ function loadInitialGraph() {
   return fromWindow ?? sampleGraph;
 }
 
+function loadEditorConfig() {
+  const embedded = document.getElementById("pse-editor-config");
+  if (!embedded?.textContent) return null;
+  return JSON.parse(embedded.textContent) as { websocketUrl?: string };
+}
+
 function runtimeNodeData(
   node: GraphNodeData,
   options: {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 432e7e0b..9f46cf42 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1193,6 +1193,102 @@ h1 {
   font-size: 11px;
 }
 
+.live-session {
+  border-left: 1px solid rgba(183, 166, 150, 0.36);
+  padding-left: 10px;
+}
+
+.live-pill {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 9px;
+  border: 1px solid rgba(191, 106, 84, 0.38);
+  border-radius: 999px;
+  color: var(--clay);
+  background: rgba(191, 106, 84, 0.08);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.live-pill.connected {
+  border-color: rgba(31, 122, 83, 0.34);
+  color: var(--accent);
+  background: rgba(31, 122, 83, 0.09);
+}
+
+.metric-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+.model-browser {
+  display: grid;
+  gap: 7px;
+}
+
+.model-browser-control {
+  display: grid;
+  gap: 4px;
+}
+
+.model-browser-control span,
+.parameter-row label {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.model-browser-control select,
+.parameter-row input,
+.parameter-row select {
+  min-width: 0;
+  border: 1px solid rgba(183, 166, 150, 0.44);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.78);
+  color: var(--ink);
+  font: inherit;
+}
+
+.model-browser-control select {
+  height: 32px;
+  padding: 0 8px;
+}
+
+.model-browser-item {
+  display: grid;
+  gap: 7px;
+  padding: 8px 9px;
+  border: 1px solid rgba(183, 166, 150, 0.34);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.model-browser-item strong {
+  overflow-wrap: anywhere;
+  font-size: 12px;
+}
+
+.model-browser-item span {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.parameter-row {
+  display: grid;
+  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(78px, 0.8fr);
+  gap: 6px;
+  align-items: center;
+}
+
+.parameter-row input,
+.parameter-row select {
+  height: 28px;
+  padding: 0 7px;
+  font-size: 12px;
+}
+
 @media (max-width: 900px) {
   .app-shell {
     grid-template-columns: 1fr;
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 3f43f240..7fa36e82 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -54,5 +54,40 @@ export type DependencyGraphView = {
   scales: string[];
   cyclic: boolean;
   cycleNodes: string[];
+  cycleEdges?: string[];
   diagnostics: string[];
 };
+
+export type ModelConstructorField = {
+  name: string;
+  declaredType: string;
+  hasDefault: boolean;
+  default: unknown;
+  defaultType: string | null;
+  typeParameter: string | null;
+  inferredChoice: string;
+  choices: string[];
+};
+
+export type ModelDescriptor = {
+  type: string;
+  name: string;
+  process: string | null;
+  processType: string | null;
+  inputs: Record<string, unknown>;
+  outputs: Record<string, unknown>;
+  constructor: {
+    fields: ModelConstructorField[];
+    parameterGroups: Record<string, string[]>;
+    hasZeroArgConstructor: boolean;
+  };
+};
+
+export type GraphEditorState = {
+  ok: boolean;
+  graph: DependencyGraphView;
+  models: ModelDescriptor[];
+  canUndo: boolean;
+  canRedo: boolean;
+  url: string;
+};
diff --git a/lib/PlantSimEngineGraphEditor/Project.toml b/lib/PlantSimEngineGraphEditor/Project.toml
new file mode 100644
index 00000000..749b7ad6
--- /dev/null
+++ b/lib/PlantSimEngineGraphEditor/Project.toml
@@ -0,0 +1,16 @@
+name = "PlantSimEngineGraphEditor"
+uuid = "7cf0a04e-a9b1-4d1f-a906-d86a8c54d709"
+version = "0.1.0"
+authors = ["Rémi Vezy <VEZY@users.noreply.github.com>"]
+
+[deps]
+HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
+JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
+PlantSimEngine = "9a576370-710b-4269-adf9-4f603a9c6423"
+
+[sources]
+PlantSimEngine = {path = "../.."}
+
+[compat]
+HTTP = "1"
+JSON = "1"
diff --git a/lib/PlantSimEngineGraphEditor/src/PlantSimEngineGraphEditor.jl b/lib/PlantSimEngineGraphEditor/src/PlantSimEngineGraphEditor.jl
new file mode 100644
index 00000000..62811d49
--- /dev/null
+++ b/lib/PlantSimEngineGraphEditor/src/PlantSimEngineGraphEditor.jl
@@ -0,0 +1,285 @@
+module PlantSimEngineGraphEditor
+
+import HTTP
+import JSON
+import PlantSimEngine
+
+export GraphEditorSession, edit_graph, current_mapping, apply_edit!, undo!, redo!, close
+
+mutable struct GraphEditorSession{M,G,S}
+    mapping::M
+    mtg::G
+    history::Vector{M}
+    future::Vector{M}
+    server::S
+    host::String
+    port::Int
+    url::String
+end
+
+current_mapping(session::GraphEditorSession) = session.mapping
+Base.close(session::GraphEditorSession) = close(session.server)
+
+"""
+    edit_graph(mapping; mtg=nothing, host="127.0.0.1", port=8765)
+
+Start a local graph editor session. The returned session owns the current
+`ModelMapping`; call `current_mapping(session)` to recover the edited mapping.
+"""
+function edit_graph(mapping; mtg=nothing, host::AbstractString="127.0.0.1", port::Integer=8765)
+    session_ref = Ref{Any}()
+    handler = http -> _handle_http(session_ref[], http)
+    server = HTTP.listen!(handler, host, port; listenany=true, verbose=false)
+    actual_port = HTTP.port(server)
+    session = GraphEditorSession(
+        mapping,
+        mtg,
+        typeof(mapping)[],
+        typeof(mapping)[],
+        server,
+        String(host),
+        actual_port,
+        "http://$(host):$(actual_port)",
+    )
+    session_ref[] = session
+    return session
+end
+
+function apply_edit!(session::GraphEditorSession, edit::PlantSimEngine.AbstractGraphEdit)
+    push!(session.history, session.mapping)
+    empty!(session.future)
+    session.mapping = PlantSimEngine.apply_graph_edit(session.mapping, edit)
+    return session.mapping
+end
+
+function undo!(session::GraphEditorSession)
+    isempty(session.history) && return session.mapping
+    push!(session.future, session.mapping)
+    session.mapping = pop!(session.history)
+    return session.mapping
+end
+
+function redo!(session::GraphEditorSession)
+    isempty(session.future) && return session.mapping
+    push!(session.history, session.mapping)
+    session.mapping = pop!(session.future)
+    return session.mapping
+end
+
+function _handle_http(session::GraphEditorSession, http::HTTP.Stream)
+    if HTTP.WebSockets.isupgrade(http.message)
+        return HTTP.WebSockets.upgrade(http) do ws
+            _handle_websocket(session, ws)
+        end
+    end
+
+    req = http.message
+    path = HTTP.URI(req.target).path
+    response = if path == "/" || path == "/index.html"
+        (200, ["Content-Type" => "text/html; charset=utf-8"], _editor_html(session))
+    elseif path == "/state"
+        (200, ["Content-Type" => "application/json"], _state_json(session))
+    else
+        (404, ["Content-Type" => "text/plain; charset=utf-8"], "Not found")
+    end
+    status, headers, body = response
+    HTTP.setstatus(http, status)
+    for header in headers
+        HTTP.setheader(http, header)
+    end
+    HTTP.setheader(http, "Content-Length" => string(sizeof(body)))
+    HTTP.startwrite(http)
+    write(http, body)
+    return nothing
+end
+
+function _handle_websocket(session::GraphEditorSession, ws)
+    HTTP.WebSockets.send(ws, _state_json(session))
+    try
+        for message in ws
+            command = JSON.parse(String(message))
+            response = _handle_command!(session, command)
+            HTTP.WebSockets.send(ws, JSON.json(response))
+        end
+    catch err
+        HTTP.WebSockets.send(ws, JSON.json(_error_payload(err)))
+    end
+end
+
+function _handle_command!(session::GraphEditorSession, command)
+    action = get(command, "action", "")
+    try
+        if action == "undo"
+            undo!(session)
+        elseif action == "redo"
+            redo!(session)
+        elseif action == "edit"
+            edit = _edit_from_command(command)
+            apply_edit!(session, edit)
+        else
+            error("Unsupported graph editor command action `$action`.")
+        end
+        return _state_payload(session; ok=true)
+    catch err
+        return _state_payload(session; ok=false, diagnostics=[sprint(showerror, err)])
+    end
+end
+
+function _edit_from_command(command)
+    kind = get(command, "kind", "")
+    kind == "mark_previous_timestep" && return PlantSimEngine.MarkPreviousTimeStep(
+        Symbol(command["scale"]),
+        Symbol(command["process"]),
+        Symbol(command["variable"]),
+    )
+    kind == "unmark_previous_timestep" && return PlantSimEngine.UnmarkPreviousTimeStep(
+        Symbol(command["scale"]),
+        Symbol(command["process"]),
+        Symbol(command["variable"]),
+    )
+    kind == "remove_model" && return PlantSimEngine.RemoveModel(
+        Symbol(command["scale"]),
+        Symbol(command["process"]),
+    )
+    kind == "set_mapped_variable" && return PlantSimEngine.SetMappedVariable(
+        Symbol(command["scale"]),
+        Symbol(command["process"]),
+        Symbol(command["variable"]),
+        Symbol(command["sourceScale"]),
+        Symbol(command["sourceVariable"]),
+        Symbol(get(command, "mode", "single")),
+    )
+    if kind in ("add_model", "replace_model")
+        model_type = _resolve_model_type(command["modelType"])
+        parameters = _parameters_from_command(get(command, "parameters", Dict()))
+        if kind == "add_model"
+            return PlantSimEngine.AddModel(Symbol(command["scale"]), model_type, parameters)
+        end
+        return PlantSimEngine.ReplaceModel(Symbol(command["scale"]), Symbol(command["process"]), model_type, parameters)
+    end
+    error("Unsupported graph edit kind `$kind`.")
+end
+
+function _resolve_model_type(label)
+    for model_type in PlantSimEngine.available_models()
+        string(model_type) == label && return model_type
+        string(nameof(model_type)) == label && return model_type
+    end
+    error("No loaded PlantSimEngine model type matches `$label`. Load the package that defines it first.")
+end
+
+function _parameters_from_command(parameters)
+    pairs = Pair{Symbol,Any}[]
+    for (key, value) in parameters
+        push!(pairs, Symbol(key) => _parse_parameter_value(value))
+    end
+    return (; pairs...)
+end
+
+function _parse_parameter_value(value)
+    value isa AbstractDict || return value
+    choice = Symbol(get(value, "type", "julia"))
+    raw = get(value, "value", nothing)
+    choice == :float && return Float64(raw)
+    choice == :integer && return Int(raw)
+    choice == :boolean && return Bool(raw)
+    choice == :symbol && return Symbol(raw)
+    choice == :string && return String(raw)
+    choice == :nothing && return nothing
+    choice == :julia && return Core.eval(Main, Meta.parse(String(raw)))
+    return raw
+end
+
+function _state_payload(session::GraphEditorSession; ok::Bool=true, diagnostics::Vector{String}=String[])
+    graph = JSON.parse(PlantSimEngine.graph_view_json(session.mapping))
+    append!(graph["diagnostics"], diagnostics)
+    return Dict(
+        "ok" => ok,
+        "graph" => graph,
+        "models" => [PlantSimEngine.model_descriptor(T) for T in PlantSimEngine.available_models()],
+        "canUndo" => !isempty(session.history),
+        "canRedo" => !isempty(session.future),
+        "url" => session.url,
+    )
+end
+
+_state_json(session::GraphEditorSession) = JSON.json(_state_payload(session))
+_error_payload(err) = Dict("ok" => false, "diagnostics" => [sprint(showerror, err)])
+
+function _editor_html(session::GraphEditorSession)
+    react_html = _react_editor_html(session)
+    isnothing(react_html) || return react_html
+
+    graph_json = PlantSimEngine.graph_view_json(session.mapping)
+    config_json = JSON.json(Dict("websocketUrl" => "ws://$(session.host):$(session.port)/ws"))
+    return """
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>PlantSimEngine Graph Editor</title>
+<script type="application/json" id="pse-graph-data">$(graph_json)</script>
+<script type="application/json" id="pse-editor-config">$(config_json)</script>
+</head>
+<body>
+<main style="font:14px system-ui;padding:24px;max-width:960px;margin:auto">
+<h1>PlantSimEngine Graph Editor</h1>
+<p>This live session is running. The React editor can connect to <code>ws://$(session.host):$(session.port)/ws</code>.</p>
+<p>Current graph state is available at <a href="/state">/state</a>.</p>
+<pre id="graph" style="white-space:pre-wrap;background:#f6f7f8;padding:16px;border:1px solid #ddd;overflow:auto"></pre>
+</main>
+<script>
+document.getElementById("graph").textContent = JSON.stringify(JSON.parse(document.getElementById("pse-graph-data").textContent), null, 2);
+</script>
+</body>
+</html>
+"""
+end
+
+function _react_editor_html(session::GraphEditorSession)
+    assets_dir = _frontend_dist_dir()
+    manifest_path = joinpath(assets_dir, ".vite", "manifest.json")
+    isfile(manifest_path) || return nothing
+
+    manifest = JSON.parse(read(manifest_path, String))
+    entry = nothing
+    for value in values(manifest)
+        if get(value, "isEntry", false) == true
+            entry = value
+            break
+        end
+    end
+    isnothing(entry) && (entry = get(manifest, "index.html", nothing))
+    isnothing(entry) && return nothing
+
+    js_file = get(entry, "file", nothing)
+    isnothing(js_file) && return nothing
+    css_files = get(entry, "css", Any[])
+    js = read(joinpath(assets_dir, js_file), String)
+    css = join([read(joinpath(assets_dir, css_file), String) for css_file in css_files], "\n")
+    graph_json = PlantSimEngine.graph_view_json(session.mapping)
+    config_json = replace(JSON.json(Dict("websocketUrl" => "ws://$(session.host):$(session.port)/ws")), "</" => "<\\/")
+
+    return """
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>PlantSimEngine Graph Editor</title>
+<script type="application/json" id="pse-graph-data">$(graph_json)</script>
+<script type="application/json" id="pse-editor-config">$(config_json)</script>
+<style>$(css)</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="module">$(js)</script>
+</body>
+</html>
+"""
+end
+
+_frontend_dist_dir() = normpath(joinpath(@__DIR__, "..", "..", "..", "frontend", "dist"))
+
+end
diff --git a/src/PlantSimEngine.jl b/src/PlantSimEngine.jl
index f3d1a81c..e12f7fb7 100644
--- a/src/PlantSimEngine.jl
+++ b/src/PlantSimEngine.jl
@@ -5,8 +5,10 @@ import DataFrames
 import Tables
 import DataAPI
 import Dates
+import InteractiveUtils
 
 import CSV # For reading csv files with variables()
+import JSON # For graph JSON serialization
 
 # For graph dependency:
 import AbstractTrees
@@ -94,6 +96,7 @@ include("processes/model_initialisation.jl")
 include("processes/models_inputs_outputs.jl")
 include("processes/process_generation.jl")
 include("checks/dimensions.jl")
+include("model_discovery.jl")
 
 # Multi-rate runtime:
 include("time/runtime/clocks.jl")
@@ -142,8 +145,9 @@ export input_bindings, meteo_bindings, meteo_window, output_routing, model_scope
 export run!
 export fit
 export GraphPort, GraphNode, GraphEdge, DependencyGraphView
-export graph_view, graph_view_json, write_graph_view
-export AbstractGraphEdit, MarkPreviousTimeStep, apply_graph_edit
+export graph_view, graph_view_json, write_graph_view, compile_graph_view
+export available_processes, available_models, model_descriptor, model_constructor_descriptor
+export AbstractGraphEdit, AddModel, RemoveModel, ReplaceModel, SetMappedVariable, MarkPreviousTimeStep, UnmarkPreviousTimeStep, apply_graph_edit
 
 # Re-exporting PlantMeteo main functions:
 export Atmosphere, TimeStepTable, Constants, Weather
diff --git a/src/model_discovery.jl b/src/model_discovery.jl
new file mode 100644
index 00000000..1be00446
--- /dev/null
+++ b/src/model_discovery.jl
@@ -0,0 +1,242 @@
+const _MODEL_PARAMETER_TYPE_CHOICES = (
+    :float,
+    :integer,
+    :boolean,
+    :symbol,
+    :string,
+    :nothing,
+    :julia,
+)
+
+const _MODEL_DISCOVERY_EXCLUDED_NAMES = Set{Symbol}([
+    :MultiScaleModel,
+    :ModelSpec,
+])
+
+"""
+    available_processes()
+
+Return process abstract model types visible in the current Julia session.
+
+Packages become discoverable after the user loads them with `using PackageName`.
+"""
+function available_processes()
+    processes = Type[]
+    for T in _abstract_model_subtypes()
+        _is_process_type(T) || continue
+        push!(processes, T)
+    end
+    return sort!(unique(processes); by=T -> string(process_(T)))
+end
+
+"""
+    available_models()
+    available_models(process::Symbol)
+    available_models(process_type::Type{<:AbstractModel})
+
+Return model implementation types visible in the current Julia session.
+"""
+function available_models()
+    models = Type[]
+    for T in _abstract_model_subtypes()
+        _is_available_model_type(T) || continue
+        push!(models, T)
+    end
+    return sort!(unique(models); by=T -> string(_process_name_for_type(T), ".", nameof(T)))
+end
+
+function available_models(process_name::Symbol)
+    filter(T -> _process_name_for_type(T) == process_name, available_models())
+end
+
+function available_models(process_type::Type{<:AbstractModel})
+    process_name = _is_process_type(process_type) ? process_(process_type) : _process_name_for_type(process_type)
+    return available_models(process_name)
+end
+
+"""
+    model_descriptor(::Type{<:AbstractModel})
+
+Return renderer-friendly metadata for one model implementation type.
+"""
+function model_descriptor(::Type{T}) where {T<:AbstractModel}
+    process_type = _process_type_for_model(T)
+    process_name = isnothing(process_type) ? nothing : process_(process_type)
+    constructor = model_constructor_descriptor(T)
+    return Dict{String,Any}(
+        "type" => string(T),
+        "name" => string(nameof(T)),
+        "process" => isnothing(process_name) ? nothing : string(process_name),
+        "processType" => isnothing(process_type) ? nothing : string(process_type),
+        "inputs" => _model_var_descriptor(T, inputs_),
+        "outputs" => _model_var_descriptor(T, outputs_),
+        "timespec" => _safe_string_trait(T, timespec),
+        "outputPolicy" => _safe_string_trait(T, output_policy),
+        "timestepHint" => _safe_string_trait(T, timestep_hint),
+        "meteoHint" => _safe_string_trait(T, meteo_hint),
+        "constructor" => constructor,
+    )
+end
+
+"""
+    model_constructor_descriptor(::Type{<:AbstractModel})
+
+Return best-effort constructor metadata inferred from struct fields and an
+optional zero-argument constructor.
+"""
+function model_constructor_descriptor(::Type{T}) where {T<:AbstractModel}
+    unwrapped_type = Base.unwrap_unionall(T)
+    names = collect(fieldnames(unwrapped_type))
+    declared_types = collect(fieldtypes(unwrapped_type))
+    default_instance = _try_zero_arg_model(T)
+    has_defaults = !isnothing(default_instance)
+
+    fields = Dict{String,Any}[]
+    parameter_groups = Dict{String,Vector{String}}()
+    for (i, name) in pairs(names)
+        declared = declared_types[i]
+        default = has_defaults ? getfield(default_instance, name) : nothing
+        default_type = has_defaults ? typeof(default) : nothing
+        parameter_key = _field_type_parameter_key(declared)
+        inferred_choice = _parameter_choice(default_type, declared)
+        field_name = string(name)
+        if !isnothing(parameter_key)
+            push!(get!(parameter_groups, parameter_key, String[]), field_name)
+        end
+
+        push!(fields, Dict{String,Any}(
+            "name" => field_name,
+            "declaredType" => string(declared),
+            "hasDefault" => has_defaults,
+            "default" => has_defaults ? _jsonable_value(default) : nothing,
+            "defaultType" => isnothing(default_type) ? nothing : string(default_type),
+            "typeParameter" => parameter_key,
+            "inferredChoice" => string(inferred_choice),
+            "choices" => string.(_MODEL_PARAMETER_TYPE_CHOICES),
+        ))
+    end
+
+    return Dict{String,Any}(
+        "type" => string(T),
+        "name" => string(nameof(T)),
+        "fields" => fields,
+        "parameterGroups" => parameter_groups,
+        "hasZeroArgConstructor" => has_defaults,
+        "constructible" => true,
+        "positional" => true,
+        "keyword" => false,
+    )
+end
+
+function _abstract_model_subtypes(root::Type=AbstractModel)
+    found = Type[]
+    for child in InteractiveUtils.subtypes(root)
+        push!(found, child)
+        append!(found, _abstract_model_subtypes(child))
+    end
+    return found
+end
+
+function _is_process_type(T::Type)
+    isabstracttype(T) || return false
+    T === AbstractModel && return false
+    try
+        process_(T)
+        return true
+    catch
+        return false
+    end
+end
+
+function _is_available_model_type(T::Type)
+    isabstracttype(T) && return false
+    nameof(T) in _MODEL_DISCOVERY_EXCLUDED_NAMES && return false
+    isnothing(_process_type_for_model(T)) && return false
+    return true
+end
+
+function _process_type_for_model(T::Type)
+    current = T
+    while current !== Any && current !== AbstractModel
+        _is_process_type(current) && return current
+        current = supertype(current)
+    end
+    return nothing
+end
+
+function _process_name_for_type(T::Type)
+    process_type = _process_type_for_model(T)
+    isnothing(process_type) && return Symbol(nameof(T))
+    return process_(process_type)
+end
+
+function _model_var_descriptor(::Type{T}, accessor) where {T<:AbstractModel}
+    instance = _try_zero_arg_model(T)
+    isnothing(instance) && return Dict{String,Any}()
+    vars = try
+        accessor(instance)
+    catch err
+        return Dict{String,Any}("_error" => sprint(showerror, err))
+    end
+    return Dict(string(k) => _jsonable_value(v) for (k, v) in pairs(vars))
+end
+
+function _safe_string_trait(::Type{T}, trait) where {T<:AbstractModel}
+    value = try
+        trait(T)
+    catch
+        instance = _try_zero_arg_model(T)
+        isnothing(instance) && return nothing
+        try
+            trait(instance)
+        catch err
+            return string("error: ", sprint(showerror, err))
+        end
+    end
+    return string(value)
+end
+
+function _try_zero_arg_model(::Type{T}) where {T<:AbstractModel}
+    try
+        return T()
+    catch
+        return nothing
+    end
+end
+
+function _field_type_parameter_key(field_type)
+    field_type isa TypeVar && return string(field_type.name)
+    return nothing
+end
+
+function _parameter_choice(default_type, declared_type)
+    !isnothing(default_type) && return _parameter_choice_from_type(default_type)
+    return _parameter_choice_from_type(declared_type)
+end
+
+function _parameter_choice_from_type(T)
+    try
+        T === Nothing && return :nothing
+        T === Any && return :float
+        T isa TypeVar && return :float
+        T === Bool && return :boolean
+        T <: Integer && return :integer
+        T <: AbstractFloat && return :float
+        T <: Real && return :float
+        T <: Symbol && return :symbol
+        T <: AbstractString && return :string
+    catch
+        return :float
+    end
+    return :julia
+end
+
+function _jsonable_value(value)
+    value === nothing && return nothing
+    value isa Bool && return value
+    value isa Real && isfinite(value) && return value
+    value isa Symbol && return string(":", value)
+    value isa AbstractString && return value
+    value isa AbstractArray && return string(typeof(value), " length ", length(value))
+    return string(value)
+end
diff --git a/src/visualization/dependency_graph_view.jl b/src/visualization/dependency_graph_view.jl
index da63cb78..5fdb2485 100644
--- a/src/visualization/dependency_graph_view.jl
+++ b/src/visualization/dependency_graph_view.jl
@@ -63,11 +63,39 @@ struct DependencyGraphView
     scales::Vector{Symbol}
     cyclic::Bool
     cycle_nodes::Vector{String}
+    cycle_edges::Vector{String}
     diagnostics::Vector{String}
 end
 
 abstract type AbstractGraphEdit end
 
+struct AddModel{P} <: AbstractGraphEdit
+    scale::Symbol
+    model_type::Type
+    parameters::P
+end
+
+struct RemoveModel <: AbstractGraphEdit
+    scale::Symbol
+    process::Symbol
+end
+
+struct ReplaceModel{P} <: AbstractGraphEdit
+    scale::Symbol
+    process::Symbol
+    model_type::Type
+    parameters::P
+end
+
+struct SetMappedVariable <: AbstractGraphEdit
+    scale::Symbol
+    process::Symbol
+    variable::Symbol
+    source_scale::Symbol
+    source_variable::Symbol
+    mode::Symbol
+end
+
 """
     MarkPreviousTimeStep(scale, process, variable)
 
@@ -80,25 +108,53 @@ struct MarkPreviousTimeStep <: AbstractGraphEdit
     variable::Symbol
 end
 
+struct UnmarkPreviousTimeStep <: AbstractGraphEdit
+    scale::Symbol
+    process::Symbol
+    variable::Symbol
+end
+
 """
+    compile_graph_view(mapping; strict=false)
     graph_view(mapping)
     graph_view(sim::GraphSimulation)
 
 Build a renderer-independent view of a dependency graph.
 """
-function graph_view(mapping::ModelMapping; verbose::Bool=false)
+function compile_graph_view(mapping::ModelMapping; verbose::Bool=false, strict::Bool=false)
     diagnostics = String[]
-    graph = try
+    graph, diagnostics = try
         dep(mapping; verbose=verbose)
     catch err
+        strict && rethrow()
         msg = sprint(showerror, err)
         push!(diagnostics, msg)
-        return _graph_view_from_mapping_only(mapping, diagnostics)
-    end
+        graph_for_view = _dependency_graph_for_view(mapping, diagnostics)
+        isnothing(graph_for_view) && return _graph_view_from_mapping_only(mapping, diagnostics)
+        graph_for_view
+    end, diagnostics
 
     return graph_view(graph, mapping; diagnostics=diagnostics)
 end
 
+function graph_view(mapping::ModelMapping; kwargs...)
+    return compile_graph_view(mapping; kwargs...)
+end
+
+function _dependency_graph_for_view(mapping::ModelMapping{MultiScale}, diagnostics)
+    try
+        soft_dep_graphs_roots, hard_dep_dict = hard_dependencies(mapping; verbose=false)
+        mapped_vars = mapped_variables(mapping, soft_dep_graphs_roots, verbose=false)
+        reverse_multiscale_mapping = reverse_mapping(mapped_vars, all=false)
+        return soft_dependencies_multiscale(soft_dep_graphs_roots, reverse_multiscale_mapping, hard_dep_dict)
+    catch err
+        push!(diagnostics, sprint(showerror, err))
+        return nothing
+    end
+end
+
+_dependency_graph_for_view(::ModelMapping, diagnostics) = nothing
+
 function graph_view(sim::GraphSimulation; diagnostics::Vector{String}=String[])
     return graph_view(sim.dependency_graph, sim; diagnostics=diagnostics)
 end
@@ -149,8 +205,23 @@ function graph_view(graph::DependencyGraph, context=nothing; diagnostics::Vector
 
     cyclic, cycle_vec = is_graph_cyclic(graph; warn=false)
     cycle_nodes = cyclic ? [_model_node_id(last(pair), process(first(pair))) for pair in cycle_vec] : String[]
+    cycle_edges = cyclic ? _cycle_edge_ids(edges, cycle_nodes) : String[]
     scales = sort!(unique([node.scale for node in nodes]); by=string)
-    return DependencyGraphView(nodes, edges, scales, cyclic, cycle_nodes, diagnostics)
+    return DependencyGraphView(nodes, edges, scales, cyclic, cycle_nodes, cycle_edges, diagnostics)
+end
+
+function _cycle_edge_ids(edges::Vector{GraphEdge}, cycle_nodes::Vector{String})
+    ids = String[]
+    length(cycle_nodes) < 2 && return ids
+    for i in 1:(length(cycle_nodes)-1)
+        source = cycle_nodes[i + 1]
+        target = cycle_nodes[i]
+        for edge in edges
+            edge.source == source && edge.target == target || continue
+            push!(ids, edge.id)
+        end
+    end
+    return unique(ids)
 end
 
 function _push_edge!(edges::Vector{GraphEdge}, edge_ids::Set{String}, edge::GraphEdge)
@@ -361,10 +432,181 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::MarkPreviousT
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
+function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::UnmarkPreviousTimeStep)
+    haskey(mapping, edit.scale) || error("Cannot unmark `$(edit.variable)` as previous timestep: scale `$(edit.scale)` is not present in the `ModelMapping`.")
+
+    found = Ref(false)
+    data = Dict{Symbol,Any}()
+    for (scale, entry) in pairs(mapping)
+        data[scale] = scale == edit.scale ? _unmark_previous_timestep_entry(entry, edit, found) : entry
+    end
+
+    found[] || error("Cannot unmark `$(edit.variable)` as previous timestep: process `$(edit.process)` was not found at scale `$(edit.scale)`.")
+    return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
+end
+
+function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::AddModel)
+    haskey(mapping, edit.scale) || error("Cannot add model: scale `$(edit.scale)` is not present in the `ModelMapping`.")
+    model = _construct_graph_edit_model(edit.model_type, edit.parameters)
+    process_name = process(model)
+    any(existing -> process(existing) == process_name, get_models(mapping[edit.scale])) && error(
+        "Cannot add `$(typeof(model))` at scale `$(edit.scale)`: process `$process_name` already exists at this scale."
+    )
+
+    data = Dict{Symbol,Any}()
+    for (scale, entry) in pairs(mapping)
+        data[scale] = scale == edit.scale ? _insert_model_entry(entry, model) : entry
+    end
+    return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
+end
+
+function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::RemoveModel)
+    haskey(mapping, edit.scale) || error("Cannot remove model: scale `$(edit.scale)` is not present in the `ModelMapping`.")
+    found = Ref(false)
+    data = Dict{Symbol,Any}()
+    for (scale, entry) in pairs(mapping)
+        data[scale] = scale == edit.scale ? _remove_model_entry(entry, edit.process, found) : entry
+    end
+    found[] || error("Cannot remove model: process `$(edit.process)` was not found at scale `$(edit.scale)`.")
+    return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
+end
+
+function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::ReplaceModel)
+    haskey(mapping, edit.scale) || error("Cannot replace model: scale `$(edit.scale)` is not present in the `ModelMapping`.")
+    model = _construct_graph_edit_model(edit.model_type, edit.parameters)
+    process(model) == edit.process || error(
+        "Cannot replace process `$(edit.process)` with `$(typeof(model))`: replacement model implements process `$(process(model))`."
+    )
+    found = Ref(false)
+    data = Dict{Symbol,Any}()
+    for (scale, entry) in pairs(mapping)
+        data[scale] = scale == edit.scale ? _replace_model_entry(entry, edit.process, model, found) : entry
+    end
+    found[] || error("Cannot replace model: process `$(edit.process)` was not found at scale `$(edit.scale)`.")
+    return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
+end
+
+function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::SetMappedVariable)
+    haskey(mapping, edit.scale) || error("Cannot set mapping: scale `$(edit.scale)` is not present in the `ModelMapping`.")
+    found = Ref(false)
+    data = Dict{Symbol,Any}()
+    for (scale, entry) in pairs(mapping)
+        data[scale] = scale == edit.scale ? _set_mapped_variable_entry(entry, edit, found) : entry
+    end
+    found[] || error("Cannot set mapping for `$(edit.variable)`: process `$(edit.process)` was not found at scale `$(edit.scale)`.")
+    return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
+end
+
 function apply_graph_edit(mapping::ModelMapping, edit::AbstractGraphEdit)
     error("Graph edit `$(typeof(edit))` is not supported for `$(typeof(mapping))`.")
 end
 
+function _construct_graph_edit_model(model_type::Type, parameters::NamedTuple)
+    names = fieldnames(model_type)
+    if isempty(parameters)
+        try
+            return model_type()
+        catch
+        end
+    end
+    isempty(names) && isempty(parameters) && return model_type()
+    values = Any[]
+    for name in names
+        haskey(parameters, name) || error("Missing constructor parameter `$name` for model `$(model_type)`.")
+        push!(values, parameters[name])
+    end
+    return model_type(values...)
+end
+
+_construct_graph_edit_model(model_type::Type, parameters::AbstractDict) =
+    _construct_graph_edit_model(model_type, (; (Symbol(k) => v for (k, v) in pairs(parameters))...))
+
+function _insert_model_entry(entry::Tuple, model)
+    items = Any[]
+    inserted = false
+    for item in entry
+        if !inserted && item isa Status
+            push!(items, model)
+            inserted = true
+        end
+        push!(items, item)
+    end
+    inserted || push!(items, model)
+    return tuple(items...)
+end
+
+_insert_model_entry(entry, model) = _insert_model_entry((entry,), model)
+
+function _remove_model_entry(entry::Tuple, process_name::Symbol, found::Base.RefValue{Bool})
+    items = Any[]
+    for item in entry
+        if !(item isa Status) && process(model_(as_model_spec(item))) == process_name
+            found[] = true
+            continue
+        end
+        push!(items, item)
+    end
+    return tuple(items...)
+end
+
+_remove_model_entry(entry, process_name::Symbol, found::Base.RefValue{Bool}) =
+    _remove_model_entry((entry,), process_name, found)
+
+function _replace_model_entry(entry::Tuple, process_name::Symbol, model, found::Base.RefValue{Bool})
+    return tuple((_replace_model_item(item, process_name, model, found) for item in entry)...)
+end
+
+_replace_model_entry(entry, process_name::Symbol, model, found::Base.RefValue{Bool}) =
+    _replace_model_item(entry, process_name, model, found)
+
+function _replace_model_item(item::Status, ::Symbol, model, ::Base.RefValue{Bool})
+    return item
+end
+
+function _replace_model_item(item, process_name::Symbol, model, found::Base.RefValue{Bool})
+    spec = as_model_spec(item)
+    process(model_(spec)) == process_name || return item
+    found[] = true
+    return ModelSpec(spec; model=model)
+end
+
+function _set_mapped_variable_entry(entry::Tuple, edit::SetMappedVariable, found::Base.RefValue{Bool})
+    return tuple((_set_mapped_variable_item(item, edit, found) for item in entry)...)
+end
+
+_set_mapped_variable_entry(entry, edit::SetMappedVariable, found::Base.RefValue{Bool}) =
+    _set_mapped_variable_item(entry, edit, found)
+
+_set_mapped_variable_item(item::Status, ::SetMappedVariable, ::Base.RefValue{Bool}) = item
+
+function _set_mapped_variable_item(item, edit::SetMappedVariable, found::Base.RefValue{Bool})
+    spec = as_model_spec(item)
+    process(model_(spec)) == edit.process || return item
+    edit.variable in keys(variables(model_(spec))) || error(
+        "Cannot map `$(edit.variable)` for process `$(edit.process)` at scale `$(edit.scale)`: ",
+        "the variable is not declared as an input or output of `$(typeof(model_(spec)))`."
+    )
+    found[] = true
+    source = edit.mode in (:multi, :multi_node, :vector) ?
+        [edit.source_scale => edit.source_variable] :
+        edit.source_scale => edit.source_variable
+    return ModelSpec(spec; multiscale=_set_mapping_item(spec.multiscale, edit.variable, source))
+end
+
+function _set_mapping_item(mapping, variable::Symbol, source)
+    mapped = isnothing(mapping) ? Any[] : Any[collect(mapping)...]
+    for i in eachindex(mapped)
+        item = mapped[i]
+        lhs = item isa Pair ? first(item) : item
+        lhs_var = lhs isa PreviousTimeStep ? lhs.variable : lhs
+        lhs_var == variable || continue
+        mapped[i] = lhs isa PreviousTimeStep ? PreviousTimeStep(variable) => source : variable => source
+        return mapped
+    end
+    push!(mapped, variable => source)
+    return mapped
+end
+
 function _mark_previous_timestep_entry(entry::Tuple, edit::MarkPreviousTimeStep, found::Base.RefValue{Bool})
     return tuple((_mark_previous_timestep_item(item, edit, found) for item in entry)...)
 end
@@ -411,6 +653,41 @@ function _mark_previous_timestep_mapping(mapping, variable::Symbol)
     return mapped
 end
 
+function _unmark_previous_timestep_entry(entry::Tuple, edit::UnmarkPreviousTimeStep, found::Base.RefValue{Bool})
+    return tuple((_unmark_previous_timestep_item(item, edit, found) for item in entry)...)
+end
+
+_unmark_previous_timestep_entry(entry, edit::UnmarkPreviousTimeStep, found::Base.RefValue{Bool}) =
+    _unmark_previous_timestep_item(entry, edit, found)
+
+_unmark_previous_timestep_item(item::Status, ::UnmarkPreviousTimeStep, ::Base.RefValue{Bool}) = item
+
+function _unmark_previous_timestep_item(item, edit::UnmarkPreviousTimeStep, found::Base.RefValue{Bool})
+    spec = as_model_spec(item)
+    process(model_(spec)) == edit.process || return item
+    found[] = true
+    return ModelSpec(spec; multiscale=_unmark_previous_timestep_mapping(spec.multiscale, edit.variable))
+end
+
+function _unmark_previous_timestep_mapping(mapping, variable::Symbol)
+    isnothing(mapping) && return mapping
+    mapped = Any[]
+    for item in mapping
+        if item isa Pair && first(item) isa PreviousTimeStep && first(item).variable == variable
+            source = last(item)
+            if source == (Symbol("") => variable)
+                continue
+            end
+            push!(mapped, variable => source)
+        elseif item isa PreviousTimeStep && item.variable == variable
+            continue
+        else
+            push!(mapped, item)
+        end
+    end
+    return mapped
+end
+
 function _graph_view_from_mapping_only(mapping::ModelMapping, diagnostics)
     nodes = GraphNode[]
     for (scale, entry) in pairs(mapping)
@@ -434,7 +711,9 @@ function _graph_view_from_mapping_only(mapping::ModelMapping, diagnostics)
         end
     end
     scales = sort!(unique([node.scale for node in nodes]); by=string)
-    return DependencyGraphView(nodes, GraphEdge[], scales, any(occursin.("Cyclic", diagnostics)), String[], diagnostics)
+    cyclic = any(occursin.("Cyclic", diagnostics))
+    cycle_nodes = cyclic ? [node.id for node in nodes] : String[]
+    return DependencyGraphView(nodes, GraphEdge[], scales, cyclic, cycle_nodes, String[], diagnostics)
 end
 
 function _graph_node(node::AbstractDependencyNode, id::String, context, node_ids)
@@ -633,6 +912,7 @@ function _graph_view_dict(view::DependencyGraphView)
         "scales" => string.(view.scales),
         "cyclic" => view.cyclic,
         "cycleNodes" => view.cycle_nodes,
+        "cycleEdges" => view.cycle_edges,
         "diagnostics" => view.diagnostics,
     )
 end
@@ -682,45 +962,7 @@ function _edge_dict(edge::GraphEdge)
     )
 end
 
-function _json(value)
-    io = IOBuffer()
-    _write_json(io, value)
-    return String(take!(io))
-end
-
-function _write_json(io, value::AbstractDict)
-    print(io, "{")
-    first_item = true
-    for (key, val) in value
-        first_item || print(io, ",")
-        first_item = false
-        _write_json(io, string(key))
-        print(io, ":")
-        _write_json(io, val)
-    end
-    print(io, "}")
-end
-
-function _write_json(io, value::AbstractVector)
-    print(io, "[")
-    for (i, val) in pairs(value)
-        i == firstindex(value) || print(io, ",")
-        _write_json(io, val)
-    end
-    print(io, "]")
-end
-
-_write_json(io, value::Nothing) = print(io, "null")
-_write_json(io, value::Bool) = print(io, value ? "true" : "false")
-_write_json(io, value::Real) = isfinite(value) ? print(io, value) : _write_json(io, string(value))
-_write_json(io, value::Symbol) = _write_json(io, string(value))
-_write_json(io, value::AbstractString) = print(io, "\"", _escape_json(value), "\"")
-_write_json(io, value) = _write_json(io, string(value))
-
-function _escape_json(s::AbstractString)
-    escaped = replace(s, "\\" => "\\\\", "\"" => "\\\"", "\n" => "\\n", "\r" => "\\r", "\t" => "\\t")
-    return replace(escaped, "</" => "<\\/")
-end
+_json(value) = replace(JSON.json(value), "</" => "<\\/")
 
 function _graph_view_html(view::DependencyGraphView; renderer::Symbol=:react)
     if renderer == :react
diff --git a/test/test-dependency-graph-view.jl b/test/test-dependency-graph-view.jl
index da25a7dd..3431d1c8 100644
--- a/test/test-dependency-graph-view.jl
+++ b/test/test-dependency-graph-view.jl
@@ -1,10 +1,16 @@
 abstract type AbstractGraphViewPlantAgeModel <: PlantSimEngine.AbstractModel end
 abstract type AbstractGraphViewPhytomerEmissionModel <: PlantSimEngine.AbstractModel end
 abstract type AbstractGraphViewInitiationAgeModel <: PlantSimEngine.AbstractModel end
+abstract type AbstractGraphViewParamModel <: PlantSimEngine.AbstractModel end
+abstract type AbstractGraphViewCyclePlantModel <: PlantSimEngine.AbstractModel end
+abstract type AbstractGraphViewCycleLeafModel <: PlantSimEngine.AbstractModel end
 
 PlantSimEngine.process_(::Type{AbstractGraphViewPlantAgeModel}) = :graph_view_plant_age
 PlantSimEngine.process_(::Type{AbstractGraphViewPhytomerEmissionModel}) = :graph_view_phytomer_emission
 PlantSimEngine.process_(::Type{AbstractGraphViewInitiationAgeModel}) = :graph_view_initiation_age
+PlantSimEngine.process_(::Type{AbstractGraphViewParamModel}) = :graph_view_param
+PlantSimEngine.process_(::Type{AbstractGraphViewCyclePlantModel}) = :graph_view_cycle_plant
+PlantSimEngine.process_(::Type{AbstractGraphViewCycleLeafModel}) = :graph_view_cycle_leaf
 
 struct GraphViewPlantAgeModel <: AbstractGraphViewPlantAgeModel
 end
@@ -25,6 +31,35 @@ end
 PlantSimEngine.inputs_(::GraphViewInitiationAgeModel) = (plant_age=-Inf,)
 PlantSimEngine.outputs_(::GraphViewInitiationAgeModel) = (initiation_age=-Inf,)
 
+struct GraphViewParamModel{T} <: AbstractGraphViewParamModel
+    a::T
+    b::T
+end
+
+PlantSimEngine.inputs_(::GraphViewParamModel) = (x=-Inf,)
+PlantSimEngine.outputs_(::GraphViewParamModel) = (y=-Inf,)
+
+struct GraphViewDefaultParamModel <: AbstractGraphViewParamModel
+    alpha::Float64
+    mode::Symbol
+end
+
+GraphViewDefaultParamModel() = GraphViewDefaultParamModel(1.5, :fast)
+PlantSimEngine.inputs_(::GraphViewDefaultParamModel) = (x=-Inf,)
+PlantSimEngine.outputs_(::GraphViewDefaultParamModel) = (z=-Inf,)
+
+struct GraphViewCyclePlantModel <: AbstractGraphViewCyclePlantModel
+end
+
+PlantSimEngine.inputs_(::GraphViewCyclePlantModel) = (y=-Inf,)
+PlantSimEngine.outputs_(::GraphViewCyclePlantModel) = (x=-Inf,)
+
+struct GraphViewCycleLeafModel <: AbstractGraphViewCycleLeafModel
+end
+
+PlantSimEngine.inputs_(::GraphViewCycleLeafModel) = (x=-Inf,)
+PlantSimEngine.outputs_(::GraphViewCycleLeafModel) = (y=-Inf,)
+
 @testset "Dependency graph view" begin
     mapping = ModelMapping(
         ToyLAIModel(),
@@ -118,4 +153,57 @@ PlantSimEngine.outputs_(::GraphViewInitiationAgeModel) = (initiation_age=-Inf,)
     @test any(edge -> edge.kind == :mapped_variable && edge.source_variable == :plant_age && edge.target_variable == :plant_age, plant_age_edges)
     @test !any(edge -> edge.source_variable == :last_phytomer, plant_age_edges)
     @test any(edge -> edge.kind == :hard_dependency && isnothing(edge.source_port) && isnothing(edge.target_port), hard_mapped_view.edges)
+
+    @test AbstractGraphViewParamModel in available_processes()
+    @test GraphViewParamModel in available_models(:graph_view_param)
+    descriptor = model_constructor_descriptor(GraphViewParamModel)
+    fields = descriptor["fields"]
+    @test length(fields) == 2
+    @test fields[1]["typeParameter"] == "T"
+    @test fields[2]["typeParameter"] == "T"
+    @test descriptor["parameterGroups"]["T"] == ["a", "b"]
+    @test fields[1]["inferredChoice"] == "float"
+
+    default_descriptor = model_constructor_descriptor(GraphViewDefaultParamModel)
+    default_fields = default_descriptor["fields"]
+    @test default_descriptor["hasZeroArgConstructor"]
+    @test default_fields[1]["default"] == 1.5
+    @test default_fields[1]["inferredChoice"] == "float"
+    @test default_fields[2]["default"] == ":fast"
+    @test default_fields[2]["inferredChoice"] == "symbol"
+
+    add_mapping = ModelMapping(:Plant => (GraphViewPlantAgeModel(), Status(day=1.0)))
+    added_mapping = apply_graph_edit(add_mapping, AddModel(:Plant, GraphViewPhytomerEmissionModel, NamedTuple()))
+    @test any(m -> process(m) == :graph_view_phytomer_emission, PlantSimEngine.get_models(added_mapping[:Plant]))
+    @test_throws "already exists" apply_graph_edit(added_mapping, AddModel(:Plant, GraphViewPhytomerEmissionModel, NamedTuple()))
+    removed_mapping = apply_graph_edit(added_mapping, RemoveModel(:Plant, :graph_view_phytomer_emission))
+    @test !any(m -> process(m) == :graph_view_phytomer_emission, PlantSimEngine.get_models(removed_mapping[:Plant]))
+    replaced_mapping = apply_graph_edit(add_mapping, ReplaceModel(:Plant, :graph_view_plant_age, GraphViewPlantAgeModel, NamedTuple()))
+    @test only(PlantSimEngine.get_models(replaced_mapping[:Plant])) isa GraphViewPlantAgeModel
+
+    mapped_edit_mapping = apply_graph_edit(
+        hard_mapped_mapping,
+        SetMappedVariable(:Phytomer, :graph_view_initiation_age, :plant_age, :Plant, :plant_age, :single),
+    )
+    mapped_spec = PlantSimEngine.parse_model_specs(mapped_edit_mapping[:Phytomer])[:graph_view_initiation_age]
+    @test first(PlantSimEngine.mapped_variables_(mapped_spec)) == (:plant_age => (:Plant => :plant_age))
+
+    unmarked_mapping = apply_graph_edit(edited_mapping, UnmarkPreviousTimeStep(:Leaf, :carbon_assimilation, :soil_water_content))
+    unmarked_view = graph_view(unmarked_mapping)
+    @test any(
+        edge -> edge.source_variable == :soil_water_content &&
+                edge.target_variable == :soil_water_content &&
+                edge.source != edge.target,
+        unmarked_view.edges,
+    )
+
+    cyclic_mapping = ModelMapping(
+        :Plant => MultiScaleModel(GraphViewCyclePlantModel(), [:y => [:Leaf]]),
+        :Leaf => MultiScaleModel(GraphViewCycleLeafModel(), [:x => :Plant]),
+    )
+    @test_throws "Cyclic dependency detected" dep(cyclic_mapping)
+    cyclic_view = graph_view(cyclic_mapping)
+    @test cyclic_view.cyclic
+    @test !isempty(cyclic_view.cycle_nodes)
+    @test occursin("Cyclic dependency detected", join(cyclic_view.diagnostics, "\n"))
 end

From 4a13d75c51d1d26b1f11b687a9d7bdb2f875b830 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Tue, 5 May 2026 07:27:07 +0200
Subject: [PATCH 02/19] Move graph editor into a PlantSimEngine extension

---
 Project.toml                                  |  7 ++++++
 .../PlantSimEngineGraphEditorExt.jl           | 14 ++++++-----
 lib/PlantSimEngineGraphEditor/Project.toml    | 16 ------------
 src/PlantSimEngine.jl                         |  2 ++
 src/visualization/graph_editor_api.jl         | 25 +++++++++++++++++++
 5 files changed, 42 insertions(+), 22 deletions(-)
 rename lib/PlantSimEngineGraphEditor/src/PlantSimEngineGraphEditor.jl => ext/PlantSimEngineGraphEditorExt.jl (94%)
 delete mode 100644 lib/PlantSimEngineGraphEditor/Project.toml
 create mode 100644 src/visualization/graph_editor_api.jl

diff --git a/Project.toml b/Project.toml
index a4d1a192..84eae66b 100644
--- a/Project.toml
+++ b/Project.toml
@@ -20,6 +20,12 @@ Statistics = "10745b16-79ce-11e8-11f9-7d13ad32a3b2"
 Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 Term = "22787eb5-b846-44ae-b979-8e399b8463ab"
 
+[weakdeps]
+HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
+
+[extensions]
+PlantSimEngineGraphEditorExt = "HTTP"
+
 [compat]
 AbstractTrees = "0.4"
 CSV = "0.10"
@@ -27,6 +33,7 @@ DataAPI = "1.15"
 DataFrames = "1"
 Dates = "1.10"
 FLoops = "0.2"
+HTTP = "1"
 InteractiveUtils = "1.10"
 JSON = "1"
 Markdown = "1.10"
diff --git a/lib/PlantSimEngineGraphEditor/src/PlantSimEngineGraphEditor.jl b/ext/PlantSimEngineGraphEditorExt.jl
similarity index 94%
rename from lib/PlantSimEngineGraphEditor/src/PlantSimEngineGraphEditor.jl
rename to ext/PlantSimEngineGraphEditorExt.jl
index 62811d49..fa29a9b2 100644
--- a/lib/PlantSimEngineGraphEditor/src/PlantSimEngineGraphEditor.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -1,12 +1,11 @@
-module PlantSimEngineGraphEditor
+module PlantSimEngineGraphEditorExt
 
 import HTTP
 import JSON
 import PlantSimEngine
+import PlantSimEngine: edit_graph, current_mapping, apply_edit!, undo!, redo!
 
-export GraphEditorSession, edit_graph, current_mapping, apply_edit!, undo!, redo!, close
-
-mutable struct GraphEditorSession{M,G,S}
+mutable struct GraphEditorSession{M,G,S} <: PlantSimEngine.AbstractGraphEditorSession
     mapping::M
     mtg::G
     history::Vector{M}
@@ -25,8 +24,11 @@ Base.close(session::GraphEditorSession) = close(session.server)
 
 Start a local graph editor session. The returned session owns the current
 `ModelMapping`; call `current_mapping(session)` to recover the edited mapping.
+
+This method is provided by the `PlantSimEngineGraphEditorExt` package extension.
+Load `HTTP` in the active session to make it available.
 """
-function edit_graph(mapping; mtg=nothing, host::AbstractString="127.0.0.1", port::Integer=8765)
+function edit_graph(mapping::PlantSimEngine.ModelMapping; mtg=nothing, host::AbstractString="127.0.0.1", port::Integer=8765)
     session_ref = Ref{Any}()
     handler = http -> _handle_http(session_ref[], http)
     server = HTTP.listen!(handler, host, port; listenany=true, verbose=false)
@@ -280,6 +282,6 @@ function _react_editor_html(session::GraphEditorSession)
 """
 end
 
-_frontend_dist_dir() = normpath(joinpath(@__DIR__, "..", "..", "..", "frontend", "dist"))
+_frontend_dist_dir() = normpath(joinpath(@__DIR__, "..", "frontend", "dist"))
 
 end
diff --git a/lib/PlantSimEngineGraphEditor/Project.toml b/lib/PlantSimEngineGraphEditor/Project.toml
deleted file mode 100644
index 749b7ad6..00000000
--- a/lib/PlantSimEngineGraphEditor/Project.toml
+++ /dev/null
@@ -1,16 +0,0 @@
-name = "PlantSimEngineGraphEditor"
-uuid = "7cf0a04e-a9b1-4d1f-a906-d86a8c54d709"
-version = "0.1.0"
-authors = ["Rémi Vezy <VEZY@users.noreply.github.com>"]
-
-[deps]
-HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
-JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
-PlantSimEngine = "9a576370-710b-4269-adf9-4f603a9c6423"
-
-[sources]
-PlantSimEngine = {path = "../.."}
-
-[compat]
-HTTP = "1"
-JSON = "1"
diff --git a/src/PlantSimEngine.jl b/src/PlantSimEngine.jl
index e12f7fb7..198c9b63 100644
--- a/src/PlantSimEngine.jl
+++ b/src/PlantSimEngine.jl
@@ -112,6 +112,7 @@ include("run.jl")
 
 # Dependency graph visualisation:
 include("visualization/dependency_graph_view.jl")
+include("visualization/graph_editor_api.jl")
 
 # Fitting
 include("evaluation/fit.jl")
@@ -146,6 +147,7 @@ export run!
 export fit
 export GraphPort, GraphNode, GraphEdge, DependencyGraphView
 export graph_view, graph_view_json, write_graph_view, compile_graph_view
+export AbstractGraphEditorSession, edit_graph, current_mapping, apply_edit!, undo!, redo!
 export available_processes, available_models, model_descriptor, model_constructor_descriptor
 export AbstractGraphEdit, AddModel, RemoveModel, ReplaceModel, SetMappedVariable, MarkPreviousTimeStep, UnmarkPreviousTimeStep, apply_graph_edit
 
diff --git a/src/visualization/graph_editor_api.jl b/src/visualization/graph_editor_api.jl
new file mode 100644
index 00000000..b1e85f38
--- /dev/null
+++ b/src/visualization/graph_editor_api.jl
@@ -0,0 +1,25 @@
+abstract type AbstractGraphEditorSession end
+
+function _graph_editor_missing_http()
+    throw(ArgumentError("Interactive graph editing requires HTTP.jl. Load it with `using HTTP` before calling `edit_graph`."))
+end
+
+function edit_graph(args...; kwargs...)
+    _graph_editor_missing_http()
+end
+
+function current_mapping(session::AbstractGraphEditorSession)
+    _graph_editor_missing_http()
+end
+
+function apply_edit!(session::AbstractGraphEditorSession, edit::AbstractGraphEdit)
+    _graph_editor_missing_http()
+end
+
+function undo!(session::AbstractGraphEditorSession)
+    _graph_editor_missing_http()
+end
+
+function redo!(session::AbstractGraphEditorSession)
+    _graph_editor_missing_http()
+end

From 936c5be02370af45cd531d79fc940a04a4f4d314 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Tue, 5 May 2026 10:28:36 +0200
Subject: [PATCH 03/19] Add docs and more tests for graph editor

---
 docs/make.jl                                  |  1 +
 .../graph_visualization_editor.md             | 51 ++++++++++++++++++
 ext/PlantSimEngineGraphEditorExt.jl           |  6 +--
 src/visualization/dependency_graph_view.jl    |  9 ++++
 src/visualization/graph_editor_api.jl         | 40 ++++++++++++++
 test/Project.toml                             |  1 +
 test/runtests.jl                              |  4 ++
 test/test-graph-editor-extension.jl           | 52 +++++++++++++++++++
 8 files changed, 161 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/step_by_step/graph_visualization_editor.md
 create mode 100644 test/test-graph-editor-extension.jl

diff --git a/docs/make.jl b/docs/make.jl
index 57639391..b7f72f37 100644
--- a/docs/make.jl
+++ b/docs/make.jl
@@ -34,6 +34,7 @@ makedocs(;
             "Detailed first simulation" => "./step_by_step/detailed_first_example.md",
             "Coupling" => "./step_by_step/simple_model_coupling.md",
             "Model Switching" => "./step_by_step/model_switching.md",
+            "Graph visualization and editing" => "./step_by_step/graph_visualization_editor.md",
             "Quick examples" => "./step_by_step/quick_and_dirty_examples.md",
             "Implementing a process" => "./step_by_step/implement_a_process.md",
             "Implementing a model" => "./step_by_step/implement_a_model.md",
diff --git a/docs/src/step_by_step/graph_visualization_editor.md b/docs/src/step_by_step/graph_visualization_editor.md
new file mode 100644
index 00000000..9aeaabc8
--- /dev/null
+++ b/docs/src/step_by_step/graph_visualization_editor.md
@@ -0,0 +1,51 @@
+# Graph visualization and editing
+
+`PlantSimEngine` can export a dependency graph view from a [`ModelMapping`](@ref). The static viewer is available from the core package and does not require any web server dependency.
+
+```julia
+using PlantSimEngine
+using PlantSimEngine.Examples
+
+mapping = ModelMapping(
+    ToyLAIModel(),
+    Beer(0.5);
+    status=(TT_cu=1.0:200.0,),
+)
+
+write_graph_view("dependency_graph.html", mapping)
+```
+
+The same serialization path is used by the interactive editor. The editor is implemented as a Julia package extension, so the HTTP/WebSocket stack is loaded only when [`HTTP.jl`](https://github.com/JuliaWeb/HTTP.jl) is available and loaded in the active session.
+
+```julia
+using PlantSimEngine
+using PlantSimEngine.Examples
+using HTTP
+
+mapping = ModelMapping(
+    ToyLAIModel(),
+    Beer(0.5);
+    status=(TT_cu=1.0:200.0,),
+)
+
+session = edit_graph(mapping)
+session.url
+```
+
+Open `session.url` in a browser to use the live editor. The browser sends edit commands to Julia over a WebSocket. Julia remains the source of truth: it applies the edit, rebuilds the [`ModelMapping`](@ref), recompiles graph diagnostics, and sends the updated graph back to the browser.
+
+Use [`current_mapping`](@ref) to recover the latest mapping from the session:
+
+```julia
+edited_mapping = current_mapping(session)
+close(session)
+```
+
+The editor extension currently supports the same edit operations as the Julia API:
+
+- add, remove, and replace a model at a scale;
+- set a mapped input variable;
+- mark or unmark a variable as [`PreviousTimeStep`](@ref);
+- undo and redo edits inside the live session.
+
+If `HTTP` is not loaded, `edit_graph(mapping)` throws an error explaining that the interactive editor requires `using HTTP`. Static graph visualization through [`write_graph_view`](@ref), `graph_view`, and [`graph_view_json`](@ref) remains available without loading `HTTP`.
diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index fa29a9b2..8bf6b641 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -182,9 +182,9 @@ function _parse_parameter_value(value)
     value isa AbstractDict || return value
     choice = Symbol(get(value, "type", "julia"))
     raw = get(value, "value", nothing)
-    choice == :float && return Float64(raw)
-    choice == :integer && return Int(raw)
-    choice == :boolean && return Bool(raw)
+    choice == :float && return parse(Float64, raw)
+    choice == :integer && return parse(Int, raw)
+    choice == :boolean && return parse(Bool, raw)
     choice == :symbol && return Symbol(raw)
     choice == :string && return String(raw)
     choice == :nothing && return nothing
diff --git a/src/visualization/dependency_graph_view.jl b/src/visualization/dependency_graph_view.jl
index 5fdb2485..b9423a61 100644
--- a/src/visualization/dependency_graph_view.jl
+++ b/src/visualization/dependency_graph_view.jl
@@ -67,6 +67,15 @@ struct DependencyGraphView
     diagnostics::Vector{String}
 end
 
+"""
+    AbstractGraphEdit
+
+Abstract supertype for declarative dependency-graph editor commands.
+
+Concrete edits such as `AddModel`, `RemoveModel`, `ReplaceModel`,
+`SetMappedVariable`, `MarkPreviousTimeStep`, and `UnmarkPreviousTimeStep` are
+applied with `apply_graph_edit`.
+"""
 abstract type AbstractGraphEdit end
 
 struct AddModel{P} <: AbstractGraphEdit
diff --git a/src/visualization/graph_editor_api.jl b/src/visualization/graph_editor_api.jl
index b1e85f38..cfb0d67f 100644
--- a/src/visualization/graph_editor_api.jl
+++ b/src/visualization/graph_editor_api.jl
@@ -4,22 +4,62 @@ function _graph_editor_missing_http()
     throw(ArgumentError("Interactive graph editing requires HTTP.jl. Load it with `using HTTP` before calling `edit_graph`."))
 end
 
+"""
+    edit_graph(mapping; kwargs...)
+
+Start an interactive graph editor session for a [`ModelMapping`](@ref).
+
+The HTTP-backed method is provided by the `PlantSimEngineGraphEditorExt`
+package extension. Load `HTTP` in the active Julia session before calling this
+function:
+
+```julia
+using PlantSimEngine
+using HTTP
+
+session = edit_graph(mapping)
+```
+"""
 function edit_graph(args...; kwargs...)
     _graph_editor_missing_http()
 end
 
+"""
+    current_mapping(session)
+
+Return the current [`ModelMapping`](@ref) stored by an interactive graph editor
+session.
+"""
 function current_mapping(session::AbstractGraphEditorSession)
     _graph_editor_missing_http()
 end
 
+"""
+    apply_edit!(session, edit)
+
+Apply an [`AbstractGraphEdit`](@ref) to an interactive graph editor session and
+return the rebuilt [`ModelMapping`](@ref).
+"""
 function apply_edit!(session::AbstractGraphEditorSession, edit::AbstractGraphEdit)
     _graph_editor_missing_http()
 end
 
+"""
+    undo!(session)
+
+Undo the latest edit in an interactive graph editor session and return the
+current [`ModelMapping`](@ref).
+"""
 function undo!(session::AbstractGraphEditorSession)
     _graph_editor_missing_http()
 end
 
+"""
+    redo!(session)
+
+Redo the latest undone edit in an interactive graph editor session and return
+the current [`ModelMapping`](@ref).
+"""
 function redo!(session::AbstractGraphEditorSession)
     _graph_editor_missing_http()
 end
diff --git a/test/Project.toml b/test/Project.toml
index f806effc..dde1bb0e 100644
--- a/test/Project.toml
+++ b/test/Project.toml
@@ -5,6 +5,7 @@ CSV = "336ed68f-0bac-5ca0-87d4-7b16caf5d00b"
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
 Documenter = "e30172f5-a6a5-5a46-863b-614d45cd2de4"
+HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
 MultiScaleTreeGraph = "dd4a991b-8a45-4075-bede-262ee62d5583"
 PlantMeteo = "4630fe09-e0fb-4da5-a846-781cb73437b6"
 PlantSimEngine = "9a576370-710b-4269-adf9-4f603a9c6423"
diff --git a/test/runtests.jl b/test/runtests.jl
index df596d70..39c43df0 100644
--- a/test/runtests.jl
+++ b/test/runtests.jl
@@ -74,6 +74,10 @@ include("helper-functions.jl")
         include("test-dependency-graph-view.jl")
     end
 
+    @testset "Dependency graph editor extension" begin
+        include("test-graph-editor-extension.jl")
+    end
+
     @testset "MTG with multiscale mapping" begin
         include("test-mtg-multiscale.jl")
         include("test-mtg-dynamic.jl")
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
new file mode 100644
index 00000000..97e6adfc
--- /dev/null
+++ b/test/test-graph-editor-extension.jl
@@ -0,0 +1,52 @@
+using HTTP
+
+@testset "HTTP extension loading and WebSocket edits" begin
+    @test Base.get_extension(PlantSimEngine, :PlantSimEngineGraphEditorExt) !== nothing
+
+    mapping = ModelMapping(
+        :Leaf => (
+            ToyLAIModel(),
+            Beer(0.5),
+            Status(TT_cu=1.0, LAI=2.0),
+        ),
+    )
+    session = edit_graph(mapping; port=0)
+
+    try
+        @test session isa AbstractGraphEditorSession
+        @test startswith(session.url, "http://127.0.0.1:")
+        @test current_mapping(session) === mapping
+
+        state_response = HTTP.get(string(session.url, "/state"))
+        @test state_response.status == 200
+        state = PlantSimEngine.JSON.parse(String(state_response.body))
+        @test state["ok"]
+        @test haskey(state, "graph")
+        @test haskey(state, "models")
+
+        websocket_url = replace(session.url, "http://" => "ws://") * "/ws"
+        HTTP.WebSockets.open(websocket_url) do ws
+            initial = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test initial["ok"]
+            @test haskey(initial, "graph")
+
+            command = PlantSimEngine.JSON.json(Dict(
+                "action" => "edit",
+                "kind" => "remove_model",
+                "scale" => "Leaf",
+                "process" => "light_interception",
+            ))
+            HTTP.WebSockets.send(ws, command)
+
+            response = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test response["ok"]
+            @test response["canUndo"]
+            @test !any(
+                model -> process(model) == :light_interception,
+                PlantSimEngine.get_models(current_mapping(session)[:Leaf]),
+            )
+        end
+    finally
+        close(session)
+    end
+end

From 8ca4159508f37580288da7d6fc614d40b04d5b16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Tue, 5 May 2026 13:27:39 +0200
Subject: [PATCH 04/19] Add browser-opening graph editor session UI

---
 .../graph_visualization_editor.md             |  17 +-
 ext/PlantSimEngineGraphEditorExt.jl           | 156 +++++++++++++-
 frontend/src/App.tsx                          | 201 +++++++++++++++---
 frontend/src/styles.css                       |  71 ++++++-
 frontend/src/types.ts                         |   3 +
 src/visualization/dependency_graph_view.jl    |  16 +-
 src/visualization/graph_editor_api.jl         |   2 +
 test/test-graph-editor-extension.jl           |  66 +++++-
 8 files changed, 488 insertions(+), 44 deletions(-)

diff --git a/docs/src/step_by_step/graph_visualization_editor.md b/docs/src/step_by_step/graph_visualization_editor.md
index 9aeaabc8..ba0c959c 100644
--- a/docs/src/step_by_step/graph_visualization_editor.md
+++ b/docs/src/step_by_step/graph_visualization_editor.md
@@ -30,9 +30,22 @@ mapping = ModelMapping(
 
 session = edit_graph(mapping)
 session.url
+session
 ```
 
-Open `session.url` in a browser to use the live editor. The browser sends edit commands to Julia over a WebSocket. Julia remains the source of truth: it applies the edit, rebuilds the [`ModelMapping`](@ref), recompiles graph diagnostics, and sends the updated graph back to the browser.
+By default, `edit_graph` opens `session.url` in the system default browser. Pass `open_browser=false` to keep the session headless, for example in scripts or tests:
+
+```julia
+session = edit_graph(mapping; open_browser=false)
+```
+
+The browser sends edit commands to Julia over a WebSocket. Julia remains the source of truth: it applies the edit, rebuilds the [`ModelMapping`](@ref), recompiles graph diagnostics, and sends the updated graph back to the browser.
+
+To stop the HTTP/WebSocket session, run:
+
+```julia
+close(session)
+```
 
 Use [`current_mapping`](@ref) to recover the latest mapping from the session:
 
@@ -41,6 +54,8 @@ edited_mapping = current_mapping(session)
 close(session)
 ```
 
+The web editor also exposes a dedicated "Mapping code" panel. It shows the current [`ModelMapping`](@ref) as Julia code, and can write that code to a `.jl` file so it can be copied/pasted or reused in scripts.
+
 The editor extension currently supports the same edit operations as the Julia API:
 
 - add, remove, and replace a model at a scale;
diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index 8bf6b641..ac2c3fb8 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -14,21 +14,53 @@ mutable struct GraphEditorSession{M,G,S} <: PlantSimEngine.AbstractGraphEditorSe
     host::String
     port::Int
     url::String
+    last_saved_path::Union{Nothing,String}
 end
 
 current_mapping(session::GraphEditorSession) = session.mapping
-Base.close(session::GraphEditorSession) = close(session.server)
+function Base.close(session::GraphEditorSession)
+    isopen(session.server) || return nothing
+    return HTTP.forceclose(session.server)
+end
+
+function Base.show(io::IO, session::GraphEditorSession)
+    print(io, "GraphEditorSession(url=\"$(session.url)\", host=\"$(session.host)\", port=$(session.port))")
+end
+
+function Base.show(io::IO, ::MIME"text/plain", session::GraphEditorSession)
+    println(io, "PlantSimEngineGraphEditorExt.GraphEditorSession")
+    println(io, "  Open in browser: $(session.url)")
+    println(io, "  Local state JSON: $(session.url)/state")
+    println(io, "  Quit session: close(session)")
+    println(io, "  Current mapping: current_mapping(session)")
+    println(io, "  Save mapping code: use the \"Mapping code\" panel in the web editor")
+end
+
+current_mapping_code(session::GraphEditorSession) = _model_mapping_to_julia(session.mapping)
 
 """
-    edit_graph(mapping; mtg=nothing, host="127.0.0.1", port=8765)
+    edit_graph(mapping; mtg=nothing, host="127.0.0.1", port=8765, open_browser=true)
 
 Start a local graph editor session. The returned session owns the current
 `ModelMapping`; call `current_mapping(session)` to recover the edited mapping.
 
+Single-scale mappings are automatically normalized to multiscale form at the :Default scale.
+By default, the session URL is opened with the system default browser. Pass
+`open_browser=false` to disable this, for example in scripts or tests.
+
 This method is provided by the `PlantSimEngineGraphEditorExt` package extension.
 Load `HTTP` in the active session to make it available.
 """
-function edit_graph(mapping::PlantSimEngine.ModelMapping; mtg=nothing, host::AbstractString="127.0.0.1", port::Integer=8765)
+function edit_graph(
+    mapping::PlantSimEngine.ModelMapping;
+    mtg=nothing,
+    host::AbstractString="127.0.0.1",
+    port::Integer=8765,
+    open_browser::Bool=true,
+)
+    # Normalize single-scale to multiscale form for uniform handling downstream
+    mapping = _normalize_to_multiscale(mapping)
+
     session_ref = Ref{Any}()
     handler = http -> _handle_http(session_ref[], http)
     server = HTTP.listen!(handler, host, port; listenany=true, verbose=false)
@@ -42,11 +74,32 @@ function edit_graph(mapping::PlantSimEngine.ModelMapping; mtg=nothing, host::Abs
         String(host),
         actual_port,
         "http://$(host):$(actual_port)",
+        nothing,
     )
     session_ref[] = session
+    open_browser && _open_in_default_browser(session.url)
     return session
 end
 
+function _open_in_default_browser(url::AbstractString)
+    try
+        if Sys.isapple()
+            run(`open $url`)
+        elseif Sys.iswindows()
+            run(`cmd /c start "" $url`)
+        elseif !isnothing(Sys.which("xdg-open"))
+            run(`xdg-open $url`)
+        else
+            @warn "Could not open graph editor automatically because no supported default-browser command was found." url
+            return false
+        end
+        return true
+    catch err
+        @warn "Could not open graph editor automatically. Open the session URL manually." url exception = (err, catch_backtrace())
+        return false
+    end
+end
+
 function apply_edit!(session::GraphEditorSession, edit::PlantSimEngine.AbstractGraphEdit)
     push!(session.history, session.mapping)
     empty!(session.future)
@@ -95,6 +148,22 @@ function _handle_http(session::GraphEditorSession, http::HTTP.Stream)
     return nothing
 end
 
+"""
+    _normalize_to_multiscale(mapping::PlantSimEngine.ModelMapping{PlantSimEngine.SingleScale})
+
+Convert a single-scale ModelMapping to multiscale form at the :Default scale.
+This ensures all downstream logic only deals with MultiScale mappings.
+"""
+function _normalize_to_multiscale(mapping::PlantSimEngine.ModelMapping{PlantSimEngine.SingleScale})
+    entry = mapping[:Default]  # Returns tuple of (models..., status)
+    return PlantSimEngine.ModelMapping(:Default => entry; check=true, type_promotion=PlantSimEngine.type_promotion(mapping))
+end
+
+function _normalize_to_multiscale(mapping::PlantSimEngine.ModelMapping{PlantSimEngine.MultiScale})
+    # Already multiscale, return as is
+    return mapping
+end
+
 function _handle_websocket(session::GraphEditorSession, ws)
     HTTP.WebSockets.send(ws, _state_json(session))
     try
@@ -118,6 +187,9 @@ function _handle_command!(session::GraphEditorSession, command)
         elseif action == "edit"
             edit = _edit_from_command(command)
             apply_edit!(session, edit)
+        elseif action == "write_mapping_code"
+            raw_path = get(command, "path", "")
+            _write_mapping_code!(session, String(raw_path))
         else
             error("Unsupported graph editor command action `$action`.")
         end
@@ -197,11 +269,14 @@ function _state_payload(session::GraphEditorSession; ok::Bool=true, diagnostics:
     append!(graph["diagnostics"], diagnostics)
     return Dict(
         "ok" => ok,
+        "diagnostics" => diagnostics,
         "graph" => graph,
         "models" => [PlantSimEngine.model_descriptor(T) for T in PlantSimEngine.available_models()],
         "canUndo" => !isempty(session.history),
         "canRedo" => !isempty(session.future),
         "url" => session.url,
+        "mappingCode" => current_mapping_code(session),
+        "lastSavedPath" => session.last_saved_path,
     )
 end
 
@@ -284,4 +359,79 @@ end
 
 _frontend_dist_dir() = normpath(joinpath(@__DIR__, "..", "frontend", "dist"))
 
+function _write_mapping_code!(session::GraphEditorSession, raw_path::AbstractString)
+    path = strip(String(raw_path))
+    isempty(path) && error("The output path is empty. Provide a .jl file path.")
+    full_path = isabspath(path) ? normpath(path) : normpath(joinpath(pwd(), path))
+    mkpath(dirname(full_path))
+    write(full_path, current_mapping_code(session) * "\n")
+    session.last_saved_path = full_path
+    return full_path
+end
+
+function _model_mapping_to_julia(mapping::PlantSimEngine.ModelMapping)
+    io = IOBuffer()
+    println(io, "mapping = ModelMapping(")
+    for scale in keys(mapping)
+        println(io, "    :$(scale) => (")
+        for item in _scale_items(mapping[scale])
+            println(io, "        $(_mapping_item_to_code(item)),")
+        end
+        println(io, "    ),")
+    end
+    print(io, ")")
+    return String(take!(io))
+end
+
+_scale_items(entry) = entry isa Tuple ? entry : (entry,)
+
+function _mapping_item_to_code(item)
+    if item isa PlantSimEngine.MultiScaleModel
+        model_code = repr(PlantSimEngine.model_(item))
+        mapped_code = _mapped_variables_to_code(PlantSimEngine.mapped_variables_(item))
+        return "MultiScaleModel(model=$(model_code), mapped_variables=$(mapped_code))"
+    end
+    return repr(item)
+end
+
+function _mapped_variables_to_code(mapped_variables)
+    isempty(mapped_variables) && return "[]"
+    return "[" * join((_mapped_variable_to_code(i) for i in mapped_variables), ", ") * "]"
+end
+
+function _mapped_variable_to_code(mapping)
+    lhs = first(mapping)
+    rhs = last(mapping)
+    lhs_code = _mapped_lhs_to_code(lhs)
+    variable = _mapped_variable_symbol(lhs)
+    rhs_code = _mapped_rhs_to_code(rhs, variable)
+    return "$(lhs_code) => $(rhs_code)"
+end
+
+_mapped_variable_symbol(variable::Symbol) = variable
+_mapped_variable_symbol(variable::PlantSimEngine.PreviousTimeStep) = variable.variable
+
+_mapped_lhs_to_code(variable::Symbol) = string(":", variable)
+_mapped_lhs_to_code(variable::PlantSimEngine.PreviousTimeStep) = "PreviousTimeStep(:$(variable.variable))"
+
+function _mapped_rhs_to_code(rhs::Pair{Symbol,Symbol}, variable::Symbol)
+    source_scale = first(rhs)
+    source_variable = last(rhs)
+    if source_scale == Symbol("")
+        return "(Symbol(\"\") => :$(source_variable))"
+    end
+    if source_variable == variable
+        return ":$(source_scale)"
+    end
+    return "(:$(source_scale) => :$(source_variable))"
+end
+
+function _mapped_rhs_to_code(rhs::AbstractVector{<:Pair{Symbol,Symbol}}, variable::Symbol)
+    compact = all(last(i) == variable for i in rhs)
+    if compact
+        return "[" * join((":" * string(first(i)) for i in rhs), ", ") * "]"
+    end
+    return "[" * join(("(:$(first(i)) => :$(last(i)))" for i in rhs), ", ") * "]"
+end
+
 end
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 351bdcd5..5d7257c9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -36,6 +36,7 @@ import "./styles.css";
 type EdgeFilterKey = "dataFlow" | "mapped" | "callStack";
 type EdgeFilters = Record<EdgeFilterKey, boolean>;
 type FocusMode = "none" | "upstream" | "downstream" | "neighborhood";
+type SidePanel = "inspector" | "add_model" | "mapping_code" | null;
 
 type SearchResult = {
   id: string;
@@ -108,6 +109,12 @@ export default function App() {
   const [editorConnected, setEditorConnected] = useState(false);
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
+  const [activePanel, setActivePanel] = useState<SidePanel>("inspector");
+  const [mappingCode, setMappingCode] = useState("");
+  const [lastSavedPath, setLastSavedPath] = useState<string | null>(null);
+  const [editorFeedback, setEditorFeedback] = useState<{ kind: "error" | "info"; text: string } | null>(null);
+  const [savePath, setSavePath] = useState("mapping.generated.jl");
+  const [customScales, setCustomScales] = useState<string[]>([]);
   const [selected, setSelected] = useState<GraphNodeData | null>(null);
   const [activePort, setActivePort] = useState<GraphPort | null>(null);
   const [showRequiredPanel, setShowRequiredPanel] = useState(false);
@@ -134,6 +141,10 @@ export default function App() {
   const actionableWarningItems = useMemo(() => warningItems.filter((item) => item.severity !== "info"), [warningItems]);
   const searchResults = useMemo(() => deriveSearchResults(graph, searchQuery), [graph, searchQuery]);
   const visibleNodeData = useMemo(() => graph.nodes.filter((node) => !collapsedScales.has(node.scale)), [collapsedScales, graph.nodes]);
+  const editorScales = useMemo(() => {
+    const merged = [...graph.scales, ...customScales];
+    return [...new Set(merged)];
+  }, [customScales, graph.scales]);
   const visibleNodeIds = useMemo(() => new Set(visibleNodeData.map((node) => node.id)), [visibleNodeData]);
   const visibleEdgeData = useMemo(() => graph.edges.filter((edge) => (
     edgeMatchesFilters(edge, edgeFilters) &&
@@ -153,23 +164,52 @@ export default function App() {
 
     const socket = new WebSocket(config.websocketUrl);
     setEditorSocket(socket);
-    socket.addEventListener("open", () => setEditorConnected(true));
-    socket.addEventListener("close", () => setEditorConnected(false));
+    socket.addEventListener("open", () => {
+      setEditorConnected(true);
+      setEditorFeedback(null);
+    });
+    socket.addEventListener("close", () => {
+      setEditorConnected(false);
+      setEditorFeedback({ kind: "error", text: "Graph editor connection closed. Refresh the page or restart the Julia session." });
+    });
     socket.addEventListener("message", (event) => {
       const payload = JSON.parse(event.data) as GraphEditorState;
       if (payload.graph) setGraph(payload.graph);
       if (payload.models) setEditorModels(payload.models);
+      if (typeof payload.mappingCode === "string") setMappingCode(payload.mappingCode);
+      if (typeof payload.lastSavedPath === "string") setLastSavedPath(payload.lastSavedPath);
       setCanUndo(Boolean(payload.canUndo));
       setCanRedo(Boolean(payload.canRedo));
+      if (payload.ok === false) {
+        const message = payload.diagnostics?.[0] ?? "Graph editor command failed.";
+        setEditorFeedback({ kind: "error", text: message });
+      } else if (payload.diagnostics?.length) {
+        setEditorFeedback({ kind: "info", text: payload.diagnostics[0] });
+      } else {
+        setEditorFeedback(null);
+      }
     });
     return () => socket.close();
   }, []);
 
   const sendEditorCommand = useCallback((command: Record<string, unknown>) => {
-    if (!editorSocket || editorSocket.readyState !== WebSocket.OPEN) return;
+    if (!editorSocket || editorSocket.readyState !== WebSocket.OPEN) {
+      setEditorFeedback({ kind: "error", text: "Graph editor is offline; command was not sent." });
+      return;
+    }
     editorSocket.send(JSON.stringify(command));
   }, [editorSocket]);
 
+  const togglePanel = useCallback((panel: Exclude<SidePanel, null>) => {
+    setActivePanel((current) => current === panel ? null : panel);
+  }, []);
+
+  const addCustomScale = useCallback((rawScale: string) => {
+    const scale = rawScale.trim();
+    if (!scale) return;
+    setCustomScales((current) => current.includes(scale) || graph.scales.includes(scale) ? current : [...current, scale]);
+  }, [graph.scales]);
+
   useEffect(() => {
     const nextNodes = visibleNodeData.map((node) => ({
       id: node.id,
@@ -405,6 +445,13 @@ export default function App() {
               <RotateCcw size={17} />
             </button>
           </div>
+
+          <div className="toolbar-group panel-switch">
+            <button className={`metric-button ${activePanel === "inspector" ? "active" : ""}`} onClick={() => togglePanel("inspector")}>Inspector</button>
+            <button className={`metric-button ${activePanel === "add_model" ? "active" : ""}`} onClick={() => togglePanel("add_model")}>Add model</button>
+            <button className={`metric-button ${activePanel === "mapping_code" ? "active" : ""}`} onClick={() => togglePanel("mapping_code")}>Mapping code</button>
+          </div>
+
           {editorSocket && (
             <div className="toolbar-group live-session">
               <span className={editorConnected ? "live-pill connected" : "live-pill"}>{editorConnected ? "live" : "offline"}</span>
@@ -414,6 +461,12 @@ export default function App() {
           )}
         </div>
 
+        {editorFeedback && (
+          <div className={`editor-feedback ${editorFeedback.kind}`} role="status" aria-live="polite">
+            {editorFeedback.text}
+          </div>
+        )}
+
         <RelationshipLegend filters={edgeFilters} onToggle={toggleEdgeFilter} />
         <ScaleControls scales={graph.scales} collapsedScales={collapsedScales} onToggle={toggleScale} onExpandAll={expandAllScales} />
 
@@ -462,33 +515,67 @@ export default function App() {
         </ReactFlow>
       </section>
 
-      <aside className="inspector">
-        <header>
-          <GitPullRequestArrow size={19} />
-          <h2>Inspector</h2>
-        </header>
-        <InspectorDetails
-          selected={selected}
-          selectedEdge={selectedEdge}
-          activePort={activePort}
-          requiredInputPortIds={requiredInputPortIds}
-          incomingEdges={activePort ? incomingByPort.get(activePort.id) ?? [] : []}
-          outgoingEdges={activePort ? outgoingByPort.get(activePort.id) ?? [] : []}
-          nodeById={nodeById}
-          portById={portById}
-          onFocusEdge={focusEdge}
-        />
-        <h3>Required Initializations</h3>
-        <RequiredInputList groups={groupRequiredInputs(requiredInputs)} onSelect={focusNode} compact />
-        <h3>Diagnostics</h3>
-        {graph.diagnostics.length > 0 ? graph.diagnostics.map((item) => <div className="diagnostic" key={item}>{item}</div>) : <div className="empty-state">No diagnostics.</div>}
-        {editorModels.length > 0 && (
-          <>
-            <h3>Available Models</h3>
-            <ModelBrowser models={editorModels} scales={graph.scales} onCommand={sendEditorCommand} disabled={!editorConnected} />
-          </>
-        )}
-      </aside>
+      {activePanel && (
+        <aside className="inspector">
+          {activePanel === "inspector" && (
+            <>
+              <header>
+                <GitPullRequestArrow size={19} />
+                <h2>Inspector</h2>
+              </header>
+              <InspectorDetails
+                selected={selected}
+                selectedEdge={selectedEdge}
+                activePort={activePort}
+                requiredInputPortIds={requiredInputPortIds}
+                incomingEdges={activePort ? incomingByPort.get(activePort.id) ?? [] : []}
+                outgoingEdges={activePort ? outgoingByPort.get(activePort.id) ?? [] : []}
+                nodeById={nodeById}
+                portById={portById}
+                onFocusEdge={focusEdge}
+              />
+              <h3>Required Initializations</h3>
+              <RequiredInputList groups={groupRequiredInputs(requiredInputs)} onSelect={focusNode} compact />
+              <h3>Diagnostics</h3>
+              {graph.diagnostics.length > 0 ? graph.diagnostics.map((item) => <div className="diagnostic" key={item}>{item}</div>) : <div className="empty-state">No diagnostics.</div>}
+            </>
+          )}
+
+          {activePanel === "add_model" && (
+            <>
+              <header>
+                <GitPullRequestArrow size={19} />
+                <h2>Add Model</h2>
+              </header>
+              {editorModels.length > 0 ? (
+                <ModelBrowser
+                  models={editorModels}
+                  scales={editorScales}
+                  onAddScale={addCustomScale}
+                  onCommand={sendEditorCommand}
+                  disabled={!editorConnected}
+                />
+              ) : <div className="empty-state">No model type is available.</div>}
+            </>
+          )}
+
+          {activePanel === "mapping_code" && (
+            <>
+              <header>
+                <GitPullRequestArrow size={19} />
+                <h2>Mapping Code</h2>
+              </header>
+              <MappingCodePanel
+                code={mappingCode}
+                savePath={savePath}
+                lastSavedPath={lastSavedPath}
+                onSavePathChange={setSavePath}
+                onSave={() => sendEditorCommand({ action: "write_mapping_code", path: savePath })}
+              />
+            </>
+          )}
+        </aside>
+      )}
     </main>
   );
 }
@@ -747,19 +834,57 @@ function Row({ label, value }: { label: string; value: string }) {
   return <div className="row"><span>{label}</span><strong>{value}</strong></div>;
 }
 
+function MappingCodePanel({
+  code,
+  savePath,
+  lastSavedPath,
+  onSavePathChange,
+  onSave,
+}: {
+  code: string;
+  savePath: string;
+  lastSavedPath: string | null;
+  onSavePathChange: (path: string) => void;
+  onSave: () => void;
+}) {
+  const copyCode = useCallback(async () => {
+    if (!code) return;
+    await navigator.clipboard.writeText(code);
+  }, [code]);
+
+  return (
+    <div className="mapping-code-panel">
+      <div className="row-with-actions">
+        <strong>Current Julia mapping</strong>
+        <button className="metric-button" onClick={() => { void copyCode(); }}>Copy</button>
+      </div>
+      <textarea className="mapping-code" readOnly value={code} />
+      <label className="model-browser-control">
+        <span>Write to file</span>
+        <input value={savePath} onChange={(event) => onSavePathChange(event.target.value)} placeholder="mapping.generated.jl" />
+      </label>
+      <button className="metric-button" onClick={onSave}>Save mapping code</button>
+      {lastSavedPath ? <div className="diagnostic">Saved to {lastSavedPath}</div> : <div className="empty-state compact">No mapping code saved yet.</div>}
+    </div>
+  );
+}
+
 function ModelBrowser({
   models,
   scales,
+  onAddScale,
   onCommand,
   disabled,
 }: {
   models: ModelDescriptor[];
   scales: string[];
+  onAddScale: (scale: string) => void;
   onCommand: (command: Record<string, unknown>) => void;
   disabled: boolean;
 }) {
   const [modelType, setModelType] = useState(models[0]?.type ?? "");
   const [scale, setScale] = useState(scales[0] ?? "Default");
+  const [newScale, setNewScale] = useState("");
   const selected = models.find((model) => model.type === modelType) ?? models[0];
 
   useEffect(() => {
@@ -773,6 +898,22 @@ function ModelBrowser({
   if (!selected) return <div className="empty-state">No model type is available.</div>;
   return (
     <div className="model-browser">
+      <label className="model-browser-control">
+        <span>Define scale</span>
+        <div className="inline-field">
+          <input value={newScale} onChange={(event) => setNewScale(event.target.value)} placeholder="Leaf, Plant, Scene" />
+          <button
+            className="metric-button"
+            onClick={() => {
+              onAddScale(newScale);
+              if (newScale.trim()) setScale(newScale.trim());
+              setNewScale("");
+            }}
+          >
+            Add scale
+          </button>
+        </div>
+      </label>
       <label className="model-browser-control">
         <span>Scale</span>
         <select value={scale} onChange={(event) => setScale(event.target.value)}>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9f46cf42..6bfa3fda 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -79,6 +79,37 @@ body {
   background: var(--accent);
 }
 
+.editor-feedback {
+  position: absolute;
+  z-index: 12;
+  top: 96px;
+  left: 18px;
+  right: 18px;
+  padding: 9px 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(255, 250, 242, 0.95);
+  box-shadow: 0 12px 30px var(--shadow);
+  max-height: 132px;
+  overflow: auto;
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.editor-feedback.error {
+  color: var(--clay);
+  border-color: rgba(191, 106, 84, 0.4);
+  background: rgba(255, 244, 238, 0.97);
+}
+
+.editor-feedback.info {
+  color: var(--accent);
+  border-color: rgba(31, 122, 83, 0.35);
+  background: rgba(245, 252, 248, 0.97);
+}
+
 .graph-workbench {
   flex-wrap: wrap;
 }
@@ -318,6 +349,10 @@ h1 {
   gap: 8px;
 }
 
+.panel-switch {
+  flex-wrap: wrap;
+}
+
 .select-control {
   display: inline-flex;
   align-items: center;
@@ -918,6 +953,38 @@ h1 {
   margin-bottom: 14px;
 }
 
+.mapping-code-panel {
+  display: grid;
+  gap: 10px;
+}
+
+.row-with-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.mapping-code {
+  width: 100%;
+  min-height: 260px;
+  resize: vertical;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(255, 253, 247, 0.9);
+  color: var(--ink);
+  padding: 10px;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.inline-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
 .inspector h2 {
   font-size: 17px;
 }
@@ -1241,6 +1308,7 @@ h1 {
 }
 
 .model-browser-control select,
+.model-browser-control input,
 .parameter-row input,
 .parameter-row select {
   min-width: 0;
@@ -1251,7 +1319,8 @@ h1 {
   font: inherit;
 }
 
-.model-browser-control select {
+.model-browser-control select,
+.model-browser-control input {
   height: 32px;
   padding: 0 8px;
 }
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 7fa36e82..61ee344b 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -85,9 +85,12 @@ export type ModelDescriptor = {
 
 export type GraphEditorState = {
   ok: boolean;
+  diagnostics: string[];
   graph: DependencyGraphView;
   models: ModelDescriptor[];
   canUndo: boolean;
   canRedo: boolean;
   url: string;
+  mappingCode: string;
+  lastSavedPath: string | null;
 };
diff --git a/src/visualization/dependency_graph_view.jl b/src/visualization/dependency_graph_view.jl
index b9423a61..4ca8a4ab 100644
--- a/src/visualization/dependency_graph_view.jl
+++ b/src/visualization/dependency_graph_view.jl
@@ -223,7 +223,7 @@ function _cycle_edge_ids(edges::Vector{GraphEdge}, cycle_nodes::Vector{String})
     ids = String[]
     length(cycle_nodes) < 2 && return ids
     for i in 1:(length(cycle_nodes)-1)
-        source = cycle_nodes[i + 1]
+        source = cycle_nodes[i+1]
         target = cycle_nodes[i]
         for edge in edges
             edge.source == source && edge.target == target || continue
@@ -455,17 +455,19 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::UnmarkPreviou
 end
 
 function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::AddModel)
-    haskey(mapping, edit.scale) || error("Cannot add model: scale `$(edit.scale)` is not present in the `ModelMapping`.")
     model = _construct_graph_edit_model(edit.model_type, edit.parameters)
     process_name = process(model)
-    any(existing -> process(existing) == process_name, get_models(mapping[edit.scale])) && error(
-        "Cannot add `$(typeof(model))` at scale `$(edit.scale)`: process `$process_name` already exists at this scale."
-    )
+    if haskey(mapping, edit.scale)
+        any(existing -> process(existing) == process_name, get_models(mapping[edit.scale])) && error(
+            "Cannot add `$(typeof(model))` at scale `$(edit.scale)`: process `$process_name` already exists at this scale."
+        )
+    end
 
     data = Dict{Symbol,Any}()
     for (scale, entry) in pairs(mapping)
         data[scale] = scale == edit.scale ? _insert_model_entry(entry, model) : entry
     end
+    haskey(data, edit.scale) || (data[edit.scale] = (model,))
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
@@ -597,8 +599,8 @@ function _set_mapped_variable_item(item, edit::SetMappedVariable, found::Base.Re
     )
     found[] = true
     source = edit.mode in (:multi, :multi_node, :vector) ?
-        [edit.source_scale => edit.source_variable] :
-        edit.source_scale => edit.source_variable
+             [edit.source_scale => edit.source_variable] :
+             edit.source_scale => edit.source_variable
     return ModelSpec(spec; multiscale=_set_mapping_item(spec.multiscale, edit.variable, source))
 end
 
diff --git a/src/visualization/graph_editor_api.jl b/src/visualization/graph_editor_api.jl
index cfb0d67f..5a5500e7 100644
--- a/src/visualization/graph_editor_api.jl
+++ b/src/visualization/graph_editor_api.jl
@@ -19,6 +19,8 @@ using HTTP
 
 session = edit_graph(mapping)
 ```
+
+Pass `open_browser=false` to keep the session headless.
 """
 function edit_graph(args...; kwargs...)
     _graph_editor_missing_http()
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index 97e6adfc..841d4e7f 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -1,5 +1,40 @@
 using HTTP
 
+@testset "Graph edits after normalization to multiscale" begin
+    # Single-scale mappings are normalized to multiscale at :Default when passed to edit_graph
+    mapping_single = ModelMapping(
+        ToyLAIModel(),
+        Beer(0.5);
+        status=(TT_cu=1.0:2.0, LAI=2.0, aPPFD=3.0),
+    )
+
+    # Simulate what edit_graph does: normalize single-scale to multiscale
+    mapping_multiscale = PlantSimEngine.ModelMapping(:Default => mapping_single[:Default]; check=true)
+
+    # Now test edits on the normalized multiscale mapping
+    added = PlantSimEngine.apply_graph_edit(
+        mapping_multiscale,
+        PlantSimEngine.AddModel(:Default, ToyDegreeDaysCumulModel, (init_TT=0.0, T_base=0.0, T_max=40.0)),
+    )
+    models_at_default = PlantSimEngine.get_models(added[:Default])
+    @test any(m -> PlantSimEngine.process(m) == :Degreedays, models_at_default)
+
+    removed = PlantSimEngine.apply_graph_edit(
+        added,
+        PlantSimEngine.RemoveModel(:Default, :Degreedays),
+    )
+    models_after_remove = PlantSimEngine.get_models(removed[:Default])
+    @test !any(m -> PlantSimEngine.process(m) == :Degreedays, models_after_remove)
+
+    replaced = PlantSimEngine.apply_graph_edit(
+        mapping_multiscale,
+        PlantSimEngine.ReplaceModel(:Default, :light_interception, Beer, (k=0.7,)),
+    )
+    models_after_replace = PlantSimEngine.get_models(replaced[:Default])
+    beer_model = first(m for m in models_after_replace if PlantSimEngine.process(m) == :light_interception)
+    @test beer_model.k == 0.7
+end
+
 @testset "HTTP extension loading and WebSocket edits" begin
     @test Base.get_extension(PlantSimEngine, :PlantSimEngineGraphEditorExt) !== nothing
 
@@ -10,12 +45,13 @@ using HTTP
             Status(TT_cu=1.0, LAI=2.0),
         ),
     )
-    session = edit_graph(mapping; port=0)
+    session = edit_graph(mapping; port=0, open_browser=false)
 
     try
         @test session isa AbstractGraphEditorSession
         @test startswith(session.url, "http://127.0.0.1:")
-        @test current_mapping(session) === mapping
+        @test current_mapping(session) isa ModelMapping{PlantSimEngine.MultiScale}
+        @test current_mapping(session)[:Leaf][1] == mapping[:Leaf][1]
 
         state_response = HTTP.get(string(session.url, "/state"))
         @test state_response.status == 200
@@ -23,6 +59,8 @@ using HTTP
         @test state["ok"]
         @test haskey(state, "graph")
         @test haskey(state, "models")
+        @test haskey(state, "mappingCode")
+        @test occursin("ModelMapping", state["mappingCode"])
 
         websocket_url = replace(session.url, "http://" => "ws://") * "/ws"
         HTTP.WebSockets.open(websocket_url) do ws
@@ -45,6 +83,30 @@ using HTTP
                 model -> process(model) == :light_interception,
                 PlantSimEngine.get_models(current_mapping(session)[:Leaf]),
             )
+
+            add_new_scale = PlantSimEngine.JSON.json(Dict(
+                "action" => "edit",
+                "kind" => "add_model",
+                "scale" => "Fruit",
+                "modelType" => string(ToyLAIModel),
+                "parameters" => Dict{String,Any}(),
+            ))
+            HTTP.WebSockets.send(ws, add_new_scale)
+            added = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test added["ok"]
+            @test :Fruit in keys(current_mapping(session))
+
+            output_path = tempname() * ".jl"
+            save_code = PlantSimEngine.JSON.json(Dict(
+                "action" => "write_mapping_code",
+                "path" => output_path,
+            ))
+            HTTP.WebSockets.send(ws, save_code)
+            saved = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test saved["ok"]
+            @test saved["lastSavedPath"] == output_path
+            @test isfile(output_path)
+            @test occursin("mapping = ModelMapping", read(output_path, String))
         end
     finally
         close(session)

From 87ee2d3c6b931d0846c7250aa1b8eab829faa7e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Tue, 5 May 2026 13:44:33 +0200
Subject: [PATCH 05/19] Add model rate selection to graph editor

---
 .../graph_visualization_editor.md             |  1 +
 ext/PlantSimEngineGraphEditorExt.jl           | 39 +++++++++++++++---
 frontend/src/App.tsx                          | 33 +++++++++++++--
 frontend/src/styles.css                       | 40 +++++++++++++++++++
 frontend/src/types.ts                         |  4 ++
 src/visualization/dependency_graph_view.jl    | 36 +++++++++++------
 test/test-graph-editor-extension.jl           | 11 +++++
 7 files changed, 143 insertions(+), 21 deletions(-)

diff --git a/docs/src/step_by_step/graph_visualization_editor.md b/docs/src/step_by_step/graph_visualization_editor.md
index ba0c959c..17109887 100644
--- a/docs/src/step_by_step/graph_visualization_editor.md
+++ b/docs/src/step_by_step/graph_visualization_editor.md
@@ -59,6 +59,7 @@ The web editor also exposes a dedicated "Mapping code" panel. It shows the curre
 The editor extension currently supports the same edit operations as the Julia API:
 
 - add, remove, and replace a model at a scale;
+- keep the model default rate, or set a custom `ClockSpec(dt, phase)` when adding a model;
 - set a mapped input variable;
 - mark or unmark a variable as [`PreviousTimeStep`](@ref);
 - undo and redo edits inside the live session.
diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index ac2c3fb8..5b576d55 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -226,14 +226,29 @@ function _edit_from_command(command)
     if kind in ("add_model", "replace_model")
         model_type = _resolve_model_type(command["modelType"])
         parameters = _parameters_from_command(get(command, "parameters", Dict()))
+        timestep = _timestep_from_command(get(command, "timestep", nothing))
         if kind == "add_model"
-            return PlantSimEngine.AddModel(Symbol(command["scale"]), model_type, parameters)
+            return PlantSimEngine.AddModel(Symbol(command["scale"]), model_type, parameters, timestep)
         end
-        return PlantSimEngine.ReplaceModel(Symbol(command["scale"]), Symbol(command["process"]), model_type, parameters)
+        return PlantSimEngine.ReplaceModel(Symbol(command["scale"]), Symbol(command["process"]), model_type, parameters, timestep)
     end
     error("Unsupported graph edit kind `$kind`.")
 end
 
+function _timestep_from_command(timestep)
+    isnothing(timestep) && return nothing
+    timestep isa AbstractDict || error("Unsupported timestep payload `$(timestep)`.")
+    mode = String(get(timestep, "mode", "default"))
+    mode == "default" && return nothing
+    mode == "clock" || error("Unsupported timestep mode `$mode`. Use `default` or `clock`.")
+    dt = _parse_real(get(timestep, "dt", "1.0"))
+    phase = _parse_real(get(timestep, "phase", "0.0"))
+    return PlantSimEngine.ClockSpec(dt, phase)
+end
+
+_parse_real(value::Real) = Float64(value)
+_parse_real(value) = parse(Float64, String(value))
+
 function _resolve_model_type(label)
     for model_type in PlantSimEngine.available_models()
         string(model_type) == label && return model_type
@@ -386,14 +401,26 @@ end
 _scale_items(entry) = entry isa Tuple ? entry : (entry,)
 
 function _mapping_item_to_code(item)
-    if item isa PlantSimEngine.MultiScaleModel
-        model_code = repr(PlantSimEngine.model_(item))
-        mapped_code = _mapped_variables_to_code(PlantSimEngine.mapped_variables_(item))
-        return "MultiScaleModel(model=$(model_code), mapped_variables=$(mapped_code))"
+    if item isa PlantSimEngine.ModelSpec || item isa PlantSimEngine.MultiScaleModel
+        return _model_spec_to_code(PlantSimEngine.as_model_spec(item))
     end
     return repr(item)
 end
 
+function _model_spec_to_code(spec::PlantSimEngine.ModelSpec)
+    code = "ModelSpec($(repr(PlantSimEngine.model_(spec))))"
+    mapped_variables = PlantSimEngine.mapped_variables_(spec)
+    isempty(mapped_variables) || (code *= " |> MultiScaleModel($(_mapped_variables_to_code(mapped_variables)))")
+    isnothing(PlantSimEngine.timestep(spec)) || (code *= " |> TimeStepModel($(_timestep_to_code(PlantSimEngine.timestep(spec))))")
+    return code
+end
+
+function _timestep_to_code(timestep::PlantSimEngine.ClockSpec)
+    return "ClockSpec($(repr(timestep.dt)), $(repr(timestep.phase)))"
+end
+
+_timestep_to_code(timestep) = repr(timestep)
+
 function _mapped_variables_to_code(mapped_variables)
     isempty(mapped_variables) && return "[]"
     return "[" * join((_mapped_variable_to_code(i) for i in mapped_variables), ", ") * "]"
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5d7257c9..b01cd364 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -946,6 +946,9 @@ function ModelParameterForm({
   const initialTypes = useMemo(() => Object.fromEntries(model.constructor.fields.map((field) => [field.name, field.inferredChoice])), [model]);
   const [values, setValues] = useState<Record<string, string>>(initialValues);
   const [types, setTypes] = useState<Record<string, string>>(initialTypes);
+  const [rateMode, setRateMode] = useState<"default" | "clock">("default");
+  const [rateDt, setRateDt] = useState("1.0");
+  const [ratePhase, setRatePhase] = useState("0.0");
 
   const setSharedType = useCallback((fieldName: string, nextType: string) => {
     const field = model.constructor.fields.find((item) => item.name === fieldName);
@@ -958,13 +961,37 @@ function ModelParameterForm({
       field.name,
       { type: types[field.name] ?? field.inferredChoice, value: values[field.name] ?? "" },
     ]));
-    onCommand({ action: "edit", kind: "add_model", scale, modelType: model.type, parameters });
-  }, [model, onCommand, scale, types, values]);
+    const timestep = rateMode === "clock" ? { mode: "clock", dt: rateDt, phase: ratePhase } : { mode: "default" };
+    onCommand({ action: "edit", kind: "add_model", scale, modelType: model.type, parameters, timestep });
+  }, [model, onCommand, rateDt, rateMode, ratePhase, scale, types, values]);
 
   return (
-    <div className="model-browser-item">
+      <div className="model-browser-item">
       <strong>{model.name}</strong>
       <span>{model.process ?? "unknown process"}</span>
+      <div className="rate-editor">
+        <label className="model-browser-control">
+          <span>Rate</span>
+          <select value={rateMode} onChange={(event) => setRateMode(event.target.value as "default" | "clock")}>
+            <option value="default">Default rate</option>
+            <option value="clock">Custom ClockSpec</option>
+          </select>
+        </label>
+        {rateMode === "default" ? (
+          <div className="rate-summary">Uses model default: {model.timespec ?? "default rate"}</div>
+        ) : (
+          <div className="rate-clock-row">
+            <label>
+              <span>dt</span>
+              <input value={rateDt} onChange={(event) => setRateDt(event.target.value)} inputMode="decimal" />
+            </label>
+            <label>
+              <span>phase</span>
+              <input value={ratePhase} onChange={(event) => setRatePhase(event.target.value)} inputMode="decimal" />
+            </label>
+          </div>
+        )}
+      </div>
       {model.constructor.fields.map((field) => (
         <div className="parameter-row" key={field.name}>
           <label>{field.name}</label>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6bfa3fda..55a5a5bd 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1358,6 +1358,46 @@ h1 {
   font-size: 12px;
 }
 
+.rate-editor {
+  display: grid;
+  gap: 6px;
+  padding: 7px;
+  border: 1px solid rgba(183, 166, 150, 0.28);
+  border-radius: 8px;
+  background: rgba(252, 249, 244, 0.72);
+}
+
+.rate-summary {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.rate-clock-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+
+.rate-clock-row label {
+  display: grid;
+  gap: 4px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.rate-clock-row input {
+  min-width: 0;
+  height: 28px;
+  border: 1px solid rgba(183, 166, 150, 0.44);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.78);
+  color: var(--ink);
+  font: inherit;
+  padding: 0 7px;
+}
+
 @media (max-width: 900px) {
   .app-shell {
     grid-template-columns: 1fr;
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 61ee344b..0016fd76 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -76,6 +76,10 @@ export type ModelDescriptor = {
   processType: string | null;
   inputs: Record<string, unknown>;
   outputs: Record<string, unknown>;
+  timespec?: string;
+  timestepHint?: string;
+  meteoHint?: string;
+  outputPolicy?: string;
   constructor: {
     fields: ModelConstructorField[];
     parameterGroups: Record<string, string[]>;
diff --git a/src/visualization/dependency_graph_view.jl b/src/visualization/dependency_graph_view.jl
index 4ca8a4ab..11c2ef9b 100644
--- a/src/visualization/dependency_graph_view.jl
+++ b/src/visualization/dependency_graph_view.jl
@@ -78,24 +78,31 @@ applied with `apply_graph_edit`.
 """
 abstract type AbstractGraphEdit end
 
-struct AddModel{P} <: AbstractGraphEdit
+struct AddModel{P,R} <: AbstractGraphEdit
     scale::Symbol
     model_type::Type
     parameters::P
+    timestep::R
 end
 
+AddModel(scale::Symbol, model_type::Type, parameters) = AddModel(scale, model_type, parameters, nothing)
+
 struct RemoveModel <: AbstractGraphEdit
     scale::Symbol
     process::Symbol
 end
 
-struct ReplaceModel{P} <: AbstractGraphEdit
+struct ReplaceModel{P,R} <: AbstractGraphEdit
     scale::Symbol
     process::Symbol
     model_type::Type
     parameters::P
+    timestep::R
 end
 
+ReplaceModel(scale::Symbol, process::Symbol, model_type::Type, parameters) =
+    ReplaceModel(scale, process, model_type, parameters, nothing)
+
 struct SetMappedVariable <: AbstractGraphEdit
     scale::Symbol
     process::Symbol
@@ -457,6 +464,7 @@ end
 function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::AddModel)
     model = _construct_graph_edit_model(edit.model_type, edit.parameters)
     process_name = process(model)
+    item = _graph_edit_model_item(model, edit.timestep)
     if haskey(mapping, edit.scale)
         any(existing -> process(existing) == process_name, get_models(mapping[edit.scale])) && error(
             "Cannot add `$(typeof(model))` at scale `$(edit.scale)`: process `$process_name` already exists at this scale."
@@ -465,9 +473,9 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::AddModel)
 
     data = Dict{Symbol,Any}()
     for (scale, entry) in pairs(mapping)
-        data[scale] = scale == edit.scale ? _insert_model_entry(entry, model) : entry
+        data[scale] = scale == edit.scale ? _insert_model_entry(entry, item) : entry
     end
-    haskey(data, edit.scale) || (data[edit.scale] = (model,))
+    haskey(data, edit.scale) || (data[edit.scale] = (item,))
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
@@ -491,7 +499,7 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::ReplaceModel)
     found = Ref(false)
     data = Dict{Symbol,Any}()
     for (scale, entry) in pairs(mapping)
-        data[scale] = scale == edit.scale ? _replace_model_entry(entry, edit.process, model, found) : entry
+        data[scale] = scale == edit.scale ? _replace_model_entry(entry, edit.process, model, edit.timestep, found) : entry
     end
     found[] || error("Cannot replace model: process `$(edit.process)` was not found at scale `$(edit.scale)`.")
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
@@ -532,6 +540,9 @@ end
 _construct_graph_edit_model(model_type::Type, parameters::AbstractDict) =
     _construct_graph_edit_model(model_type, (; (Symbol(k) => v for (k, v) in pairs(parameters))...))
 
+_graph_edit_model_item(model, timestep::Nothing) = model
+_graph_edit_model_item(model, timestep) = ModelSpec(model) |> TimeStepModel(timestep)
+
 function _insert_model_entry(entry::Tuple, model)
     items = Any[]
     inserted = false
@@ -563,22 +574,23 @@ end
 _remove_model_entry(entry, process_name::Symbol, found::Base.RefValue{Bool}) =
     _remove_model_entry((entry,), process_name, found)
 
-function _replace_model_entry(entry::Tuple, process_name::Symbol, model, found::Base.RefValue{Bool})
-    return tuple((_replace_model_item(item, process_name, model, found) for item in entry)...)
+function _replace_model_entry(entry::Tuple, process_name::Symbol, model, timestep, found::Base.RefValue{Bool})
+    return tuple((_replace_model_item(item, process_name, model, timestep, found) for item in entry)...)
 end
 
-_replace_model_entry(entry, process_name::Symbol, model, found::Base.RefValue{Bool}) =
-    _replace_model_item(entry, process_name, model, found)
+_replace_model_entry(entry, process_name::Symbol, model, timestep, found::Base.RefValue{Bool}) =
+    _replace_model_item(entry, process_name, model, timestep, found)
 
-function _replace_model_item(item::Status, ::Symbol, model, ::Base.RefValue{Bool})
+function _replace_model_item(item::Status, ::Symbol, model, timestep, ::Base.RefValue{Bool})
     return item
 end
 
-function _replace_model_item(item, process_name::Symbol, model, found::Base.RefValue{Bool})
+function _replace_model_item(item, process_name::Symbol, model, timestep, found::Base.RefValue{Bool})
     spec = as_model_spec(item)
     process(model_(spec)) == process_name || return item
     found[] = true
-    return ModelSpec(spec; model=model)
+    isnothing(timestep) && return ModelSpec(spec; model=model)
+    return ModelSpec(spec; model=model, timestep=timestep)
 end
 
 function _set_mapped_variable_entry(entry::Tuple, edit::SetMappedVariable, found::Base.RefValue{Bool})
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index 841d4e7f..f41edd47 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -33,6 +33,13 @@ using HTTP
     models_after_replace = PlantSimEngine.get_models(replaced[:Default])
     beer_model = first(m for m in models_after_replace if PlantSimEngine.process(m) == :light_interception)
     @test beer_model.k == 0.7
+
+    rated = PlantSimEngine.apply_graph_edit(
+        mapping_multiscale,
+        PlantSimEngine.AddModel(:Fruit, ToyLAIModel, NamedTuple(), ClockSpec(2.0, 1.0)),
+    )
+    rated_spec = only(values(PlantSimEngine.parse_model_specs(rated[:Fruit])))
+    @test PlantSimEngine.timestep(rated_spec) == ClockSpec(2.0, 1.0)
 end
 
 @testset "HTTP extension loading and WebSocket edits" begin
@@ -90,11 +97,15 @@ end
                 "scale" => "Fruit",
                 "modelType" => string(ToyLAIModel),
                 "parameters" => Dict{String,Any}(),
+                "timestep" => Dict("mode" => "clock", "dt" => "2.0", "phase" => "1.0"),
             ))
             HTTP.WebSockets.send(ws, add_new_scale)
             added = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
             @test added["ok"]
             @test :Fruit in keys(current_mapping(session))
+            rated_spec = only(values(PlantSimEngine.parse_model_specs(current_mapping(session)[:Fruit])))
+            @test PlantSimEngine.timestep(rated_spec) == ClockSpec(2.0, 1.0)
+            @test occursin("TimeStepModel", added["mappingCode"])
 
             output_path = tempname() * ".jl"
             save_code = PlantSimEngine.JSON.json(Dict(

From 12eebecf6deb1395fa6bdccff61a54fddf98388c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Tue, 5 May 2026 17:22:43 +0200
Subject: [PATCH 06/19] Add possibility to update a model + choose the rate

---
 .../graph_visualization_editor.md             |   1 +
 ext/PlantSimEngineGraphEditorExt.jl           |  41 +++-
 frontend/src/App.tsx                          | 216 ++++++++++++++++++
 frontend/src/styles.css                       |  14 ++
 frontend/src/types.ts                         |   2 +
 src/PlantSimEngine.jl                         |   2 +-
 src/visualization/dependency_graph_view.jl    | 205 +++++++++++++++--
 test/test-graph-editor-extension.jl           |  36 +++
 8 files changed, 493 insertions(+), 24 deletions(-)

diff --git a/docs/src/step_by_step/graph_visualization_editor.md b/docs/src/step_by_step/graph_visualization_editor.md
index 17109887..eb78290b 100644
--- a/docs/src/step_by_step/graph_visualization_editor.md
+++ b/docs/src/step_by_step/graph_visualization_editor.md
@@ -59,6 +59,7 @@ The web editor also exposes a dedicated "Mapping code" panel. It shows the curre
 The editor extension currently supports the same edit operations as the Julia API:
 
 - add, remove, and replace a model at a scale;
+- update an existing model's parameter values, scale, or rate from the inspector;
 - keep the model default rate, or set a custom `ClockSpec(dt, phase)` when adding a model;
 - set a mapped input variable;
 - mark or unmark a variable as [`PreviousTimeStep`](@ref);
diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index 5b576d55..c63f2cbc 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -165,16 +165,34 @@ function _normalize_to_multiscale(mapping::PlantSimEngine.ModelMapping{PlantSimE
 end
 
 function _handle_websocket(session::GraphEditorSession, ws)
-    HTTP.WebSockets.send(ws, _state_json(session))
+    _websocket_send(ws, _state_json(session)) || return nothing
     try
         for message in ws
             command = JSON.parse(String(message))
             response = _handle_command!(session, command)
-            HTTP.WebSockets.send(ws, JSON.json(response))
+            _websocket_send(ws, JSON.json(response)) || return nothing
         end
     catch err
-        HTTP.WebSockets.send(ws, JSON.json(_error_payload(err)))
+        _is_websocket_close_error(err) && return nothing
+        _websocket_send(ws, JSON.json(_error_payload(err)))
     end
+    return nothing
+end
+
+function _websocket_send(ws, payload::AbstractString)
+    try
+        HTTP.WebSockets.send(ws, payload)
+        return true
+    catch err
+        _is_websocket_close_error(err) && return false
+        rethrow()
+    end
+end
+
+function _is_websocket_close_error(err)
+    err isa EOFError && return true
+    err isa Base.IOError && return true
+    return false
 end
 
 function _handle_command!(session::GraphEditorSession, command)
@@ -215,6 +233,19 @@ function _edit_from_command(command)
         Symbol(command["scale"]),
         Symbol(command["process"]),
     )
+    if kind == "update_model"
+        model_type = _resolve_model_type(command["modelType"])
+        parameters = _parameters_from_command(get(command, "parameters", Dict()))
+        timestep = _timestep_from_command(get(command, "timestep", nothing); default_sentinel=true)
+        return PlantSimEngine.UpdateModel(
+            Symbol(command["scale"]),
+            Symbol(command["process"]),
+            Symbol(get(command, "targetScale", command["scale"])),
+            model_type,
+            parameters,
+            timestep,
+        )
+    end
     kind == "set_mapped_variable" && return PlantSimEngine.SetMappedVariable(
         Symbol(command["scale"]),
         Symbol(command["process"]),
@@ -235,11 +266,11 @@ function _edit_from_command(command)
     error("Unsupported graph edit kind `$kind`.")
 end
 
-function _timestep_from_command(timestep)
+function _timestep_from_command(timestep; default_sentinel::Bool=false)
     isnothing(timestep) && return nothing
     timestep isa AbstractDict || error("Unsupported timestep payload `$(timestep)`.")
     mode = String(get(timestep, "mode", "default"))
-    mode == "default" && return nothing
+    mode == "default" && return (default_sentinel ? :default : nothing)
     mode == "clock" || error("Unsupported timestep mode `$mode`. Use `default` or `clock`.")
     dt = _parse_real(get(timestep, "dt", "1.0"))
     phase = _parse_real(get(timestep, "phase", "0.0"))
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b01cd364..81184cbd 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -533,6 +533,11 @@ export default function App() {
                 nodeById={nodeById}
                 portById={portById}
                 onFocusEdge={focusEdge}
+                models={editorModels}
+                scales={editorScales}
+                onAddScale={addCustomScale}
+                onCommand={sendEditorCommand}
+                editorConnected={editorConnected}
               />
               <h3>Required Initializations</h3>
               <RequiredInputList groups={groupRequiredInputs(requiredInputs)} onSelect={focusNode} compact />
@@ -703,6 +708,11 @@ function InspectorDetails({
   nodeById,
   portById,
   onFocusEdge,
+  models,
+  scales,
+  onAddScale,
+  onCommand,
+  editorConnected,
 }: {
   selected: GraphNodeData | null;
   selectedEdge: GraphEdgeData | null;
@@ -713,6 +723,11 @@ function InspectorDetails({
   nodeById: Map<string, GraphNodeData>;
   portById: Map<string, { node: GraphNodeData; port: GraphPort }>;
   onFocusEdge: (edge: GraphEdgeData) => void;
+  models: ModelDescriptor[];
+  scales: string[];
+  onAddScale: (scale: string) => void;
+  onCommand: (command: Record<string, unknown>) => void;
+  editorConnected: boolean;
 }) {
   return (
     <>
@@ -733,6 +748,17 @@ function InspectorDetails({
           {selected.inputs.filter((port) => port.previousTimeStep).map((port) => (
             <div className="edit-suggestion" key={port.id}><ScissorsLineDashed size={14} /> {port.name} uses previous timestep</div>
           ))}
+          {selected.role === "model" && (
+            <ExistingModelEditor
+              key={selected.id}
+              node={selected}
+              models={models}
+              scales={scales}
+              onAddScale={onAddScale}
+              onCommand={onCommand}
+              disabled={!editorConnected}
+            />
+          )}
         </div>
       ) : !selectedEdge ? (
         <div className="empty-state">Select a model node.</div>
@@ -834,6 +860,196 @@ function Row({ label, value }: { label: string; value: string }) {
   return <div className="row"><span>{label}</span><strong>{value}</strong></div>;
 }
 
+function RateEditor({
+  mode,
+  dt,
+  phase,
+  defaultLabel,
+  onModeChange,
+  onDtChange,
+  onPhaseChange,
+}: {
+  mode: "default" | "clock";
+  dt: string;
+  phase: string;
+  defaultLabel: string;
+  onModeChange: (mode: "default" | "clock") => void;
+  onDtChange: (value: string) => void;
+  onPhaseChange: (value: string) => void;
+}) {
+  return (
+    <div className="rate-editor">
+      <label className="model-browser-control">
+        <span>Rate</span>
+        <select value={mode} onChange={(event) => onModeChange(event.target.value as "default" | "clock")}>
+          <option value="default">Default rate</option>
+          <option value="clock">Custom ClockSpec</option>
+        </select>
+      </label>
+      {mode === "default" ? (
+        <div className="rate-summary">Uses model default: {defaultLabel}</div>
+      ) : (
+        <div className="rate-clock-row">
+          <label>
+            <span>dt</span>
+            <input value={dt} onChange={(event) => onDtChange(event.target.value)} inputMode="decimal" />
+          </label>
+          <label>
+            <span>phase</span>
+            <input value={phase} onChange={(event) => onPhaseChange(event.target.value)} inputMode="decimal" />
+          </label>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ExistingModelEditor({
+  node,
+  models,
+  scales,
+  onAddScale,
+  onCommand,
+  disabled,
+}: {
+  node: GraphNodeData;
+  models: ModelDescriptor[];
+  scales: string[];
+  onAddScale: (scale: string) => void;
+  onCommand: (command: Record<string, unknown>) => void;
+  disabled: boolean;
+}) {
+  const matchingModels = useMemo(() => {
+    const sameProcess = models.filter((model) => model.process === node.process);
+    return sameProcess.length > 0 ? sameProcess : models;
+  }, [models, node.process]);
+  const initialModel = matchingModels.find((model) => model.name === node.modelType || model.type === node.modelType) ?? matchingModels[0];
+  const [modelType, setModelType] = useState(initialModel?.type ?? node.modelType);
+  const selectedModel = matchingModels.find((model) => model.type === modelType) ?? initialModel;
+  const [targetScale, setTargetScale] = useState(node.scale);
+  const [newScale, setNewScale] = useState("");
+  const initialValues = useMemo(() => {
+    if (!selectedModel) return {};
+    return Object.fromEntries(selectedModel.constructor.fields.map((field) => [
+      field.name,
+      node.modelParameters?.[field.name]?.value ?? parameterDefaultValue(field.default),
+    ]));
+  }, [node.modelParameters, selectedModel]);
+  const initialTypes = useMemo(() => {
+    if (!selectedModel) return {};
+    return Object.fromEntries(selectedModel.constructor.fields.map((field) => [
+      field.name,
+      node.modelParameters?.[field.name]?.type ?? field.inferredChoice,
+    ]));
+  }, [node.modelParameters, selectedModel]);
+  const [values, setValues] = useState<Record<string, string>>(initialValues);
+  const [types, setTypes] = useState<Record<string, string>>(initialTypes);
+  const initialTimestep = node.timestep ?? { mode: "default" as const, dt: "1.0", phase: "0.0" };
+  const [rateMode, setRateMode] = useState<"default" | "clock">(initialTimestep.mode === "clock" ? "clock" : "default");
+  const [rateDt, setRateDt] = useState(initialTimestep.dt ?? "1.0");
+  const [ratePhase, setRatePhase] = useState(initialTimestep.phase ?? "0.0");
+
+  useEffect(() => {
+    setValues(initialValues);
+    setTypes(initialTypes);
+  }, [initialTypes, initialValues]);
+
+  const setSharedType = useCallback((fieldName: string, nextType: string) => {
+    if (!selectedModel) return;
+    const field = selectedModel.constructor.fields.find((item) => item.name === fieldName);
+    const group = field?.typeParameter ? selectedModel.constructor.parameterGroups[field.typeParameter] ?? [fieldName] : [fieldName];
+    setTypes((current) => ({ ...current, ...Object.fromEntries(group.map((name) => [name, nextType])) }));
+  }, [selectedModel]);
+
+  const parameters = useCallback(() => {
+    if (!selectedModel) return {};
+    return Object.fromEntries(selectedModel.constructor.fields.map((field) => [
+      field.name,
+      { type: types[field.name] ?? field.inferredChoice, value: values[field.name] ?? "" },
+    ]));
+  }, [selectedModel, types, values]);
+
+  if (!selectedModel) return null;
+  const timestep = rateMode === "clock" ? { mode: "clock", dt: rateDt, phase: ratePhase } : { mode: "default" };
+
+  return (
+    <div className="existing-model-editor">
+      <h3>Edit Model</h3>
+      <label className="model-browser-control">
+        <span>Scale</span>
+        <select value={targetScale} onChange={(event) => setTargetScale(event.target.value)}>
+          {scales.map((scale) => <option key={scale} value={scale}>{scale}</option>)}
+        </select>
+      </label>
+      <label className="model-browser-control">
+        <span>New scale</span>
+        <div className="inline-field">
+          <input value={newScale} onChange={(event) => setNewScale(event.target.value)} placeholder="Leaf, Fruit, Soil" />
+          <button
+            className="metric-button"
+            onClick={() => {
+              onAddScale(newScale);
+              if (newScale.trim()) setTargetScale(newScale.trim());
+              setNewScale("");
+            }}
+          >
+            Add
+          </button>
+        </div>
+      </label>
+      <label className="model-browser-control">
+        <span>Model</span>
+        <select value={selectedModel.type} onChange={(event) => setModelType(event.target.value)}>
+          {matchingModels.map((model) => <option key={model.type} value={model.type}>{model.name}</option>)}
+        </select>
+      </label>
+      <RateEditor
+        mode={rateMode}
+        dt={rateDt}
+        phase={ratePhase}
+        defaultLabel={selectedModel.timespec ?? "default rate"}
+        onModeChange={setRateMode}
+        onDtChange={setRateDt}
+        onPhaseChange={setRatePhase}
+      />
+      {selectedModel.constructor.fields.map((field) => (
+        <div className="parameter-row" key={field.name}>
+          <label>{field.name}</label>
+          <input value={values[field.name] ?? ""} onChange={(event) => setValues((current) => ({ ...current, [field.name]: event.target.value }))} />
+          <select value={types[field.name] ?? field.inferredChoice} onChange={(event) => setSharedType(field.name, event.target.value)}>
+            {field.choices.map((choice) => <option key={choice} value={choice}>{choice}</option>)}
+          </select>
+        </div>
+      ))}
+      <div className="row-with-actions">
+        <button
+          className="metric-button"
+          disabled={disabled}
+          onClick={() => onCommand({
+            action: "edit",
+            kind: "update_model",
+            scale: node.scale,
+            process: node.process,
+            targetScale,
+            modelType: selectedModel.type,
+            parameters: parameters(),
+            timestep,
+          })}
+        >
+          Update model
+        </button>
+        <button
+          className="metric-button danger"
+          disabled={disabled}
+          onClick={() => onCommand({ action: "edit", kind: "remove_model", scale: node.scale, process: node.process })}
+        >
+          Remove
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function MappingCodePanel({
   code,
   savePath,
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 55a5a5bd..caab88c0 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1344,6 +1344,14 @@ h1 {
   font-size: 11px;
 }
 
+.existing-model-editor {
+  display: grid;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(183, 166, 150, 0.32);
+}
+
 .parameter-row {
   display: grid;
   grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(78px, 0.8fr);
@@ -1398,6 +1406,12 @@ h1 {
   padding: 0 7px;
 }
 
+.metric-button.danger {
+  border-color: rgba(191, 106, 84, 0.42);
+  color: #9b3f2e;
+  background: rgba(255, 242, 236, 0.86);
+}
+
 @media (max-width: 900px) {
   .app-shell {
     grid-template-columns: 1fr;
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 0016fd76..a40df793 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -16,6 +16,8 @@ export type GraphNodeData = {
   modelType: string;
   role: "model" | "hard_dependency";
   rate: string;
+  modelParameters?: Record<string, { value: string; type: string }>;
+  timestep?: { mode: "default" | "clock" | "julia"; dt?: string; phase?: string; value?: string };
   inputs: GraphPort[];
   outputs: GraphPort[];
   ownOutputIds?: string[];
diff --git a/src/PlantSimEngine.jl b/src/PlantSimEngine.jl
index 198c9b63..b3335328 100644
--- a/src/PlantSimEngine.jl
+++ b/src/PlantSimEngine.jl
@@ -149,7 +149,7 @@ export GraphPort, GraphNode, GraphEdge, DependencyGraphView
 export graph_view, graph_view_json, write_graph_view, compile_graph_view
 export AbstractGraphEditorSession, edit_graph, current_mapping, apply_edit!, undo!, redo!
 export available_processes, available_models, model_descriptor, model_constructor_descriptor
-export AbstractGraphEdit, AddModel, RemoveModel, ReplaceModel, SetMappedVariable, MarkPreviousTimeStep, UnmarkPreviousTimeStep, apply_graph_edit
+export AbstractGraphEdit, AddModel, RemoveModel, ReplaceModel, UpdateModel, SetMappedVariable, MarkPreviousTimeStep, UnmarkPreviousTimeStep, apply_graph_edit
 
 # Re-exporting PlantMeteo main functions:
 export Atmosphere, TimeStepTable, Constants, Weather
diff --git a/src/visualization/dependency_graph_view.jl b/src/visualization/dependency_graph_view.jl
index 11c2ef9b..846b9100 100644
--- a/src/visualization/dependency_graph_view.jl
+++ b/src/visualization/dependency_graph_view.jl
@@ -26,6 +26,8 @@ struct GraphNode
     model_type::String
     role::Symbol
     rate::String
+    model_parameters::Dict{String,Any}
+    timestep::Any
     inputs::Vector{GraphPort}
     outputs::Vector{GraphPort}
     own_output_ids::Vector{String}
@@ -73,8 +75,8 @@ end
 Abstract supertype for declarative dependency-graph editor commands.
 
 Concrete edits such as `AddModel`, `RemoveModel`, `ReplaceModel`,
-`SetMappedVariable`, `MarkPreviousTimeStep`, and `UnmarkPreviousTimeStep` are
-applied with `apply_graph_edit`.
+`UpdateModel`, `SetMappedVariable`, `MarkPreviousTimeStep`, and
+`UnmarkPreviousTimeStep` are applied with `apply_graph_edit`.
 """
 abstract type AbstractGraphEdit end
 
@@ -103,6 +105,15 @@ end
 ReplaceModel(scale::Symbol, process::Symbol, model_type::Type, parameters) =
     ReplaceModel(scale, process, model_type, parameters, nothing)
 
+struct UpdateModel{P,R} <: AbstractGraphEdit
+    scale::Symbol
+    process::Symbol
+    target_scale::Symbol
+    model_type::Type
+    parameters::P
+    timestep::R
+end
+
 struct SetMappedVariable <: AbstractGraphEdit
     scale::Symbol
     process::Symbol
@@ -223,10 +234,60 @@ function graph_view(graph::DependencyGraph, context=nothing; diagnostics::Vector
     cycle_nodes = cyclic ? [_model_node_id(last(pair), process(first(pair))) for pair in cycle_vec] : String[]
     cycle_edges = cyclic ? _cycle_edge_ids(edges, cycle_nodes) : String[]
     scales = sort!(unique([node.scale for node in nodes]); by=string)
-    return DependencyGraphView(nodes, edges, scales, cyclic, cycle_nodes, cycle_edges, diagnostics)
+    return _dependency_graph_view(nodes, edges, scales, cyclic, cycle_nodes, cycle_edges, diagnostics)
+end
+
+function _dependency_graph_view(nodes, edges, scales, cyclic, cycle_nodes, cycle_edges, diagnostics)
+    try
+        return Base.invokelatest(
+            DependencyGraphView,
+            _view_vector(fieldtype(DependencyGraphView, :nodes), nodes),
+            _view_vector(fieldtype(DependencyGraphView, :edges), edges),
+            scales,
+            cyclic,
+            cycle_nodes,
+            cycle_edges,
+            diagnostics,
+        )
+    catch err
+        err isa MethodError || rethrow()
+        return (;
+            nodes,
+            edges,
+            scales,
+            cyclic,
+            cycle_nodes,
+            cycle_edges,
+            diagnostics,
+        )
+    end
+end
+
+function _view_vector(::Type{Vector{T}}, items) where {T}
+    eltype(items) === T && return items
+    return T[_view_item(T, item) for item in items]
+end
+
+_view_vector(::Type, items) = items
+
+function _view_item(::Type{T}, item) where {T}
+    item isa T && return item
+    names = fieldnames(T)
+    values = map(enumerate(names)) do pair
+        index, name = pair
+        _view_field_value(fieldtype(T, index), getproperty(item, name))
+    end
+    return Base.invokelatest(T, values...)
+end
+
+function _view_field_value(::Type{Vector{T}}, value) where {T}
+    eltype(value) === T && return value
+    return T[_view_item(T, item) for item in value]
 end
 
-function _cycle_edge_ids(edges::Vector{GraphEdge}, cycle_nodes::Vector{String})
+_view_field_value(::Type, value) = value
+
+function _cycle_edge_ids(edges, cycle_nodes::Vector{String})
     ids = String[]
     length(cycle_nodes) < 2 && return ids
     for i in 1:(length(cycle_nodes)-1)
@@ -240,7 +301,7 @@ function _cycle_edge_ids(edges::Vector{GraphEdge}, cycle_nodes::Vector{String})
     return unique(ids)
 end
 
-function _push_edge!(edges::Vector{GraphEdge}, edge_ids::Set{String}, edge::GraphEdge)
+function _push_edge!(edges, edge_ids::Set{String}, edge)
     edge.id in edge_ids && return edges
     push!(edges, edge)
     push!(edge_ids, edge.id)
@@ -263,7 +324,7 @@ function _hard_edge(parent::AbstractDependencyNode, child::HardDependencyNode, p
     )
 end
 
-function _add_hard_output_edges!(edges::Vector{GraphEdge}, edge_ids::Set{String}, nodes::Vector{GraphNode})
+function _add_hard_output_edges!(edges, edge_ids::Set{String}, nodes)
     computed_inputs = Set(edge.target_port for edge in edges if !isnothing(edge.target_port))
     hard_outputs = Dict{Tuple{Symbol,Symbol},Vector{Tuple{GraphNode,GraphPort}}}()
     for node in nodes
@@ -301,7 +362,7 @@ function _add_hard_output_edges!(edges::Vector{GraphEdge}, edge_ids::Set{String}
     return edges
 end
 
-function _add_spec_mapped_input_edges!(edges::Vector{GraphEdge}, edge_ids::Set{String}, nodes::Vector{GraphNode}, context)
+function _add_spec_mapped_input_edges!(edges, edge_ids::Set{String}, nodes, context)
     isnothing(context) && return edges
     computed_inputs = Set(edge.target_port for edge in edges if !isnothing(edge.target_port))
 
@@ -350,7 +411,7 @@ end
 _mapping_sources(source::Pair{Symbol,Symbol}) = (source,)
 _mapping_sources(sources::AbstractVector) = sources
 
-function _add_hard_input_edges!(edges::Vector{GraphEdge}, edge_ids::Set{String}, nodes::Vector{GraphNode})
+function _add_hard_input_edges!(edges, edge_ids::Set{String}, nodes)
     node_by_id = Dict(node.id => node for node in nodes)
     input_edge_by_target = Dict(edge.target_port => edge for edge in edges if !isnothing(edge.target_port))
     computed_inputs = Set(keys(input_edge_by_target))
@@ -396,7 +457,7 @@ function _find_port(ports::Vector{GraphPort}, name::Symbol)
     isnothing(index) ? nothing : ports[index]
 end
 
-function _find_output_port(nodes::Vector{GraphNode}, scale::Symbol, name::Symbol)
+function _find_output_port(nodes, scale::Symbol, name::Symbol)
     for node in nodes
         node.scale == scale || continue
         port = _find_port(node.outputs, name)
@@ -411,7 +472,7 @@ end
 
 Return the graph view as JSON for browser renderers.
 """
-graph_view_json(view::DependencyGraphView) = _json(_graph_view_dict(view))
+graph_view_json(view) = _json(_graph_view_dict(view))
 graph_view_json(mapping::ModelMapping; kwargs...) = graph_view_json(graph_view(mapping; kwargs...))
 graph_view_json(sim::GraphSimulation; kwargs...) = graph_view_json(graph_view(sim; kwargs...))
 
@@ -429,6 +490,14 @@ function write_graph_view(path::AbstractString, view::DependencyGraphView; rende
     return abspath(path)
 end
 
+function write_graph_view(path::AbstractString, view; renderer::Symbol=:react)
+    mkpath(dirname(abspath(path)))
+    open(path, "w") do io
+        write(io, _graph_view_html(view; renderer=renderer))
+    end
+    return abspath(path)
+end
+
 write_graph_view(path::AbstractString, mapping::ModelMapping; kwargs...) =
     write_graph_view(path, graph_view(mapping; kwargs...))
 
@@ -505,6 +574,42 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::ReplaceModel)
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
+function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::UpdateModel)
+    haskey(mapping, edit.scale) || error("Cannot update model: scale `$(edit.scale)` is not present in the `ModelMapping`.")
+    model = _construct_graph_edit_model(edit.model_type, edit.parameters)
+    process(model) == edit.process || error(
+        "Cannot update process `$(edit.process)` with `$(typeof(model))`: replacement model implements process `$(process(model))`."
+    )
+
+    if edit.target_scale != edit.scale && haskey(mapping, edit.target_scale)
+        any(existing -> process(existing) == edit.process, get_models(mapping[edit.target_scale])) && error(
+            "Cannot move process `$(edit.process)` to scale `$(edit.target_scale)`: that process already exists at the target scale."
+        )
+    end
+
+    found = Ref(false)
+    moved_item = Ref{Any}()
+    data = Dict{Symbol,Any}()
+    for (scale, entry) in pairs(mapping)
+        if scale == edit.scale
+            data[scale] = _remove_updated_model_entry(entry, edit.process, model, edit.timestep, found, moved_item)
+        else
+            data[scale] = entry
+        end
+    end
+    found[] || error("Cannot update model: process `$(edit.process)` was not found at scale `$(edit.scale)`.")
+
+    if edit.target_scale == edit.scale
+        data[edit.scale] = _insert_model_entry(data[edit.scale], moved_item[])
+    elseif haskey(data, edit.target_scale)
+        data[edit.target_scale] = _insert_model_entry(data[edit.target_scale], moved_item[])
+    else
+        data[edit.target_scale] = (moved_item[],)
+    end
+
+    return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
+end
+
 function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::SetMappedVariable)
     haskey(mapping, edit.scale) || error("Cannot set mapping: scale `$(edit.scale)` is not present in the `ModelMapping`.")
     found = Ref(false)
@@ -541,6 +646,7 @@ _construct_graph_edit_model(model_type::Type, parameters::AbstractDict) =
     _construct_graph_edit_model(model_type, (; (Symbol(k) => v for (k, v) in pairs(parameters))...))
 
 _graph_edit_model_item(model, timestep::Nothing) = model
+_graph_edit_model_item(model, timestep::Symbol) = timestep === :default ? model : (ModelSpec(model) |> TimeStepModel(timestep))
 _graph_edit_model_item(model, timestep) = ModelSpec(model) |> TimeStepModel(timestep)
 
 function _insert_model_entry(entry::Tuple, model)
@@ -590,6 +696,29 @@ function _replace_model_item(item, process_name::Symbol, model, timestep, found:
     process(model_(spec)) == process_name || return item
     found[] = true
     isnothing(timestep) && return ModelSpec(spec; model=model)
+    timestep === :default && return ModelSpec(spec; model=model, timestep=nothing)
+    return ModelSpec(spec; model=model, timestep=timestep)
+end
+
+function _remove_updated_model_entry(entry::Tuple, process_name::Symbol, model, timestep, found::Base.RefValue{Bool}, moved_item::Base.RefValue)
+    items = Any[]
+    for item in entry
+        if !(item isa Status) && process(model_(as_model_spec(item))) == process_name
+            found[] = true
+            moved_item[] = _updated_model_spec(as_model_spec(item), model, timestep)
+            continue
+        end
+        push!(items, item)
+    end
+    return tuple(items...)
+end
+
+_remove_updated_model_entry(entry, process_name::Symbol, model, timestep, found::Base.RefValue{Bool}, moved_item::Base.RefValue) =
+    _remove_updated_model_entry((entry,), process_name, model, timestep, found, moved_item)
+
+function _updated_model_spec(spec::ModelSpec, model, timestep)
+    isnothing(timestep) && return ModelSpec(spec; model=model)
+    timestep === :default && return ModelSpec(spec; model=model, timestep=nothing)
     return ModelSpec(spec; model=model, timestep=timestep)
 end
 
@@ -725,6 +854,8 @@ function _graph_view_from_mapping_only(mapping::ModelMapping, diagnostics)
                 _type_label(typeof(model)),
                 :model,
                 _rate_label(spec),
+                _model_parameters(model),
+                _timestep_payload(timestep(spec)),
                 _ports(id, :input, inputs_(model)),
                 _ports(id, :output, outputs_(model)),
                 [_port_id(id, :output, name) for name in keys(outputs_(model))],
@@ -736,7 +867,7 @@ function _graph_view_from_mapping_only(mapping::ModelMapping, diagnostics)
     scales = sort!(unique([node.scale for node in nodes]); by=string)
     cyclic = any(occursin.("Cyclic", diagnostics))
     cycle_nodes = cyclic ? [node.id for node in nodes] : String[]
-    return DependencyGraphView(nodes, GraphEdge[], scales, cyclic, cycle_nodes, String[], diagnostics)
+    return _dependency_graph_view(nodes, GraphEdge[], scales, cyclic, cycle_nodes, String[], diagnostics)
 end
 
 function _graph_node(node::AbstractDependencyNode, id::String, context, node_ids)
@@ -751,6 +882,8 @@ function _graph_node(node::AbstractDependencyNode, id::String, context, node_ids
         _type_label(typeof(node.value)),
         role,
         rate,
+        _model_parameters(node.value),
+        isnothing(spec) ? _timestep_payload(nothing) : _timestep_payload(timestep(spec)),
         _ports(id, :input, _flatten_node_vars(node.inputs)),
         _ports(id, :output, _flatten_node_vars(node.outputs)),
         _own_output_ids(node, id),
@@ -895,6 +1028,36 @@ function _rate_label(model::AbstractModel)
     return ts == ClockSpec(1.0, 0.0) ? "default rate" : string("model timespec: ", ts)
 end
 
+function _model_parameters(model)
+    fields = fieldnames(Base.unwrap_unionall(typeof(model)))
+    return Dict(string(name) => _parameter_payload(getfield(model, name)) for name in fields)
+end
+
+function _parameter_payload(value)
+    return Dict(
+        "value" => _parameter_value_string(value),
+        "type" => _parameter_choice(value),
+    )
+end
+
+_parameter_value_string(value::Symbol) = string(value)
+_parameter_value_string(value::AbstractString) = value
+_parameter_value_string(value) = string(value)
+
+_parameter_choice(value::Bool) = "boolean"
+_parameter_choice(value::AbstractFloat) = "float"
+_parameter_choice(value::Integer) = "integer"
+_parameter_choice(value::Symbol) = "symbol"
+_parameter_choice(value::AbstractString) = "string"
+_parameter_choice(value::Nothing) = "nothing"
+_parameter_choice(value) = "julia"
+
+_timestep_payload(::Nothing) = Dict("mode" => "default", "dt" => "1.0", "phase" => "0.0")
+function _timestep_payload(clock::ClockSpec)
+    return Dict("mode" => "clock", "dt" => string(clock.dt), "phase" => string(clock.phase))
+end
+_timestep_payload(value) = Dict("mode" => "julia", "value" => string(value))
+
 _mapping_mode(value) = nothing
 _mapping_mode(value::MappedVar{SingleNodeMapping}) = "single-node"
 _mapping_mode(value::MappedVar{MultiNodeMapping}) = "multi-node"
@@ -928,7 +1091,7 @@ function _short_value(value)
     return string(typeof(value))
 end
 
-function _graph_view_dict(view::DependencyGraphView)
+function _graph_view_dict(view)
     return Dict(
         "nodes" => [_node_dict(node) for node in view.nodes],
         "edges" => [_edge_dict(edge) for edge in view.edges],
@@ -940,7 +1103,7 @@ function _graph_view_dict(view::DependencyGraphView)
     )
 end
 
-function _node_dict(node::GraphNode)
+function _node_dict(node)
     return Dict(
         "id" => node.id,
         "process" => string(node.process),
@@ -948,6 +1111,8 @@ function _node_dict(node::GraphNode)
         "modelType" => node.model_type,
         "role" => string(node.role),
         "rate" => node.rate,
+        "modelParameters" => _property_or(node, :model_parameters, Dict{String,Any}()),
+        "timestep" => _property_or(node, :timestep, _timestep_payload(nothing)),
         "inputs" => [_port_dict(port) for port in node.inputs],
         "outputs" => [_port_dict(port) for port in node.outputs],
         "ownOutputIds" => node.own_output_ids,
@@ -956,7 +1121,11 @@ function _node_dict(node::GraphNode)
     )
 end
 
-function _port_dict(port::GraphPort)
+function _property_or(item, name::Symbol, default)
+    return name in fieldnames(typeof(item)) ? getfield(item, name) : default
+end
+
+function _port_dict(port)
     return Dict(
         "id" => port.id,
         "name" => string(port.name),
@@ -969,7 +1138,7 @@ function _port_dict(port::GraphPort)
     )
 end
 
-function _edge_dict(edge::GraphEdge)
+function _edge_dict(edge)
     return Dict(
         "id" => edge.id,
         "source" => edge.source,
@@ -987,7 +1156,7 @@ end
 
 _json(value) = replace(JSON.json(value), "</" => "<\\/")
 
-function _graph_view_html(view::DependencyGraphView; renderer::Symbol=:react)
+function _graph_view_html(view; renderer::Symbol=:react)
     if renderer == :react
         react_html = _react_graph_view_html(view)
         isnothing(react_html) || return react_html
@@ -997,7 +1166,7 @@ function _graph_view_html(view::DependencyGraphView; renderer::Symbol=:react)
     return _standalone_graph_view_html(view)
 end
 
-function _react_graph_view_html(view::DependencyGraphView)
+function _react_graph_view_html(view)
     assets_dir = _react_graph_viewer_assets_dir()
     manifest_path = joinpath(assets_dir, ".vite", "manifest.json")
     isfile(manifest_path) || return nothing
@@ -1073,7 +1242,7 @@ function _vite_entry(manifest)
     return get(manifest, "index.html", nothing)
 end
 
-function _standalone_graph_view_html(view::DependencyGraphView)
+function _standalone_graph_view_html(view)
     json = graph_view_json(view)
     html = raw"""
 <!doctype html>
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index f41edd47..da43093d 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -34,6 +34,23 @@ using HTTP
     beer_model = first(m for m in models_after_replace if PlantSimEngine.process(m) == :light_interception)
     @test beer_model.k == 0.7
 
+    updated = PlantSimEngine.apply_graph_edit(
+        mapping_multiscale,
+        PlantSimEngine.UpdateModel(:Default, :light_interception, :Default, Beer, (k=0.8,), ClockSpec(3.0, 1.0)),
+    )
+    updated_spec = PlantSimEngine.parse_model_specs(updated[:Default])[:light_interception]
+    @test PlantSimEngine.model_(updated_spec).k == 0.8
+    @test PlantSimEngine.timestep(updated_spec) == ClockSpec(3.0, 1.0)
+
+    moved = PlantSimEngine.apply_graph_edit(
+        updated,
+        PlantSimEngine.UpdateModel(:Default, :light_interception, :Fruit, Beer, (k=0.9,), :default),
+    )
+    @test !haskey(PlantSimEngine.parse_model_specs(moved[:Default]), :light_interception)
+    moved_spec = PlantSimEngine.parse_model_specs(moved[:Fruit])[:light_interception]
+    @test PlantSimEngine.model_(moved_spec).k == 0.9
+    @test isnothing(PlantSimEngine.timestep(moved_spec))
+
     rated = PlantSimEngine.apply_graph_edit(
         mapping_multiscale,
         PlantSimEngine.AddModel(:Fruit, ToyLAIModel, NamedTuple(), ClockSpec(2.0, 1.0)),
@@ -74,6 +91,25 @@ end
             initial = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
             @test initial["ok"]
             @test haskey(initial, "graph")
+            node = only(item for item in initial["graph"]["nodes"] if item["process"] == "light_interception")
+            @test node["modelParameters"]["k"]["value"] == "0.5"
+
+            update_command = PlantSimEngine.JSON.json(Dict(
+                "action" => "edit",
+                "kind" => "update_model",
+                "scale" => "Leaf",
+                "process" => "light_interception",
+                "targetScale" => "Leaf",
+                "modelType" => string(Beer),
+                "parameters" => Dict("k" => Dict("type" => "float", "value" => "0.8")),
+                "timestep" => Dict("mode" => "clock", "dt" => "3.0", "phase" => "1.0"),
+            ))
+            HTTP.WebSockets.send(ws, update_command)
+            updated = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test updated["ok"]
+            updated_spec = PlantSimEngine.parse_model_specs(current_mapping(session)[:Leaf])[:light_interception]
+            @test PlantSimEngine.model_(updated_spec).k == 0.8
+            @test PlantSimEngine.timestep(updated_spec) == ClockSpec(3.0, 1.0)
 
             command = PlantSimEngine.JSON.json(Dict(
                 "action" => "edit",

From cbf1b298b2cd089c0f61230cab8ab8dd59c3acf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Wed, 6 May 2026 10:01:32 +0200
Subject: [PATCH 07/19] Fix issue in edito graph for manual multiscale mapping

---
 .../graph_visualization_editor.md             |   3 +-
 ext/PlantSimEngineGraphEditorExt.jl           |   1 +
 frontend/src/App.tsx                          | 158 +++++++++++++++-
 frontend/src/styles.css                       | 171 ++++++++++++++++++
 src/visualization/dependency_graph_view.jl    |  35 ++--
 test/test-dependency-graph-view.jl            |  22 +++
 test/test-graph-editor-extension.jl           |  34 ++++
 7 files changed, 402 insertions(+), 22 deletions(-)

diff --git a/docs/src/step_by_step/graph_visualization_editor.md b/docs/src/step_by_step/graph_visualization_editor.md
index eb78290b..dcb1b251 100644
--- a/docs/src/step_by_step/graph_visualization_editor.md
+++ b/docs/src/step_by_step/graph_visualization_editor.md
@@ -61,7 +61,8 @@ The editor extension currently supports the same edit operations as the Julia AP
 - add, remove, and replace a model at a scale;
 - update an existing model's parameter values, scale, or rate from the inspector;
 - keep the model default rate, or set a custom `ClockSpec(dt, phase)` when adding a model;
-- set a mapped input variable;
+- set a mapped input variable, either from the inspector or by drawing a connection from an output port to an input port;
+- map a scalar source value or a vector of values from one or several source scales;
 - mark or unmark a variable as [`PreviousTimeStep`](@ref);
 - undo and redo edits inside the live session.
 
diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index c63f2cbc..29772916 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -253,6 +253,7 @@ function _edit_from_command(command)
         Symbol(command["sourceScale"]),
         Symbol(command["sourceVariable"]),
         Symbol(get(command, "mode", "single")),
+        Symbol.(get(command, "extraSourceScales", [])),
     )
     if kind in ("add_model", "replace_model")
         model_type = _resolve_model_type(command["modelType"])
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 81184cbd..ae918bba 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,7 +4,6 @@ import {
   Controls,
   MiniMap,
   ReactFlow,
-  addEdge,
   MarkerType,
   useEdgesState,
   useNodesState,
@@ -38,6 +37,13 @@ type EdgeFilters = Record<EdgeFilterKey, boolean>;
 type FocusMode = "none" | "upstream" | "downstream" | "neighborhood";
 type SidePanel = "inspector" | "add_model" | "mapping_code" | null;
 
+type PendingMappingConnection = {
+  sourceNode: GraphNodeData;
+  sourcePort: GraphPort;
+  targetNode: GraphNodeData;
+  targetPort: GraphPort;
+};
+
 type SearchResult = {
   id: string;
   kind: "model" | "input" | "output";
@@ -117,6 +123,7 @@ export default function App() {
   const [customScales, setCustomScales] = useState<string[]>([]);
   const [selected, setSelected] = useState<GraphNodeData | null>(null);
   const [activePort, setActivePort] = useState<GraphPort | null>(null);
+  const [pendingConnection, setPendingConnection] = useState<PendingMappingConnection | null>(null);
   const [showRequiredPanel, setShowRequiredPanel] = useState(false);
   const [showWarningsPanel, setShowWarningsPanel] = useState(false);
   const [showSearchResults, setShowSearchResults] = useState(false);
@@ -252,15 +259,22 @@ export default function App() {
   }, [activePort, focus, graph.cycleNodes, hoverHighlight.edges, hoverHighlight.ports, requiredInputPortIds, setEdges, setNodes]);
 
   const onConnect = useCallback((connection: Connection) => {
-    setEdges((current) => addEdge({
-      ...connection,
-      type: "dependency",
-      animated: true,
-      markerEnd: edgeMarker(edgeColors.base),
-      style: edgeStyle(edgeColors.base, false),
-      zIndex: 5,
-    }, current));
-  }, [setEdges]);
+    if (!editorConnected) return;
+    const sourcePortId = connection.sourceHandle;
+    const targetPortId = connection.targetHandle;
+    if (!sourcePortId || !targetPortId) return;
+    const sourceInfo = portById.get(sourcePortId);
+    const targetInfo = portById.get(targetPortId);
+    if (!sourceInfo || !targetInfo) return;
+    // Only handle output-to-input connections.
+    if (sourceInfo.port.role !== "output" || targetInfo.port.role !== "input") return;
+    setPendingConnection({
+      sourceNode: sourceInfo.node,
+      sourcePort: sourceInfo.port,
+      targetNode: targetInfo.node,
+      targetPort: targetInfo.port,
+    });
+  }, [editorConnected, portById]);
 
   const relayout = useCallback(() => {
     layoutGraph(nodes, edges, layoutMode).then(setNodes);
@@ -532,6 +546,7 @@ export default function App() {
                 outgoingEdges={activePort ? outgoingByPort.get(activePort.id) ?? [] : []}
                 nodeById={nodeById}
                 portById={portById}
+                graphNodes={graph.nodes}
                 onFocusEdge={focusEdge}
                 models={editorModels}
                 scales={editorScales}
@@ -581,10 +596,122 @@ export default function App() {
           )}
         </aside>
       )}
+
+      {pendingConnection && (
+        <MappingDialog
+          connection={pendingConnection}
+          scales={editorScales}
+          onConfirm={(command) => {
+            sendEditorCommand(command);
+            setPendingConnection(null);
+          }}
+          onCancel={() => setPendingConnection(null)}
+        />
+      )}
     </main>
   );
 }
 
+function MappingDialog({
+  connection,
+  scales,
+  onConfirm,
+  onCancel,
+}: {
+  connection: PendingMappingConnection;
+  scales: string[];
+  onConfirm: (command: Record<string, unknown>) => void;
+  onCancel: () => void;
+}) {
+  const [mode, setMode] = useState<"single" | "multi">("single");
+  const [selectedScales, setSelectedScales] = useState<string[]>([connection.sourceNode.scale]);
+
+  const toggleScale = (scale: string) => {
+    setSelectedScales((current) =>
+      current.includes(scale) ? current.filter((s) => s !== scale) : [...current, scale]
+    );
+  };
+
+  const handleConfirm = () => {
+    const command: Record<string, unknown> = {
+      action: "edit",
+      kind: "set_mapped_variable",
+      scale: connection.targetNode.scale,
+      process: connection.targetNode.process,
+      variable: connection.targetPort.name,
+      sourceScale: connection.sourceNode.scale,
+      sourceVariable: connection.sourcePort.name,
+      mode: mode === "single" && connection.sourceNode.scale === connection.targetNode.scale ? "same_scale" : mode,
+    };
+    if (mode === "multi") {
+      const extras = selectedScales.filter((s) => s !== connection.sourceNode.scale);
+      if (extras.length > 0) command.extraSourceScales = extras;
+    }
+    onConfirm(command);
+  };
+
+  return (
+    <div className="mapping-dialog-overlay" onClick={onCancel} role="dialog" aria-modal="true" aria-label="Map variable">
+      <div className="mapping-dialog" onClick={(e) => e.stopPropagation()}>
+        <div className="mapping-dialog-header">
+          <div className="eyebrow">Variable Mapping</div>
+          <button className="icon-button compact" onClick={onCancel} title="Cancel"><X size={14} /></button>
+        </div>
+
+        <div className="mapping-dialog-body">
+          <div className="mapping-port-summary">
+            <div className="mapping-port source">
+              <small>Source</small>
+              <strong>{connection.sourceNode.scale}</strong>
+              <span>{connection.sourceNode.process}.{connection.sourcePort.name}</span>
+            </div>
+            <div className="mapping-arrow">-&gt;</div>
+            <div className="mapping-port target">
+              <small>Target</small>
+              <strong>{connection.targetNode.scale}</strong>
+              <span>{connection.targetNode.process}.{connection.targetPort.name}</span>
+            </div>
+          </div>
+
+          <div className="mapping-mode-section">
+            <div className="mapping-mode-label">Mapping mode</div>
+            <label className="mapping-radio">
+              <input type="radio" name="mode" value="single" checked={mode === "single"} onChange={() => setMode("single")} />
+              <span>Scalar - single node at :{connection.sourceNode.scale}</span>
+            </label>
+            <label className="mapping-radio">
+              <input type="radio" name="mode" value="multi" checked={mode === "multi"} onChange={() => setMode("multi")} />
+              <span>Vector - all nodes from selected scales</span>
+            </label>
+          </div>
+
+          {mode === "multi" && (
+            <div className="mapping-scale-picker">
+              <div className="mapping-mode-label">Source scales</div>
+              {scales.map((scale) => (
+                <label className="mapping-checkbox" key={scale}>
+                  <input
+                    type="checkbox"
+                    checked={selectedScales.includes(scale)}
+                    disabled={scale === connection.sourceNode.scale}
+                    onChange={() => toggleScale(scale)}
+                  />
+                  <span>{scale}</span>
+                </label>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="mapping-dialog-footer">
+          <button className="metric-button" onClick={onCancel}>Cancel</button>
+          <button className="metric-button accent-button" onClick={handleConfirm}>Apply mapping</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function RelationshipLegend({ filters, onToggle }: { filters: EdgeFilters; onToggle: (key: EdgeFilterKey) => void }) {
   return (
     <div className="relationship-legend">
@@ -707,6 +834,7 @@ function InspectorDetails({
   outgoingEdges,
   nodeById,
   portById,
+  graphNodes,
   onFocusEdge,
   models,
   scales,
@@ -722,6 +850,7 @@ function InspectorDetails({
   outgoingEdges: GraphEdgeData[];
   nodeById: Map<string, GraphNodeData>;
   portById: Map<string, { node: GraphNodeData; port: GraphPort }>;
+  graphNodes: GraphNodeData[];
   onFocusEdge: (edge: GraphEdgeData) => void;
   models: ModelDescriptor[];
   scales: string[];
@@ -778,6 +907,15 @@ function InspectorDetails({
           {activePort.previousTimeStep && <div className="edit-suggestion"><ScissorsLineDashed size={14} /> uses previous timestep</div>}
           <EdgeList title="Produced by" edges={incomingEdges} direction="incoming" nodeById={nodeById} portById={portById} onFocusEdge={onFocusEdge} />
           <EdgeList title="Consumed by" edges={outgoingEdges} direction="outgoing" nodeById={nodeById} portById={portById} onFocusEdge={onFocusEdge} />
+          {activePort.role === "input" && (
+            <VariableMappingEditor
+              key={activePort.id}
+              target={portById.get(activePort.id) ?? null}
+              graphNodes={graphNodes}
+              disabled={!editorConnected}
+              onCommand={onCommand}
+            />
+          )}
         </div>
       ) : (
         <div className="empty-state">Hover, click, or search a variable to see where it comes from and where it goes.</div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index caab88c0..940c14a9 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1431,3 +1431,174 @@ h1 {
     left: 220px;
   }
 }
+
+/* Mapping dialog */
+.mapping-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(49, 39, 33, 0.38);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mapping-dialog {
+  background: var(--paper);
+  border: 1px solid var(--line-strong);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px var(--shadow);
+  width: 360px;
+  max-width: calc(100vw - 32px);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+}
+
+.mapping-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.mapping-dialog-header .eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--muted);
+}
+
+.mapping-dialog-body {
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.mapping-port-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--paper-strong);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 10px 12px;
+}
+
+.mapping-port {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+
+.mapping-port small {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+}
+
+.mapping-port strong {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--accent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mapping-port span {
+  font-size: 11px;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mapping-port.target strong {
+  color: var(--clay);
+}
+
+.mapping-arrow {
+  font-size: 18px;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+
+.mapping-mode-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mapping-mode-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  margin-bottom: 2px;
+}
+
+.mapping-radio {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 4px 0;
+}
+
+.mapping-radio input[type="radio"] {
+  accent-color: var(--accent);
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.mapping-scale-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mapping-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 2px 0;
+}
+
+.mapping-checkbox input[type="checkbox"] {
+  accent-color: var(--accent);
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.mapping-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 16px 14px;
+  border-top: 1px solid var(--line);
+}
+
+.accent-button {
+  background: var(--accent);
+  color: #fff;
+  border-color: transparent;
+}
+
+.accent-button:hover:not(:disabled) {
+  background: var(--sage-dark);
+  border-color: transparent;
+}
diff --git a/src/visualization/dependency_graph_view.jl b/src/visualization/dependency_graph_view.jl
index 846b9100..329f8a93 100644
--- a/src/visualization/dependency_graph_view.jl
+++ b/src/visualization/dependency_graph_view.jl
@@ -121,8 +121,13 @@ struct SetMappedVariable <: AbstractGraphEdit
     source_scale::Symbol
     source_variable::Symbol
     mode::Symbol
+    extra_source_scales::Vector{Symbol}
 end
 
+# Backward-compatible constructor without extra_source_scales
+SetMappedVariable(scale, process, variable, source_scale, source_variable, mode) =
+    SetMappedVariable(scale, process, variable, source_scale, source_variable, mode, Symbol[])
+
 """
     MarkPreviousTimeStep(scale, process, variable)
 
@@ -168,7 +173,7 @@ function graph_view(mapping::ModelMapping; kwargs...)
     return compile_graph_view(mapping; kwargs...)
 end
 
-function _dependency_graph_for_view(mapping::ModelMapping{MultiScale}, diagnostics)
+function _dependency_graph_for_view(mapping::ModelMapping{MultiScale,<:Any}, diagnostics)
     try
         soft_dep_graphs_roots, hard_dep_dict = hard_dependencies(mapping; verbose=false)
         mapped_vars = mapped_variables(mapping, soft_dep_graphs_roots, verbose=false)
@@ -504,7 +509,7 @@ write_graph_view(path::AbstractString, mapping::ModelMapping; kwargs...) =
 write_graph_view(path::AbstractString, sim::GraphSimulation; kwargs...) =
     write_graph_view(path, graph_view(sim; kwargs...))
 
-function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::MarkPreviousTimeStep)
+function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::MarkPreviousTimeStep)
     haskey(mapping, edit.scale) || error("Cannot mark `$(edit.variable)` as previous timestep: scale `$(edit.scale)` is not present in the `ModelMapping`.")
 
     found = Ref(false)
@@ -517,7 +522,7 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::MarkPreviousT
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
-function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::UnmarkPreviousTimeStep)
+function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::UnmarkPreviousTimeStep)
     haskey(mapping, edit.scale) || error("Cannot unmark `$(edit.variable)` as previous timestep: scale `$(edit.scale)` is not present in the `ModelMapping`.")
 
     found = Ref(false)
@@ -530,7 +535,7 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::UnmarkPreviou
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
-function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::AddModel)
+function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::AddModel)
     model = _construct_graph_edit_model(edit.model_type, edit.parameters)
     process_name = process(model)
     item = _graph_edit_model_item(model, edit.timestep)
@@ -548,7 +553,7 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::AddModel)
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
-function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::RemoveModel)
+function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::RemoveModel)
     haskey(mapping, edit.scale) || error("Cannot remove model: scale `$(edit.scale)` is not present in the `ModelMapping`.")
     found = Ref(false)
     data = Dict{Symbol,Any}()
@@ -559,7 +564,7 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::RemoveModel)
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
-function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::ReplaceModel)
+function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::ReplaceModel)
     haskey(mapping, edit.scale) || error("Cannot replace model: scale `$(edit.scale)` is not present in the `ModelMapping`.")
     model = _construct_graph_edit_model(edit.model_type, edit.parameters)
     process(model) == edit.process || error(
@@ -574,7 +579,7 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::ReplaceModel)
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
-function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::UpdateModel)
+function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::UpdateModel)
     haskey(mapping, edit.scale) || error("Cannot update model: scale `$(edit.scale)` is not present in the `ModelMapping`.")
     model = _construct_graph_edit_model(edit.model_type, edit.parameters)
     process(model) == edit.process || error(
@@ -610,7 +615,7 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::UpdateModel)
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
-function apply_graph_edit(mapping::ModelMapping{MultiScale}, edit::SetMappedVariable)
+function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::SetMappedVariable)
     haskey(mapping, edit.scale) || error("Cannot set mapping: scale `$(edit.scale)` is not present in the `ModelMapping`.")
     found = Ref(false)
     data = Dict{Symbol,Any}()
@@ -739,9 +744,17 @@ function _set_mapped_variable_item(item, edit::SetMappedVariable, found::Base.Re
         "the variable is not declared as an input or output of `$(typeof(model_(spec)))`."
     )
     found[] = true
-    source = edit.mode in (:multi, :multi_node, :vector) ?
-             [edit.source_scale => edit.source_variable] :
-             edit.source_scale => edit.source_variable
+    source = if edit.mode in (:multi, :multi_node, :vector)
+        pairs = [edit.source_scale => edit.source_variable]
+        for extra in edit.extra_source_scales
+            push!(pairs, extra => edit.source_variable)
+        end
+        pairs
+    elseif edit.mode in (:same, :same_scale, :alias)
+        Symbol("") => edit.source_variable
+    else
+        edit.source_scale => edit.source_variable
+    end
     return ModelSpec(spec; multiscale=_set_mapping_item(spec.multiscale, edit.variable, source))
 end
 
diff --git a/test/test-dependency-graph-view.jl b/test/test-dependency-graph-view.jl
index 3431d1c8..d42ca72c 100644
--- a/test/test-dependency-graph-view.jl
+++ b/test/test-dependency-graph-view.jl
@@ -188,6 +188,28 @@ PlantSimEngine.outputs_(::GraphViewCycleLeafModel) = (y=-Inf,)
     mapped_spec = PlantSimEngine.parse_model_specs(mapped_edit_mapping[:Phytomer])[:graph_view_initiation_age]
     @test first(PlantSimEngine.mapped_variables_(mapped_spec)) == (:plant_age => (:Plant => :plant_age))
 
+    vector_mapping = ModelMapping(
+        :Leaf => (ToyAssimModel(), Status(aPPFD=1300.0)),
+        :Soil => ToySoilWaterModel(),
+        :Internode => ToySoilWaterModel(),
+    )
+    vector_edit_mapping = apply_graph_edit(
+        vector_mapping,
+        SetMappedVariable(
+            :Leaf,
+            :carbon_assimilation,
+            :soil_water_content,
+            :Soil,
+            :soil_water_content,
+            :multi,
+            [:Internode],
+        ),
+    )
+    vector_spec = PlantSimEngine.parse_model_specs(vector_edit_mapping[:Leaf])[:carbon_assimilation]
+    vector_mapped_variable = first(PlantSimEngine.mapped_variables_(vector_spec))
+    @test first(vector_mapped_variable) == :soil_water_content
+    @test last(vector_mapped_variable) == [:Soil => :soil_water_content, :Internode => :soil_water_content]
+
     unmarked_mapping = apply_graph_edit(edited_mapping, UnmarkPreviousTimeStep(:Leaf, :carbon_assimilation, :soil_water_content))
     unmarked_view = graph_view(unmarked_mapping)
     @test any(
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index da43093d..fc8b1a56 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -143,6 +143,40 @@ end
             @test PlantSimEngine.timestep(rated_spec) == ClockSpec(2.0, 1.0)
             @test occursin("TimeStepModel", added["mappingCode"])
 
+            add_degree_days = PlantSimEngine.JSON.json(Dict(
+                "action" => "edit",
+                "kind" => "add_model",
+                "scale" => "Plant",
+                "modelType" => string(ToyDegreeDaysCumulModel),
+                "parameters" => Dict{String,Any}(),
+            ))
+            HTTP.WebSockets.send(ws, add_degree_days)
+            degree_days_added = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test degree_days_added["ok"]
+
+            set_mapped_tt = PlantSimEngine.JSON.json(Dict(
+                "action" => "edit",
+                "kind" => "set_mapped_variable",
+                "scale" => "Leaf",
+                "process" => "LAI_Dynamic",
+                "variable" => "TT_cu",
+                "sourceScale" => "Plant",
+                "sourceVariable" => "TT_cu",
+                "mode" => "single",
+            ))
+            HTTP.WebSockets.send(ws, set_mapped_tt)
+            mapped_tt = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test mapped_tt["ok"]
+            lai_spec = PlantSimEngine.parse_model_specs(current_mapping(session)[:Leaf])[:LAI_Dynamic]
+            @test first(PlantSimEngine.mapped_variables_(lai_spec)) == (:TT_cu => (:Plant => :TT_cu))
+            @test any(
+                edge -> edge["kind"] == "mapped_variable" &&
+                        edge["sourceVariable"] == "TT_cu" &&
+                        edge["targetVariable"] == "TT_cu" &&
+                        edge["scaleRelation"] == "multiscale",
+                mapped_tt["graph"]["edges"],
+            )
+
             output_path = tempname() * ".jl"
             save_code = PlantSimEngine.JSON.json(Dict(
                 "action" => "write_mapping_code",

From 1bb2fd0c9731c2e29675e60f215d0fe84efed2f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Wed, 6 May 2026 10:58:18 +0200
Subject: [PATCH 08/19] Update `Status`es in the generated ModelMapping (use
 julia code to extract what's needed)

---
 ext/PlantSimEngineGraphEditorExt.jl | 55 +++++++++++++++++++++++++++--
 test/test-graph-editor-extension.jl |  8 ++++-
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index 29772916..648517eb 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -418,11 +418,16 @@ end
 
 function _model_mapping_to_julia(mapping::PlantSimEngine.ModelMapping)
     io = IOBuffer()
+    required_status_variables = _required_status_variables(mapping)
     println(io, "mapping = ModelMapping(")
     for scale in keys(mapping)
         println(io, "    :$(scale) => (")
-        for item in _scale_items(mapping[scale])
-            println(io, "        $(_mapping_item_to_code(item)),")
+        items = _scale_items(mapping[scale])
+        required = get(required_status_variables, scale, Set{Symbol}())
+        for item in items
+            code = _mapping_item_to_code(item, required)
+            isnothing(code) && continue
+            println(io, "        $(code),")
         end
         println(io, "    ),")
     end
@@ -432,13 +437,57 @@ end
 
 _scale_items(entry) = entry isa Tuple ? entry : (entry,)
 
-function _mapping_item_to_code(item)
+function _required_status_variables(mapping::PlantSimEngine.ModelMapping)
+    stripped = Dict{Symbol,Any}()
+    status_only_scales = Set{Symbol}()
+    for scale in keys(mapping)
+        items = [item for item in _scale_items(mapping[scale]) if !(item isa PlantSimEngine.Status)]
+        if isempty(items)
+            push!(status_only_scales, scale)
+        else
+            stripped[scale] = tuple(items...)
+        end
+    end
+
+    required = isempty(stripped) ?
+               Dict{Symbol,Vector{Symbol}}() :
+               PlantSimEngine.to_initialize(PlantSimEngine.ModelMapping(stripped; check=true, type_promotion=PlantSimEngine.type_promotion(mapping)))
+
+    required_by_scale = Dict{Symbol,Set{Symbol}}(
+        scale => Set{Symbol}(variables)
+        for (scale, variables) in pairs(required)
+    )
+    for scale in status_only_scales
+        required_by_scale[scale] = Set{Symbol}()
+        for item in _scale_items(mapping[scale])
+            item isa PlantSimEngine.Status || continue
+            union!(required_by_scale[scale], keys(item))
+        end
+    end
+    return required_by_scale
+end
+
+function _mapping_item_to_code(item, required_status_variables=nothing)
+    if item isa PlantSimEngine.Status
+        return _status_to_code(item, required_status_variables)
+    end
     if item isa PlantSimEngine.ModelSpec || item isa PlantSimEngine.MultiScaleModel
         return _model_spec_to_code(PlantSimEngine.as_model_spec(item))
     end
     return repr(item)
 end
 
+function _status_to_code(status::PlantSimEngine.Status, required_variables)
+    isnothing(required_variables) && (required_variables = Set{Symbol}(keys(status)))
+    kept = Pair{Symbol,Any}[
+        name => status[name]
+        for name in keys(status)
+        if name in required_variables
+    ]
+    isempty(kept) && return nothing
+    return "Status(" * join(("$(first(item)) = $(repr(last(item)))" for item in kept), ", ") * ")"
+end
+
 function _model_spec_to_code(spec::PlantSimEngine.ModelSpec)
     code = "ModelSpec($(repr(PlantSimEngine.model_(spec))))"
     mapped_variables = PlantSimEngine.mapped_variables_(spec)
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index fc8b1a56..a1b1e339 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -85,6 +85,8 @@ end
         @test haskey(state, "models")
         @test haskey(state, "mappingCode")
         @test occursin("ModelMapping", state["mappingCode"])
+        @test occursin("Status(TT_cu = 1.0)", state["mappingCode"])
+        @test !occursin("LAI = 2.0", state["mappingCode"])
 
         websocket_url = replace(session.url, "http://" => "ws://") * "/ws"
         HTTP.WebSockets.open(websocket_url) do ws
@@ -167,6 +169,7 @@ end
             HTTP.WebSockets.send(ws, set_mapped_tt)
             mapped_tt = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
             @test mapped_tt["ok"]
+            @test !occursin("TT_cu = 1.0", mapped_tt["mappingCode"])
             lai_spec = PlantSimEngine.parse_model_specs(current_mapping(session)[:Leaf])[:LAI_Dynamic]
             @test first(PlantSimEngine.mapped_variables_(lai_spec)) == (:TT_cu => (:Plant => :TT_cu))
             @test any(
@@ -187,7 +190,10 @@ end
             @test saved["ok"]
             @test saved["lastSavedPath"] == output_path
             @test isfile(output_path)
-            @test occursin("mapping = ModelMapping", read(output_path, String))
+            saved_code = read(output_path, String)
+            @test occursin("mapping = ModelMapping", saved_code)
+            @test !occursin("LAI = 2.0", saved_code)
+            @test !occursin("TT_cu = 1.0", saved_code)
         end
     finally
         close(session)

From f1d725ef2b75d4e8a400b125d109fe413a32dace Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Wed, 6 May 2026 14:19:25 +0200
Subject: [PATCH 09/19] Add possibility to add models next to variables in
 graph editor

---
 frontend/src/App.tsx       | 306 ++++++++++++++++++++++++++++++++++++-
 frontend/src/ModelNode.tsx |  26 +++-
 frontend/src/styles.css    | 126 +++++++++++++++
 frontend/src/types.ts      |   4 +-
 4 files changed, 453 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ae918bba..2d49ccce 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -44,6 +44,17 @@ type PendingMappingConnection = {
   targetPort: GraphPort;
 };
 
+type CandidatePopover = {
+  portId: string;
+  anchor: { x: number; y: number };
+};
+
+type AddModelSelection = {
+  modelType: string;
+  scale: string;
+  requestId: number;
+};
+
 type SearchResult = {
   id: string;
   kind: "model" | "input" | "output";
@@ -134,6 +145,8 @@ export default function App() {
   const [collapsedScales, setCollapsedScales] = useState<Set<string>>(() => new Set());
   const [pinnedFocus, setPinnedFocus] = useState<FocusState | null>(null);
   const [selectedEdge, setSelectedEdge] = useState<GraphEdgeData | null>(null);
+  const [candidatePopover, setCandidatePopover] = useState<CandidatePopover | null>(null);
+  const [addModelSelection, setAddModelSelection] = useState<AddModelSelection | null>(null);
   const [flowInstance, setFlowInstance] = useState<ReactFlowInstance<Node<RuntimeGraphNodeData>, Edge<GraphEdgeData>> | null>(null);
   const [nodes, setNodes, onNodesChange] = useNodesState<Node<RuntimeGraphNodeData>>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<GraphEdgeData>>([]);
@@ -143,6 +156,7 @@ export default function App() {
   const incomingByPort = useMemo(() => groupEdgesByPort(graph.edges, "targetPort"), [graph.edges]);
   const outgoingByPort = useMemo(() => groupEdgesByPort(graph.edges, "sourcePort"), [graph.edges]);
   const requiredInputPortIds = useMemo(() => deriveRequiredInputPorts(graph), [graph]);
+  const candidatePortIds = useMemo(() => deriveCandidatePortIds(graph, editorModels, incomingByPort, outgoingByPort), [editorModels, graph, incomingByPort, outgoingByPort]);
   const requiredInputs = useMemo(() => deriveRequiredInputs(graph, requiredInputPortIds, incomingByPort), [graph, incomingByPort, requiredInputPortIds]);
   const warningItems = useMemo(() => deriveValidationWarnings(graph, requiredInputPortIds, incomingByPort), [graph, incomingByPort, requiredInputPortIds]);
   const actionableWarningItems = useMemo(() => warningItems.filter((item) => item.severity !== "info"), [warningItems]);
@@ -164,6 +178,30 @@ export default function App() {
     [activePort, focusMode, graph, selected?.id],
   );
   const focus = useMemo(() => pinnedFocus?.active ? pinnedFocus : traversalFocus, [pinnedFocus, traversalFocus]);
+  const activeCandidatePortId = candidatePopover?.portId ?? null;
+  const candidatePopoverInfo = useMemo(() => {
+    if (!candidatePopover) return null;
+    const portInfo = portById.get(candidatePopover.portId);
+    if (!portInfo || !candidatePortIds.has(candidatePopover.portId)) return null;
+    const { port } = portInfo;
+    const field = port.role === "input" ? "outputs" : "inputs";
+    const models = editorModels
+      .filter((model) => Object.prototype.hasOwnProperty.call(modelVariableDeclarations(model, field), port.name))
+      .sort((left, right) => left.name.localeCompare(right.name));
+    if (models.length === 0) return null;
+    return {
+      anchor: candidatePopover.anchor,
+      node: portInfo.node,
+      port,
+      title: port.role === "input" ? "Models That Compute" : "Models That Consume",
+      models,
+    };
+  }, [candidatePopover, candidatePortIds, editorModels, portById]);
+
+  const toggleCandidatePopover = useCallback((port: GraphPort, anchor: { x: number; y: number }) => {
+    setActivePort(port);
+    setCandidatePopover((current) => current?.portId === port.id ? null : { portId: port.id, anchor });
+  }, []);
 
   useEffect(() => {
     const config = loadEditorConfig();
@@ -227,10 +265,13 @@ export default function App() {
         highlightedPortIds: new Set<string>(),
         focusedPortIds: new Set<string>(),
         requiredInputPortIds,
+        candidatePortIds,
         cycleNodeIds: new Set(graph.cycleNodes),
         focusedNodeIds: new Set<string>(),
         hasActiveFocus: false,
+        activeCandidatePortId,
         setActivePort,
+        setCandidatePopover: toggleCandidatePopover,
       }),
     }));
     const nextEdges = visibleEdgeData.map((edge) => flowEdge(edge, new Set<string>(), new Set<string>(), false, false));
@@ -238,7 +279,7 @@ export default function App() {
       setNodes(layouted);
       setEdges(nextEdges);
     });
-  }, [graph.cycleNodes, layoutMode, requiredInputPortIds, setEdges, setNodes, visibleEdgeData, visibleNodeData]);
+  }, [activeCandidatePortId, candidatePortIds, graph.cycleNodes, layoutMode, requiredInputPortIds, setEdges, setNodes, toggleCandidatePopover, visibleEdgeData, visibleNodeData]);
 
   useEffect(() => {
     const focusEdges = focus.active ? focus.edges : new Set<string>();
@@ -249,14 +290,21 @@ export default function App() {
         highlightedPortIds: hoverHighlight.ports,
         focusedPortIds: focus.ports,
         requiredInputPortIds,
+        candidatePortIds,
         cycleNodeIds: new Set(graph.cycleNodes),
         focusedNodeIds: focus.nodes,
         hasActiveFocus: focus.active,
+        activeCandidatePortId,
         setActivePort,
+        setCandidatePopover: toggleCandidatePopover,
       }),
     })));
     setEdges((current) => current.map((edge) => edge.data ? flowEdge(edge.data, hoverHighlight.edges, focusEdges, Boolean(activePort), focus.active) : edge));
-  }, [activePort, focus, graph.cycleNodes, hoverHighlight.edges, hoverHighlight.ports, requiredInputPortIds, setEdges, setNodes]);
+  }, [activeCandidatePortId, activePort, candidatePortIds, focus, graph.cycleNodes, hoverHighlight.edges, hoverHighlight.ports, requiredInputPortIds, setEdges, setNodes, toggleCandidatePopover]);
+
+  useEffect(() => {
+    if (candidatePopover && !candidatePortIds.has(candidatePopover.portId)) setCandidatePopover(null);
+  }, [candidatePopover, candidatePortIds]);
 
   const onConnect = useCallback((connection: Connection) => {
     if (!editorConnected) return;
@@ -374,7 +422,7 @@ export default function App() {
   }, [flowInstance, focusEdge, focusNode, graph.edges, nodeById, nodes, portById]);
 
   return (
-    <main className="app-shell">
+    <main className={`app-shell ${candidatePopover ? "has-candidate-popover" : ""}`}>
       <section className="graph-panel">
         <div className="topbar graph-workbench">
           <div className="brand-block">
@@ -505,9 +553,13 @@ export default function App() {
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
           onInit={setFlowInstance}
-          onPaneClick={() => setShowSearchResults(false)}
+          onPaneClick={() => {
+            setShowSearchResults(false);
+            setCandidatePopover(null);
+          }}
           onEdgeClick={(_, edge) => {
             if (edge.data) {
+              setCandidatePopover(null);
               setSelectedEdge(edge.data);
               setSelected(null);
               setActivePort(null);
@@ -515,6 +567,7 @@ export default function App() {
             }
           }}
           onNodeClick={(_, node) => {
+            setCandidatePopover(null);
             setSelectedEdge(null);
             setSelected(node.data);
           }}
@@ -527,6 +580,26 @@ export default function App() {
           <Controls />
           <MiniMap pannable zoomable nodeStrokeWidth={3} />
         </ReactFlow>
+
+        {candidatePopoverInfo && (
+          <ModelCandidatePopover
+            anchor={candidatePopoverInfo.anchor}
+            title={candidatePopoverInfo.title}
+            variable={candidatePopoverInfo.port.name}
+            role={candidatePopoverInfo.port.role}
+            models={candidatePopoverInfo.models}
+            onSelectModel={(model) => {
+              setAddModelSelection({
+                modelType: model.type,
+                scale: candidatePopoverInfo.node.scale,
+                requestId: Date.now(),
+              });
+              setActivePanel("add_model");
+              setCandidatePopover(null);
+            }}
+            onClose={() => setCandidatePopover(null)}
+          />
+        )}
       </section>
 
       {activePanel && (
@@ -571,6 +644,7 @@ export default function App() {
                 <ModelBrowser
                   models={editorModels}
                   scales={editorScales}
+                  selection={addModelSelection}
                   onAddScale={addCustomScale}
                   onCommand={sendEditorCommand}
                   disabled={!editorConnected}
@@ -994,6 +1068,86 @@ function EdgeList({
   );
 }
 
+function ModelCandidatePopover({
+  anchor,
+  title,
+  variable,
+  role,
+  models,
+  onSelectModel,
+  onClose,
+}: {
+  anchor: { x: number; y: number };
+  title: string;
+  variable: string;
+  role: "input" | "output";
+  models: ModelDescriptor[];
+  onSelectModel: (model: ModelDescriptor) => void;
+  onClose: () => void;
+}) {
+  const field = role === "input" ? "outputs" : "inputs";
+  const fieldLabel = role === "input" ? "Outputs" : "Inputs";
+  return (
+    <div className="candidate-popover" style={candidatePopoverStyle(anchor)} onClick={(event) => event.stopPropagation()}>
+      <div className="candidate-popover-header">
+        <div>
+          <div className="eyebrow">{title}</div>
+          <h3>{variable}</h3>
+        </div>
+        <button className="icon-button compact" onClick={(event) => {
+          event.stopPropagation();
+          onClose();
+        }} title="Close model suggestions" aria-label="Close model suggestions">
+          <X size={14} />
+        </button>
+      </div>
+      <div className="candidate-popover-list">
+        {models.map((model) => {
+          const declarations = modelVariableDeclarations(model, field);
+          return (
+            <button
+              className="candidate-model-card"
+              type="button"
+              key={`${model.type}:${model.process ?? ""}`}
+              onClick={(event) => {
+                event.stopPropagation();
+                onSelectModel(model);
+              }}
+            >
+              <strong>{model.name}</strong>
+              <span>{model.process ?? model.processType ?? "unknown process"}</span>
+              <small>{fieldLabel}: {Object.keys(declarations).join(", ") || variable}</small>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function candidatePopoverStyle(anchor: { x: number; y: number }) {
+  if (typeof window === "undefined") return { left: anchor.x, top: anchor.y };
+  const margin = 12;
+  const width = Math.min(360, window.innerWidth - margin * 2);
+  const maxHeight = Math.min(420, window.innerHeight - margin * 2);
+  const opensLeft = anchor.x + width + margin > window.innerWidth;
+  const left = Math.min(
+    Math.max(opensLeft ? anchor.x - width - 10 : anchor.x + 10, margin),
+    Math.max(margin, window.innerWidth - width - margin),
+  );
+  const top = Math.min(
+    Math.max(anchor.y - 28, margin),
+    Math.max(margin, window.innerHeight - maxHeight - margin),
+  );
+  return { left, top, width, maxHeight };
+}
+
+function modelVariableDeclarations(model: ModelDescriptor, field: "inputs" | "outputs"): Record<string, unknown> {
+  const declarations = model[field];
+  if (!declarations || typeof declarations !== "object" || Array.isArray(declarations)) return {};
+  return declarations;
+}
+
 function Row({ label, value }: { label: string; value: string }) {
   return <div className="row"><span>{label}</span><strong>{value}</strong></div>;
 }
@@ -1188,6 +1342,106 @@ function ExistingModelEditor({
   );
 }
 
+function VariableMappingEditor({
+  target,
+  graphNodes,
+  disabled,
+  onCommand,
+}: {
+  target: { node: GraphNodeData; port: GraphPort } | null;
+  graphNodes: GraphNodeData[];
+  disabled: boolean;
+  onCommand: (command: Record<string, unknown>) => void;
+}) {
+  const sourceOptions = useMemo(() => {
+    if (!target) return [];
+    return graphNodes
+      .flatMap((node) => node.outputs.map((port) => ({ node, port })))
+      .filter(({ node, port }) => node.id !== target.node.id || port.name !== target.port.name)
+      .sort((left, right) => `${left.node.scale}.${left.node.process}.${left.port.name}`.localeCompare(`${right.node.scale}.${right.node.process}.${right.port.name}`));
+  }, [graphNodes, target]);
+  const [sourceId, setSourceId] = useState("");
+  const [mode, setMode] = useState<"single" | "multi">("single");
+  const [extraScales, setExtraScales] = useState<string[]>([]);
+
+  useEffect(() => {
+    setSourceId(sourceOptions[0]?.port.id ?? "");
+    setMode("single");
+    setExtraScales([]);
+  }, [sourceOptions]);
+
+  if (!target) return null;
+  const selected = sourceOptions.find((item) => item.port.id === sourceId) ?? sourceOptions[0] ?? null;
+  const candidateExtraScales = selected
+    ? [...new Set(sourceOptions
+      .filter((item) => item.port.name === selected.port.name && item.node.scale !== selected.node.scale)
+      .map((item) => item.node.scale))]
+    : [];
+
+  const toggleExtraScale = (scale: string) => {
+    setExtraScales((current) =>
+      current.includes(scale) ? current.filter((item) => item !== scale) : [...current, scale]
+    );
+  };
+
+  const apply = () => {
+    if (!selected) return;
+    const command: Record<string, unknown> = {
+      action: "edit",
+      kind: "set_mapped_variable",
+      scale: target.node.scale,
+      process: target.node.process,
+      variable: target.port.name,
+      sourceScale: selected.node.scale,
+      sourceVariable: selected.port.name,
+      mode: mode === "single" && selected.node.scale === target.node.scale ? "same_scale" : mode,
+    };
+    if (mode === "multi" && extraScales.length > 0) command.extraSourceScales = extraScales;
+    onCommand(command);
+  };
+
+  return (
+    <div className="variable-mapping-editor">
+      <h4>Set Mapping</h4>
+      {sourceOptions.length === 0 ? (
+        <div className="empty-state compact">No output variable is available as a source.</div>
+      ) : (
+        <>
+          <label className="model-browser-control">
+            <span>Source output</span>
+            <select value={selected?.port.id ?? ""} onChange={(event) => setSourceId(event.target.value)}>
+              {sourceOptions.map(({ node, port }) => (
+                <option key={port.id} value={port.id}>{node.scale}.{node.process}.{port.name}</option>
+              ))}
+            </select>
+          </label>
+          <div className="mapping-mode-section">
+            <label className="mapping-radio">
+              <input type="radio" name={`${target.port.id}-mapping-mode`} checked={mode === "single"} onChange={() => setMode("single")} />
+              <span>Scalar</span>
+            </label>
+            <label className="mapping-radio">
+              <input type="radio" name={`${target.port.id}-mapping-mode`} checked={mode === "multi"} onChange={() => setMode("multi")} />
+              <span>Vector</span>
+            </label>
+          </div>
+          {mode === "multi" && candidateExtraScales.length > 0 && (
+            <div className="mapping-scale-picker">
+              {candidateExtraScales.map((scale) => (
+                <label className="mapping-checkbox" key={scale}>
+                  <input type="checkbox" checked={extraScales.includes(scale)} onChange={() => toggleExtraScale(scale)} />
+                  <span>{scale}</span>
+                </label>
+              ))}
+            </div>
+          )}
+          <button className="metric-button" disabled={disabled || !selected} onClick={apply}>Apply mapping</button>
+        </>
+      )}
+    </div>
+  );
+}
+
 function MappingCodePanel({
   code,
   savePath,
@@ -1226,12 +1480,14 @@ function MappingCodePanel({
 function ModelBrowser({
   models,
   scales,
+  selection,
   onAddScale,
   onCommand,
   disabled,
 }: {
   models: ModelDescriptor[];
   scales: string[];
+  selection: AddModelSelection | null;
   onAddScale: (scale: string) => void;
   onCommand: (command: Record<string, unknown>) => void;
   disabled: boolean;
@@ -1249,6 +1505,12 @@ function ModelBrowser({
     if (!scales.includes(scale)) setScale(scales[0] ?? "Default");
   }, [scale, scales]);
 
+  useEffect(() => {
+    if (!selection) return;
+    if (models.some((model) => model.type === selection.modelType)) setModelType(selection.modelType);
+    if (selection.scale) setScale(selection.scale);
+  }, [models, selection]);
+
   if (!selected) return <div className="empty-state">No model type is available.</div>;
   return (
     <div className="model-browser">
@@ -1386,10 +1648,13 @@ function runtimeNodeData(
     highlightedPortIds: Set<string>;
     focusedPortIds: Set<string>;
     requiredInputPortIds: Set<string>;
+    candidatePortIds: Set<string>;
     cycleNodeIds: Set<string>;
     focusedNodeIds: Set<string>;
     hasActiveFocus: boolean;
+    activeCandidatePortId: string | null;
     setActivePort: (port: GraphPort | null) => void;
+    setCandidatePopover: (port: GraphPort, anchor: { x: number; y: number }) => void;
   },
 ): RuntimeGraphNodeData {
   return {
@@ -1399,10 +1664,14 @@ function runtimeNodeData(
     highlightedPortIds: [...options.highlightedPortIds],
     focusedPortIds: [...options.focusedPortIds],
     requiredInputPortIds: [...options.requiredInputPortIds],
+    candidatePortIds: [...options.candidatePortIds],
     focused: options.focusedNodeIds.has(node.id),
     dimmed: options.hasActiveFocus && !options.focusedNodeIds.has(node.id),
     onPortEnter: options.setActivePort,
-    onPortLeave: () => options.setActivePort(null),
+    onPortLeave: (port) => {
+      if (options.activeCandidatePortId !== port.id) options.setActivePort(null);
+    },
+    onCandidateClick: options.setCandidatePopover,
   };
 }
 
@@ -1426,6 +1695,33 @@ function deriveRequiredInputPorts(graph: DependencyGraphView) {
   return required;
 }
 
+function deriveCandidatePortIds(
+  graph: DependencyGraphView,
+  models: ModelDescriptor[],
+  incomingByPort: Map<string, GraphEdgeData[]>,
+  outgoingByPort: Map<string, GraphEdgeData[]>,
+) {
+  const producerVariables = new Set<string>();
+  const consumerVariables = new Set<string>();
+  for (const model of models) {
+    Object.keys(modelVariableDeclarations(model, "outputs")).forEach((name) => producerVariables.add(name));
+    Object.keys(modelVariableDeclarations(model, "inputs")).forEach((name) => consumerVariables.add(name));
+  }
+
+  const candidates = new Set<string>();
+  for (const node of graph.nodes) {
+    for (const port of node.inputs) {
+      const isUncomputed = (incomingByPort.get(port.id) ?? []).length === 0;
+      if (isUncomputed && producerVariables.has(port.name)) candidates.add(port.id);
+    }
+    for (const port of node.outputs) {
+      const isUnused = (outgoingByPort.get(port.id) ?? []).length === 0;
+      if (isUnused && consumerVariables.has(port.name)) candidates.add(port.id);
+    }
+  }
+  return candidates;
+}
+
 function deriveRequiredInputs(graph: DependencyGraphView, requiredInputPortIds: Set<string>, incomingByPort: Map<string, GraphEdgeData[]>) {
   return graph.nodes.flatMap((node) => (
     node.inputs
diff --git a/frontend/src/ModelNode.tsx b/frontend/src/ModelNode.tsx
index d42967b2..6c5afbc0 100644
--- a/frontend/src/ModelNode.tsx
+++ b/frontend/src/ModelNode.tsx
@@ -1,5 +1,5 @@
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
-import { Clock3, GitBranch, Layers3, Link2, PhoneCall } from "lucide-react";
+import { Clock3, GitBranch, Layers3, Link2, PhoneCall, Plus } from "lucide-react";
 import type { GraphPort, RuntimeGraphNodeData } from "./types";
 import { nodeWidth } from "./nodeSizing";
 
@@ -50,6 +50,7 @@ function PortColumn({ title, ports, side, data }: { title: string; ports: GraphP
   const highlighted = new Set(data.highlightedPortIds ?? []);
   const focused = new Set(data.focusedPortIds ?? []);
   const requiredInputs = new Set(data.requiredInputPortIds ?? []);
+  const candidatePorts = new Set(data.candidatePortIds ?? []);
   return (
     <div className={`port-column ${side}`}>
       <div className="port-title">{title}</div>
@@ -60,9 +61,9 @@ function PortColumn({ title, ports, side, data }: { title: string; ports: GraphP
           data-default={`${requiredInputs.has(port.id) ? "Required initialization" : portValueLabel(port)}: ${port.default}`}
           aria-label={`${port.name}, ${side}, ${requiredInputs.has(port.id) ? "required initialization" : portValueLabel(port).toLowerCase()} ${port.default}`}
           onMouseEnter={() => data.onPortEnter?.(port)}
-          onMouseLeave={() => data.onPortLeave?.()}
+          onMouseLeave={() => data.onPortLeave?.(port)}
           onPointerEnter={() => data.onPortEnter?.(port)}
-          onPointerLeave={() => data.onPortLeave?.()}
+          onPointerLeave={() => data.onPortLeave?.(port)}
           onClick={(event) => {
             event.stopPropagation();
             data.onPortEnter?.(port);
@@ -70,6 +71,25 @@ function PortColumn({ title, ports, side, data }: { title: string; ports: GraphP
         >
           {side === "input" && <Handle id={port.id} type="target" position={Position.Left} />}
           <span>{port.name}</span>
+          {candidatePorts.has(port.id) && (
+            <button
+              className="port-candidate-button nodrag nopan"
+              type="button"
+              title={side === "input" ? "Show models that can compute this variable" : "Show models that can consume this variable"}
+              aria-label={side === "input" ? "Show models that can compute this variable" : "Show models that can consume this variable"}
+              onClick={(event) => {
+                event.stopPropagation();
+                const rect = event.currentTarget.getBoundingClientRect();
+                data.onPortEnter?.(port);
+                data.onCandidateClick?.(port, {
+                  x: rect.right,
+                  y: rect.top + rect.height / 2,
+                });
+              }}
+            >
+              <Plus size={10} />
+            </button>
+          )}
           {port.mappingMode && <Link2 size={12} />}
           {side === "output" && <Handle id={port.id} type="source" position={Position.Right} />}
         </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 940c14a9..c7caf29b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -729,6 +729,10 @@ h1 {
   transform: translate(-50%, 0);
 }
 
+.app-shell.has-candidate-popover .port.active::after {
+  opacity: 0;
+}
+
 .port.output {
   justify-content: flex-end;
 }
@@ -741,6 +745,112 @@ h1 {
   border-color: rgba(31, 122, 83, 0.38);
 }
 
+.port-candidate-button {
+  position: relative;
+  z-index: 8;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  color: var(--accent);
+  background: rgba(255, 253, 247, 0.94);
+  border: 1px solid rgba(31, 122, 83, 0.34);
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.port-candidate-button:hover,
+.port-candidate-button:focus-visible {
+  color: #fffdfa;
+  background: var(--accent);
+  outline: none;
+}
+
+.port.active .port-candidate-button {
+  color: var(--accent);
+  background: #fffdfa;
+}
+
+.candidate-popover {
+  position: fixed;
+  z-index: 1200;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  color: var(--ink);
+  border: 1px solid rgba(31, 122, 83, 0.28);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(31, 122, 83, 0.08), transparent 42%),
+    rgba(255, 253, 247, 0.98);
+  box-shadow: 0 18px 42px rgba(56, 43, 35, 0.18);
+}
+
+.candidate-popover-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 12px 9px;
+  border-bottom: 1px solid rgba(183, 166, 150, 0.32);
+}
+
+.candidate-popover-header h3 {
+  margin: 3px 0 0;
+  overflow-wrap: anywhere;
+  font-size: 15px;
+}
+
+.candidate-popover-list {
+  display: grid;
+  gap: 8px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.candidate-model-card {
+  display: grid;
+  gap: 5px;
+  width: 100%;
+  padding: 9px 10px;
+  color: var(--ink);
+  border: 1px solid rgba(183, 166, 150, 0.38);
+  border-left: 4px solid var(--accent);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.7);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.candidate-model-card:hover,
+.candidate-model-card:focus-visible {
+  background: rgba(255, 253, 247, 0.96);
+  border-color: rgba(31, 122, 83, 0.42);
+  outline: none;
+}
+
+.candidate-model-card strong {
+  overflow-wrap: anywhere;
+  font-size: 12px;
+}
+
+.candidate-model-card span {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.candidate-model-card small {
+  overflow-wrap: anywhere;
+  color: var(--muted);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
 .port.required-input {
   border-color: rgba(191, 106, 84, 0.72);
   background:
@@ -1352,6 +1462,22 @@ h1 {
   border-top: 1px solid rgba(183, 166, 150, 0.32);
 }
 
+.variable-mapping-editor {
+  display: grid;
+  gap: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(183, 166, 150, 0.32);
+}
+
+.variable-mapping-editor h4 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 11px;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
+  font-weight: 700;
+}
+
 .parameter-row {
   display: grid;
   grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(78px, 0.8fr);
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index a40df793..71e3990a 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -30,10 +30,12 @@ export type RuntimeGraphNodeData = GraphNodeData & {
   highlightedPortIds?: string[];
   focusedPortIds?: string[];
   requiredInputPortIds?: string[];
+  candidatePortIds?: string[];
   dimmed?: boolean;
   focused?: boolean;
   onPortEnter?: (port: GraphPort) => void;
-  onPortLeave?: () => void;
+  onPortLeave?: (port: GraphPort) => void;
+  onCandidateClick?: (port: GraphPort, anchor: { x: number; y: number }) => void;
 };
 
 export type GraphEdgeData = {

From 14d24fdddbfcac5d9b783eeeab9c1f8c9e7cfafd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Wed, 6 May 2026 20:25:07 +0200
Subject: [PATCH 10/19] Add a `using PackageName` in the ModelMapping of
 Mapping code

---
 ext/PlantSimEngineGraphEditorExt.jl | 38 +++++++++++++++++++++++++++++
 test/test-graph-editor-extension.jl |  4 +++
 2 files changed, 42 insertions(+)

diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index 648517eb..f8016053 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -418,6 +418,10 @@ end
 
 function _model_mapping_to_julia(mapping::PlantSimEngine.ModelMapping)
     io = IOBuffer()
+    for statement in _using_statements(mapping)
+        println(io, statement)
+    end
+    println(io)
     required_status_variables = _required_status_variables(mapping)
     println(io, "mapping = ModelMapping(")
     for scale in keys(mapping)
@@ -437,6 +441,40 @@ end
 
 _scale_items(entry) = entry isa Tuple ? entry : (entry,)
 
+function _using_statements(mapping::PlantSimEngine.ModelMapping)
+    modules = Set{Module}([PlantSimEngine])
+    for scale in keys(mapping)
+        for item in _scale_items(mapping[scale])
+            _collect_mapping_modules!(modules, item)
+        end
+    end
+    return ["using $(_module_name(module_))" for module_ in sort!(collect(modules); by=_module_sort_key)]
+end
+
+function _collect_mapping_modules!(modules::Set{Module}, item)
+    item isa PlantSimEngine.Status && return modules
+    if item isa PlantSimEngine.ModelSpec || item isa PlantSimEngine.MultiScaleModel
+        return _collect_model_modules!(modules, PlantSimEngine.model_(PlantSimEngine.as_model_spec(item)))
+    end
+    item isa PlantSimEngine.AbstractModel && return _collect_model_modules!(modules, item)
+    return modules
+end
+
+function _collect_model_modules!(modules::Set{Module}, model::PlantSimEngine.AbstractModel)
+    module_ = parentmodule(typeof(model))
+    module_ in (Base, Core, Main) || push!(modules, module_)
+    return modules
+end
+
+function _module_name(module_::Module)
+    return join(string.(Base.fullname(module_)), ".")
+end
+
+function _module_sort_key(module_::Module)
+    module_ === PlantSimEngine && return ""
+    return _module_name(module_)
+end
+
 function _required_status_variables(mapping::PlantSimEngine.ModelMapping)
     stripped = Dict{Symbol,Any}()
     status_only_scales = Set{Symbol}()
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index a1b1e339..9a3ebaf1 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -84,6 +84,8 @@ end
         @test haskey(state, "graph")
         @test haskey(state, "models")
         @test haskey(state, "mappingCode")
+        @test startswith(state["mappingCode"], "using PlantSimEngine\n")
+        @test occursin("using PlantSimEngine.Examples", state["mappingCode"])
         @test occursin("ModelMapping", state["mappingCode"])
         @test occursin("Status(TT_cu = 1.0)", state["mappingCode"])
         @test !occursin("LAI = 2.0", state["mappingCode"])
@@ -191,6 +193,8 @@ end
             @test saved["lastSavedPath"] == output_path
             @test isfile(output_path)
             saved_code = read(output_path, String)
+            @test startswith(saved_code, "using PlantSimEngine\n")
+            @test occursin("using PlantSimEngine.Examples", saved_code)
             @test occursin("mapping = ModelMapping", saved_code)
             @test !occursin("LAI = 2.0", saved_code)
             @test !occursin("TT_cu = 1.0", saved_code)

From a509141d2cad11444e6004cf06103d1b9d6c9834 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Wed, 6 May 2026 20:39:44 +0200
Subject: [PATCH 11/19] Add possibility to declare intialization values

---
 ext/PlantSimEngineGraphEditorExt.jl        |  49 +++++++++
 frontend/src/App.tsx                       | 111 ++++++++++++++++++++-
 frontend/src/styles.css                    |  59 +++++++++++
 frontend/src/types.ts                      |   9 ++
 src/PlantSimEngine.jl                      |   2 +-
 src/visualization/dependency_graph_view.jl |  49 ++++++++-
 test/test-graph-editor-extension.jl        |  18 ++++
 7 files changed, 292 insertions(+), 5 deletions(-)

diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index f8016053..26e46b6f 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -255,6 +255,11 @@ function _edit_from_command(command)
         Symbol(get(command, "mode", "single")),
         Symbol.(get(command, "extraSourceScales", [])),
     )
+    kind == "set_initialization" && return PlantSimEngine.SetStatusVariable(
+        Symbol(command["scale"]),
+        Symbol(command["variable"]),
+        _parse_parameter_value(get(command, "value", Dict("type" => "julia", "value" => "nothing"))),
+    )
     if kind in ("add_model", "replace_model")
         model_type = _resolve_model_type(command["modelType"])
         parameters = _parameters_from_command(get(command, "parameters", Dict()))
@@ -323,6 +328,7 @@ function _state_payload(session::GraphEditorSession; ok::Bool=true, diagnostics:
         "canRedo" => !isempty(session.future),
         "url" => session.url,
         "mappingCode" => current_mapping_code(session),
+        "initializations" => _initialization_payload(session.mapping),
         "lastSavedPath" => session.last_saved_path,
     )
 end
@@ -416,6 +422,49 @@ function _write_mapping_code!(session::GraphEditorSession, raw_path::AbstractStr
     return full_path
 end
 
+function _initialization_payload(mapping::PlantSimEngine.ModelMapping)
+    required_by_scale = _required_status_variables(mapping)
+    payload = Any[]
+    for scale in sort!(collect(keys(required_by_scale)); by=string)
+        status = _scale_status(mapping, scale)
+        for variable in sort!(collect(required_by_scale[scale]); by=string)
+            value_payload = isnothing(status) || !(variable in keys(status)) ?
+                            _status_value_payload(nothing; provided=false) :
+                            _status_value_payload(status[variable]; provided=true)
+            push!(payload, merge(Dict(
+                "scale" => string(scale),
+                "name" => string(variable),
+            ), value_payload))
+        end
+    end
+    return payload
+end
+
+function _scale_status(mapping::PlantSimEngine.ModelMapping, scale::Symbol)
+    haskey(mapping, scale) || return nothing
+    for item in _scale_items(mapping[scale])
+        item isa PlantSimEngine.Status && return item
+    end
+    return nothing
+end
+
+function _status_value_payload(value; provided::Bool)
+    choice, label = _status_value_choice(value, provided)
+    return Dict(
+        "value" => label,
+        "type" => choice,
+        "provided" => provided,
+    )
+end
+
+_status_value_choice(::Nothing, provided::Bool) = provided ? ("nothing", "") : ("julia", "")
+_status_value_choice(value::Bool, ::Bool) = ("boolean", string(value))
+_status_value_choice(value::Integer, ::Bool) = ("integer", string(value))
+_status_value_choice(value::AbstractFloat, ::Bool) = ("float", string(value))
+_status_value_choice(value::Symbol, ::Bool) = ("symbol", string(value))
+_status_value_choice(value::AbstractString, ::Bool) = ("string", String(value))
+_status_value_choice(value, ::Bool) = ("julia", repr(value))
+
 function _model_mapping_to_julia(mapping::PlantSimEngine.ModelMapping)
     io = IOBuffer()
     for statement in _using_statements(mapping)
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2d49ccce..418cac35 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -29,13 +29,13 @@ import { DependencyEdge } from "./DependencyEdge";
 import { ModelNode } from "./ModelNode";
 import { layoutGraph, type LayoutMode } from "./layout";
 import { sampleGraph } from "./sampleGraph";
-import type { DependencyGraphView, GraphEdgeData, GraphEditorState, GraphNodeData, GraphPort, ModelDescriptor, RuntimeGraphNodeData } from "./types";
+import type { DependencyGraphView, GraphEdgeData, GraphEditorState, GraphNodeData, GraphPort, InitializationDescriptor, ModelDescriptor, RuntimeGraphNodeData } from "./types";
 import "./styles.css";
 
 type EdgeFilterKey = "dataFlow" | "mapped" | "callStack";
 type EdgeFilters = Record<EdgeFilterKey, boolean>;
 type FocusMode = "none" | "upstream" | "downstream" | "neighborhood";
-type SidePanel = "inspector" | "add_model" | "mapping_code" | null;
+type SidePanel = "inspector" | "add_model" | "initializations" | "mapping_code" | null;
 
 type PendingMappingConnection = {
   sourceNode: GraphNodeData;
@@ -119,6 +119,8 @@ const layoutLabels: Record<LayoutMode, string> = {
   call_stack: "Call stack",
 };
 
+const valueTypeChoices = ["float", "integer", "boolean", "symbol", "string", "nothing", "julia"];
+
 export default function App() {
   const [graph, setGraph] = useState<DependencyGraphView>(loadInitialGraph());
   const [editorModels, setEditorModels] = useState<ModelDescriptor[]>([]);
@@ -128,6 +130,7 @@ export default function App() {
   const [canRedo, setCanRedo] = useState(false);
   const [activePanel, setActivePanel] = useState<SidePanel>("inspector");
   const [mappingCode, setMappingCode] = useState("");
+  const [initializations, setInitializations] = useState<InitializationDescriptor[]>([]);
   const [lastSavedPath, setLastSavedPath] = useState<string | null>(null);
   const [editorFeedback, setEditorFeedback] = useState<{ kind: "error" | "info"; text: string } | null>(null);
   const [savePath, setSavePath] = useState("mapping.generated.jl");
@@ -222,6 +225,7 @@ export default function App() {
       if (payload.graph) setGraph(payload.graph);
       if (payload.models) setEditorModels(payload.models);
       if (typeof payload.mappingCode === "string") setMappingCode(payload.mappingCode);
+      if (Array.isArray(payload.initializations)) setInitializations(payload.initializations);
       if (typeof payload.lastSavedPath === "string") setLastSavedPath(payload.lastSavedPath);
       setCanUndo(Boolean(payload.canUndo));
       setCanRedo(Boolean(payload.canRedo));
@@ -511,6 +515,7 @@ export default function App() {
           <div className="toolbar-group panel-switch">
             <button className={`metric-button ${activePanel === "inspector" ? "active" : ""}`} onClick={() => togglePanel("inspector")}>Inspector</button>
             <button className={`metric-button ${activePanel === "add_model" ? "active" : ""}`} onClick={() => togglePanel("add_model")}>Add model</button>
+            <button className={`metric-button ${activePanel === "initializations" ? "active" : ""}`} onClick={() => togglePanel("initializations")}>Initializations</button>
             <button className={`metric-button ${activePanel === "mapping_code" ? "active" : ""}`} onClick={() => togglePanel("mapping_code")}>Mapping code</button>
           </div>
 
@@ -653,6 +658,20 @@ export default function App() {
             </>
           )}
 
+          {activePanel === "initializations" && (
+            <>
+              <header>
+                <GitPullRequestArrow size={19} />
+                <h2>Initializations</h2>
+              </header>
+              <InitializationPanel
+                initializations={initializations}
+                disabled={!editorConnected}
+                onCommand={sendEditorCommand}
+              />
+            </>
+          )}
+
           {activePanel === "mapping_code" && (
             <>
               <header>
@@ -1442,6 +1461,94 @@ function VariableMappingEditor({
   );
 }
 
+function InitializationPanel({
+  initializations,
+  disabled,
+  onCommand,
+}: {
+  initializations: InitializationDescriptor[];
+  disabled: boolean;
+  onCommand: (command: Record<string, unknown>) => void;
+}) {
+  const grouped = useMemo(() => {
+    const groups = new Map<string, InitializationDescriptor[]>();
+    for (const item of initializations) {
+      const group = groups.get(item.scale) ?? [];
+      group.push(item);
+      groups.set(item.scale, group);
+    }
+    return groups;
+  }, [initializations]);
+
+  if (initializations.length === 0) {
+    return <div className="empty-state">No explicit status initialization is required by the current ModelMapping.</div>;
+  }
+
+  return (
+    <div className="initialization-editor">
+      {[...grouped.entries()].map(([scale, items]) => (
+        <section className="initialization-editor-group" key={scale}>
+          <h3>{scale}</h3>
+          {items.map((item) => (
+            <InitializationRow
+              key={`${item.scale}:${item.name}`}
+              item={item}
+              disabled={disabled}
+              onCommand={onCommand}
+            />
+          ))}
+        </section>
+      ))}
+    </div>
+  );
+}
+
+function InitializationRow({
+  item,
+  disabled,
+  onCommand,
+}: {
+  item: InitializationDescriptor;
+  disabled: boolean;
+  onCommand: (command: Record<string, unknown>) => void;
+}) {
+  const [value, setValue] = useState(item.value);
+  const [type, setType] = useState(item.type);
+
+  useEffect(() => {
+    setValue(item.value);
+    setType(item.type);
+  }, [item]);
+
+  return (
+    <div className={`initialization-editor-row ${item.provided ? "provided" : ""}`}>
+      <label>{item.name}</label>
+      <input
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        placeholder={item.provided ? "" : "initial value"}
+      />
+      <select value={type} onChange={(event) => setType(event.target.value)}>
+        {valueTypeChoices.map((choice) => <option key={choice} value={choice}>{choice}</option>)}
+      </select>
+      <button
+        className="metric-button"
+        disabled={disabled}
+        onClick={() => onCommand({
+          action: "edit",
+          kind: "set_initialization",
+          scale: item.scale,
+          variable: item.name,
+          value: { type, value },
+        })}
+      >
+        Apply
+      </button>
+      <small>{item.provided ? "Stored in Status" : "Missing from Status"}</small>
+    </div>
+  );
+}
+
 function MappingCodePanel({
   code,
   savePath,
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index c7caf29b..90dae8bd 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1478,6 +1478,65 @@ h1 {
   font-weight: 700;
 }
 
+.initialization-editor {
+  display: grid;
+  gap: 12px;
+}
+
+.initialization-editor-group {
+  display: grid;
+  gap: 8px;
+}
+
+.initialization-editor-group h3 {
+  margin: 0;
+}
+
+.initialization-editor-row {
+  display: grid;
+  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(82px, 0.72fr) auto;
+  gap: 7px;
+  align-items: center;
+  padding: 9px;
+  border: 1px solid rgba(191, 106, 84, 0.26);
+  border-left: 4px solid var(--clay);
+  border-radius: 8px;
+  background: rgba(255, 250, 242, 0.78);
+}
+
+.initialization-editor-row.provided {
+  border-color: rgba(31, 122, 83, 0.24);
+  border-left-color: var(--accent);
+}
+
+.initialization-editor-row label {
+  overflow-wrap: anywhere;
+  font-weight: 700;
+}
+
+.initialization-editor-row input,
+.initialization-editor-row select {
+  min-width: 0;
+  height: 30px;
+  border: 1px solid rgba(183, 166, 150, 0.44);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.78);
+  color: var(--ink);
+  font: inherit;
+}
+
+.initialization-editor-row input {
+  padding: 0 8px;
+}
+
+.initialization-editor-row small {
+  grid-column: 1 / -1;
+  color: var(--muted);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 .parameter-row {
   display: grid;
   grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(78px, 0.8fr);
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 71e3990a..3edb9320 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -91,6 +91,14 @@ export type ModelDescriptor = {
   };
 };
 
+export type InitializationDescriptor = {
+  scale: string;
+  name: string;
+  value: string;
+  type: string;
+  provided: boolean;
+};
+
 export type GraphEditorState = {
   ok: boolean;
   diagnostics: string[];
@@ -100,5 +108,6 @@ export type GraphEditorState = {
   canRedo: boolean;
   url: string;
   mappingCode: string;
+  initializations: InitializationDescriptor[];
   lastSavedPath: string | null;
 };
diff --git a/src/PlantSimEngine.jl b/src/PlantSimEngine.jl
index b3335328..504c2388 100644
--- a/src/PlantSimEngine.jl
+++ b/src/PlantSimEngine.jl
@@ -149,7 +149,7 @@ export GraphPort, GraphNode, GraphEdge, DependencyGraphView
 export graph_view, graph_view_json, write_graph_view, compile_graph_view
 export AbstractGraphEditorSession, edit_graph, current_mapping, apply_edit!, undo!, redo!
 export available_processes, available_models, model_descriptor, model_constructor_descriptor
-export AbstractGraphEdit, AddModel, RemoveModel, ReplaceModel, UpdateModel, SetMappedVariable, MarkPreviousTimeStep, UnmarkPreviousTimeStep, apply_graph_edit
+export AbstractGraphEdit, AddModel, RemoveModel, ReplaceModel, UpdateModel, SetMappedVariable, SetStatusVariable, MarkPreviousTimeStep, UnmarkPreviousTimeStep, apply_graph_edit
 
 # Re-exporting PlantMeteo main functions:
 export Atmosphere, TimeStepTable, Constants, Weather
diff --git a/src/visualization/dependency_graph_view.jl b/src/visualization/dependency_graph_view.jl
index 329f8a93..b12c94aa 100644
--- a/src/visualization/dependency_graph_view.jl
+++ b/src/visualization/dependency_graph_view.jl
@@ -75,8 +75,9 @@ end
 Abstract supertype for declarative dependency-graph editor commands.
 
 Concrete edits such as `AddModel`, `RemoveModel`, `ReplaceModel`,
-`UpdateModel`, `SetMappedVariable`, `MarkPreviousTimeStep`, and
-`UnmarkPreviousTimeStep` are applied with `apply_graph_edit`.
+`UpdateModel`, `SetMappedVariable`, `SetStatusVariable`,
+`MarkPreviousTimeStep`, and `UnmarkPreviousTimeStep` are applied with
+`apply_graph_edit`.
 """
 abstract type AbstractGraphEdit end
 
@@ -128,6 +129,12 @@ end
 SetMappedVariable(scale, process, variable, source_scale, source_variable, mode) =
     SetMappedVariable(scale, process, variable, source_scale, source_variable, mode, Symbol[])
 
+struct SetStatusVariable{V} <: AbstractGraphEdit
+    scale::Symbol
+    variable::Symbol
+    value::V
+end
+
 """
     MarkPreviousTimeStep(scale, process, variable)
 
@@ -626,6 +633,15 @@ function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::SetMapp
     return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
 end
 
+function apply_graph_edit(mapping::ModelMapping{MultiScale,<:Any}, edit::SetStatusVariable)
+    haskey(mapping, edit.scale) || error("Cannot set initialization: scale `$(edit.scale)` is not present in the `ModelMapping`.")
+    data = Dict{Symbol,Any}()
+    for (scale, entry) in pairs(mapping)
+        data[scale] = scale == edit.scale ? _set_status_variable_entry(entry, edit) : entry
+    end
+    return ModelMapping(data; check=true, type_promotion=type_promotion(mapping))
+end
+
 function apply_graph_edit(mapping::ModelMapping, edit::AbstractGraphEdit)
     error("Graph edit `$(typeof(edit))` is not supported for `$(typeof(mapping))`.")
 end
@@ -670,6 +686,35 @@ end
 
 _insert_model_entry(entry, model) = _insert_model_entry((entry,), model)
 
+function _set_status_variable_entry(entry::Tuple, edit::SetStatusVariable)
+    items = Any[]
+    updated = false
+    for item in entry
+        if item isa Status
+            push!(items, _set_status_variable_item(item, edit))
+            updated = true
+        else
+            push!(items, item)
+        end
+    end
+    updated || push!(items, _status_variable_item(edit.variable, edit.value))
+    return tuple(items...)
+end
+
+_set_status_variable_entry(entry, edit::SetStatusVariable) =
+    _set_status_variable_entry((entry,), edit)
+
+_status_variable_item(variable::Symbol, value) = Status(NamedTuple{Tuple([variable])}((value,)))
+
+function _set_status_variable_item(status::Status, edit::SetStatusVariable)
+    pairs = Pair{Symbol,Any}[
+        name => (name == edit.variable ? edit.value : status[name])
+        for name in keys(status)
+    ]
+    edit.variable in keys(status) || push!(pairs, edit.variable => edit.value)
+    return Status((; pairs...))
+end
+
 function _remove_model_entry(entry::Tuple, process_name::Symbol, found::Base.RefValue{Bool})
     items = Any[]
     for item in entry
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index 9a3ebaf1..4892f6be 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -89,6 +89,10 @@ end
         @test occursin("ModelMapping", state["mappingCode"])
         @test occursin("Status(TT_cu = 1.0)", state["mappingCode"])
         @test !occursin("LAI = 2.0", state["mappingCode"])
+        @test haskey(state, "initializations")
+        initial_tt = only(item for item in state["initializations"] if item["scale"] == "Leaf" && item["name"] == "TT_cu")
+        @test initial_tt["provided"]
+        @test initial_tt["value"] == "1.0"
 
         websocket_url = replace(session.url, "http://" => "ws://") * "/ws"
         HTTP.WebSockets.open(websocket_url) do ws
@@ -98,6 +102,20 @@ end
             node = only(item for item in initial["graph"]["nodes"] if item["process"] == "light_interception")
             @test node["modelParameters"]["k"]["value"] == "0.5"
 
+            init_command = PlantSimEngine.JSON.json(Dict(
+                "action" => "edit",
+                "kind" => "set_initialization",
+                "scale" => "Leaf",
+                "variable" => "TT_cu",
+                "value" => Dict("type" => "float", "value" => "2.5"),
+            ))
+            HTTP.WebSockets.send(ws, init_command)
+            initialized = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test initialized["ok"]
+            leaf_status = only(item for item in current_mapping(session)[:Leaf] if item isa Status)
+            @test leaf_status[:TT_cu] == 2.5
+            @test occursin("Status(TT_cu = 2.5)", initialized["mappingCode"])
+
             update_command = PlantSimEngine.JSON.json(Dict(
                 "action" => "edit",
                 "kind" => "update_model",

From 1af9f681ec7ad7e925dfafc63873134c902c53e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Wed, 6 May 2026 21:54:16 +0200
Subject: [PATCH 12/19] Fix: hard-dependency input was lifted to the caller
 model as input, but sometimes it is computed by the caller, so it can't be an
 input

---
 src/dependencies/dependency_graph.jl  | 39 +++++++++++++++++++++++++++
 src/dependencies/hard_dependencies.jl | 10 ++++---
 src/dependencies/soft_dependencies.jl |  5 +---
 test/test-dependency-graph-view.jl    | 31 +++++++++++++++++++++
 4 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/dependencies/dependency_graph.jl b/src/dependencies/dependency_graph.jl
index 7063b77e..c61cd878 100644
--- a/src/dependencies/dependency_graph.jl
+++ b/src/dependencies/dependency_graph.jl
@@ -144,6 +144,45 @@ function variables_multiscale(node, organ, vars_mapping, st=NamedTuple())
     end
 end
 
+function hard_dependency_variables(node::HardDependencyNode, variable_function::Function)
+    vars = Pair{Symbol,NamedTuple}[]
+    _hard_dependency_variables!(vars, node, variable_function, Dict{Symbol,Set{Symbol}}())
+    return vars
+end
+
+hard_dependency_variables(node::HardDependencyNode) =
+    hard_dependency_variables(node, variables)
+
+function _hard_dependency_variables!(
+    vars::Vector{Pair{Symbol,NamedTuple}},
+    node::HardDependencyNode,
+    variable_function::Function,
+    ancestor_outputs_by_scale::Dict{Symbol,Set{Symbol}},
+)
+    node_vars = variable_function(node)
+    available_outputs = get(ancestor_outputs_by_scale, node.scale, Set{Symbol}())
+    filtered_inputs = _remove_inputs_produced_by_same_scale_ancestors(node_vars.inputs, available_outputs)
+    push!(vars, node.process => (inputs=filtered_inputs, outputs=node_vars.outputs))
+
+    child_outputs_by_scale = Dict{Symbol,Set{Symbol}}(
+        scale => Set(outputs)
+        for (scale, outputs) in ancestor_outputs_by_scale
+    )
+    scale_outputs = get!(child_outputs_by_scale, node.scale, Set{Symbol}())
+    union!(scale_outputs, keys(node_vars.outputs))
+
+    for child in node.children
+        _hard_dependency_variables!(vars, child, variable_function, child_outputs_by_scale)
+    end
+
+    return vars
+end
+
+function _remove_inputs_produced_by_same_scale_ancestors(inputs::NamedTuple, available_outputs::Set{Symbol})
+    isempty(available_outputs) && return inputs
+    return (; (name => value for (name, value) in pairs(inputs) if !(name in available_outputs))...)
+end
+
 function _node_mapping(var_mapping::Pair{<:Union{AbstractString,Symbol},Symbol})
     # One organ is mapped to the variable:
     return SingleNodeMapping(first(var_mapping)), last(var_mapping)
diff --git a/src/dependencies/hard_dependencies.jl b/src/dependencies/hard_dependencies.jl
index ba623980..46766db0 100644
--- a/src/dependencies/hard_dependencies.jl
+++ b/src/dependencies/hard_dependencies.jl
@@ -178,9 +178,13 @@ function hard_dependencies(mapping::AbstractDict{Symbol,T}; verbose::Bool=true)
 
         status_scale = Dict{Symbol,Vector{Pair{Symbol,NamedTuple}}}()
         for (procname, node) in hard_deps[organ].roots # procname = :leaf_surface ; node = hard_deps.roots[procname]
-            var = Pair{Symbol,NamedTuple}[]
-            traverse_dependency_graph!(node, x -> variables_multiscale(x, organ, full_vars_mapping, st_scale_user), var)
-            push!(status_scale, procname => var)
+            push!(
+                status_scale,
+                procname => hard_dependency_variables(
+                    node,
+                    x -> variables_multiscale(x, organ, full_vars_mapping, st_scale_user),
+                ),
+            )
         end
 
         inputs_process[organ] = Dict(key => [j.first => j.second.inputs for j in val] for (key, val) in status_scale)
diff --git a/src/dependencies/soft_dependencies.jl b/src/dependencies/soft_dependencies.jl
index ecf36a8b..deeac869 100644
--- a/src/dependencies/soft_dependencies.jl
+++ b/src/dependencies/soft_dependencies.jl
@@ -39,10 +39,7 @@ function soft_dependencies(d::DependencyGraph{Dict{Symbol,HardDependencyNode}},
     # Compute the variables of each node in the hard-dependency graph:
     d_vars = Dict{Symbol,Vector{Pair{Symbol,NamedTuple}}}()
     for (procname, node) in d.roots
-        var = Pair{Symbol,NamedTuple}[]
-        nodes_visited = Set{AbstractDependencyNode}()
-        traverse_dependency_graph!(node, variables, var; node_visited=nodes_visited)
-        push!(d_vars, procname => var)
+        push!(d_vars, procname => hard_dependency_variables(node))
     end
 
     # Note: all variables are collected at once for each hard-coupled nodes
diff --git a/test/test-dependency-graph-view.jl b/test/test-dependency-graph-view.jl
index d42ca72c..a7b643bb 100644
--- a/test/test-dependency-graph-view.jl
+++ b/test/test-dependency-graph-view.jl
@@ -4,6 +4,8 @@ abstract type AbstractGraphViewInitiationAgeModel <: PlantSimEngine.AbstractMode
 abstract type AbstractGraphViewParamModel <: PlantSimEngine.AbstractModel end
 abstract type AbstractGraphViewCyclePlantModel <: PlantSimEngine.AbstractModel end
 abstract type AbstractGraphViewCycleLeafModel <: PlantSimEngine.AbstractModel end
+abstract type AbstractGraphViewHardParentModel <: PlantSimEngine.AbstractModel end
+abstract type AbstractGraphViewHardChildModel <: PlantSimEngine.AbstractModel end
 
 PlantSimEngine.process_(::Type{AbstractGraphViewPlantAgeModel}) = :graph_view_plant_age
 PlantSimEngine.process_(::Type{AbstractGraphViewPhytomerEmissionModel}) = :graph_view_phytomer_emission
@@ -11,6 +13,8 @@ PlantSimEngine.process_(::Type{AbstractGraphViewInitiationAgeModel}) = :graph_vi
 PlantSimEngine.process_(::Type{AbstractGraphViewParamModel}) = :graph_view_param
 PlantSimEngine.process_(::Type{AbstractGraphViewCyclePlantModel}) = :graph_view_cycle_plant
 PlantSimEngine.process_(::Type{AbstractGraphViewCycleLeafModel}) = :graph_view_cycle_leaf
+PlantSimEngine.process_(::Type{AbstractGraphViewHardParentModel}) = :graph_view_hard_parent
+PlantSimEngine.process_(::Type{AbstractGraphViewHardChildModel}) = :graph_view_hard_child
 
 struct GraphViewPlantAgeModel <: AbstractGraphViewPlantAgeModel
 end
@@ -60,6 +64,19 @@ end
 PlantSimEngine.inputs_(::GraphViewCycleLeafModel) = (x=-Inf,)
 PlantSimEngine.outputs_(::GraphViewCycleLeafModel) = (y=-Inf,)
 
+struct GraphViewHardParentModel <: AbstractGraphViewHardParentModel
+end
+
+PlantSimEngine.inputs_(::GraphViewHardParentModel) = (external_driver=-Inf,)
+PlantSimEngine.outputs_(::GraphViewHardParentModel) = (Cₛ=-Inf, parent_output=-Inf)
+PlantSimEngine.dep(::GraphViewHardParentModel) = (graph_view_hard_child=AbstractGraphViewHardChildModel,)
+
+struct GraphViewHardChildModel <: AbstractGraphViewHardChildModel
+end
+
+PlantSimEngine.inputs_(::GraphViewHardChildModel) = (Cₛ=-Inf, child_driver=-Inf)
+PlantSimEngine.outputs_(::GraphViewHardChildModel) = (child_output=-Inf,)
+
 @testset "Dependency graph view" begin
     mapping = ModelMapping(
         ToyLAIModel(),
@@ -154,6 +171,20 @@ PlantSimEngine.outputs_(::GraphViewCycleLeafModel) = (y=-Inf,)
     @test !any(edge -> edge.source_variable == :last_phytomer, plant_age_edges)
     @test any(edge -> edge.kind == :hard_dependency && isnothing(edge.source_port) && isnothing(edge.target_port), hard_mapped_view.edges)
 
+    hard_internal_mapping = ModelMapping(
+        :Leaf => (
+            GraphViewHardParentModel(),
+            GraphViewHardChildModel(),
+            Status(external_driver=1.0, child_driver=2.0),
+        ),
+    )
+    hard_internal_view = graph_view(hard_internal_mapping)
+    hard_parent_node = only(node for node in hard_internal_view.nodes if node.process == :graph_view_hard_parent && node.role == :model)
+    hard_child_node = only(node for node in hard_internal_view.nodes if node.process == :graph_view_hard_child && node.role == :hard_dependency)
+    @test !any(port -> port.name == :Cₛ, hard_parent_node.inputs)
+    @test any(port -> port.name == :Cₛ, hard_parent_node.outputs)
+    @test any(port -> port.name == :Cₛ, hard_child_node.inputs)
+
     @test AbstractGraphViewParamModel in available_processes()
     @test GraphViewParamModel in available_models(:graph_view_param)
     descriptor = model_constructor_descriptor(GraphViewParamModel)

From 3cc927da793133433bc46c5bfbf97a06210a761b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Wed, 6 May 2026 21:59:35 +0200
Subject: [PATCH 13/19] Link hard-dependency variables to caller model if the
 latter computes inputs

---
 src/visualization/dependency_graph_view.jl | 23 ++++++++++++++++++++++
 test/test-dependency-graph-view.jl         | 10 +++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/visualization/dependency_graph_view.jl b/src/visualization/dependency_graph_view.jl
index b12c94aa..749ec210 100644
--- a/src/visualization/dependency_graph_view.jl
+++ b/src/visualization/dependency_graph_view.jl
@@ -436,6 +436,29 @@ function _add_hard_input_edges!(edges, edge_ids::Set{String}, nodes)
 
         for input in node.inputs
             input.id in computed_inputs && continue
+            if parent.scale == node.scale
+                parent_output = _find_port(parent.outputs, input.name)
+                if !isnothing(parent_output)
+                    edge = GraphEdge(
+                        "edge:hard-parent-output:$(parent.id):$(parent_output.id):$(node.id):$(input.id)",
+                        parent.id,
+                        node.id,
+                        parent_output.id,
+                        input.id,
+                        parent_output.name,
+                        input.name,
+                        :soft_dependency,
+                        :same_scale,
+                        string(input.name),
+                        ["Computed by the owning model and passed to its hard dependency through the shared status."],
+                    )
+                    _push_edge!(edges, edge_ids, edge)
+                    input_edge_by_target[input.id] = edge
+                    push!(computed_inputs, input.id)
+                    continue
+                end
+            end
+
             parent_input = _find_port(parent.inputs, input.name)
             isnothing(parent_input) && continue
             source_edge = get(input_edge_by_target, parent_input.id, nothing)
diff --git a/test/test-dependency-graph-view.jl b/test/test-dependency-graph-view.jl
index a7b643bb..c4534939 100644
--- a/test/test-dependency-graph-view.jl
+++ b/test/test-dependency-graph-view.jl
@@ -183,7 +183,15 @@ PlantSimEngine.outputs_(::GraphViewHardChildModel) = (child_output=-Inf,)
     hard_child_node = only(node for node in hard_internal_view.nodes if node.process == :graph_view_hard_child && node.role == :hard_dependency)
     @test !any(port -> port.name == :Cₛ, hard_parent_node.inputs)
     @test any(port -> port.name == :Cₛ, hard_parent_node.outputs)
-    @test any(port -> port.name == :Cₛ, hard_child_node.inputs)
+    hard_child_cs_input = only(port for port in hard_child_node.inputs if port.name == :Cₛ)
+    @test any(
+        edge -> edge.source == hard_parent_node.id &&
+                edge.target == hard_child_node.id &&
+                edge.target_port == hard_child_cs_input.id &&
+                edge.source_variable == :Cₛ &&
+                edge.target_variable == :Cₛ,
+        hard_internal_view.edges,
+    )
 
     @test AbstractGraphViewParamModel in available_processes()
     @test GraphViewParamModel in available_models(:graph_view_param)

From d9f7bdeadda7788ea1f47e3194386b66ed4e40eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Thu, 7 May 2026 06:34:18 +0200
Subject: [PATCH 14/19] Auto-save mapping to disk

---
 .../graph_visualization_editor.md             |  13 +-
 ext/PlantSimEngineGraphEditorExt.jl           | 147 +++++++++++++++++-
 frontend/src/App.tsx                          |  66 +++++++-
 frontend/src/styles.css                       |  65 ++++++++
 frontend/src/types.ts                         |   4 +
 test/test-graph-editor-extension.jl           |  40 ++++-
 6 files changed, 325 insertions(+), 10 deletions(-)

diff --git a/docs/src/step_by_step/graph_visualization_editor.md b/docs/src/step_by_step/graph_visualization_editor.md
index dcb1b251..0d3a7fc5 100644
--- a/docs/src/step_by_step/graph_visualization_editor.md
+++ b/docs/src/step_by_step/graph_visualization_editor.md
@@ -54,7 +54,18 @@ edited_mapping = current_mapping(session)
 close(session)
 ```
 
-The web editor also exposes a dedicated "Mapping code" panel. It shows the current [`ModelMapping`](@ref) as Julia code, and can write that code to a `.jl` file so it can be copied/pasted or reused in scripts.
+The web editor also exposes a dedicated "Mapping code" panel. It shows the current [`ModelMapping`](@ref) as Julia code, and can write that code to a `.jl` file so it can be copied/pasted or reused in scripts. The generated file is intentionally plain Julia: it imports the packages needed by the selected models and defines a top-level `mapping` variable:
+
+```julia
+using PlantSimEngine
+using PlantSimEngine.Examples
+
+mapping = ModelMapping(
+    # ...
+)
+```
+
+After writing a file once, every successful edit, undo, redo, or recent-file load automatically rewrites that same file. The session also keeps a recovery autosave in the temporary directory, and the "Mapping code" panel lists recently saved mapping scripts that can be reopened. Use git or another version-control system for mapping scripts that matter for a simulation workflow.
 
 The editor extension currently supports the same edit operations as the Julia API:
 
diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index 26e46b6f..3da0b928 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -15,6 +15,11 @@ mutable struct GraphEditorSession{M,G,S} <: PlantSimEngine.AbstractGraphEditorSe
     port::Int
     url::String
     last_saved_path::Union{Nothing,String}
+    save_target_path::Union{Nothing,String}
+    autosave_path::Union{Nothing,String}
+    last_autosaved_path::Union{Nothing,String}
+    recent_file_path::String
+    recent_mapping_paths::Vector{String}
 end
 
 current_mapping(session::GraphEditorSession) = session.mapping
@@ -33,13 +38,15 @@ function Base.show(io::IO, ::MIME"text/plain", session::GraphEditorSession)
     println(io, "  Local state JSON: $(session.url)/state")
     println(io, "  Quit session: close(session)")
     println(io, "  Current mapping: current_mapping(session)")
+    isnothing(session.save_target_path) || println(io, "  Auto-saving edits to: $(session.save_target_path)")
+    isnothing(session.autosave_path) || println(io, "  Recovery autosave: $(session.autosave_path)")
     println(io, "  Save mapping code: use the \"Mapping code\" panel in the web editor")
 end
 
 current_mapping_code(session::GraphEditorSession) = _model_mapping_to_julia(session.mapping)
 
 """
-    edit_graph(mapping; mtg=nothing, host="127.0.0.1", port=8765, open_browser=true)
+    edit_graph(mapping; mtg=nothing, host="127.0.0.1", port=8765, open_browser=true, autosave=true)
 
 Start a local graph editor session. The returned session owns the current
 `ModelMapping`; call `current_mapping(session)` to recover the edited mapping.
@@ -47,6 +54,9 @@ Start a local graph editor session. The returned session owns the current
 Single-scale mappings are automatically normalized to multiscale form at the :Default scale.
 By default, the session URL is opened with the system default browser. Pass
 `open_browser=false` to disable this, for example in scripts or tests.
+When `autosave=true`, a recovery script is written to the temporary directory.
+After saving through the web editor, every successful graph edit, undo, redo,
+or recent-file load rewrites the saved Julia script.
 
 This method is provided by the `PlantSimEngineGraphEditorExt` package extension.
 Load `HTTP` in the active session to make it available.
@@ -57,6 +67,9 @@ function edit_graph(
     host::AbstractString="127.0.0.1",
     port::Integer=8765,
     open_browser::Bool=true,
+    autosave::Bool=true,
+    autosave_path::Union{Nothing,AbstractString}=nothing,
+    recent_file_path::Union{Nothing,AbstractString}=nothing,
 )
     # Normalize single-scale to multiscale form for uniform handling downstream
     mapping = _normalize_to_multiscale(mapping)
@@ -75,8 +88,14 @@ function edit_graph(
         actual_port,
         "http://$(host):$(actual_port)",
         nothing,
+        nothing,
+        autosave ? _normalized_output_path(isnothing(autosave_path) ? _default_autosave_path() : autosave_path) : nothing,
+        nothing,
+        _normalized_output_path(isnothing(recent_file_path) ? _default_recent_file_path() : recent_file_path),
+        _load_recent_mapping_paths(isnothing(recent_file_path) ? _default_recent_file_path() : recent_file_path),
     )
     session_ref[] = session
+    _persist_session_mapping!(session; write_save_target=false)
     open_browser && _open_in_default_browser(session.url)
     return session
 end
@@ -198,20 +217,29 @@ end
 function _handle_command!(session::GraphEditorSession, command)
     action = get(command, "action", "")
     try
+        persist = false
         if action == "undo"
             undo!(session)
+            persist = true
         elseif action == "redo"
             redo!(session)
+            persist = true
         elseif action == "edit"
             edit = _edit_from_command(command)
             apply_edit!(session, edit)
+            persist = true
         elseif action == "write_mapping_code"
             raw_path = get(command, "path", "")
             _write_mapping_code!(session, String(raw_path))
+        elseif action == "open_mapping_code"
+            raw_path = get(command, "path", "")
+            _open_mapping_code!(session, String(raw_path))
+            persist = true
         else
             error("Unsupported graph editor command action `$action`.")
         end
-        return _state_payload(session; ok=true)
+        diagnostics = persist ? _persist_session_mapping!(session) : String[]
+        return _state_payload(session; ok=isempty(diagnostics), diagnostics=diagnostics)
     catch err
         return _state_payload(session; ok=false, diagnostics=[sprint(showerror, err)])
     end
@@ -330,6 +358,10 @@ function _state_payload(session::GraphEditorSession; ok::Bool=true, diagnostics:
         "mappingCode" => current_mapping_code(session),
         "initializations" => _initialization_payload(session.mapping),
         "lastSavedPath" => session.last_saved_path,
+        "saveTargetPath" => session.save_target_path,
+        "autosavePath" => session.autosave_path,
+        "lastAutosavedPath" => session.last_autosaved_path,
+        "recentMappings" => session.recent_mapping_paths,
     )
 end
 
@@ -415,13 +447,118 @@ _frontend_dist_dir() = normpath(joinpath(@__DIR__, "..", "frontend", "dist"))
 function _write_mapping_code!(session::GraphEditorSession, raw_path::AbstractString)
     path = strip(String(raw_path))
     isempty(path) && error("The output path is empty. Provide a .jl file path.")
-    full_path = isabspath(path) ? normpath(path) : normpath(joinpath(pwd(), path))
-    mkpath(dirname(full_path))
-    write(full_path, current_mapping_code(session) * "\n")
+    full_path = _normalized_output_path(path)
+    _atomic_write(full_path, current_mapping_code(session) * "\n")
+    session.last_saved_path = full_path
+    session.save_target_path = full_path
+    _remember_recent_mapping!(session, full_path)
+    return full_path
+end
+
+function _open_mapping_code!(session::GraphEditorSession, raw_path::AbstractString)
+    path = strip(String(raw_path))
+    isempty(path) && error("The input path is empty. Provide a .jl file path.")
+    full_path = _normalized_output_path(path)
+    isfile(full_path) || error("No mapping code file exists at `$full_path`.")
+    mapping = _mapping_from_julia_file(full_path)
+    push!(session.history, session.mapping)
+    empty!(session.future)
+    session.mapping = _normalize_to_multiscale(mapping)
+    session.save_target_path = full_path
     session.last_saved_path = full_path
+    _remember_recent_mapping!(session, full_path)
+    return session.mapping
+end
+
+function _mapping_from_julia_file(path::AbstractString)
+    module_ = Module(gensym(:PlantSimEngineGraphEditorMapping))
+    Core.eval(module_, :(using Base))
+    Core.eval(module_, :(using PlantSimEngine))
+    result = Core.eval(module_, Meta.parse("begin\n" * read(path, String) * "\nend"))
+    mapping = isdefined(module_, :mapping) ? getfield(module_, :mapping) : result
+    mapping isa PlantSimEngine.ModelMapping || (!isdefined(module_, :mapping) && error("Mapping code `$path` must define a top-level `mapping` variable."))
+    mapping isa PlantSimEngine.ModelMapping || error("`mapping` in `$path` is a $(typeof(mapping)), not a PlantSimEngine.ModelMapping.")
+    return mapping
+end
+
+function _persist_session_mapping!(session::GraphEditorSession; write_save_target::Bool=true)
+    diagnostics = String[]
+    if write_save_target && !isnothing(session.save_target_path)
+        try
+            _atomic_write(session.save_target_path, current_mapping_code(session) * "\n")
+            session.last_saved_path = session.save_target_path
+        catch err
+            push!(diagnostics, "Could not auto-save mapping code to $(session.save_target_path): $(sprint(showerror, err))")
+        end
+    end
+    if !isnothing(session.autosave_path)
+        try
+            _atomic_write(session.autosave_path, current_mapping_code(session) * "\n")
+            session.last_autosaved_path = session.autosave_path
+        catch err
+            push!(diagnostics, "Could not write recovery autosave to $(session.autosave_path): $(sprint(showerror, err))")
+        end
+    end
+    return diagnostics
+end
+
+function _atomic_write(path::AbstractString, content::AbstractString)
+    full_path = _normalized_output_path(path)
+    mkpath(dirname(full_path))
+    tmp = tempname(dirname(full_path))
+    try
+        write(tmp, content)
+        mv(tmp, full_path; force=true)
+    finally
+        isfile(tmp) && rm(tmp; force=true)
+    end
     return full_path
 end
 
+function _normalized_output_path(path::AbstractString)
+    stripped = strip(String(path))
+    return isabspath(stripped) ? normpath(stripped) : normpath(joinpath(pwd(), stripped))
+end
+
+function _default_autosave_path()
+    stamp = string(round(Int, time() * 1000))
+    suffix = string(rand(UInt32); base=16)
+    return joinpath(tempdir(), "PlantSimEngineGraphEditor", "session-$stamp-$suffix", "mapping.autosave.jl")
+end
+
+_default_recent_file_path() = joinpath(DEPOT_PATH[1], "config", "PlantSimEngine", "graph_editor_recent.json")
+
+function _load_recent_mapping_paths(path::AbstractString)
+    full_path = _normalized_output_path(path)
+    isfile(full_path) || return String[]
+    try
+        payload = JSON.parse(read(full_path, String))
+        values = payload isa AbstractDict ? get(payload, "paths", String[]) : payload
+        return [String(item) for item in values if item isa AbstractString && isfile(String(item))]
+    catch
+        return String[]
+    end
+end
+
+function _remember_recent_mapping!(session::GraphEditorSession, path::AbstractString)
+    full_path = _normalized_output_path(path)
+    filter!(item -> item != full_path, session.recent_mapping_paths)
+    pushfirst!(session.recent_mapping_paths, full_path)
+    length(session.recent_mapping_paths) > 10 && resize!(session.recent_mapping_paths, 10)
+    _write_recent_mapping_paths(session)
+    return session.recent_mapping_paths
+end
+
+function _write_recent_mapping_paths(session::GraphEditorSession)
+    content = JSON.json(Dict("paths" => session.recent_mapping_paths))
+    try
+        _atomic_write(session.recent_file_path, content * "\n")
+    catch err
+        @warn "Could not update graph editor recent mappings." path = session.recent_file_path exception = (err, catch_backtrace())
+    end
+    return session.recent_file_path
+end
+
 function _initialization_payload(mapping::PlantSimEngine.ModelMapping)
     required_by_scale = _required_status_variables(mapping)
     payload = Any[]
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 418cac35..d7fc7fa5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -132,6 +132,10 @@ export default function App() {
   const [mappingCode, setMappingCode] = useState("");
   const [initializations, setInitializations] = useState<InitializationDescriptor[]>([]);
   const [lastSavedPath, setLastSavedPath] = useState<string | null>(null);
+  const [saveTargetPath, setSaveTargetPath] = useState<string | null>(null);
+  const [autosavePath, setAutosavePath] = useState<string | null>(null);
+  const [lastAutosavedPath, setLastAutosavedPath] = useState<string | null>(null);
+  const [recentMappings, setRecentMappings] = useState<string[]>([]);
   const [editorFeedback, setEditorFeedback] = useState<{ kind: "error" | "info"; text: string } | null>(null);
   const [savePath, setSavePath] = useState("mapping.generated.jl");
   const [customScales, setCustomScales] = useState<string[]>([]);
@@ -226,7 +230,12 @@ export default function App() {
       if (payload.models) setEditorModels(payload.models);
       if (typeof payload.mappingCode === "string") setMappingCode(payload.mappingCode);
       if (Array.isArray(payload.initializations)) setInitializations(payload.initializations);
-      if (typeof payload.lastSavedPath === "string") setLastSavedPath(payload.lastSavedPath);
+      setLastSavedPath(typeof payload.lastSavedPath === "string" ? payload.lastSavedPath : null);
+      setSaveTargetPath(typeof payload.saveTargetPath === "string" ? payload.saveTargetPath : null);
+      if (typeof payload.saveTargetPath === "string") setSavePath(payload.saveTargetPath);
+      setAutosavePath(typeof payload.autosavePath === "string" ? payload.autosavePath : null);
+      setLastAutosavedPath(typeof payload.lastAutosavedPath === "string" ? payload.lastAutosavedPath : null);
+      if (Array.isArray(payload.recentMappings)) setRecentMappings(payload.recentMappings);
       setCanUndo(Boolean(payload.canUndo));
       setCanRedo(Boolean(payload.canRedo));
       if (payload.ok === false) {
@@ -682,8 +691,14 @@ export default function App() {
                 code={mappingCode}
                 savePath={savePath}
                 lastSavedPath={lastSavedPath}
+                saveTargetPath={saveTargetPath}
+                autosavePath={autosavePath}
+                lastAutosavedPath={lastAutosavedPath}
+                recentMappings={recentMappings}
                 onSavePathChange={setSavePath}
                 onSave={() => sendEditorCommand({ action: "write_mapping_code", path: savePath })}
+                onOpenRecent={(path) => sendEditorCommand({ action: "open_mapping_code", path })}
+                disabled={!editorConnected}
               />
             </>
           )}
@@ -1553,14 +1568,26 @@ function MappingCodePanel({
   code,
   savePath,
   lastSavedPath,
+  saveTargetPath,
+  autosavePath,
+  lastAutosavedPath,
+  recentMappings,
   onSavePathChange,
   onSave,
+  onOpenRecent,
+  disabled,
 }: {
   code: string;
   savePath: string;
   lastSavedPath: string | null;
+  saveTargetPath: string | null;
+  autosavePath: string | null;
+  lastAutosavedPath: string | null;
+  recentMappings: string[];
   onSavePathChange: (path: string) => void;
   onSave: () => void;
+  onOpenRecent: (path: string) => void;
+  disabled: boolean;
 }) {
   const copyCode = useCallback(async () => {
     if (!code) return;
@@ -1578,12 +1605,45 @@ function MappingCodePanel({
         <span>Write to file</span>
         <input value={savePath} onChange={(event) => onSavePathChange(event.target.value)} placeholder="mapping.generated.jl" />
       </label>
-      <button className="metric-button" onClick={onSave}>Save mapping code</button>
-      {lastSavedPath ? <div className="diagnostic">Saved to {lastSavedPath}</div> : <div className="empty-state compact">No mapping code saved yet.</div>}
+      <button className="metric-button" disabled={disabled} onClick={onSave}>Save mapping code</button>
+      <div className="storage-grid">
+        {saveTargetPath ? <PathStatus label="Auto-save target" path={saveTargetPath} /> : <div className="empty-state compact">No file target selected.</div>}
+        {lastSavedPath ? <PathStatus label="Last saved" path={lastSavedPath} /> : null}
+        {autosavePath ? <PathStatus label={lastAutosavedPath ? "Recovery autosave" : "Recovery target"} path={autosavePath} /> : null}
+      </div>
+      {recentMappings.length > 0 && (
+        <div className="recent-mappings">
+          <div className="row-with-actions">
+            <strong>Recent mappings</strong>
+          </div>
+          <div className="recent-mapping-list">
+            {recentMappings.map((path) => (
+              <button className="recent-mapping-item" key={path} disabled={disabled} onClick={() => onOpenRecent(path)}>
+                <span>{basename(path)}</span>
+                <small>{path}</small>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PathStatus({ label, path }: { label: string; path: string }) {
+  return (
+    <div className="path-status">
+      <span>{label}</span>
+      <strong>{path}</strong>
     </div>
   );
 }
 
+function basename(path: string) {
+  const parts = path.split(/[\\/]/);
+  return parts[parts.length - 1] || path;
+}
+
 function ModelBrowser({
   models,
   scales,
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 90dae8bd..06e9e3d1 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1089,6 +1089,71 @@ h1 {
   line-height: 1.45;
 }
 
+.storage-grid {
+  display: grid;
+  gap: 8px;
+}
+
+.path-status {
+  display: grid;
+  gap: 3px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(255, 250, 242, 0.72);
+  padding: 9px;
+}
+
+.path-status span {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 720;
+}
+
+.path-status strong {
+  color: var(--ink);
+  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.recent-mappings {
+  display: grid;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.recent-mapping-list {
+  display: grid;
+  gap: 7px;
+}
+
+.recent-mapping-item {
+  display: grid;
+  gap: 3px;
+  text-align: left;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(255, 253, 247, 0.82);
+  color: var(--ink);
+  padding: 9px;
+  cursor: pointer;
+}
+
+.recent-mapping-item:hover,
+.recent-mapping-item:focus-visible {
+  border-color: rgba(31, 122, 83, 0.32);
+  background: rgba(31, 122, 83, 0.08);
+}
+
+.recent-mapping-item span {
+  font-weight: 720;
+}
+
+.recent-mapping-item small {
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
 .inline-field {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 3edb9320..54afbd96 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -110,4 +110,8 @@ export type GraphEditorState = {
   mappingCode: string;
   initializations: InitializationDescriptor[];
   lastSavedPath: string | null;
+  saveTargetPath: string | null;
+  autosavePath: string | null;
+  lastAutosavedPath: string | null;
+  recentMappings: string[];
 };
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index 4892f6be..ad7893fd 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -69,7 +69,9 @@ end
             Status(TT_cu=1.0, LAI=2.0),
         ),
     )
-    session = edit_graph(mapping; port=0, open_browser=false)
+    autosave_path = tempname() * ".jl"
+    recent_file_path = tempname() * ".json"
+    session = edit_graph(mapping; port=0, open_browser=false, autosave_path=autosave_path, recent_file_path=recent_file_path)
 
     try
         @test session isa AbstractGraphEditorSession
@@ -84,6 +86,10 @@ end
         @test haskey(state, "graph")
         @test haskey(state, "models")
         @test haskey(state, "mappingCode")
+        @test state["autosavePath"] == autosave_path
+        @test state["lastAutosavedPath"] == autosave_path
+        @test isfile(autosave_path)
+        @test state["recentMappings"] == Any[]
         @test startswith(state["mappingCode"], "using PlantSimEngine\n")
         @test occursin("using PlantSimEngine.Examples", state["mappingCode"])
         @test occursin("ModelMapping", state["mappingCode"])
@@ -209,6 +215,9 @@ end
             saved = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
             @test saved["ok"]
             @test saved["lastSavedPath"] == output_path
+            @test saved["saveTargetPath"] == output_path
+            @test output_path in saved["recentMappings"]
+            @test isfile(recent_file_path)
             @test isfile(output_path)
             saved_code = read(output_path, String)
             @test startswith(saved_code, "using PlantSimEngine\n")
@@ -216,6 +225,35 @@ end
             @test occursin("mapping = ModelMapping", saved_code)
             @test !occursin("LAI = 2.0", saved_code)
             @test !occursin("TT_cu = 1.0", saved_code)
+
+            update_degree_days = PlantSimEngine.JSON.json(Dict(
+                "action" => "edit",
+                "kind" => "update_model",
+                "scale" => "Plant",
+                "process" => "Degreedays",
+                "targetScale" => "Plant",
+                "modelType" => string(ToyDegreeDaysCumulModel),
+                "parameters" => Dict(
+                    "init_TT" => Dict("type" => "float", "value" => "5.0"),
+                    "T_base" => Dict("type" => "float", "value" => "1.0"),
+                    "T_max" => Dict("type" => "float", "value" => "20.0"),
+                ),
+            ))
+            HTTP.WebSockets.send(ws, update_degree_days)
+            autosaved = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test autosaved["ok"]
+            @test occursin("ToyDegreeDaysCumulModel(5.0, 1.0, 20.0)", read(output_path, String))
+            @test occursin("ToyDegreeDaysCumulModel(5.0, 1.0, 20.0)", read(autosave_path, String))
+
+            open_saved = PlantSimEngine.JSON.json(Dict(
+                "action" => "open_mapping_code",
+                "path" => output_path,
+            ))
+            HTTP.WebSockets.send(ws, open_saved)
+            loaded = PlantSimEngine.JSON.parse(String(HTTP.WebSockets.receive(ws)))
+            @test loaded["ok"]
+            @test loaded["saveTargetPath"] == output_path
+            @test current_mapping(session) isa ModelMapping{PlantSimEngine.MultiScale}
         end
     finally
         close(session)

From b1cc1e28aeac1d06ad668e85c586dbb282acb74c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Thu, 7 May 2026 06:41:15 +0200
Subject: [PATCH 15/19] Add "Open" button

---
 .../graph_visualization_editor.md             |   2 +-
 frontend/src/App.tsx                          | 103 ++++++++++++++----
 frontend/src/styles.css                       |  15 +++
 3 files changed, 98 insertions(+), 22 deletions(-)

diff --git a/docs/src/step_by_step/graph_visualization_editor.md b/docs/src/step_by_step/graph_visualization_editor.md
index 0d3a7fc5..900c86d3 100644
--- a/docs/src/step_by_step/graph_visualization_editor.md
+++ b/docs/src/step_by_step/graph_visualization_editor.md
@@ -65,7 +65,7 @@ mapping = ModelMapping(
 )
 ```
 
-After writing a file once, every successful edit, undo, redo, or recent-file load automatically rewrites that same file. The session also keeps a recovery autosave in the temporary directory, and the "Mapping code" panel lists recently saved mapping scripts that can be reopened. Use git or another version-control system for mapping scripts that matter for a simulation workflow.
+After writing a file once, every successful edit, undo, redo, or recent-file load automatically rewrites that same file. The session also keeps a recovery autosave in the temporary directory. The top-left "Open" button can reopen a mapping script from a file path or from the recent mapping list. Use git or another version-control system for mapping scripts that matter for a simulation workflow.
 
 The editor extension currently supports the same edit operations as the Julia API:
 
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d7fc7fa5..5a3bc700 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,6 +17,7 @@ import {
   AlertTriangle,
   CircleAlert,
   Filter,
+  FolderOpen,
   GitPullRequestArrow,
   Network,
   RotateCcw,
@@ -144,6 +145,7 @@ export default function App() {
   const [pendingConnection, setPendingConnection] = useState<PendingMappingConnection | null>(null);
   const [showRequiredPanel, setShowRequiredPanel] = useState(false);
   const [showWarningsPanel, setShowWarningsPanel] = useState(false);
+  const [showOpenPanel, setShowOpenPanel] = useState(false);
   const [showSearchResults, setShowSearchResults] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [layoutMode, setLayoutMode] = useState<LayoutMode>("data_flow");
@@ -438,6 +440,15 @@ export default function App() {
     <main className={`app-shell ${candidatePopover ? "has-candidate-popover" : ""}`}>
       <section className="graph-panel">
         <div className="topbar graph-workbench">
+          <button
+            className={`metric-button open-button ${showOpenPanel ? "active" : ""}`}
+            disabled={!editorConnected}
+            onClick={() => setShowOpenPanel((open) => !open)}
+            title="Open a ModelMapping"
+          >
+            <FolderOpen size={14} /> Open
+          </button>
+
           <div className="brand-block">
             <div className="eyebrow">PlantSimEngine</div>
             <h1>Dependency Graph</h1>
@@ -558,6 +569,18 @@ export default function App() {
           </FloatingPanel>
         )}
 
+        {showOpenPanel && (
+          <OpenMappingPanel
+            recentMappings={recentMappings}
+            disabled={!editorConnected}
+            onOpen={(path) => {
+              sendEditorCommand({ action: "open_mapping_code", path });
+              setShowOpenPanel(false);
+            }}
+            onClose={() => setShowOpenPanel(false)}
+          />
+        )}
+
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -570,6 +593,7 @@ export default function App() {
           onPaneClick={() => {
             setShowSearchResults(false);
             setCandidatePopover(null);
+            setShowOpenPanel(false);
           }}
           onEdgeClick={(_, edge) => {
             if (edge.data) {
@@ -694,10 +718,8 @@ export default function App() {
                 saveTargetPath={saveTargetPath}
                 autosavePath={autosavePath}
                 lastAutosavedPath={lastAutosavedPath}
-                recentMappings={recentMappings}
                 onSavePathChange={setSavePath}
                 onSave={() => sendEditorCommand({ action: "write_mapping_code", path: savePath })}
-                onOpenRecent={(path) => sendEditorCommand({ action: "open_mapping_code", path })}
                 disabled={!editorConnected}
               />
             </>
@@ -933,6 +955,64 @@ function WarningList({
   );
 }
 
+function OpenMappingPanel({
+  recentMappings,
+  disabled,
+  onOpen,
+  onClose,
+}: {
+  recentMappings: string[];
+  disabled: boolean;
+  onOpen: (path: string) => void;
+  onClose: () => void;
+}) {
+  const [path, setPath] = useState("");
+
+  const openPath = () => {
+    const trimmed = path.trim();
+    if (!trimmed) return;
+    onOpen(trimmed);
+  };
+
+  return (
+    <FloatingPanel className="open-panel" title="Open" subtitle="ModelMapping" onClose={onClose}>
+      <div className="open-mapping-panel">
+        <label className="model-browser-control">
+          <span>File path</span>
+          <div className="inline-field">
+            <input
+              value={path}
+              onChange={(event) => setPath(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") openPath();
+              }}
+              placeholder="/path/to/mapping.jl"
+            />
+            <button className="metric-button" disabled={disabled || !path.trim()} onClick={openPath}>
+              Open
+            </button>
+          </div>
+        </label>
+        <div className="recent-mappings">
+          <div className="row-with-actions">
+            <strong>Recent mappings</strong>
+          </div>
+          {recentMappings.length > 0 ? (
+            <div className="recent-mapping-list">
+              {recentMappings.map((item) => (
+                <button className="recent-mapping-item" key={item} disabled={disabled} onClick={() => onOpen(item)}>
+                  <span>{basename(item)}</span>
+                  <small>{item}</small>
+                </button>
+              ))}
+            </div>
+          ) : <div className="empty-state compact">No recent mapping.</div>}
+        </div>
+      </div>
+    </FloatingPanel>
+  );
+}
+
 function InspectorDetails({
   selected,
   selectedEdge,
@@ -1571,10 +1651,8 @@ function MappingCodePanel({
   saveTargetPath,
   autosavePath,
   lastAutosavedPath,
-  recentMappings,
   onSavePathChange,
   onSave,
-  onOpenRecent,
   disabled,
 }: {
   code: string;
@@ -1583,10 +1661,8 @@ function MappingCodePanel({
   saveTargetPath: string | null;
   autosavePath: string | null;
   lastAutosavedPath: string | null;
-  recentMappings: string[];
   onSavePathChange: (path: string) => void;
   onSave: () => void;
-  onOpenRecent: (path: string) => void;
   disabled: boolean;
 }) {
   const copyCode = useCallback(async () => {
@@ -1611,21 +1687,6 @@ function MappingCodePanel({
         {lastSavedPath ? <PathStatus label="Last saved" path={lastSavedPath} /> : null}
         {autosavePath ? <PathStatus label={lastAutosavedPath ? "Recovery autosave" : "Recovery target"} path={autosavePath} /> : null}
       </div>
-      {recentMappings.length > 0 && (
-        <div className="recent-mappings">
-          <div className="row-with-actions">
-            <strong>Recent mappings</strong>
-          </div>
-          <div className="recent-mapping-list">
-            {recentMappings.map((path) => (
-              <button className="recent-mapping-item" key={path} disabled={disabled} onClick={() => onOpenRecent(path)}>
-                <span>{basename(path)}</span>
-                <small>{path}</small>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
     </div>
   );
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 06e9e3d1..861b7825 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -349,6 +349,10 @@ h1 {
   gap: 8px;
 }
 
+.open-button {
+  flex: 0 0 auto;
+}
+
 .panel-switch {
   flex-wrap: wrap;
 }
@@ -525,6 +529,12 @@ h1 {
   border-color: rgba(201, 144, 53, 0.35);
 }
 
+.open-panel {
+  left: 18px;
+  right: auto;
+  border-color: rgba(31, 122, 83, 0.32);
+}
+
 .floating-panel-header {
   display: flex;
   align-items: flex-start;
@@ -1122,6 +1132,11 @@ h1 {
   margin-top: 4px;
 }
 
+.open-mapping-panel {
+  display: grid;
+  gap: 12px;
+}
+
 .recent-mapping-list {
   display: grid;
   gap: 7px;

From 2c82b10cbe310a20794cff6bc6765c4580aaf7c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Thu, 7 May 2026 06:49:04 +0200
Subject: [PATCH 16/19] help users focus on the right pane when adding a new
 model

---
 frontend/src/App.tsx    | 77 +++++++++++++++++++++++++++++++++++------
 frontend/src/styles.css | 45 ++++++++++++++++++++++++
 2 files changed, 111 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5a3bc700..508ab1d4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
   Background,
   Controls,
@@ -156,9 +156,12 @@ export default function App() {
   const [selectedEdge, setSelectedEdge] = useState<GraphEdgeData | null>(null);
   const [candidatePopover, setCandidatePopover] = useState<CandidatePopover | null>(null);
   const [addModelSelection, setAddModelSelection] = useState<AddModelSelection | null>(null);
+  const [addModelFocusRequest, setAddModelFocusRequest] = useState(0);
+  const [highlightAddModelPanel, setHighlightAddModelPanel] = useState(false);
   const [flowInstance, setFlowInstance] = useState<ReactFlowInstance<Node<RuntimeGraphNodeData>, Edge<GraphEdgeData>> | null>(null);
   const [nodes, setNodes, onNodesChange] = useNodesState<Node<RuntimeGraphNodeData>>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<GraphEdgeData>>([]);
+  const sidePanelRef = useRef<HTMLElement | null>(null);
 
   const nodeById = useMemo(() => new Map(graph.nodes.map((node) => [node.id, node])), [graph]);
   const portById = useMemo(() => buildPortIndex(graph), [graph]);
@@ -264,12 +267,26 @@ export default function App() {
     setActivePanel((current) => current === panel ? null : panel);
   }, []);
 
+  const openAddModelPanel = useCallback(() => {
+    setActivePanel("add_model");
+    setHighlightAddModelPanel(true);
+    setAddModelFocusRequest(Date.now());
+  }, []);
+
   const addCustomScale = useCallback((rawScale: string) => {
     const scale = rawScale.trim();
     if (!scale) return;
     setCustomScales((current) => current.includes(scale) || graph.scales.includes(scale) ? current : [...current, scale]);
   }, [graph.scales]);
 
+  useEffect(() => {
+    if (activePanel !== "add_model" || !highlightAddModelPanel) return;
+    sidePanelRef.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    sidePanelRef.current?.focus({ preventScroll: true });
+    const timeout = window.setTimeout(() => setHighlightAddModelPanel(false), 1800);
+    return () => window.clearTimeout(timeout);
+  }, [activePanel, highlightAddModelPanel, addModelFocusRequest]);
+
   useEffect(() => {
     const nextNodes = visibleNodeData.map((node) => ({
       id: node.id,
@@ -534,7 +551,7 @@ export default function App() {
 
           <div className="toolbar-group panel-switch">
             <button className={`metric-button ${activePanel === "inspector" ? "active" : ""}`} onClick={() => togglePanel("inspector")}>Inspector</button>
-            <button className={`metric-button ${activePanel === "add_model" ? "active" : ""}`} onClick={() => togglePanel("add_model")}>Add model</button>
+            <button className={`metric-button ${activePanel === "add_model" ? "active" : ""}`} onClick={openAddModelPanel}>Add model</button>
             <button className={`metric-button ${activePanel === "initializations" ? "active" : ""}`} onClick={() => togglePanel("initializations")}>Initializations</button>
             <button className={`metric-button ${activePanel === "mapping_code" ? "active" : ""}`} onClick={() => togglePanel("mapping_code")}>Mapping code</button>
           </div>
@@ -627,11 +644,14 @@ export default function App() {
             role={candidatePopoverInfo.port.role}
             models={candidatePopoverInfo.models}
             onSelectModel={(model) => {
+              const requestId = Date.now();
               setAddModelSelection({
                 modelType: model.type,
                 scale: candidatePopoverInfo.node.scale,
-                requestId: Date.now(),
+                requestId,
               });
+              setAddModelFocusRequest(requestId);
+              setHighlightAddModelPanel(true);
               setActivePanel("add_model");
               setCandidatePopover(null);
             }}
@@ -641,7 +661,11 @@ export default function App() {
       </section>
 
       {activePanel && (
-        <aside className="inspector">
+        <aside
+          ref={sidePanelRef}
+          className={`inspector ${activePanel === "add_model" && highlightAddModelPanel ? "guided-focus" : ""}`}
+          tabIndex={-1}
+        >
           {activePanel === "inspector" && (
             <>
               <header>
@@ -683,6 +707,7 @@ export default function App() {
                   models={editorModels}
                   scales={editorScales}
                   selection={addModelSelection}
+                  focusRequestId={addModelFocusRequest}
                   onAddScale={addCustomScale}
                   onCommand={sendEditorCommand}
                   disabled={!editorConnected}
@@ -1709,6 +1734,7 @@ function ModelBrowser({
   models,
   scales,
   selection,
+  focusRequestId,
   onAddScale,
   onCommand,
   disabled,
@@ -1716,6 +1742,7 @@ function ModelBrowser({
   models: ModelDescriptor[];
   scales: string[];
   selection: AddModelSelection | null;
+  focusRequestId: number;
   onAddScale: (scale: string) => void;
   onCommand: (command: Record<string, unknown>) => void;
   disabled: boolean;
@@ -1770,7 +1797,14 @@ function ModelBrowser({
           {models.map((model) => <option key={model.type} value={model.type}>{model.name} ({model.process ?? "unknown"})</option>)}
         </select>
       </label>
-      <ModelParameterForm key={selected.type} model={selected} scale={scale} disabled={disabled} onCommand={onCommand} />
+      <ModelParameterForm
+        key={selected.type}
+        model={selected}
+        scale={scale}
+        focusRequestId={focusRequestId}
+        disabled={disabled}
+        onCommand={onCommand}
+      />
     </div>
   );
 }
@@ -1778,11 +1812,13 @@ function ModelBrowser({
 function ModelParameterForm({
   model,
   scale,
+  focusRequestId,
   disabled,
   onCommand,
 }: {
   model: ModelDescriptor;
   scale: string;
+  focusRequestId: number;
   disabled: boolean;
   onCommand: (command: Record<string, unknown>) => void;
 }) {
@@ -1793,6 +1829,8 @@ function ModelParameterForm({
   const [rateMode, setRateMode] = useState<"default" | "clock">("default");
   const [rateDt, setRateDt] = useState("1.0");
   const [ratePhase, setRatePhase] = useState("0.0");
+  const firstParameterRef = useRef<HTMLInputElement | null>(null);
+  const addButtonRef = useRef<HTMLButtonElement | null>(null);
 
   const setSharedType = useCallback((fieldName: string, nextType: string) => {
     const field = model.constructor.fields.find((item) => item.name === fieldName);
@@ -1809,10 +1847,19 @@ function ModelParameterForm({
     onCommand({ action: "edit", kind: "add_model", scale, modelType: model.type, parameters, timestep });
   }, [model, onCommand, rateDt, rateMode, ratePhase, scale, types, values]);
 
+  useEffect(() => {
+    if (!focusRequestId) return;
+    window.setTimeout(() => {
+      (firstParameterRef.current ?? addButtonRef.current)?.focus({ preventScroll: true });
+    }, 80);
+  }, [focusRequestId, model.type]);
+
   return (
-      <div className="model-browser-item">
-      <strong>{model.name}</strong>
-      <span>{model.process ?? "unknown process"}</span>
+      <div className="model-browser-item add-model-config">
+      <div className="model-browser-title">
+        <strong>{model.name}</strong>
+        <span>{model.process ?? "unknown process"} at :{scale}</span>
+      </div>
       <div className="rate-editor">
         <label className="model-browser-control">
           <span>Rate</span>
@@ -1836,16 +1883,24 @@ function ModelParameterForm({
           </div>
         )}
       </div>
-      {model.constructor.fields.map((field) => (
+      {model.constructor.fields.map((field, index) => (
         <div className="parameter-row" key={field.name}>
           <label>{field.name}</label>
-          <input value={values[field.name] ?? ""} onChange={(event) => setValues((current) => ({ ...current, [field.name]: event.target.value }))} />
+          <input
+            ref={index === 0 ? firstParameterRef : undefined}
+            value={values[field.name] ?? ""}
+            onChange={(event) => setValues((current) => ({ ...current, [field.name]: event.target.value }))}
+          />
           <select value={types[field.name] ?? field.inferredChoice} onChange={(event) => setSharedType(field.name, event.target.value)}>
             {field.choices.map((choice) => <option key={choice} value={choice}>{choice}</option>)}
           </select>
         </div>
       ))}
-      <button className="metric-button" disabled={disabled} onClick={addModel}>Add model</button>
+      <div className="add-model-footer">
+        <button ref={addButtonRef} className="metric-button accent-button" disabled={disabled} onClick={addModel}>
+          Add {model.name}
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 861b7825..cb48b20d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1066,6 +1066,28 @@ h1 {
   overflow: auto;
 }
 
+.inspector:focus {
+  outline: none;
+}
+
+.inspector.guided-focus {
+  animation: guided-panel-focus 1.8s ease-out;
+}
+
+@keyframes guided-panel-focus {
+  0% {
+    box-shadow: inset 0 0 0 3px rgba(31, 122, 83, 0.48), -18px 0 44px rgba(31, 122, 83, 0.16);
+    background: rgba(250, 255, 247, 0.94);
+  }
+  60% {
+    box-shadow: inset 0 0 0 3px rgba(31, 122, 83, 0.36), -12px 0 34px rgba(31, 122, 83, 0.12);
+  }
+  100% {
+    box-shadow: none;
+    background: rgba(255, 250, 242, 0.82);
+  }
+}
+
 .inspector header {
   display: flex;
   align-items: center;
@@ -1524,6 +1546,16 @@ h1 {
   background: rgba(255, 255, 255, 0.62);
 }
 
+.model-browser-item.add-model-config {
+  gap: 10px;
+  padding-bottom: 0;
+}
+
+.model-browser-title {
+  display: grid;
+  gap: 2px;
+}
+
 .model-browser-item strong {
   overflow-wrap: anywhere;
   font-size: 12px;
@@ -1640,6 +1672,19 @@ h1 {
   background: rgba(252, 249, 244, 0.72);
 }
 
+.add-model-footer {
+  position: sticky;
+  bottom: -18px;
+  display: flex;
+  justify-content: flex-end;
+  margin: 2px -9px 0;
+  padding: 10px 9px;
+  border-top: 1px solid rgba(183, 166, 150, 0.34);
+  border-radius: 0 0 10px 10px;
+  background: rgba(255, 250, 242, 0.94);
+  backdrop-filter: blur(8px);
+}
+
 .rate-summary {
   color: var(--muted);
   font-size: 11px;

From 28b11432c0fb537721d745b8f37d0dfcaa2a91c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Thu, 7 May 2026 07:02:19 +0200
Subject: [PATCH 17/19] Can start editing a graph from scratch now

---
 .../graph_visualization_editor.md             |  6 +++++
 ext/PlantSimEngineGraphEditorExt.jl           | 14 ++++++++++--
 frontend/src/App.tsx                          |  3 ++-
 src/visualization/graph_editor_api.jl         |  6 +++--
 test/test-graph-editor-extension.jl           | 22 +++++++++++++++++++
 5 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/docs/src/step_by_step/graph_visualization_editor.md b/docs/src/step_by_step/graph_visualization_editor.md
index 900c86d3..8ae09bda 100644
--- a/docs/src/step_by_step/graph_visualization_editor.md
+++ b/docs/src/step_by_step/graph_visualization_editor.md
@@ -33,6 +33,12 @@ session.url
 session
 ```
 
+To start from a blank graph and build a mapping from scratch, omit the mapping:
+
+```julia
+session = edit_graph()
+```
+
 By default, `edit_graph` opens `session.url` in the system default browser. Pass `open_browser=false` to keep the session headless, for example in scripts or tests:
 
 ```julia
diff --git a/ext/PlantSimEngineGraphEditorExt.jl b/ext/PlantSimEngineGraphEditorExt.jl
index 3da0b928..2f785cf0 100644
--- a/ext/PlantSimEngineGraphEditorExt.jl
+++ b/ext/PlantSimEngineGraphEditorExt.jl
@@ -46,10 +46,11 @@ end
 current_mapping_code(session::GraphEditorSession) = _model_mapping_to_julia(session.mapping)
 
 """
-    edit_graph(mapping; mtg=nothing, host="127.0.0.1", port=8765, open_browser=true, autosave=true)
+    edit_graph([mapping]; mtg=nothing, host="127.0.0.1", port=8765, open_browser=true, autosave=true)
 
 Start a local graph editor session. The returned session owns the current
 `ModelMapping`; call `current_mapping(session)` to recover the edited mapping.
+Call `edit_graph()` without a mapping to start from an empty scratch editor.
 
 Single-scale mappings are automatically normalized to multiscale form at the :Default scale.
 By default, the session URL is opened with the system default browser. Pass
@@ -62,7 +63,7 @@ This method is provided by the `PlantSimEngineGraphEditorExt` package extension.
 Load `HTTP` in the active session to make it available.
 """
 function edit_graph(
-    mapping::PlantSimEngine.ModelMapping;
+    mapping::PlantSimEngine.ModelMapping=_empty_editor_mapping();
     mtg=nothing,
     host::AbstractString="127.0.0.1",
     port::Integer=8765,
@@ -100,6 +101,9 @@ function edit_graph(
     return session
 end
 
+_empty_editor_mapping() =
+    PlantSimEngine._build_model_mapping(PlantSimEngine.MultiScale, Dict{Symbol,Tuple}(); validated=false)
+
 function _open_in_default_browser(url::AbstractString)
     try
         if Sys.isapple()
@@ -346,6 +350,7 @@ end
 
 function _state_payload(session::GraphEditorSession; ok::Bool=true, diagnostics::Vector{String}=String[])
     graph = JSON.parse(PlantSimEngine.graph_view_json(session.mapping))
+    isempty(get(graph, "scales", Any[])) && (graph["scales"] = ["Default"])
     append!(graph["diagnostics"], diagnostics)
     return Dict(
         "ok" => ok,
@@ -608,6 +613,11 @@ function _model_mapping_to_julia(mapping::PlantSimEngine.ModelMapping)
         println(io, statement)
     end
     println(io)
+    if isempty(keys(mapping))
+        println(io, "# Add at least one model in the graph editor to generate a ModelMapping.")
+        print(io, "# mapping = ModelMapping(...)")
+        return String(take!(io))
+    end
     required_status_variables = _required_status_variables(mapping)
     println(io, "mapping = ModelMapping(")
     for scale in keys(mapping)
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 508ab1d4..ec3caddd 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -175,7 +175,8 @@ export default function App() {
   const searchResults = useMemo(() => deriveSearchResults(graph, searchQuery), [graph, searchQuery]);
   const visibleNodeData = useMemo(() => graph.nodes.filter((node) => !collapsedScales.has(node.scale)), [collapsedScales, graph.nodes]);
   const editorScales = useMemo(() => {
-    const merged = [...graph.scales, ...customScales];
+    const graphScales = graph.scales.length > 0 ? graph.scales : ["Default"];
+    const merged = [...graphScales, ...customScales];
     return [...new Set(merged)];
   }, [customScales, graph.scales]);
   const visibleNodeIds = useMemo(() => new Set(visibleNodeData.map((node) => node.id)), [visibleNodeData]);
diff --git a/src/visualization/graph_editor_api.jl b/src/visualization/graph_editor_api.jl
index 5a5500e7..be52eba5 100644
--- a/src/visualization/graph_editor_api.jl
+++ b/src/visualization/graph_editor_api.jl
@@ -5,9 +5,10 @@ function _graph_editor_missing_http()
 end
 
 """
-    edit_graph(mapping; kwargs...)
+    edit_graph([mapping]; kwargs...)
 
-Start an interactive graph editor session for a [`ModelMapping`](@ref).
+Start an interactive graph editor session for a [`ModelMapping`](@ref), or
+call `edit_graph()` with no mapping to start from a blank editor.
 
 The HTTP-backed method is provided by the `PlantSimEngineGraphEditorExt`
 package extension. Load `HTTP` in the active Julia session before calling this
@@ -18,6 +19,7 @@ using PlantSimEngine
 using HTTP
 
 session = edit_graph(mapping)
+blank_session = edit_graph()
 ```
 
 Pass `open_browser=false` to keep the session headless.
diff --git a/test/test-graph-editor-extension.jl b/test/test-graph-editor-extension.jl
index ad7893fd..6a0bd7b0 100644
--- a/test/test-graph-editor-extension.jl
+++ b/test/test-graph-editor-extension.jl
@@ -62,6 +62,28 @@ end
 @testset "HTTP extension loading and WebSocket edits" begin
     @test Base.get_extension(PlantSimEngine, :PlantSimEngineGraphEditorExt) !== nothing
 
+    blank_session = edit_graph(; port=0, open_browser=false, autosave=false)
+    try
+        blank_mapping = current_mapping(blank_session)
+        @test blank_mapping isa ModelMapping{PlantSimEngine.MultiScale}
+        @test isempty(keys(blank_mapping))
+
+        blank_state_response = HTTP.get(string(blank_session.url, "/state"))
+        @test blank_state_response.status == 200
+        blank_state = PlantSimEngine.JSON.parse(String(blank_state_response.body))
+        @test blank_state["ok"]
+        @test blank_state["graph"]["nodes"] == Any[]
+        @test blank_state["graph"]["edges"] == Any[]
+        @test blank_state["graph"]["scales"] == Any["Default"]
+        @test occursin("Add at least one model", blank_state["mappingCode"])
+
+        apply_edit!(blank_session, PlantSimEngine.AddModel(:Default, ToyLAIModel, NamedTuple()))
+        @test :Default in keys(current_mapping(blank_session))
+        @test only(PlantSimEngine.get_models(current_mapping(blank_session)[:Default])) isa ToyLAIModel
+    finally
+        close(blank_session)
+    end
+
     mapping = ModelMapping(
         :Leaf => (
             ToyLAIModel(),

From b56c283ae5cc72a148821c6802f0aaf77bb9c0f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Thu, 7 May 2026 07:39:37 +0200
Subject: [PATCH 18/19] Fix issue about not detecting inputs/outputs of models
 that don't have an all default call

---
 frontend/src/App.tsx               |  6 ++---
 src/model_discovery.jl             | 36 ++++++++++++++++++++++++++++++
 test/test-dependency-graph-view.jl |  8 +++++++
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ec3caddd..5d3163d4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -168,7 +168,7 @@ export default function App() {
   const incomingByPort = useMemo(() => groupEdgesByPort(graph.edges, "targetPort"), [graph.edges]);
   const outgoingByPort = useMemo(() => groupEdgesByPort(graph.edges, "sourcePort"), [graph.edges]);
   const requiredInputPortIds = useMemo(() => deriveRequiredInputPorts(graph), [graph]);
-  const candidatePortIds = useMemo(() => deriveCandidatePortIds(graph, editorModels, incomingByPort, outgoingByPort), [editorModels, graph, incomingByPort, outgoingByPort]);
+  const candidatePortIds = useMemo(() => deriveCandidatePortIds(graph, editorModels, incomingByPort), [editorModels, graph, incomingByPort]);
   const requiredInputs = useMemo(() => deriveRequiredInputs(graph, requiredInputPortIds, incomingByPort), [graph, incomingByPort, requiredInputPortIds]);
   const warningItems = useMemo(() => deriveValidationWarnings(graph, requiredInputPortIds, incomingByPort), [graph, incomingByPort, requiredInputPortIds]);
   const actionableWarningItems = useMemo(() => warningItems.filter((item) => item.severity !== "info"), [warningItems]);
@@ -1983,7 +1983,6 @@ function deriveCandidatePortIds(
   graph: DependencyGraphView,
   models: ModelDescriptor[],
   incomingByPort: Map<string, GraphEdgeData[]>,
-  outgoingByPort: Map<string, GraphEdgeData[]>,
 ) {
   const producerVariables = new Set<string>();
   const consumerVariables = new Set<string>();
@@ -1999,8 +1998,7 @@ function deriveCandidatePortIds(
       if (isUncomputed && producerVariables.has(port.name)) candidates.add(port.id);
     }
     for (const port of node.outputs) {
-      const isUnused = (outgoingByPort.get(port.id) ?? []).length === 0;
-      if (isUnused && consumerVariables.has(port.name)) candidates.add(port.id);
+      if (consumerVariables.has(port.name)) candidates.add(port.id);
     }
   }
   return candidates;
diff --git a/src/model_discovery.jl b/src/model_discovery.jl
index 1be00446..3574da13 100644
--- a/src/model_discovery.jl
+++ b/src/model_discovery.jl
@@ -172,6 +172,7 @@ end
 
 function _model_var_descriptor(::Type{T}, accessor) where {T<:AbstractModel}
     instance = _try_zero_arg_model(T)
+    isnothing(instance) && (instance = _try_dummy_model(T))
     isnothing(instance) && return Dict{String,Any}()
     vars = try
         accessor(instance)
@@ -204,6 +205,41 @@ function _try_zero_arg_model(::Type{T}) where {T<:AbstractModel}
     end
 end
 
+function _try_dummy_model(::Type{T}) where {T<:AbstractModel}
+    unwrapped_type = Base.unwrap_unionall(T)
+    names = fieldnames(unwrapped_type)
+    isempty(names) && return nothing
+    field_types = fieldtypes(unwrapped_type)
+    values = Any[]
+    for field_type in field_types
+        value = _dummy_field_value(field_type)
+        isnothing(value) && return nothing
+        push!(values, value)
+    end
+    try
+        return T(values...)
+    catch
+        return nothing
+    end
+end
+
+_dummy_field_value(::TypeVar) = 0.0
+
+function _dummy_field_value(T)
+    try
+        T === Any && return 0.0
+        T === Bool && return false
+        T <: Integer && return zero(T)
+        T <: AbstractFloat && return zero(T)
+        T <: Real && return zero(T)
+        T <: Symbol && return :value
+        T <: AbstractString && return ""
+    catch
+        return nothing
+    end
+    return nothing
+end
+
 function _field_type_parameter_key(field_type)
     field_type isa TypeVar && return string(field_type.name)
     return nothing
diff --git a/test/test-dependency-graph-view.jl b/test/test-dependency-graph-view.jl
index c4534939..1f8dd15e 100644
--- a/test/test-dependency-graph-view.jl
+++ b/test/test-dependency-graph-view.jl
@@ -211,6 +211,14 @@ PlantSimEngine.outputs_(::GraphViewHardChildModel) = (child_output=-Inf,)
     @test default_fields[2]["default"] == ":fast"
     @test default_fields[2]["inferredChoice"] == "symbol"
 
+    param_descriptor = model_descriptor(GraphViewParamModel)
+    @test param_descriptor["inputs"]["x"] == "-Inf"
+    @test param_descriptor["outputs"]["y"] == "-Inf"
+
+    beer_descriptor = model_descriptor(Beer)
+    @test beer_descriptor["inputs"]["LAI"] == "-Inf"
+    @test beer_descriptor["outputs"]["aPPFD"] == "-Inf"
+
     add_mapping = ModelMapping(:Plant => (GraphViewPlantAgeModel(), Status(day=1.0)))
     added_mapping = apply_graph_edit(add_mapping, AddModel(:Plant, GraphViewPhytomerEmissionModel, NamedTuple()))
     @test any(m -> process(m) == :graph_view_phytomer_emission, PlantSimEngine.get_models(added_mapping[:Plant]))

From 67c7e8427f8c925facbd05a69c097dd9639db26c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Vezy?= <VEZY@users.noreply.github.com>
Date: Thu, 7 May 2026 07:57:29 +0200
Subject: [PATCH 19/19] Add a button to remove model from the editor

---
 frontend/src/App.tsx       | 36 ++++++++++++++++++++++++++++++++++--
 frontend/src/ModelNode.tsx | 16 +++++++++++++++-
 frontend/src/styles.css    | 25 +++++++++++++++++++++++++
 frontend/src/types.ts      |  1 +
 4 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5d3163d4..c3e70180 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -264,6 +264,23 @@ export default function App() {
     editorSocket.send(JSON.stringify(command));
   }, [editorSocket]);
 
+  const removeGraphModel = useCallback((node: GraphNodeData) => {
+    const target = removableMappingNode(node, nodeById);
+    if (!target) {
+      setEditorFeedback({ kind: "error", text: `Cannot remove ${node.process}: no owning ModelMapping model was found.` });
+      return;
+    }
+    sendEditorCommand({
+      action: "edit",
+      kind: "remove_model",
+      scale: target.scale,
+      process: target.process,
+    });
+    setSelected((current) => current?.id === node.id || current?.id === target.id ? null : current);
+    setActivePort(null);
+    setSelectedEdge(null);
+  }, [nodeById, sendEditorCommand]);
+
   const togglePanel = useCallback((panel: Exclude<SidePanel, null>) => {
     setActivePanel((current) => current === panel ? null : panel);
   }, []);
@@ -305,6 +322,7 @@ export default function App() {
         activeCandidatePortId,
         setActivePort,
         setCandidatePopover: toggleCandidatePopover,
+        removeGraphModel,
       }),
     }));
     const nextEdges = visibleEdgeData.map((edge) => flowEdge(edge, new Set<string>(), new Set<string>(), false, false));
@@ -312,7 +330,7 @@ export default function App() {
       setNodes(layouted);
       setEdges(nextEdges);
     });
-  }, [activeCandidatePortId, candidatePortIds, graph.cycleNodes, layoutMode, requiredInputPortIds, setEdges, setNodes, toggleCandidatePopover, visibleEdgeData, visibleNodeData]);
+  }, [activeCandidatePortId, candidatePortIds, graph.cycleNodes, layoutMode, removeGraphModel, requiredInputPortIds, setEdges, setNodes, toggleCandidatePopover, visibleEdgeData, visibleNodeData]);
 
   useEffect(() => {
     const focusEdges = focus.active ? focus.edges : new Set<string>();
@@ -330,10 +348,11 @@ export default function App() {
         activeCandidatePortId,
         setActivePort,
         setCandidatePopover: toggleCandidatePopover,
+        removeGraphModel,
       }),
     })));
     setEdges((current) => current.map((edge) => edge.data ? flowEdge(edge.data, hoverHighlight.edges, focusEdges, Boolean(activePort), focus.active) : edge));
-  }, [activeCandidatePortId, activePort, candidatePortIds, focus, graph.cycleNodes, hoverHighlight.edges, hoverHighlight.ports, requiredInputPortIds, setEdges, setNodes, toggleCandidatePopover]);
+  }, [activeCandidatePortId, activePort, candidatePortIds, focus, graph.cycleNodes, hoverHighlight.edges, hoverHighlight.ports, removeGraphModel, requiredInputPortIds, setEdges, setNodes, toggleCandidatePopover]);
 
   useEffect(() => {
     if (candidatePopover && !candidatePortIds.has(candidatePopover.portId)) setCandidatePopover(null);
@@ -1939,6 +1958,7 @@ function runtimeNodeData(
     activeCandidatePortId: string | null;
     setActivePort: (port: GraphPort | null) => void;
     setCandidatePopover: (port: GraphPort, anchor: { x: number; y: number }) => void;
+    removeGraphModel: (node: GraphNodeData) => void;
   },
 ): RuntimeGraphNodeData {
   return {
@@ -1956,9 +1976,21 @@ function runtimeNodeData(
       if (options.activeCandidatePortId !== port.id) options.setActivePort(null);
     },
     onCandidateClick: options.setCandidatePopover,
+    onRemoveModel: options.removeGraphModel,
   };
 }
 
+function removableMappingNode(node: GraphNodeData, nodeById: Map<string, GraphNodeData>) {
+  let current: GraphNodeData | undefined = node;
+  const visited = new Set<string>();
+  while (current && !visited.has(current.id)) {
+    if (current.role === "model") return current;
+    visited.add(current.id);
+    current = current.parent ? nodeById.get(current.parent) : undefined;
+  }
+  return null;
+}
+
 function deriveRequiredInputPorts(graph: DependencyGraphView) {
   const computedInputPortIds = new Set(graph.edges.map((edge) => edge.targetPort).filter(isString));
   const required = new Set<string>();
diff --git a/frontend/src/ModelNode.tsx b/frontend/src/ModelNode.tsx
index 6c5afbc0..b18058b8 100644
--- a/frontend/src/ModelNode.tsx
+++ b/frontend/src/ModelNode.tsx
@@ -1,5 +1,5 @@
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
-import { Clock3, GitBranch, Layers3, Link2, PhoneCall, Plus } from "lucide-react";
+import { Clock3, GitBranch, Layers3, Link2, PhoneCall, Plus, Trash2 } from "lucide-react";
 import type { GraphPort, RuntimeGraphNodeData } from "./types";
 import { nodeWidth } from "./nodeSizing";
 
@@ -17,6 +17,20 @@ export function ModelNode({ data, selected }: NodeProps<ModelFlowNode>) {
     >
       <Handle className="call-handle call-target" id={`${data.id}:call-target`} type="target" position={Position.Left} />
       <Handle className="call-handle call-source" id={`${data.id}:call-source`} type="source" position={Position.Right} />
+      {selected && data.onRemoveModel && (
+        <button
+          className="model-remove-button nodrag nopan"
+          type="button"
+          title={data.role === "hard_dependency" ? `Remove owning model for ${data.process}` : `Remove ${data.process}`}
+          aria-label={data.role === "hard_dependency" ? `Remove owning model for ${data.process}` : `Remove ${data.process}`}
+          onClick={(event) => {
+            event.stopPropagation();
+            data.onRemoveModel?.(data);
+          }}
+        >
+          <Trash2 size={14} />
+        </button>
+      )}
       <header className="node-header">
         <div>
           <div className="process">{data.process}</div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index cb48b20d..892034de 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -577,6 +577,7 @@ h1 {
 }
 
 .model-node {
+  position: relative;
   overflow: visible;
   background: rgba(255, 250, 242, 0.96);
   border: 1px solid var(--line);
@@ -584,6 +585,30 @@ h1 {
   box-shadow: 0 18px 42px var(--shadow);
 }
 
+.model-remove-button {
+  position: absolute;
+  z-index: 45;
+  top: -11px;
+  right: -11px;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid rgba(191, 106, 84, 0.4);
+  border-radius: 999px;
+  color: #fff;
+  background: var(--clay);
+  box-shadow: 0 10px 24px rgba(191, 106, 84, 0.24);
+  cursor: pointer;
+}
+
+.model-remove-button:hover,
+.model-remove-button:focus-visible {
+  outline: none;
+  background: #9b3f2e;
+  transform: translateY(-1px);
+}
+
 .node-header {
   border-radius: 16px 16px 0 0;
 }
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 54afbd96..6d55d632 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -36,6 +36,7 @@ export type RuntimeGraphNodeData = GraphNodeData & {
   onPortEnter?: (port: GraphPort) => void;
   onPortLeave?: (port: GraphPort) => void;
   onCandidateClick?: (port: GraphPort, anchor: { x: number; y: number }) => void;
+  onRemoveModel?: (node: GraphNodeData) => void;
 };
 
 export type GraphEdgeData = {