@agent-native/core 0.79.27 → 0.80.1

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`。
 
@@ -350,6 +350,67 @@ UI のルートは `templates/design/app/routes/` の下にあります: `_index
 
 デザインは単なるスタンドアロンの HTML/JSX ファイルであるため、エージェントは iframe がレンダリングし、すべてのエクスポート元と同じソースを編集します。変換する個別の「AI モックアップ」形式はありません。リンクされた設計システムはトークンと `custom_instructions` を提供し、エージェントは世代パスごとにそれを尊重します。プレビューでテキストまたは領域を選択し、Cmd+I を押して、エージェントをその部分に正確に集中させます。
 
+### エディターモデル
+
+Design は複数画面の作業では概要を最初に使います。生成後または大きな更
+新後、エディターは画面概要を開きます。これは無限キャンバスで、各画面は
+選択、移動、リサイズ、ドロップ、複製できる静的フレームです。集中スクロールやプロトタイプ操作が必要な画面では、フレームのフルビューボタンを使用します。
+
+単一画面モードは、スクロール、プロトタイプ動作とのインタラクション、1
+つのレンダリング済みファイル内の DOM/コードレイヤー編集に使います。レ
+イヤーパネルもこの分離を反映します。画面は最上位フレームで、アクティブ
+画面の下に 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 はセマンティック/テ
+キストのフォールバックより先にこれを使い、この属性を編集してレイヤー名
+変更を永続化できます。Inline HTML は、テキスト、class、style、attribute、
+ソース順、小さな構造変更のローカルコードレイヤー編集をサポートします。
+ビジュアルコードレイヤー編集は現在 HTML のみです。Localhost source mode
+はローカル route artboard を登録・解決できますが、ローカルファイルの読
+み書きは明示的な権限制御が強化されるまで bridge contract のままです。
+
+### Design エディター拡張機能
+
+エディターには **Tweaks** の後に **Extensions** インスペクタータブがあり
+ます。これは Design 専用のプラグインレーンのように機能します。ユーザー
+は **+ Extension** をクリックしてエージェントに拡張機能を作成させるか、
+`design.editor.inspector` スロットを宣言する拡張機能をインストールできま
+す。
+
+Design 拡張機能は、標準の拡張機能サンドボックスを通じてアートボードの
+横にインライン表示されます。ホストは `window.slotContext` と
+`window.onSlotContext(...)` の更新として、現在の `designId`、アクティブ
+なファイル、画面一覧、選択中の画面 ID、選択中の要素メタデータ、表示モー
+ド、ズーム、アクティブツール、tweak 値を渡します。これにより、拡張機能
+は現在の選択に関する情報を表示したり、スタイル操作を提供したり、開いて
+いるデザインの周辺に小さなワークフローを構築したりできます。
+
+決定的な処理では、拡張機能は拡張機能ブリッジ経由で app actions を呼び
+出せます。AI 主導の変更では、選択中の要素 selector/source id と要求され
+た変更を含めて `agentNative.chat.send(...)` を呼び出すようにします。エー
+ジェントはまず `view-screen` を呼び出し、要素の style、class、text、move
+変更には `apply-visual-edit` を、アートボード配置の変更には `canvasFrames`
+付きの `update-design` / `generate-design` を使うべきです。サンドボックス、
+永続状態、ブリッジ API については
+[Extensions](/docs/extensions#what-an-extension-can-do) を参照してくださ
+い。
+
 ### カスタマイズ
 
 デザインは完全な複製可能なテンプレートです。いくつかの実践的な拡張アイデア:

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`.
 
@@ -348,6 +348,63 @@ UI의 경로는 `templates/design/app/routes/` 아래에 있습니다: `_index.t
 
 디자인은 독립형 HTML/JSX 파일이므로 에이전트는 iframe이 렌더링하고 모든 내보내기가 시작되는 동일한 소스를 편집합니다. 번역할 별도의 "AI 모형" 형식은 없습니다. 연결된 디자인 시스템은 에이전트가 모든 세대 패스에서 존중하는 토큰과 `custom_instructions`를 제공합니다. 미리보기에서 텍스트나 영역을 선택하고 Cmd+I를 눌러 상담사가 정확히 해당 부분에 집중하도록 합니다.
 
+### 편집기 모델
+
+Design은 여러 화면 작업에서 overview를 우선합니다. 생성 또는 넓은 업데이트
+후 편집기는 screen overview를 엽니다. 이곳은 각 화면이 선택, 이동, 크기 조정,
+드롭, 복제 가능한 정적 frame으로 배치되는 infinite canvas입니다. frame을 두
+번 클릭하면 단일 화면에 집중합니다.
+
+Single-screen mode는 스크롤, prototype behavior와의 상호작용, 하나의 렌더링된
+파일 안의 DOM/code layers 편집에 사용합니다. Layers panel도 같은 구조를
+반영합니다. 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,
+classes, styles, attributes, source order, 작은 structural changes에 대한 local
+code-layer edits를 지원합니다. visual code-layer edits는 현재 HTML-only입니다.
+Localhost source mode는 local route artboards를 register/resolve할 수 있지만,
+local file reads/writes는 explicit permission controls가 harden될 때까지 bridge
+contract로 남아 있습니다.
+
+### Design 편집기 확장
+
+편집기에는 **Tweaks** 뒤에 **Extensions** 검사기 탭이 있습니다. Design 전용
+플러그인 레인처럼 작동합니다. 사용자는 **+ Extension**을 클릭해 에이전트에게
+확장을 만들게 하거나 `design.editor.inspector` 슬롯을 선언한 확장을 설치할
+수 있습니다.
+
+Design 확장은 표준 확장 sandbox를 통해 artboard 옆에 inline으로 렌더링됩니다.
+호스트는 현재 `designId`, 활성 파일, 화면 목록, 선택된 화면 id, 선택된 요소
+메타데이터, 보기 모드, zoom, 활성 도구, tweak 값을 `window.slotContext`와
+`window.onSlotContext(...)` 업데이트로 전달합니다. 이를 통해 확장은 현재
+selection 정보를 표시하고, 스타일 컨트롤을 제공하거나, 열린 디자인 주변의
+작은 워크플로를 만들 수 있습니다.
+
+결정적인 작업의 경우 확장은 extension bridge를 통해 app actions를 호출할 수
+있습니다. AI 기반 변경의 경우 선택된 요소 selector/source id와 요청한 변경을
+담아 `agentNative.chat.send(...)`를 호출하게 하세요. 에이전트는 먼저
+`view-screen`을 호출한 다음 요소 style, class, text, move 변경에는
+`apply-visual-edit`를, artboard placement 변경에는 `canvasFrames`와 함께
+`update-design` / `generate-design`를 사용해야 합니다. sandbox, persistent
+state, bridge APIs는 [Extensions](/docs/extensions#what-an-extension-can-do)를
+참조하세요.
+
 ### 맞춤 설정
 
 디자인은 완전하고 복제 가능한 템플릿입니다. 실용적인 확장 아이디어:

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`.
 
@@ -348,6 +348,67 @@ O agente sempre sabe o que você tem em aberto. O design atual, o arquivo aberto
 
 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.
 
+### Modelo do editor
+
+Design prioriza a visão geral para trabalhos com várias telas. Depois da
+geração ou de atualizações amplas, o editor abre a visão geral de telas: uma
+tela infinita onde cada tela é um frame estático que pode ser selecionado,
+movido, redimensionado, solto ou duplicado. Use o botão de visualização completa
+do frame quando uma tela precisar de rolagem focada ou interação de protótipo.
+
+O modo de tela única serve para rolar, interagir com o comportamento do
+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
+locais de camadas de código para texto, classes, estilos, atributos, ordem do
+código-fonte e pequenas mudanças estruturais; edições visuais de camadas de
+código são somente HTML hoje. O modo de fonte localhost pode registrar e
+resolver artboards de rotas locais, mas leituras/escritas de arquivos locais
+continuam sendo um contrato de bridge até que controles explícitos de permissão
+sejam fortalecidos.
+
+### Extensões do editor de Design
+
+O editor inclui uma aba de inspetor **Extensions** depois de **Tweaks**. Ela
+funciona como uma faixa de plugins específica do Design: os usuários podem
+clicar em **+ Extension** para pedir ao agente que crie uma extensão, ou
+instalar uma extensão que declare o slot `design.editor.inspector`.
+
+As extensões do Design são renderizadas inline ao lado do artboard pelo sandbox
+padrão de extensões. O host passa atualizações de `window.slotContext` e
+`window.onSlotContext(...)` com o `designId` atual, arquivo ativo, lista de
+telas, ids de telas selecionadas, metadados do elemento selecionado, modo de
+visualização, zoom, ferramenta ativa e valores de tweaks. Isso permite que uma
+extensão mostre informações sobre a seleção atual, ofereça controles de estilo
+ou crie fluxos compactos ao redor do design aberto.
+
+Para trabalho determinístico, as extensões podem chamar ações do app pelo
+bridge de extensões. Para mudanças guiadas por IA, faça a extensão chamar
+`agentNative.chat.send(...)` com o seletor/id de origem do elemento selecionado
+e a mudança solicitada. O agente deve chamar `view-screen` primeiro e depois
+usar `apply-visual-edit` para mudanças de estilo, classe, texto ou movimento de
+elementos, ou `update-design` / `generate-design` com `canvasFrames` para
+mudanças de posicionamento do artboard. Veja
+[Extensions](/docs/extensions#what-an-extension-can-do) para o sandbox, estado
+persistente e APIs do bridge.
+
 ### Personalizando
 
 Design é um modelo completo e clonável. Algumas ideias práticas de extensão:

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`。
 
@@ -348,6 +348,55 @@ UI 中的路由位于 `templates/design/app/routes/` 下：`_index.tsx`（列表
 
 因为设计只是独立的 HTML/JSX 文件，所以代理编辑 iframe 渲染和每个导出来自的相同源 - 没有单独的“AI 模型”格式需要翻译。链接设计系统提供代币和代理在每一代通行证上兑现的 `custom_instructions`。在预览中选择文本或区域，然后按 Cmd+I 将代理集中在该部分上。
 
+### 编辑器模型
+
+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 支持本地代
+码层编辑，包括文本、class、style、attribute、源顺序和小型结构调整；可视
+代码层编辑目前仅支持 HTML。Localhost source mode 可以注册并解析本地路由
+artboard，但本地文件读写仍是桥接合同，直到显式权限控制完成加固。
+
+### Design 编辑器扩展
+
+编辑器在 **Tweaks** 之后包含一个 **Extensions** 检查器标签。它像 Design
+专属的插件通道：用户可以点击 **+ Extension** 让代理创建扩展，也可以安装声
+明 `design.editor.inspector` slot 的扩展。
+
+Design 扩展通过标准扩展 sandbox 内嵌渲染在 artboard 旁边。宿主会通过
+`window.slotContext` 和 `window.onSlotContext(...)` 更新传入当前
+`designId`、活动文件、屏幕列表、已选屏幕 id、已选元素元数据、视图模式、
+缩放、活动工具和 tweak 值。这样扩展就可以显示当前选择的信息、提供样式控
+件，或围绕打开的设计构建紧凑工作流。
+
+对于确定性的工作，扩展可以通过扩展桥调用 app actions。对于 AI 驱动的变
+更，让扩展调用 `agentNative.chat.send(...)`，并附带已选元素的 selector/source
+id 和请求的更改。代理应先调用 `view-screen`，然后用 `apply-visual-edit`
+处理元素 style、class、text 或 move 更改，或用带 `canvasFrames` 的
+`update-design` / `generate-design` 处理 artboard placement 更改。有关
+sandbox、持久状态和桥接 API，请参阅
+[Extensions](/docs/extensions#what-an-extension-can-do)。
+
 ### 自定义它
 
 设计是一个完整的、可克隆的模板。一些实用的扩展想法：

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`。
 
@@ -348,6 +348,57 @@ UI 中的路由位於 `templates/design/app/routes/` 下：`_index.tsx`（清單
 
 因為設計只是獨立的 HTML/JSX 檔案，所以代理編輯 iframe 渲染和每個匯出來自的相同來源 - 沒有單獨的“AI 模型”格式需要翻譯。連結設計系統提供代幣和代理在每一代通行證上兌現的 `custom_instructions`。在預覽中選取文字或區域，然後按 Cmd+I 將代理集中在該部分上。
 
+### 編輯器模型
+
+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 支援本
+機程式碼圖層編輯，包括文字、class、style、attribute、來源順序和小型結構
+調整；視覺程式碼圖層編輯目前僅支援 HTML。Localhost source mode 可以註冊
+並解析本機路由 artboard，但本機檔案讀寫仍是橋接合約，直到明確權限控制
+完成加固。
+
+### Design 編輯器擴充功能
+
+編輯器在 **Tweaks** 之後包含一個 **Extensions** 檢查器標籤。它像 Design
+專屬的外掛通道：使用者可以點擊 **+ Extension** 讓代理建立擴充功能，也可
+以安裝宣告 `design.editor.inspector` slot 的擴充功能。
+
+Design 擴充功能會透過標準擴充 sandbox 內嵌渲染在 artboard 旁邊。host 會
+透過 `window.slotContext` 和 `window.onSlotContext(...)` 更新傳入目前的
+`designId`、作用中檔案、畫面清單、已選畫面 id、已選元素中繼資料、檢視模
+式、縮放、作用中工具和 tweak 值。這讓擴充功能可以顯示目前選取項目的資
+訊、提供樣式控制，或圍繞開啟的設計建立精簡工作流程。
+
+對於確定性的工作，擴充功能可以透過擴充橋接呼叫 app actions。對於 AI 驅
+動的變更，讓擴充功能呼叫 `agentNative.chat.send(...)`，並附上已選元素的
+selector/source id 和要求的變更。代理應先呼叫 `view-screen`，再用
+`apply-visual-edit` 處理元素 style、class、text 或 move 變更，或用帶有
+`canvasFrames` 的 `update-design` / `generate-design` 處理 artboard placement
+變更。關於 sandbox、持久狀態和橋接 API，請參閱
+[Extensions](/docs/extensions#what-an-extension-can-do)。
+
 ### 自訂它
 
 設計是一個完整的、可克隆的範本。一些實用的擴充功能想法：

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`.
 
@@ -348,6 +348,64 @@ The agent always knows what you have open. The current design, the open file, th
 
 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.
 
+### Editor model
+
+Design is overview-first for multi-screen work. After generation or broad
+updates, the editor opens the screen overview: an infinite canvas where each
+screen is a static frame you can select, move, resize, drop, or duplicate.
+Use a frame's full-view button when one screen needs focused scrolling or
+prototype interaction.
+
+Single-screen mode is for scrolling, interacting with prototype behavior, and
+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
+for text, classes, styles, attributes, source order, and small structural
+changes; visual code-layer edits are HTML-only today. Localhost source mode can
+register and resolve local route artboards, but local file reads/writes remain a
+bridge contract until explicit permission controls are hardened.
+
+### Design editor extensions
+
+The editor includes an **Extensions** inspector tab after **Tweaks**. It works
+like a Design-specific plugin lane: users can click **+ Extension** to ask the
+agent to build an extension, or install an extension that declares the
+`design.editor.inspector` slot.
+
+Design extensions render inline beside the artboard through the standard
+extension sandbox. The host passes `window.slotContext` and
+`window.onSlotContext(...)` updates with the current `designId`, active file,
+screen list, selected screen ids, selected element metadata, view mode, zoom,
+active tool, and tweak values. That lets an extension show information about
+the current selection, offer style controls, or build compact workflows around
+the open design.
+
+For deterministic work, extensions can call app actions through the extension
+bridge. For AI-driven changes, have the extension call
+`agentNative.chat.send(...)` with the selected element selector/source id and
+requested change. The agent should call `view-screen` first, then use
+`apply-visual-edit` for element style, class, text, or move changes, or
+`update-design` / `generate-design` with `canvasFrames` for artboard placement
+changes. See [Extensions](/docs/extensions#what-an-extension-can-do) for the
+sandbox, persistent state, and bridge APIs.
+
 ### Customizing it
 
 Design is a complete, cloneable template. Some practical extension ideas:

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.79.27",
+  "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": {
@@ -89,6 +89,7 @@
     "./embedding/react": "./dist/embedding/react.js",
     "./onboarding": "./dist/onboarding/index.js",
     "./shared": "./dist/shared/index.js",
+    "./voice": "./dist/voice/index.js",
     "./scripts": "./dist/scripts/index.js",
     "./application-state": "./dist/application-state/index.js",
     "./settings": "./dist/settings/index.js",

package/corpus/core/src/agent/engine/index.ts

@@ -30,6 +30,7 @@ export {
   isAgentEnginePackageInstalled,
   isStoredEngineUsable,
   isStoredEngineUsableForRequest,
+  isResolvedEngineUsableForRequest,
   type AgentEngineEntry,
   type ResolveEngineConfig,
 } from "./registry.js";

package/corpus/core/src/agent/engine/registry.ts

@@ -412,6 +412,46 @@ export async function isStoredEngineUsableForRequest(
   return true;
 }
 
+/**
+ * Request-aware credential preflight for an already-resolved engine instance.
+ * `resolveEngine()` may still return a default or explicitly requested engine
+ * object before credentials are actually usable; call this before starting a
+ * user-visible run so missing providers fail immediately.
+ */
+export async function isResolvedEngineUsableForRequest(
+  engine: AgentEngine,
+  options: { apiKey?: string } = {},
+): Promise<boolean> {
+  const entry = _registry.get(engine.name);
+  // Custom engines may have their own credential contract outside the core
+  // registry metadata, so do not block them speculatively.
+  if (!entry) return true;
+  if (!isAgentEnginePackageInstalled(entry)) return false;
+  if (entry.requiredEnvVars.length === 0) return true;
+
+  if (entry.name === "builder") {
+    const creds = await resolveBuilderCredentials();
+    return Boolean(creds.privateKey && creds.publicKey);
+  }
+
+  if (options.apiKey?.trim()) return true;
+
+  for (const key of entry.requiredEnvVars) {
+    try {
+      if (await resolveSecret(key)) continue;
+    } catch {
+      // Fall through to deployment-level fallback when allowed.
+    }
+    if (
+      !canUseDeployCredentialFallbackForRequest() ||
+      !readDeployCredentialEnv(key)
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export interface ResolveEngineConfig {
   /** Explicit engine name or instance from createAgentChatPlugin options */
   engineOption?:

package/corpus/core/src/agent/production-agent.ts

@@ -67,6 +67,7 @@ import {
   registerBuiltinEngines,
   getStoredModelForEngine,
   normalizeModelForEngine,
+  isResolvedEngineUsableForRequest,
 } from "./engine/index.js";
 import { resolveMaxOutputTokensForEngine } from "./engine/output-tokens.js";
 import { PROVIDER_TO_ENV } from "./engine/provider-env-vars.js";
@@ -4206,8 +4207,11 @@ export function createProductionAgentHandler(
       `[agent-chat] resolved engine=${engine.name} model=${model} requestEngine=${requestEngine ?? "(none)"}`,
     );
 
-    // Check for API key before starting a run (only for anthropic engine)
-    if (engine.name === "anthropic" && !effectiveApiKey) {
+    if (
+      !(await isResolvedEngineUsableForRequest(engine, {
+        apiKey: effectiveApiKey,
+      }))
+    ) {
       setResponseHeader(event, "Content-Type", "text/event-stream");
       setResponseHeader(event, "Cache-Control", "no-cache");
       setResponseHeader(event, "Connection", "keep-alive");