@ametie/vue-muza-use 1.1.1 → 1.2.0

package/README.md

@@ -41,6 +41,7 @@ A production-ready composable that eliminates boilerplate and solves the hard pr
 - 🔐 **JWT Token Management** — Automatic token refresh with request queueing on 401 responses
 - 🎛️ **Flexible Architecture** — Bring your own Axios instance with full configuration control
 - 🍪 **withCredentials** — Per-request cookie and cross-origin credential control
+- 🔭 **DevTools Panel** — Inspect live requests, payloads, and instance state via `@ametie/vue-muza-devtools`
 
 ---
 
@@ -63,11 +64,11 @@ A production-ready composable that eliminates boilerplate and solves the hard pr
 | **Response caching** | ✅ | ❌ | ✅ | ✅ |
 | **TypeScript** | ✅ | ✅ | ✅ | ✅ |
 | **SSR / Nuxt** | ❌ | ✅ | ✅ | ✅ |
-| **DevTools** | ❌ | ❌ | ✅ | ❌ |
+| **DevTools** | ✅ | ❌ | ✅ | ❌ |
 
 **Choose vue-muza-use if:** you build Vue 3 SPAs with Axios, need JWT token refresh out of the box, and want reactive request management without a heavyweight server-state solution.
 
-**Choose TanStack Query if:** you need SSR, DevTools, or advanced server-state normalization.
+**Choose TanStack Query if:** you need SSR or advanced server-state normalization.
 
 **Choose @vueuse/useFetch if:** you want a minimal fetch wrapper with no opinions.
 
@@ -97,9 +98,12 @@ A production-ready composable that eliminates boilerplate and solves the hard pr
 - [Data Table with Pagination](#data-table-with-pagination--sorting)
 - [Request Cancellation](#request-cancellation)
 - [Batch Requests](#batch-requests)
+  - [Reactive Requests (Auto-tracking)](#reactive-requests--auto-tracking)
+  - [Batch Polling](#batch-polling)
 
 **Advanced:**
 - [Advanced Configuration](#️-advanced-configuration)
+- [DevTools Panel](#-devtools-panel)
 - [Authentication & Token Management](#-authentication--token-management)
 - [Error Handling Reference](#-error-handling-reference)
 - [Utilities & Standalone Composables](#-utilities--standalone-composables)
@@ -1405,6 +1409,77 @@ const { loading, progress, execute } = useApiBatch(urls, {
 </template>
 ```
 
+#### Reactive Requests — Auto-tracking
+
+**TL;DR: Pass a getter function as `requests` — the batch re-executes automatically when the getter's reactive dependencies change.**
+
+This mirrors `useApi`'s auto-tracking behavior. No explicit `watch` option needed.
+
+```typescript
+import { ref } from 'vue'
+import { useApiBatch } from '@ametie/vue-muza-use'
+
+interface User { id: number; name: string }
+
+const pages = ref([1, 2, 3])
+
+// Getter is auto-tracked — re-executes when pages.value changes
+const { successfulData, loading } = useApiBatch<User>(
+  () => pages.value.map(page => ({ url: '/users', params: { page } }))
+)
+
+pages.value = [4, 5, 6]  // → new batch fires automatically
+```
+
+Set `lazy: true` to disable auto-tracking and keep full manual control:
+
+```typescript
+const { execute } = useApiBatch(
+  () => ids.value.map(id => `/items/${id}`),
+  { lazy: true }  // reactive changes to ids do NOT trigger re-execution
+)
+
+// You control when it runs
+await execute()
+```
+
+#### Batch Polling
+
+**TL;DR: Re-execute the batch on a fixed interval — useful for dashboards and status monitoring.**
+
+Same semantics as `useApi`'s `poll` option.
+
+```typescript
+import { useApiBatch } from '@ametie/vue-muza-use'
+
+const { data, loading } = useApiBatch(
+  ['/stats/cpu', '/stats/memory', '/stats/disk'],
+  {
+    immediate: true,
+    poll: 5000  // re-execute every 5 seconds
+  }
+)
+```
+
+With `whenHidden` control:
+
+```typescript
+import { ref } from 'vue'
+import { useApiBatch } from '@ametie/vue-muza-use'
+
+const interval = ref(10000)
+
+const { data, abort } = useApiBatch(
+  ['/queue/jobs', '/queue/workers'],
+  {
+    immediate: true,
+    poll: { interval, whenHidden: false }  // pauses when tab is hidden
+  }
+)
+
+interval.value = 0  // stop polling
+```
+
 ---
 
 ## ⚙️ Advanced Configuration
@@ -1496,6 +1571,44 @@ createApp(App).use(createApi({
 
 ---
 
+## 🔭 DevTools Panel
+
+**TL;DR: Enable it in the plugin and get a live network inspector in your browser. No extra packages to install.**
+
+The devtools panel is included with `@ametie/vue-muza-use`. It loads on demand and has zero impact on production bundles when disabled.
+
+### Setup
+
+Pass `devtools` to `createApi`. Gate it on `NODE_ENV` to keep production builds clean:
+
+```typescript
+import { createApp } from 'vue'
+import { createApi, createApiClient } from '@ametie/vue-muza-use'
+import App from './App.vue'
+
+const api = createApiClient({ baseURL: 'https://api.example.com' })
+
+createApp(App).use(createApi({
+  axios: api,
+  devtools: {
+    enabled: process.env.NODE_ENV !== 'production'
+  }
+}))
+```
+
+The panel loads asynchronously — it has zero impact on startup time.
+
+### DevTools Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `enabled` | `boolean` | — | Required. Set `true` to mount the panel |
+| `maxHistory` | `number` | `300` | Maximum number of requests kept in the Network tab history |
+| `maxPayloadSize` | `number` | `200_000` | Maximum bytes per payload/response before truncation in the viewer |
+| `tabs` | `DevtoolsTab[]` | `[]` | Additional custom tabs to register in the panel |
+
+---
+
 ## 🔐 Authentication & Token Management
 
 > **Note:** Authentication setup is optional. Only add this if your API requires JWT tokens.
@@ -2141,15 +2254,17 @@ type BatchInput = string | BatchRequestConfig
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `settled` | `boolean` | `true` | When `true`, all requests run even if some fail. When `false`, the first error stops the batch |
+| `settled` | `boolean` | `true` | When `true`, all requests run even if some fail. When `false`, the first error aborts remaining requests |
 | `concurrency` | `number` | unlimited | Maximum number of requests that run in parallel at once |
 | `immediate` | `boolean` | `false` | Execute the batch automatically when the composable is created |
+| `lazy` | `boolean` | `false` | Disable auto-tracking. When `false`, a getter passed as `requests` re-executes the batch automatically when its reactive deps change. Set `true` for full manual control via `execute()` |
+| `poll` | `number \| { interval: MaybeRefOrGetter<number>, whenHidden?: MaybeRefOrGetter<boolean> }` | `0` | Polling interval in ms. After each execution, schedules the next one after `interval` ms. `0` disables polling. `whenHidden: false` (default) pauses when the tab is hidden |
 | `skipErrorNotification` | `boolean` | `true` | Suppress global error handler for individual item failures |
-| `watch` | `WatchSource \| WatchSource[]` | `undefined` | Re-execute the batch when these sources change |
+| `watch` | `WatchSource \| WatchSource[]` | `undefined` | **Deprecated** — use a reactive getter with `lazy: false` instead. Will be removed in v2.0 |
 | `onItemSuccess` | `(item: BatchResultItem<T>, index: number) => void` | `undefined` | Called each time a single request in the batch succeeds |
 | `onItemError` | `(item: BatchResultItem<T>, index: number) => void` | `undefined` | Called each time a single request in the batch fails |
 | `onProgress` | `(progress: BatchProgress) => void` | `undefined` | Called after each request completes with updated progress |
-| `onFinish` | `(results: BatchResultItem<T>[]) => void` | `undefined` | Called once when all requests have completed |
+| `onFinish` | `(results: BatchResultItem<T>[]) => void` | `undefined` | Called once when all requests have completed (even on `settled: false` rejection) |
 
 **UseApiBatchReturn:**
 

package/dist/index.cjs

@@ -53,6 +53,48 @@ module.exports = __toCommonJS(index_exports);
 
 // src/plugin.ts
 var import_vue = require("vue");
+
+// src/devtools.ts
+var bridge = null;
+var requestCounter = 0;
+var pendingCalls = [];
+function nextRequestId() {
+  return `req_${++requestCounter}`;
+}
+async function initDevtools(options, app) {
+  if (!options.enabled) return;
+  try {
+    const { createBridge } = await import("@ametie/vue-muza-devtools");
+    bridge = createBridge(options, app);
+    for (const fn of pendingCalls) fn();
+    pendingCalls.length = 0;
+  } catch {
+    console.warn("[vue-muza-use] devtools enabled but @ametie/vue-muza-devtools is not installed");
+  }
+}
+var devtoolsBridge = {
+  onInstanceCreated(id, url, options) {
+    if (bridge) {
+      bridge.onInstanceCreated(id, url, options);
+    } else {
+      pendingCalls.push(() => bridge?.onInstanceCreated(id, url, options));
+    }
+  },
+  onInstanceDestroyed(id) {
+    bridge?.onInstanceDestroyed(id);
+  },
+  onStateUpdate(id, state) {
+    bridge?.onStateUpdate(id, state);
+  },
+  onRequestStart(record) {
+    bridge?.onRequestStart(record);
+  },
+  onRequestEnd(id, result) {
+    bridge?.onRequestEnd(id, result);
+  }
+};
+
+// src/plugin.ts
 var API_INJECTION_KEY = /* @__PURE__ */ Symbol("use-api-config");
 var globalConfig = null;
 function createApi(options) {
@@ -60,6 +102,9 @@ function createApi(options) {
   return {
     install(app) {
       app.provide(API_INJECTION_KEY, options);
+      if (options.devtools) {
+        void initDevtools(options.devtools, app);
+      }
     }
   };
 }
@@ -110,6 +155,18 @@ function debounceFn(fn, delay) {
   };
 }
 
+// src/utils/urlUtils.ts
+function parseUrlQueryParams(url) {
+  if (!url) return null;
+  const qIndex = url.indexOf("?");
+  if (qIndex === -1) return null;
+  const params = {};
+  for (const [k, v] of new URLSearchParams(url.slice(qIndex + 1))) {
+    params[k] = v;
+  }
+  return Object.keys(params).length > 0 ? params : null;
+}
+
 // src/useApi.ts
 var import_axios2 = require("axios");
 var import_vue5 = require("vue");
@@ -339,6 +396,30 @@ function useApi(url, options = {}) {
   const startLoading = initialLoading ?? immediate;
   const state = useApiState(initialData, { initialLoading: startLoading });
   const revalidating = (0, import_vue5.ref)(false);
+  const instanceId = (0, import_vue5.getCurrentInstance)() != null ? (0, import_vue5.useId)() : nextRequestId();
+  devtoolsBridge.onInstanceCreated(instanceId, (0, import_vue5.toValue)(url), {
+    authMode: options.authMode ?? "default",
+    cache: options.cache,
+    retry: options.retry ?? false,
+    poll: (() => {
+      const v = (0, import_vue5.toValue)(options.poll);
+      return typeof v === "number" ? v : 0;
+    })(),
+    immediate: options.immediate ?? false,
+    lazy: options.lazy ?? false
+  });
+  if ((0, import_vue5.getCurrentScope)()) {
+    (0, import_vue5.watch)(
+      () => ({
+        loading: state.loading.value,
+        error: state.error.value,
+        statusCode: state.statusCode.value,
+        data: state.data.value
+      }),
+      (s) => devtoolsBridge.onStateUpdate(instanceId, s),
+      { deep: true }
+    );
+  }
   const abortController2 = (0, import_vue5.ref)(null);
   const globalAbort = useGlobalAbort ? useAbortController() : null;
   let pollTimer = null;
@@ -403,6 +484,9 @@ function useApi(url, options = {}) {
     state.setError(null);
     let wasCancelled = false;
     let retryCount = 0;
+    let devtoolsRequestId = null;
+    let devtoolsRequestStartedAt = 0;
+    let devtoolsRequestEndResult = null;
     try {
       if (!requestUrl) {
         throw new Error("Request URL is missing");
@@ -411,6 +495,21 @@ function useApi(url, options = {}) {
       const resolvedData = (0, import_vue5.toValue)(rawData);
       const rawParams = config?.params !== void 0 ? config.params : axiosConfig.params;
       const resolvedParams = (0, import_vue5.toValue)(rawParams);
+      const devtoolsQueryParams = resolvedParams ?? parseUrlQueryParams(requestUrl);
+      devtoolsRequestId = nextRequestId();
+      devtoolsRequestStartedAt = Date.now();
+      devtoolsBridge.onRequestStart({
+        id: devtoolsRequestId,
+        instanceId,
+        url: requestUrl,
+        method,
+        startedAt: devtoolsRequestStartedAt,
+        status: "pending",
+        statusCode: null,
+        requestHeaders: {},
+        payload: resolvedData ?? null,
+        queryParams: devtoolsQueryParams
+      });
       while (true) {
         try {
           const response = await axios2.request({
@@ -434,6 +533,12 @@ function useApi(url, options = {}) {
           }
           onSuccess?.(response);
           notifyFetched();
+          devtoolsRequestEndResult = {
+            status: "success",
+            statusCode: response.status,
+            response: response.data,
+            duration: Date.now() - devtoolsRequestStartedAt
+          };
           return selected;
         } catch (err) {
           if (controller.signal.aborted || (0, import_axios2.isAxiosError)(err) && err.code === "ERR_CANCELED") {
@@ -452,6 +557,12 @@ function useApi(url, options = {}) {
             }
             continue;
           }
+          devtoolsRequestEndResult = {
+            status: "error",
+            error: apiError,
+            statusCode: apiError.status ?? null,
+            duration: Date.now() - devtoolsRequestStartedAt
+          };
           if (!skipErrorNotification && globalErrorHandler) {
             globalErrorHandler(apiError, err);
           }
@@ -467,6 +578,12 @@ function useApi(url, options = {}) {
         return null;
       }
       const apiError = errorParser ? errorParser(err) : parseApiError(err);
+      devtoolsRequestEndResult = {
+        status: "error",
+        error: apiError,
+        statusCode: null,
+        duration: Date.now() - devtoolsRequestStartedAt
+      };
       if (!skipErrorNotification && globalErrorHandler) {
         globalErrorHandler(apiError, err);
       }
@@ -475,6 +592,12 @@ function useApi(url, options = {}) {
       onError?.(apiError);
       return null;
     } finally {
+      if (devtoolsRequestId !== null) {
+        devtoolsBridge.onRequestEnd(
+          devtoolsRequestId,
+          devtoolsRequestEndResult ?? { status: "aborted", duration: Date.now() - devtoolsRequestStartedAt }
+        );
+      }
       if (globalAbortHandler && subscribedSignal) subscribedSignal.removeEventListener("abort", globalAbortHandler);
       revalidating.value = false;
       if (!wasCancelled) {
@@ -551,7 +674,10 @@ function useApi(url, options = {}) {
     }
   };
   if ((0, import_vue5.getCurrentScope)()) {
-    (0, import_vue5.onScopeDispose)(() => abort("Scope disposed"));
+    (0, import_vue5.onScopeDispose)(() => {
+      abort("Scope disposed");
+      devtoolsBridge.onInstanceDestroyed(instanceId);
+    });
   }
   if (immediate) execute();
   if (typeof document !== "undefined") {

package/dist/index.d.cts

@@ -244,6 +244,8 @@ interface ApiPluginOptions {
      * Useful if your backend has a different error structure.
      */
     errorParser?: (error: unknown) => ApiError;
+    /** Devtools panel configuration. Panel is disabled by default. */
+    devtools?: DevtoolsOptions;
     globalOptions?: {
         retry?: number | boolean;
         retryDelay?: number;
@@ -397,6 +399,92 @@ interface UseApiBatchReturn<T = unknown> {
     /** Reset state to initial */
     reset: () => void;
 }
+/** Lifecycle status of an HTTP request tracked by devtools. */
+type RequestStatus = "pending" | "success" | "error" | "aborted";
+/** Current reactive state of a useApi instance as seen by devtools. */
+interface DevtoolsInstanceState {
+    loading: boolean;
+    error: ApiError | null;
+    statusCode: number | null;
+    data: unknown;
+}
+/** Configuration options of a useApi instance as seen by devtools. */
+interface DevtoolsInstanceOptions {
+    authMode: AuthMode;
+    cache: CacheOptions | string | undefined;
+    retry: boolean | number;
+    poll: number;
+    immediate: boolean;
+    lazy: boolean;
+}
+/** An outgoing HTTP request record sent to devtools on request start. */
+interface DevtoolsRequestRecord {
+    id: string;
+    instanceId: string | null;
+    url: string;
+    method: string;
+    startedAt: number;
+    status: RequestStatus;
+    statusCode: null;
+    requestHeaders: Record<string, string>;
+    payload: unknown;
+    queryParams: unknown;
+}
+/** Result of a completed HTTP request, sent to devtools on request end. */
+type RequestEndResult = {
+    status: "success";
+    statusCode: number;
+    response: unknown;
+    duration: number;
+} | {
+    status: "error";
+    error: ApiError;
+    statusCode: number | null;
+    duration: number;
+} | {
+    status: "aborted";
+    duration: number;
+};
+/** Event callbacks implemented by the devtools panel, called by useApi instrumentation. */
+interface DevtoolsBridge {
+    /** Fired when a useApi instance is created. */
+    onInstanceCreated: (id: string, url: string | undefined, options: DevtoolsInstanceOptions) => void;
+    /** Fired when a useApi instance is destroyed (scope disposed). */
+    onInstanceDestroyed: (id: string) => void;
+    /** Fired when instance state (loading, error, statusCode, data) changes. */
+    onStateUpdate: (id: string, state: Partial<DevtoolsInstanceState>) => void;
+    /** Fired when an HTTP request starts. */
+    onRequestStart: (record: DevtoolsRequestRecord) => void;
+    /** Fired when an HTTP request completes (success, error, or abort). */
+    onRequestEnd: (id: string, result: RequestEndResult) => void;
+}
+/**
+ * Options for the `@ametie/vue-muza-devtools` panel.
+ *
+ * @example
+ * ```ts
+ * app.use(createApi({
+ *   axios: apiClient,
+ *   devtools: { enabled: process.env.NODE_ENV !== 'production' },
+ * }))
+ * ```
+ */
+interface DevtoolsOptions {
+    /** Enable the devtools panel. Default: false. */
+    enabled: boolean;
+    /** Maximum number of network requests kept in history. Default: 300. */
+    maxHistory?: number;
+    /** Maximum payload/response size in bytes before truncation. Default: 200_000. */
+    maxPayloadSize?: number;
+    /** Custom tabs appended after built-in tabs. */
+    tabs?: Array<{
+        id: string;
+        label: string;
+        component: unknown;
+        icon?: unknown;
+        order?: number;
+    }>;
+}
 
 declare function createApi(options: ApiPluginOptions): {
     install(app: App): void;
@@ -782,4 +870,4 @@ declare function invalidateCache(id: string | string[]): void;
  */
 declare function clearAllCache(): void;
 
-export { type ApiError, type ApiPluginOptions, type ApiRequestConfig, type ApiState, type AuthEventPayload, AuthEventType, type AuthMode, type AuthMonitorFn, type AuthTokens$1 as AuthTokens, type BatchProgress, type BatchRequestConfig, type BatchResultItem, type CacheOptions, type SetDataInput, type UseApiBatchOptions, type UseApiBatchReturn, type UseApiOptions, type UseApiReturn, clearAllCache, createApi, createApiClient, invalidateCache, setAuthMonitor, setupInterceptors, tokenManager, useAbortController, useApi, useApiBatch, useApiConfig, useApiDelete, useApiGet, useApiPatch, useApiPost, useApiPut, useApiState };
+export { type ApiError, type ApiPluginOptions, type ApiRequestConfig, type ApiState, type AuthEventPayload, AuthEventType, type AuthMode, type AuthMonitorFn, type AuthTokens$1 as AuthTokens, type BatchProgress, type BatchRequestConfig, type BatchResultItem, type CacheOptions, type DevtoolsBridge, type DevtoolsInstanceOptions, type DevtoolsInstanceState, type DevtoolsOptions, type DevtoolsRequestRecord, type RequestEndResult, type RequestStatus, type SetDataInput, type UseApiBatchOptions, type UseApiBatchReturn, type UseApiOptions, type UseApiReturn, clearAllCache, createApi, createApiClient, invalidateCache, setAuthMonitor, setupInterceptors, tokenManager, useAbortController, useApi, useApiBatch, useApiConfig, useApiDelete, useApiGet, useApiPatch, useApiPost, useApiPut, useApiState };

package/dist/index.d.ts

@@ -244,6 +244,8 @@ interface ApiPluginOptions {
      * Useful if your backend has a different error structure.
      */
     errorParser?: (error: unknown) => ApiError;
+    /** Devtools panel configuration. Panel is disabled by default. */
+    devtools?: DevtoolsOptions;
     globalOptions?: {
         retry?: number | boolean;
         retryDelay?: number;
@@ -397,6 +399,92 @@ interface UseApiBatchReturn<T = unknown> {
     /** Reset state to initial */
     reset: () => void;
 }
+/** Lifecycle status of an HTTP request tracked by devtools. */
+type RequestStatus = "pending" | "success" | "error" | "aborted";
+/** Current reactive state of a useApi instance as seen by devtools. */
+interface DevtoolsInstanceState {
+    loading: boolean;
+    error: ApiError | null;
+    statusCode: number | null;
+    data: unknown;
+}
+/** Configuration options of a useApi instance as seen by devtools. */
+interface DevtoolsInstanceOptions {
+    authMode: AuthMode;
+    cache: CacheOptions | string | undefined;
+    retry: boolean | number;
+    poll: number;
+    immediate: boolean;
+    lazy: boolean;
+}
+/** An outgoing HTTP request record sent to devtools on request start. */
+interface DevtoolsRequestRecord {
+    id: string;
+    instanceId: string | null;
+    url: string;
+    method: string;
+    startedAt: number;
+    status: RequestStatus;
+    statusCode: null;
+    requestHeaders: Record<string, string>;
+    payload: unknown;
+    queryParams: unknown;
+}
+/** Result of a completed HTTP request, sent to devtools on request end. */
+type RequestEndResult = {
+    status: "success";
+    statusCode: number;
+    response: unknown;
+    duration: number;
+} | {
+    status: "error";
+    error: ApiError;
+    statusCode: number | null;
+    duration: number;
+} | {
+    status: "aborted";
+    duration: number;
+};
+/** Event callbacks implemented by the devtools panel, called by useApi instrumentation. */
+interface DevtoolsBridge {
+    /** Fired when a useApi instance is created. */
+    onInstanceCreated: (id: string, url: string | undefined, options: DevtoolsInstanceOptions) => void;
+    /** Fired when a useApi instance is destroyed (scope disposed). */
+    onInstanceDestroyed: (id: string) => void;
+    /** Fired when instance state (loading, error, statusCode, data) changes. */
+    onStateUpdate: (id: string, state: Partial<DevtoolsInstanceState>) => void;
+    /** Fired when an HTTP request starts. */
+    onRequestStart: (record: DevtoolsRequestRecord) => void;
+    /** Fired when an HTTP request completes (success, error, or abort). */
+    onRequestEnd: (id: string, result: RequestEndResult) => void;
+}
+/**
+ * Options for the `@ametie/vue-muza-devtools` panel.
+ *
+ * @example
+ * ```ts
+ * app.use(createApi({
+ *   axios: apiClient,
+ *   devtools: { enabled: process.env.NODE_ENV !== 'production' },
+ * }))
+ * ```
+ */
+interface DevtoolsOptions {
+    /** Enable the devtools panel. Default: false. */
+    enabled: boolean;
+    /** Maximum number of network requests kept in history. Default: 300. */
+    maxHistory?: number;
+    /** Maximum payload/response size in bytes before truncation. Default: 200_000. */
+    maxPayloadSize?: number;
+    /** Custom tabs appended after built-in tabs. */
+    tabs?: Array<{
+        id: string;
+        label: string;
+        component: unknown;
+        icon?: unknown;
+        order?: number;
+    }>;
+}
 
 declare function createApi(options: ApiPluginOptions): {
     install(app: App): void;
@@ -782,4 +870,4 @@ declare function invalidateCache(id: string | string[]): void;
  */
 declare function clearAllCache(): void;
 
-export { type ApiError, type ApiPluginOptions, type ApiRequestConfig, type ApiState, type AuthEventPayload, AuthEventType, type AuthMode, type AuthMonitorFn, type AuthTokens$1 as AuthTokens, type BatchProgress, type BatchRequestConfig, type BatchResultItem, type CacheOptions, type SetDataInput, type UseApiBatchOptions, type UseApiBatchReturn, type UseApiOptions, type UseApiReturn, clearAllCache, createApi, createApiClient, invalidateCache, setAuthMonitor, setupInterceptors, tokenManager, useAbortController, useApi, useApiBatch, useApiConfig, useApiDelete, useApiGet, useApiPatch, useApiPost, useApiPut, useApiState };
+export { type ApiError, type ApiPluginOptions, type ApiRequestConfig, type ApiState, type AuthEventPayload, AuthEventType, type AuthMode, type AuthMonitorFn, type AuthTokens$1 as AuthTokens, type BatchProgress, type BatchRequestConfig, type BatchResultItem, type CacheOptions, type DevtoolsBridge, type DevtoolsInstanceOptions, type DevtoolsInstanceState, type DevtoolsOptions, type DevtoolsRequestRecord, type RequestEndResult, type RequestStatus, type SetDataInput, type UseApiBatchOptions, type UseApiBatchReturn, type UseApiOptions, type UseApiReturn, clearAllCache, createApi, createApiClient, invalidateCache, setAuthMonitor, setupInterceptors, tokenManager, useAbortController, useApi, useApiBatch, useApiConfig, useApiDelete, useApiGet, useApiPatch, useApiPost, useApiPut, useApiState };

package/dist/index.mjs

@@ -1,5 +1,47 @@
 // src/plugin.ts
 import { inject } from "vue";
+
+// src/devtools.ts
+var bridge = null;
+var requestCounter = 0;
+var pendingCalls = [];
+function nextRequestId() {
+  return `req_${++requestCounter}`;
+}
+async function initDevtools(options, app) {
+  if (!options.enabled) return;
+  try {
+    const { createBridge } = await import("@ametie/vue-muza-devtools");
+    bridge = createBridge(options, app);
+    for (const fn of pendingCalls) fn();
+    pendingCalls.length = 0;
+  } catch {
+    console.warn("[vue-muza-use] devtools enabled but @ametie/vue-muza-devtools is not installed");
+  }
+}
+var devtoolsBridge = {
+  onInstanceCreated(id, url, options) {
+    if (bridge) {
+      bridge.onInstanceCreated(id, url, options);
+    } else {
+      pendingCalls.push(() => bridge?.onInstanceCreated(id, url, options));
+    }
+  },
+  onInstanceDestroyed(id) {
+    bridge?.onInstanceDestroyed(id);
+  },
+  onStateUpdate(id, state) {
+    bridge?.onStateUpdate(id, state);
+  },
+  onRequestStart(record) {
+    bridge?.onRequestStart(record);
+  },
+  onRequestEnd(id, result) {
+    bridge?.onRequestEnd(id, result);
+  }
+};
+
+// src/plugin.ts
 var API_INJECTION_KEY = /* @__PURE__ */ Symbol("use-api-config");
 var globalConfig = null;
 function createApi(options) {
@@ -7,6 +49,9 @@ function createApi(options) {
   return {
     install(app) {
       app.provide(API_INJECTION_KEY, options);
+      if (options.devtools) {
+        void initDevtools(options.devtools, app);
+      }
     }
   };
 }
@@ -57,9 +102,21 @@ function debounceFn(fn, delay) {
   };
 }
 
+// src/utils/urlUtils.ts
+function parseUrlQueryParams(url) {
+  if (!url) return null;
+  const qIndex = url.indexOf("?");
+  if (qIndex === -1) return null;
+  const params = {};
+  for (const [k, v] of new URLSearchParams(url.slice(qIndex + 1))) {
+    params[k] = v;
+  }
+  return Object.keys(params).length > 0 ? params : null;
+}
+
 // src/useApi.ts
 import { isAxiosError as isAxiosError2 } from "axios";
-import { ref as ref3, computed, effectScope, getCurrentScope as getCurrentScope2, onScopeDispose as onScopeDispose2, toValue, watch } from "vue";
+import { ref as ref3, computed, effectScope, getCurrentInstance, getCurrentScope as getCurrentScope2, onScopeDispose as onScopeDispose2, toValue, watch, useId } from "vue";
 
 // src/utils/errorParser.ts
 import { isAxiosError } from "axios";
@@ -286,6 +343,30 @@ function useApi(url, options = {}) {
   const startLoading = initialLoading ?? immediate;
   const state = useApiState(initialData, { initialLoading: startLoading });
   const revalidating = ref3(false);
+  const instanceId = getCurrentInstance() != null ? useId() : nextRequestId();
+  devtoolsBridge.onInstanceCreated(instanceId, toValue(url), {
+    authMode: options.authMode ?? "default",
+    cache: options.cache,
+    retry: options.retry ?? false,
+    poll: (() => {
+      const v = toValue(options.poll);
+      return typeof v === "number" ? v : 0;
+    })(),
+    immediate: options.immediate ?? false,
+    lazy: options.lazy ?? false
+  });
+  if (getCurrentScope2()) {
+    watch(
+      () => ({
+        loading: state.loading.value,
+        error: state.error.value,
+        statusCode: state.statusCode.value,
+        data: state.data.value
+      }),
+      (s) => devtoolsBridge.onStateUpdate(instanceId, s),
+      { deep: true }
+    );
+  }
   const abortController2 = ref3(null);
   const globalAbort = useGlobalAbort ? useAbortController() : null;
   let pollTimer = null;
@@ -350,6 +431,9 @@ function useApi(url, options = {}) {
     state.setError(null);
     let wasCancelled = false;
     let retryCount = 0;
+    let devtoolsRequestId = null;
+    let devtoolsRequestStartedAt = 0;
+    let devtoolsRequestEndResult = null;
     try {
       if (!requestUrl) {
         throw new Error("Request URL is missing");
@@ -358,6 +442,21 @@ function useApi(url, options = {}) {
       const resolvedData = toValue(rawData);
       const rawParams = config?.params !== void 0 ? config.params : axiosConfig.params;
       const resolvedParams = toValue(rawParams);
+      const devtoolsQueryParams = resolvedParams ?? parseUrlQueryParams(requestUrl);
+      devtoolsRequestId = nextRequestId();
+      devtoolsRequestStartedAt = Date.now();
+      devtoolsBridge.onRequestStart({
+        id: devtoolsRequestId,
+        instanceId,
+        url: requestUrl,
+        method,
+        startedAt: devtoolsRequestStartedAt,
+        status: "pending",
+        statusCode: null,
+        requestHeaders: {},
+        payload: resolvedData ?? null,
+        queryParams: devtoolsQueryParams
+      });
       while (true) {
         try {
           const response = await axios2.request({
@@ -381,6 +480,12 @@ function useApi(url, options = {}) {
           }
           onSuccess?.(response);
           notifyFetched();
+          devtoolsRequestEndResult = {
+            status: "success",
+            statusCode: response.status,
+            response: response.data,
+            duration: Date.now() - devtoolsRequestStartedAt
+          };
           return selected;
         } catch (err) {
           if (controller.signal.aborted || isAxiosError2(err) && err.code === "ERR_CANCELED") {
@@ -399,6 +504,12 @@ function useApi(url, options = {}) {
             }
             continue;
           }
+          devtoolsRequestEndResult = {
+            status: "error",
+            error: apiError,
+            statusCode: apiError.status ?? null,
+            duration: Date.now() - devtoolsRequestStartedAt
+          };
           if (!skipErrorNotification && globalErrorHandler) {
             globalErrorHandler(apiError, err);
           }
@@ -414,6 +525,12 @@ function useApi(url, options = {}) {
         return null;
       }
       const apiError = errorParser ? errorParser(err) : parseApiError(err);
+      devtoolsRequestEndResult = {
+        status: "error",
+        error: apiError,
+        statusCode: null,
+        duration: Date.now() - devtoolsRequestStartedAt
+      };
       if (!skipErrorNotification && globalErrorHandler) {
         globalErrorHandler(apiError, err);
       }
@@ -422,6 +539,12 @@ function useApi(url, options = {}) {
       onError?.(apiError);
       return null;
     } finally {
+      if (devtoolsRequestId !== null) {
+        devtoolsBridge.onRequestEnd(
+          devtoolsRequestId,
+          devtoolsRequestEndResult ?? { status: "aborted", duration: Date.now() - devtoolsRequestStartedAt }
+        );
+      }
       if (globalAbortHandler && subscribedSignal) subscribedSignal.removeEventListener("abort", globalAbortHandler);
       revalidating.value = false;
       if (!wasCancelled) {
@@ -498,7 +621,10 @@ function useApi(url, options = {}) {
     }
   };
   if (getCurrentScope2()) {
-    onScopeDispose2(() => abort("Scope disposed"));
+    onScopeDispose2(() => {
+      abort("Scope disposed");
+      devtoolsBridge.onInstanceDestroyed(instanceId);
+    });
   }
   if (immediate) execute();
   if (typeof document !== "undefined") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ametie/vue-muza-use",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Powerful Vue 3 API composable (Muza) with Axios, Auto-Refresh & TypeScript",
   "author": "MortyQ",
   "license": "MIT",