web displays system or user defined columns

web/templates/pages/admin/admin/workspace.html

@@ -49,20 +49,34 @@
   </section>
 
   <section class="pane">
-    <div class="pane-title"><h2>Columns</h2><span>{{ page.columns.len() }}</span></div>
+    <div class="pane-title">
+      <h2>Columns</h2>
+      <span>{{ page.user_columns().len() }} user · {{ page.system_columns().len() }} system</span>
+    </div>
     <div class="pane-list">
       {% if page.selected_table.is_none() %}
         <p class="empty">Select a table to inspect its columns.</p>
       {% else if page.columns.is_empty() %}
         <p class="empty">This table has no visible columns.</p>
       {% else %}
-        {% for column in page.columns %}
+        {% for column in page.user_columns() %}
           <div class="column">
             <span>{{ column.name }}</span>
             <code>{{ column.data_type }}</code>
             <small>{{ column.flags()|join(" · ") }}</small>
           </div>
         {% endfor %}
+        {% let system_columns = page.system_columns() %}
+        {% if !system_columns.is_empty() %}
+          <p class="group-label">System columns · hidden from users</p>
+          {% for column in system_columns %}
+            <div class="column system">
+              <span>{{ column.name }}</span>
+              <code>{{ column.data_type }}</code>
+              <small>{{ column.flags()|join(" · ") }}</small>
+            </div>
+          {% endfor %}
+        {% endif %}
       {% endif %}
     </div>
   </section>