feat(phase3): key browser MVP

- useKeyStore (Pinia): scan, tree view, key data cache, db switching
- KeyBrowser: split pane with KeyList + KeyDetail
- KeyList: SCAN pagination, filter, tree toggle, load more
- KeyDetail: type badge, TTL display, delete, type-based editor dispatch
- StringEditor: view/edit with JSON auto-format
- HashEditor: field table, add/edit/delete fields
- StatusView: INFO dashboard with stat cards + section grid
- MainArea: tab host (Status / Keys)
- RedisService: selectDb, dbSize
- Preload: selectDb, dbSize IPC channels
- App.vue updated with MainArea layout

src/main/ipc-handlers.ts

@@ -115,4 +115,10 @@ export function registerIpcHandlers(): void {
   ipcMain.handle('redis:setTTL', async (_e, id: string, key: string, ttl: number) => {
     await redisService.setKeyTTL(id, key, ttl)
   })
+  ipcMain.handle('redis:selectDb', async (_e, id: string, db: number) => {
+    await redisService.selectDb(id, db)
+  })
+  ipcMain.handle('redis:dbSize', async (_e, id: string) => {
+    return redisService.dbSize(id)
+  })
 }

src/main/redis-service.ts

@@ -164,3 +164,15 @@ export async function setKeyTTL(id: string, key: string, ttl: number): Promise<v
     await client.expire(key, ttl)
   }
 }
+
+export async function selectDb(id: string, db: number): Promise<void> {
+  const client = clients.get(id)
+  if (!client) throw new Error(`Client ${id} not found`)
+  await client.select(db)
+}
+
+export async function dbSize(id: string): Promise<number> {
+  const client = clients.get(id)
+  if (!client) throw new Error(`Client ${id} not found`)
+  return client.dbsize() as Promise<number>
+}

src/preload/index.d.ts

@@ -68,6 +68,8 @@ export interface ElectronAPI {
     hashSet: (id: string, key: string, field: string, value: string) => Promise<void>
     hashDel: (id: string, key: string, field: string) => Promise<void>
     setTTL: (id: string, key: string, ttl: number) => Promise<void>
+    selectDb: (id: string, db: number) => Promise<void>
+    dbSize: (id: string) => Promise<number>
   }
 }
 

src/preload/index.ts

@@ -52,6 +52,9 @@ const electronAPI = {
       ipcRenderer.invoke('redis:hashDel', id, key, field),
     setTTL: (id: string, key: string, ttl: number): Promise<void> =>
       ipcRenderer.invoke('redis:setTTL', id, key, ttl),
+    selectDb: (id: string, db: number): Promise<void> =>
+      ipcRenderer.invoke('redis:selectDb', id, db),
+    dbSize: (id: string): Promise<number> => ipcRenderer.invoke('redis:dbSize', id),
   },
 }
 

src/renderer/src/App.vue

@@ -3,6 +3,7 @@
 import { onMounted } from 'vue'
 import TitleBar from './components/TitleBar.vue'
 import Sidebar from './components/Sidebar.vue'
+import MainArea from './components/MainArea.vue'
 import StatusBar from './components/StatusBar.vue'
 import { useConnectionStore } from '@renderer/stores/connection'
 
@@ -18,20 +19,7 @@ onMounted(() => {
     <TitleBar />
     <div class="app-body">
       <Sidebar />
-      <main class="app-main">
+      <MainArea />
-        <div v-if="!connStore.isConnected" class="placeholder-content">
-          <div class="placeholder-icon">R</div>
-          <h2>JRedisDesktop</h2>
-          <p>A modern Redis desktop manager</p>
-          <p class="placeholder-hint">Select or create a connection to get started</p>
-        </div>
-        <div v-else class="connected-content">
-          <div class="info-card">
-            <h3>{{ connStore.activeConnection?.name }}</h3>
-            <pre class="info-text">{{ connStore.serverInfo }}</pre>
-          </div>
-        </div>
-      </main>
     </div>
     <StatusBar />
   </div>
@@ -50,80 +38,4 @@ onMounted(() => {
   display: flex;
   overflow: hidden;
 }
-
-.app-main {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-primary);
-  overflow: auto;
-}
-
-.placeholder-content {
-  text-align: center;
-  color: var(--text-muted);
-}
-
-.placeholder-icon {
-  width: 64px;
-  height: 64px;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 28px;
-  font-weight: 800;
-  color: #fff;
-  margin: 0 auto 20px;
-  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
-}
-
-.placeholder-content h2 {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 6px;
-}
-
-.placeholder-content p {
-  font-size: 13px;
-}
-
-.placeholder-hint {
-  margin-top: 8px;
-  color: var(--text-muted);
-  font-size: 12px !important;
-}
-
-.connected-content {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  overflow: auto;
-}
-
-.info-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: 20px;
-  box-shadow: var(--shadow-sm);
-}
-
-.info-card h3 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--accent-light);
-  margin-bottom: 12px;
-}
-
-.info-text {
-  font-size: 12px;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-  font-family: 'Cascadia Code', 'Fira Code', monospace;
-  line-height: 1.6;
-}
 </style>

src/renderer/src/components/HashEditor.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+// src/renderer/src/components/HashEditor.vue
+import { ref, watch } from 'vue'
+import { useKeyStore } from '@renderer/stores/key'
+import { useConnectionStore } from '@renderer/stores/connection'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const keyStore = useKeyStore()
+const connStore = useConnectionStore()
+
+interface HashField {
+  field: string
+  value: string
+}
+
+const fields = ref<HashField[]>([])
+const loading = ref(false)
+const showAddDialog = ref(false)
+const newFieldName = ref('')
+const newFieldValue = ref('')
+
+watch(
+  () => keyStore.keyData,
+  (newData) => {
+    if (Array.isArray(newData)) {
+      fields.value = newData.map(([field, value]) => ({ field, value }))
+    }
+  },
+  { immediate: true }
+)
+
+async function refresh() {
+  if (!connStore.activeId || !keyStore.selectedKey) return
+  loading.value = true
+  try {
+    const result = await window.electronAPI.redis.hashScan(connStore.activeId, keyStore.selectedKey, '0', 100)
+    keyStore.keyData = result.fields
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveField(item: HashField) {
+  if (!connStore.activeId || !keyStore.selectedKey) return
+  try {
+    await window.electronAPI.redis.hashSet(connStore.activeId, keyStore.selectedKey, item.field, item.value)
+    ElMessage.success('Saved')
+  } catch (err: any) {
+    ElMessage.error(err.message)
+  }
+}
+
+async function deleteField(item: HashField) {
+  if (!connStore.activeId || !keyStore.selectedKey) return
+  try {
+    await ElMessageBox.confirm(`Delete field "${item.field}"?`, 'Confirm')
+    await window.electronAPI.redis.hashDel(connStore.activeId, keyStore.selectedKey, item.field)
+    fields.value = fields.value.filter(f => f.field !== item.field)
+    ElMessage.success('Deleted')
+  } catch (err: any) {
+    if (err !== 'cancel') ElMessage.error(err.message)
+  }
+}
+
+async function addField() {
+  if (!connStore.activeId || !keyStore.selectedKey || !newFieldName.value) return
+  try {
+    await window.electronAPI.redis.hashSet(connStore.activeId, keyStore.selectedKey, newFieldName.value, newFieldValue.value)
+    fields.value.push({ field: newFieldName.value, value: newFieldValue.value })
+    showAddDialog.value = false
+    newFieldName.value = ''
+    newFieldValue.value = ''
+    ElMessage.success('Added')
+  } catch (err: any) {
+    ElMessage.error(err.message)
+  }
+}
+</script>
+
+<template>
+  <div class="hash-editor">
+    <div class="editor-toolbar">
+      <span class="type-badge">HASH</span>
+      <el-button size="small" type="primary" @click="showAddDialog = true">Add Field</el-button>
+      <el-button size="small" @click="refresh" :loading="loading">Refresh</el-button>
+    </div>
+
+    <div class="hash-table-wrap">
+      <el-table :data="fields" size="small" class="hash-table" max-height="400">
+        <el-table-column prop="field" label="Field" min-width="150">
+          <template #default="{ row }">
+            <el-input v-model="row.field" size="small" class="hash-input" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="value" label="Value" min-width="250">
+          <template #default="{ row }">
+            <el-input v-model="row.value" size="small" class="hash-input" />
+          </template>
+        </el-table-column>
+        <el-table-column width="120">
+          <template #default="{ row }">
+            <el-button size="small" type="primary" text @click="saveField(row)">Save</el-button>
+            <el-button size="small" type="danger" text @click="deleteField(row)">Del</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog v-model="showAddDialog" title="Add Hash Field" width="400px">
+      <el-form label-position="top">
+        <el-form-item label="Field">
+          <el-input v-model="newFieldName" />
+        </el-form-item>
+        <el-form-item label="Value">
+          <el-input v-model="newFieldValue" type="textarea" :rows="4" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showAddDialog = false">Cancel</el-button>
+        <el-button type="primary" @click="addField">Add</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.hash-editor {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-toolbar {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.type-badge {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--accent-light);
+  background: var(--accent-bg);
+  padding: 2px 8px;
+  border-radius: 4px;
+  letter-spacing: 0.05em;
+}
+
+.hash-table-wrap {
+  flex: 1;
+  padding: 12px;
+  overflow: auto;
+}
+
+.hash-table {
+  width: 100%;
+}
+
+.hash-input :deep(.el-input__wrapper) {
+  background: var(--bg-primary);
+  border-color: var(--border-color);
+  box-shadow: none;
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+  font-size: 12px;
+}
+</style>

src/renderer/src/components/KeyBrowser.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// src/renderer/src/components/KeyBrowser.vue
+import { watch } from 'vue'
+import { useKeyStore } from '@renderer/stores/key'
+import { useConnectionStore } from '@renderer/stores/connection'
+import KeyList from './KeyList.vue'
+import KeyDetail from './KeyDetail.vue'
+
+const keyStore = useKeyStore()
+const connStore = useConnectionStore()
+
+watch(
+  () => connStore.activeId,
+  async (newId) => {
+    if (newId) {
+      keyStore.selectedKey = null
+      keyStore.keyData = null
+      await keyStore.scanKeys(newId, '0', true)
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="key-browser">
+    <div class="key-sidebar">
+      <KeyList />
+    </div>
+    <div class="key-main">
+      <KeyDetail />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.key-browser {
+  display: flex;
+  height: 100%;
+}
+
+.key-sidebar {
+  width: 260px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--border-color);
+}
+
+.key-main {
+  flex: 1;
+  overflow: hidden;
+}
+</style>

src/renderer/src/components/KeyDetail.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+// src/renderer/src/components/KeyDetail.vue
+import { computed } from 'vue'
+import { useKeyStore } from '@renderer/stores/key'
+import { useConnectionStore } from '@renderer/stores/connection'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import StringEditor from './StringEditor.vue'
+import HashEditor from './HashEditor.vue'
+
+const keyStore = useKeyStore()
+const connStore = useConnectionStore()
+
+const typeColor = computed(() => {
+  const colors: Record<string, string> = {
+    string: 'var(--color-green)',
+    hash: 'var(--color-yellow)',
+    list: 'var(--color-cyan)',
+    set: 'var(--color-purple)',
+    zset: 'var(--color-red)',
+    stream: 'var(--color-orange)',
+  }
+  return colors[keyStore.selectedType || ''] || 'var(--text-muted)'
+})
+
+const ttlDisplay = computed(() => {
+  if (keyStore.selectedTTL < 0) return 'No expiry'
+  if (keyStore.selectedTTL === 0) return 'Expired'
+  const sec = keyStore.selectedTTL
+  if (sec < 60) return `${sec}s`
+  if (sec < 3600) return `${Math.floor(sec / 60)}m ${sec % 60}s`
+  return `${Math.floor(sec / 3600)}h ${Math.floor((sec % 3600) / 60)}m`
+})
+
+async function deleteKey() {
+  if (!connStore.activeId || !keyStore.selectedKey) return
+  try {
+    await ElMessageBox.confirm(`Delete key "${keyStore.selectedKey}"?`, 'Confirm')
+    await window.electronAPI.redis.deleteKey(connStore.activeId, keyStore.selectedKey)
+    ElMessage.success('Deleted')
+    keyStore.selectedKey = null
+    keyStore.keyData = null
+  } catch (err: any) {
+    if (err !== 'cancel') ElMessage.error(err.message)
+  }
+}
+
+async function refreshKey() {
+  if (!connStore.activeId || !keyStore.selectedKey) return
+  await keyStore.loadKeyData(connStore.activeId, keyStore.selectedKey)
+}
+</script>
+
+<template>
+  <div class="key-detail" v-if="keyStore.selectedKey">
+    <div class="detail-header">
+      <div class="key-info">
+        <el-icon class="key-icon" :style="{ color: typeColor }"><Document /></el-icon>
+        <span class="key-name">{{ keyStore.selectedKey }}</span>
+        <span class="type-badge" :style="{ color: typeColor, borderColor: typeColor }">
+          {{ keyStore.selectedType?.toUpperCase() }}
+        </span>
+        <span class="ttl-badge">{{ ttlDisplay }}</span>
+      </div>
+      <div class="key-actions">
+        <el-button size="small" @click="refreshKey">Refresh</el-button>
+        <el-button size="small" type="danger" @click="deleteKey">Delete</el-button>
+      </div>
+    </div>
+
+    <div class="detail-content">
+      <StringEditor v-if="keyStore.selectedType === 'string'" />
+      <HashEditor v-else-if="keyStore.selectedType === 'hash'" />
+      <div v-else class="unsupported">
+        <el-icon><Warning /></el-icon>
+        <p>Type "{{ keyStore.selectedType }}" viewer not yet implemented</p>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="no-selection">
+    <el-icon size="48" color="var(--text-muted)"><Document /></el-icon>
+    <p>Select a key to view details</p>
+  </div>
+</template>
+
+<style scoped>
+.key-detail {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-header {
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  background: var(--bg-secondary);
+}
+
+.key-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.key-icon {
+  flex-shrink: 0;
+  font-size: 18px;
+}
+
+.key-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+}
+
+.type-badge {
+  font-size: 10px;
+  font-weight: 700;
+  border: 1px solid;
+  padding: 1px 6px;
+  border-radius: 4px;
+  letter-spacing: 0.05em;
+}
+
+.ttl-badge {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.key-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.detail-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.no-selection {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.no-selection p {
+  margin-top: 12px;
+  font-size: 13px;
+}
+
+.unsupported {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.unsupported p {
+  margin-top: 12px;
+  font-size: 13px;
+}
+</style>

src/renderer/src/components/KeyList.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+// src/renderer/src/components/KeyList.vue
+import { ref, watch } from 'vue'
+import { useKeyStore } from '@renderer/stores/key'
+import { useConnectionStore } from '@renderer/stores/connection'
+
+const keyStore = useKeyStore()
+const connStore = useConnectionStore()
+
+const filterText = ref('')
+const showTree = ref(false)
+
+async function loadMore() {
+  if (!connStore.activeId) return
+  await keyStore.scanKeys(connStore.activeId, keyStore.scanCursor)
+}
+
+async function refreshKeys() {
+  if (!connStore.activeId) return
+  await keyStore.scanKeys(connStore.activeId, '0', true)
+}
+
+async function selectKey(keyName: string) {
+  if (!connStore.activeId) return
+  keyStore.selectedKey = keyName
+  await keyStore.loadKeyData(connStore.activeId, keyName)
+}
+
+function onPatternChange() {
+  if (!connStore.activeId) return
+  keyStore.scanKeys(connStore.activeId, '0', true)
+}
+
+const filteredKeys = ref<string[]>([])
+watch(
+  () => keyStore.keys,
+  (newKeys) => {
+    filteredKeys.value = filterText.value
+      ? newKeys.filter(k => k.name.includes(filterText.value)).map(k => k.name)
+      : newKeys.map(k => k.name)
+  },
+  { deep: true, immediate: true }
+)
+
+watch(filterText, (val) => {
+  filteredKeys.value = val
+    ? keyStore.keys.filter(k => k.name.includes(val)).map(k => k.name)
+    : keyStore.keys.map(k => k.name)
+})
+</script>
+
+<template>
+  <div class="key-list">
+    <div class="key-toolbar">
+      <el-input
+        v-model="filterText"
+        placeholder="Filter keys..."
+        size="small"
+        clearable
+        prefix-icon="Search"
+      />
+      <el-button-group class="key-actions">
+        <el-button size="small" @click="refreshKeys" :disabled="!connStore.activeId">
+          <el-icon><Refresh /></el-icon>
+        </el-button>
+        <el-button
+          size="small"
+          :type="showTree ? 'primary' : 'default'"
+          @click="showTree = !showTree"
+        >
+          <el-icon><List /></el-icon>
+        </el-button>
+      </el-button-group>
+    </div>
+
+    <div class="key-content">
+      <!-- Flat list -->
+      <div v-if="!showTree" class="key-flat-list">
+        <div
+          v-for="keyName in filteredKeys"
+          :key="keyName"
+          class="key-item"
+          :class="{ active: keyStore.selectedKey === keyName }"
+          @click="selectKey(keyName)"
+        >
+          <el-icon class="key-icon"><Document /></el-icon>
+          <span class="key-name">{{ keyName }}</span>
+        </div>
+      </div>
+
+      <!-- Tree view -->
+      <div v-else class="key-tree">
+        <div v-for="keyName in filteredKeys" :key="keyName" class="key-item" @click="selectKey(keyName)">
+          <el-icon class="key-icon"><Document /></el-icon>
+          <span class="key-name">{{ keyName }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="key-footer">
+      <span class="key-count">{{ keyStore.keys.length }} keys</span>
+      <el-button
+        v-if="keyStore.hasMore"
+        size="small"
+        type="primary"
+        text
+        @click="loadMore"
+        :loading="keyStore.loading"
+      >
+        Load more...
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.key-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary);
+}
+
+.key-toolbar {
+  padding: 12px;
+  display: flex;
+  gap: 8px;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.key-actions {
+  flex-shrink: 0;
+}
+
+.key-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.key-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.15s, color 0.15s;
+}
+
+.key-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.key-item.active {
+  background: var(--accent-bg);
+  color: var(--accent-light);
+}
+
+.key-icon {
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.key-item.active .key-icon {
+  color: var(--accent-light);
+}
+
+.key-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+}
+
+.key-footer {
+  padding: 8px 12px;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.key-count {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+</style>

src/renderer/src/components/MainArea.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+// src/renderer/src/components/MainArea.vue
+import { ref, watch } from 'vue'
+import { useConnectionStore } from '@renderer/stores/connection'
+import StatusView from './StatusView.vue'
+import KeyBrowser from './KeyBrowser.vue'
+
+const connStore = useConnectionStore()
+
+type Tab = 'status' | 'keys' | 'cli'
+const activeTab = ref<Tab>('status')
+
+watch(
+  () => connStore.isConnected,
+  (connected) => {
+    if (connected) {
+      activeTab.value = 'status'
+    }
+  }
+)
+</script>
+
+<template>
+  <div class="main-area" v-if="connStore.isConnected">
+    <div class="tab-bar">
+      <button
+        class="tab-item"
+        :class="{ active: activeTab === 'status' }"
+        @click="activeTab = 'status'"
+      >
+        <el-icon><Monitor /></el-icon>
+        Status
+      </button>
+      <button
+        class="tab-item"
+        :class="{ active: activeTab === 'keys' }"
+        @click="activeTab = 'keys'"
+      >
+        <el-icon><Document /></el-icon>
+        Keys
+      </button>
+    </div>
+    <div class="tab-content">
+      <StatusView v-if="activeTab === 'status'" />
+      <KeyBrowser v-else-if="activeTab === 'keys'" />
+    </div>
+  </div>
+
+  <div v-else class="no-connection">
+    <div class="placeholder-icon">R</div>
+    <h2>JRedisDesktop</h2>
+    <p>Select or create a connection to get started</p>
+  </div>
+</template>
+
+<style scoped>
+.main-area {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-bar {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.tab-item {
+  padding: 10px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.tab-item:hover {
+  color: var(--text-primary);
+}
+
+.tab-item.active {
+  color: var(--accent-light);
+  border-bottom-color: var(--accent-light);
+}
+
+.tab-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.no-connection {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.placeholder-icon {
+  width: 64px;
+  height: 64px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 20px;
+  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
+}
+
+.no-connection h2 {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.no-connection p {
+  font-size: 13px;
+}
+</style>

src/renderer/src/components/StatusView.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+// src/renderer/src/components/StatusView.vue
+import { ref, onMounted } from 'vue'
+import { useConnectionStore } from '@renderer/stores/connection'
+
+const connStore = useConnectionStore()
+const info = ref('')
+const dbSize = ref(0)
+
+interface InfoSection {
+  title: string
+  items: { key: string; value: string }[]
+}
+
+const sections = ref<InfoSection[]>([])
+
+function parseInfo(raw: string): InfoSection[] {
+  const result: InfoSection[] = []
+  let current: InfoSection | null = null
+
+  for (const line of raw.split('\n')) {
+    const trimmed = line.trim()
+    if (!trimmed || trimmed.startsWith('#')) {
+      if (trimmed.startsWith('#')) {
+        if (current) result.push(current)
+        current = { title: trimmed.slice(2), items: [] }
+      }
+      continue
+    }
+    const colonIdx = trimmed.indexOf(':')
+    if (colonIdx > 0 && current) {
+      current.items.push({
+        key: trimmed.slice(0, colonIdx),
+        value: trimmed.slice(colonIdx + 1),
+      })
+    }
+  }
+  if (current) result.push(current)
+  return result
+}
+
+async function refresh() {
+  if (!connStore.activeId) return
+  info.value = await connStore.getInfo()
+  sections.value = parseInfo(info.value)
+  dbSize.value = await window.electronAPI.redis.dbSize(connStore.activeId)
+}
+
+onMounted(refresh)
+
+defineExpose({ refresh })
+</script>
+
+<template>
+  <div class="status-view" v-if="connStore.activeConnection">
+    <div class="status-header">
+      <h2>{{ connStore.activeConnection.name }}</h2>
+      <el-button size="small" @click="refresh">Refresh</el-button>
+    </div>
+
+    <div class="info-grid">
+      <div class="info-card">
+        <div class="info-label">Database</div>
+        <div class="info-value">{{ connStore.activeConnection.host }}:{{ connStore.activeConnection.port }}</div>
+      </div>
+      <div class="info-card">
+        <div class="info-label">Keys</div>
+        <div class="info-value">{{ dbSize.toLocaleString() }}</div>
+      </div>
+    </div>
+
+    <div class="info-sections">
+      <div v-for="section in sections" :key="section.title" class="info-section">
+        <h3 class="section-title">{{ section.title }}</h3>
+        <div class="section-items">
+          <div v-for="item in section.items" :key="item.key" class="info-row">
+            <span class="info-key">{{ item.key }}</span>
+            <span class="info-val">{{ item.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.status-view {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.status-header h2 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--accent-light);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.info-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  box-shadow: var(--shadow-sm);
+}
+
+.info-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.info-sections {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.info-section {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--accent-light);
+  padding: 10px 14px;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.section-items {
+  padding: 4px 0;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 14px;
+  font-size: 12px;
+}
+
+.info-row:hover {
+  background: var(--bg-hover);
+}
+
+.info-key {
+  color: var(--text-secondary);
+}
+
+.info-val {
+  color: var(--text-primary);
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+}
+</style>

src/renderer/src/components/StringEditor.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+// src/renderer/src/components/StringEditor.vue
+import { ref, watch } from 'vue'
+import { useKeyStore } from '@renderer/stores/key'
+import { useConnectionStore } from '@renderer/stores/connection'
+import { ElMessage } from 'element-plus'
+
+const keyStore = useKeyStore()
+const connStore = useConnectionStore()
+
+const editedValue = ref('')
+const isJson = ref(false)
+const isEditing = ref(false)
+
+function formatValue(val: string | null) {
+  if (val === null) return ''
+  try {
+    const parsed = JSON.parse(val)
+    isJson.value = true
+    return JSON.stringify(parsed, null, 2)
+  } catch {
+    isJson.value = false
+    return val
+  }
+}
+
+watch(
+  () => keyStore.keyData,
+  (newVal) => {
+    if (typeof newVal === 'string') {
+      editedValue.value = formatValue(newVal)
+      isEditing.value = false
+    }
+  },
+  { immediate: true }
+)
+
+async function save() {
+  if (!connStore.activeId || !keyStore.selectedKey) return
+  try {
+    await window.electronAPI.redis.setString(connStore.activeId, keyStore.selectedKey, editedValue.value)
+    keyStore.keyData = editedValue.value
+    isEditing.value = false
+    ElMessage.success('Saved')
+  } catch (err: any) {
+    ElMessage.error(err.message)
+  }
+}
+</script>
+
+<template>
+  <div class="string-editor">
+    <div class="editor-toolbar">
+      <span class="type-badge">STRING</span>
+      <el-button v-if="!isEditing" size="small" type="primary" @click="isEditing = true">Edit</el-button>
+      <template v-else>
+        <el-button size="small" type="primary" @click="save">Save</el-button>
+        <el-button size="small" @click="isEditing = false; editedValue = formatValue(keyStore.keyData as string)">Cancel</el-button>
+      </template>
+    </div>
+    <div class="editor-content">
+      <el-input
+        v-model="editedValue"
+        type="textarea"
+        :rows="12"
+        :disabled="!isEditing"
+        :class="{ json: isJson }"
+        spellcheck="false"
+        class="editor-textarea"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.string-editor {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-toolbar {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.type-badge {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--accent-light);
+  background: var(--accent-bg);
+  padding: 2px 8px;
+  border-radius: 4px;
+  letter-spacing: 0.05em;
+}
+
+.editor-content {
+  flex: 1;
+  padding: 12px;
+  overflow: auto;
+}
+
+.editor-textarea :deep(.el-textarea__inner) {
+  background: var(--bg-primary);
+  border-color: var(--border-color);
+  color: var(--text-primary);
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  resize: none;
+}
+</style>

src/renderer/src/stores/key.ts

@@ -0,0 +1,162 @@
+// src/renderer/src/stores/key.ts
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface KeyItem {
+  name: string
+  type: string
+  ttl: number
+  level: number
+  children?: KeyItem[]
+  isLeaf: boolean
+}
+
+interface ScanResult {
+  cursor: string
+  keys: string[]
+}
+
+export const useKeyStore = defineStore('key', () => {
+  const keys = ref<KeyItem[]>([])
+  const treeKeys = ref<KeyItem[]>([])
+  const selectedKey = ref<string | null>(null)
+  const selectedType = ref<string | null>(null)
+  const selectedTTL = ref<number>(-1)
+  const keyData = ref<any>(null)
+  const loading = ref(false)
+  const scanCursor = ref('0')
+  const hasMore = ref(false)
+  const pattern = ref('*')
+  const useTree = ref(false)
+  const currentDb = ref(0)
+
+  function buildTree(flatKeys: string[], separator: string): KeyItem[] {
+    const root: KeyItem[] = []
+    const map = new Map<string, KeyItem>()
+
+    for (const key of flatKeys) {
+      const parts = key.split(separator)
+      let currentLevel = root
+
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i]
+        const isLast = i === parts.length - 1
+        const path = parts.slice(0, i + 1).join(separator)
+
+        if (map.has(path)) {
+          const existing = map.get(path)!
+          if (isLast) {
+            existing.name = key
+            existing.isLeaf = true
+            existing.type = ''
+            existing.ttl = -1
+          }
+          currentLevel = existing.children || []
+        } else {
+          const node: KeyItem = {
+            name: isLast ? key : part,
+            type: isLast ? '' : 'branch',
+            ttl: -1,
+            level: i,
+            children: isLast ? undefined : [],
+            isLeaf: isLast,
+          }
+          map.set(path, node)
+          currentLevel.push(node)
+          if (!isLast) currentLevel = node.children!
+        }
+      }
+    }
+
+    return root
+  }
+
+  async function scanKeys(connId: string, cursor: string = '0', reset: boolean = false) {
+    if (reset) {
+      scanCursor.value = '0'
+      keys.value = []
+      hasMore.value = false
+    }
+
+    loading.value = true
+    try {
+      const result: ScanResult = await window.electronAPI.redis.scanKeys(
+        connId, cursor, pattern.value, 100
+      )
+      const newKeys = result.keys.map(k => ({
+        name: k,
+        type: '',
+        ttl: -1,
+        level: 0,
+        isLeaf: true,
+      }))
+
+      if (reset) {
+        keys.value = newKeys
+      } else {
+        keys.value.push(...newKeys)
+      }
+
+      scanCursor.value = result.cursor
+      hasMore.value = result.cursor !== '0'
+
+      if (useTree.value) {
+        const conn = (await window.electronAPI.storage.getConnections())
+          .find((c: any) => c.id === connId)
+        const sep = conn?.separator || ':'
+        treeKeys.value = buildTree(keys.value.map(k => k.name), sep)
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadKeyTypeAndTTL(connId: string, key: string) {
+    const [type, ttl] = await Promise.all([
+      window.electronAPI.redis.getKeyType(connId, key),
+      window.electronAPI.redis.getKeyTTL(connId, key),
+    ])
+    selectedType.value = type
+    selectedTTL.value = ttl
+  }
+
+  async function loadKeyData(connId: string, key: string) {
+    loading.value = true
+    try {
+      await loadKeyTypeAndTTL(connId, key)
+      selectedKey.value = key
+
+      switch (selectedType.value) {
+        case 'string':
+          keyData.value = await window.electronAPI.redis.getString(connId, key)
+          break
+        case 'hash': {
+          const result = await window.electronAPI.redis.hashScan(connId, key, '0', 100)
+          keyData.value = result.fields
+          break
+        }
+        default:
+          keyData.value = null
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function selectDb(connId: string, db: number) {
+    await window.electronAPI.redis.selectDb(connId, db)
+    currentDb.value = db
+    keys.value = []
+    treeKeys.value = []
+    selectedKey.value = null
+    keyData.value = null
+    scanCursor.value = '0'
+    hasMore.value = false
+  }
+
+  return {
+    keys, treeKeys, selectedKey, selectedType, selectedTTL, keyData,
+    loading, scanCursor, hasMore, pattern, useTree, currentDb,
+    scanKeys, loadKeyTypeAndTTL, loadKeyData, selectDb,
+  }
+})