Fix KV browser

Author: max-lt

src/app/modules/kv/components/kv-data-browser.component.html

@@ -31,8 +31,8 @@
         } @else { @for (item of items; track item.key) {
         <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
           <td class="px-4 py-3 font-mono text-sm">{{ item.key }}</td>
-          <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 max-w-md truncate">
-            {{ truncate(item.value) }}
+          <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 max-w-md truncate font-mono">
+            {{ formatValue(item.value) }}
           </td>
           <td class="px-4 py-3 text-sm text-gray-500">{{ formatDate(item.expiresAt) }}</td>
           <td class="px-4 py-3 text-right">

src/app/modules/kv/components/kv-data-browser.component.ts

@@ -80,7 +80,8 @@ export class KvDataBrowserComponent implements OnInit {
   }
 
   openEdit(item: KvDataItem) {
-    this.editingItem = { key: item.key, value: item.value, expiresIn: null, isNew: false };
+    const valueStr = typeof item.value === 'string' ? item.value : JSON.stringify(item.value, null, 2);
+    this.editingItem = { key: item.key, value: valueStr, expiresIn: null, isNew: false };
   }
 
   closeEdit() {
@@ -90,10 +91,19 @@ export class KvDataBrowserComponent implements OnInit {
   save() {
     if (!this.editingItem) return;
 
+    // Try to parse as JSON, fallback to string
+    let value: unknown = this.editingItem.value;
+
+    try {
+      value = JSON.parse(this.editingItem.value);
+    } catch {
+      // Keep as string if not valid JSON
+    }
+
     this.kvDataService.put(
       this.namespaceId,
       this.editingItem.key,
-      this.editingItem.value,
+      value,
       this.editingItem.expiresIn ?? undefined
     ).subscribe({
       next: () => {
@@ -130,9 +140,12 @@ export class KvDataBrowserComponent implements OnInit {
     });
   }
 
-  truncate(value: string, maxLength = 100): string {
-    if (value.length <= maxLength) return value;
-    return value.slice(0, maxLength) + '...';
+  formatValue(value: unknown, maxLength = 100): string {
+    const str = typeof value === 'string' ? value : JSON.stringify(value);
+
+    if (str.length <= maxLength) return str;
+
+    return str.slice(0, maxLength) + '...';
   }
 
   formatDate(date: string | null): string {

src/app/services/kv-data.service.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 
 export interface KvDataItem {
   key: string;
-  value: string;
+  value: unknown;
   expiresAt: string | null;
   createdAt: string;
   updatedAt: string;
@@ -46,7 +46,7 @@ export class KvDataService {
   put(
     namespaceId: string,
     key: string,
-    value: string,
+    value: unknown,
     expiresIn?: number
   ): Observable<KvDataItem> {
     return this.http.put<KvDataItem>(