@denial-web/clawguard 0.1.13 → 0.1.14

package/package.json

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

package/web/app.js

@@ -40,6 +40,10 @@ const elements = {
   installVerdict: document.querySelector("#install-verdict"),
   installMessage: document.querySelector("#install-message"),
   installCommand: document.querySelector("#install-command"),
+  approvalTitle: document.querySelector("#approval-title"),
+  approvalSummary: document.querySelector("#approval-summary"),
+  approvalCommand: document.querySelector("#approval-command"),
+  demoCommand: document.querySelector("#demo-command"),
   actions: document.querySelector("#actions"),
   critical: document.querySelector("#critical-count"),
   high: document.querySelector("#high-count"),
@@ -239,6 +243,7 @@ function renderResult(result) {
   elements.downloadHtml.disabled = false;
 
   renderInstallGate(result);
+  renderApprovalFlow(result);
   renderFindings(scan.findings ?? []);
 }
 
@@ -268,6 +273,50 @@ function renderInstallGate(result) {
   elements.installMessage.textContent = "ClawGuard would require review, sandboxing, or approval before copying files.";
 }
 
+function renderApprovalFlow(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 preset = policy.preset ?? elements.policy.value;
+  const framework = "openclaw";
+
+  elements.demoCommand.textContent = "npx @denial-web/clawguard approvals demo-flow --keep";
+  elements.approvalCommand.textContent = [
+    "npx",
+    "@denial-web/clawguard",
+    framework,
+    "install",
+    target,
+    "--to",
+    "./.agents/skills",
+    "--name",
+    installName,
+    "--policy",
+    preset,
+    "--approval-out",
+    "./.clawguard/approvals.jsonl",
+    "--approval-mode",
+    "always"
+  ].join(" ");
+
+  if (decision === "allow") {
+    elements.approvalTitle.textContent = "Approval can still be required";
+    elements.approvalSummary.textContent = "Even a clean scan can pause before trust when you use approval-mode always. That gives the owner final control over autonomous skill installs.";
+    return;
+  }
+
+  if (decision === "block") {
+    elements.approvalTitle.textContent = "Blocked before trust";
+    elements.approvalSummary.textContent = "A blocked result should not be copied into a trusted skill folder. Send the report to the owner instead of applying the install.";
+    return;
+  }
+
+  elements.approvalTitle.textContent = "Pause and ask the owner";
+  elements.approvalSummary.textContent = "Warn, review, sandbox, and dual-approval decisions create a pending approval request before any files are copied into the trusted skill folder.";
+}
+
 function renderFindings(findings) {
   if (findings.length === 0) {
     elements.findings.className = "findings empty-state";

package/web/index.html

@@ -86,6 +86,28 @@
           </div>
         </section>
 
+        <section class="approval-panel" aria-label="Approval loop demo">
+          <div class="approval-copy">
+            <p class="eyebrow">Approval Loop Demo</p>
+            <h2 id="approval-title">Prove the full guarded install loop</h2>
+            <p id="approval-summary">Create a harmless temporary skill, scan it, write an approval request, record an owner approval, and install only after the decision is applied.</p>
+          </div>
+          <div class="approval-flow" aria-label="Approval flow">
+            <span>install hook</span>
+            <span>policy gate</span>
+            <span>owner approval</span>
+            <span>apply</span>
+          </div>
+          <div class="command-stack">
+            <div class="command-box">
+              <code id="demo-command">npx @denial-web/clawguard approvals demo-flow --keep</code>
+            </div>
+            <div class="command-box">
+              <code id="approval-command">npx @denial-web/clawguard openclaw install ./skill --to ./.agents/skills --approval-out ./.clawguard/approvals.jsonl --approval-mode always</code>
+            </div>
+          </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, .install-panel, .metrics div, .metadata-grid div, .finding-card, .empty-state {
+.score-ring, .decision, .install-panel, .approval-panel, .metrics div, .metadata-grid div, .finding-card, .empty-state {
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--panel);
@@ -339,6 +339,51 @@ input[type="file"] {
   overflow-wrap: anywhere;
 }
 
+.approval-panel {
+  display: grid;
+  grid-template-columns: minmax(220px, 0.9fr) minmax(160px, 0.65fr) minmax(0, 1.25fr);
+  gap: 14px;
+  align-items: stretch;
+  padding: 16px;
+}
+
+.approval-copy h2 {
+  margin-top: 5px;
+  font-size: 22px;
+  text-transform: uppercase;
+}
+
+#approval-summary {
+  margin-top: 6px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.approval-flow {
+  display: grid;
+  gap: 8px;
+}
+
+.approval-flow span {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #edf1ea;
+  color: var(--ink);
+  padding: 7px 10px;
+  font-size: 12px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.command-stack {
+  min-width: 0;
+  display: grid;
+  gap: 10px;
+}
+
 .action-tags {
   display: flex;
   flex-wrap: wrap;
@@ -459,7 +504,7 @@ input[type="file"] {
 }
 
 @media (max-width: 900px) {
-  .workbench, .score-panel, .install-panel {
+  .workbench, .score-panel, .install-panel, .approval-panel {
     grid-template-columns: 1fr;
   }