From 7b59329e35de528c169a7a03db324b767f67665d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aatu=20V=C3=A4is=C3=A4nen?= Date: Tue, 28 Apr 2026 11:55:22 +0300 Subject: [PATCH 1/3] Add the AgenticIdentityFramework component --- .../AgenticIdentity.module.css | 111 +++++++++++++++ .../AgenticIdentity/AgenticIdentity.tsx | 127 ++++++++++++++++++ src/components/AgenticIdentity/index.ts | 1 + src/components/Icon/icons.ts | 5 + src/components/Icon/svg/calendar-check.svg | 4 + src/styles/variables.css | 1 + src/theme/MDXComponents/index.tsx | 2 + 7 files changed, 251 insertions(+) create mode 100644 src/components/AgenticIdentity/AgenticIdentity.module.css create mode 100644 src/components/AgenticIdentity/AgenticIdentity.tsx create mode 100644 src/components/AgenticIdentity/index.ts create mode 100644 src/components/Icon/svg/calendar-check.svg diff --git a/src/components/AgenticIdentity/AgenticIdentity.module.css b/src/components/AgenticIdentity/AgenticIdentity.module.css new file mode 100644 index 00000000..b442c2b7 --- /dev/null +++ b/src/components/AgenticIdentity/AgenticIdentity.module.css @@ -0,0 +1,111 @@ +.agenticIdentityFramework { + display: flex; + flex-direction: column; + gap: var(--m-3); + margin-top: var(--m-4); + + .header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--m-3); + + .title { + font-size: var(--fs-header-4); + margin-bottom: var(--m-0-5); + } + + .description { + font-size: var(--fs-text-xl); + color: var(--color-foreground-muted); + margin: 0; + } + + .link { + position: relative; + display: flex; + align-items: center; + height: auto; + padding: var(--m-1-5) var(--m-4); + overflow: unset; + border-radius: 35px; + font-weight: var(--fw-regular); + + @media (--lg-scr) { + margin-left: auto; + } + } + } + + .pillars { + border-radius: var(--r-lg); + border: 1px solid var(--color-tonal-neutral-0); + } + + .pillar { + padding: var(--m-1-5) var(--m-2); + display: grid; + grid-template-columns: minmax(0, 39.6%) minmax(0, 60.4%); + gap: var(--m-1); + border-bottom: 1px solid var(--color-tonal-neutral-0); + + @media (--md-scr) { + gap: var(--m-3); + } + + &:last-child { + border-bottom: none; + } + + & > div { + display: flex; + align-items: center; + } + + .pillarHeader { + gap: var(--m-2); + + svg { + min-width: var(--m-3); + } + } + + .pillarTitle { + font-size: var(--fs-text-xl); + margin-bottom: var(--m-0-5); + } + + .pillarDescription { + color: var(--color-foreground-muted); + margin-bottom: 0; + font-size: var(--fs-text-lg); + } + + .pillarItems { + list-style: none; + padding-left: 0; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--m-1); + + .pillarItem { + font-size: 15px; + /* white-space: nowrap; */ + display: flex; + align-items: center; + text-align: center; + justify-content: center; + padding: var(--m-1) var(--m-3); + color: var(--color-foreground-slightly-muted); + background-color: var(--color-background-depth-3); + border-radius: var(--m-3); + + &.active { + color: var(--color-white); + background-color: var(--color-dark-purple); + } + } + } + } +} diff --git a/src/components/AgenticIdentity/AgenticIdentity.tsx b/src/components/AgenticIdentity/AgenticIdentity.tsx new file mode 100644 index 00000000..da64f7fd --- /dev/null +++ b/src/components/AgenticIdentity/AgenticIdentity.tsx @@ -0,0 +1,127 @@ +import cn from "clsx"; +import styles from "./AgenticIdentity.module.css"; +import Icon, { IconName } from "../Icon"; +import Button from "../Button"; + +type AgenticIdentityFrameworkProps = { + name: string; + activeCategoryId: string; + href: string; +}; + +type Category = { + id: string; + name: string; +}; + +type Pillar = { + name: string; + description: string; + icon: IconName; + items: Category[]; +}; + +const AgenticIdentityFramework: React.FC = ({ + name, + activeCategoryId, + href, +}) => { + const pillars: Pillar[] = [ + { + name: "Identity", + description: + "Issue cryptographic identities to agents without shared secrets or bootstrapping tokens", + icon: "certificate", + items: [ + { + id: "digital-twins", + name: "Digital Twins", + }, + { + id: "identity-for-long-running-agents", + name: "Identity for long-running agents", + }, + { + id: "identity-for-llm-apps", + name: "Identity for LLM Apps", + }, + ], + }, + { + name: "Access", + description: + "Control and audit what agents can access via MCP proxy, catalog, and LLM rate limits", + icon: "keyholePurple", + items: [ + { id: "mcp-access", name: "MCP Access" }, + { id: "mcp-catalog", name: "MCP Catalog" }, + { id: "llm-access", name: "LLM Access" }, + ], + }, + { + name: "Security", + description: + "Discover unmanaged agents, detect policy violations, and maintain full audit trails", + icon: "shieldCheck2", + items: [ + { id: "visibility-discovery", name: "Visibility & Discovery" }, + { id: "audit-security", name: "Audit & Security" }, + ], + }, + { + name: "Scheduling & Orchestration", + description: + "Run agents reliably on Kubernetes and Temporal with retries, data sharing, and debugging", + icon: "calendarCheck", + items: [ + { id: "data-sharing", name: "Data Sharing" }, + { id: "workflows", name: "Workflows" }, + { id: "developer-experience", name: "Developer Experience" }, + ], + }, + ]; + return ( +
+
+
+

Understand the complete framework

+

+ {name} is part of one of the four pillars. Explore what comes next. +

+
+ +
+
+ {pillars.map((pillar) => ( +
+
+ +
+

{pillar.name}

+

{pillar.description}

+
+
+
+
    + {pillar.items.map((item) => ( +
  • + {item.name} +
    • + ))} +
+
+
+ ))} +
+
+ ); +}; + +export default AgenticIdentityFramework; diff --git a/src/components/AgenticIdentity/index.ts b/src/components/AgenticIdentity/index.ts new file mode 100644 index 00000000..44e21e30 --- /dev/null +++ b/src/components/AgenticIdentity/index.ts @@ -0,0 +1 @@ +export { default } from "./AgenticIdentity"; diff --git a/src/components/Icon/icons.ts b/src/components/Icon/icons.ts index c90513ec..9876bd2f 100644 --- a/src/components/Icon/icons.ts +++ b/src/components/Icon/icons.ts @@ -25,6 +25,7 @@ export { default as bolt } from "./svg/bolt.svg"; export { default as book } from "./svg/book.svg"; export { default as building } from "./svg/building.svg"; export { default as calendar } from "./svg/calendar.svg"; +export { default as calendarCheck } from "./svg/calendar-check.svg"; export { default as card } from "./svg/card.svg"; export { default as checkCircle } from "./svg/check-circle.svg"; export { default as checkRound } from "./svg/check-round.svg"; @@ -99,6 +100,7 @@ export { default as quickstart } from "./svg/quickstart.svg"; export { default as redis } from "./svg/redis.svg"; export { default as server } from "./svg/server-access.svg"; export { default as shieldCheck } from "./svg/shield-check.svg"; +export { default as shieldCheck2 } from "./svg/shield-check2.svg"; export { default as building2 } from "./svg/simple-building.svg"; export { default as cloud2 } from "./svg/simple-cloud.svg"; export { default as code3 } from "./svg/simple-code.svg"; @@ -121,6 +123,8 @@ export { default as chat } from "./svg/chat-circle.svg"; export { default as lightbulb } from "./svg/lightbulb.svg"; export { default as githubLogo } from "./svg/github-logo.svg"; export { default as markdown } from "./svg/markdown.svg"; +export { default as keyhole } from "./svg/keyhole.svg"; +export { default as keyholePurple } from "./svg/keyhole-purple.svg"; // Teleport svgs export { default as agent } from "./teleport-svg/agent.svg"; @@ -138,3 +142,4 @@ export { default as teleportCommunity } from "./teleport-svg/teleport-community- export { default as teleportEnterpriseCloud } from "./teleport-svg/teleport-enterprise-cloud.svg"; export { default as teleportEnterpriseSelfHosted } from "./teleport-svg/teleport-enterprise-self-hosted.svg"; export { default as windowsDesktops } from "./teleport-svg/windows-desktops.svg"; +export { default as certificate } from "./teleport-svg/certificate.svg"; diff --git a/src/components/Icon/svg/calendar-check.svg b/src/components/Icon/svg/calendar-check.svg new file mode 100644 index 00000000..8d2bd837 --- /dev/null +++ b/src/components/Icon/svg/calendar-check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/styles/variables.css b/src/styles/variables.css index f2f0b53a..a2b44621 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -36,6 +36,7 @@ --color-interactive-primary: #9f85ff; --color-interactive-primary-hover: #4126a1; --color-background-depth-2: #fbfbfc; + --color-background-depth-3: #f1f2f4; --color-data-purple-tertiary: #b9a6ff; --color-data-purple-secondary: #6f4ced; --color-data-caribbean-tertiary: #2effd5; diff --git a/src/theme/MDXComponents/index.tsx b/src/theme/MDXComponents/index.tsx index 8f098156..50d08471 100644 --- a/src/theme/MDXComponents/index.tsx +++ b/src/theme/MDXComponents/index.tsx @@ -29,6 +29,7 @@ import { ChangelogLink } from "/src/components/ChangelogLink"; import InlineCTA from "/src/components/InlineCTA/InlineCTA"; import EnterpriseFeatureWidget from "@site/src/components/EnterpriseFeatureWidget/EnterpriseFeatureWidget"; import Callout from "@site/src/components/Callout"; +import AgenticIdentityFramework from "@site/src/components/AgenticIdentity"; const MDXComponents: MDXComponentsObject = { ...OriginalMDXComponents, @@ -69,6 +70,7 @@ const MDXComponents: MDXComponentsObject = { EnterpriseFeatureWidget, InlineCTA, Callout, + AgenticIdentityFramework, }; export default MDXComponents; From 72d80ea751585904b7fc864df8cf179cd91e3bad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aatu=20V=C3=A4is=C3=A4nen?= Date: Tue, 28 Apr 2026 11:57:09 +0300 Subject: [PATCH 2/3] Add test content branch for preview --- config.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/config.json b/config.json index 5ef37a8c..4fe42ca2 100644 --- a/config.json +++ b/config.json @@ -6,7 +6,8 @@ }, { "name": "18.x", - "branch": "branch/v18", + "branch": "aatuvai/2026-04-28-aif-bottom-callout", + "repo_path": "aatuvai/teleport", "isDefault": true }, { From f699eaaae5ec12280f80f8b5913e69a1262316ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aatu=20V=C3=A4is=C3=A4nen?= Date: Tue, 28 Apr 2026 12:31:24 +0300 Subject: [PATCH 3/3] Add the CategoryId type --- .../AgenticIdentity/AgenticIdentity.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/AgenticIdentity/AgenticIdentity.tsx b/src/components/AgenticIdentity/AgenticIdentity.tsx index da64f7fd..0a607df3 100644 --- a/src/components/AgenticIdentity/AgenticIdentity.tsx +++ b/src/components/AgenticIdentity/AgenticIdentity.tsx @@ -5,12 +5,25 @@ import Button from "../Button"; type AgenticIdentityFrameworkProps = { name: string; - activeCategoryId: string; + activeCategoryId: CategoryId; href: string; }; +type CategoryId = + | "digital-twins" + | "identity-for-long-running-agents" + | "identity-for-llm-apps" + | "mcp-access" + | "mcp-catalog" + | "llm-access" + | "visibility-discovery" + | "audit-security" + | "data-sharing" + | "workflows" + | "developer-experience"; + type Category = { - id: string; + id: CategoryId; name: string; };