midday-ai · SkidGod4444 · Oct 11, 2025
diff --git a/bun.lock b/bun.lock
@@ -150,6 +150,7 @@
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^7.3.4",
         "@mui/material": "^7.3.4",
+        "@upstash/redis": "^1.35.5",
         "ai": "^5.0.60",
         "react-json-view-lite": "^2.5.0",
         "tokenlens": "1.3.1",
@@ -204,7 +205,7 @@
 
     "@ai-sdk/gateway": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.11", "@vercel/oidc": "3.0.2" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-cdsXbeRRMi6QxbZscin69Asx2fi0d2TmmPngcPFUMpZbchGEBiJYVNvIfiALKFKXEq0l/w0xGNV3E13vroaleA=="],
 
-    "@ai-sdk/openai": ["@ai-sdk/[email protected].45", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.11" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-9OsVWzW502UCYN1VS9D+1flwrF9GqFvpfybfb1iLIdvmCbXXKXpozhLyuAW82FY67hfiIlOsvlgT9UYtljlQmw=="],
+    "@ai-sdk/openai": ["@ai-sdk/[email protected].46", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.11" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-3FHZdiTLbjnHw0rbu1yOPW8FruHrzN6SlJYsaLSQgbxYfE5y+60Nj4Xp8/k7rtD3FmrjkKcp/XTMSbAJWfoJig=="],
 
     "@ai-sdk/provider": ["@ai-sdk/[email protected]", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA=="],
 
@@ -512,6 +513,8 @@
 
     "@openpanel/web": ["@openpanel/[email protected]", "", { "dependencies": { "@openpanel/sdk": "1.0.0" } }, "sha512-cVZ7Kr9SicczJ/RDIfEtZs8+1iGDzwkabVA/j3NqSl8VSucsC8m1+LVbjmCDzCJNnK4yVn6tEcc9PJRi2rtllw=="],
 
+    "@openrouter/ai-sdk-provider": ["@openrouter/[email protected]", "", { "peerDependencies": { "ai": "^5.0.0", "zod": "^3.24.1 || ^v4" } }, "sha512-stuIwq7Yb7DNmk3GuCtz+oS3nZOY4TXEV3V5KsknDGQN7Fpu3KRMQVWRc1J073xKdf0FC9EHOctSyzsACmp5Ag=="],
+
     "@opentelemetry/api": ["@opentelemetry/[email protected]", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],
 
     "@pkgjs/parseargs": ["@pkgjs/[email protected]", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
@@ -832,7 +835,7 @@
 
     "acorn": ["[email protected]", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
 
-    "ai": ["[email protected].63", "", { "dependencies": { "@ai-sdk/gateway": "1.0.35", "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.11", "@opentelemetry/api": "1.9.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-rQB8xSCDCZLvAue51hvufhSP82NtzZh8CMH7/Oj5rnn/5vNI2y+Rn0lmODJ/kC4bPvFX8XgDfys8i4r86YfkmQ=="],
+    "ai": ["[email protected].64", "", { "dependencies": { "@ai-sdk/gateway": "1.0.35", "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.11", "@opentelemetry/api": "1.9.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-a7H1z2Xz6NQdgx+FIdDlkenoPYBbxbmJSbRfnOFnYS1S1XraiHT8M85hLvz8d8zlxVtSSjiP+c4EjqwtAe72cg=="],
 
     "ansi-colors": ["[email protected]", "", {}, "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="],
 
@@ -1770,12 +1773,6 @@
 
     "zwitch": ["[email protected]", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
-    "@ai-sdk-tools/devtools/ai": ["[email protected]", "", { "dependencies": { "@ai-sdk/gateway": "1.0.35", "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.11", "@opentelemetry/api": "1.9.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-a7H1z2Xz6NQdgx+FIdDlkenoPYBbxbmJSbRfnOFnYS1S1XraiHT8M85hLvz8d8zlxVtSSjiP+c4EjqwtAe72cg=="],
-
-    "@ai-sdk-tools/website/@ai-sdk/openai": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.11" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-3FHZdiTLbjnHw0rbu1yOPW8FruHrzN6SlJYsaLSQgbxYfE5y+60Nj4Xp8/k7rtD3FmrjkKcp/XTMSbAJWfoJig=="],
-
-    "@ai-sdk-tools/website/ai": ["[email protected]", "", { "dependencies": { "@ai-sdk/gateway": "1.0.35", "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.11", "@opentelemetry/api": "1.9.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-a7H1z2Xz6NQdgx+FIdDlkenoPYBbxbmJSbRfnOFnYS1S1XraiHT8M85hLvz8d8zlxVtSSjiP+c4EjqwtAe72cg=="],
-
     "@ai-sdk/react/@ai-sdk/provider-utils": ["@ai-sdk/[email protected]", "", { "dependencies": { "@ai-sdk/provider": "2.0.0", "@standard-schema/spec": "^1.0.0", "eventsource-parser": "^3.0.5" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-T1gZ76gEIwffep6MWI0QNy9jgoybUHE7TRaHB5k54K8mF91ciGFlbtCGxDYhMH3nCRergKwYFIDeFF0hJSIQHQ=="],
 
     "@ai-sdk/react/ai": ["[email protected]", "", { "dependencies": { "@ai-sdk/gateway": "1.0.33", "@ai-sdk/provider": "2.0.0", "@ai-sdk/provider-utils": "3.0.10", "@opentelemetry/api": "1.9.0" }, "peerDependencies": { "zod": "^3.25.76 || ^4.1.8" } }, "sha512-80U/3kmdBW6g+JkLXpz/P2EwkyEaWlPlYtuLUpx/JYK9F7WZh9NnkYoh1KvUi1Sbpo0NyurBTvX0a2AG9mmbDA=="],

diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -51,14 +51,15 @@
     "@ai-sdk/react": "^2.0.60"
   },
   "dependencies": {
+    "@ai-sdk-tools/store": "^0.7.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
+    "@upstash/redis": "^1.35.5",
     "ai": "^5.0.60",
     "react-json-view-lite": "^2.5.0",
-    "tokenlens": "1.3.1",
-    "@ai-sdk-tools/store": "^0.7.0"
+    "tokenlens": "1.3.1"
   },
   "repository": {
     "type": "git",

diff --git a/packages/devtools/src/components/ai-dev-tools.tsx b/packages/devtools/src/components/ai-dev-tools.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useAIDevtools } from "../hooks/use-ai-devtools";
+import { useEventHistory } from "../hooks/use-event-history";
 import type { DevtoolsConfig, UseAIDevtoolsOptions } from "../types";
 import { DevtoolsButton } from "./devtools-button";
 import { DevtoolsPanel } from "./devtools-panel";
@@ -11,13 +12,15 @@ interface AIDevtoolsProps extends UseAIDevtoolsOptions {
   className?: string;
   debug?: boolean;
   modelId?: string; // Optional model ID for context insights
+
 }
 
 const defaultConfig: DevtoolsConfig = {
   enabled: true,
   maxEvents: 1000,
   position: "bottom",
   height: 400,
+  width: 500, 
   theme: "auto",
   streamCapture: {
     enabled: true,
@@ -29,9 +32,15 @@ const defaultConfig: DevtoolsConfig = {
     interval: 100, // 100ms throttle by default
     includeTypes: ["text-delta"], // Only throttle high-frequency text-delta events by default
   },
+  history: {
+    enabled: true,
+    maxSessions: 100,
+    maxEventsPerSession: 1000,
+    sessionId: "default-session",
+  }
 };
 
-export function AIDevtools({
+export function AIDevTools({
   enabled = true,
   maxEvents = 1000,
   onEvent,
@@ -77,7 +86,13 @@ export function AIDevtools({
     }
   }, [position, isMounted]);
 
-  const finalConfig = { ...defaultConfig, ...config, position };
+  const finalConfig = { 
+    ...defaultConfig, 
+    ...config, 
+    position,
+    // Set appropriate width based on position
+    width: config.width || (position === "right" ? 700 : 500)
+  };
 
   // Toggle position between bottom and right
   const togglePosition = () => {
@@ -100,6 +115,20 @@ export function AIDevtools({
     throttle: finalConfig.throttle,
   });
 
+  // History management
+  const {
+    historyEvents,
+    isLoadingHistory,
+    fetchHistory,
+    clearHistory,
+    availableSessions,
+    currentSessionId,
+  } = useEventHistory({
+    events,
+    config: finalConfig.history!,
+    enabled: finalConfig.history?.enabled === true,
+  });
+
   // Hydration-safe mounting check
   useEffect(() => {
     setIsMounted(true);
@@ -139,6 +168,12 @@ export function AIDevtools({
       {isOpen && (
         <DevtoolsPanel
           events={events}
+          historyEvents={historyEvents}
+          isLoadingHistory={isLoadingHistory}
+          availableSessions={availableSessions}
+          currentSessionId={currentSessionId}
+          onFetchHistory={fetchHistory}
+          onClearHistory={clearHistory}
           isCapturing={isCapturing}
           onToggleCapturing={toggleCapturing}
           onClearEvents={clearEvents}

diff --git a/packages/devtools/src/components/devtools-panel.tsx b/packages/devtools/src/components/devtools-panel.tsx
@@ -4,6 +4,7 @@ import {
   ViewList as BottomPanelIcon,
   Clear as ClearIcon,
   Close as CloseIcon,
+  HistoryOutlined,
   Pause as PauseIcon,
   PlayArrow as PlayArrowIcon,
   ViewSidebar as RightPanelIcon,
@@ -22,6 +23,7 @@ import { formatToolName, getEventTypeIcon } from "../utils/formatting";
 import { ContextCircle } from "./context-circle";
 import { EventList } from "./event-list";
 import { StateDataExplorer } from "./state-data-explorer";
+import HistoryDataExplorer from "./history-data-explorer";
 
 const EVENT_TYPES = [
   "tool-call-start",
@@ -69,6 +71,12 @@ const EVENT_TYPE_LABELS: Record<string, string> = {
 
 interface DevtoolsPanelProps {
   events: AIEvent[];
+  historyEvents: AIEvent[];
+  isLoadingHistory: boolean;
+  availableSessions: string[];
+  currentSessionId: string;
+  onFetchHistory: () => Promise<void>;
+  onClearHistory: () => Promise<void>;
   isCapturing: boolean;
   onToggleCapturing: () => void;
   onClearEvents: () => void;
@@ -81,6 +89,12 @@ interface DevtoolsPanelProps {
 
 export function DevtoolsPanel({
   events,
+  historyEvents,
+  isLoadingHistory,
+  availableSessions,
+  currentSessionId,
+  onFetchHistory,
+  onClearHistory,
   isCapturing,
   onToggleCapturing,
   onClearEvents,
@@ -98,8 +112,8 @@ export function DevtoolsPanel({
     searchQuery: "",
   });
 
-  // State watching functionality
-  const [showStatePanel, setShowStatePanel] = useState(false);
+  // Panel management - only one panel can be active at a time
+  const [activePanel, setActivePanel] = useState<"state" | "history" | null>(null);
   const [selectedStoreId, setSelectedStoreId] = useState<string | null>(null);
 
   const { isStoreAvailable, availableStoreIds, currentStates } =
@@ -359,6 +373,8 @@ export function DevtoolsPanel({
         type="button"
         className={`ai-devtools-resize-handle ai-devtools-resize-handle-${config.position}`}
         onMouseDown={handleMouseDown}
+        title={`Resize ${config.position} panel`}
+        aria-label={`Resize ${config.position} panel`}
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
@@ -538,19 +554,6 @@ export function DevtoolsPanel({
         </div>
 
         <div className="ai-devtools-header-right">
-          {/* State Button - only show if store is available */}
-          {isStoreAvailable && (
-            <button
-              type="button"
-              onClick={() => setShowStatePanel(!showStatePanel)}
-              className={`ai-devtools-btn ${showStatePanel ? "active" : ""}`}
-              title={`${showStatePanel ? "Hide" : "Show"} state monitoring`}
-            >
-              <StateIcon className="ai-devtools-btn-icon" />
-              <span>State</span>
-            </button>
-          )}
-
           {/* Live Button with Pause/Play */}
           <button
             type="button"
@@ -564,6 +567,32 @@ export function DevtoolsPanel({
             )}
             <span>Live</span>
           </button>
+
+          {/* State Button - only show if store is available */}
+          {isStoreAvailable && (
+            <button
+              type="button"
+              onClick={() => setActivePanel(activePanel === "state" ? null : "state")}
+              className={`ai-devtools-btn ${activePanel === "state" ? "active" : ""}`}
+              title={`${activePanel === "state" ? "Hide" : "Show"} state monitoring`}
+            >
+              <StateIcon className="ai-devtools-btn-icon" />
+              <span>State</span>
+            </button>
+          )}
+
+          {/* History Button */}
+          {config.history?.enabled && (
+            <button
+            type="button"
+            onClick={() => setActivePanel(activePanel === "history" ? null : "history")}
+            className={`ai-devtools-btn ${activePanel === "history" ? "active" : ""}`}
+            title={`${activePanel === "history" ? "Hide" : "Show"} history explorer`}
+          >
+            <HistoryOutlined className="ai-devtools-btn-icon" />
+            <span>History</span>
+          </button>
+          )}
 
           {/* Clear events */}
           <button
@@ -594,6 +623,8 @@ export function DevtoolsPanel({
             type="button"
             onClick={onClose}
             className="ai-devtools-close-btn"
+            title="Close devtools panel"
+            aria-label="Close devtools panel"
           >
             <CloseIcon className="ai-devtools-close-icon" />
           </button>
@@ -720,7 +751,20 @@ export function DevtoolsPanel({
       {/* Content */}
       <div className="ai-devtools-panel-content">
         <div className="ai-devtools-content">
-          {showStatePanel ? (
+          {activePanel === "history" ? (
+            <div className="ai-devtools-state-panel-full">
+              <HistoryDataExplorer 
+                events={filteredEvents}
+                historyConfig={config.history}
+                historyEvents={historyEvents}
+                isLoadingHistory={isLoadingHistory}
+                availableSessions={availableSessions}
+                currentSessionId={currentSessionId}
+                onFetchHistory={onFetchHistory}
+                onClearHistory={onClearHistory}
+              />
+            </div>
+          ) : activePanel === "state" ? (
             <div className="ai-devtools-state-panel-full">
               <StateDataExplorer
                 currentState={

diff --git a/packages/devtools/src/components/event-list.tsx b/packages/devtools/src/components/event-list.tsx
@@ -20,9 +20,9 @@ export function EventList({
     return (
       <div className={`ai-devtools-empty-state ${className}`}>
         <div className="ai-devtools-empty-content">
-          <div className="ai-devtools-empty-title">▸ waiting for events...</div>
+          <div className="ai-devtools-empty-title">▸ Waiting For Events...</div>
           <div className="ai-devtools-empty-subtitle">
-            start streaming to capture events
+            Start streaming to capture events
           </div>
         </div>
       </div>