@denial-web/clawguard 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@denial-web/clawguard",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Explainable security scanner for OpenClaw-style skills and MCP tool configs.",
   "type": "module",
   "repository": {

package/scripts/capture-demo.js

@@ -89,7 +89,8 @@ async function main() {
     await pause(250);
     await dependencyRisk.click();
     await page.getByRole("heading", { name: "Dependency Risk" }).waitFor();
-    await page.getByText("Block").waitFor();
+    await page.getByRole("heading", { name: "Block", exact: true }).waitFor();
+    await page.getByRole("heading", { name: "Install blocked" }).waitFor();
     await pause(700);
 
     await page.screenshot({

package/web/app.js

@@ -37,6 +37,9 @@ const elements = {
   level: document.querySelector("#level"),
   decision: document.querySelector("#decision"),
   reason: document.querySelector("#reason"),
+  installVerdict: document.querySelector("#install-verdict"),
+  installMessage: document.querySelector("#install-message"),
+  installCommand: document.querySelector("#install-command"),
   actions: document.querySelector("#actions"),
   critical: document.querySelector("#critical-count"),
   high: document.querySelector("#high-count"),
@@ -235,9 +238,36 @@ function renderResult(result) {
   elements.downloadHtml.textContent = "Download HTML";
   elements.downloadHtml.disabled = false;
 
+  renderInstallGate(result);
   renderFindings(scan.findings ?? []);
 }
 
+function renderInstallGate(result) {
+  const scan = result.scan;
+  const policy = scan.policy ?? {};
+  const decision = policy.decision ?? "allow";
+  const target = installTargetFor(result);
+  const installName = safeInstallName(result.displayTarget ?? "skill");
+  const command = `npx @denial-web/clawguard install ${target} --to ./.agents/skills --name ${installName} --policy ${policy.preset ?? elements.policy.value}`;
+
+  elements.installCommand.textContent = command;
+
+  if (decision === "allow") {
+    elements.installVerdict.textContent = "Install allowed";
+    elements.installMessage.textContent = "ClawGuard would copy this skill into the destination after the policy gate passes.";
+    return;
+  }
+
+  if (decision === "block") {
+    elements.installVerdict.textContent = "Install blocked";
+    elements.installMessage.textContent = "ClawGuard would stop before copying files. Review the findings before trusting this skill.";
+    return;
+  }
+
+  elements.installVerdict.textContent = "Install paused";
+  elements.installMessage.textContent = "ClawGuard would require review, sandboxing, or approval before copying files.";
+}
+
 function renderFindings(findings) {
   if (findings.length === 0) {
     elements.findings.className = "findings empty-state";
@@ -342,6 +372,27 @@ function safeFilename(value) {
     .slice(0, 80) || "scan";
 }
 
+function safeInstallName(value) {
+  return String(value || "skill")
+    .toLowerCase()
+    .replace(/[^a-z0-9_.-]/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 60) || "skill";
+}
+
+function installTargetFor(result) {
+  if (result.source === "example" && result.example?.path) {
+    return result.example.path;
+  }
+
+  if (result.source === "folder") {
+    return "./uploaded-skill";
+  }
+
+  return "./pasted-skill";
+}
+
 async function fetchJson(url, options = {}) {
   const response = await fetch(url, {
     headers: {

package/web/index.html

@@ -75,6 +75,17 @@
           </div>
         </section>
 
+        <section class="install-panel" aria-label="Pre-install gate">
+          <div>
+            <p class="eyebrow">Pre-Install Gate</p>
+            <h2 id="install-verdict">Waiting for scan</h2>
+            <p id="install-message">Run a scan to see whether ClawGuard would install, pause, or block before files are trusted.</p>
+          </div>
+          <div class="command-box">
+            <code id="install-command">npx @denial-web/clawguard install ./skill --to ./.agents/skills --policy governed</code>
+          </div>
+        </section>
+
         <section class="metrics" aria-label="Finding summary">
           <div><span>Critical</span><strong id="critical-count">0</strong></div>
           <div><span>High</span><strong id="high-count">0</strong></div>

package/web/styles.css

@@ -264,7 +264,7 @@ input[type="file"] {
   align-items: stretch;
 }
 
-.score-ring, .decision, .metrics div, .metadata-grid div, .finding-card, .empty-state {
+.score-ring, .decision, .install-panel, .metrics div, .metadata-grid div, .finding-card, .empty-state {
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--panel);
@@ -302,6 +302,43 @@ input[type="file"] {
   text-transform: uppercase;
 }
 
+.install-panel {
+  display: grid;
+  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
+  gap: 14px;
+  align-items: stretch;
+  padding: 16px;
+}
+
+.install-panel h2 {
+  margin-top: 5px;
+  font-size: 24px;
+  text-transform: uppercase;
+}
+
+#install-message {
+  margin-top: 6px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.command-box {
+  min-width: 0;
+  display: grid;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--field);
+  padding: 12px;
+}
+
+.command-box code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
 .action-tags {
   display: flex;
   flex-wrap: wrap;
@@ -422,7 +459,7 @@ input[type="file"] {
 }
 
 @media (max-width: 900px) {
-  .workbench, .score-panel {
+  .workbench, .score-panel, .install-panel {
     grid-template-columns: 1fr;
   }