@vellumai/assistant 0.5.11 → 0.5.13

package/src/runtime/routes/inbound-stages/acl-enforcement.ts

@@ -447,10 +447,11 @@ export async function enforceIngressAcl(
           );
         }
 
+        const replyText = guardianNotified
+          ? `Hmm looks like you don't have access to talk to me. I'll let ${resolveGuardianLabel(sourceChannel, canonicalAssistantId)} know you tried talking to me and get back to you.`
+          : "Sorry, you haven't been approved to message this assistant.";
+        let replyDelivered = false;
         if (replyCallbackUrl) {
-          const replyText = guardianNotified
-            ? `Hmm looks like you don't have access to talk to me. I'll let ${resolveGuardianLabel(sourceChannel, canonicalAssistantId)} know you tried talking to me and get back to you.`
-            : "Sorry, you haven't been approved to message this assistant.";
           const replyPayload: Parameters<typeof deliverChannelReply>[1] = {
             chatId: conversationExternalId,
             text: replyText,
@@ -467,6 +468,7 @@ export async function enforceIngressAcl(
               replyPayload,
               mintBearerToken(),
             );
+            replyDelivered = true;
           } catch (err) {
             log.error(
               { err, conversationExternalId },
@@ -481,6 +483,9 @@ export async function enforceIngressAcl(
             accepted: true,
             denied: true,
             reason: "not_a_member",
+            // Include reply text so the gateway can deliver directly when
+            // callback delivery failed (e.g. signing-key mismatch → 401).
+            ...(!replyDelivered && { replyText }),
           }),
           guardianVerifyCode,
         };
@@ -714,15 +719,16 @@ export async function enforceIngressAcl(
             }
           }
 
+          const inactiveReplyText = guardianNotified
+            ? `Hmm looks like you don't have access to talk to me. I'll let ${resolveGuardianLabel(sourceChannel, canonicalAssistantId)} know you tried talking to me and get back to you.`
+            : "Sorry, you haven't been approved to message this assistant.";
+          let inactiveReplyDelivered = false;
           if (replyCallbackUrl) {
-            const replyText = guardianNotified
-              ? `Hmm looks like you don't have access to talk to me. I'll let ${resolveGuardianLabel(sourceChannel, canonicalAssistantId)} know you tried talking to me and get back to you.`
-              : "Sorry, you haven't been approved to message this assistant.";
             const inactiveReplyPayload: Parameters<
               typeof deliverChannelReply
             >[1] = {
               chatId: conversationExternalId,
-              text: replyText,
+              text: inactiveReplyText,
               assistantId,
             };
             // On Slack, send as ephemeral so only the requester sees the rejection
@@ -739,6 +745,7 @@ export async function enforceIngressAcl(
                 inactiveReplyPayload,
                 mintBearerToken(),
               );
+              inactiveReplyDelivered = true;
             } catch (err) {
               log.error(
                 { err, conversationExternalId },
@@ -752,6 +759,7 @@ export async function enforceIngressAcl(
               accepted: true,
               denied: true,
               reason: `member_${channelStatusToMemberStatus(resolvedMember.channel.status)}`,
+              ...(!inactiveReplyDelivered && { replyText: inactiveReplyText }),
             }),
             guardianVerifyCode,
           };
@@ -763,10 +771,13 @@ export async function enforceIngressAcl(
           { sourceChannel, channelId: resolvedMember.channel.id },
           "Ingress ACL: member policy deny",
         );
+        const denyReplyText =
+          "Sorry, you haven't been approved to message this assistant.";
+        let denyReplyDelivered = false;
         if (replyCallbackUrl) {
           const denyPayload: Parameters<typeof deliverChannelReply>[1] = {
             chatId: conversationExternalId,
-            text: "Sorry, you haven't been approved to message this assistant.",
+            text: denyReplyText,
             assistantId,
           };
           if (sourceChannel === "slack" && (canonicalSenderId ?? rawSenderId)) {
@@ -779,6 +790,7 @@ export async function enforceIngressAcl(
               denyPayload,
               mintBearerToken(),
             );
+            denyReplyDelivered = true;
           } catch (err) {
             log.error(
               { err, conversationExternalId },
@@ -792,6 +804,7 @@ export async function enforceIngressAcl(
             accepted: true,
             denied: true,
             reason: "policy_deny",
+            ...(!denyReplyDelivered && { replyText: denyReplyText }),
           }),
           guardianVerifyCode,
         };

package/src/runtime/routes/integrations/slack/share.ts

@@ -28,7 +28,7 @@ const log = getLogger("slack-share");
  * Resolve the Slack bot token from the OAuth connection store.
  */
 async function resolveSlackToken(): Promise<string | undefined> {
-  const conn = getConnectionByProvider("integration:slack");
+  const conn = getConnectionByProvider("slack");
   return conn
     ? await getSecureKeyAsync(`oauth_connection/${conn.id}/access_token`)
     : undefined;

package/src/runtime/routes/oauth-apps.ts

@@ -81,7 +81,8 @@ export function oauthAppsRouteDefinitions(): RouteDefinition[] {
               description: providerRow.description ?? null,
               dashboard_url: providerRow.dashboardUrl ?? null,
               client_id_placeholder: providerRow.clientIdPlaceholder ?? null,
-              requires_client_secret: providerRow.requiresClientSecret ?? 1,
+              requires_client_secret: !!(providerRow.requiresClientSecret ?? 1),
+              supports_managed_mode: !!providerRow.managedServiceConfigKey,
             }
           : null;
 

package/src/runtime/routes/secret-routes.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 
 import {
+  getPlatformAssistantId,
   setPlatformAssistantId,
   setPlatformBaseUrl,
   setPlatformOrganizationId,
@@ -86,7 +87,10 @@ async function queueApiKeyPropagation(
         return;
       }
       try {
-        await cesClient.updateAssistantApiKey(apiKey);
+        await cesClient.updateAssistantApiKey(
+          apiKey,
+          getPlatformAssistantId() || undefined,
+        );
         log.info(
           "Pushed queued assistant API key to CES after handshake completed",
         );
@@ -106,7 +110,7 @@ async function queueApiKeyPropagation(
 
 export async function handleAddSecret(
   req: Request,
-  getCesClient?: () => CesClient | undefined,
+  deps?: SecretRouteDeps,
 ): Promise<Response> {
   let body: { type?: string; name?: string; value?: string };
   try {
@@ -192,9 +196,7 @@ export async function handleAddSecret(
           500,
         );
       }
-      clearEmbeddingBackendCache();
-      invalidateConfigCache();
-      await initializeProviders(getConfig());
+      await refreshProvidersAfterSecretChange(deps);
       log.info({ provider: name }, "API key updated via HTTP");
       return Response.json({ success: true, type, name }, { status: 201 });
     }
@@ -275,16 +277,19 @@ export async function handleAddSecret(
         }
       }
       if (isManagedProxyCredential(service, field)) {
-        await initializeProviders(getConfig());
+        await refreshProvidersAfterSecretChange(deps);
         if (service === "vellum" && field === "assistant_api_key") {
           // Push the API key to CES so managed credential materialization
           // works even though the handshake ran before the key was available.
           const generation = ++apiKeyGeneration;
-          const cesClient = getCesClient?.();
+          const cesClient = deps?.getCesClient?.();
           if (cesClient) {
             if (cesClient.isReady()) {
               try {
-                await cesClient.updateAssistantApiKey(value);
+                await cesClient.updateAssistantApiKey(
+                  value,
+                  getPlatformAssistantId() || undefined,
+                );
                 log.info(
                   "Pushed assistant API key to CES after managed proxy credential update",
                 );
@@ -394,7 +399,10 @@ export async function handleReadSecret(req: Request): Promise<Response> {
   }
 }
 
-export async function handleDeleteSecret(req: Request): Promise<Response> {
+export async function handleDeleteSecret(
+  req: Request,
+  deps?: SecretRouteDeps,
+): Promise<Response> {
   let body: { type?: string; name?: string };
   try {
     body = (await req.json()) as { type?: string; name?: string };
@@ -438,9 +446,7 @@ export async function handleDeleteSecret(req: Request): Promise<Response> {
           500,
         );
       }
-      clearEmbeddingBackendCache();
-      invalidateConfigCache();
-      await initializeProviders(getConfig());
+      await refreshProvidersAfterSecretChange(deps);
       log.info({ provider: name }, "API key deleted via HTTP");
       return Response.json({ success: true, type, name });
     }
@@ -488,7 +494,7 @@ export async function handleDeleteSecret(req: Request): Promise<Response> {
         setSentryUserId(undefined);
       }
       if (isManagedProxyCredential(service, field)) {
-        await initializeProviders(getConfig());
+        await refreshProvidersAfterSecretChange(deps);
       }
       log.info({ service, field }, "Credential deleted via HTTP");
       return Response.json({ success: true, type, name });
@@ -548,6 +554,30 @@ export async function handleListSecrets(): Promise<Response> {
 export interface SecretRouteDeps {
   /** Accessor for the CES client, used to push API key updates after hatch. */
   getCesClient?: () => CesClient | undefined;
+  /**
+   * Called after provider-affecting credentials change so live conversations
+   * can be reloaded with fresh provider instances.
+   */
+  onProviderCredentialsChanged?: () => void | Promise<void>;
+}
+
+async function refreshProvidersAfterSecretChange(
+  deps?: SecretRouteDeps,
+): Promise<void> {
+  clearEmbeddingBackendCache();
+  invalidateConfigCache();
+  await initializeProviders(getConfig());
+
+  if (!deps?.onProviderCredentialsChanged) return;
+
+  try {
+    await deps.onProviderCredentialsChanged();
+  } catch (err) {
+    log.warn(
+      { error: err instanceof Error ? err.message : String(err) },
+      "Failed to refresh live conversations after provider credential change",
+    );
+  }
 }
 
 export function secretRouteDefinitions(
@@ -557,7 +587,7 @@ export function secretRouteDefinitions(
     {
       endpoint: "secrets",
       method: "POST",
-      handler: async ({ req }) => handleAddSecret(req, deps?.getCesClient),
+      handler: async ({ req }) => handleAddSecret(req, deps),
       summary: "Add a secret",
       description:
         "Store a new secret (API key, OAuth token, etc.) in the credential vault.",
@@ -576,7 +606,7 @@ export function secretRouteDefinitions(
     {
       endpoint: "secrets",
       method: "DELETE",
-      handler: async ({ req }) => handleDeleteSecret(req),
+      handler: async ({ req }) => handleDeleteSecret(req, deps),
       summary: "Delete a secret",
       description: "Remove a secret from the credential vault by name.",
       tags: ["secrets"],

package/src/runtime/routes/settings-routes.ts

@@ -30,10 +30,6 @@ import {
   getMostRecentAppByProvider,
   getProvider,
 } from "../../oauth/oauth-store.js";
-import {
-  getProviderBehavior,
-  resolveService,
-} from "../../oauth/provider-behaviors.js";
 import {
   check,
   classifyRisk,
@@ -170,14 +166,14 @@ async function handleOAuthConnectStart(body: {
     return httpError("BAD_REQUEST", "Missing required field: service", 400);
   }
 
-  const resolvedService = resolveService(body.service);
+  const service = body.service;
 
   // Resolve client_id and client_secret from oauth-store.
   let clientId: string | undefined;
   let clientSecret: string | undefined;
 
   // Try existing connection first (re-auth flow)
-  const conn = getConnectionByProvider(resolvedService);
+  const conn = getConnectionByProvider(service);
   if (conn) {
     const app = getApp(conn.oauthAppId);
     if (app) {
@@ -188,7 +184,7 @@ async function handleOAuthConnectStart(body: {
 
   // Fall back to most recent app for this provider (first-time connect with stored app)
   if (!clientId) {
-    const dbApp = getMostRecentAppByProvider(resolvedService);
+    const dbApp = getMostRecentAppByProvider(service);
     if (dbApp) {
       clientId = dbApp.clientId;
       if (!clientSecret) {
@@ -202,20 +198,17 @@ async function handleOAuthConnectStart(body: {
   if (!clientId) {
     return httpError(
       "BAD_REQUEST",
-      `No client_id found for "${body.service}". Store it first via the credential vault.`,
+      `No client_id found for "${service}". Store it first via the credential vault.`,
       400,
     );
   }
 
-  const behavior = getProviderBehavior(resolvedService);
-  const providerRow = getProvider(resolvedService);
-  const requiresSecret =
-    behavior?.setup?.requiresClientSecret ??
-    !!(providerRow?.tokenEndpointAuthMethod || providerRow?.extraParams);
+  const providerRow = getProvider(service);
+  const requiresSecret = !!providerRow?.requiresClientSecret;
   if (requiresSecret && !clientSecret) {
     return httpError(
       "BAD_REQUEST",
-      `client_secret is required for "${body.service}" but not found in the credential store. Store it first via the credential vault.`,
+      `client_secret is required for "${service}" but not found in the credential store. Store it first via the credential vault.`,
       400,
     );
   }
@@ -226,7 +219,7 @@ async function handleOAuthConnectStart(body: {
     let authUrl: string | undefined;
 
     const result = await orchestrateOAuthConnect({
-      service: body.service,
+      service,
       requestedScopes: body.requestedScopes,
       clientId,
       clientSecret,
@@ -238,7 +231,7 @@ async function handleOAuthConnectStart(body: {
         // Prefer accountInfo from oauth-store when available.
         let accountInfo = deferredResult.accountInfo;
         try {
-          const conn = getConnectionByProvider(resolvedService);
+          const conn = getConnectionByProvider(service);
           if (conn?.accountInfo) accountInfo = conn.accountInfo;
         } catch {
           // DB not ready — use orchestrator value
@@ -277,7 +270,7 @@ async function handleOAuthConnectStart(body: {
 
     if (!result.success) {
       log.error(
-        { err: result.error, service: body.service },
+        { err: result.error, service },
         "OAuth connect orchestrator returned error",
       );
       return httpError(
@@ -298,7 +291,7 @@ async function handleOAuthConnectStart(body: {
     // Prefer accountInfo from oauth-store when available.
     let responseAccountInfo = result.accountInfo;
     try {
-      const conn = getConnectionByProvider(resolvedService);
+      const conn = getConnectionByProvider(service);
       if (conn?.accountInfo) responseAccountInfo = conn.accountInfo;
     } catch {
       // DB not ready — use orchestrator value
@@ -312,7 +305,7 @@ async function handleOAuthConnectStart(body: {
     });
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
-    log.error({ err, service: body.service }, "OAuth connect flow failed");
+    log.error({ err, service }, "OAuth connect flow failed");
     return httpError("INTERNAL_ERROR", sanitizeOAuthError(message), 500);
   }
 }

package/src/runtime/routes/skills-routes.ts

@@ -23,6 +23,7 @@ import {
   inspectSkill,
   installSkill,
   listSkills,
+  listSkillsWithCatalog,
   searchSkills,
   uninstallSkill,
   updateSkill,
@@ -47,13 +48,53 @@ export function skillRouteDefinitions(deps: SkillRouteDeps): RouteDefinition[] {
       method: "GET",
       policyKey: "skills",
       summary: "List all skills",
-      description: "Return all installed skills.",
+      description:
+        "Return all installed skills. Pass ?include=catalog to also include available catalog skills.",
       tags: ["skills"],
+      queryParams: [
+        {
+          name: "include",
+          schema: { type: "string", enum: ["catalog"] },
+          description:
+            "Optional inclusion flag. Use 'catalog' to merge available Vellum catalog skills into the response.",
+        },
+      ],
       responseBody: z.object({
-        skills: z.array(z.unknown()).describe("Skill objects"),
+        skills: z
+          .array(
+            z.object({
+              id: z.string(),
+              name: z.string(),
+              description: z.string(),
+              emoji: z.string().optional(),
+              homepage: z.string().optional(),
+              source: z.enum([
+                "bundled",
+                "managed",
+                "workspace",
+                "clawhub",
+                "extra",
+                "catalog",
+              ]),
+              state: z.enum(["enabled", "disabled"]),
+              installStatus: z.enum(["bundled", "installed", "available"]),
+              updateAvailable: z.boolean(),
+              provenance: z.object({
+                kind: z.enum(["first-party", "third-party", "local"]),
+                provider: z.string().optional(),
+                originId: z.string().optional(),
+                sourceUrl: z.string().optional(),
+              }),
+            }),
+          )
+          .describe("Skill objects"),
       }),
-      handler: () => {
-        const skills = listSkills(ctx());
+      handler: async ({ url }) => {
+        const include = url.searchParams.get("include");
+        const skills =
+          include === "catalog"
+            ? await listSkillsWithCatalog(ctx())
+            : listSkills(ctx());
         return Response.json({ skills });
       },
     },

package/src/schedule/integration-status.ts

@@ -15,12 +15,12 @@ const INTEGRATION_PROBES: IntegrationProbe[] = [
   {
     name: "Gmail",
     category: "email",
-    isConnected: () => isProviderConnected("integration:google"),
+    isConnected: () => isProviderConnected("google"),
   },
   {
     name: "Slack",
     category: "messaging",
-    isConnected: () => isProviderConnected("integration:slack"),
+    isConnected: () => isProviderConnected("slack"),
   },
   {
     name: "Twilio",

package/src/security/ces-rpc-credential-backend.ts

@@ -30,11 +30,13 @@ export class CesRpcCredentialBackend implements CredentialBackend {
   }
 
   async get(account: string): Promise<CredentialGetResult> {
+    if (!this.isAvailable()) {
+      return { value: undefined, unreachable: true };
+    }
     try {
-      const result = await this.client.call(
-        CesRpcMethod.GetCredential,
-        { account },
-      );
+      const result = await this.client.call(CesRpcMethod.GetCredential, {
+        account,
+      });
       return {
         value: result.found ? result.value : undefined,
         unreachable: false,
@@ -46,11 +48,12 @@ export class CesRpcCredentialBackend implements CredentialBackend {
   }
 
   async set(account: string, value: string): Promise<boolean> {
+    if (!this.isAvailable()) return false;
     try {
-      const result = await this.client.call(
-        CesRpcMethod.SetCredential,
-        { account, value },
-      );
+      const result = await this.client.call(CesRpcMethod.SetCredential, {
+        account,
+        value,
+      });
       return result.ok;
     } catch (err) {
       log.warn({ err, account }, "CES RPC credential set failed");
@@ -59,11 +62,11 @@ export class CesRpcCredentialBackend implements CredentialBackend {
   }
 
   async delete(account: string): Promise<DeleteResult> {
+    if (!this.isAvailable()) return "error";
     try {
-      const result = await this.client.call(
-        CesRpcMethod.DeleteCredential,
-        { account },
-      );
+      const result = await this.client.call(CesRpcMethod.DeleteCredential, {
+        account,
+      });
       return result.result;
     } catch (err) {
       log.warn({ err, account }, "CES RPC credential delete failed");
@@ -72,11 +75,11 @@ export class CesRpcCredentialBackend implements CredentialBackend {
   }
 
   async list(): Promise<CredentialListResult> {
+    if (!this.isAvailable()) {
+      return { accounts: [], unreachable: true };
+    }
     try {
-      const result = await this.client.call(
-        CesRpcMethod.ListCredentials,
-        {},
-      );
+      const result = await this.client.call(CesRpcMethod.ListCredentials, {});
       return { accounts: result.accounts, unreachable: false };
     } catch (err) {
       log.warn({ err }, "CES RPC credential list failed");

package/src/security/oauth-completion-page.ts

@@ -0,0 +1,153 @@
+/**
+ * Shared HTML rendering for OAuth completion pages shown in the browser
+ * after a loopback/redirect OAuth flow completes.
+ */
+
+export function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function formatProviderName(provider: string): string {
+  // Capitalize first letter of each word, handle common acronyms
+  return provider
+    .split(/[-_]/)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+export function renderOAuthCompletionPage(
+  message: string,
+  success: boolean,
+  provider?: string,
+): string {
+  const displayProvider = provider ? formatProviderName(provider) : "";
+  const title = success
+    ? displayProvider
+      ? `Connected to ${escapeHtml(displayProvider)}`
+      : "Authorization Successful"
+    : "Authorization Failed";
+  const subtitle = success
+    ? "You can close this tab and return to your assistant."
+    : escapeHtml(message);
+
+  const checkmarkSvg = `<svg class="icon" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="28" cy="28" r="28" fill="var(--positive-bg)"/>
+      <path class="check" d="M17 28.5L24.5 36L39 21" stroke="var(--positive-fg)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+    </svg>`;
+
+  const errorSvg = `<svg class="icon" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="28" cy="28" r="28" fill="var(--negative-bg)"/>
+      <path class="cross cross-1" d="M20 20L36 36" stroke="var(--negative-fg)" stroke-width="3.5" stroke-linecap="round" fill="none"/>
+      <path class="cross cross-2" d="M36 20L20 36" stroke="var(--negative-fg)" stroke-width="3.5" stroke-linecap="round" fill="none"/>
+    </svg>`;
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)}</title>
+  <style>
+    :root {
+      --surface: #F5F3EB;
+      --surface-card: #FFFFFF;
+      --card-border: #E8E6DA;
+      --text-primary: #2A2A28;
+      --text-secondary: #4A4A46;
+      --text-tertiary: #A1A096;
+      --positive-bg: #D4DFD0;
+      --positive-fg: #516748;
+      --negative-bg: #F7DAC9;
+      --negative-fg: #DA491A;
+      --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
+      --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --surface: #1A1A18;
+        --surface-card: #2A2A28;
+        --card-border: #3A3A37;
+        --text-primary: #F5F3EB;
+        --text-secondary: #BDB9A9;
+        --text-tertiary: #6B6B65;
+        --positive-bg: #1A2316;
+        --positive-fg: #7A8B6F;
+        --negative-bg: #4E281D;
+        --negative-fg: #E86B40;
+        --shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3);
+      }
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: var(--font);
+      background: var(--surface);
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      -webkit-font-smoothing: antialiased;
+    }
+    .card {
+      text-align: center;
+      padding: 48px 40px 40px;
+      background: var(--surface-card);
+      border: 1px solid var(--card-border);
+      border-radius: 16px;
+      box-shadow: var(--shadow);
+      max-width: 380px;
+      width: 100%;
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+      animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
+    }
+    @keyframes cardIn {
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .icon {
+      width: 56px;
+      height: 56px;
+      margin-bottom: 20px;
+    }
+    .check {
+      stroke-dasharray: 32;
+      stroke-dashoffset: 32;
+      animation: draw 0.4s ease-out 0.45s forwards;
+    }
+    .cross {
+      stroke-dasharray: 22;
+      stroke-dashoffset: 22;
+    }
+    .cross-1 { animation: draw 0.3s ease-out 0.45s forwards; }
+    .cross-2 { animation: draw 0.3s ease-out 0.55s forwards; }
+    @keyframes draw {
+      to { stroke-dashoffset: 0; }
+    }
+    h1 {
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.2px;
+      color: var(--text-primary);
+      margin-bottom: 6px;
+    }
+    p {
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    ${success ? checkmarkSvg : errorSvg}
+    <h1>${escapeHtml(title)}</h1>
+    <p>${subtitle}</p>
+  </div>
+</body>
+</html>`;
+}