@12ui/design 0.2.84 → 0.2.86

package/README.md

@@ -43,9 +43,13 @@ curl -fsSL https://12ui.com/install-cli.sh | sh
 Both pin just the `12ui` binary - no skills, no browser sign-in - into the same
 managed launcher and versioned bundle, verified and installed the same way.
 `12ui cli status` reports what is pinned. Managed installations do not update
-automatically; `12ui cli install` pins the version currently running. To upgrade
-an existing installation to this release, run
-`npx -y @12ui/design@0.2.67 cli install`, then check `12ui --version`.
+automatically; `12ui cli install` pins the version currently running.
+`12ui update` upgrades an installation: it runs
+`npx -y @12ui/design@latest skill install`, which pins the newest release and
+refreshes every skill and plugin `skill install` manages, then runs
+`claude plugin marketplace update 12ui-plugin` and
+`claude plugin update 12ui-design@12ui-plugin` in every Claude Code home that
+has the plugin.
 `12ui skill install` adds the skills later.
 
 Every supported agent reads `SKILL.md` bundles from one user-scoped directory,
@@ -54,7 +58,7 @@ so the same bundle is installed byte-identically to each:
 | `--client`    | Agent               | Installs into                 |
 | ------------- | ------------------- | ----------------------------- |
 | `codex`       | Codex CLI           | `~/.codex*/skills/` (`CODEX_HOME`) |
-| `claude-code` | Claude Code         | `~/.claude/skills/`           |
+| `claude-code` | Claude Code         | `~/.claude*/skills/` (`CLAUDE_CONFIG_DIR`) |
 | `grok`        | Grok CLI            | `~/.grok/skills/` (`GROK_HOME`) |
 | `cursor`      | Cursor CLI          | `~/.cursor/skills/`           |
 | `antigravity` | Google Antigravity (`agy`) | `~/.gemini/config/skills/` |
@@ -68,8 +72,35 @@ from `~/.copilot/skills/` starting in 1.0; releases before that have no skill
 mechanism at all.
 
 Codex discovery includes every local `~/.codex*` profile directory, plus
-`CODEX_HOME` when it points outside that set. Pass
-`--client codex --home <path>` when an operation should target only one profile.
+`CODEX_HOME` when it points outside that set. Claude Code discovery includes
+`~/.claude`, every other `~/.claude*` directory that holds `.claude.json`
+(Claude Code's own file in each config dir; other tools' `~/.claude*` folders
+are skipped), and `CLAUDE_CONFIG_DIR`. A profile that is a symlink to a
+directory counts like the directory. Pass `--client codex --home <path>` when an operation
+should target only one profile.
+
+Where the agent can carry the Design workspace as a plugin, `skill install`
+installs the plugin, which carries the same skill, instead of the bare skill:
+
+- Claude Code 2.1.287 or later gets `12ui-design@12ui-plugin` from the
+  just-every/12ui-plugin GitHub marketplace (the skill, the hosted
+  `12ui-workspace` server and the Design workspace pane). The marketplace is
+  set to auto-update, so Claude Code refreshes the plugin at startup. An older
+  Claude Code gets the skill plus one line asking for `claude update`.
+- Codex with `codex plugin` gets `12ui@12ui-local`: the skill plus the hosted
+  server that draws the workspace inline. The CLI writes it to
+  `~/.local/share/12ui/codex-plugin/12ui` (from `codex-plugin/` and
+  `skills/12ui-design`) and adds that folder as the `12ui-local` marketplace.
+  The old directory-listed `12ui-design` skill is switched off by marked
+  `[[skills.config]]` blocks.
+
+A skill-only copy the CLI wrote earlier is removed once the plugin is in place,
+a re-run changes nothing, and `12ui skill remove` (or `uninstall`) removes the
+plugin, its marketplace and those blocks as well. The shared Codex plugin
+folder goes only once no Codex home on the machine still has the `12ui-local`
+marketplace. A plugin step that fails (or an agent command that runs past a
+minute) leaves that home with the skill instead; the other homes and the exit
+code are unaffected.
 
 Skill installation does not require an API account or start account onboarding.
 Explicit authentication options still prepare credentials; hosted commands handle

package/SKILL.md

@@ -23,7 +23,7 @@ candidates.
 Use `12ui` when it is available on `PATH`. Otherwise invoke the pinned CLI that
 the plugin's `open-design.json` MCP entry uses:
 
-    npx -y @12ui/design@0.2.84 <command> ...
+    npx -y @12ui/design@0.2.86 <command> ...
 
 Run `12ui auth status --json` (or its pinned `npx` equivalent) first. A desktop user can authenticate with `12ui auth login`; a headless
 run supplies `TWELVE_UI_API_KEY`. Never put a credential into project files,

package/codex-plugin/marketplace.json

@@ -0,0 +1,20 @@
+{
+  "name": "12ui-local",
+  "interface": {
+    "displayName": "12ui"
+  },
+  "plugins": [
+    {
+      "name": "12ui",
+      "source": {
+        "source": "local",
+        "path": "./"
+      },
+      "policy": {
+        "installation": "AVAILABLE",
+        "authentication": "ON_INSTALL"
+      },
+      "category": "Creativity"
+    }
+  ]
+}

package/codex-plugin/mcp.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "12ui-workspace": {
+      "url": "https://design.12ui.com/mcp"
+    }
+  }
+}

package/codex-plugin/plugin.json

@@ -0,0 +1,157 @@
+{
+  "name": "12ui",
+  "version": "1.0.1",
+  "description": "A Design workspace in your Codex thread: see design options for a UI as images, select one, ask for more, edit with a scribble, search design references and hand an option off to be built. Your agent runs the 12ui command line once per request, which draws every option at once with your own Codex sign-in.",
+  "author": {
+    "name": "12ui",
+    "email": "support@12ui.com",
+    "url": "https://12ui.com/"
+  },
+  "homepage": "https://12ui.com/",
+  "license": "MIT",
+  "keywords": [
+    "design",
+    "ui",
+    "mockup",
+    "workspace",
+    "12ui"
+  ],
+  "skills": "./skills/",
+  "mcpServers": "./.mcp.json",
+  "interface": {
+    "displayName": "12ui Design",
+    "shortDescription": "Design options for your UI",
+    "longDescription": "Open a Design workspace in your Codex thread: a screen that shows design options for an app or a website as images. Select the one you like, ask for more options with a note, mark up an option with a scribble and ask for a change, search a collection of real design references and steer new options with them, and hand an option off to be built.\n\nYour Codex agent runs the 12ui command line once per request, which draws every option at once with your own Codex sign-in and image generation, and adds each option to the workspace as it finishes. Your agent never draws in the thread. There is no 12ui account and no sign-in: a workspace is reached through a private handle held in your thread. Images are stored for up to 30 days and removed after 14 days without use.\n\nWorks in Codex on a computer with Node.js; your agent installs the 12ui command line once. The draw command runs outside the sandbox, with network access to design.12ui.com, which Codex may ask you to approve.",
+    "developerName": "12ui",
+    "category": "Creativity",
+    "capabilities": [
+      "Interactive",
+      "Read",
+      "Write"
+    ],
+    "websiteURL": "https://12ui.com/",
+    "supportURL": "https://12ui.com/contact",
+    "privacyPolicyURL": "https://12ui.com/privacy",
+    "termsOfServiceURL": "https://12ui.com/terms",
+    "defaultPrompt": [
+      "Open a Design workspace for my app idea.",
+      "Show me design options for a fitness app home screen.",
+      "Explore looks for my landing page in a Design workspace."
+    ],
+    "brandColor": "#0F172A",
+    "composerIcon": "./assets/12ui-icon.png",
+    "composerIconDark": "./assets/12ui-icon-dark.png",
+    "logo": "./assets/12ui-icon.png",
+    "logoDark": "./assets/12ui-icon-dark.png"
+  },
+  "extensions": {
+    "com.openai": {
+      "onboardingSkill": "./skills/12ui-design/SKILL.md",
+      "review": {
+        "test_cases": {
+          "positive": [
+            {
+              "description": "Open a workspace and receive options",
+              "prompt": "Open a Design workspace for a meditation app landing page.",
+              "tools_triggered": "design.slate.create",
+              "expected_behavior": "The Design workspace card appears in the thread with waiting tiles. The agent runs the 12ui draw command once and the four options appear in the card."
+            },
+            {
+              "description": "Generate more options with a note",
+              "prompt": "Open a Design workspace for a bakery website. When the options appear, click Generate more, choose 2, type 'warmer colors' and click Generate.",
+              "tools_triggered": "design.slate.create, design.slate.run, design.slate.data",
+              "expected_behavior": "After the click the agent reads the request with design.slate.data and runs the 12ui draw command once; two new options appear as a second round."
+            },
+            {
+              "description": "Edit an option with a scribble",
+              "prompt": "Open a Design workspace for a fitness app onboarding screen. When the options appear, open option A, click Edit, circle the headline, type 'Make the headline larger' and click Apply.",
+              "tools_triggered": "design.slate.create, design.slate.run, design.slate.data",
+              "expected_behavior": "The agent reads the request with design.slate.data and runs the 12ui draw command once; a new version of option A appears."
+            },
+            {
+              "description": "Search inspiration and steer a round",
+              "prompt": "Open a Design workspace for a travel booking site. When the options appear, open the Inspiration tab, search 'minimal dashboard', select two references and click Generate more.",
+              "tools_triggered": "design.slate.create, design.slate.inspire, design.slate.reference, design.slate.inspiration, design.slate.run, design.slate.data",
+              "expected_behavior": "Reference thumbnails appear for the search; the selected references are used by the next round, whose options appear in the card."
+            },
+            {
+              "description": "Select an option and convert it",
+              "prompt": "Open a Design workspace for a recipe app home screen. When the options appear, select option B, then click Convert, choose HTML and click Send.",
+              "tools_triggered": "design.slate.create, design.slate.pick, design.slate.handoff, design.slate.data",
+              "expected_behavior": "The screen shows option B as selected; the agent reads the request with design.slate.data and builds an HTML page from option B in the project."
+            }
+          ],
+          "negative": [
+            {
+              "description": "Unrelated question",
+              "prompt": "What is the weather in Paris today?"
+            },
+            {
+              "description": "Unrelated coding task",
+              "prompt": "Write a Python function that sorts a list."
+            },
+            {
+              "description": "Unsupported deliverable",
+              "prompt": "Create a slide deck about quarterly sales."
+            }
+          ]
+        },
+        "commerce": false,
+        "commerce_description": "This plugin has no paid features and no payment flow."
+      },
+      "publication": {
+        "release_notes": "Initial release: a Design workspace for Codex with options drawn all at once by the 12ui command line, select, edit with a scribble, inspiration search and hand-off to build. No 12ui account or sign-in.",
+        "translations": {
+          "es-419": {
+            "subtitle": "Opciones de diseño para tu UI",
+            "description": "Abre un espacio de trabajo de diseño en tu hilo de Codex: una pantalla que muestra opciones de diseño para una app o un sitio web en forma de imágenes. Selecciona la que te guste, pide más opciones con una nota, marca una opción con un garabato y pide un cambio, busca en una colección de referencias de diseño reales y úsalas para orientar nuevas opciones, y envía una opción para que se construya.\n\nTu agente de Codex ejecuta la herramienta de línea de comandos de 12ui una vez por solicitud; la herramienta dibuja todas las opciones a la vez con tu propio inicio de sesión de Codex y la generación de imágenes de Codex, y agrega cada opción al espacio de trabajo en cuanto está lista. Tu agente nunca dibuja en el hilo. No hay cuenta de 12ui ni inicio de sesión: al espacio de trabajo se accede mediante un identificador privado que se guarda en tu hilo. Las imágenes se guardan hasta 30 días y se eliminan después de 14 días sin uso.\n\nFunciona en Codex en una computadora con Node.js; tu agente instala la herramienta de línea de comandos de 12ui una sola vez. El comando draw se ejecuta fuera del sandbox, con acceso de red a design.12ui.com, algo que Codex puede pedirte que apruebes."
+          },
+          "es-ES": {
+            "subtitle": "Opciones de diseño para tu UI",
+            "description": "Abre un espacio de trabajo de diseño en tu hilo de Codex: una pantalla que muestra opciones de diseño para una app o un sitio web en forma de imágenes. Selecciona la que te guste, pide más opciones con una nota, marca una opción con un garabato y pide un cambio, busca en una colección de referencias de diseño reales y úsalas para orientar nuevas opciones, y envía una opción para que se construya.\n\nTu agente de Codex ejecuta la herramienta de línea de comandos de 12ui una vez por solicitud; la herramienta dibuja todas las opciones a la vez con tu propio inicio de sesión de Codex y la generación de imágenes de Codex, y añade cada opción al espacio de trabajo en cuanto está lista. Tu agente nunca dibuja en el hilo. No hay cuenta de 12ui ni inicio de sesión: al espacio de trabajo se accede mediante un identificador privado que se guarda en tu hilo. Las imágenes se guardan hasta 30 días y se eliminan tras 14 días sin uso.\n\nFunciona en Codex en un ordenador con Node.js; tu agente instala la herramienta de línea de comandos de 12ui una sola vez. El comando draw se ejecuta fuera del sandbox, con acceso de red a design.12ui.com, algo que Codex puede pedirte que apruebes."
+          },
+          "fr-FR": {
+            "subtitle": "Options de design d’interface",
+            "description": "Ouvrez un espace de travail de design dans votre fil de discussion Codex : un écran qui présente, sous forme d’images, des options de design pour une app ou un site web. Sélectionnez celle qui vous plaît, demandez d’autres options avec une note, annotez une option d’un gribouillis et demandez une modification, recherchez dans une collection de références de design réelles et servez-vous-en pour orienter de nouvelles options, et transmettez une option pour qu’elle soit construite.\n\nVotre agent Codex exécute l’outil en ligne de commande 12ui une fois par demande ; celui-ci dessine toutes les options en même temps avec votre propre session Codex et la génération d’images de Codex, et ajoute chaque option à l’espace de travail dès qu’elle est prête. Votre agent ne dessine jamais dans le fil. Il n’y a ni compte 12ui ni connexion : on accède à l’espace de travail grâce à un identifiant privé conservé dans votre fil. Les images sont conservées jusqu’à 30 jours et supprimées après 14 jours sans utilisation.\n\nFonctionne dans Codex sur un ordinateur équipé de Node.js ; votre agent installe l’outil en ligne de commande 12ui une seule fois. La commande draw s’exécute hors du bac à sable, avec un accès réseau à design.12ui.com, ce que Codex peut vous demander d’approuver."
+          },
+          "fr-CA": {
+            "subtitle": "Options de design d’interface",
+            "description": "Ouvrez un espace de travail de design dans votre fil de discussion Codex : un écran qui présente, sous forme d’images, des options de design pour une application ou un site Web. Sélectionnez celle qui vous plaît, demandez d’autres options avec une note, annotez une option d’un gribouillis et demandez une modification, recherchez dans une collection de références de design réelles et servez-vous-en pour orienter de nouvelles options, et transmettez une option pour qu’elle soit construite.\n\nVotre agent Codex exécute l’outil en ligne de commande 12ui une fois par demande; celui-ci dessine toutes les options en même temps avec votre propre session Codex et la génération d’images de Codex, et ajoute chaque option à l’espace de travail dès qu’elle est prête. Votre agent ne dessine jamais dans le fil. Il n’y a ni compte 12ui ni connexion : on accède à l’espace de travail grâce à un identifiant privé conservé dans votre fil. Les images sont conservées jusqu’à 30 jours et supprimées après 14 jours sans utilisation.\n\nFonctionne dans Codex sur un ordinateur équipé de Node.js; votre agent installe l’outil en ligne de commande 12ui une seule fois. La commande draw s’exécute hors du bac à sable, avec un accès réseau à design.12ui.com, ce que Codex peut vous demander d’approuver."
+          },
+          "de-DE": {
+            "subtitle": "Designoptionen für deine UI",
+            "description": "Öffne einen Design-Workspace in deinem Codex-Thread: eine Ansicht, die Designoptionen für eine App oder eine Website als Bilder zeigt. Wähle die Option, die dir gefällt, fordere mit einer Notiz weitere Optionen an, markiere eine Option mit einer Kritzelei und bitte um eine Änderung, durchsuche eine Sammlung echter Designreferenzen und nutze sie, um neue Optionen zu lenken, und übergib eine Option zur Umsetzung.\n\nDein Codex-Agent führt das 12ui-Befehlszeilentool einmal pro Anfrage aus. Es zeichnet alle Optionen auf einmal mit deiner eigenen Codex-Anmeldung und der Bildgenerierung von Codex und fügt jede Option dem Workspace hinzu, sobald sie fertig ist. Dein Agent zeichnet nie im Thread. Es gibt kein 12ui-Konto und keine Anmeldung: Ein Workspace wird über eine private Kennung erreicht, die in deinem Thread gespeichert ist. Bilder werden bis zu 30 Tage gespeichert und nach 14 Tagen ohne Nutzung entfernt.\n\nFunktioniert in Codex auf einem Computer mit Node.js; dein Agent installiert das 12ui-Befehlszeilentool einmalig. Der draw-Befehl läuft außerhalb der Sandbox mit Netzwerkzugriff auf design.12ui.com; Codex bittet dich dafür möglicherweise um Freigabe."
+          },
+          "it-IT": {
+            "subtitle": "Opzioni di design per la UI",
+            "description": "Apri uno spazio di lavoro di design nel tuo thread di Codex: una schermata che mostra opzioni di design per un’app o un sito web sotto forma di immagini. Seleziona quella che ti piace, chiedi altre opzioni con una nota, segna un’opzione con uno scarabocchio e chiedi una modifica, cerca in una raccolta di riferimenti di design reali e usali per orientare nuove opzioni, e passa un’opzione allo sviluppo per farla realizzare.\n\nIl tuo agente Codex esegue lo strumento da riga di comando 12ui una volta per richiesta: lo strumento disegna tutte le opzioni contemporaneamente con il tuo accesso a Codex e la generazione di immagini di Codex, e aggiunge ogni opzione allo spazio di lavoro non appena è pronta. Il tuo agente non disegna mai nel thread. Non c’è alcun account 12ui né alcun accesso da effettuare: si raggiunge lo spazio di lavoro tramite un identificativo privato conservato nel tuo thread. Le immagini vengono conservate fino a 30 giorni ed eliminate dopo 14 giorni di inutilizzo.\n\nFunziona in Codex su un computer con Node.js; il tuo agente installa lo strumento da riga di comando 12ui una sola volta. Il comando draw viene eseguito fuori dalla sandbox, con accesso di rete a design.12ui.com, e Codex potrebbe chiederti di approvarlo."
+          },
+          "pt-BR": {
+            "subtitle": "Opções de design para sua UI",
+            "description": "Abra um espaço de trabalho de design na sua thread do Codex: uma tela que mostra opções de design para um app ou um site em forma de imagens. Selecione a que você preferir, peça mais opções com uma nota, marque uma opção com um rabisco e peça uma alteração, pesquise em uma coleção de referências de design reais e use-as para orientar novas opções, e encaminhe uma opção para ser construída.\n\nSeu agente do Codex executa a ferramenta de linha de comando do 12ui uma vez por pedido; ela desenha todas as opções de uma só vez com seu próprio login do Codex e a geração de imagens do Codex, e adiciona cada opção ao espaço de trabalho assim que ela fica pronta. Seu agente nunca desenha na thread. Não há conta do 12ui nem login: o espaço de trabalho é acessado por meio de um identificador privado guardado na sua thread. As imagens ficam armazenadas por até 30 dias e são removidas após 14 dias sem uso.\n\nFunciona no Codex em um computador com Node.js; seu agente instala a ferramenta de linha de comando do 12ui uma única vez. O comando draw é executado fora do sandbox, com acesso de rede a design.12ui.com, e o Codex pode pedir que você aprove isso."
+          },
+          "ja-JP": {
+            "subtitle": "あなたのUIのデザイン案",
+            "description": "Codexのスレッドでデザインワークスペースを開きます。アプリやWebサイトのデザイン案を画像で表示する画面です。気に入った案を選ぶ、メモを添えて追加の案を依頼する、案に手書きで書き込んで変更を依頼する、実在するデザインの参考事例コレクションを検索してそれをもとに新しい案の方向性を決める、案を実装に引き渡す、といった操作ができます。\n\nCodexエージェントはリクエストごとに12uiのコマンドラインツールを1回実行します。このツールは、あなた自身のCodexのサインインと画像生成を使ってすべての案を一度に描き、完成した案から順にワークスペースに追加します。エージェントがスレッド内で描くことはありません。12uiのアカウントはなく、サインインも不要です。ワークスペースには、スレッド内に保持される非公開の識別子でアクセスします。画像は最大30日間保存され、14日間使われないと削除されます。\n\nNode.jsが入ったコンピューター上のCodexで動作します。エージェントが12uiのコマンドラインツールを一度だけインストールします。drawコマンドはサンドボックスの外で実行され、design.12ui.comへのネットワークアクセスを伴います。これについてCodexから承認を求められる場合があります。"
+          },
+          "ko-KR": {
+            "subtitle": "내 UI를 위한 디자인 시안",
+            "description": "Codex 스레드에서 디자인 워크스페이스를 여세요. 앱이나 웹사이트의 디자인 시안을 이미지로 보여 주는 화면입니다. 마음에 드는 시안을 선택하고, 메모를 남겨 시안을 더 요청하고, 시안 위에 직접 그려 표시해 수정을 요청하고, 실제 디자인 레퍼런스 모음을 검색해 이를 바탕으로 새 시안의 방향을 잡고, 시안을 구현 단계로 넘길 수 있습니다.\n\nCodex 에이전트는 요청마다 12ui 명령줄 도구를 한 번 실행합니다. 이 도구는 내 Codex 로그인과 이미지 생성 기능으로 모든 시안을 한꺼번에 그려 내고, 완성되는 대로 각 시안을 워크스페이스에 추가합니다. 에이전트가 스레드 안에서 직접 그리지는 않습니다. 12ui 계정도, 로그인도 없습니다. 워크스페이스에는 스레드에 보관된 비공개 식별자로 접근합니다. 이미지는 최대 30일간 저장되며, 14일 동안 사용하지 않으면 삭제됩니다.\n\nNode.js가 설치된 컴퓨터의 Codex에서 작동하며, 에이전트가 12ui 명령줄 도구를 한 번만 설치합니다. draw 명령은 샌드박스 밖에서 실행되고 design.12ui.com에 네트워크로 접근하며, Codex가 이에 대한 승인을 요청할 수 있습니다."
+          },
+          "zh-CN": {
+            "subtitle": "你的 UI 设计方案",
+            "description": "在你的 Codex 对话中打开设计工作区：这是一个以图片形式展示应用或网站设计方案的界面。你可以选择喜欢的方案，附上备注请求更多方案，在方案上涂鸦标注并请求修改，搜索真实设计参考合集并用其引导新方案的方向，还可以将方案交付开发。\n\n你的 Codex 智能体每次请求时运行一次 12ui 命令行工具，该工具使用你自己的 Codex 登录和图像生成能力，一次性绘制所有方案，并在每个方案完成后将其添加到工作区。你的智能体从不在对话中绘图。没有 12ui 账号，也无需登录：工作区通过保存在你对话中的私有标识访问。图片最多保存 30 天，连续 14 天未使用即会删除。\n\n可在装有 Node.js 的电脑上的 Codex 中使用；你的智能体只需安装一次 12ui 命令行工具。draw 命令在沙箱外运行，并通过网络访问 design.12ui.com，Codex 可能会请你批准。"
+          },
+          "zh-TW": {
+            "subtitle": "你的 UI 設計方案",
+            "description": "在你的 Codex 對話中開啟設計工作區：這是以圖片呈現 App 或網站設計方案的畫面。你可以選擇喜歡的方案、附上備註要求更多方案、在方案上塗鴉標註並要求修改、搜尋真實設計參考範例集並以此引導新方案的方向，還能將方案交付開發。\n\n你的 Codex 代理程式每次收到請求時會執行一次 12ui 命令列工具，該工具使用你自己的 Codex 登入與影像生成功能，一次繪製所有方案，並在每個方案完成時將其加入工作區。你的代理程式絕不會在對話中繪圖。沒有 12ui 帳號，也不需要登入：工作區透過保存在你對話中的私密識別碼存取。圖片最多保存 30 天，連續 14 天未使用即會刪除。\n\n可在安裝了 Node.js 的電腦上的 Codex 中使用；你的代理程式只需安裝一次 12ui 命令列工具。draw 指令會在沙箱外執行，並透過網路存取 design.12ui.com，Codex 可能會請你核准。"
+          },
+          "hi-IN": {
+            "subtitle": "आपके UI के लिए डिज़ाइन विकल्प",
+            "description": "अपने Codex थ्रेड में एक डिज़ाइन वर्कस्पेस खोलें: एक ऐसी स्क्रीन जो किसी ऐप या वेबसाइट के डिज़ाइन विकल्पों को इमेज के रूप में दिखाती है। जो विकल्प आपको पसंद हो उसे चुनें, एक नोट के साथ और विकल्प माँगें, किसी विकल्प पर स्क्रिबल से निशान लगाकर बदलाव माँगें, असली डिज़ाइन संदर्भों के संग्रह में खोजें और उनसे नए विकल्पों को दिशा दें, और किसी विकल्प को बनाने के लिए सौंप दें।\n\nआपका Codex एजेंट हर अनुरोध पर 12ui कमांड लाइन टूल को एक बार चलाता है। यह टूल आपके अपने Codex साइन-इन और इमेज जनरेशन से सभी विकल्प एक साथ बनाता है, और हर विकल्प तैयार होते ही उसे वर्कस्पेस में जोड़ देता है। आपका एजेंट थ्रेड में कभी भी इमेज नहीं बनाता। कोई 12ui खाता नहीं है और कोई साइन-इन नहीं: वर्कस्पेस तक आपके थ्रेड में रखे एक निजी पहचानकर्ता के ज़रिए पहुँचा जाता है। इमेज अधिकतम 30 दिनों तक रखी जाती हैं और 14 दिनों तक इस्तेमाल न होने पर हटा दी जाती हैं।\n\nNode.js वाले कंप्यूटर पर Codex में काम करता है; आपका एजेंट 12ui कमांड लाइन टूल को एक बार इंस्टॉल करता है। draw कमांड सैंडबॉक्स के बाहर चलती है और उसे design.12ui.com तक नेटवर्क एक्सेस मिलता है। Codex इसके लिए आपसे मंज़ूरी माँग सकता है।"
+          }
+        }
+      }
+    }
+  }
+}

package/dist/agent-command-runner.d.ts

@@ -0,0 +1,41 @@
+export type AgentCommandResult = {
+    exitCode: number | null;
+    stdout: string;
+    stderr: string;
+};
+/**
+ * Runs another agent's own CLI (`claude`, `codex`) to manage its plugins. The
+ * signature is the seam the plugin installers are tested through: a test passes
+ * a scripted runner and no agent binary ever starts.
+ */
+export type AgentCommandRunner = (command: string, args: readonly string[], options: {
+    environment: NodeJS.ProcessEnv;
+    timeoutMs?: number;
+}) => Promise<AgentCommandResult>;
+/**
+ * The child environment for every agent command and for `12ui update`: the
+ * caller's environment without `OPENAI_API_KEY`, which 12ui never uses without
+ * the user's explicit opt-in (owner rule) and no plugin step needs.
+ */
+export declare const agentCommandEnvironment: (environment: NodeJS.ProcessEnv, overrides?: NodeJS.ProcessEnv) => NodeJS.ProcessEnv;
+/**
+ * The longest an agent command may run. Measured on 2026-10-03 with Claude Code
+ * 2.1.287 in a fresh HOME: `claude plugin marketplace add just-every/12ui-plugin`
+ * (a GitHub clone) took 8.1-8.3s over three runs, `marketplace update` 5.6s,
+ * `plugin install` and `plugin update` under 1s. A minute is about seven times
+ * the slowest; past it the home gets the skill instead.
+ */
+export declare const AGENT_COMMAND_TIMEOUT_MS = 60000;
+/** After SIGTERM, how long a command has to exit before SIGKILL. */
+export declare const AGENT_COMMAND_KILL_GRACE_MS = 2000;
+/**
+ * Runs one command and always settles. A command that outlives its timeout gets
+ * SIGTERM, then SIGKILL after a short grace, and its pipes are destroyed, so
+ * neither a command that ignores SIGTERM nor a grandchild still holding the
+ * pipes keeps the CLI process alive.
+ */
+export declare const runAgentCommand: AgentCommandRunner;
+/** The last JSON object a `--json` command printed (both CLIs end with one). */
+export declare const lastJsonObject: (stdout: string) => Record<string, unknown> | null;
+export declare const commandFailure: (label: string, result: AgentCommandResult) => Error;
+//# sourceMappingURL=agent-command-runner.d.ts.map

package/dist/agent-command-runner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-command-runner.d.ts","sourceRoot":"","sources":["../src/agent-command-runner.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAC/B,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,OAAO,EAAE;IAAE,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5D,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAEjC;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,aAAa,MAAM,CAAC,UAAU,EAC9B,YAAW,MAAM,CAAC,UAAe,KAChC,MAAM,CAAC,UAOT,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,QAAS,CAAC;AAC/C,oEAAoE;AACpE,eAAO,MAAM,2BAA2B,OAAQ,CAAC;AAEjD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,kBA0C7B,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAWzE,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EACb,QAAQ,kBAAkB,KACzB,KAIF,CAAC"}

package/dist/agent-command-runner.js

@@ -0,0 +1,90 @@
+import { spawn } from 'node:child_process';
+/**
+ * The child environment for every agent command and for `12ui update`: the
+ * caller's environment without `OPENAI_API_KEY`, which 12ui never uses without
+ * the user's explicit opt-in (owner rule) and no plugin step needs.
+ */
+export const agentCommandEnvironment = (environment, overrides = {}) => {
+    const next = { ...environment, ...overrides };
+    delete next.OPENAI_API_KEY;
+    for (const [name, value] of Object.entries(overrides)) {
+        if (value === undefined)
+            delete next[name];
+    }
+    return next;
+};
+/**
+ * The longest an agent command may run. Measured on 2026-10-03 with Claude Code
+ * 2.1.287 in a fresh HOME: `claude plugin marketplace add just-every/12ui-plugin`
+ * (a GitHub clone) took 8.1-8.3s over three runs, `marketplace update` 5.6s,
+ * `plugin install` and `plugin update` under 1s. A minute is about seven times
+ * the slowest; past it the home gets the skill instead.
+ */
+export const AGENT_COMMAND_TIMEOUT_MS = 60_000;
+/** After SIGTERM, how long a command has to exit before SIGKILL. */
+export const AGENT_COMMAND_KILL_GRACE_MS = 2_000;
+/**
+ * Runs one command and always settles. A command that outlives its timeout gets
+ * SIGTERM, then SIGKILL after a short grace, and its pipes are destroyed, so
+ * neither a command that ignores SIGTERM nor a grandchild still holding the
+ * pipes keeps the CLI process alive.
+ */
+export const runAgentCommand = (command, args, options) => (new Promise((resolve) => {
+    let stdout = '';
+    let stderr = '';
+    let settled = false;
+    let killTimer;
+    const child = spawn(command, [...args], {
+        env: options.environment,
+        shell: process.platform === 'win32',
+        stdio: ['ignore', 'pipe', 'pipe'],
+        windowsHide: true,
+    });
+    const finish = (result) => {
+        if (settled)
+            return;
+        settled = true;
+        clearTimeout(timer);
+        clearTimeout(killTimer);
+        resolve(result);
+    };
+    const release = () => {
+        child.stdout.destroy();
+        child.stderr.destroy();
+        child.unref();
+    };
+    const timedOut = () => ({ exitCode: null, stdout, stderr: `${stderr}\n${command} timed out` });
+    const timer = setTimeout(() => {
+        child.kill('SIGTERM');
+        child.once('exit', () => {
+            release();
+            finish(timedOut());
+        });
+        killTimer = setTimeout(() => {
+            child.kill('SIGKILL');
+            release();
+            finish(timedOut());
+        }, AGENT_COMMAND_KILL_GRACE_MS);
+    }, options.timeoutMs ?? AGENT_COMMAND_TIMEOUT_MS);
+    child.stdout.setEncoding('utf8').on('data', (chunk) => { stdout += chunk; });
+    child.stderr.setEncoding('utf8').on('data', (chunk) => { stderr += chunk; });
+    child.on('error', (error) => finish({ exitCode: null, stdout, stderr: error.message }));
+    child.on('close', (exitCode) => finish({ exitCode, stdout, stderr }));
+}));
+/** The last JSON object a `--json` command printed (both CLIs end with one). */
+export const lastJsonObject = (stdout) => {
+    const trimmed = stdout.trim();
+    for (const candidate of [trimmed, ...trimmed.split('\n').reverse()]) {
+        try {
+            const parsed = JSON.parse(candidate);
+            if (parsed && typeof parsed === 'object')
+                return parsed;
+        }
+        catch {
+            // not this slice
+        }
+    }
+    return null;
+};
+export const commandFailure = (label, result) => new Error(`${label} failed (exit ${result.exitCode ?? 'none'}): ${(result.stderr.trim() || result.stdout.trim()).split('\n').slice(-3).join(' ')}`);
+//# sourceMappingURL=agent-command-runner.js.map

package/dist/agent-command-runner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-command-runner.js","sourceRoot":"","sources":["../src/agent-command-runner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAmB3C;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,WAA8B,EAC9B,YAA+B,EAAE,EACd,EAAE;IACrB,MAAM,IAAI,GAAsB,EAAE,GAAG,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;IACjE,OAAO,IAAI,CAAC,cAAc,CAAC;IAC3B,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;QACtD,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAC/C,oEAAoE;AACpE,MAAM,CAAC,MAAM,2BAA2B,GAAG,KAAK,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAuB,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAC7E,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IACtB,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAI,OAAO,GAAG,KAAK,CAAC;IACpB,IAAI,SAAqC,CAAC;IAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE;QACtC,GAAG,EAAE,OAAO,CAAC,WAAW;QACxB,KAAK,EAAE,OAAO,CAAC,QAAQ,KAAK,OAAO;QACnC,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;QACjC,WAAW,EAAE,IAAI;KAClB,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,CAAC,MAA0B,EAAQ,EAAE;QAClD,IAAI,OAAO;YAAE,OAAO;QACpB,OAAO,GAAG,IAAI,CAAC;QACf,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC,CAAC;IACF,MAAM,OAAO,GAAG,GAAS,EAAE;QACzB,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACvB,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACvB,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC,CAAC;IACF,MAAM,QAAQ,GAAG,GAAuB,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,KAAK,OAAO,YAAY,EAAE,CAAC,CAAC;IACnH,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;QAC5B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtB,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;YACtB,OAAO,EAAE,CAAC;YACV,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QACH,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAC1B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACtB,OAAO,EAAE,CAAC;YACV,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;QACrB,CAAC,EAAE,2BAA2B,CAAC,CAAC;IAClC,CAAC,EAAE,OAAO,CAAC,SAAS,IAAI,wBAAwB,CAAC,CAAC;IAClD,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAa,EAAE,EAAE,GAAG,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAa,EAAE,EAAE,GAAG,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACxF,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxE,CAAC,CAAC,CACH,CAAC;AAEF,gFAAgF;AAChF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAkC,EAAE;IAC/E,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC;IAC9B,KAAK,MAAM,SAAS,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;QACpE,IAAI,CAAC;YACH,MAAM,MAAM,GAAY,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAC9C,IAAI,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ;gBAAE,OAAO,MAAiC,CAAC;QACrF,CAAC;QAAC,MAAM,CAAC;YACP,iBAAiB;QACnB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAa,EACb,MAA0B,EACnB,EAAE,CAAC,IAAI,KAAK,CACnB,GAAG,KAAK,iBAAiB,MAAM,CAAC,QAAQ,IAAI,MAAM,MAChD,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAC/E,EAAE,CACH,CAAC"}

package/dist/agent-plugin-step.d.ts

@@ -0,0 +1,47 @@
+import { type AgentCommandRunner } from './agent-command-runner.js';
+import { type SkillTarget } from './skill-installer.js';
+/**
+ * Where a client can carry the 12ui Design workspace as a plugin, `skill
+ * install` installs the plugin instead of the bare skill (the plugin carries
+ * the same skill bytes): Claude Code from 2.1.287 gets the 12ui-design plugin
+ * with its pane, Codex with `codex plugin` gets 12ui@12ui-local with the
+ * inline workspace. Every other client, and an older Claude Code or Codex,
+ * keeps the skill exactly as before.
+ */
+export type AgentPluginContext = {
+    runner: AgentCommandRunner;
+    environment: NodeJS.ProcessEnv;
+    homeDirectory: string;
+    dataRoot: string;
+};
+export declare const defaultAgentPluginContext: () => AgentPluginContext;
+export type PluginPlan = {
+    pluginTargets: SkillTarget[];
+    skillTargets: SkillTarget[];
+    notes: string[];
+};
+/** Splits the targets into plugin homes and skill homes, once per machine per client. */
+export declare const planAgentPlugins: (targets: readonly SkillTarget[], context: AgentPluginContext) => Promise<PluginPlan>;
+export type PluginInstallOutcome = {
+    target: SkillTarget;
+    line: string;
+    installed: boolean;
+};
+/**
+ * Installs the plugin into every plugin home, a few at a time. A home whose
+ * plugin step fails, including writing the shared Codex plugin folder, gets the
+ * skill instead (`installed: false`), its line says why, and every other home
+ * goes on as before.
+ */
+export declare const installAgentPlugins: (targets: readonly SkillTarget[], context: AgentPluginContext) => Promise<PluginInstallOutcome[]>;
+/** One line per home whose plugin `skill remove` took out or failed to take out. */
+export declare const removeAgentPlugins: (targets: readonly SkillTarget[], context: AgentPluginContext) => Promise<string[]>;
+/**
+ * `12ui update` for Claude Code: every config dir on the machine that has the
+ * plugin from 12ui-plugin refreshes the marketplace and updates the plugin.
+ * One line per such home; a home that fails says why and the others go on.
+ */
+export declare const refreshAgentPlugins: (context: AgentPluginContext) => Promise<string[]>;
+/** Whether a home has the plugin, for `skill status` (file reads only). */
+export declare const pluginInstalled: (target: SkillTarget) => Promise<boolean | undefined>;
+//# sourceMappingURL=agent-plugin-step.d.ts.map

package/dist/agent-plugin-step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-plugin-step.d.ts","sourceRoot":"","sources":["../src/agent-plugin-step.ts"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AA0BrF,OAAO,EAAyC,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE/F;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO,kBAK3C,CAAC;AAUH,MAAM,MAAM,UAAU,GAAG;IACvB,aAAa,EAAE,WAAW,EAAE,CAAC;IAC7B,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,gBAAgB,GAC3B,SAAS,SAAS,WAAW,EAAE,EAC/B,SAAS,kBAAkB,KAC1B,OAAO,CAAC,UAAU,CAmBpB,CAAC;AAeF,MAAM,MAAM,oBAAoB,GAAG;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC;AAE7F;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAC9B,SAAS,SAAS,WAAW,EAAE,EAC/B,SAAS,kBAAkB,KAC1B,OAAO,CAAC,oBAAoB,EAAE,CA+ChC,CAAC;AAqBF,oFAAoF;AACpF,eAAO,MAAM,kBAAkB,GAC7B,SAAS,SAAS,WAAW,EAAE,EAC/B,SAAS,kBAAkB,KAC1B,OAAO,CAAC,MAAM,EAAE,CA4BlB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAU,SAAS,kBAAkB,KAAG,OAAO,CAAC,MAAM,EAAE,CAoBvF,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,eAAe,GAAU,QAAQ,WAAW,KAAG,OAAO,CAAC,OAAO,GAAG,SAAS,CAItF,CAAC"}