@repobit/dex-system-design 0.24.4 → 0.24.5

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

@@ -0,0 +1,169 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../list/list-item/list-item.js";
+import "../list/list.js";
+import "../paragraph/paragraph.js";
+import "./terminal-cursor.js";
+import terminalMessageCSS from "./terminal-message.css.js";
+
+class TerminalMessage extends LitElement {
+  static properties = {
+    showTitlebar: { type: Boolean, attribute: "show-titlebar" },
+    panelLabel  : { type: String, attribute: "panel-label" },
+    dimText     : { type: String, attribute: "dim-text" },
+    greeting    : { type: String },
+    icon        : { type: String },
+    intro       : { type: String },
+    items       : { type: Array },
+    footer      : { type: String },
+    footerBold  : { type: String, attribute: "footer-bold" },
+    showCursor  : { type: Boolean, attribute: "show-cursor" },
+    hint        : { type: String },
+    // New: raw typed-line API, for terminals that are a literal sequence of
+    // command/result lines (unlike greeting/intro/items, which model a
+    // single chat-style message). Each entry: { type, text }.
+    // type: "cmd" | "ok" | "ask" | "strong" | "dim" | "sep" | "space"
+    // "sep" and "space" ignore `text`.
+    lines       : { type: Array }
+  };
+
+  static styles = [tokens, terminalMessageCSS];
+
+  constructor() {
+    super();
+    this.showTitlebar = false;
+    this.panelLabel = "";
+    this.dimText = "";
+    this.greeting = "";
+    this.icon = "";
+    this.intro = "";
+    this.items = [];
+    this.footer = "";
+    this.footerBold = "";
+    this.showCursor = false;
+    this.hint = "";
+    this.lines = [];
+  }
+
+  _renderTitlebar() {
+    if (!this.showTitlebar) return nothing;
+    return html`
+      <div class="bd-terminalmsg-titlebar">
+        <span class="bd-terminalmsg-dot bd-terminalmsg-dot--red"></span>
+        <span class="bd-terminalmsg-dot bd-terminalmsg-dot--yellow"></span>
+        <span class="bd-terminalmsg-dot bd-terminalmsg-dot--green"></span>
+      </div>
+    `;
+  }
+
+  // Splits the hint text on bracketed key labels like "[Enter]" or "[esc]" and
+  // wraps each one in a <strong> so it renders bold + white, while the rest of
+  // the text keeps the dim hint color. Works with the plain string prop as-is —
+  // no need to pass markup through `hint`.
+  _renderHint() {
+    if (!this.hint) return nothing;
+
+    const parts = this.hint.split(/(\[[^\]]+\])/g);
+
+    return html`
+      <span class="bd-terminalmsg-hint">
+        ${parts.map((part) =>
+          /^\[[^\]]+\]$/.test(part)
+            ? html`<strong class="bd-terminalmsg-hint-key">${part}</strong>`
+            : part
+        )}
+      </span>
+    `;
+  }
+
+  _renderLines() {
+    if (!this.lines || !this.lines.length) return nothing;
+
+    return html`
+      <div class="bd-terminalmsg-lines">
+        ${this.lines.map(({ type, text }) => {
+          switch (type) {
+            case "sep":
+              return html`<hr class="bd-terminalmsg-l-sep" />`;
+            case "space":
+              return html`<div class="bd-terminalmsg-l-space" aria-hidden="true">&nbsp;</div>`;
+            case "cmd":
+              return html`<div class="bd-terminalmsg-l-cmd">${text}</div>`;
+            case "ok":
+              return html`<div class="bd-terminalmsg-l-ok">${text}</div>`;
+            case "ask":
+              return html`<div class="bd-terminalmsg-l-ask">${text}</div>`;
+            case "strong":
+              return html`<div class="bd-terminalmsg-l-strong">${text}</div>`;
+            case "dim":
+              return html`<div class="bd-terminalmsg-l-dim">${text}</div>`;
+            default:
+              return html`<div class="bd-terminalmsg-l-dim">${text}</div>`;
+          }
+        })}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this._renderTitlebar()}
+
+      <div class="bd-terminalmsg-panel">
+        ${this.panelLabel
+          ? html`<span class="bd-terminalmsg-panel-label">${this.panelLabel}</span>`
+          : nothing}
+
+        <div class="bd-terminalmsg-body">
+          ${this._renderLines()}
+
+          ${this.dimText
+            ? html`<bd-p kind="small" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-dim">${this.dimText}</bd-p>`
+            : nothing}
+
+          ${this.greeting
+            ? html`
+                <bd-p kind="regular" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-greeting">
+                  ${this.icon ? html`${this.icon} ` : nothing}
+                  <span class="bd-terminalmsg-greeting-text">${this.greeting}</span>
+                </bd-p>
+              `
+            : nothing}
+
+          ${this.intro
+            ? html`<bd-p kind="regular" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-intro">${this.intro}</bd-p>`
+            : nothing}
+
+          ${this.items && this.items.length
+            ? html`
+                <bd-list class="bd-terminalmsg-list">
+                  ${this.items.map((item) => html`<bd-li kind="bullet" size="sm" color="#fff">${item}</bd-li>`)}
+                </bd-list>
+              `
+            : nothing}
+
+          ${this.footer || this.footerBold
+            ? html`
+                <bd-p kind="regular" font-family="var(--font-family-mono)" class="bd-terminalmsg-footer">
+                  ${this.footerBold
+                    ? html`<strong>${this.footerBold}</strong> `
+                    : nothing}
+                  ${this.footer}
+                  ${this.showCursor
+                    ? html`<bd-terminal-cursor></bd-terminal-cursor>`
+                    : nothing}
+                </bd-p>
+              `
+            : nothing}
+
+          <slot></slot>
+        </div>
+
+        ${this._renderHint()}
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-terminal-message", TerminalMessage);

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

@@ -0,0 +1,321 @@
+import { html } from "lit";
+import "./terminal-cursor.js";
+import "./terminal-message.js";
+
+export default {
+  title     : "Components/Terminal Message",
+  component : "bd-terminal-message",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs  : {
+      description: {
+        component: `
+**TerminalMessage** structures a terminal-style chat/status message (optional titlebar
+with traffic-light dots, dim label, greeting, intro line, bullet list, footer with
+optional blinking cursor, and a hint line) as attributes/data instead of hand-written
+markup. Renders its own dark background and rounded corners — no wrapper needed.
+
+Every field is optional — omitted fields render nothing rather than empty space.
+
+### Usage
+\`\`\`html
+<bd-terminal-message
+  show-titlebar
+  label="AI Guardian CLI · first-run setup"
+  dim-text="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>
+\`\`\`
+
+### Attributes
+| Attribute      | Type    | Description                                                |
+|-----------------|---------|--------------------------------------------------------------|
+| \`show-titlebar\` | Boolean | Shows the red/yellow/green traffic-light dots bar             |
+| \`label\`         | String  | Text next to the dots (only shown when \`show-titlebar\` is set) |
+| \`dim-text\`      | String  | Faint header line, e.g. "Welcome"                            |
+| \`icon\`          | String  | Emoji or short prefix before the greeting                     |
+| \`greeting\`      | String  | Highlighted intro line, e.g. bot name/greeting                |
+| \`intro\`         | String  | Plain paragraph after the greeting                            |
+| \`items\`         | Array   | Bullet list items                                             |
+| \`footer-bold\`   | String  | Bold lead-in for the footer paragraph                         |
+| \`footer\`        | String  | Footer paragraph text                                         |
+| \`show-cursor\`   | Boolean | Appends a blinking \`bd-terminal-cursor\` after the footer      |
+| \`hint\`          | String  | Small dim hint line at the bottom, e.g. keyboard shortcuts     |
+
+### Slots
+| Slot      | Description                                                    |
+|-----------|-------------------------------------------------------------------|
+| (default) | Extra freeform content appended after every structured field      |
+        `
+      }
+    }
+  },
+  argTypes: {
+    showTitlebar: {
+      control    : "boolean",
+      description: "Show the traffic-light dots titlebar",
+      table      : { category: "Titlebar" }
+    },
+    label: {
+      control    : "text",
+      description: "Titlebar label text",
+      table      : { category: "Titlebar" }
+    },
+    dimText: {
+      control    : "text",
+      description: "Faint header line",
+      table      : { category: "Content" }
+    },
+    icon: {
+      control    : "text",
+      description: "Emoji/prefix before the greeting",
+      table      : { category: "Content" }
+    },
+    greeting: {
+      control    : "text",
+      description: "Highlighted greeting line",
+      table      : { category: "Content" }
+    },
+    intro: {
+      control    : "text",
+      description: "Plain paragraph after the greeting",
+      table      : { category: "Content" }
+    },
+    items: {
+      control    : "object",
+      description: "Bullet list items",
+      table      : { category: "Content" }
+    },
+    footerBold: {
+      control    : "text",
+      description: "Bold lead-in for the footer paragraph",
+      table      : { category: "Content" }
+    },
+    footer: {
+      control    : "text",
+      description: "Footer paragraph text",
+      table      : { category: "Content" }
+    },
+    showCursor: {
+      control    : "boolean",
+      description: "Append a blinking cursor after the footer",
+      table      : { category: "Content" }
+    },
+    hint: {
+      control    : "text",
+      description: "Small dim hint line at the bottom",
+      table      : { category: "Content" }
+    }
+  }
+};
+
+const containerStyle = "width: 480px;";
+
+const render = (args) => html`
+  <div style="${containerStyle}">
+    <bd-terminal-message
+      ?show-titlebar=${args.showTitlebar}
+      label=${args.label}
+      dim-text=${args.dimText}
+      icon=${args.icon}
+      greeting=${args.greeting}
+      intro=${args.intro}
+      .items=${args.items}
+      footer-bold=${args.footerBold}
+      footer=${args.footer}
+      ?show-cursor=${args.showCursor}
+      hint=${args.hint}
+    ></bd-terminal-message>
+  </div>
+`;
+
+
+// ─── Full message with titlebar (matches the AI Guardian reference) ──────────
+
+export const Default = {
+  name: "Default — Full Message With Titlebar",
+  args: {
+    showTitlebar: true,
+    label       : "AI Guardian CLI · first-run setup",
+    dimText     : "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"
+    ],
+    footerBold: "Let's get started.",
+    footer    : "It only takes a minute, and nothing changes until you confirm it.",
+    showCursor: true,
+    hint      : "[Enter] to continue · [esc] to cancel"
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Every field populated, including the titlebar with red/yellow/green dots and a label."
+      }
+    }
+  }
+};
+
+
+// ─── Without titlebar ──────────────────────────────────────────────────────────
+
+export const NoTitlebar = {
+  name: "Without Titlebar",
+  args: {
+    showTitlebar: false,
+    label       : "",
+    dimText     : "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"
+    ],
+    footerBold: "Let's get started.",
+    footer    : "It only takes a minute, and nothing changes until you confirm it.",
+    showCursor: true,
+    hint      : "[Enter] to continue · [esc] to cancel"
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`show-titlebar` left `false` — no dots bar, useful when the surrounding layout already has a window chrome."
+      }
+    }
+  }
+};
+
+
+// ─── Minimal — just greeting + footer ─────────────────────────────────────────
+
+export const Minimal = {
+  name: "Minimal — Greeting + Footer Only",
+  args: {
+    showTitlebar: true,
+    label       : "status",
+    dimText     : "",
+    icon        : "",
+    greeting    : "Scanning complete.",
+    intro       : "",
+    items       : [],
+    footerBold  : "",
+    footer      : "No threats found on this device.",
+    showCursor  : true,
+    hint        : ""
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Only `greeting` and `footer` are set — every other field is omitted entirely, no empty gaps left behind."
+      }
+    }
+  }
+};
+
+
+// ─── List only ────────────────────────────────────────────────────────────────
+
+export const ListOnly = {
+  name: "Bullet List Only",
+  args: {
+    showTitlebar: false,
+    label       : "",
+    dimText     : "",
+    icon        : "",
+    greeting    : "",
+    intro       : "Permissions requested:",
+    items       : [
+      "Read access to project files",
+      "Network access for API calls",
+      "Ability to run shell commands"
+    ],
+    footerBold: "",
+    footer    : "",
+    showCursor: false,
+    hint      : ""
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Only `intro` and `items` are set, demonstrating the list rendering on its own without a greeting or footer."
+      }
+    }
+  }
+};
+
+
+// ─── With extra slotted content ────────────────────────────────────────────────
+
+export const WithSlottedContent = {
+  name  : "With Extra Slotted Content",
+  render: () => html`
+    <div style="${containerStyle}">
+      <bd-terminal-message
+        show-titlebar
+        label="AI Guardian CLI"
+        dim-text="Welcome"
+        icon="👋"
+        greeting="Hi, I'm AI Guardian."
+      >
+        <p style="margin: 12px 0 0; color: #22c55e;">✓ Custom slotted line appended after the structured fields.</p>
+      </bd-terminal-message>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The default slot lets you append arbitrary extra markup after all the structured fields, for cases the attribute API doesn't cover."
+      }
+    }
+  }
+};
+
+
+// ─── Playground ─────────────────────────────────────────────────────────────────
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    showTitlebar: true,
+    label       : "AI Guardian CLI · first-run setup",
+    dimText     : "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"
+    ],
+    footerBold: "Let's get started.",
+    footer    : "It only takes a minute, and nothing changes until you confirm it.",
+    showCursor: true,
+    hint      : "[Enter] to continue · [esc] to cancel"
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit every field live, including the titlebar and bullet list."
+      }
+    }
+  }
+};

package/src/components/trust-panel/trust-panel.css.js

@@ -0,0 +1,167 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+    background: var(--color-blue-50);
+  }
+
+  .bd-trustpanel-wrapper {
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto;
+    padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  .bd-trustpanel-eyebrow {
+    display: block;
+    margin: 0 0 var(--spacing-8);
+    color: var(--color-blue-600);
+    font-weight: var(--typography-fontWeight-medium);
+  }
+
+  .bd-trustpanel-title {
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-900);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+  }
+
+  .bd-trustpanel-description {
+    display: block;
+    margin: 0 0 var(--spacing-40);
+    color: var(--color-neutral-600);
+    max-width: 80ch;
+  }
+
+  .bd-trustpanel-inline-link {
+    color: var(--color-blue-500);
+    font-weight: var(--typography-fontWeight-medium);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .bd-trustpanel-card-link {
+    color: var(--color-blue-500);
+    font-weight: var(--typography-fontWeight-semibold);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .bd-trustpanel-inline-link:hover,
+  .bd-trustpanel-card-link:hover {
+    text-decoration: underline;
+  }
+
+  /* === STATS ROW === */
+  .bd-trustpanel-stats {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: var(--spacing-24);
+    margin-bottom: var(--spacing-40);
+  }
+
+  .bd-trustpanel-stat {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bd-trustpanel-stat-divider {
+    border-top: 2px solid var(--color-blue-500);
+    margin-bottom: var(--spacing-16);
+  }
+
+  .bd-trustpanel-stat-value {
+    color: var(--color-blue-500);
+    font-size: var(--typography-fontSize-3xl, 2rem);
+    font-weight: var(--typography-fontWeight-bold, 700);
+    line-height: 1.1;
+    margin-bottom: var(--spacing-4);
+  }
+
+  .bd-trustpanel-stat-label {
+    color: var(--color-neutral-600);
+    font-size: var(--typography-fontSize-sm);
+  }
+
+  /* === CARDS === */
+  .bd-trustpanel-cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-24);
+  }
+
+
+  .bd-trustpanel-card {
+    background: var(--color-neutral-0, #fff);
+    border: 1px solid var(--color-neutral-100, #e5e7eb);
+    border-radius: var(--radius-2xl);
+    padding: var(--spacing-32);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+
+  .bd-trustpanel-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0px 14px 40px #00000012;
+  }
+
+  .bd-trustpanel-card-eyebrow {
+    display: block;
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-blue-600);
+    font-weight: var(--typography-fontWeight-medium);
+  }
+
+  .bd-trustpanel-card-logos {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-16);
+    margin-bottom: var(--spacing-20);
+    flex-wrap: wrap;
+  }
+
+  .bd-trustpanel-card-logos ::slotted(*) {
+    height: 32px;
+    width: auto;
+    object-fit: contain;
+  }
+
+  .bd-trustpanel-card-title {
+    margin: 0 0 var(--spacing-12);
+    color: var(--color-neutral-900);
+  }
+
+  .bd-trustpanel-card-description {
+    display: block;
+    margin: 0 0 var(--spacing-16);
+    color: var(--color-neutral-600);
+    flex: 1;
+  }
+
+  /* === RESPONSIVE === */
+  @media (max-width: 899px) {
+    .bd-trustpanel-stats {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (max-width: 767px) {
+    .bd-trustpanel-stats {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .bd-trustpanel-cards {
+      grid-template-columns: 1fr;
+    }
+
+    .bd-trustpanel-wrapper {
+      padding: var(--spacing-32) var(--spacing-24);
+    }
+
+    .bd-trustpanel-card {
+      padding: var(--spacing-24);
+    }
+  }
+`;