@repobit/dex-system-design 0.24.7 → 0.24.8

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.24.8](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.7...@repobit/dex-system-design@0.24.8) (2026-09-08)
+
+### Bug Fixes
+
+* **DEX-1014:** review component adjustments and AI Bitdefender new component
+
+
 ## [0.24.7](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.6...@repobit/dex-system-design@0.24.7) (2026-09-07)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.7",
+  "version": "0.24.8",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.23",
-    "@repobit/dex-store-elements": "2.0.28",
+    "@repobit/dex-store": "1.6.24",
+    "@repobit/dex-store-elements": "2.0.29",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "fce2975c82772042a3f9164d3bc06df4e99e6898"
+  "gitHead": "bf388f1fa589bd68fb763b66bb7ed9e2e598724c"
 }

package/src/components/ai-guardian-demo.stories.js

@@ -430,14 +430,6 @@ function aiGuardianBody() {
 }
 
 
-
-// ---------------------------------------------------------------------------
-// PATCH pentru ai-guardian-demo.stories.js
-// 1. Adauga importul: import "./install-options/install-options.js";
-//    (prompt-panel.js NU mai e nevoie -- totul e integrat in bd-install-options)
-// 2. Inlocuieste functia skillScannerBody() cu varianta de mai jos.
-// ---------------------------------------------------------------------------
-
 function skillScannerBody() {
   return html`
     <bd-header-code
@@ -668,22 +660,242 @@ function skillScannerBody() {
             </bd-bento-item>
           </bd-bento-grid>
         </div>
+
+        <bd-process-steps
+          title="How a scan works"
+          description='You ask in plain language, "scan the foo skill for security risks", and the skill does the rest. There is no separate command-line tool to learn.'
+          .steps=${[
+            {
+              title      : "1. Resolve",
+              description: "The scanner resolves the target (a directory, an installed skill name, a zip, or a URL) into a skill root."
+            },
+            {
+              title      : "2. Pack & hash",
+              description: "It packs the skill into a normalized archive and computes a skill-level SHA-256, then checks for a cached report before repeating any work."
+            },
+            {
+              title      : "3. Collect & enrich",
+              description: "It walks, hashes and recurses into every file, then runs all 18 indicator extractors and 71 behavioural patterns over the text content."
+            },
+            {
+              title      : "4. Embed",
+              description: "It computes semantic embeddings on your machine, unless you disable them."
+            },
+            {
+              title      : "5. Submit metadata",
+              description: "Hashes, indicators with short matched excerpts, counts, metadata and embeddings go to the backend. In scan mode it sends no full file contents."
+            },
+            {
+              title      : "6. Report",
+              description: "The backend returns a risk level, summary and findings, rendered as Markdown in your session."
+            }
+          ]}
+        ></bd-process-steps>
+
+        <div style="padding: 48px 24px 24px;">
+          <bd-compatibility-table
+            variant="risk"
+            title="What you can point it at"
+            description="The scanner accepts four target types: a directory, an installed skill name, a zip archive, or a URL."
+            .columns=${["Target", "Behaviour"]}
+            .rows=${[
+              { category: "Directory path", coverage: "Scanned directly as the skill root." },
+              { category: "Skill name", coverage: "Resolved via the harness's known skill directories, project- and user-level." },
+              { category: ".zip archive", coverage: "Extracted to a temp directory, then scanned." },
+              { category: "URL", coverage: "Sent to the backend for scanning (scan mode only)." }
+            ]}
+          ></bd-compatibility-table>
+        </div>
+      </section>
+
+      <section id="anchor-5-section">
+        <bd-install-options
+          eyebrow="Trust &amp; transparency"
+          title="What leaves your machine"
+          description="Two modes, both agent-driven. Scan is the default: only hashes, extracted indicators and metadata are transmitted, and full files are never uploaded. Submit is opt-in: the complete skill archive is uploaded for deeper analysis, and only when you explicitly ask for it."
+        >
+          <bd-compatibility-table
+            variant="risk"
+            .columns=${["Mode", "Transmitted"]}
+            .rows=${[
+              {
+                category: "Scan (default)",
+                coverage: "File hashes (SHA-256/MD5), extracted indicators and pattern matches — including short excerpts of matched content (regex fragments ≤100 chars, decoded base64 snippets ≤500 chars) — file metadata, finding counts, SKILL.md frontmatter, dependency metadata, and local embeddings. Full file contents are not transmitted."
+              },
+              {
+                category: "Submit (opt-in)",
+                coverage: "The complete skill archive, uploaded for deep analysis. The agent will not do this unless you explicitly ask."
+              }
+            ]}
+          ></bd-compatibility-table>
+
+          <div style="background: var(--color-neutral-0); border: 1px solid var(--color-neutral-100); border-radius: var(--radius-xl); padding: 24px; box-sizing: border-box; margin-top: 24px;">
+            <bd-h as="h3" style="margin: 0 0 16px;">The contract the agent is held to</bd-h>
+            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px;">
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">Scan mode is the default: a casual request never uploads your files.</bd-p>
+              </li>
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">Submit is opt-in only: the agent won't upload the full archive unless you explicitly ask.</bd-p>
+              </li>
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">The agent relays, it doesn't overrule: it presents the backend's report and never substitutes its own verdict.</bd-p>
+              </li>
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">Errors are surfaced as they are: on failure you get the specific reason.</bd-p>
+              </li>
+              <li style="display: flex; align-items: flex-start; gap: 12px;">
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <bd-p kind="regular" style="margin:0;">Self-updates are Ed25519-signature-verified against a key pinned in the client, staged with path-traversal-safe extraction, and rolled back automatically on failure.</bd-p>
+              </li>
+            </ul>
+          </div>
+
+          <div style="background: var(--color-yellow-50, #fffbeb); border: 1px solid var(--color-yellow-300, #fcd34d); border-radius: var(--radius-md); padding: 16px 20px; color: var(--color-yellow-800, #92400e); margin-top: 24px;">
+            <bd-p kind="small" style="margin:0;">A scan that returns no findings means no known threat patterns were detected — not that the skill is safe.</bd-p>
+          </div>
+        </bd-install-options>
       </section>
 
-      <!--
-        TODO: Privacy / FAQ
-        (anchor-5-section .. anchor-6-section) nu au fost specificate incă
-        — se adaugă când vine conținutul.
-      -->
+      <section id="anchor-6-section" class="faq">
+        <bd-trust-panel
+          eyebrow="Why trust it"
+          title="Built by Bitdefender"
+          description="Agent Skill Scanner is made by Bitdefender, the company that has protected people and organisations since 2001. The figures and recognitions below describe Bitdefender the company — not the scanner itself."
+          link-label="Why millions trust Bitdefender"
+          link-href="#"
+          .stats=${[
+            { value: "50B+", label: "threats blocked every year" },
+            { value: "580+", label: "technology patents" },
+            { value: "170+", label: "countries protected" },
+            { value: "15+", label: "years of AI-driven security" },
+            { value: "50%+", label: "of employees work in R&D" },
+            { value: "30+", label: "law-enforcement partnerships" }
+          ]}
+          .cards=${[
+            {
+              eyebrow    : "Brand partnership",
+              title      : "Trusted by Ferrari as cybersecurity partner",
+              description: "A partnership born from a passion for high performance and technological innovation — Bitdefender supports Ferrari with Advanced Threat Intelligence to improve detection and response to cyber threats.",
+              linkLabel  : "Learn more",
+              linkHref   : "#"
+            },
+            {
+              eyebrow    : "Brand recognition",
+              title      : "Award-winning security software you can trust. Always.",
+              description: "Consistently top-ranked by the world's leading independent testing labs and tech publications.",
+              linkLabel  : "Learn more",
+              linkHref   : "#"
+            }
+          ]}
+        >
+          <span slot="card-1-logos" style="font-weight:700; color:#006DFF; font-size:18px;">Bitdefender</span>
+          <span slot="card-1-logos" style="font-size:12px; color:#374151; font-weight:600;">FERRARI TEAM PARTNER</span>
+
+          <bd-pc-mag-icon slot="card-2-logos" height="32"></bd-pc-mag-icon>
+          <bd-av-comparatives-icon slot="card-2-logos" height="32"></bd-av-comparatives-icon>
+          <bd-top-product-icon slot="card-2-logos" height="32"></bd-top-product-icon>
+          <bd-best-brands-icon slot="card-2-logos" height="32"></bd-best-brands-icon>
+          <bd-laurel-icon slot="card-2-logos" height="32"></bd-laurel-icon>
+        </bd-trust-panel>
+
+        <div style="padding: 24px 24px 48px;">
+          <bd-accordion-bg title="Frequently asked questions">
+            <bd-accordion-bg-item title="What is Agent Skill Scanner?">
+              <bd-p>Agent Skill Scanner is a Bitdefender agent skill that audits other agent skills before you install or trust them. It runs 71 behavioural detectors across 16 threat categories, extracts 18 indicator types from every file, and returns an LLM-generated security report with a risk level, summary, and per-file findings.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="How do I install Agent Skill Scanner?">
+              <bd-p>Three ways: run "npx skills add bitdefender/agent-skill-scanner" via skills.sh; clone the GitHub repository and copy the agent-skill-scanner folder into your skills directory; or download the zip archive and unzip it there. It requires Python 3.12 or 3.13 and installs its own dependencies on first use.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="How do I scan a skill?">
+              <bd-p>Ask your agent in plain language, for example "scan the foo skill for security risks". There is no separate command to learn: the harness invokes the skill, resolves the target (a directory, an installed skill name, a zip, or a URL), and presents the Markdown report.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="Does it upload my files?">
+              <bd-p>Not by default. In scan mode the scanner transmits only file hashes, extracted indicators with short matched excerpts, metadata and local embeddings; full file contents are never uploaded. The opt-in submit mode uploads the complete skill archive for deeper analysis, and the agent will only use it when you explicitly ask.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="Which agents and harnesses does it work with?">
+              <bd-p>It is an agent skill for use inside a harness such as Claude Code, Codex, OpenClaw, or opencode. It is not a standalone CLI tool. Any harness that reads a skills directory and lets the agent execute the skill's instructions can run it.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="What does a CLEAN result mean?">
+              <bd-p>CLEAN means no known threat patterns were detected, not that the skill is safe. Detection covers 71 behavioural patterns and 18 indicator types, but no scanner proves the absence of malicious intent. Treat the report as strong signal for a trust decision, not a guarantee.</bd-p>
+            </bd-accordion-bg-item>
+
+            <bd-accordion-bg-item title="How much does it cost?">
+              <bd-p>Agent Skill Scanner is available at no charge from skills.sh and GitHub. Use is subject to Bitdefender's End User License Agreement and Privacy Policy.</bd-p>
+            </bd-accordion-bg-item>
+          </bd-accordion-bg>
+        </div>
+      </section>
     </div>
 
+    <bd-cta-banner
+      title="Scan before you trust"
+      description="A skill is code you hand to your agent. One command stands between you and running it blind."
+    >
+      <bd-button-link
+        slot="primary-button"
+        label="Install with npx"
+        kind="white"
+        size="md"
+        strong
+      >Install with npx</bd-button-link>
+
+      <bd-button-link
+        slot="secondary-button"
+        label="View on GitHub"
+        kind="outline-white"
+        size="md"
+        strong
+      >View on GitHub</bd-button-link>
+    </bd-cta-banner>
+
+    <section id="anchor-11-section">
+      <bd-agent-endpoints
+        eyebrow="For AI agents and assistants"
+        title="Machine-readable endpoints"
+        description="This site is built to be read by AI assistants, browsers, and agents. Structured, curated context is available at:"
+        .endpoints=${[
+          { label: "/llms.txt", href: "/llms.txt" },
+          { label: "/llms-full.txt", href: "/llms-full.txt" },
+          { label: "/skill-scanner/index.md", href: "/skill-scanner/index.md" },
+          { label: "/sitemap.xml", href: "/sitemap.xml" },
+          { label: "/robots.txt", href: "/robots.txt" }
+        ]}
+      >
+        <div slot="rows" style="border-top: 1px solid var(--color-neutral-100); margin-top: 24px; padding-top: 24px;">
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0;">
+            By using Bitdefender Agent Skill Scanner, you confirm that you are over 16 years old and you have read and agreed to Bitdefender's
+            <bd-link href="#" kind="primary">End User License Agreement</bd-link>
+            and
+            <bd-link href="#" kind="primary">Privacy Policy</bd-link>.
+          </bd-p>
+        </div>
+
+        <div slot="rows" style="border-top: 1px solid var(--color-neutral-100); margin-top: 24px; padding-top: 24px;">
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0;">
+            No security product guarantees complete protection. A scan that returns no findings means no known threat patterns were detected — not that the skill is safe. Effectiveness depends on configuration, runtime environment and the skills analysed. Features and availability may vary.
+          </bd-p>
+        </div>
+      </bd-agent-endpoints>
+    </section>
+
     <!--
-      TODO: restul secțiunilor de dedesubtul anchor-nav-ului
-      (trust panel, cta-banner, agent-endpoints etc.) încă lipsesc,
-      la fel ca înainte — se adaugă când vine conținutul.
+      TODO: daca mai exista sectiuni sub asta pentru Skill Scanner,
+      se adauga cand vine continutul.
     -->
   `;
 }
+
+
 function sharedFooter() {
   return html`
     <bd-footer>
@@ -831,9 +1043,14 @@ section (\`bd-accordion-bg\`, 9 questions), \`bd-cta-banner\`, \`bd-agent-endpoi
 and \`bd-trust-panel\`.
 
 **Skill Scanner** page: same top nav (tab now active), a dedicated
-\`bd-header-code\` for Agent Skill Scanner. Only the header is fully specified for
-this page today — the rest of its sections are a placeholder until content is
-provided.
+\`bd-header-code\`, \`bd-quick-answer\`, and a sticky \`bd-anchor-nav\` (6 items:
+Install, Overview, What it detects, How it works, Privacy, FAQ) wrapping
+\`bd-install-options\` (cards + "Then just ask" prompt panel), \`bd-overview\`,
+a \`bd-compatibility-table\` inside a chevron accordion, a \`bd-bento-grid\` +
+\`bd-process-steps\` + another \`bd-compatibility-table\` for "How it works",
+another \`bd-install-options\` (generic-slot variant: table + checklist + note)
+for "Privacy", and a \`bd-trust-panel\` under "FAQ". The FAQ accordion itself
+(actual questions) is still a placeholder — content not provided yet.
 
 Both pages share the same \`bd-footer\` at the bottom.
         `

package/src/components/install-options/install-options.css.js

@@ -43,6 +43,12 @@ export default css`
     margin: 0 auto var(--spacing-40);
   }
 
+  /* Slot generic pentru orice continut in afara grid-ului fix de carduri */
+  .bd-installoptions-body {
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto;
+  }
+
   .bd-installoptions-worksin-label {
     color: var(--color-neutral-500);
     font-family: var(--typography-fontFamily-mono, monospace);

package/src/components/install-options/install-options.js

@@ -171,10 +171,25 @@ class BdInstallOptions extends LitElement {
 
         ${this._renderWorksIn()}
 
-        <div class="bd-installoptions-grid">
-          ${this.cards.map((card) => this._renderCard(card))}
+        <!--
+          Slot generic (fara nume) -- pentru orice continut care nu se
+          potriveste cu grid-ul fix de carduri (ex: un tabel, o casuta
+          checklist, o nota de avertizare). Cardurile ramase implicite
+          (this.cards) tot se randeaza mai jos daca sunt pasate; cele doua
+          pot coexista sau poti folosi doar unul din ele.
+        -->
+        <div class="bd-installoptions-body">
+          <slot></slot>
         </div>
 
+        ${this.cards.length
+          ? html`
+              <div class="bd-installoptions-grid">
+                ${this.cards.map((card) => this._renderCard(card))}
+              </div>
+            `
+          : nothing}
+
         ${this._renderPromptPanel()}
       </div>
     `;

package/src/components/review/review-grid.css.js

@@ -5,8 +5,9 @@ export default css`
     display: block;
     width: 100%;
     box-sizing: border-box;
-    max-width: 1290px;
-
+    max-width: var(--layout-ensemble-max-width, 1290px);
+    margin: 0 auto;
+    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
   }
 
   .bd-reviewgrid-title {

package/src/components/review/review.css.js

@@ -6,8 +6,6 @@ export default css`
     height: 100%;
     font-family: var(--typography-fontFamily-sans);
     box-sizing: border-box;
-    max-width: 1290px;
-
   }
 
   .bd-review-card {