@lensjs/core 1.0.1

package/src/ui/src/views/queries/QueryDetails.tsx

@@ -0,0 +1,58 @@
+import { Link } from "react-router-dom";
+import DetailPanel from "../../components/DetailPanel";
+import TabbedDataViewer from "../../components/tabs/TabbedDataViewer";
+import type { QueryEntry } from "../../types";
+import { getRoutesPaths } from "../../router/routes";
+import { useConfig } from "../../utils/context";
+import { formatDateWithTimeAgo } from "../../utils/date";
+import QueryViewer from "../../components/queryFormatters/QueryViewer";
+
+export default function QueryDetails({ query }: { query: QueryEntry }) {
+  const detailItems = [
+    query.lens_entry_id && {
+      label: "Request",
+      value: (
+        <Link
+          to={`${getRoutesPaths(useConfig()).REQUESTS}/${query.lens_entry_id}`}
+          className="text-blue-600 hover:underline font-semibold"
+        >
+          View Request
+        </Link>
+      ),
+      className: "text-gray-900 dark:text-gray-100",
+    },
+    {
+      label: "Time",
+      value: <span>{formatDateWithTimeAgo(query.created_at)}</span>,
+      className: "text-gray-900 dark:text-gray-100",
+    },
+    {
+      label: "Duration",
+      value: <span>{query.data.duration}</span>,
+      className: "text-gray-900 dark:text-gray-100",
+    },
+    {
+      label: "Provider",
+      value: <span>{query.data.type}</span>,
+      className: "text-gray-900 dark:text-gray-100",
+    },
+  ].filter((item) => !!item);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {" "}
+      <DetailPanel title="Request Details" items={detailItems} />
+      <TabbedDataViewer
+        tabs={[
+          {
+            id: "query",
+            data: ["query"],
+            label: "Query",
+            content: <QueryViewer queryPayload={query.data} />,
+          },
+        ]}
+        defaultActiveTab="query"
+      />
+    </div>
+  );
+}

package/src/ui/src/views/queries/QueryTable.tsx

@@ -0,0 +1,21 @@
+import { LoadMoreButton } from "../../components/LoadMore";
+import Table from "../../components/Table";
+import type { HasMoreType, QueryTableRow } from "../../types";
+import getColumns from "./columns";
+
+const QueriesTable = ({
+  hasMoreObject,
+}: {
+  hasMoreObject: HasMoreType<QueryTableRow>;
+}) => {
+  return (
+    <div className="w-full">
+      <div className="overflow-x-auto">
+        <Table columns={getColumns()} data={hasMoreObject.data} />
+      </div>
+      <LoadMoreButton paginatedPage={hasMoreObject} />
+    </div>
+  );
+};
+
+export default QueriesTable;

package/src/ui/src/views/queries/columns.tsx

@@ -0,0 +1,83 @@
+import { CircleArrowRightIcon } from "lucide-react";
+import type { JSX } from "react";
+import { Link } from "react-router-dom";
+import type { TableColumn } from "../../components/Table";
+import { getRoutesPaths } from "../../router/routes";
+import type { QueryTableRow } from "../../types";
+import { useConfig } from "../../utils/context";
+import { humanDifferentDate } from "../../utils/date";
+
+function highlightSQL(query: string): JSX.Element {
+  return (
+    <span className="text-red-600 dark:text-red-400 font-mono">{query}</span>
+  );
+}
+
+const getColumns = (): TableColumn<QueryTableRow>[] => {
+  const paths = getRoutesPaths(useConfig());
+
+  return [
+    {
+      name: "Query",
+      render: (row) => (
+        <div className="col-span-5">
+          <code
+            className="text-sm font-mono text-slate-800 dark:text-slate-300 leading-relaxed line-clamp-1"
+            title={row.data.query}
+          >
+            {highlightSQL(row.data.query)}
+          </code>
+        </div>
+      ),
+    },
+    {
+      name: "Duration",
+      render: (row) => (
+        <div className="col-span-1 text-right">
+          <span className="text-sm text-slate-600 dark:text-slate-400 font-mono">
+            {row.data.duration}
+          </span>
+        </div>
+      ),
+    },
+    {
+      name: "Provider",
+      render: (row) => {
+        return (
+          <div className="col-span-2 text-right">
+            <span className="text-sm text-slate-600 dark:text-slate-400 font-mono">
+              {row.data.type}
+            </span>
+          </div>
+        );
+      },
+    },
+    {
+      name: "Happened",
+      render: (row) => {
+        const { label, exact } = humanDifferentDate(row.data.createdAt);
+        return (
+          <span className="text-nowrap" title={exact}>
+            {label}
+          </span>
+        );
+      },
+      position: "end",
+      class: "min-w-32",
+    },
+    {
+      name: "Actions",
+      render: (row) => (
+        <Link
+          to={`${paths.QUERIES}/${row.id}`}
+          className="transition-colors duration-100 hover:text-white"
+        >
+          <CircleArrowRightIcon size={20} />
+        </Link>
+      ),
+      position: "end",
+    },
+  ];
+};
+
+export default getColumns;

package/src/ui/src/views/requests/BasicRequestDetails.tsx

@@ -0,0 +1,82 @@
+import { useMemo } from "react";
+import DetailPanel, { type DetailItem } from "../../components/DetailPanel";
+import type { OneRequest } from "../../types";
+import { formatDateWithTimeAgo} from "../../utils/date";
+import MethodBadge from "../../components/MethodBadge";
+import StatusCode from "../../components/StatusCode";
+
+const BasicRequestDetails = ({ request }: { request: OneRequest }) => {
+  const formattedTime = useMemo(() => {
+    return formatDateWithTimeAgo(request?.data?.createdAt);
+  }, [request?.data?.createdAt]);
+
+  if (!request || !request.data) {
+    return (
+      <DetailPanel
+        title="Request Details"
+        items={[]}
+        emptyMessage="No request data available"
+      />
+    );
+  }
+
+  const getHostname = () => {
+    return request?.data?.headers?.host || "Unknown";
+  };
+
+  const detailItems = useMemo(
+    (): DetailItem[] => [
+      {
+        label: "Time",
+        value: formattedTime,
+        className: "text-gray-900 dark:text-gray-100",
+      },
+      {
+        label: "Hostname",
+        value: getHostname(),
+        className: "text-gray-900 dark:text-gray-100 font-mono",
+      },
+      {
+        label: "Method",
+        value: request.data.method ? (
+          <MethodBadge method={request.data.method} />
+        ) : (
+          "Unknown"
+        ),
+      },
+      {
+        label: "Request ID",
+        value: request.data.id || "N/A",
+        className: "text-gray-700 dark:text-gray-300 font-mono text-sm",
+      },
+      {
+        label: "Path",
+        value: request.data.path || "N/A",
+        className: "text-gray-900 dark:text-gray-100 font-mono",
+      },
+      {
+        label: "Status",
+        value: request.data.status ? (
+          <StatusCode status={request.data.status} />
+        ) : (
+          "N/A"
+        ),
+      },
+      {
+        label: "Duration",
+        value: request.data.duration || "N/A",
+        className: "text-gray-900 dark:text-gray-100 font-medium",
+      },
+      {
+        label: "IP Address",
+        value: request.data.ip || "N/A",
+        className: "text-gray-900 dark:text-gray-100 font-mono",
+      },
+    ],
+    [request.data, formattedTime],
+  );
+
+  return <DetailPanel title="Request Details" items={detailItems} />;
+};
+
+export default BasicRequestDetails;

package/src/ui/src/views/requests/RequestDetails.tsx

@@ -0,0 +1,70 @@
+import DetailPanel from "../../components/DetailPanel";
+import TabbedDataViewer from "../../components/tabs/TabbedDataViewer";
+import type { OneRequest } from "../../types";
+import BasicRequestDetails from "./BasicRequestDetails";
+
+const RequestDetails = ({ request }: { request: OneRequest }) => {
+  const dynamicTabs = [
+    {
+      id: "payload",
+      label: "Payload",
+      data: request.data.body,
+    },
+    {
+      id: "headers",
+      label: "Headers",
+      data: request.data.headers,
+    },
+  ];
+
+  const responseTabs = [
+    {
+      id: "response-body",
+      label: "Body",
+      data: request.data.response.json,
+    },
+    {
+      id: "response-headers",
+      label: "Headers",
+      data: request.data.response.headers,
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-3">
+      <BasicRequestDetails request={request} />
+      {request.data.user && (
+        <DetailPanel
+          title="User"
+          items={[
+            {
+              label: "ID",
+              value: request?.data?.user?.id,
+            },
+            {
+              label: "Email",
+              value: request?.data?.user?.email,
+            },
+            {
+              label: "Name",
+              value: request?.data?.user?.name,
+            },
+          ]}
+        />
+      )}
+
+      <TabbedDataViewer
+        tabs={dynamicTabs}
+        title="Request Data"
+        defaultActiveTab="payload"
+      />
+      <TabbedDataViewer
+        tabs={responseTabs}
+        title="Response Data"
+        defaultActiveTab="response-body"
+      />
+    </div>
+  );
+};
+
+export default RequestDetails;

package/src/ui/src/views/requests/RequetsTable.tsx

@@ -0,0 +1,19 @@
+import { LoadMoreButton } from "../../components/LoadMore";
+import Table from "../../components/Table";
+import type { HasMoreType, RequestTableRow } from "../../types";
+import getColumns from "./columns";
+
+const RequestTable = ({
+  hasMoreObject,
+}: {
+  hasMoreObject: HasMoreType<RequestTableRow>;
+}) => {
+  return (
+    <div>
+      <Table columns={getColumns()} data={hasMoreObject.data} />
+      <LoadMoreButton paginatedPage={hasMoreObject} />
+    </div>
+  );
+};
+
+export default RequestTable;

package/src/ui/src/views/requests/columns.tsx

@@ -0,0 +1,62 @@
+import { CircleArrowRightIcon } from "lucide-react";
+import MethodBadge from "../../components/MethodBadge";
+import StatusCode from "../../components/StatusCode";
+import { getRoutesPaths } from "../../router/routes";
+import type { RequestTableRow } from "../../types";
+import { useConfig } from "../../utils/context";
+import { humanDifferentDate } from "../../utils/date";
+import type { TableColumn } from "../../components/Table";
+import { Link } from "react-router-dom";
+
+const getColumns = (): TableColumn<RequestTableRow>[] => {
+  const paths = getRoutesPaths(useConfig());
+
+  return [
+    {
+      name: "Verb",
+      render: (row) => <MethodBadge method={row.data.method} />,
+    },
+    {
+      name: "Path",
+      render: (row) => (
+        <Link
+          to={`${paths.REQUESTS}/${row.id}`}
+          className="line-clamp-2 max-w-80 min-w-40 text-base text-blue-600 dark:text-neutral-200 hover:underline"
+        >
+          {row.data.path}
+        </Link>
+      ),
+    },
+    {
+      name: "Status",
+      render: (row) => <StatusCode status={row.data.status} />,
+    },
+    {
+      name: "Duration",
+      value: (row) => row.data.duration,
+    },
+    {
+      name: "Happened",
+      render: (row) => {
+        const { label, exact } = humanDifferentDate(row.data.createdAt);
+        return <span title={exact}>{label}</span>;
+      },
+      position: "end",
+      class: "min-w-32",
+    },
+    {
+      name: "Actions",
+      render: (row) => (
+        <Link
+          to={`${paths.REQUESTS}/${row.id}`}
+          className="transition-colors duration-100 hover:text-white"
+        >
+          <CircleArrowRightIcon size={20} />
+        </Link>
+      ),
+      position: "end",
+    },
+  ];
+};
+
+export default getColumns;

package/src/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/ui/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/src/ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/src/ui/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/src/ui/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  base: "./",
+  plugins: [react(), tailwindcss()],
+});

package/src/utils/event_emitter.ts

@@ -0,0 +1,13 @@
+import { AsyncResource } from "node:async_hooks";
+import { QueryEntry } from "../types";
+import Emittery from "emittery";
+
+interface CoreEvents {
+  query: { query: QueryEntry["data"] };
+}
+
+export const createEmittery = <T extends Record<string, any>>() => {
+  return new Emittery<T>();
+};
+export const lensResource = new AsyncResource("lens-emitter");
+export const lensEmitter = new Emittery<CoreEvents>();

package/src/utils/index.ts

@@ -0,0 +1,176 @@
+import { DateTime } from "luxon";
+import { format, SqlLanguage } from "sql-formatter";
+import { randomUUID } from "crypto";
+import { fileURLToPath } from "url";
+import path from "path/posix";
+
+export const generateRandomUuid = () => {
+  return randomUUID();
+};
+
+type Bindings = any[] | Record<string, any>;
+
+/**
+ * Interpolates SQL query placeholders with actual values.
+ * Supports:
+ *   - ? (array-based)
+ *   - $1, $name (numeric or named)
+ *   - :name (named)
+ */
+export function interpolateQuery(query: string, bindings: Bindings): string {
+  // Helper to convert a value into a safe SQL literal
+  const formatValue = (value: any): string => {
+    if (value === null || value === undefined) return "NULL";
+    if (typeof value === "string") return `'${value.replace(/'/g, "''")}'`;
+    if (value instanceof DateTime) return `'${value.toISO()}'`;
+    if (value instanceof Date) return `'${value.toISOString()}'`;
+    if (Array.isArray(value))
+      return value
+        .map((v) => (typeof v === "string" ? `'${v.replace(/'/g, "''")}'` : v))
+        .join(", ");
+    if (typeof value === "object")
+      return `'${JSON.stringify(value).replace(/'/g, "''")}'`;
+    return value.toString();
+  };
+
+  // Case 1: Array-based bindings for '?' placeholders
+  if (Array.isArray(bindings)) {
+    let i = 0;
+    return query.replace(/\?/g, () => {
+      if (i >= bindings.length)
+        throw new Error("Not enough bindings for placeholders");
+      return formatValue(bindings[i++]);
+    });
+  }
+
+  // Case 2: Named or numeric placeholders ($1, $name, :name)
+  return query.replace(/(\$|\:)(\w+)/g, (match, prefix, keyOrIndex) => {
+    let value;
+
+    if (prefix === "$" && /^\d+$/.test(keyOrIndex)) {
+      // Numeric placeholder: $1, $2, ...
+      const index = parseInt(keyOrIndex, 10) - 1;
+      const keys = Object.keys(bindings);
+      if (index < 0 || index >= keys.length)
+        throw new Error(`Missing binding for ${match}`);
+      // @ts-expect-error
+      value = bindings[keys[index]];
+    } else {
+      // Named placeholder: $name or :name
+      if (!(keyOrIndex in bindings))
+        throw new Error(`Missing binding for ${match}`);
+      value = bindings[keyOrIndex];
+    }
+
+    return formatValue(value);
+  });
+}
+
+export const formatSqlQuery = (query: string, language: SqlLanguage) => {
+  return format(query, {
+    language,
+    dataTypeCase: "upper",
+    keywordCase: "upper",
+    functionCase: "upper",
+  });
+};
+
+export function now() {
+  return DateTime.now().setZone("utc");
+}
+
+export function nowISO() {
+  return now().toISO({ includeOffset: false }) as string;
+}
+
+export function sqlDateTime(dateTime?: DateTime | null) {
+  const time = dateTime ?? now();
+
+  return time.toSQL({ includeOffset: false });
+}
+
+export function convertToUTC(dateTime: string) {
+  return DateTime.fromISO(dateTime)
+    .setZone("utc")
+    .toISO({ includeOffset: false }) as string;
+}
+
+export function getMeta(metaUrl?: string): {
+  __filename: string;
+  __dirname: string;
+} {
+  const isESM = typeof __dirname === "undefined";
+
+  if (isESM) {
+    if (!metaUrl) {
+      throw new Error("In ESM, you must pass import.meta.url to getMeta()");
+    }
+
+    const __filename = fileURLToPath(metaUrl);
+    const __dirname = path.dirname(__filename);
+    return { __filename, __dirname };
+  } else {
+    // @ts-ignore - available only in CJS
+    return { __filename, __dirname };
+  }
+}
+
+export function isStaticFile(params: string[]) {
+  return params.includes("assets");
+}
+
+export function stripBeforeAssetsPath(url: string) {
+  const match = url.match(/assets.*/);
+  return match ? match[0] : url;
+}
+
+export function prepareIgnoredPaths(path: string, ignoredPaths: RegExp[]) {
+  const normalizedPath = path.replace(/^\/+|\/+$/g, "");
+  ignoredPaths = [
+    ...ignoredPaths,
+    new RegExp(`^\/?${normalizedPath}(\/|$)`),
+    /^\/?lens-config$/,
+    /^\/\.well-known\//,
+  ];
+
+  return { ignoredPaths, normalizedPath };
+}
+
+export function shouldIgnoreCurrentPath(
+  path: string,
+  ignoredPaths: RegExp[],
+  onlyPaths: RegExp[],
+) {
+  if (onlyPaths.length > 0) {
+    return !onlyPaths.some((pattern) => pattern.test(path));
+  }
+
+  return ignoredPaths.some((pattern) => pattern.test(path));
+}
+
+export function prettyHrTime(
+  hrtime: [number, number],
+  verbose = false,
+): string {
+  const seconds = hrtime[0];
+  const nanoseconds = hrtime[1];
+  const ms = seconds * 1000 + nanoseconds / 1e6;
+
+  if (verbose) {
+    if (seconds > 60) {
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = seconds % 60;
+      return `${minutes}m ${remainingSeconds}s`;
+    }
+    if (seconds >= 1) {
+      return `${seconds}.${Math.floor(nanoseconds / 1e7)}s`;
+    }
+    return `${ms.toFixed(3)} ms`;
+  }
+
+  if (ms < 1000) {
+    return `${ms.toFixed(0)} ms`;
+  }
+
+  return `${(ms / 1000).toFixed(1)} s`;
+}

package/src/watchers/index.ts

@@ -0,0 +1,2 @@
+export { default as QueryWatcher } from "./query_watcher";
+export { default as RequestWatcher } from "./request_watcher";

package/src/watchers/query_watcher.ts

@@ -0,0 +1,15 @@
+import { getStore } from "../context/context";
+import Watcher from "../core/watcher";
+import { WatcherTypeEnum, type QueryEntry } from "../types/index";
+
+export default class QueryWatcher extends Watcher {
+  name = WatcherTypeEnum.QUERY;
+
+  async log(entry: QueryEntry) {
+    await getStore().save({
+      type: this.name,
+      data: entry.data,
+      requestId: entry.requestId ?? "",
+    });
+  }
+}