WIP: feat: solana devtools

README.md

@@ -7,10 +7,10 @@ Production-ready Solana wallet infrastructure. A headless, framework-agnostic wa
 
 ## Packages
 
-| Package                                           | Description                                                          |
-| ------------------------------------------------- | -------------------------------------------------------------------- |
-| [@solana/connector](./packages/connector)         | Core wallet connector with React hooks and headless client           |
-| [@solana/connector-debugger](./packages/debugger) | Development debug panel with transaction analysis (experimental wip) |
+| Package                                           | Description                                                 |
+| ------------------------------------------------- | ----------------------------------------------------------- |
+| [@solana/connector](./packages/connector) | Core wallet connector with React hooks and headless client |
+| [@solana/devtools](./packages/devtools)   | Framework-agnostic devtools with transaction tracking      |
 
 ## Why ConnectorKit?
 
@@ -72,28 +72,72 @@ function WalletButton() {
 
 See the [connector package docs](./packages/connector/README.md) for full API reference.
 
-## Debug Panel (Development)
+## Devtools (Development)
+
+Framework-agnostic devtools that work with any web framework via the imperative DOM API.
 
 ```bash
-npm install @solana/connector-debugger
+npm install @solana/devtools
 ```
 
 ```typescript
-import { ConnectorDebugPanel } from '@solana/connector-debugger/react';
+import { ConnectorDevtools } from '@solana/devtools';
+
+// Create devtools (auto-detects window.__connectorClient from ConnectorProvider)
+const devtools = new ConnectorDevtools({
+  config: {
+    position: 'bottom-right',
+    theme: 'dark',
+  },
+});
+
+// Mount to DOM
+const container = document.createElement('div');
+document.body.appendChild(container);
+devtools.mount(container);
+
+// Later, to cleanup
+devtools.unmount();
+```
+
+### Next.js Integration
+
+```tsx
+'use client';
+
+import { useEffect } from 'react';
 
-// Add to your app (development only)
-{process.env.NODE_ENV === 'development' && <ConnectorDebugPanel />}
+export function DevtoolsLoader() {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'development') return;
+
+    let devtools: any;
+    let container: HTMLDivElement;
+
+    import('@solana/devtools').then(({ ConnectorDevtools }) => {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+      devtools = new ConnectorDevtools();
+      devtools.mount(container);
+    });
+
+    return () => {
+      devtools?.unmount();
+      container?.remove();
+    };
+  }, []);
+
+  return null;
+}
 ```
 
-Features:
+### Features
 
-- Live wallet state monitoring
-- Pre-flight transaction simulation
-- Transaction size analysis with optimization suggestions
-- Address Lookup Table recommendations
-- Real-time event stream
+- **Overview Tab** - Connection state, wallet info, cluster, health metrics
+- **Events Tab** - Real-time event stream with filtering and pause/resume
+- **Transactions Tab** - Transaction tracking with automatic status polling
 
-See the [debugger package docs](./packages/debugger/README.md) for full documentation.
+See the [devtools package docs](./packages/devtools/README.md) for full documentation.
 
 ## Examples
 

examples/next-js/app/providers.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { AppProvider, getDefaultConfig, getDefaultMobileConfig } from '@solana/connector/react';
 import { createRemoteSignerWallet } from '@solana/connector/remote';
 
@@ -84,6 +84,39 @@ export function Providers({ children }: { children: ReactNode }) {
         [],
     );
 
+    // Mount devtools in development mode
+    useEffect(() => {
+        if (process.env.NODE_ENV !== 'development') return;
+
+        let devtools: { mount: (el: HTMLElement) => void; unmount: () => void } | undefined;
+        let container: HTMLDivElement | undefined;
+
+        // Dynamic import to avoid bundling in production
+        import('@solana/devtools').then(({ ConnectorDevtools }) => {
+            // Create container for devtools
+            container = document.createElement('div');
+            container.id = 'connector-devtools-container';
+            document.body.appendChild(container);
+
+            // Create and mount devtools (auto-detects window.__connectorClient)
+            devtools = new ConnectorDevtools({
+                config: {
+                    position: 'bottom-right',
+                    theme: 'dark',
+                    defaultOpen: false,
+                    rpcUrl: process.env.NEXT_PUBLIC_RPC_URL,
+                },
+            });
+            devtools.mount(container);
+        });
+
+        // Cleanup on unmount
+        return () => {
+            devtools?.unmount();
+            container?.remove();
+        };
+    }, []);
+
     return (
         <AppProvider connectorConfig={connectorConfig} mobile={mobile}>
             {children}

examples/next-js/package.json

@@ -20,7 +20,7 @@
         "@radix-ui/react-tabs": "^1.1.12",
         "@solana-program/system": "^0.7.0",
         "@solana/connector": "workspace:*",
-        "@solana/connector-debugger": "workspace:*",
+        "@solana/devtools": "workspace:*",
         "@solana/keychain": "^0.2.1",
         "@solana/kit": "^5.0.0",
         "@solana/web3.js": "^1.98.4",