better msgpack and text detection and ui fixes

Author: darkoatanasovski

app/app/page.tsx

@@ -10,6 +10,7 @@ import { KeyList } from "@/components/key/list";
 import { KeyDetailsContent } from "@/components/key/content";
 import { KeyDetailsHeader } from "@/components/key/header";
 import Cluster from "@/components/cluster";
+import { useCluster } from "@/hooks/use-cluster";
 
 export default function Home() {
   const {
@@ -27,6 +28,7 @@ export default function Home() {
   const [view, setView] = useState<"raw" | "parsed">("parsed");
   const [searchQuery, setSearchQuery] = useState("");
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const { clusters, listClusters, switchCluster } = useCluster();
 
   const [pdAddrs, setPdAddrs] = useState("");
 
@@ -39,8 +41,9 @@ export default function Home() {
 
   // Initial load
   useEffect(() => {
+    listClusters();
     loadKeys("", "", true);
-  }, [loadKeys]);
+  }, [loadKeys, listClusters]);
 
   // Debounced search effect
   useEffect(() => {
@@ -77,6 +80,7 @@ export default function Home() {
           loadKeys={loadKeys}
           getNextKey={getNextKey}
           searchQuery={searchQuery}
+          listClusters={listClusters}
         />
         <KeyList
           keys={keys}
@@ -103,11 +107,15 @@ export default function Home() {
           <KeyDetailsContent selectedItem={selectedItem} view={view} />
         ) : (
           <div className="flex flex-col items-center justify-center gap-2 h-screen opacity-70">
-            <MousePointerClickIcon size={130} />
+            <MousePointerClickIcon size={130} className="opacity-50" />
             <div>Select a key to view details</div>
           </div>
         )}
-        <Cluster onChange={() => loadKeys("", "", true)} />
+        <Cluster
+          onChange={() => loadKeys("", "", true)}
+          switchCluster={switchCluster}
+          clusters={clusters}
+        />
       </div>
 
       <DeleteKeyDialog

app/components/cluster.tsx

@@ -1,5 +1,4 @@
 import { CheckCircle2Icon, ServerIcon } from "lucide-react";
-import { useCluster } from "@/hooks/use-cluster";
 import { useEffect, useState } from "react";
 import {
   Dialog,
@@ -8,21 +7,25 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { ClusterInfo } from "@/hooks/use-cluster";
 
-export default function Cluster({ onChange }: { onChange?: () => void }) {
-  const { clusters, listClusters, switchCluster } = useCluster();
+export default function Cluster({
+  onChange,
+  switchCluster,
+  clusters,
+}: {
+  onChange: () => void;
+  switchCluster: (name: string) => Promise<void>;
+  clusters: ClusterInfo[];
+}) {
   const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    listClusters();
-  }, [listClusters]);
-
   const activeCluster = clusters.find((c) => c.active);
 
   const handleSwitch = async (name: string) => {
     await switchCluster(name);
-    setOpen(false);
     onChange?.();
+    setOpen(false);
   };
 
   if (!activeCluster && clusters.length === 0) return null;

app/components/sidebar.tsx

@@ -6,12 +6,21 @@ import TiKV from "@/assets/img/tikv.webp";
 import { SettingsDialog } from "./dialogs/settings";
 import { AddKeyDialog } from "./dialogs/addkey";
 
+interface SidebarProps {
+  addKey: (key: string, value: string) => Promise<void>;
+  loadKeys: (key: string, endKey: string, reverse: boolean) => void;
+  getNextKey: (key: string) => string;
+  searchQuery: string;
+  listClusters: () => void;
+}
+
 export default function Sidebar({
   addKey,
   loadKeys,
   getNextKey,
   searchQuery,
-}: any) {
+  listClusters,
+}: SidebarProps) {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [addDialogOpen, setAddDialogOpen] = useState(false);
 
@@ -53,7 +62,10 @@ export default function Sidebar({
       <SettingsDialog
         open={settingsOpen}
         onOpenChange={setSettingsOpen}
-        onChange={() => loadKeys("", "", true)}
+        onChange={() => {
+          listClusters();
+          loadKeys("", "", true);
+        }}
       />
 
       <AddKeyDialog

pkg/utils/msgpack.go

@@ -2,40 +2,36 @@ package utils
 
 import (
 	"encoding/json"
+	"unicode/utf8"
 
 	"github.com/vmihailenco/msgpack/v5"
 )
 
-// ParseValue attempts to parse a byte slice as msgpack and return a structured value
-// If parsing fails, it returns the raw string
+// ParseValue attempts to parse a byte slice as msgpack / JSON and return a structured value.
 func ParseValue(data []byte) (parsed any, raw string) {
 	raw = string(data)
 
-	// If the data is valid UTF-8 and doesn't contain msgpack markers, treat it as plain text
 	if isPlainText(data) {
-		// Try to decode as JSON even if it looks like plain text
 		var decoded any
 		if err := json.Unmarshal(data, &decoded); err == nil {
 			return decoded, raw
 		}
+
 		return raw, raw
 	}
 
-	// Try to decode as msgpack
 	var decoded any
 	if err := msgpack.Unmarshal(data, &decoded); err != nil {
-		// If msgpack fails, try JSON
 		if err := json.Unmarshal(data, &decoded); err != nil {
-			// If both fail, return the raw string as the parsed value
 			return raw, raw
 		}
 		return decoded, raw
 	}
 
-	// If msgpack decoded to a simple type (int, float, bool) but the raw data looks like text,
-	// it's probably a false positive - return the raw string instead
 	switch decoded.(type) {
-	case int, int8, int16, int32, int64, uint, uint8, uint16, uint32, uint64, float32, float64:
+	case int, int8, int16, int32, int64,
+		uint, uint8, uint16, uint32, uint64,
+		float32, float64:
 		if isPlainText(data) {
 			return raw, raw
 		}
@@ -44,31 +40,34 @@ func ParseValue(data []byte) (parsed any, raw string) {
 	return decoded, raw
 }
 
-// isPlainText checks if the data appears to be plain text rather than binary/msgpack
+// isPlainText checks if the data appears to be plain text (UTF-8, mostly printable)
+// rather than binary/msgpack.
 func isPlainText(data []byte) bool {
-	// Check if it's valid UTF-8
-	if !json.Valid([]byte(`"` + string(data) + `"`)) {
-		// If not valid as JSON string, check for msgpack markers
-		if len(data) > 0 {
-			first := data[0]
-			// Check for common msgpack markers (maps, arrays, etc.)
-			if first >= 0x80 && first <= 0x9f {
-				return false
-			}
-			if first >= 0xde {
-				return false
-			}
+	if len(data) == 0 {
+		return false
+	}
+
+	if !utf8.Valid(data) {
+		return false
+	}
+
+	controlCount := 0
+	for _, b := range data {
+		if b < 0x20 && b != '\n' && b != '\r' && b != '\t' {
+			controlCount++
 		}
 	}
 
-	// If it contains mostly printable ASCII/UTF-8 characters, treat as plain text
+	if controlCount > 0 {
+		return false
+	}
+
 	printable := 0
 	for _, b := range data {
-		if b >= 32 && b <= 126 || b >= 128 {
+		if (b >= 0x20 && b <= 0x7E) || b >= 0x80 {
 			printable++
 		}
 	}
 
-	// If more than 80% is printable, consider it plain text ( 80% is randomly choosen =) )
-	return len(data) > 0 && float64(printable)/float64(len(data)) > 0.8
+	return float64(printable)/float64(len(data)) > 0.8
 }