@agent-native/core 0.80.0 → 0.80.1

package/corpus/README.md

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

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @agent-native/core
 
+## 0.80.1
+
+### Patch Changes
+
+- 1d77419: Route design-system indexing through Builder-managed design-system APIs while preserving the public Figma parser export.
+- 1d77419: Fix avatar lookup routes so profile photos load for users signed in through legacy Google OAuth sessions.
+- 1d77419: Keep shared app shell outlines visible around the top corners when app content fills the main surface.
+
 ## 0.80.0
 
 ### Minor Changes

package/corpus/core/docs/content/locales/ar-SA/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills موجود في `.agents/skills/<name>/SKILL.md` ويحتوي على إر
 
 ## skills المدعوم بالتطبيق {#app-backed-skills}
 
+تشمل skills المدعومة بالتطبيق حاليا `visual-plan` و`visual-recap` من Plan،
+و`visual-edit` من Design، و`assets` من Assets، و`content` لتحرير docs/blog/MDX
+من المستودع.
+
 تحزم skills المدعومة بالتطبيق تطبيقًا أصليًا للوكيل باعتباره قطعة أثرية في سوق المهارات. يمكن أن تتضمن الحزمة تعليمات الوكيل، وبيانات تعريف موصل skills المصدرة، وتعليمات التشغيل المستضافة/المحلية، وأسطح UI مثل تطبيقات MCP.
 
 > **التفاصيل الكاملة أدناه:** يتم تغطية آليات skills المدعومة بالتطبيق (تنسيق البيان، وأوامر CLI، ومحولات السوق، وتجزئة التحديث التلقائي) في [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ scope: dev
 ```bash
 # المسار السعيد: التعليمات المصدرة بالإضافة إلى موصل MCP المستضاف.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # تحرير Content docs/blog/MDX مع اعتبار الريبو مصدر الحقيقة.

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

@@ -340,7 +340,7 @@ pnpm dev
 - **التصميمات** — `create-design` (صدفة فارغة)، `generate-design` (كتابة محتوى HTML/JSX)، `update-design`، `get-design`، `list-designs`، `duplicate-design`، `delete-design`، و`apply-tweaks` لاستمرار مقبض القرص المباشر القيم (لون التمييز، والكثافة، وما إلى ذلك).
 - **الملفات** — `create-file`، `update-file`، `list-files`، `delete-file` للملفات الموجودة داخل مشروع التصميم.
 - **أنظمة التصميم** — `create-design-system`، و`update-design-system`، و`get-design-system`، و`list-design-systems`، و`delete-design-system`، و`set-default-design-system`، و`analyze-brand-assets` لجمع بيانات العلامة التجارية قبل التحليل.
-- **استيراد** — `import-code`، و`import-figma`، و`import-github`، و`import-from-url`، و`import-document` (DOCX/PPTX/PDF/XLSX)، و`import-design-project` لرفع نظام التصميم من مشروع حالي.
+- **استيراد** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **التصدير والتسليم** — `export-html`، و`export-pdf`، و`export-svg`، و`export-zip`، و`export-coding-handoff` لتحويل التصميم إلى تسليم لأداة البرمجة.
 - **السياق والتنقل** — `view-screen` (التصميم الحالي، ملف مفتوح، عرض، سؤال معلق أو شبكة متغيرة)، `get-design-snapshot` (الحالة الحالية للوكيل الخارجي للمتابعة منها)، و`navigate`.
 
@@ -361,6 +361,19 @@ pnpm dev
 طبقات DOM/الكود داخل ملف واحد معروض. تعكس لوحة الطبقات هذا التقسيم: الشاشات
 إطارات من المستوى الأعلى، وتحت الشاشة النشطة تظهر طبقات DOM/الكود المتداخلة.
 
+ثبّت `/visual-edit` عندما يحتاج وكيل البرمجة إلى فتح تطبيق محلي يعمل في
+Design بدل إنشاء HTML نموذج أولي مستقل:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+بعد تشغيل خادم التطوير للتطبيق الهدف، يستخدم `/visual-edit`
+`npx @agent-native/core@latest design connect` مع `add-localhost-screens` لوضع
+كل مسار أو URL مطلوب كشاشة iframe منفصلة مدعومة بعنوان URL. تبقى التدفقات
+المرقمة مثل `localhost:1234/onboarding/1` و`/onboarding/2` و`/onboarding/3`
+كشاشات منفصلة ومرتبة في وضع النظرة العامة.
+
 لأسماء طبقات مستقرة، أضف `data-agent-native-layer-name` إلى العناصر المهمة.
 يستخدمه Design قبل البدائل الدلالية/النصية، ويمكنه حفظ إعادة تسمية الطبقات عبر
 تحرير هذا السمة. يدعم HTML المضمن تحرير طبقات الكود محليًا للنصوص والأصناف

package/corpus/core/docs/content/locales/de-DE/skills-guide.mdx

@@ -118,6 +118,10 @@ Domäne skills folgt demselben Format wie das Framework skills. Sie kodieren Mus
 
 ## App-gestütztes skills {#app-backed-skills}
 
+Aktuelle appgestützte Skills sind `visual-plan` und `visual-recap` aus Plan,
+`visual-edit` aus Design, `assets` aus Assets und `content` für repo-basiertes
+Bearbeiten von docs/blog/MDX.
+
 App-gestütztes skills-Paket einer agentennativen App als Skill-Marktplatz-Artefakt. Das Paket kann Agentenanweisungen, exportierte skills-, MCP-Connector-Metadaten, gehostete/lokale Startanweisungen und UI-Oberflächen wie MCP-Apps enthalten.
 
 > **Vollständige Details unten:** Die Mechanismen des App-gestützten skills (Manifestformat, CLI-Befehle, Marktplatzadapter, automatisches Update-Hashing) werden in [App-backed skills — full details](#app-backed-skills-full) behandelt.
@@ -328,6 +332,7 @@ Offline-Arbeit oder datenschutzrelevante Nutzung.
 ```bash
 # Glücklicher Weg: exportierte Anweisungen plus gehosteter MCP-Connector.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Repo-first Content docs/blog/MDX Bearbeitung.

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

@@ -338,7 +338,7 @@ Jeder vom Agenten aufrufbare Vorgang ist eine TypeScript-Datei in `templates/des
 - **Designs** – `create-design` (leere Shell), `generate-design` (generierten HTML/JSX-Inhalt schreiben), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` und `apply-tweaks` zum Beibehalten von Live-Tweak-Knopf-Werten (Akzentfarbe, Dichte, usw.).
 - **Dateien** – `create-file`, `update-file`, `list-files`, `delete-file` für die Dateien in einem Designprojekt.
 - **Designsysteme** – `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` und `analyze-brand-assets` zum Sammeln von Markendaten vor der Analyse.
-- **Importieren** – `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) und `import-design-project`, um ein Designsystem aus einem vorhandenen Projekt zu entfernen.
+- **Importieren** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Export & Übergabe** – `export-html`, `export-pdf`, `export-svg`, `export-zip` und `export-coding-handoff`, um ein Design in eine Codierungstool-Übergabe umzuwandeln.
 - **Kontext und Navigation** – `view-screen` (aktuelles Design, offene Datei, Ansicht, ausstehende Frage oder Variantenraster), `get-design-snapshot` (aktueller Status, von dem aus ein externer Agent fortfahren kann) und `navigate`.
 
@@ -362,6 +362,20 @@ und Bearbeitung der DOM-/Code-Ebenen in einer gerenderten Datei gedacht. Das
 Ebenenfenster spiegelt diese Trennung wider: Bildschirme sind Rahmen der
 obersten Ebene, darunter liegen die DOM-/Code-Ebenen des aktiven Bildschirms.
 
+Installiere `/visual-edit`, wenn ein Coding Agent eine laufende lokale App in
+Design öffnen soll, statt eigenständiges Prototype-HTML zu generieren:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Sobald der Dev-Server der Ziel-App läuft, nutzt `/visual-edit`
+`npx @agent-native/core@latest design connect` plus `add-localhost-screens`, um
+jeden angeforderten Pfad oder jede URL als eigenen URL-gestützten iframe-Screen
+zu platzieren. Nummerierte Flows wie `localhost:1234/onboarding/1`,
+`/onboarding/2` und `/onboarding/3` bleiben als getrennte, geordnete Screens im
+Overview-Modus erhalten.
+
 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/skills-guide.mdx

@@ -118,6 +118,10 @@ El dominio skills sigue el mismo formato que el marco skills. Codifican patrones
 
 ## skills respaldado por aplicación {#app-backed-skills}
 
+Las skills respaldadas por apps actuales incluyen `visual-plan` y `visual-recap`
+de Plan, `visual-edit` de Design, `assets` de Assets y `content` para editar
+docs/blog/MDX desde el repositorio.
+
 skills, respaldado por una aplicación, empaqueta una aplicación nativa del agente como un artefacto del mercado de habilidades. El paquete puede incluir instrucciones del agente, skills exportado, metadatos del conector MCP, instrucciones de inicio alojadas/locales y superficies UI como aplicaciones MCP.
 
 > **Detalles completos a continuación:** la mecánica de skills respaldado por aplicaciones (formato de manifiesto, comandos CLI, adaptadores de mercado, hash de actualización automática) se tratan en [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ trabajo sin conexión o uso sensible a la privacidad.
 ```bash
 # Camino feliz: instrucciones exportadas más conector MCP alojado.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Edición de docs/blog/MDX con Content primero en el repositorio.

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

@@ -338,7 +338,7 @@ Cada operación invocable por el agente es un archivo TypeScript en `templates/d
 - **Diseños**: `create-design` (cáscara vacía), `generate-design` (contenido de HTML/JSX generado por escritura), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` y `apply-tweaks` para conservar los valores de las perillas de ajuste en vivo (color de acento, densidad, etc.).
 - **Archivos**: `create-file`, `update-file`, `list-files`, `delete-file` para los archivos dentro de un proyecto de diseño.
 - **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**: `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) y `import-design-project` para sacar un sistema de diseño de un proyecto existente.
+- **Importar** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `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`.
 
@@ -361,6 +361,20 @@ comportamiento del prototipo y editar las capas DOM/código dentro de un archivo
 renderizado. El panel de capas refleja esa división: las pantallas son marcos de
 nivel superior, con capas DOM/código anidadas para la pantalla activa.
 
+Instala `/visual-edit` cuando un agente de código deba abrir una app local en
+ejecución dentro de Design en lugar de generar HTML de prototipo independiente:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Después de que el servidor dev de la app objetivo esté corriendo, `/visual-edit`
+usa `npx @agent-native/core@latest design connect` más `add-localhost-screens`
+para colocar cada ruta o URL solicitada como su propia pantalla iframe respaldada
+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.
+
 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/skills-guide.mdx

@@ -118,6 +118,10 @@ Le domaine skills suit le même format que le framework skills. Ils codent des m
 
 ## skills soutenu par une application {#app-backed-skills}
 
+Les skills basées sur des apps incluent aujourd'hui `visual-plan` et
+`visual-recap` depuis Plan, `visual-edit` depuis Design, `assets` depuis Assets
+et `content` pour l'édition docs/blog/MDX depuis le dépôt.
+
 skills basé sur une application regroupe une application native d'agent en tant qu'artefact de marché de compétences. L'ensemble peut inclure des instructions d'agent, des métadonnées de connecteur skills exportées et MCP, des instructions de lancement hébergées/locales et des surfaces UI telles que les applications MCP.
 
 > **Tous les détails ci-dessous :** les mécanismes du skills basé sur l'application (format du manifeste, commandes CLI, adaptateurs de marché, hachage de mise à jour automatique) sont couverts dans [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ travail hors ligne ou utilisation sensible à la confidentialité.
 ```bash
 # Chemin heureux : instructions exportées et connecteur MCP hébergé.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Édition docs/blog/MDX avec Content, d'abord dans le dépôt.

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

@@ -338,7 +338,7 @@ Chaque opération appelable par un agent est un fichier TypeScript dans `templat
 - **Designs** — `create-design` (coque vide), `generate-design` (contenu HTML/JSX généré par écriture), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` et `apply-tweaks` pour conserver les valeurs du bouton de réglage en direct (couleur d'accent, densité, etc.).
 - **Fichiers** — `create-file`, `update-file`, `list-files`, `delete-file` pour les fichiers contenus dans un projet de conception.
 - **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** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) et `import-design-project` pour extraire un système de conception d'un projet existant.
+- **Importer** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `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`.
 
@@ -361,6 +361,20 @@ prototype et modifier les couches DOM/code dans un fichier rendu. Le panneau des
 couches reflète cette séparation : les écrans sont des cadres de niveau
 supérieur, avec les couches DOM/code imbriquées pour l'écran actif.
 
+Installez `/visual-edit` lorsqu'un agent de code doit ouvrir une app locale en
+cours d'exécution dans Design au lieu de générer du HTML de prototype autonome :
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Une fois le serveur dev de l'app cible lancé, `/visual-edit` utilise
+`npx @agent-native/core@latest design connect` avec `add-localhost-screens` pour
+placer chaque chemin ou URL demandé comme son propre écran iframe adossé à une
+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.
+
 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/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills, `.agents/skills/<name>/SKILL.md` पर लाइव है और इ
 
 ## ऐप-समर्थित skills {#app-backed-skills}
 
+मौजूदा app-backed skills में Plan के `visual-plan` और `visual-recap`, Design का
+`visual-edit`, Assets का `assets`, और repo-backed docs/blog/MDX editing के लिए
+`content` शामिल हैं.
+
 ऐप-समर्थित skills एक कौशल बाज़ार आर्टिफैक्ट के रूप में एक एजेंट-मूल ऐप को पैकेज करता है। बंडल में एजेंट निर्देश, निर्यातित skills, MCP कनेक्टर मेटाडेटा, होस्टेड/स्थानीय लॉन्च निर्देश और UI सतह जैसे MCP ऐप्स शामिल हो सकते हैं।
 
 > **पूर्ण विवरण नीचे:** ऐप-समर्थित skills (प्रकट प्रारूप, CLI कमांड, मार्केटप्लेस एडाप्टर, ऑटो-अपडेट हैशिंग) के यांत्रिकी [App-backed skills — full details](#app-backed-skills-full) में शामिल हैं।
@@ -328,6 +332,7 @@ scope: dev
 ```bash
 # शुभ पथ: निर्यात किए गए निर्देश और होस्ट किए गए MCP कनेक्टर।
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # रेपो-प्रथम Content docs/blog/MDX संपादन।

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

@@ -338,7 +338,7 @@ UI में रूट `templates/design/app/routes/` के अंतर्ग
 - **डिज़ाइन** - `create-design` (खाली शेल), `generate-design` (लाइव बनाए रखने के लिए HTML/JSX सामग्री लिखें), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design`, और `apply-tweaks` ट्विक-नॉब मान (उच्चारण रंग, घनत्व, आदि)।
 - **फ़ाइलें** - एक डिज़ाइन प्रोजेक्ट के अंदर फ़ाइलों के लिए `create-file`, `update-file`, `list-files`, `delete-file`।
 - **डिज़ाइन सिस्टम** - विश्लेषण से पहले ब्रांड डेटा इकट्ठा करने के लिए `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system`, और `analyze-brand-assets`।
-- **आयात** - `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), और `import-design-project` किसी मौजूदा प्रोजेक्ट से डिज़ाइन सिस्टम को हटाने के लिए।
+- **आयात** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **निर्यात और हैंडऑफ़** - किसी डिज़ाइन को कोडिंग-टूल हैंडऑफ़ में बदलने के लिए `export-html`, `export-pdf`, `export-svg`, `export-zip`, और `export-coding-handoff`।
 - **संदर्भ और नेविगेशन** - `view-screen` (वर्तमान डिज़ाइन, खुली फ़ाइल, दृश्य, लंबित प्रश्न या भिन्न ग्रिड), `get-design-snapshot` (बाहरी एजेंट के लिए वर्तमान स्थिति जारी रखने के लिए), और `navigate`।
 
@@ -360,6 +360,20 @@ rendered file के अंदर DOM/code layers edit करने के ल
 model दिखाता है: screens top-level frames हैं, और active screen के नीचे nested
 DOM/code layers होते हैं।
 
+जब coding agent को standalone prototype HTML बनाने के बजाय running local app को
+Design में खोलना हो, तब `/visual-edit` install करें:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Target app dev server चलने के बाद, `/visual-edit`
+`npx @agent-native/core@latest design connect` और `add-localhost-screens` का
+उपयोग करके हर requested path या URL को अपने URL-backed iframe screen के रूप में
+place करता है। `localhost:1234/onboarding/1`, `/onboarding/2`, और
+`/onboarding/3` जैसे numbered flows overview mode में separate ordered screens
+रहते हैं।
+
 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/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills は `.agents/skills/<name>/SKILL.md` にあり、エージェント向け
 
 ## アプリベースの skills {#app-backed-skills}
 
+現在の app-backed skills には、Plan の `visual-plan` と `visual-recap`、
+Design の `visual-edit`、Assets の `assets`、repo-backed docs/blog/MDX
+編集用の `content` があります。
+
 アプリベースの skills は、エージェント ネイティブ アプリをスキル マーケットプレイス アーティファクトとしてパッケージ化します。バンドルには、エージェントの指示、エクスポートされた skills、MCP コネクタ メタデータ、ホスト/ローカルの起動指示、MCP アプリなどの UI サーフェスを含めることができます。
 
 > **詳細は以下の通り:** アプリベースの skills の仕組み (マニフェスト形式、CLI コマンド、マーケットプレイス アダプター、自動更新ハッシュ) は、[App-backed skills — full details](#app-backed-skills-full) で説明されています。
@@ -328,6 +332,7 @@ Hosted はデフォルトのインストール パスです。ローカル起動
 ```bash
 # ハッピー パス: エクスポートされた命令とホストされた MCP コネクタ。
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # リポジトリ優先コンテンツ docs/blog/MDX 編集。

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

@@ -340,7 +340,7 @@ UI のルートは `templates/design/app/routes/` の下にあります: `_index
 - **デザイン** — `create-design` (空のシェル)、`generate-design` (生成された HTML/JSX コンテンツを書き込む)、`update-design`、`get-design`、`list-designs`、`duplicate-design`、`delete-design`、および `apply-tweaks` (ライブ永続化用)ノブの値を調整します (アクセントカラー、濃度など)。
 - **ファイル** — 設計プロジェクト内のファイルの `create-file`、`update-file`、`list-files`、`delete-file`。
 - **デザイン システム** — 分析に先立ってブランド データを収集するための `create-design-system`、`update-design-system`、`get-design-system`、`list-design-systems`、`delete-design-system`、`set-default-design-system`、および `analyze-brand-assets`。
-- **インポート** — `import-code`、`import-figma`、`import-github`、`import-from-url`、`import-document` (DOCX/PPTX/PDF/XLSX)、および `import-design-project` を使用して、既存のプロジェクトからデザイン システムを取り出します。
+- **インポート** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **エクスポートとハンドオフ** — デザインをコーディング ツールのハンドオフに変換するための `export-html`、`export-pdf`、`export-svg`、`export-zip`、および `export-coding-handoff`。
 - **コンテキストとナビゲーション** — `view-screen` (現在のデザイン、開いているファイル、ビュー、保留中の質問またはバリアント グリッド)、`get-design-snapshot` (外部エージェントが続行する現在の状態)、および `navigate`。
 
@@ -361,6 +361,21 @@ Design は複数画面の作業では概要を最初に使います。生成後
 イヤーパネルもこの分離を反映します。画面は最上位フレームで、アクティブ
 画面の下に DOM/コードレイヤーがネストされます。
 
+コーディングエージェントがスタンドアロンのプロトタイプ HTML を生成する
+代わりに、実行中のローカルアプリを Design で開く必要がある場合は
+`/visual-edit` をインストールします。
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+対象アプリの dev server が起動したら、`/visual-edit` は
+`npx @agent-native/core@latest design connect` と `add-localhost-screens` を
+使い、要求された各 path または URL を URL ベースの iframe 画面として配置
+します。`localhost:1234/onboarding/1`、`/onboarding/2`、`/onboarding/3`
+のような番号付きフローは、overview mode で個別の順序付き画面として保持
+されます。
+
 安定したレイヤー名には、意味のある要素に
 `data-agent-native-layer-name` を追加します。Design はセマンティック/テ
 キストのフォールバックより先にこれを使い、この属性を編集してレイヤー名

package/corpus/core/docs/content/locales/ko-KR/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills는 `.agents/skills/<name>/SKILL.md`에 거주하며 상담원을 위한
 
 ## 앱 지원 skills {#app-backed-skills}
 
+현재 app-backed skills에는 Plan의 `visual-plan`과 `visual-recap`, Design의
+`visual-edit`, Assets의 `assets`, repo-backed docs/blog/MDX editing을 위한
+`content`가 포함됩니다.
+
 앱 지원 skills는 에이전트 기반 앱을 스킬 마켓플레이스 아티팩트로 패키지합니다. 번들에는 에이전트 지침, 내보낸 skills, MCP 커넥터 메타데이터, 호스팅/로컬 실행 지침 및 MCP 앱과 같은 UI 표면이 포함될 수 있습니다.
 
 > **아래 전체 세부정보:** 앱 지원 skills의 메커니즘(매니페스트 형식, CLI 명령, 마켓플레이스 어댑터, 자동 업데이트 해싱)은 [App-backed skills — full details](#app-backed-skills-full)에서 다룹니다.
@@ -328,6 +332,7 @@ scope: dev
 ```bash
 # 해피 경로: 내보낸 지침과 호스팅된 MCP 커넥터.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Repo-first 콘텐츠 docs/blog/MDX 편집.

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

@@ -338,7 +338,7 @@ UI의 경로는 `templates/design/app/routes/` 아래에 있습니다: `_index.t
 - **설계** — `create-design`(빈 셸), `generate-design`(생성된 HTML/JSX 콘텐츠 쓰기), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` 및 `apply-tweaks` - 실시간 조정 손잡이 값 유지 (악센트 색상, 밀도 등).
 - **파일** — 디자인 프로젝트 내부 파일의 경우 `create-file`, `update-file`, `list-files`, `delete-file`.
 - **디자인 시스템** — 분석에 앞서 브랜드 데이터를 수집하기 위한 `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` 및 `analyze-brand-assets`.
-- **가져오기** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) 및 `import-design-project`는 기존 프로젝트에서 디자인 시스템을 끌어올립니다.
+- **가져오기** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **내보내기 및 핸드오프** — `export-html`, `export-pdf`, `export-svg`, `export-zip` 및 `export-coding-handoff` - 설계를 코딩 도구 핸드오프로 전환합니다.
 - **컨텍스트 및 탐색** — `view-screen`(현재 디자인, 열린 파일, 보기, 보류 중인 질문 또는 변형 그리드), `get-design-snapshot`(계속할 외부 에이전트의 현재 상태) 및 `navigate`.
 
@@ -360,6 +360,19 @@ Single-screen mode는 스크롤, prototype behavior와의 상호작용, 하나
 반영합니다. screens는 top-level frames이고, active screen 아래에 nested
 DOM/code layers가 표시됩니다.
 
+코딩 에이전트가 독립형 prototype HTML을 생성하는 대신 실행 중인 로컬 앱을
+Design에서 열어야 할 때 `/visual-edit`를 설치하세요:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+대상 앱 dev server가 실행된 뒤 `/visual-edit`는
+`npx @agent-native/core@latest design connect`와 `add-localhost-screens`를
+사용해 요청된 각 path 또는 URL을 URL-backed iframe screen으로 배치합니다.
+`localhost:1234/onboarding/1`, `/onboarding/2`, `/onboarding/3` 같은 번호가
+붙은 흐름은 overview mode에서 분리된 순서 있는 화면으로 유지됩니다.
+
 안정적인 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/skills-guide.mdx

@@ -118,6 +118,10 @@ O domínio skills segue o mesmo formato do framework skills. Eles codificam padr
 
 ## skills com suporte de aplicativo {#app-backed-skills}
 
+As skills com suporte de app atuais incluem `visual-plan` e `visual-recap` do
+Plan, `visual-edit` do Design, `assets` do Assets e `content` para editar
+docs/blog/MDX a partir do repositório.
+
 O skills apoiado por aplicativo empacota um aplicativo nativo do agente como um artefato do mercado de habilidades. O pacote pode incluir instruções do agente, metadados exportados do conector skills, MCP, instruções de inicialização hospedadas/locais e superfícies UI, como aplicativos MCP.
 
 > **Detalhes completos abaixo:** a mecânica do skills baseado em aplicativo (formato de manifesto, comandos CLI, adaptadores de mercado, hash de atualização automática) é abordada em [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ trabalho off-line ou uso sensível à privacidade.
 ```bash
 # Caminho feliz: instruções exportadas mais conector MCP hospedado.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Edição de Content docs/blog/MDX com repo como fonte primária.

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

@@ -338,7 +338,7 @@ Cada operação que pode ser chamada pelo agente é um arquivo TypeScript em `te
 - **Designs** — `create-design` (shell vazio), `generate-design` (gravação de conteúdo HTML/JSX gerado), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` e `apply-tweaks` para valores de botão de ajuste ao vivo persistentes (cor de destaque, densidade, etc.).
 - **Arquivos** — `create-file`, `update-file`, `list-files`, `delete-file` para os arquivos dentro de um projeto de design.
 - **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** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) e `import-design-project` para extrair um sistema de design de um projeto existente.
+- **Importar** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `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`.
 
@@ -361,6 +361,19 @@ protótipo e editar as camadas DOM/código dentro de um arquivo renderizado. O
 painel de camadas reflete essa divisão: telas são frames de nível superior, com
 camadas DOM/código aninhadas para a tela ativa.
 
+Instale `/visual-edit` quando um agente de código precisar abrir um app local em
+execução no Design em vez de gerar HTML de protótipo independente:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Depois que o dev server do app alvo estiver rodando, `/visual-edit` usa
+`npx @agent-native/core@latest design connect` junto com `add-localhost-screens`
+para posicionar cada path ou URL solicitado como sua própria tela iframe baseada
+em URL. Fluxos numerados como `localhost:1234/onboarding/1`, `/onboarding/2` e
+`/onboarding/3` permanecem como telas separadas e ordenadas no modo overview.
+
 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/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills 位于 `.agents/skills/<name>/SKILL.md`，包含针对代理的详细指
 
 ## 应用程序支持的 skills {#app-backed-skills}
 
+当前应用支持的 skills 包括 Plan 的 `visual-plan` 和 `visual-recap`、Design
+的 `visual-edit`、Assets 的 `assets`，以及用于仓库内 docs/blog/MDX 编辑的
+`content`。
+
 应用程序支持的 skills 将代理本机应用程序打包为技能市场工件。该捆绑包可以包含代理指令、导出的 skills、MCP 连接器元数据、托管/本地启动指令和 UI 表面（例如 MCP 应用程序）。
 
 > **完整详细信息如下：** [App-backed skills — full details](#app-backed-skills-full) 中介绍了应用程序支持的 skills 的机制（清单格式、CLI 命令、市场适配器、自动更新哈希）。
@@ -328,6 +332,7 @@ Hosted 是默认安装路径。本地启动是明确的定制，
 ```bash
 # 愉快的路径：导出的指令加上托管的 MCP 连接器。
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # 回购优先内容 docs/blog/MDX 编辑。

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

@@ -338,7 +338,7 @@ UI 中的路由位于 `templates/design/app/routes/` 下：`_index.tsx`（列表
 - **设计** - `create-design`（空壳）、`generate-design`（写入生成的 HTML/JSX 内容）、`update-design`、`get-design`、`list-designs`、`duplicate-design`、`delete-design` 和 `apply-tweaks` 用于持久保存实时调整旋钮值（强调色、密度等）。
 - **文件** - `create-file`、`update-file`、`list-files`、`delete-file` 用于设计项目内的文件。
 - **设计系统** - `create-design-system`、`update-design-system`、`get-design-system`、`list-design-systems`、`delete-design-system`、`set-default-design-system` 和 `analyze-brand-assets` 用于在分析之前收集品牌数据。
-- **导入** - `import-code`、`import-figma`、`import-github`、`import-from-url`、`import-document` (DOCX/PPTX/PDF/XLSX) 和 `import-design-project` 将设计系统从现有项目中提升出来。
+- **导入** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **导出和移交** - `export-html`、`export-pdf`、`export-svg`、`export-zip` 和 `export-coding-handoff` 将设计转变为编码工具移交。
 - **上下文和导航** - `view-screen`（当前设计、打开的文件、视图、待决问题或变体网格）、`get-design-snapshot`（外部代理继续的当前状态）和 `navigate`。
 
@@ -357,6 +357,19 @@ Design 对多屏工作采用概览优先。生成或进行大范围更新后，
 单屏模式用于滚动、与原型行为交互，以及编辑一个已渲染文件内的 DOM/代码
 层。图层面板也反映这种分工：屏幕是顶层框架，活动屏幕下嵌套 DOM/代码层。
 
+当编码代理需要在 Design 中打开正在运行的本地应用，而不是生成独立原型 HTML
+时，请安装 `/visual-edit`：
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+目标应用的开发服务器运行后，`/visual-edit` 会结合
+`npx @agent-native/core@latest design connect` 和 `add-localhost-screens`，把每个
+请求的 path 或 URL 放置为独立的 URL-backed iframe 屏幕。像
+`localhost:1234/onboarding/1`、`/onboarding/2`、`/onboarding/3` 这样的编号流程
+会在 overview 模式中保持为分开的有序屏幕。
+
 为了获得稳定的图层名称，请在有意义的元素上添加
 `data-agent-native-layer-name`。Design 会优先使用它，然后才使用语义/文本回
 退，并且可以通过编辑该属性来持久保存图层重命名。Inline HTML 支持本地代

package/corpus/core/docs/content/locales/zh-TW/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills 位於 `.agents/skills/<name>/SKILL.md`，包含針對代理的詳細指
 
 ## 應用程式支援的 skills {#app-backed-skills}
 
+目前應用支援的 skills 包括 Plan 的 `visual-plan` 和 `visual-recap`、Design
+的 `visual-edit`、Assets 的 `assets`，以及用於儲存庫內 docs/blog/MDX 編輯的
+`content`。
+
 應用程式支援的 skills 將 Agent-Native 應用程式打包為技能市場工件。該捆綁包可以包含代理指令、匯出的 skills、MCP 連線器中繼資料、託管/本機啟動指令和 UI 表面（例如 MCP 應用程式）。
 
 > **完整詳細資訊如下：** [App-backed skills — full details](#app-backed-skills-full) 中介紹了應用程式支援的 skills 的機制（清單格式、CLI 指令、市場轉接器、自動更新哈希）。
@@ -328,6 +332,7 @@ Hosted 是預設安裝路徑。本機啟動是明確的定制，
 ```bash
 # 愉快的路徑：匯出的指令加上託管的 MCP 連線器。
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # 回購優先內容 docs/blog/MDX 編輯。

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

@@ -338,7 +338,7 @@ UI 中的路由位於 `templates/design/app/routes/` 下：`_index.tsx`（清單
 - **設計** - `create-design`（空殼）、`generate-design`（寫入產生的 HTML/JSX 內容）、`update-design`、`get-design`、`list-designs`、`duplicate-design`、`delete-design` 和 `apply-tweaks` 用於持久儲存即時調整旋鈕值（強調色、密度等）。
 - **檔案** - `create-file`、`update-file`、`list-files`、`delete-file` 用於設計專案內的檔案。
 - **設計系統** - `create-design-system`、`update-design-system`、`get-design-system`、`list-design-systems`、`delete-design-system`、`set-default-design-system` 和 `analyze-brand-assets` 用於在分析之前收集品牌資料。
-- **匯入** - `import-code`、`import-figma`、`import-github`、`import-from-url`、`import-document` (DOCX/PPTX/PDF/XLSX) 和 `import-design-project` 將設計系統從現有專案中提升出來。
+- **匯入** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **匯出和移交** - `export-html`、`export-pdf`、`export-svg`、`export-zip` 和 `export-coding-handoff` 將設計轉變為編碼工具移交。
 - **脈絡和導覽** - `view-screen`（目前設計、開啟的檔案、檢視、待決問題或變體網格）、`get-design-snapshot`（外部代理繼續的目前狀態）和 `navigate`。
 
@@ -358,6 +358,19 @@ Design 對多畫面工作採用概覽優先。產生或進行大範圍更新後
 式碼圖層。圖層面板也反映這種分工：畫面是頂層框架，作用中畫面下嵌套
 DOM/程式碼圖層。
 
+當編碼代理需要在 Design 中開啟正在執行的本機應用，而不是產生獨立原型 HTML
+時，請安裝 `/visual-edit`：
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+目標應用的開發伺服器執行後，`/visual-edit` 會結合
+`npx @agent-native/core@latest design connect` 和 `add-localhost-screens`，把每個
+要求的 path 或 URL 放置為獨立的 URL-backed iframe 畫面。像
+`localhost:1234/onboarding/1`、`/onboarding/2`、`/onboarding/3` 這樣的編號流程
+會在 overview 模式中保持為分開的有序畫面。
+
 若要取得穩定的圖層名稱，請在有意義的元素上加入
 `data-agent-native-layer-name`。Design 會優先使用它，然後才使用語意/文字
 後備，並且可以透過編輯該屬性來持久保存圖層重新命名。Inline HTML 支援本

package/corpus/core/docs/content/skills-guide.mdx

@@ -120,6 +120,10 @@ Domain skills follow the same format as framework skills. They encode patterns s
 
 App-backed skills package an agent-native app as a skill marketplace artifact. The bundle can include agent instructions, exported skills, MCP connector metadata, hosted/local launch instructions, and UI surfaces such as MCP Apps.
 
+Current app-backed skills include `visual-plan` and `visual-recap` from Plan,
+`visual-edit` from Design, `assets` from Assets, and `content` for repo-backed
+docs/blog/MDX editing.
+
 > **Full details below:** the mechanics of app-backed skills (manifest format, CLI commands, marketplace adapters, auto-update hashing) are covered in [App-backed skills — full details](#app-backed-skills-full).
 
 ## Creating custom skills {#creating-skills}
@@ -328,6 +332,7 @@ offline work, or privacy-sensitive use.
 ```bash
 # Happy path: exported instructions plus hosted MCP connector.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Repo-first Content docs/blog/MDX editing.

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

@@ -338,7 +338,7 @@ Every agent-callable operation is a TypeScript file in `templates/design/actions
 - **Designs** — `create-design` (empty shell), `generate-design` (write generated HTML/JSX content), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design`, and `apply-tweaks` for persisting live tweak-knob values (accent color, density, etc.).
 - **Files** — `create-file`, `update-file`, `list-files`, `delete-file` for the files inside a design project.
 - **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** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` to lift a design system out of an existing project.
+- **Import** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `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`.
 
@@ -361,6 +361,19 @@ editing the DOM/code layers inside one rendered file. The layers panel reflects
 that split: screens are top-level frames, with nested DOM/code layers for the
 active screen.
 
+Install `/visual-edit` when a coding agent should open a running local app in
+Design instead of generating standalone prototype HTML:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+After the target app dev server is running, `/visual-edit` uses
+`npx @agent-native/core@latest design connect` plus `add-localhost-screens` to
+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.
+
 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.0",
+  "version": "0.80.1",
   "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/application-state/handlers.ts

@@ -33,7 +33,7 @@ async function getSessionId(event: H3Event): Promise<string> {
 }
 
 function safeKey(key: string): string {
-  return key.replace(/[^a-zA-Z0-9_:\-]/g, "");
+  return key.replace(/[^a-zA-Z0-9_:-]/g, "");
 }
 
 // --- Generic state handlers ---