From da4025d3384ba0c0e1a1069c8d47adefedded4c8 Mon Sep 17 00:00:00 2001
From: Patrick Buckley <buckleypm@gmail.com>
Date: Tue, 17 Mar 2026 01:07:48 -0700
Subject: [PATCH] =?UTF-8?q?ui:=20skills=20table=20=E2=80=94=20category=20f?=
 =?UTF-8?q?irst,=20risk=20column,=20remove=20variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move category column before name
- Remove variables column (rarely useful in table view)
- Add dedicated RISK column with scan badge, unicode shape indicators
  (checkmark/triangle/diamond/warning), and multi-line tooltip showing
  composite score and flagged axes from scan report
- Risk badge is keyboard-focusable (tabindex=0) with aria-label
- Unscanned skills show em-dash placeholder at 40% opacity
- Balanced grid: 100px 1.5fr 100px 120px
- Risk + category hidden on mobile (<700px)
---
 turnstone/console/static/governance.js | 60 ++++++++++++++++++--------
 turnstone/console/static/index.html    |  4 +-
 turnstone/console/static/style.css     |  4 +-
 3 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/turnstone/console/static/governance.js b/turnstone/console/static/governance.js
index 2896672b..664a6eb3 100644
--- a/turnstone/console/static/governance.js
+++ b/turnstone/console/static/governance.js
@@ -688,13 +688,6 @@ function _renderGovSkills(items) {
   var html = "";
   for (var i = 0; i < items.length; i++) {
     var t = items[i];
-    var vars = "";
-    try {
-      var vlist = JSON.parse(t.variables || "[]");
-      vars = vlist.join(", ");
-    } catch (e) {
-      vars = t.variables;
-    }
     var activationBadge = "";
     var activation = t.activation || "named";
     if (activation === "default") {
@@ -715,7 +708,8 @@ function _renderGovSkills(items) {
         : "";
     var catBadge =
       '<span class="scope-badge">' + escapeHtml(t.category) + "</span>";
-    var scanBadge = "";
+    // Build risk column content with tooltip
+    var riskCell = "";
     if (t.scan_status) {
       var scanClass =
         {
@@ -725,12 +719,45 @@ function _renderGovSkills(items) {
           high: "scope-scan-high",
           critical: "scope-scan-critical",
         }[t.scan_status] || "";
-      scanBadge =
-        ' <span class="scope-badge ' +
+      var scanIcon =
+        {
+          safe: "\u2713 ",
+          low: "",
+          medium: "\u25B2 ",
+          high: "\u25C6 ",
+          critical: "\u26A0 ",
+        }[t.scan_status] || "";
+      var tipParts = [];
+      try {
+        var report = JSON.parse(t.scan_report || "{}");
+        if (report.composite != null) {
+          tipParts.push("Score: " + report.composite.toFixed(2));
+        }
+        var axes = ["content", "supply_chain", "vulnerability", "capability"];
+        for (var ai = 0; ai < axes.length; ai++) {
+          var d = (report.details || {})[axes[ai]] || {};
+          if (d.flags && d.flags.length) {
+            tipParts.push(
+              axes[ai].replace(/_/g, " ") + ": " + d.flags.join(", "),
+            );
+          }
+        }
+      } catch (e) {}
+      var tipText = tipParts.length ? tipParts.join("\n") : t.scan_status;
+      riskCell =
+        '<span class="scope-badge ' +
         scanClass +
-        '">' +
+        '" tabindex="0" role="button" aria-label="Risk: ' +
         escapeHtml(t.scan_status) +
+        (tipParts.length ? ". " + escapeHtml(tipParts.join(". ")) : "") +
+        '" title="' +
+        escapeHtml(tipText) +
+        '">' +
+        escapeHtml(scanIcon + t.scan_status) +
         "</span>";
+    } else {
+      riskCell =
+        '<span class="scope-badge" style="opacity:0.4" title="Not scanned">\u2014</span>';
     }
     var resBadge = "";
     if (t.resource_count > 0) {
@@ -745,13 +772,15 @@ function _renderGovSkills(items) {
     var deleteDisabled = t.readonly ? " disabled" : "";
     html +=
       '<div class="admin-row" role="listitem">' +
+      '<span class="admin-col admin-col-tmcat">' +
+      catBadge +
+      "</span>" +
       '<span class="admin-col admin-col-tmname">' +
       escapeHtml(t.name) +
       " " +
       activationBadge +
       defBadge +
       originBadge +
-      scanBadge +
       resBadge +
       (t.description
         ? '<br><span class="admin-col-subtitle">' +
@@ -759,12 +788,9 @@ function _renderGovSkills(items) {
           "</span>"
         : "") +
       "</span>" +
-      '<span class="admin-col admin-col-tmcat">' +
-      catBadge +
+      '<span class="admin-col admin-col-tmrisk">' +
+      riskCell +
       "</span>" +
-      '<span class="admin-col admin-col-tmvars"><code>' +
-      escapeHtml(vars || "\u2014") +
-      "</code></span>" +
       '<span class="admin-col admin-col-actions">' +
       '<button class="admin-btn-action" data-edit-tmpl="' +
       escapeHtml(t.template_id) +
diff --git a/turnstone/console/static/index.html b/turnstone/console/static/index.html
index 9d5b6da8..1ef54271 100644
--- a/turnstone/console/static/index.html
+++ b/turnstone/console/static/index.html
@@ -272,9 +272,9 @@
       <!-- Installed view -->
       <div id="skill-view-installed" role="tabpanel" aria-labelledby="skill-tab-installed">
         <div class="admin-colheaders" aria-hidden="true">
-          <span class="admin-col admin-col-tmname">NAME</span>
           <span class="admin-col admin-col-tmcat">CATEGORY</span>
-          <span class="admin-col admin-col-tmvars">VARIABLES</span>
+          <span class="admin-col admin-col-tmname">NAME</span>
+          <span class="admin-col admin-col-tmrisk">RISK</span>
           <span class="admin-col admin-col-actions">ACTIONS</span>
         </div>
         <div id="admin-skills-table" role="list" aria-label="Skills" aria-live="polite">
diff --git a/turnstone/console/static/style.css b/turnstone/console/static/style.css
index a1ca67a8..e974d757 100644
--- a/turnstone/console/static/style.css
+++ b/turnstone/console/static/style.css
@@ -1367,7 +1367,7 @@
    ========================================================================== */
 #admin-skills .admin-colheaders,
 #admin-skills .admin-row {
-  grid-template-columns: 1.5fr 100px 1fr 140px;
+  grid-template-columns: 100px 1.5fr 100px 120px;
 }
 /* ==========================================================================
    Governance: Audit grid
@@ -1652,7 +1652,7 @@
   #admin-skills .admin-colheaders, #admin-skills .admin-row {
     grid-template-columns: 1fr 100px;
   }
-  .admin-col-tmcat, .admin-col-tmvars { display: none; }
+  .admin-col-tmcat, .admin-col-tmrisk { display: none; }
   #admin-audit .admin-colheaders, #admin-audit .admin-row {
     grid-template-columns: 60px 1fr 100px;
   }