fix(data-studio): resolve UI bugs — duplicate status text, permission buttons, cancel action, source persistence, connection filtering (#103)

- Remove duplicate 'Waiting for model...' progress text (already shown in message bubble)
- Tone down permission confirmation buttons (text-color styling instead of filled backgrounds)
- Fix Cancel button in handleConfirmation to properly stop loop and reset session status
- Fix getOrCreateSession to return existing active session instead of creating new one (prevented permissionsMode from resetting to Ask)
- Persist session sources and permissions mode to backend on attach/detach/mode change
- Expand AGENT_SUPPORTED_TYPES from 4 to 40+ PG/MySQL-wire compatible databases
- Improve 'no connections' dropdown message to differentiate empty vs all-attached

Author: Blankll

src/components/chat-panel.vue

@@ -278,9 +278,7 @@ onBeforeUnmount(() => {
           <span v-if="progress.phase === 'iterating'">
             {{ t('dataStudio.agent.iteration') }} {{ progress.iter }}/{{ progress.maxIter }}
           </span>
-          <span v-else-if="progress.phase === 'waiting_llm'">
-            {{ t('dataStudio.agent.waitingModel') }}
-          </span>
+          <!-- waiting_llm phase hidden — message bubble activity timeline already shows "Waiting for model" -->
           <span v-else-if="progress.phase === 'compacting'">
             {{ t('dataStudio.agent.compacting') }}
           </span>

src/composables/useChatAgent.ts

@@ -556,8 +556,10 @@ export function useChatAgent(config: UseChatAgentConfig) {
       }
 
       case 'cancel': {
-        // cancelSession is defined below, but the function is hoisted in runtime
-        cancelSessionHandler()
+        // Mark tool call as denied first, then cancel the loop
+        config.sessionStore.updateToolCallStatus(assistantMsgId, toolCallId, 'denied', undefined, undefined, sessionId)
+        config.sessionStore.setSessionStatus(sessionId, 'idle')
+        await cancelSessionHandler()
         break
       }
     }

src/lang/enUS.ts

@@ -746,6 +746,7 @@ export const enUS = {
       selectConnection: 'Select Connection',
       searchPlaceholder: 'Search connections...',
       noConnections: 'No compatible connections found',
+      allAttached: 'All compatible connections are already attached',
       connectionsFound: '{count} connections found',
       connectSource: 'Connect',
     },

src/lang/zhCN.ts

@@ -746,6 +746,7 @@ export const zhCN = {
       selectConnection: '选择连接',
       searchPlaceholder: '搜索连接...',
       noConnections: '没有兼容的连接',
+      allAttached: '所有兼容的连接已添加',
       connectionsFound: '找到 {count} 个连接',
       connectSource: '连接',
     },

src/pages/DataStudioPage.vue

@@ -23,11 +23,54 @@ const { attachedSources, activeSession } = storeToRefs(dataStudioStore)
 
 const { getDatabaseIcon } = useDatabaseIcon()
 
-const AGENT_SUPPORTED_TYPES = new Set([
+// All PG-wire and MySQL-wire compatible databases + popular standalone engines
+// Knowledge blocks exist for PostgreSQL, MySQL, SQL Server, SQLite dialects;
+// wire-compatible types use the same SQL dialect through their respective bridge.
+const AGENT_SUPPORTED_TYPES = new Set<DatabaseType>([
+  // Native adapters (direct knowledge blocks)
   DatabaseType.POSTGRESQL,
   DatabaseType.MYSQL,
   DatabaseType.SQLITE,
   DatabaseType.SQLSERVER,
+  // PG-wire compatible
+  DatabaseType.MARIADB,
+  DatabaseType.COCKROACHDB,
+  DatabaseType.REDSHIFT,
+  DatabaseType.YUGABYTEDB,
+  DatabaseType.TIMESCALEDB,
+  DatabaseType.KINGBASEES,
+  DatabaseType.GAUSSDB,
+  DatabaseType.HIGHGO,
+  DatabaseType.UXDB,
+  DatabaseType.OPENGAUSS,
+  DatabaseType.GBASE8C,
+  DatabaseType.QUESTDB,
+  DatabaseType.VASTBASE,
+  DatabaseType.YASHANDB,
+  DatabaseType.GREENPLUM,
+  DatabaseType.ENTERPRISEDB,
+  DatabaseType.CRATEDB,
+  DatabaseType.MATERIALIZE,
+  DatabaseType.ALLOYDB,
+  DatabaseType.CLOUDSQLPG,
+  DatabaseType.FUJITSUPG,
+  // MySQL-wire compatible
+  DatabaseType.TIDB,
+  DatabaseType.OCEANBASE,
+  DatabaseType.TDSQL,
+  DatabaseType.POLARDB,
+  DatabaseType.DM8,
+  DatabaseType.DORIS,
+  DatabaseType.SELECTDB,
+  DatabaseType.STARROCKS,
+  DatabaseType.DATABEND,
+  DatabaseType.GOLDENDB,
+  DatabaseType.MANTICORESEARCH,
+  DatabaseType.SINGLESTOREMEMSQL,
+  DatabaseType.CLOUDSQLMYSQL,
+  // Popular standalone engines (well-known syntax, LLM understands them)
+  DatabaseType.DUCKDB,
+  DatabaseType.ORACLE,
 ])
 
 const {
@@ -104,6 +147,14 @@ const filteredAddConnections = computed(() => {
     : availableAddConnections.value
 })
 
+const addSourceEmptyMessage = computed(() => {
+  if (connections.value.length === 0)
+    return t('dataStudio.addSource.noConnections')
+  if (availableAddConnections.value.length === 0)
+    return t('dataStudio.addSource.allAttached')
+  return t('dataStudio.addSource.noConnections')
+})
+
 function getConnectionMeta(conn: ServerConnection): string {
   const label = conn.type
   if (conn.type === DatabaseType.SQLITE)
@@ -137,7 +188,7 @@ async function confirmAddSource() {
     if (!dataStudioStore.activeSession) {
       await dataStudioStore.getOrCreateSession()
     }
-    dataStudioStore.attachSourceToActiveSession(newSource.sourceId)
+    await dataStudioStore.attachSourceToActiveSession(newSource.sourceId)
     if (addSourceMode.value === 'Ask' && dataStudioStore.activeSession) {
       dataStudioStore.updateSessionSourceMode(
         newSource.sourceId,
@@ -151,9 +202,9 @@ async function confirmAddSource() {
   }
 }
 
-function setAutoMode(auto: boolean) {
+async function setAutoMode(auto: boolean) {
   permissionMenuOpen.value = false
-  dataStudioStore.setSessionPermissionsMode(auto ? 'Auto' : 'Ask')
+  await dataStudioStore.setSessionPermissionsMode(auto ? 'Auto' : 'Ask')
 }
 
 async function switchSession(sessionId: string) {
@@ -357,7 +408,7 @@ function syncAllProviderModels() {
                         />
                       </button>
                       <div v-if="filteredAddConnections.length === 0" class="add-source-empty">
-                        {{ t('dataStudio.addSource.noConnections') }}
+                        {{ addSourceEmptyMessage }}
                       </div>
                     </div>
 

src/store/dataStudioStore.ts

@@ -360,7 +360,17 @@ export const useDataStudioStore = defineStore('dataStudio', {
       return source
     },
 
-    attachSourceToActiveSession(sourceId: string) {
+    async _persistSessionSources(sessionId: string) {
+      const session = this.sessions.find(s => s.id === sessionId)
+      if (!session)
+        return
+      const sourcesJson = JSON.stringify(session.sources)
+      await agentApi.updateSessionMeta(sessionId, sourcesJson).catch(e =>
+        console.warn('[persist] Failed to save session sources:', e),
+      )
+    },
+
+    async attachSourceToActiveSession(sourceId: string) {
       const session = this.activeSession
       if (!session)
         return
@@ -387,9 +397,11 @@ export const useDataStudioStore = defineStore('dataStudio', {
           ? { ...s, sources: [...s.sources, sessionSource], updated_at: Date.now() }
           : s,
       )
+
+      await this._persistSessionSources(session.id)
     },
 
-    detachSourceFromSession(sourceId: string) {
+    async detachSourceFromSession(sourceId: string) {
       const session = this.activeSession
       if (!session)
         return
@@ -407,9 +419,11 @@ export const useDataStudioStore = defineStore('dataStudio', {
             }
           : s,
       )
+
+      await this._persistSessionSources(session.id)
     },
 
-    setSessionPermissionsMode(mode: PermissionsMode) {
+    async setSessionPermissionsMode(mode: PermissionsMode) {
       const session = this.activeSession
       if (!session)
         return
@@ -419,6 +433,10 @@ export const useDataStudioStore = defineStore('dataStudio', {
           ? { ...s, permissionsMode: mode, updated_at: Date.now() }
           : s,
       )
+
+      await agentApi.updateSessionMeta(session.id, undefined, mode).catch(e =>
+        console.warn('[persist] Failed to save permissions mode:', e),
+      )
     },
 
     updateSessionSourcePermissions(sourceId: string, permissions: DataSourcePermissions) {
@@ -501,6 +519,13 @@ export const useDataStudioStore = defineStore('dataStudio', {
           return existing
         }
       }
+      // Return existing active session instead of creating new one
+      // Prevents resetting permissionsMode/sources to defaults on sendMessage
+      if (this.activeSessionId) {
+        const active = this.sessions.find(s => s.id === this.activeSessionId)
+        if (active)
+          return active
+      }
       return await this.createSession()
     },
 

src/views/data-studio/components/tool-confirmation-card.vue

@@ -46,35 +46,40 @@ function riskColor(risk: string): string {
     <div class="flex flex-wrap gap-1.5">
       <Button
         size="sm"
-        variant="default"
+        variant="outline"
+        class="text-foreground"
         @click="emit('confirm', { toolCallId: props.toolCall.id, action: 'allow_once' })"
       >
         {{ t('dataStudio.agent.allowOnce') }}
       </Button>
       <Button
         size="sm"
-        variant="outline"
+        variant="ghost"
+        class="text-foreground"
         @click="emit('confirm', { toolCallId: props.toolCall.id, action: 'allow_always' })"
       >
         {{ t('dataStudio.agent.allowAlways') }}
       </Button>
       <Button
         size="sm"
-        variant="secondary"
+        variant="ghost"
+        class="text-muted-foreground"
         @click="emit('confirm', { toolCallId: props.toolCall.id, action: 'deny' })"
       >
         {{ t('dataStudio.agent.deny') }}
       </Button>
       <Button
         size="sm"
-        variant="destructive"
+        variant="ghost"
+        class="text-muted-foreground hover:text-destructive"
         @click="emit('confirm', { toolCallId: props.toolCall.id, action: 'deny_always' })"
       >
         {{ t('dataStudio.agent.denyAlways') }}
       </Button>
       <Button
         size="sm"
         variant="ghost"
+        class="text-muted-foreground"
         @click="emit('confirm', { toolCallId: props.toolCall.id, action: 'cancel' })"
       >
         {{ t('dataStudio.agent.cancelRun') }}