Improve agents and demo pages: tables, copy button, nav cleanup

- Enable markdown table rendering (tables: true in Redcarpet)
- Add table styles with borders, padding, and hover highlight
- Add click-to-copy button on code blocks with iOS Safari fallback
- Strip trailing newline from copied text
- Remove Demo from navbar; link to /demo from /agents page instead
- Load FontAwesome regular CSS for copy icon

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: inutano

views/_copy_code.haml

@@ -0,0 +1,37 @@
+:javascript
+  document.addEventListener('DOMContentLoaded', function() {
+    function copyText(text) {
+      if (navigator.clipboard && window.isSecureContext) {
+        return navigator.clipboard.writeText(text);
+      }
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      try { document.execCommand('copy'); } catch(e) {}
+      document.body.removeChild(ta);
+      return Promise.resolve();
+    }
+
+    document.querySelectorAll('.publication_list pre').forEach(function(pre) {
+      pre.style.position = 'relative';
+      var btn = document.createElement('button');
+      btn.className = 'copy-btn';
+      btn.title = 'Copy to clipboard';
+      btn.innerHTML = '<i class="far fa-copy"></i>';
+      btn.addEventListener('click', function() {
+        var code = pre.querySelector('code');
+        var text = (code || pre).textContent.replace(/\n$/, '');
+        copyText(text).then(function() {
+          btn.innerHTML = '<i class="fas fa-check"></i>';
+          setTimeout(function() {
+            btn.innerHTML = '<i class="far fa-copy"></i>';
+          }, 1500);
+        });
+      });
+      pre.appendChild(btn);
+    });
+  });

views/_navigation.haml

@@ -45,11 +45,6 @@
             %i.fas.fa-robot
             %span.full-text Agents
             %span.abbrev-text API
-        %li{ :class => (@active_menu == 'demo') ? 'active' : '' }
-          %a{ :href => "#{app_root}/demo" }
-            %i.fas.fa-play-circle
-            %span.full-text Demo
-            %span.abbrev-text Demo
         %li
           %a{ :href => "https://github.com/inutano/chip-atlas/wiki" }
             %i.fab.fa-github

views/agents.haml

@@ -18,6 +18,7 @@
     %link{ :href => "#{app_root}/css/fontawesome.css", :rel => "stylesheet"}
     %link{ :href => "#{app_root}/css/brands.css", :rel => "stylesheet"}
     %link{ :href => "#{app_root}/css/solid.css", :rel => "stylesheet"}
+    %link{ :href => "#{app_root}/css/regular.css", :rel => "stylesheet"}
 
   %body
     - @active_menu = 'agents'
@@ -26,7 +27,7 @@
     .container
       .row
         .col-md-8.col-md-offset-2.publication_list
-          != markdown(:agents, layout: false, fenced_code_blocks: true, autolink: true)
+          != markdown(:agents, layout: false, fenced_code_blocks: true, autolink: true, tables: true)
 
     != haml :footer
 
@@ -36,3 +37,4 @@
     %script{ :src => "#{app_root}/js/jquery.min.js" }
     %script{ :src => "#{app_root}/js/bootstrap.min.js" }
     %script{ :src => "#{app_root}/js/pj/pj.js" }
+    != haml :_copy_code

views/agents.markdown

@@ -2,6 +2,8 @@
 
 ChIP-Atlas is a comprehensive database of public ChIP-seq, ATAC-seq, DNase-seq, and Bisulfite-seq experiments. This page describes how AI agents can query ChIP-Atlas programmatically via the MCP (Model Context Protocol) server or the HTTP API directly.
 
+**New here?** Check out the [hands-on demo tutorial](/demo) for step-by-step scenarios you can try with your preferred LLM.
+
 ---
 
 ## MCP Server

views/demo.haml

@@ -18,6 +18,7 @@
     %link{ :href => "#{app_root}/css/fontawesome.css", :rel => "stylesheet"}
     %link{ :href => "#{app_root}/css/brands.css", :rel => "stylesheet"}
     %link{ :href => "#{app_root}/css/solid.css", :rel => "stylesheet"}
+    %link{ :href => "#{app_root}/css/regular.css", :rel => "stylesheet"}
 
   %body
     - @active_menu = 'demo'
@@ -26,7 +27,7 @@
     .container
       .row
         .col-md-8.col-md-offset-2.publication_list
-          != markdown(:demo, layout: false, fenced_code_blocks: true, autolink: true)
+          != markdown(:demo, layout: false, fenced_code_blocks: true, autolink: true, tables: true)
 
     != haml :footer
 
@@ -36,3 +37,4 @@
     %script{ :src => "#{app_root}/js/jquery.min.js" }
     %script{ :src => "#{app_root}/js/bootstrap.min.js" }
     %script{ :src => "#{app_root}/js/pj/pj.js" }
+    != haml :_copy_code

views/style.sass

@@ -218,11 +218,43 @@ footer
         width: 28vw
         max-width: 150px
 
+// copy button on code blocks
+.copy-btn
+  position: absolute
+  top: 6px
+  right: 6px
+  background: #e8e8e8
+  border: none
+  border-radius: 3px
+  padding: 4px 7px
+  cursor: pointer
+  font-size: 13px
+  color: #555
+  opacity: 0.6
+  transition: opacity 0.15s
+  &:hover
+    background: #d0d0d0
+    color: #333
+    opacity: 1
+
 // publication
 .publication_list
   margin:
     top: .5em
   line-height: 1.5
+  table
+    width: 100%
+    margin-bottom: 1em
+    border-collapse: collapse
+    th, td
+      padding: 8px 12px
+      border: 1px solid #ddd
+      text-align: left
+    th
+      background-color: #f5f5f5
+      font-weight: bold
+    tbody tr:hover
+      background-color: #f9f9f9
 
 // navbar height fix
 .navbar-fixed-top