instruckt 0.4.29 → 0.4.31

package/README.md

@@ -22,6 +22,7 @@ npm install instruckt
 | [Next.js](#nextjs) | Client component |
 | [Laravel](#laravel) | Composer package |
 | [Astro](#astro) | Community integration |
+| [Tauri](#tauri) | Rust plugin + MCP server |
 
 ---
 
@@ -169,6 +170,48 @@ See **[instruckt-astro](https://github.com/sgasser/instruckt-astro)** for a comm
 
 ---
 
+### Tauri
+
+Use the **[tauri-plugin-instruckt](https://github.com/Naoray/instruckt-rust)** crate — a Tauri v2 plugin that provides a Rust backend with JSON file storage, MCP tools, and IPC commands. Dev-only by default.
+
+Add the plugin to your Tauri app:
+
+```toml
+# src-tauri/Cargo.toml
+[dependencies]
+tauri-plugin-instruckt = "0.1"
+```
+
+```rust
+// src-tauri/src/lib.rs
+fn main() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_instruckt::init())
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+```
+
+Then add the Vite plugin to your frontend with `server: false` (Tauri owns the backend):
+
+```js
+// vite.config.ts
+import instruckt from 'instruckt/vite'
+
+export default defineConfig({
+  plugins: [
+    instruckt({
+      server: false,
+      mcp: true,
+    }),
+  ],
+})
+```
+
+The plugin intercepts fetch requests to the instruckt API and routes them through Tauri IPC. Annotations and screenshots are stored in the OS app data directory. Includes a standalone MCP server binary (`instruckt-mcp`) that AI agents can connect to via stdio.
+
+---
+
 ## Vite Plugin Options
 
 ```js
@@ -219,16 +262,22 @@ instruckt({
 ### Example Output
 
 ```markdown
-# UI Feedback: /auth/login
+# UI Feedback: /dashboard
 
 ## 1. Change the submit button color to green
-- Element: `button.btn-primary` in `pages::auth.login`
+- Element: `button.btn-primary` in `LoginForm`
+- Source: `src/components/LoginForm.tsx:42:5`
+- Component stack:
+  - LoginForm `src/components/LoginForm.tsx:42:5`
+  - AuthPage `src/pages/AuthPage.tsx:18:3`
+  - App `src/App.tsx:8:7`
 - Classes: `btn btn-primary`
 - Text: "Submit Login"
 - Screenshot: `.instruckt/screenshots/01JWXYZ.png`
 
 ## 2. Make the login card have rounded corners
-- Element: `div.bg-white` in `pages::auth.login`
+- Element: `div.bg-white` in `LoginCard`
+- Source: `src/components/LoginCard.tsx:15:3`
 - Classes: `bg-white dark:bg-white/10 border`
 ```
 
@@ -286,7 +335,7 @@ Default shortcuts (customizable via `keys` config):
 
 ## Features
 
-- **Framework detection** — automatically identifies Livewire, Vue, Svelte, and React components
+- **Framework detection** — automatically identifies Livewire, Vue, Svelte, and React components with full component stacks and precise source locations (file:line:column) via [element-source](https://github.com/aidenybai/element-source)
 - **Screenshots** — capture element or region screenshots; uses DOM-to-image on standard apps, automatically falls back to Screen Capture API on shadow DOM frameworks (Flux UI, etc.)
 - **Shadow DOM isolation** — all UI renders in shadow roots so it never conflicts with your styles
 - **Copy as markdown** — annotations auto-copy as structured markdown optimized for AI agents
@@ -320,6 +369,10 @@ The Vite plugin includes a dev API server that saves annotations and screenshots
 
 **[instruckt-laravel](https://github.com/joshcirre/instruckt-laravel)** — Laravel package with JSON file storage, MCP tools, Blade component, and API routes. Includes `artisan instruckt:install` which auto-configures the Vite plugin, MCP, and agent skills.
 
+### Tauri
+
+**[tauri-plugin-instruckt](https://github.com/Naoray/instruckt-rust)** — Tauri v2 plugin with Rust backend, JSON file storage in OS app data directory, IPC commands, and a standalone MCP server binary for AI agent integration.
+
 ### Custom Backend
 
 instruckt expects these endpoints:

package/dist/instruckt.cjs.js

@@ -173,6 +173,22 @@ var TOOLBAR_CSS = (
 }
 .toolbar:active { cursor: grabbing; }
 
+.drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 10px;
+  cursor: grab;
+  opacity: 0.35;
+  transition: opacity 0.15s ease;
+  flex-shrink: 0;
+  margin-bottom: 2px;
+}
+.drag-handle:hover { opacity: 0.7; }
+.drag-handle:active { cursor: grabbing; opacity: 0.9; }
+.drag-handle svg { pointer-events: none; }
+
 .btn {
   display: flex;
   align-items: center;
@@ -579,6 +595,14 @@ var Toolbar = class {
     this.shadow.appendChild(style);
     this.toolbarEl = document.createElement("div");
     this.toolbarEl.className = "toolbar";
+    const dragHandle = document.createElement("div");
+    dragHandle.className = "drag-handle";
+    dragHandle.setAttribute("aria-label", "Drag to reposition toolbar");
+    dragHandle.innerHTML = `<svg width="16" height="6" viewBox="0 0 16 6" fill="currentColor">
+      <circle cx="4" cy="1.5" r="1.2"/><circle cx="8" cy="1.5" r="1.2"/><circle cx="12" cy="1.5" r="1.2"/>
+      <circle cx="4" cy="4.5" r="1.2"/><circle cx="8" cy="4.5" r="1.2"/><circle cx="12" cy="4.5" r="1.2"/>
+    </svg>`;
+    this.toolbarEl.appendChild(dragHandle);
     const k = this.keys;
     this.annotateBtn = this.makeBtn(ICONS.annotate, `Annotate elements (${((_a2 = k.annotate) != null ? _a2 : "A").toUpperCase()})`, () => {
       const next = !this.annotateActive;
@@ -4000,7 +4024,8 @@ No open annotations.`;
         if (a.screenshot) {
           if (!a.screenshot.startsWith("data:")) {
             const screenshotPath = (_f = this.config.screenshotPath) != null ? _f : "storage/app/_instruckt/";
-            lines.push(`- Screenshot: \`${screenshotPath}${a.screenshot}\``);
+            const screenshotInstruction = this.config.mcp ? ` \u2014 call \`instruckt.get_screenshot\` with ID \`${a.id}\` to view` : "";
+            lines.push(`- Screenshot: \`${screenshotPath}${a.screenshot}\`${screenshotInstruction}`);
           } else {
             lines.push(`- Screenshot: ![Screenshot](${a.screenshot})`);
           }
@@ -4009,14 +4034,9 @@ No open annotations.`;
       });
     }
     if (this.config.mcp) {
-      const hasScreenshots = pending.some((a) => a.screenshot && !a.screenshot.startsWith("data:"));
       lines.push("---");
       lines.push("");
-      if (hasScreenshots) {
-        lines.push("Use the `instruckt.get_screenshot` MCP tool to view screenshots. After making changes, use `instruckt.resolve` to mark each annotation as resolved.");
-      } else {
-        lines.push("After making changes, use the `instruckt.resolve` MCP tool to mark each annotation as resolved.");
-      }
+      lines.push("After making changes, use the `instruckt.resolve` MCP tool to mark each annotation as resolved.");
     }
     return lines.join("\n").trim();
   }