From 4d9ab8fe503a65320e8c4b20c2abae185030560d Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Thu, 24 Apr 2025 02:05:38 +0100
Subject: [PATCH 01/28] feat(ui): instance name

---
 packages/browser-tests/questdb                |  2 +-
 .../src/components/TopBar/toolbar.tsx         |  7 ++++-
 .../web-console/src/utils/questdb/client.ts   | 30 +++++++++++++++++++
 packages/web-console/webpack.config.js        |  3 +-
 4 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index d6873caf2..9f8eb5866 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit d6873caf20e799b7b9865c18109bed50332e2ed7
+Subproject commit 9f8eb58668d56792749ea9ad2c965c42cb005b98
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 87b46c5dc..1f0254039 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -128,7 +128,12 @@ export const Toolbar = () => {
       </Box>
       <Box gap="0.5rem">
         {serverDetails && serverDetails.instance_name && (
-          <Badge instance_rgb={serverDetails.instance_rgb}>
+          <Badge instance_rgb={serverDetails.instance_rgb}
+                 onClick={() => quest.saveConfig({
+                   "instance_name": "db1",
+                   "instance_rgb": ""
+                 })}
+          >
             {serverDetails.instance_name}
           </Badge>
         )}
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index 202802056..dc0db7046 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -416,6 +416,36 @@ export class Client {
     })
   }
 
+  async saveConfig(config: any): Promise<any> {
+    const formData = new FormData()
+    formData.append("config", JSON.stringify(config))
+
+    return new Promise((resolve, reject) => {
+      let request = new XMLHttpRequest()
+      request.open("POST", "config")
+      Object.keys(this.commonHeaders).forEach((key) => {
+        request.setRequestHeader(key, this.commonHeaders[key])
+      })
+      request.onload = (_e) => {
+        if (request.status === 200) {
+          resolve(JSON.parse(request.response))
+        } else {
+          reject({
+            status: request.status,
+            statusText: request.statusText,
+          })
+        }
+      }
+      request.onerror = () => {
+        reject({
+          status: request.status,
+          statusText: request.statusText,
+        })
+      }
+      request.send(formData)
+    })
+  }
+
   async exportQueryToCsv(query: string) {
     try {
       const response: Response = await fetch(
diff --git a/packages/web-console/webpack.config.js b/packages/web-console/webpack.config.js
index 69541ebab..bab049e3e 100644
--- a/packages/web-console/webpack.config.js
+++ b/packages/web-console/webpack.config.js
@@ -85,7 +85,8 @@ module.exports = {
       {
         context: [
           config.contextPath + "/imp", config.contextPath + "/exp", config.contextPath + "/exec",
-          config.contextPath + "/chk", config.contextPath + "/settings", config.contextPath + "/warnings"
+          config.contextPath + "/chk", config.contextPath + "/settings", config.contextPath + "/warnings",
+          config.contextPath + "/config"
         ],
         target: config.backendUrl,
       },

From fac6306a1f04960859a1f48b372f87ced9589a54 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Tue, 29 Apr 2025 13:06:32 +0300
Subject: [PATCH 02/28] feat(web-console): instance naming UI

---
 packages/browser-tests/questdb                |   2 +-
 .../TopBar/InstanceSettingsPopper.tsx         | 197 ++++++++++++++++++
 .../src/components/TopBar/toolbar.tsx         | 151 +++++++++++---
 .../web-console/src/utils/questdb/client.ts   |  19 +-
 .../web-console/src/utils/questdb/types.ts    |   6 +
 5 files changed, 342 insertions(+), 33 deletions(-)
 create mode 100644 packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 9f8eb5866..e59924475 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 9f8eb58668d56792749ea9ad2c965c42cb005b98
+Subproject commit e599244757240330aa1b91b1c527f3a938a5ca52
diff --git a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
new file mode 100644
index 000000000..c45dee5e7
--- /dev/null
+++ b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
@@ -0,0 +1,197 @@
+import React, { useState, useRef } from "react"
+import styled from "styled-components"
+import { Box, Button, Input } from "@questdb/react-components"
+import { Text } from "../Text"
+import { PopperToggle } from "../PopperToggle"
+import { Config } from "../../utils/questdb/types"
+
+const Wrapper = styled.div`
+  position: absolute;
+  left: 13.5rem;
+  top: 4.5rem;
+  margin-top: 0.5rem;
+  background: ${({ theme }) => theme.color.backgroundDarker};
+  border: 1px solid ${({ theme }) => theme.color.gray1};
+  border-radius: 0.4rem;
+  padding: 1.5rem;
+  width: 32rem;
+  z-index: 1000;
+`
+
+const ColorSelector = styled.div`
+  display: flex;
+  gap: 1rem;
+`
+
+const ColorOption = styled.div<{ color: string; selected: boolean }>`
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  background: ${({ color, theme }) => {
+    switch (color) {
+      case "r":
+        return "#c7072d"
+      case "g":
+        return "#00aa3b"
+      case "b":
+        return "#007aff"
+      case "default":
+        return theme.color.backgroundLighter
+      default:
+        return "transparent"
+    }
+  }};
+  border: 2px solid ${({ theme, selected }) => (selected ? theme.color.foreground : "transparent")};
+`
+
+const Buttons = styled(Box)`
+  margin-top: 1.5rem;
+  gap: 1rem;
+  justify-content: flex-end;
+`
+
+const FormGroup = styled(Box).attrs({ flexDirection: "column", gap: "0.5rem" })`
+  width: 100%;
+`
+
+const StyledInput = styled(Input)`
+  width: 100%;
+  background: ${({ theme }) => theme.color.selection};
+  border: 1px solid ${({ theme }) => theme.color.gray1};
+  border-radius: 0.4rem;
+  color: ${({ theme }) => theme.color.foreground};
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme }) => theme.color.foreground};
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.color.gray2};
+  }
+`
+
+const TextArea = styled.textarea`
+  width: 100%;
+  min-height: 8rem;
+  padding: 0.8rem;
+  background: ${({ theme }) => theme.color.selection};
+  border: 1px solid ${({ theme }) => theme.color.gray1};
+  border-radius: 0.4rem;
+  color: ${({ theme }) => theme.color.foreground};
+  font-family: inherit;
+  font-size: 1.4rem;
+  line-height: 1.5;
+  resize: vertical;
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme }) => theme.color.foreground};
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.color.gray2};
+  }
+`
+
+const FormLabel = styled(Text)<{ align?: 'left' | 'center' }>`
+  text-align: ${props => props.align || 'left'};
+  width: 100%;
+`
+
+const ErrorText = styled(Text)`
+  color: ${({ theme }) => theme.color.red};
+  font-size: 1.2rem;
+  margin-top: 0.2rem;
+`
+
+type Props = {
+  active: boolean
+  onToggle: (active: boolean) => void
+  values: Config
+  onSave: (values: Config) => Promise<void>
+  onValuesChange: (values: Config) => void
+}
+
+export const InstanceSettingsPopper = ({ 
+  active, 
+  onToggle, 
+  values, 
+  onSave, 
+  onValuesChange,
+}: Props) => {
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSave = async () => {
+    if (!values?.instance_name?.trim()) {
+      setError("Instance name is required")
+      return
+    }
+    setError(null)
+    await onSave(values)
+    onToggle(false)
+  }
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValues = { ...values, instance_name: e.target.value }
+    onValuesChange(newValues)
+    if (error && e.target.value.trim()) {
+      setError(null)
+    }
+  }
+
+  return (
+    <PopperToggle 
+      active={active} 
+      onToggle={onToggle} 
+      placement="bottom-start"
+    >
+      <Wrapper>
+        <Box gap="1.5rem" flexDirection="column">
+          <FormGroup>
+            <FormLabel color="foreground">Instance Name</FormLabel>
+            <StyledInput
+              value={values.instance_name}
+              onChange={handleNameChange}
+              placeholder="Enter instance name"
+            />
+            {error && <ErrorText>{error}</ErrorText>}
+          </FormGroup>
+          <FormGroup>
+            <FormLabel color="foreground">Description</FormLabel>
+            <TextArea
+              value={values.instance_description}
+              onChange={(e) => onValuesChange({ ...values, instance_description: e.target.value })}
+              placeholder="Enter instance description"
+            />
+          </FormGroup>
+          <FormGroup>
+            <FormLabel color="foreground" align="center">Color</FormLabel>
+            <ColorSelector>
+              <ColorOption
+                color="default"
+                selected={values.instance_rgb === undefined}
+                onClick={() => onValuesChange({ ...values, instance_rgb: undefined })}
+              />
+              {["r", "g", "b"].map((color) => (
+                <ColorOption
+                  key={color}
+                  color={color}
+                  selected={values.instance_rgb === color}
+                  onClick={() => onValuesChange({ ...values, instance_rgb: color })}
+                />
+              ))}
+            </ColorSelector>
+          </FormGroup>
+          <Buttons>
+            <Button onClick={() => onToggle(false)} skin="secondary">
+              Cancel
+            </Button>
+            <Button onClick={handleSave}>Save</Button>
+          </Buttons>
+        </Box>
+      </Wrapper>
+    </PopperToggle>
+  )
+} 
\ No newline at end of file
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 1f0254039..c006c4d90 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -1,14 +1,17 @@
-import React, { useContext, useEffect, useState } from "react"
+import React, { useContext, useEffect, useState, useCallback } from "react"
 import styled from "styled-components"
 import { QuestContext, useAuth, useSettings } from "../../providers"
 import { Box, Button } from "@questdb/react-components"
 import * as QuestDB from "../../utils/questdb"
-import { User as UserIcon, LogoutCircle } from "@styled-icons/remix-line"
+import { User as UserIcon, LogoutCircle, Edit } from "@styled-icons/remix-line"
+import { InfoCircle } from "@styled-icons/boxicons-regular"
 import { Text } from "../Text"
 import { selectors } from "../../store"
 import { useSelector } from "react-redux"
 import { IconWithTooltip } from "../IconWithTooltip"
 import { hasUIAuth } from "../../modules/OAuth2/utils"
+import { InstanceSettingsPopper } from "./InstanceSettingsPopper"
+import { Config } from "../../utils/questdb/types"
 
 type ServerDetails = {
   instance_name: string | null
@@ -23,38 +26,88 @@ const Root = styled(Box).attrs({ align: "center" })`
   white-space: nowrap;
 `
 
-const Tag = styled(Box).attrs({ align: "center" })`
-  height: 2.8rem;
-  border-radius: 0.8rem;
+const Badge = styled(Box)<{ instance_rgb: ServerDetails["instance_rgb"], instance_name: ServerDetails["instance_name"] }>`
+  background: ${({ theme }) => theme.color.backgroundLighter};
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   padding: 0 1rem;
-  font-family: ${({ theme }) => theme.fontMonospace};
-  font-size: 1.6rem;
-  font-weight: 600;
-`
+  height: 3rem;
+  border-radius: 0.4rem;
 
-const Badge = styled(Tag)<{ instance_rgb: ServerDetails["instance_rgb"] }>`
-  color: #191a21;
-  background: #bbbbbb;
+  .instance-name {
+    font-size: 1.6rem;
+    color: ${({ theme }) => theme.color.gray2};
+    flex: 1;
+    display: inline-flex;
+    line-height: 1.6rem;
+    align-items: center;
+  }
+
+  .edit-icon {
+    cursor: pointer;
+    display: none;
+    color: inherit;
+    padding: 0.1rem;
+    background: inherit;
+    border-radius: 0.4rem;
+
+    &:hover {
+      color: ${({ theme }) => theme.color.backgroundLighter};
+      background: ${({ theme }) => theme.color.gray2};
+    }
+  }
+
+  &:hover {
+    .edit-icon {
+      display: inline;
+      width: 2.2rem;
+    }
+  }
 
   ${({ theme, instance_rgb }) =>
     instance_rgb === "r" &&
     `
-    color: ${theme.color.foreground};
     background: #c7072d;
+
+    .instance-name {
+      color: ${theme.color.foreground};
+    }
+
+    .edit-icon:hover {
+      background: ${theme.color.foreground};
+      color: #c7072d;
+    }
   `}
 
   ${({ theme, instance_rgb }) =>
     instance_rgb === "g" &&
     `
-    color: ${theme.color.foreground};
     background: #00aa3b;
+
+    .instance-name {
+      color: ${theme.color.foreground};
+    }
+
+    .edit-icon:hover {
+      background: ${theme.color.foreground};
+      color: #00aa3b;
+    }
   `}
 
   ${({ theme, instance_rgb }) =>
     instance_rgb === "b" &&
     `
-    color: ${theme.color.foreground};
     background: #007aff;
+
+    .instance-name {
+      color: ${theme.color.foreground};
+    }
+
+    .edit-icon:hover {
+      background: ${theme.color.foreground};
+      color: #007aff;
+    }
   `}
 `
 
@@ -82,38 +135,59 @@ export const Toolbar = () => {
   const { settings } = useSettings()
   const { logout } = useAuth()
   const result = useSelector(selectors.query.getResult)
-  const [serverDetails, setServerDetails] = useState<ServerDetails | null>(null)
+  const [currentUser, setCurrentUser] = useState<string | null>(null)
+  const [settingsPopperActive, setSettingsPopperActive] = useState(false)
+  const [configValues, setConfigValues] = useState<Config | null>(null)
+  const [previewValues, setPreviewValues] = useState<Config | null>(null)
 
   const fetchServerDetails = async () => {
     try {
       const response = await quest.query<ServerDetails>(
-        "SELECT instance_name, instance_rgb, current_user",
+        "SELECT current_user",
         {
           limit: "0,1",
         },
       )
       if (response.type === QuestDB.Type.DQL && response.count === 1) {
-        setServerDetails({
-          instance_name: response.data[0].instance_name,
-          instance_rgb: response.data[0].instance_rgb,
-          current_user: response.data[0].current_user,
-        })
+        setCurrentUser(response.data[0].current_user)
       }
     } catch (e) {
       return
     }
   }
 
+  const fetchConfig = async () => {
+    const config = await quest.getConfig()
+    setConfigValues(config)
+  }
+
   useEffect(() => {
     fetchServerDetails()
+    fetchConfig()
   }, [])
 
   useEffect(() => {
     if (result && result.type === QuestDB.Type.DDL) {
       fetchServerDetails()
+      fetchConfig()
     }
   }, [result])
 
+  const handleSaveSettings = async (values: Config) => {
+    try {
+      const config = await quest.saveConfig(values)
+      setConfigValues(config)
+    } catch (e) {
+      // Handle error
+      fetchConfig()
+    }
+  }
+
+  const handleToggle = useCallback((active: boolean) => {
+    setSettingsPopperActive(active)
+    setPreviewValues(active ? configValues : null)
+  }, [configValues])
+
   return (
     <Root>
       <Box gap="0.5rem">
@@ -127,20 +201,35 @@ export const Toolbar = () => {
         )}
       </Box>
       <Box gap="0.5rem">
-        {serverDetails && serverDetails.instance_name && (
-          <Badge instance_rgb={serverDetails.instance_rgb}
-                 onClick={() => quest.saveConfig({
-                   "instance_name": "db1",
-                   "instance_rgb": ""
-                 })}
+        {configValues && (
+          <Badge
+            instance_rgb={previewValues?.instance_rgb ?? configValues?.instance_rgb ?? null}
+            instance_name={previewValues?.instance_name ?? configValues?.instance_name ?? null}
           >
-            {serverDetails.instance_name}
+            {(previewValues?.instance_description || configValues?.instance_description) ? (
+              <IconWithTooltip
+                icon={<InfoCircle size="18px" />}
+                tooltip={previewValues?.instance_description ?? configValues?.instance_description}
+                placement="bottom"
+              />
+            ) : (
+              <InfoCircle size="18px" />
+            )}
+            <Text className="instance-name">{previewValues?.instance_name ?? configValues?.instance_name ?? "Unnamed instance"}</Text>
+            <Edit size="18px" className="edit-icon" onClick={() => handleToggle(true)} />
+            <InstanceSettingsPopper
+              active={settingsPopperActive}
+              onToggle={handleToggle}
+              values={previewValues ?? configValues}
+              onSave={handleSaveSettings}
+              onValuesChange={setPreviewValues}
+            />
           </Badge>
         )}
-        {settings["acl.enabled"] && serverDetails && serverDetails.current_user && (
+        {settings["acl.enabled"] && currentUser && (
           <User>
             <UserIcon size="18px" />
-            <Text color="foreground">{serverDetails.current_user}</Text>
+            <Text color="foreground">{currentUser}</Text>
           </User>
         )}
         {hasUIAuth(settings) && (
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index dc0db7046..fb7d07fdc 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -22,6 +22,7 @@ import {
   UploadOptions,
   UploadResult,
   Value,
+  Config,
 } from "./types"
 
 export class Client {
@@ -416,7 +417,23 @@ export class Client {
     })
   }
 
-  async saveConfig(config: any): Promise<any> {
+  async getConfig(): Promise<any> {
+    return Promise.resolve({
+      instance_name: "test instance",
+      instance_description: "Test instance description",
+    })
+    // try {
+    //   const response: Response = await fetch(
+    //     `config`,
+    //     { headers: this.commonHeaders },
+    //   )
+    //   return await response.json()
+    // } catch (error) {
+    //   throw error
+    // }
+  }
+
+  async saveConfig(config: Config): Promise<Config> {
     const formData = new FormData()
     formData.append("config", JSON.stringify(config))
 
diff --git a/packages/web-console/src/utils/questdb/types.ts b/packages/web-console/src/utils/questdb/types.ts
index 8f5f9f22c..f9ae33755 100644
--- a/packages/web-console/src/utils/questdb/types.ts
+++ b/packages/web-console/src/utils/questdb/types.ts
@@ -11,6 +11,12 @@ export enum Type {
   NOTICE = "notice",
 }
 
+export type Config = Partial<{
+  instance_name: string
+  instance_rgb: string
+  instance_description: string
+}>
+
 export type Timings = {
   compiler: number
   authentication: number

From 18a717f201d215c55131824639c04056a53a9a92 Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Tue, 6 May 2025 22:56:34 +0100
Subject: [PATCH 03/28] rename config to preferences

---
 .../cypress/integration/auth/auth.spec.js     | 94 ++++++++++---------
 .../integration/enterprise/oidc.spec.js       | 24 ++---
 packages/browser-tests/questdb                |  2 +-
 .../TopBar/InstanceSettingsPopper.tsx         | 12 +--
 .../src/components/TopBar/toolbar.tsx         | 41 ++++----
 .../src/providers/SettingsProvider/index.tsx  |  2 +-
 .../web-console/src/utils/questdb/client.ts   | 69 +++++---------
 .../web-console/src/utils/questdb/types.ts    |  3 +-
 packages/web-console/webpack.config.js        |  2 +-
 9 files changed, 122 insertions(+), 127 deletions(-)

diff --git a/packages/browser-tests/cypress/integration/auth/auth.spec.js b/packages/browser-tests/cypress/integration/auth/auth.spec.js
index fb738a32c..4707e0257 100644
--- a/packages/browser-tests/cypress/integration/auth/auth.spec.js
+++ b/packages/browser-tests/cypress/integration/auth/auth.spec.js
@@ -12,8 +12,10 @@ const interceptSettings = (payload) => {
 describe("OSS", () => {
   before(() => {
     interceptSettings({
-      "release.type": "OSS",
-      "release.version": "1.2.3",
+      "config": {
+        "release.type": "OSS",
+        "release.version": "1.2.3",
+      }
     });
     cy.visit(baseUrl);
   });
@@ -27,16 +29,18 @@ describe("OSS", () => {
 describe("Auth - UI", () => {
   before(() => {
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": true,
-      "acl.basic.auth.realm.enabled": false,
-      "acl.oidc.enabled": false,
-      "acl.oidc.client.id": null,
-      "acl.oidc.authorization.endpoint": null,
-      "acl.oidc.token.endpoint": null,
-      "acl.oidc.pkce.required": null,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": true,
+        "acl.basic.auth.realm.enabled": false,
+        "acl.oidc.enabled": false,
+        "acl.oidc.client.id": null,
+        "acl.oidc.authorization.endpoint": null,
+        "acl.oidc.token.endpoint": null,
+        "acl.oidc.pkce.required": null,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
   });
@@ -52,16 +56,18 @@ describe("Auth - UI", () => {
 describe("Auth - OIDC", () => {
   before(() => {
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": true,
-      "acl.basic.auth.realm.enabled": false,
-      "acl.oidc.enabled": true,
-      "acl.oidc.client.id": "test",
-      "acl.oidc.authorization.endpoint": "https://host:9999/auth",
-      "acl.oidc.token.endpoint": "https://host:9999/token",
-      "acl.oidc.pkce.required": true,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": true,
+        "acl.basic.auth.realm.enabled": false,
+        "acl.oidc.enabled": true,
+        "acl.oidc.client.id": "test",
+        "acl.oidc.authorization.endpoint": "https://host:9999/auth",
+        "acl.oidc.token.endpoint": "https://host:9999/token",
+        "acl.oidc.pkce.required": true,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
   });
@@ -77,16 +83,18 @@ describe("Auth - OIDC", () => {
 describe("Auth - Basic", () => {
   before(() => {
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": true,
-      "acl.basic.auth.realm.enabled": true,
-      "acl.oidc.enabled": false,
-      "acl.oidc.client.id": null,
-      "acl.oidc.authorization.endpoint": null,
-      "acl.oidc.token.endpoint": null,
-      "acl.oidc.pkce.required": null,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": true,
+        "acl.basic.auth.realm.enabled": true,
+        "acl.oidc.enabled": false,
+        "acl.oidc.client.id": null,
+        "acl.oidc.authorization.endpoint": null,
+        "acl.oidc.token.endpoint": null,
+        "acl.oidc.pkce.required": null,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
   });
@@ -100,16 +108,18 @@ describe("Auth - Basic", () => {
 describe("Auth - Disabled", () => {
   before(() => {
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": false,
-      "acl.basic.auth.realm.enabled": true,
-      "acl.oidc.enabled": false,
-      "acl.oidc.client.id": null,
-      "acl.oidc.authorization.endpoint": null,
-      "acl.oidc.token.endpoint": null,
-      "acl.oidc.pkce.required": null,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": false,
+        "acl.basic.auth.realm.enabled": true,
+        "acl.oidc.enabled": false,
+        "acl.oidc.client.id": null,
+        "acl.oidc.authorization.endpoint": null,
+        "acl.oidc.token.endpoint": null,
+        "acl.oidc.pkce.required": null,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
   });
diff --git a/packages/browser-tests/cypress/integration/enterprise/oidc.spec.js b/packages/browser-tests/cypress/integration/enterprise/oidc.spec.js
index cd23d1579..10bffeda6 100644
--- a/packages/browser-tests/cypress/integration/enterprise/oidc.spec.js
+++ b/packages/browser-tests/cypress/integration/enterprise/oidc.spec.js
@@ -35,17 +35,19 @@ describe("OIDC authentication", () => {
   beforeEach(() => {
     // load login page
     interceptSettings({
-      "release.type": "EE",
-      "release.version": "1.2.3",
-      "acl.enabled": true,
-      "acl.basic.auth.realm.enabled": false,
-      "acl.oidc.enabled": true,
-      "acl.oidc.client.id": "client1",
-      "acl.oidc.authorization.endpoint": oidcAuthorizationCodeUrl,
-      "acl.oidc.token.endpoint": oidcTokenUrl,
-      "acl.oidc.pkce.required": true,
-      "acl.oidc.state.required": false,
-      "acl.oidc.groups.encoded.in.token": false,
+      "config": {
+        "release.type": "EE",
+        "release.version": "1.2.3",
+        "acl.enabled": true,
+        "acl.basic.auth.realm.enabled": false,
+        "acl.oidc.enabled": true,
+        "acl.oidc.client.id": "client1",
+        "acl.oidc.authorization.endpoint": oidcAuthorizationCodeUrl,
+        "acl.oidc.token.endpoint": oidcTokenUrl,
+        "acl.oidc.pkce.required": true,
+        "acl.oidc.state.required": false,
+        "acl.oidc.groups.encoded.in.token": false,
+      }
     });
     cy.visit(baseUrl);
 
diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index e59924475..5a642446f 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit e599244757240330aa1b91b1c527f3a938a5ca52
+Subproject commit 5a642446fa7fbb0b2902fd0c18d4eef3a8d9f2a7
diff --git a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
index c45dee5e7..524799728 100644
--- a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
+++ b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useRef } from "react"
+import React, { useState } from "react"
 import styled from "styled-components"
 import { Box, Button, Input } from "@questdb/react-components"
 import { Text } from "../Text"
 import { PopperToggle } from "../PopperToggle"
-import { Config } from "../../utils/questdb/types"
+import { Preferences } from "../../utils"
 
 const Wrapper = styled.div`
   position: absolute;
@@ -109,9 +109,9 @@ const ErrorText = styled(Text)`
 type Props = {
   active: boolean
   onToggle: (active: boolean) => void
-  values: Config
-  onSave: (values: Config) => Promise<void>
-  onValuesChange: (values: Config) => void
+  values: Preferences
+  onSave: (values: Preferences) => Promise<void>
+  onValuesChange: (values: Preferences) => void
 }
 
 export const InstanceSettingsPopper = ({ 
@@ -194,4 +194,4 @@ export const InstanceSettingsPopper = ({
       </Wrapper>
     </PopperToggle>
   )
-} 
\ No newline at end of file
+} 
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index c006c4d90..80d5a4966 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -11,7 +11,7 @@ import { useSelector } from "react-redux"
 import { IconWithTooltip } from "../IconWithTooltip"
 import { hasUIAuth } from "../../modules/OAuth2/utils"
 import { InstanceSettingsPopper } from "./InstanceSettingsPopper"
-import { Config } from "../../utils/questdb/types"
+import { Preferences } from "../../utils"
 
 type ServerDetails = {
   instance_name: string | null
@@ -137,8 +137,8 @@ export const Toolbar = () => {
   const result = useSelector(selectors.query.getResult)
   const [currentUser, setCurrentUser] = useState<string | null>(null)
   const [settingsPopperActive, setSettingsPopperActive] = useState(false)
-  const [configValues, setConfigValues] = useState<Config | null>(null)
-  const [previewValues, setPreviewValues] = useState<Config | null>(null)
+  const [preferencesValues, setPreferencesValues] = useState<Preferences | null>(null)
+  const [previewValues, setPreviewValues] = useState<Preferences | null>(null)
 
   const fetchServerDetails = async () => {
     try {
@@ -156,37 +156,36 @@ export const Toolbar = () => {
     }
   }
 
-  const fetchConfig = async () => {
-    const config = await quest.getConfig()
-    setConfigValues(config)
+  const fetchPreferences = async () => {
+    const preferences = await quest.getPreferences()
+    setPreferencesValues(preferences)
   }
 
   useEffect(() => {
     fetchServerDetails()
-    fetchConfig()
+    fetchPreferences()
   }, [])
 
   useEffect(() => {
     if (result && result.type === QuestDB.Type.DDL) {
       fetchServerDetails()
-      fetchConfig()
+      fetchPreferences()
     }
   }, [result])
 
-  const handleSaveSettings = async (values: Config) => {
+  const handleSaveSettings = async (values: Preferences) => {
     try {
-      const config = await quest.saveConfig(values)
-      setConfigValues(config)
+      await quest.savePreferences(values, "overwrite")
     } catch (e) {
       // Handle error
-      fetchConfig()
     }
+    fetchPreferences()
   }
 
   const handleToggle = useCallback((active: boolean) => {
     setSettingsPopperActive(active)
-    setPreviewValues(active ? configValues : null)
-  }, [configValues])
+    setPreviewValues(active ? preferencesValues : null)
+  }, [preferencesValues])
 
   return (
     <Root>
@@ -201,26 +200,26 @@ export const Toolbar = () => {
         )}
       </Box>
       <Box gap="0.5rem">
-        {configValues && (
+        {preferencesValues && (
           <Badge
-            instance_rgb={previewValues?.instance_rgb ?? configValues?.instance_rgb ?? null}
-            instance_name={previewValues?.instance_name ?? configValues?.instance_name ?? null}
+            instance_rgb={previewValues?.instance_rgb ?? preferencesValues?.instance_rgb ?? null}
+            instance_name={previewValues?.instance_name ?? preferencesValues?.instance_name ?? null}
           >
-            {(previewValues?.instance_description || configValues?.instance_description) ? (
+            {(previewValues?.instance_description || preferencesValues?.instance_description) ? (
               <IconWithTooltip
                 icon={<InfoCircle size="18px" />}
-                tooltip={previewValues?.instance_description ?? configValues?.instance_description}
+                tooltip={previewValues?.instance_description ?? preferencesValues?.instance_description}
                 placement="bottom"
               />
             ) : (
               <InfoCircle size="18px" />
             )}
-            <Text className="instance-name">{previewValues?.instance_name ?? configValues?.instance_name ?? "Unnamed instance"}</Text>
+            <Text className="instance-name">{previewValues?.instance_name ?? preferencesValues?.instance_name ?? "Unnamed instance"}</Text>
             <Edit size="18px" className="edit-icon" onClick={() => handleToggle(true)} />
             <InstanceSettingsPopper
               active={settingsPopperActive}
               onToggle={handleToggle}
-              values={previewValues ?? configValues}
+              values={previewValues ?? preferencesValues}
               onSave={handleSaveSettings}
               onValuesChange={setPreviewValues}
             />
diff --git a/packages/web-console/src/providers/SettingsProvider/index.tsx b/packages/web-console/src/providers/SettingsProvider/index.tsx
index 233a6d68f..4621efba4 100644
--- a/packages/web-console/src/providers/SettingsProvider/index.tsx
+++ b/packages/web-console/src/providers/SettingsProvider/index.tsx
@@ -110,7 +110,7 @@ export const SettingsProvider = ({
         consoleConfigError,
       )
       if (settings) {
-        setSettings(settings)
+        setSettings(settings.config)
         setValue(StoreKey.RELEASE_TYPE, settings["release.type"])
       }
       if (warnings) {
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index fb7d07fdc..2eb46ddd9 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -22,7 +22,7 @@ import {
   UploadOptions,
   UploadResult,
   Value,
-  Config,
+  Preferences,
 } from "./types"
 
 export class Client {
@@ -417,50 +417,33 @@ export class Client {
     })
   }
 
-  async getConfig(): Promise<any> {
-    return Promise.resolve({
-      instance_name: "test instance",
-      instance_description: "Test instance description",
-    })
-    // try {
-    //   const response: Response = await fetch(
-    //     `config`,
-    //     { headers: this.commonHeaders },
-    //   )
-    //   return await response.json()
-    // } catch (error) {
-    //   throw error
-    // }
+  async getPreferences(): Promise<any> {
+    try {
+      const response: Response = await fetch(
+        `settings`,
+        { headers: this.commonHeaders },
+      )
+      const settings = await response.json()
+      return { version: settings["preferences.version"], ...settings.preferences }
+    } catch (error) {
+      throw error
+    }
   }
 
-  async saveConfig(config: Config): Promise<Config> {
-    const formData = new FormData()
-    formData.append("config", JSON.stringify(config))
-
-    return new Promise((resolve, reject) => {
-      let request = new XMLHttpRequest()
-      request.open("POST", "config")
-      Object.keys(this.commonHeaders).forEach((key) => {
-        request.setRequestHeader(key, this.commonHeaders[key])
-      })
-      request.onload = (_e) => {
-        if (request.status === 200) {
-          resolve(JSON.parse(request.response))
-        } else {
-          reject({
-            status: request.status,
-            statusText: request.statusText,
-          })
-        }
-      }
-      request.onerror = () => {
-        reject({
-          status: request.status,
-          statusText: request.statusText,
-        })
-      }
-      request.send(formData)
-    })
+  async savePreferences(preferences: Preferences, mode: string): Promise<void> {
+    const { version, ...prefs } = preferences;
+    const response: Response = await fetch(
+      `preferences?mode=${mode}&version=${version}`,
+      {
+        method: "POST",
+        headers: this.commonHeaders,
+        body: JSON.stringify(prefs),
+      },
+    )
+    await response.json()
+    if (!response.ok) {
+      throw new Error(`Status code: ${response.status}`);
+    }
   }
 
   async exportQueryToCsv(query: string) {
diff --git a/packages/web-console/src/utils/questdb/types.ts b/packages/web-console/src/utils/questdb/types.ts
index f9ae33755..5033601cb 100644
--- a/packages/web-console/src/utils/questdb/types.ts
+++ b/packages/web-console/src/utils/questdb/types.ts
@@ -11,7 +11,8 @@ export enum Type {
   NOTICE = "notice",
 }
 
-export type Config = Partial<{
+export type Preferences = Partial<{
+  version: number
   instance_name: string
   instance_rgb: string
   instance_description: string
diff --git a/packages/web-console/webpack.config.js b/packages/web-console/webpack.config.js
index bab049e3e..1923b8e9d 100644
--- a/packages/web-console/webpack.config.js
+++ b/packages/web-console/webpack.config.js
@@ -86,7 +86,7 @@ module.exports = {
         context: [
           config.contextPath + "/imp", config.contextPath + "/exp", config.contextPath + "/exec",
           config.contextPath + "/chk", config.contextPath + "/settings", config.contextPath + "/warnings",
-          config.contextPath + "/config"
+          config.contextPath + "/preferences"
         ],
         target: config.backendUrl,
       },

From 4490f5240cf530afe4460b466b36adaa6d151ac6 Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Wed, 7 May 2025 15:02:09 +0100
Subject: [PATCH 04/28] update submodule

---
 packages/browser-tests/questdb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 5a642446f..9703862b4 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 5a642446fa7fbb0b2902fd0c18d4eef3a8d9f2a7
+Subproject commit 9703862b424b8247e3733636ea290066e1fa6ed4

From 34d4b0c09edf9af5458448452879dd76e48ea6ca Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Thu, 8 May 2025 01:38:14 +0300
Subject: [PATCH 05/28] add popper loading, remove flicker upon save, shrink
 instance name if necessary

---
 .../TopBar/InstanceSettingsPopper.tsx         |  7 ++-
 .../src/components/TopBar/toolbar.tsx         | 62 +++++++++++--------
 .../src/scenes/Editor/Menu/index.tsx          |  2 +-
 3 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
index 524799728..e8f51365d 100644
--- a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
+++ b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import styled from "styled-components"
-import { Box, Button, Input } from "@questdb/react-components"
+import { Box, Button, Input, Loader } from "@questdb/react-components"
 import { Text } from "../Text"
 import { PopperToggle } from "../PopperToggle"
 import { Preferences } from "../../utils"
@@ -122,6 +122,7 @@ export const InstanceSettingsPopper = ({
   onValuesChange,
 }: Props) => {
   const [error, setError] = useState<string | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
 
   const handleSave = async () => {
     if (!values?.instance_name?.trim()) {
@@ -129,7 +130,9 @@ export const InstanceSettingsPopper = ({
       return
     }
     setError(null)
+    setIsSaving(true)
     await onSave(values)
+    setIsSaving(false)
     onToggle(false)
   }
 
@@ -188,7 +191,7 @@ export const InstanceSettingsPopper = ({
             <Button onClick={() => onToggle(false)} skin="secondary">
               Cancel
             </Button>
-            <Button onClick={handleSave}>Save</Button>
+            <Button prefixIcon={isSaving ? <Loader /> : undefined} onClick={handleSave}>Save</Button>
           </Buttons>
         </Box>
       </Wrapper>
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 28603a6d9..f87d95446 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -23,9 +23,10 @@ type ServerDetails = {
 
 const Root = styled(Box).attrs({ align: "center" })`
   gap: 1.5rem;
-  flex-shrink: 0;
   padding-left: 1.5rem;
   white-space: nowrap;
+  display: flex;
+  overflow: hidden;
 `
 
 const Badge = styled(Box)<{ instance_rgb: ServerDetails["instance_rgb"], instance_name: ServerDetails["instance_name"] }>`
@@ -36,14 +37,21 @@ const Badge = styled(Box)<{ instance_rgb: ServerDetails["instance_rgb"], instanc
   padding: 0 1rem;
   height: 3rem;
   border-radius: 0.4rem;
+  flex-shrink: 1;
+  min-width: 0;
 
   .instance-name {
     font-size: 1.6rem;
     color: ${({ theme }) => theme.color.gray2};
-    flex: 1;
-    display: inline-flex;
+    display: inline;
+    height: 1.6rem;
     line-height: 1.6rem;
-    align-items: center;
+    vertical-align: middle;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-shrink: 1;
+    min-width: 0;
   }
 
   .edit-icon {
@@ -53,6 +61,7 @@ const Badge = styled(Box)<{ instance_rgb: ServerDetails["instance_rgb"], instanc
     padding: 0.1rem;
     background: inherit;
     border-radius: 0.4rem;
+    flex-shrink: 0;
 
     &:hover {
       color: ${({ theme }) => theme.color.backgroundLighter};
@@ -141,10 +150,11 @@ export const Toolbar = () => {
   const [settingsPopperActive, setSettingsPopperActive] = useState(false)
   const [preferencesValues, setPreferencesValues] = useState<Preferences | null>(null)
   const [previewValues, setPreviewValues] = useState<Preferences | null>(null)
+  const shownValues = settingsPopperActive ? previewValues : preferencesValues
 
   const fetchServerDetails = async () => {
     try {
-      const response = await quest.query<ServerDetails>(
+      const response = await quest.query<{ current_user: string }>(
         "SELECT current_user",
         {
           limit: "0,1",
@@ -188,7 +198,7 @@ export const Toolbar = () => {
     } catch (e) {
       // Handle error
     }
-    fetchPreferences()
+    await fetchPreferences()
   }
 
   const handleToggle = useCallback((active: boolean) => {
@@ -208,32 +218,34 @@ export const Toolbar = () => {
           />
         )}
       </Box>
-      <Box gap="0.5rem">
-        {preferencesValues && (
-          <Badge
-            instance_rgb={previewValues?.instance_rgb ?? preferencesValues?.instance_rgb ?? null}
-            instance_name={previewValues?.instance_name ?? preferencesValues?.instance_name ?? null}
-          >
-            {(previewValues?.instance_description || preferencesValues?.instance_description) ? (
+      {preferencesValues && (
+        <Badge
+          instance_rgb={shownValues?.instance_rgb ?? null}
+          instance_name={shownValues?.instance_name ?? null}
+        >
+          <Box>
+            {(shownValues?.instance_description) ? (
               <IconWithTooltip
                 icon={<InfoCircle size="18px" />}
-                tooltip={previewValues?.instance_description ?? preferencesValues?.instance_description}
+                tooltip={shownValues?.instance_description}
                 placement="bottom"
               />
             ) : (
               <InfoCircle size="18px" />
             )}
-            <Text className="instance-name">{previewValues?.instance_name ?? preferencesValues?.instance_name ?? "Unnamed instance"}</Text>
-            <Edit size="18px" className="edit-icon" onClick={() => handleToggle(true)} />
-            <InstanceSettingsPopper
-              active={settingsPopperActive}
-              onToggle={handleToggle}
-              values={previewValues ?? preferencesValues}
-              onSave={handleSaveSettings}
-              onValuesChange={setPreviewValues}
-            />
-          </Badge>
-        )}
+          </Box>
+          <Text className="instance-name">{shownValues?.instance_name ?? "Unnamed instance"}</Text>
+          <Edit size="18px" className="edit-icon" onClick={() => handleToggle(true)} />
+          <InstanceSettingsPopper
+            active={settingsPopperActive}
+            onToggle={handleToggle}
+            values={previewValues ?? preferencesValues}
+            onSave={handleSaveSettings}
+            onValuesChange={setPreviewValues}
+          />
+        </Badge>
+      )}
+      <Box gap="0.5rem">
         {settings["acl.enabled"] && currentUser && (
           <User>
             <UserIcon size="18px" />
diff --git a/packages/web-console/src/scenes/Editor/Menu/index.tsx b/packages/web-console/src/scenes/Editor/Menu/index.tsx
index 8e7c4cb2a..361f7f9dd 100644
--- a/packages/web-console/src/scenes/Editor/Menu/index.tsx
+++ b/packages/web-console/src/scenes/Editor/Menu/index.tsx
@@ -51,10 +51,10 @@ import { Button } from "@questdb/react-components"
 import "@docsearch/css"
 
 const Wrapper = styled(PaneMenu)<{ _display: string }>`
-  width: 100%;
   background: transparent;
   z-index: 15;
   padding-right: 1rem;
+  flex-shrink: 0;
 
   .algolia-autocomplete {
     display: ${({ _display }) => _display} !important;

From ca1f7cfd4ff7162f2aadb9614ef25125403d1fdc Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Thu, 8 May 2025 01:39:36 +0300
Subject: [PATCH 06/28] update submodule

---
 packages/browser-tests/questdb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 9703862b4..de2f928e3 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 9703862b424b8247e3733636ea290066e1fa6ed4
+Subproject commit de2f928e3791433301a5e7dd7fa33375ff5043fa

From 4bece2d4f3d7bc7a9e41efd68465c63e094a9a83 Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Wed, 7 May 2025 23:50:09 +0100
Subject: [PATCH 07/28] update submodule

---
 packages/browser-tests/questdb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index de2f928e3..9703862b4 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit de2f928e3791433301a5e7dd7fa33375ff5043fa
+Subproject commit 9703862b424b8247e3733636ea290066e1fa6ed4

From 47571c512ae30a8a5cbc3ab9c6ec23e48e934d9f Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Thu, 8 May 2025 10:10:30 +0300
Subject: [PATCH 08/28] add test cases

---
 .../integration/console/topbar.spec.js        | 62 +++++++++++++++++++
 .../TopBar/InstanceSettingsPopper.tsx         |  8 ++-
 .../src/components/TopBar/toolbar.tsx         |  7 ++-
 3 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 packages/browser-tests/cypress/integration/console/topbar.spec.js

diff --git a/packages/browser-tests/cypress/integration/console/topbar.spec.js b/packages/browser-tests/cypress/integration/console/topbar.spec.js
new file mode 100644
index 000000000..4fde931bf
--- /dev/null
+++ b/packages/browser-tests/cypress/integration/console/topbar.spec.js
@@ -0,0 +1,62 @@
+/// <reference types="cypress" />
+
+describe("TopBar", () => {
+  beforeEach(() => {
+    cy.loadConsoleWithAuth();
+  });
+
+  it("should show the default instance name and no description", () => {
+    cy.getByDataHook("topbar-instance-name").should(
+      "have.text",
+      "Unnamed instance"
+    );
+    cy.getByDataHook("topbar-instance-badge").should(
+      "have.css",
+      "background-color",
+      "rgb(40, 42, 54)"
+    );
+  });
+
+  it("should preview the color, show error when instance name is empty, and don't save changes on cancel", () => {
+    cy.getByDataHook("topbar-instance-name").realHover();
+    cy.getByDataHook("topbar-instance-edit-icon").should("be.visible");
+    cy.getByDataHook("topbar-instance-edit-icon").click();
+    cy.getByDataHook("topbar-instance-color-option-r").click();
+    cy.getByDataHook("topbar-instance-badge").should(
+      "have.css",
+      "background-color",
+      "rgb(199, 7, 45)"
+    );
+    cy.getByDataHook("topbar-instance-save-button").click();
+    cy.contains("Instance name is required").should("be.visible");
+    cy.getByDataHook("topbar-instance-cancel-button").click();
+    cy.getByDataHook("topbar-instance-name").should(
+      "have.text",
+      "Unnamed instance"
+    );
+    cy.getByDataHook("topbar-instance-badge").should(
+      "have.css",
+      "background-color",
+      "rgb(40, 42, 54)"
+    );
+  });
+
+  it("should change the instance name and description", () => {
+    cy.getByDataHook("topbar-instance-badge").realHover();
+    cy.getByDataHook("topbar-instance-edit-icon").should("be.visible");
+    cy.getByDataHook("topbar-instance-edit-icon").click();
+    cy.getByDataHook("topbar-instance-name-input").type("test-instance");
+    cy.getByDataHook("topbar-instance-description-input").type(
+      "test description of the test instance"
+    );
+    cy.getByDataHook("topbar-instance-color-option-g").click();
+    cy.getByDataHook("topbar-instance-save-button").click();
+    cy.getByDataHook("topbar-instance-save-button").should("not.exist");
+    cy.getByDataHook("topbar-instance-name").should(
+      "have.text",
+      "test-instance"
+    );
+    cy.getByDataHook("topbar-instance-info").realHover();
+    cy.contains("test description of the test instance").should("be.visible");
+  });
+});
diff --git a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
index e8f51365d..ed1162e3e 100644
--- a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
+++ b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
@@ -155,6 +155,7 @@ export const InstanceSettingsPopper = ({
           <FormGroup>
             <FormLabel color="foreground">Instance Name</FormLabel>
             <StyledInput
+              data-hook="topbar-instance-name-input"
               value={values.instance_name}
               onChange={handleNameChange}
               placeholder="Enter instance name"
@@ -164,6 +165,7 @@ export const InstanceSettingsPopper = ({
           <FormGroup>
             <FormLabel color="foreground">Description</FormLabel>
             <TextArea
+              data-hook="topbar-instance-description-input"
               value={values.instance_description}
               onChange={(e) => onValuesChange({ ...values, instance_description: e.target.value })}
               placeholder="Enter instance description"
@@ -176,6 +178,7 @@ export const InstanceSettingsPopper = ({
                 color="default"
                 selected={values.instance_rgb === undefined}
                 onClick={() => onValuesChange({ ...values, instance_rgb: undefined })}
+                data-hook="topbar-instance-color-option-default"
               />
               {["r", "g", "b"].map((color) => (
                 <ColorOption
@@ -183,15 +186,16 @@ export const InstanceSettingsPopper = ({
                   color={color}
                   selected={values.instance_rgb === color}
                   onClick={() => onValuesChange({ ...values, instance_rgb: color })}
+                  data-hook={`topbar-instance-color-option-${color}`}
                 />
               ))}
             </ColorSelector>
           </FormGroup>
           <Buttons>
-            <Button onClick={() => onToggle(false)} skin="secondary">
+            <Button onClick={() => onToggle(false)} skin="secondary" data-hook="topbar-instance-cancel-button">
               Cancel
             </Button>
-            <Button prefixIcon={isSaving ? <Loader /> : undefined} onClick={handleSave}>Save</Button>
+            <Button prefixIcon={isSaving ? <Loader /> : undefined} onClick={handleSave} data-hook="topbar-instance-save-button">Save</Button>
           </Buttons>
         </Box>
       </Wrapper>
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index f87d95446..2fce9bf9a 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -222,8 +222,9 @@ export const Toolbar = () => {
         <Badge
           instance_rgb={shownValues?.instance_rgb ?? null}
           instance_name={shownValues?.instance_name ?? null}
+          data-hook="topbar-instance-badge"
         >
-          <Box>
+          <Box data-hook="topbar-instance-info">
             {(shownValues?.instance_description) ? (
               <IconWithTooltip
                 icon={<InfoCircle size="18px" />}
@@ -234,8 +235,8 @@ export const Toolbar = () => {
               <InfoCircle size="18px" />
             )}
           </Box>
-          <Text className="instance-name">{shownValues?.instance_name ?? "Unnamed instance"}</Text>
-          <Edit size="18px" className="edit-icon" onClick={() => handleToggle(true)} />
+          <Text data-hook="topbar-instance-name" className="instance-name">{shownValues?.instance_name ?? "Unnamed instance"}</Text>
+          <Edit data-hook="topbar-instance-edit-icon" size="18px" className="edit-icon" onClick={() => handleToggle(true)} />
           <InstanceSettingsPopper
             active={settingsPopperActive}
             onToggle={handleToggle}

From 021db2c153a7cca9b8925b1a8152a6d081ec8a05 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Fri, 9 May 2025 18:02:12 +0300
Subject: [PATCH 09/28] address review comments

---
 .../src/components/PopperToggle/index.tsx     |  17 +-
 .../TopBar/InstanceSettingsPopper.tsx         | 334 ++++++++++++++++--
 .../src/components/TopBar/toolbar.tsx         | 200 +++++++++--
 .../web-console/src/utils/questdb/client.ts   |   2 +-
 4 files changed, 480 insertions(+), 73 deletions(-)

diff --git a/packages/web-console/src/components/PopperToggle/index.tsx b/packages/web-console/src/components/PopperToggle/index.tsx
index bbbc53595..17929a47f 100644
--- a/packages/web-console/src/components/PopperToggle/index.tsx
+++ b/packages/web-console/src/components/PopperToggle/index.tsx
@@ -95,6 +95,19 @@ export const PopperToggle = ({
     [container, onToggle, triggerElement],
   )
 
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape" && _active) {
+        setActive(false)
+        
+        if (onToggle) {
+          onToggle(false)
+        }
+      }
+    },
+    [_active, onToggle],
+  )
+
   usePopperStyles(container, styles.popper)
 
   useTransition(container, _active, transitionTimeoutId)
@@ -106,15 +119,17 @@ export const PopperToggle = ({
   useEffect(() => {
     document.addEventListener("mousedown", handleMouseDown)
     document.addEventListener("touchstart", handleMouseDown)
+    document.addEventListener("keydown", handleKeyDown)
 
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       clearTimeout(transitionTimeoutId.current)
       document.removeEventListener("mousedown", handleMouseDown)
       document.removeEventListener("touchstart", handleMouseDown)
+      document.removeEventListener("keydown", handleKeyDown)
       document.body.contains(container) && document.body.removeChild(container)
     }
-  }, [container, handleMouseDown])
+  }, [container, handleMouseDown, handleKeyDown])
 
   return (
     <>
diff --git a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
index ed1162e3e..9cc6ff5f8 100644
--- a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
+++ b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
@@ -1,14 +1,12 @@
-import React, { useState } from "react"
+import React, { useState, FormEvent, ReactNode, useRef, useEffect } from "react"
 import styled from "styled-components"
 import { Box, Button, Input, Loader } from "@questdb/react-components"
 import { Text } from "../Text"
 import { PopperToggle } from "../PopperToggle"
-import { Preferences } from "../../utils"
+import { Preferences } from "../../utils/questdb/types"
 
 const Wrapper = styled.div`
   position: absolute;
-  left: 13.5rem;
-  top: 4.5rem;
   margin-top: 0.5rem;
   background: ${({ theme }) => theme.color.backgroundDarker};
   border: 1px solid ${({ theme }) => theme.color.gray1};
@@ -21,15 +19,20 @@ const Wrapper = styled.div`
 const ColorSelector = styled.div`
   display: flex;
   gap: 1rem;
+  flex-wrap: wrap;
 `
 
-const ColorOption = styled.div<{ color: string; selected: boolean }>`
+const ColorOption = styled.button<{ colorValue: string; selected: boolean; customColor?: string }>`
   width: 3rem;
   height: 3rem;
   border-radius: 0.4rem;
   cursor: pointer;
-  background: ${({ color, theme }) => {
-    switch (color) {
+  border: 2px solid ${({ theme, selected }) => (selected ? theme.color.foreground : "transparent")};
+  padding: 0;
+  background: ${({ colorValue, theme, customColor }) => {
+    if (customColor) return customColor;
+    
+    switch (colorValue) {
       case "r":
         return "#c7072d"
       case "g":
@@ -42,13 +45,128 @@ const ColorOption = styled.div<{ color: string; selected: boolean }>`
         return "transparent"
     }
   }};
-  border: 2px solid ${({ theme, selected }) => (selected ? theme.color.foreground : "transparent")};
+  
+  &:focus-visible {
+    outline: 1px solid ${({ theme }) => theme.color.cyan};
+  }
+`
+
+const ColorWheelOption = styled.button<{ selected: boolean }>`
+  position: relative;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  border: ${({ selected, theme }) => selected ? `2px solid ${theme.color.foreground}` : "0"};
+  padding: 0;
+  overflow: hidden;
+
+  &:focus-visible {
+    outline: 1px solid ${({ theme }) => theme.color.cyan};
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: conic-gradient(
+    #ff0000,
+    #ffff00,
+    #00ff00,
+    #00ffff,
+    #0000ff,
+    #ff00ff,
+    #ff0000
+    );
+  }
+`
+
+const ColorPickerContainer = styled.div`
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`
+
+const ColorInputRow = styled.div`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+`
+
+const ColorSlider = styled.input.attrs({ type: 'range', min: 0, max: 255 })`
+  flex: 1;
+  height: 1rem;
+  appearance: none;
+  background: linear-gradient(to right, rgb(0,0,0), rgb(255,0,0));
+  border-radius: 0.5rem;
+  
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 1.8rem;
+    height: 1.8rem;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+    border: 1px solid ${({ theme }) => theme.color.gray1};
+  }
+  
+  &.red {
+    background: linear-gradient(to right, rgb(0,0,0), rgb(255,0,0));
+  }
+  
+  &.green {
+    background: linear-gradient(to right, rgb(0,0,0), rgb(0,255,0));
+  }
+  
+  &.blue {
+    background: linear-gradient(to right, rgb(0,0,0), rgb(0,0,255));
+  }
+`
+
+const ColorValueInput = styled.input.attrs({ type: 'number', min: 0, max: 255 })`
+  width: 6rem;
+  padding: 0.5rem;
+  background: ${({ theme }) => theme.color.selection};
+  border: 1px solid ${({ theme }) => theme.color.gray1};
+  border-radius: 0.4rem;
+  color: ${({ theme }) => theme.color.foreground};
+  
+  &:focus {
+    outline: none;
+    border-color: ${({ theme }) => theme.color.cyan};
+  }
+`
+
+const ColorPreview = styled.div<{ color: string }>`
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.4rem;
+  background: ${({ color }) => color};
+  border: 1px solid ${({ theme }) => theme.color.gray1};
+`
+
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`
+
+const StyledButton = styled(Button)`
+  font-size: 1.6rem;
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.cyan};
+  }
 `
 
 const Buttons = styled(Box)`
   margin-top: 1.5rem;
   gap: 1rem;
   justify-content: flex-end;
+  flex-direction: row-reverse;
 `
 
 const FormGroup = styled(Box).attrs({ flexDirection: "column", gap: "0.5rem" })`
@@ -64,7 +182,7 @@ const StyledInput = styled(Input)`
 
   &:focus {
     outline: none;
-    border-color: ${({ theme }) => theme.color.foreground};
+    border-color: ${({ theme }) => theme.color.cyan};
   }
 
   &::placeholder {
@@ -87,7 +205,7 @@ const TextArea = styled.textarea`
 
   &:focus {
     outline: none;
-    border-color: ${({ theme }) => theme.color.foreground};
+    border-color: ${({ theme }) => theme.color.cyan};
   }
 
   &::placeholder {
@@ -95,9 +213,10 @@ const TextArea = styled.textarea`
   }
 `
 
-const FormLabel = styled(Text)<{ align?: 'left' | 'center' }>`
+const FormLabel = styled.label<{ align?: 'left' | 'center' }>`
   text-align: ${props => props.align || 'left'};
   width: 100%;
+  font-size: 1.6rem;
 `
 
 const ErrorText = styled(Text)`
@@ -112,6 +231,7 @@ type Props = {
   values: Preferences
   onSave: (values: Preferences) => Promise<void>
   onValuesChange: (values: Preferences) => void
+  trigger: ReactNode
 }
 
 export const InstanceSettingsPopper = ({ 
@@ -120,20 +240,48 @@ export const InstanceSettingsPopper = ({
   values, 
   onSave, 
   onValuesChange,
+  trigger,
 }: Props) => {
   const [error, setError] = useState<string | null>(null)
   const [isSaving, setIsSaving] = useState(false)
+  const [showCustomColor, setShowCustomColor] = useState(false)
+  const [rgbValues, setRgbValues] = useState({ r: 0, g: 0, b: 0 })
+  const inputRef = useRef<HTMLInputElement>(null)
 
-  const handleSave = async () => {
+  // Parse RGB values when component mounts or values change
+  useEffect(() => {
+    if (values.instance_rgb && values.instance_rgb.startsWith('rgb')) {
+      setShowCustomColor(true)
+      const matches = values.instance_rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+      if (matches) {
+        setRgbValues({
+          r: parseInt(matches[1], 10),
+          g: parseInt(matches[2], 10),
+          b: parseInt(matches[3], 10)
+        })
+      }
+    } else {
+      setShowCustomColor(false)
+    }
+  }, [values.instance_rgb])
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    
     if (!values?.instance_name?.trim()) {
       setError("Instance name is required")
       return
     }
+    
     setError(null)
     setIsSaving(true)
-    await onSave(values)
-    setIsSaving(false)
-    onToggle(false)
+    
+    try {
+      await onSave(values)
+      onToggle(false)
+    } finally {
+      setIsSaving(false)
+    }
   }
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -144,27 +292,65 @@ export const InstanceSettingsPopper = ({
     }
   }
 
+  const handleColorSelect = (color: string | undefined) => {
+    onValuesChange({ ...values, instance_rgb: color })
+    if (color !== 'custom') {
+      setShowCustomColor(false)
+    }
+  }
+
+  const handleCustomColorSelect = () => {
+    setShowCustomColor(true)
+    onValuesChange({ ...values, instance_rgb: rgbColorString })
+  }
+
+  const handleRgbChange = (component: 'r' | 'g' | 'b', value: number) => {
+    const newValues = { ...rgbValues, [component]: value }
+    setRgbValues(newValues)
+    const newRgbColor = `rgb(${newValues.r}, ${newValues.g}, ${newValues.b})`
+    onValuesChange({ ...values, instance_rgb: newRgbColor })
+  }
+
+  useEffect(() => {
+    if (active) {
+      setTimeout(() => {
+        inputRef.current?.focus()
+      }, 100)
+    }
+  }, [active])
+
+  // Generate the current RGB color string
+  const rgbColorString = `rgb(${rgbValues.r}, ${rgbValues.g}, ${rgbValues.b})`
+
+  const wheelSelected = Boolean(values.instance_rgb?.startsWith('rgb'))
+  console.log(wheelSelected)
+
   return (
     <PopperToggle 
       active={active} 
       onToggle={onToggle} 
+      trigger={trigger}
       placement="bottom-start"
     >
       <Wrapper>
-        <Box gap="1.5rem" flexDirection="column">
+        <StyledForm onSubmit={handleSubmit}>
           <FormGroup>
-            <FormLabel color="foreground">Instance Name</FormLabel>
+            <FormLabel htmlFor="instance-name-input">Instance Name</FormLabel>
             <StyledInput
+              id="instance-name-input"
               data-hook="topbar-instance-name-input"
               value={values.instance_name}
               onChange={handleNameChange}
               placeholder="Enter instance name"
+              ref={inputRef}
             />
             {error && <ErrorText>{error}</ErrorText>}
           </FormGroup>
+          
           <FormGroup>
-            <FormLabel color="foreground">Description</FormLabel>
+            <FormLabel htmlFor="instance-description-input">Description</FormLabel>
             <TextArea
+              id="instance-description-input"
               data-hook="topbar-instance-description-input"
               value={values.instance_description}
               onChange={(e) => onValuesChange({ ...values, instance_description: e.target.value })}
@@ -172,32 +358,110 @@ export const InstanceSettingsPopper = ({
             />
           </FormGroup>
           <FormGroup>
-            <FormLabel color="foreground" align="center">Color</FormLabel>
+            <FormLabel color="foreground">Color</FormLabel>
             <ColorSelector>
               <ColorOption
-                color="default"
-                selected={values.instance_rgb === undefined}
-                onClick={() => onValuesChange({ ...values, instance_rgb: undefined })}
+                type="button"
+                colorValue="default"
+                selected={!values.instance_rgb || values.instance_rgb === ''}
+                onClick={() => handleColorSelect('')}
                 data-hook="topbar-instance-color-option-default"
               />
-              {["r", "g", "b"].map((color) => (
-                <ColorOption
-                  key={color}
-                  color={color}
-                  selected={values.instance_rgb === color}
-                  onClick={() => onValuesChange({ ...values, instance_rgb: color })}
-                  data-hook={`topbar-instance-color-option-${color}`}
-                />
-              ))}
+              <ColorOption
+                type="button"
+                colorValue="r"
+                selected={values.instance_rgb === "r"}
+                onClick={() => handleColorSelect("r")}
+                data-hook="topbar-instance-color-option-r"
+              />
+              <ColorOption
+                type="button"
+                colorValue="g"
+                selected={values.instance_rgb === "g"}
+                onClick={() => handleColorSelect("g")}
+                data-hook="topbar-instance-color-option-g"
+              />
+              <ColorOption
+                type="button"
+                colorValue="b"
+                selected={values.instance_rgb === "b"}
+                onClick={() => handleColorSelect("b")}
+                data-hook="topbar-instance-color-option-b"
+              />
+              <ColorWheelOption
+                type="button"
+                selected={Boolean(values.instance_rgb?.startsWith('rgb'))}
+                onClick={handleCustomColorSelect}
+                data-hook="topbar-instance-color-option-custom"
+              />
             </ColorSelector>
+            
+            {showCustomColor && (
+              <ColorPickerContainer>
+                <ColorInputRow>
+                  <Text color="foreground">R</Text>
+                  <ColorSlider 
+                    className="red"
+                    value={rgbValues.r} 
+                    onChange={(e) => handleRgbChange('r', parseInt(e.target.value, 10))}
+                    data-hook="topbar-instance-color-slider-r"
+                  />
+                  <ColorValueInput 
+                    value={rgbValues.r}
+                    onChange={(e) => handleRgbChange('r', parseInt(e.target.value, 10))}
+                    data-hook="topbar-instance-color-input-r"
+                  />
+                </ColorInputRow>
+                <ColorInputRow>
+                  <Text color="foreground">G</Text>
+                  <ColorSlider 
+                    className="green"
+                    value={rgbValues.g} 
+                    onChange={(e) => handleRgbChange('g', parseInt(e.target.value, 10))}
+                    data-hook="topbar-instance-color-slider-g"
+                  />
+                  <ColorValueInput 
+                    value={rgbValues.g}
+                    onChange={(e) => handleRgbChange('g', parseInt(e.target.value, 10))}
+                    data-hook="topbar-instance-color-input-g"
+                  />
+                </ColorInputRow>
+                <ColorInputRow>
+                  <Text color="foreground">B</Text>
+                  <ColorSlider 
+                    className="blue"
+                    value={rgbValues.b} 
+                    onChange={(e) => handleRgbChange('b', parseInt(e.target.value, 10))}
+                    data-hook="topbar-instance-color-slider-b"
+                  />
+                  <ColorValueInput 
+                    value={rgbValues.b}
+                    onChange={(e) => handleRgbChange('b', parseInt(e.target.value, 10))}
+                    data-hook="topbar-instance-color-input-b"
+                  />
+                </ColorInputRow>
+              </ColorPickerContainer>
+            )}
           </FormGroup>
+          
           <Buttons>
-            <Button onClick={() => onToggle(false)} skin="secondary" data-hook="topbar-instance-cancel-button">
+            <StyledButton 
+              type="submit"
+              prefixIcon={isSaving ? <Loader /> : undefined} 
+              data-hook="topbar-instance-save-button"
+            >
+              Save
+            </StyledButton>
+            <StyledButton 
+              type="button"
+              onClick={() => onToggle(false)} 
+              skin="secondary" 
+              data-hook="topbar-instance-cancel-button"
+            >
               Cancel
-            </Button>
-            <Button prefixIcon={isSaving ? <Loader /> : undefined} onClick={handleSave} data-hook="topbar-instance-save-button">Save</Button>
+            </StyledButton>
           </Buttons>
-        </Box>
+        </StyledForm>
       </Wrapper>
     </PopperToggle>
   )
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 2fce9bf9a..575f43188 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -13,12 +13,40 @@ import { hasUIAuth, setSSOUserNameWithClientID } from "../../modules/OAuth2/util
 import { getValue } from "../../utils/localStorage"
 import { StoreKey } from "../../utils/localStorage/types"
 import { InstanceSettingsPopper } from "./InstanceSettingsPopper"
-import { Preferences } from "../../utils"
+import { Preferences } from "../../utils/questdb/types"
+import { PopperHover, Placement } from "../"
+import { useTheme } from "styled-components"
 
-type ServerDetails = {
-  instance_name: string | null
-  instance_rgb: string | null
-  current_user: string | null
+const getTextColor = (backgroundColor: string | null, theme?: any): string => {
+  if (!backgroundColor || !backgroundColor.startsWith('rgb')) {
+    return theme?.color.foreground || "inherit";
+  }
+  
+  const matches = backgroundColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+  if (matches) {
+    const r = parseInt(matches[1], 10) / 255
+    const g = parseInt(matches[2], 10) / 255
+    const b = parseInt(matches[3], 10) / 255
+    
+    // Convert RGB to sRGB for better perceptual accuracy
+    const R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
+    const G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
+    const B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
+    
+    // Calculate relative luminance using WCAG formula
+    const luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B
+
+    if (luminance < 0.25) {
+      return theme?.color.foreground;
+    } else if (luminance < 0.50) {
+      return theme?.color.gray2;
+    } else if (luminance < 0.75) {
+      return theme?.color.gray1; 
+    } else {
+      return theme?.color.background;
+    }
+  }
+  return theme?.color.foreground || "inherit";
 }
 
 const Root = styled(Box).attrs({ align: "center" })`
@@ -29,35 +57,123 @@ const Root = styled(Box).attrs({ align: "center" })`
   overflow: hidden;
 `
 
-const Badge = styled(Box)<{ instance_rgb: ServerDetails["instance_rgb"], instance_name: ServerDetails["instance_name"] }>`
+const CustomTooltipWrapper = styled.div<{ instance_rgb?: string | null }>`
+  position: relative;
+  max-width: 460px;
+  padding: 0.4rem;
+  transform: translateY(-1rem);
+  background: ${({ theme }) => theme.color.backgroundDarker};
+  border: 1px solid ${({ theme }) => theme.color.gray1};
+  border-radius: 4px;
+  
+  ${({ instance_rgb, theme }) =>
+    instance_rgb === "r" &&
+    `
+    background: rgba(199, 7, 45, 0.95);
+    border-color: #c7072d;
+    color: ${getTextColor("r", theme)};
+  `}
+
+  ${({ instance_rgb, theme }) =>
+    instance_rgb === "g" &&
+    `
+    background: rgba(0, 170, 59, 0.95);
+    border-color: #00aa3b;
+    color: ${getTextColor("g", theme)};
+  `}
+
+  ${({ instance_rgb, theme }) =>
+    instance_rgb === "b" &&
+    `
+    background: rgba(0, 122, 255, 0.95);
+    border-color: #007aff;
+    color: ${getTextColor("b", theme)};
+  `}
+  
+  ${({ instance_rgb, theme }) =>
+    instance_rgb?.startsWith('rgb') &&
+    `
+    background: ${instance_rgb.replace('rgb', 'rgba').replace(')', ', 0.95)')};
+    border-color: ${instance_rgb};
+    color: ${getTextColor(instance_rgb, theme)};
+  `}
+`
+
+const CustomTooltipText = styled.div<{ instance_rgb?: string | null }>`
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: ${({ theme, instance_rgb }) => instance_rgb ? getTextColor(instance_rgb, theme) : theme.color.foreground};
+`
+
+const CustomTooltip = ({ 
+  children, 
+  instance_rgb
+}: { 
+  children: React.ReactNode, 
+  instance_rgb?: string | null
+}) => (
+  <CustomTooltipWrapper instance_rgb={instance_rgb} data-hook="tooltip">
+    <CustomTooltipText instance_rgb={instance_rgb}>{children}</CustomTooltipText>
+  </CustomTooltipWrapper>
+)
+
+const CustomIconWithTooltip = ({ 
+  icon, 
+  tooltip, 
+  placement, 
+  instance_rgb
+}: { 
+  icon: React.ReactNode, 
+  tooltip: React.ReactNode, 
+  placement: Placement,
+  instance_rgb?: string | null
+}) => (
+  <PopperHover 
+    placement={placement} 
+    trigger={icon} 
+    modifiers={[
+      {
+        name: "offset",
+        options: { offset: [0, 12] },
+      }
+    ]}
+  >
+    <CustomTooltip instance_rgb={instance_rgb}>
+      {tooltip}
+    </CustomTooltip>
+  </PopperHover>
+)
+
+const Badge = styled(Box)<{ instance_rgb: Preferences["instance_rgb"] | null, $textColor: string }>`
   background: ${({ theme }) => theme.color.backgroundLighter};
   display: flex;
   align-items: center;
-  gap: 1rem;
   padding: 0 1rem;
+  padding-left: 0.3rem;
   height: 3rem;
   border-radius: 0.4rem;
   flex-shrink: 1;
   min-width: 0;
+  gap: 0;
 
   .instance-name {
     font-size: 1.6rem;
     color: ${({ theme }) => theme.color.gray2};
     display: inline;
-    height: 1.6rem;
-    line-height: 1.6rem;
     vertical-align: middle;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     flex-shrink: 1;
     min-width: 0;
+    margin-left: 0.3rem;
   }
 
   .edit-icon {
     cursor: pointer;
-    display: none;
-    color: inherit;
+    display: inline;
+    width: 0;
+    color: $;
     padding: 0.1rem;
     background: inherit;
     border-radius: 0.4rem;
@@ -71,57 +187,65 @@ const Badge = styled(Box)<{ instance_rgb: ServerDetails["instance_rgb"], instanc
 
   &:hover {
     .edit-icon {
-      display: inline;
       width: 2.2rem;
+      margin-left: 1rem;
     }
   }
 
-  ${({ theme, instance_rgb }) =>
+  ${({ instance_rgb, $textColor }) => instance_rgb && `
+    .instance-name {
+      color: ${$textColor};
+    }
+
+    .edit-icon {
+      color: ${$textColor};
+    }
+
+    .edit-icon:hover {
+      background: ${$textColor};
+    }
+  `}
+
+  ${({ $textColor, instance_rgb }) =>
     instance_rgb === "r" &&
     `
     background: #c7072d;
 
-    .instance-name {
-      color: ${theme.color.foreground};
-    }
-
     .edit-icon:hover {
-      background: ${theme.color.foreground};
       color: #c7072d;
     }
   `}
 
-  ${({ theme, instance_rgb }) =>
+  ${({ $textColor, instance_rgb }) =>
     instance_rgb === "g" &&
     `
     background: #00aa3b;
 
-    .instance-name {
-      color: ${theme.color.foreground};
-    }
-
     .edit-icon:hover {
-      background: ${theme.color.foreground};
       color: #00aa3b;
     }
   `}
 
-  ${({ theme, instance_rgb }) =>
+  ${({ $textColor, instance_rgb }) =>
     instance_rgb === "b" &&
     `
     background: #007aff;
 
-    .instance-name {
-      color: ${theme.color.foreground};
+    .edit-icon:hover {
+      color: #007aff;
     }
+  `}
+  
+  ${({ theme, instance_rgb }) =>
+    instance_rgb?.startsWith('rgb') &&
+    `
+    background: ${instance_rgb};
 
     .edit-icon:hover {
-      background: ${theme.color.foreground};
-      color: #007aff;
+      color: ${instance_rgb};
     }
   `}
 `
-
 const User = styled(Box).attrs({ gap: "0.5rem" })`
   background: ${({ theme }) => theme.color.backgroundLighter};
   border-radius: 0.4rem;
@@ -129,7 +253,6 @@ const User = styled(Box).attrs({ gap: "0.5rem" })`
   padding: 0 1rem;
   font-weight: 600;
 `
-
 const EnterpriseBadge = styled.span`
   padding: 0 4px;
   background: ${({ theme }) => theme.color.pinkDarker};
@@ -151,6 +274,8 @@ export const Toolbar = () => {
   const [preferencesValues, setPreferencesValues] = useState<Preferences | null>(null)
   const [previewValues, setPreviewValues] = useState<Preferences | null>(null)
   const shownValues = settingsPopperActive ? previewValues : preferencesValues
+  const theme = useTheme()
+  const textColor = getTextColor(shownValues?.instance_rgb ?? null, theme)
 
   const fetchServerDetails = async () => {
     try {
@@ -220,29 +345,32 @@ export const Toolbar = () => {
       </Box>
       {preferencesValues && (
         <Badge
+          $textColor={textColor}
           instance_rgb={shownValues?.instance_rgb ?? null}
-          instance_name={shownValues?.instance_name ?? null}
           data-hook="topbar-instance-badge"
         >
           <Box data-hook="topbar-instance-info">
             {(shownValues?.instance_description) ? (
-              <IconWithTooltip
-                icon={<InfoCircle size="18px" />}
+              <CustomIconWithTooltip
+                icon={<div style={{ color: textColor, padding: '0.7rem' }}><InfoCircle size="18px" /></div>}
                 tooltip={shownValues?.instance_description}
                 placement="bottom"
+                instance_rgb={shownValues?.instance_rgb}
               />
             ) : (
-              <InfoCircle size="18px" />
+              <div style={{ color: textColor, padding: '0.7rem' }}>
+                <InfoCircle size="18px" color={textColor} />
+              </div>
             )}
           </Box>
           <Text data-hook="topbar-instance-name" className="instance-name">{shownValues?.instance_name ?? "Unnamed instance"}</Text>
-          <Edit data-hook="topbar-instance-edit-icon" size="18px" className="edit-icon" onClick={() => handleToggle(true)} />
           <InstanceSettingsPopper
             active={settingsPopperActive}
             onToggle={handleToggle}
             values={previewValues ?? preferencesValues}
             onSave={handleSaveSettings}
             onValuesChange={setPreviewValues}
+            trigger={<Edit data-hook="topbar-instance-edit-icon" size="18px" className="edit-icon" />}
           />
         </Badge>
       )}
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index a870a8562..903bb3916 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -419,7 +419,7 @@ export class Client {
     })
   }
 
-  async getPreferences(): Promise<any> {
+  async getPreferences(): Promise<Preferences> {
     try {
       const response: Response = await fetch(
         `settings`,

From 7e1f1444d8eef0b214b8c05c6eea6be1769427ae Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Tue, 13 May 2025 18:37:38 +0100
Subject: [PATCH 10/28] use /settings to save preferences

---
 packages/browser-tests/questdb                         | 2 +-
 packages/web-console/src/components/TopBar/toolbar.tsx | 4 ++--
 packages/web-console/src/utils/questdb/client.ts       | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 9703862b4..d6b14dde0 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 9703862b424b8247e3733636ea290066e1fa6ed4
+Subproject commit d6b14dde0c52aae7dde5b5cb3b72a9b59a5a7ad2
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 575f43188..e6f32eab6 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -13,7 +13,7 @@ import { hasUIAuth, setSSOUserNameWithClientID } from "../../modules/OAuth2/util
 import { getValue } from "../../utils/localStorage"
 import { StoreKey } from "../../utils/localStorage/types"
 import { InstanceSettingsPopper } from "./InstanceSettingsPopper"
-import { Preferences } from "../../utils/questdb/types"
+import { Preferences } from "../../utils"
 import { PopperHover, Placement } from "../"
 import { useTheme } from "styled-components"
 
@@ -319,7 +319,7 @@ export const Toolbar = () => {
 
   const handleSaveSettings = async (values: Preferences) => {
     try {
-      await quest.savePreferences(values, "overwrite")
+      await quest.savePreferences(values)
     } catch (e) {
       // Handle error
     }
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index 903bb3916..f04741215 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -432,12 +432,12 @@ export class Client {
     }
   }
 
-  async savePreferences(preferences: Preferences, mode: string): Promise<void> {
+  async savePreferences(preferences: Preferences): Promise<void> {
     const { version, ...prefs } = preferences;
     const response: Response = await fetch(
-      `preferences?mode=${mode}&version=${version}`,
+      `settings?version=${version}`,
       {
-        method: "POST",
+        method: "PUT",
         headers: this.commonHeaders,
         body: JSON.stringify(prefs),
       },

From 436f72914051492efb349454756628015cd44753 Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Wed, 14 May 2025 01:32:27 +0100
Subject: [PATCH 11/28] update submodule

---
 packages/browser-tests/questdb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index d6b14dde0..452617a48 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit d6b14dde0c52aae7dde5b5cb3b72a9b59a5a7ad2
+Subproject commit 452617a485d84ef234840a2737bd136d2ceed94d

From 3ae03f392ffb0a438a7f58089332d28755def251 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Wed, 14 May 2025 19:14:37 +0300
Subject: [PATCH 12/28] introduce instance type and change tooltip styling

---
 .../integration/console/topbar.spec.js        |  14 +-
 packages/browser-tests/questdb                |   2 +-
 .../TopBar/InstanceSettingsPopper.tsx         |  37 +-
 .../src/components/TopBar/toolbar.tsx         | 410 ++++++++++--------
 .../web-console/src/utils/questdb/types.ts    |   3 +
 5 files changed, 266 insertions(+), 200 deletions(-)

diff --git a/packages/browser-tests/cypress/integration/console/topbar.spec.js b/packages/browser-tests/cypress/integration/console/topbar.spec.js
index 4fde931bf..31af45565 100644
--- a/packages/browser-tests/cypress/integration/console/topbar.spec.js
+++ b/packages/browser-tests/cypress/integration/console/topbar.spec.js
@@ -5,10 +5,10 @@ describe("TopBar", () => {
     cy.loadConsoleWithAuth();
   });
 
-  it("should show the default instance name and no description", () => {
+  it("should show the instance warning and no description", () => {
     cy.getByDataHook("topbar-instance-name").should(
       "have.text",
-      "Unnamed instance"
+      "Instance name is not set"
     );
     cy.getByDataHook("topbar-instance-badge").should(
       "have.css",
@@ -32,7 +32,7 @@ describe("TopBar", () => {
     cy.getByDataHook("topbar-instance-cancel-button").click();
     cy.getByDataHook("topbar-instance-name").should(
       "have.text",
-      "Unnamed instance"
+      "Instance name is not set"
     );
     cy.getByDataHook("topbar-instance-badge").should(
       "have.css",
@@ -41,11 +41,12 @@ describe("TopBar", () => {
     );
   });
 
-  it("should change the instance name and description", () => {
+  it("should change the instance name, description, and type", () => {
     cy.getByDataHook("topbar-instance-badge").realHover();
     cy.getByDataHook("topbar-instance-edit-icon").should("be.visible");
     cy.getByDataHook("topbar-instance-edit-icon").click();
     cy.getByDataHook("topbar-instance-name-input").type("test-instance");
+    cy.getByDataHook("topbar-instance-type-select").select("production");
     cy.getByDataHook("topbar-instance-description-input").type(
       "test description of the test instance"
     );
@@ -56,7 +57,10 @@ describe("TopBar", () => {
       "have.text",
       "test-instance"
     );
-    cy.getByDataHook("topbar-instance-info").realHover();
+    cy.getByDataHook("topbar-instance-icon").realHover();
     cy.contains("test description of the test instance").should("be.visible");
+    cy.contains(
+      "You are connected to a QuestDB instance for production"
+    ).should("be.visible");
   });
 });
diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 452617a48..d6b14dde0 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 452617a485d84ef234840a2737bd136d2ceed94d
+Subproject commit d6b14dde0c52aae7dde5b5cb3b72a9b59a5a7ad2
diff --git a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
index 9cc6ff5f8..5297da73c 100644
--- a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
+++ b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
@@ -1,9 +1,9 @@
 import React, { useState, FormEvent, ReactNode, useRef, useEffect } from "react"
 import styled from "styled-components"
-import { Box, Button, Input, Loader } from "@questdb/react-components"
+import { Box, Button, Input, Loader, Select } from "@questdb/react-components"
 import { Text } from "../Text"
 import { PopperToggle } from "../PopperToggle"
-import { Preferences } from "../../utils/questdb/types"
+import { Preferences, InstanceType } from "../../utils/questdb/types"
 
 const Wrapper = styled.div`
   position: absolute;
@@ -20,6 +20,7 @@ const ColorSelector = styled.div`
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
+  align-self: center;
 `
 
 const ColorOption = styled.button<{ colorValue: string; selected: boolean; customColor?: string }>`
@@ -89,6 +90,7 @@ const ColorPickerContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  align-self: center;
 `
 
 const ColorInputRow = styled.div`
@@ -162,6 +164,12 @@ const StyledButton = styled(Button)`
   }
 `
 
+const StyledSelect = styled(Select)`
+  &:focus-visible {
+    border: 1px solid ${({ theme }) => theme.color.cyan};
+  }
+`
+
 const Buttons = styled(Box)`
   margin-top: 1.5rem;
   gap: 1rem;
@@ -171,6 +179,7 @@ const Buttons = styled(Box)`
 
 const FormGroup = styled(Box).attrs({ flexDirection: "column", gap: "0.5rem" })`
   width: 100%;
+  align-items: flex-start;
 `
 
 const StyledInput = styled(Input)`
@@ -312,6 +321,9 @@ export const InstanceSettingsPopper = ({
   }
 
   useEffect(() => {
+    if (!values.instance_type) {
+      onValuesChange({ ...values, instance_type: "development" })
+    }
     if (active) {
       setTimeout(() => {
         inputRef.current?.focus()
@@ -319,12 +331,8 @@ export const InstanceSettingsPopper = ({
     }
   }, [active])
 
-  // Generate the current RGB color string
   const rgbColorString = `rgb(${rgbValues.r}, ${rgbValues.g}, ${rgbValues.b})`
 
-  const wheelSelected = Boolean(values.instance_rgb?.startsWith('rgb'))
-  console.log(wheelSelected)
-
   return (
     <PopperToggle 
       active={active} 
@@ -346,7 +354,22 @@ export const InstanceSettingsPopper = ({
             />
             {error && <ErrorText>{error}</ErrorText>}
           </FormGroup>
-          
+          <FormGroup>
+            <FormLabel htmlFor="instance-type-select">Instance Type</FormLabel>
+            <StyledSelect
+              id="instance-type-select"
+              data-hook="topbar-instance-type-select"
+              name="instance-type"
+              options={[
+                { label: "Development", value: "development" },
+                { label: "Production", value: "production" },
+                { label: "Testing", value: "testing" },
+              ]}
+              required
+              value={values.instance_type}
+              onChange={(e) => onValuesChange({ ...values, instance_type: e.target.value as InstanceType })}
+            />
+          </FormGroup>
           <FormGroup>
             <FormLabel htmlFor="instance-description-input">Description</FormLabel>
             <TextArea
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index e6f32eab6..d170255d9 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -4,7 +4,9 @@ import { QuestContext, useAuth, useSettings } from "../../providers"
 import { Box, Button } from "@questdb/react-components"
 import * as QuestDB from "../../utils/questdb"
 import { User as UserIcon, LogoutCircle, Edit } from "@styled-icons/remix-line"
-import { InfoCircle } from "@styled-icons/boxicons-regular"
+import { InfoCircle, Error as ErrorIcon } from "@styled-icons/boxicons-regular"
+import { RocketTakeoff, Tools } from "@styled-icons/bootstrap"
+import { Flask } from "@styled-icons/boxicons-solid"
 import { Text } from "../Text"
 import { selectors } from "../../store"
 import { useSelector } from "react-redux"
@@ -13,41 +15,17 @@ import { hasUIAuth, setSSOUserNameWithClientID } from "../../modules/OAuth2/util
 import { getValue } from "../../utils/localStorage"
 import { StoreKey } from "../../utils/localStorage/types"
 import { InstanceSettingsPopper } from "./InstanceSettingsPopper"
-import { Preferences } from "../../utils"
+import { Preferences, InstanceType } from "../../utils"
 import { PopperHover, Placement } from "../"
 import { useTheme } from "styled-components"
 
-const getTextColor = (backgroundColor: string | null, theme?: any): string => {
-  if (!backgroundColor || !backgroundColor.startsWith('rgb')) {
-    return theme?.color.foreground || "inherit";
-  }
-  
-  const matches = backgroundColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
-  if (matches) {
-    const r = parseInt(matches[1], 10) / 255
-    const g = parseInt(matches[2], 10) / 255
-    const b = parseInt(matches[3], 10) / 255
-    
-    // Convert RGB to sRGB for better perceptual accuracy
-    const R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
-    const G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
-    const B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
-    
-    // Calculate relative luminance using WCAG formula
-    const luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B
-
-    if (luminance < 0.25) {
-      return theme?.color.foreground;
-    } else if (luminance < 0.50) {
-      return theme?.color.gray2;
-    } else if (luminance < 0.75) {
-      return theme?.color.gray1; 
-    } else {
-      return theme?.color.background;
-    }
-  }
-  return theme?.color.foreground || "inherit";
-}
+const EnvIconWrapper = styled.div<{ $background?: string }>`
+  display: flex;
+  align-items: center;
+  padding: 0.3rem;
+  background: ${({ $background }) => $background ?? 'inherit'};
+  border-radius: 0.4rem;
+`
 
 const Root = styled(Box).attrs({ align: "center" })`
   gap: 1.5rem;
@@ -57,95 +35,46 @@ const Root = styled(Box).attrs({ align: "center" })`
   overflow: hidden;
 `
 
-const CustomTooltipWrapper = styled.div<{ instance_rgb?: string | null }>`
-  position: relative;
-  max-width: 460px;
-  padding: 0.4rem;
-  transform: translateY(-1rem);
-  background: ${({ theme }) => theme.color.backgroundDarker};
-  border: 1px solid ${({ theme }) => theme.color.gray1};
-  border-radius: 4px;
-  
-  ${({ instance_rgb, theme }) =>
-    instance_rgb === "r" &&
-    `
-    background: rgba(199, 7, 45, 0.95);
-    border-color: #c7072d;
-    color: ${getTextColor("r", theme)};
-  `}
-
-  ${({ instance_rgb, theme }) =>
-    instance_rgb === "g" &&
-    `
-    background: rgba(0, 170, 59, 0.95);
-    border-color: #00aa3b;
-    color: ${getTextColor("g", theme)};
-  `}
+const CustomTooltipWrapper = styled.div<{ $badgeColors: { primary: string, secondary: string } }>`
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0;
+  background: ${({ theme }) => theme.color.background};
+  font-size: 1.4rem;
+  border-radius: 0.8rem;
+  border: 1px solid ${({ $badgeColors }) => $badgeColors.primary};
+`
 
-  ${({ instance_rgb, theme }) =>
-    instance_rgb === "b" &&
-    `
-    background: rgba(0, 122, 255, 0.95);
-    border-color: #007aff;
-    color: ${getTextColor("b", theme)};
-  `}
-  
-  ${({ instance_rgb, theme }) =>
-    instance_rgb?.startsWith('rgb') &&
-    `
-    background: ${instance_rgb.replace('rgb', 'rgba').replace(')', ', 0.95)')};
-    border-color: ${instance_rgb};
-    color: ${getTextColor(instance_rgb, theme)};
-  `}
+const FlexRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 `
 
-const CustomTooltipText = styled.div<{ instance_rgb?: string | null }>`
+const Title = styled.h4`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.color.gray1};
+  padding: 0 1rem 1rem;
+  gap: 0.8rem;
   font-size: 1.4rem;
-  font-weight: 400;
-  color: ${({ theme, instance_rgb }) => instance_rgb ? getTextColor(instance_rgb, theme) : theme.color.foreground};
+  margin-bottom: 0;
 `
 
-const CustomTooltip = ({ 
-  children, 
-  instance_rgb
-}: { 
-  children: React.ReactNode, 
-  instance_rgb?: string | null
-}) => (
-  <CustomTooltipWrapper instance_rgb={instance_rgb} data-hook="tooltip">
-    <CustomTooltipText instance_rgb={instance_rgb}>{children}</CustomTooltipText>
-  </CustomTooltipWrapper>
-)
+const FlexCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`
 
-const CustomIconWithTooltip = ({ 
-  icon, 
-  tooltip, 
-  placement, 
-  instance_rgb
-}: { 
-  icon: React.ReactNode, 
-  tooltip: React.ReactNode, 
-  placement: Placement,
-  instance_rgb?: string | null
-}) => (
-  <PopperHover 
-    placement={placement} 
-    trigger={icon} 
-    modifiers={[
-      {
-        name: "offset",
-        options: { offset: [0, 12] },
-      }
-    ]}
-  >
-    <CustomTooltip instance_rgb={instance_rgb}>
-      {tooltip}
-    </CustomTooltip>
-  </PopperHover>
-)
-
-const Badge = styled(Box)<{ instance_rgb: Preferences["instance_rgb"] | null, $textColor: string }>`
-  background: ${({ theme }) => theme.color.backgroundLighter};
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 1rem;
+  gap: 1rem;
+`
+
+const Badge = styled(Box)<{ $badgeColors: { primary: string, secondary: string } }>`
   display: flex;
   align-items: center;
   padding: 0 1rem;
@@ -156,9 +85,25 @@ const Badge = styled(Box)<{ instance_rgb: Preferences["instance_rgb"] | null, $t
   min-width: 0;
   gap: 0;
 
+  ${({ $badgeColors }) => `
+    background: ${$badgeColors.primary};
+
+    .instance-name {
+      color: ${$badgeColors.secondary};
+    }
+
+    .edit-icon {
+      color: ${$badgeColors.secondary};
+
+      &:hover {
+        color: ${$badgeColors.primary};
+        background: ${$badgeColors.secondary};
+      }
+    }
+  `}
+
   .instance-name {
     font-size: 1.6rem;
-    color: ${({ theme }) => theme.color.gray2};
     display: inline;
     vertical-align: middle;
     text-overflow: ellipsis;
@@ -167,21 +112,28 @@ const Badge = styled(Box)<{ instance_rgb: Preferences["instance_rgb"] | null, $t
     flex-shrink: 1;
     min-width: 0;
     margin-left: 0.3rem;
+
+    &.placeholder {
+      color: ${({ theme }) => theme.color.orange};
+    }
   }
 
   .edit-icon {
     cursor: pointer;
     display: inline;
     width: 0;
-    color: $;
     padding: 0.1rem;
     background: inherit;
     border-radius: 0.4rem;
     flex-shrink: 0;
 
-    &:hover {
-      color: ${({ theme }) => theme.color.backgroundLighter};
-      background: ${({ theme }) => theme.color.gray2};
+    &.placeholder {
+      color: ${({ theme }) => theme.color.orange};
+
+      &:hover {
+        color: ${({ theme }) => theme.color.backgroundLighter};
+        background: ${({ theme }) => theme.color.orange};
+      }
     }
   }
 
@@ -191,60 +143,6 @@ const Badge = styled(Box)<{ instance_rgb: Preferences["instance_rgb"] | null, $t
       margin-left: 1rem;
     }
   }
-
-  ${({ instance_rgb, $textColor }) => instance_rgb && `
-    .instance-name {
-      color: ${$textColor};
-    }
-
-    .edit-icon {
-      color: ${$textColor};
-    }
-
-    .edit-icon:hover {
-      background: ${$textColor};
-    }
-  `}
-
-  ${({ $textColor, instance_rgb }) =>
-    instance_rgb === "r" &&
-    `
-    background: #c7072d;
-
-    .edit-icon:hover {
-      color: #c7072d;
-    }
-  `}
-
-  ${({ $textColor, instance_rgb }) =>
-    instance_rgb === "g" &&
-    `
-    background: #00aa3b;
-
-    .edit-icon:hover {
-      color: #00aa3b;
-    }
-  `}
-
-  ${({ $textColor, instance_rgb }) =>
-    instance_rgb === "b" &&
-    `
-    background: #007aff;
-
-    .edit-icon:hover {
-      color: #007aff;
-    }
-  `}
-  
-  ${({ theme, instance_rgb }) =>
-    instance_rgb?.startsWith('rgb') &&
-    `
-    background: ${instance_rgb};
-
-    .edit-icon:hover {
-      color: ${instance_rgb};
-    }
-  `}
 `
 const User = styled(Box).attrs({ gap: "0.5rem" })`
   background: ${({ theme }) => theme.color.backgroundLighter};
@@ -264,6 +162,144 @@ const EnterpriseBadge = styled.span`
   }
 `
 
+const getSecondaryBadgeColor = (primaryColor: string | null, theme?: any): string => {
+  if (!primaryColor || !primaryColor.startsWith('rgb')) {
+    return theme?.color.foreground || "inherit";
+  }
+
+  const matches = primaryColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+  if (matches) {
+    const r = parseInt(matches[1], 10) / 255
+    const g = parseInt(matches[2], 10) / 255
+    const b = parseInt(matches[3], 10) / 255
+    
+    // Convert RGB to sRGB for better perceptual accuracy
+    const R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
+    const G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
+    const B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
+    
+    // Calculate relative luminance using WCAG formula
+    const luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B
+
+    if (luminance < 0.25) {
+      return theme?.color.foreground;
+    } else if (luminance < 0.50) {
+      return theme?.color.gray2;
+    } else if (luminance < 0.75) {
+      return theme?.color.gray1; 
+    } else {
+      return theme?.color.background;
+    }
+  }
+  return theme?.color.foreground || "inherit";
+}
+
+const useBadgeColors = (instance_rgb: string | null) => {
+  const theme = useTheme()
+  if (!instance_rgb) {
+    return {
+      primary: theme.color.backgroundLighter,
+      secondary: theme.color.foreground,
+    }
+  }
+
+  if (instance_rgb.startsWith('rgb')) {
+    return {
+      primary: instance_rgb,
+      secondary: getSecondaryBadgeColor(instance_rgb, theme),
+    }
+  }
+
+  if (instance_rgb === 'r') {
+    return {
+      primary: 'rgb(199, 7, 45)',
+      secondary: theme.color.foreground,
+    }
+  }
+
+  if (instance_rgb === 'g') {
+    return {
+      primary: 'rgb(0, 170, 59)',
+      secondary: theme.color.foreground,
+    }
+  }
+
+  if (instance_rgb === 'b') {
+    return {
+      primary: 'rgb(0, 122, 255)',
+      secondary: theme.color.foreground,
+    }
+  }
+
+  return {
+    primary: theme.color.backgroundLighter,
+    secondary: theme.color.foreground,
+  }
+}
+
+const EnvironmentIcon = ({ instanceType, color, background }: { instanceType: InstanceType | undefined, color?: string, background?: string }) => {
+  const getIcon = () => {
+    switch (instanceType) {
+      case "development":
+        return <Tools size="18px" color={color} />
+      case "production":
+        return <RocketTakeoff size="18px" color={color} />
+      case "testing":
+        return <Flask size="18px" color={color} style={{ transform: 'scale(1.2)' }} />
+      default:
+        return <InfoCircle size="18px" style={{ transform: 'translateY(-0.2rem)'}} color={color} />
+    }
+  }
+
+  return (
+    <EnvIconWrapper $background={background}>
+      {getIcon()}
+    </EnvIconWrapper>
+  )
+};
+
+const CustomIconWithTooltip = ({ 
+  icon, 
+  placement, 
+  shownValues,
+}: { 
+  icon: React.ReactNode, 
+  placement: Placement,
+  shownValues: Preferences | null,
+}) => {
+  const badgeColors = useBadgeColors(shownValues?.instance_rgb ?? null)
+
+  return (
+    <PopperHover 
+      placement={placement} 
+      trigger={icon} 
+    >
+      <CustomTooltipWrapper $badgeColors={badgeColors}>
+        <FlexCol>
+          {shownValues?.instance_type && (
+            <Title>
+              <EnvironmentIcon color={badgeColors.secondary} background={badgeColors.primary} instanceType={shownValues?.instance_type} />
+              <Text color="foreground" weight={400}>You are connected to a QuestDB instance for {shownValues?.instance_type}</Text>
+            </Title>
+          )}
+          <Info>
+            <FlexRow>
+              <Text color="foreground" weight={600}>Instance Name:</Text>
+              <Text color="foreground" size="md">{shownValues?.instance_name}</Text>
+            </FlexRow>
+            {shownValues?.instance_description && (
+              <FlexRow>
+                <Text color="foreground" weight={600}>Description:</Text>
+                <Text color="foreground" size="md">{shownValues?.instance_description}</Text>
+              </FlexRow>
+            )}
+          </Info>
+        </FlexCol>
+      </CustomTooltipWrapper>
+    </PopperHover>
+  )
+}
+
 export const Toolbar = () => {
   const { quest } = useContext(QuestContext)
   const { settings } = useSettings()
@@ -274,8 +310,8 @@ export const Toolbar = () => {
   const [preferencesValues, setPreferencesValues] = useState<Preferences | null>(null)
   const [previewValues, setPreviewValues] = useState<Preferences | null>(null)
   const shownValues = settingsPopperActive ? previewValues : preferencesValues
+  const badgeColors = useBadgeColors(shownValues?.instance_rgb ?? null)
   const theme = useTheme()
-  const textColor = getTextColor(shownValues?.instance_rgb ?? null, theme)
 
   const fetchServerDetails = async () => {
     try {
@@ -345,32 +381,32 @@ export const Toolbar = () => {
       </Box>
       {preferencesValues && (
         <Badge
-          $textColor={textColor}
-          instance_rgb={shownValues?.instance_rgb ?? null}
+          $badgeColors={badgeColors}
           data-hook="topbar-instance-badge"
         >
-          <Box data-hook="topbar-instance-info">
-            {(shownValues?.instance_description) ? (
+          <Box style={{ padding: '0.7rem' }}>
+            {(shownValues?.instance_type) ? (
               <CustomIconWithTooltip
-                icon={<div style={{ color: textColor, padding: '0.7rem' }}><InfoCircle size="18px" /></div>}
-                tooltip={shownValues?.instance_description}
+                icon={<div data-hook="topbar-instance-icon"><EnvironmentIcon instanceType={shownValues?.instance_type} color={badgeColors.secondary} background={badgeColors.primary} /></div>}
                 placement="bottom"
-                instance_rgb={shownValues?.instance_rgb}
+                shownValues={shownValues}
               />
             ) : (
-              <div style={{ color: textColor, padding: '0.7rem' }}>
-                <InfoCircle size="18px" color={textColor} />
-              </div>
+              <ErrorIcon size="18px" color={theme.color.orange} />
             )}
           </Box>
-          <Text data-hook="topbar-instance-name" className="instance-name">{shownValues?.instance_name ?? "Unnamed instance"}</Text>
+          {shownValues?.instance_name
+            ? <Text data-hook="topbar-instance-name" className="instance-name">{shownValues?.instance_name}</Text>
+            : <Text data-hook="topbar-instance-name" className="instance-name placeholder">Instance name is not set</Text>
+          }
+          
           <InstanceSettingsPopper
             active={settingsPopperActive}
             onToggle={handleToggle}
             values={previewValues ?? preferencesValues}
             onSave={handleSaveSettings}
             onValuesChange={setPreviewValues}
-            trigger={<Edit data-hook="topbar-instance-edit-icon" size="18px" className="edit-icon" />}
+            trigger={<Edit data-hook="topbar-instance-edit-icon" size="18px" className={`edit-icon ${shownValues?.instance_name ? '' : 'placeholder'}`} />}
           />
         </Badge>
       )}
diff --git a/packages/web-console/src/utils/questdb/types.ts b/packages/web-console/src/utils/questdb/types.ts
index 1e9f28838..3dc1c25e4 100644
--- a/packages/web-console/src/utils/questdb/types.ts
+++ b/packages/web-console/src/utils/questdb/types.ts
@@ -11,11 +11,14 @@ export enum Type {
   NOTICE = "notice",
 }
 
+export type InstanceType = "development" | "production" | "testing"
+
 export type Preferences = Partial<{
   version: number
   instance_name: string
   instance_rgb: string
   instance_description: string
+  instance_type: InstanceType
 }>
 
 export type Timings = {

From 9536049daf68a29e13afb2d2fde17ea428d8d269 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Fri, 16 May 2025 19:32:13 +0300
Subject: [PATCH 13/28] add instance type indicator to the badge and document
 title

---
 .../integration/console/topbar.spec.js        |  2 +-
 .../src/components/TopBar/toolbar.tsx         | 31 +++++++++----------
 .../src/providers/SettingsProvider/index.tsx  | 28 +++++++++++++++--
 .../web-console/src/utils/questdb/client.ts   | 13 --------
 4 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/packages/browser-tests/cypress/integration/console/topbar.spec.js b/packages/browser-tests/cypress/integration/console/topbar.spec.js
index 31af45565..fa6c89460 100644
--- a/packages/browser-tests/cypress/integration/console/topbar.spec.js
+++ b/packages/browser-tests/cypress/integration/console/topbar.spec.js
@@ -55,7 +55,7 @@ describe("TopBar", () => {
     cy.getByDataHook("topbar-instance-save-button").should("not.exist");
     cy.getByDataHook("topbar-instance-name").should(
       "have.text",
-      "test-instance"
+      "Production | test-instance"
     );
     cy.getByDataHook("topbar-instance-icon").realHover();
     cy.contains("test description of the test instance").should("be.visible");
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index d170255d9..b6d365cd2 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -302,14 +302,13 @@ const CustomIconWithTooltip = ({
 
 export const Toolbar = () => {
   const { quest } = useContext(QuestContext)
-  const { settings } = useSettings()
+  const { settings, preferences, refreshSettingsAndPreferences } = useSettings()
   const { logout } = useAuth()
   const result = useSelector(selectors.query.getResult)
   const [currentUser, setCurrentUser] = useState<string | null>(null)
   const [settingsPopperActive, setSettingsPopperActive] = useState(false)
-  const [preferencesValues, setPreferencesValues] = useState<Preferences | null>(null)
   const [previewValues, setPreviewValues] = useState<Preferences | null>(null)
-  const shownValues = settingsPopperActive ? previewValues : preferencesValues
+  const shownValues = settingsPopperActive ? previewValues : preferences
   const badgeColors = useBadgeColors(shownValues?.instance_rgb ?? null)
   const theme = useTheme()
 
@@ -336,20 +335,15 @@ export const Toolbar = () => {
     }
   }
 
-  const fetchPreferences = async () => {
-    const preferences = await quest.getPreferences()
-    setPreferencesValues(preferences)
-  }
-
   useEffect(() => {
     fetchServerDetails()
-    fetchPreferences()
+    refreshSettingsAndPreferences()
   }, [])
 
   useEffect(() => {
     if (result && result.type === QuestDB.Type.DDL) {
       fetchServerDetails()
-      fetchPreferences()
+      refreshSettingsAndPreferences()
     }
   }, [result])
 
@@ -359,13 +353,13 @@ export const Toolbar = () => {
     } catch (e) {
       // Handle error
     }
-    await fetchPreferences()
+    await refreshSettingsAndPreferences()
   }
 
   const handleToggle = useCallback((active: boolean) => {
     setSettingsPopperActive(active)
-    setPreviewValues(active ? preferencesValues : null)
-  }, [preferencesValues])
+    setPreviewValues(active ? preferences : null)
+  }, [preferences])
 
   return (
     <Root>
@@ -379,7 +373,7 @@ export const Toolbar = () => {
           />
         )}
       </Box>
-      {preferencesValues && (
+      {preferences && (
         <Badge
           $badgeColors={badgeColors}
           data-hook="topbar-instance-badge"
@@ -396,14 +390,19 @@ export const Toolbar = () => {
             )}
           </Box>
           {shownValues?.instance_name
-            ? <Text data-hook="topbar-instance-name" className="instance-name">{shownValues?.instance_name}</Text>
+            ? <Text data-hook="topbar-instance-name" className="instance-name">
+                {shownValues?.instance_type
+                  ? `${shownValues?.instance_type.charAt(0).toUpperCase()}${shownValues?.instance_type.slice(1)} | `
+                  : ''}
+                {shownValues?.instance_name}
+              </Text>
             : <Text data-hook="topbar-instance-name" className="instance-name placeholder">Instance name is not set</Text>
           }
           
           <InstanceSettingsPopper
             active={settingsPopperActive}
             onToggle={handleToggle}
-            values={previewValues ?? preferencesValues}
+            values={previewValues ?? preferences}
             onSave={handleSaveSettings}
             onValuesChange={setPreviewValues}
             trigger={<Edit data-hook="topbar-instance-edit-icon" size="18px" className={`edit-icon ${shownValues?.instance_name ? '' : 'placeholder'}`} />}
diff --git a/packages/web-console/src/providers/SettingsProvider/index.tsx b/packages/web-console/src/providers/SettingsProvider/index.tsx
index 4621efba4..79a780c91 100644
--- a/packages/web-console/src/providers/SettingsProvider/index.tsx
+++ b/packages/web-console/src/providers/SettingsProvider/index.tsx
@@ -11,6 +11,7 @@ import { Box, Button, Text } from "@questdb/react-components"
 import { Refresh } from "@styled-icons/remix-line"
 import {setValue} from "../../utils/localStorage";
 import {StoreKey} from "../../utils/localStorage/types";
+import { Preferences } from '../../utils/questdb'
 
 enum View {
   loading = 0,
@@ -26,9 +27,11 @@ const reducer = (s: State, n: Partial<State>) => ({ ...s, ...n })
 
 const SettingContext = createContext<{
   settings: Settings
+  preferences: Preferences
   consoleConfig: ConsoleConfig
   warnings: Warning[]
-}>({ settings: {}, consoleConfig: {}, warnings: [] })
+  refreshSettingsAndPreferences: () => Promise<void>
+}>({ settings: {}, preferences: {}, consoleConfig: {}, warnings: [], refreshSettingsAndPreferences: () => Promise.resolve() })
 
 const connectionError = (
   <>
@@ -47,13 +50,14 @@ export const SettingsProvider = ({
 }) => {
   const [state, dispatch] = useReducer(reducer, initialState)
   const [settings, setSettings] = useState<Settings>({})
+  const [preferences, _setPreferences] = useState<Preferences>({})
   const [warnings, setWarnings] = useState<Warning[]>([])
   const [consoleConfig, setConsoleConfig] = useState<ConsoleConfig>({})
 
   const views: { [key in View]: () => React.ReactNode } = {
     [View.loading]: () => null,
     [View.ready]: () => (
-      <SettingContext.Provider value={{ settings, consoleConfig, warnings }}>
+      <SettingContext.Provider value={{ settings, consoleConfig, warnings, preferences, refreshSettingsAndPreferences }}>
         {children}
       </SettingContext.Provider>
     ),
@@ -101,6 +105,25 @@ export const SettingsProvider = ({
     }
   }
 
+  const setPreferences = (preferences: Preferences) => {
+    if (preferences?.instance_name) {
+      const suffix = preferences?.instance_type ? `${preferences.instance_type.charAt(0).toUpperCase()}${preferences.instance_type.slice(1)}` : 'QuestDB'
+      const newTitle = `${preferences.instance_name} | ${suffix}`
+      if (document.title !== newTitle) {
+        document.title = newTitle
+      }
+    }
+    _setPreferences(preferences)
+  }
+
+  const refreshSettingsAndPreferences = async () => {
+    const result = await fetchEndpoint("settings", connectionError)
+    if (result) {
+      setSettings(result.config)
+      setPreferences({ version: result["preferences.version"], ...result.preferences })
+    }
+  }
+
   useEffect(() => {
     const fetchAll = async () => {
       const settings = await fetchEndpoint("settings", connectionError)
@@ -111,6 +134,7 @@ export const SettingsProvider = ({
       )
       if (settings) {
         setSettings(settings.config)
+        setPreferences({ version: settings["preferences.version"], ...settings.preferences })
         setValue(StoreKey.RELEASE_TYPE, settings["release.type"])
       }
       if (warnings) {
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index f04741215..aad7baff7 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -419,19 +419,6 @@ export class Client {
     })
   }
 
-  async getPreferences(): Promise<Preferences> {
-    try {
-      const response: Response = await fetch(
-        `settings`,
-        { headers: this.commonHeaders },
-      )
-      const settings = await response.json()
-      return { version: settings["preferences.version"], ...settings.preferences }
-    } catch (error) {
-      throw error
-    }
-  }
-
   async savePreferences(preferences: Preferences): Promise<void> {
     const { version, ...prefs } = preferences;
     const response: Response = await fetch(

From fe3b12752f055d3f084cc19f8ea12a4a934a4f47 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Tue, 20 May 2025 16:58:30 +0300
Subject: [PATCH 14/28] rbac for save instance settings

---
 .../TopBar/InstanceSettingsPopper.tsx         |  77 ++++++------
 .../src/components/TopBar/toolbar.tsx         | 110 ++++++++++++------
 .../web-console/src/utils/questdb/client.ts   |   9 +-
 .../web-console/src/utils/questdb/types.ts    |   8 ++
 4 files changed, 123 insertions(+), 81 deletions(-)

diff --git a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
index 5297da73c..ae6154d42 100644
--- a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
+++ b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
@@ -143,14 +143,6 @@ const ColorValueInput = styled.input.attrs({ type: 'number', min: 0, max: 255 })
   }
 `
 
-const ColorPreview = styled.div<{ color: string }>`
-  width: 3rem;
-  height: 3rem;
-  border-radius: 0.4rem;
-  background: ${({ color }) => color};
-  border: 1px solid ${({ theme }) => theme.color.gray1};
-`
-
 const StyledForm = styled.form`
   display: flex;
   flex-direction: column;
@@ -234,12 +226,19 @@ const ErrorText = styled(Text)`
   margin-top: 0.2rem;
 `
 
+const Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
 type Props = {
   active: boolean
   onToggle: (active: boolean) => void
   values: Preferences
   onSave: (values: Preferences) => Promise<void>
   onValuesChange: (values: Preferences) => void
+  error: string | null
   trigger: ReactNode
 }
 
@@ -249,15 +248,15 @@ export const InstanceSettingsPopper = ({
   values, 
   onSave, 
   onValuesChange,
+  error,
   trigger,
 }: Props) => {
-  const [error, setError] = useState<string | null>(null)
   const [isSaving, setIsSaving] = useState(false)
+  const [instanceNameError, setInstanceNameError] = useState<string | null>(null)
   const [showCustomColor, setShowCustomColor] = useState(false)
   const [rgbValues, setRgbValues] = useState({ r: 0, g: 0, b: 0 })
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Parse RGB values when component mounts or values change
   useEffect(() => {
     if (values.instance_rgb && values.instance_rgb.startsWith('rgb')) {
       setShowCustomColor(true)
@@ -278,27 +277,19 @@ export const InstanceSettingsPopper = ({
     e.preventDefault()
     
     if (!values?.instance_name?.trim()) {
-      setError("Instance name is required")
+      setInstanceNameError("Instance name is required")
       return
     }
-    
-    setError(null)
+    setInstanceNameError(null)
+
     setIsSaving(true)
-    
-    try {
-      await onSave(values)
-      onToggle(false)
-    } finally {
-      setIsSaving(false)
-    }
+    await onSave(values) // Errors are handled in the parent component
+    setIsSaving(false)
   }
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValues = { ...values, instance_name: e.target.value }
     onValuesChange(newValues)
-    if (error && e.target.value.trim()) {
-      setError(null)
-    }
   }
 
   const handleColorSelect = (color: string | undefined) => {
@@ -352,7 +343,7 @@ export const InstanceSettingsPopper = ({
               placeholder="Enter instance name"
               ref={inputRef}
             />
-            {error && <ErrorText>{error}</ErrorText>}
+            {instanceNameError && <ErrorText>{instanceNameError}</ErrorText>}
           </FormGroup>
           <FormGroup>
             <FormLabel htmlFor="instance-type-select">Instance Type</FormLabel>
@@ -466,24 +457,26 @@ export const InstanceSettingsPopper = ({
               </ColorPickerContainer>
             )}
           </FormGroup>
-          
-          <Buttons>
-            <StyledButton 
-              type="submit"
-              prefixIcon={isSaving ? <Loader /> : undefined} 
-              data-hook="topbar-instance-save-button"
-            >
-              Save
-            </StyledButton>
-            <StyledButton 
-              type="button"
-              onClick={() => onToggle(false)} 
-              skin="secondary" 
-              data-hook="topbar-instance-cancel-button"
-            >
-              Cancel
-            </StyledButton>
-          </Buttons>
+          <Footer>
+            {error && <ErrorText>{error}</ErrorText>}
+            <Buttons>
+              <StyledButton 
+                type="submit"
+                prefixIcon={isSaving ? <Loader /> : undefined} 
+                data-hook="topbar-instance-save-button"
+              >
+                Save
+              </StyledButton>
+              <StyledButton 
+                type="button"
+                onClick={() => onToggle(false)} 
+                skin="secondary" 
+                data-hook="topbar-instance-cancel-button"
+              >
+                Cancel
+              </StyledButton>
+            </Buttons>
+          </Footer>
         </StyledForm>
       </Wrapper>
     </PopperToggle>
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index b6d365cd2..c7ab45b72 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -104,7 +104,8 @@ const Badge = styled(Box)<{ $badgeColors: { primary: string, secondary: string }
 
   .instance-name {
     font-size: 1.6rem;
-    display: inline;
+    display: inline-flex;
+    align-items: center;
     vertical-align: middle;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -162,6 +163,15 @@ const EnterpriseBadge = styled.span`
   }
 `
 
+const Separator = styled.span<{ $color: string }>`
+  display: inline-block;
+  width: 0.15rem;
+  margin: 0 1rem;
+  height: 1.8rem;
+  background: ${({ $color }) => $color};
+
+`
+
 const getSecondaryBadgeColor = (primaryColor: string | null, theme?: any): string => {
   if (!primaryColor || !primaryColor.startsWith('rgb')) {
     return theme?.color.foreground || "inherit";
@@ -237,25 +247,17 @@ const useBadgeColors = (instance_rgb: string | null) => {
   }
 }
 
-const EnvironmentIcon = ({ instanceType, color, background }: { instanceType: InstanceType | undefined, color?: string, background?: string }) => {
-  const getIcon = () => {
-    switch (instanceType) {
-      case "development":
-        return <Tools size="18px" color={color} />
-      case "production":
-        return <RocketTakeoff size="18px" color={color} />
-      case "testing":
-        return <Flask size="18px" color={color} style={{ transform: 'scale(1.2)' }} />
-      default:
-        return <InfoCircle size="18px" style={{ transform: 'translateY(-0.2rem)'}} color={color} />
-    }
+const EnvironmentIcon = ({ instanceType, color }: { instanceType: InstanceType | undefined, color?: string }) => {
+  switch (instanceType) {
+    case "development":
+      return <Tools size="18px" color={color} />
+    case "production":
+      return <RocketTakeoff size="18px" color={color} />
+    case "testing":
+      return <Flask size="18px" color={color} style={{ transform: 'scale(1.2)' }} />
+    default:
+      return <InfoCircle size="18px" style={{ transform: 'translateY(-0.2rem)'}} color={color} />
   }
-
-  return (
-    <EnvIconWrapper $background={background}>
-      {getIcon()}
-    </EnvIconWrapper>
-  )
 };
 
 const CustomIconWithTooltip = ({ 
@@ -278,7 +280,9 @@ const CustomIconWithTooltip = ({
         <FlexCol>
           {shownValues?.instance_type && (
             <Title>
-              <EnvironmentIcon color={badgeColors.secondary} background={badgeColors.primary} instanceType={shownValues?.instance_type} />
+              <EnvIconWrapper $background={badgeColors.primary}>
+                <EnvironmentIcon color={badgeColors.secondary} instanceType={shownValues?.instance_type} />
+              </EnvIconWrapper>
               <Text color="foreground" weight={400}>You are connected to a QuestDB instance for {shownValues?.instance_type}</Text>
             </Title>
           )}
@@ -308,7 +312,12 @@ export const Toolbar = () => {
   const [currentUser, setCurrentUser] = useState<string | null>(null)
   const [settingsPopperActive, setSettingsPopperActive] = useState(false)
   const [previewValues, setPreviewValues] = useState<Preferences | null>(null)
+  const [canEditInstanceName, setCanEditInstanceName] = useState(false)
+  const [saveError, setSaveError] = useState<string | null>(null)
   const shownValues = settingsPopperActive ? previewValues : preferences
+  const instanceTypeReadable = shownValues?.instance_type
+    ? shownValues.instance_type.charAt(0).toUpperCase() + shownValues.instance_type.slice(1)
+    : ''
   const badgeColors = useBadgeColors(shownValues?.instance_rgb ?? null)
   const theme = useTheme()
 
@@ -329,14 +338,33 @@ export const Toolbar = () => {
         if (authPayload && currentUser && settings["acl.oidc.client.id"]) {
           setSSOUserNameWithClientID(settings["acl.oidc.client.id"], currentUser)
         }
+        return currentUser
       }
+      return null
     } catch (e) {
+      return null
+    }
+  }
+
+  const fetchEditSettingsPermission = async (currentUser: string | null) => {
+    if (!currentUser) {
+      setCanEditInstanceName(false)
       return
     }
+
+    try {
+      const response = await quest.showPermissions(currentUser)
+      // Admin user has no permissions listed
+      const canEdit = response.type === QuestDB.Type.DQL
+        && (response.count === 0 || response.data.some(d => d.permission === 'SETTINGS'))
+      setCanEditInstanceName(canEdit)
+    } catch (e) {
+      setCanEditInstanceName(false)
+    }
   }
 
   useEffect(() => {
-    fetchServerDetails()
+    fetchServerDetails().then(fetchEditSettingsPermission)
     refreshSettingsAndPreferences()
   }, [])
 
@@ -349,16 +377,23 @@ export const Toolbar = () => {
 
   const handleSaveSettings = async (values: Preferences) => {
     try {
+      setSaveError(null)
       await quest.savePreferences(values)
+      handleToggle(false)
     } catch (e) {
-      // Handle error
+      console.error(e)
+      setSaveError(`Failed to save instance settings: ${e instanceof Error ? e.message : e}`)
+    } finally { 
+      await refreshSettingsAndPreferences()
     }
-    await refreshSettingsAndPreferences()
   }
 
   const handleToggle = useCallback((active: boolean) => {
     setSettingsPopperActive(active)
     setPreviewValues(active ? preferences : null)
+    if (!active) {
+      setSaveError(null)
+    }
   }, [preferences])
 
   return (
@@ -378,10 +413,10 @@ export const Toolbar = () => {
           $badgeColors={badgeColors}
           data-hook="topbar-instance-badge"
         >
-          <Box style={{ padding: '0.7rem' }}>
+          <Box>
             {(shownValues?.instance_type) ? (
               <CustomIconWithTooltip
-                icon={<div data-hook="topbar-instance-icon"><EnvironmentIcon instanceType={shownValues?.instance_type} color={badgeColors.secondary} background={badgeColors.primary} /></div>}
+                icon={<div data-hook="topbar-instance-icon" style={{ padding: '0.7rem' }}><EnvironmentIcon instanceType={shownValues?.instance_type} color={badgeColors.secondary} /></div>}
                 placement="bottom"
                 shownValues={shownValues}
               />
@@ -391,22 +426,23 @@ export const Toolbar = () => {
           </Box>
           {shownValues?.instance_name
             ? <Text data-hook="topbar-instance-name" className="instance-name">
-                {shownValues?.instance_type
-                  ? `${shownValues?.instance_type.charAt(0).toUpperCase()}${shownValues?.instance_type.slice(1)} | `
-                  : ''}
+                {instanceTypeReadable}
+                <Separator $color={badgeColors.secondary} />
                 {shownValues?.instance_name}
               </Text>
             : <Text data-hook="topbar-instance-name" className="instance-name placeholder">Instance name is not set</Text>
           }
-          
-          <InstanceSettingsPopper
-            active={settingsPopperActive}
-            onToggle={handleToggle}
-            values={previewValues ?? preferences}
-            onSave={handleSaveSettings}
-            onValuesChange={setPreviewValues}
-            trigger={<Edit data-hook="topbar-instance-edit-icon" size="18px" className={`edit-icon ${shownValues?.instance_name ? '' : 'placeholder'}`} />}
-          />
+          {canEditInstanceName && (
+            <InstanceSettingsPopper
+              active={settingsPopperActive}
+              onToggle={handleToggle}
+              values={previewValues ?? preferences}
+              onSave={handleSaveSettings}
+              onValuesChange={setPreviewValues}
+              error={saveError}
+              trigger={<Edit data-hook="topbar-instance-edit-icon" size="18px" className={`edit-icon ${shownValues?.instance_name ? '' : 'placeholder'}`} />}
+            />
+          )}
         </Badge>
       )}
       <Box gap="0.5rem">
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index aad7baff7..cf350a88e 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -23,6 +23,7 @@ import {
   UploadResult,
   Value,
   Preferences,
+  Permission,
 } from "./types"
 
 export class Client {
@@ -328,6 +329,10 @@ export class Client {
     return response
   }
 
+  async showPermissions(user: string): Promise<QueryResult<Permission>> {
+    return await this.query<Permission>(`SHOW PERMISSIONS ${user};`)
+  }
+
   async showColumns(table: string): Promise<QueryResult<Column>> {
     return await this.query<Column>(`SHOW COLUMNS FROM '${table}';`)
   }
@@ -429,10 +434,10 @@ export class Client {
         body: JSON.stringify(prefs),
       },
     )
-    await response.json()
     if (!response.ok) {
-      throw new Error(`Status code: ${response.status}`);
+      throw new Error(response.statusText);
     }
+    await response.json()
   }
 
   async exportQueryToCsv(query: string) {
diff --git a/packages/web-console/src/utils/questdb/types.ts b/packages/web-console/src/utils/questdb/types.ts
index 3dc1c25e4..6f8054a94 100644
--- a/packages/web-console/src/utils/questdb/types.ts
+++ b/packages/web-console/src/utils/questdb/types.ts
@@ -21,6 +21,14 @@ export type Preferences = Partial<{
   instance_type: InstanceType
 }>
 
+export type Permission = {
+  grant_option: boolean
+  origin: string
+  permission: string
+  table_name: string | null
+  column_name: string | null
+}
+
 export type Timings = {
   compiler: number
   authentication: number

From 47dccfd38b78812f02164ed0b8fd1cc925f4eb57 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Tue, 20 May 2025 17:21:00 +0300
Subject: [PATCH 15/28] no access control if acl is not enabled

---
 .../cypress/integration/console/topbar.spec.js              | 6 ++----
 packages/web-console/src/components/TopBar/toolbar.tsx      | 5 +++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/browser-tests/cypress/integration/console/topbar.spec.js b/packages/browser-tests/cypress/integration/console/topbar.spec.js
index fa6c89460..5aac8a446 100644
--- a/packages/browser-tests/cypress/integration/console/topbar.spec.js
+++ b/packages/browser-tests/cypress/integration/console/topbar.spec.js
@@ -53,10 +53,8 @@ describe("TopBar", () => {
     cy.getByDataHook("topbar-instance-color-option-g").click();
     cy.getByDataHook("topbar-instance-save-button").click();
     cy.getByDataHook("topbar-instance-save-button").should("not.exist");
-    cy.getByDataHook("topbar-instance-name").should(
-      "have.text",
-      "Production | test-instance"
-    );
+    cy.getByDataHook("topbar-instance-name").should("contain", "Production");
+    cy.getByDataHook("topbar-instance-name").should("contain", "test-instance");
     cy.getByDataHook("topbar-instance-icon").realHover();
     cy.contains("test description of the test instance").should("be.visible");
     cy.contains(
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index c7ab45b72..5c9d1fe73 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -347,6 +347,11 @@ export const Toolbar = () => {
   }
 
   const fetchEditSettingsPermission = async (currentUser: string | null) => {
+    if (!settings["acl.enabled"]) {
+      setCanEditInstanceName(true)
+      return
+    }
+
     if (!currentUser) {
       setCanEditInstanceName(false)
       return

From 1f65e4939ae5fd3bb26969e6841c4e86fd4d37c2 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Tue, 20 May 2025 17:34:19 +0300
Subject: [PATCH 16/28] submodule

---
 packages/browser-tests/questdb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index d6b14dde0..8d0526b78 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit d6b14dde0c52aae7dde5b5cb3b72a9b59a5a7ad2
+Subproject commit 8d0526b78dfc1e72b878e8666af07a99dc5a754a

From f684e8cae01b1a44bced13d8117cbb7b172bfcc9 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Tue, 20 May 2025 18:20:00 +0300
Subject: [PATCH 17/28] further oss check

---
 packages/web-console/src/components/TopBar/toolbar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 5c9d1fe73..f602a9dc7 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -347,7 +347,8 @@ export const Toolbar = () => {
   }
 
   const fetchEditSettingsPermission = async (currentUser: string | null) => {
-    if (!settings["acl.enabled"]) {
+    // RBAC is not enabled, everyone can edit the instance name
+    if (!settings["acl.enabled"] || settings['release.type'] === 'OSS') {
       setCanEditInstanceName(true)
       return
     }

From be2afa414dc9c90859f0a7246cb64038b82be8a8 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Wed, 21 May 2025 01:28:29 +0300
Subject: [PATCH 18/28] refresh issues and error handling - wip

---
 .../src/components/PopperToggle/index.tsx     | 11 +++--
 .../src/components/TopBar/toolbar.tsx         | 48 +++++++++++++------
 .../src/providers/SettingsProvider/index.tsx  | 19 ++++++--
 .../web-console/src/utils/questdb/client.ts   |  1 -
 4 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/packages/web-console/src/components/PopperToggle/index.tsx b/packages/web-console/src/components/PopperToggle/index.tsx
index 17929a47f..64b1d535b 100644
--- a/packages/web-console/src/components/PopperToggle/index.tsx
+++ b/packages/web-console/src/components/PopperToggle/index.tsx
@@ -86,13 +86,14 @@ export const PopperToggle = ({
         return
       }
 
-      setActive(false)
-
-      if (onToggle) {
-        onToggle(false)
+      if (_active) {
+        setActive(false)
+        if (onToggle) {
+          onToggle(false)
+        }
       }
     },
-    [container, onToggle, triggerElement],
+    [container, onToggle, triggerElement, _active],
   )
 
   const handleKeyDown = useCallback(
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index f602a9dc7..255f4c040 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -105,15 +105,30 @@ const Badge = styled(Box)<{ $badgeColors: { primary: string, secondary: string }
   .instance-name {
     font-size: 1.6rem;
     display: inline-flex;
+    gap: 0;
     align-items: center;
     vertical-align: middle;
-    text-overflow: ellipsis;
     overflow: hidden;
-    white-space: nowrap;
     flex-shrink: 1;
-    min-width: 0;
     margin-left: 0.3rem;
 
+    &-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-shrink: 1;
+      min-width: 0;
+      color: inherit;
+    }
+
+    &-type {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-shrink: 0;
+      color: inherit;
+    }
+
     &.placeholder {
       color: ${({ theme }) => theme.color.orange};
     }
@@ -165,6 +180,7 @@ const EnterpriseBadge = styled.span`
 
 const Separator = styled.span<{ $color: string }>`
   display: inline-block;
+  flex-shrink: 0;
   width: 0.15rem;
   margin: 0 1rem;
   height: 1.8rem;
@@ -389,18 +405,20 @@ export const Toolbar = () => {
     } catch (e) {
       console.error(e)
       setSaveError(`Failed to save instance settings: ${e instanceof Error ? e.message : e}`)
-    } finally { 
-      await refreshSettingsAndPreferences()
+      const { preferences: newPreferences } = await refreshSettingsAndPreferences()
+      setPreviewValues(newPreferences)
     }
   }
 
   const handleToggle = useCallback((active: boolean) => {
-    setSettingsPopperActive(active)
-    setPreviewValues(active ? preferences : null)
-    if (!active) {
-      setSaveError(null)
-    }
-  }, [preferences])
+    refreshSettingsAndPreferences().then(({ preferences: newPreferences }) => {
+      setSettingsPopperActive(active)
+      if (!active) {
+        setSaveError(null)
+      }
+      setPreviewValues(active ? newPreferences : null)
+    })
+  }, [])
 
   return (
     <Root>
@@ -431,11 +449,11 @@ export const Toolbar = () => {
             )}
           </Box>
           {shownValues?.instance_name
-            ? <Text data-hook="topbar-instance-name" className="instance-name">
-                {instanceTypeReadable}
+            ? <Box data-hook="topbar-instance-name" className="instance-name">
+                <Text className="instance-name-type">{instanceTypeReadable}</Text>
                 <Separator $color={badgeColors.secondary} />
-                {shownValues?.instance_name}
-              </Text>
+                <Text className="instance-name-text">{shownValues?.instance_name}</Text>
+              </Box>
             : <Text data-hook="topbar-instance-name" className="instance-name placeholder">Instance name is not set</Text>
           }
           {canEditInstanceName && (
diff --git a/packages/web-console/src/providers/SettingsProvider/index.tsx b/packages/web-console/src/providers/SettingsProvider/index.tsx
index 79a780c91..1548eab2b 100644
--- a/packages/web-console/src/providers/SettingsProvider/index.tsx
+++ b/packages/web-console/src/providers/SettingsProvider/index.tsx
@@ -30,8 +30,8 @@ const SettingContext = createContext<{
   preferences: Preferences
   consoleConfig: ConsoleConfig
   warnings: Warning[]
-  refreshSettingsAndPreferences: () => Promise<void>
-}>({ settings: {}, preferences: {}, consoleConfig: {}, warnings: [], refreshSettingsAndPreferences: () => Promise.resolve() })
+  refreshSettingsAndPreferences: () => Promise<{ settings: Settings, preferences: Preferences }>
+}>({ settings: {}, preferences: {}, consoleConfig: {}, warnings: [], refreshSettingsAndPreferences: () => Promise.resolve({ settings: {}, preferences: {} }) })
 
 const connectionError = (
   <>
@@ -118,9 +118,20 @@ export const SettingsProvider = ({
 
   const refreshSettingsAndPreferences = async () => {
     const result = await fetchEndpoint("settings", connectionError)
+    const settings = result.config
+    const preferences = { version: result["preferences.version"], ...result.preferences }
     if (result) {
-      setSettings(result.config)
-      setPreferences({ version: result["preferences.version"], ...result.preferences })
+      setSettings(settings)
+      setPreferences(preferences)
+      return {
+        settings,
+        preferences
+      }
+    }
+
+    return {
+      settings: {},
+      preferences: {}
     }
   }
 
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index cf350a88e..82ac68699 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -437,7 +437,6 @@ export class Client {
     if (!response.ok) {
       throw new Error(response.statusText);
     }
-    await response.json()
   }
 
   async exportQueryToCsv(query: string) {

From 993382971e8d361a5e6618967c6677f4d828ebcf Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Wed, 21 May 2025 16:25:46 +0300
Subject: [PATCH 19/28] handle 409

---
 packages/web-console/src/utils/questdb/client.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index 82ac68699..5811eb135 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -434,8 +434,18 @@ export class Client {
         body: JSON.stringify(prefs),
       },
     )
+    if (response.status === 409) {
+      throw new Error("Instance information is changed since the last update. Please try again.")
+    }
     if (!response.ok) {
-      throw new Error(response.statusText);
+      let errorMessage: string
+      try {
+        const { error } = await response.json()
+        errorMessage = error
+      } catch (e) {
+        errorMessage = response.statusText
+      }
+      throw new Error(errorMessage)
     }
   }
 

From 7e7eb088ad0cd43fbde1911e8f06bc9dc0ee7c0c Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Wed, 21 May 2025 15:36:54 +0100
Subject: [PATCH 20/28] extract error message from response based on content
 type

---
 packages/browser-tests/questdb                   |  2 +-
 packages/web-console/src/utils/questdb/client.ts | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 8d0526b78..12568a344 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 8d0526b78dfc1e72b878e8666af07a99dc5a754a
+Subproject commit 12568a344cac134277274102596d037216630642
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index 5811eb135..527771961 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -440,8 +440,7 @@ export class Client {
     if (!response.ok) {
       let errorMessage: string
       try {
-        const { error } = await response.json()
-        errorMessage = error
+        errorMessage = await extractErrorMessage(response)
       } catch (e) {
         errorMessage = response.statusText
       }
@@ -532,3 +531,13 @@ export class Client {
     }
   }
 }
+
+async function extractErrorMessage(response: Response) {
+  const contentType = response.headers.get('Content-Type')
+  if (contentType?.includes('application/json')) {
+    const { error } = await response.json()
+    return error
+  } else {
+    return response.text()
+  }
+}

From e7819a76933679c8427abdc95c063e7fb381c35a Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Thu, 22 May 2025 14:38:17 +0300
Subject: [PATCH 21/28] toasts and focus handling

---
 .../src/components/PopperToggle/index.tsx     | 22 +++--
 .../src/components/Toast/index.tsx            | 87 +++++++++++++++--
 .../TopBar/InstanceSettingsPopper.tsx         | 45 ++++-----
 .../src/components/TopBar/toolbar.tsx         | 94 ++++++++++++++-----
 packages/web-console/src/components/index.ts  |  1 -
 .../src/providers/SettingsProvider/index.tsx  | 12 +--
 packages/web-console/src/styles/_toast.scss   | 49 ++++++++++
 .../web-console/src/utils/questdb/client.ts   |  8 +-
 8 files changed, 239 insertions(+), 79 deletions(-)
 create mode 100644 packages/web-console/src/styles/_toast.scss

diff --git a/packages/web-console/src/components/PopperToggle/index.tsx b/packages/web-console/src/components/PopperToggle/index.tsx
index 64b1d535b..1e48d550f 100644
--- a/packages/web-console/src/components/PopperToggle/index.tsx
+++ b/packages/web-console/src/components/PopperToggle/index.tsx
@@ -114,8 +114,21 @@ export const PopperToggle = ({
   useTransition(container, _active, transitionTimeoutId)
 
   useEffect(() => {
-    setActive(typeof active === "undefined" ? _active || false : active)
-  }, [active, _active])
+    if (typeof active !== "undefined") {
+      setActive(active)
+    }
+  }, [active])
+
+  useEffect(() => {
+    document.body.appendChild(container)
+
+    return () => {
+      clearTimeout(transitionTimeoutId.current)
+      if (document.body.contains(container)) {
+        document.body.removeChild(container)
+      }
+    }
+  }, [container])
 
   useEffect(() => {
     document.addEventListener("mousedown", handleMouseDown)
@@ -123,14 +136,11 @@ export const PopperToggle = ({
     document.addEventListener("keydown", handleKeyDown)
 
     return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      clearTimeout(transitionTimeoutId.current)
       document.removeEventListener("mousedown", handleMouseDown)
       document.removeEventListener("touchstart", handleMouseDown)
       document.removeEventListener("keydown", handleKeyDown)
-      document.body.contains(container) && document.body.removeChild(container)
     }
-  }, [container, handleMouseDown, handleKeyDown])
+  }, [handleMouseDown, handleKeyDown])
 
   return (
     <>
diff --git a/packages/web-console/src/components/Toast/index.tsx b/packages/web-console/src/components/Toast/index.tsx
index eea81c39c..4468e7ad0 100644
--- a/packages/web-console/src/components/Toast/index.tsx
+++ b/packages/web-console/src/components/Toast/index.tsx
@@ -2,22 +2,24 @@ import React from "react"
 import {
   ToastContainer as RTToastContainer,
   ToastContainerProps,
-  toast as _toast,
+  toast as rtToast,
   Slide,
   ToastOptions as RTToastOptions,
+  ToastContent,
 } from "react-toastify"
 import { useNotificationCenter as RTNotificationCenter } from "react-toastify/addons/use-notification-center"
 import { NotificationCenterItem as RNotificationCenterItem } from "react-toastify/addons/use-notification-center/useNotificationCenter"
 import { BadgeType } from "../../scenes/Import/ImportCSVFiles/types"
 import {
-  Check,
   CloseCircle,
   ErrorWarning,
   Information,
 } from "@styled-icons/remix-line"
+import { CheckmarkOutline } from "@styled-icons/evaicons-outline"
 import { theme } from "../../theme"
 
 import "react-toastify/dist/ReactToastify.css"
+import "../../styles/_toast.scss"
 
 interface StyledIconProps
   extends React.PropsWithRef<React.SVGProps<SVGSVGElement>> {
@@ -25,33 +27,95 @@ interface StyledIconProps
   title?: string | null
 }
 
-export const toast = _toast
+export type ToastOptions = RTToastOptions
 
 export const useNotificationCenter = RTNotificationCenter
 
 export type NotificationCenterItem<Data> = RNotificationCenterItem<Data>
 
-export type ToastOptions = RTToastOptions
-
 export const ToastIcon = ({
   type,
+  size = 18,
   ...props
 }: StyledIconProps & {
   type: BadgeType
 }) => {
   switch (type) {
     case BadgeType.SUCCESS:
-      return <Check {...props} color={theme.color.green} />
+      return <CheckmarkOutline {...props} size={size} color={theme.color.green} />
     case BadgeType.WARNING:
-      return <ErrorWarning {...props} color={theme.color.orange} />
+      return <ErrorWarning {...props} size={size} color={theme.color.orange} />
     case BadgeType.ERROR:
-      return <CloseCircle {...props} color={theme.color.red} />
+      return <CloseCircle {...props} size={size} color={theme.color.red} />
     case BadgeType.INFO:
     default:
-      return <Information {...props} color={theme.color.cyan} />
+      return <Information {...props} size={size} color={theme.color.cyan} />
   }
 }
 
+const toast = {
+  info: (content: ToastContent, options?: ToastOptions) => {
+    return rtToast.info(content, {
+      icon: <ToastIcon type={BadgeType.INFO} />,
+      className: "toast-info-container",
+      progressStyle: {
+        background: theme.color.cyan,
+      },
+      style: {
+        borderColor: theme.color.cyan,
+        background: theme.color.backgroundLighter,
+      },
+      ...options,
+    })
+  },
+  success: (content: ToastContent, options?: ToastOptions) => {
+    return rtToast.success(content, {
+      icon: <ToastIcon type={BadgeType.SUCCESS} />,
+      className: "toast-success-container",
+      progressStyle: {
+        background: theme.color.green,
+      },
+      style: {
+        borderColor: theme.color.green,
+        background: theme.color.backgroundLighter,
+      },
+      ...options,
+    })
+  },
+  warning: (content: ToastContent, options?: ToastOptions) => {
+    return rtToast.warning(content, {
+      icon: <ToastIcon type={BadgeType.WARNING} />,
+      className: "toast-warning-container",
+      progressStyle: {
+        background: theme.color.orange,
+      },
+      style: {
+        borderColor: theme.color.orange,
+        background: theme.color.backgroundLighter,
+      },
+      ...options,
+    })
+  },
+  error: (content: ToastContent, options?: ToastOptions) => {
+    return rtToast.error(content, {
+      icon: <ToastIcon type={BadgeType.ERROR} />,
+      progressStyle: {
+        background: theme.color.red,
+      },
+      className: "toast-error-container",
+      style: {
+        borderColor: theme.color.red,
+        background: theme.color.backgroundLighter,
+      },
+      ...options,
+    })
+  },
+  dismiss: rtToast.dismiss,
+  isActive: rtToast.isActive,
+}
+
+export { toast }
+
 export const ToastContainer = (props?: ToastContainerProps) => {
   const mergedProps: ToastContainerProps = {
     autoClose: 3000,
@@ -59,6 +123,11 @@ export const ToastContainer = (props?: ToastContainerProps) => {
     position: "top-right",
     theme: "dark",
     transition: Slide,
+    hideProgressBar: false,
+    closeButton: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+    pauseOnFocusLoss: false,
     ...props,
   }
 
diff --git a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
index ae6154d42..20177165b 100644
--- a/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
+++ b/packages/web-console/src/components/TopBar/InstanceSettingsPopper.tsx
@@ -226,19 +226,12 @@ const ErrorText = styled(Text)`
   margin-top: 0.2rem;
 `
 
-const Footer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`
-
 type Props = {
   active: boolean
   onToggle: (active: boolean) => void
   values: Preferences
   onSave: (values: Preferences) => Promise<void>
   onValuesChange: (values: Preferences) => void
-  error: string | null
   trigger: ReactNode
 }
 
@@ -248,7 +241,6 @@ export const InstanceSettingsPopper = ({
   values, 
   onSave, 
   onValuesChange,
-  error,
   trigger,
 }: Props) => {
   const [isSaving, setIsSaving] = useState(false)
@@ -457,26 +449,23 @@ export const InstanceSettingsPopper = ({
               </ColorPickerContainer>
             )}
           </FormGroup>
-          <Footer>
-            {error && <ErrorText>{error}</ErrorText>}
-            <Buttons>
-              <StyledButton 
-                type="submit"
-                prefixIcon={isSaving ? <Loader /> : undefined} 
-                data-hook="topbar-instance-save-button"
-              >
-                Save
-              </StyledButton>
-              <StyledButton 
-                type="button"
-                onClick={() => onToggle(false)} 
-                skin="secondary" 
-                data-hook="topbar-instance-cancel-button"
-              >
-                Cancel
-              </StyledButton>
-            </Buttons>
-          </Footer>
+          <Buttons>
+            <StyledButton 
+              type="submit"
+              prefixIcon={isSaving ? <Loader /> : undefined} 
+              data-hook="topbar-instance-save-button"
+            >
+              Save
+            </StyledButton>
+            <StyledButton 
+              type="button"
+              onClick={() => onToggle(false)} 
+              skin="secondary" 
+              data-hook="topbar-instance-cancel-button"
+            >
+              Cancel
+            </StyledButton>
+          </Buttons>
         </StyledForm>
       </Wrapper>
     </PopperToggle>
diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 255f4c040..c2ef932a1 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -7,6 +7,7 @@ import { User as UserIcon, LogoutCircle, Edit } from "@styled-icons/remix-line"
 import { InfoCircle, Error as ErrorIcon } from "@styled-icons/boxicons-regular"
 import { RocketTakeoff, Tools } from "@styled-icons/bootstrap"
 import { Flask } from "@styled-icons/boxicons-solid"
+import { toast } from '../'
 import { Text } from "../Text"
 import { selectors } from "../../store"
 import { useSelector } from "react-redux"
@@ -84,6 +85,7 @@ const Badge = styled(Box)<{ $badgeColors: { primary: string, secondary: string }
   flex-shrink: 1;
   min-width: 0;
   gap: 0;
+  transition: opacity 0.1s ease;
 
   ${({ $badgeColors }) => `
     background: ${$badgeColors.primary};
@@ -137,7 +139,8 @@ const Badge = styled(Box)<{ $badgeColors: { primary: string, secondary: string }
   .edit-icon {
     cursor: pointer;
     display: inline;
-    width: 0;
+    width: 2.2rem;
+    margin-left: 1rem;
     padding: 0.1rem;
     background: inherit;
     border-radius: 0.4rem;
@@ -152,13 +155,6 @@ const Badge = styled(Box)<{ $badgeColors: { primary: string, secondary: string }
       }
     }
   }
-
-  &:hover {
-    .edit-icon {
-      width: 2.2rem;
-      margin-left: 1rem;
-    }
-  }
 `
 const User = styled(Box).attrs({ gap: "0.5rem" })`
   background: ${({ theme }) => theme.color.backgroundLighter};
@@ -320,6 +316,25 @@ const CustomIconWithTooltip = ({
   )
 }
 
+const animateBadgeUpdate = (badge: HTMLElement) => {
+  badge.style.opacity = "0"
+  setTimeout(() => {
+    badge.style.opacity = "1"
+  }, 200)
+  setTimeout(() => {
+    badge.style.opacity = "0"
+  }, 400)
+  setTimeout(() => {
+    badge.style.opacity = "1"
+  }, 600)
+  setTimeout(() => {
+    badge.style.opacity = "0"
+  }, 800)
+  setTimeout(() => {
+    badge.style.opacity = "1"
+  }, 1000)
+}
+
 export const Toolbar = () => {
   const { quest } = useContext(QuestContext)
   const { settings, preferences, refreshSettingsAndPreferences } = useSettings()
@@ -329,7 +344,6 @@ export const Toolbar = () => {
   const [settingsPopperActive, setSettingsPopperActive] = useState(false)
   const [previewValues, setPreviewValues] = useState<Preferences | null>(null)
   const [canEditInstanceName, setCanEditInstanceName] = useState(false)
-  const [saveError, setSaveError] = useState<string | null>(null)
   const shownValues = settingsPopperActive ? previewValues : preferences
   const instanceTypeReadable = shownValues?.instance_type
     ? shownValues.instance_type.charAt(0).toUpperCase() + shownValues.instance_type.slice(1)
@@ -399,26 +413,59 @@ export const Toolbar = () => {
 
   const handleSaveSettings = async (values: Preferences) => {
     try {
-      setSaveError(null)
-      await quest.savePreferences(values)
-      handleToggle(false)
-    } catch (e) {
-      console.error(e)
-      setSaveError(`Failed to save instance settings: ${e instanceof Error ? e.message : e}`)
+      const result = await quest.savePreferences(values)
+      if (result.success) {
+        handleToggle(false)
+        toast.success("Instance information updated successfully.")
+        return
+      }
+
       const { preferences: newPreferences } = await refreshSettingsAndPreferences()
       setPreviewValues(newPreferences)
+      if (result.status === 409) {
+        toast.error("Instance information is updated with the latest changes from the server. Please try updating it again.", { autoClose: 5000 })
+        return
+      }
+
+      throw new Error(result.message)
+    } catch (e) {
+      toast.error("Failed to update instance information: " + e)
     }
   }
 
-  const handleToggle = useCallback((active: boolean) => {
-    refreshSettingsAndPreferences().then(({ preferences: newPreferences }) => {
-      setSettingsPopperActive(active)
-      if (!active) {
-        setSaveError(null)
+  const handleUpdateInstanceInfo = useCallback(async (inform: boolean = true) => {
+    const currentVersion = preferences?.version
+    const { preferences: newPreferences } = await refreshSettingsAndPreferences()
+    if (currentVersion !== newPreferences.version && inform) {
+      toast.info("Instance information is updated with the latest changes from the server.")
+      const badge = document.querySelector('[data-hook="topbar-instance-badge"]')
+      if (badge) {
+        animateBadgeUpdate(badge as HTMLElement)
       }
-      setPreviewValues(active ? newPreferences : null)
-    })
-  }, [])
+    }
+    return newPreferences
+  }, [refreshSettingsAndPreferences, preferences])
+
+  const handleUpdateInstanceInfoWithInform = useCallback(async () => {
+    const newPreferences = await handleUpdateInstanceInfo(true)
+    if (settingsPopperActive && previewValues?.version !== newPreferences.version) {
+      setPreviewValues(newPreferences)
+    }
+  }, [handleUpdateInstanceInfo, settingsPopperActive, previewValues])
+
+  const handleToggle = useCallback(async (active: boolean) => {
+    const newPreferences = await handleUpdateInstanceInfo(active)
+    setPreviewValues(active ? newPreferences : null)
+    setSettingsPopperActive(active)
+  }, [handleUpdateInstanceInfo])
+
+  useEffect(() => {
+    window.addEventListener("focus", handleUpdateInstanceInfoWithInform)
+
+    return () => {
+      window.removeEventListener("focus", handleUpdateInstanceInfoWithInform)
+    }
+  }, [handleUpdateInstanceInfoWithInform])
 
   return (
     <Root>
@@ -463,7 +510,6 @@ export const Toolbar = () => {
               values={previewValues ?? preferences}
               onSave={handleSaveSettings}
               onValuesChange={setPreviewValues}
-              error={saveError}
               trigger={<Edit data-hook="topbar-instance-edit-icon" size="18px" className={`edit-icon ${shownValues?.instance_name ? '' : 'placeholder'}`} />}
             />
           )}
diff --git a/packages/web-console/src/components/index.ts b/packages/web-console/src/components/index.ts
index acdffcf71..e8c085f35 100644
--- a/packages/web-console/src/components/index.ts
+++ b/packages/web-console/src/components/index.ts
@@ -38,7 +38,6 @@ export * from "./PopperHover"
 export * from "./PopperToggle"
 export * from "./SwitchButton"
 export * from "./Text"
-export * from "./Toast"
 export * from "./ToggleButton"
 export * from "./Tooltip"
 export * from "./Transition"
diff --git a/packages/web-console/src/providers/SettingsProvider/index.tsx b/packages/web-console/src/providers/SettingsProvider/index.tsx
index 1548eab2b..f72ac3307 100644
--- a/packages/web-console/src/providers/SettingsProvider/index.tsx
+++ b/packages/web-console/src/providers/SettingsProvider/index.tsx
@@ -118,14 +118,14 @@ export const SettingsProvider = ({
 
   const refreshSettingsAndPreferences = async () => {
     const result = await fetchEndpoint("settings", connectionError)
-    const settings = result.config
-    const preferences = { version: result["preferences.version"], ...result.preferences }
+    const newSettings = result.config
+    const newPreferences = { version: result["preferences.version"], ...result.preferences }
     if (result) {
-      setSettings(settings)
-      setPreferences(preferences)
+      setSettings(newSettings)
+      setPreferences(newPreferences)
       return {
-        settings,
-        preferences
+        settings: newSettings,
+        preferences: newPreferences
       }
     }
 
diff --git a/packages/web-console/src/styles/_toast.scss b/packages/web-console/src/styles/_toast.scss
new file mode 100644
index 000000000..6f2d2a60b
--- /dev/null
+++ b/packages/web-console/src/styles/_toast.scss
@@ -0,0 +1,49 @@
+.Toastify__toast-container {
+  top: 4.5rem;
+}
+
+.Toastify__toast {
+  font-family: inherit;
+  font-size: 1.4rem;
+  border: 1px solid transparent;
+  border-radius: 1rem;
+  opacity: 1;
+  align-items: center;
+  display: flex;
+  padding: 0 1.2rem;
+  gap: 1rem;
+}
+
+.Toastify__toast-body {
+  padding: 1rem 0 !important;
+}
+
+.Toastify__toast-icon {
+  margin-right: 1rem;
+  width: 1.8rem;
+  height: 1.8rem;
+}
+
+.Toastify__progress-bar {
+  height: 0.3rem;
+}
+
+.Toastify__close-button {
+  opacity: 0.7;
+  align-self: center;
+  transition: none;
+}
+
+.Toastify__close-button:hover {
+  opacity: 1;
+}
+
+.Toastify__toast-body {
+  display: flex;
+  align-items: center;
+  padding: 0.4rem 0;
+}
+
+.Toastify--animate {
+  animation-duration: 0.2s !important;
+}
\ No newline at end of file
diff --git a/packages/web-console/src/utils/questdb/client.ts b/packages/web-console/src/utils/questdb/client.ts
index 527771961..110bf6f65 100644
--- a/packages/web-console/src/utils/questdb/client.ts
+++ b/packages/web-console/src/utils/questdb/client.ts
@@ -424,7 +424,7 @@ export class Client {
     })
   }
 
-  async savePreferences(preferences: Preferences): Promise<void> {
+  async savePreferences(preferences: Preferences): Promise<{ status: number, message?: string, success: boolean }> {
     const { version, ...prefs } = preferences;
     const response: Response = await fetch(
       `settings?version=${version}`,
@@ -434,9 +434,6 @@ export class Client {
         body: JSON.stringify(prefs),
       },
     )
-    if (response.status === 409) {
-      throw new Error("Instance information is changed since the last update. Please try again.")
-    }
     if (!response.ok) {
       let errorMessage: string
       try {
@@ -444,8 +441,9 @@ export class Client {
       } catch (e) {
         errorMessage = response.statusText
       }
-      throw new Error(errorMessage)
+      return { status: response.status, message: errorMessage, success: false }
     }
+    return { status: response.status, success: true }
   }
 
   async exportQueryToCsv(query: string) {

From b95efa62867bf377835afcd387c7440e8687cbc3 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Thu, 22 May 2025 15:08:54 +0300
Subject: [PATCH 22/28] increase toast duration

---
 packages/web-console/src/components/TopBar/toolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index c2ef932a1..67dc13b2f 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -429,7 +429,7 @@ export const Toolbar = () => {
 
       throw new Error(result.message)
     } catch (e) {
-      toast.error("Failed to update instance information: " + e)
+      toast.error("Failed to update instance information: " + e, { autoClose: 5000 })
     }
   }
 
@@ -437,7 +437,7 @@ export const Toolbar = () => {
     const currentVersion = preferences?.version
     const { preferences: newPreferences } = await refreshSettingsAndPreferences()
     if (currentVersion !== newPreferences.version && inform) {
-      toast.info("Instance information is updated with the latest changes from the server.")
+      toast.info("Instance information is updated with the latest changes from the server.", { autoClose: 5000 })
       const badge = document.querySelector('[data-hook="topbar-instance-badge"]')
       if (badge) {
         animateBadgeUpdate(badge as HTMLElement)

From fa0e99cebcc591ab2ce4e662872b959c8f6723c1 Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Thu, 22 May 2025 15:44:30 +0300
Subject: [PATCH 23/28] update submodule

---
 packages/browser-tests/questdb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 12568a344..3c4e38a51 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 12568a344cac134277274102596d037216630642
+Subproject commit 3c4e38a51ec75805059c1c850a3c221abe34a63a

From 4480aaa4d40d27655e86b65e6e3371017b6a2033 Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Fri, 23 May 2025 00:55:35 +0100
Subject: [PATCH 24/28] fix release type setting

---
 packages/web-console/src/providers/SettingsProvider/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-console/src/providers/SettingsProvider/index.tsx b/packages/web-console/src/providers/SettingsProvider/index.tsx
index f72ac3307..8307808df 100644
--- a/packages/web-console/src/providers/SettingsProvider/index.tsx
+++ b/packages/web-console/src/providers/SettingsProvider/index.tsx
@@ -11,7 +11,7 @@ import { Box, Button, Text } from "@questdb/react-components"
 import { Refresh } from "@styled-icons/remix-line"
 import {setValue} from "../../utils/localStorage";
 import {StoreKey} from "../../utils/localStorage/types";
-import { Preferences } from '../../utils/questdb'
+import { Preferences } from '../../utils'
 
 enum View {
   loading = 0,
@@ -146,7 +146,7 @@ export const SettingsProvider = ({
       if (settings) {
         setSettings(settings.config)
         setPreferences({ version: settings["preferences.version"], ...settings.preferences })
-        setValue(StoreKey.RELEASE_TYPE, settings["release.type"])
+        setValue(StoreKey.RELEASE_TYPE, settings.config["release.type"])
       }
       if (warnings) {
         setWarnings(warnings)

From ca3a1fe343da0c9581be48a7c13291fb0d77bef2 Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Fri, 23 May 2025 01:53:46 +0100
Subject: [PATCH 25/28] instance info into telemetry

---
 .../cypress/integration/console/telemetry.spec.js          | 7 +++++--
 packages/browser-tests/questdb                             | 2 +-
 packages/web-console/src/store/Telemetry/epics.ts          | 6 +++---
 packages/web-console/src/store/Telemetry/types.ts          | 3 +++
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/browser-tests/cypress/integration/console/telemetry.spec.js b/packages/browser-tests/cypress/integration/console/telemetry.spec.js
index 924bbbb96..dec180847 100644
--- a/packages/browser-tests/cypress/integration/console/telemetry.spec.js
+++ b/packages/browser-tests/cypress/integration/console/telemetry.spec.js
@@ -22,7 +22,7 @@ describe("telemetry config", () => {
     cy.wait("@telemetryConfig").then(({ response }) => {
       const columnNames = response.body.columns.map((c) => c.name);
       expect(response.statusCode).to.equal(200);
-      ["id", "enabled", "version", "os", "package"].forEach((name) => {
+      ["id", "enabled", "version", "os", "package", "instance_name", "instance_type", "instance_desc"].forEach((name) => {
         expect(columnNames).to.include(name);
       });
       expect(response.body.dataset[0][0]).to.be.string;
@@ -34,6 +34,9 @@ describe("telemetry config", () => {
       expect(typeof response.body.dataset[0][4]).to.satisfy(
         (v) => v === null || typeof v === "string"
       );
+      expect(response.body.dataset[0][5]).to.be.string;
+      expect(response.body.dataset[0][6]).to.be.string;
+      expect(response.body.dataset[0][7]).to.be.string;
     });
   });
 });
@@ -62,7 +65,7 @@ describe("telemetry enabled", () => {
   it("should start telemetry when enabled", () => {
     cy.wait("@telemetryConfig").then(({ response }) => {
       cy.wait("@addTelemetry").then(({ request }) => {
-        const payload = JSON.parse(request.body);
+        const payload = request.body;
         expect(payload.id).to.equal(response.body.dataset[0][0]);
         expect(payload.version).to.equal(response.body.dataset[0][2]);
         expect(payload.os).to.equal(response.body.dataset[0][3]);
diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 3c4e38a51..2f6e69823 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 3c4e38a51ec75805059c1c850a3c221abe34a63a
+Subproject commit 2f6e69823b94f2c8678a569fb670679db4654ac6
diff --git a/packages/web-console/src/store/Telemetry/epics.ts b/packages/web-console/src/store/Telemetry/epics.ts
index 968641932..0b770e0b2 100644
--- a/packages/web-console/src/store/Telemetry/epics.ts
+++ b/packages/web-console/src/store/Telemetry/epics.ts
@@ -101,14 +101,14 @@ export const getRemoteConfig: Epic<StoreAction, TelemetryAction, StoreShape> = (
     switchMap(([_, state]) => {
       const config = selectors.telemetry.getConfig(state)
 
-      const isEE = getValue(StoreKey.RELEASE_TYPE) === "EE"
-      if (isEE) {
+      const releaseType = getValue(StoreKey.RELEASE_TYPE);
+      if (releaseType === "EE" || config?.enabled) {
         fetch(`${API}/add-ent`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify(config),
+          body: JSON.stringify({ ...config, releaseType }),
         }).catch( () => {
         })
       }
diff --git a/packages/web-console/src/store/Telemetry/types.ts b/packages/web-console/src/store/Telemetry/types.ts
index 5d899c8d9..5d2198d79 100644
--- a/packages/web-console/src/store/Telemetry/types.ts
+++ b/packages/web-console/src/store/Telemetry/types.ts
@@ -28,6 +28,9 @@ export type TelemetryConfigShape = Readonly<{
   version: string
   os: string
   package: string
+  instance_name: string
+  instance_type: string
+  instance_desc: string
 }>
 
 export type TelemetryRemoteConfigShape = Readonly<{

From 8edffefce83043ecfa1da96cd7b0fc94f372215e Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Fri, 23 May 2025 08:09:38 +0100
Subject: [PATCH 26/28] instance info into telemetry

---
 .../src/components/TopBar/toolbar.tsx          | 11 ++++++++++-
 .../web-console/src/store/Telemetry/epics.ts   | 14 +++-----------
 packages/web-console/src/utils/telemetry.ts    | 18 ++++++++++++++++++
 3 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 packages/web-console/src/utils/telemetry.ts

diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 67dc13b2f..71f12b5c4 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -19,6 +19,9 @@ import { InstanceSettingsPopper } from "./InstanceSettingsPopper"
 import { Preferences, InstanceType } from "../../utils"
 import { PopperHover, Placement } from "../"
 import { useTheme } from "styled-components"
+import { TelemetryTable } from "../../consts";
+import { TelemetryConfigShape } from "../../store/Telemetry/types";
+import { sendEntTelemetry } from "../../utils/telemetry";
 
 const EnvIconWrapper = styled.div<{ $background?: string }>`
   display: flex;
@@ -415,8 +418,14 @@ export const Toolbar = () => {
     try {
       const result = await quest.savePreferences(values)
       if (result.success) {
-        handleToggle(false)
+        await handleToggle(false)
         toast.success("Instance information updated successfully.")
+
+        const response = await quest.query<TelemetryConfigShape>(`${TelemetryTable.CONFIG} limit -1`)
+        if (response.type === QuestDB.Type.DQL && response.count === 1) {
+          const config = response.data[0] as TelemetryConfigShape
+          sendEntTelemetry(config)
+        }
         return
       }
 
diff --git a/packages/web-console/src/store/Telemetry/epics.ts b/packages/web-console/src/store/Telemetry/epics.ts
index 0b770e0b2..1918bff9f 100644
--- a/packages/web-console/src/store/Telemetry/epics.ts
+++ b/packages/web-console/src/store/Telemetry/epics.ts
@@ -44,6 +44,7 @@ import * as QuestDB from "../../utils/questdb"
 import { getValue } from "../../utils/localStorage"
 import { StoreKey } from "../../utils/localStorage/types"
 import { AuthPayload } from "../../modules/OAuth2/types"
+import { sendEntTelemetry } from "../../utils/telemetry";
 
 const quest = new QuestDB.Client()
 
@@ -100,17 +101,8 @@ export const getRemoteConfig: Epic<StoreAction, TelemetryAction, StoreShape> = (
     withLatestFrom(state$),
     switchMap(([_, state]) => {
       const config = selectors.telemetry.getConfig(state)
-
-      const releaseType = getValue(StoreKey.RELEASE_TYPE);
-      if (releaseType === "EE" || config?.enabled) {
-        fetch(`${API}/add-ent`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ ...config, releaseType }),
-        }).catch( () => {
-        })
+      if (config) {
+          sendEntTelemetry(config)
       }
 
       if (config?.enabled) {
diff --git a/packages/web-console/src/utils/telemetry.ts b/packages/web-console/src/utils/telemetry.ts
new file mode 100644
index 000000000..af5a12598
--- /dev/null
+++ b/packages/web-console/src/utils/telemetry.ts
@@ -0,0 +1,18 @@
+import { getValue } from "./localStorage";
+import { StoreKey } from "./localStorage/types";
+import { API } from "../consts";
+import { TelemetryConfigShape } from "../store/Telemetry/types";
+
+export const sendEntTelemetry = (config: Readonly<TelemetryConfigShape>) => {
+  const releaseType = getValue(StoreKey.RELEASE_TYPE);
+  if (releaseType === "EE" || config?.enabled) {
+    fetch(`${API}/add-ent`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({...config, releaseType}),
+    }).catch(() => {
+    })
+  }
+}

From e64fccb764ebcef29b35e0a1706463272a68b818 Mon Sep 17 00:00:00 2001
From: glasstiger <imre@questdb.io>
Date: Fri, 23 May 2025 12:34:08 +0100
Subject: [PATCH 27/28] refactoring, renaming

---
 .../src/components/TopBar/toolbar.tsx         |  6 ++--
 .../web-console/src/store/Telemetry/epics.ts  | 29 +++++--------------
 packages/web-console/src/utils/telemetry.ts   | 24 ++++++++++++---
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/web-console/src/components/TopBar/toolbar.tsx b/packages/web-console/src/components/TopBar/toolbar.tsx
index 71f12b5c4..382776733 100644
--- a/packages/web-console/src/components/TopBar/toolbar.tsx
+++ b/packages/web-console/src/components/TopBar/toolbar.tsx
@@ -21,7 +21,7 @@ import { PopperHover, Placement } from "../"
 import { useTheme } from "styled-components"
 import { TelemetryTable } from "../../consts";
 import { TelemetryConfigShape } from "../../store/Telemetry/types";
-import { sendEntTelemetry } from "../../utils/telemetry";
+import { sendServerInfoTelemetry } from "../../utils/telemetry";
 
 const EnvIconWrapper = styled.div<{ $background?: string }>`
   display: flex;
@@ -423,8 +423,8 @@ export const Toolbar = () => {
 
         const response = await quest.query<TelemetryConfigShape>(`${TelemetryTable.CONFIG} limit -1`)
         if (response.type === QuestDB.Type.DQL && response.count === 1) {
-          const config = response.data[0] as TelemetryConfigShape
-          sendEntTelemetry(config)
+          const serverInfo = response.data[0] as TelemetryConfigShape
+          sendServerInfoTelemetry(serverInfo)
         }
         return
       }
diff --git a/packages/web-console/src/store/Telemetry/epics.ts b/packages/web-console/src/store/Telemetry/epics.ts
index 1918bff9f..ff1d969f0 100644
--- a/packages/web-console/src/store/Telemetry/epics.ts
+++ b/packages/web-console/src/store/Telemetry/epics.ts
@@ -36,7 +36,6 @@ import {
   TelemetryAction,
   TelemetryAT,
   TelemetryConfigShape,
-  TelemetryRemoteConfigShape,
 } from "../../types"
 
 import { fromFetch } from "../../utils"
@@ -44,11 +43,11 @@ import * as QuestDB from "../../utils/questdb"
 import { getValue } from "../../utils/localStorage"
 import { StoreKey } from "../../utils/localStorage/types"
 import { AuthPayload } from "../../modules/OAuth2/types"
-import { sendEntTelemetry } from "../../utils/telemetry";
+import { sendServerInfoTelemetry, getTelemetryTimestamp } from "../../utils/telemetry";
 
 const quest = new QuestDB.Client()
 
-export const getConfig: Epic<StoreAction, TelemetryAction, StoreShape> = (
+export const getServerInfo: Epic<StoreAction, TelemetryAction, StoreShape> = (
   action$,
 ) =>
   action$.pipe(
@@ -92,7 +91,7 @@ export const getConfig: Epic<StoreAction, TelemetryAction, StoreShape> = (
     }),
   )
 
-export const getRemoteConfig: Epic<StoreAction, TelemetryAction, StoreShape> = (
+export const getLatestTelemetryTimestamp: Epic<StoreAction, TelemetryAction, StoreShape> = (
   action$,
   state$,
 ) =>
@@ -100,23 +99,11 @@ export const getRemoteConfig: Epic<StoreAction, TelemetryAction, StoreShape> = (
     ofType<StoreAction, SetTelemetryConfigAction>(TelemetryAT.SET_CONFIG),
     withLatestFrom(state$),
     switchMap(([_, state]) => {
-      const config = selectors.telemetry.getConfig(state)
-      if (config) {
-          sendEntTelemetry(config)
-      }
-
-      if (config?.enabled) {
-        return fromFetch<Partial<TelemetryRemoteConfigShape>>(
-          `${API}/config`,
-          {
-            method: "POST",
-            body: JSON.stringify(config),
-          },
-          false,
-        )
+      const serverInfo = selectors.telemetry.getConfig(state)
+      if (serverInfo) {
+          sendServerInfoTelemetry(serverInfo)
       }
-
-      return NEVER
+      return getTelemetryTimestamp(serverInfo)
     }),
     switchMap((response) => {
       if (response.error) {
@@ -224,4 +211,4 @@ export const startTelemetry: Epic<StoreAction, TelemetryAction, StoreShape> = (
     }),
   )
 
-export default [getConfig, getRemoteConfig, startTelemetry]
+export default [getServerInfo, getLatestTelemetryTimestamp, startTelemetry]
diff --git a/packages/web-console/src/utils/telemetry.ts b/packages/web-console/src/utils/telemetry.ts
index af5a12598..dd026bcbb 100644
--- a/packages/web-console/src/utils/telemetry.ts
+++ b/packages/web-console/src/utils/telemetry.ts
@@ -1,18 +1,34 @@
 import { getValue } from "./localStorage";
 import { StoreKey } from "./localStorage/types";
 import { API } from "../consts";
-import { TelemetryConfigShape } from "../store/Telemetry/types";
+import { TelemetryConfigShape, TelemetryRemoteConfigShape } from "../store/Telemetry/types";
+import { fromFetch } from "./fromFetch";
+import { NEVER } from "rxjs"
 
-export const sendEntTelemetry = (config: Readonly<TelemetryConfigShape>) => {
+export const sendServerInfoTelemetry = (serverInfo: Readonly<TelemetryConfigShape>) => {
   const releaseType = getValue(StoreKey.RELEASE_TYPE);
-  if (releaseType === "EE" || config?.enabled) {
+  if (releaseType === "EE" || serverInfo?.enabled) {
     fetch(`${API}/add-ent`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({...config, releaseType}),
+      body: JSON.stringify({...serverInfo, releaseType}),
     }).catch(() => {
     })
   }
 }
+
+export const getTelemetryTimestamp = (serverInfo: Readonly<TelemetryConfigShape> | undefined) => {
+  if (serverInfo?.enabled) {
+    return fromFetch<Partial<TelemetryRemoteConfigShape>>(
+      `${API}/config`,
+      {
+        method: "POST",
+        body: JSON.stringify(serverInfo),
+      },
+      false,
+    )
+  }
+  return NEVER
+}

From 38528f7d1ffe14143cf36a629df3051884609b2d Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Fri, 23 May 2025 19:03:13 +0300
Subject: [PATCH 28/28] submodule

---
 packages/browser-tests/questdb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/browser-tests/questdb b/packages/browser-tests/questdb
index 2f6e69823..9374c7857 160000
--- a/packages/browser-tests/questdb
+++ b/packages/browser-tests/questdb
@@ -1 +1 @@
-Subproject commit 2f6e69823b94f2c8678a569fb670679db4654ac6
+Subproject commit 9374c78570f2dc089aff8665316eea294b4ac8a2