2 |
3 | # [psql.sh](https://psql.sh) - browser native PostgreSQL command line client
4 |
5 | This project gives you a browser-native, psql-like experience for working with a Postgres database, without having to install anything.
6 |
7 | Check out the demo video:
8 |
9 | https://www.loom.com/share/17743bb0cc55445a84e6138a43a2557f?sid=2ba5854b-1ecd-4e86-9a4c-b76b997379b6
10 |
11 | ## Start
12 | First, pick a dataset to work with. You can start with an empty database or choose one of these sample datasets:
13 |
14 | - **Chinook**. A sample database representing a digital media store.
15 | - **Pokemon**. A dataset with a single table containing information about Pokemon.
16 | - **Netflix**. A dataset with a single table containing information about Netflix shows.
17 | - **pgrag**. A demo database for the 
33 |
38 | ({
5 | links: [httpBatchLink({ url: "/api/trpc" })],
6 | });
7 |
--------------------------------------------------------------------------------
/client/lib/app.ts:
--------------------------------------------------------------------------------
1 | import { Pool, DatabaseError } from "@neondatabase/serverless";
2 | import * as Sentry from "@sentry/browser";
3 |
4 | import { TermWrapper } from "./termWrapper";
5 | import { client } from "./api";
6 | import { performDbQuery } from "./dbQuery";
7 | import { Color } from "./color";
8 | import { analytics } from "./analytics";
9 | import { InputManager } from "./inputManager";
10 | import { Select } from "./select";
11 |
12 | function isConnectionError(err: unknown) {
13 | if (err instanceof Error && "code" in err) {
14 | return err.code === "XX000";
15 | }
16 |
17 | return false;
18 | }
19 |
20 | export enum AppMode {
21 | Normal = "normal",
22 | Templates = "templates",
23 | Embed = "embed",
24 | }
25 |
26 | export class App {
27 | termWrapper: TermWrapper;
28 | inputManager: InputManager;
29 | sourceBranch?: string;
30 |
31 | constructor(
32 | private appMode: AppMode,
33 | private appNode: HTMLElement,
34 | ) {
35 | const inputNode = document.createElement("textarea");
36 | inputNode.classList.add("terminal-input-hidden");
37 | inputNode.setAttribute("tabindex", "-1");
38 | appNode.addEventListener("click", () => {
39 | const selection = document.getSelection();
40 | if (
41 | selection &&
42 | selection.rangeCount > 0 &&
43 | !selection?.getRangeAt(0)?.collapsed
44 | ) {
45 | return;
46 | }
47 | setTimeout(() => {
48 | inputNode.focus();
49 | }, 1);
50 | });
51 | document.body.addEventListener("keydown", (event) => {
52 | const selection = document.getSelection();
53 | if (
54 | selection &&
55 | selection.rangeCount > 0 &&
56 | !selection?.getRangeAt(0)?.collapsed &&
57 | !(event.ctrlKey || event.metaKey)
58 | ) {
59 | inputNode.focus();
60 | }
61 | return;
62 | });
63 | appNode.appendChild(inputNode);
64 | this.inputManager = new InputManager(inputNode);
65 | this.termWrapper = new TermWrapper(appNode, this.inputManager);
66 | document.getElementById("info")!.addEventListener("click", () => {
67 | this.showBanner();
68 | });
69 | document
70 | .getElementById("back")!
71 | .addEventListener("click", () => this.hideBanner());
72 | document.addEventListener("keydown", (event: KeyboardEvent) => {
73 | if (event.key === "Escape") {
74 | this.hideBanner();
75 | }
76 | });
77 | }
78 |
79 | async startConnection() {
80 | const { termWrapper } = this;
81 | termWrapper.hideCursor();
82 | termWrapper.addLine();
83 | termWrapper.writeln(`Starting the database connection...`);
84 | termWrapper.addLine();
85 | let connectionString: string;
86 | try {
87 | const response = await client.issueDatabase.mutate({
88 | sourceBranch: this.sourceBranch,
89 | });
90 | connectionString = response.connectionString;
91 | } catch (error) {
92 | const message = (error as Error).message;
93 | termWrapper.writeln(`ERROR: ${message}`);
94 | analytics.track("database_issue_error", { message });
95 | console.log("Error:", error);
96 | return;
97 | }
98 | const pgPool = new Pool({
99 | connectionString,
100 | });
101 | pgPool.on("error", (err) => {
102 | console.log("Unexpected error on idle client", err);
103 | });
104 | analytics.track("database_issued");
105 | try {
106 | const pgClient = await pgPool.connect();
107 | pgClient.on("error", (err) => {
108 | console.log("Unexpected error on client", err);
109 | });
110 | const { rows } = await pgClient.query("show server_version");
111 | if (rows.length === 0) {
112 | termWrapper.writeln("Something went wrong. Please try again.");
113 | }
114 | termWrapper.write(`psql (Neon, server `);
115 | termWrapper.write(rows[0].server_version, Color.Green);
116 | termWrapper.writeln(`)`);
117 | pgClient.release();
118 | } catch (error) {
119 | const message = (error as Error).message;
120 | termWrapper.writeln(`ERROR: ${message}`);
121 | analytics.track("database_connection_error", { message });
122 | console.log("Error:", error);
123 | return;
124 | }
125 | analytics.track("database_connected");
126 | termWrapper.writeln('Type "\\?" for help.');
127 | termWrapper.writeln(
128 | 'You can also type "\\ai <your query description>" to generate SQL with AI.',
129 | );
130 | termWrapper.addLine();
131 | let isTransaction = false;
132 | const performQuery = async (query: string) => {
133 | termWrapper.hideCursor();
134 | let limit = 1000;
135 | for await (const output of performDbQuery(
136 | pgPool,
137 | query,
138 | (isTransactionIn) => {
139 | isTransaction = isTransactionIn;
140 | },
141 | )) {
142 | termWrapper.writeln(output);
143 | if (limit-- <= 0) {
144 | termWrapper.writeln(
145 | "Result is too large. Showing only the first 1000 lines.",
146 | );
147 | break;
148 | }
149 | }
150 | };
151 | while (true) {
152 | termWrapper.startPromptMode(`neondb=${isTransaction ? "*" : ""}> `);
153 | termWrapper.showCursor();
154 | const line = await termWrapper.waitLine();
155 | analytics.track("query_started");
156 | termWrapper.stopPromptMode();
157 | termWrapper.addLine();
158 | try {
159 | if (line === "\\q") {
160 | this.showBanner();
161 | } else if (line.startsWith("\\ai ")) {
162 | analytics.track("ai_query_started");
163 | const generatedSql = await client.textToSql.mutate({
164 | text: line.slice(4),
165 | });
166 | if (generatedSql.startsWith("SQL: ")) {
167 | const sql = generatedSql.slice(5);
168 | termWrapper.addLine();
169 | termWrapper.write("Generated SQL: `");
170 | termWrapper.writeChunks(termWrapper.wrapSql(sql));
171 | termWrapper.writeln("`");
172 | termWrapper.addLine();
173 | await performQuery(sql);
174 | analytics.track("ai_query_finished");
175 | } else {
176 | if (generatedSql.startsWith("ERROR: ")) {
177 | termWrapper.writeln(generatedSql, Color.Red);
178 | // limit too big payload
179 | analytics.track("ai_query_error", {
180 | error: generatedSql.slice(0, 100),
181 | });
182 | } else {
183 | termWrapper.writeln(
184 | "Sorry, we were unable to successfully convert your prompt to SQL.",
185 | );
186 | analytics.track("ai_query_error", { error: generatedSql });
187 | }
188 | }
189 | } else {
190 | await performQuery(line);
191 | analytics.track("query_finished");
192 | }
193 | } catch (error) {
194 | const pgError = error as DatabaseError;
195 | termWrapper.write("ERROR: ", Color.Red);
196 | termWrapper.writeln(pgError.message);
197 |
198 | if (pgError.hint) {
199 | termWrapper.write("HINT: ", Color.Yellow);
200 | termWrapper.writeln(pgError.hint);
201 | }
202 | analytics.track("query_error", {
203 | message: pgError.message,
204 | code: pgError.code,
205 | });
206 | if (isConnectionError(error)) {
207 | termWrapper.writeln("To start a new connection, press Enter");
208 | return;
209 | }
210 | if (!("code" in pgError)) {
211 | Sentry.captureException(error);
212 | }
213 | } finally {
214 | termWrapper.addLine();
215 | }
216 | }
217 | }
218 |
219 | async pickTemplate() {
220 | const templates = await client.listTemplates.query();
221 | const select = new Select(
222 | this.appNode,
223 | this.inputManager,
224 | templates.map(({ name, description }) => ({
225 | value: name,
226 | description,
227 | })),
228 | );
229 | const selectedTemplate = await select.pickOption();
230 | this.sourceBranch = templates.find(
231 | (template) => template.name === selectedTemplate.value,
232 | )?.branch;
233 | analytics.track("template_selected", { template: selectedTemplate.value });
234 | select.disable();
235 | }
236 |
237 | async start() {
238 | const { termWrapper, inputManager } = this;
239 | inputManager.init();
240 | termWrapper.init();
241 | if (this.appMode === AppMode.Templates) {
242 | termWrapper.writeln("Welcome to Neon! To start, select a dataset:");
243 | await this.pickTemplate();
244 | } else {
245 | termWrapper.write("Welcome to Neon! To start, press Enter");
246 | termWrapper.showCursor();
247 | await termWrapper.waitLine();
248 | }
249 |
250 | while (true) {
251 | analytics.track("new_connection");
252 | try {
253 | await this.startConnection();
254 | } catch (error) {
255 | Sentry.captureException(error);
256 | }
257 | await termWrapper.waitLine();
258 | }
259 | }
260 |
261 | showBanner() {
262 | analytics.track("info_banner_shown");
263 | document.body.classList.add("banner-visible");
264 | }
265 |
266 | hideBanner() {
267 | if (!document.body.classList.contains("banner-visible")) {
268 | return;
269 | }
270 | analytics.track("info_banner_hidden");
271 | document.body.classList.remove("banner-visible");
272 | this.inputManager.focus();
273 | }
274 | }
275 |
--------------------------------------------------------------------------------
/client/lib/color.ts:
--------------------------------------------------------------------------------
1 | export enum Color {
2 | Red = "#FF2B6A",
3 | Green = "#2BE5AD",
4 | LightGreen = "#8DF0D2",
5 | Yellow = "#FFD73A",
6 | }
7 |
8 | export class TextChunk {
9 | constructor(
10 | public text: string,
11 | public color?: Color,
12 | ) {}
13 |
14 | html() {
15 | return `${this.text}`;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/client/lib/dbQuery.ts:
--------------------------------------------------------------------------------
1 | import { Pool } from "@neondatabase/serverless";
2 | import * as psql from "psql-describe";
3 | import { formatOutput } from "./psql";
4 | import { analytics } from "./analytics";
5 |
6 | export async function* performDbQuery(
7 | pool: Pool,
8 | query: string,
9 | onIsTransaction: (isTransaction: boolean) => void,
10 | ) {
11 | const pgClient = await pool.connect();
12 | pgClient.on("error", (err) => {
13 | console.log("Unexpected error on client", err);
14 | });
15 | // deal with backslash describe commands
16 | if (query.startsWith("\\")) {
17 | let descriptiveText = "";
18 | const {
19 | rows: [database],
20 | } = await pgClient.query(`select current_database()`);
21 | const {
22 | rows: [serverVersionNum],
23 | } = await pgClient.query(`show server_version_num`);
24 | const {
25 | rows: [standardConformingStrings],
26 | } = await pgClient.query(`show standard_conforming_strings`);
27 |
28 | const { promise: describePromise } = psql.describe(
29 | query.replace(/;$/, ""),
30 | database.current_database,
31 | (sqlText) => pgClient.query({ text: sqlText, rowMode: "array" }),
32 | (item) => {
33 | analytics.track("bslash_command", { command: query });
34 | descriptiveText += psql.describeDataToString(item);
35 | },
36 | false,
37 | serverVersionNum.server_version_num,
38 | standardConformingStrings.standard_conforming_strings === "on",
39 | (id) => `https://neon.tech/docs/postgres/${id}`,
40 | );
41 |
42 | await describePromise;
43 | for (const line of descriptiveText.split("\n")) {
44 | yield line;
45 | }
46 | return;
47 | }
48 |
49 | const result = await pgClient.query({
50 | rowMode: "array",
51 | text: query,
52 | });
53 |
54 | const {
55 | rows: [isTx],
56 | } = await pgClient.query(
57 | "select now() = statement_timestamp() as is_not_transaction",
58 | );
59 | onIsTransaction(!isTx.is_not_transaction);
60 |
61 | const resultAsArray = Array.isArray(result) ? result : [result];
62 |
63 | for (let i = 0; i < resultAsArray.length; i++) {
64 | const resultBlock = resultAsArray[i];
65 | if (resultBlock.fields.length === 0) {
66 | yield resultBlock.command || "Query returned no results";
67 | continue;
68 | }
69 |
70 | for (const row of formatOutput(resultBlock)) {
71 | yield row;
72 | }
73 | if (i < resultAsArray.length - 1) {
74 | yield "";
75 | }
76 | }
77 |
78 | pgClient.release();
79 | }
80 |
--------------------------------------------------------------------------------
/client/lib/inputManager.ts:
--------------------------------------------------------------------------------
1 | type InputEventCb = {
2 | left: (cursorPosition: number) => void;
3 | right: (cursorPosition: number) => void;
4 | up: () => void;
5 | down: () => void;
6 | enter: (text: string) => void;
7 | inputChange: (text: string, cursorPosition: number) => void;
8 | };
9 |
10 | export class InputManager {
11 | cursorPosition = 0;
12 | private callbacks: {
13 | [K in keyof InputEventCb]?: InputEventCb[K][];
14 | } = {};
15 |
16 | constructor(private inputNode: HTMLTextAreaElement) {}
17 |
18 | trigger>(
19 | event: E,
20 | ...args: A
21 | ) {
22 | this.callbacks[event]?.forEach((cb: any) => cb(...args));
23 | }
24 |
25 | on(
26 | event: E,
27 | cb: (...args: Parameters) => void,
28 | ) {
29 | if (!this.callbacks[event]) {
30 | this.callbacks[event] = [];
31 | }
32 | this.callbacks[event]!.push(cb as any);
33 | }
34 |
35 | off(
36 | event: E,
37 | cb: (...args: Parameters) => void,
38 | ) {
39 | this.callbacks[event] = this.callbacks[event]?.filter(
40 | (callback) => callback !== cb,
41 | ) as any;
42 | }
43 |
44 | resetText(text: string) {
45 | this.inputNode.value = text;
46 | this.cursorPosition = text.length;
47 | this.inputNode.setSelectionRange(this.cursorPosition, this.cursorPosition);
48 | }
49 |
50 | focus() {
51 | this.inputNode.focus();
52 | }
53 |
54 | init() {
55 | this.inputNode.addEventListener("keydown", async (event) => {
56 | if (event.key === "ArrowLeft") {
57 | event.preventDefault();
58 | this.cursorPosition = Math.max(0, this.cursorPosition - 1);
59 | this.inputNode.setSelectionRange(
60 | this.cursorPosition,
61 | this.cursorPosition,
62 | );
63 | this.trigger("left", this.cursorPosition);
64 | } else if (event.key === "ArrowRight") {
65 | event.preventDefault();
66 | this.cursorPosition = Math.min(
67 | this.inputNode.value.length,
68 | this.cursorPosition + 1,
69 | );
70 | this.inputNode.setSelectionRange(
71 | this.cursorPosition,
72 | this.cursorPosition,
73 | );
74 | this.trigger("right", this.cursorPosition);
75 | } else if (event.key === "ArrowUp") {
76 | event.preventDefault();
77 | this.trigger("up");
78 | } else if (event.key === "ArrowDown") {
79 | event.preventDefault();
80 | this.trigger("down");
81 | }
82 | });
83 |
84 | // @ts-expect-error
85 | this.inputNode.addEventListener("input", async (event: InputEvent) => {
86 | event.preventDefault();
87 | if (event.inputType === "insertLineBreak") {
88 | this.trigger("enter", this.inputNode.value);
89 | } else if (event.inputType === "deleteContentBackward") {
90 | this.cursorPosition = Math.max(0, this.cursorPosition - 1);
91 | this.trigger("inputChange", this.inputNode.value, this.cursorPosition);
92 | } else if (
93 | event.inputType === "insertText" ||
94 | event.inputType === "insertCompositionText"
95 | ) {
96 | this.cursorPosition++;
97 | this.trigger("inputChange", this.inputNode.value, this.cursorPosition);
98 | }
99 | });
100 | this.inputNode.addEventListener("paste", async (event) => {
101 | event.preventDefault();
102 | const text = event.clipboardData?.getData("text");
103 | if (text) {
104 | this.inputNode.value =
105 | this.inputNode.value.slice(0, this.cursorPosition) +
106 | text +
107 | this.inputNode.value.slice(this.cursorPosition);
108 | this.cursorPosition += text.length;
109 | this.trigger("inputChange", this.inputNode.value, this.cursorPosition);
110 | }
111 | });
112 | this.inputNode.focus();
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/client/lib/psql.ts:
--------------------------------------------------------------------------------
1 | import { QueryArrayResult } from "@neondatabase/serverless";
2 | import { Table } from "./table";
3 |
4 | export const formatOutput = (result: QueryArrayResult) => {
5 | const table = new Table();
6 | for (const field of result.fields) {
7 | table.addColumn(field.name);
8 | }
9 | for (const row of result.rows) {
10 | const tableRow = table.addRow();
11 | for (const value of row) {
12 | tableRow.addCell(value);
13 | }
14 | }
15 | return table.print();
16 | };
17 |
--------------------------------------------------------------------------------
/client/lib/select.ts:
--------------------------------------------------------------------------------
1 | import { InputManager } from "./inputManager";
2 |
3 | export type SelectOption = {
4 | value: string;
5 | description?: string;
6 | };
7 |
8 | export class Select {
9 | currentIndex = 0;
10 | selectNode: HTMLElement;
11 | private onChoice?: (option: SelectOption) => void;
12 | private disabled = false;
13 |
14 | constructor(
15 | private appNode: HTMLElement,
16 | private inputManager: InputManager,
17 | private options: SelectOption[],
18 | ) {
19 | if (options.length === 0) {
20 | throw new Error("No options provided");
21 | }
22 | this.selectNode = document.createElement("div");
23 | this.selectNode.classList.add("select");
24 | this.appNode.appendChild(this.selectNode);
25 | }
26 |
27 | async pickOption() {
28 | this.selectNode.innerHTML = "";
29 | this.options.forEach((option, index) => {
30 | const optionNode = document.createElement("div");
31 | optionNode.classList.add("option");
32 | optionNode.dataset.index = index.toString();
33 | this.selectNode.appendChild(optionNode);
34 | const optionValueNode = document.createElement("div");
35 | optionValueNode.classList.add("option-value");
36 | optionValueNode.textContent = option.value;
37 | optionNode.appendChild(optionValueNode);
38 | if (option.description) {
39 | const optionDescriptionNode = document.createElement("div");
40 | optionDescriptionNode.classList.add("option-description");
41 | optionDescriptionNode.innerHTML = option.description;
42 | optionNode.appendChild(optionDescriptionNode);
43 | }
44 | const onOptionClick = () => {
45 | if (this.onChoice && !this.disabled) {
46 | this.currentIndex = index;
47 | this.render();
48 | this.onChoice(option);
49 | }
50 | };
51 | optionValueNode.addEventListener("click", onOptionClick);
52 | });
53 |
54 | this.registerHandlers();
55 | this.render();
56 | return new Promise((resolve) => {
57 | this.onChoice = (option) => {
58 | this.unregisterHandlers();
59 | resolve(option);
60 | };
61 | });
62 | }
63 |
64 | onUp = () => {
65 | if (this.currentIndex > 0) {
66 | this.currentIndex--;
67 | this.render();
68 | }
69 | };
70 |
71 | onDown = () => {
72 | if (this.currentIndex < this.options.length - 1) {
73 | this.currentIndex++;
74 | this.render();
75 | }
76 | };
77 |
78 | onEnter = () => {
79 | if (this.onChoice && !this.disabled) {
80 | this.onChoice(this.options[this.currentIndex]);
81 | }
82 | };
83 |
84 | registerHandlers() {
85 | this.inputManager.on("up", this.onUp);
86 | this.inputManager.on("down", this.onDown);
87 | this.inputManager.on("enter", this.onEnter);
88 | }
89 |
90 | unregisterHandlers() {
91 | this.inputManager.off("up", this.onUp);
92 | this.inputManager.off("down", this.onDown);
93 | this.inputManager.off("enter", this.onEnter);
94 | }
95 |
96 | render() {
97 | const options = this.selectNode.querySelectorAll(".option");
98 | options.forEach((option, index) => {
99 | if (index === this.currentIndex) {
100 | option.classList.add("option-selected");
101 | } else {
102 | option.classList.remove("option-selected");
103 | }
104 | });
105 | }
106 |
107 | destroy() {
108 | this.unregisterHandlers();
109 | this.selectNode.remove();
110 | }
111 |
112 | disable() {
113 | this.disabled = true;
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/client/lib/sentry.ts:
--------------------------------------------------------------------------------
1 | import * as Sentry from "@sentry/browser";
2 |
3 | Sentry.init({
4 | dsn: import.meta.env.VITE_SENTRY_DSN,
5 | integrations: [Sentry.browserTracingIntegration()],
6 | });
7 |
--------------------------------------------------------------------------------
/client/lib/table.ts:
--------------------------------------------------------------------------------
1 | const DEFAULT_MAX_WIDTH = 30;
2 | const APPROX_CHAR_WIDTH = 10;
3 |
4 | function getScreenWidth() {
5 | const width = window.innerWidth;
6 | return Math.floor(width / APPROX_CHAR_WIDTH);
7 | }
8 |
9 | function alignCenter(text: string, width: number) {
10 | const padding = Math.max(Math.floor((width - text.length) / 2), 1);
11 | return (
12 | " ".repeat(padding) +
13 | text +
14 | " ".repeat(padding) +
15 | (padding === (width - text.length) / 2 ? "" : " ")
16 | ).slice(0, width);
17 | }
18 |
19 | function alignLeft(text: string, width: number) {
20 | return (text + " ".repeat(Math.max(width - text.length, 1))).slice(0, width);
21 | }
22 |
23 | function alignRight(text: string, width: number) {
24 | return (" ".repeat(Math.max(width - text.length, 1)) + text).slice(0, width);
25 | }
26 |
27 | class Column {
28 | constructor(readonly title: string) {}
29 |
30 | width() {
31 | // +2 for padding
32 | return this.title.length + 2;
33 | }
34 | }
35 |
36 | class Cell {
37 | private strValue: string;
38 |
39 | constructor(private value: unknown) {
40 | this.strValue =
41 | typeof value === "string"
42 | ? value
43 | : value instanceof Date
44 | ? value.toISOString()
45 | : JSON.stringify(value);
46 |
47 | this.strValue = this.strValue.replace(/\n/g, " ");
48 | }
49 |
50 | width() {
51 | return this.strValue.length;
52 | }
53 |
54 | span(width: number) {
55 | return Math.ceil((this.strValue.length + 2) / width);
56 | }
57 |
58 | print(width: number) {
59 | return typeof this.value === "number"
60 | ? alignRight(this.strValue, width)
61 | : alignLeft(this.strValue, width);
62 | }
63 |
64 | getLine(index: number, width: number) {
65 | if (this.span(width) === 1) {
66 | if (index === 0) {
67 | return this.print(width);
68 | } else {
69 | return " ".repeat(width);
70 | }
71 | } else {
72 | return alignLeft(
73 | this.strValue.slice(index * width, (index + 1) * width),
74 | width,
75 | );
76 | }
77 | }
78 | }
79 |
80 | class Row {
81 | cells: Cell[] = [];
82 | }
83 |
84 | export class Table {
85 | private columns: Column[] = [];
86 | private rows: Row[] = [];
87 |
88 | addColumn(title: string) {
89 | this.columns.push(new Column(title));
90 | }
91 |
92 | addRow() {
93 | const row = new Row();
94 | this.rows.push(row);
95 | return {
96 | addCell: (value: unknown) => {
97 | const cell = new Cell(value);
98 | const index = row.cells.push(cell) - 1;
99 |
100 | if (!this.columns[index]) {
101 | this.columns[index] = new Column(`?column?`);
102 | }
103 | },
104 | };
105 | }
106 |
107 | *print() {
108 | const maxWidth = Math.max(
109 | DEFAULT_MAX_WIDTH,
110 | getScreenWidth() / this.columns.length - 1,
111 | );
112 | const widths = this.columns.map((column) =>
113 | Math.min(column.width(), maxWidth),
114 | );
115 | for (const row of this.rows) {
116 | for (let i = 0; i < row.cells.length; i++) {
117 | const cell = row.cells[i];
118 | widths[i] = Math.min(Math.max(widths[i], cell.width()), maxWidth);
119 | }
120 | }
121 | yield this.columns
122 | .map((column, idx) => alignCenter(column.title, widths[idx]))
123 | .join("|");
124 | yield this.columns.map((_, idx) => "-".repeat(widths[idx])).join("|");
125 | for (const row of this.rows) {
126 | let span = 1;
127 | let currentRow: string[] = [];
128 | for (let i = 0; i < row.cells.length; i++) {
129 | const width = widths[i];
130 | const cell = row.cells[i];
131 | span = Math.max(span, row.cells[i].span(width));
132 | currentRow.push(cell.getLine(0, width));
133 | }
134 | yield currentRow.join("|");
135 | for (let i = 1; i < span; i++) {
136 | currentRow = [];
137 | for (let j = 0; j < row.cells.length; j++) {
138 | currentRow.push(row.cells[j].getLine(i, widths[j]));
139 | }
140 | yield currentRow.join("|");
141 | }
142 | yield this.columns.map((_, idx) => "-".repeat(widths[idx])).join("|");
143 | }
144 | yield `(${this.rows.length} row${this.rows.length === 1 ? "" : "s"})`;
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/client/lib/termWrapper.ts:
--------------------------------------------------------------------------------
1 | import { Color, TextChunk } from "./color";
2 | import { InputManager } from "./inputManager";
3 |
4 | export class TermWrapper {
5 | private currentLine!: HTMLDivElement;
6 | private currentLineBuffer: TextChunk[] = [];
7 | private currentLinePrompt: string = "";
8 | private promptMode: boolean = false;
9 | private promptText = "";
10 | private history: string[] = [];
11 | private historyIndex = 0;
12 | private undoHistoryLine = "";
13 | private newLineListeners: ((line: string) => void)[] = [];
14 | private keywords: Set = new Set();
15 |
16 | constructor(
17 | private appNode: HTMLElement,
18 | private inputManager: InputManager,
19 | ) {}
20 |
21 | addLine() {
22 | this.inputManager.resetText("");
23 | const showCursor = this.currentLine?.classList.contains("cursor");
24 | if (showCursor) {
25 | this.hideCursor();
26 | }
27 | if (this.currentLine) {
28 | const br = document.createElement("br");
29 | this.appNode.appendChild(br);
30 | }
31 | this.currentLine = document.createElement("div");
32 | this.currentLine.classList.add("line");
33 | this.appNode.appendChild(this.currentLine);
34 | if (showCursor) {
35 | this.showCursor();
36 | }
37 | this.renderCurrentLine();
38 | this.appNode.scrollTop = this.appNode.scrollHeight;
39 | }
40 |
41 | renderCurrentPrompt() {
42 | this.currentLineBuffer = this.wrapSql(this.currentLinePrompt);
43 | this.renderCurrentLine();
44 | }
45 |
46 | renderCurrentLine() {
47 | this.currentLine.innerHTML = "";
48 | if (this.promptMode) {
49 | this.currentLine.textContent += this.promptText;
50 | }
51 | this.currentLine.innerHTML += this.currentLineBuffer
52 | .map((chunk) => chunk.html())
53 | .join("");
54 | this.appNode.style.setProperty(
55 | "--cursor-position",
56 | (
57 | this.inputManager.cursorPosition -
58 | 1 +
59 | (this.promptMode ? this.promptText.length - 1 : -1)
60 | ).toString(),
61 | );
62 | }
63 |
64 | init() {
65 | this.appNode.classList.add("terminal");
66 | this.addLine();
67 |
68 | this.inputManager.on("left", () => {
69 | if (this.promptMode) {
70 | this.renderCurrentLine();
71 | }
72 | });
73 | this.inputManager.on("right", () => {
74 | if (this.promptMode) {
75 | this;
76 | this.renderCurrentLine();
77 | }
78 | });
79 | this.inputManager.on("up", () => {
80 | if (this.promptMode && this.historyIndex > 0) {
81 | if (this.historyIndex === this.history.length) {
82 | this.undoHistoryLine = this.currentLinePrompt;
83 | }
84 | this.historyIndex--;
85 | this.currentLinePrompt = this.history[this.historyIndex];
86 | this.inputManager.resetText(this.currentLinePrompt);
87 | this.renderCurrentPrompt();
88 | }
89 | });
90 | this.inputManager.on("down", () => {
91 | if (this.promptMode && this.historyIndex < this.history.length) {
92 | this.historyIndex++;
93 | this.currentLinePrompt =
94 | this.historyIndex === this.history.length
95 | ? this.undoHistoryLine
96 | : this.history[this.historyIndex];
97 | this.inputManager.resetText(this.currentLinePrompt);
98 | this.renderCurrentPrompt();
99 | if (this.historyIndex === this.history.length) {
100 | this.undoHistoryLine = "";
101 | }
102 | }
103 | });
104 | this.inputManager.on("enter", () => {
105 | if (this.promptMode) {
106 | this.history.push(this.currentLinePrompt);
107 | this.historyIndex = this.history.length;
108 | this.undoHistoryLine = "";
109 | }
110 | this.newLineListeners.forEach((listener) =>
111 | listener(this.currentLinePrompt),
112 | );
113 | this.currentLineBuffer = [];
114 | this.currentLinePrompt = "";
115 | this.inputManager.resetText("");
116 | });
117 | this.inputManager.on("inputChange", (text) => {
118 | if (this.promptMode) {
119 | this.currentLinePrompt = text;
120 | this.renderCurrentPrompt();
121 | }
122 | });
123 | fetch("/keywords.json")
124 | .then((res) => res.json())
125 | .then(({ keywords }) => {
126 | this.keywords = new Set(keywords);
127 | });
128 | }
129 |
130 | startPromptMode(promptText: string = "") {
131 | this.promptText = promptText;
132 | this.promptMode = true;
133 | this.appNode.classList.add("prompt-mode");
134 | this.renderCurrentLine();
135 | }
136 |
137 | stopPromptMode() {
138 | this.promptMode = false;
139 | this.appNode.classList.remove("prompt-mode");
140 | }
141 |
142 | writeChunk(chunk: TextChunk) {
143 | this.currentLinePrompt += chunk.text;
144 | this.currentLineBuffer.push(chunk);
145 | this.inputManager.resetText(this.currentLinePrompt);
146 | this.renderCurrentLine();
147 | }
148 |
149 | writeChunks(chunks: TextChunk[]) {
150 | chunks.forEach((chunk) => this.writeChunk(chunk));
151 | }
152 |
153 | write(text: string, color?: Color) {
154 | const chunk = new TextChunk(text, color);
155 | this.writeChunk(chunk);
156 | }
157 |
158 | writeln(text: string, color?: Color) {
159 | this.write(text, color);
160 | this.currentLineBuffer = [];
161 | this.currentLinePrompt = "";
162 | this.addLine();
163 | }
164 |
165 | public showCursor() {
166 | this.currentLine.classList.add("cursor");
167 | }
168 |
169 | public hideCursor() {
170 | this.currentLine.classList.remove("cursor");
171 | }
172 |
173 | public waitLine() {
174 | return new Promise((resolve) => {
175 | this.newLineListeners.push(resolve);
176 | });
177 | }
178 |
179 | public wrapSql(sql: string) {
180 | const regex = /\W/g;
181 | const chunks: TextChunk[] = [];
182 | const skipHighlight = sql.trimStart().startsWith("\\");
183 | let currentIdx = 0;
184 | while (true) {
185 | const match = regex.exec(sql);
186 | const nextIdx = match ? match.index : sql.length;
187 | const word = sql.slice(currentIdx, nextIdx);
188 | chunks.push(
189 | new TextChunk(
190 | word,
191 | !skipHighlight && this.keywords.has(word.toLowerCase())
192 | ? Color.LightGreen
193 | : undefined,
194 | ),
195 | );
196 | if (match) {
197 | chunks.push(new TextChunk(match[0]));
198 | currentIdx = nextIdx + 1;
199 | } else {
200 | break;
201 | }
202 | }
203 |
204 | return chunks;
205 | }
206 | }
207 |
--------------------------------------------------------------------------------
/client/main.ts:
--------------------------------------------------------------------------------
1 | import "./style.css";
2 | import { analytics } from "./lib/analytics";
3 | import "./lib/sentry";
4 | import { App, AppMode } from "./lib/app";
5 |
6 | const mode: AppMode = import.meta.env.VITE_APP_MODE ?? AppMode.Normal;
7 |
8 | const app = new App(mode, document.getElementById("app")!);
9 |
10 | app.start();
11 | // @ts-expect-error window is not typed
12 | window.app = app;
13 | document.querySelectorAll(".signup").forEach((el) => {
14 | el.addEventListener("click", () => {
15 | analytics.track("signup_clicked");
16 | });
17 | });
18 |
19 | document.querySelectorAll(".github-link").forEach((n) =>
20 | n.addEventListener("click", () => {
21 | analytics.track("github_clicked");
22 | }),
23 | );
24 |
--------------------------------------------------------------------------------
/client/public/keywords.json:
--------------------------------------------------------------------------------
1 | {
2 | "keywords": [
3 | "a",
4 | "abort",
5 | "abs",
6 | "absent",
7 | "absolute",
8 | "access",
9 | "according",
10 | "acos",
11 | "action",
12 | "ada",
13 | "add",
14 | "admin",
15 | "after",
16 | "aggregate",
17 | "all",
18 | "allocate",
19 | "also",
20 | "alter",
21 | "always",
22 | "analyse",
23 | "analyze",
24 | "and",
25 | "any",
26 | "any_value",
27 | "are",
28 | "array",
29 | "array_agg",
30 | "array_max_cardinality",
31 | "as",
32 | "asc",
33 | "asensitive",
34 | "asin",
35 | "assertion",
36 | "assignment",
37 | "asymmetric",
38 | "at",
39 | "atan",
40 | "atomic",
41 | "attach",
42 | "attribute",
43 | "attributes",
44 | "authorization",
45 | "avg",
46 | "backward",
47 | "base64",
48 | "before",
49 | "begin",
50 | "begin_frame",
51 | "begin_partition",
52 | "bernoulli",
53 | "between",
54 | "bigint",
55 | "binary",
56 | "bit",
57 | "bit_length",
58 | "blob",
59 | "blocked",
60 | "bom",
61 | "boolean",
62 | "both",
63 | "breadth",
64 | "btrim",
65 | "by",
66 | "c",
67 | "cache",
68 | "call",
69 | "called",
70 | "cardinality",
71 | "cascade",
72 | "cascaded",
73 | "case",
74 | "cast",
75 | "catalog",
76 | "catalog_name",
77 | "ceil",
78 | "ceiling",
79 | "chain",
80 | "chaining",
81 | "char",
82 | "character",
83 | "characteristics",
84 | "characters",
85 | "character_length",
86 | "character_set_catalog",
87 | "character_set_name",
88 | "character_set_schema",
89 | "char_length",
90 | "check",
91 | "checkpoint",
92 | "class",
93 | "classifier",
94 | "class_origin",
95 | "clob",
96 | "close",
97 | "cluster",
98 | "coalesce",
99 | "cobol",
100 | "collate",
101 | "collation",
102 | "collation_catalog",
103 | "collation_name",
104 | "collation_schema",
105 | "collect",
106 | "column",
107 | "columns",
108 | "column_name",
109 | "command_function",
110 | "command_function_code",
111 | "comment",
112 | "comments",
113 | "commit",
114 | "committed",
115 | "compression",
116 | "concurrently",
117 | "condition",
118 | "conditional",
119 | "condition_number",
120 | "configuration",
121 | "conflict",
122 | "connect",
123 | "connection",
124 | "connection_name",
125 | "constraint",
126 | "constraints",
127 | "constraint_catalog",
128 | "constraint_name",
129 | "constraint_schema",
130 | "constructor",
131 | "contains",
132 | "content",
133 | "continue",
134 | "control",
135 | "conversion",
136 | "convert",
137 | "copartition",
138 | "copy",
139 | "corr",
140 | "corresponding",
141 | "cos",
142 | "cosh",
143 | "cost",
144 | "count",
145 | "covar_pop",
146 | "covar_samp",
147 | "create",
148 | "cross",
149 | "csv",
150 | "cube",
151 | "cume_dist",
152 | "current",
153 | "current_catalog",
154 | "current_date",
155 | "current_default_transform_group",
156 | "current_path",
157 | "current_role",
158 | "current_row",
159 | "current_schema",
160 | "current_time",
161 | "current_timestamp",
162 | "current_transform_group_for_type",
163 | "current_user",
164 | "cursor",
165 | "cursor_name",
166 | "cycle",
167 | "data",
168 | "database",
169 | "datalink",
170 | "date",
171 | "datetime_interval_code",
172 | "datetime_interval_precision",
173 | "day",
174 | "db",
175 | "deallocate",
176 | "dec",
177 | "decfloat",
178 | "decimal",
179 | "declare",
180 | "default",
181 | "defaults",
182 | "deferrable",
183 | "deferred",
184 | "define",
185 | "defined",
186 | "definer",
187 | "degree",
188 | "delete",
189 | "delimiter",
190 | "delimiters",
191 | "dense_rank",
192 | "depends",
193 | "depth",
194 | "deref",
195 | "derived",
196 | "desc",
197 | "describe",
198 | "descriptor",
199 | "detach",
200 | "deterministic",
201 | "diagnostics",
202 | "dictionary",
203 | "disable",
204 | "discard",
205 | "disconnect",
206 | "dispatch",
207 | "distinct",
208 | "dlnewcopy",
209 | "dlpreviouscopy",
210 | "dlurlcomplete",
211 | "dlurlcompleteonly",
212 | "dlurlcompletewrite",
213 | "dlurlpath",
214 | "dlurlpathonly",
215 | "dlurlpathwrite",
216 | "dlurlscheme",
217 | "dlurlserver",
218 | "dlvalue",
219 | "do",
220 | "document",
221 | "domain",
222 | "double",
223 | "drop",
224 | "dynamic",
225 | "dynamic_function",
226 | "dynamic_function_code",
227 | "each",
228 | "element",
229 | "else",
230 | "empty",
231 | "enable",
232 | "encoding",
233 | "encrypted",
234 | "end",
235 | "end-exec",
236 | "end_frame",
237 | "end_partition",
238 | "enforced",
239 | "enum",
240 | "equals",
241 | "error",
242 | "escape",
243 | "event",
244 | "every",
245 | "except",
246 | "exception",
247 | "exclude",
248 | "excluding",
249 | "exclusive",
250 | "exec",
251 | "execute",
252 | "exists",
253 | "exp",
254 | "explain",
255 | "expression",
256 | "extension",
257 | "external",
258 | "extract",
259 | "false",
260 | "family",
261 | "fetch",
262 | "file",
263 | "filter",
264 | "final",
265 | "finalize",
266 | "finish",
267 | "first",
268 | "first_value",
269 | "flag",
270 | "float",
271 | "floor",
272 | "following",
273 | "for",
274 | "force",
275 | "foreign",
276 | "format",
277 | "fortran",
278 | "forward",
279 | "found",
280 | "frame_row",
281 | "free",
282 | "freeze",
283 | "from",
284 | "fs",
285 | "fulfill",
286 | "full",
287 | "function",
288 | "functions",
289 | "fusion",
290 | "g",
291 | "general",
292 | "generated",
293 | "get",
294 | "global",
295 | "go",
296 | "goto",
297 | "grant",
298 | "granted",
299 | "greatest",
300 | "group",
301 | "grouping",
302 | "groups",
303 | "handler",
304 | "having",
305 | "header",
306 | "hex",
307 | "hierarchy",
308 | "hold",
309 | "hour",
310 | "id",
311 | "identity",
312 | "if",
313 | "ignore",
314 | "ilike",
315 | "immediate",
316 | "immediately",
317 | "immutable",
318 | "implementation",
319 | "implicit",
320 | "import",
321 | "in",
322 | "include",
323 | "including",
324 | "increment",
325 | "indent",
326 | "index",
327 | "indexes",
328 | "indicator",
329 | "inherit",
330 | "inherits",
331 | "initial",
332 | "initially",
333 | "inline",
334 | "inner",
335 | "inout",
336 | "input",
337 | "insensitive",
338 | "insert",
339 | "instance",
340 | "instantiable",
341 | "instead",
342 | "int",
343 | "integer",
344 | "integrity",
345 | "intersect",
346 | "intersection",
347 | "interval",
348 | "into",
349 | "invoker",
350 | "is",
351 | "isnull",
352 | "isolation",
353 | "join",
354 | "json",
355 | "json_array",
356 | "json_arrayagg",
357 | "json_exists",
358 | "json_object",
359 | "json_objectagg",
360 | "json_query",
361 | "json_scalar",
362 | "json_serialize",
363 | "json_table",
364 | "json_table_primitive",
365 | "json_value",
366 | "k",
367 | "keep",
368 | "key",
369 | "keys",
370 | "key_member",
371 | "key_type",
372 | "label",
373 | "lag",
374 | "language",
375 | "large",
376 | "last",
377 | "last_value",
378 | "lateral",
379 | "lead",
380 | "leading",
381 | "leakproof",
382 | "least",
383 | "left",
384 | "length",
385 | "level",
386 | "library",
387 | "like",
388 | "like_regex",
389 | "limit",
390 | "link",
391 | "listagg",
392 | "listen",
393 | "ln",
394 | "load",
395 | "local",
396 | "localtime",
397 | "localtimestamp",
398 | "location",
399 | "locator",
400 | "lock",
401 | "locked",
402 | "log",
403 | "log10",
404 | "logged",
405 | "lower",
406 | "lpad",
407 | "ltrim",
408 | "m",
409 | "map",
410 | "mapping",
411 | "match",
412 | "matched",
413 | "matches",
414 | "match_number",
415 | "match_recognize",
416 | "materialized",
417 | "max",
418 | "maxvalue",
419 | "measures",
420 | "member",
421 | "merge",
422 | "merge_action",
423 | "message_length",
424 | "message_octet_length",
425 | "message_text",
426 | "method",
427 | "min",
428 | "minute",
429 | "minvalue",
430 | "mod",
431 | "mode",
432 | "modifies",
433 | "module",
434 | "month",
435 | "more",
436 | "move",
437 | "multiset",
438 | "mumps",
439 | "name",
440 | "names",
441 | "namespace",
442 | "national",
443 | "natural",
444 | "nchar",
445 | "nclob",
446 | "nested",
447 | "nesting",
448 | "new",
449 | "next",
450 | "nfc",
451 | "nfd",
452 | "nfkc",
453 | "nfkd",
454 | "nil",
455 | "no",
456 | "none",
457 | "normalize",
458 | "normalized",
459 | "not",
460 | "nothing",
461 | "notify",
462 | "notnull",
463 | "nowait",
464 | "nth_value",
465 | "ntile",
466 | "null",
467 | "nullable",
468 | "nullif",
469 | "nulls",
470 | "null_ordering",
471 | "number",
472 | "numeric",
473 | "object",
474 | "occurrence",
475 | "occurrences_regex",
476 | "octets",
477 | "octet_length",
478 | "of",
479 | "off",
480 | "offset",
481 | "oids",
482 | "old",
483 | "omit",
484 | "on",
485 | "one",
486 | "only",
487 | "open",
488 | "operator",
489 | "option",
490 | "options",
491 | "or",
492 | "order",
493 | "ordering",
494 | "ordinality",
495 | "others",
496 | "out",
497 | "outer",
498 | "output",
499 | "over",
500 | "overflow",
501 | "overlaps",
502 | "overlay",
503 | "overriding",
504 | "owned",
505 | "owner",
506 | "p",
507 | "pad",
508 | "parallel",
509 | "parameter",
510 | "parameter_mode",
511 | "parameter_name",
512 | "parameter_ordinal_position",
513 | "parameter_specific_catalog",
514 | "parameter_specific_name",
515 | "parameter_specific_schema",
516 | "parser",
517 | "partial",
518 | "partition",
519 | "pascal",
520 | "pass",
521 | "passing",
522 | "passthrough",
523 | "password",
524 | "past",
525 | "path",
526 | "pattern",
527 | "per",
528 | "percent",
529 | "percentile_cont",
530 | "percentile_disc",
531 | "percent_rank",
532 | "period",
533 | "permission",
534 | "permute",
535 | "pipe",
536 | "placing",
537 | "plan",
538 | "plans",
539 | "pli",
540 | "policy",
541 | "portion",
542 | "position",
543 | "position_regex",
544 | "power",
545 | "precedes",
546 | "preceding",
547 | "precision",
548 | "prepare",
549 | "prepared",
550 | "preserve",
551 | "prev",
552 | "primary",
553 | "prior",
554 | "private",
555 | "privileges",
556 | "procedural",
557 | "procedure",
558 | "procedures",
559 | "program",
560 | "prune",
561 | "ptf",
562 | "public",
563 | "publication",
564 | "quote",
565 | "quotes",
566 | "range",
567 | "rank",
568 | "read",
569 | "reads",
570 | "real",
571 | "reassign",
572 | "recheck",
573 | "recovery",
574 | "recursive",
575 | "ref",
576 | "references",
577 | "referencing",
578 | "refresh",
579 | "regr_avgx",
580 | "regr_avgy",
581 | "regr_count",
582 | "regr_intercept",
583 | "regr_r2",
584 | "regr_slope",
585 | "regr_sxx",
586 | "regr_sxy",
587 | "regr_syy",
588 | "reindex",
589 | "relative",
590 | "release",
591 | "rename",
592 | "repeatable",
593 | "replace",
594 | "replica",
595 | "requiring",
596 | "reset",
597 | "respect",
598 | "restart",
599 | "restore",
600 | "restrict",
601 | "result",
602 | "return",
603 | "returned_cardinality",
604 | "returned_length",
605 | "returned_octet_length",
606 | "returned_sqlstate",
607 | "returning",
608 | "returns",
609 | "revoke",
610 | "right",
611 | "role",
612 | "rollback",
613 | "rollup",
614 | "routine",
615 | "routines",
616 | "routine_catalog",
617 | "routine_name",
618 | "routine_schema",
619 | "row",
620 | "rows",
621 | "row_count",
622 | "row_number",
623 | "rpad",
624 | "rtrim",
625 | "rule",
626 | "running",
627 | "savepoint",
628 | "scalar",
629 | "scale",
630 | "schema",
631 | "schemas",
632 | "schema_name",
633 | "scope",
634 | "scope_catalog",
635 | "scope_name",
636 | "scope_schema",
637 | "scroll",
638 | "search",
639 | "second",
640 | "section",
641 | "security",
642 | "seek",
643 | "select",
644 | "selective",
645 | "self",
646 | "semantics",
647 | "sensitive",
648 | "sequence",
649 | "sequences",
650 | "serializable",
651 | "server",
652 | "server_name",
653 | "session",
654 | "session_user",
655 | "set",
656 | "setof",
657 | "sets",
658 | "share",
659 | "show",
660 | "similar",
661 | "simple",
662 | "sin",
663 | "sinh",
664 | "size",
665 | "skip",
666 | "smallint",
667 | "snapshot",
668 | "some",
669 | "sort_direction",
670 | "source",
671 | "space",
672 | "specific",
673 | "specifictype",
674 | "specific_name",
675 | "sql",
676 | "sqlcode",
677 | "sqlerror",
678 | "sqlexception",
679 | "sqlstate",
680 | "sqlwarning",
681 | "sqrt",
682 | "stable",
683 | "standalone",
684 | "start",
685 | "state",
686 | "statement",
687 | "static",
688 | "statistics",
689 | "stddev_pop",
690 | "stddev_samp",
691 | "stdin",
692 | "stdout",
693 | "storage",
694 | "stored",
695 | "strict",
696 | "string",
697 | "strip",
698 | "structure",
699 | "style",
700 | "subclass_origin",
701 | "submultiset",
702 | "subscription",
703 | "subset",
704 | "substring",
705 | "substring_regex",
706 | "succeeds",
707 | "sum",
708 | "support",
709 | "symmetric",
710 | "sysid",
711 | "system",
712 | "system_time",
713 | "system_user",
714 | "t",
715 | "table",
716 | "tables",
717 | "tablesample",
718 | "tablespace",
719 | "table_name",
720 | "tan",
721 | "tanh",
722 | "target",
723 | "temp",
724 | "template",
725 | "temporary",
726 | "text",
727 | "then",
728 | "through",
729 | "ties",
730 | "time",
731 | "timestamp",
732 | "timezone_hour",
733 | "timezone_minute",
734 | "to",
735 | "token",
736 | "top_level_count",
737 | "trailing",
738 | "transaction",
739 | "transactions_committed",
740 | "transactions_rolled_back",
741 | "transaction_active",
742 | "transform",
743 | "transforms",
744 | "translate",
745 | "translate_regex",
746 | "translation",
747 | "treat",
748 | "trigger",
749 | "trigger_catalog",
750 | "trigger_name",
751 | "trigger_schema",
752 | "trim",
753 | "trim_array",
754 | "true",
755 | "truncate",
756 | "trusted",
757 | "type",
758 | "types",
759 | "uescape",
760 | "unbounded",
761 | "uncommitted",
762 | "unconditional",
763 | "under",
764 | "unencrypted",
765 | "union",
766 | "unique",
767 | "unknown",
768 | "unlink",
769 | "unlisten",
770 | "unlogged",
771 | "unmatched",
772 | "unnamed",
773 | "unnest",
774 | "until",
775 | "untyped",
776 | "update",
777 | "upper",
778 | "uri",
779 | "usage",
780 | "user",
781 | "user_defined_type_catalog",
782 | "user_defined_type_code",
783 | "user_defined_type_name",
784 | "user_defined_type_schema",
785 | "using",
786 | "utf16",
787 | "utf32",
788 | "utf8",
789 | "vacuum",
790 | "valid",
791 | "validate",
792 | "validator",
793 | "value",
794 | "values",
795 | "value_of",
796 | "varbinary",
797 | "varchar",
798 | "variadic",
799 | "varying",
800 | "var_pop",
801 | "var_samp",
802 | "verbose",
803 | "version",
804 | "versioning",
805 | "view",
806 | "views",
807 | "volatile",
808 | "when",
809 | "whenever",
810 | "where",
811 | "whitespace",
812 | "width_bucket",
813 | "window",
814 | "with",
815 | "within",
816 | "without",
817 | "work",
818 | "wrapper",
819 | "write",
820 | "xml",
821 | "xmlagg",
822 | "xmlattributes",
823 | "xmlbinary",
824 | "xmlcast",
825 | "xmlcomment",
826 | "xmlconcat",
827 | "xmldeclaration",
828 | "xmldocument",
829 | "xmlelement",
830 | "xmlexists",
831 | "xmlforest",
832 | "xmliterate",
833 | "xmlnamespaces",
834 | "xmlparse",
835 | "xmlpi",
836 | "xmlquery",
837 | "xmlroot",
838 | "xmlschema",
839 | "xmlserialize",
840 | "xmltable",
841 | "xmltext",
842 | "xmlvalidate",
843 | "year",
844 | "yes",
845 | "zone"
846 | ]
847 | }
--------------------------------------------------------------------------------
/client/public/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neondatabase-labs/psqlsh/dd6ee2450c7d86f0838e84d0ee2e16cb733971f9/client/public/preview.png
--------------------------------------------------------------------------------
/client/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | width: 100%;
6 | height: 100%;
7 | overflow: hidden;
8 | }
9 |
10 | :root {
11 | --terminal-background-color: #000;
12 | --terminal-text-color: #ebebeb;
13 | --terminal-font-size: 16px;
14 |
15 | --header-background-color: #191919;
16 | --header-border-color: #2e2e2e;
17 |
18 | --button-border-color: #949494;
19 |
20 | --banner-text-color: #dedede;
21 |
22 | --select-option-selected-color: #63f655;
23 | --select-option-description-color: #808080;
24 | --select-option-description-link-color: #7a8bff;
25 | }
26 |
27 | .preloader {
28 | display: none;
29 | }
30 |
31 | body {
32 | display: flex;
33 | flex-direction: column;
34 | justify-content: flex-start;
35 | align-items: center;
36 | font-family: sans-serif;
37 |
38 | background-color: var(--terminal-background-color);
39 | color: var(--terminal-text-color);
40 | }
41 |
42 | a {
43 | text-decoration: none;
44 | color: inherit;
45 | }
46 |
47 | div:focus-visible {
48 | outline: none;
49 | }
50 |
51 | .terminal {
52 | width: 100%;
53 | padding: 16px 32px;
54 | flex: 1;
55 | overflow: auto;
56 | box-sizing: border-box;
57 | font-size: var(--terminal-font-size);
58 | font-family: monospace;
59 | caret-color: transparent;
60 |
61 | --cursor-position: 0;
62 | }
63 |
64 | .terminal-input-hidden {
65 | position: absolute;
66 | top: -9999px;
67 | left: -9999px;
68 | }
69 |
70 | .line {
71 | display: inline-block;
72 | white-space: pre;
73 | position: relative;
74 |
75 | &.cursor::before {
76 | content: "";
77 | display: block;
78 | position: absolute;
79 | margin-left: 2ch;
80 | top: 0.2em;
81 | left: calc(var(--cursor-position) * 1ch + 1px);
82 | width: 0.5em;
83 | height: 1em;
84 | background-color: var(--terminal-text-color);
85 | animation: blink 1s infinite;
86 | }
87 | }
88 |
89 | .prompt-mode .cursor::after {
90 | margin-left: 0;
91 | }
92 |
93 | .header {
94 | display: flex;
95 | box-sizing: border-box;
96 | flex: 0 0 auto;
97 | justify-content: space-between;
98 | align-items: center;
99 | height: 64px;
100 | width: 100%;
101 | padding: 16px 32px;
102 | background-color: var(--header-background-color);
103 | border-bottom: 1px solid var(--header-border-color);
104 |
105 | .github-icon {
106 | width: 24px;
107 | height: 24px;
108 | vertical-align: -12px;
109 | }
110 | }
111 |
112 | .logo {
113 | display: inline-block;
114 | line-height: 1;
115 | }
116 |
117 | .buttons {
118 | display: flex;
119 | justify-content: flex-start;
120 | align-items: flex-start;
121 | gap: 8px;
122 | }
123 |
124 | .btn {
125 | height: 32px;
126 | padding: 0 12px;
127 | cursor: pointer;
128 | border-radius: 6px;
129 | border: 1px solid var(--button-border-color);
130 | background-color: transparent;
131 | font-family: sans-serif;
132 | font-size: 14px;
133 | font-weight: 500;
134 | color: var(--terminal-text-color);
135 | }
136 |
137 | .btn.signup {
138 | border: 0;
139 | position: relative;
140 | &::before {
141 | content: "";
142 | position: absolute;
143 | inset: 0;
144 | border: 1px solid transparent;
145 | border-radius: 6px;
146 | background: linear-gradient(to right, #6aff5e, #0dfff7);
147 | background-repeat: no-repeat;
148 | background-size: calc(100% + 4px) calc(100% + 4px);
149 | background-position: center;
150 | -webkit-mask:
151 | linear-gradient(#fff 0 0) padding-box,
152 | linear-gradient(#fff 0 0);
153 | mask:
154 | linear-gradient(#fff 0 0) padding-box,
155 | linear-gradient(#fff 0 0);
156 | -webkit-mask-composite: destination-out;
157 | mask-composite: exclude;
158 | }
159 | }
160 |
161 | .info-icon {
162 | display: inline-block;
163 | mask: url("./images/question.svg") center no-repeat;
164 | mask-size: contain;
165 | background-color: var(--terminal-text-color);
166 | width: 18px;
167 | height: 18px;
168 | vertical-align: bottom;
169 | }
170 |
171 | .banner-visible .banner {
172 | display: flex;
173 | }
174 |
175 | .banner {
176 | display: none;
177 |
178 | position: fixed;
179 | top: 0;
180 | right: 0;
181 | bottom: 0;
182 | left: 0;
183 | background: var(--terminal-background-color);
184 |
185 | justify-content: center;
186 | align-items: center;
187 | text-align: center;
188 | }
189 |
190 | .banner-content {
191 | width: 500px;
192 | }
193 |
194 | .banner-logo {
195 | width: 200px;
196 | }
197 |
198 | .banner-title {
199 | font-size: 28px;
200 | font-style: normal;
201 | font-weight: 700;
202 | line-height: 36px;
203 | letter-spacing: 0px;
204 | }
205 |
206 | .banner-description {
207 | color: var(--banner-text-color);
208 | font-size: 18px;
209 | font-style: normal;
210 | font-weight: 400;
211 | line-height: 24px;
212 | letter-spacing: 0px;
213 |
214 | a {
215 | text-decoration: underline;
216 | }
217 | }
218 |
219 | .banner-buttons {
220 | display: flex;
221 | justify-content: center;
222 | align-items: center;
223 | gap: 12px;
224 | }
225 |
226 | .arrow-left {
227 | vertical-align: -2px;
228 | }
229 |
230 | @keyframes blink {
231 | 0% {
232 | opacity: 1;
233 | }
234 | 50% {
235 | opacity: 0;
236 | }
237 | 100% {
238 | opacity: 1;
239 | }
240 | }
241 |
242 | @media (pointer: coarse) {
243 | .line {
244 | white-space: pre-wrap;
245 | &.cursor::before {
246 | display: none;
247 | }
248 | }
249 | }
250 |
251 | /* Select */
252 | .option-value {
253 | display: inline-block;
254 | cursor: pointer;
255 | &:hover {
256 | text-decoration: underline;
257 | }
258 | }
259 |
260 | .option-selected .option-value {
261 | color: var(--select-option-selected-color);
262 | }
263 |
264 | .option-description {
265 | color: var(--select-option-description-color);
266 | font-size: 14px;
267 |
268 | a {
269 | color: var(--select-option-description-link-color);
270 | text-decoration: underline;
271 | }
272 | }
273 |
274 | .option {
275 | position: relative;
276 | margin-top: 8px;
277 | padding-left: 16px;
278 | }
279 |
280 | .option.option-selected::before {
281 | content: "❯";
282 | position: absolute;
283 | color: var(--select-option-selected-color);
284 | top: -1px;
285 | left: 0;
286 | }
287 |
--------------------------------------------------------------------------------
/client/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "isolatedModules": true,
5 | "lib": ["esnext", "dom"],
6 | "target": "esnext",
7 | "module": "esnext",
8 | "moduleResolution": "nodenext",
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/client/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// (opts.req, opts.res, {
17 | cookieName: "s",
18 | password: config.cookieSecret,
19 | });
20 |
21 | const requestId =
22 | opts.req.headers["x-request-id"] ||
23 | opts.req.headers["rndr-id"] ||
24 | randomBytes(16).toString("hex");
25 |
26 | const loggerWithContext = logger.child({
27 | requestId,
28 | url: `${opts.req.method} ${opts.req.url}`,
29 | });
30 | loggerWithContext.info("Request started");
31 |
32 | return {
33 | session,
34 | logger: loggerWithContext,
35 | };
36 | };
37 |
38 | const t = initTRPC.context().create();
39 |
40 | export const router = t.router;
41 | export const publicProcedure = t.procedure;
42 |
--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "lib": ["esnext"],
5 | "allowSyntheticDefaultImports": true,
6 | }
7 |
--------------------------------------------------------------------------------
/templates/db.ts:
--------------------------------------------------------------------------------
1 | const db = [
2 | {
3 | name: "Empty",
4 | description: "An empty database.",
5 | file: "empty.sql",
6 | },
7 | {
8 | file: "chinook.sql",
9 | name: "Chinook",
10 | description:
11 | "A sample database for a digital media store, including tables for artists, albums, media tracks, invoices, customers, and more.",
12 | },
13 | {
14 | file: "pokemon.sql",
15 | name: "Pokemon",
16 | description: "A dataset of Pokemon species, types, and stats.",
17 | },
18 | {
19 | file: "netflix.sql",
20 | name: "Netflix",
21 | description: "A dataset of Netflix movies and TV shows.",
22 | },
23 | {
24 | file: "pgrag.sql",
25 | name: "pg_rag demo",
26 | description:
27 | 'A demo database for the pg_rag extension.',
28 | },
29 | ];
30 |
31 | export default db;
32 |
--------------------------------------------------------------------------------
/templates/empty.sql:
--------------------------------------------------------------------------------
1 | SELECT
2 | 1;
3 |
4 |
--------------------------------------------------------------------------------
39 | 
40 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/client/lib/analytics.ts:
--------------------------------------------------------------------------------
1 | import { AnalyticsBrowser } from "@segment/analytics-next";
2 |
3 | export const analytics = AnalyticsBrowser.load(
4 | {
5 | writeKey: import.meta.env.VITE_SEGMENT_WRITE_KEY ?? "",
6 | cdnURL: "https://analytics.neon.tech",
7 | },
8 | {
9 | integrations: {
10 | "Segment.io": {
11 | apiHost: "track.neon.tech/v1",
12 | },
13 | },
14 | },
15 | );
16 |
17 | analytics.identify();
18 | analytics.page();
19 |
--------------------------------------------------------------------------------
/client/lib/api.ts:
--------------------------------------------------------------------------------
1 | import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
2 | import type { AppRouter } from "../../server/router";
3 |
4 | export const client = createTRPCProxyClient
40 |