@agent-native/core 0.153.10 → 0.154.1

package/corpus/templates/design/actions/run-design-audit.ts

@@ -489,6 +489,203 @@ export function checkTokenDrift(
   return findings;
 }
 
+// ---------------------------------------------------------------------------
+// Design-system adherence check
+// ---------------------------------------------------------------------------
+//
+// checkTokenDrift above only proves the screens agree with EACH OTHER. A design
+// can be perfectly self-consistent and still ignore the brand it is linked to,
+// which is the most-reported failure of generation: the user links their system,
+// the agent writes its own palette, and nothing anywhere notices. This compares
+// the saved HTML against the linked kit's own values so the drift is reportable
+// instead of invisible.
+
+/** The subset of a Brand Kit this check can verify against rendered HTML. */
+export interface DesignSystemExpectation {
+  title: string;
+  fonts: string[];
+  /** Lowercase six-digit hex values, normalized from the kit's own notation. */
+  colors: string[];
+  /** Custom-property names the kit names, e.g. `--color-primary`. */
+  cssVars: string[];
+  /**
+   * The kit's stored `data` could not be parsed. Adherence is then UNKNOWN,
+   * which is not the same as satisfied — a silent empty expectation would
+   * report a corrupt design system as a clean audit.
+   */
+  unreadable?: boolean;
+}
+
+function normalizeHex(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const match = value.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (!match) return null;
+  const hex = match[1].toLowerCase();
+  // Expand shorthand so 3- and 6-digit forms compare in one space.
+  return hex.length === 3
+    ? `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
+    : `#${hex}`;
+}
+
+function expandShortHexes(html: string): string {
+  return html.replace(
+    /#([0-9a-f])([0-9a-f])([0-9a-f])\b/gi,
+    (_m, r: string, g: string, b: string) =>
+      `#${r}${r}${g}${g}${b}${b}`.toLowerCase(),
+  );
+}
+
+/**
+ * Build the checkable expectation from a kit's stored `data` JSON. Returns null
+ * when the kit carries nothing verifiable — "we cannot check" must not render
+ * as "the design complies".
+ */
+export function designSystemExpectation(
+  title: string,
+  data: string | null | undefined,
+): DesignSystemExpectation | null {
+  const unreadable: DesignSystemExpectation = {
+    title,
+    fonts: [],
+    colors: [],
+    cssVars: [],
+    unreadable: true,
+  };
+  let parsed: Record<string, unknown> | null = null;
+  try {
+    parsed = data ? (JSON.parse(data) as Record<string, unknown>) : null;
+  } catch {
+    return unreadable;
+  }
+  if (!parsed) return null;
+
+  const typography = (parsed.typography ?? {}) as Record<string, unknown>;
+  const fonts = [typography.headingFont, typography.bodyFont]
+    .filter((font): font is string => typeof font === "string" && !!font.trim())
+    .map((font) => font.trim());
+
+  const colorRoles = (parsed.colors ?? {}) as Record<string, unknown>;
+  const colors = Object.values(colorRoles)
+    .map(normalizeHex)
+    .filter((hex): hex is string => hex !== null);
+
+  const cssVars = Array.isArray(parsed.tokens)
+    ? parsed.tokens
+        .map((token) =>
+          token && typeof token === "object"
+            ? (token as { cssVar?: unknown }).cssVar
+            : null,
+        )
+        .filter(
+          (cssVar): cssVar is string =>
+            typeof cssVar === "string" && cssVar.startsWith("--"),
+        )
+    : [];
+
+  if (fonts.length === 0 && colors.length === 0 && cssVars.length === 0) {
+    return null;
+  }
+  return {
+    title,
+    fonts: Array.from(new Set(fonts)),
+    colors: Array.from(new Set(colors)),
+    cssVars: Array.from(new Set(cssVars)),
+  };
+}
+
+/**
+ * Flag a screen that uses none of its linked design system's fonts, or none of
+ * its colors. Deliberately a "none of them" test rather than a per-value one:
+ * a design legitimately uses a subset of a kit, but a design using zero of it
+ * is not following it at all. Pure so it can be unit tested without a DB.
+ */
+export function checkDesignSystemAdherence(
+  html: string,
+  expectation: DesignSystemExpectation | null,
+  filename: string,
+): A11yFinding[] {
+  if (!expectation) return [];
+  if (expectation.unreadable) {
+    return [
+      {
+        id: `design-system-drift:${filename}:unreadable`,
+        severity: "warning",
+        category: "design-system-drift",
+        message: `"${expectation.title}" could not be read, so adherence was not checked.`,
+        detail:
+          "The linked design system's stored token data is not valid JSON. " +
+          "Adherence is unknown, not satisfied — re-import or re-index the " +
+          "system before treating this screen as on-brand.",
+        selector: ":root",
+        fixAvailable: false,
+      },
+    ];
+  }
+  const findings: A11yFinding[] = [];
+  const haystack = expandShortHexes(html.toLowerCase());
+
+  if (expectation.fonts.length > 0) {
+    const used = expectation.fonts.filter((font) =>
+      haystack.includes(font.toLowerCase()),
+    );
+    if (used.length === 0) {
+      findings.push({
+        id: `design-system-drift:${filename}:fonts`,
+        severity: "warning",
+        category: "design-system-drift",
+        message: `${filename} uses none of "${expectation.title}"'s fonts.`,
+        detail:
+          `The linked design system specifies ${expectation.fonts.join(", ")}, ` +
+          `but ${filename} references none of them. Load and apply the system's ` +
+          "typography, or tell the user you are deviating and why.",
+        selector: ":root",
+        fixAvailable: false,
+      });
+    }
+  }
+
+  if (expectation.colors.length > 0) {
+    const used = expectation.colors.filter((hex) => haystack.includes(hex));
+    if (used.length === 0) {
+      findings.push({
+        id: `design-system-drift:${filename}:colors`,
+        severity: "warning",
+        category: "design-system-drift",
+        message: `${filename} uses none of "${expectation.title}"'s colors.`,
+        detail:
+          `The linked design system defines ${expectation.colors.slice(0, 6).join(", ")}` +
+          `${expectation.colors.length > 6 ? ", …" : ""}, but ${filename} uses none of ` +
+          "them. Put the system's values in the `:root` token block instead of an " +
+          "invented palette.",
+        selector: ":root",
+        fixAvailable: false,
+      });
+    }
+  }
+
+  if (expectation.cssVars.length > 0) {
+    const used = expectation.cssVars.filter((cssVar) =>
+      haystack.includes(cssVar.toLowerCase()),
+    );
+    if (used.length === 0) {
+      findings.push({
+        id: `design-system-drift:${filename}:css-vars`,
+        severity: "info",
+        category: "design-system-drift",
+        message: `${filename} uses none of "${expectation.title}"'s token names.`,
+        detail:
+          `The system names ${expectation.cssVars.length} custom properties (e.g. ` +
+          `${expectation.cssVars.slice(0, 4).join(", ")}). Reusing those exact names ` +
+          "keeps the prototype swappable with the real codebase.",
+        selector: ":root",
+        fixAvailable: false,
+      });
+    }
+  }
+
+  return findings;
+}
+
 // ---------------------------------------------------------------------------
 // Live-content helper (matches the pattern in other actions)
 // ---------------------------------------------------------------------------
@@ -519,6 +716,11 @@ export default defineAction({
     "form labels, focus-visibility gaps, reduced-motion coverage, and — for " +
     "multi-screen designs — token drift (the audited screen's :root custom " +
     "properties diverging from index.html's). " +
+    "When the design is linked to a design system, also reports " +
+    "design-system drift: the screen using none of the linked system's fonts, " +
+    "colors, or token names. Treat that finding as a generation bug to fix, " +
+    "not a style opinion — reload the system with `get-design-system` and " +
+    "apply its values rather than explaining the deviation. " +
     "Returns A11yFinding[] that can be shown in the Review panel or persisted " +
     "via create-design-review-snapshot. No writes are performed.",
   schema: z.object({
@@ -612,6 +814,32 @@ export default defineAction({
         finding.id.includes(`token-drift:${file.filename}:`),
     );
 
+    // Adherence to the LINKED system, which token drift cannot see.
+    const [linkedSystem] = await db
+      .select({
+        title: schema.designSystems.title,
+        data: schema.designSystems.data,
+      })
+      .from(schema.designs)
+      .innerJoin(
+        schema.designSystems,
+        eq(schema.designs.designSystemId, schema.designSystems.id),
+      )
+      .where(
+        and(
+          eq(schema.designs.id, designId),
+          accessFilter(schema.designSystems, schema.designSystemShares),
+        ),
+      )
+      .limit(1);
+    const designSystemFindings = linkedSystem
+      ? checkDesignSystemAdherence(
+          html,
+          designSystemExpectation(linkedSystem.title, linkedSystem.data),
+          file.filename,
+        )
+      : [];
+
     // Run all audit checks over the static HTML.
     const findings: A11yFinding[] = [
       ...checkMissingAlt(html),
@@ -621,6 +849,7 @@ export default defineAction({
       ...checkFocusVisibility(html),
       ...checkContrastHint(html),
       ...tokenDriftFindings,
+      ...designSystemFindings,
     ];
 
     // Summarise by severity for the agent context.

package/corpus/templates/design/actions/sync-design-system-with-builder.ts

@@ -0,0 +1,64 @@
+import { defineAction } from "@agent-native/core";
+import {
+  parseBuilderDesignSystemProxyReference,
+  startBuilderDesignSystemIndex,
+} from "@agent-native/core/server";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+import { assertAccess, resolveAccess } from "@agent-native/core/sharing";
+import { z } from "zod";
+
+import "../server/db/index.js";
+import { upsertBuilderProxyDesignSystem } from "../server/lib/builder-design-system-proxy.js";
+
+export default defineAction({
+  description:
+    "Re-index a Builder-backed GitHub design system using its persisted repository, ref, and file/folder scope. Requires editor access.",
+  schema: z.object({
+    id: z.string().min(1).describe("Local design system id"),
+  }),
+  run: async ({ id }) => {
+    await assertAccess("design-system", id, "editor");
+    const access = await resolveAccess("design-system", id);
+    if (!access) throw new Error("Design system not found");
+
+    const reference = parseBuilderDesignSystemProxyReference(
+      access.resource.data,
+    );
+    if (!reference?.githubSources?.length) {
+      throw new Error(
+        "This design system has no persisted GitHub source scope to sync.",
+      );
+    }
+    if (reference.sourceKind === "mixed") {
+      throw new Error(
+        "This design system combines GitHub with non-replayable sources. Re-import all sources before syncing it.",
+      );
+    }
+
+    const result = await startBuilderDesignSystemIndex({
+      projectName: access.resource.title,
+      description: access.resource.description ?? undefined,
+      githubRepos: reference.githubSources,
+    });
+    const ownerEmail = getRequestUserEmail();
+    if (!ownerEmail) throw new Error("no authenticated user");
+
+    const proxy = await upsertBuilderProxyDesignSystem({
+      result,
+      ownerEmail: access.resource.ownerEmail,
+      orgId: access.resource.orgId,
+      projectName: access.resource.title,
+      description: access.resource.description ?? undefined,
+      sourceKind: reference.sourceKind,
+      githubSources: reference.githubSources,
+      localDesignSystemId: id,
+    });
+
+    return {
+      ...result,
+      ...proxy,
+      synced: true,
+      githubSourceCount: reference.githubSources.length,
+    };
+  },
+});

package/corpus/templates/design/app/components/design/code-workbench/commands.ts

@@ -169,7 +169,7 @@ const MAC_KEY_LABELS: Record<string, string> = {
   escape: "⎋",
 };
 
-/** Human-readable keybinding, e.g. "⇧⌘P" on macOS or "Ctrl+Shift+P". */
+/** Human-readable keybinding, e.g. "⇧⌘P" on macOS or "Ctrl Shift P". */
 export function formatKeybinding(binding: string): string {
   const parsed = parseKeybinding(binding);
   const keyLabel =
@@ -191,7 +191,7 @@ export function formatKeybinding(binding: string): string {
   if (parsed.alt) parts.push("Alt");
   if (parsed.shift) parts.push("Shift");
   parts.push(keyLabel.length === 1 ? keyLabel.toUpperCase() : keyLabel);
-  return parts.join("+");
+  return parts.join(" ");
 }
 
 /**

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -270,9 +270,11 @@ const DEFAULT_LABELS: DesignColorPickerLabels = {
   diamond: "Diamond", // i18n-ignore fallback component label
 };
 
-// checkerboard: explicit light/dark tiles for legibility.
-const CHECKER_A = "#d4d4d4";
-const CHECKER_B = "#a3a3a3";
+// Keep transparency tiles light on both light and dark editor surfaces.
+// guard:allow-raw-color — fixed light checkerboard tile keeps transparency visible.
+const CHECKER_A = "#e5e5e5";
+// guard:allow-raw-color — fixed light checkerboard tile keeps transparency visible.
+const CHECKER_B = "#f5f5f5";
 const CHECKERBOARD_IMAGE = `linear-gradient(45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(-45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${CHECKER_A} 75%), linear-gradient(-45deg, transparent 75%, ${CHECKER_A} 75%)`;
 
 // ─── Paint-type icon SVGs (Tabler style, distinct per type) ────────────────────
@@ -1676,6 +1678,7 @@ export function DesignColorPicker({
                             max={100}
                             disabled={disabled}
                             backgroundImage={alphaTrackBackground(fieldColor)}
+                            backgroundColor={CHECKER_B}
                             backgroundSize="8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%"
                             backgroundPosition="0 0, 0 4px, 4px -4px, -4px 0, 0 0"
                             onChange={(next) => {
@@ -2062,6 +2065,7 @@ function ColorTrack({
   max,
   disabled,
   backgroundImage,
+  backgroundColor,
   backgroundSize,
   backgroundPosition,
   onChange,
@@ -2073,6 +2077,7 @@ function ColorTrack({
   max: number;
   disabled: boolean;
   backgroundImage: string;
+  backgroundColor?: string;
   backgroundSize?: string;
   backgroundPosition?: string;
   onChange: (value: number) => void;
@@ -2160,7 +2165,12 @@ function ColorTrack({
         "active:cursor-grabbing",
         disabled && "cursor-not-allowed opacity-60",
       )}
-      style={{ backgroundImage, backgroundSize, backgroundPosition }}
+      style={{
+        backgroundImage,
+        backgroundColor,
+        backgroundSize,
+        backgroundPosition,
+      }}
     >
       {/* Thumb overhangs the track slightly, matching the design editor */}
       <span
@@ -2552,6 +2562,7 @@ function triggerSwatchStyle(
   if (!lower || lower === "transparent") {
     return {
       backgroundImage: CHECKERBOARD_IMAGE,
+      backgroundColor: CHECKER_B,
       backgroundSize: "8px 8px",
     };
   }
@@ -2577,6 +2588,7 @@ function swatchStyle(value: string): {
   if (parsed && parsed.a < 1) {
     return {
       backgroundImage: `${CHECKERBOARD_IMAGE}, linear-gradient(${rgbaToCss(parsed)}, ${rgbaToCss(parsed)})`,
+      backgroundColor: CHECKER_B,
       backgroundSize: "8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%",
       backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0, 0 0",
     };
@@ -2590,6 +2602,7 @@ function swatchStyle(value: string): {
   // that would otherwise render as a blank swatch.
   return {
     backgroundImage: CHECKERBOARD_IMAGE,
+    backgroundColor: CHECKER_B,
     backgroundSize: "8px 8px",
   };
 }

package/corpus/templates/design/app/components/design/inspector/GradientEditor.tsx

@@ -75,7 +75,10 @@ export interface GradientEditSessionTarget {
 
 // ─── Checkerboard (matches DesignColorPicker) ───────────────────────────────────
 
-const CHECKER_A = "#d4d4d4";
+// guard:allow-raw-color — fixed light checkerboard tile keeps transparency visible.
+const CHECKER_A = "#e5e5e5";
+// guard:allow-raw-color — fixed light checkerboard tile keeps transparency visible.
+const CHECKER_B = "#f5f5f5";
 const CHECKERBOARD_IMAGE = `linear-gradient(45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(-45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${CHECKER_A} 75%), linear-gradient(-45deg, transparent 75%, ${CHECKER_A} 75%)`;
 const CHECKER_SIZE = "8px 8px, 8px 8px, 8px 8px, 8px 8px";
 const CHECKER_POS = "0 0, 0 4px, 4px -4px, -4px 0";
@@ -635,6 +638,7 @@ export function GradientEditor({
           style={{
             height: BAR_HEIGHT,
             backgroundImage: CHECKERBOARD_IMAGE,
+            backgroundColor: CHECKER_B,
             backgroundSize: CHECKER_SIZE,
             backgroundPosition: CHECKER_POS,
           }}

package/corpus/templates/design/app/components/design/inspector/ImageFillControls.tsx

@@ -71,7 +71,10 @@ function readFileAsDataUrl(file: File): Promise<string> {
   });
 }
 
-const CHECKER_A = "#d4d4d4";
+// guard:allow-raw-color — fixed light checkerboard tile keeps transparency visible.
+const CHECKER_A = "#e5e5e5";
+// guard:allow-raw-color — fixed light checkerboard tile keeps transparency visible.
+const CHECKER_B = "#f5f5f5";
 const CHECKERBOARD_IMAGE = `linear-gradient(45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(-45deg, ${CHECKER_A} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${CHECKER_A} 75%), linear-gradient(-45deg, transparent 75%, ${CHECKER_A} 75%)`;
 const FIT_MARKER_RE =
   /\/\*\s*agent-native-image-fit:(fill|fit|crop|tile)\s*\*\//i;
@@ -345,6 +348,7 @@ export function ImageFillControls({
           backgroundImage: value.url
             ? `url("${escapeForQuotedUrl(value.url.trim())}")`
             : CHECKERBOARD_IMAGE,
+          backgroundColor: value.url ? undefined : CHECKER_B,
           backgroundSize: value.url
             ? value.fit === "fit"
               ? "contain"

package/corpus/templates/design/app/hooks/use-question-flow.ts

@@ -7,6 +7,7 @@ import { type PromptComposerSubmitOptions } from "@agent-native/core/client/comp
 import { useCallback } from "react";
 
 import { sendToDesignAgentChat } from "@/lib/agent-chat";
+import { loadDesignSystemGenerationContext } from "@/pages/design-editor/generation-prompt-directives";
 
 export interface QuestionFlowModelSelection {
   model?: string;
@@ -14,6 +15,23 @@ export interface QuestionFlowModelSelection {
   effort?: PromptComposerSubmitOptions["effort"];
 }
 
+/**
+ * What the user actually supplied at kickoff. The intake turn is forced to emit
+ * only a questionnaire and then stop, so THIS continuation is the turn that
+ * writes HTML — and a fresh thread inherits nothing. Re-sending the brief here
+ * is the only thing that puts the user's own prompt, reference screenshots, and
+ * design system in front of the model at the moment it generates.
+ */
+export interface QuestionFlowGenerationBrief {
+  /** The user's original words, replayed verbatim — never a paraphrase. */
+  prompt?: string;
+  designSystemId?: string | null;
+  /** Data URLs; re-attached so the reference screenshot survives the hop. */
+  images?: string[];
+  /** Extracted text from uploaded files (specs, outlines, token dumps). */
+  uploadedFileContext?: string;
+}
+
 interface UseQuestionFlowOptions {
   enabled?: boolean;
   continuationTabId?: string | null;
@@ -25,12 +43,49 @@ interface UseQuestionFlowOptions {
    * filled after render, so a snapshot taken here would be the pre-kickoff one.
    */
   getModelSelection?: () => QuestionFlowModelSelection | null | undefined;
+  /** Read at send time, for the same reason as `getModelSelection`. */
+  getGenerationBrief?: () => QuestionFlowGenerationBrief | null | undefined;
 }
 
 function designQuestionsStateKey(designId: string | undefined): string {
   return designId ? `show-questions:${designId}` : "show-questions";
 }
 
+/**
+ * Render the kickoff brief as prompt context for the continuation turn.
+ * Exported and pure so the carry-through is testable without a DOM — this is
+ * the whole fix for "the agent ignored my design system / screenshot / brief".
+ */
+export function buildGenerationBriefContext(
+  brief: QuestionFlowGenerationBrief | null | undefined,
+  designSystemContext: string,
+): string {
+  return [
+    brief?.prompt?.trim()
+      ? [
+          "## The user's original request (verbatim)",
+          "This is the spec for what to build. The answers below refine it;",
+          "they do not replace it. Do not restate it as a looser paraphrase.",
+          "",
+          brief.prompt.trim(),
+        ].join("\n")
+      : "",
+    brief?.images?.length
+      ? [
+          `## ${brief.images.length} reference image(s) re-attached to this message`,
+          "Treat an attached UI screenshot as a layout specification to",
+          "reproduce — its structure, hierarchy, density, and component",
+          "grammar — not as loose inspiration. Match it unless an answer",
+          "below explicitly overrides a part of it.",
+        ].join("\n")
+      : "",
+    brief?.uploadedFileContext?.trim() ?? "",
+    designSystemContext,
+  ]
+    .filter(Boolean)
+    .join("\n\n");
+}
+
 const RESPONSIVE_GENERATION_REQUIREMENTS =
   'Responsive behavior is mandatory for every web design. Read the form-factor answer above: for Desktop or Both/responsive, call generate-design with `primaryViewport: "desktop"` and a 1440x1024 canvas frame; use `primaryViewport: "mobile"` only for an explicitly mobile-primary choice. Use mobile-first responsive CSS, then take desktop and mobile screenshots and fix any overflow before reporting the design complete.';
 
@@ -47,6 +102,7 @@ export function useQuestionFlow(
     continuationTabId,
     onContinue,
     getModelSelection,
+    getGenerationBrief,
   }: UseQuestionFlowOptions = {},
 ) {
   const stateKey = designQuestionsStateKey(designId);
@@ -79,9 +135,21 @@ export function useQuestionFlow(
   });
 
   const sendContinuation = useCallback(
-    (message: string, context?: string) => {
+    async (message: string, context?: string) => {
       const selection = getModelSelection?.() ?? {};
       const { model, engine, effort } = selection;
+      const brief = getGenerationBrief?.() ?? null;
+      // Re-hydrated rather than snapshotted at kickoff: the user can link or
+      // change the design system while the questionnaire is open. This never
+      // throws — a load failure returns instruction text telling the agent to
+      // stop rather than improvise a generic style.
+      const designSystemContext = brief?.designSystemId
+        ? await loadDesignSystemGenerationContext(brief.designSystemId)
+        : "";
+      const briefContext = buildGenerationBriefContext(
+        brief,
+        designSystemContext,
+      );
       // Always request `newTab` (mirroring useAgentGenerating.submit's
       // default). Without it, when there is no continuationTabId yet the
       // message goes to whatever tab is currently active, but the id we
@@ -96,9 +164,10 @@ export function useQuestionFlow(
       // real destination thread.
       const tabId = sendToDesignAgentChat({
         message,
-        context,
+        context: [briefContext, context].filter(Boolean).join("\n\n"),
         submit: true,
         newTab: true,
+        ...(brief?.images?.length ? { images: brief.images } : {}),
         ...(continuationTabId ? { tabId: continuationTabId } : {}),
         ...(model ? { model } : {}),
         ...(engine ? { engine } : {}),
@@ -107,7 +176,14 @@ export function useQuestionFlow(
       onContinue?.(tabId);
       flow.clear();
     },
-    [continuationTabId, designId, flow, getModelSelection, onContinue],
+    [
+      continuationTabId,
+      designId,
+      flow,
+      getGenerationBrief,
+      getModelSelection,
+      onContinue,
+    ],
   );
 
   const handleSubmit = useCallback(
@@ -129,13 +205,13 @@ export function useQuestionFlow(
         .filter(Boolean)
         .join("\n");
 
-      sendContinuation("Here are my answers — go ahead.", context);
+      void sendContinuation("Here are my answers — go ahead.", context);
     },
     [designId, sendContinuation],
   );
 
   const handleSkip = useCallback(() => {
-    sendContinuation(
+    void sendContinuation(
       "Skip the questions — decide for me.",
       designId
         ? `The user skipped the pre-generation questions for design ${designId}. Proceed with reasonable defaults. ${RESPONSIVE_GENERATION_REQUIREMENTS} Generate one polished first direction unless the original prompt explicitly requested options.`

package/corpus/templates/design/app/i18n/en-US.ts

@@ -25,7 +25,7 @@ const messages = {
     commentMode: "Comment",
     sendToAgent: "Send to agent",
     sendingToAgent: "Sending to agent…",
-    enterToPost: "Enter to post · Shift+Enter for a new line",
+    enterToPost: "Enter to post · Shift Enter for a new line",
     post: "Post",
     posting: "Posting…",
     postFailed: "Could not post this comment",