Add license attribution dialog with full dependency listing

Author: Edwinexd

.gitignore

@@ -2,6 +2,9 @@
 
 # dependencies
 /node_modules
+
+# generated
+/public/licenses.json
 /.pnp
 .pnp.js
 
@@ -35,6 +38,7 @@ scripts/*
 !scripts/generate-language.ts
 !scripts/extract-oracle.ts
 !scripts/generate-erd.ts
+!scripts/generate-licenses.ts
 !scripts/hooks/
 
 data/*

package.json

@@ -40,7 +40,7 @@
   "scripts": {
     "dev": "npm-run-all copy-sqljs start-vite",
     "start": "npm-run-all copy-sqljs start-vite",
-    "build": "npm-run-all copy-sqljs build-vite",
+    "build": "npm-run-all copy-sqljs generate-licenses build-vite",
     "preview": "vite preview",
     "copy-sqljs": "copyfiles -f node_modules/sql.js/dist/sql-wasm.wasm public/dist/sql.js/",
     "start-vite": "vite",
@@ -50,6 +50,7 @@
     "decrypt-oracle": "tsx scripts/decrypt-oracle.ts",
     "encrypt-oracle": "tsx scripts/encrypt-oracle.ts",
     "generate-erd": "tsx scripts/generate-erd.ts",
+    "generate-licenses": "tsx scripts/generate-licenses.ts",
     "generate-all": "tsx scripts/generate-language.ts --all --plain && tsx scripts/generate-erd.ts --all"
   },
   "eslintConfig": {

scripts/generate-licenses.ts

@@ -0,0 +1,76 @@
+/**
+ * Generates a JSON file with license information for all production dependencies.
+ * Output: public/licenses.json
+ */
+
+import { readFileSync, writeFileSync, existsSync } from "fs";
+import { join, dirname } from "path";
+
+const ROOT = join(dirname(new URL(import.meta.url).pathname), "..");
+const NODE_MODULES = join(ROOT, "node_modules");
+
+interface LicenseEntry {
+  name: string;
+  version: string;
+  license: string;
+  repository?: string;
+  author?: string;
+}
+
+// Read the root package.json to get production dependencies
+const rootPkg = JSON.parse(readFileSync(join(ROOT, "package.json"), "utf-8"));
+const prodDeps = Object.keys(rootPkg.dependencies || {});
+
+function resolvePackage(name: string): LicenseEntry | null {
+  const pkgDir = join(NODE_MODULES, name);
+  const pkgJsonPath = join(pkgDir, "package.json");
+  if (!existsSync(pkgJsonPath)) return null;
+
+  const pkg = JSON.parse(readFileSync(pkgJsonPath, "utf-8"));
+  const license = typeof pkg.license === "string"
+    ? pkg.license
+    : typeof pkg.license === "object"
+      ? pkg.license.type
+      : Array.isArray(pkg.licenses)
+        ? pkg.licenses.map((l: { type: string }) => l.type).join(", ")
+        : "Unknown";
+
+  const repo = typeof pkg.repository === "string"
+    ? pkg.repository
+    : typeof pkg.repository === "object"
+      ? pkg.repository.url
+      : undefined;
+
+  const cleanRepo = repo
+    ?.replace(/^git\+/, "")
+    ?.replace(/^git:\/\//, "https://")
+    ?.replace(/\.git$/, "")
+    ?.replace(/^ssh:\/\/git@github\.com/, "https://github.com");
+
+  const author = typeof pkg.author === "string"
+    ? pkg.author
+    : typeof pkg.author === "object"
+      ? pkg.author.name
+      : undefined;
+
+  return {
+    name: pkg.name,
+    version: pkg.version,
+    license,
+    repository: cleanRepo,
+    author,
+  };
+}
+
+const entries: LicenseEntry[] = [];
+
+for (const dep of prodDeps) {
+  const entry = resolvePackage(dep);
+  if (entry) entries.push(entry);
+}
+
+// Sort alphabetically
+entries.sort((a, b) => a.name.localeCompare(b.name));
+
+writeFileSync(join(ROOT, "public", "licenses.json"), JSON.stringify(entries, null, 2));
+console.log(`Generated licenses.json with ${entries.length} dependencies`);

src/App.tsx

@@ -48,6 +48,7 @@ import sha256 from "crypto-js/sha256";
 import { format as formatFns } from "date-fns";
 import { toPng } from "html-to-image";
 import PrivacyNoticeToggle from "./PrivacyNoticeToggle";
+import LicenseDialog from "./LicenseDialog";
 import ThemeToggle from "./ThemeToggle";
 import useTheme from "./useTheme";
 import { isCorrectResult, Result } from "./utils";
@@ -1132,7 +1133,7 @@ function App() {
           <div className="flex flex-wrap justify-center items-center gap-x-4 gap-y-2 text-gray-600 dark:text-gray-400">
             <span>Copyright &copy; <a href="https://github.com/Edwinexd" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">Edwin Sundberg</a> {new Date().getFullYear()}</span>
             <span>-</span>
-            <a href="https://github.com/Edwinexd/sql-validator?tab=GPL-3.0-1-ov-file" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">GPL-3.0</a>
+            <LicenseDialog />
             <a href="https://github.com/Edwinexd/sql-validator/issues" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">Report Issue</a>
             <ChangelogDialog />
             <PrivacyNoticeToggle></PrivacyNoticeToggle>

src/LicenseDialog.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { X } from "lucide-react";
+
+interface LicenseEntry {
+  name: string;
+  version: string;
+  license: string;
+  repository?: string;
+  author?: string;
+}
+
+const PROJECT_LICENSES = [
+  {
+    name: "sql-validator (core)",
+    license: "GPL-3.0",
+    description: "The core application is licensed under the GNU General Public License v3.0.",
+    url: "https://github.com/Edwinexd/sql-validator?tab=GPL-3.0-1-ov-file",
+  },
+  {
+    name: "ra-engine (Relational Algebra)",
+    license: "BSL-1.1",
+    description: "The relational algebra engine (src/ra-engine/) is licensed under the Business Source License 1.1, converting to GPL-3.0 on 2035-03-20.",
+    url: "https://github.com/Edwinexd/sql-validator/blob/master/src/ra-engine/LICENSE.md",
+  },
+];
+
+export default function LicenseDialog() {
+  const [open, setOpen] = useState(false);
+  const [deps, setDeps] = useState<LicenseEntry[]>([]);
+
+  useEffect(() => {
+    if (open && deps.length === 0) {
+      fetch("/licenses.json")
+        .then(r => r.json())
+        .then(setDeps)
+        .catch(() => setDeps([]));
+    }
+  }, [open, deps.length]);
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="text-blue-600 dark:text-blue-400 hover:underline"
+      >
+        Licenses
+      </button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto p-0">
+          <div className="sticky top-0 bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-700 px-6 py-4 flex items-center justify-between z-10">
+            <h2 className="text-xl font-semibold">Licenses</h2>
+            <button onClick={() => setOpen(false)} className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          <div className="px-6 py-4 space-y-6">
+            <div>
+              <h3 className="text-lg font-semibold mb-3">Project Licenses</h3>
+              <div className="space-y-3">
+                {PROJECT_LICENSES.map(l => (
+                  <div key={l.name} className="border border-gray-200 dark:border-slate-700 rounded-md p-3">
+                    <div className="flex items-center justify-between">
+                      <span className="font-medium">{l.name}</span>
+                      <a href={l.url} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-600 dark:text-blue-400 hover:underline">{l.license}</a>
+                    </div>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{l.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold mb-3">Third-Party Dependencies</h3>
+              {deps.length === 0 ? (
+                <p className="text-sm text-gray-500">Loading...</p>
+              ) : (
+                <div className="border border-gray-200 dark:border-slate-700 rounded-md overflow-hidden">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="bg-gray-50 dark:bg-slate-800 text-left">
+                        <th className="px-3 py-2 font-medium">Package</th>
+                        <th className="px-3 py-2 font-medium">Version</th>
+                        <th className="px-3 py-2 font-medium">License</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {deps.map(dep => (
+                        <tr key={dep.name} className="border-t border-gray-100 dark:border-slate-700/50">
+                          <td className="px-3 py-1.5">
+                            {dep.repository ? (
+                              <a href={dep.repository} target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">{dep.name}</a>
+                            ) : dep.name}
+                          </td>
+                          <td className="px-3 py-1.5 text-gray-500 dark:text-gray-400">{dep.version}</td>
+                          <td className="px-3 py-1.5">{dep.license}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}