@prostgles/prostgles 2.3.6-dev.1786548258

package/docs/04_Navigation_bar.md

@@ -0,0 +1,37 @@
+<h1 id="navigation_bar"> Navigation bar </h1> 
+
+The top navigation bar provides quick access to all major sections of Prostgles UI. 
+Located at the top of the interface, it allows you to switch between database connections, manage users and server settings, and access your account preferences. 
+The navigation adapts to your user role, showing admin-only sections like Users and Server Settings only to authorized users.
+
+## Key sections of the app
+
+### Connections
+
+A connection represents a unique postgres database instance (unique host, port, user and database name).
+The connection list page shows all available connections you can access based on your user permissions.
+
+### Connection dashboard
+
+Clicking a connection from the connection list will take you to the dashboard page where you can explore and interact with the database.
+Available views and tools include SQL Editor, Table, Map, Schema Diagram, AI Assistant, and more.
+
+### Dashboard workspaces
+
+The views you open in the dashboard are saved automatically to the current workspace.
+This allows you to return to the same views later, even after closing the application.
+You can create multiple workspaces to organize your views by project, team, task, or any other criteria.
+
+
+<img src="./screenshots/navbar.svgif.svg" alt="Navigation" style="border: 1px solid; margin: 1em 0;" />
+
+### Navbar items
+- **Connections**: Manage database connections  
+- **Users**: Manage user accounts (admin only)  
+- **Server Settings**: Configure server settings (admin only)  
+- **Account**: Manage your account  
+- **Logout**: Logout of your account  
+- **Theme Selector**: Switch between light and dark themes  
+- **Language Selector**: Change the interface language  
+- **Toggle Menu (visible on small screens)**: Toggle the mobile navigation menu on smaller screens  
+

package/docs/05_Connections.md

@@ -0,0 +1,108 @@
+<h1 id="connections"> Connections </h1> 
+
+The Connections page serves as the central hub within Prostgles UI for managing all your PostgreSQL database connections. 
+From here, you can add and open connections, modify existing ones, and gain an immediate overview of their status and associated workspaces. 
+
+<img src="./screenshots/connections.svg" alt="Connections page screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+### Connection controls
+- <a href="#new_connection">New connection</a>: Opens the form to add a new database connection.  
+- **Display options**: Customize how the list of connections is displayed (e.g., show/hide state database, show database names).  
+- <a href="#connection_list">Connection list</a>: Controls to open and manage your database connections.  
+
+<h1 id="new_connection"> Adding a connection </h1> 
+
+Use the **New Connection** button to add a new database connection.
+
+This will open a form where you can enter the connection details such as host, port, database name, user, and password.
+
+<img src="./screenshots/new_connection.svgif.svg" alt="New connection form screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+### New connection form fields
+  - **PostgreSQL Installation Instructions**: Instructions for installing PostgreSQL on your system.  
+  - **Connection Name**: The name of the connection.  
+  - **Connection Type**: Allows you change the connection details format: standard or connection string.  
+  - **Connection String**: The connection string for the database.   
+  - **Database Host**: The hostname or IP address of the database server.  
+  - **Database Port**: The port number on which the database server is listening.  
+  - **Database User**: The username used to connect to the database.  
+  - **Database Password**: The password for the database user.  
+  - **Database Name**: The name of the database to connect to.  
+  - **More Options**: Additional connection options.  
+    - **Schema Filter**: Controls which schemas are visible in the dashboard (public by default).  
+    - **Connection Timeout**: The maximum time to wait for a connection to the database before timing out.  
+    - **SSL Mode**: Configure SSL settings for the connection.  
+    - **Watch Schema**: Enabled by default. Enables schema change tracking. Any changes made to the database schema are reflected in the API and UI.  
+    - **Enable Realtime**: Enabled by default. Enables realtime data change tracking for tables and views. Requires trigger permissions to the underlying tables.  
+  - **Update Connection**: Save the changes made to the connection.  
+
+<h2 id="connection_list"> Connection list </h2> 
+
+The connection list displays all your database connections grouped by database host, port and user.
+
+<img src="./screenshots/connections.svg" alt="Connections list screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+### Connection actions
+  - **Open connection**: Opens the selected connection dashboard on the default workspace.  
+  - **Add new database**: Adds a new connection to the selected server.   
+    - <a href="#create_new_database">Create new database</a>: Create a new database within the server.  
+    - <a href="#connect_to_an_existing_database">Connect to an existing database</a>: Selects a database from the server to connect to.   
+  - **Debug: Close All Windows**: Force-closes all windows/tabs for this connection. Use if the workspace becomes unresponsive or encounters a bug.  
+  - **Status monitor**: View real-time statistics, running queries, and system resource usage (CPU, RAM, Disk) for this connection.  
+  - **Connection configuration**: Access and modify settings for this connection, such as access control, file storage, backup/restore options, and server-side functions.  
+  - <a href="#edit_connection_details">Edit connection details</a>: Modify the connection parameters (e.g., display name, database details like host and port). Also allows deleting or cloning the connection.  
+  - **Status indicator/Disconnect**: Shows the current connection status (green indicates connected). Click to disconnect from the database.  
+  - **Workspaces**: List of workspaces associated with this connection. Click to switch to a specific workspace.  
+
+<h4 id="create_new_database"> Create new database </h4> 
+
+Allows you to create a new database in the selected server.
+It will use the first connection details from the group connection.
+If no adequate account is found (no superuser or rolcreatedb), it will be greyed out with with an appropriate explanation tooltip text.
+
+### New database options
+  - **Database Name**: The name of the new database.  
+  - **Sample Schemas**: Select a sample schema to create the database with.  
+  - **Create database owner**: If checked, a new owner will be created for the database. Useful for ensuring the database is owned by a non-superuser account.  
+  - **New Owner Name**: The name of the new owner.  
+  - **New Owner Password**: The password of the new owner.  
+  - **New Owner Permission Type**: Apart from Owner it is possible to create a user with reduced permission types (SELECT/UPDATE/DELETE/INSERT).  
+  - **Create and connect**: Creates and connects to the new database.  
+
+<h4 id="connect_to_an_existing_database"> Connect to an existing database </h4> 
+
+Allows you to connect to an existing database in the selected server.
+It will use the first connection details from the group connection. 
+
+<img src="./screenshots/connect_existing_database.svg" alt="Connect existing database popup screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+After selecting the database, you can choose to create a new owner or user for the connection should you need to.
+
+  - **Select Database**: Choose a database from the server.  
+  - **Create database owner**: If checked, a new owner will be created for the database. Useful for ensuring the database is owned by a non-superuser account.  
+  - **New Owner Name**: The name of the new owner.  
+  - **New Owner Password**: The password of the new owner.  
+  - **New Owner Permission Type**: Apart from Owner it is possible to create a user with reduced permission types (SELECT/UPDATE/DELETE/INSERT).  
+  - **Save and connect**: Connects to the selected database with the new owner.  
+
+<h3 id="edit_connection_details"> Edit connection details </h3> 
+
+Connection settings, credentials, and other parameters to ensure your connection is configured correctly.
+
+  - **PostgreSQL Installation Instructions**: Instructions for installing PostgreSQL on your system.  
+  - **Connection Name**: The name of the connection.  
+  - **Connection Type**: Allows you change the connection details format: standard or connection string.  
+  - **Connection String**: The connection string for the database.   
+  - **Database Host**: The hostname or IP address of the database server.  
+  - **Database Port**: The port number on which the database server is listening.  
+  - **Database User**: The username used to connect to the database.  
+  - **Database Password**: The password for the database user.  
+  - **Database Name**: The name of the database to connect to.  
+  - **More Options**: Additional connection options.  
+    - **Schema Filter**: Controls which schemas are visible in the dashboard (public by default).  
+    - **Connection Timeout**: The maximum time to wait for a connection to the database before timing out.  
+    - **SSL Mode**: Configure SSL settings for the connection.  
+    - **Watch Schema**: Enabled by default. Enables schema change tracking. Any changes made to the database schema are reflected in the API and UI.  
+    - **Enable Realtime**: Enabled by default. Enables realtime data change tracking for tables and views. Requires trigger permissions to the underlying tables.  
+  - **Update Connection**: Save the changes made to the connection.  
+

package/docs/06_Connection_dashboard.md

@@ -0,0 +1,58 @@
+<h1 id="connection_dashboard"> Connection dashboard </h1> 
+
+The connection dashboard is your command center for exploring and managing your Postgres database. 
+Open tables, run SQL, visualize schema relationships, switch workspaces, and launch tools—all in one flexible, customizable workspace.
+With quick search, saved queries, AI-powered assistance, and instant access to every database object, the dashboard gives you a fast, intuitive way to navigate your data and build the tools you need.
+
+## Features
+
+- **Unified workspace**: View tables, SQL editors, charts, and tools together in a flexible layout. Save and switch between different layouts and sets of opened views for different tasks or projects.
+- **AI Assistant**: Generate SQL, explore data, and get help directly within the dashboard.
+- **Flexible layout**: Drag, resize, and arrange views in a tiled layout to create a workspace that fits your needs.
+- **Global search**: Search across all tables, views, and functions in a single, fast search bar.
+- **Schema diagram**: Visualize relationships between tables and schemas to better understand your database structure.
+- **Import data**: Easily import data from CSV/JSON files into your database tables.
+
+<img src="./screenshots/dashboard.svgif.svg" alt="Connection dashboard" style="border: 1px solid; margin: 1em 0;" />
+
+## Components
+
+### Dashboard elements
+- <a href="#dashboard_menu">Dashboard menu</a>: Allows opening tables and views, schema diagram, importing files, managing saved queries, and accessing dashboard settings.  
+- **Dashboard menu toggle**: Opens or closes the dashboard menu unless the menu is pinned.  
+- **Go to configuration**: Opens the configuration page for the selected connection.  
+- **Change connection**: Switch to a different database connection.  
+- **Workspaces**: List of available workspaces for the selected connection. Each workspace stores opened views and their layout.  
+- <a href="#workspaces_menu">Workspaces menu</a>: Opens the workspaces menu, allowing you to create, manage, and switch between workspaces.  
+- <a href="#workspace_area">Workspace area</a>: Main content area of the dashboard, where the tables, views, SQL editors and other visualisations are displayed.  
+- <a href="#ai_assistant">AI Assistant</a>: Opens an AI assistant chat to help generate SQL queries, understand database schema, or perform other tasks.  
+- **Feedback**: Opens the feedback form, allowing you to provide feedback about the application.  
+- **Go to Connections**: Opens the connections list page.  
+
+<h2 id="dashboard_menu"> Dashboard menu </h2> 
+
+The dashboard menu is the entry point in exploring your database.
+The layout adapts to the screen size by pinning the menu to keep it open when there is enough space. 
+For wider screens the centered layout mode can be enabled through the settings.
+
+  - **Open an SQL editor**: Opens an SQL editor view in the workspace area.  
+  - **Quick search**: Opens the quick search menu for searching across all available tables and views from the current database.  
+  - **Settings**: Opens the settings menu for configuring dashboard layout preferences.  
+  - **Pin/Unpin menu**: Toggles the pinning of the dashboard menu. Pinned menus remain open until unpinned or accessing from a low width screen.  
+  - **Resize menu**: Allows resizing the dashboard menu. Drag to adjust the width of the menu.  
+  - **Resize centered layout**: Allows resizing the workspace area when centered layout is enabled. Drag to adjust the width of the centered layout.  
+  - **Saved queries**: List of saved queries of the current user from the current workspace. Click to open a saved query.  
+  - **Tables and views**: List of tables and views from the current database. Click to open a table or view. By default only the tables from the public schema are shown. Schema list from the connection settings controls which schemas are shown.  
+  - **Server-side functions**: List of server-side functions for the current database. Click to open a function.  
+  - <a href="#create/import">Create/Import</a>: Opens the menu for creating new tables, server-side functions or importing csv/json files.  
+  - <a href="#agentic_workflows">Agentic workflows</a>: List of saved agentic workflows of the current user for the current connection.  
+  - <a href="#schema_diagram">Schema diagram</a>: Opens the schema diagram for visualizing the relationships between tables in the current database.  
+
+<h3 id="create/import"> Create/Import </h3> 
+
+Create new tables, server-side functions or import files into the current database.
+
+  - **Create new table**: Opens the form to create a new table in the current database.  
+  - <a href="#import_file">Import file</a>: Opens the form to import a file into the current database.  
+  - **Create TS Function**: Opens the form to create a new server-side TypeScript function for the current database.  
+

package/docs/07_Import_file.md

@@ -0,0 +1,15 @@
+<h1 id="import_file"> Import file </h1> 
+
+Import files into the current database. Supported file types include CSV, GeoJSON, and JSON.
+The import process allows you to specify the table name, infer column data types, and choose how to insert JSON/GeoJSON data into the table.  
+
+<img src="./screenshots/file_importer.svgif.svg" alt="File Importer screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+### Import file options
+  - **Import file**: Input field for selecting a file to import. Supported types: csv/geojson/json.  
+  - **Table name**: New/existing table name into which data is to be imported.  
+  - **Try to infer and apply column data types**: Checkbox for inferring and applying column data types during import. If checked, the system will attempt to determine the appropriate data types for each column based on the imported file. If unchecked, TEXT data type will be used for all columns.  
+  - **Drop table if exists**: Checkbox for dropping the table if it already exists in the database. If checked, the existing table will be deleted before importing the new file.  
+  - **Insert as**: Select list for choosing the method of inserting JSON/GeoJSON data into the table. Options include: Single text value, JSONB rows, and Properties with geometry.  
+  - **Import**: Button to initiate the import process. Click to start importing the selected file into the specified table.  
+

package/docs/08_Agentic_workflows.md

@@ -0,0 +1,27 @@
+<h1 id="agentic_workflows"> Agentic workflows </h1> 
+
+Agentic workflows are reusable TypeScript automations generated from AI chat and executed in an isolated sandbox.
+They allow granular access to data, tools and filesystem.
+
+Each workflow combines database operations, MCP tools, and optional agent steps to complete multi-step tasks reliably.
+They are ideal for automating tedious data intensive tasks that may involve using agentic chats.
+Agentic workflows can be saved and reused, making it easier to manage and execute recurring tasks efficiently.
+
+## Core capabilities  
+- Isolated execution environment with configurable timeout, CPU, memory, filesystem mode, and internet access.
+- Granular database permissions with table-level rules and optional workflow DDL.
+- Controlled MCP tool access for orchestration and agent-specific steps.
+- Typed user input controls including enums, table-aware pickers, and file/folder path selectors.
+- Built-in progress reporting, activity timeline, and run logs.
+- Start, stop, and re-run support with schema drift detection and guided resolution.
+
+## Typical workflow lifecycle  
+1. Describe your task in AI Assistant.
+2. Review the generated workflow summary, definition, permissions, and inputs.
+3. Provide required input values and start the run.
+4. Monitor progress in Activity and Logs.
+5. Save the workflow for repeated use in the connection dashboard.
+
+<img src="./screenshots/ai_assistant_agentic_workflow.svgif.svg" alt="Agentic workflow example" style="border: 1px solid; margin: 1em 0;" />
+
+

package/docs/09_Schema_diagram.md

@@ -0,0 +1,63 @@
+<h1 id="schema_diagram"> Schema diagram </h1> 
+
+Explore your database structure visually through the schema diagram. This tool lets you:
+- **Select schemas** — Choose one or multiple schemas to display
+- **Navigate freely** — Pan and zoom to focus on specific areas
+- **View table relationships** — See how tables connect through foreign keys
+- **Filter your view** — Show or hide tables and columns by relationship type
+- **Color links by root table** — Trace relationships back to their source at a glance. Links inherit the color of the table that defines the relationship (e.g., all user_id foreign keys match the users table color)
+- **Reset the layout** — Return to the default view which auto-arranges tables ensuring the most linked tables are central
+
+It allows you to explore the schema structure, view table relationships, and manage the layout of the schema diagram.
+You can pan and zoom the diagram, select schemas, filter tables and columns based on their relationship types, reset the layout.
+Link color modes allow you to better understand related tables and foreign key properties.
+
+<img src="./screenshots/schema_diagram.svgif.svg" alt="Schema diagram screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+## Controls
+
+### Top controls
+  - **Table relationship filter**: Display tables based on their relationship type. Options include: all, linked (with relationships), orphaned (without relationships).  
+  - **Column relationship filter**: Display columns based on their relationship type. Options include: all, references (with relationships), none (no columns/only table names will be shown).  
+  - **Link colour mode**: Colour links by: default (fixed colour), root table (the colour of the table the relationship tree originates from), on-delete/on-update (colour based on constraint referential action).  
+  - **Reset layout**: Moving tables is persisted the state database. Clicking this resets the schema diagram layout to its initial state.  
+  - **Close schema diagram**: Closes the schema diagram and returns to the dashboard menu.  
+
+<h2 id="workspaces_menu"> Workspaces menu </h2> 
+
+Workspaces are a powerful feature that allows you to organize your work within a connection.
+The opened views and their layout is saved to the workspace, so you can switch between different sets of data and configurations without losing your progress.
+
+The workspaces menu provides access to all available workspaces for the selected connection. You can create new workspaces, switch between existing ones, and manage workspace settings.
+Each workspace allows you to work with a separate set of data and configurations, making it easier to organize your work and collaborate with others.
+The menu also includes options to clone existing workspaces and delete them if they are no longer needed.
+
+  - **Workspaces**: List of available workspaces. Click to switch to a different workspace.  
+    - **Delete workspace**: Opens the delete workspace confirmation dialog  
+      - **Delete workspace**: Confirms the deletion of the selected workspace.  
+    - **Clone workspace**: Creates a copy of the selected workspace with a new name.  
+    - **Workspace settings**: Opens the settings for the selected workspace, allowing you to manage its properties.  
+  - **Create new workspace**: Opens the form to create a new workspace for the selected connection.  
+    - **Workspace name**: Name of the new workspace.  
+    - **Create workspace**: Create and switch to the new workspace with the specified name.  
+  - **Toggle layout mode**: Switches between fixed and editable layout modes for the current workspace. Fixed mode locks the layout, preventing it from being changed by the user.  
+
+<h2 id="workspace_area"> Workspace area </h2> 
+
+The workspace area is the main place for interacting with your data. 
+It includes the SQL editor, data tables, maps, and timecharts, allowing you to execute queries, visualize data, and manage database objects.
+
+## Features
+
+- **Flexible layout**: Arrange your workspace with multiple tabs and split views to compare data, write queries, and visualize results side by side.
+- **AI assistant**: Automate tasks, write queries, create visualizations, and explore your data with natural language commands.
+- **Views and visualizations**: Create different views for your data, including tables, maps, and timecharts, to explore and analyze your data in various ways.
+- **SQL editor**: Write and execute SQL queries directly in the dashboard, with features like syntax highlighting, autocomplete, and query history to enhance your productivity.
+- **Real-time updates**: Each table/view shows real-time data by default
+- **Cross-filtering**: Tables, maps, and timecharts stay cross-filtered when opened from the same source data, allowing you to explore your data from different angles while keeping the context.
+
+  - <a href="#sql_editor">SQL editor</a>: The SQL editor allows users to write and execute SQL queries against the selected database. It provides a user-friendly interface for interacting with the database.  
+  - <a href="#table_view">Table view</a>: Allows interacting with a table/view from the database.  
+  - <a href="#map_view">Map view</a>: Displays a map visualization based on the Table/SQL query results.  
+  - <a href="#timechart_view">Timechart view</a>: Displays a timechart based on the Table/SQL query results.  
+

package/docs/10_SQL_editor.md

@@ -0,0 +1,69 @@
+<h1 id="sql_editor"> SQL editor </h1> 
+
+The SQL editor is a powerful tool for executing SQL queries against your PostgreSQL database. 
+
+## Features
+
+- **Intelligent auto-completion** with context-aware suggestions based on your schema and data with JSONB property access support
+- **Rich suggestion details** with related objects, usage examples and documentation extracts, reducing the need to switch context
+- **Execute current statement** functionality to run only the SQL statement where the cursor is located
+- **Charting options** to visualize query results as timecharts or maps directly from the editor
+- **Multiple result display modes** including table, map, timechart, JSON, and CSV formats
+
+To make it easier working with multiple queries, the default query execution behaviour is to execute the current statement.
+It is highlighted by the blue vertical line to the left of the code. Press <kbd>Alt+E</kbd> or <kbd>Ctrl+Enter</kbd> or <kbd>F5</kbd> to execute it.
+
+The editor is based on [Monaco Editor](https://microsoft.github.io/monaco-editor/), which powers VS Code. 
+It supports multi-cursor editing, find and replace, and many other advanced editing features.
+
+Realtime query resource usage can be enabled in the settings to monitor CPU and memory consumption.
+
+<img src="./screenshots/sql_editor.svgif.svg" alt="SQL editor screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+## Components:
+
+  - **Header section**: Contains menu button, title and window minimise/fullscreen controls.  
+    - **Quick actions**: Quick actions for the view, providing easy access to charting and joins.  
+      - **Add timechart**: Adds a timechart visualization based on the current SQL statement. Visible only when the last executed statement returned at least one timestamp column.  
+      - **Add map**: Adds a map visualization based on the current SQL statement. Visible only when the last executed statement returned at least one geometry/geography column (postgis extension must be enabled).  
+    - **View title. Drag to re-arrange layout**: SQL editor query name, editable in the menu.  
+    - **Collapse the view**: Collapses the view, minimizing it to temporarily save space on the dashboard.   
+    - **Fullscreen**: Expands the view to fill the entire screen.  
+    - **Remove view**: Removes the SQL editor from the dashboard. If there are unsaved changes, a confirmation dialog will appear.  
+    - <a href="#sql_editor_menu">SQL editor menu</a>: The SQL editor menu provides access to various options and settings for the SQL editor.  
+  - **SQL editor component**: The main component for the SQL editor. It contains the SQL editor and statement action buttons. Being bsed on Monaco editor, it supports syntax highlighting, auto-completion and other editing functionality like multi-cursor editing.  
+    - **SQL editor input**: The input field for writing SQL queries. It supports syntax highlighting and auto-completion.  
+    - **Execute current statement**: Executes the current SQL statement highlighted by the blue vertical line to the left of the code. This button is only visible when the cursor is within a statement.  
+    - **Add timechart**: Adds a timechart visualization based on the current SQL statement. This button is only visible when the cursor is within a statement that returns at least one timestamp column.  
+    - **Add map**: Adds a map visualization based on the current SQL statement. This button is only visible when the cursor is within a statement that returns at least one geometry/geography column (postgis extension must be enabled).  
+  - **SQL editor toolbar**: The toolbar provides various options for executing and managing SQL queries.  
+    - **Run query**: Executes the current SQL query. The result will be displayed in the query results section.  
+    - **Limit**: Sets the maximum number of rows to return in the query results. This is useful for limiting the amount of data returned, especially for large datasets.  
+    - **Cancel query**: Cancels the currently running query. This button is only visible when a query is running.  
+    - **Terminate query**: Forcefully terminates the currently running query. This is more aggressive than cancel and is only visible when a query is running.  
+    - **Stop LISTEN**: Stops the active LISTEN operation. This button is only visible when a LISTEN query is active.  
+    - **Row count**: Displays the number of rows fetched by the query and the total number of rows if available.  
+    - **Toggle table visibility**: Shows or hides the results table for the executed query.  
+    - **Toggle code editor**: Shows or hides the SQL code editor, allowing users to focus on query results when needed.  
+    - **Toggle notices**: Shows or hides database notices. When enabled, it displays notifications from the database system.  
+    - **Query duration**: Displays the execution time of the last completed query or the current running time for an active query.  
+    - **Copy results**: Copy/download query results as: CSV, TSV, JSON, Typescript definition, SQL SELECT INTO  
+    - **SQL error**: Displays any errors that occurred during the execution of the SQL query. This is useful for debugging and correcting SQL syntax.  
+  - **Query results**: Displays the results of the executed SQL query. Results can be displayed as a table (default), JSON or CSV. Users can interact with the results, such as sorting and filtering.  
+    - **Results table**: The results table displays the data returned by the executed SQL query. It supports sorting, filtering, and pagination.  
+    - **Chart**: Timechart/Map visualization of the SQL query results.  
+
+<h4 id="sql_editor_menu"> SQL editor menu </h4> 
+
+The SQL editor menu provides access to various options and settings for the SQL editor.
+
+  - **General**: General settings for the SQL editor.  
+    - **Query name**: The name of the current SQL query. This is used for saving and managing queries.  
+    - **Result display mode**: The mode in which the results of the SQL query will be displayed. Options include table, JSON, and CSV.  
+    - **Save query as file**: Saves the current SQL query to a file. This can also be accomplished by pressing Ctrl+S.  
+    - **Open SQL file**: This allows loading the contents of an SQL file into the current query.  
+    - **Delete query**: Deletes the current SQL query. If it has contents a confirmation dialog will appear.  
+  - **Editor options**: Settings for the SQL editor's appearance and behavior.  
+    - **Editor settings**: Settings for the SQL editor's appearance and behavior. This includes font size, theme, and other preferences.  
+  - **Hotkeys**: Keyboard shortcuts for common actions in the SQL editor. This includes executing queries, saving files, and more.  
+

package/docs/11_Table_view.md

@@ -0,0 +1,188 @@
+<h1 id="table_view"> Table view </h1> 
+
+Table view is the main row-level interface for a Postgres table or view. 
+It supports filtering, sorting, editing, schema-aware row forms, linked data from foreign-key relationships, computed columns, realtime refresh, and related chart/map views.
+
+## Features
+
+- **Filtering and search**: Smart filter controls use column metadata and current values to build table filters.
+- **Sorting and layout**: Sort by one or more columns, resize/reorder/hide columns, and switch between table, JSON, card, and grouped card (Kanban style) layouts where available.
+- **Linked data columns**: Add columns from foreign-key relationships. Linked rows can be shown as header/value rows, columns, or compact values; they can be filtered, sorted, limited, joined with left/inner joins, or aggregated with functions such as count, sum, avg, min, and max.
+- **Aggregated linked data**: Use linked or computed values as sortable table columns, including inline bar-style cells and nested timechart-style summaries where supported by the selected data type.
+- **Column rendering**: Configure display format/render-as behavior for values such as URLs, images/media, email, phone, currency, HTML, QR codes, and other supported formats.
+- **Conditional styling**: Apply value-based cell styles, including text/background colors, icons, scales, and bar-style numeric cells.
+- **Smart forms**: Open a row card to view/edit the row using schema-aware inputs and JSONB support. Related records section to navigate the full relational context without leaving the record
+- **Live data refresh**: Tables and views (and related tables) use realtime subscriptions to show latest data.
+- **Charts, maps, and cross-filtering**: Add timecharts, maps, and cross-filtered table views from the current table. Interactions in linked views preserve the source context through dashboard filters.
+- **Postgres management**: Inspect table/view details and manage columns, indexes, constraints, triggers, policies, access rules, refresh settings, and the current query from the table menu.
+
+<img src="./screenshots/table.svgif.svg" alt="Table view screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+## Components
+
+  - **Header section**: Contains menu button, title and window minimise/fullscreen controls.  
+    - **Quick actions**: Quick actions for the view, providing easy access to charting and joins.  
+      - **Toggle filter bar**: Shows or hides the filter bar, allowing users to filter the data displayed in the table.  
+      - **Add cross-filtered table**: Adds a new table view that is cross-filtered by the current table. This allows you to explore related data in a new table view.  
+      - **Add timechart**: Adds a timechart visualization based on the current table. Visible only when the current table (or any linked table) has a timestamp/date column.  
+      - **Add map**: Adds a map visualization based on the current data. Visible only when the current table (or any linked table) has a geometry/geography column (postgis extension must be enabled).  
+    - **View title. Drag to re-arrange layout**: The name of the table/view together with the number of records matching the current filters.   
+    - **Collapse the view**: Collapses the view, minimizing it to temporarily save space on the dashboard.   
+    - **Fullscreen**: Expands the view to fill the entire screen.  
+    - **Remove view**: Removes the view from the dashboard.  
+    - <a href="#table_menu">Table menu</a>: Opens the table menu, allowing users to manage the table view.  
+  - <a href="#table_toolbar">Table Toolbar</a>: Filtering and data add/edit interface for database tables and views.  
+  - **Table**: The main table view displaying the data from the database. It allows users to interact with the data, including sorting, filtering, and editing.  
+    - **Table header**: The header of the table, which contains the column names and allows users to sort the data by clicking on the column headers.  
+      - **Add column menu**: Opens the add column menu, allowing users to add computed columns, create new columns, add linked fields.  
+        - **Add Computed Field**: Opens a popup to create a computed column - calculations or transformations based on existing data using functions like aggregations, date formatting, string operations, etc.  
+          - **Function selector**: Choose a function to apply to the selected column (e.g., aggregates (min/max/avg/count), date formatting, string operations).  
+          - **Column selection**: List of applicable columns to apply functions to. Columns from foreign tables are also shown with the join path in the header.  
+          - **Column name**: Name for the new computed column. Auto-generated based on the function and column.  
+          - **Add to position**: Choose whether to add the computed column at the start or end of the column list.  
+          - **Add computed column**: Confirms and adds the new computed column to the table based on the selected function and parameters.  
+        - **Add Linked Data**: Opens a popup to display data from related tables via foreign key relationships. Disabled if no foreign keys exist or when using aggregates with nested columns.  
+          - **Join path selector**: Select which related table to join to via foreign key relationships. Shows available join paths from the current table.  
+          - **Column label**: Custom name/label for this linked column field in the table. Defaults to the related table name.  
+          - **Linked column selection**: Choose which columns from the related table to display in this linked field.  
+          - **Quick add computed column**: Add a single computed column from the linked table. E.g., count, sum, avg.  
+          - **More options**: Additional configuration for linked columns including layout, join type, filters, and limits.  
+            - **Layout mode**: Choose how to display the linked data: as rows, columns, or without headers.  
+            - **Join type**: Select between inner join (discards parent rows without matches) or left join (keeps all parent rows).  
+            - **Limit**: Maximum number of linked records to display (0-30). Optional.  
+            - **Filters and sorting**: Apply filters and sorting to the linked table data.  
+        - **Create New Column**: Opens a popup to create a new physical column in the database table. Disabled for views or users without SQL privileges.  
+          - **Column editor**: Configure column properties including name, data type, constraints, default values, and foreign key references.  
+          - **Foreign key reference**: Optionally set up a foreign key relationship to another table/column in the database.  
+          - **Data type selection**: Appears after typing the column name. Choose the data type for the new column (e.g., integer, text, date, boolean, etc.).  
+          - **Show create column SQL**: Generates and displays the SQL query that will be executed to create the new column in the database.  
+            - **Generated SQL query**: The generated ALTER TABLE SQL query to create the new column based on the specified properties.  
+            - **Execute create column**: Runs the generated ALTER TABLE query to create the new column in the database.  
+        - **Create New File Column**: Opens a popup to create a new column for handling file uploads and attachments. Requires file storage to be enabled.  
+          - **New column name**: Name for the new file column.  
+          - **Optional**: Whether the file column should allow NULL values (optional) or require a file (NOT NULL).  
+          - **File column configuration**: Configure accepted file types and other file handling options. Appears after entering the column name.  
+            - **Maximum file size in megabytes**: Set the maximum allowed file size for uploads in megabytes. Default is 1 MB. 0 means no limit.  
+            - **Content filter mode**: Choose how to filter accepted files: by file extension, basic content type (e.g., image, audio, vide), by specific content type (e.g., image/png), by specific extension (jpg, png, pdf).  
+          - **Create file column**: Confirms and creates the new file column.  
+      - **Column menu**: Opens the column menu, allowing users to change styling, render mode, view quick stats and other column related options.  
+        - **Sort**: Sort the table data based on the values in this column, either in ascending or descending order. Table can also be sorted by multiple columns by holding shift while clicking column headers.  
+        - **Style**: Customize the appearance of this column, including text color and cell background. You can also set conditional formatting rules to highlight specific data patterns.  
+        - **Display format**: Choose how the data in this column is displayed, such as date formats, number formats, or custom render modes.  
+        - **Filter**: Open the filter panel to set up filters based on this column's values, helping you to quickly narrow down the data displayed in the table.  
+        - **Quick stats**: View quick statistics about the data in this column, such as count, unique values, and distribution.  
+          - **Column Quick Stats**: The Column Quick Stats panel provides a summary of key statistics for the selected column, including distinct count, min/max values, and value distribution. You can also sort the distribution and add filters directly from this panel.  
+            - **Add filter**: Add a filter based on the selected value from top values list.  
+        - **Columns**: Shortcut to the column management panel to add, remove, or rearrange columns in the table.  
+        - **Add Computed Column**: Add a computed field based on calculations or transformations of existing data in this column.  
+        - **Apply function**: Apply a function to the data in this column, such as aggregations, string manipulations, or date transformations.  
+        - **Add Linked Columns**: Add linked data from related tables based on foreign key relationships.  
+        - **Alter**: Alter the column's properties, such as data type, default value, or constraints.  
+        - **Hide**: Hide this column from the table view without deleting it, allowing you to focus on the most relevant data.  
+        - **Hide Others**: Hide all other columns except this one, providing a focused view of the data in this column.  
+      - **Column header**: Pressing the header will toggle sorting state (if the column is sortable). Right clicking (or long press on mobile) will open column menu. Dragging the header will allow reordering the columns.  
+      - **Resize column**: Allows users to resize the column width by dragging the handle.  
+      - <a href="#view/edit_data">View/edit data</a>: Opens the row card, allowing users to view/edit/delete the selected row.  
+      - **Insert row**: Opens the row insert menu, allowing users to add new rows to the table.  
+  - **Pagination Controls**: Navigation controls for paginated data.  
+    - **First Page**: Navigate to the first page of results.  
+    - **Previous Page**: Navigate to the previous page of results.  
+    - **Page Number**: Current page number. You can type a specific page number to jump directly to that page.  
+    - **Next Page**: Navigate to the next page of results.  
+    - **Last Page**: Navigate to the last page of results.  
+    - **Page Size**: Select how many rows to display per page. Changing this may adjust the current page if it would exceed the total number of pages.  
+    - **Page Count Information**: Displays the total number of pages and rows in the current dataset.  
+
+<h4 id="table_menu"> Table menu </h4> 
+
+The table menu provides options for managing the table view, including viewing table info, editing columns, and managing data refresh rates.
+
+  - **Table info**: Postgres specific table/view details.  
+    - **Table name**: Displays the name of the table with option to rename it.  
+      - **Edit name**: Opens SQL editor to rename the table.  
+    - **Comment**: Displays and allows editing of the table comment.  
+      - **Edit comment**: Opens SQL editor to modify the table comment.  
+    - **OID**: Displays the object identifier of the table in the database.  
+    - **Type**: Shows whether this is a table or view.  
+    - **Owner**: Displays the database user who owns this table/view.  
+    - **Size information**: Provides details about the table's size and row count.  
+      - **Actual Size**: The physical size of the table data on disk.  
+      - **Index Size**: The size of all indexes associated with this table.  
+      - **Total Size**: The combined size of table data and indexes.  
+      - **Row count**: The total number of rows in the table.  
+    - **View definition**: Shows the SQL definition for views. Only visible for views, not tables.  
+    - **Vacuum**: Performs garbage collection and optionally analyzes the database. Only available for tables.  
+    - **Vacuum Full**: Performs a more thorough vacuum that can reclaim more space but takes longer and locks the table. Only available for tables.  
+    - **Drop**: Deletes the table or view from the database after confirmation.  
+  - **Columns**: Allows editing, reordering and toggling table columns.  
+    - **Columns list**: Allows editing, reordering and toggling table columns.  
+      - **Alter column**: Opens a popup to edit the column properties.  
+      - **Edit linked field**: Opens a popup to edit the linked field properties.  
+      - **Remove computed column**: Removes a computed column from the table. Only visible for computed columns.  
+  - **Data refresh**: Allows setting subscriptions or data refresh rates. By default every table subscribes to data changes.  
+  - **Triggers**: Allows managing triggers.   
+  - **Constraints**: Allows managing constraints.  
+  - **Indexes**: Allows managing indexes.  
+  - **Policies**: Allows managing policies.  
+  - **Access rules**: Allows managing prostgles access rules.  
+  - **Current query**: Allows viewing the SQL and data/layout info for the current table view.  
+  - **Display options**: Layout preferences.  
+
+<h4 id="table_toolbar"> Table Toolbar </h4> 
+
+Table toolbar can be toggled through the show/hide filtering button (top left corner). 
+It provides a user-friendly interface to add filters, search for data, and perform various actions on the table data.
+
+<img src="./screenshots/smart_filter_bar.svgif.svg" alt="Smart Filter Bar screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+  - **Add Filter**: Allows adding a filter by chosing a column from the current table or from linked tables.  
+    - **Include Linked Columns**: Toggle to include columns from linked tables in the column list.  
+    - **Join To**: Toggles join view to specify which tables a join path to a specific table from which to select a column to filter by.  
+    - **Filterable Columns**: List of columns available for filtering. Click to add a filter.  
+  - **Search Bar**: Quick search functionality across the table data.  
+    - **Search**: Type to search across all searchable fields in the table. The search is a simple contains search. Selecting a result will add a filter to the table.  
+    - **Match Case**: Toggle to match the case of the search term with the data.  
+  - **Table actions**: Additional table data actions.  
+    - **Show additional actions**: Opens a menu with additional actions for the table data.  
+    - **Delete action**: Opens a menu to delete the selected rows from the table.  
+    - **Update action**: Opens a menu to update the selected rows in the table.  
+    - **Insert row**: Opens the row insert menu, allowing users to add new rows to the table.  
+  - **Filters**: Filters applied to the data  
+  - **Having Filters**: Filters applied after aggregation (HAVING clause in SQL).  
+
+<h1 id="view/edit_data"> Row card </h1> 
+
+Smart form is an intelligent, auto-generated form system that adapts to your database schema.
+It provides a user-friendly interface for inserting and updating data with automatic validation,
+foreign key handling, and support for complex data types.
+
+## Features
+- **Auto-generated fields** based on table schema and configurable metadata
+- **Foreign key support** with searchable dropdowns showing referenced data
+- **Linked data management** - view, insert/update related records without leaving the form
+- **File upload** for media and document columns
+- **JSON/JSONB editor** with syntax highlighting
+- **Array types** with dynamic add/remove
+- **Default values** and constraints enforcement
+
+<img src="./screenshots/smart_form.svgif.svg" alt="SmartForm screenshot" style="border: 1px solid; margin: 1em 0;" />
+
+  - **Smart Form**: The smart form displays the details of a single row from the table, allowing users to view and edit the data in a structured format.  
+    - **Table icon in header**: Table icon and table name. Table icon is configurable through the table menu settings.  
+    - **Previous row button**: Navigate to the previous row in the dataset. Only shown for tables with primary key. Disabled when there is no previous row available.  
+    - **Next row button**: Navigate to the next row in the dataset. Only shown for tables with primary key. Disabled when there is no next row available.  
+    - **Fullscreen toggle button**: Toggles the fullscreen mode of the SmartForm popup for an expanded view.  
+    - **Close button**: Closes the SmartForm popup without saving any data.  
+    - **Form field**: Each form field represents a column from the table, displaying the column name and the corresponding value for the selected row. Users can edit the value if the field is editable.  
+      - **Field label**: Displays the name of the column.  
+      - **Field input area**: The input area where users can view and edit the value of the column. The input type varies based on the column's data type.  
+      - **Field hint**: Additional information or guidance about the field, displayed below the input area.  
+      - **View more linked records**: For foreign key fields a 'View more' button appears to open a detailed list of all linked records in a separate popup. This is useful to browse and search all columns from the referenced table.  
+      - **Insert linked record**: If the column is a foreign key a 'Insert new record' button will appear on hover which allows inserting data into the referenced table. Useful when the desired value does not exist yet (foreign key columns only show existing values).  
+      - **Clear field value button**: Clear the current value of the field, resetting it to null. Only shown if the field is nullable and the user is allowed to update it.  
+    - **Joined records section**: If the current table has other tables referencing it via foreign keys, a section will appear at the bottom of the form showing lists of those related records. This allows users to view and manage data that is linked to the current row.  
+      - **Toggle joined records section**: Expand or collapse the joined records section to show or hide the list of related records.  
+      - **View more joined records**: Open a detailed list of all joined records in a separate popup. Useful to browse and search all columns from the joined table.  
+      - **Add joined record**: Open the SmartForm to insert a new joined record into the related table, automatically linking it to the current row.  
+      - **Toggle fullscreen mode**: Expand the section to fullscreen for better visibility and interaction with the joined records.  
+