@prostgles/prostgles 2.3.6-dev.1786548258

package/client/src/app/UIDocs/accountUIDoc.ts

@@ -0,0 +1,128 @@
+import { mdiAccountOutline, mdiApplicationBracesOutline } from "@mdi/js";
+import { ROUTES } from "@common/utils";
+import { getDataKey } from "../../Testing";
+import type { UIDocContainers } from "../UIDocs";
+
+export const accountUIDoc = {
+  type: "page",
+  path: ROUTES.ACCOUNT,
+  componentName: "Account",
+  title: "Account",
+  iconPath: mdiAccountOutline,
+  description:
+    "Manage your account settings, security preferences, and API access.",
+  docs: `
+    Manage your account settings, security preferences, and API access.
+    
+    <img src="./screenshots/account.svgif.svg" alt="Account Page" />
+  `,
+  children: [
+    {
+      type: "tab",
+      title: "Account details",
+      selector: getDataKey("details"),
+      description: "View and update your account information.",
+      children: [
+        {
+          type: "smartform",
+          title: "Account information",
+          description:
+            "View all account details and associated data (workspaces, dashboards, views, etc.)",
+          tableName: "users",
+          selectorCommand: "SmartForm",
+        },
+      ],
+    },
+    {
+      type: "tab",
+      title: "Security",
+      selector: getDataKey("security"),
+      description: "Manage your account security settings.",
+      children: [
+        {
+          type: "popup",
+          title: "Two-factor authentication",
+          description:
+            "Set up and manage two-factor authentication for enhanced security.",
+          selectorCommand: "Setup2FA.Enable",
+          children: [
+            {
+              type: "button",
+              title: "Generate QR Code",
+              description:
+                "Generate a QR code to set up 2FA with your authenticator app.",
+              selectorCommand: "Setup2FA.Enable.GenerateQR",
+            },
+            {
+              type: "button",
+              title: "Can't scan QR code",
+              description:
+                "View manual setup instructions if you can't scan the QR code.",
+              selectorCommand: "Setup2FA.Enable.CantScanQR",
+            },
+            {
+              type: "input",
+              inputType: "text",
+              title: "Confirm code",
+              description:
+                "Enter the code from your authenticator app to enable 2FA.",
+              selectorCommand: "Setup2FA.Enable.ConfirmCode",
+            },
+            {
+              type: "button",
+              title: "Enable 2FA",
+              description:
+                "Complete the 2FA setup process by confirming the code.",
+              selectorCommand: "Setup2FA.Enable.Confirm",
+            },
+            {
+              type: "text",
+              title: "Base64 secret",
+              description:
+                "Manual setup secret key for your authenticator app.",
+              selectorCommand: "Setup2FA.Enable.Base64Secret",
+            },
+          ],
+        },
+        {
+          type: "button",
+          title: "Disable 2FA",
+          description: "Turn off two-factor authentication for your account.",
+          selectorCommand: "Setup2FA.Disable",
+        },
+        {
+          type: "popup",
+          title: "Change password",
+          description: "Change your account password.",
+          selectorCommand: "Account.ChangePassword",
+          children: [],
+        },
+        {
+          type: "list",
+          title: "Active sessions",
+          description: "View and manage your active web sessions.",
+          selectorCommand: "Sessions",
+          itemContent: [],
+          itemSelector: ``,
+        },
+      ],
+    },
+    {
+      type: "tab",
+      title: "API",
+      selector: getDataKey("api"),
+      iconPath: mdiApplicationBracesOutline,
+      description: "View and manage your API access settings.",
+      children: [
+        {
+          type: "section",
+          title: "API Details",
+          description: "View your API credentials and configuration.",
+          selectorCommand: "config.api",
+          uiVersionOnly: true,
+          children: [],
+        },
+      ],
+    },
+  ],
+} satisfies UIDocContainers;

package/client/src/app/UIDocs/commandPaletteUIDoc.ts

@@ -0,0 +1,40 @@
+import { getCommandElemSelector } from "src/Testing";
+import type { UIDocContainers } from "../UIDocs";
+
+export const commandPaletteUIDoc = {
+  type: "hotkey-popup",
+  hotkey: ["Ctrl", "K"],
+  title: "Command Palette",
+  description: "Go to command/action quickly",
+  docs: `
+    Keyboard-driven navigation to different parts of the application without having to browse through menus or panels. 
+
+    Press <kbd>Ctrl+K</kbd> to open the command palette popup. Type to search through the documentation for functionality, settings, and other sections.
+    <img src="./screenshots/command_palette.svgif.svg" alt="Command Palette" />
+  `,
+  selectorCommand: "CommandPalette",
+  children: [
+    {
+      type: "input",
+      inputType: "text",
+      title: "Search commands input",
+      description: "Type to search for commands and actions",
+      selector:
+        getCommandElemSelector("CommandPalette") +
+        " " +
+        getCommandElemSelector("SearchList.Input"),
+    },
+    {
+      type: "list",
+      title: "Search results",
+      description:
+        "List of matching commands and actions. Press Enter to execute/go to the selected command.",
+      selector:
+        getCommandElemSelector("CommandPalette") +
+        " " +
+        getCommandElemSelector("SearchList.List"),
+      itemSelector: "[data-key]",
+      itemContent: [],
+    },
+  ],
+} satisfies UIDocContainers;

package/client/src/app/UIDocs/connection/AIAssistantUIDoc.ts

@@ -0,0 +1,309 @@
+import { mdiMagnify, mdiPlus, mdiStop, mdiTools } from "@mdi/js";
+import { fixIndent } from "../../../demo/scripts/sqlVideoDemo";
+import { getCommandElemSelector } from "../../../Testing";
+import type { UIDocElement } from "../../UIDocs";
+import { DEFAULT_MCP_SERVER_NAMES } from "@common/mcpUtils";
+
+export const AIAssistantUIDoc = {
+  type: "popup",
+  selectorCommand: "AskLLM",
+  title: "AI Assistant",
+  description:
+    "Opens an AI assistant chat to help generate SQL queries, understand database schema, or perform other tasks.",
+  docs: `
+    The AI assistant is an intelligent companion that helps you work more efficiently with your PostgreSQL databases. 
+    It can generate SQL queries, explain database schemas, analyze data patterns, and assist with various database-related tasks through a conversational interface.
+    MCP Servers can be used to extend the AI capabilities with custom tools and integrations.
+
+    ## Features
+
+    - **Agentic Workflows**: Generate, save and re-run TypeScript automations in an isolated sandbox with granular access to data, MCP tools and filesystem.
+    - **Progressive schema discovery**: Each conversation fetches only the table and tool schemas it actually needs, keeping the context window clean and focused.
+    - **Granular per-chat permissions**: Configure database access, schema visibility, and tool permissions independently for each conversation
+    - **Works with hosted and local models**: It supports OpenAI, Anthropic, Gemini, OpenRouter, Ollama, and OpenAI-compatible local models.
+    - **Multimodal input with document support**: Attach files, convert supported documents and images into markdown context (Docling), and use speech-to-text (Faster Whisper).
+    
+
+    <img src="./screenshots/ai_assistant.svgif.svg" alt="AI assistant popup screenshot" />
+ 
+    Supported AI Providers: OpenAI, Anthropic, Google Gemini, OpenRouter, Ollama and any other Local Models that support the openai spec. 
+
+    *Note: AI providers are configured in Server Settings > LLM Providers*
+  `,
+  docOptions: "asSeparateFile",
+  children: [
+    {
+      type: "section",
+      title: "Header actions",
+      description: "Actions available in the header of the AI assistant popup.",
+      selector: getCommandElemSelector("Popup.header"),
+      children: [
+        {
+          type: "smartform-popup",
+          selector: getCommandElemSelector("LLMChatOptions.toggle"),
+          title: "Chat settings",
+          tableName: "llm_chats",
+          description:
+            "Allows editing all chat settings and data as well deleting or cloning the current chat.",
+        },
+        {
+          type: "input",
+          inputType: "select",
+          selector: getCommandElemSelector("LLMChat.select"),
+          title: "Select chat",
+          description:
+            "Selects a chat from the list of available chats. Each chat represents a separate conversation with the AI assistant.",
+        },
+        {
+          type: "button",
+          selector: getCommandElemSelector("AskLLMChat.NewChat"),
+          title: "New chat",
+          description: "Creates a new chat with the AI assistant.",
+        },
+        {
+          type: "button",
+          selector: getCommandElemSelector("Popup.toggleFullscreen"),
+          title: "Toggle fullscreen",
+          description:
+            "Toggles the fullscreen mode for the AI assistant popup.",
+        },
+        {
+          type: "button",
+          selector: getCommandElemSelector("Popup.close"),
+          title: "Close popup",
+          description: "Closes the AI assistant popup.",
+        },
+      ],
+    },
+    {
+      type: "list",
+      title: "Chat messages",
+      description: "List of messages in the current chat.",
+      selector: getCommandElemSelector("Chat.messageList"),
+      itemContent: [],
+      itemSelector: getCommandElemSelector("Chat.messageList") + " > .message",
+    },
+    {
+      type: "section",
+      title: "Message input",
+      description:
+        "Input field for entering messages to the AI assistant and quick actions.",
+      docs: fixIndent(`
+        The message input area allows you to write text, attach files and control other aspects of the AI assistant (change model, add/remove tools, speech to text). 
+
+      `),
+      selector: getCommandElemSelector("Chat.sendWrapper"),
+      children: [
+        {
+          type: "input",
+          inputType: "text",
+          title: "Message input",
+          description:
+            "Input field for entering messages to the AI assistant. Pressing Shift+Enter creates a new line.",
+          selector: getCommandElemSelector("Chat.textarea"),
+        },
+        {
+          type: "popup",
+          title: "MCP tools allowed",
+          iconPath: mdiTools,
+          description: `Opens the MCP tools menu for the current chat. Default tools: ${DEFAULT_MCP_SERVER_NAMES.join(", ")}`,
+          docs: `
+            MCP Servers extend the capabilities of the AI assistant by providing custom tools and integrations.
+          `,
+          selector: getCommandElemSelector("LLMChatOptions.MCPTools"),
+          children: [
+            {
+              type: "popup",
+              selector: getCommandElemSelector("AddMCPServer.Open"),
+              title: "Add MCP server",
+              iconPath: mdiPlus,
+              description:
+                "Opens the form to add a new MCP server for the current chat.",
+              children: [
+                {
+                  type: "input",
+                  inputType: "text",
+                  title: "MCP tool json config",
+                  description:
+                    "JSON configuration for the MCP tool to be added.",
+                  selector:
+                    getCommandElemSelector("AddMCPServer") +
+                    " " +
+                    getCommandElemSelector("MonacoEditor"),
+                },
+                {
+                  type: "popup",
+                  title: "Add MCP server",
+                  description:
+                    "Adds the specified MCP server to the current chat.",
+                  selector: getCommandElemSelector("AddMCPServer.Add"),
+                  children: [],
+                },
+              ],
+            },
+            {
+              type: "button",
+              title: "Stop/Start all MCP Servers",
+              description: "Quick way to stop/restart all MCP servers.",
+              selector: getCommandElemSelector(
+                "MCPServersToolbar.stopAllToggle",
+              ),
+              iconPath: mdiStop,
+            },
+            {
+              type: "button",
+              title: "Search tools",
+              description:
+                "Searches for specific MCP tools in the list of available tools.",
+              selector: getCommandElemSelector("MCPServersToolbar.searchTools"),
+              iconPath: mdiMagnify,
+            },
+            {
+              type: "list",
+              title: "MCP tools",
+              iconPath: mdiTools,
+              description:
+                "List of available MCP tools. To allow a tool to be used in the current chat it must be ticked. Each tool represents a specific functionality or integration.",
+              selector:
+                getCommandElemSelector("LLMChatOptions.MCPTools") +
+                " " +
+                getCommandElemSelector("SmartCardList"),
+              itemSelector: ".SmartCard",
+              itemContent: [
+                {
+                  type: "text",
+                  title: "MCP server name",
+                  description:
+                    "Name of the parent MCP server associated with the tool.",
+                  selector: "div",
+                },
+                {
+                  type: "list",
+                  title: "MCP server tools",
+                  description:
+                    "List of available tools for the selected MCP server. Click to enable or disable a specific tool for the current chat.",
+                  selector: getCommandElemSelector("MCPServerTools"),
+                  itemSelector: ".SmartCard",
+                  itemContent: [],
+                },
+                {
+                  type: "popup",
+                  title: "MCP Server Logs",
+                  description:
+                    "Opens the logs for the selected MCP server, allowing you to view its activity and status.",
+                  selector: getCommandElemSelector(
+                    "MCPServerFooterActions.logs",
+                  ),
+                  children: [],
+                },
+                {
+                  type: "popup",
+                  title: "MCP Server Config",
+                  description:
+                    "Opens the configuration for the selected MCP server, allowing you to manage its settings.",
+                  selector: getCommandElemSelector("MCPServerConfigButton"),
+                  children: [
+                    {
+                      type: "button",
+                      title: "Save config",
+                      description:
+                        "Saves the configuration for the selected MCP server.",
+                      selector: getCommandElemSelector("MCPServerConfig.save"),
+                    },
+                  ],
+                },
+                {
+                  type: "button",
+                  title: "Reload MCP tools",
+                  description:
+                    "Reloads the MCP tools for the selected MCP server, updating the list of available tools.",
+                  selectorCommand: "MCPServerFooterActions.refreshTools",
+                },
+                {
+                  type: "button",
+                  title: "Enable/Disable MCP server",
+                  description:
+                    "Enables or disables the selected MCP server for all chats. If configuration is required a popup will be shown.",
+                  selector: getCommandElemSelector(
+                    "MCPServerFooterActions.enableToggle",
+                  ),
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "smartform-popup",
+          selector: getCommandElemSelector("LLMChatOptions.DatabaseAccess"),
+          title: "Database access",
+          description:
+            "Opens the database access settings for the current chat. This controls how the AI assistant can interact with the current database.",
+          tableName: "llm_chats",
+          fieldNames: ["db_data_permissions", "db_schema_permissions"],
+        },
+        {
+          type: "popup",
+          title: "Prompt Selector",
+          description:
+            "Opens the prompt details for the current chat, allowing you to manage the prompt template and other related settings.",
+          selector: getCommandElemSelector("LLMChatOptions.Prompt"),
+          children: [
+            {
+              type: "popup",
+              selectorCommand: "LLMChatOptions.Prompt.Preview",
+              title: "Prompt preview",
+              description:
+                "Preview of the prompt with context variables filled in.",
+              children: [],
+            },
+          ],
+        },
+        {
+          type: "popup",
+          title: "LLM Model",
+          description:
+            "Selects the LLM model to be used for the current chat. Different models may have different capabilities and performance. ",
+          selector: getCommandElemSelector("LLMChatOptions.Model"),
+          children: [
+            {
+              type: "button",
+              selector: `${getCommandElemSelector("LLMChatOptions.Model")} .LABELWRAPPER`,
+              title: "Select model",
+              description: "Selects this LLM model for the current chat.",
+            },
+            {
+              type: "smartform-popup",
+              title: "Add model credentials",
+              description:
+                "Opens the form to add llm provider credentials for the selected LLM model.",
+              selectorCommand: "LLMChatOptions.Model.AddCredentials",
+              tableName: "llm_credentials",
+            },
+          ],
+        },
+        {
+          type: "input",
+          inputType: "file",
+          selectorCommand: "Chat.addFiles",
+          title: "Attach files",
+          description:
+            "Attaches files to be sent to the AI assistant along with the message. Supported file types may vary depending on the AI model and configuration.",
+        },
+        {
+          type: "popup",
+          title: "Speech to Text",
+          selectorCommand: "Chat.speech",
+          description:
+            "Opens the speech-to-text input options, allowing you to send audio recordings or transcribe audio messages to send to the AI assistant. Right click to open speech-to-text settings.",
+          children: [],
+        },
+        {
+          type: "button",
+          title: "Send message",
+          description: "Sends the entered message to the AI assistant.",
+          selector: getCommandElemSelector("Chat.send"),
+        },
+      ],
+    },
+  ],
+} satisfies UIDocElement;

package/client/src/app/UIDocs/connection/agenticWorkflowsUIDoc.ts

@@ -0,0 +1,37 @@
+import type { UIDoc } from "src/app/UIDocs";
+
+export const agenticWorkflowsUIDoc = {
+  type: "section",
+  title: "Agentic workflows",
+  docOptions: "asSeparateFile",
+  selectorCommand: "SavedAgenticWorkflowsAndContainers",
+  componentName: "SavedAgenticWorkflowsAndContainers",
+  description: `List of saved agentic workflows of the current user for the current connection.`,
+  docs: `
+    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" />
+
+  `,
+  children: [],
+} as const satisfies UIDoc;

package/client/src/app/UIDocs/connection/config/accessControlUIDoc.ts

@@ -0,0 +1,44 @@
+import { mdiAccountMultiple } from "@mdi/js";
+import { fixIndent } from "../../../../demo/scripts/sqlVideoDemo";
+import type { UIDoc } from "../../../UIDocs";
+
+export const accessControlUIDoc = {
+  type: "tab",
+  selectorCommand: "config.ac",
+  uiVersionOnly: true,
+  title: "Access control",
+  iconPath: mdiAccountMultiple,
+  description:
+    "Manage user permissions and access rules for this database connection.",
+  docs: fixIndent(`
+    Manage user permissions and access rules for this database connection.
+    <img src="./screenshots/access_control.svgif.svg" alt="Access control" />
+  `),
+  docOptions: "asSeparateFile",
+  children: [
+    {
+      type: "button",
+      selectorCommand: "config.ac.create",
+      title: "Create Access Rule",
+      description: "Add a new access control rule to define user permissions.",
+    },
+    {
+      type: "button",
+      selectorCommand: "config.ac.save",
+      title: "Save Access Rule",
+      description: "Save changes to the current access control rule.",
+    },
+    {
+      type: "button",
+      selectorCommand: "config.ac.cancel",
+      title: "Cancel Changes",
+      description: "Cancel editing the current access control rule.",
+    },
+    {
+      type: "button",
+      selectorCommand: "config.ac.removeRule",
+      title: "Remove Rule",
+      description: "Delete the selected access control rule.",
+    },
+  ],
+} satisfies UIDoc;

package/client/src/app/UIDocs/connection/config/apiUIDoc.ts

@@ -0,0 +1,95 @@
+import { mdiApplicationBracesOutline } from "@mdi/js";
+import type { UIDocElement } from "../../../UIDocs";
+
+export const apiUIDoc = {
+  type: "tab",
+  selectorCommand: "config.api",
+  iconPath: mdiApplicationBracesOutline,
+  title: "API",
+  description: "Configure API access settings and view API documentation.",
+  docs: `
+  The API section allows you to configure the API access settings for your application.
+  This enables programmatic access to your application's data and functionality via HTTP or WebSocket protocols.
+  Generated database types can be used to interact with the API in a type-safe manner through our TypeScript client library.
+  Code snippets are provided to help you get started with using the API in your applications.
+  You can also manage API tokens for authentication and access control.
+  
+  You can set the URL path for the API, manage allowed origins for CORS requests, and create or view API tokens for accessing the API. The API supports both WebSocket and HTTP protocols.`,
+  docOptions: "asSeparateFile",
+  children: [
+    {
+      type: "input",
+      inputType: "text",
+      selector: "input#url_path",
+      title: "API URL Path",
+      description:
+        "Set the URL path for the API. This is the base path for all API endpoints.",
+    },
+    {
+      type: "popup",
+      title: "Allowed Origin Alert",
+      selectorCommand: "AllowedOriginCheck",
+      description: "Will only appear if the allowed origin is not set.",
+      children: [
+        {
+          type: "input",
+          inputType: "text",
+          selectorCommand: "AllowedOriginCheck.FormField",
+          title: "Allowed Origin",
+          description:
+            "Set the allowed origin for CORS requests. This controls which domains can make cross-origin requests to this app by setting the Access-Control-Allow-Origin header.",
+        },
+      ],
+    },
+    {
+      type: "popup",
+      selectorCommand: "APIDetailsWs.Examples",
+      title: "Websocket API usage examples",
+      description:
+        "View examples of how to use the API using typescript and javascript",
+      children: [],
+    },
+    {
+      type: "popup",
+      selectorCommand: "APIDetailsHttp.Examples",
+      title: "HTTP API usage examples",
+      description:
+        "View examples of how to use the API using typescript and javascript",
+      children: [],
+    },
+    {
+      type: "section",
+      selectorCommand: "APIDetailsTokens",
+      title: "API Tokens",
+      description:
+        "Shows existing API tokens and allows you to create new ones.",
+      children: [
+        {
+          type: "popup",
+          selectorCommand: "APIDetailsTokens.CreateToken",
+          title: "Create API Token",
+          description:
+            "Create a new API token for accessing the API. Tokens can be used for both WebSocket and HTTP API access.",
+          children: [
+            {
+              type: "input",
+              inputType: "number",
+              selectorCommand:
+                "APIDetailsTokens.CreateToken.daysUntilExpiration",
+              title: "Expires in (days)",
+              description:
+                "Set the number of days until the token expires. After expiration, the token will no longer be valid.",
+            },
+            {
+              type: "button",
+              selectorCommand: "APIDetailsTokens.CreateToken.generate",
+              title: "Generate Token",
+              description:
+                "Click to generate a new API token. The token will be displayed once generated. After generation, the code examples will be updated to include the new token.",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+} satisfies UIDocElement;