@comty.io/core 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -7
- package/comty-sdk.js +563 -76
- package/package.json +2 -2
- package/src/browser.d.ts +1 -1
- package/src/browser.js +205 -52
- package/src/capture.js +10 -8
- package/src/claude.mjs +2 -3
- package/src/codex.mjs +2 -4
- package/src/dev.mjs +3 -2
- package/src/inspect-markup.js +283 -0
- package/src/measurements.js +3 -3
- package/src/style.js +62 -13
- package/src/vite.mjs +3 -2
package/README.md
CHANGED
|
@@ -37,12 +37,15 @@ import { initComty } from '@comty.io/core';
|
|
|
37
37
|
|
|
38
38
|
await initComty({
|
|
39
39
|
projectKey: 'YOUR_PROJECT_KEY',
|
|
40
|
-
apiUrl: 'https://YOUR_COMTY_API',
|
|
41
40
|
});
|
|
42
41
|
```
|
|
43
42
|
|
|
44
43
|
Call once from your application entry. Server rendering is safe: it does nothing until called in a browser. Repeated calls with the same options reuse the document's instance. Reload the page to change its project or API URL. Register the site's domain in Comty to use shared comments.
|
|
45
44
|
|
|
45
|
+
The project key is the only required option for hosted Comty. The SDK connects to `https://api.comty.io` by default, including when your application runs on localhost. You do not need an API URL environment variable or your own Comty server. Set `apiUrl` only when using a different Comty API, such as `http://localhost:4000` for developing Comty itself or the URL of a self-hosted installation.
|
|
46
|
+
|
|
47
|
+
The browser entry also works in production. If Comty should only appear in development or preview, conditionally call `initComty` in your application. To include production, do not guard initialization with a development-only flag. The Vite companion below is a separate development-only integration.
|
|
48
|
+
|
|
46
49
|
## Color tokens
|
|
47
50
|
|
|
48
51
|
Element inspection shows a copyable CSS custom-property name above foreground/background colors when the winning declaration can be identified. It handles ordinary selectors, `:where()`, inline styles, inheritance, `!important`, active media/supports rules and named top-level cascade layers. Semantic aliases retain their declared name. No extra line is rendered for literal colors or uncertain provenance (including inaccessible stylesheets, shadow/scoped or nested cascades, and unsupported functional selectors).
|
|
@@ -81,7 +84,7 @@ export default defineConfig({
|
|
|
81
84
|
});
|
|
82
85
|
```
|
|
83
86
|
|
|
84
|
-
Keep your existing plugins. Run your normal dev command and open `http://localhost:<vite-port>`. The plugin injects the SDK and starts the companion automatically. It is disabled for production builds. Choose the installed coding agent with `agent: 'codex' | 'claude' | 'cursor' | 'gemini' | 'grok'`. The optional `model` setting accepts a model ID from the selected agent; omit it to use that agent's default. A project key is optional in local Agent mode; set `projectKey`
|
|
87
|
+
Keep your existing plugins. Run your normal dev command and open `http://localhost:<vite-port>`. The plugin injects the SDK and starts the companion automatically. It is disabled for production builds. Choose the installed coding agent with `agent: 'codex' | 'claude' | 'cursor' | 'gemini' | 'grok'`. The optional `model` setting accepts a model ID from the selected agent; omit it to use that agent's default. A project key is optional in local Agent mode; set `projectKey` in the plugin options if you also want shared Comty comments. Set `apiUrl` only for a local or self-hosted Comty API.
|
|
85
88
|
|
|
86
89
|
## Other development servers
|
|
87
90
|
|
|
@@ -97,11 +100,11 @@ Optional flags: `--port`, `--model`, `--project-key`, `--api-url`. Without a com
|
|
|
97
100
|
|
|
98
101
|
### Choose your coding agent
|
|
99
102
|
|
|
100
|
-
|
|
103
|
+
Use the coding agent CLI already installed and signed in on your computer, then set `--agent` (or the Vite plugin's `agent` option). It must be available on the development server's `PATH`; no agent package is needed in your project. This selects a **coding agent**, not just a model API: the CLI reads the project, edits files and runs checks. Comty does not install the agent or provide its credentials. If the CLI is missing, install it once using that agent's instructions. If its version does not support your chosen model, update that existing CLI.
|
|
101
104
|
|
|
102
105
|
To choose a model, add `model: 'your-agent-model-id'` to the Vite plugin or `--model your-agent-model-id` to `comty dev`. Model IDs belong to the selected agent and must be available on your account. Leave this option out to use its CLI default.
|
|
103
106
|
|
|
104
|
-
| Agent | `agent` value | CLI
|
|
107
|
+
| Agent | `agent` value | Existing CLI command |
|
|
105
108
|
| --- | --- | --- |
|
|
106
109
|
| Codex | `codex` | `codex` |
|
|
107
110
|
| Claude Code | `claude` | `claude` |
|
|
@@ -115,10 +118,10 @@ Gemini CLI runs through its [ACP mode](https://github.com/google-gemini/gemini-c
|
|
|
115
118
|
|
|
116
119
|
## Using the agent
|
|
117
120
|
|
|
118
|
-
|
|
121
|
+
Comty resolves each agent through the development server's PATH: `codex`, `claude`, `agent` (Cursor), `gemini`, or `grok`. It reuses that CLI's configuration and login. Tool permission requests are relayed to the Comty sidebar; Claude uses a local MCP tool for this. Comty does not provision an AI subscription or credentials.
|
|
119
122
|
|
|
120
|
-
1.
|
|
121
|
-
2.
|
|
123
|
+
1. Press **Shift A** to open Agent mode directly (localhost only), or select the `</>` Agent tool from the toolbar.
|
|
124
|
+
2. Click an element.
|
|
122
125
|
3. Ask a question or describe a change. **Apply globally** is off by default, so the request targets this element. Turn it on to request a change to every instance of the same component variant. The agent must identify that component and variant in source before applying the broader change. No Comty account is needed for this local flow.
|
|
123
126
|
4. Work in progress is indicated on the element, without a progress toast. Click the Agent tool again to read the latest answer or change summary. Requested tool permissions and errors still appear when they need attention.
|
|
124
127
|
5. In an existing shared comment thread, reply with `@Agent` to start a local agent task. Your question and the agent's response remain in the shared thread. This requires a project editor account, a project key, and the local companion running in your browser. Without `@Agent`, replies remain ordinary human comments.
|
|
@@ -130,3 +133,11 @@ Comty starts a separate agent session. It does not send instructions into an alr
|
|
|
130
133
|
Direct Agent requests are never sent to the Comty API or its database. Their prompt and page context are sent to the selected AI provider by its coding agent. In a shared thread, the `@Agent` message and final answer are stored as comment replies; the thread transcript and page context are sent to the selected coding agent. Standard shared comments retain their existing Comty authentication and storage.
|
|
131
134
|
|
|
132
135
|
Add `.comty/` to your application's `.gitignore`. Keep the companion on loopback; LAN binding, tunnels and production hosting are unsupported. Requests require the random token of the running development session and its exact origin.
|
|
136
|
+
|
|
137
|
+
## Inspector annotations and area captures
|
|
138
|
+
|
|
139
|
+
In Inspect (**Shift I**), choose **Annotate** (**D**) to draw with a pencil, rectangle, ellipse or arrow. Choose a stroke from the visual width buttons and a color from the swatches or the custom color picker. **⌘/Ctrl Z** undoes the last annotation; the trash button clears all drawings. **Escape** cancels an unfinished stroke, then exits the tool. Drawings follow document scrolling, remain when changing tools, and reset on navigation or reload.
|
|
140
|
+
|
|
141
|
+
Choose **Capture area** (**S** while inspecting), then drag a rectangle in either direction to download a PNG. The image includes visible annotations, ruler strips, ruler guides, layout guides and distance measurements, without the toolbar or selection controls. **Escape** cancels. Captures stay local and use the existing DOM snapshot engine; inaccessible embedded pages and protected media may not appear exactly as rendered by the browser.
|
|
142
|
+
|
|
143
|
+
The local Agent refreshes on entry and when returning to the tab. It polls only while tasks are pending or running; those progress checks do not reload shared comments. Inspector tools make no polling requests while idle.
|