diff --git a/interp.js b/interp.js
index 6cd4d7be6f9ddbd59131574365b53c122604d645..8d7877c410e67bf7c7922b33e031cbe2b0796a50 100644
--- a/interp.js
+++ b/interp.js
@@ -482,8 +482,6 @@ function jsvalue_of_value(jsheap, v) {
     return jsheap[v.loc];
   case "val_abs":
     return "<closure>";
-    // case "val_constr":
-    // case "val_record":
   default:
     stuck("unrecognized value");
   }
diff --git a/navig.html b/navig.html
index 076f910d7d9f0d07115839b5be9bb9b668237ffb..db160d4171575ea9c98f181ac7a1a74c8c33ced1 100644
--- a/navig.html
+++ b/navig.html
@@ -19,6 +19,10 @@
    border-bottom: 1px solid black;
 }
 
+.heap_link {
+   color: black;
+}
+
 #file_list {
    height: 1em;
    margin-top: 8px;
@@ -90,11 +94,17 @@ Reach condition:
 <div id='file_list'></div>
 
 <div class='source_div'>
-<table id='main_table'>
-<tr>
-<td><textarea id='interpreter_code' class='source' rows='20' cols='60'></textarea></td>
-<td width='600'><div id='infos'>infos here</div>
+<table id='main_table'><tr>
+<td>
+   <textarea id='interpreter_code' class='source' rows='20' cols='60'></textarea>
+</td>
+<td width='600'>
+
+   <div id='disp_infos' style="height:1em">infos here</div>
+   
+   <div id='disp_context'>ctx here</div>
 </td>
+</tr></table>
 </div>
 
 
diff --git a/navig.js b/navig.js
index 1145a518772869c08003d392ea6f696dc8f7efaa..a64ba8c012f771ff54052e598362eb428fa09b01 100644
--- a/navig.js
+++ b/navig.js
@@ -3,7 +3,7 @@ tracer_items = datalog;
 var h = null
 
 var tracer_length = tracer_items.length;
-var tracer_pos = 0; 
+var tracer_pos = 29; 
 
 $("#navigation_total").html(tracer_length);
 
@@ -129,6 +129,52 @@ function updateFileList() {
   $('#file_list').html(s);
 }
 
+function text_of_cst(c) {
+  switch (c.tag) {
+  case "cst_bool":
+    return c.bool + "";
+  case "cst_number":
+    return c.number + "";
+  default:
+    return "unrecognized cst";
+  }
+}
+
+var next_fresh_id = 0;
+
+function fresh_id() {
+  return "fresh_id_" + (next_fresh_id++);
+}
+
+var handlers = [];
+
+function text_of_value(heap, v, target) {
+  switch (v.tag) {
+  case "val_cst":
+    return text_of_cst(v.cst);
+  case "val_loc":
+    handlers[target] = function() {  
+      
+    };
+    return "<span class='heap_link'><a onclick=\"handlers['" + target + "']()\">&lt;Location&gt;(" + v.loc + ")</a></span>";
+  case "val_abs":
+    return "&lt;Closure&gt;";
+  default:
+    return "<pre style='margin:0; padding: 0; margin-left:1em'>" + JSON.stringify(v, null, 2) + "</pre>";
+  }
+}
+
+function updateContext(heap, env) { // env here is the ctx
+  $("#disp_context").html("");
+  // TODO: une fonction de conversion de env vers array
+  while (env.tag === "env_cons") {
+    var target = fresh_id();
+    $("#disp_context").append("<div id='" + target + "'></div>");
+    $("#" + target).html(env.name + ": " + text_of_value(heap, env.val, target));
+    env = env.env;
+  }
+}
+
 function updateSelection() {
   var item = tracer_items[tracer_pos];
   h = jsheap_of_heap(item.heap); // export for client
@@ -140,9 +186,10 @@ function updateSelection() {
   $('.CodeMirror-focused .CodeMirror-selected').css({ background: color });
   if (item.line === undefined)
     alert("missing line in log event");
-  $("#infos").html("type = " + item.type);
+  $("#disp_infos").html("type = " + item.type);
+  updateContext(item.heap, item.ctx);
   $("#navigation_step").val(tracer_pos);
-  console.log(item);
+  // console.log(item);
   var anchor = {line: item.start_line-1 , ch: item.start_col };
   var head = {line: item.end_line-1, ch: item.end_col };
   editor.setSelection(anchor, head);