@agent-native/core 0.82.0 → 0.84.0

package/corpus/core/src/client/components/CodeRequiredDialog.tsx

@@ -162,7 +162,9 @@ export function CodeRequiredDialog({
               Object.assign(e.currentTarget.style, s.optionCardHover)
             }
             onMouseLeave={(e) =>
-              Object.assign(e.currentTarget.style, { borderColor: "#e5e7eb" })
+              Object.assign(e.currentTarget.style, {
+                borderColor: "hsl(var(--border))",
+              })
             }
           >
             <div style={s.optionIcon}>
@@ -190,7 +192,9 @@ export function CodeRequiredDialog({
                 Object.assign(e.currentTarget.style, s.optionCardHover)
               }
               onMouseLeave={(e) =>
-                Object.assign(e.currentTarget.style, { borderColor: "#e5e7eb" })
+                Object.assign(e.currentTarget.style, {
+                  borderColor: "hsl(var(--border))",
+                })
               }
               onClick={handleBuilderAgent}
             >
@@ -254,7 +258,7 @@ export function CodeRequiredDialog({
               }
               onMouseLeave={(e) =>
                 Object.assign(e.currentTarget.style, {
-                  borderColor: "#e5e7eb",
+                  borderColor: "hsl(var(--border))",
                 })
               }
             >
@@ -294,7 +298,13 @@ export function CodeRequiredDialog({
         )}
 
         {error && (
-          <p style={{ color: "#ef4444", fontSize: 12, marginTop: 12 }}>
+          <p
+            style={{
+              color: "hsl(var(--destructive))",
+              fontSize: 12,
+              marginTop: 12,
+            }}
+          >
             {error}
           </p>
         )}
@@ -326,8 +336,9 @@ const s: Record<string, React.CSSProperties> = {
   },
   dialog: {
     position: "relative",
-    background: "#fff",
+    background: "hsl(var(--popover))",
     borderRadius: "12px",
+    border: "1px solid hsl(var(--border))",
     maxWidth: "460px",
     width: "100%",
     padding: "24px",
@@ -335,7 +346,7 @@ const s: Record<string, React.CSSProperties> = {
       "0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1)",
     fontFamily:
       '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    color: "#111827",
+    color: "hsl(var(--popover-foreground))",
   },
   header: {
     display: "flex",
@@ -348,11 +359,11 @@ const s: Record<string, React.CSSProperties> = {
     width: "40px",
     height: "40px",
     borderRadius: "10px",
-    background: "#f3f4f6",
+    background: "hsl(var(--muted))",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: "#6b7280",
+    color: "hsl(var(--muted-foreground))",
   },
   title: {
     margin: 0,
@@ -363,7 +374,7 @@ const s: Record<string, React.CSSProperties> = {
   subtitle: {
     margin: "4px 0 0",
     fontSize: "13px",
-    color: "#6b7280",
+    color: "hsl(var(--muted-foreground))",
     lineHeight: "1.5",
   },
   options: {
@@ -377,7 +388,7 @@ const s: Record<string, React.CSSProperties> = {
     alignItems: "flex-start",
     gap: "14px",
     padding: "14px",
-    border: "1px solid #e5e7eb",
+    border: "1px solid hsl(var(--border))",
     borderRadius: "10px",
     background: "transparent",
     cursor: "pointer",
@@ -388,7 +399,7 @@ const s: Record<string, React.CSSProperties> = {
     color: "inherit",
   },
   optionCardHover: {
-    borderColor: "#a5b4fc",
+    borderColor: "hsl(var(--ring))",
   },
   optionLink: {
     textDecoration: "none",
@@ -410,7 +421,7 @@ const s: Record<string, React.CSSProperties> = {
   },
   optionDesc: {
     fontSize: "12px",
-    color: "#6b7280",
+    color: "hsl(var(--muted-foreground))",
     lineHeight: "1.5",
   },
   badge: {
@@ -420,7 +431,7 @@ const s: Record<string, React.CSSProperties> = {
     fontSize: "10px",
     fontWeight: 600,
     color: "#00B5FF",
-    background: "#e0f2fe",
+    background: "hsl(var(--primary) / 0.08)",
     padding: "2px 8px",
     borderRadius: "99px",
     textTransform: "uppercase",
@@ -435,7 +446,7 @@ const s: Record<string, React.CSSProperties> = {
     cursor: "pointer",
     padding: "6px",
     borderRadius: "6px",
-    color: "#9ca3af",
+    color: "hsl(var(--muted-foreground))",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -445,7 +456,7 @@ const s: Record<string, React.CSSProperties> = {
     padding: "12px",
     borderRadius: "8px",
     border: "1px solid #22c55e40",
-    background: "#f0fdf4",
+    background: "rgba(34,197,94,0.08)",
     display: "flex",
     flexDirection: "column",
     gap: "4px",

package/corpus/core/src/client/components/MissingKeyCard.tsx

@@ -12,12 +12,13 @@ export function MissingKeyCard({
   return (
     <div
       style={{
-        border: "1px solid #e2e8f0",
+        border: "1px solid hsl(var(--border))",
         borderRadius: 8,
         padding: "24px 28px",
         maxWidth: 420,
         margin: "32px auto",
-        background: "#f8fafc",
+        background: "hsl(var(--card))",
+        color: "hsl(var(--card-foreground))",
         textAlign: "center",
       }}
     >
@@ -25,13 +26,19 @@ export function MissingKeyCard({
         style={{
           fontSize: 14,
           fontWeight: 600,
-          color: "#334155",
+          color: "hsl(var(--card-foreground))",
           marginBottom: 8,
         }}
       >
         {label}
       </div>
-      <p style={{ fontSize: 13, color: "#64748b", margin: "0 0 16px" }}>
+      <p
+        style={{
+          fontSize: 13,
+          color: "hsl(var(--muted-foreground))",
+          margin: "0 0 16px",
+        }}
+      >
         {message}
       </p>
       <a
@@ -41,8 +48,8 @@ export function MissingKeyCard({
           padding: "8px 16px",
           fontSize: 13,
           fontWeight: 500,
-          color: "#fff",
-          background: "#3b82f6",
+          color: "hsl(var(--primary-foreground))",
+          background: "hsl(var(--primary))",
           borderRadius: 6,
           textDecoration: "none",
         }}

package/corpus/core/src/client/composer/TiptapComposer.tsx

@@ -750,6 +750,7 @@ const FRIENDLY_MODEL_NAMES: Record<string, string> = {
   "qwen3-coder": "Qwen3 Coder",
   "kimi-k2-5": "Kimi K2.5",
   "deepseek-v3-1": "DeepSeek v3.1",
+  "z-ai/glm-5.2": "GLM 5.2",
 };
 
 export const MODEL_SELECTOR_POPOVER_STYLE = {
@@ -759,13 +760,13 @@ export const MODEL_SELECTOR_POPOVER_STYLE = {
 
 function friendlyModelName(model: string): string {
   if (FRIENDLY_MODEL_NAMES[model]) return FRIENDLY_MODEL_NAMES[model];
-  // Claude: claude-{tier}-{major}-{minor}[-dateYYYYMMDD] → Tier Major.Minor
+  // Claude: claude-{tier}-{major}[-minor][-dateYYYYMMDD] → Tier Major[.Minor]
   const claude = model.match(
-    /^claude-(opus|sonnet|haiku)-(\d+)-(\d+)(?:-\d{8,})?$/,
+    /^claude-(opus|sonnet|haiku)-(\d+)(?:-(\d+))?(?:-\d{8,})?$/,
   );
   if (claude) {
     const tier = claude[1][0].toUpperCase() + claude[1].slice(1);
-    return `${tier} ${claude[2]}.${claude[3]}`;
+    return `${tier} ${claude[2]}${claude[3] ? `.${claude[3]}` : ""}`;
   }
   // GPT: gpt-{major}-{minor}[-suffix] or gpt-{major}.{minor}[-suffix]
   if (model.startsWith("gpt-")) {

package/corpus/core/src/client/extensions/ExtensionsSidebarSection.tsx

@@ -596,7 +596,6 @@ function ExtensionSortMenu({
           <DropdownMenuRadioItem value="alphabetical">
             {copy.alphabetical}
           </DropdownMenuRadioItem>
-          <DropdownMenuSeparator />
           <DropdownMenuRadioItem value="manual">
             {copy.manualOrder}
           </DropdownMenuRadioItem>

package/corpus/core/src/client/guided-questions.tsx

@@ -1,7 +1,6 @@
 import {
   IconCheck,
   IconChevronRight,
-  IconHelpCircle,
   IconUpload,
   IconX,
 } from "@tabler/icons-react";
@@ -433,8 +432,8 @@ export function GuidedQuestionFlow({
   questions,
   onSubmit,
   onSkip,
-  title = "A few choices before I generate",
-  description = "Pick what you know. Use Other for anything that does not fit, or let the agent decide.",
+  title = "Before I generate",
+  description = "Use Other for custom details, or let the agent decide.",
   skipLabel = "Skip",
   submitLabel = "Continue",
   className,
@@ -465,28 +464,23 @@ export function GuidedQuestionFlow({
   return (
     <div
       className={cn(
-        "flex h-full w-full items-center justify-center bg-background text-foreground",
+        "guided-question-flow flex h-full w-full items-center justify-center bg-background text-foreground",
         className,
       )}
     >
-      <div className="flex max-h-full w-full max-w-3xl flex-col px-4 py-6 sm:px-8 sm:py-10">
-        <div className="mb-6 flex items-start gap-3">
-          <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-primary">
-            <IconHelpCircle className="h-5 w-5" />
-          </div>
-          <div className="min-w-0">
-            <h2 className="text-xl font-semibold tracking-normal text-foreground sm:text-2xl">
-              {title}
-            </h2>
-            {description && (
-              <p className="mt-1 max-w-2xl text-sm leading-5 text-muted-foreground">
-                {description}
-              </p>
-            )}
-          </div>
+      <div className="guided-question-flow-inner flex max-h-full w-full max-w-3xl flex-col px-3 py-4">
+        <div className="guided-question-flow-header mb-4 min-w-0">
+          <h2 className="guided-question-flow-title text-lg font-semibold leading-tight tracking-normal text-foreground">
+            {title}
+          </h2>
+          {description && (
+            <p className="guided-question-flow-description mt-1 max-w-2xl text-sm leading-5 text-muted-foreground">
+              {description}
+            </p>
+          )}
         </div>
 
-        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto pe-1">
+        <div className="guided-question-flow-list min-h-0 flex-1 overflow-y-auto pe-1">
           {questions.map((question, index) => (
             <QuestionCard
               key={question.id}
@@ -501,7 +495,7 @@ export function GuidedQuestionFlow({
           ))}
         </div>
 
-        <div className="mt-5 flex shrink-0 items-center justify-between gap-4 border-t border-border pt-4">
+        <div className="guided-question-flow-footer mt-4 flex shrink-0 items-center justify-between gap-3 border-t border-border pt-3">
           <div className="flex items-center gap-1.5">
             {questions.map((question, index) => (
               <span
@@ -553,9 +547,9 @@ function QuestionCard({
   onSubmitAnswer: (value: unknown) => void;
 }) {
   return (
-    <section className="rounded-lg border border-border bg-card/65 p-4 shadow-sm">
-      <div className="mb-3 flex gap-3">
-        <div className="flex h-6 min-w-6 items-center justify-center rounded-md bg-muted text-xs font-medium text-muted-foreground">
+    <section className="guided-question-card border-t border-border/60 py-3 first:border-t-0 first:pt-0 last:pb-0">
+      <div className="mb-2 flex gap-2.5">
+        <div className="guided-question-index mt-0.5 min-w-4 text-xs font-medium tabular-nums text-muted-foreground">
           {index + 1}
         </div>
         <div className="min-w-0">
@@ -670,8 +664,8 @@ function TextOptions({
   const allowOther = question.allowOther !== false;
 
   return (
-    <div className="space-y-3">
-      <div className="grid gap-2 sm:grid-cols-2">
+    <div className="space-y-2.5">
+      <div className="guided-question-flow-options grid grid-cols-1 gap-2">
         {options.map((option) => (
           <OptionButton
             key={`${option.value}:${option.label}`}
@@ -724,7 +718,7 @@ function OptionButton({
       onClick={onClick}
       aria-pressed={selected}
       className={cn(
-        "group flex min-h-[56px] cursor-pointer items-start gap-2 rounded-md border px-3 py-2 text-start transition-colors",
+        "group flex min-h-11 min-w-0 cursor-pointer items-start gap-2 rounded-md border px-2.5 py-2 text-start transition-colors",
         selected
           ? "border-primary bg-primary/10 text-foreground ring-2 ring-primary/25"
           : "border-border bg-muted/30 text-muted-foreground hover:border-muted-foreground/50 hover:bg-muted/45 hover:text-foreground",

package/corpus/core/src/client/integrations/IntegrationCard.tsx

@@ -38,7 +38,7 @@ function StatusDot({
       ? "bg-green-500"
       : configured
         ? "bg-yellow-500"
-        : "bg-gray-400";
+        : "bg-muted-foreground/55";
   return <span className={`inline-block h-2 w-2 rounded-full ${color}`} />;
 }
 

package/corpus/core/src/client/integrations/IntegrationsPanel.tsx

@@ -598,7 +598,7 @@ export function IntegrationsPanel() {
                         ? "bg-green-500"
                         : s.configured
                           ? "bg-yellow-500"
-                          : "bg-gray-400"
+                          : "bg-muted-foreground/55"
                     }`}
                   />
                 )}

package/corpus/core/src/client/onboarding/OnboardingBanner.tsx

@@ -53,8 +53,8 @@ const styles: Record<string, React.CSSProperties> = {
     width: "100%",
     padding: "8px 12px",
     border: "none",
-    borderBottom: "1px solid rgba(255,255,255,0.06)",
-    background: "rgba(59,130,246,0.06)",
+    borderBottom: "1px solid hsl(var(--border) / 0.7)",
+    background: "hsl(var(--primary) / 0.06)",
     color: "inherit",
     fontSize: 12,
     cursor: "pointer",

package/corpus/core/src/client/onboarding/OnboardingPanel.tsx

@@ -749,9 +749,9 @@ function buttonPrimary(primary: boolean | undefined): React.CSSProperties {
     borderRadius: 6,
     border: primary
       ? "1px solid transparent"
-      : "1px solid rgba(255,255,255,0.15)",
-    background: primary ? "#3b82f6" : "rgba(255,255,255,0.04)",
-    color: primary ? "#fff" : "inherit",
+      : "1px solid hsl(var(--border) / 0.8)",
+    background: primary ? "hsl(var(--primary))" : "hsl(var(--muted) / 0.4)",
+    color: primary ? "hsl(var(--primary-foreground))" : "inherit",
     fontSize: 12,
     fontWeight: 500,
     cursor: "pointer",
@@ -761,9 +761,9 @@ function buttonPrimary(primary: boolean | undefined): React.CSSProperties {
 function buttonDisabled(primary: boolean | undefined): React.CSSProperties {
   return {
     ...buttonPrimary(primary),
-    border: "1px solid rgba(255,255,255,0.12)",
-    background: primary ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.04)",
-    color: "rgba(255,255,255,0.5)",
+    border: "1px solid hsl(var(--border) / 0.6)",
+    background: "hsl(var(--muted) / 0.35)",
+    color: "hsl(var(--muted-foreground))",
     cursor: "not-allowed",
   };
 }
@@ -792,8 +792,8 @@ function badgeStyle(
 
 const styles: Record<string, React.CSSProperties> = {
   root: {
-    borderBottom: "1px solid rgba(255,255,255,0.06)",
-    background: "rgba(255,255,255,0.02)",
+    borderBottom: "1px solid hsl(var(--border) / 0.7)",
+    background: "hsl(var(--muted) / 0.25)",
     fontSize: 12,
     display: "flex",
     flexDirection: "column",
@@ -804,7 +804,7 @@ const styles: Record<string, React.CSSProperties> = {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    borderBottom: "1px solid rgba(255,255,255,0.06)",
+    borderBottom: "1px solid hsl(var(--border) / 0.7)",
     background: "rgba(34,197,94,0.04)",
     fontSize: 12,
   },
@@ -915,7 +915,7 @@ const styles: Record<string, React.CSSProperties> = {
     width: 16,
     height: 16,
     borderRadius: "50%",
-    border: "1px solid rgba(255,255,255,0.2)",
+    border: "1px solid hsl(var(--border))",
   },
   cardBody: {
     paddingBlock: "0 10px",
@@ -937,9 +937,9 @@ const styles: Record<string, React.CSSProperties> = {
   },
   method: {
     padding: "8px 10px",
-    border: "1px solid rgba(255,255,255,0.06)",
+    border: "1px solid hsl(var(--border) / 0.65)",
     borderRadius: 6,
-    background: "rgba(255,255,255,0.02)",
+    background: "hsl(var(--card) / 0.55)",
     display: "flex",
     flexDirection: "column",
     gap: 6,
@@ -967,8 +967,8 @@ const styles: Record<string, React.CSSProperties> = {
     gap: 8,
     padding: "7px 8px",
     borderRadius: 6,
-    border: "1px solid rgba(255,255,255,0.08)",
-    background: "rgba(255,255,255,0.025)",
+    border: "1px solid hsl(var(--border) / 0.7)",
+    background: "hsl(var(--muted) / 0.35)",
     color: "inherit",
     cursor: "pointer",
     fontSize: 11,
@@ -996,8 +996,8 @@ const styles: Record<string, React.CSSProperties> = {
     padding: "6px 8px",
     fontSize: 12,
     borderRadius: 5,
-    border: "1px solid rgba(255,255,255,0.1)",
-    background: "rgba(0,0,0,0.25)",
+    border: "1px solid hsl(var(--input))",
+    background: "hsl(var(--background))",
     color: "inherit",
     outline: "none",
     boxSizing: "border-box" as const,
@@ -1007,13 +1007,17 @@ const styles: Record<string, React.CSSProperties> = {
     padding: "6px 8px",
     fontSize: 12,
     borderRadius: 5,
-    border: "1px solid rgba(255,255,255,0.1)",
-    background: "rgba(0,0,0,0.25)",
+    border: "1px solid hsl(var(--input))",
+    background: "hsl(var(--background))",
     color: "inherit",
     outline: "none",
     boxSizing: "border-box" as const,
   },
-  methodHint: { margin: 0, fontSize: 11, color: "rgba(255,255,255,0.62)" },
+  methodHint: {
+    margin: 0,
+    fontSize: 11,
+    color: "hsl(var(--muted-foreground))",
+  },
   errText: { margin: 0, fontSize: 11, color: "#f87171" },
   footer: {
     padding: "0 12px 10px",

package/corpus/core/src/client/resources/ResourceEditor.tsx

@@ -11,6 +11,10 @@ import React, {
 } from "react";
 import { Markdown } from "tiptap-markdown";
 
+import {
+  CLAUDE_SONNET_MODEL_ID,
+  CLAUDE_SONNET_MODEL_LABEL,
+} from "../../agent/model-config.js";
 import {
   type ParsedFrontmatter,
   getRemoteAgentIdFromPath,
@@ -189,7 +193,9 @@ function FrontmatterBar({
             <option value="inherit">Default model</option>
             <option value="claude-fable-5">Claude Fable 5</option>
             <option value="claude-opus-4-8">Claude Opus 4.8</option>
-            <option value="claude-sonnet-4-6">Claude Sonnet 4.6</option>
+            <option value={CLAUDE_SONNET_MODEL_ID}>
+              {CLAUDE_SONNET_MODEL_LABEL}
+            </option>
             <option value="claude-haiku-4-5-20251001">Claude Haiku 4.5</option>
           </select>
         ) : null}
@@ -665,7 +671,7 @@ function InlineBubbleToolbar({ editor }: { editor: any }) {
             onClick={handleSetLink}
             style={{
               fontSize: 11,
-              color: "#60a5fa",
+              color: "hsl(var(--primary))",
               padding: "2px 6px",
               fontWeight: 500,
               background: "none",
@@ -689,7 +695,7 @@ function InlineBubbleToolbar({ editor }: { editor: any }) {
                   style={{
                     width: 1,
                     height: 16,
-                    background: "rgba(255,255,255,0.2)",
+                    background: "hsl(var(--border))",
                     margin: "0 2px",
                   }}
                 />
@@ -1437,28 +1443,30 @@ const editorStyles = `
 .re-bubble-toolbar {
   display: flex;
   align-items: center;
-  background: hsl(0 0% 15%);
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  border: 1px solid hsl(var(--border));
   border-radius: 6px;
   padding: 3px;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(255 255 255 / 0.06);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
 }
 .re-bubble-btn {
   padding: 3px 6px;
   border-radius: 4px;
   font-size: 12px;
-  color: rgba(255,255,255,0.75);
+  color: hsl(var(--muted-foreground));
   background: none;
   border: none;
   cursor: pointer;
   line-height: 1;
 }
 .re-bubble-btn:hover {
-  background: rgba(255,255,255,0.12);
-  color: white;
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
 }
 .re-bubble-btn--active {
-  background: rgba(255,255,255,0.18);
-  color: white;
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
 }
 
 /* Slash command menu */

package/corpus/core/src/client/resources/ResourcesPanel.tsx

@@ -22,6 +22,10 @@ import React, {
   useMemo,
 } from "react";
 
+import {
+  CLAUDE_SONNET_MODEL_ID,
+  CLAUDE_SONNET_MODEL_LABEL,
+} from "../../agent/model-config.js";
 import { serializeFrontmatter } from "../../resources/metadata.js";
 import { sendToAgentChat } from "../agent-chat.js";
 import { agentNativePath } from "../api-path.js";
@@ -90,7 +94,7 @@ const AGENT_MODEL_OPTIONS = [
   { value: "inherit", label: "Default model" },
   { value: "claude-fable-5", label: "Claude Fable 5" },
   { value: "claude-opus-4-8", label: "Claude Opus 4.8" },
-  { value: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+  { value: CLAUDE_SONNET_MODEL_ID, label: CLAUDE_SONNET_MODEL_LABEL },
   { value: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
 ] as const;
 

package/corpus/core/src/client/settings/SettingsPanel.tsx

@@ -499,12 +499,13 @@ function ManualSetupCard({
 // ─── LLM helpers ────────────────────────────────────────────────────────────
 
 function friendlyModelName(model: string): string {
+  if (model === "z-ai/glm-5.2") return "GLM 5.2";
   const claude = model.match(
-    /^claude-(opus|sonnet|haiku)-(\d+)-(\d+)(?:-\d{8,})?$/,
+    /^claude-(opus|sonnet|haiku)-(\d+)(?:-(\d+))?(?:-\d{8,})?$/,
   );
   if (claude) {
     const tier = claude[1][0].toUpperCase() + claude[1].slice(1);
-    return `${tier} ${claude[2]}.${claude[3]}`;
+    return `${tier} ${claude[2]}${claude[3] ? `.${claude[3]}` : ""}`;
   }
   if (model.startsWith("gpt-")) return `GPT-${model.slice(4)}`;
   if (/^o\d/.test(model)) return model;
@@ -718,6 +719,10 @@ function LLMSectionInner({
     envVar,
     builderConnected,
   });
+  const manualSetupHint =
+    selectedEngine === "ai-sdk:openrouter"
+      ? "Provide an OpenRouter key to use OpenRouter models like GLM 5.2."
+      : "Choose your AI provider and model.";
 
   const engineChanged =
     selectedEngine !== currentEngine || selectedModel !== currentModel;
@@ -889,7 +894,7 @@ function LLMSectionInner({
           />
           {!builderConnected && (
             <ManualSetupCard
-              hint="Choose your AI provider and model."
+              hint={manualSetupHint}
               docsUrl={PROVIDER_DOCS[selectedEngine]}
               sourceBadge={sourceBadge}
               docsLabel="Get an API key"