@agent-native/core 0.80.8 → 0.80.9

package/corpus/README.md

@@ -27,5 +27,5 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- core files: 2041
-- template files: 4598
+- core files: 2043
+- template files: 4649

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @agent-native/core
 
+## 0.80.9
+
+### Patch Changes
+
+- 82c138c: Expose app main surfaces as named CSS query containers so templates can reflow against the available app pane instead of the viewport.
+- 82c138c: ShareButton can render optional custom tabs beside the default share-link panel.
+- 82c138c: Improve the exported Design skills with a clearer generation quality bar, updated variant-screen flow guidance, and more grounded visual-edit review instructions.
+- 82c138c: Remove the extension viewer notification bell and place the vertical more menu before Share.
+- 82c138c: Allow guided question options to submit immediately when selected, with optional per-question submit and skip message copy.
+- 82c138c: Add a local Clips Screen Memory MCP stdio server for querying recent on-device screen context.
+- 82c138c: Avoid CORS preflights for cross-origin session replay uploads so hosted apps can send recordings to the first-party analytics collector.
+
 ## 0.80.8
 
 ### Patch Changes

package/corpus/core/docs/content/locales/ar-SA/template-design.mdx

@@ -374,6 +374,12 @@ npx @agent-native/core@latest skills add visual-edit
 المرقمة مثل `localhost:1234/onboarding/1` و`/onboarding/2` و`/onboarding/3`
 كشاشات منفصلة ومرتبة في وضع النظرة العامة.
 
+يمكن تحميل مسار الإدخال `/visual-edit` قبل تسجيل دخول المشاهد، كما يمكن لروابط
+`/design/:id` العامة عرض تصاميم عامة للقراءة فقط بدون جلسة. ما يزال حفظ تخطيط
+الشاشة أو إنشاء شاشات جديدة أو المشاركة ينشئ بيانات Design مرتبطة بحساب: يُرسَل
+المستخدمون غير المسجلين إلى `/_agent-native/sign-in?return=...`، ثم يحفظ Design
+المشروع أو ينسخه إلى ذلك الحساب قبل فتح مربع حوار المشاركة.
+
 لأسماء طبقات مستقرة، أضف `data-agent-native-layer-name` إلى العناصر المهمة.
 يستخدمه Design قبل البدائل الدلالية/النصية، ويمكنه حفظ إعادة تسمية الطبقات عبر
 تحرير هذا السمة. يدعم HTML المضمن تحرير طبقات الكود محليًا للنصوص والأصناف

package/corpus/core/docs/content/locales/de-DE/template-design.mdx

@@ -376,6 +376,14 @@ zu platzieren. Nummerierte Flows wie `localhost:1234/onboarding/1`,
 `/onboarding/2` und `/onboarding/3` bleiben als getrennte, geordnete Screens im
 Overview-Modus erhalten.
 
+Die Einstiegsroute `/visual-edit` kann laden, bevor der Betrachter angemeldet
+ist, und öffentliche `/design/:id`-Links können öffentliche Designs ohne Sitzung
+schreibgeschützt rendern. Das Speichern des Screen-Layouts, Generieren neuer
+Screens oder Teilen erstellt weiterhin accountgebundene Design-Daten:
+abgemeldete Benutzer gehen durch `/_agent-native/sign-in?return=...`;
+anschließend speichert oder kopiert Design das Projekt in dieses Konto, bevor
+der Teilen-Dialog geöffnet wird.
+
 Für stabile Ebenennamen fügen Sie wichtigen Elementen
 `data-agent-native-layer-name` hinzu. Design verwendet dies vor
 semantischen/textbasierten Fallbacks und kann Umbenennungen durch Bearbeiten

package/corpus/core/docs/content/locales/es-ES/template-design.mdx

@@ -340,11 +340,11 @@ Cada operación invocable por el agente es un archivo TypeScript en `templates/d
 - **Sistemas de diseño**: `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` y `analyze-brand-assets` para recopilar datos de marca antes del análisis.
 - **Importar** — `index-design-system-with-builder` for Builder-backed code/GitHub/Figma file design-system indexing, plus `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Exportación y transferencia**: `export-html`, `export-pdf`, `export-svg`, `export-zip` y `export-coding-handoff` para convertir un diseño en una transferencia de herramienta de codificación.
-- **Contexto y navegación**: `view-screen` (diseño actual, archivo abierto, vista, pregunta pendiente o cuadrícula de variantes), `get-design-snapshot` (estado actual desde el cual un agente externo puede continuar) y `navigate`.
+- **Contexto y navegación**: `view-screen` (diseño actual, archivo abierto, vista, pregunta pendiente o elección de variante), `get-design-snapshot` (estado actual desde el cual un agente externo puede continuar) y `navigate`.
 
 ### Trabajar con el agente
 
-El agente siempre sabe lo que tienes abierto. `view-screen` devuelve el diseño actual, el archivo abierto, la vista activa y cualquier pregunta pendiente o cuadrícula variante y los inyecta en cada mensaje, por lo que puede decir "hacer esto más denso" o "exportar esta variante" sin nombrar el diseño.
+El agente siempre sabe lo que tienes abierto. `view-screen` devuelve el diseño actual, el archivo abierto, la vista activa y cualquier pregunta pendiente o elección de variante y los inyecta en cada mensaje, por lo que puede decir "hacer esto más denso" o "exportar esta variante" sin nombrar el diseño.
 
 Debido a que un diseño son solo archivos HTML/JSX independientes, el agente edita la misma fuente que representa el iframe y de donde proviene cada exportación; no hay un formato de "maqueta de IA" independiente para traducir. Un sistema de diseño vinculado proporciona tokens y `custom_instructions` el agente honra en cada paso de generación. Seleccione texto o una región en la vista previa y presione Cmd+I para enfocar al agente exactamente en esa parte.
 
@@ -375,6 +375,14 @@ por URL. Los flujos numerados como `localhost:1234/onboarding/1`,
 `/onboarding/2` y `/onboarding/3` se mantienen como pantallas separadas y
 ordenadas en modo de vista general.
 
+La ruta de entrada `/visual-edit` puede cargar antes de que el visitante inicie
+sesión, y los enlaces públicos `/design/:id` pueden renderizar diseños públicos
+de solo lectura sin sesión. Persistir el diseño de pantallas, generar pantallas
+nuevas o compartir sigue creando datos de Design vinculados a una cuenta: los
+usuarios sin sesión pasan por `/_agent-native/sign-in?return=...`; después,
+Design guarda o copia el proyecto en esa cuenta antes de abrir el diálogo de
+compartir.
+
 Para nombres de capa estables, agrega `data-agent-native-layer-name` a los
 elementos importantes. Design lo usa antes de los respaldos semánticos/de texto
 y puede persistir cambios de nombre editando ese atributo. HTML inline admite

package/corpus/core/docs/content/locales/fr-FR/template-design.mdx

@@ -340,11 +340,11 @@ Chaque opération appelable par un agent est un fichier TypeScript dans `templat
 - **Systèmes de conception** : `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` et `analyze-brand-assets` pour collecter des données de marque avant l'analyse.
 - **Importer** — `index-design-system-with-builder` for Builder-backed code/GitHub/Figma file design-system indexing, plus `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Exportation et transfert** : `export-html`, `export-pdf`, `export-svg`, `export-zip` et `export-coding-handoff` pour transformer une conception en transfert d'outil de codage.
-- **Contexte et navigation** – `view-screen` (conception actuelle, fichier ouvert, vue, question en attente ou grille de variantes), `get-design-snapshot` (état actuel à partir duquel un agent externe peut continuer) et `navigate`.
+- **Contexte et navigation** – `view-screen` (conception actuelle, fichier ouvert, vue, question en attente ou choix de variante), `get-design-snapshot` (état actuel à partir duquel un agent externe peut continuer) et `navigate`.
 
 ### Travailler avec l'agent
 
-L'agent sait toujours ce que vous avez ouvert. La conception actuelle, le fichier ouvert, la vue active et toute question en attente ou grille de variantes sont renvoyés par `view-screen` et injectés dans chaque message, vous pouvez donc dire « rendre cela plus dense » ou « exporter cette variante » sans nommer la conception.
+L'agent sait toujours ce que vous avez ouvert. La conception actuelle, le fichier ouvert, la vue active et toute question en attente ou choix de variante sont renvoyés par `view-screen` et injectés dans chaque message, vous pouvez donc dire « rendre cela plus dense » ou « exporter cette variante » sans nommer la conception.
 
 Étant donné qu'une conception n'est constituée que de fichiers HTML/JSX autonomes, l'agent édite la même source que celle du rendu iframe et celle d'où provient chaque exportation : il n'existe pas de format de « maquette IA » distinct à traduire. Un système de conception lié fournit des jetons et `custom_instructions` que l'agent honore à chaque passage de génération. Sélectionnez du texte ou une région dans l'aperçu et appuyez sur Cmd+I pour concentrer l'agent exactement sur cette partie.
 
@@ -375,6 +375,14 @@ URL. Les flows numérotés comme `localhost:1234/onboarding/1`,
 `/onboarding/2` et `/onboarding/3` restent des écrans séparés et ordonnés en
 mode overview.
 
+La route d'entrée `/visual-edit` peut se charger avant la connexion du visiteur,
+et les liens publics `/design/:id` peuvent afficher des designs publics en
+lecture seule sans session. Persister la disposition des écrans, générer de
+nouveaux écrans ou partager crée toujours des données Design liées à un compte :
+les utilisateurs non connectés passent par `/_agent-native/sign-in?return=...`,
+puis Design enregistre ou copie le projet dans ce compte avant d'ouvrir la
+boîte de dialogue de partage.
+
 Pour des noms de couche stables, ajoutez `data-agent-native-layer-name` aux
 éléments importants. Design l'utilise avant les replis sémantiques/textuels et
 peut persister les renommages en modifiant cet attribut. Le HTML inline prend en

package/corpus/core/docs/content/locales/hi-IN/template-design.mdx

@@ -374,6 +374,13 @@ place करता है। `localhost:1234/onboarding/1`, `/onboarding/2`, औ
 `/onboarding/3` जैसे numbered flows overview mode में separate ordered screens
 रहते हैं।
 
+`/visual-edit` entry route viewer के sign in करने से पहले load हो सकता है, और
+public `/design/:id` links बिना session के read-only public designs render कर
+सकते हैं। Screen layout persist करना, नए screens generate करना, या sharing अभी
+भी account-backed Design data बनाता है: signed-out users
+`/_agent-native/sign-in?return=...` से गुजरते हैं, फिर Design share dialog खोलने
+से पहले project को उस account में save या copy करता है।
+
 Stable layer names के लिए meaningful elements पर
 `data-agent-native-layer-name` जोड़ें। Design semantic/text fallbacks से पहले
 इसे उपयोग करता है और इसी attribute को edit करके layer renames persist कर सकता

package/corpus/core/docs/content/locales/ja-JP/template-design.mdx

@@ -376,6 +376,13 @@ npx @agent-native/core@latest skills add visual-edit
 のような番号付きフローは、overview mode で個別の順序付き画面として保持
 されます。
 
+`/visual-edit` の入口ルートは閲覧者がサインインする前でも読み込めます。
+公開 `/design/:id` リンクも、セッションなしで読み取り専用の公開 Design を
+表示できます。画面レイアウトの保存、新しい画面の生成、共有は引き続きア
+カウントに紐づく Design データを作成します。サインアウト中のユーザーは
+`/_agent-native/sign-in?return=...` を経由し、その後 Design が共有ダイアロ
+グを開く前にプロジェクトをそのアカウントへ保存またはコピーします。
+
 安定したレイヤー名には、意味のある要素に
 `data-agent-native-layer-name` を追加します。Design はセマンティック/テ
 キストのフォールバックより先にこれを使い、この属性を編集してレイヤー名

package/corpus/core/docs/content/locales/ko-KR/template-design.mdx

@@ -373,6 +373,13 @@ npx @agent-native/core@latest skills add visual-edit
 `localhost:1234/onboarding/1`, `/onboarding/2`, `/onboarding/3` 같은 번호가
 붙은 흐름은 overview mode에서 분리된 순서 있는 화면으로 유지됩니다.
 
+`/visual-edit` 진입 route는 보는 사람이 sign in하기 전에도 load될 수 있고,
+public `/design/:id` 링크는 session 없이 read-only public design을 render할 수
+있습니다. Screen layout을 persist하거나 새 screen을 generate하거나 share하는
+일은 여전히 account-backed Design data를 만듭니다. signed-out 사용자는
+`/_agent-native/sign-in?return=...`를 거친 뒤, Design이 share dialog를 열기
+전에 project를 해당 account에 save하거나 copy합니다.
+
 안정적인 layer name을 위해 의미 있는 요소에 `data-agent-native-layer-name`을
 추가하세요. Design은 semantic/text fallback보다 이것을 먼저 사용하며, 해당
 attribute를 편집해 layer rename을 persist할 수 있습니다. Inline HTML은 text,

package/corpus/core/docs/content/locales/pt-BR/template-design.mdx

@@ -340,11 +340,11 @@ Cada operação que pode ser chamada pelo agente é um arquivo TypeScript em `te
 - **Sistemas de design** — `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` e `analyze-brand-assets` para coletar dados da marca antes da análise.
 - **Importar** — `index-design-system-with-builder` for Builder-backed code/GitHub/Figma file design-system indexing, plus `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Exportação e transferência** — `export-html`, `export-pdf`, `export-svg`, `export-zip` e `export-coding-handoff` para transformar um design em uma transferência de ferramenta de codificação.
-- **Contexto e navegação** — `view-screen` (design atual, arquivo aberto, visualização, pergunta pendente ou grade de variantes), `get-design-snapshot` (estado atual para um agente externo continuar) e `navigate`.
+- **Contexto e navegação** — `view-screen` (design atual, arquivo aberto, visualização, pergunta pendente ou escolha de variante), `get-design-snapshot` (estado atual para um agente externo continuar) e `navigate`.
 
 ### Trabalhando com o agente
 
-O agente sempre sabe o que você tem em aberto. O design atual, o arquivo aberto, a visualização ativa e qualquer questão pendente ou grade de variantes são retornados por `view-screen` e injetados em cada mensagem, para que você possa dizer "tornar isso mais denso" ou "exportar esta variante" sem nomear o design.
+O agente sempre sabe o que você tem em aberto. O design atual, o arquivo aberto, a visualização ativa e qualquer questão pendente ou escolha de variante são retornados por `view-screen` e injetados em cada mensagem, para que você possa dizer "tornar isso mais denso" ou "exportar esta variante" sem nomear o design.
 
 Como um design consiste apenas em arquivos HTML/JSX independentes, o agente edita a mesma fonte que o iframe renderiza e de onde vem cada exportação — não há um formato de "maquete de IA" separado para traduzir. Um sistema de design vinculado fornece tokens e `custom_instructions` que o agente homenageia em cada passagem de geração. Selecione o texto ou uma região na visualização e pressione Cmd+I para focar o agente exatamente nessa parte.
 
@@ -374,6 +374,13 @@ para posicionar cada path ou URL solicitado como sua própria tela iframe basead
 em URL. Fluxos numerados como `localhost:1234/onboarding/1`, `/onboarding/2` e
 `/onboarding/3` permanecem como telas separadas e ordenadas no modo overview.
 
+A rota de entrada `/visual-edit` pode carregar antes de o visitante entrar, e
+links públicos `/design/:id` podem renderizar designs públicos somente leitura
+sem sessão. Persistir o layout das telas, gerar novas telas ou compartilhar
+ainda cria dados do Design vinculados a uma conta: usuários desconectados passam
+por `/_agent-native/sign-in?return=...`; depois, o Design salva ou copia o
+projeto para essa conta antes de abrir o diálogo de compartilhamento.
+
 Para nomes de camada estáveis, adicione `data-agent-native-layer-name` a
 elementos importantes. O Design usa isso antes de fallbacks semânticos/de texto
 e pode persistir renomeações editando esse atributo. HTML inline aceita edições

package/corpus/core/docs/content/locales/zh-CN/template-design.mdx

@@ -370,6 +370,12 @@ npx @agent-native/core@latest skills add visual-edit
 `localhost:1234/onboarding/1`、`/onboarding/2`、`/onboarding/3` 这样的编号流程
 会在 overview 模式中保持为分开的有序屏幕。
 
+`/visual-edit` 入口路由可以在查看者登录前加载，公开的 `/design/:id` 链接也
+可以在没有会话时以只读方式渲染公开 design。持久保存屏幕布局、生成新屏幕或
+共享仍会创建账号绑定的 Design 数据：未登录用户会经过
+`/_agent-native/sign-in?return=...`，然后 Design 会在打开共享对话框前，把项
+目保存或复制到该账号。
+
 为了获得稳定的图层名称，请在有意义的元素上添加
 `data-agent-native-layer-name`。Design 会优先使用它，然后才使用语义/文本回
 退，并且可以通过编辑该属性来持久保存图层重命名。Inline HTML 支持本地代

package/corpus/core/docs/content/locales/zh-TW/template-design.mdx

@@ -371,6 +371,12 @@ npx @agent-native/core@latest skills add visual-edit
 `localhost:1234/onboarding/1`、`/onboarding/2`、`/onboarding/3` 這樣的編號流程
 會在 overview 模式中保持為分開的有序畫面。
 
+`/visual-edit` 入口路由可以在檢視者登入前載入，公開的 `/design/:id` 連結也
+可以在沒有 session 時以唯讀方式渲染公開 design。持久保存畫面版面、產生新畫
+面或分享仍會建立帳號綁定的 Design 資料：未登入使用者會經過
+`/_agent-native/sign-in?return=...`，然後 Design 會在開啟分享對話框前，把專
+案保存或複製到該帳號。
+
 若要取得穩定的圖層名稱，請在有意義的元素上加入
 `data-agent-native-layer-name`。Design 會優先使用它，然後才使用語意/文字
 後備，並且可以透過編輯該屬性來持久保存圖層重新命名。Inline HTML 支援本

package/corpus/core/docs/content/template-design.mdx

@@ -340,11 +340,11 @@ Every agent-callable operation is a TypeScript file in `templates/design/actions
 - **Design systems** — `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system`, and `analyze-brand-assets` for gathering brand data ahead of analysis.
 - **Import** — `index-design-system-with-builder` for Builder-backed code/GitHub/Figma file design-system indexing, plus `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Export & handoff** — `export-html`, `export-pdf`, `export-svg`, `export-zip`, and `export-coding-handoff` to turn a design into a coding-tool handoff.
-- **Context & navigation** — `view-screen` (current design, open file, view, pending question or variant grid), `get-design-snapshot` (current state for an external agent to continue from), and `navigate`.
+- **Context & navigation** — `view-screen` (current design, open file, view, pending question or variant choice), `get-design-snapshot` (current state for an external agent to continue from), and `navigate`.
 
 ### Working with the agent
 
-The agent always knows what you have open. The current design, the open file, the active view, and any pending question or variant grid are returned by `view-screen` and injected into every message, so you can say "make this denser" or "export this variant" without naming the design.
+The agent always knows what you have open. The current design, the open file, the active view, and any pending question or variant choice are returned by `view-screen` and injected into every message, so you can say "make this denser" or "export this variant" without naming the design.
 
 Because a design is just standalone HTML/JSX files, the agent edits the same source the iframe renders and every export comes from — there is no separate "AI mockup" format to translate. A linked design system supplies tokens and `custom_instructions` the agent honors on every generation pass. Select text or a region in the preview and hit Cmd+I to focus the agent on exactly that part.
 
@@ -374,6 +374,13 @@ place each requested path or URL as its own URL-backed iframe screen. Numbered
 flows such as `localhost:1234/onboarding/1`, `/onboarding/2`, and
 `/onboarding/3` stay as separate ordered screens in overview mode.
 
+The `/visual-edit` entry route can load before the viewer signs in, and public
+`/design/:id` links can render read-only public designs without a session.
+Persisting the screen layout, generating new screens, or sharing still creates
+account-backed Design data: signed-out users go through
+`/_agent-native/sign-in?return=...`, then Design saves or copies the project
+into that account before opening the share dialog.
+
 For stable layer names, add `data-agent-native-layer-name` to meaningful
 elements. Design uses it before semantic/text fallbacks and can persist layer
 renames by editing that attribute. Inline HTML supports local code-layer edits

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.80.8",
+  "version": "0.80.9",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/cli/mcp.ts

@@ -17,6 +17,7 @@ import crypto from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
 
+import { runScreenMemoryMCPStdio } from "../mcp/screen-memory-stdio.js";
 import { runMCPStdio } from "../mcp/stdio.js";
 import {
   findWorkspaceRoot,
@@ -46,6 +47,7 @@ interface ParsedArgs {
   client?: string;
   app?: string;
   port?: number;
+  screenMemoryDir?: string;
   scope?: string;
   standalone: boolean;
   rotate: boolean;
@@ -64,6 +66,7 @@ function parseArgs(argv: string[]): ParsedArgs {
     if ((v = eat("--client")) !== undefined) out.client = v;
     else if ((v = eat("--app")) !== undefined) out.app = v;
     else if ((v = eat("--port")) !== undefined) out.port = Number(v);
+    else if ((v = eat("--dir")) !== undefined) out.screenMemoryDir = v;
     else if ((v = eat("--scope")) !== undefined) out.scope = v;
     else if (a === "--standalone") out.standalone = true;
     else if (a === "--rotate") out.rotate = true;
@@ -537,6 +540,10 @@ Usage:
       Run the MCP stdio transport (what client configs spawn).
       Default: proxy to the running local app; --standalone builds from disk.
 
+  npx @agent-native/core@latest mcp screen-memory [--dir <path>]
+      Run the local Clips Screen Memory stdio server.
+      Defaults to the Clips app-data screen-memory folder.
+
   npx @agent-native/core@latest mcp install --client <c> [--app <id>] [--scope user|project]
       Provision a token and write the client's MCP config (idempotent).
       Clients: claude-code, codex, cowork, cursor, opencode, github-copilot
@@ -558,6 +565,9 @@ export async function runMcp(args: string[]): Promise<void> {
     case "serve":
       await cmdServe(p);
       return;
+    case "screen-memory":
+      await runScreenMemoryMCPStdio({ storeDir: p.screenMemoryDir });
+      return;
     case "install":
       await cmdInstall(p);
       return;

package/corpus/core/src/cli/skills.ts

@@ -323,17 +323,18 @@ iteration, or a human-in-the-loop choice among design directions.
 - Use \`create-design\` first to create a project shell. Do not report the
   design as ready until it has renderable HTML.
 - For open-ended UX exploration, generate distinct, complete HTML directions
-  (2-5, three by default) and call \`present-design-variants\`. The inline
-  Design MCP app shows the options, lets the user pick one, and persists the
-  selected variant.
-- If the Design app opens as a browser link instead of inline (CLI hosts like
-  Codex / Claude Code, where the deep link carries \`handoff=chat\`), the user
-  picks a direction there and the editor shows a copyable summary — ask them to
-  paste it back into chat so you can continue from the chosen direction. The
-  \`present-design-variants\` result's \`fallbackInstructions\` describe this.
+  (2-5, three by default) and call \`present-design-variants\`. Design saves
+  every option as a normal screen on the overview board and renders an inline
+  chat choice with one button per screen name. After the user picks, delete the
+  unchosen variant screens and continue from the kept screen.
+- If the chat choice buttons are not available in the host, ask the user to
+  tell you the screen name they prefer. The variants are already real screens
+  on the board, so do not ask them to paste HTML or copy a generated handoff
+  summary.
 - For direct refinements to an already chosen direction, call
-  \`get-design-snapshot\`, edit from the current tuned HTML, then call
-  \`generate-design\`.
+  \`get-design-snapshot\`, edit from the current tuned HTML, and use
+  \`edit-design\` for surgical changes. Use \`generate-design\` for new files
+  or larger structural rewrites.
 - Use \`export-coding-handoff\` when the user wants to implement the chosen
   design in a codebase.
 
@@ -347,8 +348,29 @@ iteration, or a human-in-the-loop choice among design directions.
 4. For product UI redesigns, prefer cleaner hierarchy, progressive disclosure,
    and realistic controls over decorative mockups.
 5. After \`present-design-variants\`, wait for the user's pick before
-   generating the next version. If they say "I like #2 but...", snapshot the
-   chosen design and refine that direction with \`generate-design\`.
+   generating the next version. Keep the chosen screen, delete the other
+   variant screens, then refine that direction with \`generate-design\` or
+   \`edit-design\`.
+
+## Design Quality Bar
+
+- Before generating, name the concrete audience, the screen's primary job, and
+  the visual thesis. If the brief is vague, make a reasonable choice and state
+  it instead of producing a generic dashboard/landing-page default.
+- For existing products, inspect the current screen, design system, tokens,
+  component language, or codebase context before inventing a new direction.
+- Make each direction distinct in structure and behavior, not just palette.
+  Give every variant one memorable signature choice, then keep the surrounding
+  chrome disciplined.
+- Treat copy, data, and imagery as design material. Use realistic domain
+  content and first-party/generated assets when images matter; avoid lorem
+  ipsum, vague SaaS filler, and decorative placeholder boxes.
+- Build to a quiet quality floor: responsive desktop/mobile layout, visible
+  keyboard focus, useful loading/empty/error states for app UI, and reduced
+  motion support when custom motion is present.
+- After broad generation or refinement, inspect the rendered Design surface or
+  a screenshot-capable host before calling it ready. Fix obvious hierarchy,
+  overflow, contrast, broken interaction, and placeholder-content issues first.
 
 ## Cross-App Use
 
@@ -382,6 +404,8 @@ name: visual-edit
 description: >-
   Open a running local app in Design overview mode as URL-backed iframe screens
   for visual editing, flow review, duplication, and route-state exploration.
+  Use when the user asks to inspect, compare, or edit a real local app visually
+  in Design.
 metadata:
   visibility: exported
 ---
@@ -409,6 +433,28 @@ iframe-backed screens on the infinite canvas.
   \`localhost:1234/onboarding/1\` means
   \`http://localhost:1234/onboarding/1\`.
 
+## Review Quality
+
+- Treat the running app as the truth. Preserve its component language, tokens,
+  route state, and real content unless the user explicitly asks for a new visual
+  direction.
+- Use multiple URL states to reveal meaningful UX moments: empty/loading/error
+  states, focused panels, modals, responsive breakpoints, and completed flow
+  steps when those matter to the review.
+- For visual edits, compare before/after at the relevant viewport sizes and
+  check key hover/focus/scroll states when the app exposes them.
+
+## Account And Sharing Model
+
+- The \`/visual-edit\` entry route can open before the viewer signs in. Public
+  \`/design/:id\` editor links can also render read-only public designs without a
+  session.
+- Do not attempt anonymous write actions. Bridge registration, design creation,
+  screen placement, generation, saving, and sharing are account-backed. If a
+  signed-out visitor wants to save or share, send them through the framework
+  sign-in return flow, then save or copy the design into that account before
+  opening the share dialog.
+
 ## Required Local Bridge
 
 From the target app repo, make sure its dev server is running, then run:

package/corpus/core/src/client/error-format.ts

@@ -81,6 +81,23 @@ function isProviderRateLimit(text: string, errorCode?: string): boolean {
   );
 }
 
+function isProviderAuthenticationError(
+  text: string,
+  errorCode?: string,
+): boolean {
+  const code = normalizeErrorCode(errorCode);
+  const lower = text.toLowerCase();
+  return (
+    code === "authentication_error" ||
+    code === "http_401" ||
+    lower.includes("invalid x-api-key") ||
+    lower.includes("invalid api key") ||
+    lower.includes("incorrect api key") ||
+    lower.includes("api key is invalid") ||
+    (lower.includes("authentication_error") && lower.includes("api"))
+  );
+}
+
 export function normalizeChatError(
   errorMessage: string,
   errorCode?: string,
@@ -97,6 +114,14 @@ export function normalizeChatError(
     };
   }
 
+  if (isProviderAuthenticationError(text, errorCode)) {
+    return {
+      message:
+        "The model provider rejected the saved API key. Update the key in API Keys & Connections, then retry.",
+      details: text,
+    };
+  }
+
   if (/^Gateway error \(no detail; raw event:/i.test(text)) {
     // The previous copy promised auto-recovery and suggested switching models,
     // but neither helps for this code: the server already retried once and

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

@@ -2,7 +2,7 @@ import {
   IconArrowLeft,
   IconArrowBackUp,
   IconChevronRight,
-  IconDots,
+  IconDotsVertical,
   IconHistory,
   IconLoader2,
   IconPencil,
@@ -33,7 +33,6 @@ import {
 } from "../components/ui/tooltip.js";
 import { PromptComposer } from "../composer/PromptComposer.js";
 import { isEmbedMcpChatBridgeActive } from "../embed-auth.js";
-import { NotificationsBell } from "../notifications/NotificationsBell.js";
 import { ShareButton } from "../sharing/ShareButton.js";
 import {
   deleteOrHideExtension,
@@ -1162,6 +1161,17 @@ export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
                   extension={extension}
                   onOpenChange={onPopoverOpenChange}
                 />
+              </>
+            )}
+            <ToolMoreMenu
+              extensionId={extensionId}
+              toolName={extension.name}
+              canDelete={extension.canDelete}
+              sourceMode={extension.source?.mode}
+              onOpenChange={onPopoverOpenChange}
+            />
+            {!isLocalExtension && (
+              <>
                 <ShareButton
                   resourceType="extension"
                   resourceId={extensionId}
@@ -1177,14 +1187,6 @@ export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
                 />
               </>
             )}
-            <ToolMoreMenu
-              extensionId={extensionId}
-              toolName={extension.name}
-              canDelete={extension.canDelete}
-              sourceMode={extension.source?.mode}
-              onOpenChange={onPopoverOpenChange}
-            />
-            <NotificationsBell onOpenChange={onPopoverOpenChange} />
             <AgentToggleButton />
           </div>
         </div>
@@ -1320,7 +1322,7 @@ function ToolMoreMenu({
               className="inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer"
               aria-label="More options"
             >
-              <IconDots className="h-4 w-4" />
+              <IconDotsVertical className="h-4 w-4" />
             </button>
           </PopoverTrigger>
         </TooltipTrigger>

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

@@ -50,6 +50,8 @@ export interface GuidedQuestion {
   allowOther?: boolean;
   includeExplore?: boolean;
   includeDecide?: boolean;
+  /** Submit immediately when a single-select option is clicked. */
+  submitOnSelect?: boolean;
 }
 
 export type GuidedQuestionAnswers = Record<string, unknown>;
@@ -60,6 +62,8 @@ export interface GuidedQuestionPayload {
   description?: string;
   skipLabel?: string;
   submitLabel?: string;
+  submitMessage?: string;
+  skipMessage?: string;
   /**
    * @internal Set by {@link askUserQuestion} for client-initiated questions.
    * When present, `useGuidedQuestionFlow` resolves the matching in-memory
@@ -374,6 +378,7 @@ export function guidedQuestionsFingerprint(
       allowOther: question.allowOther ?? null,
       includeExplore: question.includeExplore ?? null,
       includeDecide: question.includeDecide ?? null,
+      submitOnSelect: question.submitOnSelect ?? false,
       min: question.min ?? null,
       max: question.max ?? null,
       step: question.step ?? null,
@@ -447,6 +452,11 @@ export function GuidedQuestionFlow({
   const setAnswer = useCallback((id: string, value: unknown) => {
     setAnswers((prev) => ({ ...prev, [id]: value }));
   }, []);
+  const submitAnswers = useCallback(
+    (nextAnswers: GuidedQuestionAnswers = answers) =>
+      onSubmit(normalizeGuidedAnswers(nextAnswers)),
+    [answers, onSubmit],
+  );
 
   const allRequiredAnswered = questions
     .filter((question) => question.required)
@@ -484,6 +494,9 @@ export function GuidedQuestionFlow({
               question={question}
               value={answers[question.id]}
               onChange={(value) => setAnswer(question.id, value)}
+              onSubmitAnswer={(value) =>
+                submitAnswers({ ...answers, [question.id]: value })
+              }
             />
           ))}
         </div>
@@ -512,7 +525,7 @@ export function GuidedQuestionFlow({
             </button>
             <button
               type="button"
-              onClick={() => onSubmit(normalizeGuidedAnswers(answers))}
+              onClick={() => submitAnswers()}
               disabled={!allRequiredAnswered}
               className="inline-flex cursor-pointer items-center gap-2 rounded-md bg-primary px-3.5 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-45"
             >
@@ -531,11 +544,13 @@ function QuestionCard({
   question,
   value,
   onChange,
+  onSubmitAnswer,
 }: {
   index: number;
   question: GuidedQuestion;
   value: unknown;
   onChange: (value: unknown) => void;
+  onSubmitAnswer: (value: unknown) => void;
 }) {
   return (
     <section className="rounded-lg border border-border bg-card/65 p-4 shadow-sm">
@@ -564,7 +579,12 @@ function QuestionCard({
       </div>
 
       {question.type === "text-options" && (
-        <TextOptions question={question} value={value} onChange={onChange} />
+        <TextOptions
+          question={question}
+          value={value}
+          onChange={onChange}
+          onSubmitAnswer={onSubmitAnswer}
+        />
       )}
       {question.type === "color-options" && (
         <ColorOptions question={question} value={value} onChange={onChange} />
@@ -591,10 +611,12 @@ function TextOptions({
   question,
   value,
   onChange,
+  onSubmitAnswer,
 }: {
   question: GuidedQuestion;
   value: unknown;
   onChange: (value: unknown) => void;
+  onSubmitAnswer: (value: unknown) => void;
 }) {
   const options = useMemo(() => withDefaultOptions(question), [question]);
   const multiSelect = question.multiSelect === true;
@@ -612,6 +634,7 @@ function TextOptions({
   const toggleOption = (optionValue: string) => {
     if (!multiSelect) {
       onChange(optionValue);
+      if (question.submitOnSelect) onSubmitAnswer(optionValue);
       return;
     }
     const next = selectedValues.includes(optionValue)
@@ -1060,6 +1083,7 @@ export function useGuidedQuestionFlow({
         return;
       }
       const formattedAnswers = formatGuidedAnswersForAgent(answers);
+      const resolvedSubmitMessage = payload?.submitMessage ?? submitMessage;
       const context =
         buildSubmitContext?.({ answers, formattedAnswers }) ??
         [
@@ -1068,7 +1092,11 @@ export function useGuidedQuestionFlow({
           "Answers:",
           formattedAnswers,
         ].join("\n");
-      sendToAgentChat({ message: submitMessage, context, submit: true });
+      sendToAgentChat({
+        message: resolvedSubmitMessage,
+        context,
+        submit: true,
+      });
       clear();
     },
     [buildSubmitContext, clear, payload, submitMessage],
@@ -1082,7 +1110,7 @@ export function useGuidedQuestionFlow({
       return;
     }
     sendToAgentChat({
-      message: skipMessage,
+      message: payload?.skipMessage ?? skipMessage,
       context: buildSkipContext?.(),
       submit: true,
     });