From 28081d46947ce7f5c6b0150a9843e7aea7346b02 Mon Sep 17 00:00:00 2001
From: Andy Bunce <bunce.andy@gmail.com>
Date: Sun, 4 Jan 2026 22:38:09 +0000
Subject: [PATCH] [mod] wa though out

---
 webapp/static/clients/codemirror/index.html   | 328 +++++++++++
 webapp/static/clients/codemirror/script.js    |  13 +-
 webapp/static/clients/codemirror/wa-setup.js  |  10 +-
 webapp/static/clients/codemirror/wa.css       |   4 +
 webapp/static/clients/codemirror/wa.html      |  44 +-
 webapp/static/clients/codemirror/wa2.css      | 549 ++++++++++++++----
 webapp/static/clients/codemirror/wa2.html     |  35 --
 .../static/clients/codemirror/wc-qd-list.js   |  16 +-
 .../codicon@0.0.40/icons/record-keys.svg      |   2 +-
 9 files changed, 803 insertions(+), 198 deletions(-)
 create mode 100644 webapp/static/clients/codemirror/index.html
 delete mode 100644 webapp/static/clients/codemirror/wa2.html
diff --git a/webapp/static/clients/codemirror/index.html b/webapp/static/clients/codemirror/index.html
new file mode 100644
index 0000000..69e54ac
--- /dev/null
+++ b/webapp/static/clients/codemirror/index.html
@@ -0,0 +1,328 @@
+<!doctype html>
+<html lang="en" class="wa-cloak wa-brand-blue wa-dark">
+<!--  also quiet-dark -->
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>awesome test</title>
+
+  <link rel="stylesheet" href="../../webawesome/dist-cdn/styles/webawesome.css" />
+  <link rel="icon" type="image/png" href="../favicon.png" />
+
+  <script type="module" src="wa-setup.js"></script>
+  <link rel="stylesheet" href="wa2.css" />
+</head>
+
+<body>
+  <header class="header">
+    <wa-dropdown>
+      <wa-button slot="trigger" with-caret appearance="plain" variant="neutral">File</wa-button>
+      <wa-dropdown-item id="bnNew">
+        <wa-icon slot="icon" library="tabler" name="file"></wa-icon>New...
+        <div slot="details">empty document</div>
+      </wa-dropdown-item>
+
+      <wa-dropdown-item id="bnRead">
+        <wa-icon slot="icon" library="tabler" name="folder-open"></wa-icon>Open...
+        <div slot="details">a local file</div>
+      </wa-dropdown-item>
+      <input type="file" id="fileElem" multiple accept="*/*" style="display: none;" />
+
+      <wa-dropdown-item id="popover__url">
+        <wa-icon slot="icon" library="tabler" name="link"></wa-icon>Fetch...
+        <div slot="details">a url from the internet</div>
+      </wa-dropdown-item>
+    </wa-dropdown>
+
+    <div>
+      <span class="h4">XQuery 4.0 LSP client</span>
+
+      <wa-button id="bConnect" variant="danger">
+        <wa-icon library="tabler" name="network-off"></wa-icon>
+      </wa-button>
+      <wa-tooltip id="tipConnect" for="bConnect">Not connected</wa-tooltip>
+    </div>
+
+
+    <wa-button-group style="margin-right: 0.2rem;">
+      <wa-dropdown>
+        <wa-button slot="trigger" with-caret appearance="plain" variant="neutral">Dev tools</wa-button>
+        <wa-dropdown-item>
+          <wa-icon slot="icon" library="tabler" name="external-link"></wa-icon>
+          <a href="/app/home" target="lsp" rel="noreferrer noopener">LSP Manager</a>
+        </wa-dropdown-item>
+        <wa-dropdown-item>
+          <wa-icon slot="icon" library="tabler" name="external-link"></wa-icon>
+          <a href="/dba/logs" target="dba" rel="noreferrer noopener">Dba</a>
+        </wa-dropdown-item>
+        <wa-divider></wa-divider>
+      </wa-dropdown>
+      <wa-button popovertarget="popAbout" appearance="plain" variant="neutral">
+        <wa-icon library="tabler" name="help" label="Home"></wa-icon>
+      </wa-button>
+    </wa-button-group>
+  </header>
+
+  <main class="main-content">
+    <!-- Left Column - Details Panels Only (1/4 width) -->
+    <div class="left-column">
+      <div class="left-column-header">EXPLORER</div>
+      <div class="details-container">
+        <div class="details-wrapper">
+          
+         
+
+          <details id="symPanel" open>
+            <summary>OUTLINE
+              <!-- <wa-dropdown id="symOptions" style="display:inline-block;float:right;">
+                <wa-icon id="symTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
+                <wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
+
+                <wa-divider></wa-divider>
+                <wa-dropdown-item type="checkbox" value="position" checked>sort by:
+                  Position</wa-dropdown-item>
+                <wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
+                <wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
+              </wa-dropdown> -->
+            </summary>
+            <qd-list id="symList" style="flex-grow:1;"></qd-list>
+          </details>
+ 
+           <wa-details id="workspacePanel" open="open" icon-placement="start">
+            <div slot="summary">
+              WORKSPACE
+              <wa-dropdown id="workspaceOptions" style="display:inline-block;float:right;">
+                <wa-icon id="workspaceTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
+                <wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
+
+                <wa-divider></wa-divider>
+                <wa-dropdown-item type="checkbox" value="position" checked>sort by:
+                  Position</wa-dropdown-item>
+                <wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
+                <wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
+              </wa-dropdown>
+            </div>
+            <div style="overflow: scroll;">
+              <wa-tree id="workspace" selection="single">
+                <wa-tree-item>file:///some/file.xqm</wa-tree-item>
+              </wa-tree>
+            </div>
+          </wa-details>
+
+          <details id="msgPanel">
+            <summary>MESSAGES
+              <i id="msgIcon" class='codicon codicon-kebab-vertical' style="float:right"></i>
+            </summary>
+            <qd-list id="msgList" style="flex-grow:1;"></qd-list>
+          </details>
+
+
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Column - Controls and Information (3/4 width) -->
+    <div class="right-column">
+      <div class="right-column-header">
+        <div class="wa-split " style="font-size: 24px;">
+
+          <wa-button-group>
+            <wa-button id="search" title="Search" icon-label="search">
+              <wa-icon name="search"></wa-icon>
+            </wa-button>
+
+            <wa-button id="lint" title="Display diagnostics" icon-label="diagnostics">
+              <wa-icon library="tabler" name="message-report"></wa-icon>
+            </wa-button>
+
+            <wa-button id="symbols2" title="symbols" icon-label="Symbols">
+              <wa-icon library="tabler" name="icons"></wa-icon>
+            </wa-button>
+
+            <wa-button id="format" type="button" title="Format (Shift-Alt-f)" icon-label="Format">
+              <wa-icon library="tabler" name="align-justified"></wa-icon>
+            </wa-button>
+
+          </wa-button-group>
+
+          <wa-button-group>
+            <wa-button id="sync" title="Sync changes to server">
+              <wa-icon library="codicon" name="sync"></wa-icon>
+            </wa-button>
+
+            <wa-button id="cmdList" title="Command and key mapping help">
+              <wa-icon library="codicon" name="record-keys"></wa-icon>
+            </wa-button>
+
+            <wa-button id="popover__settings" title="Settings">
+              <wa-icon library="codicon" name="settings"></wa-icon>
+            </wa-button>
+
+            <wa-button id="fullscreen" title="Full screen editor">
+              <wa-icon library="codicon" name="screen-full"></wa-icon>
+            </wa-button>
+
+            <wa-button id="bnSave" title="save view">
+              <wa-icon library="codicon" name="git-stash"></wa-icon>
+            </wa-button>
+
+            <wa-button id="bnLoad" title="load view">
+              <wa-icon library="codicon" name="git-stash-pop"></wa-icon>
+            </wa-button>
+
+            <wa-button id="bnWordAt" type="wa-button" title="word at">
+              <wa-icon library="codicon" name="whole-word"></wa-icon>
+            </wa-button>
+
+            <wa-button id="bnDebug" title="Debug " icon-label="debug">
+              <wa-icon library="codicon" name="debug"></wa-icon>
+            </wa-button>
+          </wa-button-group>
+
+          <div></div>
+        </div>
+      </div>
+      <div class="right-column-content">
+        <!-- Editor goes in here -->
+        <div id="editor"></div>
+      </div>
+    </div>
+  </main>
+
+  <footer class="footer">
+
+
+    <div>
+      <label for="iFile">File:</label>
+      <input id="iFile" type="url" value="file:///some/file.xqm" style="width:20em;display:inline-block;" />
+
+      <label for="symbols">Symbols:</label>
+      <select id="symbols" disabled="disabled" style="width:10em;display:inline-block;"></select>
+    </div>
+
+    <wa-relative-time live id="relative-time__live" sync second="numeric" format='short'
+      style="width:10em;"></wa-relative-time>
+    <select id="language" style="width:10em;display:inline-block;">
+      <option selected>Language</option>
+      <option value="plaintext">plaintext</option>
+      <option value="xquery">xquery</option>
+      <option value="xml">xml</option>
+    </select>
+
+  </footer>
+  <!-- dialogs -->
+  <wa-popover id="popWeb" for="popover__url">
+    <div style="display:flex;background: #ffecb3;">
+      <div style="flex: 1 1 auto;">Load a document from the web</div>
+      <wa-button icon-label="Close" appearance="text" data-popover="close">
+        <wa-icon name="circle-xmark" library="system"></wa-icon>
+      </wa-button>
+    </div>
+
+    <form id="popUrl">
+      <input type="url" name="url" label="URL to fetch" placeholder="http://..." with-clear required
+        style="width: 20em;">
+
+      </input>
+      <wa-button type="submit" variant="primary">Fetch</wa-button>
+      <hr />
+      <wa-tree id="samples" selection="leaf">
+        <wa-tree-item>
+          XQuery 3.1
+          <wa-tree-item
+            data-href="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm">Pdfbox3.xqm
+            (expkg-zone58/pdfbox)</wa-tree-item>
+          <wa-tree-item
+            data-href="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
+            model.xqm (Quodatum/xqdoca)</wa-tree-item>
+          <wa-tree-item>Item X</wa-tree-item>
+        </wa-tree-item>
+        <wa-tree-item>
+          XQuery 4
+          <wa-tree-item>Item B</wa-tree-item>
+          <wa-tree-item>Item C</wa-tree-item>
+        </wa-tree-item>
+        <wa-tree-item>Item 2</wa-tree-item>
+        <wa-tree-item>Item 3</wa-tree-item>
+      </wa-tree>
+
+
+    </form>
+
+  </wa-popover>
+  <!-- Popovers -->
+  <dialog id="popConnect" popover>
+    <form>
+      <header>Connect to LSP
+        <button type="button" class="btn-close" aria-label="Close" onclick="$('popConnect').hidePopover(); "></button>
+      </header>
+      <div class="modal-body">
+        <div id="state">🔴</div>
+        <input id="iServer" type="text" style="width:25em" />
+      </div>
+      <div class="modal-footer">
+        <button id="connect">connect</button>
+      </div>
+    </form>
+  </dialog>
+
+  <dialog id="popCmds" popover>
+    <form>
+      <header>Commands and keys
+        <button type="button" class="btn-close" aria-label="Close" onclick="$('popCmds').hidePopover(); "></button>
+      </header>
+      <div id="popHelpInfo" class="modal-body" style="height: 50vh;overflow:scroll;">
+
+      </div>
+      <div class="modal-footer">
+
+      </div>
+    </form>
+  </dialog>
+  <dialog id="popAbout" popover>
+    <form>
+      <header>Help</header>
+      <div class="modal-body" style="height: 50vh;overflow:scroll;">
+        <p>TODO help info</p>
+      </div>
+      <div class="modal-footer">
+
+      </div>
+    </form>
+  </dialog>
+  <!--  <popup-info id="popHelp">hhhh</popup-info> -->
+
+  <wa-popover for="popover__settings">
+    <form id="fSettings">
+      <header>Editor configuration
+        <button type="button" class="btn-close" aria-label="Close" onclick="$('popSettings').hidePopover(); "></button>
+      </header>
+      <div class="modal-body">
+
+        <div class="mb-3 form-check">
+          <input name="wrapLines" type="checkbox" class="form-check-input" id="lineWrap">
+          <label class="form-check-label" for="lineWrap">Wrap lines</label>
+        </div>
+        <div class="mb-3 form-check">
+          <input name="highlightWhitespace" type="checkbox" class="form-check-input" id="highlightWhitespace">
+          <label class="form-check-label" for="highlightWhitespace">highlight Whitespace</label>
+        </div>
+        <div class="mb-3 form-check">
+          <input name="minimap" type="checkbox" class="form-check-input" id="minimap">
+          <label class="form-check-label" for="minimap">Show minimap</label>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="btn btn-primary">Apply</button>
+      </div>
+    </form>
+  </wa-popover>
+  <!-- CodeMirror 6 -->
+  <script src="./lsp.bundle.js"></script>
+  <script src="./script.js"></script>
+  <script src="./wc-qd-list.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js
index d0e562d..091fce2 100644
--- a/webapp/static/clients/codemirror/script.js
+++ b/webapp/static/clients/codemirror/script.js
@@ -40,8 +40,8 @@ window.addEventListener('beforeunload', () => {
 
 $("connect").onclick = e => { e.preventDefault(); connect() };
 
-$("symTrigger").onclick = e => { e.preventDefault(); };
-$("symOptions").onclick = e => { e.preventDefault(); };
+//$("symTrigger").onclick = e => { e.preventDefault(); };
+//$("symOptions").onclick = e => { e.preventDefault(); };
 $("bnNew").onclick = e => {
     let name = prompt("New file name?", "untitled.xq");
     if (name === null) return;
@@ -137,15 +137,14 @@ $("bConnect").addEventListener('click', e => {
     e.preventDefault();
     $("popConnect").showPopover()
 });
-$("msgIcon").onclick = e => {
-    e.preventDefault();
-    alert("NOT YET")
-};
+
 $("samples").addEventListener('wa-selection-change', e => {
     const sel = e.detail.selection;
     const href = sel[0].getAttribute("data-href")
     if (!href) return;
-    $("popUrl").querySelector('wa-input[name="url"]').value = href;
+    const input=$("popUrl").querySelector('input[name="url"]');
+    input.value = href;
+    //input.setCustomValidity('');
 });
 
 function updateSettings(event) {
diff --git a/webapp/static/clients/codemirror/wa-setup.js b/webapp/static/clients/codemirror/wa-setup.js
index 213d4d9..56d6929 100644
--- a/webapp/static/clients/codemirror/wa-setup.js
+++ b/webapp/static/clients/codemirror/wa-setup.js
@@ -16,19 +16,11 @@ import '../../webawesome/dist-cdn/components/tree/tree.js';
 setBasePath('/static/webawesome/dist-cdn');
 
 registerIconLibrary('tabler', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@3.36.0/icons/outline/${name}.svg`,
-    mutator: svg => {
-        svg.style.fill = 'none';
-        svg.setAttribute('stroke', 'currentColor');
-    }
+    resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@3.36.0/icons/outline/${name}.svg`
 });
 registerIconLibrary('codicon', {
     resolver: (name, family) => {
         return `/static/clients/codicon@0.0.40/icons/${name}.svg`
-    },
-    mutator: svg => {
-        svg.style.fill = 'none';
-        svg.setAttribute('stroke', 'currentColor');
     }
 });
 
diff --git a/webapp/static/clients/codemirror/wa.css b/webapp/static/clients/codemirror/wa.css
index e7bd595..069e68d 100644
--- a/webapp/static/clients/codemirror/wa.css
+++ b/webapp/static/clients/codemirror/wa.css
@@ -12,6 +12,10 @@
   --wa-color-surface-lowered: var(--wa-color-neutral-80);
 }
 
+wa-details::part(base) {
+  overflow: scroll;
+}
+
 wa-button-group>wa-button::part(base) {
   background-color: var(--wa-color-neutral-95);
   border: 1px solid var(--wa-color-border-quiet);
diff --git a/webapp/static/clients/codemirror/wa.html b/webapp/static/clients/codemirror/wa.html
index 6a577e4..b6e1d42 100644
--- a/webapp/static/clients/codemirror/wa.html
+++ b/webapp/static/clients/codemirror/wa.html
@@ -37,7 +37,7 @@
 
             <div>
                 <span class="h4">XQuery 4.0 LSP client</span>
-                
+
                 <wa-button id="bConnect" variant="danger">
                     <wa-icon library="tabler" name="network-off"></wa-icon>
                 </wa-button>
@@ -45,7 +45,7 @@
             </div>
 
 
-            <wa-button-group style="margin-right: 0.2rem;" >
+            <wa-button-group style="margin-right: 0.2rem;">
                 <wa-dropdown>
                     <wa-button slot="trigger" with-caret appearance="plain" variant="neutral">Dev tools</wa-button>
                     <wa-dropdown-item>
@@ -130,20 +130,29 @@
 
         <aside class="page-sidebar">
 
-            <details id="workspacePanel" open="open">
-                <summary class='bg-info'>WORKSPACE
-                    <wa-icon library="codicon" name="kebab-vertical" style="float:right"></wa-icon>
-                </summary>
+            <wa-details id="workspacePanel" open="open" icon-placement="start">
+                <div slot="summary">
+                    WORKSPACE
+                    <wa-dropdown id="workspaceOptions" style="display:inline-block;float:right;">
+                        <wa-icon id="workspaceTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
+                        <wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
+
+                        <wa-divider></wa-divider>
+                        <wa-dropdown-item type="checkbox" value="position" checked>sort by:
+                            Position</wa-dropdown-item>
+                        <wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
+                        <wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
+                    </wa-dropdown>
+                </div>
                 <div style="overflow: scroll;">
                     <wa-tree id="workspace" selection="single">
                         <wa-tree-item>file:///some/file.xqm</wa-tree-item>
                     </wa-tree>
                 </div>
+            </wa-details>
 
-            </details>
-
-            <details id="symPanel">
-                <summary>OUTLINE
+            <wa-details id="symPanel" icon-placement="start">
+                <div slot="summary">OUTLINE
                     <wa-dropdown id="symOptions" style="display:inline-block;float:right;">
                         <wa-icon id="symTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
                         <wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
@@ -154,9 +163,11 @@
                         <wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
                         <wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
                     </wa-dropdown>
-                </summary>
-                <qd-list id="symList" style="flex-grow:1;"></qd-list>
-            </details>
+                </div>
+               
+                <qd-list id="symList" style="height: 10em;overflow: scroll;"></qd-list>
+               
+            </wa-details>
 
             <details id="msgPanel">
                 <summary>MESSAGES
@@ -164,6 +175,8 @@
                 </summary>
                 <qd-list id="msgList" style="flex-grow:1;"></qd-list>
             </details>
+
+
         </aside>
 
         <footer class="page-footer">
@@ -247,12 +260,7 @@
         </form>
 
     </wa-popover>
-
-
-
-
     <!-- Popovers -->
-
     <dialog id="popConnect" popover>
         <form>
             <header>Connect to LSP
diff --git a/webapp/static/clients/codemirror/wa2.css b/webapp/static/clients/codemirror/wa2.css
index 73863db..d062c67 100644
--- a/webapp/static/clients/codemirror/wa2.css
+++ b/webapp/static/clients/codemirror/wa2.css
@@ -1,3 +1,11 @@
+/* WA customizations for codemirror6 client */
+:root {
+  color-scheme: light dark;
+  --wa-focus-ring-offset: 0	/* 0.0625rem */;
+  --wa-focus-ring-style: dotted;
+  --wa-focus-ring-width: 3px;
+}
+
 :root,
 .wa-light,
 .wa-dark .wa-invert {
@@ -6,154 +14,459 @@
   --wa-color-surface-lowered: var(--wa-color-neutral-80);
 }
 
-wa-button-group>wa-button::part(base) {
-  background-color: var(--wa-color-neutral-95);
-  border: 1px solid var(--wa-color-border-quiet);
-  color: var(--wa-color-on-quiet);
-}
-wa-button-group>wa-button::part(base):hover {
-    transform: scale(1.05);
-    background-color: var(--wa-color-neutral-80);
-}
-.wrapper{
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.header{
-  background-color: orange;
-  height: 100px;
-}
-.middle{
-  display: flex;
-  flex: 1;
-}
-.left-panel{
-  background-color: lightgreen;
-  width: 100px;
-}
-.body-content{
-  background-color: pink;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-}
-.right-panel{
-  background-color: skyblue;
-  width: 100px;
-}
-.footer{
-  background-color: grey;
-  height: 100px;
-}
-/***********************
- codemirror6 search panel tweaks to show close  
- **********************/
-.cm-panel.cm-search [name="close"] {
-  color: black
-}
-.cm-panel.cm-panel-lint [name="close"] {
-  color: black
-}
-.cm-panel.cm-search [name="search"] {
-  width:98%;
-}
-
-form header {
-  background-color: burlywood;
-}
 html,
 body {
-  min-height: 100%;
   height: 100%;
-  padding: 0;
-  margin: 0;
+  overflow: hidden;
+  /* Prevent page scrolling */
 }
 
-.page-wrap {
-  background: white;
-  height: 100%;
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #333;
+  background:  #f5f7fa;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* Header styling */
+.header {
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+
+
+/* Main content area - fills available space */
+.main-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
+  gap: 15px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Left Column styling - Details Panels Only (1/4 width) */
+.left-column {
+  flex: 1;
+  /* Takes 1 part */
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  min-width: 0;
+  /* Prevents flex item from overflowing */
+}
+
+.left-column-header {
+  background-color: #3498db;
+  color: white;
+  padding: 15px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  flex-shrink: 0;
+  border-bottom: 1px solid #2980b9;
+}
+
+/* Details container - fills column height */
+.details-container {
+  flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
+/* Details wrapper with scroll */
+.details-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+}
+
+/* Right Column styling - Controls and Information (3/4 width) */
+.right-column {
+  flex: 3;
+  /* Takes 3 parts (3/4 of width) */
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  min-width: 0;
+  /* Prevents flex item from overflowing */
+}
+
+.right-column-header {
+
+  padding: 2px;
+
+  flex-shrink: 0;
+  border-bottom: 1px solid #34495e;
+}
+
+/* Right column content area */
+.right-column-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 0;
+}
+
+/* Custom scrollbar styling */
+.details-wrapper::-webkit-scrollbar,
+.right-column-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.details-wrapper::-webkit-scrollbar-track,
+.right-column-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.details-wrapper::-webkit-scrollbar-thumb,
+.right-column-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.details-wrapper::-webkit-scrollbar-thumb:hover,
+.right-column-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Individual details element styling */
+details {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-bottom: 12px;
+  overflow: hidden;
+  background-color: #f9f9f9;
+  transition: all 0.3s ease;
+}
+
+details:last-child {
+  margin-bottom: 0;
+}
+
 details[open] {
-  flex-grow: 1;
-  overflow: hidden;
+  border-color: #3498db;
+  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
 }
 
+details:focus-within {
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.5);
+}
+
+/* Summary styling */
 summary {
-  background-color: var(--quiet-neutral-fill-softer);
-}
-
-/* Set editor dimensions */
-#editor {
-  max-width: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  
-}
-
-/* Stretch editor to fit inside its containing div */
-.cm-editor {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-
-details[open]::details-content {
-  padding: 0.1em;
-  border: thin solid grey;
-  overflow: auto;
-}
-
-::backdrop {
-  backdrop-filter: blur(2px);
-}
-
-
-#tConnect:state(unchecked) {
-  outline: dashed 4px deeppink;
-  outline-offset: 4px;
-}
-
-.page-header {
-  grid-column: 1 / -1;
+  padding: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  background-color: #f1f8ff;
+  user-select: none;
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.2s;
+  outline: none;
 }
 
-.page-sidebar {
-  grid-column: 1 / 2;
-  grid-row: 2 / 4;
+summary:hover,
+summary:focus {
+  background-color: #e8f4fc;
+  outline: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary-content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+}
+
+.summary-title {
+  font-size: 1rem;
+  color: #2c3e50;
+}
+
+/***********************
+     codemirror6 search panel tweaks to show close  
+    **********************/
+
+.cm-panel.cm-search [name="close"] {
+  color: black
+}
+
+.cm-panel.cm-panel-lint [name="close"] {
+  color: black
+}
+
+.cm-panel.cm-search button {
+  margin: 0;
+}
+
+.cm-panel.cm-search [name="search"] {
+  width: 98%;
+}
+
+.item-count {
+  background-color: #3498db;
+  color: white;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: normal;
+  min-width: 60px;
+  text-align: center;
+}
+
+/* Content area of details */
+.details-content {
+  padding: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: white;
+}
+
+/* List styling */
+.details-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.details-list li {
+  padding: 12px 15px;
+  border-bottom: 1px solid #eee;
+  transition: background-color 0.2s;
+}
+
+.details-list li:hover {
+  background-color: #f8f9fa;
+}
+
+.details-list li:focus {
+  background-color: #e8f4fc;
+  outline: 2px solid #3498db;
+  outline-offset: -2px;
+}
+
+.details-list li:last-child {
+  border-bottom: none;
+}
+
+.empty-list {
+  padding: 15px;
+  text-align: center;
+  color: #7f8c8d;
+  font-style: italic;
+}
+
+/* Right Column Sections */
+.section {
+  margin-bottom: 20px;
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.section h3 {
+  color: #2c3e50;
+  margin-bottom: 12px;
+  padding-bottom: 6px;
+  border-bottom: 2px solid #f1f1f1;
+  font-size: 1.05rem;
+}
+
+/* Panel Controls Section - At the top */
+.controls-section {
+  background-color: #f8f9fa;
+  padding: 20px;
+  border-radius: 6px;
+  border-left: 4px solid #2ecc71;
+  margin-bottom: 20px;
+  order: -1;
+  /* This moves it to the top */
+}
+
+.controls {
   display: flex;
   flex-direction: column;
-
-  details {
-    display: flex;
-    flex-direction: column;
-
-  }
+  gap: 10px;
 }
 
-.page-nav {
-  grid-column: 2 / 3;
-  background: red;
 
+
+
+
+button#remove-item {
+  background-color: #e74c3c;
 }
 
-.page-main {
-  grid-column: 2 / 3;
+button#remove-item:before {
+  content: "-";
+}
+
+button#remove-item:hover,
+button#remove-item:focus {
+  background-color: #c0392b;
+}
+
+button#clear-all {
+  background-color: #f39c12;
+}
+
+button#clear-all:before {
+  content: "×";
+}
+
+button#clear-all:hover,
+button#clear-all:focus {
+  background-color: #d68910;
+}
+
+/* About Section */
+.about-section {
+  background-color: #f8f9fa;
+  padding: 20px;
+  border-radius: 6px;
+  border-left: 4px solid #3498db;
+}
+
+.about-section p {
+  margin-bottom: 10px;
+  font-size: 0.95rem;
+}
+
+.about-section p:last-child {
+  margin-bottom: 0;
+}
+
+/* Keyboard Help Section */
+.keyboard-help-section {
+  background-color: #f8f9fa;
+  padding: 20px;
+  border-radius: 6px;
+  border-left: 4px solid #9b59b6;
+}
+
+.keyboard-help {
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }
 
-.page-footer {
-  grid-column: 1 / -1;
-  background: #ffecb3;
+.keyboard-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+}
+
+kbd {
+  background-color: #2c3e50;
+  color: white;
+  padding: 3px 7px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.85rem;
+  min-width: 35px;
+  text-align: center;
+  display: inline-block;
+}
+
+.keyboard-description {
+  flex: 1;
+  font-size: 0.9rem;
+}
+
+/* Status indicator */
+.status-indicator {
+  background-color: #f1f8ff;
+  padding: 10px 12px;
+  border-radius: 4px;
+  margin-top: 15px;
+  font-size: 0.85rem;
+  border-left: 4px solid #3498db;
+}
+
+/* Footer - always at bottom */
+.footer {
+  flex-shrink: 0;
+  font-size: 0.85rem;
   display: flex;
   justify-content: space-between;
   padding: 2px;
 }
+
+/* Focus styles for accessibility */
+summary:focus,
+li:focus {
+  outline: 2px solid #3498db;
+  outline-offset: 2px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+  .main-content {
+    flex-direction: column;
+    padding: 12px;
+  }
+
+  .left-column,
+  .right-column {
+    min-height: 300px;
+  }
+
+  .left-column {
+    flex: 1;
+  }
+
+  .right-column {
+    flex: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .header h1 {
+    font-size: 1.4rem;
+  }
+
+  .header p {
+    font-size: 0.85rem;
+  }
+
+  .controls {
+    flex-direction: column;
+  }
+
+  button {
+    width: 100%;
+  }
+}
+
+/* Small screens: Adjust layout ratio */
+@media (min-width: 1025px) and (max-width: 1200px) {
+  .left-column {
+    flex: 1;
+  }
+
+  .right-column {
+    flex: 2.5;
+  }
+}
\ No newline at end of file
diff --git a/webapp/static/clients/codemirror/wa2.html b/webapp/static/clients/codemirror/wa2.html
deleted file mode 100644
index 70f5511..0000000
--- a/webapp/static/clients/codemirror/wa2.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en" class="wa-cloak wa-theme-default wa-palette-default wa-brand-blue">
-<!--  also quiet-dark -->
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>awesome test</title>
-
-    <link rel="stylesheet" href="../../webawesome/dist-cdn/styles/webawesome.css" />
-    <link rel="icon" type="image/png" href="../favicon.png" />
-
-    <script type="module" src="wa-setup.js"></script>
-    <link rel="stylesheet" href="wa2.css" />
-</head>
-
-<body>
-<section class='wrapper'>
-  <section>
-    <div class='header'>Header</div>
-  </section>
-  <section class='middle'>
-    <div class='left-panel'>LeftPanel</div>
-    <div id="editor" class='body-content'>Body</div>
-    <div class='right-panel'>RightPanel</div>
-  </section>
-  <section>
-    <div class='footer'>Footer</div>
-  </section>
-</section>
- <script src="./lsp.bundle.js"></script>
-    <script src="./script.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/webapp/static/clients/codemirror/wc-qd-list.js b/webapp/static/clients/codemirror/wc-qd-list.js
index d69288d..9fc5acc 100644
--- a/webapp/static/clients/codemirror/wc-qd-list.js
+++ b/webapp/static/clients/codemirror/wc-qd-list.js
@@ -84,11 +84,12 @@ class ListComponent extends HTMLElement {
         this.#data.forEach((item, index) => {
             const listItem = document.createElement('li');
             const icon=this.#iconKinds[item.kind];
-            listItem.setAttribute("tabindex", "0")
+            //listItem.setAttribute("tabindex", "0")
             listItem.setAttribute("data-index", index)
-            listItem.innerHTML = `<i  class='codicon codicon-${icon}' 
-            title='${icon}'></i>
-            <span >${item.name} - ${item.detail}</span>`;
+            listItem.innerHTML = `
+            <span tabindex="0">
+            <wa-icon library="codicon" name="${icon}" ></wa-icon>
+            ${item.name} - ${item.detail}</span>`;
 
             listItem.addEventListener('click', select);
              listItem.addEventListener('keyup', select);
@@ -98,7 +99,6 @@ class ListComponent extends HTMLElement {
         this.#shadow.innerHTML = '';
         const style = document.createElement('style');
         style.textContent = `
-      @import url("../codicon@0.0.40/codicon.css");  
       ul { list-style-type: none; padding:0;margin:0;overflow: auto; 
       background-color: #f8f9fa;font-size: 80%;}
       li { padding: 0 0 0 2px;  cursor: pointer; width:100%; }
@@ -181,13 +181,9 @@ class PanelComponent extends HTMLElement {
         this.#shadow.innerHTML = '';
         const style = document.createElement('style');
         style.textContent = `
-      @import url("../codicon@0.0.40/codicon.css");  
-      ul { list-style-type: none; padding:0;margin:0; 
       background-color: #e3e4e4ff;font-size: 80%;  scrollbar-color: #000077 #bada55;}
-      li { padding: 0 0 0 2px; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; }
-      li:not(.selected) :hover { background-color:  #ccc; }
       .selected {  background-color: #0d6efd;color: #ffff;}
-      i {vertical-align: middle;}
+
     `;
         this.#shadow.appendChild(style);
         this.#shadow.appendChild(list);
diff --git a/webapp/static/clients/codicon@0.0.40/icons/record-keys.svg b/webapp/static/clients/codicon@0.0.40/icons/record-keys.svg
index 63eb5cc..d8faaa2 100644
--- a/webapp/static/clients/codicon@0.0.40/icons/record-keys.svg
+++ b/webapp/static/clients/codicon@0.0.40/icons/record-keys.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 3H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1m0 8H3V4h11zm-3-6h-1v1h1zm-1 2H9v1h1zm2-2h1v1h-1zm1 4h-1v1h1zM6 9h5v1H6zm7-2h-2v1h2zM8 5h1v1H8zm0 2H7v1h1zM4 9h1v1H4zm0-4h1v1H4zm3 0H6v1h1zM4 7h2v1H4z" clip-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M3 10.5C3 10.2239 3.22386 10 3.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H3.5C3.22386 11 3 10.7761 3 10.5ZM3.25 7C3.66421 7 4 6.66421 4 6.25C4 5.83579 3.66421 5.5 3.25 5.5C2.83579 5.5 2.5 5.83579 2.5 6.25C2.5 6.66421 2.83579 7 3.25 7ZM10 6.25C10 6.66421 9.66421 7 9.25 7C8.83579 7 8.5 6.66421 8.5 6.25C8.5 5.83579 8.83579 5.5 9.25 5.5C9.66421 5.5 10 5.83579 10 6.25ZM6.25 7C6.66421 7 7 6.66421 7 6.25C7 5.83579 6.66421 5.5 6.25 5.5C5.83579 5.5 5.5 5.83579 5.5 6.25C5.5 6.66421 5.83579 7 6.25 7ZM13 6.25C13 6.66421 12.6642 7 12.25 7C11.8358 7 11.5 6.66421 11.5 6.25C11.5 5.83579 11.8358 5.5 12.25 5.5C12.6642 5.5 13 5.83579 13 6.25ZM5.25 9C5.66421 9 6 8.66421 6 8.25C6 7.83579 5.66421 7.5 5.25 7.5C4.83579 7.5 4.5 7.83579 4.5 8.25C4.5 8.66421 4.83579 9 5.25 9ZM9 8.25C9 8.66421 8.66421 9 8.25 9C7.83579 9 7.5 8.66421 7.5 8.25C7.5 7.83579 7.83579 7.5 8.25 7.5C8.66421 7.5 9 7.83579 9 8.25ZM11.25 9C11.6642 9 12 8.66421 12 8.25C12 7.83579 11.6642 7.5 11.25 7.5C10.8358 7.5 10.5 7.83579 10.5 8.25C10.5 8.66421 10.8358 9 11.25 9ZM1 4.75C1 3.7835 1.7835 3 2.75 3H13.25C14.2165 3 15 3.7835 15 4.75V11.25C15 12.2165 14.2165 13 13.25 13H2.75C1.7835 13 1 12.2165 1 11.25V4.75ZM2.75 4C2.33579 4 2 4.33579 2 4.75V11.25C2 11.6642 2.33579 12 2.75 12H13.25C13.6642 12 14 11.6642 14 11.25V4.75C14 4.33579 13.6642 4 13.25 4H2.75Z"/></svg>
\ No newline at end of file
