add raw query editor and response table

frontend/src/lib/utils.ts

@@ -1,24 +1,44 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
-type Valuable<T> = { [K in keyof T as T[K] extends null | undefined ? never : K]: T[K] }
+type Valuable<T> = {
+  [K in keyof T as T[K] extends null | undefined ? never : K]: T[K];
+};
 
 export function getValuable<T extends object, V = Valuable<T>>(obj: T): V {
   return Object.fromEntries(
     Object.entries(obj).filter(
-      ([, v]) => !((typeof v === 'string' && !v.length) || v === null || typeof v === 'undefined')
-    )
-  ) as V
+      ([, v]) =>
+        !(
+          (typeof v === "string" && !v.length) ||
+          v === null ||
+          typeof v === "undefined"
+        ),
+    ),
+  ) as V;
 }
 
 export function prettyBytes(bytes: number): string {
-  const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB']
-  if (bytes === 0) return '0 B'
-  const i = Math.floor(Math.log(bytes) / Math.log(1024))
-  const size = bytes / Math.pow(1024, i)
-  return `${size.toFixed(2)} ${units[i]}`
+  const units = ["B", "kB", "MB", "GB", "TB", "PB"];
+  if (bytes === 0) return "0 B";
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const size = bytes / 1024 ** i;
+  return `${size.toFixed(2)} ${units[i]}`;
+}
+
+export function isUrl(value: string) {
+  return z.string().url().safeParse(value).success;
+}
+
+const imageUrlRegex = new RegExp(
+  /(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|svg|webp|bmp))/i,
+);
+
+export function isImageUrl(value: string) {
+  return value.match(imageUrlRegex);
 }