msgpack support

.gitignore

@@ -6,11 +6,11 @@
 !.yarn/versions
 
 node_modules
-
+.DS_Store
 
 #!.yarn/cache
 .pnp.*
 
 .bin/
 
-bin/
+bin/

app/components/key/content.tsx

@@ -1,5 +1,6 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { ScanItem } from "@/hooks/use-keys";
+import { formatRawValue } from "@/lib/utils";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
 
@@ -29,7 +30,7 @@ export function KeyDetailsContent({
               {JSON.stringify(selectedItem.value, null, 2)}
             </SyntaxHighlighter>
           ) : (
-            selectedItem.raw_value
+            formatRawValue(selectedItem.raw_value)
           )}
         </div>
       </div>

app/components/key/header.tsx

@@ -7,7 +7,7 @@ import {
   KeyIcon,
   TrashIcon,
 } from "lucide-react";
-import { formatBytes } from "@/lib/utils";
+import { formatBytes, rawValueByteLength } from "@/lib/utils";
 
 interface KeyDetailsHeaderProps {
   selectedItem: ScanItem | null;
@@ -30,7 +30,7 @@ export function KeyDetailsHeader({
         <KeyIcon size={14} strokeWidth={3} />
         {selectedItem.key}
         <span className="text-xs text-muted-foreground ml-2 font-normal">
-          ({formatBytes(selectedItem.raw_value.length)})
+          ({formatBytes(rawValueByteLength(selectedItem.raw_value))})
         </span>
       </div>
 

app/lib/utils.ts

@@ -5,6 +5,48 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+/** Decode API raw_value (plain text or base64-encoded binary) to a display string. */
+export function formatRawValue(raw: string): string {
+  if (!raw) return "";
+
+  try {
+    const binary = atob(raw);
+    const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+    const hex = Array.from(bytes)
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join(" ");
+
+    let text = "";
+    for (const b of bytes) {
+      if (b >= 0x20 && b <= 0x7e) {
+        text += String.fromCharCode(b);
+      } else if (b === 0x0a) {
+        text += "\\n";
+      } else if (b === 0x0d) {
+        text += "\\r";
+      } else if (b === 0x09) {
+        text += "\\t";
+      } else {
+        text += ".";
+      }
+    }
+
+    return `hex: ${hex}\n\nascii: ${text}`;
+  } catch {
+    return raw;
+  }
+}
+
+/** Byte length of an API raw_value string. */
+export function rawValueByteLength(raw: string): number {
+  if (!raw) return 0;
+  try {
+    return atob(raw).length;
+  } catch {
+    return new TextEncoder().encode(raw).length;
+  }
+}
+
 export function formatBytes(bytes: number, decimals = 2) {
   if (!+bytes) return "0 Bytes";
 

pkg/handlers/get.go

@@ -42,7 +42,8 @@ func Get(s *server.Server) http.HandlerFunc {
 			Key: req.Key,
 		}
 		if val != nil {
-			resp.Value, resp.RawValue = utils.ParseValue(val)
+			resp.Value, _ = utils.ParseValue(val)
+			resp.RawValue = utils.FormatRawValue(val)
 			resp.Found = true
 		}
 

pkg/handlers/scan.go

@@ -40,11 +40,11 @@ func Scan(s *server.Server) http.HandlerFunc {
 
 		items := make([]types.ScanItem, 0, len(keys))
 		for i := range keys {
-			parsed, raw := utils.ParseValue(values[i])
+			parsed, _ := utils.ParseValue(values[i])
 			items = append(items, types.ScanItem{
 				Key:      string(keys[i]),
 				Value:    parsed,
-				RawValue: raw,
+				RawValue: utils.FormatRawValue(values[i]),
 			})
 		}