ui: skills table — category first, risk column, remove variables

- 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)
This commit is contained in:
Patrick Buckley
2026-03-17 01:07:48 -07:00
committed by Patrick Buckley
parent 88085c29ff
commit da4025d338
3 changed files with 47 additions and 21 deletions
+43 -17
View File
@@ -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) +
+2 -2
View File
@@ -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">
+2 -2
View File
@@ -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;
}