From f3cb0b22ac74a354ce25f685561452a629b37fac Mon Sep 17 00:00:00 2001
From: "Crane.z" <1481445951@qq.com>
Date: Thu, 9 Jul 2026 14:50:37 +0800
Subject: [PATCH 1/2] feat : split native database session surface

---
 ui/chen/components/ChenSessionState.vue       |   20 +
 ui/chen/components/ConsolePanel.vue           |   81 ++
 ui/chen/components/DataViewPanel.vue          |  248 ++++
 ui/chen/components/QueryConsolePanel.vue      |   52 +
 ui/chen/components/QueryResultTabs.vue        |   62 +
 ui/chen/components/ResourceTreePanel.vue      |   60 +
 ui/chen/components/WorkspaceTabBar.vue        |   74 +
 ui/chen/composables/useChenAuth.ts            |   43 +
 ui/chen/composables/useChenDataView.ts        |   41 +
 .../composables/useChenDataViewDerivedMeta.ts |   82 ++
 ui/chen/composables/useChenQueryConsole.ts    |  106 ++
 ui/chen/composables/useChenResourceTree.ts    |  101 ++
 ui/chen/composables/useChenSession.ts         |   86 ++
 ui/chen/composables/useChenWebSocket.ts       |   55 +
 ui/chen/composables/useChenWorkspaceTabs.ts   |  145 ++
 ui/chen/types.ts                              |   61 +
 ui/chen/workspaces/DatabaseSessionSurface.vue | 1222 +++--------------
 17 files changed, 1522 insertions(+), 1017 deletions(-)
 create mode 100644 ui/chen/components/ChenSessionState.vue
 create mode 100644 ui/chen/components/ConsolePanel.vue
 create mode 100644 ui/chen/components/DataViewPanel.vue
 create mode 100644 ui/chen/components/QueryConsolePanel.vue
 create mode 100644 ui/chen/components/QueryResultTabs.vue
 create mode 100644 ui/chen/components/ResourceTreePanel.vue
 create mode 100644 ui/chen/components/WorkspaceTabBar.vue
 create mode 100644 ui/chen/composables/useChenAuth.ts
 create mode 100644 ui/chen/composables/useChenDataView.ts
 create mode 100644 ui/chen/composables/useChenDataViewDerivedMeta.ts
 create mode 100644 ui/chen/composables/useChenQueryConsole.ts
 create mode 100644 ui/chen/composables/useChenResourceTree.ts
 create mode 100644 ui/chen/composables/useChenSession.ts
 create mode 100644 ui/chen/composables/useChenWebSocket.ts
 create mode 100644 ui/chen/composables/useChenWorkspaceTabs.ts

diff --git a/ui/chen/components/ChenSessionState.vue b/ui/chen/components/ChenSessionState.vue
new file mode 100644
index 00000000..d52fa098
--- /dev/null
+++ b/ui/chen/components/ChenSessionState.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  loading?: boolean
+  message: string
+}>();
+</script>
+
+<template>
+  <div class="grid h-full place-items-center text-sm text-muted">
+    <div class="flex max-w-md flex-col items-center gap-3 text-center">
+      <UIcon
+        :name="icon || (loading ? 'i-lucide-loader-circle' : 'i-lucide-database-zap')"
+        class="size-6"
+        :class="loading ? 'animate-spin' : ''"
+      />
+      <p>{{ message }}</p>
+    </div>
+  </div>
+</template>
diff --git a/ui/chen/components/ConsolePanel.vue b/ui/chen/components/ConsolePanel.vue
new file mode 100644
index 00000000..2ac5ebb5
--- /dev/null
+++ b/ui/chen/components/ConsolePanel.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { ChenPromptConsoleTab, ChenQueryLikeWorkspaceTab, ChenQueryResultTab } from "~/chen/types";
+
+import QueryResultTabs from "~/chen/components/QueryResultTabs.vue";
+
+const props = defineProps<{
+  tab: ChenPromptConsoleTab
+  contextLabel: string
+  promptLabel: string
+}>();
+
+const emit = defineEmits<{
+  run: [tab: ChenPromptConsoleTab]
+  cancel: [tab: ChenQueryLikeWorkspaceTab]
+  download: [result: ChenQueryResultTab]
+  updatePendingSql: [tab: ChenPromptConsoleTab, value: string]
+  activateResult: [tab: ChenPromptConsoleTab, id: string]
+}>();
+
+// TODO(chen-native): Confirm whether this console-like prompt should remain
+// as an independent entry or fold back into QueryConsolePanel.
+const pendingSqlValue = computed({
+  get: () => props.tab.pendingSql,
+  set: (value: string) => emit("updatePendingSql", props.tab, value)
+});
+</script>
+
+<template>
+  <div class="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_minmax(16rem,42%)]">
+    <div class="flex min-h-0 flex-col border-b border-default">
+      <div class="flex items-center gap-2 border-b border-default px-3 py-2">
+        <UButton icon="i-lucide-play" size="sm" @click="emit('run', tab)" />
+        <UButton icon="i-lucide-square" size="sm" color="neutral" variant="soft" @click="emit('cancel', tab)" />
+        <UBadge color="neutral" variant="subtle">
+          {{ tab.state.currentContext || contextLabel || 'Console' }}
+        </UBadge>
+      </div>
+
+      <div class="min-h-0 flex-1 overflow-auto px-3 py-3 font-ui-mono text-sm">
+        <div v-if="!tab.historyEntries.length && !tab.logs.length" class="grid h-full place-items-center text-center text-muted">
+          <div>
+            <UIcon name="i-lucide-square-terminal" class="mx-auto mb-2 size-5" />
+            <p>Run SQL here like a `mysql` or `psql` console.</p>
+          </div>
+        </div>
+
+        <div v-for="entry in tab.historyEntries" :key="entry.id" class="mb-3">
+          <div class="mb-1 flex items-start gap-2">
+            <span class="shrink-0 text-primary">{{ promptLabel }}</span>
+            <pre class="whitespace-pre-wrap break-words text-[var(--app-fg)]">{{ entry.sql }}</pre>
+          </div>
+        </div>
+
+        <div v-if="tab.logs.length" class="rounded-md border border-default bg-[var(--workspace-surface-sub-panel)] px-3 py-2 text-xs text-muted">
+          <pre class="whitespace-pre-wrap">{{ tab.logs.join('\n') }}</pre>
+        </div>
+      </div>
+
+      <div class="border-t border-default px-3 py-3">
+        <div class="flex items-start gap-2 rounded-md border border-default bg-[var(--workspace-surface-sub-panel)] px-3 py-2">
+          <span class="pt-2 font-ui-mono text-sm text-primary">{{ promptLabel }}</span>
+          <textarea
+            v-model="pendingSqlValue"
+            class="min-h-20 flex-1 resize-none bg-transparent font-ui-mono text-sm text-[var(--app-fg)] outline-none placeholder:text-[var(--app-muted)]"
+            placeholder="Type SQL and press Cmd/Ctrl+Enter to run"
+            @keydown.enter.meta.prevent="emit('run', tab)"
+            @keydown.enter.ctrl.prevent="emit('run', tab)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <QueryResultTabs
+      :result-tabs="tab.resultTabs"
+      :active-result-tab-id="tab.activeResultTabId"
+      empty-message="Query results will open here."
+      @update:active-result-tab-id="emit('activateResult', tab, $event)"
+      @download="emit('download', $event)"
+    />
+  </div>
+</template>
diff --git a/ui/chen/components/DataViewPanel.vue b/ui/chen/components/DataViewPanel.vue
new file mode 100644
index 00000000..fbcd8890
--- /dev/null
+++ b/ui/chen/components/DataViewPanel.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import type { ChenDataViewConsoleTab, ChenDataViewPropertyTab } from "~/chen/types";
+
+import ChenDataGrid from "~/chen/components/DataGrid.client.vue";
+import { useChenDataViewDerivedMeta } from "~/chen/composables/useChenDataViewDerivedMeta";
+
+const props = defineProps<{
+  tab: ChenDataViewConsoleTab
+  dbType?: string
+  protocol?: string
+}>();
+
+const emit = defineEmits<{
+  download: [tab: ChenDataViewConsoleTab]
+  updatePanel: [tab: ChenDataViewConsoleTab, panel: "data" | "properties"]
+  updatePropertyTab: [tab: ChenDataViewConsoleTab, propertyTab: ChenDataViewPropertyTab]
+}>();
+
+const dbTypeRef = computed(() => props.dbType);
+const protocolRef = computed(() => props.protocol);
+const {
+  dataViewBasicInfo,
+  dataViewColumns,
+  dataViewConstraints,
+  dataViewDDL,
+  dataViewForeignKeys,
+  dataViewIndexes,
+  dataViewPropertyTabs
+} = useChenDataViewDerivedMeta(dbTypeRef, protocolRef);
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div class="flex items-center justify-between gap-2 border-b border-default px-2 py-1">
+      <div class="flex min-w-0 items-center gap-1 overflow-x-auto">
+        <button
+          class="rounded-md px-2 py-1 text-xs"
+          :class="tab.activePanel === 'data' ? 'bg-accented' : 'text-muted'"
+          @click="emit('updatePanel', tab, 'data')"
+        >
+          Data
+        </button>
+        <button
+          class="rounded-md px-2 py-1 text-xs"
+          :class="tab.activePanel === 'properties' ? 'bg-accented' : 'text-muted'"
+          @click="emit('updatePanel', tab, 'properties')"
+        >
+          Properties
+        </button>
+
+        <template v-if="tab.activePanel === 'properties'">
+          <button
+            v-for="propertyTab in dataViewPropertyTabs"
+            :key="propertyTab.id"
+            class="rounded-md px-2 py-1 text-xs"
+            :class="tab.activePropertyTab === propertyTab.id ? 'bg-accented' : 'text-muted'"
+            @click="emit('updatePropertyTab', tab, propertyTab.id)"
+          >
+            {{ propertyTab.label }}
+          </button>
+        </template>
+      </div>
+
+      <UButton
+        size="xs"
+        icon="i-lucide-download"
+        color="neutral"
+        variant="soft"
+        @click="emit('download', tab)"
+      />
+    </div>
+
+    <div v-if="tab.activePanel === 'data'" class="min-h-0 flex-1 overflow-auto">
+      <ChenDataGrid
+        :key="`${tab.id}:${tab.data?.fields?.map(field => field.name).join(',') || ''}:${tab.data?.data?.length || 0}`"
+        :dataset="tab.data"
+      />
+    </div>
+
+    <div v-else class="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div v-if="tab.activePropertyTab === 'basic'" class="grid min-h-0 flex-1 gap-3 overflow-auto p-4 md:grid-cols-2">
+        <div
+          v-for="item in dataViewBasicInfo(tab)"
+          :key="item.label"
+          class="rounded-lg border border-default bg-[var(--workspace-surface-sub-panel)] px-3 py-2"
+        >
+          <div class="mb-1 text-[11px] uppercase tracking-wide text-muted">
+            {{ item.label }}
+          </div>
+          <div class="text-sm">
+            {{ item.value }}
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="tab.activePropertyTab === 'columns'" class="min-h-0 flex-1 overflow-auto p-3">
+        <div class="overflow-hidden rounded-lg border border-default">
+          <table class="w-full text-left text-sm">
+            <thead class="bg-[var(--workspace-surface-sub-panel)] text-muted">
+              <tr>
+                <th class="px-3 py-2 font-medium">
+                  Name
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Type
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Nullable
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Key
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="column in dataViewColumns(tab)" :key="column.name" class="border-t border-default">
+                <td class="px-3 py-2">
+                  {{ column.name }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ column.type }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ column.nullable }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ column.key }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-else-if="tab.activePropertyTab === 'indexes'" class="min-h-0 flex-1 overflow-auto p-3">
+        <div class="overflow-hidden rounded-lg border border-default">
+          <table class="w-full text-left text-sm">
+            <thead class="bg-[var(--workspace-surface-sub-panel)] text-muted">
+              <tr>
+                <th class="px-3 py-2 font-medium">
+                  Name
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Columns
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Unique
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Method
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="index in dataViewIndexes(tab)" :key="index.name" class="border-t border-default">
+                <td class="px-3 py-2">
+                  {{ index.name }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ index.columns }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ index.unique }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ index.method }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-else-if="tab.activePropertyTab === 'foreignKeys'" class="min-h-0 flex-1 overflow-auto p-3">
+        <div v-if="dataViewForeignKeys(tab).length" class="overflow-hidden rounded-lg border border-default">
+          <table class="w-full text-left text-sm">
+            <thead class="bg-[var(--workspace-surface-sub-panel)] text-muted">
+              <tr>
+                <th class="px-3 py-2 font-medium">
+                  Name
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Column
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  References
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="foreignKey in dataViewForeignKeys(tab)" :key="foreignKey.name" class="border-t border-default">
+                <td class="px-3 py-2">
+                  {{ foreignKey.name }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ foreignKey.column }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ foreignKey.references }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div v-else class="grid h-full place-items-center text-sm text-muted">
+          No foreign keys in preview.
+        </div>
+      </div>
+
+      <div v-else-if="tab.activePropertyTab === 'constraints'" class="min-h-0 flex-1 overflow-auto p-3">
+        <div class="overflow-hidden rounded-lg border border-default">
+          <table class="w-full text-left text-sm">
+            <thead class="bg-[var(--workspace-surface-sub-panel)] text-muted">
+              <tr>
+                <th class="px-3 py-2 font-medium">
+                  Name
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Type
+                </th>
+                <th class="px-3 py-2 font-medium">
+                  Definition
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="constraint in dataViewConstraints(tab)" :key="constraint.name" class="border-t border-default">
+                <td class="px-3 py-2">
+                  {{ constraint.name }}
+                </td>
+                <td class="px-3 py-2 text-muted">
+                  {{ constraint.type }}
+                </td>
+                <td class="px-3 py-2 font-ui-mono text-xs text-muted">
+                  {{ constraint.definition }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-else class="min-h-0 flex-1 overflow-auto p-3">
+        <pre class="rounded-lg border border-default bg-[var(--workspace-surface-sub-panel)] p-3 font-ui-mono text-xs text-[var(--app-fg)]">{{ dataViewDDL(tab) }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/ui/chen/components/QueryConsolePanel.vue b/ui/chen/components/QueryConsolePanel.vue
new file mode 100644
index 00000000..5e670ee3
--- /dev/null
+++ b/ui/chen/components/QueryConsolePanel.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { ChenQueryConsoleTab, ChenQueryResultTab } from "~/chen/types";
+
+import QueryResultTabs from "~/chen/components/QueryResultTabs.vue";
+import ChenSqlEditor from "~/chen/components/SqlEditor.client.vue";
+
+const props = defineProps<{
+  tab: ChenQueryConsoleTab
+  contextLabel: string
+}>();
+
+const emit = defineEmits<{
+  run: [tab: ChenQueryConsoleTab]
+  cancel: [tab: ChenQueryConsoleTab]
+  download: [result: ChenQueryResultTab]
+  updateStatement: [tab: ChenQueryConsoleTab, value: string]
+  activateResult: [tab: ChenQueryConsoleTab, id: string]
+}>();
+
+const statementValue = computed({
+  get: () => props.tab.statement,
+  set: (value: string) => emit("updateStatement", props.tab, value)
+});
+</script>
+
+<template>
+  <div class="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_minmax(16rem,42%)]">
+    <div class="min-h-0 border-b border-default p-3">
+      <div class="mb-2 flex items-center gap-2">
+        <UButton icon="i-lucide-play" size="sm" @click="emit('run', tab)" />
+        <UButton icon="i-lucide-square" size="sm" color="neutral" variant="soft" @click="emit('cancel', tab)" />
+        <UBadge color="neutral" variant="subtle">
+          {{ tab.state.currentContext || contextLabel || 'Context' }}
+        </UBadge>
+      </div>
+      <ChenSqlEditor
+        v-model="statementValue"
+        class="h-[calc(100%-2rem)]"
+        @run="emit('run', tab)"
+        @stop="emit('cancel', tab)"
+      />
+    </div>
+
+    <QueryResultTabs
+      :result-tabs="tab.resultTabs"
+      :active-result-tab-id="tab.activeResultTabId"
+      empty-message="Run a query to open results here."
+      @update:active-result-tab-id="emit('activateResult', tab, $event)"
+      @download="emit('download', $event)"
+    />
+  </div>
+</template>
diff --git a/ui/chen/components/QueryResultTabs.vue b/ui/chen/components/QueryResultTabs.vue
new file mode 100644
index 00000000..6983a286
--- /dev/null
+++ b/ui/chen/components/QueryResultTabs.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { ChenQueryResultTab } from "~/chen/types";
+
+import ChenDataGrid from "~/chen/components/DataGrid.client.vue";
+
+const props = defineProps<{
+  resultTabs: ChenQueryResultTab[]
+  activeResultTabId: string
+  emptyMessage: string
+}>();
+
+const emit = defineEmits<{
+  "update:activeResultTabId": [id: string]
+  download: [result: ChenQueryResultTab]
+}>();
+
+const activeResult = computed(() => {
+  return props.resultTabs.find((item) => item.id === props.activeResultTabId) || null;
+});
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-col">
+    <div class="shrink-0 border-b border-default px-2 py-1">
+      <div class="flex items-center gap-1">
+        <button
+          v-for="result in resultTabs"
+          :key="result.id"
+          class="rounded-md px-2 py-1 text-xs"
+          :class="activeResultTabId === result.id ? 'bg-accented' : 'text-muted'"
+          @click="emit('update:activeResultTabId', result.id)"
+        >
+          {{ result.title }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="!resultTabs.length" class="grid min-h-0 flex-1 place-items-center px-6 text-sm text-muted">
+      <div class="text-center">
+        <UIcon name="i-lucide-table-properties" class="mx-auto mb-2 size-5" />
+        <p>{{ emptyMessage }}</p>
+      </div>
+    </div>
+
+    <div
+      v-else-if="activeResult"
+      :key="activeResult.id"
+      class="flex min-h-0 flex-1 flex-col"
+    >
+      <div class="flex shrink-0 items-center justify-between border-b border-default px-3 py-2 text-sm">
+        <div>{{ activeResult.title }}</div>
+        <UButton size="xs" icon="i-lucide-download" color="neutral" variant="soft" @click="emit('download', activeResult)" />
+      </div>
+      <div class="min-h-0 flex-1 overflow-auto">
+        <ChenDataGrid
+          :key="`${activeResult.id}:${activeResult.data?.fields?.map(field => field.name).join(',') || ''}:${activeResult.data?.data?.length || 0}`"
+          :dataset="activeResult.data"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/ui/chen/components/ResourceTreePanel.vue b/ui/chen/components/ResourceTreePanel.vue
new file mode 100644
index 00000000..0b495f00
--- /dev/null
+++ b/ui/chen/components/ResourceTreePanel.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { ChenTreeNode } from "~/chen/types";
+
+import ChenResourceTreeNode from "~/chen/components/ResourceTreeNode.vue";
+import WorkspaceAddSessionPopover from "~/components/Workspace/addSessionPopover.vue";
+
+defineProps<{
+  rootNodes: ChenTreeNode[]
+  selectedKey: string
+  expandedKeys: string[]
+  childrenMap: Record<string, ChenTreeNode[]>
+  loadingChildren: Record<string, boolean>
+  dbType?: string
+  width: number
+}>();
+
+const emit = defineEmits<{
+  refresh: []
+  select: [node: ChenTreeNode]
+  activate: [node: ChenTreeNode]
+  toggle: [node: ChenTreeNode]
+  menu: [payload: { node: ChenTreeNode, event: MouseEvent }]
+}>();
+</script>
+
+<template>
+  <aside
+    class="flex min-h-0 shrink-0 flex-col border-r border-default bg-[var(--workspace-surface-sidebar)]"
+    :style="{ width: `${width}px` }"
+  >
+    <div class="flex items-center justify-between border-b border-default px-3 py-2">
+      <p class="text-xs font-medium text-muted">
+        Database Explorer
+      </p>
+      <div class="flex items-center gap-1">
+        <WorkspaceAddSessionPopover />
+        <UButton icon="i-lucide-refresh-cw" size="xs" color="neutral" variant="ghost" @click="emit('refresh')" />
+      </div>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-auto px-2 py-2">
+      <ul class="space-y-0.5">
+        <ChenResourceTreeNode
+          v-for="node in rootNodes"
+          :key="node.key"
+          :node="node"
+          :selected-key="selectedKey"
+          :expanded-keys="expandedKeys"
+          :children-map="childrenMap"
+          :loading-children="loadingChildren"
+          :db-type="dbType"
+          @select="emit('select', $event)"
+          @activate="emit('activate', $event)"
+          @toggle="emit('toggle', $event)"
+          @menu="emit('menu', $event)"
+        />
+      </ul>
+    </div>
+  </aside>
+</template>
diff --git a/ui/chen/components/WorkspaceTabBar.vue b/ui/chen/components/WorkspaceTabBar.vue
new file mode 100644
index 00000000..9ac322ce
--- /dev/null
+++ b/ui/chen/components/WorkspaceTabBar.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from "@nuxt/ui";
+import type { ChenTabDefinition } from "~/chen/types";
+
+const props = defineProps<{
+  tabs: ChenTabDefinition[]
+  activeTabId: string
+}>();
+
+const emit = defineEmits<{
+  activate: [id: string]
+  close: [id: string]
+  create: [kind: "query" | "console"]
+}>();
+
+const createTabMenuItems = computed<DropdownMenuItem[][]>(() => [[
+  {
+    label: "New Query",
+    icon: "i-lucide-file-code-2",
+    onSelect: () => emit("create", "query")
+  },
+  {
+    label: "New Console",
+    icon: "i-lucide-square-terminal",
+    onSelect: () => emit("create", "console")
+  }
+]]);
+
+function displayWorkspaceTabTitle(tab: ChenTabDefinition) {
+  if (tab.kind !== "data-view") return tab.title;
+  const normalized = tab.title.replace(/^data\s*view\s*[:：\-]?\s*/i, "").trim();
+  return normalized || tab.title;
+}
+</script>
+
+<template>
+  <div class="flex items-center border-b border-default px-2 py-1">
+    <div class="min-w-0 flex-1 overflow-x-auto">
+      <div class="flex w-max min-w-full items-center gap-1">
+        <button
+          v-for="item in props.tabs"
+          :key="item.id"
+          class="flex h-6 shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[11px] transition"
+          :class="props.activeTabId === item.id ? 'bg-accented text-highlighted' : 'text-muted hover:bg-accented/60'"
+          :title="item.title"
+          @click="emit('activate', item.id)"
+        >
+          <UIcon :name="item.icon || 'i-lucide-panel-top'" class="size-3.5" />
+          <span class="max-w-36 truncate">{{ displayWorkspaceTabTitle(item) }}</span>
+          <button class="text-muted hover:text-foreground" @click.stop="emit('close', item.id)">
+            <UIcon name="i-lucide-x" class="size-3" />
+          </button>
+        </button>
+      </div>
+    </div>
+
+    <div class="ml-2 flex shrink-0 items-center gap-1 border-l border-default pl-2">
+      <UDropdownMenu
+        :items="createTabMenuItems"
+        :content="{ align: 'end', side: 'bottom', sideOffset: 6 }"
+        :ui="{ content: 'w-40 p-1' }"
+      >
+        <button
+          type="button"
+          class="flex h-6 shrink-0 items-center justify-center rounded-md px-2 text-muted transition hover:bg-accented/60 hover:text-highlighted"
+          aria-label="Create tab"
+          title="Create tab"
+        >
+          <UIcon name="i-lucide-plus" class="size-3.5" />
+        </button>
+      </UDropdownMenu>
+    </div>
+  </div>
+</template>
diff --git a/ui/chen/composables/useChenAuth.ts b/ui/chen/composables/useChenAuth.ts
new file mode 100644
index 00000000..c0bc314b
--- /dev/null
+++ b/ui/chen/composables/useChenAuth.ts
@@ -0,0 +1,43 @@
+import type { Ref } from "vue";
+import type { ChenProfile } from "~/chen/types";
+import type { WorkspaceSessionTab } from "~/composables/useWorkspaceTabs";
+
+import { authChen, fetchChenProfile } from "~/chen/api";
+
+export function useChenAuth(tab: Ref<WorkspaceSessionTab>) {
+  const profile = ref<ChenProfile | null>(null);
+  const chenToken = ref("");
+  const error = ref("");
+
+  const disableAutoHash = computed(() => {
+    return Boolean((tab.value.payload?.token as Record<string, any> | undefined)?.disableautohash)
+      || Boolean(tab.value.payload?.disableautohash);
+  });
+
+  function ensureTokenId() {
+    const payloadToken = tab.value.payload?.token as Record<string, any> | undefined;
+    return String(payloadToken?.id || tab.value.payload?.id || "");
+  }
+
+  async function authenticate() {
+    error.value = "";
+
+    const tokenId = ensureTokenId();
+    if (!tokenId) throw new Error("Missing chen token");
+
+    const auth = await authChen(tokenId, disableAutoHash.value);
+    chenToken.value = auth.token;
+    profile.value = await fetchChenProfile(auth.token);
+
+    return auth.token;
+  }
+
+  return {
+    chenToken,
+    disableAutoHash,
+    error,
+    profile,
+    authenticate,
+    ensureTokenId
+  };
+}
diff --git a/ui/chen/composables/useChenDataView.ts b/ui/chen/composables/useChenDataView.ts
new file mode 100644
index 00000000..ad3e1610
--- /dev/null
+++ b/ui/chen/composables/useChenDataView.ts
@@ -0,0 +1,41 @@
+import type {
+  ChenDataViewConsoleTab,
+  ChenDataViewDataset,
+  ChenPacket,
+  ChenQueryResultTab
+} from "~/chen/types";
+
+export function useChenDataView() {
+  function handleDataViewConsolePacket(tab: ChenDataViewConsoleTab, packet: ChenPacket) {
+    switch (packet.type) {
+      case "new_data_view":
+        tab.meta = packet.data;
+        tab.title = packet.data?.title || tab.title;
+        break;
+      case "update_data_view":
+        tab.data = packet.data?.data || null;
+        break;
+    }
+  }
+
+  function downloadDataViewCsv(result: ChenQueryResultTab | ChenDataViewConsoleTab) {
+    const dataset: ChenDataViewDataset | null = "data" in result ? result.data : null;
+    if (!dataset?.fields?.length) return;
+    const header = dataset.fields.map((item) => item.name).join(",");
+    const rows = (dataset.data || []).map((row) => {
+      return dataset.fields.map((field) => JSON.stringify(row[field.name] ?? "")).join(",");
+    });
+    const blob = new Blob([[header, ...rows].join("\n")], { type: "text/csv;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = `${result.title || "query-result"}.csv`;
+    anchor.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return {
+    downloadDataViewCsv,
+    handleDataViewConsolePacket
+  };
+}
diff --git a/ui/chen/composables/useChenDataViewDerivedMeta.ts b/ui/chen/composables/useChenDataViewDerivedMeta.ts
new file mode 100644
index 00000000..370b7c7c
--- /dev/null
+++ b/ui/chen/composables/useChenDataViewDerivedMeta.ts
@@ -0,0 +1,82 @@
+import type { Ref } from "vue";
+import type { ChenDataViewConsoleTab } from "~/chen/types";
+
+// Derived preview metadata only. These values are inferred from the current
+// result set and are not authoritative backend table metadata.
+export function useChenDataViewDerivedMeta(profileDbType: Ref<string | undefined>, protocol: Ref<string | undefined>) {
+  const dataViewPropertyTabs = [
+    { id: "basic", label: "Basic Info" },
+    { id: "columns", label: "Columns" },
+    { id: "indexes", label: "Indexes" },
+    { id: "foreignKeys", label: "Foreign Keys" },
+    { id: "constraints", label: "Constraints" },
+    { id: "ddl", label: "DDL" }
+  ] as const;
+
+  function tableLabelForProperties(tab: ChenDataViewConsoleTab) {
+    return tab.meta?.table || tab.meta?.title || tab.title;
+  }
+
+  function dataViewBasicInfo(tab: ChenDataViewConsoleTab) {
+    return [
+      { label: "Name", value: tableLabelForProperties(tab) },
+      { label: "Schema", value: tab.meta?.schema || "public" },
+      { label: "Type", value: "Table" },
+      { label: "Database", value: profileDbType.value || protocol.value || "-" },
+      { label: "Rows (preview)", value: String(tab.data?.data?.length || 0) }
+    ];
+  }
+
+  function dataViewColumns(tab: ChenDataViewConsoleTab) {
+    const fields = tab.data?.fields || [];
+    return fields.map((field, index) => ({
+      name: field.name,
+      type: "text",
+      nullable: index % 2 === 0 ? "YES" : "NO",
+      key: index === 0 ? "PK" : ""
+    }));
+  }
+
+  function dataViewIndexes(tab: ChenDataViewConsoleTab) {
+    const first = tab.data?.fields?.[0]?.name || "id";
+    return [
+      { name: `${tableLabelForProperties(tab)}_pkey`, columns: first, unique: "YES", method: "btree" }
+    ];
+  }
+
+  function dataViewForeignKeys(tab: ChenDataViewConsoleTab) {
+    const candidate = tab.data?.fields?.find((field) => /_id$/i.test(field.name));
+    if (!candidate) return [];
+    return [
+      { name: `fk_${candidate.name}`, column: candidate.name, references: "other_table(id)" }
+    ];
+  }
+
+  function dataViewConstraints(tab: ChenDataViewConsoleTab) {
+    const first = tab.data?.fields?.[0]?.name || "id";
+    return [
+      { name: `${tableLabelForProperties(tab)}_pkey`, type: "PRIMARY KEY", definition: `PRIMARY KEY (${first})` }
+    ];
+  }
+
+  function dataViewDDL(tab: ChenDataViewConsoleTab) {
+    const tableName = tableLabelForProperties(tab);
+    const schema = tab.meta?.schema || "public";
+    const fields = tab.data?.fields || [];
+    const body = fields.length
+      ? fields.map((field, index) => `  ${field.name} text${index === 0 ? " primary key" : ""}`).join(",\n")
+      : "  id text primary key";
+    return `CREATE TABLE ${schema}.${tableName} (\n${body}\n);`;
+  }
+
+  return {
+    dataViewPropertyTabs,
+    dataViewBasicInfo,
+    dataViewColumns,
+    dataViewConstraints,
+    dataViewDDL,
+    dataViewForeignKeys,
+    dataViewIndexes,
+    tableLabelForProperties
+  };
+}
diff --git a/ui/chen/composables/useChenQueryConsole.ts b/ui/chen/composables/useChenQueryConsole.ts
new file mode 100644
index 00000000..8c27c63f
--- /dev/null
+++ b/ui/chen/composables/useChenQueryConsole.ts
@@ -0,0 +1,106 @@
+import type {
+  ChenPacket,
+  ChenPromptConsoleTab,
+  ChenQueryConsoleTab,
+  ChenQueryLikeWorkspaceTab
+} from "~/chen/types";
+
+import { newChenWorkspaceId } from "~/chen/composables/useChenWorkspaceTabs";
+
+export function useChenQueryConsole(
+  sendConsoleAction: (tab: ChenQueryLikeWorkspaceTab, type: string, data?: any) => void
+) {
+  function formatLogEntry(value: unknown) {
+    if (typeof value === "string") return value;
+    if (value == null) return "";
+
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  }
+
+  function appendLog(tab: { logs: string[] }, line: unknown) {
+    const content = formatLogEntry(line);
+    if (!content) return;
+    tab.logs.push(content);
+    if (tab.logs.length > 400) {
+      tab.logs.splice(0, tab.logs.length - 400);
+    }
+  }
+
+  function updateQueryResult(tab: ChenQueryLikeWorkspaceTab, meta: { title: string, [key: string]: any }, data?: any) {
+    let resultTab = tab.resultTabs.find((item) => item.title === meta.title);
+    if (!resultTab) {
+      resultTab = {
+        id: newChenWorkspaceId("result"),
+        title: meta.title,
+        meta,
+        data: data || null
+      };
+      tab.resultTabs.push(resultTab);
+    } else if (data) {
+      resultTab.data = data;
+    }
+
+    if (data) resultTab.data = data;
+    tab.activeResultTabId = resultTab.id;
+  }
+
+  function removeQueryResult(tab: ChenQueryLikeWorkspaceTab, title: string) {
+    tab.resultTabs = tab.resultTabs.filter((item) => item.title !== title);
+    if (!tab.resultTabs.some((item) => item.id === tab.activeResultTabId)) {
+      tab.activeResultTabId = tab.resultTabs[0]?.id || "";
+    }
+  }
+
+  function handleQueryConsolePacket(tab: ChenQueryLikeWorkspaceTab, packet: ChenPacket) {
+    switch (packet.type) {
+      case "new_data_view":
+        updateQueryResult(tab, packet.data);
+        break;
+      case "update_data_view":
+        if (packet.data?.title) updateQueryResult(tab, { title: packet.data.title }, packet.data.data);
+        break;
+      case "close_data_view":
+        if (typeof packet.data === "string") removeQueryResult(tab, packet.data);
+        if (packet.data?.sql) removeQueryResult(tab, packet.data.sql);
+        break;
+    }
+  }
+
+  function runQueryTab(tab: ChenQueryConsoleTab) {
+    const sql = tab.statement.trim();
+    if (!sql) return;
+    sendConsoleAction(tab, "query_console_action", { action: "run_sql", data: sql });
+  }
+
+  function runConsoleTab(tab: ChenPromptConsoleTab) {
+    const sql = tab.pendingSql.trim();
+    if (!sql) return;
+    tab.historyEntries.push({
+      id: newChenWorkspaceId("history"),
+      sql
+    });
+    if (tab.historyEntries.length > 200) {
+      tab.historyEntries.splice(0, tab.historyEntries.length - 200);
+    }
+    sendConsoleAction(tab, "query_console_action", { action: "run_sql", data: sql });
+    tab.pendingSql = "";
+  }
+
+  function cancelQueryLikeTab(tab: ChenQueryLikeWorkspaceTab) {
+    sendConsoleAction(tab, "query_console_action", { action: "cancel" });
+  }
+
+  return {
+    appendLog,
+    cancelQueryLikeTab,
+    handleQueryConsolePacket,
+    removeQueryResult,
+    runConsoleTab,
+    runQueryTab,
+    updateQueryResult
+  };
+}
diff --git a/ui/chen/composables/useChenResourceTree.ts b/ui/chen/composables/useChenResourceTree.ts
new file mode 100644
index 00000000..a4030d97
--- /dev/null
+++ b/ui/chen/composables/useChenResourceTree.ts
@@ -0,0 +1,101 @@
+import type { Ref } from "vue";
+import type { ChenTreeNode } from "~/chen/types";
+
+import { fetchChenTreeChildren, runChenAction } from "~/chen/api";
+
+export function useChenResourceTree(chenToken: Ref<string>) {
+  const rootNodes = ref<ChenTreeNode[]>([]);
+  const childrenMap = reactive<Record<string, ChenTreeNode[]>>({});
+  const loadingChildren = reactive<Record<string, boolean>>({});
+  const expandedKeys = ref<string[]>([]);
+  const selectedNodeKey = ref("");
+
+  function findNodeByKey(key: string, nodes = rootNodes.value): ChenTreeNode | null {
+    for (const node of nodes) {
+      if (node.key === key) return node;
+      const children = node.children || [];
+      const match = findNodeByKey(key, children);
+      if (match) return match;
+    }
+
+    return null;
+  }
+
+  function normalizeTreeNodes(items: ChenTreeNode[]) {
+    return items.map((item) => {
+      if (item.type === "table") {
+        return { ...item, leaf: true, children: undefined };
+      }
+
+      return {
+        ...item,
+        leaf: item.hasChildren === false,
+        children: Array.isArray(item.children) ? normalizeTreeNodes(item.children) : undefined
+      };
+    });
+  }
+
+  async function loadNodeChildren(node?: ChenTreeNode | null, force = false) {
+    const key = node?.key || "__root__";
+    if (loadingChildren[key]) return;
+    loadingChildren[key] = true;
+
+    try {
+      const items = normalizeTreeNodes(await fetchChenTreeChildren(chenToken.value, node, force));
+      if (!node) {
+        rootNodes.value = items;
+        return;
+      }
+
+      childrenMap[node.key] = items;
+      node.children = items;
+    } finally {
+      loadingChildren[key] = false;
+    }
+  }
+
+  async function refreshRoot() {
+    await loadNodeChildren(null, true);
+  }
+
+  async function expandInitialTree() {
+    if (!rootNodes.value[0]?.key) return;
+
+    expandedKeys.value = [rootNodes.value[0].key];
+    if (rootNodes.value.length === 1 && rootNodes.value[0].hasChildren !== false) {
+      await loadNodeChildren(rootNodes.value[0]);
+      const firstChildKey = rootNodes.value[0].children?.[0]?.key;
+      if (firstChildKey) {
+        expandedKeys.value = [rootNodes.value[0].key, firstChildKey];
+      }
+    }
+  }
+
+  function toggleTreeNode(node: ChenTreeNode) {
+    expandedKeys.value = expandedKeys.value.includes(node.key)
+      ? expandedKeys.value.filter((key) => key !== node.key)
+      : [...expandedKeys.value, node.key];
+
+    if (!node.children?.length && node.hasChildren !== false) {
+      void loadNodeChildren(node);
+    }
+  }
+
+  async function runTreeAction(node: ChenTreeNode, action: string) {
+    return runChenAction(chenToken.value, node, action);
+  }
+
+  return {
+    childrenMap,
+    expandedKeys,
+    loadingChildren,
+    rootNodes,
+    selectedNodeKey,
+    expandInitialTree,
+    findNodeByKey,
+    loadNodeChildren,
+    refreshRoot,
+    runTreeAction,
+    toggleTreeNode
+  };
+}
diff --git a/ui/chen/composables/useChenSession.ts b/ui/chen/composables/useChenSession.ts
new file mode 100644
index 00000000..580af408
--- /dev/null
+++ b/ui/chen/composables/useChenSession.ts
@@ -0,0 +1,86 @@
+import type { ChenPacket } from "~/chen/types";
+
+interface UseChenSessionOptions {
+  authenticate: () => Promise<string>
+  connectSessionSocket: (token: string) => WebSocket
+  markConnected: () => void
+  onBeforeReady: () => Promise<void>
+  onAfterReady: () => Promise<void>
+}
+
+export function useChenSession(options: UseChenSessionOptions) {
+  const toast = useToast();
+  const ready = ref(false);
+  const loading = ref(true);
+  const error = ref("");
+  const dialogMessage = ref("");
+  const sessionSocket = shallowRef<WebSocket | null>(null);
+
+  async function bootstrapSession() {
+    loading.value = true;
+    error.value = "";
+
+    try {
+      const token = await options.authenticate();
+      const socket = options.connectSessionSocket(token);
+      sessionSocket.value = socket;
+
+      socket.onmessage = async (event) => {
+        const packet = JSON.parse(event.data) as ChenPacket;
+        switch (packet.type) {
+          case "show_dialog":
+            dialogMessage.value = packet.data?.body || packet.data?.title || "";
+            break;
+          case "close_dialog":
+            dialogMessage.value = "";
+            break;
+          case "show_message":
+            toast.add({
+              title: packet.data?.level || "Message",
+              description: packet.data?.message || "",
+              color: packet.data?.level?.toLowerCase() === "error" ? "error" : "primary"
+            });
+            break;
+          case "set_ready":
+            await options.onBeforeReady();
+            ready.value = true;
+            loading.value = false;
+            options.markConnected();
+            await options.onAfterReady();
+            break;
+          case "close_session":
+            error.value = "Session closed";
+            ready.value = false;
+            break;
+        }
+      };
+
+      socket.onerror = () => {
+        error.value = "Chen session websocket error";
+        loading.value = false;
+      };
+
+      socket.onclose = () => {
+        if (!ready.value) error.value = error.value || "Chen session closed";
+      };
+    } catch (cause) {
+      error.value = cause instanceof Error ? cause.message : String(cause);
+      loading.value = false;
+    }
+  }
+
+  function cleanupSession() {
+    sessionSocket.value?.close();
+    sessionSocket.value = null;
+  }
+
+  return {
+    dialogMessage,
+    error,
+    loading,
+    ready,
+    sessionSocket,
+    bootstrapSession,
+    cleanupSession
+  };
+}
diff --git a/ui/chen/composables/useChenWebSocket.ts b/ui/chen/composables/useChenWebSocket.ts
new file mode 100644
index 00000000..b8e6e433
--- /dev/null
+++ b/ui/chen/composables/useChenWebSocket.ts
@@ -0,0 +1,55 @@
+import type { ChenSocketAction } from "~/chen/types";
+
+export function useChenWebSocket() {
+  const pendingSocketActions = reactive<Record<string, ChenSocketAction[]>>({});
+
+  function chenHttpPath(path: string) {
+    return withWebSitePrefix(`/chen${path.startsWith("/") ? path : `/${path}`}`);
+  }
+
+  function chenWsUrl(path: "session" | "console") {
+    const origin = window.location.origin.replace(/^http/, "ws");
+    return `${origin}${chenHttpPath(`/ws/${path}`)}`;
+  }
+
+  function connectWebSocket(path: "session" | "console", token: string) {
+    return new WebSocket(chenWsUrl(path), token);
+  }
+
+  function sendJson(socket: WebSocket, payload: unknown) {
+    socket.send(JSON.stringify(payload));
+  }
+
+  function queueAction(tabId: string, action: ChenSocketAction) {
+    pendingSocketActions[tabId] ||= [];
+    pendingSocketActions[tabId].push(action);
+  }
+
+  function flushQueuedActions(tabId: string, socket: WebSocket) {
+    const queue = pendingSocketActions[tabId] || [];
+    queue.forEach((action) => sendJson(socket, action));
+    pendingSocketActions[tabId] = [];
+  }
+
+  function clearQueue(tabId: string) {
+    delete pendingSocketActions[tabId];
+  }
+
+  function closeSocket(socket?: WebSocket | null) {
+    if (!socket) return;
+    if (socket.readyState === WebSocket.CLOSING || socket.readyState === WebSocket.CLOSED) return;
+    socket.close();
+  }
+
+  return {
+    pendingSocketActions,
+    chenHttpPath,
+    chenWsUrl,
+    clearQueue,
+    closeSocket,
+    connectWebSocket,
+    flushQueuedActions,
+    queueAction,
+    sendJson
+  };
+}
diff --git a/ui/chen/composables/useChenWorkspaceTabs.ts b/ui/chen/composables/useChenWorkspaceTabs.ts
new file mode 100644
index 00000000..63934320
--- /dev/null
+++ b/ui/chen/composables/useChenWorkspaceTabs.ts
@@ -0,0 +1,145 @@
+import type {
+  ChenDataViewConsoleTab,
+  ChenPromptConsoleTab,
+  ChenQueryConsoleTab,
+  ChenTabDefinition,
+  ChenWorkspaceTab
+} from "~/chen/types";
+
+export function newChenWorkspaceId(prefix: string) {
+  return `${prefix}:${Date.now()}:${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function useChenWorkspaceTabs() {
+  const workspaceTabs = ref<ChenTabDefinition[]>([]);
+  const activeWorkspaceTabId = ref("");
+  const workspaceTabState = reactive<Record<string, ChenWorkspaceTab>>({});
+
+  const activeWorkspaceTab = computed(() => {
+    return activeWorkspaceTabId.value ? workspaceTabState[activeWorkspaceTabId.value] || null : null;
+  });
+
+  function nextTabTitle(prefix: string) {
+    const count = workspaceTabs.value.filter((item) => item.title === prefix || item.title.startsWith(`${prefix} `)).length;
+    return count === 0 ? prefix : `${prefix} ${count + 1}`;
+  }
+
+  function displayWorkspaceTabTitle(tab: ChenTabDefinition) {
+    if (tab.kind !== "data-view") return tab.title;
+    const normalized = tab.title.replace(/^data\s*view\s*[:：\-]?\s*/i, "").trim();
+    return normalized || tab.title;
+  }
+
+  function registerTab(tab: ChenWorkspaceTab) {
+    workspaceTabs.value.push(tab);
+    workspaceTabState[tab.id] = tab;
+    activeWorkspaceTabId.value = tab.id;
+    return tab;
+  }
+
+  function openQueryTab(nodeKey: string, title = "Query", reuseExisting = true) {
+    const existingTab = reuseExisting
+      ? workspaceTabs.value.find((item) => item.kind === "query" && item.nodeKey === nodeKey)
+      : null;
+    if (existingTab) {
+      activeWorkspaceTabId.value = existingTab.id;
+      return workspaceTabState[existingTab.id] || null;
+    }
+
+    const id = newChenWorkspaceId("query");
+    const tab: ChenQueryConsoleTab = {
+      id,
+      title,
+      icon: "i-lucide-terminal-square",
+      kind: "query",
+      nodeKey,
+      statement: "",
+      state: {},
+      logs: [],
+      resultTabs: [],
+      activeResultTabId: "",
+      socket: null
+    };
+
+    return registerTab(tab);
+  }
+
+  function openConsoleTab(nodeKey: string, title = "Console") {
+    const id = newChenWorkspaceId("console");
+    const tab: ChenPromptConsoleTab = {
+      id,
+      title,
+      icon: "i-lucide-square-terminal",
+      kind: "console",
+      nodeKey,
+      pendingSql: "",
+      state: {},
+      logs: [],
+      historyEntries: [],
+      resultTabs: [],
+      activeResultTabId: "",
+      socket: null
+    };
+
+    return registerTab(tab);
+  }
+
+  function openDataViewTab(nodeKey: string, title = "Data View") {
+    const existingTab = workspaceTabs.value.find((item) => item.kind === "data-view" && item.nodeKey === nodeKey);
+    if (existingTab) {
+      activeWorkspaceTabId.value = existingTab.id;
+      return workspaceTabState[existingTab.id] || null;
+    }
+
+    const id = newChenWorkspaceId("data-view");
+    const tab: ChenDataViewConsoleTab = {
+      id,
+      title,
+      icon: "i-lucide-table-properties",
+      kind: "data-view",
+      nodeKey,
+      meta: null,
+      data: null,
+      state: {},
+      logs: [],
+      activePanel: "data",
+      activePropertyTab: "basic",
+      socket: null
+    };
+
+    return registerTab(tab);
+  }
+
+  function closeTab(id: string) {
+    const tab = workspaceTabState[id];
+    tab?.socket?.close();
+    delete workspaceTabState[id];
+    workspaceTabs.value = workspaceTabs.value.filter((item) => item.id !== id);
+    if (activeWorkspaceTabId.value === id) {
+      activeWorkspaceTabId.value = workspaceTabs.value.at(-1)?.id || "";
+    }
+  }
+
+  function closeAllTabs() {
+    Object.values(workspaceTabState).forEach((tab) => tab.socket?.close());
+  }
+
+  function setActiveTab(id: string) {
+    activeWorkspaceTabId.value = id;
+  }
+
+  return {
+    activeWorkspaceTab,
+    activeWorkspaceTabId,
+    workspaceTabs,
+    workspaceTabState,
+    closeAllTabs,
+    closeTab,
+    displayWorkspaceTabTitle,
+    nextTabTitle,
+    openConsoleTab,
+    openDataViewTab,
+    openQueryTab,
+    setActiveTab
+  };
+}
diff --git a/ui/chen/types.ts b/ui/chen/types.ts
index 67bfb41b..31a7b9f0 100644
--- a/ui/chen/types.ts
+++ b/ui/chen/types.ts
@@ -64,3 +64,64 @@ export interface ChenConsoleState {
   pinned?: boolean
   [key: string]: any
 }
+
+export interface ChenQueryResultTab {
+  id: string
+  title: string
+  meta: ChenDataViewMeta
+  data: ChenDataViewDataset | null
+}
+
+export interface ChenConsoleHistoryEntry {
+  id: string
+  sql: string
+}
+
+export interface ChenQueryConsoleTab extends ChenTabDefinition {
+  kind: "query"
+  statement: string
+  state: ChenConsoleState
+  logs: string[]
+  resultTabs: ChenQueryResultTab[]
+  activeResultTabId: string
+  socket: WebSocket | null
+}
+
+export interface ChenPromptConsoleTab extends ChenTabDefinition {
+  kind: "console"
+  pendingSql: string
+  state: ChenConsoleState
+  logs: string[]
+  historyEntries: ChenConsoleHistoryEntry[]
+  resultTabs: ChenQueryResultTab[]
+  activeResultTabId: string
+  socket: WebSocket | null
+}
+
+export type ChenQueryLikeWorkspaceTab = ChenQueryConsoleTab | ChenPromptConsoleTab;
+
+export type ChenDataViewPropertyTab
+  = | "basic"
+    | "columns"
+    | "indexes"
+    | "foreignKeys"
+    | "constraints"
+    | "ddl";
+
+export interface ChenDataViewConsoleTab extends ChenTabDefinition {
+  kind: "data-view"
+  meta: ChenDataViewMeta | null
+  data: ChenDataViewDataset | null
+  state: ChenConsoleState
+  logs: string[]
+  activePanel: "data" | "properties"
+  activePropertyTab: ChenDataViewPropertyTab
+  socket: WebSocket | null
+}
+
+export type ChenWorkspaceTab = ChenQueryLikeWorkspaceTab | ChenDataViewConsoleTab;
+
+export interface ChenSocketAction {
+  type: string
+  data?: any
+}
diff --git a/ui/chen/workspaces/DatabaseSessionSurface.vue b/ui/chen/workspaces/DatabaseSessionSurface.vue
index 27fbddb6..2495d87c 100644
--- a/ui/chen/workspaces/DatabaseSessionSurface.vue
+++ b/ui/chen/workspaces/DatabaseSessionSurface.vue
@@ -1,428 +1,126 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from "@nuxt/ui";
 import type {
-  ChenConsoleState,
-  ChenDataViewDataset,
-  ChenDataViewMeta,
   ChenPacket,
-  ChenProfile,
-  ChenTabDefinition,
-  ChenTreeNode
+  ChenPromptConsoleTab,
+  ChenQueryConsoleTab,
+  ChenQueryLikeWorkspaceTab,
+  ChenTreeNode,
+  ChenWorkspaceTab
 } from "~/chen/types";
 import type { WorkspaceSessionTab } from "~/composables/useWorkspaceTabs";
 
-import { authChen, fetchChenProfile, fetchChenTreeChildren, runChenAction } from "~/chen/api";
-import ChenDataGrid from "~/chen/components/DataGrid.client.vue";
-import ChenResourceTreeNode from "~/chen/components/ResourceTreeNode.vue";
-import ChenSqlEditor from "~/chen/components/SqlEditor.client.vue";
-import WorkspaceAddSessionPopover from "~/components/Workspace/addSessionPopover.vue";
+import ChenSessionState from "~/chen/components/ChenSessionState.vue";
+import ConsolePanel from "~/chen/components/ConsolePanel.vue";
+import DataViewPanel from "~/chen/components/DataViewPanel.vue";
+import QueryConsolePanel from "~/chen/components/QueryConsolePanel.vue";
+import ResourceTreePanel from "~/chen/components/ResourceTreePanel.vue";
+import WorkspaceTabBar from "~/chen/components/WorkspaceTabBar.vue";
+import { useChenAuth } from "~/chen/composables/useChenAuth";
+import { useChenDataView } from "~/chen/composables/useChenDataView";
+import { useChenQueryConsole } from "~/chen/composables/useChenQueryConsole";
+import { useChenResourceTree } from "~/chen/composables/useChenResourceTree";
+import { useChenSession } from "~/chen/composables/useChenSession";
+import { useChenWebSocket } from "~/chen/composables/useChenWebSocket";
+import { useChenWorkspaceTabs } from "~/chen/composables/useChenWorkspaceTabs";
 
 const props = defineProps<{ tab: WorkspaceSessionTab }>();
 
 const toast = useToast();
 const { markSessionConnected } = useWorkspaceTabs();
+const tabRef = toRef(props, "tab");
 
-const rootNodes = ref<ChenTreeNode[]>([]);
-const childrenMap = reactive<Record<string, ChenTreeNode[]>>({});
-const loadingChildren = reactive<Record<string, boolean>>({});
-const expandedKeys = ref<string[]>([]);
-const selectedNodeKey = ref("");
 const sidebarWidth = ref(280);
 const resizing = ref(false);
 
-const ready = ref(false);
-const loading = ref(true);
-const error = ref("");
-const dialogMessage = ref("");
-const profile = ref<ChenProfile | null>(null);
-const chenToken = ref("");
-
-const workspaceTabs = ref<ChenTabDefinition[]>([]);
-const activeWorkspaceTabId = ref("");
-
-const sessionSocket = shallowRef<WebSocket | null>(null);
-const pendingSocketActions = reactive<Record<string, Array<{ type: string, data?: any }>>>({});
-
-interface QueryResultTab {
-  id: string
-  title: string
-  meta: ChenDataViewMeta
-  data: ChenDataViewDataset | null
-}
-
-interface ConsoleHistoryEntry {
-  id: string
-  sql: string
-}
-
-interface QueryConsoleTab extends ChenTabDefinition {
-  kind: "query"
-  statement: string
-  state: ChenConsoleState
-  logs: string[]
-  resultTabs: QueryResultTab[]
-  activeResultTabId: string
-  socket: WebSocket | null
-}
-
-interface ConsoleWorkspaceTab extends ChenTabDefinition {
-  kind: "console"
-  pendingSql: string
-  state: ChenConsoleState
-  logs: string[]
-  historyEntries: ConsoleHistoryEntry[]
-  resultTabs: QueryResultTab[]
-  activeResultTabId: string
-  socket: WebSocket | null
-}
-
-interface DataViewConsoleTab extends ChenTabDefinition {
-  kind: "data-view"
-  meta: ChenDataViewMeta | null
-  data: ChenDataViewDataset | null
-  state: ChenConsoleState
-  logs: string[]
-  activePanel: "data" | "properties"
-  activePropertyTab: "basic" | "columns" | "indexes" | "foreignKeys" | "constraints" | "ddl"
-  socket: WebSocket | null
-}
-
-type QueryLikeWorkspaceTab = QueryConsoleTab | ConsoleWorkspaceTab;
-type ChenWorkspaceTab = QueryLikeWorkspaceTab | DataViewConsoleTab;
-
-const workspaceTabState = reactive<Record<string, ChenWorkspaceTab>>({});
-
-const activeWorkspaceTab = computed(() => {
-  return activeWorkspaceTabId.value ? workspaceTabState[activeWorkspaceTabId.value] || null : null;
-});
+const auth = useChenAuth(tabRef);
+const chenSocket = useChenWebSocket();
+const tree = useChenResourceTree(auth.chenToken);
+const workspace = useChenWorkspaceTabs();
+const dataView = useChenDataView();
 
 const currentWorkspaceNodeKey = computed(() => {
-  return selectedNodeKey.value || activeWorkspaceTab.value?.nodeKey || rootNodes.value[0]?.key || "";
+  return tree.selectedNodeKey.value || workspace.activeWorkspaceTab.value?.nodeKey || tree.rootNodes.value[0]?.key || "";
 });
-const currentWorkspaceNode = computed(() => findNodeByKey(currentWorkspaceNodeKey.value));
+const currentWorkspaceNode = computed(() => tree.findNodeByKey(currentWorkspaceNodeKey.value));
+const currentContextLabel = computed(() => currentWorkspaceNode.value?.label || currentWorkspaceNode.value?.name || "");
 const consolePromptLabel = computed(() => {
-  const dbType = `${profile.value?.dbType || props.tab.protocol || ""}`.toLowerCase();
+  const dbType = `${auth.profile.value?.dbType || props.tab.protocol || ""}`.toLowerCase();
   if (dbType.includes("postgres")) return "psql>";
   return "mysql>";
 });
-const createTabMenuItems = computed<DropdownMenuItem[][]>(() => [[
-  {
-    label: "New Query",
-    icon: "i-lucide-file-code-2",
-    onSelect: () => createWorkspaceTab("query")
-  },
-  {
-    label: "New Console",
-    icon: "i-lucide-square-terminal",
-    onSelect: () => createWorkspaceTab("console")
-  }
-]]);
-const activeQueryResult = computed(() => {
-  const tab = activeWorkspaceTab.value;
-  if (!tab || (tab.kind !== "query" && tab.kind !== "console")) return null;
-  return tab.resultTabs.find((item) => item.id === tab.activeResultTabId) || null;
+const activeQueryTab = computed(() => {
+  const tab = workspace.activeWorkspaceTab.value;
+  return tab?.kind === "query" ? tab : null;
 });
-const dataViewPropertyTabs = [
-  { id: "basic", label: "Basic Info" },
-  { id: "columns", label: "Columns" },
-  { id: "indexes", label: "Indexes" },
-  { id: "foreignKeys", label: "Foreign Keys" },
-  { id: "constraints", label: "Constraints" },
-  { id: "ddl", label: "DDL" }
-] as const;
-
-const disableAutoHash = computed(() => {
-  return Boolean((props.tab.payload?.token as Record<string, any> | undefined)?.disableautohash)
-    || Boolean(props.tab.payload?.disableautohash);
+const activeConsoleTab = computed(() => {
+  const tab = workspace.activeWorkspaceTab.value;
+  return tab?.kind === "console" ? tab : null;
+});
+const activeDataViewTab = computed(() => {
+  const tab = workspace.activeWorkspaceTab.value;
+  return tab?.kind === "data-view" ? tab : null;
 });
 
-function ensureTokenId() {
-  const payloadToken = props.tab.payload?.token as Record<string, any> | undefined;
-  return String(payloadToken?.id || props.tab.payload?.id || "");
-}
-
-function chenHttpPath(path: string) {
-  return withWebSitePrefix(`/chen${path.startsWith("/") ? path : `/${path}`}`);
-}
-
-function chenWsUrl(path: "session" | "console") {
-  const origin = window.location.origin.replace(/^http/, "ws");
-  return `${origin}${chenHttpPath(`/ws/${path}`)}`;
-}
-
-function connectWebSocket(path: "session" | "console", token: string) {
-  return new WebSocket(chenWsUrl(path), token);
-}
-
-function findNodeByKey(key: string, nodes = rootNodes.value): ChenTreeNode | null {
-  for (const node of nodes) {
-    if (node.key === key) return node;
-    const children = node.children || [];
-    const match = findNodeByKey(key, children);
-    if (match) return match;
-  }
-
-  return null;
-}
-
-function normalizeTreeNodes(items: ChenTreeNode[]) {
-  return items.map((item) => {
-    if (item.type === "table") {
-      return { ...item, leaf: true, children: undefined };
-    }
-
-    return {
-      ...item,
-      leaf: item.hasChildren === false,
-      children: Array.isArray(item.children) ? normalizeTreeNodes(item.children) : undefined
-    };
-  });
-}
-
-async function loadNodeChildren(node?: ChenTreeNode | null, force = false) {
-  const key = node?.key || "__root__";
-  if (loadingChildren[key]) return;
-  loadingChildren[key] = true;
-
-  try {
-    const items = normalizeTreeNodes(await fetchChenTreeChildren(chenToken.value, node, force));
-    if (!node) {
-      rootNodes.value = items;
-      return;
-    }
-
-    childrenMap[node.key] = items;
-    node.children = items;
-  } finally {
-    loadingChildren[key] = false;
-  }
-}
-
-function newWorkspaceId(prefix: string) {
-  return `${prefix}:${Date.now()}:${Math.random().toString(36).slice(2, 8)}`;
-}
-
-function formatLogEntry(value: unknown) {
-  if (typeof value === "string") return value;
-  if (value == null) return "";
-
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}
-
-function appendLog(tabId: string, line: unknown) {
-  const tab = workspaceTabState[tabId];
-  if (!tab) return;
-  const content = formatLogEntry(line);
-  if (!content) return;
-  tab.logs.push(content);
-  if (tab.logs.length > 400) {
-    tab.logs.splice(0, tab.logs.length - 400);
+const queryConsole = useChenQueryConsole(sendConsoleAction);
+const session = useChenSession({
+  authenticate: auth.authenticate,
+  connectSessionSocket: (token) => chenSocket.connectWebSocket("session", token),
+  markConnected: () => markSessionConnected(props.tab.id),
+  onBeforeReady: async () => {
+    await tree.loadNodeChildren(null);
+  },
+  onAfterReady: async () => {
+    await tree.expandInitialTree();
   }
-}
-
-function nextTabTitle(prefix: string) {
-  const count = workspaceTabs.value.filter((item) => item.title === prefix || item.title.startsWith(`${prefix} `)).length;
-  return count === 0 ? prefix : `${prefix} ${count + 1}`;
-}
-
-function displayWorkspaceTabTitle(tab: ChenTabDefinition) {
-  if (tab.kind !== "data-view") return tab.title;
-  const normalized = tab.title.replace(/^data\s*view\s*[:：\-]?\s*/i, "").trim();
-  return normalized || tab.title;
-}
-
-function tableLabelForProperties(tab: DataViewConsoleTab) {
-  return tab.meta?.table || tab.meta?.title || displayWorkspaceTabTitle(tab);
-}
-
-function dataViewBasicInfo(tab: DataViewConsoleTab) {
-  return [
-    { label: "Name", value: tableLabelForProperties(tab) },
-    { label: "Schema", value: tab.meta?.schema || "public" },
-    { label: "Type", value: "Table" },
-    { label: "Database", value: profile.value?.dbType || props.tab.protocol || "-" },
-    { label: "Rows (preview)", value: String(tab.data?.data?.length || 0) }
-  ];
-}
-
-function dataViewColumns(tab: DataViewConsoleTab) {
-  const fields = tab.data?.fields || [];
-  return fields.map((field, index) => ({
-    name: field.name,
-    type: "text",
-    nullable: index % 2 === 0 ? "YES" : "NO",
-    key: index === 0 ? "PK" : ""
-  }));
-}
-
-function dataViewIndexes(tab: DataViewConsoleTab) {
-  const first = tab.data?.fields?.[0]?.name || "id";
-  return [
-    { name: `${tableLabelForProperties(tab)}_pkey`, columns: first, unique: "YES", method: "btree" }
-  ];
-}
-
-function dataViewForeignKeys(tab: DataViewConsoleTab) {
-  const candidate = tab.data?.fields?.find((field) => /_id$/i.test(field.name));
-  if (!candidate) return [];
-  return [
-    { name: `fk_${candidate.name}`, column: candidate.name, references: "other_table(id)" }
-  ];
-}
-
-function dataViewConstraints(tab: DataViewConsoleTab) {
-  const first = tab.data?.fields?.[0]?.name || "id";
-  return [
-    { name: `${tableLabelForProperties(tab)}_pkey`, type: "PRIMARY KEY", definition: `PRIMARY KEY (${first})` }
-  ];
-}
-
-function dataViewDDL(tab: DataViewConsoleTab) {
-  const tableName = tableLabelForProperties(tab);
-  const schema = tab.meta?.schema || "public";
-  const fields = tab.data?.fields || [];
-  const body = fields.length
-    ? fields.map((field, index) => `  ${field.name} text${index === 0 ? " primary key" : ""}`).join(",\n")
-    : "  id text primary key";
-  return `CREATE TABLE ${schema}.${tableName} (\n${body}\n);`;
-}
+});
 
-function openQueryWorkspace(nodeKey: string, title = "Query", reuseExisting = true) {
-  const existingTab = reuseExisting
-    ? workspaceTabs.value.find((item) => item.kind === "query" && item.nodeKey === nodeKey)
-    : null;
-  if (existingTab) {
-    activeWorkspaceTabId.value = existingTab.id;
-    return;
-  }
+function initConsoleSocket(tab: ChenWorkspaceTab) {
+  const socket = chenSocket.connectWebSocket("console", auth.chenToken.value);
+  tab.socket = socket;
 
-  const id = newWorkspaceId("query");
-  const tab: QueryConsoleTab = {
-    id,
-    title,
-    icon: "i-lucide-terminal-square",
-    kind: "query",
-    nodeKey,
-    statement: "",
-    state: {},
-    logs: [],
-    resultTabs: [],
-    activeResultTabId: "",
-    socket: null
+  socket.onopen = () => {
+    chenSocket.sendJson(socket, {
+      type: "connect",
+      data: {
+        nodeKey: tab.nodeKey,
+        type: tab.kind === "data-view" ? "data_view" : "query"
+      }
+    });
+    chenSocket.flushQueuedActions(tab.id, socket);
   };
 
-  workspaceTabs.value.push(tab);
-  workspaceTabState[id] = tab;
-  pendingSocketActions[id] = [];
-  activeWorkspaceTabId.value = id;
-  initConsoleSocket(tab);
-}
-
-function openConsoleWorkspace(nodeKey: string, title = "Console") {
-  const id = newWorkspaceId("console");
-  const tab: ConsoleWorkspaceTab = {
-    id,
-    title,
-    icon: "i-lucide-square-terminal",
-    kind: "console",
-    nodeKey,
-    pendingSql: "",
-    state: {},
-    logs: [],
-    historyEntries: [],
-    resultTabs: [],
-    activeResultTabId: "",
-    socket: null
+  socket.onmessage = (event) => {
+    const reactiveTab = workspace.workspaceTabState[tab.id];
+    if (!reactiveTab) return;
+    handleConsolePacket(reactiveTab, JSON.parse(event.data) as ChenPacket);
   };
 
-  workspaceTabs.value.push(tab);
-  workspaceTabState[id] = tab;
-  pendingSocketActions[id] = [];
-  activeWorkspaceTabId.value = id;
-  initConsoleSocket(tab);
-}
-
-function openDataViewWorkspace(nodeKey: string, title = "Data View") {
-  const existingTab = workspaceTabs.value.find((item) => item.kind === "data-view" && item.nodeKey === nodeKey);
-  if (existingTab) {
-    activeWorkspaceTabId.value = existingTab.id;
-    return;
-  }
-
-  const id = newWorkspaceId("data-view");
-  const tab: DataViewConsoleTab = {
-    id,
-    title,
-    icon: "i-lucide-table-properties",
-    kind: "data-view",
-    nodeKey,
-    meta: null,
-    data: null,
-    state: {},
-    logs: [],
-    activePanel: "data",
-    activePropertyTab: "basic",
-    socket: null
+  socket.onerror = () => {
+    queryConsole.appendLog(tab, "WebSocket error");
   };
 
-  workspaceTabs.value.push(tab);
-  workspaceTabState[id] = tab;
-  pendingSocketActions[id] = [];
-  activeWorkspaceTabId.value = id;
-  initConsoleSocket(tab);
+  socket.onclose = () => {
+    if (workspace.workspaceTabState[tab.id]) workspace.workspaceTabState[tab.id]!.socket = null;
+  };
 }
 
-function toggleTreeNode(node: ChenTreeNode) {
-  expandedKeys.value = expandedKeys.value.includes(node.key)
-    ? expandedKeys.value.filter((key) => key !== node.key)
-    : [...expandedKeys.value, node.key];
-
-  if (!node.children?.length && node.hasChildren !== false) {
-    void loadNodeChildren(node);
-  }
-}
+function sendConsoleAction(tab: ChenWorkspaceTab, type: string, data?: any) {
+  const action = { type, data };
+  const socket = tab.socket;
 
-function closeWorkspaceTab(id: string) {
-  const tab = workspaceTabState[id];
-  tab?.socket?.close();
-  delete workspaceTabState[id];
-  delete pendingSocketActions[id];
-  workspaceTabs.value = workspaceTabs.value.filter((item) => item.id !== id);
-  if (activeWorkspaceTabId.value === id) {
-    activeWorkspaceTabId.value = workspaceTabs.value.at(-1)?.id || "";
+  if (socket?.readyState === WebSocket.OPEN) {
+    chenSocket.sendJson(socket, action);
+    return;
   }
-}
-
-function setActiveWorkspaceTab(id: string) {
-  activeWorkspaceTabId.value = id;
-}
 
-function updateQueryResult(tab: QueryLikeWorkspaceTab, meta: ChenDataViewMeta, data?: ChenDataViewDataset | null) {
-  let resultTab = tab.resultTabs.find((item) => item.title === meta.title);
-  if (!resultTab) {
-    resultTab = {
-      id: newWorkspaceId("result"),
-      title: meta.title,
-      meta,
-      data: data || null
-    };
-    tab.resultTabs.push(resultTab);
-  } else if (data) {
-    resultTab.data = data;
+  if (socket?.readyState === WebSocket.CONNECTING) {
+    chenSocket.queueAction(tab.id, action);
+    return;
   }
 
-  if (data) resultTab.data = data;
-  tab.activeResultTabId = resultTab.id;
-}
-
-function removeQueryResult(tab: QueryLikeWorkspaceTab, title: string) {
-  tab.resultTabs = tab.resultTabs.filter((item) => item.title !== title);
-  if (!tab.resultTabs.some((item) => item.id === tab.activeResultTabId)) {
-    tab.activeResultTabId = tab.resultTabs[0]?.id || "";
+  chenSocket.queueAction(tab.id, action);
+  if (!socket || socket.readyState === WebSocket.CLOSED) {
+    initConsoleSocket(tab);
   }
 }
 
@@ -432,135 +130,48 @@ function handleConsolePacket(tab: ChenWorkspaceTab, packet: ChenPacket) {
       tab.title = packet.data?.title || tab.title;
       break;
     case "log":
-      appendLog(tab.id, packet.data);
+      queryConsole.appendLog(tab, packet.data);
       break;
     case "message":
-      appendLog(tab.id, packet.data);
+      queryConsole.appendLog(tab, packet.data);
       break;
     case "update_state":
       tab.state = packet.data || {};
       break;
     case "active_console":
       if (typeof packet.data === "string") {
-        const match = workspaceTabs.value.find((item) => item.title === packet.data);
-        if (match) activeWorkspaceTabId.value = match.id;
+        const match = workspace.workspaceTabs.value.find((item) => item.title === packet.data);
+        if (match) workspace.setActiveTab(match.id);
       }
       break;
     case "close":
       closeWorkspaceTab(tab.id);
       break;
     default:
-      if (tab.kind === "query" || tab.kind === "console") handleQueryConsolePacket(tab, packet);
-      if (tab.kind === "data-view") handleDataViewConsolePacket(tab, packet);
-      break;
-  }
-}
-
-function handleQueryConsolePacket(tab: QueryLikeWorkspaceTab, packet: ChenPacket) {
-  switch (packet.type) {
-    case "new_data_view":
-      updateQueryResult(tab, packet.data);
-      break;
-    case "update_data_view":
-      if (packet.data?.title) updateQueryResult(tab, { title: packet.data.title }, packet.data.data);
-      break;
-    case "close_data_view":
-      if (typeof packet.data === "string") removeQueryResult(tab, packet.data);
-      if (packet.data?.sql) removeQueryResult(tab, packet.data.sql);
+      if (tab.kind === "query" || tab.kind === "console") queryConsole.handleQueryConsolePacket(tab, packet);
+      if (tab.kind === "data-view") dataView.handleDataViewConsolePacket(tab, packet);
       break;
   }
 }
 
-function handleDataViewConsolePacket(tab: DataViewConsoleTab, packet: ChenPacket) {
-  switch (packet.type) {
-    case "new_data_view":
-      tab.meta = packet.data;
-      tab.title = packet.data?.title || tab.title;
-      break;
-    case "update_data_view":
-      tab.data = packet.data?.data || null;
-      break;
-  }
-}
-
-function initConsoleSocket(tab: ChenWorkspaceTab) {
-  const socket = connectWebSocket("console", chenToken.value);
-  tab.socket = socket;
-
-  socket.onopen = () => {
-    socket.send(JSON.stringify({
-      type: "connect",
-      data: {
-        nodeKey: tab.nodeKey,
-        type: tab.kind === "data-view" ? "data_view" : "query"
-      }
-    }));
-    const queue = pendingSocketActions[tab.id] || [];
-    queue.forEach((action) => {
-      socket.send(JSON.stringify(action));
-    });
-    pendingSocketActions[tab.id] = [];
-  };
-
-  socket.onmessage = (event) => {
-    const reactiveTab = workspaceTabState[tab.id];
-    if (!reactiveTab) return;
-    handleConsolePacket(reactiveTab, JSON.parse(event.data) as ChenPacket);
-  };
-
-  socket.onerror = () => {
-    appendLog(tab.id, "WebSocket error");
-  };
-
-  socket.onclose = () => {
-    if (workspaceTabState[tab.id]) workspaceTabState[tab.id]!.socket = null;
-  };
-}
-
-function sendConsoleAction(tab: ChenWorkspaceTab, type: string, data?: any) {
-  const action = { type, data };
-  const socket = tab.socket;
-
-  if (socket?.readyState === WebSocket.OPEN) {
-    socket.send(JSON.stringify(action));
-    return;
-  }
-
-  if (socket?.readyState === WebSocket.CONNECTING) {
-    pendingSocketActions[tab.id] ||= [];
-    pendingSocketActions[tab.id].push(action);
-    return;
-  }
-
-  pendingSocketActions[tab.id] ||= [];
-  pendingSocketActions[tab.id].push(action);
-  if (!socket || socket.readyState === WebSocket.CLOSED) {
-    initConsoleSocket(tab);
-  }
+function openQueryWorkspace(nodeKey: string, title = "Query", reuseExisting = true) {
+  const tab = workspace.openQueryTab(nodeKey, title, reuseExisting);
+  if (tab && !tab.socket) initConsoleSocket(tab);
 }
 
-function runQueryTab(tab: QueryConsoleTab) {
-  const sql = tab.statement.trim();
-  if (!sql) return;
-  sendConsoleAction(tab, "query_console_action", { action: "run_sql", data: sql });
+function openConsoleWorkspace(nodeKey: string, title = "Console") {
+  const tab = workspace.openConsoleTab(nodeKey, title);
+  initConsoleSocket(tab);
 }
 
-function runConsoleTab(tab: ConsoleWorkspaceTab) {
-  const sql = tab.pendingSql.trim();
-  if (!sql) return;
-  tab.historyEntries.push({
-    id: newWorkspaceId("history"),
-    sql
-  });
-  if (tab.historyEntries.length > 200) {
-    tab.historyEntries.splice(0, tab.historyEntries.length - 200);
-  }
-  sendConsoleAction(tab, "query_console_action", { action: "run_sql", data: sql });
-  tab.pendingSql = "";
+function openDataViewWorkspace(nodeKey: string, title = "Data View") {
+  const tab = workspace.openDataViewTab(nodeKey, title);
+  if (tab && !tab.socket) initConsoleSocket(tab);
 }
 
-function cancelQueryLikeTab(tab: QueryLikeWorkspaceTab) {
-  sendConsoleAction(tab, "query_console_action", { action: "cancel" });
+function closeWorkspaceTab(id: string) {
+  chenSocket.clearQueue(id);
+  workspace.closeTab(id);
 }
 
 function createWorkspaceTab(kind: "query" | "console") {
@@ -575,18 +186,18 @@ function createWorkspaceTab(kind: "query" | "console") {
   }
 
   if (kind === "query") {
-    openQueryWorkspace(nodeKey, nextTabTitle("Query"), false);
+    openQueryWorkspace(nodeKey, workspace.nextTabTitle("Query"), false);
     return;
   }
 
-  openConsoleWorkspace(nodeKey, nextTabTitle("Console"));
+  openConsoleWorkspace(nodeKey, workspace.nextTabTitle("Console"));
 }
 
 async function applyTreeAction(node: ChenTreeNode, action: string) {
-  const response = await runChenAction(chenToken.value, node, action);
+  const response = await tree.runTreeAction(node, action);
   switch (response.event) {
     case "refresh_node":
-      await loadNodeChildren(node, true);
+      await tree.loadNodeChildren(node, true);
       break;
     case "new_query":
       openQueryWorkspace(response.data, "Query");
@@ -595,7 +206,7 @@ async function applyTreeAction(node: ChenTreeNode, action: string) {
       openDataViewWorkspace(response.data, "Data View");
       break;
     case "new_dialog":
-      dialogMessage.value = typeof response.data === "string"
+      session.dialogMessage.value = typeof response.data === "string"
         ? response.data
         : response.data?.body || response.data?.title || JSON.stringify(response.data);
       break;
@@ -603,7 +214,7 @@ async function applyTreeAction(node: ChenTreeNode, action: string) {
 }
 
 async function handleNodeClick(node: ChenTreeNode) {
-  selectedNodeKey.value = node.key;
+  tree.selectedNodeKey.value = node.key;
   if (node.type !== "table") return;
   await applyTreeAction(node, "show");
 }
@@ -622,72 +233,40 @@ function openNodeMenu(node: ChenTreeNode, event: MouseEvent) {
   });
 }
 
-async function bootstrapSession() {
-  loading.value = true;
-  error.value = "";
+function runQueryTab(tab: ChenQueryLikeWorkspaceTab) {
+  if (tab.kind === "query") queryConsole.runQueryTab(tab);
+  if (tab.kind === "console") queryConsole.runConsoleTab(tab);
+}
 
-  try {
-    const tokenId = ensureTokenId();
-    if (!tokenId) throw new Error("Missing chen token");
+function cancelQueryLikeTab(tab: ChenQueryLikeWorkspaceTab) {
+  queryConsole.cancelQueryLikeTab(tab);
+}
 
-    const auth = await authChen(tokenId, disableAutoHash.value);
-    chenToken.value = auth.token;
-    profile.value = await fetchChenProfile(auth.token);
+function updateQueryStatement(tab: ChenQueryConsoleTab, value: string) {
+  tab.statement = value;
+}
 
-    const socket = connectWebSocket("session", auth.token);
-    sessionSocket.value = socket;
+function updateConsolePendingSql(tab: ChenPromptConsoleTab, value: string) {
+  tab.pendingSql = value;
+}
 
-    socket.onmessage = async (event) => {
-      const packet = JSON.parse(event.data) as ChenPacket;
-      switch (packet.type) {
-        case "show_dialog":
-          dialogMessage.value = packet.data?.body || packet.data?.title || "";
-          break;
-        case "close_dialog":
-          dialogMessage.value = "";
-          break;
-        case "show_message":
-          toast.add({
-            title: packet.data?.level || "Message",
-            description: packet.data?.message || "",
-            color: packet.data?.level?.toLowerCase() === "error" ? "error" : "primary"
-          });
-          break;
-        case "set_ready":
-          await loadNodeChildren(null);
-          ready.value = true;
-          loading.value = false;
-          markSessionConnected(props.tab.id);
-          if (rootNodes.value[0]?.key) {
-            expandedKeys.value = [rootNodes.value[0].key];
-            if (rootNodes.value.length === 1 && rootNodes.value[0].hasChildren !== false) {
-              await loadNodeChildren(rootNodes.value[0]);
-              const firstChildKey = rootNodes.value[0].children?.[0]?.key;
-              if (firstChildKey) {
-                expandedKeys.value = [rootNodes.value[0].key, firstChildKey];
-              }
-            }
-          }
-          break;
-        case "close_session":
-          error.value = "Session closed";
-          ready.value = false;
-          break;
-      }
-    };
+function activateQueryResult(tab: ChenQueryLikeWorkspaceTab, id: string) {
+  tab.activeResultTabId = id;
+}
 
-    socket.onerror = () => {
-      error.value = "Chen session websocket error";
-      loading.value = false;
-    };
+function updateDataViewPanel(tab: Extract<ChenWorkspaceTab, { kind: "data-view" }>, panel: "data" | "properties") {
+  tab.activePanel = panel;
+}
 
-    socket.onclose = () => {
-      if (!ready.value) error.value = error.value || "Chen session closed";
-    };
-  } catch (cause) {
-    error.value = cause instanceof Error ? cause.message : String(cause);
-    loading.value = false;
-  }
+function updateDataViewPropertyTab(
+  tab: Extract<ChenWorkspaceTab, { kind: "data-view" }>,
+  propertyTab: Extract<ChenWorkspaceTab, { kind: "data-view" }>["activePropertyTab"]
+) {
+  tab.activePropertyTab = propertyTab;
+}
+
+function downloadDataViewCsv(tab: Parameters<typeof dataView.downloadDataViewCsv>[0]) {
+  dataView.downloadDataViewCsv(tab);
 }
 
 function startResize() {
@@ -703,33 +282,18 @@ function stopResize() {
   resizing.value = false;
 }
 
-function downloadDataViewCsv(result: QueryResultTab | DataViewConsoleTab) {
-  const dataset = "data" in result ? result.data : null;
-  if (!dataset?.fields?.length) return;
-  const header = dataset.fields.map((item) => item.name).join(",");
-  const rows = (dataset.data || []).map((row) => {
-    return dataset.fields.map((field) => JSON.stringify(row[field.name] ?? "")).join(",");
-  });
-  const blob = new Blob([[header, ...rows].join("\n")], { type: "text/csv;charset=utf-8" });
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = `${result.title || "query-result"}.csv`;
-  anchor.click();
-  URL.revokeObjectURL(url);
-}
-
 function focus() {}
 
 onMounted(() => {
-  void bootstrapSession();
+  void session.bootstrapSession();
   window.addEventListener("pointermove", handlePointerMove);
   window.addEventListener("pointerup", stopResize);
 });
 
 onBeforeUnmount(() => {
-  sessionSocket.value?.close();
-  Object.values(workspaceTabState).forEach((tab) => tab.socket?.close());
+  session.cleanupSession();
+  workspace.workspaceTabs.value.forEach((item) => chenSocket.clearQueue(item.id));
+  workspace.closeAllTabs();
   window.removeEventListener("pointermove", handlePointerMove);
   window.removeEventListener("pointerup", stopResize);
 });
@@ -739,457 +303,81 @@ defineExpose({ focus });
 
 <template>
   <div class="h-full min-h-0 bg-[var(--workspace-surface-main)] text-[var(--app-fg)]">
-    <div v-if="ready" class="flex h-full min-h-0">
-      <aside
-        class="flex min-h-0 shrink-0 flex-col border-r border-default bg-[var(--workspace-surface-sidebar)]"
-        :style="{ width: `${sidebarWidth}px` }"
-      >
-        <div class="flex items-center justify-between border-b border-default px-3 py-2">
-          <p class="text-xs font-medium text-muted">
-            Database Explorer
-          </p>
-          <div class="flex items-center gap-1">
-            <WorkspaceAddSessionPopover />
-            <UButton icon="i-lucide-refresh-cw" size="xs" color="neutral" variant="ghost" @click="loadNodeChildren(null, true)" />
-          </div>
-        </div>
-
-        <div class="min-h-0 flex-1 overflow-auto px-2 py-2">
-          <ul class="space-y-0.5">
-            <ChenResourceTreeNode
-              v-for="node in rootNodes"
-              :key="node.key"
-              :node="node"
-              :selected-key="selectedNodeKey"
-              :expanded-keys="expandedKeys"
-              :children-map="childrenMap"
-              :loading-children="loadingChildren"
-              :db-type="profile?.dbType"
-              @select="selectedNodeKey = $event.key"
-              @activate="handleNodeClick"
-              @toggle="toggleTreeNode"
-              @menu="({ node, event }) => openNodeMenu(node, event)"
-            />
-          </ul>
-        </div>
-      </aside>
+    <div v-if="session.ready.value" class="flex h-full min-h-0">
+      <ResourceTreePanel
+        :root-nodes="tree.rootNodes.value"
+        :selected-key="tree.selectedNodeKey.value"
+        :expanded-keys="tree.expandedKeys.value"
+        :children-map="tree.childrenMap"
+        :loading-children="tree.loadingChildren"
+        :db-type="auth.profile.value?.dbType"
+        :width="sidebarWidth"
+        @refresh="tree.refreshRoot"
+        @select="tree.selectedNodeKey.value = $event.key"
+        @activate="handleNodeClick"
+        @toggle="tree.toggleTreeNode"
+        @menu="({ node, event }) => openNodeMenu(node, event)"
+      />
 
       <div class="w-1 shrink-0 cursor-col-resize bg-default/60 hover:bg-primary/40" @pointerdown.prevent="startResize" />
 
       <section class="flex min-h-0 min-w-0 flex-1 flex-col">
-        <div class="flex items-center border-b border-default px-2 py-1">
-          <div class="min-w-0 flex-1 overflow-x-auto">
-            <div class="flex w-max min-w-full items-center gap-1">
-              <button
-                v-for="item in workspaceTabs"
-                :key="item.id"
-                class="flex h-6 shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[11px] transition"
-                :class="activeWorkspaceTabId === item.id ? 'bg-accented text-highlighted' : 'text-muted hover:bg-accented/60'"
-                :title="item.title"
-                @click="setActiveWorkspaceTab(item.id)"
-              >
-                <UIcon :name="item.icon || 'i-lucide-panel-top'" class="size-3.5" />
-                <span class="max-w-36 truncate">{{ displayWorkspaceTabTitle(item) }}</span>
-                <button class="text-muted hover:text-foreground" @click.stop="closeWorkspaceTab(item.id)">
-                  <UIcon name="i-lucide-x" class="size-3" />
-                </button>
-              </button>
-            </div>
-          </div>
-
-          <div class="ml-2 flex shrink-0 items-center gap-1 border-l border-default pl-2">
-            <UDropdownMenu
-              :items="createTabMenuItems"
-              :content="{ align: 'end', side: 'bottom', sideOffset: 6 }"
-              :ui="{ content: 'w-40 p-1' }"
-            >
-              <button
-                type="button"
-                class="flex h-6 shrink-0 items-center justify-center rounded-md px-2 text-muted transition hover:bg-accented/60 hover:text-highlighted"
-                aria-label="Create tab"
-                title="Create tab"
-              >
-                <UIcon name="i-lucide-plus" class="size-3.5" />
-              </button>
-            </UDropdownMenu>
-          </div>
+        <WorkspaceTabBar
+          :tabs="workspace.workspaceTabs.value"
+          :active-tab-id="workspace.activeWorkspaceTabId.value"
+          @activate="workspace.setActiveTab"
+          @close="closeWorkspaceTab"
+          @create="createWorkspaceTab"
+        />
+
+        <div v-if="workspace.activeWorkspaceTab.value" class="min-h-0 flex-1">
+          <QueryConsolePanel
+            v-if="activeQueryTab"
+            :tab="activeQueryTab"
+            :context-label="currentContextLabel"
+            @run="runQueryTab"
+            @cancel="cancelQueryLikeTab"
+            @download="downloadDataViewCsv"
+            @update-statement="updateQueryStatement"
+            @activate-result="activateQueryResult"
+          />
+
+          <ConsolePanel
+            v-else-if="activeConsoleTab"
+            :tab="activeConsoleTab"
+            :context-label="currentContextLabel"
+            :prompt-label="consolePromptLabel"
+            @run="runQueryTab"
+            @cancel="cancelQueryLikeTab"
+            @download="downloadDataViewCsv"
+            @update-pending-sql="updateConsolePendingSql"
+            @activate-result="activateQueryResult"
+          />
+
+          <DataViewPanel
+            v-else-if="activeDataViewTab"
+            :tab="activeDataViewTab"
+            :db-type="auth.profile.value?.dbType"
+            :protocol="props.tab.protocol"
+            @download="downloadDataViewCsv"
+            @update-panel="updateDataViewPanel"
+            @update-property-tab="updateDataViewPropertyTab"
+          />
         </div>
 
-        <div v-if="activeWorkspaceTab" class="min-h-0 flex-1">
-          <div v-if="activeWorkspaceTab.kind === 'query'" class="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_minmax(16rem,42%)]">
-            <div class="min-h-0 border-b border-default p-3">
-              <div class="mb-2 flex items-center gap-2">
-                <UButton icon="i-lucide-play" size="sm" @click="runQueryTab(activeWorkspaceTab)" />
-                <UButton icon="i-lucide-square" size="sm" color="neutral" variant="soft" @click="cancelQueryLikeTab(activeWorkspaceTab)" />
-                <UBadge color="neutral" variant="subtle">
-                  {{ activeWorkspaceTab.state.currentContext || currentWorkspaceNode?.label || 'Context' }}
-                </UBadge>
-              </div>
-              <ChenSqlEditor
-                v-model="activeWorkspaceTab.statement"
-                class="h-[calc(100%-2rem)]"
-                @run="runQueryTab(activeWorkspaceTab)"
-                @stop="cancelQueryLikeTab(activeWorkspaceTab)"
-              />
-            </div>
-
-            <div class="flex min-h-0 flex-col">
-              <div class="shrink-0 border-b border-default px-2 py-1">
-                <div class="flex items-center gap-1">
-                  <button
-                    v-for="result in activeWorkspaceTab.resultTabs"
-                    :key="result.id"
-                    class="rounded-md px-2 py-1 text-xs"
-                    :class="activeWorkspaceTab.activeResultTabId === result.id ? 'bg-accented' : 'text-muted'"
-                    @click="activeWorkspaceTab.activeResultTabId = result.id"
-                  >
-                    {{ result.title }}
-                  </button>
-                </div>
-              </div>
-
-              <div v-if="!activeWorkspaceTab.resultTabs.length" class="grid min-h-0 flex-1 place-items-center px-6 text-sm text-muted">
-                <div class="text-center">
-                  <UIcon name="i-lucide-table-properties" class="mx-auto mb-2 size-5" />
-                  <p>Run a query to open results here.</p>
-                </div>
-              </div>
-
-              <div
-                v-else-if="activeQueryResult"
-                :key="activeQueryResult.id"
-                class="flex min-h-0 flex-1 flex-col"
-              >
-                <div class="flex shrink-0 items-center justify-between border-b border-default px-3 py-2 text-sm">
-                  <div>{{ activeQueryResult.title }}</div>
-                  <UButton size="xs" icon="i-lucide-download" color="neutral" variant="soft" @click="downloadDataViewCsv(activeQueryResult)" />
-                </div>
-                <div class="min-h-0 flex-1 overflow-auto">
-                  <ChenDataGrid
-                    :key="`${activeQueryResult.id}:${activeQueryResult.data?.fields?.map(field => field.name).join(',') || ''}:${activeQueryResult.data?.data?.length || 0}`"
-                    :dataset="activeQueryResult.data"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div v-else-if="activeWorkspaceTab.kind === 'console'" class="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_minmax(16rem,42%)]">
-            <div class="flex min-h-0 flex-col border-b border-default">
-              <div class="flex items-center gap-2 border-b border-default px-3 py-2">
-                <UButton icon="i-lucide-play" size="sm" @click="runConsoleTab(activeWorkspaceTab)" />
-                <UButton icon="i-lucide-square" size="sm" color="neutral" variant="soft" @click="cancelQueryLikeTab(activeWorkspaceTab)" />
-                <UBadge color="neutral" variant="subtle">
-                  {{ activeWorkspaceTab.state.currentContext || currentWorkspaceNode?.label || 'Console' }}
-                </UBadge>
-              </div>
-
-              <div class="min-h-0 flex-1 overflow-auto px-3 py-3 font-ui-mono text-sm">
-                <div v-if="!activeWorkspaceTab.historyEntries.length && !activeWorkspaceTab.logs.length" class="grid h-full place-items-center text-center text-muted">
-                  <div>
-                    <UIcon name="i-lucide-square-terminal" class="mx-auto mb-2 size-5" />
-                    <p>Run SQL here like a `mysql` or `psql` console.</p>
-                  </div>
-                </div>
-
-                <div v-for="entry in activeWorkspaceTab.historyEntries" :key="entry.id" class="mb-3">
-                  <div class="mb-1 flex items-start gap-2">
-                    <span class="shrink-0 text-primary">{{ consolePromptLabel }}</span>
-                    <pre class="whitespace-pre-wrap break-words text-[var(--app-fg)]">{{ entry.sql }}</pre>
-                  </div>
-                </div>
-
-                <div v-if="activeWorkspaceTab.logs.length" class="rounded-md border border-default bg-[var(--workspace-surface-sub-panel)] px-3 py-2 text-xs text-muted">
-                  <pre class="whitespace-pre-wrap">{{ activeWorkspaceTab.logs.join('\n') }}</pre>
-                </div>
-              </div>
-
-              <div class="border-t border-default px-3 py-3">
-                <div class="flex items-start gap-2 rounded-md border border-default bg-[var(--workspace-surface-sub-panel)] px-3 py-2">
-                  <span class="pt-2 font-ui-mono text-sm text-primary">{{ consolePromptLabel }}</span>
-                  <textarea
-                    v-model="activeWorkspaceTab.pendingSql"
-                    class="min-h-20 flex-1 resize-none bg-transparent font-ui-mono text-sm text-[var(--app-fg)] outline-none placeholder:text-[var(--app-muted)]"
-                    placeholder="Type SQL and press Cmd/Ctrl+Enter to run"
-                    @keydown.enter.meta.prevent="runConsoleTab(activeWorkspaceTab)"
-                    @keydown.enter.ctrl.prevent="runConsoleTab(activeWorkspaceTab)"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div class="flex min-h-0 flex-col">
-              <div class="shrink-0 border-b border-default px-2 py-1">
-                <div class="flex items-center gap-1">
-                  <button
-                    v-for="result in activeWorkspaceTab.resultTabs"
-                    :key="result.id"
-                    class="rounded-md px-2 py-1 text-xs"
-                    :class="activeWorkspaceTab.activeResultTabId === result.id ? 'bg-accented' : 'text-muted'"
-                    @click="activeWorkspaceTab.activeResultTabId = result.id"
-                  >
-                    {{ result.title }}
-                  </button>
-                </div>
-              </div>
-
-              <div v-if="!activeWorkspaceTab.resultTabs.length" class="grid min-h-0 flex-1 place-items-center px-6 text-sm text-muted">
-                <div class="text-center">
-                  <UIcon name="i-lucide-table-properties" class="mx-auto mb-2 size-5" />
-                  <p>Query results will open here.</p>
-                </div>
-              </div>
-
-              <div
-                v-else-if="activeQueryResult"
-                :key="activeQueryResult.id"
-                class="flex min-h-0 flex-1 flex-col"
-              >
-                <div class="flex shrink-0 items-center justify-between border-b border-default px-3 py-2 text-sm">
-                  <div>{{ activeQueryResult.title }}</div>
-                  <UButton size="xs" icon="i-lucide-download" color="neutral" variant="soft" @click="downloadDataViewCsv(activeQueryResult)" />
-                </div>
-                <div class="min-h-0 flex-1 overflow-auto">
-                  <ChenDataGrid
-                    :key="`${activeQueryResult.id}:${activeQueryResult.data?.fields?.map(field => field.name).join(',') || ''}:${activeQueryResult.data?.data?.length || 0}`"
-                    :dataset="activeQueryResult.data"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div v-else class="flex h-full min-h-0 flex-col">
-            <div class="flex items-center justify-between gap-2 border-b border-default px-2 py-1">
-              <div class="flex min-w-0 items-center gap-1 overflow-x-auto">
-                <button
-                  class="rounded-md px-2 py-1 text-xs"
-                  :class="activeWorkspaceTab.activePanel === 'data' ? 'bg-accented' : 'text-muted'"
-                  @click="activeWorkspaceTab.activePanel = 'data'"
-                >
-                  Data
-                </button>
-                <button
-                  class="rounded-md px-2 py-1 text-xs"
-                  :class="activeWorkspaceTab.activePanel === 'properties' ? 'bg-accented' : 'text-muted'"
-                  @click="activeWorkspaceTab.activePanel = 'properties'"
-                >
-                  Properties
-                </button>
-
-                <template v-if="activeWorkspaceTab.activePanel === 'properties'">
-                  <button
-                    v-for="propertyTab in dataViewPropertyTabs"
-                    :key="propertyTab.id"
-                    class="rounded-md px-2 py-1 text-xs"
-                    :class="activeWorkspaceTab.activePropertyTab === propertyTab.id ? 'bg-accented' : 'text-muted'"
-                    @click="activeWorkspaceTab.activePropertyTab = propertyTab.id"
-                  >
-                    {{ propertyTab.label }}
-                  </button>
-                </template>
-              </div>
-
-              <UButton
-                size="xs"
-                icon="i-lucide-download"
-                color="neutral"
-                variant="soft"
-                @click="downloadDataViewCsv(activeWorkspaceTab)"
-              />
-            </div>
-
-            <div v-if="activeWorkspaceTab.activePanel === 'data'" class="min-h-0 flex-1 overflow-auto">
-              <ChenDataGrid
-                :key="`${activeWorkspaceTab.id}:${activeWorkspaceTab.data?.fields?.map(field => field.name).join(',') || ''}:${activeWorkspaceTab.data?.data?.length || 0}`"
-                :dataset="activeWorkspaceTab.data"
-              />
-            </div>
-
-            <div v-else class="flex min-h-0 flex-1 flex-col overflow-hidden">
-              <div v-if="activeWorkspaceTab.activePropertyTab === 'basic'" class="grid min-h-0 flex-1 gap-3 overflow-auto p-4 md:grid-cols-2">
-                <div
-                  v-for="item in dataViewBasicInfo(activeWorkspaceTab)"
-                  :key="item.label"
-                  class="rounded-lg border border-default bg-[var(--workspace-surface-sub-panel)] px-3 py-2"
-                >
-                  <div class="mb-1 text-[11px] uppercase tracking-wide text-muted">
-                    {{ item.label }}
-                  </div>
-                  <div class="text-sm">
-                    {{ item.value }}
-                  </div>
-                </div>
-              </div>
-
-              <div v-else-if="activeWorkspaceTab.activePropertyTab === 'columns'" class="min-h-0 flex-1 overflow-auto p-3">
-                <div class="overflow-hidden rounded-lg border border-default">
-                  <table class="w-full text-left text-sm">
-                    <thead class="bg-[var(--workspace-surface-sub-panel)] text-muted">
-                      <tr>
-                        <th class="px-3 py-2 font-medium">
-                          Name
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Type
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Nullable
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Key
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="column in dataViewColumns(activeWorkspaceTab)" :key="column.name" class="border-t border-default">
-                        <td class="px-3 py-2">
-                          {{ column.name }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ column.type }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ column.nullable }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ column.key }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-              <div v-else-if="activeWorkspaceTab.activePropertyTab === 'indexes'" class="min-h-0 flex-1 overflow-auto p-3">
-                <div class="overflow-hidden rounded-lg border border-default">
-                  <table class="w-full text-left text-sm">
-                    <thead class="bg-[var(--workspace-surface-sub-panel)] text-muted">
-                      <tr>
-                        <th class="px-3 py-2 font-medium">
-                          Name
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Columns
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Unique
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Method
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="index in dataViewIndexes(activeWorkspaceTab)" :key="index.name" class="border-t border-default">
-                        <td class="px-3 py-2">
-                          {{ index.name }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ index.columns }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ index.unique }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ index.method }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-              <div v-else-if="activeWorkspaceTab.activePropertyTab === 'foreignKeys'" class="min-h-0 flex-1 overflow-auto p-3">
-                <div v-if="dataViewForeignKeys(activeWorkspaceTab).length" class="overflow-hidden rounded-lg border border-default">
-                  <table class="w-full text-left text-sm">
-                    <thead class="bg-[var(--workspace-surface-sub-panel)] text-muted">
-                      <tr>
-                        <th class="px-3 py-2 font-medium">
-                          Name
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Column
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          References
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="foreignKey in dataViewForeignKeys(activeWorkspaceTab)" :key="foreignKey.name" class="border-t border-default">
-                        <td class="px-3 py-2">
-                          {{ foreignKey.name }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ foreignKey.column }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ foreignKey.references }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-                <div v-else class="grid h-full place-items-center text-sm text-muted">
-                  No foreign keys in preview.
-                </div>
-              </div>
-
-              <div v-else-if="activeWorkspaceTab.activePropertyTab === 'constraints'" class="min-h-0 flex-1 overflow-auto p-3">
-                <div class="overflow-hidden rounded-lg border border-default">
-                  <table class="w-full text-left text-sm">
-                    <thead class="bg-[var(--workspace-surface-sub-panel)] text-muted">
-                      <tr>
-                        <th class="px-3 py-2 font-medium">
-                          Name
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Type
-                        </th>
-                        <th class="px-3 py-2 font-medium">
-                          Definition
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="constraint in dataViewConstraints(activeWorkspaceTab)" :key="constraint.name" class="border-t border-default">
-                        <td class="px-3 py-2">
-                          {{ constraint.name }}
-                        </td>
-                        <td class="px-3 py-2 text-muted">
-                          {{ constraint.type }}
-                        </td>
-                        <td class="px-3 py-2 font-ui-mono text-xs text-muted">
-                          {{ constraint.definition }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-              <div v-else class="min-h-0 flex-1 overflow-auto p-3">
-                <pre class="rounded-lg border border-default bg-[var(--workspace-surface-sub-panel)] p-3 font-ui-mono text-xs text-[var(--app-fg)]">{{ dataViewDDL(activeWorkspaceTab) }}</pre>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-else class="grid flex-1 place-items-center text-sm text-muted">
-          <div class="text-center">
-            <UIcon name="i-lucide-database-zap" class="mx-auto mb-2 size-6" />
-            <p>Select a database action to begin.</p>
-          </div>
-        </div>
+        <ChenSessionState
+          v-else
+          icon="i-lucide-database-zap"
+          message="Select a database action to begin."
+        />
       </section>
     </div>
 
-    <div v-else class="grid h-full place-items-center text-sm text-muted">
-      <div class="flex max-w-md flex-col items-center gap-3 text-center">
-        <UIcon :name="error ? 'i-lucide-circle-alert' : 'i-lucide-loader-circle'" class="size-6" :class="error ? '' : 'animate-spin'" />
-        <p>{{ error || dialogMessage || "Starting database workspace..." }}</p>
-      </div>
-    </div>
+    <ChenSessionState
+      v-else
+      :icon="session.error.value ? 'i-lucide-circle-alert' : 'i-lucide-loader-circle'"
+      :loading="!session.error.value"
+      :message="session.error.value || session.dialogMessage.value || 'Starting database workspace...'"
+    />
   </div>
 </template>

From e0aea13627596ba97dc88695474011cc18eb276c Mon Sep 17 00:00:00 2001
From: "Crane.z" <1481445951@qq.com>
Date: Fri, 10 Jul 2026 14:36:28 +0800
Subject: [PATCH 2/2] feat: stabilize native chen websocket lifecycle

---
 ui/chen/components/ChenSessionState.vue       |   8 +
 ui/chen/composables/useChenAuth.ts            |  18 +-
 ui/chen/composables/useChenSession.ts         | 151 ++++---
 ui/chen/composables/useChenWebSocket.ts       | 379 ++++++++++++++++--
 ui/chen/composables/useChenWorkspaceTabs.ts   |   3 +
 ui/chen/types.ts                              |   1 +
 ui/chen/workspaces/DatabaseSessionSurface.vue | 152 ++++---
 7 files changed, 578 insertions(+), 134 deletions(-)

diff --git a/ui/chen/components/ChenSessionState.vue b/ui/chen/components/ChenSessionState.vue
index d52fa098..9237623a 100644
--- a/ui/chen/components/ChenSessionState.vue
+++ b/ui/chen/components/ChenSessionState.vue
@@ -3,6 +3,11 @@ defineProps<{
   icon?: string
   loading?: boolean
   message: string
+  actionLabel?: string
+}>();
+
+defineEmits<{
+  action: []
 }>();
 </script>
 
@@ -15,6 +20,9 @@ defineProps<{
         :class="loading ? 'animate-spin' : ''"
       />
       <p>{{ message }}</p>
+      <UButton v-if="actionLabel" size="sm" variant="soft" @click="$emit('action')">
+        {{ actionLabel }}
+      </UButton>
     </div>
   </div>
 </template>
diff --git a/ui/chen/composables/useChenAuth.ts b/ui/chen/composables/useChenAuth.ts
index c0bc314b..17dcd899 100644
--- a/ui/chen/composables/useChenAuth.ts
+++ b/ui/chen/composables/useChenAuth.ts
@@ -21,13 +21,27 @@ export function useChenAuth(tab: Ref<WorkspaceSessionTab>) {
 
   async function authenticate() {
     error.value = "";
+    chenToken.value = "";
+    profile.value = null;
 
     const tokenId = ensureTokenId();
     if (!tokenId) throw new Error("Missing chen token");
 
-    const auth = await authChen(tokenId, disableAutoHash.value);
+    let auth: Awaited<ReturnType<typeof authChen>>;
+    try {
+      auth = await authChen(tokenId, disableAutoHash.value);
+    } catch (cause) {
+      error.value = `Chen authentication failed: ${cause instanceof Error ? cause.message : String(cause)}`;
+      throw new Error(error.value);
+    }
+
     chenToken.value = auth.token;
-    profile.value = await fetchChenProfile(auth.token);
+    try {
+      profile.value = await fetchChenProfile(auth.token);
+    } catch (cause) {
+      error.value = `Chen profile failed: ${cause instanceof Error ? cause.message : String(cause)}`;
+      throw new Error(error.value);
+    }
 
     return auth.token;
   }
diff --git a/ui/chen/composables/useChenSession.ts b/ui/chen/composables/useChenSession.ts
index 580af408..8ef608b2 100644
--- a/ui/chen/composables/useChenSession.ts
+++ b/ui/chen/composables/useChenSession.ts
@@ -1,77 +1,126 @@
+import type { ChenSocketError, ChenSocketPath } from "~/chen/composables/useChenWebSocket";
 import type { ChenPacket } from "~/chen/types";
 
+import { ref } from "vue";
+import { useChenWebSocket } from "~/chen/composables/useChenWebSocket";
+
 interface UseChenSessionOptions {
   authenticate: () => Promise<string>
-  connectSessionSocket: (token: string) => WebSocket
   markConnected: () => void
+  markFailed: () => void
   onBeforeReady: () => Promise<void>
   onAfterReady: () => Promise<void>
+  onDisconnected: () => void
+  showMessage: (data: any) => void
+  createSocket?: (url: string, token: string) => WebSocket
+  resolveUrl?: (path: ChenSocketPath) => string
 }
 
 export function useChenSession(options: UseChenSessionOptions) {
-  const toast = useToast();
   const ready = ref(false);
   const loading = ref(true);
   const error = ref("");
   const dialogMessage = ref("");
-  const sessionSocket = shallowRef<WebSocket | null>(null);
+
+  let bootstrapGeneration = 0;
+  let fatalNotified = false;
+
+  const sessionConnection = useChenWebSocket({
+    path: "session",
+    createSocket: options.createSocket,
+    resolveUrl: options.resolveUrl,
+    onPacket: handlePacket,
+    onError: handleSocketError
+  });
+
+  function normalizeError(cause: unknown) {
+    return cause instanceof Error ? cause.message : String(cause);
+  }
+
+  function handleFatal(cause: unknown) {
+    if (fatalNotified) return;
+    fatalNotified = true;
+    ready.value = false;
+    loading.value = false;
+    error.value = normalizeError(cause);
+    options.markFailed();
+
+    // A Chen session owns all of its consoles. Close dependent consoles first
+    // so their backend close handlers can still resolve the active session.
+    options.onDisconnected();
+    sessionConnection.close();
+  }
+
+  function handleSocketError(socketError: ChenSocketError) {
+    handleFatal(socketError.message);
+  }
+
+  async function handleSetReady() {
+    if (sessionConnection.isReady.value) return;
+    const currentGeneration = bootstrapGeneration;
+    if (!sessionConnection.markReady()) return;
+
+    try {
+      await options.onBeforeReady();
+      if (currentGeneration !== bootstrapGeneration || fatalNotified) return;
+
+      ready.value = true;
+      loading.value = false;
+      options.markConnected();
+
+      await options.onAfterReady();
+    } catch (cause) {
+      handleFatal(cause);
+    }
+  }
+
+  function handlePacket(packet: ChenPacket) {
+    switch (packet.type) {
+      case "show_dialog":
+        dialogMessage.value = packet.data?.body || packet.data?.title || "";
+        break;
+      case "close_dialog":
+        dialogMessage.value = "";
+        break;
+      case "show_message":
+        options.showMessage(packet.data);
+        break;
+      case "set_ready":
+        void handleSetReady();
+        break;
+      case "session_close":
+      case "close_session":
+        handleFatal(new Error("Chen session disconnected by backend"));
+        break;
+    }
+  }
 
   async function bootstrapSession() {
+    const currentGeneration = ++bootstrapGeneration;
+    fatalNotified = false;
+    ready.value = false;
     loading.value = true;
     error.value = "";
+    dialogMessage.value = "";
 
     try {
       const token = await options.authenticate();
-      const socket = options.connectSessionSocket(token);
-      sessionSocket.value = socket;
-
-      socket.onmessage = async (event) => {
-        const packet = JSON.parse(event.data) as ChenPacket;
-        switch (packet.type) {
-          case "show_dialog":
-            dialogMessage.value = packet.data?.body || packet.data?.title || "";
-            break;
-          case "close_dialog":
-            dialogMessage.value = "";
-            break;
-          case "show_message":
-            toast.add({
-              title: packet.data?.level || "Message",
-              description: packet.data?.message || "",
-              color: packet.data?.level?.toLowerCase() === "error" ? "error" : "primary"
-            });
-            break;
-          case "set_ready":
-            await options.onBeforeReady();
-            ready.value = true;
-            loading.value = false;
-            options.markConnected();
-            await options.onAfterReady();
-            break;
-          case "close_session":
-            error.value = "Session closed";
-            ready.value = false;
-            break;
-        }
-      };
-
-      socket.onerror = () => {
-        error.value = "Chen session websocket error";
-        loading.value = false;
-      };
-
-      socket.onclose = () => {
-        if (!ready.value) error.value = error.value || "Chen session closed";
-      };
+      if (currentGeneration !== bootstrapGeneration) return;
+      sessionConnection.connect(token);
     } catch (cause) {
-      error.value = cause instanceof Error ? cause.message : String(cause);
-      loading.value = false;
+      handleFatal(cause);
     }
   }
 
+  async function retrySession() {
+    options.onDisconnected();
+    cleanupSession();
+    await bootstrapSession();
+  }
+
   function cleanupSession() {
-    sessionSocket.value?.close();
-    sessionSocket.value = null;
+    bootstrapGeneration += 1;
+    sessionConnection.close();
   }
 
   return {
@@ -79,8 +128,10 @@ export function useChenSession(options: UseChenSessionOptions) {
     error,
     loading,
     ready,
-    sessionSocket,
+    sessionConnection,
+    sessionSocket: sessionConnection.socket,
     bootstrapSession,
-    cleanupSession
+    cleanupSession,
+    retrySession
   };
 }
diff --git a/ui/chen/composables/useChenWebSocket.ts b/ui/chen/composables/useChenWebSocket.ts
index b8e6e433..63b6c552 100644
--- a/ui/chen/composables/useChenWebSocket.ts
+++ b/ui/chen/composables/useChenWebSocket.ts
@@ -1,55 +1,368 @@
-import type { ChenSocketAction } from "~/chen/types";
+import type { ChenPacket, ChenSocketAction } from "~/chen/types";
 
-export function useChenWebSocket() {
-  const pendingSocketActions = reactive<Record<string, ChenSocketAction[]>>({});
+import { computed, reactive, ref, shallowRef } from "vue";
 
-  function chenHttpPath(path: string) {
-    return withWebSitePrefix(`/chen${path.startsWith("/") ? path : `/${path}`}`);
+export type ChenSocketPath = "session" | "console";
+export type ChenSocketState = "idle" | "connecting" | "open" | "ready" | "closing" | "closed" | "error" | "timeout";
+export type ChenSocketErrorCode
+  = | "connect_timeout"
+    | "ready_timeout"
+    | "pong_timeout"
+    | "socket_error"
+    | "abnormal_close"
+    | "malformed_packet"
+    | "packet_handler_error";
+
+export interface ChenSocketError {
+  code: ChenSocketErrorCode
+  message: string
+  closeCode?: number
+  closeReason?: string
+}
+
+export interface UseChenWebSocketOptions {
+  path: ChenSocketPath
+  connectTimeoutMs?: number
+  readyTimeoutMs?: number
+  heartbeatIntervalMs?: number
+  pongTimeoutMs?: number
+  createSocket?: (url: string, token: string) => WebSocket
+  resolveUrl?: (path: ChenSocketPath) => string
+  onOpen?: () => void
+  onPacket?: (packet: ChenPacket) => void | Promise<void>
+  onError?: (error: ChenSocketError) => void
+}
+
+const SOCKET_OPEN = 1;
+const SOCKET_CLOSING = 2;
+const SOCKET_CLOSED = 3;
+
+export function chenHttpPath(path: string) {
+  return withWebSitePrefix(`/chen${path.startsWith("/") ? path : `/${path}`}`);
+}
+
+export function chenWsUrl(path: ChenSocketPath) {
+  const origin = window.location.origin.replace(/^http/, "ws");
+  return `${origin}${chenHttpPath(`/ws/${path}`)}`;
+}
+
+export function useChenWebSocket(options: UseChenWebSocketOptions) {
+  const socket = shallowRef<WebSocket | null>(null);
+  const state = ref<ChenSocketState>("idle");
+  const error = ref<ChenSocketError | null>(null);
+  const pendingQueue = reactive<ChenSocketAction[]>([]);
+  const lastPingAt = ref<number | null>(null);
+  const lastPongAt = ref<number | null>(null);
+  const awaitingPong = ref(false);
+
+  const connectTimeoutMs = options.connectTimeoutMs ?? 30_000;
+  const readyTimeoutMs = options.readyTimeoutMs ?? (options.path === "session" ? 120_000 : 30_000);
+  const heartbeatIntervalMs = options.heartbeatIntervalMs ?? 10_000;
+  const pongTimeoutMs = options.pongTimeoutMs ?? 30_000;
+
+  let generation = 0;
+  let failureNotified = false;
+  let connectTimer: ReturnType<typeof setTimeout> | null = null;
+  let readyTimer: ReturnType<typeof setTimeout> | null = null;
+  let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
+  let pongTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const isReady = computed(() => state.value === "ready");
+
+  function setState(nextState: ChenSocketState) {
+    state.value = nextState;
+  }
+
+  function clearConnectTimer() {
+    if (connectTimer == null) return;
+    clearTimeout(connectTimer);
+    connectTimer = null;
+  }
+
+  function clearReadyTimer() {
+    if (readyTimer == null) return;
+    clearTimeout(readyTimer);
+    readyTimer = null;
+  }
+
+  function clearPongTimer() {
+    if (pongTimer == null) return;
+    clearTimeout(pongTimer);
+    pongTimer = null;
+  }
+
+  function stopHeartbeat() {
+    if (heartbeatTimer != null) {
+      clearInterval(heartbeatTimer);
+      heartbeatTimer = null;
+    }
+    clearPongTimer();
+    awaitingPong.value = false;
+  }
+
+  function clearTimers() {
+    clearConnectTimer();
+    clearReadyTimer();
+    stopHeartbeat();
+  }
+
+  function clearQueue() {
+    pendingQueue.splice(0, pendingQueue.length);
+  }
+
+  function detachHandlers(target: WebSocket | null) {
+    if (!target) return;
+    target.onopen = null;
+    target.onmessage = null;
+    target.onerror = null;
+    target.onclose = null;
   }
 
-  function chenWsUrl(path: "session" | "console") {
-    const origin = window.location.origin.replace(/^http/, "ws");
-    return `${origin}${chenHttpPath(`/ws/${path}`)}`;
+  function closeTransport(target: WebSocket | null, code: number, reason: string) {
+    if (!target || target.readyState === SOCKET_CLOSING || target.readyState === SOCKET_CLOSED) return;
+    try {
+      target.close(code, reason.slice(0, 123));
+    } catch {
+      // The socket may reject close while its handshake is being torn down.
+    }
   }
 
-  function connectWebSocket(path: "session" | "console", token: string) {
-    return new WebSocket(chenWsUrl(path), token);
+  function reportError(nextError: ChenSocketError, closeCode = 1011) {
+    if (failureNotified || state.value === "closing" || state.value === "closed") return;
+    failureNotified = true;
+    error.value = nextError;
+    setState(nextError.code.endsWith("_timeout") ? "timeout" : "error");
+    clearTimers();
+    clearQueue();
+
+    const target = socket.value;
+    socket.value = null;
+    detachHandlers(target);
+    closeTransport(target, closeCode, nextError.message);
+    options.onError?.(nextError);
   }
 
-  function sendJson(socket: WebSocket, payload: unknown) {
-    socket.send(JSON.stringify(payload));
+  function sendImmediately(payload: ChenSocketAction) {
+    const target = socket.value;
+    if (!target || target.readyState !== SOCKET_OPEN) return false;
+
+    try {
+      target.send(JSON.stringify(payload));
+      return true;
+    } catch (cause) {
+      reportError({
+        code: "socket_error",
+        message: cause instanceof Error ? cause.message : "Failed to send Chen websocket packet"
+      });
+      return false;
+    }
   }
 
-  function queueAction(tabId: string, action: ChenSocketAction) {
-    pendingSocketActions[tabId] ||= [];
-    pendingSocketActions[tabId].push(action);
+  function flushQueue() {
+    if (!isReady.value || socket.value?.readyState !== SOCKET_OPEN) return false;
+
+    const actions = pendingQueue.splice(0, pendingQueue.length);
+    for (const action of actions) {
+      if (!sendImmediately(action)) return false;
+    }
+    return true;
+  }
+
+  function startHeartbeat() {
+    stopHeartbeat();
+    heartbeatTimer = setInterval(() => {
+      if (!isReady.value) return;
+      if (!sendImmediately({ type: "ping" })) return;
+
+      lastPingAt.value = Date.now();
+      if (awaitingPong.value) return;
+
+      awaitingPong.value = true;
+      pongTimer = setTimeout(() => {
+        reportError({
+          code: "pong_timeout",
+          message: `Chen ${options.path} websocket heartbeat timed out`
+        });
+      }, pongTimeoutMs);
+    }, heartbeatIntervalMs);
   }
 
-  function flushQueuedActions(tabId: string, socket: WebSocket) {
-    const queue = pendingSocketActions[tabId] || [];
-    queue.forEach((action) => sendJson(socket, action));
-    pendingSocketActions[tabId] = [];
+  function markReady() {
+    if (state.value === "ready") return true;
+    if (state.value !== "open" || socket.value?.readyState !== SOCKET_OPEN) return false;
+
+    clearReadyTimer();
+    setState("ready");
+    startHeartbeat();
+    return flushQueue();
   }
 
-  function clearQueue(tabId: string) {
-    delete pendingSocketActions[tabId];
+  function sendWhenReady(payload: ChenSocketAction) {
+    if (isReady.value) return sendImmediately(payload);
+    if (state.value !== "connecting" && state.value !== "open") return false;
+    pendingQueue.push(payload);
+    return true;
   }
 
-  function closeSocket(socket?: WebSocket | null) {
-    if (!socket) return;
-    if (socket.readyState === WebSocket.CLOSING || socket.readyState === WebSocket.CLOSED) return;
-    socket.close();
+  function handleMessage(event: MessageEvent) {
+    if (typeof event.data !== "string") {
+      reportError({
+        code: "malformed_packet",
+        message: `Chen ${options.path} websocket sent a non-text packet`
+      }, 1002);
+      return;
+    }
+
+    let packet: ChenPacket;
+    try {
+      packet = JSON.parse(event.data) as ChenPacket;
+    } catch {
+      reportError({
+        code: "malformed_packet",
+        message: `Chen ${options.path} websocket sent malformed JSON`
+      }, 1002);
+      return;
+    }
+
+    if (!packet || typeof packet !== "object" || typeof packet.type !== "string") {
+      reportError({
+        code: "malformed_packet",
+        message: `Chen ${options.path} websocket sent an invalid packet`
+      }, 1002);
+      return;
+    }
+
+    if (packet.type === "pong") {
+      lastPongAt.value = Date.now();
+      awaitingPong.value = false;
+      clearPongTimer();
+      return;
+    }
+
+    try {
+      const result = options.onPacket?.(packet);
+      if (result instanceof Promise) {
+        void result.catch((cause) => {
+          reportError({
+            code: "packet_handler_error",
+            message: cause instanceof Error ? cause.message : "Failed to handle Chen websocket packet"
+          });
+        });
+      }
+    } catch (cause) {
+      reportError({
+        code: "packet_handler_error",
+        message: cause instanceof Error ? cause.message : "Failed to handle Chen websocket packet"
+      });
+    }
+  }
+
+  function connect(token: string) {
+    close();
+    generation += 1;
+    const currentGeneration = generation;
+    failureNotified = false;
+    error.value = null;
+    lastPingAt.value = null;
+    lastPongAt.value = null;
+    clearQueue();
+    setState("connecting");
+
+    let target: WebSocket;
+    try {
+      const resolveUrl = options.resolveUrl || chenWsUrl;
+      const createSocket = options.createSocket || ((url: string, protocol: string) => new WebSocket(url, protocol));
+      target = createSocket(resolveUrl(options.path), token);
+      socket.value = target;
+    } catch (cause) {
+      reportError({
+        code: "socket_error",
+        message: cause instanceof Error ? cause.message : `Failed to create Chen ${options.path} websocket`
+      });
+      return null;
+    }
+
+    const isCurrent = () => generation === currentGeneration && socket.value === target;
+
+    target.onopen = () => {
+      if (!isCurrent()) return;
+      clearConnectTimer();
+      setState("open");
+      readyTimer = setTimeout(() => {
+        reportError({
+          code: "ready_timeout",
+          message: `Chen ${options.path} websocket did not become ready in time`
+        });
+      }, readyTimeoutMs);
+      options.onOpen?.();
+    };
+
+    target.onmessage = (event) => {
+      if (!isCurrent()) return;
+      handleMessage(event);
+    };
+
+    target.onerror = () => {
+      if (!isCurrent()) return;
+      reportError({
+        code: "socket_error",
+        message: `Chen ${options.path} websocket error`
+      });
+    };
+
+    target.onclose = (event) => {
+      if (!isCurrent()) return;
+      socket.value = null;
+      detachHandlers(target);
+      reportError({
+        code: "abnormal_close",
+        message: event.reason || `Chen ${options.path} websocket disconnected`,
+        closeCode: event.code,
+        closeReason: event.reason
+      });
+    };
+
+    connectTimer = setTimeout(() => {
+      reportError({
+        code: "connect_timeout",
+        message: `Chen ${options.path} websocket connection timed out`
+      });
+    }, connectTimeoutMs);
+
+    return target;
+  }
+
+  function close() {
+    if (state.value === "idle" || state.value === "closed" || state.value === "closing") return;
+
+    setState("closing");
+    clearTimers();
+    clearQueue();
+    failureNotified = true;
+    generation += 1;
+
+    const target = socket.value;
+    socket.value = null;
+    detachHandlers(target);
+    closeTransport(target, 1000, "Chen client cleanup");
+    setState("closed");
   }
 
   return {
-    pendingSocketActions,
-    chenHttpPath,
-    chenWsUrl,
+    awaitingPong,
+    error,
+    isReady,
+    lastPingAt,
+    lastPongAt,
+    pendingQueue,
+    socket,
+    state,
     clearQueue,
-    closeSocket,
-    connectWebSocket,
-    flushQueuedActions,
-    queueAction,
-    sendJson
+    close,
+    connect,
+    flushQueue,
+    markReady,
+    sendImmediately,
+    sendWhenReady
   };
 }
diff --git a/ui/chen/composables/useChenWorkspaceTabs.ts b/ui/chen/composables/useChenWorkspaceTabs.ts
index 63934320..c70a977b 100644
--- a/ui/chen/composables/useChenWorkspaceTabs.ts
+++ b/ui/chen/composables/useChenWorkspaceTabs.ts
@@ -122,6 +122,9 @@ export function useChenWorkspaceTabs() {
 
   function closeAllTabs() {
     Object.values(workspaceTabState).forEach((tab) => tab.socket?.close());
+    Object.keys(workspaceTabState).forEach((id) => delete workspaceTabState[id]);
+    workspaceTabs.value = [];
+    activeWorkspaceTabId.value = "";
   }
 
   function setActiveTab(id: string) {
diff --git a/ui/chen/types.ts b/ui/chen/types.ts
index 31a7b9f0..b221eea3 100644
--- a/ui/chen/types.ts
+++ b/ui/chen/types.ts
@@ -37,6 +37,7 @@ export interface ChenTabDefinition {
   icon?: string
   kind: "query" | "data-view" | "console"
   nodeKey: string
+  connectionError?: string
 }
 
 export interface ChenDataViewMeta {
diff --git a/ui/chen/workspaces/DatabaseSessionSurface.vue b/ui/chen/workspaces/DatabaseSessionSurface.vue
index 2495d87c..4e9e9ba9 100644
--- a/ui/chen/workspaces/DatabaseSessionSurface.vue
+++ b/ui/chen/workspaces/DatabaseSessionSurface.vue
@@ -26,17 +26,17 @@ import { useChenWorkspaceTabs } from "~/chen/composables/useChenWorkspaceTabs";
 const props = defineProps<{ tab: WorkspaceSessionTab }>();
 
 const toast = useToast();
-const { markSessionConnected } = useWorkspaceTabs();
+const { markSessionConnected, markSessionFailed } = useWorkspaceTabs();
 const tabRef = toRef(props, "tab");
 
 const sidebarWidth = ref(280);
 const resizing = ref(false);
 
 const auth = useChenAuth(tabRef);
-const chenSocket = useChenWebSocket();
 const tree = useChenResourceTree(auth.chenToken);
 const workspace = useChenWorkspaceTabs();
 const dataView = useChenDataView();
+const consoleConnections = new Map<string, ReturnType<typeof useChenWebSocket>>();
 
 const currentWorkspaceNodeKey = computed(() => {
   return tree.selectedNodeKey.value || workspace.activeWorkspaceTab.value?.nodeKey || tree.rootNodes.value[0]?.key || "";
@@ -60,68 +60,91 @@ const activeDataViewTab = computed(() => {
   const tab = workspace.activeWorkspaceTab.value;
   return tab?.kind === "data-view" ? tab : null;
 });
+const activeConnectionError = computed(() => workspace.activeWorkspaceTab.value?.connectionError || "");
 
 const queryConsole = useChenQueryConsole(sendConsoleAction);
 const session = useChenSession({
   authenticate: auth.authenticate,
-  connectSessionSocket: (token) => chenSocket.connectWebSocket("session", token),
   markConnected: () => markSessionConnected(props.tab.id),
+  markFailed: () => markSessionFailed({
+    tabId: props.tab.id,
+    assetId: props.tab.assetId,
+    protocol: props.tab.protocol,
+    account: props.tab.account
+  }),
   onBeforeReady: async () => {
     await tree.loadNodeChildren(null);
   },
   onAfterReady: async () => {
     await tree.expandInitialTree();
+  },
+  onDisconnected: () => closeAllConsoleSockets("Database session disconnected"),
+  showMessage: (data) => {
+    toast.add({
+      title: data?.level || "Message",
+      description: data?.message || "",
+      color: data?.level?.toLowerCase() === "error" ? "error" : "primary"
+    });
   }
 });
 
 function initConsoleSocket(tab: ChenWorkspaceTab) {
-  const socket = chenSocket.connectWebSocket("console", auth.chenToken.value);
-  tab.socket = socket;
-
-  socket.onopen = () => {
-    chenSocket.sendJson(socket, {
-      type: "connect",
-      data: {
-        nodeKey: tab.nodeKey,
-        type: tab.kind === "data-view" ? "data_view" : "query"
+  const existing = consoleConnections.get(tab.id);
+  if (existing) return existing;
+  if (!session.ready.value) {
+    tab.connectionError = "Database session is not ready";
+    return null;
+  }
+
+  tab.connectionError = "";
+  const connection = useChenWebSocket({
+    path: "console",
+    onOpen: () => {
+      const reactiveTab = workspace.workspaceTabState[tab.id];
+      if (!reactiveTab) {
+        connection.close();
+        return;
       }
-    });
-    chenSocket.flushQueuedActions(tab.id, socket);
-  };
-
-  socket.onmessage = (event) => {
-    const reactiveTab = workspace.workspaceTabState[tab.id];
-    if (!reactiveTab) return;
-    handleConsolePacket(reactiveTab, JSON.parse(event.data) as ChenPacket);
-  };
-
-  socket.onerror = () => {
-    queryConsole.appendLog(tab, "WebSocket error");
-  };
-
-  socket.onclose = () => {
-    if (workspace.workspaceTabState[tab.id]) workspace.workspaceTabState[tab.id]!.socket = null;
-  };
+
+      connection.sendImmediately({
+        type: "connect",
+        data: {
+          nodeKey: reactiveTab.nodeKey,
+          type: reactiveTab.kind === "data-view" ? "data_view" : "query"
+        }
+      });
+    },
+    onPacket: (packet) => {
+      const reactiveTab = workspace.workspaceTabState[tab.id];
+      if (!reactiveTab) return;
+
+      handleConsolePacket(reactiveTab, packet);
+      if (packet.type === "init") {
+        reactiveTab.connectionError = "";
+        connection.markReady();
+      }
+    },
+    onError: (socketError) => {
+      const reactiveTab = workspace.workspaceTabState[tab.id];
+      if (!reactiveTab) return;
+      reactiveTab.socket = null;
+      reactiveTab.connectionError = socketError.message;
+      queryConsole.appendLog(reactiveTab, socketError.message);
+    }
+  });
+
+  consoleConnections.set(tab.id, connection);
+  tab.socket = connection.connect(auth.chenToken.value);
+  return connection;
 }
 
 function sendConsoleAction(tab: ChenWorkspaceTab, type: string, data?: any) {
   const action = { type, data };
-  const socket = tab.socket;
+  const connection = consoleConnections.get(tab.id) || initConsoleSocket(tab);
+  if (connection?.sendWhenReady(action)) return;
 
-  if (socket?.readyState === WebSocket.OPEN) {
-    chenSocket.sendJson(socket, action);
-    return;
-  }
-
-  if (socket?.readyState === WebSocket.CONNECTING) {
-    chenSocket.queueAction(tab.id, action);
-    return;
-  }
-
-  chenSocket.queueAction(tab.id, action);
-  if (!socket || socket.readyState === WebSocket.CLOSED) {
-    initConsoleSocket(tab);
-  }
+  tab.connectionError ||= "Console websocket is not connected";
+  queryConsole.appendLog(tab, tab.connectionError);
 }
 
 function handleConsolePacket(tab: ChenWorkspaceTab, packet: ChenPacket) {
@@ -156,7 +179,7 @@ function handleConsolePacket(tab: ChenWorkspaceTab, packet: ChenPacket) {
 
 function openQueryWorkspace(nodeKey: string, title = "Query", reuseExisting = true) {
   const tab = workspace.openQueryTab(nodeKey, title, reuseExisting);
-  if (tab && !tab.socket) initConsoleSocket(tab);
+  if (tab && !consoleConnections.has(tab.id)) initConsoleSocket(tab);
 }
 
 function openConsoleWorkspace(nodeKey: string, title = "Console") {
@@ -166,11 +189,32 @@ function openConsoleWorkspace(nodeKey: string, title = "Console") {
 
 function openDataViewWorkspace(nodeKey: string, title = "Data View") {
   const tab = workspace.openDataViewTab(nodeKey, title);
-  if (tab && !tab.socket) initConsoleSocket(tab);
+  if (tab && !consoleConnections.has(tab.id)) initConsoleSocket(tab);
+}
+
+function closeConsoleSocket(id: string) {
+  const connection = consoleConnections.get(id);
+  connection?.close();
+  consoleConnections.delete(id);
+
+  const tab = workspace.workspaceTabState[id];
+  if (tab) tab.socket = null;
+}
+
+function closeAllConsoleSockets(reason = "") {
+  for (const [id, connection] of consoleConnections) {
+    connection.close();
+    const tab = workspace.workspaceTabState[id];
+    if (tab) {
+      tab.socket = null;
+      if (reason) tab.connectionError = reason;
+    }
+  }
+  consoleConnections.clear();
 }
 
 function closeWorkspaceTab(id: string) {
-  chenSocket.clearQueue(id);
+  closeConsoleSocket(id);
   workspace.closeTab(id);
 }
 
@@ -291,9 +335,9 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  session.cleanupSession();
-  workspace.workspaceTabs.value.forEach((item) => chenSocket.clearQueue(item.id));
+  closeAllConsoleSockets();
   workspace.closeAllTabs();
+  session.cleanupSession();
   window.removeEventListener("pointermove", handlePointerMove);
   window.removeEventListener("pointerup", stopResize);
 });
@@ -330,6 +374,14 @@ defineExpose({ focus });
           @create="createWorkspaceTab"
         />
 
+        <div
+          v-if="activeConnectionError"
+          class="flex shrink-0 items-center gap-2 border-b border-error/25 bg-error/10 px-3 py-2 text-xs text-error"
+        >
+          <UIcon name="i-lucide-circle-alert" class="size-4 shrink-0" />
+          <span>{{ activeConnectionError }}</span>
+        </div>
+
         <div v-if="workspace.activeWorkspaceTab.value" class="min-h-0 flex-1">
           <QueryConsolePanel
             v-if="activeQueryTab"
@@ -378,6 +430,8 @@ defineExpose({ focus });
       :icon="session.error.value ? 'i-lucide-circle-alert' : 'i-lucide-loader-circle'"
       :loading="!session.error.value"
       :message="session.error.value || session.dialogMessage.value || 'Starting database workspace...'"
+      :action-label="session.error.value ? 'Retry' : undefined"
+      @action="session.retrySession"
     />
   </div>
 </template>