feat: SQLite agent tools, web-ready storage, and Rozenite for Web docs (#228)

## Summary

This PR adds SQLite agent tooling, improves how official plugins behave
on web, refreshes documentation for [Rozenite for
Web](https://rozenite.dev/docs/rozenite-for-web), and replaces the
playground webpack web screen with plugin-focused sections.

### SQLite plugin
- **Agents:** LLM workflows can list registered databases and run SQL
(including multi-statement scripts) via new agent tools wired from
`useRozeniteSqlitePlugin`.
- **Web:** The SQLite plugin runtime is **not** loaded in browser builds
for now, because of upstream `expo-sqlite` issues on web. Documentation
states that SQLite in DevTools is for iOS and Android until upstream
stabilizes.

### Storage plugin
- **Web:** In development, Async Storage and Expo Secure Store adapters
work in the inspector on web; the MMKV adapter stays an empty inspector
on web because MMKV does not run in the browser.

### Playground (web)
- The webpack web entry no longer uses the JSONPlaceholder smoke test.
It lists supported plugins and wires the corresponding hooks (controls,
overlay, performance monitor, React Navigation, Redux, TanStack Query,
etc.). SQLite is shown as disabled on web only.
- Metro config adds WASM asset resolution and COEP/COOP headers where
needed for web SQLite experiments elsewhere.

### Documentation
- Official plugin pages note Rozenite for Web where the plugin runs in
the browser in development.
- SQLite docs describe agent tools and the current web limitation.

## Test plan
- [x] `pnpm` typecheck / lint for touched packages as appropriate
- [x] Native playground: SQLite and Storage plugins behave as before
- [x] Web playground: plugin sections render; SQLite section explains
disabled state

Author: V3RON

.changeset/sqlite-agent-tools.md

@@ -0,0 +1,5 @@
+---
+'@rozenite/sqlite-plugin': minor
+---
+
+Add agent tool support to the SQLite plugin. LLM agents can now use `list-databases` to discover registered databases and `execute-sql` to run any SQL — including multi-statement scripts — against a specific database.

.changeset/storage-plugin-web.md

@@ -0,0 +1,5 @@
+---
+'@rozenite/storage-plugin': minor
+---
+
+The Storage plugin now runs in **development on web** (React Native for Web) when using Rozenite for Web. AsyncStorage and Expo SecureStore adapters work as on native; **MMKV** stays unavailable in the browser, so the MMKV adapter resolves to an **empty inspector** (same as production) without loading `react-native-mmkv` in your web bundle.

apps/playground/metro.config.js

@@ -41,6 +41,18 @@ config.server = {
   },
 };
 
+// Add wasm asset support
+config.resolver.assetExts.push('wasm');
+
+// Add COEP and COOP headers to support SharedArrayBuffer
+config.server.enhanceMiddleware = (middleware) => {
+  return (req, res, next) => {
+    res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
+    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+    return middleware(req, res, next);
+  };
+};
+
 module.exports = composeMetroConfigTransformers([
   withRozenite,
   {

apps/playground/src/app/App.web.tsx

@@ -1,113 +1,35 @@
-import { useState } from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
 import {
-  ActivityIndicator,
-  Pressable,
-  SafeAreaView,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import { api, type Post, type User } from './utils/network-activity/api';
+  ControlsPluginSection,
+  OverlayPluginSection,
+  PerformanceMonitorPluginSection,
+  ReactNavigationPluginSection,
+  ReduxDevToolsPluginSection,
+  SqlitePluginSection,
+  StoragePluginSection,
+  TanStackQueryPluginSection,
+} from './WebPluginSections';
 
 export default function App() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [post, setPost] = useState<Post | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  const loadUsers = async () => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      setUsers(await api.getUsers());
-    } catch (nextError) {
-      setError(
-        nextError instanceof Error ? nextError.message : 'Failed to load users',
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const createTestPost = async () => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      setPost(
-        await api.createPost({
-          title: 'Webpack web smoke test',
-          body: 'Testing the React Native Web webpack setup.',
-          userId: 1,
-        }),
-      );
-    } catch (nextError) {
-      setError(
-        nextError instanceof Error
-          ? nextError.message
-          : 'Failed to create post',
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
-
   return (
     <SafeAreaView style={styles.safeArea}>
       <ScrollView contentContainerStyle={styles.content}>
-        <Text style={styles.eyebrow}>React Native Web</Text>
-        <Text style={styles.title}>Playground webpack smoke test</Text>
+        <Text style={styles.eyebrow}>Rozenite for Web</Text>
         <Text style={styles.description}>
-          This uses `webpack` plus `react-native-web` against the existing
-          `src/main.tsx` entry.
+          Requirements: install the Rozenite Chrome extension, add
+          `@rozenite/web`, wrap your web bundler config with `withRozeniteWeb`,
+          and load `require(&apos;@rozenite/web&apos;)` in your web entry point. Then run
+          the app in development on a Chromium-based browser.
         </Text>
 
-        <View style={styles.actions}>
-          <Pressable onPress={loadUsers} style={styles.primaryButton}>
-            <Text style={styles.primaryButtonText}>Load users</Text>
-          </Pressable>
-          <Pressable onPress={createTestPost} style={styles.secondaryButton}>
-            <Text style={styles.secondaryButtonText}>Create test post</Text>
-          </Pressable>
-        </View>
-
-        {loading ? (
-          <View style={styles.card}>
-            <ActivityIndicator color="#8b5cf6" />
-            <Text style={styles.muted}>Running request...</Text>
-          </View>
-        ) : null}
-
-        {error ? (
-          <View style={styles.errorCard}>
-            <Text style={styles.errorTitle}>Request failed</Text>
-            <Text style={styles.errorText}>{error}</Text>
-          </View>
-        ) : null}
-
-        {post ? (
-          <View style={styles.card}>
-            <Text style={styles.sectionTitle}>Latest created post</Text>
-            <Text style={styles.cardTitle}>{post.title}</Text>
-            <Text style={styles.cardText}>{post.body}</Text>
-          </View>
-        ) : null}
-
-        <View style={styles.card}>
-          <Text style={styles.sectionTitle}>Fetched users</Text>
-          {users.length === 0 ? (
-            <Text style={styles.muted}>No users loaded yet.</Text>
-          ) : (
-            users.map((user) => (
-              <View key={user.id} style={styles.userRow}>
-                <Text style={styles.cardTitle}>{user.name}</Text>
-                <Text style={styles.cardText}>{user.email}</Text>
-              </View>
-            ))
-          )}
-        </View>
+        <StoragePluginSection />
+        <ReactNavigationPluginSection />
+        <ControlsPluginSection />
+        <OverlayPluginSection />
+        <PerformanceMonitorPluginSection />
+        <ReduxDevToolsPluginSection />
+        <SqlitePluginSection />
+        <TanStackQueryPluginSection />
       </ScrollView>
     </SafeAreaView>
   );
@@ -125,6 +47,7 @@ const styles = StyleSheet.create({
     width: '100%',
     maxWidth: 880,
     alignSelf: 'center',
+    paddingBottom: 48,
   },
   eyebrow: {
     color: '#8b5cf6',
@@ -133,95 +56,10 @@ const styles = StyleSheet.create({
     textTransform: 'uppercase',
     letterSpacing: 1,
   },
-  title: {
-    color: '#f8fafc',
-    fontSize: 36,
-    fontWeight: '800',
-  },
   description: {
     color: '#cbd5e1',
     fontSize: 16,
     lineHeight: 24,
-    maxWidth: 640,
-  },
-  actions: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 12,
-  },
-  primaryButton: {
-    backgroundColor: '#8b5cf6',
-    borderRadius: 999,
-    paddingHorizontal: 18,
-    paddingVertical: 12,
-  },
-  secondaryButton: {
-    backgroundColor: '#111827',
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: '#334155',
-    paddingHorizontal: 18,
-    paddingVertical: 12,
-  },
-  primaryButtonText: {
-    color: '#ffffff',
-    fontSize: 15,
-    fontWeight: '700',
-  },
-  secondaryButtonText: {
-    color: '#e2e8f0',
-    fontSize: 15,
-    fontWeight: '700',
-  },
-  card: {
-    backgroundColor: '#111827',
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: '#1f2937',
-    gap: 10,
-    padding: 20,
-  },
-  errorCard: {
-    backgroundColor: '#3f1d2e',
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: '#7f1d1d',
-    gap: 8,
-    padding: 20,
-  },
-  sectionTitle: {
-    color: '#f8fafc',
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  errorTitle: {
-    color: '#fecaca',
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  errorText: {
-    color: '#fee2e2',
-    fontSize: 14,
-    lineHeight: 20,
-  },
-  cardTitle: {
-    color: '#f8fafc',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  cardText: {
-    color: '#cbd5e1',
-    fontSize: 14,
-    lineHeight: 20,
-  },
-  muted: {
-    color: '#94a3b8',
-    fontSize: 14,
-  },
-  userRow: {
-    gap: 4,
-    borderTopWidth: 1,
-    borderTopColor: '#1f2937',
-    paddingTop: 12,
+    maxWidth: 720,
   },
 });