@agent-native/core 0.176.1 → 0.176.2-nightly-20260831185956

package/corpus/templates/design/app/pages/DesignSystems.tsx

@@ -1,9 +1,11 @@
+import { appApiPath } from "@agent-native/core/client/api-path";
 import {
   useActionQuery,
   useActionMutation,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { ShareButton } from "@agent-native/core/client/sharing";
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared";
 import {
   useSetHeaderActions,
   useSetPageTitle,
@@ -14,8 +16,9 @@ import {
   IconChecks,
   IconComponents,
   IconDots,
-  IconPlus,
+  IconExternalLink,
   IconPalette,
+  IconPlus,
   IconStar,
   IconStarFilled,
   IconTrash,
@@ -75,6 +78,7 @@ import {
 import { QueryErrorState } from "../components/QueryErrorState";
 import {
   builderRefreshKey,
+  isTrustedBuilderPreviewUrl,
   parseDesignSystemData,
   shouldRefreshBuilderDesignSystem,
   type DesignSystemData,
@@ -120,6 +124,7 @@ export default function DesignSystems() {
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
   const [isSelectionMode, setIsSelectionMode] = useState(false);
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
   const [selectedSystemIds, setSelectedSystemIds] = useState<Set<string>>(
     () => new Set(),
   );
@@ -710,10 +715,18 @@ export default function DesignSystems() {
                               <Tooltip>
                                 <TooltipTrigger asChild>
                                   <button
-                                    onClick={() =>
-                                      handleSetDefault(ds.id, !ds.isDefault)
+                                    type="button"
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      handleSetDefault(ds.id, !ds.isDefault);
+                                    }}
+                                    disabled={setDefaultMutation.isPending}
+                                    aria-label={
+                                      ds.isDefault
+                                        ? t("designSystems.currentlyDefault")
+                                        : t("designSystems.actions.setDefault")
                                     }
-                                    className="absolute top-2 end-2 opacity-0 group-hover:opacity-100 w-7 h-7 flex items-center justify-center rounded-md bg-black/60 hover:bg-black/80 cursor-pointer"
+                                    className="absolute top-2 end-2 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-foreground/60 text-background hover:bg-foreground/80 disabled:pointer-events-none disabled:opacity-50"
                                   >
                                     {ds.isDefault ? (
                                       <IconStarFilled className="w-3.5 h-3.5 text-yellow-400" />
@@ -731,22 +744,31 @@ export default function DesignSystems() {
                             )}
                             {ds.canManage && (
                               <div
-                                className={`absolute top-2 z-10 opacity-0 group-hover:opacity-100 ${
+                                className={`absolute top-2 z-10 ${
+                                  openMenuId === ds.id
+                                    ? "opacity-100"
+                                    : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
+                                } ${
                                   ds.accessRole === "owner" ? "end-10" : "end-2"
                                 }`}
                               >
-                                <DropdownMenu>
+                                <DropdownMenu
+                                  open={openMenuId === ds.id}
+                                  onOpenChange={(open) =>
+                                    setOpenMenuId(open ? ds.id : null)
+                                  }
+                                >
                                   <DropdownMenuTrigger asChild>
                                     <Button
                                       variant="ghost"
                                       size="icon"
-                                      className="h-7 w-7 bg-black/60 hover:bg-black/80 cursor-pointer"
+                                      className="h-7 w-7 bg-foreground/60 hover:bg-foreground/80 cursor-pointer"
                                       aria-label={t(
                                         "designSystems.moreActionsAria",
                                         { title: ds.title },
                                       )}
                                     >
-                                      <IconDots className="w-3.5 h-3.5 text-foreground/70" />
+                                      <IconDots className="w-3.5 h-3.5 text-background" />
                                     </Button>
                                   </DropdownMenuTrigger>
                                   <DropdownMenuContent align="end">
@@ -869,8 +891,8 @@ function DesignSystemDetailsSheet({
     [designSystem],
   );
   const assets = useMemo(
-    () => parseDesignSystemAssets(designSystem?.assets),
-    [designSystem?.assets],
+    () => parseDesignSystemAssets(designSystem && designSystem.assets),
+    [designSystem],
   );
 
   if (!designSystem) {
@@ -928,7 +950,11 @@ function DesignSystemDetailsSheet({
             </div>
           </section>
 
-          <TokenPreview data={parsed} assets={assets} />
+          <DesignSystemPreview
+            id={designSystem.id}
+            data={parsed}
+            assets={assets}
+          />
 
           <section className="space-y-3 border-t border-border pt-6">
             <div>
@@ -983,6 +1009,95 @@ function DesignSystemDetailsSheet({
   );
 }
 
+function DesignSystemPreview({
+  id,
+  data,
+  assets,
+}: {
+  id: string;
+  data: DesignSystemData | null;
+  assets: Array<{ name?: string; url?: string; variant?: string }>;
+}) {
+  return data?.source === "builder" ? (
+    <DesignSystemPreviewLink id={id} data={data} />
+  ) : (
+    <TokenPreview data={data} assets={assets} />
+  );
+}
+
+function DesignSystemPreviewLink({
+  id,
+  data,
+}: {
+  id: string;
+  data: DesignSystemData;
+}) {
+  const t = useT();
+  const [resolvedBuilderUrl, setResolvedBuilderUrl] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    setResolvedBuilderUrl(null);
+    void fetch(
+      appApiPath(
+        `/api/design-system-builder-link?id=${encodeURIComponent(id)}`,
+      ),
+    )
+      .then((res) => (res.ok ? res.json() : null))
+      .then((json: { builderUrl?: string | null } | null) => {
+        if (!cancelled) setResolvedBuilderUrl(json?.builderUrl ?? null);
+      })
+      .catch(() => {
+        if (!cancelled) setResolvedBuilderUrl(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [id]);
+
+  const persistedBuilderUrl =
+    data.builderUrl && isTrustedBuilderPreviewUrl(data.builderUrl)
+      ? data.builderUrl
+      : undefined;
+  // The stored URL is the project/branch link for every source that returns a
+  // branch from indexing, so it renders straight away; the resolve only
+  // upgrades a `.fig` import whose branch was cut after the row was written.
+  const trustedBuilderUrl =
+    (resolvedBuilderUrl && isTrustedBuilderPreviewUrl(resolvedBuilderUrl)
+      ? resolvedBuilderUrl
+      : undefined) ?? persistedBuilderUrl;
+
+  return (
+    <section className="space-y-3 border-t border-border pt-6">
+      <div>
+        <h3 className="text-sm font-medium text-foreground">
+          {t("designSystems.preview.title")}
+        </h3>
+        <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+          {t("designSystems.preview.description")}
+        </p>
+      </div>
+      {trustedBuilderUrl ? (
+        <Button asChild className="cursor-pointer">
+          <a
+            href={withBuilderUtmTrackingParams(trustedBuilderUrl, {
+              campaign: "product",
+              content: "design_system_intelligence",
+            })}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <IconExternalLink className="size-4" />
+            {"Open in Builder" /* i18n-ignore Builder link action */}
+          </a>
+        </Button>
+      ) : null}
+    </section>
+  );
+}
+
 function TokenPreview({
   data,
   assets,

package/corpus/templates/design/app/pages/Index.tsx

@@ -85,6 +85,7 @@ import {
   writeStoredDesignFilter,
   type DesignFilter,
 } from "@/lib/design-filter";
+import { isDesignSystemUsableForGeneration } from "@/lib/design-system-data";
 import {
   clearPendingGeneration,
   writePendingGeneration,
@@ -268,10 +269,19 @@ export default function Index() {
     setSelectedDesignIds(new Set());
   }, [designsData, page, totalPages]);
 
-  const resolveDefaultDesignSystemId = useCallback(
-    () => defaultSystem?.id ?? designSystems[0]?.id ?? null,
-    [defaultSystem?.id, designSystems],
-  );
+  const resolveDefaultDesignSystemId = useCallback(() => {
+    if (
+      defaultSystem &&
+      isDesignSystemUsableForGeneration(defaultSystem.data)
+    ) {
+      return defaultSystem.id;
+    }
+    return (
+      designSystems.find((system) =>
+        isDesignSystemUsableForGeneration(system.data),
+      )?.id ?? null
+    );
+  }, [defaultSystem, designSystems]);
 
   const syncSelectedTemplate = useCallback(
     (templateId: string | null) => {
@@ -989,9 +999,7 @@ export default function Index() {
         ) : designs.length === 0 ? (
           <EmptyState
             onCreateDesign={openNewDesign}
-            onStarterPrompt={(prompt) =>
-              handleSubmitPrompt(prompt, [], {}, { skipQuestions: true })
-            }
+            onStarterPrompt={(prompt) => handleSubmitPrompt(prompt, [], {})}
           />
         ) : (
           <>

package/corpus/templates/design/app/pages/NotFound.tsx

@@ -27,7 +27,7 @@ export default function NotFound() {
           </Button>
         )}
         <Button asChild variant="outline" className="cursor-pointer">
-          <Link to="/">
+          <Link to="/home">
             <IconArrowLeft className="size-4 rtl:-scale-x-100" />
             {t("pages.notFoundBackToDesigns")}
           </Link>

package/corpus/templates/design/app/pages/Templates.tsx

@@ -47,6 +47,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import { useDesignSystems } from "@/hooks/use-design-systems";
+import { isDesignSystemUsableForGeneration } from "@/lib/design-system-data";
 import { writePendingGeneration } from "@/lib/pending-generation";
 
 type TemplateCategory =
@@ -122,6 +123,20 @@ export default function Templates() {
   const builtIns = filtered.filter((template) => template.isBuiltIn);
   const userTemplates = filtered.filter((template) => !template.isBuiltIn);
 
+  const resolveDefaultDesignSystemId = (): string | null => {
+    if (
+      defaultSystem &&
+      isDesignSystemUsableForGeneration(defaultSystem.data)
+    ) {
+      return defaultSystem.id;
+    }
+    return (
+      designSystems.find((system) =>
+        isDesignSystemUsableForGeneration(system.data),
+      )?.id ?? null
+    );
+  };
+
   const resolveTemplateDesignSystemId = (
     template: DesignTemplateSummary,
   ): string | null => {
@@ -131,7 +146,7 @@ export default function Templates() {
     ) {
       return template.designSystemId;
     }
-    return defaultSystem?.id ?? designSystems[0]?.id ?? null;
+    return resolveDefaultDesignSystemId();
   };
 
   const setSelectedTemplateParam = (templateId: string | null) => {
@@ -165,13 +180,13 @@ export default function Templates() {
       template.designSystemId &&
         designSystems.some((system) => system.id === template.designSystemId)
         ? template.designSystemId
-        : (defaultSystem?.id ?? designSystems[0]?.id ?? null),
+        : resolveDefaultDesignSystemId(),
     );
     setPromptOpen(true);
     card?.scrollIntoView({ block: "center", behavior: "smooth" });
     useButton?.focus();
   }, [
-    defaultSystem?.id,
+    defaultSystem,
     designSystems,
     designSystemsLoading,
     linkedTemplateId,

package/corpus/templates/design/app/pages/VisualEdit.tsx

@@ -31,7 +31,7 @@ export default function VisualEditPage() {
   // Server shells are intentionally anonymous; defer session-specific chrome
   // until after hydration so the public entry never reconciles different links.
   const isSignedIn = hasHydrated && hasSession;
-  const primaryHref = isSignedIn ? "/" : (signInHref ?? undefined);
+  const primaryHref = isSignedIn ? "/home" : (signInHref ?? undefined);
   const primaryAriaLabel = isSignedIn
     ? t("visualEdit.openDesign")
     : t("designEditor.signUpToSave");

package/corpus/templates/design/app/pages/design-editor/code-layer-state.ts

@@ -905,9 +905,9 @@ export function codeLayerPatchMessage(
 }
 
 // T16: known Google Font families offered by the inspector's font-family
-// picker (FONT_FAMILY_OPTIONS in EditPanel.tsx — kept in sync manually since
-// that file isn't editable from here). Maps the exact display family name to
-// the Google Fonts CSS2 API family query param (weight range 400-700 covers
+// picker (FONT_FAMILY_OPTIONS in @agent-native/toolkit/design-tweaks). Maps
+// the exact display family name to the Google Fonts CSS2 API family query param
+// (weight range 400-700 covers
 // the FONT_WEIGHT_OPTIONS range without over-fetching every weight).
 export const KNOWN_GOOGLE_FONTS: Record<string, string> = {
   Inter: "Inter:wght@400;500;600;700",

package/corpus/templates/design/app/pages/design-editor/commands/README.md

@@ -119,6 +119,7 @@ a module breaks those — re-point the spec in the same commit.
 | `geometry-commit.ts`               | Commit a canvas frame move/resize                           |
 | `write-frame-geometry-snapshot.ts` | Write a frame-geometry snapshot into design data            |
 | `persist-frame-geometry-save.ts`   | Flush the debounced frame-geometry save to the server       |
+| `set-layout-grid.ts`               | Set, hide, or clear one frame's layout grid                 |
 
 ## Screens and view
 

package/corpus/templates/design/app/pages/design-editor/commands/geometry-commit.ts

@@ -9,6 +9,7 @@ import {
 import type { UndoRedoOrderKind } from "@/pages/design-editor/editor-state";
 import {
   geometrySnapshotsEqual,
+  quantizeCanvasFrameGeometryForPersist,
   sanitizeCanvasFrameGeometryForPersist,
 } from "@/pages/design-editor/geometry-persistence";
 import type {
@@ -63,7 +64,7 @@ export function runGeometryCommit(
   // an insane frame falls back to its own pre-gesture geometry, and a
   // commit whose every change was refused becomes a no-op.
   const { geometryById: afterSnapshot } = sanitizeCanvasFrameGeometryForPersist(
-    cloneCanvasFrameGeometry(after),
+    quantizeCanvasFrameGeometryForPersist(cloneCanvasFrameGeometry(after)),
     beforeSnapshot,
     boardFileId ? [boardFileId] : [],
   );

package/corpus/templates/design/app/pages/design-editor/commands/set-layout-grid.ts

@@ -0,0 +1,66 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import {
+  DEFAULT_LAYOUT_GRID,
+  normalizeLayoutGridSize,
+  type LayoutGrid,
+} from "@shared/layout-grid";
+import type { QueryClient } from "@tanstack/react-query";
+import type { RefObject } from "react";
+
+import {
+  applyDesignDataOperations,
+  type DesignDataOperation,
+} from "@/pages/design-editor/data-operations";
+
+export interface SetLayoutGridArgs {
+  id: string | undefined;
+  canEditDesign: boolean;
+  designDataJsonRef: RefObject<Record<string, unknown>>;
+  queryClient: QueryClient;
+  updateDesignMutation: ReturnType<
+    typeof useActionMutation<undefined, undefined, "update-design">
+  >;
+}
+
+/** `next` of `null` removes the entry rather than storing a disabled grid: a
+ *  hidden grid still snaps, so "no grid" and "hidden" are different states. */
+export function runSetLayoutGrid(
+  args: SetLayoutGridArgs,
+  frameId: string,
+  next: Partial<LayoutGrid> | null,
+): void {
+  const { id, canEditDesign, designDataJsonRef, queryClient } = args;
+  if (!id || !canEditDesign || !frameId) return;
+
+  const operation: DesignDataOperation =
+    next === null
+      ? { op: "delete", path: ["layoutGrids", frameId] }
+      : {
+          op: "set",
+          path: ["layoutGrids", frameId],
+          value: {
+            kind: "uniform",
+            size: normalizeLayoutGridSize(next.size, DEFAULT_LAYOUT_GRID.size),
+            visible: next.visible ?? DEFAULT_LAYOUT_GRID.visible,
+          },
+        };
+
+  const nextData = applyDesignDataOperations(designDataJsonRef.current, [
+    operation,
+  ]);
+  designDataJsonRef.current = nextData;
+  queryClient.setQueryData(["action", "get-design", { id }], (old: unknown) => {
+    if (!old || typeof old !== "object") return old;
+    return { ...old, data: JSON.stringify(nextData) };
+  });
+  args.updateDesignMutation.mutate(
+    { id, dataOperations: [operation] } as never,
+    {
+      onSettled: () => {
+        void queryClient.invalidateQueries({
+          queryKey: ["action", "get-design"],
+        });
+      },
+    },
+  );
+}

package/corpus/templates/design/app/pages/design-editor/design-data-geometry-utils.ts

@@ -3,6 +3,7 @@ import {
   parseCanvasFrameGeometryById,
   type CanvasFrameGeometryById,
 } from "@shared/canvas-frames";
+import { parseLayoutGridById, type LayoutGridById } from "@shared/layout-grid";
 import { type TweakSelections } from "@shared/resolve-tweaks";
 
 import { viewportSizeFromFrameGeometry } from "./data-operations";
@@ -75,6 +76,10 @@ export function getCanvasFrameGeometry(
   return parseCanvasFrameGeometryById(data.canvasFrames);
 }
 
+export function getLayoutGrids(data: Record<string, unknown>): LayoutGridById {
+  return parseLayoutGridById(data.layoutGrids);
+}
+
 export function cloneCanvasFrameGeometry(
   geometryById: CanvasFrameGeometryById,
 ): CanvasFrameGeometryById {

package/corpus/templates/design/app/pages/design-editor/effects/publish-agent-selection-context.ts

@@ -1,4 +1,5 @@
 import { setClientAppState } from "@agent-native/core/client/hooks";
+import type { LayoutGridById } from "@shared/layout-grid";
 import type { RefObject } from "react";
 
 import type { CodeWorkbenchActiveFile } from "@/components/design/code-workbench/CodeWorkbench";
@@ -18,12 +19,14 @@ import type {
 export interface PublishAgentSelectionContextArgs {
   activeBreakpointWidthState: number | undefined;
   activeCodeFile: CodeWorkbenchActiveFile | null;
-  activeFile: DesignFile;
+  /** Undefined before any screen is active — every read below must guard. */
+  activeFile: DesignFile | undefined;
   activeInspectorTab: InspectorTab;
   activeLeftPanel: DesignLeftPanel | null;
   activeTool: DesignTool;
   design: DesignData | null;
   designDataJson: Record<string, unknown>;
+  layoutGrids: LayoutGridById;
   designSelectionOwnerIdRef: RefObject<string>;
   files: DesignFile[];
   hoveredElement: ElementInfo | null;
@@ -56,6 +59,7 @@ export function runPublishAgentSelectionContext({
   activeTool,
   design,
   designDataJson,
+  layoutGrids,
   designSelectionOwnerIdRef,
   files,
   hoveredElement,
@@ -154,6 +158,9 @@ export function runPublishAgentSelectionContext({
     })(),
     // §8 — active design state (null = Default / live view)
     selectedStateId,
+    // The grid the active screen's positions snap to, so the agent authors
+    // left/top on the same multiples dragging produces. null = no grid.
+    layoutGrid: activeFile ? (layoutGrids[activeFile.id] ?? null) : null,
   };
   (window as any).__designSelection = selection;
   const persistedSelection = {
@@ -178,6 +185,7 @@ export function runPublishAgentSelectionContext({
     responsiveEditScope: selection.responsiveEditScope,
     breakpointSetId: selection.breakpointSetId,
     selectedStateId: selection.selectedStateId,
+    layoutGrid: selection.layoutGrid,
     ownerId: designSelectionOwnerIdRef.current,
   };
   const persistedKey = JSON.stringify(persistedSelection);

package/corpus/templates/design/app/pages/design-editor/effects/resume-pending-generation.ts

@@ -1,5 +1,6 @@
 import type { AgentChatMessage } from "@agent-native/core/client/agent-chat";
 import type { PromptComposerSubmitOptions } from "@agent-native/core/client/composer";
+import { readCreativeContextState } from "@agent-native/creative-context/client";
 import type { Dispatch, RefObject, SetStateAction } from "react";
 
 import {
@@ -8,6 +9,7 @@ import {
   readPendingGeneration,
   shouldSkipPendingGenerationResume,
 } from "@/lib/pending-generation";
+import { designPrecedentDirectives } from "@/pages/design-editor/creative-context-precedent";
 import {
   designGenerationDirectives,
   designIntakeQuestionDirectives,
@@ -18,6 +20,10 @@ import {
   loadDesignSystemGenerationContext,
   promptRequestsVariantExploration,
 } from "@/pages/design-editor/generation-prompt-directives";
+import {
+  allIntakeTopicsCovered,
+  loadIntakeContextFromAppState,
+} from "@/pages/design-editor/intake-question-topics";
 import type { DesignData, DesignFile } from "@/pages/design-editor/types";
 
 export interface ResumePendingGenerationArgs {
@@ -105,14 +111,21 @@ export function runResumePendingGeneration({
     // asks. Spending the one turn that can see the image on a questionnaire
     // means the turn that writes HTML never sees it.
     const hasReferenceImages = images.length > 0;
-    const shouldSkipQuestions =
+    const explicitSkip =
       pending.skipQuestions === true ||
       shouldExploreVariants ||
       hasReferenceImages;
-    const designSystemContext = await loadDesignSystemGenerationContext(
-      pendingDesignSystemId,
-    );
+    const usesTemplate = Boolean(pending.templateId);
+    const [designSystemContext, intake] = await Promise.all([
+      loadDesignSystemGenerationContext(pendingDesignSystemId),
+      usesTemplate || shouldExploreVariants
+        ? Promise.resolve(null)
+        : loadIntakeContextFromAppState(readCreativeContextState),
+    ]);
     if (cancelled) return;
+    const shouldSkipQuestions =
+      explicitSkip ||
+      (intake ? allIntakeTopicsCovered(intake.coverage) : false);
     const context = [
       sourceContext,
       `Design id: "${id}"`,
@@ -133,15 +146,32 @@ export function runResumePendingGeneration({
         : shouldExploreVariants
           ? designVariantGenerationDirectives(id, pendingDesignSystemId)
           : shouldSkipQuestions
-            ? designGenerationDirectives(
-                id,
-                pendingDesignSystemId,
-                images.length,
-              )
+            ? [
+                ...designGenerationDirectives(
+                  id,
+                  pendingDesignSystemId,
+                  images.length,
+                ),
+                ...(intake?.explicitContext &&
+                intake.precedent.status === "strong"
+                  ? designPrecedentDirectives(
+                      intake.precedent.contextId,
+                      intake.precedent.matches,
+                      id,
+                    )
+                  : []),
+              ]
             : designIntakeQuestionDirectives(
                 id,
                 pendingDesignSystemId,
                 images.length,
+                intake
+                  ? {
+                      coverage: intake.coverage,
+                      contextUnavailable: intake.unavailable,
+                      unavailableReason: intake.unavailableReason,
+                    }
+                  : undefined,
               )),
     ].join("\n");
 

package/corpus/templates/design/app/pages/design-editor/generation-prompt-directives.ts

@@ -3,6 +3,14 @@ import type { TweakDefinition } from "@shared/api";
 
 import type { UploadedFile } from "@/components/editor/PromptDialog";
 
+import {
+  coveredIntakeTopics,
+  INTAKE_QUESTION_TOPIC_LABELS,
+  INTAKE_QUESTION_TOPICS,
+  uncoveredIntakeTopics,
+  type IntakeTopicCoverage,
+} from "./intake-question-topics";
+
 const WEBSITE_STYLE_REFERENCE_DIRECTIVE =
   "When the user asks to use or match a website's styling or branding and provides a URL, call `import-from-url` for each URL before generating or editing. Treat the returned design.md-style visual system as the source of truth for colors, typography, spacing, components, and imagery. If no URL is provided, ask for one instead of guessing the site's style from its name.";
 
@@ -121,21 +129,42 @@ export async function loadDesignSystemGenerationContext(
   ].join("\n");
 }
 
+export interface IntakeQuestionContextHint {
+  coverage: IntakeTopicCoverage;
+  /** True when the Creative Context lookup itself failed - see loadIntakeContext. */
+  contextUnavailable?: boolean;
+  unavailableReason?: string;
+}
+
 export function designIntakeQuestionDirectives(
   designId: string,
   designSystemId?: string | null,
   referenceImageCount = 0,
+  contextHint?: IntakeQuestionContextHint,
 ): string[] {
+  const covered = contextHint ? coveredIntakeTopics(contextHint.coverage) : [];
+  const uncovered = contextHint
+    ? uncoveredIntakeTopics(contextHint.coverage)
+    : [...INTAKE_QUESTION_TOPICS];
+  const uncoveredLabels = uncovered.map(
+    (topic) => INTAKE_QUESTION_TOPIC_LABELS[topic],
+  );
   return [
     `This is a new UI-started design for design id "${designId}". The design shell already exists - DO NOT call create-design.`,
     WEBSITE_STYLE_REFERENCE_DIRECTIVE,
     ...designSystemGenerationDirectives(designSystemId),
     ...referenceImageDirectives(referenceImageCount),
     "First, call `show-design-questions` with 4-6 tailored questions and then stop. Do NOT call generate-design or present-design-variants until the user submits or skips the questions.",
-    "Make the questions feel like Claude Design intake: form factor, aesthetic direction, important features/content, special interactions/polish, and whether to explore variations. Omit or rephrase anything the user's prompt already answered.",
+    covered.length
+      ? `Available Creative Context already answers: ${covered.map((topic) => INTAKE_QUESTION_TOPIC_LABELS[topic]).join(", ")}. Do NOT ask about these - name what you're following from context in your summary instead.`
+      : "",
+    `Make the questions feel like Claude Design intake, covering what's genuinely still open: ${uncoveredLabels.join(", ")}. Omit or rephrase anything the user's prompt already answered.`,
+    contextHint?.contextUnavailable
+      ? `Creative Context could not be checked before this run (${contextHint.unavailableReason ?? "lookup failed"}). That is different from no context existing - do not treat it as "nothing saved". Ask the normal question set above, and mention in your reply that saved context couldn't be verified this time.`
+      : "",
     "Use concise option chips with `allowOther: true`; include a practical `Decide for me` option where useful. Use `multiSelect: true` for feature/interactions questions.",
     "Set a specific title like `Quick questions about your todo app` and a short description. After `show-design-questions` succeeds, wait for the user's answers.",
-  ];
+  ].filter(Boolean);
 }
 
 export function promptRequestsVariantExploration(prompt: string): boolean {