@repobit/dex-system-design 0.24.3 → 0.24.5

package/src/components/process-steps/process-steps.stories.js

@@ -0,0 +1,144 @@
+import { html } from "lit";
+import "../icons/close-icon.js";
+import "../icons/globe-icon.js";
+import "../icons/guide-icon.js";
+import "./process-steps.js";
+
+export default {
+  title     : "Components/Process Steps",
+  component : "bd-process-steps",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+**ProcessSteps** is a dark-background section showing a title, description, and a
+3-column row of steps — each with a top divider line, icon, title, and description —
+used to explain a sequential process or workflow.
+
+Icons are rendered via the \`icon\` field in each step object, using real icon
+components from \`components/icons\` (e.g. \`<bd-guide-icon>\`), not inline SVGs.
+
+### Usage
+\`\`\`html
+<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"></bd-guide-icon>\`, title: "Set a policy baseline", description: "..." },
+    { icon: html\`<bd-close-icon width="40" height="40"></bd-close-icon>\`, title: "Guardrails at execution", description: "..." },
+    { icon: html\`<bd-globe-icon width="40" height="40"></bd-globe-icon>\`, title: "Monitor and respond", description: "..." }
+  ]}
+></bd-process-steps>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default | Description                                                   |
+|------------------|--------|---------|------------------------------------------------------------------|
+| \`title\`          | String | \`""\`    | Heading above the description (or the \`title\` slot)               |
+| \`description\`    | String | \`""\`    | Paragraph under the title (or the \`description\` slot)             |
+| \`steps\`          | Array  | \`[]\`    | \`{ icon, title, description }\` — \`icon\` can be a URL string or a Lit template (real icon component) |
+
+### Slots
+| Slot           | Description                                              |
+|-----------------|--------------------------------------------------------------|
+| \`title\`         | Overrides the \`title\` attribute if content is provided       |
+| \`description\`   | Overrides the \`description\` attribute if content is provided |
+| \`steps\`         | Extra freeform steps appended after the ones from \`steps\`     |
+        `
+      }
+    }
+  },
+  argTypes: {
+    title      : { control: "text", table: { category: "Content" } },
+    description: { control: "text", table: { category: "Content" } }
+  }
+};
+
+const iconGuide = html`<bd-guide-icon width="40" height="40" color="#60a5fa"></bd-guide-icon>`;
+const iconClose = html`<bd-close-icon width="40" height="40" color="#60a5fa"></bd-close-icon>`;
+const iconGlobe = html`<bd-globe-icon width="40" height="40" color="#60a5fa"></bd-globe-icon>`;
+
+const render = (args) => html`
+  <bd-process-steps
+    title=${args.title}
+    description=${args.description}
+    .steps=${[
+      { icon: iconGuide, title: "Set a policy baseline", description: "Define what agents are allowed to do — permissions, policies, and auditing for tools, files, and actions." },
+      { icon: iconClose, 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: iconGlobe, title: "Monitor and respond", description: "Security events feed monitoring and response workflows, so teams can review what agents did and why." }
+    ]}
+  ></bd-process-steps>
+`;
+
+export const Default = {
+  name: "Default — Policy, Guardrail, Verdict",
+  args: {
+    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."
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design: dark gradient background, title + description, and a 3-column row of steps using real icon components from the icons folder."
+      }
+    }
+  }
+};
+
+export const FourSteps = {
+  name  : "Four Steps",
+  render: () => html`
+    <bd-process-steps
+      title="How it works"
+      description="A four-stage version, demonstrating the grid with more than three items."
+      .steps=${[
+        { icon: iconGuide, title: "Define policy", description: "Set the rules agents must follow." },
+        { icon: iconClose, title: "Enforce at runtime", description: "Every action is checked live." },
+        { icon: iconGlobe, title: "Monitor", description: "Track what happened and why." },
+        { icon: iconGuide, title: "Respond", description: "Act on flagged or blocked events." }
+      ]}
+    ></bd-process-steps>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "4 steps — the grid stays 3 columns wide on desktop, wrapping the 4th onto a new row."
+      }
+    }
+  }
+};
+
+export const NoDescription = {
+  name: "No Description",
+  args: {
+    title      : "Policy, guardrail, verdict",
+    description: ""
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`description` omitted — no paragraph rendered under the title, no leftover gap."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    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."
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit title and description live."
+      }
+    }
+  }
+};

package/src/components/quick-answer/quick-answer.css.js

@@ -0,0 +1,67 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-quickanswer-container {
+    background: var(--color-blue-50, #eef4ff);
+    // border-radius: var(--radius-2xl, 16px);
+    padding: var(--spacing-32) var(--spacing-28) var(--spacing-32) var(--spacing-28);
+    box-sizing: border-box;
+  }
+
+  .bd-quickanswer-label {
+    color: var(--color-blue-500);
+    font-weight: var(--typography-fontWeight-medium);
+    margin: 0 0 var(--spacing-16);
+  }
+
+  .bd-quickanswer-text {
+    color: var(--color-neutral-800);
+    margin: 0;
+  }
+
+  .bd-quickanswer-divider {
+    border-top: 1px solid var(--color-blue-100, rgba(59, 130, 246, 0.15));
+    margin: var(--spacing-24) 0 var(--spacing-16);
+  }
+
+  .bd-quickanswer-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-24);
+  }
+
+  .bd-quickanswer-meta-item {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--spacing-8);
+  }
+
+.bd-quickanswer-meta-label {
+  color: var(--color-neutral-500);
+  font-size: var(--typography-fontSize-xxs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+  .bd-quickanswer-meta-value {
+    color: var(--color-neutral-1000);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  @media (max-width: 599px) {
+    .bd-quickanswer-container {
+      padding: var(--spacing-24);
+    }
+
+    .bd-quickanswer-meta {
+      flex-direction: column;
+      gap: var(--spacing-12);
+    }
+  }
+`;

package/src/components/quick-answer/quick-answer.js

@@ -0,0 +1,59 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../paragraph/paragraph.js";
+import quickAnswerCSS from "./quick-answer.css.js";
+
+class QuickAnswer extends LitElement {
+  static properties = {
+    label: { type: String },
+    text : { type: String },
+    items: { type: Array } // [{ label: String, value: String }]
+  };
+
+  static styles = [tokens, quickAnswerCSS];
+
+  constructor() {
+    super();
+    this.label = "Quick answer";
+    this.text = "";
+    this.items = [];
+  }
+
+  render() {
+    return html`
+      <div class="bd-quickanswer-container">
+        ${this.label
+          ? html`
+              <bd-p kind="normal" class="bd-quickanswer-label">
+                <slot name="label">${this.label}</slot>
+              </bd-p>
+            `
+          : nothing}
+
+        <bd-p kind="normal" class="bd-quickanswer-text">
+          <slot name="text">${this.text}</slot>
+        </bd-p>
+
+        <slot></slot>
+
+        ${this.items && this.items.length
+          ? html`
+              <div class="bd-quickanswer-divider"></div>
+              <div class="bd-quickanswer-meta">
+                ${this.items.map(
+                  (item) => html`
+                    <span class="bd-quickanswer-meta-item">
+                      <span class="bd-quickanswer-meta-label">${item.label}</span>
+                      <span class="bd-quickanswer-meta-value">${item.value}</span>
+                    </span>
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-quick-answer", QuickAnswer);

package/src/components/quick-answer/quick-answer.stories.js

@@ -0,0 +1,160 @@
+import { html } from "lit";
+import "./quick-answer.js";
+
+export default {
+  title     : "Components/Quick Answer",
+  component : "bd-quick-answer",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+**QuickAnswer** is a light-blue callout box that gives a short, direct answer to a
+question, followed by an optional row of labeled meta values (platform, status,
+vendor, etc.), separated by a divider.
+
+### Usage
+\`\`\`html
+<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>
+\`\`\`
+
+### Attributes
+| Attribute | Type   | Default          | Description                                    |
+|-----------|--------|-------------------|--------------------------------------------------|
+| \`label\`   | String | \`"Quick answer"\` | Small blue heading label above the body text     |
+| \`text\`    | String | \`""\`             | The main answer paragraph                         |
+| \`items\`   | Array  | \`[]\`             | Meta row entries: \`{ label, value }\` — omitted entirely if empty |
+
+### Slots
+| Slot      | Description                                            |
+|-----------|-----------------------------------------------------------|
+| (default) | Extra freeform content appended after the text, before the divider |
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: { control: "text", table: { category: "Content" } },
+    text : { control: "text", table: { category: "Content" } },
+    items: { control: "object", table: { category: "Content" } }
+  }
+};
+
+const render = (args) => html`
+  <bd-quick-answer
+    label=${args.label}
+    text=${args.text}
+    .items=${args.items}
+  ></bd-quick-answer>
+`;
+
+export const Default = {
+  name: "Default — AI Guardian",
+  args: {
+    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" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design: label, body text, divider, and a row of meta values."
+      }
+    }
+  }
+};
+
+export const NoMeta = {
+  name: "No Meta Row",
+  args: {
+    label: "Quick answer",
+    text : "A short, direct answer with no meta row underneath.",
+    items: []
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`items` left empty — no divider, no meta row rendered."
+      }
+    }
+  }
+};
+
+export const ManyMetaItems = {
+  name: "Many Meta Items",
+  args: {
+    label: "Quick answer",
+    text : "Demonstrates the meta row wrapping onto a second line when there are more entries than fit horizontally.",
+    items: [
+      { label: "PLATFORM", value: "macOS" },
+      { label: "STATUS", value: "Open BETA" },
+      { label: "MADE BY", value: "Bitdefender" },
+      { label: "PRICE", value: "Free" },
+      { label: "LICENSE", value: "Proprietary" },
+      { label: "LANGUAGE", value: "Swift" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "The meta row wraps automatically when it runs out of horizontal space."
+      }
+    }
+  }
+};
+
+export const NoLabel = {
+  name: "No Label",
+  args: {
+    label: "",
+    text : "The label is optional — omitting it removes the blue heading entirely.",
+    items: [
+      { label: "STATUS", value: "Open BETA" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`label` omitted — no heading above the body text."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    label: "Quick answer",
+    text : "Bitdefender AI Guardian is a security layer for autonomous AI agents on macOS.",
+    items: [
+      { label: "PLATFORM", value: "macOS" },
+      { label: "STATUS", value: "Open BETA" },
+      { label: "MADE BY", value: "Bitdefender" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit label, text, and meta items live."
+      }
+    }
+  }
+};

package/src/components/terminal/terminal-cursor.js

@@ -0,0 +1,49 @@
+import { LitElement, css, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+
+class TerminalCursor extends LitElement {
+  static properties = {
+    color: { type: String }
+  };
+
+  static styles = [
+    tokens,
+    css`
+      :host {
+        display: inline-block;
+        width: 8px;
+        height: 16px;
+        vertical-align: middle;
+      }
+
+      .bd-terminal-cursor {
+        width: 100%;
+        height: 100%;
+        background: var(--bd-terminal-cursor-color, var(--color-blue-400));
+        animation: bd-terminal-cursor-blink 1s steps(1) infinite;
+        display: block;
+      }
+
+      @keyframes bd-terminal-cursor-blink {
+        0%, 50% {
+          opacity: 1;
+        }
+        50.01%, 100% {
+          opacity: 0;
+        }
+      }
+    `
+  ];
+
+  constructor() {
+    super();
+    this.color = "";
+  }
+
+  render() {
+    const style = this.color ? `background: ${this.color};` : "";
+    return html`<span class="bd-terminal-cursor" style="${style}"></span>`;
+  }
+}
+
+customElements.define("bd-terminal-cursor", TerminalCursor);

package/src/components/terminal/terminal-message.css.js

@@ -0,0 +1,161 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-mono, monospace);
+    color: var(--color-neutral-0, #fff);
+    background: #151719;
+    border-radius: var(--radius-xl, 12px);
+    padding: var(--spacing-14) var(--spacing-16) var(--spacing-32);
+    box-sizing: border-box;
+  }
+
+  /* === TITLEBAR (traffic-light dots only, no label) === */
+  .bd-terminalmsg-titlebar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding-bottom: var(--spacing-16);
+  }
+
+  .bd-terminalmsg-dot {
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  .bd-terminalmsg-dot--red {
+    background: #ff5f56;
+  }
+
+  .bd-terminalmsg-dot--yellow {
+    background: #ffbd2e;
+  }
+
+  .bd-terminalmsg-dot--green {
+    background: #27c93f;
+  }
+
+  /* === PANEL === */
+  .bd-terminalmsg-panel {
+    position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: var(--radius-lg, 10px);
+    padding: var(--spacing-20) var(--spacing-20) calc(var(--spacing-20) + var(--spacing-8));
+  }
+
+  /* Top "legend": text sitting on the top border line, background matching the
+     panel's own bg color masks the border behind the text. */
+  .bd-terminalmsg-panel-label {
+    position: absolute;
+    top: 0;
+    left: var(--spacing-16);
+    transform: translateY(-50%);
+    background: #151719;
+    padding: 0 var(--spacing-8);
+    color: rgba(255, 255, 255, 0.4);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+  }
+
+  .bd-terminalmsg-body {
+    font-size: var(--typography-fontSize-sm);
+    line-height: var(--typography-lineHeight-normal);
+  }
+
+  .bd-terminalmsg-greeting-text {
+    color: var(--color-blue-400, #7ab8ff);
+    font-weight: var(--typography-fontWeight-bold);
+  }
+
+  .bd-terminalmsg-intro {
+    color: var(--color-neutral-0, #fff);
+  }
+
+  .bd-terminalmsg-list {
+    display: block;
+    padding-left: var(--spacing-16);
+    margin: 0 0 var(--spacing-12);
+  }
+
+  .bd-terminalmsg-footer {
+    color: var(--color-neutral-0, #fff);
+    margin: 0;
+  }
+
+  /* === HINT ("legend" sitting on the bottom border line, mirrors panel-label) === */
+  .bd-terminalmsg-hint {
+    position: absolute;
+    bottom: 0;
+    left: var(--spacing-16);
+    transform: translateY(50%);
+    background: #151719;
+    padding: 0 var(--spacing-8);
+    color: rgba(255, 255, 255, 0.5);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs);
+    white-space: nowrap;
+  }
+
+  /* Bracketed key labels inside the hint (e.g. "[Enter]", "[esc]") — bold + white,
+     standing out from the rest of the dimmer hint text. */
+  .bd-terminalmsg-hint-key {
+    color: #fff;
+    font-weight: var(--typography-fontWeight-bold, 700);
+  }
+
+  /* === TYPED-LINE API (bd-terminal-message .lines=...) ===
+     A literal sequence of terminal lines, each with its own semantic
+     color/weight — for content like:
+       $ npx skills add bitdefender/agent-skill-scanner   → cmd
+       ✓ agent-skill-scanner installed                     → ok
+       ────────────────────────────────                    → sep
+       > scan the my-skill skill for security risks        → ask
+       ────────────────────────────────                    → sep
+       # Skill Scan: my-skill                               → strong
+       - Severity: CLEAN                                    → dim
+       - Scan Date: 2026-06-15                               → dim
+       No security findings detected.                        → dim
+  */
+  .bd-terminalmsg-lines {
+    display: block;
+  }
+
+  .bd-terminalmsg-l-cmd {
+    color: var(--color-neutral-0, #fff);
+    font-weight: var(--typography-fontWeight-bold, 700);
+  }
+
+  .bd-terminalmsg-l-ok {
+    color: #27c93f;
+    padding-bottom: var(--spacing-12);
+  }
+
+  .bd-terminalmsg-l-ask {
+    color: var(--color-blue-400, #7ab8ff);
+    padding: var(--spacing-12) 0;
+  }
+
+  .bd-terminalmsg-l-strong {
+    color: var(--color-neutral-0, #fff);
+    font-weight: var(--typography-fontWeight-bold, 700);
+    padding-top: var(--spacing-12);
+  }
+
+  .bd-terminalmsg-l-dim {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .bd-terminalmsg-l-space {
+    height: var(--spacing-12);
+  }
+
+  .bd-terminalmsg-l-sep {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    margin: var(--spacing-8) 0;
+  }
+`;