From 04a61fda191136d4c1f4e7035e144ea22f9caead Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Thu, 13 Aug 2026 04:00:47 -0400
Subject: [PATCH] fix(chat): preserve large ids in JSON detail viewer

---
 mateclaw-ui/src/components/chat/JsonView.vue  |  3 +-
 .../chat/__tests__/jsonViewFormat.test.ts     | 13 +++++
 .../src/components/chat/jsonViewFormat.ts     | 53 +++++++++++++++++++
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 mateclaw-ui/src/components/chat/__tests__/jsonViewFormat.test.ts
 create mode 100644 mateclaw-ui/src/components/chat/jsonViewFormat.ts

diff --git a/mateclaw-ui/src/components/chat/JsonView.vue b/mateclaw-ui/src/components/chat/JsonView.vue
index de1e905c..12047fee 100644
--- a/mateclaw-ui/src/components/chat/JsonView.vue
+++ b/mateclaw-ui/src/components/chat/JsonView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { prettyPrintJsonForDisplay } from './jsonViewFormat'
 
 /**
  * Lightweight, dependency-free JSON viewer with syntax highlighting.
@@ -40,7 +41,7 @@ const parsed = computed(() => {
   const s = (props.raw || '').trim()
   if (!s) return { empty: true, isJson: false, html: '' }
   try {
-    const pretty = JSON.stringify(JSON.parse(s), null, 2)
+    const pretty = prettyPrintJsonForDisplay(s)
     return { empty: false, isJson: true, html: highlight(pretty) }
   } catch {
     return { empty: false, isJson: false, html: escapeHtml(props.raw || '') }
diff --git a/mateclaw-ui/src/components/chat/__tests__/jsonViewFormat.test.ts b/mateclaw-ui/src/components/chat/__tests__/jsonViewFormat.test.ts
new file mode 100644
index 00000000..3a93d6c5
--- /dev/null
+++ b/mateclaw-ui/src/components/chat/__tests__/jsonViewFormat.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { prettyPrintJsonForDisplay } from '../jsonViewFormat'
+
+describe('prettyPrintJsonForDisplay', () => {
+  it('preserves large integer text in tool arguments instead of rounding through JS Number', () => {
+    const raw = '{"agentId":2079862124134313986,"type":"reference"}'
+
+    const pretty = prettyPrintJsonForDisplay(raw)
+
+    expect(pretty).toContain('2079862124134313986')
+    expect(pretty).not.toContain('2079862124134314000')
+  })
+})
diff --git a/mateclaw-ui/src/components/chat/jsonViewFormat.ts b/mateclaw-ui/src/components/chat/jsonViewFormat.ts
new file mode 100644
index 00000000..f4308e44
--- /dev/null
+++ b/mateclaw-ui/src/components/chat/jsonViewFormat.ts
@@ -0,0 +1,53 @@
+export function prettyPrintJsonForDisplay(raw: string): string {
+  // Validate JSON, but do not use the parsed value for rendering: JSON.parse
+  // coerces 19-digit Snowflake IDs through JS Number and changes their text.
+  JSON.parse(raw)
+  return prettyPrintJsonLexically(raw)
+}
+
+function prettyPrintJsonLexically(raw: string): string {
+  let out = ''
+  let indent = 0
+  let inString = false
+  let escaped = false
+  const pad = () => '  '.repeat(indent)
+
+  for (let i = 0; i < raw.length; i++) {
+    const ch = raw[i]
+
+    if (inString) {
+      out += ch
+      if (escaped) {
+        escaped = false
+      } else if (ch === '\\') {
+        escaped = true
+      } else if (ch === '"') {
+        inString = false
+      }
+      continue
+    }
+
+    if (/\s/.test(ch)) continue
+
+    if (ch === '"') {
+      inString = true
+      out += ch
+    } else if (ch === '{' || ch === '[') {
+      out += ch
+      indent++
+      out += '\n' + pad()
+    } else if (ch === '}' || ch === ']') {
+      indent = Math.max(0, indent - 1)
+      out = out.replace(/[ \t]*$/, '')
+      out += '\n' + pad() + ch
+    } else if (ch === ',') {
+      out += ch + '\n' + pad()
+    } else if (ch === ':') {
+      out += ': '
+    } else {
+      out += ch
+    }
+  }
+
+  return out
+}