From 7f80a2f9e6899bc6de845fd4258b42613ab1d486 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Mon, 26 Jan 2026 21:50:26 +0700
Subject: [PATCH 1/7] use zod for configuration schema

---
 src/stores/configuration.ts       | 104 +++++-------------------------
 src/stores/configurationSchema.ts |  87 +++++++++++++++++++++++++
 2 files changed, 102 insertions(+), 89 deletions(-)
 create mode 100644 src/stores/configurationSchema.ts

diff --git a/src/stores/configuration.ts b/src/stores/configuration.ts
index 2e3a894..17d2360 100644
--- a/src/stores/configuration.ts
+++ b/src/stores/configuration.ts
@@ -17,94 +17,16 @@ import {
   setData,
   setEncryptedData,
 } from "@beekeeperstudio/plugin";
-import {
-  AvailableProviders,
-  disabledModelsByDefault,
-  providerConfigs,
-} from "@/config";
+import { AvailableProviders, providerConfigs } from "@/config";
 import { useChatStore } from "./chat";
-
-type Model = {
-  id: string;
-  displayName: string;
-};
-
-type Configurable = {
-  // ==== GENERAL ====
-  /** Append custom instructions to the default system instructions. */
-  customInstructions: string;
-  /** Append custom instructions to the default system instructions.
-   * It's applied based on the connection ID */
-  customConnectionInstructions: {
-    workspaceId: number;
-    connectionId: number;
-    instructions: string;
-  }[];
-  allowExecutionOfReadOnlyQueries: boolean;
-  enableAutoCompact: boolean;
-
-  // ==== MODELS ====
-  /** List of disabled models by id. */
-  disabledModels: { providerId: AvailableProviders; modelId: string }[];
-  /** Models that are removed are not shown in the UI and cannot be enabled. */
-  removedModels: { providerId: AvailableProviders; modelId: string }[];
-  providers_openaiCompat_baseUrl: string;
-  providers_openaiCompat_headers: string;
-  providers_ollama_baseUrl: string;
-  providers_ollama_headers: string;
-} & {
-  // User defined models
-  [K in AvailableProviders as `providers_${K}_models`]: Model[];
-};
-
-type EncryptedConfigurable = {
-  "providers.openai.apiKey": string;
-  "providers.anthropic.apiKey": string;
-  "providers.google.apiKey": string;
-  providers_openaiCompat_apiKey: string;
-};
-
-type ConfigurationState = Configurable & EncryptedConfigurable;
-
-export type ConfigurationKey = keyof ConfigurationState;
-
-const encryptedConfigKeys: (keyof EncryptedConfigurable)[] = [
-  "providers.openai.apiKey",
-  "providers.anthropic.apiKey",
-  "providers.google.apiKey",
-  "providers_openaiCompat_apiKey",
-];
-
-const defaultConfiguration: ConfigurationState = {
-  // ==== GENERAL ====
-  customInstructions: "",
-  customConnectionInstructions: [],
-  allowExecutionOfReadOnlyQueries: false,
-  enableAutoCompact: true,
-
-  // ==== MODELS ====
-  "providers.openai.apiKey": "",
-  "providers.anthropic.apiKey": "",
-  "providers.google.apiKey": "",
-  providers_openaiCompat_baseUrl: "",
-  providers_openaiCompat_apiKey: "",
-  providers_openaiCompat_headers: "",
-  providers_ollama_baseUrl: "http://localhost:11434",
-  providers_ollama_headers: "",
-  providers_openai_models: [],
-  providers_anthropic_models: [],
-  providers_google_models: [],
-  providers_openaiCompat_models: [],
-  providers_ollama_models: [],
-  disabledModels: disabledModelsByDefault,
-  removedModels: [],
-};
-
-function isEncryptedConfig(
-  config: string,
-): config is keyof EncryptedConfigurable {
-  return encryptedConfigKeys.includes(config as keyof EncryptedConfigurable);
-}
+import {
+  Configurable,
+  ConfigurationState,
+  defaultConfiguration,
+  encryptedConfigurableSchema,
+  isEncryptedConfig,
+  Model,
+} from "./configurationSchema";
 
 export const useConfigurationStore = defineStore("configuration", {
   state: (): ConfigurationState => {
@@ -113,7 +35,9 @@ export const useConfigurationStore = defineStore("configuration", {
 
   getters: {
     apiKeyExists(): boolean {
-      return encryptedConfigKeys.some((key) => this[key].trim() !== "");
+      return Object.keys(encryptedConfigurableSchema.shape).some(
+        (key) => this[key].trim() !== "",
+      );
     },
 
     getModelsByProvider: (state) => {
@@ -252,7 +176,9 @@ export const useConfigurationStore = defineStore("configuration", {
       const connection = useChatStore().connectionInfo;
       const connectionId = connection.id;
       const workspaceId = connection.workspaceId;
-      const connectionInstructions = _.cloneDeep(this.customConnectionInstructions);
+      const connectionInstructions = _.cloneDeep(
+        this.customConnectionInstructions,
+      );
       const idx = connectionInstructions.findIndex(
         (i) => i.connectionId === connectionId && i.workspaceId === workspaceId,
       );
diff --git a/src/stores/configurationSchema.ts b/src/stores/configurationSchema.ts
new file mode 100644
index 0000000..72aa40c
--- /dev/null
+++ b/src/stores/configurationSchema.ts
@@ -0,0 +1,87 @@
+import { disabledModelsByDefault, providerConfigs } from "@/config";
+import z from "zod/v3";
+
+function zodEnumFromObjKeys<K extends string>(
+  obj: Record<K, any>,
+): z.ZodEnum<[K, ...K[]]> {
+  const [firstKey, ...otherKeys] = Object.keys(obj) as K[];
+  return z.enum([firstKey, ...otherKeys]);
+}
+
+const ModelSchema = z.object({
+  id: z.string(),
+  displayName: z.string(),
+});
+
+const configurableSchema = z.object({
+  // ==== GENERAL ====
+  /** Append custom instructions to the default system instructions. */
+  customInstructions: z.string().default(""),
+  /** Append custom instructions to the default system instructions.
+   * It's applied based on the connection ID */
+  customConnectionInstructions: z
+    .array(
+      z.object({
+        workspaceId: z.number(),
+        connectionId: z.number(),
+        instructions: z.string(),
+      }),
+    )
+    .default([]),
+  allowExecutionOfReadOnlyQueries: z.boolean().default(false),
+  enableAutoCompact: z.boolean().default(true),
+
+  // ==== MODELS ====
+  /** List of disabled models by id. */
+  disabledModels: z
+    .array(
+      z.object({
+        providerId: zodEnumFromObjKeys(providerConfigs),
+        modelId: z.string(),
+      }),
+    )
+    .default(disabledModelsByDefault),
+  removedModels: z
+    .array(
+      z.object({
+        providerId: zodEnumFromObjKeys(providerConfigs),
+        modelId: z.string(),
+      }),
+    )
+    .default([]),
+
+  providers_openaiCompat_baseUrl: z.string().default(""),
+  providers_openaiCompat_headers: z.string().default(""),
+  providers_ollama_baseUrl: z.string().default("http://localhost:11434"),
+  providers_ollama_headers: z.string().default(""),
+
+  providers_mock_models: z.array(ModelSchema).default([]),
+  providers_openai_models: z.array(ModelSchema).default([]),
+  providers_anthropic_models: z.array(ModelSchema).default([]),
+  providers_google_models: z.array(ModelSchema).default([]),
+  providers_openaiCompat_models: z.array(ModelSchema).default([]),
+  providers_ollama_models: z.array(ModelSchema).default([]),
+});
+
+export const encryptedConfigurableSchema = z.object({
+  "providers.openai.apiKey": z.string().default(""),
+  "providers.anthropic.apiKey": z.string().default(""),
+  "providers.google.apiKey": z.string().default(""),
+  providers_openaiCompat_apiKey: z.string().default(""),
+});
+
+export type Model = z.infer<typeof ModelSchema>;
+export type Configurable = z.infer<typeof configurableSchema>;
+export type ConfigurationState = z.infer<typeof configurableSchema> &
+  z.infer<typeof encryptedConfigurableSchema>;
+
+export function isEncryptedConfig(
+  config: string,
+): config is keyof z.infer<typeof encryptedConfigurableSchema> {
+  return config in encryptedConfigurableSchema.shape;
+}
+
+export const defaultConfiguration = {
+  ...configurableSchema.parse({}),
+  ...encryptedConfigurableSchema.parse({}),
+};

From 69cd8292b1f945dc9c8d03795a9206cb3ec771b5 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Wed, 28 Jan 2026 21:58:34 +0700
Subject: [PATCH 2/7] add workspace connection instructions

---
 package.json                                  |  2 +-
 src/App.vue                                   |  6 +-
 src/assets/styles/components/_base-input.scss |  9 +-
 src/components/common/BaseInput.vue           |  5 +-
 .../configuration/Configuration.vue           |  9 +-
 .../configuration/GeneralConfiguration.vue    | 40 +--------
 .../InstructionsConfiguration.vue             | 83 +++++++++++++++++++
 src/stores/chat.ts                            | 26 +++++-
 src/stores/configuration.ts                   | 33 +++++---
 src/stores/configurationSchema.ts             | 18 +++-
 src/stores/internalData.ts                    | 17 +---
 yarn.lock                                     |  8 +-
 12 files changed, 163 insertions(+), 93 deletions(-)
 create mode 100644 src/components/configuration/InstructionsConfiguration.vue

diff --git a/package.json b/package.json
index 2889356..6622f06 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@ai-sdk/openai": "^3.0.8",
     "@ai-sdk/openai-compatible": "^2.0.4",
     "@ai-sdk/vue": "^3.0.28",
-    "@beekeeperstudio/plugin": "^1.6.0",
+    "@beekeeperstudio/plugin": "^1.7.1-beta.0",
     "@beekeeperstudio/ui-kit": "0.3.1",
     "@langchain/core": "^0.3.61",
     "@material-symbols/font-400": "^0.31.2",
diff --git a/src/App.vue b/src/App.vue
index 79e3ae8..9006de8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@ import Configuration, {
   PageId as ConfigurationPageId,
 } from "@/components/configuration/Configuration.vue";
 import OnboardingScreen from "./components/OnboardingScreen.vue";
-import { getData, log } from "@beekeeperstudio/plugin";
+import { appStorage, log } from "@beekeeperstudio/plugin";
 import { Dialog } from "primevue";
 
 type Page = "starting" | "chat-interface";
@@ -129,10 +129,10 @@ export default {
         window.location.reload();
       }, reloadDelay);
       try {
-        await getData();
+        await appStorage.getItem("test");
       } catch (e) {
       } finally {
-        // Cancel reload if getData() succeeds or fails quickly
+        // Cancel reload if it succeeds or fails quickly
         clearTimeout(reloadTimer);
       }
     },
diff --git a/src/assets/styles/components/_base-input.scss b/src/assets/styles/components/_base-input.scss
index 4d1e806..f2903f4 100644
--- a/src/assets/styles/components/_base-input.scss
+++ b/src/assets/styles/components/_base-input.scss
@@ -24,7 +24,6 @@
     align-items: stretch;
     display: grid;
 
-    &::after,
     textarea {
       width: auto;
       min-width: 1rem;
@@ -33,15 +32,9 @@
       font-size: 0.831rem;
       padding: 0.5rem 0.75rem;
       margin: 0;
-      resize: none;
+      resize: vertical;
       appearance: none;
     }
-
-    &::after {
-      content: attr(data-value) " ";
-      visibility: hidden;
-      white-space: pre-wrap;
-    }
   }
 
   &.switch {
diff --git a/src/components/common/BaseInput.vue b/src/components/common/BaseInput.vue
index 5c155f9..d59a1d3 100644
--- a/src/components/common/BaseInput.vue
+++ b/src/components/common/BaseInput.vue
@@ -10,10 +10,7 @@
     >
       <slot name="helper"></slot>
     </p>
-    <div
-      class="input-wrapper"
-      :data-value="type === 'textarea' ? modelValue : ''"
-    >
+    <div class="input-wrapper">
       <textarea
         v-if="type === 'textarea'"
         v-bind="$attrs"
diff --git a/src/components/configuration/Configuration.vue b/src/components/configuration/Configuration.vue
index ed4d3a8..485c8ae 100644
--- a/src/components/configuration/Configuration.vue
+++ b/src/components/configuration/Configuration.vue
@@ -17,6 +17,7 @@
     </nav>
     <div class="content" :class="page">
       <GeneralConfiguration v-if="page === 'general'" />
+      <InstructionsConfiguration v-if="page === 'instructions'"/>
       <ModelsConfiguration v-if="page === 'models'"/>
       <ProvidersConfiguration v-if="page === 'providers'"/>
       <AboutConfiguration v-if="page === 'about'" />
@@ -25,9 +26,10 @@
 </template>
 
 <script lang="ts">
+import GeneralConfiguration from "./GeneralConfiguration.vue";
+import InstructionsConfiguration from "./InstructionsConfiguration.vue";
 import ModelsConfiguration from "@/components/configuration/ModelsConfiguration.vue";
 import ProvidersConfiguration from "@/components/configuration/ProvidersConfiguration.vue";
-import GeneralConfiguration from "./GeneralConfiguration.vue";
 import AboutConfiguration from "./AboutConfiguration.vue";
 import { PropType } from "vue";
 import { Dialog } from "primevue";
@@ -37,6 +39,10 @@ const pages = [
     id: "general",
     displayName: "General",
   },
+  {
+    id: "instructions",
+    displayName: "Instructions",
+  },
   {
     id: "models",
     displayName: "Models",
@@ -58,6 +64,7 @@ export default {
 
   components: {
     ModelsConfiguration,
+    InstructionsConfiguration,
     ProvidersConfiguration,
     GeneralConfiguration,
     AboutConfiguration,
diff --git a/src/components/configuration/GeneralConfiguration.vue b/src/components/configuration/GeneralConfiguration.vue
index b4fa409..fd6ea2d 100644
--- a/src/components/configuration/GeneralConfiguration.vue
+++ b/src/components/configuration/GeneralConfiguration.vue
@@ -27,39 +27,6 @@
       the context limit.
     </template>
   </BaseInput>
-  <h3>Custom Instructions</h3>
-  <p class="description">
-    Use custom instructions to provide additional context to the AI. These
-    instructions are added on top of the
-    <ExternalLink
-      href="https://github.com/beekeeper-studio/bks-ai-shell/blob/main/instructions"
-      >default instructions<span
-        style="font-size: 1em"
-        class="material-symbols-outlined"
-        >arrow_outward</span
-      ></ExternalLink
-    >.
-  </p>
-  <BaseInput
-    :model-value="customInstructions"
-    @change="configure('customInstructions', $event.target.value)"
-    type="textarea"
-    placeholder="E.g. Before running a query, analyze it for any potential issues."
-    rows="4"
-  >
-    <template #label>All Connections</template>
-    <template #helper>Used in every conversation.</template>
-  </BaseInput>
-  <BaseInput
-    :model-value="currentConnectionInstructions"
-    @change="configureCustomConnectionInstructions($event.target.value)"
-    type="textarea"
-    placeholder="E.g. This database contains tables for user management and analytics."
-    rows="4"
-  >
-    <template #label>This Connection Only</template>
-    <template #helper>Used only for this connection.</template>
-  </BaseInput>
 </template>
 
 <script lang="ts">
@@ -78,18 +45,13 @@ export default {
 
   computed: {
     ...mapState(useConfigurationStore, [
-      "customInstructions",
       "allowExecutionOfReadOnlyQueries",
       "enableAutoCompact",
     ]),
-    ...mapGetters(useConfigurationStore, ["currentConnectionInstructions"]),
   },
 
   methods: {
-    ...mapActions(useConfigurationStore, [
-      "configure",
-      "configureCustomConnectionInstructions",
-    ]),
+    ...mapActions(useConfigurationStore, ["configure"]),
   },
 };
 </script>
diff --git a/src/components/configuration/InstructionsConfiguration.vue b/src/components/configuration/InstructionsConfiguration.vue
new file mode 100644
index 0000000..5bce4d7
--- /dev/null
+++ b/src/components/configuration/InstructionsConfiguration.vue
@@ -0,0 +1,83 @@
+<template>
+  <h2>Instructions</h2>
+  <p class="description">
+    Use custom instructions to provide additional context to the AI. These
+    instructions are added on top of the
+    <ExternalLink
+      href="https://github.com/beekeeper-studio/bks-ai-shell/blob/main/instructions"
+      >default instructions<span
+        style="font-size: 1em"
+        class="material-symbols-outlined"
+        >arrow_outward</span
+      ></ExternalLink
+    >.
+  </p>
+  <BaseInput
+    :model-value="customInstructions"
+    @change="configure('customInstructions', $event.target.value)"
+    type="textarea"
+    placeholder="E.g. Before running a query, analyze it for any potential issues."
+    rows="4"
+  >
+    <template #label>Global</template>
+    <template #helper>Used in every conversation</template>
+  </BaseInput>
+  <BaseInput
+    :model-value="currentConnectionInstructions"
+    @change="configureCustomConnectionInstructions($event.target.value)"
+    type="textarea"
+    placeholder="E.g. This database contains tables for user management and analytics."
+    rows="4"
+  >
+    <template #label>This connection only</template>
+    <template #helper>Used only for this connection</template>
+  </BaseInput>
+  <BaseInput
+    v-if="workspaceInfo.type === 'cloud'"
+    :disabled="!workspaceInfo.isOwner"
+    :model-value="workspaceConnectionInstructions"
+    @change="configure('workspaceConnectionInstructions', $event.target.value)"
+    type="textarea"
+    :placeholder="workspaceInfo.isOwner ? 'E.g. This database contains tables for user management and analytics.' : ''"
+    rows="4"
+  >
+    <template #label>Workspace connection</template>
+    <template #helper
+      >Used only for this connection and managed by the workspace
+      owner</template
+    >
+  </BaseInput>
+</template>
+
+<script lang="ts">
+import { mapActions, mapGetters, mapState } from "pinia";
+import BaseInput from "@/components/common/BaseInput.vue";
+import { useConfigurationStore } from "@/stores/configuration";
+import ExternalLink from "@/components/common/ExternalLink.vue";
+import { useChatStore } from "@/stores/chat";
+
+export default {
+  name: "GeneralConfiguration",
+
+  components: {
+    BaseInput,
+    ExternalLink,
+  },
+
+  computed: {
+    ...mapState(useChatStore, ["workspaceInfo"]),
+    ...mapState(useConfigurationStore, [
+      "customInstructions",
+      "workspaceConnectionInstructions",
+    ]),
+    ...mapGetters(useConfigurationStore, ["currentConnectionInstructions"]),
+  },
+
+  methods: {
+    ...mapActions(useConfigurationStore, [
+      "configure",
+      "configureCustomConnectionInstructions",
+    ]),
+  },
+};
+</script>
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 0f4946e..f886114 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -16,7 +16,9 @@ import {
   getAppVersion,
   getConnectionInfo,
   getTables,
+  getWorkspaceInfo,
   log,
+  WorkspaceInfo,
 } from "@beekeeperstudio/plugin";
 import type { Entity } from "@beekeeperstudio/ui-kit";
 import gt from "semver/functions/gt";
@@ -38,6 +40,7 @@ type ChatState = {
   defaultInstructions: string;
   entities: Entity[];
   connectionInfo: ConnectionInfo;
+  workspaceInfo: WorkspaceInfo;
   appVersion: Awaited<ReturnType<typeof getAppVersion>>;
 };
 
@@ -58,6 +61,12 @@ export const useChatStore = defineStore("chat", {
       readOnlyMode: true,
     },
     appVersion: "900.0.0",
+    workspaceInfo: {
+      id: -1,
+      name: "",
+      type: "local",
+      isOwner: false,
+    },
   }),
   getters: {
     models() {
@@ -137,13 +146,19 @@ export const useChatStore = defineStore("chat", {
     },
     systemPrompt(state) {
       const config = useConfigurationStore();
-      return (
+
+      let prompt =
         state.defaultInstructions +
         "\n" +
         config.customInstructions +
         "\n" +
-        config.currentConnectionInstructions
-      ).trim();
+        config.currentConnectionInstructions;
+
+      if (this.workspaceInfo.type === "cloud") {
+        prompt += "\n" + config.workspaceConnectionInstructions;
+      }
+
+      return prompt.trim();
     },
     // FIXME move this to UI Kit?
     formatterDialect(state) {
@@ -276,6 +291,11 @@ export const useChatStore = defineStore("chat", {
           this.connectionInfo = info;
         })
         .catch(log.error);
+      getWorkspaceInfo()
+        .then((info) => {
+          this.workspaceInfo = info;
+        })
+        .catch(log.error);
     },
     /** List the models for a provider and store them in the internal data store. */
     async syncProvider(provider: AvailableProvidersWithDynamicModels) {
diff --git a/src/stores/configuration.ts b/src/stores/configuration.ts
index 17d2360..ebe7228 100644
--- a/src/stores/configuration.ts
+++ b/src/stores/configuration.ts
@@ -7,15 +7,13 @@
  * FUTURE PLAN (probably):
  *
  * - Save configuration to .ini config files via Beekeeper Studio API
- *   instead of using setData?
+ *   instead of using appStorage?
  */
 import { defineStore } from "pinia";
 import _ from "lodash";
 import {
-  getData,
-  getEncryptedData,
-  setData,
-  setEncryptedData,
+  workspaceConnectionStorage,
+  appStorage,
 } from "@beekeeperstudio/plugin";
 import { AvailableProviders, providerConfigs } from "@/config";
 import { useChatStore } from "./chat";
@@ -23,8 +21,9 @@ import {
   Configurable,
   ConfigurationState,
   defaultConfiguration,
-  encryptedConfigurableSchema,
+  encryptedConfigurableShape,
   isEncryptedConfig,
+  isWorkspaceConfig,
   Model,
 } from "./configurationSchema";
 
@@ -35,7 +34,7 @@ export const useConfigurationStore = defineStore("configuration", {
 
   getters: {
     apiKeyExists(): boolean {
-      return Object.keys(encryptedConfigurableSchema.shape).some(
+      return Object.keys(encryptedConfigurableShape).some(
         (key) => this[key].trim() !== "",
       );
     },
@@ -83,9 +82,15 @@ export const useConfigurationStore = defineStore("configuration", {
     async sync() {
       const configuration: Partial<Configurable> = {};
       for (const key in defaultConfiguration) {
-        const value = isEncryptedConfig(key)
-          ? await getEncryptedData<Configurable>(key)
-          : await getData<Configurable>(key);
+        let value: unknown = null;
+
+        if (isWorkspaceConfig(key)) {
+          value = await workspaceConnectionStorage.getItem(key);
+        } else {
+          value = await appStorage.getItem<Configurable>(key, {
+            encrypted: isEncryptedConfig(key),
+          });
+        }
 
         if (value === null) {
           continue;
@@ -102,10 +107,12 @@ export const useConfigurationStore = defineStore("configuration", {
     ) {
       this.$patch({ [config]: value });
 
-      if (isEncryptedConfig(config)) {
-        await setEncryptedData(config, value);
+      if (isWorkspaceConfig(config)) {
+        await workspaceConnectionStorage.setItem(config, value);
       } else {
-        await setData(config, value);
+        await appStorage.setItem(config, value, {
+          encrypted: isEncryptedConfig(config),
+        });
       }
     },
 
diff --git a/src/stores/configurationSchema.ts b/src/stores/configurationSchema.ts
index 72aa40c..7e03926 100644
--- a/src/stores/configurationSchema.ts
+++ b/src/stores/configurationSchema.ts
@@ -63,17 +63,22 @@ const configurableSchema = z.object({
   providers_ollama_models: z.array(ModelSchema).default([]),
 });
 
-export const encryptedConfigurableSchema = z.object({
+const encryptedConfigurableSchema = z.object({
   "providers.openai.apiKey": z.string().default(""),
   "providers.anthropic.apiKey": z.string().default(""),
   "providers.google.apiKey": z.string().default(""),
   providers_openaiCompat_apiKey: z.string().default(""),
 });
 
+const workspaceConfigurableSchema = z.object({
+  workspaceConnectionInstructions: z.string().default(""),
+});
+
+export const encryptedConfigurableShape = encryptedConfigurableSchema.shape;
+
 export type Model = z.infer<typeof ModelSchema>;
 export type Configurable = z.infer<typeof configurableSchema>;
-export type ConfigurationState = z.infer<typeof configurableSchema> &
-  z.infer<typeof encryptedConfigurableSchema>;
+export type ConfigurationState = typeof defaultConfiguration;
 
 export function isEncryptedConfig(
   config: string,
@@ -81,7 +86,14 @@ export function isEncryptedConfig(
   return config in encryptedConfigurableSchema.shape;
 }
 
+export function isWorkspaceConfig(
+  config: string,
+): config is keyof z.infer<typeof workspaceConfigurableSchema> {
+  return config in workspaceConfigurableSchema.shape;
+}
+
 export const defaultConfiguration = {
   ...configurableSchema.parse({}),
   ...encryptedConfigurableSchema.parse({}),
+  ...workspaceConfigurableSchema.parse({}),
 };
diff --git a/src/stores/internalData.ts b/src/stores/internalData.ts
index c88e708..2ac28f9 100644
--- a/src/stores/internalData.ts
+++ b/src/stores/internalData.ts
@@ -11,10 +11,7 @@
 
 import { defineStore } from "pinia";
 import _ from "lodash";
-import {
-  getData as rawGetData,
-  setData as rawSetData,
-} from "@beekeeperstudio/plugin";
+import { appStorage } from "@beekeeperstudio/plugin";
 
 type InternalData = {
   /** FIXME use Model type */
@@ -27,14 +24,6 @@ const defaultData: InternalData = {
   isFirstTimeUser: true,
 };
 
-const getData: typeof rawGetData = (key, ...args) => {
-  return rawGetData(`internal.${key}`, ...args);
-};
-
-const setData: typeof rawSetData = (key, ...args) => {
-  return rawSetData(`internal.${key}`, ...args);
-};
-
 export const useInternalDataStore = defineStore("pluginData", {
   state: (): InternalData => {
     return defaultData;
@@ -44,7 +33,7 @@ export const useInternalDataStore = defineStore("pluginData", {
     async sync() {
       const data: Partial<InternalData> = {};
       for (const key in defaultData) {
-        const value = await getData(key);
+        const value = await appStorage.getItem(`internal.${key}`);
 
         if (value === null) {
           continue;
@@ -60,7 +49,7 @@ export const useInternalDataStore = defineStore("pluginData", {
       value: InternalData[T],
     ) {
       this.$patch({ [key]: value });
-      await setData(key, value);
+      await appStorage.setItem(`internal.${key}`, value);
     },
   },
 });
diff --git a/yarn.lock b/yarn.lock
index e26a034..621f4c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -370,10 +370,10 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.28.5"
 
-"@beekeeperstudio/plugin@^1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@beekeeperstudio/plugin/-/plugin-1.6.0.tgz#7ba0cd3ca01cd1bc463434c7e75b905081fb8df6"
-  integrity sha512-it+Wbg5zUFfK8yDUY81Rq5c1jRzMat/eBXnu5vjpqSscniGPZXfY5YB3PWdZstWBM40sFo+aKEWOd7DvHNesvw==
+"@beekeeperstudio/plugin@^1.7.1-beta.0":
+  version "1.7.1-beta.0"
+  resolved "https://registry.yarnpkg.com/@beekeeperstudio/plugin/-/plugin-1.7.1-beta.0.tgz#409e3bb5ac3fa3bfcd9405d509cbef905084fa4d"
+  integrity sha512-mucEZV9DgmL1UN6Mr0apqcvxMwS8xzsDFfnfwEDpuPrQAGQRe2V84SGQpLliSzsLIqWjEojyV3dDiUcF8u3zWg==
 
 "@beekeeperstudio/ui-kit@0.3.1":
   version "0.3.1"

From 473cd520868a3a0c5461d7fc8c26646680df4e43 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Fri, 30 Jan 2026 22:04:16 +0700
Subject: [PATCH 3/7] refactor

---
 src/assets/styles/_base.scss                  |   3 +-
 src/assets/styles/_form.scss                  |   2 +-
 src/assets/styles/_layout.scss                |   6 +
 src/assets/styles/components/_base-input.scss |   5 +-
 src/assets/styles/components/_buttons.scss    |   9 ++
 .../styles/pages/configuration/_main.scss     |  13 +-
 src/components/common/BaseInput.vue           |  29 +++-
 .../configuration/Configuration.vue           |  58 +++++--
 .../configuration/GeneralConfiguration.vue    | 143 +++++++++++++++++-
 .../InstructionsConfiguration.vue             |  83 ----------
 src/stores/configuration.ts                   |  57 ++++---
 11 files changed, 280 insertions(+), 128 deletions(-)
 delete mode 100644 src/components/configuration/InstructionsConfiguration.vue

diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss
index ad65f4d..f28bb7a 100644
--- a/src/assets/styles/_base.scss
+++ b/src/assets/styles/_base.scss
@@ -22,7 +22,7 @@ input, select, textarea {
   display: flex;
   height: 26px;
   padding: 0 0.75rem;
-  font-size: 0.831rem;
+  font-size: 0.727rem; // FIXME should be 0.831rem
   font-weight: normal;
   line-height: 26px;
   color: var(--text);
@@ -56,6 +56,7 @@ input, select, textarea {
 
 textarea {
   overflow: auto;
+  line-height: 1.2rem;
 }
 
 select {
diff --git a/src/assets/styles/_form.scss b/src/assets/styles/_form.scss
index 57bc814..337abb3 100644
--- a/src/assets/styles/_form.scss
+++ b/src/assets/styles/_form.scss
@@ -8,7 +8,7 @@
   label {
     display: flex;
     align-items: center;
-    font-size: 0.831rem;
+    font-size: 0.727rem; // FIXME should be 0.831rem
     line-height: 1.5;
     padding: 0 0.2rem;
     margin-bottom: 2px;
diff --git a/src/assets/styles/_layout.scss b/src/assets/styles/_layout.scss
index cc92f6a..8ea52ee 100644
--- a/src/assets/styles/_layout.scss
+++ b/src/assets/styles/_layout.scss
@@ -49,3 +49,9 @@
 .alert-success {
   color: hsl(from var(--brand-success) h s calc(l + 5));
 }
+
+// Placeholder
+::placeholder {
+  color: var(--text-hint);
+}
+
diff --git a/src/assets/styles/components/_base-input.scss b/src/assets/styles/components/_base-input.scss
index f2903f4..a859a64 100644
--- a/src/assets/styles/components/_base-input.scss
+++ b/src/assets/styles/components/_base-input.scss
@@ -3,7 +3,7 @@
   text-align: left;
 
   .helper {
-    font-size: 0.75rem;
+    font-size: 0.727rem; // FIXME should be 0.75rem
     color: var(--text-light);
     opacity: 0.7;
     margin: 0;
@@ -28,12 +28,9 @@
       width: auto;
       min-width: 1rem;
       grid-area: 2 / 1;
-      font: inherit;
-      font-size: 0.831rem;
       padding: 0.5rem 0.75rem;
       margin: 0;
       resize: vertical;
-      appearance: none;
     }
   }
 
diff --git a/src/assets/styles/components/_buttons.scss b/src/assets/styles/components/_buttons.scss
index f435bb0..007c590 100644
--- a/src/assets/styles/components/_buttons.scss
+++ b/src/assets/styles/components/_buttons.scss
@@ -125,3 +125,12 @@ $btn-border-radius: 8px;
       var(--query-editor-bg));
   --btn-hover-text-color: var(--text-dark);
 }
+
+.btn.btn-small {
+  font-size: 0.744rem; // FIXME should be 0.85rem
+  padding: 0.569rem; // FIXME should be 0.65rem
+  min-width: 0;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 6px;
+}
diff --git a/src/assets/styles/pages/configuration/_main.scss b/src/assets/styles/pages/configuration/_main.scss
index d8a4b6c..a602785 100644
--- a/src/assets/styles/pages/configuration/_main.scss
+++ b/src/assets/styles/pages/configuration/_main.scss
@@ -17,7 +17,7 @@
 .configuration {
   --config-bg-hover: color-mix(
     in srgb,
-    var(--theme-base) 3.5%,
+    var(--theme-base) 2%,
     var(--theme-bg)
   );
 
@@ -51,6 +51,8 @@
     height: 1.75rem;
     justify-content: flex-start;
     background-color: transparent;
+    padding-inline: 0.75rem;
+    border-radius: 6px;
 
     &:hover {
       background-color: var(--config-bg-hover);
@@ -106,10 +108,15 @@
       color: var(--text-dark);
     }
 
+    hr {
+      margin-inline: 0.5rem;
+      border-color: var(--border-color);
+    }
+
     p.description {
       margin-bottom: 0.25rem;
-      font-size: 0.85rem;
-      color: var(--text-light);
+      font-size: 0.727rem; // FIXME should be 0.83rem
+      color: var(--text);
     }
 
     .form-group {
diff --git a/src/components/common/BaseInput.vue b/src/components/common/BaseInput.vue
index d59a1d3..90a98cc 100644
--- a/src/components/common/BaseInput.vue
+++ b/src/components/common/BaseInput.vue
@@ -55,6 +55,14 @@
     >
       <slot name="helper"></slot>
     </p>
+    <div class="actions" v-if="showActions">
+      <button class="btn btn-small btn-flat" @click="$emit('discard')">
+        Discard
+      </button>
+      <button class="btn btn-small btn-primary" @click="$emit('save')">
+        Save
+      </button>
+    </div>
   </div>
 </template>
 
@@ -85,9 +93,11 @@ export default {
       type: String as PropType<"before-input" | "after-input">,
       default: "after-input",
     },
+    /** If `showActions`, we'll show save and discard buttons. */
+    showActions: Boolean,
   },
 
-  emits: ["update:modelValue", "input", "change", "click"],
+  emits: ["update:modelValue", "input", "change", "click", "save", "discard"],
 
   // FIXME: Strip this out for now cause vue-tsc isn't happy
   // See https://github.com/vuejs/language-tools/issues/5069
@@ -117,7 +127,24 @@ export default {
 [data-position="before-input"] {
   margin-bottom: 0.5rem;
 }
+
 .form-group:not(.switch) [data-position="after-input"] {
   margin-top: 0.35rem;
 }
+
+.actions {
+  display: flex;
+  align-items: center;
+  padding-top: 0.5rem;
+  gap: 0.5rem;
+}
+
+label :deep(.material-symbols-outlined) {
+  padding-left: 0.25em;
+  font-size: 1em;
+}
+
+.input-wrapper {
+  position: relative;
+}
 </style>
diff --git a/src/components/configuration/Configuration.vue b/src/components/configuration/Configuration.vue
index 485c8ae..e451d8c 100644
--- a/src/components/configuration/Configuration.vue
+++ b/src/components/configuration/Configuration.vue
@@ -1,48 +1,63 @@
 <template>
-  <Dialog class="configuration" @update:visible="$emit('update:visible', $event)" :visible="visible" dismissable-mask
-    :show-header="false" modal>
+  <Dialog
+    modal
+    dismissable-mask
+    close-on-escape
+    class="configuration"
+    :visible="visible"
+    :show-header="false"
+    @update:visible="handleUpdateVisible"
+  >
     <nav>
       <ul>
         <li>
-          <button class="btn btn-flat nav-btn close-btn" @click="$emit('close')">
+          <button
+            class="btn btn-flat nav-btn close-btn"
+            @click="$emit('close')"
+          >
             <span class="material-symbols-outlined">close</span>
           </button>
         </li>
         <li v-for="{ id, displayName } in pages" :key="id">
-          <button class="btn btn-flat nav-btn" :class="{ active: page === id }" @click="page = id">
+          <button
+            class="btn btn-flat nav-btn"
+            :class="{ active: page === id }"
+            @click="page = id"
+          >
             {{ displayName }}
           </button>
         </li>
       </ul>
     </nav>
     <div class="content" :class="page">
-      <GeneralConfiguration v-if="page === 'general'" />
-      <InstructionsConfiguration v-if="page === 'instructions'"/>
-      <ModelsConfiguration v-if="page === 'models'"/>
-      <ProvidersConfiguration v-if="page === 'providers'"/>
-      <AboutConfiguration v-if="page === 'about'" />
+      <div v-if="storeStatus === 'loading'">Loading...</div>
+      <div v-else-if="storeStatus === 'error'">Error: {{ storeError }}</div>
+      <GeneralConfiguration
+        v-else-if="page === 'general'"
+        v-model:dirty="isDirty"
+      />
+      <ModelsConfiguration v-else-if="page === 'models'" />
+      <ProvidersConfiguration v-else-if="page === 'providers'" />
+      <AboutConfiguration v-else-if="page === 'about'" />
     </div>
   </Dialog>
 </template>
 
 <script lang="ts">
 import GeneralConfiguration from "./GeneralConfiguration.vue";
-import InstructionsConfiguration from "./InstructionsConfiguration.vue";
 import ModelsConfiguration from "@/components/configuration/ModelsConfiguration.vue";
 import ProvidersConfiguration from "@/components/configuration/ProvidersConfiguration.vue";
 import AboutConfiguration from "./AboutConfiguration.vue";
 import { PropType } from "vue";
 import { Dialog } from "primevue";
+import { mapState } from "pinia";
+import { useConfigurationStore } from "@/stores/configuration";
 
 const pages = [
   {
     id: "general",
     displayName: "General",
   },
-  {
-    id: "instructions",
-    displayName: "Instructions",
-  },
   {
     id: "models",
     displayName: "Models",
@@ -57,14 +72,13 @@ const pages = [
   },
 ] as const;
 
-export type PageId = typeof pages[number]["id"];
+export type PageId = (typeof pages)[number]["id"];
 
 export default {
   name: "Configuration",
 
   components: {
     ModelsConfiguration,
-    InstructionsConfiguration,
     ProvidersConfiguration,
     GeneralConfiguration,
     AboutConfiguration,
@@ -85,11 +99,13 @@ export default {
   data() {
     return {
       page: this.reactivePage,
+      isDirty: false,
     };
   },
 
   computed: {
     pages: () => pages,
+    ...mapState(useConfigurationStore, ["storeStatus", "storeError"]),
   },
 
   watch: {
@@ -97,5 +113,15 @@ export default {
       this.page = this.reactivePage;
     },
   },
+
+  methods: {
+    handleUpdateVisible(visible: boolean) {
+      if (!visible && this.isDirty) {
+        // Naah.. hmmmmm
+        return;
+      }
+      this.$emit("update:visible", visible);
+    }
+  }
 };
 </script>
diff --git a/src/components/configuration/GeneralConfiguration.vue b/src/components/configuration/GeneralConfiguration.vue
index fd6ea2d..6a93a9a 100644
--- a/src/components/configuration/GeneralConfiguration.vue
+++ b/src/components/configuration/GeneralConfiguration.vue
@@ -1,5 +1,6 @@
 <template>
   <h2>General</h2>
+
   <BaseInput
     type="switch"
     :model-value="allowExecutionOfReadOnlyQueries"
@@ -27,6 +28,89 @@
       the context limit.
     </template>
   </BaseInput>
+
+  <hr />
+
+  <h3>Instructions</h3>
+  <p class="description">
+    Use custom instructions to provide additional context to the AI. These
+    instructions are added on top of the
+    <ExternalLink
+      href="https://github.com/beekeeper-studio/bks-ai-shell/blob/main/instructions"
+      >default instructions<span
+        style="font-size: 1em"
+        class="material-symbols-outlined"
+        >arrow_outward</span
+      ></ExternalLink
+    >.
+  </p>
+
+  <BaseInput
+    v-model="unsavedCustomInstructions"
+    type="textarea"
+    placeholder="E.g. Before running a query, analyze it for any potential issues."
+    rows="4"
+    :showActions="unsavedCustomInstructions !== customInstructions"
+    @discard="unsavedCustomInstructions = customInstructions"
+    @save="configure('customInstructions', unsavedCustomInstructions)"
+  >
+    <template #label>Global</template>
+    <template #helper>Used in every conversation</template>
+  </BaseInput>
+  <BaseInput
+    v-model="unsavedConnectionInstructions"
+    type="textarea"
+    placeholder="E.g. This database contains tables for user management and analytics."
+    rows="4"
+    :showActions="
+      unsavedConnectionInstructions !== currentConnectionInstructions
+    "
+    @discard="unsavedConnectionInstructions = currentConnectionInstructions"
+    @save="configureCustomConnectionInstructions(unsavedConnectionInstructions)"
+  >
+    <template #label>This connection only</template>
+    <template #helper>Used only for this connection</template>
+  </BaseInput>
+  <BaseInput
+    v-if="workspaceInfo.type === 'cloud'"
+    v-model="unsavedWorkspaceConnectionInstructions"
+    type="textarea"
+    rows="4"
+    :disabled="!workspaceInfo.isOwner"
+    :placeholder="
+      workspaceInfo.isOwner
+        ? 'E.g. This database contains tables for user management and analytics.'
+        : ''
+    "
+    :showActions="
+      unsavedWorkspaceConnectionInstructions !== workspaceConnectionInstructions
+    "
+    @discard="
+      unsavedWorkspaceConnectionInstructions = workspaceConnectionInstructions
+    "
+    @save="
+      configure(
+        'workspaceConnectionInstructions',
+        unsavedWorkspaceConnectionInstructions,
+      )
+    "
+    :data-empty="unsavedWorkspaceConnectionInstructions.length === 0"
+  >
+    <template #label>
+      Workspace connection
+      <span
+        v-if="!workspaceInfo.isOwner"
+        class="material-symbols-outlined"
+        title="Admin access required to edit this field"
+      >
+        lock
+      </span>
+    </template>
+    <template #helper
+      >Used only for this connection and managed by the workspace
+      owner</template
+    >
+  </BaseInput>
 </template>
 
 <script lang="ts">
@@ -34,6 +118,7 @@ import { mapActions, mapGetters, mapState } from "pinia";
 import BaseInput from "@/components/common/BaseInput.vue";
 import { useConfigurationStore } from "@/stores/configuration";
 import ExternalLink from "@/components/common/ExternalLink.vue";
+import { useChatStore } from "@/stores/chat";
 
 export default {
   name: "GeneralConfiguration",
@@ -43,15 +128,71 @@ export default {
     ExternalLink,
   },
 
+  props: {
+    dirty: Boolean,
+  },
+
+  emits: ["update:dirty"],
+
+  data() {
+    return {
+      unsavedCustomInstructions: "",
+      unsavedConnectionInstructions: "",
+      unsavedWorkspaceConnectionInstructions: "",
+    };
+  },
+
   computed: {
+    ...mapState(useChatStore, ["workspaceInfo"]),
     ...mapState(useConfigurationStore, [
       "allowExecutionOfReadOnlyQueries",
       "enableAutoCompact",
+      "customInstructions",
+      "workspaceConnectionInstructions",
     ]),
+    ...mapGetters(useConfigurationStore, ["currentConnectionInstructions"]),
+    isDirty() {
+      return (
+        this.unsavedCustomInstructions !== this.customInstructions ||
+        this.unsavedConnectionInstructions !==
+          this.currentConnectionInstructions ||
+        this.unsavedWorkspaceConnectionInstructions !==
+          this.workspaceConnectionInstructions
+      );
+    },
+  },
+
+  watch: {
+    dirty() {
+      this.$emit("update:dirty", this.isDirty);
+    },
   },
 
   methods: {
-    ...mapActions(useConfigurationStore, ["configure"]),
+    ...mapActions(useConfigurationStore, [
+      "configure",
+      "configureCustomConnectionInstructions",
+    ]),
+  },
+
+  mounted() {
+    this.unsavedCustomInstructions = this.customInstructions;
+    this.unsavedConnectionInstructions = this.currentConnectionInstructions;
+    this.unsavedWorkspaceConnectionInstructions =
+      this.workspaceConnectionInstructions;
   },
 };
 </script>
+
+<style scoped>
+:deep(.input-wrapper):has([data-empty=true])::after {
+  content: "No instructions set";
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.727rem; /* FIXME should be 0.831rem */
+  font-style: italic;
+  color: var(--text-muted);
+}
+</style>
diff --git a/src/components/configuration/InstructionsConfiguration.vue b/src/components/configuration/InstructionsConfiguration.vue
deleted file mode 100644
index 5bce4d7..0000000
--- a/src/components/configuration/InstructionsConfiguration.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <h2>Instructions</h2>
-  <p class="description">
-    Use custom instructions to provide additional context to the AI. These
-    instructions are added on top of the
-    <ExternalLink
-      href="https://github.com/beekeeper-studio/bks-ai-shell/blob/main/instructions"
-      >default instructions<span
-        style="font-size: 1em"
-        class="material-symbols-outlined"
-        >arrow_outward</span
-      ></ExternalLink
-    >.
-  </p>
-  <BaseInput
-    :model-value="customInstructions"
-    @change="configure('customInstructions', $event.target.value)"
-    type="textarea"
-    placeholder="E.g. Before running a query, analyze it for any potential issues."
-    rows="4"
-  >
-    <template #label>Global</template>
-    <template #helper>Used in every conversation</template>
-  </BaseInput>
-  <BaseInput
-    :model-value="currentConnectionInstructions"
-    @change="configureCustomConnectionInstructions($event.target.value)"
-    type="textarea"
-    placeholder="E.g. This database contains tables for user management and analytics."
-    rows="4"
-  >
-    <template #label>This connection only</template>
-    <template #helper>Used only for this connection</template>
-  </BaseInput>
-  <BaseInput
-    v-if="workspaceInfo.type === 'cloud'"
-    :disabled="!workspaceInfo.isOwner"
-    :model-value="workspaceConnectionInstructions"
-    @change="configure('workspaceConnectionInstructions', $event.target.value)"
-    type="textarea"
-    :placeholder="workspaceInfo.isOwner ? 'E.g. This database contains tables for user management and analytics.' : ''"
-    rows="4"
-  >
-    <template #label>Workspace connection</template>
-    <template #helper
-      >Used only for this connection and managed by the workspace
-      owner</template
-    >
-  </BaseInput>
-</template>
-
-<script lang="ts">
-import { mapActions, mapGetters, mapState } from "pinia";
-import BaseInput from "@/components/common/BaseInput.vue";
-import { useConfigurationStore } from "@/stores/configuration";
-import ExternalLink from "@/components/common/ExternalLink.vue";
-import { useChatStore } from "@/stores/chat";
-
-export default {
-  name: "GeneralConfiguration",
-
-  components: {
-    BaseInput,
-    ExternalLink,
-  },
-
-  computed: {
-    ...mapState(useChatStore, ["workspaceInfo"]),
-    ...mapState(useConfigurationStore, [
-      "customInstructions",
-      "workspaceConnectionInstructions",
-    ]),
-    ...mapGetters(useConfigurationStore, ["currentConnectionInstructions"]),
-  },
-
-  methods: {
-    ...mapActions(useConfigurationStore, [
-      "configure",
-      "configureCustomConnectionInstructions",
-    ]),
-  },
-};
-</script>
diff --git a/src/stores/configuration.ts b/src/stores/configuration.ts
index ebe7228..c14b633 100644
--- a/src/stores/configuration.ts
+++ b/src/stores/configuration.ts
@@ -14,6 +14,7 @@ import _ from "lodash";
 import {
   workspaceConnectionStorage,
   appStorage,
+  log,
 } from "@beekeeperstudio/plugin";
 import { AvailableProviders, providerConfigs } from "@/config";
 import { useChatStore } from "./chat";
@@ -27,9 +28,18 @@ import {
   Model,
 } from "./configurationSchema";
 
+type State = ConfigurationState & {
+  storeStatus: "idle" | "loading" | "error";
+  storeError: Error | null;
+};
+
 export const useConfigurationStore = defineStore("configuration", {
-  state: (): ConfigurationState => {
-    return defaultConfiguration;
+  state: (): State => {
+    return {
+      ...defaultConfiguration,
+      storeStatus: "idle",
+      storeError: null,
+    };
   },
 
   getters: {
@@ -80,26 +90,37 @@ export const useConfigurationStore = defineStore("configuration", {
 
   actions: {
     async sync() {
-      const configuration: Partial<Configurable> = {};
-      for (const key in defaultConfiguration) {
-        let value: unknown = null;
-
-        if (isWorkspaceConfig(key)) {
-          value = await workspaceConnectionStorage.getItem(key);
-        } else {
-          value = await appStorage.getItem<Configurable>(key, {
-            encrypted: isEncryptedConfig(key),
-          });
+      this.storeStatus = "loading";
+      this.storeError = null;
+
+      try {
+        const configuration: Partial<Configurable> = {};
+        for (const key in defaultConfiguration) {
+          let value: unknown = null;
+
+          if (isWorkspaceConfig(key)) {
+            value = await workspaceConnectionStorage.getItem(key);
+          } else {
+            value = await appStorage.getItem<Configurable>(key, {
+              encrypted: isEncryptedConfig(key),
+            });
+          }
+
+          if (value === null) {
+            continue;
+          }
+
+          configuration[key] = value;
         }
 
-        if (value === null) {
-          continue;
-        }
+        this.$patch(configuration);
 
-        configuration[key] = value;
+        this.storeStatus = "idle";
+      } catch (e) {
+        log.error("Failed to sync configuration" + e.toString());
+        this.storeStatus = "error";
+        this.storeError = e as Error;
       }
-
-      this.$patch(configuration);
     },
     async configure<T extends keyof ConfigurationState>(
       config: T,

From b345ef545f83e7809bf4e5e44ceb805e136a3182 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Sat, 31 Jan 2026 19:13:24 +0700
Subject: [PATCH 4/7] fix font-size

---
 src/assets/styles/pages/_chat-interface.scss | 2 +-
 src/components/ChatInterface.vue             | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles/pages/_chat-interface.scss b/src/assets/styles/pages/_chat-interface.scss
index bfe5754..becca3d 100644
--- a/src/assets/styles/pages/_chat-interface.scss
+++ b/src/assets/styles/pages/_chat-interface.scss
@@ -480,7 +480,7 @@
       border: none;
       border-radius: 0.3rem;
       background-color: transparent;
-      color: var(--text-dark);
+      color: var(--text);
       font-weight: normal;
 
       &:hover {
diff --git a/src/components/ChatInterface.vue b/src/components/ChatInterface.vue
index 8847064..76544dc 100644
--- a/src/components/ChatInterface.vue
+++ b/src/components/ChatInterface.vue
@@ -368,5 +368,6 @@ export default {
   margin-top: 0.5rem;
   text-align: right;
   color: var(--text);
+  font-size: 0.9rem;
 }
 </style>

From 8a8a9d2c1a6ba30429f85b89db9511ec88d57652 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Sat, 31 Jan 2026 19:17:23 +0700
Subject: [PATCH 5/7] revert styles

---
 src/assets/styles/_base.scss | 3 +--
 src/assets/styles/_form.scss | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss
index 12b9d10..f978f3c 100644
--- a/src/assets/styles/_base.scss
+++ b/src/assets/styles/_base.scss
@@ -23,7 +23,7 @@ input, select, textarea {
   display: flex;
   height: 26px;
   padding: 0 0.75rem;
-  font-size: 0.727rem; // FIXME should be 0.831rem
+  font-size: 0.831rem;
   font-weight: normal;
   line-height: 26px;
   color: var(--text);
@@ -57,7 +57,6 @@ input, select, textarea {
 
 textarea {
   overflow: auto;
-  line-height: 1.2rem;
 }
 
 select {
diff --git a/src/assets/styles/_form.scss b/src/assets/styles/_form.scss
index 337abb3..57bc814 100644
--- a/src/assets/styles/_form.scss
+++ b/src/assets/styles/_form.scss
@@ -8,7 +8,7 @@
   label {
     display: flex;
     align-items: center;
-    font-size: 0.727rem; // FIXME should be 0.831rem
+    font-size: 0.831rem;
     line-height: 1.5;
     padding: 0 0.2rem;
     margin-bottom: 2px;

From 690f9ddd9cb248b30539b6c1e451a724ce524065 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Sat, 31 Jan 2026 20:02:42 +0700
Subject: [PATCH 6/7] prevent closing config if there are unsaved changes

---
 src/App.vue                                   |  7 +--
 src/components/common/BaseInput.vue           | 17 ++++++
 .../configuration/Configuration.vue           | 10 ++--
 .../configuration/GeneralConfiguration.vue    | 52 ++++++++++++++-----
 src/plugins/appEvent.ts                       |  1 +
 5 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9006de8..b938be8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
     </div>
     <ChatInterface v-if="page === 'chat-interface'" :initialMessages="messages" @manage-models="handleManageModels"
       @open-configuration="handleOpenConfiguration" />
-    <Configuration v-model:visible="showConfiguration" :reactivePage="configurationPage" @close="closeConfiguration" />
+    <Configuration v-model:visible="showConfiguration" :reactivePage="configurationPage" />
     <Dialog modal :visible="showOnboarding" :closable="false" :draggable="false">
       <OnboardingScreen @submit="closeOnboardingScreen" />
     </Dialog>
@@ -41,7 +41,7 @@ export default {
     return {
       page: "starting" as Page,
       showOnboarding: false,
-      showConfiguration: false,
+      showConfiguration: true,
       error: "" as unknown,
       showLoading: false,
       apiKeysChanged: false,
@@ -104,9 +104,6 @@ export default {
       this.configurationPage = "general";
       this.showConfiguration = true;
     },
-    closeConfiguration() {
-      this.showConfiguration = false;
-    },
     // In Beekeeper Studio v5.3.3 and lower, the requests from plugins are
     // sometimes not responded due to a race condition.
     // See https://github.com/beekeeper-studio/beekeeper-studio/pull/3473
diff --git a/src/components/common/BaseInput.vue b/src/components/common/BaseInput.vue
index 90a98cc..e1c8bad 100644
--- a/src/components/common/BaseInput.vue
+++ b/src/components/common/BaseInput.vue
@@ -62,6 +62,10 @@
       <button class="btn btn-small btn-primary" @click="$emit('save')">
         Save
       </button>
+      <span class="unsaved-error" v-if="showUnsavedError">
+        <span class="material-symbols-outlined">info</span>
+        Unsaved changes
+      </span>
     </div>
   </div>
 </template>
@@ -95,6 +99,7 @@ export default {
     },
     /** If `showActions`, we'll show save and discard buttons. */
     showActions: Boolean,
+    showUnsavedError: Boolean,
   },
 
   emits: ["update:modelValue", "input", "change", "click", "save", "discard"],
@@ -137,6 +142,18 @@ export default {
   align-items: center;
   padding-top: 0.5rem;
   gap: 0.5rem;
+  font-size: 0.831rem;
+}
+
+.unsaved-error {
+  color: var(--brand-danger);
+  display: flex;
+  align-items: center;
+
+  .material-symbols-outlined {
+    font-size: 1em;
+    margin-right: 0.5ch;
+  }
 }
 
 label :deep(.material-symbols-outlined) {
diff --git a/src/components/configuration/Configuration.vue b/src/components/configuration/Configuration.vue
index e451d8c..84710b7 100644
--- a/src/components/configuration/Configuration.vue
+++ b/src/components/configuration/Configuration.vue
@@ -6,14 +6,14 @@
     class="configuration"
     :visible="visible"
     :show-header="false"
-    @update:visible="handleUpdateVisible"
+    @update:visible="updateVisible"
   >
     <nav>
       <ul>
         <li>
           <button
             class="btn btn-flat nav-btn close-btn"
-            @click="$emit('close')"
+            @click="updateVisible(false)"
           >
             <span class="material-symbols-outlined">close</span>
           </button>
@@ -34,7 +34,7 @@
       <div v-else-if="storeStatus === 'error'">Error: {{ storeError }}</div>
       <GeneralConfiguration
         v-else-if="page === 'general'"
-        v-model:dirty="isDirty"
+        @update:dirty="isDirty = $event"
       />
       <ModelsConfiguration v-else-if="page === 'models'" />
       <ProvidersConfiguration v-else-if="page === 'providers'" />
@@ -115,9 +115,9 @@ export default {
   },
 
   methods: {
-    handleUpdateVisible(visible: boolean) {
+    updateVisible(visible: boolean) {
       if (!visible && this.isDirty) {
-        // Naah.. hmmmmm
+        this.trigger("dialogClosePrevented");
         return;
       }
       this.$emit("update:visible", visible);
diff --git a/src/components/configuration/GeneralConfiguration.vue b/src/components/configuration/GeneralConfiguration.vue
index 3e47544..622536b 100644
--- a/src/components/configuration/GeneralConfiguration.vue
+++ b/src/components/configuration/GeneralConfiguration.vue
@@ -47,10 +47,12 @@
 
   <BaseInput
     v-model="unsavedCustomInstructions"
+    ref="customInstructions"
     type="textarea"
     placeholder="E.g. Before running a query, analyze it for any potential issues."
     rows="4"
     :showActions="unsavedCustomInstructions !== customInstructions"
+    :showUnsavedError="showUnsavedError"
     @discard="unsavedCustomInstructions = customInstructions"
     @save="configure('customInstructions', unsavedCustomInstructions)"
   >
@@ -59,12 +61,14 @@
   </BaseInput>
   <BaseInput
     v-model="unsavedConnectionInstructions"
+    ref="connectionInstructions"
     type="textarea"
     placeholder="E.g. This database contains tables for user management and analytics."
     rows="4"
     :showActions="
       unsavedConnectionInstructions !== currentConnectionInstructions
     "
+    :showUnsavedError="showUnsavedError"
     @discard="unsavedConnectionInstructions = currentConnectionInstructions"
     @save="configureCustomConnectionInstructions(unsavedConnectionInstructions)"
   >
@@ -74,6 +78,7 @@
   <BaseInput
     v-if="workspaceInfo.type === 'cloud'"
     v-model="unsavedWorkspaceConnectionInstructions"
+    ref="workspaceConnectionInstructions"
     type="textarea"
     rows="4"
     :disabled="!workspaceInfo.isOwner"
@@ -85,6 +90,7 @@
     :showActions="
       unsavedWorkspaceConnectionInstructions !== workspaceConnectionInstructions
     "
+    :showUnsavedError="showUnsavedError"
     @discard="
       unsavedWorkspaceConnectionInstructions = workspaceConnectionInstructions
     "
@@ -119,6 +125,7 @@ import BaseInput from "@/components/common/BaseInput.vue";
 import { useConfigurationStore } from "@/stores/configuration";
 import ExternalLink from "@/components/common/ExternalLink.vue";
 import { useChatStore } from "@/stores/chat";
+import { RootBinding } from "@/plugins/appEvent";
 
 export default {
   name: "GeneralConfiguration",
@@ -128,10 +135,6 @@ export default {
     ExternalLink,
   },
 
-  props: {
-    dirty: Boolean,
-  },
-
   emits: ["update:dirty"],
 
   data() {
@@ -139,6 +142,7 @@ export default {
       unsavedCustomInstructions: "",
       unsavedConnectionInstructions: "",
       unsavedWorkspaceConnectionInstructions: "",
+      showUnsavedError: false,
     };
   },
 
@@ -151,20 +155,40 @@ export default {
       "workspaceConnectionInstructions",
     ]),
     ...mapGetters(useConfigurationStore, ["currentConnectionInstructions"]),
-    isDirty() {
-      return (
-        this.unsavedCustomInstructions !== this.customInstructions ||
-        this.unsavedConnectionInstructions !==
-          this.currentConnectionInstructions ||
-        this.unsavedWorkspaceConnectionInstructions !==
-          this.workspaceConnectionInstructions
-      );
+    rootBindings(): RootBinding[] {
+      return [
+        {
+          event: "dialogClosePrevented",
+          handler: () => {
+            this.dirtyRef?.focus();
+            this.dirtyRef?.$el.scrollIntoView({
+              behavior: "instant",
+            });
+            this.showUnsavedError = true;
+          },
+        },
+      ];
+    },
+    dirtyRef() {
+      if (this.unsavedCustomInstructions !== this.customInstructions) {
+        return this.$refs.customInstructions as InstanceType<typeof BaseInput>;
+      }
+      if (this.unsavedConnectionInstructions !== this.currentConnectionInstructions) {
+        return this.$refs.connectionInstructions as InstanceType<typeof BaseInput>;
+      }
+      if (this.unsavedWorkspaceConnectionInstructions !== this.workspaceConnectionInstructions) {
+        return this.$refs.workspaceConnectionInstructions as InstanceType<typeof BaseInput>;
+      }
+      return null;
     },
   },
 
   watch: {
-    dirty() {
-      this.$emit("update:dirty", this.isDirty);
+    dirtyRef() {
+      if (!this.dirtyRef) {
+        this.showUnsavedError = false;
+      }
+      this.$emit("update:dirty", !!this.dirtyRef);
     },
   },
 
diff --git a/src/plugins/appEvent.ts b/src/plugins/appEvent.ts
index 872cdf5..8cc2078 100644
--- a/src/plugins/appEvent.ts
+++ b/src/plugins/appEvent.ts
@@ -6,6 +6,7 @@ export type AppEvent = keyof AppEventHandlers;
 export interface AppEventHandlers {
   showResultTable: (queryResults: QueryResult[]) => void;
   showedResultTable: (queryResults: QueryResult[]) => void;
+  dialogClosePrevented: () => void;
 }
 
 export interface RootBinding {

From 1e621cecce19ba21dc67124a3d9e7010b3626143 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Sat, 31 Jan 2026 22:41:04 +0700
Subject: [PATCH 7/7] use cloudStorage

---
 package.json                      |  2 +-
 src/App.vue                       |  2 +-
 src/stores/configuration.ts       | 16 ++++++----------
 src/stores/configurationSchema.ts | 12 ++++++------
 yarn.lock                         |  8 ++++----
 5 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 6622f06..d8d344d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@ai-sdk/openai": "^3.0.8",
     "@ai-sdk/openai-compatible": "^2.0.4",
     "@ai-sdk/vue": "^3.0.28",
-    "@beekeeperstudio/plugin": "^1.7.1-beta.0",
+    "@beekeeperstudio/plugin": "^1.7.1-beta.2",
     "@beekeeperstudio/ui-kit": "0.3.1",
     "@langchain/core": "^0.3.61",
     "@material-symbols/font-400": "^0.31.2",
diff --git a/src/App.vue b/src/App.vue
index b938be8..12e4b8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,7 +41,7 @@ export default {
     return {
       page: "starting" as Page,
       showOnboarding: false,
-      showConfiguration: true,
+      showConfiguration: false,
       error: "" as unknown,
       showLoading: false,
       apiKeysChanged: false,
diff --git a/src/stores/configuration.ts b/src/stores/configuration.ts
index c14b633..6f3daf2 100644
--- a/src/stores/configuration.ts
+++ b/src/stores/configuration.ts
@@ -11,11 +11,7 @@
  */
 import { defineStore } from "pinia";
 import _ from "lodash";
-import {
-  workspaceConnectionStorage,
-  appStorage,
-  log,
-} from "@beekeeperstudio/plugin";
+import { cloudStorage, appStorage, log } from "@beekeeperstudio/plugin";
 import { AvailableProviders, providerConfigs } from "@/config";
 import { useChatStore } from "./chat";
 import {
@@ -24,7 +20,7 @@ import {
   defaultConfiguration,
   encryptedConfigurableShape,
   isEncryptedConfig,
-  isWorkspaceConfig,
+  isCloudConfig,
   Model,
 } from "./configurationSchema";
 
@@ -98,8 +94,8 @@ export const useConfigurationStore = defineStore("configuration", {
         for (const key in defaultConfiguration) {
           let value: unknown = null;
 
-          if (isWorkspaceConfig(key)) {
-            value = await workspaceConnectionStorage.getItem(key);
+          if (isCloudConfig(key)) {
+            value = await cloudStorage.connection.getItem(key);
           } else {
             value = await appStorage.getItem<Configurable>(key, {
               encrypted: isEncryptedConfig(key),
@@ -128,8 +124,8 @@ export const useConfigurationStore = defineStore("configuration", {
     ) {
       this.$patch({ [config]: value });
 
-      if (isWorkspaceConfig(config)) {
-        await workspaceConnectionStorage.setItem(config, value);
+      if (isCloudConfig(config)) {
+        await cloudStorage.connection.setItem(config, value);
       } else {
         await appStorage.setItem(config, value, {
           encrypted: isEncryptedConfig(config),
diff --git a/src/stores/configurationSchema.ts b/src/stores/configurationSchema.ts
index 7e03926..2afe459 100644
--- a/src/stores/configurationSchema.ts
+++ b/src/stores/configurationSchema.ts
@@ -70,8 +70,8 @@ const encryptedConfigurableSchema = z.object({
   providers_openaiCompat_apiKey: z.string().default(""),
 });
 
-const workspaceConfigurableSchema = z.object({
-  workspaceConnectionInstructions: z.string().default(""),
+const cloudConfigurableSchema = z.object({
+  cloudConnectionInstructions: z.string().default(""),
 });
 
 export const encryptedConfigurableShape = encryptedConfigurableSchema.shape;
@@ -86,14 +86,14 @@ export function isEncryptedConfig(
   return config in encryptedConfigurableSchema.shape;
 }
 
-export function isWorkspaceConfig(
+export function isCloudConfig(
   config: string,
-): config is keyof z.infer<typeof workspaceConfigurableSchema> {
-  return config in workspaceConfigurableSchema.shape;
+): config is keyof z.infer<typeof cloudConfigurableSchema> {
+  return config in cloudConfigurableSchema.shape;
 }
 
 export const defaultConfiguration = {
   ...configurableSchema.parse({}),
   ...encryptedConfigurableSchema.parse({}),
-  ...workspaceConfigurableSchema.parse({}),
+  ...cloudConfigurableSchema.parse({}),
 };
diff --git a/yarn.lock b/yarn.lock
index 621f4c0..1a5dedf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -370,10 +370,10 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.28.5"
 
-"@beekeeperstudio/plugin@^1.7.1-beta.0":
-  version "1.7.1-beta.0"
-  resolved "https://registry.yarnpkg.com/@beekeeperstudio/plugin/-/plugin-1.7.1-beta.0.tgz#409e3bb5ac3fa3bfcd9405d509cbef905084fa4d"
-  integrity sha512-mucEZV9DgmL1UN6Mr0apqcvxMwS8xzsDFfnfwEDpuPrQAGQRe2V84SGQpLliSzsLIqWjEojyV3dDiUcF8u3zWg==
+"@beekeeperstudio/plugin@^1.7.1-beta.2":
+  version "1.7.1-beta.2"
+  resolved "https://registry.yarnpkg.com/@beekeeperstudio/plugin/-/plugin-1.7.1-beta.2.tgz#6f73ca4ccb1a0fef99f57df7fef7f39eb546f1ea"
+  integrity sha512-pEh8vWMB14ZQ/QIOBMjMZslDFNT1KHpM0/MeGcWSxMmblMV3foMc6LRoxHsbdH/TSlSUwk5Vx2iTx5L+IceUSQ==
 
 "@beekeeperstudio/ui-kit@0.3.1":
   version "0.3.1"