@myop/cli 0.1.45 → 0.1.47

package/dist/skills/myop-component/SKILL.md

@@ -1,15 +1,15 @@
 ---
 name: myop-component
-description: "Myop is a platform for creating self-contained HTML UI components that integrate into any host application. This skill covers the component public API (myop_init_interface, myop_cta_handler), type definitions, sizing, layout, development workflow, and CLI commands. When building or modifying a Myop component, you must learn this skill."
+description: "Myop is a platform for building isolated, independently deployable UI components that integrate into any host application. Components can be built with any framework or architecture — vanilla JS, React, Vue, Svelte, or any toolchain — and are deployed as a single entry point. This skill covers the component public API (myop_init_interface, myop_cta_handler), type definitions, sizing, layout, development workflow, and CLI commands. When building or modifying a Myop component, you must learn this skill."
 ---
 
 # Myop Component Developer
 
-Build high-performance, self-contained HTML components for the Myop platform.
+Build isolated, independently deployable UI components for the Myop platform.
 
 ## Immediate Action Required - Read This First
 
-This skill activates when a `myop.config.json` file exists in the project, or when the user mentions "myop", "myop component", or asks to create/edit an HTML component for Myop.
+This skill activates when a `myop.config.json` file exists in the project, or when the user mentions "myop", "myop component", or asks to create/edit a component for Myop.
 
 **Your first action MUST be:**
 1. Check if `myop.config.json` exists in the current directory
@@ -18,24 +18,30 @@ This skill activates when a `myop.config.json` file exists in the project, or wh
    - Read `index.html` to understand the current component implementation
    - Implement the requested changes following the patterns in this skill
 3. If **NO** (new component):
-   - Guide the user to run `myop create` to scaffold a new component
+   - Guide the user to run `npx myop create` to scaffold a new component
    - Or create the files manually following the structure below
 
 ## Component Architecture
 
-Every Myop component is a **single HTML file** (`index.html` or `dist/index.html`) that communicates with a host application through exactly **2 global functions**:
+A Myop component is an **isolated, independently deployable UI module** that runs within any host application (React, Vue, Angular, React Native, or any web framework). Components can be as complex as needed — built with any internal architecture, framework, or toolchain (vanilla JS, React, Vue, Svelte, Web Components, etc.).
+
+The platform communicates with every component through exactly **2 global functions**:
 
 | Function | Direction | Purpose | Reference |
 |----------|-----------|---------|-----------|
 | `myop_init_interface(data)` | Host -> Component | Receive data, render UI | [component-api.md](references/component-api.md) |
 | `myop_cta_handler(action, payload)` | Component -> Host | Send user actions back | [component-api.md](references/component-api.md) |
 
+### Deployment Format
+
+The deployed artifact is a **single entry point** — currently an HTML file (`index.html` or `dist/index.html`) with all code, styles, and markup bundled. For multi-file projects, a build step (`npm run build`) compiles your source into this entry point. The internal complexity is unlimited: use modules, state management, third-party libraries, or any architecture you need.
+
 ## CRITICAL: Rules You Must Follow
 
 1. **Both functions MUST be defined at top-level script execution** - never inside `setTimeout`, `Promise.then`, `async`, `DOMContentLoaded`, or any deferred code
 2. **Rendering MUST be synchronous** - no `fetch`, no `await`, no `setTimeout` inside `myop_init_interface`
 3. **All state is private** - use an IIFE to encapsulate; only expose the 2 global functions
-4. **Single-file output** - the final deployed artifact is ONE HTML file with all CSS/JS inlined
+4. **Single entry point** - the deployed artifact is one HTML file with all CSS/JS inlined (a build step compiles multi-file projects into this)
 5. **No external network requests** - components cannot fetch external resources at runtime
 
 ## Quick Start - Minimal Component
@@ -132,29 +138,29 @@ Every Myop component is a **single HTML file** (`index.html` or `dist/index.html
 
 ## Component File Structure
 
-### Single-file mode (simplest)
+### Single-file mode (simplest — good for small components)
 ```
 project/
-├── index.html          # The entire component in one file
+├── index.html          # Complete component in one file
 ├── myop.config.json    # Component metadata
 └── .gitignore
 ```
 
-### Multi-file mode (with build step)
+### Multi-file mode (with build step — for complex components)
 ```
 project/
 ├── index.html          # HTML template with <link> and <script src>
-├── src/
+├── src/                # Any internal architecture you need
 │   ├── index.js        # Entry point
-│   ├── modules/
-│   │   ├── app.js      # Application logic
+│   ├── modules/        # Business logic, state management, etc.
+│   │   ├── app.js
 │   │   └── myop.js     # Myop interface setup
 │   └── styles/
-│       ├── index.css    # Style entry point
-│       └── main.css     # Main styles
-├── build.js            # esbuild bundler (inlines JS/CSS into dist/index.html)
+│       ├── index.css
+│       └── main.css
+├── build.js            # Bundler (compiles everything into dist/index.html)
 ├── dist/
-│   └── index.html      # Built single-file output
+│   └── index.html      # Built entry point (deployed artifact)
 ├── myop.config.json
 ├── package.json
 └── .gitignore
@@ -212,43 +218,48 @@ project/
 | Mutating data passed to `myop_init_interface` | Storing a copy of the data |
 | Not returning state when called without args | `if (!data) return state;` pattern |
 
+## CLI — Package Name is `myop`
+
+The npm package is **`myop`**. Always use `npx myop <command>`. **NEVER** `npx @anthropic/myop`, `npx @myop/cli`, or any other scope — the package is simply **`myop`**.
+
 ## CLI Commands Quick Reference
 
 | Command | Description |
 |---------|-------------|
-| `myop create` | Create a new component (scaffolds files + starts dev server) |
-| `myop dev` | Start development server with HMR on port 9292 |
-| `myop push` | Upload component to Myop platform |
-| `myop sync` | Build and upload component to Myop platform |
-| `myop login` | Authenticate with Myop (opens browser) |
-| `myop logout` | Clear stored credentials |
-| `myop whoami` | Show current authenticated user |
+| `npx myop create` | Create a new component (scaffolds files + starts dev server) |
+| `npx myop dev` | Start development server with HMR on port 9292 |
+| `npx myop push [componentId]` | Upload component to Myop platform (optional ID overrides config) |
+| `npx myop pull [componentId]` | Download component HTML from Myop platform |
+| `npx myop list [--org <orgId>]` | Browse, search, and batch pull/push remote components |
+| `npx myop sync` | Build and upload component to Myop platform |
+| `npx myop login` | Authenticate with Myop (opens browser) |
+| `npx myop logout` | Clear stored credentials |
+| `npx myop whoami` | Show current authenticated user |
 
 ## Deploying with `myop push`
 
-`myop push` uploads the current component HTML to the Myop platform. After a successful push, any CTA wiring (e.g., `myop_cta_handler('button-clicked', …)`) is live in the Myop host — no rebuild or redeploy of the host application is needed.
+`myop push` uploads the component to the Myop platform. After a successful push, the component is live — including all CTA wiring (e.g., `myop_cta_handler('button-clicked', …)`). No rebuild or redeploy of the host application is needed.
 
 ### What push does
 
 1. Reads `myop.config.json` to identify the component
-2. Locates the HTML file (`index.html` for single-file mode, `dist/index.html` for multi-file)
-3. Authenticates with Myop (prompts login if needed)
-4. Uploads the HTML via a presigned URL
-5. On first push: assigns a real `componentId` (UUID) and `organization` to `myop.config.json`
-6. On subsequent pushes: adds a new version to the existing component
+2. If a `componentId` argument is passed, it overrides the one in config
+3. Locates the entry point (`index.html` for single-file mode, `dist/index.html` for multi-file)
+4. Authenticates with Myop (prompts login if needed)
+5. Uploads the component via a presigned URL
+6. On first push: assigns a real `componentId` (UUID) and `organization` to `myop.config.json`
+7. On subsequent pushes: adds a new version to the existing component
 
 ### Running push
 
 From the component's project directory:
 
 ```bash
-myop push
-```
-
-Or using npx (no global install needed):
+# Push using componentId from myop.config.json
+npx myop push
 
-```bash
-npx @myop/cli push
+# Push to a specific remote component (overrides config)
+npx myop push <componentId>
 ```
 
 ### When the user asks to push
@@ -256,7 +267,7 @@ npx @myop/cli push
 When the user says **"push to myop"**, **"deploy"**, **"upload"**, or **"run the push"**, you should:
 
 1. `cd` into the component's project directory (where `myop.config.json` lives)
-2. Run `npx @myop/cli push` via the terminal
+2. Run `npx myop push`
 3. If push succeeds, report the dashboard URL: `https://dashboard.myop.dev/dashboard/2.0/component/<componentId>`
 4. If push fails, show the error output and suggest the user run the command manually
 
@@ -264,13 +275,72 @@ When the user says **"push to myop"**, **"deploy"**, **"upload"**, or **"run the
 
 - **First push** — `componentId` in `myop.config.json` changes from `"DEV"` to a real UUID. The `organization` field is also added. The component now exists on the Myop platform.
 - **Subsequent pushes** — A new version is added to the existing component. The previous version remains accessible. The latest version becomes the live version immediately.
-- **What goes live** — The full HTML file is uploaded as-is. All CTA handlers, type definitions, styles, and preview scripts are included. The host application picks up changes automatically on next load (no host redeploy).
-- **Multi-file projects** — For projects with a build step, run `myop sync` instead (which runs `npm run build` first, then uploads `dist/index.html`).
+- **What goes live** — The complete component entry point is uploaded with all CTA handlers, type definitions, styles, and logic bundled. The host application picks up changes automatically on next load (no host redeploy).
+- **Multi-file projects** — For projects with a build step, run `myop sync` instead (which runs `npm run build` first, then uploads the built entry point).
+
+## Downloading with `myop pull`
+
+`myop pull` downloads a component's latest version from the Myop platform into your local directory.
+
+### Running pull
+
+```bash
+# Pull using componentId from myop.config.json
+npx myop pull
+
+# Pull a specific component by ID (works in empty directories)
+npx myop pull <componentId>
+
+# Pull to a custom output path
+npx myop pull <componentId> -o ./components/sidebar/index.html
+```
+
+### When the user asks to pull
+
+When the user says **"pull from myop"**, **"download component"**, or **"get the latest version"**, you should:
+
+1. `cd` into the component's project directory (or an empty directory for a new clone)
+2. Run `npx myop pull` (or `npx myop pull <componentId>` if pulling a specific component)
+3. Report the saved file path and size
+
+### Pull behavior
+
+- **Existing directory** — overwrites the entry point (`index.html` or `dist/index.html`) with the latest remote version
+- **Empty directory** — creates `index.html` + `myop.config.json` with component metadata
+- **Custom output** — use `-o <path>` to write to a specific file; parent directories are created automatically
+
+## Browsing with `myop list`
+
+`myop list` lets you browse all components in your organization — search, filter, select multiple, and batch pull or push them.
+
+### Running list
+
+```bash
+# Interactive browse (prompts for org if multiple)
+npx myop list
+
+# Specify an organization
+npx myop list --org <orgId>
+```
+
+### When the user asks to list or browse
+
+When the user says **"show my components"**, **"list components"**, **"browse"**, or **"clone all components"**, you should:
+
+1. Run `npx myop list`
+2. The interactive UI handles org selection, search, and batch operations
+
+### List behavior
+
+- **Organization memory** — the selected org is saved to `~/.myop/preferences.json` and reused next time
+- **Search** — type to filter components by name, select with enter, repeat across searches
+- **Batch pull** — downloads all selected components in parallel, each into its own subdirectory with `index.html` + `myop.config.json`
+- **Batch push** — scans local directories for matching `componentId`s and uploads them in parallel
 
 ## Workflow Summary
 
-1. `myop create` - Scaffold a new component
-2. Edit `index.html` - Build your component UI
-3. `myop dev` - Preview with hot reload at http://localhost:9292
-4. `myop push` - Upload to Myop platform (live immediately)
+1. `npx myop create` — Scaffold a new component
+2. Build your component — edit source files (single-file or multi-file with any framework)
+3. `npx myop dev` — Preview with hot reload at http://localhost:9292
+4. `npx myop push` — Deploy to Myop platform (live immediately)
 5. View on dashboard: `https://dashboard.myop.dev/dashboard/2.0/component/<componentId>`

package/dist/skills/myop-component/references/dev-workflow.md

@@ -14,10 +14,11 @@ The Myop CLI provides commands for creating, developing, and deploying component
 ## CLI Installation
 
 ```bash
-npm install -g @myop/cli
+npm install -g myop
+# Or use without installing: npx myop <command>
 ```
 
-After installation, the `myop` command is available globally.
+The npm package name is `myop`.
 
 ## Commands Reference
 
@@ -25,7 +26,9 @@ After installation, the `myop` command is available globally.
 |---------|-------------|
 | `myop create` | Create a new component (interactive, starts dev server after) |
 | `myop dev` | Start dev server with file watching and HMR |
-| `myop push` | Upload component to Myop platform |
+| `myop push [componentId]` | Upload component to Myop platform |
+| `myop pull [componentId]` | Download component HTML from Myop platform |
+| `myop list [--org <orgId>]` | Browse, search, and batch pull/push remote components |
 | `myop sync` | Build and upload component to Myop platform |
 | `myop login` | Authenticate with Myop (opens browser for OAuth) |
 | `myop logout` | Clear stored credentials |
@@ -110,16 +113,21 @@ The dev server detects changes and triggers builds automatically:
 Uploads the component directly to the Myop platform (no build step).
 
 ```bash
+# Push using componentId from myop.config.json
 myop push
+
+# Push to a specific remote component (overrides myop.config.json)
+myop push <componentId>
 ```
 
 **What it does:**
 1. Reads `myop.config.json`
-2. Finds the HTML file to upload (`index.html` in root for single-file mode, or `dist/index.html`)
-3. Authenticates (prompts for login if needed)
-4. Uploads HTML to Myop via presigned URL
-5. Confirms upload
-6. Updates `myop.config.json` with `componentId` (first push only)
+2. If a `componentId` argument is passed, it overrides the one in config
+3. Finds the HTML file to upload (`index.html` in root for single-file mode, or `dist/index.html`)
+4. Authenticates (prompts for login if needed)
+5. Uploads HTML to Myop via presigned URL
+6. Confirms upload
+7. Updates `myop.config.json` with `componentId` (first push only)
 
 **After first push:**
 - `myop.config.json` gets a real `componentId` (UUID)
@@ -131,6 +139,64 @@ myop push
 https://dashboard.myop.dev/dashboard/2.0/component/<componentId>
 ```
 
+## Pull Command
+
+Downloads a component's HTML from the Myop platform.
+
+```bash
+# Pull using componentId from myop.config.json
+myop pull
+
+# Pull a specific component by ID
+myop pull <componentId>
+
+# Pull to a specific output path
+myop pull <componentId> -o ./my-component/index.html
+```
+
+**What it does:**
+1. Determines `componentId` from the argument or `myop.config.json`
+2. Authenticates (prompts for login if needed)
+3. Fetches the component HTML from Myop
+4. Writes the HTML to `index.html` (or `dist/index.html` if it exists, or `-o` path)
+5. Creates or updates `myop.config.json` with the component metadata
+
+**Use cases:**
+- **Clone a remote component locally** — `myop pull <componentId>` in an empty directory creates `index.html` + `myop.config.json`
+- **Sync latest version** — run `myop pull` in an existing component directory to get the latest remote version
+- **Download to custom path** — use `-o` flag to specify where the HTML file should be saved
+
+## List Command
+
+Browse all components in your organization, search and filter, select multiple, then batch pull or push.
+
+```bash
+# Interactive browse (prompts for org if needed)
+myop list
+
+# Use a specific organization
+myop list --org <orgId>
+```
+
+**What it does:**
+1. Authenticates and loads your organizations
+2. Resolves which org to use (saved default, `--org` flag, or prompts)
+3. Fetches all components in the organization
+4. Shows a searchable list — type to filter, enter to select, repeat
+5. When done selecting, choose Pull or Push
+6. **Pull** — downloads all selected components in parallel, each into its own subdirectory with `index.html` + `myop.config.json`
+7. **Push** — scans local directories for matching `componentId`s and uploads them in parallel
+
+**Batch pull example** (great for cloning an environment):
+```bash
+mkdir my-components && cd my-components
+myop list
+# Select components, choose Pull
+# Each component gets its own subdirectory
+```
+
+**Organization memory** — the selected org is saved to `~/.myop/preferences.json` so you don't have to pick it every time.
+
 ## Sync Command
 
 Builds and uploads the component to the Myop platform (for multi-file projects with a build step).