diff --git a/package.json b/package.json
index 1e8ee9c1..6aac8f68 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
"version": "0.0.0-alpha.97",
"private": true,
"scripts": {
- "dev": "cross-env turbo dev --filter '!graphql-debugger' --filter '!@graphql-debugger/landing-page-app' --filter '!@graphql-debugger/landing-page-server' --concurrency=30",
- "build": "turbo build",
+ "dev": "cross-env turbo dev --filter '!graphql-debugger' --filter '!@graphql-debugger/landing-page-app' --filter '!@graphql-debugger/landing-page-server' --filter '!@graphql-debugger/vscode-ui' --concurrency=30",
+ "build": "turbo build ",
"release": "cross-env DEBUG=\"@graphql-debugger:*\" node ./packages/utils/build/release.js",
"test:sequential": "pnpm recursive exec -- sh -c 'pnpm run test || (echo \"Tests failed!\" && exit 1)'",
"test": "turbo test",
diff --git a/packages/graphql-schema/src/index.ts b/packages/graphql-schema/src/index.ts
index 49e5bd09..ca4f2e1c 100644
--- a/packages/graphql-schema/src/index.ts
+++ b/packages/graphql-schema/src/index.ts
@@ -13,3 +13,5 @@ export function createServer({ client }: { client: DebuggerClient }) {
context: context({ client }),
});
}
+
+export { createSchema };
diff --git a/plugins/vscode/extension/.vscode/extensions.json b/plugins/vscode/extension/.vscode/extensions.json
new file mode 100644
index 00000000..ed906795
--- /dev/null
+++ b/plugins/vscode/extension/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+ "recommendations": [
+ "dbaeumer.vscode-eslint",
+ "ms-vscode.extension-test-runner"
+ ]
+}
diff --git a/plugins/vscode/extension/.vscode/launch.json b/plugins/vscode/extension/.vscode/launch.json
new file mode 100644
index 00000000..ba6ff76c
--- /dev/null
+++ b/plugins/vscode/extension/.vscode/launch.json
@@ -0,0 +1,13 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Run Extension",
+ "type": "extensionHost",
+ "request": "launch",
+ "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+ "outFiles": ["${workspaceFolder}/out/**/*.js"],
+ "preLaunchTask": "${defaultBuildTask}"
+ }
+ ]
+}
diff --git a/plugins/vscode/extension/.vscode/settings.json b/plugins/vscode/extension/.vscode/settings.json
new file mode 100644
index 00000000..0d55a330
--- /dev/null
+++ b/plugins/vscode/extension/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+ "files.exclude": {
+ "out": false
+ },
+ "search.exclude": {
+ "out": true
+ },
+ "typescript.tsc.autoDetect": "off"
+}
diff --git a/plugins/vscode/extension/.vscode/tasks.json b/plugins/vscode/extension/.vscode/tasks.json
new file mode 100644
index 00000000..34edf970
--- /dev/null
+++ b/plugins/vscode/extension/.vscode/tasks.json
@@ -0,0 +1,18 @@
+{
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "type": "npm",
+ "script": "watch",
+ "problemMatcher": "$tsc-watch",
+ "isBackground": true,
+ "presentation": {
+ "reveal": "never"
+ },
+ "group": {
+ "kind": "build",
+ "isDefault": true
+ }
+ }
+ ]
+}
diff --git a/plugins/vscode/extension/.vscodeignore b/plugins/vscode/extension/.vscodeignore
new file mode 100644
index 00000000..72aa0fe2
--- /dev/null
+++ b/plugins/vscode/extension/.vscodeignore
@@ -0,0 +1,11 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
+**/.vscode-test.*
diff --git a/plugins/vscode/extension/README.md b/plugins/vscode/extension/README.md
new file mode 100644
index 00000000..b7059ef4
--- /dev/null
+++ b/plugins/vscode/extension/README.md
@@ -0,0 +1,13 @@
+# @graphql-debugger/vscode-extension
+
+- [graphql-debugger.com](http://www.graphql-debugger.com)
+
+[](https://badge.fury.io/js/@graphql-debugger%2Fvscode-extension) [](https://opensource.org/licenses/MIT)
+
+## About
+
+VSCode extension for GraphQL Debugger. Download the extension from the VSCode Marketplace.
+
+## License
+
+MIT - Rocket Connect - https://github.com/rocket-connect
diff --git a/plugins/vscode/extension/package.json b/plugins/vscode/extension/package.json
new file mode 100644
index 00000000..2ccd3aa9
--- /dev/null
+++ b/plugins/vscode/extension/package.json
@@ -0,0 +1,68 @@
+{
+ "name": "@graphql-debugger/vscode-extension",
+ "displayName": "GraphQL Debugger",
+ "description": "Debug your GraphQL server",
+ "engines": {
+ "vscode": "^1.86.0"
+ },
+ "categories": [
+ "Other"
+ ],
+ "activationEvents": [],
+ "version": "0.0.0-alpha.97",
+ "main": "./out/extension.js",
+ "files": [
+ "out"
+ ],
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/rocket-connect/graphql-debugger.git"
+ },
+ "homepage": "https://github.com/rocket-connect/graphql-debugger#readme",
+ "contributes": {
+ "commands": [
+ {
+ "command": "graphql-debugger.openPanel",
+ "title": "Open GraphQL Debugger"
+ }
+ ],
+ "menus": {
+ "editor/title": [
+ {
+ "when": "resourceLangId == graphql",
+ "command": "graphql-debugger.openPanel",
+ "group": "navigation"
+ }
+ ]
+ }
+ },
+ "scripts": {
+ "vscode:prepublish": "npm run compile",
+ "build": "tsc -p ./ && npx ts-node ./src/print-schema-for-debugging.ts",
+ "watch": "tsc -watch -p ./",
+ "pretest": "npm run compile && npm run lint",
+ "lint": "eslint src --ext ts",
+ "test": "vscode-test"
+ },
+ "peerDependencies": {
+ "graphql": "^16.0.0 || ^17.0.0"
+ },
+ "dependencies": {
+ "@graphql-debugger/vscode-ui": "workspace:^",
+ "@graphql-debugger/adapter-proxy": "workspace:^",
+ "@graphql-debugger/client": "workspace:^",
+ "@graphql-debugger/trace-schema": "workspace:^",
+ "@graphql-debugger/utils": "workspace:^",
+ "@graphql-debugger/graphql-schema": "workspace:^",
+ "@graphql-tools/schema": "10.0.2",
+ "@graphql-tools/utils": "10.0.13"
+ },
+ "devDependencies": {
+ "@types/vscode": "1.86.0",
+ "@vscode/test-cli": "0.0.4",
+ "@vscode/test-electron": "2.3.9",
+ "typescript": "5.3.3",
+ "ts-node": "10.9.2"
+ }
+}
diff --git a/plugins/vscode/extension/src/extension.ts b/plugins/vscode/extension/src/extension.ts
new file mode 100644
index 00000000..1746b08f
--- /dev/null
+++ b/plugins/vscode/extension/src/extension.ts
@@ -0,0 +1,129 @@
+import { ProxyAdapter } from "@graphql-debugger/adapter-proxy";
+import { traceSchema } from "@graphql-debugger/trace-schema";
+import { hashSchema } from "@graphql-debugger/utils";
+
+import fs from "fs";
+import { buildSchema } from "graphql";
+import * as vscode from "vscode";
+
+export function activate(context: vscode.ExtensionContext) {
+ const adapter = new ProxyAdapter();
+
+ const disposable = vscode.commands.registerCommand(
+ "graphql-debugger.openPanel",
+ async () => {
+ const panel = vscode.window.createWebviewPanel(
+ "graphqlDebugger",
+ "GraphQL Debugger",
+ vscode.ViewColumn.Beside,
+ {
+ enableScripts: true,
+ localResourceRoots: [
+ vscode.Uri.parse("http://localhost:16686"),
+ vscode.Uri.joinPath(
+ context.extensionUri,
+ "node_modules",
+ "@graphql-debugger",
+ "vscode-ui",
+ "build",
+ ),
+ ],
+ },
+ );
+
+ const editor = vscode.window.activeTextEditor;
+
+ if (editor) {
+ const document = await vscode.workspace.openTextDocument(
+ editor.document.uri,
+ );
+
+ const text = document.getText();
+ const schema = buildSchema(text);
+
+ const tracedSchema = traceSchema({ schema, adapter });
+ const hash = hashSchema(tracedSchema);
+ let schemaid: string | undefined = undefined;
+
+ try {
+ const debuggerSchema = await adapter.schema.findFirst({
+ where: {
+ hash,
+ },
+ });
+
+ schemaid = debuggerSchema?.id;
+ } catch (e) {
+ console.error(e);
+ vscode.window.showInformationMessage(`Error finding schema: ${e}`);
+ }
+
+ if (!schemaid) {
+ vscode.window.showInformationMessage("Schema not found.");
+ }
+
+ panel.webview.html = getWebviewContent(
+ context,
+ panel.webview,
+ schemaid as string,
+ );
+ }
+ },
+ );
+
+ context.subscriptions.push(disposable);
+}
+
+function getWebviewContent(
+ context: vscode.ExtensionContext,
+ webview: vscode.Webview,
+ schemaId: string,
+) {
+ const indexPath = vscode.Uri.joinPath(
+ context.extensionUri,
+ "node_modules",
+ "@graphql-debugger",
+ "vscode-ui",
+ "build",
+ "index.html",
+ );
+ let html = fs.readFileSync(indexPath.fsPath, "utf8");
+
+ html = html.replace(/(href|src)="([^"]*)"/g, (match, p1, p2) => {
+ const assetPath = vscode.Uri.joinPath(
+ context.extensionUri,
+ "node_modules",
+ "@graphql-debugger",
+ "vscode-ui",
+ "build",
+ p2,
+ );
+ const assetUri = webview.asWebviewUri(assetPath);
+ return `${p1}="${assetUri}"`;
+ });
+
+ const nonce = getNonce();
+
+ const scriptToSetSchemaId = ``;
+
+ html = html.replace(
+ /
/,
+ `
`,
+ );
+
+ html = html.replace("", `${scriptToSetSchemaId}`);
+
+ return html;
+}
+
+function getNonce() {
+ let text = "";
+ const possible =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+ for (let i = 0; i < 32; i++) {
+ text += possible.charAt(Math.floor(Math.random() * possible.length));
+ }
+ return text;
+}
+
+export function deactivate() {}
diff --git a/plugins/vscode/extension/src/print-schema-for-debugging.ts b/plugins/vscode/extension/src/print-schema-for-debugging.ts
new file mode 100644
index 00000000..69429300
--- /dev/null
+++ b/plugins/vscode/extension/src/print-schema-for-debugging.ts
@@ -0,0 +1,28 @@
+import { DebuggerClient } from "@graphql-debugger/client";
+import { createSchema } from "@graphql-debugger/graphql-schema";
+import { traceSchema } from "@graphql-debugger/trace-schema";
+
+import fs from "fs";
+import { printSchema } from "graphql";
+import path from "path";
+
+const printPath = path.join(__dirname, "../", "out/", "schema.gql");
+
+// Prints the development schema in this package for dev usage
+// Run `pnpm run dev` at the root of the monorepo to run debugger in debug mode
+// Run the development version of the extension using F5 or the "Run Extension" command
+// Open this schema file and it will trigger the extension
+async function printSchemaForDebugging() {
+ const client = new DebuggerClient();
+ const { schema } = createSchema({ client });
+
+ const tracedSchema = traceSchema({ schema, adapter: client.adapter });
+
+ const printed = printSchema(tracedSchema);
+
+ await fs.promises.writeFile(printPath, printed);
+
+ process.exit(0);
+}
+
+printSchemaForDebugging();
diff --git a/plugins/vscode/extension/tsconfig.json b/plugins/vscode/extension/tsconfig.json
new file mode 100644
index 00000000..07651fee
--- /dev/null
+++ b/plugins/vscode/extension/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "extends": "@tsconfig/node18/tsconfig.json",
+ "compilerOptions": {
+ "module": "Node16",
+ "target": "ES2022",
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "outDir": "out",
+ "declarationMap": true,
+ "declaration": true,
+ "rootDir": "./src/",
+ },
+ "exclude": ["tests/"],
+ "include": ["src/**/*"],
+}
diff --git a/plugins/vscode/extension/vsc-extension-quickstart.md b/plugins/vscode/extension/vsc-extension-quickstart.md
new file mode 100644
index 00000000..e69de29b
diff --git a/plugins/vscode/ui/README.md b/plugins/vscode/ui/README.md
new file mode 100644
index 00000000..38ac85a4
--- /dev/null
+++ b/plugins/vscode/ui/README.md
@@ -0,0 +1,13 @@
+# @graphql-debugger/vscode-ui
+
+[](https://badge.fury.io/js/@graphql-debugger%2F/vscode-ui) [](https://opensource.org/licenses/MIT)
+
+[graphql-debugger.com](http://www.graphql-debugger.com)
+
+## About
+
+This is the user interface for the GraphQL Debugger VSCode Extension.
+
+## License
+
+MIT - Rocket Connect - https://github.com/rocket-connect
diff --git a/plugins/vscode/ui/package.json b/plugins/vscode/ui/package.json
new file mode 100644
index 00000000..446f1c20
--- /dev/null
+++ b/plugins/vscode/ui/package.json
@@ -0,0 +1,46 @@
+{
+ "name": "@graphql-debugger/vscode-ui",
+ "version": "0.0.0-alpha.97",
+ "main": "./src/index.ts",
+ "types": "./src/index.ts",
+ "files": [
+ "build",
+ "src",
+ "public"
+ ],
+ "scripts": {
+ "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+ "dev": "cross-env NODE_ENV=development webpack serve",
+ "test": "jest"
+ },
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/rocket-connect/graphql-debugger.git"
+ },
+ "homepage": "https://github.com/rocket-connect/graphql-debugger#readme",
+ "peerDependencies": {
+ "graphql": "^16.0.0 || ^17.0.0"
+ },
+ "dependencies": {
+ "@graphql-debugger/adapter-proxy": "workspace:^",
+ "@graphql-debugger/utils": "workspace:^",
+ "@graphql-debugger/client": "workspace:^",
+ "@graphql-debugger/ui": "workspace:^",
+ "@fontsource/roboto": "5.0.8",
+ "@tanstack/react-query": "5.13.4",
+ "clsx": "2.0.0",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "react-router-dom": "6.21.2",
+ "tailwind-merge": "2.2.0",
+ "zustand": "4.5.0"
+ },
+ "devDependencies": {
+ "@graphql-debugger/types": "workspace:^"
+ },
+ "engines": {
+ "node": ">=18",
+ "pnpm": ">=8"
+ }
+}
diff --git a/plugins/vscode/ui/postcss.config.js b/plugins/vscode/ui/postcss.config.js
new file mode 100644
index 00000000..12a703d9
--- /dev/null
+++ b/plugins/vscode/ui/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/plugins/vscode/ui/public/.gitkeep b/plugins/vscode/ui/public/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/plugins/vscode/ui/src/app.tsx b/plugins/vscode/ui/src/app.tsx
new file mode 100644
index 00000000..e1822194
--- /dev/null
+++ b/plugins/vscode/ui/src/app.tsx
@@ -0,0 +1,34 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { Home } from "./components/home";
+import { ClientProvider } from "./context/client";
+import { ConfigProvider } from "./context/config";
+import { SchemasProvider } from "./context/schemas";
+import { useTheme } from "./hooks/useTheme";
+
+export function App() {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false,
+ staleTime: 100_000,
+ networkMode: "offlineFirst",
+ },
+ },
+ });
+ useTheme();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/plugins/vscode/ui/src/components/editor.tsx b/plugins/vscode/ui/src/components/editor.tsx
new file mode 100644
index 00000000..27e8ed3f
--- /dev/null
+++ b/plugins/vscode/ui/src/components/editor.tsx
@@ -0,0 +1,38 @@
+import { Query } from "@graphql-debugger/ui/src/components/trace/editor/query";
+import { Variables } from "@graphql-debugger/ui/src/components/trace/editor/variables";
+
+import { useQuery } from "@tanstack/react-query";
+import { useContext } from "react";
+
+import { ClientContext } from "../context/client";
+
+export function Editor(props: React.PropsWithChildren<{ traceId?: string }>) {
+ const { client } = useContext(ClientContext);
+
+ const { data: trace } = useQuery({
+ queryKey: ["singleTrace", props.traceId],
+ queryFn: async () => {
+ if (!props.traceId) {
+ return [];
+ }
+
+ const trace = await client.trace.findMany({
+ where: {
+ id: props.traceId,
+ },
+ includeRootSpan: true,
+ });
+
+ return trace;
+ },
+ select: (data) => data[0],
+ networkMode: "always",
+ });
+
+ return (
+
+
+
+
+ );
+}
diff --git a/plugins/vscode/ui/src/components/home.tsx b/plugins/vscode/ui/src/components/home.tsx
new file mode 100644
index 00000000..d3583c1a
--- /dev/null
+++ b/plugins/vscode/ui/src/components/home.tsx
@@ -0,0 +1,35 @@
+import { useContext, useEffect } from "react";
+
+import { SchemasContext } from "../context/schemas";
+import { Trace } from "./trace";
+
+export function Home() {
+ const schemaId = localStorage.getItem("SCHEMA_ID");
+ const schemaContext = useContext(SchemasContext);
+
+ useEffect(() => {
+ if (!schemaContext) {
+ return;
+ }
+
+ if (schemaId) {
+ const schema = schemaContext.schemas.find(
+ (schema) => schema.id === schemaId,
+ );
+ if (schema) {
+ schemaContext.setSelectedSchema(schema);
+ }
+ }
+ }, [schemaContext, schemaId]);
+
+ return (
+
+ );
+}
diff --git a/plugins/vscode/ui/src/components/schema-traces.tsx b/plugins/vscode/ui/src/components/schema-traces.tsx
new file mode 100644
index 00000000..0d68d86d
--- /dev/null
+++ b/plugins/vscode/ui/src/components/schema-traces.tsx
@@ -0,0 +1,114 @@
+import { Spinner } from "@graphql-debugger/ui/src/components/utils/spinner";
+import {
+ getTraceStart,
+ isTraceError,
+ sumTraceTime,
+} from "@graphql-debugger/utils";
+
+import { useQuery } from "@tanstack/react-query";
+import React, { useContext } from "react";
+
+import { ClientContext } from "../context/client";
+
+export function SchemaTraces(
+ props: React.PropsWithChildren<{
+ schemaId: string;
+ traceId?: string;
+ setTraceId: (id: string) => void;
+ }>,
+) {
+ const { client } = useContext(ClientContext);
+
+ const { data: traces, isLoading } = useQuery({
+ queryKey: ["traces", props.schemaId, props.traceId],
+ queryFn: async () => {
+ const traces = await client.trace.findMany({
+ where: {
+ schemaId: props.schemaId,
+ },
+ includeRootSpan: true,
+ includeSpans: true,
+ });
+
+ return traces;
+ },
+ });
+
+ return (
+
+
+
+
Traces
+
List of the latest GraphQL queries.
+
+
+
+
+
+ {isLoading ? (
+
+
+
+ ) : (
+ <>
+ {traces?.length === 0 ? (
+
+ ) : (
+
+
+
+ | Name |
+ Duration |
+ Start |
+
+
+
+
+ {traces?.map((trace) => {
+ const startTimeUnixNano = getTraceStart(trace);
+ const traceDurationUnixNano =
+ trace && sumTraceTime(trace);
+
+ const traceDurationSIUnits =
+ traceDurationUnixNano?.toSIUnits();
+
+ const { value, unit } = traceDurationSIUnits;
+
+ const isError = isTraceError(trace);
+
+ return (
+ props.setTraceId(trace.id)}
+ data-traceid={trace?.id}
+ key={trace.id}
+ className={`border-b-2 border-b-accent text-neutral hover:cursor-pointer`}
+ >
+ |
+ {trace.rootSpan?.name}
+ |
+ {`${value.toFixed(
+ 2,
+ )} ${unit}`} |
+
+ {startTimeUnixNano.formatUnixNanoTimestamp()}
+ |
+
+ );
+ })}
+
+
+ )}
+
+ )}
+
+
+
+ );
+}
diff --git a/plugins/vscode/ui/src/components/span.tsx b/plugins/vscode/ui/src/components/span.tsx
new file mode 100644
index 00000000..b22f774f
--- /dev/null
+++ b/plugins/vscode/ui/src/components/span.tsx
@@ -0,0 +1,87 @@
+import { UnixNanoTimeStamp } from "@graphql-debugger/time";
+import { cn } from "@graphql-debugger/ui/src/utils/cn";
+import { RenderTree } from "@graphql-debugger/ui/src/utils/create-tree-data";
+import { isSpanError } from "@graphql-debugger/utils";
+
+export function Span({
+ data,
+ minTimestamp,
+ maxTimestamp,
+}: {
+ data: RenderTree;
+ minTimestamp: UnixNanoTimeStamp;
+ maxTimestamp: UnixNanoTimeStamp;
+}) {
+ const durationNano = UnixNanoTimeStamp.fromString(data.durationNano);
+ const startTimeUnixNano = UnixNanoTimeStamp.fromString(
+ data.startTimeUnixNano,
+ );
+
+ const { width, offset } = durationNano.calculateWidthAndOffset(
+ startTimeUnixNano,
+ minTimestamp,
+ maxTimestamp,
+ );
+
+ const { value, unit } = durationNano.toSIUnits();
+
+ const displyInfo = (
+
+
+ {data.name}
+
+ {" - "}
+
+ {Number(value).toFixed(2)} {unit}
+
+ {data.isForeign && (
+
+ {" "}
+ - (unknown)
+
+ )}
+
+ );
+
+ return (
+
+
+
+
+ {Array.isArray(data.children)
+ ? data.children.map((child) => (
+
+ ))
+ : null}
+
+
+ );
+}
diff --git a/plugins/vscode/ui/src/components/trace-viewer.tsx b/plugins/vscode/ui/src/components/trace-viewer.tsx
new file mode 100644
index 00000000..ae6cd473
--- /dev/null
+++ b/plugins/vscode/ui/src/components/trace-viewer.tsx
@@ -0,0 +1,45 @@
+import { UnixNanoTimeStamp } from "@graphql-debugger/time";
+import type { Span as TSpan, Trace } from "@graphql-debugger/types";
+import { createTreeData } from "@graphql-debugger/ui/src/utils/create-tree-data";
+
+import { Span } from "./span";
+
+function TraceView({ id, spans }: { id?: string; spans: TSpan[] }) {
+ const treeData = createTreeData(spans);
+
+ const minTimestamp = UnixNanoTimeStamp.earliest(
+ spans.map((t) => UnixNanoTimeStamp.fromString(t.startTimeUnixNano)),
+ );
+ const maxTimestamp = UnixNanoTimeStamp.latest(
+ spans.map((t) => UnixNanoTimeStamp.fromString(t.endTimeUnixNano)),
+ );
+
+ return (
+
+ {treeData.map((treeItem) => (
+
+ ))}
+
+ );
+}
+
+export function TraceViewer({ trace }: { trace?: Trace }) {
+ const spans = trace?.spans || [];
+
+ return (
+
+ {trace?.rootSpan ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/plugins/vscode/ui/src/components/trace.tsx b/plugins/vscode/ui/src/components/trace.tsx
new file mode 100644
index 00000000..ee5430e8
--- /dev/null
+++ b/plugins/vscode/ui/src/components/trace.tsx
@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import React, { useContext } from "react";
+
+import { ClientContext } from "../context/client";
+import { Editor } from "./editor";
+import { SchemaTraces } from "./schema-traces";
+import { TraceViewer } from "./trace-viewer";
+
+export function Trace(
+ props: React.PropsWithChildren<{
+ schemaId: string;
+ }>,
+) {
+ const { client } = useContext(ClientContext);
+ const [traceId, setTraceId] = React.useState
();
+
+ const { data: trace } = useQuery({
+ queryKey: ["singleTrace", props.schemaId, traceId],
+ queryFn: async () => {
+ if (!props.schemaId && !traceId) {
+ return [];
+ }
+
+ const trace = await client.trace.findMany({
+ where: {
+ id: traceId,
+ schemaId: props.schemaId,
+ },
+ includeRootSpan: true,
+ includeSpans: true,
+ });
+
+ return trace;
+ },
+ select: (data) => data[0],
+ networkMode: "always",
+ });
+
+ return (
+
+
+
+
+
+ setTraceId(id)}
+ />
+
+
+