From 1a6d4df68f9710d3ab6b9a8fe73d0e306b841c49 Mon Sep 17 00:00:00 2001
From: LRcoding <38545827+LwClick@users.noreply.github.com>
Date: Fri, 17 Jul 2026 00:15:12 +0800
Subject: [PATCH] feat(grid): show connection name in data header

---
 .../src/components/layout/ContentArea.vue     |  7 +++--
 .../app-tests/dataTabHeaderConnection.test.ts | 31 +++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 packages/app-tests/dataTabHeaderConnection.test.ts

diff --git a/apps/desktop/src/components/layout/ContentArea.vue b/apps/desktop/src/components/layout/ContentArea.vue
index 231152cecd..da76b81d4a 100644
--- a/apps/desktop/src/components/layout/ContentArea.vue
+++ b/apps/desktop/src/components/layout/ContentArea.vue
@@ -1218,10 +1218,13 @@ defineExpose({ focusSearch, refreshData, refreshQueryEditorCompletionCache, hand
     <template v-else-if="activeTab.mode === 'data'">
       <div class="flex-1 min-h-0 flex flex-col">
         <div class="h-9 shrink-0 border-b bg-background/80 px-3 flex items-center gap-2 text-xs">
-          <span class="inline-flex items-center rounded border border-border bg-muted/50 px-2 py-0.5 font-medium truncate">
+          <span v-if="activeConnection?.name?.trim()" data-data-header-connection class="inline-flex max-w-48 min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="activeConnection.name">
+            {{ activeConnection.name }}
+          </span>
+          <span class="inline-flex max-w-48 min-w-0 items-center truncate rounded border border-border bg-muted/50 px-2 py-0.5 font-medium">
             {{ activeTab.tableMeta?.tableName || activeTab.title }}
           </span>
-          <span class="inline-flex items-center rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground truncate">
+          <span class="inline-flex max-w-56 min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground">
             <template v-if="activeTab.tableMeta?.schema">{{ activeTab.tableMeta.schema }}@</template>{{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }}
           </span>
           <span v-if="activeTab.mode === 'data' && activeTab.tableMeta" class="inline-flex shrink-0 items-center rounded border border-border bg-muted/30 px-2 py-0.5 font-medium text-muted-foreground tabular-nums"> {{ activeTab.tableMeta.columns.length }} {{ t("tree.columns") }} </span>
diff --git a/packages/app-tests/dataTabHeaderConnection.test.ts b/packages/app-tests/dataTabHeaderConnection.test.ts
new file mode 100644
index 0000000000..93ac45ab78
--- /dev/null
+++ b/packages/app-tests/dataTabHeaderConnection.test.ts
@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "vitest";
+import { compileTemplate, parse } from "vue/compiler-sfc";
+
+const contentAreaPath = "apps/desktop/src/components/layout/ContentArea.vue";
+
+function dataModeTemplate(): string {
+  const source = readFileSync(contentAreaPath, "utf8");
+  const { descriptor, errors } = parse(source, { filename: contentAreaPath });
+  assert.deepEqual(errors, []);
+  assert.ok(descriptor.template);
+  const result = compileTemplate({ id: contentAreaPath, filename: contentAreaPath, source: descriptor.template.content });
+  assert.deepEqual(result.errors, []);
+
+  const start = descriptor.template.content.indexOf("activeTab.mode === 'data'");
+  const end = descriptor.template.content.indexOf("activeTab.mode === 'redis'", start);
+  assert.ok(start >= 0 && end > start, "ContentArea should keep a bounded data-mode template");
+  return descriptor.template.content.slice(start, end);
+}
+
+test("data tab header shows the active connection before the table context", () => {
+  const template = dataModeTemplate();
+  const connectionIndex = template.indexOf("data-data-header-connection");
+  const tableIndex = template.indexOf("activeTab.tableMeta?.tableName");
+
+  assert.ok(connectionIndex >= 0 && connectionIndex < tableIndex);
+  assert.match(template, /v-if="activeConnection\?\.name\?\.trim\(\)"/);
+  assert.match(template, /:title="activeConnection\.name"/);
+  assert.match(template, /data-data-header-connection class="[^"]*max-w-48[^"]*truncate/);
+});