tidewave 0.5.5 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.6.0] - 2025-12-31
+
+* Tanstack support
+* Write logs and instrumentation to a file so it works across multiple runtimes
+
 ## [0.5.5] - 2025-11-25
 
 * Fix missing items element on `project_eval`

package/README.md

@@ -8,15 +8,14 @@ more information.
 This project supports:
 
 - Next.js 15/16
+- TanStack Start with React
+- Vite with React/Vue
 
-- React + Vite frontends, with either a backend as a service (such as Supabase)
-  or a third-party framework
+If you are using React/Vue with Django, FastAPI, Flask, Phoenix, or Rails,
+[follow the steps here instead](http://hexdocs.pm/tidewave/frontend.html).
 
-If you are using React with Django, FastAPI, Flask, Phoenix, or Rails,
-[follow the steps here instead](http://hexdocs.pm/tidewave/react.html).
-
-This project can also be used through the CLI or as a standalone Model Context
-Protocol (MCP) server for your editors.
+This project can also be used through the CLI or as
+[a standalone Model Context Protocol server](https://hexdocs.pm/tidewave/mcp.html).
 
 ## Installation
 
@@ -168,11 +167,56 @@ export async function register() {
 
 </details>
 
-### React + Vite
+### TanStack Start
+
+If you are using TanStack Start with React, install Tidewave with:
+
+```sh
+$ npm install -D tidewave
+# or
+$ yarn add -D tidewave
+# or
+$ pnpm add --save-dev tidewave
+# or
+$ bun add --dev tidewave
+```
+
+Then configure your `vite.config.js` (also works for `.ts` and `.mjs`):
+
+```javascript
+import { defineConfig } from 'vite';
+import tidewave from 'tidewave/vite-plugin';
+
+export default defineConfig({
+  plugins: [tidewave()],
+});
+```
+
+And finally create or modify `src/start.ts` file to import Tidewave in
+development:
+
+```ts
+import { createStart } from '@tanstack/react-start';
+
+// Import Tidewave only in development.
+if (process.env.NODE_ENV === 'development' && typeof window === 'undefined') {
+  import('tidewave/tanstack');
+}
+
+export const startInstance = createStart(() => {
+  return {};
+});
+```
+
+Now make sure
+[Tidewave is installed](https://hexdocs.pm/tidewave/installation.html) and you
+are ready to connect Tidewave to your app.
+
+### Vite
 
-If you are building a front-end application, using a backend as a service, such
-as Supabase, or a non-officially supported web framework, we recommend using our
-React + Vite integration.
+If you are building a frontend application with React or Vue, using a backend as
+a service, such as Supabase, or a non-officially supported web framework, we
+recommend using our Vite integration.
 
 Install it with:
 
@@ -201,12 +245,13 @@ Now make sure
 [Tidewave is installed](https://hexdocs.pm/tidewave/installation.html) and you
 are ready to connect Tidewave to your app.
 
-If you are using Supabase or similar, you can prompt Tidewave to use the
-`supabase` CLI so it has complete access to your database. For non-officially
-supported web frameworks, our React + Vite integration allows Tidewave Web to
-perform changes on the front-end, and the agent will be able to modify your
-backend code as usual, but some functionality (such as accessing logs, doing
-database calls, etc) won't be available.
+Our Vite integration for React and Vue allows Tidewave Web to perform changes on
+the front-end, and the agent will be able to modify your backend code as usual,
+but some functionality (such as accessing logs, doing database calls, etc) won't
+be available. You can also use our
+[Figma Dev Mode](https://hexdocs.pm/tidewave/figma.html) and
+[Supabase](https://hexdocs.pm/tidewave/supabase.html) integration for additional
+features.
 
 ### Configuration
 
@@ -285,8 +330,8 @@ bun run clean            # Clean dist directory
 
 ## Acknowledgements
 
-A thank you to [Zoey](https://github.com/zoedsoupe/) for implementing both Next.js and
-Vite integrations as well as the CLI interface.
+A thank you to [Zoey](https://github.com/zoedsoupe/) for implementing both
+Next.js and Vite integrations as well as the CLI interface.
 
 ## License
 

package/dist/cli/index.js

@@ -6787,12 +6787,12 @@ var init_src = __esm(() => {
 });
 
 // package.json
-var name = "tidewave", version = "0.5.5", package_default;
+var name = "tidewave", version = "0.6.0", package_default;
 var init_package = __esm(() => {
   package_default = {
     name,
     version,
-    description: "Tidewave for JavaScript/Next.js",
+    description: "Tidewave for JavaScript (Next.js, TanStack, Vite)",
     keywords: [
       "typescript",
       "documentation",
@@ -6835,6 +6835,11 @@ var init_package = __esm(() => {
         import: "./dist/next-js/instrumentation.js",
         require: "./dist/next-js/instrumentation.js"
       },
+      "./tanstack": {
+        types: "./dist/tanstack.d.ts",
+        import: "./dist/tanstack.js",
+        require: "./dist/tanstack.js"
+      },
       "./package.json": "./package.json"
     },
     files: [
@@ -6845,7 +6850,7 @@ var init_package = __esm(() => {
     ],
     scripts: {
       dist: "bun run clean && bun run build:js && bun run build:types",
-      "build:js": "bun build --outdir dist --root src --external typescript --external child_process --external module --external @opentelemetry/api --external @opentelemetry/sdk-logs --external @opentelemetry/sdk-trace-base src/next-js/handler.ts src/next-js/instrumentation.ts src/vite-plugin.ts src/evaluation/eval_worker.ts src/cli/index.ts --target node",
+      "build:js": "bun build --outdir dist --root src --external typescript --external child_process --external module --external @opentelemetry/api --external @opentelemetry/sdk-logs --external @opentelemetry/sdk-trace-base src/next-js/handler.ts src/next-js/instrumentation.ts src/vite-plugin.ts src/tanstack.ts src/evaluation/eval_worker.ts src/cli/index.ts --target node",
       "build:types": "tsc -p tsconfig.declarations.json",
       dev: "bun run src/cli/index.ts",
       test: "bun test",
@@ -16156,23 +16161,31 @@ var init_mcp = __esm(() => {
   };
 });
 
-// src/logger/circular-buffer.ts
-class CircularBuffer {
-  buffer;
-  maxSize;
-  writeIndex = 0;
-  count = 0;
-  constructor(maxSize = 1024) {
-    this.buffer = new Array(maxSize);
-    this.maxSize = maxSize;
-  }
-  addLog(log) {
-    this.buffer[this.writeIndex] = log;
-    this.writeIndex = (this.writeIndex + 1) % this.maxSize;
-    this.count = Math.min(this.count + 1, this.maxSize);
-  }
-  getLogs(options) {
-    let logs = this.getAllLogs();
+// src/logger/tidewave-logger.ts
+import { appendFile, readFile } from "fs/promises";
+import * as path5 from "path";
+import * as os2 from "os";
+import * as crypto from "crypto";
+
+class TidewaveLogger {
+  logFilePath;
+  constructor() {
+    const cwd = process.cwd();
+    const digest = crypto.createHash("md5").update(cwd).digest("hex").slice(0, 16);
+    const tempDir = os2.tmpdir();
+    this.logFilePath = path5.join(tempDir, `${digest}.tidewave.ndjson`);
+  }
+  async addLog(log) {
+    const line = JSON.stringify(log) + `
+`;
+    try {
+      await appendFile(this.logFilePath, line, "utf8");
+    } catch (error) {
+      console.log("[Tidewave] failed to write to log file, error:", error);
+    }
+  }
+  async getLogs(options) {
+    let logs = await this.getAllLogs();
     if (options?.level) {
       const level = options.level.toUpperCase();
       logs = logs.filter((log) => log.severityText === level);
@@ -16190,31 +16203,26 @@ class CircularBuffer {
     }
     return logs;
   }
-  getAllLogs() {
-    if (this.count < this.maxSize) {
-      return this.buffer.slice(0, this.count).filter(Boolean);
+  async getAllLogs() {
+    try {
+      const content = await readFile(this.logFilePath, "utf8");
+      return content.split(`
+`).map((line) => {
+        try {
+          return JSON.parse(line);
+        } catch {
+          return null;
+        }
+      }).filter((log) => log !== null);
+    } catch (error) {
+      console.log("[Tidewave] failed to read from log file, error:", error);
+      return [];
     }
-    return [...this.buffer.slice(this.writeIndex), ...this.buffer.slice(0, this.writeIndex)].filter(Boolean);
-  }
-  getStats() {
-    return {
-      totalLogs: this.count,
-      bufferSize: this.maxSize,
-      bufferUsage: Math.min(this.count / this.maxSize * 100, 100).toFixed(1) + "%"
-    };
-  }
-  clear() {
-    this.buffer = new Array(this.maxSize);
-    this.writeIndex = 0;
-    this.count = 0;
   }
 }
-var circularBuffer;
-var init_circular_buffer = __esm(() => {
-  if (!globalThis.__tidewaveCircularBuffer) {
-    globalThis.__tidewaveCircularBuffer = new CircularBuffer(1024);
-  }
-  circularBuffer = globalThis.__tidewaveCircularBuffer;
+var tidewaveLogger;
+var init_tidewave_logger = __esm(() => {
+  tidewaveLogger = new TidewaveLogger;
 });
 
 // src/mcp.ts
@@ -16306,15 +16314,15 @@ async function handleGetSourcePath({ reference }) {
       isError: true
     };
   }
-  const { path: path5, format } = sourceResult;
+  const { path: path6, format } = sourceResult;
   return {
-    content: [{ type: "text", text: `${path5}(${format})` }],
+    content: [{ type: "text", text: `${path6}(${format})` }],
     isError: false
   };
 }
 async function handleGetLogs(args) {
   try {
-    const logs = circularBuffer.getLogs({
+    const logs = await tidewaveLogger.getLogs({
       tail: args.tail,
       grep: args.grep,
       level: args.level,
@@ -16370,7 +16378,7 @@ var init_mcp2 = __esm(() => {
   init_package();
   init_core();
   init_src();
-  init_circular_buffer();
+  init_tidewave_logger();
   ({
     docs: { mcp: docsMcp },
     source: { mcp: sourceMcp },
@@ -16991,7 +16999,7 @@ init_mcp2();
 
 // src/cli/install.ts
 import * as fs2 from "fs";
-import * as path5 from "path";
+import * as path6 from "path";
 import * as child_process from "child_process";
 import * as readline from "readline";
 async function handleInstall(options) {
@@ -17039,7 +17047,7 @@ The installer only works for Next.js projects
 }
 async function detectNextJsVersion(dir) {
   try {
-    const nextPackageJsonPath = path5.join(dir, "node_modules", "next", "package.json");
+    const nextPackageJsonPath = path6.join(dir, "node_modules", "next", "package.json");
     if (!fs2.existsSync(nextPackageJsonPath)) {
       return null;
     }
@@ -17059,13 +17067,13 @@ async function detectNextJsVersion(dir) {
   }
 }
 function detectPackageManager(dir) {
-  if (fs2.existsSync(path5.join(dir, "bun.lockb")))
+  if (fs2.existsSync(path6.join(dir, "bun.lockb")))
     return "bun";
-  if (fs2.existsSync(path5.join(dir, "pnpm-lock.yaml")))
+  if (fs2.existsSync(path6.join(dir, "pnpm-lock.yaml")))
     return "pnpm";
-  if (fs2.existsSync(path5.join(dir, "yarn.lock")))
+  if (fs2.existsSync(path6.join(dir, "yarn.lock")))
     return "yarn";
-  if (fs2.existsSync(path5.join(dir, "package-lock.json")))
+  if (fs2.existsSync(path6.join(dir, "package-lock.json")))
     return "npm";
   return "npm";
 }
@@ -17134,8 +17142,8 @@ Please install manually:
   }
 }
 async function createApiHandler(dir, dryRun) {
-  const apiDir = path5.join(dir, "pages", "api");
-  const handlerPath = path5.join(apiDir, "tidewave.ts");
+  const apiDir = path6.join(dir, "pages", "api");
+  const handlerPath = path6.join(apiDir, "tidewave.ts");
   const handlerContent = `import type { NextApiRequest, NextApiResponse } from 'next';
 
 export default async function handler(
@@ -17160,28 +17168,28 @@ export const config = {
 `;
   if (fs2.existsSync(handlerPath)) {
     if (dryRun) {
-      console.log(source_default.gray(`[DRY RUN] Would ask to overwrite: ${path5.relative(dir, handlerPath)}`));
+      console.log(source_default.gray(`[DRY RUN] Would ask to overwrite: ${path6.relative(dir, handlerPath)}`));
       return;
     }
     const shouldOverwrite = await promptUser(source_default.yellow(`
-⚠️ ${path5.relative(dir, handlerPath)} already exists. Overwrite? (Y/n): `));
+⚠️ ${path6.relative(dir, handlerPath)} already exists. Overwrite? (Y/n): `));
     if (!shouldOverwrite) {
-      console.log(source_default.gray(`⏭️ Skipping: ${path5.relative(dir, handlerPath)}`));
+      console.log(source_default.gray(`⏭️ Skipping: ${path6.relative(dir, handlerPath)}`));
       return;
     }
   }
   if (dryRun) {
-    console.log(source_default.gray(`[DRY RUN] Would create: ${path5.relative(dir, handlerPath)}`));
+    console.log(source_default.gray(`[DRY RUN] Would create: ${path6.relative(dir, handlerPath)}`));
     return;
   }
   fs2.mkdirSync(apiDir, { recursive: true });
   fs2.writeFileSync(handlerPath, handlerContent, "utf-8");
-  console.log(source_default.green(`✅ Created: ${path5.relative(dir, handlerPath)}`));
+  console.log(source_default.green(`✅ Created: ${path6.relative(dir, handlerPath)}`));
 }
 async function createMiddleware(dir, nextVersion, dryRun) {
   const isNext16Plus = nextVersion.major >= 16;
   const fileName = isNext16Plus ? "proxy.ts" : "middleware.ts";
-  const filePath = path5.join(dir, fileName);
+  const filePath = path6.join(dir, fileName);
   if (fs2.existsSync(filePath)) {
     console.log(source_default.yellow(`⏭️ ${fileName} already exists`));
     const content = fs2.readFileSync(filePath, "utf-8");
@@ -17245,9 +17253,9 @@ function printMiddlewareInstructions(isNext16Plus) {
   console.log();
 }
 async function createInstrumentation(dir, dryRun) {
-  const rootPath = path5.join(dir, "instrumentation.ts");
-  const srcPath = path5.join(dir, "src", "instrumentation.ts");
-  const hasSrcDir = fs2.existsSync(path5.join(dir, "src"));
+  const rootPath = path6.join(dir, "instrumentation.ts");
+  const srcPath = path6.join(dir, "src", "instrumentation.ts");
+  const hasSrcDir = fs2.existsSync(path6.join(dir, "src"));
   const instrumentationPath = hasSrcDir ? srcPath : rootPath;
   if (fs2.existsSync(rootPath) || fs2.existsSync(srcPath)) {
     const existingPath = fs2.existsSync(rootPath) ? rootPath : srcPath;
@@ -17296,14 +17304,14 @@ export async function register() {
 }
 `;
   if (dryRun) {
-    console.log(source_default.gray(`[DRY RUN] Would create: ${path5.relative(dir, instrumentationPath)}`));
+    console.log(source_default.gray(`[DRY RUN] Would create: ${path6.relative(dir, instrumentationPath)}`));
     return;
   }
   if (hasSrcDir) {
-    fs2.mkdirSync(path5.dirname(instrumentationPath), { recursive: true });
+    fs2.mkdirSync(path6.dirname(instrumentationPath), { recursive: true });
   }
   fs2.writeFileSync(instrumentationPath, instrumentationContent, "utf-8");
-  console.log(source_default.green(`✅ Created: ${path5.relative(dir, instrumentationPath)}`));
+  console.log(source_default.green(`✅ Created: ${path6.relative(dir, instrumentationPath)}`));
 }
 function printInstrumentationInstructions() {
   console.log(source_default.cyan(`  // Inside your register() function:
@@ -17322,9 +17330,9 @@ function printInstrumentationInstructions() {
 }
 
 // src/cli/index.ts
-function chdir(path6) {
+function chdir(path7) {
   try {
-    process.chdir(path6);
+    process.chdir(path7);
   } catch (e) {
     console.error(source_default.red(`Failed to apply given prefix: ${e}`));
   }

package/dist/logger/console-patch.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Patch console methods to write directly to the tidewave logger.
+ * This is called automatically when this module is imported.
+ */
+export declare function patchConsole(): void;

package/dist/logger/tidewave-log-record-processor.d.ts

@@ -2,7 +2,7 @@ import type { LogRecordProcessor, SdkLogRecord } from '@opentelemetry/sdk-logs';
 import type { Context } from '@opentelemetry/api';
 /**
  * Custom LogRecordProcessor that captures OpenTelemetry logger logs
- * and writes them directly to the circular buffer.
+ * and writes them directly to the tidewave logger.
  *
  * This is opt-in for users who want to capture actual logger logs
  * (not console.log, which is handled separately by console patching).

package/dist/logger/tidewave-logger.d.ts

@@ -0,0 +1,37 @@
+export interface StoredLogRecord {
+    timestamp: string;
+    severityText: string;
+    body: string;
+    attributes?: Record<string, unknown>;
+}
+export interface LogFilterOptions {
+    tail?: number;
+    grep?: string;
+    level?: string;
+    since?: string;
+}
+/**
+ * Tidewave log store.
+ *
+ * Storing logs in memory can be problematic, because some frameworks
+ * can use multiple execution contexts with isolated module loading
+ * and globals. In such circumstances, if we import the logger and
+ * write to it within the app, it may be a different logger instance
+ * from the one that the MCP server uses the get the logs. To avoid
+ * issues we persist logs in a NDJSON file, so it works across
+ * execution contexts.
+ */
+export declare class TidewaveLogger {
+    private logFilePath;
+    constructor();
+    /**
+     * Store a log entry.
+     */
+    addLog(log: StoredLogRecord): Promise<void>;
+    /**
+     * Get stored logs.
+     */
+    getLogs(options?: LogFilterOptions): Promise<StoredLogRecord[]>;
+    private getAllLogs;
+}
+export declare const tidewaveLogger: TidewaveLogger;

package/dist/logger/tidewave-span-processor.d.ts

@@ -3,7 +3,7 @@ import type { ReadableSpan } from '@opentelemetry/sdk-trace-base';
 import type { Span, Context } from '@opentelemetry/api';
 /**
  * Custom SpanProcessor that converts OpenTelemetry spans to logs and writes them
- * directly to the circular buffer.
+ * directly to the tidewave logger.
  * This is used to capture Next.js HTTP request/response spans and
  * make them available via the get_logs tool.
  */
@@ -14,7 +14,7 @@ export declare class TidewaveSpanProcessor implements SpanProcessor {
     onStart(_span: Span, _parentContext: Context): void;
     /**
      * Called when a span ends. This is where we convert the span to a log entry
-     * and write it directly to the circular buffer.
+     * and write it directly to the tidewave logger.
      */
     onEnd(span: ReadableSpan): void;
     /**