diff --git a/webapp/static/clients/codemirror/grail.html b/webapp/static/clients/codemirror/grail.html
index 0e416a0..4f5324c 100644
--- a/webapp/static/clients/codemirror/grail.html
+++ b/webapp/static/clients/codemirror/grail.html
@@ -168,11 +168,11 @@
 
  <dialog id="popHelp" popover>
         <form>
-            <header>Help
+            <header>Commands and keys
                 <button type="button" class="btn-close"  aria-label="Close"
                  onclick="$('popHelp').hidePopover(); "></button>
             </header>
-            <div id="popHelpInfo" class="modal-body">
+            <div id="popHelpInfo" class="modal-body" style="height: 50vh;overflow:scroll;">
                 TODO
             </div>
             <div class="modal-footer">
diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js
index 1ae99ee..1b21721 100644
--- a/webapp/static/clients/codemirror/script.js
+++ b/webapp/static/clients/codemirror/script.js
@@ -87,14 +87,20 @@ $("symbols2").onclick = e => {
 
 $("cmd").onclick = e => {
     let cmds = lsp.listCommands(view);
-    [...cmds.keys()].forEach(key => {
-        console.log(`${key} ${cmds.get(key).key}`)
+    let result="";
+    [...cmds.keys()].sort().forEach(key => {
+        result+=`<li>${key} ${cmds.get(key).key}</li>`
     });
-
+    $("popHelpInfo").innerHTML=`<ul>${result}</ul>`
+    $("popHelp").showPopover()
+    console.log(result)
 };
 
-$("symList").addEventListener("itemSelected", e => {
-    console.log("SYM itemSelected",e.detail);
+$("symList").addEventListener("itemSelected", e => { 
+    const sel=e.detail.selectionRange;
+    console.log("SYM selection range",sel);
+    const an=17*e.detail.kind
+    view.dispatch({selection: {anchor: an,head:an+34},scrollIntoView:true});
 });
 
 $("lint").onclick = async e => {