fix: add JSON serialization and enhanced data handling

- Add superjson dependency for robust serialization
- Create JsonViewer and ValueEditor components for better data display
- Implement custom serialization utilities with fallback handling
- Add theme hook for consistent UI styling
- Enhance query and mutation explorers with improved data visualization
- Update injected script to serialize payloads before messaging

fixes BigInt serialization #1

Author: dborysov

.clinerules

@@ -0,0 +1,115 @@
+# Cline's Memory Bank
+
+I am Cline, an expert software engineer with a unique characteristic: my memory resets completely between sessions. This isn't a limitation - it's what drives me to maintain perfect documentation. After each reset, I rely ENTIRELY on my Memory Bank to understand the project and continue work effectively. I MUST read ALL memory bank files at the start of EVERY task - this is not optional.
+
+## Memory Bank Structure
+
+The Memory Bank consists of core files and optional context files, all in Markdown format. Files build upon each other in a clear hierarchy:
+
+flowchart TD
+    PB[projectbrief.md] --> PC[productContext.md]
+    PB --> SP[systemPatterns.md]
+    PB --> TC[techContext.md]
+
+    PC --> AC[activeContext.md]
+    SP --> AC
+    TC --> AC
+
+    AC --> P[progress.md]
+
+### Core Files (Required)
+1. `projectbrief.md`
+   - Foundation document that shapes all other files
+   - Created at project start if it doesn't exist
+   - Defines core requirements and goals
+   - Source of truth for project scope
+
+2. `productContext.md`
+   - Why this project exists
+   - Problems it solves
+   - How it should work
+   - User experience goals
+
+3. `activeContext.md`
+   - Current work focus
+   - Recent changes
+   - Next steps
+   - Active decisions and considerations
+   - Important patterns and preferences
+   - Learnings and project insights
+
+4. `systemPatterns.md`
+   - System architecture
+   - Key technical decisions
+   - Design patterns in use
+   - Component relationships
+   - Critical implementation paths
+
+5. `techContext.md`
+   - Technologies used
+   - Development setup
+   - Technical constraints
+   - Dependencies
+   - Tool usage patterns
+
+6. `progress.md`
+   - What works
+   - What's left to build
+   - Current status
+   - Known issues
+   - Evolution of project decisions
+
+### Additional Context
+Create additional files/folders within memory-bank/ when they help organize:
+- Complex feature documentation
+- Integration specifications
+- API documentation
+- Testing strategies
+- Deployment procedures
+
+## Core Workflows
+
+### Plan Mode
+flowchart TD
+    Start[Start] --> ReadFiles[Read Memory Bank]
+    ReadFiles --> CheckFiles{Files Complete?}
+
+    CheckFiles -->|No| Plan[Create Plan]
+    Plan --> Document[Document in Chat]
+
+    CheckFiles -->|Yes| Verify[Verify Context]
+    Verify --> Strategy[Develop Strategy]
+    Strategy --> Present[Present Approach]
+
+### Act Mode
+flowchart TD
+    Start[Start] --> Context[Check Memory Bank]
+    Context --> Update[Update Documentation]
+    Update --> Execute[Execute Task]
+    Execute --> Document[Document Changes]
+
+## Documentation Updates
+
+Memory Bank updates occur when:
+1. Discovering new project patterns
+2. After implementing significant changes
+3. When user requests with **update memory bank** (MUST review ALL files)
+4. When context needs clarification
+
+flowchart TD
+    Start[Update Process]
+
+    subgraph Process
+        P1[Review ALL Files]
+        P2[Document Current State]
+        P3[Clarify Next Steps]
+        P4[Document Insights & Patterns]
+
+        P1 --> P2 --> P3 --> P4
+    end
+
+    Start --> Process
+
+Note: When triggered by **update memory bank**, I MUST review every memory bank file, even if some don't require updates. Focus particularly on activeContext.md and progress.md as they track current state.
+
+REMEMBER: After every memory reset, I begin completely fresh. The Memory Bank is my only link to previous work. It must be maintained with precision and clarity, as my effectiveness depends entirely on its accuracy.

.gitignore

@@ -22,6 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-memory-bank
-.clinerules

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "memory-bank"]
+	path = memory-bank
+	url = git@github.com:DeeCode-inc/tanstack-query-chrome-devtools-memory-bank.git

memory-bank

@@ -5,22 +5,22 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && vite build --mode injected",
     "lint": "eslint .",
     "preview": "vite preview",
     "prettier:format": "prettier --write .",
     "prettier:check": "prettier --check .",
     "prepare": "husky"
   },
   "dependencies": {
-    "@microlink/react-json-view": "^1.26.2",
     "@tanstack/query-core": "^5.80.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.522.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "superjson": "^2.2.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

package-lock.json

@@ -21,7 +21,7 @@ function App() {
     artificialStates,
     sendMessage,
   } = useConnection();
-  const { isDarkMode, handleQueryAction } = useUIState(sendMessage);
+  const { handleQueryAction } = useUIState(sendMessage);
   const {
     currentView,
     searchTerm,
@@ -95,7 +95,6 @@ function App() {
                         : null
                     }
                     onAction={handleQueryAction}
-                    isDarkMode={isDarkMode}
                     artificialStates={artificialStates}
                   />
                 ) : (
@@ -105,7 +104,6 @@ function App() {
                         ? mutations[selectedMutationIndex]
                         : null
                     }
-                    isDarkMode={isDarkMode}
                   />
                 )
               }

package.json

@@ -1,22 +1,22 @@
 import { useState, useEffect } from "react";
-import JsonView, { type InteractionProps } from "@microlink/react-json-view";
+import { JsonViewer } from "./JsonViewer";
 
 interface DataExplorerProps {
   data?: unknown;
   error?: unknown;
-  isDarkMode: boolean;
   title: string;
   emptyMessage?: string;
-  onEdit?: (edit: InteractionProps) => void;
+  onEdit?: (newData: unknown) => void;
+  readonly?: boolean;
 }
 
 export function DataExplorer({
   data,
   error,
-  isDarkMode,
   title,
   emptyMessage = "No data available",
   onEdit,
+  readonly,
 }: DataExplorerProps) {
   const [isContentEntering, setIsContentEntering] = useState(false);
   const [hasDataLoaded, setHasDataLoaded] = useState(false);
@@ -40,38 +40,16 @@ export function DataExplorer({
         className={`bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded p-3 ${isContentEntering ? "content-enter" : ""}`}
       >
         {data !== undefined && data !== null ? (
-          <JsonView
-            src={data}
+          <JsonViewer
+            data={data}
             collapsed={1}
-            displayDataTypes={false}
-            displayObjectSize={true}
-            enableClipboard={true}
             onEdit={onEdit}
-            onAdd={onEdit}
-            onDelete={onEdit}
-            theme={isDarkMode ? "monokai" : "rjv-default"}
-            style={{
-              fontSize: "12px",
-              fontFamily: "monospace",
-              backgroundColor: "transparent",
-            }}
+            readonly={readonly}
           />
         ) : error ? (
           <div className="text-red-600 dark:text-red-400 text-sm">
             <div className="font-medium mb-2">Error occurred:</div>
-            <JsonView
-              src={error}
-              collapsed={1}
-              displayDataTypes={false}
-              displayObjectSize={true}
-              enableClipboard={true}
-              theme={isDarkMode ? "monokai" : "rjv-default"}
-              style={{
-                fontSize: "12px",
-                fontFamily: "monospace",
-                backgroundColor: "transparent",
-              }}
-            />
+            <JsonViewer data={error} collapsed={1} />
           </div>
         ) : (
           <div className="text-gray-500 dark:text-gray-400 text-sm italic">