feat(desktop): add typed inspector panels

Co-Authored-By: Paperclip <noreply@paperclip.ing>

README.md

@@ -82,5 +82,6 @@ pnpm run desktop:tauri:dev
 - 当前前端消费 `backend_bootstrap`、`test_redis_connection`、`browse_redis_keys`、`read_redis_value`、`write_redis_value` 和 `execute_redis_command`；浏览器态仍保持明确的 demo fallback。
 - 当前前端还通过共享错误映射层统一消费 `redis-core` 的稳定错误码，使连接测试、浏览、读取、保存、TTL 和命令执行失败都落到一致的操作提示上。
 - `inspect_redis_key` 与 `update_redis_key_ttl` 已在桌面桥可用；当前 UI 已暴露 TTL 设置与移除控制，但删除执行仍保持未开放状态。
+- inspector 现在对 `hash/list/set/zset/stream` 提供结构化只读面板，不再要求操作者从原始 JSON 文本中手动解析 typed value。
 - 连接测试、key browse、value inspector 和命令托盘在 Tauri 桌面运行时走真实后端桥；浏览器态 `pnpm run desktop:dev` 会明确回退到 demo 数据，不伪装成真实 Redis 行为。
 - 具体 UI/UX 边界与 QA 验收入口见 `docs/frontend-workspace-baseline.md` 和 `docs/qa/acceptance-matrix.md`。

apps/desktop/src/App.tsx

@@ -45,6 +45,10 @@ import {
   toBackendErrorNotice,
   type OperatorNotice,
 } from "./lib/operator-notices";
+import {
+  buildStructuredInspectorSections,
+  type StructuredInspectorSection,
+} from "./lib/structured-inspector";
 import { cn } from "./lib/utils";
 
 declare const __APP_VERSION__: string;
@@ -439,6 +443,14 @@ function App() {
   const inspectorText = tauriAvailable
     ? formatInspectorValue(selectedValueRecord, selectedKey, isInspectorLoading)
     : (selectedKey?.value ?? "");
+  const structuredInspectorSections = tauriAvailable
+    ? buildStructuredInspectorSections(selectedValueRecord)
+    : [];
+  const showStructuredInspector =
+    selectedKey !== null &&
+    !isInspectorLoading &&
+    structuredInspectorSections.length > 0 &&
+    !isEditable;
 
   const supportNote = tauriAvailable
     ? buildLiveSupportNote(selectedValueRecord, selectedKey)
@@ -1662,15 +1674,20 @@ function App() {
                   </div>
 
                   {selectedKey ? (
-                    <Textarea
-                      value={isEditable ? draftValue : inspectorText}
-                      onChange={(event) => setDraftValue(event.target.value)}
-                      readOnly={!isEditable}
-                      className={cn(
-                        "mt-3 h-64 resize-none font-mono",
-                        !isEditable && "border-[var(--line-soft)] bg-[var(--surface-muted)] text-[var(--ink-soft)]",
-                      )}
-                    />
+                    showStructuredInspector ? (
+                      <StructuredInspectorPanels sections={structuredInspectorSections} />
+                    ) : (
+                      <Textarea
+                        value={isEditable ? draftValue : inspectorText}
+                        onChange={(event) => setDraftValue(event.target.value)}
+                        readOnly={!isEditable}
+                        className={cn(
+                          "mt-3 h-64 resize-none font-mono",
+                          !isEditable &&
+                            "border-[var(--line-soft)] bg-[var(--surface-muted)] text-[var(--ink-soft)]",
+                        )}
+                      />
+                    )
                   ) : (
                     <div className="mt-3 flex h-64 items-center justify-center rounded-[22px] border border-dashed border-[var(--line-strong)] bg-[var(--surface-muted)] px-6 text-center text-sm text-[var(--ink-soft)]">
                       No key matches the current pattern in {activeDb}. Clear or adjust the search to restore an inspector target.
@@ -1944,6 +1961,85 @@ function InfoCard({
   );
 }
 
+function StructuredInspectorPanels({
+  sections,
+}: {
+  sections: StructuredInspectorSection[];
+}) {
+  return (
+    <div className="mt-3 h-64 space-y-3 overflow-auto pr-1">
+      {sections.map((section) => (
+        <section
+          key={section.id}
+          className="rounded-[22px] border border-[var(--line-soft)] bg-[var(--surface-muted)] p-4"
+        >
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <p className="text-sm font-medium text-[var(--ink-0)]">{section.title}</p>
+              <p className="mt-1 text-sm text-[var(--ink-soft)]">{section.summary}</p>
+            </div>
+            <Badge variant="neutral">{section.rows.length} rows</Badge>
+          </div>
+
+          <div className="mt-4 hidden grid-cols-[minmax(0,0.38fr)_minmax(0,0.62fr)] gap-3 px-1 sm:grid">
+            <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">
+              {section.primaryLabel}
+            </p>
+            <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">
+              {section.secondaryLabel}
+            </p>
+          </div>
+
+          <div className="mt-3 space-y-2">
+            {section.rows.map((row) => (
+              <div
+                key={row.id}
+                className="grid gap-3 rounded-[18px] border border-[var(--line-soft)] bg-[var(--surface-base)] p-3 sm:grid-cols-[minmax(0,0.38fr)_minmax(0,0.62fr)]"
+              >
+                <div>
+                  <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)] sm:hidden">
+                    {section.primaryLabel}
+                  </p>
+                  <p className="mt-1 break-all font-mono text-sm text-[var(--ink-0)] sm:mt-0">
+                    {row.primary}
+                  </p>
+                </div>
+
+                <div>
+                  <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)] sm:hidden">
+                    {section.secondaryLabel}
+                  </p>
+                  <p className="mt-1 break-all font-mono text-sm text-[var(--ink-0)] sm:mt-0">
+                    {row.secondary}
+                  </p>
+                </div>
+
+                {row.detailLines && row.detailLines.length > 0 ? (
+                  <div className="sm:col-span-2">
+                    <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">
+                      Payload
+                    </p>
+                    <div className="mt-2 space-y-2">
+                      {row.detailLines.map((detail) => (
+                        <div
+                          key={`${row.id}-${detail}`}
+                          className="rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-muted)] px-3 py-2 font-mono text-xs text-[var(--ink-soft)]"
+                        >
+                          {detail}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
+
 function isTauriRuntimeAvailable() {
   return typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
 }
@@ -2281,7 +2377,7 @@ function buildLiveSupportNote(record: RedisValueRecord | null, selectedKey: KeyR
     case "set":
     case "sorted_set":
     case "stream":
-      return `${formatRedisKeyTypeLabel(record.metadata.key_type)} values are loaded live and remain explicitly read only in the current desktop contract.`;
+      return `${formatRedisKeyTypeLabel(record.metadata.key_type)} values are loaded live into structured read-only panels in the current desktop contract.`;
     default:
       return "The current key is available for live inspection through the desktop backend contract.";
   }

apps/desktop/src/lib/structured-inspector.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { buildStructuredInspectorSections } from "./structured-inspector";
+
+describe("structured inspector sections", () => {
+  it("renders hash entries as field/value rows", () => {
+    expect(
+      buildStructuredInspectorSections({
+        metadata: { key_type: "hash" },
+        data: {
+          kind: "hash",
+          entries: [
+            {
+              field: { kind: "string", value: "region" },
+              value: { kind: "string", value: "eu-west-1" },
+            },
+          ],
+        },
+      }),
+    ).toEqual([
+      {
+        id: "hash",
+        title: "1 field",
+        summary: "Live HGETALL output rendered as field/value rows.",
+        primaryLabel: "Field",
+        secondaryLabel: "Value",
+        rows: [
+          {
+            id: "hash-0",
+            primary: "region",
+            secondary: "eu-west-1",
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("renders sorted sets and stream entries with readable secondary detail", () => {
+    expect(
+      buildStructuredInspectorSections({
+        metadata: { key_type: "stream" },
+        data: {
+          kind: "stream",
+          entries: [
+            {
+              id: "1711642800000-0",
+              fields: [
+                {
+                  field: { kind: "string", value: "event" },
+                  value: { kind: "string", value: "ttl-updated" },
+                },
+                {
+                  field: { kind: "string", value: "payload" },
+                  value: { kind: "binary", bytes: [1, 2, 3, 4] },
+                },
+              ],
+            },
+          ],
+        },
+      }),
+    ).toEqual([
+      {
+        id: "stream",
+        title: "1 entry",
+        summary: "Live XRANGE output rendered as stream entries with inline field payloads.",
+        primaryLabel: "Entry",
+        secondaryLabel: "Fields",
+        rows: [
+          {
+            id: "1711642800000-0",
+            primary: "1711642800000-0",
+            secondary: "2 fields",
+            detailLines: ["event = ttl-updated", "payload = [binary 4 bytes]"],
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("keeps string and missing payloads on the existing textarea path", () => {
+    expect(
+      buildStructuredInspectorSections({
+        metadata: { key_type: "string" },
+        data: {
+          kind: "string",
+          value: { kind: "string", value: "hello" },
+        },
+      }),
+    ).toEqual([]);
+
+    expect(
+      buildStructuredInspectorSections({
+        metadata: { key_type: "string" },
+        data: {
+          kind: "missing",
+        },
+      }),
+    ).toEqual([]);
+  });
+});

apps/desktop/src/lib/structured-inspector.ts

@@ -0,0 +1,155 @@
+export type RedisValueContent = 
+  | { kind: "string"; value: string }
+  | { kind: "binary"; bytes: number[] };
+
+export type RedisFieldValueEntry = {
+  field: RedisValueContent;
+  value: RedisValueContent;
+};
+
+export type RedisSortedSetEntry = {
+  member: RedisValueContent;
+  score: string;
+};
+
+export type RedisStreamEntry = {
+  id: string;
+  fields: RedisFieldValueEntry[];
+};
+
+export type RedisValueData =
+  | { kind: "missing" }
+  | { kind: "string"; value: RedisValueContent }
+  | { kind: "hash"; entries: RedisFieldValueEntry[] }
+  | { kind: "list"; items: RedisValueContent[] }
+  | { kind: "set"; members: RedisValueContent[] }
+  | { kind: "sorted_set"; entries: RedisSortedSetEntry[] }
+  | { kind: "stream"; entries: RedisStreamEntry[] };
+
+export type StructuredValueRecord = {
+  metadata: {
+    key_type: string;
+  };
+  data: RedisValueData;
+};
+
+export type StructuredInspectorRow = {
+  id: string;
+  primary: string;
+  secondary: string;
+  detailLines?: string[];
+};
+
+export type StructuredInspectorSection = {
+  id: string;
+  title: string;
+  summary: string;
+  primaryLabel: string;
+  secondaryLabel: string;
+  rows: StructuredInspectorRow[];
+};
+
+export function buildStructuredInspectorSections(
+  record: StructuredValueRecord | null,
+): StructuredInspectorSection[] {
+  if (!record) {
+    return [];
+  }
+
+  switch (record.data.kind) {
+    case "hash":
+      return [
+        {
+          id: "hash",
+          title: `${record.data.entries.length} field${record.data.entries.length === 1 ? "" : "s"}`,
+          summary: "Live HGETALL output rendered as field/value rows.",
+          primaryLabel: "Field",
+          secondaryLabel: "Value",
+          rows: record.data.entries.map((entry, index) => ({
+            id: `hash-${index}`,
+            primary: formatStructuredContent(entry.field),
+            secondary: formatStructuredContent(entry.value),
+          })),
+        },
+      ];
+    case "list":
+      return [
+        {
+          id: "list",
+          title: `${record.data.items.length} item${record.data.items.length === 1 ? "" : "s"}`,
+          summary: "Live LRANGE output rendered in the preserved list order.",
+          primaryLabel: "Index",
+          secondaryLabel: "Value",
+          rows: record.data.items.map((item, index) => ({
+            id: `list-${index}`,
+            primary: `[${index}]`,
+            secondary: formatStructuredContent(item),
+          })),
+        },
+      ];
+    case "set":
+      return [
+        {
+          id: "set",
+          title: `${record.data.members.length} member${record.data.members.length === 1 ? "" : "s"}`,
+          summary: "Live SMEMBERS output rendered as unique set members.",
+          primaryLabel: "Member",
+          secondaryLabel: "Value",
+          rows: record.data.members.map((member, index) => ({
+            id: `set-${index}`,
+            primary: `member ${index + 1}`,
+            secondary: formatStructuredContent(member),
+          })),
+        },
+      ];
+    case "sorted_set":
+      return [
+        {
+          id: "sorted-set",
+          title: `${record.data.entries.length} scored member${record.data.entries.length === 1 ? "" : "s"}`,
+          summary: "Live ZRANGE ... WITHSCORES output rendered as member/score pairs.",
+          primaryLabel: "Member",
+          secondaryLabel: "Score",
+          rows: record.data.entries.map((entry, index) => ({
+            id: `sorted-set-${index}`,
+            primary: formatStructuredContent(entry.member),
+            secondary: entry.score,
+          })),
+        },
+      ];
+    case "stream":
+      return [
+        {
+          id: "stream",
+          title: `${record.data.entries.length} entr${record.data.entries.length === 1 ? "y" : "ies"}`,
+          summary: "Live XRANGE output rendered as stream entries with inline field payloads.",
+          primaryLabel: "Entry",
+          secondaryLabel: "Fields",
+          rows: record.data.entries.map((entry) => ({
+            id: entry.id,
+            primary: entry.id,
+            secondary: `${entry.fields.length} field${entry.fields.length === 1 ? "" : "s"}`,
+            detailLines: entry.fields.map(
+              (field) =>
+                `${formatStructuredContent(field.field)} = ${formatStructuredContent(field.value)}`,
+            ),
+          })),
+        },
+      ];
+    case "missing":
+    case "string":
+    default:
+      return [];
+  }
+}
+
+function formatStructuredContent(content: RedisValueContent) {
+  switch (content.kind) {
+    case "string":
+      return content.value;
+    case "binary":
+      return `[binary ${content.bytes.length} bytes]`;
+    default:
+      return "unsupported";
+  }
+}

docs/frontend-workspace-baseline.md

@@ -87,6 +87,7 @@ Use a four-zone workspace:
 - shadcn-style UI primitives are used locally for buttons, inputs, textareas, badges, and dialogs.
 - Browser-only dev mode uses explicit demo fallback so the visible shell can still be reviewed without a Tauri runtime.
 - Tauri desktop mode now allows live connection tests, live key browsing, live value inspection, string save for supported keys, live TTL updates, and live command execution while keeping browser dev mode on explicit demo fallback.
+- Non-string live values now render in structured read-only panels for `hash`, `list`, `set`, `zset`, and `stream`, so operators can scan typed payloads without reading raw JSON dumps.
 - The visible shell now validates draft-connection name, host, port, and DB input before creation, and prevents duplicate profile names inside the local shell state.
 - Zero-result key searches now place the inspector into an explicit empty state instead of leaving a stale key visible.
 - Frontend error handling now routes stable backend error codes through a shared operator-facing notice layer so live failures render with consistent copy and banner tone across connection, browse, inspect, write, TTL, and command flows.
@@ -103,6 +104,7 @@ Use a four-zone workspace:
 - Invalid draft connections cannot be created from the visible shell.
 - Live backend failures are shown through a consistent banner treatment instead of per-surface ad hoc copy.
 - Non-string keys are explicitly read-only.
+- Non-string keys render as structured typed panels instead of raw JSON text blobs.
 - String keys show a save affordance near the value surface.
 - TTL controls stay beside the inspector metadata and expose both set and remove flows.
 - Delete requires a second confirmation step that includes key name and DB context.

docs/qa/acceptance-matrix.md

@@ -24,7 +24,7 @@ Owner: QA Engineer
 | Connection management | Create a validated draft profile, keep DB context visible, and run the existing live connection-test bridge from Tauri desktop mode | Invalid host, bad port, bad password, duplicate name, timeout, and unreachable server are handled with consistent operator-facing messaging | Tauri run log, screenshots, repeatable steps, Redis target | Partially blocked: the shell now validates draft name/host/port/DB locally, maps backend error codes into shared notices, and calls the real connection-test command, but profile persistence and full evidence capture are not complete |
 | Key browsing | Browse DBs and keys, paginate or virtualize large lists, view metadata | Empty DB, deleted key during browse, permission error, and connection drop do not crash UI, and live failures reuse the shared error banner treatment | Seed dataset, result screenshots, observed limits | Partially blocked: desktop UI now calls the live browse bridge with `SCAN` pagination and metadata, but fixture-backed Tauri screenshots and measured limits are still pending |
 | Search | Search by key name or pattern and return matching set within documented limits | No matches, invalid pattern, and very large result sets are handled predictably | Seed dataset, search queries, measured behavior | Partially blocked: desktop UI now maps search to live browse requests, but fixture-backed evidence and measured limits are still pending |
-| Value editing | Open supported value types, edit, save, and refresh persisted value | Concurrent modification, invalid payload, and permission error preserve user context and surface failure through the shared operator notice layer | Before/after values, screenshots, repeatable steps | Partially blocked: string read/save/refresh is wired through the live desktop bridge and non-string types stay explicitly read only, but fixture-backed evidence and broader editing scope remain pending |
+| Value editing | Open supported value types, edit, save, and refresh persisted value | Concurrent modification, invalid payload, and permission error preserve user context and surface failure through the shared operator notice layer | Before/after values, screenshots, repeatable steps | Partially blocked: string read/save/refresh is wired through the live desktop bridge, and non-string types now render in structured read-only inspector panels, but fixture-backed evidence and broader editing scope remain pending |
 | TTL operations | View TTL, set TTL, remove TTL, and verify expiration behavior | Invalid TTL, already expired key, and permission error handled safely with consistent banner feedback | Seed dataset, timestamps, verification steps | Partially blocked: desktop UI now exposes live TTL set and remove controls through the existing contract, but seeded-fixture validation evidence is still missing |
 | Command console | Execute safe Redis commands in Tauri desktop mode and show result or error output with explicit live/demo labeling | Invalid command, long-running command, and blocked dangerous command are handled predictably, and backend failures reuse the shared operator notice mapping | Command transcript, screenshots, allow or deny rules | Partially blocked: the desktop UI now calls the real command execution bridge, but it is not yet validated against a shared live Redis fixture and dangerous mutations still stay blocked at shell level |
 | Dangerous operation confirmation | Delete, flush, overwrite, or destructive commands require explicit confirmation | Cancel path does not mutate data; confirm path mutates only intended scope | Confirmation UX screenshots, before/after data | Blocked: feature not implemented |

plans/2026-03-28-hac-18-typed-inspector-panels.md

@@ -0,0 +1,33 @@
+# HAC-18 Typed Inspector Panels
+
+Date: 2026-03-28 UTC
+Owner: Senior Frontend Engineer
+Issue: HAC-18
+
+## Goal
+
+Ship one more visible desktop feature slice without waiting on GUI screenshot capture or AppImage validation.
+
+## Selected Scope
+
+- upgrade the inspector for non-string Redis values from raw JSON text to structured read-only panels
+- keep the existing string edit flow, TTL actions, and error notice foundation unchanged
+- stay within the current `read_redis_value` contract and avoid backend expansion
+- add minimum frontend tests around the new structured presentation mapping
+
+## Non-Goals
+
+- no delete execution
+- no backend contract changes
+- no packaging or screenshot evidence work in this heartbeat
+- no full redesign of the existing desktop shell
+
+## Verification Plan
+
+- `pnpm --filter @redis-gui/desktop test`
+- `pnpm run desktop:build`
+
+## Expected User Impact
+
+- operators can scan `hash/list/set/zset/stream` payloads directly in the inspector without mentally parsing raw JSON
+- the read-only boundary for non-string types remains explicit, but the viewing experience becomes materially more usable