@repobit/dex-system-design 0.24.4 → 0.24.5

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

@@ -0,0 +1,669 @@
+import { LitElement, html } from "lit";
+import "./accordion/accordion-bg.js";
+import "./accordion/accordion.js";
+import "./agent-endpoints/agent-endpoints.js";
+import "./anchor/anchor-nav.js";
+import "./bento-grid/bento-grid.js";
+import "./bento-grid/bento-item.js";
+import "./button/button.js";
+import "./comparison-panel/comparison-panel.js";
+import "./compatibility-table/compatibility-table.js";
+import "./cta-banner/cta-banner.js";
+import "./footer/footer.js";
+import "./header/header-code.js";
+import "./icons/analysis-icon.js";
+import "./icons/arrow-up-icon.js";
+import "./icons/av-comparatives-icon.js";
+import "./icons/best-brands-icon.js";
+import "./icons/close-icon.js";
+import "./icons/family-icon.js";
+import "./icons/globe-icon.js";
+import "./icons/guide-icon.js";
+import "./icons/individual-icon.js";
+import "./icons/laurel-icon.js";
+import "./icons/machine-learning-icon.js";
+import "./icons/pc-mag-icon.js";
+import "./icons/top-product-icon.js";
+import "./overview/overview.js";
+import "./page-switcher/page-switcher.js";
+import "./process-steps/process-steps.js";
+import "./quick-answer/quick-answer.js";
+import "./terminal/terminal-message.js";
+import "./trust-panel/trust-panel.js";
+
+// ---------------------------------------------------------------------------
+// Conținutul (fără page-switcher, fără footer — alea sunt comune,
+// randate o singură dată de wrapper-ul de mai jos) pentru fiecare "pagină".
+// ---------------------------------------------------------------------------
+
+function aiGuardianBody() {
+  return html`
+    <bd-header-code
+      eyebrow="Security for autonomous AI agents"
+      title="Bitdefender AI Guardian"
+      description="A security layer between your AI agents and the actions they take — policies, guardrails, and monitoring that let agents run safely."
+      terminal-caption="AI Guardian CLI · first-run setup"
+    >
+      <bd-button-link
+        slot="primary-button"
+        label="Download BETA Today"
+        kind="primary"
+        size="md"
+        font-size="18px"
+        font-weight="600"
+      >Download BETA Today</bd-button-link>
+
+      <bd-button-link
+        slot="secondary-button"
+        label="See how it works"
+        kind="primary-outline"
+        size="md"
+        font-size="18px"
+        font-weight="600"
+      >See how it works</bd-button-link>
+
+      <bd-terminal-message
+        slot="terminal-content"
+        show-titlebar
+        panel-label="Welcome"
+        icon="👋"
+        greeting="Hi, I'm AI Guardian."
+        intro="I keep an eye on what your AI assistant can access and do:"
+        .items=${["which tools it can use", "which credentials to watch", "which MCP servers to trust"]}
+        footer-bold="Let's get started."
+        footer="It only takes a minute, and nothing changes until you confirm it."
+        show-cursor
+        hint="[Enter] to continue · [esc] to cancel"
+      ></bd-terminal-message>
+    </bd-header-code>
+
+    <section>
+      <div style="max-width: 1200px; margin: 0 auto;">
+        <bd-quick-answer
+          label="Quick answer"
+          text="Bitdefender AI Guardian is a security layer for autonomous AI agents on macOS. It inspects what an agent does — tool calls, file access, prompts, skills — and returns a verdict of allowed, flagged or blocked against a policy baseline you set. It targets prompt injection, MCP tool poisoning, credential leakage and unauthorised actions. Currently in open BETA."
+          .items=${[
+            { label: "PLATFORM", value: "macOS" },
+            { label: "STATUS", value: "Open BETA" },
+            { label: "MADE BY", value: "Bitdefender" }
+          ]}
+        ></bd-quick-answer>
+      </div>
+    </section>
+
+    <div style="max-width: 1200px; margin: 0 auto;">
+      <bd-anchor-nav
+        aria-label="Page sections"
+        cta-label="Download BETA Today"
+        cta-href="#download"
+        .items=${[
+          { title: "Overview" },
+          { title: "Compatibility" },
+          { title: "Protections" },
+          { title: "How it works" },
+          { title: "Outcomes" },
+          { title: "Risk mapping" },
+          { title: "How it runs" },
+          { title: "FAQ" },
+          { title: "Why trust it" }
+        ]}
+        style="margin-bottom: 0;"
+      >
+      </bd-anchor-nav>
+
+      <section id="anchor-1-section" style="margin-top: 0; padding-top: 0;">
+        <div style="padding: 48px 24px 24px;">
+          <bd-overview
+            title="What is AI Guardian?"
+            description="AI Guardian is a Bitdefender security product that helps protect people and organisations from the risks of autonomous AI agents — prompt injection, unsafe tool use, data leakage, and unauthorised actions. It adds a baseline security model of policies, permissions, and auditing, guardrails for tool execution, and monitoring and response workflows."
+            .facts=${[
+              { label: "CATEGORY", value: "AI agent security" },
+              { label: "PLATFORM", value: "macOS (initial)" },
+              { label: "RUNS AS", value: "Background service" },
+              { label: "VERDICTS", value: "Allowed / Flagged / Blocked" }
+            ]}
+          ></bd-overview>
+        </div>
+      </section>
+
+      <section id="anchor-2-section">
+        <div style="padding: 24px;">
+          <bd-compatibility-table
+            title="What does AI Guardian work with?"
+            description="AI Guardian attaches to the agent runtime on macOS, so coverage follows what an agent does on the machine rather than which vendor built it."
+            .rows=${[
+              { environment: "MCP clients and servers", coverage: "Supported in BETA", notes: "Tool inspection at the Model Context Protocol layer" },
+              { environment: "Agent skills and plugins", coverage: "Supported in BETA", notes: "Skill vetting before a skill executes" },
+              { environment: "CLI coding agents", coverage: "Supported in BETA", notes: "Claude Code 2.1.121+ and OpenClaw 2026.6.6+" },
+              { environment: "IDE-embedded agents", coverage: "Coming soon", notes: "Editor assistants with tool access" },
+              { environment: "macOS", coverage: "Supported in BETA", notes: "Initial platform" },
+              { environment: "Windows and Linux", coverage: "Planned", notes: "Not available in BETA" }
+            ]}
+          ></bd-compatibility-table>
+        </div>
+      </section>
+
+      <section id="anchor-3-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-bento-grid
+            eyebrow="Protection"
+            title="What does AI Guardian protect against?"
+            description="AI Guardian watches how an AI agent behaves and secures six of the highest-risk areas in agentic workflows. Each protection returns a verdict in real time."
+          >
+            <bd-bento-item title="MCP tool protection">
+              <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+              <bd-p>Detects and blocks malicious MCP tools (tool poisoning) before an agent can call them.</bd-p>
+            </bd-bento-item>
+            <bd-bento-item title="Skill vetting">
+              <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+              <bd-p>Scans and validates agent skills before they run, so unreviewed skills don't execute silently.</bd-p>
+            </bd-bento-item>
+            <bd-bento-item title="Prompt injection detection">
+              <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+              <bd-p>Catches attempts to hijack an agent through crafted inputs and hidden instructions.</bd-p>
+            </bd-bento-item>
+            <bd-bento-item title="Tool-call monitoring">
+              <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+              <bd-p>Watches every tool an agent invokes in real time, building an auditable record of actions.</bd-p>
+            </bd-bento-item>
+            <bd-bento-item title="Credential leak detection">
+              <bd-family-icon slot="icon" width="32" height="32" color="#006DFF"></bd-family-icon>
+              <bd-p>Detects exposure of secrets such as API keys before they leave the machine.</bd-p>
+            </bd-bento-item>
+            <bd-bento-item title="Sensitive file protection">
+              <bd-arrow-up-icon slot="icon" width="32" height="32" color="#006DFF"></bd-arrow-up-icon>
+              <bd-p>Blocks unauthorised access to sensitive files such as SSH keys and system credentials.</bd-p>
+            </bd-bento-item>
+          </bd-bento-grid>
+        </div>
+
+        <div style="padding: 0 24px 48px;">
+          <bd-comparison-panel
+            title="What it is, and what it isn't"
+            description="AI Guardian secures the actions an AI agent takes. It is not a traditional antivirus, a network VPN, or a chatbot content filter."
+            positive-title="AI Guardian is"
+            negative-title="AI Guardian is not"
+            .positiveItems=${[
+              "A security layer for autonomous AI agents.",
+              "A baseline model of policies, permissions, and auditing.",
+              "Guardrails and monitoring around tool execution.",
+              "Focused on agent actions, tool calls, and data access.",
+              "Built for macOS first, with more platforms planned."
+            ]}
+            .negativeItems=${[
+              "A traditional endpoint antivirus.",
+              "A network firewall or VPN.",
+              "A replacement for your agent framework or LLM.",
+              "A content-quality filter for chatbot text."
+            ]}
+          ></bd-comparison-panel>
+        </div>
+      </section>
+
+      <section id="anchor-4-section">
+        <bd-process-steps
+          title="Policy, guardrail, verdict"
+          description="AI Guardian works in three stages: you set a policy baseline, it enforces guardrails at execution, and it monitors and responds to what happens."
+          .steps=${[
+            {
+              icon       : html`<bd-guide-icon width="40" height="40" color="#60a5fa"></bd-guide-icon>`,
+              title      : "Set a policy baseline",
+              description: "Define what agents are allowed to do — permissions, policies, and auditing for tools, files, and actions."
+            },
+            {
+              icon       : html`<bd-close-icon width="40" height="40" color="#60a5fa"></bd-close-icon>`,
+              title      : "Guardrails at execution",
+              description: "Every tool call and action is checked against policy in real time and gets a verdict: allowed, flagged, or blocked."
+            },
+            {
+              icon       : html`<bd-globe-icon width="40" height="40" color="#60a5fa"></bd-globe-icon>`,
+              title      : "Monitor and respond",
+              description: "Security events feed monitoring and response workflows, so teams can review what agents did and why."
+            }
+          ]}
+        ></bd-process-steps>
+      </section>
+
+      <section id="anchor-5-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-compatibility-table
+            variant="outcome"
+            title="The same agent, with and without AI Guardian"
+            .rows=${[
+              { event: "Prompt injection", without: "Agent may follow the injected instruction", with: "Flagged or blocked before it acts" },
+              { event: "Malicious MCP tool", without: "Tool runs and can steer the agent", with: "Blocked before the agent calls it" },
+              { event: "API key in a prompt", without: "Secret can leave the machine", with: "Credential exposure is detected" },
+              { event: "Access to ~/.ssh/id_rsa", without: "Sensitive files readable by the agent", with: "Unauthorised access is blocked" },
+              { event: "Unreviewed skill", without: "Runs without inspection", with: "Vetted before it runs" }
+            ]}
+          ></bd-compatibility-table>
+        </div>
+      </section>
+
+      <section id="anchor-6-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">Coverage against agentic AI risk categories</bd-h>
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+            How AI Guardian maps to the risk categories the industry is standardising on for agentic applications.
+          </bd-p>
+
+          <bd-accordion-item chevron title="Show the full mapping (6 categories)">
+            <bd-compatibility-table
+              variant="risk"
+              .rows=${[
+                { category: "Prompt injection", coverage: "Inspects agent inputs and actions; returns allowed, flagged or blocked" },
+                { category: "Tool and MCP misuse", coverage: "Detects and blocks malicious or tampered MCP tools before invocation" },
+                { category: "Excessive or unscoped permissions", coverage: "Policy baseline defines what agents may do with tools, files and actions" },
+                { category: "Sensitive data exposure", coverage: "Detects credential and secret exposure before it leaves the machine" },
+                { category: "Unvetted extensions and skills", coverage: "Scans and validates skills before they run" },
+                { category: "Unmonitored agent activity", coverage: "Real-time tool-call monitoring with an auditable record" }
+              ]}
+            ></bd-compatibility-table>
+          </bd-accordion-item>
+
+          <bd-p kind="small" style="color: var(--color-neutral-500); margin-top: 16px;">
+            Category naming follows OWASP Top 10 for Agentic Applications (2026).
+          </bd-p>
+        </div>
+      </section>
+
+      <section id="anchor-7-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">How it runs</bd-h>
+          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+            AI Guardian installs from a signed macOS installer and runs as a background service; the rows below list how it installs, where analysis happens, and what the BETA costs.
+          </bd-p>
+
+          <bd-accordion-item chevron title="Show operational details (11 rows)">
+            <bd-compatibility-table
+              variant="light"
+              .rows=${[
+                { label: "Runs as", value: "Background service on the endpoint" },
+                { label: "Install method", value: "Download the macOS installer (.dmg)" },
+                { label: "System permissions required", value: "Granted during install, when the Bitdefender agent asks" },
+                { label: "Installer", value: "Signed with a Bitdefender Apple Developer ID and recognised by macOS" },
+                { label: "Agent version checks", value: "Handled by the installer" },
+                { label: "Where analysis happens", value: "On-device, with some checks (such as URL reputation) using Bitdefender cloud services" },
+                { label: "Prompt data", value: "Analysed on-device — prompts never leave your Mac" },
+                { label: "Offline operation", value: "Some features" },
+                { label: "Performance overhead", value: "Designed to be minimal; not yet measured" },
+                { label: "Availability", value: "Open BETA, free download" },
+                { label: "Price during BETA", value: "Free" }
+              ]}
+            ></bd-compatibility-table>
+          </bd-accordion-item>
+        </div>
+      </section>
+
+      <section id="anchor-8-section">
+        <bd-trust-panel
+          eyebrow="Why trust it"
+          title="Built by Bitdefender"
+          description="AI Guardian 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 AI Guardian product, which is in BETA."
+          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>
+      </section>
+
+      <section id="anchor-9-section" class="faq">
+        <bd-accordion-bg title="Questions about agent security">
+          <bd-accordion-bg-item title="What is prompt injection and how does AI Guardian stop it?">
+            <bd-p>Prompt injection is an attack where crafted input tricks an AI agent into following instructions it should ignore. AI Guardian inspects agent inputs and actions and returns a verdict — allowed, flagged, or blocked — so a hijacked instruction can be caught before it turns into an action.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="What is MCP tool poisoning?">
+            <bd-p>MCP tool poisoning is when a Model Context Protocol tool is malicious or has been tampered with, so an agent that calls it can be steered into harmful behaviour. AI Guardian detects and blocks malicious MCP tools before an agent uses them.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="How does AI Guardian decide to block, flag, or allow an action?">
+            <bd-p>Every agent action and tool call is checked in real time against a policy baseline. AI Guardian then returns one of three verdicts: allowed lets the action proceed, flagged surfaces it for review, and blocked stops it.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="How do I secure an AI agent that can run shell commands and edit files?">
+            <bd-p>Constrain it with a policy baseline, vet the tools and skills it can reach, and monitor every call it makes. AI Guardian applies all three on macOS: it vets skills and MCP tools before execution, checks each tool call and file access against policy, and records an auditable trail of what the agent did.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Is AI Guardian an antivirus for AI?">
+            <bd-p>No. AI Guardian is not a traditional endpoint antivirus, a network firewall or VPN, or a content filter for chatbot text. It secures the actions an agent takes — tool calls, file access, skills and prompts — which is a different layer from malware scanning.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Does AI Guardian work with my agent framework?">
+            <bd-p>In BETA, AI Guardian supports two agents: Claude Code 2.1.121 or newer, and OpenClaw 2026.6.6 or newer. It integrates with each through a small plugin — the OpenClaw gateway plugin and the Claude Code hook — so support is per-agent rather than automatic for anything running on the machine. It also covers MCP clients and servers, and agent skills and plugins. IDE-embedded agents are coming next; other agents are not supported yet.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Does AI Guardian work on Windows?">
+            <bd-p>AI Guardian runs on macOS at launch. Support for additional platforms is planned.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="How much does AI Guardian cost and how do I get it?">
+            <bd-p>AI Guardian is free during BETA. Download the macOS installer and run it — there is no waitlist and no licence key. It will stay free for early adopters after BETA.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Will AI Guardian slow down my AI agents?">
+            <bd-p>Checking every action an agent takes has some cost, so you may notice a small difference. AI Guardian is built to keep it minimal.</bd-p>
+          </bd-accordion-bg-item>
+        </bd-accordion-bg>
+      </section>
+
+      <bd-cta-banner
+        title="Run your AI agents with a guardrail"
+        description="AI Guardian is in open BETA on macOS. Download the BETA and secure your agentic workflows."
+        caption="Downloads the macOS BETA (.dmg). Free during BETA."
+      >
+        <bd-button-link
+          slot="primary-button"
+          label="Download BETA Today"
+          kind="white"
+          size="md"
+          strong
+        >Download BETA Today</bd-button-link>
+
+        <bd-button-link
+          slot="secondary-button"
+          label="Read the docs"
+          kind="outline-white"
+          size="md"
+          strong
+        >Read the docs</bd-button-link>
+      </bd-cta-banner>
+
+      <section id="anchor-10-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: "/index.md", href: "/index.md" },
+            { label: "/sitemap.xml", href: "/sitemap.xml" },
+            { label: "/robots.txt", href: "/robots.txt" }
+          ]}
+          .assistants=${[
+            { label: "Ask ChatGPT", href: "https://chatgpt.com/?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/openai-brands-solid-full.svg" },
+            { label: "Ask Perplexity", href: "https://www.perplexity.ai/search?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/perplexity-icon-dark.svg" },
+            { label: "Ask Gemini", href: "https://gemini.google.com/app?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/Google_Gemini_icon_2025.svg" },
+            { label: "Ask Copilot", href: "https://copilot.microsoft.com/?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/microsoft-copilot.svg" }
+          ]}
+        ></bd-agent-endpoints>
+      </section>
+
+      <section id="legal">
+        <div style="max-width: 1200px; margin: 0 auto; padding: 24px;">
+          <bd-p kind="small" style="color: var(--color-neutral-500); border-top: 1px solid var(--color-neutral-100); max-width: 90ch; padding-top: var(--spacing-4)">
+            No security product guarantees complete protection. Effectiveness depends on configuration, runtime environment and the type of agents used. Features and availability may vary. Initially available on macOS, with further platforms to follow.
+          </bd-p>
+        </div>
+      </section>
+    </div>
+  `;
+}
+
+function skillScannerBody() {
+  return html`
+    <bd-header-code
+      eyebrow="Supply-chain security for agent skills"
+      title="Agent Skill Scanner"
+      description="A skill is code you hand to your agent. Scan it before you trust it: every file, every indicator, one verdict."
+      terminal-caption="Agent Skill Scanner · install and first scan"
+    >
+      <span slot="breadcrumb">Bitdefender AI</span>
+      <span slot="breadcrumb">skill-scanner</span>
+
+      <bd-button-link
+        slot="primary-button"
+        label="Install now"
+        kind="primary"
+        size="md"
+        font-size="18px"
+        font-weight="600"
+      >Install now</bd-button-link>
+
+      <bd-button-link
+        slot="secondary-button"
+        label="View on GitHub"
+        kind="primary-outline"
+        size="md"
+        font-size="18px"
+        font-weight="600"
+      >View on GitHub</bd-button-link>
+
+      <span slot="badge">AVAILABLE</span>
+
+      <bd-terminal-message
+        slot="terminal-content"
+        show-titlebar
+        .lines=${[
+          { type: "cmd", text: "$ npx skills add bitdefender/agent-skill-scanner" },
+          { type: "ok", text: "✓ agent-skill-scanner installed" },
+          { type: "sep" },
+          { type: "ask", text: "> scan the my-skill skill for security risks" },
+          { type: "sep" },
+          { type: "strong", text: "# Skill Scan: my-skill" },
+          { type: "space" },
+          { type: "dim", text: "- Severity: CLEAN" },
+          { type: "dim", text: "- Scan Date: 2026-06-15" },
+          { type: "space" },
+          { type: "dim", text: "No security findings detected." }
+        ]}
+      ></bd-terminal-message>
+    </bd-header-code>
+
+    <section>
+      <div style="max-width: 1200px; margin: 0 auto;">
+        <bd-quick-answer
+          label="Quick answer"
+          text='Agent Skill Scanner is a Bitdefender agent skill that audits another agent skill before you install or trust it. It walks every file, runs 71 behavioural detectors across 16 threat categories, extracts 18 indicator types, and returns an LLM-generated report with a risk level, summary and per-file findings. Install it with "npx skills add bitdefender/agent-skill-scanner", from GitHub, or as a zip archive.'
+          .items=${[
+            { label: "ANALYSES", value: "Agent skills" },
+            { label: "STATUS", value: "Available — skills.sh & GitHub" },
+            { label: "REQUIRES", value: "Python 3.12 or 3.13" },
+            { label: "MADE BY", value: "Bitdefender" }
+          ]}
+        ></bd-quick-answer>
+      </div>
+    </section>
+
+    <!--
+      TODO: restul secțiunilor pentru pagina Skill Scanner
+      (compatibility table, features/protections, FAQ, trust panel etc.)
+      nu au fost specificate încă — se adaugă când vine conținutul.
+    -->
+  `;
+}
+
+function sharedFooter() {
+  return html`
+    <bd-footer>
+      <span slot="logo" style="font-size:24px; font-weight:700; color:#fff;">
+        Bitdefender <span style="font-weight:400; opacity:0.85;">AI</span>
+      </span>
+
+      <div slot="top-right" style="display:flex; align-items:center; gap:12px; color:#fff;">
+        <span style="width:40px; height:40px; border-radius:50%; background:#ff2d2d; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px;">B</span>
+        <span style="line-height:1.2;">Trusted.<br />Always.</span>
+      </div>
+
+      <div slot="nav">
+        <bd-link href="/consumer/" kind="light">For Consumer</bd-link>
+        <bd-link href="/small-business/" kind="light">For Small Business</bd-link>
+        <bd-link href="/business/" kind="light">For Enterprise</bd-link>
+        <bd-link href="/partners/" kind="light">For Partners</bd-link>
+      </div>
+
+      <bd-footer-links-group slot="quick-links" title="Quick links">
+        <bd-link href="/ai-guardian/" kind="light">AI Guardian</bd-link>
+        <bd-link href="/docs/" kind="light">Documentation</bd-link>
+        <bd-link href="/agent-skill-scanner/" kind="light">Agent Skill Scanner</bd-link>
+        <bd-link href="https://www.bitdefender.com" kind="light">bitdefender.com</bd-link>
+      </bd-footer-links-group>
+
+      <bd-footer-links-group slot="quick-links" title="For agents">
+        <bd-link href="/llms.txt" kind="light">llms.txt</bd-link>
+        <bd-link href="/llms-full.txt" kind="light">llms-full.txt</bd-link>
+        <bd-link href="/index.md" kind="light">index.md</bd-link>
+        <bd-link href="/sitemap.xml" kind="light">Sitemap</bd-link>
+        <bd-link href="/robots.txt" kind="light">robots.txt</bd-link>
+      </bd-footer-links-group>
+
+      <div slot="secondary-nav">
+        <bd-link href="/legal/" kind="light">Legal</bd-link>
+        <bd-divider-vertical color="white" opacity="0.4"></bd-divider-vertical>
+        <bd-link href="/privacy-policy/" kind="light">Privacy Policy</bd-link>
+        <bd-divider-vertical color="white" opacity="0.4"></bd-divider-vertical>
+        <bd-link href="/company/" kind="light">Company</bd-link>
+        <bd-divider-vertical color="white" opacity="0.4"></bd-divider-vertical>
+        <bd-link href="/support/" kind="light">Support</bd-link>
+        <bd-divider-vertical color="white" opacity="0.4"></bd-divider-vertical>
+        <bd-link href="#" kind="light">Cookie settings</bd-link>
+      </div>
+
+      <div slot="address" style="color:#fff; opacity:0.85; font-size:14px;">
+        © 2001–2026 Bitdefender
+      </div>
+
+      <div slot="copyright" style="max-width: 1200px; color: rgba(255,255,255,0.75); font-size: 12px; line-height: 1.5;">
+        Bitdefender trademarks and registered trademarks are the property of Bitdefender or its affiliates. Claude and Claude Code are trademarks of Anthropic. ChatGPT and Codex are trademarks of OpenAI. Gemini and Google are trademarks of Google LLC. Copilot and Microsoft are trademarks of Microsoft Corporation. Perplexity is a trademark of Perplexity AI, Inc. Hermes Agent is a mark of Nous Research. The OpenClaw and opencode marks are the property of their owners. All other names and marks are the property of their respective owners. Third-party names and logos on this page, including those on the buttons that open an assistant, are used for identification only. Their use does not imply any affiliation with, sponsorship by, or endorsement from those owners.
+      </div>
+    </bd-footer>
+  `;
+}
+
+// ---------------------------------------------------------------------------
+// Wrapper interactiv: ține starea "activeTab" și intercepta click-ul pe
+// page-switcher (preventDefault pe anchor-ul intern) în loc să lase browserul
+// să navigheze la un URL care nu există în Storybook (de-asta dădea 404).
+// ---------------------------------------------------------------------------
+
+class AiGuardianSkillScannerDemo extends LitElement {
+  static properties = {
+    activeTab: { state: true }
+  };
+
+  // light DOM: evenimentul de click (composed) tot ajunge aici din shadow-ul
+  // intern al bd-page-switcher / bd-link, deci putem intercepta navigarea.
+  createRenderRoot() {
+    return this;
+  }
+
+  constructor() {
+    super();
+    this.activeTab = "ai-guardian";
+  }
+
+  // Folosim fragmente "#..." în loc de căi reale (/ai-guardian/, /agent-skill-scanner/):
+  // un fragment nu navighează niciodată către altă pagină, deci nu poate da 404,
+  // indiferent cum gestionează bd-link intern click-ul.
+  _onNavClick(event) {
+    const path = event.composedPath();
+    const anchor = path.find(
+      (el) => el?.tagName === "A" || el?.tagName === "BD-LINK"
+    );
+    if (!anchor || typeof anchor.getAttribute !== "function") return;
+
+    const href = anchor.getAttribute("href");
+    if (href === "#ai-guardian") {
+      event.preventDefault();
+      this.activeTab = "ai-guardian";
+    } else if (href === "#skill-scanner") {
+      event.preventDefault();
+      this.activeTab = "skill-scanner";
+    }
+  }
+
+  render() {
+    const isAiGuardian = this.activeTab === "ai-guardian";
+
+    return html`
+      <div @click=${this._onNavClick}>
+        <bd-page-switcher
+          .items=${[
+            { title: "AI Guardian", href: "#ai-guardian", active: isAiGuardian },
+            { title: "Skill Scanner", href: "#skill-scanner", active: !isAiGuardian }
+          ]}
+        ></bd-page-switcher>
+
+        ${isAiGuardian ? aiGuardianBody() : skillScannerBody()}
+
+        ${sharedFooter()}
+      </div>
+    `;
+  }
+}
+
+customElements.define("demo-ai-guardian-skill-scanner", AiGuardianSkillScannerDemo);
+
+// ---------------------------------------------------------------------------
+// Storybook
+// ---------------------------------------------------------------------------
+
+export default {
+  title     : "Demos/AI Guardian Landing",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+Interactive demo: sticky top-level product nav (\`AI Guardian\` / \`Skill Scanner\`)
+switches, in place, between two full "pages" without any real navigation —
+clicking a tab intercepts the anchor click and swaps local state instead of
+following the href (which has no route in Storybook and would 404).
+
+**AI Guardian** page: \`bd-header-code\`, \`bd-quick-answer\`, sticky \`bd-anchor-nav\`
+(9 items) wrapping \`bd-overview\`, \`bd-compatibility-table\` (default variant), the
+"Protections" section (\`bd-bento-grid\` + \`bd-comparison-panel\`), \`bd-process-steps\`,
+\`bd-compatibility-table\` (\`variant="outcome"\`), two chevron \`bd-accordion-item\`s
+revealing \`bd-compatibility-table\` (\`variant="risk"\` / \`variant="light"\`), an FAQ
+section (\`bd-accordion-bg\`, 9 questions), \`bd-cta-banner\`, \`bd-agent-endpoints\`,
+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.
+
+Both pages share the same \`bd-footer\` at the bottom.
+        `
+      }
+    }
+  }
+};
+
+export const Default = {
+  name  : "AI Guardian ↔ Skill Scanner (interactive)",
+  render: () => html`<demo-ai-guardian-skill-scanner></demo-ai-guardian-skill-scanner>`
+};